/* ====================================================================
 * ALERTAS METEOROLÓGICAS — el aviso, el punto del menú y /alertas/
 * PHP: inc/alertas-clima.php · JS: assets/js/alertas.js
 *
 * Se encola en tres casos y en ninguno más: en /alertas/, cuando hay
 * algo activo —porque entonces el menú lleva punto— y cuando toca pintar
 * el aviso emergente. El resto del año esta hoja no viaja.
 *
 * --------------------------------------------------------------------
 * EL COLOR NO ES DECORACIÓN, ES LA GRAVEDAD
 * --------------------------------------------------------------------
 * El resto del sitio es azul marina, hueso y cielo. Aquí entra el rojo,
 * y entra a propósito: es el único sitio del sitio donde aparece con
 * este peso. Si el rojo se usara también para «destacado» o para una
 * oferta, el día del huracán no diría nada.
 *
 * La escala va de cuatro peldaños y sigue al estándar del NWS:
 *   Extreme  → rojo hondo   (puede matar ahora)
 *   Severe   → rojo         (peligro serio)
 *   Moderate → ámbar        (prepárate)
 *   Minor    → azul de marca (molesto, no peligroso)
 *
 * El ámbar y los rojos se definen AQUÍ y no en tokens.css a propósito:
 * son los colores de un módulo, no del sistema. Sacarlos al token
 * global invitaría a usarlos para cualquier otra cosa, que es
 * exactamente lo que no puede pasar.
 * ==================================================================== */

.lt-alertas,
.lt-alerta-aviso {
  --al-extrema:      #7F1D1D;
  --al-extrema-piel: #FEF2F2;
  --al-grave:        #B42318;
  --al-grave-piel:   #FEF3F2;
  --al-media:        #B54708;
  --al-media-piel:   #FFFAEB;
  --al-menor:        var(--marca);
  --al-menor-piel:   var(--marca-claro);
}

/* ====================================================================
 * 1 — EL AVISO EMERGENTE (solo con gravedad Extrema)
 * --------------------------------------------------------------------
 * Sustituye a la franja roja fija que había hasta el 2026-09-01. El
 * porqué está en inc/alertas-clima.php, sección 7: en resumen, de 20
 * alertas activas en Texas solo UNA era Extrema, así que la franja iba a
 * vivir encendida media temporada de huracanes y el dueño la veía —con
 * razón— como algo que estropeaba el diseño.
 *
 * Sigue siendo rojo y sigue siendo grande. La diferencia es que ahora
 * eso pasa tres veces al año en vez de todos los días, que es lo que
 * hace que cuando pase, se lea.
 * ==================================================================== */

/*
 * LA REGLA [hidden] DE ABAJO NO ES OPCIONAL — 2026-09-01.
 *
 * El atributo `hidden` esconde con el `display: none` DEL NAVEGADOR, que
 * pierde contra cualquier `display` del autor. Este bloque declara
 * `display: flex`, así que la ventana, una vez abierta y «cerrada» por el
 * guion, SEGUÍA PINTADA tapando el sitio: el estado decía cerrada y la
 * caja seguía ahí. Se descubrió en Club 66 con el mismo patrón, y aquí
 * estaba latente: no se había visto porque no ha habido alerta Extrema
 * desde el cambio al aviso emergente.
 */
.lt-alerta-aviso {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e-3);
}

/* El velo también cierra: pulsar fuera de una ventana es la forma en que
   media internet las cierra, y no encontrarla ahí desconcierta. */
.lt-alerta-aviso[hidden] {
  display: none;
}

.lt-alerta-aviso__velo {
  position: absolute;
  inset: 0;
  background: rgba(7, 19, 36, .72);
  cursor: pointer;
}

/*
 * MIENTRAS ESTÁ ABIERTA, EL FONDO NO SE DESPLAZA.
 *
 * Sin esto, la rueda del ratón mueve la página de detrás y la ventana se
 * queda flotando sobre un sitio que se mueve solo. La clase la pone y la
 * quita el guion, así que sin JavaScript no hay ventana ni bloqueo.
 */
.lt-aviso-abierto,
.lt-aviso-abierto body {
  overflow: hidden;
}

