/* =========================================================
   UBICACIÓN:
   frontend/src/pages/facturacion-cobranzas/resumenes-clientes/
   resumenes-clientes.css

   WIRTZ HUB · FACTURACIÓN Y COBRANZAS
   RESÚMENES DE CLIENTES

   PARTE 1 DE 3
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

#pageResumenesClientes {
  --rc-bg:
    #f5f7fa;

  --rc-surface:
    #ffffff;

  --rc-surface-soft:
    #f8fafc;

  --rc-surface-strong:
    #f1f5f9;

  --rc-surface-hover:
    #f3f6f9;

  --rc-text:
    #0f172a;

  --rc-text-soft:
    #334155;

  --rc-muted:
    #64748b;

  --rc-muted-2:
    #94a3b8;

  --rc-border:
    #dbe2ea;

  --rc-border-strong:
    #cbd5e1;

  --rc-black:
    #050505;

  --rc-white:
    #ffffff;

  --rc-primary:
    #111827;

  --rc-primary-hover:
    #020617;

  --rc-success:
    #15803d;

  --rc-success-soft:
    #ecfdf3;

  --rc-danger:
    #b42318;

  --rc-danger-soft:
    #fff1f0;

  --rc-warning:
    #b45309;

  --rc-warning-soft:
    #fff7ed;

  --rc-info:
    #1d4ed8;

  --rc-info-soft:
    #eff6ff;

  --rc-shadow-xs:
    0 1px 2px
    rgba(
      15,
      23,
      42,
      0.04
    );

  --rc-shadow-sm:
    0 6px 18px
    rgba(
      15,
      23,
      42,
      0.06
    );

  --rc-shadow-md:
    0 16px 40px
    rgba(
      15,
      23,
      42,
      0.10
    );

  --rc-radius-xs:
    7px;

  --rc-radius-sm:
    9px;

  --rc-radius-md:
    13px;

  --rc-radius-lg:
    17px;

  --rc-transition:
    150ms ease;
}


/* =========================================================
   DARK
   ========================================================= */

html[data-theme="dark"]
#pageResumenesClientes,
body[data-theme="dark"]
#pageResumenesClientes {
  --rc-bg:
    #000000;

  --rc-surface:
    #050505;

  --rc-surface-soft:
    #090909;

  --rc-surface-strong:
    #0d0d0d;

  --rc-surface-hover:
    #101010;

  --rc-text:
    #ffffff;

  --rc-text-soft:
    #e5e7eb;

  --rc-muted:
    #a1a1aa;

  --rc-muted-2:
    #71717a;

  --rc-border:
    #232323;

  --rc-border-strong:
    #363636;

  --rc-black:
    #000000;

  --rc-white:
    #ffffff;

  --rc-primary:
    #ffffff;

  --rc-primary-hover:
    #e5e7eb;

  --rc-success:
    #4ade80;

  --rc-success-soft:
    #07140c;

  --rc-danger:
    #ff6b6b;

  --rc-danger-soft:
    #180808;

  --rc-warning:
    #fbbf24;

  --rc-warning-soft:
    #181106;

  --rc-info:
    #60a5fa;

  --rc-info-soft:
    #07111f;

  --rc-shadow-xs:
    none;

  --rc-shadow-sm:
    none;

  --rc-shadow-md:
    none;
}


/* =========================================================
   RESET LOCAL
   ========================================================= */

#pageResumenesClientes,
#pageResumenesClientes *,
#pageResumenesClientes *::before,
#pageResumenesClientes *::after {
  box-sizing:
    border-box;
}


#pageResumenesClientes {
  width:
    100%;

  min-width:
    0;

  background:
    var(--rc-bg);

  color:
    var(--rc-text);
}


/* =========================================================
   PAGE
   ========================================================= */

.rc-page {
  width:
    100%;

  min-width:
    0;
}


.rc-container {
  width:
    100%;

  max-width:
    none;

  min-width:
    0;

  margin:
    0 auto;

  padding:
    22px
    24px
    36px;
}


/* =========================================================
   PAGE HEADER
   ========================================================= */

.rc-page-header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    22px;

  width:
    100%;

  min-width:
    0;

  margin-bottom:
    18px;
}


.rc-page-header__copy {
  min-width:
    0;
}


.rc-page-header__eyebrow {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  margin-bottom:
    8px;

  color:
    var(--rc-muted);

  font-size:
    10px;

  font-weight:
    850;

  letter-spacing:
    0.045em;

  text-transform:
    uppercase;
}


.rc-page-header__eyebrow-icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    26px;

  height:
    26px;

  border:
    1px solid var(--rc-border-strong);

  border-radius:
    7px;

  background:
    var(--rc-surface);

  color:
    var(--rc-text);
}


.rc-page-header h1 {
  margin:
    0;

  color:
    var(--rc-text);

  font-size:
    clamp(
      24px,
      2vw,
      32px
    );

  font-weight:
    900;

  line-height:
    1.08;

  letter-spacing:
    -0.04em;
}


.rc-page-header p {
  max-width:
    820px;

  margin:
    7px
    0
    0;

  color:
    var(--rc-muted);

  font-size:
    12px;

  font-weight:
    600;

  line-height:
    1.5;
}


.rc-page-header__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex:
    0 0 auto;

  gap:
    8px;

  flex-wrap:
    wrap;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.rc-btn {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  min-height:
    39px;

  padding:
    0
    13px;

  border:
    1px solid transparent;

  border-radius:
    8px;

  outline:
    none;

  font-family:
    inherit;

  font-size:
    11px;

  font-weight:
    850;

  line-height:
    1;

  white-space:
    nowrap;

  cursor:
    pointer;

  transition:
    background var(--rc-transition),
    border-color var(--rc-transition),
    color var(--rc-transition),
    transform var(--rc-transition),
    opacity var(--rc-transition);
}


.rc-btn:hover:not(:disabled) {
  transform:
    translateY(-1px);
}


.rc-btn:active:not(:disabled) {
  transform:
    translateY(0);
}


.rc-btn:disabled {
  opacity:
    0.42;

  cursor:
    not-allowed;
}


.rc-btn--primary {
  border-color:
    #111827;

  background:
    #111827;

  color:
    #ffffff;
}


.rc-btn--primary:hover:not(:disabled) {
  border-color:
    #000000;

  background:
    #000000;

  color:
    #ffffff;
}


.rc-btn--secondary {
  border-color:
    var(--rc-border-strong);

  background:
    var(--rc-surface);

  color:
    var(--rc-text);
}


.rc-btn--secondary:hover:not(:disabled) {
  border-color:
    var(--rc-text-soft);

  background:
    var(--rc-surface-soft);

  color:
    var(--rc-text);
}


.rc-btn--dark {
  border-color:
    #000000;

  background:
    #000000;

  color:
    #ffffff;
}


.rc-btn--small {
  min-height:
    33px;

  padding:
    0
    10px;

  font-size:
    10px;
}


html[data-theme="dark"]
#pageResumenesClientes
.rc-btn--primary,
body[data-theme="dark"]
#pageResumenesClientes
.rc-btn--primary,
html[data-theme="dark"]
#pageResumenesClientes
.rc-btn--dark,
body[data-theme="dark"]
#pageResumenesClientes
.rc-btn--dark {
  border-color:
    #ffffff;

  background:
    #ffffff;

  color:
    #000000;
}


html[data-theme="dark"]
#pageResumenesClientes
.rc-btn--primary:hover:not(:disabled),
body[data-theme="dark"]
#pageResumenesClientes
.rc-btn--primary:hover:not(:disabled),
html[data-theme="dark"]
#pageResumenesClientes
.rc-btn--dark:hover:not(:disabled),
body[data-theme="dark"]
#pageResumenesClientes
.rc-btn--dark:hover:not(:disabled) {
  border-color:
    #e5e7eb;

  background:
    #e5e7eb;

  color:
    #000000;
}


/* =========================================================
   ICON BUTTON
   ========================================================= */

.rc-icon-btn {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

  width:
    34px;

  height:
    34px;

  padding:
    0;

  border:
    1px solid var(--rc-border);

  border-radius:
    8px;

  background:
    var(--rc-surface);

  color:
    var(--rc-muted);

  cursor:
    pointer;

  transition:
    background var(--rc-transition),
    color var(--rc-transition),
    border-color var(--rc-transition);
}


.rc-icon-btn:hover {
  border-color:
    var(--rc-border-strong);

  background:
    var(--rc-surface-soft);

  color:
    var(--rc-text);
}


/* =========================================================
   INPUTS
   ========================================================= */

.rc-input,
.rc-select {
  width:
    100%;

  min-width:
    0;

  height:
    38px;

  padding:
    0
    10px;

  border:
    1px solid var(--rc-border-strong);

  border-radius:
    8px;

  outline:
    none;

  background:
    var(--rc-surface);

  color:
    var(--rc-text);

  font-family:
    inherit;

  font-size:
    11px;

  font-weight:
    650;

  transition:
    border-color var(--rc-transition),
    box-shadow var(--rc-transition),
    background var(--rc-transition);
}


.rc-select {
  cursor:
    pointer;
}


.rc-input:focus,
.rc-select:focus {
  border-color:
    var(--rc-text);

  box-shadow:
    0 0 0 3px
    rgba(
      15,
      23,
      42,
      0.06
    );
}


html[data-theme="dark"]
#pageResumenesClientes
.rc-input:focus,
body[data-theme="dark"]
#pageResumenesClientes
.rc-input:focus,
html[data-theme="dark"]
#pageResumenesClientes
.rc-select:focus,
body[data-theme="dark"]
#pageResumenesClientes
.rc-select:focus {
  box-shadow:
    0 0 0 3px
    rgba(
      255,
      255,
      255,
      0.08
    );
}


.rc-input::placeholder {
  color:
    var(--rc-muted-2);

  font-weight:
    500;
}


/* =========================================================
   TOOLBAR DEL RESUMEN
   ========================================================= */

.rc-toolbar {
  position:
    relative;

  z-index:
    10;

  display:
    grid;

  grid-template-columns:
    110px
    minmax(
      140px,
      0.6fr
    )
    minmax(
      140px,
      0.6fr
    )
    auto;

  align-items:
    end;

  gap:
    10px;

  width:
    100%;

  min-width:
    0;

  margin-bottom:
    16px;

  padding:
    13px;

  border:
    1px solid var(--rc-border);

  border-radius:
    var(--rc-radius-md);

  background:
    var(--rc-surface);

  box-shadow:
    var(--rc-shadow-xs);
}


.rc-toolbar__field {
  min-width:
    0;
}


.rc-toolbar__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;
}


.rc-label {
  display:
    block;

  margin-bottom:
    5px;

  color:
    var(--rc-text-soft);

  font-size:
    9px;

  font-weight:
    900;

  letter-spacing:
    0.045em;

  text-transform:
    uppercase;
}


/* =========================================================
   SELECT CONTROL
   ========================================================= */

.rc-select-control {
  position:
    relative;

  min-width:
    0;
}


.rc-select-control .rc-select {
  appearance:
    none;

  -webkit-appearance:
    none;

  padding-right:
    32px;
}


.rc-select-control > svg,
.rc-select-control > i {
  position:
    absolute;

  top:
    50%;

  right:
    10px;

  transform:
    translateY(-50%);

  color:
    var(--rc-muted);

  pointer-events:
    none;
}


/* =========================================================
   WORKSPACE
   ========================================================= */

.rc-workspace,
.rc-client-workspace {
  width:
    100%;

  min-width:
    0;
}


.rc-client-workspace {
  display:
    flex;

  flex-direction:
    column;

  gap:
    14px;
}


/* =========================================================
   LISTA CLIENTES · SHELL
   ========================================================= */

.rc-client-list-shell {
  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;

  width:
    100%;

  min-width:
    0;
}


/* =========================================================
   TOOLBAR CLIENTES
   ========================================================= */

.rc-client-list-toolbar {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  width:
    100%;

  min-width:
    0;

  padding:
    12px;

  border:
    1px solid var(--rc-border-strong);

  border-radius:
    var(--rc-radius-md);

  background:
    var(--rc-surface);

  box-shadow:
    var(--rc-shadow-xs);
}


/* =========================================================
   SEARCH CLIENTES
   ========================================================= */

.rc-client-list-search {
  position:
    relative;

  flex:
    1 1 auto;

  min-width:
    220px;

  max-width:
    720px;
}


.rc-client-list-search__icon {
  position:
    absolute;

  top:
    50%;

  left:
    12px;

  z-index:
    2;

  display:
    flex;

  align-items:
    center;

  transform:
    translateY(-50%);

  color:
    var(--rc-muted);

  pointer-events:
    none;
}


.rc-client-list-search input {
  width:
    100%;

  height:
    40px;

  padding:
    0
    40px
    0
    38px;

  border:
    1px solid var(--rc-border-strong);

  border-radius:
    9px;

  outline:
    none;

  background:
    var(--rc-surface-soft);

  color:
    var(--rc-text);

  font-family:
    inherit;

  font-size:
    11px;

  font-weight:
    650;

  transition:
    border-color var(--rc-transition),
    background var(--rc-transition),
    box-shadow var(--rc-transition);
}


.rc-client-list-search input::placeholder {
  color:
    var(--rc-muted-2);

  font-weight:
    500;
}


.rc-client-list-search input:focus {
  border-color:
    var(--rc-text);

  background:
    var(--rc-surface);

  box-shadow:
    0 0 0 3px
    rgba(
      15,
      23,
      42,
      0.05
    );
}


.rc-client-list-search__clear {
  position:
    absolute;

  top:
    50%;

  right:
    7px;

  z-index:
    3;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    28px;

  height:
    28px;

  padding:
    0;

  border:
    0;

  border-radius:
    7px;

  background:
    transparent;

  color:
    var(--rc-muted);

  cursor:
    pointer;

  transform:
    translateY(-50%);

  transition:
    background var(--rc-transition),
    color var(--rc-transition);
}


.rc-client-list-search__clear:hover {
  background:
    var(--rc-surface-strong);

  color:
    var(--rc-text);
}


/* =========================================================
   TOOLBAR ACTIONS
   ========================================================= */

.rc-client-list-toolbar__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex:
    0 0 auto;

  gap:
    8px;
}


/* =========================================================
   BOTÓN FILTROS
   ========================================================= */

.rc-client-filter-button {
  position:
    relative;

  min-width:
    104px;
}


.rc-client-filter-button.is-active {
  border-color:
    var(--rc-text);

  background:
    var(--rc-surface-strong);

  color:
    var(--rc-text);
}


.rc-client-filter-button__count {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    18px;

  height:
    18px;

  padding:
    0
    5px;

  border-radius:
    999px;

  background:
    var(--rc-text);

  color:
    var(--rc-surface);

  font-size:
    8px;

  font-weight:
    900;
}


html[data-theme="dark"]
#pageResumenesClientes
.rc-client-filter-button__count,
body[data-theme="dark"]
#pageResumenesClientes
.rc-client-filter-button__count {
  background:
    #ffffff;

  color:
    #000000;
}


