/* Tipografía de ENCUADRA (presentación de marca, pág. 12): Sora para títulos y cifras grandes; IBM Plex Sans para
   texto y tablas (números tabulares). Alojadas en el propio servidor (SIL Open Font License), subconjunto latino
   (acentos y ñ), variables en peso. */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("../fonts/sora-latin.woff2") format("woff2"); }

/* Design tokens semánticos. Tema claro por defecto; oscuro por preferencia del sistema o por
   elección explícita (data-tema en <html>). Los componentes SOLO usan estos tokens. */
:root {
  color-scheme: light;
  /* Superficies: neutros CÁLIDOS (descanso visual en jornadas largas) */
  --sup-fondo: #f5f3ee;
  --sup-panel: #ffffff;
  --sup-elevada: #ffffff;
  --sup-hundida: #efeae2;
  /* Marca ENCUADRA (pág. 11): Azul Vértice #111936 (fondos y texto principal) · Papel #F5F3EE (fondo claro) ·
     Pizarra #3A4A7A (secundario: enlaces, gráficas, etiquetas) · Latón #C8A44D (acento: «la cifra en su lugar»; NUNCA
     como texto sobre papel). Uso aproximado 60 azul · 25 papel · 10 pizarra · 5 latón. Los tokens «cobre» de la marca
     anterior se conservan como alias de la familia azul para no romper estilos existentes.
     Contrastes AA: azul/papel 16.4:1 · pizarra/blanco 8.9:1 · latón/azul 7.6:1. */
  --marca-marino: #111936;
  --marca-marino-2: #3a4a7a;
  --marca-noche: #111936;
  --marca-dorado: #c8a44d;
  --marca-dorado-luminoso: #dcbf72;
  --marca-dorado-suave: #f3ebd5;
  --marca-dorado-texto: #3a4a7a;              /* sobre papel el latón no va como texto: se usa pizarra */
  --marca-cobre: #3a4a7a;
  --marca-cobre-claro: #6b7aa8;
  --marca-cobre-boton: #111936;
  --marca-cobre-hover: #3a4a7a;
  --marca-cobre-suave: #e8ebf3;
  --marca-cobre-texto: #3a4a7a;
  --sup-barra: var(--marca-noche);
  --sup-barra-texto: #e6ebf2;
  --sup-barra-tenue: #9fb0c8;
  --sup-lateral: #ffffff;
  /* Texto */
  --txt: #111936;
  --txt-2: #4a4f5a;
  --txt-3: #645f57;
  --txt-invertido: #ffffff;
  /* Bordes */
  --borde: #e3ddd3;
  --borde-fuerte: #c9c0b3;
  /* Estructura (azul): enlaces, pestañas, selección */
  --acento: var(--marca-marino-2);
  --acento-hover: var(--marca-marino);
  --acento-suave: #e8ebf3;
  --acento-texto: var(--marca-marino-2);
  /* Acción primaria (Azul Vértice): botón principal de cada formulario/pantalla */
  --accion: var(--marca-cobre-boton);
  --accion-hover: var(--marca-cobre-hover);
  --accion-texto: #f5f3ee;
  --foco: var(--marca-marino-2);              /* anillo de foco con 3:1 sobre papel (el latón no lo alcanza) */
  /* Celdas del tablero de cumplimiento (semáforo) */
  --celda-gris: #ebe6de;
  /* Estados (semáforo) */
  --ok: #1e7a4c;        --ok-suave: #e6f4ec;
  --aviso: #9a5b00;     --aviso-suave: #fff4e0;
  --riesgo: #b3261e;    --riesgo-suave: #fdecea;
  --info: #1f4e79;      --info-suave: #e7eef6;
  /* Tipografía */
  --fuente: "IBM Plex Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-titulos: "Sora", "IBM Plex Sans", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --fuente-mono: "JetBrains Mono", "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;
  --t-xs: 11px; --t-sm: 12.5px; --t-md: 14px; --t-lg: 16px; --t-xl: 20px; --t-2xl: 24px;
  /* Espaciado, radios, sombras */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px;
  --r-sm: 4px; --r-md: 6px; --r-lg: 10px;
  --sombra-1: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --sombra-2: 0 8px 24px rgba(16, 24, 40, .14);
  /* Layout */
  --alto-topbar: 56px;
  --ancho-lateral: 272px;
  --ancho-lateral-compacto: 64px;
}

