/*
 * AYUDAS Y EVENTOS — Latinos en Texas
 *
 * Listados (archive-lt_ayuda.php, archive-lt_evento.php) con su mapa y su
 * calendario, y las dos fichas (single-lt_ayuda.php, single-lt_evento.php).
 *
 * Todo sale de tokens.css: ni un color, ni un tamaño, ni un radio literal.
 *
 * OJO CON `.lt-filtros`: en componentes.css significa «fila de píldoras» y aquí
 * significa «formulario de filtros». Esta hoja carga DESPUÉS (ver la cadena de
 * dependencias de inc/encolar-modulos.php) y gana por cascada, sin un solo
 * `!important`. Si alguien cambia esas dependencias, este equilibrio se rompe
 * en silencio.
 *
 * ---------------------------------------------------------------------------
 * EL TONO DE ESTAS DOS PANTALLAS
 * ---------------------------------------------------------------------------
 * Comparten el lenguaje visual del resto del sitio —fotografía, velos,
 * asimetría, Fraunces en los titulares— pero con un límite que no tienen las
 * demás: aquí hay gente buscando una despensa de comida o una clínica gratuita.
 *
 * De ahí dos reglas propias:
 *   · La fecha de verificación y el «Gratuito» NUNCA se subordinan a la
 *     estética. Van en bloques sólidos, no sobre fotografía, porque un dato mal
 *     leído aquí significa alguien conduciendo una hora para encontrar una
 *     puerta cerrada.
 *   · El movimiento se aplica a las tarjetas, nunca a los avisos ni a los
 *     datos de contacto: lo urgente no se hace esperar a una transición.
 */

/* ================================================================== */
/* CABECERA DE LISTADO                                                 */
/* ================================================================== */

/*
 * La cabecera va sobre la banda nocturna (.lt-seccion--marca, redefinida en
 * base.css). Antes era un azul pálido que no separaba nada del contenido.
 */
.lt-cabecera-listado {
  position: relative;
  overflow: hidden;
}

/* Halo de marca: rompe el plano oscuro sin descargar una sola imagen. */
.lt-cabecera-listado::before {
  content: '';
  position: absolute;
  top: -55%;
  right: -10%;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--marca) 58%, transparent) 0%, transparent 70%);
  pointer-events: none;
}

.lt-cabecera-listado > .lt-contenedor { position: relative; }

.lt-cabecera-listado h1 {
  margin-bottom: var(--e-3);
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  letter-spacing: var(--tracking-display);
  max-width: 20ch;
}

.lt-cabecera-listado__entrada {
  max-width: 58ch;
  margin: 0;
  color: var(--niebla);
  font-size: 1.08rem;
}

/* ================================================================== */
/* FILTROS (formulario)                                                */
/* ================================================================== */

.lt-filtros {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-2);
  padding: var(--e-3);
  margin-bottom: var(--e-4);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-1);
}

@media (min-width: 768px) {
  .lt-filtros {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    align-items: end;
  }
}

.lt-filtros__campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;   /* sin esto un <select> de nombres largos desborda la rejilla */
}

.lt-filtros__etiqueta {
  font-size: var(--fs-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--apagado);
}

.lt-filtros__campo select,
.lt-filtros__control {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--marca-borde);
  border-radius: var(--radio-chico);
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  /* 16px exactos: por debajo, Safari en iPhone hace zoom al enfocar el campo
     y descoloca la página entera. */
  font-size: 16px;
  cursor: pointer;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

.lt-filtros__campo select:hover,
.lt-filtros__control:hover { border-color: var(--marca); }

.lt-filtros__campo select:focus,
.lt-filtros__control:focus {
  border-color: var(--marca);
  box-shadow: 0 0 0 3px var(--marca-claro);
}

/* La casilla es un objetivo táctil completo: se pulsa la etiqueta, no solo el
   cuadradito de 13px que dibuja el navegador. */
.lt-filtros__campo--casilla {
  flex-direction: row;
  align-items: center;
  gap: var(--e-1);
  min-height: 48px;
}

.lt-filtros__campo--casilla input {
  width: 22px;
  height: 22px;
  flex: none;
  accent-color: var(--marca);
  cursor: pointer;
}

.lt-filtros__campo--casilla label {
  cursor: pointer;
  font-size: var(--fs-chico);
  font-weight: var(--peso-medio);
}

.lt-filtros__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
}

.lt-filtros__acciones .lt-btn { flex: 0 0 auto; }

.lt-filtros__limpiar {
  font-size: var(--fs-chico);
  font-weight: var(--peso-medio);
  color: var(--apagado);
  white-space: nowrap;
}
.lt-filtros__limpiar:hover { color: var(--marca); }

/* ================================================================== */
/* RESUMEN, VISTAS Y PAGINACIÓN                                        */
/* ================================================================== */

