/*
  Estilos de SweetAlert2 con el look de la pagina (tarjetas redondeadas, botones pill, fuentes de la marca).
  Se aplican solo a los Swal que usan las clases 'swal-asignar*' (ver swalMessage en utils/methods/methods.utils.js).
  Los colores van en hex porque los tokens de @theme inline no quedan como variables CSS en tailwind.css.
*/

/* Fondo oscuro detras del popup (navy de la marca con desenfoque) */
.swal2-container.swal-asignar-container.swal2-backdrop-show {
  background: rgba(0, 18, 51, 0.45);
  backdrop-filter: blur(4px);
}

/* Tarjeta */
.swal2-popup.swal-asignar {
  max-width: calc(100vw - 32px);
  padding: 28px 28px 24px;
  border: 1px solid #E2E8F0;
  border-radius: 24px;
  background: #FFFFFF;
  box-shadow: 0 24px 56px -20px rgba(0, 18, 51, 0.25);
  font-family: "DM Sans", system-ui, sans-serif;
}

/* Icono mas pequeño (todas sus medidas internas estan en em) */
.swal-asignar .swal2-icon {
  margin: 4px auto 16px;
  font-size: 10px;
  border-width: 3px;
}

.swal-asignar .swal2-title {
  padding: 0;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
  color: #001233;
}

.swal-asignar .swal2-html-container {
  margin: 8px 0 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #3D4551;
}

.swal-asignar .swal2-actions {
  width: 100%;
  margin: 24px 0 0;
  gap: 8px;
}

/* Boton principal (igual al boton "Radicar solicitud") */
.swal-asignar-confirm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  padding: 12px 28px;
  border: 0;
  border-radius: 9999px;
  background: #007AFE;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #FFFFFF;
  box-shadow: 0 8px 20px -6px rgba(0, 122, 254, 0.35);
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.swal-asignar-confirm:hover {
  background: #0056B3;
  transform: translateY(-2px);
}

/* Boton secundario (borde gris, como "Radicar otra solicitud") */
.swal-asignar-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  padding: 12px 28px;
  border: 1.5px solid #E2E8F0;
  border-radius: 9999px;
  background: #FFFFFF;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #001233;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.swal-asignar-cancel:hover {
  background: #F6F8FB;
}