/* ══════════════════════════════════════════════════════════════════
   MGL institucional · tokens de componente (nivel 3).
   Copia de las direcciones de T-022: 01 §6 (tokens-institucional), revisión 2 §d.2
   y revisión 3 §c.2, más los del sello con globo (D-48) y el menú móvil.
   Regla: aquí no hay colores crudos ni primitivos nuevos. Todo color apunta a un
   token de reportes/tokens.css (copia byte a byte del visor). Solo medidas nuevas.
   ══════════════════════════════════════════════════════════════════ */

/* ── de bocetos/tokens-institucional.css ── */

:root {
  /* armazón */
  --franja-prueba-alto: 28px;
  --franja-prueba-fondo: var(--banda-prueba-fondo);      /* ámbar 50 */
  --franja-prueba-texto: var(--texto);                   /* 16,61:1 */
  --franja-prueba-filete: 2px solid var(--aviso);        /* 5,05:1 frente a la franja; 5,43:1 frente al blanco */
  --cromo-alto: var(--linea-alto);                       /* 48 en producción */
  --carril-inst-ancho: var(--carril-ancho-desplegado);   /* 240 */
  --cuenta-alto: var(--tactil-escritorio);               /* 32 */
  --objetivo: var(--tactil-escritorio);                  /* 32 con ratón; 44 en pantallas táctiles (abajo) */

  /* tipografía de vista: más densa que el visor */
  --vista-titulo: var(--inst-t-vista);                   /* 28 px, Sans 700 (R13) */
  --vista-entradilla: var(--t-control);                  /* 16 px */
  --vista-relleno: var(--e-5);                           /* 24 */

  /* destinos del inicio */
  --destino-min: 20rem;
  --destino-alto-min: 136px;
  --destino-relleno: var(--e-4);
  --destino-borde: 1px solid var(--filete-suave);
  --destino-borde-activo: var(--borde-control);
  --destino-fondo-activo: var(--fondo-sutil);
  --destino-inactivo-fondo: var(--fondo-sutil);
  --destino-inactivo-texto: var(--texto-2);

  /* etiquetas de estado */
  --etiqueta-alto: 24px;
  --etiqueta-construccion-fondo: var(--fondo-sutil);
  --etiqueta-construccion-borde: 1px solid var(--borde-control);
  --etiqueta-construccion-texto: var(--texto-2);
  --etiqueta-neutra-borde: 1px solid var(--texto);

  /* formularios */
  --codigo-tamano: var(--t-entradilla);                  /* 20 px */
  --codigo-tracking: .25em;
  --codigo-ancho: 7em;                                   /* «123 456» con espacio */
  --campo-alto: var(--boton-alto);                       /* 40 */
  --campo-codigo-alto: var(--buscador-movil-alto);       /* 48 */
  --campo-error-borde: 2px solid var(--error);
  --errores-barra: 4px solid var(--error);

  /* tablas de trabajo */
  --tabla-fila-alto-densa: 40px;

  /* constructor */
  --pasos-segmento: 8px;
  --pasos-hueco: var(--e-1);
  --pasos-completado: var(--texto);
  --pasos-actual: var(--accion);
  --pasos-pendiente-borde: 1px solid var(--borde-control);
  --especificacion-ancho: 320px;
  --opcion-marca: 4px solid var(--accion);

  /* reporte */
  --hoja-relleno: var(--e-7);                            /* 48 en pantalla */
  --hoja-relleno-movil: var(--e-4);
  --reporte-toponimo: var(--t-cifra);                    /* 40 px, Alegreya 500 */
  --bloque-separacion: var(--e-6);                       /* 32 */
  --bloque-filete: var(--filete-fino);
  --hallazgo-id-ancho: 3.5ch;
  --grafico-alto: 320px;
  --grafico-alto-movil: 240px;
  --pendiente-alto: 160px;

  /* asistente */
  --hilo-ancho: 52rem;
  --turno-separacion: var(--e-7);
  --asistente-filete: 3px solid var(--borde-control);
  --compositor-alto-min: 96px;
  --aviso-info-barra: 4px solid var(--texto-2);
  --aviso-info-fondo: var(--fondo-sutil);
  --codigo-sql-fondo: var(--fondo-sutil);
  --fuente-codigo: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", monospace;
}

html[data-entorno="prueba"] { --cromo-alto: calc(var(--franja-prueba-alto) + var(--linea-alto)); }

/* ── de bocetos/tokens-r2.css ── */

:root {
  /* armazón institucional revisado */
  --corte-alto: 28px;                                  /* «Corte · lote …» en la línea superior */
  --corte-borde: 1px solid var(--borde-control);       /* 5,39:1 frente al blanco */
  --lateral-ancho: 300px;                              /* columna de detalle y acciones del inicio */
  --cifra-filete-pendiente: 3px dashed var(--borde-control);

  /* espacio de trabajo cartográfico (ETC), común a los dos visores */
  --etc-cabeza-alto: 52px;
  --etc-leyenda-ancho: 236px;                          /* leyenda vertical en paneles estrechos */
  --etc-lienzo-alto: 400px;                            /* el ETC incrustado en el inicio */
  --selector-alto: 36px;
  --barra-estado-alto: 28px;
  --barra-estado-fondo: var(--fondo-sutil);
  --barra-estado-texto: var(--texto-2);                /* 9,30:1 sobre --fondo-sutil */
  --barra-estado-tenue: var(--texto-3);                /* 5,72:1 sobre --fondo-sutil */
  --escala-trazo: 2px solid var(--texto);
  --tooltip-ancho: 248px;
  --tooltip-tenue: var(--sobre-velo-2);                /* 12,9:1 sobre --tooltip-fondo */
  --leyenda-casilla-v: 16px;
  --leyenda-fila-alto: 24px;                           /* T-136: objetivo mínimo de WCAG 2.5.8 (antes 22 px) */
  --leyenda-cero: 2px solid var(--texto);              /* filete del 0 en la leyenda divergente vertical */
  --leyenda-marcada: 4px solid var(--texto);           /* clase del municipio elegido */
  --seleccion-trazo: 2.5px;                            /* contorno del municipio elegido (--mapa-realce) */
  --seleccion-halo: 5px;                               /* halo blanco bajo el contorno (--mapa-halo) */
  --ubicacion-ancho: 132px;                            /* mapa de ubicación (al acercar) */
  --ubicacion-vista: 2px solid var(--texto);           /* rectángulo de la vista actual */
  --detalle-acoplado-ancho: 340px;                     /* detalle fijo del visor público, ≥ 900 px de lienzo */
  --detalle-filete: 4px solid var(--texto);
  --control-icono: 18px;

  /* gráficos de los reportes */
  --grafico-rotulo: 13px;                              /* rótulos dentro del SVG (excepción del antipatrón 8) */
  --grafico-fila: 22px;                                /* filas de barras, puntos y cajas */
  --grafico-eje: var(--filete);
  --grafico-cero: var(--texto-3);                      /* línea del 0 y referencias */
  --grafico-referencia: 1.5px dashed var(--texto-2);
  --grafico-contexto: var(--pendiente-trazo);          /* gris 500: marcas de contexto, 3,1:1 (1.4.11) */
  --grafico-zona: var(--fondo-sutil);                  /* zona bajo la diagonal en la dispersión */
  --grafico-caja: var(--fondo-sutil);
  --grafico-caja-foco: var(--neutro-2);                /* la caja del territorio del reporte */
  --sexo-ninas: var(--neutro-5);                       /* gris oscuro: legible en blanco y negro (L* 33,5) */
  --sexo-ninos: var(--neutro-2);                       /* gris claro (L* 69,1) */
  --grafico-foco: var(--texto);                        /* el territorio del reporte */
  --waffle-celda: 18px;
  --multiplo-ancho: 232px;                             /* cada mapa de los múltiplos pequeños */
}

/* ── de bocetos/tokens-r3.css ── */

