:root {
  --bg: #0c0f12; --panel: #14181d; --panel-2: #1b2129; --line: #262d36;
  --ink: #e8ecf1; --ink-2: #8b96a3; --ink-3: #56606c;
  --critica: #ff4d4d; --alta: #ff9f43; --media: #ffd166; --baja: #6c8ea4;
  --acento: #35d0a5;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font-family: "Archivo", sans-serif; height: 100vh; overflow: hidden; }
.mono { font-family: "IBM Plex Mono", monospace; }
header {
  height: 54px; display: flex; align-items: center; gap: 16px; padding: 0 20px;
  border-bottom: 1px solid var(--line); background: var(--panel);
}
header h1 { font-size: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  display: flex; align-items: baseline; gap: 11px; }
header h1 .marca span { color: var(--acento); }
header h1 .subtitulo { font-size: 10px; font-weight: 500; letter-spacing: .06em;
  text-transform: none; color: var(--ink-3); }
@media (max-width: 720px) { header h1 .subtitulo { display: none; } }
.estado { font-size: 12px; color: var(--ink-2); margin-left: auto; display: flex; gap: 18px; align-items: center; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--acento); display: inline-block; margin-right: 6px; animation: pulso 2.4s infinite; }
@keyframes pulso { 0%,100% { opacity: 1 } 50% { opacity: 0.35 } }
/* Aviso de lo que acaba de llegar por el stream. Ya no hay botón de actualizar:
   la vista se refresca sola, y sin este cartel el cambio sería invisible. */
