/* ============================================================================
   Control JB — sistema visual
   ----------------------------------------------------------------------------
   Esto NO es un dashboard de startup: es el libro de cobros de una notaría, y
   se diseña como tal. Tinta sobre papel, cifras alineadas, sellos de estado.
   Quien lo usa es un abogado, así que manda la CIFRA y manda el ESTADO; el
   resto se calla.

   Lo que había antes y por qué se fue: fondo oscuro con tres degradados
   "aurora", cian y verde neón, y glassmorphism. Ese es el uniforme de las
   interfaces generadas a máquina, y en un notariado además se lee barato.

   Decisiones:

   · PALETA — tinta (azul de firma notarial), papel cálido y SELLO (bronce
     sepia). El bronce es el color propio de este oficio: marca la plata y la
     identidad. Cero violetas, cero degradados de adorno.
   · TIPOGRAFÍA 2+1 sin descargar nada — serif real para títulos (Iowan Old
     Style / Palatino / Georgia: firma el documento), sistema para interfaz,
     mono con CIFRAS TABULARES para el dinero. Sin fuentes externas a propósito:
     esto corre en localhost y en una notaría puede no haber internet. Tiene que
     verse intencional, no improvisado.
   · CIFRAS — `tabular-nums` en todo lo que sea plata y alineadas a la derecha en
     tablas. Sin eso las columnas de montos bailan y no se pueden comparar dos
     filas de un vistazo, que es justo lo que hace un abogado revisando cobros.
   · ESTADOS — palabra legible + regla de color a la izquierda, no chips de
     caramelo. El color REFUERZA; el estado se entiende aunque no se distingan
     los colores.
   · CERO emoji en la navegación. Es la marca más rápida de "esto lo hizo una
     máquina". Se reemplazan por SVG de trazo en el HTML.

   Los nombres de clase son EXACTAMENTE los que ya usan las 7 vistas
   (form-field, btn, card, status-pill, kv-row, table-wrap…): la lógica no se
   toca, solo la piel.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Tokens */
:root {
  /* Tinta: el azul de una firma notarial, no un azul de marca */
  --tinta:        #1B2A41;
  --tinta-80:     #3B4A61;
  --tinta-60:     #64708A;
  --tinta-40:     #8E97AB;
  --tinta-20:     #C3C9D6;

  /* Papel: cálido, no blanco clínico */
  --papel:        #F6F4F0;
  --papel-hoja:   #FFFFFF;
  --papel-hondo:  #EDE9E2;

  /* Sello: el acento de este trabajo */
  --sello:        #8A6B3D;
  --sello-claro:  #B08E5A;
  --sello-tenue:  #F1E9DC;

  /* Estados. Tierras, no neón. */
  --pagado:         #1D6B4F;
  --pagado-tenue:   #E4EFE9;
  --parcial:        #A9721B;
  --parcial-tenue:  #FAEFD9;
  --pendiente:      #2C4B7C;
  --pendiente-tenue:#E6EDF7;
  --observado:      #A63A2C;
  --observado-tenue:#F8E7E4;
  --anulado:        #6E6E6E;
  --anulado-tenue:  #ECECEC;

  --linea:        #DFDAD1;
  --linea-fuerte: #C8C1B5;

  /* Tipografía */
  --f-titulo: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --f-ui:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-cifra:  ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Escala de 4pt */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px;

  --r-chico:  4px;
  --r:        6px;
  --r-grande: 10px;

  /* Sombras contadas: papel sobre papel, no flotando en el aire */
  --sombra-hoja: 0 1px 2px rgba(27, 42, 65, .06), 0 1px 1px rgba(27, 42, 65, .04);
  --sombra-alta: 0 12px 32px rgba(27, 42, 65, .16), 0 2px 8px rgba(27, 42, 65, .08);

  --barra: 248px;   /* ancho del lateral */
}

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

/* clip y NO hidden: hidden rompe position:sticky de la barra superior */
html, body { margin: 0; padding: 0; overflow-x: clip; }

body {
  font-family: var(--f-ui);
  font-size: 14px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* Cualquier cifra de dinero: mismo ancho por dígito, siempre */
.mono, .stat-value, .amount-pos, .amount-neg, .code-block {
  font-family: var(--f-cifra);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

::selection { background: var(--sello-tenue); color: var(--tinta); }

/* Foco visible SIEMPRE: el abogado va a tabular por el formulario */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--sello);
  outline-offset: 2px;
  border-radius: var(--r-chico);
}