:root {
  /* bandas de dominio (D-43): el color dice de qué dato habla el bloque */
  --dominio-neutro-fondo: var(--fondo-sutil);          /* texto 16,30:1 · pregunta 9,30:1 */
  --dominio-neutro-acento: var(--texto);
  --dominio-lengua-fondo: var(--len-0);                /* texto 15,87:1 · pregunta 9,05:1 */
  --dominio-lengua-acento: var(--len-5);               /* 6,04:1 sobre su fondo; 6,78:1 sobre blanco */
  --dominio-oferta-fondo: var(--ofe-0);                /* texto 15,69:1 · pregunta 8,94:1 */
  --dominio-oferta-acento: var(--ofe-5);               /* 5,54:1 sobre su fondo; 6,30:1 sobre blanco */
  --dominio-diferencia-fondo: var(--dif-p1);           /* texto 14,72:1 · pregunta 8,40:1 */
  --dominio-diferencia-acento: var(--dif-p4);          /* 5,54:1 sobre su fondo; 6,71:1 sobre blanco */
  --bloque-cabeza-filete: 6px;
  --bloque-cabeza-relleno-v: var(--e-4);
  --bloque-icono: 28px;
  --bloque-num: var(--t-cifra-s);                      /* 28 px, Sans 800, color del acento */
  --bloque-titulo: var(--inst-t-vista);                /* 28 px (R13) */
  --bloque-separacion-r3: var(--e-8);                  /* 64 px entre bloques */

  /* cifras destacadas (D-44) */
  --cifra-destacada: var(--inst-t-cifra-l);           /* 40 px, Sans 800 (R13: antes 48) */
  --cifra-destacada-movil: var(--inst-t-cifra-m);     /* 32 px (antes 36) */
  --cifra-icono: 24px;
  --cifra-filete-dominio: 4px;

  /* figura legible (D-38 a D-40) */
  --figura-subtitulo: var(--t-control);                /* 16 px: medida, territorio y años */
  --figura-separacion: var(--e-7);                     /* 48 px entre figuras de un bloque */
  --como-leer-fondo: var(--fondo-sutil);               /* texto 16,30:1; término y texto a 16 px */
  --como-leer-termino: 10.5em;
  --anotacion-texto: var(--t-nota);                    /* 14 px: anotaciones y valores dentro del SVG */
  --anotacion-trazo: var(--texto-2);                   /* líneas de llamada, 10,17:1 */
  --anotacion-banda: var(--fondo-sutil);               /* anotación de rango (fila o tramo resaltado) */
  --grafico-rotulo-fila: var(--t-nota);                /* 14 px: nombres de fila (antes 13) */
  --grafico-pais: var(--neutro-3);                     /* barra del país: 3,34:1 sobre blanco y 5,34:1 frente a --grafico-foco */
  --grafico-reserva: var(--aviso);                     /* glifo del aviso de calidad dentro del gráfico, 5,43:1 */

  /* «En resumen» (D-45) */
  --resumen-fondo: var(--fondo-sutil);
  --resumen-filete: var(--filete-cuadro);              /* 2 px de tinta arriba */
  --resumen-muestra: 12px;

  /* bloque sin dato: el alto queda reservado con trama (ADR-0004) */
  --modulo-pendiente-alto: 200px;
  --modulo-pendiente-trama: repeating-linear-gradient(45deg, var(--filete) 0 1px, transparent 1px 8px);
  --modulo-pendiente-borde: 1px dashed var(--pendiente-trazo);  /* 3,06:1 */

  /* separador de los bloques añadidos desde el constructor */
  --separador-fondo: var(--texto);                     /* blanco encima: 17,84:1 */
  --separador-texto: var(--sobre-oscuro);
}

@media (max-width: 720px) {
  :root { --cifra-destacada: var(--cifra-destacada-movil); --bloque-titulo: var(--t-h3); --como-leer-termino: auto; }
}

/* ── propios de la construcción (I-0a) ── */
:root {
  /* sello con sus fuentes en un globo (D-48, galería §sello) */
  --sello-globo-ancho: min(24rem, 80vw);
  --sello-globo-puente: 6px;                           /* franja transparente: el puntero pasa del sello al globo */
  --sello-icono: 14px;

  /* menú del carril por debajo de 1024 px */
  --menu-carril-ancho: min(var(--carril-inst-ancho), 86vw);

  /* hueco reservado del ETC hasta I-0b (cabeza, lienzo y barra de estado) */
  --hueco-etc-alto: calc(var(--etc-cabeza-alto) + var(--etc-lienzo-alto) + var(--barra-estado-alto));
}

/* ── propios de la construcción (I-0b): espacio de trabajo cartográfico ── */
:root {
  /* El lienzo del inicio se acomoda a la pantalla para que el ETC entero, con su barra de estado,
     quepa en la primera vista (1366×768): mapa.js fija --etc-lienzo-alto entre el mínimo y el
     máximo de r2 (400 px) según el espacio que queda bajo la franja de cifras. */
  --etc-lienzo-min: 300px;
  --etc-lienzo-alto-movil: 360px;                      /* por debajo de 1024 (boceto 08 móvil) */
  --etc-cruz: 20px;                                    /* cruz del centro con el foco de teclado */
  --etc-cruz-trazo: 2px;
  --tramo-alto: 16px;
  --tramo-eje: var(--filete);
  --tramo-tramo: var(--texto-2);
  --tramo-ninez: var(--texto);
  --tramo-oferta: var(--ofe-5);
  --leyenda-pendiente: 1px dashed var(--pendiente-trazo);
}

/* ── propios de la construcción (I-0c): figuras de los reportes ── */
:root {
  /* zonas del análisis de focos (T-027): los tonos de la diferencia, café para la brecha alta y
     azul para la baja; en blanco y negro, las de brecha baja llevan trama (D-26) */
  --focos-hh: var(--dif-p4);
  --focos-hl: var(--dif-p2);
  --focos-lh: var(--dif-n2);
  --focos-ll: var(--dif-n3);
  --focos-ns: var(--fondo-sutil);
  --focos-no: var(--no-aplica-fondo);
  --focos-isla-trama: var(--texto-3);

  /* hoja del reporte en pantalla: el ancho de la hoja carta (718 px de dibujo) más su relleno */
  --reporte-ancho: calc(718px + 2 * var(--hoja-relleno));
  --mapa-impreso: 150mm;                               /* reportes/mapas_svg.py, ANCHO_IMPRESO_MM */
  --mapa-trazo: 0.6px;
  --mapa-cifra-halo: 3px;
  --avance-alto: 10px;                                 /* barra de avance de G-01 */
  --celda-barra-alto: 10px;
  --grafico-alto-min: 160px;
  --muestra-clave: 16px;
  --anexo-interlinea: 1.32;                           /* anexo del PDF: texto de consulta, a 14 px */
  --trama-impresion: var(--texto);                     /* líneas de las tramas al imprimir */
}

/* ── gráficas vivas (T-053c): lo que T-049 no nombra. Los tiempos, las curvas, la atenuación,
   las series, el control segmentado y el globo vienen del bloque de T-049, al final del archivo
   (--mov-*, --curva-*, --graf-atenuado, --serie-*, --sobre-*, --seg-*, --globo-*). ── */
:root {
  /* colores con nombre de las formas nuevas (G-25 a G-32) */
  --cubierto: var(--len-5);                            /* recibe clases en su idioma */
  --no-cubierto: var(--neutro-1);                      /* no las recibe: gris claro */
  --sobre-cubierto: var(--sobre-len-5);                /* rótulo dentro de la marca */
  --sobre-no-cubierto: var(--texto);                   /* 11,9:1 sobre --neutro-1 */
  --grafico-concentracion: var(--len-5);               /* G-26: hasta el umbral */
  --grafico-resto: var(--neutro-1);                    /* G-26: después del umbral */
  --grafico-punto: var(--serie-6);                     /* G-30: el resto de los cuadrantes (R6) */
  --grafico-punto-problema: var(--focos-hh);           /* G-30: solo el cuadrante del problema, en color */
  --grafico-preliminar: var(--fondo-sutil);            /* banda de los años preliminares (G-20, G-32), en el lienzo */
  --pictograma-vacio: var(--fondo-sutil);              /* G-28: figura sin llenar (T-049 §a) */
  --pictograma-vacio-borde: var(--filete);
  --circulo-relleno: var(--len-5);                     /* G-27 */
  --circulo-opacidad: .72;
  --circulo-borde: var(--superficie);
  --grafico-fijo-marca: inset 0 0 0 2px var(--accion); /* fila fijada con Intro */
}

/* Objetivos táctiles (T-029 B3): en pantallas táctiles y por debajo de 720 px, todo control
   llega a 44 px (--tactil), como los del mapa. */
@media (max-width: 720px), (pointer: coarse) {
  :root {
    --objetivo: var(--tactil);
    --cuenta-alto: var(--tactil);
    --selector-alto: var(--tactil);
    --boton-alto: var(--tactil);
  }
}

/* ── T-049 «Portada de día» (D-53): bloque del director de diseño, pegado tal cual ── */

