/* ========================================
   CRITICAL FIXES - VERSIÓN FINAL
   DEBE IR AL FINAL DE TODOS LOS CSS
   ======================================== */

@media (max-width: 768px) {

    /* === INDICADORES REMOVIDOS PARA PROGRESS BAR === */
    .carousel-indicators {
        display: none !important;
    }

    /* === ELIMINAR GRADIENTES COMPLETAMENTE === */
    .carousel-container::before,
    .carousel-container::after,
    .levels-carousel-container::before,
    .levels-carousel-container::after,
    .features-dashboard::before,
    .features-dashboard::after,
    .tech-stack-section::before,
    .tech-stack-section::after {
        content: none !important;
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* === FADE AGRESIVO EN BORDES === */
    .carousel-container .levels-grid,
    .carousel-container .features-grid,
    .carousel-container .tech-grid,
    .carousel-container .screenshots-grid,
    .levels-carousel-container .levels-grid {
        /* Fade más agresivo usando pixeles exactos */
        -webkit-mask-image: linear-gradient(to right,
                rgba(0, 0, 0, 0) 0px,
                rgba(0, 0, 0, 0.5) 10px,
                rgba(0, 0, 0, 1) 30px,
                rgba(0, 0, 0, 1) calc(100% - 30px),
                rgba(0, 0, 0, 0.5) calc(100% - 10px),
                rgba(0, 0, 0, 0) 100%) !important;

        mask-image: linear-gradient(to right,
                rgba(0, 0, 0, 0) 0px,
                rgba(0, 0, 0, 0.5) 10px,
                rgba(0, 0, 0, 1) 30px,
                rgba(0, 0, 0, 1) calc(100% - 30px),
                rgba(0, 0, 0, 0.5) calc(100% - 10px),
                rgba(0, 0, 0, 0) 100%) !important;

        /* Asegurar que el scroll funcione */
        overflow-x: scroll !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;

        /* Ocultar scrollbar */
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .carousel-container .levels-grid::-webkit-scrollbar,
    .carousel-container .features-grid::-webkit-scrollbar,
    .carousel-container .tech-grid::-webkit-scrollbar,
    .carousel-container .screenshots-grid::-webkit-scrollbar,
    .levels-carousel-container .levels-grid::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* === FIX CRÃ TICO: REDUCIR SPACING ENTRE SECCIONES === */
    .content>* {
        margin-bottom: 0 !important;
    }

    /* Spacing específico entre secciones */
    .hero-dashboard,
    .hero-section,
    .mission-section,
    .features-dashboard,
    .developer-section,
    .collaboration-section,
    .roadmap-section,
    .support-project-section,
    .tech-stack-section,
    .contact-section,
    .credits-section,
    .screenshots-section,
    .download-section,
    .requirements-section,
    .faq-section,
    .support-section {
        margin-bottom: 25px !important;
    }

    /* Espaciado interno de cards reducido */
    .level-card {
        padding: 20px 15px !important;
        margin-bottom: 0 !important;
    }

    /* Info banners con menos spacing */
    .info-banner {
        margin: 15px 0 !important;
        padding: 15px !important;
    }

    /* === NOTICE - CRITICAL HIDING RULES === */
    .notice {
        padding: 10px 12px !important;
        margin: 15px 0 15px 0 !important;
        font-size: 0.8rem !important;
        transition: all 0.3s ease !important;
        display: flex !important;
    }

    /* FORCE HIDE when logged in - MULTIPLE SELECTORS for reliability */
    body.user-logged-in .notice,
    .notice.hidden,
    .notice[style*="display: none"],
    body.user-logged-in .info-banner.notice {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
        pointer-events: none !important;
    }

    /* === CAROUSEL CONTAINER SPACING === */
    .levels-carousel-container {
        margin-top: 0px !important;
        margin-bottom: 0px !important;
        padding-bottom: 10px !important;
    }

    /* When notice is hidden, adjust description spacing */
    body.user-logged-in .description {
        margin-bottom: 15px !important;
    }

    body.user-logged-in .description+.levels-carousel-container {
        margin-top: 0px !important;
    }

    /* === FLASHCARD SECTION PROTECCIÓN === */
    .flashcard-section {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: relative !important;
        z-index: 10 !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
        margin-top: 15px !important;
        margin-bottom: 100px !important;
        padding: 0 15px !important;
    }

    .flashcard-section .level-card {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        pointer-events: all !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    .flashcard-section .level-card.special {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: relative !important;
    }

    /* === ASEGURAR OVERFLOW OCULTO EN CONTENEDORES === */
    body {
        overflow-x: hidden !important;
        padding-bottom: 30px !important;
    }

    .container {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        padding: 10px !important;
        padding-bottom: 40px !important;
    }

    .content {
        overflow-x: hidden !important;
        max-width: 100% !important;
        padding: 15px !important;
    }

    /* Adjust content padding when logged in */
    body.user-logged-in .content {
        padding-top: 15px !important;
    }

    .carousel-container,
    .levels-carousel-container {
        overflow: hidden !important;
        max-width: 100% !important;
        position: relative !important;
        margin-bottom: 0px !important;
    }

    /* === FIX CRÃ TICO: HEADER RESPONSIVE === */
    .header {
        padding: 12px 15px !important;
        margin-bottom: 0 !important;
    }

    .main-title {
        font-size: 1.3rem !important;
        line-height: 1.2 !important;
        text-align: center !important;
        padding: 8px 10px !important;
        word-wrap: break-word !important;
    }

    /* === TABS RESPONSIVE === */
    .tabs {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        padding: 0 10px 10px 10px !important;
        margin: 0 !important;
    }

    .tab {
        width: 100% !important;
        padding: 10px 16px !important;
        font-size: 0.9rem !important;
        margin: 0 !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    /* === SPACING EQUITATIVO ENTRE BLOQUES === */
    /* Eliminar todo el margin-bottom base */
    .content>* {
        margin-bottom: 0 !important;
        margin-top: 0 !important;
    }

    /* Espaciado uniforme de 20px entre secciones principales */
    .description {
        margin-bottom: 15px !important;
        margin-top: 0px !important;
    }

    .info-banner,
    .hero-dashboard,
    .hero-section,
    .mission-section,
    .features-dashboard,
    .developer-section,
    .collaboration-section,
    .roadmap-section,
    .support-project-section,
    .tech-stack-section,
    .contact-section,
    .credits-section,
    .screenshots-section,
    .download-section,
    .requirements-section,
    .faq-section,
    .support-section {
        margin-bottom: 20px !important;
    }

    /* Remove gap between description and carousel */
    .description+.levels-carousel-container {
        margin-top: 0px !important;
    }

    /* Remove gap between carousel and flashcard */
    .levels-carousel-container+.flashcard-section {
        margin-top: 15px !important;
    }

    /* === SWIPE HINT MINIMALISTA === */
    .swipe-hint {
        background: none !important;
        backdrop-filter: none !important;
        padding: 3px 10px !important;
        margin-top: 8px !important;
        font-size: 0.7rem !important;
        color: rgba(255, 255, 255, 0.4) !important;
        font-weight: 300 !important;
        gap: 6px !important;
    }

    .swipe-hint i {
        font-size: 0.85rem !important;
    }

    /* === ELIMINAR MARGIN-BLOCK === */
    * {
        margin-block-start: 0 !important;
        margin-block-end: 0 !important;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
        margin-block-start: 0 !important;
        margin-block-end: 0 !important;
        margin-top: 0 !important;
    }

    /* === SPACING ENTRE ELEMENTOS DENTRO DE CARDS === */
    .level-header {
        margin-bottom: 15px !important;
    }

    .level-header h3 {
        margin-bottom: 6px !important;
    }

    .level-actions {
        margin-top: 15px !important;
        gap: 10px !important;
    }
}

/* === DARK MODE ESPECÃ FICO === */
@media (max-width: 768px) {
    .dark-mode .carousel-indicator {
        background: rgba(255, 255, 255, 0.2) !important;
    }

    .dark-mode .carousel-indicator.active {
        background: rgba(129, 140, 248, 0.75) !important;
        box-shadow: 0 1px 3px rgba(129, 140, 248, 0.3) !important;
    }
}

/* === PANTALLAS ULTRA PEQUEÑAS === */
@media (max-width: 374px) {
    .carousel-indicator {
        width: 4px !important;
        min-width: 4px !important;
        height: 4px !important;
        min-height: 4px !important;
    }

    .carousel-indicator.active {
        width: 12px !important;
        min-width: 12px !important;
        height: 4px !important;
        min-height: 4px !important;
    }

    /* Spacing aún más compacto en pantallas pequeñas */
    .hero-dashboard,
    .hero-section,
    .mission-section,
    .features-dashboard,
    .developer-section,
    .collaboration-section,
    .roadmap-section,
    .support-project-section,
    .tech-stack-section,
    .contact-section,
    .credits-section {
        margin-bottom: 20px !important;
    }
}

/* === FIX PARA SAFARI iOS === */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 768px) {

        .carousel-container .levels-grid,
        .carousel-container .features-grid,
        .carousel-container .tech-grid,
        .carousel-container .screenshots-grid,
        .levels-carousel-container .levels-grid {
            -webkit-mask-image: -webkit-linear-gradient(left,
                    rgba(0, 0, 0, 0) 0px,
                    rgba(0, 0, 0, 0.5) 10px,
                    rgba(0, 0, 0, 1) 30px,
                    rgba(0, 0, 0, 1) calc(100% - 30px),
                    rgba(0, 0, 0, 0.5) calc(100% - 10px),
                    rgba(0, 0, 0, 0) 100%) !important;
            mask-image: linear-gradient(to right,
                    rgba(0, 0, 0, 0) 0px,
                    rgba(0, 0, 0, 0.5) 10px,
                    rgba(0, 0, 0, 1) 30px,
                    rgba(0, 0, 0, 1) calc(100% - 30px),
                    rgba(0, 0, 0, 0.5) calc(100% - 10px),
                    rgba(0, 0, 0, 0) 100%) !important;
        }
    }
}

/* === ASEGURAR QUE NO HAY PSEUDOELEMENTOS CREANDO LÃ NEAS === */
@media (max-width: 768px) {

    .carousel-container,
    .levels-carousel-container,
    .features-dashboard,
    .tech-stack-section {
        position: relative !important;
    }

    .carousel-container *::before,
    .carousel-container *::after,
    .levels-carousel-container *::before,
    .levels-carousel-container *::after {
        background: none !important;
    }
}