* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--fonte-corpo);
  background: var(--bg);
  color: var(--texto);
  font-size: 15px;
  line-height: 1.45;
  /* Rolagem horizontal só deve acontecer dentro de containers que já a
     controlam de propósito (.kanban, table, .semana-seletor__tira) — isso
     é uma trava contra qualquer elemento estourar a largura da página
     inteira (ex.: uma linha de botões que ainda não quebra em telas estreitas). */
  overflow-x: hidden;
  /* Tira o "bounce"/rubber-band de rolagem vertical (trackpad no Mac, etc.) —
     sem isso, dá pra puxar a página pra baixo mesmo quando não sobra nenhum
     conteúdo, o que parece "a página rolando à toa". */
  overscroll-behavior-y: none;
}
h1, h2, h3, h4 { font-family: var(--fonte-titulo); margin: 0 0 .4em; font-weight: 700; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .6em; }
a { color: var(--dourado-escuro); }
button, input, select, textarea { font-family: inherit; font-size: inherit; }

/* ---------- scrollbars ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: padding-box; }

/* ---------- layout ---------- */
/* min-height: 100dvh (depois do 100vh, como fallback) — no celular, 100vh
   conta a altura da tela toda mesmo com a barra de endereço do navegador
   ocupando espaço, sobrando uma faixa "fantasma" que dá pra rolar sem
   nenhum conteúdo ali. dvh já desconta isso; navegador que não suporta
   ignora a linha e fica só com o 100vh de antes. */
#app { display: flex; min-height: 100vh; min-height: 100dvh; }

.sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--bg-card);
  border-right: 1px solid var(--borda);
  color: var(--texto);
  display: flex;
  flex-direction: column;
  padding: 20px 12px;
  transition: width .15s ease, padding .15s ease;
  overflow: hidden;
}
/* Recolher a barra lateral — no desktop encolhe a coluna pra width:0; no
   mobile (ver media query lá embaixo) o mesmo botão abre/fecha o menu, que
   por padrão fica fechado. */
@media (min-width: 861px) {
  /* Sem isso, a sidebar é só mais um item dentro do flex de #app — numa tela
     com scroll (ex.: perfil do cliente), ela cresce junto com o conteúdo e
     rola pra fora de vista com o resto da página, em vez de ficar fixa. */
  .sidebar { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; }
  #app.sidebar-recolhida .sidebar { width: 0; padding-left: 0; padding-right: 0; border-right: none; }

  /* Funil de Leads (ver funil.js) — trava o shell numa altura de viewport só
     nessa tela, pra o board de colunas ocupar exatamente o espaço que sobra
     via flexbox, em vez de crescer e empurrar a página inteira pra rolar
     verticalmente (o board já rola por dentro, coluna por coluna). Escopado
     ao desktop de propósito — no mobile a página inteira rolando continua
     sendo o comportamento certo (mesma lógica do .sidebar acima). */
  .main--kanban { height: 100vh; height: 100dvh; overflow: hidden; }
  .content--kanban { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
}
.sidebar__logo {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--dourado-escuro);
  padding: 0 10px 20px;
  letter-spacing: .5px;
}
.sidebar__logo-img { display: block; height: 28px; width: auto; margin: 0 0 20px 10px; align-self: flex-start; flex-shrink: 0; }
.login-card .sidebar__logo-img { height: 34px; margin: 0 0 20px; }
.sidebar__nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.sidebar__grupo { display: flex; flex-direction: column; gap: 4px; }
/* Área restrita (Gerência) — só uma linha fina em cima e um tom de fundo bem
   sutil (sangrando até a borda da sidebar, sem virar "cartão" com cantos
   arredondados) pra diferenciar sem chamar mais atenção que o resto do menu. */
