/* ==========================================================================
   Sistema de diseño
   --------------------------------------------------------------------------
   Un solo archivo de estilos para todo el sistema. Las páginas no llevan CSS
   propio salvo lo estrictamente suyo.

   Índice
     1. Tokens (color, tipografía, espacio, radios, sombras)
     2. Base y tipografía
     3. Layout (shell, grid, secciones)
     4. Navegación
     5. Superficies: card, panel, stat
     6. Formularios
     7. Botones
     8. Tablas
     9. Badges, chips y estados
    10. Modales, toasts y overlays
    11. Utilidades
   ========================================================================== */

/* ============================ 1. TOKENS ================================== */
:root {
  color-scheme: light;

  /* — Neutros: una sola escala, del papel a la tinta — */
  --n-0:  #ffffff;
  --n-25: #fbfcfd;
  --n-50: #f4f6f9;
  --n-100:#e9edf3;
  --n-200:#d8dfe8;
  --n-300:#b9c4d2;
  --n-400:#8d9cb0;
  --n-500:#65758c;
  --n-600:#4a5768;
  --n-700:#343e4c;
  --n-800:#1f2733;
  --n-900:#131a24;
  --n-950:#0b1017;

  /* — Superficies — */
  --surface:        var(--n-50);
  --surface-raised: var(--n-0);
  --surface-sunken: var(--n-100);
  --surface-inset:  var(--n-25);

  /* — Tinta — */
  --ink:        var(--n-900);
  --ink-soft:   var(--n-600);
  --ink-muted:  var(--n-500);
  --ink-invert: var(--n-0);

  /* — Bordes: visibles de verdad — */
  --line:        var(--n-200);
  --line-strong: var(--n-300);

  /* — Acento — */
  --accent:      #0b6fd4;
  --accent-hover:#0959ab;
  --accent-soft: #e7f1fd;
  --accent-line: #a9cdf5;
  --accent-ink:  #08498c;

  /* — Semánticos del dinero — */
  --ingreso:      #2a78d6;   /* entra */
  --ingreso-soft: #e8f1fc;
  --costo:        #c2410c;   /* sale */
  --costo-soft:   #fdefe7;
  --utilidad:     #0f7a52;   /* queda */
  --utilidad-soft:#e6f5ef;

  /* — Estado — */
  --ok:      #0f7a52;  --ok-soft:      #e6f5ef;  --ok-line:      #9dd5bd;
  --warn:    #a86000;  --warn-soft:    #fdf3e3;  --warn-line:    #ecc98d;
  --danger:  #c02626;  --danger-soft:  #fdecec;  --danger-line:  #f0b4b4;
  --info:    #0b6fd4;  --info-soft:    #e7f1fd;  --info-line:    #a9cdf5;

  /* — Series de gráficos (paleta validada para CVD) — */
  --serie-1: #2a78d6;
  --serie-2: #eb6834;
  --serie-3: #1baf7a;
  --serie-4: #eda100;
  --grid-line: var(--n-200);

  /* — Tipografía — */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;

  --t-xs:  0.6875rem;  /* 11 */
  --t-sm:  0.8125rem;  /* 13 */
  --t-md:  0.875rem;   /* 14 */
  --t-lg:  1rem;       /* 16 */
  --t-xl:  1.25rem;    /* 20 */
  --t-2xl: 1.625rem;   /* 26 */
  --t-3xl: 2.25rem;    /* 36 */

  /* — Espacio (escala de 4) — */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px; --s-12: 48px;

  /* — Radios — */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-full: 999px;

  /* — Sombras — */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, .07), 0 1px 3px rgba(16, 24, 40, .05);
  --shadow-lg: 0 16px 40px rgba(16, 24, 40, .13), 0 2px 8px rgba(16, 24, 40, .07);

  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
  --header-h: 60px;

  /* — Movimiento: curvas fuertes; las que trae CSS se quedan cortas — */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* — Tema oscuro: escogido, no invertido — */
:root[data-theme="dark"] {
  color-scheme: dark;

  --surface:        #0c1219;
  --surface-raised: #141c26;
  --surface-sunken: #090e14;
  --surface-inset:  #10171f;

  --ink:        #eef2f7;
  --ink-soft:   #a3b1c2;
  --ink-muted:  #74839a;
  --ink-invert: #0b1017;

  --line:        #222e3d;
  --line-strong: #33445a;

  --accent:      #4da3ff;
  --accent-hover:#75b8ff;
  --accent-soft: #12243a;
  --accent-line: #2b5583;
  --accent-ink:  #a8d1ff;

  --ingreso:      #58a6f0;  --ingreso-soft: #11253c;
  --costo:        #f08a5d;  --costo-soft:   #351f14;
  --utilidad:     #45c99a;  --utilidad-soft:#0e2b22;

  --ok:     #45c99a;  --ok-soft:     #0e2b22;  --ok-line:     #1e5a45;
  --warn:   #e0a94a;  --warn-soft:   #2e2413;  --warn-line:   #5e4a1e;
  --danger: #f2726f;  --danger-soft: #331718;  --danger-line: #6b2b2c;
  --info:   #4da3ff;  --info-soft:   #12243a;  --info-line:   #2b5583;

  --serie-1: #3987e5;
  --serie-2: #d95926;
  --serie-3: #199e70;
  --serie-4: #c98500;
  --grid-line: #222e3d;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 14px rgba(0,0,0,.45);
  --shadow-lg: 0 18px 44px rgba(0,0,0,.6);
}

