/* ═══════════════════════════════════════════════════════════
   SISMO·EC — styles.css · Fase 1
   Sistema: Mobile-First · HUD oscuro · Semáforo sísmico
   Paleta: Abismo #080C14 + Teal #2EC4B6 (firma cromática)
═══════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────
   1. TOKENS DE DISEÑO (Custom Properties)
───────────────────────────────────────────────────────── */

:root {
  /* Paleta — 6 tokens nombrados */
  --c-abyss:       #080C14;   /* Fondo principal */
  --c-surface:     #0F1829;   /* Surface de cards y modales */
  --c-raised:      #1C2D4A;   /* Borde y superficie elevada */
  --c-destructivo: #E63946;   /* Rojo  — M ≥ 5.5 */
  --c-moderado:    #F4A261;   /* Ámbar — M ≥ 4.5 */
  --c-teal:        #2EC4B6;   /* Teal  — M < 4.5 y UI */

  /* Derivados semánticos */
  --c-text:        #D9E4F0;
  --c-text-dim:    #5A7A9A;
  --c-border:      #1C2D4A;

  /* Glows para los marcadores del mapa */
  --glow-destructivo: rgba(230, 57, 70, 0.35);
  --glow-moderado:    rgba(244, 162, 97, 0.35);
  --glow-teal:        rgba(46, 196, 182, 0.25);

  /* Tipografía — system-ui stack, cero descarga */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI',
          system-ui, Roboto, 'Helvetica Neue', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', monospace;

  /* Escala tipográfica */
  --t-xs:   0.6875rem;  /* 11px */
  --t-sm:   0.75rem;    /* 12px */
  --t-base: 0.875rem;   /* 14px */
  --t-md:   1rem;       /* 16px */
  --t-lg:   1.125rem;   /* 18px */
  --t-xl:   1.375rem;   /* 22px */
  --t-2xl:  1.75rem;    /* 28px */
  --t-huge: 3.5rem;     /* 56px — número de intensidad */

  /* Espaciado */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;

  /* Radios */
  --r-sm:   5px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   22px;
  --r-full: 9999px;

  /* Sombras */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.45);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.6);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.75);

  /* Alturas fijas de elementos HUD */
  --hud-header-h: 54px;
  --drawer-peek:  52px;   /* Cuánto asoma el drawer cuando está cerrado */

  /* Velocidades de transición */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ─────────────────────────────────────────────────────────
   2. RESET Y BASE
───────────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-size: var(--t-base);
  color: var(--c-text);
  background: var(--c-abyss);
  line-height: 1.5;
  /* Bloquear scroll: el mapa es el documento completo */
  overflow: hidden;
  position: fixed;
  inset: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}


/* ─────────────────────────────────────────────────────────
   3. MAPA — Ocupa el 100% como capa base
───────────────────────────────────────────────────────── */

#map {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--c-abyss);
}

/* Override del tema de Leaflet al modo oscuro */
.leaflet-control-zoom {
  border: 1px solid var(--c-raised) !important;
  border-radius: var(--r-md) !important;
  overflow: hidden;
  box-shadow: var(--shadow-sm) !important;
}

.leaflet-control-zoom a {
  background: var(--c-surface) !important;
  color: var(--c-text) !important;
  border-bottom-color: var(--c-raised) !important;
  width: 32px !important;
  height: 32px !important;
  line-height: 32px !important;
  font-size: var(--t-lg) !important;
}

.leaflet-control-zoom a:hover {
  background: var(--c-raised) !important;
  color: var(--c-teal) !important;
}

.leaflet-control-attribution {
  background: rgba(8, 12, 20, 0.7) !important;
  color: var(--c-text-dim) !important;
  font-size: 9px !important;
}

/* Popups de Leaflet — tema oscuro */
.leaflet-popup-content-wrapper {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-raised) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 0 !important;
  overflow: hidden;
  min-width: 230px;
}

.leaflet-popup-tip {
  background: var(--c-raised) !important;
}

.leaflet-popup-close-button {
  color: var(--c-text-dim) !important;
  font-size: var(--t-lg) !important;
  top: var(--sp-3) !important;
  right: var(--sp-3) !important;
  width: 24px !important;
  height: 24px !important;
  line-height: 24px !important;
  text-align: center;
}

.leaflet-popup-close-button:hover { color: var(--c-text) !important; }
.leaflet-popup-content { margin: 0 !important; }

/* Tooltip de distancia Haversine */
.leaflet-tooltip {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-raised) !important;
  color: var(--c-teal) !important;
  font-size: var(--t-xs) !important;
  font-weight: 600 !important;
  border-radius: var(--r-full) !important;
  padding: 3px var(--sp-3) !important;
  box-shadow: var(--shadow-sm) !important;
  white-space: nowrap;
}

