/* ============================================================================= BCockpit Beta v00.01 — identidade visual ============================================================================= HUD/high-tech sobre tinta noturna, com o gold como acento ÚNICO. Dark fixo (T11): não existe tema light nesta versão. 🔴 A regra que governa a cor (T10): o accent `#EDB852` é acento e CTA, e NUNCA vira estado. Status usa a paleta semântica — sucesso, atenção, perigo. O gold é ao mesmo tempo a cor da marca e a cor de "aviso", e num painel com saúde de carteira essa colisão faria um badge gold ler como destaque ou como alerta, conforme quem olha. ========================================================================== */ :root { /* 🔴 O ICONE DO CALENDARIO SUMIA AQUI. Sem `color-scheme`, o navegador assume tema CLARO e desenha os controles nativos que ele mesmo pinta -- o icone do seletor de data, a seta do da casa. */ select option, .seletor-tenant option { background-color: var(--bg-surface); color: var(--text-primary); } select option:checked, .seletor-tenant option:checked { background-color: var(--bg-surface-overlay); } /* Quando o André está vendo OUTRO cliente, o controle fica âmbar: o aviso vive junto do controle que causou o estado, e não só na faixa no meio da página. */ .seletor-tenant.visitando { color: var(--text-accent); border-color: rgba(237, 184, 82, 0.45); background: rgba(237, 184, 82, 0.10); } /* --------------------------------------------------------------- tabela ---- */ .tabela-caixa { overflow-x: auto; border-radius: var(--raio-lg); border: 1px solid var(--border-default); } table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; } thead th { text-align: left; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); font-weight: 600; padding: 12px 16px; background: var(--bg-surface-raised); white-space: nowrap; } tbody td { padding: 12px 16px; border-top: 1px solid var(--border-default); } tbody tr:hover { background: rgba(246, 246, 246, 0.03); } .num { font-family: var(--fonte-mono); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } /* --------------------------------------------------------------- botões ---- */ .botao { display: inline-flex; align-items: center; gap: 8px; font-family: var(--fonte); font-size: 0.9375rem; font-weight: 600; padding: 10px 18px; border-radius: var(--raio-md); border: 1px solid transparent; cursor: pointer; transition: background var(--rapido), border-color var(--rapido), box-shadow var(--rapido); } .botao-primario { background: var(--accent-base); color: #00081A; } .botao-primario:hover { background: var(--accent-hover); box-shadow: var(--glow-gold); } .botao-primario:active { background: var(--accent-pressed); } .botao-secundario { background: transparent; color: var(--text-primary); border-color: var(--border-default); } .botao-secundario:hover { border-color: var(--border-accent); color: var(--text-accent); } .botao-perigo { background: transparent; color: var(--perigo-texto); border-color: rgba(220, 110, 90, 0.4); } .botao-perigo:hover { background: var(--perigo-fundo); } .botao:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; } /* ---------------------------------------------------------------- forms ---- */ .campo { display: block; margin-bottom: 16px; } .campo > span { display: block; font-size: 0.8125rem; color: var(--text-secondary); margin-bottom: 6px; } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="month"], select, textarea { width: 100%; font-family: var(--fonte); font-size: 0.9375rem; color: var(--text-primary); background: var(--bg-base); border: 1px solid var(--border-default); border-radius: var(--raio-md); padding: 10px 12px; transition: border-color var(--rapido), box-shadow var(--rapido); } /* ⚠️ SEM `filter: invert()` aqui, e isso e deliberado. A primeira tentativa aplicou as DUAS correcoes ao mesmo tempo -- o `color-scheme: dark` la em cima E um `invert(1)` neste icone --, e elas se cancelam: o color-scheme ja faz o Chrome desenhar o indicador em BRANCO, e o invert o repintava de preto. O icone continuou invisivel, agora por motivo oposto ao original. Duas correcoes para o mesmo sintoma nao somam; brigam. Fica a de raiz, que conserta a familia toda (calendario, seta do select, barra de rolagem, autofill), e aqui so o que o color-scheme nao da: area de clique visivel. */ input[type="date"]::-webkit-calendar-picker-indicator, input[type="month"]::-webkit-calendar-picker-indicator { opacity: 0.75; cursor: pointer; transition: opacity var(--rapido); } input[type="date"]::-webkit-calendar-picker-indicator:hover, input[type="month"]::-webkit-calendar-picker-indicator:hover { opacity: 1; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-base); box-shadow: 0 0 0 3px rgba(237, 184, 82, 0.15); } /* --------------------------------------------------------------- avisos ---- */ .aviso { padding: 12px 16px; border-radius: var(--raio-md); font-size: 0.9375rem; margin-bottom: 16px; border: 1px solid transparent; } .aviso.perigo { color: var(--perigo-texto); background: var(--perigo-fundo); border-color: rgba(220, 110, 90, 0.3); } .aviso.sucesso { color: var(--sucesso-texto); background: var(--sucesso-fundo); border-color: rgba(140, 170, 80, 0.3); } .aviso.atencao { color: var(--aviso-texto); background: var(--aviso-fundo); border-color: var(--border-accent); } .aviso.info { color: var(--info-texto); background: var(--info-fundo); border-color: rgba(110, 160, 200, 0.3); } /* 🔴 O BANNER de número estimado, e a régua do André é categórica: exibido com a cobertura declarada ao lado, ou não é exibido. */ .banner-estimativa { border-left: 3px solid var(--aviso-texto); padding: 12px 16px; background: var(--aviso-fundo); color: var(--aviso-texto); font-size: 0.875rem; border-radius: 0 var(--raio-md) var(--raio-md) 0; margin-bottom: 16px; } /* 🔴 Estado vazio NUNCA é zero numa tela de dinheiro. Se a ingestão parar, o painel mostra menos venda — e ninguém desconfia de um número. Por isso a ausência tem cara de ausência. */ .vazio { padding: 32px; text-align: center; color: var(--text-muted); border: 1px dashed var(--border-default); border-radius: var(--raio-lg); } .vazio strong { display: block; color: var(--text-secondary); margin-bottom: 4px; font-weight: 600; } /* ---------------------------------------------------------------- login ---- */ .tela-login { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; } .card-login { width: 100%; max-width: 420px; } /* ============================================================================= FUNDAÇÃO DA FASE 2 — os componentes das sete telas de visualização ========================================================================== */ /* 🔴 O CHIP DE RECORTE é o irmão do `.chip-regime`, e responde à outra metade da pergunta. O chip de regime diz QUE NÚMERO é (F1, F2, F3); o de recorte diz SOBRE QUE CONJUNTO ele foi somado — "Agosto/2026", "Desde sempre", "Só pagas". Sem ele, a mesma tela mostra um total do mês ao lado de um total histórico e nada na tela diz que os dois não se comparam. */ .chip-recorte { display: inline-block; font-family: var(--fonte-mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--raio-sm); /* canto reto: distingue do chip de regime ao lado */ border: 1px dashed var(--border-default); color: var(--text-muted); background: transparent; } /* O recorte que NÃO é o mês selecionado se anuncia — é o caso em que o leitor erra sozinho, porque o seletor de mês no topo diz outra coisa. */ .chip-recorte.fora-do-mes { border-style: solid; color: var(--info-texto); border-color: rgba(110, 160, 200, 0.35); background: var(--info-fundo); } /* ---------------------------------------------------------------- abas ---- */ /* Navegação por recorte dentro de uma tela (UTM/Região/Período; as 4 do all-time). São LINKS com `?aba=`, não JavaScript: a aba vive na URL e o estado é compartilhável — a mesma regra do mês e do tenant. */ .abas { display: flex; gap: 4px; border-bottom: 1px solid var(--border-default); margin-bottom: 20px; overflow-x: auto; } .abas a { padding: 10px 16px; font-size: 0.9375rem; font-weight: 600; color: var(--text-secondary); border-bottom: 2px solid transparent; white-space: nowrap; transition: color var(--rapido), border-color var(--rapido); } .abas a:hover { color: var(--text-primary); text-decoration: none; } .abas a[aria-current="page"] { color: var(--text-accent); border-bottom-color: var(--accent-base); } /* 🔑 A aba com foco de teclado precisa se ver. Com o roving tabindex do `abas.js`, o Tab entra na barra uma vez e as setas andam por ela — sem este anel, quem navega por teclado perde a posição. */ .abas a:focus-visible { outline: 2px solid var(--accent-base); outline-offset: -2px; border-radius: var(--raio-sm) var(--raio-sm) 0 0; } /* 🔴 O CONTÊINER DE UMA ABA. Os painéis das outras abas ESTÃO no HTML e chegam com o atributo `hidden` — é o que permite ao clique trocar só o contêiner em vez de recarregar a tela, e é o que faz a página sem JavaScript já chegar mostrando a aba certa. A regra abaixo parece redundante (o navegador já esconde `[hidden]`) e não é: `[hidden]` do agente de usuário é `display: none` com a MENOR precedência que existe, e qualquer regra futura que dê `display` a `.aba-painel` o anularia em silêncio — a tela passaria a mostrar as três abas empilhadas sem nenhum erro em lugar nenhum. */ .aba-painel[hidden] { display: none; } /* ----------------------------------------------------------- progresso ---- */ /* Barra de avanço contra meta. Ela NÃO se pinta de verde ao passar de 100%: o accent é acento, nunca estado (T10). O excedente ganha listra, que se lê sem depender de cor. */ .progresso { height: 8px; border-radius: var(--raio-full); background: rgba(246, 246, 246, 0.08); overflow: hidden; } .progresso > span { display: block; height: 100%; background: var(--accent-base); border-radius: var(--raio-full); } .progresso > span.excedeu { background: repeating-linear-gradient( 45deg, var(--accent-base), var(--accent-base) 4px, var(--accent-hover) 4px, var(--accent-hover) 8px); } /* 🔴 Meta ausente NÃO é meta zero, e barra vazia leria como "0% da meta". Sem meta não há barra nenhuma — a régua não existe. */ .progresso.sem-base { background: transparent; border: 1px dashed var(--border-default); } .progresso.sem-base > span { display: none; } /* -------------------------------------------------------- grade fixa ------ */ /* A grade do Acompanhamento Diário: 1ª coluna congelada, dias rolando ao lado. ⚠️ A planilha travava a grade em 31 colunas e cortava dimensão maior SEM AVISO. Aqui não há altura nem largura fixa: o container rola, e todas as linhas existem. */ .grade-fixa { overflow-x: auto; border-radius: var(--raio-lg); border: 1px solid var(--border-default); } .grade-fixa table { border-collapse: separate; border-spacing: 0; } .grade-fixa th:first-child, .grade-fixa td:first-child { position: sticky; left: 0; z-index: 2; background: var(--bg-surface-raised); text-align: left; /* ⚠️ A borda e a sombra são o que diz ao leitor que existe tabela rolando à direita. Sem elas, a coluna congelada parece o fim da tabela — e um número lido sem o nome da linha é um número de dinheiro sem rubrica. */ border-right: 1px solid var(--border-default); box-shadow: 6px 0 8px -6px rgba(0, 0, 0, 0.45); } /* A linha de título de bloco é um `td` com `colspan`: ela não entra na regra de largura abaixo, senão o título do bloco quebraria dentro de 200px. */ .grade-fixa td:first-child { white-space: nowrap; } /* 🔴 A coluna dos rótulos: largura CONTIDA, fonte menor e QUEBRA DE LINHA. Sem isto, "Investimento total do mês (Meta + Google)" estica a coluna numa única linha e come o espaço útil dos 31 dias — a tabela fica com o nome inteiro e quase nenhum número visível. Duas linhas de rótulo custam altura, que sobra; largura é o que falta. */ .grade-fixa th:first-child { width: 200px; min-width: 200px; max-width: 200px; white-space: normal; overflow-wrap: break-word; } .grade-fixa tbody th { padding: 10px 14px; border-top: 1px solid var(--border-default); font-size: 0.75rem; font-weight: 600; line-height: 1.35; color: var(--text-primary); } .grade-fixa thead th { position: sticky; top: 0; z-index: 3; } .grade-fixa thead th:first-child { z-index: 4; padding: 12px 14px; } /* Os 31 cabeçalhos de dia agora dizem `dd/mm`, não `1..31`: cabem porque o `letter-spacing` de caixa-alta do cabeçalho global sai daqui. */ .grade-fixa thead th.num { padding: 10px 8px; letter-spacing: 0.02em; font-size: 0.625rem; } /* Fim de semana: fundo discreto, só para o olho encontrar a semana. Vem de `data-fds`, e não de uma classe, porque não afirma nada sobre o dado. */ .grade-fixa thead th[data-fds]:not(.futuro) { background: rgba(246, 246, 246, 0.07); } .grade-fixa td { padding: 8px 10px; border-top: 1px solid var(--border-default); font-size: 0.8125rem; } /* Colunas de totalização (mês, 1ª e 2ª quinzena) são leitura de outro nível — e a régua vertical diz isso sem precisar de rótulo repetido. */ .grade-fixa .total { background: rgba(246, 246, 246, 0.04); font-weight: 600; } .grade-fixa .total-mes { border-left: 2px solid var(--border-accent); } /* 🔴 Dia futuro é VAZIO, nunca zero: num painel de dinheiro, `R$ 0,00` no dia 20 de um mês que está no dia 4 é uma afirmação falsa sobre o futuro. */ .grade-fixa .futuro { background: repeating-linear-gradient( 45deg, transparent, transparent 6px, rgba(246,246,246,0.03) 6px, rgba(246,246,246,0.03) 12px); } /* Célula que existe só no total do mês (Investimento Google, que chega mensal). As diárias ficam com este traço — 🔴 ratear por 30 inventaria 30 números. */ .grade-fixa .nao-se-aplica { color: var(--text-muted); text-align: center; } /* ------------------------------------------------------------- cascata ---- */ /* O DRE: receitas → custos diretos → despesas operacionais → resultado. A cascata é a estrutura que impede o leitor de somar duas linhas de níveis diferentes, que é como um DRE fecha errado e parece certo. */ .cascata { display: flex; flex-direction: column; } .cascata-bloco { border-top: 1px solid var(--border-default); padding: 4px 0; } .cascata-bloco > .rotulo { font-size: 0.6875rem; padding: 12px 16px 4px; } .cascata-linha { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: baseline; padding: 7px 16px; } .cascata-linha:hover { background: rgba(246, 246, 246, 0.03); } .cascata-linha .nome { color: var(--text-secondary); font-size: 0.9375rem; } .cascata-linha .valor { font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; text-align: right; min-width: 9ch; } /* A coluna de % da receita: presente sempre, para que a alternância valores × percentual não mude o LAYOUT, só o realce. */ .cascata-linha .percentual { font-family: var(--fonte-mono); font-size: 0.8125rem; color: var(--text-muted); text-align: right; min-width: 6ch; } /* Subtotal: o número que RESULTA das linhas acima, não mais um item da lista. */ .cascata-linha.subtotal { border-top: 1px solid var(--border-default); margin-top: 4px; font-weight: 600; } .cascata-linha.subtotal .nome { color: var(--text-primary); } .cascata-linha.resultado { border-top: 2px solid var(--border-accent); font-size: 1.0625rem; font-weight: 600; } .cascata-linha.resultado .valor { color: var(--text-accent); } /* 🔴 Resultado NEGATIVO usa a paleta semântica, e o sinal fica na tela. Um prejuízo pintado de accent lê como destaque. */ .cascata-linha.resultado.negativo .valor { color: var(--perigo-texto); } /* A linha que veio de LANÇAMENTO MANUAL, não da ingestão. A planilha marcava isso (🅰️ × Ⓜ️) e estava certa: o cliente precisa saber o que é digitado. */ .cascata-linha .proveniencia { font-family: var(--fonte-mono); font-size: 0.625rem; color: var(--text-muted); border: 1px solid var(--border-default); border-radius: var(--raio-sm); padding: 0 4px; margin-left: 6px; } /* --------------------------------------------------------------- funil ---- */ /* Cinco degraus em CSS puro — não vale importar uma lib de gráfico para desenhar cinco retângulos (§4.2 do plano da fase 2). */ .funil { display: flex; flex-direction: column; gap: 2px; } .funil-degrau { display: grid; grid-template-columns: 200px 1fr auto; gap: 12px; align-items: center; } .funil-barra { height: 34px; background: linear-gradient(90deg, var(--accent-suave), rgba(237, 184, 82, 0.28)); border: 1px solid var(--border-accent); border-radius: var(--raio-sm); min-width: 2px; } /* 🔴 ZERO MEDIDO NÃO É AUSÊNCIA DE DADO, e por isso não se desenha como barra. Uma barra de largura 0 é indistinguível de um degrau que ninguém desenhou — o degrau zerado troca a barra por esta marca tracejada, que se lê como "medimos, e deu zero". A ausência de veiculação nem chega ao funil: ela é o bloco `vazio()` da rota. */ .funil-zero { justify-self: start; align-self: center; font-size: 0.75rem; font-family: var(--fonte-mono); letter-spacing: 0.04em; color: var(--text-muted); border: 1px dashed var(--border-default); border-radius: var(--raio-sm); padding: 3px 10px; white-space: nowrap; } /* 🔴 A declaração da escala. Ela NÃO é decoração: numa escala logarítmica, meia largura não é metade do valor, e sem esta frase o funil é um gráfico com o eixo escondido. Fica visível e imprimível — nunca em `title=`. */ .escala-nota { font-size: 0.8125rem; color: var(--text-muted); border-left: 2px solid var(--border-accent); padding: 6px 0 6px 12px; margin: 12px 0 10px; max-width: 78ch; line-height: 1.55; } .escala-nota code { font-family: var(--fonte-mono); font-size: 0.75rem; border: 1px solid var(--border-default); border-radius: var(--raio-sm); padding: 0 4px; } .funil-degrau .nome { color: var(--text-secondary); font-size: 0.875rem; text-align: right; } .funil-degrau .valor { font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; font-weight: 600; } /* A taxa ENTRE dois degraus, com o semáforo. */ .funil-taxa { display: grid; grid-template-columns: 200px 1fr auto; gap: 12px; font-size: 0.8125rem; color: var(--text-muted); padding: 2px 0; } .funil-taxa .medida { font-family: var(--fonte-mono); } /* 🔴 O SEMÁFORO CARREGA GLIFO, não só matiz. Cor sozinha não é sinal: 8% dos homens não distinguem vermelho de verde, e este painel decide gasto de mídia. O glifo (●◐◔■) diz o mesmo que a cor. */ .semaforo { font-family: var(--fonte-mono); font-weight: 600; white-space: nowrap; } .semaforo.bom { color: var(--sucesso-texto); } .semaforo.atencao { color: var(--aviso-texto); } .semaforo.ruim { color: var(--perigo-texto); } /* 🔴 SEM BASE não é "ruim": denominador zero exibe `—`, jamais `0%`. Era assim que a planilha transformava CPC ausente em "META ATINGIDA". */ .semaforo.sem-base { color: var(--text-muted); } /* -------------------------------------------------------------- gráfico ---- */ /* Chart.js precisa de um container com altura declarada; sem isso ele cresce até o canvas encher a página a cada redimensionamento. */ .grafico { position: relative; height: 280px; } .grafico.baixo { height: 180px; } .grafico canvas { max-width: 100%; } /* 🔴 Sem dado NÃO se desenha eixo zerado: um gráfico de linha rente ao chão lê como "vendeu zero", e o que houve foi a ingestão parar. */ .grafico-vazio { height: 180px; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--text-muted); border: 1px dashed var(--border-default); border-radius: var(--raio-lg); font-size: 0.875rem; } /* ------------------------------------------------------------ responsivo ---- */ @media (max-width: 860px) { .corpo { flex-direction: column; } .rail { width: 100%; border-right: none; border-bottom: 1px solid var(--border-default); } .funil-degrau, .funil-taxa { grid-template-columns: 120px 1fr auto; } .cascata-linha { grid-template-columns: 1fr auto; } .cascata-linha .percentual { display: none; } } /* ------------------------------------------------- campos com mascara ---- Escritos pela fatia 7. A cor e REFORCO, nunca o sinal: a mensagem carrega o glifo, como o semaforo do projeto, porque parte dos leitores nao distingue vermelho de verde -- e este painel decide gasto de midia. */ .campo-erro { display: block; margin-top: 6px; font-size: 0.8125rem; color: var(--perigo-texto); } input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--perigo-texto); box-shadow: 0 0 0 2px var(--perigo-fundo); } /* O simbolo da moeda ao lado do campo: num painel multimoeda e o que faz o leitor ver o € e perceber a moeda errada ANTES de salvar. */ .campo-linha { display: flex; align-items: center; gap: 8px; } .campo-linha > input { flex: 1 1 auto; min-width: 0; } .campo-afixo { font-size: 0.9375rem; font-weight: 600; opacity: 0.75; white-space: nowrap; min-width: 2.2em; text-align: right; } /* Subtitulo dentro de um cabecalho de tabela -- diz o que a coluna SOMA, e uma coluna "Despesas" sem isso e o comeco de um numero errado. */ th .subtitulo-coluna { display: block; font-weight: 400; font-size: 0.75rem; opacity: 0.75; } /* Dinheiro negativo. O sinal ja vem antes do simbolo (-R$ 250,00); a cor so acelera a leitura. */ .num.negativo { color: var(--perigo-texto); } /* ------------------------------------------- tabela de acompanhamento ---- Meta · Realizado · /dia · Diferenca · Se continuar assim · /dia para atingir · Progresso. Sete colunas apertam: a barra some numa coluna estreita, e a nota de proveniencia do indicador empurra os numeros. */ .tabela-acompanhamento td .progresso { min-width: 90px; margin-bottom: 4px; } .tabela-acompanhamento td .progresso + .num { font-size: 0.8125rem; } .tabela-acompanhamento th[scope="row"] { max-width: 22ch; font-weight: 600; } .tabela-acompanhamento th[scope="row"] small { display: block; opacity: 0.7; line-height: 1.35; } /* ========================================================================== OVERVIEW — a tela inicial do fluxo de trabalho (fase 3, fatia 1) ========================================================================== O overview responde uma pergunta so: "o mes esta indo bem?". Todo o CSS daqui existe para servir a HIERARQUIA dessa resposta -- os tres numeros que respondem primeiro e maiores, o resto como apoio. Enfeite que competisse com eles atrapalharia a leitura de segundos que a tela promete. ========================================================================== */ /* A frase de abertura. Ela nao e decoracao: e ela que diz, antes do primeiro numero, que os tres cards do topo NAO se somam. Sem isso, tres valores grandes lado a lado convidam a soma que este produto existe para impedir. */ .overview-abertura { max-width: 68ch; margin: 4px 0 20px; } /* Um PAINEL INTEIRO por moeda (D13). A borda superior e o respiro separam os paineis: sem essa separacao visivel, dois conjuntos de cards em sequencia leem-se como um conjunto so -- e ai o leitor soma BRL com EUR sozinho, exatamente o que nenhum total da tela faz. */ .overview-moeda + .overview-moeda { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--border-default); } .overview-moeda-titulo { font-family: var(--fonte-mono); letter-spacing: 0.08em; color: var(--text-accent); margin: 0 0 16px; } /* O HERO: tres cards, e eles sao os unicos da tela com valor grande. A grade pede 300px por coluna (contra os 260px da `.grade` comum) para que o valor nao quebre linha -- um numero de dinheiro partido ao meio le-se errado. */ .overview-hero { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .overview-hero .kpi-valor { font-size: 2rem; } /* Lucro liquido negativo, e vencido em aberto maior que zero. O sinal ja vem antes do simbolo (-R$ 383,33); a cor so acelera a leitura, e nunca e o unico sinal. `--perigo-texto` -- `var(--perigo)` NAO existe neste arquivo. */ .card.kpi.negativo .kpi-valor { color: var(--perigo-texto); } /* A distancia entre os regimes ganha card proprio e largura inteira porque ela e a unica coisa da tela que precisa de uma FRASE, e nao de um numero: o leitor que ve dois valores diferentes para "o mes" precisa ler ali, no ato, que a diferenca e normal e nao e erro. */ .overview-distancia { margin: 16px 0 8px; } .overview-distancia-corpo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; margin-top: 8px; } .overview-distancia-corpo .kpi-valor { font-size: 1.5rem; margin: 0; } .overview-distancia-corpo .kpi-nota { flex: 1 1 320px; margin: 0; max-width: 72ch; } /* As secoes de apoio. O titulo carrega o chip de recorte ao lado, entao ele precisa alinhar pela linha de base do texto, e nao pelo topo da caixa. */ .overview-secao { margin-top: 28px; } .overview-secao > h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0 0 12px; } /* 🔑 TODO CARD LEVA AO DETALHE, e o card e um `` de bloco -- nao um `
` com `onclick`. Assim ele navega por teclado, abre em nova aba e funciona sem JavaScript; e o projeto nao ganha um manipulador inline a mais (nao ha CSP aqui ainda, e a divida nao precisa crescer). O `color: inherit` existe porque `a { color: var(--text-accent) }` pintaria o card inteiro de ambar. */ .card-link { display: block; color: inherit; text-decoration: none; transition: border-color 120ms ease, transform 120ms ease; } .card-link:hover, .card-link:focus-visible { border-color: var(--border-accent); text-decoration: none; transform: translateY(-1px); } /* O foco precisa aparecer sem depender da cor da borda: parte dos leitores navega so por teclado, e um realce de 1px de matiz nao e um indicador. */ .card-link:focus-visible { outline: 2px solid var(--text-accent); outline-offset: 2px; } /* Responsivo de verdade: a `.grade` ja reflui sozinha (auto-fit/minmax), e o que sobra e impedir que o valor grande do hero estoure a coluna no telefone. Nada nesta tela rola na horizontal -- o grafico e o unico bloco de largura fixa, e ele e `responsive: true`. */ @media (max-width: 560px) { .overview-hero { grid-template-columns: 1fr; } .overview-hero .kpi-valor { font-size: 1.625rem; } .overview-distancia-corpo { gap: 8px; } }