/* =========================================================
   ORDEN
   ========================================================= */

.rc-client-order {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  min-width:
    0;
}


.rc-client-order > span {
  color:
    var(--rc-muted);

  font-size:
    9px;

  font-weight:
    800;

  white-space:
    nowrap;
}


.rc-client-order__select {
  width:
    178px;

  height:
    39px;

  font-size:
    10px;

  font-weight:
    750;
}


/* =========================================================
   PANEL FILTROS
   ========================================================= */

.rc-client-filters-panel {
  overflow:
    hidden;

  width:
    100%;

  min-width:
    0;

  border:
    1px solid var(--rc-border-strong);

  border-radius:
    var(--rc-radius-md);

  background:
    var(--rc-surface);

  box-shadow:
    var(--rc-shadow-xs);
}


/* =========================================================
   PANEL FILTROS · HEADER
   ========================================================= */

.rc-client-filters-panel__header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  min-height:
    58px;

  padding:
    11px
    13px;

  border-bottom:
    1px solid var(--rc-border);

  background:
    var(--rc-surface-soft);
}


.rc-client-filters-panel__header > div {
  min-width:
    0;
}


.rc-client-filters-panel__header h3 {
  margin:
    0;

  color:
    var(--rc-text);

  font-size:
    11px;

  font-weight:
    900;
}


.rc-client-filters-panel__header p {
  margin:
    3px
    0
    0;

  color:
    var(--rc-muted);

  font-size:
    9.5px;

  font-weight:
    600;
}


/* =========================================================
   PANEL FILTROS · GRID
   ========================================================= */

.rc-client-filters-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

  gap:
    10px;

  padding:
    13px;
}


.rc-client-filter-field {
  min-width:
    0;
}


.rc-client-filter-field label {
  display:
    block;

  margin-bottom:
    5px;

  color:
    var(--rc-text-soft);

  font-size:
    8.5px;

  font-weight:
    900;

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;
}


/* =========================================================
   CHECKS FILTROS
   ========================================================= */

.rc-client-filters-checks {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    14px;

  padding:
    0
    13px
    13px;
}


.rc-check {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  color:
    var(--rc-text-soft);

  font-size:
    10px;

  font-weight:
    750;

  cursor:
    pointer;
}


.rc-check input {
  width:
    15px;

  height:
    15px;

  margin:
    0;

  accent-color:
    #111827;

  cursor:
    pointer;
}


html[data-theme="dark"]
#pageResumenesClientes
.rc-check input,
body[data-theme="dark"]
#pageResumenesClientes
.rc-check input {
  accent-color:
    #ffffff;
}


/* =========================================================
   PANEL FILTROS · FOOTER
   ========================================================= */

.rc-client-filters-panel__footer {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  padding:
    10px
    13px;

  border-top:
    1px solid var(--rc-border);

  background:
    var(--rc-surface-soft);
}


/* =========================================================
   CHIPS
   ========================================================= */

.rc-client-filter-chips {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  min-width:
    0;

  padding:
    8px
    10px;

  border:
    1px solid var(--rc-border);

  border-radius:
    10px;

  background:
    var(--rc-surface);
}


.rc-client-filter-chips__list {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    6px;

  min-width:
    0;
}


.rc-client-filter-chip {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  min-height:
    26px;

  padding:
    0
    8px;

  border:
    1px solid var(--rc-border-strong);

  border-radius:
    999px;

  background:
    var(--rc-surface-soft);

  color:
    var(--rc-text-soft);

  font-family:
    inherit;

  font-size:
    9px;

  font-weight:
    800;

  cursor:
    pointer;

  transition:
    background var(--rc-transition),
    border-color var(--rc-transition),
    color var(--rc-transition);
}


.rc-client-filter-chip:hover {
  border-color:
    var(--rc-text-soft);

  background:
    var(--rc-surface-strong);

  color:
    var(--rc-text);
}


.rc-client-filter-clear {
  flex:
    0 0 auto;

  padding:
    5px
    7px;

  border:
    0;

  background:
    transparent;

  color:
    var(--rc-muted);

  font-family:
    inherit;

  font-size:
    9px;

  font-weight:
    850;

  cursor:
    pointer;
}


.rc-client-filter-clear:hover {
  color:
    var(--rc-text);

  text-decoration:
    underline;
}


/* =========================================================
   LIST CARD
   ========================================================= */

.rc-client-list-card {
  width:
    100%;

  min-width:
    0;

  overflow:
    hidden;

  border:
    1px solid var(--rc-border-strong);

  border-radius:
    var(--rc-radius-md);

  background:
    var(--rc-surface);

  box-shadow:
    var(--rc-shadow-xs);
}


/* =========================================================
   LIST HEADER
   ========================================================= */

.rc-client-list-header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  min-height:
    61px;

  padding:
    11px
    13px;

  border-bottom:
    1px solid var(--rc-border-strong);

  background:
    var(--rc-surface);
}


.rc-client-list-header > div {
  min-width:
    0;
}


.rc-client-list-header__title {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  min-width:
    0;

  color:
    var(--rc-text);
}


.rc-client-list-header__title > svg,
.rc-client-list-header__title > i {
  flex:
    0 0 auto;

  color:
    var(--rc-muted);
}


.rc-client-list-header__title h3 {
  margin:
    0;

  color:
    var(--rc-text);

  font-size:
    12px;

  font-weight:
    900;
}


.rc-client-list-header__title > span {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    22px;

  height:
    20px;

  padding:
    0
    6px;

  border:
    1px solid var(--rc-border);

  border-radius:
    999px;

  background:
    var(--rc-surface-soft);

  color:
    var(--rc-text-soft);

  font-size:
    8.5px;

  font-weight:
    900;
}


.rc-client-list-header p {
  margin:
    3px
    0
    0;

  color:
    var(--rc-muted);

  font-size:
    9.5px;

  font-weight:
    600;
}


/* =========================================================
   COLUMN HEADER
   ========================================================= */

.rc-client-list {
  width:
    100%;

  min-width:
    0;
}


.rc-client-list__columns {
  display:
    grid;

  grid-template-columns:
    minmax(
      250px,
      1.8fr
    )
    minmax(
      145px,
      0.9fr
    )
    minmax(
      130px,
      0.8fr
    )
    minmax(
      130px,
      0.8fr
    )
    minmax(
      130px,
      0.8fr
    )
    minmax(
      130px,
      0.8fr
    )
    130px;

  align-items:
    center;

  gap:
    10px;

  min-width:
    1080px;

  min-height:
    36px;

  padding:
    0
    12px;

  border-bottom:
    1px solid var(--rc-border-strong);

  background:
    var(--rc-surface-soft);
}


.rc-client-list__columns span {
  color:
    var(--rc-muted);

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    0.045em;

  text-transform:
    uppercase;

  white-space:
    nowrap;
}


/* =========================================================
   CLIENT ROW
   ========================================================= */

.rc-client-row {
  display:
    grid;

  grid-template-columns:
    minmax(
      250px,
      1.8fr
    )
    minmax(
      145px,
      0.9fr
    )
    minmax(
      130px,
      0.8fr
    )
    minmax(
      130px,
      0.8fr
    )
    minmax(
      130px,
      0.8fr
    )
    minmax(
      130px,
      0.8fr
    )
    130px;

  align-items:
    center;

  gap:
    10px;

  min-width:
    1080px;

  min-height:
    78px;

  padding:
    9px
    12px;

  border-bottom:
    1px solid var(--rc-border);

  background:
    var(--rc-surface);

  transition:
    background var(--rc-transition),
    border-color var(--rc-transition);
}


.rc-client-row:last-child {
  border-bottom:
    0;
}


.rc-client-row:hover {
  background:
    var(--rc-surface-hover);
}


/* =========================================================
   CLIENT INFO
   ========================================================= */

.rc-client-row__client {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  min-width:
    0;
}


.rc-client-row__avatar {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

  width:
    38px;

  height:
    38px;

  border:
    1px solid var(--rc-border-strong);

  border-radius:
    10px;

  background:
    var(--rc-surface-strong);

  color:
    var(--rc-text);

  font-size:
    11px;

  font-weight:
    900;

  letter-spacing:
    -0.02em;
}


.rc-client-row__identity {
  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

  min-width:
    0;
}