.leaflet-tooltip::before { border-right-color: var(--c-raised) !important; }


/* ─────────────────────────────────────────────────────────
   4. POPUP INTERNO DEL SISMO — Contenido estructurado
───────────────────────────────────────────────────────── */

.popup {
  padding: var(--sp-4);
}

/* Banda de magnitud — número grande + línea sismógrafo */
.popup-mag {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
}

.popup-mag-value {
  font-size: var(--t-2xl);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.popup-mag-label {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}

/* Colores por nivel en el popup */
.popup--destructivo .popup-mag-value { color: var(--c-destructivo); }
.popup--moderado    .popup-mag-value { color: var(--c-moderado); }
.popup--leve        .popup-mag-value { color: var(--c-teal); }

/* Chip de distancia al usuario */
.popup-dist {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  background: rgba(46, 196, 182, 0.1);
  border: 1px solid rgba(46, 196, 182, 0.25);
  border-radius: var(--r-full);
  padding: 2px var(--sp-3);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--c-teal);
  margin-bottom: var(--sp-3);
}

/* Grid de datos del sismo */
.popup-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-1) var(--sp-3);
  margin-bottom: var(--sp-3);
}

.popup-grid-label {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  white-space: nowrap;
  padding-top: 2px;
}

.popup-grid-value {
  font-size: var(--t-sm);
  color: var(--c-text);
  word-break: break-word;
}

/* Sección de validación de fuentes */
.popup-validation {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-border);
}

.popup-validation-badge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--c-teal);
  background: rgba(46, 196, 182, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--c-teal);
  flex-shrink: 0;
}

.popup-validation-text {
  font-size: var(--t-xs);
  color: var(--c-text-dim);
  line-height: 1.4;
}

.popup-validation-text strong {
  color: var(--c-teal);
  display: block;
  font-size: var(--t-xs);
}

.popup-validation-link {
  color: var(--c-teal);
  font-size: var(--t-xs);
  text-decoration: none;
  opacity: 0.75;
}

.popup-validation-link:hover { opacity: 1; text-decoration: underline; }

/* Marcador de ubicación del usuario */
.user-dot {
  width: 20px;
  height: 20px;
  background: var(--c-teal);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(46, 196, 182, 0.55);
  /* Duración aumentada a 4s y expansión más amplia (26px) */
  animation: user-pulse 4s ease-out infinite;
}

@keyframes user-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(46, 196, 182, 0.55); }
  60%  { box-shadow: 0 0 0 26px rgba(46, 196, 182, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(46, 196, 182, 0);    }
}

/* Tooltip permanente de la ubicación del usuario */
.user-tooltip {
  background: rgba(8, 12, 20, 0.88) !important;
  border: 1px solid var(--c-teal) !important;
  border-radius: var(--r-full) !important;
  color: var(--c-teal) !important;
  font-size: var(--t-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  padding: 3px 10px !important;
  white-space: nowrap;
  box-shadow: 0 0 10px rgba(46, 196, 182, 0.2) !important;
}

.user-tooltip::before {
  border-top-color: var(--c-teal) !important;
}


/* ─────────────────────────────────────────────────────────
   5. HUD SUPERIOR — Cabecera flotante
───────────────────────────────────────────────────────── */

.hud-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  height: var(--hud-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 0 var(--sp-4);
  /* Glassmorphism sobre el mapa */
  background: rgba(8, 12, 20, 0.88);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--c-raised);
}

/* Transición de color del borde en alerta */
.hud-header--alerta-destructivo { border-bottom-color: var(--c-destructivo); }
.hud-header--alerta-moderado    { border-bottom-color: var(--c-moderado); }

/* Logo */
.hud-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--c-text);
  flex-shrink: 0;
}

.hud-logo-mark {
  color: var(--c-teal);
  display: flex;
}

.hud-logo-text {
  font-size: var(--t-base);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hud-logo-dot { color: var(--c-teal); }

/* Píldora de estado */
.hud-status {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  background: var(--c-surface);
  border: 1px solid var(--c-raised);
  border-radius: var(--r-full);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  max-width: 160px;
  text-overflow: ellipsis;
}

.hud-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-text-dim);
  flex-shrink: 0;
  transition: background 0.3s;
}

.hud-status--online   .hud-status-dot { background: var(--c-teal); box-shadow: 0 0 6px var(--glow-teal); }
.hud-status--alerta   .hud-status-dot { background: var(--c-destructivo); animation: dot-blink 1s infinite; }
.hud-status--error    .hud-status-dot { background: var(--c-text-dim); }

