/* ====================================================================
 * EL TIEMPO DE TU CIUDAD — la tira bajo el buscador
 * PHP: inc/clima.php
 *
 * Encargo del dueño (2026-09-25), con una captura de la portada de
 * Google: «la temperatura, si hay lluvia y a qué hora va a bajar el sol
 * o a qué hora va a amanecer».
 *
 * --------------------------------------------------------------------
 * POR QUÉ ES OSCURA
 * --------------------------------------------------------------------
 * Porque va pegada al hero, y el hero de este sitio es negro. Una tira
 * clara aquí cortaría la portada en dos justo en el primer pantallazo.
 * Siendo oscura, el hero y la tira se leen como UNA pieza: el buscador
 * arriba, el dato de tu ciudad debajo. Que es exactamente la referencia
 * que enseñó el dueño.
 *
 * Los colores salen del hero (inc/../css/hero.css) y no de los tokens
 * claros del resto del sitio, por lo mismo.
 *
 * --------------------------------------------------------------------
 * LO QUE NO HACE
 * --------------------------------------------------------------------
 * No se mueve, no gira, no tiene animación de entrada. Es un dato de
 * consulta de dos segundos encima del buscador: cualquier movimiento
 * aquí compite con lo que la persona vino a hacer, que es escribir.
 * ==================================================================== */

.lt-clima {
  --cl-fondo:    #0B0D10;   /* el mismo negro del hero: la tira lo continúa */
  --cl-tarjeta:  #151B24;   /* un peldaño por encima, para que la tarjeta exista */
  --cl-borde:    rgba(255, 255, 255, .10);
  --cl-tinta:    #FFFFFF;
  --cl-apagado:  #A8B3C2;   /* secundario sobre negro — 7.9:1 */
  --cl-cielo:    #4DA3FF;   /* el azul de acción del hero */
  --cl-lluvia:   #7CC4FF;   /* la probabilidad cuando sí importa */
  --cl-alerta:   #FF6B5E;

  color: var(--cl-tinta);
}

/* Dentro del hero: fila propia que ocupa TODO el ancho del contenido. */
.lt-hero .lt-clima {
  width: 100%;
  justify-self: stretch;
}
@media (min-width: 1025px) {
  .lt-hero .lt-clima { grid-area: clima; }
}

/* 2026-10-08: las tarjetas viven dentro del hero, encima del video. Fondo
   casi opaco (sin desenfoque: backdrop-filter cuesta mucho al hacer scroll en
   teléfonos) para que el dato se lea sobre cualquier fotograma. */
.lt-hero .lt-clima__tarjeta {
  text-align: left;   /* en móvil el hero centra todo; el dato se lee mejor alineado */
  background: rgba(13, 18, 26, .78);
  border-color: rgba(255, 255, 255, .14);
}

/*
 * Rejilla en vez de flex con anchos: las dos tarjetas miden lo mismo
 * pase lo que pase con el texto de dentro. Con flex, «Parcialmente
 * nublado» hacía la primera más ancha que la segunda y la fila quedaba
 * descuadrada.
 *
 * EL TOPE DE 320 px ES EL QUE MANDA. Sin él, las dos tarjetas se repartían
 * los 1320 px del contenedor y salían dos cajas de 660 con cuatro palabras
 * dentro: un dato de consulta convertido en cartel. Miden lo que mide su
 * contenido y se quedan a la izquierda, bajo el buscador, como en la
 * referencia.
 *
 * Y el crédito de la fuente va FUERA de esta rejilla. Estando dentro con
 * `grid-column: 1 / -1` mantenía vivas las seis pistas que cabían en el
 * contenedor, y las dos tarjetas se quedaban en un sexto del ancho cada
 * una. Se vio en pantalla antes de entender por qué.
 */
.lt-clima__caja {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

.lt-clima__tarjeta {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 12px 16px;
  border: 1px solid var(--cl-borde);
  border-radius: 16px;
  background: var(--cl-tarjeta);
}

/*
 * La cabecera de la tarjeta manda en el alto de TODA la fila, así que aquí
 * nada puede partirse en dos líneas. Le pasó al botón «Mi ciudad»: en un
 * teléfono no le cabía en una línea, se partía en «Mi / ciudad» y levantaba esa
 * tarjeta por encima de la otra. El dueño lo vio: «el botón aparece no del
 * mismo alto».
 *
 * `min-height` fija el alto de la fila al del icono, que es el elemento más
 * alto, y `min-width: 0` deja que el nombre de la ciudad se recorte con
 * puntos suspensivos en vez de empujar al resto.
 */
.lt-clima__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 26px;
}

