/* ═══════════════════════════════════════════════════════════════════════
   SAO-Agent · Tema único de SweetAlert2
   ───────────────────────────────────────────────────────────────────────
   Un solo aspecto para todos los avisos, confirmaciones y toasts del
   proyecto (kiosko, panel del operador, administración, login y tienda),
   alineado con el sistema de diseño Claro: rojo #DA291C, negro cálido
   #2D2926, tipografía AMX, esquinas redondeadas y barra roja de marca
   (la misma del menú lateral del admin).

   Cómo funciona: no depende de los parámetros de cada Swal.fire(). Las
   reglas cuelgan de .swal2-container (mayor especificidad que la hoja que
   inyecta la librería) y los colores de botón llevan !important para que
   un confirmButtonColor/cancelButtonColor suelto en algún llamador no
   rompa la consistencia. Se carga DESPUÉS de sweetalert2 en las 5 páginas
   que lo usan (index, operator, admin, login, tienda).

   Tamaño base: 16px en admin/operador/login/tienda (antes heredaban los
   22px del kiosko y los avisos salían enormes); el kiosko conserva su
   escala táctil (1rem = 22px).
   ═══════════════════════════════════════════════════════════════════════ */

.swal2-container {
  --sao-red: var(--claro-red, #da291c);
  --sao-red-dark: var(--claro-red-dark, #a31e13);
  --sao-red-soft: #fef2f2;
  --sao-red-ring: rgba(218, 41, 28, 0.32);
  --sao-ink: var(--claro-text, #2d2926);
  --sao-body: #555;
  --sao-muted: var(--claro-muted, #a7a8aa);
  --sao-line: #e5e7eb;
  --sao-soft: #f3f4f6;
  --sao-ok: #16a34a;
  --sao-warn: #f59e0b;
  --sao-info: #3b82f6;
  --sao-font:
    "AMX", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ── Fondo ─────────────────────────────────────────────────────────── */
body:not(.swal2-toast-shown) .swal2-container.swal2-backdrop-show,
body:not(.swal2-toast-shown) .swal2-container.swal2-noanimation {
  background: rgba(45, 41, 38, 0.6);
}

/* ── Ventana ───────────────────────────────────────────────────────── */
.swal2-container .swal2-popup {
  font-family: var(--sao-font);
  font-size: 16px;
  color: var(--sao-ink);
  background: #fff;
  border: 0;
  border-radius: 20px;
  padding: 1.7em 1.5em 1.4em;
  /* Barra roja de marca arriba (inset: respeta las esquinas redondeadas) */
  box-shadow:
    inset 0 4px 0 var(--sao-red),
    0 20px 60px rgba(0, 0, 0, 0.3);
  -webkit-font-smoothing: antialiased;
}
/* El kiosko es táctil: mantiene su escala grande (rem = 22px) */
body.kiosk-page .swal2-container .swal2-popup {
  font-size: 1rem;
}

/* ── Ícono ─────────────────────────────────────────────────────────── */
.swal2-container .swal2-popup:not(.swal2-toast) .swal2-icon {
  margin: 0.2em auto 1em;
}
.swal2-container .swal2-icon.swal2-success {
  color: var(--sao-ok);
  border-color: var(--sao-ok);
}
.swal2-container .swal2-icon.swal2-success .swal2-success-ring {
  border-color: rgba(22, 163, 74, 0.28);
}
.swal2-container .swal2-icon.swal2-success [class^="swal2-success-line"] {
  background-color: var(--sao-ok);
}
.swal2-container .swal2-icon.swal2-error {
  color: var(--sao-red);
  border-color: rgba(218, 41, 28, 0.5);
}
.swal2-container .swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
  background-color: var(--sao-red);
}
.swal2-container .swal2-icon.swal2-warning {
  color: var(--sao-warn);
  border-color: rgba(245, 158, 11, 0.45);
}
.swal2-container .swal2-icon.swal2-info {
  color: var(--sao-info);
  border-color: rgba(59, 130, 246, 0.4);
}
.swal2-container .swal2-icon.swal2-question {
  color: var(--sao-ink);
  border-color: rgba(45, 41, 38, 0.28);
}

/* ── Título y texto ────────────────────────────────────────────────── */
.swal2-container .swal2-popup .swal2-title {
  font-family: inherit;
  font-size: 1.4em;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--sao-ink);
  padding: 0.1em 0.4em 0;
  margin: 0;
}
.swal2-container .swal2-popup .swal2-html-container {
  font-family: inherit;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.5;
  color: var(--sao-body);
  margin: 0.7em 0.6em 0.2em;
}
.swal2-container .swal2-popup .swal2-html-container strong,
.swal2-container .swal2-popup .swal2-html-container b {
  color: var(--sao-ink);
}
.swal2-container .swal2-popup .swal2-html-container a {
  color: var(--sao-red);
  font-weight: 600;
}

/* ── Botones ───────────────────────────────────────────────────────── */
.swal2-container .swal2-popup .swal2-actions {
  gap: 0.6em;
  margin: 1.5em auto 0;
  flex-wrap: wrap;
}
.swal2-container .swal2-popup .swal2-styled {
  margin: 0;
  min-width: 6.5em;
  padding: 0.72em 1.5em;
  border: 1px solid transparent;
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.95em;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: none;
  transition:
    background-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.1s ease;
}
.swal2-container .swal2-popup .swal2-styled:hover:not(:disabled) {
  background-image: none;
}
.swal2-container .swal2-popup .swal2-styled:active:not(:disabled) {
  transform: scale(0.97);
}
.swal2-container .swal2-popup .swal2-styled:focus,
.swal2-container .swal2-popup .swal2-styled:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sao-red-ring);
}
/* Confirmar = botón primario (rojo Claro) */
.swal2-container .swal2-popup .swal2-styled.swal2-confirm {
  background-color: var(--sao-red) !important;
  border-color: var(--sao-red) !important;
  color: #fff;
  box-shadow: 0 2px 8px rgba(218, 41, 28, 0.25);
}
.swal2-container .swal2-popup .swal2-styled.swal2-confirm:hover:not(:disabled) {
  background-color: var(--sao-red-dark) !important;
  border-color: var(--sao-red-dark) !important;
  box-shadow: 0 4px 14px rgba(218, 41, 28, 0.35);
}
.swal2-container .swal2-popup .swal2-styled.swal2-confirm:focus {
  box-shadow:
    0 2px 8px rgba(218, 41, 28, 0.25),
    0 0 0 3px var(--sao-red-ring);
}
/* Cancelar = botón secundario (gris claro con borde, como .btn-secondary) */
.swal2-container .swal2-popup .swal2-styled.swal2-cancel {
  background-color: var(--sao-soft) !important;
  border-color: var(--sao-line) !important;
  color: var(--sao-ink);
}
.swal2-container .swal2-popup .swal2-styled.swal2-cancel:hover:not(:disabled) {
  background-color: var(--sao-line) !important;
}
/* Tercera opción = negro cálido de marca */
.swal2-container .swal2-popup .swal2-styled.swal2-deny {
  background-color: var(--claro-black, #2d2926) !important;
  border-color: var(--claro-black, #2d2926) !important;
  color: #fff;
}
.swal2-container .swal2-popup .swal2-styled.swal2-deny:hover:not(:disabled) {
  background-color: #1a1715 !important;
  border-color: #1a1715 !important;
}
.swal2-container .swal2-popup .swal2-loader {
  border-color: var(--sao-red) transparent var(--sao-red) transparent;
}
body.kiosk-page .swal2-container .swal2-popup .swal2-styled {
  padding: 0.85em 1.7em;
  min-width: 8em;
}

/* ── Cerrar (X) ────────────────────────────────────────────────────── */
.swal2-container .swal2-popup .swal2-close {
  top: 0.7em;
  right: 0.7em;
  width: 1.7em;
  height: 1.7em;
  font-family: inherit;
  font-size: 1.3em;
  line-height: 1;
  border-radius: 50%;
  background: var(--sao-red-soft);
  color: var(--sao-red);
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}
.swal2-container .swal2-popup .swal2-close:hover {
  background: var(--sao-red);
  color: #fff;
}
.swal2-container .swal2-popup .swal2-close:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--sao-red-ring);
}

/* ── Campos (input / select / textarea) ────────────────────────────── */
.swal2-container .swal2-popup .swal2-input,
.swal2-container .swal2-popup .swal2-select,
.swal2-container .swal2-popup .swal2-textarea,
.swal2-container .swal2-popup .swal2-file {
  font-family: inherit;
  font-size: 1em;
  color: var(--sao-ink);
  background: #fff;
  border: 1.5px solid #d1d5db;
  border-radius: 10px;
  box-shadow: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.swal2-container .swal2-popup .swal2-input,
.swal2-container .swal2-popup .swal2-select {
  width: 100%;
  max-width: 100%;
  height: 2.85em;
  padding: 0 0.9em;
  margin: 1em 0 0;
}
.swal2-container .swal2-popup .swal2-textarea {
  width: 100%;
  max-width: 100%;
  padding: 0.7em 0.9em;
  margin: 1em 0 0;
}
.swal2-container .swal2-popup .swal2-input::placeholder,
.swal2-container .swal2-popup .swal2-textarea::placeholder {
  color: var(--sao-muted);
}
.swal2-container .swal2-popup .swal2-input:focus,
.swal2-container .swal2-popup .swal2-select:focus,
.swal2-container .swal2-popup .swal2-textarea:focus,
.swal2-container .swal2-popup .swal2-file:focus {
  outline: none;
  border-color: var(--sao-red);
  box-shadow: 0 0 0 3px rgba(218, 41, 28, 0.12);
}
/* Campos sueltos dentro del html de un aviso (p. ej. el código de
   activación del kiosco): mismo aspecto que .swal2-input. Especificidad
   cero (:where) a propósito: cualquier clase propia o style inline manda. */
:where(.swal2-container .swal2-popup .swal2-html-container)
  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea) {
  border: 1.5px solid #d1d5db;
  border-radius: 10px;
  background: #fff;
  color: var(--sao-ink);
  font-family: inherit;
}
:where(.swal2-container .swal2-popup .swal2-html-container)
  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea):focus {
  outline: none;
  border-color: var(--sao-red);
  box-shadow: 0 0 0 3px rgba(218, 41, 28, 0.12);
}
.swal2-container .swal2-popup .swal2-checkbox,
.swal2-container .swal2-popup .swal2-radio {
  color: var(--sao-ink);
  font-weight: 600;
}
.swal2-container .swal2-popup .swal2-checkbox input,
.swal2-container .swal2-popup .swal2-radio input {
  accent-color: var(--sao-red);
}

