/* =====================================================================
   TINTA Y RELIEVE · CIA Electoral · la hoja de fichas
   =====================================================================
   ⚠ EL NOMBRE DEL ARCHIVO ES HISTÓRICO, Y SE CONSERVA A PROPÓSITO.

   Se llama `tema-hielo-azul.css` porque así lo declaran 57 páginas. El
   tema que contiene ya no es Hielo Azul —que era oscuro— sino TINTA Y
   RELIEVE, que es claro. Renombrarlo obligaría a editar 57 <link> y a
   rehacer la huella de contenido, y este repositorio ya tomó una vez
   exactamente esta decisión, en `sitio/config.js`:

     «Siete pantallas declaran `campanas` hoy y romperlas para renombrar
      una llave sería cambiar un rótulo al precio de una caída.»

   Renombrar los tres archivos es tanda propia. Hasta entonces, el
   nombre miente y esta nota es la que no.

   ---------------------------------------------------------------------
   QUÉ CAMBIA, Y DE DÓNDE VIENE
   ---------------------------------------------------------------------
   El 29 de agosto de 2026 Esteban decidió que el producto se queda con
   UN SOLO TEMA. Esa decisión sigue en pie; lo que cambia es CUÁL. Del
   oscuro (`--t-fondo:#06141B`) se pasa al claro. **Esto no devuelve el
   modo dual**: el interruptor y el reloj que conmutaban se retiraron en
   aquella tanda y no vuelven.

   La regla del sistema, en una línea:

     EL CROMO VA EN RELIEVE SUAVE. LO QUE EXIGE LECTURA VA EN TINTA
     SÓLIDA.

   Neumorfismo puro sobre una herramienta de día de elecciones sería
   ilegible: sin bordes, el contraste control/fondo cae a ~1,4:1, y esto
   se usa en la calle, al sol, en teléfonos de gama baja, por gente que
   no lo vio nunca. Un botón que no se ve es un voto que no se cuenta.
   Por eso todo lo que hay que leer rápido —cabeceras de tabla, botón
   principal, pestaña activa, cifras, píldoras de estado— va en tinta
   sólida (13,4:1) y nunca descansa sólo en una sombra.

   ---------------------------------------------------------------------
   CÓMO ENTRA
   ---------------------------------------------------------------------
   Igual que entraba el anterior, y por el mismo mecanismo medido: en 56
   de las 60 páginas el <link> de este archivo va DESPUÉS del <style>
   propio, así que a igual especificidad gana esta hoja y los `:root` de
   cada página quedan pisados sin borrarse.

   NO SE BORRA NADA. Volver atrás es quitar las tres líneas por página.

   ---------------------------------------------------------------------
   ⚠ LAS FICHAS QUE ESTE ARCHIVO NO TOCA, Y POR QUÉ
   ---------------------------------------------------------------------
   ⚠ RESUELTO EL 3 DE SEPTIEMBRE DE 2026, Y LA LISTA ESTABA INFLADA.
   Este archivo heredó de `fichas-hielo-azul.css` la advertencia de que
   SIETE fichas tenían nombre ambiguo. Se midieron una por una y **seis
   no colisionaban**:
     · `--marca` es un COLOR en las dos páginas que la usan;
     · `--trazo`, `--esc` y `--seccion` viven en UNA sola página cada una;
     · `--c` no la usa NADIE — era un falso positivo de la búsqueda,
       que casaba con `--c1`..`--c5` truncadas;
     · `--x` no es ficha de tema: la escribe el JavaScript en línea.
   La advertencia vieja además nombraba mal las páginas: decía que
   `--borde` era color en `alta-testigo`, `puertas` y `reporte`, y hoy
   ninguna de las tres la usa. Caducó y nadie la volvió a medir.

   La ÚNICA mina real era `--borde`: una MEDIDA (`clamp(16px,4vw,56px)`)
   en `index.html` e `historico.html`, y un COLOR en `fuera-de-linea.html`.
   Con las dos vivas, definirla aquí pintaba un margen o medía un color,
   en silencio. Se renombró la de medida a `--borde-ancho` —14 usos— y la
   palabra queda libre. Ya se puede tocar; no se hace en esta tanda
   porque la única página que la usa como color se la declara ella.

   Tampoco se tocan las de MOVIMIENTO y MEDIDA que ya están bien y no
   son de color: `--curva`, `--alza`, `--toque`, `--radio-caja`,
   `--display`, `--barrido`, `--barrido-op`, `--grano-op`, `--puntos`.

   ---------------------------------------------------------------------
   EL SEMÁFORO SE CONSERVA, Y ES DELIBERADO
   ---------------------------------------------------------------------
   ⚠ LOS PRIMEROS VALORES DE ESTA HOJA NO PASABAN, Y LO DIJO EL BANCO.
   `prueba_contraste.mjs` midió `--muted` en 3,95:1, `--tenue` en 2,35:1,
   `--ok` en 3,85:1 y `--warn` en 3,19:1 — los cuatro bajo 4,5. Se habían
   elegido a ojo. Los de ahora están CALCULADOS contra los cinco fondos
   del sistema y el peor caso de cada uno pasa. Coste declarado: `--tenue`
   y `--tenue-2` colapsan en un solo valor, así que la jerarquía de gris
   pierde un escalón. Se prefiere eso a un texto que no se lee.

   El sitio usa `--ok` 93 veces y `--warn` 96: son el semáforo del día D
   —cobertura de mesas, salud de la máquina, estados de turno—. En el
   tema oscuro hubo que derivarles una rampa fría porque aquel tema no
   traía verde ni ámbar. Sobre papel el problema desaparece: aquí verde
   es verde y ámbar es ámbar, oscurecidos hasta pasar 4,5:1 contra el
   panel, que es lo que `pruebas/interfaz/prueba_contraste.mjs` mide.
   ===================================================================== */

