/* Estilos para modales */
.modal-backdrop {
    backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease-out;
}

.modal-backdrop > div {
    animation: slideIn 0.2s ease-out;
}

.modal-backdrop.hidden {
    animation: fadeOut 0.2s ease-in;
}

.modal-backdrop.hidden > div {
    animation: slideOut 0.2s ease-in;
}

/* Prevenir que el contenido del modal cierre el modal */
.modal-content {
    pointer-events: auto;
}

/* Scroll personalizado para modales */
.modal-scroll {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 #f7fafc;
}

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

.modal-scroll::-webkit-scrollbar-track {
    background: #f7fafc;
    border-radius: 3px;
}

.modal-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 3px;
}

.modal-scroll::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

/* Animaciones */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes slideIn {
    from { 
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to { 
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes slideOut {
    from { 
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    to { 
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
}