/* Aviso de gravação no topo (aviso.js). Tokens do painel com os do admin como alternativa. */
.aviso-topo-area{position:fixed;z-index:1000;top:max(12px,env(safe-area-inset-top));left:50%;width:min(440px,calc(100% - 24px));transform:translateX(-50%);pointer-events:none}
/* Computador: canto de cima à direita, para não cobrir o título da página (contador leigo, 06/11). */
/* Embaixo à direita: em cima cobria o botão do cabeçalho (6º teste leigo, 06/11). */
@media(min-width:900px){.aviso-topo-area{left:auto;right:24px;top:auto;bottom:24px;width:400px;transform:none}
  .aviso-topo{transform:translateY(110%) scale(.97)}.aviso-topo.visivel{transform:none}}
.aviso-topo{display:flex;align-items:center;gap:12px;padding:12px 8px 12px 14px;pointer-events:auto;touch-action:none;user-select:none;cursor:grab;
  color:var(--tinta,var(--texto));background:var(--papel,var(--superficie));border:1px solid var(--borda,var(--linha));border-radius:14px;
  box-shadow:0 1px 2px rgba(16,40,63,.06),0 14px 32px -12px rgba(16,40,63,.28);
  opacity:0;transform:translateY(-110%) scale(.97);transition:transform .32s cubic-bezier(.23,1,.32,1),opacity .2s ease-out}
.aviso-topo.visivel{opacity:1;transform:none}
.aviso-topo.arrastando{transition:none;cursor:grabbing}
.aviso-topo.saindo{transition:transform .2s ease-out,opacity .2s ease-out}
.aviso-topo p{flex:1;margin:0;font-size:.95rem;font-weight:600;line-height:1.4}
.aviso-topo-selo{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:999px;background:var(--verde-fundo,var(--ok-fundo));color:var(--verde-texto,var(--ok))}
.aviso-topo-erro{border-color:var(--erro-texto,var(--critico))}
.aviso-topo-erro .aviso-topo-selo{background:var(--erro-fundo,var(--critico-fundo));color:var(--erro-texto,var(--critico))}
.aviso-topo-selo svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.aviso-topo-fechar{flex:none;display:grid;place-items:center;width:40px;height:40px;min-height:40px;margin:0;padding:0;border:0;border-radius:999px;background:transparent;color:var(--suave);cursor:pointer}
.aviso-topo-fechar:hover{background:var(--fundo);color:var(--tinta,var(--texto))}
.aviso-topo-fechar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;transition:transform .2s cubic-bezier(.23,1,.32,1)}
@media(hover:hover) and (pointer:fine){.aviso-topo-fechar:hover svg{transform:rotate(90deg)}}
.aviso-topo-fechar:active svg{transform:scale(.85) rotate(90deg)}
/* O check se desenha logo depois de entrar. */
@media(prefers-reduced-motion:no-preference){
  .aviso-topo-selo path{stroke-dasharray:1;stroke-dashoffset:1}
  .aviso-topo.visivel .aviso-topo-selo path{transition:stroke-dashoffset .4s cubic-bezier(.23,1,.32,1) .18s;stroke-dashoffset:0}
  .aviso-topo-erro.visivel .aviso-topo-selo{animation:aviso-tremor .4s cubic-bezier(.23,1,.32,1) .12s}
  @keyframes aviso-tremor{25%{transform:translateX(-3px)}50%{transform:translateX(3px)}75%{transform:translateX(-2px)}}
  .aviso-topo-ok.visivel .aviso-topo-selo{animation:aviso-pulo .45s cubic-bezier(.23,1,.32,1) .1s}
  @keyframes aviso-pulo{from{transform:scale(.7)}}
}
/* Movimento reduzido: só esmaece, sem deslizar. */
@media(prefers-reduced-motion:reduce){.aviso-topo{transform:none;transition:opacity .2s ease-out}}