/* =========================================================================
   Maptainer · Tema global para SweetAlert2
   Replica el diseño del modal de bienvenida del login (html/login.html) y lo
   aplica a TODOS los modales de la aplicación sin tocar las llamadas.
   Se carga siempre justo después del <script> de sweetalert2@11.
   ========================================================================= */

:root {
  --mts-bg-panel:  #FFFFFF;
  --mts-ink:       #0E1A2B;
  --mts-ink-soft:  #475467;
  --mts-ink-muted: #8A93A0;
  --mts-line:      #E4DFD6;
  --mts-line-soft: #EFEBE2;
  --mts-brand:     #19598F;
  --mts-brand-hi:  #1F6BAA;
  --mts-brand-ring: rgba(25, 89, 143, 0.18);
  --mts-ok:        #17A05B;
  --mts-warn:      #D9930B;
  --mts-danger:    #D1344A;
  --mts-info:      #0A8BB0;
  --mts-font:      'Inter', 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mts-mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --mts-radius:    14px;
  --mts-shadow:    0 28px 56px -24px rgba(14, 26, 43, 0.45), 0 2px 6px rgba(14, 26, 43, 0.06);
}

/* ── Fondo / backdrop ──────────────────────────────────────────────────── */
/* `html.swal2-toast-shown` marca los toasts: ahí el contenedor debe seguir
   siendo transparente y sin capturar clics. */
html:not(.swal2-toast-shown) .swal2-container.swal2-backdrop-show:not(.swal2-backdrop-hide),
html:not(.swal2-toast-shown) .swal2-container.swal2-shown:not(.swal2-backdrop-hide) {
  background: rgba(14, 26, 43, 0.45) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* ── Caja del modal ────────────────────────────────────────────────────── */
.swal2-popup:not(.swal2-toast) {
  padding: 30px 32px 26px !important;
  border: 1px solid var(--mts-line);
  border-radius: var(--mts-radius);
  background: var(--mts-bg-panel);
  box-shadow: var(--mts-shadow);
  font-family: var(--mts-font);
  color: var(--mts-ink);
}

/* ── Título ────────────────────────────────────────────────────────────── */
.swal2-popup:not(.swal2-toast) .swal2-title {
  padding: 0 !important;
  margin: 0;
  font-family: var(--mts-font);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--mts-ink);
}

/* ── Cuerpo ────────────────────────────────────────────────────────────── */
.swal2-popup:not(.swal2-toast) .swal2-html-container {
  margin: 10px 0 0 !important;
  padding: 0 !important;
  font-size: 14px;
  line-height: 1.55;
  color: var(--mts-ink-soft);
  overflow: visible;
}
.swal2-popup:not(.swal2-toast) .swal2-title:empty + .swal2-html-container {
  margin-top: 0 !important;
}

/* Antetítulo opcional (mono, mayúsculas) — mismo recurso que usa el login */
.mt-swal-eyebrow {
  font-family: var(--mts-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mts-ink-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}
.mt-swal-eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--mts-ok);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(23, 160, 91, 0.25);
}

/* ── Iconos ────────────────────────────────────────────────────────────── */
/* El icono se escala con font-size: toda su geometría interna está en `em`,
   así que cambiar sólo width/height descuadraría el check y la cruz. */
.swal2-popup:not(.swal2-toast) .swal2-icon {
  font-size: 11.2px;           /* 5em = 56px */
  width: 5em; height: 5em;
  margin: 0 auto 18px !important;
  border-width: 0.27em;
}

.swal2-icon.swal2-success { border-color: rgba(23, 160, 91, 0.45) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(23, 160, 91, 0.45) !important; }
.swal2-icon.swal2-success [class^='swal2-success-line'] {
  background-color: var(--mts-ok) !important;
  height: 3px;
}

.swal2-icon.swal2-error { border-color: rgba(209, 52, 74, 0.45) !important; color: var(--mts-danger); }
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
  background-color: var(--mts-danger) !important;
  height: 3px;
}
.swal2-icon.swal2-warning { border-color: rgba(217, 147, 11, 0.45) !important; color: var(--mts-warn); }
.swal2-icon.swal2-info    { border-color: rgba(10, 139, 176, 0.45) !important; color: var(--mts-info); }
.swal2-icon.swal2-question{ border-color: rgba(71, 84, 103, 0.35) !important; color: var(--mts-ink-soft); }

/* ── Botones ───────────────────────────────────────────────────────────── */
.swal2-popup:not(.swal2-toast) .swal2-actions {
  margin: 22px 0 0;
  gap: 10px;
  width: 100%;
}
.swal2-popup .swal2-styled {
  margin: 0;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: var(--mts-font);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  box-shadow: none;
  transition: transform 120ms, box-shadow 160ms, background 160ms, border-color 160ms, color 160ms;
}
.swal2-popup .swal2-styled:focus {
  outline: none;
  box-shadow: 0 0 0 4px var(--mts-brand-ring) !important;
}

.swal2-popup .swal2-styled.swal2-confirm {
  background: var(--mts-brand) !important;
  color: #fff !important;
  box-shadow: 0 12px 24px -12px rgba(25, 89, 143, 0.55);
}
.swal2-popup .swal2-styled.swal2-confirm:hover {
  background: var(--mts-brand-hi) !important;
  transform: translateY(-1px);
  box-shadow: 0 16px 28px -12px rgba(25, 89, 143, 0.65);
}