/* ---------------------------------------------------- 2. Estructura general */
.app-shell {
  display: grid;
  grid-template-columns: var(--barra) minmax(0, 1fr);
  min-height: 100vh;
}

/* ------- Lateral: tinta plena, el lomo del libro ------- */
.sidebar {
  background: var(--tinta);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  padding: var(--e5) 0 var(--e4);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: 0 var(--e5) var(--e5);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  margin-bottom: var(--e4);
}

/* El sello: cuadrado, no círculo. Un sello notarial no es una burbuja. */
.brand-mark {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  font-family: var(--f-titulo);
  font-size: 16px;
  letter-spacing: .04em;
  color: var(--sello-claro);
  border: 1.5px solid var(--sello);
  border-radius: 3px;
  background: rgba(138, 107, 61, .14);
}
.brand-name {
  font-family: var(--f-titulo);
  font-size: 17px;
  letter-spacing: .01em;
  line-height: 1.15;
}
.brand-name small {
  display: block;
  font-family: var(--f-ui);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .48);
  margin-top: 3px;
}

.nav { display: flex; flex-direction: column; gap: 1px; padding: 0 var(--e3); flex: 1 1 auto; overflow-y: auto; }

.nav-group {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .34);
  padding: var(--e4) var(--e3) var(--e2);
}
.nav-group:first-child { padding-top: 0; }

.nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px var(--e3);
  border-radius: var(--r);
  color: rgba(255, 255, 255, .76);
  font-size: 13.5px;
  border-left: 2px solid transparent;
  transition: background .12s ease, color .12s ease;
}
.nav-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav-link.active {
  background: rgba(255, 255, 255, .1);
  color: #fff;
  border-left-color: var(--sello-claro);
  font-weight: 600;
}
.nav-icon {
  flex: 0 0 16px;
  width: 16px; height: 16px;
  display: grid; place-items: center;
  opacity: .82;
}
.nav-icon svg { width: 16px; height: 16px; display: block; }
.nav-link.active .nav-icon { opacity: 1; color: var(--sello-claro); }

.sidebar-footer {
  padding: var(--e4) var(--e5) 0;
  margin-top: var(--e4);
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 11.5px;
  color: rgba(255, 255, 255, .5);
  display: flex; align-items: center; gap: var(--e2);
}
.dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.dot-online { background: #4CAF7D; box-shadow: 0 0 0 3px rgba(76, 175, 125, .18); }

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

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--e4);
  padding: var(--e4) var(--e6);
  background: rgba(246, 244, 240, .94);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--linea);
  min-height: 68px;
}
.topbar-title {
  font-family: var(--f-titulo);
  font-size: 22px;
  letter-spacing: -.01em;
  margin-right: auto;
}
.topbar-right { display: flex; align-items: center; gap: var(--e4); }
.topbar-date {
  font-size: 12px;
  color: var(--tinta-60);
  text-align: right;
  white-space: nowrap;      /* se partia en dos lineas ("09:32 / p. m.") y parecia un descuido */
  line-height: 1.35;
}

.burger {
  display: none;
  background: none; border: 1px solid var(--linea-fuerte);
  color: var(--tinta); font-size: 17px; line-height: 1;
  padding: 7px 10px; border-radius: var(--r); cursor: pointer;
}

.content { padding: var(--e6); max-width: 1440px; width: 100%; }

/* ------------------------------------------------------- 3. Tipografía UI */
h1, h2, h3, h4 { font-family: var(--f-titulo); font-weight: 600; margin: 0; letter-spacing: -.005em; }

.section-title {
  font-family: var(--f-titulo);
  font-size: 16.5px;
  font-weight: 600;
  margin: 0 0 var(--e4);
  padding-bottom: var(--e2);
  border-bottom: 1px solid var(--linea);
  display: flex; align-items: baseline; gap: var(--e3);
}
.section-title small {
  font-family: var(--f-ui);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--tinta-60);
}

.text-dim   { color: var(--tinta-60); }
.text-faint { color: var(--tinta-40); }