@keyframes dot-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* Botón icono HUD */
.hud-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-surface);
  border: 1px solid var(--c-raised);
  border-radius: var(--r-md);
  color: var(--c-text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.hud-btn:hover,
.hud-btn:focus-visible {
  background: rgba(46, 196, 182, 0.1);
  border-color: var(--c-teal);
  outline: none;
}


/* ─────────────────────────────────────────────────────────
   6. BANNER DE ALERTA — Deslizable desde arriba
───────────────────────────────────────────────────────── */

.alert-banner {
  position: fixed;
  top: var(--hud-header-h);
  left: 0; right: 0;
  z-index: 490;
  transform: translateY(-100%);
  transition: transform 0.35s var(--ease);
}

.alert-banner.is-visible { transform: translateY(0); }

.alert-banner-body {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  padding-right: 2.5rem;
}

/* Variantes de color del banner */
.alert-banner--destructivo .alert-banner-body {
  background: rgba(230, 57, 70, 0.15);
  border-bottom: 1px solid rgba(230, 57, 70, 0.4);
  color: var(--c-destructivo);
}

.alert-banner--moderado .alert-banner-body {
  background: rgba(244, 162, 97, 0.12);
  border-bottom: 1px solid rgba(244, 162, 97, 0.35);
  color: var(--c-moderado);
}

.alert-banner-icon {
  font-size: var(--t-xl);
  flex-shrink: 0;
  animation: shake 0.4s ease-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-4px); }
  75%       { transform: translateX(4px); }
}

.alert-banner-text { flex: 1; min-width: 0; }

.alert-banner-text strong {
  display: block;
  font-size: var(--t-base);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.alert-banner-text span {
  display: block;
  font-size: var(--t-xs);
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alert-banner-close {
  position: absolute;
  top: 50%;
  right: var(--sp-3);
  transform: translateY(-50%);
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.6;
  padding: var(--sp-2);
  display: flex;
}

.alert-banner-close:hover { opacity: 1; }


/* ─────────────────────────────────────────────────────────
   7. HUD INFERIOR — Leyenda y chip de actualización
───────────────────────────────────────────────────────── */

/* Leyenda del semáforo — esquina inferior izquierda */
.hud-legend {
  position: fixed;
  bottom: calc(var(--drawer-peek) + var(--sp-3));
  left: var(--sp-3);
  z-index: 400;
  background: rgba(8, 12, 20, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--c-raised);
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
}

.hud-legend-title {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  margin-bottom: var(--sp-2);
}

.hud-legend-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.hud-legend-list li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--t-xs);
  color: var(--c-text);
}

.hud-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.hud-legend-dot--destructivo {
  background: var(--c-destructivo);
  box-shadow: 0 0 5px var(--glow-destructivo);
}

.hud-legend-dot--moderado {
  background: var(--c-moderado);
  box-shadow: 0 0 5px var(--glow-moderado);
}

.hud-legend-dot--leve {
  background: var(--c-teal);
  box-shadow: 0 0 5px var(--glow-teal);
}

.hud-legend-count {
  font-size: var(--t-xs);
  color: var(--c-text-dim);
  border-top: 1px solid var(--c-raised);
  padding-top: var(--sp-2);
  text-align: center;
}

.hud-legend-count span {
  font-weight: 700;
  color: var(--c-teal);
  font-variant-numeric: tabular-nums;
}

/* Chip de actualización — esquina inferior derecha */
.hud-update {
  position: fixed;
  bottom: calc(var(--drawer-peek) + var(--sp-3));
  right: var(--sp-3);
  z-index: 400;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: rgba(8, 12, 20, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--c-raised);
  border-radius: var(--r-full);
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--t-xs);
  color: var(--c-text-dim);
  pointer-events: none;
}

.hud-update-icon { flex-shrink: 0; }
.hud-update--spinning .hud-update-icon { animation: spin 1.2s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }


/* ─────────────────────────────────────────────────────────
   8. DRAWER DE EVENTOS — Panel deslizable desde abajo
───────────────────────────────────────────────────────── */

.drawer {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 450;
  /* Solo asoma el asa */
  height: var(--drawer-peek);
  background: var(--c-surface);
  border-top: 1px solid var(--c-raised);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  display: flex;
  flex-direction: column;
  transition: height 0.4s var(--ease);
  overflow: hidden;
}

.drawer.is-open { height: 50dvh; }

.drawer-handle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-4);
  cursor: pointer;
  background: none;
  border: none;
  color: var(--c-text);
  width: 100%;
  flex-shrink: 0;
}

.drawer-handle-bar {
  width: 34px;
  height: 3px;
  background: var(--c-raised);
  border-radius: var(--r-full);
  transition: background 0.15s;
}

.drawer-handle:hover .drawer-handle-bar,
.drawer-handle:focus-visible .drawer-handle-bar {
  background: var(--c-text-dim);
}

.drawer-handle:focus-visible { outline: none; }

.drawer-handle-label {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}

.drawer-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: var(--sp-1) var(--sp-3) var(--sp-4);
}

