/* ============================================================
   PREVISIO - SOFTWARE PROFESIONAL DE SEGUIMIENTO Y SIMULACIÓN
   Propiedad Intelectual y Desarrollo: INTELLIGENTIA (intelligentia.dev)
   Plataforma libre y gratuita de uso público (Mutxamel, Alicante, España)
   Motor Astronómico y Ciclo Día/Noche Satelital en Tiempo Real
   ============================================================ */

:root {
  --bg-dark: #090d16;
  --panel-bg: rgba(13, 19, 33, 0.92);
  --panel-border: rgba(255, 255, 255, 0.14);
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --accent-fire: #ff2200;
  --accent-orange: #f97316;
  --accent-yellow: #eab308;
  --accent-green: #10b981;
  --accent-blue: #38bdf8;
  --brand-red: #ff2200;
  --accent-water: #0ea5e9;
  --accent-water-deep: #1d4ed8;
  --radius-lg: 16px;
  --radius-md: 10px;
  --shadow-glow: 0 0 24px rgba(255, 34, 0, 0.45);
  --shadow-glow-water: 0 0 24px rgba(14, 165, 233, 0.45);
  /* Acento del módulo activo: lo conmuta body[data-module] más abajo. */
  --module-accent: var(--accent-orange);
  --module-glow: var(--shadow-glow);
}

/* ============================================================
   CONMUTACIÓN ENTRE MÓDULOS (FEEDS)
   Los bloques exclusivos de un módulo se ocultan por CSS en lugar de
   retirarse del DOM, para que el caché de nodos de app.js nunca vea null.
   ============================================================ */

body[data-module="fire"] [data-mp-module="flood"],
body[data-module="flood"] [data-mp-module="fire"] {
  display: none !important;
}

body[data-module="flood"] {
  --module-accent: var(--accent-water);
  --module-glow: var(--shadow-glow-water);
}

body[data-module="flood"] .sidebar-title { color: var(--accent-water); }
body[data-module="flood"] .tab-btn.active {
  border-bottom-color: var(--accent-water);
  background: rgba(14, 165, 233, 0.14);
}

/* Conmutador de módulos del header */
.module-switcher {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
}

.module-switch-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.22s ease;
  text-align: left;
  white-space: nowrap;
}

.module-switch-btn:hover { background: rgba(255, 255, 255, 0.07); color: var(--text-main); }

.module-switch-icon { font-size: 19px; line-height: 1; filter: grayscale(0.85); transition: filter 0.22s ease; }
.module-switch-btn.active .module-switch-icon { filter: none; }

.module-switch-text { display: flex; flex-direction: column; line-height: 1.15; }
.module-switch-text strong { font-size: 11.5px; font-weight: 800; letter-spacing: 0.5px; }
.module-switch-text small { font-size: 9.5px; font-weight: 600; opacity: 0.75; }

.module-switch-btn.module-fire.active {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.3) 0%, rgba(185, 28, 28, 0.3) 100%);
  border-color: #ef4444;
  color: #ffffff;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.55);
}

.module-switch-btn.module-flood.active {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.3) 0%, rgba(3, 105, 161, 0.3) 100%);
  border-color: var(--accent-water);
  color: #ffffff;
  box-shadow: 0 0 14px rgba(14, 165, 233, 0.55);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

body, html {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg-dark);
  color: var(--text-main);
  touch-action: manipulation;
}

/* Visor de Mapa Pantalla Completa con Transición Atmosférica */
#map {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transition: filter 0.8s ease-in-out;
}

/* INSIGNIAS Y BADGES ASTRONÓMICOS DE HORIZONTE DÍA/NOCHE */
.day-badge {
  background: rgba(234, 179, 8, 0.2) !important;
  color: #fef08a !important;
  border: 1px solid rgba(234, 179, 8, 0.5) !important;
}

.twilight-badge {
  background: rgba(249, 115, 22, 0.25) !important;
  color: #fed7aa !important;
  border: 1px solid rgba(249, 115, 22, 0.6) !important;
}

.dusk-badge {
  background: rgba(139, 92, 246, 0.25) !important;
  color: #ddd6fe !important;
  border: 1px solid rgba(139, 92, 246, 0.6) !important;
}

.night-badge {
  background: rgba(14, 165, 233, 0.25) !important;
  color: #bae6fd !important;
  border: 1px solid rgba(14, 165, 233, 0.6) !important;
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.4);
}

/* TIRADOR DE ARRASTRE DE PANELES (GRIP HANDLE) */
.drag-grip {
  font-size: 13px;
  margin-right: 4px;
  opacity: 0.85;
  cursor: grab;
  user-select: none;
  display: inline-block;
}