.lt-resumen {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-1) var(--e-3);
  margin-bottom: var(--e-4);
  padding-bottom: var(--e-2);
  border-bottom: 1px solid var(--linea);
  color: var(--apagado);
  font-size: var(--fs-chico);
}

/* Conmutador lista / mapa / calendario. Son enlaces, no botones: cada vista
   tiene su URL y se puede compartir por WhatsApp. */
.lt-vistas {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--hueso-honda);
  border-radius: var(--radio-pildora);
}

.lt-vistas__enlace {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 18px;
  border-radius: var(--radio-pildora);
  color: var(--tinta);
  font-size: var(--fs-chico);
  font-weight: var(--peso-medio);
  text-decoration: none;
  transition: background-color var(--transicion), color var(--transicion);
}

.lt-vistas__enlace:hover { background: var(--blanco); color: var(--marca); }

/* aria-current es la única marca de «estás aquí»: sirve al lector de pantalla
   y al CSS a la vez, sin una clase duplicada que mantener. */
.lt-vistas__enlace[aria-current] {
  background: var(--marca);
  color: var(--blanco);
  box-shadow: var(--sombra-1);
}

.lt-paginacion { margin-top: var(--e-5); }

/* ================================================================== */
/* TARJETAS — lo propio de ayudas y eventos                            */
/* ================================================================== */

/*
 * La caja, la fotografía obligatoria, el velo, el zoom y el respaldo con
 * inicial viven en base.css. Aquí solo va lo que distingue a estos dos tipos.
 */

.lt-tarjeta--ayuda .lt-tarjeta__cuerpo,
.lt-tarjeta--evento .lt-tarjeta__cuerpo { gap: 6px; }

/* La organización que presta la ayuda pesa tanto como el título: es lo que
   dice si el vecino se puede fiar. */
.lt-tarjeta__organizacion {
  font-size: var(--fs-chico);
  font-weight: var(--peso-fuerte);
  color: var(--brasa-texto);
  letter-spacing: .02em;
}

.lt-tarjeta__direccion,
.lt-tarjeta__lugar {
  font-size: var(--fs-chico);
  color: var(--apagado);
  margin: 0;
  overflow-wrap: anywhere;
}

/* El precio de un evento en Fraunces: es el dato que decide si se va o no. */
.lt-tarjeta__precio {
  font-family: var(--fuente-titulo);
  font-optical-sizing: auto;
  font-size: 1.15rem;
  font-weight: var(--peso-titulo);
  color: var(--tinta);
  margin: 0;
}

/*
 * Evento cancelado o pospuesto. La foto se dessatura y el título se tacha: hay
 * que poder descartarlo de un vistazo, sin leer el sello. Se conserva visible
 * —no se esconde— porque quien ya tenía el plan hecho necesita enterarse.
 */
.lt-tarjeta--cancelado { opacity: .82; }
.lt-tarjeta--cancelado .lt-tarjeta__media img { filter: grayscale(1); }
.lt-tarjeta--cancelado .lt-tarjeta__titulo { text-decoration: line-through; }
/* El hover no levanta ni hace zoom en algo que ya no ocurre: sería invitar a
   pinchar en un plan cancelado. */
.lt-tarjeta--cancelado:hover { transform: none; }
.lt-tarjeta--cancelado:hover .lt-tarjeta__media img { transform: none; }

/*
 * Ayuda pendiente de revisar. Filete ámbar-terracota en el borde izquierdo:
 * el operador ve de un vistazo cuáles llevan tiempo sin comprobar, y el vecino
 * lee la nota de la ficha. No se oculta: una ayuda sin verificar sigue siendo
 * mejor que ninguna, mientras se diga que no está verificada.
 */
.lt-tarjeta--revisar { box-shadow: var(--sombra-1), inset 4px 0 0 var(--brasa); }
.lt-tarjeta--revisar:hover { box-shadow: var(--sombra-2), inset 4px 0 0 var(--brasa); }

.lt-revisar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brasa-texto);
}

/* El título de una alternativa sugerida cuando el filtro no da resultados. */
.lt-titulo-alternativa {
  font-size: var(--fs-h3);
  margin-bottom: var(--e-3);
}

.lt-vacio h2 { font-size: var(--fs-h3); margin-bottom: var(--e-2); }

.lt-vacio__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-3);
}

/* ================================================================== */
/* BLOQUE DE FECHA (tarjeta de evento)                                 */
/* ================================================================== */

/*
 * El día en grande, a la izquierda del título. Un evento mal leído no es un
 * fallo de maquetación: es gente conduciendo una hora para llegar cuando ya
 * terminó.
 */
.lt-fecha-bloque {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin-bottom: var(--e-1);
}

.lt-fecha-bloque time {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 62px;
  padding: var(--e-1) 4px;
  border-radius: var(--radio-chico);
  /* Terracota sólida con tinta oscura encima: 6.0:1. Blanco sobre terracota se
     queda en 3.7:1 y no pasa AA. */
  background: var(--brasa);
  color: var(--brasa-tinta);
  line-height: 1;
}

