/* ==========================================================================
   MIA ADMIN - CORE DASHBOARD STYLES (v6.2)
   ========================================================================== */

:root { 
    --accent-color: #06b6d4; /* Cian Mérida */
    --pink-xray: #ec4899;    /* Rosa Neón */
}

/* --- 1. CONSOLA X-RAY Y UTILIDADES --- */
.x-ray-console { 
    font-family: 'Courier New', monospace; 
    background: #0a0a0a; 
    border: 1px solid #333; 
}

.status-blink { 
    animation: blink 2s infinite; 
}
@keyframes blink { 
    0%, 100% { opacity: 1; } 
    50% { opacity: 0.3; } 
}

/* Scrollbars para el Búnker (Estilo Dark) */
#chat-box::-webkit-scrollbar, 
#xray-logs::-webkit-scrollbar { 
    width: 4px; 
}
#chat-box::-webkit-scrollbar-thumb, 
#xray-logs::-webkit-scrollbar-thumb { 
    background: #1e293b; 
    border-radius: 10px; 
}

/* --- 2. MAPA GEO-ESPACIAL (LEAFLET OVERRIDES) --- */
.leaflet-container { 
    /* El background negro profundo ayuda con el efecto del invert en el HTML */
    background: #000 !important; 
    outline: none; 
}
.leaflet-control-attribution { 
    display: none; /* Limpiamos la atribución para look de Búnker */
}

/* Controles de Zoom Dark Mode en ROSA NEÓN */
.leaflet-control-zoom-in, 
.leaflet-control-zoom-out {
    background: #0f172a !important;
    color: var(--pink-xray) !important;
    border: 1px solid #831843 !important; /* Borde rosa oscuro */
    transition: all 0.3s ease;
}
.leaflet-control-zoom-in:hover, 
.leaflet-control-zoom-out:hover {
    background: #1e293b !important;
    box-shadow: 0 0 10px rgba(236,72,153,0.3);
}

/* Reset para inyectar nuestro pin personalizado */
.custom-div-icon {
    background: none !important;
    border: none !important;
}

/* --- 3. ANIMACIONES CYBERPUNK PARA EL AVATAR DE MIA --- */
@keyframes spin-gradient {
    0% { transform: rotate(0deg); opacity: 0.4; }
    50% { opacity: 1; filter: blur(5px); }
    100% { transform: rotate(360deg); opacity: 0.4; }
}

.cyber-spin-wrapper {
    position: relative; 
    width: 120px; 
    height: 120px; 
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    z-index: 10;
}

/* Aro exterior difuminado (Cian a Rosa) girando */
.cyber-spin-wrapper::before {
    content: ''; 
    position: absolute; 
    inset: -5px; 
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0%, #06b6d4 25%, #ec4899 50%, transparent 75%);
    animation: spin-gradient 2.5s ease-in-out infinite; 
    z-index: -1; 
    filter: blur(4px);
}

/* Aro interior preciso (Rosa a Cian) girando al revés */
.cyber-spin-wrapper::after {
    content: ''; 
    position: absolute; 
    inset: -2px; 
    border-radius: 50%;
    background: conic-gradient(from 180deg, transparent 0%, #ec4899 25%, #06b6d4 50%, transparent 75%);
    animation: spin-gradient 3s ease-in-out infinite reverse; 
    z-index: -1;
}

.cyber-avatar-bg {
    background-color: #0f172a; 
    border-radius: 50%; 
    padding: 3px;
    width: 100%; 
    height: 100%; 
    position: relative; 
    z-index: 1;
    box-shadow: inset 0 0 25px rgba(0,0,0,0.9);
}

/* Estilo para las burbujas de respuesta de MIA */
.mensaje-bot {
    background-color: #0f172a; /* Fondo oscuro (slate-900) */
    border-radius: 0.75rem;
    padding: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5); /* Sombra suave */
}

/* Magia para las separaciones entre eventos */
.mensaje-bot hr {
    border: none;
    border-top: 1px solid #334155; /* Línea sutil color slate */
    margin: 1.5rem 0; /* Espacio arriba y abajo */
}

/* ==========================================
   🎨 ESTILOS GLOBALES DEL ADMIN (Scroll y Mapas)
   ========================================== */
/* Custom Scrollbar para las 3 columnas */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #06b6d4; }

/* Animación suave para esconder/mostrar el mapa en los paneles */
#contenedor-mapa {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top;
}
.mapa-oculto {
    opacity: 0;
    height: 0 !important;
    margin-bottom: 0 !important;
    pointer-events: none;
    border: none !important;
}

/* ==========================================
   🧞‍♂️ EFECTO GENIE PARA EL MAPA DEL CHAT
   ========================================== */
#chat-map-container {
    /* Una curva bezier que da un pequeñísimo efecto de rebote elástico al abrir */
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); 
    transform-origin: top center; /* Hace que se despliegue desde arriba hacia abajo */
    overflow: hidden;
}

.mapa-genie-oculto {
    max-height: 0px !important;
    opacity: 0;
    transform: scaleY(0.8) translateY(-20px);
    margin-bottom: 0 !important;
    border-width: 0px !important;
    pointer-events: none; /* Evita que el usuario haga clic en fantasmas */
}

.mapa-genie-visible {
    max-height: 220px !important; /* La altura que ya tenías */
    opacity: 1;
    transform: scaleY(1) translateY(0);
    margin-bottom: 0.5rem !important;
    border-width: 1px !important;
}