/* Hallmark · tokens · Diccionario Geográfico de Colombia
 * Sistema del rediseño. Todo color, tipografía, espacio y tiempo sale de aquí.
 *
 * Los tokens van en OKLCH: es perceptualmente uniforme, así que bajar la luminosidad
 * un 10 % se ve como un 10 % más oscuro en cualquier tono. En hexadecimal no pasa eso
 * y por eso las escalas hechas a ojo salen desparejas.
 * Al lado de cada color base va el hexadecimal del que se derivó, para poder rastrearlo.
 */

:root {

  /* ── Marca del Estado ────────────────────────────────────────────────────
     Barra GOV.CO y filo tricolor. El amarillo es además, desde el 2 de
     septiembre de 2026 y a petición del usuario, el amarillo de interfaz de todo
     el sitio: --amarillo apunta aquí. */
  --co-azul:      #0055a2;
  --co-amarillo:  #ffd000;
  --co-rojo:      #f3193d;
  --govco-azul:   #3366cc;

  /* ── Color ───────────────────────────────────────────────────────────────
     Cuatro familias, tomadas de la línea gráfica ilustrada del rediseño —las
     cuatro láminas de Lieneagaf—, no del manual antiguo. El azul manda: es
     fondo y estructura. El amarillo es el acento único de acción. Verde y
     coral se quedan en la ilustración y en los filetes de sección, nunca en
     un botón: en una interfaz, verde y rojo ya significan "correcto" y
     "error", y usarlos de adorno confunde.

     El azul del sistema pasó del #0055a2 institucional al cobalto #2B4FD1 de
     las láminas. El institucional no desaparece: sigue en --co-azul, que es
     donde le corresponde estar, en la marca del Estado. */

  /* Azul cobalto — del #2B4FD1 de la línea gráfica */
  --azul-900:  oklch(25.7% 0.047 261);  /* #16233A — tinta profunda, fondos y pie */
  --azul-800:  oklch(34.7% 0.046 261);  /* #2C3A52 — texto sobre crema */
  --azul-700:  oklch(40.7% 0.179 266.6);  /* #1E3AA8 — cobalto hundido, enlace señalado */
  --azul-600:  oklch(48.8% 0.204 266.5);  /* #2B4FD1 — el cobalto de las láminas */
  --azul-300:  oklch(78% 0.06 264);     /* texto secundario sobre azul */
  --azul-100:  oklch(93% 0.02 264);     /* fondo de realce */

  /* Amarillo — acento de acción, en todo el sitio: botones, cifras, foco,
     chips, marcas y guiones. Se cambia aquí y no en cada hoja para que siga
     siendo un solo amarillo.
     Fue el #F5C544 de las láminas (oklch(84.4% 0.15 87.7)). El 2 de septiembre
     de 2026 pasó al de la bandera, #FFD000, y el mismo día el usuario lo vio
     demasiado intenso en el botón del héroe y en las cifras: se queda a medio
     camino entre los dos, con el tono de la bandera y menos saturación. El
     filo tricolor sigue en --co-amarillo, que no se toca. */
  --amarillo:      oklch(86.5% 0.165 90);   /* ≈ #FFD43A */
  --amarillo-alto: #b6970e;                 /* señalado: más hondo, fijado por el usuario */

  /* Verdes — de la ilustración; tres profundidades de vegetación */
  --verde-hondo: oklch(42.43% 0.0803 168.4);   /* #0E5C46 */
  --verde-medio: oklch(55% 0.13 152);
  --verde-lima:  oklch(74% 0.16 130);

  /* Coral — el de las nubes de las láminas */
  --coral:  oklch(68.0% 0.182 30.6);       /* #F4634E */
  --rojo:   oklch(57% 0.22 22);          /* solo estados de error */

  /* Neutros — cálidos, no grises puros: un gris de cero croma junto a tanto
     azul se lee sucio. El papel del rediseño es crema, no blanco. */
  --papel:      oklch(99.4% 0.008 91);   /* #FFFDF7 — el fondo de la página */
  --papel-2:    oklch(95.3% 0.026 90);   /* #F6EFDC — crema; también texto sobre azul */
  --papel-3:    oklch(91.8% 0.019 94);   /* #E8E4D6 */
  --tinta:      oklch(25.7% 0.047 261);  /* #16233A */
  --tinta-suave:oklch(44.5% 0.035 264);  /* #4A5468 */

  /* Roles semánticos. Los componentes usan estos, no los de arriba. */
  --color-fondo:        var(--papel);
  --color-fondo-crema:  var(--papel-2);
  --color-fondo-hondo:  var(--azul-900);
  --color-cobalto:      var(--azul-600);
  --color-texto:        var(--tinta);
  --color-texto-suave:  var(--tinta-suave);
  /* Sobre azul no va blanco puro: el crema baja el contraste al rango cómodo
     de lectura larga sin perder el 4.5:1 que exige WCAG AA. */
  --color-texto-claro:  var(--papel-2);
  --color-acento:       var(--amarillo);
  --color-enlace:       var(--azul-600);
  --color-enlace-fuerte:var(--azul-700);
  --color-borde:        oklch(90.3% 0.023 93);   /* #E4DFCE */
  --color-borde-firme:  oklch(81.7% 0.024 91);   /* #C9C3B2 */
  --color-foco:         var(--amarillo);
  --color-error:        var(--rojo);

  /* ── Escalas translúcidas ────────────────────────────────────────────────
     Crema sobre azul y cobalto sobre ilustración. Van escritas con el valor
     completo y no derivadas con oklch(from …): la sintaxis de color relativo
     es bastante más nueva que el resto del sistema, y si el navegador no la
     entiende el degradado entero queda inválido —lo que dejaría el texto del
     héroe sobre la lámina, sin velo y sin contraste—. Un color con alfa, en
     cambio, cae dentro del mismo OKLCH que ya usa todo el archivo. */
  --crema-90: oklch(95.3% 0.026 90 / 0.90);   /* bajadas sobre azul */
  --crema-85: oklch(95.3% 0.026 90 / 0.85);   /* créditos del héroe */
  --crema-75: oklch(95.3% 0.026 90 / 0.75);   /* pie de cifra */
  --crema-50: oklch(95.3% 0.026 90 / 0.50);   /* contorno de botón */
  --crema-38: oklch(95.3% 0.026 90 / 0.38);   /* guion en reposo */
  --crema-18: oklch(95.3% 0.026 90 / 0.18);   /* filete entre cifras */
  --crema-14: oklch(95.3% 0.026 90 / 0.14);   /* fondo de botón señalado */

  /* Tinta translúcida. Existe por un motivo concreto: en escritorio el velo del
     héroe es horizontal y se vuelve transparente a partir del 66 %, así que el
     crédito de la lámina cae sobre la ilustración desnuda. Sobre la nieve del
     Nevado del Ruiz o el agua clara de la Ciénaga, un crema translúcido no se
     lee. Al 72 % sobre blanco esto compone un #3C4555, que deja el texto crema
     en 8,3:1 —muy por encima del 4,5:1 de WCAG AA— y sobre lámina oscura sube
     todavía más. */
  --tinta-72: oklch(25.7% 0.047 261 / 0.72);

  --cobalto-94: oklch(48.8% 0.204 266 / 0.94);
  --cobalto-75: oklch(48.8% 0.204 266 / 0.75);
  --cobalto-55: oklch(48.8% 0.204 266 / 0.55);
  --cobalto-50: oklch(48.8% 0.204 266 / 0.50);
  --cobalto-15: oklch(48.8% 0.204 266 / 0.15);
  --cobalto-00: oklch(48.8% 0.204 266 / 0);

  --sombra-tarjeta: 0 18px 36px -24px oklch(25.7% 0.047 261 / 0.5);

  /* ── Tipografía ──────────────────────────────────────────────────────────
     Dos familias. Bricolage Grotesque para titular: tiene carácter sin caer
     en la geométrica de siempre. Public Sans para texto: se diseñó para
     sitios públicos, con formas abiertas y buena lectura en tamaños chicos.
     Las dos son de licencia libre (SIL OFL) — a diferencia de Gill Sans, que
     usa el sitio actual y es de licencia comercial de Monotype. */
  --fuente-titular: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --fuente-texto:   "Public Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* La del cartel: solo para los dos enunciados a toda página —el héroe y el
     llamado a aportar—. Poppins es geométrica y ancha, y a 78 px se planta de
     un modo que Bricolage no.
     El diseño traía además Inter para las bajadas de esos dos bloques. Se
     descartó: sostenía dos párrafos, costaba una cuarta familia en la petición
     de fuentes, y es de las caras que más se repiten hoy —tanto que ya no
     distingue nada—. Esas dos bajadas van en Public Sans, que ya está cargada.
     Una sola familia añadida, y solo donde cambia el carácter. */
  --fuente-cartel: Poppins, var(--fuente-titular);

  /* Escala tipográfica. Razón 1,25 en móvil, abriéndose a 1,333 en pantalla
     grande vía clamp(): en un teléfono los saltos grandes obligan a partir
     los títulos en demasiadas líneas. */
  --texto-xs:  0.78rem;
  --texto-sm:  0.875rem;
  --texto-md:  1rem;
  --texto-lg:  clamp(1.125rem, 0.4vw + 1.05rem, 1.25rem);
  --texto-xl:  clamp(1.35rem, 1vw + 1.1rem, 1.75rem);
  --texto-2xl: clamp(1.7rem, 2vw + 1.2rem, 2.5rem);
  --texto-3xl: clamp(2.1rem, 4vw + 1.2rem, 3.75rem);

  --peso-normal: 400;
  --peso-medio:  500;
  --peso-fuerte: 700;
  --peso-negro:  800;

  --alto-linea-titular: 1.08;
  --alto-linea-texto:   1.6;

  /* ── Espacio ─────────────────────────────────────────────────────────────
     Escala de 4 pt. El sitio actual no tiene ninguna: los márgenes son
     valores sueltos y por eso nada alinea con nada. */
  --esp-1:  0.25rem;
  --esp-2:  0.5rem;
  --esp-3:  0.75rem;
  --esp-4:  1rem;
  --esp-6:  1.5rem;
  --esp-8:  2rem;
  --esp-12: 3rem;
  --esp-16: 4rem;
  --esp-24: 6rem;

  /* 75rem = 1200 px. Una sola columna centrada para todo: cabecera, héroe,
     franjas y pie comparten esta vertical, y por eso el logotipo alinea con el
     título de cada sección.

     Estuvo en 1440 y luego en 1920 para que la cabecera llegara a los cantos
     como en el marco del boceto. Se vuelve a 1200 a propósito: el boceto es un
     lienzo de 1440 y llevar su distribución literal a un monitor real deja el
     cuerpo demasiado ancho —el ojo pierde el renglón al saltar de línea, y la
     página se lee como una hoja de cálculo, no como una publicación.

     Un boceto describe proporciones, no medidas absolutas. */
  --ancho-maximo:  85rem;
  --ancho-lectura: 38rem;   /* ~65 caracteres */

  /* Las dos medidas de arriba, pero para el cromo del Estado, y en píxeles.
     El cromo tiene que caer en la misma vertical en todas las páginas: es la marca,
     y una marca que se corre al cambiar de sección se lee como dos sitios distintos.
     Con rem no se puede: /entidades y la ficha llevan la escala tipográfica fluida
     del prototipo —html{font-size:clamp(16px, 0.85rem + 0.42vmin, 22px)}— y el rem es
     siempre del elemento raíz, así que las mismas 85rem valían 1.360 px en la portada
     y 1.542 en el selector.
     Son el reflejo exacto de --ancho-maximo y --sangria con el rem de fábrica, y hay
     que moverlas con ellas: si el sitio cambia de ancho, estas dos también. */
  --ancho-cromo:   1360px;                    /* 85rem × 16 */
  --sangria-cromo: clamp(20px, 2.5vw, 40px);  /* --sangria × 16 */

  /* La sangría lateral, la misma para la cabecera, las franjas y el pie: si cada
     bloque elige la suya, los cantos dejan de alinear. 40 px en escritorio, como
     el boceto; 20 en un teléfono, donde 40 se come la pantalla. */
  --sangria: clamp(1.25rem, 2.5vw, 2.5rem);

  /* Hasta dónde crece la lámina del héroe. 120rem = 1920 px: por debajo de eso
     va a sangre, como en el boceto, y por encima se planta y deja que el
     cobalto del fondo ocupe el resto.
     96rem = 1536 px, que es EXACTAMENTE el ancho de las láminas. Plantada ahí,
     el navegador nunca la amplía: la pinta píxel a píxel y el degradado alarga
     la escena con el cobalto del fondo.
     Cuando existan láminas de 3840 este tope sube y la escena se ensancha. Es
     el único número que hay que cambiar. */
  --heroe-lamina-max: 96rem;

  /* ── Radio y trazo ───────────────────────────────────────────────────── */
  --radio-sm:  4px;
  --radio-md:  12px;    /* botones */
  --radio-lg:  20px;    /* tarjetas */
  --radio-pastilla: 999px;
  --trazo:     1px solid var(--color-borde);

  /* ── Movimiento ──────────────────────────────────────────────────────────
     Tres duraciones y tres curvas, nada más. La del ambiente es larguísima a
     propósito: un movimiento que se nota es un movimiento que distrae. */
  --dur-rapida:   140ms;
  --dur-media:    260ms;
  --dur-ambiente: 24s;
  /* Vuelta completa del carrusel del héroe: 5 s por lámina. Menos se siente
     inquieto detrás de un texto que hay que leer; más y la última lámina no la
     ve nadie.
     Son 8 láminas × 5 s. Lo que se conserva al entrar o salir una lámina es el
     segundo por lámina, no la vuelta entera: el ritmo es lo que se percibe, la
     duración total no la mide nadie.

     Historial: eran 7 a 5 s hasta el 3 de septiembre de 2026, cuando Teyuna y
     Mompox salieron por fotografía de prensa sin licencia para un sitio del
     Estado (ver el comentario junto a las láminas del héroe, en index.html) y
     quedaron 5, a 25 s la vuelta. El mismo día entraron Araracuara, Santa
     Catalina y Makumake —mismo origen que wiwa, Ciénaga Grande y Bordoncillo:
     expediciones.igac.gov.co, fotografía propia del instituto— y la vuelta
     subió a 40 s con las 8. Ese mismo día entró y salió una novena, Las Lajas
     (Wikimedia Commons, CC BY-SA): su crédito era el único con un enlace real
     entre nueve que comparten la misma celda de la rejilla, y ese enlace
     quedaba pintado por encima de los otros ocho —cualquier clic en la placa,
     viera lo que viera, caía sobre él—. Ver el comentario junto a los créditos
     del héroe, en index.html.
     Cambiar el número de láminas toca cuatro sitios y no uno: este valor, los
     tres juegos de retardos de portada.css (lámina, guion y crédito) y los tres
     juegos de fotogramas, cuyos porcentajes se reparten la vuelta en tantas
     partes como láminas haya. Con 8 van en octavos: 12,5 %.

     La regla de los 7 s de antes de este carrusel se escribió cuando eran tres
     o cuatro láminas, y a partir de cinco empieza a jugar en contra —nadie mira
     una portada 56 s—. Por eso el segundo por lámina se queda en 5 y no vuelve
     a 7 aunque el número de láminas cambie: sigue por encima de los 3-4 s donde
     el relevo se vuelve inquieto, y la vuelta completa sube y baja con las
     láminas en vez de quedarse fija en 35-49 s. Es un solo valor. */
  --dur-carrusel: 40s;

  --curva-salida:  cubic-bezier(0.16, 0.84, 0.44, 1);
  --curva-entrada: cubic-bezier(0.55, 0, 1, 0.45);
  --curva-suave:   cubic-bezier(0.65, 0, 0.35, 1);

  /* Alto de la barra del Estado, tomado del boceto. La usan los cálculos de
     alto del visor. */
  --barra-gov-h: 38px;
  /* Alto de la cabecera del sitio, también del boceto. Va como mínimo y no
     como alto fijo: si el nombre de una sección crece, la barra crece con él
     en vez de recortarlo. */
  --cabecera-h: 75px;
  /* Lo que el cromo del Estado le quita a la pantalla antes de que empiece la
     página: barra GOV.CO + filo tricolor + cabecera + su filete. Existe para que
     cualquier bloque que quiera medirse contra el visor —el héroe, el selector
     de entidades— reste lo mismo, en vez de que cada uno escriba su propio 118
     o 119 a mano y se desalineen al primer cambio de la cabecera.

     Va en píxeles a propósito, no en rem: el cromo mide en píxeles y no crece con
     la escala tipográfica de las páginas que la tienen fluida.

     Este valor es el de la cuenta del boceto y sirve para la primera pintura;
     navegacion.js lo reescribe con el alto medido, que es el que vale donde el
     menú no cabe en una fila y la cabecera se va a dos. */
  --cromo-h: calc(var(--barra-gov-h) + 5px + var(--cabecera-h) + 1px);

  /* Alto de la barra de sección, la franja compacta que entra al desplazar. Alto
     fijo y no medido —al revés que --cromo-h— porque lleva un solo renglón que
     no se parte: se le recorta con puntos suspensivos si no cabe.

     Es un token y no un número dentro de base.css porque hay elementos pegajosos
     que tienen que apartarse de ella: los mapas de /nombres y de /entidades se
     pegan arriba en pantalla estrecha, y sin restar esto quedan debajo de la
     franja. Quien añada otro `position: sticky; top: 0` en una página con banner
     tiene que restarlo también. */
  --barra-alta: 3rem;

  /* ── El alto que le queda al contenido ──────────────────────────────────
     Los tres módulos de pantalla completa —el selector de /entidades, el tablero
     de /nombres y el de /bnng— se plantan en el alto del visor menos lo que les
     quita el cromo de arriba. Lo que les quita cambia al desplazar: arriba del
     todo es la cabecera del Estado entera; en cuanto entra la barra de sección,
     son 3rem y nada más.

     Sin esto la resta se hacía siempre contra la cabecera completa, así que con
     la barra puesta sobraban unos setenta píxeles de pantalla que no usaba nadie
     —se veía el mapa cortado arriba y hueco abajo—.

     OJO CON DÓNDE SE APLICA. En las tres páginas la banda azul va DENTRO de la
     caja de pantalla completa, no encima: `.pantalla` es banda + área de trabajo.
     Así que agrandar `.pantalla` no hace que el mapa llene el visor —la banda
     sigue ocupando sus doscientos píxeles dentro de la caja, aunque se hayan ido
     hacia arriba—. Lo que tiene que medir el visor es el ÁREA DE TRABAJO: el
     selector de /entidades, el tablero de /nombres y el de /bnng.

     UNA SOLA MEDIDA, y no una por estado. Hubo dos —una para cuando la franja
     estaba puesta y otra para cuando no— y ese fue el error: el módulo cambiaba
     de alto al cruzar el umbral, así que el documento crecía y encogía en mitad
     del gesto. Con una sola, la caja mide siempre lo mismo y no hay nada que se
     recoloque mientras se desplaza. */
  /* El cromo se queda pegado arriba, así que con la barra puesta lo que le quita
     sitio al área son las dos cosas: la cabecera y la franja.

     El saldo, medido a 900 px de alto: el área de trabajo pasa de 581 px a 729.
     Los 148 que gana salen de la banda azul de sección, que sí se va. Hubo una
     versión en la que también se iba el cromo y el área llegaba a 848; se
     descartó a propósito: la marca del Estado y la del Diccionario tienen que
     estar a la vista, y 119 px es lo que cuesta tenerlas. */
  --area-util: calc(100svh - var(--cromo-h) - var(--barra-alta));

  /* Alto de la tira de filtros. Lo publica navegacion.js con el valor medido; el
     0px de aquí es el que vale mientras no haya tira o no corra el guion. */
  --banda-previa-h: 0px;
}

