:root {
  /* Tamanho único de todo botão de ação (pedido do Sérgio, 2026-09-24): a
     largura mínima é a do maior texto de botão ("Buscar dados na
     Receita") — texto maior que isso alarga o botão, nunca o contrário. */
  --botao-altura: 2.625rem;
  --botao-largura: 13rem;
  --bg: #faf9f4;
  --bg-soft: #eef3ec;
  --surface: #ffffff;
  --ink: #10140f;
  --muted: #5c6660;
  --muted-soft: #8a938d;
  --border: #e2e4dd;

  --green: #00501f;
  --green-dark: #003814;
  --green-soft: #eaf1ea;
  --gold: #b8862e;

  --stage-novo: #8a938d;
  --stage-diagnostico: #00501f;
  --stage-proposta: #b8862e;
  --stage-negociacao: #a15c2f;
  --stage-ganho: #2f8f4e;
  --stage-perdido: #b3413a;

  --font-display: "Manrope", -apple-system, "Segoe UI", sans-serif;
  --font-body: "Manrope", -apple-system, "Segoe UI", sans-serif;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 20, 15, 0.06), 0 4px 12px rgba(16, 20, 15, 0.06);
  --shadow-hover: 0 2px 4px rgba(16, 20, 15, 0.08), 0 10px 24px rgba(16, 20, 15, 0.1);

  /* Escala de fonte única para todo o app — evita tamanhos ad-hoc espalhados
     pelos componentes. --fs-heading é só pra títulos de seção (h3), nunca
     pra texto de card/lista. */
  --fs-xs: 0.78rem;
  --fs-sm: 0.85rem;
  --fs-base: 0.92rem;
  --fs-heading: 1.05rem;
  --fs-titulo-pagina: 1.25rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0 0 1rem;
  color: var(--ink);
}

a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-dark); text-decoration: underline; }

button, .btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-base);
  border: none;
  border-radius: 999px;
  padding: 0.55rem 1.2rem;
  cursor: pointer;
  background: var(--green);
  color: #fff;
  transition: background 0.15s ease, transform 0.15s ease;
}
button:hover, .btn:hover { background: var(--green-dark); text-decoration: none; }
button:active { transform: translateY(1px); }

/* Padrão de tamanho de todos os botões de ação — principal (verde),
   secundário (contorno), perigo (vermelho) e IA (dourado): mesma altura,
   mesma largura mínima, mesma letra e mesmo formato. */
button, .btn, .btn-secundario, .btn-perigo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: var(--botao-largura);
  height: var(--botao-altura);
  padding: 0 1rem;
  border-radius: 999px;
  font-size: var(--fs-sm);
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  vertical-align: middle;
}
/* Ícones e controles que não são botão de ação ficam com o tamanho deles
   (cada um define o próprio logo abaixo, no arquivo). */
.data-table__excluir, .data-table__editar, .kanban-card__excluir, .icon-btn,
.negocio-lista__proposta, .kanban-card__proposta, .site-sidebar__dropdown-toggle,
.site-sidebar__footer form button, .btn-whatsapp {
  min-width: 0;
  min-height: 0;
  height: auto;
}
.ql-toolbar button { min-width: 0; min-height: 0; }
/* Botão dentro de tabela (Revogar/Excluir na lista de chaves de API) não
   alarga a coluna: fica do tamanho do texto. */
.data-table :is(button, .btn, .btn-secundario, .btn-perigo) { min-width: 0; }

/* Barra de ações do fim dos formulários: [Salvar] [Cancelar] [Excluir]
   (crm/_acoes_formulario.html). No celular, um embaixo do outro. */
.form-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1.25rem; }
.form-acoes .btn-secundario { margin-top: 0; }
.form-acoes__excluir { margin: 0; }
@media (max-width: 600px) {
  /* No celular a largura mínima não cabe (dois botões + título passam dos
     ~360px da tela): os botões ficam do tamanho do texto, e os das barras
     de ação ocupam a largura toda, um embaixo do outro. */
  /* Texto longo ("Confirmar e enviar para 120 destinatário(s)") quebra de
     linha em vez de passar da largura da tela. */
  button, .btn, .btn-secundario, .btn-perigo { min-width: 0; white-space: normal; height: auto; min-height: var(--botao-altura); }
  .page-header, .page-header__acoes { flex-wrap: wrap; }
  .form-acoes { flex-direction: column; align-items: stretch; }
  .form-acoes > *, .form-acoes__excluir button { width: 100%; }
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Menu flutuante (barra lateral fixa) */
.site-logo {
  position: fixed;
  left: 0;
  top: 0;
  height: 5rem;
  display: flex;
  align-items: center;
  padding-left: 1.25rem;
  background: var(--bg);
  z-index: 21;
}
.site-logo img { height: 52px; display: block; }

.site-topbar {
  position: fixed;
  left: 100px;
  right: 0;
  top: 0;
  height: 5rem;
  /* Só a busca mora aqui agora (o título virou uma legenda que rola com
     o conteúdo, embaixo desta barra fixa) — um único item de largura
     modesta (300px) centraliza sem risco de disputar espaço com a logo,
     diferente de quando um título de texto livre também tentava caber
     aqui. */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  z-index: 15;
  pointer-events: none;
}

/* O topbar tem pointer-events:none (só texto por trás, não deve bloquear
   clique) — a busca é interativa de verdade, então precisa reverter isso
   explicitamente pra si e pros próprios filhos. */
.busca-global {
  position: relative;
  width: 480px;
  pointer-events: auto;
}
.busca-global__input {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
}
.busca-global__input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}
.busca-global__resultados {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: 480px;
  max-width: 90vw;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
  padding: 0.5rem;
}
.busca-global__resultados[hidden] { display: none; }
.busca-global__grupo + .busca-global__grupo {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.busca-global__grupo-titulo {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
  padding: 0 0.4rem;
}
.busca-global__item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.5rem 0.6rem;
  border-radius: calc(var(--radius) - 4px);
  color: var(--ink);
  text-decoration: none;
}
.busca-global__item:hover { background: var(--bg-soft); }
.busca-global__item span { font-size: var(--fs-sm); color: var(--muted); }
.busca-global__vazio { margin: 0.5rem; color: var(--muted); font-size: var(--fs-sm); }

.site-sidebar {
  position: fixed;
  left: 1.25rem;
  top: 6.75rem;
  bottom: 1.25rem;
  width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
  padding: 2rem 0.5rem;
  z-index: 20;
}

