/* ========================================================================
    📱 CSS COMPARTIDO MINIMALISTA PARA TODOS LOS MODALES - OPTIMIZADO
    ======================================================================== */

/* Variables globales para personalizar borde/sombra/foco de modales */
:root {
    --modal-border-color: #ff8c42; /* naranja unificado con navbar (#ff8c42) */
    --modal-border-weak: rgba(255,140,66,0.06); /* tono de soporte muy sutil */
    --modal-focus-outline: rgba(22,90,170,0.22); /* outline accesible para foco */
}

/* =================
   🔧 TRANSICIONES Y COMPORTAMIENTO (CRÍTICO)
   ================= */

/* Override de Bootstrap para suavidad forzada */
.modal.fade {
    transition: opacity 0.3s ease-out !important;
}

.modal.fade .modal-dialog {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: translateY(-50px) !important;
    /* Eliminado min-height que causaba saltos */
    display: flex;
    align-items: center; /* Centrado vertical */
    margin: 1.75rem auto; /* Margen por defecto de Bootstrap (sobrescrito en móvil) */
}

.modal.show .modal-dialog {
    transform: translateY(0) !important;
}

.modal-backdrop.fade {
    transition: opacity 0.3s ease-out !important;
}

/* Fix para backdrop en pantallas muy anchas */
@media (min-width: 1400px) {
    .modal-backdrop {
        background-color: rgba(0, 0, 0, 0.6);
    }
}

/* =================
   🎨 ESTILOS VISUALES BASE
   ================= */

.modal-content {
    border: 2px solid var(--modal-border-color); /* Borde naranja consistente */
    border-radius: 15px; /* Unificado a 15px */
    /* Sin sombra: diseño plano con borde naranja de 2px */
    box-shadow: none !important;
    width: 100%;
    color: #212529;
    /* Transición para cambios de tamaño internos (sombra deshabilitada) */
    transition: transform 0.22s ease;
}

/* Estado de foco accesible para navegación por teclado */
.modal-content:focus,
.modal-content:focus-visible {
    outline: 3px solid var(--modal-focus-outline);
    outline-offset: 4px;
}

/* Clase alternativa si se desea borde aún menos saturado */
.modal-content.subtle-border {
    border-color: rgba(230,126,34,0.65);
}

.modal-header {
    border: none;
    padding: 1rem;
    border-radius: 15px 15px 0 0;
}

.modal-footer {
    padding: 1rem;
    border-top: 2px solid #f8f9fa;
    border: none;
    border-radius: 0 0 15px 15px;
}

/* Padding base para todos los bodies */
.modal-body {
    padding: 1rem;
}

/* =================
   📱 RESPONSIVE (MOBILE FIRST)
   ================= */

/* Mobile (< 768px) */
@media (max-width: 767px) {
    .modal-dialog {
        margin: 0.75rem !important;
        max-width: calc(100% - 1.5rem) !important;
    }
    
    .modal.fade .modal-dialog,
    .modal.show .modal-dialog {
        margin: 0.75rem !important;
    }
}

/* Tablet (768px+) */
@media (min-width: 768px) {
    .modal-header {
        padding: 1.5rem 2rem;
    }
    
    .modal-body {
        padding: 2rem;
        /* Scroll interno solo si es necesario en pantallas medianas */
        max-height: 75vh;
        overflow-y: auto;
    }
    
    .modal-footer {
        padding: 1.5rem 2rem;
    }
}

/* Desktop (992px+) */
@media (min-width: 992px) {
    /* Layout en columnas para formularios */
    .form-desktop-columns {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        align-items: start;
    }
    
    .form-desktop-full-width {
        grid-column: 1 / -1;
    }
    
    .modal-grid-desktop {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 2rem;
        align-items: start;
    }

    /* Estilos de formulario mejorados */
    .modal-content .form-control {
        padding: 0.75rem 1rem;
        font-size: 1rem;
        border-radius: 8px;
        border: 2px solid #e9ecef;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    
    .modal-content .btn {
        padding: 0.75rem 1.5rem;
        font-weight: 600;
        border-radius: 8px;
        transition: all 0.3s ease;
    }
}

/* Large Desktop (1200px+) */
@media (min-width: 1200px) {
    .modal-header,
    .modal-footer {
        padding: 2rem 2.5rem;
    }
    
    .modal-body {
        padding: 2.5rem;
    }
    
    .modal-three-columns {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

/* =================
   🛠️ UTILIDADES (Consolidadas)
   ================= */

/* Ancho extra */
.modal-ultra-wide {
    width: 95% !important;
    max-width: 1400px !important; /* Límite de seguridad */
}

/* Scroll forzado */
.modal-scrollable-content,
.modal-body-scrollable {
    max-height: 80vh;
    overflow-y: auto;
    padding-right: 0.5rem; /* Espacio para scrollbar */
}

/* Estado de carga */
.modal-loading-state {
    opacity: 0.7;
    pointer-events: none;
    position: relative;
}

.modal-loading-state::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.8);
    border-radius: 15px;
    z-index: 1000;
    /* Podrías añadir un spinner aquí si quisieras */
}

/* =================
   ♿ ACCESIBILIDAD
   ================= */

/* Estados de foco unificados */
.modal-content .btn:focus,
.modal-content .form-control:focus {
    outline: 2px solid #165aaa;
    outline-offset: 2px;
    border-color: #165aaa;
    box-shadow: 0 0 0 0.25rem rgba(22, 90, 170, 0.15);
}

/* Cursores correctos */
.modal-content button,
.modal-content .btn {
    cursor: pointer;
}

.modal-content input,
.modal-content select,
.modal-content textarea {
    cursor: text; /* Input debe ser texto, no mano */
}