.rc-client-row__name {
  overflow:
    hidden;

  max-width:
    100%;

  color:
    var(--rc-text);

  font-size:
    11.5px;

  font-weight:
    900;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.rc-client-row__meta {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    4px
    8px;

  min-width:
    0;
}


.rc-client-row__meta span {
  color:
    var(--rc-muted);

  font-size:
    8.5px;

  font-weight:
    750;

  white-space:
    nowrap;
}


.rc-client-row__contact {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    4px
    8px;

  min-width:
    0;
}


.rc-client-row__contact span {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  overflow:
    hidden;

  max-width:
    190px;

  color:
    var(--rc-muted);

  font-size:
    8.5px;

  font-weight:
    600;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   LOCATION
   ========================================================= */

.rc-client-row__location {
  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

  min-width:
    0;
}


.rc-client-row__location > strong {
  overflow:
    hidden;

  color:
    var(--rc-text);

  font-size:
    10px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.rc-client-row__location > div {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    4px;
}


.rc-client-row__location > div span {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    20px;

  padding:
    0
    6px;

  border:
    1px solid var(--rc-border);

  border-radius:
    999px;

  background:
    var(--rc-surface-soft);

  color:
    var(--rc-muted);

  font-size:
    7.5px;

  font-weight:
    800;

  white-space:
    nowrap;
}


/* =========================================================
   FINANCIAL / ACTIVITY
   ========================================================= */

.rc-client-row__financial,
.rc-client-row__activity {
  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

  min-width:
    0;
}


.rc-client-row__label {
  color:
    var(--rc-muted);

  font-size:
    7.5px;

  font-weight:
    900;

  letter-spacing:
    0.035em;

  text-transform:
    uppercase;
}


.rc-client-row__money,
.rc-client-row__activity > strong {
  overflow:
    hidden;

  color:
    var(--rc-text);

  font-size:
    11px;

  font-weight:
    900;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.rc-client-row__money--deuda,
.rc-client-row__money--vencido,
.rc-client-row__money.is-danger {
  color:
    var(--rc-danger);
}


.rc-client-row__money--favor {
  color:
    var(--rc-success);
}


.rc-client-row__money--ok {
  color:
    var(--rc-text);
}


.rc-client-row__secondary {
  overflow:
    hidden;

  color:
    var(--rc-muted);

  font-size:
    8.5px;

  font-weight:
    650;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   STATUS
   ========================================================= */

.rc-client-row__status {
  display:
    inline-flex;

  align-items:
    center;

  align-self:
    flex-start;

  gap:
    4px;

  min-height:
    21px;

  max-width:
    100%;

  padding:
    0
    6px;

  border:
    1px solid var(--rc-border);

  border-radius:
    999px;

  background:
    var(--rc-surface-soft);

  color:
    var(--rc-muted);

  font-size:
    7.5px;

  font-weight:
    850;

  white-space:
    nowrap;
}


.rc-client-row__status--deuda {
  border-color:
    color-mix(
      in srgb,
      var(--rc-danger) 24%,
      var(--rc-border)
    );

  background:
    var(--rc-danger-soft);

  color:
    var(--rc-danger);
}


.rc-client-row__status--vencido {
  border-color:
    color-mix(
      in srgb,
      var(--rc-danger) 35%,
      var(--rc-border)
    );

  background:
    var(--rc-danger-soft);

  color:
    var(--rc-danger);
}


.rc-client-row__status--favor {
  border-color:
    color-mix(
      in srgb,
      var(--rc-success) 28%,
      var(--rc-border)
    );

  background:
    var(--rc-success-soft);

  color:
    var(--rc-success);
}


.rc-client-row__status--ok {
  border-color:
    color-mix(
      in srgb,
      var(--rc-success) 24%,
      var(--rc-border)
    );

  background:
    var(--rc-success-soft);

  color:
    var(--rc-success);
}


/* =========================================================
   ACTION
   ========================================================= */

.rc-client-row__action {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;
}


.rc-client-summary-button {
  width:
    100%;

  min-width:
    120px;

  min-height:
    36px;

  padding:
    0
    10px;

  font-size:
    9px;

  font-weight:
    900;
}


/* =========================================================
   LIST OVERFLOW
   ========================================================= */

.rc-client-list-card {
  overflow-x:
    auto;

  overflow-y:
    hidden;

  scrollbar-width:
    thin;

  scrollbar-color:
    var(--rc-border-strong)
    transparent;
}


.rc-client-list-card::-webkit-scrollbar {
  height:
    7px;
}


.rc-client-list-card::-webkit-scrollbar-track {
  background:
    transparent;
}


.rc-client-list-card::-webkit-scrollbar-thumb {
  border-radius:
    999px;

  background:
    var(--rc-border-strong);
}


/* =========================================================
   FIN PARTE 1 DE 3
   ========================================================= *//* =========================================================
   CLIENT HERO
   ========================================================= */

.rc-client-hero {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  width:
    100%;

  min-width:
    0;

  padding:
    15px;

  border:
    1px solid var(--rc-border-strong);

  border-radius:
    var(--rc-radius-lg);

  background:
    var(--rc-surface);

  box-shadow:
    var(--rc-shadow-xs);
}


.rc-client-hero__identity {
  display:
    flex;

  align-items:
    center;

  gap:
    13px;

  min-width:
    0;
}


.rc-client-avatar {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

  width:
    52px;

  height:
    52px;

  border:
    1px solid var(--rc-border-strong);

  border-radius:
    13px;

  background:
    var(--rc-surface-strong);

  color:
    var(--rc-text);

  font-size:
    15px;

  font-weight:
    900;

  letter-spacing:
    -0.03em;
}


.rc-client-hero__copy {
  min-width:
    0;
}


.rc-client-hero__topline {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    8px;

  min-width:
    0;
}


.rc-client-hero__topline h2 {
  overflow:
    hidden;

  max-width:
    760px;

  margin:
    0;

  color:
    var(--rc-text);

  font-size:
    19px;

  font-weight:
    900;

  line-height:
    1.2;

  letter-spacing:
    -0.03em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.rc-client-hero__subtitle {
  overflow:
    hidden;

  margin-top:
    4px;

  color:
    var(--rc-muted);

  font-size:
    10px;

  font-weight:
    650;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.rc-client-hero__meta {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    6px
    13px;

  margin-top:
    7px;

  color:
    var(--rc-text-soft);

  font-size:
    9.5px;

  font-weight:
    650;
}


.rc-client-hero__meta span {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;
}


.rc-client-hero__meta svg,
.rc-client-hero__meta i {
  color:
    var(--rc-muted);
}


.rc-client-hero__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex:
    0 0 auto;

  flex-wrap:
    wrap;

  gap:
    7px;
}


/* =========================================================
   STATUS GENERAL
   ========================================================= */

.rc-status {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  min-height:
    24px;

  padding:
    0
    7px;

  border:
    1px solid var(--rc-border);

  border-radius:
    999px;

  background:
    var(--rc-surface-soft);

  color:
    var(--rc-text-soft);

  font-size:
    8px;

  font-weight:
    900;

  white-space:
    nowrap;
}


.rc-status--deuda {
  border-color:
    color-mix(
      in srgb,
      var(--rc-danger) 28%,
      var(--rc-border)
    );

  background:
    var(--rc-danger-soft);

  color:
    var(--rc-danger);
}


.rc-status--favor,
.rc-status--ok {
  border-color:
    color-mix(
      in srgb,
      var(--rc-success) 28%,
      var(--rc-border)
    );

  background:
    var(--rc-success-soft);

  color:
    var(--rc-success);
}


/* =========================================================
   KPI GRID
   ========================================================= */

.rc-kpis {
  display:
    grid;

  grid-template-columns:
    repeat(
      6,
      minmax(
        0,
        1fr
      )
    );

  gap:
    9px;

  width:
    100%;

  min-width:
    0;
}


.rc-kpi {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;

  min-height:
    116px;

  padding:
    12px;

  border:
    1px solid var(--rc-border);

  border-radius:
    var(--rc-radius-md);

  background:
    var(--rc-surface);

  box-shadow:
    var(--rc-shadow-xs);

  transition:
    border-color var(--rc-transition),
    background var(--rc-transition),
    transform var(--rc-transition);
}


.rc-kpi:hover {
  border-color:
    var(--rc-border-strong);

  transform:
    translateY(-1px);
}


.rc-kpi__head {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  min-width:
    0;
}


.rc-kpi__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

  width:
    28px;

  height:
    28px;

  border:
    1px solid var(--rc-border);

  border-radius:
    8px;

  background:
    var(--rc-surface-soft);

  color:
    var(--rc-text-soft);
}


.rc-kpi__label {
  overflow:
    hidden;

  color:
    var(--rc-muted);

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.rc-kpi__value {
  display:
    block;

  overflow:
    hidden;

  margin-top:
    auto;

  padding-top:
    11px;

  color:
    var(--rc-text);

  font-size:
    clamp(
      15px,
      1.25vw,
      21px
    );

  font-weight:
    900;

  line-height:
    1.05;

  letter-spacing:
    -0.04em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.rc-kpi__detail {
  display:
    block;

  overflow:
    hidden;

  margin-top:
    5px;

  color:
    var(--rc-muted);

  font-size:
    8.5px;

  font-weight:
    650;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.rc-kpi--danger .rc-kpi__icon,
.rc-kpi--danger .rc-kpi__value {
  color:
    var(--rc-danger);
}


.rc-kpi--danger .rc-kpi__icon {
  background:
    var(--rc-danger-soft);
}


.rc-kpi--success .rc-kpi__icon,
.rc-kpi--success .rc-kpi__value {
  color:
    var(--rc-success);
}


.rc-kpi--success .rc-kpi__icon {
  background:
    var(--rc-success-soft);
}


.rc-kpi--warning .rc-kpi__icon,
.rc-kpi--warning .rc-kpi__value {
  color:
    var(--rc-warning);
}


.rc-kpi--warning .rc-kpi__icon {
  background:
    var(--rc-warning-soft);
}


.rc-kpi--info .rc-kpi__icon,
.rc-kpi--info .rc-kpi__value {
  color:
    var(--rc-info);
}


.rc-kpi--info .rc-kpi__icon {
  background:
    var(--rc-info-soft);
}


/* =========================================================
   TABS
   ========================================================= */

.rc-tabs {
  display:
    flex;

  align-items:
    center;

  gap:
    4px;

  min-width:
    0;

  padding:
    5px;

  border:
    1px solid var(--rc-border);

  border-radius:
    10px;

  background:
    var(--rc-surface);

  overflow-x:
    auto;

  scrollbar-width:
    none;
}


.rc-tabs::-webkit-scrollbar {
  display:
    none;
}


.rc-tab {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  min-height:
    34px;

  padding:
    0
    10px;

  border:
    1px solid transparent;

  border-radius:
    7px;

  background:
    transparent;

  color:
    var(--rc-muted);

  font-family:
    inherit;

  font-size:
    10px;

  font-weight:
    850;

  white-space:
    nowrap;

  cursor:
    pointer;

  transition:
    background var(--rc-transition),
    border-color var(--rc-transition),
    color var(--rc-transition);
}


.rc-tab:hover {
  background:
    var(--rc-surface-soft);

  color:
    var(--rc-text);
}


.rc-tab.is-active {
  border-color:
    var(--rc-border-strong);

  background:
    var(--rc-surface-strong);

  color:
    var(--rc-text);
}


.rc-tab__count {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    19px;

  height:
    18px;

  padding:
    0
    5px;

  border-radius:
    999px;

  background:
    var(--rc-surface);

  color:
    var(--rc-muted);

  font-size:
    8px;

  font-weight:
    900;
}


/* =========================================================
   TAB CONTENT
   ========================================================= */

.rc-tab-content {
  width:
    100%;

  min-width:
    0;

  transition:
    opacity var(--rc-transition);
}


.rc-tab-content.is-loading {
  opacity:
    0.52;

  pointer-events:
    none;
}


.rc-tab-panel {
  width:
    100%;

  min-width:
    0;
}


.rc-tab-panel--resumen {
  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;
}


/* =========================================================
   CHARTS GRID
   ========================================================= */

.rc-charts-grid {
  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1.25fr
    )
    minmax(
      0,
      0.95fr
    )
    minmax(
      0,
      0.95fr
    );

  gap:
    11px;

  width:
    100%;

  min-width:
    0;
}


.rc-chart-card {
  min-width:
    0;

  overflow:
    hidden;

  border:
    1px solid var(--rc-border);

  border-radius:
    var(--rc-radius-md);

  background:
    var(--rc-surface);

  box-shadow:
    var(--rc-shadow-xs);
}


.rc-chart-card__header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  min-height:
    60px;

  padding:
    11px
    12px;

  border-bottom:
    1px solid var(--rc-border);
}


.rc-chart-card__title-wrap {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  min-width:
    0;
}


.rc-chart-card__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

  width:
    31px;

  height:
    31px;

  border:
    1px solid var(--rc-border);

  border-radius:
    8px;

  background:
    var(--rc-surface-soft);

  color:
    var(--rc-text-soft);
}


.rc-chart-card__title-wrap > div:last-child {
  min-width:
    0;
}


.rc-chart-card__header h3 {
  margin:
    0;

  color:
    var(--rc-text);

  font-size:
    11px;

  font-weight:
    900;

  line-height:
    1.25;
}


.rc-chart-card__header p {
  margin:
    3px
    0
    0;

  color:
    var(--rc-muted);

  font-size:
    8.5px;

  line-height:
    1.35;
}


.rc-chart-card__body {
  min-height:
    216px;

  padding:
    13px;
}


/* =========================================================
   LINK BUTTON
   ========================================================= */

.rc-link-btn {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  flex:
    0 0 auto;

  padding:
    5px
    6px;

  border:
    0;

  border-radius:
    6px;

  background:
    transparent;

  color:
    var(--rc-muted);

  font-family:
    inherit;

  font-size:
    8.5px;

  font-weight:
    850;

  cursor:
    pointer;

  transition:
    background var(--rc-transition),
    color var(--rc-transition);
}


.rc-link-btn:hover {
  background:
    var(--rc-surface-soft);

  color:
    var(--rc-text);
}


/* =========================================================
   AGING BARS
   ========================================================= */

.rc-bars {
  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    13px;

  min-height:
    190px;
}


.rc-bars__item {
  min-width:
    0;
}


.rc-bars__label {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  margin-bottom:
    5px;
}


.rc-bars__label span {
  overflow:
    hidden;

  color:
    var(--rc-muted);

  font-size:
    8.5px;

  font-weight:
    700;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.rc-bars__label strong {
  flex:
    0 0 auto;

  color:
    var(--rc-text);

  font-size:
    9px;

  font-weight:
    900;
}


.rc-bars__track {
  overflow:
    hidden;

  width:
    100%;

  height:
    7px;

  border-radius:
    999px;

  background:
    var(--rc-surface-strong);
}


.rc-bars__fill {
  display:
    block;

  width:
    0;

  height:
    100%;

  border-radius:
    inherit;

  background:
    var(--rc-text-soft);

  transition:
    width 260ms ease;
}


.rc-bars__item--success .rc-bars__fill {
  background:
    var(--rc-success);
}


.rc-bars__item--warning .rc-bars__fill {
  background:
    #d97706;
}


.rc-bars__item--warning-strong .rc-bars__fill {
  background:
    #c2410c;
}


.rc-bars__item--danger-soft .rc-bars__fill {
  background:
    #dc2626;
}


.rc-bars__item--danger .rc-bars__fill {
  background:
    var(--rc-danger);
}


/* =========================================================
   DONUT
   ========================================================= */

.rc-donut {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

  width:
    136px;

  height:
    136px;
}


.rc-donut__svg {
  width:
    100%;

  height:
    100%;

  overflow:
    visible;
}


.rc-donut__track,
.rc-donut__value {
  fill:
    none;

  stroke-width:
    10;
}


.rc-donut__track {
  stroke:
    var(--rc-surface-strong);
}


.rc-donut__value {
  stroke:
    var(--rc-success);

  stroke-linecap:
    round;

  transition:
    stroke-dasharray 300ms ease;
}


.rc-donut--documents .rc-donut__value {
  stroke:
    var(--rc-info);
}


.rc-donut__center {
  position:
    absolute;

  inset:
    0;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    2px;

  padding:
    22px;

  text-align:
    center;

  pointer-events:
    none;
}


.rc-donut__center strong {
  color:
    var(--rc-text);

  font-size:
    17px;

  font-weight:
    900;

  letter-spacing:
    -0.035em;
}


.rc-donut__center span {
  color:
    var(--rc-muted);

  font-size:
    8px;

  font-weight:
    900;

  text-transform:
    uppercase;
}


/* =========================================================
   COLLECTION / DOCUMENT CHART
   ========================================================= */

.rc-collection-chart,
.rc-document-chart {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    16px;

  min-height:
    190px;
}


.rc-collection-chart__legend,
.rc-document-chart__legend {
  display:
    flex;

  flex:
    1 1 auto;

  flex-direction:
    column;

  gap:
    9px;

  min-width:
    0;
}


.rc-chart-stat {
  display:
    grid;

  grid-template-columns:
    7px
    minmax(
      0,
      1fr
    );

  align-items:
    center;

  gap:
    7px;

  min-width:
    0;
}


.rc-chart-stat__dot {
  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    var(--rc-text);
}


.rc-chart-stat__dot--success {
  background:
    var(--rc-success);
}


.rc-chart-stat__dot--warning {
  background:
    var(--rc-warning);
}


.rc-chart-stat__dot--dark {
  background:
    var(--rc-text);
}


.rc-chart-stat > div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

  min-width:
    0;
}


.rc-chart-stat span {
  color:
    var(--rc-muted);

  font-size:
    8px;

  font-weight:
    700;
}


.rc-chart-stat strong {
  overflow:
    hidden;

  color:
    var(--rc-text);

  font-size:
    10px;

  font-weight:
    900;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   DOCUMENT LEGEND
   ========================================================= */

.rc-document-chart__main {
  flex:
    0 0 auto;
}


.rc-document-legend {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;

  padding:
    6px
    7px;

  border:
    1px solid var(--rc-border);

  border-radius:
    7px;

  background:
    var(--rc-surface-soft);
}


.rc-document-legend__left,
.rc-document-legend__right {
  display:
    flex;

  align-items:
    center;

  gap:
    5px;

  min-width:
    0;
}


.rc-document-legend__left {
  color:
    var(--rc-text-soft);

  font-size:
    8.5px;

  font-weight:
    750;
}


.rc-document-legend__right strong {
  color:
    var(--rc-text);

  font-size:
    9px;

  font-weight:
    900;
}


.rc-document-legend__right small {
  color:
    var(--rc-muted);

  font-size:
    8px;

  font-weight:
    700;
}


.rc-document-legend__dot {
  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    var(--rc-muted);
}


.rc-document-legend__dot--success {
  background:
    var(--rc-success);
}


.rc-document-legend__dot--info {
  background:
    var(--rc-info);
}


.rc-document-legend__dot--warning {
  background:
    var(--rc-warning);
}


.rc-document-legend__dot--danger {
  background:
    var(--rc-danger);
}


/* =========================================================
   DETAIL GRID
   ========================================================= */

.rc-detail-grid {
  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1.15fr
    )
    minmax(
      0,
      0.85fr
    );

  gap:
    11px;

  width:
    100%;

  min-width:
    0;
}


.rc-detail-card {
  min-width:
    0;

  overflow:
    hidden;

  border:
    1px solid var(--rc-border);

  border-radius:
    var(--rc-radius-md);

  background:
    var(--rc-surface);

  box-shadow:
    var(--rc-shadow-xs);
}


.rc-detail-card__header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  min-height:
    58px;

  padding:
    11px
    13px;

  border-bottom:
    1px solid var(--rc-border);
}


.rc-detail-card__header h3 {
  margin:
    0;

  color:
    var(--rc-text);

  font-size:
    11px;

  font-weight:
    900;
}


.rc-detail-card__header p {
  margin:
    3px
    0
    0;

  color:
    var(--rc-muted);

  font-size:
    8.5px;
}


.rc-detail-card__header > svg,
.rc-detail-card__header > i {
  color:
    var(--rc-muted);
}


.rc-detail-card__content {
  padding:
    5px
    13px
    11px;
}


/* =========================================================
   FINANCIAL LINES
   ========================================================= */

.rc-financial-line {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  min-height:
    38px;

  padding:
    6px
    0;

  border-bottom:
    1px solid var(--rc-border);
}


.rc-financial-line:last-child {
  border-bottom:
    0;
}


.rc-financial-line span {
  color:
    var(--rc-muted);

  font-size:
    9px;

  font-weight:
    650;
}


.rc-financial-line strong {
  color:
    var(--rc-text);

  font-size:
    10px;

  font-weight:
    900;

  text-align:
    right;
}


.rc-financial-line--highlight {
  margin:
    3px
    -6px;

  padding:
    8px
    6px;

  border:
    1px solid var(--rc-border-strong);

  border-radius:
    7px;

  background:
    var(--rc-surface-soft);
}


.rc-financial-line--danger strong {
  color:
    var(--rc-danger);
}


.rc-financial-line--success strong {
  color:
    var(--rc-success);
}


/* =========================================================
   ACTIVITY
   ========================================================= */

.rc-activity-list {
  display:
    flex;

  flex-direction:
    column;

  padding:
    4px
    13px
    10px;
}


.rc-activity-item {
  display:
    grid;

  grid-template-columns:
    32px
    minmax(
      0,
      1fr
    );

  align-items:
    center;

  gap:
    9px;

  min-height:
    49px;

  border-bottom:
    1px solid var(--rc-border);
}


.rc-activity-item:last-child {
  border-bottom:
    0;
}


.rc-activity-item__icon {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    30px;

  height:
    30px;

  border:
    1px solid var(--rc-border);

  border-radius:
    7px;

  background:
    var(--rc-surface-soft);

  color:
    var(--rc-text-soft);
}


.rc-activity-item__body {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;

  min-width:
    0;
}


.rc-activity-item__body span {
  color:
    var(--rc-muted);

  font-size:
    9px;

  font-weight:
    650;
}


.rc-activity-item__body strong {
  overflow:
    hidden;

  color:
    var(--rc-text);

  font-size:
    9.5px;

  font-weight:
    900;

  text-align:
    right;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   DATA CARD
   ========================================================= */

.rc-data-card {
  width:
    100%;

  min-width:
    0;

  overflow:
    hidden;

  border:
    1px solid var(--rc-border);

  border-radius:
    var(--rc-radius-md);

  background:
    var(--rc-surface);

  box-shadow:
    var(--rc-shadow-xs);
}


/* =========================================================
   DATA TOOLBAR
   ========================================================= */

.rc-data-toolbar {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  min-height:
    61px;

  padding:
    11px
    13px;

  border-bottom:
    1px solid var(--rc-border);

  background:
    var(--rc-surface);
}


.rc-data-toolbar__title {
  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  min-width:
    0;
}


.rc-data-toolbar__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

  width:
    32px;

  height:
    32px;

  border:
    1px solid var(--rc-border);

  border-radius:
    8px;

  background:
    var(--rc-surface-soft);

  color:
    var(--rc-text-soft);
}


.rc-data-toolbar__title > div:last-child {
  min-width:
    0;
}


.rc-data-toolbar__title-line {
  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  min-width:
    0;
}


.rc-data-toolbar__title-line h3 {
  overflow:
    hidden;

  margin:
    0;

  color:
    var(--rc-text);

  font-size:
    11px;

  font-weight:
    900;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.rc-data-toolbar__title p {
  margin:
    3px
    0
    0;

  color:
    var(--rc-muted);

  font-size:
    8.5px;

  line-height:
    1.4;
}


.rc-data-toolbar__count {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    21px;

  height:
    19px;

  padding:
    0
    5px;

  border:
    1px solid var(--rc-border);

  border-radius:
    999px;

  background:
    var(--rc-surface-soft);

  color:
    var(--rc-text-soft);

  font-size:
    8px;

  font-weight:
    900;
}


/* =========================================================
   TABLE WRAP
   ========================================================= */

.rc-table-wrap {
  width:
    100%;

  min-width:
    0;

  overflow-x:
    auto;

  overflow-y:
    visible;

  scrollbar-width:
    thin;

  scrollbar-color:
    var(--rc-border-strong)
    transparent;
}


.rc-table-wrap::-webkit-scrollbar {
  height:
    7px;
}


.rc-table-wrap::-webkit-scrollbar-track {
  background:
    transparent;
}


.rc-table-wrap::-webkit-scrollbar-thumb {
  border-radius:
    999px;

  background:
    var(--rc-border-strong);
}


/* =========================================================
   TABLE
   ========================================================= */

.rc-table {
  width:
    100%;

  min-width:
    860px;

  border-collapse:
    collapse;

  table-layout:
    fixed;
}


.rc-table thead th {
  position:
    sticky;

  top:
    0;

  z-index:
    2;

  height:
    36px;

  padding:
    0
    10px;

  border-bottom:
    1px solid var(--rc-border-strong);

  background:
    var(--rc-surface-soft);

  color:
    var(--rc-muted);

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    0.04em;

  text-align:
    left;

  text-transform:
    uppercase;

  white-space:
    nowrap;
}


.rc-table tbody tr {
  transition:
    background var(--rc-transition);
}


.rc-table tbody tr:hover {
  background:
    var(--rc-surface-hover);
}


.rc-table tbody td {
  min-height:
    50px;

  padding:
    9px
    10px;

  border-bottom:
    1px solid var(--rc-border);

  color:
    var(--rc-text);

  font-size:
    9.5px;

  font-weight:
    600;

  vertical-align:
    middle;
}


.rc-table tbody tr:last-child td {
  border-bottom:
    0;
}


/* =========================================================
   TABLE MONEY
   ========================================================= */

.rc-table-money {
  text-align:
    right !important;
}


.rc-money {
  color:
    var(--rc-text);

  font-size:
    9.5px;

  font-weight:
    900;

  white-space:
    nowrap;
}


.rc-money--debit {
  color:
    var(--rc-danger);
}


.rc-money--credit {
  color:
    var(--rc-success);
}


/* =========================================================
   TABLE PRIMARY
   ========================================================= */

.rc-table-primary {
  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

  min-width:
    0;
}


.rc-table-primary strong {
  overflow:
    hidden;

  color:
    var(--rc-text);

  font-size:
    9.5px;

  font-weight:
    900;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.rc-table-primary small {
  overflow:
    hidden;

  color:
    var(--rc-muted);

  font-size:
    8px;

  font-weight:
    600;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   TABLE DATE
   ========================================================= */

.rc-table-date {
  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.rc-table-date strong {
  color:
    var(--rc-text);

  font-size:
    9.5px;

  font-weight:
    900;
}


.rc-table-date small {
  color:
    var(--rc-muted);

  font-size:
    8px;

  font-weight:
    600;
}


/* =========================================================
   TABLE BADGE
   ========================================================= */

.rc-table-badge {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    4px;

  max-width:
    100%;

  min-height:
    23px;

  padding:
    0
    6px;

  border:
    1px solid var(--rc-border);

  border-radius:
    999px;

  font-size:
    8px;

  font-weight:
    900;

  white-space:
    nowrap;
}


.rc-table-badge span {
  overflow:
    hidden;

  text-overflow:
    ellipsis;
}


.rc-table-badge--neutral {
  background:
    var(--rc-surface-soft);

  color:
    var(--rc-text-soft);
}


.rc-table-badge--success {
  border-color:
    color-mix(
      in srgb,
      var(--rc-success) 24%,
      var(--rc-border)
    );

  background:
    var(--rc-success-soft);

  color:
    var(--rc-success);
}


.rc-table-badge--danger {
  border-color:
    color-mix(
      in srgb,
      var(--rc-danger) 24%,
      var(--rc-border)
    );

  background:
    var(--rc-danger-soft);

  color:
    var(--rc-danger);
}


.rc-table-badge--warning {
  border-color:
    color-mix(
      in srgb,
      var(--rc-warning) 24%,
      var(--rc-border)
    );

  background:
    var(--rc-warning-soft);

  color:
    var(--rc-warning);
}


.rc-table-badge--info {
  border-color:
    color-mix(
      in srgb,
      var(--rc-info) 24%,
      var(--rc-border)
    );

  background:
    var(--rc-info-soft);

  color:
    var(--rc-info);
}


/* =========================================================
   DOCUMENT TYPE / PAYMENT METHOD
   ========================================================= */

.rc-document-type,
.rc-payment-method {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  color:
    var(--rc-text-soft);

  font-size:
    9px;

  font-weight:
    800;

  white-space:
    nowrap;
}


/* =========================================================
   TABLE EMPTY
   ========================================================= */

.rc-table-empty {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

  min-height:
    230px;

  padding:
    26px
    18px;

  color:
    var(--rc-muted);

  text-align:
    center;
}


.rc-table-empty__icon {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    44px;

  height:
    44px;

  border:
    1px solid var(--rc-border);

  border-radius:
    12px;

  background:
    var(--rc-surface-soft);

  color:
    var(--rc-muted);
}


.rc-table-empty__content {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    4px;

  max-width:
    430px;
}


.rc-table-empty__content strong {
  color:
    var(--rc-text);

  font-size:
    11px;

  font-weight:
    900;
}


.rc-table-empty__content span {
  color:
    var(--rc-muted);

  font-size:
    9.5px;

  line-height:
    1.5;
}


/* =========================================================
   PAGINATION
   ========================================================= */

.rc-pagination {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  min-height:
    51px;

  padding:
    8px
    13px;

  border-top:
    1px solid var(--rc-border);

  background:
    var(--rc-surface);
}


.rc-pagination__info {
  color:
    var(--rc-muted);

  font-size:
    9px;

  font-weight:
    650;
}


.rc-pagination__info strong {
  color:
    var(--rc-text);

  font-weight:
    900;
}


.rc-pagination__controls {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;
}


.rc-pagination__btn {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    30px;

  height:
    30px;

  padding:
    0;

  border:
    1px solid var(--rc-border-strong);

  border-radius:
    7px;

  background:
    var(--rc-surface);

  color:
    var(--rc-text);

  cursor:
    pointer;

  transition:
    background var(--rc-transition),
    border-color var(--rc-transition),
    opacity var(--rc-transition);
}


.rc-pagination__btn:hover:not(:disabled) {
  border-color:
    var(--rc-text-soft);

  background:
    var(--rc-surface-soft);
}


.rc-pagination__btn:disabled {
  opacity:
    0.35;

  cursor:
    not-allowed;
}


.rc-pagination__current {
  color:
    var(--rc-muted);

  font-size:
    9px;

  font-weight:
    650;
}


.rc-pagination__current strong {
  color:
    var(--rc-text);

  font-weight:
    900;
}


/* =========================================================
   FIN PARTE 2 DE 3
   ========================================================= *//* =========================================================
   LOADING
   ========================================================= */

.rc-loading-state {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  min-height:
    340px;

  padding:
    28px;

  border:
    1px solid var(--rc-border);

  border-radius:
    var(--rc-radius-lg);

  background:
    var(--rc-surface);

  color:
    var(--rc-text);
}


.rc-loading-state strong {
  margin-top:
    4px;

  font-size:
    12px;

  font-weight:
    900;
}


.rc-loading-state span {
  color:
    var(--rc-muted);

  font-size:
    9.5px;
}


.rc-loading-state__spinner,
.rc-mini-spinner {
  display:
    inline-block;

  border:
    2px solid var(--rc-border-strong);

  border-top-color:
    var(--rc-text);

  border-radius:
    50%;

  animation:
    rc-spin
    0.7s
    linear
    infinite;
}


.rc-loading-state__spinner {
  width:
    27px;

  height:
    27px;
}


.rc-mini-spinner {
  flex:
    0 0 auto;

  width:
    14px;

  height:
    14px;
}


@keyframes rc-spin {
  to {
    transform:
      rotate(
        360deg
      );
  }
}


/* =========================================================
   EXPORT MENU
   ========================================================= */

.rc-export-menu {
  position:
    relative;
}


.rc-export-dropdown {
  position:
    absolute;

  top:
    calc(
      100% +
      7px
    );

  right:
    0;

  z-index:
    120;

  display:
    none;

  width:
    280px;

  padding:
    6px;

  border:
    1px solid var(--rc-border-strong);

  border-radius:
    11px;

  background:
    var(--rc-surface);

  box-shadow:
    var(--rc-shadow-md);
}


.rc-export-dropdown.is-open {
  display:
    block;
}


.rc-export-dropdown button {
  display:
    grid;

  grid-template-columns:
    27px
    minmax(
      0,
      1fr
    );

  align-items:
    center;

  gap:
    8px;

  width:
    100%;

  padding:
    8px
    9px;

  border:
    0;

  border-radius:
    7px;

  background:
    transparent;

  color:
    var(--rc-text);

  text-align:
    left;

  cursor:
    pointer;

  transition:
    background var(--rc-transition);
}


.rc-export-dropdown button:hover {
  background:
    var(--rc-surface-soft);
}


.rc-export-dropdown button > svg,
.rc-export-dropdown button > i {
  color:
    var(--rc-muted);
}


.rc-export-dropdown button span {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

  min-width:
    0;
}


.rc-export-dropdown button strong {
  color:
    var(--rc-text);

  font-size:
    10px;

  font-weight:
    900;
}


.rc-export-dropdown button small {
  color:
    var(--rc-muted);

  font-size:
    8px;
}


.rc-export-dropdown__divider {
  height:
    1px;

  margin:
    4px;

  background:
    var(--rc-border);
}


/* =========================================================
   TOAST
   ========================================================= */

.rc-toast {
  position:
    fixed;

  top:
    18px;

  right:
    18px;

  z-index:
    99999;

  display:
    grid;

  grid-template-columns:
    27px
    minmax(
      0,
      1fr
    )
    25px;

  align-items:
    center;

  gap:
    8px;

  width:
    min(
      380px,
      calc(
        100vw -
        28px
      )
    );

  padding:
    10px
    11px;

  border:
    1px solid var(--rc-border-strong);

  border-radius:
    10px;

  background:
    var(--rc-surface);

  color:
    var(--rc-text);

  box-shadow:
    var(--rc-shadow-md);

  opacity:
    0;

  transform:
    translateY(
      -8px
    );

  pointer-events:
    none;

  transition:
    opacity
    160ms
    ease,
    transform
    160ms
    ease;
}


.rc-toast.is-visible {
  opacity:
    1;

  transform:
    translateY(
      0
    );

  pointer-events:
    auto;
}


.rc-toast__icon {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;
}


.rc-toast__text {
  min-width:
    0;

  font-size:
    10px;

  font-weight:
    750;

  line-height:
    1.4;
}


.rc-toast__close {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    25px;

  height:
    25px;

  padding:
    0;

  border:
    0;

  border-radius:
    6px;

  background:
    transparent;

  color:
    var(--rc-muted);

  cursor:
    pointer;
}


.rc-toast__close:hover {
  background:
    var(--rc-surface-strong);

  color:
    var(--rc-text);
}


.rc-toast--success {
  border-color:
    color-mix(
      in srgb,
      var(--rc-success) 32%,
      var(--rc-border)
    );
}


.rc-toast--success
.rc-toast__icon {
  color:
    var(--rc-success);
}


.rc-toast--error {
  border-color:
    color-mix(
      in srgb,
      var(--rc-danger) 32%,
      var(--rc-border)
    );
}


.rc-toast--error
.rc-toast__icon {
  color:
    var(--rc-danger);
}


.rc-toast--info
.rc-toast__icon {
  color:
    var(--rc-info);
}


/* =========================================================
   DARK TABLE
   ========================================================= */

html[data-theme="dark"]
#pageResumenesClientes
.rc-table
thead
th,
body[data-theme="dark"]
#pageResumenesClientes
.rc-table
thead
th {
  background:
    #0a0a0a;

  color:
    #a1a1aa;
}


html[data-theme="dark"]
#pageResumenesClientes
.rc-table
tbody
tr:hover,
body[data-theme="dark"]
#pageResumenesClientes
.rc-table
tbody
tr:hover {
  background:
    #0b0b0b;
}


html[data-theme="dark"]
#pageResumenesClientes
.rc-client-row:hover,
body[data-theme="dark"]
#pageResumenesClientes
.rc-client-row:hover {
  background:
    #0b0b0b;
}


html[data-theme="dark"]
#pageResumenesClientes
input,
html[data-theme="dark"]
#pageResumenesClientes
select,
body[data-theme="dark"]
#pageResumenesClientes
input,
body[data-theme="dark"]
#pageResumenesClientes
select {
  color-scheme:
    dark;
}


/* =========================================================
   RESPONSIVE 1600
   ========================================================= */

@media (
  max-width:
    1600px
) {
  .rc-kpis {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


  .rc-charts-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .rc-chart-card:first-child {
    grid-column:
      1 /
      -1;
  }
}


/* =========================================================
   RESPONSIVE 1350
   ========================================================= */

@media (
  max-width:
    1350px
) {
  .rc-container {
    padding:
      18px
      18px
      30px;
  }


  .rc-client-filters-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .rc-detail-grid {
    grid-template-columns:
      1fr;
  }


  .rc-client-list__columns,
  .rc-client-row {
    grid-template-columns:
      minmax(
        240px,
        1.6fr
      )
      minmax(
        135px,
        0.8fr
      )
      minmax(
        120px,
        0.75fr
      )
      minmax(
        120px,
        0.75fr
      )
      minmax(
        120px,
        0.75fr
      )
      minmax(
        120px,
        0.75fr
      )
      120px;

    min-width:
      1030px;
  }
}


/* =========================================================
   RESPONSIVE 1100
   ========================================================= */

@media (
  max-width:
    1100px
) {
  .rc-page-header {
    flex-direction:
      column;
  }


  .rc-page-header__actions {
    justify-content:
      flex-start;
  }


  .rc-client-list-toolbar {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .rc-client-list-search {
    width:
      100%;

    max-width:
      none;
  }


  .rc-client-list-toolbar__actions {
    justify-content:
      flex-start;

    flex-wrap:
      wrap;
  }


  .rc-client-hero {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .rc-client-hero__actions {
    justify-content:
      flex-start;
  }


  .rc-toolbar {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


  .rc-toolbar__actions {
    grid-column:
      1 /
      -1;

    justify-content:
      flex-start;
  }
}


/* =========================================================
   RESPONSIVE 900
   ========================================================= */

@media (
  max-width:
    900px
) {
  .rc-kpis {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .rc-charts-grid {
    grid-template-columns:
      1fr;
  }


  .rc-chart-card:first-child {
    grid-column:
      auto;
  }


  .rc-client-filters-grid {
    grid-template-columns:
      1fr;
  }


  .rc-client-filters-panel__footer {
    justify-content:
      stretch;
  }


  .rc-client-filters-panel__footer
  .rc-btn {
    flex:
      1 1 0;
  }


  .rc-client-filter-chips {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .rc-client-filter-clear {
    align-self:
      flex-start;
  }


  .rc-toolbar {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .rc-toolbar__actions {
    grid-column:
      1 /
      -1;
  }
}


/* =========================================================
   RESPONSIVE 760
   CLIENTES PASAN A FILAS ADAPTADAS
   SIN SCROLL HORIZONTAL DE PÁGINA
   ========================================================= */

@media (
  max-width:
    760px
) {
  .rc-container {
    padding:
      14px
      12px
      24px;
  }


  .rc-page-header h1 {
    font-size:
      23px;
  }


  .rc-page-header__actions {
    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    width:
      100%;
  }


  .rc-page-header__actions
  .rc-btn,
  .rc-page-header__actions
  .rc-export-menu,
  .rc-page-header__actions
  .rc-export-menu
  > .rc-btn {
    width:
      100%;
  }


  .rc-client-list-toolbar__actions {
    display:
      grid;

    grid-template-columns:
      1fr;

    width:
      100%;
  }


  .rc-client-filter-button {
    width:
      100%;
  }


  .rc-client-order {
    align-items:
      stretch;

    flex-direction:
      column;

    width:
      100%;
  }


  .rc-client-order__select {
    width:
      100%;
  }


  .rc-client-list-card {
    overflow:
      visible;
  }


  .rc-client-list__columns {
    display:
      none;
  }


  .rc-client-list {
    display:
      flex;

    flex-direction:
      column;

    gap:
      8px;

    padding:
      8px;
  }


  .rc-client-row {
    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    gap:
      10px
      12px;

    min-width:
      0;

    min-height:
      0;

    padding:
      12px;

    border:
      1px solid var(--rc-border);

    border-radius:
      11px;

    background:
      var(--rc-surface);
  }


  .rc-client-row:last-child {
    border-bottom:
      1px solid var(--rc-border);
  }


  .rc-client-row__client {
    grid-column:
      1 /
      -1;

    padding-bottom:
      10px;

    border-bottom:
      1px solid var(--rc-border);
  }


  .rc-client-row__location {
    grid-column:
      1 /
      -1;
  }


  .rc-client-row__action {
    grid-column:
      1 /
      -1;
  }


  .rc-client-summary-button {
    width:
      100%;

    min-height:
      39px;
  }


  .rc-client-row__financial,
  .rc-client-row__activity {
    padding:
      8px;

    border:
      1px solid var(--rc-border);

    border-radius:
      8px;

    background:
      var(--rc-surface-soft);
  }


  .rc-client-row__money,
  .rc-client-row__activity
  > strong {
    font-size:
      10.5px;
  }


  .rc-client-hero__topline
  h2 {
    white-space:
      normal;
  }


  .rc-client-hero__subtitle {
    white-space:
      normal;
  }


  .rc-client-hero__actions {
    display:
      grid;

    grid-template-columns:
      1fr;

    width:
      100%;
  }


  .rc-client-hero__actions
  .rc-btn {
    width:
      100%;
  }


  .rc-toolbar {
    display:
      flex;

    flex-direction:
      column;

    align-items:
      stretch;
  }


  .rc-toolbar__actions {
    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    width:
      100%;
  }


  .rc-toolbar__actions
  .rc-btn {
    width:
      100%;
  }


  .rc-tabs {
    width:
      100%;

    overflow-x:
      auto;
  }


  .rc-tab {
    flex:
      0 0 auto;
  }


  .rc-collection-chart,
  .rc-document-chart {
    flex-direction:
      column;
  }


  .rc-collection-chart__legend,
  .rc-document-chart__legend {
    width:
      100%;
  }


  .rc-data-toolbar {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .rc-data-toolbar
  > .rc-btn {
    width:
      100%;
  }


  .rc-pagination {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .rc-pagination__controls {
    justify-content:
      space-between;
  }


  .rc-export-dropdown {
    right:
      auto;

    left:
      0;

    width:
      min(
        280px,
        calc(
          100vw -
          24px
        )
      );
  }
}


/* =========================================================
   RESPONSIVE 520
   ========================================================= */

@media (
  max-width:
    520px
) {
  .rc-page-header__actions {
    grid-template-columns:
      1fr;
  }


  .rc-kpis {
    grid-template-columns:
      1fr;
  }


  .rc-client-row {
    grid-template-columns:
      1fr;
  }


  .rc-client-row__client,
  .rc-client-row__location,
  .rc-client-row__action {
    grid-column:
      1;
  }


  .rc-client-row__financial,
  .rc-client-row__activity {
    grid-column:
      1;
  }


  .rc-client-row__contact {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .rc-client-row__contact
  span {
    max-width:
      100%;
  }


  .rc-client-filters-panel__footer {
    flex-direction:
      column;
  }


  .rc-client-filters-panel__footer
  .rc-btn {
    width:
      100%;
  }


  .rc-client-filters-checks {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .rc-toolbar__actions {
    grid-template-columns:
      1fr;
  }


  .rc-client-hero__identity {
    align-items:
      flex-start;
  }


  .rc-client-avatar {
    width:
      46px;

    height:
      46px;
  }


  .rc-toast {
    top:
      10px;

    right:
      10px;

    width:
      calc(
        100vw -
        20px
      );
  }
}


/* =========================================================
   RIGHTBAR
   ========================================================= */

html[data-rightbar="open"]
#pageResumenesClientes
.rc-container,
html[data-rightbar="expanded"]
#pageResumenesClientes
.rc-container {
  padding-right:
    18px;
}


html[data-rightbar="open"]
#pageResumenesClientes
.rc-kpis,
html[data-rightbar="expanded"]
#pageResumenesClientes
.rc-kpis {
  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );
}


html[data-rightbar="open"]
#pageResumenesClientes
.rc-charts-grid,
html[data-rightbar="expanded"]
#pageResumenesClientes
.rc-charts-grid {
  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );
}


html[data-rightbar="open"]
#pageResumenesClientes
.rc-chart-card:first-child,
html[data-rightbar="expanded"]
#pageResumenesClientes
.rc-chart-card:first-child {
  grid-column:
    1 /
    -1;
}


/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

#pageResumenesClientes
button:focus-visible,
#pageResumenesClientes
input:focus-visible,
#pageResumenesClientes
select:focus-visible {
  outline:
    2px solid var(--rc-text);

  outline-offset:
    2px;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
  prefers-reduced-motion:
    reduce
) {
  #pageResumenesClientes *,
  #pageResumenesClientes *::before,
  #pageResumenesClientes *::after {
    scroll-behavior:
      auto !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }
}


/* =========================================================
   PRINT
   ========================================================= */

@media print {
  .rc-page-header__actions,
  .rc-toolbar,
  .rc-client-list-toolbar,
  .rc-client-filters-panel,
  .rc-client-filter-chips,
  .rc-client-hero__actions,
  .rc-tabs,
  .rc-pagination,
  .rc-data-toolbar
  .rc-btn,
  .rc-export-menu {
    display:
      none !important;
  }


  #pageResumenesClientes {
    background:
      #ffffff !important;

    color:
      #000000 !important;
  }


  .rc-container {
    padding:
      0 !important;
  }


  .rc-kpis {
    grid-template-columns:
      repeat(
        3,
        1fr
      );
  }


  .rc-charts-grid {
    grid-template-columns:
      1fr;
  }


  .rc-table-wrap {
    overflow:
      visible !important;
  }


  .rc-table {
    min-width:
      0 !important;
  }
}


/* =========================================================
   FIN
   frontend/src/pages/facturacion-cobranzas/resumenes-clientes/
   resumenes-clientes.css
   ========================================================= *//* =========================================================
   WIRTZ HUB · RESÚMENES DE CLIENTES
   REFUERZO VISUAL
   - Tipografía más firme
   - Bordes más marcados
   - Divisiones más visibles
   ========================================================= */


/* =========================================================
   VARIABLES MÁS FIRMES
   ========================================================= */

#pageResumenesClientes {
  --rc-border:
    #c8d0da;

  --rc-border-strong:
    #aeb9c7;

  --rc-text:
    #0a0f1a;

  --rc-text-soft:
    #1f2937;

  --rc-muted:
    #4b5563;

  --rc-muted-2:
    #6b7280;
}


html[data-theme="dark"]
#pageResumenesClientes,
body[data-theme="dark"]
#pageResumenesClientes {
  --rc-border:
    #2f2f2f;

  --rc-border-strong:
    #4b4b4b;

  --rc-text:
    #ffffff;

  --rc-text-soft:
    #f3f4f6;

  --rc-muted:
    #c0c0c0;

  --rc-muted-2:
    #909090;
}


/* =========================================================
   FUENTE GENERAL MÁS FIRME
   ========================================================= */

#pageResumenesClientes {
  font-weight:
    600;
}


#pageResumenesClientes p,
#pageResumenesClientes span,
#pageResumenesClientes small,
#pageResumenesClientes label,
#pageResumenesClientes td {
  font-weight:
    650;
}


/* =========================================================
   TÍTULOS
   ========================================================= */

.rc-page-header h1 {
  font-weight:
    950;
}


.rc-page-header p {
  color:
    var(--rc-text-soft);

  font-weight:
    700;
}


.rc-page-header__eyebrow {
  color:
    var(--rc-text-soft);

  font-weight:
    900;
}


/* =========================================================
   BOTONES
   ========================================================= */

.rc-btn {
  font-weight:
    900;
}


.rc-btn--secondary {
  border-width:
    1.5px;

  border-color:
    var(--rc-border-strong);
}


.rc-btn--secondary:hover:not(:disabled) {
  border-color:
    var(--rc-text);
}


/* =========================================================
   INPUTS
   ========================================================= */

.rc-input,
.rc-select,
.rc-client-list-search input {
  border-width:
    1.5px;

  border-color:
    var(--rc-border-strong);

  font-weight:
    750;
}


.rc-input::placeholder,
.rc-client-list-search input::placeholder {
  color:
    var(--rc-muted);

  font-weight:
    650;
}


/* =========================================================
   TOOLBARS
   ========================================================= */

.rc-toolbar,
.rc-client-list-toolbar {
  border-width:
    1.5px;

  border-color:
    var(--rc-border-strong);
}


.rc-label {
  color:
    var(--rc-text-soft);

  font-weight:
    950;
}


/* =========================================================
   PANEL FILTROS
   ========================================================= */

.rc-client-filters-panel {
  border-width:
    1.5px;

  border-color:
    var(--rc-border-strong);
}


.rc-client-filters-panel__header {
  border-bottom-width:
    1.5px;

  border-bottom-color:
    var(--rc-border-strong);
}


.rc-client-filters-panel__header h3 {
  font-weight:
    950;
}


.rc-client-filters-panel__header p {
  color:
    var(--rc-text-soft);

  font-weight:
    700;
}


.rc-client-filter-field label {
  color:
    var(--rc-text-soft);

  font-weight:
    950;
}


.rc-client-filters-panel__footer {
  border-top-width:
    1.5px;

  border-top-color:
    var(--rc-border-strong);
}


/* =========================================================
   CHIPS
   ========================================================= */

.rc-client-filter-chips {
  border-width:
    1.5px;

  border-color:
    var(--rc-border-strong);
}


.rc-client-filter-chip {
  border-width:
    1.5px;

  border-color:
    var(--rc-border-strong);

  color:
    var(--rc-text-soft);

  font-weight:
    900;
}


.rc-client-filter-clear {
  color:
    var(--rc-text-soft);

  font-weight:
    900;
}


/* =========================================================
   LISTA DE CLIENTES
   ========================================================= */

.rc-client-list-card {
  border-width:
    1.5px;

  border-color:
    var(--rc-border-strong);
}


.rc-client-list-header {
  border-bottom-width:
    1.5px;

  border-bottom-color:
    var(--rc-border-strong);
}


.rc-client-list-header__title h3 {
  font-weight:
    950;
}


.rc-client-list-header p {
  color:
    var(--rc-text-soft);

  font-weight:
    700;
}


/* =========================================================
   CABECERA DE COLUMNAS
   ========================================================= */

.rc-client-list__columns {
  border-bottom:
    1.5px solid var(--rc-border-strong);
}


.rc-client-list__columns span {
  color:
    var(--rc-text-soft);

  font-weight:
    950;
}


/* =========================================================
   FILAS
   ========================================================= */

.rc-client-row {
  border-bottom:
    1.5px solid var(--rc-border);
}


.rc-client-row:hover {
  background:
    var(--rc-surface-hover);
}


.rc-client-row__avatar {
  border-width:
    1.5px;

  border-color:
    var(--rc-border-strong);

  font-weight:
    950;
}


.rc-client-row__name {
  color:
    var(--rc-text);

  font-weight:
    950;
}


.rc-client-row__meta span {
  color:
    var(--rc-text-soft);

  font-weight:
    800;
}


.rc-client-row__contact span {
  color:
    var(--rc-text-soft);

  font-weight:
    750;
}


/* =========================================================
   UBICACIÓN / CANAL
   ========================================================= */

.rc-client-row__location > strong {
  color:
    var(--rc-text);

  font-weight:
    900;
}


.rc-client-row__location > div span {
  border-width:
    1.5px;

  border-color:
    var(--rc-border-strong);

  color:
    var(--rc-text-soft);

  font-weight:
    850;
}


/* =========================================================
   DATOS FINANCIEROS
   ========================================================= */

.rc-client-row__label {
  color:
    var(--rc-text-soft);

  font-weight:
    950;
}


.rc-client-row__money,
.rc-client-row__activity > strong {
  font-weight:
    950;
}


.rc-client-row__secondary {
  color:
    var(--rc-text-soft);

  font-weight:
    750;
}


.rc-client-row__status {
  border-width:
    1.5px;

  font-weight:
    900;
}


/* =========================================================
   CLIENT HERO
   ========================================================= */

.rc-client-hero {
  border-width:
    1.5px;

  border-color:
    var(--rc-border-strong);
}


.rc-client-avatar {
  border-width:
    1.5px;

  border-color:
    var(--rc-border-strong);

  font-weight:
    950;
}


.rc-client-hero__topline h2 {
  font-weight:
    950;
}


.rc-client-hero__subtitle {
  color:
    var(--rc-text-soft);

  font-weight:
    750;
}


.rc-client-hero__meta {
  color:
    var(--rc-text-soft);

  font-weight:
    750;
}


/* =========================================================
   KPI
   ========================================================= */

.rc-kpi {
  border-width:
    1.5px;

  border-color:
    var(--rc-border-strong);
}


.rc-kpi__icon {
  border-width:
    1.5px;

  border-color:
    var(--rc-border-strong);
}


.rc-kpi__label {
  color:
    var(--rc-text-soft);

  font-weight:
    950;
}


.rc-kpi__value {
  font-weight:
    950;
}


.rc-kpi__detail {
  color:
    var(--rc-text-soft);

  font-weight:
    750;
}


/* =========================================================
   TABS
   ========================================================= */

.rc-tabs {
  border-width:
    1.5px;

  border-color:
    var(--rc-border-strong);
}


.rc-tab {
  font-weight:
    900;
}


.rc-tab.is-active {
  border-width:
    1.5px;

  border-color:
    var(--rc-border-strong);
}


.rc-tab__count {
  border-width:
    1.5px;

  border-color:
    var(--rc-border-strong);

  font-weight:
    950;
}


/* =========================================================
   CHART CARDS
   ========================================================= */

.rc-chart-card {
  border-width:
    1.5px;

  border-color:
    var(--rc-border-strong);
}


.rc-chart-card__header {
  border-bottom-width:
    1.5px;

  border-bottom-color:
    var(--rc-border-strong);
}


.rc-chart-card__icon {
  border-width:
    1.5px;

  border-color:
    var(--rc-border-strong);
}


.rc-chart-card__header h3 {
  font-weight:
    950;
}


.rc-chart-card__header p {
  color:
    var(--rc-text-soft);

  font-weight:
    700;
}


/* =========================================================
   BARRAS / CHARTS
   ========================================================= */

.rc-bars__label span {
  color:
    var(--rc-text-soft);

  font-weight:
    750;
}


.rc-bars__label strong {
  font-weight:
    950;
}


.rc-chart-stat span {
  color:
    var(--rc-text-soft);

  font-weight:
    750;
}


.rc-chart-stat strong {
  font-weight:
    950;
}


.rc-document-legend {
  border-width:
    1.5px;

  border-color:
    var(--rc-border-strong);
}


.rc-document-legend__left {
  color:
    var(--rc-text-soft);

  font-weight:
    800;
}


.rc-document-legend__right strong {
  font-weight:
    950;
}


/* =========================================================
   DETAIL CARDS
   ========================================================= */

.rc-detail-card {
  border-width:
    1.5px;

  border-color:
    var(--rc-border-strong);
}


.rc-detail-card__header {
  border-bottom-width:
    1.5px;

  border-bottom-color:
    var(--rc-border-strong);
}


.rc-detail-card__header h3 {
  font-weight:
    950;
}


.rc-detail-card__header p {
  color:
    var(--rc-text-soft);

  font-weight:
    700;
}


.rc-financial-line {
  border-bottom:
    1.5px solid var(--rc-border);
}


.rc-financial-line span {
  color:
    var(--rc-text-soft);

  font-weight:
    750;
}


.rc-financial-line strong {
  font-weight:
    950;
}


.rc-financial-line--highlight {
  border-width:
    1.5px;

  border-color:
    var(--rc-border-strong);
}


/* =========================================================
   ACTIVIDAD
   ========================================================= */

.rc-activity-item {
  border-bottom:
    1.5px solid var(--rc-border);
}


.rc-activity-item__icon {
  border-width:
    1.5px;

  border-color:
    var(--rc-border-strong);
}


.rc-activity-item__body span {
  color:
    var(--rc-text-soft);

  font-weight:
    750;
}


.rc-activity-item__body strong {
  font-weight:
    950;
}


/* =========================================================
   DATA CARDS
   ========================================================= */

.rc-data-card {
  border-width:
    1.5px;

  border-color:
    var(--rc-border-strong);
}


.rc-data-toolbar {
  border-bottom-width:
    1.5px;

  border-bottom-color:
    var(--rc-border-strong);
}


.rc-data-toolbar__icon {
  border-width:
    1.5px;

  border-color:
    var(--rc-border-strong);
}


.rc-data-toolbar__title-line h3 {
  font-weight:
    950;
}


.rc-data-toolbar__title p {
  color:
    var(--rc-text-soft);

  font-weight:
    700;
}


.rc-data-toolbar__count {
  border-width:
    1.5px;

  border-color:
    var(--rc-border-strong);

  font-weight:
    950;
}


/* =========================================================
   TABLAS
   ========================================================= */

.rc-table thead th {
  border-bottom:
    1.5px solid var(--rc-border-strong);

  color:
    var(--rc-text-soft);

  font-weight:
    950;
}


.rc-table tbody td {
  border-bottom:
    1.5px solid var(--rc-border);

  color:
    var(--rc-text);

  font-weight:
    700;
}


.rc-table-primary strong,
.rc-table-date strong,
.rc-money {
  font-weight:
    950;
}


.rc-table-primary small,
.rc-table-date small {
  color:
    var(--rc-text-soft);

  font-weight:
    700;
}


.rc-table-badge {
  border-width:
    1.5px;

  font-weight:
    900;
}


/* =========================================================
   PAGINACIÓN
   ========================================================= */

.rc-pagination {
  border-top:
    1.5px solid var(--rc-border-strong);
}


.rc-pagination__info {
  color:
    var(--rc-text-soft);

  font-weight:
    750;
}


.rc-pagination__info strong {
  font-weight:
    950;
}


.rc-pagination__btn {
  border-width:
    1.5px;

  border-color:
    var(--rc-border-strong);
}


.rc-pagination__current {
  color:
    var(--rc-text-soft);

  font-weight:
    750;
}


.rc-pagination__current strong {
  font-weight:
    950;
}


/* =========================================================
   EXPORT DROPDOWN
   ========================================================= */

.rc-export-dropdown {
  border-width:
    1.5px;

  border-color:
    var(--rc-border-strong);
}


.rc-export-dropdown button strong {
  font-weight:
    950;
}


.rc-export-dropdown button small {
  color:
    var(--rc-text-soft);

  font-weight:
    700;
}


/* =========================================================
   EMPTY
   ========================================================= */

.rc-table-empty__icon {
  border-width:
    1.5px;

  border-color:
    var(--rc-border-strong);
}


.rc-table-empty__content strong {
  font-weight:
    950;
}


.rc-table-empty__content span {
  color:
    var(--rc-text-soft);

  font-weight:
    700;
}


/* =========================================================
   MOBILE · DIVISIONES MÁS MARCADAS
   ========================================================= */

@media (
  max-width:
    760px
) {
  .rc-client-row {
    border-width:
      1.5px;

    border-color:
      var(--rc-border-strong);
  }


  .rc-client-row__client {
    border-bottom:
      1.5px solid var(--rc-border-strong);
  }


  .rc-client-row__financial,
  .rc-client-row__activity {
    border-width:
      1.5px;

    border-color:
      var(--rc-border-strong);
  }
}/* =========================================================
   WIRTZ HUB · RESÚMENES DE CLIENTES
   MOBILE FINAL + TIPOGRAFÍA MÁS FIRME

   AGREGAR AL FINAL DE:
   frontend/src/pages/facturacion-cobranzas/resumenes-clientes/
   resumenes-clientes.css

   OBJETIVOS:
   - Letras más grandes
   - Letras más firmes
   - Menos gris lavado
   - CERO scroll horizontal
   - Lista clientes responsive real
   - Resumen cliente responsive
   - KPIs responsive
   - Tabs sin barra horizontal
   - Tablas internas sin scroll horizontal
   - Botones legibles en dark
   ========================================================= */


/* =========================================================
   VARIABLES VISUALES MÁS FIRMES
   ========================================================= */

#pageResumenesClientes {
  --rc-text:
    #080d16;

  --rc-text-soft:
    #1f2937;

  --rc-muted:
    #46505e;

  --rc-muted-2:
    #687384;

  --rc-border:
    #c7ced8;

  --rc-border-strong:
    #aeb8c6;

  font-size:
    14px;

  font-weight:
    650;
}


html[data-theme="dark"]
#pageResumenesClientes,
body[data-theme="dark"]
#pageResumenesClientes,
html.dark
#pageResumenesClientes,
body.dark
#pageResumenesClientes {
  --rc-text:
    #f3f3f3;

  --rc-text-soft:
    #dddddd;

  --rc-muted:
    #b8b8b8;

  --rc-muted-2:
    #929292;

  --rc-border:
    #353535;

  --rc-border-strong:
    #505050;
}


/* =========================================================
   TIPOGRAFÍA GENERAL
   ========================================================= */

#pageResumenesClientes,
#pageResumenesClientes button,
#pageResumenesClientes input,
#pageResumenesClientes select,
#pageResumenesClientes textarea {
  text-rendering:
    optimizeLegibility;

  -webkit-font-smoothing:
    antialiased;
}


#pageResumenesClientes p,
#pageResumenesClientes span,
#pageResumenesClientes small,
#pageResumenesClientes label,
#pageResumenesClientes td,
#pageResumenesClientes th {
  font-weight:
    700;
}


/* =========================================================
   HEADER
   ========================================================= */

#pageResumenesClientes
.rc-page-header__eyebrow {
  color:
    var(
      --rc-text-soft
    );

  font-size:
    10px;

  font-weight:
    900;
}


#pageResumenesClientes
.rc-page-header h1 {
  color:
    var(
      --rc-text
    );

  font-weight:
    950;
}


#pageResumenesClientes
.rc-page-header p {
  color:
    var(
      --rc-text-soft
    );

  font-size:
    13px;

  font-weight:
    750;
}


/* =========================================================
   BOTONES
   ========================================================= */

#pageResumenesClientes
.rc-btn {
  font-size:
    12px;

  font-weight:
    900;
}


#pageResumenesClientes
.rc-btn--primary,
#pageResumenesClientes
.rc-btn--dark {
  font-weight:
    900;
}


/* =========================================================
   INPUTS
   ========================================================= */

#pageResumenesClientes
.rc-input,
#pageResumenesClientes
.rc-select,
#pageResumenesClientes
.rc-client-list-search input {
  font-size:
    12px;

  font-weight:
    800;

  color:
    var(
      --rc-text
    );

  border-color:
    var(
      --rc-border-strong
    );
}


#pageResumenesClientes
.rc-input::placeholder,
#pageResumenesClientes
.rc-client-list-search input::placeholder {
  color:
    var(
      --rc-muted
    );

  font-weight:
    700;
}


/* =========================================================
   CLIENT LIST
   ========================================================= */

#pageResumenesClientes
.rc-client-list-header__title h3 {
  font-size:
    13px;

  font-weight:
    900;
}


#pageResumenesClientes
.rc-client-list-header p {
  color:
    var(
      --rc-text-soft
    );

  font-size:
    10px;

  font-weight:
    750;
}


#pageResumenesClientes
.rc-client-row__name {
  color:
    var(
      --rc-text
    );

  font-size:
    12px;

  font-weight:
    900;
}


#pageResumenesClientes
.rc-client-row__meta span,
#pageResumenesClientes
.rc-client-row__contact span {
  color:
    var(
      --rc-text-soft
    );

  font-size:
    9px;

  font-weight:
    750;
}


#pageResumenesClientes
.rc-client-row__location >
strong {
  color:
    var(
      --rc-text
    );

  font-size:
    10.5px;

  font-weight:
    850;
}


#pageResumenesClientes
.rc-client-row__location >
div
span {
  font-size:
    8px;

  font-weight:
    850;
}


#pageResumenesClientes
.rc-client-row__label {
  color:
    var(
      --rc-text-soft
    );

  font-size:
    8px;

  font-weight:
    900;
}


#pageResumenesClientes
.rc-client-row__money,
#pageResumenesClientes
.rc-client-row__activity >
strong {
  font-size:
    11.5px;

  font-weight:
    900;
}


#pageResumenesClientes
.rc-client-row__secondary {
  color:
    var(
      --rc-text-soft
    );

  font-size:
    9px;

  font-weight:
    750;
}


#pageResumenesClientes
.rc-client-row__status {
  font-size:
    8.5px;

  font-weight:
    900;
}


/* =========================================================
   HERO CLIENTE
   ========================================================= */

#pageResumenesClientes
.rc-client-hero__topline h2 {
  font-size:
    20px;

  font-weight:
    950;
}


#pageResumenesClientes
.rc-client-hero__subtitle {
  color:
    var(
      --rc-text-soft
    );

  font-size:
    10.5px;

  font-weight:
    750;
}


#pageResumenesClientes
.rc-client-hero__meta {
  color:
    var(
      --rc-text-soft
    );

  font-size:
    10px;

  font-weight:
    750;
}


/* =========================================================
   KPIS
   ========================================================= */

#pageResumenesClientes
.rc-kpi__label {
  color:
    var(
      --rc-text-soft
    );

  font-size:
    8.5px;

  font-weight:
    900;
}


#pageResumenesClientes
.rc-kpi__value {
  font-size:
    clamp(
      17px,
      1.35vw,
      22px
    );

  font-weight:
    950;
}


#pageResumenesClientes
.rc-kpi__detail {
  color:
    var(
      --rc-text-soft
    );

  font-size:
    9px;

  font-weight:
    750;
}


/* =========================================================
   TABS
   ========================================================= */

#pageResumenesClientes
.rc-tab {
  color:
    var(
      --rc-text-soft
    );

  font-size:
    10.5px;

  font-weight:
    850;
}


#pageResumenesClientes
.rc-tab.is-active {
  color:
    var(
      --rc-text
    );

  font-weight:
    900;
}


/* =========================================================
   CARDS
   ========================================================= */

#pageResumenesClientes
.rc-chart-card__header h3,
#pageResumenesClientes
.rc-detail-card__header h3,
#pageResumenesClientes
.rc-data-toolbar__title-line h3 {
  font-size:
    12px;

  font-weight:
    900;
}


#pageResumenesClientes
.rc-chart-card__header p,
#pageResumenesClientes
.rc-detail-card__header p,
#pageResumenesClientes
.rc-data-toolbar__title p {
  color:
    var(
      --rc-text-soft
    );

  font-size:
    9px;

  font-weight:
    750;
}


/* =========================================================
   FINANCIAL LINES
   ========================================================= */

#pageResumenesClientes
.rc-financial-line
span {
  color:
    var(
      --rc-text-soft
    );

  font-size:
    9.5px;

  font-weight:
    750;
}


#pageResumenesClientes
.rc-financial-line
strong {
  font-size:
    10.5px;

  font-weight:
    900;
}


/* =========================================================
   TABLAS
   ========================================================= */

#pageResumenesClientes
.rc-table
thead
th {
  color:
    var(
      --rc-text-soft
    );

  font-size:
    8.5px;

  font-weight:
    900;
}


#pageResumenesClientes
.rc-table
tbody
td {
  color:
    var(
      --rc-text
    );

  font-size:
    10px;

  font-weight:
    750;
}


#pageResumenesClientes
.rc-money {
  font-size:
    10px;

  font-weight:
    900;
}


/* =========================================================
   PROTECCIÓN GLOBAL MOBILE
   ========================================================= */

@media (
  max-width:
    820px
) {

  html,
  body {
    max-width:
      100%;

    overflow-x:
      hidden !important;
  }


  body:has(
    #pageResumenesClientes
  )
  .app-shell,
  body:has(
    #pageResumenesClientes
  )
  .app-main,
  body:has(
    #pageResumenesClientes
  )
  .app-content,
  #pageResumenesClientes,
  #pageResumenesClientes
  .rc-page,
  #pageResumenesClientes
  .rc-container,
  #pageResumenesClientes
  .rc-workspace,
  #pageResumenesClientes
  .rc-client-workspace {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    overflow-x:
      hidden !important;
  }


  #pageResumenesClientes *,
  #pageResumenesClientes *::before,
  #pageResumenesClientes *::after {
    min-width:
      0;
  }


  /* =======================================================
     CONTAINER
     ======================================================= */

  #pageResumenesClientes
  .rc-container {
    padding:
      10px !important;
  }


  /* =======================================================
     HEADER
     ======================================================= */

  #pageResumenesClientes
  .rc-page-header {
    width:
      100%;

    flex-direction:
      column;

    gap:
      10px;

    margin-bottom:
      10px;
  }


  #pageResumenesClientes
  .rc-page-header__copy {
    width:
      100%;
  }


  #pageResumenesClientes
  .rc-page-header h1 {
    font-size:
      24px;

    line-height:
      1.05;
  }


  #pageResumenesClientes
  .rc-page-header p {
    width:
      100%;

    max-width:
      100%;

    font-size:
      11px;

    line-height:
      1.4;

    overflow-wrap:
      anywhere;
  }


  /* =======================================================
     HEADER ACTIONS
     ======================================================= */

  #pageResumenesClientes
  .rc-page-header__actions {
    width:
      100%;

    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    gap:
      6px;
  }


  #pageResumenesClientes
  .rc-page-header__actions
  .rc-btn,
  #pageResumenesClientes
  .rc-page-header__actions
  .rc-export-menu,
  #pageResumenesClientes
  .rc-page-header__actions
  .rc-export-menu >
  .rc-btn {
    width:
      100%;

    min-width:
      0;
  }


  /* =======================================================
     CLIENT TOOLBAR
     ======================================================= */

  #pageResumenesClientes
  .rc-client-list-toolbar {
    width:
      100%;

    flex-direction:
      column;

    align-items:
      stretch;

    padding:
      8px;

    gap:
      7px;
  }


  #pageResumenesClientes
  .rc-client-list-search {
    width:
      100%;

    min-width:
      0;

    max-width:
      none;
  }


  #pageResumenesClientes
  .rc-client-list-search
  input {
    height:
      40px;

    font-size:
      11px;
  }


  #pageResumenesClientes
  .rc-client-list-toolbar__actions {
    width:
      100%;

    display:
      grid;

    grid-template-columns:
      1fr;

    gap:
      6px;
  }


  #pageResumenesClientes
  .rc-client-filter-button,
  #pageResumenesClientes
  .rc-client-order,
  #pageResumenesClientes
  .rc-client-order__select {
    width:
      100%;
  }


  #pageResumenesClientes
  .rc-client-order {
    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      4px;
  }


  /* =======================================================
     FILTROS
     ======================================================= */

  #pageResumenesClientes
  .rc-client-filters-grid {
    grid-template-columns:
      1fr;

    gap:
      7px;

    padding:
      9px;
  }


  #pageResumenesClientes
  .rc-client-filters-panel__footer {
    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    gap:
      6px;
  }


  #pageResumenesClientes
  .rc-client-filters-panel__footer
  .rc-btn {
    width:
      100%;
  }


  /* =======================================================
     LIST CARD
     SIN SCROLL HORIZONTAL
     ======================================================= */

  #pageResumenesClientes
  .rc-client-list-card {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    overflow-x:
      hidden !important;

    overflow-y:
      visible !important;

    scrollbar-width:
      none !important;
  }


  #pageResumenesClientes
  .rc-client-list-card::-webkit-scrollbar {
    display:
      none !important;
  }


  #pageResumenesClientes
  .rc-client-list__columns {
    display:
      none !important;
  }


  /* =======================================================
     LIST CLIENTES
     ======================================================= */

  #pageResumenesClientes
  .rc-client-list {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    display:
      flex;

    flex-direction:
      column;

    gap:
      8px;

    padding:
      8px;
  }


  /* =======================================================
     CLIENT CARD
     ======================================================= */

  #pageResumenesClientes
  .rc-client-row {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0 !important;

    min-height:
      0;

    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    gap:
      0;

    padding:
      0;

    overflow:
      hidden;

    border:
      1px
      solid
      var(
        --rc-border-strong
      );

    border-radius:
      9px;

    background:
      var(
        --rc-surface
      );
  }


  /* =======================================================
     CLIENTE
     ======================================================= */

  #pageResumenesClientes
  .rc-client-row__client {
    grid-column:
      1 /
      -1;

    min-height:
      72px;

    padding:
      11px;

    border-bottom:
      1px
      solid
      var(
        --rc-border-strong
      );
  }


  #pageResumenesClientes
  .rc-client-row__avatar {
    width:
      34px;

    height:
      34px;

    flex:
      0
      0
      34px;

    font-size:
      10px;
  }


  #pageResumenesClientes
  .rc-client-row__name {
    font-size:
      11px;

    white-space:
      normal;

    overflow:
      visible;

    text-overflow:
      clip;

    overflow-wrap:
      anywhere;
  }


  #pageResumenesClientes
  .rc-client-row__contact
  span,
  #pageResumenesClientes
  .rc-client-row__meta
  span {
    max-width:
      100%;

    white-space:
      normal;

    overflow-wrap:
      anywhere;
  }


  /* =======================================================
     UBICACIÓN
     ======================================================= */

  #pageResumenesClientes
  .rc-client-row__location {
    grid-column:
      1 /
      -1;

    min-height:
      60px;

    padding:
      10px;

    border-bottom:
      1px
      solid
      var(
        --rc-border
      );
  }


  #pageResumenesClientes
  .rc-client-row__location >
  strong {
    white-space:
      normal;

    overflow:
      visible;

    text-overflow:
      clip;

    overflow-wrap:
      anywhere;
  }


  /* =======================================================
     FINANCIAL / ACTIVITY
     ======================================================= */

  #pageResumenesClientes
  .rc-client-row__financial,
  #pageResumenesClientes
  .rc-client-row__activity {
    min-height:
      68px;

    padding:
      10px;

    border-right:
      1px
      solid
      var(
        --rc-border
      );

    border-bottom:
      1px
      solid
      var(
        --rc-border
      );
  }


  #pageResumenesClientes
  .rc-client-row__financial:nth-of-type(
    even
  ),
  #pageResumenesClientes
  .rc-client-row__activity:nth-of-type(
    even
  ) {
    border-right:
      0;
  }


  #pageResumenesClientes
  .rc-client-row__money,
  #pageResumenesClientes
  .rc-client-row__activity >
  strong {
    width:
      100%;

    max-width:
      100%;

    font-size:
      11px;

    white-space:
      normal;

    overflow:
      visible;

    text-overflow:
      clip;

    overflow-wrap:
      anywhere;
  }


  #pageResumenesClientes
  .rc-client-row__secondary {
    width:
      100%;

    max-width:
      100%;

    white-space:
      normal;

    overflow:
      visible;

    text-overflow:
      clip;

    overflow-wrap:
      anywhere;
  }


  /* =======================================================
     ACTION
     ======================================================= */

  #pageResumenesClientes
  .rc-client-row__action {
    grid-column:
      1 /
      -1;

    padding:
      9px;

    border-top:
      0;
  }


  #pageResumenesClientes
  .rc-client-summary-button {
    width:
      100%;

    min-width:
      0;

    min-height:
      39px;

    font-size:
      10px;
  }


  /* =======================================================
     CLIENT HERO
     ======================================================= */

  #pageResumenesClientes
  .rc-client-hero {
    width:
      100%;

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      10px;

    padding:
      10px;
  }


  #pageResumenesClientes
  .rc-client-hero__identity {
    width:
      100%;

    align-items:
      flex-start;
  }


  #pageResumenesClientes
  .rc-client-hero__copy {
    min-width:
      0;

    flex:
      1;
  }


  #pageResumenesClientes
  .rc-client-hero__topline {
    width:
      100%;
  }


  #pageResumenesClientes
  .rc-client-hero__topline
  h2 {
    max-width:
      100%;

    font-size:
      17px;

    white-space:
      normal;

    overflow:
      visible;

    text-overflow:
      clip;

    overflow-wrap:
      anywhere;
  }


  #pageResumenesClientes
  .rc-client-hero__subtitle {
    white-space:
      normal;

    overflow:
      visible;

    text-overflow:
      clip;

    overflow-wrap:
      anywhere;
  }


  #pageResumenesClientes
  .rc-client-hero__actions {
    width:
      100%;

    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    gap:
      6px;
  }


  #pageResumenesClientes
  .rc-client-hero__actions
  .rc-btn {
    width:
      100%;

    min-width:
      0;
  }


  /* =======================================================
     TOOLBAR RESUMEN
     ======================================================= */

  #pageResumenesClientes
  .rc-toolbar {
    width:
      100%;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    gap:
      7px;

    padding:
      9px;
  }


  #pageResumenesClientes
  .rc-toolbar__actions {
    grid-column:
      1 /
      -1;

    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    gap:
      6px;
  }


  #pageResumenesClientes
  .rc-toolbar__actions
  .rc-btn {
    width:
      100%;
  }


  /* =======================================================
     KPIS
     ======================================================= */

  #pageResumenesClientes
  .rc-kpis {
    width:
      100%;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    gap:
      7px;
  }


  #pageResumenesClientes
  .rc-kpi {
    min-height:
      90px;

    padding:
      9px;
  }


  #pageResumenesClientes
  .rc-kpi__value {
    font-size:
      15px;

    white-space:
      normal;

    overflow:
      visible;

    text-overflow:
      clip;

    overflow-wrap:
      anywhere;
  }


  #pageResumenesClientes
  .rc-kpi__detail {
    white-space:
      normal;

    overflow:
      visible;

    text-overflow:
      clip;

    overflow-wrap:
      anywhere;
  }


  /* =======================================================
     TABS
     SIN HORIZONTAL
     ======================================================= */

  #pageResumenesClientes
  .rc-tabs {
    width:
      100%;

    display:
      grid;

    grid-template-columns:
      repeat(
        4,
        minmax(
          0,
          1fr
        )
      );

    gap:
      4px;

    overflow-x:
      hidden !important;

    scrollbar-width:
      none !important;
  }


  #pageResumenesClientes
  .rc-tabs::-webkit-scrollbar {
    display:
      none !important;
  }


  #pageResumenesClientes
  .rc-tab {
    width:
      100%;

    min-width:
      0;

    padding:
      0
      5px;

    font-size:
      8.5px;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;
  }


  /* =======================================================
     CHARTS
     ======================================================= */

  #pageResumenesClientes
  .rc-charts-grid {
    grid-template-columns:
      1fr;
  }


  #pageResumenesClientes
  .rc-chart-card:first-child {
    grid-column:
      1;
  }


  #pageResumenesClientes
  .rc-collection-chart,
  #pageResumenesClientes
  .rc-document-chart {
    flex-direction:
      column;

    gap:
      10px;
  }


  /* =======================================================
     DETAIL GRID
     ======================================================= */

  #pageResumenesClientes
  .rc-detail-grid {
    grid-template-columns:
      1fr;
  }


  /* =======================================================
     TABLE WRAP
     CERO SCROLL HORIZONTAL
     ======================================================= */

  #pageResumenesClientes
  .rc-table-wrap {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    overflow-x:
      hidden !important;

    overflow-y:
      visible !important;

    scrollbar-width:
      none !important;
  }


  #pageResumenesClientes
  .rc-table-wrap::-webkit-scrollbar {
    display:
      none !important;
  }


  /* =======================================================
     TABLA -> CARDS
     ======================================================= */

  #pageResumenesClientes
  .rc-table {
    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0 !important;

    display:
      block;

    table-layout:
      fixed;

    border-collapse:
      separate;

    border-spacing:
      0;
  }


  #pageResumenesClientes
  .rc-table
  thead {
    display:
      none;
  }


  #pageResumenesClientes
  .rc-table
  tbody {
    width:
      100%;

    display:
      flex;

    flex-direction:
      column;

    gap:
      7px;

    padding:
      7px;
  }


  #pageResumenesClientes
  .rc-table
  tbody
  tr {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    overflow:
      hidden;

    border:
      1px
      solid
      var(
        --rc-border-strong
      );

    border-radius:
      8px;

    background:
      var(
        --rc-surface
      );
  }


  #pageResumenesClientes
  .rc-table
  tbody
  td {
    position:
      relative;

    width:
      auto !important;

    max-width:
      100%;

    min-width:
      0;

    min-height:
      52px;

    padding:
      10px !important;

    border-right:
      1px
      solid
      var(
        --rc-border
      ) !important;

    border-bottom:
      1px
      solid
      var(
        --rc-border
      ) !important;

    text-align:
      left !important;

    white-space:
      normal !important;

    overflow:
      hidden;

    overflow-wrap:
      anywhere;

    font-size:
      10px;

    font-weight:
      750;
  }


  #pageResumenesClientes
  .rc-table
  tbody
  td:nth-child(
    even
  ) {
    border-right:
      0 !important;
  }


  #pageResumenesClientes
  .rc-table-money {
    text-align:
      left !important;
  }


  #pageResumenesClientes
  .rc-money {
    white-space:
      normal;

    overflow-wrap:
      anywhere;
  }


  /* =======================================================
     DATA TOOLBAR
     ======================================================= */

  #pageResumenesClientes
  .rc-data-toolbar {
    width:
      100%;

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      7px;

    padding:
      9px;
  }


  #pageResumenesClientes
  .rc-data-toolbar__title {
    width:
      100%;
  }


  #pageResumenesClientes
  .rc-data-toolbar
  .rc-btn {
    width:
      100%;
  }


  /* =======================================================
     EXPORT DROPDOWN
     ======================================================= */

  #pageResumenesClientes
  .rc-export-dropdown {
    right:
      auto;

    left:
      0;

    width:
      min(
        280px,
        calc(
          100vw -
          20px
        )
      );

    max-width:
      calc(
        100vw -
        20px
      );
  }


  /* =======================================================
     DARK BUTTONS
     ======================================================= */

  html[data-theme="dark"]
  #pageResumenesClientes
  .rc-btn--primary,
  body[data-theme="dark"]
  #pageResumenesClientes
  .rc-btn--primary,
  html.dark
  #pageResumenesClientes
  .rc-btn--primary,
  body.dark
  #pageResumenesClientes
  .rc-btn--primary {
    color:
      #080808 !important;

    background:
      #f3f3f3 !important;

    border-color:
      #f3f3f3 !important;
  }


  html[data-theme="dark"]
  #pageResumenesClientes
  .rc-btn--secondary,
  body[data-theme="dark"]
  #pageResumenesClientes
  .rc-btn--secondary,
  html.dark
  #pageResumenesClientes
  .rc-btn--secondary,
  body.dark
  #pageResumenesClientes
  .rc-btn--secondary {
    color:
      #f2f2f2 !important;

    background:
      #0c0c0c !important;

    border-color:
      #494949 !important;
  }
}


/* =========================================================
   MOBILE 560
   ========================================================= */

@media (
  max-width:
    560px
) {

  #pageResumenesClientes
  .rc-container {
    padding:
      7px !important;
  }


  #pageResumenesClientes
  .rc-page-header h1 {
    font-size:
      22px;
  }


  #pageResumenesClientes
  .rc-page-header__actions {
    grid-template-columns:
      1fr;
  }


  #pageResumenesClientes
  .rc-kpis {
    grid-template-columns:
      1fr;
  }


  #pageResumenesClientes
  .rc-client-row {
    grid-template-columns:
      1fr;
  }


  #pageResumenesClientes
  .rc-client-row__client,
  #pageResumenesClientes
  .rc-client-row__location,
  #pageResumenesClientes
  .rc-client-row__financial,
  #pageResumenesClientes
  .rc-client-row__activity,
  #pageResumenesClientes
  .rc-client-row__action {
    grid-column:
      1 /
      -1;
  }


  #pageResumenesClientes
  .rc-client-row__financial,
  #pageResumenesClientes
  .rc-client-row__activity {
    border-right:
      0;
  }


  #pageResumenesClientes
  .rc-client-row__contact {
    flex-direction:
      column;

    align-items:
      flex-start;
  }


  #pageResumenesClientes
  .rc-client-hero__actions {
    grid-template-columns:
      1fr;
  }


  #pageResumenesClientes
  .rc-toolbar {
    grid-template-columns:
      1fr;
  }


  #pageResumenesClientes
  .rc-toolbar__actions {
    grid-column:
      1;

    grid-template-columns:
      1fr;
  }


  #pageResumenesClientes
  .rc-tabs {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  #pageResumenesClientes
  .rc-table
  tbody
  tr {
    grid-template-columns:
      1fr;
  }


  #pageResumenesClientes
  .rc-table
  tbody
  td,
  #pageResumenesClientes
  .rc-table
  tbody
  td:nth-child(
    odd
  ),
  #pageResumenesClientes
  .rc-table
  tbody
  td:nth-child(
    even
  ) {
    grid-column:
      1 /
      -1;

    border-right:
      0 !important;
  }


  #pageResumenesClientes
  .rc-client-filters-panel__footer {
    grid-template-columns:
      1fr;
  }
}


/* =========================================================
   ÚLTIMA PROTECCIÓN CONTRA DESBORDE
   ========================================================= */

@media (
  max-width:
    820px
) {

  #pageResumenesClientes,
  #pageResumenesClientes section,
  #pageResumenesClientes article,
  #pageResumenesClientes div,
  #pageResumenesClientes form,
  #pageResumenesClientes header,
  #pageResumenesClientes footer,
  #pageResumenesClientes aside {
    max-width:
      100%;
  }


  #pageResumenesClientes img,
  #pageResumenesClientes svg {
    max-width:
      100%;
  }


  #pageResumenesClientes
  .rc-client-list-card,
  #pageResumenesClientes
  .rc-table-wrap,
  #pageResumenesClientes
  .rc-tabs {
    scrollbar-width:
      none !important;
  }


  #pageResumenesClientes
  .rc-client-list-card::-webkit-scrollbar,
  #pageResumenesClientes
  .rc-table-wrap::-webkit-scrollbar,
  #pageResumenesClientes
  .rc-tabs::-webkit-scrollbar {
    display:
      none !important;

    width:
      0 !important;

    height:
      0 !important;
  }
}/* =========================================================
   AGREGAR AL FINAL DE:

   frontend/src/pages/facturacion-cobranzas/resumenes-clientes/
   resumenes-clientes.css
   ========================================================= */


/* =========================================================
   TOOLBAR · PERÍODO SELECCIONADO
   ========================================================= */

#pageResumenesClientes
.rc-toolbar {
  grid-template-columns:
    110px
    minmax(
      150px,
      0.6fr
    )
    minmax(
      150px,
      0.6fr
    )
    minmax(
      190px,
      0.9fr
    )
    auto;
}


#pageResumenesClientes
.rc-toolbar__field--periodo {
  min-width:
    0;
}


#pageResumenesClientes
.rc-period-label {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  width:
    100%;

  min-width:
    0;

  height:
    38px;

  padding:
    0
    11px;

  border:
    1.5px solid
    var(--rc-border-strong);

  border-radius:
    8px;

  background:
    var(--rc-surface-soft);

  color:
    var(--rc-text);

  font-size:
    11px;

  font-weight:
    850;

  line-height:
    1;

  overflow:
    hidden;
}


#pageResumenesClientes
.rc-period-label
svg,
#pageResumenesClientes
.rc-period-label
i {
  flex:
    0
    0 auto;

  color:
    var(--rc-muted);
}


#pageResumenesClientes
.rc-period-label
span {
  display:
    block;

  min-width:
    0;

  overflow:
    hidden;

  color:
    var(--rc-text);

  font-size:
    11px;

  font-weight:
    850;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   FECHAS
   ========================================================= */

#pageResumenesClientes
#rcFilterDesde,
#pageResumenesClientes
#rcFilterHasta {
  min-width:
    0;

  color:
    var(--rc-text);

  font-size:
    11px;

  font-weight:
    800;

  cursor:
    pointer;
}


#pageResumenesClientes
#rcFilterDesde::-webkit-calendar-picker-indicator,
#pageResumenesClientes
#rcFilterHasta::-webkit-calendar-picker-indicator {
  cursor:
    pointer;

  opacity:
    0.72;
}


#pageResumenesClientes
#rcFilterDesde:hover,
#pageResumenesClientes
#rcFilterHasta:hover {
  border-color:
    var(--rc-text-soft);

  background:
    var(--rc-surface-soft);
}


/* =========================================================
   DARK
   ========================================================= */

html[data-theme="dark"]
#pageResumenesClientes
.rc-period-label,
body[data-theme="dark"]
#pageResumenesClientes
.rc-period-label,
html.dark
#pageResumenesClientes
.rc-period-label,
body.dark
#pageResumenesClientes
.rc-period-label {
  border-color:
    var(--rc-border-strong);

  background:
    #090909;

  color:
    #ffffff;
}


html[data-theme="dark"]
#pageResumenesClientes
.rc-period-label
span,
body[data-theme="dark"]
#pageResumenesClientes
.rc-period-label
span,
html.dark
#pageResumenesClientes
.rc-period-label
span,
body.dark
#pageResumenesClientes
.rc-period-label
span {
  color:
    #ffffff;
}


html[data-theme="dark"]
#pageResumenesClientes
#rcFilterDesde,
html[data-theme="dark"]
#pageResumenesClientes
#rcFilterHasta,
body[data-theme="dark"]
#pageResumenesClientes
#rcFilterDesde,
body[data-theme="dark"]
#pageResumenesClientes
#rcFilterHasta,
html.dark
#pageResumenesClientes
#rcFilterDesde,
html.dark
#pageResumenesClientes
#rcFilterHasta,
body.dark
#pageResumenesClientes
#rcFilterDesde,
body.dark
#pageResumenesClientes
#rcFilterHasta {
  color-scheme:
    dark;

  background:
    #050505;

  color:
    #ffffff;
}


/* =========================================================
   TOOLBAR · DIVISIONES MÁS FIRMES
   ========================================================= */

#pageResumenesClientes
.rc-toolbar__field {
  position:
    relative;
}


#pageResumenesClientes
.rc-toolbar__field:not(
  :last-child
)::after {
  content:
    "";

  position:
    absolute;

  top:
    22px;

  right:
    -5px;

  width:
    1px;

  height:
    30px;

  background:
    var(--rc-border);
}


#pageResumenesClientes
.rc-toolbar__actions::after {
  display:
    none;
}


/* =========================================================
   RANGO ACTIVO
   ========================================================= */

#pageResumenesClientes
.rc-toolbar:has(
  #rcFilterDesde:not(
    :placeholder-shown
  )
)
.rc-period-label,
#pageResumenesClientes
.rc-toolbar:has(
  #rcFilterHasta:not(
    :placeholder-shown
  )
)
.rc-period-label {
  border-color:
    var(--rc-text-soft);

  background:
    var(--rc-surface-strong);
}


