/* ==========================================================================
   Quantix Inmobiliarias — Administración de Alquileres
   Rediseño 2026 · sistema de diseño
   --------------------------------------------------------------------------
   Color   wine #9E1B32 (derivado del #961E1E original) sobre neutros cálidos
           con sesgo rojo. Serie de datos wine + oro (validada CVD).
   Tipo    IBM Plex Sans (UI) · IBM Plex Mono (cifras y códigos)
           IBM Plex Serif (cifras KPI — peso de reporte contable)
   Layout  Rail lateral vino oscuro fijo · barra superior con estado de caja
           · contenido en grilla de 12 · detalle en drawer lateral
   ========================================================================== */

/* --------------------------------------------------------- tokens: claro */
:root {
  color-scheme: light;

  --page:        #faf7f7;
  --surface:     #ffffff;
  --surface-2:   #f5f1f1;
  --surface-3:   #ebe5e6;

  --ink:         #1a1416;
  --ink-2:       #55494c;
  --ink-3:       #8a7c7f;

  --line:        #e7dfe0;
  --line-strong: #d5cacc;

  --brand:       #9e1b32;
  --brand-hover: #86152a;
  --brand-ink:   #7a1426;
  --brand-soft:  #fbeef0;
  --brand-ring:  rgba(158, 27, 50, 0.32);

  /* rail lateral — oscuro en ambos temas, ancla de marca */
  --rail:        #1c1013;
  --rail-2:      #271518;
  --rail-ink:    #f0e6e8;
  --rail-ink-2:  #a8969a;
  --rail-line:   rgba(255, 255, 255, 0.08);

  /* estado — icono + etiqueta siempre acompañan al color */
  --ok:      #0f7a3d;
  --ok-bg:   #e8f5ec;
  --warn:    #8a5a00;
  --warn-bg: #fdf2dc;
  --crit:    #b3242c;
  --crit-bg: #fdeced;
  --info:    #1a5b8a;
  --info-bg: #e8f2f9;

  /* series de datos */
  --series-1: #9e1b32;
  --series-2: #b07a08;
  --grid:     #ece5e6;
  --axis:     #cdc2c4;

  --shadow-1: 0 1px 2px rgba(26, 20, 22, .06), 0 1px 3px rgba(26, 20, 22, .04);
  --shadow-2: 0 4px 12px rgba(26, 20, 22, .08), 0 2px 4px rgba(26, 20, 22, .04);
  --shadow-3: 0 16px 48px rgba(26, 20, 22, .18), 0 4px 12px rgba(26, 20, 22, .08);

  --r-sm: 4px;
  --r:    7px;
  --r-lg: 11px;

  --sans:  "IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
  --serif: "IBM Plex Serif", ui-serif, Georgia, serif;

  --rail-w: 246px;
  --rail-w-min: 62px;
  --top-h: 56px;
}

/* ---------------------------------------------------------- tokens: oscuro
   Pasos elegidos para el fondo oscuro, no una inversión automática. */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page:        #121011;
    --surface:     #191517;
    --surface-2:   #211c1e;
    --surface-3:   #2b2427;
    --ink:         #f5f0f1;
    --ink-2:       #b8a9ad;
    --ink-3:       #8a7c7f;
    --line:        #2e2629;
    --line-strong: #3d3336;
    --brand:       #c4485c;
    --brand-hover: #d15b6e;
    --brand-ink:   #e58a99;
    --brand-soft:  #2a1519;
    --brand-ring:  rgba(196, 72, 92, 0.4);
    --rail:        #150c0e;
    --rail-2:      #1f1215;
    --ok:      #4ec27a;  --ok-bg:   #12281a;
    --warn:    #d9a21f;  --warn-bg: #2b2110;
    --crit:    #e8666e;  --crit-bg: #2e1416;
    --info:    #6bb3e0;  --info-bg: #10222e;
    --series-1: #c4485c;
    --series-2: #b8891f;
    --grid:     #262023;
    --axis:     #3d3336;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, .45);
    --shadow-3: 0 16px 48px rgba(0, 0, 0, .6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page:        #121011;
  --surface:     #191517;
  --surface-2:   #211c1e;
  --surface-3:   #2b2427;
  --ink:         #f5f0f1;
  --ink-2:       #b8a9ad;
  --ink-3:       #8a7c7f;
  --line:        #2e2629;
  --line-strong: #3d3336;
  --brand:       #c4485c;
  --brand-hover: #d15b6e;
  --brand-ink:   #e58a99;
  --brand-soft:  #2a1519;
  --brand-ring:  rgba(196, 72, 92, 0.4);
  --rail:        #150c0e;
  --rail-2:      #1f1215;
  --ok:      #4ec27a;  --ok-bg:   #12281a;
  --warn:    #d9a21f;  --warn-bg: #2b2110;
  --crit:    #e8666e;  --crit-bg: #2e1416;
  --info:    #6bb3e0;  --info-bg: #10222e;
  --series-1: #c4485c;
  --series-2: #b8891f;
  --grid:     #262023;
  --axis:     #3d3336;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, .45);
  --shadow-3: 0 16px 48px rgba(0, 0, 0, .6);
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; text-wrap: balance; letter-spacing: -.011em; }
p { margin: 0; }
a { color: var(--brand-ink); }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::selection { background: var(--brand-ring); }

