/* A paleta é a do Bianchi (23/09): marinho, ardósia, aço, gelo, caramelo e areia.
Marinho é a tinta, a faixa e o botão; areia é o brilho; o que volta é dourado,
o que sai é vermelho-tijolo. Sem verde, por decisão dele.
As duas famílias de letra (Bricolage Grotesque nos títulos, Hanken Grotesk no
resto) chegam pelo no cabeçalho de cada página, e não por @import: o
@import segura a pintura da tela até a folha das fontes responder. */
/* ===========================================================================
Tema do site e da área logada.
Tinta sobre papel. Uma família de letra só, Archivo, nos eixos de largura e
peso: expandida e pesada em título e número, normal no texto. Nenhuma
monoespaçada e nenhuma etiqueta em caixa alta com espaçamento largo, porque
as duas coisas fazem a tela parecer gerada por máquina.
A única ousadia visual é o campo ultramarino cheio, com o número grande em
branco por cima. Uma vez por tela, nunca duas. Todo o resto fica quieto.
Os nomes antigos das variáveis continuam aqui, apontando para as cores
novas. Não é preguiça: é o que permite trocar a marca de todas as nove telas
de uma vez e migrar a estrutura de cada uma depois, sem um dia inteiro com o
site meio pintado.
As cores de gráfico não foram escolhidas no olho. Vermelho é sempre dinheiro
negativo, nunca decoração, e verde é sempre dinheiro que volta.
=========================================================================== */
:root {
/* a paleta, pelos nomes que ela tem no plano de design */
--papel: #E9ECEA;
--papel-alto: #EFF2F0;
--papel-baixo: #E3E7E5;
--tinta: #16233A;
--tinta-profunda: #07173A;
--caneta: #123C93;
--caneta-alta: #2150C8;
--caneta-baixa: #0A2560;
--caneta-meianoite: #061838;
--caneta-clara: #7FA0F2;
/* O campo herói e o botão usam o mesmo azul em profundidades
diferentes: o campo desce até a meia-noite na diagonal, para o
número ficar com a parte clara atrás e o pé do bloco pesar. */
--rampa-campo: linear-gradient(146deg, #2150C8 0%, #123C93 38%, #0A2560 72%, #061838 100%);
/* A tinta que vai POR CIMA do campo. O cartão de destaque escrevia branco
direto no componente, e funcionava só porque o campo é escuro em todos os
temas de hoje — o dia em que um tema ganhar campo claro, o número some. A
regra do DESIGN.md é que cor não se escreve no componente; aqui o valor é o
mesmo de antes, então nada muda de aparência. */
--sobre-campo: #FFF;
--sobre-campo-ruim: #FFD9D4;
--sobre-campo-atencao: #FFE9B8;
--rampa-botao: linear-gradient(#2455CE, #0F3585);
--rampa-escura: linear-gradient(#0F2A5C, #061838);
/* Era #6B7683 e dava 3,88:1 sobre o papel, abaixo do mínimo de 4,5 para texto.
A auditoria em navegador achou trinta textos assim em 13 de setembro. Este é
o tom mais próximo que passa sobre papel, papel-alto e papel-baixo. */
--grafite: #5E6874;
--grafite-escuro: #4B5560;
--filete: #C3C9C6;
--filete-forte: #A9B1AD;
--trilho: #D5D9D7;
/* Era #C8362B, 4,39:1 sobre o papel. Valor negativo em vermelho é texto que
precisa ser lido, então passou para o tom mais próximo acima de 4,5. */
--vencido: #B93226;
/* Era #4C7A3F, 4,24:1 sobre o papel. "O fornecedor financia" em verde é
número que precisa ser lido, então passou ao tom mais próximo acima de 4,5. */
--folga: #7A5B34;
/* Coral e jade DE PREENCHIMENTO: barra, bolinha, botão. Para texto valem
`--vencido` e `--folga`, mais escuros, que passam de 4,5:1 sobre o papel.
É a mesma regra medida em 13 de setembro, com a paleta nova de 22 de
setembro: vermelho (agora coral) é sempre dinheiro que sai, verde (agora
jade) é sempre dinheiro que volta. */
--coral: #C8362B;
/* os mesmos valores pelos nomes antigos, para as telas ainda não migradas */
--base: var(--papel);
--surface: var(--papel-alto);
--faixa: var(--papel-baixo);
--ink: var(--tinta);
--ink2: var(--grafite-escuro);
--ink3: var(--grafite);
--linha: var(--filete);
--linha2: var(--trilho);
--borda: var(--filete-forte);
--teal: var(--caneta);
--teal-esc: var(--caneta-baixa);
--teal-tenue: #E2E8F6;
--teal-borda: #BCC9E8;
--teal-claro: var(--caneta-clara);
--verde: var(--folga);
--alerta: var(--vencido);
--alerta-tenue: #F7E7E5;
--alerta-borda: #EED3CF;
--ambar: #8A6D12;
--dado1: var(--tinta);
--dado2: var(--caneta);
--dado3: var(--vencido);
--dado4: var(--folga);
/* o escuro, escolhido e não invertido: aparece no painel do entrar, no bloco
travado por plano e no painel de falha, e em nenhum outro lugar */
--noite: var(--tinta-profunda);
--noite2: #0F2A5C;
--noite3: #26364F;
--noite4: #3A4A63;
--ntexto: #E9ECEA;
--ntexto2: #C3C9C6;
--ntexto3: #8E99A6;
--display: "Bricolage Grotesque", "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
--sans: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
--mono: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
/* A letra dos DADOS pequenos: meta de gráfico, hora da leitura, variação do mês.
Pedido do Bianchi por "teor tech" em 25/09/2026, contra a regra antiga de nada
de monoespaçada, e aprovado por ele pelas fotos no mesmo dia. Só aqui, nunca em
título nem em número grande. */
--dados: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
/* ---------------------------------------------------------------------
O movimento, com escala.
Havia doze durações diferentes espalhadas pelo arquivo — 120, 130, 140,
150, 160, 180, 200, 220, 260, 500, 620, 900 — e uma curva só para tudo.
Movimento sem ritmo comum é o que faz a interface parecer montada por
pedaços em vez de desenhada: cada peça responde num tempo, e o conjunto
não tem cadência. Quatro tempos e três curvas cobrem o produto inteiro.
`--t-toque` é curto de propósito. Resposta ao dedo precisa ser quase
instantânea para ser sentida como física; acima de uns 120ms ela deixa de
parecer o botão afundando e passa a parecer a tela pensando. --------- */
--t-toque: 90ms;
--t-rapido: 160ms;
/* entrada: começa rápido e assenta devagar, como coisa que chega e para */
--curva: cubic-bezier(0.22, 0.61, 0.36, 1);
/* pressionar: uma mola contida, que devolve a peça com um respiro */
--curva-mola: cubic-bezier(0.34, 1.4, 0.64, 1);
/* raios: prancheta e campo, bloco e moldura, entrada e aviso, pílula */
--r-g: 22px;
--r-m: 18px;
--r-p: 14px;
--r-pilula: 999px;
/* A folha: a página inteira é uma prancheta de papel apoiada sobre
o fundo vivo, e é daí que vem a sensação de profundidade. */
--larg-folha: 1280px;
/* profundidade: quatro níveis, todos com a mesma luz. A sombra é puxada para
o azul do papel, nunca cinza neutro. */
--d-baixo: inset 0 2px 5px rgba(14, 26, 21, .14), inset 0 -1px 0 rgba(255, 255, 255, .75);
--d-apoio: 0 1px 1px rgba(14, 26, 21, .04), 0 3px 10px -3px rgba(14, 26, 21, .12),
inset 0 1px 0 rgba(255, 255, 255, .65);
--d-painel: 0 1px 2px rgba(14, 26, 21, .04), 0 14px 34px -16px rgba(14, 26, 21, .24),
inset 0 1px 0 rgba(255, 255, 255, .7);
--d-prancheta: 0 2px 6px rgba(14, 26, 21, .05), 0 40px 80px -32px rgba(14, 26, 21, .38);
--d-campo: 0 2px 4px rgba(8, 18, 13, .30), 0 36px 66px -26px rgba(8, 26, 18, .60),
inset 0 1px 0 rgba(255, 255, 255, .12);
--d-botao: 0 1px 2px rgba(8, 18, 13, .24), 0 8px 16px -6px rgba(15, 42, 92, .45),
inset 0 1px 0 rgba(255, 255, 255, .22);
/* A tinta que vai sobre o botão e sobre as peças em caneta cheia: a sigla da
lateral e a bola do seletor de tema. Chamava-se `--sobre-botao` e vivia só
dentro das camadas de tema — um nome que mentia, porque o botão desta
identidade é ultramarino, não âmbar. */
--sobre-botao: #FFFFFF;
/* ---------------------------------------------------------------------
As cores dos gráficos.
Estavam definidas só nas camadas de tema, no fim do arquivo, e por isso
pareciam descartáveis: uma varredura do próprio CSS não acha uso nenhum
delas. Acha porque quem as consome é o JAVASCRIPT — `graficos-consultoria.js`
lê onze e `grafico.js` lê oito, todas por `var(--graf-…)`. Apagá-las
confiando na varredura deixaria todos os gráficos sem cor, e o teste de
gráficos, que roda sem navegador, continuaria verde.
Aqui elas saem da paleta da casa em vez de trazer tom próprio: assim não
existe um segundo lugar onde a identidade possa divergir. --------------- */
--graf-tinta: var(--tinta);
--graf-caneta: var(--caneta-alta);
--graf-caneta-clara: var(--caneta-clara);
--graf-sai: var(--coral);
--graf-volta: #B9915B;
/* a barra que é total (jade cheio) e a barra que fica abaixo da média (jade
lavado): antes uma era tinta e a outra cinza, e o gráfico parecia de
planilha */
--graf-total: #123C93;
--graf-fraco: color-mix(in srgb, #123C93 28%, var(--papel-alto));
--graf-grade: #DDE1DF;
--graf-eixo: var(--grafite);
--graf-trilho: #C9CECC;
--graf-papel: var(--papel-alto);
--graf-sobre: #FFFFFF;
--graf-balao: var(--tinta-profunda);
--graf-balao-texto: #FFFFFF;
}
* { box-sizing: border-box; }
/* **`hidden` tem que vencer a classe, e até 25 de setembro de 2026 ele não
vencia.**
A folha do navegador dá `display: none` a `[hidden]`, mas ela é folha de
USUÁRIO: qualquer regra de autor que declare `display` a derruba, mesmo com
especificidade menor. `.faixa-numero { display: flex }` era uma dessas.
O efeito estava em todos os módulos e ninguém tinha visto: a faixa existe para
aparecer só quando o cartão do número sai da tela ("duas cópias do mesmo número
à vista ao mesmo tempo é ruído, não reforço", diz o comentário que a criou), e
o vigia a escondia com `hidden = true` — que não escondia nada. O número ficava
duplicado na tela inteira.
Achado ao desligar a faixa no módulo de estratégia: desliguei nos dois lugares
do código e ela continuou lá. A regra vale para tudo, porque `hidden` é o jeito
como esta casca esconde e mostra em toda parte. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--base);
color: var(--ink);
font-family: var(--sans);
font-size: 15px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/* A escala tipográfica. Título de página em 48, de tela em 32, de seção em 22,
e a largura do tipo diminui conforme o tamanho cai: o que é bonito numa
manchete fica apertado num subtítulo. */
h1, h2, h3 {
font-family: var(--display);
margin: 0;
text-wrap: balance;
}
/* Todo o site usa a Archivo na largura normal, 100%. Até 13 de setembro títulos
e números usavam a versão expandida, de 112% a 125%. No motor do Safari, que é
o de todo iPhone, o eixo de largura abria espaço entre as letras: "V o c ê
v e n d e". Aconteceu declarando por `font-variation-settings` e também por
`font-stretch`, então a saída segura foi não depender do eixo. O peso carrega
a força do título. */
h1 {
font-stretch: 100%; font-weight: 700;
font-size: clamp(32px, 5.4vw, 48px);
line-height: 1.04;
letter-spacing: -0.012em;
}
h2 {
font-stretch: 100%; font-weight: 700;
font-size: clamp(24px, 3.4vw, 32px);
line-height: 1.1;
}
h3 {
font-stretch: 100%; font-weight: 700;
font-size: 22px;
line-height: 1.2;
}
p { margin: 0; }
a { color: var(--caneta); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--tinta); }
:focus-visible { outline: 2px solid var(--caneta); outline-offset: 2px; border-radius: 4px; }
/* Número. Figuras tabulares para a coluna alinhar, e a mesma Archivo um pouco
mais larga e mais pesada, que é o que substitui a monoespaçada. */
.num {
font-family: var(--mono);
font-stretch: 100%; font-weight: 700;
font-variant-numeric: tabular-nums;
}
.num-heroi {
font-family: var(--display);
font-stretch: 100%; font-weight: 800;
font-variant-numeric: tabular-nums;
font-size: clamp(38px, 7.4vw, 68px);
line-height: 0.95;
letter-spacing: -0.02em;
white-space: nowrap;
}
/* Etiqueta. Era caixa alta monoespaçada com espaçamento largo, que é o sinal
mais reconhecível de tela gerada por máquina. Agora é só peso e cor. */
.lbl {
font-size: 13px;
font-weight: 600;
color: var(--grafite);
letter-spacing: 0;
text-transform: none;
}
/* A régua de dias. No desktop é uma coluna de 96px com filete de 1px e a marca
alinhada à direita. No celular ela deita e vira uma faixa entre as seções,
porque coluna de 96px em tela de 390 come um quarto da largura. */
/* `minmax(0, 1fr)` e não `1fr`, e a diferença é o celular inteiro. Coluna `1fr`
nunca encolhe abaixo do conteúdo mais largo dela, então o gráfico e a tabela
da curva empurravam a régua para 573px numa tela de 390, e a página rolava
para o lado. Quem achou foi o teste em navegador de verdade, em 13 de setembro.
O desktop logo abaixo já usava `minmax(0, 1fr)`, e por isso lá não aparecia. */
.regua { display: grid; grid-template-columns: minmax(0, 1fr); }
.regua > .marca {
display: flex; align-items: center; gap: 10px;
font-size: 12px; font-weight: 700; color: var(--grafite);
min-height: 40px;
}
.regua > .marca::after {
content: ''; flex-grow: 1; height: 1px; background: var(--filete);
}
@media (min-width: 900px) {
.regua { grid-template-columns: 96px minmax(0, 1fr); }
.regua > .marca {
display: block; min-height: 0;
border-right: 1px solid var(--filete);
padding: 8px 20px 0 0;
text-align: right;
}
.regua > .marca::after { content: none; }
.regua > .trecho { padding-left: 40px; }
}
/* Controle deslizante. É o principal jeito de entrar com número em todo o
produto, então ele mora aqui e não na página. Punho de 30px porque dedo em
celular não acerta 16, e trilho rebaixado para parecer sulco e não linha. */
input[type=range] {
-webkit-appearance: none;
appearance: none;
background: transparent;
width: 100%;
height: 44px;
display: block;
margin: 0;
cursor: grab;
}
input[type=range]::-webkit-slider-runnable-track {
height: 10px; border-radius: var(--r-pilula);
background: var(--trilho); box-shadow: var(--d-baixo);
}
input[type=range]::-moz-range-track {
height: 10px; border-radius: var(--r-pilula);
background: var(--trilho); box-shadow: var(--d-baixo);
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 30px; height: 30px; border-radius: var(--r-pilula);
background: var(--tinta); border: 3px solid var(--papel);
margin-top: -10px;
box-shadow: 0 2px 5px -1px rgba(14, 26, 21, .5);
}
input[type=range]::-moz-range-thumb {
width: 30px; height: 30px; border-radius: var(--r-pilula);
background: var(--tinta); border: 3px solid var(--papel);
box-shadow: 0 2px 5px -1px rgba(14, 26, 21, .5);
}
input[type=range]:focus-visible { outline: none; }
input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--caneta); }
input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--caneta); }
/* Barra proporcional. Substitui o cartão com número dentro: três valores lado a
lado viram três barras na mesma escala, e a comparação é lida de uma vez. */
.barra {
height: 16px; border-radius: var(--r-pilula);
background: var(--trilho); box-shadow: var(--d-baixo);
}
.barra > i {
display: block; height: 16px; border-radius: var(--r-pilula);
background: linear-gradient(color-mix(in srgb, var(--tinta-profunda) 78%, #FFFFFF), var(--tinta-profunda));
box-shadow: 0 2px 5px -1px rgba(14, 26, 21, .4), inset 0 1px 0 rgba(255, 255, 255, .22);
transition: width 180ms var(--curva);
transform-origin: 0 50%;
}
/* A barra do que joga a favor é DOURADA desde 24 de setembro de 2026, e não mais
ultramar. O número ao lado dela já saía em dourado, que é a cor do dinheiro que
volta; a barra saía na cor do total, e as duas juntas diziam coisas diferentes
sobre a mesma linha. Achado ao renomear "O fornecedor financia" para "O fornecedor
banca", na régua viva da página Empresa. */
.barra.favor > i { background: linear-gradient(color-mix(in srgb, var(--graf-volta) 78%, #FFFFFF), var(--graf-volta)); }
@media (prefers-reduced-motion: no-preference) {
.barra > i { animation: barra-cresce-lado 600ms var(--curva) both; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
}
.oculto { display: none !important; }
.so-leitor {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ------------------------------------------------------------------ botões */
.btn, .btn-2, .btn-3 {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 44px;
padding: 12px 24px;
border-radius: var(--r-pilula);
font-family: inherit;
font-size: 15px;
font-weight: 700;
cursor: pointer;
border: 1px solid transparent;
/* `transform` e `box-shadow` entram aqui porque sem elas o estado de
pressionado, lá no fim do arquivo, mudaria de posição num corte seco: o
botão pularia em vez de afundar. */
transition: background var(--t-rapido) var(--curva),
border-color var(--t-rapido) var(--curva),
transform var(--t-toque) var(--curva-mola),
box-shadow var(--t-rapido) var(--curva);
text-decoration: none;
}
.btn {
background: var(--rampa-botao);
color: var(--sobre-botao);
box-shadow: var(--d-botao);
}
.btn:hover { background: var(--caneta-baixa); color: #FFF; text-decoration: none; }
.btn-2 {
background: var(--papel-alto);
color: var(--tinta); border-color: var(--filete);
box-shadow: var(--d-apoio);
}
.btn-2:hover { border-color: var(--ink3); color: var(--ink); text-decoration: none; }
.btn-3 {
background: var(--tinta-profunda);
color: #FFF;
box-shadow: var(--d-apoio);
}
.btn-3:hover { background: var(--tinta-profunda); color: #FFF; text-decoration: none; }
.btn-largo { width: 100%; }
.btn[disabled], .btn-2[disabled], .btn-3[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn-perigo { background: var(--surface); color: var(--alerta); border-color: var(--alerta-borda); }
.btn-perigo:hover { background: var(--alerta-tenue); color: var(--alerta); }
/* ------------------------------------------------------------ formulários */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo > label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.campo .dica { font-size: 12.5px; color: var(--ink3); line-height: 1.45; }
/* `date` entra nesta lista desde 20 de setembro de 2026, com o período livre do
painel. Faltava, e a falta não era neutra: o bloco de tema escuro usa
`input:not([type=range])`, que pega tudo, enquanto esta regra clara lista os
tipos um a um. Um campo de data sairia estilizado no escuro e cru no claro, o
que o Bianchi veria no primeiro toque, porque ele usa iPhone. */
input[type=text], input[type=email], input[type=password],
input[type=number], input[type=date], select, textarea {
font-family: inherit;
font-size: 16px; /* 16px evita o zoom automático do iOS ao focar */
border: 1px solid var(--filete);
border-radius: var(--r-p);
padding: 12px 14px;
width: 100%;
min-height: 44px;
background: var(--surface);
color: var(--ink);
transition: border-color 140ms var(--curva);
}
input.num-in { font-family: var(--mono); font-variant-numeric: tabular-nums; }
input:focus, select:focus, textarea:focus {
outline: 2px solid var(--teal);
outline-offset: -1px;
border-color: var(--teal);
}
input[aria-invalid="true"] { border-color: var(--alerta); }
.prefixo { position: relative; }
.prefixo > span {
position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
font-family: var(--mono); font-size: 13px; color: var(--ink3); pointer-events: none;
}
.prefixo > input { padding-left: 38px; }
.sufixo { position: relative; }
.sufixo > span {
position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
font-family: var(--mono); font-size: 13px; color: var(--ink3); pointer-events: none;
}
.sufixo > input { padding-right: 34px; }
/* ------------------------------------------------------------------ cartão */
.cartao {
background: var(--papel-alto);
border: 1px solid var(--filete);
border-radius: var(--r-m);
box-shadow: var(--d-painel);
}
.cartao-corpo { padding: 22px 24px; }
.aviso {
border-radius: var(--r-p);
padding: 12px 15px;
font-size: 13.5px;
line-height: 1.5;
display: flex;
gap: 11px;
align-items: flex-start;
/* **O botão do fim do aviso desce em vez de ser espremido.** Em 390px, com a
frase longa do convite de configuração, "Ver como eu li" virava uma bola com
três linhas de texto dentro: a largura que sobrava era menor que a palavra.
Com a quebra, ele desce inteiro para a linha de baixo. */
flex-wrap: wrap;
}
.aviso-erro { background: var(--alerta-tenue); border: 1px solid var(--alerta-borda); color: var(--alerta); }
.aviso-bom { background: var(--teal-tenue); border: 1px solid var(--teal-borda); color: var(--teal-esc); }
.aviso-neutro { background: var(--faixa); border: 1px solid var(--linha); color: var(--ink2); }
/* ------------------------------------------------------------ a aplicação */
/* A aplicação também é uma prancheta apoiada no fundo vivo, como as páginas
públicas. No celular ela ocupa tudo: moldura em tela de 390 só come largura. */
.app {
display: flex;
min-height: 100vh;
position: relative;
z-index: 1;
background: var(--papel);
}
/* **Sem prancheta na tela larga, desde 05/10/2026.** De 1380px para cima a
aplicação virava um cartão de 1280px no meio da janela, com borda, sombra e
fundo cinza dos lados; numa tela de 1910 sobravam 630px de moldura e o Bianchi
leu como "a tela fica reduzida". Agora ela ocupa a janela toda, com a lateral
colada na borda esquerda, e quem segura a largura de leitura é o miolo (abaixo,
em `.miolo`). As páginas públicas continuam com a folha delas. */
/* A lateral era escura com grade de milímetro, o que dava cara de terminal mas
competia com o único escuro que a marca se permite. Virou papel, um degrau
abaixo do miolo, com um sulco de sombra na borda direita para separar os dois
sem precisar de linha grossa. */
.lateral {
width: 252px;
flex-shrink: 0;
background: var(--papel-alto);
border-right: 1px solid var(--filete);
box-shadow: none;
display: none;
flex-direction: column;
}
/* A lateral acompanha a rolagem: fica colada no topo e sempre à vista, para a
pessoa não ver um vão vazio quando desce a tela. Se a lista de módulos passar da
altura do vidro, a própria lateral rola por dentro. */
@media (min-width: 1000px) {
.lateral {
display: flex;
position: sticky;
top: 0;
align-self: flex-start;
height: 100vh;
overflow-y: auto;
}
}
.lateral-interna {
display: flex;
flex-direction: column;
flex-grow: 1;
min-height: 100vh;
}
/* O topo, o menu e o pé põem o ícone na mesma coluna, a 20px da borda (05/10). */
.lateral .topo { padding: 14px 20px; border-bottom: 1px solid var(--filete); }
.lateral .empresa { display: flex; align-items: center; gap: 10px; }
.lateral .sigla {
width: 30px; height: 30px; border-radius: 9px;
background: var(--caneta-alta);
box-shadow: none;
display: flex; align-items: center; justify-content: center;
font-size: 11px; color: #FFF; font-weight: 700; flex-shrink: 0;
}
.lateral .empresa span:first-of-type { color: var(--tinta) !important; }
.lateral nav { padding: 12px 10px; display: flex; flex-direction: column; gap: 16px; flex-grow: 1; }
.lateral .grupo { display: flex; flex-direction: column; gap: 1px; }
.lateral .grupo > .lbl { color: var(--ntexto3); padding: 0 10px 6px; }
.item {
display: flex; align-items: center; gap: 10px;
min-height: 44px; padding: 0 10px; border-radius: 12px;
color: var(--grafite-escuro); font-size: 14.5px; font-weight: 600;
background: transparent; border: 0;
text-decoration: none; cursor: pointer; width: 100%; text-align: left;
font-family: inherit;
transition: background 130ms var(--curva), color 130ms var(--curva);
}
.item:hover { background: var(--papel-baixo); color: var(--tinta); text-decoration: none; }
/* O ícone mora num ladrilho de 30px, e o do item atual vira jade cheio com o
traço branco: é o que dá à lateral cara de aplicativo, e não de lista de
links (pedido do Bianchi em 22/09: "as abas laterais mais modernas"). O
ladrilho responde ao passar o mouse antes do item inteiro. */
.item > svg, .area-titulo > svg {
width: 30px; height: 30px; padding: 7px; border-radius: 9px;
background: var(--papel-baixo); stroke: var(--grafite);
transition: background 160ms var(--curva), stroke 160ms var(--curva), transform 160ms var(--curva-mola);
}
.item:hover > svg, .area-titulo:hover > svg { background: var(--filete); stroke: var(--tinta); }
.item[aria-current="page"] > svg { background: var(--caneta-alta); stroke: #FFFFFF; }
.item:active > svg { transform: scale(0.92); }
/* O item atual em jade lavado com a letra em jade fundo, e não uma pílula
escura: o escuro da identidade é da faixa do veredito, e um menu com um
bloco preto competia com ela (direção aprovada em 22/09). */
.item[aria-current="page"] {
background: var(--teal-tenue);
color: var(--caneta); font-weight: 700;
box-shadow: none;
}
.item[aria-current="page"]:hover { color: var(--caneta); }
.item.travado { color: #9AA3A8; cursor: default; }
.item.travado:hover { background: transparent; color: #9AA3A8; }
.item .conta { margin-left: auto; font-size: 13px; color: var(--grafite); font-weight: 600; }
/* As duas áreas do menu. A linha de título se comporta como um item, para o
menu não ganhar um segundo vocabulário visual, e a seta é desenhada por CSS
em vez do marcador do navegador, que muda de forma entre Safari e Chrome. */
/* **Um ritmo só na lateral** (foto de 05/10/2026: "os ícones parece que não
estão com os mesmos espaçamentos"). O título do grupo tinha 44px e 10px a mais
entre um grupo e outro, contra 40px e 1px dos itens de cima; agora é a mesma
altura, o mesmo vão e o mesmo peso de letra, e o grupo aberto escurece.
**A altura comum é 44px, e não 40** (10/10/2026). O ritmo único de 05/10 desceu
o título do grupo para os 40px dos itens, e o título é um `summary`, um controle:
a tabela *Forma* do DESIGN.md pede 44px em tudo que se toca, e a conferência de
computador reprovou os três títulos em todas as telas logadas. Área invisível
não resolve aqui, porque com 1px entre uma linha e outra a área de um título
invadiria a do vizinho. Então o ritmo continua um só, só que todo em 44px. */
.area { display: flex; flex-direction: column; gap: 1px; }
.area:not([open]) { gap: 0; } /* fechado, o conteúdo escondido ainda contava 1px */
.area-titulo {
display: flex; align-items: center; gap: 10px;
min-height: 44px; padding: 0 10px; border-radius: 12px;
color: var(--grafite-escuro); font-size: 15px; font-weight: 600;
cursor: pointer; list-style: none; user-select: none;
transition: background 130ms var(--curva);
}
.area-titulo::-webkit-details-marker { display: none; }
.area-titulo:hover { background: var(--papel-baixo); color: var(--tinta); }
.area[open] > .area-titulo { color: var(--tinta); }
.area-titulo .conta { margin-left: auto; font-size: 13px; color: var(--grafite); font-weight: 600; }
.area-sub {
display: block;
padding: 0 10px 8px 50px; margin-top: -4px;
color: var(--grafite); font-size: 12.5px; line-height: 1.35;
}
/* o recuo do subitem encurtou de 41 para 26px: com o ladrilho do ícone, 41px
deixava o nome numa coluna de quatro linhas (foto de 22/09) */
.area > .item { padding-left: 50px; font-weight: 600; font-size: 14px; min-height: 44px; position: relative; }
.area > .item > svg { display: none; }
/* o traço que liga o subitem ao título, e o ponto jade no atual */
.area > .item::before {
content: ''; position: absolute; left: 24px; top: 50%; width: 6px; height: 6px;
border-radius: 50%; background: var(--filete-forte); transform: translateY(-50%);
}
.area > .item[aria-current="page"]::before { background: var(--caneta-alta); }
.lateral .rodape { padding: 16px; border-top: 1px solid var(--filete); }
/* o cartão do próximo passo, no pé da lateral, para quem ainda não está no pago */
.lateral-convite {
margin: 8px 12px 10px; padding: 14px; border-radius: 14px;
background: linear-gradient(160deg, var(--teal-tenue), transparent 85%), var(--papel-baixo);
border: 1px solid var(--teal-borda);
display: flex; flex-direction: column; gap: 6px;
}
.lateral-convite .brilho-ico {
width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
background: color-mix(in srgb, var(--caneta-alta) 16%, transparent); color: var(--caneta);
}
.lateral-convite b { font-size: 14px; line-height: 1.25; }
.lateral-convite > span:not(.brilho-ico) { font-size: 12.5px; color: var(--grafite); line-height: 1.4; }
.lateral-convite .btn { min-height: 36px; font-size: 13px; padding: 0 14px; align-self: flex-start; margin-top: 4px; }
.lateral .rodape .lbl { color: var(--grafite); }
.lateral nav .grupo > .lbl { color: var(--grafite); }
.conteudo { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }
.barra-topo {
min-height: 52px;
border-bottom: 1px solid var(--linha);
background: var(--surface);
padding: 9px 18px;
display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
}
@media (min-width: 1000px) { .barra-topo { padding-inline: 22px; } }
.trilha { display: flex; align-items: center; gap: 9px; font-size: 13.5px; min-width: 0; }
.trilha .sep { color: var(--borda); }
.trilha .atual { color: var(--ink); font-weight: 500; }
/* O botão de voltar da área logada. Discreto, colado à trilha, com 36px de altura,
que é o mínimo confortável para o polegar. No celular fica só a seta, porque a
barra é estreita; o nome continua para leitor de tela pelo aria-label. */
.topo-esquerda { display: flex; align-items: center; gap: 12px; min-width: 0; }
.voltar {
display: inline-flex; align-items: center; gap: 6px;
min-height: 44px; padding: 0 12px 0 8px;
border: 1px solid var(--linha); border-radius: 999px;
background: var(--surface); color: var(--ink);
font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer;
transition: border-color 160ms ease-out, transform 120ms ease-out;
}
.voltar:hover { border-color: var(--borda); }
.voltar:active { transform: scale(0.97); }
@media (max-width: 999px) {
.voltar { width: 36px; padding: 0; justify-content: center; }
.voltar span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.voltar { transition: none; }
.voltar:active { transform: none; }
}
.miolo { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 1000px) { .miolo { padding: 22px; } }
/* O miolo para em 1600px e fica no centro, e a barra de cima alinha o começo
dela com o começo dele: numa janela larga a leitura não estica de borda a
borda, e a trilha não fica solta na esquerda enquanto o conteúdo está no meio. */
.miolo { width: 100%; max-width: 1600px; margin-inline: auto; }
@media (min-width: 1000px) {
.barra-topo { padding-inline: max(22px, calc((100% - 1600px) / 2 + 22px)); }
}
/* menu de celular */
.menu-movel {
display: flex; align-items: center; gap: 10px;
background: var(--papel-alto);
border-bottom: 1px solid var(--filete);
color: var(--tinta); padding: 10px 16px;
}
@media (min-width: 1000px) { .menu-movel { display: none; } }
.menu-movel select { min-height: 44px; font-size: 16px; }
/* ------------------------------------------------------------ a conta aberta */
/* O passo a passo da simulação, recolhido por padrão. Quem está na correria lê o
número; quem quer conferir abre e vê fórmula, valores e a origem de cada passo.
Sem isso a resposta é um oráculo, e oráculo não sustenta decisão de compra. */
.conta-aberta { margin-top: 14px; border-top: 1px solid var(--filete); padding-top: 12px; }
.conta-aberta > summary {
cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--ink3);
list-style: none; display: inline-flex; align-items: center; gap: 6px;
min-height: 44px;
}
.conta-aberta > summary::-webkit-details-marker { display: none; }
.conta-aberta > summary::before { content: '+'; font-weight: 700; }
.conta-aberta[open] > summary::before { content: '–'; }
.conta-aberta > summary:hover { color: var(--tinta, inherit); }
.conta-aberta .passo {
display: flex; flex-direction: column; gap: 2px;
padding: 10px 0; border-bottom: 1px solid var(--filete);
}
.conta-aberta .passo:last-child { border-bottom: 0; }
.conta-aberta .o-que { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
/* A explicação em linguagem comum, antes da fórmula. É o "entenda melhor" dentro
da conta aberta: quem abriu quer entender, não conferir álgebra. */
.conta-aberta .explicacao { font-size: 13px; line-height: 1.45; }
.conta-aberta .formula { font-size: 12.5px; color: var(--ink3); line-height: 1.35; }
.conta-aberta .conta { font-size: 13px; font-variant-numeric: tabular-nums; line-height: 1.4; }
.conta-aberta .fonte { font-size: 11.5px; color: var(--ink3); line-height: 1.3; }
/* ------------------------------------------------ o diagnóstico de um toque */
/* A primeira coisa que a pessoa lê depois de subir a planilha, e por decisão do
Bianchi em 17 de setembro de 2026 ela lê isso sem preencher campo nenhum.
Usa os mesmos tokens dos cartões: nenhuma cor nova. O que muda nesta tela é o
que aparece primeiro, não a identidade. A faixa colorida à esquerda é o único
sinal de gravidade, e ela segue a mesma convenção dos indicadores — teal para
bom, âmbar para atenção, alerta para prejuízo, grafite para quando falta dado. */
.veredito {
border: 1px solid var(--filete); border-radius: var(--r-g);
padding: 20px 22px; margin-top: 18px; background: var(--papel-alto);
box-shadow: var(--d-apoio); overflow: hidden;
}
/* A faixa escura, no alto do cartão do veredito (direção aprovada pelo Bianchi
em 22/09): a frase e o porquê à esquerda, o número herói à direita, e o corpo
branco embaixo com os números de apoio. A faixa sangra até a borda do cartão
(margens negativas do tamanho do recuo), então o cartão não ganha um segundo
bloco por dentro. A gravidade, que antes era uma tira de cor na borda, agora
está no próprio número: prejuízo sai em coral claro sobre o escuro. */
/* Contêiner de consulta: é o que deixa o número herói medir a caixa que o
segura, em vez da janela. */
.veredito-faixa { container-type: inline-size; }
.veredito-faixa {
margin: -20px -22px 18px;
padding: 22px 24px;
background: var(--rampa-escura);
color: var(--ntexto);
display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
}
@media (min-width: 900px) {
/* **A coluna do número era `auto`, e isso espremia a frase.**
`auto` dimensiona pelo conteúdo máximo: um número como "−R$ 106.394,51" a
44px pede uns 380px e leva. A coluna da frase, sendo `1fr`, cedia tudo o que
sobrasse, e a frase do veredito descia em coluna estreita, oito linhas de
uma palavra (fotografado pelo Bianchi em 29/09, junto do pedido de "dentro
dos quadros, não saindo de formatação").
Agora as duas colunas são fracionárias com piso: a frase nunca fica abaixo
de 24 caracteres de largura e o número encolhe antes dela. */
.veredito-faixa {
grid-template-columns: minmax(22ch, 1.3fr) minmax(0, 1fr);
column-gap: 32px; row-gap: 8px; align-items: center;
padding: 26px 30px;
}
.veredito-faixa .veredito-frase, .veredito-faixa .veredito-porque { grid-column: 1; }
.veredito-faixa .veredito-heroi { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
}
.veredito-frase {
margin: 0; font-family: var(--display); font-weight: 700;
font-size: clamp(20px, 3vw, 27px); line-height: 1.18; letter-spacing: -0.015em;
color: #FFF; max-width: 30ch;
}
.veredito-porque { margin: 0; font-size: 14.5px; color: var(--ntexto2); line-height: 1.5; max-width: 60ch; }
.veredito-numeros {
display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px; margin-top: 0;
}
/* cada número de apoio num ladrilho recuado, e não numa linha com filete: é o
que faz a fileira ler como um objeto só */
.veredito-numero:only-child { grid-column: 1 / -1; }
.veredito-numero {
display: flex; flex-direction: column; gap: 3px; min-width: 0;
background: var(--papel-baixo); border-radius: var(--r-p); padding: 12px 14px;
}
.veredito-numero .lbl { font-size: 12px; color: var(--ink3); }
.veredito-numero .valor {
font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15;
}
/* de onde o número veio, colado no número: é o que separa conta de palpite */
.veredito-numero .de { font-size: 11.5px; color: var(--ink3); line-height: 1.3; }
/* Quem queima o valor: nome, quanto rende e quanto custa. Três colunas, para a
leitura ser de varredura e não de parágrafo — quem está na correria precisa
achar o culpado de relance. */
/* `veredito-saida` divide estas regras com `veredito-queima` de propósito.
São blocos irmãos: um lista os produtos que complicam a operação, o outro lista
para onde o dinheiro sai. Mesma anatomia, de título mais linhas de três colunas
mais uma frase de régua embaixo. Dar estilo próprio ao segundo criaria um quarto
formato de cartão na mesma tela, que é exatamente a sensação de coisa jogada que
o Bianchi cobrou em 20 de setembro de 2026. */
.veredito-queima,
.veredito-saida {
display: flex; flex-direction: column; gap: 6px; margin-top: 16px;
padding: 12px 14px; border-radius: var(--r-p, 10px);
border: 1px solid var(--filete-forte);
}
.veredito-queima > .titulo,
.veredito-saida > .titulo { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.queima-item,
.saida-item {
display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline;
padding: 5px 0; border-bottom: 1px solid var(--filete);
}
.queima-item:last-of-type,
.saida-item:last-of-type { border-bottom: 0; }
.queima-item .nome,
.saida-item .nome { font-size: 13.5px; min-width: 0; overflow-wrap: anywhere; }
.queima-item .margem,
.saida-item .margem { font-size: 12.5px; color: var(--ink3); font-variant-numeric: tabular-nums; }
.queima-item .custa,
.saida-item .custa {
font-size: 13.5px; font-weight: 700; color: var(--alerta);
font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* A despesa que se repete todo mês não é acusação: é o que mantém a loja de pé.
Por isso o valor dela não sai em vermelho de alerta, como sai o do produto que
queima margem. Só a despesa de lançamento único, que a régua separa, herda o
tom de atenção. */
.saida-item .custa { color: var(--tinta); }
.saida-item.pontual .custa { color: var(--alerta); }
/* `queima-regua` e não `regua`: existe outra `.regua` neste arquivo, lá em cima,
que é um layout de página em grade com primeira coluna de 96px acima de 900px.
A frase daqui herdava aquele grid e virava uma coluna de uma palavra por linha,
só no computador — no celular a regra dos 900px não vale, e por isso o defeito
passou despercebido até a foto do Bianchi em 18 de setembro de 2026.
Dois seletores com o mesmo nome e propósitos diferentes brigam para sempre. Em
vez de desfazer o grid por cima, a frase ganhou nome próprio. */
.veredito-queima > .queima-regua {
display: block;
font-size: 12px; color: var(--ink3); line-height: 1.35;
}
.veredito-alavanca {
display: flex; flex-direction: column; gap: 3px; margin-top: 16px;
padding: 12px 14px; border-radius: var(--r-p, 10px); background: var(--filete);
}
.veredito-alavanca .titulo { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.veredito-alavanca .detalhe { font-size: 13px; color: var(--ink3); line-height: 1.35; }
/* a pergunta é link porque leva ao módulo que a responde; tracejada para se ler
como convite e não como resultado. Era botão até 28/09/2026, quando levava à
caixa de pergunta; sem módulo liberado vira parágrafo, sem cursor de mão */
.veredito-pergunta {
display: block; margin-top: 16px; width: 100%; text-align: left;
font: inherit; font-size: 15px; font-weight: 600; color: inherit;
text-decoration: none;
background: transparent; border: 1px dashed var(--filete-forte); border-radius: var(--r-p, 10px);
padding: 12px 14px; transition: border-color 160ms ease, background 160ms ease;
}
a.veredito-pergunta { cursor: pointer; }
a.veredito-pergunta:hover { border-style: solid; border-color: var(--ambar); }
@media (max-width: 520px) {
.veredito { padding: 16px; }
.veredito-numeros { grid-template-columns: 1fr 1fr; gap: 12px; }
}
/* ------------------------------------------------- o convite para conversar
Fica no FIM do diagnóstico, depois dos achados, e não no topo: só faz sentido
oferecer conversa a quem já viu o próprio retrato. Desenho contido de
propósito — é convite, não anúncio; se competir com os números, atrapalha a
leitura que acabou de acontecer. */
.convite-contato {
display: flex; flex-direction: column; gap: 4px;
margin-top: 28px; padding: 16px 18px;
border: 1px solid var(--filete-forte); border-radius: var(--r-p, 10px);
}
.convite-contato .titulo { font-size: 15px; font-weight: 600; line-height: 1.3; }
.convite-contato .detalhe { font-size: 12.5px; color: var(--ink3); line-height: 1.4; }
.convite-contato .botoes {
display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px;
}
/* alvo de toque confortável no celular: 44px é o mínimo que a conferência exige */
.convite-contato .botoes > a {
display: inline-flex; align-items: center; min-height: 44px;
padding: 10px 16px; border-radius: var(--r-p, 10px);
font-size: 14.5px; font-weight: 600; text-decoration: none;
}
.convite-contato .botoes > a.principal {
background: var(--ambar); color: var(--papel); border: 1px solid var(--ambar);
}
.convite-contato .botoes > a.secundario {
background: transparent; color: inherit; border: 1px solid var(--filete-forte);
}
.convite-contato .botoes > a:hover { border-color: var(--ambar); }
/* ----------------------------------------------------------- indicadores */
/* Os números não são cartões soltos: são um PAINEL ÚNICO, uma superfície só,
dividida por linhas finas — como o topo de um terminal financeiro. Três colunas
fecham em duas fileiras iguais (nada de quadradinho órfão), e a nota de cada um
fica colada embaixo, para as células alinharem mesmo quando uma tem sparkline e
a outra não. Assim a fileira inteira lê como um objeto, integrada e limpa. */
.indicadores {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
@media (max-width: 860px) { .indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .indicadores { grid-template-columns: 1fr; } }
/* A versão FLUIDA, para o resultado de módulo, onde a quantidade de números em
destaque varia: as colunas se ajustam à quantidade, sem deixar célula vazia
como aconteceria numa grade de três colunas fixas com um número só. */
.indicadores.fluida { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.indicador {
background: var(--papel-alto);
border: 1px solid var(--filete); border-radius: var(--r-p);
box-shadow: var(--d-apoio);
padding: 14px 16px;
display: flex; flex-direction: column;
}
/* o ponto antes do rótulo diz de que lado o número está: jade para o que volta,
coral para o que sai, cinza para o que só informa */
.indicador > .lbl { display: flex; align-items: center; gap: 7px; }
.indicador > .lbl::before {
content: ''; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
background: var(--filete-forte);
}
.indicador.bom > .lbl::before { background: var(--graf-volta); }
.indicador { transition: transform 200ms var(--curva), box-shadow 200ms var(--curva); }
@media (hover: hover) and (pointer: fine) {
.indicador:hover { transform: translateY(-2px); box-shadow: var(--d-painel); }
}
.indicador.ruim > .lbl::before { background: var(--coral); }
.indicador.atencao > .lbl::before { background: var(--ambar); }
/* O número e a sua linha de tendência ficam LADO A LADO, como numa cotação: o
valor à esquerda, o sparkline crescendo à direita no mesmo eixo. Quando não há
série honesta, o valor ocupa a linha sozinho e nada fica torto. */
.indicador-medida { display: flex; align-items: flex-end; gap: 14px; margin: 8px 0 4px; }
.indicador .valor {
font-family: var(--display); font-stretch: 100%; font-weight: 700;
font-size: 26px; font-variant-numeric: tabular-nums; line-height: 1;
letter-spacing: -0.02em;
}
.indicador-medida .spark { flex: 1 1 auto; min-width: 0; max-width: 140px; margin: 0; }
.indicador .nota { font-size: 12px; color: var(--ink3); margin-top: auto; }
.indicador.bom .valor { color: var(--folga); }
.indicador.ruim .valor { color: var(--alerta); }
.indicador.atencao .valor { color: var(--ambar); }
/* O painel como centro de comando: os gráficos em duas colunas na tela larga (a
ponte e o período abrem linha inteira), números alinhados, e movimento contido
— cada cartão entra de baixo, em cascata, e realça de leve ao passar o mouse.
Sem trilho de cor no cartão, que é justo o traço de tela gerada que a gente evita. */
.indicador .valor { font-variant-numeric: tabular-nums; }
.graficos-grade { display: grid; gap: 18px; margin-top: 20px; grid-template-columns: 1fr; }
/* **O item da grade PRECISA poder encolher, e por padrão ele não pode.**
Achado em 30 de setembro de 2026, com o agente de celular clicando as tabelas:
com uma tabela aberta o painel virava 598px numa tela de 412px. A tabela tem
largura mínima de 520px de propósito (número em coluna estreita não se lê) e
mora dentro de um `.rolar`, que rolaria de lado. Só que `min-width` de item de
grade nasce em `auto`, e `auto` significa "não encolha abaixo do seu conteúdo":
o cartão inteiro esticava até 584px e levava a página junto, e o `.rolar` nunca
chegava a rolar porque nada o apertava.
É a mesma linha que consertou o nome de arquivo estourando o cartão em "Sua
empresa", no dia anterior. Onde houver rolagem interna dentro de grade ou de
flex, esta linha é a que faz a rolagem existir. */
.graficos-grade > * { min-width: 0; }
.rolar { min-width: 0; }
@media (min-width: 1100px) {
.graficos-grade { grid-template-columns: 1fr 1fr; align-items: start; }
.graficos-grade > .abre-linha { grid-column: 1 / -1; }
/* **O quadradinho órfão, filmado pelo Bianchi em 21 de setembro de 2026**:
*"tem um quadradinho na esquerda, um quadradinho na direita, um espaço
livre"*. A grade recebe oito blocos, dois deles condicionais (a evolução mês
a mês e a comparação entre lojas), então a contagem oscila entre seis, sete e
oito conforme os dados da pessoa. Ímpar em duas colunas deixa um buraco.
A marca vem da página, e não de uma regra de `:nth-child` aqui: já existe um
cartão que ocupa a linha inteira, e ele desloca a paridade que qualquer regra
de posição tentaria adivinhar. Quem sabe a contagem é quem monta a lista, e
lá isso fica conferível por teste. */
.graficos-grade > .sozinho-na-linha { grid-column: 1 / -1; }
}
.cartao-corpo { transition: border-color 200ms ease, transform 200ms ease; }
@media (hover: hover) and (pointer: fine) {
.cartao-corpo:hover { border-color: var(--caneta); transform: translateY(-2px); }
}
/* CAMADA é a cara de profundidade dos cartões de DADO — gráfico, resultado —, a
mesma em toda tela logada. O cartão inclina de leve e sobe para a frente ao
passar o mouse, com um facho de luz seguindo o cursor: o toque de vidro. A
marca é posta pelo JS só nos cartões certos (data-prof), então formulário e
cartão de controle nunca inclinam — mexer numa tela que a pessoa preenche
atrapalha e não informa nada. A perspectiva vai na própria transformação, para
o efeito valer em qualquer tela, com ou sem grade. */
.camada { position: relative; transform-style: preserve-3d; transition: transform 260ms var(--curva), box-shadow 260ms ease, border-color 220ms ease; }
.camada[data-prof]::after {
content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
opacity: 0; transition: opacity 260ms ease; z-index: 1;
background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%),
rgba(127, 160, 242, 0.14), transparent 60%);
}
@media (hover: hover) and (pointer: fine) {
.camada[data-prof]:hover {
border-color: var(--caneta); box-shadow: var(--d-painel);
transform: perspective(1400px) translateY(-4px) rotateX(var(--tiltx, 0deg)) rotateY(var(--tilty, 0deg));
}
.camada[data-prof]:hover::after { opacity: 1; }
}
/* Revelação ao rolar: o bloco parte de um plano mais fundo (afastado e um tom
apagado) e sobe para a frente quando entra na tela. Só o JS liga isso, e só
nos blocos abaixo da primeira dobra — o que já está à vista aparece pronto,
nunca esperando animação para poder ser lido. */
@media (prefers-reduced-motion: no-preference) {
/* o bloco a revelar não usa a entrada em cascata: quem cuida dele é a rolagem */
.camada.a-revelar { opacity: 0; transform: translateY(28px) scale(0.985); animation: none; }
.camada.revelou { opacity: 1; transform: none; transition: opacity 620ms var(--curva), transform 620ms var(--curva); }
}
@media (prefers-reduced-motion: no-preference) {
.indicador, .graficos-grade > .cartao-corpo { animation: entra-painel 460ms var(--curva) both; }
.indicadores .indicador:nth-child(2) { animation-delay: 40ms; }
.indicadores .indicador:nth-child(3) { animation-delay: 80ms; }
.indicadores .indicador:nth-child(4) { animation-delay: 120ms; }
.indicadores .indicador:nth-child(5) { animation-delay: 160ms; }
.indicadores .indicador:nth-child(6) { animation-delay: 200ms; }
.graficos-grade > .cartao-corpo:nth-child(2) { animation-delay: 60ms; }
.graficos-grade > .cartao-corpo:nth-child(3) { animation-delay: 120ms; }
.graficos-grade > .cartao-corpo:nth-child(n+4) { animation-delay: 180ms; }
}
@keyframes entra-painel { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* O caminho do dinheiro: a linha do tempo da compra até a conta.
Substituiu o anel em 19 de setembro de 2026, por recusa do Bianchi: *"não dá
para entender o propósito disso; traga como se fosse um fluxograma dinâmico"*.
O anel exigia conhecer a teoria do ciclo para ser lido, e a sobreposição dos
arcos fazia a soma dos dias parecer errada.
O desenho agora é horizontal e ocupa a largura toda, porque linha do tempo tem
direção e a direção é a informação. A frase-resposta vem antes dele: quem lê só
a primeira linha já leva o número embora. */
.cena-ciclo {
margin-top: 18px;
padding: 18px 20px 14px;
border: 1px solid var(--filete-forte);
border-radius: var(--r-m);
background: var(--papel-alto);
display: block;
}
/* ---------------------------------------------------------------------------
A CURVA DO LOTE: o dinheiro de uma compra saindo do caixa e voltando.
Escolha do Bianchi em 23/09, olhando a linha do tempo e o desenho da tela inicial
lado a lado. A curva responde o que a linha do tempo só descrevia: quanto falta,
em que dia, e por quanto tempo. A mancha vermelha abaixo do zero não é enfeite —
é o que a pessoa precisa financiar; a faixa de trás marca os dias em que isso
acontece, com nome próprio na frase de baixo.
--------------------------------------------------------------------------- */
.curva-lote {
margin-top: 18px; padding: 16px 18px 12px;
border: 1px solid var(--filete-forte); border-radius: var(--r-m);
background: var(--papel-alto);
display: flex; flex-direction: column; gap: 8px;
}
.curva-lote > .lbl { font-size: 13px; font-weight: 600; color: var(--grafite); }
.curva-lote svg { width: 100%; height: auto; display: block; overflow: visible; }
/* os dias em que o dinheiro é dele: a faixa fica ATRÁS de tudo, bem de leve */
.curva-lote .area-sai { fill: var(--alerta); opacity: .15; }
.curva-lote .area-volta { fill: var(--graf-volta); opacity: .22; }
/* a régua do trecho financiado, rente ao eixo: começo, fim e nome */
.curva-lote .regua-financia { stroke: var(--alerta); stroke-width: 2; opacity: .75; }
.curva-lote .regua-ponta { stroke: var(--alerta); stroke-width: 2; opacity: .75; }
.curva-lote .regua-nome { font-size: 11.5px; font-weight: 600; fill: var(--alerta); }
.curva-lote .traco {
stroke: var(--caneta); stroke-width: 2.6; fill: none;
stroke-linecap: round; stroke-linejoin: round;
}
.curva-lote .zero { stroke: var(--filete-forte); stroke-dasharray: 3 4; }
.curva-lote .zl { font-size: 11px; font-weight: 600; fill: var(--grafite); }
.curva-lote .ax { font-size: 11.5px; fill: var(--grafite); }
.curva-lote .fundo { fill: var(--papel-alto); stroke: var(--alerta); stroke-width: 2.5; }
.curva-lote .volta { fill: var(--graf-volta); stroke: var(--papel-alto); stroke-width: 2; }
/* o valor do fundo é o número que a pessoa leva embora: ele tem o peso disso */
/* Os nomes dentro do desenho ficam POR CIMA das manchas, e por isso levam o mesmo
halo dos rótulos de coluna: um contorno da cor do chão, atrás das letras. Sem ele,
o valor do fundo é vermelho sobre a mancha vermelha do buraco, que é onde ele
sempre cai. */
.curva-lote .marca-forte, .curva-lote .marca-fraca, .curva-lote .marca-volta,
.curva-lote .zl, .curva-lote .regua-nome {
paint-order: stroke fill;
stroke: var(--papel-alto); stroke-width: 3px; stroke-linejoin: round;
}
.curva-lote .marca-forte { font-size: 15px; font-weight: 700; fill: var(--alerta); }
.curva-lote .marca-fraca { font-size: 11.5px; font-weight: 500; fill: var(--grafite); }
.curva-lote .marca-volta { font-size: 11.5px; font-weight: 600; fill: var(--folga); }
/* A curva DEPOIS de destravar, e o vão entre as duas: o vão é o dinheiro que volta
para o caixa. Pontilhada de propósito — ela é o que ainda não aconteceu. */
.curva-lote .traco-depois {
stroke: var(--graf-volta); stroke-width: 2.4; fill: none;
stroke-linecap: round; stroke-linejoin: round;
stroke-dasharray: 6 5;
}
/* O buraco que SOBRA depois de melhorar, por dentro do buraco de hoje: a mesma cor
da área de hoje, somada a ela. O que fica claro na borda é o que a melhoria solta.
Ver a nota em `pagina-painel.js` sobre por que isto substituiu o vão de outra cor. */
.curva-lote .area-fica { fill: var(--alerta); opacity: .17; }
/* Os degraus do meio: o CAMINHO entre hoje e o ideal. Ficam mais claros que as duas
pontas de propósito — são passagem, não destino. */
.curva-lote .traco-degrau {
stroke: var(--graf-volta); stroke-width: 1.6; fill: none; opacity: .45;
stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 3 4;
}
/* A escada escrita: o que cada melhoria solta, degrau a degrau. É o que fica quando
o movimento acaba, e é ela que responde "o que isso gera". */
.curva-lote-escada { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.curva-lote-escada > .lbl { font-size: 13px; font-weight: 600; color: var(--grafite); }
.escada-fila { display: flex; gap: 8px; flex-wrap: wrap; }
.degrau {
flex: 1 1 148px; min-width: 0; text-align: left; cursor: pointer;
font-family: var(--sans); font-size: 12.5px; line-height: 1.35;
display: flex; flex-direction: column; gap: 2px;
padding: 10px 12px; border-radius: var(--r-p);
border: 1px solid var(--filete); background: var(--papel);
color: var(--grafite);
}
.degrau > b { font-size: 13px; font-weight: 700; color: var(--tinta); }
.degrau .ganha { color: var(--folga); font-weight: 700; }
.degrau.hoje > b { color: var(--alerta); }
.degrau.ideal { border-color: var(--folga); background: color-mix(in srgb, var(--graf-volta) 10%, var(--papel)); }
.degrau:hover { border-color: var(--filete-forte); }
.degrau[aria-pressed="true"] { border-color: var(--caneta); box-shadow: 0 0 0 2px color-mix(in srgb, var(--caneta) 22%, transparent); }
/* Tocar num degrau acende a curva dele e apaga as outras, para olhar um pedaço sem
esperar o laço passar de novo. O seletor sai do `data-degrau` da caixa. */
.curva-lote[data-degrau] .traco-degrau, .curva-lote[data-degrau] .traco-depois { opacity: .14; }
.curva-lote[data-degrau="0"] .traco-degrau:nth-of-type(1),
.curva-lote[data-degrau="1"] .traco-degrau:nth-of-type(2),
.curva-lote[data-degrau="2"] .traco-degrau:nth-of-type(3) { opacity: 1; stroke-width: 2.4; }
.curva-lote[data-degrau=""] .traco-degrau { opacity: .45; }
.curva-lote[data-degrau=""] .traco-depois { opacity: 1; }
.curva-lote-nota { margin: 0; font-size: 14px; line-height: 1.45; color: var(--tinta); max-width: 62ch; }
/* O movimento conta a história na ordem em que ela se lê: primeiro a curva de HOJE
se desenha, depois a de DEPOIS, e só então o vão entre as duas aparece com a seta.
É animação que carrega informação — de onde, para onde, quanto —, e não enfeite. */
@media (prefers-reduced-motion: no-preference) {
.curva-lote .traco { stroke-dasharray: 100; stroke-dashoffset: 100; animation: spark-desenha 1200ms var(--curva) 150ms forwards; }
.curva-lote .area-sai, .curva-lote .area-volta { animation: rotulo-chega 700ms var(--curva) 500ms both; }
/* Os degraus entram EM ORDEM, um a cada 420ms, e o ideal por último: é o "pouco a
pouco" do pedido. Cada um parte de onde o anterior chegou, então o olho vê a
operação melhorando por partes, e não um salto do hoje para o ideal. */
.curva-lote .traco-degrau { animation: rotulo-chega 520ms var(--curva) calc(1200ms + var(--i, 0) * 420ms) both; }
.curva-lote .traco-depois {
stroke-dashoffset: 200;
animation: solta-desenha 1000ms var(--curva) calc(1200ms + var(--passos, 2) * 420ms) forwards;
}
.curva-lote .area-fica { animation: rotulo-chega 800ms var(--curva) 2000ms both; }
}
/* O tracejado da curva de depois precisa sobreviver à animação, então o deslocamento
anda sozinho em vez de zerar o `stroke-dasharray` como o traço cheio faz. */
@keyframes solta-desenha { to { stroke-dashoffset: 0; } }
.cena-chamada {
margin: 0 0 6px;
font-size: 15px; line-height: 1.45; font-weight: 600; color: var(--tinta);
max-width: 52ch;
}
/* Sem `max-width`: a cena mede a largura e se redesenha nela, então o desenho sai
1 para 1 e o 12,5px é 12,5px. Com o teto de 560 o navegador escalava tudo junto,
0,79× no celular e 1,56× no computador, e nada tinha o tamanho escolhido. */
.cena-ciclo svg { width: 100%; height: auto; display: block; }
/* A entrada do painel também se monta, em vez de aparecer pronta.
O veredito é a primeira coisa que a pessoa lê depois de subir a planilha, e
era a única parte da tela sem movimento nenhum: a curva do módulo se desenha,
os indicadores entram em cascata, os cartões sobem ao rolar, e justamente a
conclusão nascia estática. O Bianchi apontou quatro vezes que a ferramenta
parece parada, e este era o lugar onde ele entra.
A ordem da cascata é a ordem da leitura, e por isso ela não é enfeite: a frase
primeiro, depois os números que a sustentam, depois com quem está o problema,
e por último o que fazer. O tempo entre uma e outra é o tempo de ler a
anterior. Reusa a mesma animação dos indicadores, com os mesmos 460ms, para a
tela inteira falar uma língua só.
Nada aqui esconde conteúdo de quem pediu menos movimento: a regra inteira vive
dentro da consulta de preferência, e sem ela tudo nasce à vista. */
@media (prefers-reduced-motion: no-preference) {
.veredito-frase,
.veredito-porque,
.veredito .veredito-heroi,
.veredito-numeros,
.veredito .cena-ciclo,
.veredito-queima,
.veredito-alavanca,
.veredito-pergunta { animation: entra-painel 460ms var(--curva) both; }
.veredito-porque { animation-delay: 60ms; }
/* o campo ultramarino é a âncora, e entra logo depois do porquê; os dois
números de apoio vêm em seguida, quietos */
.veredito .veredito-heroi { animation-delay: 100ms; }
.veredito-numeros { animation-delay: 140ms; }
/* a cena entra entre os números e os culpados: é a ordem de leitura que o
Bianchi escolheu em 21/09, e a cascata é justamente a ordem da leitura */
.veredito .cena-ciclo { animation-delay: 160ms; }
.veredito-queima { animation-delay: 200ms; }
/* as duas listas de culpados são irmãs, e a segunda entra depois da primeira */
.veredito-queima ~ .veredito-queima { animation-delay: 260ms; }
.veredito-alavanca { animation-delay: 320ms; }
.veredito-pergunta { animation-delay: 380ms; }
}
/* As barras vivas dos gráficos (pedido do Bianchi em 22/09: "gráficos
dinâmicos, com mais efeito 3d"). Profundidade por luz e movimento, nunca por
perspectiva: barra em perspectiva distorce a altura, e a altura é o dado.
O preenchimento é um degradê do claro ao cheio (montado no JavaScript, em
`gradientesDe`), a sombra é projetada, e cada barra CRESCE a partir da linha
do zero em cascata, pelo índice `--i` que o desenho escreve nela. `desce` é a
que cai da linha de cima (passo negativo, mês no vermelho), `lado` a que
cresce da esquerda. O rótulo de valor entra quando a barra chega. Passar o
mouse ou o dedo levanta a barra, junto do balão que já existia. */
.graf-barra {
transform-box: fill-box; transform-origin: 50% 100%;
filter: drop-shadow(0 3px 5px rgba(14, 26, 21, .18));
transition: filter 160ms var(--curva);
}
.graf-barra.desce { transform-origin: 50% 0; }
.graf-barra.lado { transform-origin: 0 50%; }
.graf-barra:hover { filter: brightness(1.08) drop-shadow(0 8px 12px rgba(14, 26, 21, .26)); }
@media (prefers-reduced-motion: no-preference) {
.graf-barra { animation: barra-cresce 640ms var(--curva) both; animation-delay: calc(var(--i, 0) * 45ms); }
.graf-barra.lado { animation-name: barra-cresce-lado; }
.graf-rotulo { animation: rotulo-chega 360ms var(--curva) both; animation-delay: calc(var(--i, 0) * 45ms + 380ms); }
}
@keyframes barra-cresce { from { transform: scaleY(0.02); } }
@keyframes barra-cresce-lado { from { transform: scaleX(0.02); } }
@keyframes rotulo-chega { from { opacity: 0; transform: translateY(5px); } }
/* O halo do rótulo de valor: um contorno da cor do chão do gráfico, desenhado ATRÁS
das letras (`paint-order`). Num gráfico com linha por cima das barras — o Pareto,
com a curva do acumulado — o número da barra caía em cima da curva e ficava
ilegível. O halo separa os dois sem mover nada de lugar.
`overflow: hidden` saiu de `.modelagem-grafico` no mesmo dia: rótulo que saísse do
desenho era CORTADO em silêncio em vez de aparecer, e cortado em silêncio é como o
problema atravessa a conferência sem ninguém ver. Hoje nenhum rótulo sai (a folga
do topo é calculada a partir do que ele precisa), e se algum sair, aparece. */
.graf-rotulo {
paint-order: stroke fill;
stroke: var(--papel-baixo); stroke-width: 3px; stroke-linejoin: round;
}
html[data-tema="escuro"] .graf-barra { filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .45)); }
html[data-tema="escuro"] .graf-barra:hover { filter: brightness(1.12) drop-shadow(0 8px 14px rgba(0, 0, 0, .55)); }
/* A moldura recuada em volta de cada desenho: o gráfico ganha um chão (a sombra
das barras tem onde cair) e a fileira de cartões lê como um conjunto. */
.grafico-moldura {
margin-top: 16px; padding: 16px 14px 10px;
background: var(--papel-baixo); border-radius: var(--r-p);
}
/* ===========================================================================
Segunda rodada de 25/09/2026: gráficos que respondem ao dedo, e o experimento
de cara de tecnologia que o Bianchi pediu ("modificações gráficas,
modernizações e teor tech"; e, sobre as regras escritas, "quero que você teste
coisas novas"). Tudo aqui é por token, nos dois temas; aprovado por ele pelas
fotos no mesmo dia.
=========================================================================== */
/* O balão de foco, de vidro: o valor é a linha forte, o nome a pequena de cima. */
.graf-balao {
position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none;
opacity: 0; transform: translate(-50%, calc(-100% - 12px)) scale(.96);
transition: opacity 140ms var(--curva), transform 180ms var(--curva);
padding: 7px 12px 8px; border-radius: 12px; white-space: nowrap;
background: color-mix(in srgb, var(--graf-balao) 84%, transparent);
-webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
border: 1px solid color-mix(in srgb, var(--graf-balao-texto) 16%, transparent);
box-shadow: 0 12px 28px rgba(7, 23, 58, .30);
color: var(--graf-balao-texto); line-height: 1.3;
}
.graf-balao.visivel { opacity: 1; transform: translate(-50%, calc(-100% - 12px)) scale(1); }
.graf-balao-rotulo {
font-family: var(--dados); font-size: 11.5px; font-weight: 500;
color: color-mix(in srgb, var(--graf-balao-texto) 74%, transparent);
}
.graf-balao-valor {
font-family: var(--display); font-size: 15.5px; font-weight: 700;
font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.graf-balao-nota {
font-size: 12px; font-weight: 500; margin-top: 1px;
color: color-mix(in srgb, var(--graf-balao-texto) 74%, transparent);
}
/* A barra tocada acende e as outras recuam: é o que diz de QUAL barra é o balão. */
.graf-barra { transition: filter 160ms var(--curva), opacity 180ms var(--curva); }
svg.com-foco .graf-barra:not(.ativa) { opacity: .38; }
svg.com-foco .graf-barra.ativa { filter: brightness(1.1) drop-shadow(0 8px 14px rgba(14, 26, 21, .28)); }
/* A curva da faixa: linha-guia, anel no mês tocado, e o pulso do último mês. */
.heroi-palco { position: relative; touch-action: pan-y; cursor: crosshair; }
.heroi-curva .guia { opacity: 0; transition: opacity 140ms var(--curva); pointer-events: none; }
.heroi-curva .guia.visivel { opacity: 1; }
.heroi-curva .guia line { stroke: rgba(255, 255, 255, .45); stroke-width: 1; stroke-dasharray: 2 3; }
.heroi-curva .guia circle { fill: none; stroke: #FFFFFF; stroke-width: 2; }
.heroi-curva .pulso { fill: var(--sobre-campo-atencao); pointer-events: none; transform-box: fill-box; transform-origin: center; opacity: 0; }
.heroi-curva .pulso.desce { fill: var(--sobre-campo-ruim); }
@media (prefers-reduced-motion: no-preference) {
.heroi-curva .pulso { animation: pulso 2.4s ease-out 1.3s infinite; }
}
@keyframes pulso { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(4.2); } }
.heroi-curva .ax, .heroi-curva .zl { font-family: var(--dados); letter-spacing: 0; }
/* A faixa escura ganha uma trama de pontos e uma luz no canto do número herói:
é a textura de painel de instrumento, e fica abaixo de 9% para não competir
com a curva. */
.veredito-faixa {
background:
radial-gradient(520px 260px at 88% 0%, color-mix(in srgb, var(--caneta-clara) 20%, transparent), transparent 70%),
radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .085) 1px, transparent 0) 0 0 / 18px 18px,
var(--rampa-escura);
}
/* A hora da leitura com o ponto aceso: a leitura é de agora, e é a planilha dela. */
/* `.cabeca-console` na frente para vencer a regra do console, mais abaixo, que
pedia 14px: a letra de dados passa de 13px e deixa de ser dado. */
.cabeca-console .cabeca-titulo .sub {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--dados); font-size: 13px; letter-spacing: 0;
}
.cabeca-titulo .sub::before {
content: ""; width: 7px; height: 7px; border-radius: 50%;
background: var(--caneta-alta);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--caneta-alta) 22%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
.cabeca-titulo .sub::before { animation: aceso 2.4s ease-in-out infinite; }
}
@keyframes aceso { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--caneta-alta) 6%, transparent); } }
/* A variação do mês e o rótulo do ladrilho na letra de dados. */
.delta { font-family: var(--dados); font-weight: 600; letter-spacing: 0; }
/* O ladrilho acende a borda no acento quando o mouse passa: resposta, não enfeite. */
@media (hover: hover) and (pointer: fine) {
.kpi:not(.cheio):hover { border-color: color-mix(in srgb, var(--caneta-alta) 45%, var(--filete)); }
}
/* A moldura dos gráficos ganha a mesma trama, mais fraca que a grade do desenho. */
.grafico-moldura {
background:
radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--tinta) 8%, transparent) 1px, transparent 0) 0 0 / 16px 16px,
var(--papel-baixo);
}
/* ===========================================================================
O console (22/09): o painel como o Bianchi imaginou, nas duas cores de tema.
A fileira de ladrilhos com a variação e a tendência, o veredito como cartão
grande com a curva brilhando, e embaixo os produtos que carregam a loja, o
ciclo em réguas e o convite com luz. Tudo por token: no claro é papel e
superfície branca, no escuro é o verde-preto; a faixa é escura nos dois.
=========================================================================== */
.cabeca-console { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 24px; flex-wrap: wrap; }
.cabeca-titulo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cabeca-titulo .sub { font-size: 14px; color: var(--grafite); font-weight: 500; }
/* alinhado à esquerda mesmo quando cabe ao lado do título: a fileira de cinco
pílulas é larga e quase sempre quebra para a linha de baixo, e a nota
"Mostrando de..." encostada na direita ficava solta (foto de 23/09) */
.cabeca-periodos { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 100%; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* **No celular, dois por linha e sem enfeite** (25/09/2026). Um por linha, com
ícone e tendência, fazia os sete números ocuparem duas telas e meia antes de a
pessoa chegar ao veredito. O que sai no aperto é o que não carrega número: o
ícone e o traço da tendência (a variação do mês continua, escrita). */
@media (max-width: 460px) {
.kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kpis .kpi { padding: 12px; gap: 4px; }
.kpis .kpi-ico, .kpis .kpi .spark { display: none; }
.kpis .kpi .valor { font-size: 19px; }
.kpis .kpi .lbl { font-size: 12.5px; }
.kpis .kpi .nota { font-size: 11.5px; line-height: 1.3; }
.kpis .kpi-pe { font-size: 12px; padding-top: 6px; }
}
.kpi {
background: var(--papel-alto); border: 1px solid var(--filete); border-radius: var(--r-p);
box-shadow: var(--d-apoio); padding: 14px 16px; min-width: 0;
display: flex; flex-direction: column; gap: 6px;
transition: transform 200ms var(--curva), box-shadow 200ms var(--curva);
}
@media (hover: hover) and (pointer: fine) { .kpi:hover { transform: translateY(-2px); box-shadow: var(--d-painel); } }
/* o cabeçalho do ladrilho: o ícone num quadradinho, o título e o subtítulo */
.kpi-cab { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kpi-cab > div { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.kpi-cab .sub { font-size: 12px; color: var(--grafite); }
.kpi-ico {
width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
background: var(--papel-baixo); color: var(--caneta); display: grid; place-items: center;
}
.kpi.preso .kpi-ico { background: var(--alerta-tenue); color: var(--vencido); }
/* o atalho no pé, separado por filete */
.kpi-pe {
margin-top: auto; padding: 10px 0 0; border-top: 1px solid var(--filete);
min-height: 44px;
display: flex; align-items: center; justify-content: space-between; gap: 8px;
font: inherit; font-size: 13px; font-weight: 600; color: var(--caneta);
background: transparent; border-left: 0; border-right: 0; border-bottom: 0;
cursor: pointer; text-decoration: none; text-align: left; width: 100%;
}
.kpi-pe:hover { color: var(--tinta); text-decoration: none; }
/* o ladrilho cheio: jade, letra branca, o principal da fileira */
.kpi.cheio { background: var(--rampa-botao); border-color: transparent; color: var(--sobre-botao); box-shadow: var(--d-botao); }
.kpi.cheio .lbl, .kpi.cheio .sub, .kpi.cheio .nota { color: color-mix(in srgb, var(--sobre-botao) 82%, transparent); }
.kpi.cheio .valor { color: var(--sobre-botao); }
.kpi.cheio .kpi-ico { background: color-mix(in srgb, var(--sobre-botao) 16%, transparent); color: var(--sobre-botao); }
.kpi.cheio .delta { background: color-mix(in srgb, var(--sobre-botao) 16%, transparent); color: var(--sobre-botao); }
.kpi.cheio .kpi-pe { border-color: color-mix(in srgb, var(--sobre-botao) 26%, transparent); color: var(--sobre-botao); }
.kpi.cheio .spark-linha { stroke: var(--sobre-botao); } .kpi.cheio .spark-area { fill: var(--sobre-botao); }
.kpi-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.kpi .valor {
font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: -0.02em;
line-height: 1.05; font-variant-numeric: tabular-nums;
}
/* Um passo abaixo, para o número comprido caber sem furar a caixa. A classe é
posta pelo desenho, que é quem sabe quantos caracteres o valor tem. */
.kpi .valor.valor-longo { font-size: 20px; letter-spacing: -0.03em; }
@media (max-width: 560px) { .kpis .kpi .valor.valor-longo { font-size: 16.5px; } }
.kpi.preso .valor { color: var(--vencido); }
/* **A COR DO LADRILHO SEGUE O SINAL DO NÚMERO**, que é a régua fixada pelo Bianchi em
23/09 e escrita no DESIGN.md. `preso` é outra coisa (o capital parado, que é um fato
e não um julgamento), então os dois tons do sinal ganham classe própria: vermelho
para número negativo, dourado para o que vence a régua. Sem estas duas linhas o tom
chegava do arquivo de métricas e não pintava nada, e o prejuízo saía da mesma cor do
lucro, que é o pior resultado possível para uma tela de diagnóstico. */
.kpi.ruim .valor { color: var(--vencido); }
.kpi.ruim .kpi-ico { background: var(--alerta-tenue); color: var(--vencido); }
.kpi.bom .valor { color: var(--folga); }
.kpi.bom .kpi-ico { background: color-mix(in srgb, var(--folga) 14%, transparent); color: var(--folga); }
.kpi .spark { height: 30px; margin: 2px 0 0; }
.kpi .nota { font-size: 12px; color: var(--grafite); }
.aviso-lista { margin: 4px 0 0; padding-left: 18px; }
.aviso-lista li + li { margin-top: 2px; }
/* a variação em pílula: jade sobe, coral desce, cinza informa */
.delta {
display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700;
border-radius: 999px; padding: 3px 8px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.delta.sobe { color: var(--folga); background: var(--teal-tenue); }
.delta.desce { color: var(--vencido); background: var(--alerta-tenue); }
.delta.neutro { color: var(--grafite-escuro); background: var(--papel-baixo); }
/* a curva da história, dentro da faixa escura do veredito */
/* A curva da faixa do veredito, redesenhada em 23/09. A cor sai do SINAL, e não
do acento: o dourado claro quando a operação fecha acima do zero, o rosado do
alerta quando fecha abaixo. São os MESMOS dois tons do número herói que fica ao
lado (`--sobre-campo-atencao` e `--sobre-campo-ruim`), para o desenho e o número
contarem a mesma história com a mesma cor. A área entre o zero e a linha é o que dá tamanho à queda — antes era um
azul de 16% que sumia no fundo escuro e o desenho parecia vazio. */
.heroi-curva { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
/* Quem entra na grade da faixa é o embrulho que mede a largura, e é nele que o
pedido de ocupar as duas colunas precisa estar. Sem isto a curva desenhava só
na coluna da frase e sobrava metade de faixa vazia ao lado (foto de 29/09). */
.heroi-curva-larga { grid-column: 1 / -1; }
.heroi-curva .lbl { color: var(--ntexto3); }
.heroi-curva svg { display: block; width: 100%; height: auto; overflow: visible; }
.heroi-curva .traco {
stroke: var(--sobre-campo-atencao); stroke-width: 2.6; fill: none;
stroke-linecap: round; stroke-linejoin: round;
filter: drop-shadow(0 0 7px color-mix(in srgb, var(--sobre-campo-atencao) 60%, transparent));
}
.heroi-curva .traco.desce {
stroke: var(--sobre-campo-ruim);
filter: drop-shadow(0 0 7px color-mix(in srgb, var(--sobre-campo-ruim) 55%, transparent));
}
.heroi-curva .area { fill: var(--sobre-campo-atencao); opacity: .22; }
.heroi-curva .area.desce { fill: var(--sobre-campo-ruim); opacity: .20; }
.heroi-curva .ax { font-size: 11px; fill: var(--ntexto3); }
.heroi-curva .vl { font-size: 12px; font-weight: 700; fill: #FFFFFF;
paint-order: stroke; stroke: #0A1E4A; stroke-width: 4px; stroke-linejoin: round; }
/* A única régua do desenho leva o nome dela: régua sem nome é enfeite. */
.heroi-curva .zero { stroke: rgba(255, 255, 255, .34); stroke-dasharray: 3 4; }
.heroi-curva .zl { font-size: 10.5px; font-weight: 600; fill: rgba(255, 255, 255, .55); letter-spacing: .01em; }
.heroi-curva .ponto { fill: var(--sobre-campo-atencao); stroke: var(--tinta-profunda); stroke-width: 2; }
.heroi-curva .ponto.desce { fill: var(--sobre-campo-ruim); }
html[data-tema="escuro"] .heroi-curva .ponto { stroke: #0E1A15; }
@media (prefers-reduced-motion: no-preference) {
.heroi-curva .traco { stroke-dasharray: 100; stroke-dashoffset: 100; animation: spark-desenha 1100ms var(--curva) 120ms forwards; }
.heroi-curva .area { animation: rotulo-chega 700ms var(--curva) 420ms both; }
}
/* o console: produtos, ciclo e convite */
.console { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) 250px; gap: 12px; margin-top: 18px; align-items: stretch; }
@media (max-width: 1100px) { .console { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .console > .convite-brilho { grid-column: 1 / -1; } }
@media (max-width: 720px) {
.console { grid-template-columns: 1fr; } .console > .convite-brilho { grid-column: auto; }
}
/* as réguas do ciclo se espalham pela altura da coluna, em vez de amontoar no
alto e deixar um vão até o saldo (foto de 23/09, ao lado dos três produtos) */
.console-ciclo { justify-content: space-between; }
.console-ciclo .regua-ciclo { flex: 1 1 auto; justify-content: center; }
.console:empty { display: none; }
.console > section {
background: var(--papel-alto); border: 1px solid var(--filete); border-radius: var(--r-m);
box-shadow: var(--d-apoio); padding: 16px 18px; min-width: 0;
display: flex; flex-direction: column; gap: 10px;
}
.console-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.console-cab h2 { font-size: 16px; }
.console-cab a.nota { color: var(--caneta); font-weight: 600; font-size: 13px; text-decoration: none; white-space: nowrap; }
.console-cab a.nota:hover { text-decoration: underline; }
/* cada produto é uma LINHA (como a lista de mercado da referência), e não um
cartão estreito: em três colunas o nome cortava e a pílula da margem saía do
cartão (foto de 22/09) */
.produtos-grade { display: grid; grid-template-columns: 1fr; gap: 8px; }
.produto {
background: var(--papel-baixo); border-radius: var(--r-p); padding: 10px 12px; min-width: 0;
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center;
}
.produto > .produto-barra { grid-column: 1 / -1; }
.produto > .kpi-linha { flex-wrap: nowrap; justify-content: flex-end; }
.produto-topo { display: flex; align-items: center; gap: 9px; min-width: 0; }
.produto-topo .sigla {
width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
background: var(--trilho); color: var(--tinta); font-weight: 800; font-size: 12px;
display: grid; place-items: center;
}
.produto.lider .sigla { background: var(--caneta-alta); color: #FFFFFF; }
.produto-topo > div { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
/* **`break-word`, e não `anywhere`, e a diferença não é de estilo: é de largura.**
`anywhere` entra no cálculo de largura mínima do elemento, então a coluna do
nome podia encolher até caber uma letra, e a coluna do valor, que é `auto`,
tomava o resto. O efeito na foto de 29/09/2026: "Queijo mussarela kg" saiu
"Quei / jo / muss / arela / kg", uma sílaba por linha, dentro de uma coluna de
55px, enquanto o valor ao lado tinha 200px sobrando.
`break-word` quebra igual quando a palavra não cabe, mas a largura mínima
continua sendo a da maior palavra, que é o que mantém a coluna com tamanho de
gente. */
.produto-topo b { font-size: 13.5px; line-height: 1.2; overflow-wrap: break-word; }
.produto-topo .lbl { font-size: 11px; }
.produto .valor { font-size: 18px; }
.produto-barra { height: 6px; border-radius: 999px; background: var(--trilho); overflow: hidden; }
.produto-barra > i {
display: block; height: 100%; border-radius: 999px;
background: linear-gradient(90deg, var(--caneta), var(--caneta-alta)); transform-origin: 0 50%;
}
@media (prefers-reduced-motion: no-preference) { .produto-barra > i { animation: barra-cresce-lado 700ms var(--curva) both; } }
/* no celular o valor e a margem descem para a linha de baixo: em duas colunas
o nome do produto ficava com 60 pixels e quebrava por letra (foto de 23/09).
Fica depois da regra geral de `.produto`, senão ela ganha pela ordem. */
@media (max-width: 720px) {
.produto { grid-template-columns: 1fr; }
.produto > .kpi-linha { justify-content: flex-start; }
}
.regua-ciclo { display: flex; flex-direction: column; gap: 5px; }
.regua-ciclo .entre { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--grafite); }
.regua-ciclo .entre b { color: var(--tinta); }
.ciclo-saldo {
margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 12px 14px; border-radius: var(--r-p);
background: var(--alerta-tenue); border: 1px solid var(--alerta-borda);
font-size: 12.5px; color: var(--grafite-escuro);
}
.ciclo-saldo b { font-family: var(--display); font-size: 18px; color: var(--vencido); letter-spacing: -0.01em; }
/* o convite com luz: a faixa escura com o brilho jade subindo do pé */
.console > section.convite-brilho {
align-items: center; text-align: center; justify-content: center; gap: 8px;
background: radial-gradient(80% 60% at 50% 100%, color-mix(in srgb, var(--caneta-clara) 34%, transparent), transparent 70%), var(--rampa-escura);
border-color: color-mix(in srgb, var(--caneta-clara) 30%, transparent);
color: var(--ntexto);
}
.convite-brilho .brilho-ico {
width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
background: color-mix(in srgb, var(--caneta-clara) 18%, transparent); color: var(--caneta-clara);
}
.convite-brilho .lbl { color: var(--caneta-clara); }
.convite-brilho h2 { color: #FFFFFF; font-size: 18px; }
.convite-brilho p { font-size: 13px; line-height: 1.5; color: var(--ntexto2); max-width: 30ch; }
.convite-brilho .btn { margin-top: 4px; }
/* A fileira compacta das ferramentas (23/09, pedido do Bianchi): pílulas com o
nome, que abrem o módulo; a pergunta fica no título. O leque em perspectiva
com o número de cada uma saiu, porque o módulo já entrega isso ao abrir. */
.ferramentas-fila {
margin-top: 14px;
background: var(--papel-alto); border: 1px solid var(--filete); border-radius: var(--r-m);
box-shadow: var(--d-apoio); padding: 14px 18px 16px;
display: flex; flex-direction: column; gap: 10px;
}
.pilulas-ferramenta { display: flex; flex-wrap: wrap; gap: 8px; }
.pilula-ferramenta {
display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
padding: 0 14px 0 10px; border-radius: 999px;
background: var(--papel-baixo); border: 1px solid var(--filete); color: var(--tinta);
font-weight: 600; font-size: 13.5px; text-decoration: none; white-space: nowrap;
transition: border-color 140ms var(--curva), background 140ms var(--curva), transform 120ms var(--curva);
}
.pilula-ferramenta svg { color: var(--caneta); flex-shrink: 0; }
.pilula-ferramenta:hover { text-decoration: none; color: var(--tinta); border-color: var(--caneta-alta); background: var(--papel-alto); transform: translateY(-1px); }
@media (max-width: 720px) { .pilula-ferramenta { white-space: normal; min-height: 44px; padding-block: 6px; font-size: 13px; } }
/* O sparkline dentro do cartão: a linha de tendência que se desenha, tipo painel
da bolsa. A linha não engorda ao esticar (non-scaling-stroke), e o preenchimento
embaixo é de leve. O cartão precisa de espaço entre o número e a nota. */
.indicador { display: flex; flex-direction: column; }
.spark { width: 100%; height: 34px; margin: 10px 0 2px; display: block; }
.spark-area { fill: var(--caneta-alta); opacity: 0.12; }
.spark-linha {
fill: none; stroke: var(--caneta-alta); stroke-width: 1.7;
vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round;
}
.indicador.bom .spark-linha { stroke: var(--folga); }
.indicador.bom .spark-area { fill: var(--folga); }
.indicador.ruim .spark-linha { stroke: var(--vencido); }
.indicador.ruim .spark-area { fill: var(--vencido); }
@media (prefers-reduced-motion: no-preference) {
.spark-linha { stroke-dasharray: 100; stroke-dashoffset: 100; animation: spark-desenha 900ms var(--curva) 120ms forwards; }
}
@keyframes spark-desenha { to { stroke-dashoffset: 0; } }
/* A mesma ideia no gráfico grande: a linha se desenha em vez de aparecer
pronta. É o movimento que o Bianchi pediu em 18 de setembro de 2026 — a tela
viva, "como se fosse um curta" — e ele se sustenta porque **carrega
informação**: a curva do dinheiro no tempo é lida da esquerda para a direita,
e vê-la ser traçada é ver o caixa afundar quando o fornecedor cobra e voltar
quando as parcelas caem. Movimento que decora a rolagem é outra coisa, e essa
o brief proíbe.
Mais devagar que o sparkline porque o percurso é maior e a leitura importa:
aqui a pessoa acompanha o traço, não só percebe que algo se moveu. */
@media (prefers-reduced-motion: no-preference) {
.traco-desenha {
stroke-dasharray: 100;
stroke-dashoffset: 100;
animation: spark-desenha 1100ms var(--curva) 80ms forwards;
}
/* O ponto do fundo acende QUANDO O TRAÇO CHEGA NELE, e não junto com o resto.
O fundo da curva fica por volta de um terço do percurso — no exemplo, dia 30
de noventa e um. Com a linha levando 1100ms a partir dos 80ms, o traço passa
ali perto dos 450ms, e é esse encontro que faz a cena parecer contada em vez
de montada: a linha desce, encosta no pior dia, e o ponto se acende.
Sem esta regra o ponto nascia pronto sobre uma linha que ainda estava sendo
desenhada — o que entrega o fim antes do começo. */
.ponto-fundo {
opacity: 0;
transform-box: fill-box;
transform-origin: center;
animation: ponto-acende 320ms var(--curva-mola) 450ms forwards;
}
}
@keyframes ponto-acende {
from { opacity: 0; transform: scale(0.4); }
to { opacity: 1; transform: scale(1); }
}
/* O número principal acompanha quem está ajustando.
A barra de topo não é fixa, então `top: 8px` não esconde nada atrás dela. O
`z-index` sobe acima dos cartões de resultado, que rolam por baixo.
Some no computador largo: ali a tela inteira cabe sem rolagem, e um bloco
grudado só ocuparia espaço sem resolver nada. Grudar é resposta a tela
pequena, que é onde o problema existe. */
.destaque-fixo {
position: sticky;
top: 8px;
z-index: 5;
}
@media (min-width: 1000px) {
.destaque-fixo { position: static; }
}
/* A faixa do número, no celular.
`.destaque-fixo`, logo acima, gruda o cartão e não resolve o caso que o
Bianchi relatou: `sticky` só prende dentro do bloco que contém o elemento, e o
cartão mora na `zona-decisao`, que termina muito antes dos controles. Medido
em 390 por 844: com a régua no centro da janela, o cartão ficava em −3132 px.
Esta faixa é filha do `miolo`, o único ancestral comum do resultado e dos
controles, e por isso acompanha a rolagem até a régua. Ela carrega só o rótulo
e o valor: o cartão inteiro tem 210 px dos 844 da janela, e grudá-lo gastaria
um quarto da tela para resolver uma falta de tela.
**Ela VALE NO COMPUTADOR TAMBÉM, desde 20 de setembro de 2026.** Nasceu escondida
acima de 1000px, com a justificativa de que lá o número e os controles já cabem
juntos. Estava errado, e o Bianchi provou com foto: todas as telas que ele
mandou são do notebook, muito acima de 1000px, e nelas **não havia nada**
segurando o número — a outra solução, `.destaque-fixo`, também vira `static`
na mesma largura. Ou seja, as duas soluções morriam exatamente onde ele
trabalha, e eu entreguei duas vezes um conserto que por construção nunca
chegaria até ele.
A regra dele é simultaneidade, e não largura: *"ele tem que ver o número dele
mudando e tem que conseguir ver isso simultaneamente. Caso contrário não faz
sentido ele ficar subindo e descendo a página."* Uma solução que só funciona no
celular não resolve, porque ele abre no computador; uma que só funciona no
computador não resolve, porque ele usa iPhone. */
.faixa-numero {
position: sticky;
top: 8px;
z-index: 6;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 10px 14px;
border-radius: var(--r-p);
background: var(--rampa-campo);
color: var(--sobre-campo);
box-shadow: var(--d-campo);
}
.faixa-numero .faixa-rotulo { font-size: 12.5px; opacity: 0.85; }
.faixa-numero .faixa-valor {
font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* Os tons de valor sobre o campo ultramarino, que não são os mesmos de sobre o
papel: vermelho e verde de papel somem no azul. */
.faixa-numero .faixa-valor.ruim { color: var(--sobre-campo-ruim); }
.faixa-numero .faixa-valor.atencao { color: var(--sobre-campo-atencao); }
/* **A barra que mostra o MOVIMENTO, e não só o valor novo.**
Sugestão do Bianchi na mesma data: *"de que forma a gente consegue deixar isso
visível graficamente, se for gráfico em barras, se for alguma questão que ele
consiga acompanhar de forma moderna"*.
Um número que troca de 39.598 para 46.192 diz o resultado e esconde o
movimento: a pessoa lê dois valores e precisa fazer a diferença de cabeça. A
barra anda, e andar é a informação — a transição de 180ms já existe em
`.barra > i` e é ela que transforma troca de número em acompanhamento.
A faixa vira duas linhas: rótulo e valor em cima, barra embaixo. Continua
ocupando pouco, que era a razão de ela existir em vez de grudar o cartão
inteiro. */
.faixa-numero { flex-wrap: wrap; }
.faixa-numero .faixa-barra {
flex-basis: 100%;
height: 8px; border-radius: var(--r-pilula);
background: rgba(255, 255, 255, .22);
overflow: hidden;
}
.faixa-numero .faixa-barra > i {
display: block; height: 8px; border-radius: var(--r-pilula);
background: var(--sobre-campo);
transition: width 180ms var(--curva);
}
.faixa-numero .faixa-barra.ruim > i { background: var(--sobre-campo-ruim); }
.faixa-numero .faixa-barra.atencao > i { background: var(--sobre-campo-atencao); }
/* A porta do diagnóstico completo.
Não usa `.conta-aberta`, que é o recolhimento de dentro do cartão: lá o
`summary` tem 13,5px em cinza de apoio, peso de nota de rodapé. Isto aqui é
uma seção da página, e precisa parecer uma — com alvo de toque de 44px, que é
o mínimo para o dedo. */
.ver-tudo {
margin-top: 24px;
border-top: 1px solid var(--filete);
padding-top: 8px;
}
.ver-tudo > summary {
cursor: pointer;
list-style: none;
display: flex; align-items: center; gap: 10px;
min-height: 44px;
font-size: 16px; font-weight: 700; color: var(--tinta);
transition: color var(--t-rapido) var(--curva);
}
.ver-tudo > summary::-webkit-details-marker { display: none; }
.ver-tudo > summary::before {
content: '';
width: 9px; height: 9px; flex-shrink: 0;
border-right: 2px solid var(--caneta);
border-bottom: 2px solid var(--caneta);
transform: rotate(45deg) translate(-2px, -2px);
transition: transform var(--t-rapido) var(--curva);
}
.ver-tudo[open] > summary::before { transform: rotate(-135deg) translate(-3px, -3px); }
.ver-tudo > summary:active { transform: scale(0.99); }
.ver-tudo .graficos-grade { margin-top: 4px; }
/* ------------------------------------------------------------- resultado */
.linha-valor {
display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
padding: 11px 0; border-bottom: 1px solid var(--linha2);
}
.linha-valor:last-child { border-bottom: 0; }
.linha-valor .rot { font-size: 13.5px; color: var(--ink2); }
.linha-valor .val { font-family: var(--mono); font-size: 14.5px; white-space: nowrap; }
.linha-valor.forte .rot { font-weight: 600; color: var(--ink); }
.linha-valor.forte .val { font-size: 17px; }
.linha-valor .val.bom { color: var(--verde); }
.linha-valor .val.ruim { color: var(--alerta); }
.linha-valor .val.atencao { color: var(--ambar); }
/* Uma ação da lista "o que fazer primeiro".
Tem estilo próprio desde 19 de setembro de 2026, quando o Bianchi fotografou a
lista no celular: *"ainda com muita coisa desformatada e com cara de IA"*. Ela
usava `.linha-valor`, que empurra o valor para a direita — serve para "Ticket
médio ..... R$ 200", onde rótulo e número são dois lados da mesma coisa, e não
para uma ação, cujo título é uma frase inteira. No celular o título tomava a
linha, o valor descia e ficava flutuando no meio da seguinte, com a etiqueta
embaixo em outro alinhamento.
Agora é uma pilha à esquerda, na ordem da leitura. Cada degrau tem peso menor
que o anterior, para o olho descer sozinho: o que fazer, quanto vale, como se
faz, o que custa, e a origem. */
.acao { display: grid; gap: 3px; }
.acao-topo { display: flex; align-items: baseline; gap: 10px; }
.acao-num {
font-size: 11.5px; font-weight: 700; color: var(--teal);
font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.acao-titulo { font-size: 15.5px; font-weight: 600; color: var(--ink); line-height: 1.3; }
/* O valor e a natureza na MESMA linha de base: "+ R$ 6.627" e "volta ao caixa uma
vez" são uma informação só, e separá-los foi o que fez a etiqueta parecer
perdida na foto. */
.acao-valor {
display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
margin-top: 2px;
}
.acao-valor strong {
font-size: 17px; font-weight: 700; color: var(--folga);
font-variant-numeric: tabular-nums;
}
.acao-valor span { font-size: 12.5px; color: var(--ink3, var(--grafite-escuro)); }
.acao .nota { line-height: 1.45; }
/* A etiqueta de esforço da ação: jade lavado quando só depende dela, cinza com
filete quando depende de outro. Sem cor viva: a etiqueta informa, não grita. */
.pilula {
display: inline-flex; align-items: center; align-self: flex-start;
font-size: 12px; font-weight: 700; line-height: 1;
padding: 6px 10px; border-radius: var(--r-pilula); margin-top: 6px;
color: var(--grafite-escuro); background: var(--papel-baixo); border: 1px solid var(--filete);
}
.pilula.hoje { color: var(--caneta); background: var(--teal-tenue); border-color: var(--teal-borda); }
.destaque {
background: var(--rampa-campo);
box-shadow: var(--d-campo);
border-radius: var(--r-g);
padding: 32px 34px;
color: var(--sobre-campo);
display: flex; flex-direction: column; gap: 8px;
}
.destaque .lbl { color: var(--sobre-campo); opacity: 0.85; font-size: 15px; }
/* **O número grande transbordava o cartão sempre que vinha com palavra.**
Fotografado pelo Bianchi em 20 de setembro de 2026, em quatro telas seguidas:
"um ponto de venda só", "32,10% de fol[ga]", "informe um pro[jeto]" e
"10.452 unidad[es]" — todas cortadas na borda da caixa azul, com o texto
escapando por cima do cartão ao lado. Onde era só número, como "R$ 2" e
"R$ 36.282", cabia, e por isso o defeito passou despercebido.
A causa era esta regra: `white-space: nowrap` com fonte de 38px a 66px. Em
390px, uma frase de vinte caracteres precisaria de umas três larguras de
cartão, e o `nowrap` proibia a única saída que existia.
**Não é caso de borda.** Medido nos nove módulos: CINCO devolvem destaque com
texto — "preço abaixo do custo" (21 caracteres), "um ponto de venda só" (20),
"86,10% de folga" (15), "ficar parado" (12) e "165 dias" (8). É metade do
produto.
**O conserto deixa quebrar linha e encolhe conforme o comprimento**, em vez de
cortar com reticências: cortar esconderia justamente a informação que a pessoa
veio buscar. Número curto continua gigante; frase longa entra num tamanho que
cabe. `overflow-wrap` cuida da palavra única que ainda assim não couber. */
.destaque .valor {
font-family: var(--display); font-weight: 800;
font-variant-numeric: tabular-nums;
font-size: clamp(30px, 7.5vw, 66px); color: var(--sobre-campo); line-height: 1.02;
letter-spacing: -0.02em;
display: block; max-width: 100%;
overflow-wrap: anywhere; hyphens: none;
}
/* O destaque que é frase, e não cifra, pede corpo menor: a tela o marca com
`valor-frase` quando o texto passa de doze caracteres, e aí ele desce para uma
escala que cabe em duas linhas no celular sem virar título. */
.destaque .valor.valor-frase {
font-size: clamp(24px, 5.4vw, 40px); line-height: 1.16; letter-spacing: -0.01em;
}
.destaque .valor.ruim { color: var(--sobre-campo-ruim); }
.destaque .valor.atencao { color: var(--sobre-campo-atencao); }
/* O campo ultramarino DENTRO do veredito: é o mesmo `.destaque`, com folga menor
e número um pouco mais contido, porque aqui ele mora dentro do cartão da
conclusão e não solto na página. A fonte da procedência ("de") fica clara sobre
o azul, no mesmo branco do rótulo, com menos peso. */
.veredito .destaque.veredito-heroi {
background: transparent; box-shadow: none; border-radius: 0;
padding: 14px 0 0; margin: 0; gap: 4px;
border-top: 1px solid rgba(255, 255, 255, .14);
}
@media (min-width: 900px) {
.veredito .destaque.veredito-heroi {
padding: 4px 0 4px 32px; border-top: 0;
border-left: 1px solid rgba(255, 255, 255, .14);
}
}
.veredito-heroi .lbl { color: var(--caneta-clara); opacity: 1; font-size: 13px; }
.veredito-heroi .valor {
/* **Número não quebra, nunca.** A primeira tentativa de caber usou
`overflow-wrap: anywhere`, e o resultado foi pior que estourar: o herói saiu
"−R$ 106" numa linha e ".394,51" na outra, o que lê como dois números
(fotografado em 29/09). Valor em dinheiro é uma unidade indivisível.
Cabe encolhendo: o tamanho acompanha a largura da tela e a caixa deixa
encolher, e a régua de 6,5% do contêiner ainda dá 40px a 1280px e 26px num
celular, que continua sendo o número herói da faixa. */
/* A régua é do CONTÊINER, não da janela. A faixa vive dentro do cartão do
veredito, que a 1280px tem uns 910px e divide espaço com o cartão do caixa
ao lado: medir por `vw` supôs a tela inteira e o número saiu cortado no
",51" (foto de 29/09). Com `cqw` ele acompanha a caixa que o segura. */
font-size: clamp(19px, 5.4cqw, 27px);
white-space: nowrap;
}
.veredito-heroi .de {
color: var(--ntexto3); opacity: 1; font-size: 12.5px; line-height: 1.3;
}
.destaque .caixinha {
border-radius: var(--r-m);
background: rgba(255, 255, 255, 0.13);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), 0 10px 24px -12px rgba(8, 14, 50, .6);
padding: 18px 20px;
}
.leitura {
font-size: 17px; line-height: 1.6; color: var(--tinta); max-width: 68ch;
border-left: 2px solid var(--caneta); padding-left: 18px;
}
.rolar { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 520px; }
th {
background: var(--faixa);
font-size: 13px; font-weight: 700; color: var(--grafite); text-align: right;
padding: 12px 14px; white-space: nowrap;
}
th:first-child { text-align: left; }
td {
font-size: 13.5px; padding: 12px; text-align: right;
border-top: 1px solid var(--linha2); font-family: var(--mono);
font-variant-numeric: tabular-nums; white-space: nowrap;
}
td:first-child { text-align: left; font-family: var(--sans); white-space: normal; }
/* ------------------------------------------------------------ linhas repetidas */
.linhas { display: flex; flex-direction: column; gap: 10px; }
.linha-item {
border: 1px solid var(--linha); border-radius: 6px; padding: 14px;
display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
align-items: end; background: var(--base);
}
.linha-item .remover {
grid-column: 1 / -1; justify-self: end;
background: transparent; border: 0; color: var(--ink3);
font-family: inherit; font-size: 12.5px; cursor: pointer; padding: 6px;
min-height: 32px;
}
.linha-item .remover:hover { color: var(--alerta); }
/* ---------------------------------------------------------------- travado */
/* O bloco escuro. Aparece em três lugares e só neles: o painel do entrar, o
convite de plano e o módulo travado. É o único escuro da aplicação, e é
escolhido, não o inverso automático do claro. */
.travado-aviso {
background: var(--rampa-escura);
border-radius: var(--r-m);
box-shadow: 0 2px 6px rgba(8, 14, 26, .35), 0 30px 60px -26px rgba(8, 14, 26, .7),
inset 0 1px 0 rgba(255, 255, 255, .10);
padding: 26px 30px;
color: var(--ntexto);
display: flex; flex-direction: column; gap: 12px;
}
.travado-aviso h2 { color: #FFF; font-size: 24px; }
.travado-aviso p { color: var(--ntexto2); font-size: 16px; line-height: 1.6; max-width: 62ch; }
.travado-aviso .btn {
background: var(--rampa-botao);
color: var(--sobre-botao);
box-shadow: var(--d-botao);
}
.travado-aviso .btn:hover { background: var(--caneta-baixa); color: #FFF; }
/* ------------------------------------------------------------- entrada */
.entrada-tela {
min-height: 100vh; display: grid; grid-template-columns: 1fr;
}
@media (min-width: 940px) { .entrada-tela { grid-template-columns: 1fr 1fr; } }
/* O painel escuro da entrada. É a única tela onde o escuro aparece por decisão
estética, e não para marcar um bloqueio. A grade de milímetro saiu: o azul
profundo em degradê já dá a profundidade, e a grade competia com o texto. */
/* O azul é o MESMO da faixa funda da tela inicial e das páginas de entrada, desde
24/09. Era `--rampa-escura`, um ultramar mais claro, e o produto passava a ter dois
azuis profundos diferentes conforme a tela. Um azul só. */
.entrada-lado {
background: linear-gradient(160deg, #0F2A5C 0%, #061838 70%);
display: none;
padding: 56px 48px;
flex-direction: column;
justify-content: space-between;
gap: 40px;
color: var(--ntexto);
}
@media (min-width: 940px) { .entrada-lado { display: flex; } }
/* **NO CELULAR O PAINEL NÃO SOME MAIS, ENCOLHE, e isto é de 24/09.** Abaixo de
940px ele era `display: none`, e a tela ficava com o cartão do formulário sozinho
no meio de um campo cinza vazio: sem marca, sem uma linha dizendo o que é, e com
meia tela de nada em cima. É a primeira tela de quem chega pelo telefone, que é
como o Bianchi usa o site, e ela não dizia onde a pessoa estava.
Encolhido, ele vira uma faixa de topo com a marca e a frase, no mesmo azul fundo.
Os dois parágrafos de explicação ficam para o computador, onde há altura para eles.
**O selo de privacidade fica**, e de propósito: ele é a frase que a pessoa precisa
ler ANTES de digitar a senha, e o telefone é onde ela digita. */
@media (max-width: 939px) {
.entrada-lado {
display: flex; padding: 26px 20px 30px; gap: 14px; justify-content: flex-start;
}
.entrada-lado p { display: none; }
.entrada-lado h2 { font-size: clamp(22px, 6vw, 30px); max-width: 18ch; }
.entrada-form { padding-top: 24px; align-items: flex-start; }
}
.entrada-lado .marca-escura {
font-family: var(--display); font-weight: 800;
font-size: 22px; color: #FFF;
}
.entrada-lado h2 {
color: #FFF; font-size: clamp(28px, 3.4vw, 38px);
font-weight: 700; line-height: 1.1;
max-width: 22ch;
}
.entrada-lado p { color: var(--ntexto2); font-size: 17px; line-height: 1.6; max-width: 46ch; }
.entrada-lado .selo-privacidade {
display: flex; align-items: flex-start; gap: 10px;
font-size: 14px; line-height: 1.5; color: var(--ntexto2);
border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 18px;
}
/* O marcador do selo era um ponto de texto, o caractere `•` em dourado. Virou
cadeado desenhado, que é o que a frase diz: a planilha é lida no aparelho e o
diagnóstico fica só dela. Marcador de texto fazendo papel de ícone é a vizinhança
do emoji de marcador, que o DESIGN.md proíbe. */
.entrada-lado .selo-privacidade svg {
width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px;
stroke: var(--graf-volta); fill: none; stroke-width: 2;
stroke-linecap: round; stroke-linejoin: round;
}
.entrada-form {
display: flex; align-items: center; justify-content: center;
padding: 32px 20px;
}
/* **O FORMULÁRIO GANHOU PAINEL em 24 de setembro de 2026.** Era uma coluna solta
sobre o papel: abas, dois campos, o botão e três links boiando, sem moldura e sem
sombra, enquanto TODA superfície do produto é cartão com filete de 1px e sombra
leve. A tela onde a pessoa entrega a senha era a única sem chão, e chão é
exatamente o que ela precisa passar ali.
Pedido do Bianchi na mesma linha das páginas de entrada: *"trazer o mesmo teor
robusto e profissional... depois login"*. */
.entrada-caixa {
width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 22px;
background: var(--papel-alto); border: 1px solid var(--filete);
border-radius: var(--r-g); box-shadow: var(--d-painel);
padding: 28px 24px;
}
@media (min-width: 560px) { .entrada-caixa { padding: 34px 32px; } }
.abas {
display: flex; background: var(--papel-alto); border: 1px solid var(--filete);
border-radius: var(--r-pilula); padding: 4px; box-shadow: none;
}
/* O seletor de período: cada pílula numa linha só, e a fileira rola de lado no
celular em vez de quebrar o nome em três linhas dentro de um bolo escuro
(foto do Bianchi em 22/09: "lembre de deixar formatado"). A barra de rolagem
fica escondida; o dedo arrasta. */
/* a fileira abraça as pílulas (fit-content) em vez de esticar até a borda com
vão vazio à direita; no celular ela encosta na largura e rola */
.abas-periodo { position: relative; width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.abas-periodo::-webkit-scrollbar { display: none; }
/* **A borda esmaecida diz que a fileira CONTINUA, em vez de parecer cortada.**
Apontado pelo Bianchi em 30/09 ("deixar formatado... alinhamentos"), e visto na
foto: a pílula selecionada é trazida para a vista pelo navegador, e a primeira
sai meio de fora. "Este mês" virava "s mês" colado na borda esquerda, o que se
lê como defeito e não como "tem mais para o lado".
As classes são postas pelo JS conforme a rolagem, e não fixas: assim a pílula
da ponta não fica desbotada quando não há nada escondido, que seria trocar um
defeito por outro. Quem não tem JS vê a fileira como sempre foi. */
.abas-periodo.tem-antes { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px); mask-image: linear-gradient(90deg, transparent 0, #000 26px); }
.abas-periodo.tem-depois { -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 26px); mask-image: linear-gradient(270deg, transparent 0, #000 26px); }
.abas-periodo.tem-antes.tem-depois { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%); }
/* `.abas.abas-periodo button`, com as duas classes: `.abas button` vem logo
abaixo com o mesmo peso e venceria pela ordem, e as pílulas voltariam a se
esticar (medido no navegador em 22/09: flex "1 1 0%"). */
.abas.abas-periodo button { flex: 0 0 auto; white-space: nowrap; padding: 0 16px; font-size: 14px; min-height: 44px; }
.abas button {
flex: 1; border: 0; background: transparent; font-family: inherit;
font-size: 15px; font-weight: 700; color: var(--grafite-escuro);
border-radius: var(--r-pilula); cursor: pointer; min-height: 44px;
}
.abas button[aria-selected="true"] {
background: var(--tinta);
color: var(--papel); box-shadow: none;
}
/* As abas de um grupo (as contas irmãs) trazem um rótulo por conta, e três num
celular de 390px não cabem no corpo de 15px. Encolhe a letra e deixa quebrar em
duas linhas, sem estourar a tela. */
.abas-grupo { margin: 20px 0 4px; }
.abas-grupo button { font-size: 13px; font-weight: 600; line-height: 1.15; padding: 8px 6px; white-space: normal; }
/* As abas de grupo são sublinhado, não pílula: a pílula é do período, e dois
controles iguais com funções diferentes na mesma tela confundem (22/09). */
.abas.abas-grupo {
background: transparent; border: 0; border-bottom: 1px solid var(--filete);
border-radius: 0; padding: 0; gap: 2px;
}
.abas.abas-grupo button {
border-radius: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
color: var(--grafite); padding: 10px 10px 9px;
}
.abas.abas-grupo button[aria-selected="true"] {
background: transparent; box-shadow: none;
color: var(--caneta); border-bottom-color: var(--caneta-alta); font-weight: 700;
}
.grupo-painel { padding-top: 6px; }
.escolha-plano { display: flex; flex-direction: column; gap: 8px; }
.plano-opcao {
display: flex; align-items: flex-start; gap: 12px;
border: 1px solid var(--filete); border-radius: var(--r-p); padding: 14px 16px;
cursor: pointer; min-height: 44px;
background: linear-gradient(var(--papel-alto), #E4E8E6);
transition: border-color 130ms var(--curva), background 130ms var(--curva);
}
.plano-opcao:hover { border-color: var(--grafite); }
.plano-opcao input {
width: auto; min-height: 0; margin-top: 3px; accent-color: var(--caneta);
}
.plano-opcao.escolhido {
border-color: var(--caneta);
background: linear-gradient(90deg, rgba(14, 159, 110, 0.09), rgba(14, 159, 110, 0.03));
}
.plano-opcao .nome { font-size: 13px; font-weight: 700; color: var(--grafite); }
.plano-opcao .desc {
font-size: 16px; color: var(--tinta); line-height: 1.35; font-weight: 600;
}
/* A régua de força da senha. Cada exigência é uma frase curta que acende
quando cumprida, porque "senha inválida" depois de enviar é a pior forma de
dizer isso. */
.forca { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.forca span {
font-size: 13px; font-weight: 600; color: var(--grafite);
display: inline-flex; align-items: center; gap: 6px;
}
.forca span::before {
content: ''; width: 7px; height: 7px; border-radius: var(--r-pilula);
border: 2px solid var(--filete-forte);
}
.forca span.ok { color: var(--folga); }
.forca span.ok::before { background: var(--folga); border-color: var(--folga); }
/* O botão de mostrar a senha vive dentro do campo, à direita. */
.com-olho { position: relative; }
.com-olho input { padding-right: 92px; }
.com-olho button {
position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
background: none; border: 0; font: inherit; font-size: 14px; font-weight: 700;
color: var(--caneta); cursor: pointer; padding: 8px 10px; min-height: 44px;
}
/* Alvos de toque que a auditoria em navegador mediu abaixo de 44px no celular,
em 13 de setembro. As regras só crescem a área clicável; o desenho fica igual. */
#pilulas button { min-height: 44px; }
/* Cresce por preenchimento e devolve por margem negativa, sem tocar em
`display`. A primeira versão desta regra usava `display: inline-flex` e passou
por cima do `.some` que esconde três links no celular: eles voltaram a
aparecer e a página da empresa rolou 36px para o lado. O teste pegou. */
header.topo .navegar a:not(.btn) {
padding-block: 11px; margin-block: -11px;
}
/* --------------------------------------------------------------- utilidades */
.pilha { display: flex; flex-direction: column; gap: 14px; }
.pilha-g { display: flex; flex-direction: column; gap: 22px; }
.fileira { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.entre { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.duas { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .duas { grid-template-columns: 1fr 1fr; } }
/* As duas zonas de um módulo: decisão à esquerda, evidência à direita.
O Bianchi olhou um módulo aberto em 19 de setembro de 2026 e disse que a tela
faz "um recorte com uma aba menor", interessante de ver e pouco produtivo de
usar. Era isso mesmo: tudo vinha numa coluna só, então num computador a
conclusão, os indicadores, os gráficos, a tabela e o que fazer disputavam uma
faixa estreita, com largura sobrando dos dois lados, e a decisão ficava a uma
rolagem de distância de quem tem pressa.
A grade nomeia as áreas em vez de depender da ordem do texto, e isso é o que
permite as duas leituras certas ao mesmo tempo: no computador a conclusão fica
em cima à esquerda com o que fazer logo abaixo dela, e a evidência ocupa a
coluna da direita inteira; no celular tudo volta a empilhar na ordem do funil,
conclusão, números e só então ação, que é a ordem que ele fixou. */
.zonas { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: start; }
.zona-decisao, .zona-acoes, .zona-evidencia {
display: flex; flex-direction: column; gap: 14px; min-width: 0;
}
/* zona sem nada dentro não abre buraco na grade */
.zonas > :empty { display: none; }
@media (min-width: 1000px) {
.zonas {
gap: 16px;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
grid-template-areas: 'decisao evidencia' 'acoes evidencia';
}
.zona-decisao { grid-area: decisao; }
.zona-acoes { grid-area: acoes; }
.zona-evidencia { grid-area: evidencia; }
}
.grade-cartoes { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.carregando { display: inline-block; width: 15px; height: 15px; border-radius: 50%;
border: 2px solid rgba(255,255,255,0.35); border-top-color: #FFF;
animation: girar 700ms linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .carregando { animation: none; } }
/* ===========================================================================
O que veio com a virada de experiência: assistente, cartões que são
perguntas, e controle deslizante no lugar do formulário.
=========================================================================== */
/* ------------------------------------------------------------- assistente */
.assistente {
background: var(--surface);
border: 1px solid var(--linha);
border-radius: 10px;
padding: 14px;
display: flex;
flex-direction: column;
gap: 12px;
box-shadow: 0 1px 2px rgba(18, 23, 29, 0.04);
}
.assistente-linha { display: flex; gap: 8px; align-items: stretch; }
.assistente-linha input {
flex-grow: 1;
border: 1px solid var(--borda);
border-radius: 7px;
font-size: 16px;
min-height: 50px;
padding-inline: 14px;
}
.assistente-linha input::placeholder { color: var(--ink3); }
.assistente-linha .btn {
min-width: 52px;
padding-inline: 16px;
border-radius: 7px;
}
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
border: 1px solid var(--linha);
background: var(--base);
color: var(--ink2);
border-radius: 100px;
padding: 9px 14px;
font-family: inherit;
font-size: 13.5px;
cursor: pointer;
min-height: 40px;
text-align: left;
transition: border-color 140ms var(--curva), color 140ms var(--curva);
}
.chip:hover { border-color: var(--teal); color: var(--teal-esc); }
/* --------------------------------------------- cartão que é uma pergunta */
.cartao-modulo {
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 8px;
text-decoration: none;
color: inherit;
transition: border-color 150ms var(--curva), transform 150ms var(--curva);
}
a.cartao-modulo:hover {
border-color: var(--teal);
transform: translateY(-2px);
text-decoration: none;
color: inherit;
}
.cartao-modulo .pergunta {
font-family: var(--display);
font-weight: 600;
font-size: 16.5px;
line-height: 1.3;
letter-spacing: -0.01em;
}
.cartao-modulo .processo {
font-size: 13px;
line-height: 1.5;
color: var(--ink3);
}
.cartao-modulo.travado { opacity: 0.6; }
/* --------------------------------------------------- controle deslizante */
input[type=range] {
-webkit-appearance: none;
appearance: none;
width: 100%;
/* A caixa tem 44px, que é a área do dedo. A trilha fina de 6px que se vê é
desenhada no pseudo-elemento logo abaixo. Até 13 de setembro a própria caixa
tinha 6px de altura: o visual era o mesmo, mas o toque só pegava se o dedo
caísse exatamente na linha, e a auditoria em navegador mediu isso. */
height: 44px;
background: transparent;
padding: 0;
min-height: 0;
border: 0;
outline-offset: 6px;
margin-block: 0;
}
input[type=range]::-webkit-slider-runnable-track {
height: 6px; border-radius: 3px; background: var(--linha2); box-shadow: none;
}
input[type=range]::-moz-range-track {
height: 6px; border-radius: 3px; background: var(--linha2); box-shadow: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--surface);
border: 2.5px solid var(--teal);
cursor: grab;
box-shadow: 0 1px 4px rgba(18, 23, 29, 0.18);
transition: transform 120ms var(--curva);
}
input[type=range]::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.1); }
input[type=range]::-moz-range-thumb {
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--surface);
border: 2.5px solid var(--teal);
cursor: grab;
box-shadow: 0 1px 4px rgba(18, 23, 29, 0.18);
}
input[type=range]:focus { outline: none; }
input[type=range]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--teal); outline-offset: 3px; }
/* ------------------------------------------------------ ajustes de celular */
@media (max-width: 640px) {
.miolo { padding: 14px; gap: 12px; }
.destaque { padding: 20px; }
.destaque .valor { font-size: 30px; }
.destaque .valor.valor-frase { font-size: 22px; }
.indicadores { grid-template-columns: 1fr; }
.grade-cartoes { grid-template-columns: 1fr; }
.cartao-corpo { padding: 16px 17px; }
.assistente-linha input { font-size: 16px; }
.linha-valor { gap: 10px; }
.linha-valor .rot { font-size: 13px; }
}
/* Impressão: o que a pessoa manda para o contador não precisa de menu. */
/* A página impressa é um RELATÓRIO, não um retrato da tela.
Requisito que o Bianchi colocou em 18 de setembro de 2026: a pessoa extrai isto
e manda para a contabilidade dela, para um analista, ou para a consultoria —
*"ô Renan, está acontecendo isso daqui, está achando viável?"*. Quem recebe
**não abriu a ferramenta**, e é isso que muda tudo: o papel precisa dizer de
quem é, de que período, o que entrou na conta e o que ficou de fora.
Antes daqui a impressão só escondia o menu. Saía "R$ 47.320" sem período, sem
dizer se inclui maquininha e sem data da leitura — número solto na mesa de um
contador que não tem como conferir nem perguntar. */
@media print {
.lateral, .menu-movel, .barra-topo, .assistente, .chips,
.fileira button, .fileira a, input[type=range] { display: none !important; }
/* O convite para conversar não sai no papel. Este relatório circula para o
contador e para o analista da pessoa, e um "fale no WhatsApp" impresso na
mesa de terceiro é ruído: ele não é o destinatário da oferta. */
.convite-contato { display: none !important; }
.app { display: block; }
.cartao, .destaque { break-inside: avoid; }
.destaque { background: #FFF !important; border: 1px solid #CBD3DA; }
.destaque .valor, .destaque .lbl, .destaque p { color: #12171D !important; }
/* O diagnóstico completo sai ABERTO no papel.
Na tela ele nasce fechado, porque quem abre no balcão quer a decisão e não o
detalhe. No papel a lógica se inverte: o relatório circula para o contador e
para o analista da pessoa, que precisam justamente do detalhe, e um
`details` fechado imprimiria uma folha sem os sete gráficos e sem os
achados. Quem recebe o papel não tem onde clicar. */
E a regra sozinha NÃO basta, por isso ela vem acompanhada de código em
`pagina-painel.js`: o navegador esconde o conteúdo de um `details` fechado
por comportamento próprio do elemento, não por `display` nos filhos.
Escrever `display: revert` aqui e achar que resolve seria deixar no arquivo
uma regra que parece funcionar e não funciona. Quem abre de verdade é o
`beforeprint`, que põe o atributo `open` antes de o papel ser montado. */
.ver-tudo > summary { display: none !important; }
/* o cabeçalho do relatório só existe no papel: na tela ele seria repetição */
.so-no-papel { display: block !important; }
.cabeca-relatorio {
border-bottom: 2px solid #12171D; padding-bottom: 10px; margin-bottom: 16px;
}
.cabeca-relatorio .quem { font-size: 18px; font-weight: 700; }
.cabeca-relatorio .quando { font-size: 12.5px; color: #3C444C; margin-top: 3px; }
.cabeca-relatorio .premissas {
font-size: 11.5px; color: #3C444C; margin-top: 8px; line-height: 1.45;
}
/* a conta aberta some da tela e APARECE no papel: quem recebe precisa
conferir, e não tem o botão para expandir */
.conta-aberta > summary { display: none !important; }
.conta-aberta[open], .conta-aberta { display: block !important; }
.conta-aberta .passo { break-inside: avoid; }
/* a origem de cada número é o que torna o relatório defensável fora daqui */
.veredito-numero .de, .conta-aberta .fonte { color: #3C444C !important; }
a[href]::after { content: ''; }
body { background: #FFF !important; }
}
/* na tela, o cabeçalho de relatório não aparece */
.so-no-papel { display: none; }
/* ===========================================================================
O fundo vivo.
A página não flutua no branco: ela é uma folha de papel apoiada sobre um
fundo que se move devagar. Cinco manchas de luz derivam em ciclos longos de
44 a 92 segundos, que não são múltiplos uns dos outros, então a composição
nunca se repete de um jeito que a pessoa perceba. Por cima passam duas
tramas de listra fina e um clarão que atravessa a tela.
Tudo em CSS puro, sem uma linha de script: a política de segurança do site
proíbe script embutido, e movimento de fundo não vale um arquivo a mais para
baixar. Com movimento reduzido ligado, o fundo para e continua bonito,
porque a composição já funciona parada.
Nenhuma camada recebe evento de ponteiro, então nada disso atrapalha o toque.
=========================================================================== */
@keyframes deriva-a {
0% { transform: translate3d(-7%, 3%, 0) scale(1.05); }
50% { transform: translate3d(6%, -5%, 0) scale(1.22); }
100% { transform: translate3d(-7%, 3%, 0) scale(1.05); }
}
@keyframes deriva-b {
0% { transform: translate3d(8%, -4%, 0) scale(1.14); }
50% { transform: translate3d(-6%, 5%, 0) scale(1.00); }
100% { transform: translate3d(8%, -4%, 0) scale(1.14); }
}
@keyframes deriva-c {
0% { transform: translate3d(0, 6%, 0) scale(1.02); }
50% { transform: translate3d(-6%, -6%, 0) scale(1.20); }
100% { transform: translate3d(0, 6%, 0) scale(1.02); }
}
@keyframes deriva-d {
0% { transform: translate3d(4%, 8%, 0) scale(1.18); }
50% { transform: translate3d(-3%, -2%, 0) scale(1.04); }
100% { transform: translate3d(4%, 8%, 0) scale(1.18); }
}
@keyframes estratos { 0% { background-position: 0 0; } 100% { background-position: 0 -360px; } }
@keyframes estratos-lentos { 0% { background-position: 0 0; } 100% { background-position: 0 -180px; } }
@keyframes clarao {
0% { transform: translate3d(-40%, 0, 0); }
100% { transform: translate3d(140%, 0, 0); }
}
.fundo-vivo {
position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
background: radial-gradient(130% 100% at 50% -10%, #DDE2DF 0%, #C2C9C6 48%, #A7AFAC 100%);
}
.fundo-vivo > i { position: absolute; display: block; }
/* as cinco manchas de luz */
.fundo-vivo > i:nth-child(1) {
inset: -30%; filter: blur(70px);
background: radial-gradient(36% 28% at 20% 22%, rgba(14, 159, 110, 0.48), transparent 68%);
animation: deriva-a 44s ease-in-out infinite;
}
.fundo-vivo > i:nth-child(2) {
inset: -30%; filter: blur(85px);
background: radial-gradient(44% 34% at 80% 58%, rgba(7, 28, 77, 0.55), transparent 70%);
animation: deriva-b 61s ease-in-out infinite;
}
.fundo-vivo > i:nth-child(3) {
inset: -30%; filter: blur(95px); opacity: 0.9;
background: radial-gradient(32% 24% at 52% 92%, rgba(76, 122, 63, 0.34), transparent 70%);
animation: deriva-c 79s ease-in-out infinite;
}
.fundo-vivo > i:nth-child(4) {
inset: -30%; filter: blur(60px); opacity: 0.8;
background: radial-gradient(26% 18% at 68% 12%, rgba(233, 236, 234, 0.85), transparent 72%);
animation: deriva-d 53s ease-in-out infinite;
}
.fundo-vivo > i:nth-child(5) {
inset: -30%; filter: blur(110px); opacity: 0.7;
background: radial-gradient(30% 22% at 12% 78%, rgba(233, 236, 234, 0.7), transparent 72%);
animation: deriva-b 92s ease-in-out infinite reverse;
}
/* as tramas de listra, que dão a textura de papel técnico */
.fundo-vivo > i:nth-child(6) {
inset: -12%; opacity: 0.55;
background-image: repeating-linear-gradient(180deg, rgba(14, 25, 41, 0.16) 0 1px, transparent 1px 44px);
animation: estratos 36s linear infinite;
}
.fundo-vivo > i:nth-child(7) {
inset: -12%; opacity: 0.35;
background-image: repeating-linear-gradient(180deg, rgba(233, 236, 234, 0.5) 0 1px, transparent 1px 11px);
animation: estratos-lentos 24s linear infinite;
}
.fundo-vivo > i:nth-child(8) {
inset: 0; opacity: 0.4;
background-image: repeating-linear-gradient(90deg, rgba(14, 25, 41, 0.10) 0 1px, transparent 1px 132px);
}
/* o clarão que atravessa, e a vinheta que empurra a atenção para o meio */
.fundo-vivo > i:nth-child(9) {
top: 0; bottom: 0; width: 38%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.26), transparent);
animation: clarao 22s linear infinite;
}
.fundo-vivo > i:nth-child(10) {
inset: 0;
background: radial-gradient(120% 85% at 50% 38%, transparent 38%, rgba(9, 16, 28, 0.34) 100%);
}
/* A folha. Em tela larga é uma prancheta com borda e sombra, apoiada sobre o
fundo; no celular ela ocupa tudo, porque moldura em tela de 390 só come
largura útil. */
.folha {
position: relative; z-index: 1;
background: var(--papel);
max-width: var(--larg-folha);
margin: 0 auto;
min-height: 100vh;
}
@media (min-width: 1380px) {
.folha {
margin-block: 40px;
min-height: 0;
border: 1px solid var(--filete-forte);
border-radius: var(--r-g);
box-shadow: var(--d-prancheta);
overflow: hidden;
}
}
/* ===========================================================================
A entrada em console.
Esta parte da folha existe porque a tela inicial da ferramenta deixou de ser
um menu de cartões e virou uma leitura: um campo de pergunta, o achado mais
caro em destaque, e o resto em linhas de filete. Linha de filete compara
melhor que cartão, e cartão igual repetido é justamente o que faz uma tela
parecer gerada por máquina.
=========================================================================== */
/* o campo da leitura principal: a única ousadia da tela */
.campo-leitura {
background: var(--rampa-campo);
box-shadow: var(--d-campo);
border-radius: var(--r-g);
color: #FFF;
padding: 24px 22px;
margin-top: 24px;
}
@media (min-width: 760px) { .campo-leitura { padding: 30px 34px; } }
/* os pontinhos que dizem quantos achados existem e em qual você está */
.ponto {
width: 8px; height: 8px; border-radius: var(--r-pilula);
border: 0; padding: 0; cursor: pointer;
background: rgba(255, 255, 255, 0.38);
transition: width 500ms var(--curva), background 500ms var(--curva);
}
.ponto.aqui { width: 26px; background: rgba(255, 255, 255, 0.95); }
/* a linha de perguntar: campo e botão colados, como barra de busca de console */
/* A barra de pergunta, que é a porta de entrada da ferramenta.
Uma peça só, arredondada, com o campo transparente por dentro e dois botões
redondos à direita: falar e enviar. A borda inteira acende no foco, em vez de
só o campo, para a barra parecer um objeto e não três controles colados.
No celular ela não encolhe: os botões têm 44px, que é o mínimo para o dedo,
e o campo toma o resto. */
/* Os atalhos para as contas, em pastilhas. Eram sugestões que apareciam ao tocar
no campo de pergunta; com a caixa retirada em 28/09/2026 elas ficam sempre à
vista e são links, não botões. Quebram em várias linhas no celular em vez de
rolarem para o lado: lista que rola escondida é lista que ninguém vê.
A altura mínima de 44px é a do toque, e o `inline-flex` existe por causa disso:
pastilha de uma linha só ficaria com 37px de alvo. */
.atalhos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.atalho {
max-width: 100%;
display: inline-flex; align-items: center; min-height: 44px;
padding: 9px 14px;
border: 1px solid var(--linha); border-radius: 999px;
background: var(--surface); color: var(--grafite-escuro);
font-size: 14px; font-family: inherit; text-align: left;
text-decoration: none;
cursor: pointer;
transition: background 130ms var(--curva), border-color 130ms var(--curva), color 130ms var(--curva);
}
.atalho:hover {
background: color-mix(in srgb, var(--caneta) 7%, transparent);
border-color: var(--caneta); color: var(--tinta);
}
.atalho:focus-visible { outline: 2px solid var(--caneta); outline-offset: 2px; }
.linha-pergunta { display: flex; }
.linha-pergunta input {
flex: 1; min-width: 0;
height: 58px; min-height: 58px;
font-size: 17px; padding: 0 18px;
border: 1px solid #97A0A9; border-right: 0;
border-radius: var(--r-p) 0 0 var(--r-p);
background: linear-gradient(#FFFFFF, #FAFBFA);
box-shadow: inset 0 2px 4px rgba(14, 26, 21, .10);
}
.linha-pergunta input:focus { outline: 2px solid var(--caneta); outline-offset: 1px; }
.linha-pergunta .btn {
height: 58px; min-height: 58px;
border-radius: 0 var(--r-p) var(--r-p) 0;
white-space: nowrap;
}
/* uma linha de achado: o que eu li, e o número à direita */
.linha-achado {
display: grid; gap: 8px 28px;
padding: 18px 0; border-bottom: 1px solid var(--filete);
text-decoration: none; color: inherit;
}
@media (min-width: 700px) {
.linha-achado { grid-template-columns: minmax(0, 1fr) 210px; align-items: baseline; }
.linha-achado > div:last-child { text-align: right; }
}
a.linha-achado:hover { background: rgba(14, 159, 110, 0.045); color: inherit; }
/* os três trilhos de origem de dado, um por plano */
.trilho-origem {
display: grid; gap: 10px 24px;
padding: 20px 0; border-bottom: 1px solid var(--filete);
align-items: center;
}
@media (min-width: 900px) {
.trilho-origem { grid-template-columns: 150px minmax(0, 1fr) 170px 190px; }
}
.trilho-origem.seu {
background: linear-gradient(90deg, rgba(14, 159, 110, 0.07), transparent 70%);
}
.lampada {
width: 8px; height: 8px; border-radius: var(--r-pilula);
border: 2px solid #8E9894; display: inline-block; flex-shrink: 0;
}
.lampada.acesa { background: var(--folga); border-color: var(--folga); animation: pulsar 2.4s ease-in-out infinite; }
@keyframes pulsar { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
/* os cinco controles dos quatro números, quando a pessoa informa à mão */
.grade-perguntas { display: grid; gap: 16px 40px; }
@media (min-width: 760px) { .grade-perguntas { grid-template-columns: 1fr 1fr; } }
/* um botão que é só texto sublinhado, para ação secundária dentro de parágrafo */
.so-link {
/* O preenchimento vertical cresce a área de toque para 44px e a margem
negativa devolve o espaço, então nada se mexe na tela. Sem isso "Esqueci
minha senha" tinha 23px de altura para o dedo acertar. */
background: none; border: 0; padding: 12px 0; margin-block: -12px;
font: inherit; font-weight: 700; color: var(--caneta);
text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.so-link:hover { color: var(--tinta); }
/* ------------------------------------------------------------------ rodapé */
/* O rodapé não tinha regra própria: os links ficavam soltos em linha, com 23px
de altura para o dedo. Cada coluna agora empilha seus links, e cada link tem
44px de área de toque, que é o mínimo recomendado para celular. */
footer .colunas {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 8px 32px;
}
footer .colunas > div { display: flex; flex-direction: column; }
footer .colunas b { font-size: 14px; margin-bottom: 2px; }
footer .colunas a,
footer .colunas span {
display: flex; align-items: center; min-height: 44px;
font-size: 15px;
}
/* ===========================================================================
Aqui viviam DUAS camadas de tema, uma sobre a outra, e a segunda corrigindo
a primeira peça por peça. Saíram em 18 de setembro de 2026.
O que havia: a direção noite (13/09, próxima da Origin) redefinia todas as
variáveis e reescrevia umas sessenta regras de componente com cor escrita
direto — `.lateral { background:#0B0C0D }`, `.btn { background:#FFFFFF }`.
Por cima dela, a direção livro-razão (15/09, papel creme e âmbar) redefinia
tudo outra vez e sobrescrevia, uma a uma, as peças que a primeira havia
pintado na marra.
Três problemas, e o terceiro é o que decidiu a remoção:
1. **A raiz não mandava.** A paleta do plano de design estava escrita no topo
do arquivo e morta por sobrescrita: quem valia era a última camada. Mexer
na identidade exigia mexer em três lugares, ou virava uma quarta camada.
2. **Cor escrita direto não obedece a token**, então nenhuma troca de paleta
na raiz tinha efeito completo enquanto essas regras existissem.
3. **A identidade que estava no ar era justamente a proibida.** O brief do
Bianchi lista, entre as coisas que não se faz em nenhuma hipótese: "fundo
creme com serifada de alto contraste e acento terracota — é hoje a
assinatura mais reconhecível de tela gerada por máquina". Era exatamente
o que a última camada pintava.
O que vale agora é a raiz, no alto deste arquivo: papel de boletim frio,
tinta, e uma única ousadia em ultramarino como campo cheio atrás do número.
As regras de componente que sobraram leem tokens, então trocam de identidade
sozinhas — nenhuma delas precisou ser reescrita.
=========================================================================== */
/* ===========================================================================
Tema livro-razão: a identidade da home nova levada para todas as telas.
Pedido do Bianchi em 15 de setembro de 2026: a entrada e a área do cliente
precisam ter a mesma identidade da home, "para não ficar algo jogado". A regra
completa está no DESIGN.md da raiz.
Esta camada vem por último e redefine as variáveis de cor, que o arquivo
inteiro já usa por apelido. É o que troca todas as telas de uma vez sem
reescrever regra por regra. Onde o tema noite, logo acima, escreveu cor direto
numa peça, ela é sobrescrita aqui pelo nome.
Claro e escuro são irmãos pelo mesmo desenho, e a escolha mora na chave `tema`,
a mesma da home. O âmbar vivo da home fica para botão e superfície; texto em
âmbar usa um tom mais escuro no claro, para passar de 4,5 para 1 sobre o papel.
=========================================================================== */
/* O modo escuro, escolhido e não invertido.
O brief é explícito: "precisa existir versão escura, e ela tem de ser
escolhida, não um inverso automático. Fundo de tinta profunda, não preto
puro." Então o escuro daqui nasce da própria tinta da identidade, #16233A,
puxada para baixo — é o mesmo azul do papel visto à noite, não um cinza
neutro nem um preto de painel.
O claro não aparece aqui de propósito: ele é a raiz, no alto do arquivo.
Enquanto existir um bloco de tema redefinindo o claro, a raiz volta a ser
decorativa e a identidade volta a morar na última camada — que foi como o
produto acumulou três direções visuais sem ninguém perceber. */
html[data-tema="escuro"] {
color-scheme: dark;
--papel: #0A1526;
--papel-alto: #11213B;
--papel-baixo: #0D1A30;
--tinta: #E9ECEA;
--tinta-profunda: #E9ECEA;
--grafite: #9AA5B4;
--grafite-escuro: #C2CAD4;
--filete: rgba(255, 255, 255, 0.11);
--filete-forte: rgba(255, 255, 255, 0.20);
--trilho: #1E3050;
/* a caneta clareia no escuro para continuar legível sobre o papel de noite */
--caneta: #7FA0F2;
--caneta-alta: #93B2FF;
--caneta-baixa: #2150C8;
--caneta-meianoite: #061838;
--caneta-clara: #B7CBFF;
--vencido: #FF8C7E;
--folga: #E3C39D;
--coral: #D9603A;
--sobre-botao: #061838;
/* o campo herói continua sendo o campo herói: ultramarino cheio, não uma
superfície escura a mais. É a única ousadia da identidade, e ela não se
apaga no escuro. */
--rampa-campo: linear-gradient(146deg, #2150C8 0%, #123C93 42%, #0A2560 78%, #061838 100%);
--sobre-campo: #FFF;
--sobre-campo-ruim: #FFD9D4;
--sobre-campo-atencao: #FFE9B8;
--rampa-botao: linear-gradient(#93B2FF, #6C90EE);
--rampa-escura: linear-gradient(160deg, #142742 0%, #0A1626 75%);
--teal-tenue: rgba(127, 160, 242, 0.12);
--teal-borda: rgba(127, 160, 242, 0.34);
--alerta-tenue: rgba(255, 140, 126, 0.12);
--alerta-borda: rgba(255, 140, 126, 0.36);
--ambar: #E8C66A;
--noite: #061838;
--noite2: #0F2A5C;
--noite3: #26364F;
--noite4: #3A4A63;
--ntexto: #E9ECEA;
--ntexto2: #C3C9C6;
--ntexto3: #8E99A6;
/* no escuro a profundidade vem de degrau de cor e borda, nunca de sombra */
--d-baixo: inset 0 1px 0 rgba(255, 255, 255, 0.05);
--d-apoio: none;
--d-painel: none;
--d-prancheta: none;
--d-botao: none;
}
body { background: var(--papel); color: var(--tinta); }
:focus-visible { outline-color: var(--caneta-alta); }
h1, h2 { font-weight: 700; letter-spacing: -0.02em; }
.destaque .valor, .num-heroi { font-weight: 800; }
/* botões: um âmbar por tela, o resto recua para o fantasma */
.btn, .travado-aviso .btn {
background: var(--rampa-botao); color: var(--sobre-botao);
box-shadow: var(--d-botao);
transition: transform 120ms ease-out, box-shadow 200ms ease-out;
}
.btn:hover, .travado-aviso .btn:hover {
background: var(--rampa-botao); color: var(--sobre-botao); transform: translateY(-1px);
}
.btn-2 { background: transparent; color: var(--tinta); border-color: var(--filete-forte); }
.btn-2:hover { border-color: var(--tinta); color: var(--tinta); }
.btn-3 { background: var(--papel-baixo); color: var(--tinta); }
.btn-3:hover { background: var(--trilho); }
/* superfícies */
.cartao, .indicador, .plano-opcao {
background: var(--papel-alto); border-color: var(--filete); box-shadow: var(--d-apoio);
}
.barra-topo { background: var(--papel-alto); }
.travado-aviso { border: 1px solid var(--filete); }
/* a lateral: papel um degrau abaixo, separada por linha, e o item atual em
superfície com borda, com o ícone em âmbar */
.lateral, .menu-movel {
background: var(--papel-alto); color: var(--tinta);
box-shadow: none; border-color: var(--filete);
}
.lateral .sigla { background: var(--caneta-alta); color: var(--sobre-botao); box-shadow: none; }
.lateral .grupo > .lbl, .lateral nav .grupo > .lbl { color: var(--grafite); }
.item { color: var(--grafite-escuro); }
.item:hover { background: color-mix(in srgb, var(--caneta-alta) 12%, transparent); color: var(--tinta); }
.item[aria-current="page"] {
background: var(--teal-tenue); color: var(--caneta);
box-shadow: none;
}
.item[aria-current="page"]:hover { color: var(--caneta); }
.item[aria-current="page"] svg { stroke: #FFFFFF; }
.item.travado, .item.travado:hover { color: var(--grafite); background: transparent; opacity: 0.62; }
.abas { background: var(--papel-alto); border: 1px solid var(--filete); }
.abas button { color: var(--grafite-escuro); }
.abas button[aria-selected="true"] { background: var(--tinta); color: var(--papel); box-shadow: none; }
.plano-opcao.escolhido { background: var(--teal-tenue); border-color: var(--teal-borda); }
/* campos */
input:not([type=range]):not([type=checkbox]):not([type=radio]), select, textarea {
background: var(--papel-alto); color: var(--tinta); border-color: var(--filete-forte);
}
input::placeholder, textarea::placeholder { color: var(--grafite); opacity: 0.7; }
.linha-pergunta input { background: var(--papel-alto); border-color: var(--filete-forte); }
input[type=range]::-webkit-slider-runnable-track { background: var(--trilho); }
input[type=range]::-moz-range-track { background: var(--trilho); }
input[type=range]::-webkit-slider-thumb {
background: var(--caneta-alta); border-color: var(--caneta-alta);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--caneta-alta) 22%, transparent);
}
input[type=range]::-moz-range-thumb { background: var(--caneta-alta); border-color: var(--caneta-alta); }
.barra > i { background: linear-gradient(color-mix(in srgb, var(--grafite) 70%, #FFFFFF), var(--grafite)); }
/* A segunda regra do `.barra.favor` saiu em 24/09. Existiam DUAS para o mesmo
seletor, esta bem depois da outra, e por isso a primeira nunca valia: trocar a
cor lá em cima não mudava nada na tela, e levei uma medição no navegador para
descobrir. Quem manda agora é a regra única, com a razão escrita, lá em cima. */
a.linha-achado:hover { background: color-mix(in srgb, var(--tinta) 4%, transparent); }
.trilho-origem.seu { background: linear-gradient(90deg, var(--teal-tenue), transparent 70%); }
.lampada { border-color: var(--filete-forte); }
/* a tela de entrar: o painel da marca vira a tinta espresso da home */
.entrada-lado { background: var(--rampa-campo); }
.entrada-lado .marca-escura, .entrada-lado h2 { color: #FFFFFF; }
.entrada-lado p, .entrada-lado .selo-privacidade { color: var(--ntexto2); }
.entrada-form { position: relative; }
/* o fundo animado azul sai: a home é papel quieto com uma grade leve */
.fundo-vivo {
background:
radial-gradient(color-mix(in srgb, var(--tinta) 6%, transparent) 1px, transparent 1px) 0 0 / 22px 22px,
var(--papel);
}
.fundo-vivo > i { display: none; }
/* o seletor de tema, igual ao da home: pílula com a bola âmbar que desliza */
.tema-alterna {
width: 52px; height: 30px; border-radius: 999px; flex-shrink: 0;
border: 1px solid var(--filete-forte); background: var(--papel-baixo);
position: relative; z-index: 1; cursor: pointer; padding: 0;
}
/* **O DESENHO FICA, O ALVO CRESCE.** O alternador tem 30px de altura e a tabela
*Forma* do DESIGN.md manda 44px em tudo que se toca. Aumentar o interruptor mudaria
a barra do topo de todas as telas; a área invisível resolve sem mexer no desenho. É
a mesma técnica das setas do carrossel e do "Voltar" da trilha. */
.tema-alterna::after {
/* 8px e não 7 de cada lado: 7 daria exatamente os 44px, e a conferência mede o toque
na borda com `elementFromPoint`, onde o pixel exato do limite às vezes cai fora. */
content: ''; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px;
}
.tema-alterna .bola {
position: absolute; top: 2px; left: 2px; width: 24px; height: 24px;
border-radius: 999px; background: var(--caneta-alta); color: var(--sobre-botao);
display: grid; place-items: center;
transition: transform 250ms var(--curva);
}
html[data-tema="escuro"] .tema-alterna .bola { transform: translateX(22px); }
.tema-alterna svg { width: 13px; height: 13px; }
.tema-alterna .lua { display: none; }
html[data-tema="escuro"] .tema-alterna .sol { display: none; }
html[data-tema="escuro"] .tema-alterna .lua { display: block; }
.entrada-form > .tema-alterna { position: absolute; top: 18px; right: 18px; }
@media (prefers-reduced-motion: reduce) {
.tema-alterna .bola, .btn { transition: none; }
.btn:hover { transform: none; }
}
/* As cores dos gráficos, por tema. Os dois módulos de gráfico leem daqui e não têm
cor própria. Conferidas contra o fundo de cada tema: rótulo e eixo passam de 4,5
para 1, e o texto sobre fatia usa --graf-sobre, branco no claro, onde as fatias
são escuras, e escuro no escuro, onde as fatias são claras. */
/* O claro saiu daqui: mora na raiz, no alto do arquivo, saindo da paleta da
casa por `var()`. Duas definições da mesma cor é como a identidade diverge
sem ninguém notar. Aqui fica só o que o escuro precisa mudar. */
html[data-tema="escuro"] {
--graf-tinta: var(--tinta);
--graf-caneta: #7FA0F2;
--graf-caneta-clara: var(--caneta-clara);
--graf-sai: var(--coral);
--graf-volta: #E3C39D;
--graf-total: #7FA0F2;
--graf-fraco: color-mix(in srgb, #7FA0F2 35%, var(--papel-alto));
--graf-grade: #1E3050;
--graf-eixo: var(--grafite);
--graf-trilho: #35455F;
--graf-papel: var(--papel-alto);
/* texto sobre fatia: no escuro as fatias são claras, então a tinta escurece */
--graf-sobre: #0A1526;
--graf-balao: var(--tinta);
--graf-balao-texto: var(--papel);
}
/* ===========================================================================
A janela da simulação ótima.
Fundo desfocado e uma folha no tema livro-razão, como o Bianchi desenhou. A
janela é um