/* Visor de CENTINELA.
 *
 * La identidad es la de GeoAI LATAM: arena calida, verde bosque, acento
 * esmeralda, monoespaciada para lo cartografico y una reticula de coordenadas
 * de fondo. Los valores estan medidos sobre el sitio de la comunidad
 * (geoailatam.terrnova.com), no aproximados a ojo.
 *
 * Las fuentes se cargan de Google Fonts con `display=swap` y una pila de
 * respaldo completa: el texto aparece de inmediato con la fuente del sistema y
 * cambia cuando llega la buena. En una pagina que promete abrir con mala
 * conexion, lo que no se puede es quedarse en blanco esperando. */

:root {
  color-scheme: light;

  /* --- Identidad GeoAI LATAM ------------------------------------------- */
  --arena: #e6e4d8;        /* fondo */
  --crema: #f4f2ea;        /* superficie elevada */
  --crema-alt: #eeebdf;    /* superficie hundida */
  --bosque: #1c3328;       /* texto y superficies oscuras */
  --verde: #0f5636;        /* acento principal */
  --verde-vivo: #157049;
  --esmeralda: #2eb479;
  --ambar: #c8941a;
  --ambar-texto: #6f4f0c;  /* el ambar de marca sobre arena da 2,1:1; este da 5,4:1 */
  --teal: #2f6e78;
  --alarma: #8f2c14;

  /* Los dos grises de texto estan fijados por contraste, no por gusto: sobre
     arena dan 6,5:1 y 4,9:1. Los anteriores (0.68 y 0.45 de alfa) daban 4,4:1 y
     2,3:1 — el segundo rotulaba todas las metricas del tablero. */
  --tenue: rgba(28, 51, 40, 0.82);
  --tenue-mas: rgba(28, 51, 40, 0.72);
  --borde: rgba(28, 51, 40, 0.15);
  --borde-fuerte: rgba(28, 51, 40, 0.28);
  --reticula: rgba(28, 51, 40, 0.07);

  --radio-pastilla: 9999px;
  --radio-grande: 24px;
  --radio-medio: 16px;
  --radio-chico: 10px;

  --sombra: 0 1px 2px rgba(28, 51, 40, 0.05), 0 12px 32px rgba(28, 51, 40, 0.08);
  --sombra-corta: 0 1px 2px rgba(28, 51, 40, 0.06), 0 4px 12px rgba(28, 51, 40, 0.07);

  --tipo-titulo: "Familjen Grotesk", "DM Sans", system-ui, -apple-system, sans-serif;
  --tipo-texto: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tipo-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ancho-panel: 25rem;
  --ancho-texto: 82rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--arena);
  color: var(--bosque);
  font: 15px/1.6 var(--tipo-texto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--tipo-titulo);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}

a { color: var(--verde); text-underline-offset: 3px; }
a:hover { color: var(--verde-vivo); }

/* Un foco visible y de marca. Antes no habia ninguno: el visor era navegable
   con teclado y no se veia donde estaba uno. */
:where(a, button, select, [tabindex]):focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 2px;
  border-radius: var(--radio-chico);
}

.salto-contenido {
  position: absolute;
  left: 0.75rem;
  top: -3rem;
  z-index: 60;
  padding: 0.55rem 1rem;
  background: var(--bosque);
  color: var(--crema);
  border-radius: var(--radio-pastilla);
  font-size: 0.85rem;
  text-decoration: none;
  transition: top 0.16s ease;
}

.salto-contenido:focus { top: 0.75rem; color: var(--crema); }

.oculto-visual {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* Etiqueta micro en monoespaciada: es el gesto cartografico de la identidad,
   el mismo que rotula las lineas de latitud en el sitio de la comunidad.
   0.7rem y no 0.66: a 10 px la JetBrains Mono en versalitas con 0.13em de
   espaciado deja de leerse de un vistazo, que es justamente para lo que esta. */
.mono {
  font-family: var(--tipo-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tenue-mas);
}

/* Reticula de coordenadas: el fondo del sitio de la comunidad. Decorativa, va
   detras del contenido y no cambia con el zoom del dato. */
.graticula {
  position: relative;
  background-image:
    linear-gradient(to right, var(--reticula) 1px, transparent 1px),
    linear-gradient(to bottom, var(--reticula) 1px, transparent 1px);
  background-size: 12.5rem 12.5rem;
  background-position: center top;
}

/* La etiqueta iba clavada a 0,85rem del borde y terminaba en el pixel 41; el
   titular de la seccion empieza en el 28 —`#eventos` tiene 1,75rem de padding—
   asi que se pisaban. Y no solo en movil: medido, de 360 a 1200 px, y solo se
   libraba a partir de 1440, cuando el contenedor se centra y deja hueco.

   Ahora la etiqueta se coloca **respecto al mismo canal que el texto**: se
   queda pegada al borde mientras haya sitio y desaparece cuando no lo hay, que
   es lo que tiene que hacer una marca de reticula decorativa. */
.paralelo {
  position: absolute;
  left: max(0.35rem, calc((100% - var(--ancho-texto)) / 2 - 3.2rem));
  font-family: var(--tipo-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: rgba(28, 51, 40, 0.3);
  pointer-events: none;
  user-select: none;
}

/* Por debajo de esto no hay margen que ocupar: la retícula ya se ve de fondo y
   la etiqueta solo estorbaría. Decorativa quiere decir prescindible. */
@media (max-width: 90rem) {
  .paralelo { display: none; }
}

/* --- Barra ---------------------------------------------------------------- */

.barra {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  /* El `max()` de los lados es la contrapartida de `viewport-fit=cover`:
     sin el, la marca cae debajo de la muesca en horizontal. Ver la nota de
     «La pantalla fisica». */
  padding:
    max(0.75rem, env(safe-area-inset-top, 0px))
    max(1.75rem, env(safe-area-inset-right, 0px))
    0.75rem
    max(1.75rem, env(safe-area-inset-left, 0px));
  border-bottom: 1px solid var(--borde);
  background: rgba(244, 242, 234, 0.85);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.marca { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: inherit; }
.marca-sello { width: 1.75rem; height: 1.75rem; flex: 0 0 auto; display: block; }
.marca-texto { display: flex; align-items: baseline; gap: 0.42rem; }
.marca-nombre { font-family: var(--tipo-titulo); font-size: 1.1rem; font-weight: 600; letter-spacing: 0.03em; }
.marca-lema { font-family: var(--tipo-titulo); font-size: 1.1rem; font-style: italic; color: var(--verde); }

.selector { display: flex; align-items: center; gap: 0.55rem; margin-left: 0.9rem; min-width: 0; }

/* El chevron nativo del `select` rompe el lenguaje de pastillas del resto de
   la barra; se dibuja uno propio y se apaga el del sistema. */
.selector select {
  font: inherit;
  font-size: 0.88rem;
  color: var(--bosque);
  background-color: var(--crema);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%231c3328' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  appearance: none;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-pastilla);
  padding: 0.44rem 2.3rem 0.44rem 1rem;
  max-width: 26rem;
  /* `min-width: 0` es lo que impide el scroll horizontal: un select no se
     encoge por debajo del ancho de su opcion mas larga, y la del Choco mide
     media pantalla. */
  min-width: 0;
  text-overflow: ellipsis;
  cursor: pointer;
}

.selector select:hover { border-color: var(--verde); }

.barra nav { margin-left: auto; display: flex; align-items: center; gap: 1.15rem; font-size: 0.87rem; }
.barra nav a { color: var(--tenue); text-decoration: none; }
.barra nav a:hover { color: var(--bosque); }

.boton-pastilla {
  padding: 0.42rem 1.05rem;
  border-radius: var(--radio-pastilla);
  background: var(--bosque);
  color: var(--crema) !important;
  font-size: 0.84rem;
  /* Una pastilla es un boton, y un boton no se subraya. Vivia dentro de
     `.barra nav`, que ya quitaba el subrayado; fuera de la barra salia
     subrayada. La regla va donde vive el componente, no donde se le use. */
  text-decoration: none;
  display: inline-block;
}

.boton-pastilla:hover { background: var(--verde); }

/* Endoso de la comunidad: el mismo bloqueo que usa su sitio — el globo y
   "GeoAI" en bosque con "LATAM" en verde cursiva. */

/* EL GLOBO ES LA MARCA DE VERDAD, NO UN EMOJI.

   Aqui hubo un 
F30E durante toda la vida del visor, y un emoji lo dibuja
   cada sistema a su manera: en Windows sale azul, en Android verde plano, en
   algun Linux no sale. El sello de GeoAI LATAM tiene una sola forma —globo
   marino con America en verde— y es el que sirve su sitio. Va como PNG de 180
   con las esquinas transparentes, asi que el circulo cae limpio sobre la arena
   y sirve tambien de icono de pantalla de inicio.

   No sustituye al favicon: ese sigue siendo el hexagono, que es de CENTINELA.
   Este identifica a quien lo hace; aquel, a la cosa. */
.globo {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
}

.pie-marca .globo { width: 1.1rem; height: 1.1rem; }
.endoso {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-left: 1.15rem;
  border-left: 1px solid var(--borde);
  font-family: var(--tipo-titulo);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--bosque) !important;
  white-space: nowrap;
}

.endoso em { font-style: italic; color: var(--verde); font-weight: 600; }
.endoso:hover em { color: var(--verde-vivo); }

/* --- Aviso permanente ------------------------------------------------------ */

.aviso {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin: 0;
  padding: 0.65rem 1.75rem;
  background: rgba(200, 148, 26, 0.13);
  border-bottom: 1px solid rgba(200, 148, 26, 0.32);
  font-size: 0.85rem;
  line-height: 1.5;
}

.aviso .mono { color: var(--ambar-texto); flex: 0 0 auto; }

/* --- Tablero -------------------------------------------------------------- */

/* La primera pantalla es el tablero entero y nada mas: barra, aviso y el par
   mapa/panel ocupando lo que sobre. Antes el mapa tenia una altura fija mas
   alta que la ventana y la leyenda quedaba cortada por debajo del pliegue. */
.pantalla {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}

/* `grid-template-rows: minmax(0, 1fr)` no es decorativo: sin el, la fila se
   estira hasta la altura del panel lateral —que es larguisimo— y arrastra
   consigo el mapa y la pantalla entera. Con la fila acotada, el panel scrollea
   dentro de si mismo y la leyenda del mapa queda donde se ve. */
.tablero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ancho-panel);
  grid-template-rows: minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 24rem;
  border-bottom: 1px solid var(--borde);
}

.lienzo { position: relative; min-height: 0; }
#mapa { position: absolute; inset: 0; }

/* El lienzo arranca del color del mapa base, no del de la pagina: heredar el
   fondo dejaria un salto de color mientras cargan las teselas. */
.maplibregl-canvas-container { background: #ece9de; }
.maplibregl-popup-content {
  font-family: var(--tipo-texto);
  border-radius: var(--radio-medio);
  padding: 0.8rem 0.95rem;
  box-shadow: var(--sombra);
}

/* EN PANTALLA ESTRECHA, FUERA LOS BOTONES DE ZOOM.
   La esquina de arriba a la derecha es la única libre del mapa, y en 390 px la
   pila ya no cabe: medido con un evento abierto, la barra de escala caía 67 px
   dentro de la leyenda de intensidad — y ya se metía 22 px antes de añadir los
   botones de inicio y mapa base.

   De los tres controles, el zoom es el prescindible: en una pantalla táctil se
   hace pellizcando, y el propio aviso de gestos cooperativos que MapLibre pinta
   sobre el mapa dice «Usa dos dedos para mover el mapa». Los otros dos no
   tienen gesto equivalente.

   `:has()` porque MapLibre no marca sus grupos: el que contiene los botones de
   zoom es el suyo. */
@media (max-width: 48rem) {
  .maplibregl-ctrl-group:has(.maplibregl-ctrl-zoom-in) { display: none; }
}

/* Los dos botones propios del mapa —inicio y mapa base— y la galería que abre
   el segundo. Viven en un solo `maplibregl-ctrl-group` para no gastar dos veces
   los 10 px de margen que MapLibre da a cada grupo: en un móvil de 390 px esa
   esquina ya llega hasta la leyenda. */
.ctrl-centinela { position: relative; }

/* `> button` y no `button`: la galería cuelga de este mismo grupo y sus
   opciones NO son botones de 29 px. */
.ctrl-centinela > button {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bosque);
}

/* Cuelga del grupo hacia la izquierda: hacia abajo taparía la barra de escala,
   y hacia la derecha se saldría de la pantalla. */
.galeria-bases {
  position: absolute;
  top: 0;
  right: calc(100% + 8px);
  width: 15rem;
  padding: 0.35rem;
  border-radius: var(--radio-medio);
  background: var(--crema);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra);
}

/* `.galeria-bases .base-opcion` y no `.base-opcion` a secas: MapLibre define
   `.maplibregl-ctrl-group button { width: 29px; height: 29px }`, que gana por
   especificidad a una sola clase. Con esa regla encima, las tres opciones
   salían aplastadas en cuadrados de 29 px con el texto encima del de al lado.
   Medido en pantalla: ilegible. */
.galeria-bases .base-opcion {
  display: block;
  width: 100%;
  height: auto;
  text-align: left;
  padding: 0.5rem 0.6rem;
  border: 0;
  border-radius: var(--radio-chico);
  background: none;
  cursor: pointer;
  font: inherit;
  color: var(--bosque);
  overflow: visible;
}

.galeria-bases .base-opcion + .base-opcion { margin-top: 0.15rem; }
.galeria-bases .base-opcion:hover { background: var(--crema-alt); }
.galeria-bases .base-opcion[aria-pressed="true"] { background: var(--bosque); color: var(--crema); }

