/* ============================================================================
VIDRO ESCURO + CONTORNO DOURADO — ERP e CRM (06/10/2026)
Clínica Dr. Reges Jr.
----------------------------------------------------------------------------
Pedido do dono, 06/10/2026 ("ATUALIZAÇÃO GLOBAL DE DESIGN (ERP E CRM)"):
1. contorno fino em todo contêiner, modal, cartão, campo, painel e balão
que ainda não tem, mesclando Dourado #FFD700 e Caramelo #D4A373;
2. vidro líquido menos "leitoso": película preta translúcida
(rgba(0, 0, 0, 0.5)) sob o mesmo backdrop-filter, refração mantida;
3. em todas as abas do ERP e do CRM, menu lateral, cabeçalhos e login.
ONDE ENTRA. Logo DEPOIS de liquid-glass-{erp,crm}.css e menu-lateral.css,
e ANTES das folhas de módulo (financeiro, rh, insumos, agenda, chat...).
A ordem é o mecanismo: com a mesma especificidade, este arquivo vence o
tema-base e PERDE para os módulos — que já nasceram preto/dourado e têm
desenho próprio (balões do financeiro, agenda, RH, importação, perfis).
Nas poucas regras de componente que carregam depois (chat.css,
reges-datepicker.css) o seletor ganha um `html` na frente: um ponto de
especificidade, sem !important. No ponto.html entra logo depois de
liquid-glass-erp.css, pelo mesmo motivo.
NENHUMA FOLHA EXISTENTE FOI EDITADA. Tirar o devolve o visual
anterior byte a byte.
O QUE NÃO MUDA, DE PROPÓSITO
- backdrop-filter: nenhum elemento ganha vidro que não tinha. Vidro em
elemento repetido (botão em linha de tabela, célula de grade) foi a causa
do engasgo da Lista de Pacientes em 25/09 (liquid-glass-erp.css, seção
11). Aqui só a PELÍCULA atrás do desfoque escurece e o brilho cai.
- Cantos: continuam retos com arredondamento leve (8/10/12 px). O dono
pediu em 02/10 formas "menos orgânicas e mais quadradas"; o "contorno
fluido" do pedido de hoje é a luz correndo na borda, não a silhueta.
- Cores de ESTADO: selos verde/vermelho/âmbar (.badge), aviso de sucesso e
de erro (.toast.ok/.erro), campo inválido e o ponto de presença do chat
continuam na cor do estado. Ali a cor é informação; dourada, toda
situação pareceria igual. Botões de AÇÃO (excluir em vermelho, confirmar
em verde) mantêm o preenchimento e ganham o aro dourado como os demais.
- Linhas e células de tabela e da grade da agenda: não viram caixas. As
linhas divisórias ficam caramelo (token --linha), e a moldura dourada é
a do painel que contém a tabela.
- Impressão: tudo aqui vale só para tela (@media screen). O papel segue
branco com borda cinza (liquid-glass-*.css, @media print).
A MESCLA DAS DUAS CORES. Contorno de 1px com o alto e a esquerda em
Dourado e a base e a direita em Caramelo: a luz do tema entra pelo alto à
esquerda (--lg-luz-x/y, o reflexo especular), então o ouro fica onde a luz
bate e o caramelo onde ela some. No canto arredondado o navegador funde as
duas cores na diagonal. É `border-color` puro: funciona em qualquer peça,
não ocupa ::before/::after (que já são o reflexo especular de .card e
.painel) e não exige position: relative em ninguém.
========================================================================== */
@media screen {
/* ==========================================================================
1. TOKENS
--------------------------------------------------------------------------
A maior alavanca, como em liquid-glass-erp.css: --lg-rim é a borda de
modal, painel, cartão, barra, chat, calendário; --linha é a linha
divisória de style.css, do tema e de style="" gerados pelo app.js.
Redefinir o VALOR alcança tudo isso sem tocar em seletor nenhum.
========================================================================== */
:root {
--vd-ouro: #FFD700;
--vd-caramelo: #D4A373;
--vd-liga: linear-gradient(135deg, #FFD700 0%, #D4A373 100%);
/* contorno padrão: ouro a 50% (o valor do pedido) e caramelo a 55% */
--vd-ouro-borda: rgba(255, 215, 0, 0.50);
--vd-caramelo-borda: rgba(212, 163, 115, 0.55);
--vd-contorno: var(--vd-ouro-borda) var(--vd-caramelo-borda)
var(--vd-caramelo-borda) var(--vd-ouro-borda);
/* campos e botões discretos em repouso: a mesma mescla, mais baixa */
--vd-contorno-campo: rgba(255, 215, 0, 0.36) rgba(212, 163, 115, 0.46)
rgba(212, 163, 115, 0.46) rgba(255, 215, 0, 0.36);
/* passar o mouse / foco */
--vd-contorno-forte: rgba(255, 215, 0, 0.82) rgba(212, 163, 115, 0.85)
rgba(212, 163, 115, 0.85) rgba(255, 215, 0, 0.82);
/* linhas internas: cabeçalho de painel, abas, rodapé da barra, tabela */
--vd-separador: rgba(212, 163, 115, 0.26);
/* a película do vidro: o "bg-black/50" do pedido */
--vd-pelicula: rgba(0, 0, 0, 0.50);
--vd-pelicula-densa: rgba(0, 0, 0, 0.62);
/* luz quente e fraca no lugar do branco leitoso */
--vd-luz: rgba(255, 236, 170, 0.14);
/* --- retinta do núcleo (liquid-glass.css) ------------------------------ */
--lg-rim: var(--vd-ouro-borda);
--lg-rim-forte: rgba(255, 215, 0, 0.82);
--lg-rim-fria: rgba(212, 163, 115, 0.70);
--lg-rim-quente: var(--vd-caramelo-borda);
/* Corpo do vidro: o branco de 13–16% no alto do gradiente era o "leite".
Agora a luz é quente e baixa (6–7%) e o fim do gradiente escurece. */
--lg-vidro-fino:
linear-gradient(145deg, rgba(255, 236, 170, 0.06), rgba(255, 255, 255, 0.01) 42%,
rgba(0, 0, 0, 0.10) 78%, rgba(0, 0, 0, 0.18));
--lg-vidro-medio:
linear-gradient(150deg, rgba(255, 236, 170, 0.07), rgba(255, 255, 255, 0.012) 38%,
rgba(0, 0, 0, 0.06) 62%, rgba(0, 0, 0, 0.16) 82%,
rgba(0, 0, 0, 0.22));
--lg-vidro-denso:
linear-gradient(155deg, rgba(6, 6, 6, 0.86), rgba(4, 4, 4, 0.90) 45%,
rgba(2, 2, 2, 0.92)),
linear-gradient(150deg, rgba(255, 236, 170, 0.05), rgba(255, 255, 255, 0) 50%,
rgba(0, 0, 0, 0.12));
/* Refração: o desfoque e a saturação (o que faz vidro ser vidro, e não véu)
ficam iguais; só o brightness passa de >1 (clareava o que está atrás)
para <1 (escurece levemente). */
--lg-refracao-leve: blur(14px) saturate(165%) brightness(0.90);
--lg-refracao: blur(26px) saturate(185%) brightness(0.86);
--lg-refracao-densa: blur(40px) saturate(200%) brightness(0.82);
/* Brilho interno: o filete branco a 38% no topo virava uma linha leitosa
em toda peça; fica um filete quente a 16%. */
--lg-interno:
inset 0 1px 0 rgba(255, 236, 170, 0.16),
inset 0 -1px 0 rgba(0, 0, 0, 0.35),
inset 0 -24px 48px -30px rgba(0, 0, 0, 0.60);
/* Sombras: sai o halo cinza (0 0 60px rgba(138,138,138,.35)), que clareava
a volta de cada cartão; fica só sombra preta. */
--lg-sombra-1:
0 1px 2px rgba(0, 0, 0, 0.40),
0 8px 24px -8px rgba(0, 0, 0, 0.60);
--lg-sombra-2:
0 2px 6px rgba(0, 0, 0, 0.45),
0 18px 48px -14px rgba(0, 0, 0, 0.72);
--lg-sombra-3:
0 4px 10px rgba(0, 0, 0, 0.50),
0 34px 90px -22px rgba(0, 0, 0, 0.82);
/* --- tokens antigos de style.css, já retintos pelo tema ---------------- */
--linha: var(--vd-separador);
--branco: var(--vd-pelicula);
--azul-claro: rgba(255, 215, 0, 0.10);
}
/* ==========================================================================
2. AMBIENTE — a cáustica atrás do vidro
--------------------------------------------------------------------------
É o que o backdrop-filter "colhe". Era prata/cinza a 18–32%: todo vidro
por cima ficava acinzentado. Agora são massas escuras com um toque de
caramelo e ouro a 6–12% — continua havendo variação para refratar, só que
escura. A animação continua desligada no ERP (liquid-glass-erp.css, 12).
========================================================================== */
.lg-ambiente::before {
background:
radial-gradient(38% 42% at 16% 20%, rgba(212, 163, 115, 0.12), transparent 62%),
radial-gradient(40% 36% at 84% 26%, rgba(40, 36, 28, 0.32), transparent 64%),
radial-gradient(48% 44% at 52% 86%, rgba(70, 60, 40, 0.22), transparent 66%),
radial-gradient(30% 30% at 78% 68%, rgba(255, 215, 0, 0.06), transparent 60%);
}
/* ==========================================================================
3. SUPERFÍCIES DE VIDRO — película preta + contorno mesclado
========================================================================== */
.landing-top,
.topbar,
.card,
.painel,
.toast {
background-color: var(--vd-pelicula);
border-color: var(--vd-contorno);
}
.modal { border-color: var(--vd-contorno); }
/* Reflexo especular de cartões e painéis: o mesmo desenho (faixa na aresta
superior-esquerda + luz que segue o cursor), em luz quente e fraca. Era
branco a 46% em modo overlay — o principal "leite" sobre o vidro. */
.card::before,
.painel::before {
background:
linear-gradient(142deg,
rgba(255, 236, 170, 0.16) 0%,
rgba(255, 236, 170, 0.05) 12%,
rgba(255, 255, 255, 0) 32%),
radial-gradient(70% 44% at var(--lg-luz-x) var(--lg-luz-y),
rgba(255, 236, 170, 0.08), transparent 60%);
}
.modal-close:hover {
color: var(--vd-ouro);
background: rgba(255, 215, 0, 0.10);
}
/* Anel de foco do teclado: o do núcleo (liquid-glass.css, .lg-ambiente
:focus-visible, 0,2,0) é prata. Mesmo seletor, carregado depois: vira
ouro. Módulos com foco próprio de especificidade maior continuam
mandando no deles. */
.lg-ambiente :focus-visible {
box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.30), 0 0 22px -4px rgba(255, 215, 0, 0.45);
}
/* Chip do brasão no login (ERP, CRM, ponto): gota de vidro escuro. */
.login-head .brand-crest {
background: radial-gradient(circle at 34% 26%, rgba(255, 215, 0, 0.12),
rgba(6, 6, 6, 0.85) 60%);
border-color: var(--vd-contorno);
box-shadow:
inset 0 2px 5px rgba(255, 236, 170, 0.14),
0 8px 22px -8px rgba(0, 0, 0, 0.75);
}
/* ==========================================================================
4. MENU LATERAL — por cima de menu-lateral.css
--------------------------------------------------------------------------
Mesmo seletor-raiz daquele arquivo (`.app > .sidebar`, 0,2,0) e carregado
depois dele: vence por ordem. Os estados `.ml-recolhido` e `.ml-sobreposto`
(0,3,0) seguem mandando no que eles mudam — a largura e a película a 90%
da barra aberta por cima no celular. NÃO mexemos em `transition`, em
`display` dos itens (o app.js esconde item por permissão) nem no
`background` do item ativo (é ele que desenha o contorno em liga).
========================================================================== */
.app > .sidebar {
background-color: rgba(0, 0, 0, 0.62);
border-color: var(--vd-contorno);
}
.app > .sidebar .sidebar-foot { border-top-color: var(--vd-separador); }
.app > .sidebar .ml-alternar { border-color: var(--vd-contorno-campo); }
.app > .sidebar .ml-alternar:hover { border-color: var(--vd-contorno-forte); }
/* Avatar: era um quadrado prata (o elemento mais claro da barra). */
.avatar {
background: radial-gradient(circle at 34% 28%, rgba(255, 215, 0, 0.24),
rgba(20, 16, 8, 0.92) 62%);
color: var(--vd-ouro);
border: 1px solid;
border-color: var(--vd-contorno);
box-shadow:
inset 0 1px 0 rgba(255, 236, 170, 0.22),
0 6px 16px -6px rgba(0, 0, 0, 0.70);
}
/* ==========================================================================
5. BOTÕES
========================================================================== */
.btn-outline,
.btn-ghost {
background-color: rgba(0, 0, 0, 0.35);
border-color: var(--vd-contorno-campo);
box-shadow: inset 0 1px 0 rgba(255, 236, 170, 0.12);
}
.btn-outline:hover,
.btn-ghost:hover {
background-color: rgba(255, 215, 0, 0.08);
border-color: var(--vd-contorno-forte);
}
/* Dentro de tabela, sem vidro (liquid-glass-erp.css, 11): só a tinta muda. */
table .btn-ghost,
table .btn-outline { background-color: rgba(0, 0, 0, 0.30); }
.btn-primary,
.btn-danger,
.btn-success { border-color: var(--vd-contorno-forte); }
/* BOTÃO PRINCIPAL NO ESCURO (16/10/2026) — decisão do dono: a liga dourada,
como os botões dos módulos e o tema claro. O prateado (#f0f0f0 → #8a8a8a,
liquid-glass-*.css) era a peça mais clara da tela. Texto grafite sobre
ouro → caramelo: ≥ 8:1.
`:where(html:not(.tema-claro))` NÃO soma especificidade — segue (0,1,0) e
(0,2,0) no :hover, como a regra do tema-base, e os botões dos módulos
(financeiro, perfis, relatórios…), que carregam depois, continuam vencendo
no empate. E deixa o TEMA CLARO de fora: lá o botão já é a liga pelo ajuste
do pacote tema-claro-escuro (scripts/ajustes-tema-claro.mjs), e a
contraparte gerada desta regra nunca casa — o claro não muda. */
:where(html:not(.tema-claro)) .btn-primary {
color: #141414;
background: linear-gradient(150deg, #FFE36B 0%, #FFD700 38%, #D4A373 100%);
border-color: rgba(255, 215, 0, 0.9) rgba(212, 163, 115, 0.9)
rgba(212, 163, 115, 0.9) rgba(255, 215, 0, 0.9);
box-shadow:
inset 0 1px 0 rgba(255, 248, 214, 0.6),
0 10px 26px -12px rgba(255, 215, 0, 0.5);
}
:where(html:not(.tema-claro)) .btn-primary:hover {
background: linear-gradient(150deg, #FFEC94 0%, #FFDE33 38%, #DDB48A 100%);
box-shadow:
inset 0 1px 0 rgba(255, 248, 214, 0.7),
0 14px 32px -12px rgba(255, 215, 0, 0.6);
}
/* ==========================================================================
6. CAMPOS
========================================================================== */
form input,
form select,
form textarea,
.barra-filtros input,
.barra-filtros select {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(255, 236, 170, 0.025));
background-color: var(--vd-pelicula);
border-color: var(--vd-contorno-campo);
box-shadow:
inset 0 2px 8px rgba(0, 0, 0, 0.60),
inset 0 -1px 0 rgba(255, 236, 170, 0.08);
}
/* Hover só em campo editável, e no peso da regra-base acima (0,0,2 / 0,1,1):
o `:where()` não soma especificidade, então hover próprio de módulo
(.ag-overlay select, .pg-modal-campo input, .fin-modulo textarea...) segue
valendo, e campo desabilitado ou só-leitura não "acende" como editável. */
form input:where(:hover:not(:disabled, [readonly])),
form select:where(:hover:not(:disabled)),
form textarea:where(:hover:not(:disabled, [readonly])),
.barra-filtros input:where(:hover:not(:disabled, [readonly])),
.barra-filtros select:where(:hover:not(:disabled)) { border-color: var(--vd-contorno); }
form input:focus,
form select:focus,
form textarea:focus,
.barra-filtros input:focus,
.barra-filtros select:focus {
border-color: var(--vd-contorno-forte);
box-shadow:
inset 0 2px 8px rgba(0, 0, 0, 0.50),
0 0 0 3px rgba(255, 215, 0, 0.16),
0 0 22px -6px rgba(255, 215, 0, 0.40);
}
/* Campo solto (fora de