/* ========================= 2. BASE Y TIPOGRAFÍA ========================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

/* Al cambiar de tema, TODO cambia en el mismo cuadro. Antes solo el fondo
   del body iba con transición: durante ese cuarto de segundo el fondo ya
   era oscuro y los títulos, tarjetas y bordes seguían claros, así que el
   texto quedaba blanco sobre blanco. */
html[data-cambiando-tema] *,
html[data-cambiando-tema] *::before,
html[data-cambiando-tema] *::after {
  transition: none !important;
  animation: none !important;
}

/* Donde el navegador lo permite, el cambio entero se funde de una sola
   vez —no pedazo por pedazo— y sin mover nada de sitio. */
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: .22s;
  mix-blend-mode: normal;
}

h1, h2, h3, h4 { margin: 0; font-weight: 650; line-height: 1.25; letter-spacing: -.011em; }
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }
p  { margin: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Tamaño base de todo icono en línea. Sin esto un <svg> sin width/height
   se estira hasta llenar su contenedor. Los lienzos de gráficos lo
   sobrescriben con `.viz svg`, que tiene mayor especificidad. */
svg { width: 16px; height: 16px; flex-shrink: 0; }

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

::selection { background: color-mix(in srgb, var(--accent) 25%, transparent); }

/* Números tabulares en todo lo que sea dinero o conteo */
.num, td.num, th.num, .money { font-variant-numeric: tabular-nums; text-align: right; }
.mono { font-family: var(--mono); font-size: .95em; letter-spacing: -.02em; }

/* Scrollbars discretas */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-full); border: 3px solid transparent; background-clip: content-box; }

/* ============================== 3. LAYOUT =============================== */
.shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

.page {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--s-6) var(--s-5) var(--s-12);
  flex: 1;
}
@media (max-width: 700px) { .page { padding: var(--s-4) var(--s-4) var(--s-10); } }

.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-6);
}
.page-head .eyebrow {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--s-1);
}
.page-head .sub { color: var(--ink-soft); font-size: var(--t-md); margin-top: var(--s-1); }

/* Columnas */
.split { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.split-wide { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: var(--s-5); align-items: start; }
@media (max-width: 1000px) { .split, .split-wide { grid-template-columns: minmax(0, 1fr); } }

.grid { display: grid; gap: var(--s-4); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.row { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }
.row-end { justify-content: flex-end; }
.row-between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: var(--s-4); }
.stack-sm { display: flex; flex-direction: column; gap: var(--s-2); }
.spacer { flex: 1; }

/* Franja pegajosa: la barra de acciones que sigue al usuario */
.sticky-bar {
  position: sticky; bottom: var(--s-4); z-index: 20;
  background: var(--surface-raised); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: var(--s-3) var(--s-4);
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
}

/* ==================== 3.b TRANSICIÓN ENTRE PANTALLAS ====================
   La barra superior se queda quieta y solo se mueve el contenido: da la
   sensación de que la aplicación es una sola pantalla que cambia de
   contenido, en vez de cinco páginas sueltas que se recargan.
   Entrar dura más que salir a propósito — salir tiene que sentirse
   inmediato, porque la persona ya decidió irse. */
@keyframes pagEntra    { from { opacity: 0; transform: translateY(10px); } }
@keyframes pagSale     { to   { opacity: 0; transform: translateY(-8px); } }
/* Al avanzar en el menú el contenido se va por la izquierda, y al retroceder
   por la derecha: el movimiento coincide con la dirección del recorrido. */
@keyframes pagSaleIzq  { to   { opacity: 0; transform: translateX(-26px); } }
@keyframes pagSaleDer  { to   { opacity: 0; transform: translateX(26px); } }

main { animation: pagEntra .28s var(--ease-out) both; }
body.saliendo main                  { animation: pagSale    .16s var(--ease-out) both; }
body.saliendo[data-dir="der"] main  { animation: pagSaleIzq .16s var(--ease-out) both; }
body.saliendo[data-dir="izq"] main  { animation: pagSaleDer .16s var(--ease-out) both; }

/* Mientras se va, nada responde al puntero: evita el doble clic que
   dispararía dos navegaciones. */
body.saliendo { pointer-events: none; }

/* El enlace del módulo al que vamos se marca antes de que cargue, para que
   la barra no parezca congelada durante la espera. */
.nav a.yendo { color: var(--ink); background: var(--surface-inset); }

/* Barra de carga. La página siguiente tarda lo que tarde el navegador, y
   sin nada que lo indique ese medio segundo parece que el clic no funcionó.
   Avanza rápido hasta el 70 % y ahí espera: no finge saber cuánto falta. */
.barra-carga {
  position: fixed; inset: 0 auto auto 0; z-index: 9999;
  height: 2px; width: 0;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  transition: width .5s cubic-bezier(.15,.85,.3,1), opacity .2s;
}
.barra-carga.va { width: 70%; }

/* Aparición de bloques dentro de una misma pantalla (resultados, tablas). */
@keyframes bloqueEntra { from { opacity: 0; transform: translateY(6px); } }
.aparece { animation: bloqueEntra .22s var(--ease-out) both; }

/* =========================== 4. NAVEGACIÓN ============================== */
.topbar {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: var(--s-4);
  padding: 0 var(--s-5);
}

.brand { display: flex; align-items: center; gap: var(--s-2); font-weight: 700; font-size: var(--t-md); color: var(--ink); white-space: nowrap; letter-spacing: -.02em; }
.brand-logo {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  object-fit: cover; background: #fff; padding: 1px;
  box-shadow: inset 0 0 0 1px var(--line);
}
/* Placa clara para el logo sobre superficies oscuras: el archivo trae fondo
   blanco propio y sin la placa se recortaría como un cuadro suelto. */
.logo-placa {
  display: grid; place-items: center; background: #fff;
  border-radius: var(--r-lg); padding: var(--s-3); flex-shrink: 0;
}
.logo-placa img { display: block; width: 100%; height: auto; }
.brand small { display: block; font-size: var(--t-xs); font-weight: 500; color: var(--ink-muted); letter-spacing: 0; }

.nav { display: flex; align-items: center; gap: 2px; overflow-x: auto; flex: 1; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 7px 11px; border-radius: var(--r-sm);
  font-size: var(--t-sm); font-weight: 550; color: var(--ink-soft); text-decoration: none;
  transition: background .15s, color .15s;
}
@media (hover: hover) and (pointer: fine) { .nav a:hover { background: var(--surface-sunken); color: var(--ink); text-decoration: none; } }
.nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 650; }
.nav a svg { width: 15px; height: 15px; flex-shrink: 0; }

