/* Dashboard Body Way
Paleta: slots 1 e 2 da referencia do skill dataviz (azul, laranja) —
documentados como aprovados em todos os pares, nos dois modos.
Cor de status nunca carrega sentido sozinha: sempre com seta, icone ou texto. */
:root {
color-scheme: light;
--surface: #fcfcfb;
--surface-2: #ffffff;
--plane: #f4f4f1;
--ink: #0b0b0b;
--ink-2: #52514e;
/* era #898781 = 3,50:1 sobre a superfície clara — reprovava em AA (4,5:1),
justamente no texto que explica os números para quem não é técnico */
--ink-muted: #6b6a65;
--grid: #e6e5df;
--axis: #c3c2b7;
--border: rgba(11,11,11,.09);
--pago: #2a78d6; /* slot 1 — azul */
--organico: #eb6834; /* slot 2 — laranja */
--aqua: #1baf7a; /* slot 3 — os três primeiros slots validam todos os pares */
/* Comparação com período anterior NÃO é uma segunda categoria: é a mesma
medida no passado. Recebe um passo claro da própria rampa azul (250),
não um hue novo — hue novo diria "outra coisa". */
--pago-fraco: #86b6ef;
--bom: #006300;
--bom-viz: #0ca30c;
--ruim: #d03b3b;
--atencao: #fab219;
--nada: #898781;
--sombra: 0 1px 2px rgba(11,11,11,.04), 0 8px 24px -12px rgba(11,11,11,.10);
--sombra-alta: 0 1px 2px rgba(11,11,11,.05), 0 20px 40px -20px rgba(11,11,11,.22);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--surface: #1a1a19; --surface-2: #201f1e; --plane: #0d0d0d;
--ink: #fff; --ink-2: #c3c2b7; --ink-muted: #9d9b93;
--grid: #2c2c2a; --axis: #383835;
--border: rgba(255,255,255,.10);
--pago: #3987e5; --organico: #d95926; --bom: #0ca30c;
--aqua: #199e70; --pago-fraco: #184f95; /* passo 600: piso de 2:1 no escuro */
--ruim: #e66767; /* #d03b3b dava 3,62:1 no escuro; este passa */
--sombra: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
--sombra-alta: 0 1px 2px rgba(0,0,0,.5), 0 20px 40px -20px rgba(0,0,0,.8);
}
}
:root[data-theme="dark"] {
color-scheme: dark;
--surface: #1a1a19; --surface-2: #201f1e; --plane: #0d0d0d;
--ink: #fff; --ink-2: #c3c2b7; --ink-muted: #9d9b93;
--grid: #2c2c2a; --axis: #383835;
--border: rgba(255,255,255,.10);
--pago: #3987e5; --organico: #d95926; --bom: #0ca30c; --ruim: #e66767;
--aqua: #199e70; --pago-fraco: #184f95;
}
* { box-sizing: border-box; }
body {
margin: 0; background: var(--plane); color: var(--ink);
font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px 72px; }
/* ------------------------------------------------------------------ topo */
header.topo {
background: var(--surface); border-bottom: 1px solid var(--border);
position: sticky; top: 0; z-index: 10;
}
.topo .wrap { display: flex; align-items: center; gap: 22px; padding: 13px 24px; flex-wrap: wrap; }
/* O topo é grudado (sticky), então link com âncora parava a seção EXATAMENTE
embaixo dele: quem clicava em "ver no tráfego" caía numa tabela sem título,
sem entender onde tinha chegado. O respiro é maior que o topo de propósito —
ver o título da seção é o que confirma que o pulo deu certo. */
[id] { scroll-margin-top: 128px; }
/* Sem `scroll-behavior: smooth`: num painel de 15.000px o pulo animado leva
segundos, e o Chrome cancela a animação quando os gráficos terminam de
renderizar no meio do caminho — o link com âncora simplesmente não saía do
topo. Salto seco chega. */
.marca { font-weight: 680; letter-spacing: -.02em; font-size: 16px; line-height: 1.15; }
.marca small { display: block; font-weight: 400; color: var(--ink-muted); font-size: 11.5px; letter-spacing: 0; }
nav.abas { display: flex; gap: 2px; background: var(--plane); padding: 3px; border-radius: 10px; }
nav.abas a {
padding: 7px 15px; border-radius: 8px; text-decoration: none;
color: var(--ink-2); font-size: 13.5px; font-weight: 500; transition: .15s;
}
nav.abas a:hover { color: var(--ink); }
nav.abas a.on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--sombra); }
/* Contador de alertas. Vermelho porque o número já significa "tem coisa
errada" — e vem acompanhado da palavra "Alertas" ao lado, nunca sozinho:
cor não pode ser o único portador do recado. */
nav.abas .conta {
display: inline-block; min-width: 18px; margin-left: 6px; padding: 1px 6px;
border-radius: 20px; background: var(--ruim); color: #fff;
font-size: 11px; font-weight: 700; line-height: 1.5; text-align: center;
font-variant-numeric: tabular-nums;
}
.espaco { margin-left: auto; }
.periodos { display: flex; gap: 2px; background: var(--plane); padding: 3px; border-radius: 10px; }
.periodos a {
padding: 6px 13px; border-radius: 8px; text-decoration: none;
font-size: 13px; color: var(--ink-2); font-weight: 500;
}
.periodos a.on { background: var(--surface); color: var(--ink); font-weight: 650; box-shadow: var(--sombra); }
.sair { font-size: 13px; color: var(--ink-muted); text-decoration: none; }
.filtro-data { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.intervalo { display: flex; align-items: center; gap: 6px; }
.intervalo input[type=date] {
border: 1px solid var(--border); background: var(--surface); color: var(--ink);
border-radius: 8px; padding: 6px 9px; font-size: 12.5px;
font-family: inherit; color-scheme: inherit;
}
.intervalo input[type=date]:focus { outline: 2px solid var(--pago); outline-offset: 1px; }
.intervalo .ate { font-size: 12px; color: var(--ink-muted); }
.intervalo button {
border: 1px solid var(--border); background: var(--ink); color: var(--surface);
border-radius: 8px; padding: 7px 13px; font-size: 12.5px; font-weight: 600;
cursor: pointer; font-family: inherit;
}
/* ------------------------------------------------------- linha de filtros */
/* Fica ACIMA de tudo que recorta, nunca dentro de um cartão: filtro dentro de
gráfico faz a pessoa achar que só aquele gráfico mudou. */
.filtros { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
padding: 16px 24px 0; }
.filtros-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dim { display: inline-flex; align-items: center; gap: 7px;
background: var(--plane); border: 1px solid transparent;
border-radius: 9px; padding: 4px 5px 4px 11px; }
.dim > span { font-size: 11px; color: var(--ink-muted); font-weight: 600;
text-transform: uppercase; letter-spacing: .05em; }
.dim select {
border: 0; background: var(--surface); color: var(--ink); border-radius: 7px;
padding: 5px 8px; font: inherit; font-size: 12.5px; font-weight: 550;
max-width: 190px; cursor: pointer; color-scheme: inherit;
}
.dim select:focus-visible { outline: 2px solid var(--pago); outline-offset: 1px; }
/* dimensão ativa se anuncia sem depender só de cor */
.dim.on { border-color: var(--pago);
background: color-mix(in srgb, var(--pago) 10%, transparent); }
.dim.on > span { color: var(--pago); }
.chips { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.chip {
display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
font-size: 12px; padding: 5px 10px; border-radius: 20px;
border: 1px solid var(--border); background: var(--surface); color: var(--ink-2);
}
.chip b { color: var(--ink-muted); font-weight: 600; }
.chip span { font-size: 14px; line-height: 1; color: var(--ink-muted); }
.chip:hover { border-color: var(--ruim); color: var(--ruim); }
.chip:hover span, .chip:hover b { color: var(--ruim); }
.chip.limpar { border-style: dashed; }
/* aviso de dimensão que a Meta/Mautic não têm */
.nao-aplica {
border: 1px dashed var(--axis); border-radius: 12px; padding: 15px 18px;
color: var(--ink-2); font-size: 13px; line-height: 1.5;
background: repeating-linear-gradient(135deg, transparent, transparent 7px,
color-mix(in srgb, var(--ink) 2.5%, transparent) 7px,
color-mix(in srgb, var(--ink) 2.5%, transparent) 8px);
}
.nao-aplica b { color: var(--ink); }
/* nome que também é caminho: clicar recorta a tela inteira por ele.
Sublinhado pontilhado em vez de contínuo — é navegação de dentro da tabela,
não link para fora. */
.furo { font-weight: 570; text-decoration: underline dotted;
text-decoration-color: var(--axis); text-underline-offset: 3px;
display: inline-block; }
.furo:hover { color: var(--pago); text-decoration-color: var(--pago); }
.furo.fraco { color: var(--ink-muted); font-size: 11.5px; font-weight: 400; }
/* ---------------------------------------------------------------- titulos */
h1 { font-size: 25px; margin: 32px 0 3px; letter-spacing: -.025em; font-weight: 660; }
/* era 12px muted — o título de seção ficava menor e mais apagado que o corpo */
h2 { font-size: 13px; margin: 40px 0 14px; color: var(--ink-2); font-weight: 680;
text-transform: uppercase; letter-spacing: .06em;
display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.baixar { font-size: 11.5px; font-weight: 500; text-transform: none;
letter-spacing: 0; color: var(--ink-muted); text-decoration: underline;
text-underline-offset: 3px; }
.baixar:hover { color: var(--pago); }
.sub { color: var(--ink-muted); font-size: 13px; margin: 0 0 6px; }
.cartao {
background: var(--surface); border: 1px solid var(--border);
border-radius: 16px; padding: 22px; box-shadow: var(--sombra);
}
/* ------------------------------------------------------------------ herói */
.heroi {
display: grid; grid-template-columns: 1.15fr 1fr; gap: 0;
border-radius: 18px; overflow: hidden; border: 1px solid var(--border);
box-shadow: var(--sombra-alta); background: var(--surface); margin-top: 18px;
}
.heroi .lado { padding: 26px 28px; }
.heroi .lado + .lado { border-left: 1px solid var(--border); background: var(--surface-2); }
.heroi .rotulo { font-size: 12.5px; color: var(--ink-2); font-weight: 550;
text-transform: uppercase; letter-spacing: .05em; }
.heroi .numero {
font-size: 52px; font-weight: 660; letter-spacing: -.035em;
line-height: 1.05; margin: 10px 0 6px;
}
.heroi .grafico { margin-top: 14px; }
/* meta do mês */
.meta { margin-top: 14px; }
.meta-topo { display: flex; justify-content: space-between; gap: 14px;
font-size: 12.5px; color: var(--ink-2); margin-bottom: 6px; flex-wrap: wrap; }
.meta-topo b { color: var(--ink); font-weight: 640; }
.meta-trilho { height: 9px; border-radius: 5px; overflow: hidden;
background: color-mix(in srgb, var(--pago) 15%, transparent); }
.meta-trilho > i { display: block; height: 100%; border-radius: 5px;
background: var(--pago); transition: width .4s ease; }
.meta-pe { font-size: 11.5px; color: var(--ink-muted); margin-top: 7px; }
.meta-pe b { color: var(--ink-2); }
/* 2×2 fixo: com o faturamento da mídia viraram quatro, e o auto-fit de 140px
cabia três na coluna do herói e jogava o quarto sozinho numa segunda linha.
Assim o faturamento fica embaixo do investimento e ao lado do retorno — é o
numerador dele. */
.heroi .micro-kpis { display: grid; gap: 20px 18px; margin-top: 4px;
grid-template-columns: repeat(2, minmax(0, 1fr)); }
.heroi .micro-kpis .v { font-size: 21px; font-weight: 620; letter-spacing: -.02em; }
.heroi .micro-kpis .r { font-size: 12px; color: var(--ink-muted); }
/* ------------------------------------------------------------------- KPIs */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px,1fr)); gap: 16px; }
.kpi { position: relative; overflow: hidden; }
.kpi .rotulo { font-size: 12.5px; color: var(--ink-2); font-weight: 550; }
.kpi .valor { font-size: 32px; font-weight: 640; letter-spacing: -.028em; margin: 8px 0 3px; line-height: 1.1; }
.kpi .valor.menor { font-size: 25px; }
.kpi .ref { font-size: 12.5px; color: var(--ink-muted); display: flex; align-items: center; gap: 5px; }
.kpi .ref.bom { color: var(--bom); font-weight: 550; }
.kpi .ref.ruim { color: var(--ruim); font-weight: 550; }
.kpi .nota { font-size: 11.5px; color: var(--ink-muted); margin-top: 12px;
padding-top: 11px; border-top: 1px solid var(--grid); line-height: 1.45; }
.kpi .spark { display: block; margin-top: 12px; width: 100%; height: 34px; }
/* medidor: trilho e um passo claro da propria rampa */
.medidor { height: 8px; border-radius: 5px; margin-top: 12px; overflow: hidden;
background: color-mix(in srgb, var(--pago) 16%, transparent); }
.medidor > i { display: block; height: 100%; border-radius: 5px; }
/* ------------------------------------------------------------- composição */
.comp-linha { margin-bottom: 15px; }
.comp-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.comp-nome { font-size: 13.5px; font-weight: 550; display: flex; align-items: center; gap: 8px; }
.comp-val { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.comp-val b { color: var(--ink); font-weight: 620; }
.trilho { height: 10px; background: var(--grid); border-radius: 6px; overflow: hidden; }
.preenche { height: 100%; border-radius: 6px; transition: width .4s ease; }
.preenche.paid { background: var(--pago); }
.preenche.organic { background: var(--organico); }
.preenche.unknown { background: var(--nada); }
/* total da secao de origens: fica no TOPO do cartao porque a lista passa da
dobra e o rodape nunca era alcancado. Os dois valores tem o MESMO tamanho:
dar corpo maior a um deles reintroduz a confusao que este bloco resolve. */
.comp-total {
margin: -4px 0 22px; padding: 16px 18px 18px;
background: var(--plane); border: 1px solid var(--border); border-radius: 13px;
}
.ct-cabeca { display: flex; justify-content: space-between; align-items: baseline;
gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ct-rot { font-size: 11px; font-weight: 620; letter-spacing: .06em;
text-transform: uppercase; color: var(--ink-muted); }
.ct-conta { font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.ct-pares { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px 26px; }
.ct-par { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ct-val { font-size: 27px; font-weight: 640; letter-spacing: -.028em; line-height: 1.1;
color: var(--ink); font-variant-numeric: tabular-nums; }
/* cor so como reforco do rotulo que ja esta escrito ao lado, nunca sozinha */
.ct-val.ct-garantida { color: var(--pago); }
.ct-leg { font-size: 11.5px; color: var(--ink-muted); line-height: 1.45; }
.ct-leg b { color: var(--ink-2); font-weight: 620; }
.ct-barra { margin-top: 16px; border-radius: 4px; height: 12px; }
/* mix de produto dentro da linha de origem */
.mix { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.mix-item { font-size: 11.5px; color: var(--ink-2); background: var(--plane);
border: 1px solid var(--border); border-radius: 7px; padding: 4px 9px; }
.mix-item b { color: var(--ink); font-weight: 620; margin-right: 4px; }
.legenda { display: flex; gap: 18px; font-size: 12.5px; color: var(--ink-2); margin: 0 0 18px; flex-wrap: wrap; }
.legenda span { display: inline-flex; align-items: center; gap: 7px; }
.ponto { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
/* ------------------------------------------------------------------ funil */
.funil-linha { display: grid; grid-template-columns: 148px 1fr 74px; gap: 14px;
align-items: center; margin-bottom: 11px; }
.funil-rot { font-size: 13px; color: var(--ink-2); font-weight: 550; }
.funil-trilho { height: 26px; background: var(--grid); border-radius: 7px; overflow: hidden; }
.funil-fill { height: 100%; border-radius: 7px; transition: width .4s ease; }
.funil-val { text-align: right; font-size: 15px; font-weight: 620;
font-variant-numeric: tabular-nums; }
/* --------------------------------------------------------------- gráficos */
svg.gr { width: 100%; height: auto; display: block; overflow: visible; }
/* O tamanho aqui está em UNIDADES DO viewBox (1000 de largura), não em pixels
de tela. Renderizado num cartão de ~590px, 11 unidades viravam ~6,5px reais —
ilegível. 18 unidades dão ~11px reais. */
.tick { fill: var(--ink-muted); font-size: 18px;
font-family: system-ui, sans-serif; font-variant-numeric: tabular-nums; }
/* --------------------------------------------- hover do gráfico de linha */
.graf { position: relative; }
.graf .dica {
position: absolute; bottom: calc(100% - 14px); transform: translateX(-50%);
background: var(--surface-2); border: 1px solid var(--border);
box-shadow: var(--sombra-alta); border-radius: 10px; padding: 9px 12px;
font-size: 12.5px; line-height: 1.5; white-space: nowrap; pointer-events: none;
z-index: 5; display: flex; flex-direction: column;
}
.graf .dica b { font-size: 12px; color: var(--ink-muted); font-weight: 600; }
.graf .dica span { font-variant-numeric: tabular-nums; }
.graf .dica[hidden], .mira[hidden] { display: none; }
/* ------------------------------------------- barras horizontais (ranking) */
/* Barra ≤ 24px: fina, com ar sobrando na faixa. Ponta do dado arredondada
em 4px, quadrada na base — a base é a linha zero, não pode "flutuar". */
/* a coluna de rótulo acompanha a largura do cartão: nome de campanha da Meta
passa de 60 caracteres e numa coluna fixa quebraria em 4 linhas */
.bh-linha {
display: grid; grid-template-columns: minmax(150px, 26%) 1fr; gap: 16px;
align-items: center; padding: 5px 0; border-radius: 8px;
}
.bh-linha:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.bh-rot { font-size: 13px; color: var(--ink-2); font-weight: 550; line-height: 1.3;
overflow: hidden; text-overflow: ellipsis; }
/* a linha de apoio quebra em vez de cortar: ela carrega o nome da campanha, e
nesta conta o que separa duas campanhas está no FIM do nome
("...GRUPO GRATUITO" x "...GRUPO GRATUITO DUPLICADO — Cópia"). Reticências
ali deixavam dois criativos diferentes com o mesmo rótulo na tela. */
.bh-sub { display: block; font-size: 11px; color: var(--ink-muted); font-weight: 400;
white-space: normal; overflow-wrap: anywhere; }
.bh-faixa { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bh-fill, .bh-pilha {
height: 22px; border-radius: 0 4px 4px 0; flex: none;
transition: width .45s cubic-bezier(.2,.7,.3,1);
}
.bh-pilha { display: flex; overflow: hidden; background: none; }
/* o vão de 2px na cor da superfície é o que separa os segmentos.
Contorno seria tinta que não é dado. */
.bh-pilha > i { display: block; height: 100%; }
.bh-pilha > i + i { border-left: 2px solid var(--surface); }
.bh-pilha > i:last-child { border-radius: 0 4px 4px 0; }
.bh-val { font-size: 13px; font-weight: 620; font-variant-numeric: tabular-nums;
white-space: nowrap; color: var(--ink); }
/* Faixa estreita: o valor sobe para a linha de cima em vez de vazar da barra.
Rótulo cortado é pior que rótulo deslocado — e encolher a barra para o texto
caber mentiria sobre a proporção. Vale em qualquer contexto (cartão estreito
no desktop, duas colunas, celular), por isso é consulta de contêiner e não
de viewport: quem decide é a largura do gráfico, não a da tela. */
.bh { container-type: inline-size; }
@container (max-width: 620px) {
.bh-faixa { flex-wrap: wrap; gap: 4px; }
.bh-val { order: -1; flex: 1 0 100%; }
}
/* ------------------------------------------------------ colunas verticais */
.cols { display: flex; align-items: flex-end; gap: 8px; justify-content: space-around; }
.col-item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
align-items: center; border-radius: 8px; padding: 4px 2px; }
.col-item:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }
/* Valor sobre cada coluna. Absoluto de propósito: o número tem ~60px e a
coluna tem 26px — deixá-lo no fluxo alargaria a barra e desalinharia o par. */
.col-val { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
margin-bottom: 5px; font-size: 11px; font-weight: 550;
white-space: nowrap; color: var(--ink-2); }
.col-val.forte { font-size: 12.5px; font-weight: 650; color: var(--ink); }
.col-pista { height: var(--alt, 168px); width: 100%; display: flex;
align-items: flex-end; justify-content: center; }
/* espaço para o rótulo absoluto não sair cortado no topo do cartão */
.cols.agrupadas { padding-top: 22px; }
.col-fill { display: block; width: 100%; max-width: 24px; border-radius: 4px 4px 0 0;
transition: height .45s cubic-bezier(.2,.7,.3,1); }
.col-rot { font-size: 12px; color: var(--ink-2); font-weight: 550; text-align: center;
margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--axis);
width: 100%; line-height: 1.3; }
/* no desktop o número já está em cima de cada barra; esta lista é o plano B
do celular, onde o rótulo sobre a barra não cabe */
.col-sub { display: block; font-size: 11px; color: var(--ink-muted); font-weight: 400; }
.cols.agrupadas .col-sub { display: none; }
/* agrupadas: as duas colunas do par encostam, separadas pelo vão de 2px */
.cols.agrupadas { gap: 22px; }
/* vão de 2px na cor da superfície entre as colunas do par — é o vão que
separa, não um contorno */
.col-par { display: flex; gap: 8px; align-items: flex-end; width: 100%;
justify-content: center; }
/* A BARRA continua com 24px (.col-fill). O que cresceu foi o berço dela, para
caber o número em cima: com 26px os rótulos de grupos vizinhos se
sobrepunham — medido na tela, 7 colisões em 16 rótulos. Cada coluna tem
agora ~76px de espaço próprio, que é a largura de "R$ 203.413". */
.col-uma { position: relative; flex: 1 1 0; max-width: 76px; display: flex;
flex-direction: column; align-items: center; }
.col-uma.vazia .col-pista { height: var(--alt, 168px); }
/* ---------------------------------------------------------------- anel */
.anel { position: relative; margin: 0 auto; aspect-ratio: 1; }
.anel svg { width: 100%; height: 100%; display: block; }
.anel-centro { position: absolute; inset: 0; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 1px; }
.anel-centro b { font-size: 30px; font-weight: 650; letter-spacing: -.03em; line-height: 1; }
.anel-centro span { font-size: 11px; color: var(--ink-muted); text-align: center;
max-width: 88px; line-height: 1.25; }
.anel-vazio { display: flex; align-items: center; justify-content: center; margin: 0 auto;
border-radius: 50%; border: 1px dashed var(--axis); }
.anel-nota { font-size: 11.5px; color: var(--ink-muted); text-align: center;
margin: 12px 0 0; line-height: 1.45; }
/* dentro de cartão de KPI o anel substitui o número grande: centraliza e
deixa a linha de referência logo abaixo */
.kpi .anel, .kpi .anel-vazio { margin: 16px auto 12px; }
/* só nos cartões que ganharam anel — os outros KPIs seguem alinhados à esquerda */
.kpi:has(.anel) .ref { justify-content: center; text-align: center; line-height: 1.4; }
/* grade de painéis de gráfico */
.painéis, .paineis {
display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px;
}
.cartao > .rotulo-graf {
font-size: 12.5px; color: var(--ink-2); font-weight: 600; margin-bottom: 4px;
display: flex; align-items: center; gap: 8px;
}
.cartao > .sub-graf { font-size: 11.5px; color: var(--ink-muted); margin: 0 0 16px; }
/* --------------------------------------------------------------- tabelas */
.rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; font-weight: 620; color: var(--ink-muted); font-size: 11px;
text-transform: uppercase; letter-spacing: .06em;
padding: 0 12px 10px; border-bottom: 1px solid var(--axis); white-space: nowrap; }
td { padding: 13px 12px; border-bottom: 1px solid var(--grid); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .12s; }
tbody tr:hover td { background: color-mix(in srgb, var(--ink) 3%, transparent); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.alerta td { background: color-mix(in srgb, var(--ruim) 6%, transparent); }
tr.alerta:hover td { background: color-mix(in srgb, var(--ruim) 10%, transparent); }
tr.apagado td { color: var(--ink-muted); }
.nome-forte { font-weight: 570; }
.nome-fraco { color: var(--ink-muted); font-size: 11.5px; display: block; margin-top: 2px; }
.valor-forte { font-weight: 640; font-size: 14.5px; }
.mini-trilho { display: block; height: 4px; background: var(--grid);
border-radius: 3px; margin-top: 6px; overflow: hidden; }
.mini-fill { display: block; height: 100%; border-radius: 3px; }
/* ausência de dado — texto explícito, cinza, hachurado. Nunca 0 nem "—" */
/* `nowrap` é o certo para os selos curtos ("sem Pixel", "amostra baixa"), mas
quebrava a tela quando o aviso é uma frase: no celular ele ia a 695px de
largura e criava rolagem lateral na página inteira. Frase longa quebra. */
.filtro-data .sem-dado, .sem-dado.frase { white-space: normal; }
.sem-dado {
color: var(--ink-muted); font-size: 11.5px; white-space: nowrap;
background: repeating-linear-gradient(135deg, transparent, transparent 4px,
var(--grid) 4px, var(--grid) 5px);
padding: 3px 8px; border-radius: 6px; display: inline-block;
}
.selo { font-size: 10.5px; padding: 3px 8px; border-radius: 20px; font-weight: 600;
border: 1px solid var(--border); color: var(--ink-2); white-space: nowrap;
display: inline-block; }
.selo.ruim { color: var(--ruim); border-color: currentColor;
background: color-mix(in srgb, var(--ruim) 8%, transparent); }
.selo.bom { color: var(--bom); border-color: currentColor;
background: color-mix(in srgb, var(--bom) 8%, transparent); }
/* --------------------------------------------------------------- alertas */
.faixa { border-radius: 14px; padding: 17px 20px; margin: 20px 0 4px;
border: 1px solid var(--ruim); box-shadow: var(--sombra);
background: color-mix(in srgb, var(--ruim) 5%, var(--surface)); }
.faixa.ok { border-color: color-mix(in srgb, var(--bom) 45%, transparent);
background: color-mix(in srgb, var(--bom) 5%, var(--surface)); }
.faixa .cab { display: flex; align-items: center; gap: 9px; font-weight: 640; font-size: 14.5px; }
.faixa .icone { font-size: 17px; line-height: 1; }
.faixa ul { margin: 10px 0 0; padding-left: 26px; font-size: 13.5px; color: var(--ink-2); }
.faixa li { margin: 4px 0; }
.faixa li b { color: var(--ruim); }
.faixa .todos {
display: inline-block; margin-top: 12px; font-size: 12.5px; font-weight: 600;
color: var(--ruim); text-decoration: none;
border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent);
}
.faixa.ok .todos { color: var(--ink-2); }
/* --------------------------------------------------- tela de alertas ---- */
/* A faixa de ontem. Neutra por padrão, e SEM verde: verde vira "parabéns" e
o olho aprende a pular. Ela existe para ser lida todo dia, não celebrada. */
.dia { border: 1px solid var(--border); border-radius: 14px; padding: 15px 18px;
margin: 20px 0 6px; background: var(--surface-2); box-shadow: var(--sombra); }
.dia.ruim { border-color: var(--ruim);
background: color-mix(in srgb, var(--ruim) 5%, var(--surface)); }
.dia.velho { border-style: dashed; }
.dia-rot { font-size: 11px; font-weight: 680; letter-spacing: .07em;
text-transform: uppercase; color: var(--ink-muted); }
.dia-nums { display: flex; gap: 26px; flex-wrap: wrap; margin: 9px 0 0;
font-size: 13px; color: var(--ink-muted); }
.dia-nums b { display: block; font-size: 25px; font-weight: 640;
letter-spacing: -.025em; color: var(--ink); line-height: 1.15;
font-variant-numeric: tabular-nums; }
/* Quebra por classe de produto. Fica entre os números e a nota, menor que os
números e maior que a nota: é detalhe do dia, não outro dia. */
.dia-classes { display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline;
margin-top: 10px; font-size: 12.5px; color: var(--ink-2); }
.dia-classes b { font-weight: 660; color: var(--ink);
font-variant-numeric: tabular-nums; }
.dia-classes .sem-dado { font-size: 11.5px; }
.dia-nota { font-size: 12.5px; color: var(--ink-2); margin-top: 11px;
line-height: 1.5; max-width: 78ch; }
.dia-nota b { color: var(--ink); font-weight: 640; }
.dia.ruim .dia-nota b { color: var(--ruim); }
/* Um alerta por cartão, e o cartão inteiro carrega a gravidade na borda
ESQUERDA — não no fundo. Fundo colorido em 8 cartões seguidos vira uma
parede vermelha onde nada se destaca de nada.
Preso a `a` e `div` de propósito, e não solto como `.alerta`: as tabelas de
tráfego marcam a linha problemática com `` (mesma palavra,
outro sentido). Solta, esta regra pegava no `
` e o `display: block`
ARRANCAVA a linha da tabela — ela virava uma caixa avulsa, arredondada, com
tarja na lateral e as colunas fora de alinhamento com as linhas vizinhas.
Quem quiser um cartão de alerta em outra tag: acrescente a tag aqui, não
tire o prefixo. */
a.alerta, div.alerta {
display: block; text-decoration: none; color: inherit;
background: var(--surface-2); border: 1px solid var(--border);
border-left: 4px solid var(--nada); border-radius: 12px;
padding: 16px 18px; margin-bottom: 12px; box-shadow: var(--sombra);
transition: .15s;
}
a.alerta:hover { box-shadow: var(--sombra-alta); border-color: var(--axis); }
.alerta.ruim { border-left-color: var(--ruim); }
.alerta.atencao { border-left-color: var(--atencao); }
/* Crônico é escrito com a mesma clareza, e desenhado com menos peso: borda
cinza, título no tom do corpo. Não é menos verdadeiro — é menos urgente, e
a tela tem que dizer isso sem que a pessoa precise ler o selo. */
.alerta.cronico { border-left-color: var(--axis); background: var(--surface); }
.alerta.cronico .alerta-titulo { color: var(--ink-2); font-weight: 600; }
.alerta-topo { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.alerta-titulo { font-size: 15px; font-weight: 640; letter-spacing: -.01em;
line-height: 1.35; flex: 1 1 340px; min-width: 0; }
.alerta-texto { font-size: 13.5px; color: var(--ink-2); line-height: 1.55;
margin: 7px 0 0; max-width: 78ch; }
.alerta-pe { font-size: 11.5px; color: var(--ink-muted); margin-top: 10px; }
.alerta-pe b { color: var(--pago); font-weight: 620; }
/* Subdivisão dentro de um nível de gravidade. Mais leve que o cabeçalho do
nível de propósito: quem está lendo já sabe que tudo ali pede ação — o
subgrupo só diz de que tamanho é a decisão. */
.subgrupo { display: flex; align-items: baseline; gap: 9px; margin: 20px 0 9px; }
.subgrupo h3 { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
text-transform: uppercase; color: var(--ink-muted); }
.subgrupo span { font-size: 11.5px; color: var(--ink-muted);
background: var(--plane); border-radius: 20px; padding: 1px 8px;
font-variant-numeric: tabular-nums; }
.grupo-cab { display: flex; align-items: baseline; gap: 10px; margin: 34px 0 12px; }
.grupo-cab h2 { margin: 0; }
.grupo-cab .quantos { font-size: 12px; color: var(--ink-muted);
font-variant-numeric: tabular-nums; }
/* "Nada fora do lugar" precisa ocupar espaço de verdade. Uma linha discreta
no topo de uma tela vazia parece tela quebrada, não boa notícia. */
.limpo {
text-align: center; padding: 56px 24px; border-radius: 16px;
border: 1px solid color-mix(in srgb, var(--bom) 40%, transparent);
background: color-mix(in srgb, var(--bom) 5%, var(--surface));
}
.limpo .icone { font-size: 40px; line-height: 1; color: var(--bom-viz); }
.limpo h2 { display: block; margin: 14px 0 6px; font-size: 19px; color: var(--ink);
text-transform: none; letter-spacing: -.02em; }
.limpo p { margin: 0 auto; max-width: 62ch; font-size: 13.5px; color: var(--ink-2);
line-height: 1.6; }
.limites { width: 100%; border-collapse: collapse; font-size: 13px; }
.limites td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--grid);
vertical-align: top; color: var(--ink-2); line-height: 1.5; }
.limites td:first-child { font-weight: 600; color: var(--ink); white-space: nowrap;
width: 1%; padding-right: 26px; }
.limites tr:last-child td { border-bottom: 0; }
/* ------------------------------------------------------------- destaques */
.destaques { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 14px; }
.dest { background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
padding: 18px 20px; box-shadow: var(--sombra); border-left: 3px solid var(--ink-muted); }
.dest.atencao { border-left-color: var(--atencao); }
.dest.ruim { border-left-color: var(--ruim); }
.dest.info { border-left-color: var(--pago); }
.dest .t { font-weight: 620; font-size: 14.5px; letter-spacing: -.01em; margin-bottom: 6px;
display: flex; gap: 8px; align-items: baseline; }
.dest .t .ic { font-size: 15px; flex: none; }
.dest .x { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
/* ---------------------------------------------- barra dupla (bruta/garantida) */
/* ponta do dado arredondada em 4px, quadrada na base — a base é a linha zero */
.dupla { height: 22px; border-radius: 0 4px 4px 0; overflow: hidden; display: flex; }
.dupla > i { display: block; height: 100%; }
/* o vão de 2px na cor da superfície é o que separa os segmentos */
.dupla > i + i { border-left: 2px solid var(--surface); }
.dupla .g { background: var(--pago); }
.dupla .r { background: repeating-linear-gradient(135deg,
color-mix(in srgb, var(--atencao) 55%, transparent),
color-mix(in srgb, var(--atencao) 55%, transparent) 5px,
color-mix(in srgb, var(--atencao) 22%, transparent) 5px,
color-mix(in srgb, var(--atencao) 22%, transparent) 10px); }
.dupla .p { background: repeating-linear-gradient(135deg,
color-mix(in srgb, var(--ruim) 45%, transparent),
color-mix(in srgb, var(--ruim) 45%, transparent) 5px,
color-mix(in srgb, var(--ruim) 18%, transparent) 5px,
color-mix(in srgb, var(--ruim) 18%, transparent) 10px); }
/* ---------------------------------------------------------------- rodapé */
.rodape { margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--grid);
font-size: 12.5px; color: var(--ink-muted); }
.saude { display: flex; gap: 22px; flex-wrap: wrap; padding-bottom: 14px; }
.saude .fonte { display: inline-flex; align-items: center; gap: 8px; }
.saude .luz { width: 7px; height: 7px; border-radius: 50%; background: var(--bom-viz);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--bom-viz) 22%, transparent); }
.saude .luz.falhou, .saude .luz.nunca { background: var(--ruim);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ruim) 22%, transparent); }
.saude .luz.atrasado { background: var(--atencao);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--atencao) 25%, transparent); }
/* âmbar puro não passa contraste como texto no claro; escurecemos o rótulo */
.selo.atencao { color: #8a5b00; border-color: currentColor;
background: color-mix(in srgb, var(--atencao) 16%, transparent); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .selo.atencao { color: var(--atencao); }
}
:root[data-theme="dark"] .selo.atencao { color: var(--atencao); }
/* ---------------------------------------------------------- o que mudou */
.linha-tempo { display: flex; flex-direction: column; gap: 2px; }
.ev { display: grid; grid-template-columns: 86px 1fr auto; gap: 14px;
align-items: baseline; padding: 11px 4px; border-bottom: 1px solid var(--grid); }
.ev:last-child { border-bottom: 0; }
.ev .quando { font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.ev .txt { font-size: 13.5px; }
.ev .val { font-size: 14px; font-weight: 620; font-variant-numeric: tabular-nums;
white-space: nowrap; }
.ev.venda .val { color: var(--bom); }
.ev.reembolso .val { color: var(--ruim); }
.ev .marca { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
margin-right: 7px; background: var(--ink-muted); }
.ev.venda .marca { background: var(--bom-viz); }
.ev.reembolso .marca { background: var(--ruim); }
.saude b { font-weight: 570; color: var(--ink-2); }
.rodape p { margin: 7px 0; line-height: 1.5; max-width: 78ch; }
/* ----------------------------------------------------------------- login */
.login { max-width: 390px; margin: 15vh auto; }
.login .cartao { padding: 30px; }
.login input { width: 100%; padding: 12px 14px; font-size: 15px; margin: 18px 0 12px;
border: 1px solid var(--axis); border-radius: 10px;
background: var(--plane); color: var(--ink); }
.login input:focus { outline: 2px solid var(--pago); outline-offset: 1px; border-color: transparent; }
.login button { width: 100%; padding: 12px; font-size: 15px; font-weight: 600;
border: 0; border-radius: 10px; background: var(--ink);
color: var(--surface); cursor: pointer; }
.erro { color: var(--ruim); font-size: 13.5px; margin: 0 0 10px; }
@media (max-width: 860px) {
.heroi { grid-template-columns: 1fr; }
.heroi .lado + .lado { border-left: 0; border-top: 1px solid var(--border); }
}
@media (max-width: 640px) {
.heroi .numero { font-size: 38px; }
.kpi .valor { font-size: 27px; }
h1 { font-size: 21px; }
.funil-linha { grid-template-columns: 96px 1fr 58px; gap: 9px; }
.wrap { padding: 0 16px 56px; }
/* o cabeçalho fixo ocupava 3-4 linhas e comia um terço da tela */
header.topo { position: static; }
.topo .wrap { gap: 10px; padding: 12px 16px; }
/* quatro abas não cabem em 343px: o menu rola de lado em vez de estourar */
nav.abas { max-width: 100%; overflow-x: auto; }
nav.abas a { white-space: nowrap; padding: 7px 11px; }
.filtro-data { width: 100%; }
.periodos { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
.periodos a { white-space: nowrap; }
.intervalo { width: 100%; }
.intervalo input[type=date] { flex: 1; min-width: 0; }
.kpis { grid-template-columns: 1fr !important; }
.heroi .micro-kpis { grid-template-columns: 1fr; gap: 16px; }
.ev { grid-template-columns: 52px 1fr; }
.ev .val { grid-column: 2; }
/* Colunas secundárias saem no celular. Preferimos esconder a rolar de lado:
rolagem horizontal em tabela é cega — a pessoa não sabe que há mais coluna. */
.opcional { display: none; }
table { font-size: 12.5px; }
td, th { padding-left: 6px; padding-right: 6px; }
.nome-forte { font-size: 12.5px; }
/* rótulo de categoria acima da barra: 168px de coluna não cabem em 360px
de tela sem picotar todo nome de campanha */
.bh-linha { grid-template-columns: 1fr; gap: 5px; padding: 8px 0; }
.bh-rot { white-space: normal; }
.cols { gap: 4px; }
.col-val { font-size: 11px; }
.col-rot { font-size: 11px; }
.cols.agrupadas { gap: 10px; }
/* o número volta para baixo do grupo: sobre a barra ele vaza da tela */
.cols.agrupadas .col-val { display: none; }
.cols.agrupadas .col-sub { display: block; }
.cols.agrupadas { padding-top: 0; }
.col-uma { max-width: 26px; }
.col-par { gap: 6px; }
}
/* Ordenação de tabela. Fica ACIMA da tabela, não no cabeçalho da coluna:
cabeçalho clicável é invisível para quem não sabe que existe, e esta tela
tem 100+ linhas de criativo — a pessoa precisa ver a saída antes de procurar. */
.ordenar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
margin: 0 0 10px; font-size: 12px; color: var(--ink-muted); }
.ordenar a { padding: 3px 9px; border-radius: 999px; text-decoration: none;
color: var(--ink-2); background: var(--card-2, rgba(127,127,127,.10)); }
.ordenar a:hover { background: rgba(127,127,127,.20); }
.ordenar a.on { background: var(--pago); color: #fff; font-weight: 600; }
/* Segundo número embaixo do total da barra empilhada: o total diz "quanto a
call devolve", este diz "quanto disso já é dinheiro". Ler os dois exigia
passar o mouse na barra — informação decisiva não pode depender de hover. */
.bh-val-sub { display: block; font-size: 11px; font-weight: 500;
color: var(--ink-muted); line-height: 1.35; white-space: nowrap; }