/* ==========================================================================
   CUSTOM.CSS — Estilos Premium para la Plataforma LMS Ligera
   Colores, Glassmorphism, Micro-animaciones, Tipografía y Scroll Behavior
   ========================================================================== */

/* Importar Fuentes desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    /* Paleta Cromática Premium */
    --primary: #014880;          /* Deep Blue - Confianza e ingeniería */
    --primary-light: #0d63aa;
    --primary-dark: #00335c;
    --secondary: #1e293b;        /* Slate oscuro - Contraste alto */
    --accent: #b45309;           /* Dorado / Amber premium */
    --accent-light: #d97706;     /* Amber claro */
    --background: #f8fafc;       /* Gris ultra-claro */
    --card-bg: rgba(255, 255, 255, 0.85); /* Glassmorphism */
    --card-border: rgba(255, 255, 255, 0.4);
    
    /* Variables de Espaciado y Bordes */
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    
    /* Tipografía */
    --font-title: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-code: 'JetBrains Mono', monospace;
}

/* Reglas Generales */
html {
    scroll-behavior: smooth;
    background-color: var(--background);
    font-family: var(--font-body);
    color: var(--secondary);
}

body {
    background-color: var(--background);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-title);
}

/* Efecto Glassmorphism Premium */
.glass-panel {
    background: var(--card-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--card-border);
    box-shadow: 0 8px 32px 0 rgba(1, 72, 128, 0.05);
}

.glass-panel-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-panel-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px 0 rgba(1, 72, 128, 0.1);
    border-color: rgba(1, 72, 128, 0.15);
}

/* Degradados Premium */
.bg-gradient-premium {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}

.bg-gradient-premium-light {
    background: linear-gradient(135deg, rgba(1, 72, 128, 0.04) 0%, rgba(13, 99, 170, 0.02) 100%);
}

/* Animaciones y Transiciones */
.animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(30, 41, 59, 0.2);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(1, 72, 128, 0.4);
}

/* Estilos de Botones y Componentes del Player */
.btn-premium {
    font-family: var(--font-title);
    transition: all 0.2s ease-in-out;
}

.btn-premium:hover {
    transform: scale(1.02);
}

/* Sobrescribir estilos para integrar las lecciones del curso correctamente */
.lesson-content-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

/* Asegurar que las fuentes y estilos heredados del curso se apliquen en el visor */
.course-viewport {
    font-family: var(--font-body);
}

/* Estilos para el Sidebar del reproductor */
.sidebar-lms {
    border-right: 1px solid rgba(30, 41, 59, 0.08);
}