/* ============== PRECS CLARO: o dourado, nos dois papéis (1.1.6) ============== */ /* (1.1.41 · 2ª volta) O ESCOPO DO CLARO DEIXOU DE SER "A AUSÊNCIA DE data-theme". Era `html:not([data-theme])`, e isso amarrava o tema claro a existir SOZINHO: qualquer segundo tema claro (o Bordô claro, o branco temático que vem depois) declararia um `data-theme` próprio, deixaria de casar com estas treze regras e nasceria híbrido — superfície clara com o ouro, o foco dos campos e o `color-scheme` do escuro. É exatamente o modo de falha que a remoção do `dark` documentou em 1.1.6, e ele aconteceria calado. Agora quem diz "esta paleta é clara" é o atributo `data-luz`, escrito na raiz por `precsAplicarTemaRaiz` (index.html) junto com o tema. A especificidade é a mesma que a do `:not()` de antes (0,1,1), então a ordem da cascata continua valendo igual. Escopado aqui porque os temas escuros têm o ouro nos próprios blocos. A DIVISÃO EM DOIS PAPÉIS É O QUE FAZ ESTE TEMA FUNCIONAR, e ela não é preferência estética. Medido sobre as superfícies do PRECS Claro, o ouro da marca como TEXTO dá #B49552 -> 2,44:1 e #D3B26B -> 1,73:1. Não é margem fina: é ilegível, e o teste-contraste.js reprova sem exceção para texto grande. Então: TEXTO -> bronze #7A6320, pior caso 4,94:1 contra --bg-tertiary. É a cor de TODOS os rótulos dourados do claro (.panel-header, .precs-mvinc-lbl, .pqp-lbl, .precs-foco-label) e do número da métrica "Falado" (--m-falado, que copia este valor). FORMA -> ouro da marca #B49552, nas regras logo abaixo. A regra de 4,5:1 vale para TEXTO; contorno, divisor e ícone são forma, e o próprio comentário do --st-idle neste arquivo já usa esse argumento. É daqui que vem a sensação de "é o PRECS, mas claro": o fio do cartão é ouro de verdade. Histórico do valor de texto: era #9A7B32 (3,99:1, reprovava), foi para #856828 (5,07:1 sobre o branco puro) e agora é #7A6320, porque #856828 cai para 4,48:1 quando o fundo terciário esquenta para #EFEDE7 — esquentar a superfície CUSTA contraste, e o ouro tem que pagar a diferença. --precs-gold-title recebe o MESMO valor: no claro a hierarquia entre rótulo e título é carregada por peso e tamanho, e dois marrons a um passo de distância só pareceriam um erro de digitação. --precs-gold-hi fica mais claro de propósito e NÃO passa AA como texto: seus dois únicos usos são o :active do teclado (transitório, sobre fundo já dourado) e o fundo do selo de preview (onde ele é background, com texto escuro por cima). --precs-gold-soft fica com o valor do bronze para não sugerir um tom que a tela não usa. (1.1.43) E O AVISO DE QUE ELE PODIA SER APAGADO SAIU DAQUI, porque deixou de ser verdade: ele TEM consumidor desde a aba de WhatsApp da supervisão — a barra de proporção das quebras (`.precs-supwa-quebra-b i`, mais abaixo neste arquivo) faz um gradiente de `--precs-gold` para ele. O comentário antigo dizia "não tem NENHUM consumidor" e era um convite a apagar um token vivo em sete blocos de tema. Conferido em 01/09/2026. */ html[data-luz="claro"] { --precs-gold: #7A6320; --precs-gold-soft:#7A6320; --precs-gold-title:#7A6320; --precs-gold-hi:#8F7431; --precs-gold-light: rgba(122,99,32,0.12); } /* O OURO DE FORMA. Ver o bloco de comentário no fim deste arquivo: nos temas claros o --precs-gold vira bronze para proteger o TEXTO, e isso apagava as barras e os anéis, que não têm letra em cima e não precisavam pagar esse preço. */ :root { --precs-gold-forma: #B49552; } html[data-theme="contraste"] { --precs-gold-forma: #E8C46A; } /* ====================================================================== (1.1.85) AS TRES CORES DE NIVEL DE EQUIPE. Elas vieram de `60-campanhas-e-tv.css`, onde estavam num `:root` no meio do arquivo do card. Cor mora aqui, junto das paletas, porque e aqui que alguem procura quando for recalibrar um tema — e porque foi por estarem longe que elas nasceram sem passar pela mesma conferencia dos outros tons. POR QUE NAO SAO OS `--st-*`: aqueles carregam o ESTADO do operador no painel inteiro (verde e "falando", vermelho e alerta). Repeti-los num chip de equipe faria o chip parecer um estado. E POR QUE NAO SAO A FAIXA DE JIU-JITSU, que era o caminho obvio: o Pedro descreveu a operacao real em 16/09/2026 e ela desmente a ideia. O Nivel 1 e o SDR; o Nivel 2 tem faixa branca (SDR que virou closer), azul e roxa; o Nivel 3 mistura roxa e azul. Nivel e faixa sao eixos diferentes: pintar um com o outro daria duas equipes da mesma cor e uma equipe de duas cores. Azul -> roxo -> ouro le como progressao de senioridade sem precisar de legenda, e os tres sao matizes distintos o bastante para sobreviver aos fundos escuro e claro. A cor nunca e o TEXTO do chip: ela vive na borda, no ponto e num fundo de 14%. ====================================================================== */ :root{ --nivel-1: #4A8FD4; --nivel-2: #9B6BD6; --nivel-3: #C9A227; } /* (1.1.46) A COR DO ANEL DE FOCO, e por que ela não podia ser o ouro de forma. ------------------------------------------------------------------------------ Quatro controles usavam `--precs-gold-forma` como cor de `outline` no `:focus-visible`. A lógica parecia certa (anel é forma, não texto, então bronze seria excesso), mas ela ignora que a WCAG 2.2 cobra 3:1 do INDICADOR DE FOCO pelo critério 1.4.11 — que é justamente o critério de não-texto. Medido em 01/09/2026 contra as três superfícies de cada paleta: --precs-gold-forma #B49552 PRECS Claro 2,44:1 reprova Claro clássico 2,54:1 reprova Claro suave 2,12:1 reprova Os três claros da MARCA reprovavam; os da galeria (bordô, zebrado, contraste claros) passavam por declararem valores escuros. O caso mais irônico era o `.precs-tema-card`: o controle usado para ESCOLHER o tema era um dos de anel invisível. `--precs-gold-hi` também não serve sozinho: no Claro clássico ele é #B4913F e dá 2,65:1. O que passa nas dez paletas é a regra por FAMÍLIA — o ouro de realce no escuro, o bronze de texto no claro: escuros --precs-gold-hi pior caso 10,26:1 (PRECS) claros --precs-gold pior caso 4,67:1 (Claro clássico) O pior de todos fica em 4,67:1, acima até dos 4,5:1 de texto. Tema novo herda a regra sem declarar nada, porque as duas pontas são tokens que todo tema já tem. Isto NÃO substitui `--precs-gold-forma`, que segue sendo o ouro de superfície (o balão do WhatsApp, o botão de enviar, as barras). Só o anel de foco sai de lá. */ :root { --focus-ring-cor: var(--precs-gold-hi); --focus-ring-largura: 2px; --focus-ring-folga: 2px; } html[data-luz="claro"] { --focus-ring-cor: var(--precs-gold); } /* (1.1.55) `--accent-red-text` ENTRA NO VOCABULÁRIO DA FAMÍLIA CLARA, com o mesmo valor que ela já tinha. Nada muda na tela: o `:root` sempre deu #B42318 a todos os claros, e esta regra repete o número. O que muda é o CONTRATO — o `teste-temas.js` só aceita um tema recalibrar um token se a família inteira o declarar, e o Rubi claro precisa recalibrar este (a página dele é a mais escura dos claros, e o #B42318 caía para 4,20:1 em cima dela). Sem esta linha o override do Rubi faria os outros oito claros REPROVAREM por herança silenciosa, que é exatamente o defeito que o teste existe para pegar. É o mesmo movimento, com o mesmo argumento, que o par ouro-forma/tinta e o azul de ação fizeram na 1.1.42 — está escrito mais abaixo neste arquivo. */ html[data-luz="claro"] { --accent-red-text: #B42318; } /* --------------------------------------------------------------------------- (1.1.42) `--panel-fio`: A LINHA QUE CONTORNA OS PAINÉIS, agora um token. Ela era o desenho mais barato de identidade que cada tema tinha — dourada no PRECS, vinho no Bordô claro, preta no Zebrado claro — e vivia como literal dentro de regras `html[data-theme=…] .panel`, de especificidade (0,2,1). Qualquer regra de ID a vencia, e uma vencia: `#precs-card-campanha`, o maior card da tela. Como token, o fio passa a ser LEGÍVEL por quem precisa MISTURAR com ele em vez de substituí-lo. A ordem abaixo importa: a família clara vem antes dos temas claros específicos, porque `html[data-luz="claro"]` e `html[data-theme="bordo-claro"]` têm a MESMA especificidade (0,2,0) e quem decide é a ordem no arquivo. --------------------------------------------------------------------------- */ /* (1.1.54) O FIO DO PRECS SUBIU DE 0,12 PARA 0,30, e ele era o mais fraco dos dez. RELATO DO PEDRO, 03/09/2026: "o fundo melhorou muito nas questões de temas, acho que os cards do menu principal não acompanharam essa evolução visual, pode ser em qualquer tema principalmente no PRECS". ------------------------------------------------------------------------------ Ele está certo e o número existia: o `teste-temas-render.js` mede o contorno do card em cada paleta, e o PRECS dava 1,18 — o MENOR dos dez, contra um piso de 1,15. Ou seja, o tema PADRÃO da casa, onde a operação inteira roda, passava por 0,03. E o piso de 1,15 existe justamente por causa deste defeito: ele nasceu quando o card do Zebrado claro mediu 1,08 e o Pedro relatou "card invisível" (ver teste-temas-render.js:107). É o mesmo defeito, no tema seguinte. DUAS CALIBRAGENS, e a primeira estava errada. Comecei em 0,20 mirando a faixa dos irmãos (Bordô 1,310, Zebrado 1,396), o que levou o teste de 1,18 para 1,36. O Pedro olhou a tela e disse "parece que não mudou nada" — e ele estava certo: 1,36 é o número de quem não quer errar, não o de quem quer que o card apareça. Em 0,30 o teste mede 1,66, e aí o card tem ARESTA. O medo de "virar moldura" era meu, não medido; o Bordô claro vive em 1,54 e o Contraste em 3,55, e nenhum dos dois lê como moldura. A lição é a de sempre neste arquivo: número conservador escolhido no escuro é chute com cara de rigor. O que vale é ver na tela. E OS OUTROS TRÊS ESCUROS FORAM JUNTO, na mesma volta. Subir só o PRECS teria trocado uma inconsistência por outra: ele passaria a ser o único card com aresta, e Bordô (1,28), Zebrado (1,50) e Saphira (1,37) virariam os novos mais fracos — a pergunta do Pedro ao ver o resultado foi exatamente essa ("fez isso só no precs ou em todos os temas?"). O alvo é o MESMO NÚMERO PERCEBIDO em todos, e não o mesmo alfa: cada tema tem superfície própria, então o alfa que chega a ~1,67 é diferente em cada um — 0,30 no PRECS e no Bordô, 0,17 no Zebrado (branco sobre preto rende muito mais por ponto de alfa) e 0,31 no Saphira. Os CLAROS ficam onde estão: lá a sombra escura já separa o card do fundo, e fio mais forte sobre superfície clara vira contorno de verdade, não aresta. Por que o fio e não a superfície: clarear `--bg-secondary` até o card se separar de verdade exigiria #27272E, que é MAIS CLARO que o `--bg-tertiary` (#232327) — o card ficaria acima da superfície que ele contém, invertendo a hierarquia dos três fundos. */ :root { --panel-fio: var(--border-color); } html[data-theme="precs"] { --panel-fio: rgba(180, 149, 82, 0.30); } html[data-theme="bordo"] { --panel-fio: rgba(180, 149, 82, 0.30); } html[data-theme="zebrado"] { --panel-fio: rgba(255, 255, 255, 0.17); } /* (1.1.54) O Saphira nasce já no patamar novo do PRECS (0,20), e não nos 0,12 que o PRECS teve até esta leva: o fio é a única aresta que um card escuro tem, e um tema criado depois da medição não tem por que repetir o número que a medição condenou. */ html[data-theme="saphira"] { --panel-fio: rgba(180, 149, 82, 0.31); } html[data-theme="topazio"] { --panel-fio: rgba(217, 180, 94, 0.26); } html[data-theme="ametista"] { --panel-fio: rgba(180, 149, 82, 0.30); } html[data-theme="galaxia"] { --panel-fio: rgba(180, 149, 82, 0.30); } /* (1.1.55) O fio do Rubi e VERMELHO e nao dourado: e a unica aresta em que a assinatura do tema aparece no card do menu, que e a tela que o operador olha o dia inteiro. O carmim cheio (#C8102E) nao serve — sobre preto ele rende contorno 1,25, longe do 1,66 em que os outros escuros ficaram na 1.1.54. Clareado para #FF6B6B ele da exatamente 1,660. E o mesmo movimento que o Topazio fez com o ouro dele. */ html[data-theme="rubi"] { --panel-fio: rgba(255, 107, 107, 0.30); } /* (1.1.58) LEAO e SAKURA. O fio de cada um e a cor de assinatura do tema: no Leao o proprio ouro, um degrau mais forte que o PRECS porque a superficie dele e mais quente e o ouro se dilui nela; no Sakura o JADE DA AGUA (segunda volta), que e a unica cor do tema que nao esta na superficie — a pagina virou o carmim da copa, e o verde desceu para o fio, a faixa e a onda da textura. */ html[data-theme="leao"] { --panel-fio: rgba(180, 149, 82, 0.34); } html[data-theme="sakura"] { --panel-fio: rgba(127, 212, 180, 0.30); } html[data-theme="contraste"] { --panel-fio: var(--border-color); } html[data-luz="claro"] { --panel-fio: rgba(180, 149, 82, 0.30); } html[data-luz="claro"][data-claro="classico"] { --panel-fio: var(--border-color); } html[data-theme="bordo-claro"] { --panel-fio: rgba(120, 35, 38, 0.30); } html[data-theme="zebrado-claro"] { --panel-fio: rgba(16, 16, 16, 0.18); } html[data-theme="saphira-claro"] { --panel-fio: rgba(23, 53, 111, 0.30); } html[data-theme="topazio-claro"] { --panel-fio: rgba(110, 84, 17, 0.30); } html[data-theme="ametista-claro"] { --panel-fio: rgba(78, 37, 133, 0.30); } html[data-theme="rubi-claro"] { --panel-fio: rgba(158, 18, 29, 0.30); } html[data-theme="leao-claro"] { --panel-fio: rgba(106, 82, 25, 0.30); } html[data-theme="sakura-claro"] { --panel-fio: rgba(168, 29, 69, 0.30); } html[data-theme="galaxia-claro"] { --panel-fio: rgba(91, 46, 110, 0.30); } /* --------------------------------------------------------------------------- (1.1.43) `--panel-cabeca` E `--panel-cabeca-tinta`: A FAIXA DA CABEÇA DO CARD. O porquê está na regra `.panel-header` do estilo.css. Aqui ficam os valores dos temas que não moram naquele arquivo, e a mesma ordem do fio vale: família clara antes dos temas claros específicos, porque a especificidade é a mesma e quem decide é a ordem. `transparent` NÃO é "faltou decidir": nos escuros a superfície já é a paleta e uma faixa seria vinho sobre vinho, grafite sobre grafite, preto sobre preto. Os dois únicos temas com faixa OPACA são os claros temáticos, que é onde o problema existia. A tinta dos três escuros abaixo é `--text-secondary`, que é o que eles já mostravam pela regra base — só o `precs` pintava a cabeça de ouro, e ele continua pintando. --------------------------------------------------------------------------- */ html[data-theme="contraste"], html[data-theme="bordo"], html[data-theme="zebrado"], html[data-theme="saphira"], html[data-theme="topazio"], html[data-theme="ametista"], html[data-theme="galaxia"] { --panel-cabeca: transparent; --panel-cabeca-tinta: var(--text-secondary); } html[data-luz="claro"] { --panel-cabeca: transparent; --panel-cabeca-tinta: var(--precs-gold); } /* O VINHO ENTRA COMO ÁREA, e é o pedido literal: "não tem cor de bordô nos cards, nem que seja um vermelho claro alguma coisa assim simbolizando". 8% do Pantone 1815 C sobre a superfície do card dá ~#E9D9DB — rosa que se vê, não branco quente. A tinta continua sendo o vinho cheio (#7C2629), que sobre essa faixa dá cerca de 7,1:1. Escrito como `color-mix` e não como hex para a faixa acompanhar se `--bg-secondary` for recalibrado: as duas coisas são a mesma superfície, uma tingida. */ html[data-theme="bordo-claro"] { --panel-cabeca: color-mix(in srgb, #782326 16%, var(--bg-secondary)); --panel-cabeca-tinta: var(--precs-gold); } /* O ZEBRADO CLARO É O ÚNICO TEMA COM FAIXA CHAPADA, e é ele o "poderia ter mais fade com preto e branco". O preto do tema só existia como TEXTO: o acento é preto, o fundo é branco, e o resultado lia como um claro neutro qualquer. Com a faixa, o preto volta a ser SUPERFÍCIE — que é exatamente o que faz o Zebrado escuro funcionar, com os papéis trocados. Branco sobre #101010 dá ~18,9:1. A tinta é um LITERAL e não `var(--precs-gold)`, e isso importa: o bloco de remapeamento logo abaixo aponta `--precs-gold` para cá, e um var() nos dois sentidos seria ciclo. */ html[data-theme="zebrado-claro"] { --panel-cabeca: #101010; --panel-cabeca-tinta: #FFFFFF; } /* (1.1.54) O SAPHIRA CLARO SEGUE O BORDÔ CLARO, e pelo mesmo motivo: num tema claro a superfície não carrega a paleta (branco é branco), então a cabeça do card é o único lugar onde o azul entra como ÁREA. 8% do azul do tema sobre a superfície dá um azul lavado que se vê; a tinta continua sendo o azul cheio, que aqui é `--precs-gold` (no claro o token de ouro aponta para o azul, pela mesma regra do vinho no Bordô: o ouro da marca não tem contraste para ser texto em fundo claro). */ html[data-theme="saphira-claro"] { --panel-cabeca: color-mix(in srgb, #17356F 16%, var(--bg-secondary)); --panel-cabeca-tinta: var(--precs-gold); } html[data-theme="topazio-claro"] { --panel-cabeca: color-mix(in srgb, #6E5411 16%, var(--bg-secondary)); --panel-cabeca-tinta: var(--precs-gold); } html[data-theme="ametista-claro"] { --panel-cabeca: color-mix(in srgb, #4E2585 16%, var(--bg-secondary)); --panel-cabeca-tinta: var(--precs-gold); } html[data-theme="galaxia-claro"] { --panel-cabeca: color-mix(in srgb, #5B2E6E 16%, var(--bg-secondary)); --panel-cabeca-tinta: var(--precs-gold); } html[data-theme="leao-claro"] { --panel-cabeca: color-mix(in srgb, #6A5219 16%, var(--bg-secondary)); --panel-cabeca-tinta: var(--precs-gold); } /* (1.1.58) NO SAKURA CLARO A FAIXA E JADE, e nao rosa. Os papeis se invertem entre as duas luzes do par, como no Zebrado e no Rubi: no escuro a pagina e jade e o rosa e a assinatura; aqui a pagina e rosa e o jade e que precisa de um lugar onde vire area. */ html[data-theme="sakura-claro"] { /* (1.1.66) AQUI ERA `#0F5B48 16%`, O JADE, e ele saiu pelos dois motivos desta leva. Primeiro, coerencia com o par escuro: se la a faixa deixou de ser verde, aqui tambem, senao o mesmo tema teria cabeca vinho no escuro e cabeca menta no claro. Segundo, coerencia com o proprio tema claro: todos os outros claros misturam a ASSINATURA deles nesta faixa (saphira #17356F, topazio #6E5411, ametista #4E2585, leao #6A5219), e a assinatura do Sakura claro e o carmim #A81D45 -- e ele que ja esta no `--panel-fio` logo acima. O jade aqui era a regra de inversao mandando na faixa. */ --panel-cabeca: color-mix(in srgb, #A81D45 16%, var(--bg-secondary)); --panel-cabeca-tinta: var(--precs-gold); } /* (1.1.55) O RUBI CLARO TEM FAIXA PRETA CHAPADA, e é o segundo tema do catálogo com ela — o primeiro é o Zebrado claro, pelo motivo idêntico. Um tema claro não carrega a paleta na SUPERFÍCIE (branco é branco), então a cor precisa de um lugar onde vire ÁREA. Aqui são duas cores, e cada uma ficou com o seu: o vermelho é a página, o fio e a tinta; o preto é esta faixa e a listra do canvas. A primeira versão fez a faixa de carmim a 16%, e o resultado foi uma tela inteiramente ROSA — perto demais do Bordô claro e sem nenhum preto. O preto na cabeça do card é o que separa os dois temas à primeira olhada. O tom é #16090C e não #000000: é o `--bg-primary` do Rubi escuro, então os dois pares do tema mostram o MESMO preto. Branco sobre ele dá ~18,7:1. */ html[data-theme="rubi-claro"] { --panel-cabeca: #16090C; --panel-cabeca-tinta: #FFFFFF; } /* (1.1.55) O RUBI ESCURO É O ÚNICO TEMA ESCURO COM FAIXA OPACA, e a exceção tem motivo, não é esquecimento do grupo acima. A regra dos escuros — `transparent` porque "seria vinho sobre vinho, grafite sobre grafite, preto sobre preto" — parte de uma premissa que aqui é FALSA: nos outros seis escuros a cor de assinatura É a cor da superfície, então a faixa não teria com o que contrastar. No Rubi a superfície é PRETA e a assinatura é VERMELHA — são duas cores diferentes, e a faixa é o único lugar de área grande onde o vermelho vira superfície em vez de fio. É a mesma inversão que o Zebrado claro fez pelo outro lado (preto como faixa num tema de fundo branco), e pelo mesmo argumento: sem ela o acento existe só como TEXTO. 22% do carmim sobre o card dá #421019 — vermelho que se vê, ainda escuro. A tinta é o ouro do tema, que sobre essa faixa dá 7,84:1. */ html[data-theme="rubi"] { --panel-cabeca: color-mix(in srgb, #C8102E 22%, var(--bg-secondary)); --panel-cabeca-tinta: var(--precs-gold-title); } /* (1.1.58) O LEAO E O TERCEIRO ESCURO COM FAIXA, e o motivo dele e o predio. O Tiemann Headquarters tem o nome em LETRA DOURADA numa faixa de pedra sobre a entrada, entre as colunas e acima dos dois leoes. A cabeca do card e o unico lugar do painel com essa mesma forma — uma faixa horizontal que carrega um titulo —, entao ela e onde a citacao cabe sem virar enfeite. 14% do ouro sobre o card da #322B1E: bronze que se ve, ainda escuro, e o titulo em `--precs-gold-title` fica com folga larga em cima dele. Isto tambem e o "algo a mais" que o Caio pediu em relacao ao PRECS, que declara `transparent` aqui: os dois compartilham a familia de cor, e a faixa e a diferenca. */ html[data-theme="leao"] { --panel-cabeca: color-mix(in srgb, #B49552 14%, var(--bg-secondary)); --panel-cabeca-tinta: var(--precs-gold-title); } /* (1.1.58, segunda volta) O SAKURA usa a faixa pelo motivo oposto ao do Leao: no Leao ela CITA o predio, aqui ela e o unico jeito de o JADE existir como AREA. Depois da inversao a superficie deste tema e carmim — pagina, card e chip sao vermelho-escuro —, e a agua verde vive so na onda da textura, que nunca encosta em card nenhum. Sem a faixa, o jade seria uma cor que o operador ve pelo canto do olho e nunca de perto. E CHAPADA, nao um `color-mix`, e a razao esta medida: jade e carmim sao quase complementares, entao a mistura vai para o cinza em vez de para o verde. #00A97C a 20% sobre o card da #2C2F30, com 0,04 de saturacao — cinza-chumbo. Testados cinco jades (#00A97C, #2BD4A0, #00C48F, #0F5B48, #12E0A5) em cinco porcentagens: nenhum chegava a 0,3 de saturacao sem o titulo cair abaixo de 5:1. O #1A3A30 era um tom medido na agua da foto (a familia dela quantizada da #12281F, #2E483E e #283531). Chapado ele lia como jade: 6,12:1 no ouro do titulo, 5,07:1 no vermelho de erro e 12,41:1 no branco. (1.1.66) A FAIXA SAIU DO JADE E FOI PARA O VINHO, por relato do Pedro em 10/09/2026 ("o verde ficou ruim"). O jade nao estava errado de contraste; ele estava errado de AREA. A faixa chapada e a maior superficie de cor do card, e num tema cuja pagina, cujo cartao e cujo filete sao vinho, ela era a unica coisa verde grande da tela -- entao o verde deixava de ser o acento da agua e passava a ser um segundo assunto disputando com a copa. O #5C1A2D e da propria familia da pagina (entre o #37101D do cartao e o rosa da flor) e mantem a faixa MAIS CLARA que o cartao, que e o que faz dela uma faixa e nao um recesso. O verde nao sai do tema: ele fica onde area e pequena, no fio do painel e na agua da textura, que e exatamente o papel que ele tem na foto. E A TROCA NAO CUSTOU CONTRASTE, medido lado a lado no navegador (canvas, para o `color-mix` nao ser lido como texto): contra o ouro do titulo 6,12 -> 6,31; contra o ouro 4,35 -> 4,49; contra o branco 12,41 -> 12,80; contra o vermelho de erro 4,25 -> 4,38. Todas as relacoes de texto melhoraram. O degrau contra o cartao cai de 1,35 para 1,31, que continua sendo faixa visivel. UMA CORRECAO DE REGISTRO: o paragrafo acima dizia "5,07:1 no vermelho de erro" para o jade, e medindo pelo `--accent-red` do tema o jade da 4,25. Aquele numero foi calculado contra outra referencia (ou errado), e fica aqui anotado em vez de repetido. */ html[data-theme="sakura"] { --panel-cabeca: #5C1A2D; --panel-cabeca-tinta: var(--precs-gold-title); } /* O QUE VIVE DENTRO DA FAIXA CHAPADA, e por que isto é um remapeamento e não seis regras. A cabeça do card hospeda coisas que se pintam a partir do OURO do tema: o selo de contagem da supervisão (`.precs-sup-selo`: fundo `--precs-gold`, tinta `--bg-primary`) e o botão de modo TV (`.precs-campt-tv`: `color: --precs-gold-title`). No Zebrado claro o ouro É o preto #101010, então sobre a faixa preta os dois desapareciam — pílula preta em faixa preta. Em vez de caçar cada consumidor, a faixa remapeia LOCALMENTE o par que eles já usam. Custom property é herdada, então tudo que estiver dentro da cabeça inverte junto, e o que entrar amanhã inverte sozinho. Vale só para este tema porque ele é o único com faixa opaca; nos outros a cabeça é transparente e o par de fora continua correto. E A FAIXA TAMBÉM INVERTE A POLARIDADE DAS VARIANTES `-text`. Elas existem para ESCURECER um acento que vai sobre fundo claro (`--accent-red-text` é #B42318 na família clara), e esta faixa é uma superfície ESCURA dentro de um tema claro: sobre #101010 o #B42318 dá 2,88:1, enquanto o acento cru #EF4444 dá 5,03:1. Então aqui elas voltam ao acento cru. As quatro entram juntas mesmo que só o vermelho tenha uso hoje (o cabeçalho da seção de alerta): a regra é da FAIXA e não daquele cabeçalho, e o próximo rótulo colorido que alguém puser numa cabeça de card já nasce certo em vez de nascer ilegível. */ html[data-theme="zebrado-claro"] .panel-header, html[data-theme="rubi-claro"] .panel-header { --precs-gold: var(--panel-cabeca-tinta); --precs-gold-title: var(--panel-cabeca-tinta); --bg-primary: var(--panel-cabeca); --accent-red-text: var(--accent-red); --accent-orange-text: var(--accent-orange); --accent-green-text: var(--accent-green); --accent-manual-text: var(--accent-manual); } /* ========================================================================= (1.1.42) A ASSINATURA DE CANVAS: cada tema ganha um DESENHO no fundo da tela. POR QUE: até aqui um tema era uma tabela de cores, e duas tabelas de cores parecidas dão dois temas parecidos — foi o retorno do Pedro em 31/08/2026 sobre os quatro novos ("não mudou nada"). Cor sozinha distingue pouco; TEXTURA distingue à primeira olhada, mesmo de longe, mesmo com a tela tingida pelo estado. ONDE ELA VIVE: no `background-image` do próprio , e não numa camada nova. Isso é decisão, não atalho. O empilhamento da tela já é apertado — a vinheta de estado (`#precs-tint`) é `fixed` em z-index 0 e `header, main` estão em 1 — e um pseudo-elemento com z-index negativo cairia ATRÁS do fundo do , porque o não abre contexto de empilhamento próprio: a textura simplesmente não apareceria. Como fundo do a ordem sai de graça e é a certa: textura → tinta de estado → conteúdo. ONDE ELA APARECE: só no espaço ENTRE os cards. Todo painel tem fundo próprio e opaco, então o desenho não passa por baixo de texto nenhum — e por isso ele não entra em nenhuma conta de contraste. A FORÇA (5% a 9%) é onde isto lê como MATERIAL e não como estampa. Acima disso vira papel de parede e começa a competir com a informação, que é o que o Pedro chamou de "surreal". A régua é: de pé, a dois metros, você percebe que a tela tem superfície; sentado, você não consegue mais dizer onde estava o desenho. O CONTRASTE NÃO RECEBE TEXTURA, pelo mesmo motivo de sempre: quem escolheu o tema de acessibilidade não pediu desenho atrás de nada. Ele declara `none` — declarar é o que o `teste-temas.js` cobra, e `none` é uma resposta, ausência não é. O Claro clássico também fica liso: ele é o tema NEUTRO do catálogo, o "sem personalidade" que existe para quem não quer nenhuma. ========================================================================= */ body { background-image: var(--precs-canvas-textura, none); background-size: var(--precs-canvas-escala, 120px) var(--precs-canvas-escala, 120px); background-repeat: repeat; } /* ========================================================================= (1.1.80) O DESENHO DE FUNDO DEIXOU DE SER PROPRIEDADE DO TEMA. Pedido da Gabrielle (15/09/2026): ela usa o Safira claro e queria o fundo timbrado. Ou seja, gostar da COR de um tema e do DESENHO de outro — que o catalogo nao permitia, porque cada tema tinha a sua textura e pronto. O IMPEDIMENTO ERA A COR ESTAR DENTRO DO DESENHO. Cada `--precs-canvas-textura` e um SVG com a cor cravada (`stroke='%23B49552'` no dourado, `%23F2A6C6` no rosa do Sakura). Emprestar o desenho do Sakura para o Safira traria a flor rosa. Gerar 8 desenhos x 12 cores nao e caminho. A SAIDA JA EXISTIA NESTA CASA, no papel de parede do WhatsApp: a textura entra como MASCARA e a cor vem de fora (`background: currentColor` + `mask-image`). O SVG vira forma pura, e a mesma forma serve a qualquer tema. E O DESENHO PROPRIO DO TEMA CONTINUA INTACTO, com as duas cores quando tem (a flor rosa e a folha verde do Sakura). Por isso sao dois caminhos e nao um: · sem `data-canvas` -> o de sempre, `background-image`, cores originais; · com `data-canvas` -> mascara recolorida na tinta do tema. Quem escolhe o desenho do proprio tema NAO ganha `data-canvas` (o JS remove o atributo), entao cai no primeiro caminho e nada muda para quem ja usa. A ESPECIFICIDADE E DE PROPOSITO. `html:root[data-canvas="X"]` vale 0,2,1 contra os 0,1,1 de `html[data-theme="X"]`, entao o emprestimo vence o tema sem depender da ORDEM dos blocos no arquivo — que e exatamente a armadilha que o `teste-textura-tema.js` foi escrito para pegar, quando o Rubi claro apareceu com o losango da familia clara. ========================================================================= */ /* A forca vive como TOKEN e nao so como fallback, para quem procurar "de onde sai a intensidade do fundo?" achar a resposta num lugar. Ela e 1 porque cada SVG de textura ja carrega a propria opacidade por dentro (ver o bloco do ::before abaixo). */ :root { --precs-canvas-forca: 1; } html[data-canvas] body { background-image: none; isolation: isolate; } html[data-canvas] body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: currentColor; color: var(--text-primary); /* A FORCA E 1, E ISSO NAO E "no maximo": e o valor que iguala o nativo. Cada SVG de textura JA carrega a propria opacidade por dentro (entre .075 e .155, escolhidas por quem desenhou cada uma). Como MASCARA, esse alfa e que decide quanto da cor passa — entao multiplicar por mais .07 aqui daria 0,7%, invisivel. Medido: com .07 o fundo emprestado aparecia LISO na tela. Com 1, a mascara respeita a calibragem original de cada desenho, que e exatamente o que se quer. */ opacity: var(--precs-canvas-forca, 1); -webkit-mask-image: var(--precs-canvas-textura); mask-image: var(--precs-canvas-textura); -webkit-mask-size: var(--precs-canvas-escala, 120px) var(--precs-canvas-escala, 120px); mask-size: var(--precs-canvas-escala, 120px) var(--precs-canvas-escala, 120px); -webkit-mask-repeat: repeat; mask-repeat: repeat; } /* "Nenhum" e uma escolha, e precisa apagar tambem o desenho do tema. */ html[data-canvas="liso"] body { background-image: none; } html[data-canvas="liso"] body::before { content: none; } /* Contraste nunca tem desenho, nem emprestado: quem escolheu contraste nao pediu nada atras do texto. Vale por cima de qualquer `data-canvas`. */ html[data-theme="contraste"] body::before, html[data-theme="contraste-claro"] body::before { content: none; } /* (1.1.43) CADA BLOCO ABAIXO GANHOU UM SEGUNDO SELETOR, `.precs-tema-maquete[data-tema=…]`, e é assim que a maquete do cartão da galeria mostra a textura do tema que ela representa. O molde é a miniatura de papel do WhatsApp (`.precs-papel-mini`, mais abaixo neste arquivo): em vez de COPIAR o data-URI para um bloco da prévia, a prévia entra no mesmo bloco que pinta a tela. Cópia divergiria na primeira vez que alguém afinasse uma textura e esquecesse o seletor da galeria — que é literalmente a lição escrita lá. O `teste-temas.js` continua enxergando os temas: ele casa por PARTE EXATA do seletor, e a parte `html[data-theme=…]` segue aqui. A camada e as duas calibragens (ladrilho menor, força somada) vivem no CSS do cartão. */ /* O LOSANGO DA MARCA, para os temas PRECS. */ html[data-theme="precs"], .precs-tema-maquete[data-tema="precs"], html:root[data-canvas="precs"], .precs-fundo-mini[data-canvas="precs"]{ --precs-canvas-textura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23B49552' stroke-width='.85' opacity='.075'%3E%3Cpath d='M32 6L58 32L32 58L6 32Z'/%3E%3Cpath d='M0 -26L26 0L0 26L-26 0Z'/%3E%3Cpath d='M64 -26L90 0L64 26L38 0Z'/%3E%3Cpath d='M0 38L26 64L0 90L-26 64Z'/%3E%3Cpath d='M64 38L90 64L64 90L38 64Z'/%3E%3C/g%3E%3Cg fill='%23B49552' opacity='.105'%3E%3Cpath transform='translate(32 32) scale(.42)' d='M0 -9 C1.4 -2.6 2.6 -1.4 9 0 C2.6 1.4 1.4 2.6 0 9 C-1.4 2.6 -2.6 1.4 -9 0 C-2.6 -1.4 -1.4 -2.6 0 -9 Z'/%3E%3Cpath transform='translate(0 0) scale(.42)' d='M0 -9 C1.4 -2.6 2.6 -1.4 9 0 C2.6 1.4 1.4 2.6 0 9 C-1.4 2.6 -2.6 1.4 -9 0 C-2.6 -1.4 -1.4 -2.6 0 -9 Z'/%3E%3Cpath transform='translate(64 0) scale(.42)' d='M0 -9 C1.4 -2.6 2.6 -1.4 9 0 C2.6 1.4 1.4 2.6 0 9 C-1.4 2.6 -2.6 1.4 -9 0 C-2.6 -1.4 -1.4 -2.6 0 -9 Z'/%3E%3Cpath transform='translate(0 64) scale(.42)' d='M0 -9 C1.4 -2.6 2.6 -1.4 9 0 C2.6 1.4 1.4 2.6 0 9 C-1.4 2.6 -2.6 1.4 -9 0 C-2.6 -1.4 -1.4 -2.6 0 -9 Z'/%3E%3Cpath transform='translate(64 64) scale(.42)' d='M0 -9 C1.4 -2.6 2.6 -1.4 9 0 C2.6 1.4 1.4 2.6 0 9 C-1.4 2.6 -2.6 1.4 -9 0 C-2.6 -1.4 -1.4 -2.6 0 -9 Z'/%3E%3C/g%3E%3C/svg%3E"); --precs-canvas-escala: 64px; } /* A RENDA, para os dois Bordôs. É o desenho que o Pedro pediu por nome ("o bordô ter umas rendas") e o que mais diz sobre o tema: retículo de circunferências cruzadas com ilhós no meio de cada losango, que é como a renda de bilro se organiza de verdade. No escuro o fio é o OURO, porque vinho sobre vinho não se vê; no claro é o próprio vinho. */ /* (1.1.43) O GUILHOCHÊ SUBIU UM DEGRAU, a pedido do Pedro em 01/09/2026. Os valores anteriores (.075 no retículo, .06 no ilhó, .09 no ponto) ficavam no piso da faixa de 4% a 8% que a 1.1.42 tinha adotado, e nessa faixa a renda lê como material mas quase não se enxerga em monitor de escritório. Vão para .10 / .08 / .115, cerca de um terço acima, que é o ponto em que o desenho aparece sem virar estampa. Se passar disso, o retículo começa a competir com o texto em zoom de 200%, que é o teto declarado da assinatura. */ html[data-theme="bordo"], .precs-tema-maquete[data-tema="bordo"], html:root[data-canvas="bordo"], .precs-fundo-mini[data-canvas="bordo"]{ --precs-canvas-textura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23B49552' stroke-width='.9' opacity='.10'%3E%3Ccircle cx='0' cy='0' r='42.4'/%3E%3Ccircle cx='60' cy='0' r='42.4'/%3E%3Ccircle cx='120' cy='0' r='42.4'/%3E%3Ccircle cx='0' cy='60' r='42.4'/%3E%3Ccircle cx='60' cy='60' r='42.4'/%3E%3Ccircle cx='120' cy='60' r='42.4'/%3E%3Ccircle cx='0' cy='120' r='42.4'/%3E%3Ccircle cx='60' cy='120' r='42.4'/%3E%3Ccircle cx='120' cy='120' r='42.4'/%3E%3C/g%3E%3Cg fill='none' stroke='%23B49552' stroke-width='.75' opacity='.08'%3E%3Ccircle cx='30' cy='30' r='9'/%3E%3Ccircle cx='90' cy='30' r='9'/%3E%3Ccircle cx='30' cy='90' r='9'/%3E%3Ccircle cx='90' cy='90' r='9'/%3E%3C/g%3E%3Cg fill='%23B49552' opacity='.115'%3E%3Ccircle cx='0' cy='0' r='1.8'/%3E%3Ccircle cx='60' cy='0' r='1.8'/%3E%3Ccircle cx='120' cy='0' r='1.8'/%3E%3Ccircle cx='0' cy='60' r='1.8'/%3E%3Ccircle cx='60' cy='60' r='1.8'/%3E%3Ccircle cx='120' cy='60' r='1.8'/%3E%3Ccircle cx='0' cy='120' r='1.8'/%3E%3Ccircle cx='60' cy='120' r='1.8'/%3E%3Ccircle cx='120' cy='120' r='1.8'/%3E%3C/g%3E%3C/svg%3E"); --precs-canvas-escala: 120px; } /* (1.1.43) AS LISTRAS VERTICAIS, para os dois Zebrado, e elas substituem a malha diagonal. A malha era o desenho genérico de "trama de tecido" que se faz só com reta, e não dizia nada sobre o tema. A listra vertical é o que dá NOME a esta paleta, e é o único motivo que um tema de dois tons chapados comporta sem inventar uma terceira cor. BANDA CHEIA A 50% DE CICLO, e não fio: fio de meio pixel não faz listra, faz risco. Como banda cobre metade da área em vez de uma fração de pixel, a opacidade CAI em relação à malha (que era .055/.07 em traço de 0,7px) — mesma quantidade de tinta na tela, outra distribuição. Medido sobre o `--bg-primary` de cada um: no escuro a banda leva #0A0A0A a #151515, no claro leva #EDEDED a #E1E1E1. Lê como listra e não como defeito de gradiente. O ladrilho de 48px dá listra de 24px na tela, e é o número que faz a listra aparecer no vão entre os cards (que é o único lugar onde ela aparece: card tem fundo opaco). Na maquete do cartão da galeria, com o fator .40 e o empilhamento triplo, isso vira listra de 9,6px a ~13% — cerca de doze listras num cartão de 236px, o que faz o Zebrado ser reconhecido na galeria antes de ler o nome. */ html[data-theme="zebrado"], .precs-tema-maquete[data-tema="zebrado"], html:root[data-canvas="zebrado"], .precs-fundo-mini[data-canvas="zebrado"]{ --precs-canvas-textura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Crect x='0' y='0' width='24' height='48' fill='%23FFFFFF' opacity='.045'/%3E%3C/svg%3E"); --precs-canvas-escala: 48px; } /* A FACETA, para os dois Saphira. Safira é pedra lapidada, e a lapidação é o que distingue este tema dos outros dois losangos do catálogo: o PRECS tem losango COM ESTRELA (a marca), e aqui o losango é DUPLO — mesa e coroa, como o corte de uma gema vista de cima — com os raios indo para os vértices do ladrilho e um ponto de brilho no centro de cada faceta. No escuro o fio é o OURO, e não o azul: azul sobre azul não se vê, que é o mesmo motivo pelo qual a renda do Bordô escuro também é dourada. */ html[data-theme="saphira"], .precs-tema-maquete[data-tema="saphira"], html:root[data-canvas="saphira"], .precs-fundo-mini[data-canvas="saphira"]{ --precs-canvas-textura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23B49552' stroke-width='.85' opacity='.085'%3E%3Cpath d='M36 6L66 36L36 66L6 36Z'/%3E%3Cpath d='M36 20L52 36L36 52L20 36Z'/%3E%3Cpath d='M0 0L6 36L0 72M72 0L66 36L72 72'/%3E%3C/g%3E%3Cg fill='%23B49552' opacity='.10'%3E%3Ccircle cx='36' cy='36' r='1.7'/%3E%3Ccircle cx='0' cy='0' r='1.7'/%3E%3Ccircle cx='72' cy='0' r='1.7'/%3E%3Ccircle cx='0' cy='72' r='1.7'/%3E%3Ccircle cx='72' cy='72' r='1.7'/%3E%3C/g%3E%3C/svg%3E"); --precs-canvas-escala: 72px; } /* O PRISMA, para os dois Topázio: o cristal de topázio cresce em coluna, e o ladrilho é alto (56x84) para o losango sair ALONGADO — é o que distingue esta assinatura do losango do PRECS e da faceta do Saphira, que são quadrados. */ html[data-theme="topazio"], .precs-tema-maquete[data-tema="topazio"], html:root[data-canvas="topazio"], .precs-fundo-mini[data-canvas="topazio"]{ --precs-canvas-textura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='84' viewBox='0 0 56 84'%3E%3Cg fill='none' stroke='%23D9B45E' stroke-width='.85' opacity='.09'%3E%3Cpath d='M28 6L50 42L28 78L6 42Z'/%3E%3Cpath d='M28 6L28 78M6 42L50 42'/%3E%3Cpath d='M0 0L6 42L0 84M56 0L50 42L56 84'/%3E%3C/g%3E%3Cg fill='%23D9B45E' opacity='.11'%3E%3Ccircle cx='28' cy='42' r='1.6'/%3E%3Ccircle cx='0' cy='0' r='1.6'/%3E%3Ccircle cx='56' cy='0' r='1.6'/%3E%3Ccircle cx='0' cy='84' r='1.6'/%3E%3Ccircle cx='56' cy='84' r='1.6'/%3E%3C/g%3E%3C/svg%3E"); --precs-canvas-escala: 56px; } /* O DRUSO, para os dois Ametista: a ametista se forma em geodo, uma superfície coberta de pontas. São triângulos em fileiras alternadas, que é como o cristal de fato cresce. */ html[data-theme="ametista"], .precs-tema-maquete[data-tema="ametista"], html:root[data-canvas="ametista"], .precs-fundo-mini[data-canvas="ametista"]{ --precs-canvas-textura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23B49552' stroke-width='.85' opacity='.09'%3E%3Cpath d='M15 45L30 15L45 45Z'/%3E%3Cpath d='M0 60L15 30L30 60Z'/%3E%3Cpath d='M30 60L45 30L60 60Z'/%3E%3Cpath d='M0 30L15 0L30 30Z'/%3E%3Cpath d='M30 30L45 0L60 30Z'/%3E%3C/g%3E%3Cg fill='%23B49552' opacity='.11'%3E%3Ccircle cx='30' cy='15' r='1.5'/%3E%3Ccircle cx='0' cy='45' r='1.5'/%3E%3Ccircle cx='60' cy='45' r='1.5'/%3E%3C/g%3E%3C/svg%3E"); --precs-canvas-escala: 60px; } /* A LISTRA RUBRO-NEGRA, para os dois Rubi. É o mesmo desenho do Zebrado — banda cheia a 50% de ciclo, ladrilho de 48px — e é de propósito: o pedido foi "o Zebrado só que vermelho e preto", e a listra vertical é o que dá nome àquela paleta. O que muda é a TINTA, e ela troca de lado entre as duas luzes: no escuro a banda é o carmim sobre preto, no claro é o preto sobre rosa. Os dois juntos são a leitura de camisa listrada que o tema serve para dar. A força fica em .085 no escuro (contra .045 do branco do Zebrado): vermelho tem menos luminância que branco, então a mesma quantidade de tinta rende menos separação. Medido, a banda leva a página de #120A0C para #240C10 — dentro da faixa de 5% a 9% da assinatura, que é o teto declarado no grupo acima. */ html[data-theme="rubi"], .precs-tema-maquete[data-tema="rubi"] { --precs-canvas-textura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Crect x='0' y='0' width='24' height='48' fill='%23E8213F' opacity='.085'/%3E%3C/svg%3E"); --precs-canvas-escala: 48px; } /* (1.1.58) O LEAO DO TIEMANN, e este e o primeiro desenho FIGURATIVO do catalogo — todos os outros sao geometria (losango, renda, listra, telha, escama). Isso mudou o metodo: as tres primeiras tentativas foram medidas na tela antes de virarem CSS, e duas foram descartadas por leitura, nao por gosto. · A silhueta cheia do leao deitado, que e a pose das duas estatuas da entrada, virou uma BATATA: em couchant a juba encosta no lombo, e sem linha interna o contorno fecha num volume unico sem cabeca. · O mesmo perfil com linha interna (juba, patas, ancas) leu como HAMSTER a 46px. · A cabeca heraldica de frente e a unica que se le como leao em qualquer tamanho, inclusive a 40px, porque a juba RADIANTE nao depende de detalhe: e uma silhueta de sol com um focinho dentro. E ela e a forma classica do leao em predio neoclassico, que e de onde o pedido veio. A TRELICA DE LOSANGOS E AS ESTRELAS SAO AS DO PRECS, byte a byte, e isto e o pedido literal ("as cores do tema precs so q com leoes"): o leao ocupa o centro do losango, onde no PRECS mora a estrela da marca, e as quatro estrelas dos vertices ficam. O ladrilho e de 88px contra os 64 do PRECS. Motivo medido: em 1920x1080 o ladrilho de 64 repete 510 vezes, e foi o que fez um operador chamar o fundo de azulejo. Um desenho figurativo cansa mais rapido que um losango, entao ele repete 270 vezes em vez de 510. */ html[data-theme="leao"], .precs-tema-maquete[data-tema="leao"], html:root[data-canvas="leao"], .precs-fundo-mini[data-canvas="leao"]{ --precs-canvas-textura: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2288%22%20height%3D%2288%22%20viewBox%3D%220%200%2088%2088%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23B49552%22%20stroke-width%3D%22.85%22%20opacity%3D%22.075%22%3E%3Cpath%20d%3D%22M0%20-44L44%200L0%2044L-44%200Z%22%2F%3E%3Cpath%20d%3D%22M88%20-44L132%200L88%2044L44%200Z%22%2F%3E%3Cpath%20d%3D%22M0%2044L44%2088L0%20132L-44%2088Z%22%2F%3E%3Cpath%20d%3D%22M88%2044L132%2088L88%20132L44%2088Z%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23B49552%22%20opacity%3D%22.105%22%3E%3Cpath%20transform%3D%22translate(0%200)%20scale(.42)%22%20d%3D%22M0%20-9%20C1.4%20-2.6%202.6%20-1.4%209%200%20C2.6%201.4%201.4%202.6%200%209%20C-1.4%202.6%20-2.6%201.4%20-9%200%20C-2.6%20-1.4%20-1.4%20-2.6%200%20-9%20Z%22%2F%3E%3Cpath%20transform%3D%22translate(88%200)%20scale(.42)%22%20d%3D%22M0%20-9%20C1.4%20-2.6%202.6%20-1.4%209%200%20C2.6%201.4%201.4%202.6%200%209%20C-1.4%202.6%20-2.6%201.4%20-9%200%20C-2.6%20-1.4%20-1.4%20-2.6%200%20-9%20Z%22%2F%3E%3Cpath%20transform%3D%22translate(0%2088)%20scale(.42)%22%20d%3D%22M0%20-9%20C1.4%20-2.6%202.6%20-1.4%209%200%20C2.6%201.4%201.4%202.6%200%209%20C-1.4%202.6%20-2.6%201.4%20-9%200%20C-2.6%20-1.4%20-1.4%20-2.6%200%20-9%20Z%22%2F%3E%3Cpath%20transform%3D%22translate(88%2088)%20scale(.42)%22%20d%3D%22M0%20-9%20C1.4%20-2.6%202.6%20-1.4%209%200%20C2.6%201.4%201.4%202.6%200%209%20C-1.4%202.6%20-2.6%201.4%20-9%200%20C-2.6%20-1.4%20-1.4%20-2.6%200%20-9%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%22.085%22%20transform%3D%22translate(44%2044)%20scale(1.3640)%20translate(-20%20-20)%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23B49552%22%20stroke-width%3D%22.95%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.00%200.60L23.25%206.80L29.02%202.82L29.02%209.82L35.97%208.98L32.72%2015.18L39.26%2017.66L33.50%2021.64L38.14%2026.88L31.19%2027.73L32.86%2034.52L26.32%2032.04L24.64%2038.84L20.00%2033.60L15.36%2038.84L13.68%2032.04L7.14%2034.52L8.81%2027.73L1.86%2026.88L6.50%2021.64L0.74%2017.66L7.28%2015.18L4.03%208.98L10.98%209.82L10.98%202.82L16.75%206.80Z%22%2F%3E%3Cpath%20d%3D%22M23.16%207.18L24.74%2010.97L28.75%2010.12L28.39%2014.21L32.34%2015.32L30.13%2018.77L33.10%2021.59L29.54%2023.62L30.86%2027.50L26.76%2027.64L26.13%2031.69L22.44%2029.90L20.00%2033.20L17.56%2029.90L13.86%2031.69L13.24%2027.63L9.14%2027.50L10.46%2023.62L6.90%2021.59L9.87%2018.77L7.66%2015.32L11.61%2014.21L11.25%2010.12L15.26%2010.97L16.84%207.18L20.00%209.80Z%22%20stroke-width%3D%22.8%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%229.4%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23B49552%22%20stroke-width%3D%22.9%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M13.6%2014.2Q12.4%2011.4%2015%2010.9%22%2F%3E%3Cpath%20d%3D%22M26.4%2014.2Q27.6%2011.4%2025%2010.9%22%2F%3E%3Cpath%20d%3D%22M15.4%2017.6L18.5%2018.6M24.6%2017.6L21.5%2018.6%22%2F%3E%3Cpath%20d%3D%22M17.6%2022.6L20%2024.9L22.4%2022.6Z%22%20fill%3D%22%23B49552%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M20%2024.9L20%2026.6M20%2026.6Q17.4%2028.7%2015.8%2026.3M20%2026.6Q22.6%2028.7%2024.2%2026.3%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --precs-canvas-escala: 88px; } /* (1.1.58) A FLOR DE CEREJEIRA E A ONDA, do quadro que o Pedro mandou em 04/09/2026. DUAS COISAS QUE A MEDICAO CORRIGIU: · A primeira flor tinha DEZ petalas em vez de cinco. O entalhe em V na ponta — que e justamente o que distingue sakura de margarida — estava fundo demais e as petalas largas demais, entao cada petala lia como duas pontas e a flor virava crisantemo. Petala estreitada (meia-largura de 4,8 para 2,05) e entalhe raso: com 28 graus de petala e 44 de vao, as cinco se separam. · A petala e desenhada UMA vez em e reusada por . Repetir o path nas cinco copias de cada uma das cinco flores custava 6,1 kB por textura, tres vezes a maior do catalogo; com o sao 1,97 kB, na faixa das outras. ESTA E A UNICA TEXTURA DE DUAS CORES do catalogo, e a razao esta na foto: o que faz aquela imagem sao as flores palidas SOBRE a copa vermelha, com a agua embaixo. Continua uma onda so por ladrilho — com duas ela virava listra horizontal. (1.1.58, segunda volta) A ONDA SUBIU DE .07 PARA .10, e a causa e a inversao da pagina. Enquanto o fundo era jade, a onda era jade sobre jade e .07 bastava para se ver. Sobre o carmim (#2A0C16) ela e quase complementar do fundo, entao .07 rendia #301A21 — diferenca que so existe na conta. Com .10 da #322026, e o verde aparece. A flor fica onde estava (.10 e .085): ela GANHOU contraste com a troca, porque rosa palido sobre vermelho escuro separa mais do que sobre verde escuro. */ html[data-theme="sakura"], .precs-tema-maquete[data-tema="sakura"], html:root[data-canvas="sakura"], .precs-fundo-mini[data-canvas="sakura"]{ --precs-canvas-textura: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2296%22%20height%3D%2296%22%20viewBox%3D%220%200%2096%2096%22%3E%3Cdefs%3E%3Cpath%20id%3D%22p%22%20d%3D%22M0%200C-4.28%20-2.1%20-5.96%20-5.6%20-4%20-8.7L0%20-7.9L4%20-8.7C5.96%20-5.6%204.28%20-2.1%200%200Z%22%2F%3E%3Cg%20id%3D%22f%22%3E%3Cuse%20href%3D%22%23p%22%20transform%3D%22rotate(0)%22%2F%3E%3Cuse%20href%3D%22%23p%22%20transform%3D%22rotate(72)%22%2F%3E%3Cuse%20href%3D%22%23p%22%20transform%3D%22rotate(144)%22%2F%3E%3Cuse%20href%3D%22%23p%22%20transform%3D%22rotate(216)%22%2F%3E%3Cuse%20href%3D%22%23p%22%20transform%3D%22rotate(288)%22%2F%3E%3Ccircle%20r%3D%221.5%22%2F%3E%3C%2Fg%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22%23F2A6C6%22%20opacity%3D%22.10%22%3E%3Cuse%20href%3D%22%23f%22%20transform%3D%22translate(48%2048)%20scale(1.231)%20rotate(0)%22%2F%3E%3Cuse%20href%3D%22%23f%22%20transform%3D%22translate(0%200)%20scale(0.923)%20rotate(36)%22%2F%3E%3Cuse%20href%3D%22%23f%22%20transform%3D%22translate(96%200)%20scale(0.923)%20rotate(36)%22%2F%3E%3Cuse%20href%3D%22%23f%22%20transform%3D%22translate(0%2096)%20scale(0.923)%20rotate(36)%22%2F%3E%3Cuse%20href%3D%22%23f%22%20transform%3D%22translate(96%2096)%20scale(0.923)%20rotate(36)%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23F2A6C6%22%20opacity%3D%22.085%22%3E%3Cuse%20href%3D%22%23p%22%20transform%3D%22translate(20.2%2070.1)%20rotate(24)%20scale(0.857)%22%2F%3E%3Cuse%20href%3D%22%23p%22%20transform%3D%22translate(75.8%2025.9)%20rotate(-142)%20scale(0.857)%22%2F%3E%3Cuse%20href%3D%22%23p%22%20transform%3D%22translate(73.0%2072.0)%20rotate(74)%20scale(0.762)%22%2F%3E%3Cuse%20href%3D%22%23p%22%20transform%3D%22translate(22.1%2024.0)%20rotate(-58)%20scale(0.762)%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%237FD4B4%22%20stroke-width%3D%22.9%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.10%22%3E%3Cpath%20d%3D%22M0%2076.8Q24.0%2072.5%2048%2076.8T96%2076.8%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --precs-canvas-escala: 96px; } html[data-theme="contraste"], .precs-tema-maquete[data-tema="contraste"] { --precs-canvas-textura: none; --precs-canvas-escala: 64px; } /* A FAMÍLIA CLARA. A ordem importa pela mesma razão do `--panel-fio`: o geral primeiro, os temas específicos depois, porque a especificidade empata em (0,2,0). As opacidades sobem um pouco no claro: fio escuro sobre fundo claro perde mais para o antialiasing do que fio claro sobre fundo escuro — a mesma lição que o papel Timbrado deu quando ele sumiu em .05 e precisou de .11. */ html[data-luz="claro"], .precs-tema-maquete[data-luz="claro"] { --precs-canvas-textura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23B49552' stroke-width='.85' opacity='.11'%3E%3Cpath d='M32 6L58 32L32 58L6 32Z'/%3E%3Cpath d='M0 -26L26 0L0 26L-26 0Z'/%3E%3Cpath d='M64 -26L90 0L64 26L38 0Z'/%3E%3Cpath d='M0 38L26 64L0 90L-26 64Z'/%3E%3Cpath d='M64 38L90 64L64 90L38 64Z'/%3E%3C/g%3E%3Cg fill='%23B49552' opacity='.15'%3E%3Cpath transform='translate(32 32) scale(.42)' d='M0 -9 C1.4 -2.6 2.6 -1.4 9 0 C2.6 1.4 1.4 2.6 0 9 C-1.4 2.6 -2.6 1.4 -9 0 C-2.6 -1.4 -1.4 -2.6 0 -9 Z'/%3E%3Cpath transform='translate(0 0) scale(.42)' d='M0 -9 C1.4 -2.6 2.6 -1.4 9 0 C2.6 1.4 1.4 2.6 0 9 C-1.4 2.6 -2.6 1.4 -9 0 C-2.6 -1.4 -1.4 -2.6 0 -9 Z'/%3E%3Cpath transform='translate(64 0) scale(.42)' d='M0 -9 C1.4 -2.6 2.6 -1.4 9 0 C2.6 1.4 1.4 2.6 0 9 C-1.4 2.6 -2.6 1.4 -9 0 C-2.6 -1.4 -1.4 -2.6 0 -9 Z'/%3E%3Cpath transform='translate(0 64) scale(.42)' d='M0 -9 C1.4 -2.6 2.6 -1.4 9 0 C2.6 1.4 1.4 2.6 0 9 C-1.4 2.6 -2.6 1.4 -9 0 C-2.6 -1.4 -1.4 -2.6 0 -9 Z'/%3E%3Cpath transform='translate(64 64) scale(.42)' d='M0 -9 C1.4 -2.6 2.6 -1.4 9 0 C2.6 1.4 1.4 2.6 0 9 C-1.4 2.6 -2.6 1.4 -9 0 C-2.6 -1.4 -1.4 -2.6 0 -9 Z'/%3E%3C/g%3E%3C/svg%3E"); --precs-canvas-escala: 64px; } html[data-luz="claro"][data-claro="classico"], .precs-tema-maquete[data-luz="claro"][data-claro="classico"] { --precs-canvas-textura: none; --precs-canvas-escala: 64px; } /* (1.1.45) O Contraste claro declara `none` pelo mesmo motivo que o Contraste escuro: um tema de acessibilidade não pediu desenho atrás de nada. Ele precisa vir DEPOIS do grupo `[data-luz="claro"]` acima, senão herdaria a treliça com as estrelas da marca — a especificidade empata em (0,2,0) e quem ganha é o último. */ html[data-theme="contraste-claro"], .precs-tema-maquete[data-tema="contraste-claro"] { --precs-canvas-textura: none; --precs-canvas-escala: 64px; } /* O claro sobe junto, mantendo o degrau que ele já tinha sobre o escuro: .13 / .11 / .155. O vinho como fio sobre superfície rosada é o par de menor contraste da assinatura, então é aqui que o ganho de presença mais se nota. */ html[data-theme="bordo-claro"], .precs-tema-maquete[data-tema="bordo-claro"] { --precs-canvas-textura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23782326' stroke-width='.9' opacity='.13'%3E%3Ccircle cx='0' cy='0' r='42.4'/%3E%3Ccircle cx='60' cy='0' r='42.4'/%3E%3Ccircle cx='120' cy='0' r='42.4'/%3E%3Ccircle cx='0' cy='60' r='42.4'/%3E%3Ccircle cx='60' cy='60' r='42.4'/%3E%3Ccircle cx='120' cy='60' r='42.4'/%3E%3Ccircle cx='0' cy='120' r='42.4'/%3E%3Ccircle cx='60' cy='120' r='42.4'/%3E%3Ccircle cx='120' cy='120' r='42.4'/%3E%3C/g%3E%3Cg fill='none' stroke='%23782326' stroke-width='.75' opacity='.11'%3E%3Ccircle cx='30' cy='30' r='9'/%3E%3Ccircle cx='90' cy='30' r='9'/%3E%3Ccircle cx='30' cy='90' r='9'/%3E%3Ccircle cx='90' cy='90' r='9'/%3E%3C/g%3E%3Cg fill='%23782326' opacity='.155'%3E%3Ccircle cx='0' cy='0' r='1.8'/%3E%3Ccircle cx='60' cy='0' r='1.8'/%3E%3Ccircle cx='120' cy='0' r='1.8'/%3E%3Ccircle cx='0' cy='60' r='1.8'/%3E%3Ccircle cx='60' cy='60' r='1.8'/%3E%3Ccircle cx='120' cy='60' r='1.8'/%3E%3Ccircle cx='0' cy='120' r='1.8'/%3E%3Ccircle cx='60' cy='120' r='1.8'/%3E%3Ccircle cx='120' cy='120' r='1.8'/%3E%3C/g%3E%3C/svg%3E"); --precs-canvas-escala: 120px; } /* A listra do claro é o mesmo desenho com a tinta trocada, e um degrau mais forte pelo motivo já escrito no grupo: tinta escura sobre fundo claro perde mais para o antialiasing do que tinta clara sobre fundo escuro. */ html[data-theme="zebrado-claro"], .precs-tema-maquete[data-tema="zebrado-claro"] { --precs-canvas-textura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Crect x='0' y='0' width='24' height='48' fill='%23101010' opacity='.055'/%3E%3C/svg%3E"); --precs-canvas-escala: 48px; } /* A faceta do claro, com o azul do tema no lugar do ouro e as opacidades um degrau acima, como todos os pares claros deste arquivo fazem: fio escuro sobre fundo claro perde mais para o brilho do monitor do que fio dourado sobre fundo escuro. */ html[data-theme="topazio-claro"], .precs-tema-maquete[data-tema="topazio-claro"] { --precs-canvas-textura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='84' viewBox='0 0 56 84'%3E%3Cg fill='none' stroke='%236E5411' stroke-width='.85' opacity='.12'%3E%3Cpath d='M28 6L50 42L28 78L6 42Z'/%3E%3Cpath d='M28 6L28 78M6 42L50 42'/%3E%3Cpath d='M0 0L6 42L0 84M56 0L50 42L56 84'/%3E%3C/g%3E%3Cg fill='%236E5411' opacity='.145'%3E%3Ccircle cx='28' cy='42' r='1.6'/%3E%3Ccircle cx='0' cy='0' r='1.6'/%3E%3Ccircle cx='56' cy='0' r='1.6'/%3E%3Ccircle cx='0' cy='84' r='1.6'/%3E%3Ccircle cx='56' cy='84' r='1.6'/%3E%3C/g%3E%3C/svg%3E"); --precs-canvas-escala: 56px; } html[data-theme="ametista-claro"], .precs-tema-maquete[data-tema="ametista-claro"] { --precs-canvas-textura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%234E2585' stroke-width='.85' opacity='.12'%3E%3Cpath d='M15 45L30 15L45 45Z'/%3E%3Cpath d='M0 60L15 30L30 60Z'/%3E%3Cpath d='M30 60L45 30L60 60Z'/%3E%3Cpath d='M0 30L15 0L30 30Z'/%3E%3Cpath d='M30 30L45 0L60 30Z'/%3E%3C/g%3E%3Cg fill='%234E2585' opacity='.145'%3E%3Ccircle cx='30' cy='15' r='1.5'/%3E%3Ccircle cx='0' cy='45' r='1.5'/%3E%3Ccircle cx='60' cy='45' r='1.5'/%3E%3C/g%3E%3C/svg%3E"); --precs-canvas-escala: 60px; } html[data-theme="saphira-claro"], .precs-tema-maquete[data-tema="saphira-claro"] { --precs-canvas-textura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%2317356F' stroke-width='.85' opacity='.115'%3E%3Cpath d='M36 6L66 36L36 66L6 36Z'/%3E%3Cpath d='M36 20L52 36L36 52L20 36Z'/%3E%3Cpath d='M0 0L6 36L0 72M72 0L66 36L72 72'/%3E%3C/g%3E%3Cg fill='%2317356F' opacity='.135'%3E%3Ccircle cx='36' cy='36' r='1.7'/%3E%3Ccircle cx='0' cy='0' r='1.7'/%3E%3Ccircle cx='72' cy='0' r='1.7'/%3E%3Ccircle cx='0' cy='72' r='1.7'/%3E%3Ccircle cx='72' cy='72' r='1.7'/%3E%3C/g%3E%3C/svg%3E"); --precs-canvas-escala: 72px; } /* (1.1.55) ESTE BLOCO PRECISA FICAR DEPOIS DO `html[data-luz="claro"]`, e a primeira versao dele nao ficava — estava colado no par escuro, umas 30 linhas acima. Os dois seletores empatam em especificidade (0,2,0), entao quem decide e a ORDEM, e o resultado era o Rubi claro exibindo o LOSANGO da familia clara no lugar da listra. Nenhum teste pegou: o `teste-temas.js` cobra que o token seja DECLARADO, nao que ele VENCA a cascata, e a textura nao entra em conta de contraste nenhuma (todo painel tem fundo opaco, entao o desenho nunca passa por baixo de texto). Quem pegou foi o print. E a mesma armadilha que o plano do Saphira ja tinha escrito por antecipacao. */ /* A listra do claro, com a tinta preta e o mesmo degrau a mais que todos os pares claros deste arquivo levam. */ html[data-theme="rubi-claro"], .precs-tema-maquete[data-tema="rubi-claro"] { --precs-canvas-textura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Crect x='0' y='0' width='24' height='48' fill='%23000000' opacity='.085'/%3E%3C/svg%3E"); --precs-canvas-escala: 48px; } /* (1.1.58) OS DOIS PARES CLAROS NOVOS, e eles ficam AQUI EMBAIXO pelo motivo que o bloco do Rubi claro registrou acima: `html[data-luz="claro"]` e `html[data-theme="…-claro"]` empatam em (0,2,0), quem decide e a ordem, e um bloco colado no par escuro faria o tema claro exibir o losango da familia em vez do desenho proprio. O `teste-textura-tema.js` (1.1.57) agora pega isso, mas o lugar certo continua sendo aqui. No Leao claro a tinta e o bronze do tema. (1.1.66) O SAKURA CLARO DEIXOU DE INVERTER OS PAPEIS, e esta e a unica excecao da familia. Ate aqui ele seguia a regra do Zebrado e do Rubi: no claro as duas cores trocam de papel, entao a flor virava jade e a onda virava rosa. Decisao do Pedro em 10/09/2026, e o motivo e que a regra nao se aplica igual aos tres: a listra do Zebrado e a do Rubi nao tem cor PROPRIA no mundo, entao inverter e so trocar dois tons abstratos. Flor de cerejeira tem: ela e rosa. Uma flor de cerejeira jade nao le como flor de cerejeira, e no claro o #0F5B48 a .115 sobre o rosa #F1DDE7 saia como um asterisco cinza-esverdeado. Agora os dois Sakura dizem a mesma coisa: flor rosa, agua jade. No claro o rosa e o #A81D45 (o carmim da propria paleta clara, que e quem se ve sobre fundo rosa palido) e o jade e o #0F5B48 -- ou seja, os dois hex apenas trocaram de lugar entre si. */ html[data-theme="leao-claro"], .precs-tema-maquete[data-tema="leao-claro"] { --precs-canvas-textura: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2288%22%20height%3D%2288%22%20viewBox%3D%220%200%2088%2088%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%236A5219%22%20stroke-width%3D%22.85%22%20opacity%3D%22.095%22%3E%3Cpath%20d%3D%22M0%20-44L44%200L0%2044L-44%200Z%22%2F%3E%3Cpath%20d%3D%22M88%20-44L132%200L88%2044L44%200Z%22%2F%3E%3Cpath%20d%3D%22M0%2044L44%2088L0%20132L-44%2088Z%22%2F%3E%3Cpath%20d%3D%22M88%2044L132%2088L88%20132L44%2088Z%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%236A5219%22%20opacity%3D%22.13%22%3E%3Cpath%20transform%3D%22translate(0%200)%20scale(.42)%22%20d%3D%22M0%20-9%20C1.4%20-2.6%202.6%20-1.4%209%200%20C2.6%201.4%201.4%202.6%200%209%20C-1.4%202.6%20-2.6%201.4%20-9%200%20C-2.6%20-1.4%20-1.4%20-2.6%200%20-9%20Z%22%2F%3E%3Cpath%20transform%3D%22translate(88%200)%20scale(.42)%22%20d%3D%22M0%20-9%20C1.4%20-2.6%202.6%20-1.4%209%200%20C2.6%201.4%201.4%202.6%200%209%20C-1.4%202.6%20-2.6%201.4%20-9%200%20C-2.6%20-1.4%20-1.4%20-2.6%200%20-9%20Z%22%2F%3E%3Cpath%20transform%3D%22translate(0%2088)%20scale(.42)%22%20d%3D%22M0%20-9%20C1.4%20-2.6%202.6%20-1.4%209%200%20C2.6%201.4%201.4%202.6%200%209%20C-1.4%202.6%20-2.6%201.4%20-9%200%20C-2.6%20-1.4%20-1.4%20-2.6%200%20-9%20Z%22%2F%3E%3Cpath%20transform%3D%22translate(88%2088)%20scale(.42)%22%20d%3D%22M0%20-9%20C1.4%20-2.6%202.6%20-1.4%209%200%20C2.6%201.4%201.4%202.6%200%209%20C-1.4%202.6%20-2.6%201.4%20-9%200%20C-2.6%20-1.4%20-1.4%20-2.6%200%20-9%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%22.105%22%20transform%3D%22translate(44%2044)%20scale(1.3640)%20translate(-20%20-20)%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%236A5219%22%20stroke-width%3D%22.95%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.00%200.60L23.25%206.80L29.02%202.82L29.02%209.82L35.97%208.98L32.72%2015.18L39.26%2017.66L33.50%2021.64L38.14%2026.88L31.19%2027.73L32.86%2034.52L26.32%2032.04L24.64%2038.84L20.00%2033.60L15.36%2038.84L13.68%2032.04L7.14%2034.52L8.81%2027.73L1.86%2026.88L6.50%2021.64L0.74%2017.66L7.28%2015.18L4.03%208.98L10.98%209.82L10.98%202.82L16.75%206.80Z%22%2F%3E%3Cpath%20d%3D%22M23.16%207.18L24.74%2010.97L28.75%2010.12L28.39%2014.21L32.34%2015.32L30.13%2018.77L33.10%2021.59L29.54%2023.62L30.86%2027.50L26.76%2027.64L26.13%2031.69L22.44%2029.90L20.00%2033.20L17.56%2029.90L13.86%2031.69L13.24%2027.63L9.14%2027.50L10.46%2023.62L6.90%2021.59L9.87%2018.77L7.66%2015.32L11.61%2014.21L11.25%2010.12L15.26%2010.97L16.84%207.18L20.00%209.80Z%22%20stroke-width%3D%22.8%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%229.4%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%236A5219%22%20stroke-width%3D%22.9%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M13.6%2014.2Q12.4%2011.4%2015%2010.9%22%2F%3E%3Cpath%20d%3D%22M26.4%2014.2Q27.6%2011.4%2025%2010.9%22%2F%3E%3Cpath%20d%3D%22M15.4%2017.6L18.5%2018.6M24.6%2017.6L21.5%2018.6%22%2F%3E%3Cpath%20d%3D%22M17.6%2022.6L20%2024.9L22.4%2022.6Z%22%20fill%3D%22%236A5219%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M20%2024.9L20%2026.6M20%2026.6Q17.4%2028.7%2015.8%2026.3M20%2026.6Q22.6%2028.7%2024.2%2026.3%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --precs-canvas-escala: 88px; } html[data-theme="sakura-claro"], .precs-tema-maquete[data-tema="sakura-claro"] { --precs-canvas-textura: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2296%22%20height%3D%2296%22%20viewBox%3D%220%200%2096%2096%22%3E%3Cdefs%3E%3Cpath%20id%3D%22p%22%20d%3D%22M0%200C-4.28%20-2.1%20-5.96%20-5.6%20-4%20-8.7L0%20-7.9L4%20-8.7C5.96%20-5.6%204.28%20-2.1%200%200Z%22%2F%3E%3Cg%20id%3D%22f%22%3E%3Cuse%20href%3D%22%23p%22%20transform%3D%22rotate(0)%22%2F%3E%3Cuse%20href%3D%22%23p%22%20transform%3D%22rotate(72)%22%2F%3E%3Cuse%20href%3D%22%23p%22%20transform%3D%22rotate(144)%22%2F%3E%3Cuse%20href%3D%22%23p%22%20transform%3D%22rotate(216)%22%2F%3E%3Cuse%20href%3D%22%23p%22%20transform%3D%22rotate(288)%22%2F%3E%3Ccircle%20r%3D%221.5%22%2F%3E%3C%2Fg%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22%23A81D45%22%20opacity%3D%22.115%22%3E%3Cuse%20href%3D%22%23f%22%20transform%3D%22translate(48%2048)%20scale(1.231)%20rotate(0)%22%2F%3E%3Cuse%20href%3D%22%23f%22%20transform%3D%22translate(0%200)%20scale(0.923)%20rotate(36)%22%2F%3E%3Cuse%20href%3D%22%23f%22%20transform%3D%22translate(96%200)%20scale(0.923)%20rotate(36)%22%2F%3E%3Cuse%20href%3D%22%23f%22%20transform%3D%22translate(0%2096)%20scale(0.923)%20rotate(36)%22%2F%3E%3Cuse%20href%3D%22%23f%22%20transform%3D%22translate(96%2096)%20scale(0.923)%20rotate(36)%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23A81D45%22%20opacity%3D%22.10%22%3E%3Cuse%20href%3D%22%23p%22%20transform%3D%22translate(20.2%2070.1)%20rotate(24)%20scale(0.857)%22%2F%3E%3Cuse%20href%3D%22%23p%22%20transform%3D%22translate(75.8%2025.9)%20rotate(-142)%20scale(0.857)%22%2F%3E%3Cuse%20href%3D%22%23p%22%20transform%3D%22translate(73.0%2072.0)%20rotate(74)%20scale(0.762)%22%2F%3E%3Cuse%20href%3D%22%23p%22%20transform%3D%22translate(22.1%2024.0)%20rotate(-58)%20scale(0.762)%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%230F5B48%22%20stroke-width%3D%22.9%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.085%22%3E%3Cpath%20d%3D%22M0%2076.8Q24.0%2072.5%2048%2076.8T96%2076.8%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --precs-canvas-escala: 96px; } /* (1.1.43) O `color` da cabeça saiu daqui e virou `--panel-cabeca-tinta` no grupo de tokens do claro, mais acima. Mesma cor na tela, e agora o tema que quiser trocar a tinta da cabeça (o Zebrado claro troca) mexe num token em vez de numa regra de componente. */ html[data-luz="claro"] .form-group input:focus { box-shadow: 0 0 0 3px var(--precs-gold-light); border-color: var(--precs-gold); } /* O OURO COMO FORMA. Espelha o que o tema precs já faz (ver as regras html[data-theme="precs"] .panel e .panel-header no topo do arquivo), com uma diferença de calibragem: sobre fundo claro o mesmo ouro a 0,12 de alpha desaparece, então o contorno vai a 0,30 e o divisor a 0,22. O literal rgba(180,149,82,...) é o ouro #B49552 e é escrito assim, e não como var(), porque aqui ele NÃO é o --precs-gold do tema (que é bronze): é a cor da marca entrando só como forma. */ html[data-luz="claro"] .panel { border: 1px solid var(--panel-fio); } html[data-luz="claro"] .panel-header { border-bottom: 1px solid rgba(180,149,82,0.22); } /* ============================================================ */ /* PRECS (1.1.4) — TEMA CLARO, BRILHO SUAVE */ /* ============================================================ */ /* POR QUE ISTO EXISTE O tema claro é calibrado em monitor com brilho e gama bem ajustados, e nesses ele fica ótimo. Em monitor de fábrica — brilho alto, contraste baixo — o branco puro do --bg-secondary (#FFFFFF) estoura e engole a borda de #E1E5EB: os cards perdem o contorno e a tela vira uma mancha branca. Aconteceu em duas estações da operação. O que NÃO serve como resposta: mexer no tema claro (há quem o use exatamente como está) nem no monitor (a preferência tem de acompanhar o operador, que troca de estação). Então isto é um AJUSTE POR OPERADOR, guardado no mesmo perfil por ramal do tema e do tamanho do painel: quem precisa liga o suave e o leva consigo. POR QUE É ATRIBUTO SEPARADO, E NÃO UM 5º TEMA O claro é representado pela AUSÊNCIA de data-theme, e há uma dúzia de regras escopadas em `html[data-luz="claro"]` (ouro da marca, foco dos campos, força do tint, color-scheme). Um data-theme="suave" deixaria todas de fora e o suave nasceria sem o ouro escuro do claro. Com data-claro à parte, o claro continua sendo o claro e este bloco só reveste os tokens de superfície. O QUE MUDA, E POR QUE ESTES VALORES • superfícies saem do branco puro para off-white azulado (o mesmo tom frio da paleta), o que corta o estouro sem "sujar" a tela; • --border-color escurece de #E1E5EB para #BCC5D3, que é o item da reclamação — é a borda que precisa aparecer, não o fundo que precisa mudar de cor; • --lead-label e --lead-muted PRECISAVAM escurecer: nos valores do claro os dois dão 4,08:1 sobre a nova superfície, ou seja, reprovam AA — e são os rótulos dos campos do negócio, que o operador lê com o cliente na linha. --text-muted não reprovava (ficaria em 4,76:1), e escureceu de propósito: o modo existe para quem enxerga pouco contraste no monitor, então 4,76 é margem fina demais para deixar como está. Medidas do modo, contra o pior fundo dele (--bg-primary #E8ECF2): text-primary #373753 -> 9,66:1 · text-secondary #4B5563 -> 6,37:1 text-muted #575F6C -> 5,44:1 lead-label #5C6672 -> 4,92:1 · lead-muted #5C636F -> 5,11:1 • --bg-tertiary desce pouco (#ECEFF4): é o fundo dos chips de métrica, e os seis tokens --m-* são medidos contra ele — a essa altura o pior deles (--m-atendidas) fica em 4,71:1, ainda acima de AA. Descer mais reprovaria dois deles. • o ouro escurece de #856828 para #6E5520 (o antigo dá 4,42:1 sobre a nova superfície, e é a cor de TODOS os rótulos dourados do claro), e --m-falado o acompanha (6,11:1) para os rótulos dourados e o número da métrica "Falado" não ficarem em dois ouros diferentes na mesma tela. O teste .github/scripts/teste-contraste.js roda o claro+suave como se fosse um 5º tema: mexer em qualquer valor daqui sem refazer a conta quebra o CI. */ /* ============================================================ */ /* PRECS (1.1.6) — TEMA CLARO, VARIAÇÃO "CLÁSSICO" */ /* ============================================================ */ /* POR QUE ISTO EXISTE O tema claro virou PRECS Claro na 1.1.6: superfícies quentes, dourado da marca no contorno, bronze na letra. A troca resolveu a falta de identidade do claro, mas ela TROCOU o tema de quem já gostava do anterior — e havia gente nessa situação, com nome e ramal: a Ana Carolina (1002) usava o claro antigo e gostava dele como estava. Trocar por baixo de quem estava satisfeito é regressão, mesmo que o novo seja melhor na média. Então o claro antigo continua existindo, como VARIAÇÃO, para quem pedir. O QUE ELE É: a paleta que valia até a 1.1.5, restaurada valor por valor — superfícies azuladas da 3C Plus, texto #373753, ouro escurecido #856828, tokens da lead frios e sombra roxo-azulada. Não é uma aproximação; são os mesmos hex de antes. POR QUE NO EIXO data-claro, E NÃO COMO 4º TEMA Mesmo argumento que já valia para o "suave": o claro é a AUSÊNCIA de data-theme, e há uma dúzia de regras escopadas no claro (ouro, foco dos campos, força do tint, color-scheme). Um data-theme="classico" ficaria fora de todas elas e nasceria sem metade do que define o claro. Como variação, ele herda tudo e só reveste os tokens. Consequência conhecida e aceita: "Clássico" e "Suave" são mutuamente exclusivos, então não existe clássico+suave. Ninguém pediu a combinação (o suave nasceu para duas estações de monitor estourado, o clássico é preferência de outra pessoa). Se um dia precisar, o bloco a acrescentar é html[data-luz="claro"][data-claro="classico-suave"] com os valores azulados do suave antigo, que estão no histórico do git desta versão. QUEM VÊ O BOTÃO Só ramal desbloqueado no operadores.json ("desbloqueios": ["claro-classico"]). O VALOR salvo, porém, é aplicado sempre, para quem já escolheu não depender do roster ter carregado — ver o comentário em precsDesbloqueado(). */ html[data-luz="claro"][data-claro="classico"] { --bg-primary: #F9FAFC; --bg-secondary: #FFFFFF; --bg-tertiary: #F0F2F5; --border-color: #E1E5EB; --text-primary: #373753; --text-secondary: #4B5563; --text-muted: #5F6875; --precs-gold: #856828; --precs-gold-soft:#A6842F; /* A ÚNICA divergência proposital em relação ao claro antigo, e ela é correção de bug. O valor de antes era #8A6D2C, e ele REPROVAVA AA: 4,35:1 contra --bg-tertiary (#F0F2F5). Passou anos sem ninguém ver porque o ouro não estava na lista de pares do teste-contraste.js — entrou na 1.1.6, e a primeira coisa que o teste fez foi acusar isto. O comentário antigo afirmava "4,72:1", que é a conta contra o BRANCO (--bg-secondary); contra o terciário, que é o pior fundo e o que o teste usa, dá 4,35. Igualado a --precs-gold (#856828, 4,67:1), que é o ouro que o tema já usa em todos os rótulos: a olho nu é o mesmo bronze, e agora passa. (1.1.43) E DESCEU OUTRO DEGRAU, para #7A6320. Os 4,67:1 do #856828 são medidos contra a superfície SECA, e o botão de modo TV lava o fundo dele com `--precs-gold-light` no hover: sobre o fundo lavado o par caía para 4,3:1, abaixo de AA, num botão que a supervisão usa todo dia. Quem acusou foi a sonda nova da cabeça do card. É a MESMA lição que o tema claro principal já pagou em 10/08 — esquentar ou lavar a superfície CUSTA contraste, e o ouro tem que pagar a diferença —, e #7A6320 é exatamente o valor que ele adotou por esse motivo. A olho nu segue o mesmo bronze. Só o `-title` desce: `--precs-gold` continua sendo FORMA (fio, borda, ícone) e a régua de 4,5:1 não vale para forma. */ --precs-gold-title:#7A6320; --precs-gold-hi:#B4913F; --precs-gold-light: rgba(133,104,40,0.12); --m-falado: #856828; --m-duracao: #5F6875; /* seguia --text-muted, como no claro de antes */ /* (1.1.42) OS NEUTROS DO ESTADO, por tema. `--st-idle` e `--st-offline` são os únicos dois do conjunto que PODEM mudar de cor por tema, e a razão é que eles não significam nada além de "sem atividade": não há vocabulário para o operador reaprender. Os outros cinco (manual, em chamada, TPA, TPA manual, intervalo) continuam idênticos em todos os temas — é o que o `teste-temas.js` cobra, matiz por matiz. Os quatro temas claros caíam no `:root`, que traz um cinza AZULADO. Sobre superfície quente ou rosada isso lê como mancha fria, e era mais um motivo de os claros parecerem o mesmo tema. */ /* Aqui os valores são os MESMOS do `:root`, e de propósito: o cinza azulado nasceu para este fundo frio (#F0F2F5). Estão escritos para o tema fechar o conjunto. */ --st-idle: #8E99A8; --st-offline: #B4BAC4; /* (1.1.42) As outras quatro métricas, que ficavam no `:root`. Os valores são os mesmos de lá: o terciário deste tema (#F0F2F5) é MAIS CLARO que o do claro quente contra o qual eles foram calibrados, então a conta só melhora. Estão aqui para o tema declarar o conjunto inteiro, que é o que impede o próximo tema de nascer devendo. */ --m-ligacoes: #A34B00; --m-atendidas: #0F7A3D; --m-taxa: #6D28D9; --m-cpc: #1D4ED8; /* (1.1.42) O PAR OURO-FORMA / TINTA e o AZUL DE AÇÃO, declarados. Os valores são os mesmos que este tema já herdava do `:root`, então nada muda na tela — o que muda é o contrato. Um tema que não decide o valor está aceitando o de outro sem saber, e foi assim que o Bordô ficou com anel dourado em volta de letra vinho. Ver `teste-temas.js`. */ --precs-gold-forma: #B49552; --precs-wa-tinta-ouro: #131315; --accent-blue: #294ace; --accent-blue-hover: #1e3a9f; --lead-surface: #FFFFFF; --lead-surface-2: #F7F9FA; --lead-border: #E1E5EB; --lead-border-2: #E8EDF0; --lead-title: #1F2D3D; --lead-text: #26384A; --lead-label: #68737E; --lead-muted: #6B7280; --shadow: 0 4px 12px rgba(55, 55, 83, 0.08); --shadow-lg: 0 8px 24px rgba(55, 55, 83, 0.12); } /* O fio dourado no contorno do painel é da 1.1.6 e NÃO existia no claro antigo. Sem estas duas linhas o "clássico" sairia com a borda dourada nova, que é justamente a mudança mais visível — ou seja, não seria o tema que a pessoa pediu de volta. */ html[data-luz="claro"][data-claro="classico"] .panel { border-color: var(--panel-fio); } html[data-luz="claro"][data-claro="classico"] .panel-header { border-bottom-color: var(--border-color); } html[data-luz="claro"][data-claro="suave"] { /* (1.1.6) Esquentado junto com o PRECS Claro. Os valores azulados de antes ficariam em contraste direto com o claro normal quente, e o suave existe para ser o MESMO tema com menos estouro, não um tema à parte. Medidas contra o pior fundo do modo: text-primary #241F19 -> 12,17:1 · text-secondary #4A453E -> 7,07:1 text-muted #5C564C -> 5,41:1 · gold (texto) #6E5520 -> 5,24:1 lead-label #5C5649 -> 5,85:1 · lead-muted #5C564C -> 5,83:1 Os três tokens de texto entram aqui porque o modo é para quem enxerga pouco contraste no monitor: no claro normal eles já passam, e mesmo assim são reforçados. */ --bg-primary: #E9E6DF; --bg-secondary: #F5F3EE; --bg-tertiary: #E2DED5; --border-color: #C9C3B4; --text-primary: #241F19; --text-secondary: #4A453E; --text-muted: #5C564C; --precs-gold: #6E5520; --precs-gold-soft:#6E5520; --precs-gold-title:#6E5520; --precs-gold-hi:#7E6228; --precs-gold-light: rgba(110,85,32,0.14); --m-falado: #6E5520; --m-duracao: #5C564C; /* segue --text-muted, como no claro normal */ /* as outras quatro métricas descem um degrau: o terciário aqui é mais escuro que o do claro normal, e sem isso --m-atendidas ficaria em 4,03:1 */ --m-ligacoes: #8F4200; --m-atendidas: #0C6A34; --m-taxa: #5B21B6; --m-cpc: #1A44BE; /* (1.1.42) OS NEUTROS DO ESTADO, por tema. `--st-idle` e `--st-offline` são os únicos dois do conjunto que PODEM mudar de cor por tema, e a razão é que eles não significam nada além de "sem atividade": não há vocabulário para o operador reaprender. Os outros cinco (manual, em chamada, TPA, TPA manual, intervalo) continuam idênticos em todos os temas — é o que o `teste-temas.js` cobra, matiz por matiz. Os quatro temas claros caíam no `:root`, que traz um cinza AZULADO. Sobre superfície quente ou rosada isso lê como mancha fria, e era mais um motivo de os claros parecerem o mesmo tema. */ --st-idle: #8E8A80; --st-offline: #B6B1A5; /* (1.1.42) O PAR OURO-FORMA / TINTA e o AZUL DE AÇÃO, declarados. Os valores são os mesmos que este tema já herdava do `:root`, então nada muda na tela — o que muda é o contrato. Um tema que não decide o valor está aceitando o de outro sem saber, e foi assim que o Bordô ficou com anel dourado em volta de letra vinho. Ver `teste-temas.js`. */ --precs-gold-forma: #B49552; --precs-wa-tinta-ouro: #131315; --accent-blue: #294ace; --accent-blue-hover: #1e3a9f; --lead-surface: #F5F3EE; --lead-surface-2: #E9E6DF; --lead-border: #D3CCBB; --lead-border-2: #DCD6C6; --lead-title: #1E1A14; --lead-text: #282419; --lead-label: #5C5649; --lead-muted: #5C564C; /* sombra um pouco mais presente: com menos branco, é ela que separa card de fundo */ --shadow: 0 4px 12px rgba(42, 39, 34, 0.15); --shadow-lg: 0 8px 24px rgba(42, 39, 34, 0.20); } /* Não há regra de borda por componente aqui de propósito: .panel, .campaign-item, .pm-stat e companhia já desenham a borda com var(--border-color), então trocar o token no bloco acima acerta todos de uma vez. */ /* ====================================================================== (1.1.41) BORDÔ, em duas paletas: `data-theme="bordo"` (escura) e `data-theme="bordo-claro"`. Liberadas por ramal no operadores.json, pelo mesmo mecanismo do Clássico ("desbloqueios": ["tema-bordo"]). O OURO CONTINUA SENDO O OURO, e essa é a decisão que segura a identidade. O bordô é a SUPERFÍCIE (fundos, bordas, sombras); o acento de marca segue a regra da casa, que já vale nos outros temas: ouro nas formas em fundo escuro, e a variante escura de texto em fundo claro — aqui o próprio bordô, que é a única cor da paleta com contraste para ser texto. Trocar o ouro pelo bordô no tema escuro daria um painel inteiro sem a marca. As cores funcionais (verde, vermelho, âmbar, violeta do --st-* e da família --accent-*) ficam como estão nos dois, pela mesma razão de sempre: elas significam ESTADO, e estado não muda de cor porque a pessoa gosta de vinho. ====================================================================== */ /* ---- BORDÔ ESCURO. Mesma estrutura do tema PRECS, com as três superfícies e a borda puxadas para o vinho. (1.1.41 · 2ª volta) AS SUPERFÍCIES GANHARAM CROMA. A primeira versão saiu de um vinho muito dessaturado e o resultado lia como "cinza amarronzado", não como bordô — "o escuro temos muito que melhorar ainda" (Pedro, 31/08/2026). Os três fundos agora derivam do Pantone 1815 C (#7C2629), o vinho que ele escolheu, escurecido mantendo a saturação em vez de lavada. Medidos contra --bg-tertiary (#35191E), o pior fundo do tema: primário 17,9:1 · secundário 10,1:1 · muted 4,98:1. */ html[data-theme="bordo"] { --bg-primary: #1C0D10; --bg-secondary: #271216; --bg-tertiary: #35191E; --border-color: #4A2229; --text-primary: #F6EDEE; --text-secondary: #D2C0C3; --text-muted: #A08A8D; --precs-gold: #B49552; --precs-gold-soft: #D2AE52; --precs-gold-title: #D3B26B; --precs-gold-hi: #FFC95B; --precs-gold-light: rgba(180, 149, 82, 0.16); /* (1.1.42) O PAR OURO-FORMA / TINTA, que faltava e era o defeito mais visível do tema. O Bordô herdava `--precs-gold-forma` do `:root` sem nunca ter decidido nada — e como `:root` alcança todo mundo, nada quebrou e nada avisou: 67 superfícies do tema vinho continuavam douradas, inclusive o anel do próprio seletor de temas. Aqui o valor É o ouro, porque no Bordô ESCURO o acento de marca continua sendo ele (vinho sobre vinho seria invisível). A tinta acompanha a superfície do tema. */ --precs-gold-forma: #B49552; --precs-wa-tinta-ouro: #1C0D10; --accent-3cplus: #B49552; --accent-3cplus-dark: #D2AE52; --accent-blue: #C6A75E; --accent-blue-hover: #D2AE52; --accent-blue-light: rgba(180, 149, 82, 0.16); --accent-manual: #F59336; --accent-green: #2BD4A0; --accent-green-light: rgba(43, 212, 160, 0.16); --accent-red: #F26D6D; --accent-red-light: rgba(242, 109, 109, 0.16); --accent-orange: #F7A93B; --accent-orange-light: rgba(247, 169, 59, 0.16); --on-accent-blue: var(--on-accent-ink); --accent-green-text: var(--accent-green); --accent-red-text: var(--accent-red); --accent-manual-text: var(--accent-manual); --accent-orange-text: var(--accent-orange); --st-idle:#D2C0C3; --st-manual:#F59336; --st-call:#2BD4A0; --st-tpa:#5E6AD2; --st-mtpa:#A78BFA; --st-interval:#E8C46A; --st-offline:#6B3E46; --m-cpc:#8AA0E6; /* (1.1.54) O anel de luz dos escuros — o raciocínio inteiro está no `--shadow` do tema PRECS (`00-base.css:422`). Aqui ele é ROSADO e não branco: o vinho das superfícies tinge tudo o que passa por cima, e um branco puro na aresta lê como risco frio sobre um card que é quente em toda a volta. Mesma quantidade de luz, na temperatura do tema. */ --shadow: 0 0 0 1px rgba(255, 240, 242, 0.10), 0 10px 32px rgba(0, 0, 0, 0.62); --shadow-lg: 0 0 0 1px rgba(255, 240, 242, 0.10), 0 18px 48px rgba(0, 0, 0, 0.72); --lead-surface: #271216; --lead-surface-2: #1C0D10; --lead-border: #4A2229; --lead-border-2: #5A2B33; --lead-title: #F6EDEE; --lead-text: #F6EDEE; --lead-label: #B49552; --lead-muted: #A08A8D; } /* ---- BORDÔ CLARO, e ele é o CLARO SUAVE com o bege trocado por vinho. "no modo claro não mudou nada; tinha que ficar igual o Claro Suave de hoje, só que trocar o bege por bordô" (Pedro, 31/08/2026). Ele está certo, e a primeira versão errou o alvo: eu tinha partido do claro NORMAL e mexido só no acento, então o tema saía branco com um toque de rosa e nada mais. O Claro Suave é o certo para partir porque ele já resolveu o problema difícil: superfície com COR (não branco), medida para monitor de brilho alto, com os três tokens de texto reforçados. Trocar a família bege pela família vinho mantém tudo isso e muda só o tom. Ele NÃO redeclara o claro inteiro: `data-luz="claro"` já lhe dá as treze regras do claro e o `:root` dá o resto. Medidas contra --bg-tertiary (#E6DADB), o pior fundo do tema: primário 14,9:1 · secundário 7,4:1 · muted 5,6:1 · vinho como texto 7,03:1. */ html[data-theme="bordo-claro"] { /* (1.1.41 · 3ª volta) O TOM SUBIU. A volta anterior tingiu as superfícies de leve e o resultado, na tela, continuava lendo como branco quente: "no modo claro não mudou nada". O Claro Suave, que é o modelo, tem superfície com COR de verdade — é isso que faz dele um tema e não um ajuste de brilho. Aqui o rosa foi ao mesmo patamar. Medidas contra --bg-tertiary (#DFCBCE), o pior fundo: primário 13,0:1 · secundário 6,6:1 · muted 5,1:1 · vinho como texto 6,26:1. */ /* (1.1.54) O TOM SUBIU DE NOVO — quarta volta, e desta vez a medida foi de CROMA. RELATO DO PEDRO, 03/09/2026, ao ver o Saphira claro: "precisamos melhorar os temas do modo claro, não consigo perceber tanta diferença". A medição explicou o que as três voltas anteriores não tinham enxergado: a cor deste tema estava na PÁGINA e não no CARD. Em croma Lab, a página tinha 5,6 e o card 3,6 — e o card é a maior área da tela; a página fica quase toda coberta por ele. Um card com croma abaixo de 4 é um card branco, por mais tingida que seja a página atrás. Agora: página 11,3 · card 8,1 · terciário 13,9. A hierarquia de lightness continua a mesma (terciário 79 < página 86 < card 92), que é o que mantém chip e trilho abaixo da superfície que os contém. Os 29 pares do teste-contraste.js foram refeitos antes desta edição existir; o pior é o âmbar da métrica sobre o terciário, com 4,87:1 — e ele precisou descer de #8F4200 para #7E3A00, porque o terciário ficou mais escuro. */ /* (1.1.54, 2ª volta) O CARD VOLTOU A SER BRANCO, e a cor foi para a PÁGINA e para a CABEÇA do card. A volta anterior tingiu a superfície do card e errou o alvo. RELATO DO PEDRO, 03/09/2026: "agora os modos claros tão com mais cor deles do que claro, perdeu a essência do discador"; e, na tela de campanha ativa: "o chamada ativa tá tão azul que perdemos a essência do ocioso, em chamada, manual e TPA". ------------------------------------------------------------------------------ A SEGUNDA FRASE É A QUE MANDA, e ela não é de gosto. O card é onde o conteúdo mora, e é ali que as cinco cores de ESTADO precisam ser lidas de relance. Com a superfície do card tingida, a cor do tema somava com a vinheta do estado e com o próprio tint das pílulas: três camadas de cor disputando o mesmo pixel, e o operador deixando de distinguir ocioso de em-chamada — que é a informação mais cara da tela. A cor do tema fica onde ela não disputa: a PÁGINA (que aparece entre os cards) e a CABEÇA do card, que é exatamente o que o `--panel-cabeca` foi criado para ser — "o único lugar do card onde um tema pode pôr ÁREA de cor sem tocar em conteúdo". Medido: card L99 com croma perto de zero (é branco), página com croma 9 a 17, e a faixa da cabeça a 16% com croma 6 a 10 — presença de sobra, e zero conteúdo em cima. */ --bg-primary: #EBD3D7; --bg-secondary: #FDFAFB; /* (1.1.54, 3ª volta) O CHIP VOLTOU A SER UM DEGRAU SUAVE DO CARD, e não a superfície mais escura da tela. Com o card branco, um `--bg-tertiary` em L80 deixava de ser chip e virava bloco de cor — e é ele que pinta o fundo dos quatro cronômetros de estado e do termômetro, que são justamente onde o operador lê OCIOSO / MANUAL / EM CHAMADA / TPA. RELATO DO PEDRO, 03/09/2026: "os cards Ocioso / Manual / Em chamada / TPA têm que ser o padrão do tema claro, e o termômetro também; o resto dá para deixar azul". A régua é o tema claro da MARCA: card #FFFFFF, chip #EFEDE7 — L94, croma 3,1, um degrau de 1,17 até o card. Os quatro valores abaixo caem em cima disso (L93 a 95, croma 4 a 8). O `--bg-primary`, que é a PÁGINA, continua com a cor cheia do tema: chip e página vivem em contextos diferentes, e a relação que importa para o chip é com o card que o contém. */ --bg-tertiary: #F2E7E9; --border-color: #C09AA1; --text-primary: #221718; --text-secondary: #463A3C; --text-muted: #584A4C; /* O VINHO ENTRA NO LUGAR DO BRONZE do claro. Ele é escuro o bastante para ser texto (7,03:1 contra o pior fundo), que é justamente o que o ouro da marca não é — a regra medida de 10/08 continua valendo, e é ela que impede o #B49552 de vir para cá. O valor é o Pantone 1815 C, escolhido pelo Pedro em 31/08/2026. */ --precs-gold: #782326; --precs-gold-soft: #782326; --precs-gold-title: #782326; --precs-gold-hi: #942C31; --precs-gold-light: rgba(120, 35, 38, 0.14); /* Os dois acoplamentos que qualquer mexida no ouro do claro tem que acompanhar. */ --m-falado: #782326; --m-duracao: #584A4C; /* As outras quatro descem um degrau, como no Suave: o terciário aqui é mais escuro que o do claro normal, e sem isso --m-atendidas ficaria abaixo de AA. (3ª volta) E o verde desce MAIS UM: com o rosa no tom novo, o #0C6A34 do Suave dava 4,34:1. O teste cobrou, e a conta que ele faz é contra o pior fundo do tema — que mudou junto com a superfície. */ --m-ligacoes: #7E3A00; --m-atendidas: #08512A; --m-taxa: #57209E; --m-cpc: #173FAE; /* (1.1.42) OS NEUTROS DO ESTADO, por tema. `--st-idle` e `--st-offline` são os únicos dois do conjunto que PODEM mudar de cor por tema, e a razão é que eles não significam nada além de "sem atividade": não há vocabulário para o operador reaprender. Os outros cinco (manual, em chamada, TPA, TPA manual, intervalo) continuam idênticos em todos os temas — é o que o `teste-temas.js` cobra, matiz por matiz. Os quatro temas claros caíam no `:root`, que traz um cinza AZULADO. Sobre superfície quente ou rosada isso lê como mancha fria, e era mais um motivo de os claros parecerem o mesmo tema. */ --st-idle: #96787D; --st-offline: #BC9EA4; /* (1.1.42) AQUI ESTAVA O DEFEITO MAIS VISÍVEL DO TEMA, e ele era de omissão. `--precs-gold` já era o vinho, mas `--precs-gold-forma` (o acento como SUPERFÍCIE: botão de enviar do WhatsApp, balão próprio, anel do segmento ativo, outline de foco) nunca foi declarado e caía no ouro do `:root`. O tema saía com vinho na letra e ouro em volta — "o dourado permaneceu" (Pedro, 31/08/2026), e eram 67 superfícies. A tinta vem CLARA porque ela vai em cima do vinho; o par tem que virar junto, senão o botão de enviar fica vinho com texto quase preto. */ --precs-gold-forma: #782326; --precs-wa-tinta-ouro: #FAF5F6; /* O AZUL DE "LIDA" ESCURECE AQUI, e é CONSEQUÊNCIA da linha acima — o mesmo efeito de segunda ordem que o Zebrado claro já tinha tido. O balão próprio nasce de `color-mix(--precs-gold-forma 22%, --bg-secondary)`, fórmula escrita para um ouro: com o forma virando VINHO ela passa a produzir um rosa acinzentado (#CFAFB0), e o #294ACE do claro em cima dele cai para 3,51:1 — o tique de lida, o sinal mais consultado da conversa, ilegível justamente na bolha de quem escreveu. Quem cobrou foi o `teste-contraste-render`, na primeira rodada depois da troca. Vai para 4,85:1 com o mesmo azul do Zebrado claro: a cor funcional guarda o SIGNIFICADO em todos os temas e ajusta só o tom onde o fundo muda. */ --accent-blue: #1B3A9E; --accent-blue-hover: #142C78; /* (1.1.42) As superficies do card da lead ficaram para tras quando o tom do tema subiu: elas ainda eram o rosa lavado da primeira versao, entao o card do credor destoava do resto da tela. Agora seguem `--bg-secondary` e `--bg-primary`, que e a relacao que todos os outros temas mantem. */ --lead-surface: #FDFAFB; --lead-surface-2: #EBD3D7; --lead-border: #CFA9AF; --lead-border-2: #DCBCC2; --lead-title: #1D1415; --lead-text: #251A1B; --lead-label: #584A4C; --lead-muted: #584A4C; /* Sombra um pouco mais presente, como no Suave: com menos branco, é ela que separa card de fundo. (1.1.43) E ELA VIROU VINHO. Era `rgba(36,26,27,…)`, um marrom neutro herdado do Suave. Com o Pantone 1815 C ela espalha a cor do tema por baixo de TODO card e de todo modal, sem pintar nenhuma superfície de conteúdo — é o jeito mais barato de o vinho aparecer na tela inteira, e não só na cabeça do card. Alfa subiu 0,03 porque vinho é mais claro que o marrom que saiu e a sombra perderia presença no mesmo valor. */ --shadow: 0 4px 12px rgba(120, 35, 38, 0.20); --shadow-lg: 0 8px 24px rgba(120, 35, 38, 0.26); } /* O fio dourado do contorno do painel é literal (`rgba(180,149,82,…)`) na regra do claro, e num tema bordô ele apareceria como um fio de ouro sem motivo. Aqui ele vira o vinho. */ html[data-theme="bordo-claro"] .panel { border: 1px solid var(--panel-fio); } html[data-theme="bordo-claro"] .panel-header { border-bottom: 1px solid rgba(120, 35, 38, 0.22); } /* ====================================================================== (1.1.41 · 2ª volta) ZEBRADO, preto e branco, em duas dominâncias. "é um tema preto e branco que o usuário pode alterar entre qual cor predomina, mais o preto ou o branco" (Pedro, 31/08/2026). São dois temas e não um com interruptor: a dominância É a paleta inteira (as três superfícies, a borda, os três textos e o acento trocam de lado), e um eixo separado seria um segundo atributo dizendo a mesma coisa que o `data-theme` já diz. O ACENTO AQUI NÃO É O OURO, e essa é a única exceção da casa a essa regra. Nos outros temas o ouro é a marca sobre a superfície; num tema de dois tons chapados ele seria uma terceira cor que ninguém pediu. O acento passa a ser o tom OPOSTO ao fundo: branco no escuro, preto no claro. É a única leitura possível num tema sem matiz. (1.1.43) A CHAVE DESTE TEMA MUDOU, e o nome de agora descreve o desenho dele: `zebrado`, pela listra vertical da assinatura. O nome anterior descrevia uma referência de fora do produto, e nome de tema de ferramenta de trabalho tem de descrever o tema. A paleta é a mesma, byte a byte. A migração da chave salva vive em `PRECS_TEMAS_RENOMEADOS` (index.html), pelo mesmo mecanismo do `dark` da 1.1.6. Como consequência, `--precs-gold-forma` e `--precs-wa-tinta-ouro` trocam de par: o botão de enviar do WhatsApp fica branco com tinta preta no escuro, e preto com tinta branca no claro. Os dois tokens existem exatamente para isso. As cores funcionais (verde, vermelho, âmbar, violeta) ficam: elas significam ESTADO, e estado não vira preto e branco porque o tema virou. ====================================================================== */ /* ---- ZEBRADO ESCURO (o preto predomina). Medidos contra --bg-tertiary (#1F1F1F): primário 15,3:1 · secundário 9,7:1 · muted 5,0:1 · acento branco 15,3:1. */ html[data-theme="zebrado"] { --bg-primary: #0A0A0A; --bg-secondary: #141414; --bg-tertiary: #1F1F1F; --border-color: #303030; --text-primary: #FFFFFF; --text-secondary: #D2D2D2; --text-muted: #9C9C9C; --precs-gold: #FFFFFF; --precs-gold-soft: #E8E8E8; --precs-gold-title: #FFFFFF; --precs-gold-hi: #FFFFFF; --precs-gold-light: rgba(255, 255, 255, 0.12); --accent-3cplus: #FFFFFF; --accent-3cplus-dark: #E8E8E8; --accent-blue: #E8E8E8; --accent-blue-hover: #FFFFFF; --accent-blue-light: rgba(255, 255, 255, 0.12); --accent-manual: #F59336; --accent-green: #2BD4A0; --accent-green-light: rgba(43, 212, 160, 0.16); --accent-red: #F26D6D; --accent-red-light: rgba(242, 109, 109, 0.16); --accent-orange: #F7A93B; --accent-orange-light: rgba(247, 169, 59, 0.16); --on-accent-blue: var(--on-accent-ink); --accent-green-text: var(--accent-green); --accent-red-text: var(--accent-red); --accent-manual-text: var(--accent-manual); --accent-orange-text: var(--accent-orange); /* (1.1.42) O `--st-interval` VOLTOU A SER AMARELO. Ele tinha virado `#E8E8E8` quando o tema foi escrito, junto com o resto do preto-e-branco, e isso quebrava a regra da casa: o amarelo do intervalo carrega SIGNIFICADO, e um tema que o pinta de cinza faz o operador reaprender a tela ao trocar de tema — e a parede da supervisão mostrar duas cores para o mesmo estado. Quem cobrou foi o `teste-temas.js`, na primeira rodada dele. Os NEUTROS (`--st-idle`, `--st-offline`) continuam livres para acompanhar a superfície, que é a brecha legítima e antiga. */ --st-idle:#D2D2D2; --st-manual:#F59336; --st-call:#2BD4A0; --st-tpa:#5E6AD2; --st-mtpa:#A78BFA; --st-interval:#E8C46A; --st-offline:#565656; --m-cpc:#8AA0E6; /* (1.1.54) O anel de luz dos escuros — raciocínio em `00-base.css:422`. No Zebrado ele é branco puro, que é a única cor que o tema tem além do preto, e é o tema onde ele mais se justifica: o card (#141414) e a página (#0A0A0A) se separam por 1,075, o segundo pior dos dez. */ --shadow: 0 0 0 1px rgba(255, 255, 255, 0.11), 0 10px 32px rgba(0, 0, 0, 0.66); --shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.11), 0 18px 48px rgba(0, 0, 0, 0.76); --lead-surface: #141414; --lead-surface-2: #0A0A0A; --lead-border: #303030; --lead-border-2: #3C3C3C; --lead-title: #FFFFFF; --lead-text: #FFFFFF; --lead-label: #D2D2D2; --lead-muted: #9C9C9C; } /* O ouro-forma vira BRANCO, e a tinta em cima dele vira preta: é o par que pinta o botão de enviar do WhatsApp e o balão próprio. Sem os dois trocando juntos, o botão sairia branco com texto branco. */ html[data-theme="zebrado"]{ --precs-gold-forma: #FFFFFF; --precs-wa-tinta-ouro: #0A0A0A; } /* ---- ZEBRADO CLARO (o branco predomina). Ele apoia-se em `data-luz="claro"` para herdar as treze regras do claro, e sobrescreve só o que é dele. (1.1.43) O pior fundo deixou de ser o terciário e passou a ser o `--bg-primary` #EDEDED; as medidas estão no comentário dele, logo abaixo. */ html[data-theme="zebrado-claro"] { /* (1.1.43) O FUNDO DESCEU DE #FAFAFA PARA #EDEDED, e é a outra metade de "o claro não mudou muito". Com #FAFAFA atrás de um card #FFFFFF a diferença era de 2% de luminância: o card não existia como objeto, a sombra não tinha onde cair e a tela era uma folha branca. A #EDEDED o branco do card volta a ser BRANCO contra algo, que é o mesmo recurso que o Claro Suave usa — superfície com cor de verdade é o que separa um tema de um ajuste de brilho. O #EDEDED passa a ser o PIOR fundo do tema, e é contra ele que as contas valem: primário 17,2:1 · secundário 9,9:1 · muted 5,9:1 · acento preto 17,2:1. */ --bg-primary: #EDEDED; --bg-secondary: #FFFFFF; --bg-tertiary: #F0F0F0; --border-color: #D8D8D8; --text-primary: #101010; --text-secondary: #3D3D3D; --text-muted: #5A5A5A; --precs-gold: #101010; --precs-gold-soft: #101010; --precs-gold-title: #101010; --precs-gold-hi: #2E2E2E; --precs-gold-light: rgba(16, 16, 16, 0.10); --m-falado: #101010; --m-duracao: #5A5A5A; /* (1.1.42) As outras quatro, que ficavam no `:root`. Mesmos valores: o terciário deste tema (#F0F0F0) é neutro e mais claro que o claro quente, então a conta passa com folga. Declaradas para o tema fechar o conjunto. */ --m-ligacoes: #A34B00; --m-atendidas: #0F7A3D; --m-taxa: #6D28D9; --m-cpc: #1D4ED8; /* (1.1.42) OS NEUTROS DO ESTADO, por tema. `--st-idle` e `--st-offline` são os únicos dois do conjunto que PODEM mudar de cor por tema, e a razão é que eles não significam nada além de "sem atividade": não há vocabulário para o operador reaprender. Os outros cinco (manual, em chamada, TPA, TPA manual, intervalo) continuam idênticos em todos os temas — é o que o `teste-temas.js` cobra, matiz por matiz. Os quatro temas claros caíam no `:root`, que traz um cinza AZULADO. Sobre superfície quente ou rosada isso lê como mancha fria, e era mais um motivo de os claros parecerem o mesmo tema. */ /* Cinza NEUTRO de verdade (R=G=B): num tema preto-e-branco qualquer matiz no ocioso seria a única cor da tela, e chamaria mais atenção que os estados que importam. */ --st-idle: #8A8A8A; --st-offline: #B4B4B4; /* (1.1.43) O `-2` acompanha o `--bg-primary` novo: é a relação que todos os temas mantêm (surface = secundário, surface-2 = primário), e foi o mesmo acerto que o Bordô claro precisou quando o tom dele subiu. Sem isto o card do credor ficaria mais claro que a tela em volta e destoaria. */ --lead-surface: #FFFFFF; --lead-surface-2: #EDEDED; --lead-border: #D8D8D8; --lead-border-2: #E4E4E4; --lead-title: #101010; --lead-text: #1C1C1C; --lead-label: #5A5A5A; --lead-muted: #5A5A5A; --shadow: 0 4px 12px rgba(0, 0, 0, 0.10); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.14); } html[data-theme="zebrado-claro"]{ --precs-gold-forma: #101010; --precs-wa-tinta-ouro: #FFFFFF; /* O AZUL DE "LIDA" ESCURECE AQUI, e quem cobrou foi o teste-contraste-render. O balão próprio nasce de `color-mix(--precs-gold-forma 22%, --bg-secondary)`, e essa fórmula foi escrita para um ouro: com o forma PRETO deste tema ela produz um cinza médio (#B7B7B7), e o #294ACE do claro em cima dele dá 3,53:1 — o tique de lida, que é o sinal mais consultado da conversa, ficando ilegível justamente na bolha da operadora. Escurecido para 4,88:1. É o mesmo caminho que `--accent-orange-text` percorreu: cor funcional mantém o SIGNIFICADO em todos os temas e ajusta o tom onde o fundo muda. */ --accent-blue: #1B3A9E; --accent-blue-hover: #142C78; } /* ====================================================================== (1.1.54) SAPHIRA, em duas paletas: `data-theme="saphira"` (escura) e `data-theme="saphira-claro"`. Liberadas por ramal no operadores.json, pelo mesmo mecanismo do Bordô e do Zebrado ("desbloqueios": ["tema-saphira"]). O OURO CONTINUA SENDO O OURO — é a terceira vez que este arquivo escreve isso, e a razão não muda: o azul é a SUPERFÍCIE (fundos, bordas, sombras) e o acento de marca segue a regra da casa. Trocar o ouro pelo azul no tema escuro daria um painel inteiro sem a marca, e no escuro azul-sobre-azul nem se enxerga. AS SUPERFÍCIES TÊM CROMA, e isso é lição do Bordô: a primeira versão daquele tema saiu de um vinho dessaturado e lia como "cinza amarronzado". Aqui os três fundos derivam de um azul de safira escurecido mantendo a saturação, não lavado — o resultado é azul, não cinza-azulado. As cores funcionais (verde, vermelho, âmbar, violeta do --st-* e da família --accent-*) ficam como estão, pela razão de sempre: elas significam ESTADO, e estado não muda de cor porque a pessoa gosta de azul. Isso vale em especial para `--st-tpa`, que já é um azul-violeta: a tentação num tema azul é puxá-lo para o azul do tema, e o `teste-temas.js` trava o matiz das cinco em ±25° contra o `:root` justamente para impedir isso. ====================================================================== */ /* ---- SAPHIRA ESCURO. Mesma estrutura do PRECS, com as três superfícies e a borda no azul. Medidos contra --bg-tertiary (#1C2942), que é o pior fundo do tema porque é o mais claro dos três: primário 14,7:1 · secundário 10,4:1 · muted 5,4:1 · ouro 5,09:1. Os 29 pares que o teste-contraste.js cobra foram conferidos antes de este bloco existir; o pior de todos é o ouro sobre o terciário, com 5,09:1 contra o piso de 4,5. */ html[data-theme="saphira"] { --bg-primary: #0C1220; --bg-secondary: #131D31; --bg-tertiary: #1C2942; --border-color: #2A3B5E; --text-primary: #EEF2FA; --text-secondary: #C3CEE4; --text-muted: #96A5C2; --precs-gold: #B49552; --precs-gold-soft: #D2AE52; --precs-gold-title: #D3B26B; --precs-gold-hi: #FFC95B; --precs-gold-light: rgba(180, 149, 82, 0.16); /* O par ouro-forma / tinta, que é onde o Bordô se queimou por omissão: sem declarar `--precs-gold-forma` o tema herda o ouro do `:root` e nada avisa. Aqui o valor É o ouro — e é uma decisão, não herança. A tinta acompanha a superfície do tema. */ --precs-gold-forma: #B49552; --precs-wa-tinta-ouro: #0C1220; --accent-3cplus: #B49552; --accent-3cplus-dark: #D2AE52; /* O azul de AÇÃO vira ouro, como no Bordô e no PRECS. Num tema azul o motivo é mais forte ainda: um botão azul sobre superfície azul não se lê como botão. */ --accent-blue: #C6A75E; --accent-blue-hover: #D2AE52; --accent-blue-light: rgba(180, 149, 82, 0.16); --accent-manual: #F59336; --accent-green: #2BD4A0; --accent-green-light: rgba(43, 212, 160, 0.16); --accent-red: #F26D6D; --accent-red-light: rgba(242, 109, 109, 0.16); --accent-orange: #F7A93B; --accent-orange-light: rgba(247, 169, 59, 0.16); --on-accent-blue: var(--on-accent-ink); --accent-green-text: var(--accent-green); --accent-red-text: var(--accent-red); --accent-manual-text: var(--accent-manual); --accent-orange-text: var(--accent-orange); /* Os cinco do meio são os mesmos dos outros escuros, com o matiz travado. Os NEUTROS (`--st-idle`, `--st-offline`) acompanham a superfície, que é a brecha legítima: eles significam "sem atividade" e não têm vocabulário para o operador reaprender. */ --st-idle:#C3CEE4; --st-manual:#F59336; --st-call:#2BD4A0; --st-tpa:#5E6AD2; --st-mtpa:#A78BFA; --st-interval:#E8C46A; --st-offline:#4A5878; --m-cpc:#8AA0E6; /* O anel de luz dos escuros — raciocínio em `00-base.css:422`. Aqui ele puxa para o azul claro em vez do branco puro, pelo mesmo motivo do rosado do Bordô: a aresta pega a temperatura da superfície que ela contorna. */ --shadow: 0 0 0 1px rgba(226, 236, 255, 0.11), 0 10px 32px rgba(0, 0, 0, 0.62); --shadow-lg: 0 0 0 1px rgba(226, 236, 255, 0.11), 0 18px 48px rgba(0, 0, 0, 0.72); --lead-surface: #131D31; --lead-surface-2: #0C1220; --lead-border: #2A3B5E; --lead-border-2: #35486F; --lead-title: #EEF2FA; --lead-text: #EEF2FA; --lead-label: #B49552; --lead-muted: #96A5C2; } /* ---- SAPHIRA CLARO, e ele é o Claro Suave com o bege trocado por azul — exatamente o caminho que o Bordô claro seguiu depois de duas tentativas erradas. O Claro Suave é o ponto de partida certo porque ele já resolveu o problema difícil: superfície com COR (não branco), medida para monitor de brilho alto, com os três tokens de texto reforçados. Ele NÃO redeclara o claro inteiro: `data-luz="claro"` já lhe dá o ouro nos cinco papéis, o anel de foco, o fio, a faixa da cabeça e a textura; o `:root` dá o resto. Medidos contra --bg-tertiary (#CFD9EA), o pior fundo: primário 14,3:1 · secundário 7,8:1 · muted 5,9:1 · azul como texto 6,3:1. */ html[data-theme="saphira-claro"] { /* (1.1.54, 2ª volta) Card branco, cor na página e na cabeça — o raciocínio inteiro está no bloco do Bordô claro, mais acima. */ --bg-primary: #CFDDF3; --bg-secondary: #FAFCFF; --bg-tertiary: #E8EEF8; /* ver o Bordô claro: chip é degrau do card, não da página */ --border-color: #93AACE; --text-primary: #141924; --text-secondary: #333D4D; --text-muted: #455063; /* O AZUL ENTRA NO LUGAR DO BRONZE do claro, e é escuro o bastante para ser TEXTO — que é justamente o que o ouro da marca não é. A regra medida de 10/08 continua valendo e é ela que impede o #B49552 de vir para cá. */ --precs-gold: #17356F; --precs-gold-soft: #17356F; --precs-gold-title: #17356F; --precs-gold-hi: #1F4590; --precs-gold-light: rgba(23, 53, 111, 0.14); /* Os dois acoplamentos que qualquer mexida no ouro do claro tem que acompanhar. */ --m-falado: #17356F; --m-duracao: #455063; /* As outras quatro descem um degrau, como no Suave e no Bordô claro: o terciário aqui é mais escuro que o do claro normal, e sem isso --m-atendidas ficaria abaixo de AA. */ --m-ligacoes: #7E3A00; --m-atendidas: #08512A; --m-taxa: #4F1CA0; --m-cpc: #153BA8; /* Os neutros do estado, por tema: sobre superfície azulada o cinza do `:root` lê como mancha, e era um dos motivos de os claros parecerem todos o mesmo tema. */ --st-idle: #7A8CAE; --st-offline: #9FB0CE; /* O par que derrubou o Bordô claro: com `--precs-gold` virando azul e `-forma` ficando ouro, o tema sairia com azul na letra e ouro em volta. Os dois viram juntos. */ --precs-gold-forma: #17356F; --precs-wa-tinta-ouro: #F4F7FC; /* E o efeito de SEGUNDA ORDEM que aquele tema também pagou: `--precs-wa-balao-proprio` nasce de `color-mix(--precs-gold-forma 22%, --bg-secondary)`, então com o forma virando azul o balão fica azulado e o `--accent-blue` do claro perde contraste em cima dele. Aqui o azul de ação já é escuro por construção. */ --accent-blue: #1B3A9E; --accent-blue-hover: #142C78; --lead-surface: #FAFCFF; --lead-surface-2: #CFDDF3; --lead-border: #A3B8DA; --lead-border-2: #B6C9E4; --lead-title: #10151E; --lead-text: #171D28; --lead-label: #455063; --lead-muted: #455063; /* Sombra AZUL, como a do Bordô claro é vinho: ela espalha a cor do tema por baixo de todo card e todo modal sem pintar nenhuma superfície de conteúdo. É o jeito mais barato de o azul aparecer na tela inteira, e não só na cabeça do card. */ --shadow: 0 4px 12px rgba(23, 53, 111, 0.20); --shadow-lg: 0 8px 24px rgba(23, 53, 111, 0.26); } /* O fio do contorno do painel é literal (`rgba(180,149,82,…)`) na regra do claro, e num tema azul ele apareceria como um fio de ouro sem motivo. Aqui ele vira o azul. */ html[data-theme="saphira-claro"] .panel { border: 1px solid var(--panel-fio); } html[data-theme="saphira-claro"] .panel-header { border-bottom: 1px solid rgba(23, 53, 111, 0.22); } /* ====================================================================== (1.1.54) TOPÁZIO, em duas paletas. Liberadas por ramal ("tema-topazio"). ELE RESOLVE UM CONFLITO QUE OS OUTROS TEMAS NÃO TÊM: o ouro é o acento de marca em TODOS os temas, e aqui o ouro seria também a superfície. Dois papéis, uma cor, e o resultado seria um painel sem hierarquia — tudo dourado é nada dourado. A SAÍDA é a mesma relação do PRECS, virada para o quente: as superfícies vão para um âmbar MUITO escuro e pouco saturado (a cor do topázio bruto contra a luz, não a da gema lapidada), e o ouro fica onde sempre esteve, no acento. A distância que separa os dois é de LIGHTNESS, não de matiz: superfícies em L 7 a 16, acento em L 75. Medido: o ouro sobre o fundo do tema dá 9,54:1 — mais folga do que ele tem no PRECS. ====================================================================== */ html[data-theme="topazio"] { --bg-primary: #17100A; --bg-secondary: #221809; --bg-tertiary: #31240E; --border-color: #4A3616; --text-primary: #FAF4E8; --text-secondary: #DCCFB4; --text-muted: #AC9C7C; /* O ouro sobe um degrau em relação ao dos outros temas. Sobre superfície âmbar o #B49552 padrão perde separação; #D9B45E devolve o contraste sem sair da família. */ --precs-gold: #D9B45E; --precs-gold-soft: #E4C27B; --precs-gold-title: #F0CE7C; --precs-gold-hi: #FFD98A; --precs-gold-light: rgba(217, 180, 94, 0.16); --precs-gold-forma: #D9B45E; --precs-wa-tinta-ouro: #17100A; --accent-3cplus: #D9B45E; --accent-3cplus-dark: #E4C27B; --accent-blue: #E4C27B; --accent-blue-hover: #F0CE7C; --accent-blue-light: rgba(217, 180, 94, 0.16); --accent-manual: #F59336; --accent-green: #2BD4A0; --accent-green-light: rgba(43, 212, 160, 0.16); --accent-red: #F26D6D; --accent-red-light: rgba(242, 109, 109, 0.16); --accent-orange: #F7A93B; --accent-orange-light: rgba(247, 169, 59, 0.16); --on-accent-blue: var(--on-accent-ink); --accent-green-text: var(--accent-green); --accent-red-text: var(--accent-red); --accent-manual-text: var(--accent-manual); --accent-orange-text: var(--accent-orange); --st-idle:#DCCFB4; --st-manual:#F59336; --st-call:#2BD4A0; --st-tpa:#5E6AD2; --st-mtpa:#A78BFA; --st-interval:#E8C46A; --st-offline:#6B5A3A; --m-cpc:#8AA0E6; --shadow: 0 0 0 1px rgba(255, 245, 225, 0.11), 0 10px 32px rgba(0, 0, 0, 0.62); --shadow-lg: 0 0 0 1px rgba(255, 245, 225, 0.11), 0 18px 48px rgba(0, 0, 0, 0.72); --lead-surface: #221809; --lead-surface-2: #17100A; --lead-border: #4A3616; --lead-border-2: #5C4520; --lead-title: #FAF4E8; --lead-text: #FAF4E8; --lead-label: #D9B45E; --lead-muted: #AC9C7C; } /* ---- TOPÁZIO CLARO. Aqui o âmbar pode ser SUPERFÍCIE de verdade, porque em fundo claro ele não compete com o ouro do acento — o acento vira o bronze escuro, pela mesma regra que vale em todos os claros (ouro não fecha 4,5:1 sobre superfície clara). Croma medido: página 19,6 · card 13,9. É o tema claro mais colorido do catálogo, e é de propósito: o topázio é uma gema que só existe pela cor. */ html[data-theme="topazio-claro"] { /* (1.1.54, 2ª volta) Card branco, cor na página e na cabeça — ver o Bordô claro. */ --bg-primary: #F3E4C4; --bg-secondary: #FEFBF3; --bg-tertiary: #F6EFE0; /* ver o Bordô claro */ --border-color: #C2A76D; --text-primary: #231B0C; --text-secondary: #463C24; --text-muted: #584B2E; --precs-gold: #6E5411; --precs-gold-soft: #6E5411; --precs-gold-title: #6E5411; --precs-gold-hi: #866619; --precs-gold-light: rgba(110, 84, 17, 0.14); --m-falado: #6E5411; --m-duracao: #584B2E; /* (1.1.54) O ambar da metrica foi para o VERMELHO-TIJOLO, e nao por gosto: o teste-contraste.js tambem exige que as seis metricas sejam distinguiveis ENTRE SI (distancia >= 60 em RGB), e num tema ambar o `--m-ligacoes` ambar encostava no `--m-falado`, que aqui e o bronze do tema. Medido: #7A3600 dava 59, um a menos que o piso. #8B2E00 da 84 e mantem 5,69:1 contra o terciario. */ --m-ligacoes: #8B2E00; --m-atendidas: #08512A; --m-taxa: #4F1CA0; --m-cpc: #153BA8; --st-idle: #A08F63; --st-offline: #C7B589; --precs-gold-forma: #6E5411; --precs-wa-tinta-ouro: #FBF6E9; --accent-blue: #1B3A9E; --accent-blue-hover: #142C78; --lead-surface: #FEFBF3; --lead-surface-2: #F3E4C4; --lead-border: #D2BB86; --lead-border-2: #E0CB9C; --lead-title: #1E1709; --lead-text: #261E0E; --lead-label: #584B2E; --lead-muted: #584B2E; --shadow: 0 4px 12px rgba(110, 84, 17, 0.20); --shadow-lg: 0 8px 24px rgba(110, 84, 17, 0.26); } html[data-theme="topazio-claro"] .panel { border: 1px solid var(--panel-fio); } html[data-theme="topazio-claro"] .panel-header { border-bottom: 1px solid rgba(110, 84, 17, 0.22); } /* ====================================================================== (1.1.54) AMETISTA, em duas paletas. Liberadas por ramal ("tema-ametista"). Mesmo molde do Bordô e do Saphira: a superfície carrega a pedra, o ouro segue sendo o acento da marca. É o tema mais simples dos três porque o roxo não disputa papel com nada da identidade — nem com o ouro (que é quente) nem com as cores de estado. Croma do card: 22,9 no escuro e 12,0 no claro. ====================================================================== */ html[data-theme="ametista"] { --bg-primary: #150C1F; --bg-secondary: #1F1230; --bg-tertiary: #2C1A44; --border-color: #43285F; --text-primary: #F3EDFA; --text-secondary: #CFC2E0; --text-muted: #A395B8; --precs-gold: #B49552; --precs-gold-soft: #D2AE52; --precs-gold-title: #D3B26B; --precs-gold-hi: #FFC95B; --precs-gold-light: rgba(180, 149, 82, 0.16); --precs-gold-forma: #B49552; --precs-wa-tinta-ouro: #150C1F; --accent-3cplus: #B49552; --accent-3cplus-dark: #D2AE52; --accent-blue: #C6A75E; --accent-blue-hover: #D2AE52; --accent-blue-light: rgba(180, 149, 82, 0.16); --accent-manual: #F59336; --accent-green: #2BD4A0; --accent-green-light: rgba(43, 212, 160, 0.16); --accent-red: #F26D6D; --accent-red-light: rgba(242, 109, 109, 0.16); --accent-orange: #F7A93B; --accent-orange-light: rgba(247, 169, 59, 0.16); --on-accent-blue: var(--on-accent-ink); --accent-green-text: var(--accent-green); --accent-red-text: var(--accent-red); --accent-manual-text: var(--accent-manual); --accent-orange-text: var(--accent-orange); /* O `--st-mtpa` do vocabulário é violeta (#A78BFA), e num tema roxo ele encostaria na superfície. Ele NÃO muda de matiz — o teste-temas.js trava isso em ±25° —, mas o terciário do tema foi escolhido escuro o bastante para o violeta continuar se destacando: medido, 6,3:1 contra o #2C1A44. */ --st-idle:#CFC2E0; --st-manual:#F59336; --st-call:#2BD4A0; --st-tpa:#5E6AD2; --st-mtpa:#A78BFA; --st-interval:#E8C46A; --st-offline:#4E3A68; --m-cpc:#8AA0E6; --shadow: 0 0 0 1px rgba(240, 232, 255, 0.11), 0 10px 32px rgba(0, 0, 0, 0.62); --shadow-lg: 0 0 0 1px rgba(240, 232, 255, 0.11), 0 18px 48px rgba(0, 0, 0, 0.72); --lead-surface: #1F1230; --lead-surface-2: #150C1F; --lead-border: #43285F; --lead-border-2: #543473; --lead-title: #F3EDFA; --lead-text: #F3EDFA; --lead-label: #B49552; --lead-muted: #A395B8; } /* ---- AMETISTA CLARO: o lilás com croma de verdade. Página 17,6 · card 12,0. */ html[data-theme="ametista-claro"] { /* (1.1.54, 2ª volta) Card branco, cor na página e na cabeça — ver o Bordô claro. */ --bg-primary: #E1D4F2; --bg-secondary: #FCFAFE; --bg-tertiary: #EDE8F6; /* ver o Bordô claro */ --border-color: #AC93CE; --text-primary: #1B1424; --text-secondary: #3C3348; --text-muted: #4E445C; --precs-gold: #4E2585; --precs-gold-soft: #4E2585; --precs-gold-title: #4E2585; --precs-gold-hi: #5F2EA1; --precs-gold-light: rgba(78, 37, 133, 0.14); --m-falado: #4E2585; --m-duracao: #4E445C; /* (1.1.54) `--m-taxa` era o MESMO roxo do tema (#4E2585), distancia ZERO do `--m-falado`. Num tema roxo a metrica violeta nao pode ser a cor do tema, senao as duas colunas do grafico viram uma so. #5B21B6 e o violeta padrao dos claros: 66 de distancia e 5,00:1 contra o terciario. */ --m-ligacoes: #7E3A00; --m-atendidas: #08512A; --m-taxa: #5B21B6; --m-cpc: #153BA8; --st-idle: #9585AE; --st-offline: #BBACD2; --precs-gold-forma: #4E2585; --precs-wa-tinta-ouro: #F7F3FD; --accent-blue: #1B3A9E; --accent-blue-hover: #142C78; --lead-surface: #FCFAFE; --lead-surface-2: #E1D4F2; --lead-border: #BCA6DC; --lead-border-2: #CCBAE6; --lead-title: #16101E; --lead-text: #1D1626; --lead-label: #4E445C; --lead-muted: #4E445C; --shadow: 0 4px 12px rgba(78, 37, 133, 0.20); --shadow-lg: 0 8px 24px rgba(78, 37, 133, 0.26); } html[data-theme="ametista-claro"] .panel { border: 1px solid var(--panel-fio); } html[data-theme="ametista-claro"] .panel-header { border-bottom: 1px solid rgba(78, 37, 133, 0.22); } /* ====================================================================== (1.1.55) RUBI, em duas paletas. Liberadas por ramal ("tema-rubi"). O PEDIDO FOI "O ZEBRADO SÓ QUE VERMELHO E PRETO" (Pedro, 03/09/2026), e o rubro-negro é a razão dele. O nome é de PEDRA, como os outros cinco liberados por ramal, e não do clube: o catálogo já tem Bordô, Saphira, Topázio e Ametista, e um nome de clube dentro de uma ferramenta da empresa carrega marca de terceiro que a paleta não precisa. ONDE ELE DIFERE DO ZEBRADO: o Zebrado é neutro puro (R=G=B em todas as superfícies) e o acento dele é o BRANCO. Aqui as superfícies são pretas com viés quente (croma 6,2 no card contra 0 do Zebrado) e o vermelho é a assinatura. ONDE ELE DIFERE DO BORDÔ, que também é vermelho escuro: o Bordô é VINHO em toda a superfície — página, card e chip são vinho. Aqui a superfície é PRETA e o vermelho entra em três lugares de área pequena e alto contraste (a listra do canvas, o fio do card e a faixa da cabeça), que é o que dá a leitura de duas cores separadas em vez de uma cor só. Somado ao carmim (#C8102E) contra o vinho (#782326), os dois não se confundem lado a lado na galeria. O OURO CONTINUA SENDO O ACENTO, pelo mesmo argumento escrito no Bordô e repetido no Saphira e no Ametista: trocar o ouro pelo vermelho daria um painel inteiro sem a marca. E aqui há um motivo A MAIS, que os outros três não têm: o vermelho JÁ SIGNIFICA algo nesta tela. `--accent-red` é erro, e `--st-*` carrega estado. Um `--precs-gold` vermelho pintaria título, rótulo e botão de enviar com a cor que o operador aprendeu a ler como "deu errado". O vermelho fica onde é FORMA, nunca onde é sinal. ====================================================================== */ html[data-theme="rubi"] { --bg-primary: #120A0C; --bg-secondary: #1C1013; --bg-tertiary: #2A181C; --border-color: #452429; --text-primary: #FBF3F4; --text-secondary: #D8CACB; --text-muted: #A38F91; --precs-gold: #B49552; --precs-gold-soft: #D2AE52; --precs-gold-title: #D3B26B; --precs-gold-hi: #FFC95B; --precs-gold-light: rgba(180, 149, 82, 0.16); --precs-gold-forma: #B49552; --precs-wa-tinta-ouro: #120A0C; --accent-3cplus: #B49552; --accent-3cplus-dark: #D2AE52; --accent-blue: #C6A75E; --accent-blue-hover: #D2AE52; --accent-blue-light: rgba(180, 149, 82, 0.16); --accent-manual: #F59336; --accent-green: #2BD4A0; --accent-green-light: rgba(43, 212, 160, 0.16); --accent-red: #F26D6D; --accent-red-light: rgba(242, 109, 109, 0.16); --accent-orange: #F7A93B; --accent-orange-light: rgba(247, 169, 59, 0.16); --on-accent-blue: var(--on-accent-ink); --accent-green-text: var(--accent-green); --accent-red-text: var(--accent-red); --accent-manual-text: var(--accent-manual); --accent-orange-text: var(--accent-orange); /* O `--accent-red` (#F26D6D) é a cor de ERRO e continua idêntica à dos outros temas — o `teste-temas.js` trava o matiz das cinco de estado em ±25° e este é o único tema do catálogo onde ela encosta na cor de assinatura. O que a separa NÃO é o matiz, é a superfície: o vermelho do tema só aparece em área chapada e escura (a faixa da cabeça é #421019, L 8), enquanto o erro é sempre TEXTO ou ÍCONE claro, em L 62. Medido, um sobre o outro dá 6,1:1 — o erro continua saltando de dentro do tema. */ --st-idle:#D8CACB; --st-manual:#F59336; --st-call:#2BD4A0; --st-tpa:#5E6AD2; --st-mtpa:#A78BFA; --st-interval:#E8C46A; --st-offline:#5A3F43; --m-cpc:#8AA0E6; --shadow: 0 0 0 1px rgba(255, 236, 238, 0.11), 0 10px 32px rgba(0, 0, 0, 0.66); --shadow-lg: 0 0 0 1px rgba(255, 236, 238, 0.11), 0 18px 48px rgba(0, 0, 0, 0.76); --lead-surface: #1C1013; --lead-surface-2: #120A0C; --lead-border: #452429; --lead-border-2: #562D33; --lead-title: #FBF3F4; --lead-text: #FBF3F4; --lead-label: #B49552; --lead-muted: #A38F91; } /* ---- RUBI CLARO. Os papéis se invertem, como no par do Zebrado: no escuro a listra é VERMELHA sobre preto, no claro ela é PRETA sobre rosa. O acento deixa de ser o ouro e passa a ser o carmim escuro (#9E121D), pela regra que vale em todos os claros — o ouro da marca não fecha 4,5:1 sobre superfície clara. Croma medido: página 13,3 · card 0,7 (branco, como manda a 1.1.54) · terciário 10,7. */ html[data-theme="rubi-claro"] { --bg-primary: #E9C6CB; --bg-secondary: #FFFDFD; --bg-tertiary: #E0C4C8; --border-color: #BE969B; --text-primary: #1B1213; --text-secondary: #3E3335; --text-muted: #554749; --precs-gold: #9E121D; --precs-gold-soft: #9E121D; --precs-gold-title: #9E121D; --precs-gold-hi: #BC1622; --precs-gold-light: rgba(158, 18, 29, 0.14); --m-falado: #9E121D; --m-duracao: #554749; --m-ligacoes: #7E3A00; --m-atendidas: #08512A; --m-taxa: #57209E; --m-cpc: #173FAE; --st-idle: #9A8285; --st-offline: #C3ABAE; --precs-gold-forma: #9E121D; --precs-wa-tinta-ouro: #FFF6F7; /* (1.1.55) O ALARME DE LIGACAO LONGA, pelo mesmo motivo do laranja em outros temas: a pagina deste tema (#E9C6CB) e a mais escura e mais colorida dos claros, e o #B42318 que a familia clara usa caia para 4,20:1 em cima dela. O MATIZ nao muda — o vermelho continua significando a mesma coisa —, so o tom, que e a recalibragem que o teste-temas.js permite e o teste-contraste-render exige. #9C1C13 da 5,18:1. */ --accent-red-text: #9C1C13; --accent-blue: #1B3A9E; --accent-blue-hover: #142C78; --lead-surface: #FFFDFD; --lead-surface-2: #E9C6CB; --lead-border: #CFAAAE; --lead-border-2: #DEBFC3; --lead-title: #160F10; --lead-text: #1E1516; --lead-label: #554749; --lead-muted: #554749; --shadow: 0 4px 12px rgba(158, 18, 29, 0.20); --shadow-lg: 0 8px 24px rgba(158, 18, 29, 0.26); } html[data-theme="rubi-claro"] .panel { border: 1px solid var(--panel-fio); } html[data-theme="rubi-claro"] .panel-header { border-bottom: 1px solid #9E121D; } /* ====================================================================== (1.1.58) LEAO, em duas paletas. Liberado por ramal ("tema-leao"). O PEDIDO: "o Caio adora o tema PRECS, so que ele queria algo a mais... uns leoes no fundo igual o predio que a gente trabalha e deixa em dourado ainda, tipo as cores do tema PRECS so que com leoes" (Pedro, 04/09/2026). O predio e o Tiemann Headquarters, na Alameda Doutor Carlos de Carvalho, no centro de Curitiba: fachada de pedra clara, o nome em letra dourada sobre a entrada e dois leoes de marmore deitados nos plintos. ESTE E O UNICO TEMA DO CATALOGO QUE NASCE DE OUTRO, e por isso ele tinha um risco proprio: o que separa dois temas e TEXTURA antes de cor (a licao da 1.1.42, "nao mudou nada"), e aqui a cor tinha de ficar quase igual por pedido. Entao a distancia foi posta nos dois eixos que sobravam. · A TEXTURA e o leao, e ela e o tema. · A SUPERFICIE esquentou. O PRECS e grafite FRIO — #131315 tem azul acima do vermelho (19 contra 19 e 21, viés azul). Aqui os tres canais invertem a ordem: #14120E tem vermelho acima do azul, que e a pedra da fachada em vez do metal. Medido em croma, a pagina sai de 2,1 para 6,4. Lado a lado na galeria os dois nao se confundem; um de cada vez, a familia e obviamente a mesma — que e exatamente o pedido. · E A FAIXA DA CABECA, que o PRECS declara `transparent` e este pinta de bronze. Ela e a citacao direta do architrave dourado do predio, e esta escrita no bloco do `--panel-cabeca`, la em cima. O OURO CONTINUA SENDO O ACENTO, e aqui isso nem precisa do argumento longo que o Bordo, o Saphira, o Ametista e o Rubi tiveram de fazer: o ouro E a cor do tema, porque e a cor do nome do predio e a cor da marca. Este e o unico dos seis liberados por ramal em que a assinatura e o proprio ouro, e nao uma cor que disputa com ele. ====================================================================== */ html[data-theme="leao"] { --bg-primary: #14120E; --bg-secondary: #1D1A15; --bg-tertiary: #26231B; --border-color: #353126; --text-primary: #F4F1E9; --text-secondary: #C9C3B4; /* 4,80:1 sobre --bg-tertiary, medido. O PRECS tem 4,83 no mesmo papel: os dois vivem perto do minimo porque o cinza precisa ficar QUENTE para nao brigar com o ouro, e cinza quente escurece mais rapido que neutro ao ganhar saturacao. */ --text-muted: #948E7E; --precs-gold: #B49552; --precs-gold-soft: #D2AE52; --precs-gold-title: #D3B26B; --precs-gold-hi: #FFC95B; --precs-gold-light: rgba(180, 149, 82, 0.16); --precs-gold-forma: #B49552; --precs-wa-tinta-ouro: #14120E; --accent-3cplus: #B49552; --accent-3cplus-dark: #D2AE52; --accent-blue: #C6A75E; --accent-blue-hover: #D2AE52; --accent-blue-light: rgba(180, 149, 82, 0.16); --accent-manual: #F59336; --accent-green: #2BD4A0; --accent-green-light: rgba(43, 212, 160, 0.16); --accent-red: #F26D6D; --accent-red-light: rgba(242, 109, 109, 0.16); --accent-orange: #F7A93B; --accent-orange-light: rgba(247, 169, 59, 0.16); --on-accent-blue: var(--on-accent-ink); --accent-green-text: var(--accent-green); /* (1.1.58) O VERMELHO DE ERRO CLAREOU AQUI, e quem exigiu foi a FAIXA que este tema acrescentou. O #F26D6D da familia escura passa com folga sobre o card (#1D1A15), mas o "Status do SIP" e o selo de conexao vivem sobre superficie tingida de bronze, e o `teste-contraste-render.js` mediu 4,43:1 la — reprova por sete centesimos. O MATIZ nao muda: #F58585 tem verde e azul iguais, hue 0, exatamente como o #F26D6D. So o tom sobe, que e a recalibragem que o `teste-temas.js` permite e este teste exige. Medido, 5,26:1 sobre a mesma superficie. */ --accent-red-text: #F58585; --accent-manual-text: var(--accent-manual); --accent-orange-text: var(--accent-orange); --st-idle:#C9C3B4; --st-manual:#F59336; --st-call:#2BD4A0; --st-tpa:#5E6AD2; --st-mtpa:#A78BFA; --st-interval:#E8C46A; --st-offline:#4A4437; --m-cpc:#8AA0E6; --shadow: 0 0 0 1px rgba(244, 241, 233, 0.10), 0 10px 32px rgba(0, 0, 0, 0.66); --shadow-lg: 0 0 0 1px rgba(244, 241, 233, 0.10), 0 18px 48px rgba(0, 0, 0, 0.76); --lead-surface: #1D1A15; --lead-surface-2: #14120E; --lead-border: #353126; --lead-border-2: #443F31; --lead-title: #F4F1E9; --lead-text: #F4F1E9; --lead-label: #B49552; --lead-muted: #948E7E; } /* ---- LEAO CLARO: o predio de dia. A pagina e a pedra da fachada (#EAE3D5, travertino) e nao um branco tingido, que e o que os outros claros deste arquivo fazem — aqui o travertino E a referencia, entao ele vale como superficie. O acento vira bronze (#6A5219) pela regra que vale em todos os claros: o ouro da marca nao fecha 4,5:1 sobre superficie clara. Medido, o bronze da 7,27:1 sobre o card e 5,81:1 sobre a pagina, que sao as duas piores superficies. O QUE ELE ENCOSTA, e fica dito: o Topazio claro tambem e uma pagina amarelada com tinta bronze (#6E5411 contra #6A5219, quatro unidades de diferenca). O que separa os dois nao e a tinta, e a PAGINA: o Topazio e ambar saturado (#F3E4C4, croma 24,8) e este e pedra lavada (#EAE3D5, croma 12,6) — metade da saturacao. Somado a textura, que e um leao contra uma telha, os dois nao se confundem. */ html[data-theme="leao-claro"] { --bg-primary: #EAE3D5; --bg-secondary: #FFFDF8; --bg-tertiary: #E1D9C8; --border-color: #BDB29A; --text-primary: #1B1813; --text-secondary: #3D382E; --text-muted: #565040; --precs-gold: #6A5219; --precs-gold-soft: #6A5219; --precs-gold-title: #6A5219; --precs-gold-hi: #856823; --precs-gold-light: rgba(106, 82, 25, 0.14); --m-falado: #6A5219; --m-duracao: #565040; --m-ligacoes: #7E3A00; --m-atendidas: #08512A; --m-taxa: #57209E; --m-cpc: #173FAE; --st-idle: #7E7663; --st-offline: #A79C85; --precs-gold-forma: #6A5219; --precs-wa-tinta-ouro: #FFFDF8; --accent-blue: #1B3A9E; --accent-blue-hover: #142C78; --lead-surface: #FFFDF8; --lead-surface-2: #EAE3D5; --lead-border: #CFC5AE; --lead-border-2: #DED5C1; --lead-title: #171410; --lead-text: #1F1B15; --lead-label: #565040; --lead-muted: #565040; --shadow: 0 4px 12px rgba(106, 82, 25, 0.20); --shadow-lg: 0 8px 24px rgba(106, 82, 25, 0.26); } html[data-theme="leao-claro"] .panel { border: 1px solid var(--panel-fio); } html[data-theme="leao-claro"] .panel-header { border-bottom: 1px solid rgba(106, 82, 25, 0.24); } /* ====================================================================== (1.1.58, refeito na segunda volta) SAKURA, em duas paletas. Liberado por ramal ("tema-sakura"). O PEDIDO foi uma FOTO e nao uma cor: "pode fazer um tema com base nessas cores ou nessa foto?... o da foto que eu mandei e um tema pro Daniel" (Pedro, 04/09/2026). O quadro e uma cerejeira gigante em flor sobre um lago de agua verde-jade, com barcos e cachoeira ao fundo. A PRIMEIRA VERSAO FEZ A PAGINA DE JADE, E ESTAVA ERRADA. O motivo declarado era evitar um quarto tema vermelho-arroxeado ao lado de Bordo, Rubi e Ametista. O motivo REAL, medido na foto depois da reclamacao ("a foto q enviei e predominante o vermelho e me devolveu um rosa", Pedro, 09/09/2026): familia vermelha (rosa/carmim + vermelho + magenta) 47,1% da area verde/jade 12,1% da area, so na faixa da agua Eu tinha feito do 12% a pagina e do 47% um fio de card. A inversao nao foi gosto, foi proporcao: o que a imagem tem de dominante e a copa, e a agua e uma faixa embaixo. E O TOM TAMBEM ESTAVA ERRADO, que e a segunda metade da queixa. Os 200 pixels de maior croma da copa medem, em LCh, L* 51 / C* 65 / h 15-25 — #D8283F, #E02D46, #DE264D. Isso e CARMIM, vermelho de verdade. O acento que eu havia escolhido (#E0447E) e rosa-quente, com matiz 20 graus para o lado do magenta e croma menor. Nenhum pixel da foto e aquela cor. COMO O TEMA FICA AGORA, e por que ele nao e o quarto Bordo: · a PAGINA e a copa em sombra (#2A0C16, carmim escuro). Bordo e #1C0D10, vinho marrom com verde e azul quase empatados; aqui o azul fica 9 unidades acima do verde, que e o que separa carmim de vinho a olho nu; · o JADE nao saiu, ele DESCEU para onde esta na foto: a faixa da cabeca do card (#1A3A30 chapado, tom medido na agua), o fio do card e a onda da textura. E a unica coisa verde do catalogo inteiro, e continua sendo o que distingue este tema dos outros tres avermelhados; · a FLOR PALIDA (#F2A6C6) fica na textura, sobre a pagina carmim. Na foto e isso que se ve: petala clara sobre folha vermelha, e nao petala clara sobre agua. A FAIXA DA CABECA E CHAPADA e nao um `color-mix`, e isto e uma licao que a primeira volta deu ao contrario. Jade misturado a 16-24% sobre um card carmim da CINZA (#2C2F30, satur. 0,04): as duas cores sao quase complementares e se anulam na mistura. Medido em cinco jades e cinco porcentagens, nenhuma combinacao passava de 0,27 de saturacao sem derrubar o contraste do titulo. Chapado, o #1A3A30 le como jade, da 6,12:1 no ouro do titulo e 5,07:1 no vermelho de erro. O Rubi claro e o Zebrado claro ja usam faixa chapada, pelo mesmo motivo: a cor precisa de um lugar onde vire AREA. O OURO CONTINUA SENDO O ACENTO, pelo argumento repetido desde o Bordo: trocar o ouro pelo carmim daria um painel inteiro sem a marca — e aqui haveria um custo extra, porque vermelho nesta tela significa ERRO. ====================================================================== */ html[data-theme="sakura"] { --bg-primary: #2A0C16; --bg-secondary: #37101D; --bg-tertiary: #471526; --border-color: #6B2439; /* (1.1.58, segunda volta) Os textos acompanham a superficie CARMIM: #FCF1F4 tem vermelho e azul acima do verde, que e a bruma clara da foto (medida em H 326-351) e nao um branco neutro. Antes da segunda volta este bloco dizia o contrario — texto puxando para o rosa porque a pagina era jade. A pagina virou o carmim, e o texto passou a ser a bruma DELE. */ --text-primary: #FCF1F4; --text-secondary: #E3C8D1; /* 5,51:1 sobre --bg-tertiary e 6,17:1 sobre o card, medidos. O cinza e QUENTE aqui (rosa acinzentado), porque acompanhar a pagina carmim e o que o mantem lido como cinza do tema em vez de cinza importado de outro. */ --text-muted: #B9939F; --precs-gold: #B49552; --precs-gold-soft: #D2AE52; --precs-gold-title: #D3B26B; --precs-gold-hi: #FFC95B; --precs-gold-light: rgba(180, 149, 82, 0.16); --precs-gold-forma: #B49552; --precs-wa-tinta-ouro: #2A0C16; --accent-3cplus: #B49552; --accent-3cplus-dark: #D2AE52; --accent-blue: #C6A75E; --accent-blue-hover: #D2AE52; --accent-blue-light: rgba(180, 149, 82, 0.16); --accent-manual: #F59336; /* (1.1.58, segunda volta) A COR DE ESTADO EM RISCO TROCOU DE LADO com a inversao. Antes era o verde de sucesso, que encostava na superficie jade; agora e o VERMELHO DE ERRO, que encosta na pagina carmim — e e o mesmo problema que o Rubi ja tinha, resolvido do mesmo jeito. O que separa os dois nao e o matiz (o `teste-temas.js` trava as cinco cores de estado em ±25 graus, e nenhuma delas muda aqui): e a LUMINANCIA. A pagina e o card sao escuros e chapados (L 5,9 no card) e o erro e sempre TEXTO ou PONTO claro. Medido, #F26D6D sobre o card da 5,73:1, e sobre o chip 5,12:1. O verde de sucesso, que era o vizinho antes, agora tem 8,79:1 sobre o card. */ --accent-green: #2BD4A0; --accent-green-light: rgba(43, 212, 160, 0.16); --accent-red: #F26D6D; --accent-red-light: rgba(242, 109, 109, 0.16); --accent-orange: #F7A93B; --accent-orange-light: rgba(247, 169, 59, 0.16); --on-accent-blue: var(--on-accent-ink); --accent-green-text: var(--accent-green); /* (1.1.58, mantido na segunda volta) Mesma recalibragem do Leao, e pela mesma causa: a faixa da cabeca reprovava contra o #F26D6D. Na faixa nova, que e o jade chapado #1A3A30, o #F58585 da 5,07:1 contra os 4,25:1 do #F26D6D — mesmo matiz, um tom acima. */ --accent-red-text: #F58585; --accent-manual-text: var(--accent-manual); --accent-orange-text: var(--accent-orange); --st-idle:#E3C8D1; --st-manual:#F59336; --st-call:#2BD4A0; --st-tpa:#5E6AD2; --st-mtpa:#A78BFA; --st-interval:#E8C46A; --st-offline:#6B4453; --m-cpc:#8AA0E6; --shadow: 0 0 0 1px rgba(252, 241, 244, 0.10), 0 10px 32px rgba(0, 0, 0, 0.66); --shadow-lg: 0 0 0 1px rgba(252, 241, 244, 0.10), 0 18px 48px rgba(0, 0, 0, 0.76); --lead-surface: #37101D; --lead-surface-2: #2A0C16; --lead-border: #6B2439; --lead-border-2: #83304A; --lead-title: #FCF1F4; --lead-text: #FCF1F4; --lead-label: #B49552; --lead-muted: #B9939F; } /* ---- SAKURA CLARO: as duas cores TROCAM DE PAPEL, que e a mesma inversao do par do Zebrado e do par do Rubi. No escuro a pagina e jade e o rosa e a assinatura; aqui a pagina e a flor (#F1DDE7) e o jade vira a faixa da cabeca e a flor da textura. O acento e o CARMIM DA COPA (#A81D45), medido na foto: 7,04:1 sobre o card e 5,55:1 sobre a pagina. Ate a 1.1.58 era o magenta #A32463, e ele caiu junto com o acento do escuro na mesma queixa — matiz 333 contra os 343 daqui, e nenhum pixel da foto naquela cor. POR QUE NAO O JADE NO TEXTO, que seria a inversao completa: `--m-atendidas` e verde (#08512A) e fica a dois centimetros de `--m-falado`, que usa o token de ouro. Dois verdes escuros lado a lado na mesma fila de metricas e ilegivel, e recalibrar uma cor de metrica por estetica e justamente o que a doutrina do arquivo nao deixa. O rosa resolve sem mexer em nada — e ainda mantem a flor no nome do tema. O QUE ELE ENCOSTA: Rubi claro (#9E121D) e Bordo claro sao os outros dois claros avermelhados, e a segunda volta aproximou este tema dos dois de proposito, porque foi o pedido. O que ainda separa: o azul da tinta (69 aqui contra 29 do Rubi) deixa o carmim rosado e o do Rubi puro; as paginas continuam distintas — #F1DDE7 e lilas, #E9C6CB e salmao —; e a faixa da cabeca e JADE aqui e PRETA no Rubi claro, que e a diferenca que se ve de longe, do mesmo tipo que separou o Rubi claro do Bordo claro na 1.1.55. */ html[data-theme="sakura-claro"] { --bg-primary: #F1DDE7; --bg-secondary: #FFFCFD; --bg-tertiary: #E8D1DD; --border-color: #C6A0B3; --text-primary: #1A1116; --text-secondary: #3D3138; --text-muted: #554750; --precs-gold: #A81D45; --precs-gold-soft: #A81D45; --precs-gold-title: #A81D45; --precs-gold-hi: #C22350; /* (1.1.58, conferido de novo na segunda volta) 0,14 -> 0,10, e este e o unico claro do arquivo com o realce mais fraco. `--precs-gold-light` e o fundo de hover do botao de modo TV, que fica na cabeca do card com o texto em `--precs-gold-title`. Com 0,14 da tinta sobre a pagina (#F1DDE7) o par reprovava em 4,38:1; com 0,10 a superficie para em #EACAD7 e o par da 4,76:1 com o carmim novo (era 4,66 com o magenta anterior). A tinta deste tema e mais escura que o ouro que os outros claros usam nesse papel, entao a mesma quantidade de tinta escurece mais. */ --precs-gold-light: rgba(168, 29, 69, 0.10); --m-falado: #A81D45; --m-duracao: #554750; --m-ligacoes: #7E3A00; --m-atendidas: #08512A; --m-taxa: #57209E; --m-cpc: #173FAE; --st-idle: #8A7580; --st-offline: #B79FAB; --precs-gold-forma: #A81D45; --precs-wa-tinta-ouro: #FFFCFD; --accent-blue: #1B3A9E; --accent-blue-hover: #142C78; --lead-surface: #FFFCFD; --lead-surface-2: #F1DDE7; --lead-border: #D4B2C1; --lead-border-2: #E2C8D4; --lead-title: #150E12; --lead-text: #1D1419; --lead-label: #554750; --lead-muted: #554750; --shadow: 0 4px 12px rgba(168, 29, 69, 0.20); --shadow-lg: 0 8px 24px rgba(168, 29, 69, 0.26); } html[data-theme="sakura-claro"] .panel { border: 1px solid var(--panel-fio); } html[data-theme="sakura-claro"] .panel-header { border-bottom: 1px solid rgba(168, 29, 69, 0.24); } /* ====================================================================== GALAXIA (1.1.83) — o ceu noturno, e a casa que faltava para o Constelacao. POR QUE ELE EXISTE. A 1.1.81 soltou o desenho de fundo do tema, e a primeira pergunta de quem usou foi "cade o Constelacao?". Ele existia so como papel de parede da conversa do WhatsApp — asterismos, poeira de estrelas e um cometa — e nao tinha tema nenhum. Agora tem. ONDE ELE MORA NO CATALOGO, e o espaco era estreito. Medido: Zebrado #0A0A0A o mais escuro com paleta Saphira #0C1220 azul-noite GALAXIA #0A0715 quase-preto roxo-azulado <— aqui Ametista #150C1F o roxo QUENTE, de pedra O Ametista e roxo de PEDRA, com brilho; este e o vazio entre as estrelas. Sem essa distancia os dois viravam irmaos na galeria. O RISCO QUE ELE CORRE, E QUE E O INVERSO DO HABITUAL. `--st-mtpa` (TPA manual) JA E ROXO (#A78BFA) e `--st-tpa` e indigo (#5E6AD2). A regra da casa e que a cor de ESTADO nao muda por tema; aqui o perigo e o tema INVADIR o territorio dela — roxo claro em superficie grande faria o selo de TPA manual parar de saltar. Por isso o roxo deste tema vive so nos tons ESCUROS (fundos e borda), e a assinatura dele e o MAGENTA, que nao disputa com nenhuma das cinco. O OURO DA MARCA FICA, como no Ametista, e por duas razoes. A de leitura: estrela dourada em ceu roxo e a imagem certa. E a tecnica: o balao proprio do WhatsApp nasce de `color-mix(--precs-gold-forma 22%, --bg-secondary)`, formula escrita para um ouro — o Bordo trocou e derrubou o tique de "lida". CONTRASTE, medido antes de este bloco existir, contra --bg-tertiary (#1B1433), que e o pior fundo por ser o mais claro dos tres: primario 15,01:1 · secundario 10,11:1 · muted 6,11:1 · ouro 6,16:1 O pior dos 29 pares e o muted, com 6,11 contra o piso de 4,5 — folga maior que a do Saphira (5,09), que e o vizinho mais apertado. ====================================================================== */ /* A textura do Galaxia E o Constelacao, que ate aqui so existia como papel do WhatsApp. Os quatro seletores sao o contrato da 1.1.80: a tela, o cartao da galeria, o emprestimo (0,2,1 para vencer o tema sem depender da ordem) e a miniatura da grade de fundos. Nenhum data-URI e copiado — a previa entra no MESMO bloco que pinta a tela. */ html[data-theme="galaxia"], .precs-tema-maquete[data-tema="galaxia"], html:root[data-canvas="galaxia"], .precs-fundo-mini[data-canvas="galaxia"]{ --precs-canvas-textura: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27200%27%20viewBox%3D%270%200%20200%20200%27%3E%3Cg%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%3E%3Cg%20stroke%3D%27%23D96BB0%27%20stroke-width%3D%27.8%27%20opacity%3D%27.16%27%3E%3Cpath%20d%3D%27M34%2040%20L58%2030%20L74%2052%20L58%2030%20L52%208%27%2F%3E%3Cpath%20d%3D%27M126%20132%20L150%20122%20L166%20144%20L150%20122%20L144%20100%27%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%27%23D96BB0%27%20stroke-width%3D%271%27%20opacity%3D%27.13%27%3E%3Cpath%20d%3D%27M150%2044%20q18%2010%2034%2032%27%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20fill%3D%27%23B49552%27%20opacity%3D%27.13%27%3E%3Cpath%20d%3D%27M34%2034c1.1%204%202.2%205.1%206.2%206.2-4%201.1-5.1%202.2-6.2%206.2-1.1-4-2.2-5.1-6.2-6.2%204-1.1%205.1-2.2%206.2-6.2z%27%2F%3E%3Cpath%20d%3D%27M126%20126c1.1%204%202.2%205.1%206.2%206.2-4%201.1-5.1%202.2-6.2%206.2-1.1-4-2.2-5.1-6.2-6.2%204-1.1%205.1-2.2%206.2-6.2z%27%2F%3E%3Cpath%20d%3D%27M150%2040c.8%203%201.6%203.8%204.6%204.6-3%20.8-3.8%201.6-4.6%204.6-.8-3-1.6-3.8-4.6-4.6%203-.8%203.8-1.6%204.6-4.6z%27%2F%3E%3Cpath%20d%3D%27M74%2047c.7%202.6%201.4%203.3%204%204-2.6.7-3.3%201.4-4%204-.7-2.6-1.4-3.3-4-4%202.6-.7%203.3-1.4%204-4z%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27%23B49552%27%20opacity%3D%27.15%27%3E%3Ccircle%20cx%3D%2758%27%20cy%3D%2730%27%20r%3D%272.1%27%2F%3E%3Ccircle%20cx%3D%2752%27%20cy%3D%278%27%20r%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27150%27%20cy%3D%27122%27%20r%3D%272.1%27%2F%3E%3Ccircle%20cx%3D%27166%27%20cy%3D%27144%27%20r%3D%271.8%27%2F%3E%3Ccircle%20cx%3D%27144%27%20cy%3D%27100%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27184%27%20cy%3D%2776%27%20r%3D%272.4%27%2F%3E%3Ccircle%20cx%3D%2716%27%20cy%3D%2796%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2796%27%20cy%3D%27176%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27188%27%20cy%3D%27188%27%20r%3D%271.2%27%2F%3E%3Ccircle%20cx%3D%278%27%20cy%3D%278%27%20r%3D%271.2%27%2F%3E%3Ccircle%20cx%3D%27104%27%20cy%3D%2764%27%20r%3D%271.2%27%2F%3E%3Ccircle%20cx%3D%2768%27%20cy%3D%27112%27%20r%3D%271%27%2F%3E%3Ccircle%20cx%3D%2724%27%20cy%3D%27160%27%20r%3D%271%27%2F%3E%3Ccircle%20cx%3D%27176%27%20cy%3D%2716%27%20r%3D%271%27%2F%3E%3Ccircle%20cx%3D%27112%27%20cy%3D%278%27%20r%3D%27.9%27%2F%3E%3Ccircle%20cx%3D%278%27%20cy%3D%27120%27%20r%3D%27.9%27%2F%3E%3Ccircle%20cx%3D%27192%27%20cy%3D%27112%27%20r%3D%27.9%27%2F%3E%3Ccircle%20cx%3D%2788%27%20cy%3D%27192%27%20r%3D%27.9%27%2F%3E%3Ccircle%20cx%3D%2740%27%20cy%3D%2780%27%20r%3D%27.9%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --precs-canvas-escala: 200px; } html[data-theme="galaxia"] { --bg-primary: #0A0715; --bg-secondary: #120D22; --bg-tertiary: #1B1433; --border-color: #2C2247; --text-primary: #EFEBFA; --text-secondary: #C8C0E0; --text-muted: #9B93BC; --precs-gold: #B49552; --precs-gold-soft: #D2AE52; --precs-gold-title: #D3B26B; --precs-gold-hi: #FFC95B; --precs-gold-light: rgba(180, 149, 82, 0.16); /* O par forma/tinta declarado como DECISAO e nao heranca — e a licao do Bordo, que omitiu o forma e saiu com o ouro da casa em 67 superficies. */ --precs-gold-forma: #B49552; --precs-wa-tinta-ouro: #0A0715; --accent-3cplus: #B49552; --accent-3cplus-dark: #D2AE52; /* O MAGENTA E A ASSINATURA, e ele entra aqui: nos temas escuros `--accent-blue` e o botao primario. E o unico lugar em que a cor do tema aparece em AREA, e foi escolhido por nao encostar em nenhuma das cinco cores de estado. */ /* O MAGENTA CLAREOU de #D96BB0 para ca, e o motivo e o efeito de segunda ordem que a casa ja pagou duas vezes (Santos claro e Bordo claro): `--accent-blue` nao e so o botao primario, ele e tambem o TIQUE DE "LIDA" do WhatsApp — e o tique cai sobre o BALAO PROPRIO (`color-mix(--precs-gold-forma 22%, --bg-secondary)` = #362B2D aqui), nao sobre a pagina. Medido: #D96BB0 dava 4,34:1 ali, abaixo do piso de 4,5. Com #E27FBE o tique vai a 5,20 e o botao segue com 7,08 contra a tinta escura. */ --accent-blue: #E27FBE; --accent-blue-hover: #EE97CE; --accent-blue-light: rgba(226, 127, 190, 0.16); --accent-manual: #F59336; --accent-green: #2BD4A0; --accent-green-light: rgba(43, 212, 160, 0.16); --accent-red: #F26D6D; --accent-red-light: rgba(242, 109, 109, 0.16); --accent-orange: #F7A93B; --accent-orange-light: rgba(247, 169, 59, 0.16); --on-accent-blue: var(--on-accent-ink); --accent-green-text: var(--accent-green); --accent-red-text: var(--accent-red); --accent-manual-text: var(--accent-manual); --accent-orange-text: var(--accent-orange); /* Os cinco do meio intocados, com o matiz travado em +/-25 graus pelo teste-temas.js. Os neutros acompanham a superficie, que e a brecha legitima. */ --st-idle:#C8C0E0; --st-manual:#F59336; --st-call:#2BD4A0; --st-tpa:#5E6AD2; --st-mtpa:#A78BFA; --st-interval:#E8C46A; --st-offline:#554A73; /* O CPC e AZUL-ESTRELA e nao roxo: `--m-taxa` ja e #A78BFA, e dois roxos no mesmo grafico ficam a 33 de distancia RGB — o teste-contraste.js exige 60. Medido: com este valor a menor distancia entre as seis metricas sobe para 89. */ --m-cpc:#7FB2F0; /* A aresta pega a temperatura da superficie que ela contorna — aqui, lilas. */ --shadow: 0 0 0 1px rgba(233, 226, 255, 0.11), 0 10px 32px rgba(0, 0, 0, 0.66); --shadow-lg: 0 0 0 1px rgba(233, 226, 255, 0.11), 0 18px 48px rgba(0, 0, 0, 0.76); --lead-surface: #120D22; --lead-surface-2: #0A0715; --lead-border: #2C2247; --lead-border-2: #3A2E5C; --lead-title: #EFEBFA; --lead-text: #EFEBFA; --lead-label: #B49552; --lead-muted: #9B93BC; } /* ---- GALAXIA CLARO. O espaco claro do catalogo esta lotado: #CFDDF3 azul (Saphira), #E1D4F2 lilas (Ametista), #F3E4C4 creme (Topazio), #EAE3D5 bege (Leao) e tres rosas. Para nao virar irmao do Ametista claro, este vai para o CINZA-AZULADO frio e deixa o magenta fazer a identidade sozinho. Medido contra --bg-primary (#DDDCEE), o pior fundo do tema por ser o mais escuro dos tres: primario 13,55:1 · secundario 8,79:1 · muted 6,48:1 · ameixa 7,54:1 · magenta como texto 5,58:1. */ /* O par claro da textura. Ele mora AQUI, depois de tudo, porque empata em (0,2,0) com `html[data-luz="claro"]` e quem decide o empate e a ORDEM — foi assim que o Rubi claro apareceu com o losango da familia. */ html[data-theme="galaxia-claro"], .precs-tema-maquete[data-tema="galaxia-claro"]{ --precs-canvas-textura: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27200%27%20viewBox%3D%270%200%20200%20200%27%3E%3Cg%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%3E%3Cg%20stroke%3D%27%235B2E6E%27%20stroke-width%3D%27.8%27%20opacity%3D%27.20%27%3E%3Cpath%20d%3D%27M34%2040%20L58%2030%20L74%2052%20L58%2030%20L52%208%27%2F%3E%3Cpath%20d%3D%27M126%20132%20L150%20122%20L166%20144%20L150%20122%20L144%20100%27%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%27%235B2E6E%27%20stroke-width%3D%271%27%20opacity%3D%27.16%27%3E%3Cpath%20d%3D%27M150%2044%20q18%2010%2034%2032%27%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20fill%3D%27%236A5219%27%20opacity%3D%27.16%27%3E%3Cpath%20d%3D%27M34%2034c1.1%204%202.2%205.1%206.2%206.2-4%201.1-5.1%202.2-6.2%206.2-1.1-4-2.2-5.1-6.2-6.2%204-1.1%205.1-2.2%206.2-6.2z%27%2F%3E%3Cpath%20d%3D%27M126%20126c1.1%204%202.2%205.1%206.2%206.2-4%201.1-5.1%202.2-6.2%206.2-1.1-4-2.2-5.1-6.2-6.2%204-1.1%205.1-2.2%206.2-6.2z%27%2F%3E%3Cpath%20d%3D%27M150%2040c.8%203%201.6%203.8%204.6%204.6-3%20.8-3.8%201.6-4.6%204.6-.8-3-1.6-3.8-4.6-4.6%203-.8%203.8-1.6%204.6-4.6z%27%2F%3E%3Cpath%20d%3D%27M74%2047c.7%202.6%201.4%203.3%204%204-2.6.7-3.3%201.4-4%204-.7-2.6-1.4-3.3-4-4%202.6-.7%203.3-1.4%204-4z%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27%236A5219%27%20opacity%3D%27.18%27%3E%3Ccircle%20cx%3D%2758%27%20cy%3D%2730%27%20r%3D%272.1%27%2F%3E%3Ccircle%20cx%3D%2752%27%20cy%3D%278%27%20r%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27150%27%20cy%3D%27122%27%20r%3D%272.1%27%2F%3E%3Ccircle%20cx%3D%27166%27%20cy%3D%27144%27%20r%3D%271.8%27%2F%3E%3Ccircle%20cx%3D%27144%27%20cy%3D%27100%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27184%27%20cy%3D%2776%27%20r%3D%272.4%27%2F%3E%3Ccircle%20cx%3D%2716%27%20cy%3D%2796%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2796%27%20cy%3D%27176%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27188%27%20cy%3D%27188%27%20r%3D%271.2%27%2F%3E%3Ccircle%20cx%3D%278%27%20cy%3D%278%27%20r%3D%271.2%27%2F%3E%3Ccircle%20cx%3D%27104%27%20cy%3D%2764%27%20r%3D%271.2%27%2F%3E%3Ccircle%20cx%3D%2768%27%20cy%3D%27112%27%20r%3D%271%27%2F%3E%3Ccircle%20cx%3D%2724%27%20cy%3D%27160%27%20r%3D%271%27%2F%3E%3Ccircle%20cx%3D%27176%27%20cy%3D%2716%27%20r%3D%271%27%2F%3E%3Ccircle%20cx%3D%27112%27%20cy%3D%278%27%20r%3D%27.9%27%2F%3E%3Ccircle%20cx%3D%278%27%20cy%3D%27120%27%20r%3D%27.9%27%2F%3E%3Ccircle%20cx%3D%27192%27%20cy%3D%27112%27%20r%3D%27.9%27%2F%3E%3Ccircle%20cx%3D%2788%27%20cy%3D%27192%27%20r%3D%27.9%27%2F%3E%3Ccircle%20cx%3D%2740%27%20cy%3D%2780%27%20r%3D%27.9%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --precs-canvas-escala: 200px; } html[data-theme="galaxia-claro"] { --bg-primary: #DDDCEE; --bg-secondary: #FBFAFE; --bg-tertiary: #EBE9F6; --border-color: #A9A4C8; --text-primary: #16131F; --text-secondary: #3A3350; --text-muted: #4E4668; /* No claro o ouro vira a cor do tema, como em todos os claros tematicos: branco e branco, e a paleta so cabe se ela mandar no texto e nas formas. */ --precs-gold: #5B2E6E; --precs-gold-soft: #5B2E6E; --precs-gold-title: #5B2E6E; --precs-gold-hi: #7A3E92; --precs-gold-light: rgba(91, 46, 110, 0.14); --precs-gold-forma: #5B2E6E; --precs-wa-tinta-ouro: #FBFAFE; --m-falado: #5B2E6E; /* A duracao puxa para o cinza-AZULADO pelo mesmo motivo do CPC acima: em #4E4668 ela ficava a 43 do ameixa do --m-falado. Com este valor, 67. */ --m-duracao: #455063; --m-ligacoes: #7E3A00; --m-atendidas: #08512A; --m-taxa: #4F1CA0; --m-cpc: #153BA8; --st-idle: #7C74A0; --st-offline: #A9A4C8; /* Mesma conta espelhada: aqui o balao proprio e #CBBDD3, e #8E2E72 dava 4,22:1 no tique. Escurecido, vai a 4,98 e o botao sobe para 8,55 contra a tinta clara. */ --accent-blue: #7D2865; --accent-blue-hover: #5F1C4C; --lead-surface: #FBFAFE; --lead-surface-2: #DDDCEE; --lead-border: #B6B0D2; --lead-border-2: #C7C2DE; --lead-title: #110E19; --lead-text: #1A1624; --lead-label: #4E4668; --lead-muted: #4E4668; --shadow: 0 4px 12px rgba(91, 46, 110, 0.20); --shadow-lg: 0 8px 24px rgba(91, 46, 110, 0.26); } html[data-theme="galaxia-claro"] .panel { border: 1px solid var(--panel-fio); } html[data-theme="galaxia-claro"] .panel-header { border-bottom: 1px solid rgba(91, 46, 110, 0.22); } /* ====================================================================== */ /* (1.1.45) (Tema) CONTRASTE CLARO — o par que faltava do tema de acessibilidade. ---------------------------------------------------------------------- O painel tinha um tema de alto contraste ESCURO e nenhum claro. Quem precisa de contraste alto e trabalha em sala clara ficava sem par: escolhia entre enxergar e não ser ofuscado. A REGRA DESTE TEMA, e o que o separa do Zebrado claro (que também é preto e branco): aqui o contorno é o protagonista. O `--border-color` é #7A7A7A e não um cinza de enfeite, porque este é o único tema do painel que se compromete com os 3:1 da WCAG 1.4.11 — medido, ele dá 4,29:1 sobre o card branco e 3,50:1 sobre o fundo #E8E8E8, que é a pior das duas superfícies. O Zebrado claro usa #D8D8D8, que é escolha estética. O ouro da marca NÃO aparece como texto aqui, pela mesma razão dos outros claros: ouro sobre claro não fecha 4,5:1. Ele vira preto nos papéis de tinta e continua existindo como FORMA. */ html[data-theme="contraste-claro"] { --bg-primary: #E8E8E8; --bg-secondary: #FFFFFF; --bg-tertiary: #F2F2F2; /* O token que dá nome ao tema. Ver o comentário acima para as duas medições. */ --border-color: #7A7A7A; --text-primary: #000000; --text-secondary: #262626; --text-muted: #4A4A4A; --precs-gold: #000000; --precs-gold-soft: #000000; --precs-gold-title: #000000; --precs-gold-hi: #262626; --precs-gold-light: rgba(0, 0, 0, 0.10); --m-falado: #000000; --m-duracao: #4A4A4A; /* Os quatro das métricas escurecem em relação ao `:root`: sobre branco puro os tons médios do padrão ficam no limite dos 4,5:1, e um tema de acessibilidade não pode viver no limite. */ --m-ligacoes: #8A3E00; --m-atendidas: #0B5C2E; --m-taxa: #56209F; --m-cpc: #17399E; /* Os dois neutros de estado, que são os únicos do conjunto que podem mudar por tema — eles não significam nada além de "sem atividade", então não há vocabulário para o operador reaprender. Aqui os dois passam os 3:1 sobre o pior fundo, o que não é exigido deles em nenhum outro tema mas é o compromisso deste. */ --st-idle: #5A5A5A; --st-offline: #767676; --lead-surface: #FFFFFF; --lead-surface-2: #E8E8E8; --lead-border: #7A7A7A; --lead-border-2: #A0A0A0; --lead-title: #000000; --lead-text: #141414; --lead-label: #4A4A4A; --lead-muted: #4A4A4A; /* Sombra mais funda que a dos outros claros: com o fundo #E8E8E8 e o card branco, ela é o segundo sinal de que o card é um objeto — o primeiro é o contorno forte. */ --shadow: 0 4px 12px rgba(0, 0, 0, 0.16); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.22); } html[data-theme="contraste-claro"]{ --precs-gold-forma: #000000; --precs-wa-tinta-ouro: #FFFFFF; /* O azul escurece pelo mesmo motivo do Zebrado claro, e um pouco mais: sobre branco puro o tique de "lida" é o sinal mais consultado da conversa. */ --accent-blue: #14379B; --accent-blue-hover: #0E2870; } /* A faixa preta na cabeça do card é o que dá ÁREA ao tema. Sem ela um tema claro só se distingue por detalhes finos, e foi exatamente esse o diagnóstico de "o claro não mudou muito" — a família clara declara menos tokens de superfície que a escura, então a cabeça do card é o único lugar onde ela pode pôr cor de verdade. */ html[data-theme="contraste-claro"] { --panel-cabeca: #000000; --panel-cabeca-tinta: #FFFFFF; } html[data-theme="contraste-claro"] { --panel-fio: var(--border-color); } /* O REMAPA LOCAL DA FAIXA, herdado do Zebrado claro pelo mesmo motivo: dentro de uma faixa PRETA, os filhos que derivam do ouro (que aqui é preto) desapareceriam. Trocar as variáveis no escopo da faixa inverte todos de uma vez, sem enumerar filho por filho. */ html[data-theme="contraste-claro"] .panel-header { --precs-gold: var(--panel-cabeca-tinta); --precs-gold-title: var(--panel-cabeca-tinta); --bg-primary: var(--panel-cabeca); --accent-red-text: var(--accent-red); --accent-orange-text: var(--accent-orange); --accent-green-text: var(--accent-green); --accent-manual-text: var(--accent-manual); } html[data-theme="contraste-claro"] .panel { border: 1px solid var(--panel-fio); } html[data-theme="contraste-claro"] .panel-header { border-bottom: 1px solid rgba(255, 255, 255, 0.16); } /* O fio dourado do contorno do painel vira o preto do tema, pelo mesmo motivo do Bordô. */ html[data-theme="zebrado-claro"] .panel { border: 1px solid var(--panel-fio); } /* (1.1.43) O DIVISOR INVERTEU JUNTO COM A FAIXA. Um fio de preto a 14% sobre a faixa chapada #101010 é invisível, e ele é o que separa a cabeça do corpo do card. Branco a 16% faz o mesmo trabalho do lado escuro da linha. */ html[data-theme="zebrado-claro"] .panel-header { border-bottom: 1px solid rgba(255, 255, 255, 0.16); } /* PRECS — indicador de "atualizando" nos gráficos: a estrela dourada da marca (mesma do loader Precs), pulsando/girando de leve. Substitui o antigo anel genérico para manter a identidade PRECS mesmo no indicador pequeno. */ .pm-loader{ display:inline-block; width:15px; height:15px; margin-left:var(--space-2); vertical-align:middle; background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cpath fill='%23B49552' d='M0 -9 C1.4 -2.6 2.6 -1.4 9 0 C2.6 1.4 1.4 2.6 0 9 C-1.4 2.6 -2.6 1.4 -9 0 C-2.6 -1.4 -1.4 -2.6 0 -9 Z'/%3E%3C/svg%3E"); animation:precsStar 1.2s ease-in-out infinite; } /* animação da estrela PRECS usada nos indicadores pequenos e no aviso do dia */ @keyframes precsStar{ 0% { transform:rotate(0deg) scale(.7); opacity:.55; } 50% { transform:rotate(180deg) scale(1); opacity:1; } 100% { transform:rotate(360deg) scale(.7); opacity:.55; } } @media (prefers-reduced-motion: reduce){ .pm-loader{ animation:none; } } /* entrada suave do card de mailing ao cair a ligação */ .precs-entra{ animation:precsLeadIn .32s var(--ease-2); } /* saída suave dos cards de atendimento ao qualificar (fade + leve descida) */ .precs-sai{ animation:precsSai .28s ease forwards !important; pointer-events:none; } @keyframes precsSai{ to{ opacity:0; transform:translateY(10px) scale(.985); } } @media (prefers-reduced-motion: reduce){ .precs-ocioso-grafico, .og-bar, .og-bar i, .precs-entra, .precs-sai{ transition:none; animation:none; } } /* PRECS — logo horizontal no header (transparente, serve aos dois temas) */ .precs-brand-logo { height: 34px; width: auto; aspect-ratio: 1024 / 267; /* reserva o box e evita o "flash" da logo grande ao abrir */ display: block; object-fit: contain; } /* PRECS — botão de alternância de tema no header */ .precs-theme-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-color); background: var(--bg-tertiary); color: var(--text-primary); font-size: 1.1rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 0; box-sizing: border-box; transform-origin: center center; /* (1.1.41) Ancora do contador de nao-lidas (.precs-wa-badge). Ele ja ficaria no lugar por tabela: a regra `[data-tip]{ position: relative }` la em cima pega este botao, porque ele tem tooltip. Depender disso e depender de uma regra escrita para OUTRA coisa: no dia em que o tooltip mudar de tecnica, a pastilha vai para o canto da tela. */ position: relative; transition: background var(--dur-2), border-color var(--dur-2), transform var(--dur-1); } /* (1.1.10) DUAS MELHORIAS PEQUENAS, E A SEGUNDA TEM UMA RESTRIÇÃO IMPORTANTE. 1) O tint do hover era `rgba(255,187,58,.12)` CRAVADO — o âmbar da marca 3C, fixo nos cinco estados de cor, enquanto a borda ao lado usava token e acompanhava o tema. No tema PRECS o botão ficava com contorno dourado e miolo âmbar. Agora os dois saem do mesmo token, e o dourado da marca vem primeiro. 2) A ENGRENAGEM GIRA no hover — e gira o SVG, não o botão. A diferença não é estética: o comentário logo abaixo registra que transform no BOTÃO fazia o ícone torcer e o tooltip escalar junto (o balão de `data-tip` é um `::after` DELE, então herda qualquer transform). Girar só o filho mantém o botão e o balão parados. 45° porque a engrenagem tem oito dentes: o giro "encaixa" no lugar em vez de parar torto. */ /* (1.1.61) O PAR DE `[hidden]`, E ESTA E A TERCEIRA OCORRENCIA DA MESMA ARMADILHA. `display` de AUTOR vence o `[hidden]{display:none}` do navegador, que e regra de UA. Com o `display:inline-flex` acima e sem esta linha, `btn.hidden = true` escreve o atributo e NAO esconde nada. RELATO DO PEDRO EM 09/09/2026, com dois prints: "o botao ainda aparece mesmo eu sendo supervisor". `precsWaDisponivel()` devolvia `false` corretamente, `precsWaBotaoAtualizar` escrevia `hidden = true` corretamente, e o botao continuava na tela. Eu cheguei a suspeitar de cache do navegador, e estava errado: o defeito era esta linha que faltava. E O MEU TESTE NAO PEGOU porque ele media `btn.hidden`, a PROPRIEDADE, em vez do `display` COMPUTADO. O comentario de `50-modais.css:296` avisa exatamente isso, e nomeia quem pegou a segunda ocorrencia: o `teste-supervisao-tabela.js`, "medindo `getComputedStyle(...).display` do botao". A licao vale para o teste tanto quanto para o CSS: medir a propriedade e medir a intencao, e o que o olho ve e o `display`. As duas ocorrencias anteriores estao em `50-modais.css:288` (`.precs-seg`, o contentor da faixa de abas da Escuta) e `:296` (o botao da aba Campanhas do perfil de shadow). Aquele comentario termina com "declarar o par junto e o que impede a terceira ocorrencia" — e esta e a terceira, num arquivo diferente, dez levas depois. */ .precs-theme-btn[hidden] { display: none; } .precs-theme-btn svg { transition: transform .28s var(--ease-1); } /* PRECS (1.1.57) — A ROTACAO E SO DA ENGRENAGEM. A regra era `.precs-theme-btn:hover svg` e nao distinguia os dois botoes do header, entao o LOGO DO WHATSAPP girava 45 graus no hover junto com a engrenagem. Provado pela matriz computada com o mouse em cima: `matrix(0.707107, 0.707107, -0.707107, 0.707107, 0, 0)`. Girar um icone de MECANISMO e leitura: a engrenagem faz o que engrenagem faz. Girar uma MARCA nao — o olho le como elemento torto, nao como reacao. Sao gestos diferentes porque os dois simbolos sao coisas diferentes. */ #precs-prefs-btn:hover svg { transform: rotate(45deg); } /* O WhatsApp ganha o gesto dele: uma aproximacao curta, sem girar. */ #precs-wa-btn:hover svg { transform: scale(1.14); } .precs-theme-btn:hover { border-color: var(--precs-gold, var(--accent-3cplus)); background: color-mix(in srgb, var(--precs-gold, var(--accent-3cplus)) 14%, transparent); transform: translateY(-1px); } /* PRECS — clique: ZERO mudança geométrica (mantém o MESMO transform do hover); o feedback do clique é só a cor de fundo. Assim o ícone não torce nem pula, seja por scale/transform-origin, seja pelo tooltip escalando junto. */ .precs-theme-btn:active { transform: translateY(-1px); background: color-mix(in srgb, var(--precs-gold, var(--accent-3cplus)) 24%, transparent); } /* (1.1.39) ACESO = "este botão está com uma tela aberta, e clicar fecha". Nasceu para o botão do WhatsApp: com a saída do "← discador" de dentro da lista, ele virou a porta de saída em tela cheia, e uma porta que parece igual a todas as outras não é encontrada. `.on` é genérico de propósito — qualquer `.precs-theme-btn` que abra uma tela pode usar o mesmo estado. */ .precs-theme-btn.on { border-color: var(--precs-gold-forma, var(--precs-gold, #B49552)); background: color-mix(in srgb, var(--precs-gold-forma, #B49552) 18%, transparent); color: var(--precs-gold-title, var(--precs-gold, #B49552)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--precs-gold-forma, #B49552) 40%, transparent); } @media (prefers-reduced-motion: reduce) { .precs-theme-btn svg { transition: none; } /* (1.1.57) A guarda cobria so o SVG e deixava passar a transicao e o `translateY(-1px)` do proprio botao — cobertura pela metade, que e o tipo de buraco que so aparece quando alguem lista o que cada bloco de fato desliga. */ .precs-theme-btn { transition: none; } #precs-prefs-btn:hover svg, #precs-wa-btn:hover svg { transform: none; } .precs-theme-btn:hover, .precs-theme-btn:active { transform: none; } } /* (1.1.10) Era o anel mais fraco do painel inteiro: `outline:none` mais uma faixa de --accent-blue-light, que vale rgba(...,0.1) no tema claro. Ou seja, foco por teclado no botão de tema do header não deixava NADA sólido na tela — 10% de opacidade e mais nada. Volta ao padrão dourado de 2px, igual ao resto. */ /* ====================================================================== (1.1.41) O CONTADOR DE NAO-LIDAS DO BOTAO DO WHATSAPP. Pastilha no canto superior direito do circulo de 40px. Ela mora DENTRO do botao, entao precisa do `position:relative` do proprio botao — e o botao gira o SVG filho no hover (ver `.precs-theme-btn svg`), nao ele mesmo, entao a pastilha nao roda junto. A cor e o ouro CHEIO com tinta escura por cima, e nao a lavagem que o resto do modo usa: um badge de nao-lida existe para ser visto na visao periferica, e lavado ele desaparece ao lado do proprio botao aceso. `--precs-wa-tinta-ouro` e o mesmo token que o botao de enviar usa para escrever sobre ouro cheio. */ /* (1.1.57) ELE APARECIA DE ESTALO. A pastilha nascia com o número já lá, sem transição nenhuma — e ela é justamente o elemento que muda sozinho, sem o operador ter feito nada. Uma entrada curta é o que separa "chegou mensagem" de "sempre esteve aí". */ /* (1.1.147) MAIOR E COM PULSO. "O numero de notificacoes nos botoes la de cima pode ficar mais aparente" (Pedro, 28/09/2026): 17 -> 20 px, o tipo sobe um degrau e a pastilha pulsa a cada mudanca de numero (.pisca, posta pelo JS), com o mesmo ouro. A cor de destaque, e nao o vermelho: no painel vermelho e "nao aceitou", e uma mensagem nova nao e um erro. */ .precs-wa-badge{ animation: precsWaBadgeEntra var(--dur-3) var(--ease-2) both; position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 var(--space-1); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill, 999px); background: var(--precs-gold-forma, #B49552); color: var(--precs-wa-tinta-ouro, #131315); font-family: 'Manrope', 'Poppins', sans-serif; font-size: var(--fs-3); font-weight: 700; line-height: 1; /* O anel da cor do fundo do header separa a pastilha da borda do botao: sem ele os dois circulos se encostam e viram uma forma so. */ box-shadow: 0 0 0 2px var(--bg-secondary); pointer-events: none; } @keyframes precsWaBadgeEntra { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } } .precs-wa-badge.pisca{ animation: precsWaBadgePisca .5s var(--ease-2); } @keyframes precsWaBadgePisca { 0% { transform: scale(1); } 35% { transform: scale(1.4); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .precs-wa-badge, .precs-wa-badge.pisca { animation: none; } } .precs-theme-btn:focus-visible { outline: 2px solid var(--precs-gold, var(--accent-3cplus)); outline-offset: 2px; box-shadow: 0 0 0 5px var(--precs-gold-light, rgba(180,149,82,.35)); } /* PRECS — escala da interface (afeta tudo: fonte, padding, ícones). Usa zoom no header e main para escalar de forma proporcional. Reescalado para baixo: o operador trabalha com mais informação na tela. */ html[data-fonte="compacto"] header, html[data-fonte="compacto"] main { zoom: 0.72; } html[data-fonte="normal"] header, html[data-fonte="normal"] main { zoom: 0.85; } html[data-fonte="confortavel"] header, html[data-fonte="confortavel"] main { zoom: 1; } /* (1.1.15 · 8ª volta) O ESPELHO, AO CONTRÁRIO, PRECISA DO ZOOM — e ele é a raiz de dois defeitos relatados em 19/08/2026 na mesma frase: "os dados do mailing estão gigantes" e "as qualificações também ficaram gigante". O espelho reusa as classes do discador (`.detail-card`, `.qualification-item`) para não existirem duas aparências da mesma tela. Só que o overlay é filho de , e o painel do operador vive dentro do `main`, que roda com zoom 0,85 — então a MESMA regra CSS renderizava 18% maior no espelho. Não era escolha de tamanho: era o zoom faltando. Com ele, o espelho passa a ler exatamente como a tela dele, na densidade que ESTE supervisor escolheu em Preferências, e sem uma segunda escala de fontes para manter em sincronia. ATENÇÃO a quem mexer aqui: vh dentro de elemento com zoom mede a viewport inteira, então toda altura em vh do espelho DIVIDE por --precs-escala (o mesmo cuidado do mailing do operador, documentado acima). */ html[data-fonte="compacto"] .precs-espelho-modal { zoom: 0.72; } html[data-fonte="normal"] .precs-espelho-modal { zoom: 0.85; } html[data-fonte="confortavel"] .precs-espelho-modal { zoom: 1; } /* (1.1.96) E A BANDA DE ALTURA TAMBÉM, pelo motivo que o bloco acima já escreve: o espelho reusa as classes do discador e precisa rodar no MESMO zoom do painel, senão a mesma regra de CSS renderiza maior aqui. Quando a escala passou a depender da tela, esquecer esta regra recriou na hora o defeito de 19/08 — o `teste-supervisao-spy` pegou na primeira volta, comparando o zoom do espelho com o do `main`. A tabela é a mesma do . */ html[data-alt="alta"][data-fonte="compacto"]:not([data-tv]):not([data-aparelho]) .precs-espelho-modal { zoom: 0.85; } html[data-alt="alta"][data-fonte="normal"]:not([data-tv]):not([data-aparelho]) .precs-espelho-modal { zoom: 1; } html[data-alt="alta"][data-fonte="confortavel"]:not([data-tv]):not([data-aparelho]) .precs-espelho-modal { zoom: 1.12; } /* PRECS — Modal de Preferências */ .precs-prefs-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px); z-index: 2000; align-items: flex-start; justify-content: center; padding-top: 8vh; /* Rede de segurança para tela muito baixa: se até o modal com teto de altura não couber, o próprio overlay rola. O padding embaixo garante que o fim do modal não encoste na borda quando isso acontecer. */ padding-bottom: 4vh; overflow-y: auto; } .precs-prefs-overlay.open { display: flex; } /* saída animada do modal (antes o fechar era instantâneo) */ .precs-prefs-overlay.closing { animation: precsOverlayOut var(--dur-2) ease forwards; } .precs-prefs-overlay.closing .precs-prefs-modal { animation: precsModalOut var(--dur-2) var(--ease-3) forwards; } @keyframes precsOverlayOut { from { opacity: 1; } to { opacity: 0; } } @keyframes precsModalOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px) scale(0.98); } } @media (prefers-reduced-motion: reduce) { .precs-prefs-overlay.closing, .precs-prefs-overlay.closing .precs-prefs-modal { animation: none; } } /* PRECS — O MODAL NÃO PASSA DA TELA. Não havia teto de altura nem rolagem: o overlay é position:fixed, então o que passava da viewport ficava INALCANÇÁVEL — nem a página nem o modal rolavam, e diminuir o zoom não resolvia porque o teto era a própria janela. Ficou visível quando o grupo de preview de operador entrou, mas o defeito já existia e apareceria em qualquer notebook de tela baixa. Agora o modal é uma coluna flex com teto em vh: cabeçalho e o botão de fechar ficam sempre no lugar, e só o CORPO rola. */ .precs-prefs-modal { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-card); width: 92%; max-width: 420px; box-shadow: var(--shadow-lg); animation: precsLeadIn 0.25s var(--ease-2); display: flex; flex-direction: column; max-height: 84vh; } .precs-prefs-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-color); font-weight: 600; color: var(--text-primary); } .precs-prefs-close { background: none; border: none; color: var(--text-muted); font-size: 1rem; cursor: pointer; width: 30px; height: 30px; border-radius: var(--radius-inner); transition: background var(--dur-2), color var(--dur-2); } .precs-prefs-close:hover { background: var(--bg-tertiary); color: var(--text-primary); } .precs-prefs-body { padding: var(--space-5); overflow-y: auto; flex: 1 1 auto; min-height: 0; } .precs-prefs-group { margin-bottom: var(--space-6); } .precs-prefs-group:last-child { margin-bottom: 0; } .precs-layout-actions { display: flex; gap: var(--space-2); } .precs-layout-btn { flex: 1; font-size: 0.85rem; padding: var(--space-2) var(--space-2); } .precs-layout-btn.precs-btn-bloqueado, .precs-layout-btn:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.4); } /* ========================================================================= (1.1.80) A GRADE DE FUNDOS, dentro da galeria de temas. A miniatura mostra a FORMA na tinta do tema atual — que é exatamente como o desenho vai aparecer se for escolhido. Ela usa a máscara pelo mesmo motivo da tela: a prévia tem de prometer o que a tela entrega. ========================================================================= */ .precs-fundos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: var(--space-3); margin-top: var(--space-2); } .precs-fundo-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-inner); border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-secondary); font-size: var(--fs-2); font-family: var(--font-rotulo); cursor: pointer; transition: border-color .14s ease, background-color .14s ease; } .precs-fundo-card:hover { border-color: var(--precs-gold); } .precs-fundo-card.active { border-color: var(--precs-gold); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--precs-gold); } .precs-fundo-mini { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius-sm); background: var(--bg-primary); position: relative; overflow: hidden; } .precs-fundo-mini::after { content: ''; position: absolute; inset: 0; /* Mesma conta do fundo da tela: o alfa ja vem dentro do SVG, entao aqui e 1. */ background: currentColor; color: var(--text-primary); opacity: 1; -webkit-mask-image: var(--precs-canvas-textura); mask-image: var(--precs-canvas-textura); -webkit-mask-size: var(--precs-canvas-escala, 120px) var(--precs-canvas-escala, 120px); mask-size: var(--precs-canvas-escala, 120px) var(--precs-canvas-escala, 120px); -webkit-mask-repeat: repeat; mask-repeat: repeat; } /* A opacidade da prévia é MAIOR que a da tela (.22 contra .07) de propósito: num retângulo de 88px o desenho na força real seria invisível, e uma prévia que não mostra o que se escolhe não é prévia. */ .precs-fundo-mini[data-canvas="liso"]::after, .precs-fundo-mini[data-canvas="padrao"]::after { content: none; } /* "Do tema" mostra o desenho NATIVO, com as cores originais — é o que ele entrega. */ .precs-fundo-mini[data-canvas="padrao"] { background-image: var(--precs-canvas-textura, none); background-size: var(--precs-canvas-escala, 120px) var(--precs-canvas-escala, 120px); background-repeat: repeat; background-color: var(--bg-primary); }