.drag-grip:active {
  cursor: grabbing;
}

/* CORRECCIÓN DE SOLAPAMIENTO: Posicionar Controles de Leaflet debajo del Header sin Colisionar */
.leaflet-top.leaflet-right {
  top: 75px !important;
  right: 14px !important;
}

.leaflet-control-layers {
  background: var(--panel-bg) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid var(--panel-border) !important;
  color: var(--text-main) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
  font-size: 12px !important;
  padding: 6px 10px !important;
  cursor: grab;
}

.leaflet-control-layers-toggle {
  filter: invert(1);
}

.leaflet-control-layers-expanded {
  padding: 10px 14px !important;
}

/* Header Flotante Táctico */
.app-header {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  left: 14px;
  right: 14px;
  height: 60px;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background: var(--panel-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,0.65);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-logo {
  height: 38px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.35);
  object-fit: contain;
}

.brand-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.badge-pro {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.8px;
}

.badge-intelligentia {
  background: linear-gradient(135deg, #0284c7 0%, #3b82f6 100%);
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  text-decoration: none;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
  transition: all 0.2s ease;
}

.badge-intelligentia:hover {
  transform: scale(1.05);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.8);
}

.brand-subtitle {
  font-size: 11px;
  color: var(--accent-orange);
  font-weight: 600;
  letter-spacing: 0.5px;
}

.header-status {
  display: flex;
  align-items: center;
  gap: 12px;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(16, 185, 129, 0.15);
  color: var(--accent-green);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.clock-badge {
  background: rgba(0,0,0,0.6) !important;
  color: #f8fafc !important;
  border-color: rgba(255,255,255,0.2) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13px !important;
}

.status-badge.active-sim {
  background: rgba(255, 34, 0, 0.18);
  color: #ff3b00;
  border-color: rgba(255, 34, 0, 0.5);
  animation: pulse-border 1.8s infinite;
}

@keyframes pulse-border {
  0% { box-shadow: 0 0 0 0 rgba(255, 34, 0, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(255, 34, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 34, 0, 0); }
}

.btn-header {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main);
  border: 1px solid var(--panel-border);
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-header:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

/* BOTONES GENERALES DE MINIMIZADO Y EXPANDIDO */
.panel-toggle-btn {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-main);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.panel-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.4);
}

/* Botón flotante para reabrir Sidebar */
.btn-floating-expand {
  position: absolute;
  top: 86px;
  left: 14px;
  z-index: 1000;
  background: var(--panel-bg);
  backdrop-filter: blur(18px);
  color: var(--text-main);
  border: 1px solid var(--panel-border);
  padding: 10px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  display: none;
  transition: all 0.25s ease;
}

.btn-floating-expand:hover {
  background: rgba(249, 115, 22, 0.25);
  border-color: var(--accent-orange);
  transform: translateY(-1px);
}

/* BANNER INSTITUCIONAL NEUROMARKETING */
.institutional-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(220, 38, 38, 0.14);
  border-bottom: 1px solid rgba(220, 38, 38, 0.35);
}

/* BOTONES DE FILTRO RÁPIDO DE CLASE DE RIESGO */
.risk-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.btn-risk-filter {
  padding: 8px 6px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
  text-align: center;
}

