/* =====================================================================
   OS TEMAS PREMIUM DO OVERPOWER (lote 379, 15/10/2026)
   O dono, vendo as tres direcoes da onda 3 do redesign (Forja, Grafite, Aurora): "como tema e muito legal -
   adicione essas tres opcoes como tema la dentro do Scouter Overpower". So o Overpower (e o dono) carrega esta folha
   (base.html, tema_overpower). Cada tema e uma classe no <html> (look-<id>, static/cedo.js) SEM o tema-overpower:
   nada do ouro vaza por baixo. Trocam as fichas E o acabamento (superficie, borda, tipografia, botoes, grafico).
   A Forja perdeu a "mira" nos cantos dos cartoes ("essas pontinhas entre cada balao, horrivel, horrivel").
   Nada aqui mede ou posiciona: so cor, luz, borda e letra.
   ===================================================================== */

/* ---- O SELO OVERPOWER EM QUALQUER TEMA ----
   O HTML escrevia o selo do PRO ("SCOUTER PRO", "Scouter PRO · conta") e so o tema dourado trocava pelo data-op: em
   qualquer outro tema (Escuro, Claro, os tons e estes) o cliente Overpower via PRO no menu. Agora o HTML ja diz
   OVERPOWER (base.html); aqui o selo ganha a cor de ouro fora do tema dourado. */
