/* Estilos para el scroll horizontal de categorías - Nueva implementación */
.categories-horizontal-scroll {
    /* Scrollbar personalizada para WebKit (Chrome, Safari, Edge) */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.3) rgba(255,255,255,0.1);
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.categories-horizontal-scroll::-webkit-scrollbar {
    height: 8px;
}

.categories-horizontal-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.categories-horizontal-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

.categories-horizontal-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Asegurar que el contenedor funcione correctamente */
.categories-horizontal-scroll {
    max-width: 100%;
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
}

/* Estilos para los elementos de categoría */
.category-scroll-item {
    transition: all 0.2s ease;
}

.category-scroll-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Asegurar que no se salga del contenedor padre */
.categories-section {
    overflow: visible !important;
    position: relative;
    max-width: 100% !important;
}

.categories-section .categories-horizontal-scroll {
    position: relative;
    z-index: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .categories-horizontal-scroll {
        height: 35px;
        padding: 3px 0;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .category-scroll-item {
        margin: 0 3px;
        padding: 3px 8px;
        font-size: 11px;
        display: inline-block !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    
    .categories-section {
        overflow: visible !important;
        max-width: 100% !important;
    }
}

/* Tablet devices */
@media (min-width: 577px) and (max-width: 992px) {
    .categories-horizontal-scroll {
        height: 50px;
        padding: 5px 0;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .category-scroll-item {
        margin: 0 5px;
        padding: 8px 12px;
        font-size: 14px;
        display: inline-block !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    
    .categories-section {
        overflow: visible !important;
        max-width: 100% !important;
    }
}

/* Indicadores de scroll (opcional) */
.categories-horizontal-scroll::before,
.categories-horizontal-scroll::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20px;
    pointer-events: none;
    z-index: 1;
}

.categories-horizontal-scroll::before {
    left: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.2), transparent);
}

.categories-horizontal-scroll::after {
    right: 0;
    background: linear-gradient(to left, rgba(0,0,0,0.2), transparent);
}