/* ============================================================ VX CRM — Modo claro Liga com html[data-tema="claro"], que o tema.js põe POR PESSOA. A PALETA NÃO FOI INVENTADA É a do site do escritório, do design-guide do cliente (clientes/vieira-xavier-advocacia/design-guide.md): fundo #F7F6F3, card #FCFBF8, borda #E0DCD2, texto #14171F, título navy, ação #2143CB. O guia proíbe branco puro como fundo — por isso nenhum fundo aqui é #FFFFFF. ⚠️ TODA REGRA COMEÇA COM html[data-tema="claro"], SEM EXCEÇÃO Uma regra sem o prefixo mudaria o modo ESCURO de todo mundo, calada. O `teste-tema.mjs` recusa o arquivo se isso acontecer — e recusa @media também, porque regra dentro de @media escapa da conferência. ⚠️ O SELETOR DAS TELAS PRECISA DO #view-... O CSS de cada tela vem do JS (UI.css) com o id na frente. Um `html[data-tema] .kpi:hover` perde para `#view-dashboard .kpi:hover` — id pesa mais que atributo. Por isso as sobreposições das telas repetem o id. OS TOKENS RESOLVEM QUASE TUDO. O resto deste arquivo são as cores que o código herdou cravadas: véus de branco (rgba 255) que no fundo claro simplesmente somem, e cinzas escuros de borda. Contraste medido no teste-tema.mjs, contra os quatro fundos. ============================================================ */ html[data-tema="claro"] { color-scheme: light; --accent: #2143CB; --accent-soft: #2143CB; /* no escuro era o azul claro; no claro, o próprio azul lê */ --accent-hover: #1A35A6; /* o guia do site: escurecer no hover (fundo claro) */ --accent-press: #142B88; /* ⚠️ ESCALA DE ELEVAÇÃO — revista em 14/09. A primeira versão pôs card #FCFBF8 sobre fundo #F7F6F3: diferença de luminosidade de 2%, e nenhum card do sistema tem borda (no escuro quem separa é o vidro). Resultado, nas palavras do Gabriel: "estourado, os cards misturando com o fundo". Agora são três degraus que se veem: fundo creme mais fechado (o "preenchimento neutro" do site), card claro por cima, e dentro do card o que é campo ou cartão rebaixado. A sombra vem na seção ELEVAÇÃO. */ --navy-deep: #F7F5F1; /* barra lateral: acima do fundo, como um card */ --bg: #ECE9E2; /* Vidro vira papel. Desfoque sobre fundo claro chapado não aparece e custa processamento no celular. */ --glass: #FDFCFA; --glass-strong: #F4F2ED; --glass-faint: #F2EFE9; --blur: none; --surface: #FDFCFA; /* card */ --surface-2: #F4F2ED; /* campo, linha em hover, cartão dentro de card */ --surface-3: #E9E5DC; /* item ativo, trilho */ --surface-solid: #FDFCFA; --border: #DDD7CB; --border-2: #C8C1B2; /* --white é usado como "texto forte" em 100 lugares do código herdado. No claro, texto forte é tinta escura. */ --white: #14171F; --text: #14171F; --muted: #3E4149; --subtle: #5A5C63; /* o #6B6C72 do guia dava 4,4:1 no cinza da barra lateral */ --danger: #B42343; --danger-rgb: 180, 35, 67; --warning: #8F5300; --warning-rgb: 143, 83, 0; --info: #2143CB; --ok: #1E7D32; --ok-rgb: 30, 125, 50; --ok-hover: #23903A; --ok-press: #196B2A; --ok-glow: rgba(30, 125, 50, .22); /* Sombra de quem flutua (menu, tooltip). Cor da tinta do texto, não preto: sombra preta sobre creme fica suja. */ --shadow: 0 2px 6px rgba(20, 23, 31, .06), 0 16px 36px -10px rgba(20, 23, 31, .20); } /* ---------- Fundo ---------- */ html[data-tema="claro"] body { background: radial-gradient(900px 620px at 82% -6%, rgba(33, 67, 203, .06), transparent 62%), radial-gradient(760px 520px at 6% 102%, rgba(143, 166, 255, .09), transparent 60%), linear-gradient(160deg, #F1EEE8 0%, #ECE9E2 46%, #E5E1D8 100%), #ECE9E2; background-attachment: fixed; } /* A marca d'água é o símbolo BRANCO. No claro, ele vira tinta. */ html[data-tema="claro"] body::before { filter: brightness(0); opacity: .035; } /* A logo é SVG branco. Só as SVG — a vx-lockup-navy.png das peças já é escura. */ html[data-tema="claro"] img[src$="vx-simbolo.svg"], html[data-tema="claro"] img[src$="vx-lockup.svg"], html[data-tema="claro"] img[src$="vx-lockup-h.svg"] { filter: brightness(0); } /* O círculo das iniciais recebe o fundo no style (core.js, UI.avatar — cinza médio a escuro) e herda a letra de --white. No claro --white virou tinta, e saía "MS" escuro sobre cinza escuro. A letra fica branca nos dois temas. */ html[data-tema="claro"] .avatar { color: #FFFFFF; } /* ---------- Estrutura ---------- */ html[data-tema="claro"] .sidebar { border-right: 1px solid var(--border); box-shadow: 6px 0 24px -16px rgba(20, 23, 31, .18); } html[data-tema="claro"] .topbar { background: rgba(236, 233, 226, .88); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset; } /* ============================================================ ELEVAÇÃO — o que separa o card do fundo ⚠️ O CONTORNO É SOMBRA (0 0 0 1px), NÃO BORDA. `border` mudaria o tamanho de tudo em 2px e, pior, apagaria bordas que carregam significado: a coluna do funil tem o topo pintado com a cor da etapa, e o item de relatório tem a faixa azul à esquerda. Sombra de 1px desenha o contorno sem tocar em nenhuma delas. Três degraus: 1. repouso — contorno + sombra curta de contato + sombra longa leve 2. hover — a longa cresce: o card "sobe" 3. flutua — menu, janela, painel lateral (--shadow e a seção abaixo) ============================================================ */ html[data-tema="claro"] .panel, html[data-tema="claro"] .card, html[data-tema="claro"] .kpi, html[data-tema="claro"] .table-wrap, html[data-tema="claro"] .co-card, html[data-tema="claro"] .an-item, html[data-tema="claro"] .au-card, html[data-tema="claro"] .as-card, html[data-tema="claro"] .us-card, html[data-tema="claro"] .bl-item, html[data-tema="claro"] .ge-estado, html[data-tema="claro"] .ge-item, html[data-tema="claro"] .gpa-item, html[data-tema="claro"] .rp-insights, html[data-tema="claro"] #view-dashboard .dsh-onb { box-shadow: 0 0 0 1px rgba(20, 23, 31, .07), 0 1px 2px rgba(20, 23, 31, .06), 0 8px 20px -8px rgba(20, 23, 31, .12); } html[data-tema="claro"] .card:hover, html[data-tema="claro"] .kpi:hover, html[data-tema="claro"] #view-dashboard .kpi:hover, html[data-tema="claro"] #view-reports .kpi:hover, html[data-tema="claro"] .co-card:hover, html[data-tema="claro"] .an-item:hover, html[data-tema="claro"] .au-card:hover, html[data-tema="claro"] .gpa-item:hover { box-shadow: 0 0 0 1px rgba(20, 23, 31, .09), 0 2px 4px rgba(20, 23, 31, .06), 0 16px 32px -12px rgba(20, 23, 31, .20); } /* O hover do card no escuro clareia o fundo. No claro, clarear um card que já é o tom mais claro da tela não aparece — ele fica e só a sombra sobe. */ html[data-tema="claro"] .card:hover, html[data-tema="claro"] .kpi:hover { background: var(--surface); } /* Funil: a coluna é o trilho, rebaixado; o cartão é quem fica em cima. Antes era o contrário — cartão cinza dentro de coluna clara, e parecia buraco, não cartão. */ html[data-tema="claro"] #view-pipeline .pp-col { background: #F3F0EA; box-shadow: 0 0 0 1px rgba(20, 23, 31, .06), 0 1px 2px rgba(20, 23, 31, .04); } html[data-tema="claro"] #view-pipeline .pp-card { background: var(--surface); box-shadow: 0 0 0 1px rgba(20, 23, 31, .07), 0 1px 3px rgba(20, 23, 31, .08); } /* Campos: um degrau abaixo do card, com a borda que o guia pede. */ html[data-tema="claro"] .search-box input { background: var(--surface); box-shadow: 0 0 0 1px rgba(20, 23, 31, .08), 0 1px 2px rgba(20, 23, 31, .04); } html[data-tema="claro"] .tab { background: var(--surface); box-shadow: 0 0 0 1px rgba(20, 23, 31, .08); } /* ⚠️ O fundo azul da aba ativa TEM que ser repetido aqui. A regra de cima (html[data-tema] .tab) pesa mais que o `.tab.active` do pro.css, e na primeira revisão a aba "Hoje" de Atividades e Aniversariantes sumiu: letra branca sobre fundo claro. */ html[data-tema="claro"] .tab.active { background: var(--green); box-shadow: 0 4px 12px -4px rgba(33, 67, 203, .45); } html[data-tema="claro"] .tab:hover:not(.active) { background: var(--surface-2); } html[data-tema="claro"] .btn-primary { box-shadow: 0 4px 12px -4px rgba(33, 67, 203, .45); } /* O que flutua: sombra longa e macia, e um contorno — sobre overlay claro a borda de 1px sozinha some. */ html[data-tema="claro"] .menu, html[data-tema="claro"] .modal, html[data-tema="claro"] .cmdk-box, html[data-tema="claro"] .notif-panel, html[data-tema="claro"] .search-drop { box-shadow: 0 0 0 1px rgba(20, 23, 31, .06), 0 4px 10px rgba(20, 23, 31, .06), 0 28px 60px -16px rgba(20, 23, 31, .30); } /* Janela, paleta e notificações no tom de CARD. No escuro elas usam o --surface-2 (um véu mais forte); no claro esse tom é o de campo rebaixado, e a janela saía acinzentada, com cara de desabilitada. */ html[data-tema="claro"] .modal, html[data-tema="claro"] .cmdk-box, html[data-tema="claro"] .notif-panel, html[data-tema="claro"] .search-drop { background: var(--surface); } html[data-tema="claro"] .drawer { box-shadow: -1px 0 0 rgba(20, 23, 31, .06), -24px 0 60px -20px rgba(20, 23, 31, .28); } html[data-tema="claro"] .toast { box-shadow: 0 12px 28px -8px rgba(20, 23, 31, .30); } html[data-tema="claro"] ::-webkit-scrollbar-thumb { background: rgba(20, 23, 31, .22); } html[data-tema="claro"] ::-webkit-scrollbar-thumb:hover { background: rgba(20, 23, 31, .38); } html[data-tema="claro"] * { scrollbar-color: rgba(20, 23, 31, .25) transparent; } html[data-tema="claro"] input[type="date"], html[data-tema="claro"] input[type="time"], html[data-tema="claro"] input[type="datetime-local"], html[data-tema="claro"] input[type="month"] { color-scheme: light; } /* ---------- Botões e pílulas ---------- */ /* O "branco" invertido: fundo navy, texto branco. */ html[data-tema="claro"] .btn-white { background: var(--navy); color: #FFFFFF; } html[data-tema="claro"] .btn-ghost { border-color: rgba(20, 23, 31, .22); } html[data-tema="claro"] .btn-ghost:hover { border-color: var(--text); } /* Fundo vermelho pede letra branca — com --white escuro, sairia preto no vermelho. */ html[data-tema="claro"] .btn-danger:hover, html[data-tema="claro"] .toast.err { color: #FFFFFF; } html[data-tema="claro"] .pill-green { background: rgba(33, 67, 203, .10); } html[data-tema="claro"] .pill-gray { background: rgba(20, 23, 31, .06); } html[data-tema="claro"] .pill-red { background: rgba(180, 35, 67, .10); } html[data-tema="claro"] .pill-yellow { background: rgba(143, 83, 0, .10); } html[data-tema="claro"] .pill-blue { background: rgba(33, 67, 203, .08); } html[data-tema="claro"] .pill-ok { background: rgba(30, 125, 50, .10); } /* A pontuação do contato vem com a cor escrita no style (core.js, leadScore): branco, cinza claro, cinza. No claro as duas primeiras somem. */ html[data-tema="claro"] .pill[style*="color:#FFFFFF"] { color: var(--text) !important; background: rgba(20, 23, 31, .08) !important; } html[data-tema="claro"] .pill[style*="color:#B3B3B3"] { color: var(--muted) !important; background: rgba(20, 23, 31, .05) !important; } html[data-tema="claro"] .pill[style*="color:#6A6A6A"] { color: var(--subtle) !important; background: rgba(20, 23, 31, .04) !important; } /* ---------- Véus de hover e contadores ---------- */ html[data-tema="claro"] .nav-item:hover, html[data-tema="claro"] .notif-item:hover { background: rgba(20, 23, 31, .05); } html[data-tema="claro"] .menu-item:hover, html[data-tema="claro"] .cmdk-item.sel { background: rgba(20, 23, 31, .06); } html[data-tema="claro"] .tab-count { background: rgba(20, 23, 31, .08); } html[data-tema="claro"] .tab.active .tab-count { background: rgba(255, 255, 255, .22); } html[data-tema="claro"] .chip { background: rgba(20, 23, 31, .05); } /* Fundo que escurece atrás de janela: preto a 70% sobre creme vira mancha. */ html[data-tema="claro"] .cmdk, html[data-tema="claro"] .modal-overlay, html[data-tema="claro"] .drawer-overlay { background: rgba(20, 23, 31, .38); } /* ---------- Menu do celular (menu-celular.js) ---------- */ html[data-tema="claro"] .navcard { background: rgba(236, 233, 226, .94); } html[data-tema="claro"] .navfab { background: var(--surface); box-shadow: 0 0 0 1px rgba(20, 23, 31, .08), 0 14px 34px -12px rgba(20, 23, 31, .40); } /* ---------- Gráficos (charts.js) ---------- Os trilhos e brilhos estão como ATRIBUTO do SVG (fill="#fff"). Propriedade de CSS vence atributo de apresentação, então dá para trocar daqui. */ html[data-tema="claro"] svg [fill="#fff"] { fill: #14171F; } html[data-tema="claro"] svg stop[stop-color="#fff"] { stop-color: #2143CB; } html[data-tema="claro"] svg [fill="rgba(255,255,255,.10)"] { fill: rgba(20, 23, 31, .07); } html[data-tema="claro"] .ch-cell:hover { stroke: rgba(20, 23, 31, .45); } /* ---------- Entrada e conta (cloud.js) ---------- */ html[data-tema="claro"] .cg-msg.ok { background: rgba(33, 67, 203, .08); border-color: rgba(33, 67, 203, .25); } html[data-tema="claro"] .acc-cta { border-color: var(--border); } html[data-tema="claro"] .ob-list .ob-ico { background: rgba(33, 67, 203, .08); border-color: rgba(33, 67, 203, .22); } /* ---------- Página Inicial ---------- */ html[data-tema="claro"] #view-dashboard .dsh-onb { border-color: var(--border); } html[data-tema="claro"] #view-dashboard .dsh-step.done .dsh-step-lb { text-decoration-color: rgba(20, 23, 31, .45); } html[data-tema="claro"] #view-dashboard .dsh-check.on svg circle { fill: rgba(33, 67, 203, .15); } /* ---------- Funil ---------- */ html[data-tema="claro"] #view-pipeline .pp-via-n { background: rgba(20, 23, 31, .08); } html[data-tema="claro"] #view-pipeline .pp-via.active .pp-via-n { background: rgba(255, 255, 255, .22); } html[data-tema="claro"] #view-pipeline .pp-clear:hover { background: rgba(20, 23, 31, .06); } html[data-tema="claro"] #view-pipeline .pp-card:hover { border-color: transparent; box-shadow: 0 0 0 1px rgba(20, 23, 31, .10), 0 2px 4px rgba(20, 23, 31, .06), 0 12px 24px -10px rgba(20, 23, 31, .22); } html[data-tema="claro"] #view-pipeline .pp-card.pp-flash { box-shadow: 0 0 0 1px var(--green), 0 0 20px rgba(33, 67, 203, .25); } html[data-tema="claro"] #view-pipeline .pp-ind { box-shadow: 0 0 10px rgba(33, 67, 203, .45); } html[data-tema="claro"] #view-pipeline .pp-qa-btn:hover { background: rgba(33, 67, 203, .06); } html[data-tema="claro"] #view-pipeline .pp-age { background: rgba(20, 23, 31, .06); } /* ---------- Contatos ---------- */ html[data-tema="claro"] #view-contacts .ct-bulk { background: rgba(33, 67, 203, .07); border-color: rgba(33, 67, 203, .25); } html[data-tema="claro"] #view-contacts .ct-copy:hover { background: rgba(20, 23, 31, .07); } /* ---------- Atividades e Calendário ---------- */ html[data-tema="claro"] #view-activities .gpa-fchip.active { background: rgba(33, 67, 203, .08); } html[data-tema="claro"] #view-activities .gpa-fchip:hover { border-color: var(--border-2); } html[data-tema="claro"] #view-activities .gpa-chip, html[data-tema="claro"] #view-calendar .gpa-chip { background: rgba(20, 23, 31, .05); } html[data-tema="claro"] #view-activities .gpa-chip:hover, html[data-tema="claro"] #view-calendar .gpa-chip:hover { background: rgba(33, 67, 203, .08); } html[data-tema="claro"] #view-activities .gpa-check, html[data-tema="claro"] #view-calendar .gpa-check { border-color: #A29D90; } html[data-tema="claro"] #view-activities .gpa-check:hover, html[data-tema="claro"] #view-calendar .gpa-check:hover { box-shadow: 0 0 0 4px rgba(33, 67, 203, .12); } html[data-tema="claro"] #view-calendar .gpc-day.sel { background: rgba(33, 67, 203, .06); } html[data-tema="claro"] #view-calendar .gpc-day.drag-over { background: rgba(33, 67, 203, .10); } html[data-tema="claro"] #view-calendar .gpc-dnum.today { box-shadow: none; } /* ---------- Conversas ---------- */ html[data-tema="claro"] #view-conversas .cv-aba-q { background: rgba(20, 23, 31, .08); } html[data-tema="claro"] #view-conversas .cv-aba.ativa .cv-aba-q { background: rgba(255, 255, 255, .22); } /* ---------- Assistente (regras) ---------- */ html[data-tema="claro"] #view-automations .au-hero { border-color: var(--border); } html[data-tema="claro"] #view-automations .au-stat { background: rgba(20, 23, 31, .04); } html[data-tema="claro"] #view-automations .au-runs { background: rgba(20, 23, 31, .04); } html[data-tema="claro"] #view-automations .au-card.on .au-runs { border-color: rgba(33, 67, 203, .25); background: rgba(33, 67, 203, .06); } html[data-tema="claro"] #view-automations .au-switch .au-knob { border-color: var(--border-2); } html[data-tema="claro"] #view-automations .au-exec:hover { background: rgba(20, 23, 31, .04); } html[data-tema="claro"] .gp-au-var { border-color: var(--border-2); } html[data-tema="claro"] .gp-au-preview { background: rgba(20, 23, 31, .03); border-color: rgba(20, 23, 31, .25); } html[data-tema="claro"] .gp-au-stepnum { box-shadow: 0 0 0 4px rgba(33, 67, 203, .12); } /* ---------- Relatórios ---------- */ html[data-tema="claro"] #view-reports .rp-insights { border-color: var(--border); } html[data-tema="claro"] #view-reports .rp-ins { background: rgba(20, 23, 31, .03); } html[data-tema="claro"] #view-reports .rp-ins:hover { background: rgba(20, 23, 31, .05); } /* ---------- Configurações ---------- */ html[data-tema="claro"] #view-settings .st-tag { background: rgba(20, 23, 31, .04); } html[data-tema="claro"] #view-settings .st-tag:hover { border-color: var(--border-2); background: rgba(20, 23, 31, .07); } html[data-tema="claro"] #view-settings .st-tag-count { background: rgba(33, 67, 203, .10); } html[data-tema="claro"] #view-settings .st-support { border-color: var(--border-2); } html[data-tema="claro"] #view-settings .st-support:hover { background: rgba(20, 23, 31, .05); }