/* Modo NOCHE: familia azul noche de la guía (no grises genéricos); oro y cobre claro como acentos. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --sup-fondo: #0b1026; --sup-panel: #111936; --sup-elevada: #18214a; --sup-hundida: #0d1330;
    --sup-barra: var(--marca-noche); --sup-barra-texto: #dbe2ec; --sup-barra-tenue: #8391a5; --sup-lateral: var(--marca-noche);
    --txt: #e3e8ef; --txt-2: #b3bdcb; --txt-3: #8b97a8; --txt-invertido: #0a0f1f;
    --borde: #243063; --borde-fuerte: #34447a;
    --acento: #9baad8; --acento-hover: #b7c2e4; --acento-suave: #1b2550; --acento-texto: #b7c2e4; --foco: #c8a44d;
    --marca-dorado: #c8a44d; --marca-dorado-suave: #2c2615; --marca-dorado-texto: #dcbf72; --marca-marino-2: #9baad8; --celda-gris: #1b2644;
    --marca-noche: #0b1026; --marca-cobre: #9baad8; --marca-cobre-boton: #e8e4da; --marca-cobre-hover: #ffffff; --marca-cobre-suave: #1b2550; --marca-cobre-texto: #b7c2e4;
    --marca-dorado-luminoso: #dcbf72;
    --accion: var(--marca-cobre-boton); --accion-hover: var(--marca-cobre-hover); --accion-texto: #111936;
    --ok: #4cc38a; --ok-suave: #12291e; --aviso: #e2a53d; --aviso-suave: #2e2414;
    --riesgo: #f07167; --riesgo-suave: #33181a; --info: #7cb0e3; --info-suave: #1a2a3e;
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .4); --sombra-2: 0 8px 24px rgba(0, 0, 0, .5);
  }
}

:root[data-tema="oscuro"] {
  color-scheme: dark;
  --sup-fondo: #0b1026; --sup-panel: #111936; --sup-elevada: #18214a; --sup-hundida: #0d1330;
  --sup-barra: var(--marca-noche); --sup-barra-texto: #dbe2ec; --sup-barra-tenue: #8391a5; --sup-lateral: var(--marca-noche);
  --txt: #e3e8ef; --txt-2: #b3bdcb; --txt-3: #8b97a8; --txt-invertido: #0a0f1f;
  --borde: #243063; --borde-fuerte: #34447a;
  --acento: #9baad8; --acento-hover: #b7c2e4; --acento-suave: #1b2550; --acento-texto: #b7c2e4; --foco: #c8a44d;
  --marca-dorado: #c8a44d; --marca-dorado-suave: #2c2615; --marca-dorado-texto: #dcbf72; --marca-marino-2: #9baad8; --celda-gris: #1b2644;
  --marca-noche: #0b1026; --marca-cobre: #9baad8; --marca-cobre-boton: #e8e4da; --marca-cobre-hover: #ffffff; --marca-cobre-suave: #1b2550; --marca-cobre-texto: #b7c2e4;
  --marca-dorado-luminoso: #dcbf72;
  --accion: var(--marca-cobre-boton); --accion-hover: var(--marca-cobre-hover); --accion-texto: #111936;
  --ok: #4cc38a; --ok-suave: #12291e; --aviso: #e2a53d; --aviso-suave: #2e2414;
  --riesgo: #f07167; --riesgo-suave: #33181a; --info: #7cb0e3; --info-suave: #1a2a3e;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .4); --sombra-2: 0 8px 24px rgba(0, 0, 0, .5);
}