/* ==========================================
   CSS NOC OPERACIONAL - TAIWAN & TAILWIND
   ========================================== */

:root {
    --bg-cockpit: #020617; 
    --bg-cards: #0f172a; 
    --bg-hover: #1e293b; 
    --borda: #334155; 
    --txt-title: #f8fafc; 
    --txt-body: #94a3b8; 
}

/* O SEGREDO FOI RESOLVIDO AQUI: overflow-y: auto e min-height */
body { 
    min-height: 100vh; 
    overflow-x: hidden;
    overflow-y: auto; 
    color: var(--txt-body); 
    font-size: 14px; 
    background-color: var(--bg-cockpit);
}

h1, h2, h3 { color: var(--txt-title); }

.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: var(--bg-cockpit); }
.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--borda); border-radius: 10px; }

/* Estilização Profissional do Mapa Leaflet */
#mapa-container { height: 100%; width: 100%; background-color: var(--bg-cockpit); z-index: 10; }
.leaflet-container { font-family: sans-serif; }

.leaflet-control-zoom-in, .leaflet-control-zoom-out, .leaflet-control-layers-toggle {
    background-color: var(--bg-cards) !important;
    color: var(--txt-body) !important;
    border: 1px solid var(--borda) !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    transition: all 0.2s;
}
.leaflet-control-zoom-in:hover, .leaflet-control-zoom-out:hover, .leaflet-control-layers-toggle:hover {
    background-color: var(--bg-hover) !important; color: white !important;
}

/* PINOS SASKI */
.pino-base { display: flex; align-items: center; justify-content: center; border: 2px solid rgba(255,255,255,0.8); box-shadow: 0 4px 6px rgba(0,0,0,0.5); color: white; text-shadow: 0px 1px 2px rgba(0,0,0,0.8); z-index: 1000; }
.forma-celula { width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.forma-celula span { transform: rotate(45deg); font-weight: bold; font-size: 13px; }
.forma-micro { width: 28px; height: 28px; border-radius: 6px; }
.forma-micro span { font-weight: bold; font-size: 13px; }
.forma-cto { width: 26px; height: 26px; border-radius: 50%; }
.forma-cto span { font-weight: bold; font-size: 12px; }
.pino-vermelho { background-color: #ef4444; }
.pino-verde { background-color: #10b981; }

/* Tooltip Limpo */
.leaflet-tooltip.custom-dark-tooltip { background: transparent; border: none; box-shadow: none; padding: 0; }
.leaflet-popup.custom-dark-tooltip { background: transparent; border: none; box-shadow: none; padding: 0; }

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.animate-slideUp { animation: slideUp 0.3s ease-out forwards; }