/* Aquí hubo una clase `.con-barra` que cambiaba estos altos al cruzar el umbral,
   y era un error de bulto: el módulo pasaba de un alto a otro mientras se
   desplazaba, así que EL DOCUMENTO CRECÍA Y ENCOGÍA unos 190 px en mitad del
   gesto. Es el mismo modo de fallo que se evitó no encogiendo el mástil —el
   navegador recoloca el desplazamiento a media transición y el enganche vuelve a
   evaluarse— solo que entrando por otra puerta.

   Ahora la geometría no depende del estado: el área mide siempre lo mismo, el
   alto del documento es constante y no hay nada que recolocar. Cuesta 52 px de
   área cuando aún no ha entrado la franja, y a cambio el desplazamiento no da
   tirones. */

/* Quien pidió menos movimiento recibe menos movimiento. No es una cortesía:
   el movimiento continuo provoca mareo y náusea a personas con trastornos
   vestibulares, y este sitio es de uso público. */
@media (prefers-reduced-motion: reduce) {
  :root {
    /* Solo las que mueven algo. --dur-rapida y --dur-media gobiernan cambios de
       color y de fondo, que no son movimiento: dejarlas vivas conserva la
       respuesta al senalar y al enfocar. Las de ciclo largo si se van. */
    --dur-ambiente: 1ms;
    --dur-carrusel: 1ms;
  }
}