` do cabecalho cortava -- as duas coisas ficaram falsas o tempo
inteiro. Se so isso decidisse, dava para nunca empilhar.
QUEM DECIDE DE VERDADE E A TABELA, e por um motivo mais fino do que "ela precisa caber": ela tem
`overflow-x: auto` DE PROPOSITO (secao 4.2 do contrato) e pode rolar, mas ROLAR NAO PODE
SIGNIFICAR CORTAR UM NUMERO NO MEIO. MEDIDO AO VIVO (scratchpad/_b32-produto-verificar.mjs,
passo 9, lendo `getBoundingClientRect()` do `` de dinheiro da 1a linha contra a borda da
caixa que rola, container por container): a 500-540px de largura o valor da tabela de Creditos
("R$ 6.320,00") ficava PARCIALMENTE ATRAS da borda da caixa -- a foto mostrava "R$ 6.32" cortado
no meio do centavo, sem nada avisando que faltava o resto do numero. Pior que uma tabela que
rola: e o tipo de defeito que so a conta pega, nao a figura (mesma licao da secao 5 do contrato,
so que aqui e o NUMERO da tabela, nao a barra atras dele). A transicao exata ficou entre 545px
(cortava 2px) e 550px (nao cortava mais); 560px foi o valor escolhido, com folga confortavel
acima do ponto medido (a mesma tabela de Debitos ja sobrava 34px de vao a essa largura) -- e por
coincidencia (nao copia: nunca vi o CSS do computador antes de medir) e o MESMO numero que
`.av-par`, em avarias.css, usa para o par de paineis da tela de computador, que tem uma pressao
parecida (duas colunas de tabela/grafico competindo pelo mesmo espaco).
ACIMA de 560px o par mostra #, Produto e o Valor completo sem rolar (Volume e % do Total
continuam atras da rolagem da propria caixa, e isso e o comportamento CERTO, nao um defeito -- e
a mesma tela que a secao 4.2 do contrato descreve). ABAIXO de 560px (todo iPhone testado, 390 a
440px, cai bem dentro disso) o par empilha e cada tabela ganha a largura inteira da tela, que e
como as 5-6 colunas cabem sem cortar nenhum numero. */
.avcp-par {
align-items: start;
display: grid;
gap: 10px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding: 0 12px 10px;
}
@container (max-width: 560px) {
.avcp-par {
grid-template-columns: minmax(0, 1fr);
}
}
/* ---------- a rolagem de lado nao pode esconder o dinheiro nem o botao ----------
ACHADO POR CRITICO DE CONTEXTO LIMPO, com regua da MINHA PROPRIA folha (secao 4.2 do contrato:
"rolar nao pode significar cortar um numero no meio"): eu medi essa regra so nas DUAS TABELAS DE
RANKING (dai o breakpoint de 560px do `.avcp-par`, acima) e nunca medi nas duas de DETALHE, que
sao mais largas ainda (Fornecedor e Comprador escrevem nome, nao emoji+produto) -- 469px e 502px
de largura natural contra 386px de caixa a 390px de tela. No SCROLL PADRAO (sem ninguem tocar),
isso deixava o valor em reais cortado no meio do centavo ("R$ 2.940,0"), a tabela de credito sem
coluna de Valor NENHUMA visivel, e o botao de abrir inteiro fora da tela (74,8px e 108px alem da
borda, medido).
O CONSERTO NAO E ALARGAR A CAIXA (nao ha largura sobrando num celular de 390px) NEM REORDENAR AS
COLUNAS (proibido pela mesma secao 4.2). DUAS TENTATIVAS ANTERIORES, DESCARTADAS POR MIM MESMO
depois de medir cada uma:
1. Prender Valor+Volume+%+Abrir com `position: sticky` e `width` fixo nos quatro. `width` numa
celula de tabela com `table-layout: auto` (o padrao, e o que `.av-tabela` tinha) e so um
PALPITE para o navegador, nao uma ordem -- e a conta dele, tentando caber tudo no
`width: 100%` da tabela, espremeu Valor para 77px em vez dos 108px pedidos. Como o `right`
de cada coluna soma LARGURAS QUE EU MANDEI (nao as que o navegador realmente usou), o bloco
colado saiu desalinhado e cobriu METADE do Comprador e o Volume inteiro, na vista padrao, sem
rolagem nenhuma que revelasse o que ficou por baixo -- pior que o problema original, porque
aquele conteudo ficou preso atras de um elemento fixo, nunca alcancavel rolando.
2. So `scroll-snap` (sem sticky nenhum), a alternativa que o proprio coordenador ja tinha
oferecido como igualmente valida ("a rolagem tem de parar em limite de coluna"). Ela cumpre
a PROMESSA (nunca para no meio de uma coluna DEPOIS de um gesto de rolagem), mas nao mexe na
POSICAO INICIAL, antes de qualquer toque -- e foi ai que continuou reprovando: origem-credito
a 440px media 5 de 11 caracteres do Valor, porque a posicao 0 (onde a pagina nasce) nao e
resultado de rolagem nenhuma, entao o navegador nao tem motivo pra "encaixar" nada ali.
O CONSERTO QUE FICOU, e que passou nas quatro medidas (ver a tabela abaixo): as DUAS COISAS que
o coordenador pediu para nunca sumirem -- o Valor e o botao "Abrir" -- ficam presas na borda
direita com `position: sticky`, e SO ELAS DUAS (nunca Volume nem "%": ver por que abaixo). Para
o `right` de cada uma bater com a largura DE VERDADE, a tabela virou `table-layout: fixed`, que
faz o navegador OBEDECER a largura que eu escrevo em vez de negociar -- e o total das colunas
pode passar de 100% da caixa (e passa, de proposito: e o que abre espaco pra rolar). AS
LARGURAS FORAM MEDIDAS, nao chutadas (medido com `canvas.measureText` no texto mais largo de
cada coluna, na fonte que a propria tabela usa a 390px, o pior caso: 10px, o piso do `clamp`
compartilhado). `scroll-snap` fica ligado em TODA coluna, sticky ou nao: para as colunas do meio
(Volume, "%", Tipo) ele garante que a rolagem nunca solta o dedo com um numero cortado ao meio;
para o Valor das tabelas de DETALHE (que nao cabe sticky -- ver o comentario mais abaixo, junto
da regra) ele e a UNICA protecao, entao precisa valer sempre, nao so como reforco. */
.tela-avarias[data-tela="avarias-celular-produto"] .av-tabela {
table-layout: fixed;
}
.tela-avarias[data-tela="avarias-celular-produto"] .av-tabela-caixa {
scroll-snap-type: x mandatory;
}
.tela-avarias[data-tela="avarias-celular-produto"] .av-tabela th,
.tela-avarias[data-tela="avarias-celular-produto"] .av-tabela td {
scroll-snap-align: start;
}
/* LARGURA DE CADA COLUNA, medida (nao chutada) a 390px, a fonte de 10px que e o piso do `clamp`
compartilhado -- o pior caso de espaco. Cada numero tem uma folga pequena por cima do texto
mais largo medido (comentado ao lado). As colunas de nome (Fornecedor, Comprador, o "Produto"
do ranking) ganham `overflow-wrap: break-word` -- perde-se altura, nunca a palavra, o MESMO
criterio ja usado no rotulo dos filtros -- porque a largura fixa e mais estreita que o nome mais
comprido numa linha so ("Sebastião da Manga" precisa de 89px, a coluna tem 70px: quebra em
duas linhas em vez de cortar ou espremer a fonte). */
.tela-avarias[data-tela="avarias-celular-produto"] .av-tabela :is(th, td).avcp-col-num {
width: 24px; /* "#": ate dois digitos (1 a 11) */
}
.tela-avarias[data-tela="avarias-celular-produto"] .av-tabela :is(th, td).avcp-col-nome {
overflow-wrap: break-word;
white-space: normal;
/* 78px, e o numero subiu em 20/09/2026: os 70px tinham sido medidos contra o DADO, e o titulo
da coluna e mais largo que ele. "Fornecedor" em negrito pede 77,3px e partia ao meio
("Fornece / dor"). A tabela deste modulo rola de proposito (secao 4.2 do contrato): rolar
mais custa menos que titulo partido. */
width: 78px;
}
.tela-avarias[data-tela="avarias-celular-produto"] .av-tabela :is(th, td).avcp-col-produto {
overflow-wrap: break-word;
white-space: normal;
width: 92px; /* o mais largo e "% Desconto em NF"/"$ Verba financeira" (glifo + nome do tipo) */
}
.tela-avarias[data-tela="avarias-celular-produto"] .av-tabela :is(th, td).avcp-col-comprador {
overflow-wrap: break-word;
white-space: normal;
/* 78px pelo mesmo motivo da coluna ao lado: os 62px vinham de "Guilherme" (o dado, 61,4px) e
o TITULO "Comprador", em negrito, pede 77,4px. Medido em 20/09/2026. */
width: 78px;
}
/* O TITULO DA COLUNA NUNCA PARTE (r128, 09/10/2026): os 78px acima foram medidos no Mac ("Fornecedor" em negrito pede
77,3px), e a fonte desenhada no Linux sai um pouco mais larga; com 0,7px de folga, "Fornecedor" e "Comprador" partiam
ao meio em todas as larguras (testar-quebra-de-linha.mjs). O titulo fica numa linha so e a coluna cresce o que ele
pedir; o nome da pessoa, embaixo, continua quebrando entre palavras. A tabela rola de proposito (secao 4.2). */
.tela-avarias[data-tela="avarias-celular-produto"] .av-tabela th:is(.avcp-col-nome, .avcp-col-comprador) {
white-space: nowrap;
}
/* CORRIGIDO DEPOIS DE UM RECUO MEU: a primeira saida (chip com reticencias) trocou "transborda
sobre o Volume" por "corta o rotulo" -- e o coordenador apontou, com print e medida, que essa
troca e a MESMA classe de defeito que o resto do modulo passou a noite consertando: "Descont…"
e "Verba fin…" nao dizem mais qual e o tipo do lancamento, que e justamente a coluna que
distingue uma linha da outra nesta tabela. A saida certa e a que o resto do modulo ja usa:
ROLAR MAIS, nunca cortar rotulo (secao 4.2 do contrato endossa a rolagem de proposito).
A largura precisa caber o CHIP INTEIRO, e nao so o texto dele: "Desconto em NF" mede 86px de
CHIP (span com o padding do proprio `.av-chip-tipo`, 9px de cada lado, partilhado -- nao e so o
texto), e a celula ainda soma o PROPRIO padding por fora (`.av-tabela td`, 8px de cada lado,
partilhado). 86 + 8 + 8 = 102px e o piso exato para o chip mais largo nao tocar a borda da
celula; uso 104px, 2px de folga para arredondamento de subpixel entre navegadores. So TRES
rotulos existem (`catalogo.tiposDeCredito`, fechado), entao esta largura nao fica velha
sozinha no dia em que um cadastro novo aparecer -- teria de vir com um QUARTO tipo de credito
no catalogo, o que e mudanca de dado, nao de tela. */
.tela-avarias[data-tela="avarias-celular-produto"] .av-tabela :is(th, td).avcp-col-tipo {
width: 104px; /* medido: chip "Desconto em NF" precisa de 86px + 16px de padding da celula */
}
.tela-avarias[data-tela="avarias-celular-produto"] .av-tabela :is(th, td).avcp-col-volume {
width: 52px; /* medido: "8.200" precisa de 44px */
}
.tela-avarias[data-tela="avarias-celular-produto"] .av-tabela :is(th, td).avcp-col-pct {
width: 56px; /* medido: "100,0%" precisa de 50,6px */
}
.tela-avarias[data-tela="avarias-celular-produto"] .av-tabela :is(th, td).avcp-col-valor {
width: 84px; /* medido: "R$ 8.750,00" precisa de 56px de texto + o padding da celula */
}
.tela-avarias[data-tela="avarias-celular-produto"] .av-tabela :is(th, td).avcp-col-abrir {
width: 60px; /* o botao de 44px (piso da Apple HIG e do WCAG 2.2 AA, varredura de 19/09/2026) mais 8px de padding de cada lado */
}
/* ABRIR GRUDA NA BORDA DIREITA, EM QUALQUER TABELA: 60px precisa de mais espaco do que os 56px
antigos (o botao cresceu de 40 para 44px de alvo de toque) -- na tabela mais cheia (origem dos
creditos: #+Fornecedor+Comprador+Tipo+Volume = 286px de colunas antes dele, 286+60 = 346px),
isso passa a exceder o piso de ~340px de caixa medido no aparelho mais estreito testado. A
TABELA JA ROLA DE LADO (`caixaDeTabela`, `overflow-x`), entao esses 6px a mais nao cortam nada:
viram scroll horizontal em vez de sobreposicao, o mesmo comportamento que qualquer tabela deste
modulo ja tem quando o conteudo nao cabe. Voltar a medir com `elementsFromPoint` depois desta
mudanca (bateria `node scripts/testar-colisao.mjs` e `SO_TAM=390 bash scripts/testar-mobile.sh`)
e o que confirma que nada ficou clicavel por baixo de outra coisa mesmo com a rolagem maior. */
.tela-avarias[data-tela="avarias-celular-produto"] .av-tabela td.avcp-col-abrir {
background: var(--avarias-cartao);
position: sticky;
right: 0;
z-index: 1;
}
.tela-avarias[data-tela="avarias-celular-produto"] .av-tabela th.avcp-col-abrir {
position: sticky;
right: 0;
z-index: 2;
}
/* VALOR TAMBEM GRUDAR, ALEM DO ABRIR, SO CABE NAS TABELAS DE RANKING -- ACHADO POR CRITICO DE
CONTEXTO LIMPO, com `elementsFromPoint` (a mesma tecnica que o portao de contraste usa): nas
duas tabelas de RANKING so ha DUAS colunas antes do Valor (# e Produto, 116px), entao
116+84+56=256px, cabe com folga (~84px sobrando mesmo no aparelho mais estreito). Nas DUAS
TABELAS DE DETALHE ha tres ou quatro colunas antes dele (Fornecedor e Comprador escrevem nome, a
de credito ainda tem Tipo): 208px (debito) e 286px (credito) de colunas antes do Valor.
208+84+56=348px e 286+84+56=426px -- as DUAS estouram os ~340-386px medidos, e a sobreposicao
e real: medido com `elementsFromPoint` no meio da celula de Volume, o elemento que aparece no
TOPO da pilha nao e o Volume, e sim o proprio `| ` do Valor grudado por cima -- o numero de
Volume fica soterrado, sem jeito de rolar ate ele (um elemento `sticky` nao "solta" o que cobre
quando se rola, e a posicao de repouso, 0, ja e o minimo). Prender o Valor tambem nas tabelas de
detalhe trocaria "numero cortado" por "numero inteiro escondido para sempre" -- pior, nao
melhor. Por isso so os RANKINGS grudam os dois; as de DETALHE grudam so o Abrir, e o Valor
delas fica protegido pelo `scroll-snap` (abaixo) em vez de por `sticky`. */
.tela-avarias[data-tela="avarias-celular-produto"] .av-tabela[data-tabela^="produtos-"] td.avcp-col-valor {
background: var(--avarias-cartao);
position: sticky;
right: 56px; /* a largura de .avcp-col-abrir -- as duas ficam lado a lado, sem vao */
z-index: 1;
}
.tela-avarias[data-tela="avarias-celular-produto"] .av-tabela[data-tabela^="produtos-"] th.avcp-col-valor {
position: sticky;
right: 56px;
z-index: 2;
}
/* NAS TABELAS DE DETALHE, o Valor nao e sticky, mas precisa ACABAR bem colado no Abrir quando a
rolagem chega no fim -- senao sobra um respiro estranho entre os dois, ou o Valor para
ligeiramente escondido atras do proprio Abrir. `scroll-padding-right` do tamanho do Abrir avisa
o `scroll-snap` para tratar a borda direita como se ela ja estivesse 56px mais para dentro,
entao o ultimo ponto de encaixe antes do fim e exatamente a borda esquerda do Valor -- ele
chega inteiro, colado no botao, nunca cortado. */
.tela-avarias[data-tela="avarias-celular-produto"] .av-tabela-caixa:has(.av-tabela[data-tabela="origem-debito"]),
.tela-avarias[data-tela="avarias-celular-produto"] .av-tabela-caixa:has(.av-tabela[data-tabela="origem-credito"]) {
scroll-padding-right: 56px;
}
/* ---------- a faixa "Importante" ----------
Fundo verde bem claro, icone de lampada verde escura, uma frase corrida (Camada 5 da ficha) --
diferente de `.av-aviso` (herdada): aquela e branca/adaptavel ao tema, com um circulo cinza-
esverdeado e permite lista com marcadores; esta e sempre clara (identidade da fotografia, mesmo
raciocinio dos cartoes de KPI) e nunca tem lista, so uma frase. */
.avcp-importante {
align-items: center;
background: #eff6e1;
border-radius: 10px;
color: #1b230b;
display: flex;
gap: 10px;
margin: 0 12px 10px;
padding: 12px;
}
.avcp-importante-icone {
color: #394d09;
flex: 0 0 auto;
height: 22px;
width: 22px;
}
.avcp-importante p {
font-size: 12.5px;
line-height: 1.35;
margin: 0;
}
/* A terceira linha da faixa de titulo (dentro de `.avc-faixa-titulo-texto p`, ver o comentario de
`faixaTitulo` no arquivo JS): mais apagada que a segunda linha, para ficar subordinada a ela --
a ficha nao mediu um tom separado para esta frase (so documentou as cores principais da tela),
entao a escolha aqui e RELATIVA (um pouco menor, um pouco mais transparente), nunca um hexadecimal
novo inventado como se fosse medido. */
.avcp-faixa-nota {
display: inline-block;
font-size: max(11px, 0.86em); /* r38: nunca abaixo do piso de 11px (dava 9,9) */
margin-top: 1px;
opacity: 0.8;
}
/* A LINHA "vs. mês anterior" DENTRO DOS CARTOES DO TOPO, e o porque de ela precisar de cor FIXA.
Achado por medicao no tema escuro, em 19/09/2026: contraste de 1,41:1, ou seja, praticamente
invisivel (`rgb(185,205,197)` sobre `rgb(251,232,232)`; o minimo do WCAG AA para texto pequeno
e 4,5:1).
A causa: `chipDeVariacao()` (grafico.js) poe essa linha em `.chip-base`, esta folha nao tinha
NENHUMA regra para ela, e entao valia `avarias.css` com `color: var(--avarias-apoio-na-faixa)`,
que foi escrita para o cartao ESCURO do computador. O fundo dos cartoes desta tela e CLARO FIXO
nos dois temas (rosa e menta sao identidade, como o cabecalho), entao um token que clareia no
tema escuro some.
A tela de Conta Corrente teve o mesmo defeito e o mesmo conserto (avarias-celular-conta-corrente.css,
`.avcc-kpi .chip-base`). */
.avcp-kpi .chip-base {
color: #1b230b;
}
/* O NUMERO DO CHIP ("12,3%"/"15,8%") TINHA O MESMO DEFEITO DA LINHA DE APOIO ACIMA, so que a
causa nao era falta de regra: `avarias.css` ja escreve
`.chip-variacao.ruim{color:var(--avarias-vermelho)}` / `.bom{color:var(--avarias-verde-alta)}`,
mas `assets/css/fdv-atacado-pedido.css` (outro modulo, nao meu nesta rodada) declara um
`.chip-variacao.ruim`/`.bom` PROPRIO, MESMA especificidade (duas classes), carregado DEPOIS --
e aponta para `--fdv-vermelho`/`--fdv-verde-alta`, que so existem dentro de `.tela-fdv`. Um
`var()` que nao resolve invalida a declaracao inteira, e `color` cai para o herdado (o texto
quase-branco do tema escuro do painel) sobre o fundo claro fixo do cartao -- medido pelo portao
de tema escuro. Escopado por `data-tela` (tres selecionadores) pra vencer a colisao sem mexer
no arquivo do outro modulo. */
[data-tela="avarias-celular-produto"] .chip-variacao.ruim {
color: var(--avarias-vermelho-texto);
}
[data-tela="avarias-celular-produto"] .chip-variacao.bom {
color: var(--avarias-verde-texto);
}
/* r81 (03/10/2026): o escuro sem pastel. Os dois cartoes de numero, o aviso "importante" e o trilho das barras eram
claros fixos e viravam manchas claras sobre o grafite; no escuro leem os tons de assunto e o grafite do painel.
No claro nada mudou. */
@media (prefers-color-scheme: dark) {
:root:not([data-tema="claro"]) .avcp-kpi.debito {
background: var(--tom-coral-fundo);
}
:root:not([data-tema="claro"]) .avcp-kpi.credito {
background: var(--tom-verde-fundo);
}
:root:not([data-tema="claro"]) .avcp-kpi-rotulo,
:root:not([data-tema="claro"]) .avcp-kpi .chip-base {
color: var(--muted-foreground);
}
:root:not([data-tema="claro"]) .avcp-kpi-valor {
color: var(--foreground);
}
:root:not([data-tema="claro"]) .avcp-importante {
background: var(--tom-verde-fundo);
color: var(--foreground);
}
:root:not([data-tema="claro"]) .avcp-importante-icone,
:root:not([data-tema="claro"]) .avcp-filtro-icone {
color: var(--tom-verde);
}
}
:root[data-tema="escuro"] .avcp-kpi.debito {
background: var(--tom-coral-fundo);
}
:root[data-tema="escuro"] .avcp-kpi.credito {
background: var(--tom-verde-fundo);
}
:root[data-tema="escuro"] .avcp-kpi-rotulo,
:root[data-tema="escuro"] .avcp-kpi .chip-base {
color: var(--muted-foreground);
}
:root[data-tema="escuro"] .avcp-kpi-valor {
color: var(--foreground);
}
:root[data-tema="escuro"] .avcp-importante {
background: var(--tom-verde-fundo);
color: var(--foreground);
}
:root[data-tema="escuro"] .avcp-importante-icone,
:root[data-tema="escuro"] .avcp-filtro-icone {
color: var(--tom-verde);
}
|