/* Scrollbar minimalista */
.drawer-content::-webkit-scrollbar { width: 3px; }
.drawer-content::-webkit-scrollbar-track { background: transparent; }
.drawer-content::-webkit-scrollbar-thumb { background: var(--c-raised); border-radius: 2px; }

/* Placeholder vacío */
.drawer-empty {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  color: var(--c-text-dim);
  font-size: var(--t-sm);
}

/* Ítem de evento sísmico */
.event-item {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--c-raised);
  border-radius: var(--r-md);
  cursor: pointer;
  border: 1px solid transparent;
  margin-bottom: var(--sp-2);
  transition: border-color 0.15s, background 0.15s;
  animation: slide-in 0.2s var(--ease) both;
}

@keyframes slide-in {
  from { transform: translateY(6px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}

.event-item:hover,
.event-item:focus-visible {
  border-color: var(--c-text-dim);
  background: #1C2D4A;
  outline: none;
}

/* Badge circular de magnitud */
.event-mag {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-sm);
  font-weight: 800;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.event-mag--destructivo {
  background: rgba(230, 57, 70, 0.12);
  color: var(--c-destructivo);
  border: 1.5px solid var(--c-destructivo);
  box-shadow: 0 0 12px var(--glow-destructivo);
}

.event-mag--moderado {
  background: rgba(244, 162, 97, 0.1);
  color: var(--c-moderado);
  border: 1.5px solid var(--c-moderado);
  box-shadow: 0 0 12px var(--glow-moderado);
}

.event-mag--leve {
  background: rgba(46, 196, 182, 0.08);
  color: var(--c-teal);
  border: 1.5px solid rgba(46, 196, 182, 0.4);
}

.event-info { min-width: 0; }

.event-place {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-time {
  font-size: var(--t-xs);
  color: var(--c-text-dim);
  margin-top: 2px;
}

.event-dist {
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--c-teal);
  white-space: nowrap;
  text-align: right;
}


/* ─────────────────────────────────────────────────────────
   9. MODAL DE CONFIGURACIÓN DE UBICACIÓN
───────────────────────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fade-in 0.2s var(--ease);
}

@media (min-width: 600px) {
  .modal-overlay { align-items: center; padding: var(--sp-6); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal {
  width: 100%;
  max-width: 440px;
  background: var(--c-surface);
  border: 1px solid var(--c-raised);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  max-height: 90dvh;
  overflow-y: auto;
  animation: slide-up 0.35s var(--ease-spring);
}

@media (min-width: 600px) {
  .modal { border-radius: var(--r-xl); }
}

@keyframes slide-up {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.modal-header { text-align: center; margin-bottom: var(--sp-5); }

.modal-icon {
  display: block;
  margin: 0 auto var(--sp-3);
}

.modal-title {
  font-size: var(--t-xl);
  font-weight: 800;
  color: var(--c-text);
  margin-bottom: var(--sp-2);
  letter-spacing: -0.01em;
}

.modal-subtitle {
  font-size: var(--t-sm);
  color: var(--c-text-dim);
  line-height: 1.55;
}

.modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

/* Etiquetas y selects del formulario */
.field-label {
  display: block;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  margin-bottom: var(--sp-2);
}

.field-select {
  display: block;
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-raised);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  color: var(--c-text);
  font-size: var(--t-base);
  font-family: var(--font);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  /* Flecha custom SVG */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235A7A9A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  padding-right: 2.5rem;
  transition: border-color 0.15s;
}

.field-select:focus {
  border-color: var(--c-teal);
  outline: none;
  box-shadow: 0 0 0 2px rgba(46, 196, 182, 0.2);
}

.field-select:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.field-select option {
  background: var(--c-surface);
  color: var(--c-text);
}

/* Preview de coordenadas */
.coord-preview {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: rgba(46, 196, 182, 0.08);
  border: 1px solid rgba(46, 196, 182, 0.2);
  border-radius: var(--r-md);
  font-size: var(--t-xs);
  color: var(--c-teal);
}

.coord-preview code {
  font-family: var(--font-mono);
}

.modal-footer {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.modal-privacy {
  margin-top: var(--sp-4);
  font-size: var(--t-xs);
  color: var(--c-text-dim);
  text-align: center;
  line-height: 1.5;
}


/* ─────────────────────────────────────────────────────────
   10. BOTONES DEL SISTEMA
───────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md);
  font-size: var(--t-base);
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  border: 1px solid transparent;
  transition: filter 0.15s, transform 0.1s;
  text-align: center;
  line-height: 1;
  letter-spacing: 0.01em;
}

.btn--primary {
  background: var(--c-teal);
  color: var(--c-abyss);
  border-color: var(--c-teal);
}

.btn--primary:hover:not(:disabled) { filter: brightness(1.12); }
.btn--primary:active:not(:disabled) { transform: scale(0.98); }

.btn--primary:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.btn--ghost {
  background: transparent;
  color: var(--c-text-dim);
  border-color: var(--c-raised);
}

.btn--ghost:hover { border-color: var(--c-text-dim); color: var(--c-text); }

.btn--full { width: 100%; }


/* ─────────────────────────────────────────────────────────
   11. PANEL POST-SISMO — Reporte comunitario de intensidad
───────────────────────────────────────────────────────── */

.report-panel {
  position: fixed;
  bottom: calc(var(--drawer-peek) + var(--sp-3));
  left: var(--sp-3);
  right: var(--sp-3);
  z-index: 600;
  animation: slide-up 0.4s var(--ease-spring);
}

@media (min-width: 600px) {
  .report-panel {
    left: auto;
    right: var(--sp-4);
    width: 340px;
  }
}

.report-card {
  background: var(--c-surface);
  border: 1px solid var(--c-raised);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg), 0 0 32px rgba(230, 57, 70, 0.1);
}

/* Cabecera con anillo pulsante — firma visual */
.report-card-header {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: rgba(230, 57, 70, 0.07);
  border-bottom: 1px solid var(--c-raised);
  overflow: hidden;
}

/* Anillo pulsante de emergencia */
.report-pulse {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid rgba(230, 57, 70, 0.5);
  animation: ring-pulse 2.4s ease-out infinite;
}

.report-pulse::after {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 2px solid rgba(230, 57, 70, 0.3);
  animation: ring-pulse 2.4s ease-out infinite 0.5s;
}

@keyframes ring-pulse {
  0%   { transform: scale(0.85); opacity: 0.7; }
  100% { transform: scale(1.8);  opacity: 0; }
}

.report-card-header-text { flex: 1; min-width: 0; position: relative; z-index: 1; }

.report-title {
  font-size: var(--t-lg);
  font-weight: 800;
  color: var(--c-text);
  margin-bottom: 2px;
}

.report-meta {
  font-size: var(--t-xs);
  color: var(--c-text-dim);
}

.report-close {
  background: none;
  border: none;
  color: var(--c-text-dim);
  cursor: pointer;
  padding: var(--sp-1);
  display: flex;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.report-close:hover { color: var(--c-text); }

/* Pasos del reporte */
.report-step { padding: var(--sp-5); }

.report-question {
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--c-text);
  text-align: center;
  margin-bottom: var(--sp-4);
  line-height: 1.4;
}

/* Botones SÍ / NO */
.report-step-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.report-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-3);
  border-radius: var(--r-md);
  font-size: var(--t-base);
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s;
}

