/*
 * BIOtime-iscom · fichas de diseño (tokens).
 *
 * TODO color de la aplicación sale de aquí: ninguna otra hoja escribe un color a mano.
 * El tema lo decide `data-tema="claro|oscuro"` en <html>. Lo pone `js/tema-arranque.js` antes del primer pintado
 * (preferencia guardada o, si no hay, `prefers-color-scheme`), así que aquí no hace falta repetir el bloque
 * oscuro dentro de una media query.
 *
 * Color de marca: `--color-primario` lo puede cambiar cada empresa. `js/marca.js` lo fija en <html> junto con
 * `--color-sobre-primario` (texto encima del color) y las variantes legibles para texto en cada tema; los valores
 * de este archivo son los de la marca por omisión, y **tienen que ser los que `derivar(COLOR_OMISION)` calcula**
 * —el color de la plataforma se escribe en `servidor/lib/marca.js` y nada más ahí; esta hoja lo repite porque el
 * CSS necesita un valor antes de que corra un script, y `pruebas/front/espejos-del-front.test.js` cuadra los dos—.
 *
 * Los pares texto/fondo de estado (ok, aviso, grave, info) cumplen contraste AA (≥ 4.5) en los dos temas;
 * `pruebas/front/contraste.test.js` lo comprueba leyendo este archivo: si cambias un color, corre las pruebas.
 */