/* Colores semánticos que ya usan las vistas. Con criterio: si las 8 cifras del
   resumen salen cada una de un color, queda un arcoíris y ninguna resalta. Solo
   se tiñe lo que exige una acción (observado, parcial) o cierra bien (pagado);
   el resto queda en tinta, que es lo que deja ver la cifra. */
.c-green  { color: var(--pagado); }
.c-red    { color: var(--observado); }
.c-yellow { color: var(--parcial); }
.c-cyan,
.c-blue   { color: var(--tinta); }

/* Enlace dentro de una tabla: tiene que LEERSE como enlace, no ser texto de otro
   color. Antes iba con un style en linea apuntando a --cyan, token que murio con la
   paleta anterior, o sea el enlace quedaba indistinguible del texto normal. */
.enlace {
  color: var(--sello);
  text-decoration: underline;
  text-decoration-color: rgba(138, 107, 61, .4);
  text-underline-offset: 2px;
  font-weight: 600;
}
.enlace:hover { text-decoration-color: var(--sello); }

.amount-pos { color: var(--pagado);    font-weight: 600; }
.amount-neg { color: var(--observado); font-weight: 600; }

/* ------------------------------------------------------------ 4. Tarjetas */
.card {
  background: var(--papel-hoja);
  border: 1px solid var(--linea);
  border-radius: var(--r-grande);
  padding: var(--e5);
  box-shadow: var(--sombra-hoja);
  margin-bottom: var(--e5);
}
.card:last-child { margin-bottom: 0; }

.grid { display: grid; gap: var(--e4); margin-bottom: var(--e5); }
.grid:last-child { margin-bottom: 0; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Las vistas ponen `class="card stat-card"`, o sea las dos a la vez. Dentro de un
   grid el margin-bottom de .card se suma a la caja del item, y como
   `.card:last-child` lo pone en 0, la ÚLTIMA tarjeta de cada fila se estiraba más
   que sus vecinas (align-items:stretch la hace llenar el hueco del margen ajeno).
   Se veía como si una tarjeta estuviera mal medida. El grid ya separa con `gap`. */
.grid > .card { margin-bottom: 0; }

/* ------- Cifras del tablero -------
   La cifra manda: grande, mono, tabular. La etiqueta va ARRIBA y chica, para
   que el ojo aterrice en el número y no tenga que buscarlo. */
.stat-card {
  background: var(--papel-hoja);
  border: 1px solid var(--linea);
  border-radius: var(--r-grande);
  padding: var(--e4) var(--e5) var(--e5);
  box-shadow: var(--sombra-hoja);
  position: relative;
  overflow: hidden;
}
/* filete de sello arriba: identidad sin ruido */
.stat-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--sello); opacity: .5;
}
.stat-label {
  font-size: 10.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--tinta-60);
  margin-bottom: var(--e2);
}
.stat-value {
  font-size: 27px;
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--tinta);
}
.stat-card .text-dim { font-size: 11.5px; margin-top: var(--e1); }