.topbar-end { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }

.who { display: flex; align-items: center; gap: var(--s-2); padding-right: var(--s-1); }
.who-avatar {
  width: 30px; height: 30px; border-radius: var(--r-full); display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; font-size: var(--t-sm);
  border: 1px solid var(--accent-line); flex-shrink: 0;
}
.who-text { line-height: 1.2; }
.who-text b { display: block; font-size: var(--t-sm); font-weight: 650; }
.who-text span { font-size: var(--t-xs); color: var(--ink-muted); }
@media (max-width: 900px) { .who-text { display: none; } }

/* Interruptor de tema */
.theme-toggle {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface-raised); color: var(--ink-soft);
  display: grid; place-items: center; cursor: pointer; flex-shrink: 0;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
@media (hover: hover) and (pointer: fine) { .theme-toggle:hover { color: var(--ink); border-color: var(--line-strong); } }
.theme-toggle svg { width: 16px; height: 16px; }
:root[data-theme="dark"] .icon-sun { display: block; }
:root[data-theme="dark"] .icon-moon { display: none; }
.icon-sun { display: none; }
.icon-moon { display: block; }

/* Menú móvil */
.nav-toggle { display: none; }
@media (max-width: 860px) {
  .nav-toggle { display: grid; }
  .nav {
    position: fixed; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--surface-raised); border-bottom: 1px solid var(--line);
    padding: var(--s-3); box-shadow: var(--shadow-lg); max-height: 70vh; overflow-y: auto;
  }
  .nav[hidden] { display: none; }
  .nav a { padding: 11px 12px; font-size: var(--t-md); }
}

/* ======================= 5. CARD / PANEL / STAT ========================= */
.card {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.card-head h3 { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-md); font-weight: 650; }
.card-head .hint { font-size: var(--t-sm); color: var(--ink-muted); width: 100%; margin-top: -2px; }
.card-body { padding: var(--s-5); }
.card-body.tight { padding: var(--s-4); }
.card-body.flush { padding: 0; }
.card-foot { padding: var(--s-3) var(--s-5); border-top: 1px solid var(--line); background: var(--surface-inset); border-radius: 0 0 var(--r-lg) var(--r-lg); }

/* Acento lateral por intención */
.card.accent-warn   { border-left: 3px solid var(--warn); }
.card.accent-info   { border-left: 3px solid var(--info); }
.card.accent-danger { border-left: 3px solid var(--danger); }

/* Tarjeta de indicador */
.stat {
  background: var(--surface-raised); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-4) var(--s-5); position: relative; overflow: hidden;
}
.stat .label {
  font-size: var(--t-xs); font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-muted); display: flex; align-items: center; gap: 6px;
}
.stat .label svg { width: 13px; height: 13px; }
.stat .value { font-size: var(--t-2xl); font-weight: 700; letter-spacing: -.025em; margin-top: var(--s-2); font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat .foot { font-size: var(--t-sm); color: var(--ink-muted); margin-top: var(--s-1); display: flex; align-items: center; gap: 5px; }
.stat.is-ingreso  .value { color: var(--ingreso); }
.stat.is-costo    .value { color: var(--costo); }
.stat.is-utilidad .value { color: var(--utilidad); }
.stat.is-neg      .value { color: var(--danger); }
/* Costo de personal del día: no es de ninguna carta porte, así que se
   distingue del costo operativo en vez de confundirse con él. */
.stat.is-personal { border-color: var(--warn-line); background: color-mix(in srgb, var(--warn-soft) 55%, var(--surface-raised)); }

/* Barra fina de progreso / margen */
.meter { height: 4px; border-radius: var(--r-full); background: var(--surface-sunken); overflow: hidden; margin-top: var(--s-2); }
.meter > span { display: block; height: 100%; border-radius: var(--r-full); background: var(--accent); transition: width .4s ease; }
.meter.ok > span { background: var(--ok); }
.meter.warn > span { background: var(--warn); }
.meter.danger > span { background: var(--danger); }

/* Vacío */
.empty { text-align: center; padding: var(--s-12) var(--s-5); color: var(--ink-muted); }
.empty svg { width: 40px; height: 40px; opacity: .4; margin-bottom: var(--s-3); }
.empty h4 { color: var(--ink-soft); margin-bottom: var(--s-1); }
.empty p { font-size: var(--t-sm); max-width: 40ch; margin: 0 auto; }

/* ========================== 6. FORMULARIOS ============================== */
.field { display: block; margin-bottom: var(--s-4); }
/* `display:block` gana sobre el `display:none` que el navegador le da a
   [hidden]: sin esto, esconder un campo con el atributo no hace nada. */
.field[hidden] { display: none; }
/* Lo mismo para una fila de campos que se esconde: sin esto el display:flex
   de arriba le gana al atributo hidden y la fila se sigue viendo. */
.row[hidden] { display: none; }
.field:last-child { margin-bottom: 0; }
.field > label, .label {
  display: block; font-size: var(--t-sm); font-weight: 600; color: var(--ink-soft); margin-bottom: 6px;
}
.field .help { font-size: var(--t-xs); color: var(--ink-muted); margin-top: 5px; }
.field .help.error { color: var(--danger); font-weight: 600; }

input[type="text"], input[type="password"], input[type="number"], input[type="date"],
input[type="search"], select, textarea {
  width: 100%; padding: 9px 11px;
  font-family: inherit; font-size: var(--t-md); color: var(--ink);
  background: var(--surface-raised);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  transition: border-color .15s, box-shadow .15s;
}
textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
@media (hover: hover) and (pointer: fine) { input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--ink-muted); } }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-sunken); color: var(--ink-muted); cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: var(--ink-muted); opacity: .75; }
input[aria-invalid="true"] { border-color: var(--danger); }

