/* Estilos Premium para Geolocalización Operativa */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Inter', sans-serif;
    background-color: #0f172a;
    color: #f8fafc;
}

#map {
    height: 100%;
    width: 100%;
    z-index: 1;
}

.leaflet-popup-content-wrapper {
    background-color: #1e293b;
    color: #f8fafc;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

.leaflet-popup-tip {
    background-color: #1e293b;
}

.leaflet-container a {
    color: #38bdf8;
}

/* Custom Marker CSS para animaciones de Pinging en Alertas */
.marker-alert {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.marker-alert .ping {
    position: absolute;
    width: 24px;
    height: 24px;
    background-color: #ef4444;
    border-radius: 50%;
    animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
    opacity: 0.75;
}

.marker-alert .dot {
    position: relative;
    width: 12px;
    height: 12px;
    background-color: #ef4444;
    border-radius: 50%;
    z-index: 2;
}

@keyframes ping {
    75%, 100% {
        transform: scale(3);
        opacity: 0;
    }
}

/* Scrollbar personalizada para el panel */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* Scanline overlay for tactical HUD */
.scanline {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        rgba(18, 16, 16, 0) 50%, 
        rgba(0, 0, 0, 0.2) 50%
    );
    background-size: 100% 4px;
    z-index: 10;
    pointer-events: none;
}

.scanline::before {
    content: '';
    display: block;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(16, 185, 129, 0) 0%, rgba(16, 185, 129, 0.08) 10%, rgba(16, 185, 129, 0) 11%);
    animation: scanline-move 6s linear infinite;
    pointer-events: none;
}

@keyframes scanline-move {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

/* Static noise animation */
.static-noise {
    position: absolute;
    inset: 0;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 5;
}

/* Route animations for drone path */
@keyframes dash {
    to {
        stroke-dashoffset: -40;
    }
}
.route-animation {
    animation: dash 2s linear infinite;
}

/* Cursor de mira para captura de coordenadas en el mapa */
.map-pick-cursor {
    cursor: crosshair !important;
}

.map-pick-cursor .leaflet-grab {
    cursor: crosshair !important;
}

.map-pick-cursor .leaflet-interactive {
    cursor: crosshair !important;
}

/* Estilo táctico para las etiquetas de sectores en el mapa */
.sector-map-label {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: rgba(148, 163, 184, 0.7) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    pointer-events: none !important;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.9) !important;
}

/* Ocultar flecha del tooltip por defecto de Leaflet */
.sector-map-label::before {
    display: none !important;
}