.base-nombre { display: block; font-size: 0.86rem; font-weight: 600; }
.base-apunte {
  display: block;
  font-size: 0.72rem;
  line-height: 1.3;
  margin-top: 0.1rem;
  color: var(--tenue);
}
.galeria-bases .base-opcion[aria-pressed="true"] .base-apunte { color: rgba(244, 242, 234, 0.78); }

/* El rotulo que sale al pasar por encima de un epicentro. Es un apunte, no una
   ficha: mas apretado que el resto de globos y sin puntero para el raton, para
   que no se robe a si mismo el `mouseleave` que lo cierra. */
.rotulo-epicentro { pointer-events: none; }
.rotulo-epicentro .maplibregl-popup-content { padding: 0.45rem 0.65rem; }
.rotulo-epicentro-titulo {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--bosque);
}
.rotulo-epicentro-cifra {
  margin: 0.15rem 0 0;
  font-size: 0.72rem;
  color: var(--tenue);
}

.lateral {
  border-left: 1px solid var(--borde);
  background: var(--crema);
  padding: 1.35rem 1.5rem 2.5rem;
  overflow-y: auto;
  min-height: 0;
}

.vacio p { margin: 0 0 0.75rem; }
.vacio .pista { color: var(--tenue); font-size: 0.86rem; }

/* --- Controles sobre el mapa ---------------------------------------------- */

.capas {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  right: 4.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.28rem;
  width: fit-content;
  max-width: calc(100% - 5.4rem);
  background: rgba(244, 242, 234, 0.95);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-pastilla);
  box-shadow: var(--sombra-corta);
  z-index: 3;
}

/* `display: flex` de autor le gana al `display: none` que el navegador aplica
   por `[hidden]`. Sin esta regla la barra de capas seguia dibujada —vacia, como
   una pastilla suelta en la esquina— antes de elegir evento y despues de
   cerrarlo. */
.capas[hidden] { display: none; }

.capas button {
  font: inherit;
  font-size: 0.79rem;
  padding: 0.3rem 0.8rem;
  border: none;
  border-radius: var(--radio-pastilla);
  background: transparent;
  color: var(--tenue);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.14s ease, color 0.14s ease;
}

.capas button:hover { background: rgba(28, 51, 40, 0.07); color: var(--bosque); }
.capas button[aria-selected="true"] { background: var(--bosque); color: var(--crema); }

.panel-mapa {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  background: #ece9de;
  color: var(--tenue);
  font-size: 0.88rem;
  pointer-events: none;
  z-index: 4;
}

.panel-mapa[hidden] { display: none; }

/* El mismo panel cuando deja de ser un «espere» y pasa a ser una respuesta:
   sin girito, dos lineas y sitio para la segunda. */
.panel-mapa-aviso {
  flex-direction: column;
  gap: 0.35rem;
  padding: 0 1.5rem;
  text-align: center;
}

.panel-mapa-nota {
  max-width: 26rem;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--tenue-mas);
}

.giro {
  width: 0.9rem; height: 0.9rem;
  border: 2px solid rgba(28, 51, 40, 0.18);
  border-top-color: var(--verde);
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .giro { animation: none; } }

.leyenda {
  position: absolute;
  right: 0.9rem;
  bottom: 2.4rem;
  width: 14rem;
  padding: 0.85rem 0.95rem;
  background: rgba(244, 242, 234, 0.96);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-medio);
  box-shadow: var(--sombra-corta);
  font-size: 0.78rem;
  line-height: 1.45;
  z-index: 3;
}

.leyenda[hidden] { display: none; }

.leyenda-titulo { margin: 0 0 0.5rem; color: var(--bosque); }
.leyenda-escala { list-style: none; margin: 0 0 0.55rem; padding: 0; }
.leyenda-escala li { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.18rem; }

/* EL CONTORNO DE LA MUESTRA HACE UN TRABAJO, Y A 0,2 NO LO HACIA.
 *
 * La clase mas baja de cada rampa esta entre 1,24 y 1,48:1 contra el fondo de
 * la leyenda: casi invisible. El contorno existia para eso y a alfa 0,2 se
 * pintaba en #c9ccc3, que da 1,45:1 contra el fondo y 1,02:1 contra la muestra
 * mas clara — o sea, tan invisible como lo que venia a delimitar.
 *
 * A 0,6 sale #727f76: 3,74:1 contra el fondo. La muestra queda delimitada
 * aunque su relleno no se distinga, que es lo que exige WCAG 1.4.11 para un
 * objeto grafico que transporta informacion.
 *
 * Es el arreglo que la coropleta del mapa NO puede tener; ver la nota de
 * `CAPAS` en app.js. Aqui si, porque la leyenda es donde se aprende el codigo:
 * si la muestra no se ve, el color del mapa no significa nada. */
.leyenda-escala .muestra {
  width: 1.6rem; height: 0.65rem;
  flex: 0 0 auto;
  border-radius: 2px;
  border: 1px solid rgba(28, 51, 40, 0.6);
}

/* LA MUESTRA DE UNA ISOLINEA ES UNA LINEA.
 *
 * Cuando el evento no tiene malla, lo unico que hay en el mapa son los
 * contornos del ShakeMap. Explicarlos con la casilla rellena de la coropleta
 * prometeria un area medida —"esto es lo que hay dentro"— que es justo lo que
 * en esos eventos no existe: no hay celdas, no hay nadie contado dentro.
 *
 * Conserva el borde de `.muestra`, que no es decoracion: es lo que delimita el
 * gris #9a8f7d de los niveles bajos contra el fondo claro de la caja. */
.leyenda-escala .muestra-linea { height: 0.28rem; border-radius: 1px; }

.leyenda-valor { font-family: var(--tipo-mono); font-size: 0.72rem; }
.leyenda-nota { margin: 0; color: var(--tenue-mas); font-size: 0.72rem; line-height: 1.45; }

/* --- El pie del mapa (21-sep-2026) ---------------------------------------- */
/*
 * UN TELEFONO NO TIENE CUATRO ESQUINAS LIBRES.
 *
 * En escritorio cada caja tenia la suya: el conmutador de amenaza arriba a la
 * izquierda, las pestañas de capa debajo, la leyenda abajo a la derecha, los
 * interruptores abajo a la izquierda, y la navegacion de MapLibre arriba a la
 * derecha. En 390 px esas cinco esquinas son la misma, y cada arreglo anterior
 * consistio en mover una caja al hueco que dejaba otra. Medido con un evento
 * abierto, contando solo nuestras cajas: 50 % del lienzo tapado en 390x844 y
 * 53 % en 360x780. Con el pie unico, 35 % y 37 %; plegado, 10 %. Lo vigila
 * `test_las_cajas_del_mapa_no_se_comen_el_mapa`.
 *
 * La leyenda y los interruptores pasan a ser una sola caja anclada abajo —el
 * patron de hoja inferior que usan los visores de mapa para movil—, y la caja
 * se pliega. En escritorio el envoltorio es `display: contents`: no genera caja
 * y cada hija conserva exactamente el anclaje que tenia, asi que lo de arriba
 * de 48rem no cambia ni un pixel. El `<summary>` se esconde ahi porque sin
 * hoja no hay nada que plegar.
 */
.pie-mapa { display: contents; }
.pie-mapa > .pie-mapa-tirador { display: none; }

@media (max-width: 48rem) {
  .pie-mapa {
    position: absolute;
    left: 0.75rem;
    /* MIDE LO QUE MIDA SU CONTENIDO, Y NO LA PANTALLA.
       De borde a borde el pie empeoraba el caso mas comun: en panorama solo
       lleva la caja de simbolos, que ya media 272 px, y estirarla a 361 subia
       lo tapado del 18 % al 22 %. Un arreglo que mejora el peor caso y estropea
       el habitual no es un arreglo. Con `right: auto` la caja se encoge a su
       contenido, y el tope es el mismo `17rem` que ya tenia la caja de simbolos:
       en panorama el pie mide ahora lo que media ella. */
    right: auto;
    max-width: min(17rem, calc(100% - 1.5rem));
    /* Por encima de la atribucion, que la ODbL exige que se vea y que este
       proyecto ya protege con una prueba. `env()` con respaldo a 0 para el
       navegador sin muesca y para el Chromium de las pruebas.

       3,4rem y no los 2,4 que usaba la pila anterior: «OpenFreeMap ©
       OpenMapTiles Data from OpenStreetMap» mas su boton necesita unos 354 px y
       en 360 se parte en dos lineas, o sea 44 px de banda en vez de 24. Con 2,4
       el pie quedaba por debajo de la atribucion —que gana por `z-index`, asi
       que el credito seguia legible, pero la esquina del pie no—. Subirlo no
       cuesta mapa: la caja esta anclada abajo y sube entera. */
    bottom: calc(3.4rem + env(safe-area-inset-bottom, 0px));
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* Tope y no altura: la caja mide lo que mida su contenido, y solo cuando
       se pasa —la rampa de potencia radiativa con su nota desplegada— se
       desplaza ella en vez de comerse el mapa. */
    max-height: min(40%, 15rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.45rem 0.75rem 0.65rem;
    background: rgba(244, 242, 234, 0.96);
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-medio);
    box-shadow: var(--sombra-corta);
  }

  /* Un pie vacio es un borde flotando sobre el mapa. Pasa en el primer segundo
     de carga, antes de que el visor inyecte la leyenda de simbolos: `[hidden]`
     tapa a la leyenda y `:empty` a los controles, y ninguno de los dos vacia
     al padre. */
  .pie-mapa:not(:has(> .leyenda:not([hidden]))):not(:has(> .controles-mapa:not(:empty))) {
    display: none;
  }

  /* El tirador. Es el unico control nuevo de este cambio y hace una sola cosa:
     quitar el pie de en medio. Va arriba de la caja —no abajo— para que
     plegarla no mueva el sitio donde hay que volver a pulsar.

     28 px de alto y no los 44 que pide la pauta AAA de tamaño tactil: el
     objetivo es la fila entera —unos 270x28— y pasa de sobra el minimo de
     24x24 que exige el nivel AA (WCAG 2.5.8). Los 44 se midieron: 16 px mas de
     mapa tapado por el unico control cuyo trabajo es devolver mapa. */
  .pie-mapa > .pie-mapa-tirador {
    display: flex;
    align-items: center;
    min-height: 1.75rem;
    margin: -0.25rem -0.75rem 0;
    padding: 0 0.75rem;
    font-family: var(--tipo-mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tenue);
    cursor: pointer;
    list-style: none;
  }

  .pie-mapa > .pie-mapa-tirador::-webkit-details-marker { display: none; }

  .pie-mapa > .pie-mapa-tirador::after {
    content: " ▾";
    margin-left: auto;
    font-size: 0.8rem;
  }

  .pie-mapa:not([open]) > .pie-mapa-tirador::after { content: " ▸"; }

  .pie-mapa > .pie-mapa-tirador:focus-visible {
    outline: 2px solid var(--verde);
    outline-offset: -2px;
    border-radius: var(--radio-chico);
  }

  /* Plegado, el pie es una pastilla y no una banda: se encoge al ancho de su
     rotulo y devuelve el mapa entero menos esa esquina. */
  .pie-mapa:not([open]) {
    max-height: none;
    padding: 0;
    overflow: visible;
  }

  .pie-mapa:not([open]) > .pie-mapa-tirador { margin: 0; }

  /* SIN LEYENDA NO HAY NADA QUE PLEGAR, Y LA FILA SE COBRA IGUAL.
     En panorama el pie lleva solo la caja de simbolos —que es un `<details>` y
     ya se pliega sola—, asi que el tirador seria un segundo plegado encima del
     primero a cambio de 28 px de mapa. Se quita ahi.

     El `:not([open])` del selector no es adorno: sin el, plegar el pie con un
     evento abierto y volver despues al panorama dejaba el pie cerrado y sin
     tirador — o sea, contenido escondido y ninguna forma de recuperarlo. */
  .pie-mapa[open]:not(:has(> .leyenda:not([hidden]))) > .pie-mapa-tirador {
    display: none;
  }

  /* Dentro de una caja, tres bordes redondeados son ruido. Las hijas pierden su
     posicion y su cromo; el pie los pone una vez. Por `>` con `#leyenda` para
     ganarle por especificidad a sus propias reglas de id. */
  .pie-mapa > #leyenda,
  .pie-mapa > .controles-mapa {
    position: static;
    inset: auto;
    width: auto;
    max-width: none;
    max-height: none;
    overflow: visible;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* Una linea entre las dos mitades: arriba lo que explica los colores que hay,
     abajo lo que se puede encender.

     Por hermano adyacente y no a secas: en panorama no hay leyenda —el pie
     lleva solo los controles— y una linea de separacion sin nada arriba de lo
     que separarse son 9 px de mapa a cambio de nada. Medido: con la regla
     suelta, el pie en panorama volvia a ser mas alto que la caja que sustituye. */
  .pie-mapa > .leyenda:not([hidden]) + .controles-mapa:not(:empty) {
    border-top: 1px solid var(--borde);
    padding-top: 0.5rem;
  }

  /* LA ESCALA, TUMBADA.
   *
   * Seis clases en columna con su rotulo al lado son 155 px de alto y el ancho
   * entero: la propia leyenda tapaba mas mapa que ningun otro control. En fila
   * —muestra arriba, cifra debajo— la misma escala ocupa una linea, que es como
   * la dibuja cualquier visor de mapa en un telefono. Las clases no se
   * recortan: si no caben, envuelven.
   *
   * `align-items: stretch` es lo que hace que cada muestra mida lo que mide su
   * cifra, asi que la rampa sale continua sin fijar anchos a mano. */
  .pie-mapa > #leyenda .leyenda-escala {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.5rem;
    margin-bottom: 0.4rem;
  }

  .pie-mapa > #leyenda .leyenda-escala li {
    flex: 0 1 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0.18rem;
    margin-bottom: 0;
    min-width: 2.3rem;
  }

  .pie-mapa > #leyenda .leyenda-escala .muestra { width: auto; height: 0.5rem; }
  /* La muestra de una isolinea sigue siendo una linea; ver la nota de
     `.muestra-linea`. Se repite aqui porque la regla de arriba es mas
     especifica y si no le ganaria. */
  .pie-mapa > #leyenda .leyenda-escala .muestra-linea { height: 0.28rem; }
  .pie-mapa > #leyenda .leyenda-valor { font-size: 0.68rem; line-height: 1.1; }

  .pie-mapa > #leyenda .leyenda-titulo { margin-bottom: 0.35rem; }
}

