/* =========================================================================== CT MULTAS — TOKENS v3 --------------------------------------------------------------------------- Esta e a UNICA folha do sistema que tem direito de escrever um hex. Componente, pagina e modulo escrevem contra var(--ct-*), nunca contra cor crua. E o que permite trocar claro/escuro em um lugar so, e o que impede que volte a existir a situacao de hoje: 256 hex crus so no index.html, nove paginas com :root proprio e seis copias da barra preta. Ordem de link, obrigatoria e nesta sequencia: 1. /fontes/fontes.css (Instrument Sans e IBM Plex Mono, auto-hospedadas) 2. tokens.css (este arquivo) 3. componentes.css 4. (opcional) modulo da pagina, so com layout, nunca com cor HERANCA: a identidade vem do ct-tokens.css de producao e continua valendo. Papel quente, barra preta com o amarelo da placa, lime como acao unica, dourado como destaque que nao e acionavel, mono obrigatorio em identificador, placa Mercosul literal. O que muda aqui: cada token ganhou par escuro, as cores que reprovaram em contraste foram corrigidas, e entrou a escala de espaco que faltava (era por ela que cinco paginas ainda carregavam a ct-ui.css inteira). O QUE MUDOU EM RELACAO AO ct-tokens.css, e por que: --ct-tinta-3 #8A8A82 -> #6B6B63 dava 2,96:1 no papel; rotulo e metadado sao conteudo, precisam 4,5:1 --ct-dourado #B07E00 -> #8A6208 dava 3,60:1 no branco, reprovava --ct-lime-tinta #5A7A12 -> #4F6B0F dava 4,23:1 sobre o papel --ct-lime-linha #8FBF1F -> #6F9314 dava 1,86:1, sumia contra o papel entrou --ct-linha-forte borda de controle exige 3:1, e a --ct-linha da 1,35:1 entrou --ct-atencao o dourado vinha fazendo papel de aviso sem ser cor de estado --ct-fs-campo 16px campo abaixo de 16px faz o Safari do iPhone ampliar a tela sozinho pesos a fonte servida so tem 400/500/600. Todo 700/800/900 do sistema atual e negrito falso sintetizado pelo navegador. O teto aqui e 600. =========================================================================== */ /* =========================================================================== 1. TEMA CLARO (padrao) =========================================================================== */ :root { color-scheme: light; /* ----------------------------------------------------------------------- 1.1 SUPERFICIE Quatro planos, do fundo para a frente. O papel quente e a assinatura da casa: e ele que separa o CT Multas de qualquer painel branco-azulado. ----------------------------------------------------------------------- */ --ct-plano: #EDEDE9; /* fundo da aplicacao, o papel quente */ --ct-superficie: #FFFFFF; /* card, painel, linha de tabela */ --ct-rebaixo: #F5F5F2; /* faixa interna, campo inerte, cabecalho th */ --ct-elevado: #FFFFFF; /* modal, gaveta, menu suspenso, tooltip */ /* Superficie invertida: a barra preta. Nao e "escuro", e identidade. Ela continua preta no tema claro E no tema escuro. */ --ct-inverso: #141412; /* barra superior */ --ct-inverso-2: #232320; /* hover dentro da barra */ --ct-inverso-3: #3D3D37; /* divisoria dentro da barra */ /* Veu do modal e da gaveta. Quente, nao azul. */ --ct-veu: rgba(20, 20, 18, .48); /* ----------------------------------------------------------------------- 1.2 TINTA Tres niveis, e nenhum deles e decorativo: --ct-tinta-3 pinta rotulo, metadado e placeholder, que sao conteudo. Por isso passa 4,5:1. ----------------------------------------------------------------------- */ --ct-tinta: #1B1B19; /* 14,70:1 no papel 17,25:1 no branco */ --ct-tinta-2: #56564F; /* 6,30:1 7,40:1 */ --ct-tinta-3: #6B6B63; /* 4,58:1 5,37:1 */ --ct-tinta-fraca: #7C7C72; /* 3,86:1 no rebaixo. So texto desabilitado */ /* Tinta sobre a barra preta */ --ct-tinta-inv: #F2F2EC; /* 16,41:1 sobre o preto */ --ct-tinta-inv-2: #C8C8C0; /* 10,96:1 acao secundaria da barra */ --ct-tinta-inv-3: #A8A8A0; /* 7,71:1 aba inativa */ /* ----------------------------------------------------------------------- 1.3 LINHA --ct-linha e --ct-linha-suave sao DECORATIVAS: separam blocos, nao carregam informacao, e por isso podem ficar abaixo de 3:1. --ct-linha-forte e a borda de CONTROLE (campo, botao secundario, checkbox). Essa carrega informacao e passa 3:1 nos tres planos. ----------------------------------------------------------------------- */ --ct-linha: #DEDED8; /* borda de card, divisoria de tabela */ --ct-linha-suave: #EAEAE5; /* divisoria interna do card */ --ct-linha-forte: #808076; /* 3,40:1 papel 3,99:1 branco 3,65:1 reb. */ /* ----------------------------------------------------------------------- 1.4 MARCA Tres cores, tres papeis, e a regra que nunca pode cair: LIME = acao. Uma por bloco. Nunca como texto sobre fundo claro. DOURADO = destaque que NAO e acionavel e NAO e alarme. AMARELO = marca, e so sobre o preto. As tres nunca dividem o mesmo bloco. Lime e dourado sao vizinhos no espectro e se sujam quando ficam lado a lado. ----------------------------------------------------------------------- */ --ct-lime: #C9F25D; /* preenchimento da acao principal */ --ct-lime-forte: #BEE84A; /* hover (era hex copiado em 6 lugares) */ --ct-lime-press: #B2DC3C; /* pressionado */ --ct-lime-sobre: #2F3D0C; /* texto sobre o lime: 9,11:1 */ --ct-lime-tinta: #4F6B0F; /* lime legivel como TEXTO: 5,20:1 no papel */ --ct-lime-linha: #6F9314; /* traco fino de grafico: 3,05:1 no papel */ --ct-lime-suave: #EDF7D4; /* fundo suave */ --ct-dourado: #8A6208; /* dourado legivel como texto: 4,67:1 */ --ct-dourado-fill: #E9B43C; /* preenchimento */ --ct-dourado-sobre:#3A2A00; /* texto sobre o preenchimento: 7,32:1 */ --ct-dourado-linha:#B37F0A; /* traco/trilho dourado: 3,53:1 no branco */ --ct-dourado-suave:#FBF2DC; /* fundo de destaque */ --ct-amarelo: #F5C462; /* marca sobre o preto: 11,38:1 */ --ct-amarelo-sobre:#3A2A00; /* texto sobre o amarelo: 8,57:1 */ /* ----------------------------------------------------------------------- 1.5 ESTADO REVOGADO EM 08/08/2026, por decisao da dona (passo 1 do projeto visual): esta secao dizia "dessaturados de proposito: a cor informa, nao alarma". Passa a valer o contrario — a cor e FORTE e identifica fila e estado; o equilibrio nao vem de dessaturar, vem do fundo neutro e do uso: cor em card, etiqueta, trilho e indicador, NUNCA no fundo da pagina. A regra do vermelho continua a mesma: ele so aparece quando ha algo que a pessoa possa corrigir, e sai da tela quando o numero e zero. A PALETA DAS SEIS CORES veio do central.html (fatia 2 do redesenho, onde nasceu local de proposito, ate assentar). CADA COR TEM CINCO PAPEIS, e e isso que deixa a cor ser forte sem sujar: a cheia (o traco), -f forte (texto sobre fundo claro), -s suave (fundo), -b borda, e o gradiente -g. Trocar so a cheia e deixar o resto adivinhar e como a tela fica com cara de saturada. DUAS AINDA NAO TEM DONO: roxo (decurso) e fila do Gestao CNH, laranja (consultas do site) e do Meu Recurso. Nascem definidas para o dia em que essas telas chegarem ao sistema — pintar de roxo um numero que a tela nao tem seria inventar o numero. DUAS TROCARAM DE VALOR EM 08/08/2026, por decisao da dona (ordem "as duas cores que nao chegaram"): consultas do site deixou o ROSA e virou LARANJA; aguardando deixou a MOSTARDA e virou PRETO. Os nomes ficaram — --e-aguar nomeia o estado "aguardando" e --e-site nomeia "consultas do site", nao a cor. O PRETO INVERTE NO TEMA ESCURO, e isso nao e preferencia: preenchimento preto sobre o plano escuro da 1,38:1 — o trilho do card, o ponto da coluna e a tarja do quadro sumiriam a noite, sem erro nenhum. No escuro, "preto" e um grafite claro (13,20:1 sobre o plano). E a UNICA das seis em que a cheia e o gradiente mudam entre os temas. ----------------------------------------------------------------------- */ --e-novo: #2563EB; --e-novo-f: #1D4ED8; --e-novo-s: #EAF0FE; --e-novo-b: #C3D6FC; --e-aguar: #2E2E2A; --e-aguar-f: #1B1B19; --e-aguar-s: #EBEBE6; --e-aguar-b: #C6C6BE; --e-ok: #0F8A63; --e-ok-f: #046A4C; --e-ok-s: #E6F6F0; --e-ok-b: #A9E3CE; --e-alerta: #DC2626; --e-alerta-f: #A81B1B; --e-alerta-s: #FDECEC; --e-alerta-b: #F6BEBE; --e-decurso:#7C3AED; --e-decurso-f:#6127C4; --e-decurso-s:#F1ECFE; --e-decurso-b:#D6C6FB; --e-site: #E8720A; --e-site-f: #A8480A; --e-site-s: #FEF2E7; --e-site-b: #F8CFA4; --g-novo: linear-gradient(135deg,#3B82F6,#1D4ED8); --g-aguar: linear-gradient(135deg,#4A4A44,#1B1B19); --g-ok: linear-gradient(135deg,#19A87A,#0B6E50); --g-alerta: linear-gradient(135deg,#EF4444,#B91C1C); --g-decurso:linear-gradient(135deg,#A78BFA,#6D28D9); --g-site: linear-gradient(135deg,#FB923C,#C2530A); /* O GRADIENTE DA CASA (08/08/2026, cabecalho claro). O portal nao e um dos cinco sistemas: ele e a casa, e a casa se veste da marca. ELE E DOURADO, E NAO AMARELO, e a diferenca aqui e a razao de existir desta linha. O amarelo da marca (--ct-amarelo #F5C462) mede 1,62:1 sobre o branco e 1,38:1 sobre o papel quente: como traco de 2px num cabecalho CLARO ele simplesmente nao aparece. Ele continua sendo a marca — mas como PREENCHIMENTO dentro do losango, com o desenho escuro por cima, que e onde 11,38:1 sobre o preto do proprio simbolo o sustenta. Escrito em var(), e nao em hex, de proposito: as duas pontas ja invertem sozinhas por tema (claro #B37F0A->#8A6208, escuro #C08A12->#E0AC46), e assim este gradiente e o UNICO dos sete que nao precisa ser repetido nos tres blocos de tema deste arquivo. */ --g-marca: linear-gradient(135deg, var(--ct-dourado-linha), var(--ct-dourado)); /* O neutro do Kanban virou traco CHAPADO em 08/08/2026: com o preto entre as seis, um cinza em gradiente ficava vizinho do grafite em gradiente. Gradiente forte agora e sempre ESTADO; o neutro parece o que e — ausencia de estado. Coluna sem estado (Arquivados) continua sem pegar emprestada a cor de um estado que existe. */ --g-neutro: var(--ct-linha-forte); /* TEXTO SOBRE O PREENCHIMENTO, remedido em 08/08/2026 com as cores novas. A REGRA QUE VALE PARA AS SEIS (e agora esta escrita como regra): - texto sobre GRADIENTE so passa no PRETO, nas duas pontas e nos dois temas (branco da 8,92 e 17,25 no claro; a tinta escura da 14,65 e 8,44 no escuro). E a unica. - verde e laranja acendem na COR CHEIA, nunca no gradiente: na ponta que os trai, o verde derruba qualquer texto a 3,36 e o laranja a 3,32. Sobre a cheia, --e-ok-sobre da 4,65 e --e-site-sobre da 5,01. - azul, vermelho e roxo aceitam texto claro (--e-sobre-claro) sobre o gradiente e sobre a cheia: 5,17 · 4,83 · 5,70 na cheia. Nao se escurece uma cheia para resolver texto: ela e a cor da coluna e do trilho, e escurece-la apagaria a diferenca entre as familias de relance, que e o que o quadro precisa preservar. */ --e-aguar-sobre: #FFFFFF; /* branco sobre o preto: 16,10 na cheia */ --e-ok-sobre: #020806; --e-site-sobre: #3A1E02; /* escuro da familia laranja: 5,01 na cheia */ /* Texto CLARO sobre preenchimento cheio das familias que aceitam claro (azul 5,17 · vermelho 4,83 · roxo 5,70). O mesmo valor nos dois temas, porque essas cheias nao mudam no escuro. E o unico "branco" de estado com nome proprio — para pagina nenhuma voltar a escrever hex. */ --e-sobre-claro: #FFFFFF; /* OS QUATRO NOMES ANTIGOS, REPONTADOS para as cores novas (08/08/2026). Repontar, e nao renomear: os nomes velhos estao escritos em centenas de lugares nas dez paginas, e cada linha destas some sozinha quando o ultimo uso sair. Um hex aqui em vez do var() seria a paleta escrita duas vezes — o defeito que este arquivo existe para impedir. O --ct-atencao APONTA PARA O DOURADO, e nao para o --e-aguar (desde a troca de 08/08/2026, quando "aguardando" virou PRETO): apontado para o preto, todo texto de atencao das dez paginas viraria tinta comum, indistinguivel de texto normal. O dourado e exatamente o papel que o cabecalho deste arquivo ja da a ele — "destaque que NAO e acionavel e NAO e alarme" — e passa: 5,48 no branco, 4,67 no papel, 8,26 no escuro. O teste de paleta trava --ct-atencao != --ct-tinta para este erro nao voltar calado. */ --ct-info: var(--e-novo-f); --ct-info-suave: var(--e-novo-s); --ct-info-linha: var(--e-novo-b); --ct-ok: var(--e-ok-f); --ct-ok-suave: var(--e-ok-s); --ct-ok-linha: var(--e-ok-b); --ct-atencao: var(--ct-dourado); --ct-atencao-suave: var(--ct-dourado-suave); --ct-atencao-linha:var(--ct-dourado-linha); --ct-alerta: var(--e-alerta-f); --ct-alerta-suave: var(--e-alerta-s); --ct-alerta-linha: var(--e-alerta-b); /* Texto sobre o preenchimento de alerta (so no botao de confirmar exclusao dentro do modal). No claro e branco (7,40:1 sobre o alerta repontado); no escuro o alerta e claro, entao o texto vira escuro (8,86:1). Sem este token o botao de perigo ficaria com texto branco sobre salmao no escuro. */ --ct-alerta-sobre: #FFFFFF; /* ----------------------------------------------------------------------- 1.6 ANEL DE FOCO Um token so. Ele e REDEFINIDO por contexto (secao 3), nunca duplicado. Sempre desenhado com outline-offset, entao a razao que vale e contra a SUPERFICIE atras do componente, nunca contra o preenchimento dele. Hoje o sistema tem dois aneis, um deles invisivel, e quem decidiu isso foi a especificidade do seletor, nao uma pessoa. ----------------------------------------------------------------------- */ --ct-anel: #2F5480; /* 6,62:1 papel 7,78:1 branco 7,12:1 reb. */ --ct-anel-largura: 2px; --ct-anel-fora: 2px; /* ----------------------------------------------------------------------- 1.7 SOMBRA Quente, curta, sem glow. O tom vem da tinta, nao de um azul de ardosia. ----------------------------------------------------------------------- */ --ct-sombra-1: 0 1px 2px rgba(27, 27, 25, .06); --ct-sombra-2: 0 2px 4px rgba(27, 27, 25, .07), 0 8px 20px -10px rgba(27, 27, 25, .14); --ct-sombra-3: 0 12px 32px -8px rgba(27, 27, 25, .24), 0 2px 6px rgba(27, 27, 25, .08); /* A SOMBRA DE UMA FAIXA GRUDADA NO PÉ, E ELA SOBE (09/08/2026) As três de cima descem, porque uma peça elevada projeta para baixo. Uma faixa colada no PÉ da janela é o caso contrário: o que ela precisa separar está EM CIMA dela, e uma sombra que desce cai para fora da tela e não separa nada. ELE NASCE PORQUE O FALLBACK NÃO SALVA. A `.fluxoTotal` e a `.cfgRodape` estavam escritas assim: box-shadow: var(--ct-sombra-2, 0 -2px 10px rgba(0,0,0,.08)) O segundo valor está CERTO — sobe. Só que ele é o fallback, e fallback só entra quando a variável NÃO EXISTE. `--ct-sombra-2` existe desde sempre, então as duas usaram a sombra que desce por meses, com a correção escrita na mesma linha, dois centímetros à direita, sem nunca rodar. É um defeito que se lê como já resolvido, que é o pior tipo. GÊMEO DO `--o-som-pe`, e não um alias dele: aquele fecha com `--o-linha`, que é a linha do painel Orçamento; este fecha com `--ct-linha`, que é a do resto do sistema. Apontar um para o outro traria a linha errada de cada lado, e a paleta `--o-` só manda dentro do Orçamento. */ --ct-sombra-pe: 0 -8px 24px -10px rgba(27, 27, 25, .16), 0 -1px 0 var(--ct-linha); /* Borda de elevacao. No claro e transparente (a sombra basta); no escuro ela existe, porque sombra nao le sobre fundo escuro. */ --ct-borda-elevada: transparent; /* ----------------------------------------------------------------------- 1.8 BOTAO Entrou em 08/08/2026 (passo 1b do projeto visual). Decisao da dona: SEM LIME. Sete cores — azul, amarelo, verde, laranja, roxo, preto, vermelho — e LETRA BRANCA sobre preenchimento forte. TOKENS SEPARADOS DOS DE ESTADO, e este e o ponto da secao existir: se o botao usasse os tons de estado, escurecer o preenchimento para carregar letra branca escureceria junto o laranja da etiqueta em toda a Central, sem ninguem pedir. Botao tem os tons dele; etiqueta, trilho e selo continuam com os da 1.5. TRES PRECISARAM ESCURECER para a letra branca passar. O matiz e o mesmo; mudou o brilho. Medido antes e depois: amarelo B4780C 3,73 reprovava -> 9E6A0B 4,65 verde 0F8A63 4,34 reprovava -> 0E845F 4,68 laranja E8720A 3,07 reprovava -> B75A08 4,69 ----------------------------------------------------------------------- */ --b-preto: #1B1B19; /* branco 17,25 */ --b-preto-2: #3A3A34; /* ponta clara do gradiente do principal: br 11,45 */ --b-azul: #2563EB; /* branco 5,17 */ --b-amarelo: #9E6A0B; /* branco 4,65 — escurecido de B4780C */ --b-verde: #0E845F; /* branco 4,68 — escurecido de 0F8A63 */ --b-laranja: #B75A08; /* branco 4,69 — escurecido de E8720A */ --b-roxo: #7C3AED; /* branco 5,70 */ --b-vermelho: #DC2626; /* branco 4,83 */ --b-letra: #FFFFFF; /* A letra do PRINCIPAL tem nome proprio porque ele e o unico que inverte no escuro. No claro e a mesma branca; no escuro vira tinta escura. */ --b-preto-letra: #FFFFFF; /* O halo do "brilho": sombra na COR DO PROPRIO BOTAO no hover. Precisa de canal alfa, entao nao da para derivar do hex com var() — cada familia tem o seu, escrito uma vez. */ --b-halo-preto: rgba(27, 27, 25, .50); --b-halo-azul: rgba(37, 99, 235, .55); --b-halo-amarelo: rgba(158, 106, 11, .55); --b-halo-verde: rgba(14, 132, 95, .55); --b-halo-laranja: rgba(183, 90, 8, .55); --b-halo-roxo: rgba(124, 58, 237, .55); --b-halo-vermelho: rgba(220, 38, 38, .55); /* O LUSTRO do principal: faixa que atravessa uma vez no hover. No claro ela e CLARA sobre o preto; no escuro o principal e claro, entao a faixa vira escura — clara sobre claro nao existiria. */ --b-lustro: rgba(255, 255, 255, .32); /* ----------------------------------------------------------------------- 1.9 AS DUAS CORES DE SERIE DO GRAFICO Subiram do central.html em 08/08/2026 (tarefa 4.1 do fechamento), quando aquela pagina entrou no gabarito de dez linhas — e subiram INTEIRAS, com a medicao, porque e a medicao que as justifica. ELAS SAO UM PAR MEDIDO POR DALTONISMO, e trocar um par medido por uma regra geral e regressao: claro #B37F0A x #1A5DA8 sobre #FFFFFF - CVD dE 26,3 · normal 30,7 escuro #A87B1E x #5093DD sobre #1C1C19 - CVD dE 24,7 · normal 25,0 O ESCURO NAO E O CLARO CLAREADO: dourado e amarelo sao claros por natureza e estouram a banda do tema escuro, entao os dois matizes foram REESCALONADOS — mesma familia, degrau proprio. O --ct-info da casa (#2F5480) ficou de fora por um motivo medido: o croma dele e 0,085, abaixo do piso de 0,10, e uma marca cheia nesse tom comeca a se ler como cinza. Ele continua certo para TEXTO, que e o trabalho dele. E E POR ISTO QUE ELAS MORAM AQUI e nao na pagina: esta e a unica folha do sistema que tem direito de escrever um hex, e um par medido e exatamente o caso em que o hex e o dado — nao ha token do qual derivar. */ --serie-gerados: #B37F0A; --serie-fechados: #1A5DA8; /* ----------------------------------------------------------------------- 1.10 A PALETA DO PAINEL ORCAMENTO (v3) Nasce em 09/08/2026, do print da dona. Ordem de servico: TAREFAS_ORCAMENTO_V3_PARA_O_CODE.md, Parte 1. ELA MANDA DENTRO DO PAINEL ORCAMENTO, E EM LUGAR NENHUM MAIS. A paleta de estado das seis cores, decidida em 08/08/2026, continua valendo no resto da Central ate o redesenho chegar la. O QUE ISSO CUSTA, DITO POR ESCRITO (decisao datada da dona, 09/08/2026): azul aqui quer dizer A MARCA DO PAINEL, e nao "multa nova". Enquanto as duas leituras conviverem em telas vizinhas, quem trabalha nas duas vai ler a mesma cor de dois jeitos no mesmo dia. A dona sabe e decidiu assim. Esta coexistencia e uma decisao com data, nao uma solucao: coexistir para sempre e a unica saida ruim. PREFIXO PROPRIO, e o motivo e duro: enquanto esta paleta viver so no Orcamento, ela NAO pode se confundir com os --ct- e os --e- do sistema. Um --azul generico ao lado de um --e-novo que tambem e azul e a primeira linha de uma confusao que ninguem desfaz depois. Quando ela virar base, o prefixo muda num lugar so. O MATIZ E O DO PRINT; MUDOU O BRILHO. Os degrades que o print sugeria davam, com o traco branco por cima, 1,81 (ciano), 1,92 (verde) e 2,72 (roxo) — abaixo ate do piso de 3 que um elemento grafico pede. Foram escurecidos ate o branco passar NAS DUAS PONTAS. E a mesma regra que a secao 1.8 aplicou ao amarelo, ao verde e ao laranja de botao em 08/08. MEDIDO AQUI, sobre estes hex (piso entre parenteses): valor -f sobre o cartao claro 4,86 a 6,06 · escuro 9,27 a 10,86 (4,5) branco no circulo 3,02 a 7,10 nas duas pontas (3) branco no botao 6,29 e 5,17 nas duas pontas (4,5) etiquetas claro 4,51 a 5,30 · escuro 8,51 a 10,05 (4,5) tinta-3 sobre papel claro 4,65 · escuro 6,11 (4,5) O NUMERO QUE PASSA RASPANDO: a etiqueta Pendente, 4,51 no claro. Qualquer clareada no fundo ambar a derruba. Se precisar mexer, mexa no TEXTO. O -f EXISTE PORQUE O - NAO SERVE DE TEXTO. Medido: a cor de marca sobre o proprio cartao suave da 4,44 no azul, 3,34 no ciano e 3,43 no verde — as tres reprovam. Apontar um para o outro "para simplificar" derruba o texto dos cartoes sem nada quebrar na tela. */ --o-sup: #FFFFFF; --o-sup-2: #FBFCFE; --o-tinta: #101828; --o-tinta-2: #475467; --o-tinta-3: #667085; --o-linha: #E4E7EC; --o-linha-forte: #98A2B3; --o-azul: #2563EB; --o-azul-f: #1D4ED8; --o-azul-b: #C7D9FE; --o-azul-s1: #EFF4FF; --o-azul-s2: #DCE8FF; --o-roxo: #7C3AED; --o-roxo-f: #6D28D9; --o-roxo-b: #DDD0FC; --o-roxo-s1: #F5F1FE; --o-roxo-s2: #EBE3FD; --o-ciano: #0891B2; --o-ciano-f: #0E7490; --o-ciano-b: #B6E9F5; --o-ciano-s1: #ECFBFE; --o-ciano-s2: #D6F5FB; --o-verde: #059669; --o-verde-f: #047857; --o-verde-b: #A8ECCB; --o-verde-s1: #ECFDF4; --o-verde-s2: #D6F7E7; /* OS -i1/-i2 E O --o-btn-* NAO MUDAM NO ESCURO, e a ausencia deles no bloco do tema escuro e PROPOSITAL — nao e esquecimento, e nao se "conserta". Eles carregam traco e letra BRANCOS, e o branco passa nos dois temas: inverte-los daria fundo claro com traco branco, que e o defeito e nao a correcao. O mesmo vale para as quatro cores de marca (--o-azul, --o-roxo, --o-ciano, --o-verde), que sao identidade do painel e nao superficie. */ --o-azul-i1: #3B82F6; --o-azul-i2: #1D4ED8; --o-roxo-i1: #8B5CF6; --o-roxo-i2: #6D28D9; --o-ciano-i1: #0AA2C0; --o-ciano-i2: #0E7490; --o-verde-i1: #059669; --o-verde-i2: #047857; --o-btn-1: #4F46E5; --o-btn-2: #2563EB; --o-btn-letra: #FFFFFF; --o-btn-halo: rgba(79, 70, 229, .42); /* OS DEGRADES DOS TRES CARTOES QUE A ORDEM NAO PREVIU (09/08/2026). A ordem desenhou quatro cartoes de DINHEIRO. A dona decidiu que eles carregam as CONTAGENS da conferencia — multas, aptas, bloqueadas, em revisao. Duas dessas contagens sao alarme, e alarme nao se pinta de roxo: "3 bloqueadas" precisa da cor que esta tela ja usa para barrado, e "0 bloqueadas" e a resposta boa e nao leva tinta nenhuma. ENTAO SAO TRES ESTADOS, E NAO TRES CORES NOVAS. O corpo dos cartoes vem das etiquetas que ja existem (`--o-venc-*` para barrado, `--o-pend-*` para revisao) — elas ja tem par escuro medido. O que falta ali e so o degrade do QUADRADO DO DESENHO, que as etiquetas nao tem porque nao desenham icone. SAO SEIS TOKENS, E SO NO BLOCO CLARO, pelo mesmo motivo dos `-i1`/`-i2` das quatro familias: eles carregam traco BRANCO, e o branco passa nos dois temas. Inverte-los daria fundo claro com traco branco — o defeito, e nao a correcao. Quem "completar" esta lista no escuro apaga os tres desenhos. Medido, com o branco por cima (piso 3 para elemento grafico, WCAG 1.4.11): alerta 4,83 e 6,47 · neutro 4,97 e 7,69 HOUVE UM TERCEIRO PAR, AMBAR, E ELE DUROU UM COMMIT. Nasceu para o cartao "em revisao" e morreu quando o significado voltou para as seis cores de estado: "em revisao" e `--e-aguar`, que e neutro. Ele era tambem o unico que passava raspando (3,19 com o branco por cima). Nao ficou guardado esperando dono porque nao ha dono possivel — nenhum estado deste sistema e ambar. O `--o-alerta-i1` E O MESMO HEX DE `--e-alerta` (#DC2626), e isso nao e coincidencia: as duas paletas sempre compartilharam cor, e o que as separava era o nome. Ele fica aqui, e nao aponta para la, porque este e o degrade do DESENHO — camada de identidade, que nao inverte — e `--e-alerta` e a cor de ESTADO. Apontar um para o outro amarraria duas camadas que a decisao de 09/08/2026 separou de proposito. */ --o-alerta-i1: #DC2626; --o-alerta-i2: #B91C1C; --o-neutro-i1: #667085; --o-neutro-i2: #475467; /* ESTAS TRES FICARAM SEM DONO EM 09/08/2026, e a nota e para nao serem apagadas nem re-vestidas por engano. Elas nasceram do print, onde nomeavam situacao de PAGAMENTO — pendente, vencida, paga. A coluna Situacao do Orcamento diz outra coisa (apta, em revisao, bloqueada), e por decisao da dona o SIGNIFICADO voltou para as seis cores de estado da secao acima. As etiquetas e os cartoes de alarme do painel usam `--e-ok`, `--e-aguar` e `--e-alerta` desde entao. FICAM DEFINIDAS, como o roxo e o laranja das seis ficam: o sistema TEM situacao de pagamento — no fechamento e nas faturas do parceiro, onde hoje se le "paga" e "em aberto" sem cor nenhuma. E la que elas encontram dono, se alguem for redesenhar aquela tela. Pinta-las em outro lugar antes disso e inventar um estado que a tela nao tem. */ --o-pend-t: #B45309; --o-pend-f: #FEF3C7; --o-pend-b: #FDE68A; --o-venc-t: #B91C1C; --o-venc-f: #FEE2E2; --o-venc-b: #FCA5A5; --o-paga-t: #047857; --o-paga-f: #D1FAE5; --o-paga-b: #6EE7B7; /* A SOMBRA DA FAIXA DO PE, E ELA SOBE (Parte 2.3 da ordem de 09/08/2026). O SEGUNDO VALOR E NEGATIVO, e e o ponto inteiro deste token. A `.fluxoTotal` de hoje usa `--ct-sombra-2`, que desce, numa barra colada no pe da janela: a sombra cai para FORA da tela e nada separa a faixa do conteudo que passa por baixo dela. Uma faixa grudada no pe precisa da sombra apontando para o conteudo, que esta em cima. Quem "arrumar" o sinal deste valor devolve o defeito com nome novo — e por isso a trava do teste confere que ele comeca com `0 -`. */ --o-som-pe: 0 -8px 24px -10px rgba(16, 24, 40, .22), 0 -1px 0 var(--o-linha); } /* =========================================================================== 2. TEMA ESCURO --------------------------------------------------------------------------- Mecanismo: preferencia do sistema operacional MAIS atributo data-theme, com o atributo vencendo nos dois sentidos. O :not([data-theme="light"]) e o que deixa alguem escolher claro dentro de um sistema escuro. Escuro NAO e inverter cor. O que muda alem do hex: - a hierarquia passa a ser feita por LUMINOSIDADE de superficie (plano < rebaixo < superficie < elevado), nao por sombra; - toda superficie elevada ganha borda, porque sombra some no escuro; - o lime perde um degrau de brilho (#BCE352), senao o botao vira lampada; - a sequencia de hover se INVERTE: no claro escurece, no escuro clareia; - a barra preta fica ainda mais escura (#0B0B09) para nao empatar com o plano da aplicacao; - a placa Mercosul NAO inverte: continua branca com moldura preta, porque ela imita um objeto real e e por ela que o olho acha o processo. =========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } } :root[data-theme="dark"] { color-scheme: dark; } /* Um unico bloco de valores escuros, escrito duas vezes porque CSS nao deixa agrupar seletor com media query. Se um valor mudar, muda nos dois. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ct-plano: #121210; --ct-superficie: #1C1C19; --ct-rebaixo: #171714; --ct-elevado: #242420; --ct-inverso: #0B0B09; --ct-inverso-2: #1A1A16; --ct-inverso-3: #33332E; --ct-veu: rgba(0, 0, 0, .66); --ct-tinta: #F0F0EA; /* 14,93:1 na superficie 16,39:1 no plano */ --ct-tinta-2: #B6B6AC; /* 8,36:1 9,18:1 */ --ct-tinta-3: #96968B; /* 5,72:1 6,28:1 */ --ct-tinta-fraca: #8A8A80; /* 5,16:1 no rebaixo, so desabilitado */ --ct-tinta-inv: #F2F2EC; /* 17,53:1 sobre a barra #0B0B09 */ --ct-tinta-inv-2: #C8C8C0; /* 11,71:1 */ --ct-tinta-inv-3: #A8A8A0; /* 8,23:1 */ --ct-linha: #32322C; --ct-linha-suave: #262622; --ct-linha-forte: #75756B; /* 3,67:1 sup 4,03:1 plano 3,35:1 elev. */ --ct-lime: #BCE352; /* 11,59:1 na superficie */ --ct-lime-forte: #C9F25D; /* hover CLAREIA no escuro */ --ct-lime-press: #AFD845; --ct-lime-sobre: #2F3D0C; /* 7,94:1 sobre o lime escuro */ --ct-lime-tinta: #A8D93F; /* 10,30:1 */ --ct-lime-linha: #8FBF1F; /* 7,84:1 */ --ct-lime-suave: #232B14; --ct-dourado: #E0AC46; /* 8,26:1 */ --ct-dourado-fill: #E9B43C; --ct-dourado-sobre:#3A2A00; --ct-dourado-linha:#C08A12; /* 5,60:1 */ --ct-dourado-suave:#2C2413; --ct-amarelo: #F5C462; /* 12,15:1 sobre a barra escura */ --ct-amarelo-sobre:#3A2A00; /* As cores de estado no escuro: o trio suave/borda/forte escurece; a CHEIA e o gradiente ficam — MENOS no preto, que INVERTE. O motivo esta no cabecalho da 1.5 e nao e preferencia: preenchimento preto sobre o plano escuro da 1,38:1, e o trilho do card, o ponto da coluna e a tarja do quadro sumiriam a noite, sem erro nenhum. Aqui "preto" e um grafite claro (13,20:1 sobre o plano). */ --e-novo-s: #13233F; --e-novo-b: #2A4A7C; --e-novo-f: #9DBCFC; --e-aguar: #D9D9CF; --e-aguar-s: #2A2A26; --e-aguar-b: #4A4A43; --e-aguar-f: #E4E4DA; --g-aguar: linear-gradient(135deg,#EDEDE4,#B6B6AC); --e-ok-s: #0D2A22; --e-ok-b: #1A5943; --e-ok-f: #63E0B4; --e-alerta-s: #3A1717; --e-alerta-b: #772A2A; --e-alerta-f: #FCA5A5; --e-decurso-s:#241A3D; --e-decurso-b:#4A3179; --e-decurso-f:#C4B0FD; --e-site-s: #3A1F0B; --e-site-b: #7A4712; --e-site-f: #FBBC85; /* O -sobre acompanha a cheia: as que nao mudam, fica; a do preto inverteu, entao o texto sobre ela vira tinta escura. */ --e-aguar-sobre: #1B1B19; --e-ok-sobre: #020806; --e-site-sobre: #3A1E02; --e-sobre-claro: #FFFFFF; --ct-info: var(--e-novo-f); --ct-info-suave: var(--e-novo-s); --ct-info-linha: var(--e-novo-b); --ct-ok: var(--e-ok-f); --ct-ok-suave: var(--e-ok-s); --ct-ok-linha: var(--e-ok-b); --ct-atencao: var(--ct-dourado); --ct-atencao-suave: var(--ct-dourado-suave); --ct-atencao-linha:var(--ct-dourado-linha); --ct-alerta: var(--e-alerta-f); --ct-alerta-suave: var(--e-alerta-s); --ct-alerta-linha: var(--e-alerta-b); --ct-alerta-sobre: #2C1815; --ct-anel: #F5C462; /* 10,54:1 sup 11,57:1 plano 9,61:1 elev.*/ /* BOTAO NO ESCURO (1.8). So o PRINCIPAL inverte, e nao e preferencia: botao preto sobre o plano quase preto desaparece — a mesma razao do trilho de estado. Aqui ele e claro com letra escura (15,08:1). Os coloridos ficam como estao: ja sao escuros, e a letra branca sobre eles continua passando. */ --b-preto: #F0F0EA; --b-preto-2: #C8C8C0; --b-preto-letra: #1B1B19; --b-halo-preto: rgba(0, 0, 0, .55); /* A faixa do lustro vira ESCURA: o principal aqui e claro. */ --b-lustro: rgba(0, 0, 0, .18); /* As duas de serie no escuro (1.9). Matiz REESCALONADO, e nao clareado: dourado e amarelo sao claros por natureza e estouram a banda do escuro. CVD dE 24,7 · normal 25,0 sobre a superficie escura. */ --serie-gerados: #A87B1E; --serie-fechados: #5093DD; /* 1.10 — A PALETA DO ORCAMENTO NO ESCURO (09/08/2026). ELE NAO E O CLARO ESCURECIDO: os fundos suaves viram TINTAS ESCURAS da mesma familia, e o tom de texto vira o CLARO da familia. Escurecer o claro daria cartao cinza-azulado com texto azul-escuro por cima. AS QUATRO CORES DE MARCA, os -i1/-i2 e o --o-btn-* NAO ESTAO AQUI, e a ausencia e proposital — o motivo esta escrito no bloco claro, na 1.10. Quem "completar" esta lista quebra o traco branco dos quatro circulos. */ --o-sup: #171A21; --o-sup-2: #1B1F28; --o-tinta: #E7E9EF; --o-tinta-2: #A9B0BE; --o-tinta-3: #8B93A3; --o-linha: #2B303B; --o-linha-forte: #6B7383; --o-azul-f: #A8C5FD; --o-azul-b: #26385C; --o-azul-s1: #12192B; --o-azul-s2: #16233C; --o-roxo-f: #CBB4FD; --o-roxo-b: #3A2C63; --o-roxo-s1: #1A1530; --o-roxo-s2: #211A3B; --o-ciano-f: #7DDDEF; --o-ciano-b: #1B4451; --o-ciano-s1: #0B1E26; --o-ciano-s2: #0E2730; --o-verde-f: #7EE7B5; --o-verde-b: #17503C; --o-verde-s1: #0B2019; --o-verde-s2: #0E2820; --o-pend-t: #FBCF7A; --o-pend-f: #33260C; --o-pend-b: #6B5115; --o-venc-t: #FCA5A5; --o-venc-f: #391616; --o-venc-b: #7A2C2C; --o-paga-t: #6EE7B7; --o-paga-f: #0D2A22; --o-paga-b: #1A5943; /* A sombra do pe no escuro: mais fechada, porque no escuro a sombra separa menos por luminancia e mais por peso. O sinal negativo do segundo valor e o mesmo, e pelo mesmo motivo — ver o bloco claro. */ --o-som-pe: 0 -10px 28px -10px rgba(0, 0, 0, .70), 0 -1px 0 var(--o-linha); --ct-sombra-1: 0 1px 2px rgba(0, 0, 0, .40); --ct-sombra-2: 0 2px 4px rgba(0, 0, 0, .45), 0 8px 20px -10px rgba(0, 0, 0, .60); --ct-sombra-3: 0 12px 32px -8px rgba(0, 0, 0, .70), 0 2px 6px rgba(0, 0, 0, .50); /* A sombra do pé no escuro: mais fechada, porque no escuro ela separa menos por luminância e mais por peso. O sinal negativo é o mesmo, e pelo mesmo motivo — ver o bloco claro, na 1.7. */ --ct-sombra-pe: 0 -10px 28px -10px rgba(0, 0, 0, .70), 0 -1px 0 var(--ct-linha); --ct-borda-elevada: #32322C; } } :root[data-theme="dark"] { --ct-plano: #121210; --ct-superficie: #1C1C19; --ct-rebaixo: #171714; --ct-elevado: #242420; --ct-inverso: #0B0B09; --ct-inverso-2: #1A1A16; --ct-inverso-3: #33332E; --ct-veu: rgba(0, 0, 0, .66); --ct-tinta: #F0F0EA; --ct-tinta-2: #B6B6AC; --ct-tinta-3: #96968B; --ct-tinta-fraca: #8A8A80; --ct-tinta-inv: #F2F2EC; --ct-tinta-inv-2: #C8C8C0; --ct-tinta-inv-3: #A8A8A0; --ct-linha: #32322C; --ct-linha-suave: #262622; --ct-linha-forte: #75756B; --ct-lime: #BCE352; --ct-lime-forte: #C9F25D; --ct-lime-press: #AFD845; --ct-lime-sobre: #2F3D0C; --ct-lime-tinta: #A8D93F; --ct-lime-linha: #8FBF1F; --ct-lime-suave: #232B14; --ct-dourado: #E0AC46; --ct-dourado-fill: #E9B43C; --ct-dourado-sobre:#3A2A00; --ct-dourado-linha:#C08A12; --ct-dourado-suave:#2C2413; --ct-amarelo: #F5C462; --ct-amarelo-sobre:#3A2A00; /* As cores de estado no escuro — copia fiel do bloco de cima, como o cabecalho da secao 2 manda: se um valor mudar, muda nos dois. Inclusive a inversao do preto, cujo motivo esta escrito la. */ --e-novo-s: #13233F; --e-novo-b: #2A4A7C; --e-novo-f: #9DBCFC; --e-aguar: #D9D9CF; --e-aguar-s: #2A2A26; --e-aguar-b: #4A4A43; --e-aguar-f: #E4E4DA; --g-aguar: linear-gradient(135deg,#EDEDE4,#B6B6AC); --e-ok-s: #0D2A22; --e-ok-b: #1A5943; --e-ok-f: #63E0B4; --e-alerta-s: #3A1717; --e-alerta-b: #772A2A; --e-alerta-f: #FCA5A5; --e-decurso-s:#241A3D; --e-decurso-b:#4A3179; --e-decurso-f:#C4B0FD; --e-site-s: #3A1F0B; --e-site-b: #7A4712; --e-site-f: #FBBC85; --e-aguar-sobre: #1B1B19; --e-ok-sobre: #020806; --e-site-sobre: #3A1E02; --e-sobre-claro: #FFFFFF; --ct-info: var(--e-novo-f); --ct-info-suave: var(--e-novo-s); --ct-info-linha: var(--e-novo-b); --ct-ok: var(--e-ok-f); --ct-ok-suave: var(--e-ok-s); --ct-ok-linha: var(--e-ok-b); --ct-atencao: var(--ct-dourado); --ct-atencao-suave: var(--ct-dourado-suave); --ct-atencao-linha:var(--ct-dourado-linha); --ct-alerta: var(--e-alerta-f); --ct-alerta-suave: var(--e-alerta-s); --ct-alerta-linha: var(--e-alerta-b); --ct-alerta-sobre: #2C1815; --ct-anel: #F5C462; /* BOTAO NO ESCURO (1.8) — copia fiel do bloco de cima, como o cabecalho da secao 2 manda. So o principal inverte; o motivo esta escrito la. */ --b-preto: #F0F0EA; --b-preto-2: #C8C8C0; --b-preto-letra: #1B1B19; --b-halo-preto: rgba(0, 0, 0, .55); --b-lustro: rgba(0, 0, 0, .18); /* As duas de serie no escuro (1.9) — copia fiel do bloco de cima, como o cabecalho da secao 2 manda. O motivo do reescalonamento esta escrito la. */ --serie-gerados: #A87B1E; --serie-fechados: #5093DD; /* 1.10 — A PALETA DO ORCAMENTO NO ESCURO (09/08/2026), copia fiel do bloco de cima, como o cabecalho da secao 2 manda. O motivo de o escuro nao ser o claro escurecido, e o de as cores de marca e os degrades ficarem de fora, estao escritos la — e na 1.10 do bloco claro. */ --o-sup: #171A21; --o-sup-2: #1B1F28; --o-tinta: #E7E9EF; --o-tinta-2: #A9B0BE; --o-tinta-3: #8B93A3; --o-linha: #2B303B; --o-linha-forte: #6B7383; --o-azul-f: #A8C5FD; --o-azul-b: #26385C; --o-azul-s1: #12192B; --o-azul-s2: #16233C; --o-roxo-f: #CBB4FD; --o-roxo-b: #3A2C63; --o-roxo-s1: #1A1530; --o-roxo-s2: #211A3B; --o-ciano-f: #7DDDEF; --o-ciano-b: #1B4451; --o-ciano-s1: #0B1E26; --o-ciano-s2: #0E2730; --o-verde-f: #7EE7B5; --o-verde-b: #17503C; --o-verde-s1: #0B2019; --o-verde-s2: #0E2820; --o-pend-t: #FBCF7A; --o-pend-f: #33260C; --o-pend-b: #6B5115; --o-venc-t: #FCA5A5; --o-venc-f: #391616; --o-venc-b: #7A2C2C; --o-paga-t: #6EE7B7; --o-paga-f: #0D2A22; --o-paga-b: #1A5943; /* A sombra do pe no escuro — copia fiel do bloco de cima. O motivo do sinal negativo esta no bloco claro, na 1.10. */ --o-som-pe: 0 -10px 28px -10px rgba(0, 0, 0, .70), 0 -1px 0 var(--o-linha); --ct-sombra-1: 0 1px 2px rgba(0, 0, 0, .40); --ct-sombra-2: 0 2px 4px rgba(0, 0, 0, .45), 0 8px 20px -10px rgba(0, 0, 0, .60); --ct-sombra-3: 0 12px 32px -8px rgba(0, 0, 0, .70), 0 2px 6px rgba(0, 0, 0, .50); /* A sombra do pé no escuro — cópia fiel do bloco de cima, como o cabeçalho da seção 2 manda. O motivo do sinal negativo está no bloco claro, na 1.7. */ --ct-sombra-pe: 0 -10px 28px -10px rgba(0, 0, 0, .70), 0 -1px 0 var(--ct-linha); --ct-borda-elevada: #32322C; } /* =========================================================================== 3. ESCOPO INVERTIDO --------------------------------------------------------------------------- Tudo que vive dentro da barra preta (ou de qualquer bloco preto) redefine os tokens de tinta, linha e ANEL. Nenhum componente precisa saber que esta na barra: ele continua escrito contra var(--ct-tinta) e var(--ct-anel). Isto resolve o achado mais caro da auditoria: o anel de foco azul dava 2,37:1 sobre a barra preta, que e onde mora TODA a navegacao do sistema. A .ct-barra SAIU DAQUI EM 08/08/2026, e esta e a linha mais importante deste bloco. O cabecalho passou a ter fundo CLARO (ver componentes.css secao 1.1). Enquanto ele estivesse nesta lista, `background: var(--ct-superficie)` continuaria resolvendo para --ct-inverso e a barra continuaria PRETA — sem erro, sem aviso, e com a folha nova parecendo que nao pegou. Quem for reescrever a casca de novo: trocar a cor da barra em componentes.css nao basta, este seletor manda mais. O bloco continua vivo e continua correto para QUALQUER bloco preto — e por isso ele nao foi apagado junto. Quem escrever uma faixa escura nova veste .ct-inv e ganha tinta, linha, anel e os seis tons de estado ja medidos. =========================================================================== */ .ct-inv { --ct-superficie: var(--ct-inverso); /* `--ct-plano` ENTROU EM 09/08/2026, e entrou por um defeito real: o campo "Filtrar painéis" da lateral do portal pedia papel, o escopo não redefinia papel, e ele ficava CLARO dentro de um bloco preto — com a letra já invertida por cima. Medido: 1,04:1, texto invisível. Bloco escuro que pede "o fundo da aplicação" quer o fundo escuro da aplicação, sempre. */ --ct-plano: var(--ct-inverso); --ct-rebaixo: var(--ct-inverso-2); --ct-elevado: var(--ct-inverso-2); --ct-tinta: var(--ct-tinta-inv); --ct-tinta-2: var(--ct-tinta-inv-2); --ct-tinta-3: var(--ct-tinta-inv-3); --ct-linha: var(--ct-inverso-3); --ct-linha-suave:var(--ct-inverso-3); --ct-linha-forte:#6A6A61; /* 3,38:1 sobre o preto */ --ct-anel: var(--ct-amarelo); /* 11,38:1 sobre o preto */ /* OS TONS DE TEXTO DE ESTADO TAMBEM ENTRAM (08/08/2026, passo 3). Faltavam, e o buraco so aparece quando alguem escreve uma etiqueta de estado DENTRO da barra — foi o que a tela de Consultas do site fez. A barra e PRETA NOS DOIS TEMAS, porque ela e identidade e nao "escuro". Mas o `-f` das seis familias segue o TEMA DA PAGINA, e no tema claro ele e o tom fechado, feito para papel branco. Medidos sobre o preto da barra, os seis do tema claro dao de 1,07 a 3,16 — todos reprovam, e o pior deles e o "aguardando", que no claro e a propria tinta preta. Aqui valem os tons CLAROS de cada familia (os mesmos que o tema escuro usa), que sobre a barra dao de 9,64 a 14,41. Sao hex porque este e o arquivo que pode escreve-los, e porque nao existe token que ja carregue "o tom da familia para fundo escuro" independente do tema da pagina. */ --e-novo-f: #9DBCFC; /* 9,69:1 sobre o preto */ --e-aguar-f: #E4E4DA; /* 14,41:1 */ --e-ok-f: #63E0B4; /* 11,29:1 */ --e-alerta-f: #FCA5A5; /* 9,72:1 */ --e-decurso-f: #C4B0FD; /* 9,64:1 */ --e-site-f: #FBBC85; /* 11,10:1 */ color: var(--ct-tinta); } /* =========================================================================== 4. TIPOGRAFIA --------------------------------------------------------------------------- Duas vozes, e a separacao entre elas e a decisao tipografica mais forte da casa: Instrument Sans = texto que se le. IBM Plex Mono = identificador que se confere caractere a caractere: placa, CPF, CNH, protocolo, RENAVAM, telefone, valor, chave PIX, codigo do parceiro, codigo do afiliado. PESO: a fonte servida so tem 400, 500 e 600. Nao existe 700 nesta casa. As 45 declaracoes de peso 700 a 1000 do sistema atual sao negrito FALSO, engordado pelo navegador a partir do 600, borrado e diferente em cada sistema operacional. O teto e 600 e nao ha excecao, nem para a placa. =========================================================================== */ :root { --ct-fonte: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --ct-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Escala. Sete degraus, e nenhum a mais. */ --ct-fs-titulo: 24px; /* titulo de pagina */ --ct-fs-secao: 19px; /* titulo de secao e de modal */ --ct-fs-card: 17px; /* titulo de card */ --ct-fs-campo: 16px; /* TODO input, select e textarea. Abaixo disso o Safari do iPhone amplia a tela sozinho e nao desamplia. Nao e opcional. */ --ct-fs-corpo: 15px; /* texto de leitura */ --ct-fs-meta: 13px; /* metadado, apoio, texto de tabela densa */ --ct-fs-rotulo: 11px; /* rotulo em mono, caixa alta */ /* Identificador e numero */ --ct-fs-codigo: 14px; /* placa no texto, CPF, protocolo */ --ct-fs-numero: 26px; /* valor grande de indicador. Era 19, 23, 26 e 30 em quatro reinvencoes do mesmo bloco. */ /* Peso */ --ct-peso-normal: 400; --ct-peso-medio: 500; --ct-peso-forte: 600; /* Altura de linha */ --ct-lh-apertada: 1.2; /* titulo, numero grande */ --ct-lh-padrao: 1.5; /* corpo */ --ct-lh-solta: 1.65; /* texto longo, politica, e-mail */ /* Espacamento entre letras */ --ct-ls-titulo: -.02em; --ct-ls-card: -.01em; --ct-ls-rotulo: .1em; /* mono em caixa alta precisa de ar */ --ct-ls-placa: .1em; /* Medida de linha para texto corrido */ --ct-medida: 62ch; } /* =========================================================================== 5. ESPACO --------------------------------------------------------------------------- Base 4. Esta escala e o motivo real de cinco paginas ainda carregarem a ct-ui.css inteira: era o unico lugar do sistema que tinha uma. =========================================================================== */ :root { --ct-sp-0: 2px; --ct-sp-1: 4px; --ct-sp-2: 8px; --ct-sp-3: 12px; --ct-sp-4: 16px; --ct-sp-5: 20px; --ct-sp-6: 24px; --ct-sp-7: 32px; --ct-sp-8: 40px; --ct-sp-9: 56px; --ct-sp-10:72px; /* Ritmo de componente */ --ct-pad-card: 18px; /* respiro interno do card */ --ct-pad-secao: 24px; /* respiro de bloco de pagina */ --ct-gap: 12px; /* entre itens de lista */ --ct-gap-grade: 16px; /* entre colunas da grade de 12 */ /* Alvo de toque. 44px e o minimo, e nao e negociavel: hoje os controles que a equipe mais aperta (revelar CPF, salvar, mover de fila) tem entre 13 e 29px. O desenho pode continuar baixo; a AREA e que sobe, por pseudo-elemento. */ --ct-alvo: 44px; --ct-alvo-denso: 36px; /* so em tabela com muitas linhas, no desktop */ } /* =========================================================================== 6. FORMA =========================================================================== */ :root { --ct-r-xs: 4px; /* etiqueta minima, marca-texto */ --ct-r-sm: 7px; /* botao, campo, chip quadrado */ --ct-r-md: 10px; /* card, aviso, bloco */ --ct-r-lg: 14px; /* modal, gaveta, popover */ --ct-r-pill:999px; /* etiqueta de estado, chip de filtro, avatar */ --ct-trilho: 4px; /* largura do trilho de estado do card (era 3px) */ --ct-borda: 1px; } /* =========================================================================== 7. MOVIMENTO --------------------------------------------------------------------------- Duracao por INTENCAO, nao por gosto. Quem escreve o componente escolhe o nome, nao o numero. =========================================================================== */ :root { --ct-t-instante: 80ms; /* realce de hover, troca de cor */ --ct-t-rapido: 120ms; /* botao, chip, aba */ --ct-t-padrao: 180ms; /* card, popover, tooltip */ --ct-t-lento: 260ms; /* gaveta, menu recolhendo, modal */ --ct-t-entrada: 320ms; /* item entrando na lista, notificacao efemera */ --ct-mov: cubic-bezier(.2, 0, .2, 1); /* padrao */ --ct-mov-entra: cubic-bezier(0, 0, .2, 1); /* algo aparecendo */ --ct-mov-sai: cubic-bezier(.4, 0, 1, 1); /* algo sumindo */ --ct-mov-mola: cubic-bezier(.22, .61, .36, 1); /* gaveta, rail */ } /* =========================================================================== 8. CAMADA (z-index) --------------------------------------------------------------------------- Nomeada. Numero solto em CSS de pagina e como o sistema chega a ter um modal atras do cabecalho. ESTA ESCALA MENTIA, e foi corrigida em 06/08/2026 (decisao da dona: "fazer a escala dizer a verdade"). O `--ct-z-efemero` dizia "acima de tudo" e vale 80 - so que QUATRO coisas do proprio sistema moram acima dele, e sempre moraram. O sintoma disso e pequeno e silencioso: a notificacao efemera (o "salvo", o "copiado") aparece ATRAS da gaveta do card ou do painel da lixeira quando um deles esta aberto. Ninguem reporta - fica so a impressao de que "as vezes nao aparece". NENHUM NUMERO MUDOU aqui. O que entrou foram os degraus que faltavam, com os valores que ja existem nos arquivos, para o mapa descrever o territorio. Escala que mente e pior que escala nenhuma: o proximo confia nela. POR QUE OS ARQUIVOS CONTINUAM COM O NUMERO CRAVADO: `lixeira.css`, `card-gaveta.css` e `embutido.css` viajam para paginas que nem sempre carregam ESTE arquivo. Trocar o numero por `var(--ct-z-...)` la faria a camada sumir (var vazia = z-index automatico) exatamente onde o token nao chega. Quem for unificar isso um dia: confira primeiro quem carrega o que. =========================================================================== */ :root { --ct-z-base: 0; --ct-z-elevado: 10; /* card em hover, dropdown de campo */ --ct-z-rail: 30; --ct-z-barra: 40; /* barra preta sticky */ --ct-z-veu: 50; --ct-z-modal: 60; --ct-z-gaveta: 60; --ct-z-tooltip: 70; --ct-z-efemero: 80; /* notificacao efemera - acima do conteudo, e NAO acima dos tres degraus abaixo */ /* Os tres que ja existiam e nao estavam no mapa. O valor e o TETO de cada um: a lixeira tambem tem um botao flutuante em 55, e a gaveta empilha 120 (card), 130 (veu) e 140 (painel do DETRAN) por dentro. */ --ct-z-lixeira: 130; /* painel de restaurar (ds/lixeira.css) */ --ct-z-gaveta-card: 140; /* gaveta do card e o painel dentro dela */ --ct-z-embutido: 99999; /* o quadro do portal (ds/embutido.css) */ } /* =========================================================================== 9. PONTOS DE QUEBRA --------------------------------------------------------------------------- Quatro faixas nomeadas, tres media queries. O sistema atual usa 14 pontos diferentes sem logica comum (480, 520, 560, 620, 640, 720, 760, 860, 900, 920, 980, 1020, 1060 e 1180), o que obriga a testar cada tela em 14 larguras. Aqui so existem estes: COMPACTO ate 599px celular em pe MEDIO 600 a 899 celular deitado, tablet em pe, janela dividida AMPLO 900 a 1279 notebook EXTENSO 1280 ou mais monitor de mesa Custom property nao funciona dentro de @media, entao os numeros aparecem literais na regra. A lista canonica e esta, e o unico lugar onde ela pode ser consultada. Nenhuma pagina inventa ponto novo. =========================================================================== */ :root { --ct-bp-medio: 600px; --ct-bp-amplo: 900px; --ct-bp-extenso: 1280px; --ct-largura-max: 1440px; /* teto do conteudo em monitor grande */ --ct-largura-leitura: 760px; } /* =========================================================================== 10. BASE =========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--ct-plano); color: var(--ct-tinta); font-family: var(--ct-fonte); font-size: var(--ct-fs-corpo); font-weight: var(--ct-peso-normal); line-height: var(--ct-lh-padrao); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* A UNICA regra de display com !important do sistema inteiro. Ela existe para PROTEGER o esconder, nunca para furar. Historico: um redesign anterior tinha 42 regras de display com !important que reacendiam elemento escondido por permissao. Botao escondido para um cargo voltava a aparecer. Nunca mais. */ [hidden] { display: none !important; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--ct-peso-forte); line-height: var(--ct-lh-apertada); } h1 { font-size: var(--ct-fs-titulo); letter-spacing: var(--ct-ls-titulo); } h2 { font-size: var(--ct-fs-secao); letter-spacing: var(--ct-ls-card); } h3 { font-size: var(--ct-fs-card); letter-spacing: var(--ct-ls-card); } h4, h5, h6 { font-size: var(--ct-fs-corpo); } p { margin: 0; } a { color: var(--ct-info); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } /* Foco visivel, um so, com par claro e escuro, e redefinido por contexto na secao 3. O offset garante que a razao medida seja contra a superficie atras do componente, nunca contra o preenchimento dele: e por isso que o anel funciona ate sobre um botao lime. */ :focus-visible { outline: var(--ct-anel-largura) solid var(--ct-anel); outline-offset: var(--ct-anel-fora); border-radius: var(--ct-r-xs); } /* Elemento que ja tem raio proprio mantem o dele. */ .ct-btn:focus-visible, .ct-campo:focus-visible, .ct-chip:focus-visible { border-radius: inherit; } ::selection { background: var(--ct-lime); color: var(--ct-lime-sobre); } /* Todo numero que se compara em coluna usa largura fixa de digito. */ .ct-num, table td, table th, .ct-mono { font-variant-numeric: tabular-nums; } /* =========================================================================== 11. UTILITARIOS MINIMOS Sao utilitarios, nao componentes. A lista e curta de proposito. =========================================================================== */ .ct-mono { font-family: var(--ct-mono); font-variant-numeric: tabular-nums; } .ct-codigo { font-family: var(--ct-mono); font-size: var(--ct-fs-codigo); letter-spacing: -.01em; color: var(--ct-tinta); font-variant-numeric: tabular-nums; } .ct-meta { font-size: var(--ct-fs-meta); color: var(--ct-tinta-3); } .ct-medida { max-width: var(--ct-medida); } /* Rotulo do sistema. Foi reescrito a mao mais de trinta vezes nas paginas atuais, com tres tamanhos e tres letter-spacings diferentes. Existe um so. */ .ct-rotulo { display: block; font-family: var(--ct-mono); font-size: var(--ct-fs-rotulo); font-weight: var(--ct-peso-medio); letter-spacing: var(--ct-ls-rotulo); text-transform: uppercase; color: var(--ct-tinta-3); margin-bottom: var(--ct-sp-1); } /* Conteudo so para leitor de tela. Hoje o sistema tem zero uso disto, o que significa que nenhuma tela tem rotulo exclusivo para leitor de tela. */ .ct-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Pular para o conteudo: primeiro foco de toda pagina. */ .ct-pular { position: absolute; left: var(--ct-sp-2); top: -60px; z-index: var(--ct-z-efemero); background: var(--ct-superficie); color: var(--ct-tinta); border: 1px solid var(--ct-linha-forte); border-radius: var(--ct-r-sm); padding: var(--ct-sp-2) var(--ct-sp-4); transition: top var(--ct-t-rapido) var(--ct-mov); } .ct-pular:focus { top: var(--ct-sp-2); } /* Area de toque de 44px sem engordar o desenho. Aplique em qualquer controle pequeno: o pseudo-elemento cresce, o botao continua do tamanho que e. */ .ct-alvo-min { position: relative; } .ct-alvo-min::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; min-width: var(--ct-alvo); min-height: var(--ct-alvo); } /* =========================================================================== 12. MOVIMENTO REDUZIDO --------------------------------------------------------------------------- A forma agressiva (animation: none) mata o indicador de carregamento junto: quem pede menos movimento passa a ver um anel congelado e nao sabe se o sistema esta trabalhando ou travou. Reduzir movimento nao pode significar remover feedback. Regra: tudo cai para .01ms, MENOS o que estiver marcado com [data-movimento="essencial"], que continua girando, so que mais devagar e sem deslocamento espacial. =========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } [data-movimento="essencial"], [data-movimento="essencial"]::before, [data-movimento="essencial"]::after { animation-duration: 1.6s !important; /* devagar, mas VIVO */ animation-iteration-count: infinite !important; transition-duration: var(--ct-t-padrao) !important; } } /* =========================================================================== 13. IMPRESSAO Contrato, procuracao e relatorio saem daqui em papel. Vale a pena. =========================================================================== */ @media print { :root { --ct-plano: #fff; --ct-superficie: #fff; --ct-tinta: #000; } .ct-barra, .ct-rail, .ct-efemero, .ct-tooltip, [data-nao-imprime] { display: none !important; } .ct-card { break-inside: avoid; box-shadow: none; border: 1px solid #999; } }