/* ========================================================================= nav.css — menu lateral compartilhado por todas as ferramentas + home. Injetado por nav.js. Usa as variáveis de tema definidas no styles.css de cada página (com fallback), então funciona em dark e light. ========================================================================= */ :root{ --nav-w: 240px; --nav-w-mini: 68px; } /* ========================================================================= cortina de carregamento — cobre a página desde o primeiro paint até o nav.js confirmar que o usuário pode ver esta rota (adiciona .nav-ready no ). Se a rota não for liberada, o nav.js redireciona SEM tirar a cortina, então não há o "flash" do conteúdo antes do redirect. É CSS puro (nav.css é render-blocking no ), não depende de JS rodar. ========================================================================= */ html:not(.nav-ready)::before{ content:""; position:fixed; inset:0; z-index:2147483000; background:var(--bg,#0A0A0A); animation:navCurtainFailsafe 1ms linear 10s forwards; /* trava: revela em 10s se o nav.js nunca rodar */ } html:not(.nav-ready)::after{ content:""; position:fixed; left:50%; top:50%; width:34px; height:34px; margin:-17px 0 0 -17px; z-index:2147483001; border:3px solid var(--border,#2A2A26); border-top-color:var(--accent,#D83831); border-radius:50%; animation:navSpin .7s linear infinite, navSpinnerIn 1ms linear .28s both, /* só aparece se demorar > 280ms */ navCurtainFailsafe 1ms linear 10s forwards; } @keyframes navSpin{ to{ transform:rotate(360deg); } } @keyframes navSpinnerIn{ from{ opacity:0; } to{ opacity:1; } } @keyframes navCurtainFailsafe{ to{ opacity:0; visibility:hidden; } } @media (prefers-reduced-motion:reduce){ html:not(.nav-ready)::after{ animation:navSpinnerIn 1ms linear .28s both, navCurtainFailsafe 1ms linear 10s forwards; } } /* barras de rolagem no tema (vale pra todas as ferramentas) */ *{ scrollbar-width:thin; scrollbar-color:var(--border-soft,#1E1E1B) transparent; } *::-webkit-scrollbar{ width:9px; height:9px; } *::-webkit-scrollbar-track{ background:transparent; } *::-webkit-scrollbar-thumb{ background:var(--border,#2A2A26); border-radius:8px; background-clip:padding-box; border:2px solid transparent; } *::-webkit-scrollbar-thumb:hover{ background:var(--text-faint,#5C584F); background-clip:padding-box; border:2px solid transparent; } *::-webkit-scrollbar-corner{ background:transparent; } .side-nav{ position:fixed; top:0; left:0; bottom:0; width:var(--nav-w); background:var(--surface,#151513); border-right:1px solid var(--border,#2A2A26); display:flex; flex-direction:column; z-index:100; transition:transform .25s cubic-bezier(.16,1,.3,1), width .24s cubic-bezier(.16,1,.3,1); } .side-nav a, .side-nav button{ font-family:inherit; color:inherit; text-decoration:none; } .nav-head{ display:flex; align-items:center; gap:6px; padding:13px 12px; border-bottom:1px solid var(--border-soft,#1E1E1B); } .nav-brand{ display:flex; align-items:center; gap:11px; flex:1; min-width:0; padding:4px 5px; border-radius:9px; transition:background .15s ease; overflow:hidden; } .nav-brand:hover{ background:var(--surface-hover,#1D1D1A); } .nav-brand .nav-mark{ width:34px; height:34px; border-radius:9px; background:var(--accent,#D83831); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; } .nav-brand .nav-mark svg{ width:17px; height:17px; } .nav-brand .nav-brand-txt{ min-width:0; white-space:nowrap; transition:opacity .12s ease; } .nav-brand .nav-brand-txt b{ display:block; font-size:13.5px; font-weight:700; color:var(--text,#F3F2ED); line-height:1.25; } .nav-brand .nav-brand-txt small{ font-size:10.5px; color:var(--text-dim,#948F84); } .nav-mini-btn{ flex-shrink:0; width:28px; height:28px; border:1px solid var(--border-soft,#1E1E1B); background:var(--bg-elevated,#111110); color:var(--text-faint,#5C584F); border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:color .15s ease, border-color .15s ease, transform .24s cubic-bezier(.16,1,.3,1); } .nav-mini-btn svg{ width:14px; height:14px; } .nav-mini-btn:hover{ color:var(--text,#F3F2ED); border-color:var(--border,#2A2A26); } .nav-list{ flex:1; overflow-y:auto; padding:10px; display:flex; flex-direction:column; gap:2px; } .nav-item{ position:relative; display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:9px; font-size:12.5px; font-weight:500; color:var(--text-dim,#948F84); transition:background .18s ease, color .18s ease, padding-left .18s ease; } .nav-item svg{ width:16px; height:16px; flex-shrink:0; transition:transform .18s ease; } .nav-item:hover{ background:var(--surface-hover,#1D1D1A); color:var(--text,#F3F2ED); padding-left:14px; } .nav-item:hover svg{ transform:translateX(1px); } .nav-item.active{ background:var(--accent-soft,rgba(216,56,49,.16)); color:var(--accent-text,#FF6156); font-weight:600; } .nav-item.active::before{ content:""; position:absolute; left:3px; top:50%; width:3px; height:16px; border-radius:2px; background:var(--accent,#D83831); transform:translateY(-50%); animation:navPop .22s ease; } @keyframes navPop{ from{ transform:translateY(-50%) scaleY(0); } to{ transform:translateY(-50%) scaleY(1); } } /* árvore recolhível (Painel de Campanhas -> clientes) */ .nav-branch-row{ display:flex; align-items:center; } .nav-branch-row .nav-item{ flex:1; } .nav-caret{ flex-shrink:0; width:24px; height:24px; margin-left:2px; border:none; background:none; color:var(--text-faint,#5C584F); border-radius:6px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s ease, color .15s ease; } .nav-caret svg{ width:14px; height:14px; transition:transform .22s cubic-bezier(.16,1,.3,1); } .nav-caret:hover{ background:var(--surface-hover,#1D1D1A); color:var(--text,#F3F2ED); } .nav-branch.aberto .nav-caret svg{ transform:rotate(90deg); } .nav-tree{ max-height:0; opacity:0; overflow:hidden; margin-left:23px; border-left:2px solid transparent; transition:max-height .26s cubic-bezier(.16,1,.3,1), opacity .2s ease, border-color .26s ease; } .nav-branch.aberto .nav-tree{ max-height:70vh; opacity:1; overflow-y:auto; border-left-color:var(--border,#2A2A26); } .nav-tree-item{ display:block; padding:7px 10px; margin:2px 4px; border-radius:7px; font-size:12px; font-weight:500; color:var(--text-dim,#948F84); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:background .15s ease, color .15s ease, transform .15s ease; } .nav-tree-item:hover{ background:var(--surface-hover,#1D1D1A); color:var(--text,#F3F2ED); transform:translateX(2px); } .nav-tree-item.ativo{ background:var(--accent-soft,rgba(216,56,49,.16)); color:var(--accent-text,#FF6156); font-weight:600; } .nav-tree-hint{ display:block; padding:7px 12px; font-size:11px; color:var(--text-faint,#5C584F); } .nav-subgroup .nav-sub select{ width:100%; background:var(--bg-elevated,#111110); border:1px solid var(--border,#2A2A26); color:var(--text,#F3F2ED); font-family:inherit; font-size:12px; font-weight:600; padding:6px 8px; border-radius:7px; } .nav-subgroup .nav-sub select:hover{ border-color:var(--text-faint,#5C584F); } .nav-subgroup .nav-sub select:disabled{ opacity:.5; } .nav-foot{ padding:12px 10px 16px; border-top:1px solid var(--border-soft,#1E1E1B); display:flex; align-items:center; gap:8px; } .nav-account{ display:flex; align-items:center; gap:10px; flex:1; min-width:0; padding:8px 10px; border-radius:9px; background:var(--bg-elevated,#111110); border:1px solid var(--border,#2A2A26); color:var(--text-dim,#948F84); font-size:12px; text-align:left; transition:border-color .15s ease; } .nav-account:hover{ border-color:var(--text-faint,#5C584F); } .nav-account .nav-avatar{ width:28px; height:28px; border-radius:50%; background:var(--accent,#D83831); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:11px; font-weight:700; } .nav-account .nav-account-txt{ min-width:0; } .nav-account .nav-account-txt b{ display:block; font-size:12px; font-weight:600; color:var(--text,#F3F2ED); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .nav-account .nav-account-txt small{ display:block; font-size:10px; color:var(--text-faint,#5C584F); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .nav-logout{ width:34px; height:34px; flex-shrink:0; border-radius:9px; border:1px solid var(--border,#2A2A26); background:var(--bg-elevated,#111110); color:var(--text-dim,#948F84); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .15s ease; } .nav-logout:hover{ border-color:var(--accent,#D83831); color:var(--accent-text,#FF6156); } .nav-logout svg{ width:15px; height:15px; } .nav-toggle{ position:fixed; top:13px; left:13px; z-index:101; width:38px; height:38px; border-radius:9px; border:1px solid var(--border,#2A2A26); background:var(--surface,#151513); color:var(--text,#F3F2ED); display:none; align-items:center; justify-content:center; } .nav-toggle svg{ width:18px; height:18px; } .nav-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:99; display:none; } @media (min-width:1000px){ body{ padding-left:var(--nav-w); transition:padding-left .24s cubic-bezier(.16,1,.3,1), background .35s ease, color .35s ease, opacity .28s ease; } /* ---------- menu RECOLHIDO (só desktop) ---------- */ /* larguras explícitas (não mexer no --nav-w via classe: transição de width driven-by-var não dispara de forma confiável no Chrome) */ html.nav-mini .side-nav{ width:var(--nav-w-mini); } html.nav-mini body{ padding-left:var(--nav-w-mini); } html.nav-mini .nav-head{ flex-direction:column; gap:9px; padding:13px 0; } html.nav-mini .nav-brand{ flex:0 0 auto; padding:0; } html.nav-mini .nav-brand-txt{ display:none; } html.nav-mini .nav-mini-btn{ transform:rotate(180deg); } html.nav-mini .nav-list{ padding:10px 8px; overflow:visible; } html.nav-mini .nav-item{ justify-content:center; gap:0; padding:9px 0; overflow:visible; } html.nav-mini .nav-item:hover{ padding-left:0; } html.nav-mini .nav-item > span{ display:none; } html.nav-mini .nav-item svg{ transform:none; } html.nav-mini .nav-caret{ display:none; } html.nav-mini .nav-branch-row{ justify-content:center; } html.nav-mini .nav-branch-row .nav-item{ flex:0 0 auto; width:100%; } html.nav-mini .nav-tree{ display:none !important; } /* estado 'aberto' fica salvo; volta ao expandir */ html.nav-mini .nav-foot{ flex-direction:column; gap:9px; padding:12px 0 16px; } html.nav-mini .nav-account{ flex:0 0 auto; width:auto; padding:4px; border:none; background:none; position:relative; } html.nav-mini .nav-account-txt{ display:none; } /* tooltip (reaproveita o data-label) — aparece à direita no hover */ html.nav-mini .nav-item::after, html.nav-mini .nav-account::after{ content:attr(data-label); position:absolute; left:calc(100% + 12px); top:50%; transform:translateY(-50%) translateX(-5px); background:var(--surface,#151513); color:var(--text,#F3F2ED); border:1px solid var(--border,#2A2A26); border-radius:8px; padding:6px 10px; font-size:12px; font-weight:600; white-space:nowrap; box-shadow:0 12px 32px -10px rgba(0,0,0,.55); z-index:210; opacity:0; pointer-events:none; transition:opacity .13s ease, transform .13s ease; } html.nav-mini .nav-item:hover::after, html.nav-mini .nav-account:hover::after{ opacity:1; transform:translateY(-50%) translateX(0); } } @media (max-width:999px){ .nav-mini-btn{ display:none; } .side-nav{ transform:translateX(-100%); box-shadow:0 0 60px rgba(0,0,0,.55); } body.nav-open .side-nav{ transform:translateX(0); } body.nav-open .nav-backdrop{ display:block; } .nav-toggle{ display:flex; } .app{ padding-top:62px !important; } /* espaço pro botão de menu */ } @media (prefers-reduced-motion:reduce){ .side-nav, body, .nav-mini-btn, .nav-mini-btn svg, html.nav-mini .nav-item::after, html.nav-mini .nav-account::after{ transition:none !important; } }