/* Campo para pegar códigos en columna desde Excel. Tipografía tabular para
   que las cifras queden alineadas y se detecte a simple vista un número
   con un dígito de más. */
textarea.codigos {
  min-height: 76px; max-height: 260px;
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}

/* Contador de códigos detectados, debajo del campo. */
.conteo { display: flex; align-items: center; gap: 6px; font-size: var(--t-xs); margin-top: 5px; color: var(--ink-muted); }
.conteo b { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.conteo .corregidos { color: var(--warn); }

select {
  appearance: none; padding-right: 30px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2365758c' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 15px;
}

.field-row { display: flex; gap: var(--s-3); }
.field-row > * { flex: 1; min-width: 0; }
@media (max-width: 520px) { .field-row { flex-direction: column; gap: var(--s-4); } }

/* Grupo con prefijo de moneda */
.input-money { position: relative; }
.input-money::before {
  content: '$'; position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--ink-muted); font-size: var(--t-md); pointer-events: none; font-weight: 600;
}
.input-money input { padding-left: 24px; text-align: right; font-variant-numeric: tabular-nums; }

/* Segmentado (reemplaza radios sueltos) */
.segmented { display: inline-flex; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--r-md); padding: 3px; gap: 3px; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label {
  padding: 6px 14px; border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: 600;
  color: var(--ink-soft); cursor: pointer; user-select: none; margin: 0;
  transition: color .15s ease, background .15s ease, box-shadow .15s ease;
}
.segmented input:checked + label { background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-sm); }
.segmented input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Casilla en tarjeta (para permisos y listas seleccionables) */
.check-card {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-raised); cursor: pointer; margin: 0;
  transition: border-color .15s ease, background .15s ease;
}
@media (hover: hover) and (pointer: fine) { .check-card:hover { border-color: var(--line-strong); } }
.check-card input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.check-card .cc-title { font-size: var(--t-sm); font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.check-card .cc-title svg { width: 14px; height: 14px; }
.check-card .cc-desc { font-size: var(--t-xs); color: var(--ink-muted); margin-top: 1px; line-height: 1.45; }
.check-card:has(input:checked) { border-color: var(--accent-line); background: var(--accent-soft); }
.check-card:has(input:checked) .cc-title { color: var(--accent-ink); }
.check-card:has(input:disabled) { opacity: .6; cursor: not-allowed; }
.check-card.is-sensitive:has(input:checked) { border-color: var(--warn-line); background: var(--warn-soft); }
.check-card.is-sensitive:has(input:checked) .cc-title { color: var(--warn); }

/* ============================ 7. BOTONES ================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 15px; border-radius: var(--r-sm);
  font-family: inherit; font-size: var(--t-sm); font-weight: 620; line-height: 1.2;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, transform 160ms var(--ease-out);
  text-decoration: none;
}
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }

.btn-primary { background: var(--accent); color: #fff; }
@media (hover: hover) and (pointer: fine) { .btn-primary:hover:not(:disabled) { background: var(--accent-hover); text-decoration: none; } }
:root[data-theme="dark"] .btn-primary { color: #04121f; }

.btn-default { background: var(--surface-raised); color: var(--ink); border-color: var(--line-strong); }
@media (hover: hover) and (pointer: fine) { .btn-default:hover:not(:disabled) { background: var(--surface-sunken); border-color: var(--ink-muted); text-decoration: none; } }

.btn-ghost { background: transparent; color: var(--ink-soft); }
@media (hover: hover) and (pointer: fine) { .btn-ghost:hover:not(:disabled) { background: var(--surface-sunken); color: var(--ink); text-decoration: none; } }

.btn-danger { background: var(--danger); color: #fff; }
@media (hover: hover) and (pointer: fine) { .btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 85%, #000); } }

.btn-success { background: var(--ok); color: #fff; }
@media (hover: hover) and (pointer: fine) { .btn-success:hover:not(:disabled) { background: color-mix(in srgb, var(--ok) 85%, #000); } }

.btn-sm { padding: 5px 10px; font-size: var(--t-xs); gap: 5px; }
.btn-sm svg { width: 13px; height: 13px; }
.btn-lg { padding: 12px 20px; font-size: var(--t-md); }
.btn-block { width: 100%; }

.btn-icon { padding: 0; width: 30px; height: 30px; flex-shrink: 0; }
.btn-icon.btn-sm { width: 26px; height: 26px; }

/* Botón cargando */
.btn[data-loading="true"] { pointer-events: none; opacity: .75; }
.spin { width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Botón de actualizar datos: gira mientras se recarga. */
.theme-toggle.girando svg { animation: spin .8s linear infinite; }
.theme-toggle:disabled { opacity: .6; cursor: default; }

/* Actualizar monitor: con texto y color propio, porque como icono suelto
   pasaba desapercibido. Ámbar cuando lleva más de 15 minutos sin revisar. */
.btn-monitor {
  --tono: var(--accent);
  display: inline-flex; align-items: center; gap: 9px;
  height: 40px; padding: 0 14px 0 6px;
  border: 1px solid color-mix(in srgb, var(--tono) 45%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--tono) 14%, var(--surface-raised));
  color: var(--ink); font: inherit; cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, transform 160ms var(--ease-out);
}
.btn-monitor[data-estado="viejo"] { --tono: var(--warn); }
.btn-monitor-ico {
  position: relative; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--tono); color: #fff;
}
.btn-monitor-ico svg { width: 15px; height: 15px; }
.btn-monitor[data-estado="viejo"] .btn-monitor-ico::after {
  content: ''; position: absolute; top: -3px; right: -3px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--warn); box-shadow: 0 0 0 2px var(--surface-raised);
}
.btn-monitor-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.btn-monitor-txt b { font-size: var(--t-sm); font-weight: 650; white-space: nowrap; }
.btn-monitor-txt small { font-size: 11px; color: var(--ink-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.btn-monitor[data-estado="viejo"] .btn-monitor-txt small { color: var(--warn); font-weight: 600; }
.btn-monitor:focus-visible { outline: 2px solid var(--tono); outline-offset: 2px; }
.btn-monitor:active:not(:disabled) { transform: scale(.97); }
.btn-monitor:disabled { cursor: default; opacity: .8; }
.btn-monitor.girando .btn-monitor-ico svg { animation: spin .8s linear infinite; }
@media (hover: hover) and (pointer: fine) {
  .btn-monitor:hover:not(:disabled) {
    background: color-mix(in srgb, var(--tono) 22%, var(--surface-raised));
    border-color: var(--tono);
  }
}
@media (max-width: 1180px) {
  .btn-monitor { padding: 0 6px; }
  .btn-monitor-txt { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-monitor.girando .btn-monitor-ico svg { animation: none; }
}

/* ============================= 8. TABLAS ================================ */
.table-wrap { width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.table-wrap.scroll-y { max-height: 420px; overflow-y: auto; }

table.data { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-sm); }
table.data th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-inset); color: var(--ink-soft);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  text-align: left; padding: 10px var(--s-3); white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
table.data td { padding: 9px var(--s-3); border-bottom: 1px solid var(--line); color: var(--ink-soft); vertical-align: middle; }
table.data tbody tr:last-child td { border-bottom: none; }
@media (hover: hover) and (pointer: fine) { table.data tbody tr:hover td { background: var(--surface-inset); } }
table.data td.strong, table.data td b { color: var(--ink); font-weight: 620; }
table.data tfoot td {
  position: sticky; bottom: 0; z-index: 2;
  background: var(--surface-inset); color: var(--ink); font-weight: 700;
  border-top: 2px solid var(--line); border-bottom: none; padding: 11px var(--s-3);
}
table.data .row-danger { box-shadow: inset 3px 0 0 var(--danger); }
table.data .row-ok { box-shadow: inset 3px 0 0 var(--ok); }
table.data .clickable { cursor: pointer; }

/* ======================= 9. BADGES / CHIPS / PILLS ====================== */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--r-full);
  font-size: var(--t-xs); font-weight: 650; line-height: 1.5; white-space: nowrap;
  background: var(--surface-sunken); color: var(--ink-soft); border: 1px solid var(--line);
}
.badge.ok      { background: var(--ok-soft);     color: var(--ok);     border-color: var(--ok-line); }
.badge.warn    { background: var(--warn-soft);   color: var(--warn);   border-color: var(--warn-line); }
.badge.danger  { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); }
.badge.info    { background: var(--info-soft);   color: var(--info);   border-color: var(--info-line); }
.badge.accent  { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-line); }
.badge.square  { border-radius: var(--r-sm); }

