/* =====================================================================
   A VISAO NOVA EM TODA ABA (lote 384, 15/10/2026) - a base carrega esta folha so com a previa ligada
   (app.visao_nova_da_tela, html[data-visao="nova"]).
   O dono aprovou a Visao geral nova ("gostei desse formato novo") e pediu o resto: "nao e so a Visao geral que
   precisa de uma reforma". A mesma linguagem em toda aba:
     1. o CENTRO DE COMANDO de vidro no alto de cada tela (_cabeca_v2.html): o orbe na cor do estado, a frase do
        que importa ali e as fichas (pilulas) com o estado de cada parte - no lugar dos cartoes soltos de numero;
     2. os NUMEROS num painel so no celular (fios finos no lugar de cartoes de 230 px);
     3. o SALVAR numa doca de vidro presa embaixo da tela, que acende quando ha alteracao por salvar.
   Tudo pelas FICHAS de cor (--painel, --tinta-rgb, --amb-rgb, --ok, --atencao, --vermelho): vale em todo tema.
   Movimento so com transform e opacity; "menos movimento" desliga no fim desta folha.
   ===================================================================== */

/* ------------------------------------------------------------------ o brilho que segue o mouse (so no computador) */
.vg-luz { position: relative; isolation: isolate; }
.vg-brilho {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--tinta-rgb), .075), transparent 62%);
  transition: opacity .35s var(--curva);
}
@media (hover: hover) and (pointer: fine) { .vg-luz:hover > .vg-brilho { opacity: 1; } }
.vg-luz > :not(.vg-brilho) { position: relative; z-index: 1; }

/* ================================================================== 1. o centro de comando */
.conteudo .vg-heroi {
  --cor: var(--ok); --cor-rgb: 61, 220, 151;
  /* minmax(0, 1fr): a coluna nunca passa da largura do bloco (o periodo de Resultados, com largura do conteudo,
     alargava a grade e empurrava os botoes para fora da tela no celular) */
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 0 0 18px; padding: 26px 28px 22px; overflow: hidden;
  border-radius: 24px; border: 1px solid rgba(var(--tinta-rgb), .07);
  /* ESCURO (lote 390, o dono: "esse balao esbranquicado eu achei muito esquisito, gosto de um tema mais escuro"): o
     vidro claro (a tinta a 7% sobre o painel a 72%) virava cinza; agora o fundo e o painel puxado para o preto, com a
     luz da marca so no canto */
  background:
    radial-gradient(110% 140% at 0% 0%, rgba(var(--amb-rgb), .15), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--painel) 86%, #000), color-mix(in srgb, var(--painel) 62%, #000));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 30px 60px -40px #000;
}
html.tema-claro .conteudo .vg-heroi { background: radial-gradient(110% 140% at 0% 0%, rgba(var(--amb-rgb), .1), transparent 55%), var(--painel); }
.conteudo .vg-heroi[data-estado="parcial"] { --cor: var(--atencao); --cor-rgb: 245, 184, 61; }
.conteudo .vg-heroi[data-estado="parado"] { --cor: var(--vermelho); --cor-rgb: 224, 32, 63; }
/* a luz da marca andando devagar atras do vidro (uma camada so, transform) */
.conteudo .vg-heroi::before {
  content: ""; position: absolute; inset: -45% -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(28% 42% at 18% 30%, rgba(var(--amb-rgb), .34), transparent 70%),
    radial-gradient(24% 36% at 78% 18%, rgba(var(--amb-rgb), .16), transparent 70%),
    radial-gradient(22% 30% at 55% 95%, rgba(var(--cor-rgb), .12), transparent 70%);
  filter: blur(18px); will-change: transform;
  animation: vg-luz-anda 20s ease-in-out infinite alternate;
}
@keyframes vg-luz-anda { from { transform: translate3d(-4%, -3%, 0) rotate(0deg); } to { transform: translate3d(5%, 4%, 0) rotate(7deg); } }
/* o fio de luz no alto do vidro */
.conteudo .vg-heroi::after {
  content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
}
.vg-heroi-topo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; }

/* o orbe: o miolo aceso e duas ondas saindo, na cor do estado */
.vg-orbe { position: relative; width: 64px; height: 64px; display: grid; place-items: center; flex: none; }
.vg-orbe i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(var(--cor-rgb), .8); box-shadow: 0 0 12px rgba(var(--cor-rgb), .35); animation: vg-onda 3.2s ease-out infinite; }
.vg-orbe i + i { animation-delay: 1.6s; }
.vg-orbe b {
  width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #fff 0 12%, var(--cor) 46%, rgba(var(--cor-rgb), .55) 100%);
  box-shadow: 0 0 24px rgba(var(--cor-rgb), .9), 0 0 0 7px rgba(var(--cor-rgb), .1), 0 0 0 15px rgba(var(--cor-rgb), .05);
}
@keyframes vg-onda { from { transform: scale(.32); opacity: .95; } to { transform: scale(1); opacity: 0; } }

.vg-heroi-texto { min-width: 0; display: grid; gap: 6px; }
/* a saudacao e o titulo (o dono: "deixa o boa tarde como principal"); o estado do bot fica no orbe e nas pilulas */
.vg-saudacao { margin: 0; font: 700 clamp(24px, 2.6vw, 32px)/1.12 var(--fonte-titulo); letter-spacing: -.005em; color: var(--texto); text-wrap: balance; }
.vg-saudacao .julgando { display: inline-block; transform-origin: 50% 70%; animation: julgando 2.6s ease-in-out infinite; }
.vg-resumo { margin: 0; color: var(--fraco); font-size: 14px; line-height: 1.45; }
/* O NIVEL (lote 390: na coluna da direita, da altura do bloco, centrado; lote 392: o dono achou o medalhao "ridiculo"
   - agora e o anel da Jornada em ponto menor, sem caixa: o traco em degrade, o "Nivel" brilhando e a aura de ki da
   transformacao, com o titulo e o poder embaixo) */
