/* ============================================
   modales.css — Animaciones estándar para modales
   Usar junto con modales.js
   ============================================ */

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

@keyframes modalSlideIn {
    from { opacity: 0; transform: translateY(-24px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

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

@keyframes modalSlideOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(-16px) scale(0.97); }
}

/* --- Apertura --- */
.modal-overlay.modal-opening {
    animation: modalFadeIn 0.55s ease forwards;
    background: rgba(0, 0, 0, 0.5);
}

.modal-overlay.modal-opening > [id$="-inner"] {
    animation: modalSlideIn 0.55s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
}

/* --- Cierre --- */
.modal-overlay.modal-closing {
    animation: modalFadeOut 0.5s ease forwards;
    background: rgba(0, 0, 0, 0.5);
}

.modal-overlay.modal-closing > [id$="-inner"] {
    animation: modalSlideOut 0.5s ease forwards;
}