/* =====================================================================
   NAVEGACAO NOVA (28/10/2026 - docs/CONSTRUCAO.md SA2 - js/nav.js)
   Marca na moldura (brandbook out/2026, p. 6): faixa escura em Tinta MXC,
   logo e titulos em Montserrat; o conteudo segue nos tokens de sempre.
   Tudo aqui so vale com body.n2 (chave nav_nova e tela >= 861 px).
   ===================================================================== */
:root{ --n2-tinta:#1D152D; --n2-tinta-2:#2A2140; --n2-tinta-3:#3A2F55; --n2-tinta-tx:#E9E6F0; --n2-tinta-tx2:#A9A2BC;
       --n2-topo:56px; --n2-faixa:64px; --n2-aberta:244px; --n2-marca:'Montserrat','Inter',system-ui,sans-serif }

/* so no computador: no celular (<= 860 px) segue a barra de baixo do mobile.js, mesmo se a classe ficar */
@media (min-width:861px){
/* o topo antigo sai; a navegacao nova entra; o conteudo abre espaco para a faixa */
body:not(.n2) .n2-topo, body:not(.n2) .n2-faixa{display:none}
body.n2 > header:not(.n2-topo){display:none}
body.n2 .wrap, body.n2 #v-crm{margin-left:var(--n2-faixa);transition:margin-left var(--t) var(--e)}
body.n2.n2-fixo .wrap, body.n2.n2-fixo #v-crm{margin-left:var(--n2-aberta)}

/* ---------- topo ---------- */
.n2-topo{position:sticky;top:0;z-index:60;height:var(--n2-topo);display:flex;align-items:center;gap:10px;
  padding:0 16px 0 8px;background:var(--surface);border-bottom:1px solid var(--line)}
.n2-logo{display:flex;align-items:center;height:44px;padding:0 8px;border-radius:9px;width:calc(var(--n2-faixa) + 96px)}
.n2-logo img{height:34px;width:auto;display:block}
.n2-logo:hover{background:var(--surface-2)}
.n2-tit{font:600 15px/1.2 var(--n2-marca);color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
  padding-left:12px;border-left:1px solid var(--line)}
.n2-sp{flex:1}
.n2-emp{max-width:220px;overflow:hidden;display:flex;align-items:center;gap:8px;height:36px;padding:0 11px;border:1px solid var(--line-2);border-radius:9px;
  background:var(--surface);font-size:12.5px;color:var(--tx);white-space:nowrap}
.n2-emp:not(.so):hover{background:var(--surface-2)}
.n2-emp .n2-lbl{color:var(--tx-3)}
.n2-emp.so{border-style:dashed;color:var(--tx-2)}
.n2-dot{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block}
.n2-busca{display:flex;align-items:center;gap:9px;height:36px;width:min(300px,26vw);padding:0 10px;border:1px solid var(--line-2);
  border-radius:9px;background:var(--surface-2);color:var(--tx-3);font-size:12.5px;text-align:left}
.n2-busca span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.n2-busca:hover{border-color:var(--tx-3)}
.n2-busca kbd,.n2-palin kbd{font:600 10.5px var(--font,inherit);border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;padding:1px 5px;color:var(--tx-3);background:var(--surface)}
.n2-ib{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:9px;color:var(--tx-2)}
.n2-ib:hover,.n2-ib[aria-expanded="true"]{background:var(--surface-2);color:var(--tx)}
.n2-bdg{position:absolute;top:3px;right:2px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--bad);color:#fff;
  font:800 10px/17px var(--font,inherit);text-align:center}
