/* =====================================================================
   Pele Grupo Boticário — só o acesso de visita (recrutadora, 17/09/2026).

   Nada aqui vale sem a classe `gb` no <html>. O painel põe a classe quando o
   perfil é visita e grava `aios.pele = gb` no aparelho; PDV, estoque e
   cartaz leem essa marca no <head>. Dono e caixa nunca têm a classe.

   Cores lidas do SVG do logo em grupoboticario.com.br: marinho #001E3A,
   azul #0076B1, ciano #009CDA, verde #7BC121, lima #D2DA00, laranja #FF7A00,
   vermelho #FF4D00; off-white #F5F1EB é o fundo do site. No claro, laranja,
   verde e vermelho escurecem até o texto passar de 4,5:1.

   Verde de ação (aba ativa, botões, série do varejo) é o do O Boticário,
   #007A54, medido no "Ver produtos" de boticario.com.br (print do Gui,
   17/09); no escuro, #2FB37F (ele clareado: 6,9:1 no marinho). Roxo da
   coluna de abas: #4E3C54, o --dark-purple do site do Grupo — a ~20% sobre
   o off-white dá o lilás da faixa do topo do O Boticário (#D0C4C4).

   Cada página usa uma parte dos nomes: painel e PDV (--sup, --celeste,
   --sobre…), estoque (--cartao, --fraca, --acento), cartaz (--borda,
   --marca, --ok). `!important` porque o painel grava tema e paleta inline.
   ===================================================================== */
:root.gb {
  --fundo:#00162B !important; --sup:#001E3A !important; --sup2:#06294A !important; --cartao:#001E3A !important;
  --linha:#0F3355 !important; --linha2:#1C4468 !important; --borda:#0F3355 !important;
  --tinta:#F5F1EB !important; --tinta2:#A9B7C5 !important; --tinta3:#6E8398 !important; --fraca:#A9B7C5 !important;
  --celeste:#2FB37F !important; --acento:#2FB37F !important; --marca:#2FB37F !important; --sobre:#001E3A !important;
  --ambar:#FF7A00 !important; --laranja:#FF7A00 !important; --sobre-laranja:#001E3A !important;
  --bom:#7BC121 !important; --ok:#7BC121 !important; --ruim:#FF4D00 !important;
  --vidro:rgba(0,22,43,.8) !important; --hachura:rgba(245,241,235,.13) !important; --anel:rgba(47,179,127,.35) !important;
}
:root.gb[data-theme="light"], :root.gb[data-tema="claro"], :root.gb.gb-claro {
  --fundo:#F5F1EB !important; --sup:#FFFFFF !important; --sup2:#FAF7F2 !important; --cartao:#FFFFFF !important;
  --linha:#E7E0D5 !important; --linha2:#D6CDBF !important; --borda:#E7E0D5 !important;
  --tinta:#001E3A !important; --tinta2:#4B5F73 !important; --tinta3:#7F8C99 !important; --fraca:#4B5F73 !important;
  --celeste:#007A54 !important; --acento:#007A54 !important; --marca:#007A54 !important; --sobre:#FFFFFF !important;
  --ambar:#B35300 !important; --laranja:#B35300 !important; --sobre-laranja:#FFFFFF !important;
  --bom:#3F7A0A !important; --ok:#3F7A0A !important; --ruim:#C23800 !important;
  --vidro:rgba(245,241,235,.85) !important; --hachura:rgba(0,30,58,.14) !important; --anel:rgba(0,122,84,.28) !important;
}

/* Logo no lugar do nome — painel e PDV têm `.topo .marca`; estoque e cartaz, o h1 do topo.
   Marinho no claro, off-white no escuro. */
.gb .marca-nome { display:none; }
.gb .topo .marca { font-size:0; display:inline-flex; align-items:center; gap:10px; }
.gb .topo .marca small { font-size:12px; margin-left:0; }
.gb .topo .marca::before, .gb body > header > h1::before, .gb .ct-topo h1::before {
  content:""; display:block; flex:none; width:128px; height:28px;
  background:url(gb-logo.svg) no-repeat left center / contain;
}
.gb body > header > h1::before, .gb .ct-topo h1::before { margin-bottom:8px; }
:root.gb:not([data-theme="light"]):not([data-tema="claro"]):not(.gb-claro) .topo .marca::before,
:root.gb:not(.gb-claro) body > header > h1::before,
:root.gb:not(.gb-claro) .ct-topo h1::before { background-image:url(gb-logo-claro.svg); }

/* Faixa de 3 px com as cores do logo, no topo de cada tela. */
.gb .topo::before, .gb .ct-topo::before, .gb body > header::before {
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg, #7BC121, #D2DA00, #FF7A00, #FF4D00, #009CDA, #0076B1);
}

/* O que cada página pinta fora dos tokens. */
.gb #rec-semanas .rec-l:hover, .gb #rec-pagos-l .rec-l:hover { background:#007A54; }   /* painel */

/* Painel: cabeçalho com um véu do verde, coluna de abas (embaixo, no celular)
   em roxo transparente. `#trilho`, nunca `.trilho` — a classe também é a
   barrinha de progresso das corridas. */
