/*!
 * QUIPU Design System — SWEETALERT2 (global)
 * Version: 1.0.0  ·  Build: 2026-09-07
 *
 * `design-system-modals.css` dice que estandariza «TODOS los popups del sistema»,
 * pero sólo alcanza a los de Bootstrap (`.modal-*`). Los de SweetAlert2 se quedaron
 * con su aspecto de fábrica y por eso desentonan: 32em de ancho (512px, más que un
 * modal del sistema), icono de 5em, título de 1.875em centrado y botones con
 * padding en `em`. Al lado de una ficha del sistema parecen de otra aplicación.
 *
 * Este archivo es el gemelo de `design-system-modals.css` para SweetAlert2: mismas
 * medidas, mismos tokens, misma gramática.
 *
 *     cabecera navy, título 14px en mayúsculas   ← .modal-header
 *     cuerpo 16px de padding, texto 13px          ← .modal-body
 *     input de 38px, radio sm, foco con anillo    ← .modal-body .form-control
 *     pie con borde, botones 40px / 120px mínimo  ← .modal-footer .btn
 *
 * ── Por qué la cabecera y no sólo achicar ────────────────────────────────────
 * Encoger el popup lo haría más pequeño, no más coherente. Lo que hace que un
 * diálogo del sistema se reconozca como del sistema es la barra navy con el título
 * en mayúsculas: la llevan todas las fichas. SweetAlert2 ya agrupa icono y título
 * en `.swal2-header`, así que la barra sale de poner esa caja en fila.
 *
 * ── El icono ─────────────────────────────────────────────────────────────────
 * Baja de 5em a 22px y se queda DENTRO de la barra, a la izquierda del título.
 * Sus colores de fábrica (ámbar #F8BB86, rojo #F27474) están pensados para fondo
 * blanco y sobre navy pierden contraste, así que se sustituyen por las variantes
 * claras de cada intención. El icono sigue diciendo de qué va el aviso; deja de
 * ser el protagonista del diálogo.
 *
 * ── Alcance ──────────────────────────────────────────────────────────────────
 * Afecta a TODOS los `Swal.fire` de la aplicación, que es justo el objetivo: hoy
 * cada uno se ve distinto del resto de la interfaz. Reversible: quitar el <link>.
 * ================================================================ */