/* LA ATRIBUCION DEL MAPA BASE VA POR ENCIMA DE TODO LO NUESTRO.
   No es estetica: OpenStreetMap es ODbL y exige que la atribucion se vea. En
   movil la pila de interruptores caia justo sobre ella —medido el 28-ago-2026:
   `elementFromPoint` sobre el centro de `.maplibregl-ctrl-attrib` devolvia el
   interruptor de sismos menores— y este proyecto rechaza fuentes enteras por
   incompatibilidad de licencia como para taparle el credito al mapa que usa. */
/* Dos clases y no una: `maplibre-gl.css` declara `z-index: 2` en esa misma
   regla y se carga despues, asi que con igual especificidad ganaba ella. */
.lienzo .maplibregl-ctrl-bottom-right,
.lienzo .maplibregl-ctrl-bottom-left {
  z-index: 5;
}

/* SE FUE LA LEYENDA DEL BORDE DE ARRIBA, Y CON ELLA TRES REGLAS.
 *
 * Aqui vivia el reparto anterior: la leyenda de intensidad colgada del borde
 * superior —`top: 1rem`, y `8.6rem` cuando habia pestañas de capa— porque abajo
 * ya estaban los interruptores. Repartia el mismo mapa entre dos cajas en vez
 * de dejar mapa: medido el 21-sep-2026 con un evento abierto, entre las dos se
 * llevaban 42 de los 50 puntos tapados en 390x844 y 44 de los 53 en 360x780.
 *
 * Las dos son ahora el mismo pie plegable (`.pie-mapa`), asi que no hay nada
 * que repartir y estas reglas se borran en vez de reajustarse. Lo que queda es
 * lo unico que seguia siendo cierto: en un movil las pestañas de capa se
 * desplazan en su propia fila. */
@media (max-width: 34rem) {
  .capas { right: 4.2rem; max-width: none; width: auto; justify-content: flex-start; }
}

/* --- Panel lateral --------------------------------------------------------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.75rem;
  font-family: var(--tipo-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--verde);
}

.eyebrow::before {
  content: "";
  width: 0.85rem;
  height: 1px;
  flex: 0 0 auto;
  background: var(--verde);
}

#lateral h2 { font-size: 1.3rem; line-height: 1.22; margin-bottom: 0.45rem; }
.detalle-meta { margin: 0; color: var(--tenue); font-size: 0.76rem; line-height: 1.6; font-family: var(--tipo-mono); overflow-wrap: anywhere; }

.distintivos { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.75rem 0 0; padding: 0; list-style: none; }

.distintivo {
  display: inline-block;
  padding: 0.22rem 0.7rem;
  border: 1px solid rgba(200, 148, 26, 0.55);
  border-radius: var(--radio-pastilla);
  color: var(--ambar-texto);
  background: rgba(200, 148, 26, 0.14);
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  cursor: help;
}

.distintivo.alarma { border-color: rgba(143, 44, 20, 0.45); background: rgba(143, 44, 20, 0.1); color: var(--alarma); }

.bloque { margin-top: 1.7rem; }
.bloque:first-of-type { margin-top: 1.5rem; }

/* Franjas de intensidad: las tres que calcula el sistema, no solo MMI>=7.
   Publicar una sola franja obliga a quien lee a suponer las otras dos. */
.franjas { list-style: none; margin: 0; padding: 0; }

.franja {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.42rem 0;
  border-bottom: 1px solid var(--borde);
}

.franja:last-child { border-bottom: none; }
.franja-nombre { font-family: var(--tipo-mono); font-size: 0.72rem; color: var(--tenue); }
.franja-valor { font-family: var(--tipo-titulo); font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.franja-pista { height: 0.4rem; background: rgba(28, 51, 40, 0.08); border-radius: var(--radio-pastilla); overflow: hidden; }
/* `display: block` obligatorio: es un span dentro de un span, no un hijo de
   grid, y en `inline` ignoraba el ancho — las tres franjas salian vacias. */
.franja-relleno { display: block; height: 100%; border-radius: var(--radio-pastilla); }

.metricas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--borde);
  border: 1px solid var(--borde);
  border-radius: var(--radio-medio);
  overflow: hidden;
}

.metrica { padding: 0.8rem 0.9rem; background: var(--crema); }

/* Con un numero impar de metricas, la rejilla de dos columnas deja un hueco que
   se ve —el fondo del contenedor, que es la linea de 1px hecha con background—
   y parece una tarjeta rota. La ultima ocupa el ancho.

   Paso al anadir "paises con reporte" al panorama: tres metricas, un agujero. */
.metrica:last-child:nth-child(odd) { grid-column: 1 / -1; }

.metrica .valor {
  display: block;
  font-family: var(--tipo-titulo);
  font-size: 1.4rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.metrica .etiqueta {
  display: block;
  margin-top: 0.24rem;
  font-family: var(--tipo-mono);
  font-size: 0.66rem;
  color: var(--tenue-mas);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.4;
}

.metrica .apunte { display: block; margin-top: 0.3rem; font-size: 0.72rem; color: var(--tenue); line-height: 1.4; }

/* Siete metricas en una rejilla de dos columnas dejan una huerfana; la de vias,
   que es la que lleva apunte, ocupa la fila entera. */
.metrica.ancha { grid-column: 1 / -1; }

/* Terreno: licuefaccion y deslizamiento. El pipeline los calcula y el visor no
   los ensenaba — 1,6 M de personas sobre suelo licuable no caben en una nota. */
.terreno { list-style: none; margin: 0; padding: 0; }

.terreno li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.3rem;
  background: var(--crema-alt);
  border-radius: var(--radio-chico);
  font-size: 0.82rem;
}

/* LA ALERTA DE USGS VA PEGADA A LA CIFRA QUE MATIZA, NO SUELTA.
 *
 * Es una nota sobre la fila de encima —"nuestro cero y su naranja hablan del
 * mismo evento"—, asi que se cuelga de ella: sin fondo propio, con sangria y un
 * filete del color de la alerta. Una fila mas del mismo aspecto se leeria como
 * una tercera medicion, que es justo lo que no es.
 *
 * El color va como refuerzo del texto, nunca solo: la palabra "naranja" o
 * "roja" esta escrita en la nota. WCAG 1.4.1 — la informacion no puede
 * depender del color. */
.terreno .contraste-terreno {
  display: block;
  background: none;
  padding: 0.35rem 0 0.55rem 0.7rem;
  margin: -0.2rem 0 0.45rem 0.75rem;
  border-left: 2px solid var(--borde-fuerte);
}

.terreno .contraste-terreno[data-alerta="yellow"] { border-left-color: #d9a406; }
.terreno .contraste-terreno[data-alerta="orange"] { border-left-color: #e07a3f; }
.terreno .contraste-terreno[data-alerta="red"] { border-left-color: #c0392b; }

.terreno .cifra { font-family: var(--tipo-titulo); font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.terreno .cero { color: var(--tenue-mas); }

/* LOS DELTAS DEL REPROCESO.
 *
 * Filete a la izquierda y no fondo lleno: es un aviso de lectura —"esto se
 * movio desde la version que leiste"—, no una cifra mas del reporte. Compite
 * con el bloque de franjas que va justo debajo y tiene que perder esa pelea.
 *
 * Las lineas vienen de `format_delta_prose` y traen flechas: "340k → 355k".
 * Cifras tabulares para que los dos lados de la flecha se lean alineados. */
.cambios { list-style: none; margin: 0; padding: 0; }

.cambios li {
  padding: 0.4rem 0 0.4rem 0.7rem;
  margin-bottom: 0.25rem;
  border-left: 2px solid var(--bosque);
  font-size: 0.82rem;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}

/* Las revisiones viejas, plegadas: enteras y a un toque, pero sin empujar las
   cifras tres pantallas hacia abajo. */
.cambios-anteriores { margin-top: 0.4rem; }
.cambios-anteriores > summary {
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--bosque);
  padding: 0.5rem 0;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
}
.cambios-anteriores > summary:focus-visible { outline: 2px solid var(--bosque); outline-offset: 2px; }
.cambios-anteriores[open] > summary { margin-bottom: 0.25rem; }
.cambios-anteriores .cambios li { border-left-color: var(--borde-fuerte); }

/* El boton de las listas recortadas: solo existe en pantalla estrecha. */
.ver-todos { display: none; }

/* Barras en CSS puro: una libreria de graficos para ocho barras horizontales
   es una dependencia que mantener y una peticion mas en una pagina que promete
   abrir con mala conexion. */
.barras { list-style: none; margin: 0; padding: 0; }
.barras li { margin-bottom: 0.62rem; font-size: 0.82rem; }

.barra-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; margin-bottom: 0.22rem; }
.barra-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-valor { color: var(--tenue); font-family: var(--tipo-mono); font-size: 0.74rem; flex: 0 0 auto; }

.barra-pista { height: 0.34rem; background: rgba(28, 51, 40, 0.09); border-radius: var(--radio-pastilla); overflow: hidden; }
.barra-relleno { height: 100%; border-radius: var(--radio-pastilla); }

.ficha-mmi {
  display: inline-block;
  min-width: 1.85rem;
  margin-right: 0.4rem;
  padding: 0.04rem 0.3rem;
  border-radius: 4px;
  border: 1px solid rgba(28, 51, 40, 0.2);
  font-family: var(--tipo-mono);
  font-size: 0.64rem;
  text-align: center;
  /* NO es `--bosque`. Medido sobre el naranja de la banda 7 —#ef6548, donde
     cae la mitad de los municipios de un evento grande— el verde bosque da
     4,26:1 y a 10,2 px hacen falta 4,5. Y no se arregla bajando el umbral de
     `sobre-oscuro`: el blanco sobre ese mismo naranja da 3,17, peor. Casi
     negro da 5,96 y no desentona con la paleta, porque es el mismo gris de
     tinta con el que se dibujan los simbolos del mapa. */
  color: #1c1b1a;
  vertical-align: 0.06em;
}

/* Sobre los tres rojos altos de la rampa, el verde bosque de la ficha daba
   menos de 2:1: la intensidad, que es el dato de la ficha, no se leia. */
.ficha-mmi.sobre-oscuro { color: #fff; border-color: rgba(255, 255, 255, 0.35); }

.contraste, .apostilla {
  margin: 0;
  padding: 0.85rem 0.95rem;
  background: var(--crema-alt);
  border: 1px solid var(--borde);
  border-radius: var(--radio-medio);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--tenue);
}

.contraste strong { color: var(--bosque); font-weight: 600; }

.descargas { margin: 0; font-size: 0.8rem; color: var(--tenue); line-height: 2; overflow-wrap: anywhere; }
.descargas a { white-space: nowrap; }

/* Panorama del estado vacio: el tablero sin evento seleccionado ensenaba un
   panel en blanco. La superficie principal del producto no puede estar vacia
   en su estado por defecto. */
.panorama-lista { list-style: none; margin: 0.9rem 0 0; padding: 0; }

.panorama-lista button {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  padding: 0.7rem 0.85rem;
  margin-bottom: 0.4rem;
  background: var(--crema-alt);
  border: 1px solid transparent;
  border-radius: var(--radio-chico);
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease;
}

.panorama-lista button:hover { border-color: var(--borde-fuerte); background: var(--crema); }
.panorama-lista .titulo { display: block; font-family: var(--tipo-titulo); font-weight: 600; font-size: 0.92rem; letter-spacing: -0.015em; }
.panorama-lista .pie { display: block; margin-top: 0.2rem; font-family: var(--tipo-mono); font-size: 0.68rem; color: var(--tenue-mas); }

/* --- Lista de eventos ------------------------------------------------------ */

#eventos { padding: 3rem 1.75rem 2.5rem; }
.contenedor { max-width: var(--ancho-texto); margin: 0 auto; }
#eventos h2 { font-size: 1.55rem; margin-bottom: 0.3rem; }
.seccion-lema { margin: 0 0 1.4rem; color: var(--tenue); font-size: 0.9rem; }

.lista-eventos {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  /* `minmax(20rem, ...)` no encoge: en un movil de 320 px la columna seguia
     pidiendo 320 y arrastraba a **toda la pagina** 35 px de lado, mapa
     incluido. Medido: 320 -> 35 px de desborde, 344 -> 11, 360 y por encima ->
     0. `min()` deja que la columna ceda cuando la ventana es mas estrecha que
     la columna, que es justo el caso que faltaba. */
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
  gap: 0.85rem;
}

/* El atributo `hidden` del navegador es `display: none` con especificidad de
   elemento: cualquier regla de clase lo pisa. `aplicarFiltro` marcaba
   `li.hidden = true` en dieciocho tarjetas, la pastilla del pais se ponia en
   `aria-pressed="true"`, se anunciaba "3 reportes en la lista" al lector de
   pantalla... y las veintiuna seguian en pantalla.

   La trampa ya se conocia —`.leyenda[hidden]` la guarda desde su propia regla—
   y aqui no se aplico. Medido el 28-ago-2026: 28 elementos con [hidden] en la
   pagina, 18 visibles, y los 18 eran estas tarjetas. */
.lista-eventos li[hidden] { display: none; }

.lista-eventos li {
  display: flex;
  flex-direction: column;
  padding: 1.05rem 1.15rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  background: var(--crema);
  cursor: pointer;
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.lista-eventos li:hover {
  border-color: var(--borde-fuerte);
  transform: translateY(-2px);
  box-shadow: var(--sombra);
}

@media (prefers-reduced-motion: reduce) { .lista-eventos li:hover { transform: none; } }

.lista-eventos li.activo { border-color: var(--verde); box-shadow: 0 0 0 1px var(--verde); }

.evento-cabecera { display: flex; align-items: baseline; gap: 0.6rem; }

.evento-mag {
  flex: 0 0 auto;
  font-family: var(--tipo-titulo);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--crema);
  background: var(--bosque);
  border-radius: var(--radio-pastilla);
  padding: 0.1rem 0.6rem;
  font-variant-numeric: tabular-nums;
}

.lista-eventos a { font-family: var(--tipo-titulo); font-weight: 600; font-size: 1rem; text-decoration: none; color: var(--bosque); letter-spacing: -0.015em; }
.lista-eventos a:hover { color: var(--verde); }

.evento-meta { margin: 0.45rem 0 0; color: var(--tenue-mas); font-size: 0.72rem; line-height: 1.5; font-family: var(--tipo-mono); }
.evento-cifra { display: block; margin-top: auto; padding-top: 0.6rem; font-family: var(--tipo-titulo); font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; }
.evento-cifra small { font-family: var(--tipo-mono); font-size: 0.64rem; font-weight: 400; color: var(--tenue-mas); text-transform: uppercase; letter-spacing: 0.08em; margin-left: 0.4rem; }

.cargando, .nota { color: var(--tenue); font-size: 0.88rem; }

/* --- Pie ------------------------------------------------------------------- */

footer {
  border-top: 1px solid var(--borde);
  padding:
    1.75rem
    max(1.75rem, env(safe-area-inset-right, 0px))
    calc(1.75rem + env(safe-area-inset-bottom, 0px))
    max(1.75rem, env(safe-area-inset-left, 0px));
  color: var(--tenue-mas);
  font-size: 0.76rem;
  line-height: 1.7;
}

footer .contenedor { display: grid; gap: 0.5rem; }
footer p { margin: 0; }
footer a { color: var(--tenue); }
.pie-marca { display: flex; align-items: center; gap: 0.4rem; font-family: var(--tipo-titulo); font-weight: 600; color: var(--bosque); text-decoration: none; }
.pie-marca em { font-style: italic; color: var(--verde); }

/* El aviso que hace la resta: objetivo contra cadencia real. Se marca porque
   es lo unico de la pagina de estado que dice "esto no se esta cumpliendo", y
   perderlo entre notas grises seria enterrarlo. */
.nota-alarma {
  border-left: 3px solid var(--alarma);
  padding-left: 0.8rem;
  color: var(--tenue);
}

/* --- Cuando se reviso cada cifra ------------------------------------------- */
/*
 * El comentario de `pintarEnVivo` prometia desde siempre que las cifras llevan
 * la hora de su ultima revision —"sin ella, 14.984 celdas con fuego podria ser
 * de hace un mes"— y no la llevaban. Va dentro del apunte, no en una linea
 * aparte: la antiguedad es una propiedad de la cifra, no un pie de pagina.
 */
.revisado { white-space: nowrap; }

.pie-vivo {
  margin: 0.75rem 0 0;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--tenue-mas);
}

/* La linea que dice que la tabla se desplaza. Solo donde no cabe. */
.tabla-pista { display: none; }

@media (max-width: 48rem) {
  .tabla-pista {
    display: block;
    margin: 0.5rem 0 0;
    font-family: var(--tipo-mono);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    color: var(--tenue-mas);
  }
}

/* --- Controles de la lista ------------------------------------------------- */
/*
 * Ordenar y recortar al encuadre. Van en una fila que se parte sola: en un
 * movil las pastillas de orden ocupan la primera linea, el interruptor la
 * segunda y la cuenta cae debajo, sin que ninguna se salga.
 */
.solo-en-vista {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: var(--tenue);
  cursor: pointer;
  user-select: none;
}

.solo-en-vista input { margin: 0; accent-color: var(--verde); }
.solo-en-vista[hidden] { display: none; }

/* A la derecha del todo, y en monoespaciada: es un contador, no una etiqueta.
   `margin-left: auto` lo empuja solo cuando cabe; al partirse la fila cae
   debajo alineado a la izquierda, que es como se lee en un movil. */
.cuenta-lista { margin-left: auto; font-size: 0.68rem; }

/* --- Area de afectacion ---------------------------------------------------- */

.area-total { display: flex; align-items: baseline; gap: 0.55rem; margin: 0.2rem 0 0; }
.area-total strong {
  font-family: var(--tipo-titulo);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.area-total span {
  font-family: var(--tipo-mono);
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tenue-mas);
}
.area-apunte { margin: 0.15rem 0 0; font-size: 0.78rem; color: var(--tenue-mas); }

.area-franjas { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 0.4rem; }

/* Tres columnas fijas: la etiqueta y la cifra no se mueven de banda a banda, y
   asi las barras se comparan entre si sin tener que leerlas. */
.area-franjas li {
  display: grid;
  grid-template-columns: 4.1rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
}
.area-banda { font-size: 0.68rem; color: var(--tenue-mas); }
.area-pista { height: 0.5rem; border-radius: var(--radio-pastilla); background: var(--crema-alt); overflow: hidden; }
.area-relleno { display: block; height: 100%; border-radius: var(--radio-pastilla); }
.area-cifra { font-size: 0.72rem; font-variant-numeric: tabular-nums; color: var(--tenue); }

/* La proporcion que convierte un conteo en una noticia: 289.000 mayores no dice
   nada hasta que se sabe que son el 12 % de los expuestos. */
.cuota-apunte { color: var(--tenue-mas); }
.cuota-apunte strong { color: var(--tenue); font-weight: 600; }

/* --- Pagina de estado ------------------------------------------------------ */

/* Antes esta pagina no tenia ni una regla propia: heredaba los tokens y salia
   con el texto de borde a borde y la tabla en crudo. */
.hoja { max-width: 58rem; margin: 0 auto; padding: 2.5rem 1.75rem 3rem; }
.hoja h2 { font-size: 1.35rem; margin: 2.2rem 0 0.6rem; }
.hoja h2:first-of-type { margin-top: 1.6rem; }
.hoja p { margin: 0 0 0.75rem; }
.hoja > .entradilla { font-size: 1.02rem; line-height: 1.65; color: var(--tenue); max-width: 46rem; }

.objetivo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  margin: 0 0 0.9rem;
  padding: 0.9rem 1.1rem;
  background: var(--crema);
  border: 1px solid var(--borde);
  border-radius: var(--radio-medio);
}

