/* css/carousel.css - ARCHIVO PRINCIPAL DEL CARRUSEL MODULAR CORREGIDO */

/* ===== IMPORTACIONES DE MÓDULOS BASE ===== */
@import url('carousel/carousel-base.css');
@import url('carousel/carousel-slides.css');
@import url('carousel/carousel-navigation.css');

/* ===== IMPORTACIONES DE SLIDES ESPECÍFICOS ===== */
@import url('carousel/slides/slide-instructors.css');
@import url('carousel/slides/slide-curriculum.css');
@import url('carousel/slides/slide-importance.css');
@import url('carousel/slides/slide-audience.css');
@import url('carousel/slides/slide-includes.css');
@import url('carousel/slides/slide-objectives.css');

@import url('carousel/carousel-responsive.css');

/* ===== CORRECCIÓN FONDO BLANCO - RESPONSIVE GENERAL DEL CARRUSEL ===== */
@media (max-width: 768px) {

    /* Carrusel principal sin padding-bottom excesivo */
    .carousel-container {
        padding-bottom: 20px !important;
        /* Reducido de 90px a 20px */
        box-sizing: border-box;
        background: var(--gray-100);
        /* Asegurar fondo consistente */
        min-height: calc(100vh - 70px);
        /* Altura mínima sin espacios */
    }

    /* Sección del carrusel sin espacios blancos */
    .carousel-section {
        background: var(--gray-100) !important;
        /* Fondo consistente */
        min-height: calc(100vh - 70px) !important;
        padding: 0 !important;
        /* Sin padding que genere espacios blancos */
        margin: 0 !important;
        /* Sin márgenes que generen espacios blancos */
        overflow: hidden;
        /* Evitar scroll innecesario */
    }

    /* Slides sin espacios blancos */
    .carousel-slides {
        min-height: calc(100vh - 140px);
        /* Altura ajustada sin espacios */
        margin-bottom: 0 !important;
        /* Sin margen inferior */
        background: var(--gray-100);
        /* Fondo consistente */
    }

    .carousel-slides-wrapper {
        min-height: calc(100vh - 140px);
        background: var(--gray-100);
        /* Fondo consistente */
    }

    .carousel-slide {
        min-height: calc(100vh - 140px);
        background: var(--gray-100);
        /* Fondo consistente */
    }

    .carousel-slide.active,
    .carousel-slide.current {
        min-height: calc(100vh - 140px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: var(--gray-100);
        /* Fondo consistente */
    }

    /* Contenido del slide sin espacios excesivos */
    .slide-content {
        padding-bottom: 10px !important;
        /* Reducido de 20px a 10px */
        max-height: calc(100vh - 200px);
        background: var(--gray-100);
        /* Fondo consistente */
    }

    /* Navegación posicionada sin generar espacios blancos */
    .carousel-nav {
        position: sticky !important;
        bottom: 10px !important;
        /* Más cerca del contenido */
        margin: 10px auto 0 !important;
        /* Margen reducido */
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        border-radius: 25px !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
        z-index: 1000 !important;
    }
}

@media (max-width: 480px) {
    .carousel-container {
        padding-bottom: 15px !important;
        /* Aún más reducido */
        min-height: calc(100vh - 60px);
        /* Ajustado para móvil pequeño */
    }

    .carousel-section {
        min-height: calc(100vh - 60px) !important;
    }

    .carousel-slides {
        min-height: calc(100vh - 120px);
    }

    .carousel-slides-wrapper {
        min-height: calc(100vh - 120px);
    }

    .carousel-slide {
        min-height: calc(100vh - 120px);
    }

    .carousel-slide.active,
    .carousel-slide.current {
        min-height: calc(100vh - 120px);
    }

    .slide-content {
        max-height: calc(100vh - 180px);
        padding-bottom: 5px !important;
        /* Mínimo padding */
    }

    .carousel-nav {
        bottom: 5px !important;
        margin: 5px auto 0 !important;
    }
}

/* ===== AJUSTES PARA PANTALLAS GRANDES - SIN CAMBIOS ===== */
@media (min-width: 1200px) {
    .slide-content {
        max-height: calc(100vh - 180px);
    }
}

@media (min-width: 1400px) {
    .slide-content {
        max-height: calc(100vh - 160px);
        padding: 16px 20px 65px;
    }

    .slide-title {
        font-size: 1.25rem;
        padding: 18px 20px 14px;
    }
}

@media (min-width: 1600px) {
    .slide-title {
        font-size: 1.35rem;
    }
}

@media (min-width: 1920px) {
    .slide-title {
        font-size: 1.45rem;
        padding: 22px 24px 18px;
    }
}

/* ===== LANDSCAPE MÓVIL - CORREGIDO ===== */
@media (max-height: 500px) and (orientation: landscape) {
    .carousel-section {
        min-height: 100vh;
        background: var(--gray-100) !important;
    }

    .carousel-container {
        padding-bottom: 10px !important;
        /* Mínimo en landscape */
    }

    .carousel-slides,
    .carousel-slides-wrapper {
        min-height: calc(100vh - 50px);
        /* Ajustado para landscape */
    }

    .carousel-slide,
    .carousel-slide.active,
    .carousel-slide.current {
        min-height: calc(100vh - 50px);
    }

    .slide-content {
        max-height: calc(100vh - 80px);
        padding-bottom: 5px !important;
    }

    .carousel-nav {
        bottom: 5px !important;
        margin: 5px auto 0 !important;
    }
}

/* ===== MEJORAS DE PERFORMANCE ===== */
.carousel-slide {
    contain: layout style;
    will-change: transform, opacity;
}

.carousel-slides-wrapper {
    contain: layout style;
    transform: translateZ(0);
    /* Forzar capa de composición */
}

@media (max-width: 768px) {
    .carousel-slide {
        contain: layout style paint;
    }
}

/* ===== ESPECÍFICO PARA CHROME MÓVIL - CORREGIDO ===== */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
    @media (max-width: 768px) {
        .carousel-section {
            background: var(--gray-100) !important;
            padding-bottom: 0 !important;
            /* Sin padding que genere espacios */
        }

        .carousel-container {
            padding-bottom: 15px !important;
            /* Mínimo para Chrome */
            background: var(--gray-100) !important;
        }

        .carousel-nav {
            position: fixed !important;
            bottom: 10px !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
            z-index: 1001 !important;
            margin: 0 !important;
        }
    }
}