.sidebar__grupo--restrito {
  margin: 10px -12px 0; padding: 10px 12px 6px; border-top: 1px solid var(--borda);
  background: var(--bg);
}
.sidebar__link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  color: var(--texto-secundario); text-decoration: none; cursor: pointer;
  border: none; background: transparent; text-align: left; width: 100%;
  font-size: .92rem; font-weight: 500;
}
.sidebar__link:hover { background: var(--bg); color: var(--texto); }
.sidebar__link.active { background: var(--dourado); color: var(--quase-preto); font-weight: 600; }
.icone-nav { flex-shrink: 0; }
.sidebar__nav-label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--texto-secundario); opacity: .7; padding: 14px 12px 2px;
}
.sidebar__nav-label:first-child { padding-top: 0; }
.sidebar__footer {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-top: 1px solid var(--borda); padding-top: 12px; margin-top: 12px;
  font-size: .82rem; color: var(--texto-secundario);
}
.sidebar__footer-links { display: flex; gap: 14px; margin-top: 4px; }
.sidebar__footer-links a, .sidebar__footer-links button { color: var(--dourado-escuro); background: none; border: none; cursor: pointer; padding: 0; font-size: .82rem; text-decoration: none; }

/* Switch dia/noite — trilha escura+lua (dark) ou dourada+sol (light), bolinha
   branca sempre do lado oposto ao ícone visível. */
.theme-switch {
  position: relative; width: 46px; height: 24px; border-radius: 999px;
  border: none; cursor: pointer; padding: 0; flex-shrink: 0;
  transition: background .2s ease;
}
.theme-switch[data-tema="dark"] { background: var(--quase-preto); }
.theme-switch[data-tema="light"] { background: var(--dourado); }
.theme-switch__icone {
  position: absolute; top: 50%; transform: translateY(-50%);
  color: #fff; display: flex; line-height: 0;
}
.theme-switch[data-tema="dark"] .theme-switch__icone { right: 6px; }
.theme-switch[data-tema="light"] .theme-switch__icone { left: 6px; }
.theme-switch__knob {
  position: absolute; top: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: left .2s ease;
}
.theme-switch[data-tema="dark"] .theme-switch__knob { left: 3px; }
.theme-switch[data-tema="light"] .theme-switch__knob { left: 25px; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; border-bottom: 1px solid var(--borda); background: var(--bg-card);
  position: sticky; top: 0; z-index: 5;
}
.content { padding: 20px 24px 40px; flex: 1; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-weight: 600; font-size: .88rem; cursor: pointer; white-space: nowrap;
}
.btn-primary { background: var(--dourado); color: var(--quase-preto); }
.btn-primary:hover { background: var(--dourado-escuro); }
.btn-secondary { background: var(--bg-card); border-color: var(--borda); color: var(--texto); }
.btn-secondary:hover { background: var(--bg); }
.btn-danger { background: var(--vermelho); color: #fff; }
.btn-ghost { background: transparent; border: none; color: var(--texto-secundario); }
.btn-sm { padding: 5px 10px; font-size: .8rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Ícone "?" de ajuda ao lado dos títulos de módulo — círculo discreto, não
   um botão/link comum (antes herdava sublinhado de <a> por cima do estilo
   de botão, ficava mal integrado ao lado do h1). */
.icone-ajuda {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--borda); color: var(--texto-secundario);
  font-size: .72rem; font-weight: 700; text-decoration: none;
  /* A caixa de avanço do glifo "?" já fica centralizada pelo flex, mas a
     tinta dele (grosso em cima/direita, fino embaixo) renderiza puxada pra
     esquerda dentro dessa caixa — sem isso o "?" parece descentralizado
     dentro do círculo. */
  transform: translateX(1.5px);
}
.icone-ajuda:hover { border-color: var(--dourado); color: var(--dourado-escuro); }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.field label { font-size: .8rem; font-weight: 600; color: var(--texto-secundario); }
/* Regra global (não só dentro de .field) — vários formulários no app usam
   inputs soltos fora do wrapper .field, e sem isso eles ficam com o fundo
   branco padrão do navegador no modo escuro. */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  padding: 8px 10px; border: 1px solid var(--borda); border-radius: var(--radius-sm);
  background: var(--bg-card); color: var(--texto);
}
input::placeholder, textarea::placeholder { color: var(--texto-secundario); opacity: .8; }
textarea { display: block; width: 100%; }
.field textarea { resize: vertical; min-height: 60px; }
.field-error { color: var(--vermelho); font-size: .78rem; }
/* Sinaliza campo obrigatório pra próxima etapa do funil (stage gate) — ver
   camposFaltantesProximaEtapa() em funil.js. Margem negativa compensa o
   padding pra não empurrar o grid ao lado. */
