/* ============================================================================
 * DESIGN SYSTEM AUAS — ESTILOS DE NOTIFICACIONES
 * ----------------------------------------------------------------------------
 * Complementa a sweetalert2.min.css. Solo ajusta:
 *   1. Anchos coherentes (el template no define ninguno)
 *   2. Botones con las clases Bootstrap del wrapper
 *   3. Toasts compactos y no bloqueantes
 *
 * NO reimplementar SweetAlert. Solo alinear con el design system.
 * ========================================================================= */

/* ==========================================================================
   1. ANCHOS
   SweetAlert usa 32em por defecto, que se ve estrecho en las pantallas
   de gestion. Se estandariza por tipo.
   ========================================================================= */
.swal2-popup {
  border-radius: var(--ui-radius);
  border: 0;
  box-shadow: var(--ui-shadow-dropdown);
  font-family: var(--ui-font-sans);
}

.swal2-popup.swal2-loading {
  width: 22em;
}

/* Confirmaciones con texto largo necesitan mas ancho */
.swal2-popup.ui-swal-wide {
  width: 42em;
  max-width: 92vw;
}

.swal2-title {
  font-size: var(--ui-text-xl);
  font-weight: var(--ui-font-weight-semibold);
  color: var(--ui-text);
}

.swal2-html-container {
  font-size: var(--ui-text-base);
  color: var(--ui-text-secondary);
}

.swal2-icon {
  border-radius: var(--ui-radius-pill);
}

/* ==========================================================================
   2. BOTONES
   swal-defaults.js ya inyecta las clases; aqui se alinea espaciado y radio.
   ========================================================================= */
.swal2-actions {
  gap: var(--ui-space-2);
  margin: var(--ui-space-4) auto var(--ui-space-2);
}

.swal2-confirm,
.swal2-cancel,
.swal2-deny {
  margin: 0 !important;
  min-width: 7rem;
  box-shadow: none !important;
}

.swal2-confirm:focus-visible,
.swal2-cancel:focus-visible,
.swal2-deny:focus-visible {
  box-shadow: var(--ui-shadow-focus) !important;
  outline: 0;
}

/* ==========================================================================
   3. TOASTS
   No bloqueantes, alineados arriba a la derecha, ancho compacto.
   ========================================================================= */
.swal2-toast {
  width: auto !important;
  min-width: 18rem;
  max-width: 24rem;
  padding: var(--ui-space-2) var(--ui-space-3);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow-dropdown);
  background: var(--ui-bg-surface);
  border-left: 3px solid var(--ui-primary);
}

.swal2-toast.ui-toast-success { border-left-color: var(--ui-success); }
.swal2-toast.ui-toast-error   { border-left-color: var(--ui-danger); }
.swal2-toast.ui-toast-warning { border-left-color: var(--ui-warning); }
.swal2-toast.ui-toast-info    { border-left-color: var(--ui-info); }

/* El icono del toast no debe ocupar la caja cuadrada por defecto */
.swal2-toast .swal2-icon {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0 var(--ui-space-2) 0 0;
  flex-shrink: 0;
}

.swal2-toast .swal2-title {
  font-size: var(--ui-text-base);
  font-weight: var(--ui-font-weight-medium);
  text-align: left;
  margin: 0;
}

.swal2-toast .swal2-timer-progress-bar {
  background: var(--ui-primary);
}

/* Contenido de ui.progressToast(): barra de progreso + detalle */
.swal2-toast .swal2-html-container {
  margin: var(--ui-space-2) 0 0;
  overflow: visible;
}

.swal2-toast .swal2-html-container .progress {
  background: var(--ui-bg-subtle);
}

.swal2-toast .swal2-html-container .progress-bar {
  background: var(--ui-primary);
}

.swal2-toast .swal2-html-container .progress-bar.bg-success {
  background: var(--ui-success);
}

.swal2-toast .swal2-html-container .progress-bar.bg-danger {
  background: var(--ui-danger);
}

.swal2-toast .swal2-html-container .small {
  font-size: var(--ui-text-sm);
}

/* Boton de cierre (aspa) de los toasts de progreso.
   SweetAlert2 lo oculta por defecto en modo toast con `timer` undefined. */
.swal2-toast .swal2-x {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: var(--ui-space-4);
  height: var(--ui-space-4);
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-xs);
  background: transparent;
  color: var(--ui-text-secondary);
  font-size: var(--ui-text-base);
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}

.swal2-toast .swal2-x:hover {
  background: var(--ui-bg-subtle);
  color: var(--ui-text-base);
}

.swal2-toast .swal2-x:focus-visible {
  outline: 2px solid var(--ui-primary);
  outline-offset: 1px;
}