/* =========================================================
   BOTONES TOOLBAR
   ========================================================= */

#pageResumenesClientes
.rc-toolbar__actions
.rc-btn {
  min-height:
    38px;

  font-size:
    11px;

  font-weight:
    900;
}


#pageResumenesClientes
.rc-toolbar__actions
.rc-btn--primary {
  min-width:
    96px;
}


#pageResumenesClientes
.rc-toolbar__actions
.rc-btn--secondary {
  min-width:
    92px;
}


/* =========================================================
   RESPONSIVE · 1350
   ========================================================= */

@media (
  max-width:
    1350px
) {
  #pageResumenesClientes
  .rc-toolbar {
    grid-template-columns:
      100px
      minmax(
        140px,
        1fr
      )
      minmax(
        140px,
        1fr
      )
      minmax(
        180px,
        1.2fr
      );

    align-items:
      end;
  }


  #pageResumenesClientes
  .rc-toolbar__actions {
    grid-column:
      1 /
      -1;

    justify-content:
      flex-start;
  }


  #pageResumenesClientes
  .rc-toolbar__field::after {
    display:
      none;
  }
}


/* =========================================================
   RESPONSIVE · 1000
   ========================================================= */

@media (
  max-width:
    1000px
) {
  #pageResumenesClientes
  .rc-toolbar {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    gap:
      8px;
  }


  #pageResumenesClientes
  .rc-toolbar__field--moneda {
    grid-column:
      auto;
  }


  #pageResumenesClientes
  .rc-toolbar__field--periodo {
    grid-column:
      auto;
  }


  #pageResumenesClientes
  .rc-toolbar__actions {
    grid-column:
      1 /
      -1;

    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    width:
      100%;
  }


  #pageResumenesClientes
  .rc-toolbar__actions
  .rc-btn {
    width:
      100%;

    min-width:
      0;
  }
}


