` (margem de * fábrica zero) e só a área do servidor escreve `

`, * que o navegador entrega com `margin: 18.675px 0` -- 18,7 px empurrando o * título para baixo DENTRO do cartão e outros 18,7 separando-o do conteúdo. * Um componente que declara o próprio padding não pode herdar a margem de * um elemento que ele não escolheu. Zerar aqui NÃO mexe em quem já era * `
`: div nasce com margem 0 (conferido depois da mudança -- a Início * continua em 10 px). Guarda: * `test_o_cabecalho_do_cartao_nao_carrega_margem_de_fabrica`. / margin: 0; / #310/5 — E O CORPO PELA MESMA RAZÃO DA MARGEM. Zerar só a margem deixou o * mesmo componente em DOIS corpos na mesma tela: ~24 px no * `
` e ~15 px no `
`, e * foi esta rodada que criou a diferença ao usar `
`. O corpo que * fica é o do SISTEMA: `
` (Início, A pagar) sempre * herdou `--corpo`, então nenhuma tela antiga se move -- só a área do * servidor, que era a única fora do padrão. Declarar `font-size` junto de * `margin` ao estilizar `
` é o que o app.css já faz (`:1607`, `:1763`). * Guarda: `test_o_cabecalho_do_cartao_tem_UM_corpo_so`. / font-size: var(--corpo); padding: var(--esp-12) var(--esp-16); border-bottom: 1px solid var(--line-2); font-weight: var(--peso-forte); } .cartao-corpo { padding: var(--esp-16); } / ---------- Campo ---------- / .campo { display: block; width: 100%; box-sizing: border-box; padding: 7px var(--esp-10); border: 1px solid var(--linha-campo); / 3:1 (#42); estrutura fica em --line / border-radius: calc(var(--raio) - 3px); background: var(--surface); color: var(--ink); font: inherit; } / #168: era `:focus` puro. `:focus` casa também com o clique de MOUSE, e como esta regra tem especificidade (0,2,0) ela vencia o `:focus-visible` global de app.css (0,1,0) -- o sistema tinha, na prática, DOIS dialetos de foco, e o dialeto que ganhava era o que pinta anel para quem nunca tocou o teclado. Promovida. Em campo de TEXTO editável a promoção não tira nada de ninguém: o navegador trata todo campo editável como sempre merecedor de foco visível, e `:focus-visible` dispara nele mesmo no clique. Quem realmente para de pintar é o campo de escolha suspenso, mais abaixo neste arquivo -- lá o anel aceso pelo clique de mouse era ruído permanente. ⚠️ A palavra que nomeia aquele elemento NÃO aparece aqui de propósito, e não é preciosismo: a guarda de desenho do #71 (em `tests/`) acha o bloco dele com um `re.search` cujo `[^{]` atravessa comentário, chave e quebra de linha -- ela lê o PRIMEIRO lugar do arquivo onde a palavra aparece e assume que a próxima `{` abre o bloco certo. Escrevê-la aqui em cima faz a guarda ler o corpo desta regra e reprovar por "não declara appearance". Custou uma suíte vermelha no #168. Não reintroduzir a palavra acima do bloco de desenho. Geometria intocada de propósito -- offset 0 é o dialeto de CAMPO deste arquivo (o anel encosta na borda que a cor já reforça); o offset 1px do `.btn` é o dialeto de BOTÃO. Mudar a pseudo-classe não é hora de mudar forma. `.campo-monetario input` herda daqui -- não tem, nem precisa de, regra própria. / .campo:focus-visible { outline: 2px solid var(--azul); outline-offset: 0; border-color: var(--azul); } .campo::placeholder { color: var(--ink-3); } /* ---------- Etiqueta (pílula de estado) ---------- / .etiqueta { display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 999px; font-size: var(--corpo-rotulo); font-weight: var(--peso-forte); white-space: nowrap; } .etiqueta.ok { background: var(--verde-fraco); color: var(--verde); } .etiqueta.aberto { background: var(--azul-fraco); color: var(--azul); } .etiqueta.vencido { background: var(--vermelho-fraco); color: var(--vermelho); } .etiqueta.falta { background: var(--amarelo-fraco); color: var(--amarelo); } / ---------- Chip (filtro aplicado) e sugestão (filtro proposto) ---------- / .chip { display: inline-flex; align-items: center; gap: var(--esp-6); padding: var(--esp-2) var(--esp-6) var(--esp-2) var(--esp-10); border-radius: 999px; background: var(--azul-fraco); color: var(--azul); font-size: var(--corpo-miudo); font-weight: var(--peso-medio); } .chip button { border: 0; padding: 0 var(--esp-4); background: none; color: inherit; font: inherit; cursor: pointer; border-radius: 999px; } .chip button:hover { background: var(--chip-remover-hover); } .chip button:focus-visible { outline: 2px solid var(--azul); } .sugestao { display: inline-flex; align-items: center; gap: var(--esp-6); padding: var(--esp-2) var(--esp-10); border: 1px dashed var(--ink-3); border-radius: 999px; background: none; color: var(--ink-2); font-size: var(--corpo-miudo); cursor: pointer; } .sugestao:hover { border-color: var(--azul); color: var(--azul); } .sugestao:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; } / ---------- Pastilha (iniciais da conta) ---------- / .pastilha { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--azul-fraco); color: var(--azul); font-size: var(--corpo-mini); font-weight: var(--peso-maximo); letter-spacing: 0.02em; } / ---------- Abas (navegação entre fatias de uma mesma tela) ---------- / / Nasceu como `.aba-cadastro` no #57, quando os cinco Cadastros ganharam abas. O nome amarrava o componente a UMA tela; a mecânica não tem nada de cadastro. Movida para cá e renomeada na Tarefa 6 (#70) -- os valores são copiados das regras reais de static/css/app.css (não do bloco do brief da tarefa, que tinha `gap`/`margin-bottom`/`font-weight` levemente diferentes por ter sido escrito antes da última mudança no arquivo). Quem marca a aba corrente para o leitor de tela é o `aria-current="page"` do HTML -- a cor é reforço, não a informação. / .abas { display: flex; gap: var(--esp-4); flex-wrap: wrap; margin-bottom: var(--esp-12); border-bottom: 1px solid var(--line); } .aba { padding: var(--esp-6) var(--esp-12); font-size: 14px; color: var(--ink-2); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; } .aba:hover { color: var(--ink); } .aba.ativa { color: var(--azul); border-bottom-color: var(--azul); font-weight: 550; } / #168, medido antes de escrever: a aba NÃO está sem foco visível e NÃO leva regra própria. É um ``, recebe foco do DOM, e nada aqui declara outline -- então vale o `:focus-visible` global de app.css (`outline: 2px solid var(--azul)`, e `--acao: var(--azul)`, a MESMA cor dos anéis deste arquivo). Escrever `.aba:focus-visible` local seria reintroduzir o anel por componente que o #163 mandou não reintroduzir: o global acompanha sozinho se a cor de ação mudar, o local não. Sem `:active` também -- aba é navegação, o pressionar já é respondido pela tela trocando, e afundar 1px em texto sem moldura lê como desalinho, não como botão. / / ---------- Tabela ---------- / / O wrapper .rolo é quem rola no eixo X. As sombras de borda entram por * classe (.sombra-esq/.sombra-dir) postas pelo JS SÓ quando há conteúdo * escondido daquele lado — recalculadas em scroll/resize/troca de tela, * porque um container display:none mede zero e mente. / .rolo { overflow-x: auto; } .tabela { width: 100%; border-collapse: separate; / sticky + fundo por célula exigem separate / border-spacing: 0; } .tabela th, .tabela td { height: var(--altura-linha); box-sizing: border-box; padding: var(--pad-linha) var(--esp-10); border-bottom: 1px solid var(--line-2); / divisória; zebra é proibida / background: var(--surface); text-align: left; vertical-align: middle; white-space: nowrap; } .tabela th { font-size: var(--corpo-rotulo); font-weight: var(--peso-forte); color: var(--ink-3); border-bottom: 1px solid var(--line); } / ⭐ #100: O CABEÇALHO DA TABELA GRUDA, E O DE DIA GRUDA ABAIXO DELE — dois * níveis coordenados, nunca sobrepostos (referência v3). * * `top: 0` e não a altura da barra do topo: `.topo` NÃO é sticky neste sistema * (medido — `app.css` lhe dá `min-height: 56px` e nenhuma `position`), então * ela rola para fora e a banda de cima é a própria viewport. O 102px que a v3 * usa vem da fita que a referência tem e o sistema não — copiá-lo grudaria o * cabeçalho 102px abaixo do topo, com uma faixa vazia acima. * * O sticky vai nos `th` e não no `thead`: é o que funciona igual em todo * navegador, e o bloco continente de um sticky dentro de tabela é a TABELA * INTEIRA (medido no #99) — ou seja, ele gruda enquanto a tabela estiver na * tela, que é exatamente o desejado. * * `z-index: 3` porque o cabeçalho de dia é 2: quando os dois se encontram, * quem fica por cima é o da tabela. O fundo já é opaco (`var(--surface)`, na * regra acima); sem isso as linhas apareceriam por baixo ao rolar. / .tabela thead th { position: sticky; top: 0; z-index: 3; } / ⭐ DINHEIRO ALINHA À DIREITA EM TODA TABELA DO SISTEMA — E ISTO É REGRA DE * COMPONENTE, NÃO DE TELA (#98). * * O dono reportou o defeito em UMA tela (Cadastros/Contas: 190.295,38 / 0,00 / * -453.497,05 à esquerda, milhares em colunas diferentes) e apontou A pagar * como o certo. A medição no navegador (1920×1080, getComputedStyle) mostrou * que o problema é MUITO maior e tem uma causa só, de cascata: * * `.direita` mora em app.css e vale (0,1,0). `.tabela th, .tabela td`, logo * acima, vale (0,1,1) e declara `text-align: left`. Especificidade maior * vence — então `class="direita"` NUNCA funcionou DENTRO de uma tabela, em * NENHUMA tela, desde que componentes.css passou a carregar por último * (#70). O `` do DRE, os `` * da Análise e a coluna VALOR de Lançamentos estavam todos à esquerda, * escritos como se estivessem à direita. `.num` funcionava porque é * `.tabela td.num` (0,2,1) — e é por isso que só A pagar parecia certo. * * Medido ANTES (elementos de tabela cujo texto é dinheiro, computados como * NÃO-direita): Lançamentos 114, Análise 36, DRE 15, Cadastros/Contas 4, * Cadastros/Cartões 2, Início 1 — contra 0 em A pagar e A receber. * * Duas classes entram junto de `.num`, e cada uma por um motivo: * - `.direita` — para RESSUSCITAR o que os templates já pediam; * - `.valor` — porque `.valor` é O papel tipográfico do dinheiro * (app.css: "Cifra", tabular-nums) e obrigar quem escreve template a * lembrar de DUAS classes para uma coisa só é o defeito se repetindo. * Com esta regra, `class="valor"` numa célula basta. * Fora de tabela nada muda: lá o alinhamento é de LAYOUT (flex/margin-left: * auto), e `text-align` numa caixa que mede o próprio conteúdo não faria nada. / .tabela td.num, .tabela th.num, .tabela td.direita, .tabela th.direita, .tabela td.valor, .tabela th.valor { text-align: right; } / ⭐ UM VERMELHO SÓ PARA VALOR NEGATIVO (#98). * * O dono viu o MESMO -453.497,05 vermelho no Início e preto em Cadastros/ * Contas. A varredura achou uma TERCEIRA cor, em A pagar/A receber: o sistema * tinha DOIS tokens de vermelho vivos ao mesmo tempo — * `--erro` #b3261e (app.css) via `.negativo` * `--vermelho` #c0392f (tokens.css) via `.ap-sobra .num.negativo`, * `.tabela-conciliacao .negativo`, * `.heroi-saida` * — e Cadastros não punha classe nenhuma, então o negativo saía em `--ink`. * * A REGRA: valor monetário negativo é vermelho em toda tela, com UM token só, * `--vermelho`. Positivo não ganha cor (tinta normal); o verde continua * reservado ao par entrada/saída dos relatórios. O motivo, em uma linha: numa * coluna lida em diagonal oito horas por dia o "−" some antes do número, e a * cor é a redundância que faz o negativo ser VISTO — mas só funciona se for a * MESMA cor em toda tela, e eram três. * * Por que `--vermelho` e não `--erro`: (a) o #70 decidiu que cor literal só * vive em tokens.css, e `--erro` é literal do app.css; (b) o código mais novo * (#71 em diante) já tinha convergido para `--vermelho` em três lugares; * (c) contraste sobre --surface #fff: 5,43:1, AA para texto normal (o --erro * media 6,54:1 — os dois passam, então o desempate é (a) e (b)). * `--erro` FICA, com o papel que sobrou e que é o nome dele: estado de ERRO * (`.errorlist`, `.alerta`, `.menu-perigo`), que não é valor negativo. / .negativo { color: var(--vermelho); } / A marca de conferência com o banco (#48) nasceu para a LISTA de contas do * Início, que é FLEX: daí `flex-basis:100%` (empurra a marca para a linha de * baixo) e `padding-left:36px` (alinha sob o nome, depois da marca redonda). * No #98 ela saiu da célula de dinheiro de Cadastros/Contas e virou COLUNA * própria — e dentro de um `` as duas declarações não só não ajudam como * eram parte do "aviso espremido ao lado do saldo" que o dono reportou: não há * linha de baixo para quebrar, e 36px de recuo dentro de uma célula é recuo * puro. Escopo mínimo (`.tabela td >`) para não tocar no Início. / .tabela td > .conta-nao-conferida, .tabela td > .conta-conferida, .tabela td > .conta-sem-ancora { flex-basis: auto; padding-left: 0; margin-top: 0; } .conta-sem-ancora { font-size: var(--corpo-mini); color: var(--ink-3); } / PARA ONDE VAI A SOBRA DE LARGURA NAS SEIS TELAS DE CADASTRO (#98). * * Tirar a coluna ATIVO devolveu de 114px (Contas) a 1058px (Tags) à tabela — e * o layout automático não devolve esse espaço para quem precisa dele: ele o * REPARTE. Medido no navegador, com a ATIVO fora e sem esta regra: * Tags NOME 631 · AÇÕES 617 ← a coluna de um BOTÃO ficou com 617px, e o * "Editar" pulou de x=1516 para x=977, * saindo da posição que ele tem nas outras * quatro abas (diretriz 6 do dono: mesma * função, mesma posição) * Centros NOME 85 · CÓDIGO 1084 * Cartões NOME 75 · DIA DE VENCIMENTO 740 * * `width:100%` na PRIMEIRA coluna (o NOME, nas seis fatias) torna ela a coluna * gulosa: ela fica com toda a sobra e as demais encolhem para o próprio * conteúdo. Depois, medido: * Tags NOME 1170 · AÇÕES 79 Contas NOME 999 · BANCO 74 · SALDO 97 * Centros NOME 1089 · CÓDIGO 81 Cartões NOME 903 · LIMITE 86 · DIA 180 * e o "Editar" volta a x=1516 nas CINCO. * * Por que o NOME e não outra: é a coluna que IDENTIFICA o registro e a única * que trunca com dado real — a semente tem nome curto de propósito e não diz * nada sobre isso (regra do #78/#79); os nomes de conta da Link ce é que * precisam do espaço. Mesma escolha que `.gruda-desc` já faz em A pagar. / .tabela-cadastro th:first-child, .tabela-cadastro td:first-child { width: 100%; } / #209: a coluna de ACOES de Cadastros tem largura PROPRIA, e nao a do * conteudo da aba da vez. * * O comentario acima (#98) termina em "e o Editar volta a x=1516 nas CINCO". * Isso parou de valer no #195, que deu o Excluir so as cinco fatias com motor * de fusao (`{% if pode_excluir_fatia %}` em templates/cadastros/lista.html): * Cartoes nao tem fundir/retratar. Com `celula-acoes { width: 1% }` (app.css) * a coluna encolhe ate o conteudo, entao uma acao a menos vira uma COLUNA mais * estreita -- e o botao Editar, MESMA funcao, muda de lugar conforme a aba. * Ninguem decidiu isso; foi efeito colateral do #195. * * Medido em 27/08/2026, 1440x900, ANTES desta regra: * Contas/Centros/Contatos/Tags ACOES 146,92px Editar em x=1207 * Cartoes ACOES 78,50px Editar em x=1276 (+69px) * O conteudo mais largo que a tela produz e "Editar Excluir": 58,50 + 63,64 + * 4,78 de intervalo + 20 de padding da celula = 146,92px. 148px e esse numero * ARREDONDADO de 146,92 para cima -- os 1,08px que sobram nao tem justificativa * funcional nenhuma, sao arredondamento para numero redondo, e chama-los de * "folga" seria inventar razao para numero magico. O que importa e o valor ser * MAIOR que o natural das cinco abas: com isso a coluna passa a medir 148px em * TODAS -- alinhamento por declaracao, nao por coincidencia de dois rotulos * terem a mesma largura. Quem quiser trocar 148 por 147 nao precisa de * permissao: a guarda (prova_interface_98:394) exige IGUALDADE EXATA do x nas * cinco abas, sem tolerancia, entao ela reprova qualquer valor que nao alinhe. * * O escopo e `.tabela-cadastro` DE PROPOSITO: `.celula-acoes` tambem veste * Lancamentos, a tela de Cartao e Usuarios, e nessas tres a celula guarda o * menu `⋯` e mede 47px -- numero de que o `#cartao-tela .gruda-valor * { right: 47px }` (abaixo) depende, com guarda de colisao de `` na * prova_interface_121. Alargar `.celula-acoes` sem escopo mexeria nas quatro * telas de uma vez. Medido depois desta regra: Lancamentos 47px e Cartao 47px, * inalterados nas duas larguras. * * Se o rotulo dos botoes crescer, as quatro abas passam de 148px e Cartoes * fica para tras: a prova_interface_98 (item 7.4, "a coluna ACOES cai na MESMA * posicao nas cinco abas") reprova. O numero nao apodrece em silencio. / .tabela-cadastro th.celula-acoes, .tabela-cadastro td.celula-acoes { min-width: 156px; } / #291: era 148; com "Excluir…" (#290) a coluna media 5px a mais que a de Cartões, que só tem Editar (prova 98) / .tabela tbody tr:hover th, .tabela tbody tr:hover td { background: var(--linha-hover); } .tabela tbody tr.selecionada th, .tabela tbody tr.selecionada td { background: var(--azul-fraco); } .sub-linha { display: block; font-size: var(--corpo-rotulo); color: var(--ink-3); } :root[data-densidade="compacto"] .sub-linha { display: none; } / Colunas congeladas. As larguras são pares amarrados: * seleção mede 34px -> a descrição gruda em left:34px; * ações mede 172px -> o valor gruda em right:172px. * Mudou um, muda o outro. * * #79: ações media 246px desde o #36 (`ea8af23`) e o comentário daquela * época só documentava o ACOPLAMENTO, nunca justificava o VALOR -- medido * agora (`.acoes-linha` no hover real, dois botões "Dar baixa"/"Adiar"): * conteúdo 140,8px (82,95 + 53,84 + 4px de gap) + 20px de padding da célula * (10px de cada lado) = 160,8px preciso. 246px era ~89px de folga pura. * 172px dá ~11px de sobra sobre o preciso -- o suficiente para um foco * visível não cortar borda, sem devolver a folga antiga. / .tabela .gruda-sel { position: sticky; left: 0; width: 34px; min-width: 34px; max-width: 34px; z-index: 2; } .tabela .gruda-desc { position: sticky; left: 34px; z-index: 2; } .tabela .gruda-valor { position: sticky; right: 172px; z-index: 2; } .tabela .gruda-acoes { position: sticky; right: 0; width: 172px; min-width: 172px; max-width: 172px; z-index: 2; } / #205: na tela de cartão a coluna que fica à direita do valor é só a de ações; o `right: 172px` acima foi medido para a lista de Lançamentos, que tem Situação E Ações depois dele. Medido em 1366px ANTES desta linha (com a coluna de ações já na tabela, sem este ajuste): o `` Valor ocupava 1011-1134 e o Centro de custo ia até 1136 -- os dois se sobrepunham, e a coluna Ações (celula-acoes) media 1259-1306, 47px de largura. A prova de navegador mede que nenhum `` se sobrepõe a outro, então este número não pode apodrecer em silêncio. / #cartao-tela .tabela .gruda-valor { right: 47px; } / Teto por coluna, por CLASSE -- nunca por `nth-child`: a mesma coluna * (categoria, conta...) aparece em posições DIFERENTES em cada tela, então * uma regra posicional acertaria a coluna errada numa tela vizinha. * * A técnica é CSS puro: `max-width` limita o MÍNIMO que a coluna EXIGE, não * o máximo que ela pode ocupar -- numa tabela `width:100%` sem excedente, a * folga que sobra é redistribuída de volta pelo algoritmo de layout (medido: * os mesmos tetos abaixo rendem larguras finais MAIORES que o valor nominal * quando o container tem espaço de sobra). `overflow: hidden` + * `text-overflow: ellipsis` seguram o `white-space: nowrap` global * (`componentes.css` acima) para dentro do teto -- ele continua protegendo * as colunas curtas (VALOR, CONTA, datas) de quebrar linha; aqui ele é o que * garante uma única linha para a reticência aparecer. * * `.gruda-desc` (Descrição, A pagar) já é o teto da própria coluna -- não * precisa de classe extra. `.celula-descricao`/`.celula-categoria` * (Lançamentos) e as três abaixo (A pagar) são a mesma técnica, uma por * estrutura de tela: onde a coluna já tinha nome próprio, o teto entra * nele; onde não tinha (Categoria/Conta/Contato do A pagar, Conta de * Lançamentos), a classe nasceu aqui. `.col-conta` é comum às duas telas de * propósito -- é a MESMA coluna (nome de conta bancária) nas duas. / .tabela .gruda-desc { max-width: 260px; overflow: hidden; text-overflow: ellipsis; } .tabela .celula-descricao { max-width: 280px; overflow: hidden; text-overflow: ellipsis; } .tabela .celula-categoria { max-width: 180px; overflow: hidden; text-overflow: ellipsis; } .tabela .col-categoria { max-width: 150px; overflow: hidden; text-overflow: ellipsis; } .tabela .col-contato { max-width: 160px; overflow: hidden; text-overflow: ellipsis; } .tabela .col-conta { max-width: 140px; overflow: hidden; text-overflow: ellipsis; } / ⭐ #187: OS TETOS ENCOLHEM ENTRE 901px E 1200px, e este intervalo NÃO é * arbitrário -- ele é exatamente a faixa que ficava sem saída. * * MEDIDO (Chromium, HTML de produção da Link ce, 19/08/2026): a tabela da * lista soma 1153px de colunas (seleção 30 + tipo 28 + Descrição 280 + * Sinais 73 + Categoria 180 + Conta 140 + Responsável 120 + Valor 153 + * Situação 102 + Ações 47). Em 1093px de largura útil -- que é um 1366 com * zoom de 125%, o caso real de quem usa notebook -- a PÁGINA inteira passava * a rolar para o lado (scrollWidth 1169 contra clientWidth 1093). * * 🔴 A saída óbvia está proibida, e por medição, não por gosto: ligar * `overflow-x: auto` no `.rolagem-horizontal` acima de 900px faz o * `overflow-y` computar `auto` junto (um eixo non-visible arrasta o outro), * o quadro vira o ancestral de rolagem do `position: sticky`, e o CABEÇALHO * PARA DE GRUDAR -- medido no #70/Tarefa 10, topo indo a -341px. Por isso a * media query de rolagem para em 900px, e por isso a correção aqui é por * TETO DE COLUNA (R40), que não toca no contexto de rolagem. * * A ordem do que encolhe segue o que a coluna perde ao ser truncada: nome de * categoria e de conta têm prefixo repetido e o `title` mostra o inteiro; * a descrição é a identidade da linha e encolhe por último e menos. / @media (min-width: 901px) and (max-width: 1200px) { .tabela .celula-descricao { max-width: 220px; } .tabela .celula-categoria { max-width: 130px; } .tabela .col-conta { max-width: 110px; } .tabela .col-responsavel { max-width: 90px; overflow: hidden; text-overflow: ellipsis; } } / Abaixo de 1000px sobravam ainda 49px (medido: scrollWidth 1029 contra 980). * Aqui a descrição também cede -- acima deste ponto ela é a última a encolher, * mas numa tela deste tamanho a alternativa é a página rolar para o lado, que * é pior para TODAS as colunas. Abaixo de 900px a media query de rolagem * assume e o quadro passa a rolar sozinho. / @media (min-width: 901px) and (max-width: 1000px) { .tabela .celula-descricao { max-width: 180px; } .tabela .celula-categoria { max-width: 110px; } .tabela .col-conta { max-width: 95px; } } / Sombra na fronteira congelada, só quando há conteúdo escondido do lado. / .rolo.sombra-esq .gruda-desc { box-shadow: var(--sombra-coluna-esq); } / #287: era `-var(--sombra-coluna-esq)` -- CSS inválido, descartado: a fronteira direita nunca ganhava sombra. O token certo existia sem uso. / .rolo.sombra-dir .gruda-valor { box-shadow: var(--sombra-coluna-dir); } / ⭐ O CHECKBOX DE SELEÇÃO É SEMPRE VISÍVEL; SÓ AS AÇÕES DEPENDEM DA LINHA * ATIVA (#98, decisão do dono). * * O que estava errado, e é diretriz violada e não gosto: a MESMA função — * marcar N linhas e agir em lote — era desenhada de dois jeitos. Em * `Lançamentos` o checkbox é `` sem classe, SEMPRE * visível (`templates/lancamentos/linha.html`); em `A pagar` o mesmo controle * só existia no `:hover`. Diretriz 6 do #77: "mesma função, mesmo componente, * mesma posição — se duas telas fazem a mesma coisa de jeitos diferentes, uma * das duas está errada". Quem não tinha caminho era o MOUSE: a tela não dava * pista nenhuma de que havia o que selecionar até o ponteiro passar por cima. * * O custo em densidade é ZERO PIXEL, medido no navegador sobre o HTML de * produção (449 linhas, `horizonte=30`), antes e depois: largura da tabela * 1246→1246, altura do documento 28450→28450, linhas na 1ª dobra 11→11 * (1920×1080) e 6→6 (1366×768). A razão é estrutural: `opacity` não tira do * fluxo, e a coluna de seleção já ocupava 34px fixos, pintada ou não. * * As AÇÕES continuam no hover/foco de propósito: com tudo visível a tela * pintaria 449 caixas MAIS 898 botões, e 898 botões permanentes numa tela * olhada oito horas por dia é a poluição que a diretriz 4 proíbe. * * `:focus-within` NÃO É ENFEITE — sem ele a tabela fica inacessível por * teclado, e ele JÁ FUNCIONAVA (medido: 12 `Tab` do topo chegam ao checkbox * da 1ª linha, e ao entrar o foco acende as ações). Não remover. / .tabela .acoes-linha { opacity: 0; display: inline-flex; gap: var(--esp-4); } .tabela tbody tr:hover .acoes-linha, .tabela tbody tr:focus-within .acoes-linha { opacity: 1; } / #306: 24x24 e o minimo de alvo de clique (WCAG 2.5.8); o checkbox nu do navegador mede 13x13. A celula tem 34px, cabe sem mexer na altura da linha. / .tabela .gruda-sel input[type="checkbox"] { margin: 0; width: 24px; height: 24px; } / Cabeçalho de agrupamento e rodapé de saldo do dia. O conteúdo vive num * sticky em left:0 — senão o texto some no scroll lateral. / .tabela .dia-cab td, .tabela .dia-saldo td { background: var(--page); font-size: var(--corpo-rotulo); color: var(--ink-2); height: auto; padding-top: 5px; padding-bottom: 5px; } .tabela .dia-cab td { font-weight: var(--peso-forte); } / #105: a MOLDURA da linha de agrupamento, igual nas três listas. A v3 * (`referencia-visual-v3.html`, `.dia-cab td`) fecha a faixa em cima E * embaixo com `--line`; A pagar e A receber vinham sem borda superior e com * a inferior em `--line-2` — a divisória fraca, que é a de SEPARAR LINHA DE * DADO, não a de fechar bloco. Medido antes: topo 0px, base #f1f0ec. * Fica em regra própria porque `.dia-saldo` não é faixa de bloco e continua * só com o fundo. / .tabela .dia-cab td { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } / #105: A FAIXA DE AGRUPAMENTO NÃO REAGE AO HOVER — nas três listas. * `.tabela tbody tr:hover th/td` (linha 319) pinta #fafaf8 em QUALQUER linha, * e numa faixa de estrutura isso faz duas coisas ruins: promete interação que * não existe (medido — a faixa não tem listener de clique; o `a-pagar.js` só * lhe reescreve a contagem e a soma) e CLAREIA a faixa, desfazendo no ponteiro * o contraste que ela existe para ter. O hover continua inteiro nas linhas de * dado, que é onde ele rastreia a leitura e revela `.acoes-linha`. * Precisa ser regra própria por causa da conta de especificidade: a do hover é * (0,2,3) e passaria por cima do fundo declarado acima, que é (0,2,1). Esta é * (0,3,3). Em Lançamentos a regra da faixa já é (0,3,0) e venceria sozinha — * está escrito aqui assim mesmo, porque comportamento igual nas três telas não * deve depender de um acidente de contagem de seletor. / .tabela tbody tr.dia-cab:hover > td, .tabela tbody tr.linha-dia:hover > th { background: var(--page); } .cola { position: sticky; left: 0; display: inline-block; padding-left: var(--esp-10); padding-right: var(--esp-10); } / #87: cabeçalho de dia e rodapé de saldo de Lançamentos FUNDIDOS numa linha. * Medido antes de desenhar (regra #39; protótipo com este CSS + os piores * valores reais da Link ce em produção — saldo -10.081.451,11, total de dia * 19.419.080,40, "50 lançamentos"): as seis informações exigem 895,8px de * 1238px úteis da célula (main 1280 − 2×16 − 2×10) — cabem numa linha só, * com 342px de sobra. `height: auto` porque a linha de estrutura não precisa * dos 48px de uma linha de dado: 6px de respiro bastam (≈34px no total). * A linha herda o sticky de `.linha-dia > th` (app.css) de propósito — ver * o comentário no template. / .tabela .linha-dia > .dia-fundido { height: auto; padding-top: var(--esp-6); padding-bottom: var(--esp-6); } / ⭐ #105: A FAIXA DE DIA DE LANÇAMENTOS PINTA `--page`, COMO A DAS OUTRAS * DUAS LISTAS — E A DECLARAÇÃO PRECISA MORAR AQUI, NÃO EM `app.css`. * * O defeito que o dono viu: a faixa de dia de Lançamentos saía BRANCA, do * mesmo tom das linhas de lançamento, enquanto A pagar e A receber a * destacavam. `app.css` declarava `background: #f2f5fa` em `.linha-dia > th` * e essa declaração NUNCA CHEGOU À TELA: `.tabela th { background: * var(--surface) }` (acima, neste arquivo) empata em especificidade — as duas * são (0,1,1) — e vence por vir depois na cascata do #70. Medido no navegador * antes da mudança: faixa #ffffff, linha de dado #ffffff. * * Por isso a correção não é "consertar o valor lá": qualquer cor escrita em * `app.css` para este seletor continua morta. O seletor daqui é (0,2,1) e * ganha de `.tabela th` por especificidade, não por ordem. * * `--page` e não um tom novo: é o que `.dia-cab` das outras duas listas já * usa e o que a v3 manda para as três. / .tabela .linha-dia > .dia-fundido { background: var(--page); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .dia-fundido-conteudo { display: flex; align-items: baseline; gap: var(--esp-12); } .dia-fundido-saldos { margin-left: auto; display: inline-flex; align-items: baseline; gap: 18px; } / #187: a faixa do dia virou TRÊS células, e o total mora na coluna Valor. * As duas células novas herdam o fundo e as bordas de `.dia-fundido` (a regra * do #105, acima) — sem isto a faixa sairia listrada, com um pedaço `--page` e * dois brancos, que é o defeito de cobertura por outro caminho. / .tabela .linha-dia > .dia-total, .tabela .linha-dia > .dia-resto { background: var(--page); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); height: auto; padding-top: var(--esp-6); padding-bottom: var(--esp-6); } / O total é o número que se procura na faixa: mesmo corpo e peso que tinha * quando morava na fita (a regra de hierarquia do #87 continua valendo), só * que agora na coluna certa. O rótulo fica antes, curto, no mesmo padrão dos * outros pares. / .tabela .linha-dia > .dia-total { white-space: nowrap; } .dia-total .dia-rotulo { margin-right: var(--esp-4); } .dia-total .valor { font-size: var(--corpo-miudo); font-weight: 650; } / Hierarquia (o próprio prompt do #87 reprova seis textos com o mesmo peso): * a data âncora fica no 600/12px de `.dia-data`; os saldos são contexto — * valor em peso 400 (o 600 de `.valor` é para linha de dado); o total do dia * é o número que se procura — maior, mais pesado e com cor de sinal. A regra * do total vem DEPOIS para vencer a dos saldos na mesma especificidade. / .dia-fundido-saldos .saldo-par .valor { font-weight: var(--peso-normal); } / #187: `.dia-liquido` MORREU aqui -- o total saiu da fita e virou célula * própria (`.dia-total`, abaixo). A regra ficou órfã no mesmo commit em que o * elemento saiu, e regra órfã é o que faz a próxima pessoa procurar um * elemento que não existe. / / #87 (sequência): o realizado ESMAECE quando repete e ganha ÊNFASE quando * muda — a variação é que informa (regra do dono, #87). Quem decide "mudou" * é `agrupar_em_dias` (core/relatorios/extrato.py): desde o #88, comparação * com o VIZINHO DE BAIXO na ordem exibida (= dia anterior no calendário) — * "cor = dinheiro se moveu NESTE dia"; última linha da página sempre forte. * Esmaecido = --ink-3, token existente, com o contraste MEDIDO contra o fundo * REAL da linha fundida NO NAVEGADOR (prova_interface_87, seção 7). * ⚠ ATUALIZADO NO #105: o fundo real deixou de ser var(--surface) #fff e * passou a ser var(--page) #f7f7f5 (a regra logo acima) — o número velho, * 4,875:1, foi medido contra o branco e EXPIROU quando o sistema mudou (regra * do #87 sobre número medido). O de hoje está em prova_interface_105, que * mede os seis textos da faixa contra o fundo que o navegador pinta. * Contexto histórico: o #f2f5fa que `app.css` declarava para `.linha-dia > th` * nunca chegou à tela — `.tabela th` o vencia por ordem na cascata do #70 —, * e é justamente isso que o #105 corrigiu. É também a cor * que o valor do Previsto já herda de `.tabela th`: a linha inteira fica * quieta e o ÚNICO forte é o que mudou. * A diferença esmaecido/ênfase vem de MAIS ênfase no que mudou (o azul que o * valor já tinha + peso 600), nunca de mais apagamento — condição do dono. * --azul (tokens.css) == --acao (app.css) == #276fc6, 5,029:1 no mesmo fundo. * As regras vêm DEPOIS da de peso 400 acima para vencer na mesma * especificidade. O valor nunca é omitido: quem decide é a classe, o span * existe sempre (sticky — o contexto grudado precisa do número). / .dia-fundido-saldos .saldo-realizado.realizado-igual { color: var(--ink-3); } .dia-fundido-saldos .saldo-realizado.realizado-mudou { color: var(--azul); font-weight: var(--peso-forte); } / A Compacta encolhe TAMBÉM a linha fundida, não só as linhas de dado — é a * linha de ESTRUTURA, e estrutura é o primeiro lugar de onde a densidade * tira espaço. Medido em 1366×768 com o HTML de produção: com a fundida em * 27,75px (padding 3px) a 5ª linha de dado terminava em 776px — 8px abaixo * da viewport, por causa das fundidas intermediárias; padding 2px + * line-height 1.25 derrubam a fundida para ~20px e a 5ª linha entra. / / #209: a regra alcanca as TRES celulas da faixa, e nao so a primeira. * Entre o #105 e o #187 a faixa era UMA celula, e mexer no padding dela * bastava. O #187 partiu a faixa em `.dia-fundido` + `.dia-total` + * `.dia-resto` e deu `var(--esp-6)` de padding as duas novas (regra acima), * sem estende-las a esta -- e a altura de uma linha de tabela e a da celula * MAIS ALTA. Medido em 27/08/2026, antes desta correcao, em 1366x768 e * 1920x1080: a faixa media 33,75px na Normal e 33,75px na Compacta, com * `.dia-fundido` ja em padding 2px e as duas irmas segurando a linha em 6px. * A Compacta encolhia a linha de DADO (48 -> 41,5px) e nao encolhia nada da * ESTRUTURA -- exatamente o oposto do que o paragrafo acima decidiu. * Guardado por prova_interface_87 ("Compacta encolhe a linha fundida"), que * exige a Compacta pelo menos 4px menor que a Normal. / :root[data-densidade="compacto"] .tabela .linha-dia > .dia-fundido, :root[data-densidade="compacto"] .tabela .linha-dia > .dia-total, :root[data-densidade="compacto"] .tabela .linha-dia > .dia-resto { padding-top: var(--esp-2); padding-bottom: var(--esp-2); } :root[data-densidade="compacto"] .dia-fundido-conteudo { line-height: 1.25; } / Relatório de muitas colunas (DRE tem até 13 meses; a tabela cruzada, mais). * A densidade é DECLARADA aqui, não herdada de uma segunda tipografia global * -- era assim que o sistema tinha dois corpos de texto sem ninguém ter * decidido isso (#70). / .tabela-densa { font-size: var(--corpo-denso); } .tabela-densa th, .tabela-densa td { height: var(--altura-linha-densa); padding: var(--esp-4) var(--esp-8); } / ---------- Toast de desfazer ---------- / .toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: var(--esp-12); padding: var(--esp-10) var(--esp-16); border-radius: var(--raio); background: var(--ink); color: var(--branco); box-shadow: var(--sombra-flutuante); z-index: 60; } .toast .btn-mini { background: none; border-color: var(--sobre-escuro-borda); color: var(--branco); } .toast .btn-mini:hover { background: var(--sobre-escuro-hover); } .toast-contador { color: var(--sobre-escuro-fraco); font-size: var(--corpo-miudo); min-width: 2ch; text-align: right; } / ---------- Véu (fundo de modal, drawer, diálogo e paleta) ---------- / .veu { position: fixed; inset: 0; background: var(--veu); z-index: 50; } / Fundo travado (#77): com QUALQUER camada aberta (modal, drawer, diálogo, * paleta), a página atrás não pode rolar por baixo do véu -- o véu cobre a * TELA, mas sem isto a roda do mouse ainda movia o conteúdo por trás dele. / body.fundo-travado { overflow: hidden; } / ---------- Modal ---------- / .modal { position: fixed; left: 50%; top: 9vh; transform: translateX(-50%); width: min(560px, calc(100vw - 32px)); border-radius: var(--raio); background: var(--surface); box-shadow: var(--sombra-painel); overflow: hidden; z-index: 51; } / Barra de 4px colorida por tipo: vermelho = saída, verde = entrada. / .modal-barra { height: 4px; } .modal.saida .modal-barra { background: var(--vermelho); } .modal.entrada .modal-barra { background: var(--verde); } .modal-cab { display: flex; align-items: center; justify-content: space-between; padding: var(--esp-14) 18px 0; font-weight: var(--peso-forte); } .modal-corpo { padding: var(--esp-14) 18px 18px; } .modal-pe { display: flex; justify-content: flex-end; gap: var(--esp-8); padding: 0 18px var(--esp-16); } / #203: com DUAS ações ("excluir só este R$ 4.200,00" × "excluir este e os 4 * próximos") os rótulos carregam valor e número, e os três botões não cabem * lado a lado num modal de 560px -- MEDIDO em navegador * (`ferramentas/foto_local_203_dialogo.py`), quebravam em duas linhas tortas. * Em coluna cada escolha se lê inteira, e a ordem visual passa a ser a da * decisão: o caminho comum primeiro, o de alcance maior depois, o Cancelar por * último (`order`, sem mexer na ordem do DOM, que é a da tabulação e começa * no Cancelar de propósito). * * A ação de alcance maior fica em CONTORNO, não em vermelho cheio: duas caixas * vermelhas idênticas empurram para o clique errado -- quem lê rápido escolhe * pela forma, não pelo texto. Mesmo token de cor, peso diferente. / .modal-pe.empilhado { flex-direction: column; align-items: stretch; } .modal-pe.empilhado [data-papel="cancelar"] { order: 2; } .modal-pe.empilhado .btn-perigo.mais-largo { background: transparent; border-color: var(--vermelho); color: var(--vermelho); } .modal-pe.empilhado .btn-perigo.mais-largo:hover { background: var(--vermelho); color: var(--branco); } / Diálogo de confirmação reusa .modal; a lista de perdas é o que o desfazer * NÃO restaura — é ela que justifica o diálogo em vez do toast. / .modal-perdas { margin: var(--esp-10) 0 0; padding-left: 20px; color: var(--ink-2); } .modal-perdas li { margin: var(--esp-2) 0; } / Modal grande (#77: edição de lançamento em modal). Doze campos mais a * seção de anexos não cabem em 1366×768 com o corpo em fluxo normal -- o * corpo rola sozinho e o Salvar (dentro de `.acoes-do-formulario`) fica * FORA da área de rolagem, sempre visível. Escopado a `.modal-editar` de * propósito: a confirmação e o "trocar em lote" são curtos, cabem sem * rolar, e não devem ganhar altura máxima nem corpo em flex por tabela. * `max-height`, não `height`: um lançamento sem anexo fica do tamanho do * conteúdo; só o que passa do teto rola. / .modal-editar { max-height: min(86vh, 720px); display: flex; flex-direction: column; } .modal-editar .modal-corpo { flex: 1 1 auto; min-height: 0; / #268: era `hidden`, e `hidden` num corpo com teto de altura NÃO é * "não rola": é CORTA. Medido em 03/09/2026 no modal de editar pessoa, * 1366x768: 955px de conteúdo em 612px de caixa, 343px inalcançáveis -- * inclusive o `Salvar` -- sem barra de rolagem, sem sinal nenhum de que * havia mais coisa. `auto` é a REDE: no caminho certo (filho em flex, com * `min-height: 0`) o corpo nunca transborda e nada muda; no dia em que um * conteúdo novo entrar sem essa estrutura, ele ROLA em vez de sumir. * Conteúdo escondido em silêncio é a pior falha possível numa tela. / overflow-y: auto; padding: 0; display: flex; flex-direction: column; } / #268: o contrato do modal grande -- corpo que rola, ações fixas -- estava * escrito nos NOMES do formulário de lançamento (`.editar-lancamento`), então * só valia para ele. O `usuarios.js` pede `modal-editar` desde o #177-B e * herdava METADE dele: o teto de altura sim, a área rolável não. A segunda * linha é ESTRUTURAL (o formulário que for filho direto do corpo, qualquer * um), e é o que faz formulário novo nascer com o contrato inteiro em vez de * repetir este defeito. Qualificado em `> form` de propósito: `> ` alcançaria o `