.site-sidebar__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.site-sidebar__links > a,
.site-sidebar__dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 44px;
  border-radius: 10px;
  color: var(--muted);
}
.site-sidebar__links > a:hover,
.site-sidebar__dropdown-toggle:hover { background: var(--bg-soft); color: var(--green); text-decoration: none; }

.site-sidebar__dropdown { position: relative; }
/* "Mais" só existe no mobile: no desktop tem espaço de sobra pra cada
   ícone aparecer separado. .nav-secundario-mobile marca os itens que se
   escondem no mobile (ficam disponíveis de novo dentro do "Mais",
   duplicados no HTML) — ver @media (max-width: 768px) mais abaixo. */
.site-sidebar__mais { display: none; }
.site-sidebar__dropdown-toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.site-sidebar__dropdown-menu {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 0.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
  padding: 0.4rem;
  min-width: 140px;
  z-index: 10;
}
.site-sidebar__dropdown-menu a {
  display: block;
  padding: 0.5rem 0.65rem;
  border-radius: 6px;
  color: var(--ink);
  font-weight: 600;
  font-size: var(--fs-sm);
}
.site-sidebar__dropdown-menu a:hover { background: var(--bg-soft); color: var(--green); text-decoration: none; }
.site-sidebar__dropdown:hover .site-sidebar__dropdown-menu,
.site-sidebar__dropdown:focus-within .site-sidebar__dropdown-menu { display: block; }

.site-sidebar__footer {
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.site-sidebar__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--fs-sm);
}
/* Escopado a "form button" (não só ".site-sidebar__footer button"): o
   botão Sair é o único de verdade dentro de um <form> aqui — a engrenagem
   de Configurações também é um <button>, mas não deve herdar a altura
   nem o hover vermelho pensados só pra Sair. */
.site-sidebar__footer form button {
  width: 40px;
  height: 64px;
  padding: 0;
  background: none;
  border: none;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-sidebar__footer form button:hover { color: var(--stage-perdido); background: var(--bg-soft); }

.site-main {
  height: 100vh;
  display: flex;
  flex-direction: column;
  margin-left: 100px;
  padding-top: 5rem;
}
.site-main--sem-menu { margin-left: 0; padding-top: 0; }

.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.75rem 1.5rem 3rem;
  width: 100%;
}

/* Nome da página, agora fora da barra fixa — rola junto com o conteúdo
   em vez de ficar sempre visível no topo. Mesma largura/alinhamento de
   .page (max-width + padding lateral) pra bater com o conteúdo abaixo.
   text-transform:lowercase em vez de editar o texto de cada template
   ({% block titulo %} continua com a grafia normal, usada também na
   aba do navegador via {% block title %}). */
.site-pagina-titulo-linha {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding: 1.5rem 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.site-pagina-titulo {
  margin: 0;
  font-size: var(--fs-heading);
  font-weight: 700;
  color: var(--muted);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}

.kanban-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Filtros acima do quadro do Kanban. */
.kanban-filtros { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
.kanban-filtros select,
.kanban-filtros input[type="text"] {
  font-family: var(--font-body); font-size: var(--fs-sm); padding: 0 0.65rem; height: var(--botao-altura); box-sizing: border-box;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink);
}
.kanban-filtros input[type="text"] { width: 11rem; }
.kanban-filtros__parados { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--fs-sm); color: var(--ink); }
.kanban-filtros .btn-secundario { margin-top: 0; }
.kanban-filtros__limpar { font-size: var(--fs-sm); color: var(--muted); }
@media (max-width: 600px) {
  .kanban-filtros select, .kanban-filtros input[type="text"] { flex: 1 1 100%; width: auto; }
}

/* Kanban board */
.kanban-board {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 1.5rem;
  align-items: stretch;
  overflow-x: auto;
  padding-bottom: 1rem;
}
.kanban-board::-webkit-scrollbar { height: 8px; }
.kanban-board::-webkit-scrollbar-track { background: transparent; }
.kanban-board::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.kanban-board::-webkit-scrollbar-thumb:hover { background: var(--muted-soft); }
.kanban-coluna {
  flex: 1 0 240px;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.kanban-coluna__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
  padding: 0 0.1rem;
  flex-shrink: 0;
}
.kanban-coluna__cards {
  flex: 1;
  min-height: 220px;
  overflow-y: auto;
  padding-right: 0.35rem;
}
.kanban-coluna__cards::-webkit-scrollbar { width: 8px; }
.kanban-coluna__cards::-webkit-scrollbar-track { background: transparent; }
.kanban-coluna__cards::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.kanban-coluna__cards::-webkit-scrollbar-thumb:hover { background: var(--muted-soft); }
.kanban-coluna__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.kanban-coluna__header h3 {
  margin: 0;
  font-size: var(--fs-heading);
  font-weight: 600;
}
.kanban-coluna__count {
  color: var(--muted-soft);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.kanban-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border-left: 4px solid var(--stage-color, var(--muted-soft));
  padding: 0.85rem 1rem;
  margin-bottom: 0.8rem;
  cursor: grab;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.kanban-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-1px); }
