/* ═══════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-line);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  z-index: 50;
  transition: transform var(--transition), width var(--transition), min-width var(--transition);
}

.sidebar-brand {
  padding: 24px 20px 20px;
  border-bottom: 1px solid var(--sidebar-line);
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-brand-ring {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}

.sidebar-brand-name {
  font-family: var(--fonte);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  line-height: 1;
}

/* botão de encolher/expandir a lateral (só desktop): bolinha flutuante no
   meio da altura, metade pra fora da barra, em cima da divisa com o conteúdo */
.sidebar-collapse-btn {
  position: absolute;
  top: 50%;
  right: -13px;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  z-index: 60;
}
.sidebar-collapse-btn:hover { color: var(--brand); border-color: var(--brand-light); box-shadow: var(--shadow); }

/* ── lateral ENCOLHIDA (classe no body; vira uma régua só de ícones).
     Só no desktop: no celular a lateral já é gaveta. ── */
@media (min-width: 769px) {
  body.sidebar-collapsed { --sidebar-w: 76px; }

  body.sidebar-collapsed .sidebar-brand {
    flex-direction: column;
    gap: 12px;
    padding: 20px 10px 16px;
  }
  body.sidebar-collapsed .sidebar-brand-name { display: none; }
  body.sidebar-collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }

  body.sidebar-collapsed .nav-label { display: none; }
  body.sidebar-collapsed .nav-item {
    justify-content: center;
    gap: 0;
    padding: 11px 0;
    font-size: 0;      /* esconde o rótulo; o ícone tem tamanho próprio */
  }
  body.sidebar-collapsed .nav-sub { display: none; }

  body.sidebar-collapsed .identity-row { justify-content: center; padding: 8px 0; }
  body.sidebar-collapsed .identity-info,
  body.sidebar-collapsed .identity-switch { display: none; }
}

@media (max-width: 768px) {
  .sidebar-collapse-btn { display: none; }
  /* Mesmo respiro do .agency-inner (05-agencia.css): a barra de navegação
     fixa embaixo não pode comer o clique do último botão do espaço do
     cliente. */
  .main { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

.sidebar-logo {
  font-family: var(--fonte);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--brand);
  line-height: 1.2;
}

.sidebar-sub {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 3px;
}

.sidebar-nav {
  flex: 1;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sidebar-muted);
  padding: 10px 10px 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--sidebar-text);
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: all var(--transition);
  letter-spacing: 0.01em;
}

.nav-item:hover { background: var(--sidebar-hover); color: #fff; }

.nav-item.active {
  background: var(--grad-brand);
  color: #fff;
  font-weight: 600;
}

.nav-item .nav-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.7;
}

.nav-item.active .nav-icon { opacity: 1; }

.sidebar-footer {
  padding: 16px 10px;
  border-top: 1px solid var(--sidebar-line);
}









/* Mode toggle in sidebar footer */
.mode-group {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3px;
  display: flex;
  gap: 2px;
  height: 34px;          /* mesma altura do botão de link e do de imprimir */
  align-items: stretch;
}

.mode-btn {
  padding: 0 12px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--fonte);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;   /* "Ver como cliente" não pode quebrar em duas linhas */
  cursor: pointer;
  transition: all var(--transition);
  background: transparent;
  color: var(--text-muted);
}

.mode-btn:hover { color: var(--brand); }

.mode-btn.active {
  background: var(--brand);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.sidebar-print-btn {
  width: 100%;
  padding: 8px 12px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--fonte);
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  gap: 7px;
  letter-spacing: 0.02em;
}

.sidebar-print-btn:hover { border-color: var(--brand-light); color: var(--brand); }