.objetivo div { display: flex; align-items: baseline; gap: 0.5rem; }
.objetivo .valor { font-family: var(--tipo-titulo); font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.tabla-scroll { overflow-x: auto; margin-bottom: 0.75rem; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

thead th {
  text-align: left;
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid var(--borde-fuerte);
  font-family: var(--tipo-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tenue-mas);
  white-space: nowrap;
}

/* Acotado a `.hoja` (el main de status.html): estos selectores estuvieron
   desnudos y se fugaban a la tabla de cobertura del indice, que definia su
   propio lenguaje —hover, sin rayado— y recibia este encima. El bandeado
   resultante parecia un fallo de render. */
.hoja tbody td { padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--borde); }
.hoja tbody tr:last-child td { border-bottom: none; }
.hoja tbody tr:nth-child(odd) td { background: rgba(244, 242, 234, 0.55); }

.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--tipo-mono); font-size: 0.8rem; }
.cumple { color: var(--verde-vivo); }
.incumple { color: var(--alarma); }

/* Una discrepancia enorme entre los dos productos de poblacion no puede leerse
   con la misma tipografia que un 0,8 %. Ver `pintarIncertidumbre`. */
.cifra-alerta { color: var(--alarma); }

.latidos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }

.latidos li {
  padding: 0.5rem 0.8rem;
  background: var(--crema);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  font-family: var(--tipo-mono);
  font-size: 0.74rem;
  color: var(--tenue);
}

/* --- Adaptacion a pantallas estrechas -------------------------------------- */

@media (max-width: 64rem) {
  .pantalla { height: auto; }
  .tablero { grid-template-columns: 1fr; grid-template-rows: auto auto; min-height: 0; }
  .lienzo { min-height: 26rem; height: 60vh; }
  .lateral { border-left: none; border-top: 1px solid var(--borde); overflow: visible; }
  .barra {
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    padding:
      max(0.7rem, env(safe-area-inset-top, 0px))
      max(1.1rem, env(safe-area-inset-right, 0px))
      0.7rem
      max(1.1rem, env(safe-area-inset-left, 0px));
  }
  .selector { order: 3; margin-left: 0; width: 100%; }
  .selector select { max-width: none; flex: 1; }
  .barra nav { gap: 0.9rem; }
  .aviso { padding: 0.65rem 1.1rem; }
  #eventos { padding: 2.25rem 1.1rem 2rem; }
  footer {
    padding:
      1.5rem
      max(1.1rem, env(safe-area-inset-right, 0px))
      calc(1.5rem + env(safe-area-inset-bottom, 0px))
      max(1.1rem, env(safe-area-inset-left, 0px));
  }
  .hoja { padding: 2rem 1.1rem 2.5rem; }
}

/* Por debajo de 30rem el endoso de la comunidad y el aviso compiten por la
   misma linea; el endoso baja al pie, donde la atribucion ya vive. */
@media (max-width: 30rem) {
  .endoso { display: none; }
  .marca-lema { display: none; }

  /* EN BLOQUE, NO EN COLUMNA.
     En columna «Léase así» se llevaba una linea entera para si, y el aviso
     medido en 390x844 subia a 110 px: junto con la cabecera, el selector y los
     filtros, el 31 % de la primera pantalla antes de que empezara el mapa. En
     bloque el rotulo entra en la primera linea del texto y el aviso dice lo
     mismo en una linea menos. Se acorta lo que ocupa, no lo que advierte. */
  .aviso { display: block; }
  .aviso .mono { margin-right: 0.45rem; }

  .metricas { grid-template-columns: 1fr; }
}

/* --- Cobertura regional ----------------------------------------------------

   El tablero listaba eventos y nada mas. Con pocos reportes eso se lee como una
   demo, y lo que hay detras —dieciocho paises con su activo construido y medido
   contra la cifra oficial de cada uno— no aparecia en ninguna pantalla.

   Se dibuja como una tabla y no como tarjetas a proposito: son cifras
   comparables entre si, y una tabla es lo que deja compararlas. */

.cobertura {
  padding: clamp(3rem, 7vw, 5rem) 0;
  background: var(--crema-alt);
  border-top: 1px solid var(--borde);
}

.tabla-cobertura {
  width: 100%;
  margin-top: 2rem;
  border-collapse: collapse;
  font-size: 0.92rem;
}

/* Diecinueve filas de cuatro columnas no caben en 390 px, y sin esto la tabla
   se salia 96 px y arrastraba a **toda la pagina** a desplazarse en horizontal:
   el mapa, el panel y las tarjetas se movian de lado al leer la cobertura.
   Medido el 28-ago-2026: `scrollWidth` 486 sobre un viewport de 390.
   Que se desplace la tabla y no la pagina. */
/* EL DESPLAZAMIENTO VA EN EL ENVOLTORIO, NO EN LA TABLA.
   Esto estaba puesto sobre `.tabla-cobertura` con `display: block`, y eso le
   quita al <table> su rol implicito: el lector de pantalla deja de anunciar
   filas y columnas y de asociar cada cifra con su encabezado. Una tabla de
   cuatro columnas sin esa asociacion se lee como una lista de numeros sueltos,
   que es exactamente lo que el `<caption>` de al lado existe para evitar.
   Con el envoltorio se conserva la semantica y se sigue pudiendo deslizar. */
.tabla-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Desplazarse ya lo hacia; decirlo no. En 390 px la columna "Reportes" no se ve
   y "Desvio vs. oficial" queda cortada a media cifra: se lee "+0," y "-1,", que
   no parece "hay mas a la derecha" — parece un dato roto. Lo dice
   `.tabla-pista`, aqui arriba.

   Se probo primero la sombra de borde con gradientes y `background-attachment`,
   el truco de siempre, y aqui no sirve: las celdas llevan fondo propio y lo
   tapan. Se dice con palabras, que ademas es lo que hace este proyecto en todas
   partes. */

.tabla-cobertura th,
.tabla-cobertura td {
  padding: 0.62rem 0.75rem;
  border-bottom: 1px solid var(--borde);
  text-align: left;
}

.tabla-cobertura thead th {
  font-family: var(--tipo-mono, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tenue-mas);
  border-bottom: 1px solid var(--borde-fuerte);
}

.tabla-cobertura .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-cobertura tbody th { font-weight: 600; }
.tabla-cobertura tbody tr:hover { background: var(--crema); }

/* Un pais sin construir no se esconde: se marca. Ocultarlo daria una cobertura
   del 100 % que no es cierta. */
.tabla-cobertura tr.pendiente th,
.tabla-cobertura tr.pendiente td { color: var(--tenue-mas); }

.marca-pendiente {
  font-size: 0.66rem;
  padding: 0.1rem 0.42rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-pastilla);
  color: var(--ambar-texto);
  white-space: nowrap;
}

/* --- Filtro por pais ------------------------------------------------------ */

.filtro-paises {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 1.4rem 0 0.4rem;
}

.filtro-paises button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.34rem 0.78rem;
  font: inherit;
  font-size: 0.84rem;
  color: var(--bosque);
  background: var(--crema);
  border: 1px solid var(--borde);
  border-radius: var(--radio-pastilla);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.filtro-paises button:hover { border-color: var(--verde); }