/* ══════════════════════════════════════════════════════════════════
   MGL institucional · T-049 «Portada de día» · tokens (D-53, decisión del 06-10).

   DÓNDE SE PEGA: tal cual, AL FINAL de backend/reportes/static/reportes/tokens-institucional.css.
   Ese archivo se carga después de tokens.css (inst/base.html:9-10 y reportes/reporte.html:7-8),
   así que este bloque gana sin borrar nada. No redefine ningún token que ya cambie dentro de un
   @media de los dos archivos (táctil, 720 px, 1023 px, 1536 px y movimiento reducido): esos
   siguen funcionando.

   QUÉ TRAE
     · Fondo blanco azulado, que reemplaza el «papel» de T-041 (D-T041-1). Es el tono de
       --p-accion-600 (214°) al 97 % de luminosidad, de la misma familia que la noche de la
       portada (212°).
     · Paleta de la portada (frontend/src/estilos/tokens.css:122-140 y 501-570) llevada al día.
       La noche entera se copia solo para el acceso (el mapa que gira).
     · Rampas de lengua, oferta, diferencia y asistencia (YlOrBr, T-048), sin cambios, con el
       texto que va sobre cada clase y los colores categóricos de las series.
     · Movimiento: B «Mesa de trabajo» (≤ 0,55 s, curvas productivas de Carbon) en la interfaz
       y las gráficas; la escala de la portada (900 / 1200 / 2600 ms) solo en el mapa; el giro
       solo en el acceso.
     · Versión para la impresión y para Gotenberg.

   CONTRASTE: está medido, no supuesto (luminancia relativa WCAG 2.x; se reproduce con
     tareas/evidencia/T-049/herramientas/verificar_t049.py, salida en T-049-pruebas.txt).
     «a / b» = texto o marca a sobre el fondo b.
     Texto normal ≥ 4,5:1. Bordes de control, foco y marcas de gráfico ≥ 3:1 (1.4.11).
     Las series se separan con ΔE00 medido en visión normal y simulada (protanopía,
     deuteranopía y tritanopía; Machado 2009, severidad 1).
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* ════════════ 1. primitivos nuevos (solo se usan en este bloque) ════════════ */

  /* día: tintes del azul de la acción (214°) */
  --p-dia-fondo: #F4F7FB;            /* la mesa. L* 97; 1,07:1 frente al blanco de las hojas */
  --p-dia-sutil: #E9EFF7;            /* bandas dentro de las hojas; países vecinos en el mapa */
  --p-dia-esqueleto: #DDE5EE;        /* esqueletos de carga; horizonte del mapa 3D */
  --p-dia-pendiente: #818A96;        /* lo pendiente: 3,49 / blanco · 3,25 / mesa · 3,02 / sutil (el gris 500 daba 2,85 sobre la mesa) */
  --p-dia-sombra-relieve: #3D4F66;   /* sombreado del relieve de día */
  --p-oferta-dia: #00767F;           /* la oferta de la portada (#5FD3D9, 183°) llevada al día */

  /* series categóricas: anclas de la portada (lengua, asistencia, oferta, idiomas y diferencia) */
  --p-serie-naranja: #D96A0B;        /* YlOrBr, entre asi-4 y asi-5 */
  --p-serie-cian: #2A9DA6;           /* la oferta de la portada, con 3:1 */
  --p-serie-violeta: #9F4FA8;        /* familia del garífuna en Retal */
  --p-serie-cafe: #7B4416;           /* familia de dif-p4 */
  --p-serie-gris: #70757D;

  /* noche de la portada: SOLO para el acceso (copiada de frontend/src/estilos/tokens.css:122-141) */
  --p-noche: #0B121A;
  --p-noche-rgb: 11 18 26;
  --p-noche-2: #121C27;
  --p-noche-borde: #3B4B5C;
  --p-noche-texto: #E8EDF2;
  --p-noche-texto-2: #B4C0CC;
  --p-noche-texto-3: #8D9AA8;
  --p-noche-sin: #1E2935;
  --p-noche-horizonte: #1B2A3A;
  --p-noche-sombra: #05090D;
  --p-noche-luz: #5B7088;
  --p-noche-borde-mapa: #DCE6F2;
  --p-len-noche: #2B3F66;
  --p-accion-200: #8FB3E8;

  /* ════════════ 2. semánticos que cambian ════════════ */

  /* superficies. Mesa = fondo de la vista; hoja = tarjeta, panel o reporte (blanco) */
  --fondo: var(--p-dia-fondo);       /* texto 16,60 · texto-2 9,47 · texto-3 5,82 · acción 7,58 · aviso 5,05 · error 6,12 */
  --lienzo: var(--p-dia-fondo);      /* body de inst.css:16 y reportes.css:14 */
  --fondo-banda: var(--p-dia-fondo);
  --superficie: var(--p-blanco);     /* texto 17,84 · texto-2 10,17 · texto-3 6,26 · acción 8,14 · aviso 5,43 · error 6,57 */
  --fondo-sutil: var(--p-dia-sutil); /* texto 15,42 · texto-2 8,80 · texto-3 5,41 · acción 7,04 · aviso 4,69 · oferta 4,66 */
  --fondo-esqueleto: var(--p-dia-esqueleto);   /* sin texto encima */
  /* Sin cambio, aquí solo se miden sobre el día: --texto #13181E, --texto-2 #3B424A,
     --texto-3 #5A616B, --accion #1D4F91, --accion-hover #163D70 (10,10 / mesa) y --foco #FFBF47.
     --borde-control #636B76: 5,39 / blanco · 5,02 / mesa · 4,66 / sutil (≥ 3:1).
     --filete #C9CFD6 y --filete-suave #DEE2E8 son decorativos (1,46 y 1,21 / mesa).
     --accion-suave #E9EFF8: texto 15,43 · acción 7,04. Siempre con su marca de 3 px (7,58 / mesa).
     Foco: anillo amarillo de 3 px con el borde interior de tinta de 2 px (--foco-interior).
     El amarillo da 1,53 / mesa; la tinta, 16,60 / mesa y 10,87 / amarillo: el par cumple 1.4.11. */
  --pendiente-trazo: var(--p-dia-pendiente);
  --oferta-acento: var(--p-oferta-dia);        /* texto 5,39 / blanco · 5,01 / mesa · 4,66 / sutil. No va sobre --dominio-diferencia-fondo (4,45) */
  /* Límite medido: --aviso sobre --dif-p1 da 4,48. El aviso de calidad va en su banda ámbar
     (--aviso-suave: 5,05), nunca dentro de la banda de diferencia. */

  /* armazón: línea y carril blancos (la hoja); la mesa queda azulada */
  --linea-fondo: var(--superficie);
  --carril-fondo: var(--superficie);           /* carril-texto 10,17 · activo 9,39 sobre --accion-suave */
  --carril-hover: var(--fondo-sutil);
  --tabla-cabecera-fondo: var(--superficie);   /* con el filete de tinta de 2 px debajo */
  --barra-estado-fondo: var(--fondo-sutil);    /* texto-2 8,80 · texto-3 5,41 */
  --cruz-halo: var(--p-blanco);
  --medicion-casco: var(--p-blanco);
  --mapa-halo: var(--p-blanco);

  /* ════════════ 3. componente ════════════ */

  /* mesa de trabajo (B ampliada): rejilla de 12 columnas */
  --mesa-columnas: 12;
  --mesa-hueco: var(--inst-ritmo-tarjetas);   /* 16: la separación entre hojas es la misma en todo el institucional */
  --mesa-relleno: var(--e-5);
  --mesa-ancho-max: 1440px;
  --tarjeta-fondo: var(--superficie);
  --tarjeta-borde: 1px solid var(--filete);    /* #C9CFD6: 1,46 / mesa. El 200 (1,21) se pierde en el proyector de la demo */
  --tarjeta-radio: var(--radio-superficie);    /* 8 */
  --tarjeta-sombra: 0 1px 2px rgb(var(--p-sombra) / .06), 0 1px 1px rgb(var(--p-sombra) / .04);
  --tarjeta-relleno: var(--e-5);               /* 24; 16 por debajo de 720 */
  --tarjeta-alto-min: 280px;                   /* reserva el alto mientras carga (ADR-0004) */
  --tarjeta-fijada: 2px solid var(--accion);   /* 7,58 / mesa · 8,14 / blanco */
  --tarjeta-cabeza-hueco: var(--e-3);
  --hallazgo-fuente: var(--fuente-titulo);     /* Alegreya 500 en el titular de hallazgo (D-53) */
  --hallazgo-peso: 500;
  --tarjeta-subtitulo: var(--t-nota);          /* 14 px, texto-3 6,26 / blanco */
  --tarjeta-cifra: var(--t-cifra);             /* 40 px, Sans 800, cuenta al entrar */
  --tarjeta-cifra-peso: 800;
  --tarjeta-cifra-movil: var(--t-cifra-s);     /* 28 px */
  --tarjeta-nota-fuente: var(--t-nota);        /* «Fuente · corte» al pie: texto-3 6,26 / blanco */

  /* barra de herramientas de cada figura (32 px con ratón; 44 en táctil vía --objetivo) */
  --herr-alto: var(--objetivo);
  --herr-icono: var(--control-icono);          /* 18 */
  --herr-hueco: var(--e-1);
  --herr-texto: var(--texto-2);                /* 10,17 / blanco */
  --herr-hover: var(--fondo-sutil);            /* texto-2 8,80 */
  --herr-activo-fondo: var(--accion-suave);
  --herr-activo-texto: var(--accion);          /* 7,04 */

  /* control segmentado (radios nativos; el pulgar se desliza con :has()) */
  --seg-alto: var(--objetivo);
  --seg-pista: var(--fondo-sutil);             /* texto-2 sin elegir 8,80 */
  --seg-pista-borde: 1px solid var(--borde-control);   /* 4,66 / sutil · 5,02 / mesa */
  --seg-pulgar: var(--superficie);             /* texto 17,84 en el elegido */
  --seg-pulgar-borde: 1px solid var(--borde-control);
  --seg-pulgar-sombra: 0 1px 2px rgb(var(--p-sombra) / .16);
  --seg-relleno: 3px;
  --seg-radio: var(--radio-control);

  /* globo con el dato exacto (gráfica y mapa) */
  --globo-fondo: var(--p-tinta);               /* blanco 17,84 */
  --globo-texto: var(--p-blanco);
  --globo-texto-2: var(--p-sobre-velo-2);      /* 12,79 */
  --globo-ancho-max: 280px;
  --globo-radio: var(--radio-control);
  --globo-retardo: 0ms;                        /* aparece al instante; se va con Esc o al salir (1.4.13) */

  /* series categóricas, en este orden (1 y 2 son el par más separado en todos los tipos de visión).
     Min ΔE00 entre cualquier par: 11,0 (3 y 4 en deuteranopía); 1 y 2: ≥ 54,3 en los cuatro tipos.
     Marca ≥ 3:1 sobre blanco y sobre la mesa. Rampas ordenadas (niveles, años) NO usan esta lista. */
  --serie-1: var(--len-6);                     /* #0E3D7D · 10,59 / blanco · 9,86 / mesa · rótulo blanco 10,59 */
  --serie-2: var(--p-serie-naranja);           /* 3,49 / blanco · 3,25 / mesa · rótulo tinta 5,11 */
  --serie-3: var(--p-serie-cian);              /* 3,24 / blanco · 3,02 / mesa · rótulo tinta 5,50 · no sobre --fondo-sutil (2,81) */
  --serie-4: var(--p-serie-violeta);           /* 5,05 / blanco · 4,70 / mesa · rótulo blanco 5,05 */
  --serie-5: var(--p-serie-cafe);              /* 7,83 / blanco · 7,29 / mesa · rótulo blanco 7,83 */
  --serie-6: var(--p-serie-gris);              /* «resto» u «otros»: 4,64 / blanco · rótulo blanco 4,64 */
  --serie-sobre-1: var(--p-blanco);
  --serie-sobre-2: var(--p-tinta);
  --serie-sobre-3: var(--p-tinta);
  --serie-sobre-4: var(--p-blanco);
  --serie-sobre-5: var(--p-blanco);
  --serie-sobre-6: var(--p-blanco);
  --serie-poblacion: var(--len-6);             /* población o lengua frente a oferta: ΔE00 ≥ 17,1 (tritanopía); 28,1 en visión normal */
  --serie-oferta: var(--p-oferta-dia);         /* 5,39 / blanco */
  --serie-pais: var(--grafico-pais);           /* neutro-3, 3,34 / blanco (sin cambio) */
  --serie-foco: var(--texto);                  /* el territorio del tablero o del reporte */
  --serie-preliminar-trama: repeating-linear-gradient(135deg, var(--fondo-sutil) 0 4px, var(--p-blanco) 4px 8px);   /* banda de 2026 preliminar */

  /* rampas (sin cambio de valor: --len-*, --ofe-*, --dif-*, --asi-* de tokens.css). Rótulo dentro de
     cada clase (mapa de calor G-29, pictograma G-28, celdas): tinta o blanco según el contraste. */
  --sobre-len-0: var(--p-tinta);   /* 15,87 */
  --sobre-len-1: var(--p-tinta);   /* 11,42 */
  --sobre-len-2: var(--p-tinta);   /*  8,15 */
  --sobre-len-3: var(--p-tinta);   /*  5,76 */
  --sobre-len-4: var(--p-blanco);  /*  4,61 */
  --sobre-len-5: var(--p-blanco);  /*  6,78 */
  --sobre-len-6: var(--p-blanco);  /* 10,59 */
  --sobre-asi-0: var(--p-tinta);   /* 15,73 */
  --sobre-asi-1: var(--p-tinta);   /* 14,11 */
  --sobre-asi-2: var(--p-tinta);   /* 11,23 */
  --sobre-asi-3: var(--p-tinta);   /*  8,33 */
  --sobre-asi-4: var(--p-tinta);   /*  5,86 */
  --sobre-asi-5: var(--p-blanco);  /*  4,56 */
  --sobre-asi-6: var(--p-blanco);  /*  8,43 */
  --sobre-ofe-0: var(--p-tinta);   /* 15,69 */
  --sobre-ofe-1: var(--p-tinta);   /* 11,28 */
  --sobre-ofe-2: var(--p-tinta);   /*  8,15 */
  --sobre-ofe-3: var(--p-tinta);   /*  5,88 */
  --sobre-ofe-4: var(--p-tinta);   /*  4,23: NO llega a 4,5 con ninguno (blanco 4,22). El rótulo va fuera de la marca o en negrita ≥ 19 px */
  --sobre-ofe-5: var(--p-blanco);  /*  6,30 */
  --sobre-ofe-6: var(--p-blanco);  /*  9,51 */
  --sobre-dif-n3: var(--p-blanco); /*  5,85 */
  --sobre-dif-n2: var(--p-tinta);  /*  7,91 */
  --sobre-dif-n1: var(--p-tinta);  /* 14,41 */
  --sobre-dif-p1: var(--p-tinta);  /* 14,72 */
  --sobre-dif-p2: var(--p-tinta);  /* 10,49 */
  --sobre-dif-p3: var(--p-tinta);  /*  6,32 */
  --sobre-dif-p4: var(--p-blanco); /*  6,71 */
  /* Clases contiguas (ΔE00): len 9,6 a 11,2 · ofe 8,6 a 10,8 · dif 13,1 a 25,8 · asi 10,5 a 15,7,
     salvo asi-0 / asi-1, que dan 4,9 (heredado de T-048): en la leyenda llevan su filete. */
  --leyenda-casilla-borde: 1px solid var(--borde-control);   /* toda casilla de leyenda; la clase 0 casi no se ve (1,05 a 1,15 / mesa) */

  /* ════════════ mapa institucional de día (MapLibre lo lee con getComputedStyle) ════════════ */
  --mapa-fondo: var(--p-dia-fondo);            /* fondo, cielo y niebla: el mapa se apoya en la mesa */
  --mapa-cielo: var(--p-dia-fondo);
  --mapa-horizonte: var(--p-dia-esqueleto);    /* bruma del horizonte con inclinación */
  --mapa-contexto: var(--p-dia-sutil);         /* países vecinos */
  --mapa-fuera-opacidad: .86;                  /* velo fuera de Guatemala sobre el relieve (igual que la portada) */
  --mapa-sombra: var(--p-dia-sombra-relieve);  /* hillshade-shadow-color */
  --mapa-luz: var(--p-blanco);                 /* hillshade-highlight-color */
  --mapa-acento: var(--p-dia-fondo);           /* hillshade-accent-color */
  --mapa-relieve-exageracion: .45;             /* de día, 0,9 ensucia los colores claros */
  --mapa-relleno-opacidad: .92;                /* el relieve corre el color como máximo ΔE00 2,9 (con 0,88 llegaba a 4,6): la clase no se confunde */
  --mapa-extrusion-opacidad: .92;
  --mapa-borde: var(--p-blanco);               /* límite municipal: 0,5 px a zoom 6 y 1 px a zoom 9 */
  --mapa-depto: var(--p-tinta-2);              /* límite departamental y nacional: 9,47 / mesa */
  --mapa-realce: var(--p-tinta);               /* contorno al pasar: 2,2 px */
  --mapa-comparar-guion: 2 1.5;                /* comparar: el contorno de selección en guiones (line-dasharray) */
  --mapa-altura-lengua: 130;                   /* metros por punto porcentual (la exageración de la portada) */
  --mapa-altura-oferta: 110;
  --mapa-altura-diferencia: 110;               /* solo sube la parte positiva: ["max", valor, 0], como escena.js:211 */
  --mapa-altura-asistencia: 0;                 /* sin extrusión: I6 (6 a 14 años) tiene sus cortes entre 83 y 93 % (frontend/src/nucleo/indicadores.js:106); los prismas serían una meseta */
  /* capa HB «Hablantes por idioma» (T-124): intensidad del color del idioma en cada clase, los tramos de opacidad
     de la portada (escena.js, pintarIdioma). mapa.js mezcla el color con --mapa-fondo; las casillas y la hoja, igual. */
  --mapa-hb-alfa-0: .03;                       /* menos de 0,5 %: casi transparente */
  --mapa-hb-alfa-1: .3;                        /* desde 0,5 % (al menos 1 de cada 200 personas) */
  --mapa-hb-alfa-2: .6;                        /* desde 10 % */
  --mapa-hb-alfa-3: .88;                       /* desde 50 % */
  --mapa-hb-alfa-4: 1;                         /* desde 90 % */
  --mapa-inclinacion-plana: 0;                 /* lectura y comparación */
  --mapa-inclinacion-relieve: 50;              /* presentación (N1) */
  --mapa-inclinacion-max: 62;                  /* tope de la portada */
  --mapa-rumbo-relieve: -18;                   /* el rumbo de la cámara «inicio» de la portada */
  --mapa-pixeles-max: 2;                       /* pixelRatio tope */

  /* ════════════ acceso: el mapa de la portada gira detrás del formulario ════════════ */
  --acceso-fondo: var(--p-noche);
  --acceso-velo: linear-gradient(90deg, rgb(var(--p-noche-rgb) / .94) 0%, rgb(var(--p-noche-rgb) / .86) 36%, rgb(var(--p-noche-rgb) / .35) 52%, rgb(var(--p-noche-rgb) / 0) 64%);
  --acceso-velo-movil: linear-gradient(to top, rgb(var(--p-noche-rgb) / .94) 0%, rgb(var(--p-noche-rgb) / .6) 60%, rgb(var(--p-noche-rgb) / .2) 100%);
  /* texto sobre el velo, medido con el píxel más claro del mapa debajo (#F2F0FF) en el peor punto de
     su zona: velo 0,94 (0 a 36 %) y velo 0,86 (en el 36 %). */
  --acceso-texto: var(--p-noche-texto);        /* 14,06 (0,94) · 11,12 (0,86) */
  --acceso-texto-2: var(--p-noche-texto-2);    /*  8,95 · 7,08 */
  --acceso-accion: var(--p-accion-200);        /*  7,71 · 6,10 */
  --acceso-tarjeta: var(--p-blanco);           /* la hoja de día sobre la noche: 18,82 frente a la noche; dentro rige el día */
  --acceso-tarjeta-ancho: 440px;
  --acceso-tarjeta-radio: 12px;                /* --portada-radio-hoja */
  --acceso-tarjeta-sombra: 0 16px 48px rgb(0 0 0 / .42);
  --acceso-margen: 56px;                       /* --portada-margen-relato */
  --acceso-titulo: clamp(2rem, 3.2vw, 2.75rem);   /* Alegreya 500, como --portada-t-capitulo */
  /* el mapa del acceso: los mismos nombres que lee escena.js (copiar T de escena.js:72-78 tal cual) */
  --portada-mapa-fondo: var(--p-noche);
  --portada-mapa-sin: var(--p-noche-sin);
  --portada-mapa-horizonte: var(--p-noche-horizonte);
  --portada-mapa-sombra: var(--p-noche-sombra);
  --portada-mapa-luz: var(--p-noche-luz);
  --portada-mapa-borde: var(--p-noche-borde-mapa);
  --portada-mapa-realce: var(--p-blanco);
  --portada-len-0: var(--p-len-noche);
  --portada-len-1: var(--p-len-5);
  --portada-len-2: var(--p-len-4);
  --portada-len-3: var(--p-len-2);
  --portada-len-4: var(--p-len-0);

  /* ════════════ movimiento ════════════ */
  /* nivel 2 (Carbon, T-040 base/tokens-movimiento.css). Con movimiento reducido valen 0. */
  --duracion-instante: 70ms;
  --duracion-escalon: 20ms;
  --duracion-resalte: 110ms;
  --duracion-transicion: 240ms;
  --duracion-cuenta: 550ms;
  --curva-productiva: cubic-bezier(.2, 0, .38, .9);
  --curva-productiva-entrada: cubic-bezier(0, 0, .38, .9);
  --curva-productiva-salida: cubic-bezier(.2, 0, 1, .9);
  --curva-cuenta: cubic-bezier(.33, 1, .68, 1);   /* salida cúbica, la de Inicio.jsx:41: 1 − (1 − k)³ */

  /* nivel 3 · B «Mesa de trabajo» (los nombres que lee perfil() de T-040 base/nucleo.js:35-49).
     Entrada completa: eje 0-110, marcas 70-430 (con escalón), rótulos 310-420. Total ≤ 0,55 s. */
  --mov-entrada-eje: var(--duracion-resalte);                                         /* 110 */
  --mov-entrada-marca: var(--duracion-transicion);                                    /* 240 */
  --mov-entrada-rotulo: var(--duracion-resalte);                                      /* 110 */
  --mov-retardo-marca: var(--duracion-instante);                                      /*  70 */
  --mov-retardo-rotulo: calc(var(--duracion-instante) + var(--duracion-transicion));  /* 310 */
  --mov-escalon: var(--duracion-escalon);                                             /*  20 por fila */
  --mov-escalon-max: calc(var(--duracion-escalon) * 6);                               /* 120 como máximo */
  --mov-transicion: var(--duracion-transicion);                                       /* cambio de corte: 240 */
  --mov-reorden: var(--duracion-transicion);                                          /* y 240 más si cambia el orden */
  --mov-resalte: var(--duracion-resalte);                                             /* señalar: 110 */
  --mov-salida: var(--duracion-resalte);
  --mov-cuenta: var(--duracion-cuenta);                                               /* cifras que cuentan: 550 */
  --mov-panel: var(--duracion-transicion);                                            /* ficha lateral, pasos, avisos: 240 */
  --curva-entrada: var(--curva-productiva-entrada);
  --curva-transicion: var(--curva-productiva);
  --curva-salida: var(--curva-productiva-salida);
  --graf-atenuado: .28;                                                               /* lo que no se señala */

  /* mapa · la escala de la portada (escena.js:174-177, 248, 316) */
  --mapa-mov-color: 900ms;                     /* fill-color-transition y fill-extrusion-color-transition */
  --mapa-mov-altura: 1200ms;                   /* fill-extrusion-height-transition: crece desde 0 */
  --mapa-mov-vuelo: 2600ms;                    /* flyTo al cambiar de nivel (país → departamento → municipio) */
  --mapa-mov-vuelo-corto: 1200ms;              /* flyTo entre territorios del mismo nivel (trabajo repetido) */
  --mapa-vuelo-curva: 1.2;                     /* flyTo({ curve }) */
  --mapa-giro-paso: 12;                        /* grados por vuelta: rumbo en aumento (hacia la derecha) */
  --mapa-giro-tiempo: 9000ms;                  /* por vuelta, lineal: 1,33 °/s, 270 s por giro completo */
  --mapa-giro-espera: 400ms;                   /* del primer reposo al primer giro */
  --mapa-fundido: 600ms;                       /* del póster al mapa (--portada-fundido) */
}