.lt-alerta-aviso__caja {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 2 * var(--e-3));
  overflow-y: auto;
  padding: var(--e-4) var(--e-3) var(--e-3);
  border-radius: var(--radio-tarjeta);
  background: var(--blanco);
  box-shadow: var(--sombra-3);
  /* La cinta roja de arriba es lo que se ve antes que el texto. */
  border-top: 6px solid var(--al-extrema);
}

@media (prefers-reduced-motion: no-preference) {
  .lt-alerta-aviso__caja {
    animation: lt-aviso-entra 220ms cubic-bezier(.22, .61, .36, 1) both;
  }
}

@keyframes lt-aviso-entra {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/*
 * 44 px REALES DE OBJETIVO, aunque la aspa mida doce. Es el botón que
 * alguien busca con prisa y con el móvil en una mano; que sea pequeño de
 * dibujo no significa que deba ser pequeño de tocar.
 */
.lt-alerta-aviso__cerrar {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--apagado);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.lt-alerta-aviso__cerrar:hover { background: var(--hueso); color: var(--tinta); }

.lt-alerta-aviso__cerrar:focus-visible {
  outline: 3px solid var(--al-extrema);
  outline-offset: 2px;
}

.lt-alerta-aviso__marca {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--e-2);
  color: var(--al-extrema);
  font-size: var(--fs-etiqueta);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lt-alerta-aviso__titulo {
  margin: 0 0 var(--e-2);
  font-family: var(--fuente-titulo);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.15;
  color: var(--tinta);
  text-wrap: balance;
}

.lt-alerta-aviso__zona {
  margin: 0 0 4px;
  font-weight: 700;
  color: var(--tinta);
}

.lt-alerta-aviso__hasta {
  margin: 0 0 var(--e-2);
  font-size: var(--fs-chico);
  color: var(--apagado);
}

.lt-alerta-aviso__consejo {
  padding: var(--e-2);
  border-radius: var(--radio-chico);
  background: var(--al-extrema-piel);
}

.lt-alerta-aviso__consejo p {
  margin: 0 0 8px;
  font-size: var(--fs-chico);
  line-height: 1.6;
  color: var(--tinta);
}

.lt-alerta-aviso__consejo p:last-child { margin-bottom: 0; }

.lt-alerta-aviso__mas {
  margin: var(--e-2) 0 0;
  font-size: var(--fs-chico);
  font-weight: 700;
  color: var(--al-extrema);
}

.lt-alerta-aviso__pie {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--e-3);
}

.lt-alerta-aviso__ir {
  flex: 1 1 auto;
  padding: 13px 20px;
  border-radius: var(--radio-pildora);
  background: var(--al-extrema);
  color: var(--blanco);
  font-size: var(--fs-chico);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.lt-alerta-aviso__ir:hover { background: var(--al-grave); color: var(--blanco); }

.lt-alerta-aviso__vale {
  flex: 0 0 auto;
  padding: 13px 20px;
  border: 1.5px solid var(--linea);
  border-radius: var(--radio-pildora);
  background: none;
  color: var(--apagado);
  font-family: inherit;
  font-size: var(--fs-chico);
  font-weight: 700;
  cursor: pointer;
}

.lt-alerta-aviso__vale:hover { border-color: var(--apagado); color: var(--tinta); }

.lt-alerta-aviso__ir:focus-visible,
.lt-alerta-aviso__vale:focus-visible {
  outline: 3px solid var(--al-extrema);
  outline-offset: 2px;
}

.lt-alerta-aviso__fuente {
  margin: var(--e-2) 0 0;
  font-size: var(--fs-etiqueta);
  color: var(--apagado);
  text-align: center;
}

/* ====================================================================
 * 2 — EL PUNTO DEL MENÚ
 * --------------------------------------------------------------------
 * Lo que queda cuando se cierra el aviso, y lo único que sale con las
 * alertas Graves. La clase `lt-menu-alerta` se la pone el PHP al
 * elemento del menú que apunta a /alertas/.
 *
 * ES UN PUNTO Y NO UN NÚMERO a propósito: «13» al lado de «Alertas»
 * parece una bandeja de correo sin leer, y esto no es una bandeja. El
 * punto dice «pasa algo», que es todo lo que un menú tiene que decir.
 *
 * VA CON `::after` Y NO CON UN <span>: el rótulo del menú lo genera
 * WordPress y lo puede reescribir el traductor. Un elemento añadido por
 * PHP dentro del enlace sobreviviría a eso solo por suerte.
 * ==================================================================== */

.lt-menu-alerta > a {
  position: relative;
}

.lt-menu-alerta > a::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--al-grave, #B42318);
}