.report-btn--yes {
  background: rgba(46, 196, 182, 0.1);
  color: var(--c-teal);
  border-color: rgba(46, 196, 182, 0.4);
}

.report-btn--yes:hover {
  background: var(--c-teal);
  color: var(--c-abyss);
  border-color: var(--c-teal);
}

.report-btn--no {
  background: var(--c-raised);
  color: var(--c-text-dim);
  border-color: var(--c-border);
}

.report-btn--no:hover { border-color: var(--c-text-dim); color: var(--c-text); }

/* ── FIRMA VISUAL: Número de intensidad + sismógrafo SVG ── */
.intensity-display {
  text-align: center;
  margin-bottom: var(--sp-2);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--sp-2);
}

.intensity-number {
  font-size: var(--t-huge);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  color: var(--c-text);
  transition: color 0.2s;
}

.intensity-unit {
  font-size: var(--t-md);
  color: var(--c-text-dim);
  font-weight: 400;
}

/* Línea de sismógrafo SVG — el path cambia con JS según la intensidad */
.intensity-seismo {
  display: block;
  width: 100%;
  height: 28px;
  margin-bottom: var(--sp-2);
  transition: opacity 0.2s;
}

.intensity-desc {
  text-align: center;
  font-size: var(--t-sm);
  color: var(--c-text-dim);
  min-height: 2.2em;
  margin-bottom: var(--sp-4);
  line-height: 1.4;
  transition: color 0.2s;
}

/* Slider de intensidad */
.slider-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.slider-cap {
  font-size: var(--t-xs);
  color: var(--c-text-dim);
  font-weight: 600;
  flex-shrink: 0;
  width: 14px;
  text-align: center;
}

.intensity-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 5px;
  border-radius: var(--r-full);
  /* Gradiente del semáforo como pista del slider */
  background: linear-gradient(
    to right,
    var(--c-teal),
    var(--c-moderado),
    var(--c-destructivo)
  );
  cursor: pointer;
  outline: none;
}

.intensity-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c-text);
  border: 3px solid var(--c-teal);
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  cursor: pointer;
  transition: border-color 0.2s, transform 0.1s;
}