.filtro-paises button[aria-pressed="true"] {
  background: var(--verde);
  border-color: var(--verde);
  color: var(--crema);
}

.filtro-paises .cuenta {
  font-variant-numeric: tabular-nums;
  font-size: 0.74rem;
  opacity: 0.75;
}

@media (max-width: 620px) {
  .tabla-cobertura { font-size: 0.84rem; }
  .tabla-cobertura th,
  .tabla-cobertura td { padding: 0.5rem 0.4rem; }
}

/* Un evento cuya sacudida no alcanzo poblacion en ninguna banda publicada. Es
   un resultado, no un hueco: se rotula en vez de dejar un cero suelto, que se
   lee como que el sistema fallo. */
.evento-cifra .sin-alcance {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--tenue-mas);
}

/* El indice H3 de la celda, en la ficha. Es la clave con la que esa celda se
   encuentra en el `celdas.json` descargable y en el parquet del activo: se
   escribe para poder copiarla, no para adornar. */
.ficha-h3 {
  font-size: 0.68rem;
  color: var(--tenue-mas);
  user-select: all;
  cursor: text;
}


/* --- Sismos vistos y no despachados --------------------------------------
 *
 * Todo aqui empuja en la misma direccion: que no parezca una alarma. El
 * control va abajo del todo, en cuerpo pequeno y color apagado, y la capa
 * arranca apagada. Un sismo que nadie midio no puede competir visualmente con
 * uno que si.
 */