/* =========================================================
   RESPONSIVE · 820
   ========================================================= */

@media (
  max-width:
    820px
) {
  #pageResumenesClientes
  .rc-toolbar {
    display:
      grid !important;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      ) !important;

    width:
      100%;

    max-width:
      100%;

    padding:
      9px;

    gap:
      7px;

    overflow:
      hidden;
  }


  #pageResumenesClientes
  .rc-toolbar__field {
    width:
      100%;

    min-width:
      0;
  }


  #pageResumenesClientes
  .rc-toolbar__field--moneda {
    grid-column:
      1;
  }


  #pageResumenesClientes
  .rc-toolbar__field--periodo {
    grid-column:
      2;
  }


  #pageResumenesClientes
  .rc-toolbar
  .rc-input,
  #pageResumenesClientes
  .rc-toolbar
  .rc-select,
  #pageResumenesClientes
  .rc-period-label {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    height:
      40px;
  }


  #pageResumenesClientes
  .rc-period-label {
    padding:
      0
      9px;
  }


  #pageResumenesClientes
  .rc-period-label
  span {
    font-size:
      10px;
  }


  #pageResumenesClientes
  .rc-toolbar__actions {
    grid-column:
      1 /
      -1;

    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    width:
      100%;

    gap:
      6px;
  }


  #pageResumenesClientes
  .rc-toolbar__actions
  .rc-btn {
    width:
      100%;

    min-width:
      0;

    min-height:
      40px;
  }
}