.intensity-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.intensity-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c-text);
  border: 3px solid var(--c-teal);
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  cursor: pointer;
}

/* Confirmación de envío — paso 3 */
.report-sent {
  text-align: center;
  padding: var(--sp-2) 0;
}

.report-sent-icon {
  display: block;
  margin: 0 auto var(--sp-3);
  animation: bounce-in 0.5s var(--ease-spring);
}

@keyframes bounce-in {
  0%   { transform: scale(0.5); opacity: 0; }
  70%  { transform: scale(1.1); }
  100% { transform: scale(1);   opacity: 1; }
}

.report-sent-title {
  font-size: var(--t-xl);
  font-weight: 800;
  color: var(--c-text);
  margin-bottom: var(--sp-2);
}

.report-sent-sub {
  font-size: var(--t-sm);
  color: var(--c-text-dim);
  margin-bottom: var(--sp-4);
  line-height: 1.5;
}

/* JSON del payload visible en Fase 1 para debug */
.report-payload {
  background: var(--c-abyss);
  border: 1px solid var(--c-raised);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--c-teal);
  line-height: 1.6;
  text-align: left;
  overflow-x: auto;
  white-space: pre;
  max-height: 160px;
  overflow-y: auto;
}


/* ─────────────────────────────────────────────────────────
   12. TOASTS — Notificaciones no bloqueantes
───────────────────────────────────────────────────────── */

.toast-rack {
  position: fixed;
  top: calc(var(--hud-header-h) + var(--sp-3));
  right: var(--sp-3);
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  pointer-events: none;
  max-width: 280px;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-raised);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  color: var(--c-text);
  box-shadow: var(--shadow-md);
  pointer-events: auto;
  animation: slide-in-right 0.25s var(--ease);
  border-left: 3px solid var(--c-text-dim);
}

.toast--info    { border-left-color: var(--c-teal); }
.toast--success { border-left-color: var(--c-teal); }
.toast--warn    { border-left-color: var(--c-moderado); }
.toast--error   { border-left-color: var(--c-destructivo); }

@keyframes slide-in-right {
  from { transform: translateX(16px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

.toast.is-leaving {
  animation: fade-out 0.2s var(--ease) forwards;
}

@keyframes fade-out {
  to { opacity: 0; transform: translateX(8px); }
}


/* ─────────────────────────────────────────────────────────
   13. SPINNER DE CARGA
───────────────────────────────────────────────────────── */

.spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 2px solid var(--c-raised);
  border-top-color: var(--c-teal);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────────
   14. RESPONSIVE — Pantallas medianas y grandes
───────────────────────────────────────────────────────── */

@media (min-width: 768px) {
  /* En desktop el drawer se convierte en sidebar fijo derecho */
  .drawer {
    top: var(--hud-header-h);
    left: auto;
    right: 0;
    bottom: 0;
    width: 300px;
    height: auto;
    border-top: none;
    border-left: 1px solid var(--c-raised);
    border-radius: 0;
  }

  .drawer.is-open { height: auto; }

  /* El asa desaparece en desktop */
  .drawer-handle { display: none; }

  /* La leyenda y el chip de update no colisionan con el drawer */
  .hud-legend  { bottom: var(--sp-4); }
  .hud-update  { bottom: var(--sp-4); right: calc(300px + var(--sp-4)); }

  /* El panel de reporte también se ajusta */
  .report-panel {
    left: auto;
    right: calc(300px + var(--sp-4));
    bottom: var(--sp-4);
  }
}

@media (min-width: 1024px) {
  .drawer { width: 340px; }
  .hud-update { right: calc(340px + var(--sp-4)); }
  .report-panel { right: calc(340px + var(--sp-4)); }
}


/* ─────────────────────────────────────────────────────────
   FASE 2 — DRAWER: Filtros de período e historial
───────────────────────────────────────────────────────── */

/* Fila del asa con contador */
.drawer-handle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--sp-3);
}

/* Badge con conteo de sismos del período activo */
.drawer-handle-count {
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--c-teal);
  background: rgba(46, 196, 182, 0.12);
  border: 1px solid rgba(46, 196, 182, 0.25);
  border-radius: var(--r-full);
  padding: 1px 8px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Barra de filtros de período */
.drawer-filters {
  display: flex;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--c-raised);
  flex-shrink: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.drawer-filters::-webkit-scrollbar { display: none; }

.drawer-filter-btn {
  flex-shrink: 0;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  font-size: var(--t-xs);
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  border: 1px solid var(--c-raised);
  background: transparent;
  color: var(--c-text-dim);
  transition: all 0.15s;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.drawer-filter-btn:hover {
  border-color: var(--c-text-dim);
  color: var(--c-text);
}

.drawer-filter-btn.active {
  background: rgba(46, 196, 182, 0.15);
  border-color: var(--c-teal);
  color: var(--c-teal);
}

/* Ajuste del drawer para acomodar la barra de filtros */
.drawer {
  /* Sobreescribe solo el height del peek para incluir los filtros */
}

/* Fuente de datos en el ítem de la lista */
.event-source {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 3px;
}

.event-source--usgs  { color: rgba(46, 196, 182, 0.6); }
.event-source--igepn { color: rgba(244, 162, 97, 0.7); }

/* Separador de fecha en la lista */
.event-date-separator {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  padding: var(--sp-3) var(--sp-1) var(--sp-1);
  border-bottom: 1px solid var(--c-raised);
  margin-bottom: var(--sp-2);
}

/* Mensaje de período vacío */
.drawer-period-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4);
  color: var(--c-text-dim);
  font-size: var(--t-sm);
  text-align: center;
}