.lt-fecha-bloque__dia {
  font-family: var(--fuente-titulo);
  font-optical-sizing: auto;
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: var(--tracking-titulo);
}

.lt-fecha-bloque__mes {
  margin-top: 3px;
  font-size: 11px;
  font-weight: var(--peso-fuerte);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.lt-fecha-bloque__detalle {
  min-width: 0;
  font-size: var(--fs-chico);
  color: var(--apagado);
}

.lt-fecha-bloque__hora { font-weight: var(--peso-medio); color: var(--tinta); }
.lt-fecha-bloque__hasta { display: block; }

/* ================================================================== */
/* CALENDARIO                                                          */
/* ================================================================== */

.lt-calendario {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-1);
  overflow: hidden;
}

.lt-calendario__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  padding: var(--e-3);
  /* La cabecera del mes sobre fondo nocturno: separa el control del contenido
     y le da al calendario el peso de una pieza, no de una tabla. */
  background: var(--noche);
  color: var(--blanco);
}

.lt-calendario__mes {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-optical-sizing: auto;
  font-size: var(--fs-h3);
  font-weight: var(--peso-titulo);
  letter-spacing: var(--tracking-titulo);
  color: var(--blanco);
  text-transform: capitalize;
}

.lt-calendario__nav {
  display: flex;
  gap: var(--e-1);
}

.lt-calendario__nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--e-2);
  border: 1px solid var(--noche-borde);
  border-radius: var(--radio-pildora);
  color: var(--blanco);
  font-size: var(--fs-chico);
  font-weight: var(--peso-medio);
  text-decoration: none;
  transition: background-color var(--transicion), color var(--transicion);
}

.lt-calendario__nav a:hover { background: var(--blanco); color: var(--noche); }

.lt-calendario__nombres,
.lt-calendario__dias {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.lt-calendario__nombres {
  background: var(--hueso);
  border-bottom: 1px solid var(--linea);
}

.lt-calendario__dow,
.lt-calendario__nombre {
  padding: var(--e-1) 4px;
  text-align: center;
  font-size: var(--fs-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--apagado);
}

.lt-calendario__dia {
  position: relative;
  min-height: 108px;
  padding: 6px;
  border-right: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  background: var(--blanco);
}

/* Los huecos del mes anterior y del siguiente: se ven como papel, no como
   celdas vacías con borde. */
.lt-calendario__dia--vacio,
.lt-calendario__dia--hueco { background: var(--hueso); }

.lt-calendario__num,
.lt-calendario__fecha {
  display: block;
  margin-bottom: 4px;
  font-size: var(--fs-chico);
  font-weight: var(--peso-fuerte);
  color: var(--apagado);
}

/* El día de hoy con un disco de marca. Es la referencia desde la que se lee
   todo el calendario. */
.lt-calendario__hoy .lt-calendario__num,
.lt-calendario__hoy .lt-calendario__fecha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--marca);
  color: var(--blanco);
}

