/* Avisos flutuantes (toasts) das mensagens do Django — ver static/js/avisos.js */
.avisos {
  position: fixed; top: 84px; right: 16px; z-index: 1080;
  display: flex; flex-direction: column; gap: .6rem;
  width: 380px; max-width: calc(100vw - 32px); pointer-events: none;
}
.aviso {
  --cor: #198754; --fundo: #f1faf5;
  position: relative; overflow: hidden; pointer-events: auto;
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .85rem .9rem .95rem; border-radius: 10px;
  background: var(--fundo); border: 1px solid rgba(0,0,0,.06); border-left: 5px solid var(--cor);
  box-shadow: 0 10px 28px rgba(0,0,0,.16);
  color: #212529; font-size: .92rem; line-height: 1.35;
  animation: aviso-entra .35s cubic-bezier(.2,.8,.2,1) both;
}
.aviso.saindo { animation: aviso-sai .3s ease-in forwards; }
.aviso-info    { --cor: #0d6efd; --fundo: #f0f5ff; }
.aviso-warning { --cor: #e0a800; --fundo: #fffaeb; }
.aviso-error   { --cor: #b42318; --fundo: #fff3f2; }
.aviso-debug   { --cor: #6c757d; --fundo: #f6f6f6; }
.aviso-icone {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--cor); color: #fff; font-size: .8rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; margin-top: 1px;
}
.aviso-texto { flex: 1; min-width: 0; padding-top: 2px; word-wrap: break-word; }
.aviso-fechar {
  flex: none; background: none; border: 0; padding: 0 .1rem; margin: -.15rem -.2rem 0 0;
  font-size: 1.15rem; line-height: 1; color: #777; cursor: pointer;
}
.aviso-fechar:hover, .aviso-fechar:focus-visible { color: #000; outline: none; }
.aviso-barra {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: var(--cor); opacity: .45; transform-origin: left;
}
@keyframes aviso-entra { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes aviso-sai   { to { opacity: 0; transform: translateX(40px); height: 0; margin: 0; padding-top: 0; padding-bottom: 0; } }
@keyframes aviso-tempo { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 575.98px) {
  .avisos { top: 72px; left: 8px; right: 8px; width: auto; max-width: none; }
  @keyframes aviso-entra { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .aviso, .aviso.saindo { animation-duration: .01s; }
}