/* Marca del flujo de biometría: tipografía y los dos temas (tokens).
 *
 * Desde 2026-11-06 la paleta es la del panel (/metricas, marca/legalcheck.css): tinta casi negra
 * con lima. Antes era la de creditos (ciruela, violeta y menta). Solo cambiaron los colores: los
 * componentes, las animaciones y la tipografía son los mismos.
 *   lienzo  #050505  fondo de las pantallas de cámara
 *   tinta   #0A0A0A  texto y botones en las pantallas claras; texto sobre la lima
 *   lima    #C9FE6E  ESTADO en oscuro (guía encontrada, progreso, listo) y botón en oscuro
 *   verde   #4A7C00  ESTADO en claro (la lima no se lee sobre fondo claro: 4.6:1 sobre crema)
 *   crema   #F5F5F7  fondo de las pantallas de texto
 *   rojo    #C0262D  error/aviso en claro (#FF8F8F en oscuro)
 *
 * Tipografía: Atkinson Hyperlegible Next (Braille Institute), hecha para baja visión — el
 * público de este flujo incluye muchos adultos mayores. Variable (400–700), servida desde acá
 * (sin Google Fonts: el contenedor no depende de terceros para renderizar). Licencia OFL,
 * ver OFL.txt en esta carpeta.
 *
 * Dos temas por body[data-tema]: "claro" (bienvenida, instrucciones, cierre) y "oscuro"
 * (cámara). Los componentes usan SOLO estos tokens, así un cambio de tema los repinta todos.
 */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/static/marca/atkinson-hyperlegible-next.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

:root {
  --fuente: "Atkinson Hyperlegible Next", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;

  --marca-lienzo: #050505;
  --marca-tinta: #0A0A0A;
  --marca-lima: #C9FE6E;
  --marca-verde: #4A7C00;
  --marca-crema: #F5F5F7;
  --marca-rojo: #C0262D;

  /* tema oscuro (cámara) — el de :root para que un error de JS nunca deje texto blanco
     sobre blanco */
  --bg: var(--marca-lienzo);
  --superficie: #161618;
  --borde-superficie: #303036;
  --texto: #F2F2F3;
  --texto-tenue: #C6C6CB;
  --accion: var(--marca-lima);
  --accion-texto: var(--marca-tinta);
  --estado: var(--marca-lima);
  --estado-tenue: rgba(201, 254, 110, 0.16);
  --exito: var(--marca-lima);
  --exito-tenue: rgba(201, 254, 110, 0.16);
  --error: #FF8F8F;
  --mascara: rgba(5, 5, 5, 0.76);
  --pildora: rgba(5, 5, 5, 0.84);
  --logo: url("/static/marca/logo-legalface-blanco.svg");   /* legalFace (2026-10-02) */
}

body[data-tema="claro"] {
  --bg: var(--marca-crema);
  --superficie: #FFFFFF;
  --borde-superficie: #E2E2E6;
  --texto: var(--marca-tinta);
  --texto-tenue: #4A4A4A;
  --accion: var(--marca-tinta);
  --accion-texto: #FFFFFF;
  --estado: var(--marca-verde);        /* 4.6:1 sobre crema */
  --estado-tenue: rgba(74, 124, 0, 0.12);
  --exito: var(--marca-verde);
  --exito-tenue: rgba(74, 124, 0, 0.12);
  --error: var(--marca-rojo);
  --logo: url("/static/marca/logo-legalface-color.svg");
}

/* Ola del logo de LegalCheck (ola-carga.js): carga y marca del encabezado (2026-10-02) */
.ola-carga svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* en fondo oscuro los puntos negros del logo no se verían: van con el texto del tema */
body[data-tema="oscuro"] .ola-carga, body[data-tema="oscuro"] .proceso-ola { --ola-tinta: var(--texto); }
/* encabezado: la ola chica a la izquierda de "legalFace" */
.marca-encabezado { display: flex; align-items: center; gap: 0.4rem; flex: 0 0 auto; }
.marca-encabezado .ola-carga.ola-logo { width: 34px; height: auto; aspect-ratio: 93 / 86; margin: 0; flex: 0 0 auto; }