.kanban-card:active { cursor: grabbing; }
.kanban-card__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}
.kanban-card__empresa {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-base);
}
.kanban-card__proposta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
}
.kanban-card__proposta:hover { background: var(--green); color: #fff; }
.kanban-card__topo-acoes {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}
.kanban-card__valor {
  font-weight: 700;
  color: var(--ink);
}
.kanban-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.6rem;
}
.kanban-card__footer-info {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.kanban-card__vendedor {
  background: var(--bg-soft);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
}
.kanban-card--atrasado { border-left-color: var(--stage-perdido); }
.kanban-card__previsao {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.4rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted);
}
.kanban-card__previsao--atrasado { color: var(--stage-perdido); }
.kanban-card__parado {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.3rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--gold);
}
.kanban-card__scoring {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  background: var(--green-soft);
  color: var(--green);
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}
.kanban-card__acoes {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.kanban-card__editar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
  font-size: var(--fs-base);
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.kanban-card__editar:hover { background: var(--green); color: #fff; text-decoration: none; }
.kanban-card:hover .kanban-card__editar,
.kanban-card__editar:focus-visible { opacity: 1; }

.kanban-card__excluir-form { display: inline-flex; }
.kanban-card__excluir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.kanban-card__excluir:hover { background: var(--stage-perdido); color: #fff; }
.kanban-card:hover .kanban-card__excluir,
.kanban-card__excluir:focus-visible { opacity: 1; }

.kanban-coluna .kanban-card { --stage-color: inherit; }

/* Forms (negócio, empresa, login) */
.form-page {
  max-width: 440px;
  /* width: 100% é necessário aqui: .site-main é flex column, e um item
     flex com margin horizontal auto faz "shrink-to-fit" ao conteúdo em
     vez de esticar até o max-width — sem isso, duas páginas com o mesmo
     max-width (ex.: negócio e empresa, ambas .form-page--wide) ficavam
     com larguras diferentes dependendo de quanto conteúdo cada uma tinha. */
  width: 100%;
  margin: 2.5rem auto 0;
  /* padding-bottom (não margin-bottom): a margem de baixo de um bloco
     colapsa com a margem do seu último filho quando não há padding/borda
     entre eles — nas páginas com várias .form-page__secao (negócio,
     empresa), isso fazia o espaço final da rolagem sumir quase por
     completo, deixando o último item bem colado na borda da tela. */
  padding: 0 1.5rem 3rem;
}
.form-card, .form-page__secao {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem;
}
.form-card p {
  margin: 0 0 1rem;
  color: var(--ink);
  font-weight: 600;
}
/* .form-page__secao entra nos mesmos seletores de .form-card: nasceu só
   pra conteúdo somente-leitura (Resumo, Compromissos, E-mails, Histórico),
   mas o Scoring do negócio trouxe campo de formulário de verdade pra
   dentro de uma seção — sem isso, label e input ficavam sem nenhum
   estilo do app (só o padrão bruto do navegador), daí o desalinhamento. */
.form-card label, .form-page__secao label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 0.3rem;
}
.form-card input, .form-card select, .form-card textarea,
.form-page__secao input, .form-page__secao select, .form-page__secao textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  margin-bottom: 1.1rem;
  box-sizing: border-box;
}
/* Tamanho fixo (sem alça de redimensionar) pra textarea curta que não
   deve crescer/encolher conforme o texto — ex.: próxima ação recomendada
   do scoring do negócio, sempre uma frase. */
.campo-tamanho-fixo { height: 5.5rem; resize: none; }

.form-card input:focus, .form-card select:focus, .form-card textarea:focus,
.form-page__secao input:focus, .form-page__secao select:focus, .form-page__secao textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}
.form-card input[type="checkbox"] {
  width: auto;
  padding: 0;
  margin: 0 0.5rem 0 0;
  border: none;
  vertical-align: middle;
}
.form-card label:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  font-weight: 600;
  color: var(--ink);
}
.form-card .helptext { display: block; font-size: var(--fs-xs); color: var(--muted-soft); margin-top: -0.9rem; margin-bottom: 1rem; }
.form-card ul.errorlist { color: var(--stage-perdido); font-size: var(--fs-sm); padding-left: 1.1rem; margin: -0.6rem 0 0.8rem; }
.form-footer { margin-top: 1.1rem; font-size: var(--fs-sm); text-align: center; color: var(--muted); }

.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
/* CNPJ + botão "Buscar dados na Receita" lado a lado; o input não reserva
   a margem de baixo (quem reserva é o aviso logo abaixo). */
.empresa__cnpj-busca { display: flex; gap: 0.6rem; align-items: flex-start; }
.empresa__cnpj-busca input { flex: 1; min-width: 0; margin-bottom: 0; }
.form-card .empresa__cnpj-busca button { margin-top: 0; }
.form-card .empresa__aviso-receita { font-size: var(--fs-sm); color: var(--green); margin: 0.35rem 0 1.1rem; min-height: 1.2em; }
.form-card .empresa__aviso-receita--erro { color: var(--stage-perdido); }
.form-card .empresa__duplicada { font-size: var(--fs-sm); margin: -0.4rem 0 1rem; }
.empresa__parecidas { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; padding: 0.75rem 1rem; margin-bottom: 1rem; font-size: var(--fs-sm); }
.form-card .empresa__parecidas p { margin: 0 0 0.4rem; font-weight: 700; color: var(--ink); }
.empresa__parecidas ul { margin: 0; padding-left: 1.1rem; }
/* Tabela dentro de .form-page (que não tem o overflow-x do .page): rola
   dentro do próprio cartão no celular em vez de alargar a tela inteira. */
.tabela-rolavel { overflow-x: auto; }
.empresa__busca-externa { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: -0.4rem 0 1.1rem; }
.empresa__busca-externa .btn-secundario { margin-top: 0; }
.empresa-lista__fantasia { display: block; font-size: var(--fs-xs); color: var(--muted); }
.form-grid-data-hora { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0 1rem; }

.form-page__secao { margin-top: 3rem; }
.form-page__secao .page-header { margin-bottom: 1rem; }
.form-page__secao h3 { margin: 0; font-size: var(--fs-heading); font-weight: 600; color: var(--ink); }

/* Excluir: vermelho cheio com texto branco (pedido do Sérgio, 2026-09-24);
   contraste 5,3:1 no #b3413a. No hover escurece o mesmo vermelho. */
.btn-perigo {
  background: var(--stage-perdido);
  color: #fff;
  border: 1px solid var(--stage-perdido);
}
.btn-perigo:hover { background: #8f332e; border-color: #8f332e; color: #fff; text-decoration: none; }

.form-field { margin-bottom: 1.1rem; }
.form-field input, .form-field select { margin-bottom: 0; }
/* .form-card .helptext usa margin-top negativo pra "descontar" a margem
   de 1.1rem que input/select têm fora de um .form-field — dentro de um
   .form-field essa margem já é zerada (regra acima), então o mesmo
   desconto negativo empurrava o texto de ajuda pra cima demais,
   sobrepondo o próprio campo (visto na tela de e-mail recebido). */
.form-field .helptext { margin-top: 0.2rem; }

.form-filtro-periodo {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.form-filtro-periodo .form-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0;
}

.dash-section__link {
  margin-top: 0.75rem;
}
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  margin-top: 0.45rem;
  text-decoration: none;
}
.icon-btn:hover { background: var(--green); color: #fff; text-decoration: none; }
.icon-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Listas (contatos, etc.) */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.busca-wrap { position: relative; width: 100%; max-width: 320px; }
.busca-icone {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-soft);
  pointer-events: none;
}
.busca-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  padding: 0.55rem 0.9rem 0.55rem 2.4rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
}
.busca-input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.data-table th, .data-table td {
  text-align: left;
  padding: 0.7rem 1rem;
  font-size: var(--fs-base);
  border-bottom: 1px solid var(--border);
}
.data-table th {
  background: var(--bg-soft);
  color: var(--muted);
  font-weight: 700;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--bg-soft); }

