/* =========================================================================
   Ventanas de alerta (SweetAlert2) con el tema de cada empresa.

   Solo variables del tema: superficie, tinta, borde, acento y radio. Los
   botones son los .boton del portal, así que heredan el color, la letra
   y el hover de cada empresa sin escribir nada por empresa.

   Mismo lenguaje que una tarjeta del sistema: texto alineado a la
   izquierda, acciones abajo a la derecha separadas por una línea, igual
   que en cualquier formulario del portal.
   ========================================================================= */

.alerta-fondo.swal2-backdrop-show,
.alerta-fondo.swal2-noanimation { background: rgba(20, 24, 23, .45); }

.swal2-popup.alerta {
  width: min(440px, calc(100vw - 2rem));
  padding: 1.75rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--tinta);
  font-family: inherit;
  font-size: 1rem;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .18);
}

.swal2-popup.alerta .alerta__cuerpo {
  margin: 0; padding: 0; text-align: left; color: var(--tinta);
  font-size: 1rem; line-height: 1.5;
}
.alerta__titulo { margin: 0 0 .55rem; font-size: 1.25rem; line-height: 1.25; }
.alerta__texto { margin: 0; font-size: .95rem; color: var(--tinta-suave); max-width: none; }

.swal2-popup.alerta .alerta__acciones {
  width: 100%; margin: 1.5rem 0 0; padding: 1.1rem 0 0;
  border-top: 1px solid var(--borde);
  justify-content: flex-end; gap: .7rem; flex-wrap: wrap;
}
.swal2-popup.alerta .alerta__acciones .boton { margin: 0; }

/* Indicador girando, con el color de la empresa. */
.swal2-popup.alerta .alerta__indicador {
  width: 2.25rem; height: 2.25rem; margin: 0;
  border-width: .22rem;
  border-color: var(--acento) transparent var(--acento) transparent;
}

/* Ventana de "procesando": sin botones, todo centrado y sin la línea. */
.swal2-popup.alerta.swal2-loading .alerta__cuerpo { text-align: center; }
.swal2-popup.alerta.swal2-loading .alerta__acciones {
  justify-content: center; border-top: 0; padding-top: 0; margin-top: 1.4rem;
}

/* Entrada y salida discretas: aparece, no rebota. */
@keyframes alerta-entra { from { opacity: 0; transform: translateY(8px) scale(.985); }
                          to   { opacity: 1; transform: none; } }
@keyframes alerta-sale  { to   { opacity: 0; transform: translateY(4px); } }
.alerta--entra { animation: alerta-entra .16s ease-out; }
.alerta--sale  { animation: alerta-sale .12s ease-in forwards; }
@media (prefers-reduced-motion: reduce) {
  .alerta--entra, .alerta--sale { animation: none; }
}

/* En celular, los botones a todo lo ancho, la acción arriba. */
@media (max-width: 480px) {
  .swal2-popup.alerta { padding: 1.35rem; }
  .swal2-popup.alerta .alerta__acciones { flex-direction: column-reverse; }
  .swal2-popup.alerta .alerta__acciones .boton { width: 100%; justify-content: center; }
}