/* ════════════ «Mi sector» (T-112, direccion.md §5, §7 y §10) ════════════
   La maqueta del departamento: cada municipio sube o se hunde respecto de la lámina (el nivel del
   departamento). MapLibre lee los colores y los números con getComputedStyle; los colores, medidos
   en direccion.md §5 (sobre blanco; bajo la lámina, el valor de después de la barra). */
:root {
  /* nivel 2 · semánticos */
  --dif-sobre: var(--dif-p4);                  /* por encima: 6,25:1 */
  --dif-bajo: var(--dif-n3);                   /* por debajo: 5,44:1; bajo la lámina 3,39:1 */
  --dif-igual: var(--p-gris-600);              /* al ras: 5,02:1; bajo la lámina 3,14:1 */
  --nivel-referencia: var(--p-agua);           /* la lámina de agua del departamento */
  --nivel-marco: var(--p-tinta-3);             /* el anillo exterior a la altura de la lámina */
  --sector-marca: var(--p-tinta);              /* contorno de 3 px del sector, con halo blanco de 6 */
  --sector-halo: var(--p-blanco);
  --ms-suelo: var(--p-dia-sutil);              /* municipio sin columna (sin dato o pendiente) */
  --ms-pendiente: var(--p-dia-pendiente);
  /* «Plano»: 7 clases de d (cortes ±0,05, ±5 y ±10 pp); la del centro es «igual» */
  --ms-plano-1: var(--dif-n3);
  --ms-plano-2: var(--dif-n2);
  --ms-plano-3: var(--dif-n1);
  --ms-plano-4: var(--p-gris-300);
  --ms-plano-5: var(--dif-p1);
  --ms-plano-6: var(--dif-p3);
  --ms-plano-7: var(--dif-p4);

  /* nivel 3 · componente */
  --maqueta-escala-pp: .006;                   /* f = 0,006·L metros por punto porcentual (L = lado corto) */
  --maqueta-zocalo-min-pp: 3;                  /* Z0 = f·(P + 3), P = mayor déficit redondeado a 5 */
  --maqueta-redondeo-pp: 5;
  --maqueta-espesor: .003;                     /* ε = 0,003·L: grosor de la lámina y del marco */
  --maqueta-igual-pp: .05;                     /* |d| < 0,05 pp se lee «0,0 pp»: al ras (Z0 − ε) */
  --maqueta-lamina-opacidad: .25;              /* máximo: al 30 % el jade cae a 3,09:1 */
  --maqueta-columna-opacidad: 1;
  --maqueta-inclinacion: 45;
  --maqueta-inclinacion-max: 60;
  --maqueta-rumbo: -18;
  --maqueta-giro-paso: 45;
  --maqueta-margen: 24 64 24 24;               /* arriba, derecha, abajo, izquierda; la columna más alta ya cuenta (QA-9) */
  --maqueta-alto: clamp(360px, calc(100vh - 320px), 600px);   /* deja a la vista la barra de fuente a 1366×768 */
  --maqueta-alto-movil: 360px;
  --maqueta-halo-ancho: 6;
  --maqueta-sector-ancho: 3;
  --maqueta-realce-ancho: 2.5;
  --maqueta-rotulos: 4;                        /* rótulos HTML del sector, como máximo */
  --escalera-ancho: 340px;
  --escalera-fila: 32px;
  --escalera-barra-max: .45;                   /* el mayor |d| de los 4 indicadores ocupa el 45 % de la pista */
  --escalera-valor: 4.5em;
  --escalera-pista: 3.5rem;                    /* la barra divergente de cada fila */
  --escalera-diferencia: 3.5em;
  --leyenda-maqueta-ancho: 260px;
  --ms-globo-desfase: 14px;
  --ms-globo-espera: 200;                      /* ms antes de cambiar de municipio: deja pasar el puntero al globo (1.4.13) */
  --ms-objetivo: 36px;                         /* objetivos con ratón (direccion.md §8); 44 en táctil */
  --ms-nivel-marca: 4px;                       /* la muestra del borde de la lámina en su rótulo */
}
@media screen and (max-width: 720px), screen and (pointer: coarse) {
  :root { --escalera-fila: var(--tactil); --ms-objetivo: var(--tactil); }
}
@media (max-width: 720px) {
  :root { --maqueta-margen: 48 112 16 16; --escalera-pista: 1fr; }   /* a la derecha, los controles en dos columnas; arriba, el rótulo del nivel */
}