.lt-calendario__eventos {
  display: grid;
  gap: 3px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.lt-calendario__evento { min-width: 0; }

.lt-calendario__evento a {
  display: block;
  padding: 4px 6px;
  border-radius: 6px;
  /* Terracota tenue con texto terracota oscuro: distingue el evento del día
     sin gritar, y mantiene 4.9:1 sobre el relleno claro. */
  background: color-mix(in srgb, var(--brasa) 14%, transparent);
  color: var(--brasa-texto);
  font-size: 12px;
  font-weight: var(--peso-medio);
  line-height: 1.3;
  text-decoration: none;
  /* Un título largo no puede ensanchar la celda y descuadrar la semana. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lt-calendario__evento a:hover { background: var(--brasa); color: var(--brasa-tinta); }

.lt-calendario__hora {
  font-weight: var(--peso-fuerte);
  margin-right: 4px;
}

.lt-calendario__pie {
  padding: var(--e-2) var(--e-3);
  border-top: 1px solid var(--linea);
  background: var(--hueso);
  font-size: var(--fs-chico);
  color: var(--apagado);
}

/*
 * En móvil una rejilla de 7 columnas deja celdas de 45px: no cabe ni el número
 * ni un título. El calendario se convierte en una tira vertical con los días
 * que TIENEN evento, que es lo único accionable en una pantalla de teléfono.
 */
@media (max-width: 767px) {
  .lt-calendario__nombres { display: none; }

  .lt-calendario__dias { grid-template-columns: 1fr; }

  .lt-calendario__dia {
    min-height: 0;
    border-right: 0;
    display: flex;
    gap: var(--e-2);
    padding: var(--e-2);
  }

  /* Los días sin evento no se listan: en vertical serían treinta filas vacías
     que hay que recorrer con el pulgar para llegar a lo que importa. */
  .lt-calendario__dia--vacio,
  .lt-calendario__dia--hueco { display: none; }

  .lt-calendario__dia:not(:has(.lt-calendario__evento)) { display: none; }

  .lt-calendario__num,
  .lt-calendario__fecha { flex: none; width: 34px; margin: 0; }

  .lt-calendario__eventos { flex: 1 1 auto; }
  .lt-calendario__evento a { white-space: normal; }
}

/* ================================================================== */
/* MAPA                                                                */
/* ================================================================== */

/*
 * EL MAPA VIVE EN SU PROPIO CONTEXTO DE APILAMIENTO, Y NO ES DECORATIVO.
 *
 * Leaflet reparte z-index altos entre sus capas: 400 para los paneles, 700 para
 * el globo y 1000 para los controles de zoom y la atribución. La cabecera fija
 * del sitio está en 100 (estructura.css). Sin este `position: relative` +
 * `z-index: 0`, que encierra todos esos números dentro de la sección, los
 * botones «+ / −» del mapa se dibujan POR ENCIMA de la cabecera al desplazar la
 * página, tapando el menú y el buscador. Con el contexto creado, el mapa entero
 * cuenta como una sola capa por debajo de la cabecera.
 */
.lt-mapa {
  position: relative;
  z-index: 0;
  margin-bottom: var(--e-4);
}

/*
 * EL LIENZO NACE OCULTO Y LO ENCIENDE EL GUION. ANTES ERA AL REVÉS Y FALLABA.
 *
 * MEDIDO el 2026-08-09 con el JavaScript apagado: el lienzo salía a 1192x495 px
 * en color hueso (rgb(246,243,238)), un rectángulo vacío de media pantalla
 * encima de la lista. La causa no era el CSS sino QUIÉN encendía la regla: la
 * clase que escondía el lienzo (`lt-mapa--sin-mapa`) la ponía el propio
 * assets/js/mapa-ayudas.js, así que sin JavaScript no llegaba NUNCA y el hueco
 * se quedaba. Una salvaguarda que depende de lo mismo que intenta salvar no es
 * una salvaguarda.
 *
 * Dada la vuelta, los tres casos malos se apagan con la MISMA regla y sin que
 * nadie tenga que ejecutar nada: sin JavaScript, con Leaflet caído y con cero
 * puntos que dibujar el lienzo sencillamente no ocupa sitio, y debajo queda la
 * lista completa con los mismos datos. El guion solo tiene que hacer lo
 * positivo —añadir `is-listo` cuando el mapa ya está pintado—, que es lo que
 * puede garantizar.
 *
 * `is-listo` y no otro nombre: es la misma señal que usa el mapa del directorio
 * (inc/mapa-negocios.php), para no tener dos vocabularios para lo mismo.
 */
.lt-mapa__lienzo { display: none; }
.lt-mapa.is-listo .lt-mapa__lienzo { display: block; }

/*
 * SEGUNDO CERROJO. Se queda aunque con la regla de arriba ya casi no haga falta.
 *
 * assets/js/mapa-ayudas.js sigue poniendo `lt-mapa--sin-mapa` cuando apaga el
 * mapa. En los dos casos normales —Leaflet que no llegó, cero puntos— eso
 * ocurre ANTES de encender `is-listo` y el lienzo ni siquiera llega a verse.
 * Esta línea es para el tercero: el `catch` que recoge un fallo a mitad de la
 * construcción, con el lienzo ya encendido. Gana el choque por especificidad,
 * no por orden: cuatro clases (0,4,0) contra tres (0,3,0).
 *
 * La regla suelta de debajo es la de siempre. Se deja porque no estorba y
 * porque cualquier código de fuera que ponga la clase sin `is-listo` sigue
 * teniendo el efecto que espera.
 */
.lt-mapa.is-listo.lt-mapa--sin-mapa .lt-mapa__lienzo { display: none; }
.lt-mapa--sin-mapa .lt-mapa__lienzo { display: none; }

/*
 * La nota del guion: por qué el mapa está apagado, o qué hacer para moverlo.
 * Va antes del aviso permanente y con el mismo tamaño: es información, no una
 * alarma. Sin fondo de color, para no competir con los sellos de la lista.
 */
.lt-mapa__nota {
  margin-top: var(--e-2);
  font-size: var(--fs-chico);
  font-weight: var(--peso-medio);
  color: var(--tinta);
}

.lt-mapa__lienzo {
  height: clamp(340px, 55vh, 560px);
  border-radius: var(--radio-grande);
  overflow: hidden;
  border: 1px solid var(--linea);
  box-shadow: var(--sombra-1);
  background: var(--hueso);
}

.lt-mapa__lienzo .leaflet-container {
  height: 100%;
  width: 100%;
  font-family: var(--fuente-texto);
}

.lt-mapa__lienzo .leaflet-popup-content {
  margin: var(--e-2);
  font-family: var(--fuente-texto);
  font-size: var(--fs-chico);
}

.lt-mapa__lienzo .leaflet-popup-content a {
  color: var(--marca);
  font-weight: var(--peso-fuerte);
}

.lt-mapa__lienzo .leaflet-popup-tip { background: var(--blanco); }

.lt-mapa__aviso {
  margin-top: var(--e-2);
  font-size: var(--fs-chico);
  color: var(--apagado);
}

/*
 * El botón «Ver en el mapa» nace OCULTO y solo aparece cuando el guion del
 * mapa ha terminado y ha puesto `lt-mapa-listo` en el <body>. Así nunca hay en
 * pantalla un botón que no lleva a ninguna parte —que es lo que pasaría si
 * Leaflet no carga por falta de cobertura.
 */
.lt-mapa-ir { display: none; }
body.lt-mapa-listo .lt-mapa-ir { display: inline-flex; }

/* ------------------------------------------------------------------ */
/* El punto del mapa                                                   */
/* ------------------------------------------------------------------ */

/*
 * SE DIBUJA CON CSS, NO SE DESCARGA.
 *
 * El marcador de fábrica de Leaflet son tres imágenes PNG servidas desde el
 * mismo CDN que la librería: tres peticiones más que pueden fallar por separado
 * y dejar el mapa lleno de marcadores invisibles. Y vienen en azul-morado, que
 * no es ninguno de los tres colores del sitio.
 *
 * La caja mide 44x44 —el mínimo que un pulgar acierta a la primera— y está
 * vacía por fuera: lo que se ve es el punto de 20px del centro. Así la zona
 * pulsable es grande sin que el dibujo tape media manzana.
 *
 * CUIDADO CON EL PREFIJO `.lt-mapa__lienzo`: NO SOBRA.
 * Leaflet le pone a cada marcador la clase `leaflet-marker-icon`, y su hoja
 * —que se encola DESPUÉS que esta— la declara `display: block`. Con
 * `.lt-mapa-punto` a secas hay empate de especificidad y gana Leaflet por orden
 * de aparición: el `display: flex` no llegaba a aplicarse, el punto de dentro se
 * quedaba en `inline` con caja de 0x0 y el mapa salía CON los tres marcadores
 * puestos y NINGUNO visible. En pantalla parecía un mapa de Austin sin ayudas.
 */
.lt-mapa__lienzo .lt-mapa-punto {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Leaflet mide el icono por su iconSize (44x44) y lo coloca con estilos en
     línea; aquí solo se manda sobre el contenido. */
  background: none;
  border: 0;
}

/*
 * `display: block` explícito: un <span> es de línea, y en un elemento de línea
 * el ancho y el alto no pintan nada. Sin esta declaración el punto medía 0x0 y
 * el color azul no tenía dónde dibujarse.
 */
.lt-mapa__lienzo .lt-mapa-punto__pin {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--marca);
  /* El aro blanco es lo que separa el punto de una calle oscura o de un parque:
     sin él, sobre según qué tesela, el azul desaparece. */
  box-shadow: 0 0 0 3px var(--blanco), var(--sombra-1);
  transition: transform var(--transicion), background-color var(--transicion);
}

.lt-mapa__lienzo .lt-mapa-punto:hover .lt-mapa-punto__pin { background: var(--marca-oscuro); }

/*
 * El anillo de foco va sobre el punto y no sobre la caja de 44px: sobre la caja
 * quedaría un cuadrado enorme y descentrado respecto de lo que se ve. Doble
 * anillo —blanco y tinta— para que se lea igual sobre un mapa claro que sobre
 * una mancha de bosque.
 */
.lt-mapa__lienzo .lt-mapa-punto:focus { outline: none; }

.lt-mapa__lienzo .lt-mapa-punto:focus-visible .lt-mapa-punto__pin {
  box-shadow: 0 0 0 3px var(--blanco), 0 0 0 6px var(--tinta);
}

/*
 * El punto que el visitante acaba de pedir con «Ver en el mapa». Crece y se
 * oscurece: hay que poder encontrarlo de un vistazo entre otros treinta, y la
 * lista de abajo tiene esa misma ayuda a la vista.
 */
.lt-mapa__lienzo .lt-mapa-punto.is-activo .lt-mapa-punto__pin {
  background: var(--tinta);
  transform: scale(1.35);
}

/* ------------------------------------------------------------------ */
/* El globo del punto                                                  */
/* ------------------------------------------------------------------ */

.lt-mapa-globo { max-width: 240px; }

.lt-mapa-globo__titulo {
  margin: 0 0 4px;
  font-weight: var(--peso-fuerte);
  line-height: 1.3;
}

.lt-mapa-globo__detalle {
  margin: 0 0 var(--e-1);
  color: var(--apagado);
  /* Una dirección larga sin espacios (un enlace pegado por error) reventaría el
     ancho del globo y con él el del mapa en un teléfono. */
  overflow-wrap: anywhere;
}

/* «Cómo llegar» dentro del globo: 44px de alto, igual que en la tarjeta. El
   dedo que lo pulsa está en la calle, no sentado delante de un ratón. */
.lt-mapa-globo__ruta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: var(--peso-fuerte);
}