/* ==========================================================================
   3b. TOASTS DE PROGRESO (ui.progressToast) — DOM PROPIO
   --------------------------------------------------------------------------
   No usan SweetAlert2: este solo admite un `currentInstance` global, asi que
   `fire()` destruye el toast anterior y dos operaciones simultaneas no pueden
   coexistir. Aqui cada toast es un nodo propio dentro de un contenedor
   compartido, apilado verticalmente en la esquina superior derecha.
   ========================================================================= */
.ui-progress-toasts {
  position: fixed;
  top: var(--ui-space-4);
  right: var(--ui-space-4);
  z-index: 1090;
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-2);
  width: min(22rem, calc(100vw - 2 * var(--ui-space-4)));
  pointer-events: none;
}

.ui-progress-toast {
  pointer-events: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--ui-space-2);
  padding: var(--ui-space-3);
  border-radius: var(--ui-radius);
  border: 0;
  border-left: 3px solid var(--ui-primary);
  box-shadow: var(--ui-shadow-dropdown);
  background: var(--ui-bg-surface);
  color: var(--ui-text);
  animation: ui-progress-toast-in 0.18s ease-out;
}

.ui-progress-toast.ui-toast-success { border-left-color: var(--ui-success); }
.ui-progress-toast.ui-toast-error   { border-left-color: var(--ui-danger); }
.ui-progress-toast.ui-toast-warning { border-left-color: var(--ui-warning); }
.ui-progress-toast.ui-toast-info    { border-left-color: var(--ui-info); }

@keyframes ui-progress-toast-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ui-progress-toast { animation: none; }
}

.ui-progress-toast-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--ui-text-base);
  font-weight: var(--ui-font-weight-medium);
  word-break: break-word;
}

/* La aspa ocupa su propia columna a la derecha */
.ui-progress-toast-close {
  flex: 0 0 auto;
  order: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ui-space-4);
  height: var(--ui-space-4);
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-xs);
  background: transparent;
  color: var(--ui-text-secondary);
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}

.ui-progress-toast-close:hover {
  background: var(--ui-bg-subtle);
  color: var(--ui-text-base);
}

.ui-progress-toast-close:focus-visible {
  outline: 2px solid var(--ui-primary);
  outline-offset: 1px;
}

/* El cuerpo (barra + detalle) ocupa toda la fila siguiente */
.ui-progress-toast-body {
  flex: 1 0 100%;
  order: 3;
  min-width: 0;
}

.ui-progress-toast-body .progress {
  height: 6px;
  background: var(--ui-bg-subtle);
}

.ui-progress-toast-body .progress-bar {
  background: var(--ui-primary);
  transition: width 0.3s ease-out;
}

.ui-progress-toast-body .progress-bar.bg-success { background: var(--ui-success); }
.ui-progress-toast-body .progress-bar.bg-danger  { background: var(--ui-danger); }

.ui-progress-toast-pct,
.ui-progress-toast-detail {
  font-size: var(--ui-text-sm);
  color: var(--ui-text-secondary);
}

.ui-progress-toast-pct { margin-top: var(--ui-space-1); }

/* ==========================================================================
   4. VALIDACION
   Patron ya usado en el repo (Swal.showValidationMessage — 29 ocurrencias)
   ========================================================================= */
.swal2-validation-message {
  color: var(--ui-danger);
  font-size: var(--ui-text-xs);
  margin-top: var(--ui-space-1);
}

/* ==========================================================================
   5. FORMULARIOS DENTRO DE SWAL
   Se alinean con los tokens de formulario del design system.
   ========================================================================= */
.swal2-popup .form-control,
.swal2-popup .form-select {
  border-radius: var(--ui-radius-xs);
  font-size: var(--ui-text-base);
}

.swal2-popup .form-control:focus,
.swal2-popup .form-select:focus {
  border-color: var(--ui-primary);
  box-shadow: var(--ui-shadow-focus);
}

/* ==========================================================================
   6. CAPA (Z-INDEX) — DEBE QUEDAR POR ENCIMA DE CUALQUIER MODAL
   --------------------------------------------------------------------------
   `ui.*` se usa a menudo desde dentro de un modal Bootstrap (confirmar una
   fila en una tabla, publicar un documento...). SweetAlert2 nace con
   z-index:1060, exactamente el MISMO valor que `.modal-content`, asi que el
   orden real queda determinado por el orden del DOM: si el modal se creo
   antes, el Swal se dibuja encima y el overlay del modal (`z-index:1081` en
   este tema) lo tapa. El usuario ve el spinner por debajo del modal y asume
   que la app esta colgada.

   Por eso el contenedor sube por encima del overlay mas alto del tema
   (99999), igual que ya se hace localmente en las paginas de working_map.
   ========================================================================= */
.swal2-container {
  z-index: 100000 !important;
}

.swal2-container.swal2-backdrop-show {
  z-index: 99999 !important;
}