body, html {
    margin          : 0;
    padding         : 0;
    height          : 100%;
    display         : flex;  /* <-- ESTO ES CLAVE */
    font-family     : 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #121212;
}

#map {
    height    : 100vh;
    width     : 75vw;
    z-index   : 1;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* <-- LA ANIMACIÓN SUAVE */
}

#panel {
    width           : 25vw;
    height          : 100vh;
    background-color: #1a1a1a;
    border-left     : 1px solid #333;
    padding         : 20px;
    box-sizing      : border-box;
    overflow-y      : auto;
    color           : #fff;
}

.alerta-card {
    background   : #2d2d2d; 
    border-left  : 5px solid #ffaa00; /* Severidad por defecto */
    border-right : 5px solid #777777; /* Tipo por defecto */
    padding      : 15px;
    margin-bottom: 15px;
    border-radius: 4px;
    box-shadow   : 0 4px 6px rgba(0,0,0,0.3);
    transition   : all 0.3s ease;
}

/* --- BANDA IZQUIERDA (SEVERIDAD / ESTADO) --- */
.estado-pre-alerta { 
    border-left-color: #ffaa00; 
}

.estado-confirmado { 
    border-left-color: #ff2222; 
    box-shadow       : -5px 0 15px -5px rgba(255, 34, 34, 0.5); 
}

