/* ============================================
   DISEÑO COMPACTO PARA MÓVILES - TIENDA
   Reduce el espacio vertical en dispositivos pequeños
   Optimiza el banner de promociones y barra de búsqueda
============================================ */

/* Espaciado general de secciones en móvil */
@media (max-width: 576px) {
    .seccion-busqueda-ofertas {
        padding: 1rem 0 !important;
        margin: 0.8rem 0 !important;
    }

    .seccion-busqueda-ofertas .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Reducir espacio del banner */
    .promociones-slider-container {
        margin-bottom: 8px !important;
    }

    .banner-ofertas {
        padding: 1.2rem 1rem !important;
        margin-bottom: 0 !important;
    }

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

    /* Filtros más compactos */
    .filtros-horizontales-premium {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }
}

/* Ajustes para dispositivos muy pequeños (480px y menores) */
@media (max-width: 480px) {
    /* Eliminar TODOS los espacios innecesarios */
    .seccion-busqueda-ofertas {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* CONTENEDOR - Slider funcional sin espacios duplicados */
    .promociones-slider-container {
        padding: 0 18px !important;
        margin: 1.2rem auto !important;
        height: auto !important;
        min-height: 0 !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* Ocultar flechas en dispositivos pequeños */
    .slider-arrow {
        display: none !important;
    }

    .promociones-slider {
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        position: relative !important;
    }

    /* Slides inactivos completamente ocultos */
    .promo-slide {
        margin: 0 !important;
        padding: 0 !important;
        display: none !important;
        opacity: 0 !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        visibility: hidden !important;
    }

    /* Solo el slide activo visible */
    .promo-slide.active {
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        opacity: 1 !important;
        position: relative !important;
        visibility: visible !important;
    }

    /* Banner con más padding interno */
    .banner-ofertas {
        padding: 1.8rem 1.8rem !important;
    }

    /* Eliminar pseudo-elementos decorativos en móvil */
    .banner-ofertas::before,
    .banner-ofertas::after {
        display: none !important;
        content: none !important;
    }

    /* Icono más pequeño */
    .oferta-icono {
        width: 45px !important;
        height: 45px !important;
        font-size: 1.2rem !important;
        flex-shrink: 0 !important;
    }

    /* Texto compacto */
    .oferta-texto {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .oferta-texto h3 {
        font-size: 0.88rem !important;
        line-height: 1.1 !important;
        margin: 0 0 0.2rem 0 !important;
    }

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

    /* Contador compacto */
    .oferta-contador {
        gap: 0.3rem !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    .contador-item {
        min-width: 45px !important;
        max-width: 45px !important;
        padding: 0.35rem 0.25rem !important;
        border-radius: 8px !important;
    }

    .contador-numero {
        font-size: 1.15rem !important;
        margin: 0 0 0.1rem 0 !important;
        line-height: 1 !important;
    }

    .contador-label {
        font-size: 0.5rem !important;
        line-height: 1 !important;
        margin: 0 !important;
    }

    /* Dots compactos - SIN margen superior */
    .promociones-dots {
        margin-top: 5px !important;
        margin-bottom: 0 !important;
        gap: 0.35rem !important;
    }

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

    .promo-dot.active {
        width: 18px !important;
    }

    /* Barra de búsqueda compacta - SIN margen superior */
    .barra-busqueda-premium {
        margin-top: 6px !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
    }

    .busqueda-contenedor-premium {
        padding: 5px 5px 5px 8px !important;
        border-radius: 25px !important;
    }

    .icono-busqueda-premium {
        width: 16px !important;
        height: 16px !important;
        font-size: 13px !important;
        margin-right: 5px !important;
    }

    .input-busqueda-premium {
        padding: 6px 7px !important;
        font-size: 11px !important;
    }

    .btn-buscar-premium {
        padding: 6px 12px !important;
        font-size: 10px !important;
        margin-right: 4px !important;
    }

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

    /* Filtros horizontales compactos - SIN margen superior */
    .filtros-horizontales-premium {
        margin-top: 6px !important;
        margin-bottom: 0 !important;
        padding: 5px 6px !important;
        border-radius: 10px !important;
    }

    .grupo-filtros-premium {
        margin-bottom: 4px !important;
        gap: 3px !important;
    }

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

    .titulo-grupo-filtros {
        font-size: 9px !important;
        gap: 3px !important;
        margin-bottom: 3px !important;
    }

    .titulo-grupo-filtros i {
        font-size: 10px !important;
    }

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

    .chip-filtro {
        padding: 3px 8px !important;
        font-size: 9px !important;
        border-radius: 15px !important;
    }

    .chip-filtro i {
        font-size: 9px !important;
    }

    .btn-limpiar-filtros-premium {
        padding: 3px 8px !important;
        font-size: 8px !important;
    }
}

/* Ajustes extremos para pantallas de 400px y menores */
@media (max-width: 400px) {
    .seccion-busqueda-ofertas {
        padding: 0 !important;
        margin: 0 !important;
    }

    .promociones-slider-container {
        padding: 0 14px !important;
        margin: 1.1rem auto !important;
    }

    .banner-ofertas {
        padding: 1.6rem 1.6rem !important;
    }

    .banner-contenido {
        gap: 1rem !important;
    }

    .oferta-icono {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.05rem !important;
    }

    .oferta-texto h3 {
        font-size: 0.8rem !important;
        margin-bottom: 0.15rem !important;
    }

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

    .contador-item {
        min-width: 42px !important;
        max-width: 42px !important;
        padding: 0.32rem 0.22rem !important;
    }

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

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

    .promociones-dots {
        margin-top: 4px !important;
    }

    .barra-busqueda-premium {
        margin-top: 5px !important;
        margin-bottom: 0 !important;
    }

    .busqueda-contenedor-premium {
        padding: 4px 4px 4px 7px !important;
    }

    .icono-busqueda-premium {
        width: 15px !important;
        height: 15px !important;
        font-size: 12px !important;
    }

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

    .btn-buscar-premium {
        padding: 5px 10px !important;
        font-size: 9px !important;
    }

    .btn-limpiar-premium {
        width: 30px !important;
        height: 30px !important;
    }

    .filtros-horizontales-premium {
        margin-top: 5px !important;
        margin-bottom: 0 !important;
        padding: 4px 5px !important;
    }

    .chip-filtro {
        padding: 2px 7px !important;
        font-size: 8px !important;
    }
}

/* Ajustes para 360px y menores */
@media (max-width: 360px) {
    .seccion-busqueda-ofertas {
        padding: 0 !important;
        margin: 0 !important;
    }

    .seccion-busqueda-ofertas .container {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .promociones-slider-container {
        padding: 0 12px !important;
        margin: 1rem auto !important;
    }

    .banner-ofertas {
        padding: 1.4rem 1.3rem !important;
        border-radius: 12px !important;
    }

    .banner-contenido {
        gap: 0.85rem !important;
    }

    .oferta-icono {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.95rem !important;
    }

    .oferta-texto h3 {
        font-size: 0.75rem !important;
        letter-spacing: 0.3px !important;
        margin-bottom: 0.12rem !important;
    }

    .oferta-texto p {
        font-size: 0.58rem !important;
        line-height: 1.15 !important;
    }

    .oferta-contador {
        gap: 0.22rem !important;
    }

    .contador-item {
        min-width: 38px !important;
        max-width: 38px !important;
        padding: 0.28rem 0.2rem !important;
        border-radius: 6px !important;
    }

    .contador-numero {
        font-size: 0.95rem !important;
        margin-bottom: 0.08rem !important;
    }

    .contador-label {
        font-size: 0.43rem !important;
        letter-spacing: 0.4px !important;
    }

    .promociones-dots {
        margin-top: 3px !important;
        gap: 0.25rem !important;
    }

    .promo-dot {
        width: 5px !important;
        height: 5px !important;
    }

    .promo-dot.active {
        width: 14px !important;
    }

    .barra-busqueda-premium {
        margin-top: 4px !important;
        margin-bottom: 0 !important;
        padding: 0 5px !important;
    }

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

    .icono-busqueda-premium {
        width: 14px !important;
        height: 14px !important;
        font-size: 11px !important;
        margin-right: 4px !important;
    }

    .input-busqueda-premium {
        padding: 4px 5px !important;
        font-size: 9px !important;
    }

    .btn-buscar-premium {
        padding: 4px 8px !important;
        font-size: 8px !important;
        letter-spacing: 0.1px !important;
    }

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

    .filtros-horizontales-premium {
        margin-top: 4px !important;
        margin-bottom: 0 !important;
        padding: 3px 4px !important;
        border-radius: 8px !important;
    }

    .grupo-filtros-premium {
        margin-bottom: 3px !important;
        gap: 2px !important;
    }

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

    .titulo-grupo-filtros {
        font-size: 8px !important;
        gap: 2px !important;
        margin-bottom: 2px !important;
    }

    .titulo-grupo-filtros i {
        font-size: 9px !important;
    }

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

    .chip-filtro {
        padding: 2px 6px !important;
        font-size: 8px !important;
        border-radius: 12px !important;
    }

    .chip-filtro i {
        font-size: 8px !important;
    }

    .btn-limpiar-filtros-premium {
        padding: 2px 6px !important;
        font-size: 7px !important;
    }
}

/* Optimización de altura para evitar scroll excesivo */
@media (max-width: 480px) and (max-height: 700px) {
    .seccion-busqueda-ofertas {
        padding: 3px 0 !important;
        margin: 2px 0 !important;
    }

    .banner-ofertas {
        padding: 1.5rem 1.5rem !important;
    }

    .banner-contenido {
        gap: 0.9rem !important;
    }

    .contador-item {
        padding: 0.7rem 0.6rem !important;
        min-width: 64px !important;
    }

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

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

    .barra-busqueda-premium {
        margin-top: 6px !important;
        margin-bottom: 5px !important;
    }

    .filtros-horizontales-premium {
        margin-top: 6px !important;
        margin-bottom: 6px !important;
    }
}

/* Para pantallas muy pequeñas en altura */
@media (max-width: 360px) and (max-height: 640px) {
    .seccion-busqueda-ofertas {
        padding: 1px 0 !important;
        margin: 0 !important;
    }

    .banner-ofertas {
        padding: 1.2rem 1.1rem !important;
    }

    .banner-contenido {
        gap: 0.7rem !important;
    }

    .oferta-icono {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.25rem !important;
    }

    .oferta-texto h3 {
        font-size: 0.95rem !important;
        margin-bottom: 0.25rem !important;
        line-height: 1.1 !important;
    }

    .oferta-texto p {
        font-size: 0.7rem !important;
        line-height: 1.2 !important;
    }

    .oferta-contador {
        gap: 0.4rem !important;
    }

    .contador-item {
        min-width: 52px !important;
        padding: 0.5rem 0.42rem !important;
    }

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

    .contador-label {
        font-size: 0.52rem !important;
        letter-spacing: 0.6px !important;
    }

    .promociones-dots {
        margin-top: 0.6rem !important;
    }

    .barra-busqueda-premium {
        margin-top: 3px !important;
        margin-bottom: 3px !important;
    }

    .filtros-horizontales-premium {
        margin-top: 3px !important;
        margin-bottom: 3px !important;
    }
}