/* LT Admin, hoja 1 de 3: fuentes, tokens, reset y tipografía.
   El orden de carga de las tres hojas lo declara `web/templating.py::HOJAS_CSS`; cambiarlo cambia
   la cascada.

   Los tokens son los de `docs/03-UI-UX.md` §3, copiados tal cual: **un solo `:root`** y el tema
   oscuro redefiniendo los MISMOS nombres bajo `[data-theme="dark"]`, ni uno nuevo. Los contrastes
   de §3.1 los vuelve a medir `scripts/contraste.py` leyendo ESTE archivo (guardián GU9), así que un
   valor cambiado aquí se entera la suite, no el usuario.

   Regla del naranja (memoria `marca-ltgps-contraste`): sobre fondo claro `--accent` es SOLO relleno,
   nunca texto ni foco (1.71:1). Cuando el acento tiene que ser texto va `--accent-text`. */

/* ----------------------------------------------------------------- fuentes locales (cero CDN) */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/IBMPlexSans-var.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/IBMPlexMono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/IBMPlexMono-500.woff2') format('woff2');
}

/* ------------------------------------------------------------------------- tokens (03 §3) */
:root {
  color-scheme: light;

  /* Marca y estructura */
  --primary: #0033A0;        /* SOLO relleno: botón primario, barra de 3 px, nodo lleno. NUNCA texto ni outline */
  --primary-ink: #0033A0;    /* todo lo que sea texto, ícono, enlace, nav activa y foco en claro */
  --primary-bg: #E6EBF7;     /* fondo tenue de la nav activa y filas seleccionadas */
  --on-primary: #FFFFFF;     /* texto sobre relleno navy */
  --secondary: #0F172A;      /* panel lateral de escritorio y cabeceras oscuras */
  --accent: #FCB514;         /* naranja LT-GPS: SOLO relleno, borde de acento e ícono grande en claro */
  --accent-text: #8A6200;    /* el naranja cuando tiene que ser texto o borde de control sobre claro (5.24:1) */
  --accent-bg: #FEF3D6;      /* chip naranja tenue */

  /* Superficies y texto */
  --bg: #F8FAFC;             /* off-white de página */
  --surface: #FFFFFF;        /* tarjetas, paneles, modales */
  --surface-2: #F1F5F9;      /* encabezados de tabla, filas alternas, zonas hundidas */
  --fg: #0F172A;
  --muted-fg: #475569;       /* 7.24:1 sobre --bg, 6.92:1 sobre --surface-2 */
  --border: #E2E8F0;         /* hairline decorativa */
  --border-strong: #64748B;  /* bordes de controles: 4.76:1 sobre --surface */
  --destructive: #B91C1C;

  /* Semánticos: texto oscuro para chips, vivo solo en cifras grandes y bordes */
  --ok: #15803D;    --ok-bg: #F0FDF4;   --ok-border: #86EFAC;
  --warn: #B45309;  --warn-bg: #FFFBEB; --warn-border: #FCD34D;
  --bad: #B91C1C;   --bad-bg: #FEF2F2;  --bad-border: #FCA5A5;
  --info: #0E7490;  --info-bg: #ECFEFF; --info-border: #67E8F9;

  /* Foco: sigue a la tinta, no al relleno */
  --ring: var(--primary-ink);
  --ring-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 25%, transparent);   /* halo adicional, nunca el único indicador */

  /* Tipografía (un par: Plex Sans; display es alias para que nadie invente otro token) */
  --font-ui: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: var(--font-ui);
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --t-xs: .75rem;   --lh-xs: 1.4;     /* 12px: th, chips */
  --t-sm: .8125rem; --lh-sm: 1.45;    /* 13px: etiquetas de KPI, hints */
  --t-base: .9375rem; --lh-base: 1.55;/* 15px: cuerpo, inputs, botones */
  --t-md: 1.0625rem; --lh-md: 1.4;    /* 17px: h3, título de modal */
  --t-lg: 1.25rem;  --lh-lg: 1.3;     /* 20px: h2, cifra en lista móvil */
  --t-xl: 1.5rem;   --lh-xl: 1.2;     /* 24px: h1 de vista, cifra destacada móvil */
  --t-2xl: 2.125rem; --lh-2xl: 1.1;   /* 34px: cifra de KPI en tablet y escritorio */

  /* Espaciado (base 4) y radios (una escala) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-12: 48px;
  --r-sm: 8px; --r-md: 12px; --r-pill: 999px;

  /* Sombras tintadas al navy, no negras */
  --sh-card: 0 1px 2px rgb(0 51 160 / .06), 0 8px 24px -12px rgb(0 51 160 / .16);
  --sh-card-h: 0 2px 4px rgb(0 51 160 / .08), 0 18px 40px -16px rgb(0 51 160 / .24);
  --sh-panel: 0 24px 60px -24px rgb(0 51 160 / .30);

  /* Vidrio: solo barras (§4) */
  --glass-bg: rgb(248 250 252 / .82);

  /* Movimiento */
  --dur-rapido: 120ms; --dur-normal: 180ms; --dur-lento: 280ms;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