/* --- BANDA DERECHA (TIPO DE EVENTO) --- */
.tipo-fuego     { border-right-color: #ff4444; }
.tipo-agua      { border-right-color: #4488ff; }
.tipo-alud      { border-right-color: #8b4513; }
.tipo-avalancha { border-right-color: #ffffff; }

.legend-card {
    background   : #2d2d2d; 
    border-left  : 5px solid #00ff00;
    padding      : 15px; 
    border-radius: 4px;
    box-shadow   : 0 4px 6px rgba(0,0,0,0.3);
    color        : #eee;
    margin-bottom: 15px;
}

.stat {
    font-size  : 1.2em;
    font-weight: bold;
    color      : #ffd700;
}

.titulo-evento {
    text-transform: uppercase;
    margin        : 0; 
    font-size     : 0.95em; 
    font-weight   : bold;
}

.subtitulo-evento { 
    margin     : 2px 0 0 0;
    font-size  : 0.8em; 
    color      : #aaaaaa;
    font-family: monospace;
}

/* Controles Tácticos */
#tactical-controls {
    position      : absolute;
    bottom        : 20px;
    left          : 37.5%;
    transform     : translateX(-50%);
    z-index       : 1000;
    display       : flex;
    flex-direction: column;
    gap           : 15px;
    background    : rgba(30, 30, 30, 0.9);
    padding       : 15px 25px;
    border-radius : 8px;
    box-shadow    : 0 4px 6px rgba(0, 0, 0, 0.5);
    border        : 1px solid #444;
    font-weight   : bold;
    align-items   : center;
    width         : max-content; 
}

.control-row {
    display        : flex;
    flex-direction : row;
    gap            : 25px;
    align-items    : center;
    justify-content: center;
    width          : 100%;
}

.control-group {
    display    : flex;
    align-items: center; 
}

.ctrl-btn {
    background-color: #222;
    color           : #aaa;
    border          : 1px solid #444;
    padding         : 6px 12px;
    border-radius   : 4px;
    cursor          : pointer;
    transition      : all 0.2s;
    font-weight     : bold;
    margin-right    : 5px;
}

.ctrl-btn:hover {
    background-color: #333;
}

.ctrl-btn.active {
    background-color: #ff4444;
    color           : #fff;
    border-color    : #cc0000;
    box-shadow      : 0 0 8px rgba(255, 68, 68, 0.5);
}

#status-panel {
    display       : inline-block;
    cursor        : help;
    font-size     : 1.2em;
    line-height   : 1;
    vertical-align: middle;
}

/* Animación táctica de viento */
.icono-tactico-transparente {
    background: transparent;
    border: none;
}

.wind-container {
    width          : 40px;
    height         : 40px;
    display        : flex;
    justify-content: center;
    align-items    : center;
    pointer-events : none; 
}

.wind-arrow-svg {
    filter: drop-shadow(0px 4px 6px rgba(0,255,255,0.6));
}

@keyframes blowWind {
    0%   { transform: translateY(15px) scale(0.6); opacity: 0; }
    30%  { opacity  : 1; }
    70%  { opacity  : 1; }
    100% { transform: translateY(-15px) scale(1.1); opacity: 0; }
}

/* Estilos para Popups Desacoplados */
.leaflet-popup-content-wrapper {
    background   : #1e1e1e !important;
    color        : #fff !important;
    border       : 1px solid #444;
    border-radius: 8px;
    box-shadow   : 0 5px 15px rgba(0,0,0,0.7); 
}

.leaflet-popup-tip {
    background: transparent !important; 
}

.cam-feed-container {
    width      : 320px;
    font-family: 'Segoe UI', Tahoma, sans-serif;
}

.cam-feed-header {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    border-bottom  : 1px solid #444;
    padding-bottom : 8px;
    margin-bottom  : 8px;
}

.cam-title {
    margin   : 0;
    font-size: 1.1em;
    color    : #a1ffff;
}

.live-badge {
    background-color: #ff4444;
    color           : white;
    padding         : 2px 6px;
    border-radius   : 3px;
    font-size       : 0.7em;
    font-weight     : bold;
    animation       : blink 1.5s infinite;
}

@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }

/* --- VENTANAS FLOTANTES (DRAG & RESIZE) --- */
.ventana-flotante {
    position      : absolute;
    z-index       : 9999;
    background    : #1e1e1e;
    border        : 1px solid #555;
    border-radius : 8px;
    box-shadow    : 0 10px 25px rgba(0,0,0,0.8);
    color         : #fff;
    
    /* 1. ACÁ CAMBIAS EL TAMAÑO INICIAL (Lo bajé para que sea más chica) */
    width         : 280px;  /* Antes: 350px */
    height        : 200px; /* Antes: 250px */
    
    /* También achicamos el tope de qué tan chiquita se puede hacer */
    min-width     : 200px;
    min-height    : 150px;
    
    resize        : both;
    overflow      : hidden;
    display       : flex;
    flex-direction: column;

    /* 2. LA SOLUCIÓN AL MOUSE: Le agregamos un 'zócalo' abajo de 15px 
       para que el tirador de redimensionar tenga su propia zona segura
       aislada del video */
    padding-bottom: 12px;
}

.ventana-header {
    background     : #2a2a2a;
    padding        : 8px 12px;
    border-bottom  : 1px solid #444;
    cursor         : grab;
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    user-select    : none;
}

.ventana-header:active {
    cursor: grabbing;
}

.ventana-body {
    flex-grow : 1;
    display   : flex;
    position  : relative; /* Para poner el escudo encima del iframe */
    background: #000;
}

.ventana-body iframe, .ventana-body img {
    width : 100%;
    height: 100%;
    border: none;
}

/* Este escudo evita que el video bloquee el mouse al mover la ventana */
.iframe-shield {
    position: absolute;
    top     : 0;
    left    : 0;
    right   : 0;
    bottom  : 0;
    z-index : 10;
    display : none; 
}

.ventana-flotante.arrastrando .iframe-shield {
    display: block; /* Se activa solo al mover */
}

.btn-cerrar {
    color      : #ff4444;
    cursor     : pointer;
    font-weight: bold;
    font-family: sans-serif;
    padding    : 0 5px;
}

.btn-cerrar:hover {
    color    : #ff0000;
    transform: scale(1.1);
}

/* Cuando el body tenga esta clase, el mapa se comprime */
body.nvr-abierto #map {
    width: 55vw; 
}

/* --- PANEL NVR (Modo Push) --- */
#nvr-panel {
    width           : 0; /* Cerrado por defecto */
    height          : 100vh;
    background-color: #151515;
    box-sizing      : border-box;
    overflow-x      : hidden; /* Oculta el contenido al cerrarse */
    overflow-y      : auto;
    transition      : all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity         : 0;
    padding         : 15px 0; /* Quitamos padding horizontal cerrado para que no ocupe espacio */
    border-right    : none;
}