:root {
  color-scheme: light;

  /* ── Marca ── */
  --color-primario: #0F766E;
  --color-sobre-primario: #FFFFFF;
  --color-primario-texto-claro: #0E7069;   /* primario legible como TEXTO sobre superficies claras */
  --color-primario-texto-oscuro: #63A6A1;  /* primario legible como TEXTO sobre superficies oscuras */
  --color-primario-texto: var(--color-primario-texto-claro);
  --color-primario-suave: color-mix(in srgb, var(--color-primario) 12%, var(--color-superficie));
  --color-primario-fuerte: color-mix(in srgb, var(--color-primario) 86%, #000000);

  /* ── Superficies y texto ── */
  --color-fondo: #F4F6F9;
  --color-superficie: #FFFFFF;
  --color-superficie-2: #EDF0F4;
  --color-superficie-3: #E2E7ED;
  --color-borde: #D6DCE4;
  --color-borde-fuerte: #8793A3;          /* borde de controles: ≥ 3:1 contra la superficie */
  --color-texto: #17202E;
  --color-texto-suave: #465365;
  /*
   * DOS PASOS MÁS OSCURO DESDE LA 0.23.2 (era `#5F6C7E`). No es un ajuste de gusto: sobre `--color-superficie-3`
   * —la tercera superficie clara, que es fondo en ocho sitios de las hojas— se quedaba en **4.29:1**, medido. No
   * salía en rojo porque la puerta de contraste llevaba una lista de superficies escrita a mano de cuando esta
   * plataforma tenía dos. Hoy la lista se descubre, y este valor da 4.63 en la peor de las cinco.
   */
  --color-texto-tenue: #5A6778;
  --color-velo: rgb(15 23 35 / 0.48);     /* detrás de modales, paneles y el cajón del menú */
  /*
   * EL ANILLO DE FOCO SIGUE A LA MARCA (0.23.1), y hasta aquí no la seguía. Era un azul escrito a mano en los dos
   * temas, mientras `js/marca.js` cambiaba `--color-primario*` y no esto: una empresa que eligiera rojo tenía una
   * aplicación roja con el anillo de foco AZUL, y nada lo decía. Es la misma familia que el foco oscuro del
   * portal, que la 0.23.0 encontró al estrenarle su puerta de contraste.
   *
   * Va a la variante LEGIBLE del primario y no al primario crudo: un anillo necesita 3:1 contra la superficie, y
   * ésa es precisamente la que se deriva para cumplirlo en cada tema. Así el foco se arregla solo para cualquier
   * color que una empresa elija, sin que `aplicarMarca` tenga que acordarse de una variable más.
   */
  --color-foco: var(--color-primario-texto);

  /* ── Estados: texto sobre su fondo suave, y un tono fuerte para puntos, iconos y barras ── */
  --color-ok-texto: #0B5F33;
  --color-ok-fondo: #E1F5E9;
  --color-ok-borde: #9BD4B1;
  --color-ok-fuerte: #15803D;

  --color-aviso-texto: #7A4700;
  --color-aviso-fondo: #FFF0D1;
  --color-aviso-borde: #E9C478;
  --color-aviso-fuerte: #B45309;

  --color-grave-texto: #A3201A;
  --color-grave-fondo: #FDE8E6;
  --color-grave-borde: #F0ABA5;
  --color-grave-fuerte: #C62B23;

  --color-info-texto: #17508F;
  --color-info-fondo: #E2EEFC;
  --color-info-borde: #A5C6F0;
  --color-info-fuerte: #1D67C2;

  --color-neutro-texto: #3D4959;
  --color-neutro-fondo: #E9EDF2;
  --color-neutro-borde: #C5CDD8;

  /*
   * ── La tarjeta de asistencia: el ESPEJO de `servidor/lib/documentos/marcas.js` ──
   *
   * Estos seis hexes son los de la PANTALLA, letra por letra: los compara
   * `pruebas/front/tarjeta.test.js` recorriendo `marcas.VARIABLES_CSS`, que desde la 0.14 apunta a
   * `marcas.TINTES_PANTALLA`, así que no se tocan de un lado solo. La misma tarjeta no puede salir de dos colores.
   *
   * CUIDADO CON LOS TRES TINTES: desde la 0.14 el PAPEL no imprime estos tres, imprime su VELO —el mismo color
   * aclarado por `marcas.FACTOR_DEL_VELO`, que baja la tinta del renglón de 4.8/9.9/16.0 % a 1.9/4.0/6.6 %—, porque
   * un lote de trescientas tarjetas se imprime de verdad y el tóner se paga. La asimetría es a propósito y está
   * razonada en `marcas.js`: el tinte era el refuerzo menos cargado de la celda (la letra de la insignia, los
   * minutos y el texto de la incidencia dicen cada uno lo mismo por su cuenta). Los DOS primeros —el rojo del
   * retardo y el naranja— sí son el mismo hex en los dos lados.
   *
   * Y NO SON LOS `--color-<tono>-*` DE ARRIBA, a propósito: los cinco `--color-<tono>-fondo` caen todos entre
   * 5.4 % y 7.2 % de tinta, así que impresos en blanco y negro `aviso-fondo` y `grave-fondo` se separan 1.8 pp y
   * `grave`, `neutro` e `info` salen EXACTAMENTE el mismo gris. Con ellos, el renglón por verificar, el de falta y
   * el de descanso eran el mismo renglón en el papel. Los de aquí están espaciados POR LUMINANCIA (≥ 4.7 pp de
   * tinta entre cualquier par y contra el blanco), que es lo que sobrevive a la fotocopia.
   *
   * El par OSCURO de abajo es obligatorio —`pruebas/front/contraste.test.js` («los dos temas definen los mismos
   * colores») falla si un `--color-*` no se redefine ahí— y es de PANTALLA: no se compara con el módulo, porque el
   * papel siempre es claro. Lo que imprime en tema oscuro lo devuelve el `@media print` del final.
   */
  --color-tja-retardo: #A4231C;              /* el rojo del retardo; va con NEGRITA y con sus minutos */
  --color-tja-naranja: #8F4608;              /* el exceso de comida y la salida anticipada */
  --color-tja-sin-pareja: #000000;           /* la checada sin pareja: su indicio es la CURSIVA y la daga */
  --color-tja-tinte-descanso: #F2F3F4;       /* 4.7 % de tinta */
  --color-tja-tinte-por-verificar: #FAE3BD;  /* 9.8 % */
  --color-tja-tinte-falta: #F2CECC;          /* 16.1 % */

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

  /* ── Radios ── */
  --radio-1: 4px;
  --radio-2: 8px;
  --radio-3: 12px;
  --radio-pildora: 999px;

  /* ── Sombras ── */
  --sombra-1: 0 1px 2px rgb(16 24 40 / 0.06), 0 1px 1px rgb(16 24 40 / 0.04);
  --sombra-2: 0 4px 12px rgb(16 24 40 / 0.10), 0 1px 3px rgb(16 24 40 / 0.06);
  --sombra-3: 0 16px 40px rgb(16 24 40 / 0.18), 0 4px 10px rgb(16 24 40 / 0.08);
  /* La sombra que dice «hay más hacia allá» en el borde de una tabla, una tira de pestañas o el menú (0.24.1). */
  --sombra-desborde: rgb(16 24 40 / 0.22);

  /* ── Tipografía: pila de fuentes del sistema, nada se descarga ── */
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  --fuente-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
  --texto-xs: 0.75rem;
  --texto-s: 0.8125rem;
  --texto-m: 0.9375rem;
  --texto-l: 1.0625rem;
  --texto-xl: 1.3125rem;
  --texto-2xl: 1.625rem;
  --texto-3xl: 2rem;
  --interlinea: 1.5;
  --interlinea-titulo: 1.2;
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-fuerte: 650;

  /* ── Medidas ── */
  --alto-control: 38px;
  --alto-encabezado: 60px;
  --ancho-menu: 252px;
  --ancho-panel: 520px;
  --ancho-panel-ancho: 760px;
  --ancho-contenido: 1440px;

  /* ── Movimiento ── */
  --transicion: 140ms ease;
  --transicion-lenta: 220ms cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ── Capas ── */
  --capa-encabezado: 20;
  --capa-menu: 40;
  --capa-flotante: 50;
  --capa-panel: 60;
  --capa-modal: 70;
  --capa-aviso: 90;
}

:root[data-tema="oscuro"] {
  color-scheme: dark;

  --color-primario-texto: var(--color-primario-texto-oscuro);
  --color-primario-suave: color-mix(in srgb, var(--color-primario) 22%, var(--color-superficie));
  --color-primario-fuerte: color-mix(in srgb, var(--color-primario) 84%, #FFFFFF);

  --color-fondo: #0E131A;
  --color-superficie: #161C25;
  --color-superficie-2: #1E2631;
  --color-superficie-3: #28323F;
  --color-borde: #2B3543;
  --color-borde-fuerte: #66758A;
  --color-texto: #E7EBF1;
  --color-texto-suave: #B5BFCD;
  --color-texto-tenue: #93A0B3;
  --color-velo: rgb(0 0 0 / 0.62);
  /* Igual que en claro: la variante legible del primario, que en este tema es la oscura. */
  --color-foco: var(--color-primario-texto);

  --color-ok-texto: #7BE0A5;
  --color-ok-fondo: #11301F;
  --color-ok-borde: #1F5B3A;
  --color-ok-fuerte: #3CCB7F;

  --color-aviso-texto: #F6C66F;
  --color-aviso-fondo: #38290B;
  --color-aviso-borde: #6B4E14;
  --color-aviso-fuerte: #F0A82E;

  --color-grave-texto: #FFA39B;
  --color-grave-fondo: #3B1613;
  --color-grave-borde: #74302A;
  --color-grave-fuerte: #F26A60;

  --color-info-texto: #93BEFF;
  --color-info-fondo: #13284A;
  --color-info-borde: #274A80;
  --color-info-fuerte: #5B9BF5;

  --color-neutro-texto: #C3CCD9;
  --color-neutro-fondo: #232C38;
  --color-neutro-borde: #3A4656;

  /*
   * La tarjeta en tema oscuro. Valores de PANTALLA: los tintes son fondos oscuros y los dos colores de valor
   * suben de luminancia para leerse sobre ellos (el rojo y el naranja de arriba, sobre #161C25, no pasan AA).
   * La sin pareja es el color del texto, porque su indicio es la cursiva y la daga, no el color.
   */
  --color-tja-retardo: #FFA39B;
  --color-tja-naranja: #F6C66F;
  --color-tja-sin-pareja: #E7EBF1;
  --color-tja-tinte-descanso: #232C38;
  --color-tja-tinte-por-verificar: #38290B;
  --color-tja-tinte-falta: #3B1613;

  --sombra-1: 0 1px 2px rgb(0 0 0 / 0.40);
  --sombra-2: 0 4px 14px rgb(0 0 0 / 0.45);
  --sombra-3: 0 18px 44px rgb(0 0 0 / 0.60);
  --sombra-desborde: rgb(0 0 0 / 0.65);
}

/* Dedos: en pantallas táctiles o angostas todo control mide al menos 44 px. */
@media (pointer: coarse), (max-width: 720px) {
  :root {
    --alto-control: 44px;
    --alto-encabezado: 56px;
  }
}

/*
 * En papel siempre se imprime sobre blanco, aunque la pantalla esté en tema oscuro.
 *
 * Y DESDE LA 0.14 ESO INCLUYE EL COLOR, no sólo el fondo y el texto. Hasta la 0.13.1 `registros.css` tenía dentro
 * de su `@media print` una regla que le quitaba el color a la insignia de la letra (`background: none`), y de paso
 * tapaba este agujero: con ella borrada —es la petición 6 del cliente, que las letras conserven su formato en la
 * versión impresa— quien imprimiera en tema oscuro sacaría insignias de fondo oscuro y renglones con los tintes
 * oscuros. Así que aquí se devuelven los valores CLAROS de los seis `--color-tja-*` y de los cinco tríos de tono,
 * que son los que la insignia usa (en pantalla es LA MISMA insignia de la Matriz y de Registros: por eso no tiene
 * variables propias). El papel es claro siempre; lo dice `servidor/lib/documentos/marcas.js` en su cabecera.
 */
@media print {
  :root[data-tema="oscuro"] {
    /*
     * Y LA VARIANTE DE MARCA TAMBIÉN (0.23.2). Se quedaba en la oscura —`#63A6A1` sobre papel blanco: 3.07:1
     * medido— porque este bloque devolvía los fondos al papel y no el color del texto que va encima. Es el mismo
     * descuido que el resto de la versión: un valor derivado para un fondo, usado sobre otro.
     */
    --color-primario-texto: var(--color-primario-texto-claro);

    --color-fondo: #FFFFFF;
    --color-superficie: #FFFFFF;
    --color-superficie-2: #F2F2F2;
    --color-borde: #BBBBBB;
    --color-texto: #000000;
    --color-texto-suave: #333333;
    --color-texto-tenue: #555555;

    /* Los seis de la tarjeta, con los hexes del papel. */
    --color-tja-retardo: #A4231C;
    --color-tja-naranja: #8F4608;
    --color-tja-sin-pareja: #000000;
    --color-tja-tinte-descanso: #F2F3F4;
    --color-tja-tinte-por-verificar: #FAE3BD;
    --color-tja-tinte-falta: #F2CECC;

    /* Y los cinco tríos de tono, que son con los que se dibuja la insignia de la letra. */
    --color-ok-texto: #0B5F33;
    --color-ok-fondo: #E1F5E9;
    --color-ok-borde: #9BD4B1;

    --color-aviso-texto: #7A4700;
    --color-aviso-fondo: #FFF0D1;
    --color-aviso-borde: #E9C478;

    --color-grave-texto: #A3201A;
    --color-grave-fondo: #FDE8E6;
    --color-grave-borde: #F0ABA5;

    --color-info-texto: #17508F;
    --color-info-fondo: #E2EEFC;
    --color-info-borde: #A5C6F0;

    --color-neutro-texto: #3D4959;
    --color-neutro-fondo: #E9EDF2;
    --color-neutro-borde: #C5CDD8;
  }
}