/* ===== CORRECCIÓN EXTENSIÓN DE FONDO ===== */
@media (max-width: 768px) {

    /* Asegurar que el fondo se extienda completamente */
    .carousel-section::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100px;
        /* Extender el fondo más allá del viewport */
        background: var(--gray-100);
        z-index: -1;
    }

    /* Carrusel container con fondo extendido */
    .carousel-container::after {
        content: '';
        position: absolute;
        bottom: -50px;
        /* Extender hacia abajo */
        left: 0;
        right: 0;
        height: 100px;
        background: var(--gray-100);
        z-index: -1;
    }
}

/* ===== MODO COMPACTO PARA ESPACIOS REDUCIDOS ===== */
.carousel-container.compact {
    padding-bottom: 10px !important;
}

.carousel-container.compact .carousel-nav {
    margin: 5px auto 0 !important;
    padding: 8px 12px !important;
}

/* ===== ESTADO DE LOADING ===== */
.carousel-container.loading {
    background: var(--gray-100);
    min-height: calc(100vh - 70px);
}

.carousel-container.loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 3px solid var(--gray-300);
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* ===== ACCESIBILIDAD ===== */
@media (prefers-reduced-motion: reduce) {
    .carousel-container.loading::before {
        animation: none;
    }
}

/* ===== MODO ALTO CONTRASTE ===== */
@media (prefers-contrast: high) {

    .carousel-section,
    .carousel-container,
    .carousel-slides,
    .carousel-slide {
        background: white !important;
        border: 1px solid black;
    }
}