.controles-mapa {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 3;
  display: flex;
  /* En columna y no en fila: dos etiquetas con sus conteos —"Focos activos
     (14.984 celdas en 24 h)"— no caben una al lado de otra en un movil, y en
     fila se salian del mapa. Apiladas caben siempre. */
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  max-width: calc(100% - 24px);
  /* Y EL ALTO, QUE FALTABA. La pila esta anclada abajo, asi que crece hacia
     arriba; con la leyenda de simbolos y la de potencia radiativa puestas a la
     vez se sale del mapa por encima. Medido el 28-ago-2026 con 603 px utiles
     —un portatil normal—: la caja subia a `top: -66px` y desde ahi tapaba la
     banda de "Exposicion no es dano" y dejaba tres pestañas de capa
     **inpulsables**, Intensidad entre ellas, que es la capa por defecto.
     `elementFromPoint` sobre sus centros devolvia la leyenda, no el boton. */
  /* Los 84px reservan la banda superior donde vive `#capas`, la barra de
     pestañas de capa. Las dos cajas son `absolute` con el mismo `z-index: 3`,
     asi que gana la ultima del DOM —esta— y con solo `calc(100% - 24px)` la
     pila dejaba de salirse del mapa pero seguia aterrizando encima de las
     pestañas: `elementFromPoint` sobre el centro de Intensidad, Poblacion y
     Edificaciones devolvia la leyenda. Subir el `z-index` de `#capas` las
     haria pulsables y las dibujaria montadas sobre la leyenda; reservar el
     espacio las deja pulsables **y** legibles.
     Quien necesite mas sitio puede plegar "Que hay en el mapa": es un
     `<details>`. */
  max-height: calc(100% - 84px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* --- Una sola caja de capas ------------------------------------------------ */
/*
 * Eran tres: "Que hay en el mapa", la rampa de potencia radiativa y los dos
 * interruptores, cada una con su borde, su fondo y su sombra, apiladas en la
 * misma esquina. La pregunta que se hace quien mira es una sola —"¿que hay aqui
 * y que puedo encender?"— y habia que buscar en cual de las tres estaba la
 * respuesta. Wildfire Aware lo resuelve al reves: una lista, y cada capa lleva
 * su leyenda colgando de su propia casilla.
 *
 * El ancho se acota, no se fija. Al quitarle el suyo a cada hijo, la caja pasaba
 * a medir lo que midiera la linea mas larga —la nota de la rampa de fuego— y
 * crecia hasta 470 px sobre el mapa. Con `min()` manda el tope en escritorio y
 * el porcentaje en un movil, que es donde clavar 17rem devolveria el problema
 * que ya costo una correccion: 248 px de caja sobre 390 tapando media Colombia.
 */
.controles-mapa {
  max-width: min(17rem, calc(100% - 24px));
  gap: 0.6rem;
  padding: 0.7rem 0.8rem;
  background: rgba(244, 242, 234, 0.96);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-medio);
  box-shadow: var(--sombra-corta);
}

/* Los hijos pierden su cromo: dentro de una caja, tres bordes redondeados son
   ruido. Se quedan con su contenido y su orden. */
.controles-mapa > .leyenda,
.controles-mapa > .interruptor-observados {
  width: auto;
  max-width: 100%;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

/* La casilla mantiene su area de pulsacion aunque pierda el fondo. */
.controles-mapa > .interruptor-observados { padding: 0.15rem 0; }
.controles-mapa > .interruptor-observados:hover { color: var(--bosque); }


.controles-mapa:empty {
  display: none;
}

/* DESPUES de la regla base a proposito: una media query no anade especificidad,
   asi que `.controles-mapa { bottom: 12px }` de arriba ganaba a un bloque movil
   escrito mas arriba en el fichero. Se perdio una iteracion averiguandolo. */
@media (max-width: 34rem) {
  .controles-mapa {
    /* Deja libre la franja de la atribucion del mapa base, que es obligatoria. */
    bottom: 2.4rem;
    /* Y no puede crecer hasta comerse la leyenda, que ahora vive arriba: con
       los focos encendidos la pila gana la leyenda de potencia radiativa. */
    max-height: 30%;
  }
}

.interruptor-observados {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid rgba(28, 27, 26, 0.14);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(3px);
  font-size: 0.78rem;
  color: #4a4640;
  cursor: pointer;
  user-select: none;
}

.interruptor-observados:hover {
  border-color: rgba(28, 27, 26, 0.28);
}

.interruptor-observados input {
  margin: 0;
  accent-color: #6b6660;
}

.popup-observado {
  font-size: 0.84rem;
  line-height: 1.45;
}

/* La linea que impide el falso negativo: quien vea el punto tiene que leer
 * que no hay medicion, no que la medicion dio cero. */
.nota-observado {
  margin: 8px 0 0;
  padding-top: 7px;
  border-top: 1px solid rgba(28, 27, 26, 0.12);
  color: #6b6660;
  font-size: 0.78rem;
}


/* --- Focos activos --------------------------------------------------------
 *
 * A diferencia de los sismos menores, aqui SI hay una medicion: potencia
 * radiativa observada por el sensor. Por eso esta capa si puede pintar de
 * color, y por eso su popup si lleva tabla de cifras.
 *
 * Lo que no puede es prestarse la rampa de MMI. Ver `FUEGO_COLORES` en app.js.
 */
.popup-incendio {
  font-size: 0.84rem;
  line-height: 1.4;
}

.popup-incendio table {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 0;
}

.popup-incendio th {
  text-align: left;
  font-weight: 500;
  color: #4a4640;
  padding: 2px 10px 2px 0;
  white-space: nowrap;
}

.popup-incendio td {
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding: 2px 0;
}

/* La linea que impide leer "celda con fuego" como "hectareas quemadas". */
.nota-incendio {
  margin: 8px 0 0;
  padding-top: 7px;
  border-top: 1px solid rgba(28, 27, 26, 0.12);
  color: #6b6660;
  font-size: 0.76rem;
}


/* --- Lo que esta pasando ahora --------------------------------------------
 *
 * El punto que late es la unica animacion del visor, y esta ahi por una razon:
 * separa "el sistema tiene un archivo" de "el sistema esta mirando". Respeta
 * `prefers-reduced-motion`, donde se queda quieto sin perder el significado
 * —sigue siendo un punto verde junto a "Ahora mismo"—.
 */
.en-vivo {
  margin: 0 0 18px;
  padding: 14px 16px 4px;
  border: 1px solid rgba(28, 27, 26, 0.1);
  border-left: 3px solid #1f6f4a;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(31, 111, 74, 0.05), transparent 70%);
}

.eyebrow-vivo {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #1f6f4a;
}

.pulso {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1f6f4a;
  box-shadow: 0 0 0 0 rgba(31, 111, 74, 0.5);
  animation: latido 2.4s ease-out infinite;
}

@keyframes latido {
  0% { box-shadow: 0 0 0 0 rgba(31, 111, 74, 0.45); }
  70% { box-shadow: 0 0 0 7px rgba(31, 111, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(31, 111, 74, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .pulso { animation: none; }
}



/* Una cifra que lleva a verla. Hereda de `.metrica` y solo anade lo que la
 * convierte en control: area de pulsacion, foco visible y la pista de que
 * pasa al pulsar. */
/* LA CIFRA VIVA OCUPA LA FILA ENTERA.
 *
 * `.metricas` es una rejilla de dos columnas pensada para los pares de cifras
 * del detalle de un sismo. `.metrica-suelo` y `.metrica-servicios` ya declaran
 * `grid-column: 1 / -1` porque su contenido es una frase, no un numero — y a
 * esta se le olvido. Resultado: el titular de la tarjeta —"586.000 personas en
 * celdas con fuego activo"— vivia en media columna de 148 px con el texto
 * apretado, y su `margin: -6px -8px` sacaba el fondo del hover 8 px fuera de la
 * tarjeta. Es el "no tiene margen" que se ve en cuanto alguien mira el panel.
 *
 * Sin margen negativo: con el padding de `.metrica` el fondo cubre la celda
 * entera, que es lo que se queria conseguir con el truco. */
.metrica-viva {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  border: 0;
  background: var(--crema);
  padding: 0.8rem 0.9rem;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.metrica-viva:hover {
  background: rgba(31, 111, 74, 0.07);
}

.metrica-viva:focus-visible {
  outline: 2px solid #1f6f4a;
  outline-offset: 1px;
}

.metrica-viva .ver {
  margin-top: 5px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1f6f4a;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.metrica-viva:hover .ver,
.metrica-viva:focus-visible .ver {
  opacity: 1;
}

/* Sin hover —tactil— la pista se queda puesta: si no, no hay forma de saber
 * que la cifra hace algo. */
@media (hover: none) {
  .metrica-viva .ver { opacity: 1; }
}


/* El foco del selector de capas. Con `tabindex` rotatorio el foco se mueve
 * dentro del grupo sin tabular, asi que **tiene** que verse: si no, quien
 * navega con teclado no sabe donde esta. */
.capas button:focus-visible {
  outline: 2px solid #1f6f4a;
  outline-offset: 2px;
}


/* La salida de un evento. Arriba del todo del panel y con flecha: es lo primero
 * que se busca cuando uno quiere volver, y hasta ahora no existia. */
.volver {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.9rem;
  padding: 0.35rem 0.7rem 0.35rem 0.5rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 0.8rem;
  color: #4a4640;
  cursor: pointer;
}

.volver:hover {
  border-color: var(--borde-fuerte);
  background: rgba(31, 111, 74, 0.06);
}

.volver:focus-visible {
  outline: 2px solid #1f6f4a;
  outline-offset: 2px;
}


/* Que es cada cosa en el mapa. Siempre visible: es la pregunta que se hace
 * quien llega, y no deberia haber que buscarla. */
.leyenda-simbolos {
  position: static;
  order: -2;
  width: 15.5rem;
  max-width: 100%;
}

.leyenda-simbolos-lista {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.leyenda-simbolos-lista li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  line-height: 1.35;
}

.sim {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

/* Las estrellas se dibujan con `clip-path` y no con una imagen: el simbolo del
 * mapa se genera en un canvas, y duplicarlo como PNG seria dos fuentes de
 * verdad para la misma forma. */
.sim-epicentro,
.sim-observado {
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
    50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%
  );
}

.sim-epicentro {
  background: #1c1b1a;
}

.sim-observado {
  background: #6b6660;
  width: 12px;
  height: 12px;
  margin-top: 3px;
}

.sim-fuego {
  width: 13px;
  height: 13px;
  margin-top: 2px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f4a621, #c02a4a 55%, #4a1370);
  border: 1px solid #3d0f52;
}


/* Sobre que arde. Barras y no una tarta: comparar longitudes es lo unico que el
 * ojo hace bien, y aqui la pregunta es "¿cual pesa mas?". */
.metrica-suelo {
  grid-column: 1 / -1;
}

.suelo-reparto {
  list-style: none;
  margin: 0.45rem 0 0.3rem;
  padding: 0;
  display: grid;
  gap: 0.28rem;
}

.suelo-reparto li {
  display: grid;
  grid-template-columns: 4.6rem 1fr 2.6rem;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
}

.suelo-nombre {
  color: #4a4640;
}

.suelo-barra {
  height: 7px;
  border-radius: 999px;
  background: rgba(28, 27, 26, 0.08);
  overflow: hidden;
}

.suelo-barra > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #1f6f4a;
}

.suelo-pct {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #4a4640;
}


/* La nota de la capa, plegada por defecto. Sigue estando —es lo que explica los
 * huecos de la malla— pero no ocupa media pantalla a zoom cercano. */
.leyenda-detalle > summary {
  margin-top: 0.5rem;
  font-size: 0.74rem;
  color: #4a4640;
  cursor: pointer;
  list-style: none;
}

.leyenda-detalle > summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 0.15s ease;
}

.leyenda-detalle[open] > summary::before {
  content: "▾ ";
}

.leyenda-detalle > summary::-webkit-details-marker {
  display: none;
}

.leyenda-detalle > summary:focus-visible {
  outline: 2px solid #1f6f4a;
  outline-offset: 2px;
}

.leyenda-detalle .leyenda-nota {
  margin-top: 0.4rem;
}

@media (prefers-reduced-motion: reduce) {
  .leyenda-detalle > summary::before { transition: none; }
}


/* La caja de simbolos, plegable. En movil arranca cerrada: 248 px de leyenda
 * sobre 390 de pantalla no dejan ver el mapa que la leyenda explica. */
.leyenda-simbolos > summary {
  cursor: pointer;
  list-style: none;
  margin: 0;
}

.leyenda-simbolos > summary::-webkit-details-marker {
  display: none;
}

.leyenda-simbolos > summary::after {
  content: " ▸";
  color: #6b6660;
}

.leyenda-simbolos[open] > summary::after {
  content: " ▾";
}

.leyenda-simbolos > summary:focus-visible {
  outline: 2px solid #1f6f4a;
  outline-offset: 2px;
}


/* Una linea bajo cada titulo que dice de que va el bloque.
 *
 * Los titulos eran correctos y opacos: "Expuesto en MMI≥7", "Terreno: peligros
 * secundarios", "Contraste con evaluacion de dano". Quien no trae el vocabulario
 * puesto veia cifras sin saber que preguntaban.
 *
 * En cuerpo pequeno y color apagado: acompana, no compite con la cifra. */
.subtitulo-bloque {
  margin: 0.1rem 0 0.75rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #6b6660;
  max-width: 34rem;
}


/* Salud y educacion bajo fuego, en una sola fila. Dos cifras pequenas juntas
 * pesan lo que deben: menos que la poblacion, mas que un dato de popup. */
.metrica-servicios {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1.1rem;
}

.metrica-servicios .servicio {
  font-size: 0.92rem;
  color: #1c1b1a;
}

.metrica-servicios .servicio strong {
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}

.metrica-servicios .etiqueta {
  flex-basis: 100%;
}


/* --- Indicadores con icono y nivel ---------------------------------------
 *
 * El icono ayuda a encontrar la cifra de un vistazo; el nivel dice si es mucha
 * o poca **comparada con lo que este sistema ha publicado**, que es la unica
 * comparacion honesta que tenemos. Tres barras y no una etiqueta: ocupa menos y
 * no compite con el numero.
 */
.metrica .cabeza {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.icono {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #6b6660;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* La rosa del viento: una flecha girada, no una animacion.

   `transform` no se aplica a un elemento en linea, asi que el envoltorio tiene
   que ser `inline-flex`. Sin eso el giro se ignora en silencio y la flecha
   apunta siempre al norte — que es peor que no tenerla, porque parece un dato.

   No lleva transicion: no es un movimiento, es un rumbo. */
.rosa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform-origin: 50% 50%;
}

.rosa .icono { stroke: var(--verde); stroke-width: 2; }

/* La llama y el birrete se leen mejor rellenos que perfilados. */
.metrica[data-nivel] .icono { stroke: #4a4640; }

.nivel {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  margin-left: auto;
  height: 12px;
  cursor: help;
}

.nivel i {
  display: block;
  width: 3px;
  border-radius: 1px;
  background: rgba(28, 27, 26, 0.16);
}

.nivel i:nth-child(1) { height: 5px; }
.nivel i:nth-child(2) { height: 8px; }
.nivel i:nth-child(3) { height: 11px; }

.metrica[data-nivel="bajo"] .nivel i:nth-child(1),
.metrica[data-nivel="medio"] .nivel i:nth-child(-n + 2),
.metrica[data-nivel="alto"] .nivel i {
  background: #1f6f4a;
}

/* Solo el tercio alto tira a rojo: es el que pide mirar. */
.metrica[data-nivel="alto"] .nivel i { background: #8f2c14; }

.metrica-servicios .servicio {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
}


/* --- Aire (auditoria visual del 30-ago-2026) ------------------------------- */
/* Nueve correcciones de margen y densidad, medidas en pantallazos a 390 y
   1440. Van juntas y al final del fichero a proposito: dos de las tres
   correcciones anteriores de esta hoja se perdieron por escribirse antes que
   la regla base a la que querian ganar. */

/* Los municipios se encadenaban: nombre, barra y el siguiente nombre a diez
   pixeles. La barra de uno parecia el subrayado del otro. */
.barras li { margin-bottom: 0.95rem; }
.barra-fila { margin-bottom: 0.3rem; }

/* Dentro de la caja de capas, tres familias de contenido —simbolos, rampa de
   fuego, interruptores— iban sin separacion: un muro. Un hilo entre grupos.
   `[hidden]` no pinta borde, asi que la rampa apagada no deja hilo doble. */
/* `> * + *` perdia: el bloque "una sola caja" pone `border: 0` a los hijos con
   especificidad (0,2,0) y el universal se queda en (0,1,0). `:not(:first-child)`
   toma la especificidad de su argumento y empata; estando despues, gana. La
   tercera mordida de la cascada en esta hoja — por eso esta seccion vive al
   final del fichero. */
.controles-mapa > :not(:first-child) {
  border-top: 1px solid var(--borde);
  padding-top: 0.65rem;
}

/* Las pastillas de orden se leian como una fila mas del filtro de paises:
   mismo lenguaje visual, seis pixeles de distancia. El aire es lo que dice
   "esto es otro grupo". */
.tabla-pista { margin-bottom: 0.9rem; }

/* La seccion de cobertura no tenia canal lateral: en cualquier pantalla mas
   estrecha que el contenedor (82rem), las metricas, la tabla y la nota tocaban
   el borde del viewport. #eventos siempre lo tuvo (1.75rem); esta seccion se
   quedo sin el. */
.cobertura { padding-left: 1.75rem; padding-right: 1.75rem; }

@media (max-width: 48rem) {
  /* Las pestañas de capa se partian en tres filas y, con la leyenda de
     intensidad debajo, entre las dos se comian el mapa entero de un telefono.
     Una fila que se desplaza: las siete capas siguen ahi y el mapa vuelve a
     verse. Es el mismo patron que la tabla de cobertura. */
  .capas {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .capas::-webkit-scrollbar { display: none; }
  .capas button { flex: 0 0 auto; }
}


/* --- El selector de amenaza (30-ago-2026) ---------------------------------- */
/* Un lente a la vez: la amenaza activa manda y la otra queda de contexto. El
   conmutador ocupa la esquina que era de las pestañas de capa, que bajan una
   fila: la amenaza se elige antes que la variable. */

.amenazas {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 6;
  display: flex;
  gap: 0.2rem;
  padding: 0.22rem;
  background: rgba(244, 242, 234, 0.95);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-pastilla);
  box-shadow: var(--sombra-corta);
}

.amenazas button {
  font: inherit;
  font-family: var(--tipo-titulo);
  font-size: 0.86rem;
  font-weight: 600;
  border: 0;
  background: none;
  color: var(--tenue);
  padding: 0.3rem 0.95rem;
  border-radius: var(--radio-pastilla);
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}

.amenazas button:hover { color: var(--bosque); }
.amenazas button[aria-pressed="true"] { background: var(--bosque); color: var(--crema); }

/* El fuego activo no se pinta del verde de marca: se pinta del magenta hondo de
   su propia rampa (FUEGO_COLORES[4]), que es su identidad en el mapa. Sobre el
   texto crema da 7,3:1. */
.amenazas button[data-amenaza="fuego"][aria-pressed="true"] { background: #8c1d64; }

/* Las pestañas de variable bajan una fila: primero se elige la amenaza. */
.capas { top: 3.55rem; }

@media (max-width: 48rem) {
  /* La fila de pestañas se acorta para no cruzarse con la barra de escala, que
     vive a la derecha bajo el zoom. Sigue siendo desplazable. */
  .capas { max-width: calc(100% - 8.6rem); }
}

/* La trampa del [hidden], otra vez: el atributo es display:none con
   especificidad de elemento y `.interruptor-observados { display: flex }` lo
   pisa — el mismo fallo que este repositorio ya documento en la lista de
   eventos. El control de sismos menores se oculta en modo fuego por atributo,
   asi que necesita su regla. */
.interruptor-observados[hidden] { display: none; }

/* --- El detalle de un foco de incendio (30-ago-2026) --------------------- */

/* Hereda del detalle de sismo: mismo lateral, misma retorica de bloques. Lo que
   cambia es la cifra de portada, que aqui es superficie y no poblacion — un
   incendio se mide primero por lo grande que es. */
#detalle-fuego .cifra-area {
  margin: 0;
  font-family: var(--tipo-titulo, inherit);
  font-size: 1.9rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

#detalle-fuego .cifra-area strong {
  font-weight: 700;
}

#detalle-fuego .apunte {
  display: block;
  margin-top: 4px;
  font-size: 0.82rem;
  color: var(--tinta-suave, #6b6862);
}

/* La rejilla del foco no hereda el `:nth-child(odd)` del detalle de sismo: con
   dos cifras de deteccion siempre pares, y con una a cuatro de exposicion, la
   regla de "la ultima impar ocupa el ancho" es exactamente la que se quiere. */
#fuego-metricas .metrica .cabeza,
#fuego-deteccion .metrica .cabeza {
  display: flex;
  align-items: center;
  gap: 6px;
}

#detalle-fuego .suelo-reparto {
  margin: 0;
}

#fuego-apostilla {
  margin-top: 14px;
}

/* En modo fuego la tarjeta viva se queda con una sola cifra: sin esto, el hueco
   de la que se oculta deja ver la linea de 1px del contenedor y parece rota.
   Es el mismo sintoma que motivo `.metrica:last-child:nth-child(odd)`. */
.metrica[hidden] {
  display: none;
}

/* --- Iconos en las categorías (31-ago-2026) ------------------------------ */

/* Los iconos ya existían para las métricas de un reporte —personas, salud,
   vías— pero las categorías de cobertura del suelo, terreno, detección y
   panorama iban sin ninguno: una lista de palabras donde el resto del panel
   lleva silueta. Estos tres contextos son texto en línea, no cabeceras de
   cifra, así que el icono se alinea con la letra y no con el número. */
/* El `:not(.contraste-terreno)` no es cosmética: la nota de la alerta de USGS
   es una frase con un `<strong>` dentro, y como primer hijo del `li` caía en
   esta regla. `inline-flex` convertía cada trozo del texto en un ítem, así que
   "USGS declara alerta / roja / , con 460.000 expuestas" salía repartido en
   tres columnas verticalmente centradas — legible en el DOM y roto en pantalla.
   Esa fila no lleva icono y no quiere alineación de icono. */
.suelo-nombre,
.terreno li:not(.contraste-terreno) > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* El de suelo va con el color de su barra, que es lo que lo hace legible de un
   vistazo: la silueta dice qué es y el tono lo confirma. */
.suelo-nombre .icono {
  stroke: #4b7f5a;
  opacity: 0.85;
}

/* En una lista de dos filas el icono compite con la cifra si pesa lo mismo. */
.terreno .icono {
  opacity: 0.7;
}

/* --- La sección de focos, gemela de la de reportes (31-ago-2026) ---------- */

/* LA TRAMPA DEL [hidden], POR CUARTA VEZ EN ESTE REPOSITORIO.
 *
 * `.filtro-paises { display: flex }` es un selector de clase (0,1,0) y el
 * atributo `hidden` es una regla de agente de usuario que pierde contra él. El
 * filtro de reportes tenía el mismo fallo desde el principio y no se veía
 * porque se muestra en cuanto hay dos países; el de focos arranca oculto y sin
 * `iso3` en el dato se queda así, que es como lo cazó
 * `test_ningun_elemento_oculto_se_sigue_viendo`.
 *
 * La regla cubre los dos, que es donde estaba de verdad el problema. */
.filtro-paises[hidden] {
  display: none;
}

/* El mismo aire y la misma jerarquía que `#eventos`: son dos índices gemelos y
   verlos distintos sugeriría que se leen distinto. Sin esto la sección quedaba
   pegada al panel y su título chocaba con el pie de la tarjeta viva, que es lo
   que cazó la sonda de solapes en 1280×620. */
#focos {
  padding: 3rem 1.75rem 2.5rem;
}

#focos h2 {
  font-size: 1.55rem;
  margin-bottom: 0.3rem;
}

/* --- El atributo `hidden` gana. Punto. (31-ago-2026) --------------------- */

/* QUINTA VEZ QUE ESTE FALLO MUERDE EN ESTE REPOSITORIO.
 *
 * `hidden` es una regla del agente de usuario con especificidad de elemento, y
 * cualquier `.clase { display: flex }` la pisa. Lo hemos arreglado uno a uno en
 * la lista de eventos, en el interruptor de observados, en la métrica viva y en
 * el filtro de países — y a la sexta clase con `display` alguien vuelve a
 * escribir `nodo.hidden = true` esperando que funcione, porque en HTML funciona.
 *
 * Arreglarlo por clase es jugar al topo. Esta regla lo cierra de una vez.
 *
 * Lleva `!important` a propósito y es de los pocos sitios donde se justifica:
 * sin él basta con que una regla de clase se declare más abajo para volver a
 * romperlo, que es exactamente cómo llegamos hasta aquí. Si algún día hace
 * falta enseñar algo marcado como oculto, la respuesta es quitarle el atributo,
 * no pisarlo desde el CSS.
 *
 * `test_ningun_elemento_oculto_se_sigue_viendo` es quien lo vigila. */
[hidden] {
  display: none !important;
}

/* --- La pantalla fisica: muescas y dedos (21-sep-2026) -------------------- */
/*
 * `viewport-fit=cover` en el `<meta>` de `index.html` lleva el lienzo hasta el
 * borde del cristal, que es lo que se quiere de un mapa. Lo que NO puede llegar
 * hasta ahi es el texto: en un telefono con muesca o con barra de gestos, la
 * marca de la cabecera y el credito del mapa caen debajo del recorte. Estas son
 * las reglas que pagan ese `cover`; sin ellas habria que quitarlo.
 *
 * `env(..., 0px)` con respaldo explicito: en un navegador sin muescas —y en el
 * Chromium con el que corren las pruebas— los cuatro valores son cero y el
 * `max()` devuelve el relleno de siempre.
 *
 * Los de `.barra` y `footer` NO estan aqui: van escritos donde ya se declaraba
 * su relleno. Reunidos en este bloque ganaban por orden a la regla movil de
 * `@media (max-width: 64rem)` —que pide 1,1rem— y la cabecera volvia a los
 * 1,75rem de escritorio en un telefono. Una media query no suma especificidad.
 */

/* La atribucion del mapa base vive pegada al borde inferior del lienzo, que con
   `cover` es el borde del cristal. */
.lienzo .maplibregl-ctrl-bottom-right,
.lienzo .maplibregl-ctrl-bottom-left {
  margin-bottom: env(safe-area-inset-bottom, 0px);
}

/* EL BLANCO DE UN DEDO NO ES EL DE UN RATON.
 *
 * Las pastillas de este visor estan dimensionadas por su texto: las pestañas de
 * capa salian a 27 px de alto y los desplegables de filtro a 30, contra los
 * 44x44 que piden las WCAG 2.5.8 (AAA) y las guias de iOS, y los 24x24 del AA.
 * En un raton eso no se nota y en un pulgar se falla el objetivo.
 *
 * Por `pointer: coarse` y no por ancho: lo que cambia el tamaño necesario es el
 * dedo, no la pantalla —una tableta de 1024 px tambien se toca— y una ventana
 * estrecha en un portatil no necesita botones mas grandes. */
@media (pointer: coarse) {
  /* Solo el alto: un `<button>` ya centra su contenido y `.solo-en-vista` ya es
     `flex`. Redeclarar `display` aqui arriesgaria el `[hidden]` de esa clase y
     la fila desplazable de pestañas, y no haria nada por el dedo. */
  .capas button,
  .amenazas button,
  .filtros-limpiar,
  .filtro select,
  .selector select,
  .solo-en-vista {
    min-height: 2.75rem;
  }

  .solo-en-vista input { width: 1.15rem; height: 1.15rem; }

  /* Los plegables y la casilla del mapa: la fila entera abre y cierra, asi que
     basta con darle alto a la fila. Se quedan en 32 px —no en los 44 de la
     barra de filtros— porque viven dentro del pie del mapa, y ahi cada pixel
     de control es un pixel de mapa: el intercambio va al reves. Siguen por
     encima del minimo de 24x24 que pide WCAG 2.5.8 en nivel AA, y su ancho es
     el de la caja entera. */
  .leyenda-simbolos > summary,
  .leyenda-detalle > summary,
  .interruptor-observados {
    min-height: 2rem;
  }
}

/* --- La barra de filtros (31-ago-2026) ----------------------------------- */

/* Se viste como el selector de evento de la cabecera —mismo chevron, misma
   pastilla, mismo verde al pasar— porque hace lo mismo: elegir qué se mira.
   Verlos distintos sugeriría dos sistemas de control donde hay uno. */
.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.9rem;
  padding: 0.7rem 1.75rem;
  background: var(--crema);
  border-bottom: 1px solid var(--borde);
}

.filtros-titulo {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tenue);
}

.filtro {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.filtro > .mono {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tenue);
  white-space: nowrap;
}

/* El mismo tratamiento que `.selector select`: chevron propio, el del sistema
   apagado. Repetir la declaración en vez de encadenar selectores mantiene los
   dos independientes — la cabecera puede cambiar sin arrastrar esto. */
.filtro select {
  font: inherit;
  font-size: 0.84rem;
  color: var(--bosque);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%231c3328' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  appearance: none;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-pastilla);
  padding: 0.36rem 2.1rem 0.36rem 0.85rem;
  max-width: 15rem;
  /* Sin esto un `select` no baja del ancho de su opción más larga y «Todos los
     países (21)» empuja la barra fuera de la pantalla en un teléfono. */
  min-width: 0;
  text-overflow: ellipsis;
  cursor: pointer;
}

.filtro select:hover {
  border-color: var(--verde);
}

.filtros-cuenta {
  margin: 0 0 0 auto;
  font-size: 0.76rem;
  color: var(--tenue);
  white-space: nowrap;
}

/* Solo aparece cuando hay algo que quitar. Un botón de limpiar siempre visible
   no informa; visible solo cuando un filtro está actuando es además la señal de
   que lo está — que es justo lo que se pierde cuando los controles viven lejos
   del mapa. */
.filtros-limpiar {
  font: inherit;
  font-size: 0.78rem;
  padding: 0.32rem 0.75rem;
  border: 1px solid transparent;
  border-radius: var(--radio-pastilla);
  background: transparent;
  color: var(--verde);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.filtros-limpiar:hover {
  border-color: var(--verde);
  text-decoration: none;
}

/* EN UN TELÉFONO LA BARRA ES UNA SOLA FILA, Y SE DESPLAZA.
 *
 * Envolviendo se comía el alto del mapa: en 390×844 los seis controles caían en
 * cinco líneas, empujaban el lienzo hacia abajo y la atribución de OpenStreetMap
 * —que la ODbL exige que se vea— quedaba fuera de la ventana. Lo cazó
 * `test_la_atribucion_del_mapa_no_queda_debajo_de_nada`.
 *
 * Los rótulos («PAÍS», «PERÍODO») se van con ellas: el propio desplegable ya
 * dice qué es —«Todos los países», «24 h», «Reciente»— así que en pantalla eran
 * repetición, no ayuda. El `aria-label` de cada `select` se queda, que es quien
 * lo cuenta a un lector de pantalla. */
@media (max-width: 700px) {
  .filtros {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0.5rem 1rem;
    gap: 0.45rem;
  }
  .filtros::-webkit-scrollbar {
    display: none;
  }
  .filtros-titulo,
  .filtro > .mono {
    display: none;
  }
  .filtro,
  .filtros-limpiar,
  .solo-en-vista {
    flex: 0 0 auto;
  }
  .filtros-cuenta {
    margin-left: 0.3rem;
    flex: 0 0 auto;
  }
  .filtro select {
    max-width: 9.5rem;
  }
}

/* --- Los sismos menores: la misma tarjeta, en voz baja -------------------- */
/* Comparte `.lista-eventos` con los reportes a proposito: es la misma clase de
   objeto. Lo que cambia es el peso, porque aqui no hay nada que medir. */
.lista-eventos li.menor {
  border-style: dashed;
}

.menor-lugar {
  font-family: var(--tipo-titulo);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.015em;
  color: var(--bosque);
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.menor-lugar:hover { color: var(--verde); }

/* La casilla que en un reporte lleva la cifra. Aqui lleva su ausencia, y va
   tenue para que no compita con las cifras de verdad de la lista de arriba. */
.evento-cifra .sin-medicion {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--tenue-mas);
}

/* --- Telefono primero: lo que busca quien llega desde un enlace ------------

   Medido el 9-oct-2026 en 390x844 con el M7,7 de Azuero, que se compartio en
   historias: la pagina medía 18.000 px, el mapa ocupaba media pantalla con la
   leyenda encima del epicentro, y las cifras clave quedaban debajo de 63 lineas
   de cambios de version. Aqui se ordena para esa persona: mapa grande, cifras
   y municipios primero, el detalle tecnico despues, y las listas recortadas. */
@media (max-width: 48rem) {
  /* EL MAPA ENTERO EN LA PRIMERA PANTALLA, Y TAN GRANDE COMO QUEPA.
     Lo que hay encima —cabecera, aviso y filtros— mide unos 21rem en un
     telefono; el mapa toma el resto, con tope en el 70 % para que asome el
     panel. Si se pasara, la atribucion del mapa base —que la ODbL exige ver—
     quedaria debajo del pliegue, y eso se mide en 360x780. `svh` para que la
     barra del navegador movil no deje el pie fuera. */
  .lienzo {
    height: clamp(24rem, calc(100vh - 21rem), 70vh);
    height: clamp(24rem, calc(100svh - 21rem), 70svh);
    min-height: 24rem;
  }

  /* EL MAPA ES EL PROTAGONISTA (10-oct-2026).
     Con el arreglo anterior seguia apretado: cabecera en dos filas, aviso de
     cinco lineas y pestañas de 44 px en dos filas se llevaban 300 px y media
     pantalla de mapa. Ahora la cabecera es una fila —sello, nombre y selector;
     su navegacion baja al pie—, el aviso una linea que se despliega, y el mapa
     llena el resto de la pantalla: ~5,9rem de cabecera y aviso, y el resto
     es mapa. La atribucion sigue entrando en la primera pantalla. */
  .barra {
    flex-wrap: nowrap;
    gap: 0.6rem;
    padding:
      max(0.5rem, env(safe-area-inset-top, 0px))
      max(0.75rem, env(safe-area-inset-right, 0px))
      0.5rem
      max(0.75rem, env(safe-area-inset-left, 0px));
  }
  .barra nav { display: none; }
  .marca { gap: 0.4rem; flex: 0 0 auto; }
  .marca-sello { width: 1.5rem; height: 1.5rem; }
  .marca-nombre { font-size: 0.95rem; }
  .selector { order: 0; flex: 1 1 auto; width: auto; margin-left: 0; }
  .selector > .mono { display: none; }
  /* 16 px y no menos: por debajo, iOS Safari amplia la pagina al tocar el
     selector y no la devuelve. Es el control principal del visor. */
  .selector select { flex: 1 1 auto; width: 100%; font-size: 16px; padding: 0.35rem 2rem 0.35rem 0.75rem; }

  .aviso {
    position: relative;
    padding: 0.45rem 4.4rem 0.45rem max(0.75rem, env(safe-area-inset-left, 0px));
    font-size: 0.8rem;
    line-height: 1.45;
  }
  /* Se recorta el texto y no la caja: con `overflow` en la caja, su relleno
     inferior dejaba asomar media segunda linea. */
  .aviso:not(.abierto) { display: flex; align-items: baseline; gap: 0.45rem; }
  .aviso:not(.abierto) #aviso-lectura-texto {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
    min-width: 0;
  }
  .aviso-mas {
    position: absolute;
    right: 0.5rem;
    top: 0.3rem;
    min-height: 1.6rem;
    padding: 0.15rem 0.7rem;
    font: inherit;
    font-size: 0.75rem;
    color: var(--ambar-texto);
    background: rgba(244, 242, 234, 0.9);
    border: 1px solid rgba(200, 148, 26, 0.45);
    border-radius: var(--radio-pastilla);
    cursor: pointer;
    z-index: 4;
  }
  .aviso-mas:focus-visible { outline: 2px solid var(--bosque); outline-offset: 2px; }

  .lienzo {
    height: calc(100vh - 5.9rem);
    height: calc(100svh - 5.9rem);
    min-height: 24rem;
  }
  /* Sin evento abierto los filtros de la lista siguen encima del mapa: se
     descuenta su fila para que el pie del mapa y la atribucion no caigan
     debajo del pliegue. */


  /* Los controles del mapa, mas chicos: 38 px de alto, por encima de los 24 de
     WCAG 2.5.8 AA. Cada pixel de control aqui es un pixel de mapa. */
  .amenazas { top: 0.55rem; left: 0.55rem; padding: 0.15rem; }
  .amenazas button { font-size: 0.8rem; padding: 0.25rem 0.8rem; }
  .capas { top: 3.15rem; left: 0.55rem; padding: 0.15rem; }
  .capas button { font-size: 0.78rem; padding: 0.25rem 0.7rem; }
  .lienzo .maplibregl-ctrl-scale { font-size: 0.62rem; padding: 0 0.3rem; }
}

@media (max-width: 48rem) and (pointer: coarse) {
  .capas button,
  .amenazas button { min-height: 2.35rem; }
}

.aviso-mas { display: none; }
@media (max-width: 48rem) {
  .aviso-mas { display: inline-block; }
  .pie-nav { display: block; }
}
@media (min-width: 48.0625rem) {
  .pie-nav { display: none; }
}

@media (max-width: 48rem) {

  /* El orden del panel del evento ya es el del HTML para todas las anchuras:
     cifras, municipios y el detalle tecnico plegado (10-oct-2026). */

  /* Con un evento abierto, los filtros de la lista de abajo no van encima del
     mapa: eran 60 px de la primera pantalla para una lista que no se ve. Al
     volver al panorama reaparecen. */

  /* Lo que se salta con un enlace o un `scrollIntoView` no puede quedar
     debajo de la cabecera fija. */
  #lateral, #lateral-detalle, #eventos, #menores { scroll-margin-top: 7.5rem; }

  /* Listas largas: las primeras y un boton con las que faltan. */
  .lista-eventos > li.fuera-de-recorte { display: none; }
  .ver-todos:not([hidden]) {
    display: block;
    width: 100%;
    min-height: 2.75rem;
    margin: 0.75rem 0 0;
    padding: 0.7rem 1rem;
    font: inherit;
    font-size: 0.9rem;
    color: var(--bosque);
    background: transparent;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-medio);
    cursor: pointer;
  }
  .ver-todos:focus-visible { outline: 2px solid var(--bosque); outline-offset: 2px; }
}