/* ── El contenedor ─────────────────────────────────────────────────────────── */
.swal2-popup {
  width: 440px !important;
  max-width: calc(100vw - 32px) !important;
  padding: 0 !important;
  border-radius: var(--q-modal-radius, 10px) !important;
  box-shadow: var(--q-modal-shadow, 0 12px 40px rgba(0,0,0,.22)) !important;
  overflow: hidden !important;
  background: var(--q-surface, #FFFFFF) !important;
  font-family: var(--q-font-family, 'Inter', -apple-system, 'Segoe UI', sans-serif) !important;
  font-size: 14px !important;
}

/* ── Cabecera navy, igual que .modal-header ────────────────────────────────── */
.swal2-header {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 12px 16px !important;
  background: var(--q-modal-header-bg, #1b3a8c) !important;
}

.swal2-title {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--q-color-on-primary, #FFFFFF) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  text-align: left !important;
  text-transform: uppercase !important;
  letter-spacing: .03em !important;
}

/* El icono: pequeño, dentro de la barra y con colores que se ven sobre navy. */
.swal2-icon {
  flex: 0 0 auto !important;
  width: 22px !important; min-width: 22px !important; height: 22px !important;
  margin: 0 !important;
  border-width: 2px !important;
  line-height: 18px !important;
  font-size: 13px !important;
}
.swal2-icon .swal2-icon-content { font-size: 15px !important; line-height: 18px !important; }
.swal2-icon.swal2-warning  { color: #FBBF24 !important; border-color: #FBBF24 !important; }
.swal2-icon.swal2-error    { color: #FCA5A5 !important; border-color: #FCA5A5 !important; }
.swal2-icon.swal2-success  { color: #6EE7A8 !important; border-color: #6EE7A8 !important; }
.swal2-icon.swal2-info,
.swal2-icon.swal2-question  { color: #93C5FD !important; border-color: #93C5FD !important; }

/* El icono de éxito dibuja su palomita con líneas y un anillo; a 22px hay que
   recolocarlos o se sale de la circunferencia. */
.swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: #6EE7A8 !important; height: 2px !important; }
.swal2-icon.swal2-success .swal2-success-line-tip  { top: 11px !important; left: 3px !important;  width: 6px !important; }
.swal2-icon.swal2-success .swal2-success-line-long { top: 9px !important;  right: 3px !important; width: 11px !important; }
.swal2-icon.swal2-success .swal2-success-ring { width: 22px !important; height: 22px !important; border-width: 2px !important; border-color: rgba(110,231,168,.35) !important; }
.swal2-icon.swal2-success [class^='swal2-success-circular-line'],
.swal2-icon.swal2-success .swal2-success-fix { display: none !important; }
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: #FCA5A5 !important; height: 2px !important; top: 10px !important; width: 14px !important; left: 3px !important; }

/* La X de cerrar, sobre la barra. */
.swal2-close {
  position: absolute !important; top: 6px !important; right: 8px !important;
  width: 28px !important; height: 28px !important; margin: 0 !important;
  color: var(--q-color-on-primary, #FFFFFF) !important;
  opacity: .75 !important; font-size: 26px !important; line-height: 26px !important;
}
.swal2-close:hover { color: var(--q-color-on-primary, #FFFFFF) !important; opacity: 1 !important; }

/* ── Cuerpo, igual que .modal-body ─────────────────────────────────────────── */
/* El relleno va en el CONTENIDO, no en su caja.
   SweetAlert2 no vacía `.swal2-content`: siempre lleva dentro el contenedor de
   HTML y los ocho tipos de campo, y oculta con `display:none` los que no se usan.
   Así que `:empty` nunca casa, y poner el padding en la caja dejaba una franja
   blanca de 32px en los avisos que sólo tienen título —un «Se registró
   correctamente» quedaba con un hueco debajo—. Puesto en los hijos, el que está
   oculto no ocupa nada y la franja desaparece sola, sin depender de `:has()`. */
.swal2-content {
  padding: 0 !important;
  color: var(--q-text-1, #1E293B) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  text-align: left !important;
}
.swal2-html-container {
  padding: 16px 16px 0 !important;
  text-align: left !important;
}
.swal2-content p { margin: 0 0 8px !important; text-align: left !important; }
.swal2-content p:last-child { margin-bottom: 0 !important; }
.swal2-content b, .swal2-content strong { font-weight: 600 !important; color: var(--q-text-1, #1E293B) !important; }

/* ── Campo, igual que .modal-body .form-control ────────────────────────────── */
.swal2-input, .swal2-textarea, .swal2-select {
  box-sizing: border-box !important;
  width: calc(100% - 32px) !important;
  height: 38px !important;
  margin: 12px 16px 0 !important;
  padding: 0 10px !important;
  border: 1px solid var(--q-input-border, #E5E7EB) !important;
  border-radius: var(--q-radius-sm, 6px) !important;
  background: var(--q-surface, #FFFFFF) !important;
  color: var(--q-text-1, #1E293B) !important;
  font-size: 12px !important;
  box-shadow: none !important;
}
.swal2-textarea { height: auto !important; padding: 8px 10px !important; }
.swal2-input:focus, .swal2-textarea:focus, .swal2-select:focus {
  border-color: var(--q-input-focus, #2563EB) !important;
  box-shadow: 0 0 0 3px var(--q-focus-ring, rgba(37,99,235,.30)) !important;
  outline: none !important;
}

/* El aviso de validación: una línea dentro del cuerpo, no una banda gris ancha. */
.swal2-validation-message {
  justify-content: flex-start !important;
  margin: 8px 16px 0 !important;
  padding: 8px 10px !important;
  border-radius: var(--q-radius-sm, 6px) !important;
  background: var(--q-color-danger-light, rgba(220,38,38,.12)) !important;
  color: var(--q-color-danger, #DC2626) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
.swal2-validation-message::before { display: none !important; }

/* ── Pie, igual que .modal-footer ──────────────────────────────────────────── */
.swal2-actions {
  width: 100% !important;
  justify-content: flex-end !important;
  margin: 16px 0 0 !important;
  padding: 12px 16px !important;
  border-top: 1px solid var(--q-border, #E5E7EB) !important;
}
.swal2-actions:empty { display: none !important; }

.swal2-styled {
  height: 40px !important;
  min-width: 120px !important;
  margin: 0 0 0 8px !important;
  padding: 0 20px !important;
  border: 1px solid transparent !important;
  border-radius: var(--q-radius-sm, 6px) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.swal2-styled:focus { box-shadow: 0 0 0 3px var(--q-focus-ring, rgba(37,99,235,.30)) !important; }

/* Cancelar es GRIS, no rojo: la misma decisión que ya tomaron los modales del
   sistema (PO 2026-08-09). El rojo se reserva para la acción destructiva, que
   aquí es el botón de confirmar, y dos rojos enfrentados no dicen cuál es cuál. */
.swal2-cancel.swal2-styled {
  background-color: var(--q-action-cancel, #6B7280) !important;
  border-color: var(--q-action-cancel, #6B7280) !important;
  color: #FFFFFF !important;
}

/* El color de CONFIRMAR lo decide cada llamada con `confirmButtonColor` —rojo para
   depurar, azul para pasar a producción—, y SweetAlert2 lo escribe en línea. Este
   valor es sólo el defecto para las llamadas que no piden ninguno, y va SIN
   `!important` a propósito: así el estilo en línea gana y la intención de cada
   llamada llega a la pantalla.

   No es un detalle. `skin-peru.css` tenía aquí un
   `background-color: var(--peru-rojo) !important` que se comía todos los
   `confirmButtonColor` de la aplicación —y `--peru-rojo` ya no es rojo, resuelve
   al azul del tema—, de modo que un «Depurar» irreversible y un «Confirmar»
   inocuo salían del mismo color. Ese bloque quedó retirado y comentado allí. */
.swal2-styled.swal2-confirm {
  background-color: var(--q-color-primary, #2563EB);
  border-color: transparent;
  color: #FFFFFF !important;
}

/* El fondo del velo, alineado con el de los modales del sistema. */
.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-shown { background: rgba(15, 23, 42, .55) !important; }