.field--obrigatoria { border: 1px solid var(--vermelho); border-radius: var(--radius-sm); padding: 4px 6px; margin: -4px -6px 8px -6px; }
fieldset.field--obrigatoria { border-color: var(--vermelho); margin: 0 0 12px; padding: 10px 12px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.checkbox-row { display: flex; align-items: center; gap: 8px; }
fieldset { border: 1px solid var(--borda); border-radius: var(--radius-sm); padding: 10px 12px; margin: 0 0 12px; }
legend { font-size: .8rem; font-weight: 600; color: var(--texto-secundario); padding: 0 4px; }

/* ---------- card ---------- */
.card { background: var(--bg-card); border: 1px solid var(--borda); border-radius: var(--radius); padding: 16px; box-shadow: var(--sombra); }
.card + .card { margin-top: 12px; }
.card-destaque { border: 2px solid var(--dourado); box-shadow: 0 2px 14px rgba(242,169,0,0.16); }

/* ---------- recursos ---------- */
/* auto-fill em vez de contagem fixa de colunas — lista curta e de tamanho
   variável (cresce conforme a gerência cadastra), não faz sentido travar num
   número de colunas como as grades de formulário acima. */
.recursos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.recursos-grid > .card { margin-top: 0; display: flex; flex-direction: column; }
.recurso-card__imagem { width: 100%; height: 120px; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 10px; }
.recurso-card__acoes { margin-top: auto; padding-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* ---------- seções de página (ex.: perfil do cliente) ---------- */
.section-title {
  display: flex;
  align-items: center;
  font-family: var(--fonte-titulo);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--texto-secundario);
  margin: 28px 0 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--borda);
}
.section-title:first-of-type { margin-top: 0; }

/* ---------- subtítulo leve dentro de um card (ex.: subseções de Indicações) ---------- */
.card-subtitulo {
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texto-secundario);
  margin: 16px 0 6px;
}
.card-subtitulo:first-of-type { margin-top: 4px; }

/* ---------- barra de progresso simples (ex.: playbook) ---------- */
.progresso { height: 6px; background: var(--bg); border-radius: 99px; overflow: hidden; margin: 6px 0 14px; }
.progresso__preenchido { height: 100%; background: var(--dourado); border-radius: 99px; transition: width .3s ease; }

/* ---------- métricas: stat tiles, filtro de período, barras ---------- */
.stats-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
/* min-width alto o bastante pra caber "R$ 12.345,67" sem quebrar/estourar —
   com pouco min-width (era 120px) o Painel Visão geral (8 tiles numa linha só)
   espremia o tile até cortar valores em reais. Com isso, quando não cabem
   todos numa linha, o flex-wrap já existente na .stats-row quebra pra
   próxima linha em vez de espremer. nowrap trava o valor numa linha só
   (break-word fica só como último recurso, se algum valor for gigante). */
