/*!
 * QUIPU Design System — MODALES (global)
 * Version: 1.1.0  ·  Build: 2026-06-26
 * Estandariza TODOS los popups del sistema con el patrón aplicado
 * (encabezado navy, inputs uniformes, footer con color por intención).
 * Solo afecta a .modal-* → bajo riesgo. Reversible: quitar el <link>.
 * v1.1.0 (Hardening): COLORES y RADIOS migrados a tokens --q-* (cero hex
 * de paleta). Los modales ahora heredan la paleta oficial (navy de panel,
 * verde Guardar / rojo Cerrar = acciones oficiales). Única fuente de verdad.
 * La distribución en 2 columnas la dan las clases col-md-* del markup.
 * ================================================================ */

/* Ancho cómodo (no toca modales pequeños ni grandes explícitos) */
.modal-dialog:not(.modal-sm):not(.modal-lg) { max-width: 720px !important; }

/* Contenedor */
.modal-content { border: 0 !important; border-radius: var(--q-modal-radius) !important; overflow: hidden !important; box-shadow: 0 12px 40px rgba(0,0,0,.22) !important; }

/* Encabezado navy (= cabecera de panel/bandeja) */
.modal-header { background: var(--q-modal-header-bg) !important; border: 0 !important; padding: 12px 16px !important; align-items: center !important; }
.modal-header .modal-title,
.modal-header .modal-title strong,
.modal-header h3, .modal-header h4, .modal-header h5 {
  color: var(--q-color-on-primary) !important; font-size: 14px !important; font-weight: 600 !important;
  text-transform: uppercase !important; letter-spacing: .03em !important; margin: 0 !important;
}
.modal-header .close, .modal-header .close span { color: var(--q-color-on-primary) !important; opacity: .9 !important; text-shadow: none !important; }

/* Cuerpo: labels y controles uniformes */
.modal-body { padding: 16px 16px 8px !important; }
.modal-body .form-group { margin-bottom: 8px !important; }
.modal-body label { font-size: 12px !important; font-weight: 600 !important; color: var(--q-text-1) !important; margin-bottom: 4px !important; }
.modal-body .form-control { height: 38px !important; border: 1px solid var(--q-input-border) !important; border-radius: var(--q-radius-sm) !important; font-size: 12px !important; box-shadow: none !important; color: var(--q-text-1) !important; }
.modal-body textarea.form-control { height: auto !important; }
.modal-body .form-control:focus { border-color: var(--q-input-focus) !important; box-shadow: 0 0 0 3px var(--q-focus-ring) !important; }
.modal-body .select2-container { width: 100% !important; }
.modal-body .select2-container--default .select2-selection--single { height: 38px !important; border: 1px solid var(--q-input-border) !important; border-radius: var(--q-radius-sm) !important; }
.modal-body .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 36px !important; font-size: 12px !important; }
.modal-body .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px !important; }

/* Footer: botones uniformes + color por intención (paleta oficial) */
.modal-footer { border-top: 1px solid var(--q-border) !important; padding: 12px 16px !important; }
.modal-footer .btn {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  gap: 7px !important; height: 40px !important; min-width: 120px !important; padding: 0 20px !important;
  border-radius: var(--q-radius-sm) !important; font-weight: 600 !important; font-size: 13px !important; margin: 0 0 0 8px !important;
}
.modal-footer .btn em, .modal-footer .btn .fa { margin: 0 !important; }
/* Guardar / Confirmar / Aceptar = verde · Cerrar / Cancelar / Eliminar = rojo · otros primary = azul */
.modal-footer #btnGuardar, .modal-footer #btnActualizar, .modal-footer .btn-success { background: var(--q-action-save) !important; border-color: var(--q-action-save) !important; color: var(--q-color-on-primary) !important; }
.modal-footer #btnCerrar, .modal-footer .btn-danger { background: var(--q-action-delete) !important; border-color: var(--q-action-delete) !important; color: var(--q-color-on-primary) !important; }
.modal-footer .btn-primary:not(#btnGuardar):not(#btnActualizar) { background: var(--q-color-primary) !important; border-color: var(--q-color-primary) !important; color: var(--q-color-on-primary) !important; }
.modal-footer .btn-info { background: var(--q-color-primary) !important; border-color: var(--q-color-primary) !important; color: var(--q-color-on-primary) !important; }