/* ============================================
   CORRECCIONES CRÍTICAS DE DISEÑO MÓVIL - TIENDA
   Fecha: 2025-12-04
   Propósito: Corregir problemas visuales específicos en móviles
============================================ */

/* ============================================
   1. NAVBAR - REDUCIR ALTURA EN MÓVILES Y OCULTAR ELEMENTOS
============================================ */
@media (max-width: 992px) {
    /* Reducir padding del body para compensar navbar más pequeño */
    body {
        padding-top: 60px !important;
    }

    /* Navbar más compacto */
    .modern-navbar {
        min-height: 60px !important;
    }

    .navbar-content {
        padding: 10px 0 !important;
        min-height: 60px !important;
    }

    .navbar-container {
        padding: 0 10px !important;
    }

    /* Logo más pequeño */
    .navbar-logo {
        font-size: 20px !important;
        letter-spacing: 1.5px !important;
    }

    /* OCULTAR elementos del navbar en móviles (solo mostrar logo + hamburguesa) */
    .navbar-menu > li {
        display: none !important;
    }

    .navbar-actions > *:not(.mobile-menu-btn) {
        display: none !important;
    }

    /* Botón hamburguesa más pequeño y VISIBLE */
    .mobile-menu-btn {
        display: flex !important;
        padding: 6px !important;
    }

    .mobile-menu-btn span {
        width: 24px !important;
        height: 2.5px !important;
    }

    .navbar-actions {
        gap: 6px !important;
    }

    /* Ajustar posición del menú desplegable lateral */
    .navbar-menu {
        top: 60px !important;
        height: calc(100vh - 60px) !important;
    }

    /* Mostrar items cuando el menú está activo */
    .navbar-menu.active > li {
        display: block !important;
    }

    /* Ajustar overlay */
    .mobile-menu-overlay {
        top: 60px !important;
        height: calc(100vh - 60px) !important;
    }
}

@media (max-width: 768px) {
    /* Confirmar ocultamiento en móviles pequeños */
    .navbar-menu > li {
        display: none !important;
    }

    .navbar-menu.active > li {
        display: block !important;
    }

    .navbar-actions > *:not(.mobile-menu-btn) {
        display: none !important;
    }

    .mobile-menu-btn {
        display: flex !important;
    }
}

/* ============================================
   2. HERO SECTION - ELIMINAR ESPACIO SUPERIOR
============================================ */
@media (max-width: 768px) {
    .hero-section {
        margin-top: 0 !important;
        padding-top: 0 !important;
        height: 35vh !important;
        min-height: 280px !important;
    }

    .hero-content {
        padding: 1.2rem 1rem !important;
    }

    .hero-title {
        font-size: 1.6rem !important;
        margin-bottom: 0.5rem !important;
    }

    .hero-subtitle {
        font-size: 0.7rem !important;
        margin-bottom: 0.4rem !important;
    }

    .hero-text {
        font-size: 0.85rem !important;
        margin-bottom: 1rem !important;
        line-height: 1.4 !important;
    }

    .btn-elegant {
        padding: 9px 22px !important;
        font-size: 0.82rem !important;
    }
}

