/* ══════════════════════════════════════════════════════════════════════════
OS AVISOS DO VECTRA: o aviso rápido e o diálogo, no mesmo vidro (11/10/2026)
*"Vamos ajeitar essas mensagens padrão de erro, sucesso e afins, que
destoam bastante do resto do app"* (Marcos). Eram três famílias: o flash
pastel do servidor, o diálogo branco chapado e oito toasts próprios.
⚠️⚠️ ESTE ARQUIVO É DAS TRÊS CAMADAS (app, hub e portal do cliente). O hub e
o portal não carregam o `app.css`, então nada aqui depende de token de lá:
todo token é `--av-*` e nasce na própria peça.
· quem desenha o aviso é `static/js/avisos.js` (`Vectra.aviso`);
· quem desenha o diálogo é `static/js/vectra_dialogs.js` (`vAlert`,
`vConfirm`, `vPrompt`), que não injeta mais CSS nenhum;
· o flash do servidor sai de `partials/flash.html` e é ABSORVIDO pelo
`avisos.js`. Sem JavaScript ele aparece assim mesmo, na reserva do fim
deste arquivo: aviso alto é recuperável, aviso calado não.
`tests/test_avisos_em_toda_camada.py` cobra os três `` e os scripts.
══════════════════════════════════════════════════════════════════════════ */
@property --av-mx { syntax: ''; inherits: true; initial-value: 18%; }
@property --av-my { syntax: ''; inherits: true; initial-value: 30%; }
@property --av-giro { syntax: ''; inherits: false; initial-value: 0deg; }
/* ───────────── o vidro: a peça que aviso e diálogo dividem ───────────── */
.av-vidro {
--av-fundo: rgba(11, 19, 28, .72);
--av-borda: rgba(255, 255, 255, .13);
--av-ink: #fff;
--av-ink2: rgba(255, 255, 255, .8);
--av-brilho: rgba(255, 255, 255, .7);
--av-botao: rgba(255, 255, 255, .11);
--av-botao-h: rgba(255, 255, 255, .22);
--av-campo: rgba(255, 255, 255, .09);
--av-success: #7fe0a0;
--av-danger: #ff7d8c;
--av-warning: #ffc25c;
--av-info: #4fd3d9;
--av-tint: var(--av-info);
--av-grad: linear-gradient(118deg, #8fcb3a 0%, #8fcb3a 42%, #5cbf7e 64%, #16b1b3 92%, #11adb4 100%);
position: relative;
isolation: isolate;
box-sizing: border-box;
color: var(--av-ink);
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
background: var(--av-fundo);
-webkit-backdrop-filter: blur(24px) saturate(175%);
backdrop-filter: blur(24px) saturate(175%);
border: 1px solid var(--av-borda);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 22px 46px -16px rgba(5, 14, 24, .6);
}
/* a luz na cor do aviso: segue o ponteiro; sem ponteiro, passeia sozinha */
.av-vidro::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
background: radial-gradient(260px circle at var(--av-mx) var(--av-my), color-mix(in srgb, var(--av-tint) 34%, transparent), transparent 70%);
}
/* o fio de luz na borda */
.av-vidro::after {
content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
background: radial-gradient(200px circle at var(--av-mx) var(--av-my), var(--av-brilho), transparent 65%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude; opacity: .8;
}
html:not(.av-ponteiro) .av-vidro { animation: av-passeio 7s ease-in-out infinite alternate; }
@keyframes av-passeio { from { --av-mx: 6%; --av-my: 10%; } to { --av-mx: 94%; --av-my: 90%; } }
/* sem desfoque de fundo o vidro vira chapa escura: o texto continua legível */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.av-vidro { --av-fundo: #16212d; }
}
/* ───────────── o aviso rápido ───────────── */
/* Acima de todo modal da casa (o drill é 9990, o Suporte 10040, o carregador
de navegação 100001) e abaixo do diálogo (100050): quem pergunta ganha. */
.av-pilha {
position: fixed; z-index: 100040;
top: calc(8px + env(safe-area-inset-top, 0px));
left: calc(8px + env(safe-area-inset-left, 0px));
right: calc(8px + env(safe-area-inset-right, 0px));
display: flex; flex-direction: column;
pointer-events: none; /* o toque passa; só o aviso o pega */
}
@media (min-width: 601px) {
.av-pilha { top: calc(16px + env(safe-area-inset-top, 0px)); left: auto; right: 16px; width: min(420px, calc(100vw - 32px)); }
}
.av-caixa { margin-bottom: 10px; transition: height .32s cubic-bezier(.3, .8, .3, 1), margin .32s; }
.av {
pointer-events: auto;
display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start;
padding: 13px 12px 14px 14px; border-radius: 18px; overflow: hidden;
font-size: 14px; line-height: 1.4; text-align: left;
animation: av-entra .5s cubic-bezier(.2, 1.25, .35, 1) both;
transition: opacity .25s, transform .25s, filter .25s;
}
.av.av-sai { opacity: 0; transform: scale(.94); filter: blur(4px); }
@keyframes av-entra {
from { opacity: 0; transform: translateY(-16px) scale(.94); filter: blur(6px); }
to { opacity: 1; transform: none; filter: none; }
}
@keyframes av-esmaece { from { opacity: 0; } to { opacity: 1; } }
.av-success { --av-tint: var(--av-success); }
.av-danger { --av-tint: var(--av-danger); }
.av-warning { --av-tint: var(--av-warning); }
.av-info, .av-loading { --av-tint: var(--av-info); }
.av-ico {
width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; flex: none; color: var(--av-tint);
background: color-mix(in srgb, var(--av-tint) 18%, transparent);
box-shadow: 0 0 22px -4px color-mix(in srgb, var(--av-tint) 70%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--av-tint) 34%, transparent);
}
.av-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.av-ico .av-traco { stroke-dasharray: 30; stroke-dashoffset: 30; animation: av-desenha .45s .18s ease-out forwards; }
@keyframes av-desenha { to { stroke-dashoffset: 0; } }
.av-danger .av-ico { animation: av-treme .4s .1s; }
@keyframes av-treme { 20% { transform: translateX(-3px); } 45% { transform: translateX(3px); } 70% { transform: translateX(-2px); } }
/* o escudo que espera: três