:root {

  /* ── 1 · SUSTRATO · la rampa fría de papel ────────────────────────
     El fondo lleva grano: `textura-grano-claro.png` estaba en esta
     carpeta desde el 29 de agosto sin que nadie la pidiera. Hoy se usa. */
  --bg:            #E7ECF2;
  --fondo:         #E7ECF2;
  --fondo-2:       #E2E8F0;
  --fondo-3:       #DCE3EC;
  --fondo2:        #E2E8F0;
  --papel:         #F4F7FB;
  --card:          #EDF1F6;
  --tarjeta:       #EDF1F6;
  --soft:          #F4F7FB;
  --suave:         #6B7A91;

  /* ── 2 · TINTA · el ancla de contraste ────────────────────────────
     13,4:1 contra el panel. Es el único relleno oscuro del sistema, y
     por eso marca sola la acción principal sin necesitar un destello
     encima. */
  --tinta:         #16233C;
  --tinta2:        #1F3153;
  --ink:           #25334A;
  --texto:         #25334A;
  --tit:           #16233C;
  --lapiz:         #25334A;
  --numero:        #16233C;
  --muted:         #4F5D75;
  --apunte:        #4F5D75;
  --tenue:         #556378;
  --tenue-1:       #556378;
  --tenue-2:       #556378;
  --placeholder:   #556378;
  --pista:         #4F5D75;
  --sel-tinta:     #EEF3F9;   /* letra SOBRE tinta */
  --sobre-verde:   #FFFFFF;   /* letra sobre el verde de acción */

  /* ── 3 · LÍNEAS ───────────────────────────────────────────────────
     En un sistema de relieve la línea es la excepción, no la regla: se
     usa donde el relieve no puede llegar —dentro de una tabla, entre
     dos filas de una lista— porque una tarjeta dentro de otra tarjeta
     es siempre un error. */
  --line:          #D2DAE5;
  --linea:         #D2DAE5;
  --line-viva:     #BAC6D6;
  --linea-viva:    #BAC6D6;

  /* ── 4 · ACENTO · el azul de marca, heredado ──────────────────────
     `--navy-l` (#1D4B75) es el azul que este sitio ya usaba 29 veces.
     No se cambia: se asciende a acento del sistema. */
  --acc:           #1D4B75;
  --acento:        #1D4B75;
  --navy:          #16233C;
  --navy-l:        #1D4B75;
  --navy-d:        #101C31;
  --s-acento:      #1D4B75;
  --hielo:         #1D4B75;
  --slate-2:       #46566E;
  --c-marca:       #16233C;
  --acc-velo:      rgba(29,75,117,.10);
  --acento-velo:   rgba(29,75,117,.10);
  --acc-borde:     rgba(29,75,117,.30);
  --acento-borde:  rgba(29,75,117,.30);
  --acc-relleno:   #1D4B75;

  /* ── 5 · SEÑALES · el semáforo del día D ──────────────────────────
     Los tres pasan 4,5:1 contra `--card`. Medido, no elegido a ojo. */
  --ok:            #16704D;
  --verde:         #16704D;
  --bien:          #16704D;
  --cinta:         #16704D;
  --verde-vivo:    #0F573A;
  --verde-c:       #E4F2EB;
  --ok-velo:       rgba(22,112,77,.11);
  --ok-borde:      rgba(22,112,77,.30);

  --warn:          #86590A;
  --ambar:         #86590A;
  --lamina:        #86590A;
  --ambar-c:       #FBF2E0;
  --warn-velo:     rgba(134,89,10,.12);
  --warn-borde:    rgba(134,89,10,.32);

  --mal:           #B0322A;
  --rojo:          #B0322A;
  --rojo-c:        #FAE9E7;
  --mal-velo:      rgba(176,50,42,.11);
  --mal-borde:     rgba(176,50,42,.30);

  /* Apagado / sin dato. No es un estado malo: es la ausencia de estado. */
  --off:           #56637A;
  --grafito:       #56637A;
  --neutro:        #C6CED9;
  --off-borde:     rgba(86,99,122,.30);
  --off-velo:      rgba(86,99,122,.08);

  /* La malla del día D: mesa reportada / mesa callada. */
  --malla-si:      #16704D;
  --malla-no:      #B0322A;
  --ojo:           #A9541F;

  /* ── 6 · SERIE DE GRÁFICAS ────────────────────────────────────────
     Cinco categorías, no cinco adornos. Se conserva el ORDEN y el
     SESGO de la serie que el sitio ya usaba (carmín, terracota, oro,
     teal, teal hondo): cambiarles el orden reasignaría el color de
     cada partido en 30 usos sin que nadie lo pidiera. Se oscurecen
     para que peguen sobre papel. */
  --c1:            #97303C;
  --c2:            #8E4726;
  --c3:            #7B5A11;
  --c4:            #1F6157;
  --c5:            #1B5E6B;
  /* La variante «t» es la de TEXTO. `tablero.html` la pide desde el JS
     -`tintaEscala()` devuelve `var(--c<n>t)`- y mi hoja solo declaraba la
     quinta: las otras cuatro caian en el valor de noche de la pagina y
     salian a 4,11:1. Estas cinco estan calculadas contra los cinco
     fondos y el peor caso de cada una pasa 4,5. */
  --c1t:           #8A2C36;
  --c2t:           #7E3E21;
  --c3t:           #63490E;
  --c4t:           #1B554D;
  --c5t:           #1B5E6B;

  /* ── 7 · MATERIAL · el relieve ────────────────────────────────────
     El ALCANCE de una sombra es desplazamiento + desenfoque. Dos piezas
     pequeñas que la llevan y estén más juntas que ese alcance se cruzan
     la luz: se ve como un manchón que salta de un control al vecino.
       --sombra       alcance  7 → hueco mínimo  8
       --sombra-alta  alcance 23 → paneles, que sí pueden solaparse
     `--relieve-*` conserva sus cinco nombres: `corporacion.html` los
     declara y los usa, y el ojo del sistema es el mismo. */
  /* ⚠ LA LUZ NO ES BLANCO PURO, Y SE CAMBIO POR LO QUE SE VEIA.
     Era #FFFFFF. Sobre un fondo de #E7ECF2 ese blanco es un salto
     demasiado grande: no se lee como luz rozando un borde, se lee como
     un halo pegado encima. La luz y la sombra de un relieve tienen que
     ser el MISMO fondo, aclarado y oscurecido lo justo — si una de las
     dos se despega, el par deja de fingir una fuente de luz. */
  --relieve-luz:      #F9FBFE;
  --relieve-sombra:   #C4CEDC;
  --relieve-filo:     rgba(255,255,255,.85);
  --relieve-caida:    rgba(22,35,60,.14);
  --relieve-hundido:  rgba(22,35,60,.20);

  --sombra:       -2px -2px 6px #F9FBFE, 2px 3px 8px #C7D1DF;
  --sombra-alta:  -5px -5px 18px #F9FBFE, 6px 8px 22px #C7D1DF;
  --sombra-panel: -5px -5px 18px #F9FBFE, 6px 8px 22px #C7D1DF;
  --sombra-panel-alta: -4px -4px 10px #F9FBFE, 4px 4px 10px #C4CEDC;

  /* Sobre papel no hay vidrio que valga: un panel translúcido sobre un
     fondo claro se lee como suciedad. `--vidrio` pasa a ser la
     superficie sólida del panel, y el desenfoque se apaga. */
  --vidrio:        #EDF1F6;
  --vidrio-fuerte: #F4F7FB;
  --velo:          rgba(22,35,60,.30);
  --desenfoque:    0px;

  /* ── 8 · CONTROLES ────────────────────────────────────────────────
     Un campo SE HUNDE y un botón SOBRESALE. No es adorno: es la única
     señal de affordance que queda cuando se quitan los bordes. */
  --btn-bg:        #16233C;
  --btn-tinta:     #EEF3F9;
  --btn-halo:      rgba(29,75,117,.30);
  --campo-bg:      #EDF1F6;
  --campo-solido:  #EDF1F6;
  --campo-borde:   rgba(22,35,60,.14);
  --th-bg:         #16233C;

  /* ── 9 · FORMA Y LETRA ────────────────────────────────────────────
     `--display` NO se toca: dos páginas la declaran con su propia
     familia y aquí no se sabe cuál. */
  /* Radios mas amplios: con el fondo ya plano y blanco, una caja de 18
     se lee pegada encima del fondo. A 24 la pieza parece salir de el,
     que es lo que el relieve promete. Esteban: «suaviza mas los bordes,
     no se ve que se integre, se ve muy ordinario». */
  --radio:      24px;
  --radio-ch:   16px;
  --sans:  "Manrope", "Inter", "Segoe UI", system-ui, sans-serif;
  --t-sans:"Manrope", "Inter", "Segoe UI", system-ui, sans-serif;
  --cond:  "Archivo Narrow", "Archivo", "Barlow Condensed", sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  /* ── 9.1 · LA ALTURA DE UNA VENTANA · 3-sep-2026 ──────────────────
     ⚠ ESTA FICHA NACE DE UN DEFECTO MEDIDO, NO DE UN GUSTO.

     Esteban: «cuando le doy en registrar, el cuadro se ve muy grande y
     hay una barra blanca que tapa». La barra blanca es `#cieTecho`, el
     techo que dibuja `rail.js`, que va FIJO a z-index 5100. Cada
     pantalla eligio el z-index de sus propias ventanas por su cuenta y
     antes de que el riel existiera, asi que quedaron debajo: 400 en
     `electores`, 1300 en `mapa`, 999 a 1600 en `tablero`. Una ventana
     que abre a pantalla completa y le queda una banda del armazon por
     encima parece rota, y lo esta.

     No es «subirle el numero a una»: es que no habia DONDE leer cual es
     el numero bueno. Aqui esta, con su razon:

       · el riel y su techo ocupan 5100-5400
       · el aviso del riel (`cieAlerta`) va en 99998 y manda siempre --
         un aviso del armazon tiene que verse por encima de todo
       · una ventana de pantalla se queda EN MEDIO: sobre el armazon,
         debajo del aviso

     Medido antes de escribirlo: las ventanas que ya estaban bien
     -`corporacion`, `seguimiento`, el panel del asistente del mapa- ya
     vivian en la banda de los 9.000 por su cuenta. Esta ficha no
     inventa una convencion, le pone nombre a la que ya existia.

     ⚠ Y SE USA CON RESPALDO -- `var(--z-capa, 9400)`. Contadas, CUATRO
     de las 60 pantallas no cargan esta hoja: `index.html` (la portada,
     que se queda oscura por orden expresa), `asistente-mapa.html` (va
     dentro de un iframe y lleva su propia familia `--ia-*`) y
     `proveedor/prospectos.html` y `proveedor/respaldos.html` --estas
     dos son un hueco medido, no una decision: sus seis hermanas de la
     consola SI llevan el tema, y por eso siguen en el cian del armazon
     viejo--. Una ventana sin z-index es peor que una con el numero a
     mano. */
  --z-capa:     9400;

  /* ── 10 · EL ASISTENTE ────────────────────────────────────────────
     Familia propia (`--ia-*`), de `asistente-mapa.html`. Se traduce
     entera para que la ventana del asistente no se quede de noche
     dentro de un producto de día. */
  --ia-superficie:    #EDF1F6;
  --ia-superficie-2:  #F4F7FB;
  --ia-vidrio:        #EDF1F6;
  --ia-vidrio-f:      #F4F7FB;
  --ia-solido:        #16233C;
  --ia-solido-tinta:  #EEF3F9;
  --ia-texto:         #25334A;
  --ia-texto-tenue:   #697890;
  --ia-placeholder:   #8C99AB;
  --ia-borde:         #D2DAE5;
  --ia-borde-vivo:    #BAC6D6;
  --ia-campo:         #EDF1F6;
  --ia-campo-borde:   rgba(22,35,60,.14);
  --ia-acento:        #1D4B75;
  --ia-acento-velo:   rgba(29,75,117,.10);
  --ia-acento-borde:  rgba(29,75,117,.30);
  --ia-aviso:         #A97207;
  --ia-aviso-velo:    rgba(169,114,7,.12);
  --ia-aviso-borde:   rgba(169,114,7,.32);
  --ia-sombra:        -4px -4px 10px #F9FBFE, 4px 4px 10px #C4CEDC;
  --ia-halo:          rgba(29,75,117,.30);
  --ia-desenfoque:    0px;
  --ia-radio:         18px;
  --ia-radio-s:       12px;
  --ia-curva:         cubic-bezier(.2,.9,.25,1);
  --ia-toque:         44px;
}