/* ── Consumo do plano na lateral (versão compacta do cartão Plano) ── */
.sidebar-uso {
  display: block; width: 100%;
  margin-bottom: 10px; padding: 10px 12px;
  background: var(--sidebar-hover);
  border: 1px solid var(--sidebar-line);
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--fonte);
  text-align: left;
  transition: border-color 0.15s;
}
.sidebar-uso:hover { border-color: var(--sidebar-muted); }
.sidebar-uso-top {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--sidebar-text);
  margin-bottom: 6px;
}
.sidebar-uso-top #sidebarUsoPct { color: var(--sidebar-muted); letter-spacing: 0; }
.sidebar-uso-track {
  height: 5px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
/* A barra usa SEMPRE o gradiente da logo (laranja→rosa→roxo). O aviso de
   espaço acabando fica por conta do botão de upgrade em destaque e da
   porcentagem — não por trocar a cor da marca. */
.sidebar-uso-fill {
  height: 100%; width: 0; border-radius: 999px;
  background: var(--grad-brand);
  transition: width 0.4s ease;
}
.sidebar-uso-texto {
  margin-top: 6px;
  font-size: 10.5px; color: var(--sidebar-muted);
}

/* ── SELO ÓRBITTA INSIDER ──────────────────────────────────────────
   A marca de quem entrou na Primeira Órbita. Usa o AZUL DO MANUAL
   (#00C2FF, o mesmo do tipo "Feed") em vez de um azul inventado: é a
   única cor de apoio da identidade que ainda não tem função de estado,
   então dá pra usar como distintivo sem colidir com "sucesso",
   "aviso" ou "erro".
   Fundo sólido em gradiente de propósito — assim o mesmo selo funciona
   na sidebar escura e num cartão branco, sem precisar de duas versões.
   O ícone é o anel com satélite, o desenho da própria logo. */
.selo-insider {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #00C2FF 0%, #0074E0 100%);
  color: #fff;
  font-family: var(--fonte);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.02em; text-transform: none;
  line-height: 1.5; white-space: nowrap;
  box-shadow: 0 1px 6px rgba(0, 146, 204, 0.35);
}
.selo-insider svg { width: 12px; height: 12px; flex-shrink: 0; }

/* variante discreta, para quando o selo aparece dentro de um texto
   corrido em fundo claro e o gradiente pesaria demais */
.selo-insider.suave {
  background: var(--feed-bg);
  color: #0074E0;
  box-shadow: none;
  border: 1px solid rgba(0, 116, 224, 0.22);
}

/* no cartão do Plano, o selo substitui o rótulo "PLANO X" — que é
   maiúsculo e espaçado; o selo não pode herdar isso */
.sidebar-uso-top .selo-insider { text-transform: none; letter-spacing: 0.02em; }

/* ── VISTO DE AGÊNCIA VERIFICADA ───────────────────────────────────
   O disco com o visto que fica COLADO no nome da agência (utils.js
   #vistoInsiderHTML). Só a agência ganha visto — nunca o cliente; no
   dia em que os dois tiverem, ele deixa de significar qualquer coisa.

   Pintado com o GRADIENTE DA LOGO (--grad-brand): a única cor que
   ninguém mais tem. O laranja fica no canto de cima, e o traço branco
   corre pelo meio, em cima do rosa — que é onde o branco tem contraste
   de sobra. Por isso o gradiente é 135°, e não outro ângulo.

   Tudo em CSS, sem gradiente dentro do SVG: o visto aparece várias
   vezes na mesma tela, e gradiente de SVG precisa de um id por peça —
   id repetido é o tipo de bug que só aparece na terceira tela.

   O tamanho é em `em`, não em pixel: o visto entra ao lado de texto de
   14px (a saudação do cliente) e de 10px (a legenda da conversa e o
   crachá). Em pixel fixo ele ficaria grande demais nas legendas — em
   `em` ele nasce do tamanho da letra vizinha e nunca desalinha. */
.visto-insider {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.05em; height: 1.05em; flex-shrink: 0;
  margin-left: 0.3em; vertical-align: -0.16em;
  border-radius: 50%;
  background: var(--grad-brand);
}
.visto-insider svg { width: 0.72em; height: 0.72em; display: block; }

/* grudado numa foto/logo redonda: cresce, ganha o anel do fundo pra
   não encostar na borda da foto e vai pro canto de baixo, o mesmo
   lugar do visto na foto de perfil de qualquer rede */
.visto-insider.na-foto {
  position: absolute; right: -2px; bottom: -2px;
  width: 19px; height: 19px; margin: 0; vertical-align: 0;
  box-shadow: 0 0 0 2.5px var(--surface);
}
.visto-insider.na-foto svg { width: 12px; height: 12px; }

/* sobre fundo escuro (barra lateral): o anel acompanha o fundo de lá */
.visto-insider.claro { box-shadow: 0 0 0 2px var(--sidebar-bg); }

/* explicação do programa no cartão Plano de Configurações */
.cfg-insider-nota {
  margin: 10px 0 2px;
  font-size: 12.5px; line-height: 1.6; color: var(--text-secondary);
}
.cfg-insider-nota a { color: var(--brand); text-decoration: none; margin-left: 4px; }
.cfg-insider-nota a:hover { text-decoration: underline; }
/* Discreto no dia a dia; ganha o gradiente da marca (.uso-destaque, ligado
   pelo pintarUsoSidebar) só quando o uso passa de 85% — aí sim é hora de
   chamar pra ação. */
.sidebar-uso-upgrade {
  display: block; width: 100%;
  margin-top: 9px; padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--sidebar-line); border-radius: 999px;
  font-family: var(--fonte); font-size: 11px; font-weight: 600;
  letter-spacing: 0.03em; color: var(--sidebar-muted);
  cursor: pointer;
  transition: filter 0.15s, color 0.15s, border-color 0.15s;
}
.sidebar-uso-upgrade:hover { color: var(--sidebar-text); border-color: var(--sidebar-muted); }
.sidebar-uso-upgrade.uso-destaque {
  background: var(--grad-brand);
  border-color: transparent; color: #fff;
}
.sidebar-uso-upgrade.uso-destaque:hover { filter: brightness(1.12); }
/* na régua encolhida não há largura pra barra */
body.sidebar-collapsed .sidebar-uso { display: none !important; }

