/* ========================================
   🔧 MOBILE FIX COMPLETE - TAZDUCA
   Corrección total de errores móviles
   - Menú móvil funcional
   - Footer fondo blanco
   - Carrusel solo swipe
======================================== */

/* ===== VARIABLES GLOBALES ===== */
:root {
    --primary-red: #FF0000;
    --secondary-pink: #FF1493;
    --text-primary: #1E293B;
    --text-secondary: #64748B;
    --bg-white: #FFFFFF;
    --bg-light: #F8FAFC;
}

/* ===== 1. FIX MENÚ MÓVIL ===== */
@media (max-width: 768px) {
    /* Asegurar que el botón hamburguesa sea visible y funcional */
    .premium-hamburger,
    .mobile-menu-toggle,
    #premiumMobileBtn {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: 9999 !important;
        position: relative !important;
        background: white !important;
        border: 2px solid var(--primary-red) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    }
    
    /* Remover cualquier overlay que bloquee el botón */
    .premium-hamburger::before,
    .premium-hamburger::after,
    .mobile-menu-toggle::before,
    .mobile-menu-toggle::after {
        display: none !important;
    }
    
    /* Asegurar que las barras del hamburguesa sean visibles */
    .hamburger-bar,
    .premium-hamburger span,
    .mobile-menu-toggle span {
        display: block !important;
        width: 25px !important;
        height: 3px !important;
        background: var(--primary-red) !important;
        margin: 4px auto !important;
        transition: all 0.3s ease !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* Menú móvil contenedor principal */
    .premium-mobile-menu {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        width: 85% !important;
        max-width: 320px !important;
        height: 100vh !important;
        background: white !important;
        z-index: 10000 !important;
        transition: right 0.3s ease !important;
        box-shadow: -5px 0 20px rgba(0,0,0,0.3) !important;
        overflow-y: auto !important;
    }
    
    /* Menú móvil activo */
    .premium-mobile-menu.active {
        right: 0 !important;
    }
    
    /* Backdrop del menú */
    .mobile-menu-backdrop {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0,0,0,0.5) !important;
        z-index: 9998 !important;
        display: none !important;
    }
    
    .mobile-menu-backdrop.active {
        display: block !important;
    }
    
    /* Enlaces del menú móvil */
    .premium-mobile-link {
        display: block !important;
        padding: 15px 20px !important;
        color: var(--text-primary) !important;
        text-decoration: none !important;
        font-weight: 500 !important;
        font-size: 1rem !important;
        border-bottom: 1px solid rgba(0,0,0,0.1) !important;
        transition: all 0.3s ease !important;
    }
    
    .premium-mobile-link:active,
    .premium-mobile-link:hover {
        background: rgba(255,0,0,0.1) !important;
        color: var(--primary-red) !important;
        padding-left: 25px !important;
    }
}

/* ===== 2. FIX FOOTER FONDO BLANCO ===== */
.footer-section,
#footer,
footer {
    background: white !important;
    background-color: white !important;
    color: var(--text-primary) !important;
}

/* Asegurar texto legible en footer */
.footer-section * {
    color: var(--text-primary) !important;
}

.footer-section h3,
.footer-section h4 {
    color: var(--primary-red) !important;
}

.footer-section a {
    color: var(--text-secondary) !important;
    text-decoration: none !important;
}

.footer-section a:hover {
    color: var(--primary-red) !important;
}

/* Footer copyright area */
.footer-bottom,
.footer-copyright {
    background: var(--bg-light) !important;
    color: var(--text-secondary) !important;
    border-top: 1px solid rgba(0,0,0,0.1) !important;
}

/* ===== 3. FIX CARRUSEL MÓVIL - SOLO SWIPE ===== */
@media (max-width: 768px) {
    /* Ocultar TODOS los botones de navegación del carrusel en móvil */
    .carousel-control-prev,
    .carousel-control-next,
    .carousel-nav-btn,
    .carousel-button,
    .services-carousel-nav,
    .carousel-navigation,
    .carousel-indicators,
    .dots-navigation,
    [class*="carousel-arrow"],
    [class*="carousel-btn"],
    [class*="nav-btn"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* Asegurar que el carrusel sea swipeable */
    .services-carousel,
    .carousel-inner,
    [class*="carousel"] {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth !important;
        -ms-overflow-style: none !important; /* Hide scrollbar IE/Edge */
        scrollbar-width: none !important; /* Hide scrollbar Firefox */
    }
    
    /* Ocultar scrollbar en webkit */
    .services-carousel::-webkit-scrollbar,
    .carousel-inner::-webkit-scrollbar {
        display: none !important;
        height: 0 !important;
    }
    
    /* Cards del carrusel */
    .service-card,
    .carousel-item,
    .package-card {
        scroll-snap-align: center !important;
        flex: 0 0 85% !important;
        max-width: 85% !important;
        margin: 0 7.5% !important;
    }
    
    /* Contenedor del carrusel */
    .carousel-container {
        position: relative !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Indicador visual de swipe */
    .swipe-indicator {
        position: absolute !important;
        bottom: 20px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        padding: 8px 15px !important;
        background: rgba(0,0,0,0.5) !important;
        color: white !important;
        border-radius: 20px !important;
        font-size: 0.85rem !important;
        pointer-events: none !important;
        animation: swipePulse 2s infinite !important;
    }
    
    @keyframes swipePulse {
        0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
        50% { opacity: 1; transform: translateX(-50%) scale(1.05); }
    }
    
    /* Touch feedback */
    .service-card:active,
    .carousel-item:active {
        transform: scale(0.98) !important;
        transition: transform 0.2s ease !important;
    }
}

/* ===== 4. FIX GENERAL MÓVIL ===== */
@media (max-width: 768px) {
    /* Prevenir overflow horizontal */
    body {
        overflow-x: hidden !important;
        width: 100% !important;
    }
    
    /* Fix para contenedores */
    .container,
    .section-container {
        max-width: 100% !important;
        padding: 0 15px !important;
    }
    
    /* Asegurar que el header sea sticky */
    .modern-header-premium,
    .header-glass-container {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        background: white !important;
    }
    
    /* Mejorar touch targets */
    button,
    a,
    .btn,
    .button {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Mejorar legibilidad */
    body {
        font-size: 16px !important;
        line-height: 1.6 !important;
        -webkit-text-size-adjust: 100% !important;
    }
}

/* ===== 5. UTILIDADES ADICIONALES ===== */
/* Clase para debugging */
.mobile-debug {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: rgba(255,0,0,0.9) !important;
    color: white !important;
    padding: 20px !important;
    border-radius: 10px !important;
    z-index: 99999 !important;
    display: none !important;
}

/* Mostrar solo en mobile */
@media (max-width: 768px) {
    .mobile-only {
        display: block !important;
    }
    
    .desktop-only {
        display: none !important;
    }
}

/* Ocultar en mobile */
@media (min-width: 769px) {
    .mobile-only {
        display: none !important;
    }
    
    .desktop-only {
        display: block !important;
    }
}

/* ===== IMPORTANTE: OVERRIDES FINALES ===== */
/* Estos deben ir al final para asegurar máxima prioridad */
@media (max-width: 768px) {
    /* Force white footer background */
    .footer-section,
    footer,
    #footer,
    [class*="footer"] {
        background: white !important;
        background-color: white !important;
    }
    
    /* Force hide carousel buttons */
    button[class*="carousel"],
    .btn[class*="carousel"],
    div[class*="carousel-control"],
    div[class*="carousel-nav"] {
        display: none !important;
    }
    
    /* Force show hamburger menu */
    #premiumMobileBtn,
    .premium-hamburger {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}