/**
 * List Products Mobile Navigation
 * 
 * Ajustes para el carrusel de productos en el componente #list-products en móvil:
 * - Oculta los dots (puntos de navegación)
 * - Muestra flechas de navegación en su lugar
 * - Solo se aplica en resoluciones móviles (hasta 768px)
 */

/* ========================================
   MÓVIL - Hasta 768px
   ======================================== */

@media (max-width: 768px) {
    
    /* Ocultar dots en móvil para el componente list-products */
    #list-products .owl-dots {
        display: none !important;
    }
    
    /* Mostrar flechas de navegación */
    #list-products .owl-nav {
        display: block !important;
        position: relative;
        margin-top: 20px;
        text-align: center;
    }
    
    /* Estilo base para los botones de navegación */
    #list-products .owl-nav button.owl-prev,
    #list-products .owl-nav button.owl-next {
        display: inline-block !important;
        width: 45px;
        height: 45px;
        background: rgba(102, 126, 234, 0.9) !important;
        color: #ffffff !important;
        border: none;
        border-radius: 50%;
        font-size: 20px;
        line-height: 45px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        margin: 0 8px;
        padding: 0;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
    
    /* Hover en las flechas */
    #list-products .owl-nav button.owl-prev:hover,
    #list-products .owl-nav button.owl-next:hover {
        background: rgba(118, 75, 162, 0.95) !important;
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    }
    
    /* Estado deshabilitado */
    #list-products .owl-nav button.disabled {
        opacity: 0.4 !important;
        cursor: not-allowed !important;
        background: rgba(102, 126, 234, 0.5) !important;
    }
    
    #list-products .owl-nav button.disabled:hover {
        transform: none !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    }
    
    /* Iconos de las flechas usando Font Awesome o caracteres Unicode */
    #list-products .owl-nav button.owl-prev::before,
    #list-products .owl-nav button.owl-next::before {
        font-family: 'FontAwesome', Arial, sans-serif;
        font-size: 18px;
        font-weight: bold;
    }
    
    #list-products .owl-nav button.owl-prev::before {
        content: '\f053'; /* FontAwesome chevron-left */
    }
    
    #list-products .owl-nav button.owl-next::before {
        content: '\f054'; /* FontAwesome chevron-right */
    }
    
    /* Fallback si FontAwesome no está disponible */
    #list-products .owl-nav button.owl-prev span,
    #list-products .owl-nav button.owl-next span {
        font-size: 0;
    }
    
    #list-products .owl-nav button.owl-prev span::after {
        content: '‹';
        font-size: 32px;
        font-weight: bold;
    }
    
    #list-products .owl-nav button.owl-next span::after {
        content: '›';
        font-size: 32px;
        font-weight: bold;
    }
    
    /* Ajuste de espaciado para el carrusel */
    #list-products .gsf-slider-container,
    #list-products .owl-carousel {
        margin-bottom: 15px;
    }
    
    /* Asegurar que haya espacio para las flechas */
    #list-products {
        padding-bottom: 20px;
    }
}

/* ========================================
   TABLET Y ESCRITORIO - Más de 768px
   ======================================== */

@media (min-width: 769px) {
    /* En desktop, mantener comportamiento por defecto */
    #list-products .owl-nav {
        /* Las flechas se muestran según configuración del theme */
    }
    
    #list-products .owl-dots {
        /* Los dots se muestran según configuración del theme */
    }
}