/* =========================================================================== PALETA, ESCALAS E OS PEDAÇOS — a fonte única da aparência do site =========================================================================== ⚠️ ESTE É O ÚNICO ARQUIVO ONDE SE ESCREVE COR. Cor nova fora daqui é defeito, e há teste varrendo (`TestUmaPaletaSo`). O motivo é o `SITE.md` §1-bis: se cada tela inventar o próprio tom de azul, o site fica parecendo cinco sites — família 14 aplicada à aparência, e nenhum acabamento no fim conserta. E é o que responde à pergunta que o dono fez em 31/07/2026 — *"se eu mudar de opinião dá para alterar depois né?"*. Dá: a cor mora num lugar só. --------------------------------------------------------------------------- DE ONDE ISTO VEIO — e não foi de gosto Fase 0 (`PESQUISA_VISUAL.md`): 16 casos estudados, 5 famílias, e a descoberta que se repetiu em todos — **quem ganha o cliente é quem recusa mostrar tudo**. Saíram dali 15 regras conferíveis; as marcadas com R abaixo são elas. Fase 1: três calibragens com os números reais dele. Escolha do dono — *"gostei da primeira opção"*: **C1 · azul contido**, da família "o direto brasileiro" (Nubank + Monzo + Wise). Fase 2: as quatro telas desenhadas e aprovadas — *"pra mim está tudo perfeito"*. Este arquivo é aquele desenho EXTRAÍDO, não recriado. =========================================================================== */ /* =========================================================================== AS FONTES — vendorizadas, nunca de CDN =========================================================================== Escolha do dono em 14/08/2026, vendo as duas duplas aplicadas na tela inicial INTEIRA no Claude Design: *"vamos com a dupla a"*. ⚠️ **Os arquivos moram em `static/fontes/`, como o `htmx.min.js`** — regra 3 do site. Fonte por CDN é dependência externa no caminho da PRIMEIRA tela: o serviço cai ou é bloqueado e o site abre com a fonte errada, num produto que é vendido pela aparência. ⚠️ **São DUAS famílias com PAPÉIS**, e a R17 da `PESQUISA_VISUAL_2.md` nasceu corrigida por medição: o que faz um site parecer feito por IA não é usar a Inter (o Copilot Money pareia Jokker com Inter e é dos mais bem acabados) — é **uma sans só, nos pesos padrão, sem par**. ⚠️ **`font-display: swap`**: o texto aparece na hora com a fonte de sistema e troca quando a nossa chega. O contrário (`block`) deixa a tela em branco esperando — e a primeira tela é onde 75% desistem. As licenças OFL 1.1 acompanham os arquivos, como elas exigem. */ @font-face { font-family: "Bricolage Grotesque"; src: url("/estatico/fontes/bricolage-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* O peso leve existe para UMA coisa: a metade fraca da wordmark (o corte de peso que o dono escolheu). Não é usado em texto — o corpo é do sistema. */ @font-face { font-family: "Bricolage Grotesque"; src: url("/estatico/fontes/bricolage-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("/estatico/fontes/jetbrains-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("/estatico/fontes/jetbrains-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root { /* --- ESCALA DE TEXTO: quatro tamanhos, e só --------------------------- Mais que quatro vira "quase igual" e o olho perde a hierarquia. ⚠️ A MANCHETE RECUOU de 2.6rem para 2rem em 14/08/2026, e não foi gosto: a `PESQUISA_VISUAL_2.md` mediu o maior número do autoplanilha em **30px** contra os nossos 41,6px. A hierarquia deles vem de PESO e COR DE TINTA, não de tamanho — e a tela deles é a que o dono chamou de bonita. Número gigante não é o que faz parecer profissional; é o que faz parecer cartaz. */ --texto-manchete: 2rem; /* o número que importa: LUCRO */ --texto-titulo: 1.0625rem; /* título de cartão, cabeçalho de tela */ --texto-corpo: 0.9375rem; /* a tabela, o texto normal */ --texto-apoio: 0.8125rem; /* rótulo, legenda, unidade */ /* --- PESO: o que substitui o tamanho na hierarquia -------------------- Medido em Polaris, Linear e Vercel: a diferença entre um rótulo e um número não precisa ser de corpo, pode ser de peso. Se um dia a fonte for variável, estes viram 550/650 (os três medidos fogem dos pesos redondos de propósito). */ --peso-normal: 500; /* o que RECUA: aba inativa, rótulo de apoio */ --peso-medio: 600; --peso-forte: 700; /* --- ESCALA DE ESPAÇO: 4 · 8 · 16 · 24 · 32 -------------------------- Nada de "margem de 13px porque ficou melhor". */ --espaco-1: 4px; --espaco-2: 8px; --espaco-3: 16px; --espaco-4: 24px; --espaco-5: 32px; /* --- Forma ----------------------------------------------------------- ⚠️ 14px, e isto é FIDELIDADE À DIREÇÃO, não gosto. A família C (a do Nubank), que o dono escolheu na Fase 0, promete por escrito **"cantos mais arredondados"** — e o site tinha 8px, que é canto comum. O desvio não veio do desenho para o código: o desenho da Fase 2 também tinha 8px. Veio da FAMÍLIA para a CALIBRAGEM C1, na Fase 1, e ninguém conferiu — a "direção visual" existia em dois lugares (a descrição e os valores) sem nada garantindo que concordassem. Família 14 aplicada à aparência. Ele achou olhando: *"não me parece uma aba da Nubank"*. Ver `AUDITORIA.md`, §"O DESIGN É ESCOPO". */ --raio: 14px; --raio-menor: 10px; /* ⚠️ R28 — o raio virou ESCALA POR PAPEL em 14/08/2026. Os quatro sistemas de token medidos (Primer, Carbon, Polaris, Spectrum) e os dois de craft (Linear, Vercel) concordam na FORMA: pequeno para etiqueta e chip, padrão para cartão, um absurdo para pílula. O que eles NÃO fazem é usar o mesmo raio em tudo — é o sinal de "feito por IA" que a `PESQUISA_VISUAL_2.md` §2 registra. */ --raio-pequeno: 6px; /* etiqueta, chip, campo pequeno */ --raio-pilula: 999px; /* o que era número solto em 6 lugares */ --alvo: 44px; /* R10 — alvo de toque; botão pequeno erra com o polegar */ --largura-max: 1120px; /* --- MOTION: nomeado por PAPEL, nunca por número solto ---------------- ⚠️ Primer, Carbon e Polaris concordam numa coisa que parecia detalhe: easing precisa ter NOME e regra de quando usar. E os três fazem a MESMA distinção — entrar ≠ sair ≠ mover —, com curvas diferentes para cada uma. As curvas abaixo são as do Primer. ⚠️ E o teto é trava de produto, escrito no token deles: *"NEVER exceed 500ms for UI interactions"*. Há vigia. */ --tempo-toque: .10s; --curva-toque: ease; --tempo-hover: .14s; --curva-hover: ease; --tempo-entrar: .18s; --curva-entrar: cubic-bezier(.3, .8, .6, 1); --tempo-sair: .14s; --curva-sair: cubic-bezier(.7, .1, .75, .9); --tempo-mover: .20s; --curva-mover: cubic-bezier(.6, 0, .2, 1); /* ⚠️ O CORPO CONTINUA NA FONTE DO SISTEMA, e isso é decisão, não esquecimento: é a mais rápida (já está na máquina), é a que a pessoa lê o dia inteiro, e texto longo em display cansa. A display entra só onde a MARCA fala. */ --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* A display: wordmark, manchete e título de seção. Nada mais. */ --fonte-display: "Bricolage Grotesque", var(--fonte); /* R5 — número de dinheiro em largura fixa: só assim a vírgula alinha. Os monos de sistema ficam de reserva para o instante antes de a nossa carregar (e para quem bloquear fonte externa). */ --fonte-numero: "JetBrains Mono", "SF Mono", "Cascadia Mono", "Segoe UI Mono", Consolas, "Roboto Mono", monospace; } /* =========================================================================== AS CORES =========================================================================== ⚠️ A cor de AÇÃO nunca é verde nem vermelha, e isso é estrutural: essas duas são SINAL neste produto (lucro e prejuízo). Uma marca verde brigaria com o verde do lucro na mesma tela — R3, "cor só comunica estado". */ :root, :root[data-tema="claro"] { --fundo: #f4f6f9; --cartao: #ffffff; --suave: #eceff4; --borda: #e2e6ee; --tinta: #12161d; /* texto principal */ --tinta-media: #4d5666; /* texto secundário */ --tinta-fraca: #798394; /* rótulo, apoio */ --marca: #1D63D8; --marca-suave: #eaf1ff; /* ⚠️ O TEXTO QUE SENTA EM CIMA DA MARCA — achado A4 da 11ª auditoria (02/08/2026). O botão pintava `#fff` nos DOIS temas: no claro dá 5,4:1 (bom), no escuro `#fff` sobre `#5A9BFF` dá 2,8:1 — abaixo do piso de 4,5:1 da WCAG. E é o botão **Autorizar**, no tema que o público de aposta mais usa. */ --sobre-marca: #ffffff; /* 5,4:1 sobre a marca clara */ --lucro: #0e7a55; --perda: #c5372c; /* ⚠️ o "prejuízo em vermelho" do uso real */ --atencao: #92670a; /* retido, esperando você */ --atencao-suave: #fff6e0; /* A superfície ELEVADA (menu aberto, popover). No claro ela é o branco do cartão com uma sombra maior; no escuro, uma camada mais CLARA — sombra não funciona sobre fundo escuro (R8). */ --elevado: #ffffff; /* ⚠️ AS SOMBRAS, refeitas em 14/08/2026 — e é a mudança de acabamento mais barata que a `PESQUISA_VISUAL_2.md` achou. Oito produtos medidos (Primer, Polaris, Linear, Vercel, Mercury, Ramp, Monzo, Stripe) usam sombra COMPOSTA, e três coisas separam a delas da nossa antiga: 1. UMA CAMADA DE CONTATO (offset e blur pequenos) mais UMA DE AMBIENTE (blur grande) — a antiga tinha as duas, mas sem o item 2. 2. SPREAD NEGATIVO no ambiente (`-8px`, `-18px`): puxa a sombra para dentro, então ela não vaza pelos lados. É o que separa profundidade de borrão. 3. PRETO MATIZADO (`16,24,40` — azulado), nunca cinza puro: sombra neutra sobre fundo levemente frio parece sujeira. E são TRÊS NÍVEIS POR PAPEL, não "sombra maior = mais importante" — a regra que o Primer embute no próprio token. */ --sombra-1: 0 1px 2px -1px rgba(16, 24, 40, .06), 0 1px 3px 0 rgba(16, 24, 40, .05); /* cartão, quadro */ --sombra-2: 0 2px 4px -2px rgba(16, 24, 40, .06), 0 8px 24px -8px rgba(16, 24, 40, .14); /* menu, popover */ --sombra-3: 0 4px 8px -4px rgba(16, 24, 40, .08), 0 24px 56px -18px rgba(16, 24, 40, .20); /* modal, arrasto */ /* R18 — o estado do botão é COR, nunca `filter: brightness()`. Filtro é o atalho de quem não escolheu a cor do estado: ele clareia tudo junto (inclusive o texto) e muda de efeito conforme o tema. */ --marca-forte: #1854B8; } /* ⚠️ R7 — o escuro NÃO usa preto nem branco puros. `#000` com `#fff` cansa a vista, faz o texto "vibrar" e é pior para quem tem dislexia ou astigmatismo. E a profundidade vem de SUPERFÍCIE MAIS CLARA, não de sombra (R8): sombra não funciona sobre fundo escuro. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --fundo: #0e1218; --cartao: #171d26; --suave: #222a36; --borda: #28313f; --tinta: #e9edf4; --tinta-media: #a6b1c2; --tinta-fraca: #7d879a; --marca: #5A9BFF; --marca-suave: #17233a; --sobre-marca: #0e1218; /* 6,8:1 — ver o bloco claro */ --lucro: #3ad698; --perda: #ff6f61; --atencao: #f2b93c; --atencao-suave: #2a2109; /* No escuro a elevação vem de SUPERFÍCIE MAIS CLARA, não de sombra. */ --elevado: #1e2632; /* ⚠️ No escuro a R8 continua valendo para o CARTÃO: a profundidade vem de superfície mais clara, não de sombra. Mas a medição do autoplanilha mostrou que ele usa AS DUAS — superfície E sombra — no que realmente flutua. Então: nível 1 sem sombra (é superfície), níveis 2 e 3 com, porque menu e modal pairam sobre a tela. */ --sombra-1: none; --sombra-2: 0 8px 24px -8px rgba(0, 0, 0, .55); --sombra-3: 0 24px 56px -18px rgba(0, 0, 0, .70); --marca-forte: #7FB0FF; } } /* A chave do topo força o tema, vencendo o aparelho. */ :root[data-tema="escuro"] { --fundo: #0e1218; --cartao: #171d26; --suave: #222a36; --borda: #28313f; --tinta: #e9edf4; --tinta-media: #a6b1c2; --tinta-fraca: #7d879a; --marca: #5A9BFF; --marca-suave: #17233a; --sobre-marca: #0e1218; /* 6,8:1 — ver o bloco claro */ --lucro: #3ad698; --perda: #ff6f61; --atencao: #f2b93c; --atencao-suave: #2a2109; --elevado: #1e2632; /* O mesmo do bloco acima — a chave do topo vence o aparelho. */ --sombra-1: none; --sombra-2: 0 8px 24px -8px rgba(0, 0, 0, .55); --sombra-3: 0 24px 56px -18px rgba(0, 0, 0, .70); --marca-forte: #7FB0FF; } /* =========================================================================== O CHÃO =========================================================================== */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--fundo); color: var(--tinta); font-family: var(--fonte); font-size: var(--texto-corpo); line-height: 1.5; /* Espaço embaixo para a barra do celular não cobrir conteúdo. */ padding-bottom: calc(var(--alvo) + var(--espaco-5)); } @media (min-width: 760px) { body { padding-bottom: var(--espaco-5); } } a { color: var(--marca); } /* Foco VISÍVEL: quem navega por teclado precisa saber onde está. Apagar o contorno é o defeito de acessibilidade mais comum que existe. */ :focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: var(--raio-menor); } /* Respeita quem pediu menos animação no sistema. */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } .pagina { max-width: var(--largura-max); margin: 0 auto; padding: var(--espaco-4) var(--espaco-3); } .estreita { max-width: 560px; } /* =========================================================================== NAVEGAÇÃO — em cima no PC, EMBAIXO no celular =========================================================================== R10: 49% das pessoas usam o celular com uma mão, e o polegar vive na metade de baixo. É a decisão que o Bet-Analytix tomou e vale imitar — a decisão, não o desenho. ⚠️ R4: a navegação RECUA. Ela é mais apagada que o conteúdo, porque *"orientação e navegação devem recuar"* — a lição do Linear. */ .topo { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--espaco-3); padding: var(--espaco-2) var(--espaco-3); background: var(--cartao); border-bottom: 1px solid var(--borda); } .topo .marca-nome { /* A wordmark é o primeiro lugar onde a marca fala — e era `` de texto de sistema até 14/08/2026, um dos motivos da cara de improviso (R22: identidade de navegador). ⚠️ O CORTE DE PESO: a palavra é UMA, na MESMA tinta; o que a divide é a espessura. O `` aqui não é "negrito de ênfase" — é metade de uma marca. Por isso a cor não muda entre as duas partes: cor é reservada a estado (R3), e marca colorida no meio do nome brigaria com o verde do lucro. O caso inteiro está no `base.html`, junto do texto. */ font-family: var(--fonte-display); font-weight: 400; font-size: var(--texto-titulo); letter-spacing: -0.01em; color: var(--tinta); } .topo .marca-nome b { font-weight: var(--peso-forte); letter-spacing: -0.03em; } .topo .crescer { flex: 1; } .abas { display: none; gap: var(--espaco-1); } .aba { display: inline-flex; align-items: center; gap: var(--espaco-2); min-height: var(--alvo); padding: 0 var(--espaco-3); border-radius: var(--raio-menor); /* Os inativos RECUAM (R4): tinta fraca e peso normal. Quem está apagado é a maioria; quem está aceso é um. */ color: var(--tinta-fraca); text-decoration: none; font-weight: var(--peso-normal); } /* ⚠️ `:active` JUNTO do `:hover`, e o motivo é o critério 2: **o hover não existe no celular**. Sem isto, tocar numa aba da barra de baixo dava resposta NENHUMA até a página trocar — e a Tela A leva 0,31 s, três vezes o orçamento de 100 ms. O dedo tem de saber que o toque pegou, mesmo que o servidor demore. */ .aba:hover, .aba:active { background: var(--suave); color: var(--tinta); } /* ⚠️ A ABA ATIVA — FUSÃO DE SUPERFÍCIE. Escolha do dono em 14/08/2026, vendo as três candidatas medidas no Claude Design: *"b"*. O mecanismo é do Vercel: o item ativo recebe **o fundo da PÁGINA**, não uma cor de marca. Ele deixa de parecer um botão aceso e passa a parecer um recorte na barra, colado no conteúdo que vem embaixo — uma *aba* de verdade, como numa pasta. ⚠️ **E aqui morreu uma regra que EU tinha escrito errado.** A v1 do `PLANO_REDESENHO.md` mandava *"indicador fino, NUNCA pílula"*. A `PESQUISA_VISUAL_2.md` §2 mediu quatro sistemas e derrubou: nenhum usa cor de marca CHEIA, mas dois usam fundo suave — que era o que a nossa aba já fazia. O mecanismo nunca foi o problema; era a QUANTIDADE DE TINTA. A régua que ficou (R20) é medível: o fundo do item ativo tem de ter contraste ≤ 1.5:1 contra a barra. ⚠️ A sombra de contato só aparece no claro — no escuro `--sombra-1` é `none` por decisão da R8 (profundidade vem de superfície). Ali quem faz o recorte é a diferença entre `--fundo` e `--cartao`, que basta. */ .aba[aria-current="page"] { background: var(--fundo); color: var(--tinta); font-weight: var(--peso-medio); box-shadow: var(--sombra-1); } .barra-inferior { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; background: var(--cartao); border-top: 1px solid var(--borda); padding-bottom: env(safe-area-inset-bottom); } /* ⚠️ NO CELULAR É ÍCONE + RÓTULO, e isso não foi escolha — foi medição. R21 da `PESQUISA_VISUAL_2.md`, vista no Bet-Analytix e no Pikkit e mandada pelo Apple HIG e pelo Material 3. Texto solto numa barra de baixo parece link de rodapé; com o desenho em cima, o polegar acha por FORMA, sem ler — que é o ponto de uma barra que se usa vinte vezes por dia. ⚠️ E no PC o ícone NÃO entra: lá a navegação recua (R4), e desenho a mais numa barra que já tem cinco palavras é ruído. Um macro, dois comportamentos — `com_icone` no `base.html`. */ .barra-inferior .aba { flex: 1; flex-direction: column; gap: 2px; justify-content: center; min-height: 54px; padding: var(--espaco-1) 0; font-size: var(--texto-apoio); border-radius: 0; } .barra-inferior .aba .icone { width: 20px; height: 20px; flex: none; } /* ⚠️ Embaixo a fusão de superfície NÃO funciona — a barra do celular encosta no conteúdo por baixo, não por cima, e um recorte ali não se lê. Aqui o ativo se marca por TINTA e PESO, que é a candidata A aplicada onde ela é a certa. O mecanismo muda; a régua (R20: sem fundo saturado de marca) continua valendo nos dois. */ .barra-inferior .aba[aria-current="page"] { background: none; box-shadow: none; color: var(--marca); font-weight: var(--peso-medio); } @media (min-width: 760px) { .abas { display: flex; } .barra-inferior { display: none; } } /* =========================================================================== OS PEDAÇOS QUE SE REPETEM — um botão, um cartão, uma tabela, uma etiqueta =========================================================================== Reusados, nunca recriados. Se uma tela precisar de outra coisa, ela nasce AQUI, com nome, e passa a existir para todas. */ /* --- BOTÃO ------------------------------------------------------------- */ .botao { display: inline-flex; align-items: center; justify-content: center; gap: var(--espaco-2); min-height: var(--alvo); padding: 0 var(--espaco-4); border: 1px solid transparent; /* O botão usa o raio CHEIO: é a peça que mais aparece, e é nela que o "cantos mais arredondados" da família se lê primeiro. */ border-radius: var(--raio); background: var(--marca); /* ⚠️ Nunca `#fff` cru aqui: no escuro o azul clareia e o branco deixa de ser legível (2,8:1). A variável muda com o tema. */ color: var(--sobre-marca); font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; transition: background var(--tempo-hover) var(--curva-hover), transform var(--tempo-toque) var(--curva-toque); } .botao:hover { background: var(--marca-forte); } /* ⚠️ R9 — resposta em menos de 100 ms. O dedo recebe retorno ANTES de o servidor responder: é o que separa "rápido" de "travado". */ .botao:active { transform: translateY(1px); } .botao.secundario { background: var(--cartao); color: var(--tinta); border-color: var(--borda); } .botao.discreto { background: transparent; color: var(--tinta-media); padding: 0 var(--espaco-3); } .botao.discreto:hover { background: var(--suave); color: var(--tinta); } .botao.ganhou { background: var(--lucro); } .botao.perdeu { background: var(--perda); } /* O botão que o polegar acerta (Tela C: "Ganhou" e "Perdeu"). */ .botao.grande { min-height: 60px; font-size: 1.125rem; width: 100%; } .botao:disabled { opacity: .5; cursor: not-allowed; } /* --- CARTÃO ------------------------------------------------------------ */ .cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: var(--espaco-4); box-shadow: var(--sombra-1); } .cartao + .cartao { margin-top: var(--espaco-3); } .cartao > .titulo { margin: 0 0 var(--espaco-3); font-size: var(--texto-titulo); font-weight: 700; } /* --- O NÚMERO QUE IMPORTA ---------------------------------------------- */ /* ⚠️ O peso do dinheiro: o número que importa é o MAIOR da tela, e o resto recua. É a capa do Excel, que nasceu de uso real. */ .manchete { /* ⚠️ A MANCHETE FICA NO MONO, de propósito — não é esquecimento da display. Ela é um NÚMERO DE DINHEIRO, e número de dinheiro precisa de largura fixa: é o que faz a vírgula ficar no mesmo lugar quando o valor muda de R$ 998,00 para R$ 1.002,00. A display entra no que é PALAVRA (wordmark, título de seção); o mono, no que é ALGARISMO. R5 vale aqui mais do que em qualquer outro lugar da tela. */ font-family: var(--fonte-numero); font-variant-numeric: tabular-nums; font-size: var(--texto-manchete); font-weight: var(--peso-forte); /* Negativo crescendo com o tamanho — Polaris, Linear e Vercel medidos. */ letter-spacing: -0.035em; line-height: 1.1; margin: var(--espaco-2) 0 0; } .rotulo { display: block; color: var(--tinta-fraca); font-size: var(--texto-apoio); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; } /* A manchete respira e o rótulo dela recua — o dinheiro é o assunto. */ .capa-topo { padding: var(--espaco-2) 0 var(--espaco-1); } /* ⚠️ R6 — a cor NUNCA é o único sinal. 8% dos homens não separam vermelho de verde, então todo número de dinheiro leva o `+`/`−` junto (ver `dominio/dinheiro.py`). O vermelho fica; sozinho, não. */ .lucro { color: var(--lucro); } .perda { color: var(--perda); } .retido { color: var(--atencao); } .numero { font-family: var(--fonte-numero); font-variant-numeric: tabular-nums; } /* --- TABELA ------------------------------------------------------------ */ /* O Stripe, padrão-ouro de painel de dinheiro, é TABELA e não gráfico. */ .rolagem { overflow-x: auto; } .quadro { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-1); overflow: hidden; } table.tabela { width: 100%; border-collapse: collapse; } table.tabela th { text-align: left; padding: var(--espaco-2) var(--espaco-3); color: var(--tinta-fraca); font-size: var(--texto-apoio); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--borda); white-space: nowrap; } table.tabela td { /* ⚠️ Era `12px 14px` — dois valores que NÃO existem na escala 4·8·16·24·32 que o `SITE.md` §1-bis manda seguir ("nada de margem de 13px porque ficou melhor"). Fui eu que os escrevi, e há vigia agora. E o espaço maior serve à "clareza imediata" que a família C promete. */ padding: var(--espaco-3); border-bottom: 1px solid var(--borda); vertical-align: middle; } /* ⚠️ A LINHA É ALVO DE CLIQUE — ela abre o detalhe da aposta —, e o dedo NÃO TEM HOVER. Achado nº 5 da 12ª auditoria (03/08/2026): o conserto do dia anterior enumerou abas, pílulas, menus e a chave de tema e afirmou "agora em TODOS os alvos"; a linha ficou de fora, e tocar nela não dava resposta nenhuma até a página trocar (~0,3 s). Mesma aparência do hover, de propósito: no toque não há hover, então o dedo ganha exatamente o retorno que o mouse já tinha, sem linguagem visual nova. */ table.tabela tbody tr:hover, table.tabela tbody tr:active { background: var(--suave); } table.tabela tbody tr:last-child td { border-bottom: none; } /* ⚠️ R5 — dinheiro à DIREITA, em fonte tabular. Lê-se número comparando casa por casa; alinhado à esquerda, 7,00 e 1.234,00 não se comparam. */ table.tabela .dinheiro, table.tabela .odd { text-align: right; font-family: var(--fonte-numero); font-variant-numeric: tabular-nums; white-space: nowrap; } .evento { font-weight: 600; } .oque { color: var(--tinta-media); font-size: var(--texto-apoio); } .quem { color: var(--tinta-media); white-space: nowrap; } /* --- ETIQUETA ---------------------------------------------------------- */ .etiqueta { display: inline-flex; align-items: center; gap: var(--espaco-1); padding: var(--espaco-1) var(--espaco-2); border-radius: var(--raio-pilula); font-size: var(--texto-apoio); font-weight: 700; white-space: nowrap; background: var(--suave); color: var(--tinta-media); } .etiqueta.ganhou { background: color-mix(in srgb, var(--lucro) 14%, transparent); color: var(--lucro); } .etiqueta.perdeu { background: color-mix(in srgb, var(--perda) 14%, transparent); color: var(--perda); } .etiqueta.suspeita { background: var(--atencao-suave); color: var(--atencao); } /* --- FILTRO (pílula) ---------------------------------------------------- */ .filtros { display: flex; flex-wrap: wrap; gap: var(--espaco-2); align-items: center; } .filtro { min-height: 38px; display: inline-flex; align-items: center; gap: var(--espaco-2); padding: 0 var(--espaco-3); border: 1px solid var(--borda); background: var(--cartao); color: var(--tinta-media); border-radius: var(--raio-pilula); font: inherit; font-size: var(--texto-apoio); font-weight: 600; cursor: pointer; transition: background var(--tempo-hover) var(--curva-hover), border-color var(--tempo-hover) var(--curva-hover), color var(--tempo-hover) var(--curva-hover); } .filtro:hover, .filtro:active { border-color: var(--tinta-fraca); color: var(--tinta); } .filtro[aria-pressed="true"] { background: var(--marca-suave); color: var(--marca); border-color: transparent; } .filtro[aria-pressed="true"]:hover { border-color: var(--marca); } a.filtro { text-decoration: none; } /* --- O MENU — nosso do primeiro pixel ao último ------------------------- ⚠️ Aqui morreu o `` é desenhado pelo sistema operacional, com a fonte, o azul e a barra de rolagem dele. Nenhum CSS alcança aquilo, e um widget do Windows no meio de uma tela escura denuncia a tela inteira. `
`/`` é HTML padrão: abre e fecha sozinho, anda com o teclado, funciona SEM JavaScript — e é nosso do primeiro pixel ao último. */ .menu { position: relative; } .menu > summary { list-style: none; min-height: 38px; display: inline-flex; align-items: center; gap: var(--espaco-2); padding: 0 var(--espaco-3); border: 1px solid var(--borda); background: var(--cartao); color: var(--tinta-media); border-radius: var(--raio-pilula); font-size: var(--texto-apoio); font-weight: 600; cursor: pointer; user-select: none; transition: background var(--tempo-hover) var(--curva-hover), border-color var(--tempo-hover) var(--curva-hover), color var(--tempo-hover) var(--curva-hover); } .menu > summary::-webkit-details-marker { display: none; } .menu > summary:hover, .menu > summary:active { border-color: var(--tinta-fraca); color: var(--tinta); } .menu > summary::after { content: ""; width: 0; height: 0; margin-left: var(--espaco-1); border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform var(--tempo-mover) var(--curva-mover); } .menu[open] > summary { background: var(--marca-suave); color: var(--marca); border-color: transparent; } .menu[open] > summary::after { transform: rotate(180deg); } /* A lista: uma SUPERFÍCIE ELEVADA — é o que dá profundidade sem sombra pesada. No escuro a elevação vem da superfície mais clara (R8). */ .menu .opcoes { position: absolute; z-index: 30; top: calc(100% + var(--espaco-1)); left: 0; min-width: 220px; max-height: 320px; overflow-y: auto; padding: var(--espaco-1); background: var(--elevado); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-2); animation: menu-entra .12s ease; } @keyframes menu-entra { from { opacity: 0; transform: translateY(-4px); } } .menu .opcoes button, .menu .opcoes a { display: block; width: 100%; text-align: left; padding: var(--espaco-2) var(--espaco-3); border: none; border-radius: var(--raio-menor); background: none; color: var(--tinta); font: inherit; font-size: var(--texto-corpo); text-decoration: none; cursor: pointer; white-space: nowrap; } .menu .opcoes button:hover, .menu .opcoes button:active, .menu .opcoes a:hover, .menu .opcoes a:active { background: var(--suave); } .menu .opcoes .vazio-menu { padding: var(--espaco-3); color: var(--tinta-fraca); font-size: var(--texto-apoio); } /* No celular o menu ocupa a largura da tela em vez de escapar pela borda — e o alvo cresce para os 44px da régua (R10), porque ali quem aponta é o polegar. No PC, onde o ponteiro é preciso, 38px mantém a barra discreta: a navegação RECUA (R4). */ @media (max-width: 480px) { .menu .opcoes { left: 0; right: 0; min-width: 0; } } @media (pointer: coarse) { .filtro, .menu > summary { min-height: var(--alvo); } .menu .opcoes button, .menu .opcoes a { padding: var(--espaco-3); } /* ⚠️ A chave de tema tinha ficado de FORA: nasceu com 36px e nada a fazia crescer no dedo, enquanto as vizinhas cresciam aqui. Achado ao rodar a lista de acabamento tela a tela (02/08/2026), critério 1. No PC os 36px são deliberados — o ponteiro é preciso e a barra do topo RECUA (R4). No polegar não há ponteiro preciso. */ .trio button { min-height: var(--alvo); } } /* --- O AVISO DE VERSÃO VELHA ------------------------------------------- ⚠️ Só aparece enquanto o produto está sendo construído: num produto instalado os arquivos não mudam sozinhos. Usa a cor de ATENÇÃO, não a de erro — não há nada errado, só desatualizado. */ .aviso-versao { padding: var(--espaco-2) var(--espaco-3); background: var(--atencao-suave); color: var(--atencao); font-size: var(--texto-apoio); font-weight: 600; text-align: center; } /* --- A FAIXA DA CÓPIA DE TESTE ------------------------------------------ ⚠️ Limpeza 6, a outra metade do achado nº 1 da 10ª auditoria: as duas janelas (banco real e cópia) eram idênticas na tela, e marcar resultado na errada custa o mesmo que o servidor ter entregado o banco errado. MESMA cor de atenção do aviso de versão, de propósito: são os dois avisos de "olhe onde você está", e dois amarelos diferentes seriam duas linguagens para a mesma coisa. */ .aviso-copia { padding: var(--espaco-2) var(--espaco-3); background: var(--atencao-suave); color: var(--atencao); font-size: var(--texto-apoio); font-weight: 600; text-align: center; } /* --- A LINHA DO RETIDO -------------------------------------------------- */ /* Ao LADO do lucro, nunca escondida: "62 apostas FORA das contas acima". */ .retido-linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-2) var(--espaco-3); margin-top: var(--espaco-3); padding: var(--espaco-3); background: var(--atencao-suave); border-radius: var(--raio); color: var(--atencao); font-weight: 600; } .retido-linha a { color: inherit; margin-left: auto; } /* --- O CARTÃO DE MARCAR (Tela C) ---------------------------------------- Extraído do desenho aprovado na Fase 2 (telas/resultados.html) — extrair, não recriar. A cabeça leva o "N de M" e o desfazer; a dupla é a grade dos botões; a conta é a linha do dinheiro do bilhete. */ .cabeca { display: flex; align-items: center; color: var(--tinta-fraca); font-size: var(--texto-apoio); font-weight: 700; margin-bottom: var(--espaco-2); } /* O desfazer é um BOTÃO vestido de link: sempre visível, e com o alvo de 44px (R10) mesmo parecendo pequeno — o polegar precisa acertá-lo. */ .cabeca .desfazer { margin-left: auto; min-height: var(--alvo); padding: 0 var(--espaco-2); background: none; border: none; color: var(--marca); font: inherit; font-weight: 700; cursor: pointer; } .cabeca .desfazer:disabled { color: var(--tinta-fraca); cursor: default; opacity: .6; } .dupla { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espaco-2); margin-top: var(--espaco-4); } .conta { font-family: var(--fonte-numero); font-variant-numeric: tabular-nums; font-size: var(--texto-titulo); margin: var(--espaco-3) 0 0; padding: var(--espaco-3); background: var(--suave); border-radius: var(--raio-menor); } /* No cartão a linha "data · casa · tipster" pode ser longa (tipster de canal tem assinatura de trinta letras) e não há rolagem como na tabela: quebra a linha em vez de estourar os 360px — o "inegociável" do dono. */ .cartao .quem { white-space: normal; } /* --- O MOTIVO / RECADO -------------------------------------------------- O aviso âmbar: o motivo da suspeita (com o mesmo ⚠ do terminal) e a recusa educada (cashout sem valor). A Tela D usa o mesmo pedaço. */ .motivo { padding: var(--espaco-3); background: var(--atencao-suave); color: var(--atencao); border-radius: var(--raio); font-weight: 600; } /* --- CAMPO DE FORMULÁRIO ------------------------------------------------ Nasce aqui (o valor do cashout) e a Tela D reusa nos campos corrigíveis. */ .campo { display: block; } .campo span { display: block; color: var(--tinta-fraca); font-size: var(--texto-apoio); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--espaco-1); } .campo input { width: 100%; min-height: var(--alvo); padding: 0 var(--espaco-3); font: inherit; font-family: var(--fonte-numero); border: 1px solid var(--borda); border-radius: var(--raio-menor); background: var(--fundo); color: var(--tinta); } /* --- ESCOLHA (rádio vestido de botão) ----------------------------------- As quatro opções do "Outro…" são rádios de verdade — acessíveis e sem JavaScript —, vestidos com o mesmo botão secundário de sempre. O rádio fica invisível mas presente; o foco do teclado continua visível (é a regra do :focus-visible lá de cima, aplicada ao rótulo). */ .escolha { position: relative; } .escolha input { position: absolute; opacity: 0; pointer-events: none; } .escolha:has(input:checked) { background: var(--marca-suave); color: var(--marca); border-color: var(--marca); } .escolha:has(input:focus-visible) { outline: 2px solid var(--marca); outline-offset: 2px; } /* --- A FOTO DO BILHETE -------------------------------------------------- */ /* ⚠️ A regra inteira está no `SITE.md` §8-bis, e ela nasceu de o dono reprovar o primeiro desenho. O tamanho vem CALCULADO de `midias.largura/altura` — nunca de um `transform`, que amplia sem mudar o espaço ocupado e CORTA o print. */ .moldura { background: var(--suave); border: 1px solid var(--borda); border-radius: var(--raio); padding: var(--espaco-2); display: flex; align-items: center; justify-content: center; position: relative; cursor: zoom-in; } /* ⚠️ O LINK NÃO PODE ESTRANGULAR A FOTO — defeito achado olhando a tela, com os testes verdes. A imagem fica dentro de um `` (o original a um toque), e link é `inline`: ele encolhe até o tamanho do conteúdo. Com isso o `100%` de `width: min(100%, 783px)` passou a valer a largura da PRÓPRIA FOTO, e a ampliação virou letra morta — medido no navegador, moldura de 638px com a foto aparecendo em 399. É exatamente o defeito que o dono reprovou no desenho. O `` tem de ocupar a coluna inteira para o `100%` significar a coluna. */ .moldura a { display: block; width: 100%; line-height: 0; } .moldura img { height: auto; border-radius: 4px; display: block; margin: 0 auto; /* centrada dentro do link de largura cheia */ } .legenda-foto { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-2); margin-top: var(--espaco-2); color: var(--tinta-fraca); font-size: var(--texto-apoio); } .legenda-foto b { color: var(--tinta-media); } /* ⚠️ A foto ganha MAIS espaço que o formulário (3fr contra 2fr): ela é a PROVA, o resto é digitação. E no celular ela vem PRIMEIRO — ninguém confere uma odd que está abaixo da dobra (`SITE.md` §8-bis, regra 1). */ .lado { display: grid; gap: var(--espaco-4); grid-template-columns: 1fr; } @media (min-width: 900px) { .lado { grid-template-columns: 3fr 2fr; align-items: start; } } .campo + .campo { margin-top: var(--espaco-3); } /* --- ENVIAR (Tela B) ---------------------------------------------------- A área de arraste, as etapas REAIS do progresso e a barra. Extraído do desenho aprovado na Fase 2 (telas/enviar*.html). */ .arraste { border: 2px dashed var(--borda); border-radius: var(--raio); padding: var(--espaco-5) var(--espaco-4); text-align: center; background: var(--cartao); } .arraste .icone { font-size: 2.5rem; line-height: 1; } .arraste .arquivo { font: inherit; color: var(--tinta-media); max-width: 100%; } /* ⚠️ As etapas são as que EXISTEM — nunca uma barra que anda sozinha sem saber de quê (`SITE.md` §6). Feito, agora e o que ainda vem. */ .etapas { list-style: none; padding: 0; margin: var(--espaco-3) 0 0; } .etapas li { display: flex; align-items: center; gap: var(--espaco-2); padding: var(--espaco-2) 0; color: var(--tinta-fraca); } .etapas li.feito { color: var(--lucro); } .etapas li.agora { color: var(--tinta); font-weight: 700; } .barra { height: 8px; border-radius: var(--raio-pilula); background: var(--suave); overflow: hidden; margin-top: var(--espaco-2); } .barra i { display: block; height: 100%; background: var(--marca); } /* --- A LEGENDA DO TIPSTER (Tela D) -------------------------------------- ⚠️ Ela é PROVA, não contexto: a STAKE sai do TEXTO, sempre (`CLAUDE.md` §6). Fonte de largura fixa e quebras preservadas porque as linhas do tipster são o que separa uma aposta da outra — reflow perderia justamente a informação que a pessoa veio conferir. */ .legenda-tipster { margin-top: var(--espaco-3); padding: var(--espaco-3); background: var(--suave); border: 1px solid var(--borda); border-radius: var(--raio); } .legenda-tipster pre { margin: var(--espaco-1) 0 0; font-family: var(--fonte-numero); font-size: var(--texto-corpo); color: var(--tinta); white-space: pre-wrap; /* quebra o link longo em vez de estourar */ word-break: break-word; } /* --- O CUPOM (Tela D) --------------------------------------------------- ⚠️ Uma foto pode ter VÁRIOS cupons, e o dono achou o defeito olhando: os três apareciam um por vez, e o motivo da pendência pedia justamente para conferir o PAREAMENTO entre eles. Cada cupom ganha a sua caixa para o olho separar um do outro — e o número acompanha a ordem na imagem. */ .cupom { margin-top: var(--espaco-3); padding: var(--espaco-3); background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); position: relative; } .cupom-numero { position: absolute; top: var(--espaco-3); right: var(--espaco-3); min-width: var(--espaco-4); height: var(--espaco-4); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--raio-pilula); background: var(--marca-suave); color: var(--marca); font-family: var(--fonte-numero); font-size: var(--texto-apoio); font-weight: 700; } .cupom .so-esta { width: 100%; margin-top: var(--espaco-3); font-size: var(--texto-apoio); } .cupom-titulo { margin: 0 var(--espaco-4) 0 0; font-size: var(--texto-titulo); font-weight: 700; line-height: 1.3; } /* --- ESTADO VAZIO ------------------------------------------------------ */ /* ⚠️ R12: tela vazia DIZ o que fazer, nunca só "nada aqui". É a tela que decide se a pessoa volta — 75% desistem na primeira semana. */ .vazio { text-align: center; padding: var(--espaco-5) var(--espaco-3); color: var(--tinta-media); } /* ⚠️ R24 — a ILUSTRAÇÃO do estado vazio, no lugar do emoji gigante. Duas cores e só: `--borda` para a estrutura (o que é moldura) e o acento para o assunto (o que a tela está dizendo). Assim o desenho recua e a frase manda — que é o contrário do emoji, que gritava sozinho. */ .ilustra { width: 72px; height: 72px; margin: 0 auto var(--espaco-2); display: block; } /* ⚠️ O ícone que entra NO MEIO DE UMA FRASE (o alerta do retido, o do motivo de revisão) precisa de duas coisas que o emoji dava de graça: tamanho relativo ao texto e alinhamento com a linha de base. Sem isto ele fica grande demais e "pulando" acima da frase — que é o defeito clássico de quem troca emoji por SVG sem olhar. */ .retido-linha .icone, .motivo .icone, .aviso-copia .icone { width: 1.05em; height: 1.05em; flex: none; vertical-align: -0.18em; } .ilustra .traco { stroke: var(--borda); } .ilustra .acento { stroke: var(--marca); } .ilustra .cheio { fill: var(--marca); stroke: none; } /* Quando a tela vazia é uma BOA notícia (fila zerada, tudo conferido), o acento vira o verde do lucro — a mesma cor que o produto usa para dizer "deu certo". Cor comunica estado aqui também (R3). */ .vazio.boa .ilustra .acento { stroke: var(--lucro); } .vazio.boa .ilustra .cheio { fill: var(--lucro); } .vazio h2 { margin: var(--espaco-3) 0 var(--espaco-2); color: var(--tinta); } .vazio p { max-width: 44ch; margin: 0 auto var(--espaco-4); } /* --- MIUDEZAS ----------------------------------------------------------- */ .secao { margin: var(--espaco-5) 0 var(--espaco-3); font-family: var(--fonte-display); font-size: var(--texto-titulo); letter-spacing: -0.02em; } .nota { color: var(--tinta-fraca); font-size: var(--texto-apoio); margin-top: var(--espaco-3); } /* ⚠️ Aqui morava a `.chave-tema` — o botão "Tema" do topo. Ela morreu no Bloco T2 (14/08/2026), e o motivo vale mais que o conserto: **ela só sabia DOIS estados.** Alternava claro↔escuro, e quem tocasse nela uma vez ficava preso a uma escolha fixa para sempre — "seguir o aparelho", que é o padrão e o mais comum, era o único estado que a chave não produzia. Quem herdou o papel é o `.trio` de Configurações, com os três. É a mesma distinção do `tenho=None` das casas: "ninguém escolheu" não é "escolheu não". */ .grade { display: grid; gap: var(--espaco-3); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } /* Os passos numerados da tela de coleta: instruções que a pessoa SEGUE, uma de cada vez. Respiro entre elas porque quem está instalando alterna entre a tela e outra janela — e perder o lugar custa a instalação inteira. */ .passos { margin: 0; padding-left: var(--espaco-4); } .passos li { margin-bottom: var(--espaco-3); } .passos li:last-child { margin-bottom: 0; } @media (max-width: 759px) { .esconde-celular { display: none; } .pagina { padding: var(--espaco-3) var(--espaco-2); } } /* =========================================================================== O PAINEL (Etapa 13) — as duas peças que o dashboard trouxe =========================================================================== Nasceram como PROPOSTA no kit visual (`desenhos/kit/`), o dono aprovou o desenho no Claude Design em 14/08/2026 ("gostei de tudo pode seguir"), e elas MUDARAM DE CASA para cá — a proposta morreu no mesmo commit, porque duas listas vivas de estilo é a família 14 (o desenho da Fase 2 envelheceu com o raio de 8px sem ninguém ver). O resto da tela do painel é peça de sempre: capa, pílula, cartão, tabela, menu. */ /* --- BARRA HORIZONTAL --------------------------------------------------- "Barra vence pizza": gente lê COMPRIMENTO 3–4× mais rápido que ângulo. E lucro por tipster tem NEGATIVO — que é o ponto do produto inteiro ("o Lemos está me dando prejuízo?"). Por isso o zero fica no MEIO e a barra cresce para os dois lados, em vez de um gráfico só de positivos. ⚠️ O rótulo do valor fica FORA da barra, à direita, sempre no mesmo lugar. Dentro dela ele some quando a barra é curta — que é justo o caso do tipster quase no zero, o mais difícil de ler. */ .barras { display: grid; gap: var(--espaco-2); } .barra-item { display: grid; /* nome · trilho · valor — o valor numa coluna fixa, para as vírgulas alinharem entre as linhas (R5, a mesma regra da tabela). */ grid-template-columns: minmax(88px, 22%) 1fr minmax(92px, auto); align-items: center; gap: var(--espaco-3); min-height: var(--alvo); } .barra-item > .quem { overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--tinta); } /* O trilho é o eixo. A linha do zero é desenhada NELE, no meio, e é a única régua da peça — sem grade de fundo, que só adiciona tinta. */ .barra-trilho { position: relative; height: 22px; background: var(--suave); border-radius: var(--raio-menor); } .barra-trilho::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--borda); } /* A barra sai do 50% (o zero). `--fatia` é a fração do maior valor absoluto da lista — quem calcula é a rota, do número que o domínio deu; o CSS só desenha. */ .barra-preenche { position: absolute; top: 0; bottom: 0; width: calc(var(--fatia) * 50%); border-radius: var(--raio-menor); transition: width var(--tempo-mover) var(--curva-mover); } .barra-preenche.lucro { left: 50%; background: var(--lucro); } .barra-preenche.perda { right: 50%; background: var(--perda); } /* ⚠️ R6 outra vez: a cor não é o único sinal. O valor ao lado leva o +/− e fica de que lado do zero a barra está — daltônico lê os dois. */ .barra-valor { text-align: right; font-family: var(--fonte-numero); font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; } /* --- EVOLUÇÃO (a linha do lucro acumulado) ------------------------------ "Mostrar MUDANÇA, não estado" — um número solto diz onde você está; a linha diz para onde você vai. É o único gráfico de linha do produto. ⚠️ SVG escrito pelo SERVIDOR, sem biblioteca — regra 3 do site (sem CDN, sem npm, sem framework de JavaScript). Os pontos vêm do domínio (`painel.evolucao`); a rota só os escala para o desenho. */ .evolucao { position: relative; } .evolucao svg { display: block; width: 100%; height: 180px; overflow: visible; } /* A linha do ZERO é sólida e discreta; ela é a única referência horizontal. Eixo começando em zero é regra de gráfico honesto (`DESIGN.md`). */ .evolucao .zero { stroke: var(--borda); stroke-width: 1; } .evolucao .linha { fill: none; stroke: var(--marca); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } /* A área embaixo da linha existe só para dar peso — bem fraca, porque quem comunica é a linha. */ .evolucao .area { fill: var(--marca); opacity: .10; stroke: none; } .evolucao .ponta { fill: var(--marca); stroke: var(--cartao); stroke-width: 3; } /* O valor do último dia fica GRUDADO na ponta da linha, não numa legenda longe: "rótulo direto no dado" (`DESIGN.md`). */ .evolucao-fim { font-family: var(--fonte-numero); font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--texto-apoio); } .evolucao-eixo { display: flex; justify-content: space-between; margin-top: var(--espaco-2); color: var(--tinta-fraca); font-size: var(--texto-apoio); } /* =========================================================================== AS PEÇAS DA TELA INICIAL NOVA (Bloco T1 do redesenho, 14/08/2026) =========================================================================== Nasceram como PROPOSTA em `desenhos/redesenho/proposta_redesenho.css`, o dono aprovou o desenho no Claude Design (*"está tão, mas tão, mas tão melhor"*), e agora MUDARAM DE CASA — a proposta morre no mesmo commit. É o terceiro ciclo desses neste projeto (a do painel e a das fontes foram os outros), e a regra é sempre a mesma: **proposta aprovada muda de casa e morre.** Duas listas vivas de estilo é a família 14, e o desenho da Fase 2 já envelheceu uma vez com o raio de 8px sem ninguém ver. */ /* --- OS MINIS — a fileira de cartões de gráfico da tela inicial ---------- Três cartões, cada um respondendo UMA pergunta num olhar, e cada um é a porta para o detalhe no Painel (R15: o detalhe existe, a um clique). */ .minis { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: var(--espaco-3); margin-top: var(--espaco-4); } /* ⚠️ A GRADE ESPAÇA POR `gap`; margem de irmão AQUI é defeito — e este custou uma medição para achar. A paleta empilha cartões com `.cartao + .cartao { margin-top: var(--espaco-3) }`, e essa regra vazava para dentro da grade: o 2º e o 3º mini nasciam 16px mais baixos que o 1º e, como a altura da linha era do 1º, ficavam 16px mais CURTOS (236,6 − 16 = 220,6, medido). O olho lê isso como "cartão torto". É a cartilha por escrito: *espaçe grupos de irmãos com flex/grid e `gap`, nunca com margem por elemento, que colide ou dobra em silêncio*. */ .minis .cartao + .cartao { margin-top: 0; } .mini { display: flex; flex-direction: column; gap: var(--espaco-2); text-decoration: none; color: inherit; transition: border-color .14s ease; } .mini:hover, .mini:active { border-color: var(--tinta-fraca); } .mini .cabeca-mini { display: flex; align-items: baseline; justify-content: space-between; gap: var(--espaco-2); } .mini .valor-mini { font-family: var(--fonte-numero); font-variant-numeric: tabular-nums; font-weight: 700; } /* --- LUCRO POR DIA — colunas finas com o zero desenhado ------------------ O calendário do Autoplanilha, na nossa linguagem: uma coluna por dia, verde para cima e vermelho para baixo do zero. Marcas finas, 2px de vão, grade recessiva (a régua do dataviz) — e SÓ o último dia leva rótulo: número em cima de toda coluna é ruído. */ .mini-dias { position: relative; display: flex; align-items: stretch; gap: 2px; height: 88px; } .mini-dias::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--borda); } .mini-dias .dia { position: relative; flex: 1; min-width: 6px; } .mini-dias .dia i { position: absolute; left: 0; right: 0; border-radius: 2px; } .mini-dias .dia i.lucro { bottom: 50%; height: calc(var(--h) * 46%); background: var(--lucro); } .mini-dias .dia i.perda { top: 50%; height: calc(var(--h) * 46%); background: var(--perda); } /* O último dia é o ponto enfatizado: um pouco mais largo, nunca de outra cor — cor identifica estado, não recência. */ .mini-dias .dia.ultimo { flex: 1.6; } .mini-dias .dia.ultimo i { border: 1px solid var(--cartao); } /* --- BARRAS COMPACTAS — o "por tipster" cabendo num cartão --------------- A MESMA peça `.barras` do Painel, só que apertada: quatro linhas, alvo menor. É variação de densidade, não peça nova. */ .mini .barras { gap: var(--espaco-1); } .mini .barra-item { min-height: 26px; grid-template-columns: minmax(64px, 30%) 1fr minmax(76px, auto); gap: var(--espaco-2); font-size: var(--texto-apoio); } .mini .barra-trilho { height: 12px; } /* --- O AZULEJO DO ÚLTIMO DIA — número, não gráfico ----------------------- "Resultado do último dia" é UM número com contexto: azulejo de estatística, com o dia como sobrancelha e o placar embaixo. */ .tile-dia .sobrancelha { color: var(--tinta-fraca); font-size: var(--texto-apoio); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; } .tile-dia .numero-tile { font-family: var(--fonte-numero); font-variant-numeric: tabular-nums; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; margin: var(--espaco-1) 0; } .tile-dia .placar { display: flex; gap: var(--espaco-2); flex-wrap: wrap; } /* --- O RETIDO ENXUTO ----------------------------------------------------- A regra não muda (o retido fica AO LADO do lucro, nunca escondido); o que muda é o volume: uma linha fina, não uma faixa que grita mais que o próprio lucro. */ .retido-fino { display: inline-flex; align-items: center; gap: var(--espaco-2); margin-top: var(--espaco-2); padding: var(--espaco-1) var(--espaco-3); border-radius: var(--raio-pilula); background: var(--atencao-suave); color: var(--atencao); font-size: var(--texto-apoio); font-weight: 600; text-decoration: none; } /* --- A NAVEGAÇÃO COM CONFIGURAÇÕES --------------------------------------- A engrenagem entra à direita, com um PONTO de pendência quando há algo esperando (nomes sem cadastro, casa nova) — é assim que site real avisa: um sinal discreto no lugar certo, não um parágrafo no meio do conteúdo. */ .icone-config { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--alvo); min-height: var(--alvo); border-radius: var(--raio-menor); color: var(--tinta-media); } .icone-config:hover, .icone-config:active { background: var(--suave); color: var(--tinta); } .icone-config .ponto { position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: var(--raio-pilula); background: var(--atencao); border: 2px solid var(--cartao); } /* --- A TELA DE CONFIGURAÇÕES --------------------------------------------- Grupos com título, e dentro deles LINHAS: ícone, o quê, o estado atual à direita, seta. O padrão que todo site real usa — configuração se acha, se faz, e sai do caminho. */ .config-grupo { padding: 0; overflow: hidden; } .config-grupo > .titulo-grupo { margin: 0; padding: var(--espaco-3) var(--espaco-4) var(--espaco-2); color: var(--tinta-fraca); font-size: var(--texto-apoio); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; } .config-linha { display: flex; align-items: center; gap: var(--espaco-3); min-height: 56px; padding: var(--espaco-2) var(--espaco-4); color: inherit; text-decoration: none; border-top: 1px solid var(--borda); transition: background .14s ease; } .config-linha:hover, .config-linha:active { background: var(--suave); } .config-linha .icone { flex: none; width: 20px; height: 20px; color: var(--tinta-fraca); } .config-linha .oque-linha { flex: 1; min-width: 0; } .config-linha .oque-linha small { display: block; color: var(--tinta-fraca); font-size: var(--texto-apoio); } .config-linha .estado-atual { color: var(--tinta-media); font-size: var(--texto-apoio); white-space: nowrap; } .config-linha .seta { color: var(--tinta-fraca); flex: none; } .badge-pendencia { display: inline-flex; align-items: center; padding: 2px var(--espaco-2); border-radius: var(--raio-pilula); background: var(--atencao-suave); color: var(--atencao); font-size: var(--texto-apoio); font-weight: 700; } /* O interruptor de tema, desenhado — três opções, uma escolhida. */ .trio { display: inline-flex; padding: 2px; gap: 2px; background: var(--suave); border-radius: var(--raio-pilula); } /* ⚠️ `