/* ------------------------------------------------------------------ */
/* Controles de Leaflet: tamaño y foco de la casa                      */
/* ------------------------------------------------------------------ */

/*
 * TRES SELECTORES DE CLASE Y NO DOS, A PROPÓSITO.
 *
 * La hoja de Leaflet se encola DESPUÉS que esta (inc/encolar-modulos.php la
 * añade al final de la misma función), así que en un empate de especificidad
 * gana ella por orden de aparición. Con `.lt-mapa__lienzo .leaflet-bar a` —dos
 * clases y un elemento, exactamente lo mismo que su `.leaflet-touch .leaflet-bar
 * a`— los botones de zoom se quedaban en los 30x30 de fábrica. Anteponer
 * `.lt-mapa` desempata sin recurrir a un solo `!important`.
 *
 * Y hay que desempatar: 30x30 es la mitad del área que necesita un pulgar y
 * está por debajo del mínimo de 44 que el proyecto se ha fijado.
 */
.lt-mapa .lt-mapa__lienzo .leaflet-bar a {
  width: 44px;
  height: 44px;
  line-height: 44px;
  color: var(--tinta);
}

.lt-mapa .lt-mapa__lienzo .leaflet-bar a:hover { color: var(--marca); }

/* Leaflet no pinta anillo de foco propio: sin esto, quien navega con teclado
   pasa por los botones de zoom sin ver dónde está. */
