/* Capa de GAP sobre el sistema de diseño de la suite.
 *
 * La identidad visual NO se define aquí. Se enlaza en este orden, y el orden importa:
 *
 *   1. ciso.css ................ formas, espaciado, sombras y componentes base
 *   2. ciso-design-system.css .. tokens canónicos «Sovereign Navy» (color + tipografía)
 *   3. tokens.css .............. esto: lo que sólo necesita GAP
 *   4. evaluacion.css .......... componentes de las pantallas de evaluación
 *
 * Los dos primeros vienen **verbatim** del gestor de contraseñas
 * (`crates/backend/web/`), que es donde vive el original. La cabecera del propio
 * fichero canónico lo dice: «fuente única de identidad visual de TODA la suite».
 * Copiarlos y retocarlos aquí sería fabricar una segunda identidad y que las
 * aplicaciones dejaran de parecerse entre sí sin que nadie lo decidiera.
 *
 * Antes GAP traía su propia paleta —un azul neutro inventado— con los mismos nombres
 * de token. Los nombres coincidían, así que nada se rompía: simplemente no se parecía
 * al resto de la suite, que es peor porque no da la cara.
 *
 * Lo que sí es de GAP y no existe en la suite va abajo, y sólo eso.
 */

:root {
  /* ------------------------------------------------------------ el estado «no se sabe»
   *
   * Es el token propio de esta herramienta, y su razón de ser es el defecto que
   * justifica el proyecto entero: un control **no evaluado** no es un control malo,
   * es un control del que no hay dato.
   *
   * Deliberadamente NEUTRO y distinto de --crit. Si «pendiente» se pintara de rojo,
   * quien evalúa sentiría la presión de poner un número —cualquiera— para quitar el
   * rojo de la pantalla, y así es exactamente como se fabrica una madurez inventada.
   * Tampoco puede ser verde: no evaluado no es correcto. Gris, y sin alarma.
   */
  --nulo: var(--ink-3);
  --nulo-soft: var(--panel-2);

  /* ------------------------------------------------------------------- adaptadores
   *
   * GAP escribió sus componentes con nombres cortos antes de adoptar el sistema.
   * En vez de tocar 34 declaraciones y arriesgar erratas, se alían aquí contra los
   * tokens canónicos. Si algún día se reescriben las hojas, esto desaparece; mientras
   * exista, la fuente del valor sigue siendo el sistema de diseño y no esta capa.
   */
  --r: var(--radius-sm);
  --r-2: var(--radius);
  --shadow: var(--shadow-1);
  --sans: var(--font);
}

/* ============================================================ CORRECCIONES AA
 *
 * El sistema de diseño declara «Contraste AA verificado» y en modo CLARO no se
 * cumple. Medido con la fórmula de WCAG 2.1 sobre el color REAL que ve el ojo —los
 * tokens «-soft» son `rgba` y hay que componerlos sobre el fondo, no compararlos con
 * un hex aproximado—:
 *
 *   good sobre good-soft ..... 2,95:1   (mínimo 4,5 · SC 1.4.3)
 *   warn sobre warn-soft ..... 3,19:1
 *   crit sobre crit-soft ..... 3,82:1
 *   ink-3 sobre panel-2 ...... 4,40:1   (placeholder de los campos)
 *   line-2 sobre panel ....... 1,47:1   (mínimo 3,0 · SC 1.4.11, borde de control)
 *
 * En OSCURO los semánticos sí pasan; sólo falla el borde (1,68:1).
 *
 * ESTO NO ES UN CAPRICHO DE GAP. Con la Administración Pública, el ENS, sanidad y
 * banca como destino, el EN 301 549 —y por tanto el Real Decreto 1112/2018— exige
 * AA. Un pin de estado ilegible no es un detalle estético: es el indicador que dice
 * si un control está bien o mal.
 *
 * Se corrige AQUÍ y no en el fichero canónico porque ese viene verbatim del gestor
 * de contraseñas y tocarlo crearía una segunda identidad. **Pertenece aguas arriba**:
 * afecta a toda la suite, no sólo a esta herramienta.
 *
 * Los valores son los MÁS CERCANOS AL ORIGINAL que cumplen: se conserva el tono y se
 * baja la luminosidad lo justo (al 78 %, 81 % y 90 %). Oscurecer a ojo hasta que pase
 * acaba convirtiendo la paleta en grises.
 */
:root {
  --good: #0b7c56; /* 4,54:1 sobre good-soft */
  --warn: #946219; /* 4,57:1 sobre warn-soft */
  --crit: #c6303e; /* 4,55:1 sobre crit-soft */
  --ink-3: #627288; /* 4,54:1 sobre panel-2 · 4,92:1 sobre panel */

  /* Límite de control. `--line-2` es el trazo «fuerte» y lo usan los bordes de campos,
   * selects, botones fantasma y el conmutador de tema: todos son controles, y su borde
   * es lo único que los identifica como tales. `--line`, el suave, se queda para los
   * separadores decorativos, que no tienen requisito. */
  --line-2: #8d949d; /* 3,06:1 sobre panel */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --line-2: #55677d; /* 3,00:1 sobre panel oscuro */
  }
}
:root[data-theme="dark"] {
  --line-2: #55677d;
}
/* El conmutador puede devolver a claro sobre un sistema en oscuro: los valores de
 * claro tienen que volver a ganar, o quedarían los del media query. */
:root[data-theme="light"] {
  --good: #0b7c56;
  --warn: #946219;
  --crit: #c6303e;
  --ink-3: #627288;
  --line-2: #8d949d;
}

/* ------------------------------------------------------------- anillo de foco
 *
 * `ciso.css` dibuja el foco con `--ring`, que es el acento al 40 % de opacidad.
 * Compuesto sobre blanco da #E6A1C0: **2,05:1**, por debajo del 3,0 que exige el
 * SC 1.4.11 para un indicador de foco. Para quien navega con teclado, el foco no es
 * decoración: es lo único que dice dónde está.
 *
 * El trazo pasa a `--accent` sólido (5,98:1) y `--ring` se queda para el halo, que
 * es donde un color translúcido sí hace su trabajo. Dos capas: una que cumple y otra
 * que se ve bien.
 *
 * El grosor sube a 3 px y el desplazamiento a 2: sobre una tabla densa, un trazo de
 * 2 px pegado al borde de la celda se confunde con la propia rejilla.
 */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--ring);
  border-radius: 3px;
}
/* El foco dentro de una fila de tabla no puede quedar recortado por el desbordamiento
 * del contenedor que permite deslizar en horizontal. */
.tabla-desliza :focus-visible {
  outline-offset: -1px;
}