/* © 2026 Jose Carvalho. Intel Ceasa. Ver LICENSE. */ /* r38 (27/09/2026): todo `font-size` abaixo de 11px nesta folha subiu para 11px (piso de letra da regua da Apple, ordem do Carvalho de 26/09 15:25); nos `clamp()` subiu so o minimo. Ver o bloco "A REGUA DA APPLE NO COMPUTADOR" no fim de avarias.css. */ /* ============================================================ INICIO (celular), tarefa b32. So o que esta tela usa e mais nenhuma outra: os dois cartoes de resumo, a faixa de saldo, as duas listas Top 5, a tabela de fornecedores e a faixa de lemas. O topo, a faixa de titulo e a barra de baixo vem inteiros de avarias-celular.css (a casca compartilhada) e nao sao tocados aqui. DE ONDE VEM CADA COR: `scratchpad/avarias-extracao-mobile-inicio.md`, secao 3, amostrada pixel a pixel da fotografia desta tela especifica. Sao cores de IDENTIDADE (o cartao rosa e sempre rosa, o menta e sempre menta) e por isso, do mesmo jeito que `--avc-topo` em avarias-celular.css, NAO mudam com o tema claro/escuro do painel -- so os elementos que herdam `avarias.css` (o fundo geral da pagina, os paineis brancos) trocam sozinhos. ============================================================ */ /* ACHADO EM ARQUIVO ALHEIO (relato completo no fim da tarefa): `.tela-avarias` (avarias.css, linha ~325) da margem NEGATIVA de `-1 * var(--av-recuo)` (10 a 16px, dos dois lados) na raiz da tela inteira, comentada como "o painel envolve a tela num `.recipiente` que ja tem recuo proprio, entao o negativo abaixo o desfaz". Essa suposicao vale para as TRES telas de COMPUTADOR (que realmente nascem dentro do `.recipiente` do painel), mas NENHUMA tela de celular tem esse `.recipiente`: ela e a pagina inteira, simulando um aparelho. MEDIDO: sem cancelar isto, a raiz desta tela nasce 20 a 32px MAIS LARGA que a propria tela (10 a 16px sangrando para cada lado), e a pagina ganha rolagem lateral -- reproduzido isolando o modulo (scratchpad/_b32-inicio-palco.html) e conferido pela regra computada no navegador (CSS via CDP: `.tela-avarias { margin: calc(-1 * var(--av-recuo)) }`, sem nenhuma regra em avarias-celular.css que a cancele). As OUTRAS quatro telas de celular herdam a MESMA `.tela-avarias` e vao sentir o MESMO problema; o lugar certo para o conserto e avarias-celular.css (uma linha, `.tela-avarias-celular { margin: 0; }`, resolveria para as cinco de uma vez), mas esse arquivo nao e meu nesta rodada -- entao aqui ele so cancela a margem DENTRO desta tela, sem mexer no arquivo alheio. */ [data-tela="avarias-celular-inicio"] { margin: 0; --avci-rosa: #fee4e5; --avci-rosa-icone: #a01122; --avci-rosa-texto: #9a0e1c; --avci-alerta-icone: #c01e0d; /* icone da faixa de saldo: mais vivo que o do cartao de devolucoes */ --avci-menta: #f1f9de; --avci-menta-icone: #344a00; /* #4d6e00, nao mais #659001 (r38, 27/09/2026): o rotulo do cartao menta dava 3,49:1 e a regua pede 4,5:1; a mesma matiz um passo mais escura da 5,46:1 no menta. */ --avci-menta-texto: #4d6e00; --avci-apoio: #4a4544; /* "vs. mes anterior", texto sobre fundo claro */ /* #c8070d e #557a00, nao mais #fb0a11 e #6b9901 (r38, 27/09/2026): as setas "vs. mes anterior" davam 4,08:1 e 3,40:1 no branco, e a regua pede 4,5:1. Mesma matiz, mais escura: 5,0:1 no rosa e 4,64:1 no menta, os fundos mais escuros onde elas aparecem. */ --avci-vermelho-chip: #c8070d; --avci-verde-chip: #557a00; --avci-rosca-arco: #648e00; --avci-rosca-trilho: #dae5c3; --avci-rosca-meta-texto: #161c0a; --avci-navy: #0b1e3e; /* titulo dos tres paineis (Top 5 Produtos / Redes, Top 3 Fornecedores) */ --avci-navy-sub: #1b2e4a; /* subtitulo dos mesmos paineis, e o texto das linhas */ /* O BANNER (`.avci-banner`, mais abaixo) e IDENTIDADE FIXA como os cartoes rosa/menta -- o mint dele nao muda com o tema -- mas o texto de dentro usa OS MESMOS tons de azul-marinho que `--avci-navy`/`--avci-apoio` tinham antes de virarem "sensiveis ao tema" (bloco logo abaixo). Por isso duas copias FIXAS, so para o banner: sem elas, o texto do banner ficaria claro demais sobre um fundo que continua claro no tema escuro -- o MESMO defeito que este arquivo teve de corrigir para as listas Top 5, so que ao contrario (aqui quem tem de ficar parado e a cor, nao o fundo). */ --avci-banner-titulo: #0b1e3e; --avci-banner-texto: #4a4544; --avci-salmao: #ff7a76; --avci-trilho-salmao: #dfe8ef; --avci-verde-fornecedor: #99c13b; --avci-banner-fundo: #edf4de; --avci-banner-folha: #55a736; --avci-raio: 15px; /* medido no cartao "Total de Devolucoes"; a ficha registra que se repete em todos os cartoes, na faixa e no banner */ } /* ============================================================ BUG DE VERDADE, achado so ao olhar a FOTO em tema ESCURO (o console nao acusa nada disso: cor errada nao e erro de JavaScript). `--avci-navy`/`--avci-navy-sub`/`--avci-apoio` (acima) sao os tons de azul-marinho e cinza-escuro que a ficha amostrou -- certos para o nome do produto, o valor e o percentual das duas listas Top 5 e da tabela de Fornecedores, PORQUE aquele texto mora dentro de `.av-painel`, e um painel branco no tema claro. Mas `.av-painel` MUDA de cor no tema escuro (`--avarias-cartao` troca para um verde bem escuro, em avarias.css) -- e um azul-marinho fixo em cima de um fundo que ficou escuro é texto quase invisível. As cores certas para ESSE texto nao sao fixas: sao as MESMAS que o resto do painel ja usa para "texto sobre painel", `--avarias-texto` e `--avarias-texto-linha` (avarias.css), que trocam sozinhas com o tema. No tema claro elas nao usam o azul-marinho da ficha (sao um verde-quase-preto), mas ISSO NAO importa para a fidelidade ao desenho: a fotografia do James so existe em tema claro, e o compromisso e "legivel nos dois temas", nunca "pixel exato nos dois", porque so um dos dois foi desenhado. As cores da ficha (0b1e3e/1b2e4a) continuam valendo INTEIRAS no tema claro -- e so no tema claro que elas tem como ser conferidas contra a foto. */ :root[data-tema="escuro"] [data-tela="avarias-celular-inicio"] { --avci-navy: var(--avarias-texto); --avci-navy-sub: var(--avarias-texto-linha); --avci-apoio: var(--muted-foreground); --avci-vermelho-chip: var(--avarias-vermelho-texto); --avci-verde-chip: var(--avarias-verde-texto); } @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) [data-tela="avarias-celular-inicio"] { --avci-navy: var(--avarias-texto); --avci-navy-sub: var(--avarias-texto-linha); --avci-apoio: var(--muted-foreground); --avci-vermelho-chip: var(--avarias-vermelho-texto); --avci-verde-chip: var(--avarias-verde-texto); } } /* r81 (03/10/2026): os cartoes de cor pastel (rosa e menta) e o banner passam a ler os tons de assunto do painel no escuro, e o texto deles a ler o texto do tema, em vez de dois pastéis claros com letra escura sobre um painel grafite (croma acima de 0,012 e uma mancha clara no escuro). No claro nada mudou. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) [data-tela="avarias-celular-inicio"] { --avci-rosa: var(--tom-coral-fundo); --avci-menta: var(--tom-verde-fundo); --avci-rosa-texto: var(--tom-coral); --avci-menta-texto: var(--tom-verde); --avci-banner-fundo: var(--tom-verde-fundo); --avci-banner-titulo: var(--foreground); --avci-banner-texto: var(--muted-foreground); --avci-rosca-meta-texto: var(--foreground); --avci-rosca-trilho: var(--superficie-3); --avci-trilho-salmao: var(--superficie-3); } :root:not([data-tema="claro"]) [data-tela="avarias-celular-inicio"] .avci-rosca-bloco .rosca-centro { fill: var(--foreground); } :root:not([data-tema="claro"]) [data-tela="avarias-celular-inicio"] :is(.avci-cartao.menta .avci-cartao-valor, :root:not([data-tema="claro"]) .avci-cartao-peso, :root:not([data-tema="claro"]) .avci-faixa-valor, :root:not([data-tema="claro"]) .avci-faixa-peso) { color: var(--foreground); } :root:not([data-tema="claro"]) [data-tela="avarias-celular-inicio"] .avci-cartao .chip-base { color: var(--muted-foreground); } :root:not([data-tema="claro"]) [data-tela="avarias-celular-inicio"] .avci-cartao .chip-variacao.ruim { color: var(--avarias-vermelho-texto); } :root:not([data-tema="claro"]) [data-tela="avarias-celular-inicio"] .avci-cartao .chip-variacao.bom { color: var(--avarias-verde-texto); } } :root[data-tema="escuro"] [data-tela="avarias-celular-inicio"] { --avci-rosa: var(--tom-coral-fundo); --avci-menta: var(--tom-verde-fundo); --avci-rosa-texto: var(--tom-coral); --avci-menta-texto: var(--tom-verde); --avci-banner-fundo: var(--tom-verde-fundo); --avci-banner-titulo: var(--foreground); --avci-banner-texto: var(--muted-foreground); --avci-rosca-meta-texto: var(--foreground); --avci-rosca-trilho: var(--superficie-3); --avci-trilho-salmao: var(--superficie-3); } :root[data-tema="escuro"] [data-tela="avarias-celular-inicio"] .avci-rosca-bloco .rosca-centro { fill: var(--foreground); } :root[data-tema="escuro"] [data-tela="avarias-celular-inicio"] :is(.avci-cartao.menta .avci-cartao-valor, :root[data-tema="escuro"] .avci-cartao-peso, :root[data-tema="escuro"] .avci-faixa-valor, :root[data-tema="escuro"] .avci-faixa-peso) { color: var(--foreground); } :root[data-tema="escuro"] [data-tela="avarias-celular-inicio"] .avci-cartao .chip-base { color: var(--muted-foreground); } :root[data-tema="escuro"] [data-tela="avarias-celular-inicio"] .avci-cartao .chip-variacao.ruim { color: var(--avarias-vermelho-texto); } :root[data-tema="escuro"] [data-tela="avarias-celular-inicio"] .avci-cartao .chip-variacao.bom { color: var(--avarias-verde-texto); } /* ============================================================ AJUSTES NO QUE A CASCA/avarias.css JA DAO, so DENTRO desta tela (o seletor de atributo `[data-tela="avarias-celular-inicio"]` na frente de cada regra evita vazar para as OUTRAS quatro telas de celular ou para o desktop, que carregam a MESMA folha `avarias.css`). 1. `.av-painel` (painelCelular) nasce com 7px de raio (medido nas fotos de COMPUTADOR, em avarias.css). A ficha desta tela mede ~15px nos paineis e cartoes do CELULAR -- fotografias diferentes, raio diferente. 2. `.av-ver-todos` nasce verde escuro solido (a cor do BOTAO do desktop). Aqui o desenho usa uma pilula verde-menta quase branca com texto escuro. Uso `--avarias-botao-inativo` (avarias.css) em vez de cravar o hex da ficha: aquele token JA E uma superficie clara e discreta, e JA troca sozinho no tema escuro -- a primeira versao desta regra cravava `#f4f7ee` fixo, e no tema escuro virava um retangulo branco com o texto (theme-aware) "sumindo" dentro dele. Mesma logica do bloco de cima: o BOTAO mora dentro de um painel que muda de cor, entao ele tem de mudar junto. 3. `.chip-variacao`/`.chip-base` (chipDeVariacao, grafico.js) usa `--avarias-vermelho` / `--avarias-verde-alta` / `--avarias-apoio-na-faixa`: cores amostradas das fotos de COMPUTADOR, e uma cor de apoio pensada para texto sobre fundo ESCURO (a faixa dos KPIs do desktop). Meus cartoes (rosa/menta) sao claros nos dois temas do painel, e essa cor de apoio "clara sobre escuro" ficaria quase invisivel ali -- por isso as cores exatas desta fotografia (`--avci-vermelho-chip`/`--avci-verde-chip`/`--avci-apoio`) entram por cima. O MESMO chip tambem aparece dentro de um `.av-painel` (o detalhe que abre ao tocar uma linha de Top 5 Redes) -- ali quem muda de cor com o tema e o PAINEL, entao as cores fixas da ficha precisam, elas tambem, ceder no tema escuro: o bloco de cima ja troca `--avci-apoio`; o vermelho e o verde do chip trocam logo abaixo, para as MESMAS cores que o resto do painel ja usa nesse contexto (`--avarias-vermelho`/`--avarias-verde-alta`), que foram desenhadas para ficar legiveis contra os fundos escuros que este mesmo arquivo ja usa. */ [data-tela="avarias-celular-inicio"] .av-painel { border-radius: var(--avci-raio); } [data-tela="avarias-celular-inicio"] .av-ver-todos { background: var(--avarias-botao-inativo); color: var(--avarias-texto); } [data-tela="avarias-celular-inicio"] .chip-variacao.ruim { color: var(--avci-vermelho-chip); } [data-tela="avarias-celular-inicio"] .chip-variacao.bom { color: var(--avci-verde-chip); } [data-tela="avarias-celular-inicio"] .chip-base { color: var(--avci-apoio); } /* O MESMO chip aparece DENTRO de um cartao rosa/menta (o "vs. mes anterior" dos dois cartoes de resumo) -- e ali quem NAO muda de cor com o tema e o CARTAO, entao o texto tem de ficar fixo tambem, ao contrario da regra de cima (pensada para quando o chip mora num `.av-painel` branco, que troca de cor sozinho). Seletor mais especifico (duas classes) vence o de cima sem precisar de `!important`. */ [data-tela="avarias-celular-inicio"] .avci-cartao .chip-base { color: #4a4544; } /* A rosca do cartao de creditos SEMPRE fica sobre fundo menta claro, nos dois temas do painel (e identidade fixa, como o resto desta tela) -- mas `.rosca-centro` (grafico.js) pinta o texto central com `var(--foreground)`, que TROCA para uma cor clara no tema escuro do painel (para ficar legivel sobre os fundos ESCUROS que o resto do painel usa naquele tema). Sem travar aqui, o "70,8%" sairia quase branco sobre menta claro assim que alguem trocasse para o tema escuro -- achado que so apareceu ao testar os dois temas, nao ao olhar so a foto (que e sempre clara). */ [data-tela="avarias-celular-inicio"] .avci-rosca-bloco .rosca-centro { fill: #000; } /* DEFEITO NOVO, achado pelo Carvalho no painel de verdade (login real), reproduzido no palco: `faixaTitulo()` poe icone + titulo/subtitulo + caixa de periodo numa UNICA linha flexivel, e a caixa de periodo NAO ENCOLHE (a propria casca marca o ultimo filho `flex: none`). MEDIDO no iPhone 17 Pro Max (440px): a coluna do titulo (`.avc-faixa-titulo-texto`) colapsava para `larguraTexto: 0`, e o `

` transbordava por cima da caixa de periodo, 119x54px soltos -- e SO a 440px: a 390px a mesma faixa media 304px de coluna e ficava certa, o que e o contrario do que se espera e por isso ninguem tinha visto (`scripts/testar-tela-avarias-celular.mjs` media so a 390px). Nao e bug meu de calculo: e o mesmo defeito que as telas de Conta Corrente e Devolucoes ja acharam e consertaram, cada uma na PROPRIA folha (nunca na casca compartilhada, que serve as cinco): `flex-wrap` na faixa deixa o periodo cair para a linha de baixo quando nao cabe do lado do titulo, com um piso de largura para o titulo decidir isso ANTES de chegar a zero. Mesma tecnica, replicada aqui -- as tres regras abaixo sao identicas as de avarias-celular-conta-corrente.css e avarias-celular-devolucoes.css, so trocando o seletor de tela. */ [data-tela="avarias-celular-inicio"] .avc-faixa-titulo { flex-wrap: wrap; row-gap: 10px; } [data-tela="avarias-celular-inicio"] .avc-faixa-titulo-texto { min-width: 170px; } [data-tela="avarias-celular-inicio"] .avc-faixa-titulo > .av-periodo { flex-basis: 100%; } /* ============================================================ O CORPO: recuo lateral de 12px (medido na ficha), vao de 16px entre blocos -- o valor mais comum que a ficha mediu entre um bloco e o proximo (ela varia de 13 a 35px na fotografia, ruido de mockup desenhado a mao; 16px e o que a propria ficha aponta como o mais tipico). O primeiro vao (entre a faixa de titulo, que e da casca, e os cartoes) e ZERO de proposito: a ficha mediu que os cartoes encostam direto na faixa escura, sem tira branca entre os dois. ============================================================ */ .avci-corpo { display: grid; gap: 16px; padding: 0 12px 16px; } /* ============================================================ O PAR DE DUAS COLUNAS (decisao 2 do cabecalho do JS): nasce em UMA coluna (celular estreito de verdade) e vira DUAS a partir do breakpoint medido abaixo. A largura que o `@container` mede e a da PROPRIA TELA (`.tela-avarias-celular` ja e um container, em avarias-celular.css) -- nunca a da janela do navegador, que e a armadilha ja paga na tela de Conta Corrente (secao 9 do contrato). O NUMERO: medido de verdade, varrendo a largura de 340 a 700px e conferindo, a cada passo, se algum nome corta (comparando `scrollWidth` contra `clientWidth` num elemento com ellipsis -- ver scratchpad/_b32-inicio-medir-legibilidade.mjs) e se a rosca do cartao de creditos encosta no texto do lado dela. PRIMEIRA TENTATIVA (360px) ESTAVA ERRADA -- um critico de contexto limpo abriu a tela num iPhone 17 Pro Max (440px) e fotografou "Mix Mateus" sumindo e "R$ 20.120,00" atras da rosca; a varredura confirmou por que: em NENHUM dos tres tamanhos que o portao cobra (390/420/440px) as duas colunas sobram espaco. "Mix Mateus"/"Vanguarda" so param de cortar a partir de ~400px, e o cartao de creditos (icone + rotulo + valor + rosca de meta, todos NUNCA encolhendo abaixo do proprio conteudo) so para de encostar a rosca no texto a partir de 500px. Como os dois pares vivem na MESMA classe `.avci-par`, o breakpoint e o do mais exigente dos dois: 500px. Na pratica, isso quer dizer que EM QUALQUER APARELHO DE CELULAR estes dois pares ficam empilhados (uma coluna), e so viram duas colunas numa tela mais larga que um telefone -- o que ainda assim obedece a regra do contrato ("nasce lado a lado, empilha abaixo da largura em que para de ser legivel"): aqui "onde e legivel" simplesmente comeca depois do fim de um telefone, e nao no meio dele. Antes de 500px, uma coluna e MAIS FIEL ao desenho do que duas colunas cortando nome e sobrepondo numero. `minmax(0, 1fr)`, NUNCA `1fr` cru: achado MEDIDO, nao teoria. Com `1fr 1fr` a coluna da direita (Top 5 Redes) cresceu ate 270px e empurrou a pagina para 490px de largura numa tela de 390 -- uma unica linha da lista ("Mix Mateus", "R$ 12.450,00", a barra) bastou para isso, mesmo com `min-width: 0` em cada pedaco da linha (nome, valor, barra): quem faltava encolher era a PROPRIA COLUNA da grade, porque `1fr` sozinho equivale a `minmax(auto, 1fr)`, e esse `auto` e o tamanho de conteudo da coluna, nao 0. E a MESMA armadilha, em Grid, que o comentario de `.hbarra-rotulo` (avarias.css) ja documenta em Flexbox -- so que ali quem faltava era `min-width: 0` no ITEM; aqui falta no TRACK da grade. `.av-paineis` (avarias.css) e `.grafico-hbarras` (grafico.js) ja usam `minmax(...)` por este motivo exato; esta regra segue o mesmo padrao. Reproduzido e confirmado com `QUEBRAR_CSS='.avci-par{grid-template-columns:1fr 1fr !important}' node scratchpad/_b32-inicio-medir.mjs` (a mesma sabotagem por variavel de ambiente que este arquivo ja aceita para a regra 14, aqui usada para provar esta outra). ============================================================ */ .avci-par { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); } @container (min-width: 500px) { .avci-par { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } /* ---------- os dois cartoes de resumo ---------- */ .avci-cartao { border-radius: var(--avci-raio); display: flex; gap: 10px; padding: 14px; } .avci-cartao.rosa { background: var(--avci-rosa); } .avci-cartao.menta { background: var(--avci-menta); } .avci-cartao-texto { display: flex; flex: 1 1 auto; flex-direction: column; gap: 4px; min-width: 0; } .avci-cartao-cabeca { align-items: center; display: flex; gap: 8px; } /* FICA EM 40px, NAO SOBE PARA 44 (varredura da regra de toque, 19/09/2026): este circulo e um `` decorativo dentro do cabecalho do cartao (avarias-celular-inicio.js, `montarCartaoResumo`), nunca um `