/* hoy.css — portada «Qué está pasando hoy» y páginas de cada fenómeno (/hoy/*.html, /avisos-de-hoy.html, terremotos).
   Se carga solo en esas páginas y en la portada. Usa las variables de style.css. */

/* ---- tarjetas de fenómenos (portada) ---- */
.hoy-seccion{ padding:40px 0 20px; background:var(--bg,#faf9f3); }
.hoy-seccion h2{ margin:0 0 6px; }
.hoy-seccion .hoy-intro{ margin:0 0 22px; max-width:68ch; color:var(--ink-soft,#3d3f33); }
.hoy-grid{ list-style:none; margin:0; padding:0; display:grid; gap:18px; grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:900px){ .hoy-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .hoy-grid{ grid-template-columns:minmax(0,1fr); gap:14px; } }
.hoy-card{ display:block; background:#fff; border:1px solid var(--line,#dedcce); border-radius:10px; overflow:hidden; text-decoration:none; color:inherit; height:100%; transition:box-shadow .15s, transform .15s; }
.hoy-card:hover, .hoy-card:focus-visible{ box-shadow:0 6px 18px rgba(0,0,0,.14); transform:translateY(-2px); }
.hoy-card img{ display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; background:#0d1a12; }
.hoy-card .hoy-card-body{ display:block; padding:12px 14px 14px; min-height:92px; }
.hoy-card strong{ display:block; font:700 1.1rem var(--sans); color:var(--forest-deep,#14281c); margin-bottom:4px; }
.hoy-card .hoy-estado{ display:block; font-size:.9rem; line-height:1.35; color:var(--ink-soft,#3d3f33); }
.hoy-card .hoy-ir{ display:block; margin-top:6px; font:600 .85rem var(--sans); color:var(--forest,#2d5a3d); }
.hoy-todo{ margin:22px 0 0; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.hoy-todo a{ display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:6px; font:600 .95rem var(--sans); text-decoration:none; background:var(--forest,#2d5a3d); color:#fff; }
.hoy-todo a.hoy-112{ background:#b3121c; }
.hoy-pie{ margin:14px 0 0; font-size:.85rem; color:#4a4c40; }

/* niveles de aviso (no solo color: siempre con texto) */
.hoy-nivel{ display:inline-block; font:700 .72rem var(--sans); letter-spacing:.03em; text-transform:uppercase; border-radius:999px; padding:2px 9px; vertical-align:middle; }
.hoy-nivel.amarillo{ background:#fff3b0; color:#5c4800; border:1px solid #cdb24a; }
.hoy-nivel.naranja{ background:#ffd9b0; color:#7a3500; border:1px solid #d9822c; }
.hoy-nivel.rojo{ background:#b3121c; color:#fff; border:1px solid #7d0b12; }
.hoy-nivel.ninguno{ background:#e4efe4; color:#1f4a28; border:1px solid #9cbf9f; }

/* ---- imagen / vídeo de cabecera de cada página ---- */
.hoy-media{ position:relative; margin:18px 0 6px; border-radius:10px; overflow:hidden; background:#0d1a12; aspect-ratio:1280/600; }
.hoy-media img, .hoy-media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.hoy-media video{ opacity:0; transition:opacity .6s; }
.hoy-media video.activo{ opacity:1; }
.hoy-media .hoy-badge{ position:absolute; top:10px; left:10px; z-index:2; background:rgba(15,20,12,.82); color:#f7f4ea; font:600 .78rem var(--sans); padding:5px 10px; border-radius:999px; }
.hoy-media .hoy-pausa{ position:absolute; right:10px; bottom:10px; z-index:2; min-width:44px; min-height:44px; padding:0 14px; border:1px solid rgba(255,255,255,.6); border-radius:999px; background:rgba(15,20,12,.82); color:#fff; font:600 .85rem var(--sans); cursor:pointer; }
.hoy-media .hoy-pausa[hidden]{ display:none; }
.hoy-credito{ margin:0 0 18px; font-size:.82rem; color:#4a4c40; }
@media (max-width:640px){ .hoy-media{ aspect-ratio:4/3; } }

/* ---- bloque de estado en vivo ---- */
.hoy-vivo{ border:1px solid var(--line,#dedcce); border-left:5px solid var(--forest,#2d5a3d); background:#fff; border-radius:8px; padding:16px 18px; margin:18px 0; }
.hoy-vivo h2{ margin:0 0 8px; font-size:1.2rem; }
.hoy-vivo p{ margin:0 0 8px; }
.hoy-lista{ margin:8px 0 6px 20px; padding:0; }
.hoy-lista li{ margin:0 0 6px; }
.hoy-actualizado{ font-size:.85rem; color:#4a4c40; margin:6px 0 0; }
.hoy-buscar{ display:flex; flex-wrap:wrap; gap:10px; align-items:end; margin:10px 0; }
.hoy-buscar .campo{ flex:1 1 260px; }
.hoy-buscar label{ display:block; font-weight:600; margin-bottom:4px; }
.hoy-buscar input{ width:100%; padding:12px 14px; font-size:1rem; border:1px solid var(--line,#dedcce); border-radius:6px; }
.hoy-buscar button{ min-height:48px; padding:0 20px; border:0; border-radius:6px; background:var(--forest,#2d5a3d); color:#fff; font:600 1rem var(--sans); cursor:pointer; }
.hoy-tabla-caja{ overflow-x:auto; }
.hoy-tabla{ width:100%; border-collapse:collapse; margin:10px 0; font-size:.95rem; }
.hoy-tabla th{ text-align:left; border-bottom:2px solid var(--line,#dedcce); padding:8px 6px; }
.hoy-tabla td{ border-bottom:1px solid #eceadf; padding:8px 6px; vertical-align:top; }
.hoy-tabla td.num, .hoy-tabla th.num{ text-align:right; }
.hoy-filtro{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:12px 0; }
.hoy-filtro select{ padding:10px 12px; min-height:44px; font-size:1rem; border:1px solid var(--line,#dedcce); border-radius:6px; background:#fff; }
.hoy-oficial{ background:#f3f1e6; border-radius:8px; padding:14px 18px; margin:18px 0; }
.hoy-oficial ul{ margin:6px 0 0 20px; padding:0; }
.hoy-relacionados{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; padding:0; list-style:none; }
.hoy-relacionados a{ display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border:1px solid var(--forest,#2d5a3d); border-radius:6px; color:var(--forest,#2d5a3d); text-decoration:none; font:600 .9rem var(--sans); background:#fff; }
.hoy-relacionados a[aria-current="page"]{ background:var(--forest,#2d5a3d); color:#fff; }
@media (prefers-reduced-motion: reduce){ .hoy-card{ transition:none; } .hoy-media video{ transition:none; } }

/* ---- cabecera de la portada más compacta: que las tarjetas se vean enseguida ---- */
.hero{ padding:34px 0 38px; }
.hero .container{ gap:14px; }
.hero h1{ max-width:none; margin-bottom:0; }
.hero .lead{ margin:0; }
.hero .search-box{ margin-top:0; }
.hero .disclaimer{ margin-top:6px; }
.hero .disclaimer p{ margin:0 0 10px; }

/* móvil: tarjetas en horizontal (foto a la izquierda) para que los nueve fenómenos no ocupen una pantalla cada uno */
@media (max-width:520px){
  .hoy-card{ display:grid; grid-template-columns:128px minmax(0,1fr); align-items:stretch; }
  .hoy-card img{ height:100%; min-height:104px; aspect-ratio:auto; }
  .hoy-card .hoy-card-body{ min-height:0; padding:10px 12px; }
  .hoy-card strong{ font-size:1.02rem; }
  .hoy-card .hoy-estado{ font-size:.85rem; }
}

/* ---- vídeo de fondo de la cabecera de la portada (ilustrativo, generado con IA) ---- */
.hero .hero-media{ position:absolute; inset:0; z-index:0; overflow:hidden; background:#0d1a12; }
.hero .hero-media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.8; }
.hero .hero-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(13,26,18,.66), rgba(13,26,18,.5) 55%, rgba(13,26,18,.8)); }
.hero .hoy-pausa-hero{ position:absolute; right:16px; bottom:14px; z-index:3; min-width:44px; min-height:44px; padding:0 14px; border:1px solid rgba(255,255,255,.6); border-radius:999px; background:rgba(15,20,12,.82); color:#fff; font:600 .85rem var(--sans); cursor:pointer; }
.hero .hoy-pausa-hero[hidden]{ display:none; }
.hero .hero-credit{ position:absolute; left:16px; bottom:14px; z-index:2; margin:0; max-width:calc(100% - 190px); font-size:.75rem; color:#e6e2d3; text-shadow:0 1px 3px rgba(0,0,0,.7); }
@media (max-width:640px){ .hero .hero-credit{ position:static; padding:0 16px 10px; max-width:none; } }

/* Pestañas del mapa de avisos: Ahora / Próximas horas / Últimas 24 horas (botones grandes, legibles para todas las edades) */
.hoy-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 8px; }
.hoy-tabs[hidden]{ display:none; }
.hoy-tab{ flex:1 1 150px; min-height:56px; padding:8px 14px; text-align:center; font:inherit; font-weight:700; font-size:1.02rem; line-height:1.25; color:var(--ink,#2b2d24); background:#fff; border:2px solid var(--forest,#2f4a2a); border-radius:10px; cursor:pointer; }
.hoy-tab small{ display:block; margin-top:2px; font-weight:400; font-size:.86rem; color:inherit; opacity:.85; }
.hoy-tab:hover{ background:#eef3ea; }
.hoy-tab[aria-pressed="true"]{ background:var(--forest,#2f4a2a); color:#fff; }
.hoy-tab[aria-pressed="true"]:hover{ background:var(--forest,#2f4a2a); }
.hoy-tab:focus-visible{ outline:3px solid #1a5fb4; outline-offset:2px; }
.hoy-mapa-que{ margin:0 0 10px; padding:8px 12px; border-left:5px solid var(--forest,#2f4a2a); background:#f4f6f0; font-size:1rem; }
.hoy-mapa-que[hidden]{ display:none; }
/* ---------- Página de Incendios: navegación interna y mapa por satélite (antes estilos en línea de la portada) ---------- */
.inc-nav{ display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 6px; padding:0; list-style:none; }
.inc-nav a{ display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--forest); font:600 .9rem var(--sans); text-decoration:none; }
.inc-nav a:hover, .inc-nav a:focus-visible{ background:var(--forest); color:#fff; }
.inc-bloque{ margin-top:34px; padding-top:6px; scroll-margin-top:16px; }
.inc-bloque > h2:first-child{ margin-top:0; }
.inc-separador{ margin:46px 0 0; padding-top:26px; border-top:2px solid var(--line); }
#mapa-nacional-wrap{ position:relative; margin:18px 0; }
#mapa-nacional{
  width:100%; height:78vh; min-height:460px; max-height:820px;
  border-radius:8px; border:1px solid var(--line); background:#0d1a12;
}
#mapa-nacional .leaflet-control-attribution, #hoy-mapa .leaflet-control-attribution{ font-size:10px; }
#hoy-mapa-wrap{ position:relative; margin:14px 0; }
#hoy-mapa{ width:100%; height:70vh; min-height:420px; max-height:760px; border-radius:8px; border:1px solid var(--line); background:#0d1a12; }
#hoy-mapa .municipio-label-nacional{ font-size:11px; }
.mn-leyenda{
  position:absolute; z-index:500; bottom:14px; left:14px;
  background:rgba(20,26,18,.88); color:#f2efe4; border-radius:8px;
  padding:10px 14px; font-size:.82rem; line-height:1.5;
  box-shadow:0 2px 10px rgba(0,0,0,.35); max-width:200px;
}
.mn-leyenda .item{ display:flex; align-items:center; gap:8px; margin:2px 0; }
.mn-leyenda .sw{ width:14px; height:14px; border-radius:3px; flex-shrink:0; display:inline-block; }
.mn-estado{
  position:absolute; z-index:500; top:14px; left:50%; transform:translateX(-50%);
  background:rgba(20,26,18,.9); color:#f2efe4; border-radius:20px;
  padding:8px 18px; font-size:.85rem; box-shadow:0 2px 10px rgba(0,0,0,.35);
}
.mn-tooltip{ font-size:.85rem; line-height:1.4; }
.mn-tooltip strong{ display:block; margin-bottom:2px; }
.municipio-label-nacional{
  color:#fff; font-size:11px; font-weight:600; text-shadow:0 0 3px #000,0 0 3px #000,0 1px 2px #000;
  white-space:nowrap; pointer-events:none; transform:translate(-50%,-50%);
  text-align:center;
}
.mn-mi-ubicacion{ position:relative; }
.mn-mi-ubicacion-punto{
  position:absolute; top:7px; left:7px; width:8px; height:8px; border-radius:50%;
  background:#3b82f6; border:2px solid #fff; box-shadow:0 0 4px rgba(0,0,0,.6);
}
.mn-mi-ubicacion-pulso{
  position:absolute; top:0; left:0; width:22px; height:22px; border-radius:50%;
  background:rgba(59,130,246,.35); animation:mn-pulso 1.8s ease-out infinite;
}
@keyframes mn-pulso{
  0%{ transform:scale(.4); opacity:.9; }
  100%{ transform:scale(1.4); opacity:0; }
}
@media (max-width:640px){
  #mapa-nacional{ height:64vh; }
  #hoy-mapa{ height:60vh; min-height:360px; }
  .mn-leyenda{ font-size:.72rem; padding:8px 10px; max-width:150px; }
}
@media (prefers-reduced-motion:reduce){ .mn-mi-ubicacion-pulso{ animation:none; } }

/* ---------- Tabla de municipios con aviso, provincias y resumen de la portada ---------- */
.hoy-filtro{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; margin:10px 0; }
.hoy-filtro select{ padding:10px 12px; min-height:44px; font-size:1rem; border:1px solid var(--line); border-radius:6px; background:#fff; max-width:100%; }
.hoy-boton-sec{ min-height:44px; padding:0 18px; border:1px solid var(--forest); background:#fff; color:var(--forest); border-radius:6px; font:600 .95rem var(--sans); cursor:pointer; }
.hoy-boton-sec:hover, .hoy-boton-sec:focus-visible{ background:var(--forest); color:#fff; }
#resumen-hoy{ padding:34px 0 10px; border-bottom:0; }
#resumen-hoy .hoy-lista li{ margin:.7rem 0; line-height:1.5; }
.fuentes-hoy th, .fuentes-hoy td{ vertical-align:top; }