/* ============================================================
   INTIPASS Admin UI — modal de confirmación propio y toasts
   ============================================================ */

/* ---------------- Modal de confirmación ---------------- */
.ipx-modal {
  position: fixed; inset: 0; z-index: 2100;
  background: rgba(15, 13, 26, .55);
  display: none; align-items: center; justify-content: center; padding: 1rem;
}
.ipx-modal.abierto { display: flex; }
.ipx-modal-caja {
  background: #fff; border-radius: 1rem; width: 400px; max-width: 94vw;
  padding: 1.6rem 1.4rem 1.3rem; text-align: center;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .35);
  animation: ipxPop .18s ease-out;
}
@keyframes ipxPop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ipx-modal-icono {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto .9rem;
  display: flex; align-items: center; justify-content: center; font-size: 2rem;
}
.ipx-modal-icono.peligro { background: #fee2e2; color: #dc2626; }
.ipx-modal-icono.exito   { background: #d9f7e8; color: #0f9d58; }
.ipx-modal-icono.alerta  { background: #fff3d6; color: #d97706; }
.ipx-modal-texto { font-size: 1rem; color: #1f2340; white-space: pre-line; margin-bottom: 1.2rem; }
.ipx-modal-acciones { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.ipx-modal-acciones .btn { min-width: 120px; }

/* ---------------- Toasts ---------------- */
.ipx-toasts {
  position: fixed; top: 12px; right: 12px; z-index: 2200;
  display: flex; flex-direction: column; gap: .5rem; max-width: min(380px, 92vw);
}
.ipx-toast {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: .6rem;
  background: #fff; border-radius: .7rem; padding: .75rem .9rem;
  box-shadow: 0 8px 28px rgba(29, 26, 44, .18);
  border-left: 4px solid #6366f1;
  animation: ipxToastIn .22s ease-out;
  font-size: .9rem; color: #1f2340;
}
@keyframes ipxToastIn { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.ipx-toast.fuera { transform: translateX(30px); opacity: 0; transition: all .25s; }
.ipx-toast.ok    { border-left-color: #0f9d58; }
.ipx-toast.ok > i    { color: #0f9d58; }
.ipx-toast.error { border-left-color: #dc2626; }
.ipx-toast.error > i { color: #dc2626; }
.ipx-toast.info  { border-left-color: #6366f1; }
.ipx-toast.info > i  { color: #6366f1; }
.ipx-toast > i { font-size: 1.15rem; }
.ipx-toast .cerrar { border: none; background: none; color: #9ca3af; margin-left: auto; padding: 0 .1rem; }
.ipx-toast .barra {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  opacity: .3; background: #6366f1;
  animation-name: ipxBarra; animation-timing-function: linear; animation-fill-mode: forwards;
}
.ipx-toast.ok .barra { background: #0f9d58; }
.ipx-toast.error .barra { background: #dc2626; }
@keyframes ipxBarra { from { width: 100%; } to { width: 0; } }
@media (max-width: 991.98px) {
  .ipx-toasts { top: auto; bottom: 78px; right: 10px; left: 10px; }
}