/* ==== belezas, area gestao (31/10/2026) ================================================================
   Catalogo aprovado "Belezas do Painel", s-gestao-1 a s-gestao-6. So tokens do painel.css (cor, espaco,
   raio, duracao e curva); nada aqui muda o visual de repouso alem do descrito em cada bloco.
   Movimento: cada animacao so roda com prefers-reduced-motion:no-preference; com reduce fica so a opacidade.
   O botao #movimento (html[data-movimento="reduzido"]) ja zera duracao e atraso de tudo no painel.css; aqui
   so se corrige o que ficaria torto parado (o arco do giro do Entrar vira circulo inteiro, sem escala). */

/* ---- s-gestao-1: Desempenho, periodo anterior marcado na propria barra (.limite) -----------------------
   .blz-marca: traco fino na posicao do anterior (--a), em cinza para nao se confundir com o da meta (b, tx1).
   .blz-delta: trecho entre o anterior e o de agora hachurado, quando o de agora passou dele.
   .blz-ant-rot: rotulo do traco logo abaixo da regua; translateX(-a) prende o texto dentro da barra nas pontas */
html.vn .limite > .blz-marca{position:absolute; top:-.1875rem; bottom:-.1875rem; left:var(--a); width:.125rem; margin-left:-.0625rem;
  border-radius:var(--rp); background:var(--tx2); pointer-events:none;}
html.vn .limite > .blz-delta{position:absolute; top:0; bottom:0; left:var(--a); width:calc(var(--p) - var(--a)); border-radius:0 var(--rp) var(--rp) 0;
  background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--bg) 50%, transparent) 0 .1875rem, transparent .1875rem .375rem); pointer-events:none;}
html.vn .blz-ant-rot{position:relative; height:calc(var(--f1) * 1.4); margin-top:var(--e0, .125rem); font-size:var(--f1); line-height:1.4; color:var(--tx3);
  font-variant-numeric:tabular-nums;}
html.vn .blz-ant-rot > span{position:absolute; top:0; left:var(--a); transform:translateX(calc(var(--a) * -1)); white-space:nowrap;}
html.vn .blz-ant-rot strong{color:var(--tx2); font-weight:600;}
@keyframes blz-g-aparece{from{opacity:0;}}
@keyframes blz-g-pousa{from{opacity:0; transform:translateY(-.25rem);}}
@media (prefers-reduced-motion:no-preference){
  /* depois da capa que revela a barra (des-cobre-sai, 3 x dur-3 + dur-1 no painel.css): o traco pousa e a variacao aparece */
  html.vn .anim-entra .des-ind .limite > .blz-marca{animation:blz-g-pousa var(--dur-3) var(--mola) calc(var(--dur-3) * 3 + var(--dur-1)) backwards; z-index:1;}
  html.vn .anim-entra .des-ind :is(.limite > .blz-delta, .blz-ant-rot){animation:blz-g-aparece var(--dur-4) var(--ease-entra) calc(var(--dur-3) * 4) backwards;}
}
@media (prefers-reduced-motion:reduce){
  html.vn .anim-entra .des-ind :is(.limite > .blz-marca, .limite > .blz-delta, .blz-ant-rot){animation:blz-g-aparece var(--dur-3) linear backwards;}
}

/* ---- s-gestao-2: Relatorio da equipe, Ritmo do time ----------------------------------------------------
   .blz-valor: o valor de hoje escrito no fim da linha; .blz-gap: fio ate a reta ideal.
   .blz-anima (so na entrada e na troca de mes): a linha se desenha (pathLength=1), a area e o ponto chegam depois */
html.vn .ritmo text.blz-valor{fill:var(--tx1); font-size:var(--f1); font-weight:600; font-variant-numeric:tabular-nums;}
html.vn .ritmo .blz-gap{stroke:var(--tx2); stroke-width:1; stroke-dasharray:2 3;}
/* 03/11/2026 (auditor, transicao-longa): a linha se desenhava em 840ms; agora em --dur-4 (280ms) e o resto da sequencia chega mais cedo, mesma ordem */
@keyframes blz-g-traca{from{stroke-dashoffset:1;} to{stroke-dashoffset:0;}}
@keyframes blz-g-ponto{from{opacity:0; transform:scale(.4);}}
@media (prefers-reduced-motion:no-preference){
  html.vn .ritmo.blz-anima .atual{stroke-dasharray:1 1; animation:blz-g-traca var(--dur-4) var(--ease-entra) var(--dur-1) backwards;}
  html.vn .ritmo.blz-anima .area{animation:blz-g-aparece var(--dur-4) var(--ease-entra) var(--dur-4) backwards;}
  html.vn .ritmo.blz-anima .ponto{transform-box:fill-box; transform-origin:center; animation:blz-g-ponto var(--dur-3) var(--mola) calc(var(--dur-4) + var(--dur-1)) backwards;}
  html.vn .ritmo.blz-anima :is(.blz-valor, .blz-gap){animation:blz-g-aparece var(--dur-3) var(--ease-entra) calc(var(--dur-4) + var(--dur-3)) backwards;}
}
@media (prefers-reduced-motion:reduce){
  html.vn .ritmo.blz-anima :is(.atual, .area, .ponto, .blz-valor, .blz-gap){animation:blz-g-aparece var(--dur-3) linear backwards;}
}

