ganha UMA folha de vidro atrás (pseudo-elemento com o desfoque, como os cartões), e o texto solto da página (títulos, ajudas, tabelas fora de cartão) deixa de ficar direto sobre a foto. Dentro dela, os cartões ficam mais leves e sem desfoque próprio: um desfoque só por página, e nenhum linha a linha nas tabelas. 3. BOTÕES: o primário vira vidro verde (90 %: o branco por cima fica ≥ 4,5:1 até sobre a foto branca); perigo, alerta, WhatsApp e urgente, vidro da cor deles. 4. O que flutua fora da folha (diálogo, barra do robô, a saudação da tela inicial): vidro com desfoque próprio. */ @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { @media screen { :root[data-acrilico="on"]:not([data-tema="escuro"]) body { --verde-claro: color-mix(in srgb, color-mix(in srgb, var(--verde) 14%, #fff) 82%, transparent); --amarelo-f: color-mix(in srgb, color-mix(in srgb, #b7791f 16%, #fff) 82%, transparent); --vermelho-f: color-mix(in srgb, color-mix(in srgb, #c0392b 12%, #fff) 82%, transparent); --azul-f: color-mix(in srgb, color-mix(in srgb, #1f5f99 12%, #fff) 82%, transparent); --e-verde-f: var(--verde-claro); --e-amarelo-f: var(--amarelo-f); --e-vermelho-f: var(--vermelho-f); --e-azul-f: var(--azul-f); --e-roxo-f: color-mix(in srgb, color-mix(in srgb, #5b3a8e 12%, #fff) 82%, transparent); --e-sutil: color-mix(in srgb, color-mix(in srgb, #1d2b24 8%, #fff) 80%, transparent); --e-sutil-2: color-mix(in srgb, color-mix(in srgb, #1d2b24 18%, #fff) 80%, transparent); --e-cartao-2: var(--acr-vidro-2); --e-veu: color-mix(in srgb, var(--acr-base) 80%, transparent); --vermelho: #9b2a1e; --amarelo: #7a4f0c; --azul: #1a5288; --suave: #4d5c54; --e-verde-t: #04522d; --e-amarelo-t: #7a4f0c; --e-vermelho-t: #9b2a1e; --e-azul-t: #1a5288; --e-suave: #4d5c54; --e-verde-esc-forte: color-mix(in srgb, color-mix(in srgb, var(--verde) 45%, #000) 90%, transparent); --e-vermelho-forte: color-mix(in srgb, #9b2a1e 90%, transparent); --e-amarelo-forte: color-mix(in srgb, #7a4f0c 90%, transparent); --e-azul-forte: color-mix(in srgb, #1a5288 90%, transparent); } :root[data-acrilico="on"][data-tema="escuro"] body { --verde-claro: color-mix(in srgb, color-mix(in srgb, var(--verde) 18%, #141d19) 88%, transparent); --amarelo-f: color-mix(in srgb, color-mix(in srgb, #e3a948 16%, #141d19) 88%, transparent); --vermelho-f: color-mix(in srgb, color-mix(in srgb, #ff8577 14%, #141d19) 88%, transparent); --azul-f: color-mix(in srgb, color-mix(in srgb, #8cbfff 14%, #141d19) 88%, transparent); --e-verde-f: var(--verde-claro); --e-amarelo-f: var(--amarelo-f); --e-vermelho-f: var(--vermelho-f); --e-azul-f: var(--azul-f); --e-roxo-f: color-mix(in srgb, color-mix(in srgb, #cdb6f5 14%, #141d19) 88%, transparent); --e-sutil: color-mix(in srgb, color-mix(in srgb, #e3ebe6 8%, #141d19) 86%, transparent); --e-sutil-2: color-mix(in srgb, color-mix(in srgb, #e3ebe6 18%, #141d19) 86%, transparent); --e-cartao-2: var(--acr-vidro-2); --e-veu: color-mix(in srgb, var(--acr-base) 80%, transparent); --vermelho: #ff9a8e; --amarelo: #f2c66d; --azul: #93c5ff; --suave: #b4c5bb; --e-suave: #b4c5bb; --e-vermelho-t: #ff9a8e; --e-azul-t: #93c5ff; --e-verde-esc-forte: color-mix(in srgb, color-mix(in srgb, var(--verde) 45%, #000) 90%, transparent); --e-vermelho-forte: color-mix(in srgb, #b0362a 90%, transparent); --e-amarelo-forte: color-mix(in srgb, #94600f 90%, transparent); --e-azul-forte: color-mix(in srgb, #1f5f99 90%, transparent); } /* 2. a folha de vidro da página (fora da tela inicial, que tem os cartões soltos sobre a foto de propósito) */ :root[data-acrilico="on"] body:not(.entrada) .pagina { position: relative; --branco: var(--acr-vidro-2); --e-cartao: var(--acr-vidro-2); } :root[data-acrilico="on"] body:not(.entrada) .pagina::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: 0 0 16px 16px; background: var(--acr-vidro); box-shadow: 0 10px 40px var(--acr-sombra), inset 0 1px 0 var(--acr-brilho); -webkit-backdrop-filter: blur(var(--acr-blur)) saturate(var(--acr-sat)); backdrop-filter: blur(var(--acr-blur)) saturate(var(--acr-sat)); } /* a folha vai até o pé da tela (06/10/2026, Romeu: «a página está sem acrílico» no Encaminhamento da Emissão sem pendência, na Busca Ativa com o filtro vazio e no Malote sem unidade): com pouco conteúdo ela acabava no meio e o resto da tela ficava foto pura. A barra do layout novo tem --barra-h; no antigo, o cabeçalho tem ~64 px. */ :root[data-acrilico="on"] body:not(.entrada) .pagina { min-height: calc(100vh - var(--barra-h, 64px)); min-height: calc(100dvh - var(--barra-h, 64px)); } /* o bloco de estado (vazio, erro, carregando) fora de cartão e de tabela é um vidro como os cartões: antes era texto solto sobre a folha («Escolha a sua unidade», «Nenhuma guia neste filtro») */ :root[data-acrilico="on"] body:not(.entrada) .estado:not(:is(.card, td, th, .ba-painel, .ba-lista .card) .estado) { background: var(--acr-vidro-2); border: 1px solid var(--acr-borda); border-radius: var(--raio, 10px); box-shadow: inset 0 1px 0 var(--acr-brilho); } /* dentro da folha, nenhum desfoque a mais (a folha já desfocou a foto) */ :root[data-acrilico="on"] body:not(.entrada) .pagina *::before, :root[data-acrilico="on"] body:not(.entrada) .pagina table { -webkit-backdrop-filter: none; backdrop-filter: none; } /* a tela inicial: o texto solto (saudação, ajuda, «Apoio») ganha um vidro do tamanho dele */ :root[data-acrilico="on"] body.entrada :is(.pagina > h1, .pagina > .ajuda, .pagina > .area-tit) { width: fit-content; max-width: 100%; padding: 6px 12px; border-radius: 10px; text-shadow: none; background: var(--acr-vidro); box-shadow: inset 0 1px 0 var(--acr-brilho); -webkit-backdrop-filter: blur(var(--acr-blur)) saturate(var(--acr-sat)); backdrop-filter: blur(var(--acr-blur)) saturate(var(--acr-sat)); } /* 3. botões: vidro tingido (o primário, pela cor de ação do visual novo; os outros, pela cor deles) */ :where(:root[data-acrilico="on"]) .btn { background: color-mix(in srgb, var(--v-acao, var(--verde)) 90%, transparent); border-color: color-mix(in srgb, var(--v-acao, var(--verde)) 70%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); } :root[data-acrilico="on"]:not([data-tema="escuro"]) .btn.alerta { background: var(--e-amarelo-forte, #7a4f0c); border-color: var(--e-amarelo-forte, #7a4f0c); } :root[data-acrilico="on"] .btn.whats { background: color-mix(in srgb, #17733f 90%, transparent); border-color: transparent; } :root[data-acrilico="on"] .btn.urg { background: color-mix(in srgb, #b42318 90%, transparent); border-color: transparent; } :root[data-acrilico="on"] .btn.sec { border-color: var(--acr-borda); box-shadow: inset 0 1px 0 var(--acr-brilho); } /* os números e contadores coloridos (passo da tela inicial, etapa da Emissão, aba das Concluídas, contador da Busca Ativa): vidro da cor deles, com o branco por cima ainda ≥ 4,5:1 */ :root[data-acrilico="on"] body.entrada .passo { background: color-mix(in srgb, var(--marca, #0b5c3f) 88%, transparent); } /* uma regra por seletor (não :is, que dá a todos o peso do mais pesado e passava por cima do número apagado) */ :root[data-acrilico="on"] .num, :root[data-acrilico="on"] .etapas li.feito .bola, :root[data-acrilico="on"] .topo nav a.em-passo-nav.on .em-passo-num, :root[data-acrilico="on"] .nb-passos a[aria-current="step"] .nb-passo-num, :root[data-acrilico="on"] .ba-rot-cenarios button.on .num { background: color-mix(in srgb, var(--v-acao, var(--verde)) 90%, transparent); border-color: transparent; } :root[data-acrilico="on"] body .fx-ok .fx-bola { background: color-mix(in srgb, var(--v-acao, var(--verde)) 90%, transparent); } :root[data-acrilico="on"] .abas-trabalho a.on .aba-n { background: color-mix(in srgb, #0b6b3a 88%, transparent); } /* as luzes de estado (Nina, robô da Busca Ativa, bolinha da guia): vidro da cor, sem perder o sinal */ :root[data-acrilico="on"] .bola.verde { background: color-mix(in srgb, var(--verde) 85%, transparent); } :root[data-acrilico="on"] .reg { background: color-mix(in srgb, var(--reg) 85%, transparent); } :root[data-acrilico="on"] .robo-luz { background: color-mix(in srgb, #7ee2a5 85%, transparent); } :root[data-acrilico="on"] .ag-luz { background: color-mix(in srgb, #9fb2a6 85%, transparent); } :root[data-acrilico="on"] .ag-luz.ligado { background: color-mix(in srgb, #00a557 85%, transparent); } :root[data-acrilico="on"] .ag-luz.simulado { background: color-mix(in srgb, #b7791f 85%, transparent); } :root[data-acrilico="on"] .ag-luz.desligado { background: color-mix(in srgb, #c0392b 85%, transparent); } /* o texto apagado (Busca Ativa e afins) sobre o vidro: o tom de reserva dá 2,6:1 */ :root[data-acrilico="on"]:not([data-tema="escuro"]) body { --e-apagado: #56645c; } :root[data-acrilico="on"][data-tema="escuro"] body { --e-apagado: #a3b4aa; } /* o cabeçalho na cor da marca: o item ativo e os botões redondos ESCURECEM o vidro (clarear derrubava o branco do texto para 3,6–4,2:1); o texto vai a branco cheio */ :root[data-acrilico="on"] body.com-barra .topo nav :is(a.on, .menu-drop.on .menu-topo, .menu-drop:hover .menu-topo) { background: rgba(0, 0, 0, .22); color: #fff; } :root[data-acrilico="on"] body.com-barra .topo nav a:hover { background: rgba(0, 0, 0, .14); } :root[data-acrilico="on"] body.com-barra .topo :is(.ba-sino, .ba-perm) { background: rgba(0, 0, 0, .2); color: #fff; } :root[data-acrilico="on"] body.com-barra .topo .ba-eu { background: rgba(0, 0, 0, .26); color: #fff; } :root[data-acrilico="on"] body.com-barra .topo nav :is(a, .menu-topo) { color: #fff; } /* 4. o que flutua por cima de tudo */ :root[data-acrilico="on"] dialog { background: color-mix(in srgb, var(--acr-base) 82%, transparent); border-color: var(--acr-borda); -webkit-backdrop-filter: blur(var(--acr-blur)) saturate(var(--acr-sat)); backdrop-filter: blur(var(--acr-blur)) saturate(var(--acr-sat)); } /* 5. O QUE GRUDA (sticky) OU FLUTUA (fixed) POR CIMA DE CONTEÚDO (06/10/2026, varredura do Romeu): o fundo deles vinha do token de cartão, translúcido de 34 %, e o texto que passava por baixo aparecia através — a ficha de liberação, a janela do Malote/Liberação, o formulário de irregularidade, o placar do checklist, o visor cheio do Cardio. Vidro DENSO (84 % da cor de base) com desfoque próprio, como o diálogo. O cabeçalho das tabelas saiu daqui (06/10/2026: era a base a 78 %, quase sólido): é vidro leve com desfoque só nele, no bloco da zebra. */ :root[data-acrilico="on"] :is(.lb-ficha, .lb-modal-caixa, .irreg[open] .irreg-form, .sst-placar, .cd-visor.cheia) { background: color-mix(in srgb, var(--acr-base) 84%, transparent); border-color: var(--acr-borda); -webkit-backdrop-filter: blur(var(--acr-blur)) saturate(var(--acr-sat)); backdrop-filter: blur(var(--acr-blur)) saturate(var(--acr-sat)); } :root[data-acrilico="on"] .robo { background: color-mix(in srgb, #0e1a14 80%, transparent); -webkit-backdrop-filter: blur(var(--acr-blur)) saturate(var(--acr-sat)); backdrop-filter: blur(var(--acr-blur)) saturate(var(--acr-sat)); } } } /* (Feito, 23/10/2026) o tamanho do texto no painel: A− / porcentagem / A+ (temas.js). O mesmo seletor do tema, em três colunas; o «A» pequeno e o grande dizem o sentido; no fim da faixa, o botão apaga. */ .tm-seg.tm-escala { grid-template-columns: 1fr 1.1fr 1fr; } .tm-escala button { gap: 2px; font-variant-numeric: tabular-nums; } .tm-escala .tm-escala-a { font-weight: 700; font-size: 12px; line-height: 1; } .tm-escala .tm-escala-a.tm-escala-maior { font-size: 17px; } .tm-escala button:disabled { opacity: .4; cursor: default; } /* (Feito, 23/10/2026) VIDRO SÓ NOS BLOCOS (data-acrilico-modo="blocos", escolha da abinha): o que a tela inicial do Gestão já faz — os cartões soltos sobre a foto — em todas as páginas. A folha de vidro da página sai, e a foto aparece NÍTIDA entre os blocos; cada bloco ganha o próprio desfoque pelo MESMO pseudo-elemento atrás dele (o cartão em si não leva backdrop-filter: os fixos de dentro continuam presos à tela). A faixa do título, que ficaria solta sobre a foto, vira um vidro também; os blocos ficam um pouco mais densos, sem a folha por trás. */ @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { @media screen { :root[data-acrilico="on"][data-acrilico-modo="blocos"] body:not(.entrada) .pagina { --branco: var(--acr-vidro); --e-cartao: var(--acr-vidro); } :root[data-acrilico="on"][data-acrilico-modo="blocos"] body:not(.entrada) .pagina::before { content: none; -webkit-backdrop-filter: none; backdrop-filter: none; } :root[data-acrilico="on"][data-acrilico-modo="blocos"] body:not(.entrada) .pagina :is(.card, .kpi, .kpis-mini, .modulo, .ba-c, .ba-grupo, .ba-painel, .ba-topo-busca, .contato, details.sec, .criterio, .equipe-topo, .sst-cartao, .cand-card, .dp-depto)::before { -webkit-backdrop-filter: blur(var(--acr-blur)) saturate(var(--acr-sat)); backdrop-filter: blur(var(--acr-blur)) saturate(var(--acr-sat)); } :root[data-acrilico="on"][data-acrilico-modo="blocos"] body:not(.entrada) .pagina .nb-faixa { position: relative; padding: 10px 14px; border-radius: var(--raio, 10px); background: var(--acr-vidro); border: 1px solid var(--acr-borda); box-shadow: 0 8px 32px var(--acr-sombra), inset 0 1px 0 var(--acr-brilho); } :root[data-acrilico="on"][data-acrilico-modo="blocos"] body:not(.entrada) .pagina .nb-faixa::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; -webkit-backdrop-filter: blur(var(--acr-blur)) saturate(var(--acr-sat)); backdrop-filter: blur(var(--acr-blur)) saturate(var(--acr-sat)); } } }