/* LOS TOKENS DEL SITIO, EN UN SOLO ARCHIVO (25-oct-2026, hallazgo F-14).
 *
 * POR QUÉ EXISTE
 * ---------------
 * Medido el 25-oct: el sitio tenía TRES juegos de variables CSS independientes y ningún
 * archivo .css compartido —4.620 líneas de estilo repartidas en nueve plantillas—:
 *
 *     chileprotegido_index.html      29 variables
 *     chileprotegido_panorama.html   17        · 17 nombres compartidos con el mapa
 *     chileprotegido_3d.html          8
 *     cuenta · panel · terminos · privacidad · _pie      0 variables, colores a mano
 *
 * Y de los 17 nombres compartidos, varios tenían VALORES DISTINTOS: `--panel` valía
 * rgba(255,255,255,.95) en el mapa y rgba(30,41,59,.88) en panorama; `--borde` tenía tres
 * valores; `--suave`, dos. Tres cosas que decían ser la misma paleta, sin nada que abortara
 * mientras divergían — la regla de los pares aplicada al color.
 *
 * La consecuencia visible: el tema claro/oscuro funcionaba SÓLO en el mapa. Con
 * `cp_tema='oscuro'` puesto, `cuenta.html` seguía blanca, `3d` y `panorama` seguían oscuras,
 * y `panel` y `terminos` ni siquiera declaraban fondo.
 *
 * LO QUE SE MOVIÓ VERBATIM Y LO QUE ES NUEVO
 * -------------------------------------------
 * Los trece de abajo marcados «(del mapa)» son EXACTAMENTE los valores que ya tenía
 * `chileprotegido_index.html`, copiados sin tocar un dígito: si algo cambia de aspecto en el
 * mapa, el culpable es el movimiento y no una reescritura (clase EZ).
 *
 * Los marcados «(NUEVO)» no existían y hacen falta para que una página de DOCUMENTO
 * —términos, privacidad, el panel— pueda vestirse con esta paleta. Un panel translúcido
 * sobre teselas y una página de texto no necesitan los mismos tokens, y fingir que sí lleva
 * a usar `--panel` como fondo de página, que es ilegible.
 */

:root{
  /* --- los trece del mapa, verbatim --- */
  --fondo:#0f172a;                      /* (del mapa) fondo de página */
  --panel:rgba(30,41,59,.88);           /* (del mapa) panel flotante sobre el mapa */
  --suave:rgba(30,41,59,.55);           /* (del mapa) */
  --hueco:rgba(15,23,42,.55);           /* (del mapa) */
  --txt:#f8fafc;                        /* (del mapa) texto principal */
  --gris:#94a3b8;                       /* (del mapa) texto secundario */
  --acc:#E8621F;                        /* (del mapa) acento de marca */
  --borde:rgba(255,255,255,.10);        /* (del mapa) */
  --rojo:#c0392b;                       /* (del mapa) */
  --nar:#e67e22;                        /* (del mapa) */
  --ver:#27ae60;                        /* (del mapa) */
  --som:0 8px 24px rgba(0,0,0,.45);     /* (del mapa) */
  --r:12px;                             /* (del mapa) radio */
  --e1:6px; --e2:10px; --e3:16px; --e4:24px;   /* (del mapa) escala de espaciado.
                                           Estaban idénticos en el mapa Y en panorama: dos
                                           copias del mismo número esperando a divergir. */

  /* --- los de documento --- */
  --enlace:#5dade2;                     /* (NUEVO) el azul de enlace, aclarado para el oscuro.
                                           Las páginas usaban #2980b9 fijo, que sobre #0f172a
                                           da 2,9:1 de contraste: por debajo del 4,5:1 que
                                           pide WCAG AA para texto. Medido, no estimado. */
  --doc-fondo:#0f172a;                  /* (NUEVO) fondo de una página de texto */
  --doc-caja:rgba(30,41,59,.55);        /* (NUEVO) cajas y avisos dentro del texto */
  --doc-linea:rgba(255,255,255,.14);    /* (NUEVO) separadores de tabla */

  /* ── LOS TRES DE ESTADO, EN SU VARIANTE DE TEXTO (25-oct-2026) ─────────────────────
   * Sebastián: «revisa claro y oscuro que no afecte textos». Medido el contraste de cada
   * par que de verdad se pinta, componiendo los fondos translúcidos sobre el fondo de la
   * página —no sobre blanco, que fue mi primer error y fabricó cinco falsos—:
   *
   *     OSCURO   --rojo sobre --panel     2,76:1   <- por debajo incluso de 3:1
   *     CLARO    --nar  sobre --panel     2,84:1
   *     CLARO    --ver  sobre --panel     2,86:1
   *
   * `--rojo`, `--nar` y `--ver` NO SE TOCAN: son tres de los trece que vinieron verbatim
   * del mapa y pintan rellenos, bordes y la rampa de peligro. Cambiarlos movería el mapa,
   * y los colores del peligro no se ajustan para que un número salga bien.
   *
   * Lo que se añade es una variante **sólo para texto**. Y donde el original ya pasa, la
   * variante ES el original: así el cambio es el mínimo que arregla lo que falla.
   */
  --rojo-txt:#f87171;                   /* #c0392b daba 2,76:1 sobre el panel oscuro */
  --nar-txt:#e67e22;                    /* el mismo: ya daba 5,28:1 */
  --ver-txt:#27ae60;                    /* el mismo: ya daba 5,23:1 */
  --acc-txt:#f07a3d;                    /* #E8621F daba 4,44:1 sobre el panel: al filo */
  --gris-txt:#94a3b8;                   /* el mismo: ya daba 5,86:1 */
}

