/* ============================================================================
   alerts.css — Tema de SweetAlert2 para MASTER SPORT
   ----------------------------------------------------------------------------
   Sólo los DIÁLOGOS de confirmación. Los avisos flotantes no están aquí: los
   pinta el sistema propio de la app (.ms-toasts / .ms-toast en overlays.css),
   que ms-alerts.js reutiliza en lugar de duplicar.

   Dos reglas que hay que respetar al tocar este archivo:

   1. Todo cuelga de .ms-swal, la clase que ms-alerts.js pone en el popup.
      Nunca de .swal2-popup ni .swal2-container a secas, porque esas las
      llevan también otros diálogos de la librería.

   2. Nada de reutilizar nombres de clase que ya existan en el sistema de
      diseño. El popup de SweetAlert2 se maqueta con grid y las clases de la
      app suelen traer display:flex; mezclarlos rompe la maquetación.

   El tema oscuro sale gratis porque todo sale de var(--ms-*).
   ========================================================================== */

/* --- Fondo ---------------------------------------------------------------- */
.swal2-container:has(.ms-swal) {
  padding: 11vh 16px 16px;
}

.swal2-container:has(.ms-swal).swal2-backdrop-show {
  background: var(--ms-overlay);
  backdrop-filter: blur(3px);
}

/* --- Caja ----------------------------------------------------------------
   Mismo lenguaje que .ms-modal: borde, radio grande y sombra del sistema.
   overflow:hidden es imprescindible —igual que en .ms-modal—: sin él, el
   fondo del pie de botones (--ms-surface-2) asoma con las esquinas en
   ángulo recto por debajo del radio y deja el borde inferior emborronado. */
.ms-swal {
  padding: 0;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-xl);
  overflow: hidden;
  background: var(--ms-surface);
  box-shadow: var(--ms-shadow-lg);
  font-family: var(--ms-font);
  color: var(--ms-text);
  align-self: flex-start;
}

/* --- Icono ---------------------------------------------------------------
   Pequeño y arriba a la izquierda, no el círculo gigante centrado que trae de
   serie: en un panel de gestión un aviso no debe gritar. */
.ms-swal .ms-swal__icon {
  width: 34px;
  height: 34px;
  margin: 18px 0 0 20px;
  border-width: 2px;
  font-size: 9px;
}

.ms-swal .ms-swal__icon .swal2-icon-content { font-size: 19px; }

.ms-swal .ms-swal__icon.swal2-warning  { border-color: var(--ms-warning-bd); color: var(--ms-warning); }
.ms-swal .ms-swal__icon.swal2-error    { border-color: var(--ms-danger-bd);  color: var(--ms-danger); }
.ms-swal .ms-swal__icon.swal2-success  { border-color: var(--ms-success-bd); color: var(--ms-success); }
.ms-swal .ms-swal__icon.swal2-info,
.ms-swal .ms-swal__icon.swal2-question { border-color: var(--ms-info-bd);    color: var(--ms-info); }

.ms-swal .ms-swal__icon.swal2-success .swal2-success-ring { border-color: var(--ms-success-bd); }
.ms-swal .ms-swal__icon.swal2-success [class^="swal2-success-line"] { background-color: var(--ms-success); }
.ms-swal .ms-swal__icon.swal2-error [class^="swal2-x-mark-line"] { background-color: var(--ms-danger); }

/* --- Textos --------------------------------------------------------------- */
.ms-swal .ms-swal__title {
  margin: 0;
  padding: 14px 20px 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ms-text);
  text-align: left;
}

.ms-swal .ms-swal__text {
  justify-content: flex-start;
  margin: 5px 0 0;
  padding: 0 20px 16px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ms-text-3);
  text-align: left;
}

.ms-swal .ms-swal__text b { color: var(--ms-text); font-weight: 650; }
.ms-swal .ms-swal__text p { margin: 0 0 9px; }
.ms-swal .ms-swal__text p:last-child { margin-bottom: 0; }

/* --- Listas dentro del diálogo -------------------------------------------
   Las usan los avisos que enumeran cosas (permisos incoherentes, usuarios
   afectados por un cambio de rol). Con más de seis entradas la caja crecería
   fuera de la pantalla, así que rueda por dentro. */
.ms-swal .ms-swal__lista {
  margin: 0;
  padding: 8px 10px;
  max-height: 190px;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  background: var(--ms-surface-2);
}

.ms-swal .ms-swal__lista li {
  position: relative;
  padding: 3px 0 3px 13px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ms-text-2);
}

.ms-swal .ms-swal__lista li::before {
  content: "";
  position: absolute;
  left: 2px; top: 11px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ms-text-4);
}

/* Ganancias y pérdidas de permiso en la vista previa de impacto. */
.ms-swal .ms-swal__lista li.is-gana::before { background: var(--ms-success); }
.ms-swal .ms-swal__lista li.is-pierde::before { background: var(--ms-danger); }

/* Encabezado de rol dentro de la lista de impacto. */
.ms-swal .ms-swal__lista li.is-rol {
  margin-top: 6px;
  padding-left: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ms-text-3);
}

.ms-swal .ms-swal__lista li.is-rol:first-child { margin-top: 0; }
.ms-swal .ms-swal__lista li.is-rol::before { display: none; }

/* --- Pie de botones ------------------------------------------------------
   Igual que .ms-modal__footer. Los botones ya llevan .ms-btn desde
   ms-alerts.js, así que aquí sólo se coloca la fila. */
.ms-swal .ms-swal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  width: auto;
  margin: 0;
  padding: 12px 16px;
  border-top: 1px solid var(--ms-border-soft);
  background: var(--ms-surface-2);
}

/* SweetAlert2 mete márgenes propios a los botones aunque no los estile. */
.ms-swal .ms-swal__actions .ms-btn { margin: 0; }

/* --- Accesibilidad -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .swal2-popup.swal2-show,
  .swal2-popup.swal2-hide { animation: none !important; }
}

/* --- Por encima de los modales -------------------------------------------
   SweetAlert2 se coloca en z-index 1060 y .ms-overlay en 1080: al pedir
   confirmación desde un modal abierto, el diálogo quedaba por detrás. */
.swal2-container { z-index: 1100; }