/* ------------------------------------------------------------- 5. Botones */
.btn {
  --btn-bg: var(--papel-hoja);
  --btn-fg: var(--tinta);
  --btn-bd: var(--linea-fuerte);
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  line-height: 1.2;
  padding: 9px 15px;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, transform .06s ease;
}
.btn:hover:not(:disabled) { background: var(--papel-hondo); border-color: var(--tinta-40); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary {
  --btn-bg: var(--tinta); --btn-fg: #fff; --btn-bd: var(--tinta);
  box-shadow: 0 1px 2px rgba(27, 42, 65, .18);
}
.btn-primary:hover:not(:disabled) { background: #253654; border-color: #253654; }

.btn-success { --btn-bg: var(--pagado); --btn-fg: #fff; --btn-bd: var(--pagado); }
.btn-success:hover:not(:disabled) { background: #17573F; border-color: #17573F; }
.btn-danger  { --btn-bg: var(--observado); --btn-fg: #fff; --btn-bd: var(--observado); }
.btn-danger:hover:not(:disabled) { background: #8B2E22; border-color: #8B2E22; }

.btn-ghost { --btn-bg: transparent; --btn-bd: var(--linea-fuerte); }
.btn-ghost:hover:not(:disabled) { background: var(--papel-hondo); }

.btn-sm { padding: 6px 11px; font-size: 12px; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.btn-row.end { justify-content: flex-end; }

/* -------------------------------------------------------- 6. Formularios */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e4);
}
.span-2 { grid-column: 1 / -1; }

.form-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.form-field > label,
.form-field > span:first-child {
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tinta-60);
  font-weight: 700;
}
.form-field input,
.form-field select,
.form-field textarea {
  font-family: inherit;
  font-size: 14px;
  color: var(--tinta);
  padding: 9px 11px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r);
  background: var(--papel-hoja);
  width: 100%;
  min-width: 0;
  transition: border-color .12s ease, box-shadow .12s ease;
}
/* cuantía y valores en mono: 90.000,01 se lee sin dudar */
.form-field input[type="number"] { font-family: var(--f-cifra); font-variant-numeric: tabular-nums; }
.form-field textarea { min-height: 76px; resize: vertical; line-height: 1.5; }
.form-field input:hover, .form-field select:hover, .form-field textarea:hover { border-color: var(--tinta-40); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--sello);
  box-shadow: 0 0 0 3px rgba(138, 107, 61, .15);
}
.form-field input:disabled, .form-field select:disabled, .form-field textarea:disabled {
  background: var(--papel-hondo); color: var(--tinta-60); cursor: not-allowed;
}
.form-field input[type="checkbox"] { width: auto; accent-color: var(--sello); }

/* El input de archivo nativo salía cortado ("Sin arc…ionados") y parecía roto. Se
   le da aire y se le pone el botón con el estilo del resto, para que el comprobante
   se vea como una acción y no como un control a medio dibujar. */
.form-field input[type="file"] {
  padding: 7px 9px;
  font-size: 12.5px;
  color: var(--tinta-60);
  cursor: pointer;
}
.form-field input[type="file"]::file-selector-button {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--tinta);
  background: var(--papel-hondo);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-chico);
  padding: 5px 10px;
  margin-right: 10px;
  cursor: pointer;
}
.form-field input[type="file"]:hover::file-selector-button { background: var(--sello-tenue); border-color: var(--sello-claro); }
.form-field small, .form-field .hint { font-size: 11.5px; color: var(--tinta-60); text-transform: none; letter-spacing: 0; font-weight: 400; }

.filters-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: var(--e3);
  align-items: end;
  padding: var(--e4);
  background: var(--papel-hoja);
  border: 1px solid var(--linea);
  border-radius: var(--r-grande);
  margin-bottom: var(--e4);
  box-shadow: var(--sombra-hoja);
}

/* ------------------------------------------------------------- 7. Tablas */
.table-wrap {
  background: var(--papel-hoja);
  border: 1px solid var(--linea);
  border-radius: var(--r-grande);
  overflow: auto;                 /* el ancho scrollea AQUÍ, no la página */
  box-shadow: var(--sombra-hoja);
}
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }

thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--papel-hondo);
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinta-60);
  font-weight: 700;
  text-align: left;
  padding: 11px var(--e4);
  border-bottom: 1px solid var(--linea-fuerte);
  white-space: nowrap;
}
tbody td {
  padding: 11px var(--e4);
  border-bottom: 1px solid var(--linea);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #FBFAF8; }

/* Dinero a la derecha y tabular: dos filas se comparan de un vistazo */
td .mono { font-variant-numeric: tabular-nums; }
th.num, td.num, .col-money { text-align: right; font-family: var(--f-cifra); font-variant-numeric: tabular-nums; }

/* Segunda línea dentro de una celda: el rango bajo la cuantía, el método bajo el
   cliente. Ahorra dos columnas sin perder el dato. */
td .sub {
  display: block;
  font-family: var(--f-ui);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-40);
  margin-top: 2px;
  font-weight: 400;
  letter-spacing: 0;
}