/* Red de seguridad: ningún ícono debe estirarse dentro de un contenedor flex.
   Los gráficos y el monograma sí ocupan el ancho que se les da. */
svg:not(.chart):not(.brandmark) { flex: none; }

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.u   { text-transform: uppercase; letter-spacing: .07em; font-size: 10.5px; font-weight: 600; }
.sr  { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* =========================================================== LOGIN ====== */
.login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  background: var(--page);
}

.login__aside {
  position: relative;
  background:
    radial-gradient(120% 90% at 15% 0%, #3a1c22 0%, transparent 55%),
    radial-gradient(100% 80% at 100% 100%, #5e1524 0%, transparent 60%),
    var(--rail);
  color: var(--rail-ink);
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.login__aside::after {           /* trama fina, no decorativa: sugiere plano */
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--rail-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--rail-line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(80% 70% at 30% 30%, #000 0%, transparent 75%);
  pointer-events: none;
}
.login__aside > * { position: relative; z-index: 1; }
.login__mark { display: flex; align-items: center; gap: 13px; }
/* Mismo criterio que en el rail: el logo lo trae la instancia y acá se lo
   acota, para que una imagen grande no se coma la columna. */
.login__mark .brandmark,
.login__mark img { height: 38px; width: auto; max-width: 200px; object-fit: contain; flex: none; }
.login__pitch h1 {
  font-family: var(--serif);
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: -.02em;
  margin-bottom: 18px;
}
.login__pitch p { color: var(--rail-ink-2); max-width: 42ch; font-size: 15px; }
.login__facts { display: flex; gap: 40px; flex-wrap: wrap; }
.login__fact strong {
  display: block; font-family: var(--mono); font-size: 22px; font-weight: 500;
  letter-spacing: -.02em;
}
.login__fact span { color: var(--rail-ink-2); font-size: 12px; }

.login__main { display: grid; place-items: center; padding: 40px 24px; }
.login__card { width: 100%; max-width: 372px; }
.login__card h2 { font-size: 24px; letter-spacing: -.02em; margin-bottom: 6px; }
.login__card > p { color: var(--ink-2); margin-bottom: 28px; }

.field { display: block; margin-bottom: 16px; }
.field > span { display: block; margin-bottom: 6px; font-weight: 500; font-size: 12.5px; color: var(--ink-2); }
.field input {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  transition: border-color .14s, box-shadow .14s;
}
.field input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}
.field input::placeholder { color: var(--ink-3); }

.login__row { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 22px; }
.check { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); cursor: pointer; }
.check input { accent-color: var(--brand); width: 15px; height: 15px; }

.login__note {
  margin-top: 26px; padding: 12px 14px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r); color: var(--ink-2); font-size: 12.5px;
}
.login__note code { font-family: var(--mono); color: var(--ink); }

.login__err {
  display: none; align-items: center; gap: 8px;
  margin-bottom: 16px; padding: 10px 12px;
  background: var(--crit-bg); color: var(--crit);
  border: 1px solid currentColor; border-radius: var(--r); font-size: 13px;
}
.login__err.is-on { display: flex; }

@media (max-width: 900px) {
  .login { grid-template-columns: 1fr; }
  .login__aside { padding: 28px 24px; gap: 28px; }
  .login__pitch h1 { font-size: 27px; }
  .login__facts { gap: 26px; }
}

/* ============================================================= BOTONES == */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px;
  font: inherit; font-weight: 500; font-size: 13px;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r);
  cursor: pointer; white-space: nowrap;
  transition: background .14s, border-color .14s, color .14s;
}
.btn:hover { background: var(--surface-2); border-color: var(--ink-3); }
.btn svg { width: 15px; height: 15px; flex: none; }