/* Los --mov-* y las duraciones del mapa son tiempos registrados: getComputedStyle devuelve
   el valor calculado (p. ej. «0.31s») aunque lleven calc(). perfil() los pasa a ms. */
@property --mov-entrada-eje { syntax: "<time>"; inherits: true; initial-value: 0ms; }
@property --mov-entrada-marca { syntax: "<time>"; inherits: true; initial-value: 0ms; }
@property --mov-entrada-rotulo { syntax: "<time>"; inherits: true; initial-value: 0ms; }
@property --mov-retardo-marca { syntax: "<time>"; inherits: true; initial-value: 0ms; }
@property --mov-retardo-rotulo { syntax: "<time>"; inherits: true; initial-value: 0ms; }
@property --mov-escalon { syntax: "<time>"; inherits: true; initial-value: 0ms; }
@property --mov-escalon-max { syntax: "<time>"; inherits: true; initial-value: 0ms; }
@property --mov-transicion { syntax: "<time>"; inherits: true; initial-value: 0ms; }
@property --mov-reorden { syntax: "<time>"; inherits: true; initial-value: 0ms; }
@property --mov-resalte { syntax: "<time>"; inherits: true; initial-value: 0ms; }
@property --mov-salida { syntax: "<time>"; inherits: true; initial-value: 0ms; }
@property --mov-cuenta { syntax: "<time>"; inherits: true; initial-value: 0ms; }
@property --mov-panel { syntax: "<time>"; inherits: true; initial-value: 0ms; }

