/* ==========================================================================
   LeadSync - Avisos flotantes
   Los toasts de confirmacion y error.

   OJO CON EL ORDEN: estos ficheros se enlazan en index.html en un orden concreto y
   ese orden ES la cascada. Mover un enlace de sitio cambia que regla gana entre dos
   de la misma especificidad. Si anades uno nuevo, ponlo donde le toque, no al final.
   ========================================================================== */

/* --- Toasts --- */
.toast-container {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 200;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 16px;
  box-shadow: 0 6px 22px var(--shadow);
  min-width: 240px;
  max-width: 90vw;
  font-size: 13.5px;
  pointer-events: auto;
  cursor: pointer;
  /* ANIMACIÓN, NO TRANSICIÓN DESDE rAF (misma razón que en la modal): el aviso nacía en
     `opacity: 0` esperando una clase que ponía un requestAnimationFrame. En una pestaña que
     no compone cuadros ese rAF no corre y el aviso no se ve nunca — justo el que dice que
     algo falló. Sin `fill-mode`, si no llega a animarse acaba visible igual. */
  animation: toastEntra 220ms ease;
}
/* .saliendo lo pone el cierre; aquí sí `forwards`, porque el nodo se quita después. */
.toast.saliendo {
  animation: toastSale 220ms ease forwards;
  pointer-events: none;
}

@keyframes toastEntra {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes toastSale {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(12px); }
}
.toast-ic {
  display: inline-flex;
  flex: 0 0 auto;
}
.toast-ic .ic {
  width: 18px;
  height: 18px;
}
.toast-success .toast-ic { color: var(--accent); }
.toast-error .toast-ic { color: var(--danger); }
.toast-warn .toast-ic { color: var(--warn); }
.toast-info .toast-ic { color: var(--text-dim); }

/* item 32: "Deshacer" dentro del toast. Se separa del texto con un filete para que se lea
   como una acción y no como parte del mensaje, y va en verde: es la salida, no el aviso. */
.toast-with-action { padding-right: 4px; }
.toast-action {
  margin-left: 4px;
  padding: 6px 12px;
  background: none;
  border: none;
  border-left: 1px solid var(--border);
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  cursor: pointer;
  border-radius: 0 8px 8px 0;
  flex: 0 0 auto;
}
.toast-action:hover { background: var(--bg-hover); }

@media (prefers-reduced-motion: reduce) {
  .toast,
  .toast.saliendo { animation: none; }
}