.drawer-period-empty svg { opacity: 0.3; }

/* En desktop, el drawer también muestra los filtros en la barra lateral */
@media (min-width: 768px) {
  .drawer-filters {
    padding: var(--sp-3) var(--sp-4);
  }

  .drawer-handle {
    cursor: default;
    pointer-events: none;
  }

  /* Siempre expandido en desktop */
  .drawer.is-open { height: auto; }
}


/* ─────────────────────────────────────────────────────────
   FASE 2 — PIN DE EPICENTRO Y POPUP DE IMPACTO
───────────────────────────────────────────────────────── */

/* Popup de impacto — clase aplicada al contenedor Leaflet */
.impact-popup .leaflet-popup-content-wrapper {
  min-width: 260px !important;
}

/* Hero del popup: magnitud grande + lugar */
.popup-hero {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-raised);
}

.popup-hero-mag {
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.popup--destructivo .popup-hero-mag { color: var(--c-destructivo); }
.popup--moderado    .popup-hero-mag { color: var(--c-moderado); }
.popup--leve        .popup-hero-mag { color: var(--c-teal); }

.popup-hero-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.popup-hero-place {
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--c-text);
  word-break: break-word;
  line-height: 1.3;
}

.popup-hero-time {
  font-size: var(--t-xs);
  color: var(--c-text-dim);
}

/* Leyenda de zonas de impacto */
.popup-zones {
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-raised);
}

.popup-zones-title {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  margin-bottom: var(--sp-2);
}

.popup-zone {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--t-xs);
  color: var(--c-text);
  margin-bottom: var(--sp-1);
  line-height: 1.4;
}

.popup-zone-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid currentColor;
}