/* LOTE 423 (o dono, sobre o anel de 72 px dos lotes 399/420: "ta muito feio... com essa aureola feia aqui... antes tava
   bonitinho, encaixado, com a aura encaixada"): volta o anel do 392 - 112 px, a aura INTEIRA e o titulo embaixo. A aura
   so abraca o anel no tamanho dela: diminuida (90% no 399, 68% no 420) a silhueta ficava mais estreita que o anel e
   sobrava so a chama em cima, a "aureola". MEDIDO (saas/auras.py, viewBox de 200 com o anel de raio 60): a ponta mais
   alta e a do Instinto do dono, 162 unidades acima do centro = 95 px acima do anel de 112 (as das transformacoes vao
   ate 159), mais o brilho do traco: medido na tela, a ponta fica ~100 px acima do anel. O 392 dava 26 + 60 = 86 px e
   a ponta passava da borda do cartao; agora 26 + 87 = 113 px (~12 px de folga). Os 30 px ate o
   titulo sao a orbita das estrelas (~26 px abaixo do anel). No celular o anel segue escondido.
   LOTE 429 (o dono, sobre o cartao de ~317 px: "reduz um pouco o tamanho disso"): o MESMO anel em ponto menor - 96 px,
   e a aura acompanha sozinha (ela e 166,667% do anel), o "500" e o "Nivel" na mesma proporcao; no PC o cartao tem 20/18
   px em cima/embaixo e o anel 20 + 76 px de folga para a chama (~86 px acima do anel de 96). O cartao fica com ~272 px. */
@media (min-width: 721px) { .conteudo .vg-heroi:has(> .vg-nivel) { padding: 20px 28px 18px; } }
/* as linhas 1fr em cima e embaixo: a saudacao e os servicos ficam juntos, no meio da altura do anel */
.conteudo .vg-heroi:has(> .vg-nivel) { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto auto 1fr; column-gap: 40px; row-gap: 0; }
.conteudo .vg-heroi:has(> .vg-nivel) > .vg-heroi-topo { grid-column: 1; grid-row: 2; }
.conteudo .vg-heroi:has(> .vg-nivel) > .vg-controles { grid-column: 1; grid-row: 3; margin-top: 20px; }
.conteudo .vg-heroi > .vg-nivel {
  grid-column: 2; grid-row: 1 / -1; align-self: center; display: grid; justify-items: center; gap: 26px; padding: 76px 30px 0;
  text-align: center; text-decoration: none; color: var(--texto); transition: transform .3s var(--curva);
}
.conteudo .vg-heroi > .vg-nivel:hover { transform: translateY(-2px); }
.vg-nivel-anel { position: relative; display: block; width: 96px; height: 96px; }
.vg-nivel-anel > svg.aura-de-ki { position: absolute; z-index: 0; left: -33.333%; top: -33.333%; width: 166.667%; height: 166.667%; max-width: none;
  overflow: visible; pointer-events: none; }
/* a camada de fora (o contorno claro que respira) sobe ~128 px acima do anel, bem mais que a chama (~100): aqui ela fica
   a 82% da altura, a partir da base (scale soma com a animacao dela), e cabe no cartao com a chama */
