/* #145 — OS TOKENS DESTE ARQUIVO VIRARAM APELIDOS DOS DE `tokens.css`. * * O SISTEMA TINHA DOIS CONJUNTOS DE TOKENS, e a #142 trocou so um. Resultado: * dois azuis convivendo em producao (#2563eb novo nos 16 tokens trocados, * #276fc6 velho em 30 usos daqui), duas famílias de borda e dois fundos. * NADA pegou: a suite nao ve cor, o portao de acessibilidade ve CONTRASTE e as * duas paletas passavam separadamente, e a bateria nao compara cores. * * O erro de raciocinio: a regra do CLAUDE.md diz "cor literal so em * tokens.css", e eu conclui que TODO token mora la. A regra fala de cor * LITERAL -- ela nao impede um segundo conjunto de tokens em outro arquivo. * Confiar no documento em vez de enumerar e o mesmo erro que custou a #136. * * Os nomes antigos FICAM (211 usos), agora apontando para a paleta unica. Quem * escrever CSS novo usa os de `tokens.css`; estes existem para nao reescrever * 211 lugares numa rodada de cor. */ /* Tinta e papel, nao cromo colorido. A barra de navegacao ocupava a maior area e a cor mais saturada da tela carregando a MENOR quantidade de informacao. Aqui o cromo recua para tinta, e o azul passa a significar uma coisa so: da para agir aqui. */ :root { /* #293: os OITO apelidos do #145 (--tinta, --tinta-fraca, --acao, --acao-escura, --realce, --fundo, --superficie, --borda) SAÍRAM daqui -- eram 320 usos de um nome e 331 do canônico para a MESMA cor. Só o nome de tokens.css existe agora (--ink, --ink-3, --azul, --azul-escuro, --azul-fraco, --page, --surface, --line). Troca mecânica, valor idêntico. */ /* #57-B: três azuis conviviam sem que ninguém tivesse decidido isso — o token do #36 (--azul #276fc6), este --acao vibrante (#1550e5) nas pílulas do DRE/Análise e no "+ Nova categoria", e um arroxeado (#0f3fbb) no botão da Conciliação. Unificados na família do --azul. Contrastes medidos sobre branco: #276fc6 = 5,03 (AA) e #1f5da8 = 6,55 (AA); sobre --realce #eaf0fe, #1f5da8 = 5,77 (AA) — o próprio #276fc6 daria 4,41 e FALHARIA, por isso a variante escura existe e é ela que vai em texto sobre azul-claro. */ /* #168: `--acao-clara` saiu daqui. Ela existia "só no gradiente da barra de progresso", e esse gradiente tinha as duas pontas na mesma cor desde que o #57-B unificou os azuis -- ou seja, ela nao pintava nada distinguivel havia varias rodadas. Removida junto com o gradiente chapado que a usava. */ /* Vermelho e verde mais escuros que os anteriores (#e94747 / #24ad52): dinheiro e lido em corpo pequeno sobre branco, e os tons claros nao alcancavam contraste 4.5:1. Estes alcancam, e ainda imprimem. #168: as tres MUDARAM DE CASA para `tokens.css`, com o valor intacto -- a decisao #70 diz que cor literal so mora la. O texto acima fica porque e o registro de POR QUE elas sao escuras; o valor agora se le no tokens.css, junto do aviso de que --erro/--sucesso/--atencao e --vermelho/--verde/--amarelo sao duas familias esperando decisao. */ /* #168 — O `--raio: 8px` QUE MOROU AQUI NUNCA PINTOU NADA, e por dois anos de rodadas ninguem viu, porque CSS nao reclama de token perdedor. `tokens.css:82` define `--raio: 10px` e carrega DEPOIS (base.html:21-23), entao os 54 usos de `var(--raio)` -- 34 neste arquivo, 20 em `componentes.css` -- sempre renderizaram 10px. Quem editasse o 8px veria a tela nao mudar e procuraria o defeito em qualquer outro lugar. E o MESMO defeito que o #145 descreve no topo deste arquivo (dois conjuntos de tokens, um deles morto em silencio): ele varreu COR e parou ali. Raio era o irmao que ficou. A guarda contra a terceira ocorrencia esta em `tests/test_token_sem_colisao_168.py`, que falha se QUALQUER token for definido nos dois arquivos com valores diferentes. `--raio-miudo` fica: e definido so aqui, nao colide. */ --raio-miudo: 4px; --linha: 32px; /* #168: `--sombra` tambem foi para `tokens.css`, junto das outras cinco elevacoes que viviam soltas em box-shadow ao longo deste arquivo. */ } /* A fonte reservada ao DINHEIRO, e a nada mais. A classe `valor` ja marcava dinheiro com exclusividade (era o alvo do borrao de "ocultar valores"); aqui ela vira tambem um papel tipografico. Condensada de proposito: deixa um saldo de sete digitos ser grande sem comer a largura da coluna, e da a coluna de valores a textura de um extrato. IBM Plex Sans Condensed, SIL OFL 1.1. */ @font-face { font-family: "Cifra"; src: url("../fontes/PlexCondensed-500.25db464417d3.woff2") format("woff2"); /* #287: descritor de @font-face não resolve `var()` -- os dois pesos caíam em `normal` e a segunda face vencia a primeira. Literal, como o `tokens.css` já faz com a Inter. */ font-weight: 500; font-display: swap; } @font-face { font-family: "Cifra"; src: url("../fontes/PlexCondensed-600.bac89dc82014.woff2") format("woff2"); font-weight: 600; font-display: swap; } * { box-sizing: border-box; } /* O `body` mora em tokens.css desde o #70 -- corpo único de 15px system-ui sobre --page. Declarar aqui de novo só criaria uma segunda verdade que perde a cascata em silêncio. */ /* `flex-wrap: wrap`, e nao `overflow-x: auto`: a barra tem submenus (`.submenu`) posicionados `position: absolute` por cima dela, e `overflow-x: auto` num container forca o `overflow-y` computado tambem para `auto` (regra da propria spec do CSS -- um eixo com overflow diferente de `visible` empurra o outro eixo para fora de `visible` tambem), o que transforma `.topo` num container de RECORTE: qualquer submenu que escape da caixa de 56px fica cortado e inalcancavel por mouse, mesmo com `display: block` no hover (achado da revisao final -- `elementFromPoint` no centro do link nao alcancava o alvo; o Playwright `is_visible()` nao pegou o defeito porque e cego a clipping por ancestral). Com `flex-wrap: wrap` a barra nunca entra em modo de recorte: numa tela de 390px o nome da empresa, o menu e o lado direito quebram em linhas separadas em vez de estourar para o lado, sem precisar de overflow nenhum aqui (mesmo problema das tabelas largas, solucao diferente porque esta barra tem filhos que precisam escapar dela). `flex: none` nos filhos impede que texto como "Lançamentos" quebre linha sozinho ou se esprema antes da barra quebrar. */ .topo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-8) var(--esp-24); min-height: 56px; padding: var(--esp-8) var(--esp-16); /* #145 — A BARRA CLARA da referência do dono (/root/referencia/menusup.png). Era `--tinta` com texto branco desde sempre; passa a ser superfície branca com uma linha embaixo, texto slate e o item ativo em azul sublinhado. */ background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line); } .topo a, .topo span, .topo summary, .topo button { color: var(--ink-2); text-decoration: none; } .topo-produto { font-weight: var(--peso-forte); flex: none; white-space: nowrap; } /* #60, item 1 -- a empresa ativa. Antes: `.topo-empresa`, peso 600, cor de item de menu, e o `Trocar` no extremo oposto da barra. Numa tela multi-empresa isso deixa "em qual empresa estou" com o mesmo destaque de "Relatorios", e lancar na empresa errada e erro silencioso -- as duas empresas tem contas de nome parecido. Agora: pastilha propria (o unico fundo claro do lado esquerdo da barra), nome em 640 -- o peso do heroi (#57-E1) -- e o controle de troca DENTRO da pastilha, ao lado do nome que ele troca. Medido no Chromium: o nome computa 640 contra 400 dos itens de menu (o link antigo computava 600), porque o que distingue tem de pesar mais que o que nao distingue. #163 -- O NUMERO ANTIGO EXPIROU NO #145, E A COR JUNTO COM ELE. Estava escrito aqui: "o branco sobre a pastilha composta (rgba .12 sobre #0f1a2b = #2c3544) da 12,29:1". Era verdade enquanto a barra era ESCURA. O #145 tornou a barra `var(--surface)`, e rgba(255,255,255,.12) sobre branco COMPOE BRANCO: a pastilha media 1,00:1 contra a propria barra, ou seja, deixou de existir visualmente. Numa tela multi-empresa ela e o sinal de qual empresa esta aberta -- o mesmo erro silencioso que o comentario acima descreve. Agora a pastilha ESCURECE a barra clara, que e a unica direcao que funciona sobre fundo claro. `--line-2` no repouso, `--line` no realce, mantendo a progressao de dois niveis do paragrafo abaixo. Guarda: tests/test_contraste_163.py. */ .empresa-ativa { display: flex; align-items: center; gap: var(--esp-2); flex: none; padding: 3px 3px 3px var(--esp-10); border-radius: var(--raio); background: var(--line-2); } .empresa-ativa-nome { font-weight: 640; white-space: nowrap; } /* Menor que um item de menu: dentro da pastilha o `Trocar` e acao secundaria do nome, nao mais um item de primeiro nivel competindo com o menu. O realce de hover sobe de .12 para .18 porque .12 sobre .12 nao se ve. #163: a INTENCAO desse paragrafo continua valendo -- o realce precisa ser mais forte que o repouso. O que mudou e a direcao: sobre a barra clara do #145, "mais forte" e mais ESCURO, entao `--line` (repouso e `--line-2`). As duas rgba brancas anteriores davam 1,00:1 sobre a barra: hover E foco de teclado do `Trocar` eram invisiveis. */ .empresa-ativa .tem-submenu > summary { padding: 5px var(--esp-8); font-size: var(--corpo-nota); } .empresa-ativa .tem-submenu:hover > summary, .empresa-ativa .tem-submenu[open] > summary { background: var(--line); } /* Faixa da empresa ativa: 3px no topo absoluto da pagina. Cor por empresa (core/models/organizacao.py explica por que por id e nao por nome). E REFORCO -- o nome em texto e que carrega a informacao --, entao nao ha requisito de contraste de texto aqui; ainda assim as seis passam de 3:1 sobre o fundo da pagina. */ .faixa-empresa { height: 3px; } .faixa-empresa-0 { background: var(--empresa-0); } .faixa-empresa-1 { background: var(--empresa-1); } .faixa-empresa-2 { background: var(--empresa-2); } .faixa-empresa-3 { background: var(--empresa-3); } .faixa-empresa-4 { background: var(--empresa-4); } .faixa-empresa-5 { background: var(--empresa-5); } /* #289: `.visualmente-oculto` saiu -- era o mesmo que `.oculto-visual` (18 usos), com outro nome. */ .topo-menu { display: flex; gap: var(--esp-4); list-style: none; margin: 0; padding: 0; flex: none; } .topo-menu > li > a, .tem-submenu > summary { display: block; padding: var(--esp-8) var(--esp-12); border-radius: var(--raio); cursor: pointer; white-space: nowrap; } /* #287: o gatilho do submenu é um -- sem o marcador nativo, e com o mesmo anel de foco dos links da barra. */ .tem-submenu > summary { list-style: none; } .tem-submenu > summary::-webkit-details-marker { display: none; } /* Realce do cromo por CLAREZA, nao por outra cor: sobre a barra de tinta, um branco a 12% marca o item sem introduzir um segundo azul competindo com o azul de acao. */ /* #145: sobre fundo claro, o realce por clareza vira realce por SOMBRA -- branco a 12% sobre branco é invisível. */ .topo-menu > li > a:hover, .tem-submenu > summary:hover, .tem-submenu[open] > summary { background: var(--line-2); } /* O ITEM ATIVO, que não existia: azul com sublinhado de 2px, como na referência. `aria-current="page"` é o seletor DE PROPÓSITO -- é o atributo que um leitor de tela anuncia, então marcar por ele faz a mesma marcação servir aos dois. Marcar por classe deixaria o leitor de tela sem nada. */ .topo-menu a[aria-current="page"] { color: var(--azul); font-weight: var(--peso-forte); box-shadow: inset 0 -2px 0 var(--azul); border-radius: var(--raio) var(--raio) 0 0; } .topo-direita { margin-left: auto; display: flex; align-items: center; gap: var(--esp-8); flex: none; } .tem-submenu { position: relative; } .submenu { display: none; position: absolute; top: 100%; left: 0; z-index: 10; min-width: 200px; margin: 0; padding: var(--esp-4); list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--raio); box-shadow: var(--sombra-suspensa); } /* #287: abre por clique/Enter (`open` do
), não por hover -- é o que funciona no toque. O ui.js fecha ao clicar fora e no Esc (MENUS_FLUTUANTES). */ .tem-submenu[open] .submenu { display: block; } .submenu a { display: block; padding: var(--esp-8); color: var(--ink); border-radius: var(--raio-miudo); } .submenu a:hover { background: var(--azul-fraco); } /* O submenu de "Trocar" fica no extremo direito da barra (`.topo-direita` tem `margin-left: auto`). `left: 0` (o padrao de `.submenu`, pensado para "Cadastros", perto da esquerda) faz este dropdown de 200px de largura comecar na borda esquerda do proprio gatilho e continuar para a direita -- passando da borda da janela e ficando com pontos fora do viewport (`elementFromPoint` devolve `null` ali, achado da revisao final: o mouse real nao alcanca coordenada nenhuma fora da tela). Ancorar pela direita (`right: 0`) mantem o dropdown inteiro dentro da largura visivel. */ .topo-direita .submenu { left: auto; right: 0; } .ocultar-valores { background: transparent; border: 0; cursor: pointer; font-size: 16px; padding: var(--esp-4) var(--esp-8); position: relative; display: inline-flex; align-items: center; } /* #288: o ícone SVG da barra (lupa, olho) alinha pela linha de base do texto. */ .gatilho-busca .icone, .ocultar-valores .icone { display: block; flex: none; } .gatilho-busca { display: inline-flex; align-items: center; gap: var(--esp-6); } .ocultar-valores:hover { background: var(--line-2); border-radius: var(--raio); } /* #60, item 4: estado LIGADO do "ocultar valores". A barra diagonal e desenhada em CSS, nao trocando o emoji: glifo depende da fonte instalada (num contêiner sem fonte de emoji o proprio olho ja sai como quadrado vazio), e um estado que some junto com a fonte nao e estado. O fundo aceso repete a informacao sem depender de cor sozinha. #163 -- E ESSA REDUNDANCIA TINHA PARADO DE EXISTIR. Fundo aceso (rgba branco .18) e diagonal (#fff) eram os DOIS brancos, sobre a barra que o #145 tornou branca: 1,00:1 cada. O estado ligado nao tinha sinal visual nenhum -- so o emoji e o `aria-pressed` --, que e exatamente o defeito que este item existiu para corrigir. Agora usa o vocabulario de LIGADO do sistema (`--azul-fraco` + `--azul`), o mesmo de `.segmentado input:checked` e do item de menu com `aria-current`; a diagonal da 4,75:1 sobre o fundo aceso. Guarda: tests/test_contraste_163.py. */ .ocultar-valores.ativo { background: var(--azul-fraco); border-radius: var(--raio); } .ocultar-valores.ativo::after { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; background: var(--azul); /* #163: era #fff, invisivel sobre a barra clara */ transform: rotate(-20deg); pointer-events: none; } /* Coluna central: sem um teto de largura, numa tela de 1600px a linha de leitura e a grade do dashboard se esticam ate perder ritmo. A tabela de lancamentos e larga por natureza, mas nao precisa furar esta coluna: ela ja rola dentro do proprio quadro (`.rolagem-horizontal`), que e o que a mantem utilizavel sem quebrar o ritmo da pagina. */ /* #78 tinha erguido este teto para 1800px, com o argumento de que 640px de tela vazia em 1920 eram desperdicio. O #79 reverte para 1280: o argumento media errado, e a largura de 1800 produzia o erro mais caro num sistema financeiro -- uma linha tao larga que o olho atravessa a tela e le o valor da linha errada (o dono comparou com o Controlle; a leitura dele e a certa). A largura da TELA e a decisao; a largura das COLUNAS e a consequencia -- e quem resolve coluna larga e teto por coluna (`.gruda-desc`, `.col-categoria`, `.col-contato`, `.col-conta`, em componentes.css), nao um `main` mais largo. O DEFEITO DE MEDICAO do #78, encontrado no #79: a comparacao "cabe/nao cabe" usava `main.clientWidth`, que INCLUI os 16px de padding de cada lado. Os 640px "vazios" de 1920 nunca existiram como espaco util -- 32px deles eram o proprio padding sendo contado duas vezes. O criterio certo: const s = getComputedStyle(main); const util = main.clientWidth - parseFloat(s.paddingLeft) - parseFloat(s.paddingRight); const transborda = tabela.scrollWidth > util + 1; Com esse criterio, NENHUM teto de `main` faz o DRE caber: a tabela mede 1357px e exige util >= 1357 (container >= 1389px) -- mas o notebook de 1366px do dono e o proprio VIEWPORT, entao mesmo um teto de 1800px nao ajuda ali (o container nunca passa de 1366, util 1334, ainda menor que 1357). Alargar o `main` das outras onze telas so para uma que continua sem caber onde mais importa era otimizar para a excecao. O DRE resolve como a Analise ja resolve desde o #71: rola dentro do proprio quadro (ver `.rolagem-horizontal:has(...)`, abaixo) -- nao empurra a pagina. `:has(.tabela)` e nao `:has(table)`: o Inicio tem `` mas nao a classe (medido) -- e la o conteudo mede 1168px, entao esticar so espalharia os cartoes do painel. `:has()` em vez de uma classe por template: assim nao ha template para editar, nem risco de uma tela nova nascer com o teto errado por esquecimento -- quem manda e o CONTEUDO. O projeto ja usa `:has()` em varios lugares. O `:has(.tabela)` que existia aqui (#78) sumiu de proposito: ele so fazia sentido enquanto valia um numero DIFERENTE do `main` base. Com os dois iguais (1280px), manter a regra seria CSS morto -- se um teto por conteudo voltar a fazer sentido um dia, escreva-o com o numero medido daquela vez, nao ressuscite este. */ main { max-width: 1280px; margin: 0 auto; padding: var(--esp-16); } /* `flex-wrap: wrap` nao e enfeite: sem ele, numa tela de 390px o titulo mais o navegador de mes somam mais que os 358px uteis e a PAGINA INTEIRA passa a rolar para o lado (medido: 398 contra 390). Com a quebra, o periodo desce para a propria linha e continua centrado. */ .cabecalho { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-8) var(--esp-16); margin-bottom: var(--esp-16); } /* #169 -- `templates/conciliacao/resultado.html:6` poe o

FORA do `.cabecalho`, entao `.cabecalho h1` sozinho nao o alcancava e ele saia no 2em padrao do navegador (32px): o unico titulo do sistema maior que 24px. `.titulo-pagina` entra no MESMO seletor em vez de ganhar um bloco proprio -- copiar o `24px` para um segundo lugar faria a divida de tipografia literal crescer (`tests/test_tipografia_166.py`, teto 70) para pintar o mesmo tamanho duas vezes. O `margin: 0` continua servindo: o que vem depois na tela e um

, que traz a propria margem de cima. #288: FEITO -- o

entrou no `{% block cabecalho %}` e `.titulo-pagina` saiu do seletor (e do template). O parágrafo abaixo é o registro do que era: O conserto de RAIZ nao e este: e o

entrar no `{% block cabecalho %}` do `base.html`, como em toda outra tela -- hoje `resultado.html` renderiza dois

, um vazio no cabecalho e este no conteudo. Isso mexe na estrutura do template e na disposicao da tela, e ficou de fora desta rodada. */ .cabecalho h1 { font-size: 24px; margin: 0; } /* #275: na lista o

fica só para o leitor de tela (o menu do topo já diz onde a pessoa está). `display: contents` tira a caixa dele do flex sem tirá-lo da árvore de acessibilidade -- o span de dentro continua sendo o nome da página. Sem isto, o h1 "vazio" ainda ocupava um gap de 12px. */ .cabecalho h1:has(> .oculto-visual) { display: contents; } /* #275: o período e a nota do eixo (#212) numa linha só, no cabeçalho. */ .periodo-com-eixo { display: flex; align-items: center; gap: var(--esp-10); flex-wrap: wrap; } .cabecalho .nota-do-eixo { margin: 0; white-space: nowrap; } .cabecalho-esquerda { display: flex; align-items: center; gap: var(--esp-12); } /* `flex: 1` no centro mantem o periodo no MEIO da linha mesmo quando o titulo da esquerda e mais largo que as acoes da direita. */ .cabecalho-centro { flex: 1; display: flex; justify-content: center; } .cabecalho-direita { display: flex; align-items: center; gap: var(--esp-8); margin-left: auto; } /* #278 (dono, com a foto: "o campo seleção de data não ficou centralizado"): com `flex: 1` o centro se centralizava no ESPAÇO QUE SOBRA entre as laterais -- a densidade à esquerda (#277) e o lado direito vazio -- e o mês ficava deslocado para a direita (medido: 1047px numa página cujo centro é 933). Numa grade `1fr auto 1fr` as duas laterais têm a MESMA largura, e o centro é o centro da página, seja o que for que haja nas pontas. Só acima de 900px: abaixo disso o cabeçalho continua flex com quebra de linha (`flex-wrap`), que é o que o mantém inteiro em 360px (prova 104). */ @media (min-width: 901px) { .cabecalho { display: grid; grid-template-columns: 1fr auto 1fr; } .cabecalho-centro { flex: initial; justify-self: center; } .cabecalho-direita { margin-left: 0; justify-self: end; } } /* A tabela e larga por natureza (seis colunas de dado financeiro). Sem este contorno, numa tela de 390px a PAGINA INTEIRA rolava para o lado: medido, scrollWidth 994 contra clientWidth 390. Agora quem rola e a tabela, dentro do proprio quadro, e o resto da tela fica no lugar. O `min-width` e o que faz o contorno servir para alguma coisa: sem ele a tabela se espremeria ate virar uma coluna de letras soltas em vez de rolar. */ /* O `overflow-x: auto` vive dentro de uma media query, e nao solto, porque um eixo com overflow diferente de `visible` empurra o OUTRO eixo para fora de `visible` tambem (mesma regra que ja mordeu os submenus da barra). Isso transforma este quadro num container de rolagem, e o `position: sticky` do cabecalho de dia passa a se ancorar NELE em vez de na pagina -- medido: ao rolar 400px o cabecalho ia para -12, ou seja, nao grudava. Acima de 900px a tabela cabe na coluna central e nao precisa do quadro; abaixo, precisa, e ali o sticky perde o efeito -- troca consciente, porque numa tela estreita a lista nao e o gesto principal. */ .rolagem-horizontal > .tabela { min-width: 520px; } @media (max-width: 900px) { .rolagem-horizontal { overflow-x: auto; } } /* Notebook de 13" (#70, Tarefa 10): com "Mostrar variação mês a mês (AH)" ligado, a tabela cruzada da Análise ganha 12 colunas extras (.cruzada-ah) e ultrapassa 1280px -- medido: scrollWidth 1684 contra clientWidth 1280 em 1280x800, no estado default os dois dão 1280. É pré-existente à rodada inteira (o checkbox e as colunas .cruzada-ah já existiam antes da Tarefa 1); só ficou visível porque a medição do Passo 1 mede a URL nua, e ninguém tinha ligado o controle e medido antes. Não dá para simplesmente tirar `overflow-x: auto` da media query acima para todo `.rolagem-horizontal`: ela também envolve a lista de Lançamentos, cujo cabeçalho de dia (`.linha-dia > th`) e colunas congeladas (`.gruda-*`) dependem do quadro NÃO ser um contexto de rolagem acima de 900px (ver o comentário logo acima). Medido (Tarefa 10, nível 1: Chromium contra o servidor real): tirar a media query faz `overflow-y` computar `auto` também (regra do CSS -- um eixo non-visible arrasta o outro), o que muda o ancestral de rolagem do `position: sticky` do cabeçalho de "a página" para o próprio quadro, e o cabeçalho PARA de grudar -- medido em `getBoundingClientRect()` a vários scrolls: topo vai a -341px/-741px (some da tela) em vez de grudar em 0. A asserção "gruda ao rolar" de `verificar_navegador.py` NÃO pega essa quebra (ela só testa scroll=400, onde o topo ainda dá positivo) -- quem prova é a medição direta acima, não aquele script; ver docs/medicoes/interface-70.txt. A tabela cruzada não tem nem cabeçalho de dia nem `.gruda-*`, então o `:has()` abre a exceção só para ela: DRE, Lançamentos e Cadastros medem `overflow-x: visible` (inalterado) com esta regra presente -- o seletor não casa neles, então "antes" e "depois" são o mesmo estado por construção (medido e registrado em docs/medicoes/interface-70.txt). #79: `.tabela-dre` entra na MESMA exceção, pelo MESMO motivo -- ela também não tem cabeçalho de dia nem `.gruda-*` (é uma grade de mês x linha), então nada do argumento acima muda ao somar seu seletor. ⚠️ #98: "sem sticky nenhum" era verdade quando esta frase foi escrita e DEIXOU DE SER — o DRE agora gruda rótulo, TOTAL e AV (ver "TRÊS ÂNCORAS GRUDADAS", adiante). O argumento acima não muda por isso: o que aquele texto protege é o sticky VERTICAL do cabeçalho de dia de Lançamentos, que `overflow-x: auto` quebraria; o do DRE é HORIZONTAL e nasce DENTRO deste mesmo quadro rolável -- ele existe por causa desta regra, não apesar dela. O motivo de precisar da exceção agora e não antes: o `main` voltou a ter 1280px (ver o comentário de `main:has(.tabela)`, acima), e nessa largura a tabela do DRE (1357px medidos, doze meses + total + AV, nenhuma coluna truncável) sempre transborda a caixa útil -- ela rola dentro do próprio quadro em vez de empurrar a página, exatamente como a Análise já fazia. Lançamentos e Cadastros continuam de fora: Lançamentos tem o cabeçalho de dia sticky que esta regra quebraria (medido acima), e por isso cabe por teto de COLUNA (`.celula-descricao`/`.celula-categoria`/ `.col-conta`), não por rolagem do quadro. */ .rolagem-horizontal:has(.tabela-cruzada, .tabela-dre) { overflow-x: auto; } /* Sem `overflow: hidden` aqui. Ele existia so para recortar os cantos arredondados, mas `overflow` diferente de `visible` faz do elemento um contexto de rolagem -- e o `position: sticky` do cabecalho de dia passava a se ancorar NA TABELA, que nao rola, em vez de na pagina. Medido: rolando 400px o cabecalho ia para -12. O arredondamento nao se perde: fundo de elemento ja e recortado pelo `border-radius` sem precisar de overflow nenhum. */ /* `width` e `border-collapse` saíram (medido via CDP, #70): componentes.css define os dois na MESMA especificidade e carrega depois -- nunca aplicavam. `background`, `border-radius` e `box-shadow` continuam aqui porque componentes.css não os declara em `.tabela`: são a ÚNICA fonte do aspecto de cartão das tabelas legadas (DRE, Lançamentos), e apagá-los tirava a moldura de todas elas. */ .tabela { background: var(--surface); border-radius: var(--raio); box-shadow: var(--sombra); } /* Cabecalho de coluna como rotulo, do mesmo vocabulario das sobrancelhas dos blocos: e nomenclatura, nao conteudo. `text-align`, `font-size`, `font-weight`, `color`, `padding` e `border-bottom` saíram (medido via CDP, #70): componentes.css redeclara todos com a mesma especificidade e carrega depois. `letter-spacing` e `text-transform` ficam -- são a ÚNICA fonte do rótulo em versalete rastreado; sem eles o cabeçalho das tabelas legadas vira texto comum. */ .tabela th { letter-spacing: .07em; text-transform: uppercase; } /* O realce de hover saiu (medido via CDP + `:hover` real no navegador, #70): `.tabela tbody tr:hover th, .tabela tbody tr:hover td` de componentes.css tem a MESMA especificidade (0,2,3) e carrega depois -- o #f6f8fc daqui nunca aparecia; quem sempre vencia era o #fafaf8 de componentes.css. */ .direita { text-align: right; font-variant-numeric: tabular-nums; } /* `.negativo` VIVE EM componentes.css DESDE O #98 (`var(--vermelho)`, um token só para valor negativo em toda tela). Esta linha ficou aqui, apagada, porque apagá-la em silêncio faria alguém reescrevê-la: era ELA, com `var(--erro)` (#b3261e), contra os três lugares que já usavam `--vermelho` (#c0392f), que produzia o mesmo -453.497,05 em duas cores em duas telas. Não ressuscitar. */ .positivo { color: var(--sucesso); } /* #169: `.cat-vazio` (`templates/categorias/tela.html:55`) e mesma função que `.vazio` -- aba de categorias sem nenhum no --, so nao tinha regra nenhuma e saia como texto corrido. Entra no SELETOR em vez de ganhar copia das mesmas tres declaracoes: mesma funcao, mesmo componente (diretriz #77, item 6). */ .vazio, .cat-vazio { color: var(--ink-3); text-align: center; padding: var(--esp-24); } /* Rotulo so para leitor de tela: a coluna de tipo e um ponto colorido, e uma coluna sem nome nenhum deixa quem usa leitor de tela sem referencia. */ /* Sem `position: absolute`, de proposito. A receita classica de "so para leitor de tela" usa absolute, e dentro de uma TABELA QUE ROLA isso e uma armadilha: sem ancestral posicionado, o bloco contenedor do span vira a PAGINA, ele escapa do recorte do quadro de rolagem e vai parar na posicao estatica dele -- a 500px, na tabela rolada. Resultado medido: a pagina inteira passava a rolar 114px para o lado numa tela de 390px, com todos os elementos visiveis dentro dos 390. Em fluxo, ocupando 1px e recortado, ele nao escapa de nada e continua invisivel e legivel por leitor de tela. */ .oculto-visual { display: inline-block; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Cabecalho clicavel: o `` ocupa a celula inteira para o alvo do mouse ser a coluna, e nao so as letras. */ .col-ordenavel > a { display: block; color: inherit; text-decoration: none; } .col-ordenavel > a:hover { color: var(--azul); } .col-ativa > a { color: var(--ink); } .seta-ordem { margin-left: var(--esp-4); font-size: var(--corpo-micro); } /* #289: era 8px, o menor glifo do sistema */ .celula-tipo { width: 1%; padding-right: 0; } /* Select que so parece select quando se chega nele. Numa lista de 50 linhas, 50 caixas com borda e seta viram uma parede de controles e escondem o dado; a borda aparece no hover e no foco, quando a intencao de editar existe. */ .categoria-na-linha { border-color: transparent; background: transparent; height: 26px; padding: 0 var(--esp-4); max-width: 100%; color: inherit; appearance: none; -webkit-appearance: none; } .categoria-na-linha:hover, .categoria-na-linha:focus { border-color: var(--line); background: var(--surface); } .ponto-tipo { display: inline-block; width: 8px; height: 8px; border-radius: 50%; } .ponto-entrada { background: var(--sucesso); } .ponto-saida { background: var(--erro); } /* #257: a terceira cor da bolinha. `--azul` é o MESMO token do valor da transferência (#236) e do seletor da conciliação (#249) -- três lugares que dizem a mesma coisa, com a mesma tinta. Elemento gráfico exige 3:1 e este mede 5,17:1 sobre `--surface`. */ .ponto-transferencia { background: var(--azul); } /* Marca de parcelado/recorrente: diz que a linha tem irmas. Sem ela, uma parcela parece um gasto avulso e a leitura do mes engana. */ .marca-repete { color: var(--ink-3); font-size: var(--corpo-nota); margin-left: var(--esp-6); white-space: nowrap; } .marca-repete .parcela { font-size: var(--corpo-micro); margin-left: var(--esp-2); font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------- extrato -- */ /* O cabecalho do dia GRUDA no topo enquanto se rola: numa lista longa, perder de vista em que dia se esta e o que faz a pessoa rolar de volta. `position: sticky` num `

` nao funciona em todos os navegadores; quem gruda e a celula. */ /* #99: o `top` é ZERO no CSS e passa a ser ESCRITO pelo ui.js quando o dia está acabando (empurrão) -- ver "empurrão do cabeçalho de dia" lá. Sem JS o comportamento é o de antes do #99: gruda e não é empurrado. */ /* #100: o `top` deixou de ser 0 — agora é a BANDA do cabeçalho da tabela, que passou a grudar (`.tabela thead th`, componentes.css). Sem isso os dois grudariam no mesmo lugar e o de dia sumiria atrás do da tabela. O padrão é `--altura-linha` porque é a altura que `.tabela th` declara: sem JavaScript o comportamento já fica certo. O `ui.js` refina com a altura MEDIDA do `` (que difere quando o cabeçalho quebra linha) e é ele quem escreve o `top` inline no empurrão. */ /* #105: o fundo e as bordas SAÍRAM daqui. Estavam escritos (`#f2f5fa` e `var(--line)`) e nunca chegaram à tela: `.tabela th` (componentes.css) empata em especificidade e vence por vir depois na cascata do #70 — a faixa de dia saía branca, igual às linhas de lançamento, que é o defeito que o dono reportou. Reescrevê-los aqui não adiantaria; quem pinta agora é `.tabela .linha-dia > .dia-fundido`, em componentes.css, que ganha por especificidade. Não devolver cor a este seletor: ela seria descartada de novo, e em silêncio. */ /* #168: aqui estava `var(--banda-cabecalho, var(--altura-linha))`, e `--banda-cabecalho` NUNCA EXISTIU -- nao em tokens.css, nao em app.css, nao em componentes.css, e nenhum JS a define por setProperty (procurado nos tres arquivos e em static/js/). O fallback era, desde sempre, o valor real. Isso e o terceiro irmao do defeito desta rodada, e o unico dos tres achado por guarda em vez de leitura: um token perdedor (--raio), um token fora de casa (as 72 cores) e um token FANTASMA, que nao chegou a nascer. O fallback sumiu junto: enquanto ele estava ali, o dia em que alguem criasse `--banda-cabecalho` mudaria esta tela sem que ninguem tivesse pedido -- e o `var()` sem fallback quebra visivel, enquanto com fallback mente (a licao do #164). */ .linha-dia > th { position: sticky; top: var(--altura-linha); z-index: 2; padding: var(--esp-8); font-weight: var(--peso-forte); text-align: left; } .dia-data { color: var(--ink); font-size: var(--corpo-nota); letter-spacing: 0; text-transform: none; } .dia-semana { color: var(--ink-3); font-weight: var(--peso-normal); margin-left: var(--esp-6); } .dia-contagem { color: var(--ink-3); font-weight: var(--peso-normal); margin-left: var(--esp-12); font-size: var(--corpo-mini); } .dia-rotulo { font-size: var(--corpo-micro); font-weight: var(--peso-medio); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-right: var(--esp-8); } /* Rodape do dia: os dois saldos. Fundo de papel, nao de superficie, para o olho ler como "fim de bloco" e nao como mais um lancamento. */ .linha-saldo > td { background: var(--saldo-fundo); border-bottom: 2px solid var(--line); padding: var(--esp-8); height: auto; } .saldo-par { display: inline-flex; align-items: baseline; margin-left: var(--esp-24); } /* #281: a coluna Data do modo lista (curta, dd/mm) e o pé de saldos. O saldo final é o número que se procura no rodapé: peso do total do dia (#87). */ .celula-data { white-space: nowrap; color: var(--ink-2); font-variant-numeric: tabular-nums; } /* #282 (dono: "a lista de saldos deve ser sobreposta"): a régua de saldos gruda no PÉ DA JANELA enquanto a tabela rola e assenta no fluxo quando a lista acaba -- `sticky`, não `fixed`, para não cobrir a legenda nem o fim da página. Quatro células iguais separadas por fio (a mesma grade do Controlle, que o dono usa há anos); o Saldo é o número que se procura e leva o peso. `z-index: 3` fica ABAIXO da barra de lote (4); com linhas marcadas a barra toma o pé e esta sobe a altura dela (`--altura-barra-de-lote`). */ .rodape-de-saldos { position: sticky; bottom: 0; z-index: 3; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: var(--esp-8); padding: var(--esp-8) 0; background: var(--surface); border-top: 1px solid var(--line); box-shadow: var(--sombra-regua); } .saldo-celula { display: flex; align-items: baseline; justify-content: center; gap: var(--esp-8); padding: 0 var(--esp-12); font-variant-numeric: tabular-nums; } .saldo-celula + .saldo-celula { border-left: 1px solid var(--line); } .saldo-celula .dia-rotulo { margin-right: 0; } .rodape-de-saldos .saldo-final { font-weight: var(--peso-forte); font-size: var(--corpo); } /* #298: ESTE NÚMERO NÃO MANDA -- é o retrato, não a régua. O valor vivo é MEDIDO no navegador pelo `lista-41.js`, que observa a `.barra-de-lote` e escreve a altura real desta variável no ``. O declarado aqui vale só para o caminho SEM JavaScript, e por isso carrega a medição de HOJE (09/09/2026, 1366×768: a barra ocupa 700,5 -> 768, altura 67,5px). O 61px que estava aqui era a medição do #282 e ENVELHECEU quando o #289/#290 mexeram na altura dos botões: sobrou 6,5px de sobreposição, com a barra (`z-index: 4`) por cima da borda inferior da régua. Trocar um número mágico por outro só adiaria o mesmo defeito -- daí a medição. */ :root { --altura-barra-de-lote: 67.5px; } .acao-lote:has(input[name="selecionados"]:checked) .rodape-de-saldos { bottom: var(--altura-barra-de-lote); } @media (max-width: 900px) { .rodape-de-saldos { grid-template-columns: repeat(2, 1fr); row-gap: var(--esp-6); } } @media print { .rodape-de-saldos { position: static; box-shadow: none; } } .saldo-realizado { color: var(--azul); } /* Linha vencida: faixa ambar na linha inteira, nao so na etiqueta. O que esta atrasado precisa ser visto ao varrer a lista, sem ler a coluna de situacao. Ambar, e nao vermelho, porque vermelho ja e "dinheiro que sai" e metade das linhas vencidas sao despesas. */ .linha-vencida > td { background: var(--vencido-fundo); } .tabela tbody tr.linha-vencida:hover td { background: var(--vencido-fundo-forte); } .resumo { display: flex; flex-wrap: wrap; gap: var(--esp-16); margin-bottom: var(--esp-8); color: var(--ink-3); align-items: center; } .exportar-csv { margin-left: auto; font-size: var(--corpo-nota); color: var(--azul); text-decoration: none; } .exportar-csv:hover { text-decoration: underline; } /* #313b: o Excluir da linha (lista e cartao) mora dentro do `form.acao-lote` e casava esta regra por ser submit. Virou `type="button"` (a exclusao falha fechada) -- `[data-confirma-exclusao]` guarda a MESMA margem, medida igual ao master na tela e na impressao. */ .acao-lote button[type="submit"], .acao-lote button[data-confirma-exclusao] { margin-bottom: var(--esp-8); } .tabela th:first-child, .tabela td:first-child { width: 1%; padding-right: 0; } .navegador-de-mes { display: flex; align-items: center; gap: var(--esp-12); } .navegador-de-mes .seta { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--raio-miudo); color: var(--azul); text-decoration: none; font-size: 18px; line-height: 1; } .navegador-de-mes .seta:hover { background: var(--azul-fraco); } /* #182 — ALVO DE CLIQUE, nao so texto. O `` nao tinha padding nenhum, entao a altura do alvo era a propria linha: 22,5px medidos contra os 24 do WCAG 2.5.8 (achado da `prova_interface_104` no #181). `min-height` mais o grid de centro dao os 24 sem mexer no tamanho da fonte -- e valem para as QUATRO telas que usam `componentes/seletor-de-periodo.html`. */ .navegador-de-mes .mes-atual { font-weight: var(--peso-forte); min-width: 140px; text-align: center; min-height: 24px; display: grid; place-items: center; } /* Faixa de alerta: ambar, nao vermelho. Vermelho ja significa "dinheiro que sai" em toda a interface; usa-lo tambem para aviso faria a faixa competir com os proprios valores que ela esta apontando. */ .alerta-faixa { display: flex; align-items: center; gap: var(--esp-12); flex-wrap: wrap; margin-bottom: var(--esp-12); padding: var(--esp-12) var(--esp-16); background: var(--alerta-fundo); border: 1px solid var(--alerta-borda); border-radius: var(--raio); } .alerta-icone { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--atencao); color: var(--branco); font-size: var(--corpo-nota); font-weight: var(--peso-maximo); } .alerta-faixa .valor { color: var(--atencao); } .alerta-acao { margin-left: auto; padding: 0 var(--esp-14); height: 28px; line-height: 28px; border-radius: var(--raio); background: var(--atencao); color: var(--branco); font-size: var(--corpo-nota); text-decoration: none; white-space: nowrap; } .alerta-acao:hover { background: var(--atencao-escuro); } .filtros { margin-bottom: var(--esp-8); } .filtros > summary { display: inline-block; cursor: pointer; list-style: none; padding: 0 var(--esp-16); height: var(--linha); line-height: var(--linha); background: var(--surface); border: 1px solid var(--line); border-radius: var(--raio); color: var(--azul); font-size: var(--corpo-nota); } .filtros > summary::-webkit-details-marker { display: none; } .filtros > summary:hover { background: var(--azul-fraco); } .filtros[open] > summary { margin-bottom: var(--esp-8); } .painel-filtros { display: flex; flex-wrap: wrap; gap: var(--esp-12); align-items: end; margin-bottom: var(--esp-8); background: var(--surface); padding: var(--esp-12) var(--esp-16); border-radius: var(--raio); box-shadow: var(--sombra); } /* #98/B8b: dentro da barra da lista o painel perde a moldura própria (a barra já é o cartão) e, ABERTO, toma a linha inteira em vez de esticar uma célula no meio da barra. `order: 9` o joga para o fim da linha flex, então ele quebra para baixo de tudo — sem isso o painel aberto empurraria os totais e as ações para uma terceira linha. */ .barra-da-lista .filtros { margin-bottom: 0; } /* #185, relato do dono: "ao clicar em Filtrar o botão pula uma linha, gerando um grande espaçamento". MEDIDO na foto local, viewport 1366: fechado o botão ficava em (325, 451), entre o Localizar e as ações; aberto ia para (369, 73) — 44px abaixo e 378px à esquerda. Ele sumia de onde a pessoa acabou de clicar, e a barra ia de 57px para 173px de altura. A CAUSA não era a intenção do #98/B8b (que segue valendo: aberto, o painel toma a linha inteira) — era ela ser aplicada ao `
` INTEIRO, que carrega o `` junto. `display: contents` faz o `
` deixar de gerar caixa: o summary e o painel viram itens flex diretos da barra, o botão fica onde sempre esteve, e só o PAINEL recebe a linha cheia. O `open` do details continua mandando na exibição do painel, como antes. */ .barra-da-lista .filtros[open] > summary { margin-bottom: 0; } .barra-da-lista .painel-filtros { display: none; } .barra-da-lista .filtros[open] ~ .painel-filtros { display: flex; flex: 0 0 100%; order: 9; } .barra-da-lista .painel-filtros { background: none; box-shadow: none; padding: var(--esp-10) 0 0; margin-bottom: 0; } /* #280: base de 120px (era 160) para os oito campos caberem numa linha só em 1366px -- medido no mock sobre a tela real: painel 130 -> 120px, e a primeira linha de dado sobe 50px. */ .painel-filtros label { display: flex; flex-direction: column; gap: var(--esp-4); flex: 1 1 120px; min-width: 0; } .painel-filtros input, .painel-filtros select { min-width: 0; } /* #280, desenho do dono: o rodapé do painel toma a linha inteira -- Filtrar GRANDE e Limpar à esquerda (primário à esquerda, secundário à direita, como todo `.acoes-do-formulario`), Salvar filtro à direita. A altura é explícita nos DOIS porque `button` e `a.btn` não herdam a mesma (#192): o `` saía 7px mais alto ao lado do botão. */ .rodape-do-painel { display: flex; flex: 0 0 100%; align-items: center; justify-content: space-between; gap: var(--esp-12); } .acoes-do-painel { display: flex; align-items: center; gap: var(--esp-8); } .acoes-do-painel .btn { height: 36px; margin: 0; padding: 0 var(--esp-24); font-size: var(--corpo); } /* MEDIDO: o painel mora dentro do `form.acao-lote`, e `.acao-lote button[type= "submit"]` (acima) dá 8px de margem embaixo ao Filtrar -- o Limpar (um ) não a tem, e saía 4px mais baixo no centro da linha. Mesma especificidade, declarado depois: vence. */ .acoes-do-painel button[type="submit"] { margin-bottom: 0; } /* #280: as fichas do filtro aplicado moram na barra, ao lado do Filtrar. */ .fichas-da-barra { margin: 0; } .fichas { display: flex; flex-wrap: wrap; gap: var(--esp-8); margin-bottom: var(--esp-8); align-items: center; } /* #289: pílula, como o `.chip` -- é o mesmo componente (filtro aplicado); era o único raio de 4px entre 13 pílulas. */ .ficha { background: var(--azul-fraco); color: var(--azul-escuro); padding: var(--esp-2) var(--esp-10); border-radius: 999px; font-size: var(--corpo-nota); } .ficha-limpar { font-size: var(--corpo-nota); color: var(--azul); } /* #289: 10px → 11px. É o chip de situação da lista (clicável desde o #274): o menor texto interativo do sistema não pode ser o menor texto do sistema. */ .marca { font-size: var(--corpo-mini); font-weight: var(--peso-medio); letter-spacing: .03em; padding: var(--esp-2) var(--esp-8); border-radius: 999px; white-space: nowrap; } .marca-pago { background: var(--sucesso-fraco); color: var(--sucesso); } .marca-aberto { background: var(--atencao-fraco); color: var(--atencao); } /* #212: a frase que diz por qual data a lista agrupa. Discreta de propósito: é contexto permanente da tela, não um filtro nem um aviso. */ .nota-do-eixo { font-size: var(--corpo-nota); color: var(--ink-3); margin: 0 0 var(--esp-8); } /* #212: a data de vencimento ao lado da marca "Pago", quando o dia do grupo é o do PAGAMENTO. Texto seco, sem pílula: é contexto, não estado -- duas pílulas lado a lado dariam à data o mesmo peso visual da situação. */ .dica-venc { font-size: var(--corpo-micro); color: var(--ink-3); margin-left: var(--esp-4); white-space: nowrap; } .paginacao { display: flex; gap: var(--esp-16); align-items: center; margin-top: var(--esp-16); } /* `min(200px, 100%)` e nao `200px`: com o `main` tendo 16px de padding de cada lado, uma tela de 390px deixa 358px de conteudo -- menos que 200px * 2, entao dois cartoes por linha ainda cabem, mas um minimo fixo maior que a largura disponivel estouraria a pagina. */ .cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--esp-16); margin-bottom: var(--esp-16); } /* NÃO é o `.cartao` da fundação (contêiner branco de componentes.css): este aqui é uma célula de número, com estado na borda. Renomeado no #70 para que a fundação possa valer em todas as telas sem apagar a barra colorida. */ .cartao-kpi { display: flex; flex-direction: column; gap: var(--esp-4); padding: var(--esp-16); background: var(--surface); border-radius: var(--raio); border-left: 3px solid var(--line); text-decoration: none; color: inherit; } .cartao-kpi:hover { background: var(--azul-fraco); } .cartao-kpi-valor { font-family: "Cifra", system-ui, sans-serif; font-weight: var(--peso-forte); font-size: 26px; font-variant-numeric: tabular-nums; } .cartao-kpi-quantidade { font-size: var(--corpo-nota); color: var(--ink-3); } /* #288: o nome da empresa na tela de escolha -- texto, não dinheiro. */ .cartao-empresa-nome { font-size: var(--corpo-heroi); font-weight: var(--peso-forte); line-height: 1.2; } .cartao-kpi-erro { border-left-color: var(--erro); } .cartao-kpi-sucesso { border-left-color: var(--sucesso); } .cartao-kpi-atencao { border-left-color: var(--atencao); } .painel { background: var(--surface); border-radius: var(--raio); padding: var(--esp-16); display: flex; flex-wrap: wrap; gap: var(--esp-24); align-items: center; } .rotulo { font-size: var(--corpo-nota); color: var(--ink-3); } .alerta { color: var(--erro); } .formulario { background: var(--surface); border-radius: var(--raio); padding: var(--esp-16); margin-top: var(--esp-16); max-width: 480px; } .formulario p { margin: 0 0 var(--esp-8); display: flex; flex-direction: column; gap: var(--esp-4); } .formulario label { font-size: var(--corpo-nota); color: var(--ink-3); } input, select, textarea { font: inherit; height: var(--linha); padding: 0 var(--esp-8); border: 1px solid var(--line); border-radius: var(--raio); background: var(--surface); color: var(--ink); } /* A regra acima e pensada para campo de texto/select; aplicada a um checkbox ela infla a caixinha para 32px de altura com borda e fundo, estourando a linha da tabela. Um checkbox usa o tamanho nativo. */ input[type="checkbox"] { height: auto; width: auto; padding: 0; border: 0; background: none; vertical-align: middle; } /* #290: o
` continuava em colunas (o `th` não tinha a regra), o que fazia a tela parecer "quase certa" e escondia a causa. O empilhamento era o desejado DENTRO da célula (data, valor, descrição), e é o que a `.pilha-celula` faz agora, sem tocar no modelo de tabela. NÃO devolver `display: flex` ao `td`. Medido no navegador (#229): antes, as três células nasciam em x=113 nas três linhas; depois, em x=113 / x=624 / x=880, na mesma linha. */ /* #293: TENTADO e REVERTIDO na mesma rodada -- fazer esta tabela herdar `.tabela` (componentes.css). A base traz `nowrap`, altura de 48px, `box-sizing: border-box` e cabeçalho em caixa alta, e as fotos mostraram o preço: a caixa de seleção invadindo a data, a descrição do banco em três linhas (perdeu a reticência) e "CATEGORIA E DIVERGÊNCIAS" quebrando em duas. O que a herança traria de bom -- cabeçalho grudado e hover de linha -- entra por duas regras próprias, logo abaixo, sem mexer no desenho medido do #229/#249. */ .tabela-conciliacao { width: 100%; border-collapse: collapse; table-layout: fixed; } .tabela-conciliacao thead th { position: sticky; top: 0; z-index: 3; background: var(--surface); } .tabela-conciliacao tbody tr:hover td { background: var(--linha-hover); } .tabela-conciliacao th { text-align: left; font-size: var(--corpo-nota); color: var(--ink-3); padding: var(--esp-6) var(--esp-8); border-bottom: 1px solid var(--line); } /* #252: o cabeçalho que ordena é um `` mandar na largura: a classe tem de * estar no `
` DESTRÓI A CÉLULA DE TABELA, e foi isso que empilhou as três colunas uma embaixo da outra em toda a tela de resultado. O elemento deixa de ser `table-cell`, o navegador gera célula anônima e a linha perde o alinhamento em coluna -- o `
` E no ``, senão a regra da célula não tem efeito nenhum * (a lição do #229). */ /* MEDIDO NO NAVEGADOR (1248 px de tabela), e a medição mudou o desenho: com * `26%` em cada lado, "No banco" saía com **447 px** e "No sistema" com 239 -- * os dois lados que se comparam, com pesos diferentes. A culpa era de um * `max-width: 0; min-width: 100%` que eu tinha posto no `` para truncar: * dentro de `table-layout: fixed` ele atropela a largura declarada. Truncar em * célula de tabela fixa não precisa disso -- as três propriedades de overflow * bastam. * * As larguras fixas foram ajustadas ao que o conteúdo MEDIDO usa (sobra de * 21 px na caixa, 16 px em estado, sistema e classificação): o que se recupera * vai para as duas colunas de TEXTO, que é onde o conteúdo é longo. */ .tabela-conciliacao .col-escolha { width: 28px; } .tabela-conciliacao .col-data { width: 88px; } .tabela-conciliacao .col-banco { width: 27.7%; } .tabela-conciliacao .col-valor { width: 116px; text-align: right; } /* 132 px, e o número saiu da MEDIÇÃO, não do olho: com 112 a etiqueta e o "Desfazer" deixavam de caber lado a lado, quebravam em duas linhas e a linha inteira subia de 51 para 81 px. Trinta pixels a mais aqui valem mais que trinta a mais nas colunas de texto, que já cortam com reticências. */ .tabela-conciliacao .col-estado { width: 132px; } .tabela-conciliacao .col-sistema { width: 27.7%; } .tabela-conciliacao .col-classificacao { width: 188px; } /* As colunas de texto cortam em vez de empurrar a tabela (R40: teto por coluna, nunca rolagem horizontal). */ .tabela-conciliacao .col-banco, .tabela-conciliacao .col-sistema .linha-memo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tabela-conciliacao .col-data { color: var(--ink-3); font-size: var(--corpo-nota); } .pilha-celula { display: flex; flex-direction: column; gap: var(--esp-2); } /* #229: o recorte do histórico por conta -- rótulo e campo na mesma linha, com o respiro do bloco. Mesmo desenho da busca de Cadastros (`.cadastro-busca`), que é o outro "filtro curto no topo de uma lista" do sistema. */ /* #230 -- EXTRATOS POR CONTA: o que falta subir, antes do que já entrou. Tabela densa e sem cor de fundo: quem chama a atenção é a ORDEM (o que falta está no topo) e o contador acima dela, não um realce por linha. Uma tela de trabalho não precisa de semáforo em toda linha para ser lida. Os três estados da prova reusam os MESMOS tokens da pílula da prévia (#70): mesma pergunta, mesma cor, em qualquer lugar do sistema. */ .tabela-extratos { width: 100%; border-collapse: collapse; margin-top: var(--esp-8); } .tabela-extratos th { text-align: left; font-size: var(--corpo-nota); color: var(--ink-3); padding: var(--esp-6) var(--esp-8); border-bottom: 1px solid var(--line); } .tabela-extratos td { padding: var(--esp-6) var(--esp-8); border-bottom: 1px solid var(--line-2); } .tabela-extratos .linha-sem-extrato td:first-child { font-weight: var(--peso-forte); } /* Sem largura, três colunas curtas numa tabela de 1280px abrem um vão morto entre a data e a prova -- o mesmo defeito que o #187 tirou da lista. A prova é DINHEIRO, então ela encosta na direita, como toda coluna de dinheiro do sistema (#98, item 5), e o vão vira alinhamento. */ .tabela-extratos .col-conta-nome { width: 45%; } .tabela-extratos .col-extrato-ate { width: 20%; } .tabela-extratos .col-prova { width: 35%; text-align: right; } .sem-extrato { color: var(--ink-2); font-weight: var(--peso-forte); } .prova-fecha { color: var(--verde); } .prova-diverge { color: var(--amarelo); font-weight: var(--peso-forte); } .prova-neutra { color: var(--ink-3); } .filtro-historico { display: flex; align-items: center; gap: var(--esp-8); margin-bottom: var(--esp-10); } .filtro-historico label { font-size: var(--corpo-nota); color: var(--ink-2); } /* Com a coluna limitada, memo sem espaço (PROT. 000000000001946207) estouraria a célula em vez de quebrar. */ .tabela-conciliacao .linha-memo { overflow-wrap: anywhere; } /* ===================== #249: A LINHA DO EXTRATO ===================== * Data à esquerda, descrição no meio, VALOR À DIREITA. Antes eram três * elementos empilhados (`.pilha-celula`), e a pilha era a causa dos 109,5 px * por linha medidos no navegador em 01/09/2026 -- oito linhas por tela onde a * referência do dono mostra dezenove. * * O valor encosta na direita porque é DINHEIRO (#98, item 5) e porque é assim * que uma coluna de valores vira régua: o olho varre a borda direita * procurando o que não bate, que é o trabalho desta tela. Sem * `tabular-nums` isso não funciona -- ver o token em `tokens.css`. * * A descrição é a única coisa que pode ser longa, então é ela que recebe o * `flex: 1` e o corte com reticências; data e valor nunca quebram. */ .tabela-conciliacao .valor, .tabela-conciliacao .linha-data, .regua-de-conciliacao .valor { font-variant-numeric: var(--num-tabular); white-space: nowrap; } .tabela-conciliacao .valor { font-weight: var(--peso-forte); } /* Verde entra · vermelho sai · AZUL muda de bolso (pedido do dono, #249). O azul não é enfeite: transferência não soma no resultado, e pintá-la de vermelho a faria parecer despesa em toda leitura rápida da coluna. Mesma decisão que o #236 tomou para a transferência exibida em uma linha. */ .tabela-conciliacao .valor-entrada { color: var(--verde); } .tabela-conciliacao .valor-saida { color: var(--vermelho); } .tabela-conciliacao .valor-transferencia { color: var(--azul); } /* 🔴 AS DUAS REGRAS DE LARGURA POR VISTA SAÍRAM AQUI (#249c). Elas vinham do primeiro desenho, quando a vista simples ESCONDIA o lado do sistema e a coluna da direita só classificava -- 56% para o banco, 30% para o resto. Quando as colunas passaram a ser as que o dono nomeou, elas continuaram valendo: seletor com atributo tem especificidade MAIOR que o de classe, então os `28.5%` novos nunca chegaram a valer. Medido antes de achar: "No banco" com 466 px e "No sistema" com 250 -- os dois lados que se comparam, com pesos diferentes, e a coluna que trunca era justamente a do sistema, onde as descrições são longas. */ /* NA VISTA SIMPLES A LINHA É UMA LINHA -- nas TRÊS colunas. Medido no navegador: com a célula do banco horizontal a linha caiu de 109,5 para 75,5 px, e os 30 px que sobravam eram as outras duas colunas ainda empilhando. Etiqueta de estado e "Desfazer" cabem lado a lado; categoria e divergência também. Na vista DETALHADO a pilha continua, porque lá o espelho tem três campos e a comparação é vertical. `align-items: baseline` alinha o texto das três colunas na MESMA linha de base -- sem isso, a etiqueta arredondada empurra o resto e a linha fica torta. */ .tabela-conciliacao[data-vista="simples"] .pilha-celula { flex-direction: row; align-items: baseline; gap: var(--esp-8); flex-wrap: wrap; } .tabela-conciliacao[data-vista="simples"] td { vertical-align: middle; } /* O que DIFERE, quando difere -- o rótulo em negrito porque um valor solto na coluna parece o valor da linha. */ /* #249: "Desfazer" aparece em TODA linha, e em azul sublinhado ele disputava atenção com o valor -- que é o que a pessoa veio ler. Ação secundária tem peso menor (diretriz 5): fica cinza, e o sublinhado só no ponteiro e no foco, onde ele confirma que é clicável. `--ink-3` sobre `--surface` = 4,76:1, medido. */ /* #289: era `.botao-link`; é o `.ligacao` do sistema no corpo miúdo da tabela -- em 15px a linha subia de 60 para 72px (prova 249). */ .tabela-conciliacao .ligacao { color: var(--ink-3); text-decoration: none; font-size: var(--corpo-mini); } .tabela-conciliacao .ligacao:hover, .tabela-conciliacao .ligacao:focus-visible { color: var(--azul-escuro); text-decoration: underline; } /* ============ #249b: A COLUNA DA DIREITA, VISTA CHEIA ============ * Foto de PRODUÇÃO, com as linhas casadas: a descrição do lançamento abria * cada uma com "no sistema ..." e ocupava três alturas de texto, empurrando a * etiqueta de categoria -- que é a AÇÃO -- para baixo. Duas correções: * * 1. A CATEGORIA VEM PRIMEIRO (a ordem está no template). É o que a pessoa * vem fazer nesta coluna. * 2. A DESCRIÇÃO É CONTEXTO: uma linha, cortada, com o texto inteiro no * `title`. Sem rótulo -- o cabeçalho da coluna já diz o que ela é, e "no * sistema" repetido em toda linha é a mesma repetição sem informação que * esta rodada foi tirar do outro lado (R12). * * E divergência de VALOR ou DATA não é a mesma notícia que a de descrição: * ali a linha pode ter casado com o lançamento ERRADO. Essa se vê. */ .espelho-descricao { display: block; font-size: var(--corpo-nota); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } /* `--amarelo` sobre `--amarelo-fraco` é o par que o #142 mediu para este uso: 4,51:1, e aqui o corpo é pequeno, então vale o mínimo de 4,5. */ .divergencia-grave { display: inline-block; font-size: var(--corpo-mini); font-weight: var(--peso-forte); padding: var(--esp-2) var(--esp-8); border-radius: 999px; /* #289: uma pílula só */ background: var(--amarelo-fraco); color: var(--amarelo); border: 1px solid var(--marca-ignorar-borda); font-variant-numeric: var(--num-tabular); } .linha-data { font-size: var(--corpo-nota); color: var(--ink-3); } .linha-memo { font-size: var(--corpo-miudo); } .linha-motivo { font-size: var(--corpo-mini); color: var(--ink-3); } /* Verde crédito, vermelho débito — os tokens medidos no #42 (AA). */ .tabela-conciliacao .positivo { color: var(--verde); font-weight: var(--peso-forte); } .tabela-conciliacao .negativo { color: var(--vermelho); font-weight: var(--peso-forte); } .marca-estado { display: inline-block; font-size: var(--corpo-mini); padding: var(--esp-2) var(--esp-8); border-radius: 999px; border: 1px solid var(--line); width: fit-content; } .marca-conciliar { background: var(--verde-fraco); color: var(--verde); border-color: var(--marca-conciliar-borda); } .marca-criar { background: var(--azul-fraco); color: var(--azul); border-color: var(--marca-criar-borda); } .marca-ignorar { background: var(--amarelo-fraco); color: var(--amarelo); border-color: var(--marca-ignorar-borda); } /* #109: mesmo par de tokens da `.conta-marca.neutra` — mesma razão, mesma correção. O portão não cobre esta tela; achada por busca dos irmãos. */ .marca-ja_importada { background: var(--line-2); color: var(--ink-2); } .etiqueta-categoria { display: inline-block; font-size: var(--corpo-mini); padding: var(--esp-2) var(--esp-8); border-radius: 999px; background: var(--line-2); width: fit-content; } /* #233: a categoria da linha virou CONTROLE. O `
` é o gatilho sem JavaScript nenhum -- clicar na etiqueta abre o combobox de busca do sistema e o "Editar lançamento". Sem o marcador nativo do ``, que aqui só somaria ruído: a etiqueta já parece clicável e tem `cursor: pointer`. */ .cat-editor > summary { cursor: pointer; list-style: none; } .cat-editor > summary::-webkit-details-marker { display: none; } .cat-editor[open] > summary { margin-bottom: var(--esp-4); } .cat-editor select { max-width: 100%; } /* A linha que ninguém classificou: tracejado e apagado, para se distinguir de uma categoria de verdade sem gritar. */ .etiqueta-vazia { border: 1px dashed var(--line); background: none; color: var(--ink-3); } /* #235: a linha que ficou sem lançamento volta ao fluxo. Os dois caminhos ficam lado a lado e miúdos -- é uma exceção na tela (uma linha em dez), não a ação principal dela. */ /* #236: a transferência em UMA linha, azul. Ela não é entrada nem saída -- o dinheiro mudou de bolso --, e o azul é o que o dono pediu para distinguir isso do verde/vermelho de quem soma no resultado. `--azul` sobre `--surface` é o mesmo par já medido do `.etiqueta-sugerida`. */ .valor-transferencia { color: var(--azul); font-weight: var(--peso-forte); } .linha-transferencia .celula-descricao a { color: var(--azul); } .acoes-da-linha { display: flex; gap: var(--esp-6); flex-wrap: wrap; } .busca-de-lancamento { margin-top: var(--esp-6); } .busca-de-lancamento input { width: 100%; } /* A lista de candidatos tem teto: 20 resultados não podem empurrar as linhas de baixo para fora da tela. */ .lista-candidatos { list-style: none; margin: var(--esp-6) 0 0; padding: 0; max-height: 220px; overflow-y: auto; } .lista-candidatos li { display: flex; gap: var(--esp-6); align-items: baseline; padding: var(--esp-4) 0; border-bottom: 1px solid var(--line-2); } .lista-candidatos .linha-memo { flex: 1; min-width: 0; overflow-wrap: anywhere; } /* #327: o candidato é para LER antes de casar -- a descrição quebra em vez de virar "Lançamento …" (a reticência da coluna, acima, vale para a linha da tabela, não para a lista de escolha), e o aviso de por que não casa desce para a linha de baixo, inteiro. */ .lista-candidatos li { flex-wrap: wrap; } .col-sistema .lista-candidatos .linha-memo { white-space: normal; overflow: visible; flex-basis: 8em; } .lista-candidatos li > .linha-motivo { flex-basis: 100%; } .etiqueta-sugerida { background: var(--azul-fraco); color: var(--azul); border: 1px dashed var(--etiqueta-sugerida-borda); } /* #289: `.botao-link` virou `.ligacao` (o link-botão do sistema, sublinhado no hover). */ /* #169 -- A PREVIA E A LISTA DA CONCILIACAO NUNCA TIVERAM REGRA. O #70 escreveu `.previa-saldo*` (logo abaixo) e parou ali: as sete classes que embrulham o resto do
  • -- `.previa`, `.previa-parada`, `.previa-arquivo`, `.previa-erro`, `.previa-conta`, `.previa-destinos`, `.previa-aviso` -- e os dois