@media (max-width: 720px) {
  :root {
    --tarjeta-relleno: var(--e-4);
    --tarjeta-cifra: var(--tarjeta-cifra-movil);
    --mesa-hueco: var(--e-4);
    --mesa-relleno: var(--e-4);
  }
}

/* Movimiento reducido: todo a 0. El mapa no vuela (jumpTo), no crece (altura final de una vez)
   y no gira. El JS además comprueba matchMedia; con estos tokens en 0 no hay nada que animar. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duracion-instante: 0ms; --duracion-escalon: 0ms; --duracion-resalte: 0ms;
    --duracion-transicion: 0ms; --duracion-cuenta: 0ms;
    --mapa-mov-color: 0ms; --mapa-mov-altura: 0ms; --mapa-mov-vuelo: 0ms; --mapa-mov-vuelo-corto: 0ms;
    --mapa-giro-tiempo: 0ms; --mapa-giro-espera: 0ms; --mapa-fundido: 0ms;
  }
}

/* Impresión y Gotenberg (reporte, «Imprimir este mapa» y PDF): hoja blanca, sin sombras ni movimiento.
   Las figuras, el mapa y el sello de prueba llevan print-color-adjust: exact en su CSS de
   componente; el resto de los fondos claros no se imprime. */
@media print {
  :root {
    --fondo: var(--p-blanco);
    --lienzo: var(--p-blanco);
    --fondo-banda: var(--p-blanco);
    --fondo-sutil: var(--p-gris-50);           /* neutro al imprimir: texto 16,30 · texto-3 5,72 */
    --filete-suave: var(--p-gris-300);         /* un paso más oscuro: la fotocopia borra el 200 */
    --tarjeta-borde: 1px solid var(--p-gris-300);
    --tarjeta-sombra: none;
    --seg-pulgar-sombra: none;
    --acceso-tarjeta-sombra: none;
    --accion: var(--p-accion-700);             /* enlaces del PDF: 10,85 / blanco */
    --mapa-fondo: var(--p-blanco);
    --mapa-cielo: var(--p-blanco);
    --mapa-contexto: var(--p-gris-50);
    --duracion-instante: 0ms; --duracion-escalon: 0ms; --duracion-resalte: 0ms;
    --duracion-transicion: 0ms; --duracion-cuenta: 0ms;
    --mapa-mov-color: 0ms; --mapa-mov-altura: 0ms; --mapa-mov-vuelo: 0ms; --mapa-mov-vuelo-corto: 0ms;
    --mapa-giro-tiempo: 0ms; --mapa-giro-espera: 0ms; --mapa-fundido: 0ms;
  }
}

/* ══════════════════════════════════════════════════════════════════
   T-118 · la noche en el institucional (direccion.md §7 y §8; decisión 8 del responsable: opción A).
   La noche enmarca (dintel) y flota sobre los mapas (controles, globos, ayudas); el día informa.
   Sin primitivos nuevos: la familia --p-noche-* ya está en tokens.css (copia del visor).
   Contrastes WCAG 2.x medidos en §7.4.
   ══════════════════════════════════════════════════════════════════ */
:root {
  /* nivel 2: la noche como marco y flotante */
  --cromo-fondo: var(--p-noche);               /* 18,82 / blanco · 17,52 / mesa */
  --cromo-hover: var(--p-noche-3);             /* texto 12,88 */
  --cromo-texto: var(--p-noche-texto);         /* 15,98 */
  --cromo-texto-2: var(--p-noche-texto-2);     /* 10,18 */
  --cromo-texto-3: var(--p-noche-texto-3);     /*  6,56 */
  --cromo-accion: var(--p-accion-200);         /*  8,77 */
  --cromo-control: var(--p-noche-control);     /* borde de control: 3,79 / noche · 3,05 / hover */
  --cromo-filete: var(--p-noche-filete);       /*  1,57: solo decorativo */
  --cromo-senal: var(--p-dif-p2);              /* 11,06 */
  --foco-halo-noche: 0 0 0 5px var(--cromo-fondo);   /* el amarillo cubre 0-3 px; la noche, 3-5 px */

  /* nivel 3: dintel y flotantes (los componentes de hoy leen estos nombres) */
  --linea-fondo: var(--cromo-fondo);
  --linea-borde: transparent;                  /* la noche ya da 17,52 frente a la mesa */
  --dintel-logo: 28px;                         /* mgl-40.webp en el bloque de la marca */
  --dintel-marca-titulo: var(--inst-t-cuerpo); /* 16 px, peso 800 (R13: antes 15) */
  --dintel-marca-sub: var(--inst-t-meta);      /* 14 px (R13: antes 12,5) */
  --globo-fondo: var(--cromo-fondo);
  --globo-texto: var(--cromo-texto);
  --globo-texto-2: var(--cromo-texto-2);
  --tooltip-fondo: var(--cromo-fondo);
  --tooltip-texto: var(--cromo-texto);
  --tooltip-tenue: var(--cromo-texto-2);
  --mapa-control-fondo: var(--cromo-fondo);
  --mapa-control-hover: var(--cromo-hover);
  --mapa-control-borde: var(--cromo-control);
  --mapa-control-texto: var(--cromo-texto);
  --mapa-control-pulsado: var(--cromo-accion); /* con --mapa-control-pulsado-texto encima: 8,77 */
  --mapa-control-pulsado-texto: var(--cromo-fondo);

  /* nivel 2: la pieza-escuela (contrastes en §5.4); reportes.js los lee por nombre */
  --clases-sin: var(--dif-p4);                 /* sin clases en su lengua: el ocre de la casa */
  --clases-con: var(--cubierto);
  --clases-l1-otra: var(--p-dia-pendiente);
  --clases-sin-dato: var(--sin-dato-trazo);

  /* nivel 3: «Mi escuela» (§6.2) */
  --escuela-indice-ancho: 224px;
  --escuela-columna-max: 830px;
  --escuela-indice-alto: 40px;                 /* fila de enlaces del móvil */
  --escuela-indice-marca: 3px solid var(--accion);
  --idioma-filete: 1px solid var(--p-tinta);
  --escuela-codigos-max: 26rem;
  --escuela-mancuerna-nombre: 14rem;
  --escuela-mancuerna-valor: 7.5em;
  --escuela-tarea-dato: 11rem;
}