.data-table__acoes { display: flex; align-items: center; gap: 0.5rem; }
.data-table__excluir-form { display: inline-flex; }
.data-table__editar,
.data-table__excluir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--green-soft);
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.data-table__editar { color: var(--green); }
.data-table__editar:hover { background: var(--green); color: #fff; text-decoration: none; }
.data-table__excluir { color: var(--muted); }
.data-table__excluir:hover { background: var(--stage-perdido); color: #fff; }

.estagio-lista__cor {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--border);
  vertical-align: middle;
}

.negocio-lista__coluna-icone { width: 42px; }

.negocio-lista__proposta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--green-soft);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  color: var(--green);
}
.negocio-lista__proposta:hover { background: var(--green); color: #fff; text-decoration: none; }

/* Dashboard */
.dash-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.dash-kpi {
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  color: #fff;
  /* Garante a mesma altura pra todo card mesmo se algum não tiver uma
     segunda métrica (submedida) — sem isso, cards com menos conteúdo
     ficam mais baixos que os outros. */
  min-height: 15rem;
  box-sizing: border-box;
}
.dash-kpi__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  margin-bottom: 1rem;
}
.dash-kpi__numero {
  display: block;
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.dash-kpi__rotulo {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  opacity: 0.85;
  margin-top: 0.4rem;
}
.dash-kpi__submedida {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  opacity: 0.78;
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.dash-kpi--andamento { background: #003814; box-shadow: 0 4px 16px rgba(0, 56, 20, 0.28); }
.dash-kpi--valor { background: #00501f; box-shadow: 0 4px 16px rgba(0, 80, 31, 0.26); }
/* Mesmo dourado usado na fatia "Pesquisa na Internet" de Origem dos
   negócios (ver crm/views.py::_CORES_ORIGEM) — pedido do Sérgio pra
   destacar "Clientes cadastrados" com essa cor, primeiro na linha. */
.dash-kpi--clientes { background: #c9932f; box-shadow: 0 4px 16px rgba(201, 147, 47, 0.28); }

.dash-empty {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.5rem;
  color: var(--muted);
}
.dash-section {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
}
.dash-section h3 { margin-bottom: 1.25rem; font-size: var(--fs-heading); }
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.dash-grid .dash-section { margin-bottom: 0; }

.dash-card-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
.dash-card-header__icone {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dash-card-header h3 { margin: 0; }

.dash-section--funil { padding-bottom: 1.75rem; }

/* Funil como gráfico de pizza (conic-gradient puro, sem lib de gráficos) —
   cada fatia usa a mesma cor do estágio no Kanban, então a leitura já é
   familiar pra quem usa o quadro. */
.donut-funil {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  flex-wrap: wrap;
}
.donut-funil__grafico {
  position: relative;
  width: 180px;
  height: 180px;
  min-width: 180px;
  border-radius: 50%;
}
.donut-funil__centro {
  position: absolute;
  inset: 22%;
  background: var(--surface);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.donut-funil__total { font-size: 1.8rem; font-weight: 800; color: var(--ink); line-height: 1; }
.donut-funil__total-rotulo { font-size: var(--fs-xs); color: var(--muted); margin-top: 0.2rem; }
.donut-funil .chart-legend {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.65rem;
  margin: 0;
  flex: 1;
  min-width: 220px;
}

.funnel-row {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  align-items: center;
  gap: 0.9rem;
}
.funnel-row__label { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); }
.funnel-row__track {
  background: var(--bg-soft);
  border-radius: 4px;
  height: 20px;
  overflow: hidden;
}
.funnel-row__fill {
  height: 100%;
  min-width: 6px;
  border-radius: 0 3px 3px 0;
}
.funnel-row__valor { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); white-space: nowrap; text-align: right; }

.funnel-perdido {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--muted);
}
.funnel-perdido__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

.stacked-bar {
  display: flex;
  gap: 2px;
  height: 26px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--bg-soft);
}
.stacked-bar__segment { height: 100%; }

.chart-legend {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.chart-legend li { display: flex; align-items: center; gap: 0.4rem; }
.chart-legend__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* Propostas */
.form-page--wide { max-width: 760px; }
/* Larguras pensadas pra barra de ações (--botao-largura 13rem + 112px de
   margem interna do cartão): 760 cabem [Salvar] [Cancelar] [Excluir] numa
   linha; nas estreitas, 540 cabem [Criar] [Cancelar]. O login continua 440. */
.form-page:not(.form-page--wide):has(.form-acoes) { max-width: 540px; }

.diagnostico-meta {
  color: var(--muted);
  font-size: var(--fs-base);
  margin: 0 0 1.5rem;
}

.form-erro {
  background: #fdecea;
  color: var(--stage-perdido);
  border: 1px solid var(--stage-perdido);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font-size: var(--fs-sm);
  margin-bottom: 1.25rem;
}

.produtos-busca-wrap { position: relative; max-width: 360px; margin-bottom: 1rem; }
.produtos-busca-icone {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-soft);
  pointer-events: none;
}
.produtos-busca {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  padding: 0.55rem 0.9rem 0.55rem 2.4rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
}
.produtos-busca:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}

.produtos-categoria-grupo { margin-top: 1.5rem; }
.produtos-categoria-grupo:first-child { margin-top: 0; }
.produtos-categoria {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}

.produtos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.9rem;
  margin-bottom: 1.5rem;
}
.produto-card {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.produto-card:hover { border-color: var(--green); box-shadow: var(--shadow); }
.produto-card:has(input:checked) { border-color: var(--green); background: var(--green-soft); }
.produto-card input[type="checkbox"] {
  margin-top: 0.2rem;
  accent-color: var(--green);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.produto-card__info { display: flex; flex-direction: column; gap: 0.2rem; }
.produto-card__nome { font-weight: 700; font-size: var(--fs-base); }
.produto-card__codigo { color: var(--gold); font-weight: 700; }
.produto-card__preco { font-size: var(--fs-sm); color: var(--muted); }

.produtos-lista {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.produto-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.produto-linha:last-child { border-bottom: none; }
.produto-linha:hover { background: var(--bg-soft); }
.produto-linha__info { display: flex; flex-direction: column; gap: 0.15rem; }
.produto-linha__nome { font-weight: 700; font-size: var(--fs-base); }
.produto-linha__codigo { color: var(--gold); font-weight: 700; }
.produto-linha__preco { font-size: var(--fs-sm); color: var(--muted); }
.produto-linha__quantidade {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--muted);
  flex-shrink: 0;
}
.produto-linha__quantidade input {
  width: 90px;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
}

.produtos-desconto {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--green-soft);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  margin-bottom: 1.5rem;
  font-weight: 700;
  color: var(--green-dark);
}
.produtos-desconto input {
  width: 100px;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 700;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
}

.investimento-comodato {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(--green-soft);
  border-radius: var(--radius);
  padding: 0.9rem 1.25rem;
  margin-bottom: 1.5rem;
  font-weight: 700;
  color: var(--green-dark);
}
.investimento-comodato__valor { font-size: 1.2rem; }

.produtos-vazio {
  background: var(--bg-soft);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
}
.produtos-vazio a { font-weight: 700; }

textarea.textarea-proposta {
  width: 100%;
  min-height: 360px;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  margin-bottom: 1.1rem;
  resize: vertical;
}
textarea.textarea-proposta:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}

/* Propostas — redesign (quantidade manual, dispensers) */
.btn-secundario {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  margin-top: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}
/* background explícito: sem ele, num <button> o fundo verde-escuro do
   button:hover geral vazava por baixo do texto verde (quase ilegível). */
.btn-secundario:hover { border-color: var(--green); color: var(--green); background: transparent; text-decoration: none; }
/* Botões de sugestão por IA (resumo e scoring do negócio) — destacados dos
   demais .btn-secundario pra chamar atenção como uma ação "especial". */
.btn-secundario--ia { background: var(--gold); color: #fff; border-color: var(--gold); }
.btn-secundario--ia:hover { background: var(--gold); color: #fff; border-color: var(--gold); opacity: 0.85; }

.produto-card { cursor: default; flex-direction: column; align-items: stretch; }
.produto-card__quantidade,
.produto-card__distribuicao {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--muted);
  margin-top: 0.5rem;
}
.produto-card__quantidade input,
.produto-card__distribuicao input {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
}

.revisao-lista { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.revisao-lista li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-base);
}
.revisao-lista li:last-child { border-bottom: none; }

.produto-lista__miniatura {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
}

.produto-form__foto-atual {
  display: block;
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: 1.1rem;
}

/* Calculadora de consumo */
.calculadora-form { margin-bottom: 1.75rem; }
.calculadora-form__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.25rem;
}
.calculadora-form__campo {
  display: flex;
  flex-direction: column;
  width: 170px;
}
.calculadora-form__campo label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.calculadora-form__campo input {
  box-sizing: border-box;
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
}
.calculadora-form__campo input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}
.calculadora-form__linha button {
  height: 2.65rem;
}

