/*! * visual-novo.css * * Atle-Desenvolvimento Scripts * © 2026 Atle Consultoria Empresarial * * SOFTWARE PROPRIETÁRIO — TODOS OS DIREITOS RESERVADOS. * A cópia, reprodução, distribuição, engenharia reversa ou uso * deste código, no todo ou em parte, sem autorização escrita da * Atle Consultoria Empresarial, é proibida e sujeita às sanções * da Lei 9.609/98 e da Lei 9.610/98. * */ /* ═══════════════════════════════════════════════════════════════════════ PEOPLE — VISUAL NOVO (as três direções do ateliê) ═══════════════════════════════════════════════════════════════════════ Decidido no ateliê: https://claude.ai/code/artifact/bf32c3bc-98e7-409c-ae17-232996dfee17 🔴 ESTA FOLHA NASCE DESLIGADA. Tudo aqui está sob `html[data-swgma-theme^="novo-"]`. Sem o atributo — que só existe quando a pessoa escolhe o visual novo em Meu perfil › Aparência — NADA se aplica, e o People continua exatamente como está hoje. Ligar e desligar é trocar um valor no localStorage, não publicar código. 🔴 POR QUE ISTO É TÃO CURTO PARA O TAMANHO DA MUDANÇA. O `swgma-theme.css` já veste TODO o People a partir de tokens `--sw-*` (cartão, botão, formulário, barra lateral, topo, tabela, diálogo, aba, paginação…) e as regras dele casam com `html[data-swgma-theme]` — presença do atributo, sem valor. Então o visual novo entra como mais um valor desse mesmo atributo: herda a estrutura inteira e só redefine a PALETA e a FORMA. Nenhum HTML muda, nenhum `name` de campo muda, nenhuma função muda. ⚠️ ORDEM IMPORTA: esta folha tem de ser carregada DEPOIS de `swgma-theme.css`. As duas usam a mesma especificidade em várias regras, e em empate quem vence é a última. As três direções: novo-a Material (Google) — botão pílula, superfície tonal, elevação novo-b iOS (HIG) — vidro, cantos suaves, cinza-azulado novo-c Atle — cor do logotipo, serif de display, canto seco ═══════════════════════════════════════════════════════════════════════ */ /* ⚠️ O AFUNDAR AO TOCAR mora em `visual-novo-anima.css`, não aqui. Havia TRÊS regras para a mesma coisa (`style.css` com scale .97, esta folha com translateY(1px) e com scale .955) e a vencedora dependia da ordem de carga. Movimento mora num lugar só. */ /* ═══ 1. TOKENS COMUNS ÀS TRÊS ═════════════════════════════════════════ */ html[data-swgma-theme^="novo-"] { /* Escala de canto — cada direção reescreve. */ --sw-radius-sm: 6px; --sw-radius-md: 10px; --sw-radius-lg: 14px; --sw-radius-pill: 999px; /* Sombra: no visual novo ela é DISCRETA. Sombra forte era o jeito de separar cartão do fundo no visual escuro; com fundo claro, borda de 1 px separa melhor e não suja a tela. */ --sw-shadow-sm: 0 1px 2px rgba(20,22,34,.06); --sw-shadow-md: 0 2px 8px rgba(20,22,34,.09); --sw-shadow-lg: 0 12px 34px -18px rgba(20,22,34,.45); /* 🔴 As famílias do ateliê (Instrument Sans, Instrument Serif, Roboto, IBM Plex Sans) SÃO carregadas: `backend/main.py` injeta um pedido só no de toda página. Por isso a pilha aqui é a do artefato, LETRA POR LETRA, sem `Inter` de muleta: a comparação com o artefato media `fontFamily` e acusava a diferença — e no Windows, onde nada da pilha Apple existe, a muleta trocava de fato a fonte da tela desenhada. */ --sw-font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --sw-font-display: var(--sw-font); /* Tokens próprios do visual novo (prefixo `nv-`), para não colidir com os `--sw-*` que o tema antigo consome. */ --nv-rail-bg: var(--sw-canvas); --nv-rail-txt: var(--sw-text-3); --nv-rail-ativo: var(--sw-primary); --nv-rail-ativo-bg: var(--sw-primary-tint); --nv-topo-bg: var(--sw-canvas); --nv-peso-titulo: 600; --nv-transicao: .16s ease; /* ⚠️ TOKEN QUE NINGUÉM DEFINIU. A barra de mensagens padrão do Atendimento usa `var(--sw-canvas2, rgba(15,23,42,.6))`, e `--sw-canvas2` não existe em folha nenhuma — então valia sempre o reserva, um azul-marinho escuro. Num fundo claro isso vira uma faixa escura com texto escuro em cima: 2,7:1, ilegível. Definir o token é a correção; o reserva continua lá para quem não tem o visual novo. */ --sw-canvas2: var(--sw-bg); /* 🔴 A VARREDURA ACHOU OITO TOKENS ÓRFÃOS — usados nas telas, definidos em lugar nenhum. Todos com reserva ESCURA (`#0f172a`, `#1e293b`, `#e2e8f0`), porque nasceram no visual escuro. Em fundo claro cada um vira uma caixa preta ou um texto branco invisível: os seis cartões de "Mensagens pré-aprovadas" eram exatamente isso. Definir custa uma linha cada. */ --sw-bg-1: var(--sw-bg); --sw-bg-2: var(--sw-bg); --sw-card: var(--sw-canvas); --sw-surface-2: var(--sw-sup-2, var(--sw-bg)); --sw-text: var(--sw-text-1); --sw-shadow: var(--sw-shadow-md); --sw-success-bg: color-mix(in srgb, var(--sw-success) 12%, transparent); --sw-warning-bg: color-mix(in srgb, var(--sw-warning) 14%, transparent); /* 🔴 COR DE TEXTO SOBRE FUNDO COLORIDO. No escuro as cores semânticas ficam CLARAS de propósito (salmão, verde-menta): boas para TEXTO em fundo escuro, péssimas como fundo de botão com letra branca — "Encerrar sessão" dava 2,4:1. Quem preenche usa este token; quem colore texto não. */ --nv-sobre-cor: #fff; } /* ═══ 2. PALETAS — 3 direções × claro/escuro ══════════════════════════ */ /* ── A · MATERIAL ────────────────────────────────────────────────────── Superfície tonal (o fundo tem a cor do acento diluída), canto grande, botão pílula. É o vocabulário do Google. */ html[data-swgma-theme="novo-a"][data-swgma-mode="light"] { /* 🔴 MEDIDOS NO ARTEFATO, DIREÇÃO POR DIREÇÃO E MODO POR MODO (`medir_paletas.mjs`). A camada 2 escrevia estes valores CRAVADOS, com o número do claro: no escuro dava campo cinza-claro em fundo preto. Viraram token porque é o modo que muda, não a peça. */ --nv-preenche:#F1E9E2; /* fundo de campo/fantasma/aba */ --nv-sw-off:#D0BFB4; /* trilho do interruptor apagado */ --nv-rotulo-tabela:#77675E; /* th e rótulo de KPI */ --nv-rotulo-bloco:#85736B; /* h6 de bloco no diálogo */ --sw-bg:#F7F2ED; --sw-canvas:#FEFBF8; --sw-surface:#FEFBF8; --sw-hover:rgba(196,92,22,.08); --sw-border:#E3D6CD; --sw-border-strong:#D0BFB4; --sw-text-1:#211A16; --sw-text-2:#4A3E38; --sw-text-3:#594B44; --sw-text-4:#6A5A52; --sw-text-5:#77675E; /* 🔴 O ACENTO DO VISUAL NOVO É O SEGURO PARA TEXTO, e isto é uma decisão. O acento do artefato é `#C45C16`. Ele funciona como FUNDO (com letra branca dá 4,29:1 — quase) mas falha como COR DE TEXTO: sobre o tom dele mesmo (item ativo do trilho, chip escolhido, botão fantasma) dá 3,4:1, e em 13px isso não se lê. Foi a queixa "em alguns lugares nao da para ler". A alternativa era DOIS tokens — um para fundo, outro para texto — e trocar 132 regras. Mas 108 delas estão no `swgma-theme.css`, que é COMPARTILHADO com o visual antigo: mexer ali mudaria o antigo, que eu prometi não tocar. Então o acento do visual NOVO é o que serve nos dois papéis: `#A54D12`, calculado para 4,5:1 sobre o tom dele. Como fundo fica melhor ainda (branco em cima passa de 4,5 com folga). ⚠️ Distância do acento do artefato: ~12 numa escala de 173 — é o mesmo laranja-terra, um degrau mais fundo. Legibilidade ganha de 12 unidades. */ /* ⚠️ `#A34C12` e não `#A54D12`: o tom do item ativo do trilho é o PRÓPRIO acento a 11% sobre o fundo da página, então acento e fundo andam juntos e a razão é um ponto fixo — resolvido numericamente. Com `#A54D12` dava 4,41:1, dois centésimos abaixo do piso, e "quase" não se lê melhor. */ --sw-primary:#A34C12; --sw-primary-hover:#8C400F; --sw-primary-rgb:163,76,18; --sw-primary-on:#fff; --sw-primary-tint:#F5D6BE; --sw-ring:rgba(196,92,22,.28); --sw-success:#1F784C; --sw-warning:#8F610A; --sw-danger:#b3261e; --sw-info:var(--sw-primary, #C45C16); --nv-rail-bg:#F1E9E2; --nv-rail-txt:#544741; --nv-rail-ativo:#3A1E0A; --nv-rail-ativo-bg:#F5D6BE; --nv-topo-bg:#F7F2ED; } html[data-swgma-theme="novo-a"][data-swgma-mode="dark"] { /* 🔴 MEDIDOS NO ARTEFATO, DIREÇÃO POR DIREÇÃO E MODO POR MODO (`medir_paletas.mjs`). A camada 2 escrevia estes valores CRAVADOS, com o número do claro: no escuro dava campo cinza-claro em fundo preto. Viraram token porque é o modo que muda, não a peça. */ --nv-preenche:#2C241F; /* fundo de campo/fantasma/aba */ --nv-sw-off:#443F46; /* trilho do interruptor apagado */ --nv-rotulo-tabela:#968983; /* th e rótulo de KPI */ --nv-rotulo-bloco:#8B8480; /* h6 de bloco no diálogo */ --sw-bg:#171310; --sw-canvas:#221C18; --sw-surface:#221C18; --sw-hover:rgba(232,135,74,.12); --sw-border:#3A302A; --sw-border-strong:#4C4038; /* 🔴 MEDIDO: no escuro as TRÊS direções do artefato usam o mesmo par de texto — `#E7E1DE` no principal e `#B0A9A5` no secundário. Aqui cada direção tinha inventado o seu (branco puro na B, quase-branco na A), e branco puro em fundo preto é o brilho que cansa a vista — é por isso que o desenho escolheu um branco QUENTE e levemente rebaixado. */ --sw-text-1:#E7E1DE; --sw-text-2:#B0A9A5; --sw-text-3:#BBADA7; --sw-text-4:#A49994; --sw-text-5:#968983; --sw-primary:#E8874A; --sw-primary-hover:#F5A170; --sw-primary-rgb:232,135,74; --sw-primary-on:#2A1608; --sw-primary-tint:#5A3315; --sw-ring:rgba(232,135,74,.40); --sw-success:#5fd39b; --sw-warning:#f2c14b; --sw-danger:#f4877f; --sw-info:var(--sw-primary, #E8874A); --nv-rail-bg:#2C241F; --nv-rail-txt:#D8C9C0; --nv-rail-ativo:#FFD9BE; --nv-rail-ativo-bg:#5A3315; --nv-topo-bg:#171310; --nv-sobre-cor: #231412; } /* ── B · iOS ────────────────────────────────────────────────────────── Cinza-azulado do sistema, canto suave, vidro no topo e no trilho. */ html[data-swgma-theme="novo-b"][data-swgma-mode="light"] { /* 🔴 MEDIDOS NO ARTEFATO, DIREÇÃO POR DIREÇÃO E MODO POR MODO (`medir_paletas.mjs`). A camada 2 escrevia estes valores CRAVADOS, com o número do claro: no escuro dava campo cinza-claro em fundo preto. Viraram token porque é o modo que muda, não a peça. */ --nv-preenche:#E5E5EA; /* fundo de campo/fantasma/aba */ --nv-sw-off:#E5E5EA; /* trilho do interruptor apagado */ --nv-rotulo-tabela:#76767C; /* th e rótulo de KPI */ --nv-rotulo-bloco:#8E8E93; /* h6 de bloco no diálogo */ --sw-bg:#F2F2F7; --sw-canvas:#FFFFFF; --sw-surface:#FFFFFF; --sw-hover:rgba(196,92,22,.07); --sw-border:#D1D1D6; --sw-border-strong:#C7C7CC; --sw-text-1:#000000; --sw-text-2:#3C3C43; --sw-text-3:#4A4A4E; --sw-text-4:#5A5A5E; --sw-text-5:#67676E; /* 🔴 O ACENTO DO VISUAL NOVO É O SEGURO PARA TEXTO, e isto é uma decisão. O acento do artefato é `#C45C16`. Ele funciona como FUNDO (com letra branca dá 4,29:1 — quase) mas falha como COR DE TEXTO: sobre o tom dele mesmo (item ativo do trilho, chip escolhido, botão fantasma) dá 3,4:1, e em 13px isso não se lê. Foi a queixa "em alguns lugares nao da para ler". A alternativa era DOIS tokens — um para fundo, outro para texto — e trocar 132 regras. Mas 108 delas estão no `swgma-theme.css`, que é COMPARTILHADO com o visual antigo: mexer ali mudaria o antigo, que eu prometi não tocar. Então o acento do visual NOVO é o que serve nos dois papéis: `#A54D12`, calculado para 4,5:1 sobre o tom dele. Como fundo fica melhor ainda (branco em cima passa de 4,5 com folga). ⚠️ Distância do acento do artefato: ~12 numa escala de 173 — é o mesmo laranja-terra, um degrau mais fundo. Legibilidade ganha de 12 unidades. */ /* ⚠️ `#A34C12` e não `#A54D12`: o tom do item ativo do trilho é o PRÓPRIO acento a 11% sobre o fundo da página, então acento e fundo andam juntos e a razão é um ponto fixo — resolvido numericamente. Com `#A54D12` dava 4,41:1, dois centésimos abaixo do piso, e "quase" não se lê melhor. */ --sw-primary:#A34C12; --sw-primary-hover:#8C400F; --sw-primary-rgb:163,76,18; --sw-primary-on:#fff; --sw-primary-tint:rgba(196,92,22,.11); --sw-ring:rgba(196,92,22,.30); --sw-success:#1F784C; --sw-warning:#8B5E0A; --sw-danger:#b3261e; --sw-info:var(--sw-primary, #C45C16); /* ⚠️ O ATIVO DO TRILHO TINHA O ACENTO ANTIGO CRAVADO, fora do token — por isso ele continuou em 3,37:1 depois de a paleta ser corrigida. Token que existe e não é usado não protege ninguém. */ --nv-rail-bg:rgba(249,249,251,.82); --nv-rail-txt:#3C3C43; --nv-rail-ativo:var(--sw-primary); --nv-rail-ativo-bg:rgba(var(--sw-primary-rgb),.11); --nv-topo-bg:rgba(249,249,251,.8); } html[data-swgma-theme="novo-b"][data-swgma-mode="dark"] { /* 🔴 MEDIDOS NO ARTEFATO, DIREÇÃO POR DIREÇÃO E MODO POR MODO (`medir_paletas.mjs`). A camada 2 escrevia estes valores CRAVADOS, com o número do claro: no escuro dava campo cinza-claro em fundo preto. Viraram token porque é o modo que muda, não a peça. */ --nv-preenche:#2C2C2E; /* fundo de campo/fantasma/aba */ --nv-sw-off:#2C2C2E; /* trilho do interruptor apagado */ --nv-rotulo-tabela:#929295; /* th e rótulo de KPI */ --nv-rotulo-bloco:#8B8480; /* h6 de bloco no diálogo */ --sw-bg:#000000; --sw-canvas:#1C1C1E; --sw-surface:#1C1C1E; --sw-hover:rgba(232,135,74,.14); --sw-border:#38383A; --sw-border-strong:#48484A; /* 🔴 MEDIDO: no escuro as TRÊS direções do artefato usam o mesmo par de texto — `#E7E1DE` no principal e `#B0A9A5` no secundário. Aqui cada direção tinha inventado o seu (branco puro na B, quase-branco na A), e branco puro em fundo preto é o brilho que cansa a vista — é por isso que o desenho escolheu um branco QUENTE e levemente rebaixado. */ --sw-text-1:#E7E1DE; --sw-text-2:#B0A9A5; --sw-text-3:#B7B7BB; --sw-text-4:#A2A2A6; --sw-text-5:#929295; --sw-primary:#E8874A; --sw-primary-hover:#F5A170; --sw-primary-rgb:232,135,74; --sw-primary-on:#1C1206; --sw-primary-tint:rgba(232,135,74,.18); --sw-ring:rgba(232,135,74,.42); --sw-success:#5fd39b; --sw-warning:#f2c14b; --sw-danger:#f4877f; --sw-info:var(--sw-primary, #E8874A); --nv-rail-bg:rgba(28,28,30,.86); --nv-rail-txt:#EBEBF5; --nv-rail-ativo:var(--sw-primary); --nv-rail-ativo-bg:rgba(var(--sw-primary-rgb),.18); --nv-topo-bg:rgba(28,28,30,.8); --nv-sobre-cor: #231412; } /* ── C · ATLE ───────────────────────────────────────────────────────── A única que usa as cores do logotipo: marinho no trilho, laranja no acento, serif de display no título. O sistema tem de parecer da casa antes de parecer com o gosto de alguém. */ html[data-swgma-theme="novo-c"][data-swgma-mode="light"] { /* 🔴 MEDIDOS NO ARTEFATO, DIREÇÃO POR DIREÇÃO E MODO POR MODO (`medir_paletas.mjs`). A camada 2 escrevia estes valores CRAVADOS, com o número do claro: no escuro dava campo cinza-claro em fundo preto. Viraram token porque é o modo que muda, não a peça. */ --nv-preenche:#FFFFFF; /* fundo de campo/fantasma/aba */ --nv-sw-off:#C3C7D4; /* trilho do interruptor apagado */ --nv-rotulo-tabela:#6B7088; /* th e rótulo de KPI */ --nv-rotulo-bloco:#7C8098; /* h6 de bloco no diálogo */ --sw-bg:#F4F5F7; --sw-canvas:#FFFFFF; --sw-surface:#FFFFFF; --sw-hover:rgba(196,92,22,.08); --sw-border:#DDE0E7; --sw-border-strong:#C3C7D4; --sw-text-1:#1A1C2B; --sw-text-2:#454962; --sw-text-3:#4F5366; --sw-text-4:#5F6277; --sw-text-5:#6B7088; /* 🔴 O ACENTO DO VISUAL NOVO É O SEGURO PARA TEXTO, e isto é uma decisão. O acento do artefato é `#C45C16`. Ele funciona como FUNDO (com letra branca dá 4,29:1 — quase) mas falha como COR DE TEXTO: sobre o tom dele mesmo (item ativo do trilho, chip escolhido, botão fantasma) dá 3,4:1, e em 13px isso não se lê. Foi a queixa "em alguns lugares nao da para ler". A alternativa era DOIS tokens — um para fundo, outro para texto — e trocar 132 regras. Mas 108 delas estão no `swgma-theme.css`, que é COMPARTILHADO com o visual antigo: mexer ali mudaria o antigo, que eu prometi não tocar. Então o acento do visual NOVO é o que serve nos dois papéis: `#A54D12`, calculado para 4,5:1 sobre o tom dele. Como fundo fica melhor ainda (branco em cima passa de 4,5 com folga). ⚠️ Distância do acento do artefato: ~12 numa escala de 173 — é o mesmo laranja-terra, um degrau mais fundo. Legibilidade ganha de 12 unidades. */ /* ⚠️ `#A34C12` e não `#A54D12`: o tom do item ativo do trilho é o PRÓPRIO acento a 11% sobre o fundo da página, então acento e fundo andam juntos e a razão é um ponto fixo — resolvido numericamente. Com `#A54D12` dava 4,41:1, dois centésimos abaixo do piso, e "quase" não se lê melhor. */ --sw-primary:#A34C12; --sw-primary-hover:#8C400F; --sw-primary-rgb:163,76,18; --sw-primary-on:#fff; --sw-primary-tint:rgba(196,92,22,.10); --sw-ring:rgba(196,92,22,.28); --sw-success:#1F784C; --sw-warning:#98670B; --sw-danger:#b3261e; --sw-info:#3E5789; --nv-rail-bg:#2A2858; --nv-rail-txt:rgba(255,255,255,.68); --nv-rail-ativo:#FFFFFF; --nv-rail-ativo-bg:rgba(196,92,22,.9); --nv-topo-bg:#FFFFFF; } html[data-swgma-theme="novo-c"][data-swgma-mode="dark"] { /* 🔴 MEDIDOS NO ARTEFATO, DIREÇÃO POR DIREÇÃO E MODO POR MODO (`medir_paletas.mjs`). A camada 2 escrevia estes valores CRAVADOS, com o número do claro: no escuro dava campo cinza-claro em fundo preto. Viraram token porque é o modo que muda, não a peça. */ --nv-preenche:#1B1D2A; /* fundo de campo/fantasma/aba */ --nv-sw-off:#443F46; /* trilho do interruptor apagado */ --nv-rotulo-tabela:#96928A; /* th e rótulo de KPI */ --nv-rotulo-bloco:#8B8480; /* h6 de bloco no diálogo */ --sw-bg:#131421; --sw-canvas:#1B1D2A; --sw-surface:#1B1D2A; --sw-hover:rgba(232,135,74,.12); --sw-border:#2C3044; --sw-border-strong:#3B4058; /* 🔴 MEDIDO: no escuro as TRÊS direções do artefato usam o mesmo par de texto — `#E7E1DE` no principal e `#B0A9A5` no secundário. Aqui cada direção tinha inventado o seu (branco puro na B, quase-branco na A), e branco puro em fundo preto é o brilho que cansa a vista — é por isso que o desenho escolheu um branco QUENTE e levemente rebaixado. */ --sw-text-1:#E7E1DE; --sw-text-2:#B0A9A5; --sw-text-3:#BAB7B4; --sw-text-4:#A5A29E; --sw-text-5:#96928A; --sw-primary:#E8874A; --sw-primary-hover:#F5A170; --sw-primary-rgb:232,135,74; --sw-primary-on:#1B1006; --sw-primary-tint:rgba(232,135,74,.16); --sw-ring:rgba(232,135,74,.42); --sw-success:#5fd39b; --sw-warning:#f2c14b; --sw-danger:#f4877f; --sw-info:#8D8ACB; --nv-rail-bg:#0F1020; --nv-rail-txt:rgba(255,255,255,.66); --nv-rail-ativo:#FFFFFF; --nv-rail-ativo-bg:#C45C16; --nv-topo-bg:#1B1D2A; --nv-sobre-cor: #231412; } /* ═══ 3. FORMA POR DIREÇÃO ════════════════════════════════════════════ */ /* A · Material — canto grande, botão pílula, tipografia Roboto. */ html[data-swgma-theme="novo-a"] { --sw-radius-sm: 8px; --sw-radius-md: 16px; --sw-radius-lg: 28px; --sw-font: Roboto, system-ui, sans-serif; --sw-font-display: Roboto, system-ui, sans-serif; --nv-peso-titulo: 500; } /* B · iOS — canto suave e a fonte do sistema, que é o que o aparelho já usa. */ html[data-swgma-theme="novo-b"] { --sw-radius-sm: 9px; --sw-radius-md: 12px; --sw-radius-lg: 18px; --sw-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Instrument Sans", system-ui, sans-serif; --sw-font-display: var(--sw-font); --nv-peso-titulo: 600; } /* C · Atle — canto seco e serif no título. */ html[data-swgma-theme="novo-c"] { --sw-radius-sm: 5px; --sw-radius-md: 6px; --sw-radius-lg: 8px; --sw-font: "IBM Plex Sans", system-ui, sans-serif; --sw-font-display: "Instrument Serif", Georgia, serif; --nv-peso-titulo: 400; } /* ═══ 3b. AS VARIÁVEIS LEGADAS ════════════════════════════════════════ 🔴 As páginas escrevem estilo próprio em cima das variáveis ANTIGAS (`--light`, `--dark`, `--neon-blue`, `--glass-bg`…). O `swgma-theme.css` já redireciona essas variáveis — mas só nas páginas que o carregam. As páginas PÚBLICAS não o carregam, e nelas `--light` continuava valendo #f8fafc: o `` da tela "sem acesso" ficava branco sobre branco, invisível. Aqui o mesmo redirecionamento vale por conta própria. */ html[data-swgma-theme^="novo-"] { --dark: var(--sw-bg); --darker: var(--sw-canvas); --darkest: var(--sw-canvas); --card-bg: var(--sw-surface); --glass-bg: var(--sw-surface); --glass-border: 1px solid var(--sw-border-strong); --glass-blur: none; --sidebar-bg: var(--nv-rail-bg, var(--sw-canvas)); --topbar-bg: var(--nv-topo-bg, var(--sw-canvas)); --text-primary: var(--sw-text-1); --text-secondary: var(--sw-text-2); --text-muted: var(--sw-text-4); --text-light: var(--sw-text-1); --light: var(--sw-text-1); --primary: var(--sw-primary); --primary-hover: var(--sw-primary-hover); --secondary: var(--sw-primary); --accent: var(--sw-success); --accent-cyan: var(--sw-primary); --neon-blue: var(--sw-primary); --neon-cyan: var(--sw-primary); --neon-purple: var(--sw-primary); --neon-green: var(--sw-success); --border-color: var(--sw-border); --border-light: var(--sw-border); --shadow-sm: var(--sw-shadow-sm); --shadow-md: var(--sw-shadow-md); --shadow-lg: var(--sw-shadow-lg); --radius-sm: var(--sw-radius-sm); --radius-md: var(--sw-radius-md); --radius-lg: var(--sw-radius-lg); --radius-xl: var(--sw-radius-lg); /* ⚠️ A varredura achou MAIS órfãos com reserva escura, cada um numa tela diferente (o visualizador de relatório, o formulário público, o cartão de notificação). São variáveis que nunca existiram — o valor sempre foi o reserva. Definir custa uma linha e apaga a caixa preta. */ --bg-card: var(--sw-canvas); --bg-primary: var(--sw-bg); --border: var(--sw-border); --input-bg: var(--sw-canvas); --muted: var(--sw-text-4); --card-color: var(--sw-primary); --form-color: var(--sw-primary); --form-header-bg: var(--sw-bg); --fc-text: var(--sw-text-1); --nc-bg: var(--sw-bg); --nc-bg2: var(--sw-canvas); --uc-bg: var(--sw-primary-tint); --uc-c: var(--sw-primary); } /* 🔴 BOTÃO DE GRADIENTE É COR QUE NÃO SAI DE TOKEN. `.btn-success` é um degradê verde cravado, `.btn` de entrar é ciano→azul. Eles atravessavam o visual novo inteiros — e, pior, o degradê some da conta de contraste (o `background-color` fica transparente), então nem a prova reclamava. */ html[data-swgma-theme^="novo-"] .btn-success { background: var(--sw-success) !important; background-image: none !important; color: var(--nv-sobre-cor, #fff) !important; } html[data-swgma-theme^="novo-"] .btn-primary { background: var(--sw-primary) !important; background-image: none !important; color: var(--sw-primary-on) !important; } /* Botões de degradê que sobraram nas telas: assistente de agendamento, barra de wizard. Mesma decisão — cor sólida do acento. */ html[data-swgma-theme^="novo-"] .btn-wiz-next, html[data-swgma-theme^="novo-"] .wizard-next, html[data-swgma-theme^="novo-"] .btn-next { background: var(--sw-primary) !important; background-image: none !important; color: var(--sw-primary-on) !important; } html[data-swgma-theme^="novo-"] .btn-success:hover, html[data-swgma-theme^="novo-"] .btn-primary:hover { filter: brightness(1.07); transform: none !important; box-shadow: var(--sw-shadow-sm) !important; } /* ═══ 4. BASE ═════════════════════════════════════════════════════════ */ html[data-swgma-theme^="novo-"] body { font-family: var(--sw-font) !important; background: var(--sw-bg) !important; /* 🔴 O visual antigo desenha uma grade de linhas no fundo do body. Ela é do vidro escuro; no fundo claro vira sujeira. */ background-image: none !important; color: var(--sw-text-1) !important; } /* ⚠️ `.page-body` fica TRANSPARENTE, como a `.pagina` do artefato. Quem pinta é o `body` e a coluna do conteúdo (`.main-content`, na casca) — pintar a página por cima dava a MESMA cor, e era invisível enquanto as duas combinassem; no dia em que a coluna mudar de tom, a página tapa a mudança e o conserto vira caça ao fantasma. Uma cor, um dono. A pintura da `.main-content` mora na casca, com o resto da casca. */ html[data-swgma-theme^="novo-"] .page-body { background: transparent !important; } /* ═══ 5. CABEÇALHO DA PÁGINA ══════════════════════════════════════════ */ html[data-swgma-theme^="novo-"] .page-title { font-family: var(--sw-font-display) !important; font-weight: var(--nv-peso-titulo, 600) !important; letter-spacing: -.015em !important; /* O gradiente de texto do visual antigo não sobrevive em fundo claro. */ background: none !important; -webkit-text-fill-color: var(--sw-text-1) !important; color: var(--sw-text-1) !important; } html[data-swgma-theme="novo-c"] .page-title { letter-spacing: -.005em !important; } html[data-swgma-theme^="novo-"] .page-subtitle { color: var(--sw-text-3) !important; font-size: .84rem !important; } /* ═══ 6. CARTÃO ═══════════════════════════════════════════════════════ */ html[data-swgma-theme^="novo-"] .card { background: var(--sw-canvas) !important; border: 1px solid var(--sw-border) !important; border-radius: var(--sw-radius-md) !important; box-shadow: var(--sw-shadow-sm) !important; backdrop-filter: none !important; } /* Material separa por ELEVAÇÃO, não por borda. */ html[data-swgma-theme="novo-a"] .card { border-color: transparent !important; background: var(--sw-canvas) !important; box-shadow: var(--sw-shadow-md) !important; } /* iOS: sem borda, canto grande, sombra quase inexistente. */ html[data-swgma-theme="novo-b"] .card { border-color: transparent !important; border-radius: var(--sw-radius-lg) !important; box-shadow: 0 1px 3px rgba(0,0,0,.08) !important; } /* ═══ 7. CARTÃO DE NÚMERO (stat-card) ═════════════════════════════════ No ateliê o rótulo vem ANTES do número e o número é grande e tabular. É o que faz a faixa de indicadores ser lida de relance. A ordem visual muda por CSS (`order`), sem tocar no HTML que o JavaScript monta. */ html[data-swgma-theme^="novo-"] .stat-card { background: var(--sw-canvas) !important; border: 1px solid var(--sw-border) !important; border-radius: var(--sw-radius-md) !important; box-shadow: var(--sw-shadow-sm) !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 2px !important; padding: 14px 15px !important; } /* ⚠️ NÃO reordenar: o cartão do People já nasce na ordem certa (ícone, rótulo, número, complemento). A primeira versão desta folha usava `order` para pôr o rótulo antes do número — e o complemento, que não tinha `order`, pulou para cima: "Usuários do sistema / Usuários ativos / —". Ordem que já está certa não se mexe. */ html[data-swgma-theme^="novo-"] .stat-card .stat-label { font-size: .72rem !important; color: var(--sw-text-3) !important; letter-spacing: .01em !important; text-transform: none !important; } html[data-swgma-theme^="novo-"] .stat-card .stat-value { font-family: var(--sw-font-display) !important; font-size: 1.55rem !important; font-weight: 600 !important; line-height: 1.1 !important; letter-spacing: -.03em !important; font-variant-numeric: tabular-nums !important; color: var(--sw-text-1) !important; } html[data-swgma-theme="novo-c"] .stat-card .stat-value { font-weight: 400 !important; font-size: 1.8rem !important; } html[data-swgma-theme^="novo-"] .stat-card .stat-icon { width: 30px !important; height: 30px !important; border-radius: var(--sw-radius-sm) !important; margin-bottom: 4px !important; } html[data-swgma-theme^="novo-"] .stat-card .stat-sub { font-size: .71rem !important; color: var(--sw-text-4) !important; margin-top: 2px !important; } html[data-swgma-theme="novo-a"] .stat-card { border-color: transparent !important; background: var(--sw-surface) !important; } /* ═══ 8. BOTÕES ═══════════════════════════════════════════════════════ */ html[data-swgma-theme^="novo-"] .btn { font-family: var(--sw-font) !important; font-weight: 600 !important; border-radius: var(--sw-radius-sm) !important; transition: filter var(--nv-transicao), transform .12s ease, background var(--nv-transicao) !important; box-shadow: var(--sw-shadow-sm) !important; } html[data-swgma-theme="novo-a"] .btn { border-radius: var(--sw-radius-pill) !important; font-weight: 500 !important; letter-spacing: .01em !important; padding-left: 22px !important; padding-right: 22px !important; } html[data-swgma-theme="novo-a"] .btn.btn-sm, html[data-swgma-theme="novo-a"] .btn.btn-icon { padding-left: 14px !important; padding-right: 14px !important; } html[data-swgma-theme="novo-a"] .btn.btn-icon { padding-left: 0 !important; padding-right: 0 !important; } /* iOS: o toque COMPRIME em vez de afundar. */ html[data-swgma-theme="novo-b"] .btn { border-radius: 9px !important; } html[data-swgma-theme="novo-c"] .btn { border-radius: 5px !important; } /* Botão de ícone: alvo confortável e o mesmo canto da direção. */ html[data-swgma-theme^="novo-"] .btn-icon { border-radius: var(--sw-radius-sm) !important; box-shadow: none !important; } html[data-swgma-theme="novo-a"] .btn-icon { border-radius: 999px !important; } html[data-swgma-theme^="novo-"] .btn-danger, html[data-swgma-theme^="novo-"] .btn-success, html[data-swgma-theme^="novo-"] .btn-warning { color: var(--nv-sobre-cor, #fff) !important; } /* ═══ 9. FORMULÁRIO ═══════════════════════════════════════════════════ */ html[data-swgma-theme^="novo-"] .form-control, html[data-swgma-theme^="novo-"] select.form-control, html[data-swgma-theme^="novo-"] textarea.form-control { border-radius: var(--sw-radius-sm) !important; font-family: var(--sw-font) !important; transition: border-color var(--nv-transicao), box-shadow var(--nv-transicao) !important; } html[data-swgma-theme^="novo-"] .form-control:focus { border-color: var(--sw-primary) !important; box-shadow: 0 0 0 3px var(--sw-ring) !important; outline: 0 !important; } html[data-swgma-theme^="novo-"] .form-label { font-size: .72rem !important; font-weight: 600 !important; letter-spacing: .02em !important; color: var(--sw-text-2) !important; } /* Material: campo preenchido com sublinhado, que é a assinatura dele. */ html[data-swgma-theme="novo-a"] .form-control { background: var(--sw-surface) !important; border: 0 !important; border-bottom: 2px solid var(--sw-border-strong) !important; border-radius: 8px 8px 0 0 !important; } html[data-swgma-theme="novo-a"] .form-control:focus { border-bottom-color: var(--sw-primary) !important; box-shadow: none !important; } /* iOS: campo é uma superfície cinza sem borda. */ html[data-swgma-theme="novo-b"] .form-control { background: var(--sw-bg) !important; border-color: transparent !important; border-radius: 9px !important; } /* 🔴 Campo que não se edita tem de PARECER que não se edita: igual aos outros, ele convida ao clique e a pessoa fica tentando digitar. */ html[data-swgma-theme^="novo-"] .form-control:disabled, html[data-swgma-theme^="novo-"] .form-control[readonly] { background: var(--sw-bg) !important; color: var(--sw-text-4) !important; border-style: dashed !important; cursor: not-allowed !important; } /* Interruptor — mora em `visual-novo-componentes.css`, com a medida medida no artefato (28×16, bolinha branca de 12). O que havia aqui usava `+` (irmão IMEDIATO) num HTML que às vezes põe um rótulo entre o input e o trilho, e pintava a bolinha de acento em vez do trilho — o inverso do desenho. Uma peça mora num lugar só. */ /* ═══ 10. TABELA ══════════════════════════════════════════════════════ ⚠️ A regra 1 do ateliê (coluna some por prioridade e a linha abre com o que sumiu) depende de MARCAÇÃO — `data-prio` em cada célula — e marcação não se muda numa troca de pele. O que dá para fazer só com folha de estilo, e que já resolve a maior parte do incômodo, está aqui: cabeçalho que se lê, truncamento com reticência em vez de quebra, linha que responde ao mouse e rolagem horizontal só onde ela é inevitável. */ html[data-swgma-theme^="novo-"] table th { font-size: .68rem !important; font-weight: 600 !important; letter-spacing: .04em !important; text-transform: uppercase !important; color: var(--sw-text-3) !important; background: var(--sw-bg) !important; border-bottom: 1px solid var(--sw-border) !important; white-space: normal !important; line-height: 1.25 !important; vertical-align: bottom !important; } html[data-swgma-theme="novo-b"] table th { text-transform: none !important; letter-spacing: 0 !important; font-size: .75rem !important; } html[data-swgma-theme^="novo-"] table td { border-bottom: 1px solid var(--sw-border) !important; color: var(--sw-text-2) !important; vertical-align: middle !important; } html[data-swgma-theme^="novo-"] table tbody tr:last-child td { border-bottom: 0 !important; } html[data-swgma-theme^="novo-"] table tbody tr:hover td { background: color-mix(in srgb, var(--sw-primary) 5%, transparent) !important; } /* ═══ 11. SELO / BADGE ════════════════════════════════════════════════ */ html[data-swgma-theme^="novo-"] .badge, html[data-swgma-theme^="novo-"] .chip, html[data-swgma-theme^="novo-"] .status-chip { border-radius: 999px !important; font-size: .7rem !important; font-weight: 600 !important; letter-spacing: .01em !important; /* 🔴 CORRIGIDO EM 18/09/2026 — ESTE BLOCO CORTAVA O ESTADO, E SEM AVISAR. A intenção era boa ("selo cortado ao meio pela borda da coluna vira mancha sem forma"), mas o resultado foi o contrário, por duas razões que se somam: 1. `text-overflow: ellipsis` **só se aplica a block container**, e o `.badge` nasce `display: inline-flex` (`style.css:316`, para alinhar o ícone). Em contêiner flex a reticência é INERTE: sobrava só o `overflow: hidden`, cortando no MEIO DO GLIFO, sem o "…" que avisa que falta texto. Medido: "Sem 1º acesso" e "Não justificada" cortados. 2. `max-width: 100%` dentro de célula de tabela diz ao algoritmo que o selo pode ter QUALQUER largura — então a coluna nunca cresce por causa dele e o corte fica garantido. É a MESMA lição que o ERP já tinha aprendido e escrito na própria folha ("o teto era 100% — DA CÉLULA, e isso engolia o rótulo"), e que não atravessou para o People. Selo é ESTADO, e estado é curto por natureza: não precisa de teto nem de corte — precisa de não quebrar. Alcance: 307 ocorrências (`.badge` 177 + `.chip` 130) em 69 das 128 páginas. */ max-width: none !important; overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important; vertical-align: middle !important; } html[data-swgma-theme="novo-c"] .badge, html[data-swgma-theme="novo-c"] .chip, html[data-swgma-theme="novo-c"] .status-chip { border-radius: 3px !important; } /* ═══ 12. TRILHO (sidebar) ════════════════════════════════════════════ */ html[data-swgma-theme^="novo-"] .sidebar { background: var(--nv-rail-bg, var(--sw-canvas)) !important; border-right: 1px solid var(--sw-border) !important; } html[data-swgma-theme^="novo-"] .sidebar-item { color: var(--nv-rail-txt, var(--sw-text-3)) !important; border-radius: var(--sw-radius-sm) !important; font-weight: 500 !important; } html[data-swgma-theme="novo-a"] .sidebar-item { border-radius: 999px !important; } html[data-swgma-theme^="novo-"] .sidebar-item:hover { background: var(--sw-hover) !important; color: var(--nv-rail-ativo, var(--sw-primary)) !important; } html[data-swgma-theme^="novo-"] .sidebar-item.active { background: var(--nv-rail-ativo-bg, var(--sw-primary-tint)) !important; color: var(--nv-rail-ativo, var(--sw-primary)) !important; font-weight: 600 !important; } /* Na direção C o trilho é MARINHO: o que vive dentro dele precisa de contraste claro, senão texto escuro sobre fundo escuro. */ html[data-swgma-theme="novo-c"] .sidebar-logo-text strong, html[data-swgma-theme="novo-c"] .sidebar-empresa-nome, html[data-swgma-theme="novo-c"] .sidebar-empresa-code { color: #fff !important; -webkit-text-fill-color: #fff !important; } html[data-swgma-theme="novo-c"] .sidebar-logo-text span, html[data-swgma-theme="novo-c"] .sidebar-empresa-label, html[data-swgma-theme="novo-c"] .sidebar-section-label, html[data-swgma-theme="novo-c"] .sidebar-group-header { color: rgba(255,255,255,.55) !important; } html[data-swgma-theme="novo-c"] .sidebar-logo, html[data-swgma-theme="novo-c"] .sidebar-empresa, html[data-swgma-theme="novo-c"] .sidebar-footer { border-color: rgba(255,255,255,.12) !important; } html[data-swgma-theme="novo-c"] .sidebar-empresa-trigger { background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.16) !important; color: #fff !important; } html[data-swgma-theme="novo-c"] .sidebar-item:hover { background: rgba(255,255,255,.10) !important; } html[data-swgma-theme="novo-c"] .sidebar-sub .sidebar-item { color: rgba(255,255,255,.55) !important; } html[data-swgma-theme="novo-c"] .sidebar-sub .sidebar-item:hover { color: #fff !important; } /* 🔴 TRILHO ESCURO PEDE TEXTO CLARO — INCLUSIVE NO RODAPÉ DELE. Na direção C o trilho é marinho e o resto da tela é claro. As peças do pé do trilho (sino, cartão do usuário, botão de recolher) herdavam a cor de texto da PÁGINA, que ali é escura: cinza-escuro sobre marinho não se lê. */ /* ⚠️ VALE PARA AS TRÊS, NÃO SÓ PARA A DO TRILHO ESCURO. A primeira versão tratou só a direção C (marinho) — e no Material escuro o "Recolher" ficou com 1,5:1, praticamente invisível, em TODAS as 22 telas. O pé do trilho usa a cor do trilho, seja ele qual for. */ html[data-swgma-theme^="novo-"] .sidebar-user-area, html[data-swgma-theme^="novo-"] .sidebar-ua-btn, html[data-swgma-theme^="novo-"] .sidebar-ua-label, html[data-swgma-theme^="novo-"] .sidebar-ua-ico, html[data-swgma-theme^="novo-"] .sidebar-ua-chevron, html[data-swgma-theme^="novo-"] .sidebar-collapse-btn, html[data-swgma-theme^="novo-"] .scb-label { color: var(--nv-rail-txt, var(--sw-text-3)) !important; } html[data-swgma-theme^="novo-"] .sidebar-user-area, html[data-swgma-theme^="novo-"] .sidebar-collapse-btn { border-top-color: color-mix(in srgb, var(--nv-rail-txt, var(--sw-text-3)) 22%, transparent) !important; } html[data-swgma-theme^="novo-"] .sidebar-ua-btn:hover, html[data-swgma-theme^="novo-"] .sidebar-collapse-btn:hover { background: color-mix(in srgb, var(--nv-rail-txt, var(--sw-text-3)) 12%, transparent) !important; color: var(--nv-rail-ativo, var(--sw-primary)) !important; } /* ⚠️ O menu que abre a partir do trilho (sino, minha conta) desenha FORA dele, por cima da página clara: ali a cor volta a ser a da página, senão o texto branco cai em fundo branco. */ html[data-swgma-theme="novo-c"] .dropdown-menu, html[data-swgma-theme="novo-c"] .dropdown-menu * { color: var(--sw-text-2) !important; } html[data-swgma-theme="novo-c"] .dropdown-menu strong { color: var(--sw-text-1) !important; } /* ═══ 13. TOPO ════════════════════════════════════════════════════════ */ html[data-swgma-theme^="novo-"] .topbar { background: var(--nv-topo-bg, var(--sw-canvas)) !important; border-bottom: 1px solid var(--sw-border) !important; } html[data-swgma-theme^="novo-"] .topbar-title { font-family: var(--sw-font-display) !important; font-weight: var(--nv-peso-titulo, 600) !important; } /* ═══ 14. DIÁLOGO — regra 2: topo e rodapé ficam parados ══════════════ */ html[data-swgma-theme^="novo-"] .modal-dialog { border-radius: var(--sw-radius-lg) !important; /* 🔴 NUNCA a tela inteira: teto de 85% da altura, e é o MIOLO que rola. */ max-height: 85vh !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } html[data-swgma-theme^="novo-"] .modal-header, html[data-swgma-theme^="novo-"] .modal-footer { flex: none !important; } html[data-swgma-theme^="novo-"] .modal-body { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overscroll-behavior: contain !important; } html[data-swgma-theme^="novo-"] .modal-header { border-bottom: 1px solid var(--sw-border) !important; } html[data-swgma-theme^="novo-"] .modal-footer { border-top: 1px solid var(--sw-border) !important; } /* ═══ 15. ABAS ════════════════════════════════════════════════════════ */ html[data-swgma-theme^="novo-"] .tab { font-weight: 500 !important; color: var(--sw-text-3) !important; border-bottom: 2px solid transparent !important; } html[data-swgma-theme^="novo-"] .tab.active { color: var(--sw-primary) !important; border-bottom-color: var(--sw-primary) !important; font-weight: 600 !important; } /* iOS: aba é segmento, não sublinhado. */ html[data-swgma-theme="novo-b"] .tabs, html[data-swgma-theme="novo-b"] .tab-list { background: var(--sw-bg) !important; border-radius: 9px !important; padding: 3px !important; border-bottom: 0 !important; gap: 3px !important; } html[data-swgma-theme="novo-b"] .tab { border-bottom: 0 !important; border-radius: 7px !important; } html[data-swgma-theme="novo-b"] .tab.active { background: var(--sw-canvas) !important; color: var(--sw-text-1) !important; box-shadow: 0 1px 2px rgba(0,0,0,.12) !important; } /* ═══ 16. ESTADO VAZIO ════════════════════════════════════════════════ Aparece em 79 telas do People — é a região mais frequente do sistema. */ html[data-swgma-theme^="novo-"] .empty-state { background: transparent !important; color: var(--sw-text-3) !important; } html[data-swgma-theme^="novo-"] .empty-state i, html[data-swgma-theme^="novo-"] .empty-state .empty-icon { color: var(--sw-text-4) !important; } /* ═══ 16b. PÁGINAS PÚBLICAS — entrar, definir senha, sem acesso ═══════ 🔴 Elas não carregam o tema antigo, então aqui não há base nenhuma para herdar: cada peça precisa da sua regra. E o desenho delas é feito de gradientes escuros CRAVADOS no próprio arquivo (o céu estrelado do login, o vidro do cartão) — no visual novo isso vira superfície limpa. ⚠️ Nada disto vale sem o atributo: quem não escolheu continua vendo a tela de entrada de hoje, igual. */ html[data-swgma-theme^="novo-"] .auth-bg, html[data-swgma-theme^="novo-"] body.auth-bg { background: var(--sw-bg) !important; background-image: none !important; } html[data-swgma-theme^="novo-"] .login-card, html[data-swgma-theme^="novo-"] .acesso-card, html[data-swgma-theme^="novo-"] .form-header, html[data-swgma-theme^="novo-"] .page-wrap > .card { background: var(--sw-canvas) !important; border: 1px solid var(--sw-border) !important; border-radius: var(--sw-radius-lg) !important; box-shadow: var(--sw-shadow-md) !important; backdrop-filter: none !important; } html[data-swgma-theme^="novo-"] .login-card h1, html[data-swgma-theme^="novo-"] .login-card h2, html[data-swgma-theme^="novo-"] .acesso-titulo, html[data-swgma-theme^="novo-"] .form-title { font-family: var(--sw-font-display) !important; font-weight: var(--nv-peso-titulo, 600) !important; color: var(--sw-text-1) !important; background: none !important; -webkit-text-fill-color: var(--sw-text-1) !important; } html[data-swgma-theme^="novo-"] .acesso-subtitulo, html[data-swgma-theme^="novo-"] .acesso-hint, html[data-swgma-theme^="novo-"] .form-desc, html[data-swgma-theme^="novo-"] .q-desc { color: var(--sw-text-3) !important; } /* O campo com ícone dentro: a moldura é do `.field-wrap`, não do `input`. */ html[data-swgma-theme^="novo-"] .field-wrap { background: var(--sw-canvas) !important; border: 1px solid var(--sw-border-strong) !important; border-radius: var(--sw-radius-sm) !important; } html[data-swgma-theme^="novo-"] .field-wrap:focus-within { border-color: var(--sw-primary) !important; box-shadow: 0 0 0 3px var(--sw-ring) !important; } html[data-swgma-theme^="novo-"] .field-wrap input, html[data-swgma-theme^="novo-"] .q-input { background: transparent !important; color: var(--sw-text-1) !important; border-color: var(--sw-border-strong) !important; } html[data-swgma-theme^="novo-"] .q-input { background: var(--sw-canvas) !important; border-radius: var(--sw-radius-sm) !important; } html[data-swgma-theme^="novo-"] .f-icon, html[data-swgma-theme^="novo-"] .toggle-pw { color: var(--sw-text-4) !important; } html[data-swgma-theme^="novo-"] .mode-tab-bar { background: var(--sw-bg) !important; border: 1px solid var(--sw-border) !important; border-radius: var(--sw-radius-sm) !important; } html[data-swgma-theme^="novo-"] .mode-tab { color: var(--sw-text-3) !important; background: transparent !important; } html[data-swgma-theme^="novo-"] .mode-tab.active { background: var(--sw-primary-tint) !important; color: var(--sw-primary) !important; font-weight: 600 !important; } /* 🔴 O botão de entrar é um GRADIENTE ciano→azul cravado, com brilho no hover. Ele é a peça que mais grita "visual antigo" na primeira tela que a pessoa vê. */ html[data-swgma-theme^="novo-"] .btn.glow-on-hover, html[data-swgma-theme^="novo-"] .btn-enviar, html[data-swgma-theme^="novo-"] .btn-nav-next { background: var(--sw-primary) !important; background-image: none !important; color: var(--sw-primary-on) !important; border-color: transparent !important; box-shadow: var(--sw-shadow-sm) !important; } html[data-swgma-theme^="novo-"] .btn-nav-prev { background: transparent !important; color: var(--sw-text-2) !important; border: 1px solid var(--sw-border-strong) !important; } html[data-swgma-theme^="novo-"] .logo-icon, html[data-swgma-theme^="novo-"] .acesso-icon { background: var(--sw-primary) !important; background-image: none !important; color: var(--sw-primary-on) !important; } /* 🔴 A MARCA E O CÉU ESTRELADO DA TELA DE ENTRAR. O nome "People" é um texto com GRADIENTE ciano (`.gradient-text`) mais um brilho de neon; o fundo tem partículas cianas desenhadas por JavaScript (`.particle`). Nenhum dos dois é da paleta nova — e são a primeira coisa que a pessoa vê. O gradiente vira cor sólida; as partículas ficam, discretas, na cor do texto de apoio (apagá-las mudaria o desenho, não a pele). */ html[data-swgma-theme^="novo-"] .gradient-text, html[data-swgma-theme^="novo-"] .logo-text strong, html[data-swgma-theme^="novo-"] .acesso-brand { background: none !important; background-image: none !important; -webkit-text-fill-color: var(--sw-text-1) !important; color: var(--sw-text-1) !important; } html[data-swgma-theme^="novo-"] .neon-text { text-shadow: none !important; } html[data-swgma-theme^="novo-"] .particle { background: color-mix(in srgb, var(--sw-text-4) 55%, transparent) !important; filter: none !important; } html[data-swgma-theme^="novo-"] .logo-icon { box-shadow: var(--sw-shadow-sm) !important; } html[data-swgma-theme^="novo-"] .q-checkbox, html[data-swgma-theme^="novo-"] .q-radio { background: var(--sw-canvas) !important; border: 1px solid var(--sw-border) !important; border-radius: var(--sw-radius-sm) !important; color: var(--sw-text-2) !important; } html[data-swgma-theme^="novo-"] .q-checkbox.selected, html[data-swgma-theme^="novo-"] .q-radio.selected { border-color: var(--sw-primary) !important; background: var(--sw-primary-tint) !important; color: var(--sw-text-1) !important; } /* ═══ 17. RESPONSIVIDADE ══════════════════════════════════════════════ O que o ateliê provou nas 103 telas: no celular a grade vira UMA coluna e o que se toca tem alvo de dedo. Aqui vale por largura de JANELA (o produto não tem moldura), e só quando o visual novo está ligado. */ @media (max-width: 560px) { html[data-swgma-theme^="novo-"] .stats-grid, html[data-swgma-theme^="novo-"] .kpis, html[data-swgma-theme^="novo-"] .grid-2, html[data-swgma-theme^="novo-"] .grid-3, html[data-swgma-theme^="novo-"] .grid-4 { grid-template-columns: 1fr !important; } /* 🔴 ALVO DE DEDO: o interruptor tem 34×19 px — certeiro no rato, pequeno no dedo. Ele ganha área de toque INVISÍVEL, sem mudar o desenho. */ html[data-swgma-theme^="novo-"] .switch-track { position: relative; } html[data-swgma-theme^="novo-"] .switch-track::before { content: ""; position: absolute; inset: -9px -5px; border-radius: 999px; } html[data-swgma-theme^="novo-"] .btn-icon, html[data-swgma-theme^="novo-"] .modal-close { min-width: 34px !important; min-height: 34px !important; } } /* ⚠️ Quem pediu menos movimento no aparelho recebe a pele, não a animação. */ @media (prefers-reduced-motion: reduce) { html[data-swgma-theme^="novo-"] * { transition-duration: .01s !important; animation-duration: .01s !important; } } /* ═══ SOBRAS DO TAILWIND ═══════════════════════════════════════════════ 19 usos de `text-cyan-400` / `bg-cyan-500` pintavam acento com o ciano do visual ANTIGO. A folha do Tailwind é gerada e não se edita à mão, então a classe passa a valer o acento — e só dentro do visual novo. ⚠️ Sem `!important`: `html[data-swgma-theme^=…] .classe` já vence a utilitária por especificidade, e `!important` aqui atropelaria quem legitimamente sobrescreve a classe numa tela. */ html[data-swgma-theme^="novo-"] .text-cyan-400 { color: var(--sw-primary, #C45C16); } html[data-swgma-theme^="novo-"] .bg-cyan-500 { background-color: var(--sw-primary, #C45C16); color: var(--nv-sobre-cor, #fff); }