.btn--primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn--block { width: 100%; padding: 11px 14px; font-size: 14px; }
.btn--ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn--ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn--sm { padding: 5px 9px; font-size: 12px; }
.btn--icon { padding: 7px; }
.btn--icon svg { width: 16px; height: 16px; }

/* ============================================================== SHELL === */
.shell { display: grid; grid-template-columns: var(--rail-w) 1fr; min-height: 100vh; }
.shell.is-collapsed { --rail-w: var(--rail-w-min); }

/* -------------------------------------------------------------- rail --- */
.rail {
  position: sticky; top: 0; height: 100vh;
  background: var(--rail); color: var(--rail-ink);
  display: flex; flex-direction: column;
  border-right: 1px solid var(--rail-line);
  overflow: hidden;
}
.rail__head {
  height: var(--top-h); flex: none;
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px; border-bottom: 1px solid var(--rail-line);
}
/* El tamaño de la marca lo fija la hoja de estilos, NUNCA el archivo.
   El sistema es white label y el logo lo trae la instancia (`GET /instancia`):
   el que sube el cliente sale de su papelería y puede venir de cualquier
   medida. Sin este techo, un PNG de 1365x482 —el del lockup, sin ir más lejos—
   se dibuja a tamaño natural y tapa el menú entero.
   Va por selector de elemento además de por clase: una imagen que alguien
   agregue mañana sin la clase queda acotada igual. */
.rail__head .brandmark,
.rail__head img { height: 27px; width: auto; max-width: 84px; object-fit: contain; flex: none; }
/* Rail colapsado: quedan 62px menos el padding, así que el techo baja con él. */
.shell.is-collapsed .rail__head .brandmark,
.shell.is-collapsed .rail__head img { max-width: 34px; }
/* El símbolo del producto —el arco de Quantix— es lo que se muestra cuando la
   instancia todavía no configuró su propio logo. Antes había acá un monograma
   de dos trazos que no era "el monograma del sistema": era la inicial de UN
   cliente, vectorizada de su isologo y pintada con el vino de la paleta. En un
   producto white label eso es el error que este módulo vino a corregir, así que
   se jubiló junto con las clases `bm-a` / `bm-b`.
   Va en oro sobre el fondo oscuro que comparten el rail y la columna del
   ingreso (`--rail`, oscuro en los dos temas): 8,8:1 contra el claro y 9,3:1
   contra el oscuro, muy por encima del 3:1 que piden los gráficos. El color va
   acá y no en el marcado porque los trazos usan `currentColor`. */