.conteudo .vg-heroi > .vg-nivel .aura-de-ki .aura-de-fora { scale: 1 .82; }
.vg-nivel-traco { position: relative; z-index: 1; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.vg-nivel-traco circle { fill: none; stroke-width: 8; }
.vg-nivel-traco .trilha { stroke: rgba(255, 255, 255, .08); }
.vg-nivel-traco .cheio { stroke: var(--cor-t, #f5b83d); stroke-linecap: round; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--cor-t, #f5b83d) 60%, transparent)); }
.vg-nivel.do-dono .vg-nivel-traco .trilha { stroke: rgba(245, 184, 61, .14); }
.vg-nivel.do-dono .vg-nivel-traco .cheio { stroke: url(#degrade-do-nivel); filter: drop-shadow(0 0 7px rgba(245, 184, 61, .55)); }
.vg-nivel-miolo { position: absolute; z-index: 2; inset: 0; display: grid; place-content: center; justify-items: center; gap: 2px; }
.vg-nivel-miolo small { font: 700 7.5px/1 var(--fonte-titulo); letter-spacing: .24em; text-transform: uppercase; color: var(--cor-t, var(--fraco)); opacity: .85; }
.vg-nivel-miolo b { font: 700 29px/1 var(--fonte-titulo); letter-spacing: -.01em; color: var(--cor-t, #ffe2a0); font-variant-numeric: tabular-nums; }
.vg-nivel.do-dono .vg-nivel-miolo small { color: #f5c56a; }
.vg-nivel.do-dono .vg-nivel-miolo b { background: linear-gradient(180deg, #fff6d8, #f5b83d 60%, #e0203f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vg-nivel-texto { display: grid; justify-items: center; gap: 3px; }
.vg-nivel-texto b { font: 700 14.5px/1.2 var(--fonte-texto); }
.vg-nivel-texto small { color: var(--fraco); font-size: 12px; }

/* os controles dos servicos: uma linha de pilulas de vidro, cada uma com o farol, o nome, o estado e UM botao */
.vg-controles { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.conteudo .vg-controles .servico.vg-controle {
  display: flex; align-items: center; gap: 10px; min-height: 0; margin: 0; padding: 7px 8px 7px 14px;
  /* lote 390: escuras (o fundo do tema por baixo), como o bloco - a tinta clara por cima as deixava cinza */
  border-radius: 999px; border: 1px solid rgba(var(--tinta-rgb), .08); background: color-mix(in srgb, var(--fundo) 55%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
  transition: border-color .25s var(--curva), background-color .25s var(--curva);
}
.conteudo .vg-controles .servico.vg-controle:hover { border-color: rgba(var(--tinta-rgb), .2); background: rgba(var(--tinta-rgb), .07); }
.conteudo .vg-controles .servico.vg-controle::before, .conteudo .vg-controles .servico.vg-controle::after { display: none; }
.conteudo .vg-controles .servico-topo { display: flex; align-items: center; gap: 9px; padding: 0; margin: 0; border: 0; min-width: 0; }
.conteudo .vg-controles .servico-nome strong { font: 600 13.5px/1.2 var(--fonte-texto); letter-spacing: 0; text-transform: none; white-space: nowrap; }
.conteudo .vg-controles .estado {
  padding: 2px 8px; border-radius: 999px; font: 600 10.5px/1.4 var(--fonte-texto); letter-spacing: .02em; text-transform: none;
  border: 0; background: rgba(var(--tinta-rgb), .07); color: var(--fraco);
}
.conteudo .vg-controles .estado.aceso { background: rgba(61, 220, 151, .14); color: var(--ok); }
.conteudo .vg-controles .servico-pe { display: flex; align-items: center; gap: 8px; padding: 0; margin: 0; border: 0; }
.conteudo .vg-controles .servico-pe .botoes { display: flex; gap: 6px; }
.conteudo .vg-controles .servico-pe .acao { min-height: 30px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12px; }
.conteudo .vg-controles .servico-pe .acao[data-acao="reiniciar"] { display: none; }
/* "Pausar" e uma acao comum, nao um alarme: neutro, vermelho so ao passar o mouse */
.conteudo .vg-controles .servico-pe .acao.perigo { color: var(--fraco); border-color: rgba(var(--tinta-rgb), .16); background: transparent; box-shadow: none; }
.conteudo .vg-controles .servico-pe .acao.perigo:hover { color: var(--vermelho-claro); border-color: rgba(224, 32, 63, .5); background: rgba(224, 32, 63, .08); }
.conteudo .vg-controles .recado-da-conta { font-size: 12px; color: var(--atencao); max-width: 220px; white-space: normal; }
.conteudo .vg-controles .motivo { margin: 0; font-size: 12px; color: var(--fraco); }
.conteudo .vg-controles .recado:empty { display: none; }
.conteudo .vg-controles .recado { font-size: 12px; color: var(--fraco); }
/* LOTE 423 (o dono, com o print do PC largo, as tres pilulas numa linha: "quero que ... seja assim tambem com as 3
   funcoes retas e organizadas"): a 1536/1440/1366/1280 a terceira (Ponte WhatsApp) caia sozinha na linha de baixo - as
   tres em uma linha pedem ~962 px e a coluna tinha 940/844/770/684. Quando o CARTAO nao comporta (container: a largura
   do menu aberto ou fechado conta), as pilulas viram tres colunas iguais, cada uma em duas linhas - o farol e o nome em
   cima, a etiqueta e o botao embaixo. No PC largo seguem as pilulas de uma linha; o celular tem as regras dele. */
.conteudo .vg-heroi:has(> .vg-nivel) { container: vg-heroi / inline-size; }
@media (min-width: 721px) {
  @container vg-heroi (max-width: 1250px) {
    .conteudo .vg-heroi > .vg-controles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: stretch; }
    .conteudo .vg-controles .servico.vg-controle { display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
      grid-template-areas: "farol nome nome" ". estado pe"; align-items: center; column-gap: 9px; row-gap: 8px;
      padding: 11px 10px 10px 14px; border-radius: 18px; }
    .conteudo .vg-controles .servico.vg-controle > .servico-topo { display: contents; }
    .conteudo .vg-controles .servico-topo > .farol { grid-area: farol; }
    .conteudo .vg-controles .servico-topo > .servico-nome { grid-area: nome; min-width: 0; }
    .conteudo .vg-controles .servico-topo > .estado { grid-area: estado; justify-self: start; }
    .conteudo .vg-controles .servico.vg-controle > .servico-pe { grid-area: pe; justify-self: end; }
    .conteudo .vg-controles .servico.vg-controle > .recado:not(:empty) { grid-column: 1 / -1; }
    .conteudo .vg-controles .vg-controle-do-pro { border-radius: 18px; }
  }
  /* o cartao estreito (PC pequeno com o menu aberto): o nome pode quebrar e o botao desce para a linha dele */
  @container vg-heroi (max-width: 850px) {
    .conteudo .vg-controles .servico.vg-controle { grid-template-areas: "farol nome nome" ". estado estado" ". pe pe"; }
    .conteudo .vg-controles .servico.vg-controle > .servico-pe { justify-self: start; }
    .conteudo .vg-controles .servico-topo > .servico-nome strong { white-space: normal; overflow: visible; }
  }
}
/* LOTE 520 (22/10/2026, o dono com o print do PC: "bug" - a Ponte WhatsApp sem telefone pareado). O recado da conta
   ("a ponte esta de pe, mas nenhum telefone esta pareado: leia o QR na tela WhatsApp") morava na mesma coluna dos
   botoes: com os tres controles lado a lado a coluna ficava estreita, o recado subia por cima da etiqueta e a etiqueta
   caia em cima do nome; no celular o nome virava "Ponte ...". Com recado, o controle vira uma grade em todas as
   larguras: o nome inteiro em cima, a etiqueta e o botao no meio, o recado numa linha so dele embaixo. E a etiqueta
   acompanha o farol: com o farol em atencao (ambar) ela deixa de ser verde. */
.conteudo .vg-controles .servico.vg-controle:has(.recado-da-conta) {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "farol nome nome" ". estado botoes" ". aviso aviso";
  align-items: center; column-gap: 9px; row-gap: 6px; border-radius: 18px;
}
.conteudo .vg-controles .servico.vg-controle:has(.recado-da-conta) > :is(.servico-topo, .servico-pe) { display: contents; }
.conteudo .vg-controles .servico.vg-controle:has(.recado-da-conta) .farol { grid-area: farol; }
.conteudo .vg-controles .servico.vg-controle:has(.recado-da-conta) .servico-nome { grid-area: nome; min-width: 0; }
.conteudo .vg-controles .servico.vg-controle:has(.recado-da-conta) .servico-nome strong { display: inline; white-space: normal; overflow: visible; }
.conteudo .vg-controles .servico.vg-controle:has(.recado-da-conta) .estado { grid-area: estado; justify-self: start; }
.conteudo .vg-controles .servico.vg-controle:has(.recado-da-conta) :is(.botoes, .motivo) { grid-area: botoes; justify-self: end; }
.conteudo .vg-controles .servico.vg-controle:has(.recado-da-conta) .recado-da-conta { grid-area: aviso; max-width: none; font-size: 11.5px; line-height: 1.35; }
.conteudo .vg-controles .servico.vg-controle:has(.recado-da-conta) > .recado:not(:empty) { grid-column: 1 / -1; }
.conteudo .vg-controles .farol.atencao ~ .estado { background: rgba(245, 184, 61, .14); color: var(--atencao); }
/* os vizinhos da ponte (mais alta, com o recado) esticam junto: o conteudo fica no topo, sem vao entre o nome e a etiqueta */
.conteudo .vg-controles .servico.vg-controle { align-content: start; }

/* ================================================================== 2. os numeros do dia */
.conteudo .vg-numeros .numero { display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.conteudo .vg-numeros .numero.com-faisca { padding-bottom: 54px; }
.conteudo .vg-numeros .numero > small { position: relative; z-index: 1; }
/* a curva dos 14 dias, no pe do cartao, atras do texto. O ".vg-luz > .vg-faisca" ganha do ".vg-luz > :not(.vg-brilho)"
   (que poe todo filho em position: relative): sem ele a curva caia no meio do cartao, com 54 px vazios embaixo. */
.vg-faisca, .vg-luz > .vg-faisca { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 40px; z-index: 0; pointer-events: none; overflow: visible; }
.vg-faisca-area { fill: rgba(var(--amb-rgb), .14); }
/* sem o "risco" por stroke-dasharray: com vector-effect: non-scaling-stroke o Chrome mede o pathLength errado e a
   linha parava antes do fim, com a area seguindo sozinha (o "corte" que o dono viu no celular) */
.vg-faisca-linha { fill: none; stroke: rgba(var(--amb-rgb), .85); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.vg-faisca { animation: vg-aparece .9s var(--curva-2) .2s backwards; }
.numero.destaque .vg-faisca-area { fill: rgba(61, 220, 151, .13); }
.numero.destaque .vg-faisca-linha { stroke: rgba(61, 220, 151, .9); }
@keyframes vg-aparece { from { opacity: 0; transform: translate3d(0, 6px, 0); } }
/* o que saiu, o que ja tinha saido e o que nao saiu, numa barra so */
.vg-barra { position: relative; margin-top: auto; display: flex; height: 6px; border-radius: 999px; overflow: hidden;
  background: rgba(var(--tinta-rgb), .08); z-index: 1; flex: none; }
.vg-aproveitamento { margin-top: auto; display: grid; gap: 7px; }
.vg-aproveitamento .vg-barra { margin-top: 0; }
.vg-aproveitamento em { font-style: normal; font-size: 12px; color: var(--fraco); }
.vg-barra i { width: var(--f); height: 100%; transform-origin: left; animation: vg-cresce .9s var(--curva-2) .2s backwards; }
.vg-barra .saiu { background: var(--ok); }
.vg-barra .antes { background: rgba(var(--tinta-rgb), .35); }
.vg-barra .nao { background: var(--vermelho); }
@keyframes vg-cresce { from { transform: scaleX(0); } }

/* ================================================================== as fichas do centro de comando de cada aba */
.vg-fichas { display: flex; flex-wrap: wrap; gap: 8px; }
.vg-ficha {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; padding: 7px 14px 7px 12px; border-radius: 999px;
  border: 1px solid rgba(var(--tinta-rgb), .08); background: color-mix(in srgb, var(--fundo) 55%, transparent); color: var(--fraco);
  font-size: 13px; line-height: 1.25; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
  transition: border-color .25s var(--curva), background-color .25s var(--curva);
}
a.vg-ficha:hover { border-color: rgba(var(--tinta-rgb), .22); background: rgba(var(--tinta-rgb), .07); color: var(--fraco); }
.vg-luzinha { width: 8px; height: 8px; border-radius: 50%; flex: none; background: rgba(var(--tinta-rgb), .3); }
.vg-ficha[data-tom="ok"] .vg-luzinha { background: var(--ok); box-shadow: 0 0 9px rgba(61, 220, 151, .6); }
.vg-ficha[data-tom="atencao"] .vg-luzinha { background: var(--atencao); box-shadow: 0 0 9px rgba(245, 184, 61, .55); }
.vg-ficha[data-tom="erro"] .vg-luzinha { background: var(--vermelho); box-shadow: 0 0 9px rgba(224, 32, 63, .55); }
.vg-ficha > span { white-space: nowrap; }
.vg-ficha > b { min-width: 0; color: var(--texto); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-ficha > small { color: var(--fraco); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-ficha > small:empty { display: none; }
/* no tema claro a sombra preta de baixo do vidro (feita para o escuro) virava uma faixa cinza: sombra de papel */
html.tema-claro .conteudo .vg-heroi { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 22px 44px -32px rgba(28, 24, 20, .4); }
html.tema-claro[data-visao="nova"] .conteudo > .acoes-da-tela { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 18px 40px -18px rgba(28, 24, 20, .35); }
/* o centro de comando das outras abas: o .conteudo ja separa os blocos pelo gap */
.conteudo .vg-heroi.vg-cabeca { margin: 0; }
/* OS SELETORES EM PILULA (o periodo de Resultados, as partes de Posts do canal): um trilho de vidro so, com a opcao
   atual acesa por dentro - no lugar de botoes soltos de borda vermelha */
html[data-visao="nova"] .conteudo :is(.barra-de-periodo, .partes-dos-posts) {
  display: inline-flex; align-items: center; flex-wrap: nowrap; gap: 4px; width: max-content; max-width: 100%; justify-self: start;
  padding: 4px; margin: 0; overflow-x: auto; scrollbar-width: none; border-radius: 999px;
  border: 1px solid rgba(var(--tinta-rgb), .09); background: rgba(var(--tinta-rgb), .045);
}
html[data-visao="nova"] .conteudo :is(.barra-de-periodo, .partes-dos-posts)::-webkit-scrollbar { display: none; }
html[data-visao="nova"] .conteudo :is(.barra-de-periodo, .partes-dos-posts) > span { display: none; }
html[data-visao="nova"] .conteudo :is(.barra-de-periodo a, .partes-dos-posts .chip) {
  flex: none; min-height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 15px; margin: 0; border-radius: 999px;
  border: 0; background: transparent; box-shadow: none; color: var(--fraco); text-decoration: none;
  font: 600 13px/1 var(--fonte-texto); letter-spacing: 0; text-transform: none; transform: none;
  transition: background-color .2s var(--curva), color .2s var(--curva);
}
html[data-visao="nova"] .conteudo :is(.barra-de-periodo a, .partes-dos-posts .chip):hover { color: var(--texto); background: rgba(var(--tinta-rgb), .06); transform: none; }
html[data-visao="nova"] .conteudo :is(.barra-de-periodo a.atual, .partes-dos-posts .chip.atual) {
  color: var(--texto); background: rgba(var(--amb-rgb), .2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(var(--amb-rgb), .35);
}
html[data-visao="nova"] .conteudo .partes-dos-posts .chip small { color: var(--fraco); font-weight: 500; }
/* dentro do centro de comando de Resultados, o periodo fica na linha de baixo */
.vg-topo-dos-resultados .vg-periodo { grid-column: 1 / -1; }
.vg-topo-dos-resultados .auto-atualiza { white-space: nowrap; }

/* o bloco recolhido (o que se mexe uma vez na vida: o token do Radar...): so o titulo e a seta, abre no toque */
.conteudo details.vg-recolhido > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; }
.conteudo details.vg-recolhido > summary::-webkit-details-marker { display: none; }
.conteudo details.vg-recolhido > summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-left: 4px; border-right: 2px solid var(--fraco); border-bottom: 2px solid var(--fraco);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s var(--curva);
}
.conteudo details.vg-recolhido[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.conteudo details.vg-recolhido:not([open]) > summary { border-bottom: 0; margin-bottom: 0; }
.conteudo details.vg-recolhido:not([open]) { padding-bottom: 0; }
/* as acoes do centro de comando (a direita no PC, embaixo no celular) */
.vg-cabeca-acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.vg-cabeca-acoes .acao { border-radius: 999px; }
/* o numero grande do centro de comando (Resultados, Atividade...) */
.vg-grande { display: block; margin: 0; font: 700 clamp(30px, 3.4vw, 42px)/1.05 var(--fonte-titulo); letter-spacing: -.02em; color: var(--texto); font-variant-numeric: tabular-nums; }
.vg-grande small { font-size: .5em; color: var(--fraco); font-weight: 600; letter-spacing: 0; }

/* ================================================================== a doca do salvar (toda tela com .acoes-da-tela) */
/* A linha "nota + Salvar" do alto das telas de ajuste (Ajustes, Canais, Contas das lojas, Modelo do post,
   Preferencias) vira uma doca de vidro presa embaixo da tela: o botao sempre a mao, sem rolar ate o topo. FIXED e nao
   sticky: item de grade so gruda dentro da propria linha. Por isso o .conteudo perde o "will-change: transform" (com
   ele, o .conteudo vira o quadro de referencia de todo fixed de dentro): a troca de aba continua com transform, so que
   sem a camada permanente - e a doca some enquanto a tela entra/sai. */
html[data-visao="nova"] .conteudo { will-change: opacity; }
html[data-visao="nova"] { --doca-esq: var(--trilho-aberto, 0px); }
html[data-visao="nova"] body.trilho-recolhido { --doca-esq: var(--trilho, 0px); }
html[data-visao="nova"] .conteudo > .acoes-da-tela {
  position: fixed; z-index: 60; bottom: 18px; left: calc((100% + var(--doca-esq)) / 2); transform: translateX(-50%);
  width: min(780px, calc(100% - var(--doca-esq) - 48px)); margin: 0;
  display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; padding: 8px 8px 8px 20px; border-radius: 999px;
  border: 1px solid rgba(var(--tinta-rgb), .14); background: color-mix(in srgb, var(--painel) 80%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 26px 60px -16px rgba(0, 0, 0, .85);
  transition: opacity .2s var(--curva), border-color .25s var(--curva), box-shadow .25s var(--curva);
}
html[data-visao="nova"] .conteudo:is(.entrando, .saindo) > .acoes-da-tela { opacity: 0; }
html[data-visao="nova"] .conteudo > .acoes-da-tela .nota-da-acao { order: 0; flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fraco); }
html[data-visao="nova"] .conteudo > .acoes-da-tela .recado-geral { order: 1; flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-visao="nova"] .conteudo > .acoes-da-tela .recado-geral:empty { display: none; }
html[data-visao="nova"] .conteudo > .acoes-da-tela .acao { order: 2; flex: none; border-radius: 999px; min-height: 40px; }
html[data-visao="nova"] .conteudo:has(> .acoes-da-tela) { padding-bottom: 120px; }
/* alteracao por salvar (a casca mostra a #barra-de-salvar quando um campo muda): a doca acende e diz isso; a barra
   solta, que apareceria em cima da doca, nao aparece nesta tela */
html[data-visao="nova"] body:has(.conteudo > .acoes-da-tela) #barra-de-salvar { display: none; }
html[data-visao="nova"] body:has(#barra-de-salvar:not([hidden])) .conteudo > .acoes-da-tela {
  border-color: rgba(245, 184, 61, .6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 4px rgba(245, 184, 61, .1), 0 26px 60px -16px rgba(0, 0, 0, .85);
}
html[data-visao="nova"] body:has(#barra-de-salvar:not([hidden])) .conteudo > .acoes-da-tela::before {
  content: "Alterações não salvas"; order: 0; flex: 1 1 auto; min-width: 0; color: var(--atencao); font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-visao="nova"] body:has(#barra-de-salvar:not([hidden])) .conteudo > .acoes-da-tela .nota-da-acao { display: none; }
html[data-visao="nova"] body:has(#barra-de-salvar:not([hidden])) .conteudo > .acoes-da-tela .acao.principal { animation: vg-chama 2.4s ease-in-out infinite; }
/* os avisos flutuantes (o "salvo", a novidade do sininho) sobem acima da doca - nasciam no mesmo canto, por cima dela */
html[data-visao="nova"] body:has(.conteudo > .acoes-da-tela) .avisos-flutuantes { bottom: 96px; }
@keyframes vg-chama { 50% { transform: scale(1.04); } }
/* LOTE 432 (o dono, print de Canais e rotas: "mesmo depois de salvar continuou aqui o botao"): a doca .doca-so-com-pendencia
   so aparece com alteracao por salvar - a #barra-de-salvar da casca (input) ou o recado do canais.js (Nova rota e
   Remover sao cliques, nao input: eles escrevem o recado "pendente") - ou com um recado (salvando, salvo, erro). O
   recado vai inteiro, em ate duas linhas, no lugar do "Alteracoes nao salvas"; o canais.js apaga o "salvo" em 6 s. */
html[data-visao="nova"] body:not(:has(#barra-de-salvar:not([hidden]))) .conteudo > .acoes-da-tela.doca-so-com-pendencia:has(#recado:empty) {
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s var(--curva), visibility 0s linear .2s;
}
html[data-visao="nova"] body .conteudo > .acoes-da-tela.doca-so-com-pendencia:has(#recado:not(:empty))::before { content: none; }
html[data-visao="nova"] .conteudo > .acoes-da-tela.doca-so-com-pendencia:has(#recado:not(:empty)) { border-radius: 22px; }
html[data-visao="nova"] .conteudo > .acoes-da-tela.doca-so-com-pendencia #recado {
  order: 0; flex: 1 1 auto; max-width: none; overflow: visible; white-space: normal; line-height: 1.35; font-size: 13.5px;
}
.rotas-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 4px 0 18px; }
.rotas-rodape .nota-da-acao { color: var(--fraco); font-size: 12.5px; }


/* ================================================================== tablet e celular */
@media (max-width: 900px) {
  html[data-visao="nova"] { --doca-esq: 0px; }
}
@media (max-width: 720px) {
  .conteudo .vg-heroi { padding: 18px 16px 16px; gap: 16px; border-radius: 20px; }
  .vg-heroi-topo { grid-template-columns: auto minmax(0, 1fr); gap: 14px; }
  .conteudo .vg-heroi .vg-nivel { display: none; }
  .conteudo .vg-heroi:has(> .vg-nivel) { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; column-gap: 0; row-gap: 16px; }
  .conteudo .vg-heroi:has(> .vg-nivel) > :is(.vg-heroi-topo, .vg-controles) { grid-row: auto; margin-top: 0; }
  .vg-orbe { width: 48px; height: 48px; }
  .vg-orbe b { width: 16px; height: 16px; }
  .vg-saudacao { font-size: 22px; }
  .vg-resumo { font-size: 13.5px; }
  .vg-controles { gap: 8px; }
  .conteudo .vg-controles .servico.vg-controle { width: 100%; justify-content: space-between; }
  /* LOTE 390 (o dono, print do celular): "Automacao de ofertas" + "online" + Pausar nao cabiam numa linha e o nome
     corria por baixo da etiqueta. No celular a etiqueta desce para baixo do nome (o farol ao lado dos dois). */
  .conteudo .vg-controles .servico-topo { flex: 1 1 auto; display: grid; grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "farol nome" "farol estado"; align-items: center; column-gap: 10px; row-gap: 3px; }
  .conteudo .vg-controles .servico-topo > .farol { grid-area: farol; }
  .conteudo .vg-controles .servico-topo > .servico-nome { grid-area: nome; min-width: 0; }
  .conteudo .vg-controles .servico-topo > .estado { grid-area: estado; justify-self: start; }
  .conteudo .vg-controles .servico-nome strong { display: block; overflow: hidden; text-overflow: ellipsis; }
  .vg-cabeca-acoes { grid-column: 1 / -1; justify-content: stretch; min-width: 0; }
  .vg-cabeca-acoes > .acao { flex: 1 1 auto; justify-content: center; min-width: 0; white-space: normal; text-align: center; }
  /* nada dentro do centro de comando alarga a grade alem da tela (os botoes e o periodo de Resultados vazavam) */
  .conteudo .vg-heroi > *, .vg-heroi-topo > * { min-width: 0; }
  /* a doca com dois botoes (Canais: Nova rota + Salvar): os botoes dividem a largura, sem o texto cortado */
  html[data-visao="nova"] body:not(:has(#barra-de-salvar:not([hidden]))) .conteudo > .acoes-da-tela:has(.acao + .acao)::before { content: none; }
  html[data-visao="nova"] .conteudo > .acoes-da-tela:has(.acao + .acao) .acao { flex: 1 1 0; min-width: 0; }
  .vg-fichas { gap: 6px; }
  .vg-ficha { padding: 6px 12px 6px 10px; font-size: 12.5px; }
  /* o periodo de Resultados cabe inteiro na largura (o "Este mes", o mais usado, ficava escondido a direita) */
  html[data-visao="nova"] .conteudo .vg-periodo { width: 100%; justify-content: space-between; }
  html[data-visao="nova"] .conteudo .vg-heroi .vg-periodo a { flex: 1 1 auto; justify-content: center; padding: 0 6px; font-size: 12.5px; }

  /* OS NUMEROS NO CELULAR (o dono, 15/10/2026: "os baloes de publicadas hoje e ofertas convertidas estao ocupando
     muito espaco a toa"): um painel de vidro so, dividido por fios finos, cada numero compacto - de ~560 px de
     cartoes soltos para ~250 px. O vao entre as celulas (1 px) mostra o fundo do painel = o fio. Vale para a Visao
     geral (.vg-numeros) e para os numeros de toda aba (.numeros, .kpis). */
  .conteudo .vg-numeros, html[data-visao="nova"] .conteudo :is(.numeros, .kpis) {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; padding: 0; margin: 0 0 16px; overflow: hidden; border-radius: 20px;
    border: 1px solid rgba(var(--tinta-rgb), .12); background: rgba(var(--tinta-rgb), .09);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 24px 50px -34px rgba(0, 0, 0, .9);
  }
  html body .conteudo .vg-numeros > .numero.vg-luz, html[data-visao="nova"] body .conteudo :is(.numeros, .kpis) > :is(.numero, .kpi) {
    margin: 0; min-height: 0; padding: 12px 14px 12px; gap: 4px; border: 0; border-radius: 0; box-shadow: none; transform: none; animation: none;
    background: color-mix(in srgb, var(--painel) 94%, transparent);
  }
  /* numero sozinho na ultima linha ocupa as duas colunas (sem a celula vazia mostrando o fio) */
  html[data-visao="nova"] body .conteudo :is(.numeros, .kpis) > :is(.numero, .kpi):last-child:nth-child(odd) { grid-column: 1 / -1; }
  html body .conteudo .vg-numeros > .numero.vg-luz.com-faisca { padding-bottom: 34px; }
  html body .conteudo .vg-numeros > .numero.vg-luz::before, html body .conteudo .vg-numeros > .numero.vg-luz::after,
  html[data-visao="nova"] body .conteudo :is(.numeros, .kpis) > :is(.numero, .kpi)::before,
  html[data-visao="nova"] body .conteudo :is(.numeros, .kpis) > :is(.numero, .kpi)::after { display: none; }
  html body .conteudo .vg-numeros > .numero.vg-luz strong,
  html[data-visao="nova"] body .conteudo :is(.numeros, .kpis) > :is(.numero, .kpi) strong { font-size: 26px; line-height: 1.05; }
  html body .conteudo .vg-numeros > .numero.vg-luz .rotulo,
  html[data-visao="nova"] body .conteudo :is(.numeros, .kpis) > :is(.numero, .kpi) .rotulo { font-size: 9.5px; letter-spacing: .14em; }
  /* o "▲ 59%" vai para a linha do numero (a direita): na linha do rotulo ele quebrava e descia o 898 em relacao ao
     vizinho. O .rotulo e position: relative (regra do .vg-luz), entao 100% = logo abaixo dele. */
  html body .conteudo .vg-numeros > .numero.vg-luz .rotulo .delta { position: absolute; top: calc(100% + 9px); right: 0; margin: 0; }
  html body .conteudo .vg-numeros > .numero.vg-luz > small,
  html[data-visao="nova"] body .conteudo :is(.numeros, .kpis) > :is(.numero, .kpi) > small { margin: 0; padding: 0; border: 0; font-size: 11.5px; line-height: 1.35; }
  .vg-luz > .vg-faisca { height: 30px; }
  .vg-barra { height: 5px; }
  .vg-aproveitamento { gap: 5px; }
  .vg-aproveitamento em { font-size: 11px; }

  /* a doca no celular: acima da barra de abas, de ponta a ponta, sem a nota comprida (o botao fala por si) */
  html[data-visao="nova"] .conteudo > .acoes-da-tela {
    left: 12px; right: 12px; width: auto; transform: none; bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    padding: 7px 7px 7px 16px; gap: 8px; border-radius: 18px;
  }
  html[data-visao="nova"] .conteudo > .acoes-da-tela .nota-da-acao { display: none; }
  html[data-visao="nova"] body:not(:has(#barra-de-salvar:not([hidden]))) .conteudo > .acoes-da-tela::before {
    content: "Nada muda até você salvar"; flex: 1 1 auto; min-width: 0; color: var(--fraco); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  html[data-visao="nova"] .conteudo > .acoes-da-tela .acao { flex: none; min-height: 42px; padding: 0 16px; }
  html[data-visao="nova"] body:has(.conteudo > .acoes-da-tela) .avisos-flutuantes { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
  html[data-visao="nova"] .conteudo:has(> .acoes-da-tela) { padding-bottom: calc(190px + env(safe-area-inset-bottom, 0px)); }
}


/* ================================================================== menos movimento: tudo parado */
html.menos-movimento .vg-heroi::before, html.menos-movimento .vg-orbe i,
html.menos-movimento .vg-faisca, html.menos-movimento .vg-barra i,
html.menos-movimento .conteudo > .acoes-da-tela .acao.principal { animation: none; }
html.menos-movimento .vg-orbe i { display: none; }

/* =====================================================================
   O FUNIL DE HOJE NO CENTRO DE COMANDO DA ATIVIDADE (lote 398, previa do dono; de TODOS desde o lote 411, 15/10/2026).
   Veio da onda_nova.css (so das previas). templates/_funil_do_dia.html, dentro da macro cabeca (extra=).
   ===================================================================== */
.conteudo { --dinheiro-cor: #f5c451; --dinheiro-rgb: 245, 196, 81; }
/* lote 465: a cor do dinheiro segue o tema de quem tem o Overpower/Ultra (o roxo no Overpower, o ouro no Ultra) - o dono,
   vendo a faixa amarela no Overpower roxo: "isso aqui com tema amarelo". Fora do tema de ouro (PRO), o ouro de sempre. */
html.tema-overpower .conteudo { --dinheiro-cor: var(--op-ouro, #f5c451); --dinheiro-rgb: var(--op-ouro-rgb, 245, 196, 81); }
.vg-funil { display: grid; gap: 12px; min-width: 0; }
.vg-funil-passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch; gap: 10px; }
.vg-funil-passo { position: relative; display: grid; align-content: start; gap: 4px; min-width: 0; padding: 14px 16px 16px; border-radius: 16px;
  border: 1px solid rgba(var(--tinta-rgb), .07); background: color-mix(in srgb, var(--fundo) 55%, transparent); }
.vg-funil-rotulo { font: 600 10.5px/1.25 var(--fonte-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--fraco); }
.vg-funil-passo b { font: 700 28px/1.05 var(--fonte-titulo); color: var(--texto); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.vg-funil-passo small { color: var(--fraco); font-size: 12px; line-height: 1.35; }
.vg-funil-barra { display: block; height: 6px; margin-top: 8px; border-radius: 999px; overflow: hidden; background: rgba(var(--tinta-rgb), .07); }
.vg-funil-barra i { display: block; width: var(--p); height: 100%; border-radius: inherit; transform-origin: left;
  background: linear-gradient(90deg, rgba(var(--tinta-rgb), .5), rgba(var(--tinta-rgb), .28)); animation: vg-cresce .9s var(--curva-2, ease) backwards; }
.vg-funil-passo:nth-child(3) .vg-funil-barra i { background: linear-gradient(90deg, var(--dinheiro-cor), rgba(var(--dinheiro-rgb), .5)); animation-delay: .12s; }
.vg-funil-fim { border-color: rgba(61, 220, 151, .2); background: linear-gradient(180deg, rgba(61, 220, 151, .07), transparent 70%), color-mix(in srgb, var(--fundo) 55%, transparent); }
.vg-funil-fim b { color: var(--ok); }
.vg-funil-fim .vg-funil-barra i { background: linear-gradient(90deg, #22c07d, var(--ok)); box-shadow: 0 0 12px rgba(61, 220, 151, .45); animation-delay: .24s; }
.vg-funil-seta { display: grid; place-content: center; justify-items: center; gap: 2px; min-width: 64px; color: var(--fraco); text-align: center; }
.vg-funil-seta b { font: 700 15px/1 var(--fonte-titulo); color: var(--texto); font-variant-numeric: tabular-nums; }
.vg-funil-seta b::after { content: "\2192"; display: block; margin-top: 5px; font: 400 17px/1 var(--fonte-texto); color: rgba(var(--tinta-rgb), .38); }
.vg-funil-seta small { font-size: 11px; white-space: nowrap; }
.vg-funil-resto { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--fraco); }
.vg-funil-resto b { color: var(--texto); font-variant-numeric: tabular-nums; }
.vg-funil-resto a { color: var(--dinheiro-cor); text-decoration: none; font-weight: 600; white-space: nowrap; }
.vg-funil-resto a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .vg-funil-passos { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .vg-funil-passo { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 12px 14px 14px; }
  .vg-funil-passo .vg-funil-rotulo, .vg-funil-passo small { grid-column: 1; }
  .vg-funil-passo b { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 24px; }
  .vg-funil-barra { grid-column: 1 / -1; }
  .vg-funil-seta { grid-auto-flow: column; justify-content: start; gap: 8px; min-width: 0; padding: 0 16px; }
  .vg-funil-seta b::after { display: none; }
  .vg-funil-seta b::before { content: "\2193"; margin-right: 6px; color: var(--fraco); }
}
html.menos-movimento .vg-funil-barra i { animation: none; }