.tag { display: inline-block; padding: 1px 7px; border-radius: var(--r-sm); font-size: var(--t-xs); font-weight: 600; background: var(--surface-sunken); border: 1px solid var(--line); color: var(--ink-soft); white-space: nowrap; }

.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; background: var(--ink-muted); }
.dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); } .dot.danger { background: var(--danger); }
.dot.live { background: var(--ok); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* Aviso en línea */
.note {
  display: flex; gap: var(--s-3); padding: 11px var(--s-4);
  border-radius: var(--r-md); font-size: var(--t-sm); line-height: 1.5;
  background: var(--info-soft); border: 1px solid var(--info-line); color: var(--info);
}
.note svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.note.warn   { background: var(--warn-soft);   border-color: var(--warn-line);   color: var(--warn); }
.note.danger { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); }
.note.ok     { background: var(--ok-soft);     border-color: var(--ok-line);     color: var(--ok); }
.note b { font-weight: 700; }

/* ==================== 10. MODALES, TOASTS, OVERLAYS ===================== */
dialog.modal {
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0;
  background: var(--surface-raised); color: var(--ink);
  box-shadow: var(--shadow-lg); width: min(560px, calc(100vw - 32px)); max-height: 86vh;
}
dialog.modal.wide { width: min(1100px, calc(100vw - 32px)); }
dialog.modal::backdrop { background: rgba(8, 12, 18, .55); backdrop-filter: blur(3px); }
dialog.modal[open] { animation: modalIn .22s var(--ease-out); }
dialog.modal[open]::backdrop { animation: veloIn .22s var(--ease-out); }
dialog.modal.saliendo { animation: modalOut .15s var(--ease-out) forwards; }
dialog.modal.saliendo::backdrop { animation: veloOut .15s var(--ease-out) forwards; }
@keyframes modalIn  { from { opacity: 0; transform: scale(.96); } }
@keyframes modalOut { to   { opacity: 0; transform: scale(.97); } }
@keyframes veloIn   { from { opacity: 0; } }
@keyframes veloOut  { to   { opacity: 0; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); }
.modal-head h3 { font-size: var(--t-lg); }
.modal-body { padding: var(--s-5); overflow-y: auto; max-height: 60vh; }
.modal-foot { display: flex; justify-content: flex-end; gap: var(--s-2); padding: var(--s-4) var(--s-5); border-top: 1px solid var(--line); background: var(--surface-inset); }

