/* ============================================
   TIENDA RESPONSIVE FIX - OPTIMIZACIÓN MÓVIL
   Fecha: 2025-12-01

   SOLUCIÓN: Unificar sistema de filtros en móviles
   - Ocultar filtros horizontales en m├│viles
   - Mantener solo el modal de filtros con bot├│n flotante
   - Optimizar dise├▒o responsive general
============================================ */

/* ============================================
   1. OCULTAR FILTROS HORIZONTALES EN MÓVILES
   Solo mostrar el modal de filtros con bot├│n flotante
============================================ */
@media (max-width: 768px) {
    /* Ocultar completamente los filtros horizontales premium en m├│viles */
    .filtros-horizontales-premium {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
    }

    /* Asegurar que el bot├│n flotante de filtros sea visible */
    .btn-filtros-movil {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* En pantallas grandes (desktop), mantener filtros horizontales */
@media (min-width: 769px) {
    /* Mostrar filtros horizontales en desktop */
    .filtros-horizontales-premium {
        display: block !important;
    }

    /* Ocultar bot├│n flotante de filtros en desktop */
    .btn-filtros-movil {
        display: none !important;
    }

    /* Ocultar modal de filtros m├│vil en desktop */
    .modal-filtros-movil {
        display: none !important;
    }
}

/* ============================================
   2. OPTIMIZAR SELECTOR DE LÍNEAS PARA MÓVILES
   Hacerlo más compacto y accesible
============================================ */
@media (max-width: 768px) {
    .lineas-selector-section {
        padding: 20px 0 !important;
    }

    .lineas-selector-container {
        padding: 20px 12px !important;
        border-radius: 16px !important;
    }

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

    .lineas-subtitulo {
        font-size: 0.85rem !important;
        margin-bottom: 20px !important;
        text-align: center !important;
        line-height: 1.4 !important;
    }

    .lineas-toggle-container {
        width: 100% !important;
    }

    .lineas-toggle {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .linea-option {
        padding: 16px 14px !important;
        border-radius: 14px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    }

    .linea-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.2rem !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .linea-content {
        flex: 1 !important;
        text-align: left !important;
    }

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

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

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

    .feature-dot {
        width: 7px !important;
        height: 7px !important;
        border-radius: 50% !important;
    }
}

@media (max-width: 480px) {
    .lineas-selector-section {
        padding: 15px 0 !important;
    }

    .lineas-titulo {
        font-size: 1.25rem !important;
    }

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

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

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

    .linea-content h4 {
        font-size: 0.98rem !important;
    }

    .linea-content p {
        font-size: 0.74rem !important;
    }
}

/* ============================================
   3. OPTIMIZAR BANNER DE OFERTAS PARA MÓVILES
   Hacer el diseño más compacto y legible
============================================ */
@media (max-width: 768px) {
    .seccion-busqueda-ofertas {
        padding: 0 !important;
    }

    .banner-ofertas {
        padding: 16px 14px !important;
        margin-bottom: 20px !important;
        border-radius: 14px !important;
    }

    .banner-contenido {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 12px !important;
    }

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

    .oferta-texto {
        width: 100% !important;
    }

    .oferta-texto h3 {
        font-size: 1.15rem !important;
        line-height: 1.3 !important;
        margin-bottom: 5px !important;
    }

    .oferta-texto p {
        font-size: 0.85rem !important;
        margin: 0 !important;
        line-height: 1.4 !important;
    }

    .oferta-contador {
        display: flex !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        flex-wrap: wrap !important;
    }

    .contador-item {
        padding: 8px 12px !important;
        border-radius: 8px !important;
        min-width: 65px !important;
        text-align: center !important;
    }

    .contador-numero {
        font-size: 1.4rem !important;
        display: block !important;
        line-height: 1 !important;
    }

    .contador-label {
        font-size: 0.65rem !important;
        display: block !important;
        margin-top: 3px !important;
        text-transform: uppercase !important;
    }
}

@media (max-width: 480px) {
    .banner-ofertas {
        padding: 14px 12px !important;
        margin-bottom: 16px !important;
    }

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

    .oferta-texto h3 {
        font-size: 1rem !important;
    }

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

    .contador-item {
        padding: 7px 10px !important;
        min-width: 60px !important;
    }

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

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

/* ============================================
   4. OPTIMIZAR BARRA DE BÚSQUEDA PARA MÓVILES
   Mejorar espaciado y usabilidad
============================================ */
@media (max-width: 768px) {
    .barra-busqueda-premium {
        margin-bottom: 20px !important;
        padding: 0 !important;
    }

    .busqueda-contenedor-premium {
        border-radius: 14px !important;
        padding: 6px !important;
    }

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

    .input-busqueda-premium::placeholder {
        font-size: 0.85rem !important;
    }

    .btn-buscar-premium {
        padding: 10px 18px !important;
        font-size: 0.8rem !important;
        border-radius: 10px !important;
    }

    .btn-limpiar-premium {
        width: 38px !important;
        height: 38px !important;
        font-size: 15px !important;
    }
}

@media (max-width: 480px) {
    .busqueda-contenedor-premium {
        border-radius: 12px !important;
        padding: 5px !important;
    }

    .input-busqueda-premium {
        font-size: 0.85rem !important;
        padding: 10px 10px !important;
    }

    .input-busqueda-premium::placeholder {
        font-size: 0.82rem !important;
    }

    .btn-buscar-premium {
        padding: 9px 16px !important;
        font-size: 0.75rem !important;
    }

    .btn-limpiar-premium {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }
}

/* ============================================
   5. OPTIMIZAR SLIDERS DE PRODUCTOS EN MÓVILES
   Mejorar espaciado y presentaci├│n
============================================ */
@media (max-width: 768px) {
    .productos-sliders-section {
        padding: 20px 0 !important;
    }

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

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

    .slider-header-content {
        flex: 1 !important;
    }

    .slider-icon {
        width: 45px !important;
        height: 45px !important;
        font-size: 1.3rem !important;
        margin-right: 12px !important;
    }

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

    .slider-subtitulo {
        font-size: 0.82rem !important;
        line-height: 1.3 !important;
    }

    .slider-navegacion {
        gap: 8px !important;
    }

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

    /* Cards de productos en sliders */
    .producto-card {
        margin: 0 8px !important;
    }

    .producto-imagen-container {
        height: 200px !important;
        border-radius: 12px 12px 0 0 !important;
    }

    .producto-imagen {
        height: 100% !important;
        object-fit: cover !important;
    }

    .producto-info {
        padding: 14px !important;
    }

    .producto-nombre {
        font-size: 0.98rem !important;
        line-height: 1.3 !important;
        margin-bottom: 6px !important;
        min-height: auto !important;
    }

    .producto-categoria {
        font-size: 0.75rem !important;
        margin-bottom: 6px !important;
    }

    .producto-precio {
        font-size: 1.2rem !important;
        margin-bottom: 10px !important;
    }

    .producto-vendidos,
    .producto-recomendado {
        font-size: 0.75rem !important;
        margin-bottom: 8px !important;
    }

    .btn-agregar-carrito {
        padding: 10px 16px !important;
        font-size: 0.85rem !important;
        border-radius: 10px !important;
        width: 100% !important;
    }

    /* Badges de productos */
    .producto-badge {
        padding: 5px 10px !important;
        font-size: 0.7rem !important;
        border-radius: 8px !important;
    }

    /* Overlay de acciones */
    .tienda-overlay-acciones {
        gap: 6px !important;
        padding: 8px !important;
    }

    .tienda-boton-accion {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.9rem !important;
    }

    /* Rankings del Top 10 */
    .producto-ranking {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.85rem !important;
        top: 10px !important;
        left: 10px !important;
    }

    .badge-mejor-vendido {
        padding: 4px 10px !important;
        font-size: 0.65rem !important;
        top: 10px !important;
        right: 10px !important;
    }
}

@media (max-width: 480px) {
    .slider-linea {
        margin-bottom: 25px !important;
    }

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

    .slider-titulo {
        font-size: 1.15rem !important;
    }

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

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

    .producto-imagen-container {
        height: 180px !important;
    }

    .producto-info {
        padding: 12px !important;
    }

    .producto-nombre {
        font-size: 0.92rem !important;
    }

    .producto-precio {
        font-size: 1.1rem !important;
    }

    .btn-agregar-carrito {
        padding: 9px 14px !important;
        font-size: 0.8rem !important;
    }
}

/* ============================================
   6. OPTIMIZAR HERO SECTION PARA MÓVILES
   Hacer más compacto y atractivo
============================================ */
@media (max-width: 768px) {
    .hero-section {
        height: 35vh !important;
        min-height: 260px !important;
        max-height: 350px !important;
    }

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

    .hero-subtitle {
        font-size: 0.7rem !important;
        letter-spacing: 1.2px !important;
        margin-bottom: 6px !important;
    }

    .hero-title {
        font-size: 1.6rem !important;
        margin-bottom: 8px !important;
        line-height: 1.2 !important;
    }

    .hero-text {
        font-size: 0.85rem !important;
        margin-bottom: 1rem !important;
        line-height: 1.4 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

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

@media (max-width: 480px) {
    .hero-section {
        height: 32vh !important;
        min-height: 240px !important;
    }

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

    .hero-text {
        font-size: 0.8rem !important;
    }

    .btn-elegant {
        padding: 8px 20px !important;
        font-size: 0.78rem !important;
    }
}

/* ============================================
   7. OPTIMIZAR FEATURES BAR PARA MÓVILES
   Mejor distribuci├│n y legibilidad
============================================ */
@media (max-width: 768px) {
    .features-bar {
        padding: 20px 0 !important;
    }

    .features-bar .row {
        margin: 0 !important;
    }

    .features-bar .col-6 {
        padding: 0 6px !important;
        margin-bottom: 16px !important;
    }

    .feature-item {
        padding: 14px 10px !important;
        text-align: center !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.5) !important;
        backdrop-filter: blur(10px) !important;
    }

    .feature-icon {
        font-size: 1.6rem !important;
        margin-bottom: 8px !important;
    }

    .feature-title {
        font-size: 0.82rem !important;
        margin-bottom: 3px !important;
        font-weight: 600 !important;
    }

    .feature-text {
        font-size: 0.68rem !important;
        line-height: 1.3 !important;
    }
}

@media (max-width: 480px) {
    .features-bar {
        padding: 16px 0 !important;
    }

    .feature-item {
        padding: 12px 8px !important;
    }

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

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

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

/* ============================================
   8. MEJORAR BOTONES FLOTANTES EN MÓVILES
   Mejor posicionamiento y accesibilidad
============================================ */
@media (max-width: 768px) {
    /* Bot├│n de filtros m├│vil - ALINEADO CON CARRITO */
    .btn-filtros-movil {
        position: fixed !important;
        bottom: 16px !important;
        left: 16px !important;
        width: 56px !important;
        height: 56px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 998 !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
        transition: all 0.3s ease !important;
    }

    .btn-filtros-movil:active {
        transform: scale(0.95) !important;
    }

    /* Carrito flotante */
    .tienda-carrito-flotante {
        position: fixed !important;
        bottom: 16px !important;
        right: 16px !important;
        width: 56px !important;
        height: 56px !important;
        border-radius: 50% !important;
        z-index: 999 !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
    }
}

@media (max-width: 480px) {
    .btn-filtros-movil {
        width: 52px !important;
        height: 52px !important;
        bottom: 14px !important;
        left: 14px !important;
        font-size: 1.1rem !important;
    }

    .tienda-carrito-flotante {
        width: 52px !important;
        height: 52px !important;
        bottom: 14px !important;
        right: 14px !important;
        font-size: 1.2rem !important;
    }
}

/* ============================================
   9. MODAL DE FILTROS MÓVIL - OPTIMIZACIÓN
   Mejorar presentaci├│n y usabilidad
============================================ */
@media (max-width: 768px) {
    .modal-filtros-movil {
        backdrop-filter: blur(5px) !important;
        -webkit-backdrop-filter: blur(5px) !important;
    }

    .modal-filtros-contenido {
        border-radius: 18px 18px 0 0 !important;
        padding: 18px !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
    }

    .modal-filtros-header {
        margin-bottom: 18px !important;
        padding-bottom: 14px !important;
    }

    /* Título del modal con alta especificidad */
    .modal-filtros-movil .modal-filtros-header h3,
    body.tema-nutricion .modal-filtros-movil .modal-filtros-header h3,
    body.tema-belleza .modal-filtros-movil .modal-filtros-header h3,
    .modal-filtros-header h3 {
        font-size: 1.15rem !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        color: #1a1a1a !important;
        margin: 0 !important;
    }

    .modal-filtros-movil .modal-filtros-header h3 i,
    body.tema-nutricion .modal-filtros-movil .modal-filtros-header h3 i,
    body.tema-belleza .modal-filtros-movil .modal-filtros-header h3 i,
    .modal-filtros-header h3 i {
        color: #D4AF37 !important;
    }

    .tienda-card-filtro {
        margin-bottom: 16px !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    }

    .tienda-card-encabezado {
        padding: 12px 14px !important;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    }

    /* Títulos con alta especificidad para override */
    .modal-filtros-movil .tienda-card-filtro .tienda-card-titulo,
    body.tema-nutricion .modal-filtros-movil .tienda-card-titulo,
    body.tema-belleza .modal-filtros-movil .tienda-card-titulo,
    .tienda-card-titulo {
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        color: #1a1a1a !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }

    .modal-filtros-movil .tienda-card-titulo i,
    body.tema-nutricion .modal-filtros-movil .tienda-card-titulo i,
    body.tema-belleza .modal-filtros-movil .tienda-card-titulo i,
    .tienda-card-titulo i {
        color: #D4AF37 !important;
        font-size: 1rem !important;
    }

    .tienda-enlace-categoria {
        padding: 11px 14px !important;
        font-size: 0.88rem !important;
        transition: all 0.2s ease !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        color: #333 !important;
    }

    .tienda-enlace-categoria:hover {
        background: rgba(0, 0, 0, 0.04) !important;
        color: #1a1a1a !important;
    }

    .tienda-enlace-categoria i {
        transition: all 0.2s ease !important;
        color: #666 !important;
    }

    .tienda-enlace-categoria:hover i {
        color: #D4AF37 !important;
        transform: translateX(2px) !important;
    }

    .tienda-item-categoria {
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
        transition: all 0.2s ease !important;
    }

    .tienda-item-categoria:last-child {
        border-bottom: none !important;
    }

    .tienda-item-categoria.active .tienda-enlace-categoria {
        background: linear-gradient(135deg, rgba(212, 175, 55, 0.25) 0%, rgba(212, 175, 55, 0.15) 100%) !important;
        color: #1a1a1a !important;
        font-weight: 700 !important;
        border-left: 4px solid #D4AF37 !important;
        padding-left: 10px !important;
        box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.3) !important;
    }

    .tienda-item-categoria.active .tienda-enlace-categoria i {
        color: #D4AF37 !important;
        transform: scale(1.1) !important;
    }

    /* Checkmark visual para filtro activo */
    .tienda-item-categoria.active::after {
        content: '✓';
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        background: linear-gradient(135deg, #D4AF37 0%, #C4991F 100%);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: bold;
        box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4);
        animation: popIn 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    .tienda-item-categoria {
        position: relative;
    }

    @keyframes popIn {
        0% {
            transform: translateY(-50%) scale(0);
            opacity: 0;
        }
        100% {
            transform: translateY(-50%) scale(1);
            opacity: 1;
        }
    }

    .btn-aplicar-filtros {
        padding: 13px !important;
        border-radius: 14px !important;
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }
}

@media (max-width: 480px) {
    .modal-filtros-contenido {
        padding: 16px !important;
    }

    /* Títulos en móviles pequeños con alta especificidad */
    .modal-filtros-movil .modal-filtros-header h3,
    body.tema-nutricion .modal-filtros-movil .modal-filtros-header h3,
    body.tema-belleza .modal-filtros-movil .modal-filtros-header h3,
    .modal-filtros-header h3 {
        font-size: 1.05rem !important;
        color: #1a1a1a !important;
    }

    .modal-filtros-movil .tienda-card-filtro .tienda-card-titulo,
    body.tema-nutricion .modal-filtros-movil .tienda-card-titulo,
    body.tema-belleza .modal-filtros-movil .tienda-card-titulo,
    .tienda-card-titulo {
        font-size: 0.9rem !important;
        color: #1a1a1a !important;
    }

    .tienda-enlace-categoria {
        padding: 10px 12px !important;
        font-size: 0.85rem !important;
        color: #333 !important;
    }
}

/* ============================================
   10. PREVENIR PROBLEMAS DE OVERFLOW
   Asegurar que no haya scroll horizontal
============================================ */
@media (max-width: 768px) {
    body, html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    .container, .container-fluid {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .row {
        margin-left: -8px !important;
        margin-right: -8px !important;
    }

    .row > [class*="col-"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* ============================================
   11. MEJORAS DE ACCESIBILIDAD TÁCTIL
   Aumentar áreas táctiles para mejor UX
============================================ */
@media (max-width: 768px) {
    /* Asegurar ├íreas t├íctiles m├şnimas de 44x44px */
    button, .btn, a.btn {
        min-height: 44px !important;
        min-width: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Feedback visual en toques */
    button:active, .btn:active {
        opacity: 0.85 !important;
        transform: scale(0.98) !important;
    }
}

/* ============================================
   FIN DE OPTIMIZACIONES RESPONSIVE
============================================ */