.vivo {
  color: var(--acento); border: 1px solid var(--acento); background: rgba(53,208,165,0.12);
  padding: 5px 12px; border-radius: 999px; font: 500 12px "IBM Plex Mono", monospace;
  max-width: 42ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vivo.entra { animation: aparece 0.35s ease-out; }
@keyframes aparece { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* Respeta a quien pidió menos movimiento en el sistema. */
@media (prefers-reduced-motion: reduce) {
  .vivo.entra { animation: none; }
  .dot { animation: none; }
}
main { display: grid; grid-template-columns: 1fr 380px; height: calc(100vh - 54px); }
#mapa { height: 100%; background: var(--bg); }
aside { border-left: 1px solid var(--line); background: var(--panel); overflow-y: auto; }
aside section { padding: 16px 18px; border-bottom: 1px solid var(--line); }
aside h2 { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.alerta {
  display: flex; gap: 10px; padding: 10px 8px 10px 0; border-bottom: 1px dashed var(--line);
  cursor: pointer; border-radius: 5px; transition: background .12s;
}
.alerta:last-child { border-bottom: none; }
.alerta:hover { background: var(--panel-2); }
.alerta.sel { background: rgba(53,208,165,0.10); box-shadow: inset 0 0 0 1px rgba(53,208,165,0.35); }
.sev { width: 4px; border-radius: 2px; flex-shrink: 0; }
.sev.critica { background: var(--critica); } .sev.alta { background: var(--alta); }
.sev.media { background: var(--media); } .sev.baja { background: var(--baja); }
.alerta .msg { font-size: 13px; line-height: 1.45; }
.alerta .meta { font: 400 11px "IBM Plex Mono", monospace; color: var(--ink-3); margin-top: 4px; }

/* Cabecera de la alerta: iconos + magnitud destacada */
.a-top { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; flex-wrap: wrap; }
.iconos { display: flex; gap: 3px; flex-shrink: 0; }
.ico { width: 17px; height: 17px; display: block; }
.ico.sismo { color: var(--alta); } .ico.clima { color: #6fb7ff; }
/* Magnitud: el dato que se busca primero al escanear la lista */
.mag {
  font: 500 12px "IBM Plex Mono", monospace; letter-spacing: .02em;
  background: var(--panel-2); border: 1px solid var(--line);
  padding: 2px 7px; border-radius: 4px; white-space: nowrap;
}
.mag b { font-weight: 700; font-size: 13px; }
.mag.critica { color: var(--critica); border-color: rgba(255,77,77,.45); }
.mag.alta { color: var(--alta); border-color: rgba(255,159,67,.45); }
.mag.media { color: var(--media); border-color: rgba(255,209,102,.45); }
.mag.baja { color: var(--baja); border-color: rgba(108,142,164,.45); }
/* La faena: lo que identifica de quién es el problema */
.faena { color: var(--acento); font-weight: 700; }
.dist { color: var(--ink); font-weight: 500; }
/* Clima adyacente a un sismo */
.ctx-clima {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 5px;
  font-size: 11.5px; color: #9ccbff; background: rgba(111,183,255,.10);
  border-left: 2px solid rgba(111,183,255,.5); padding: 3px 7px; border-radius: 0 4px 4px 0;
}
.nota-escala { font-size: 10.5px; line-height: 1.5; color: var(--ink-3); margin-top: 10px; }
/* Desglose: los activos que caen dentro del radio de un mismo evento */
.desglose { margin-top: 7px; border-left: 2px solid var(--line); padding-left: 9px; }
.fila-activo {
  display: flex; align-items: center; gap: 8px; padding: 3px 4px 3px 0;
  border-radius: 4px; font-size: 12px; color: var(--ink-2);
}
.fila-activo:hover { background: var(--panel-2); color: var(--ink); }
.fila-activo .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-activo .d { font: 400 11px "IBM Plex Mono", monospace; color: var(--ink-3); flex-shrink: 0; }
.sev-punto { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.sev-punto.critica { background: var(--critica); } .sev-punto.alta { background: var(--alta); }
.sev-punto.media { background: var(--media); } .sev-punto.baja { background: var(--baja); }
.activo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 13px; cursor: pointer; }
.activo:last-child { border-bottom: none; }
.activo:hover .nom { color: var(--acento); }
.activo .nom { display: flex; align-items: center; gap: 7px; min-width: 0; }
.activo .clima { font: 400 11px "IBM Plex Mono", monospace; color: var(--ink-2); white-space: nowrap; }
.activo .clima.adverso { color: #9ccbff; }
.punto { width: 9px; height: 9px; border-radius: 2px; transform: rotate(45deg); flex-shrink: 0; }
.grupo { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; }
.grupo:first-child { margin-top: 0; }
.grupo b { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.grupo span { font: 400 11px "IBM Plex Mono", monospace; color: var(--ink-3); }
.grupo hr { flex: 1; border: none; border-top: 1px solid var(--line); }
/* Marcador de activo: el rombo del tipo, y si hay pronóstico adverso un
   distintivo con el glifo del fenómeno. Estático a propósito — un anillo que
   late se lee como "alerta en curso" y sobre 18 faenas permanentes cansa. */
.marca-activo { position: relative; width: 28px; height: 28px; }
.rombo {
  position: absolute; left: 8px; top: 8px; width: 12px; height: 12px;
  border: 2px solid #0c0f12; border-radius: 3px; transform: rotate(45deg);
}
/* Infraestructura vial crítica (puentes/túneles). Barra horizontal —no rombo—
   para separarla de un vistazo del resto de activos; el color va inline. La
   variante hueca (túnel) rellena de oscuro y deja el borde de color: el vano. */
.barra {
  position: absolute; left: 5px; top: 10px; width: 18px; height: 8px;
  border: 2px solid #0c0f12; border-radius: 3px; box-sizing: border-box;
}
.barra.hueca { background: #0c0f12; }
.badge-clima {
  position: absolute; right: -2px; top: -2px; width: 14px; height: 14px;
  display: flex; align-items: center; justify-content: center;
  /* Sin círculo contenedor: el glifo solo. La sombra oscura lo despega del
     mapa, que en algunas zonas tiene relieve claro. */
  filter: drop-shadow(0 0 2px #0c0f12) drop-shadow(0 0 1px #0c0f12);
}
.badge-clima svg { width: 14px; height: 14px; stroke-width: 2.6; }
/* Severidad alta: el glifo crece y toma un halo de su propio color. */
.badge-clima.alta { width: 16px; height: 16px; right: -3px; top: -3px; }
.badge-clima.alta svg { width: 16px; height: 16px; }
.badge-clima.alta { filter: drop-shadow(0 0 2px #0c0f12) drop-shadow(0 0 4px currentColor); }

/* leyenda de tipos sobre el mapa */
.leyenda {
  position: absolute; left: 12px; bottom: 90px; z-index: 500;   /* sobre el control de zoom, ahora abajo-izquierda */
  background: rgba(20,24,29,.92); border: 1px solid var(--line); border-radius: 6px;
  padding: 9px 11px; display: grid; grid-template-columns: repeat(2, auto); gap: 4px 14px;
}
/* Control de zoom: reubicado abajo-izquierda, más compacto y en la paleta del sitio. */
.leaflet-bottom.leaflet-left { left: 12px; bottom: 18px; }
.leaflet-control-zoom.leaflet-bar { border: 1px solid var(--line); box-shadow: 0 3px 14px rgba(0,0,0,.4); overflow: hidden; }
.leaflet-control-zoom a {
  width: 28px; height: 28px; line-height: 28px; font-size: 15px;
  background: rgba(20,24,29,.94); color: var(--ink-2); border: none;
}
.leaflet-control-zoom a:first-child { border-bottom: 1px solid var(--line); }
.leaflet-control-zoom a:hover { background: var(--panel-2); color: var(--acento); }
/* Atribución de Leaflet/CARTO: se retira del mapa (el crédito queda en el footer/README). */
.leaflet-control-attribution { display: none; }
.leaflet-control-zoom a.leaflet-disabled { color: var(--ink-3); background: rgba(20,24,29,.7); }
.leyenda div { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--ink-2); }
/* Filas de tipo: son interruptores. Apagado = atenuado y tachado, para que se
   lea "oculto en el mapa" sin perder qué familia es. */
.ley-tipo { cursor: pointer; border-radius: 4px; padding: 1px 4px; margin: -1px -4px; transition: opacity .12s, background .12s; }
.ley-tipo:hover { background: rgba(255,255,255,.05); }
.ley-tipo:focus-visible { outline: 1px solid var(--acento); outline-offset: 1px; }
.ley-tipo.apagado { opacity: .4; text-decoration: line-through; text-decoration-color: var(--ink-3); }
/* La leyenda se corre para no quedar bajo el panel de noticias abierto. */
#mapa.con-noticias .leyenda { left: 352px; }

/* Controles que solo existen en móvil (ocultos en desktop). */
.leyenda-toggle, .sheet-handle, .ver-noticias-btn, .busc-toggle { display: none; }
/* Botón de cierre de la leyenda, solo visible cuando se abre en móvil. */
.leyenda .leyenda-x { display: none; }

/* Rango de tiempo de los sismos: píldora centrada arriba del mapa. Un único
   lugar y tamaño en desktop y móvil —no compite por espacio con nada más ahí—
   así no hace falta una variante aparte para pantallas chicas. */
.rango-sismos {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 600;
  display: flex; gap: 2px; padding: 3px;
  background: rgba(20,24,29,.94); border: 1px solid var(--line); border-radius: 9px;
}
.rango-op {
  background: transparent; border: none; color: var(--ink-2); cursor: pointer;
  font: 600 11.5px "Archivo", sans-serif; padding: 7px 12px; border-radius: 7px; transition: background .12s, color .12s;
}
.rango-op:hover { color: var(--ink); }
.rango-op.activo-r { background: var(--acento); color: #0c0f12; }
/* Con el panel de noticias abierto (340px en desktop) se recentra en el espacio
   que queda, igual que el buscador y la leyenda se corren para no quedar debajo. */
#mapa.con-noticias .rango-sismos { left: calc(50% + 170px); }
/* En móvil el buscador desplegado ocupa el mismo alto: se opaca para no pisarse. */
#mapa.buscando .rango-sismos { opacity: 0; pointer-events: none; }

/* Pulso de los epicentros M4+: más notorio cuanto más alta la severidad —así el
   ojo va directo a lo importante ahora que el mapa por defecto muestra menos
   sismos (solo 24 h) y los significativos no se pueden perder entre el resto. */
.sismo-pulso { transform-box: fill-box; transform-origin: center; }
.sismo-pulso.critica { animation: sismo-pulso 0.9s ease-in-out infinite; }
.sismo-pulso.alta { animation: sismo-pulso 1.3s ease-in-out infinite; }
.sismo-pulso.media { animation: sismo-pulso 1.8s ease-in-out infinite; }
@keyframes sismo-pulso {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .5; transform: scale(1.4); }
}
@media (prefers-reduced-motion: reduce) { .sismo-pulso { animation: none; } }

/* Buscador de activos: en desktop flota sobre el mapa (arriba-izquierda). */
.buscador {
  position: absolute; top: 12px; left: 62px; z-index: 650; width: 300px;
  display: flex; align-items: center; gap: 8px; padding: 0 10px; height: 40px;
  background: rgba(20,24,29,.95); border: 1px solid var(--line); border-radius: 9px;
}
.buscador:focus-within { border-color: var(--acento); }
/* Cuando el panel de noticias está abierto, el buscador se corre para no quedar debajo. */
#mapa.con-noticias .buscador { left: 352px; }
.busc-lupa { width: 16px; height: 16px; color: var(--ink-3); flex-shrink: 0; }
#busc-input {
  flex: 1; min-width: 0; background: transparent; border: none; outline: none;
  color: var(--ink); font: 400 13px "Archivo", sans-serif;
}
#busc-input::placeholder { color: var(--ink-3); }
.busc-x { display: none; background: transparent; border: none; color: var(--ink-3);
  font-size: 13px; cursor: pointer; padding: 2px 4px; flex-shrink: 0; }
.buscador.con-texto .busc-x { display: block; }
.busc-resultados {
  position: absolute; top: 46px; left: 0; right: 0; max-height: 320px; overflow-y: auto;
  background: rgba(20,24,29,.98); border: 1px solid var(--line); border-radius: 9px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4); display: none;
}
.busc-resultados.abierto { display: block; }
.busc-item { display: flex; align-items: center; gap: 9px; padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--line); }
.busc-item:last-child { border-bottom: none; }
.busc-item:hover, .busc-item.activo { background: var(--panel-2); }
.busc-item .punto { width: 10px; height: 10px; border-radius: 2px; transform: rotate(45deg); flex-shrink: 0; }
.busc-item .bi-nom { flex: 1; min-width: 0; font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.busc-item .bi-tipo { font: 400 11px "IBM Plex Mono", monospace; color: var(--ink-3); flex-shrink: 0; }
.busc-vacio { padding: 12px; font-size: 12px; color: var(--ink-3); }

/* Panel de noticias: superpuesto al borde izquierdo del mapa, entra deslizando.
   No empuja el mapa, así que Leaflet no necesita reencuadrar. */
.noticias {
  position: absolute; left: 0; top: 0; bottom: 0; width: 340px; z-index: 1200;
  background: rgba(20,24,29,.97); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; transform: translateX(-100%);
  transition: transform .22s cubic-bezier(.2,.6,.3,1); box-shadow: 4px 0 24px rgba(0,0,0,.35);
}
/* Con el panel abierto, los controles de zoom (top-left) se corren a su derecha. */
#mapa.con-noticias .leaflet-bottom.leaflet-left { left: 340px; transition: left .22s; }
.noticias.abierto { transform: translateX(0); }
.not-head { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px;
  border-bottom: 1px solid var(--line); }
.not-titulo { flex: 1; font: 700 13px "Archivo", sans-serif; line-height: 1.35; color: var(--ink); }
.not-titulo span { display: block; font: 500 11px "IBM Plex Mono", monospace;
  color: var(--acento); margin-top: 3px; }
.not-cerrar { background: transparent; border: none; color: var(--ink-3); font-size: 15px;
  cursor: pointer; padding: 2px 4px; line-height: 1; }
.not-cerrar:hover { color: var(--ink); }
.not-cuerpo { flex: 1; overflow-y: auto; padding: 6px 16px 18px; }
.not-grupo { margin-top: 16px; }
.not-grupo:first-child { margin-top: 8px; }
.not-grupo h3 { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 9px; }
.not-grupo h3 b { color: var(--acento); font-weight: 500; }
.not-item { display: block; padding: 9px 0; border-bottom: 1px dashed var(--line); text-decoration: none; }
.not-item:last-child { border-bottom: none; }
.not-item .t { font-size: 13px; line-height: 1.4; color: var(--ink); }
.not-item:hover .t { color: var(--acento); }
.not-item .m { font: 400 11px "IBM Plex Mono", monospace; color: var(--ink-3); margin-top: 4px; }
.not-vacio { font-size: 12px; line-height: 1.55; color: var(--ink-3); padding: 6px 0; }
.not-obsoleta { font-size: 10.5px; color: var(--media); margin-bottom: 8px; }
/* Esqueleto de carga */
.sk { height: 12px; border-radius: 3px; margin: 10px 0;
  background: linear-gradient(90deg, var(--panel-2) 25%, var(--line) 50%, var(--panel-2) 75%);
  background-size: 200% 100%; animation: sk 1.3s ease-in-out infinite; }
.sk.corto { width: 55%; }
@keyframes sk { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }

/* Botón flotante del autor: avatar circular en la esquina inferior derecha del
   mapa, sobre la atribución de Leaflet. */
.autor-btn {
  position: absolute; right: 16px; bottom: 30px; z-index: 700;
  width: 46px; height: 46px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 2px solid var(--acento); background: var(--bg);
  box-shadow: 0 3px 14px rgba(0,0,0,.4); transition: transform .15s;
}
.autor-btn:hover { transform: scale(1.08); }
.autor-btn img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }

/* Botón "centrar en Chile": abajo-derecha, sobre el avatar del autor. Aparece
   solo cuando la vista se alejó del encuadre país —como el "volver arriba" de
   una web— deslizando/desvaneciéndose. Estilo de los toggles + ícono de acento. */
.centrar-btn {
  display: flex; align-items: center; justify-content: center;
  position: absolute; right: 16px; bottom: 86px; z-index: 700;
  width: 42px; height: 42px; border-radius: 9px; cursor: pointer;
  background: rgba(20,24,29,.94); border: 1px solid var(--line); color: var(--acento);
  box-shadow: 0 3px 14px rgba(0,0,0,.4);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .2s, transform .2s, background .12s;
}
.centrar-btn.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.centrar-btn:hover { background: var(--panel-2); }
.centrar-btn svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .centrar-btn { transition: opacity .2s; transform: none; } }

.autor-card {
  position: absolute; right: 16px; bottom: 86px; z-index: 701; width: 250px;
  background: rgba(20,24,29,.98); border: 1px solid var(--line); border-radius: 12px;
  padding: 22px 20px 20px; text-align: center; box-shadow: 0 8px 30px rgba(0,0,0,.5);
  transform-origin: bottom right; transform: scale(.85); opacity: 0; pointer-events: none;
  transition: transform .18s cubic-bezier(.2,.7,.3,1), opacity .18s;
}
.autor-card.abierto { transform: scale(1); opacity: 1; pointer-events: auto; }
.autor-cerrar { position: absolute; right: 10px; top: 8px; background: transparent; border: none;
  color: var(--ink-3); font-size: 14px; cursor: pointer; line-height: 1; padding: 2px 4px; }
.autor-cerrar:hover { color: var(--ink); }
.autor-foto { width: 76px; height: 76px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--acento); margin-bottom: 12px; }
.autor-nombre { font: 700 16px "Archivo", sans-serif; color: var(--ink); }
.autor-lema { font-size: 12px; color: var(--acento); margin-top: 3px; }
.autor-desc { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); margin: 12px 0 16px; }
.autor-link { display: inline-block; background: var(--acento); color: var(--bg);
  font: 600 13px "Archivo", sans-serif; text-decoration: none; padding: 9px 18px; border-radius: 999px; }
.autor-link:hover { filter: brightness(1.08); }
.ley-sep { grid-column: 1 / -1; height: 1px; background: var(--line); margin: 3px 0; }
/* Encabezados de sección dentro de la leyenda: agrupan "Activos críticos" y
   "Clima". Ocupan el ancho completo de la grilla de dos columnas. */
.ley-titulo { grid-column: 1 / -1; font: 700 9.5px "Archivo", sans-serif; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 1px; }
.ley-sub { font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--ink-3); opacity: .75; }
/* Barra vial en la leyenda: misma gramática que el marcador (sólida/hueca). */
.ley-barra { width: 15px; height: 8px; flex-shrink: 0; border: 2px solid var(--line); border-radius: 2px; box-sizing: border-box; }
.ley-barra.hueca { background: var(--panel-2); }
.ley-onda { width: 14px; height: 14px; flex-shrink: 0; display: flex;
  align-items: center; justify-content: center; }
.ley-onda svg { width: 14px; height: 14px; stroke-width: 2.6; }
/* Píldoras de magnitud (sección Sismos): ocupan el ancho completo de la grilla
   de dos columnas y envuelven en fila, como los filtros del panel de alertas. */
.ley-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.chip-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 5px; }
.vacio { color: var(--ink-3); font-size: 13px; padding: 6px 0; }
/* Pestañas: separan alertas de activos para que el clima no quede sepultado
   bajo veinte tarjetas. Quedan pegadas arriba al hacer scroll. */
.tabs { display: flex; gap: 0; position: sticky; top: 0; z-index: 10;
  background: var(--panel); border-bottom: 1px solid var(--line); }
.tab {
  flex: 1; background: transparent; border: none; border-bottom: 2px solid transparent;
  color: var(--ink-3); font: 700 11px "Archivo", sans-serif; letter-spacing: .13em;
  text-transform: uppercase; padding: 13px 8px; cursor: pointer; transition: color .12s;
}
.tab:hover { color: var(--ink-2); }
.tab.activa { color: var(--acento); border-bottom-color: var(--acento); }
.tab span { font-family: "IBM Plex Mono", monospace; font-weight: 500; letter-spacing: 0;
  color: var(--ink-3); margin-left: 5px; }
.tab.activa span { color: var(--acento); }
/* Filtros por tipo de alerta. Las categorías son excluyentes y sus conteos
   suman el total, para que el filtro sea predecible: "Sismo" no incluye las
   combinadas, y por eso la etiqueta de esas dice "Sismo + clima". */
.filtros { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink-2);
  font: 500 11.5px "Archivo", sans-serif; padding: 5px 10px; border-radius: 999px;
  cursor: pointer; transition: color .12s, border-color .12s;
}
.chip:hover { color: var(--ink); }
.chip.activo-f { color: var(--acento); border-color: var(--acento); background: rgba(53,208,165,.10); }
.chip b { font-family: "IBM Plex Mono", monospace; font-weight: 500; margin-left: 5px; color: var(--ink-3); }
.chip.activo-f b { color: var(--acento); }
.chip[disabled] { opacity: .4; cursor: default; }
.filtro-aviso { font-size: 11px; color: var(--ink-3); margin-bottom: 10px; }

