/* ==========================================
   AVISOS — notificações (toasts) e janelas de confirmação/aviso
   Paleta SITUR: verde #0B7C41, fundo #0d1f18
   ========================================== */
:root {
  --av-verde: #0B7C41;
  --av-verde-escuro: #096b38;
  --av-verde-claro: #4ade80;
  --av-fundo-escuro: #0d1f18;
  --av-ambar: #b45309;
  --av-ambar-claro: #fef3c7;
  --av-vermelho: #dc2626;
  --av-vermelho-escuro: #b91c1c;
  --av-vermelho-claro: #fee2e2;
  --av-azul: #0369a1;
  --av-azul-claro: #e0f2fe;
  --av-texto: #0f172a;
  --av-texto-suave: #475569;
}

/* ---------- Notificações (canto inferior direito) ----------
   Embaixo, para não cobrir o botão de fechar da ficha e os botões do cabeçalho */
.av-pilha {
  position: fixed; bottom: 20px; right: 20px; z-index: 1100;
  display: flex; flex-direction: column-reverse; gap: 10px;
  width: min(380px, calc(100vw - 32px)); pointer-events: none;
}
.av-toast {
  pointer-events: auto; position: relative; overflow: hidden;
  display: flex; gap: 12px; align-items: flex-start;
  background: #ffffff; color: var(--av-texto);
  border-radius: 14px; padding: 14px 40px 14px 14px;
  box-shadow: 0 12px 32px rgba(13, 31, 24, .18), 0 2px 6px rgba(13, 31, 24, .08);
  border-left: 4px solid var(--av-cor);
  font-family: inherit; font-size: 13px; line-height: 1.4;
  /* Movimento firme: entra rápido e assenta, sem passar do ponto */
  animation: av-entrar-lado .26s cubic-bezier(.23, 1, .32, 1);
}
.av-toast.av-saindo { animation: av-sair-lado .16s cubic-bezier(.23, 1, .32, 1) forwards; }
.av-toast-icone { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--av-cor-claro); color: var(--av-cor); }
.av-toast-icone svg { width: 17px; height: 17px; }
.av-toast-titulo { font-weight: 700; margin-bottom: 1px; }
.av-toast-texto { color: var(--av-texto-suave); white-space: pre-line; word-break: break-word; }
.av-toast-fechar { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border: 0; border-radius: 8px;
  background: transparent; color: #94a3b8; cursor: pointer; display: grid; place-items: center; }
@media (hover: hover) and (pointer: fine) { .av-toast-fechar:hover { background: #f1f5f9; color: #334155; } }
.av-toast-fechar svg { width: 14px; height: 14px; }
/* Barra de tempo restante */
.av-toast-tempo { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--av-cor);
  opacity: .35; transform-origin: left; animation: av-tempo linear forwards; }
.av-toast:hover .av-toast-tempo { animation-play-state: paused; }

/* ---------- Janela (confirmação / aviso) ---------- */
.av-fundo {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(13, 31, 24, .55); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 16px;
  animation: av-aparecer .2s cubic-bezier(.23, 1, .32, 1);
}
.av-fundo.av-saindo { animation: av-sumir .15s cubic-bezier(.23, 1, .32, 1) forwards; }
.av-janela {
  width: min(460px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  background: #ffffff; color: var(--av-texto); border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .3);
  font-family: inherit; font-size: 14px; line-height: 1.5;
  animation: av-entrar .22s cubic-bezier(.23, 1, .32, 1);
}
.av-fundo.av-saindo .av-janela { animation: av-sair .15s cubic-bezier(.23, 1, .32, 1) forwards; }
.av-janela:focus { outline: none; }
.av-corpo { padding: 24px 24px 8px; display: flex; gap: 16px; }
.av-icone { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--av-cor-claro); color: var(--av-cor); }
.av-icone svg { width: 24px; height: 24px; }
.av-titulo { font-size: 17px; font-weight: 800; margin: 2px 0 6px; color: var(--av-texto); }
.av-mensagem { color: var(--av-texto-suave); white-space: pre-line; word-break: break-word; }
.av-detalhe { margin-top: 10px; font-size: 12.5px; color: var(--av-texto-suave); background: #f8fafc;
  border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px 10px; white-space: pre-line; }
.av-lista { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.av-lista li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; background: #f8fafc;
  border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px 10px; }
.av-lista li svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; }
.av-lista li.av-ok svg { color: var(--av-verde); }
.av-lista li.av-falta { background: #fff7f7; border-color: #fecaca; }
.av-lista li.av-falta svg { color: var(--av-vermelho); }
.av-lista li.av-item svg { color: #64748b; }
.av-botoes { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px 22px; }
.av-botao { border: 0; border-radius: 11px; padding: 10px 18px; font: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; transition: background-color .15s, box-shadow .15s, transform .16s cubic-bezier(.23, 1, .32, 1); }
.av-botao:active { transform: scale(.97); }
.av-botao:focus-visible { outline: 3px solid rgba(74, 222, 128, .6); outline-offset: 2px; }
.av-secundario { background: #f1f5f9; color: #334155; }
@media (hover: hover) and (pointer: fine) { .av-secundario:hover { background: #e2e8f0; } }
.av-primario { background: var(--av-botao); color: #ffffff; box-shadow: 0 4px 12px var(--av-botao-sombra); }
@media (hover: hover) and (pointer: fine) { .av-primario:hover { background: var(--av-botao-hover); } }

/* ---------- Cores por tipo ---------- */
.av-sucesso { --av-cor: var(--av-verde); --av-cor-claro: #dcfce7; }
.av-info { --av-cor: var(--av-azul); --av-cor-claro: var(--av-azul-claro); }
.av-aviso { --av-cor: var(--av-ambar); --av-cor-claro: var(--av-ambar-claro); }
.av-erro { --av-cor: var(--av-vermelho); --av-cor-claro: var(--av-vermelho-claro); }
.av-pergunta { --av-cor: var(--av-verde); --av-cor-claro: #dcfce7; }
.av-janela { --av-botao: var(--av-verde); --av-botao-hover: var(--av-verde-escuro); --av-botao-sombra: rgba(11, 124, 65, .3); }
.av-janela.av-aviso { --av-botao: #d97706; --av-botao-hover: var(--av-ambar); --av-botao-sombra: rgba(217, 119, 6, .3); }
.av-janela.av-perigo { --av-cor: var(--av-vermelho); --av-cor-claro: var(--av-vermelho-claro);
  --av-botao: var(--av-vermelho); --av-botao-hover: var(--av-vermelho-escuro); --av-botao-sombra: rgba(220, 38, 38, .3); }

/* ---------- Celular: notificações embaixo, botões em coluna ---------- */
@media (max-width: 640px) {
  .av-pilha { bottom: 16px; right: 16px; left: 16px; width: auto; }
  .av-toast { animation-name: av-entrar-baixo; }
  .av-corpo { padding: 20px 18px 6px; gap: 12px; }
  .av-botoes { flex-direction: column-reverse; padding: 14px 18px 18px; }
  .av-botao { width: 100%; padding: 12px; }
}

/* Trava a rolagem da página com a janela aberta */
body.av-travado { overflow: hidden; }
/* Com uma janela aberta, as notificações ficam atrás do fundo escurecido
   (no celular elas cobririam os botões da janela) */
body.av-travado .av-pilha { z-index: 999; }

/* ---------- Animações ---------- */
@keyframes av-aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes av-sumir { to { opacity: 0; } }
@keyframes av-entrar { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes av-sair { to { opacity: 0; transform: translateY(6px) scale(.97); } }
@keyframes av-entrar-lado { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes av-entrar-baixo { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes av-sair-lado { to { opacity: 0; transform: translateX(16px); } }
@keyframes av-tempo { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
  .av-toast, .av-fundo, .av-janela, .av-toast.av-saindo, .av-fundo.av-saindo, .av-fundo.av-saindo .av-janela {
    animation-duration: .01ms !important;
  }
}