/* ========================================================================== Educabolsa — cor de marca no Evo CRM. (DESVIO 17 ¡ 20/09/2026) Servido em /brand-assets/eb-brand.css e INJETADO pelo nginx (sub_filter) no do index.html. 🔑 POR QUE INJETADO, E NAO EDITADO: o CSS do app e `assets/index-.css`. Reescrever aquele arquivo exigiria montar por cima de um nome com hash, que muda a cada build -- e o patch morreria EM SILENCIO no upgrade. Injetar uma folha nossa depois da dele vence por ordem de cascata e nao depende do hash. 🔑 E POR QUE SO TOKEN, E NAO REGRA: medido no navegador em 20/09 -- o verde do Evo e o token `--primary` (`oklch(88.18% .202 159.34)`), nao as paletas `emerald-500`/`green-500` que aparecem no CSS compilado. Trocar o token repinta menu, botoes, icones e bordas de card de uma vez, sem tocar em nada mais. ========================================================================== */ :root, .dark { --primary: #7F13EC; /* roxo oficial (DESIGN.md) */ --color-primary: #7F13EC; /* ⚠ī¸ OBRIGATORIO trocar junto: o verde do fornecedor e CLARO, entao o texto em cima dele era quase preto (`oklch(.205 0 0)`). Com o roxo, que e escuro, manter aquilo deixaria o botao "Novo Pipeline" ilegivel. Conferido na tela. */ --primary-foreground: #FFFFFF; --color-primary-foreground: #FFFFFF; } /* -------------------------------------------------------------------------- 🔴 O QUE O TESTE AO VIVO DERRUBOU. A hipotese era "emerald = marca, green = sucesso". FALSO: os dois sinais de SUCESSO da tela de pipelines tambem usam `--primary`, entao trocar o token sozinho deixava "Ganhos" e o selo "Ativo" ROXOS -- quebrando o significado da cor sem quebrar nada tecnicamente. As duas regras abaixo devolvem o verde ORIGINAL (mesmo valor, nao um parecido) ao que significa sucesso. -------------------------------------------------------------------------- */ /* o "check" de Ganhos */ svg.lucide-circle-check { color: oklch(88.18% .202 159.34); } /* o selo de status "Ativo" ⚠ī¸ O ancoradouro e a COMBINACAO de utilitarios, porque o selo nao tem atributo semantico proprio. Se outro selo usar exatamente `bg-primary/10 text-primary`, ele tambem volta a verde -- conferir ao aparecer um status novo. */ span.bg-primary\/10.text-primary { color: oklch(88.18% .202 159.34); background-color: color-mix(in oklch, oklch(88.18% .202 159.34) 12%, transparent); } /* ⚠ī¸ GRAFICOS: NAO tocados. As series usam os slots `--chart-1..5` (o 2 e verde), que sao uma PALETA -- repintar um slot para roxo o deixa igual ao `--chart-4`, que ja e roxo, e duas series viram a mesma cor. No dia 20/09 os graficos estavam sem dado, entao nao havia o que julgar na tela. Reabrir quando houver volume. */ /* -------------------------------------------------------------------------- SELO DE STATUS SOLIDO — telas de produto, canais e afins. 🔴 Achado DEPOIS, pelo Gustavo: o "Ativo" continuava roxo fora dos pipelines. Sao DOIS componentes diferentes para a mesma ideia: - pipelines: (suave) - produtos : [data-slot="badge"] com bg-primary (solido, shadcn) A regra de cima nao alcancava o segundo -- e so olhar UMA tela nao mostrava. ⚠ī¸ A ancora e o data-slot, NAO "bg-primary" sozinho: no bundle, `bg-primary` aparece 67 vezes e e o acento generico do design system (switch ligado, tooltip, slider, selecao de texto, intervalo de calendario). Pintar tudo de verde estragaria todos esses -- eles DEVEM seguir roxos. ⚠ī¸ O !important foi MEDIDO como necessario: sem ele o fundo virava verde e o texto continuava branco (herdado de --primary-foreground), dando texto branco sobre verde claro. Com a regra, o texto volta a ser escuro, como no original. -------------------------------------------------------------------------- */ [data-slot="badge"].bg-primary { background-color: oklch(88.18% .202 159.34) !important; color: oklch(.205 0 0) !important; border-color: transparent !important; } /* ⚠ī¸ LIMITE CONHECIDO: se algum selo NAO-status usar a variante default do Badge, ele tambem fica verde. Nas telas varridas em 20/09 -- login, pipelines, dashboard e produtos -- todo Badge solido era status. Conferir quando aparecer um selo novo. ↩ī¸ REVISTO em 20/09: a nota anterior dizia que o rodape do fornecedor ficava, por ser aviso de COPYRIGHT e nao marca. O Gustavo leu a licenca: ela EXIGE trocar esses valores em versao modificada. Entao o texto do rodape passou a ser reescrito pelo nginx (sub_filter no bundle), e os dois links do fornecedor saem pela regra acima. */ /* -------------------------------------------------------------------------- RODAPE DA BARRA LATERAL — os dois links do fornecedor (Documentacao e Suporte, que apontam para docs.evolutionfoundation.com.br) saem da tela. Decisao do Gustavo em 20/09, apos ler a licenca: ela EXIGE trocar esses valores quando ha modificacao -- entao trocar deixou de ser opcional. A ancora e o container dos links, irmao do bloco de marca e do copyright. -------------------------------------------------------------------------- */ .border-sidebar-border > .mt-2.flex.flex-col.gap-1.text-xs { display: none !important; } /* -------------------------------------------------------------------------- QUEBRA DE LINHA DO COPYRIGHT. Sem isto, "Š 2026 Alotropia Servicos. Todos os direitos reservados." quebra onde a barra lateral acabar -- no meio da frase. O par que resolve: 1. o sub_filter do nginx troca "Evolution Foundation. " por "Alotropia Servicos.\n" (a sequencia de DUAS letras, nao uma quebra real: quebra de verdade dentro de string JS deixa o literal aberto e DERRUBA o bundle -- conferido com `node --check` no teste do conf); 2. esta regra, que faz o \n ser renderizado em vez de virar espaco. ⚠ī¸ `pre-line` (e nao `pre`) de proposito: respeita a quebra explicita e segue quebrando sozinho se a barra lateral for estreita demais. -------------------------------------------------------------------------- */ .border-sidebar-border > .text-xs.text-muted-foreground.mt-1 { white-space: pre-line; } /* -------------------------------------------------------------------------- TAMANHO DA LOGO. A img do cabecalho e `h-8 max-w-32` (32px de altura, teto de 128px de largura). Com o viewBox ja apertado, a marca passa a ocupar a altura inteira -- e o teto de largura vira o novo limite, por isso ele sobe junto. ⚠ī¸ O cabecalho tem 65px com py-3, ou seja ~41px uteis: 40px e o maximo que cabe sem empurrar a barra. Medido na tela, nao estimado. -------------------------------------------------------------------------- */ img.h-8.max-w-32[src*="EVO_CRM"] { height: 40px !important; max-width: 220px !important; /* ⚠ī¸ A img termina exatamente onde o botao de ocultar a barra comeca (medido: 208 e 208). Sem esta folga, o ultimo glifo encosta no icone. */ margin-right: 10px !important; }