* {
  box-sizing: border-box;
}

:root {
  --bg: #16130f;
  --bg-sidebar: #1c1814;
  --bg-card: #211d18;
  --bg-card-alt: #2a251f;
  --border: #37302a;
  --text: #f0ebe4;
  --text-muted: #a89f93;
  --accent: #f97316;
  --accent-soft: rgba(249, 115, 22, 0.14);
  --red: #ef4444;
  --orange: #f59e0b;
  --green: #22c55e;
  --purple: #8b7cf6;
  --tg-bg-start: #2a1c10;
  --tg-bg-end: #241b12;
  --tg-border: #4a3520;
  --layer-control-bg: rgba(22, 19, 15, 0.75);
  --weather-banner-start: #1e3a8a;
  --weather-banner-end: #0891b2;
}

/* Modo día: el usuario lo fija a mano con el botón de la topbar (no sigue
   prefers-color-scheme del sistema, es una elección "estática" persistida). */
:root[data-theme="light"] {
  --bg: #f6f2ea;
  --bg-sidebar: #ffffff;
  --bg-card: #ffffff;
  --bg-card-alt: #f1ebe0;
  --border: #ddd3c2;
  --text: #221c14;
  --text-muted: #6c6255;
  --accent: #ea580c;
  --accent-soft: rgba(234, 88, 12, 0.12);
  --red: #dc2626;
  --orange: #d97706;
  --green: #16a34a;
  --purple: #7c3aed;
  --tg-bg-start: #fff3e6;
  --tg-bg-end: #ffe9d1;
  --tg-border: #f0c896;
  --layer-control-bg: rgba(246, 242, 234, 0.75);
  --weather-banner-start: #2563eb;
  --weather-banner-end: #06b6d4;
}

html {
  background: var(--bg);
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

a {
  color: inherit;
  text-decoration: none;
}

.layout {
  display: flex;
  min-height: 100vh;
}

/* ---------- Sidebar ---------- */

.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 18px;
  border-bottom: 1px solid var(--border);
}

.sidebar-nav-toggle {
  display: none;
  margin-left: auto;
  background: var(--bg-card-alt);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  width: 38px;
  height: 38px;
  font-size: 1.1rem;
  cursor: pointer;
  flex-shrink: 0;
}

.brand-logo-full {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 190px;
  height: auto;
  display: block;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0;
  flex: 1;
}

.nav-item {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.nav-item:hover {
  background: var(--bg-card-alt);
  color: var(--text);
}

.nav-icon {
  width: 18px;
  text-align: center;
  margin-right: 4px;
  color: var(--accent);
}

.nav-item.nav-active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.sidebar-telegram {
  background: linear-gradient(160deg, var(--tg-bg-start), var(--tg-bg-end));
  border: 1px solid var(--tg-border);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  margin-bottom: 14px;
}

.tg-title {
  font-size: 0.9rem;
}

.tg-title strong {
  color: var(--accent);
}

.tg-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin: 4px 0 10px;
}

.tg-btn {
  display: block;
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.82rem;
  font-weight: 700;
}

.tg-btn:hover {
  background: #ea6a0a;
}

.sidebar-emergencia {
  background: color-mix(in srgb, var(--red) 12%, var(--bg-card));
  border: 1px solid var(--red);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 14px;
  text-align: center;
}

.sidebar-emergencia-title {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.btn-112 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

.btn-112:hover {
  filter: brightness(1.1);
}

.modal-112-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

.modal-112-box {
  background: var(--bg-card);
  border: 1px solid var(--red);
  border-radius: 14px;
  max-width: 380px;
  width: 100%;
  padding: 20px;
  text-align: center;
}

.modal-112-box i.fa-triangle-exclamation {
  font-size: 1.8rem;
  color: var(--red);
  margin-bottom: 8px;
}

.modal-112-box h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
}

.modal-112-box p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 18px;
}

.modal-112-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modal-112-actions a,
.modal-112-actions button {
  display: block;
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}

.modal-112-call {
  background: var(--red);
  color: #fff;
}

.modal-112-call:hover {
  filter: brightness(1.1);
}

.modal-112-cancel {
  background: var(--bg-card-alt);
  color: var(--text);
  border: 1px solid var(--border) !important;
}

.sidebar-hermanas {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 14px;
}