/* La fecha nunca se parte: "04/08/2026" en una línea o no se puede leer la columna */
.td-fecha { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* El nombre del cliente se partía en TRES líneas ("Estefanía / Muñoz / Vera") y
   estiraba toda la fila. Se le da ancho y se corta con puntos suspensivos: el
   nombre completo está en el detalle, a un clic. */
.td-cliente {
  min-width: 190px;
  max-width: 260px;
  font-weight: 550;
}
.td-cliente > .sub { font-weight: 400; }

/* Total JB es LA cifra de este sistema: lo que cobra la notaría. Va en tinta y en
   negrita para que gane a las demás columnas de la fila. */
.total-jb { font-weight: 700; color: var(--tinta); }

.row-link { cursor: pointer; }
.row-link:hover { background: var(--sello-tenue); }

/* ==========================================================================
   LIBRO DE COBROS
   --------------------------------------------------------------------------
   La pantalla que el abogado abre todos los días. Se diseñó para que se lea
   como la hoja de cálculo que ya lleva (67% de los despachos la usa, y el
   motivo declarado es entender exactamente qué pasa con su dinero), con lo que
   la hoja no puede hacer encima: cobrar en un clic, la cuenta a la vista y los
   totales recalculándose con el filtro.

   Densidad a propósito: 12.5px y 7px de padding. Excel le muestra 15 columnas y
   las lee sin problema; el espaciado generoso de dashboard es lo que obligaba a
   esconder las columnas del desglose, que son las que dan confianza.
   ========================================================================== */

/* ------- Barra de filtros: UNA línea, no ocho campos apilados ------- */
.libro-barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2);
  padding: var(--e3) var(--e4);
  background: var(--papel-hoja);
  border: 1px solid var(--linea);
  border-radius: var(--r-grande);
  box-shadow: var(--sombra-hoja);
  margin-bottom: var(--e4);
}
.libro-buscar { position: relative; flex: 1 1 240px; min-width: 200px; display: flex; align-items: center; }
.libro-buscar svg { position: absolute; left: 10px; width: 14px; height: 14px; color: var(--tinta-40); pointer-events: none; }
.libro-buscar input {
  width: 100%; font-family: inherit; font-size: 13.5px; color: var(--tinta);
  padding: 8px 11px 8px 32px;
  border: 1px solid var(--linea-fuerte); border-radius: var(--r); background: var(--papel-hoja);
}
.libro-buscar input:focus { outline: none; border-color: var(--sello); box-shadow: 0 0 0 3px rgba(138,107,61,.15); }