html[data-tema-overpower]:not(.tema-overpower) .marca-do-trilho .linha-da-marca em[data-op] {
  font-size: 0; padding: 0 6px; height: 17px; display: inline-flex; align-items: center; border-radius: 5px; color: #2a1a00;
  background: linear-gradient(135deg, #ffe08a, #f5b83d 45%, #d98a1e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 12px rgba(245, 184, 61, .35);
}
html[data-tema-overpower]:not(.tema-overpower) .marca-do-trilho .linha-da-marca em[data-op]::after {
  content: attr(data-op); font: 700 8.5px/1 var(--fonte-titulo); letter-spacing: .05em; color: #2a1a00;
}

/* ================================================================== FORJA: preto profundo, vermelho aceso */
html.look-forja {
  --fundo: #040405; --fundo-2: #08080a; --painel: #0d0d0f; --painel-2: #131315; --painel-3: #1a1a1d;
  --linha: #222226; --linha-viva: #3b3b40; --raio-cartao: 12px; --amb-rgb: 224, 32, 63;
}
html.look-forja body.v3 {
  background:
    radial-gradient(90% 50% at 50% -8%, rgba(224, 32, 63, .24), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 4px),
    #040405;
}
html.look-forja body.v3 :is(.cartao, .numeros .numero, .kpi, .servico, .saudacao-do-painel) {
  border-radius: 12px; border: 1px solid rgba(255, 77, 106, .2);
  background: linear-gradient(180deg, rgba(224, 32, 63, .07), rgba(13, 13, 15, .96) 34%), #0d0d0f;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 20px 40px -24px #000, 0 0 34px -18px rgba(224, 32, 63, .55);
}
html.look-forja body.v3 :is(.cartao, .numero, .kpi)::before { display: none; }
html.look-forja body.v3 :is(.numeros-resumo .numero, .kpi) strong {
  font-family: var(--fonte-titulo); letter-spacing: .01em; color: #fff; -webkit-text-fill-color: #fff; background: none;
  text-shadow: 0 0 18px rgba(255, 255, 255, .22), 0 0 2px rgba(255, 255, 255, .55);
}
html.look-forja body.v3 .numeros-resumo .numero.destaque strong {
  color: #ff4d6a; -webkit-text-fill-color: #ff4d6a; text-shadow: 0 0 22px rgba(255, 77, 106, .75), 0 0 3px rgba(255, 140, 155, .9);
}
html.look-forja body.v3 :is(.numeros .numero, .kpi) .rotulo { font-family: var(--fonte-titulo); letter-spacing: .22em; color: #ff8a9a; }
html.look-forja body.v3 .cartao-cabeca { background: linear-gradient(90deg, rgba(224, 32, 63, .14), transparent 60%); border-bottom-color: rgba(255, 77, 106, .2); }
html.look-forja body.v3 .cartao-cabeca h2 { color: #fff; letter-spacing: .2em; }
html.look-forja body.v3 .grafico-de-area .linha-serie { stroke: #ff4d6a; stroke-width: 2.4; filter: drop-shadow(0 0 6px rgba(255, 77, 106, .85)); }
html.look-forja body.v3 .acao.principal {
  background: linear-gradient(180deg, #ff4d6a, #c0142f); border-color: rgba(255, 140, 155, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 24px -4px rgba(224, 32, 63, .85);
}
html.look-forja body.v3 .comando { background: rgba(6, 6, 7, .8); backdrop-filter: blur(14px); border-bottom-color: rgba(255, 77, 106, .25); }
html.look-forja body.v3 .trilho-lateral { background: #070708; border-right-color: rgba(255, 77, 106, .18); }
html.look-forja body.v3 .trilho-nav a.atual { background: linear-gradient(90deg, #e0203f, #8c0f22); box-shadow: 0 0 22px -4px rgba(224, 32, 63, .9); border-color: transparent; }
html.look-forja body.v3 .trilho-nav a.atual :is(span, .icone) { color: #fff; filter: none; }
html.look-forja body.v3 :is(.pilula, .busca, .sino, .estado-no-topo) { border-color: rgba(255, 77, 106, .25); }
html.look-forja body.v3 .barra-de-baixo { background: rgba(6, 6, 7, .94); border-top-color: rgba(255, 77, 106, .3); }
html.look-forja .marca-do-trilho { --op-ouro-claro: #ffd3da; --op-ouro-vivo: #ff4d6a; --op-ouro-escuro: #a80f28; }

/* ================================================================== GRAFITE PREMIUM: sobrio, sem brilho */
html.look-grafite {
  --fundo: #101012; --fundo-2: #131316; --painel: #18181b; --painel-2: #1e1e22; --painel-3: #26262b;
  --linha: #27272c; --linha-viva: #3a3a41; --texto: #ededf0; --fraco: #9696a0; --fraco-2: #80808a; --raio-cartao: 12px;
  --amb-rgb: 120, 120, 132;
}
html.look-grafite body.v3 { background: #101012; }
html.look-grafite body.v3::before, html.look-grafite body.v3::after { display: none; }
html.look-grafite body.v3 :is(.cartao, .servico, .saudacao-do-painel, .kpi) {
  border: 1px solid rgba(255, 255, 255, .075); border-radius: 12px; background: #18181b; box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
html.look-grafite body.v3 :is(.cartao, .numero, .kpi)::before { display: none; }
/* os quatro numeros da Visao geral num painel so, dividido por fios */
html.look-grafite body.v3 .numeros.numeros-resumo { gap: 0; border: 1px solid rgba(255, 255, 255, .075); border-radius: 12px; background: #18181b; overflow: hidden; }
html.look-grafite body.v3 .numeros.numeros-resumo .numero { border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: 1px solid rgba(255, 255, 255, .06); }
html.look-grafite body.v3 :is(.numeros .numero .rotulo, .kpi .rotulo, .cartao-cabeca h2, .tarja, .grupo-do-trilho span, .titulo-da-barra h1, .saudacao-do-painel h2) {
  font-family: var(--fonte-texto); text-transform: none; letter-spacing: 0;
}
html.look-grafite body.v3 :is(.numeros .numero, .kpi) .rotulo { font-size: 13px; font-weight: 500; color: #a0a0aa; }
html.look-grafite body.v3 :is(.numeros-resumo .numero, .kpi) strong {
  font-family: var(--fonte-texto); font-weight: 600; letter-spacing: -.04em; background: none;
  -webkit-text-fill-color: #f5f5f7; color: #f5f5f7; text-shadow: none; filter: none;
}
html.look-grafite body.v3 .cartao-cabeca { border-bottom-color: rgba(255, 255, 255, .06); background: transparent; }
html.look-grafite body.v3 .cartao-cabeca h2 { font-size: 15px; font-weight: 600; color: #ededf0; }
html.look-grafite body.v3 .cartao-cabeca h2::before { display: none; }
html.look-grafite body.v3 :is(.titulo-da-barra h1, .saudacao-do-painel h2) { font-weight: 650; letter-spacing: -.025em; background: none; -webkit-text-fill-color: #f5f5f7; }
html.look-grafite body.v3 .grafico-de-area .linha-segunda { stroke: #4a4a52; stroke-dasharray: none; }
html.look-grafite body.v3 .acao { box-shadow: none; }
html.look-grafite body.v3 .acao.principal { background: #e0203f; border-color: #e0203f; }
html.look-grafite body.v3 .acao:not(.principal) { background: #222226; border-color: rgba(255, 255, 255, .08); }
html.look-grafite body.v3 .comando { background: rgba(16, 16, 18, .92); border-bottom-color: rgba(255, 255, 255, .06); box-shadow: none; }
html.look-grafite body.v3 .trilho-lateral { background: #0d0d0f; border-right-color: rgba(255, 255, 255, .06); }
html.look-grafite body.v3 .trilho-nav a.atual { background: #1e1e22; box-shadow: inset 2px 0 0 #e0203f; border-color: transparent; }
html.look-grafite body.v3 .trilho-nav a.atual .icone { color: #ededf0; filter: none; }
html.look-grafite body.v3 :is(.pilula, .busca, .sino, .estado-no-topo) { background: #18181b; border-color: rgba(255, 255, 255, .08); box-shadow: none; }
html.look-grafite body.v3 .barra-de-baixo { background: rgba(16, 16, 18, .97); }
html.look-grafite .marca-do-trilho { --op-ouro-claro: #ffffff; --op-ouro-vivo: #d4d4dc; --op-ouro-escuro: #6c6c78; }

/* ================================================================== AURORA: vidro e cor */
html.look-aurora {
  --fundo: #06050b; --fundo-2: #0a0912; --painel: #120f1c; --painel-2: #181426; --painel-3: #201a31;
  --linha: rgba(255, 255, 255, .09); --linha-viva: rgba(255, 255, 255, .18); --texto: #f4f1fb; --fraco: #a49cbb; --raio-cartao: 22px;
  --amb-rgb: 230, 32, 126;
}
html.look-aurora body.v3 {
  background:
    radial-gradient(38% 30% at 8% 0%, rgba(255, 45, 85, .5), transparent 70%),
    radial-gradient(34% 30% at 48% -6%, rgba(230, 30, 140, .38), transparent 72%),
    radial-gradient(40% 36% at 96% 14%, rgba(124, 58, 237, .46), transparent 72%),
    radial-gradient(46% 36% at 70% 70%, rgba(124, 58, 237, .18), transparent 72%),
    radial-gradient(40% 34% at 10% 80%, rgba(255, 45, 85, .12), transparent 72%),
    #06050b;
  background-attachment: fixed;
}
html.look-aurora body.v3::before, html.look-aurora body.v3::after { display: none; }
/* o vidro dos cartoes SEM desfoque (desfoque em cada cartao pesa no celular): a cor de tras aparece pela
   transparencia; o desfoque de verdade fica so no topo, no menu e na barra de baixo */
html.look-aurora body.v3 :is(.cartao, .numeros .numero, .kpi, .servico, .saudacao-do-painel) {
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 22px;
  background: linear-gradient(155deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .025) 55%, rgba(255, 255, 255, .045)), rgba(14, 11, 24, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 30px 60px -32px rgba(0, 0, 0, .8);
}
html.look-aurora body.v3 :is(.cartao, .numero, .kpi)::before { display: none; }
html.look-aurora body.v3 :is(.numeros-resumo .numero, .kpi) strong {
  background: linear-gradient(120deg, #ffffff 15%, #e4d6ff 100%); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; text-shadow: none;
}
html.look-aurora body.v3 .numeros-resumo .numero.destaque strong {
  background: linear-gradient(110deg, #ff5a7a 0%, #ff3d9a 45%, #b07bff 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 18px rgba(255, 61, 154, .5));
}
html.look-aurora body.v3 :is(.numeros .numero, .kpi) .rotulo { color: #ddd2f5; }
html.look-aurora body.v3 .cartao-cabeca { background: transparent; border-bottom-color: rgba(255, 255, 255, .08); }
html.look-aurora body.v3 .cartao-cabeca h2::before { background: linear-gradient(135deg, #ff4d6a, #b07bff); box-shadow: 0 0 12px rgba(255, 61, 154, .9); }
html.look-aurora body.v3 .grafico-de-area .linha-serie { stroke: #ff3d9a; stroke-width: 2.4; filter: drop-shadow(0 0 8px rgba(255, 61, 154, .8)); }
html.look-aurora body.v3 .grafico-de-area .area-serie { fill: #c04dff; fill-opacity: .2; }
html.look-aurora body.v3 .grafico-de-area .linha-segunda { stroke: rgba(196, 170, 255, .45); }
html.look-aurora body.v3 .grafico-de-area .ponto-de-hoje { stroke: #ff3d9a; }
html.look-aurora body.v3 .acao.principal {
  border-radius: 999px; border-color: transparent; background: linear-gradient(110deg, #ff3b5c 0%, #e6207e 50%, #8b3dff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 32px -8px rgba(230, 32, 126, .85);
}
html.look-aurora body.v3 .acao:not(.principal) { border-radius: 999px; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); }
html.look-aurora body.v3 .comando { background: rgba(10, 8, 18, .35); backdrop-filter: blur(22px) saturate(170%); border-bottom-color: rgba(255, 255, 255, .08); box-shadow: none; }
html.look-aurora body.v3 .trilho-lateral { background: rgba(12, 10, 22, .55); backdrop-filter: blur(24px) saturate(160%); border-right-color: rgba(255, 255, 255, .08); }
html.look-aurora body.v3 .trilho-nav a.atual {
  background: linear-gradient(100deg, rgba(255, 59, 92, .45), rgba(139, 61, 255, .35)); border-radius: 999px;
  border-color: rgba(255, 255, 255, .2); box-shadow: 0 8px 26px -10px rgba(230, 32, 126, 1);
}
html.look-aurora body.v3 .trilho-nav a.atual :is(span, .icone) { color: #fff; filter: none; }
html.look-aurora body.v3 :is(.pilula, .busca, .sino, .estado-no-topo) { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); border-radius: 999px; }
html.look-aurora body.v3 .barra-de-baixo { background: rgba(12, 10, 22, .6); backdrop-filter: blur(24px) saturate(160%); border-top-color: rgba(255, 255, 255, .1); }
html.look-aurora .marca-do-trilho { --op-ouro-claro: #ffd6f0; --op-ouro-vivo: #ff3d9a; --op-ouro-escuro: #7c3aed; }

/* ================================================================== ULTRA: ouro e cromo (lote 435, 16/10/2026)
   O dono: "um tema especial para o Scouter Ultra, para ter um diferencial ali". As cores moram em temas.css
   (html.tema-overpower.cor-ultra); aqui o que so o Ultra tem:
   (1) O ANEL DE ENERGIA do centro de comando de cada aba - o mesmo do cartao do Ultra na landing: o ::after vira um
       quadrado de luz girando por tras (so transform: a placa de video gira sozinha) e o ::before, o vidro por cima,
       1,5 px para dentro - a luz so aparece na borda. O quadrado cobre a diagonal do bloco: 120% da largura no
       computador (bloco largo e baixo), 190% no celular (bloco estreito e alto). Parado com "menos movimento"; o
       movimento.js pausa quando o painel descansa ou o bloco sai da tela.
   (2) A ETIQUETA ULTRA em ouro e cromo, com o brilho mais forte. */
html.tema-overpower.cor-ultra .conteudo .vg-heroi {
  border-color: transparent;
  background: linear-gradient(135deg, rgba(var(--op-ouro-rgb), .34), rgba(var(--op-brasa-rgb), .12) 50%, rgba(var(--op-ouro-rgb), .28));
  box-shadow: 0 0 0 1px rgba(var(--op-ouro-rgb), .1), 0 34px 80px -46px rgba(var(--op-ouro-rgb), .6), 0 30px 60px -40px #000;
}
html.tema-overpower.cor-ultra .conteudo .vg-heroi::before {
  inset: 1.5px; z-index: -1; border-radius: 21.5px; filter: none; animation: none; will-change: auto;
  background:
    radial-gradient(70% 130% at 0% 0%, rgba(var(--op-ouro-rgb), .17), transparent 60%),
    radial-gradient(45% 90% at 100% 0%, rgba(var(--op-brasa-rgb), .07), transparent 65%),
    linear-gradient(180deg, color-mix(in srgb, var(--painel) 90%, #000), color-mix(in srgb, var(--painel) 62%, #000));
}
html.tema-overpower.cor-ultra .conteudo .vg-heroi::after {
  left: 50%; top: 50%; right: auto; width: 120%; height: auto; aspect-ratio: 1; z-index: -2; translate: -50% -50%;
  background: conic-gradient(from 0deg,
    transparent 0deg 112deg, rgba(var(--op-ouro-rgb), .35) 140deg, var(--op-ouro-vivo) 160deg, #fff 168deg, rgba(var(--op-brasa-rgb), .9) 174deg, transparent 180deg,
    transparent 180deg 292deg, rgba(var(--op-ouro-rgb), .35) 320deg, var(--op-ouro-vivo) 340deg, #fff 348deg, rgba(var(--op-brasa-rgb), .9) 354deg, transparent 360deg);
  will-change: transform; animation: ultra-anel 7s linear infinite;
}
@media (max-width: 720px) { html.tema-overpower.cor-ultra .conteudo .vg-heroi::after { width: 190%; } }
@keyframes ultra-anel { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
html.menos-movimento.tema-overpower.cor-ultra .conteudo .vg-heroi::after { animation: none; }
/* lote 623 (o dono: "o painel para celular precisa ser mais otimizado"): no celular e na tela de toque o anel de ouro
   fica parado - ele e um quadrado de ~720 px girando atras do centro de comando, e o celular redesenhava metade da
   tela a cada quadro so por ele (as duas luzes do anel continuam no lugar) */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  html.tema-overpower.cor-ultra .conteudo .vg-heroi::after { animation: none; will-change: auto; }
}
html.tema-overpower.cor-ultra .marca-do-trilho .linha-da-marca em[data-op] {
  background: linear-gradient(135deg, #fff4cf, #ffc94d 36%, #b07a1c 60%, #ffe08a 80%, #fff4cf);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 0 16px rgba(var(--op-ouro-rgb), .7), 0 0 30px rgba(var(--op-brasa-rgb), .22);
}

/* ================================================================== A IDENTIDADE DE CADA PLANO (lotes 465 e 467, 19/10/2026)
   Lote 465: cada plano ganhou MATERIAL e ASSINATURA proprios por cima da mesma estrutura (v2.css) - o Ultra em vidro
   preto e ouro, o Overpower em metal roxo com raios. O dono, vendo no ar: "o Overpower ta exagerado demais no roxo,
   enjoativo... nao ta premium, nao ta num tema mais escuro, que e o que eu prefiro; parece que uma crianca pintou tudo
   de roxo" e, do Ultra, "a unica coisa foi a logo na Visao geral, e ficou ridiculo, mal posicionado". A mesma licao do
   Relampago (lote 165, "azulado demais"): a COR E ACENTO, as superficies sao quase pretas. Lote 467:
   - ULTRA (ouro, preto, acento vermelho): fica o vidro preto com o fio de ouro, os numeros e o titulo em ouro; sai a
     marca d'agua do emblema e o vermelho no hover de todo cartao (o vermelho so na barra do titulo de cada cartao).
   - OVERPOWER (roxo): cartoes ESCUROS e neutros sobre as superficies quase pretas das fichas do roxo (temas.css); o
     roxo so onde a mao vai - o botao principal, o item ativo do menu, o ponto do titulo de cada cartao e a faixa do
     dinheiro; numeros e titulos brancos, sem halo; sem raios, sem capsulas, sem luz violeta nos cantos.
   Nada aqui mede ou posiciona; so cor, luz, borda e letra. Nada anima alem do que ja animava. */

/* ---------- ULTRA: vidro preto, fio de ouro; o vermelho so na barra do titulo ---------- */
html.tema-overpower.cor-ultra body.v3 :is(.cartao, .numeros .numero, .kpi, .servico, .vg-dinheiro) {
  border-color: rgba(var(--op-ouro-rgb), .18);
  background: linear-gradient(180deg, #100e09, #0a0906 70%);
  box-shadow: inset 0 1px 0 rgba(var(--op-ouro-vivo-rgb), .26), inset 0 -1px 0 rgba(0, 0, 0, .6), 0 26px 50px -38px rgba(0, 0, 0, .95);
}
html.tema-overpower.cor-ultra body.v3 :is(.cartao, .numeros .numero, .kpi):hover { border-color: rgba(var(--op-ouro-rgb), .34); }
html.tema-overpower.cor-ultra body.v3 :is(.numeros-resumo .numero, .kpi) strong {
  background: linear-gradient(180deg, #fff4cf 0%, var(--op-ouro-vivo) 45%, var(--op-ouro) 70%, #b07a1c 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none;
}
html.tema-overpower.cor-ultra body.v3 :is(.numeros .numero, .kpi) .rotulo { font-family: var(--fonte-titulo); letter-spacing: .2em; color: rgba(var(--op-ouro-vivo-rgb), .72); }
html.tema-overpower.cor-ultra body.v3 .titulo-da-barra h1 {
  background: linear-gradient(180deg, #fff4cf 0%, var(--op-ouro-vivo) 55%, var(--op-ouro) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
html.tema-overpower.cor-ultra body.v3 .cartao-cabeca { background: linear-gradient(90deg, rgba(var(--op-ouro-rgb), .08), transparent 55%); border-bottom-color: rgba(var(--op-ouro-rgb), .16); }
html.tema-overpower.cor-ultra body.v3 .cartao-cabeca h2::before, html.tema-overpower.cor-ultra body.v3 .cartao-cabeca > strong::before {
  width: 3px; height: 16px; border-radius: 2px; background: linear-gradient(180deg, var(--op-ouro-vivo), #e0203f); box-shadow: 0 0 10px rgba(224, 32, 63, .45);
}
html.tema-overpower.cor-ultra body.v3 .acao.principal {
  color: #1a1203; border-color: transparent; background: linear-gradient(135deg, #fff4cf, var(--op-ouro) 45%, #b07a1c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 10px 26px -10px rgba(var(--op-ouro-rgb), .7);
}
html.tema-overpower.cor-ultra body.v3 .acao:not(.principal):not(.perigo) { border-color: rgba(var(--op-ouro-rgb), .32); color: var(--op-texto-ouro); }
html.tema-overpower.cor-ultra body.v3 .trilho-nav a.atual { background: linear-gradient(90deg, rgba(var(--op-ouro-rgb), .2), rgba(var(--op-ouro-rgb), .04)); box-shadow: inset 2px 0 0 var(--op-ouro); }
html.tema-overpower.cor-ultra body.v3 .trilho-nav a.atual :is(span, .icone) { color: var(--op-ouro-vivo); filter: none; }

/* ---------- OVERPOWER: escuro e neutro; o roxo so de acento ---------- */
html.tema-overpower.cor-roxo body.v3 :is(.cartao, .numeros .numero, .kpi, .servico) {
  border-color: rgba(255, 255, 255, .07);
  background: linear-gradient(180deg, #121018, #0d0c12 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 26px 50px -40px #000;
}
html.tema-overpower.cor-roxo body.v3 :is(.cartao, .numero, .kpi)::before { background: linear-gradient(90deg, transparent, rgba(var(--op-ouro-rgb), .32), transparent); }
html.tema-overpower.cor-roxo body.v3 :is(.cartao, .numeros .numero, .kpi):hover { border-color: rgba(var(--op-ouro-rgb), .3); box-shadow: 0 26px 50px -40px #000; }
html.tema-overpower.cor-roxo body.v3 :is(.numeros-resumo .numero, .kpi) strong { background: none; -webkit-text-fill-color: #f4f1fb; color: #f4f1fb; text-shadow: none; filter: none; }
html.tema-overpower.cor-roxo body.v3 :is(.numeros .numero, .kpi) .rotulo { color: var(--fraco); letter-spacing: .14em; }
html.tema-overpower.cor-roxo body.v3 .titulo-da-barra h1 { background: none; -webkit-text-fill-color: #f4f1fb; color: #f4f1fb; text-shadow: none; }
html.tema-overpower.cor-roxo body.v3 .cartao-cabeca { background: transparent; border-bottom-color: rgba(255, 255, 255, .06); }
html.tema-overpower.cor-roxo body.v3 .cartao-cabeca h2::before, html.tema-overpower.cor-roxo body.v3 .cartao-cabeca > strong::before {
  width: 8px; height: 8px; border-radius: 50%; background: var(--op-ouro); box-shadow: 0 0 8px rgba(var(--op-ouro-rgb), .6);
}
html.tema-overpower.cor-roxo body.v3 .acao.principal {
  color: #fff; border-color: transparent; background: linear-gradient(135deg, #5f44b3, #43307f);   /* lote 469: violeta fundo */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 10px 24px -14px rgba(var(--op-ouro-rgb), .5);
}
html.tema-overpower.cor-roxo body.v3 .trilho-nav a.atual { background: linear-gradient(90deg, rgba(var(--op-ouro-rgb), .16), transparent); border-color: transparent; box-shadow: inset 2px 0 0 var(--op-ouro); }
html.tema-overpower.cor-roxo body.v3 .trilho-nav a.atual :is(span, .icone) { color: var(--op-ouro-claro); filter: none; }
html.tema-overpower.cor-roxo .conteudo .vg-heroi {
  border-color: rgba(255, 255, 255, .08);
  background: radial-gradient(60% 90% at 0% 0%, rgba(255, 255, 255, .035), transparent 60%), linear-gradient(180deg, #131317, #0c0c0f);   /* lote 469: sem a luz violeta */
  box-shadow: 0 30px 60px -40px #000;
}

/* ================================================================== O MENU DO CELULAR (lote 474, 19/10/2026)
   O dono, com a gaveta de baixo aberta na secao DONO: "o jeito como ficam as abas selecionadas no celular me incomoda
   muito" - o item atual (Financeiro) virava um cartao inteiro na cor do tema, maior e desalinhado dos outros. Na
   gaveta (aplicativo.css) a tela atual e SO o quadradinho do icone na cor do tema; as pinturas do item atual desta
   folha (os looks do lote 379 e o Ultra/roxo dos lotes 465/467) sao do trilho do COMPUTADOR e nao podem vazar para
   ela: no celular, voltam ao desenho da gaveta. */
@media (max-width: 900px) {
  html.tema-overpower body.v3 .trilho-lateral .trilho-nav a.atual,
  html[class*="look-"] body.v3 .trilho-lateral .trilho-nav a.atual { background: none; box-shadow: none; border-color: transparent; }
  html.tema-overpower body.v3 .trilho-lateral .trilho-nav a.atual :is(span, .icone),
  html[class*="look-"] body.v3 .trilho-lateral .trilho-nav a.atual :is(span, .icone) { color: inherit; filter: none; }
  html.tema-overpower body.v3 .trilho-lateral .trilho-nav a.atual .icone { color: var(--op-tinta-no-ouro, #1a1200); }
  html[class*="look-"]:not(.tema-overpower) body.v3 .trilho-lateral .trilho-nav a.atual .icone { color: #fff; }
  /* os botoes largos (grupo de 1 ou 2 itens) continuam com o fundo e a borda da gaveta */
  html.tema-overpower body.v3 .trilho-lateral .trilho-nav :is(a[data-largo], a[data-poucos]).atual,
  html[class*="look-"] body.v3 .trilho-lateral .trilho-nav :is(a[data-largo], a[data-poucos]).atual { background: var(--painel); border-color: rgba(var(--op-ouro-rgb, 224, 32, 63), .5); }
}