/* Duplicado de Telegram/112/También en marcha para Panel Principal —
   invisible en escritorio (ya están en el sidebar); en móvil el sidebar se
   convierte en barra horizontal arriba del todo y quedaban demasiado lejos
   del contenido, así que aquí se repiten más abajo (ver @media 800px). */
.mobile-acciones {
  display: none;
}

.sidebar-hermanas-title {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.sidebar-hermana-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text);
  padding: 4px 0;
}

/* Antes .sidebar-hermana-logo (imagen redonda por provincia hermana) — desde
   que buildHermanasHTML() es un único CTA a la home (ver app.js), el icono
   inicial es genérico en vez del logo de cada provincia. Más grande que el
   icono final (flecha) para que se note como icono principal de la fila. */
.sidebar-hermana-icon {
  font-size: 1rem !important;
  color: var(--accent) !important;
  flex-shrink: 0;
}

.sidebar-hermana-link span {
  flex: 1;
}

.sidebar-hermana-link i {
  font-size: 0.7rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.sidebar-hermana-link:hover {
  color: var(--accent);
}

.sidebar-footer {
  font-size: 0.68rem;
  color: var(--text-muted);
  padding: 0 8px;
  line-height: 1.5;
}

/* ---------- Main / topbar ---------- */

.main {
  flex: 1;
  min-width: 0;
  padding: 0 22px 22px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}

.topbar-title {
  font-weight: 700;
  font-size: 0.95rem;
}

.topbar-title i {
  color: var(--accent);
  margin-right: 4px;
}

.topbar-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  font-size: 0.85rem;
}

@media (max-width: 700px) {
  .topbar-right {
    gap: 8px 12px;
    font-size: 0.8rem;
  }
}

.theme-toggle {
  background: var(--bg-card-alt);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  width: 34px;
  height: 34px;
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
}

.theme-toggle:hover {
  border-color: var(--accent);
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-muted);
}

.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-muted);
}

.status-dot.status-ok {
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

.status-dot.status-error {
  background: var(--red);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}

.clock {
  font-weight: 700;
}

.clock-date {
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 0.78rem;
}

.weather-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.85rem;
}

.weather-chip i {
  color: var(--accent);
}

/* ---------- Google Translate (widget "Website Translator") ---------- */

.translate-widget {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.translate-widget i {
  color: var(--accent);
}

/* Estructura real del disparador (comprobada, no la documentación genérica
   de Google): .goog-te-gadget-simple > span > a > span de texto + span de
   la flecha. El texto y la flecha llevan color en línea (style="color:..."),
   hace falta !important para pisarlo, sobre todo en modo noche. */
#google_translate_element .goog-te-gadget-simple {
  background: transparent !important;
  border: none !important;
}

#google_translate_element .goog-te-gadget-simple a,
#google_translate_element .goog-te-gadget-simple a span {
  color: var(--text) !important;
  text-decoration: none !important;
}

#google_translate_element .goog-te-gadget-icon {
  display: none !important; /* icono de globo de Google: ya tenemos el nuestro (fa-language) */
}

/* El banner/toolbar que Google inserta arriba de toda la página al traducir
   (iframe con "Texto original / Traducido por Google...") no pega nada con
   el diseño de la web, así que se oculta por completo. Google usa nombres de
   clase generados/ofuscados para el iframe en sí (cambian entre versiones),
   pero siempre lo envuelve en un <div class="skiptranslate"> hijo directo de
   <body> — ese selector sí es estable, comprobado en pruebas reales. */
body > div.skiptranslate {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
}

html body,
html body.translated-ltr,
html body.translated-rtl {
  top: 0px !important;
  margin-top: 0 !important;
  position: static !important;
}

/* ---------- Cards / counters ---------- */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.card-head h2 {
  margin: 0;
  font-size: 1rem;
}

.counters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.counter {
  display: flex;
  align-items: center;
  gap: 14px;
}

.counter-icon {
  font-size: 1.5rem;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card-alt);
}

.counter-num {
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.1;
}

