/* ==========================================================================
   HOJA DE ESTILOS PRINCIPAL (ENTRY POINT)
   Ruta: public/css/main.css
   Descripción: Archivo central que importa todos los módulos CSS y define
                estilos/animaciones globales compartidas (como modales).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. IMPORTACIÓN DE MÓDULOS
   Nota: El orden es importante para la cascada (Base -> Layout -> Comp -> Pages).
   -------------------------------------------------------------------------- */

/* 1.1 Base (Variables y Normalización) */
@import url('base/variables.css');
@import url('base/general.css');

/* 1.2 Layout (Estructura global) */
@import url('layout/header.css');
@import url('layout/navigation.css');
@import url('layout/layout.css');
@import url('layout/footer.css');

/* 1.3 Componentes (Bloques reutilizables) */
@import url('components/buttons.css');
@import url('components/cards.css');
@import url('components/forms.css');

/* 1.4 Páginas (Estilos específicos por vista) */
@import url('pages/login.css');
@import url('pages/home.css');
@import url('pages/contacto.css');

/* 1.5 Páginas de Administración */
@import url('pages/adminDashboard.css');
@import url('pages/adminGestEventos.css');
@import url('pages/adminTablas.css');
@import url('pages/adminGestUsuarios.css');

/* --------------------------------------------------------------------------
   2. ANIMACIONES GLOBALES (KEYFRAMES)
   -------------------------------------------------------------------------- */

/* Aparición suave (Fade In) */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Efecto de entrada con escala y rebote suave (Pop Up) */
@keyframes scaleUp {
    from { 
        opacity: 0; 
        transform: scale(0.95) translateY(10px); 
    }
    to { 
        opacity: 1; 
        transform: scale(1) translateY(0); 
    }
}

/* --------------------------------------------------------------------------
   3. ESTILOS DE MODALES GLOBALES
   Descripción: Clases compartidas para todos los popups/ventanas emergentes.
   -------------------------------------------------------------------------- */

/* --- Contenedor/Fondo Oscuro (Overlay) --- */
/* Agrupación de todos los IDs de modales del sistema */
#modalEvento,
#modalUsuario,
#modal-inscripcion,
#modal-inscripcion-equipo,
#modal-unirse-equipo,
#modal-unirse-integrante,
.nav-overlay,
.modal-overlay {
    /* Animación de entrada */
    animation: fadeIn 0.3s ease-out forwards;
    
    /* Efecto de desenfoque del fondo (Glassmorphism) */
    backdrop-filter: blur(4px); 
    -webkit-backdrop-filter: blur(4px); /* Soporte Safari */
    
    /* Fondo semitransparente oscuro */
    background-color: rgba(0, 0, 0, 0.6) !important; 
}

/* --- Contenido del Modal (Caja Blanca) --- */
/* Clases de los contenedores internos */
.admin-modal-contenido,
.modal-contenido,
.modal-contenido-responsive,
#overlayModal {
    /* Animación de entrada (Pop up) */
    animation: scaleUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    
    /* Optimización de renderizado para animaciones suaves */
    will-change: transform, opacity; 
}