.stat-tile { flex: 1; min-width: 180px; background: var(--bg); border: 1px solid var(--borda); border-radius: var(--radius-sm); padding: 10px 12px; }
.stat-tile__valor { font-family: var(--fonte-titulo); font-size: 1.5rem; font-weight: 800; line-height: 1.1; white-space: nowrap; overflow-wrap: break-word; }
.stat-tile__label { font-size: .74rem; color: var(--texto-secundario); margin-top: 2px; }
.stat-tile--clicavel { cursor: pointer; transition: border-color .15s ease; }
.stat-tile--clicavel:hover { border-color: var(--dourado); }


/* barra segmentada (composição promotores/neutros/detratores) — segmentos com 2px de
   respiro entre si (nunca colados), nunca rotulados em cima da própria barra. */
.nps-segmentada { display: flex; height: 14px; border-radius: 99px; overflow: hidden; gap: 2px; background: var(--borda); }
.nps-segmentada__seg { height: 100%; min-width: 3px; }
.nps-legenda { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; font-size: .78rem; color: var(--texto-secundario); }
.nps-legenda__item { display: flex; align-items: center; gap: 6px; }
.nps-legenda__dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* barra "geradas x convertidas" por momento — trilho + preenchimento com pontas
   arredondadas, ancorado na base (nunca flutuando), rótulo direto ao lado. */