.counter-label {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.counter-sub {
  display: block;
  font-size: 0.68rem;
  opacity: 0.8;
}

.counter-activos { border-left: 3px solid var(--red); }
.counter-activos .counter-num { color: var(--red); }
.counter-activos .counter-icon { color: var(--red); }
.counter-controlados { border-left: 3px solid var(--orange); }
.counter-controlados .counter-num { color: var(--orange); }
.counter-controlados .counter-icon { color: var(--orange); }
.counter-extinguidos { border-left: 3px solid var(--green); }
.counter-extinguidos .counter-num { color: var(--green); }
.counter-extinguidos .counter-icon { color: var(--green); }
.counter-avisos { border-left: 3px solid var(--purple); }
.counter-avisos .counter-num { color: var(--purple); }
.counter-avisos .counter-icon { color: var(--purple); }

/* ---------- Ticker ---------- */

.ticker {
  display: flex;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 14px;
}

.ticker-label {
  flex-shrink: 0;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.72rem;
  padding: 9px 13px;
  letter-spacing: 0.03em;
}

.ticker-track {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  height: 1.4em;
  line-height: 1.4em;
}

.ticker-track span {
  display: inline-block;
  padding-left: 100%;
  white-space: nowrap;
  animation: ticker-scroll 25s linear infinite;
  font-size: 0.83rem;
}

@keyframes ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* ---------- Map + avisos grid ---------- */

.grid-map-avisos {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

#map {
  height: 560px;
  border-radius: 10px;
  overflow: hidden;
}

#map.map-expanded {
  position: fixed !important;
  inset: 0;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 5000;
  border-radius: 0;
}

body.map-fullscreen-lock {
  overflow: hidden;
}

/* ---------- Concienciación: vídeo con clic-para-cargar ---------- */

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 12px;
}

.video-grid-item p {
  margin: 0;
}

.video-facade {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  cursor: pointer;
  margin: 0 0 6px;
  overflow: hidden;
}

.video-facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  transition: background 0.15s;
}

.video-facade:hover::after {
  background: rgba(0, 0, 0, 0.4);
}

.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  background: rgba(22, 19, 15, 0.75);
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
  z-index: 1;
}

.video-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  margin: 0 0 6px;
  border: none;
}

.prevencion-list {
  margin: 0;
  padding-left: 20px;
  font-size: 0.88rem;
  line-height: 1.7;
}

.prevencion-list li {
  margin-bottom: 4px;
}

/* ---------- Grandes incendios históricos ---------- */

.historia-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.historia-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.historia-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.historia-anio {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: var(--bg-card-alt);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
}

.historia-titulo {
  font-weight: 700;
}

.historia-detalle {
  font-size: 0.85rem;
  margin: 3px 0;
}

.historia-fuente {
  font-size: 0.74rem;
  color: var(--text-muted);
}

/* ---------- Trámites y ayudas forestales ---------- */

.tramites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.tramite-item {
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-card-alt);
}

.tramite-titulo {
  font-weight: 700;
  font-size: 0.88rem;
  margin-bottom: 4px;
}

.tramite-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 8px;
  line-height: 1.4;
}

.map-legend {
  display: flex;
  gap: 18px;
  padding-top: 10px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.map-legend .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
}

.select-dark {
  background: var(--bg-card-alt);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 11px;
  border-radius: 8px;
  font-size: 0.82rem;
}

.link-accent {
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
}

.avisos-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 560px;
  overflow-y: auto;
}

.aviso-item {
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  background: var(--bg-card-alt);
  margin-bottom: 8px;
}

.aviso-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.aviso-body {
  flex: 1;
  min-width: 0;
}

.aviso-tipo {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.aviso-texto {
  font-size: 0.8rem;
  color: var(--text);
  margin-top: 2px;
}

.aviso-hora {
  font-size: 0.72rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ---------- Tabla incendios + stats ---------- */

.grid-tabla-stats {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 14px;
  margin-bottom: 14px;
  align-items: start;
}

.stats-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--red);
  color: #fff;
  border-radius: 50%;
  min-width: 22px;
  height: 22px;
  font-size: 0.75rem;
  margin-left: 6px;
}

.table-wrap {
  overflow-x: auto;
}

.tabla-incendios {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.83rem;
}

.tabla-incendios th {
  text-align: left;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}

.tabla-incendios td {
  padding: 10px;
  border-bottom: 1px solid var(--border);
}

.estado-pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
}