.n2-av{display:flex;align-items:center;gap:8px;height:40px;padding:0 6px;border-radius:9px;color:var(--tx)}
.n2-av:hover,.n2-av[aria-expanded="true"]{background:var(--surface-2)}
.n2-nm{font-size:12.5px;font-weight:600;max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
svg.ni{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
svg.ni.sm{width:14px;height:14px}

/* ---------- faixa de icones (escura, Tinta MXC) ---------- */
.n2-faixa{margin:0;position:fixed;z-index:55;left:0;top:var(--n2-topo);bottom:0;width:var(--n2-faixa);display:flex;flex-direction:column;
  background:var(--n2-tinta);color:var(--n2-tinta-tx2);padding:10px 10px 12px;overflow:hidden;
  transition:width var(--t) var(--e),box-shadow var(--t) var(--e)}
body.n2-aberto .n2-faixa{width:var(--n2-aberta);box-shadow:8px 0 28px rgba(0,0,0,.18)}
body.n2-fixo .n2-faixa{box-shadow:none}
.n2-rol{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:2px;scrollbar-width:none}
.n2-rol::-webkit-scrollbar{display:none}
.n2-grp{font:700 10px var(--n2-marca);letter-spacing:.09em;text-transform:uppercase;color:var(--n2-tinta-tx2);opacity:.75;
  padding:12px 11px 5px;margin-top:6px;border-top:1px solid var(--n2-tinta-3);white-space:nowrap;cursor:default;user-select:none}
.n2-grp:first-child{margin-top:0;border-top:0;padding-top:4px}
body:not(.n2-aberto) .n2-grp{font-size:0;padding:6px 0;height:13px;margin-top:0;border-top:0}
body:not(.n2-aberto) .n2-grp::after{content:"";display:block;height:1px;background:var(--n2-tinta-3);margin:0 6px}
body:not(.n2-aberto) .n2-grp:first-child{display:none}
.n2-it{display:flex;align-items:center;gap:12px;width:100%;height:40px;padding:0 12px;border-radius:9px;color:var(--n2-tinta-tx2);
  font-size:13px;white-space:nowrap;text-align:left;position:relative;transition:background var(--t) var(--e),color var(--t) var(--e)}
.n2-it:hover{background:var(--n2-tinta-2);color:var(--n2-tinta-tx)}
.n2-it.on,.n2-it[aria-current="page"]{background:var(--n2-tinta-3);color:#fff;font-weight:600}
.n2-it.on::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:#fff}
.n2-lb{flex:1;overflow:hidden;text-overflow:ellipsis}
.n2-chev{transition:transform var(--t) var(--e)}
.n2-it[aria-expanded="true"] .n2-chev{transform:rotate(90deg)}
.n2-ct{background:var(--bad);color:#fff;border-radius:9px;padding:0 6px;font:800 10px/17px var(--font,inherit)}
body:not(.n2-aberto) .n2-lb,body:not(.n2-aberto) .n2-chev,body:not(.n2-aberto) .n2-x{display:none}
body:not(.n2-aberto) .n2-it .n2-ct{position:absolute;top:3px;right:2px;padding:0 4px;min-width:15px;text-align:center}
.n2-filhos{display:flex;flex-direction:column;gap:1px;padding:2px 0 6px 42px}
.n2-filho{display:flex;align-items:center;gap:8px;height:32px;padding:0 10px;border-radius:8px;font-size:12.5px;color:var(--n2-tinta-tx2);text-align:left;white-space:nowrap}
.n2-filho:hover{background:var(--n2-tinta-2);color:var(--n2-tinta-tx)}
.n2-filho[aria-current="page"]{color:#fff;font-weight:600;background:var(--n2-tinta-2)}
.n2-filho .n2-ct{margin-left:auto}
/* 29/10: Configuracoes tem 10 telas; no rodape a lista rola em vez de empurrar a faixa */
.n2-pe .n2-filhos{max-height:min(46vh,380px);overflow-y:auto;scrollbar-width:thin}
.n2-pe{border-top:1px solid var(--n2-tinta-3);padding-top:8px;margin-top:6px;display:flex;flex-direction:column;gap:6px}
.n2-pin{align-self:flex-end;width:34px;height:34px;display:grid;place-items:center;border-radius:9px;border:1px solid var(--n2-tinta-3);color:var(--n2-tinta-tx2)}
body:not(.n2-aberto) .n2-pin{align-self:center}
.n2-pin:hover,.n2-pin:focus-visible{background:var(--n2-tinta-2);color:#fff}
.n2-pin[aria-pressed="true"]{background:var(--n2-tinta-3);color:#fff}
.n2-pin .ni{transition:transform var(--t) var(--e)}
.n2-pin .esq{transform:rotate(180deg)}
.n2-gear .ni{transition:transform 320ms var(--e)}
.n2-gear:hover,.n2-gear:focus-visible,.n2-gear.on{background:#fff;color:var(--n2-tinta)}
.n2-gear:hover .ni,.n2-gear:focus-visible .ni{transform:rotate(70deg)}
.n2-gear.on::before{display:none}
body .n2-faixa :focus-visible,body[data-t="dark"] .n2-faixa :focus-visible{outline:2px solid #fff;outline-offset:2px}
.n2-tip{position:fixed;z-index:95;pointer-events:none;background:var(--n2-tinta);color:#fff;font-size:12px;font-weight:600;padding:5px 9px;
  border-radius:7px;white-space:nowrap;box-shadow:0 8px 22px rgba(0,0,0,.25)}

/* ---------- menus suspensos ---------- */
.n2-pop{position:fixed;z-index:96;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;box-shadow:0 14px 34px rgba(16,24,40,.18);
  padding:6px;min-width:220px;max-width:min(360px,calc(100vw - 24px))}
.n2-ph{padding:8px 10px 4px;font-size:11.5px;color:var(--tx-3);font-weight:600}
.n2-pi{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:8px;text-align:left;font-size:12.5px;color:var(--tx)}
.n2-pi:hover,.n2-pi:focus-visible{background:var(--surface-2)}
.n2-pi.on{font-weight:700}
.n2-pi.n2-sai{color:var(--bad-tx)}
.n2-sep{height:1px;background:var(--line);margin:5px 0}
.n2-txt{padding:10px;font-size:12.5px;color:var(--tx-3)}
.n2-ntf{display:flex;gap:12px;align-items:flex-start;padding:9px 10px;border-radius:8px;text-align:left;width:100%}
.n2-ntf:hover{background:var(--surface-2)}
.n2-ntf b{font-size:16px;color:var(--bad-tx);min-width:28px;text-align:right}
.n2-ntf span{display:block;font-size:12px;color:var(--tx-3)}
.n2-ntf em{display:block;font-style:normal;font-weight:600;color:var(--tx);font-size:12.5px}
.n2-txtl{padding:4px 2px 8px;font-size:13px;line-height:1.55;color:var(--tx-2)}
.n2-txtl ul{padding-left:18px;margin:8px 0}
.n2-txtl li{margin:5px 0}

/* ---------- busca (Ctrl K) ---------- */
.n2-pal-fundo{position:fixed;inset:0;z-index:97;background:rgba(17,24,39,.35);display:flex;justify-content:center;align-items:flex-start;padding-top:10vh}
.n2-pal{width:min(640px,calc(100vw - 24px));background:var(--surface);border:1px solid var(--line-2);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.3);overflow:hidden}
.n2-palin{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);color:var(--tx-3)}
.n2-palin input{flex:1;border:0;outline:none;background:transparent;font-size:15px;color:var(--tx)}
.n2-res{max-height:min(420px,60vh);overflow-y:auto;padding:6px}
.n2-ri{display:block;width:100%;padding:8px 10px;border-radius:8px;text-align:left}
.n2-ri b{display:block;font-weight:600;color:var(--tx)}
.n2-ri span{display:block;font-size:12px;color:var(--tx-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.n2-ri[aria-selected="true"],.n2-ri:hover{background:var(--surface-3)}

/* 29/10: topo do CRM enxuto. A empresa e a do topo (o menu mostra os numeros de cada uma), a busca do topo filtra o
   quadro e as abas das esteiras sobem para a linha dos botoes: uma linha so, sem botoes de empresa nem duas buscas */
body.n2 #crm-abas, body.n2 .crmbusca{display:none!important}
body.n2 .crmbar>.crmest{margin:0;flex:0 1 auto;min-width:0}
.n2-buscaq{cursor:text}
.n2-buscaq input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--tx);font:inherit;font-size:12.5px;padding:0}
.n2-buscaq input::placeholder{color:var(--tx-3)}
.n2-buscaq:focus-within{border-color:var(--tx-3);background:var(--surface)}
.n2-buscaq kbd{cursor:pointer}
.n2-pi .n2-n{margin-left:auto;padding-left:14px;color:var(--tx-3);font-size:11.5px;font-variant-numeric:tabular-nums}

/* ---------- tutorial guiado ---------- */
#n2-tour{position:fixed;inset:0;z-index:98}
#n2-tour.centro{background:rgba(17,24,39,.55)}
.n2-luz{position:fixed;border-radius:12px;box-shadow:0 0 0 9999px rgba(17,24,39,.55);outline:2px solid #fff;transition:all 220ms var(--e);pointer-events:none}
.n2-bal{position:fixed;background:var(--surface);color:var(--tx);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:16px 18px 14px;width:min(360px,calc(100vw - 24px));
  transition:left 220ms var(--e),top 220ms var(--e)}
#n2-tour.centro .n2-bal{left:50%!important;top:30%!important;transform:translateX(-50%);width:min(420px,calc(100vw - 24px))}
.n2-bal-n{font-size:11.5px;color:var(--tx-3);font-weight:600}
.n2-bal h3{margin:4px 0 6px;font:700 16px/1.3 var(--n2-marca)}
.n2-bal p{margin:0 0 14px;font-size:13px;line-height:1.55;color:var(--tx-2)}
.n2-bal-b{display:flex;align-items:center;gap:8px}
.n2-bt-txt{color:var(--tx-3);font-size:12.5px;text-decoration:underline;text-underline-offset:3px}
.n2-bt-txt:hover{color:var(--tx)}

/* tema escuro: a faixa ja e escura; o topo segue os tokens */
body[data-t="dark"] .n2-faixa{background:#140F20;border-right:1px solid var(--n2-tinta-3)}
@media (prefers-reduced-motion:reduce){ .n2-faixa,.n2-luz,.n2-bal,body.n2 .wrap,body.n2 #v-crm{transition:none} }

/* ---------- Inicio (bloco B - js/inicio.js) ---------- */
#v-inicio{max-width:none}   /* 29/10: ocupa a largura toda, sem faixa vazia a direita em tela larga */
.ini-ola{display:flex;align-items:flex-end;gap:12px;margin:4px 0 16px}
.ini-ola h1{margin:0;font:700 21px/1.2 var(--n2-marca);color:var(--tx)}
.ini-ola p{margin:3px 0 0;color:var(--tx-3);font-size:12.5px;text-transform:none}
.ini-ola .btn{margin-left:auto}
.ini-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;margin-bottom:14px;overflow:hidden;min-width:0}
.ini-card>header{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.ini-card>header h2{margin:0;font:700 13.5px var(--n2-marca);color:var(--tx)}
.ini-card>header span{color:var(--tx-3);font-size:12px}
.ini-card>header .btxt{margin-left:auto;font-size:12px}
.ini-sug{font-size:10.5px!important;font-weight:600;border:1px dashed var(--line-2);border-radius:99px;padding:0 7px;line-height:17px}
.ini-duas{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:14px}
.ini-col{display:flex;flex-direction:column}
.ini-lista{display:flex;flex-direction:column}
.ini-li{display:flex;align-items:center;gap:10px;width:100%;padding:9px 16px;border-top:1px solid var(--line);text-align:left;color:var(--tx)}
.ini-li:first-child{border-top:0}
.ini-li:hover{background:var(--surface-2)}
.ini-hr{font:600 12px ui-monospace,Menlo,monospace;color:var(--tx-2);width:44px;flex:none}
.ini-dot{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block}
.ini-mn{flex:1;min-width:0}
.ini-mn b{display:block;font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ini-mn span{display:block;font-size:12px;color:var(--tx-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ini-seta{color:var(--tx-3);font-size:18px}
.ini-tag{font-size:11px;font-weight:600;border-radius:99px;padding:2px 8px;background:var(--surface-2);color:var(--tx-2);white-space:nowrap}
.ini-tag.vivo{background:var(--ok);color:#fff}
.ini-tag.ok{color:var(--ok-tx);background:color-mix(in srgb,var(--ok) 14%,transparent)}
.ini-tag.mau{color:var(--bad-tx);background:color-mix(in srgb,var(--bad) 12%,transparent)}
.ini-pulso{width:9px;height:9px;border-radius:50%;background:var(--ok);flex:none;box-shadow:0 0 0 0 rgba(22,163,74,.5);animation:iniPulso 1.8s infinite}
@keyframes iniPulso{70%{box-shadow:0 0 0 7px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
.ini-vazio{padding:16px;color:var(--tx-3);font-size:12.5px}
/* 29/10 (B2a): proximos dias do calendario e o aviso de feriado que passou do prazo */
.ini-cal:hover{background:none}
.ini-cal.hoje{background:color-mix(in srgb,var(--ok) 7%,transparent)}
.ini-cald{flex:none;width:68px;font-size:12px;font-weight:700;color:var(--tx-2);font-variant-numeric:tabular-nums}
.ini-calt{flex:none;font-size:10.5px;font-weight:700;border-radius:99px;padding:2px 8px;background:var(--surface-2);color:var(--tx-2);white-space:nowrap}
.ini-calt.feriado{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn-tx)}
.ini-calt.aniversario{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok-tx)}
.ini-dica{padding:10px 16px 14px;font-size:12px;color:var(--tx-3);border-top:1px solid var(--line)}
.ini-atras .ini-mn b{color:var(--bad-tx)}
.ini-mais{display:block;width:100%;padding:9px 16px;border-top:1px solid var(--line);text-align:left;font-size:12.5px;color:var(--tx-2)}
.ini-mais:hover{background:var(--surface-2)}
.ini-pend{display:flex;gap:8px;flex-wrap:wrap;padding:10px 16px;border-top:1px solid var(--line);background:var(--surface-2)}
.ini-pend button{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--tx-2);padding:6px 10px;border-radius:8px;border:1px solid var(--line);background:var(--surface)}
.ini-pend button:hover{border-color:var(--tx-3);color:var(--tx)}
.ini-pend b{font-size:15px;color:var(--tx)}
#v-inicio b.mau{color:var(--bad-tx)} #v-inicio b.aviso{color:var(--warn-tx)} #v-inicio b.ok{color:var(--ok-tx)}
.ini-grade3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.ini-grade4{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.ini-est,.ini-pz,.ini-kpi{display:flex;flex-direction:column;gap:3px;padding:13px 16px;border-right:1px solid var(--line);border-top:1px solid var(--line);text-align:left;min-width:0;color:var(--tx)}
.ini-est:hover,.ini-pz:hover,.ini-kpi:hover{background:var(--surface-2)}
.ini-est.off{color:var(--tx-3);cursor:default}
.ini-est b,.ini-pz b,.ini-kpi b{font-size:22px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.ini-est span,.ini-pz span,.ini-kpi span{font-size:12px;color:var(--tx-2)}
.ini-pz em{font-style:normal;font-size:11.5px;color:var(--tx-3)}
.ini-kpi b i{font-style:normal;font-size:13px;color:var(--tx-3)}
.ini-k{font-size:11.5px!important;color:var(--tx-3)!important;font-weight:600}
.ini-sit{align-self:flex-start;margin-top:3px;font-size:11px!important;font-weight:700;border-radius:99px;padding:2px 8px;background:var(--surface-2)}
.ini-sit.ok{color:var(--ok-tx)!important;background:color-mix(in srgb,var(--ok) 14%,transparent)}
.ini-sit.aviso{color:var(--warn-tx)!important;background:color-mix(in srgb,var(--warn) 14%,transparent)}
.ini-sit.mau{color:var(--bad-tx)!important;background:color-mix(in srgb,var(--bad) 12%,transparent)}
.ini-vend{display:grid;grid-template-columns:minmax(200px,260px) minmax(0,1fr)}
.ini-vtot{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-right:1px solid var(--line)}
.ini-vtot b{font-size:26px;font-weight:700;letter-spacing:-.01em;line-height:1.15;color:var(--tx)}
.ini-vtot b.ini-b2{font-size:19px}
.ini-vtot span{font-size:12px;color:var(--tx-2)}
.ini-rk{display:flex;flex-direction:column;gap:9px;padding:14px 16px;min-width:0}
.ini-rkl{display:grid;grid-template-columns:24px 10px minmax(110px,160px) minmax(0,1fr) auto;gap:9px;align-items:center;font-size:12.5px;color:var(--tx)}
.ini-pos{font:700 11.5px ui-monospace,Menlo,monospace;color:var(--tx-3)}
.ini-bar{height:8px;background:var(--surface-2);border-radius:99px;overflow:hidden}
.ini-bar i{display:block;height:100%;border-radius:99px}
.ini-rkv{font-weight:600;white-space:nowrap}
.ini-rkv em{font-style:normal;color:var(--tx-3);font-weight:500;margin-left:4px}
.ini-erro{background:color-mix(in srgb,var(--bad) 10%,transparent);color:var(--bad-tx);border-radius:10px;padding:10px 14px;margin-bottom:14px;font-size:12.5px}
.ini-esq{display:grid;gap:14px}
.ini-esq .sk{height:120px;border-radius:12px;background:linear-gradient(90deg,var(--surface-2) 0%,var(--surface-3) 50%,var(--surface-2) 100%);background-size:200% 100%;animation:iniSk 1.3s linear infinite}
@keyframes iniSk{to{background-position:-200% 0}}
@media (max-width:1100px){ .ini-duas{grid-template-columns:1fr} .ini-vend{grid-template-columns:1fr} .ini-vtot{border-right:0;border-bottom:1px solid var(--line)} }

}
@media (max-width:860px){ .n2-topo,.n2-faixa,#n2-tour{display:none!important} }