@keyframes overlayFlash {
  0%   { opacity: 0; transform: scale(1.02); filter: blur(0px); }
  18%  { opacity: .70; }
  100% { opacity: 0; transform: scale(1); filter: blur(0px); }
}

/* Overlay base (NO fija colores aquí: roles.css define el background por rol) */
.role-overlay{
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0; /* reemplaza inset para evitar warning */
  pointer-events: none;
  opacity: 0;
  z-index: 999;
  mix-blend-mode: screen;
  will-change: opacity, transform;
}

/* Flash: más notorio y consistente */
.role-overlay.flash{
  animation: overlayFlash .62s ease-out both;
}

/* Animación de entrada del host */
@keyframes popIn {
  from { opacity:0; transform: translateY(6px) scale(.99); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}
.viewhost{
  animation: popIn .18s ease-out;
}

/* Toast */
@keyframes toastIn{
  from { opacity:0; transform: translateY(8px); }
  to   { opacity:1; transform: translateY(0); }
}
.toast{
  animation: toastIn .16s ease-out;
}