.toast-host { position: fixed; bottom: var(--s-5); right: var(--s-5); z-index: 9999; display: flex; flex-direction: column; gap: var(--s-2); pointer-events: none; }
.toast {
  display: flex; align-items: flex-start; gap: var(--s-3);
  background: var(--surface-raised); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  padding: 11px var(--s-4); max-width: 360px; font-size: var(--t-sm); color: var(--ink);
  pointer-events: auto; animation: toastIn .26s var(--ease-out);
}
.toast.ok     { border-left-color: var(--ok); }
.toast.warn   { border-left-color: var(--warn); }
.toast.danger { border-left-color: var(--danger); }
.toast svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.toast.ok svg { color: var(--ok); } .toast.warn svg { color: var(--warn); } .toast.danger svg { color: var(--danger); }
.toast.out { animation: toastOut .18s var(--ease-out) forwards; }
.toast .btn { margin: -4px 0 -4px 4px; }
@keyframes toastIn  { from { opacity: 0; transform: translateX(24px); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(24px); } }
@media (max-width: 520px) { .toast-host { left: var(--s-4); right: var(--s-4); bottom: var(--s-4); } .toast { max-width: none; } }

/* Pantalla de bloqueo por permisos */
.lockout { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; background: var(--surface); padding: var(--s-6); text-align: center; }
.lockout .box { max-width: 380px; }
.lockout .ico svg { width: 24px; height: 24px; }
.lockout .ico { width: 56px; height: 56px; border-radius: var(--r-full); display: grid; place-items: center; margin: 0 auto var(--s-4); background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger-line); }
.lockout p { color: var(--ink-soft); margin: var(--s-2) 0 var(--s-5); }

/* Esqueleto de carga */
.skel { background: linear-gradient(90deg, var(--surface-sunken) 25%, var(--surface-inset) 50%, var(--surface-sunken) 75%); background-size: 200% 100%; animation: shimmer 1.3s infinite; border-radius: var(--r-sm); }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------------------------------------------------------------------
   Animación de carga
   Un trazo que recorre una línea quebrada (Uiverse.io · RaspberryBee).
   Se usa en todo lo que hace esperar: al abrir una pantalla, al pedir
   datos y al saltar de una pantalla a otra, para que nunca parezca que
   el sistema «se quedó pensando» sin decir nada.
   --------------------------------------------------------------------- */