.estado-Activo { background: var(--red); }
.estado-Controlado { background: var(--orange); }
.estado-Estabilizado { background: #d9a441; }
.estado-Extinguido { background: var(--green); }

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.stat {
  background: var(--bg-card-alt);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}

.stat-icon {
  font-size: 1.2rem;
}

.stat-num {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 4px 0 2px;
}

.stat-label {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.demo-tag {
  font-size: 0.66rem;
  background: var(--bg-card-alt);
  border: 1px dashed var(--border);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 3px 8px;
}

/* ---------- Predicción ---------- */

.forecast-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.forecast-day {
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
  border: 1px solid var(--border);
  background: linear-gradient(160deg, rgba(37, 99, 235, 0.22), rgba(6, 182, 212, 0.12));
}

.forecast-day .fd-dia {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.forecast-day .fd-icon {
  font-size: 1.2rem;
}

.forecast-day .fd-clase {
  font-weight: 800;
  font-size: 0.82rem;
  margin-top: 4px;
}

.forecast-day .fd-sub {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.riesgo-muyextremo { background: rgba(120, 20, 20, 0.35); }
.riesgo-muyextremo .fd-clase { color: #ff6b6b; }

/* ---------- Otras localidades (muestreo de la provincia) ---------- */

.municipios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
}

.municipio-card {
  border-radius: 10px;
  padding: 12px 8px;
  text-align: center;
  border: 1px solid var(--border);
  background: linear-gradient(160deg, rgba(37, 99, 235, 0.22), rgba(6, 182, 212, 0.12));
}

.municipio-nombre {
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.municipio-emoji {
  font-size: 2.2rem;
}

.municipio-temp {
  font-weight: 800;
  font-size: 0.9rem;
  margin-top: 4px;
}
.riesgo-extremo { background: rgba(160, 50, 30, 0.3); }
.riesgo-extremo .fd-clase { color: #f87171; }
.riesgo-muyalto { background: rgba(180, 90, 20, 0.28); }
.riesgo-muyalto .fd-clase { color: var(--orange); }
.riesgo-alto { background: rgba(190, 120, 20, 0.22); }
.riesgo-alto .fd-clase { color: var(--orange); }
.riesgo-moderado { background: rgba(160, 150, 30, 0.18); }
.riesgo-moderado .fd-clase { color: #d9c941; }
.riesgo-bajo { background: rgba(40, 140, 70, 0.18); }
.riesgo-bajo .fd-clase { color: var(--green); }
.riesgo-sindato { background: var(--bg-card-alt); }
.riesgo-sindato .fd-clase { color: var(--text-muted); }

/* ---------- Tiempo ---------- */

.weather-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, var(--weather-banner-start), var(--weather-banner-end));
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 16px;
  color: #fff;
}

.weather-banner-icon {
  font-size: 3rem;
  line-height: 1;
}

.weather-banner-info {
  flex: 1;
}

.weather-banner-title {
  font-size: 1.15rem;
  font-weight: 800;
}

.weather-banner-sub {
  font-size: 0.82rem;
  opacity: 0.9;
  text-transform: capitalize;
}

.weather-banner-temp {
  font-size: 2.4rem;
  font-weight: 800;
}

.weather-now {
  display: flex;
  align-items: center;
  gap: 18px;
}

.weather-now-icon {
  font-size: 2.6rem;
  line-height: 1;
}

.weather-now-temp {
  font-size: 2.2rem;
  font-weight: 800;
}

.weather-now-detalle {
  font-size: 0.9rem;
}

.weather-forecast-grid {
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 700px) {
  .weather-forecast-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 4px;
  }
  .weather-forecast-grid .forecast-day {
    flex: 0 0 auto;
    width: 108px;
  }
}

.fd-icon.fd-emoji {
  font-size: 3.2rem;
}

.uv-hours {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.weather-hour-card {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  min-width: 64px;
  background: linear-gradient(160deg, rgba(37, 99, 235, 0.22), rgba(6, 182, 212, 0.12));
}

.wh-time {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.wh-emoji {
  font-size: 2.1rem;
}

.wh-temp {
  font-weight: 800;
  font-size: 1rem;
}

.wh-precip {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.uv-badge {
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #16130f;
}

/* ---------- Histórico ---------- */

#historial-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.historial-item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}

.historial-fuente {
  flex-shrink: 0;
  background: var(--bg-card-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  height: fit-content;
}

.historial-texto {
  color: var(--text);
}

.historial-fecha {
  color: var(--text-muted);
  font-size: 0.74rem;
  margin-top: 2px;
}

/* ---------- Riesgo / capas (control mapa, acordeón) ---------- */

.layer-control {
  background: var(--layer-control-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.78rem;
  color: var(--text);
  min-width: 210px;
  max-width: min(78vw, 260px);
  max-height: 70vh;
  overflow-y: auto;
}

.layer-control-hint {
  margin: 8px 2px 4px;
  line-height: 1.4;
}

.layer-control-hint a {
  color: var(--accent);
  font-weight: 700;
}

/* Botón "Filtros": el panel entero empieza contraído (escritorio, tablet y
   móvil por igual) y se despliega solo al pulsarlo. */
.layer-control-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text);
  font-weight: 700;
  font-size: 0.78rem;
  padding: 6px 2px;
  cursor: pointer;
}

.layer-control-body {
  display: none;
}

.layer-control.expanded .layer-control-body {
  display: block;
  margin-top: 4px;
}

@media (max-width: 900px) {
  .layer-control {
    min-width: 0;
    padding: 4px 8px;
  }
}

/* ---------- Medir distancia/área ---------- */

.measure-control a.active-tool {
  background: var(--accent);
  color: #fff;
}

.measure-activo .leaflet-container {
  cursor: crosshair;
}

.measure-readout {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  background: var(--layer-control-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text);
  backdrop-filter: blur(3px);
  max-width: min(80vw, 320px);
}

.measure-readout i {
  color: var(--accent);
  margin-right: 4px;
}

.measure-readout-clear {
  margin-top: 2px;
  background: var(--bg-card-alt);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
}

.measure-readout-clear:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.layer-accordion {
  border-bottom: 1px solid var(--border);
  padding: 6px 0;
}

.layer-accordion:last-child {
  border-bottom: none;
}

.layer-accordion summary {
  font-weight: 700;
  cursor: pointer;
  padding: 4px 0;
  list-style: none;
}

.layer-accordion summary::-webkit-details-marker {
  display: none;
}

.layer-accordion summary::before {
  content: "▸ ";
  color: var(--accent);
}

.layer-accordion[open] summary::before {
  content: "▾ ";
}

.layer-accordion label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 3px 0 3px 6px;
  line-height: 1.5;
}

.layer-accordion input {
  vertical-align: middle;
}

.layer-accordion .risk-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.layer-accordion .risk-disabled {
  color: var(--text-muted);
  cursor: not-allowed;
}

.layer-accordion .risk-disabled .prox {
  font-size: 0.68rem;
  opacity: 0.7;
}

/* ---------- Explicación de capas del mapa ---------- */

.layer-explain-group {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 16px 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.layer-explain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.layer-explain-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-card-alt);
}

.layer-explain-icon {
  font-size: 1.2rem;
  line-height: 1.3;
  flex-shrink: 0;
}

.layer-explain-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}

.layer-explain-title {
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 2px;
}

.layer-explain-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ---------- Leyenda del mapa ---------- */

.map-legend-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 8px;
  font-size: 0.76rem;
  color: var(--text-muted);
}

.legend-title {
  font-weight: 700;
  color: var(--text);
  margin-right: 2px;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.legend-item .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.risk-scale-group {
  width: 100%;
  flex-basis: 100%;
}

.risk-scale-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.risk-scale-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.risk-scale-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* ---------- Footer ---------- */

footer {
  padding: 22px 2px 6px;
  font-size: 0.74rem;
  color: var(--text-muted);
  text-align: center;
}

.footer-fuentes {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 32px;
  margin-bottom: 12px;
}

.footer-fuente {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-fuente img {
  height: 30px;
  width: auto;
  background: #fff;
  border-radius: 4px;
  padding: 3px 6px;
}

.footer-fuente-icon {
  font-size: 1.6rem;
  color: var(--text-muted);
  width: 30px;
  text-align: center;
}

.footer-fuente span {
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.3;
  text-align: left;
}

.muted {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 0.85em;
}

.muted-small {
  color: var(--text-muted);
  font-size: 0.74rem;
}

/* ---------- Botones genéricos ---------- */

.btn-ghost,
.btn-accent {
  border: none;
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-block;
}

.btn-ghost {
  background: var(--bg-card-alt);
  border: 1px solid var(--border);
  color: var(--text);
}

.btn-ghost:hover {
  background: var(--bg-card);
}

.btn-accent {
  background: var(--accent);
  color: #fff;
}

.btn-accent:hover {
  background: #ea6a0a;
}

/* ---------- Banner de cookies ---------- */

.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 999;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  max-width: 900px;
  margin: 0 auto;
}

.cookie-text {
  font-size: 0.82rem;
  color: var(--text-muted);
  flex: 1;
  min-width: 240px;
}

.cookie-text a {
  color: var(--accent);
  text-decoration: underline;
}

.cookie-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

/* ---------- Aviso de nuevo evento ---------- */

.new-event-toast {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 998;
  background: var(--accent);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 12px 16px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  animation: toast-in 0.25s ease-out;
}

.new-event-toast a {
  text-decoration: underline;
  color: #fff;
}

@keyframes toast-in {
  from { transform: translateY(-12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ---------- Avisos: listado completo ---------- */

.avisos-list-full {
  max-height: none;
}

.aviso-item-full .aviso-texto {
  white-space: pre-line;
}

/* ---------- Compartir en redes sociales ---------- */

.share-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.share-row a,
.share-row button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--bg-card-alt);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0;
}

.share-row a:hover,
.share-row button:hover {
  border-color: var(--accent);
}

/* ---------- Tabs (Histórico) ---------- */

.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}

.tab-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.tab-btn.tab-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.tab-panel {
  display: none;
}

.tab-panel.tab-panel-active {
  display: block;
}

/* ---------- Partes oficiales: detalle expandible ---------- */

.parte-row td {
  vertical-align: top;
}

.detalle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px 16px;
  padding: 10px 4px;
  font-size: 0.78rem;
}

.detalle-campo span {
  display: block;
  color: var(--text-muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ---------- Estadísticas: barras ---------- */

.bars-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bar-row {
  display: grid;
  grid-template-columns: 120px 1fr 34px;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
}

.bar-track {
  background: var(--bg-card-alt);
  border-radius: 6px;
  height: 10px;
  overflow: hidden;
}

.bar-fill {
  background: var(--accent);
  height: 100%;
}

.bar-value {
  text-align: right;
  color: var(--text-muted);
}

.stat-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

.mes-bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 140px;
}

.mes-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}

.mes-bar-fill {
  width: 100%;
  background: var(--accent);
  border-radius: 4px 4px 0 0;
  min-height: 3px;
}

.mes-bar-label {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 6px;
}

/* ---------- Configuración ---------- */

.config-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}

.config-row:last-child {
  border-bottom: none;
}

.config-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.policy-text p {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Sin imagen dentro por ahora (ver index.html): la altura antes la daba el
   propio <img> (width:100%, height:auto), así que hace falta min-height aquí
   para que el hueco no colapse a 0 mientras se reserva para un futuro aviso
   o publicidad. */
/* Aviso excepcional (ej. declaración de Nivel 3/interés nacional): activado
   a mano por provincia en app.js (AVISO_EXCEPCIONAL_BY_PROVINCIA), no
   automático — no hay forma fiable de detectar esto desde los datos de
   INFORCYL (ver comentario junto a esa constante). */
.aviso-excepcional-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: color-mix(in srgb, var(--red) 16%, var(--bg-card));
  border: 1px solid var(--red);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 0.85rem;
  line-height: 1.4;
}

.aviso-excepcional-banner i {
  color: var(--red);
  font-size: 1.1rem;
  margin-top: 1px;
}

.solidarity-banner {
  margin: 0 0 16px 0;
  min-height: 140px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.solidarity-banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .grid-map-avisos,
  .grid-tabla-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 800px) {
  .layout {
    flex-direction: column;
  }
  .sidebar {
    width: 100%;
    height: auto;
    position: static;
  }
  .sidebar-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sidebar-nav {
    display: none;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .sidebar-nav.expanded {
    display: flex;
  }
  /* Telegram/112/También en marcha se ocultan aquí arriba (sidebar) y
     reaparecen dentro de Panel Principal, entre "Últimos avisos" y
     "Predicción" — ver .mobile-acciones y buildMobileAccionesHTML() en
     app.js. Selector con ">" a propósito: no debe afectar a la copia que
     vive dentro de .mobile-acciones, que reutiliza las mismas clases. */
  .sidebar > .sidebar-telegram,
  .sidebar > .sidebar-emergencia,
  .sidebar > .sidebar-hermanas {
    display: none;
  }
  .mobile-acciones {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 14px;
  }
}