.momento-linha { margin-bottom: 12px; }
.momento-linha__topo { display: flex; justify-content: space-between; font-size: .8rem; margin-bottom: 4px; }
.momento-linha__trilho { height: 10px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.momento-linha__preenchido { height: 100%; background: var(--dourado); border-radius: 4px; transition: width .3s ease; }

/* ---------- gráficos (Dashboards — public/js/charts.js) ---------- */
.bar-chart { display: flex; flex-direction: column; gap: 12px; }
.bar-chart__linha--clicavel { cursor: pointer; border-radius: var(--radius-sm); padding: 4px 6px; margin: -4px -6px; transition: background .15s ease; }
.bar-chart__linha--clicavel:hover { background: var(--bg); }
.bar-chart__topo { display: flex; justify-content: space-between; gap: 10px; font-size: .84rem; margin-bottom: 4px; }
.bar-chart__trilho { height: 10px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.bar-chart__preenchido { height: 100%; border-radius: 4px; transition: width .3s ease; }

.bar-chart-vertical { display: flex; align-items: flex-end; gap: 6px; height: 160px; overflow-x: auto; }
.bar-chart-vertical__col { flex: 1 0 32px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.bar-chart-vertical__valor { font-size: .7rem; color: var(--texto-secundario); margin-bottom: 4px; }
.bar-chart-vertical__barra { width: 60%; min-width: 8px; border-radius: 4px 4px 0 0; transition: height .3s ease; }
.bar-chart-vertical__col--clicavel { cursor: pointer; border-radius: var(--radius-sm); padding: 4px 2px; margin: -4px -2px; transition: background .15s ease; }
.bar-chart-vertical__col--clicavel:hover { background: var(--bg); }
.usuario-avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--texto-secundario);
  background-size: cover; background-position: center; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: .82rem;
}
.crop-viewport {
  position: relative; overflow: hidden; border-radius: 50%; border: 2px solid var(--borda);
  cursor: grab; touch-action: none; background: var(--bg);
}
.crop-viewport:active { cursor: grabbing; }
.crop-viewport img { position: absolute; left: 0; top: 0; user-select: none; pointer-events: none; }

.usuario-avatar__remover {
  position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--vermelho); color: #fff; border: none; font-size: .68rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}

.bar-chart-vertical__avatar {
  width: 28px; height: 28px; min-width: 28px; border-radius: 50%; margin-top: 6px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: .72rem; text-transform: uppercase;
  background-size: cover; background-position: center; flex-shrink: 0;
}
.bar-chart-vertical__label { font-size: .66rem; margin-top: 6px; white-space: nowrap; }

.donut-chart { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.donut-chart__legenda { display: flex; flex-direction: column; gap: 8px; font-size: .84rem; }
.donut-chart__legenda-item { display: flex; align-items: center; gap: 8px; }
.donut-chart__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* Funil em pirâmide — barras sempre centralizadas na mesma faixa (2ª coluna
   do grid), rótulo com % à esquerda. A "linha" fica atrás da barra o tempo
   todo; só aparece visível no trecho que a barra (mais estreita) não cobre,
   criando o efeito de "conector" do rótulo até a barra sem cálculo manual
   de posição. */
.funil-piramide { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; row-gap: 2px; align-items: center; }
.funil-piramide__label {
  text-align: right; padding-right: 12px; font-size: .84rem; color: var(--texto-secundario);
  background: none; border: none; cursor: pointer; font-family: inherit;
}
.funil-piramide__label b { color: var(--texto); font-size: .92rem; }
.funil-piramide__label:hover, .funil-piramide__label:hover b { color: var(--dourado-escuro); }
.funil-piramide__track { position: relative; height: 38px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.funil-piramide__linha { position: absolute; left: 0; right: 0; height: 1px; background: var(--borda); }
.funil-piramide__barra {
  position: relative; height: 30px; min-width: 3%; border-radius: 5px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  color: #fff; font-size: .78rem; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: filter .15s ease, transform .15s ease, height .15s ease;
}
.funil-piramide__track:hover .funil-piramide__barra,
.funil-piramide__track.selecionada .funil-piramide__barra { filter: brightness(1.1); transform: scaleY(1.08); }
/* O trilho também precisa crescer pros mesmos 44px da barra — só a barra
   crescer (sem o trilho acompanhar) fazia ela estourar o trilho de 38px e
   grudar na linha de cima, sem distância nenhuma entre as duas. */
.funil-piramide__track--destaque { height: 44px; margin-top: 4px; }
.funil-piramide__track--destaque .funil-piramide__barra { height: 44px; font-size: .92rem; box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 3px var(--dourado); }
.funil-piramide__track--destaque .funil-piramide__linha { display: none; }

.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 860px) {
  .chart-grid { grid-template-columns: 1fr; }
}

/* ---------- cards de etapa (Dashboards → Funil, por coluna) ---------- */
.funil-detalhe { margin-top: 16px; max-width: 320px; }
.etapa-card { background: var(--bg); border: 1px solid var(--borda); border-radius: var(--radius-sm); padding: 12px 14px; }
.etapa-card__titulo { font-size: .82rem; font-weight: 700; margin-bottom: 8px; }
.etapa-card__principal { display: flex; align-items: baseline; gap: 6px; margin-bottom: 10px; }
.etapa-card__numero { font-family: var(--fonte-titulo); font-size: 1.7rem; font-weight: 800; line-height: 1; }
.etapa-card__linha { display: flex; justify-content: space-between; gap: 8px; font-size: .78rem; color: var(--texto-secundario); margin-bottom: 4px; }
.etapa-card__conversao { font-size: .86rem; font-weight: 700; margin-top: 8px; }

/* ---------- badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px; font-size: .74rem; font-weight: 600; }
.badge-verde { background: #E3F3E9; color: var(--verde); }
.badge-amarelo { background: #FCF1D6; color: #916500; }
.badge-vermelho { background: #FBE4E2; color: var(--vermelho); }
.badge-neutro { background: var(--bg); color: var(--texto-secundario); border: 1px solid var(--borda); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-verde { background: var(--verde); }
.dot-amarelo { background: var(--amarelo); }
.dot-vermelho { background: var(--vermelho); }

/* No escuro, os fundos claros dos badges (pensados pro tema claro) destoam do resto da
   página — troca por um tom escuro da própria cor, com o texto mais claro por cima. */
:root[data-theme="dark"] {
  --badge-verde-bg: rgba(46, 158, 91, .22); --badge-verde-fg: #6FD99A;
  --badge-amarelo-bg: rgba(224, 164, 0, .22); --badge-amarelo-fg: #F0C24B;
  --badge-vermelho-bg: rgba(216, 69, 60, .24); --badge-vermelho-fg: #FF8F86;
}
:root[data-theme="dark"] .badge-verde { background: var(--badge-verde-bg); color: var(--badge-verde-fg); }
:root[data-theme="dark"] .badge-amarelo { background: var(--badge-amarelo-bg); color: var(--badge-amarelo-fg); }
:root[data-theme="dark"] .badge-vermelho { background: var(--badge-vermelho-bg); color: var(--badge-vermelho-fg); }

/* ---------- kanban ---------- */
/* No desktop (.content--kanban acima), o board fica dentro de uma coluna com
   altura travada — flex:1 + min-height:0 faz ele ocupar só o espaço que
   sobra, e align-items:stretch estica as colunas pra essa mesma altura, sem
   precisar de nenhum valor calculado. No mobile isso não se aplica (o
   .content--kanban ali não trava altura), então o max-height de fallback
   embaixo assume o controle. */
.kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: stretch; flex: 1; min-height: 0; }
.kanban__col {
  background: var(--bg-card); border: 1px solid var(--borda); border-radius: var(--radius);
  width: 260px; flex-shrink: 0; display: flex; flex-direction: column;
}
.kanban__col-header { padding: 10px 12px; border-bottom: 1px solid var(--borda); display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: .85rem; }
.kanban__col-body { padding: 8px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.kanban__col-body.dragover { background: #FBF0D0; }
.kanban__col--descarte { border-color: var(--vermelho); }

.lead-card {
  background: var(--bg-card); border: 1px solid var(--borda); border-left-width: 4px; border-radius: var(--radius-sm);
  padding: 10px; cursor: grab; font-size: .84rem;
}
.lead-card:hover { border-color: var(--dourado); }
.lead-card__empresa { font-weight: 700; margin-bottom: 3px; }
.lead-card__meta { color: var(--texto-secundario); font-size: .76rem; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.lead-card__aviso { color: var(--vermelho); font-size: .74rem; margin-top: 4px; font-weight: 600; }

/* ---------- carteira (não-kanban) ---------- */
.carteira-list { display: flex; flex-direction: column; gap: 8px; }
.carteira-row {
  /* larguras fixas (não fr/auto) — cada linha é um grid independente; com unidades
     flexíveis, o tamanho de cada coluna dependia do conteúdo daquela linha específica
     (ex.: nome do cliente), desalinhando os badges entre uma linha e outra. */
  display: grid; grid-template-columns: 2fr 130px 180px; gap: 10px; align-items: center;
  background: var(--bg-card); border: 1px solid var(--borda); border-radius: var(--radius-sm);
  padding: 10px 14px; cursor: pointer; font-size: .86rem;
}
.carteira-row:hover { border-color: var(--dourado); }
.carteira-row__empresa { font-weight: 700; }
.carteira-row__sub { color: var(--texto-secundario); font-size: .78rem; }

/* ---------- table ---------- */
table { width: 100%; border-collapse: collapse; font-size: .86rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borda); }
th { color: var(--texto-secundario); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }

/* Tabela com cabeçalho em 2 linhas agrupando colunas por tema (ex.: Painel do
   Diretor — Entrega/Engajamento/Comercial). O cabeçalho ganha um fundo cinza
   mais escuro que o card, pra separar visualmente da área de dados; e uma
   linha vertical fina marca onde um grupo de colunas termina e o outro começa
   (nas duas linhas do cabeçalho e em cada linha do corpo, senão o divisor some
   assim que os dados começam). */
.tabela-comparativa thead th { background: var(--bg); }
.tabela-comparativa thead tr:first-child th {
  font-size: .82rem; font-weight: 700; text-transform: none; letter-spacing: 0;
  color: var(--texto);
}
.tabela-comparativa thead tr:last-child th { border-bottom: 2px solid var(--borda); }
.tabela-comparativa thead tr:first-child th:nth-child(2),
.tabela-comparativa thead tr:first-child th:nth-child(3),
.tabela-comparativa thead tr:first-child th:nth-child(4),
.tabela-comparativa thead tr:last-child th:nth-child(2),
.tabela-comparativa thead tr:last-child th:nth-child(6),
.tabela-comparativa thead tr:last-child th:nth-child(7),
.tabela-comparativa tbody td:nth-child(2),
.tabela-comparativa tbody td:nth-child(6),
.tabela-comparativa tbody td:nth-child(7) {
  border-left: 1px solid var(--borda);
}

/* ---------- modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(31,31,31,.5); display: flex; align-items: flex-start;
  justify-content: center; padding: 40px 16px; overflow-y: auto; z-index: 50;
}
.modal {
  background: var(--bg-card); border-radius: var(--radius); width: 100%; max-width: 620px;
  padding: 20px; box-shadow: var(--sombra);
}
.modal__header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.modal__close { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--texto-secundario); }

/* ---------- filters bar ---------- */
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; align-items: flex-end; }
.filters .field { margin-bottom: 0; min-width: 150px; }

/* ---------- checklist ---------- */
.checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.checklist li { display: flex; align-items: center; gap: 8px; font-size: .86rem; }
.checklist li.done { text-decoration: line-through; color: var(--texto-secundario); }

/* ---------- timeline ---------- */
.timeline { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--borda); }
.timeline li { padding: 0 0 14px 16px; position: relative; }
.timeline li::before { content: ''; position: absolute; left: -6px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--dourado); }
.timeline .data { font-size: .74rem; color: var(--texto-secundario); }