.cargador { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); }
.cargador svg { width: 64px; height: 48px; overflow: visible; }
.cargador svg polyline { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cargador svg polyline.atras  { stroke: var(--line); }
.cargador svg polyline.frente {
  stroke: var(--accent);
  stroke-dasharray: 48, 144; stroke-dashoffset: 192;
  animation: trazoCarga 1.4s linear infinite;
}
.cargador .txt { font-size: var(--t-sm); color: var(--ink-soft); text-align: center; }
.cargador .txt b { display: block; color: var(--ink); font-size: var(--t-md); margin-bottom: 2px; }
.cargador.sm svg { width: 44px; height: 33px; }
.cargador.linea { flex-direction: row; gap: var(--s-2); }

@keyframes trazoCarga {
  72.5% { opacity: 0; }
  to    { stroke-dashoffset: 0; }
}

/* Bloque de carga dentro de una tarjeta */
.cargando-caja { display: grid; place-items: center; padding: var(--s-7) var(--s-4); }

/* Velo de pantalla completa: tapa mientras se trae lo que se va a mostrar */
.velo {
  position: fixed; inset: 0; z-index: 99998;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .18s ease;
}
.velo.visible { opacity: 1; }

/* ============================ 11. UTILIDADES ============================ */
.muted { color: var(--ink-muted); }
.soft  { color: var(--ink-soft); }
.ink   { color: var(--ink); }
.c-ingreso { color: var(--ingreso); } .c-costo { color: var(--costo); }
.c-ok { color: var(--ok); } .c-danger { color: var(--danger); } .c-warn { color: var(--warn); }
/* El total de la tabla cuando hay un filtro puesto: debajo, en chico, el
   total entero de la carta porte */
.suma-filtrada { display: block; font-weight: 500; }
/* display:block le gana a [hidden] del navegador: hay que devolvérselo */
.suma-filtrada[hidden] { display: none; }

/* Margen positivo pero por debajo de lo aceptable: ni ámbar ni rojo del todo */
.c-naranja { color: #f97316; }
.meter.bajo span { background: #f97316; }
.fs-xs { font-size: var(--t-xs); } .fs-sm { font-size: var(--t-sm); } .fs-lg { font-size: var(--t-lg); }
.fw-6 { font-weight: 620; } .fw-7 { font-weight: 700; }
.nowrap { white-space: nowrap; }
.center { text-align: center; } .right { text-align: right; }
.mt-0{margin-top:0}.mt-2{margin-top:var(--s-2)}.mt-3{margin-top:var(--s-3)}.mt-4{margin-top:var(--s-4)}.mt-5{margin-top:var(--s-5)}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:var(--s-2)}.mb-3{margin-bottom:var(--s-3)}.mb-4{margin-bottom:var(--s-4)}.mb-5{margin-bottom:var(--s-5)}
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

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

@media print {
  .topbar, .sticky-bar, .toast-host, .btn { display: none !important; }
  body { background: #fff; }
  .card { break-inside: avoid; box-shadow: none; }
}


/* ==========================================================================
   PIE
   Autoría del sistema. Lo pinta app.js en todas las pantallas.
   ========================================================================== */
.pie {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-4); flex-wrap: wrap;
  max-width: 1400px; margin: var(--s-6) auto 0;
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--line);
  font-size: var(--t-xs); color: var(--ink-muted);
}
@media (max-width: 620px) { .pie { justify-content: center; text-align: center; } }
@media print { .pie { border-top: 1px solid #ccc; color: #000; } }


/* ======================= TELÉFONO Y PANTALLA TÁCTIL ====================== */
a, button, select, label, summary { -webkit-tap-highlight-color: transparent; }
button, .btn, a, select { touch-action: manipulation; }
@media (max-width: 640px) {
  input[type="text"], input[type="password"], input[type="number"], input[type="date"],
  input[type="search"], select, textarea { font-size: 16px; }
}

/* Barras pegadas abajo y avisos: por encima de la barra de inicio del iPhone. */
.toast-host { bottom: max(var(--s-5), env(safe-area-inset-bottom)); }
@media (max-width: 520px) { .toast-host { bottom: max(var(--s-4), env(safe-area-inset-bottom)); } }
.sticky-bar {
  bottom: max(var(--s-4), env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface-raised) 86%, transparent);
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
}
@media (prefers-reduced-transparency: reduce) { .sticky-bar { background: var(--surface-raised); backdrop-filter: none; } }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.topbar { padding-left: max(var(--s-5), env(safe-area-inset-left)); padding-right: max(var(--s-5), env(safe-area-inset-right)); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); }
.page { padding-left: max(var(--s-5), env(safe-area-inset-left)); padding-right: max(var(--s-5), env(safe-area-inset-right)); }
@media (prefers-reduced-transparency: reduce) { .topbar { background: var(--surface-raised); backdrop-filter: none; } }
@media (max-width: 700px) { .page { padding-left: max(var(--s-4), env(safe-area-inset-left)); padding-right: max(var(--s-4), env(safe-area-inset-right)); } }

/* ===================== 12. MATERIALES, PROFUNDIDAD Y TIPO ===================
   Capas como en iOS/macOS: un fondo con luz ambiente, tarjetas que flotan
   con un borde de luz arriba y sombras en capas, y vidrio solo donde algo
   pasa por encima del contenido (barra superior, barras pegadas, ventanas). */
:root {
  --r-card: 18px;
  --brillo: rgba(255, 255, 255, .85);
  --borde-suave: color-mix(in srgb, var(--line) 80%, transparent);
  --sombra-tarjeta: 0 1px 1px rgba(16, 24, 40, .03), 0 2px 6px rgba(16, 24, 40, .04), 0 14px 32px -14px rgba(16, 24, 40, .14);
  --sombra-alzada: 0 2px 4px rgba(16, 24, 40, .05), 0 22px 44px -16px rgba(16, 24, 40, .24);
  --luz-1: color-mix(in srgb, var(--accent) 11%, transparent);
  --luz-2: color-mix(in srgb, #7c5cff 8%, transparent);
  --relleno-tarjeta: linear-gradient(180deg, var(--surface-raised), color-mix(in srgb, var(--surface-raised) 92%, var(--surface)));
}
:root[data-theme="dark"] {
  --brillo: rgba(255, 255, 255, .06);
  --borde-suave: color-mix(in srgb, var(--line) 90%, transparent);
  --sombra-tarjeta: 0 1px 1px rgba(0, 0, 0, .25), 0 14px 32px -14px rgba(0, 0, 0, .65);
  --sombra-alzada: 0 2px 4px rgba(0, 0, 0, .3), 0 26px 50px -16px rgba(0, 0, 0, .8);
  --luz-1: color-mix(in srgb, var(--accent) 14%, transparent);
  --luz-2: color-mix(in srgb, #7c5cff 11%, transparent);
  --relleno-tarjeta: linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 100%, #fff 2%), var(--surface-raised));
}

body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 45% at 12% -8%, var(--luz-1), transparent 70%),
    radial-gradient(45% 40% at 96% -4%, var(--luz-2), transparent 70%);
}

/* Tipografía: el tracking se ajusta al tamaño, el peso marca la jerarquía */
.page-head h1 { font-size: clamp(1.75rem, 3vw, 2.3rem); font-weight: 750; letter-spacing: -.035em; line-height: 1.1; }
.page-head .eyebrow { color: var(--accent); letter-spacing: .1em; }
.page-head .sub { font-size: .9375rem; letter-spacing: -.005em; }
h2 { letter-spacing: -.02em; font-weight: 700; }
.card-head h3 { font-size: .9375rem; font-weight: 700; letter-spacing: -.012em; }

/* Tarjetas y paneles */
.card, .stat {
  background: var(--relleno-tarjeta);
  border-color: var(--borde-suave);
  border-radius: var(--r-card);
  box-shadow: inset 0 1px 0 var(--brillo), var(--sombra-tarjeta);
}
.card-head { padding: var(--s-4) var(--s-5); }
.card-foot { border-radius: 0 0 var(--r-card) var(--r-card); }
.card.accent-warn, .card.accent-info, .card.accent-danger { border-left-width: 1px; position: relative; }
.card.accent-warn::before, .card.accent-info::before, .card.accent-danger::before {
  content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--warn);
}
.card.accent-info::before { background: var(--info); }
.card.accent-danger::before { background: var(--danger); }