/* ── T-119 A · inicio de N1-N3 y créditos (dirección A §11.3). Solo nivel 3: todo sale de los
   semánticos de la casa. ── */
:root {
  /* inicio de N1-N3 (T-120 F2): la cadena y el contexto son .cifra; aquí solo lo propio del inicio */
  --contexto-mini: 116px;  --contexto-picto: 56px;  --mini-texto: 13px;  /* SVG a escala 1:1: 13 px dibujados (A3 dentro de una figura) */
  --figura-junta: 1px solid var(--texto);           /* filete de tinta entre tramos (1.4.11) */
  /* créditos (sustituyen los valores crudos de inst.css) */
  --creditos-logo-alto: 44px;  --creditos-logo-digebi-alto: 32px;
  --logo-mineduc-alto: 48px;   /* T-130: horizontal en positivo (118 × 48); cada línea del nombre mide unos 9 px y se lee */
  /* puertas y «Ver como» de Caracterización y Plazas con bono (§7.1, §7.2) */
  --puerta-mini-alto: 150px;  --puerta-mini-fondo: var(--fondo-sutil);
  --puerta-titulo: var(--inst-t-seccion);           /* 20 px, peso 800 (R13: antes 22) */
  --puerta-para: var(--inst-t-cuerpo);  --puerta-hay: var(--inst-t-meta);  --puerta-accion: var(--inst-t-cuerpo);   /* 16, 14 y 16 px */
  --puerta-hueco: var(--inst-ritmo-tarjetas);      /* 16 px entre las dos (QA: separación única entre hojas) */
  --ver-como-alto: var(--objetivo);                 /* 32 con ratón; 44 en táctil (regla de --objetivo) */
  --ver-como-radio: var(--radio-control);           /* 6 px */
  --ver-como-borde: 1px solid var(--borde-control);
  --ver-como-borde-activo: 1.5px solid var(--accion);
  --ver-como-fondo-activo: var(--accion-suave);  --ver-como-texto-activo: var(--accion-hover);
  /* lista de la G-23 en el móvil (§7.6) */
  --g23-barra-alto: 8px;
}
@media (max-width: 720px) {
  :root {
    --puerta-mini-alto: 120px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Modernización (T-120, 23-10; direccion-modernizacion.md §5.2 y §5.3).
   Un solo lenguaje para todo el institucional: hoja, cifra, estado, calificador y figura.
   Sin primitivos nuevos; nada de interfaz baja de 14 px (D-m7). Contrastes en §9.
   ══════════════════════════════════════════════════════════════════ */
:root {
  /* nivel 2 · papeles tipográficos: 8 tamaños; nada de interfaz baja de 14 px */
  --inst-t-meta: var(--t-nota);            /* 14 · fuente, periodo, notas, estados, ejes, ceja. El mínimo */
  --inst-t-cuerpo: var(--t-control);       /* 16 · cuerpo, rótulo de cifra, controles y tablas */
  --inst-t-tarjeta: 1.125rem;              /* 18 · título de tarjeta y de programa (700) */
  --inst-t-seccion: var(--t-h3);           /* 20 · H2 de sección (Sans 700) */
  --inst-t-titular: var(--t-h3);           /* 20 · titular de figura que concluye (Alegreya 500, D-53) */
  --inst-t-vista: 1.75rem;                 /* 28 · H1 de la vista (Sans 700); el nombre de la escuela, en Alegreya 500 */
  --inst-t-respuesta: clamp(1.75rem, 2.4vw, 2.25rem);  /* 28 → 32 a 1366 → 36 · la respuesta de la página (Alegreya 500) */
  --inst-t-cifra-l: var(--t-cifra);        /* 40 · cadena (800, tabular); 32 bajo 720 px (tokens.css) */
  --inst-t-cifra-m: 2rem;                  /* 32 · franjas, vistas y «Mi escuela» */
  --inst-t-cifra-s: 1.5rem;                /* 24 · temas y programas; también «Sin dato» en lugar de la cifra */
  --inst-i-meta: var(--i-nota);            /* 1.45 */
  --inst-i-cuerpo: var(--i-control);       /* 1.4 */
  --inst-i-titular: var(--i-h3);           /* 1.3 */
  --inst-i-cifra: 1.05;
  /* ritmo vertical (QA F0): una escala por papel en todo el institucional */
  --inst-ritmo-seccion: var(--e-6);        /* 32 · entre secciones con su H2 */
  --inst-ritmo-grupo: var(--e-5);          /* 24 · entre grupos de una sección: cabecera, filtros, franja, figuras */
  --inst-ritmo-tarjetas: var(--e-4);       /* 16 · entre hojas (tarjetas, cifras, figuras), en fila o en columna */
  --inst-ritmo-interior: var(--e-4);       /* 16 · dentro de una hoja, entre bloques */
  --inst-ritmo-interior-s: var(--e-2);     /*  8 · dentro de una hoja, entre piezas de un bloque */
  /* superficies */
  --inst-radio-hoja: 12px;                 /* hojas: cifra, figura, programa, tema, puerta y tabla de panorama */
  --inst-radio-interior: var(--radio-superficie);   /* 8 · cajas dentro de una hoja */
  --inst-ancho: 1280px;                    /* un solo ancho de contenido para todas las vistas (D10) */
  /* el dato y su color: un dominio, una rampa (M1) */
  --dato-lengua: var(--len-5);             /* lengua materna, clases en su lengua, texto en su idioma (llega) */
  --dato-escuela: var(--ofe-5);            /* modalidad, plazas con bono, PADEP, acompañamiento */
  --dato-no-llega: var(--dif-p2);          /* con --figura-junta (filete de tinta) */
  --dato-sin-saber: repeating-linear-gradient(135deg, var(--sin-dato-trazo) 0 1.3px, var(--superficie) 1.3px 6px);
  --dato-no-aplica: var(--fondo-sutil);    /* gris liso, siempre con el texto «no aplica» */
  --dato-referencia: var(--texto);         /* marca del territorio superior */
  --dato-pista: var(--fondo-sutil);
  /* en prueba (RF-31) */
  --prueba-marca: var(--aviso);            /* punto de 8 px del carril: 5.43 frente al blanco */

  /* nivel 3 · hoja. --hoja-relleno ya es el de la hoja del reporte (48); estos son los de las tarjetas */
  --hoja-radio: var(--inst-radio-hoja);
  --hoja-borde: var(--tarjeta-borde);      /* --filete: 1.46 / mesa, decorativo (la hoja no es un control) */
  --hoja-borde-activo: var(--borde-control);   /* hoja clicable al pasar: 5.02 / mesa */
  --hoja-sombra: var(--tarjeta-sombra);
  --hoja-relleno-tarjeta: var(--e-4);      /* 16 en cifras y tarjetas */
  --hoja-relleno-figura: var(--e-5);       /* 24 en figuras; 16 bajo 720 px */
  --hoja-pulsada: scale(.99);
  --boton-pulsado: scale(.97);             /* T-130: el botón cede al pulsarlo (con movimiento reducido, nada) */
  /* cifra (alto reservado = esqueleto exacto, ADR-0004; solo mientras carga) */
  --cifra-alto-l: 266px;  --cifra-alto-m: 248px;  --cifra-alto-s: 226px;
  --cifra-barra-alto: 8px;  --cifra-barra-radio: 4px;
  --cifra-marca: 2px;  --cifra-marca-alto: 16px;  --cifra-marca-halo: 0 0 0 1px var(--superficie);
  --cifra-punto: 8px;                      /* punto de dominio de la ceja */
  --cifra-hueco: var(--e-2);               /* entre las piezas de la cifra */
  --cifra-franja-min: 15rem;               /* ancho mínimo de cada cifra de una franja */
  /* hilo de la cadena (F2) */
  --hilo-nudo: 20px;  --hilo-linea: 2px solid var(--texto-3);  --hilo-corte: 2px dashed var(--pendiente-trazo);
  --hilo-alto: 40px;
  /* estado (ADR-0016 v2 §8) y calificador */
  --estado-alto: var(--etiqueta-alto);  --estado-radio: var(--radio-etiqueta);  --estado-texto: var(--inst-t-meta);
  --estado-borde: 1px solid var(--texto);
  --calificador-radio: var(--inst-radio-hoja);  --calificador-fondo: var(--fondo-sutil);  --calificador-texto: var(--texto-2);
  --calificador-borde: 1px solid var(--pendiente-trazo);   /* decorativo: no es un control */
  /* figura */
  --figura-titular-fuente: var(--fuente-titulo);  --figura-titular-peso: 500;  --figura-titular-tam: var(--inst-t-titular);
  --figura-pie-hueco: var(--e-4);          /* del cuerpo al pie: interior de la hoja (16) */
  --figura-col-4: span 4;  --figura-col-6: span 6;  --figura-col-12: span 12;
  /* cabecera de vista y filtros en píldora (F1) */
  --cabecera-hueco: var(--e-3);
  --filtro-alto: 36px;
  --filtro-borde: 1px solid var(--borde-control);  --filtro-radio: var(--radio-control);
  --filtro-aplicado-fondo: var(--accion-suave);  --filtro-aplicado-texto: var(--accion-hover);
  /* carril */
  --carril-item-alto-moderno: 42px;  --carril-prueba-punto: 8px;
  /* tabla de panorama (F2) */
  --panorama-fila: 28px;  --panorama-col-nombre: 158px;  --panorama-barra-alto: 8px;
  --panorama-fila-referencia: var(--fondo-sutil);
  --panorama-valor: 3.8em;                 /* el valor en texto, pegado a la barra («100.0 %» cabe en 14 px tabular) */
  --panorama-trama-ancho: 16px;            /* trama de «sin nómina» o «sin dato» (§4.3) */
  --panorama-tabla-min: 760px;             /* por debajo, «Ver por» y la lista con barras (§4.3, a 390) */
  --panorama-ver-alto: var(--tactil);      /* 44: los enlaces de «Ver por» */
  --panorama-lista-valor: 4.5em;
  --panorama-th-nombre: calc(2em * var(--inst-i-meta) + var(--e-0));   /* dos líneas de nombre en cada encabezado: todos a la misma altura (QA F2, 8) */
  --panorama-marca-halo: calc(var(--cifra-marca) + 2px);   /* el halo de 1 px a cada lado de la marca (A14) */
  /* hilo y programas del inicio (F2) */
  --inicio-canal: var(--e-5);              /* 24 entre las hojas del inicio, como el boceto (QA F2, 10); 16 bajo 720 px */
  --hilo-texto: var(--inst-t-meta);
  --hilo-movil-sangria: calc(var(--hilo-nudo) + var(--e-3));   /* a 720 px o menos: los nudos a la izquierda */
  /* tabla con barras (G-23) */
  --tabla-barras-barra-min: 40%;           /* la columna de la barra nunca baja del 40 % del ancho */
  --tabla-barras-fila: 28px;
  --tabla-barras-valor: 5.5em;             /* el valor, pegado a la barra */
}
@media (max-width: 720px), (pointer: coarse) {
  :root { --filtro-alto: var(--tactil); --carril-item-alto-moderno: var(--tactil); }
}
@media (max-width: 720px) {
  :root { --hoja-relleno-figura: var(--e-4); --inicio-canal: var(--e-4); }
}

/* ══════════════════════════════════════════════════════════════════
   T-120 · programas de la DIGEBI en la Mesa, la ficha y «Mi escuela» (direccion.md §11 y
   direccion-modernizacion.md §5.6). Sin primitivos nuevos. Contrastes en contrastes-t120.txt.
   ══════════════════════════════════════════════════════════════════ */
:root {
  /* nivel 2 · «¿llega en su idioma?» */
  --dotacion-con: var(--cubierto);          /* hay texto en su idioma (len-5): cifra en blanco 6.78 */
  --dotacion-sin: var(--dif-p2);            /* no hay texto en su idioma: cifra en tinta 10.49; filete de tinta */
  --dotacion-fuera: var(--fondo-sutil);     /* P1, fuera del catálogo (D-071): borde punteado 3.49 */
  --padep-coincide: var(--len-5);           /* declara el idioma que predomina en su municipio */
  --padep-otro: var(--len-2);               /* otro idioma maya: filete de tinta; 3.10 frente a len-5 */
  --acomp-con: var(--ofe-5);                /* escuela bilingüe acompañada: cifra en blanco 6.30 */
  --acomp-sin: var(--ofe-0);                /* bilingüe sin acompañamiento: filete; tinta 15.69 */
  --acomp-sin-registro: var(--neutro-1);    /* acompañada sin oferta registrada: borde punteado de tinta */
  --programa-mujeres: var(--sexo-ninas);    /* neutro-5: cifra en blanco 8.21 */
  --programa-hombres: var(--sexo-ninos);    /* neutro-2: cifra en tinta 7.57; 3.48 entre los dos tramos */
  --programa-tramo-1: var(--ofe-5);         /* profesorado, preprimaria y primaria (partida de la franja) */
  --programa-tramo-2: var(--ofe-2);
  --programa-neutro-1: var(--neutro-4);     /* párvulos y primaria en la franja de textos */
  --programa-neutro-2: var(--neutro-2);
  --programa-tasa: var(--ofe-3);            /* PADEP por cada 1,000 niños (P1) */

  /* nivel 3 · pestañas de la Mesa (MOJ Sub navigation; el subrayado no se desliza) */
  --espacios-alto: var(--tactil);           /* 44 */
  --espacios-relleno: 0 var(--e-4);
  --espacios-texto: var(--inst-t-cuerpo);   /* 16 (modernización §6.1) */
  --espacios-subrayado: 3px;
  --espacios-subrayado-color: var(--accion);   /* 7.58 frente a la mesa */
  --espacios-filete: 1px solid var(--filete);  /* decorativo */
  --espacios-activo: var(--accion-hover);   /* 10.10 frente a la mesa */
  --espacios-icono: 16px;
  /* cabecera de la Mesa y filtros en píldora (E2, E6) */
  --pildora-filtro-relleno: 0 var(--e-3);
  --pildora-filtro-radio: var(--radio-control);
  /* enunciado (E3) y pictograma de 10 × 10 */
  --enunciado-frase-ancho: 46ch;
  --pictograma-celda: 9px;  --pictograma-hueco: 2px;
  --pictograma-ancho: 108px;               /* 10 × 9 + 9 × 2 */
  --enunciado-metodo-ancho: 72ch;
  --definicion-ancho: min(22rem, 80vw);  --definicion-rotulo: 8.5em;
  --acopio-contacto-min: 14rem;
  --fuentes-boton-alto: 40px;
  --objetivo-minimo: 24px;                 /* 2.5.8: un enlace de texto dentro de la ceja de la cifra */
  --espacio-g23-barra: 26%;  --espacio-g23-nombre-min: 12rem;  --espacio-g23-valor: 3.5em;  --espacio-g23-fila: 26px;                /* en la columna de 538 px, las dos barras caben con el nombre */
  --pictograma-filete: 1px solid var(--texto);
  /* G-33 matriz idioma × grado y tira de grados */
  --matriz-celda-alto: 30px;  --matriz-celda-ancho-min: 64px;  /* 30: con los 17 idiomas reales, textos queda con holgura bajo 3,700 px (QA 7) */
  --matriz-celda-compacta-ancho: 28px;  --matriz-celda-compacta-alto: 22px;
  --matriz-junta: 2px solid var(--superficie);
  --matriz-filete: 1px solid var(--texto);  /* en las celdas claras (1.4.11) */
  --matriz-fuera-borde: 1px dashed var(--pendiente-trazo);
  --matriz-cifra: var(--inst-t-meta);       /* 14, tabular */
  --matriz-muestra: 12px;
  --tira-celda-min: 36px;  --tira-celda-alto: 40px;
  /* G-34 unidades */
  --unidad-lado: 24px;  --unidad-hueco: 6px;  --unidad-filete: 1px solid var(--texto);
  --unidades-nombre-min: 8rem;
  /* bloque de programas y acopio */
  --programa-relleno: var(--e-4);  --programa-radio: var(--inst-radio-interior);
  --programa-borde: 1px solid var(--filete);
  --programa-chip-alto: 28px;
  --programa-fila-alto: 58px;
  --acopio-fondo: var(--fondo-sutil);
  /* G-23 de los espacios: la línea del país en la barra */
  --g23-referencia: 1.5px dashed var(--texto);
  --espacio-mapa-alto: 500px;  --espacio-lienzo-min: 320px;  /* selector + lienzo + leyenda: unos 500 px, como el boceto */
  --pista-desplazamiento: 3rem;  /* lo que se desvanece en el borde de una tabla que sigue (QA 8) */  --espacio-mapa-alto-movil: 300px;
}

/* T-134: en táctil los enlaces y resúmenes sueltos llegan a 44 px; solo bajan a 24 los diseñados así (sello «Fuentes», enlace de cifra, filas de gráfica). Va después de la declaración de arriba. */
@media (max-width: 720px), (pointer: coarse) {
  :root { --objetivo-minimo: var(--tactil); }
}