/* Confirmación destructiva (la aplica swal-theme.js) */
.swal2-popup .swal2-styled.swal2-confirm.mt-swal-btn-danger,
.swal2-popup .swal2-styled.swal2-deny {
  background: var(--mts-danger) !important;
  color: #fff !important;
  box-shadow: 0 12px 24px -12px rgba(209, 52, 74, 0.5);
}
.swal2-popup .swal2-styled.swal2-confirm.mt-swal-btn-danger:hover,
.swal2-popup .swal2-styled.swal2-deny:hover {
  background: #B92B40 !important;
  transform: translateY(-1px);
}
.swal2-popup .swal2-styled.swal2-confirm.mt-swal-btn-danger:focus,
.swal2-popup .swal2-styled.swal2-deny:focus {
  box-shadow: 0 0 0 4px rgba(209, 52, 74, 0.22) !important;
}

.swal2-popup .swal2-styled.swal2-cancel {
  background: var(--mts-bg-panel) !important;
  border-color: var(--mts-line);
  color: var(--mts-ink-soft) !important;
}
.swal2-popup .swal2-styled.swal2-cancel:hover {
  background: #FBFAF7 !important;
  border-color: #D5CEC1;
  color: var(--mts-ink) !important;
  transform: translateY(-1px);
}

/* ── Campos de formulario ──────────────────────────────────────────────── */
.swal2-popup .swal2-input,
.swal2-popup .swal2-textarea,
.swal2-popup .swal2-select,
.swal2-popup .swal2-file {
  box-sizing: border-box;
  border: 1px solid var(--mts-line);
  border-radius: 10px;
  background: var(--mts-bg-panel);
  box-shadow: none;
  font-family: var(--mts-font);
  font-size: 14px;
  color: var(--mts-ink);
  padding: 10px 12px;
  transition: border-color 140ms, box-shadow 140ms;
}
.swal2-popup .swal2-input:focus,
.swal2-popup .swal2-textarea:focus,
.swal2-popup .swal2-select:focus,
.swal2-popup .swal2-file:focus {
  outline: none;
  border-color: var(--mts-brand);
  box-shadow: 0 0 0 4px var(--mts-brand-ring);
}
.swal2-popup .swal2-input::placeholder,
.swal2-popup .swal2-textarea::placeholder { color: var(--mts-ink-muted); }
.swal2-popup .swal2-input-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--mts-ink-soft);
}
.swal2-popup .swal2-validation-message {
  background: rgba(209, 52, 74, 0.08);
  border: 1px solid rgba(209, 52, 74, 0.30);
  border-radius: 8px;
  color: #8E2233;
  font-size: 13px;
  line-height: 1.45;
  padding: 10px 14px;
  margin: 14px 0 0;
}
.swal2-popup .swal2-validation-message::before { display: none; }

/* ── Elementos auxiliares ──────────────────────────────────────────────── */
.swal2-popup .swal2-close {
  color: var(--mts-ink-muted);
  font-size: 30px;
  transition: color 140ms;
}
.swal2-popup .swal2-close:hover { color: var(--mts-ink); background: transparent; }
.swal2-popup .swal2-close:focus { outline: none; box-shadow: none; }

.swal2-popup .swal2-footer {
  margin: 20px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--mts-line-soft);
  font-size: 13px;
  color: var(--mts-ink-soft);
}
.swal2-popup .swal2-loader {
  border-color: var(--mts-brand) transparent var(--mts-brand) transparent;
}
.swal2-popup .swal2-timer-progress-bar {
  background: var(--mts-brand);
  height: 3px;
}
.swal2-popup .swal2-progress-steps { font-family: var(--mts-mono); }
.swal2-popup .swal2-progress-steps .swal2-active-progress-step,
.swal2-popup .swal2-progress-steps .swal2-progress-step { background: var(--mts-brand); }
.swal2-popup .swal2-progress-steps .swal2-progress-step-line { background: var(--mts-brand); }

/* ── Toasts ────────────────────────────────────────────────────────────── */
.swal2-popup.swal2-toast {
  padding: 14px 16px;
  border: 1px solid var(--mts-line);
  border-radius: 12px;
  background: var(--mts-bg-panel);
  box-shadow: 0 16px 32px -18px rgba(14, 26, 43, 0.40), 0 2px 6px rgba(14, 26, 43, 0.06);
  font-family: var(--mts-font);
  color: var(--mts-ink);
}
.swal2-popup.swal2-toast .swal2-title {
  font-family: var(--mts-font);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--mts-ink);
  margin: 0;
}
.swal2-popup.swal2-toast .swal2-html-container {
  font-size: 13px;
  color: var(--mts-ink-soft);
  margin: 2px 0 0;
}
.swal2-popup.swal2-toast .swal2-timer-progress-bar { background: var(--mts-brand); }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  .swal2-popup:not(.swal2-toast) { padding: 24px 20px 20px !important; }
  .swal2-popup:not(.swal2-toast) .swal2-title { font-size: 20px; }
  .swal2-popup:not(.swal2-toast) .swal2-actions { flex-direction: column-reverse; }
  .swal2-popup:not(.swal2-toast) .swal2-actions .swal2-styled { width: 100%; }
}

/* =========================================================================
   Compatibilidad con modales que ya tienen maquetación propia.
   Conservan su estructura interna (cabecera a sangre, scroll, etc.) pero
   heredan del tema el borde, el radio, la sombra y la tipografía.
   ========================================================================= */

/* Modal de Órdenes de Trabajo (includes/header.php): cabecera a sangre */
.swal2-popup.swal-wo-popup:not(.swal2-toast) { padding: 0 !important; overflow: hidden; }

/* Modales de Personal (css/admin-personnel.css): densidad propia */
.swal2-popup.ag-pers-modal-popup:not(.swal2-toast) { padding: 22px 24px 18px !important; }