/* ========================================================================== Academia Desinflame — ÁREA DE FORMAÇÃO (LMS admin) no padrão da casa · 2026-08-04 O QUE ESTAVA ERRADO (diagnosticado por medição, não no olho): 1. TEXTO BRANCO EM FUNDO BRANCO — e a causa é GLOBAL, não do LMS. O bundle traz um KIT ESCURO inteiro no `:root` (`--bg-page:#05080B`, `--fg-1: rgba(255,255,255,.94)`, rampa teal) e declara `html, body { color: var(--fg-1) }`. Ou seja: a cor PADRÃO do documento é branca. A maior parte do app não sofre porque as classes do Tailwind cravam a cor; o LMS admin herda — e some. Medido: os `

` "Formação" e "Área de Formação" com contraste 1.00 sobre a sidebar branca. → conserto no §1: a cor padrão do documento passa a ser a tinta do design system. Uma declaração, e vale pro app inteiro. 2. TÍTULO COM GRADIENTE CLARO RECORTADO NO TEXTO. "Módulos do Curso" usa `bg-clip-text text-transparent` com gradiente `from-text-primary` — e `--text-primary` também é do kit escuro (rgb 250,250,250). Em página clara o título fica invisível. 3. PALETA FORA DO DESIGN SYSTEM. As telas usam duas cores de marca antigas: `aurora` rgb(0,235,207) e `revenue` rgb(28,202,91) — o verde/teal dos botões, dos números dos módulos, das barras e dos borrões de fundo. Nosso sistema é navy (#0A1F3B) com acento lilás. ESCOPO: tudo daqui pra baixo vale só nas telas do LMS admin, presas pelo `:has()` na sidebar própria delas (links /formacao/aulas etc.) — sem precisar de classe nova no DOM nem de JS. ========================================================================== */ /* -------------------------------------------------------------------------- §1 — A COR PADRÃO DO DOCUMENTO (global, 1 declaração) O kit escuro do bundle pinta `html, body` com `--fg-1` (branco). Como o sistema é claro de ponta a ponta, o padrão tem que ser a tinta do DS. Quem precisa de texto claro (ilha do consultor, heróis navy, tooltips) declara a própria cor e continua ganhando por especificidade. -------------------------------------------------------------------------- */ html, body { color: var(--via-text-body, #344054); } /* ========================================================================== §2 — LMS ADMIN ========================================================================== */ :root { --x8lms: 1; } /* marcador de folha carregada (debug) */ /* ---- 2.0 A PALETA, NA FONTE (o conserto que dispensa caçar classe) ---- As telas do LMS usam a paleta antiga da marca por TOKEN, não por cor literal: `--primary: 173 100% 46%` (o ciano), `--aurora`, `--revenue`, e um `--accent-foreground: 0 0% 98%` (quase branco) que some sobre o `--accent` claro. Trocando os tokens aqui, tudo que os consome — text-primary, bg-primary, ring-primary, from-aurora, hover:… — cai no navy do design system de uma vez. As regras por classe abaixo continuam como rede de segurança para os pontos que cravam rgb literal. */ body:has(aside a[href="/formacao/aulas"]) { --primary: 214 71% 14%; /* #0A1F3B */ --primary-foreground: 0 0% 100%; --ring: 214 71% 14%; --aurora: 214 71% 14%; --aurora-primary: 214 71% 14%; --revenue: 214 71% 14%; --accent: 210 20% 95%; --accent-foreground: 214 71% 14%; /* era 98% (branco) sobre fundo claro */ --text-primary: 214 71% 14%; --text-secondary: 215 20% 35%; --text-tertiary: 215 16% 47%; } /* ---- 2.1 tipografia: títulos com gradiente recortado voltam a ser tinta ---- `-webkit-text-fill-color` é o que vence o `text-transparent` do Tailwind sem precisar desligar o background-clip. */ body:has(aside a[href="/formacao/aulas"]) .bg-clip-text { -webkit-text-fill-color: var(--via-text-primary, #0A1F3B) !important; color: var(--via-text-primary, #0A1F3B) !important; background-image: none !important; } /* …exceto sobre o herói escuro do curso, onde o branco é o certo */ body:has(aside a[href="/formacao/aulas"]) .text-white .bg-clip-text, body:has(aside a[href="/formacao/aulas"]) [class*="from-white"] { -webkit-text-fill-color: #ffffff !important; color: #ffffff !important; } /* hierarquia de texto do DS (o kit escuro deixava tudo cinza-claro) */ body:has(aside a[href="/formacao/aulas"]) h1, body:has(aside a[href="/formacao/aulas"]) h2, body:has(aside a[href="/formacao/aulas"]) h3 { color: var(--via-text-primary, #0A1F3B); letter-spacing: -0.02em; } body:has(aside a[href="/formacao/aulas"]) .text-muted-foreground, body:has(aside a[href="/formacao/aulas"]) .text-text-secondary, body:has(aside a[href="/formacao/aulas"]) .text-text-tertiary { color: var(--via-text-muted, #4F596B) !important; } /* ---- 2.2 a paleta: aurora/revenue (verde) → navy/lilás do sistema ---- As classes do Tailwind cravam rgb literal, então o alvo é o valor: os seletores abaixo cobrem os usos que a varredura encontrou na tela (botão, badge do módulo, barra de progresso, borrões de fundo, ícones). */ body:has(aside a[href="/formacao/aulas"]) [class*="from-aurora"], body:has(aside a[href="/formacao/aulas"]) [class*="to-revenue"], body:has(aside a[href="/formacao/aulas"]) [class*="from-revenue"], body:has(aside a[href="/formacao/aulas"]) [class*="to-aurora"] { background-image: linear-gradient(135deg, var(--via-navy, #0A1F3B), var(--via-navy-deep, #02162A)) !important; } /* ⚠ ARMADILHA VIVIDA (e pega por medição): trocar "verde" por navy em bloco pintou PÍLULA NAVY COM TEXTO NAVY — o badge "Publicado" sumiu (48 deles na lista de cursos). Um badge é um PAR fundo+texto; virar só uma das pontas destrói o contraste. Por isso são duas regras, nesta ordem: */ /* (a) badge/pílula = fundo tinta clara + tinta navy (o padrão do DS) */ body:has(aside a[href="/formacao/aulas"]) [class*="bg-aurora"][class*="text-aurora"], body:has(aside a[href="/formacao/aulas"]) [class*="bg-revenue"][class*="text-revenue"], body:has(aside a[href="/formacao/aulas"]) [class*="bg-aurora"][class*="text-emerald"], body:has(aside a[href="/formacao/aulas"]) [class*="bg-emerald"][class*="text-emerald"] { background-color: var(--via-navy-06, rgba(10, 31, 59, 0.06)) !important; background-image: none !important; border-color: var(--via-navy-12, rgba(10, 31, 59, 0.12)) !important; color: var(--via-navy, #0A1F3B) !important; } /* (b) superfície sólida = só onde o texto NÃO é da mesma família */ body:has(aside a[href="/formacao/aulas"]) [class*="bg-aurora"]:not([class*="text-aurora"]):not([class*="text-revenue"]):not([class*="text-emerald"]), body:has(aside a[href="/formacao/aulas"]) [class*="bg-revenue"]:not([class*="text-aurora"]):not([class*="text-revenue"]):not([class*="text-emerald"]) { background-color: var(--via-navy, #0A1F3B) !important; background-image: none !important; } /* os borrões decorativos: no claro eles viram um véu navy quase imperceptível (com o verde eles pintavam a página inteira de menta) */ body:has(aside a[href="/formacao/aulas"]) [class*="bg-aurora/"], body:has(aside a[href="/formacao/aulas"]) [class*="bg-revenue/"], body:has(aside a[href="/formacao/aulas"]) [class*="from-aurora/"], body:has(aside a[href="/formacao/aulas"]) [class*="via-aurora/"] { background-color: rgba(10, 31, 59, 0.04) !important; background-image: none !important; filter: none !important; } body:has(aside a[href="/formacao/aulas"]) [class*="text-aurora"], body:has(aside a[href="/formacao/aulas"]) [class*="text-revenue"] { color: var(--via-navy, #0A1F3B) !important; } /* ---- 2.3 botões no padrão do sistema (o CTA sólido é NAVY) ---- */ body:has(aside a[href="/formacao/aulas"]) button[class*="bg-aurora"], body:has(aside a[href="/formacao/aulas"]) button[class*="from-aurora"], body:has(aside a[href="/formacao/aulas"]) button[class*="bg-revenue"] { background: var(--via-navy, #0A1F3B) !important; background-image: none !important; color: #ffffff !important; border: 1px solid var(--via-navy, #0A1F3B) !important; border-radius: var(--via-radius-pill, 999px) !important; box-shadow: 0 2px 8px rgba(10, 31, 59, 0.16) !important; } body:has(aside a[href="/formacao/aulas"]) button[class*="bg-aurora"]:hover, body:has(aside a[href="/formacao/aulas"]) button[class*="from-aurora"]:hover { background: var(--via-navy-deep, #02162A) !important; box-shadow: 0 4px 14px rgba(10, 31, 59, 0.22) !important; } /* ---- 2.4 cartões e superfícies: raio, fio e sombra do Mini Bento ---- */ body:has(aside a[href="/formacao/aulas"]) .rounded-2xl, body:has(aside a[href="/formacao/aulas"]) .rounded-xl { border-radius: var(--via-radius-lg, 20px) !important; } body:has(aside a[href="/formacao/aulas"]) .glass, body:has(aside a[href="/formacao/aulas"]) [class*="border-border"] { border-color: var(--via-border-hairline, #E4E7EC) !important; } /* ---- 2.5 a sidebar do LMS no padrão da barra do sistema ---- */ body:has(aside a[href="/formacao/aulas"]) aside { border-right: 1px solid var(--via-border-hairline, #E4E7EC) !important; } body:has(aside a[href="/formacao/aulas"]) aside a { color: var(--via-text-body, #344054); border-radius: var(--via-radius-md, 12px); } body:has(aside a[href="/formacao/aulas"]) aside a:hover { background: var(--via-navy-04, rgba(10, 31, 59, 0.04)); color: var(--via-text-primary, #0A1F3B); } /* o item ativo: pílula clara com tinta navy (o verde saía do padrão) */ body:has(aside a[href="/formacao/aulas"]) aside a[aria-current], body:has(aside a[href="/formacao/aulas"]) aside a[data-active="true"], body:has(aside a[href="/formacao/aulas"]) aside [class*="bg-accent"] { background: var(--via-navy-06, rgba(10, 31, 59, 0.06)) !important; color: var(--via-text-primary, #0A1F3B) !important; font-weight: 500; } /* ---- 2.6 diagramação: o respiro do topo estava ocioso ---- Medido: a página abria com ~300px de faixa branca antes do conteúdo, porque o herói vinha depois do header fixo + margem própria. */ body:has(aside a[href="/formacao/aulas"]) header + * { padding-top: var(--via-space-6, 24px) !important; } /* ========================================================================== §3 — FORMULÁRIOS: OS RÓTULOS INVISÍVEIS (o que travava a edição do curso) Medido no modal "Editar Curso": TODOS os