/* ============================================================================
   SISCREDI - MODAL GLOBAL STYLES
   ============================================================================
   Estilos mínimos para modales alineados al sistema SisCredi
   Basado en Bootstrap 5.3.8 con personalizaciones usando tokens.css
   ============================================================================ */

/* ============================================================================
   MODAL BASE - Bootstrap Override
   ============================================================================ */

/* Fix z-index movido al final del archivo (líneas 358+) para evitar duplicados */
/* Los valores correctos están definidos al final siguiendo Bootstrap 5 estándar */

/* IMPORTANTE: .modal-dialog y .modal-content NO deben tener z-index
   para heredar correctamente el stacking context de .modal (z-index: 1055)
   Si tienen z-index explícito, pueden romper la jerarquía visual con el backdrop */
.modal-dialog {
    position: relative;
}

.modal-content {
    background: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    position: relative;
}

/* Dark mode: sombra más pronunciada */
[data-bs-theme="dark"] .modal-content {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* ============================================================================
   MODAL HEADER - Integrado con body (sin separación visual)
   ============================================================================ */

/* Header integrado con el body - sin borde inferior */
.modal .modal-header {
    border-bottom: none;
    padding: 1.5rem 1.5rem 0.5rem 1.5rem;
    background: transparent;
    position: relative;
    overflow: visible;
}

/* CRÍTICO: Anular cualquier pseudo-elemento que pueda interceptar clics */
.modal .modal-header::before,
.modal .modal-header::after {
    content: none;
    display: none;
    pointer-events: none;
}

/* Título centrado con color body y icono primary a la izquierda */
.modal-title {
    color: var(--bs-body-color);
    font-weight: 600;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    text-align: center;
}

/* Icono del título en color primary */
.modal-title i,
.modal-title .bi {
    color: var(--bs-primary);
    font-size: 1.5rem;
}

/* Botón cerrar con estilo normal (no invertido) */
.modal-header .btn-close {
    position: absolute;
    right: 1rem;
    top: 1rem;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.modal-header .btn-close:hover {
    opacity: 1;
}

/* ============================================================================
   MODAL BODY
   ============================================================================ */

.modal-body {
    padding: 1rem 1.5rem 1.5rem 1.5rem;
    color: var(--bs-body-color);
}

/* ============================================================================
   MODAL FOOTER - Background light, botones centrados
   ============================================================================ */

.modal-footer {
    border-top: 1px solid var(--bs-border-color);
    padding: 1rem 1.5rem;
    background-color: var(--bs-light);
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    position: relative;
    z-index: 10;
}

/* Botones del footer siempre lg y centrados */
.modal-footer .btn {
    min-width: 120px;
    font-size: 1rem;
    padding: 0.5rem 1.5rem;
}

/* ============================================================================
   ESTILOS DE BOTONES PARA MODAL ESTÁNDAR (NO AlertModal)
   ============================================================================
   Estos estilos aplican SOLO a modales estándar (modal.html).
   Los AlertModal (.modal-alert) tienen sus propios colores según el tipo
   de alerta (success, danger, warning, info) definidos en alert-modal.js
   ============================================================================ */

/* Primer botón (izquierda): outline-primary - SOLO para modal estándar */
.modal:not(.modal-alert):not(.submit-modal) .modal-footer .btn:first-child:not(:only-child) {
    background-color: transparent;
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.modal:not(.modal-alert):not(.submit-modal) .modal-footer .btn:first-child:not(:only-child):hover {
    background-color: var(--bs-primary);
    color: var(--bs-btn-hover-color, #fff);
}

/* Último botón (derecha) o único botón: primary sólido - SOLO para modal estándar */
.modal:not(.modal-alert):not(.submit-modal) .modal-footer .btn:last-child,
.modal:not(.modal-alert):not(.submit-modal) .modal-footer .btn:only-child {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--bs-btn-color, #fff);
}

.modal:not(.modal-alert):not(.submit-modal) .modal-footer .btn:last-child:hover,
.modal:not(.modal-alert):not(.submit-modal) .modal-footer .btn:only-child:hover {
    background-color: var(--bs-primary);
    filter: brightness(0.9);
}

/* ============================================================================
   WIZARD FOOTER - Footers con estructura especial (botones anidados en divs)
   ============================================================================
   Para footers que usan justify-content-between con botones agrupados,
   respetar las clases Bootstrap explícitas sin sobrescribirlas
   ============================================================================ */

.modal-footer.wizard-footer .btn {
    /* Resetear estilos automáticos - usar clases Bootstrap explícitas */
    background-color: revert;
    border-color: revert;
    color: revert;
}

/* Aplicar estilos Bootstrap según la clase del botón */
.modal-footer.wizard-footer .btn.btn-primary {
    background-color: var(--bs-btn-bg, var(--bs-primary));
    border-color: var(--bs-btn-border-color, var(--bs-primary));
    color: var(--bs-btn-color, #fff);
}

.modal-footer.wizard-footer .btn.btn-primary:hover {
    filter: brightness(0.9);
}

.modal-footer.wizard-footer .btn.btn-outline-primary {
    background-color: transparent;
    border-color: var(--bs-btn-border-color, var(--bs-primary));
    color: var(--bs-btn-color, var(--bs-primary));
}

.modal-footer.wizard-footer .btn.btn-outline-primary:hover {
    background-color: var(--bs-btn-hover-bg, var(--bs-primary));
    color: var(--bs-btn-hover-color, #fff);
}

.modal-footer.wizard-footer .btn.btn-outline-secondary {
    background-color: transparent;
    border-color: var(--bs-btn-border-color, var(--bs-secondary));
    color: var(--bs-btn-color, var(--bs-secondary));
}

.modal-footer.wizard-footer .btn.btn-outline-secondary:hover {
    background-color: var(--bs-btn-hover-bg, var(--bs-secondary));
    color: var(--bs-btn-hover-color, #fff);
}

.modal-footer.wizard-footer .btn.btn-success {
    background-color: var(--bs-btn-bg, var(--bs-success));
    border-color: var(--bs-btn-border-color, var(--bs-success));
    color: var(--bs-btn-color, #fff);
}

.modal-footer.wizard-footer .btn.btn-success:hover {
    filter: brightness(0.9);
}

/* ============================================================================
   MODAL BACKDROP
   ============================================================================ */

.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.75);
}

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

/* ============================================================================
   MODAL ANIMATIONS
   ============================================================================ */

.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    transform: scale(0.9) translateY(-30px);
}

.modal.show .modal-dialog {
    transform: scale(1) translateY(0);
}

.modal-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - var(--bs-spacer-5) * 2);
}

/* ============================================================================
   MODAL SIZES
   ============================================================================ */

.modal-sm {
    max-width: 400px;
}

.modal-lg {
    max-width: 800px;
}

.modal-xl {
    max-width: 1140px;
}

.modal-fullscreen {
    max-width: 100%;
    margin: 0;
}

/* ============================================================================
   MODAL ICON SUPPORT
   ============================================================================ */

.modal-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg,
            var(--bs-primary),
            var(--bs-primary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--bs-spacer-4);
    animation: iconBounce 0.6s ease-out;
    box-shadow:
        0 10px 30px rgba(var(--bs-primary-rgb), 0.3),
        0 0 0 8px rgba(var(--bs-primary-rgb), 0.1);
}

.modal-icon i {
    font-size: 2.5rem;
    color: white;
}

@keyframes iconBounce {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ============================================================================
   MODAL SUCCESS/ERROR/WARNING VARIANTS
   ============================================================================
   Las variantes ahora solo afectan al icono del título y al modal-icon,
   el header siempre es transparente
   ============================================================================ */

/* SUCCESS */
.modal-success .modal-title i,
.modal-success .modal-title .bi {
    color: var(--bs-success);
}

.modal-success .modal-icon {
    background: linear-gradient(135deg, var(--bs-success), var(--bs-success));
    box-shadow:
        0 10px 30px rgba(var(--bs-success-rgb), 0.3),
        0 0 0 8px rgba(var(--bs-success-rgb), 0.1);
}

/* DANGER */
.modal-danger .modal-title i,
.modal-danger .modal-title .bi {
    color: var(--bs-danger);
}

.modal-danger .modal-icon {
    background: linear-gradient(135deg, var(--bs-danger), var(--bs-danger));
    box-shadow:
        0 10px 30px rgba(var(--bs-danger-rgb), 0.3),
        0 0 0 8px rgba(var(--bs-danger-rgb), 0.1);
}

/* WARNING */
.modal-warning .modal-title i,
.modal-warning .modal-title .bi {
    color: var(--bs-warning);
}

.modal-warning .modal-icon {
    background: linear-gradient(135deg, var(--bs-warning), var(--bs-warning));
    box-shadow:
        0 10px 30px rgba(var(--bs-warning-rgb), 0.3),
        0 0 0 8px rgba(var(--bs-warning-rgb), 0.1);
}

/* INFO */
.modal-info .modal-title i,
.modal-info .modal-title .bi {
    color: var(--bs-primary);
}

.modal-info .modal-icon {
    background: linear-gradient(135deg, var(--bs-info), var(--bs-info));
    box-shadow:
        0 10px 30px rgba(var(--bs-info-rgb), 0.3),
        0 0 0 8px rgba(var(--bs-info-rgb), 0.1);
}

/* ============================================================================
   MODAL CONTENT ENHANCEMENTS
   ============================================================================ */

.modal-subtitle {
    font-size: 1.125rem;
    color: var(--bs-secondary-color);
    margin-bottom: var(--bs-spacer-4);
    text-align: center;
}

.modal-list {
    list-style: none;
    padding: 0;
    margin: var(--bs-spacer-4) 0;
}

.modal-list-item {
    display: flex;
    align-items: center;
    padding: var(--bs-spacer-3) 0;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.modal-list-item:last-child {
    border-bottom: none;
}

.modal-list-item i {
    margin-right: var(--bs-spacer-3);
    color: var(--bs-primary);
    font-size: 1.25rem;
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

@media (max-width: 576px) {
    .modal-content {
        border-radius: var(--bs-border-radius);
    }

    .modal-header {
        padding: var(--bs-spacer-3) var(--bs-spacer-4);
        border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
    }

    .modal-body {
        padding: var(--bs-spacer-4);
    }

    .modal-footer {
        padding: var(--bs-spacer-3) var(--bs-spacer-4);
    }

    .modal-icon {
        width: 60px;
        height: 60px;
    }

    .modal-icon i {
        font-size: 2rem;
    }

    .modal-title {
        font-size: 1.25rem;
    }

    .modal-subtitle {
        font-size: 1rem;
    }
}

/* ============================================================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================================================ */

.modal-content:focus {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

    .modal.fade .modal-dialog,
    .modal-icon,
    .modal-header::before {
        animation: none;
        transition: none;
    }
}

/* ============================================================================
   FIX: Backdrop Superpuesto - Usar valores Bootstrap 5 estándar
   ============================================================================ */

/*
 * Bootstrap 5 z-index stack:
 * - .modal-backdrop: 1050
 * - .modal: 1055
 *
 * NO usamos isolation: isolate porque crea stacking context independiente
 * que puede causar que el backdrop quede por encima visualmente
 *
 * ESPECIFICIDAD MÁXIMA: Usamos múltiples selectores con máxima especificidad
 * para sobrescribir cualquier estilo de Bootstrap o estilos inline
 */

/* Modal debe estar siempre por encima del backdrop - Especificidad máxima */
.modal.fade,
.modal.show,
.modal,
div.modal,
div[id*="Modal"].modal {
    z-index: 1055;
    /* Valor estándar Bootstrap 5 */
}

/* Backdrop debe estar siempre por debajo del modal - Especificidad máxima */
.modal-backdrop.fade,
.modal-backdrop.show,
.modal-backdrop,
div.modal-backdrop {
    z-index: 1050;
    /* Valor estándar Bootstrap 5 */
}

/* CRÍTICO: .modal-dialog y .modal-content NO deben tener z-index
   Ya fueron corregidos en las líneas 18-28 para NO tener z-index
   Si tienen z-index (incluso heredado), rompen el stacking context visual */