/* =========================================
   1. VARIABLES DE COLOR Y TEMA
========================================= */
:root {
    /* MODO CLARO */
    --bg-color: #e0e5ec;
    --text-principal: #334155;
    --text-secundario: #64748b;
    --color-acento: #0f172a;
    --color-exito: #24BF9C; /* Verde Menta */
    --color-alerta: #E3D11B; /* Amarillo Ocre */
    --color-peligro: #e74c3c;
    --sombra-clara: rgba(255, 255, 255, 0.7);
    --sombra-oscura: rgba(163, 177, 198, 0.6);
}

/* MODO OSCURO (Controlado por JavaScript) */
body.dark-mode {
    --bg-color: #1e293b;
    --text-principal: #f8fafc;
    --text-secundario: #cbd5e1;
    --color-acento: #3b82f6;
    --sombra-clara: rgba(51, 65, 85, 0.5);
    --sombra-oscura: rgba(15, 23, 42, 0.8);
}

/* =========================================
   2. ESTILOS GLOBALES
========================================= */
body {
    background-color: var(--bg-color);
    color: var(--text-principal);
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 20px;
    transition: background-color 0.3s, color 0.3s;
}

h1, h2, h3 { color: var(--text-principal); }
p, small { color: var(--text-secundario); }

/* =========================================
   3. COMPONENTES NEUMÓRFICOS (CLASES)
========================================= */
.neo-tarjeta {
    background-color: var(--bg-color);
    border-radius: 15px;
    padding: 25px;
    box-shadow: 9px 9px 16px var(--sombra-oscura), 
               -9px -9px 16px var(--sombra-clara);
    /* Agregamos una transición suave para el hover */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Efecto mágico al pasar el ratón */
.neo-tarjeta:hover {
    transform: translateY(-4px); /* Se levanta un poco */
    box-shadow: 12px 12px 20px var(--sombra-oscura), 
               -12px -12px 20px var(--sombra-clara); /* Sombra más amplia */
}

.neo-input {
    width: 100%;
    background-color: var(--bg-color);
    color: var(--text-principal);
    border: none;
    padding: 12px 15px;
    border-radius: 10px;
    margin-bottom: 15px;
    box-sizing: border-box;
    box-shadow: inset 6px 6px 10px var(--sombra-oscura), 
                inset -6px -6px 10px var(--sombra-clara);
    outline: none;
}
.neo-input:focus { border: 1px solid var(--color-acento); }

.neo-boton {
    width: 100%;
    background-color: var(--bg-color);
    color: var(--color-acento);
    font-weight: bold;
    border: none;
    padding: 12px 20px;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 6px 6px 10px var(--sombra-oscura), 
               -6px -6px 10px var(--sombra-clara);
    transition: all 0.2s ease-in-out;
}
.neo-boton:active, .neo-boton.activo {
    /* Efecto de hundirse y quedarse presionado */
    box-shadow: inset 4px 4px 8px var(--sombra-oscura), 
                inset -4px -4px 8px var(--sombra-clara);
    color: var(--color-acento);
}

/* Ocultar barra de scroll en las pestañas */
.scroll-invisible::-webkit-scrollbar { display: none; }
.scroll-invisible { scrollbar-width: none; }

/* =========================================
   4. BARRAS DESLIZABLES (SLIDERS)
========================================= */
input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
}
input[type=range]:focus {
    outline: none;
}
/* El "carril" de la barra (Hundido) */
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 12px;
    background: var(--bg-color);
    border-radius: 10px;
    box-shadow: inset 4px 4px 6px var(--sombra-oscura), 
                inset -4px -4px 6px var(--sombra-clara);
}
/* La "bolita" de la barra (Sobresaliente y sin bordes oscuros) */
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background: var(--bg-color);
    border: none; 
    cursor: pointer;
    margin-top: -6px;
    box-shadow: 4px 4px 6px var(--sombra-oscura), 
               -4px -4px 6px var(--sombra-clara);
}

/* =========================================
   5. MODALES NATIVOS SPA
========================================= */
.neo-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(3px);
    display: none; justify-content: center; align-items: center; z-index: 9999;
}

.neo-modal {
    width: 90%; max-width: 650px; max-height: 85vh; overflow-y: auto;
    scrollbar-width: none; 
}
.neo-modal::-webkit-scrollbar { display: none; }

/* =========================================
   6. BOTONES DE ACCIÓN ESPECÍFICOS
========================================= */

/* Botón X rojo para cerrar modales */
.neo-cerrar {
    position: absolute; top: 15px; right: 15px;
    width: 35px; height: 35px; border-radius: 50%;
    background-color: var(--bg-color); color: var(--color-peligro);
    border: none; font-weight: bold; cursor: pointer;
    box-shadow: 4px 4px 8px var(--sombra-oscura), -4px -4px 8px var(--sombra-clara);
    display: flex; justify-content: center; align-items: center; transition: 0.2s;
}
.neo-cerrar:active {
    box-shadow: inset 4px 4px 8px var(--sombra-oscura), inset -4px -4px 8px var(--sombra-clara);
}