.brandmark { color: #D4AF37; }
.rail__head b { font-size: 13px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.rail__head small { display: block; font-size: 10px; color: var(--rail-ink-2); font-weight: 400; letter-spacing: .04em; }

.rail__nav { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 10px 0 20px; }
.rail__nav::-webkit-scrollbar { width: 6px; }
.rail__nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 3px; }

.rail__group { padding: 0 10px; margin-bottom: 2px; }
.rail__label {
  padding: 14px 10px 6px; color: var(--rail-ink-2);
  text-transform: uppercase; letter-spacing: .09em; font-size: 10px; font-weight: 600;
}
.rail__item {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 8px 10px; margin-bottom: 1px;
  font: inherit; font-size: 13.5px; text-align: left;
  color: var(--rail-ink-2); background: none; border: 0; border-radius: var(--r);
  cursor: pointer; position: relative;
  transition: background .13s, color .13s;
}
.rail__item svg { width: 17px; height: 17px; flex: none; opacity: .85; }
.rail__item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail__item:hover { background: rgba(255,255,255,.06); color: var(--rail-ink); }
.rail__item.is-active { background: var(--brand); color: #fff; }
.rail__item.is-active svg { opacity: 1; }
.rail__badge {
  margin-left: auto; flex: none;
  min-width: 19px; padding: 1px 5px;
  font-family: var(--mono); font-size: 10.5px; text-align: center;
  background: rgba(255,255,255,.13); color: var(--rail-ink); border-radius: 9px;
}
.rail__item.is-active .rail__badge { background: rgba(0,0,0,.26); color: #fff; }
.rail__badge--crit { background: var(--crit); color: #fff; }

.rail__foot { flex: none; padding: 10px; border-top: 1px solid var(--rail-line); }
.rail__user { display: flex; align-items: center; gap: 10px; padding: 6px 8px; }
.rail__avatar {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: grid; place-items: center; font-size: 12px; font-weight: 600;
}
.rail__user div { min-width: 0; }
.rail__user b { display: block; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail__user small { display: block; font-size: 11px; color: var(--rail-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.shell.is-collapsed .rail__label,
.shell.is-collapsed .rail__item span,
.shell.is-collapsed .rail__badge,
.shell.is-collapsed .rail__head div,
.shell.is-collapsed .rail__user div { display: none; }
.shell.is-collapsed .rail__item { justify-content: center; padding-inline: 0; }
.shell.is-collapsed .rail__group { padding-inline: 8px; }
.shell.is-collapsed .rail__label { display: block; height: 1px; padding: 10px 0 0; margin: 0 8px; overflow: hidden; background: var(--rail-line); color: transparent; }

/* --------------------------------------------------------------- top --- */
.main { min-width: 0; display: flex; flex-direction: column; }

.top {
  position: sticky; top: 0; z-index: 30;
  height: var(--top-h); flex: none;
  display: flex; align-items: center; gap: 12px;
  padding: 0 18px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.top__crumb { display: flex; align-items: center; gap: 8px; min-width: 0; }
.top__crumb h1 { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top__crumb em { font-style: normal; color: var(--ink-3); font-size: 13px; white-space: nowrap; }

.top__search {
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
  min-width: 220px; padding: 6px 10px;
  color: var(--ink-3); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r);
  font: inherit; font-size: 13px; cursor: pointer;
  transition: border-color .14s;
}
.top__search:hover { border-color: var(--line-strong); }
.top__search svg { width: 15px; height: 15px; flex: none; }
.top__search kbd {
  margin-left: auto; font-family: var(--mono); font-size: 10.5px;
  padding: 1px 5px; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); color: var(--ink-3);
}

/* estado de caja — siempre visible (antes había que navegar para saberlo) */
.cashpill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px 5px 8px; border-radius: 20px;
  font-size: 12px; font-weight: 500;
  border: 1px solid transparent;
}
.cashpill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.cashpill--open   { background: var(--ok-bg);   color: var(--ok);   border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.cashpill--closed { background: var(--surface-2); color: var(--ink-2); border-color: var(--line-strong); }
.cashpill b { font-family: var(--mono); font-weight: 500; }

/* ------------------------------------------------------------ content -- */
.content { padding: 22px; flex: 1; min-width: 0; }
.content--wide { max-width: 1520px; }

/* Los hijos de flex/grid arrancan en min-width:auto y no bajan del ancho
   mínimo de su contenido: una tabla ancha estiraría toda la página en vez de
   scrollear dentro de su .tablewrap. */
.card, .grid > *, .rows > * { min-width: 0; }

.page__head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.page__head h2 { font-size: 21px; letter-spacing: -.02em; }
.page__head p { color: var(--ink-2); font-size: 13.5px; margin-top: 3px; }
.page__actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------------- cards --- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.card__head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.card__head h3 { font-size: 14px; }
.card__head p { font-size: 12px; color: var(--ink-3); margin-top: 1px; }
.card__head .right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.card__body { padding: 16px; }

.grid { display: grid; gap: 14px; }
.grid--kpi { grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

/* --------------------------------------------------------- stat tile --- */
.tile { padding: 15px 16px; display: flex; flex-direction: column; gap: 9px; }
.tile__top { display: flex; align-items: center; gap: 8px; }
.tile__top span { color: var(--ink-2); font-size: 12px; font-weight: 500; }
.tile__top svg { width: 15px; height: 15px; color: var(--ink-3); flex: none; }
.tile__val {
  font-family: var(--serif); font-size: 29px; font-weight: 400;
  letter-spacing: -.022em; line-height: 1.05; color: var(--ink);
}
.tile__val small { font-size: 15px; color: var(--ink-3); font-family: var(--sans); margin-right: 2px; }
.tile__foot { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); }
.tile__spark { margin-top: 2px; }

.delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; font-family: var(--mono); font-size: 11.5px; }
.delta svg { width: 12px; height: 12px; }
.delta--up   { color: var(--ok); }
.delta--down { color: var(--crit); }
.delta--flat { color: var(--ink-3); }

/* -------------------------------------------------------------- pills -- */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 20px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
}
.pill svg { width: 11px; height: 11px; flex: none; }

/* --------------------------------------------------------------------- aviso
   Advertencia fija dentro de una pantalla. A diferencia del toast, que informa
   DESPUÉS de una acción y se va solo, esto dice algo que el usuario tiene que
   saber ANTES de operar: no se descarta, no se autocierra y no se puede pasar
   por alto. Se usa donde la pantalla podría hacerle creer algo que no es.
   Los colores salen de --warn/--warn-bg, que ya están definidos para los dos
   temas, así que no hace falta nada extra para el modo oscuro. */
.aviso {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; margin-bottom: 18px;
  background: var(--warn-bg); color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent);
  border-radius: var(--r);
  font-size: 13px; line-height: 1.5;
}
.aviso > svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.aviso__cuerpo { min-width: 0; }
.aviso strong { font-weight: 650; }

/* Versión chica, para meterla al lado de un dato puntual dentro de un panel. */
.aviso--dato { margin: 6px 0 0; padding: 8px 10px; font-size: 12px; }
.pill--ok   { background: var(--ok-bg);   color: var(--ok);   border-color: color-mix(in srgb, var(--ok) 26%, transparent); }
.pill--warn { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.pill--crit { background: var(--crit-bg); color: var(--crit); border-color: color-mix(in srgb, var(--crit) 30%, transparent); }
.pill--info { background: var(--info-bg); color: var(--info); border-color: color-mix(in srgb, var(--info) 26%, transparent); }
.pill--mute { background: var(--surface-2); color: var(--ink-2); border-color: var(--line-strong); }

/* ------------------------------------------------------------ filtros -- */
.filters {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.search {
  position: relative; flex: 1 1 250px; min-width: 190px; max-width: 400px;
}
.search svg {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--ink-3); pointer-events: none;
}
.search input {
  width: 100%; padding: 8px 10px 8px 32px;
  font: inherit; font-size: 13px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r);
}
.search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); background: var(--surface); }

.select {
  padding: 8px 10px; font: inherit; font-size: 13px;
  color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r); cursor: pointer;
}
.select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }

.seg { display: inline-flex; padding: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); }
.seg button {
  padding: 5px 11px; font: inherit; font-size: 12.5px; font-weight: 500;
  color: var(--ink-2); background: none; border: 0; border-radius: 5px; cursor: pointer;
}
.seg button.is-on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }

.filters__count { margin-left: auto; font-size: 12.5px; color: var(--ink-3); font-family: var(--mono); }

/* ------------------------------------------------------------- tabla --- */
/* El wrapper scrollea en los dos ejes: al declarar overflow-x, el navegador
   convierte overflow-y en auto igual. Por eso el encabezado sticky se ancla a
   este contenedor (top:0) y no al viewport — si se le pusiera el alto de la
   barra superior, quedaría empujado encima de la primera fila. */
.tablewrap {
  overflow: auto;
  max-height: max(420px, calc(100vh - 250px));
  border-radius: var(--r-lg);
  overscroll-behavior: contain;
}
table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
table.tbl th {
  position: sticky; top: 0; z-index: 2;
  padding: 9px 12px; text-align: left;
  background: var(--surface-2); color: var(--ink-2);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  white-space: nowrap; border-bottom: 1px solid var(--line);
}
table.tbl th.sortable { cursor: pointer; user-select: none; }
table.tbl th.sortable:hover { color: var(--ink); }
table.tbl th .sortmark { opacity: .4; margin-left: 3px; }
table.tbl th.is-sorted .sortmark { opacity: 1; color: var(--brand-ink); }
table.tbl td {
  padding: 9px 12px; border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
table.tbl tbody tr { background: var(--surface); }
table.tbl tbody tr:hover { background: var(--surface-2); }
table.tbl tbody tr.is-clickable { cursor: pointer; }
table.tbl .r { text-align: right; }
table.tbl .money { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
table.tbl .code { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
table.tbl .neg { color: var(--crit); }
table.tbl .strong { font-weight: 600; }
.tbl__actions { display: flex; gap: 4px; justify-content: flex-end; opacity: 0; transition: opacity .12s; }
table.tbl tbody tr:hover .tbl__actions,
table.tbl tbody tr:focus-within .tbl__actions { opacity: 1; }
@media (hover: none) { .tbl__actions { opacity: 1; } }

.empty { padding: 44px 20px; text-align: center; color: var(--ink-3); }
.empty svg { width: 30px; height: 30px; margin-bottom: 10px; opacity: .5; }
.empty b { display: block; color: var(--ink-2); font-size: 14px; margin-bottom: 3px; }

/* ------------------------------------------------------------- listas -- */
.rows { display: flex; flex-direction: column; }
.row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; border-bottom: 1px solid var(--line);
  text-align: left; width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0;
  font: inherit; color: inherit; cursor: pointer;
}
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--surface-2); }
.row__main { min-width: 0; flex: 1; }
.row__main b { display: block; font-size: 13.5px; font-weight: 600; }
.row__main small { color: var(--ink-3); font-size: 12px; }
.row__end { text-align: right; flex: none; }
/* Un <svg> sin ancho propio, como hijo de un flex, crece hasta llenar el hueco.
   Los íconos sueltos de una fila (el chevron de "seleccionada") necesitan medida. */
