/* ============================================================
   MENU LATERAL (GV, 12/11/2026) — desenho: `Menu lateral.dc.html` (Claude Design),
   inspirado no menu do Pipedrive: coluna à ESQUERDA, abas agrupadas, "<<" para
   recolher. Substitui a barra de abas que quebrava em linhas e ficava suspensa.

   Carregado DEPOIS de `vivo-theme.css`: aquele arquivo tem três gerações de
   `.tabs`/`.tab` empilhadas (e `.tab.active .num` com `!important`), e este aqui as
   neutraliza só dentro de `.menu-lateral`. Todo seletor começa por `.menu-lateral`
   de propósito: nenhuma outra tela que use `.tab` é tocada.

   Cor medida contra o fundo real (#FFFFFF do menu, #FAFAFA da página):
   #2E2A3D 12,6:1 · #660099 sobre #F3ECFA 7,5:1 · #4B4660 7,8:1.
   ============================================================ */
.shell { display: flex; align-items: flex-start; min-height: calc(100vh - var(--ml-top, 69px)); }
.conteudo { flex: 1; min-width: 0; }

.menu-lateral {
  flex: 0 0 252px; width: 252px; background: #FFFFFF; border-right: 1px solid #E4DFEC;
  position: sticky; top: var(--ml-top, 69px); align-self: flex-start; height: calc(100vh - var(--ml-top, 69px));
  display: flex; flex-direction: column; overflow: hidden; z-index: 60;
  transition: width .25s ease, flex-basis .25s ease;
}
.menu-lateral.col { flex-basis: 76px; width: 76px; }
.menu-lateral .ml-topo { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 8px; min-height: 52px; }
.menu-lateral.col .ml-topo { justify-content: center; padding: 14px 0 8px; }
.menu-lateral .ml-topo b { font: 700 11px var(--font-mono, 'JetBrains Mono', monospace); letter-spacing: .12em; color: #4B4660; white-space: nowrap; }
.menu-lateral.col .ml-topo b { display: none; }
.menu-lateral .ml-recolher {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; border: 1px solid #D9D3E4; background: #FFFFFF;
  color: #660099; font: 700 15px var(--font-mono, monospace); cursor: pointer; padding: 0; line-height: 1;
}
.menu-lateral .ml-recolher:hover { background: #F7F0FC; }
.menu-lateral .ml-recolher:focus-visible, .menu-lateral .tab:focus-visible { outline: 2px solid #660099; outline-offset: 2px; }

/* A lista rola DENTRO do menu: com 17 a 19 abas, o menu não pode empurrar a página. */
.menu-lateral .tabs {
  position: static; top: auto; display: block; flex: 1; overflow-x: hidden; overflow-y: auto;
  padding: 4px 10px 14px; margin: 0; gap: 0; border: 0; background: transparent; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; scrollbar-width: thin;
}
.menu-lateral .ml-grupo { margin-bottom: 6px; }
.menu-lateral .ml-grupo h6 {
  margin: 12px 8px 6px; font: 700 10px var(--font-mono, monospace); letter-spacing: .12em; color: #4B4660;
  text-transform: uppercase; white-space: nowrap;
}
.menu-lateral.col .ml-grupo h6 { height: 1px; margin: 10px 14px; background: #E4DFEC; font-size: 0; overflow: hidden; }

.menu-lateral .tab {
  position: relative; display: flex; align-items: center; gap: 12px; height: 44px; margin: 0; padding: 0 10px;
  border: 0; border-radius: 10px; background: transparent; box-shadow: none; transform: none;
  font: 500 14px/1 inherit; font-family: inherit; color: #2E2A3D; white-space: nowrap; cursor: pointer; min-width: 0;
  transition: background .15s ease, color .15s ease;
}
.menu-lateral .tab:hover { background: #F6F4F9; color: #2E2A3D; }
.menu-lateral .tab.active { background: #F3ECFA; color: #660099; font-weight: 700; box-shadow: none; }
.menu-lateral.col .tab { justify-content: center; padding: 0; }

.menu-lateral .tab .num,
.menu-lateral .tabs .tab:nth-of-type(n) .num {
  flex: 0 0 28px; width: 28px; min-width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  background: #F4F2F7; color: #4B4660; border: 0; padding: 0; margin: 0;
  font: 600 12px/1 inherit; font-family: inherit; font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.menu-lateral .tab:hover .num { background: #EDE9F3; color: #4B4660; border: 0; }
.menu-lateral .tab.active .num { background: #660099 !important; color: #FFFFFF !important; }
.menu-lateral .tab .nome { flex: 1; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.menu-lateral.col .tab .nome { display: none; }

/* O selo de contagem: neutro, e roxo na aba ativa. Some quando zera (o JS esconde). */
.menu-lateral .tab .badge {
  min-width: 22px; height: 20px; margin: 0; padding: 0 6px; border-radius: 99px; border: 0; box-shadow: none;
  background: #EEE9F3; color: #3A3550; font: 600 11px/20px inherit; font-family: inherit; font-variant-numeric: tabular-nums; text-align: center;
  animation: none;
}
.menu-lateral .tab.active .badge { background: #660099; color: #FFFFFF; box-shadow: none; }
.menu-lateral.col .tab .badge { position: absolute; top: 2px; right: 8px; min-width: 16px; height: 16px; font-size: 9px; line-height: 16px; padding: 0 4px; }

/* Recolhido: o nome vira dica ao passar o mouse (ou foco por teclado). */
.menu-lateral.col .tab[data-tip]:hover::after,
.menu-lateral.col .tab[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; top: 50%; transform: translateY(-50%); left: calc(100% + 10px);
  background: #1B1830; color: #FFFFFF; padding: 6px 10px; border-radius: 8px; z-index: 5; pointer-events: none;
  font: 700 12px/1.2 inherit; font-family: inherit; white-space: nowrap;
}
/* As abas que saíram do menu continuam existindo (links internos ainda abrem), só não aparecem. */
.menu-lateral .ml-oculto { display: none !important; }

/* Modo cliente da Negociação (tela virada para o cliente): sem navegação. */
body.neg-cliente .menu-lateral { display: none; }

/* ── celular e janela estreita: o menu vira gaveta ── */
.ml-burger { display: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid #D9D3E4; background: #FFFFFF; color: #660099; font-size: 20px; cursor: pointer; margin-right: 10px; flex: 0 0 40px; padding: 0; }
.ml-veu { display: none; }
.menu-lateral .ml-fechar { display: none; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; border: 1px solid #D9D3E4; background: #FFFFFF; color: #660099; font-size: 16px; cursor: pointer; padding: 0; align-items: center; justify-content: center; }
@media (max-width: 900px) {
  .ml-burger { display: inline-flex; align-items: center; justify-content: center; }
  .shell { display: block; }
  /* A gaveta cobre a topbar (que no celular quebra de altura) e traz o próprio "x": não depende de medir o cabeçalho. */
  .menu-lateral { position: fixed; top: 0; left: 0; bottom: 0; height: 100%; max-height: 100dvh; width: 280px; flex-basis: auto; transform: translateX(-102%);
    transition: transform .25s ease; box-shadow: 0 0 40px rgba(0,0,0,.25); z-index: 120; }
  .menu-lateral.col { width: 280px; }
  .menu-lateral.aberto { transform: none; }
  .menu-lateral .ml-recolher { display: none; }
  .menu-lateral .ml-fechar { display: inline-flex; }
  .menu-lateral.col .tab .nome { display: block; }
  .menu-lateral.col .tab { justify-content: flex-start; padding: 0 10px; }
  .menu-lateral.col .ml-topo b { display: block; }
  .menu-lateral.col .ml-topo { justify-content: space-between; padding: 14px 14px 8px; }
  .ml-veu.aberto { display: block; position: fixed; inset: 0; background: rgba(27,24,48,.45); z-index: 110; }
}
@media (prefers-reduced-motion: reduce) { .menu-lateral, .menu-lateral .tab { transition: none; } }

/* O encaixe da barra de estratégia: sem as abas no topo, o padrão é só a topbar. */
html .vd-barra { top: var(--vd-top, 69px); }

/* DENSIDADE EM NOTEBOOK (GV, 13/11/2026: "a tela em 100% de zoom está muito explodida… caber tudo
   na mesma tela sem barra de arrastar pro lado"). O CSS é todo em px, o menu lateral ocupa 252px e,
   em 1366px, sobravam 1050px de conteúdo — o kanban do funil (1320) e a tabela da Blindagem (1349)
   viravam barra de rolagem horizontal. Em tela de até 1600px o painel inteiro encolhe a 85% (80% até 1440px)
   (o mesmo que o zoom do navegador, só que de fábrica). Celular (<=900px) não muda. */
@media (min-width: 901px) and (max-width: 1600px) {
  html { zoom: .85; }
  .shell { min-height: calc((100vh / .85) - var(--ml-top, 69px)); }
  .menu-lateral { height: calc((100vh / .85) - var(--ml-top, 69px)); }
}
/* Notebook de 1366/1440px: 80% — a 85% ainda sobravam 29px no kanban do funil e 52px na tabela da Blindagem. */
@media (min-width: 901px) and (max-width: 1440px) {
  html { zoom: .8; }
  .shell { min-height: calc((100vh / .8) - var(--ml-top, 69px)); }
  .menu-lateral { height: calc((100vh / .8) - var(--ml-top, 69px)); }
}