/* ============================================
   3. FEATURES BAR - SLIDER MÓVIL PERFECTAMENTE CENTRADO
============================================ */
@media (max-width: 768px) {
    .features-bar {
        padding: 30px 0 !important;
        margin: 0 auto !important;
        background: linear-gradient(180deg, #fafafa 0%, #ffffff 100%) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: auto !important;
    }

    .features-bar .container {
        padding: 0 20px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    /* Grid desktop oculto en móvil */
    .features-desktop {
        display: none !important;
    }

    /* Slider móvil visible y centrado */
    .features-slider-mobile {
        display: block !important;
        width: 100% !important;
        max-width: 420px !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 400px) {
    .features-bar .container {
        padding: 0 15px !important;
    }

    .features-slider-mobile {
        max-width: 320px !important;
    }
}

/* ============================================
   4. SELECTOR DE LÍNEAS - OPTIMIZAR ESPACIO
============================================ */
@media (max-width: 768px) {
    .lineas-selector-section {
        padding: 20px 0 !important;
        margin: 0 !important;
    }

    .lineas-selector-container {
        padding: 20px 12px !important;
        margin: 0 10px !important;
    }

    .lineas-titulo {
        font-size: 1.4rem !important;
        margin-bottom: 6px !important;
    }

    .lineas-subtitulo {
        font-size: 0.85rem !important;
        margin-bottom: 20px !important;
    }

    .lineas-toggle-container {
        margin-top: 15px !important;
    }

    .lineas-toggle {
        gap: 12px !important;
    }

    .linea-option {
        padding: 16px 12px !important;
    }

    .linea-icon {
        width: 45px !important;
        height: 45px !important;
        font-size: 1.2rem !important;
    }

    .linea-content h4 {
        font-size: 1.05rem !important;
        margin-bottom: 4px !important;
    }

    .linea-content p {
        font-size: 0.78rem !important;
        line-height: 1.3 !important;
        margin-bottom: 6px !important;
    }

    .linea-features {
        gap: 5px !important;
        margin-top: 6px !important;
    }

    .feature-dot {
        width: 7px !important;
        height: 7px !important;
    }
}

/* ============================================
   5. BANNER DE OFERTAS Y BÚSQUEDA - COMPACTAR
============================================ */
@media (max-width: 768px) {
    .seccion-busqueda-ofertas {
        padding: 0 !important;
        margin: 0 !important;
    }

    .seccion-busqueda-ofertas .container {
        padding: 0 10px !important;
    }

    /* Banner de ofertas más compacto */
    .banner-ofertas {
        padding: 15px 12px !important;
        margin-bottom: 20px !important;
        border-radius: 10px !important;
    }

    .banner-contenido {
        gap: 12px !important;
    }

    .oferta-icono {
        font-size: 2.2rem !important;
    }

    .oferta-icono i {
        font-size: 2.2rem !important;
    }

    .oferta-texto h3 {
        font-size: 1.2rem !important;
        line-height: 1.2 !important;
        margin-bottom: 4px !important;
    }

    .oferta-texto p {
        font-size: 0.85rem !important;
    }

    .oferta-contador {
        gap: 8px !important;
        margin-top: 10px !important;
    }

    .contador-item {
        padding: 8px 12px !important;
        min-width: 65px !important;
    }

    .contador-numero {
        font-size: 1.4rem !important;
    }

    .contador-label {
        font-size: 0.65rem !important;
    }

    /* Barra de búsqueda más compacta */
    .barra-busqueda-premium {
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }

    .busqueda-contenedor-premium {
        padding: 0 !important;
        border-radius: 10px !important;
    }

    .input-busqueda-premium {
        padding: 11px 15px !important;
        font-size: 0.88rem !important;
    }

    .btn-buscar-premium,
    .btn-limpiar-premium {
        padding: 11px 15px !important;
        font-size: 0.88rem !important;
    }
}

/* ============================================
   6. FILTROS HORIZONTALES - COMPACTAR
============================================ */
@media (max-width: 768px) {
    .filtros-horizontales-premium {
        padding: 15px 10px !important;
        margin: 0 !important;
        gap: 12px !important;
    }

    .grupo-filtros-premium {
        margin-bottom: 0 !important;
    }

    .titulo-grupo-filtros {
        font-size: 0.8rem !important;
        margin-bottom: 8px !important;
        padding: 0 4px !important;
    }

    .titulo-grupo-filtros i {
        font-size: 0.8rem !important;
    }

    .contenedor-chips-filtros {
        gap: 6px !important;
    }

    .chip-filtro {
        padding: 7px 12px !important;
        font-size: 0.78rem !important;
        border-radius: 8px !important;
    }

    .chip-filtro i {
        font-size: 0.75rem !important;
    }

    .btn-limpiar-filtros-premium {
        padding: 7px 12px !important;
        font-size: 0.78rem !important;
    }
}

/* ============================================
   7. SLIDERS DE PRODUCTOS - REDUCIR ESPACIADO
============================================ */
@media (max-width: 768px) {
    .productos-sliders-section {
        padding-top: 15px !important;
        margin-top: 0 !important;
    }

    .slider-linea {
        margin-bottom: 30px !important;
    }

    .slider-header {
        padding: 0 10px !important;
        margin-bottom: 15px !important;
    }

    .slider-header-content {
        gap: 10px !important;
    }

    .slider-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.1rem !important;
    }

    .slider-titulo {
        font-size: 1.3rem !important;
        margin-bottom: 3px !important;
    }

    .slider-subtitulo {
        font-size: 0.8rem !important;
    }

    .slider-btn {
        width: 35px !important;
        height: 35px !important;
        font-size: 0.9rem !important;
    }
}

/* ============================================
   8. OCULTAR ELEMENTOS DUPLICADOS EN MÓVIL
============================================ */
@media (max-width: 768px) {
    /* Si hay botones o iconos duplicados, ocultarlos */

    /* Ocultar botón de búsqueda del navbar (ya hay uno en la sección de búsqueda) */
    .navbar-actions .navbar-action-btn[title*="búsqueda"],
    .navbar-actions .navbar-action-btn[onclick*="toggleSearch"] {
        display: none !important;
    }

    /* Asegurar que solo haya un botón de carrito visible */
    .navbar-actions .navbar-action-btn[href*="checkout"] {
        display: flex !important;
    }
}

/* ============================================
   9. ESPACIADO GENERAL ENTRE SECCIONES
============================================ */
@media (max-width: 768px) {
    /* Eliminar márgenes excesivos entre secciones */
    section {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Espaciado consistente para contenedores */
    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Reducir gaps en todas las secciones */
    .row {
        row-gap: 15px !important;
    }
}

/* ============================================
   10. BOTONES FLOTANTES - AJUSTAR POSICIÓN (ALINEADOS)
============================================ */
@media (max-width: 768px) {
    /* Botón de filtros - ALINEADO con el carrito */
    .btn-filtros-movil {
        bottom: 20px !important;
        left: 15px !important;
        width: 60px !important;
        height: 60px !important;
        font-size: 1.15rem !important;
    }

    /* Botón de carrito - estilos definidos en carrito-badge-mobile.css */
}

/* ============================================
   11. PANTALLAS MUY PEQUEÑAS (< 400px)
============================================ */
@media (max-width: 400px) {
    body {
        padding-top: 55px !important;
    }

    .modern-navbar {
        min-height: 55px !important;
    }

    .navbar-content {
        padding: 8px 0 !important;
        min-height: 55px !important;
    }

    .navbar-logo {
        font-size: 18px !important;
    }

    .navbar-action-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 12px !important;
    }

    .hero-section {
        height: 30vh !important;
        min-height: 250px !important;
    }

    .hero-title {
        font-size: 1.4rem !important;
    }

    .features-bar {
        padding: 15px 0 !important;
    }

    .feature-icon {
        font-size: 1.4rem !important;
    }

    .feature-title {
        font-size: 0.75rem !important;
    }

    .feature-text {
        font-size: 0.6rem !important;
    }
}

/* ============================================
   12. PREVENIR SCROLLING HORIZONTAL
============================================ */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    * {
        max-width: 100% !important;
    }

    /* Asegurar que ningún elemento se salga */
    .container,
    .container-fluid,
    .row,
    section,
    div {
        max-width: 100% !important;
    }
}

/* ============================================
   FIN DE CORRECCIONES MÓVILES
============================================ */