/* Modal System Styles for TODOVAN */

/* Asegurar que los modales tengan la prioridad z-index correcta - Por encima de Flux UI */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999; /* Incrementado para estar por encima de Flux */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Z-index específico para modales dinámicos */
[id*="modal"] {
    z-index: 9999 !important;
}

/* Z-index para backdrop de modales dinámicos */
[id*="modal"] .fixed.inset-0.bg-gray-500 {
    z-index: 9998 !important;
}

/* Asegurar que el backdrop funcione en modo oscuro también */
html.dark [id*="modal"] .fixed.inset-0.bg-gray-500 {
    background-color: rgba(0, 0, 0, 0.75) !important;
    z-index: 9998 !important;
}

/* Forzar opacidad del backdrop */
[id*="modal"] .bg-opacity-75 {
    --tw-bg-opacity: 0.75 !important;
    background-color: rgba(107, 114, 128, var(--tw-bg-opacity)) !important;
}

html.dark [id*="modal"] .bg-opacity-75 {
    --tw-bg-opacity: 0.8 !important;
    background-color: rgba(0, 0, 0, var(--tw-bg-opacity)) !important;
}

/* Estilo adicional para asegurar visibilidad del backdrop */
body [id*="modal"]:not(.hidden) {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 9999 !important;
}

/* Forzar el backdrop específicamente */
body [id*="modal"] div[onclick*="closeModal"] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
    z-index: 9998 !important;
    display: block !important;
}

/* Para páginas con Flux UI - forzar backdrop */
body.has-flux [id*="modal"] div[onclick*="closeModal"] {
    background-color: rgba(0, 0, 0, 0.75) !important;
}

/* Prevenir scroll del body cuando el modal está abierto */
body.modal-open {
    overflow: hidden;
}

/* Asegurar que el contenido del modal esté por encima del backdrop */
.modal-content {
    position: relative;
    z-index: 1001;
    max-height: 90vh;
    overflow-y: auto;
}

/* Animaciones para entrada y salida de modales */
.modal-enter {
    opacity: 0;
    transform: scale(0.95);
}

.modal-enter-active {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}

.modal-exit {
    opacity: 1;
    transform: scale(1);
}

.modal-exit-active {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.15s ease-in, transform 0.15s ease-in;
}

/* Estilos para backdrop */
.modal-backdrop-enter {
    opacity: 0;
}

.modal-backdrop-enter-active {
    opacity: 1;
    transition: opacity 0.15s ease-out;
}

.modal-backdrop-exit {
    opacity: 1;
}

.modal-backdrop-exit-active {
    opacity: 0;
    transition: opacity 0.15s ease-in;
}

/* Toast animations */
.toast-enter {
    transform: translateX(100%);
    opacity: 0;
}

.toast-enter-active {
    transform: translateX(0);
    opacity: 1;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.toast-exit {
    transform: translateX(0);
    opacity: 1;
}

.toast-exit-active {
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.3s ease-in, opacity 0.3s ease-in;
}

/* Mejoras visuales para botones en modales */
.modal-button {
    transition: all 0.2s ease-in-out;
}

.modal-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.modal-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

/* Estilos específicos para tipos de modal */
.modal-success .modal-icon {
    background-color: #d1fae5;
    color: #059669;
}

.modal-error .modal-icon {
    background-color: #fee2e2;
    color: #dc2626;
}

.modal-warning .modal-icon {
    background-color: #fef3c7;
    color: #d97706;
}

.modal-info .modal-icon {
    background-color: #dbeafe;
    color: #2563eb;
}