/* Indicadores: número grande y apretado, ícono en su ficha, luz del color del dato */
.stat { --tono-stat: var(--accent); padding: 18px 20px 20px; isolation: isolate; }
.stat.is-ingreso  { --tono-stat: var(--ingreso); }
.stat.is-costo    { --tono-stat: var(--costo); }
.stat.is-utilidad { --tono-stat: var(--utilidad); }
.stat.is-neg      { --tono-stat: var(--danger); }
.stat.is-personal { --tono-stat: var(--warn); background: var(--relleno-tarjeta); border-color: var(--borde-suave); }
.stat::after {
  content: ''; position: absolute; z-index: -1; top: -70px; right: -60px; width: 190px; height: 190px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--tono-stat) 16%, transparent), transparent 68%);
  pointer-events: none;
}
.stat .label { letter-spacing: .07em; gap: 8px; }
.stat .label svg {
  width: 24px; height: 24px; padding: 5px; border-radius: 8px; flex-shrink: 0;
  color: var(--tono-stat); background: color-mix(in srgb, var(--tono-stat) 14%, transparent);
}
.stat .value { font-size: clamp(1.55rem, 2.3vw, 1.95rem); font-weight: 750; letter-spacing: -.035em; margin-top: 10px; }
.stat .foot { letter-spacing: -.003em; }

/* Barra superior: la página activa como una ficha con relieve */
.nav a { border-radius: 10px; transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease; }
.nav a[aria-current="page"] {
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
}
:root[data-theme="dark"] .nav a[aria-current="page"] { color: var(--accent); }
.who-avatar { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }

/* Botones: relieve sutil, luz arriba */
.btn { border-radius: 10px; }
.btn-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 86%, #fff), var(--accent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(16, 24, 40, .12), 0 6px 14px -6px color-mix(in srgb, var(--accent) 65%, transparent);
}
.btn-success {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ok) 86%, #fff), var(--ok));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 14px -6px color-mix(in srgb, var(--ok) 65%, transparent);
}
.btn-default { box-shadow: inset 0 1px 0 var(--brillo), 0 1px 2px rgba(16, 24, 40, .06); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover:not(:disabled) { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 78%, #fff), var(--accent)); }
}

/* Campos */
input[type="text"], input[type="password"], input[type="number"], input[type="date"],
input[type="search"], select, textarea { border-radius: 10px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }

/* Avisos y etiquetas */
.note { border-radius: 14px; padding: 12px var(--s-4); }
.badge { border-radius: 999px; }

/* Tablas: encabezado como vidrio cuando la tabla se desplaza por debajo */
table.data th {
  background: color-mix(in srgb, var(--surface-inset) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}

/* Ventanas, avisos emergentes y barras pegadas: material de vidrio */
dialog.modal {
  border-radius: 20px; border-color: var(--borde-suave);
  background: color-mix(in srgb, var(--surface-raised) 94%, transparent);
  backdrop-filter: blur(24px) saturate(170%); -webkit-backdrop-filter: blur(24px) saturate(170%);
  box-shadow: inset 0 1px 0 var(--brillo), var(--sombra-alzada);
}
.toast {
  border-radius: 14px; border-left-width: 1px;
  background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
  backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 1px 0 var(--brillo), var(--sombra-alzada);
}
.sticky-bar { border-radius: var(--r-card); box-shadow: inset 0 1px 0 var(--brillo), var(--sombra-alzada); }

@media (prefers-reduced-transparency: reduce) {
  dialog.modal, .toast { background: var(--surface-raised); backdrop-filter: none; }
  table.data th { background: var(--surface-inset); backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .card, .stat { box-shadow: none; border-color: var(--ink-muted); background: var(--surface-raised); }
  body::before { display: none; }
}
@media print {
  body::before, .stat::after { display: none; }
  .card, .stat { box-shadow: none; background: #fff; }
}