/* ── Validación, pie y barra de tiempo ─────────────────────────────── */
.swal2-container .swal2-popup .swal2-validation-message {
  margin: 1em 0 0;
  padding: 0.65em 0.9em;
  border-radius: 10px;
  background: var(--sao-red-soft);
  color: #991b1b;
  font-size: 0.9em;
  font-weight: 600;
}
.swal2-container .swal2-popup .swal2-validation-message::before {
  background-color: var(--sao-red);
  color: #fff;
}
.swal2-container .swal2-popup .swal2-footer {
  margin-top: 1.2em;
  padding-top: 1em;
  border-top: 1px solid var(--sao-line);
  color: var(--sao-muted);
  font-size: 0.85em;
}
.swal2-container .swal2-popup .swal2-timer-progress-bar {
  background: var(--sao-toast-accent, var(--sao-red));
  opacity: 0.45;
}

/* ── Toasts (Swal.fire({ toast: true })) ───────────────────────────── */
.swal2-container .swal2-popup.swal2-toast {
  width: auto;
  max-width: min(28em, 94vw);
  padding: 0.8em 1.1em 0.8em 1.25em;
  border: 1px solid var(--sao-line);
  border-radius: 14px;
  font-size: 15px;
  align-items: center;
  /* Franja de color a la izquierda según el tipo de aviso (ver :has abajo).
     Sombra corta a propósito: el contenedor del toast recorta lo que se
     sale de su caja (~14px de margen) y una sombra grande queda cortada. */
  box-shadow:
    inset 4px 0 0 var(--sao-toast-accent, var(--sao-red)),
    0 3px 10px rgba(0, 0, 0, 0.14),
    0 1px 3px rgba(0, 0, 0, 0.1);
}
body.kiosk-page .swal2-container .swal2-popup.swal2-toast {
  font-size: 0.85rem;
}
.swal2-container .swal2-popup.swal2-toast .swal2-title {
  margin: 0.1em 0.8em 0.1em 0.4em;
  padding: 0;
  font-size: 1em;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
  text-align: left;
}
.swal2-container .swal2-popup.swal2-toast .swal2-html-container {
  margin: 0.2em 0.6em;
  font-size: 0.9em;
  text-align: left;
}
.swal2-container .swal2-popup.swal2-toast:has(.swal2-icon.swal2-success) {
  --sao-toast-accent: var(--sao-ok);
}
.swal2-container .swal2-popup.swal2-toast:has(.swal2-icon.swal2-warning) {
  --sao-toast-accent: var(--sao-warn);
}
.swal2-container .swal2-popup.swal2-toast:has(.swal2-icon.swal2-info) {
  --sao-toast-accent: var(--sao-info);
}
.swal2-container .swal2-popup.swal2-toast:has(.swal2-icon.swal2-question) {
  --sao-toast-accent: var(--sao-ink);
}