/* Estado activo para el botón de foto (se ve hundido y verde) */
.foto-activa {
    color: var(--color-exito) !important;
    box-shadow: inset 4px 4px 8px var(--sombra-oscura), inset -4px -4px 8px var(--sombra-clara) !important;
}

/* =========================================
   7. ADAPTACIÓN DE SWEETALERT AL TEMA Y Z-INDEX
========================================= */
/* Obligamos a que las alertas salgan SIEMPRE encima de nuestro modal */
div:where(.swal2-container) {
    z-index: 10000 !important; 
}

/* Forzamos el diseño Neumórfico y colores automáticos (Claro/Oscuro) */
div:where(.swal2-container) div:where(.swal2-popup) {
    background-color: var(--bg-color) !important;
    color: var(--text-principal) !important;
    border-radius: 15px !important;
    box-shadow: 9px 9px 16px var(--sombra-oscura), -9px -9px 16px var(--sombra-clara) !important;
}

/* Colores de texto automáticos para SweetAlert */
div:where(.swal2-container) h2:where(.swal2-title),
div:where(.swal2-container) div:where(.swal2-html-container) {
    color: var(--text-principal) !important;
}

/* =========================================
   8. MENÚ LATERAL (SIDEBAR) Y ESTRUCTURA PWA
========================================= */

/* Botón de Menú Hamburguesa (Para celulares) */
.btn-menu-movil {
    display: none; position: fixed; top: 15px; left: 15px; z-index: 9500;
    width: 45px; height: 45px; font-size: 20px; padding: 0;
}

/* El Contenedor del Menú Lateral */
.neo-sidebar {
    position: fixed; top: 0; left: 0; width: 260px; height: 100vh;
    background-color: var(--bg-color);
    box-shadow: 9px 0 16px var(--sombra-oscura);
    z-index: 9000; padding: 25px; box-sizing: border-box;
    /* display: flex;  <-- LO DESACTIVAMOS PORQUE EMPUJA LOS BOTONES ABAJO */
    /* flex-direction: column; <-- LO DESACTIVAMOS */
    transition: transform 0.3s ease-in-out;
    overflow-y: auto;
}

/* Le damos un margen fijo a la botonera principal para separar los iconos de abajo sin estirar nada */
#menu-navegacion {
    margin-bottom: 40px; 
}

/* Estilos de los links del menú */
.neo-nav-item {
    display: block; padding: 15px; margin-bottom: 15px;
    border-radius: 10px; color: var(--text-principal);
    text-decoration: none; font-weight: bold; text-align: left;
    background-color: var(--bg-color);
    box-shadow: 6px 6px 10px var(--sombra-oscura), -6px -6px 10px var(--sombra-clara);
    transition: 0.2s; cursor: pointer;
}
.neo-nav-item:active, .neo-nav-item.activo {
    color: var(--color-acento);
    box-shadow: inset 4px 4px 8px var(--sombra-oscura), inset -4px -4px 8px var(--sombra-clara);
}

/* Contenido Principal (Se empuja a la derecha en PC) */
.contenido-principal {
    margin-left: 260px; padding: 20px; transition: margin-left 0.3s ease;
}

/* Reglas Responsivas para Celulares/Tablets */
@media (max-width: 768px) {
    .btn-menu-movil { display: block; } /* Mostramos hamburguesa */
    .neo-sidebar { transform: translateX(-100%); } /* Ocultamos el menú a la izquierda */
    .neo-sidebar.abierto { transform: translateX(0); } /* Lo mostramos si tiene la clase abierto */
    .contenido-principal { margin-left: 0; padding-top: 70px; } /* El contenido ocupa toda la pantalla */
}

/* Oscurecer el fondo cuando el menú se abre en móvil */
.overlay-menu {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 8500;
}
.overlay-menu.activo { display: block; }

/* ==========================================
   ESTILOS DE IMPRESIÓN Y EXPORTACIÓN A PDF
================================================ */
@media print {
    body * { visibility: hidden; }
    #modal-ojo-dios, #modal-ojo-dios * { visibility: visible; }
    #modal-ojo-dios { 
        position: absolute; 
        left: 0; 
        top: 0; 
        width: 100%; 
        height: auto !important; 
        overflow: visible !important; 
        background: white !important;
        box-shadow: none !important;
    }
    /* Ocultamos botones y cosas que no sirven en papel */
    .neo-boton, .ph-x { display: none !important; }
    /* Quitamos el scroll para que el PDF imprima todas las fases hacia abajo */
    .scroll-invisible { overflow: visible !important; flex: none !important; height: auto !important; }
} /* <-- AQUÍ SE CIERRA CORRECTAMENTE EL @MEDIA PRINT */