/* =========================================================
   RESPONSIVE · 600
   ========================================================= */

@media (
  max-width:
    600px
) {
  #pageResumenesClientes
  .rc-toolbar {
    grid-template-columns:
      1fr !important;
  }


  #pageResumenesClientes
  .rc-toolbar__field--moneda,
  #pageResumenesClientes
  .rc-toolbar__field--periodo,
  #pageResumenesClientes
  .rc-toolbar__actions {
    grid-column:
      1;
  }


  #pageResumenesClientes
  .rc-period-label {
    height:
      42px;

    padding:
      0
      11px;
  }


  #pageResumenesClientes
  .rc-period-label
  span {
    font-size:
      11px;

    white-space:
      normal;

    overflow:
      visible;

    text-overflow:
      clip;
  }


  #pageResumenesClientes
  .rc-toolbar
  .rc-input,
  #pageResumenesClientes
  .rc-toolbar
  .rc-select {
    height:
      42px;

    font-size:
      12px;
  }


  #pageResumenesClientes
  .rc-toolbar__actions {
    grid-template-columns:
      1fr;
  }


  #pageResumenesClientes
  .rc-toolbar__actions
  .rc-btn {
    min-height:
      42px;

    font-size:
      12px;
  }
}


/* =========================================================
   RESPONSIVE · 420
   ========================================================= */

@media (
  max-width:
    420px
) {
  #pageResumenesClientes
  .rc-toolbar {
    padding:
      8px;

    gap:
      8px;
  }


  #pageResumenesClientes
  .rc-label {
    margin-bottom:
      5px;

    font-size:
      9px;
  }


  #pageResumenesClientes
  .rc-period-label {
    min-height:
      43px;
  }
}