/* ============================================
   OPTIMIZACIÓN DE PRODUCTOS PARA MÓVILES
   Mejora la visualización de tarjetas de productos en dispositivos móviles
   - Etiquetas de línea más visibles y legibles
   - Imágenes más pequeñas para mostrar el producto completo
   - Diseño más compacto y profesional
============================================ */

/* ============================================
   TABLETS (hasta 768px)
============================================ */
@media (max-width: 768px) {
    /* Ajustar altura de imagen para tablets */
    .producto-imagen-container {
        height: 180px !important;
    }

    /* Etiquetas más visibles */
    .producto-badge {
        padding: 4px 8px !important;
        font-size: 9px !important;
        top: 8px !important;
        right: 8px !important;
        gap: 3px !important;
        border-radius: 6px !important;
    }

    .producto-badge i {
        font-size: 8px !important;
    }
}

/* ============================================
   MÓVILES (hasta 576px)
============================================ */
@media (max-width: 576px) {
    /* Imagen más grande para mejor visualización */
    .producto-imagen-container {
        height: 200px !important;
    }

    /* La imagen debe ajustarse para mostrar el producto completo */
    .producto-imagen {
        object-fit: contain !important; /* Cambiado de cover a contain */
        padding: 8px !important; /* Espacio alrededor de la imagen */
    }

    /* Etiquetas de línea más compactas - Solo icono en móviles */
    .producto-badge {
        padding: 6px !important;
        font-size: 0 !important; /* Ocultar texto */
        top: 6px !important;
        right: 6px !important;
        gap: 0 !important;
        border-radius: 50% !important; /* Circular para solo icono */
        font-weight: 700 !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
        opacity: 1 !important;
        width: 28px !important;
        height: 28px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .producto-badge i {
        font-size: 13px !important; /* Icono más grande */
        margin: 0 !important;
    }

    /* Card más compacto */
    .producto-card {
        border-radius: 12px !important;
    }

    /* Info del producto más compacta y centrada */
    .producto-info {
        padding: 12px !important;
        text-align: center !important;
        align-items: center !important;
    }

    .producto-nombre {
        font-size: 13px !important;
        min-height: 32px !important;
        margin-bottom: 6px !important;
        text-align: center !important;
    }

    .producto-categoria {
        font-size: 9px !important;
        margin-bottom: 6px !important;
        text-align: center !important;
    }

    .producto-precio {
        font-size: 16px !important;
        margin: 6px 0 8px 0 !important;
        text-align: center !important;
    }

    /* Stock más compacto y centrado */
    .producto-stock {
        font-size: 10px !important;
        margin-bottom: 8px !important;
        text-align: center !important;
    }

    /* Info de ventas y recomendaciones centradas */
    .producto-vendidos,
    .producto-recomendado {
        justify-content: center !important;
        text-align: center !important;
    }

    /* Precios en promoción centrados */
    .producto-precios-promocion {
        text-align: center !important;
    }

    .producto-precio-original,
    .producto-precio-descuento {
        text-align: center !important;
    }

    .producto-ahorro {
        justify-content: center !important;
        text-align: center !important;
    }

    /* Botón más compacto */
    .btn-agregar-carrito {
        padding: 12px 16px !important;
        font-size: 13px !important;
        gap: 6px !important;
    }

    .btn-agregar-carrito i {
        font-size: 13px !important;
    }

    /* Overlay de acciones más pequeño */
    .producto-card .tienda-boton-accion {
        width: 36px !important;
        height: 36px !important;
        font-size: 13px !important;
    }

    .producto-card .tienda-overlay-acciones {
        gap: 6px !important;
    }
}

/* ============================================
   MÓVILES PEQUEÑOS (hasta 480px)
============================================ */
@media (max-width: 480px) {
    /* Imagen un poco más grande */
    .producto-imagen-container {
        height: 190px !important;
    }

    .producto-imagen {
        padding: 6px !important;
    }

    /* Etiquetas más compactas - Solo icono */
    .producto-badge {
        padding: 5px !important;
        font-size: 0 !important;
        top: 5px !important;
        right: 5px !important;
        gap: 0 !important;
        width: 26px !important;
        height: 26px !important;
    }

    .producto-badge i {
        font-size: 12px !important;
    }

    /* Info más compacta y centrada */
    .producto-info {
        padding: 10px !important;
        text-align: center !important;
    }

    .producto-nombre {
        font-size: 12px !important;
        min-height: 30px !important;
        text-align: center !important;
    }

    .producto-categoria {
        text-align: center !important;
    }

    .producto-precio {
        font-size: 15px !important;
        margin: 5px 0 7px 0 !important;
        text-align: center !important;
    }

    .producto-stock {
        text-align: center !important;
    }

    .btn-agregar-carrito {
        padding: 10px 14px !important;
        font-size: 12px !important;
    }
}

/* ============================================
   MÓVILES MUY PEQUEÑOS (hasta 400px)
============================================ */
@media (max-width: 400px) {
    /* Imagen más grande */
    .producto-imagen-container {
        height: 180px !important;
    }

    .producto-imagen {
        padding: 5px !important;
    }

    /* Etiquetas más pequeñas - Solo icono */
    .producto-badge {
        padding: 5px !important;
        font-size: 0 !important;
        gap: 0 !important;
        width: 24px !important;
        height: 24px !important;
    }

    .producto-badge i {
        font-size: 11px !important;
    }

    /* Info compacta y centrada */
    .producto-info {
        padding: 9px !important;
        text-align: center !important;
    }

    .producto-nombre {
        font-size: 11px !important;
        min-height: 28px !important;
        text-align: center !important;
    }

    .producto-categoria {
        font-size: 8px !important;
        margin-bottom: 5px !important;
        text-align: center !important;
    }

    .producto-precio {
        font-size: 14px !important;
        margin: 4px 0 6px 0 !important;
        text-align: center !important;
    }

    .producto-stock {
        text-align: center !important;
    }

    .btn-agregar-carrito {
        padding: 9px 12px !important;
        font-size: 11px !important;
    }

    .btn-agregar-carrito i {
        font-size: 11px !important;
    }
}

/* ============================================
   MÓVILES EXTRA PEQUEÑOS (hasta 360px)
============================================ */
@media (max-width: 360px) {
    /* Imagen con buen tamaño */
    .producto-imagen-container {
        height: 170px !important;
    }

    .producto-imagen {
        padding: 4px !important;
    }

    /* Etiquetas pequeñas - Solo icono */
    .producto-badge {
        padding: 4px !important;
        font-size: 0 !important;
        top: 5px !important;
        right: 5px !important;
        width: 22px !important;
        height: 22px !important;
    }

    .producto-badge i {
        font-size: 10px !important;
    }

    /* Info mínima y centrada */
    .producto-info {
        padding: 8px !important;
        text-align: center !important;
    }

    .producto-nombre {
        font-size: 11px !important;
        min-height: 26px !important;
        text-align: center !important;
    }

    .producto-categoria {
        text-align: center !important;
    }

    .producto-precio {
        font-size: 13px !important;
        text-align: center !important;
    }

    .producto-stock {
        text-align: center !important;
    }
}

/* ============================================
   OPTIMIZACIÓN PARA SLIDER DE PROMOCIONES
============================================ */
@media (max-width: 576px) {
    /* Imagen para productos en promoción */
    .promocion-card .producto-imagen-container {
        height: 200px !important;
    }

    .promocion-card .producto-imagen {
        object-fit: contain !important;
        padding: 8px !important;
    }

    /* Badge de descuento más visible */
    .badge-descuento-promocion {
        padding: 4px 8px !important;
        font-size: 9px !important;
        top: 6px !important;
        left: 6px !important;
        border-radius: 6px !important;
        font-weight: 700 !important;
    }

    .badge-descuento-promocion i {
        font-size: 8px !important;
    }

    /* Etiqueta "OFERTA" del producto - Solo icono */
    .promocion-card .producto-badge {
        padding: 6px !important;
        font-size: 0 !important;
        width: 28px !important;
        height: 28px !important;
    }

    .promocion-card .producto-badge i {
        font-size: 13px !important;
    }

    /* Precios en promoción */
    .producto-precios-promocion {
        margin: 6px 0 !important;
    }

    .producto-precio-original {
        font-size: 11px !important;
    }

    .producto-precio-descuento {
        font-size: 16px !important;
    }

    .producto-ahorro {
        font-size: 10px !important;
        margin-bottom: 6px !important;
    }
}

@media (max-width: 480px) {
    .promocion-card .producto-imagen-container {
        height: 190px !important;
    }

    .promocion-card .producto-imagen {
        padding: 6px !important;
    }

    .badge-descuento-promocion {
        padding: 3px 7px !important;
        font-size: 8px !important;
    }

    .producto-precio-descuento {
        font-size: 15px !important;
    }
}

@media (max-width: 400px) {
    .promocion-card .producto-imagen-container {
        height: 180px !important;
    }

    .promocion-card .producto-imagen {
        padding: 5px !important;
    }

    .badge-descuento-promocion {
        padding: 3px 6px !important;
        font-size: 7px !important;
    }

    .producto-precio-descuento {
        font-size: 14px !important;
    }
}

/* ============================================
   OPTIMIZACIÓN PARA TOP 10
============================================ */
@media (max-width: 576px) {
    /* Imagen para productos Top 10 */
    .top-card .producto-imagen-container {
        height: 200px !important;
    }

    .top-card .producto-imagen {
        object-fit: contain !important;
        padding: 8px !important;
    }

    /* Ranking más pequeño pero visible */
    .producto-ranking {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
        top: 6px !important;
        left: 6px !important;
    }

    .producto-ranking.medalla-oro {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }

    .producto-ranking.medalla-plata {
        width: 30px !important;
        height: 30px !important;
        font-size: 13px !important;
    }

    .producto-ranking.medalla-bronce {
        width: 29px !important;
        height: 29px !important;
        font-size: 12px !important;
    }

    /* Badge "BEST SELLER" - Ajustado al texto */
    .badge-mejor-vendido {
        padding: 3px 8px !important;
        font-size: 7px !important;
        top: 40px !important;
        width: auto !important;
        max-width: max-content !important;
        white-space: nowrap !important;
    }

    .badge-mejor-vendido i {
        font-size: 7px !important;
    }

    /* Info de ventas */
    .producto-vendidos {
        font-size: 11px !important;
        margin-bottom: 6px !important;
    }

    .producto-recomendado {
        font-size: 11px !important;
        margin-bottom: 6px !important;
    }
}

@media (max-width: 480px) {
    .top-card .producto-imagen-container {
        height: 190px !important;
    }

    .top-card .producto-imagen {
        padding: 6px !important;
    }

    .producto-ranking {
        width: 26px !important;
        height: 26px !important;
        font-size: 11px !important;
    }

    .badge-mejor-vendido {
        padding: 2px 6px !important;
        font-size: 6px !important;
        top: 38px !important;
        width: auto !important;
        max-width: max-content !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 400px) {
    .top-card .producto-imagen-container {
        height: 180px !important;
    }

    .top-card .producto-imagen {
        padding: 5px !important;
    }

    .producto-ranking {
        width: 24px !important;
        height: 24px !important;
        font-size: 10px !important;
    }

    .badge-mejor-vendido {
        padding: 2px 5px !important;
        font-size: 6px !important;
        width: auto !important;
        max-width: max-content !important;
        white-space: nowrap !important;
    }
}

/* ============================================
   MEJORAS GENERALES DE LEGIBILIDAD
============================================ */
@media (max-width: 576px) {
    /* Asegurar que las etiquetas sean siempre legibles */
    .producto-badge {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
        min-height: 20px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Mejorar contraste del texto */
    .producto-nombre,
    .producto-categoria,
    .producto-precio {
        text-shadow: none !important;
    }

    /* Asegurar que los botones sean tocables */
    .btn-agregar-carrito {
        min-height: 40px !important;
        touch-action: manipulation !important;
    }

    .producto-card .tienda-boton-accion {
        min-width: 36px !important;
        min-height: 36px !important;
        touch-action: manipulation !important;
    }
}

/* ============================================
   PREVENIR DESBORDAMIENTO EN MÓVILES
============================================ */
@media (max-width: 576px) {
    .slider-item {
        overflow: hidden !important;
    }

    .producto-card {
        overflow: hidden !important;
        max-width: 100% !important;
    }

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

    /* Evitar que el texto se desborde */
    .producto-nombre,
    .producto-categoria,
    .producto-precio,
    .producto-stock {
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        hyphens: auto !important;
    }
}