/* ficha.css — Aspecto de la página propia de cada incendio (docs/i/<ccaa>/…).

   Estas páginas las escribe collector.py (_html_pagina_incendio) y son las que
   se comparten por WhatsApp y las que indexa Google: para mucha gente son la
   primera —y a veces la única— página del observatorio que ven.

   Hasta el 22-08-2026 llevaban su propio diseño incrustado en el HTML: otra
   tipografía (Inter), otro fondo (gris azulado), barra verde oscura y, lo peor,
   otros colores de estado —el rojo de «activo» no era el mismo rojo que el del
   mapa—. Un color que significa un dato tiene que ser el mismo en toda la web,
   así que ahora salen de los mismos tokens que las demás páginas.

   No cargan JavaScript a propósito: son páginas de lectura que tienen que
   pintarse enteras a la primera, sin esperar a nada. Por eso la barra de marca
   está escrita aquí y no la pone navegacion.js. */

* { box-sizing: border-box }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--enlace) }

/* ---- Barra de marca (misma cara que la de navegacion.js) ---- */
header.barra {
  background: color-mix(in srgb, var(--fondo) 92%, #fff);
  border-bottom: 1px solid var(--borde);
  padding: 9px 18px;
}
header.barra a {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; color: var(--tinta);
}
header.barra svg { width: 22px; height: 22px; flex-shrink: 0 }
header.barra .marca {
  font-family: 'Caveat', cursive; font-size: 28px; font-weight: 700;
  line-height: 1; letter-spacing: -.5px;
}
header.barra .coletilla { font-size: 13px; color: var(--tinta-suave) }
/* En un móvil estrecho la coletilla parte la barra en dos líneas */
@media (max-width: 460px) { header.barra .coletilla { display: none } }

.envoltorio { max-width: 44rem; margin: 0 auto; padding: 4px 18px 56px }

h1 {
  font-family: var(--fuente-titulo); font-weight: 400;
  font-size: 30px; line-height: 1.1; letter-spacing: -.01em;
  margin: var(--ritmo) 0 var(--medio-ritmo);
}
h2 {
  font-family: var(--fuente-titulo); font-weight: 400;
  font-size: 22px; letter-spacing: -.01em;
  margin: 34px 0 12px;
}

.sumario { font-size: 15px; color: var(--tinta-suave); margin: 0 0 20px }

/* Colores de estado: los pone el recolector en línea, porque son datos con
   fuente oficial detrás (los mismos valores que el mapa y las tablas). */
.insignia {
  display: inline-block; border-radius: 999px; padding: 3px 10px;
  font-size: .7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
}

.datos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 10px; padding: 0; margin: 0; list-style: none;
}
.datos li { background: var(--superficie); border-radius: var(--radio); padding: 12px 16px }
.datos b { display: block; font-size: 17px; font-weight: 700 }
.datos span {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--tinta-suave); font-weight: 700;
}

ol.crono { list-style: none; padding: 0; margin: 0; font-size: 15px }
ol.crono li { border-left: 2px solid var(--borde); padding: 0 0 14px 16px; position: relative }
ol.crono li:last-child { border-left-color: transparent; padding-bottom: 0 }
ol.crono li::before {
  content: ""; position: absolute; left: -5px; top: 7px;
  width: 8px; height: 8px; border-radius: 99px; background: var(--tinta-tenue);
}

.gris { color: var(--tinta-suave) }
ul.fuentes { font-size: 15px; padding-left: 18px }
ul.fuentes li { margin-bottom: 7px }

.cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--acento-hondo);   /* blanco sobre #56633f: 6,5:1 */
  color: #fff; font-weight: 600; font-size: 15px; text-decoration: none;
  padding: 10px 22px; border-radius: 999px; margin: var(--ritmo) 0 8px;
}
.cta:hover { background: #3d472b }

footer {
  font-size: 13px; color: var(--tinta-suave);
  margin-top: 34px; border-top: 1px solid var(--borde); padding-top: 14px;
}