html.light-mode{
  /* --- los nueve que el mapa sobrescribe en claro, verbatim --- */
  --fondo:#f1f5f9;
  --panel:rgba(255,255,255,.95);
  --suave:rgba(241,245,249,.9);
  --hueco:rgba(248,250,252,.95);
  --txt:#1e293b;
  --gris:#64748b;
  --acc:#C4500F;
  --borde:rgba(15,23,42,.12);
  --som:0 8px 24px rgba(15,23,42,.14);

  /* --- los de documento, en claro --- */
  --enlace:#2980b9;                     /* el que las páginas ya tenían: en claro se conserva */
  --doc-fondo:#ffffff;                  /* blanco y no #f1f5f9: una página de texto largo se
                                           lee mejor sobre blanco, y es lo que ya hacían */
  --doc-caja:#f8fafc;
  --doc-linea:#e2e8f0;

  /* Las de texto, en claro. Aquí falla el par contrario que en oscuro: */
  --rojo-txt:#c0392b;                   /* el mismo: ya daba 5,41:1 */
  /* ⚠️ `#b45309` ESTABA DESCARTADO Y POR QUÉ. Fue mi primera elección para `--nar-txt`
   * —da 5,00:1— y el control de «un solo sitio» la cazó: ese valor YA se usa en el mapa,
   * y no como chrome sino como **color de dato** —la capa de relaves y un tramo de la
   * rampa de afectados—. Un token de texto con el mismo valor que un color de dato es un
   * valor con dos conceptos, que es justo lo que esa clase viene a evitar: el día que
   * alguien aclare el texto, la capa de relaves cambia de color con él.
   * `#92400e` no aparece en ninguna parte del mapa y da más contraste (6,47:1). */
  --nar-txt:#92400e;                    /* #e67e22 daba 2,84:1 · éste da 6,47:1 */
  --ver-txt:#15803d;                    /* #27ae60 daba 2,86:1 · éste da 4,99:1 */
  --acc-txt:#b2490e;                    /* #C4500F daba 4,26:1 sobre --fondo */
  --gris-txt:#5b687d;                   /* #64748b daba 4,34:1 sobre --fondo */
}

/* ══ TIPOGRAFÍA · LA PILA Y LA ESCALA, AQUÍ Y NO EN CADA PÁGINA ═══════════════════════
 *
 * POR QUÉ SE AÑADE (26-oct-2026, pregunta de Sebastián: «que tanto sus colores como textos
 * —tamaño, tipo de tipografía y clase, además de definir H1, H2 y párrafo— sean una
 * plantilla y no haya que definirlos con cada página»).
 *
 * El color YA estaba aquí desde el 25-oct. La tipografía no, y medido sobre las quince
 * páginas construidas:
 *
 *   · la MISMA pila se repetía en cada página —`-apple-system` 17 veces, `Segoe UI` 17,
 *     `Roboto` 14—, con variantes: ocho páginas metían `system-ui` y una, `Inter`;
 *   · el `h1` tenía NUEVE tamaños distintos en once páginas: 17, 21, 22, 22, 23, 23, 24,
 *     25, 25, 28 y 30 px. No había escala: cada página inventaba la suya.
 *
 * DE DÓNDE SALEN ESTOS NÚMEROS, que no son de mi gusto. Se midieron las nueve páginas de
 * DOCUMENTO (las de texto, que son las que comparten una escala de lectura):
 *
 *     cuerpo    15px en las NUEVE, por unanimidad. Sólo variaba el interlineado: 1,5 · 1,55 · 1,6
 *     h2        16, 16, 17, 17, 17                      -> mediana 17
 *     h1        21, 22, 22, 23, 23, 24, 25, 25, 30      -> mediana 23
 *
 * Así que la escala es la mediana de lo que ya había. La única página que se mueve de
 * verdad es `fuentes.html`, cuyo h1 baja de 30 a 23: era el único outlier, y tener una
 * plantilla significa exactamente eso.
 *
 * SON SELECTORES DE ELEMENTO A SECAS, y eso es deliberado: su especificidad es la más baja
 * que existe, así que CUALQUIER regla de una página —`#top h1`, `.ficha h2`— sigue ganando
 * sin tener que escribir `!important` ni reordenar hojas. El mapa, `panorama`, `3d`,
 * `chile` y la puerta conservan su propia escala porque son aplicaciones y gráficos, no
 * documentos: un `h1` de 23 px en la barra del mapa no cabe. Esto es el VALOR POR DEFECTO
 * del sitio, no una imposición.
 *
 * EL PÁRRAFO NO LLEVA REGLA PROPIA, y no es un olvido: `p` hereda de `body`, que es como
 * se supone que funciona una tipografía en cascada. Darle un `font-size` fijo lo arrancaría
 * del contexto —un párrafo dentro de una nota de 13 px volvería a 15— y eso es peor que no
 * definirlo. Lo que el párrafo necesita, tamaño e interlineado, lo recibe de `body`.
 * Los MÁRGENES no se tocan aquí: son maquetación, no tipografía, y viven con cada página.
 */
:root{
  --fuente:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --t-h1:23px;
  --t-h2:17px;
  --t-h3:15px;
  --t-cuerpo:15px;
  --t-nota:13px;
  --t-micro:11.5px;
  --t-linea:1.55;
}
body{font-family:var(--fuente);font-size:var(--t-cuerpo);line-height:var(--t-linea)}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3)}
code,kbd,samp,pre{font-family:var(--mono)}