/* En el cajón del móvil el enlace ocupa toda la fila, así que el punto
   pegado al borde derecho quedaría a media pantalla del texto. Se pone
   justo detrás del rótulo. */
@media (max-width: 1320px) {
  .lt-menu-alerta > a {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
  }

  .lt-menu-alerta > a::after {
    position: static;
    flex: none;
  }
}

/* ====================================================================
 * 3 — LA PÁGINA
 * ==================================================================== */

.lt-alertas {
  margin-inline: auto;
}

/*
 * LA COLUMNA DE LECTURA SE ENSANCHA, Y SOLO AQUI.
 *
 * page.php mete el contenido en `.lt-prosa`, una columna de 72 caracteres
 * pensada para texto legal: parrafos largos que se leen de corrido. Estas
 * alertas no son parrafos, son fichas con etiquetas, fechas y una caja de
 * «que hacer» dentro. A 693 px cada ficha queda estrecha y alta, y la lista
 * entera obliga a bajar el doble.
 *
 * El `:has()` deja la regla acotada a esta pantalla: ninguna otra pagina del
 * sitio cambia de ancho por esto. Donde `:has()` no exista, la columna se
 * queda como estaba —mas estrecha, perfectamente legible— y no se rompe nada.
 */
.lt-prosa:has(> .lt-alertas) {
  max-width: 880px;
}

/* --------------------------------------------------------------------
 * LO QUE HAY QUE DESHACERLE A LA COLUMNA DE PROSA — 2026-09-01
 * --------------------------------------------------------------------
 * page.php envuelve el contenido en `.lt-pagina__prosa`, y estructura.css
 * le da a esa columna reglas pensadas para un documento legal:
 *
 *     .lt-pagina__prosa h2 { margin-top: clamp(32px, 4vw, 48px); }
 *     .lt-pagina__prosa ul { margin-bottom: var(--e-3); padding-left: 1.25em; }
 *     .lt-pagina__prosa li { margin-bottom: .4em; }
 *
 * Para un texto de términos y condiciones están bien. Para esta pantalla
 * no: `h2` es el nombre del evento dentro de la ficha, `ul` es la lista de
 * alertas y `li` es cada tarjeta.
 *
 * MEDIDO, no supuesto: el título computaba `margin-top: 48px`, que abría un
 * hueco vacío entre la etiqueta de gravedad y el nombre del aviso; y la
 * lista heredaba `padding-left: 1.25em`, que dejaba las tarjetas
 * desalineadas respecto al descargo de arriba.
 *
 * Y NO BASTABA CON PONER `margin: 0` EN CADA PIEZA, que es lo que ya hacían
 * las reglas de esta hoja. `.lt-pagina__prosa h2` vale 0-1-1 de
 * especificidad y `.lt-alerta__titulo` vale 0-1-0: gana la de la prosa por
 * llevar además el tipo de etiqueta. Por eso estas tres reglas van
 * calificadas con `.lt-alertas` delante —0-2-0— y no con `!important`: la
 * especificidad correcta se razona, el `!important` solo se gana la
 * siguiente pelea y pierde la de después.
 * -------------------------------------------------------------------- */

.lt-alertas .lt-alerta__titulo {
  margin: 0;
}

.lt-alertas .lt-alertas__lista {
  margin: 0;
  padding: 0;
}

.lt-alertas .lt-alerta {
  margin-bottom: 0;
}

/* --- El descargo, arriba del todo ------------------------------------ */

/*
 * VA ANTES DE LAS ALERTAS Y NO EN EL PIE. Un descargo al final es un
 * descargo que solo lee quien ya no lo necesita. Aquí lo primero que se
 * ve es el 911, y después los avisos.
 */
