/* =========================================================================== A PALETA — o único lugar deste arquivo onde cor hexadecimal pode aparecer. São QUATRO temas (decisão do usuário, 2026-08-06): claro institucional, papel, escuro e escuro de alto contraste. Cada um define o MESMO conjunto de variáveis; nenhuma regra de layout muda entre eles. Trocar de tema é trocar valor de variável, e é só por isso que quatro temas são sustentáveis. O tema mora no atributo `data-tema` do (antes era a classe `escuro`, que só sabia dizer ligado/desligado). Sem atributo = claro institucional. REGRA: fora deste bloco, cor vem de `var(--…)`. `tests/teste_visual.py` reprova quem cravar hexadecimal numa regra. As exceções são poucas, estão marcadas no próprio arquivo e listadas lá. NOMES HISTÓRICOS: `--azul`, `--azul-claro`, `--azul-fraco` e `--realce` são usados por ~30 templates. Renomeá-los agora seria mexer em arquivo de outras frentes e colher conflito de merge sem ganho. Então eles viraram APELIDOS de `--acao*`: código novo usa `--acao`, código antigo continua funcionando, e a migração pode acontecer depois, tela por tela. No tema papel `--azul` guarda um verde — o nome mente, o apelido é a dívida assumida, e está dito aqui. =========================================================================== */ /* ---------- 1. CLARO INSTITUCIONAL (o de sempre; é o padrão) ---------- */ :root { --fundo: #eef2f7; /* fundo geral, cinza-azulado bem claro */ --painel: #ffffff; /* cartões, barra lateral, topo */ --painel-2: #f1f5fa; /* realce sutil (linhas, campos) */ --texto: #1f2a37; /* texto principal, azul-ardósia escuro */ --texto-suave: #5f6b7a; /* texto secundário */ --acao: #0d5aa7; /* cor primária de ação — azul institucional PGE/MS */ --acao-hover: #1671c6; /* hover e cor de link — o valor histórico, intocado */ --acao-fraco: #e7f0fa; /* fundo de item ativo/hover na lateral */ /* Texto SOBRE esse realce fraco. Papel distinto do de `--acao`, que é pensada para fundo claro: no tema escuro o azul de ação media 4,25:1 sobre o próprio realce e reprovava. Nos outros três o valor coincide com `--acao` — a variável existe porque UM tema precisa divergir. */ --acao-ativo: #0d5aa7; --acao-texto: #ffffff; /* o que se lê DENTRO do botão primário */ --verde: #178a54; /* verde institucional MS */ --ok: #178a54; --erro: #c23b3b; --alerta: #b7791f; --sobre-ok: #ffffff; /* texto sobre um fundo --ok sólido (o aviso flutuante) */ /* Pastéis semânticos. Existem como PAR (fundo + texto) porque é o par que garante o contraste: quem mexer num precisa refazer a conta do outro. Um trio só serve às etiquetas, aos avisos e ao banner de férias — antes eram as mesmas cores repetidas em quatro lugares da folha. */ --ok-bg: #e9f6ef; --ok-tx: #0f6b40; --erro-bg: #fbecec; --erro-tx: #a02d2d; --alerta-bg: #fdf3e3; --alerta-tx: #8a5a12; /* Um QUARTO par, laranja, para a etiqueta de "recurso pendente" da Guia (2026-08-07). Existe porque o amarelo do alerta já é a etiqueta de "repercussão reconhecida", e as duas aparecem lado a lado no mesmo item: sem um tom próprio, o leitor veria duas etiquetas iguais dizendo coisas diferentes. */ --pendente-bg: #fdeadb; --pendente-tx: #8a4b12; /* DUAS bordas, e a diferença é normativa, não estética: a borda de um campo é "informação necessária para identificar um componente de interface" e a norma pede 3:1 para ela; um filete que só separa linhas de tabela é decorativo e isento. Enquanto houve uma variável só, o campo ficou com a cor do filete e mediu 1,30:1 — invisível. */ --borda: #dbe3ec; /* CONTORNO do bloco: cartão, moldura */ /* O filete que separa LINHA de tabela dentro de um bloco. Papel diferente do contorno: são dezenas deles numa tela, e é a soma que pesa. Nos três temas claros coincide com `--borda`; no alto contraste precisa ser bem mais calmo (direção do usuário: "menos contraste dentro dos cartões"). */ --filete-linha: #dbe3ec; --borda-campo: #74849b; /* onde se digita: 3,81:1 sobre o painel, 3,39 sobre o fundo */ /* Superfície dos blocos DENSOS dentro de um cartão — o dia do calendário é o caso: dezenas de quadradinhos lado a lado. Nos temas claros ela é a mesma do cartão (o ladrilho se distingue pela borda e pelo vão); no alto contraste ela precisa ser OUTRA, porque ali nada se distingue por tom. */ --ladrilho: #ffffff; --switch-thumb: #ffffff; /* a bolinha do interruptor */ --edicao-bg: #fffbe9; /* realce do modo de edição de textos e da célula da Equipe */ --balao-bg: #fdf3e3; /* balão de aviso do Início */ --balao-borda: #f0dcae; --fds-dia: #e8edf3; /* dia de fim de semana no calendário da chefia/equipe */ --fds-faixa: #f4f7fb; /* a faixa de fundo do mesmo fim de semana */ --reservada-bg: #fbf7ee; /* linha de conta reservada, em Usuários */ --pisca-bg: #ffe6b0; /* item "Mural" piscando com publicação sem ciência */ --pisca-tx: #8a5a12; --opacidade-herdada: .8; /* permissão que vem da categoria do cargo */ --filete-a: #0d5aa7; /* a faixa no topo da barra lateral */ --filete-b: #178a54; /* FORMA por tema (direção do usuário, 2026-08-06): a serifa no título, a faixa no cartão e o botão de canto reto valem SÓ no papel e no alto contraste. O claro institucional e o escuro voltaram à forma original. É a primeira vez que os temas divergem em algo que não é cor — o custo disso está dito no PLANO-visual.md, seção 12. */ /* `0px`, e não `0`: desde 2026-08-08 a folga do topo do cartão é `calc(--card-pad + --faixa-cartao)`, e somar um número SEM unidade a um comprimento é inválido em CSS — a declaração inteira cai e o cartão fica com folga zero. Foi o que aconteceu, e foi visto na medição. Como tamanho de fundo (o outro uso desta variável) `0` e `0px` são a mesma coisa. */ --faixa-cartao: 0px; /* ÍCONES: aqui a tela mostra o CARACTERE de sempre (emoji). Os ícones de traço valem só no papel e no alto contraste — direção do usuário, 2026-08-06, e é a mesma regra que já governa a serifa do título, a faixa do cartão e o botão de canto reto. A página traz as duas formas; estas variáveis escolhem. */ --ico-orig: inline; --ico-traco: none; --ico-tam: 17px; --ico-larg: 20px; --marca-tam: 22px; --ico-btn: 17px; --botao-raio: var(--raio); --botao-sec-bg: #ffffff; --raio: 10px; --lateral-larg: 240px; --lateral-larg-recolhida: 62px; --sombra: 0 1px 3px rgba(16, 42, 67, .06), 0 1px 2px rgba(16, 42, 67, .04); /* diz ao navegador em que tom desenhar os controles NATIVOS (caixa de seleção, barra de rolagem, seletor de data) — sem isto eles ficariam brancos no meio da tela escura, e nenhuma folha de estilo os alcança */ color-scheme: light; } /* Apelidos dos nomes históricos. Ficam FORA do bloco de tema, apontando para as variáveis novas, então valem nos quatro temas sem repetição. */ :root { --azul: var(--acao); --azul-claro: var(--acao-hover); --azul-fraco: var(--acao-fraco); --realce: var(--acao); --realce-2: var(--acao-hover); /* Texto sobre uma cor VIVA vinda do dado, não do tema: o pino da agenda e a barra do calendário recebem a cor da categoria por atributo `style`. Branco é a leitura certa sobre qualquer uma delas, nos quatro temas — então este é o único valor que não varia por tema. */ --sobre-vivido: #ffffff; /* ESCOLHA B do usuário (2026-08-06): serifa no título, sans no corpo. A serifa entra onde há poucas palavras e nenhum número para conferir; o corpo, a tabela e o prazo seguem em sans, que é o que se lê melhor em tela densa. Fontes já instaladas no Windows — nada baixado de fora, o que manteria o site dependente de servidor de terceiros e quebraria offline. Igual nos quatro temas: tipografia é identidade, não tema. */ --fonte-titulo: inherit; /* claro e escuro: título na fonte do corpo */ } /* A CAIXA do ícone — quanto ele OCUPA — separada do DESENHO, que é quanto ele mede (2026-08-09, direção do usuário: *"os modos papel e alto contraste não alteram o espaçamento entre ícones; o espaçamento adequado é o dos modos claro e escuro"*). O que estava acontecendo, medido na tela antes da correção: a altura da caixa do ícone era a sua própria altura de linha (tamanho × `--esc-linha`), e era ela — e não o rótulo, que mede menos — quem mandava na altura da linha do menu. Como o papel e o alto contraste desenham o ícone MAIOR de propósito (21px de traço contra 17px de emoji, decisão de 2026-08-06: desenho vazado pesa menos que mancha cheia), cada item do menu crescia 5,6px e o menu inteiro ficava 89,5px mais alto do que no claro. O tema mudava o ESPAÇAMENTO, que não é assunto dele. A separação resolve os dois pedidos de uma vez: o ícone continua sendo desenhado maior nos temas autorais (`--ico-tam`, `--marca-tam`, que seguem sendo do tema), e a caixa que ele ocupa passa a ser a mesma nos quatro (`--ico-caixa`, `--marca-caixa`) — a do claro e do escuro, que é a aprovada. Cabe com folga: em `conforto` a caixa dá 26,35px e o traço maior mede 21px. ⚠️ Estas duas NÃO podem ser redefinidas dentro de um bloco de tema — é exatamente isso que reintroduziria o defeito. Não é pedido de atenção: o `teste_eixos_ortogonais` já reprova variável de tamanho em bloco de tema fora da lista de cruzamentos, e elas ficam de fora dessa lista de propósito. Multiplicam por `--esc-ico` porque a ESCALA continua podendo encolher tudo na mesma proporção — é o outro eixo, e esse sim mexe em tamanho. */ :root { --ico-caixa: 17px; /* a caixa do ícone do menu = a do claro/escuro */ --marca-caixa: 22px; /* a caixa do ícone da marca = a do claro/escuro */ } /* ---------- 2. PAPEL — escritório clássico, página de livro antigo ---------- Os tons saíram de MEDIÇÃO das fotos do gabinete (static/imagens/): a cor dominante delas é mogno escuro, que daria um tema escuro; o que serve é a faixa CLARA — papel de livro, latão, o âmbar do pôr do sol. O verde é o das plantas de `fundo-mesa.jpg`. A restrição do usuário rege este tema: *"a página não deve ficar muito pesada visualmente; evitar aspecto retrógrado; é clássico chique"*. Em regra: madeira e latão entram como TRAÇO (filete, borda), nunca como massa — nenhum painel tingido, nenhum gradiente marrom de fundo, nenhuma textura. O que domina a tela é o papel claro e o espaço vazio. Aqui `--acao` guarda um verde, e o apelido `--azul` aponta para ele. Ver a nota sobre nomes históricos no topo do arquivo. */ :root[data-tema="papel"] { color-scheme: light; --fundo: #ece3d2; --painel: #faf5e9; --painel-2: #f3ebd9; --texto: #2b2118; --texto-suave: #5c4b3a; --acao: #2f6b3d; --acao-hover: #255630; /* no tema claro o realce ESCURECE: clarear mede 4,03 e reprova */ --acao-fraco: #e6eee2; --acao-ativo: #2f6b3d; --acao-texto: #ffffff; --verde: #2f6b3d; --ok: #2f6b3d; --erro: #9c3328; --alerta: #7d5f10; --sobre-ok: #ffffff; --ok-bg: #e6efe3; --ok-tx: #245530; --erro-bg: #f7e6e2; --erro-tx: #8a2c22; --alerta-bg: #f6edd7; --alerta-tx: #6b5210; --pendente-bg: #f3e2d0; --pendente-tx: #7a4413; --borda: #ded2b8; /* filete pálido: é o que deixa a tela leve */ --filete-linha: #ded2b8; --borda-campo: #8f7a5c; /* 3,78:1 sobre a página — o piso da norma */ --faixa-cartao: 2px; /* ÍCONES DE TRAÇO — só neste tema e no outro autoral. MAIORES que o caractere que substituem (21 contra 17): desenho vazado pesa menos que mancha colorida cheia, então o mesmo tamanho parece menor. O encaixe alarga junto, senão o ícone encosta no rótulo. */ --ico-orig: none; --ico-traco: inline-flex; --ico-tam: 21px; --ico-larg: 26px; --marca-tam: 27px; --ico-btn: 20px; --botao-raio: 2px; --botao-sec-bg: #faf5e9; --fonte-titulo: Cambria, Georgia, "Times New Roman", serif; --ladrilho: #faf5e9; --switch-thumb: #faf5e9; --edicao-bg: #f6edd7; --balao-bg: #f6edd7; --balao-borda: #e0cfa4; --fds-dia: #ece3d2; --fds-faixa: #f3ebd9; --reservada-bg: #f6edd7; --pisca-bg: #f6edd7; --pisca-tx: #6b5210; --opacidade-herdada: .8; --filete-a: #6b4423; /* madeira → latão, onde no claro é azul → verde */ --filete-b: #8a6b12; --sombra: 0 1px 3px rgba(80, 56, 32, .10), 0 1px 2px rgba(80, 56, 32, .07); } /* ---------- 3. ESCURO (o de sempre) ---------- Sobre os azuis: `--acao` é usado das duas formas — como FUNDO de botão com texto por cima e como COR DE TEXTO sobre o painel. No claro isso convive; no escuro, um azul escuro o bastante para o texto branco some contra o fundo. A saída foi um azul médio (bom como texto sobre o painel escuro) e texto ESCURO dentro do botão primário (`--acao-texto`). */ :root[data-tema="escuro"] { color-scheme: dark; --fundo: #10161e; --painel: #1a2330; --painel-2: #232f3f; --texto: #e7edf4; --texto-suave: #a7b4c4; --acao: #4a90d9; --acao-hover: #6fb0ec; --acao-fraco: #1c2c3d; --acao-ativo: #6fb0ec; /* 6,16:1 — o azul de ação daria 4,25 */ --acao-texto: #08121c; --verde: #2f9e70; --ok: #46b98a; --erro: #e07a7a; --alerta: #d9a441; /* texto ESCURO sobre o verde claro do aviso flutuante. Antes era branco cravado, o que dava contraste ruim: --ok no escuro é um verde claro. */ --sobre-ok: #08121c; --ok-bg: #123024; --ok-tx: #a8e6c8; --erro-bg: #3a1d1d; --erro-tx: #f0b4b4; --alerta-bg: #3a2f16; --alerta-tx: #f0d59a; --pendente-bg: #3a2412; --pendente-tx: #f0b47a; --borda: #2b3949; --filete-linha: #2b3949; --borda-campo: #67788d; /* 3,50:1 sobre o painel; o filete sozinho dava 1,34 */ /* `0px`, e não `0`: desde 2026-08-08 a folga do topo do cartão é `calc(--card-pad + --faixa-cartao)`, e somar um número SEM unidade a um comprimento é inválido em CSS — a declaração inteira cai e o cartão fica com folga zero. Foi o que aconteceu, e foi visto na medição. Como tamanho de fundo (o outro uso desta variável) `0` e `0px` são a mesma coisa. */ --faixa-cartao: 0px; /* ÍCONES: aqui a tela mostra o CARACTERE de sempre (emoji). Os ícones de traço valem só no papel e no alto contraste — direção do usuário, 2026-08-06, e é a mesma regra que já governa a serifa do título, a faixa do cartão e o botão de canto reto. A página traz as duas formas; estas variáveis escolhem. */ --ico-orig: inline; --ico-traco: none; --ico-tam: 17px; --ico-larg: 20px; --marca-tam: 22px; --ico-btn: 17px; --botao-raio: var(--raio); --botao-sec-bg: #232f3f; --ladrilho: #1a2330; --switch-thumb: #e7edf4; --edicao-bg: #2e2a18; --balao-bg: #2e2716; --balao-borda: #4a3f1e; --fds-dia: #232f3f; --fds-faixa: #16202c; --reservada-bg: #2a2519; --pisca-bg: #3a2f16; --pisca-tx: #f0d59a; --opacidade-herdada: .95; /* .8 some no fundo escuro */ --filete-a: #4a90d9; --filete-b: #2f9e70; --sombra: 0 1px 3px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .4); } /* ---------- 4. ESCURO DE ALTO CONTRASTE ---------- Alvo AAA (7:1), não AA. E a diferença para o escuro comum NÃO é letra mais clara: medido, o escuro comum já dá 13,4:1 no texto, que é AAA. O que falta nele é o resto — as superfícies se distinguem por TOM, e tom é justamente o que menos se enxerga com baixa visão. Então aqui: borda visível em tudo, nenhuma transparência, nenhuma sombra, e nada de texto apagado (`--opacidade-herdada: 1`, porque apagar texto é o oposto do que este tema existe para fazer). */ :root[data-tema="alto"] { color-scheme: dark; --fundo: #000000; --painel: #141414; /* era #0d0d0d: contra o preto o cartão sumia */ --painel-2: #2e2e2e; /* era #1c1c1c: agora o realce interno se enxerga */ /* Branco PURO sobre quase-preto brilha (halação) e cansa em area grande — direção do usuário: o ajuste do ladrilho bastou nos quadradinhos de férias, mas o cartão grande continuava duro. #dedede mede 13,69:1 no cartão: continua AAA com folga (que pede 7), e a glare sai. "Alto contraste" é cumprir AAA e delimitar bem, não maximizar cada par. */ --texto: #dedede; --texto-suave: #c4c4c4; --acao: #6ee7a0; --acao-hover: #9df3c0; --acao-fraco: #2e2e2e; --acao-ativo: #6ee7a0; --acao-texto: #000000; --verde: #6ee7a0; --ok: #6ee7a0; --erro: #ff9e9e; --alerta: #f0cf6a; --sobre-ok: #000000; /* sem pastel: o fundo continua preto e a cor fica na letra e na borda — pastel é contraste baixo por definição */ --ok-bg: #000000; --ok-tx: #6ee7a0; --erro-bg: #000000; --erro-tx: #ff9e9e; --alerta-bg: #000000; --alerta-tx: #f0cf6a; --pendente-bg: #000000; --pendente-tx: #ffb877; /* O CONTORNO segue forte: é ele que vira a faixa de 4px do cartão, e é a faixa que delimita quando o preenchimento não delimita (1,14:1 entre página e cartão). Já o filete de LINHA cai para #4a4a4a: numa tabela de vinte linhas, vinte traços a 5,48:1 é o que fazia a grade gritar. */ --borda: #8c8c8c; --filete-linha: #4a4a4a; /* Era #ffffff (13,6:1 contra o ladrilho). Branco puro em CADA borda de campo e em cada dia do calendário virava uma parede de linhas — direção do usuário: "reduzir um pouco o contraste dentro dos cartões". Este cinza claro mede 5,71:1 sobre o ladrilho e 8,83 sobre o fundo, bem acima dos 3:1 da norma: a exigência continua cumprida, a dureza sai. */ --borda-campo: #a8a8a8; --switch-thumb: #ffffff; --faixa-cartao: 2px; /* ÍCONES DE TRAÇO — só neste tema e no outro autoral. MAIORES que o caractere que substituem (21 contra 17): desenho vazado pesa menos que mancha colorida cheia, então o mesmo tamanho parece menor. O encaixe alarga junto, senão o ícone encosta no rótulo. */ --ico-orig: none; --ico-traco: inline-flex; --ico-tam: 21px; --ico-larg: 26px; --marca-tam: 27px; --ico-btn: 20px; --botao-raio: 2px; --botao-sec-bg: #0d0d0d; --fonte-titulo: Cambria, Georgia, "Times New Roman", serif; --ladrilho: #2e2e2e; --edicao-bg: #2e2e2e; --balao-bg: #2e2e2e; --balao-borda: #8c8c8c; --fds-dia: #2e2e2e; --fds-faixa: #141414; --reservada-bg: #2e2e2e; --pisca-bg: #2e2e2e; --pisca-tx: #f0cf6a; --opacidade-herdada: 1; --filete-a: #ffffff; --filete-b: #6ee7a0; --sombra: none; } /* AQUI HAVIA um bloco de ~25 regras `:root.escuro .x` que corrigia, uma a uma, as cores que os templates cravavam: as etiquetas, os avisos, o balão do Início, o fim de semana do calendário, a célula em edição da Equipe. Ele saiu inteiro nesta mudança. O motivo é aritmético. Aquele bloco era a SEGUNDA cópia de cada cor — a primeira estava no `