/* © 2026 Jose Carvalho. Intel Ceasa. Ver LICENSE. */ /* ============================================================ A LINGUAGEM VISUAL DAS TELAS DO DONO. POR QUE ESTE ARQUIVO EXISTE. O James desenhou cinco telas (scratchpad/desenhos-do-james/) e nos construimos a primeira com o DADO certo e o DESENHO errado -- ele olhou e disse "nao se parece nada com as imagens que eu te enviei", e tinha razao: seis cartoes cinzas sem icone onde o desenho tem oito coloridos, dois graficos empilhados em preto e branco onde o desenho tem dois lado a lado em quatro cores, uma tabela de 300 linhas onde o desenho tem cinco tabelas de cinco, e um paredao de dez paragrafos cinzas no rodape de uma tela que ele pediu "sem MUITOS TEXTOS". O QUE ELE E: um BLOCO COM ESCOPO. Tudo aqui dentro so vale sob `.tela-do-dono`, e essa classe so e posta pelas telas do dono -- hoje a Analise do Produto, amanha a Sazonalidade, a Evolucao e Tendencia e a Visao do grupo. As OUTRAS 41 TELAS DE MODULO NAO ENXERGAM NADA DISTO, e isso foi decisao do Carvalho em 16/09/2026: "so as telas do dono seguem o desenho do James". Nao e capricho de organizacao -- e o que protege as 178 combinacoes de celular e iPad que `bash scripts/testar-mobile.sh` ja mede nas telas de modulo. Uma variavel solta no `:root` teria mudado as 41 juntas, calada. COMO A PROXIMA TELA REUSA ISTO, sem copiar e colar CSS: ela poe `tela-do-dono` na classe da propria `.grade`, e pronto -- `h("div", { class: "grade tela-do-dono" }, ...)`. Nenhum seletor novo, nenhum componente novo, nenhuma linha deste arquivo duplicada. Foi por isso que a linguagem nasceu como ESCOPO e nao como um kit paralelo de classes (`.cartao-do-dono`, `.tabela-do-dono`): um kit paralelo exige que cada tela nova lembre de trocar CADA chamada, e basta esquecer uma para a tela voltar a ter cara de relatorio de banco no meio da pagina. NENHUM TOKEN NOVO NO `:root`, E QUASE NENHUM TOKEN NOVO NO GERAL. O painel ja e verde: o `assets/css/tokens.css` tem 127 variaveis, e cinco das seis cores que o desenho do James pede ja estavam la com outro nome. Entao este arquivo APELIDA o que existe em vez de inventar um segundo verde ligeiramente diferente -- duas cores quase iguais na mesma tela e o defeito que ninguem consegue apontar mas todo mundo enxerga. ============================================================ */ .tela-do-dono { /* ---------- o que JA EXISTE, so apelidado para esta tela ler o desenho do James ---------- Cada linha aqui e uma cor do desenho que o painel ja tinha, e o comentario ao lado diz de onde ela vem -- para quem vier depois nao "consertar" achando que e valor solto. SO ENTRA AQUI O APELIDO QUE ALGUEM USA. Tres foram declarados e nunca chamados (`--dono-verde`, `--dono-laranja` e um `--dono-laranja-fundo` com dois pares de modo escuro para nada): o verde da barra e o laranja da linha ficaram em `var(--chart-2)`/`var(--chart-5)` dentro do JS, de proposito (ver `analise-produto.js`), e o fundo de entressafra e da tela de Sazonalidade, que nao existe ainda. Token declarado e nunca usado nao e "preparado para o futuro" -- e o proximo leitor achando que a cor ja esta em uso em algum lugar que ele nao encontrou. Achado por critico de contexto limpo em 16/09/2026. Quando a Sazonalidade precisar da faixa, ela declara a cor junto com o codigo que a desenha. */ --dono-verde-escuro: var(--primary); /* #14603f: barra, titulo, texto verde. 7,57:1 no branco */ --dono-verde-claro: var(--ok-fundo); /* #e5f3ea: fundo da caixa de dicas */ --dono-vermelho: var(--perigo); /* #b4271d: queda ruim, e SO o que exige acao */ --dono-amarelo: var(--alerta); /* #8a5a06: atencao media (e mostarda escuro, legivel em texto) */ /* ---------- as DUAS que faltavam de verdade ---------- Nao ha azul nem laranja-claro no painel: `--info` e azul-petroleo esverdeado (token de ESTADO, nao de categoria) e nao existe fundo laranja nenhum. Estas duas nascem aqui, com par no modo escuro logo abaixo, e com o contraste medido escrito ao lado -- porque cor nova sem a conta do contraste e como numero sem medicao neste repositorio. */ --dono-azul: #1f5fa8; /* 6,4:1 no branco: CATEGORIA, nunca alarme */ /* /!\ O LARANJA DO GRAFICO NAO SERVE PARA O ICONE, e a conta e que decide isso, nao o olho. `--chart-5` (#e0721f) contra o proprio fundo tintado a 12% da 2,8:1 -- abaixo do piso de 3:1 que a WCAG exige para elemento GRAFICO (texto pede 4,5:1; o traco de um icone pede 3:1). Numa tela branca ele passa raspando (3,2:1) e dentro da caixinha do cartao ele reprova. Entao o icone laranja usa esta versao escura, que da 5,9:1 na mesma caixinha, e a LINHA do grafico continua no `--chart-5` de sempre, que e figura sobre fundo branco e passa. Sao dois laranjas de proposito, e o motivo esta escrito aqui para ninguem "unificar" os dois depois. */ --dono-laranja-escuro: #8f4310; /* 5,9:1 no fundo tintado do icone, 6,2:1 na faixa de entressafra */ } /* O PAR DO MODO ESCURO, e ele nao e enfeite: `--dono-azul` a 6,4:1 e medido CONTRA BRANCO. No fundo escuro (#06150e) esse mesmo azul da 1,5:1 e some. As tres variaveis proprias trocam; as seis apelidadas nao precisam, porque os tokens que elas apontam ja trocam sozinhos. Os dois seletores repetem o bloco de proposito, do mesmo jeito que tokens.css faz: o primeiro e o modo escuro do sistema operacional (a menos que o usuario tenha travado em claro), o segundo e o botao de tema do painel gravando `html[data-tema="escuro"]` por cima. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .tela-do-dono { --dono-azul: #7fb2e8; /* 8,4:1 no fundo escuro */ --dono-laranja-escuro: #f0913f; } } :root[data-tema="escuro"] .tela-do-dono { --dono-azul: #7fb2e8; --dono-laranja-escuro: #f0913f; } /* ---------------------------------------------------------------- 1. a grade: NAO MEXE /!\ AQUI EU JA TINHA ERRADO, e o Carvalho corrigiu olhando a previa: "nao temos cards com cantos arredondados no painel intel." Fui medir `assets/css/` e ele esta certo -- a regra do painel nao e "sem cantos", e mais fina que isso: var(--radius) 8px e var(--radius-sm) 6px -> em CONTROLE: .menu-item, .abas, .secao-aba, .cad-form, .cad-erro, .login-erro, .sino-painel 999px -> pilulas e selos (27 usos) .cartao e .indicador -> NENHUM radius, NENHUMA borda propria, sem sombra SUPERFICIE DE DADO E PLANA; O ARREDONDADO E DO QUE SE CLICA. Cartao de numero, painel de grafico e tabela sao superficie: canto vivo, separados pelo fio de cabelo de 1px que a propria `.grade` ja desenha (`gap: 1px` com o fundo pintado de `--border`). Botao, aba, campo e caixa de aviso sao controle: 8px. Selo e pilula: redondos. ENTAO A `.grade` NAO GANHA NADA AQUI. Eu tinha escrito um bloco que soltava os cartoes com 12px de respiro, fundo cinza e canto de 8px, copiando o desenho do James ao pe da letra -- e isso teria posto um segundo idioma de superficie dentro do mesmo painel, visivel lado a lado com as 41 telas de modulo a um clique de distancia. O desenho do James manda em COR, ICONE, DENSIDADE e COMPOSICAO; canto e sombra continuam sendo do painel. E a divergencia entre as imagens dele e o que esta no ar neste ponto e deliberada, nao esquecimento. */ /* ---------------------------------------------------------------- 2. o cartao de numero OITO NUMA LINHA SO, e essa e a primeira coisa que se ve no desenho do James. A estrutura que o `indicador()` do kit ja monta e exatamente a do desenho -- rotulo pequeno, valor grande, selo de variacao, frase de apoio, icone a direita --, entao nada aqui cria componente novo: e o mesmo `indicador()`, vestido. Cria-se so a coluna que faltava. `.col-2` NAO EXISTE em componentes.css (a escala vai de col-3 a col-12) porque nenhuma tela de modulo precisou de seis cartoes numa linha. Ela nasce aqui, dentro do escopo, e nao la: a escala do painel nao muda por causa de uma tela. */ .tela-do-dono > .col-2 { grid-column: span 2; } /* O ROTULO ENCOLHE E DESBOTA, e o VALOR CRESCE. No desenho, o rotulo e um sussurro de 11px cinza em cima de um numero que grita; nas telas de modulo os dois tem quase o mesmo peso, porque la o rotulo precisa competir (sao 30 numeros numa tela e o dono nao sabe de cor o que cada um e). Aqui sao seis, e o dono abriu a tela sabendo o que veio buscar. */ .tela-do-dono .indicador { padding: 14px; } .tela-do-dono .indicador-rotulo { font-size: 12px; color: var(--muted-foreground); } /* O SELO DE VARIACAO CAI PARA A LINHA DE BAIXO. `.indicador-valor` e um flex com baseline compartilhada, entao "R$ 1,08" e "−49,4%" saem colados na mesma linha; no desenho do James a seta e a porcentagem ficam SOB o numero, numa linha propria. Grid com `justify-items: start` resolve sem tocar no JS: o `` cai na linha 1 e o `` na linha 2, ambos encostados a esquerda -- e o `container-type: inline-size` que o componentes.css poe neste mesmo elemento continua valendo, que e o que faz o numero encolher. */ .tela-do-dono .indicador-valor { display: grid; justify-items: start; gap: 6px; } /* /!\ O PISO DE 18px CORTAVA O NUMERO, e a conta que o justificava estava errada. O que estava escrito aqui: "seis cartoes de `col-2` dao ~175px cada... o valor mais longo ocupa ~145px e cabe". MEDIDO no navegador de verdade em 16/09/2026 (`bash scripts/ver-painel-real.sh`, 1440px, Sankhya real), nas DUAS telas do dono: `.indicador-valor` tem **112px**, e nao 147 -- porque `.lado` poe o icone de 38px AO LADO do texto, e os 175px do cartao se repartem entre os dois. O numero pedia 140px e saia cortado: produtos-vendidos?produto=18423 -> "R$ 2.787.141,48" indicador-valor 112 < 140 vendedores -> "R$ 2.455.415,04" indicador-valor 112 < 140 NUMERO CORTADO E NUMERO ERRADO, sem nenhum aviso: "R$ 2.455.415,04" vira "R$ 2.455.41..." e quem le nao tem como desconfiar. E a regra 1 deste painel sendo quebrada pelo caminho mais discreto que existe. POR QUE `11.5cqi` (a regra do proprio componentes.css) E O NUMERO CERTO, e nao 13: o digito da Cal Sans mede ~0,52em, entao "R$ 60.046.447,91" (16 caracteres, o faturamento do grupo em 365 dias) ocupa ~8,4em. Com a fonte em 13% da largura da caixa, o texto da 8,4 x 0,13 = **109% da caixa** -- ele estoura em QUALQUER largura, e nao so nesta. Com 11,5% da 96,6%, que cabe com folga. O piso cai para 13px pela mesma conta: 8,4 x 13px = 109px, dentro dos 112px medidos. O QUE ISSO CUSTA, dito na cara: em 1440px com seis cartoes o valor sai em ~13px, so um ponto acima da frase de apoio -- a hierarquia fica fraca. A alternativa seria QUATRO cartoes por linha em vez de seis (uma linha na regra de 1100px logo abaixo), e ai o numero volta a ~21px. Nao fiz isso porque a fileira de SEIS foi decisao do Carvalho, olhando a previa, e trocar o desenho dele por conta propria e diferente de consertar um numero cortado. Fica nomeado para ele decidir. */ .tela-do-dono .indicador-valor .numero { font-size: clamp(13px, 11.5cqi, 28px); } .tela-do-dono .indicador-apoio { font-size: 12px; line-height: 1.45; } /* ---------------------------------------------------------------- 3. o icone colorido CADA CARTAO TEM A SUA COR, e e isso que separa o desenho do James de um relatorio de banco. O Carvalho foi explicito: "preciso de coisas mais coloridas, igual as imagens". A regra que governa quando usar cor sao DUAS FAMILIAS, e confundi-las e o erro que ja foi pago uma vez: - IDENTIDADE E CATEGORIA: a vontade. O icone do cartao, a cor da serie no grafico, a faixa de fundo do periodo. Nao significa "problema", significa "isto e aquilo". - ALARME: raro. Vermelho cheio so no que exige acao. Se toda tabela tiver vermelho, o vermelho deixa de querer dizer alguma coisa. O icone e do primeiro grupo. Ele pinta a caixinha de 38px que o `indicador()` ja desenha, com um fundo a 12% da propria cor -- claro o bastante para o traco do icone continuar em 6:1 por cima, forte o bastante para o cartao ter dono numa fileira de seis. */ /* r102 (07/10/2026, o Carvalho: "prefiro as telas do james, com cores nos cards e degradês"): a pastilha deixou de ser pintada aqui. O cartao inteiro ganhou o tom do sentido dele (`data-tom`: `tom` na chamada ou o do icone, ui.js), e a pastilha cheia, com o degrade desse tom, e da camada comum (assets/css/pele-james.css, PADRAO-JAMES secao 2). Pintar a pastilha AQUI com a cor da classe venceria a camada comum (a regra daqui e mais especifica) e o icone sairia numa cor e o cartao noutra. As classes `cor-*` (`cor-verde`, `cor-laranja`...) continuam no JavaScript, sem regra aqui: a Analise do Produto traduz cada uma no tom do cartao (`TOM_DA_COR`, analise-produto.js). */ /* ---------------------------------------------------------------- 4. dois graficos LADO A LADO No desenho do James "Evolucao de precos" e "Volume vendido" estao um ao lado do outro, e isso nao e so economia de altura: sao duas perguntas que se leem JUNTAS (volume caindo com preco subindo e safra apertando, nao cliente indo embora) e empilhados obrigam a rolar entre uma e outra, que e exatamente ler uma DEPOIS da outra. O corte e em 1100px do CONTEUDO, e nao da janela -- `@container conteudo`, o mesmo que o componentes.css usa: em 1280px com o menu aberto sobram ~970px, e dois graficos de 485px com eixo de 56px ficam com 430px de desenho para 12 meses. Cabe. Em 1024px nao cabe, e eles empilham. Medir a janela em vez do conteudo erraria os dois casos. */ .tela-do-dono .dupla-de-graficos { display: grid; gap: 16px; } @container conteudo (min-width: 1100px) { .tela-do-dono .dupla-de-graficos { grid-template-columns: 1fr 1fr; } } /* ---------------------------------------------------------------- 5. a caixa de dicas AQUI E ONDE O TEXTO LONGO MORA. A tela terminava com dez blocos de paragrafo cinza no rodape -- "o que esta tela nao mostra, e por que" -- numa pagina que o James pediu "sem MUITOS TEXTOS". O conteudo daqueles paragrafos e bom e honesto (cada um tem a medicao que provou a falta) e por isso ele NAO foi apagado: ele foi para dentro desta caixa, atras de um botao, com fundo verde claro e marcador redondo -- o componente 10 do desenho dele. O titulo continua visivel: quem nao quer ler passa por cima, e quem chegou ate aqui querendo saber por que quatro dos oito numeros do desenho nao estao na tela abre e le. */ /* r102: o verde claro vira o degrade diagonal do desenho do James, o mesmo receituario do cartao de numero (PADRAO-JAMES secao 2), com a borda fina do verde */ .tela-do-dono .caixa-de-dicas { background: linear-gradient(135deg, var(--tom-verde-fundo) 0%, color-mix(in srgb, var(--tom-verde-fundo) 40%, var(--card)) 100%); border: 1px solid color-mix(in srgb, var(--tom-verde) 24%, transparent); } .tela-do-dono .caixa-de-dicas .cartao-cab { border-bottom-color: color-mix(in srgb, var(--dono-verde-escuro) 18%, var(--dono-verde-claro)); } /* a pastilha da caixa e cheia (pele-james.css) e fica no verde da caixa, com o icone na tinta da pastilha: pintar o icone de verde sobre a pastilha de outro tom apagava o desenho */ .tela-do-dono .caixa-de-dicas .cartao-cab > .cartao-icone { --james-tom: var(--tom-verde); } .tela-do-dono .caixa-de-dicas .cartao-cab > svg, .tela-do-dono .caixa-de-dicas .cartao-cab h2 { color: var(--dono-verde-escuro); } /* O MARCADOR REDONDO VERDE de cada item, que e o que transforma um paredao numa lista que se le. `::before` e nao `list-style` porque os itens sao `
` com titulo e dois paragrafos dentro -- `
  • ` com marcador nativo poria a bolinha na altura errada num bloco de tres linhas. */ .tela-do-dono .caixa-de-dicas .explicacao-item { position: relative; padding-left: 20px; } .tela-do-dono .caixa-de-dicas .explicacao-item::before { content: ""; position: absolute; left: 2px; top: 7px; width: 8px; height: 8px; border-radius: 999px; background: var(--dono-verde-escuro); } /* O `
    ` que guarda a lista: o `verDetalhes()` do kit ja desenha o `` como botao vazado, entao aqui so o fundo do botao muda para nao sumir dentro do verde claro. */ .tela-do-dono .caixa-de-dicas .recolhido > summary { background: var(--card); } /* ---------------------------------------------------------------- 6. a tabela NO MAXIMO 10 LINHAS A VISTA. No desenho do James sao cinco tabelas de quatro a cinco linhas, cada uma com "Ver todos"; na nossa tela uma tabela de 300 linhas ocupava metade da pagina e empurrava tudo que vinha depois para fora do alcance da vista. O corte em si e feito no JS (`porPagina: 10` no `tabela()`), porque quem sabe contar linha e a funcao que as monta -- aqui fica so o que e aparencia: linha compacta, como no desenho. O TOTAL DO CONJUNTO INTEIRO continua escrito no rodape da tabela, que e o que a ARMADILHA #7 deste repositorio exige: lista cortada carrega o numero do conjunto, nunca o da parte a vista. */ /* SO O `td`, e NUNCA o `th`. O cabecalho tem `height: 44px` fixo em componentes.css e o painel inteiro e `box-sizing: border-box` (tokens.css) -- entao `padding-block` la nao encurta a linha, so espreme o conteudo dentro dos mesmos 44px, e o botao de ordenar que mora dentro dele encolhe junto. Alvo de toque menor que 40px e a regra 5 do portao de mobile, e eu ia quebra-la para ganhar zero pixel de altura. O `td` nao tem altura fixa: e ele que decide a linha. */ .tela-do-dono .tabela td { padding-block: 8px; } /* ---------------------------------------------------------------- 7. o celular SEIS CARTOES NUMA LINHA SO EXISTEM NO COMPUTADOR. Daqui para baixo a fileira vira tres, depois dois, depois um -- e cada degrau tem um motivo medido, nao um numero redondo: - 1100px: e onde os dois graficos deixam de caber lado a lado (regra 4), entao a fileira de seis encolhe junto, para a tela inteira mudar de forma de uma vez em vez de aos pedacos; - 980px: e o degrau que o proprio componentes.css ja usa para todas as telas do painel; - 600px: celular. Um cartao por linha, com o numero de volta ao tamanho cheio. As tres regras tem a MESMA especificidade da regra generica do componentes.css (`.grade > [class*="col-"]`, que joga tudo para largura inteira em 980px). Empate de especificidade se resolve por ordem de arquivo, e este arquivo e carregado depois -- e por isso que a de 1100px nao e engolida pela de 980px la de tras. */ @container conteudo (max-width: 1099.98px) { .tela-do-dono > .col-2 { grid-column: span 4; } } @container conteudo (max-width: 979.98px) { .tela-do-dono > .col-2 { grid-column: span 6; } } @container conteudo (max-width: 599.98px) { .tela-do-dono > .col-2 { grid-column: 1 / -1; } } /* ---------------------------------------------------------------- 8. o titulo do grafico `grafico()` recebe `titulo` e so o usa como `aria-label`: quem usa leitor de tela sabia do que era cada grafico e quem enxerga nao. Com dois graficos LADO A LADO isso deixa de ser detalhe -- sem titulo visivel nao ha como saber qual dos dois e o preco e qual e o volume antes de ler o eixo. O titulo e a legenda de bolinhas coloridas sao montados em analise-produto.js (`comLegenda`) e vestidos aqui. */ .tela-do-dono .grafico-bloco > h3 { margin: 0 0 2px; font-size: 15px; font-weight: 600; color: var(--foreground); } .tela-do-dono .grafico-bloco > .legenda { margin-bottom: 10px; } /* ---------------------------------------------------------------- 9. o cartao do produto (r102) O "Informacoes do produto" do desenho 1 do James: na Analise do Produto (o detalhe de O que vende), o cartao da comparacao, colado nos numeros, leva a foto grande da fruta (96 px, jap-comum.js `fotoDaFruta`) a esquerda. Produto sem foto nao ganha nada: o cartao fica como era. */ .tela-do-dono .jornada-produto .linha-ferramentas:has(> .fruta-foto-grande) { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 16px; row-gap: 4px; } .tela-do-dono .jornada-produto .linha-ferramentas > .fruta-foto-grande { grid-row: span 3; } .tela-do-dono .jornada-produto .linha-ferramentas:has(> .fruta-foto-grande) > :not(.fruta-foto-grande) { grid-column: 2; justify-self: start; min-width: 0; max-width: 100%; }