.row > svg { width: 17px; height: 17px; flex: none; color: var(--ink-3); }
.row__end .money { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13.5px; font-weight: 600; }
.row__end small { display: block; color: var(--ink-3); font-size: 11.5px; }

/* ------------------------------------------------------------ drawer --- */
.scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(20, 12, 14, .45); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .18s;
}
.scrim.is-on { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 70;
  width: min(520px, 100vw);
  background: var(--surface); border-left: 1px solid var(--line);
  box-shadow: var(--shadow-3);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .22s cubic-bezier(.32,.72,.35,1);
}
.drawer.is-on { transform: none; }
.drawer__head {
  flex: none; display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
}
.drawer__head h3 { font-size: 16px; letter-spacing: -.015em; }
.drawer__head p { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.drawer__body { flex: 1; overflow-y: auto; padding: 18px; }
.drawer__foot {
  flex: none; display: flex; gap: 8px; justify-content: flex-end;
  padding: 12px 18px; border-top: 1px solid var(--line); background: var(--surface-2);
}

.dl { display: grid; grid-template-columns: minmax(96px, auto) 1fr; gap: 9px 16px; font-size: 13px; }
.dl dt { color: var(--ink-3); }
.dl dd { margin: 0; color: var(--ink); }
.dl dd.money { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.section-label {
  display: flex; align-items: center; gap: 10px;
  margin: 22px 0 11px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; font-weight: 600;
}
.section-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.section-label:first-child { margin-top: 0; }

/* ---------------------------------------------------------- palette ---- */
.cmdk {
  position: fixed; inset: 0; z-index: 90;
  display: none; justify-content: center; align-items: flex-start;
  padding: 12vh 20px 20px;
  background: rgba(20, 12, 14, .42); backdrop-filter: blur(3px);
}
.cmdk.is-on { display: flex; }
.cmdk__box {
  width: min(580px, 100%); max-height: 62vh;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-lg); box-shadow: var(--shadow-3); overflow: hidden;
}
.cmdk__in { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.cmdk__in svg { width: 17px; height: 17px; color: var(--ink-3); flex: none; }
.cmdk__in input { flex: 1; font: inherit; font-size: 15px; color: var(--ink); background: none; border: 0; outline: none; }
.cmdk__list { overflow-y: auto; padding: 6px; }
.cmdk__grp { padding: 10px 10px 4px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; font-size: 10px; font-weight: 600; }
.cmdk__opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; font: inherit; font-size: 13.5px; text-align: left;
  color: var(--ink); background: none; border: 0; border-radius: var(--r); cursor: pointer;
}
.cmdk__opt svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.cmdk__opt small { margin-left: auto; color: var(--ink-3); font-size: 11.5px; }
.cmdk__opt.is-sel { background: var(--brand-soft); color: var(--brand-ink); }
.cmdk__opt.is-sel svg { color: var(--brand-ink); }

/* ---------------------------------------------------------- charts ----- */
.chart { width: 100%; display: block; overflow: visible; }
.chart .grid-line { stroke: var(--grid); stroke-width: 1; }
.chart .axis-line { stroke: var(--axis); stroke-width: 1; }
.chart text { font-family: var(--sans); font-size: 10.5px; fill: var(--ink-3); }
.chart .val-lbl { font-family: var(--mono); font-size: 10px; fill: var(--ink-2); }

.legend { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 9px; height: 9px; border-radius: 2px; flex: none; }

.tip {
  position: fixed; z-index: 95; pointer-events: none;
  padding: 8px 10px; min-width: 130px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r); box-shadow: var(--shadow-2);
  font-size: 12px; opacity: 0; transition: opacity .1s;
}
.tip.is-on { opacity: 1; }
.tip b { display: block; margin-bottom: 5px; font-size: 12px; }
.tip .tip__r { display: flex; align-items: center; gap: 7px; margin-top: 3px; }
.tip .tip__r i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.tip .tip__r em { font-style: normal; color: var(--ink-2); }
.tip .tip__r b { margin: 0 0 0 auto; font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------- misc/toast -- */
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; min-width: 250px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-left: 3px solid var(--ok);
  border-radius: var(--r); box-shadow: var(--shadow-2); font-size: 13px;
  animation: toast-in .2s cubic-bezier(.32,.72,.35,1);
}
.toast svg { width: 16px; height: 16px; color: var(--ok); flex: none; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

.bar { height: 6px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--brand); border-radius: 3px; }

