/* ===== Layout: menu lateral recolhível + abas Mapa / Dashboard ===== */
.shell{max-width:none;margin:0;padding:22px 0}
.layout{display:block}
.content{min-width:0;margin-left:248px;transition:margin-left .2s ease}
.layout.collapsed .content{margin-left:62px}
.content{padding:0 22px}
.site-rodape{max-width:1340px;margin:28px auto 18px;padding-top:14px;border-top:1px solid var(--linha);text-align:center;font-size:12px;color:var(--suave)}
.site-rodape b{color:var(--tinta-2);font-weight:700}
body.fundo-rede .site-rodape{color:rgba(255,255,255,.6);border-top-color:rgba(255,255,255,.12)} body.fundo-rede .site-rodape b{color:rgba(255,255,255,.85)}
.content>.dash-top,.content>section{max-width:1340px;margin-left:auto;margin-right:auto}

/* --- sidebar --- */
.sidebar{position:fixed;left:0;top:62px;bottom:0;width:248px;z-index:900;background:#fff;border-right:1px solid var(--linha);box-shadow:4px 0 24px rgba(11,32,52,.06);padding:12px 10px 14px;display:flex;flex-direction:column;gap:6px;transition:width .2s ease;overflow-y:auto;overflow-x:hidden}
.sb-toggle{align-self:flex-end;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--suave);background:var(--papel);border:1px solid var(--linha);cursor:pointer;transition:.2s}
.sb-toggle:hover{color:var(--azul-esc);border-color:var(--azul)}
.sb-nav{display:flex;flex-direction:column;gap:4px;margin:2px 0 8px}
.sb-item{position:relative;display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;font-size:13.5px;font-weight:700;color:var(--texto);background:transparent;cursor:pointer;text-align:left;white-space:nowrap}
.sb-item svg{flex:none;color:var(--suave)}
.sb-item:hover{background:#F1F6FB}
.sb-item.on{background:var(--azul-esc);color:#fff} .sb-item.on svg{color:#fff}
.sb-badge{margin-left:auto;font-style:normal;font-size:10.5px;font-weight:800;background:var(--vermelho);color:#fff;border-radius:99px;padding:2px 7px;line-height:1.3}
.sb-sec{border-top:1px solid var(--linha);padding-top:10px;margin-top:2px}
/* filtros das CTOs, revisão e porta OLT só no módulo Mapa (a revisão também na própria tela dela) */
body:not([data-view="mapa"]) :is(#sbFiltros,#sbPon){display:none!important}
body:not([data-view="mapa"]):not([data-view="revisao"]) #sbRevisao{display:none!important}
.sb-title{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:800;color:var(--suave);text-transform:uppercase;letter-spacing:.06em;padding:4px 12px 8px}

/* chips como lista vertical (mesmos ids/classes que o JS já usa) */
.sb-chips{display:flex;flex-direction:column;gap:3px;margin:0}
.sb-chips .chip{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:8px 12px;border-radius:9px;border:1px solid transparent;background:transparent;font-size:13px;font-weight:600;color:var(--texto);text-align:left;cursor:pointer;box-shadow:none}
.sb-chips .chip:hover{background:#F1F6FB}
.sb-chips .chip.sel{background:#E6F4FC;border-color:#BFE3F5;color:var(--azul-esc)}
.sb-chips .chip-n{font-style:normal;font-size:11px;font-weight:800;color:var(--suave);background:var(--papel);border-radius:99px;padding:2px 8px;min-width:26px;text-align:center}
.sb-chips .chip.sel .chip-n{background:var(--azul-esc);color:#fff}
/* "PON lotada": caixa com vaga presa numa PON que já bateu os 128 clientes */
.sb-chips .chip-pon{color:var(--roxo)}
.sb-chips .chip-pon:hover{background:var(--roxo-bg)}
.sb-chips .chip-pon.sel{background:var(--roxo-bg);border-color:#D3B9E6;color:var(--roxo)}
.sb-chips .chip-pon.sel .chip-n{background:var(--roxo);color:#fff}
.sb-chips .chip-n:empty{display:none}
.sb-chips .chip-clear{width:100%;justify-content:center;margin-top:4px;border-radius:9px;padding:7px 10px;font-size:12.5px}

/* filtro PON em coluna */
.sidebar .sb-pon{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:8px;margin:0;padding:0 8px 4px;background:transparent;border:none;box-shadow:none;border-radius:0}
.sb-pon .pf-lbl{display:none}
.sb-pon .pf-row{display:flex;gap:6px;width:100%}
.sb-pon .pf-in{flex:1 1 0;width:0;min-width:0}
.sb-pon .pf-btn,.sb-pon .pf-verificar,.sb-pon .pf-pons{width:100%;justify-content:center;margin:0}
.sb-pon .pf-clear{position:static;width:100%;height:auto;padding:6px 10px;font-size:12px;font-weight:700;color:var(--vermelho);border-color:#F1A6AE;border-radius:9px}
.sb-pon .pf-clear::after{content:" Limpar filtro"}
.sb-pon .pf-prog{font-size:11.5px;color:var(--suave)}
.sb-pon{position:relative}

/* recolhido: só ícones */
.layout.collapsed .sidebar{width:62px;padding:12px 8px}
.layout.collapsed .sb-toggle{align-self:center;transform:rotate(180deg)}
.layout.collapsed .sb-item{justify-content:center;padding:10px 0}
.layout.collapsed .sb-item span{display:none}
.layout.collapsed .sb-badge{position:absolute;top:6px;right:8px;width:9px;height:9px;padding:0;font-size:0;border-radius:50%;margin:0;border:2px solid #fff}
.layout.collapsed .sb-sec{display:none}
.layout.collapsed .sb-item::after{content:attr(title);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);background:var(--tinta);color:#fff;font-size:12px;font-weight:700;padding:5px 9px;border-radius:7px;white-space:nowrap;opacity:0;pointer-events:none;transition:.15s;z-index:5}
.layout.collapsed .sb-item:hover::after{opacity:1}

/* hambúrguer (só no celular) */
.btn-menu{display:none;width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid var(--linha);color:var(--azul-esc);place-items:center;cursor:pointer;box-shadow:var(--sombra)}

/* --- Dashboard --- */
.dv-head{display:flex;align-items:baseline;gap:12px;margin:2px 0 16px}
.dv-head h2{font-size:20px;font-weight:800;color:var(--tinta)}
.dv-sub{font-size:13px;color:var(--suave)}
#viewDash .statgrid{grid-template-columns:repeat(6,1fr)}
.stat.s-azul{border-left:4px solid var(--azul)} .stat.s-amber{border-left:4px solid var(--amber)}
@media(max-width:1200px){#viewDash .statgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){#viewDash .statgrid{grid-template-columns:repeat(2,1fr)}}
.dv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.dv-card{background:#fff;border:1px solid var(--linha);border-radius:var(--r);box-shadow:var(--sombra);overflow:hidden;min-width:0}
.dv-card.dv-wide{grid-column:1 / -1}
.dv-card .hd{padding:13px 18px;border-bottom:1px solid var(--linha);display:flex;align-items:center;justify-content:space-between;gap:10px}
.dv-card .hd h3{font-size:14px;font-weight:800;color:var(--tinta)}
.dv-card .hd .sub{font-size:12px;color:var(--suave)}
.dv-body{padding:16px 18px;height:270px;position:relative}
.dv-card.dv-wide .dv-body{height:240px}
.dv-body>canvas{display:block}
.dv-donut{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:16px;align-items:center;height:270px}
.dv-cwrap{position:relative;height:236px;min-width:0}
.dv-legend div{display:grid;grid-template-columns:10px 1fr auto auto;gap:8px;align-items:center;padding:6px 8px;border-radius:8px;white-space:nowrap}
.dv-legend div:hover{background:#F1F6FB}
.dv-legend em{font-style:normal;font-size:11px;color:var(--suave);min-width:34px;text-align:right}
.dv-legend{display:flex;flex-direction:column;gap:8px;font-size:12.5px;color:var(--texto)}
.dv-legend div{cursor:pointer}
.dv-legend i{width:10px;height:10px;border-radius:3px;flex:none}
.dv-legend b{margin-left:auto;color:var(--tinta);font-variant-numeric:tabular-nums}
.dv-link{background:transparent;border:1px solid var(--linha);color:var(--azul-esc);font-size:12px;font-weight:700;padding:5px 10px;border-radius:8px;cursor:pointer}
.dv-link:hover{background:var(--azul-esc);color:#fff;border-color:var(--azul-esc)}
.dv-alertas{height:auto;min-height:270px;max-height:340px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:12px 14px}
.dv-al{display:grid;grid-template-columns:22px 1fr auto;gap:8px;align-items:center;padding:8px 10px;border-radius:9px;border:1px solid var(--linha);border-left-width:4px;font-size:12.5px;cursor:pointer}
.dv-al:hover{background:#F8FAFD}
.dv-al.critica{border-left-color:var(--vermelho)} .dv-al.alta{border-left-color:#F07A2A} .dv-al.atencao{border-left-color:var(--amber)} .dv-al.info{border-left-color:var(--verde)}
.dv-al b{display:block;color:var(--tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dv-al small{color:var(--suave)}
.dv-al .t{font-size:11px;color:var(--suave);white-space:nowrap}
.dv-al-vazio{margin:auto;text-align:center;color:var(--suave);font-size:13px}
.dv-al-resumo{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.dv-al-resumo span{font-size:11px;font-weight:800;padding:3px 9px;border-radius:99px;background:var(--papel);color:var(--suave)}
.dv-al-resumo span.critica{background:var(--vermelho-bg);color:var(--vermelho)} .dv-al-resumo span.alta{background:#FDE8DA;color:#B4520F} .dv-al-resumo span.atencao{background:var(--amber-bg);color:#9A6200}
.dv-vazio{position:absolute;inset:0;display:grid;place-items:center;color:var(--suave);font-size:13px;text-align:center;padding:20px}

/* fundo animado: cards do dashboard e sidebar também ganham sombra */
body.fundo-rede .sidebar{box-shadow:6px 0 30px rgba(0,0,0,.35);border-right-color:rgba(255,255,255,.08)}
body.fundo-rede .dv-card{box-shadow:0 10px 30px rgba(0,0,0,.28)}
body.fundo-rede .dv-head h2,body.fundo-rede .dv-sub{color:#fff}
body.fundo-rede .dv-sub{opacity:.8}
body.fundo-rede .detail-screen{position:relative;z-index:1}
body.fundo-rede #dBack{color:#fff}

/* --- responsivo --- */
@media(max-width:1100px){ .dv-grid{grid-template-columns:1fr} .dv-card.dv-wide{grid-column:auto} }
@media(max-width:980px){
  .layout{display:block}
  .content,.layout.collapsed .content{margin-left:0;padding:0 14px}
  .btn-menu{display:grid}
  .sidebar{position:fixed;top:0;left:0;bottom:0;z-index:1400;width:280px!important;max-height:none;border-radius:0 16px 16px 0;transform:translateX(-110%);transition:transform .22s ease;padding:16px 12px}
  .layout.drawer .sidebar{transform:none}
  .layout.collapsed .sb-sec{display:block} .layout.collapsed .sb-item span{display:inline} .layout.collapsed .sb-item{justify-content:flex-start;padding:10px 12px}
  .layout.collapsed .sb-toggle{transform:none}
  .sb-toggle{display:none}
  .sb-overlay{position:fixed;inset:0;background:rgba(11,32,52,.45);z-index:1399;display:none}
  .layout.drawer .sb-overlay{display:block}
}

/* --- Viabilidade (vendas) --- */
.vb-grid{display:grid;grid-template-columns:minmax(380px,1fr) minmax(0,1.2fr);gap:16px;align-items:start}
.vb-col{display:flex;flex-direction:column;gap:14px}
.vb-card{background:#fff;border:1px solid var(--linha);border-radius:var(--r);box-shadow:var(--sombra);padding:18px}
.vb-card h4{font-size:13px;font-weight:800;color:var(--azul-esc);text-transform:uppercase;letter-spacing:.04em;margin:0 0 10px}
.vb-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vb-acts{display:flex;gap:8px;margin-top:4px}
.vb-acts .btn-azul{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px}
.vb-mapcard{padding:0;overflow:hidden;position:sticky;top:76px}
#vbMapa{height:560px;width:100%;background:#E8EEF5}
.vb-carregando,.vb-erro{background:#fff;border:1px solid var(--linha);border-radius:var(--r);padding:16px;font-size:13px;color:var(--suave)}
.vb-erro{color:var(--vermelho);background:var(--vermelho-bg);border-color:#F1A6AE}
.vb-status{display:flex;gap:14px;align-items:center;border-radius:var(--r);padding:16px 18px;color:#fff;box-shadow:var(--sombra)}
.vb-status.viavel{background:linear-gradient(120deg,#178A5C,#1FA971)} .vb-status.ressalva{background:linear-gradient(120deg,#B56F00,#D98A00)} .vb-status.inviavel{background:linear-gradient(120deg,#B02B3B,#D33A4B)}
.vb-ic{font-size:30px;line-height:1}
.vb-status b{display:block;font-size:19px;font-weight:800} .vb-status span{display:block;font-size:13px;margin-top:2px;opacity:.95} .vb-status small{display:block;font-size:11px;opacity:.75;margin-top:4px}
.vb-lista{background:#fff;border:1px solid var(--linha);border-radius:var(--r);box-shadow:var(--sombra);margin-top:12px;overflow:hidden}
.vb-cto{display:grid;grid-template-columns:28px 1fr 90px 90px;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--linha);cursor:pointer;border-left:4px solid transparent}
.vb-cto:last-child{border-bottom:none} .vb-cto:hover{background:#F8FAFD}
.vb-cto.ok{border-left-color:var(--verde)} .vb-cto.longe{border-left-color:var(--amber)} .vb-cto.cheia{border-left-color:var(--vermelho)}
.vb-n{width:24px;height:24px;border-radius:7px;background:var(--papel);display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--suave)}
.vb-info b{display:block;font-size:13.5px;color:var(--tinta)} .vb-info small{color:var(--suave);font-size:11.5px}
.vb-d,.vb-v{text-align:right} .vb-d b,.vb-v b{display:block;font-size:14px;font-weight:800;color:var(--tinta)} .vb-d small,.vb-v small{font-size:10.5px;color:var(--suave)}
.vb-v b{color:var(--verde)} .vb-v.zero b{color:var(--vermelho)}
.vb-lista + .hint{padding:10px 4px 0}
.vb-hist .vb-h{display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:center;padding:8px 6px;border-radius:9px;cursor:pointer;font-size:12.5px}
.vb-hist .vb-h:hover{background:#F1F6FB}
.vb-h b{display:block;color:var(--tinta);font-size:12.5px} .vb-h small{color:var(--suave);font-size:11px}
.vb-h-t{font-size:10.5px;color:var(--suave);text-align:right;white-space:nowrap}
/* papel vendas: só a tela de viabilidade */
body.is-vendas .sidebar,body.is-vendas #btnMenu,body.is-vendas .dash-actions,body.is-vendas .searchhero,body.is-vendas .dash-top,body.is-vendas #viewMapa,body.is-vendas #viewDash,body.is-vendas .tu-users,body.is-vendas .tu-alertas{display:none!important}
body.is-vendas .content,body.is-vendas .layout.collapsed .content{margin-left:0}
body.is-vendas .content>section{max-width:1340px;margin:0 auto}
@media(max-width:980px){ .vb-grid{grid-template-columns:1fr} .vb-mapcard{position:static} #vbMapa{height:380px} }

/* dashboard: card de viabilidade */
.dv-viab{height:auto;min-height:270px;display:flex;flex-direction:column;gap:8px;padding:14px 16px}
.dv-viab-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.dv-viab-kpis div{background:var(--papel);border-radius:9px;padding:8px 10px} .dv-viab-kpis b{display:block;font-size:20px;font-weight:800;color:var(--tinta);line-height:1.1} .dv-viab-kpis small{font-size:10.5px;color:var(--suave);font-weight:600}
.dv-viab-kpis .ok b{color:var(--verde)} .dv-viab-kpis .warn b{color:var(--amber)} .dv-viab-kpis .bad b{color:var(--vermelho)}
.dv-viab-bar{display:flex;height:8px;border-radius:6px;overflow:hidden;background:#EEF3F8} .dv-viab-bar .ok{background:var(--verde)} .dv-viab-bar .warn{background:var(--amber)} .dv-viab-bar .bad{background:var(--vermelho)}
.dv-viab-top{display:flex;gap:6px;flex-wrap:wrap} .dv-viab-top span{font-size:11px;background:var(--papel);border-radius:99px;padding:3px 9px;color:var(--suave)} .dv-viab-top b{color:var(--tinta)}
.dv-viab-item{display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:center;font-size:12.5px;padding:6px 8px;border-radius:8px;border:1px solid var(--linha)}
.dv-viab-item b{display:block;color:var(--tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dv-viab-item small{color:var(--suave)}

.vb-dica{font-weight:600;color:var(--azul);text-transform:none;letter-spacing:0}
.vb-coord{display:block;font-size:11px;color:var(--suave);margin-top:4px;font-family:ui-monospace,Consolas,monospace}
.vb-maptools{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border-bottom:1px solid var(--linha);font-size:12px;color:var(--suave)}
.vb-maptools .btn{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;font-size:12px}
.vb-cto.sel{background:#EEF6FC} .vb-cto.sel .vb-n{background:var(--azul-esc);color:#fff}
#vbMapa{height:600px}

/* exclusão do histórico de viabilidade (admin) */
.vb-h .vb-h-x{width:20px;height:20px;border-radius:6px;border:none;background:transparent;color:var(--suave);font-size:15px;line-height:1;display:grid;place-items:center;cursor:pointer;opacity:0}
.vb-h:hover .vb-h-x{opacity:1}
.vb-h .vb-h-x:hover{background:#FBE9EB;color:var(--vermelho)}
.vb-h-acts{display:flex;justify-content:flex-end;margin-top:8px}
.vb-h-limpar{font-size:12px;font-weight:700;padding:6px 11px;border-radius:7px;border:1.5px solid #F1D5D5;color:var(--vermelho);background:#fff;cursor:pointer}
.vb-h-limpar:hover{background:var(--vermelho);border-color:var(--vermelho);color:#fff}
.vb-h-limpar[disabled]{opacity:.6;cursor:wait}

/* aviso: endereço encontrado só no nível da rua */
.vb-aviso{margin:10px 0 2px;padding:10px 13px;border-radius:10px;background:#FFF6E0;border:1px solid #F2DFA8;color:#7A5A00;font-size:12.5px;line-height:1.45}