/* ---------- seletor de semana (Módulo 3) ---------- */
/* Grid de 3 colunas simétricas (1fr/auto/1fr) — a navegação (setas+chips)
   fica sempre centralizada na linha toda, "Ir para semana atual" à direita,
   independente desse botão existir ou não (ele some quando já está na
   semana de hoje; sem a 3ª coluna reservada, a navegação puxava pra
   esquerda toda vez que o botão sumia). */
.semana-seletor {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px;
  margin: 20px 0 16px; padding: 12px 16px; border: 1px solid var(--borda);
  border-radius: var(--radius); background: var(--bg-card);
}
.semana-seletor__nav { grid-column: 2; display: flex; align-items: center; gap: 6px; justify-self: center; min-width: 0; }
.semana-seletor__acoes { grid-column: 3; justify-self: end; }
.semana-seletor__tira { display: flex; gap: 6px; overflow-x: auto; padding: 2px; }
.semana-chip {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 80px; padding: 6px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--borda); background: var(--bg-card); cursor: pointer;
  font-size: .74rem; color: var(--texto-secundario); flex-shrink: 0;
}
.semana-chip:hover { border-color: var(--dourado); }
.semana-chip__num { font-family: var(--fonte-titulo); font-weight: 700; font-size: .95rem; color: var(--texto); }
.semana-chip.ativa { background: var(--dourado); border-color: var(--dourado); }
.semana-chip.ativa .semana-chip__num, .semana-chip.ativa { color: var(--quase-preto); }
.semana-chip.hoje:not(.ativa) { border-color: var(--dourado); border-width: 2px; }
.semana-chip.desabilitada { opacity: .3; cursor: not-allowed; pointer-events: none; }