/* ------------------------------------------------------------ mobile --- */
.rail__toggle { display: inline-flex; }
@media (max-width: 940px) {
  .shell { grid-template-columns: 1fr; }
  .rail {
    position: fixed; left: 0; top: 0; z-index: 80; width: var(--rail-w-min);
    transform: translateX(-100%); transition: transform .2s cubic-bezier(.32,.72,.35,1);
  }
  .shell.is-mobileopen .rail { transform: none; width: 246px; }
  .shell.is-mobileopen .rail__label,
  .shell.is-mobileopen .rail__item span,
  .shell.is-mobileopen .rail__badge,
  .shell.is-mobileopen .rail__head div,
  .shell.is-mobileopen .rail__user div { display: block; }
  .shell.is-mobileopen .rail__item { justify-content: flex-start; padding-inline: 10px; }
  /* Barra superior compacta: sin la bajada del breadcrumb, sin las cifras de la
     píldora de caja y sin el rótulo del buscador. El estado de caja sigue
     leyéndose por texto, no sólo por color. */
  .top { gap: 8px; padding: 0 12px; }
  .top__crumb em { display: none; }
  .top__search { min-width: 0; flex: none; padding: 7px; }
  .top__search span, .top__search kbd { display: none; }
  .cashpill { padding: 5px 9px; font-size: 11.5px; }
  .cashpill b { display: none; }
  .content { padding: 14px; }
  .grid--kpi { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .page__actions { margin-left: 0; }
  .tablewrap { max-height: none; }
  table.tbl th { position: static; }
}
@media (min-width: 941px) { .rail__mobile { display: none !important; } }

@media print {
  .rail, .top, .page__actions, .filters, .tbl__actions { display: none !important; }
  .shell { grid-template-columns: 1fr; }
  .card { box-shadow: none; break-inside: avoid; }
}