/* ============================================================ Pro SST — RELEVO (profundidade do visual novo) ------------------------------------------------------------ Pedido do Leandro (05/10/2026), olhando o Dashboard: "esta tudo muito invisivel, como se tivesse camuflado — precisamos melhorar os botoes, o sombreamento de tudo, o fundo escurece se preciso, um branco gelo". O DIAGNOSTICO (nao e impressao, esta no CSS): - listas-nova.css, forms-nova.css e crm-dashboard.css zeram a sombra de TUDO — `box-shadow: none !important` em cartao, em botao e no cabecalho da tela; - o chao da pagina continuou no `bg-slate-50` do Tailwind (#F8FAFC), que e praticamente branco. Cartao branco, sem sombra, dentro de pagina branca: nao ha o que enxergar. O mesmo vale para o botao secundario (branco, borda a 15% de opacidade, sombra nenhuma). O QUE ESTA CAMADA FAZ — so profundidade, nenhum redesenho: 1. chao da pagina em BRANCO GELO (#EBEFF6), para o cartao branco ter de onde se destacar; 2. uma escala de elevacao de 3 niveis: --rl-e0 (botao em repouso), --rl-e1 (cartao), --rl-e2 (hover); 3. borda um tom mais firme em cartao, botao e campo — feito REDEFININDO os tokens que as camadas ja usam (--ln-edge, --fm-edge, --fm-btn, --cd-line), sem seletor novo; 4. botao e cartao clicavel levantam 1px no hover (so com animacao ligada: ver @media prefers-reduced-motion). NAO MUDA: cor de marca, tipografia, tamanho, espacamento, raio dos botoes, nenhum template, view ou JS. CSS ESCRITO A MAO DE PROPOSITO: o Tailwind do projeto e um bundle pre-compilado e o binario nao esta no repo — classe utilitaria nova so existiria depois de alguem rodar o build (foi o que quebrou o desktop no PR #973). ESCOPO - @media screen: no papel nada daqui vale (mesma licao do dark.css, onde enumerar @media print sempre deixava passar). - Tema escuro entra pelos TOKENS (sombra preta mais funda); as cores do escuro continuam vindo do dark.css e das camadas, que redefinem os mesmos tokens com especificidade maior. - `?sidebar=classica` devolve o visual anterior inteiro. ESPECIFICIDADE: listas-nova/forms-nova cravam `box-shadow: none !important` com um id no seletor. Para vencer sem reescrever aquelas regras, o seletor daqui repete o id (#conteudo-principal#conteudo-principal) — mesmo truque ja usado e documentado em listas-nova.css. ============================================================ */ @media screen { /* ------------------------------------------------------------ * TOKENS * ---------------------------------------------------------- */ :root { --rl-gelo: #E8EDF5; /* chao da pagina */ --rl-borda: #D9E0EA; /* borda de cartao */ --rl-borda-forte: #C3CEDC; /* borda de botao e de campo */ --rl-e0: 0 1px 2px rgba(16, 24, 40, .07), 0 1px 3px rgba(16, 24, 40, .05); --rl-e1: 0 1px 2px rgba(16, 24, 40, .06), 0 6px 16px -6px rgba(16, 24, 40, .14); --rl-e2: 0 2px 4px rgba(16, 24, 40, .06), 0 16px 32px -12px rgba(16, 24, 40, .22); } /* No escuro a sombra e preta e mais funda: o truque do claro (sombra azulada suave) desaparece sobre #0F172A. */ html[data-theme="dark"] { --rl-borda: #2F3846; --rl-borda-forte: #3D4857; --rl-e0: 0 1px 2px rgba(0, 0, 0, .40); --rl-e1: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 12px -4px rgba(0, 0, 0, .50); --rl-e2: 0 2px 4px rgba(0, 0, 0, .35), 0 14px 28px -10px rgba(0, 0, 0, .60); } /* ------------------------------------------------------------ * 1. CHAO DA PAGINA — branco gelo * So no tema claro: no escuro o dark.css ja afunda o fundo e * reescrever aqui acenderia a tela. * ---------------------------------------------------------- */ html:not([data-theme="dark"]) body.bg-slate-50, html:not([data-theme="dark"]) body.bg-gray-50 { background-color: var(--rl-gelo); } /* A barra de paineis e branca: com o chao em gelo ela ja se separa, mas a sombra fina resolve o encontro com a area de rolagem. */ html:not([data-theme="dark"]) body.topbar-nova header.sticky { box-shadow: 0 1px 3px rgba(16, 24, 40, .05); } /* ------------------------------------------------------------ * 2. BORDAS — um tom mais firmes, pelos tokens que as camadas * ja consomem (nenhum seletor novo). * O escuro NAO entra aqui: listas-nova e forms-nova redefinem os * mesmos tokens em `html[data-theme="dark"] body.sidebar-nova`, * que tem especificidade maior e continua vencendo. * ---------------------------------------------------------- */ body.sidebar-nova { --ln-edge: var(--rl-borda); --fm-edge: var(--rl-borda); --fm-rule: #E4E9F0; --fm-btn: var(--rl-borda-forte); } /* ------------------------------------------------------------ * 3. TELAS DE LISTA (listas-nova.css) * ---------------------------------------------------------- */ /* Cartoes de numero (os KPIs do topo das listas) */ body.sidebar-nova #conteudo-principal#conteudo-principal > [class*="space-y-"]:not(.cl):not(.ld) > .grid > :is(div, a).bg-white[class*="rounded-"] { border-color: var(--rl-borda) !important; border-radius: 10px !important; box-shadow: var(--rl-e1) !important; transition: box-shadow .18s ease, transform .18s ease, border-color .15s ease; } body.sidebar-nova #conteudo-principal#conteudo-principal > [class*="space-y-"]:not(.cl):not(.ld) > .grid > a.bg-white[class*="rounded-"]:hover { box-shadow: var(--rl-e2) !important; } /* Cartoes grandes (filtros, tabela, formulario embutido) */ body.sidebar-nova #conteudo-principal#conteudo-principal > [class*="space-y-"]:not(.cl):not(.ld) > .bg-white[class*="rounded-2xl"] { border-color: var(--rl-borda) !important; border-radius: 12px !important; box-shadow: var(--rl-e1) !important; } /* Botoes do cabecalho da tela (Filtros, Excel, Imprimir, Nova OS...) */ body.sidebar-nova #conteudo-principal#conteudo-principal > [class*="space-y-"]:not(.cl):not(.ld) > :first-child:is([class*="bg-gradient"][class*="rounded-"], .theme-header, [class*="-hero"]) :is(a, button)[class*="rounded-xl"] { border-color: var(--rl-borda-forte) !important; box-shadow: var(--rl-e0) !important; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; } body.sidebar-nova #conteudo-principal#conteudo-principal > [class*="space-y-"]:not(.cl):not(.ld) > :first-child:is([class*="bg-gradient"][class*="rounded-"], .theme-header, [class*="-hero"]) :is(a, button)[class*="rounded-xl"]:hover { box-shadow: var(--rl-e1) !important; } /* A acao principal (a que as camadas pintam no acento) carrega a sombra na propria cor — e o unico botao que deve puxar o olho. */ body.sidebar-nova #conteudo-principal#conteudo-principal > [class*="space-y-"]:not(.cl):not(.ld) > :first-child:is([class*="bg-gradient"][class*="rounded-"], .theme-header, [class*="-hero"]) :is(a, button)[class*="rounded-xl"]:is(.bg-white, [class*="bg-emerald-5"], [class*="bg-green-5"], [class*="bg-emerald-6"]) { border-color: transparent !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .10), 0 6px 14px -6px color-mix(in srgb, var(--ln-accent) 70%, transparent) !important; } /* Select de filtro que mora no cabecalho (ex.: "Todas as unidades") */ body.sidebar-nova #conteudo-principal#conteudo-principal > [class*="space-y-"]:not(.cl):not(.ld) > :first-child:is([class*="bg-gradient"][class*="rounded-"], .theme-header, [class*="-hero"]) select { border-color: var(--rl-borda-forte) !important; box-shadow: var(--rl-e0) !important; } /* ------------------------------------------------------------ * 4. TELAS DE CADASTRO/EDICAO (forms-nova.css) * ---------------------------------------------------------- */ /* Cartoes das secoes do formulario */ body.tela-form #conteudo-principal#conteudo-principal form :is(.bg-white, [class*="bg-gradient-to-br"][class*="-50"])[class*="rounded-2xl"], body.tela-form #conteudo-principal#conteudo-principal form .bg-white[class*="rounded-xl"][class*="shadow"], body.tela-form #conteudo-principal#conteudo-principal > div > .bg-white[class*="rounded-2xl"], body.sidebar-nova #conteudo-principal#conteudo-principal .bg-white[class*="rounded-2xl"]:has(> [class*="bg-gradient-to-r"]:first-child):not(:is(.ld, .cl, .cd) *) { border-color: var(--rl-borda) !important; box-shadow: var(--rl-e1) !important; } /* Salvar / acao principal colorida (a lista de familias vem do forms-nova.css: e a mesma, so a sombra muda) */ body.tela-form #conteudo-principal#conteudo-principal form :is(button, a):is([class*="bg-gradient"], [class*="bg-amber-"], [class*="bg-orange-"], [class*="bg-blue-5"], [class*="bg-blue-6"], [class*="bg-emerald-5"], [class*="bg-emerald-6"], [class*="bg-teal-5"], [class*="bg-teal-6"], [class*="bg-violet-5"], [class*="bg-violet-6"], [class*="bg-purple-5"], [class*="bg-purple-6"], [class*="bg-indigo-5"], [class*="bg-indigo-6"], .theme-btn).text-white { box-shadow: 0 1px 2px rgba(16, 24, 40, .10), 0 6px 14px -6px color-mix(in srgb, var(--ln-accent) 70%, transparent) !important; transition: box-shadow .15s ease, transform .15s ease; } /* Cancelar / Voltar (contorno ao lado do Salvar) */ body.tela-form #conteudo-principal#conteudo-principal form a[class*="border-gray-"][class*="rounded-xl"] { border-color: var(--rl-borda-forte) !important; box-shadow: var(--rl-e0) !important; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; } /* Campos: a borda do forms-nova (#ECECF1) sumia dentro do cartao branco. O token acima ja firmou; aqui so a caixa do campo ganha o fio de sombra que separa do fundo do cartao. */ body.tela-form #conteudo-principal#conteudo-principal form :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { box-shadow: inset 0 1px 1px rgba(16, 24, 40, .03) !important; } /* ------------------------------------------------------------ * 5. DASHBOARD NOVO (crm-dashboard.css, classes .cd-*) * E a tela do print do Leandro: fundo #FBFCFD, cartao branco, * borda #E9ECEF e zero sombra. * ---------------------------------------------------------- */ /* A classe aparece duas vezes de proposito: crm-dashboard.css entra pelo {% block extra_css %}, DEPOIS deste arquivo, e `.cd` empatado em especificidade deixaria o fundo #FBFCFD do desenho original vencer. */ .cd.cd { --cd-bg: var(--rl-gelo); --cd-line: var(--rl-borda); } .cd .cd-card { box-shadow: var(--rl-e1); transition: box-shadow .18s ease, transform .18s ease, border-color .15s ease; } .cd .cd-card--link:hover { box-shadow: var(--rl-e2); border-color: var(--cd-accent); } .cd .cd-btn { border-color: var(--rl-borda-forte); box-shadow: var(--rl-e0); transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease, background-color .15s ease; } .cd .cd-btn:hover { box-shadow: var(--rl-e1); } .cd .cd-btn--primary { border-color: transparent; box-shadow: 0 1px 2px rgba(16, 24, 40, .10), 0 6px 14px -6px color-mix(in srgb, var(--cd-accent) 70%, transparent); } /* ------------------------------------------------------------ * 6. TELAS QUE NAO PASSARAM PELA REPAGINACAO (Comando, Finance, * Atendimento e as ~267 telas em Tailwind puro). * O padrao de cartao delas e `bg-white ... rounded-* shadow-sm`, e * o shadow-sm do Tailwind e 0 1px 2px a 5% — invisivel sobre o * fundo quase branco. Troca so o VALOR da variavel que o Tailwind * compoe, entao `ring-*` continua funcionando por cima. * Elemento sem bg-white (etiqueta, chip, menu flutuante) nao entra. * ---------------------------------------------------------- */ html:not([data-theme="dark"]) [class~="bg-white"][class~="shadow-sm"][class*="rounded-"] { --tw-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 12px -4px rgba(16, 24, 40, .10); --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 4px 12px -4px var(--tw-shadow-color); } /* ------------------------------------------------------------ * 7. O MOVIMENTO (so com animacao ligada) * Quem pediu menos animacao — no sistema ou no painel de * acessibilidade — fica so com a sombra. * ---------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { html:not([data-a11y-animacao="0"]) .cd .cd-card--link:hover, html:not([data-a11y-animacao="0"]) .cd .cd-btn:hover, html:not([data-a11y-animacao="0"]) body.sidebar-nova #conteudo-principal#conteudo-principal > [class*="space-y-"]:not(.cl):not(.ld) > .grid > a.bg-white[class*="rounded-"]:hover, html:not([data-a11y-animacao="0"]) body.sidebar-nova #conteudo-principal#conteudo-principal > [class*="space-y-"]:not(.cl):not(.ld) > :first-child:is([class*="bg-gradient"][class*="rounded-"], .theme-header, [class*="-hero"]) :is(a, button)[class*="rounded-xl"]:hover, html:not([data-a11y-animacao="0"]) body.tela-form #conteudo-principal#conteudo-principal form a[class*="border-gray-"][class*="rounded-xl"]:hover { transform: translateY(-1px); } } /* ------------------------------------------------------------ * 8. LEGIBILIDADE — o preco do chao mais escuro * ------------------------------------------------------------ * Retorno do Leandro na previa: "a cor das letras esta meio cinza, * nao deixando enxergar bem". Procede, e a causa e deste arquivo: o * chao em gelo (#E8EDF5) e mais escuro que o #F8FAFC de antes, entao * TODO texto cinza perdeu contraste de uma vez. O subtitulo do * Dashboard, por exemplo, caiu de 3,37 para 2,68 — metade do minimo. * * Medido no navegador (Playwright + WCAG 2.1) em 7 telas antes de * escolher valor: 175 trechos de texto abaixo do minimo AA. A conta * de cada cor esta no fim deste bloco. * * Os alvos sao os DOIS fundos onde o texto mora — o cartao branco e o * chao gelo — e nao so o branco: foi exatamente por olhar so o branco * que o problema passou. * * Remapear utilitaria de cor e seguro aqui porque foi contado, nao * suposto: nas 7 telas sao 275 usos de text-gray-400/500 (e as * slate-*) sobre fundo claro e ZERO sobre fundo escuro. O tema escuro * fica de fora de qualquer forma — quem manda la e o dark.css. * ---------------------------------------------------------- */ /* 8.1 — Utilitarias de texto cinza do Tailwind. A ordem 400 < 500 < 600 continua de pe: a hierarquia nao achata. */ html:not([data-theme="dark"]) .text-gray-400, html:not([data-theme="dark"]) .text-slate-400 { color: #636B79; /* era #9CA3AF — 2,54 no branco e 2,16 no gelo */ } html:not([data-theme="dark"]) .text-gray-500, html:not([data-theme="dark"]) .text-slate-500 { color: #5A6474; /* era #6B7280 — passava no branco (4,83) e caia no gelo (4,11) */ } /* Texto de dica dentro do campo. Fica de fora o campo que mora numa faixa colorida (placeholder branco de proposito): escurecer la apagaria a dica. */ html:not([data-theme="dark"]) .form-input::placeholder, html:not([data-theme="dark"]) .form-textarea::placeholder, html:not([data-theme="dark"]) #conteudo-principal :is(input, textarea):not([class*="placeholder-white"]):not([class*="bg-white/"])::placeholder { color: #636B79; } /* 8.2 — Tokens de texto das camadas. Mesmo desenho do bloco 2: trocar o valor onde a camada ja le, sem seletor novo. O escuro de cada camada tem especificidade maior e segue vencendo, entao nada aqui o alcanca. */ body.sidebar-nova { --ln-muted: #5D6375; /* era #8A8FA0 — 2,74 no gelo */ --ln-label: #575966; /* era #787988 */ --ml-muted: #6A6A6A; /* era #929292 */ } /* O menu lateral com a cor da marca declara os seus no mesmo seletor; este arquivo carrega depois, entao basta repetir a forma. */ html:not([data-theme="dark"]) body.sidebar-marca { --sb-text: #4E5668; /* era #666D80 — 4,40 no gelo, logo abaixo do minimo */ --sb-muted: #616878; /* era #8A8F9C — 2,75 */ } html:not([data-theme="dark"]) body.topbar-nova { --tb-icon: #52647B; /* era #687D96 — 3,60 */ } .cd.cd { --cd-muted: #5C6572; /* era #8A929C — 2,68 no gelo */ --cd-label: #545E6E; /* era #6B7280 */ --cd-faint: #636B79; /* era #AEB4BD — 1,78, praticamente invisivel */ } /* Conta do contraste depois da troca (WCAG 2.1, texto normal pede 4,5): cor no cartao branco no chao gelo #4E5668 7,36 6,26 #545E6E 6,56 5,58 #575966 6,94 5,90 #5A6474 5,98 5,09 #5C6572 5,90 5,02 #5D6375 5,99 5,09 #616878 5,59 4,75 #636B79 5,37 4,57 #6A6A6A 5,41 4,60 Nenhuma fica abaixo de 4,5 em nenhum dos dois fundos. */ }