.sidebar-legal-links {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--sidebar-line);
  text-align: center;
  font-size: 10px;
}
.sidebar-legal-links a { color: var(--sidebar-muted); text-decoration: none; }
.sidebar-legal-links a:hover { color: var(--sidebar-text); text-decoration: underline; }
.sidebar-legal-links span { color: var(--sidebar-line); margin: 0 4px; }

/* ═══════════════════════════════════════════════════
   MAIN CONTENT
   ═══════════════════════════════════════════════════ */
.main {
  margin-left: var(--sidebar-w);
  transition: margin-left var(--transition);
  flex: 1;
  min-width: 0;   /* item de flex encolhe: sem isso o conteúdo empurra a
                     largura e a tela ganha rolagem lateral no celular */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ═══════════════════════════════════════════════════
   TOP BAR
   ═══════════════════════════════════════════════════ */
.top-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 30;
}

.month-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.month-nav-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all var(--transition);
  line-height: 1;
}

.month-nav-btn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-faint); }

.month-title {
  font-family: var(--fonte);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  min-width: 200px;
  text-align: center;
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Stats pills */
.stats-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.stat-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 12px;
  color: var(--text-secondary);
}

.stat-pill strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.stat-pill.highlight strong { color: var(--brand); }
.stat-pill.success strong   { color: var(--success); }

/* contagem zerada: continua na linha (barra não "pula") mas sai do caminho */
.stat-pill.is-zero { opacity: 0.45; }
.stat-pill.is-zero strong { color: var(--text-muted); }

/* Progress inline */
.progress-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-track {
  width: 80px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--grad-brand);
  border-radius: 2px;
  transition: width 0.5s ease;
}

.progress-pct {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* View toggle */
.view-toggle {
  display: flex;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
}

.view-btn {
  padding: 5px 12px;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--fonte);
  display: flex;
  align-items: center;
  gap: 5px;
}

.view-btn.active {
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

/* ═══════════════════════════════════════════════════
   FILTROS (botão + painel suspenso)
   Mora no canto da barra do mês. O painel também faz o papel de
   legenda: cada tipo carrega a bolinha da cor usada no calendário.
   ═══════════════════════════════════════════════════ */
.filter-menu { position: relative; }

.filter-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--fonte);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.filter-btn:hover { border-color: var(--brand-light); color: var(--brand); }
.filter-menu.open .filter-btn { border-color: var(--brand); color: var(--brand); background: var(--brand-faint); }

/* filtro ligado: o botão fica na cor da marca, cheio, pra não passar despercebido */
.filter-btn.is-on {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.filter-btn.is-on:hover { color: #fff; }

.filter-count {
  display: none;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.22);
  font-size: 11px;
  font-weight: 600;
  line-height: 17px;
  text-align: center;
}
.filter-btn.is-on .filter-count { display: inline-block; }

.filter-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: 300px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.filter-menu.open .filter-panel { display: block; }

.filter-group + .filter-group { margin-top: 14px; }

.filter-group-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

.filter-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.filter-hint { font-size: 11px; color: var(--text-muted); }

.filter-clear {
  padding: 4px 10px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--fonte);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
}
.filter-clear:hover { border-color: var(--brand); color: var(--brand); }

/* Barra de aviso "filtro ligado" — só existe quando algo está escondido */
.active-filter-bar {
  display: none;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 28px;
  background: var(--brand-faint);
  border-bottom: 1px solid var(--border);
}

.active-filter-bar.visible { display: flex; }

.afb-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
}

.afb-chips { display: flex; gap: 6px; flex-wrap: wrap; }

.afb-chip {
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--brand);
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
}

.afb-clear {
  margin-left: auto;
  padding: 3px 10px;
  background: none;
  border: 1px solid var(--brand-light);
  border-radius: var(--radius-sm);
  font-family: var(--fonte);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--brand);
  cursor: pointer;
  transition: all var(--transition);
}
.afb-clear:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

.chip-group {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 20px;
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--fonte);
  letter-spacing: 0.01em;
}

.chip:hover { border-color: var(--brand-light); color: var(--brand); }

.chip.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}


/* ── "MAIS FUNÇÕES" (resposta do assistente — setup.js#aplicarMenu) ────
   Quem respondeu que já usa outro sistema para acompanhar quem não fechou
   não perde o CRM: ele DESCE para o fim da lateral, sob um rótulo
   próprio. Sumir seria ensinar que a função não existe — e um dia ela vai
   querer. Aqui ela continua a um clique, só não disputa a atenção de todo
   dia com Clientes e Agenda.
   `order` funciona porque a .sidebar-nav é flex em coluna; o rótulo é um
   pseudo-elemento do próprio item, para não precisar de HTML novo. */
body.menu-crm-abaixo #navCRM { order: 90; margin-top: 26px; position: relative; opacity: .8; }
body.menu-crm-abaixo #navCRM::before {
  content: 'Mais funções';
  position: absolute; left: 10px; top: -18px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sidebar-muted);
}
body.menu-crm-abaixo #navCRM:hover { opacity: 1; }
/* na régua de ícones não cabe rótulo — o item só desce */
body.sidebar-collapsed.menu-crm-abaixo #navCRM::before { display: none; }