.popup-zone-dot--red    { background: rgba(230,57,70,0.35);  color: #E63946; }
.popup-zone-dot--yellow { background: rgba(245,158,11,0.35); color: #f59e0b; }
.popup-zone-dot--green  { background: rgba(34,197,94,0.35);  color: #22c55e; }

/* Link de fuente */
.popup-source-link {
  display: block;
  font-size: var(--t-xs);
  color: var(--c-text-dim);
  text-decoration: none;
  margin-top: var(--sp-1);
}

.popup-source-link:hover { color: var(--c-teal); text-decoration: underline; }


/* ─────────────────────────────────────────────────────────
   DEGRADADOS DE BORDE DEL MAPA
   4 overlays pointer-events:none que hacen fade del mapa
   hacia el fondo oscuro, reforzando el límite visual.
   El ancho/alto del fade es generoso (120px) para que
   el efecto sea suave y no abrupto.
───────────────────────────────────────────────────────── */

.map-fade {
  position: fixed;
  z-index: 50;          /* Por encima del mapa, por debajo del HUD */
  pointer-events: none; /* No bloquea interacción con el mapa */
}

/* Borde superior */
.map-fade--top {
  top: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(
    to bottom,
    var(--c-abyss) 0%,
    rgba(8, 12, 20, 0.6) 40%,
    transparent 100%
  );
}

/* Borde inferior */
.map-fade--bottom {
  bottom: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(
    to top,
    var(--c-abyss) 0%,
    rgba(8, 12, 20, 0.6) 40%,
    transparent 100%
  );
}

/* Borde izquierdo */
.map-fade--left {
  top: 0; left: 0; bottom: 0;
  width: 80px;
  background: linear-gradient(
    to right,
    var(--c-abyss) 0%,
    rgba(8, 12, 20, 0.5) 50%,
    transparent 100%
  );
}

/* Borde derecho */
.map-fade--right {
  top: 0; right: 0; bottom: 0;
  width: 80px;
  background: linear-gradient(
    to left,
    var(--c-abyss) 0%,
    rgba(8, 12, 20, 0.5) 50%,
    transparent 100%
  );
}

/* ─────────────────────────────────────────────────────────
   EVENTO ACTIVO EN EL HISTORIAL
   Tres variantes de glow según el nivel del semáforo.
   La sombra replica la misma lógica del tooltip "Tu ubicación"
   pero con el color del nivel sísmico del evento.
───────────────────────────────────────────────────────── */

.event-item--active {
  border-color: transparent !important;
  position: relative;
}

/* Destructivo — glow rojo */
.event-item--active.event-item--destructivo {
  background: rgba(230, 57, 70, 0.08) !important;
  border-color: rgba(230, 57, 70, 0.5) !important;
  box-shadow:
    0 0 0 1px rgba(230, 57, 70, 0.4),
    0 4px 20px rgba(230, 57, 70, 0.25),
    0 0 40px rgba(230, 57, 70, 0.12);
}

/* Moderado — glow ámbar */
.event-item--active.event-item--moderado {
  background: rgba(244, 162, 97, 0.08) !important;
  border-color: rgba(244, 162, 97, 0.5) !important;
  box-shadow:
    0 0 0 1px rgba(244, 162, 97, 0.4),
    0 4px 20px rgba(244, 162, 97, 0.22),
    0 0 40px rgba(244, 162, 97, 0.10);
}

/* Leve — glow teal */
.event-item--active.event-item--leve {
  background: rgba(46, 196, 182, 0.07) !important;
  border-color: rgba(46, 196, 182, 0.4) !important;
  box-shadow:
    0 0 0 1px rgba(46, 196, 182, 0.35),
    0 4px 20px rgba(46, 196, 182, 0.18),
    0 0 40px rgba(46, 196, 182, 0.08);
}


/* ─────────────────────────────────────────────────────────
   PANEL DE IMPACTO — Datos del evento seleccionado en el globo
───────────────────────────────────────────────────────── */

.impact-panel {
  position: fixed;
  bottom: calc(var(--drawer-peek) + var(--sp-3));
  left: var(--sp-3);
  z-index: 600;
  width: calc(100% - var(--sp-6));
  max-width: 300px;
  animation: slide-up 0.35s var(--ease-spring);
}

@media (min-width: 768px) {
  .impact-panel {
    left: var(--sp-4);
    bottom: var(--sp-4);
    width: 300px;
  }
}

.impact-panel-inner {
  background: var(--c-surface);
  border: 1px solid var(--c-raised);
  border-radius: var(--r-xl);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--shadow-lg);
}

/* Hero: magnitud + lugar */
.impact-panel-hero {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  position: relative;
}

.impact-panel-mag {
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.impact-panel-mag--destructivo { color: var(--c-destructivo); }
.impact-panel-mag--moderado    { color: var(--c-moderado); }
.impact-panel-mag--leve        { color: var(--c-teal); }

.impact-panel-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.impact-panel-place {
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--c-text);
  word-break: break-word;
  line-height: 1.3;
}

.impact-panel-time {
  font-size: var(--t-xs);
  color: var(--c-text-dim);
}

.impact-panel-close {
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  border: none;
  color: var(--c-text-dim);
  cursor: pointer;
  padding: var(--sp-1);
  display: flex;
  line-height: 1;
}

.impact-panel-close:hover { color: var(--c-text); }

/* Chip de distancia */
.impact-panel-dist {
  font-size: var(--t-xs);
  color: var(--c-teal);
  background: rgba(46,196,182,0.1);
  border: 1px solid rgba(46,196,182,0.25);
  border-radius: var(--r-full);
  padding: 3px var(--sp-3);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin-bottom: var(--sp-3);
  font-weight: 600;
}

/* Zonas de impacto */
.impact-panel-zones {
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-raised);
}

.impact-zones-title {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  margin-bottom: var(--sp-2);
}

.impact-zone {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--t-xs);
  color: var(--c-text);
  margin-bottom: var(--sp-1);
}

.impact-zone-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid currentColor;
}

.impact-zone--red    .impact-zone-dot { background: rgba(230,57,70,0.35);  color: #E63946; }
.impact-zone--yellow .impact-zone-dot { background: rgba(245,158,11,0.35); color: #f59e0b; }
.impact-zone--green  .impact-zone-dot { background: rgba(34,197,94,0.35);  color: #22c55e; }

/* Fuente */
.impact-source-link,
.impact-source-text {
  font-size: var(--t-xs);
  color: var(--c-text-dim);
  text-decoration: none;
}

.impact-source-link:hover { color: var(--c-teal); text-decoration: underline; }

/* ─────────────────────────────────────────────────────────
   GLOBE.GL — Overrides de Three.js canvas
───────────────────────────────────────────────────────── */

/* El canvas del globo debe ocupar todo el contenedor */
#map canvas {
  display: block !important;
}

/* Cursor de interacción en el globo */
#map { cursor: grab; }
#map:active { cursor: grabbing; }