:root{ --bg:#f5f5f7; --surface:#ffffff; --ink:#1d1d1f; --ink2:#6e6e73; --ink3:#a1a1a6; --line:rgba(0,0,0,.08); --line2:rgba(0,0,0,.05); --brand-08:color-mix(in srgb, var(--brand) 8%, transparent); --brand-12:color-mix(in srgb, var(--brand) 12%, transparent); --brand-20:color-mix(in srgb, var(--brand) 22%, transparent); --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --sh-md:0 8px 24px rgba(0,0,0,.07); --sh-lg:0 24px 60px rgba(0,0,0,.12); --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace; --bottombar-h:60px; } *{box-sizing:border-box;margin:0;padding:0} html{touch-action:manipulation}/* sem zoom por duplo-toque */ body.papp-body{font-family:var(--font)!important;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.5;overflow-x:hidden} body.papp-body input,body.papp-body select,body.papp-body textarea,body.papp-body button{font-family:inherit!important} img{display:block;max-width:100%} button{font:inherit;border:0;cursor:pointer;background:none;color:inherit} a{color:inherit;text-decoration:none} input,select,textarea{font:inherit;color:inherit} :focus-visible{box-shadow:0 0 0 3px var(--brand-20);border-radius:8px} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:980px; padding:11px 22px;font-size:15px;font-weight:500;letter-spacing:-.01em;transition:all .15s;white-space:nowrap;text-decoration:none} .btn:active{transform:scale(.97)} .btn-primary{background:var(--brand);color:#fff} .btn-primary:hover{filter:brightness(1.08)} .btn-ghost{background:rgba(0,0,0,.05);color:var(--ink)} .btn-ghost:hover{background:rgba(0,0,0,.085)} .btn-danger{background:rgba(255,59,48,.1);color:#c0392b} .btn-danger:hover{background:rgba(255,59,48,.18)} .btn-sm{padding:8px 16px;font-size:13.5px} .btn:disabled{opacity:.6;cursor:default} /* 🔲 BOTÃO COM ARESTA (v1.4.1988) — o dono olhou uma fileira de `.btn-ghost` e disse que não dava pra saber que havia botão ali. Ele estava certo: `.btn-ghost` é um cinza de 5% SEM borda, e sobre o branco do cartão não sobra aresta nenhuma. Este tem anel interno e a cor da marca — é o mesmo desenho do `.btn-vc`, sem a animação, que ali existe por outro motivo. Some do caminho quando está desligado, em vez de ficar convidando a um clique que erra. */ .btn-out{background:var(--brand-08);color:var(--brand);box-shadow:0 0 0 1px var(--brand-20) inset;font-weight:600} .btn-out:hover{background:var(--brand-12)} .btn-out:disabled{background:transparent;color:var(--ink3);box-shadow:0 0 0 1px var(--line) inset} /* O número da ordem dentro do botão: conta, não grita. Sem isto ele sai com o mesmo peso do rótulo e os dois brigam pela mesma atenção. */ .btn-out>b{font-weight:700;opacity:.55;font-variant-numeric:tabular-nums} /* Botão "Contato" (salvar vCard) — brilha pra ter vida e convidar ao toque */ .btn-vc{position:relative;overflow:hidden;background:var(--brand-08);color:var(--brand);box-shadow:0 0 0 1px var(--brand-20) inset;animation:pilarVcGlow 3s ease-in-out infinite} .btn-vc:hover{background:var(--brand-12)} .btn-vc::after{content:"";position:absolute;top:0;left:-140%;width:55%;height:100%;pointer-events:none;transform:skewX(-18deg);background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);animation:pilarVcShine 3s ease-in-out infinite} @keyframes pilarVcShine{0%,55%{left:-140%}100%{left:160%}} @keyframes pilarVcGlow{0%,100%{box-shadow:0 0 0 1px var(--brand-20) inset,0 0 0 0 rgba(0,0,0,0)}50%{box-shadow:0 0 0 1px var(--brand-20) inset,0 0 13px var(--brand-20)}} @media (prefers-reduced-motion:reduce){.btn-vc,.btn-vc::after{animation:none}} /* 🚪 «Suas portas» — faixa sob o cabeçalho (fora do #pMain). Só a porta da ÁREA ATUAL se mexe (.pporta-on): o brilho que passa é o MESMO do .btn-vc (pilarVcShine) e o halo é um ::before INTERNO animando só a opacidade — nada de box-shadow pulsando nem reflow dos vizinhos. */ /* 🤏 (1.4.2198) MENOR, pedido do dono: «visível, mas ocupando menos espaço». Os botões da faixa ganham escala própria (menos recheio e letra um ponto menor), sem mexer no .btn-sm do resto do painel. */ /* 🚪 (1.4.2800→2801) «Suas portas» = CARTÃO com cabeçalho, idêntico ao mockup aprovado: selo + título + subtítulo + Recolher/Abrir, e os links abaixo. Recolhe guardando a DATA (reabre no dia seguinte). */ .pportas{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 1px 2px rgba(20,12,18,.04),0 10px 24px -16px rgba(20,12,18,.12);margin:14px 16px 0;overflow:hidden} .pportas[hidden]{display:none} .pportas-toggle{width:100%;display:flex;align-items:center;gap:12px;padding:12px 15px;background:transparent;border:0;cursor:pointer;text-align:left;font:inherit;color:inherit} .pportas-toggle:hover{background:var(--bg)} .pportas-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:-2px} .pportas-hic{width:34px;height:34px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;font-size:16px;background:var(--brand-08)} .pportas-htx{flex:1;min-width:0} .pportas-ttl{display:block;font-size:14.5px;font-weight:800;letter-spacing:-.015em;color:var(--ink)} .pportas-sub{display:block;font-size:11.5px;color:var(--ink3)} .pportas-sum{display:none;font-size:12px;color:var(--ink2)} .pportas-sum .pdot{display:inline-block;width:7px;height:7px;border-radius:50%;margin:0 5px 0 1px;vertical-align:middle;background:#1f9d55} .pportas-sum .pdot.off{background:var(--ink3);margin-left:9px} .pportas-hact{display:inline-flex;align-items:center;gap:6px;flex:none;font-size:12px;font-weight:700;color:var(--ink3)} .pportas-chev{font-size:11px;line-height:1;transition:transform .2s ease} .pportas.pportas-col .pportas-chev{transform:rotate(-90deg)} .pportas.pportas-col .pportas-sub{display:none} .pportas.pportas-col .pportas-sum{display:block} .pportas-hlbl::after{content:"Recolher"} .pportas.pportas-col .pportas-hlbl::after{content:"Abrir"} .pportas-pills{display:flex;flex-wrap:wrap;gap:5px;align-items:center;padding:2px 12px 13px} .pportas.pportas-col .pportas-pills{display:none} @media (prefers-reduced-motion:reduce){.pportas-chev{transition:none}} .pportas .btn-sm{padding:5px 11px;font-size:12.5px;gap:5px} .pporta{display:inline-flex;align-items:stretch;gap:2px;flex:0 1 auto;min-width:0} .pportas .pporta-abrir{text-decoration:none;white-space:nowrap;border-radius:980px 0 0 980px;padding-right:9px} .pportas .pporta-copy{border-radius:0 980px 980px 0;padding:5px 9px 5px 7px;font-size:12px;line-height:1} /* Só quando existe o 3º botão (Compartilhar): o Copiar deixa de ser a ponta arredondada e vira o meio. */ .pportas .pporta-copy-mid{border-radius:0;padding:5px 7px;font-size:12px;line-height:1} .pportas .pporta-share{border-radius:0 980px 980px 0;padding:5px 9px 5px 7px;text-decoration:none;font-size:12px;line-height:1} /* 🚪 o interruptor (no ar / fora do ar): a ponta arredondada quando existe; o Compartilhar vira o meio */ .pportas .pporta-share-mid{border-radius:0;padding:5px 7px} .pportas .pporta-sw{border-radius:0 980px 980px 0;padding:5px 9px 5px 7px;display:inline-flex;align-items:center;line-height:1} .pporta-sw-k{display:inline-block;width:24px;height:14px;border-radius:999px;background:#1f9d55;position:relative;transition:background .15s} .pporta-sw-k:after{content:"";position:absolute;top:2px;right:2px;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25)} .pporta-sw:hover .pporta-sw-k{background:#178a49} .pporta-sw:focus-visible{outline:2px solid var(--brand);outline-offset:1px} .pporta-tipo{position:relative} /* 🔴 (v1.4.1824) `.btn{display:inline-flex}` VENCE o [hidden] do navegador (a mesma armadilha de Metas/Panorama): sem esta linha o link vazio e o Copiar sem url apareceriam antes de gerar o link */ .pporta-tipo .pporta-tipo-link[hidden],.pporta-tipo .pporta-copy[hidden]{display:none} .pporta-dd{white-space:nowrap} .pportas .pporta-email-solo{border-radius:980px;padding-right:11px} .pportas .pporta-email .pporta-dd-min{border-radius:0 980px 980px 0;padding:5px 9px 5px 7px} .pportas .pporta-dd-solo{border-radius:980px;padding-right:11px} .pportas .pporta-dd-min{border-radius:0;padding:5px 7px} .pporta-dd-min .pporta-dd-base,.pporta-dd-min .pporta-dd-rot{display:none} .pporta-dd-rot{font-weight:600;opacity:.75} .pporta-dd b{font-weight:700;opacity:.8} .pporta-menu{position:fixed;z-index:60;min-width:224px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.14);padding:6px;display:flex;flex-direction:column;gap:2px} .pporta-menu[hidden]{display:none} .pporta-item{border:0;background:transparent;text-align:left;padding:9px 12px;border-radius:10px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;color:var(--ink);white-space:nowrap} .pporta-item:hover,.pporta-item:focus-visible,.pporta-item[aria-current="true"]{background:var(--brand-08);color:var(--brand)} .pporta-off{border:1px dashed var(--line);background:transparent;color:var(--ink2);white-space:nowrap;flex:0 1 auto;min-width:0} .pporta-off b{color:var(--brand);font-weight:700} .pporta-on{position:relative;overflow:hidden;background:var(--brand-08);color:var(--brand);box-shadow:0 0 0 1px var(--brand-20) inset} .pporta-on:hover{background:var(--brand-12)} .pporta-on::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 14px var(--brand-20);opacity:0;animation:pilarPortaHalo 3s ease-in-out infinite} .pporta-on::after{content:"";position:absolute;top:0;left:-140%;width:55%;height:100%;pointer-events:none;transform:skewX(-18deg);background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);animation:pilarVcShine 3s ease-in-out infinite} @keyframes pilarPortaHalo{0%,100%{opacity:0}50%{opacity:1}} @media (prefers-reduced-motion:reduce){.pporta-on::before,.pporta-on::after{animation:none}} /* 📣 (2026-09-19) ÊNFASE PRA DIVULGAR — cor PRÓPRIA (não var(--brand), que é a cor da marca de cada tenant e significa "você está aqui"): esta é "vale a pena compartilhar", uma coisa fixa que precisa ler igual em qualquer conta, mesmo numa cuja marca já seja laranja/amarela. :not(.pporta-on) cede a vez pro brilho de "seção atual" quando os dois calham de coincidir. */ .pporta-abrir-destaque:not(.pporta-on){background:#fff6e9;color:#8a4b00;box-shadow:0 0 0 1px rgba(138,75,0,.22) inset} .pporta-abrir-destaque:not(.pporta-on):hover{background:#ffefd6} @media (max-width:959px){ .pportas{margin:12px 12px 0} .pportas-toggle{padding:11px 13px} .pportas-pills{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 13px 12px} .pportas-pills::-webkit-scrollbar{display:none} .pporta,.pporta-off{flex:0 0 auto} } /* 🔽 (1.4.2802) A LEGENDA sob as pílulas — explica o recolher e o que o tooltip de cada porta mostra; some junto quando a faixa recolhe (recolhida é uma linha só). */ .pportas-cap{display:block;margin:0 13px;padding:9px 2px 13px;border-top:1px solid var(--line2);font-size:11.5px;line-height:1.6;color:var(--ink3)} .pportas-cap b{color:var(--ink2);font-weight:700} .pportas.pportas-col .pportas-cap{display:none} /* 📣 (1.4.2802) O popup COMPARTILHAR de uma porta (QR + copiar + WhatsApp + abrir + imprimir + Link da Bio). Reusa .pmodal-ov/.pmodal-card do painel; o miolo é próprio. O QR vem do servidor SÓ quando o popup abre. */ .pshare-hd{display:flex;align-items:center;gap:11px;margin-bottom:16px} .pshare-hic{width:34px;height:34px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;font-size:16px;background:var(--brand-08)} .pshare-htx{flex:1;min-width:0} .pshare-htx h3{font-size:16px;font-weight:800;letter-spacing:-.015em;color:var(--ink)} .pshare-htx small{display:block;font-size:11.5px;color:var(--ink3);font-weight:500} .pshare-x{border:0;background:var(--line2);color:var(--ink2);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:19px;line-height:1;flex:none} .pshare-x:hover{background:var(--line);color:var(--ink)} .pshare-qr{width:190px;height:190px;margin:2px auto 14px;border-radius:14px;border:1px solid var(--line);padding:12px;background:#fff;box-sizing:border-box} .pshare-qr svg{width:100%;height:100%;display:block} .pshare-qr.pshare-load{display:flex;align-items:center;justify-content:center;color:var(--ink3);font-size:12px;text-align:center} .pshare-url{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:6px 6px 6px 13px;background:var(--bg);margin-bottom:12px} .pshare-url code{flex:1;min-width:0;font-size:12px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pshare-acts{display:grid;grid-template-columns:1fr 1fr;gap:9px} .pshare-act{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:11px;font-size:12.5px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:9px;color:var(--ink);text-align:left;text-decoration:none} .pshare-act:hover{border-color:var(--brand-20);background:var(--brand-08)} .pshare-act[disabled]{opacity:.6;cursor:default} .pshare-ai{font-size:16px;line-height:1;flex:none} .field{margin-bottom:14px} .field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink2);margin-bottom:6px} .field input,.field select,.field textarea,.pinput{width:100%;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm); padding:10px 12px;font-size:14.5px} .field input:focus,.field select:focus,.pinput:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-12)} /* `.pinput` era ÓRFÃ: usada em 10 lugares do Admin (cofre de prova, boas-vindas, pré-cadastro) e sem uma linha de CSS em lugar nenhum — os campos saíam com a borda crua do navegador no meio de uma tela estilizada. Entra aqui, no mesmo seletor do `.field`, em vez de virar uma regra gêmea que amanhã diverge. O `width:100%` é neutralizado caso a caso pelos `style="width:130px"` já existentes (inline vence). */ .pilar-check{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;color:var(--ink2)} .pilar-check input{margin-top:2px} /* swatches de cor (modal genérico, ex.: Editar empresa → Cor da marca) — mesmo visual do cadastro. */ .swatches{display:flex;gap:10px;flex-wrap:wrap} .swatch{width:32px;height:32px;border-radius:50%;cursor:pointer;position:relative;transition:transform .15s} .swatch:hover{transform:scale(1.12)} .swatch.on::after{content:"";position:absolute;inset:-5px;border:2px solid var(--ink);border-radius:50%} .pm-imgup{display:flex;gap:12px;align-items:center;padding:8px;border:1px dashed var(--line);border-radius:12px;transition:border-color .12s,background .12s} .pm-imgup.pm-imgdrag{border-color:var(--brand);border-style:solid;background:color-mix(in srgb,var(--brand) 8%,transparent)} .pm-imgup-prev{width:58px;height:58px;border-radius:9px;flex:none;background:var(--surface2,#f1efe9);background-size:cover;background-position:center;border:1px solid var(--line)} .pm-imgup-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px} .pm-imgup-row{display:flex;align-items:center;gap:10px} .pm-imgup-hint{font-size:11.5px;color:var(--ink3,#9a9a9a)} /* ---------- layout raiz: mobile-first (base = mobile) ---------- */ .papp{min-height:100vh;display:flex;flex-direction:column} /* ====================== O MENU (barra lateral no computador, folha no celular) ====================== Até aqui todo o CSS do menu vivia dentro de @media(min-width:960px), porque a barra era `display:none` no celular e o menu de lá era outra coisa (a tira de abas do rodapé). Com um menu só, estas regras são a BASE, e o bloco de 960px guarda apenas o que é do computador: a coluna fixa de 330px. */ .psidebar{position:fixed;inset:0;z-index:55;display:flex;flex-direction:column; background:var(--surface,#fff);overflow-y:auto;overscroll-behavior:contain; /* 🔴 `viewport-fit=cover` + `position:fixed;top:0` = a folha começa EMBAIXO do relógio e da ilha do aparelho. Só a barra de baixo tinha área segura; a lateral nunca precisou, porque no celular ela não existia. Agora existe. */ padding:calc(16px + env(safe-area-inset-top)) 14px calc(var(--bottombar-h) + 24px); transform:translateX(-100%);visibility:hidden; /* visibility com DELAY, não com duração: abrindo ela vira visible no mesmo quadro (senão a folha deslizaria invisível por 220ms e o toque pareceria perdido); fechando, só some depois que o deslize termina. Medido no navegador: com `visibility .22s` a folha ainda lia `hidden` logo após o clique. */ transition:transform .22s ease,visibility 0s linear .22s} body.pnav-folha-on .psidebar{transform:none;visibility:visible;transition:transform .22s ease,visibility 0s} body.pnav-folha-on{overflow:hidden} @media(prefers-reduced-motion:reduce){.psidebar{transition:none}} .pnav-fechar{position:absolute;top:calc(12px + env(safe-area-inset-top));right:12px;width:36px;height:36px;border-radius:50%; border:1px solid var(--line);background:var(--surface,#fff);color:var(--ink2);font-size:21px;line-height:1;display:grid;place-items:center;z-index:3} .pbrand{display:flex;align-items:center;gap:11px;padding:4px 44px 0 8px;margin-bottom:16px} .pbinfo{min-width:0} .pbinfo b{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pbinfo span{display:block;font-size:11px;color:var(--ink3);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 🔎 busca do menu + 👁️ atalho de organizar, lado a lado */ .pnav-topo{display:flex;align-items:center;gap:8px;margin:0 0 4px} .pnav-topo .pnav-busca{flex:1;min-width:0;margin:0} .pnav-olho,.pnav-compactar{flex:none;width:42px;height:42px;border:1px solid var(--line);border-radius:11px;color:var(--ink3);display:grid;place-items:center;background:var(--surface,#fff)} .pnav-olho:hover,.pnav-compactar:hover{color:var(--ink2);background:rgba(0,0,0,.04)} .pnav-olho[aria-pressed="true"],.pnav-compactar[aria-pressed="true"]{color:var(--brand);border-color:var(--brand);background:var(--brand-12)} /* 🔡 (1.4.2616) o botão mostra a AÇÃO: compacto (padrão, não-.on) → ícone de CRESCER; ampliado (.on) → ícone de ENCOLHER. `.on` = o estado não-padrão (ampliado). */ .pnav-compactar .pc-encolher{display:none} .pnav-compactar.on .pc-crescer{display:none} .pnav-compactar.on .pc-encolher{display:block} .pnav-olho[aria-pressed="true"] .pnav-olho-risco{display:none} .pnav-busca{display:flex;align-items:center;gap:8px;margin:0 0 4px;padding:0 10px;border:1px solid var(--line);border-radius:11px;background:var(--surface,#fff);min-height:42px} .pnav-busca > svg{flex:none;color:var(--ink3)} .pnav-busca input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);padding:10px 0; font-size:16px} /* 16px: abaixo disso o iOS dá zoom ao focar e a tela salta */ .pnav-busca input:focus{outline:none} .pnav-busca input::-webkit-search-cancel-button{display:none;-webkit-appearance:none} .pnav-busca-x{display:none;flex:none;width:26px;height:26px;border-radius:50%;color:var(--ink3);font-size:18px;line-height:1} body.pnav-buscando .pnav-busca-x{display:grid;place-items:center} .pnav-vazio{margin:10px;font-size:12.5px;color:var(--ink3)} /* 🗂️ (1.4.2610) CABEÇALHO DE GRUPO — uma LINHA flex com o toggle (abre/fecha) e o cadeado (trava) lado a lado, cada um com o seu alvo de clique. No celular é alvo de toque, por isso ícone, altura e contador. O espaço ENTRE categorias é o `margin-top` da linha. */ .pnav-label{font-size:10.5px;font-weight:800;letter-spacing:.08em;color:var(--ink2);text-transform:uppercase;padding:0 10px;margin:14px 0 7px} .pnav-ghead-row{display:flex;align-items:stretch;gap:4px;margin-top:8px} .pnav-grupo:first-child .pnav-ghead-row{margin-top:2px} .pnav-ghead{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:9px;min-height:44px;border-radius:11px;background:none;transition:background .12s ease} .pnav-ghead:hover{background:rgba(0,0,0,.06)} .pnav-ghead .pnav-label{flex:1;min-width:0;margin:0;padding:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pnav-gico{flex:none;color:var(--ink2);margin-left:11px} .pnav-gqt{display:none;min-width:22px;height:21px;padding:0 7px;border-radius:11px;background:rgba(0,0,0,.09);color:var(--ink2);font-size:11px;font-weight:800;line-height:21px;text-align:center;flex:none} .pnav-chev{flex:none;color:var(--ink3,#9aa1ab);margin-right:11px;transition:transform .15s ease} @media(prefers-reduced-motion:reduce){.pnav-chev{transition:none}} /* 🔒 (1.4.2610) o botão de LOCK — IRMÃO do toggle (não mais absoluto por cima dele, que fazia o clique também abrir/fechar e o cadeado boiar fora de lugar). Só aparece em grupo ABERTO (fecha-se pelo acordeão, depois trava-se aberto). Esmaecido (o toque alcança), forte no hover, e cheio na cor da marca quando travado — aí o cadeado fica «fechado» de verdade. */ .pnav-glock{flex:none;display:none;width:40px;border-radius:11px;align-items:center;justify-content:center; color:var(--ink3,#9aa1ab);opacity:.5;background:none;transition:opacity .12s ease,color .12s ease,background .12s ease} #pNavGrupos .pnav-grupo[data-estado="aberto"] > .pnav-ghead-row > .pnav-glock{display:flex} .pnav-glock:hover{background:rgba(0,0,0,.06);color:var(--ink,#1d1d1f);opacity:1} .pnav-glock:focus-visible{opacity:1;outline:2px solid var(--brand);outline-offset:-2px} .pnav-grupo:hover > .pnav-ghead-row > .pnav-glock{opacity:.8} .pnav-glock.on{display:flex;opacity:1;color:var(--brand);background:var(--brand-12)} @media(prefers-reduced-motion:reduce){.pnav-glock{transition:none}} .pnav{display:flex;flex-direction:column;gap:2px} .pnav-linha{position:relative;display:block} /* 🚫 (1.4.2616) o item do menu é um : o navegador deixa ARRASTAR o link pra fora (o dono clicava e saía um link). `user-drag:none` barra isso no WebKit; o `dragstart` no JS cobre o resto. Continua clique normal — só não arrasta. */ .pnav-item{display:flex;flex-wrap:wrap;align-items:center;gap:5px 11px;padding:11px 10px;border-radius:10px;font-size:14.5px;font-weight:500;color:var(--ink2);width:100%;text-align:left;-webkit-user-drag:none;user-select:none} .pnav-item svg{flex:none;opacity:.75} .pnav-item:hover{background:rgba(0,0,0,.045);color:var(--ink)} .pnav-item.on{background:var(--brand-12);color:var(--brand);font-weight:600} .pnav-item.on svg{opacity:1} /* Módulo TRANCADO pelo plano: visível mas apagado, com cadeado — clicar abre o upgrade. */ .pnav-item.locked{opacity:.5} .pnav-item.locked:hover{background:rgba(0,0,0,.03)} .pnav-lock{font-size:11px;opacity:.8;flex:none} .pnav-txt{flex:1 1 auto;min-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pnav-item .pbadges{flex:none} .pnav-badges-wrap{display:flex;align-items:center;gap:6px;flex:none;margin-left:auto} .pnav-cnt{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:#e5484d;color:#fff;font-size:10.5px;font-weight:800;line-height:1;flex:none} .pnav-cnt-hoje{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:#0284c7;color:#fff;font-size:10.5px;font-weight:800;line-height:1;flex:none} .pnav-cnt-sucesso{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:#16a34a;color:#fff;font-size:10.5px;font-weight:800;line-height:1;flex:none} /* ---------- os DOIS estados de um grupo (1.4.2608: `auto` aposentado) ---------- Agora é só ABERTO ou FECHADO, igual no celular e no computador: Início e os travados abrem, o resto nasce fechado, e o acordeão (JS) alterna. Dentro de um grupo fechado, os itens `data-pin` NUNCA somem (📌 só Configurações desde a 1.4.2551: é a porta de entrada; esconder atrás de um recolher é esconder a saída de incêndio). */ #pNavGrupos .pnav-grupo[data-estado="fechado"] .pnav-chev{transform:rotate(-90deg)} #pNavGrupos .pnav-grupo[data-estado="fechado"] .pnav-gqt{display:block} /* 🗂️ (1.4.2551) GRUPO FECHADO fica VISUALMENTE fechado — um «chip» com fundo + contador + seta, pra não passar por aberto (o dono: «às vezes não dá pra perceber que está fechado»). */ #pNavGrupos .pnav-grupo[data-estado="fechado"] > .pnav-ghead-row > .pnav-ghead{background:rgba(0,0,0,.05)} #pNavGrupos .pnav-grupo[data-estado="fechado"] > .pnav-ghead-row > .pnav-ghead .pnav-gqt{background:var(--brand);color:#fff;opacity:.92} #pNavGrupos .pnav-grupo[data-estado="fechado"] > .pnav > .pnav-linha:not([data-pin="1"]){display:none} /* 🗂️ (1.4.2612) GRUPO ABERTO também fica com um fundo (sutil, mais fraco que o chip do fechado), pra o cabeçalho da categoria se separar dos itens dela — pedido do dono. */ #pNavGrupos .pnav-grupo[data-estado="aberto"] > .pnav-ghead-row > .pnav-ghead{background:rgba(0,0,0,.035)} #pNavGrupos .pnav-grupo[data-estado="aberto"] > .pnav-ghead-row > .pnav-ghead:hover{background:rgba(0,0,0,.06)} /* 📌 (1.4.2612) o pin (Configurações) ganha um respiro do grupo acima quando ele está FECHADO — senão cola no chip do «Avançado». Com o grupo aberto, é só o último item e não precisa. */ #pNavGrupos .pnav-grupo[data-estado="fechado"] > .pnav > .pnav-linha[data-pin="1"]{margin-top:7px} /* 🔡 (1.4.2614) MODO COMPACTO — letra e altura menores, pra caber mais no olho (pedido do dono: «letras menores, como da categoria, para ficar mais reduzido»). A classe mora no