.libro-select, .libro-fechas input {
  font-family: inherit; font-size: 13px; color: var(--tinta);
  padding: 8px 10px; border: 1px solid var(--linea-fuerte);
  border-radius: var(--r); background: var(--papel-hoja);
}
.libro-fechas { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tinta-60); }
.libro-fechas input { font-variant-numeric: tabular-nums; }
.libro-conteo {
  margin-left: auto; font-family: var(--f-cifra); font-size: 11.5px;
  color: var(--tinta-40); font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ------- La reja ------- */
.libro-wrap {
  background: var(--papel-hoja);
  border: 1px solid var(--linea);
  border-radius: var(--r-grande);
  overflow: auto;                    /* scrollea AQUÍ, nunca la página */
  box-shadow: var(--sombra-hoja);
  max-height: calc(100vh - 210px);   /* así el pie de totales queda siempre a la vista */
}
table.libro { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }

table.libro thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--papel-hondo);
  font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--tinta-60); font-weight: 700; text-align: left;
  padding: 8px 7px;
  border-bottom: 1px solid var(--linea-fuerte);
  white-space: nowrap;
}
table.libro tbody td {
  padding: 6px 7px;
  border-bottom: 1px solid var(--linea);
  vertical-align: middle;
}
/* Zebra tenue: la referencia visual de una hoja de cálculo, sin ruido */
table.libro tbody tr:nth-child(even) { background: #FBFAF7; }
table.libro tbody tr:hover { background: var(--sello-tenue); }

table.libro .num { text-align: right; font-family: var(--f-cifra); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.libro .tenue { color: var(--tinta-40); }
table.libro .c-fecha  { white-space: nowrap; width: 1%; }
table.libro .c-cliente { min-width: 150px; }

/* ------- Paneles inmovilizados -------
   Estado y Cobrar quedan CONGELADOS a la derecha, como el "inmovilizar paneles" de
   Excel. Es la respuesta correcta al problema de ancho: en un portátil de 13" las
   columnas de plata scrollean, pero el estado y el botón de cobrar nunca se
   esconden. La versión anterior de esta pantalla los empujaba fuera de la vista, que
   es exactamente el error que se estaba corrigiendo.
   Necesita border-collapse:separate (ya está arriba): con `collapse` los bordes de
   las celdas sticky se pierden y el fondo se transparenta sobre lo que scrollea. */
/* SALDO congelado junto al estado y la acción: es EL número de un libro de cobros
   ("cuánto me debe"). Antes quedaba escondido debajo de las columnas fijas — otra
   vez el error de tapar lo importante. */
table.libro .c-saldo {
  background: rgba(166, 58, 44, .035);           /* el saldo pesa: leve tinte de alerta */
  box-shadow: inset 1px 0 0 var(--linea);
}

table.libro .c-estado .status-pill { font-size: 10px; padding: 3px 7px 3px 6px; letter-spacing: .04em; }
table.libro .c-estado { white-space: nowrap; width: 1%; box-shadow: inset 1px 0 0 var(--linea); }
table.libro .c-accion { width: 78px; text-align: right; white-space: nowrap; }
/* el zebra y el hover tienen que verse TAMBIÉN en las columnas congeladas, o se
   nota el corte como una franja de otro color */

/* Total JB es LA cifra del sistema: gana a todas las demás de la fila */
table.libro .c-total { font-weight: 700; color: var(--tinta); background: rgba(138,107,61,.045); }
table.libro thead .c-total { background: var(--papel-hondo); box-shadow: inset 0 -2px 0 var(--sello); }

.libro-cliente { font-weight: 600; color: var(--tinta); display: inline; }
.libro-cliente:hover { color: var(--sello); text-decoration: underline; text-underline-offset: 2px; }
/* ── El nombre sale del sitio: la flechita lo dice antes del clic ───────────
   Un enlace que abre otra pestaña sin avisar desorienta. La flecha es la
   convencion, y el title dice a que deal va. */
.libro-cliente .ext { font-size: 10px; color: var(--tinta-40); margin-left: 3px; vertical-align: 1px; }
.libro-cliente:hover .ext { color: var(--sello); }
/* trámite sin deal (carga manual): mismo peso, pero no es un enlace */
.libro-cliente.sin-deal { color: var(--tinta); cursor: default; }
/* la ficha interna queda a un clic, en tono menor: es la accion secundaria */
.libro-ficha { font-size: 11px; color: var(--tinta-40); margin-left: 8px; }
.libro-ficha:hover { color: var(--sello); text-decoration: underline; text-underline-offset: 2px; }
/* en la ficha de detalle el mismo enlace va con texto completo */
.btn-deal {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 8px;
  font-size: 12px; font-weight: 600; color: var(--sello);
  border: 1px solid var(--linea); border-radius: 6px; padding: 5px 10px;
}
.btn-deal:hover { background: var(--sello-tenue); text-decoration: none; }

/* La cuenta a la vista: "77,50 + 220,00". No le pedimos que confíe en el total,
   se le muestra de dónde sale. Es el motivo declarado por el que prefieren Excel. */
table.libro .sub {
  display: block; font-family: var(--f-ui); font-size: 9.5px;
  color: var(--tinta-40); margin-top: 1px; font-weight: 400; letter-spacing: 0;
}
table.libro .sub.cuenta {
  font-family: var(--f-cifra); font-variant-numeric: tabular-nums;
  color: var(--sello); opacity: .8;
}

/* Proporción cobrada: se lee de un golpe, comparar dos cifras no */
table.libro .sub.pagado-sub { color: var(--pagado); font-variant-numeric: tabular-nums;
  font-family: var(--f-cifra); font-size: 9.5px; }
table.libro tfoot .sub.pagado-sub { color: #6FD3A2; }

.barra-pago {
  display: block; height: 3px; margin-top: 4px; border-radius: 2px;
  background: var(--linea); overflow: hidden;
}
.barra-pago i { display: block; height: 100%; background: var(--pagado); }

.btn-cobrar {
  --btn-bg: var(--pagado); --btn-fg: #fff; --btn-bd: var(--pagado);
  padding: 4px 11px; font-size: 11.5px; letter-spacing: .02em;
}
.btn-cobrar:hover:not(:disabled) { background: #17573F; border-color: #17573F; }
.libro-ver { font-size: 11.5px; color: var(--tinta-40); }
.libro-ver:hover { color: var(--sello); text-decoration: underline; text-underline-offset: 2px; }

/* ------- La fila de sumas, fija abajo -------
   Lo más familiar que existe en una hoja de cálculo. Y hace algo que su Excel no:
   se recalcula con el filtro puesto, sin reseleccionar rangos a mano. */
table.libro tfoot td {
  position: sticky; bottom: 0; z-index: 4;
  background: var(--tinta);
  color: #fff;
  padding: 10px;
  border-top: 2px solid var(--sello);
  font-weight: 700;
}
table.libro tfoot .c-cliente { font-family: var(--f-titulo); font-size: 14px; font-weight: 600; }
table.libro tfoot .sub { color: rgba(255,255,255,.5); font-weight: 400; }
table.libro tfoot .tenue { color: rgba(255,255,255,.5); }
table.libro tfoot .amount-pos { color: #6FD3A2; }
table.libro tfoot .amount-neg { color: #F2A093; }
/* opaco a proposito: con rgba() la ultima fila del cuerpo se veia POR DETRAS
   del pie y las dos cifras se superponian */
table.libro tfoot .c-total { background: #3A3020; color: #fff; }
/* `table.libro .c-saldo` (dos clases) le gana en especificidad a `table.libro tfoot td`
   (una clase), así que su tinte claro pisaba la tinta del pie y la celda del total de
   saldo salía casi blanca. Se repone en oscuro conservando el matiz de alerta. */
table.libro tfoot .c-saldo { background: #3A2528; }

@media (max-width: 860px) {
  .libro-wrap { max-height: none; }
  .libro-conteo { margin-left: 0; }
  .libro-buscar { flex: 1 1 100%; }
}

.loading-row, .empty-state {
  padding: var(--e7) var(--e5);
  text-align: center;
  color: var(--tinta-60);
  font-size: 13.5px;
}
.empty-state strong {
  display: block;
  font-family: var(--f-titulo);
  font-size: 15.5px;
  color: var(--tinta);
  margin-bottom: 5px;
  font-weight: 600;
}

/* ------------------------------------------------- 8. Sellos de estado ---
   Palabra + regla de color. El color refuerza, no informa solo. */
.status-pill {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 9px 4px 8px;
  border-radius: var(--r-chico);
  border-left: 3px solid currentColor;
  white-space: nowrap;
}
.status-PAGADO         { color: var(--pagado);    background: var(--pagado-tenue); }
.status-PAGO_PARCIAL   { color: var(--parcial);   background: var(--parcial-tenue); }
.status-PENDIENTE_PAGO { color: var(--pendiente); background: var(--pendiente-tenue); }
.status-RECIBIDO,
.status-CALCULADO      { color: var(--pendiente); background: var(--pendiente-tenue); }
.status-OBSERVADO      { color: var(--observado); background: var(--observado-tenue); }
.status-ANULADO        { color: var(--anulado);   background: var(--anulado-tenue); text-decoration: line-through; }

.tag {
  display: inline-block;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--sello-tenue);
  color: var(--sello);
  border: 1px solid rgba(138, 107, 61, .24);
  white-space: nowrap;
}

.badge {
  font-size: 10px; font-weight: 700;
  letter-spacing: .1em;
  padding: 4px 8px;
  border-radius: var(--r-chico);
  border: 1px solid transparent;
}
.badge-online  { color: var(--pagado);    background: var(--pagado-tenue);    border-color: rgba(29, 107, 79, .22); }
.badge-offline { color: var(--observado); background: var(--observado-tenue); border-color: rgba(166, 58, 44, .22); }

/* -------------------------------------------------- 9. Lista clave/valor */
.kv-list { display: flex; flex-direction: column; }
.kv-row {
  display: grid;
  grid-template-columns: minmax(140px, 34%) minmax(0, 1fr);
  gap: var(--e4);
  padding: 9px 0;
  border-bottom: 1px dashed var(--linea);
  align-items: baseline;
}
.kv-row:last-child { border-bottom: none; }
.kv-row .k {
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--tinta-60); font-weight: 700;
}
.kv-row .v { font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.kv-row .v.mono { font-size: 13.5px; }

.detail-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--e5); align-items: start; }

/* ------------------------------------------------------------ 10. Avisos */
.alert {
  display: flex; gap: var(--e3);
  padding: var(--e3) var(--e4);
  border-radius: var(--r);
  border: 1px solid transparent;
  border-left-width: 3px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: var(--e4);
}
.alert:last-child { margin-bottom: 0; }
.alert strong { font-weight: 700; }
.alert-info  { background: var(--pendiente-tenue); border-color: rgba(44, 75, 124, .2);  border-left-color: var(--pendiente); color: #22406C; }
.alert-warn  { background: var(--parcial-tenue);   border-color: rgba(169, 114, 27, .22); border-left-color: var(--parcial);   color: #7A5210; }
.alert-error { background: var(--observado-tenue); border-color: rgba(166, 58, 44, .22);  border-left-color: var(--observado); color: #872E22; }

.code-block {
  background: #16202F;
  color: #DCE3EE;
  padding: var(--e4);
  border-radius: var(--r);
  font-size: 12.5px;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
  border: 1px solid #101821;
}

/* ---------------------------------------------------------- 11. Pestañas */
.tabbar {
  display: flex; gap: var(--e1);
  border-bottom: 1px solid var(--linea);
  margin-bottom: var(--e4);
  overflow-x: auto;
}
.tab-btn {
  appearance: none; background: none; border: none;
  font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--tinta-60);
  padding: 9px var(--e4);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color .12s ease, border-color .12s ease;
}
.tab-btn:hover { color: var(--tinta); }
.tab-btn.active { color: var(--tinta); border-bottom-color: var(--sello); }

/* -------------------------------------------------------------- 12. Modal */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: none;
  align-items: flex-start; justify-content: center;
  padding: var(--e6) var(--e4);
  background: rgba(27, 42, 65, .42);
  overflow-y: auto;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--papel-hoja);
  border-radius: var(--r-grande);
  box-shadow: var(--sombra-alta);
  width: 100%;
  max-width: 620px;
  padding: var(--e5);
  border: 1px solid var(--linea);
  margin: auto 0;
}
.modal-title {
  font-family: var(--f-titulo);
  font-size: 19px; font-weight: 600;
  margin: 0 0 var(--e1);
}
.modal-sub { font-size: 12.5px; color: var(--tinta-60); margin: 0 0 var(--e5); }
.modal .form-grid { margin-bottom: var(--e5); }

/* ------------------------------------------------------------- 13. Toasts */
.toast-stack {
  position: fixed; z-index: 200;
  right: var(--e5); bottom: var(--e5);
  display: flex; flex-direction: column; gap: var(--e2);
  max-width: min(380px, calc(100vw - 32px));
}
.toast {
  background: var(--tinta);
  color: #fff;
  padding: var(--e3) var(--e4);
  border-radius: var(--r);
  font-size: 13px;
  box-shadow: var(--sombra-alta);
  border-left: 3px solid var(--sello-claro);
  animation: toast-in .18s ease-out;
}
.toast.ok    { border-left-color: #4CAF7D; }
.toast.error { border-left-color: #E0705F; }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------ 14. Responsive ---
   El lateral se vuelve cajón. Nada de texto clickeable en dos líneas. */
@media (max-width: 1080px) {
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 60;
    width: var(--barra);
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: var(--sombra-alta);
  }
  .sidebar.open { transform: none; }
  .burger { display: inline-flex; }
  .topbar { padding: var(--e3) var(--e4); gap: var(--e3); }
  .topbar-title { font-size: 18px; }
  .topbar-date { display: none; }
  .content { padding: var(--e4); }
  .form-grid, .grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: minmax(0, 1fr); }
  .kv-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .stat-value { font-size: 23px; }
}

@media (max-width: 420px) {
  .content { padding: var(--e3); }
  .card, .stat-card { padding: var(--e4); }
  .toast-stack { left: var(--e3); right: var(--e3); bottom: var(--e3); max-width: none; }
}

/* --------------------------------------------------------- 15. Impresión ---
   El abogado imprime el detalle del trámite para el expediente. */
@media print {
  .sidebar, .topbar, .toast-stack, .btn-row, .filters-bar, .tabbar { display: none !important; }
  .app-shell { display: block; }
  .content { padding: 0; max-width: none; }
  .card, .stat-card, .table-wrap { box-shadow: none; border-color: #999; break-inside: avoid; }
  body { background: #fff; }
}

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