/* E-mail marketing */
.page-header__acoes { display: flex; align-items: center; gap: 0.6rem; }
.page-header__acoes .btn-secundario { margin-top: 0; }
/* Cabeçalho com mais de um botão (ex.: Refazer + Nova proposta no negócio):
   no celular os botões descem pra linha de baixo em vez de sair da tela. */
.page-header--quebra { flex-wrap: wrap; gap: 0.75rem; }
.page-header--quebra h3 { flex-shrink: 0; }
.page-header--quebra .page-header__acoes { flex-wrap: wrap; }
.etapa-proposta__navegacao { margin-top: 0.75rem; flex-wrap: wrap; }

.resumo-campanha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  background: var(--green-soft);
  border-radius: var(--radius);
  padding: 0.9rem 1.25rem;
  margin-bottom: 1.5rem;
  font-weight: 700;
  color: var(--green-dark);
}
.resumo-campanha__item { display: flex; flex-direction: column; gap: 0.15rem; }
.resumo-campanha__valor { font-size: 1.2rem; }
.resumo-campanha__rotulo { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }

.status-badge {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 700;
}
.status-badge--rascunho { background: var(--bg-soft); color: var(--muted); }
.status-badge--enviando { background: #fbf1e0; color: var(--stage-proposta); }
.status-badge--concluida { background: var(--green-soft); color: var(--stage-ganho); }
.status-badge--concluida_parcial { background: #fbf1e0; color: var(--stage-proposta); }
.status-badge--falha, .status-badge--erro { background: #fbe7e5; color: var(--stage-perdido); }
.status-badge--pendente { background: var(--bg-soft); color: var(--muted); }
.status-badge--enviado { background: var(--green-soft); color: var(--stage-ganho); }
.status-badge--cancelado { background: var(--bg-soft); color: var(--muted); }
.status-badge--inicial { background: var(--bg-soft); color: var(--muted); }
.status-badge--ganho { background: var(--green-soft); color: var(--stage-ganho); }
.status-badge--perdido { background: #fbe7e5; color: var(--stage-perdido); }
.status-badge--ajustar { background: #fbf1e0; color: var(--stage-proposta); }
.status-badge--aprovado { background: var(--green-soft); color: var(--green); }
.status-badge--publicado { background: var(--green); color: #ffffff; }

.campanha-form__template-picker { margin-bottom: 1.25rem; }
.campanha-form__salvar-modelo {
  border-top: 1px solid var(--border);
  margin-top: 1rem;
  padding-top: 1rem;
}

/* Tela intermediária (tablet/janela de desktop estreita): 5 colunas fixas de
   180px+ não cabem mais — vira 2 (as 5 KPIs quebram em 3 linhas). Abaixo de
   768px isso é substituído de novo pela pilha de 1 coluna do breakpoint mobile. */
@media (max-width: 1047px) {
  .dash-kpis { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
}

/* ==========================================================================
   Navegação no celular — a barra lateral (rail fixo à esquerda) não cabe em
   telas estreitas, então vira uma barra inferior fixa (padrão comum em apps
   mobile, sem precisar de menu hamburguer/JS extra). O topo também encolhe
   e conteúdo/tabelas passam a rolar na horizontal em vez de espremer.
   ========================================================================== */
@media (max-width: 768px) {
  .site-logo { height: 3.75rem; padding-left: 1rem; }
  .site-logo img { height: 34px; }

  .site-topbar {
    left: 0;
    height: 3.75rem;
    /* Sem isso, centralizar a busca na largura toda do topbar (que no
       celular começa em x=0, embaixo da logo) deixa uma ponta da caixa
       de busca por baixo da logo — o padding-left "reserva" a área da
       logo antes de centralizar no que resta. */
    padding-left: 172px;
  }
  .site-pagina-titulo-linha { padding: 1rem 1rem 0; flex-wrap: wrap; }
  .site-pagina-titulo { font-size: var(--fs-base); }
  .busca-global {
    width: 170px;
  }
  .busca-global__input { padding: 0.45rem 0.7rem; font-size: var(--fs-sm); }
  .busca-global__resultados { right: 0; width: min(360px, calc(100vw - 2rem)); }

  .site-main { margin-left: 0; padding-top: 3.75rem; padding-bottom: 4.75rem; }
  .site-main--sem-menu { padding-top: 0; padding-bottom: 0; }

  .page { padding: 1.25rem 1rem 2rem; overflow-x: auto; }

  .site-sidebar {
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    padding: 0.5rem 0.75rem;
    border-radius: 0;
  }
  .site-sidebar__links { flex-direction: row; gap: 0.25rem; }
  .site-sidebar__links > a,
  .site-sidebar__dropdown-toggle { width: 42px; height: 42px; }

  /* Menu principal não cabe inteiro na largura de um celular (~360-390px)
     — os itens menos usados no dia a dia (E-mail, Tabela de preços,
     Calculadora, Cadastros, Configurações) saem da barra e entram no
     "Mais", que só aparece aqui no mobile. Ficam Dashboard, Negócios,
     Propostas e Agenda sempre visíveis, mais avatar/Sair no rodapé. */
  /* Precisa ganhar de ".site-sidebar__links > a" (que já define display:flex
     e tem mais especificidade que uma classe solta) — daqui prefixado com o
     pai, senão os <a> com essa classe continuavam aparecendo mesmo com
     display:none aqui (só os <div> escondiam, que não tinham essa disputa). */
  .site-sidebar__links > .nav-secundario-mobile,
  .site-sidebar__footer > .nav-secundario-mobile { display: none; }
  .site-sidebar__mais { display: block; }

  .site-sidebar__dropdown-menu {
    left: auto;
    right: 0;
    top: auto;
    bottom: 100%;
    margin-left: 0;
    margin-bottom: 0.6rem;
  }

  .site-sidebar__footer {
    margin-top: 0;
    margin-left: 0.25rem;
    padding-top: 0;
    padding-left: 0.75rem;
    border-top: none;
    border-left: 1px solid var(--border);
    flex-direction: row;
    gap: 0.4rem;
  }
  .site-sidebar__footer form button { height: 42px; }

  /* padding-bottom maior que no desktop: a barra de navegação fixa
     embaixo (site-sidebar no mobile) cobre ~58px do final da página, e
     .site-main não consegue reservar essa área sozinho quando o conteúdo
     estica além da altura fixa dele (height: 100vh) — dá pra ver ao
     rolar até o fim de uma página com bastante conteúdo (ex.: negócio
     com histórico longo) sem isso. */
  .form-page { margin: 1.5rem auto 0; padding: 0 1rem 6rem; }
  .form-card { padding: 1.25rem; }

  .dash-grid { grid-template-columns: 1fr; }
  .dash-kpis { grid-template-columns: 1fr; }
  .form-grid-2 { grid-template-columns: 1fr; }
  .empresa__cnpj-busca { flex-wrap: wrap; }
  .form-card .empresa__cnpj-busca button { width: 100%; }

  /* Tabelas de listagem rolam na horizontal (dentro de .page, já com
     overflow-x: auto acima) em vez de espremer colunas até ficar ilegível. */
  .data-table { min-width: 620px; }

  .agenda__dia { min-height: 62px; padding: 0.3rem; gap: 0.15rem; }
  .agenda__dia-numero { font-size: var(--fs-xs); }
  .agenda__diasemana { font-size: 0.62rem; }
  .agenda__compromisso { font-size: 0.62rem; padding: 0.1rem 0.25rem; }
  .agenda__nav h3 { font-size: var(--fs-base); }
}
.calculadora-resultado { margin-top: 0.5rem; }

/* Editor de e-mail marketing (Quill) — o textarea real fica oculto atrás
   do editor visual, só sincronizado via JS (ver _editor_rico.html). */
.editor-rico__textarea-oculta { display: none; }
.editor-rico {
  margin-bottom: 1.1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
}
.editor-rico .ql-toolbar.ql-snow {
  border: none;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-body);
}
.editor-rico .ql-container.ql-snow { border: none; font-family: var(--font-body); font-size: var(--fs-base); }
.editor-rico .ql-editor { min-height: 260px; color: var(--ink); }
.editor-rico .ql-editor.ql-blank::before { color: var(--muted-soft); font-style: normal; }
.editor-rico .ql-snow.ql-toolbar button:hover,
.editor-rico .ql-snow.ql-toolbar button.ql-active,
.editor-rico .ql-snow .ql-picker-label:hover,
.editor-rico .ql-snow .ql-picker-item:hover { color: var(--green); }
.editor-rico .ql-snow.ql-toolbar button:hover .ql-stroke,
.editor-rico .ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--green); }
.editor-rico .ql-snow.ql-toolbar button:hover .ql-fill,
.editor-rico .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--green); }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 20, 15, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 1rem;
}
/* declarar display:flex direto na classe sobrescreve o display:none padrão
   do atributo [hidden] (regra de autor sempre vence regra do user-agent,
   mesmo com a mesma especificidade) — sem isso, .hidden = true não escondia
   o modal de verdade, só marcava o atributo sem nenhum efeito visual. */
.modal-overlay[hidden] { display: none; }
/* .modal-card sempre combinada com .form-card no HTML (reaproveita o
   visual de label/input/select já definido pra formulários) — aqui só o
   que é específico de ser um modal centralizado, não uma página inteira. */
.modal-card { width: 100%; max-width: 380px; }
.modal-card h3 { margin: 0 0 1rem; color: var(--ink); }
.modal-card__acoes { display: flex; gap: 0.6rem; margin-top: 0.4rem; }
.modal-card__acoes button { flex: 1; min-width: 0; } /* o modal tem 316px por dentro: dois de 13rem não cabem */
.modal-card__acoes .btn-secundario { margin-top: 0; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline__item {
  position: relative;
  padding: 0 0 1.1rem 1.1rem;
  border-left: 2px solid var(--border);
}
.timeline__item:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline__item::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 0.25rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted-soft);
}
.timeline__item--criado::before { background: var(--green); }
.timeline__item--mudanca_etapa::before { background: var(--gold); }
.timeline__item--proposta_gerada::before { background: var(--stage-diagnostico); }
.timeline__item--proposta_excluida::before { background: var(--stage-perdido); }
.timeline__item--whatsapp::before { background: var(--stage-ganho); }
.timeline__item--ligacao::before { background: var(--stage-negociacao); }
.timeline__item--email::before { background: var(--stage-novo); }
/* Visita e reunião (contatos presenciais) em azul — o mesmo da fatia "Não
   informado" de Origem dos negócios no Dashboard —, visita vazada pra não
   confundir com reunião. As outras cores da paleta já marcam outros eventos. */