.lt-mapa .lt-mapa__lienzo .leaflet-control a:focus-visible,
.lt-mapa .lt-mapa__lienzo.leaflet-container:focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: -3px;
}

.lt-mapa .lt-mapa__lienzo .leaflet-control-attribution {
  font-family: var(--fuente-texto);
  font-size: 11px;
  /* La atribución de OpenStreetMap no es decorativa: es la condición de la
     licencia con la que se usan estas teselas. Se deja legible, no al 40%. */
  color: var(--tinta);
  background: rgba(255, 255, 255, .9);
}

.lt-mapa .lt-mapa__lienzo .leaflet-control-attribution a { color: var(--marca); }

/*
 * MOVIMIENTO REDUCIDO.
 *
 * tokens.css ya deja las transiciones del sitio en 1ms, pero Leaflet trae las
 * suyas propias en su hoja del CDN y no pasa por nuestros tokens: el desvanecido
 * de cada tesela y el zoom animado seguirían moviéndose. El guion apaga las
 * animaciones de zoom desde JavaScript; esto apaga las que son puro CSS.
 */
@media (prefers-reduced-motion: reduce) {
  .lt-mapa__lienzo .leaflet-fade-anim .leaflet-tile,
  .lt-mapa__lienzo .leaflet-fade-anim .leaflet-popup,
  .lt-mapa__lienzo .leaflet-zoom-anim .leaflet-zoom-animated {
    transition: none;
  }

  .lt-mapa__lienzo .lt-mapa-punto__pin { transition: none; }
}

/* ================================================================== */
/* FICHA — cabeza                                                      */
/* ================================================================== */

.lt-detalle__cabeza {
  position: relative;
  overflow: hidden;
}

.lt-detalle__cabeza h1 {
  margin-bottom: var(--e-3);
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  letter-spacing: var(--tracking-display);
  overflow-wrap: anywhere;
}

.lt-detalle__sellos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1);
  margin-bottom: var(--e-3);
}

.lt-detalle__organizacion {
  font-size: 1.1rem;
  font-weight: var(--peso-fuerte);
  /* Azul de MARCA, no el de acento: esta línea va sobre el papel claro de la
     ficha (7,2:1). El acento sobre claro son 2,4:1 y no se lee. */
  color: var(--marca);
  margin-bottom: var(--e-2);
}

.lt-detalle__ciudades {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1);
  margin: var(--e-2) 0 0;
  list-style: none;
  padding: 0;
}

/* La imagen de la ficha: grande, a todo el ancho de su columna y con la
   esquina generosa de las piezas mayores. */
.lt-detalle__imagen {
  margin: 0 0 var(--e-4);
  border-radius: var(--radio-grande);
  overflow: hidden;
  box-shadow: var(--sombra-2);
  background: var(--degradado-marca);
}

