/* =========================================
   1. Tailwind Directives
   ========================================= */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* =========================================
   2. Global Variables (Colors & Settings)
   ========================================= */
:root {
    --color-primary: #007EA7;
    --color-primary-rgb: 0, 126, 167;
    --color-primary-vibrant-rgb: 0, 176, 232;
    --color-gold: #f8cd46;
    --transition-speed: 0.3s;
}

/* =========================================
   3. Base Styles & Typography
   ========================================= */
body {
    font-family: 'Lexend', sans-serif;
    @apply antialiased transition-colors duration-300 ease-in-out;
}

/* Configuración de Material Symbols (Iconos) */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* =========================================
   4. Component: Navigation & Dropdown
   ========================================= */
.group:hover .dropdown-menu {
    display: block;
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px) translateX(-50%); }
    to { opacity: 1; transform: translateY(0) translateX(-50%); }
}

/* =========================================
   5. Component: Custom Effects (Glows & Cards)
   ========================================= */
.photo-glow {
    box-shadow: 0 0 25px -5px rgba(var(--color-primary-rgb), 0.15);
}

.dark .photo-glow {
    box-shadow: 0 0 30px -5px rgba(var(--color-primary-rgb), 0.3);
}

.scholarly-accent {
    border-left: 4px solid var(--color-primary);
}

/* =========================================
   6. Component: Animations
   ========================================= */
@keyframes scale-in {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.icon-animate {
    animation: scale-in 0.5s ease-out forwards;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

.badge-float {
    animation: float 3s ease-in-out infinite;
}

/* =========================================
   7. Custom Scrollbar (Webkit)
   ========================================= */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    @apply bg-transparent;
}

::-webkit-scrollbar-thumb {
    @apply bg-orient-400 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-orient-600;
}

.dark ::-webkit-scrollbar-thumb {
    @apply bg-orient-700;
}

.dark ::-webkit-scrollbar-thumb:hover {
    @apply bg-orient-500;
}

/* =========================================
   8. Utility Helpers
   ========================================= */
.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, visibility;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: none;
}

/* =========================================
   9. Component: Calendly Widget
   ========================================= */
#calendly-widget {
    height: 500px !important;
}

@media (min-width: 1024px) {
    #calendly-widget {
        height: 600px !important;
    }
}

/* =========================================
   10. Glassmorphism System (Dark Mode)
   ========================================= */

/* FASE 0: Prerrequisito - Fondo base con profundidad lumínica sutil */
body.dark::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: radial-gradient(circle at 50% 0%, rgba(var(--color-primary-rgb), 0.04) 0%, transparent 60%);
    pointer-events: none;
    z-index: -1;
}

/* FASES 1 a 5: Definición de los 3 materiales glass (Surface Elevation System) */
@layer components {
    /* Nivel 1 (Zonas - La Plataforma): Contenedores base, Navegación y Footer */
    .glass-low {
        @apply backdrop-blur-sm bg-orient-950/80 ring-1 ring-white/5 shadow-md shadow-black/20 border-transparent;
    }

    /* Nivel 2 (Contenido - El Nivel Operativo): Tarjetas de proyectos, experiencia, etc. */
    .glass-mid {
        @apply backdrop-blur-md bg-orient-900/80 ring-1 ring-orient-300/10 shadow-lg shadow-black/40 border-transparent;
    }

    /* Nivel 3 (Flotante - La Capa Superior): Modales, Dropdowns, Tooltips y Badges */
    .glass-high {
        @apply backdrop-blur-lg bg-orient-800/90 ring-1 ring-orient-200/20 shadow-2xl shadow-black/60 border-transparent;
    }
}

/* =========================================
   11. Theme Transition (FASE 8 - Glassmorphism)
   ========================================= */
.theme-transitioning,
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
    transition-property: background-color, border-color, backdrop-filter, box-shadow, color !important;
    transition-duration: 400ms !important;
    transition-timing-function: ease-in-out !important;
}

/* =========================================
   12. Neon Accent System (Dark Mode Only)
   ========================================= */

/* Brillo sutil para iconos y badges (Foco puntual) */
.dark .neon-glow-sm {
    box-shadow: 0 0 15px rgba(var(--color-primary-vibrant-rgb), 0.3) !important;
}

/* Brillo medio para Botones CTA (Foco principal) */
.dark .neon-glow-md {
    box-shadow: 0 0 25px rgba(var(--color-primary-vibrant-rgb), 0.4) !important;
}

/* Sistema interactivo para Tarjetas Glassmorphism */
.dark .neon-glow-interactive {
    /* Múltiples propiedades para no destruir transform/opacity de AOS */
    transition-property: all !important;
    transition-duration: 400ms !important;
    transition-timing-function: ease-out !important;
    will-change: box-shadow, border-color; /* Aceleración por hardware (GPU) */
}

/* Estado encendido al pasar el cursor */
.dark .neon-glow-interactive:hover {
    /* Mantenemos el 'ring' (borde físico) apilando el resplandor en la variable shadow de Tailwind */
    --tw-shadow: 0 0 30px rgba(var(--color-primary-vibrant-rgb), 0.15);
    --tw-shadow-colored: 0 0 30px rgba(var(--color-primary-vibrant-rgb), 0.15);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;

    border-color: rgba(var(--color-primary-vibrant-rgb), 0.5) !important;
}