/* ════════════════════════════════════════════════════════════════════════
VIDRO LÍQUIDO — Cellini / Laboratório Milene Braz (v1.69.0)
Portado do design system "Semelc ERP — Vidro Líquido v3"
(docs/VIDRO-LIQUIDO-GUIA-PORTAVEL.md do projeto SEMELC VENDAS IA).
REGRAS:
- Camada ADITIVA: só reestiliza seletores existentes. Reverter = remover
o desta folha. Nenhum id/classe/função muda.
- Paleta Cellini PRESERVADA: azul-marinho #0d1f3e + dourado #b8865a.
- Blur de verdade só em superfícies grandes (sidebar, topo, modal, dock).
- Nada anima em loop. prefers-reduced-motion mata tudo (fim do arquivo).
- Carregar SEMPRE por último no , com ?v=X.Y.Z (cache-bust).
════════════════════════════════════════════════════════════════════════ */
/* ─── FONTES (variáveis, subset latin — pt-BR completo) ─────────────────── */
@font-face{
font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
src:url("fonts/inter-latin.woff2") format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
src:url("fonts/space-grotesk-latin.woff2") format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
/* ─── TOKENS ────────────────────────────────────────────────────────────── */
:root{
/* superfícies (tema claro) */
--bg:#F3F4F7;
--surface:#FFFFFF; --surface-2:#FAFBFC; --surface-hover:#F1F3F5;
--border:#E5E7EB; --border-strong:#D6DAE0;
/* texto (AA sobre surface) */
--text:#14161B; --text-2:#39404A; --text-3:#586069;
/* ── MARCA CELLINI ─ ouro (CTA) ────────────────────────────────────── */
--brand:#B8865A; /* tom base (marca-ouro) */
--brand-strong:#8A6238; /* mais escuro (marca-ouro-3) */
--brand-soft:#F6EDE2; /* lavado p/ fundos ativos */
--brand-ring:rgba(184,134,90,.34);
--brand-on:#3C2606; /* texto sobre o ouro (foil claro) */
--brand-grad:linear-gradient(135deg,#D4A373 0%,#B8865A 55%,#8A6238 100%);
--brand-glow:0 8px 26px -8px rgba(184,134,90,.50);
/* ── MARCA CELLINI ─ azul-marinho (estrutura) ──────────────────────── */
--navy:#0D1F3E; --navy-2:#16305E; --navy-3:#1F4582;
--navy-soft:#E7ECF5;
--navy-ring:rgba(31,69,130,.30);
--navy-grad:linear-gradient(135deg,#1F4582 0%,#16305E 55%,#0D1F3E 100%);
--navy-glow:0 8px 26px -8px rgba(13,31,62,.45);
--ouro-luz:#F0D6A8;
/* prata metálica (o "fio" assinatura do design) */
--prata:#9AA4B2; --prata-clara:#E6EAF0; --prata-escura:#6E7886;
--fio-metal:linear-gradient(90deg,transparent,rgba(154,164,178,.85),transparent);
/* vidro */
--vidro:rgba(255,255,255,.44); --vidro-2:rgba(255,255,255,.34);
--vidro-borda:rgba(255,255,255,.85); --vidro-ativo:rgba(255,255,255,.82);
--vidro-brilho:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -1px 0 rgba(255,255,255,.16),inset 1px 0 0 rgba(255,255,255,.25);
--desfoque:saturate(160%) blur(14px);
--reflexo:linear-gradient(105deg,transparent,rgba(110,120,134,.18),transparent);
/* status — paleta Cellini (menta/rubi/aviso) nos papéis ok/danger/warn */
--ok-bg:#D5F0E8; --ok-text:#0F6A57; --ok-dot:#14A085;
--warn-bg:#FAECC4; --warn-text:#7A5200; --warn-dot:#D4A017;
--danger-bg:#F7DCD8;--danger-text:#9C2F23;--danger-dot:#C0392B;
--info-bg:#E2ECFB; --info-text:#16305E; --info-dot:#1F4582;
/* o DRE e alguns inlines do app.js usam var(--ok/--erro/--linha) com
fallback — defini-las aqui retematiza sem !important */
--ok:#0F8A72; --erro:#C0392B; --linha:#E5E7EB;
/* sombras / raios / movimento */
--shadow-sm:0 1px 2px rgba(16,24,40,.05),0 1px 1px rgba(16,24,40,.03);
--shadow-md:0 2px 4px rgba(16,24,40,.05),0 14px 32px -10px rgba(16,24,40,.16);
--shadow-lg:0 16px 40px -10px rgba(16,24,40,.22);
--ring:0 0 0 3px var(--brand-ring);
--r:16px; --r-g:24px; --r-sm:12px; --r-pill:999px;
--easing:cubic-bezier(.32,.8,.24,1);
}
/* ─── BASE: a luz que o vidro desfoca ───────────────────────────────────── */
body{
font-family:'Inter','Segoe UI',system-ui,sans-serif;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
font-feature-settings:'cv05' 1,'ss01' 1;
color:var(--text-2);
background:
radial-gradient(46% 56% at 4% 0%, rgba(13,31,62,.08), transparent 70%),
radial-gradient(52% 64% at 98% 30%, rgba(184,134,90,.12), transparent 72%),
radial-gradient(40% 50% at 50% 100%, rgba(13,31,62,.05), transparent 70%),
var(--bg);
}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:999px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--prata);background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}
::selection{background:rgba(184,134,90,.25)}
/* FOCO acessível universal — outline (nada no projeto o sobrescreve;
box-shadow perderia para os shadows dos componentes) */
:focus-visible{outline:3px solid var(--brand-ring);outline-offset:2px}
/* ─── PERFORMANCE: mata animações em loop da camada v0.3 ────────────────── */
.hero::after{animation:none;display:none} /* heroSheen ∞ */
.logo-shine::after{animation:none;display:none} /* logoSweep ∞ */
.menu-item.ativo::after{animation:none!important} /* menuGlint ∞ */
.dentito-pulse{animation:none;box-shadow:none} /* pulseFab ∞ */
/* ─── SIDEBAR: painel flutuante de vidro escuro (navy + luz dourada) ───── */
.sidebar{
margin:12px 14px 12px 12px;
height:calc(100vh - 24px);
border-radius:26px;
position:sticky;top:12px;
background:
linear-gradient(165deg, rgba(255,255,255,.10), transparent 38%),
radial-gradient(120% 80% at 88% -12%, rgba(184,134,90,.22), transparent 58%),
radial-gradient(110% 70% at -8% 112%, rgba(31,69,130,.28), transparent 55%),
rgba(9,20,40,.94);
box-shadow:
inset 0 2px 1px -1px rgba(255,255,255,.30),
inset 0 -3px 3px -2px rgba(0,0,0,.55),
0 12px 24px -12px rgba(8,10,14,.50),
0 30px 60px -24px rgba(8,10,14,.60);
overflow:hidden;
}
/* aro 3D: fio de luz na borda, via máscara (com fallback) */
.sidebar::after{
content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;
pointer-events:none;
background:linear-gradient(155deg,
rgba(255,255,255,.55), rgba(255,255,255,.18) 18%, rgba(255,255,255,.05) 42%,
rgba(212,163,115,.30) 62%, rgba(255,255,255,.03) 78%, rgba(255,255,255,.22));
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite:exclude;
}
@supports not ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
.sidebar::after{display:none}
}
.brand{border-bottom:1px solid rgba(255,255,255,.08);position:relative}
.brand::after{content:'';position:absolute;left:10%;right:10%;bottom:-1px;height:1px;background:var(--fio-metal);opacity:.5;pointer-events:none}
/* itens do menu: pílulas de vidro */
.menu-item{
border-radius:999px;padding:10px 14px;
transition:background .16s var(--easing), color .16s var(--easing);
}
.menu-item:hover{background:rgba(255,255,255,.07);color:#fff}
.menu-item.ativo{
color:#fff;
background:linear-gradient(160deg, rgba(255,255,255,.16), transparent 55%), rgba(255,255,255,.10);
box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.06),
0 8px 18px -10px rgba(0,0,0,.6), 0 0 22px -8px rgba(184,134,90,.45);
}
.menu-item:active{transform:scale(.98)}
.menu-item.ativo::before{
left:-6px;top:50%;bottom:auto;transform:translateY(-50%);
height:18px;width:4px;border-radius:999px;
background:linear-gradient(180deg,var(--ouro-luz),var(--brand));
box-shadow:0 0 10px rgba(184,134,90,.7);
}
.menu-item.menu-rodape{border-radius:999px}
.menu-item.menu-rodape.ativo{border-radius:999px} /* vence o 10px (0,3,0) do app.css */
.conn{box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}
/* viewports baixas: o overflow:hidden do painel não pode cortar itens do menu */
@media (min-width:721px){
.menu{overflow-y:auto;min-height:0;scrollbar-width:thin}
/* FIX recolher sidebar: com .sidebar em display:none o .conteudo era
auto-colocado na coluna 1 (largura 0) e a página inteira espremia.
Fixando-o na coluna 2 (1fr), recolher = conteúdo ocupa a tela toda. */
.conteudo{grid-column:2}
}
/* ─── TOPO: cápsula de vidro flutuante (escopado ao app — as páginas
públicas também têm .topo e são tratadas no fim do arquivo) ────────── */
.app .topo{
margin:12px 14px 0 0;
height:auto;min-height:60px;
flex-wrap:wrap;row-gap:6px;
padding:8px 18px;
border-radius:24px;
border:1px solid var(--vidro-borda);border-bottom:1px solid var(--vidro-borda);
background:linear-gradient(160deg, var(--vidro-2), transparent 42%), var(--vidro);
-webkit-backdrop-filter:var(--desfoque);backdrop-filter:var(--desfoque);
box-shadow:var(--vidro-brilho), var(--shadow-sm);
top:max(10px, env(safe-area-inset-top));
}
.topo-titulo h1{color:var(--navy)}
.btn-menu-toggle{
border-radius:999px;border:1px solid var(--vidro-borda);
background:linear-gradient(160deg, var(--vidro-2), transparent 55%),
color-mix(in srgb, var(--surface) 88%, transparent);
box-shadow:inset 0 1px 0 rgba(255,255,255,.30);
width:40px;height:40px;
}
.btn-menu-toggle:hover{border-color:var(--prata);color:var(--navy);background:var(--surface-hover)}
.usuario{
border:1px solid var(--vidro-borda);
background:linear-gradient(160deg, var(--vidro-2), transparent 55%),
color-mix(in srgb, var(--surface) 88%, transparent);
box-shadow:inset 0 1px 0 rgba(255,255,255,.30);
}
.usuario-avatar{
background:var(--navy-grad);
box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 4px 12px -4px rgba(13,31,62,.5);
}
.btn-logout{
border-radius:999px;border:1px solid var(--vidro-borda);
background:linear-gradient(160deg, var(--vidro-2), transparent 55%),
color-mix(in srgb, var(--surface) 88%, transparent);
box-shadow:inset 0 1px 0 rgba(255,255,255,.30);
transition:transform .15s var(--easing), border-color .15s, color .15s, background .15s;
}
.btn-logout:hover{background:var(--danger-bg);color:var(--danger-text);border-color:color-mix(in srgb, var(--danger-dot) 40%, transparent)}
.btn-logout:active{transform:scale(.95)}
/* ─── BOTÕES ────────────────────────────────────────────────────────────── */
/* primário: pílula ouro foil + glow (cores atuais preservadas) */
.btn-primario{
border-radius:var(--r-pill);
background:var(--brand-grad);
color:var(--brand-on);
box-shadow:var(--brand-glow), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 5px rgba(125,85,39,.35);
transition:transform .15s var(--easing), filter .15s ease, box-shadow .18s var(--easing);
}
.btn-primario:hover{filter:brightness(1.07);transform:translateY(-1px);box-shadow:0 12px 30px -8px rgba(184,134,90,.55), inset 0 1px 0 rgba(255,255,255,.45)}
.btn-primario:active{transform:scale(.97)}
/* secundário: pílula de vidro leve */
.btn-secundario{
border-radius:var(--r-pill);
border:1px solid var(--vidro-borda);
color:var(--text-2);
background:linear-gradient(160deg, var(--vidro-2), transparent 55%),
color-mix(in srgb, var(--surface) 88%, transparent);
box-shadow:inset 0 1px 0 rgba(255,255,255,.30);
transition:transform .15s var(--easing), border-color .15s, color .15s, background .15s;
}
.btn-secundario:hover{border-color:var(--prata);color:var(--text);background:var(--surface-hover)}
.btn-secundario:active{transform:scale(.97)}
/* ─── SUB-ABAS: dock de pílulas ─────────────────────────────────────────── */
.sub-tabs{
border-radius:var(--r-pill);
padding:6px;
border:1px solid var(--vidro-borda);
background:linear-gradient(160deg, var(--vidro-2), transparent 55%),
color-mix(in srgb, var(--surface) 80%, transparent);
box-shadow:inset 0 1px 0 rgba(255,255,255,.35), var(--shadow-sm);
}
.sub-tab{
border-radius:var(--r-pill);
transition:transform .12s var(--easing), background .15s, color .15s;
}
.sub-tab:hover{background:var(--surface-hover);color:var(--text)}
.sub-tab:active{transform:scale(.96)}
.sub-tab.ativa{
background:var(--navy-grad);color:#fff;
box-shadow:var(--navy-glow), inset 0 1px 0 rgba(255,255,255,.22);
}
.sub-tab.ativa svg{color:var(--ouro-luz)}
/* ─── CARDS: superfície + fio metálico no topo ──────────────────────────── */
.status-card,.entry,.usr-card,.cli-card,.roteiro,.placeholder,.cat-grupo,.changelog-skeleton{
border-radius:var(--r);
background:var(--surface);border:1px solid var(--border);
box-shadow:var(--shadow-sm);
position:relative;
}
.status-card::after,.entry::after,.usr-card::after,.cli-card::after,
.roteiro::after,.cat-grupo::after{
content:'';position:absolute;top:0;left:10%;right:10%;height:1px;
background:var(--fio-metal);pointer-events:none;
}
.status-card,.entry{overflow:hidden}
.status-card:hover,.entry:hover,.usr-card:hover,.cli-card:hover{
transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--border-strong);
}
/* acentos de status preservados, mais finos */
.entry{border-left:3px solid var(--brand)}
.status-card{border-left:3px solid var(--border-strong)}
.status-card.up{border-left-color:var(--ok-dot)}
.status-card.down{border-left-color:var(--danger-dot)}
.status-icone{border-radius:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
/* números em fonte display */
.status-info .valor,.entry-versao,.fase-num{
font-family:'Space Grotesk','Inter',sans-serif;letter-spacing:-.4px;
font-variant-numeric:tabular-nums;
}
.fase{border-radius:var(--r-pill)}
.fase.atual{background:color-mix(in srgb, var(--brand-soft) 80%, transparent)}
.fase-tag{box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
/* ─── HERO: cartão escuro premium (navy + luz dourada) ──────────────────── */
.hero{
border-radius:var(--r-g);
border:1px solid rgba(255,255,255,.14);
background:
linear-gradient(165deg, rgba(255,255,255,.10), transparent 38%),
radial-gradient(120% 80% at 88% -12%, rgba(184,134,90,.30), transparent 58%),
radial-gradient(110% 70% at -8% 112%, rgba(31,69,130,.35), transparent 55%),
#0C1B36;
box-shadow:inset 0 1px 0 rgba(255,255,255,.16), var(--shadow-lg);
}
.hero::before{content:'';position:absolute;inset:0 0 auto 0;pointer-events:none;height:45%;background:linear-gradient(180deg,rgba(255,255,255,.12),transparent)}
.hero-tag{
border-radius:999px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.hero-logo{border-radius:18px;box-shadow:0 12px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.4)}
/* ─── SEÇÃO ─────────────────────────────────────────────────────────────── */
.secao-titulo{color:var(--navy)}
.secao-titulo::after{background:var(--fio-metal);opacity:.6}
/* ─── BADGES / PÍLULAS DE STATUS ────────────────────────────────────────── */
.entry-cat,.usr-perfil,.cli-tipo,.fase-tag,.usr-tag-inativo,.wa-badge,.placeholder-tag{
border-radius:var(--r-pill);letter-spacing:.3px;
}
.entry-cat,.cli-tipo.PF,.usr-perfil.auxiliar{text-shadow:0 1px 0 rgba(255,255,255,.35)} /* AA sobre o stop escuro do ouro */
.entry-cat{background:var(--brand-grad);color:var(--brand-on);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.entry-cat.infra{background:var(--navy-grad);color:#fff}
.entry-cat.feature{background:var(--ok-bg);color:var(--ok-text);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.entry-cat.fix{background:var(--warn-bg);color:var(--warn-text);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.usr-perfil.admin_master{background:var(--navy-grad)}
.usr-perfil.auxiliar{background:var(--brand-grad);color:var(--brand-on)}
.usr-perfil.entrega{background:var(--ok-bg);color:var(--ok-text)}
.cli-tipo.PJ{background:var(--navy-grad)}
.cli-tipo.PF{background:var(--brand-grad);color:var(--brand-on)}
/* ─── INPUTS / FILTROS ──────────────────────────────────────────────────── */
.campo-modal input,.campo-modal select,.dentito-form input,
.cli-busca input[type="search"],.cli-busca select,.wa-form input{
background:var(--surface);color:var(--text);
border:1px solid var(--border);border-radius:12px;
transition:border-color .15s, box-shadow .15s, background .15s;
}
.campo-modal input:focus,.campo-modal select:focus,.dentito-form input:focus,
.cli-busca input[type="search"]:focus,.cli-busca select:focus,.wa-form input:focus{
/* ponytail: var(--surface) e não #fff — no tema escuro o branco fixo somia o texto */
outline:none;border-color:var(--brand);box-shadow:var(--ring);background:var(--surface,#fff);
}
/* filtros de toolbar: pílulas de vidro pré-misturado */
.cli-busca input[type="search"],.cli-busca select{
border-radius:var(--r-pill);
border:1px solid var(--vidro-borda);
background:linear-gradient(160deg, var(--vidro-2), transparent 55%),
color-mix(in srgb, var(--surface) 92%, transparent);
box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
padding-left:16px;padding-right:14px;
}
.cli-busca input[type="search"]:hover,.cli-busca select:hover{border-color:var(--prata)}
/* autocomplete de categorias */
.cat-auto-sug{
border-radius:16px;border:1px solid var(--vidro-borda);
background:linear-gradient(160deg,var(--vidro-2),transparent 40%),var(--surface);
box-shadow:var(--vidro-brilho),var(--shadow-lg);
}
.cat-auto-op{border-radius:999px}
.cat-auto-op:hover,.cat-auto-op.ativo{background:var(--brand-soft);color:var(--brand-strong)}
/* ─── MODAIS: vidro de verdade ──────────────────────────────────────────── */
.modal-overlay{
background:rgba(8,10,14,.38);
-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);
}
.modal-painel{
border-radius:var(--r-g);
border:1px solid var(--vidro-borda);
background:linear-gradient(160deg, var(--vidro-2), transparent 40%), var(--surface);
box-shadow:var(--vidro-brilho), var(--shadow-lg);
}
.modal-cab{border-bottom:1px solid var(--border);position:relative}
.modal-cab::after{content:'';position:absolute;left:10%;right:10%;bottom:-1px;height:1px;background:var(--fio-metal);opacity:.6;pointer-events:none}
.modal-cab h3{color:var(--navy)}
.modal-x{border-radius:999px}
.modal-x:hover{background:var(--surface-hover)}
.erro-modal{border-radius:12px}
/* ─── DENTITO: FAB + painel de chat (navy premium + ouro) ───────────────── */
.dentito-fab{
background:
linear-gradient(165deg, rgba(255,255,255,.14), transparent 40%),
var(--navy-grad);
box-shadow:var(--navy-glow), 0 0 22px -6px rgba(184,134,90,.5), inset 0 1px 0 rgba(255,255,255,.25);
transition:transform .15s var(--easing), box-shadow .18s var(--easing);
}
.dentito-fab:hover{transform:scale(1.06)}
.dentito-fab:active{transform:scale(.96)}
.dentito-grip{background:var(--brand-grad);color:var(--brand-on)}
.dentito-painel{
border-radius:var(--r-g);
border:1px solid rgba(255,255,255,.12);
background:
linear-gradient(165deg, rgba(255,255,255,.08), transparent 36%),
radial-gradient(120% 70% at 88% -10%, rgba(184,134,90,.18), transparent 58%),
#0E1C38;
box-shadow:inset 0 1px 0 rgba(255,255,255,.16), var(--shadow-lg);
overflow:hidden;
}
.dentito-cab{background:transparent;border-bottom:1px solid rgba(255,255,255,.10)}
.dentito-mini{background:var(--brand-grad);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.dentito-msgs{background:transparent}
.dentito-msg{border-radius:14px}
.dentito-msg.bot{
background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.6);
border-radius:14px 14px 14px 5px;
}
.dentito-msg.user{
background:var(--navy-grad);color:#fff; /* AA 9,4:1 (ouro escuro reprovava) */
border-radius:14px 14px 5px 14px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.dentito-form{background:rgba(255,255,255,.06);border-top:1px solid rgba(255,255,255,.10)}
.dentito-form input{background:rgba(255,255,255,.92);border-color:transparent}
.dentito-form button{border-radius:999px;background:var(--brand-grad);color:var(--brand-on);box-shadow:var(--brand-glow)}
.dentito-form button:hover{background:var(--brand-grad);filter:brightness(1.07)}
.dentito-fechar{border-radius:999px}
.dentito-fechar:hover{background:rgba(255,255,255,.12)}
/* ─── WHATSAPP ──────────────────────────────────────────────────────────── */
.wa-lista,.wa-chat{
border-radius:var(--r);border:1px solid var(--border);
background:var(--surface);box-shadow:var(--shadow-sm);
position:relative;
}
.wa-chat{overflow:hidden}
.wa-lista{overflow-y:auto;overflow-x:hidden} /* preserva o scroll da lista (app.css) */
.wa-chat::after{
content:'';position:absolute;top:0;left:10%;right:10%;height:1px;
background:var(--fio-metal);pointer-events:none;
}
.wa-item{transition:background .15s var(--easing)}
.wa-item.ativo{background:var(--navy-soft);border-left:3px solid var(--navy)}
.wa-msg{border-radius:14px}
.wa-msg.entrada{border-radius:14px 14px 14px 5px}
.wa-msg.saida{border-radius:14px 14px 5px 14px;background:linear-gradient(135deg,#14A085,#0F8A72)}
.wa-msg.saida.dentito{background:var(--navy-grad)}
.wa-badge{background:var(--ok-bg);color:var(--ok-text)} /* AA: 5,4:1 */
.wa-toggle-btn{border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.wa-toggle-btn.bot{background:var(--navy-grad)}
.wa-toggle-btn.humano{background:var(--brand-grad);color:var(--brand-on)}
.wa-form button{border-radius:999px;background:var(--navy-grad);box-shadow:var(--navy-glow)}
.wa-form input{border-radius:999px}
/* ─── CATÁLOGO / FINANCEIRO (pílulas de ação) ───────────────────────────── */
.fin-acao,.cat-add-item,.lnk-vercpf{
border-radius:var(--r-pill);
transition:transform .12s ease, border-color .15s, background .15s, color .15s;
}
.fin-acao:hover,.cat-add-item:hover{border-color:var(--prata);background:var(--surface-hover);color:var(--navy)}
.fin-acao:active,.cat-add-item:active{transform:scale(.95)}
.num-chip{box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.baixa-resumo,.baixa-item{border-radius:12px}
.cat-grupo-head strong{color:var(--navy)}
.cat-item-row .cat-item-val{font-family:'Space Grotesk','Inter',sans-serif;font-variant-numeric:tabular-nums;color:var(--brand-strong)}
/* ─── ODONTOGRAMA (mantém esmalte dourado, foco mais suave) ─────────────── */
.odo-num{border-radius:6px}
.odo-arc{border-radius:999px}
/* ─── RODAPÉ (escopado: as páginas públicas têm .rodape próprio) ────────── */
.app .rodape{background:transparent;border-top:1px solid var(--border)}
/* ════════════════════════════════════════════════════════════════════════
MOBILE (≤720px) — dock de vidro, folha inferior, alvos ≥44px
════════════════════════════════════════════════════════════════════════ */
@media (max-width:720px){
/* sidebar vira faixa superior: sem flutuação, encosta no topo */
.sidebar{
margin:0;border-radius:0 0 22px 22px;height:auto;position:relative;top:0;
box-shadow:0 12px 24px -16px rgba(8,10,14,.5);
}
.sidebar::after{display:none}
/* menu inferior: DOCK flutuante de vidro escuro */
.menu{
left:10px;right:10px;
bottom:max(10px, env(safe-area-inset-bottom));
border-radius:24px;
padding:8px 8px;
border:1px solid rgba(255,255,255,.14);
background:
linear-gradient(165deg, rgba(255,255,255,.10), transparent 38%),
radial-gradient(120% 80% at 88% -12%, rgba(184,134,90,.18), transparent 58%),
rgba(9,20,40,.90);
-webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 -2px 24px rgba(0,0,0,.18), 0 18px 38px -18px rgba(8,10,14,.7);
}
.app{padding-bottom:calc(84px + env(safe-area-inset-bottom, 0))}
.menu-item{border-radius:16px;min-height:54px}
.menu-item.ativo{
background:linear-gradient(160deg, rgba(255,255,255,.16), transparent 55%), rgba(255,255,255,.10);
box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 0 18px -6px rgba(184,134,90,.5);
}
.menu-item:active{transform:scale(.96)}
/* topo: cápsula menor (a safe-area já entra pelo top:max() do sticky) */
.app .topo{
margin:10px 12px 0;border-radius:20px;
min-height:56px;
padding-left:14px;padding-right:14px;
}
/* modal vira folha colada embaixo, com alça */
.modal{padding:0}
.modal-painel{border-radius:28px 28px 0 0;border-bottom:none;position:relative}
.modal-painel::before{
content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);
width:42px;height:5px;border-radius:99px;background:rgba(16,24,40,.22);z-index:1;
}
.modal-cab{padding-top:20px}
/* anti-zoom iOS: vence inclusive os font-size INLINE de 12-13px do index/app.js
(armadilha A2 — !important cirúrgico, só no mobile) */
.palco input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.palco select,.palco textarea,
.modal-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.modal-form select,.modal-form textarea{font-size:16px!important}
.campo-modal input,.campo-modal select,
.cli-busca input[type="search"],.cli-busca select,
.dentito-form input,.wa-form input{font-size:16px}
/* alvos de toque ≥44px */
.btn-primario,.btn-secundario{min-height:46px}
.sub-tab{min-height:44px}
.modal-x,.btn-logout{width:44px;height:44px}
.fin-acao,.wa-toggle-btn{min-height:40px;padding:8px 14px}
#srv-prev,#srv-next,#audit-prev,#audit-next{min-width:44px;min-height:44px;padding:8px 14px!important}
.menu-item.menu-rodape.ativo{border-radius:16px}
.sub-tabs{border-radius:20px}
/* toast acima do dock flutuante (bottom vem de cssText inline do app.js) */
#app-toast{bottom:calc(94px + env(safe-area-inset-bottom, 0))!important}
/* FAB e painel do Dentito: folga p/ o dock flutuante (app.css usa !important) */
.dentito-fab{bottom:calc(92px + env(safe-area-inset-bottom, 0))!important}
.dentito-painel{bottom:calc(166px + env(safe-area-inset-bottom, 0))!important}
/* barra dinâmica do navegador móvel: dvh com fallback */
.modal-painel{max-height:92vh;max-height:92dvh}
.dentito-painel{height:60vh;height:60dvh}
#mapa-clientes{height:calc(100dvh - 240px)!important}
}
/* ─── TABLET (721–1100px): flutuação mais compacta ──────────────────────── */
@media (min-width:721px) and (max-width:1100px){
.sidebar{margin:10px 12px 10px 10px;height:calc(100vh - 20px);border-radius:22px;top:10px}
.app .topo{margin:10px 12px 0 0;border-radius:20px}
}
/* ════════════════════════════════════════════════════════════════════════
UI GERADA POR JS (toast, kanban, funil) — !important cirúrgico onde o
app.js seta style inline (armadilha A2 do guia)
════════════════════════════════════════════════════════════════════════ */
/* toast #app-toast: itens viram cápsulas (cores ok/erro do JS preservadas) */
#app-toast>div{
border-radius:999px!important;
border:1px solid rgba(255,255,255,.16);
box-shadow:inset 0 1px 0 rgba(255,255,255,.18), var(--shadow-lg)!important;
padding:11px 22px!important;
font-weight:600;letter-spacing:.1px;
}
/* kanban de serviços: cards com raio maior + sombra (cores de status do JS preservadas) */
.kanban-card{
border-radius:12px!important;
border:1px solid var(--border);
box-shadow:var(--shadow-sm);
transition:transform .15s var(--easing), box-shadow .15s var(--easing);
}
.kanban-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
/* colunas do kanban e do funil (div com style inline → só raio via !important) */
#kanban-servicos [style*="border-radius"]{scrollbar-width:thin}
#funil-board>div[data-drop-status]{
border-radius:16px!important;
border:1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
/* cards de lead arrastáveis (usam .status-card inline) já herdam o vidro */
/* select-pílula de status da OS: brilho interno (cor de fundo vem do JS) */
.sel-status-srv{box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
/* Dentito “digitando…” (classe sem CSS em lugar nenhum) */
.dentito-msg.digitando{opacity:.7;font-style:italic}
/* filtro interno de selects criado por JS */
.filtro-select-input{border-radius:999px!important}
/* tabela do DRE rolável no toque (§9) */
#dre-conteudo{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* ════════════════════════════════════════════════════════════════════════
LOGIN (login.html — body ganhou a classe pg-login; carrega esta folha
DEPOIS do