/* --- Auditoria movil del 10-oct-2026 ---------------------------------------

   Medido con Playwright en 390x844 y 360x780: rotulos funcionales a 10-11 px,
   selectores a 13 px (zoom de iOS al tocarlos), explicaciones solo en `title`
   y objetivos de 20 px. Lo que sigue lo corrige sin cambiar la jerarquia: las
   cifras siguen siendo lo grande. */

.nota-niveles {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.6rem 0 0;
  font-size: 0.78rem;
  color: var(--tenue);
}
.nota-niveles .nivel { margin-left: 0; flex: 0 0 auto; cursor: default; }
.nota-niveles .nivel i { background: #1f6f4a; }

/* Distintivos que se explican con un toque. */
.distintivo-plegable > summary { list-style: none; cursor: pointer; }
.distintivo-plegable > summary::-webkit-details-marker { display: none; }
.distintivo-plegable > summary::after { content: " ⓘ"; opacity: 0.7; }
.distintivo-plegable[open] > summary::after { content: " ×"; }
.distintivo-plegable > summary:focus-visible { outline: 2px solid var(--bosque); outline-offset: 2px; }
.distintivo-nota {
  margin: 0.4rem 0 0.2rem;
  max-width: 34rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--tenue);
}
#detalle-distintivos:has(.distintivo-plegable[open]) { flex-wrap: wrap; }