.timeline__item--visita::before { background: var(--surface); border: 2px solid #3a5f9e; width: 6px; height: 6px; }
.timeline__item--reuniao::before { background: #3a5f9e; }
.timeline__item--anexo::before { background: var(--surface); border: 2px solid var(--gold); width: 6px; height: 6px; }
.timeline__descricao { display: block; color: var(--ink); font-weight: 600; font-size: var(--fs-sm); }
.timeline__meta { display: block; color: var(--muted-soft); font-size: var(--fs-xs); margin-top: 0.15rem; }
.timeline__vazio { color: var(--muted-soft); font-size: var(--fs-sm); }

/* ==========================================================================
   Agenda — calendário mensal sem biblioteca JS: navegação por link
   (?ano=&mes=), compromissos renderizados direto dentro da célula do dia.
   ========================================================================== */
.agenda__nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.agenda__nav h3 { margin: 0; color: var(--ink); text-transform: capitalize; }

.agenda__diasemana {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.4rem;
  margin-bottom: 0.4rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--muted-soft);
  text-align: center;
  text-transform: uppercase;
}

.agenda__grid { display: flex; flex-direction: column; gap: 0.4rem; }
.agenda__semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.4rem; }

.agenda__dia {
  /* min-width: 0 permite que a célula encolha abaixo do tamanho "natural"
     do texto do compromisso (nowrap) — sem isso, o grid de 7 colunas
     estoura a largura da página inteira só porque um título comprido não
     coube, mesmo com overflow/ellipsis já configurados no item de baixo. */
  min-width: 0;
  min-height: 110px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.agenda__dia--fora-do-mes { background: var(--bg-soft); opacity: 0.6; }
.agenda__dia--hoje { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }

.agenda__dia-cabecalho { display: flex; align-items: center; justify-content: space-between; }
.agenda__dia-numero { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); }
.agenda__dia--hoje .agenda__dia-numero { color: var(--green); }
.agenda__dia-add {
  color: var(--muted-soft);
  text-decoration: none;
  font-weight: 700;
  line-height: 1;
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
}
.agenda__dia-add:hover { background: var(--bg-soft); color: var(--green); }