.lt-detalle__imagen img {
  width: 100%;
  height: auto;
  /* 16/9 para que dos fichas seguidas no salten de altura según la foto que
     subió cada organización. */
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* La primera sección tras la cabeza no repite el padding superior completo:
   la cabeza ya deja aire y, si no, quedaba un hueco de 250px. */
.lt-detalle__articulo > .lt-seccion:not(.lt-detalle__cabeza):not(.lt-volver) {
  padding-top: var(--seccion-y);
  padding-bottom: 0;
}

.lt-listado-eventos > .lt-seccion:not(.lt-cabecera-listado) { padding-top: var(--seccion-y); }

/* ================================================================== */
/* FICHA — dos columnas                                                */
/* ================================================================== */

.lt-detalle__columnas {
  display: grid;
  gap: var(--e-5);
}

@media (min-width: 900px) {
  .lt-detalle__columnas {
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: var(--e-6);
  }

  /* El lateral acompaña al texto: en una ficha larga, los datos de contacto
     tienen que seguir a la vista mientras se lee. */
  .lt-detalle__lateral {
    position: sticky;
    top: calc(var(--alto-cabecera) + var(--desplazamiento-barra, 0px) + var(--e-3));
  }
}

.lt-detalle__principal { min-width: 0; }

.lt-detalle__lateral {
  padding: var(--e-4);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-2);
}

.lt-detalle__lateral-titulo {
  font-size: var(--fs-h4);
  margin-bottom: var(--e-3);
}

/* Texto de la ficha ------------------------------------------------- */

.lt-detalle__texto {
  max-width: var(--contenedor-texto);
  font-size: 1.05rem;
}

.lt-detalle__texto > :last-child { margin-bottom: 0; }
.lt-detalle__texto a { color: var(--marca); }

.lt-detalle__texto h2 {
  font-size: var(--fs-h3);
  margin-top: var(--e-5);
  margin-bottom: var(--e-2);
}

.lt-detalle__texto h3 {
  font-size: var(--fs-h4);
  margin-top: var(--e-4);
  margin-bottom: var(--e-1);
}

.lt-detalle__texto ol,
.lt-detalle__texto li { margin-bottom: var(--e-1); }

.lt-detalle__descargo {
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px solid var(--linea);
  font-size: var(--fs-chico);
  color: var(--apagado);
}

/* ================================================================== */
/* FECHA GRANDE DE LA FICHA DE EVENTO                                  */
/* ================================================================== */

/*
 * Un evento mal leído no es un fallo de maquetación: es gente conduciendo una
 * hora para llegar cuando ya terminó. La fecha se pinta al tamaño de un
 * titular y la zona horaria se dice con letras, porque hay familia leyendo
 * esto desde México y desde Florida.
 */
.lt-detalle__fecha {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: var(--e-3) 0 0;
}

.lt-detalle__fecha time {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lt-detalle__fecha-dia {
  font-family: var(--fuente-titulo);
  font-optical-sizing: auto;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: var(--peso-titulo);
  letter-spacing: var(--tracking-titulo);
  line-height: 1.1;
}

.lt-detalle__fecha-hora {
  font-size: 1.1rem;
  font-weight: var(--peso-medio);
}

.lt-detalle__fecha-fin { color: var(--apagado); font-size: var(--fs-chico); }

.lt-detalle__zona {
  font-size: var(--fs-chico);
  color: var(--apagado);
}

/* ================================================================== */
/* LISTAS DE DATOS                                                     */
/* ================================================================== */

.lt-datos { margin: 0; }

.lt-datos__fila {
  padding-bottom: var(--e-2);
  margin-bottom: var(--e-2);
  border-bottom: 1px solid var(--linea);
}

.lt-datos__fila:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

.lt-datos dt {
  font-size: var(--fs-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--apagado);
}

.lt-datos dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;   /* direcciones y correos largos parten, no desbordan */
}

/* Listas marcadas --------------------------------------------------- */

.lt-lista-marcada {
  list-style: none;
  margin: 0 0 var(--e-2);
  padding: 0;
  display: grid;
  gap: var(--e-1);
}

.lt-lista-marcada li {
  position: relative;
  padding-left: var(--e-3);
}

/* La marca es un ::before y no un carácter en el HTML: el contenido es el
   dato, no la viñeta —y un lector de pantalla no tiene por qué leer «guion». */
.lt-lista-marcada li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brasa);
}

/* Los documentos que hay que llevar se marcan distinto: son requisitos, no
   una lista cualquiera, y presentarse sin ellos es volverse a casa. */
.lt-lista-marcada--documentos li::before {
  border-radius: 2px;
  background: var(--marca);
}

/* ================================================================== */
/* VERIFICACIÓN                                                        */
/* ================================================================== */

/*
 * El bloque que dice cuándo se comprobó por última vez que esta ayuda existe.
 * Es la pieza más importante de la ficha después del teléfono: una despensa
 * que cerró hace ocho meses y sigue publicada hace más daño que no publicarla.
 *
 * Tres estados, cada uno con su color de rol, y NUNCA sobre fotografía.
 */
.lt-verificacion {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--e-3);
  margin-bottom: var(--e-3);
  border-radius: var(--radio-chico);
  border-left: 4px solid var(--linea);
  background: var(--hueso);
}