/* Discrepancia entre fuentes sobre un mismo sismo */
.fuentes { display: inline-block; margin-top: 5px; font: 400 10.5px "IBM Plex Mono", monospace;
  color: var(--ink-3); border: 1px solid var(--line); border-radius: 3px; padding: 2px 6px; }
.leaflet-container { font-family: "Archivo", sans-serif; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--panel-2); color: var(--ink); }
/* ============================ MÓVIL ============================ */
@keyframes pulso-btn {
  0%,100% { box-shadow: 0 4px 16px rgba(0,0,0,.45), 0 0 0 0 rgba(53,208,165,.55); }
  50%     { box-shadow: 0 4px 16px rgba(0,0,0,.45), 0 0 0 12px rgba(53,208,165,0); }
}
@media (max-width: 860px) {
  /* --- Header compacto: sin log de actualización ni texto de fuentes --- */
  header { gap: 10px; padding: 0 14px; }
  .estado { gap: 10px; }
  #ultima, .estado .fuentes-txt { display: none; }
  .estado .dot { margin-right: 0; }
  /* En teléfono el aviso es lo único que queda en el header: se lleva el ancho
     disponible y recorta con elipsis en vez de empujar el título. */
  .vivo { max-width: 58vw; padding: 5px 10px; }

  /* --- Mapa a pantalla completa; alertas en un bottom-sheet superpuesto --- */
  /* dvh evita el salto de layout cuando la barra de URL del navegador entra/sale */
  main { display: block; position: relative; height: calc(100vh - 54px); height: calc(100dvh - 54px); }
  #mapa { height: 100%; }

  #lateral {
    position: fixed; left: 0; right: 0; bottom: 0; height: 66vh; height: 66dvh; z-index: 900;
    border-top: none; border-left: none; border-radius: 16px 16px 0 0;
    box-shadow: 0 -6px 26px rgba(0,0,0,.45); overscroll-behavior: contain;
    transform: translateY(0); transition: transform .28s cubic-bezier(.2,.7,.3,1);
  }
  #lateral.colapsado { transform: translateY(calc(66vh - 54px)); transform: translateY(calc(66dvh - 54px)); }
  #lateral.dragging { transition: none; }

  .sheet-handle {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    position: sticky; top: 0; z-index: 6; height: 54px; flex-shrink: 0;
    background: var(--panel); border-radius: 16px 16px 0 0; cursor: grab;
    user-select: none; touch-action: none;
  }
  /* Botón sólido con chevron: afordancia nativa de "esto se colapsa". La flecha
     apunta hacia donde irá el panel al presionar —abajo si está abierto, arriba
     si está colapsado— y late suave en esa dirección para invitar al gesto. */
  .sheet-btn {
    display: flex; align-items: center; justify-content: center;
    width: 46px; height: 22px; border-radius: 999px; margin-bottom: 5px;
    background: var(--acento); color: #0c0f12; box-shadow: 0 2px 8px rgba(0,0,0,.4);
  }
  .sheet-chevron { width: 20px; height: 20px; animation: sheet-bob-abajo 1.6s ease-in-out infinite; }
  aside.colapsado .sheet-chevron { animation: sheet-bob-arriba 1.6s ease-in-out infinite; }
  @keyframes sheet-bob-abajo { 0%,100% { transform: translateY(-1px); } 50% { transform: translateY(2px); } }
  @keyframes sheet-bob-arriba { 0%,100% { transform: rotate(180deg) translateY(-1px); } 50% { transform: rotate(180deg) translateY(2px); } }
  @media (prefers-reduced-motion: reduce) {
    .sheet-chevron { animation: none; }
    aside.colapsado .sheet-chevron { animation: none; transform: rotate(180deg); }
  }
  .sheet-hint { font: 700 11px "Archivo", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
  aside.colapsado .sheet-hint::after { content: " · toca para ver"; color: var(--ink-3); font-weight: 500; }

  /* --- Leyenda colapsable (arriba-derecha, fuera del alcance del sheet) --- */
  .leyenda-toggle {
    display: flex; align-items: center; justify-content: center; position: absolute;
    top: 12px; right: 12px; left: auto; bottom: auto; z-index: 600; width: 42px; height: 42px; border-radius: 9px;
    background: rgba(20,24,29,.94); border: 1px solid var(--line); color: var(--ink-2); cursor: pointer;
  }
  .leyenda-toggle svg { width: 19px; height: 19px; }
  .leyenda { display: none; top: 62px; right: 12px; left: auto; bottom: auto; padding: 30px 13px 11px; z-index: 620; }
  .leyenda.abierta { display: grid; }
  #mapa.con-noticias .leyenda { left: auto; right: 12px; }
  .leyenda .leyenda-x {
    display: flex; align-items: center; justify-content: center; position: absolute; top: 5px; right: 6px;
    width: 24px; height: 24px; background: transparent; border: none; color: var(--ink-3); font-size: 16px; cursor: pointer;
  }

  /* --- Botón "Ver noticias" con pulso (aparece al elegir una alerta) --- */
  /* Zoom en móvil: sobre el handle colapsado (54px) y por debajo del sheet
     (z 900) para que este lo cubra al expandirse, en vez de flotar encima. */
  .leaflet-bottom.leaflet-left { bottom: 66px; z-index: 750; }

  .ver-noticias-btn {
    align-items: center; gap: 8px; position: absolute; left: 12px; bottom: 130px; z-index: 850;
    padding: 12px 17px; border-radius: 999px; border: none; cursor: pointer;
    background: var(--acento); color: #0c0f12; font: 700 13px "Archivo", sans-serif;
    box-shadow: 0 4px 16px rgba(0,0,0,.45);
  }
  .ver-noticias-btn.visible { display: inline-flex; animation: pulso-btn 1.8s ease-in-out infinite; }
  .ver-noticias-btn svg { width: 16px; height: 16px; }

  /* Botón de centrar: sobre el handle colapsado del sheet (54px), abajo-derecha. */
  .centrar-btn { right: 12px; bottom: 66px; }

  /* --- Panel de noticias a pantalla completa --- */
  .noticias { width: 100%; z-index: 1300; }

  /* --- El botón del autor: arriba-derecha, bajo el de la leyenda --- */
  .autor-btn { top: 64px; right: 12px; bottom: auto; z-index: 600; width: 40px; height: 40px; }
  .autor-card { top: 114px; right: 12px; bottom: auto; }

  /* --- Buscador: botón de lupa que despliega una barra full-width --- */
  .busc-toggle {
    display: flex; align-items: center; justify-content: center; position: absolute;
    top: 12px; right: 64px; z-index: 600; width: 42px; height: 42px; border-radius: 9px;
    background: rgba(20,24,29,.94); border: 1px solid var(--line); color: var(--ink-2); cursor: pointer;
  }
  .busc-toggle svg { width: 19px; height: 19px; }
  .buscador { display: none; top: 10px; left: 12px; right: 12px; width: auto; z-index: 660; }
  .buscador.abierto { display: flex; }
  .busc-resultados { max-height: 60vh; }
  /* iOS Safari hace auto-zoom al enfocar un input con fuente <16px y no lo revierte
     solo: la página queda "colapsada" y cuesta volver a la escala normal. 16px lo evita. */
  #busc-input { font-size: 16px; }

  /* --- Popup del mapa más grande y legible --- */
  .leaflet-popup-content-wrapper { min-width: 210px; }
  .leaflet-popup-content { font-size: 14px; line-height: 1.5; margin: 12px 14px; }
}

/* --- Landscape móvil: el sheet ocupa menos alto --- */
@media (max-width: 860px) and (orientation: landscape) {
  #lateral { height: 52vh; height: 52dvh; }
  #lateral.colapsado { transform: translateY(calc(52vh - 54px)); transform: translateY(calc(52dvh - 54px)); }
}