#nvr-panel.open {
    width       : 20vw; /* Se expande */
    padding     : 15px; /* Recupera su espacio interior */
    border-right: 1px solid #444;
    opacity     : 1;
}

#nvr-grid {
    display       : flex;
    flex-direction: column;
    gap           : 15px;
}

/* --- MODO DOCKED (ANCLADO EN EL NVR) --- */
.ventana-flotante.docked {
    position    : relative !important;
    width       : 100% !important;
    height      : 220px !important;
    left        : 0 !important; 
    top         : 0 !important;
    resize      : none !important; /* No se puede redimensionar en el NVR */
    box-shadow  : 0 4px 6px rgba(0,0,0,0.5);
    border-color: #a1ffff;
}

/* ============================================================================
   🎯 MÓDULO C4ISR: LUPA TÁCTICA, BOTONERA Y ACORDEÓN DE TARJETAS
   ============================================================================ */

/* --- BOTONERA TÁCTICA EN LA TARJETA --- */
.btn-accion {
    background   : #333;
    border       : 1px solid #555;
    color        : white;
    padding      : 4px 8px;
    cursor       : pointer;
    border-radius: 4px;
    font-size    : 12px;
    transition   : 0.2s;
    font-weight  : bold;
}

.btn-accion:hover {
    background: #555;
    transform : scale(1.1);
}

.btn-ack { color: #00ff00; }
.btn-zoom { color: #00aaff; }
.btn-ign { color: #ff4444; }

.btn-satelite { 
    color: #ffaa00; 
    border-color: #ffaa00; 
}
.btn-satelite:hover {
    background: #ffaa00;
    color: #000;
}

/* Efecto visual cuando el operador marca como "Recibido" (Ack) */
.alerta-card.ack-estado {
    border-left: 5px solid #00ff00;
    opacity    : 0.5;
    filter     : grayscale(50%);
}

/* Etiqueta del Satélite en la Lupa */
#lupa-label {
    position      : absolute;
    bottom        : 30px;
    left          : 50%;
    transform     : translateX(-50%);
    background    : rgba(0, 0, 0, 0.8);
    padding       : 4px 12px;
    border-radius : 15px;
    font-family   : monospace;
    font-size     : 13px;
    font-weight   : bold;
    z-index       : 10001;
    pointer-events: none;
    white-space   : nowrap;
    box-shadow    : 0 2px 5px rgba(0,0,0,0.5);
}

/* --- LUPA SATELITAL PICTURE-IN-PICTURE (PiP) --- */
#lupa-satelital {
    display        : none;
    position       : absolute;
    top            : 80px;
    left           : 20px;
    width          : 350px;
    height         : 350px;
    border-radius  : 50%;
    border         : 4px solid #00aaff;
    box-shadow     : 0 0 30px rgba(0, 170, 255, 0.5), inset 0 0 20px rgba(0,0,0,1);
    z-index        : 9999;
    overflow       : hidden;
    background     : #000;
    backdrop-filter: blur(5px);
}

/* El símbolo '+' en el centro de la mira del láser */
#lupa-satelital::after {
    content       : '+';
    position      : absolute;
    top           : 50%;
    left          : 50%;
    transform     : translate(-50%, -50%);
    color         : rgba(0, 255, 0, 0.4);
    font-size     : 24px;
    pointer-events: none;
    z-index       : 10000;
}

/* --- SISTEMA DE ACORDEÓN PARA TARJETAS (Despliegue) --- */
.detalle-alerta {
    display    : none;
    margin-top : 10px;
    border-top : 1px solid #444;
    padding-top: 10px;
}

.alerta-card.desplegada .detalle-alerta {
    display: block; 
}

.titulo-evento {
    cursor     : pointer;
    user-select: none;
}

.titulo-evento::before {
    content  : "▼ ";
    font-size: 0.7em;
    color    : #888;
}

.alerta-card.desplegada .titulo-evento::before { 
    content: "▲ "; 
}

/* Estado activo del botón de prueba */
.btn-satelite.active {
    background: #ffaa00;
    color: #000;
    box-shadow: 0 0 10px rgba(255, 170, 0, 0.8);
}