.lt-verificacion__titulo {
  font-size: var(--fs-chico);
  font-weight: var(--peso-fuerte);
  margin: 0;
}

.lt-verificacion__nota {
  font-size: var(--fs-chico);
  color: var(--apagado);
  margin: 0;
}

/* El aviso «verificado» era verde; ahora es azul de marca sobre un tinte del
   mismo azul. La franja de la izquierda es la que da el estado. */
.lt-verificacion--verificado {
  border-left-color: var(--verificado);
  background: rgba(41, 80, 145, .08);
}

.lt-verificacion--revisar {
  border-left-color: var(--brasa);
  background: color-mix(in srgb, var(--brasa) 10%, transparent);
}

/* La nota del estado «toca revisar» se dice en terracota oscura, que sí pasa
   AA sobre el relleno claro (4.9:1). */
.lt-verificacion--revisar .lt-verificacion__nota { color: var(--brasa-texto); }

.lt-verificacion--sin {
  border-left-color: var(--apagado);
  background: var(--hueso-honda);
}

/* ================================================================== */
/* AVISOS                                                              */
/* ================================================================== */

.lt-aviso {
  padding: var(--e-3);
  margin-bottom: var(--e-3);
  border-radius: var(--radio-chico);
  border-left: 4px solid var(--marca);
  background: var(--marca-claro);
  font-size: var(--fs-chico);
}

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

.lt-aviso--alerta {
  border-left-color: var(--alerta);
  background: rgba(180, 35, 24, .08);
  color: var(--alerta);
  font-weight: var(--peso-medio);
}

/* ================================================================== */
/* BLOQUES Y CIERRE                                                    */
/* ================================================================== */

.lt-bloque + .lt-bloque { margin-top: var(--e-6); }
.lt-bloque > p:last-child { margin-bottom: 0; }

/* El filete de terracota antes del título: el mismo recurso editorial que las
   etiquetas de sección, para que la ficha se lea como parte de la revista. */
.lt-bloque h2 {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--fs-h3);
  margin-bottom: var(--e-3);
}
.lt-bloque h2::before {
  content: '';
  width: 24px;
  height: 3px;
  flex: none;
  border-radius: 2px;
  background: var(--brasa);
}

.lt-volver { padding-block: var(--e-5); }

.lt-volver .lt-contenedor {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}

/* ================================================================== */
/* ACCIONES                                                            */
/* ================================================================== */

.lt-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}

.lt-acciones--lateral {
  display: grid;
  gap: var(--e-1);
  margin-bottom: var(--e-3);
}

.lt-acciones--lateral .lt-btn { min-height: 52px; }

/*
 * Barra fija SOLO en móvil. Repite las acciones del lateral porque en una
 * pantalla de teléfono ese lateral queda al final de un texto largo, y la
 * persona que consulta esto suele estar de pie y con prisa.
 */
.lt-acciones--fijas {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: flex;
  gap: var(--e-1);
  padding: var(--e-1) var(--canal);
  /* El respaldo sin `env()` es el mismo relleno: en un iPhone con barra de
     gestos, sin esto los botones quedan medio tapados. */
  padding-bottom: var(--e-1);
  padding-bottom: calc(var(--e-1) + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--blanco) 94%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border-top: 1px solid var(--linea);
  box-shadow: 0 -8px 30px rgba(7, 19, 36, .12);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lt-acciones--fijas { background: var(--blanco); }
}

.lt-acciones--fijas .lt-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 48px;
  padding-inline: var(--e-2);
  white-space: nowrap;
  font-size: 12px;
}

/* Hueco al final de la página para que la barra no tape la última línea. */
.lt-detalle--con-barra { padding-bottom: 86px; }

@media (min-width: 900px) {
  /* En escritorio las acciones ya están en el panel lateral fijo: repetirlas
     abajo sería un doble botón compitiendo consigo mismo. */
  .lt-acciones--fijas { display: none; }
  .lt-detalle--con-barra { padding-bottom: 0; }
}

/* ================================================================== */
/* Impresión                                                           */
/* ================================================================== */

@media print {
  /*
   * Una ficha de ayuda impresa la lleva alguien que no tiene datos en el
   * teléfono —que es media razón de ser de esta sección—. En papel sobran los
   * filtros, el mapa interactivo y la barra fija (que se imprimiría encima del
   * texto en TODAS las hojas).
   */
  .lt-filtros,
  .lt-vistas,
  .lt-mapa,
  .lt-acciones--fijas,
  .lt-paginacion,
  .lt-volver { display: none; }

  .lt-detalle--con-barra { padding-bottom: 0; }

  .lt-calendario__cabecera { background: none; color: #000; }
  .lt-calendario__mes { color: #000; }

  .lt-detalle__lateral { box-shadow: none; border: 1px solid #999; }

  /* La verificación SÍ se imprime, y con su borde: es el dato que dice si
     merece la pena desplazarse. */
  .lt-verificacion { border: 1px solid #999; }
}