.lt-alerta-descargo {
  padding: var(--e-3);
  margin-bottom: var(--e-4);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--al-grave);
  border-radius: var(--radio-chico);
  background: var(--hueso);
}

.lt-alerta-descargo__urgente {
  margin: 0 0 6px;
  color: var(--al-grave);
  font-size: var(--fs-texto);
}

.lt-alerta-descargo__texto {
  margin: 0;
  color: var(--apagado);
  font-size: var(--fs-chico);
  line-height: 1.6;
}

.lt-alerta-descargo__texto a {
  color: var(--marca);
}

/* --- Cuando no hay nada ---------------------------------------------- */

/*
 * «No hay alertas» ES UNA RESPUESTA, NO UN HUECO. Quien entra aquí
 * durante una tormenta viene con una pregunta concreta, y que la página
 * se lo diga con claridad —en verde y con un visto— vale tanto como la
 * lista cuando la hay.
 */
.lt-alertas__calma {
  padding: var(--e-5) var(--e-3);
  border: 1px solid var(--marca-borde);
  border-radius: var(--radio-tarjeta);
  background: var(--marca-claro);
  text-align: center;
}

.lt-alertas__calma-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--e-2);
  border-radius: 50%;
  background: var(--blanco);
  color: var(--marca);
}

.lt-alertas__calma-texto {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--tinta);
}

.lt-alertas__calma-otras {
  margin: var(--e-1) 0 0;
  font-size: var(--fs-chico);
  color: var(--apagado);
}

/* --- La lista --------------------------------------------------------- */

.lt-alertas__cuenta {
  margin: 0 0 var(--e-2);
  font-size: var(--fs-etiqueta);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--apagado);
}

.lt-alertas__lista {
  display: grid;
  gap: var(--e-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lt-alerta {
  padding: var(--e-3);
  border: 1px solid var(--linea);
  border-left: 5px solid var(--al-menor);
  border-radius: var(--radio-tarjeta);
  background: var(--blanco);
  box-shadow: var(--sombra-1);
}

.lt-alerta--extreme  { border-left-color: var(--al-extrema); background: var(--al-extrema-piel); }
.lt-alerta--severe   { border-left-color: var(--al-grave);   background: var(--al-grave-piel); }
.lt-alerta--moderate { border-left-color: var(--al-media);   background: var(--al-media-piel); }
.lt-alerta--minor    { border-left-color: var(--al-menor);   background: var(--al-menor-piel); }
.lt-alerta--unknown  { border-left-color: var(--linea); }

/*
 * LA GRAVEDAD VA ENCIMA DEL TITULO, NO A SU LADO.
 *
 * En columna las dos piezas se leen en el orden en que importan —primero
 * «EXTREMA», despues que es— y el titular dispone del ancho entero. Al lado,
 * una pildora de 90 px le robaba ese ancho a un titular que ya es grande, y
 * el conjunto parecia un titulo mal colocado en vez de una etiqueta.
 */
.lt-alerta__cabeza {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: var(--e-2);
}

/*
 * LA GRAVEDAD VA EN PALABRA Y NO SOLO EN COLOR. Un borde rojo no dice
 * nada a quien no distingue el rojo del ámbar, y en una alerta eso no
 * es un detalle de accesibilidad: es la información entera.
 */
.lt-alerta__gravedad {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radio-pildora);
  background: var(--al-menor);
  color: var(--blanco);
  font-size: var(--fs-etiqueta);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lt-alerta--extreme  .lt-alerta__gravedad { background: var(--al-extrema); }
.lt-alerta--severe   .lt-alerta__gravedad { background: var(--al-grave); }
.lt-alerta--moderate .lt-alerta__gravedad { background: var(--al-media); }
.lt-alerta--unknown  .lt-alerta__gravedad { background: var(--apagado); }

.lt-alerta__titulo {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.15;
  color: var(--tinta);
  text-wrap: balance;
}

.lt-alerta__zona,
.lt-alerta__vigencia {
  margin: 0 0 6px;
  font-size: var(--fs-chico);
  color: var(--tinta);
}

.lt-alerta__etiqueta {
  display: inline-block;
  min-width: 62px;
  font-size: var(--fs-etiqueta);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--apagado);
}

.lt-alerta__titular {
  margin: var(--e-2) 0 0;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--tinta);
}