/* ── 11 · LAS CUATRO QUE `sistema.css` DEFINE MÁS ARRIBA ──────────────
   `acceso.js` (1266) pone `data-tema-oscuro` en marcha en todas las
   pantallas, y `sistema.css` aprovecha ese atributo para redefinir
   cuatro fichas en sus líneas 787 y 892:

     html[data-tema-oscuro]{ --s-acento:#5FC6E8; --sel-tinta:#06222E; }
     html[data-tema-oscuro]{ --hielo:#5FC6E8; --hielo-borde:…; --hielo-velo:…; }

   Ese selector es (0,2,0) y el `:root` de arriba es (0,1,0): PIERDE. Se
   vio en pantalla y no en el código — `prueba_contraste.mjs` midió 674
   textos de `tablero.html` a 1,05:1, cabecera de tabla en tinta oscura
   sobre tinta oscura, porque `--sel-tinta` seguía valiendo el `#06222E`
   de la noche mientras el fondo ya era `--navy` claro.

   Se responde con la MISMA especificidad, no con `!important`, y sin
   tocar el atributo: voltearlo a «claro» apagaría de golpe 31 reglas de
   `sistema.css` y es una decisión de producto aparte, no un efecto
   secundario de esta tanda. */
html[data-tema-oscuro] {
  --s-acento:   #1D4B75;
  --sel-tinta:  #EEF3F9;
  --hielo:      #1D4B75;
  --hielo-borde: rgba(29,75,117,.30);
  --hielo-velo:  rgba(29,75,117,.08);
}

/* Las páginas que aún declaran el atributo de tema quedan igual: hay un
   solo tema y manda con el atributo puesto o sin él. */
html[data-tema],
html[data-tema-oscuro] { color-scheme: light; }
:root { color-scheme: light; }