.agenda__compromisso {
  display: block;
  font-size: var(--fs-xs);
  color: var(--ink);
  background: var(--green-soft);
  border-radius: 4px;
  padding: 0.15rem 0.35rem;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agenda__compromisso:hover { text-decoration: underline; }
.agenda__compromisso--atrasado { background: #fbe7e5; color: var(--stage-perdido); }
.agenda__compromisso--concluido { background: var(--bg-soft); color: var(--muted-soft); text-decoration: line-through; }

.agenda__filtro-vendedor select {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  background: var(--surface);
  color: var(--ink);
}

.agenda-hoje-lista { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.agenda-hoje-lista li a { font-size: var(--fs-sm); color: var(--ink); text-decoration: none; }
.agenda-hoje-lista li a:hover { text-decoration: underline; }
.agenda-hoje-lista li a strong { color: var(--green); }

/* ==========================================================================
   WhatsApp — atalho wa.me ao lado do telefone e registro da conversa no
   histórico do negócio (sem integração com a API da Meta).
   ========================================================================== */
.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
}
.btn-whatsapp:hover { background: var(--green); color: #fff; text-decoration: none; }
.btn-whatsapp:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.telefone-com-whatsapp { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.form-field .btn-whatsapp { margin-top: 0.45rem; align-self: flex-start; }
/* "Registrar contato com o cliente" no Histórico do negócio. Os campos da
   seção herdam width:100% e margin-bottom do .form-page__secao — aqui ficam
   lado a lado, sem a margem que esticava a linha (e o botão junto). */
.contato-registro { margin-bottom: 1.25rem; }
.contato-registro__whatsapp { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; }
.contato-registro__titulo { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--ink); margin-bottom: 0.5rem; }
.contato-registro__form label { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--muted); margin-bottom: 0.35rem; }
.contato-registro__linha { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: stretch; margin-bottom: 0.6rem; }
.contato-registro__campo { flex: 1 1 140px; min-width: 0; }
.contato-registro__campo--contato { flex: 2 1 200px; }
.contato-registro__form select,
.contato-registro__form input,
.contato-registro__form textarea { margin-bottom: 0; }
.contato-registro__linha--nota textarea { flex: 1 1 240px; min-width: 0; width: auto; resize: vertical; }
.contato-registro__linha--nota button { flex: 0 0 auto; margin-top: 0; }
.contato-registro .errorlist { margin: 0.4rem 0 0; }
/* Seção "Anexos" do negócio. */
.anexos__form { margin-top: 0.9rem; }
.anexos__form label { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--muted); margin-bottom: 0.35rem; }
.anexos__cota { margin: -0.1rem 0 0.5rem; }
.anexos__linha { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.anexos__linha input[type="file"] { flex: 1 1 240px; min-width: 0; width: auto; margin-bottom: 0; }
.anexos__linha button { flex: 0 0 auto; margin-top: 0; }
.anexos__form .errorlist { margin: 0.4rem 0 0; }
@media (max-width: 600px) {
  .contato-registro__linha--nota button { flex: 1 1 100%; }
  .anexos__linha button { flex: 1 1 100%; }
}


/* ==========================================================================
   Importação de contatos por planilha (Contatos > Importar planilha).
   ========================================================================== */
.importacao__colunas { margin: 0 0 1rem 1.1rem; padding: 0; font-size: var(--fs-sm); color: var(--ink); }
.importacao__colunas li { margin-bottom: 0.3rem; }
/* .form-card .importacao__aviso: precisa vencer o ".form-card p" (cor forte, peso 600). */
.form-card .importacao__aviso { font-size: var(--fs-sm); color: var(--muted); font-weight: 400; }
.importacao__envio { margin-top: 1.5rem; }
.importacao__resumo { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.importacao__chip {
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.importacao__chip--importar { background: var(--green-soft); color: var(--green); }
.importacao__chip--pendente { color: var(--gold); }
.importacao__chip--problema { color: var(--stage-perdido); }
.importacao__secao { margin: 1.5rem 0 0.6rem; }
.importacao__situacao { display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); margin-bottom: 0.3rem; }
.importacao__empresa select,
.importacao__busca {
  display: block;
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  margin-bottom: 0.35rem;
}
.importacao__linha--pendente { color: var(--gold); font-weight: 700; }
.importacao__linha--problema { color: var(--stage-perdido); }
.importacao__linha--existe { color: var(--muted); }
.importacao__acoes { justify-content: flex-end; flex-wrap: wrap; margin-top: 1.25rem; }

/* ==========================================================================
   Buscador de prospecção (base da Receita + ICP).
   ========================================================================== */
.prospeccao__aviso { font-size: var(--fs-sm); color: var(--muted); margin: 0 0 1rem; }
.prospeccao__resumo { background: var(--green-soft); color: var(--green); font-weight: 700; padding: 0.6rem 0.9rem; border-radius: 8px; }
.prospeccao__filtros { max-width: none; margin-bottom: 1.25rem; }
.prospeccao__rotulo { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--muted); margin-bottom: 0.35rem; }
.prospeccao__cidades-lista { max-height: 9rem; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.75rem; margin-bottom: 1rem; }
/* CheckboxSelectMultiple do Django 6 renderiza <div id=...><div><label>…</label></div>… */
.prospeccao__cidades-lista > div, .prospeccao__grade .form-field > div[id] { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; }
.prospeccao__cidades-lista label, .prospeccao__grade .form-field > div[id] label { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; color: var(--ink); margin: 0; }
.prospeccao__grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 1rem; }
.prospeccao__marcas label { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; color: var(--ink); }
.prospeccao__total { font-weight: 700; margin: 0 0 0.75rem; }
.prospeccao__lote { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.prospeccao__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.prospeccao__item { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.1rem; }
.prospeccao__cabeca { display: flex; align-items: flex-start; gap: 0.75rem; }
.prospeccao__cabeca > div { flex: 1; min-width: 0; }
.prospeccao__razao { display: block; font-size: var(--fs-xs); color: var(--muted); }
.prospeccao__indicio { font-size: var(--fs-xs); font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 999px; white-space: nowrap; }
.prospeccao__indicio--alto { background: var(--green-soft); color: var(--green); }
.prospeccao__indicio--medio { background: #f6efe0; color: var(--gold); }
.prospeccao__indicio--baixo { background: var(--bg-soft); color: var(--muted); }
.prospeccao__dados, .prospeccao__motivos, .prospeccao__decisores { margin: 0.35rem 0 0; font-size: var(--fs-sm); }
.prospeccao__motivos { color: var(--muted); font-size: var(--fs-xs); }
.prospeccao__atividade { margin: 0.25rem 0 0; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.prospeccao__selo { background: var(--green-soft); color: var(--green); font-size: var(--fs-xs); font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 999px; }
.prospeccao__acoes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.prospeccao__acoes .btn-secundario { margin-top: 0; }
.prospeccao__paginas { display: flex; gap: 0.75rem; margin-top: 1rem; }
.prospeccao__paginas .btn-secundario { margin-top: 0; }
.prospeccao__vazio { color: var(--muted); }

/* Ferramentas → LinkedIn (calendário da página, 2026-09-25) */
.linkedin__aviso { margin: 0 0 1rem; font-size: var(--fs-sm); color: var(--muted); max-width: 70ch; }
.linkedin-filtro { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.linkedin-filtro__chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.75rem; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--ink); font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
}
.linkedin-filtro__chip:hover { border-color: var(--muted-soft); }
.linkedin-filtro__chip--ativo { border-color: var(--green); box-shadow: 0 0 0 1px var(--green) inset; }
.data-table th.data-table__numero, .data-table td.data-table__numero { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.linkedin__data, .linkedin__nowrap { white-space: nowrap; }
.linkedin__pilar { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 0.15rem; }
.linkedin__obs { display: block; font-size: var(--fs-xs); font-style: italic; color: var(--stage-proposta); margin-top: 0.15rem; }
.linkedin__link-longo { overflow-wrap: anywhere; }
.linkedin-form__grupo { margin: 1.75rem 0 0.75rem; font-size: var(--fs-heading); font-weight: 600; color: var(--ink); }
.linkedin-form__grupo:first-of-type { margin-top: 0; }
.linkedin-form__rodape-campo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.5rem; }
.linkedin-form__rodape-campo .helptext { flex: 1 1 auto; margin: 0; }
.linkedin-form__rodape-campo .btn-secundario { margin-top: 0; flex-shrink: 0; }
@media (max-width: 600px) { .linkedin-form__rodape-campo { flex-direction: column; align-items: stretch; } }
.linkedin-form__metricas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1rem; }
@media (max-width: 600px) { .linkedin-form__metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Política de privacidade (25/09/2026): texto corrido num cartão branco. */
.politica { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem 2rem; line-height: 1.6; }
.politica h2 { margin: 0 0 0.25rem; font-size: 1.35rem; color: var(--ink); }
.politica__data { margin: 0 0 1.25rem; font-size: var(--fs-sm); color: var(--muted); }
.politica h3 { margin: 1.75rem 0 0.5rem; font-size: var(--fs-heading); font-weight: 600; color: var(--ink); }
.politica p, .politica ul { margin: 0 0 0.75rem; }
.politica ul { padding-left: 1.2rem; }
.politica li { margin-bottom: 0.35rem; }
.politica__tabela { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin-bottom: 0.75rem; }
.politica__tabela th, .politica__tabela td { text-align: left; vertical-align: top; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); }
.politica__tabela th { color: var(--muted); font-weight: 700; }
@media (max-width: 768px) {
  .politica { padding: 1.25rem 1rem; }
  .politica__tabela { min-width: 560px; }
}