/**
 * Catálogo Filtros - Estilos
 * Estilos adicionales para el sistema de filtros del catálogo
 * 
 * @package Cinsa-2025
 */

/* Estado activo para botones de filtro de tags */
[data-filter-type="tag"].active {
    background-color: var(--catalog-filter-active-color, var(--brand-secondary-color, rgb(225, 0, 84))) !important;
    color: white !important;
}

/* Estado activo para botones de material, tamaño y color */
[data-filter-type="material"].active,
[data-filter-type="tamano"].active,
[data-filter-type="color"].active {
    background-color: var(--catalog-filter-active-color, var(--brand-secondary-color, rgb(225, 0, 84))) !important;
    color: white !important;
}

/* Transiciones suaves */
[data-filter-type] {
    transition: all 0.3s ease;
}

/* Cursor pointer para todos los filtros */
[data-filter-type],
.pagination-btn {
    cursor: pointer;
}

/* Hover states */
[data-filter-type]:hover {
    transform: translateY(-2px);
}

.pagination-btn:hover {
    opacity: 0.8;
    transform: scale(1.05);
}

/* Loading state */
#catalogo-productos-grid.loading {
    opacity: 0.5;
    pointer-events: none;
}

/* Tags/chips en tarjetas de producto: mismo flujo de color por marca */
.catalog-product-tag {
    background-color: rgba(var(--catalog-filter-active-color-rgb, 225, 0, 84), 0.12);
    color: rgba(var(--catalog-filter-active-color-rgb, 225, 0, 84), 0.82);
}