@media (max-width: 48rem) {
  .filtro select { font-size: 16px; }

  /* Ningun rotulo funcional por debajo de 12 px. */
  .metrica .etiqueta,
  .ficha-mmi,
  .eyebrow,
  .area-banda,
  .evento-cifra small,
  .evento-meta,
  .pie-mapa > #leyenda .leyenda-valor,
  .leyenda-valor,
  .pie-mapa > .pie-mapa-tirador,
  .aviso .mono,
  .leyenda-titulo,
  .leyenda-detalle > summary,
  .leyenda-nota,
  .leyenda-simbolos > summary,
  .distintivo,
  .area-cifra,
  #detalle-area span,
  .franja-nombre,
  .metrica .apunte,
  .barra-valor,
  .tabla-cobertura thead th,
  .tabla-pista {
    font-size: 0.75rem;
  }

  /* Listas de enlaces —descargas y pie— con 24 px de alto por enlace. Los
     enlaces dentro de una frase quedan fuera de 2.5.8 por la excepcion de
     texto en linea; estos son una lista que se toca uno a uno. */
  .descargas { line-height: 2; }
  .descargas a,
  .pie-nav a,
  footer a { display: inline-block; padding: 0.2rem 0; }
  .metrica .etiqueta,
  .eyebrow,
  .evento-cifra small { letter-spacing: 0.06em; }
  .lienzo .maplibregl-ctrl-scale { font-size: 0.72rem; }

  /* Objetivos de al menos 24 px (WCAG 2.5.8 AA). */
  .menor-lugar { padding: 0.2rem 0; min-height: 1.75rem; }
  .pie-mapa > .pie-mapa-tirador { min-height: 2rem; }
  .aviso-mas { min-height: 1.75rem; }
}

.cargando-evento {
  position: absolute;
  left: 50%;
  bottom: 4.2rem;
  transform: translateX(-50%);
  z-index: 6;
  margin: 0;
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
  color: var(--crema);
  background: var(--bosque);
  border-radius: var(--radio-pastilla);
  box-shadow: var(--sombra-corta);
  pointer-events: none;
}

/* --- Una sola lista, en el panel, con sus filtros (10-oct-2026) ------------

   La lista de reportes y la de focos viven ahora en el panel lateral, debajo
   de las cifras del panorama, con los filtros en su cabecera. En PC el panel
   es una columna que se desplaza sola junto al mapa; en el telefono va debajo
   del mapa y los filtros se pliegan en un boton. */
.plegable-filtros {
  margin: 1.1rem 0 0.4rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-medio);
  background: var(--crema-honda, rgba(28, 51, 40, 0.03));
}
.plegable-filtros-tirador {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--bosque);
}
.plegable-filtros-tirador::-webkit-details-marker { display: none; }
.plegable-filtros-tirador::after { content: "▾"; margin-left: auto; color: var(--tenue); }
.plegable-filtros:not([open]) > .plegable-filtros-tirador::after { content: "▸"; }
.plegable-filtros-tirador:focus-visible { outline: 2px solid var(--bosque); outline-offset: 2px; }
.resumen-filtros {
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--verde);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plegable-filtros > .filtros {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.6rem;
  padding: 0.2rem 0.9rem 0.85rem;
  margin: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.plegable-filtros > .filtros > .filtros-titulo { display: none; }
.plegable-filtros .filtro { flex: 1 1 9rem; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.plegable-filtros .filtro select { width: 100%; }
.plegable-filtros .solo-en-vista { flex: 1 1 100%; }
.plegable-filtros .filtros-cuenta { flex: 1 1 auto; margin: 0; align-self: center; }

.lista-panel { margin-top: 1rem; }
.lista-panel[hidden] { display: none; }
.lista-titulo { font-size: 1.1rem; margin: 0 0 0.2rem; }
.lista-panel .seccion-lema { margin: 0 0 0.8rem; font-size: 0.82rem; }

/* Tarjetas compactas: una columna, magnitud, lugar, fecha y la cifra. */
.lateral .lista-eventos { grid-template-columns: 1fr; gap: 0.5rem; }
.lateral .lista-eventos li { padding: 0.7rem 0.85rem; border-radius: var(--radio-medio); }
.lateral .lista-eventos li:hover { transform: none; box-shadow: none; }
.lateral .lista-eventos a { font-size: 0.95rem; }
.lateral .evento-mag { font-size: 0.85rem; padding: 0.05rem 0.5rem; }
.lateral .evento-meta { margin-top: 0.25rem; }
.lateral .evento-cifra { padding-top: 0.35rem; font-size: 1.05rem; }

/* El rotulo de cada grupo, sobre su primera fila visible. */
.lista-eventos li.inicio-grupo { position: relative; margin-top: 1.9rem; }
.lista-eventos li.inicio-grupo:first-child { margin-top: 1.6rem; }
.lista-eventos li.inicio-grupo::before {
  position: absolute;
  left: 0;
  top: -1.55rem;
  font-family: var(--tipo-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--verde);
}
.lista-eventos li.inicio-grupo[data-grupo="vivo"]::before { content: "En vivo"; }
.lista-eventos li.inicio-grupo[data-grupo="pasado"]::before { content: "Reconstrucciones de sismos pasados"; }

/* Las cifras del panorama, en una fila corta encima de la lista: las tres
   juntas y sin la linea de apunte, que es el detalle del sismo mayor. */
#panorama .metricas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#panorama .metrica { padding: 0.6rem 0.7rem; }
#panorama .metrica .valor { font-size: 1.15rem; }
#panorama .metrica .apunte { display: none; }
#panorama .metrica .etiqueta { letter-spacing: 0.04em; }
#panorama .metrica:last-child:nth-child(odd) { grid-column: auto; }

.plegable-filtros .filtro { align-items: stretch; text-align: left; }
.lateral #eventos, .lateral #focos { padding: 0; }
#eventos.lista-panel h2, #focos.lista-panel h2 { font-size: 1.1rem; margin: 0 0 0.2rem; }

/* EN SISMOS EL PANEL ABRE CON LA LISTA (decision del dueño, 10-oct-2026).
   La tarjeta «ahora mismo» —los sismos vistos sin reporte y su «ver en el
   mapa»— baja al final del panel. En fuego sigue arriba: alli es la cifra
   principal. `#focos[hidden]` es el modo sismos. */
#lateral-vacio { display: flex; flex-direction: column; }
#lateral-vacio[hidden] { display: none; }
#lateral-vacio:has(#focos[hidden]) > #en-vivo { order: 10; margin-top: 1.5rem; }

/* --- El sismo abierto (bloque B, 10-oct-2026) ----------------------------- */

/* Capas: tres a la vista; el resto detras de «Más capas». La activa siempre. */
.capas:not(.con-extras) > .capa-extra:not([aria-selected="true"]) { display: none; }
.capas-mas {
  font: inherit;
  font-size: 0.79rem;
  padding: 0.3rem 0.8rem;
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio-pastilla);
  background: transparent;
  color: var(--bosque);
  cursor: pointer;
  white-space: nowrap;
}
.capas-mas:focus-visible { outline: 2px solid var(--bosque); outline-offset: 2px; }
@media (max-width: 48rem) {
  .capas-mas { font-size: 0.78rem; padding: 0.25rem 0.7rem; }
}
@media (max-width: 48rem) and (pointer: coarse) {
  .capas-mas { min-height: 2.35rem; }
}

/* Tres cifras grandes; el resto, en una rejilla mas chica debajo. */
#detalle-metricas > .metrica:nth-child(n + 4) { padding: 0.55rem 0.75rem; }
#detalle-metricas > .metrica:nth-child(n + 4) .valor { font-size: 1.1rem; }
#detalle-metricas > .metrica:nth-child(n + 4) .icono { width: 0.95rem; height: 0.95rem; }

/* Detalle tecnico, plegado. */
.detalle-tecnico {
  margin: 1.5rem 0 0.5rem;
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
}
.detalle-tecnico > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
  min-height: 2.75rem;
  padding: 0.7rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--tipo-titulo);
  font-weight: 600;
  font-size: 1rem;
  color: var(--bosque);
}
.detalle-tecnico > summary::-webkit-details-marker { display: none; }
.detalle-tecnico > summary::before { content: "▸"; color: var(--tenue); }
.detalle-tecnico[open] > summary::before { content: "▾"; }
.detalle-tecnico > summary:focus-visible { outline: 2px solid var(--bosque); outline-offset: 2px; }
.detalle-tecnico-pista { font-family: var(--tipo-cuerpo, inherit); font-weight: 400; font-size: 0.82rem; color: var(--tenue); }
.detalle-tecnico > .bloque:first-of-type { margin-top: 0.5rem; }

/* En el telefono: las tres primeras a todo el ancho, el resto en dos columnas.
   Ocho tarjetas en una sola columna eran dos pantallas de cifras iguales. */
@media (max-width: 30rem) {
  #detalle-metricas { grid-template-columns: 1fr 1fr; }
  #detalle-metricas > .metrica:nth-child(-n + 3) { grid-column: 1 / -1; }
  #detalle-metricas > .metrica:nth-child(n + 4) .etiqueta { letter-spacing: 0.03em; }
}

/* --- Secciones de apoyo (bloque C, 10-oct-2026) ---------------------------- */

.menores-controles { margin: 0 0 0.6rem; }
.menores-controles .interruptor-observados { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.25rem; font-size: 0.9rem; cursor: pointer; }
.menores-controles .interruptor-observados[hidden] { display: none; }
.menores-controles .interruptor-observados input { width: 1.1rem; height: 1.1rem; }

.menores-plegable > summary,
.cobertura-plegable > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-pastilla);
  font-size: 0.9rem;
  color: var(--bosque);
  cursor: pointer;
  list-style: none;
}
.menores-plegable > summary::-webkit-details-marker,
.cobertura-plegable > summary::-webkit-details-marker { display: none; }
.menores-plegable > summary::after,
.cobertura-plegable > summary::after { content: "▸"; color: var(--tenue); }
.menores-plegable[open] > summary::after,
.cobertura-plegable[open] > summary::after { content: "▾"; }
.menores-plegable > summary:focus-visible,
.cobertura-plegable > summary:focus-visible { outline: 2px solid var(--bosque); outline-offset: 2px; }
.menores-plegable[open] > summary,
.cobertura-plegable[open] > summary { margin-bottom: 0.8rem; }

/* Filas compactas: magnitud, lugar, fecha y la ausencia de medicion. */
.lista-menores { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--borde); }
.lista-menores > li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.1rem 0.6rem;
  padding: 0.55rem 0.2rem;
  border: 0;
  border-bottom: 1px solid var(--borde);
  border-radius: 0;
  background: none;
}
.lista-menores > li:hover { transform: none; box-shadow: none; }
.lista-menores > li .evento-cabecera { grid-column: 1 / -1; }
.lista-menores > li .evento-meta { margin: 0; }
.lista-menores > li .evento-cifra { margin: 0; padding: 0; font-size: 0.8rem; font-weight: 400; text-align: right; }
.lista-menores > li .evento-cifra small { display: none; }
.lista-menores .evento-mag { font-size: 0.8rem; }
.lista-menores .menor-lugar { font-size: 0.92rem; }

/* --- Pagina de estado (bloque C, 10-oct-2026) ------------------------------ */
.hoja .frase { font-size: 1.05rem; line-height: 1.55; max-width: 40rem; margin: 0 0 1rem; }
.como-se-mide { margin: 1rem 0 0.5rem; }
.como-se-mide > summary {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.5rem;
  padding: 0.3rem 0.9rem; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-pastilla);
  font-size: 0.9rem; color: var(--bosque); cursor: pointer; list-style: none;
}
.como-se-mide > summary::-webkit-details-marker { display: none; }
.como-se-mide > summary::after { content: "▸"; color: var(--tenue); }
.como-se-mide[open] > summary::after { content: "▾"; }
.como-se-mide > summary:focus-visible { outline: 2px solid var(--bosque); outline-offset: 2px; }
.como-se-mide h3 { margin: 1rem 0 0.5rem; font-size: 1rem; }

/* En el telefono la tabla de sismos se apila: una ficha por sismo, cada dato
   con su nombre delante. Seis columnas cortadas no se leen. */
@media (max-width: 40rem) {
  #tabla-eventos thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  #tabla-eventos, #tabla-eventos tbody, #tabla-eventos tr, #tabla-eventos td { display: block; }
  #tabla-eventos tr { padding: 0.6rem 0; border-bottom: 1px solid var(--borde); }
  #tabla-eventos td { display: flex; justify-content: space-between; gap: 1rem; padding: 0.15rem 0; border: 0; text-align: right; }
  #tabla-eventos td::before { content: attr(data-rotulo); color: var(--tenue); font-size: 0.8rem; text-align: left; }
  #tabla-eventos td:first-child { font-weight: 600; }
}

/* La seccion de menores tenia el aire de `#eventos`, que se mudo al panel. */
#menores { padding: 3rem 1.75rem 2.5rem; }
#menores h2 { font-size: 1.55rem; margin-bottom: 0.3rem; }
@media (max-width: 64rem) { #menores { padding: 2.25rem 1.1rem 2rem; } }

/* --- Modo fuego (bloque D, 10-oct-2026) ----------------------------------- */
.foco-lugar { font-family: var(--tipo-titulo); font-weight: 600; font-size: 0.98rem; color: var(--bosque); }
#lista-focos .evento-cifra { font-size: 1.05rem; }