/* Aviso encostado no campo (js/aviso-de-campo.js, item 578, 17/10/2026). Só tokens da paleta. Camada 2000: por cima da página (e da barra do celular), POR BAIXO de gavetas (2100/2200), bandeja (2250), janelinha de
   faciais (2340), popups (2350+), avisos rápidos (4000) e diálogos (5000) — escala no topo de css/style.css. */
.aviso-campo {
  position: fixed; z-index: 2000; box-sizing: border-box; display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 8px 8px 11px; background: var(--card-bg); color: var(--text); border: 1px solid var(--border); border-left: 4px solid var(--danger);
  border-radius: 9px; box-shadow: 0 8px 22px color-mix(in srgb, var(--text) 18%, transparent); font-size: 12px; line-height: 1.4;
  visibility: hidden; animation: toast-entrada .14s ease-out;
}
.aviso-campo.av-aviso { border-left-color: var(--warning); }
.aviso-campo.av-ok { border-left-color: var(--success); }
.aviso-campo .av-texto { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.aviso-campo .av-fechar { flex: 0 0 auto; min-width: 24px; min-height: 24px; padding: 0; border: 0; background: transparent; color: var(--text-muted); font-size: 12px; border-radius: 6px; cursor: pointer; }
.aviso-campo .av-fechar:hover { color: var(--text); background: var(--surface-2); }
/* setinha apontando para o campo: na borda de baixo quando o aviso está acima, na de cima quando está abaixo */
.aviso-campo::after {
  content: ""; position: absolute; left: var(--seta-x, 20px); bottom: -6px; width: 10px; height: 10px; margin-left: -5px;
  background: var(--card-bg); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); transform: rotate(45deg);
}
.aviso-campo.av-abaixo::after { bottom: auto; top: -6px; border: 0; border-left: 1px solid var(--border); border-top: 1px solid var(--border); }
@media (prefers-reduced-motion: reduce) { .aviso-campo { animation: none; } }
/* o aviso do produto (#documento-erro) continua no DOM e continua sendo ligado/desligado pelo script dele; só a cópia encostada no campo aparece (fase1b-real.js espelha o texto) */
body.fase1b-extras #documento-erro { display: none !important; }