/* --- Qué hacer: la parte que de verdad sirve -------------------------- */

/*
 * Va en su propia caja blanca sobre el fondo tintado de la tarjeta. En
 * una alerta, «qué hago yo ahora» es la única línea que alguien busca
 * de verdad, y tenía que distinguirse de la descripción del fenómeno
 * sin necesidad de leer las dos para saber cuál es cuál.
 */
.lt-alerta__consejo {
  margin-top: var(--e-3);
  padding: var(--e-2);
  border-radius: var(--radio-chico);
  background: var(--blanco);
  border: 1px solid var(--linea);
}

.lt-alerta__consejo p {
  margin: 0 0 8px;
  font-size: var(--fs-chico);
  line-height: 1.6;
  color: var(--tinta);
}

.lt-alerta__consejo p:last-child {
  margin-bottom: 0;
}

.lt-alerta__consejo .lt-alerta__etiqueta {
  display: block;
  min-width: 0;
  margin-bottom: 8px;
}

/* --- El aviso completo, plegado --------------------------------------- */

/*
 * `<details>` NATIVO, SIN JAVASCRIPT. El texto original del NWS son
 * varios párrafos de jerga técnica; desplegado empuja el resto de las
 * alertas fuera de la pantalla. Plegado está a un clic, y funciona
 * aunque el guion del sitio no cargue —que es justo el escenario en el
 * que esta página tiene que seguir en pie—.
 */
.lt-alerta__detalle {
  margin-top: var(--e-2);
  font-size: var(--fs-chico);
}

.lt-alerta__detalle > summary {
  cursor: pointer;
  padding: 8px 0;
  font-weight: 700;
  color: var(--marca);
  list-style: none;
}

.lt-alerta__detalle > summary::-webkit-details-marker {
  display: none;
}

.lt-alerta__detalle > summary::before {
  content: '＋ ';
  font-weight: 400;
}

.lt-alerta__detalle[open] > summary::before {
  content: '－ ';
}

.lt-alerta__detalle > summary:focus-visible {
  outline: 3px solid var(--marca);
  outline-offset: 2px;
  border-radius: 4px;
}

.lt-alerta__detalle p {
  margin: 0 0 10px;
  line-height: 1.65;
  color: var(--apagado);
}

/* --- De dónde sale esta alerta ---------------------------------------- */

.lt-alerta__origen {
  margin: var(--e-2) 0 0;
  padding-top: var(--e-2);
  border-top: 1px solid var(--linea);
  font-size: var(--fs-etiqueta);
  color: var(--apagado);
}

.lt-alerta__origen a {
  color: var(--marca);
}

/* El aviso de que ese texto se quedó en inglés: honesto y sin drama. */
.lt-alerta__ingles {
  font-style: italic;
}

.lt-alertas__fuente {
  margin: var(--e-4) 0 0;
  font-size: var(--fs-etiqueta);
  color: var(--apagado);
  text-align: center;
}

/* ====================================================================
 * 4 — EL TELÉFONO
 * ==================================================================== */

@media (max-width: 700px) {
  .lt-alerta {
    padding: var(--e-2);
  }

  .lt-alerta__titulo {
    font-size: 1.3rem;
  }

  /* La etiqueta deja de reservar ancho: a 390 px, 62 px fijos delante
     de «Dónde» partían el nombre del condado en dos renglones. */
  .lt-alerta__etiqueta {
    display: block;
    min-width: 0;
    margin-bottom: 2px;
  }
}

/* ====================================================================
 * 5 — MENOS MOVIMIENTO
 * ==================================================================== */

@media (prefers-reduced-motion: reduce) {
  /* La entrada de la ventana ya está condicionada arriba con
     `prefers-reduced-motion: no-preference`; aquí solo queda el resto. */
  .lt-alerta-aviso__ir,
  .lt-alerta-aviso__vale,
  .lt-alerta-aviso__cerrar {
    transition: none;
  }
}