/* ---- s-gestao-3: Rodizio, subir e descer sem perder o foco ---------------------------------------------
   O nome desliza ate a nova semana (FLIP no belezas-gestao.js); a data fica parada porque e da posicao.
   A linha que mudou acende um instante e apaga devagar. */
html.vn .ordem .nm.blz-desliza{transition:transform var(--dur-4) var(--mola);}
html.vn .ordem li.blz-movido{background:var(--fillh); border-radius:var(--r1); transition:background-color var(--dur-4) var(--ease-padrao) .6s;}
html.vn .ordem li.blz-movido.blz-apaga{background:transparent;}
@media (prefers-reduced-motion:reduce){ html.vn .ordem .nm.blz-desliza{transition:none;} }

/* ---- s-gestao-4: Minha conta, previa do avatar com troca cruzada ---------------------------------------
   Os dois rostos no mesmo lugar (grid-area 1/1): o antigo sai encolhendo um pouco, o novo pousa na mola.
   O padding-top do #av-previa (espaco do gorro e da touca) segue o do painel.css. A opcao escolhida tem o
   rosto 6% maior, e a que acabou de ser escolhida acende o anel em transicao em vez de saltar. */
html.vn #av-previa.blz-cruza{display:inline-grid;}
html.vn #av-previa.blz-cruza > svg{grid-area:1 / 1;}
html.vn .av-opcoes > button > svg{transition:transform var(--dur-3) var(--mola);}
html.vn .av-opcoes > button[aria-checked="true"] > svg{transform:scale(1.06);}
@keyframes blz-g-av-sai{to{opacity:0; transform:scale(.94);}}
@keyframes blz-g-av-entra{from{opacity:0; transform:scale(.94);}}
@keyframes blz-g-anel{from{box-shadow:inset 0 0 0 .125rem transparent;}}
@keyframes blz-g-cresce{from{transform:scale(1);}}
@media (prefers-reduced-motion:no-preference){
  html.vn #av-previa > svg.blz-sai{animation:blz-g-av-sai var(--dur-3) var(--ease-padrao) forwards;}
  html.vn #av-previa > svg.blz-entra{animation:blz-g-av-entra var(--dur-4) var(--mola) backwards;}
  html.vn .av-opcoes > button.blz-novo{animation:blz-g-anel var(--dur-2) var(--ease-padrao) backwards;}
  html.vn .av-opcoes > button.blz-novo > svg{animation:blz-g-cresce var(--dur-3) var(--mola) backwards;}
}
/* movimento reduzido: so dissolve, sem escala */
@media (prefers-reduced-motion:reduce){
  html.vn #av-previa > svg.blz-sai{animation:blz-g-aparece var(--dur-3) linear reverse forwards;}
  html.vn #av-previa > svg.blz-entra{animation:blz-g-aparece var(--dur-3) linear backwards;}
  html.vn .av-opcoes > button > svg{transition:none;}
}
html[data-movimento="reduzido"].vn .av-opcoes > button[aria-checked="true"] > svg{transform:none;}

/* ---- s-gestao-5: /entrar, botao Entrar que responde e trava ---------------------------------------------
   O POST segue nativo. O JS so poe o giro e o rotulo no botao (.blz-entra), marca aria-busy no envio
   ("Entrando…", sem duplo envio) e mostra o giro depois de 300ms (.blz-lento). Na volta com erro, a mensagem
   desce no lugar e o foco vai para a senha. */
html.vn .entra.blz-entra{grid-auto-flow:column; place-content:center; align-items:center; gap:var(--e2);
  transition:transform var(--dur-1) var(--mola), background-color var(--dur-2) var(--ease-padrao);}
html.vn .entra.blz-entra:active:not([aria-disabled="true"]){transform:scale(.97);}
html.vn .entra.blz-entra[aria-busy="true"]{cursor:progress; background:color-mix(in srgb, var(--glpi-fill) 75%, var(--s2));}
html.vn .entra .blz-giro{display:none; width:1rem; height:1rem; flex:none;}
html.vn .entra.blz-lento .blz-giro{display:block;}
html.vn .entra .blz-giro circle{fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-dasharray:40 100;}
@keyframes blz-g-gira{to{transform:rotate(360deg);}}
@keyframes blz-g-desce{from{opacity:0; transform:translateY(-.25rem);}}
@media (prefers-reduced-motion:no-preference){
  /* infinito so enquanto aria-busy (carregando) */
  html.vn .entra[aria-busy="true"] .blz-giro{animation:blz-g-gira .8s linear infinite;}
  html.vn .f-conta .erro-msg.blz-desce{animation:blz-g-desce var(--dur-3) var(--ease-entra) var(--dur-1) backwards;}
}
@media (prefers-reduced-motion:reduce){
  html.vn .f-conta .erro-msg.blz-desce{animation:blz-g-aparece var(--dur-3) linear backwards;}
  html.vn .entra .blz-giro circle{stroke-dasharray:none; opacity:.6;}
}
html[data-movimento="reduzido"] .entra .blz-giro circle{stroke-dasharray:none; opacity:.6;}

/* ---- s-gestao-6 (barra de abas do celular) saiu em 06/11/2026: a pastilha mora no painel.css, bloco "barra de baixo 06/11" */