/**
 * CSS para Modal de Filtros Reutilizable
 */

/* Modal overlay */
.filters-modal-overlay {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* Panel del modal */
.filters-modal-panel {
    will-change: transform;
    backface-visibility: hidden;
}

/* Animaciones del panel */
.filters-modal-panel.show {
    transform: translateX(0) !important;
}

.filters-modal-panel.hide {
    transform: translateX(-100%) !important;
}

/* Contenido de filtros */
.filters-modal-content {
    scrollbar-width: thin;
    scrollbar-color: #d1d5db #f9fafb;
}

.filters-modal-content::-webkit-scrollbar {
    width: 6px;
}

.filters-modal-content::-webkit-scrollbar-track {
    background: #f9fafb;
}

.filters-modal-content::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.filters-modal-content::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Botones de acción */
.filters-modal-actions {
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Estilos para los filtros copiados */
.filters-modal-content .filter-details {
    margin-bottom: 1rem;
}

.filters-modal-content .filter-details summary {
    padding: 0.75rem 0;
    border-bottom: 1px solid #e5e7eb;
}

.filters-modal-content .filter-details[open] summary {
    border-bottom: none;
    margin-bottom: 0.5rem;
}

.filters-modal-content .filter-details[open] .details-arrow {
    transform: rotate(90deg);
}

.filters-modal-content .filter-checkbox {
    accent-color: #f97316;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .filters-modal-panel {
        width: 100vw !important;
    }
}

/* Animaciones suaves */
@media (prefers-reduced-motion: reduce) {
    .filters-modal-panel {
        transition: none !important;
    }
}

/* Estados de carga */
.filters-modal-loading {
    opacity: 0.7;
    pointer-events: none;
}

.filters-modal-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #f97316;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}