.lt-clima__ciudad {
  min-width: 0;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lt-clima__icono {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  color: var(--cl-cielo);
}

/* ------------------------------------------------------ «Mi ciudad» */

/*
 * Solo aparece cuando nadie eligió ciudad y el sitio está enseñando
 * Houston por defecto. Va en la cabecera de la tarjeta, al lado del
 * nombre, que es donde se mira cuando lo que pone no cuadra con dónde
 * estás. Nace con `hidden` y lo destapa el guion.
 */
.lt-clima__ubicar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid var(--cl-borde);
  border-radius: 999px;
  background: transparent;
  color: var(--cl-apagado);
  font: inherit;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.2;
  /* En una línea SIEMPRE: partido en «Mi / ciudad» levantaba la tarjeta. */
  white-space: nowrap;
  cursor: pointer;
}

.lt-clima__ubicar:hover,
.lt-clima__ubicar:focus-visible {
  border-color: var(--cl-cielo);
  color: var(--cl-tinta);
}

.lt-clima__ubicar[disabled] { cursor: progress; opacity: .6; }

/* El pin, dibujado con bordes: dos elementos menos que un SVG para algo
   que mide diez píxeles. */
.lt-clima__ubicar-icono {
  width: 9px;
  height: 9px;
  border: 2px solid currentColor;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

.lt-clima__ubicar.es-buscando .lt-clima__ubicar-icono {
  animation: lt-clima-late 1s ease-in-out infinite;
}

/* El icono de lluvia y el de tormenta se pintan del azul del agua, que
   es la única pista de color que lleva la tira. */
.lt-clima__icono--lluvia,
.lt-clima__icono--tormenta { color: var(--cl-lluvia); }

.lt-clima__dato {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}

/*
 * El Fahrenheit grande y el Celsius pequeño al lado. Los dos, y en este
 * orden: Fahrenheit es el que va a oír en la calle y Celsius el que
 * entiende quien llegó hace seis meses. `tabular-nums` para que la
 * cifra no baile cuando pasa de 99 a 100.
 */
.lt-clima__grados,
.lt-clima__hora {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.7rem, 4.4vw, 2.1rem);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.lt-clima__celsius {
  font-size: .9rem;
  font-weight: 600;
  color: var(--cl-apagado);
  font-variant-numeric: tabular-nums;
}

.lt-clima__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0;
  font-size: .85rem;
  color: var(--cl-apagado);
}

.lt-clima__cielo { color: var(--cl-tinta); }

/* Un 8 % de lluvia no es una noticia; un 40 % sí. Solo se enciende
   cuando de verdad conviene coger paraguas. */
.lt-clima__lluvia.es-mojado {
  color: var(--cl-lluvia);
  font-weight: 600;
}

/* ------------------------------------------------- alerta y fuente */

.lt-clima__alerta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  padding: 10px 16px;
  border: 1px solid rgba(255, 107, 94, .45);
  border-radius: 999px;
  background: rgba(255, 107, 94, .10);
  color: var(--cl-alerta);
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
}

.lt-clima__alerta:hover,
.lt-clima__alerta:focus-visible { background: rgba(255, 107, 94, .18); }

.lt-clima__alerta-punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cl-alerta);
  animation: lt-clima-late 1.8s ease-in-out infinite;
}

@keyframes lt-clima-late {
  50% { opacity: .25; }
}

/*
 * El crédito de la fuente. Pequeño pero SIEMPRE presente: el NWS pide
 * identificarse al usar su servicio, y además es lo que hace creíble el
 * dato. Ocupa la fila entera debajo de las tarjetas.
 */
.lt-clima__fuente {
  margin: 8px 0 0;
  font-size: .75rem;
  color: var(--cl-apagado);
}

.lt-clima__fuente a {
  color: inherit;
  text-underline-offset: 2px;
}

.lt-clima__fuente a:hover,
.lt-clima__fuente a:focus-visible { color: var(--cl-tinta); }

/* ------------------------------------------------------------ móvil */

/*
 * En móvil las dos tarjetas siguen UNA AL LADO DE OTRA, no apiladas: la
 * tira está encima de todo y apilarla empujaría la portada 90 px hacia
 * abajo para decir dos cosas que caben en una línea. Cabe porque el
 * `auto-fit` baja el mínimo a 150 px aquí.
 */
@media (max-width: 560px) {

  .lt-clima__caja { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

  .lt-clima__tarjeta { padding: 10px 12px; }

  .lt-clima__ciudad { font-size: .85rem; }

  .lt-clima__icono { width: 22px; height: 22px; }

  .lt-clima__pie { font-size: .78rem; }

  .lt-clima__alerta { grid-column: 1 / -1; justify-content: center; }

  /*
   * EN EL TELÉFONO, EL BOTÓN ES SOLO EL ALFILER.
   *
   * La tarjeta mide media pantalla, y «Houston» + «Mi ciudad» + el icono del
   * cielo no caben en una línea de 200 px por mucho que se apriete. Antes se
   * partía en dos y descuadraba la fila entera.
   *
   * El texto no se borra: se esconde a la vista y se queda para los lectores
   * de pantalla, y el botón lleva además su `aria-label`. Un alfiler junto al
   * nombre de la ciudad se entiende sin leer nada.
   */
  .lt-clima__ubicar { padding: 5px 7px; }

  .lt-clima__ubicar-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lt-clima__alerta-punto { animation: none; }
}