[data-theme="dark"] {
  color-scheme: dark;
  /* MISMOS nombres, otros valores. Ni uno nuevo. */
  --primary-ink: #7AB0FF;    /* el navy sobre #0F172A da 1.68:1: en oscuro texto, enlace y foco van en azul claro */
  --primary-bg: #1B2A55;
  --secondary: #0B1220;
  --accent-text: #FCB514;    /* en oscuro el naranja SÍ puede ser texto: 10.00:1 sobre --bg */
  --accent-bg: #3A2A05;
  --bg: #0F172A; --surface: #1E293B; --surface-2: #273449;
  --fg: #F8FAFC; --muted-fg: #94A3B8; --border: #334155;
  --border-strong: #7C8AA0;  /* 4.18:1 sobre --surface y 3.58:1 sobre --surface-2 (#64748B daba 2.64 en zonas hundidas) */
  --destructive: #F87171;
  --ok: #4ADE80;   --ok-bg: #10231A;   --ok-border: #2F7A4C;
  --warn: #FCD34D; --warn-bg: #2A2108; --warn-border: #8A6414;
  --bad: #F87171;  --bad-bg: #2A1416;  --bad-border: #7A3530;
  --info: #67E8F9; --info-bg: #0B2A33; --info-border: #2B5F80;
  --ring: var(--accent);     /* foco naranja en oscuro: 10.00:1 sobre --bg, 7.03:1 sobre --surface-2 */
  --glass-bg: rgb(15 23 42 / .92);   /* con .82 una foto clara debajo bajaba --muted-fg a 4.05:1 */
  --sh-card: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px -12px rgb(0 0 0 / .6);
  --sh-card-h: 0 2px 4px rgb(0 0 0 / .5), 0 18px 40px -16px rgb(0 0 0 / .7);
}

/* Zonas oscuras dentro del tema claro (panel lateral, cabeceras oscuras): se REDEFINE el alcance
   de dos tokens existentes, no se crean nuevos. Sin esto el foco navy sobre --secondary da 1.68:1. */
.nav, .zona-oscura { --ring: var(--accent); --primary-ink: #FFFFFF; }

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

html {
  background: var(--bg);          /* el lienzo nace del color correcto, sin destello */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;             /* nunca 100vh: en iOS deja un hueco bajo la barra */
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: var(--t-base);
  line-height: var(--lh-base);
}

h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 600; }
h1 { font-size: var(--t-xl); line-height: var(--lh-xl); }
h2 { font-size: var(--t-lg); line-height: var(--lh-lg); }
h3 { font-size: var(--t-md); line-height: var(--lh-md); }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

a { color: var(--primary-ink); text-underline-offset: 2px; }

code, kbd, samp, .mono { font-family: var(--font-mono); }

/* Cifras siempre alineadas: el peso del dinero se lee en columna (03 §3). */
.cifra, td.monto, th.monto, .mono { font-variant-numeric: tabular-nums; }

img, svg { max-width: 100%; }
svg { vertical-align: middle; }

/* ------------------------------------------------------------------ accesibilidad (03 §9) */

/* 4. Foco visible en TODO lo enfocable: 2 px de contorno con separación. El halo de
      `--ring-shadow` acompaña, nunca sustituye (1.61:1 por sí solo). */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* 9. "Ir al contenido": invisible hasta que el tabulador lo toca. */
.sr-solo {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.salto {
  position: absolute; left: var(--s-2); top: -100px; z-index: 100;
  padding: var(--s-2) var(--s-4); border-radius: var(--r-sm);
  background: var(--surface); color: var(--primary-ink); box-shadow: var(--sh-card);
}
.salto:focus { top: var(--s-2); }

/* 7. Movimiento reducido: se apagan las transiciones, no la interfaz. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------------------ utilidades */
.apagado { color: var(--muted-fg); }
.pila { display: flex; flex-direction: column; gap: var(--s-4); }
.fila { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.fila.entre { justify-content: space-between; }
.fila.derecha { justify-content: flex-end; }