.btn-risk-filter.risk-class-1 { border: 1px solid #ef4444; color: #fca5a5; }
.btn-risk-filter.risk-class-1.active { background: #dc2626; color: #ffffff; box-shadow: 0 0 12px rgba(220,38,38,0.6); }

.btn-risk-filter.risk-class-2 { border: 1px solid #f97316; color: #fed7aa; }
.btn-risk-filter.risk-class-2.active { background: #ea580c; color: #ffffff; box-shadow: 0 0 12px rgba(234,88,12,0.6); }

.btn-risk-filter.risk-class-3 { border: 1px solid #eab308; color: #fef08a; }
.btn-risk-filter.risk-class-3.active { background: #ca8a04; color: #ffffff; box-shadow: 0 0 12px rgba(202,138,4,0.6); }

.btn-risk-filter.risk-class-4 { border: 1px solid #10b981; color: #a7f3d0; }
.btn-risk-filter.risk-class-4.active { background: #059669; color: #ffffff; box-shadow: 0 0 12px rgba(5,150,105,0.6); }

.btn-risk-filter.risk-class-all { grid-column: span 2; border: 1px solid #38bdf8; color: #bae6fd; }
.btn-risk-filter.risk-class-all.active { background: #0284c7; color: #ffffff; box-shadow: 0 0 12px rgba(2,132,199,0.6); }

/* Sidebar de Control Físico y Ajustes */
.sidebar-panel {
  position: absolute;
  top: 86px;
  left: 14px;
  bottom: 14px;
  width: 390px;
  z-index: 1000;
  background: var(--panel-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,0.65);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.sidebar-panel.collapsed {
  transform: translateX(-420px);
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid var(--panel-border);
  cursor: grab;
}

.sidebar-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: var(--accent-orange);
  text-transform: uppercase;
}

.sidebar-tabs {
  display: flex;
  border-bottom: 1px solid var(--panel-border);
  background: rgba(0, 0, 0, 0.25);
  overflow-x: auto;
}

.tab-btn {
  flex: 1;
  padding: 12px 6px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.tab-btn.active {
  color: var(--text-main);
  border-bottom: 2px solid var(--accent-orange);
  background: rgba(249, 115, 22, 0.12);
}

.sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  -webkit-overflow-scrolling: touch;
}

.sidebar-content::-webkit-scrollbar {
  width: 5px;
}
.sidebar-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.section-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.control-card {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 14px;
}

.slider-group {
  margin-bottom: 12px;
}

.slider-group:last-child {
  margin-bottom: 0;
}

.slider-header {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 6px;
}

.slider-label {
  color: var(--text-main);
  font-weight: 500;
}

.slider-val {
  font-weight: 700;
  color: var(--accent-orange);
}

input[type="range"] {
  width: 100%;
  accent-color: var(--accent-orange);
  cursor: pointer;
}

/* Brújula de Viento */
.compass-container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 10px;
}

.compass-dial {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 2px solid var(--panel-border);
  position: relative;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.12) 0%, rgba(0,0,0,0.5) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.compass-arrow {
  width: 4px;
  height: 56px;
  background: linear-gradient(to top, transparent 50%, var(--accent-fire) 50%);
  position: absolute;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center center;
}

.compass-arrow::after {
  content: '';
  position: absolute;
  top: 0;
  left: -4px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 12px solid var(--accent-fire);
}

.compass-text {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
}

/* Botón de Ignición Principal */
.btn-ignition {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #ff2200 0%, #dc2626 100%);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(255, 34, 0, 0.4);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-ignition:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(255, 34, 0, 0.6);
}

.btn-ignition.active {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.4);
}

/* CORRECCIÓN ABSOLUTA DE SOLAPAMIENTO: Leyenda colocada a top: 430px debajo del panel de capas Leaflet desplegado */
.map-legend {
  position: absolute;
  top: 430px;
  right: 14px;
  z-index: 1000;
  background: var(--panel-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 11px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.65);
  transition: opacity 0.2s ease;
  max-width: 260px;
  cursor: grab;
}

.legend-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  cursor: grab;
}

.map-legend.collapsed .legend-content {
  display: none !important;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  color: #e2e8f0;
}

.legend-color {
  width: 13px;
  height: 13px;
  border-radius: 3px;
}

/* ANIMACIÓN NEÓN VERDE FOSFORITO CON MOVIMIENTO DE TRAZO PARA RUTAS DE EVACUACIÓN */
@keyframes flowEvacuationDash {
  from {
    stroke-dashoffset: 40;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.evacuation-animated-route {
  stroke-dasharray: 14, 10 !important;
  animation: flowEvacuationDash 0.7s linear infinite !important;
  filter: drop-shadow(0 0 12px #00ff66) drop-shadow(0 0 4px #00ff66) !important;
}

/* Panel Inferior de Control y Telemetría Táctica (HUD Playback) */
.hud-playback {
  position: absolute;
  bottom: max(14px, env(safe-area-inset-bottom));
  left: 418px;
  right: 14px;
  height: 76px;
  z-index: 1000;
  background: var(--panel-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 8px 32px rgba(0,0,0,0.65);
  transition: height 0.3s ease;
}

.hud-playback.sidebar-closed {
  left: 14px;
}

.hud-playback.collapsed {
  height: 50px;
}

.hud-playback.collapsed .sim-metrics {
  display: none;
}

.btn-toggle-hud {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 12px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  padding: 2px 10px;
}

.playback-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-play {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent-orange);
  color: white;
  border: none;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.btn-play:hover {
  transform: scale(1.08);
  box-shadow: 0 0 16px rgba(249, 115, 22, 0.6);
}

.sim-metrics {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.metric-item {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
}

.metric-title {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.metric-value {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-main);
  font-family: 'JetBrains Mono', monospace;
}

.metric-value span {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  font-family: 'Inter', sans-serif;
}

/* ============================================================
   RESPONSIVE DESIGN HD & ADAPTACIÓN ESPECÍFICA IPHONE / iOS SAFARI
   ============================================================ */
@media screen and (max-width: 768px) {
  /* Header Móvil Adaptativo con Notch Safari */
  .app-header {
    top: max(8px, env(safe-area-inset-top));
    left: 8px;
    right: 8px;
    height: auto;
    padding: 10px 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    border-radius: 14px;
  }

  .brand {
    justify-content: space-between;
  }

  .module-switcher {
    width: 100%;
  }
  .module-switch-btn {
    flex: 1;
    justify-content: center;
    padding: 7px 8px;
  }
  .module-switch-text small {
    display: none;
  }

  .brand-logo {
    height: 30px;
  }

  .brand-title {
    font-size: 13px;
  }

  .badge-intelligentia {
    font-size: 9px;
    padding: 2px 6px;
  }

  .header-status {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px;
  }

  .status-badge {
    padding: 4px 8px;
    font-size: 10px;
  }

  .clock-badge {
    font-size: 11px !important;
  }

  .btn-header {
    padding: 6px 10px;
    font-size: 11px;
  }

  /* Sidebar Flotante Completo en Pantallas Móviles iPhone */
  .sidebar-panel {
    top: calc(115px + env(safe-area-inset-top));
    left: 8px;
    right: 8px;
    width: calc(100vw - 16px);
    max-height: calc(100vh - 180px);
    bottom: auto;
    border-radius: 14px;
    z-index: 1001;
  }

  .sidebar-panel.collapsed {
    transform: translateX(-110%);
  }

  .btn-floating-expand {
    top: calc(115px + env(safe-area-inset-top));
    left: 8px;
    padding: 8px 14px;
    font-size: 12px;
  }

  /* HUD Playback Inferior Móvil con Home Bar Indicator Safe Area */
  .hud-playback {
    left: 8px;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    height: auto;
    padding: 10px 12px;
    flex-direction: column;
    gap: 8px;
    border-radius: 14px;
  }

  .hud-playback.sidebar-closed {
    left: 8px;
  }

  .playback-controls {
    width: 100%;
    justify-content: space-between;
  }

  .sim-metrics {
    width: 100%;
    gap: 12px;
    padding-bottom: 4px;
  }

  /* Controles de Capas Leaflet ajustados para Móvil */
  .leaflet-top.leaflet-right {
    top: calc(120px + env(safe-area-inset-top)) !important;
    right: 8px !important;
  }

  .map-legend {
    top: calc(410px + env(safe-area-inset-top));
    right: 8px;
    max-width: calc(100vw - 20px);
    font-size: 10px;
  }
}

/* Estilos de Impresión para Informe CECOPI */
@media print {
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }
  .app-header, .sidebar-panel, .map-legend, .hud-playback {
    position: relative !important;
    backdrop-filter: none !important;
    background: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
  }
}

/* MARCADO Y ARRASTRE DE PEATONES EN RIESGO */
.custom-pegman-marker {
  pointer-events: auto !important;
  cursor: grab !important;
}
.custom-pegman-marker:active {
  cursor: grabbing !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SISTEMA ÚNICO DE MARCADORES DEL MAPA
   Válido para los dos módulos: incendios e inundaciones.

   Regla de construcción: núcleo claro (donde el emoji se lee siempre), anillo
   de color que comunica el estado, y filo oscuro exterior para que la pieza
   recorte también sobre ortofoto clara. El tamaño lo gobierna el zoom a través
   de --mp-icon-scale, que fija el contenedor del mapa.
   ═══════════════════════════════════════════════════════════════════════════ */

.mp-pin-wrap { background: none !important; border: none !important; }

.mp-pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(var(--mp-icon-scale, 1));
  transform-origin: bottom center;
  transition: transform .18s ease-out;
  will-change: transform;
}

.mp-pin-disc {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border-style: solid;
  border-color: var(--mp-pin-color, #38bdf8);
  background: #ffffff;
  line-height: 1;
  /* Doble contorno: filo oscuro pegado al anillo para recortar sobre fondo
     claro, y sombra difusa para despegar el marcador de la imagen aérea. */
  box-shadow:
    0 0 0 1.5px rgba(15, 23, 42, .9),
    0 2px 6px rgba(15, 23, 42, .45);
  /* El emoji hereda la tipografía de emoji del sistema; sin esto algunos
     navegadores lo sustituyen por un glifo monocromo ilegible. */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  text-shadow: none;
}

.mp-pin-label {
  display: var(--mp-label-display, block);
  margin-bottom: 3px;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--mp-pin-color, #38bdf8);
  color: #ffffff;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  border: 1.5px solid rgba(255, 255, 255, .95);
  box-shadow: 0 1px 4px rgba(15, 23, 42, .5);
  /* El rótulo lleva texto blanco sobre el color de estado; el amarillo de
     aviso no da contraste suficiente, así que se oscurece la tinta. */
  text-shadow: 0 1px 2px rgba(15, 23, 42, .55);
}

/* El latido se reserva a lo que de verdad urge: un peatón en peligro de
   muerte, un foco activo. Antes lo llevaban casi todos los iconos, y cuando
   todo parpadea nada destaca. */
.mp-pin-urgent .mp-pin-disc { animation: mp-pin-latido 1.4s ease-in-out infinite; }

@keyframes mp-pin-latido {
  0%, 100% { box-shadow: 0 0 0 1.5px rgba(15,23,42,.9), 0 2px 6px rgba(15,23,42,.45), 0 0 0 0 var(--mp-pin-color); }
  50%      { box-shadow: 0 0 0 1.5px rgba(15,23,42,.9), 0 2px 6px rgba(15,23,42,.45), 0 0 0 7px transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .mp-pin-urgent .mp-pin-disc { animation: none; }
  .mp-pin { transition: none; }
}

/* Foco de ignición: llama sin disco, porque el emoji ya es brillante y opaco.
   Sólo necesita separarse del fondo y latir de verdad — la animación que
   llevaba antes ('pulse') no estaba definida en ninguna hoja de estilo. */
.mp-llama {
  font-size: 32px;
  line-height: 1;
  filter: drop-shadow(0 0 5px #7f1d1d) drop-shadow(0 0 14px #ff2200);
  animation: mp-llama-latido 1.1s ease-in-out infinite alternate;
}
@keyframes mp-llama-latido {
  from { transform: scale(var(--mp-icon-scale, 1)); }
  to   { transform: scale(calc(var(--mp-icon-scale, 1) * 1.14)); }
}

/* Flechas de la ruta de evacuación. */
.mp-flecha-evac {
  color: #22ff88;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  /* Contorno oscuro además del resplandor: sobre la ortofoto clara del secano
     un verde con sombra verde desaparece. */
  text-shadow:
    0 0 3px rgba(15, 23, 42, .95),
    0 0 12px #00ff66;
}
.mp-flecha-evac::after { content: ''; }

@media (prefers-reduced-motion: reduce) {
  .mp-llama { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MODO DE COLOCACIÓN · el clic debe atravesar las capas

   Al situar un peatón, un foco de ignición o un punto objetivo, el clic tiene
   que llegar al mapa. Sobre él hay capas vectoriales interactivas —red
   eléctrica, zonas de riesgo, cauces, perímetros de exclusión— que en Leaflet
   capturan el evento e impiden que el mapa lo reciba.

   Medido sobre una malla de 2.420 puntos del término, sólo el 25 % de la
   superficie aceptaba el clic: el resto caía sobre alguna capa y no ocurría
   nada, de modo que situar un peatón dependía de acertar un hueco entre líneas.

   Mientras dura la colocación se desactivan los eventos de puntero en los
   paneles de superposición. Al terminar se restituyen, de modo que las fichas
   informativas y el arrastre de los peatones siguen funcionando igual.
   ══════════════════════════════════════════════════════════════════════════ */
/* Se apunta a los elementos que Leaflet marca como interactivos, NO sólo a sus
   paneles: la hoja de Leaflet declara `.leaflet-interactive { pointer-events:
   auto }`, y esa regla en el hijo gana sobre el `none` heredado del panel. */
.leaflet-container.mp-modo-colocar .leaflet-overlay-pane,
.leaflet-container.mp-modo-colocar .leaflet-marker-pane,
.leaflet-container.mp-modo-colocar .leaflet-shadow-pane,
.leaflet-container.mp-modo-colocar .leaflet-interactive,
.leaflet-container.mp-modo-colocar .leaflet-marker-icon,
.leaflet-container.mp-modo-colocar .leaflet-overlay-pane svg,
.leaflet-container.mp-modo-colocar .leaflet-overlay-pane path,
.leaflet-container.mp-modo-colocar .leaflet-popup-pane,
.leaflet-container.mp-modo-colocar .leaflet-popup,
.leaflet-container.mp-modo-colocar .leaflet-popup-tip,
.leaflet-container.mp-modo-colocar .leaflet-popup-content-wrapper,
.leaflet-container.mp-modo-colocar .leaflet-tooltip {
  pointer-events: none !important;
}

/* Señal visual de que el mapa está esperando un clic. */
.leaflet-container.mp-modo-colocar {
  cursor: crosshair !important;
}