/* ---------- weekly board (Módulo 3) ---------- */
.semanal-blocos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.semanal-bloco { background: var(--bg-card); border: 1px solid var(--borda); border-radius: var(--radius); padding: 12px; min-height: 160px; }
.semanal-bloco h3 { display: flex; justify-content: space-between; }
.item-execucao { background: var(--bg); border: 1px solid var(--borda); border-radius: var(--radius-sm); padding: 8px 10px; margin-bottom: 6px; font-size: .84rem; }
.item-execucao__meta { font-size: .72rem; color: var(--texto-secundario); margin-top: 4px; display: flex; justify-content: space-between; align-items: center; }
.item-execucao.parado { border-color: var(--vermelho); }

/* ---------- utility ---------- */
.muted { color: var(--texto-secundario); }
.flex { display: flex; gap: 10px; align-items: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.grid-cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.grid-cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
/* dentro do grid o espaçamento já vem do gap — a margem de .card + .card (pensada pra
   pilha vertical) só serve aqui pra desalinhar o topo dos cards de uma mesma linha. */
.grid-cols-2 > .card + .card,
.grid-cols-3 > .card + .card { margin-top: 0; }
.empty-state { text-align: center; padding: 40px 20px; color: var(--texto-secundario); }
.tag { display: inline-block; background: var(--bg); border: 1px solid var(--borda); border-radius: 99px; padding: 2px 9px; font-size: .74rem; margin: 0 4px 4px 0; }
.toast {
  position: fixed; bottom: 20px; right: 20px; background: var(--quase-preto); color: #fff;
  padding: 10px 16px; border-radius: var(--radius-sm); font-size: .86rem; z-index: 100; box-shadow: var(--sombra);
}
.toast.erro { background: var(--vermelho); }

/* ---------- login ---------- */
.login-screen { min-height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; background: var(--bg); }
.login-card { background: var(--bg-card); padding: 32px; border-radius: var(--radius); width: 100%; max-width: 360px; border: 1px solid var(--borda); box-shadow: var(--sombra); }
.login-card .sidebar__logo { color: var(--dourado-escuro); padding: 0 0 20px; }

/* ---------- mobile ---------- */
@media (max-width: 860px) {
  #app { flex-direction: column; }
  /* A faixa horizontal de antes ocupava uma linha inteira no topo mesmo sem
     ninguém ter pedido pra ver o menu. Agora ela some por padrão e vira um
     painel que abre por baixo do topbar, no mesmo botão ☰ que já recolhe a
     sidebar no desktop — ver o onClick dele em layout.js. */
  .sidebar {
    display: none;
    width: 100%; flex-direction: column; align-items: stretch;
    padding: 20px 12px; position: sticky; top: 0; z-index: 10;
  }
  #app.mobile-nav-aberta .sidebar { display: flex; }

  .content { padding: 16px; }
  .form-grid, .grid-cols-2, .grid-cols-3, .semanal-blocos { grid-template-columns: 1fr; }
  .carteira-row { grid-template-columns: 1fr; gap: 4px; }

  /* .content--kanban não trava altura aqui (só no desktop, acima) — página
     inteira rola normalmente, então as colunas do funil precisam do próprio
     teto pra não ficar com card nenhum visível numa lista infinita. */
  .kanban__col { max-height: calc(100vh - 250px); }

  /* Cabeçalhos de página (título + botões de ação) e grupos de botões — sem
     wrap, uma tela estreita estourava a largura em vez de descer pra 2ª linha. */
  .flex-between { flex-wrap: wrap; gap: 10px; row-gap: 10px; align-items: flex-start; }
  .flex { flex-wrap: wrap; row-gap: 8px; }

  /* Tabelas (ex.: Usuários e Aderência em Gerência) não tinham rolagem
     própria — em tela estreita, a única opção era estourar a página inteira
     de lado. `display:block` no <table> vira um container com scroll
     horizontal só dele, sem mudar nada em telas largas (fora dessa media query). */
  table { display: block; overflow-x: auto; max-width: 100%; }

  .modal-backdrop { padding: 16px; }

  /* Coluna do rótulo mais estreita — sobra mais espaço pra barra do funil,
     senão etapas com valor baixo (ex.: só 1 lead) ficavam finas demais. */
  .funil-piramide { grid-template-columns: minmax(90px, 140px) 1fr; }
  .funil-piramide__label { font-size: .76rem; }
}