.gb .topo { background:linear-gradient(rgba(0,122,84,.10), rgba(0,122,84,.10)), var(--vidro); }
.gb #trilho { background:linear-gradient(rgba(78,60,84,.18), rgba(78,60,84,.18)), var(--vidro); }
.gb #trilho .aba:not(.ativa) { color:#4E3C54; }
:root.gb:not([data-theme="light"]) .topo { background:linear-gradient(rgba(47,179,127,.14), rgba(47,179,127,.14)), var(--vidro); }
:root.gb:not([data-theme="light"]) #trilho { background:linear-gradient(rgba(113,109,164,.24), rgba(113,109,164,.24)), var(--vidro); }
:root.gb:not([data-theme="light"]) #trilho .aba:not(.ativa) { color:#CFC8E3; }
.gb body > header:not(.topo) { background:var(--fundo); }                               /* estoque */
.gb body > header .salvar, .gb .ct-bt--forte { color:var(--sobre); }                     /* estoque, cartaz */
.gb .ct-topo { box-shadow:0 6px 18px rgba(0,30,58,.12); }                               /* cartaz */

/* ------------------------------------------------------------ gráficos --
   Barras e marcadores na cor cheia da marca (17/09): varejo verde #007A54,
   atacado laranja #FF7A00, margem boa verde #7BC121, margem que sangra
   #FF4D00. Os tokens do claro escurecem pra TEXTO passar de 4,5:1; em barra
   sem texto em cima basta 3:1, então aqui entra a cor da marca. O número ao
   lado da barra continua no token. Barra com cor inline casa por [style*]. */
.gb .grafico .barra .v, .gb .evo-svg .barra-v { fill:#007A54; color:#007A54; }
.gb .grafico .barra .a, .gb .evo-svg .barra-a { fill:#FF7A00; color:#FF7A00; }
.gb .grafico .barra .v { filter:drop-shadow(0 0 4px rgba(0,122,84,.5)); }
.gb .grafico .barra .a { filter:drop-shadow(0 0 4px rgba(255,122,0,.5)); }
.gb .grafico .barra.viva .v { filter:drop-shadow(0 0 10px #007A54) drop-shadow(0 0 2px #007A54) brightness(1.18); }
.gb .grafico .barra.viva .a { filter:drop-shadow(0 0 10px #FF7A00) drop-shadow(0 0 2px #FF7A00) brightness(1.18); }
.gb .legenda .v i, .gb .split-bar i, .gb .prop i, .gb .rank-b i, .gb .bala-fita, .gb .corrida-l .fita, .gb .bala-legenda .q.atual,
.gb .canal-mini .n::before, .gb .ticket-l .cn::before, .gb .canal-n::before, .gb .dia.lista .m { background-color:#007A54; }
.gb .legenda .a i, .gb .split-bar, .gb .prop, .gb .rank-b i.ruim,
.gb .canal-mini.atacado .n::before, .gb .ticket-l.atacado .cn::before, .gb .canal.atacado .canal-n::before, .gb .dia.entrega .m { background-color:#FF7A00; }
.gb .rank-b i[style*="--celeste"], .gb .legenda i[style*="--celeste"] { background:#007A54 !important; }
.gb .rank-b i[style*="--ambar"], .gb .legenda i[style*="--ambar"] { background:#FF7A00 !important; }
.gb .rank-b i[style*="--bom"] { background:#7BC121 !important; }
.gb .rank-b i[style*="--ruim"] { background:#FF4D00 !important; }
/* Evolução: o lucro dentro da barra era a tinta a 80% — cinza sobre laranja. Vira verde
   dentro do atacado (laranja) e marinho dentro do varejo (verde); no escuro, off-white. */
.gb .evo-svg[aria-label^="atacado"] rect[fill="var(--tinta)"] { fill:#007A54; opacity:1; }
.gb .evo-svg[aria-label^="varejo"] rect[fill="var(--tinta)"] { fill:#001E3A; opacity:1; }
:root.gb:not([data-theme="light"]) .evo-svg[aria-label^="varejo"] rect[fill="var(--tinta)"] { fill:#F5F1EB; }
.gb .evo-rolagem:has(.evo-svg[aria-label^="atacado"]) + .evo-legenda i[style*="--tinta"] { background:#007A54 !important; opacity:1 !important; }
.gb .evo-rolagem:has(.evo-svg[aria-label^="varejo"]) + .evo-legenda i[style*="--tinta"] { background:#001E3A !important; opacity:1 !important; }
:root.gb:not([data-theme="light"]) .evo-rolagem:has(.evo-svg[aria-label^="varejo"]) + .evo-legenda i[style*="--tinta"] { background:#F5F1EB !important; }

/* ------------------------------------------------------- marca d'água --
   Símbolo do Grupo Boticário (recortado do SVG do logo, fundo transparente)
   parado no meio da coluna central enquanto ela rola. Fica POR CIMA dos
   cartões com mistura de cor — multiply no claro, screen no escuro —, que é
   o que faz parecer impresso no fundo: atrás de verdade, os cartões opacos
   o cobririam. Não pega clique, e `isolation` o prende dentro do <main>
   (folha, cabeçalho e o aviso da demonstração ficam por cima). */
.gb #app > main { isolation:isolate; }
.gb #app > main::before {
  content:""; display:block; position:sticky; z-index:2; pointer-events:none;
  top:calc(50vh - min(24vh, 210px) + 20px); height:min(48vh, 420px); margin-bottom:calc(-1 * min(48vh, 420px));
  background:url(gb-simbolo.svg) no-repeat center / contain;
  opacity:.07; mix-blend-mode:multiply;
}
:root.gb:not([data-theme="light"]) #app > main::before { opacity:.09; mix-blend-mode:screen; }

/* ------------------------------------------------------------ Dr. Botica --
   A cara do Dr. Botica (personagem do O Boticário) no lugar do "B" do chat. */
.gb .cusco-av { width:38px; height:38px; border-radius:50%; font-size:0; color:transparent;
  background:#5BC0B6 url(dr-botica.png) center / cover no-repeat; border:2px solid #FFFFFF; box-shadow:0 1px 4px rgba(0,30,58,.2); }