/* panel.css — Aspecto común de las páginas-panel: campana-2026.html y
   archivo.html.

   Un panel es una página de datos (mapa, cifras, tabla, fichas), no de lectura:
   coge los tokens de tokens.css pero NO articulo.css, cuya retícula y medida de
   línea están pensadas para texto seguido.

   Estaba todo incrustado en el <style> de campana-2026.html. Al nacer el
   archivo de incendios con la misma cara —mismas cifras arriba, misma tabla,
   mismos estados— se sacó aquí: son la misma estructura repetida, y repetirla
   también en el CSS garantizaba que una de las dos se quedara atrás al primer
   retoque. Cada página conserva en su <style> solo lo suyo.

   El HTML de las cifras, las tablas y las fichas lo regenera collector.py entre
   los marcadores PRERENDER, y solo escribe clases semánticas (stat, tarjeta,
   badge b-*), así que el aspecto se cambia aquí sin tocar el recolector. */

* { -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--fuente-texto);
  background: var(--fondo);
  color: var(--tinta);
  /* La barra de navegacion.js es fija y tapaba el titular: el hueco no estaba
     reservado desde antes de esta hoja, con el cabecero oscuro también. */
  padding-top: var(--barra-sup, 3.5rem);
}
h1, h2 { font-family: var(--fuente-titulo); font-weight: 400; letter-spacing: -.01em; }

/* Colores de estado: son datos con fuente oficial detrás, no decoración. */
:root {
  --activo: #d43f3a; --estabilizado: #e8b800; --controlado: #3e9e3e; --extinguido: #8a8a8a;
}

.badge { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #fff; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.b-activo { background: var(--activo); } .b-estabilizado { background: var(--estabilizado); color: #3d3000; }
.b-controlado { background: var(--controlado); } .b-extinguido { background: var(--extinguido); }

.tarjeta { background: var(--superficie); border: 0; border-radius: var(--radio-grande); padding: 16px 18px; }
.tarjeta h3 { margin: 0 0 6px; font-size: 1.05rem; font-family: var(--fuente-texto); font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tarjeta a { color: var(--enlace); }

.fecha { color: var(--tinta-tenue); font-size: .78rem; }
.superficie { font-size: .85rem; margin-top: 6px; }
.leyenda { font-size: .8rem; margin: 4px 0 0; color: var(--tinta-suave); }
.punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }

.stat { background: var(--superficie); border: 0; border-radius: var(--radio-grande); padding: 14px 18px; text-align: center; }
.stat .num { font-family: var(--fuente-titulo); font-weight: 400; font-size: 1.6rem; color: var(--acento-hondo); }
.stat .lbl { font-size: .78rem; color: var(--tinta-suave); }

table { width: 100%; border-collapse: collapse; background: var(--superficie); border: 0; border-radius: var(--radio); overflow: hidden; font-size: .85rem; }
th, td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { background: var(--superficie-honda); font-weight: 700; cursor: pointer; }
tr:last-child td { border-bottom: none; }
/* En móvil la tabla no cabe (cinco columnas con fecha y municipio): que
   scrollee ella sola en vez de ensanchar la página entera. */
.tabla-scroll { overflow-x: auto; border-radius: var(--radio); }
.tabla-scroll table { min-width: 520px; }

/* Cabecera: sin la caja oscura, sobre el propio fondo */
.panel-cabecera { padding: 28px 0 14px; }
.panel-titulo { font-size: 30px; line-height: 1.1; margin: 0; }
.panel-sumario { font-size: 14px; line-height: 22px; color: var(--tinta-suave); margin: 8px 0 0; max-width: 90ch; }
.panel-sumario strong, .panel-sumario #actualizado { color: var(--tinta); font-weight: 700; }
.panel-sumario a { color: var(--enlace); font-weight: 600; }
/* Todos los h2 llevan su aire por arriba: el primero no abre la página, viene
   después de la fila de cifras. */
.panel-h2 { font-size: 22px; margin: 34px 0 12px; }

/* La barra de navegacion.js sigue con clases de Tailwind */
#nav-container header { background: color-mix(in srgb, var(--fondo) 92%, #fff) !important; border-color: var(--borde) !important; }
#nav-container .text-green-700 { color: var(--acento-hondo) !important; }
#footer-container .bg-slate-950 { background: #2e2b25 !important; }