/* =========================================================================
   Painel de leads — layout do painel clássico de referência (sidebar
   escura fixa com box de usuário, topbar, caixas de métricas e tabela
   de gestão), vestido com a identidade da Tainana: navy no lugar do
   cinza-ardósia, dourado reservado ao cliente fechado, rótulos em
   monospace maiúsculo como na LP.
   ========================================================================= */
:root {
  --navy-deep: #0e1627;
  --navy: #182541;
  --navy-alta: #22335a;
  --menu-secao: #101c33;      /* faixa das seções do menu, como no original */
  --blue: #2f5aae;
  --blue-escuro: #274b93;
  --blue-nevoa: #eaf0fa;
  --gold: #f2c230;
  --gold-borda: #b8930a;
  --off: #f1f3f6;
  --branco: #ffffff;
  --linha: #e2e6ee;
  --ink: #1c2434;
  --ink-2: #5c6675;
  --verde: #2e7d5b;
  --vermelho: #b3261e;

  /* -----------------------------------------------------------------
     PALETA DO FUNIL — a cor conta a história do lead, da chegada ao
     desfecho. Uma variável por estágio: mudar a cor de um estágio é
     mexer AQUI, num lugar só, e não caçar hex espalhado pelo arquivo.

       novo        âmbar quente  — o único que grita: exige ação hoje
       follow      azul da marca — em acompanhamento ativo
       aguardando  roxo suave    — a bola está com o cliente
       respondido  ciano         — voltou, perto do desfecho
       fechado     verde         — ganhou
       perdido     vermelho      — perdeu

     Âmbar no "novo" e não vermelho: urgência ≠ fracasso. O vermelho
     fica reservado ao perdido, senão a tela inteira parece alarme.
     ----------------------------------------------------------------- */
  --f-novo:       #f59f0b;
  --f-novo-forte: #b06e02;
  --f-follow:     #2f5aae;
  --f-aguardando: #7c5cd6;
  --f-respondido: #0b7c89;
  --f-fechado:    #1a8049;
  --f-perdido:    #d2453b;

  --sans: 'Open Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: 'Cascadia Mono', ui-monospace, 'SF Mono', Consolas, 'Roboto Mono', monospace;

  --menu-larg: 264px;
  /* Largura das colunas do quadro. O usuário ajusta arrastando a borda
     (como numa planilha) e o valor fica no localStorage. Os limites
     vivem no JS — ver LARG_MIN/LARG_MAX em app.js. */
  --col-larg: 260px;
  --raio: 12px;
  --raio-s: 8px;
  --sombra: 0 1px 2px rgba(14, 22, 39, 0.06), 0 8px 24px rgba(14, 22, 39, 0.07);
}

* { box-sizing: border-box; margin: 0; }

html { color-scheme: light; }

body {
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--ink);
  background: var(--off);
  min-height: 100vh;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* =========================================================================
   Login — antessala escura, um campo, uma porta.
   ========================================================================= */
.tela-login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(47, 90, 174, 0.28), transparent 60%),
    var(--navy-deep);
  padding: 24px;
}

.cartao-login {
  width: min(380px, 100%);
  background: var(--navy);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--raio);
  padding: 36px 32px 32px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}

.olho {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cartao-login .olho { color: var(--gold); display: block; margin-bottom: 10px; }
.cartao-login h1 { font-size: 24px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.cartao-login .sub { color: rgba(255, 255, 255, 0.55); font-size: 13px; margin: 4px 0 26px; }

.cartao-login label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 8px;
}

.cartao-login input {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--raio-s);
  margin-bottom: 16px;
}
.cartao-login input:focus { border-color: var(--blue); outline: none; }

.cartao-login button {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: var(--raio-s);
  background: var(--blue);
  color: #fff;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 140ms ease;
}
.cartao-login button:hover { background: var(--blue-escuro); }
.cartao-login button::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%);
  transform: translateX(-150%);
}
.cartao-login button:hover::after { transition: transform 600ms ease; transform: translateX(150%); }

.erro { color: #ffb4ac; font-size: 13px; margin-top: 12px; }

/* =========================================================================
   Esqueleto: sidebar fixa + principal
   ========================================================================= */
/* A PÁGINA não rola: quem rola é a área de conteúdo, dentro da coluna
   da direita. Com a rolagem no documento, a barra horizontal do quadro
   nascia embaixo da tela INTEIRA — atravessando a sidebar, que é fixa e
   não deveria ter nada a ver com o quadro — e a topbar saía de cena ao
   rolar para o lado, mesmo sendo sticky (sticky segura no eixo vertical,
   não no horizontal). */
html, body { height: 100%; overflow: hidden; }

.layout {
  height: 100vh;
  height: 100dvh;   /* barra de endereço do celular não corta o rodapé */
  overflow: hidden;
}

.menu {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--menu-larg);
  background: var(--navy);
  color: #fff;
  overflow-y: auto;
  z-index: 30;
  display: flex;
  flex-direction: column;
}

.principal {
  margin-left: var(--menu-larg);
  height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 0;     /* deixa o filho encolher em vez de esticar o pai */
  overflow: hidden;
}

/* ---------- Box do usuário (assinatura do painel base) ---------- */
.box-usuario {
  padding: 30px 20px 24px;
  text-align: center;
  background: linear-gradient(180deg, var(--navy-alta), var(--navy));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.avatar {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.02em;
  /* Anel dourado: a marca da casa no lugar do anel branco do original. */
  box-shadow: 0 0 0 3px var(--navy), 0 0 0 5px var(--gold);
}

.usuario-nome { display: block; font-size: 15.5px; font-weight: 700; }
.usuario-cargo {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- Itens do menu em seções, como no original ---------- */
.items-menu { padding-bottom: 24px; }

.items-menu h2 {
  margin-top: 4px;
  padding: 10px 20px;
  background: var(--menu-secao);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 20px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  font: inherit;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 120ms ease, color 120ms ease;
}
.item svg { width: 17px; height: 17px; flex: 0 0 auto; opacity: 0.8; }
.item:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }

.item--ativo {
  background: rgba(47, 90, 174, 0.35);
  border-left-color: var(--gold);
  color: #fff;
  font-weight: 600;
}

/* Véu do menu no mobile */
.menu-veu {
  position: fixed;
  inset: 0;
  z-index: 25;
  border: 0;
  background: rgba(14, 22, 39, 0.55);
}

/* =========================================================================
   Topbar
   ========================================================================= */
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 28px;
  background: var(--branco);
  border-bottom: 1px solid var(--linha);
  /* Sem position: sticky — a topbar é irmã da área que rola, não filha
     dela, então fica parada por construção, nos dois eixos. */
  flex: 0 0 auto;
  z-index: 20;
}

.topbar h1 { font-size: 18px; font-weight: 700; color: var(--navy); }
.topbar__sub {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  margin-top: 2px;
}

/* Recolher a sidebar: no desktop ela encolhe para uma faixa de ícones,
   no celular vira gaveta. Mesmo botão, comportamentos diferentes —
   é o mesmo pedido ("me dá mais espaço") em telas diferentes. */
.menu-btn {
  display: inline-flex;
  padding: 8px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-s);
  background: var(--branco);
  color: var(--navy);
  cursor: pointer;
}
.menu-btn svg { width: 20px; height: 20px; display: block; }

.logout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 8px 14px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-s);
  background: var(--branco);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.logout svg { width: 15px; height: 15px; }
.logout:hover { background: var(--off); border-color: var(--ink-2); }

/* =========================================================================
   Conteúdo
   ========================================================================= */
/* 130px embaixo era espaço reservado para a barra de lote flutuante;
   como ela só aparece com seleção ativa, o espaço vazio ficava lá o
   tempo todo, afastando o conteúdo do rodapé. 40px cobrem o respiro
   normal — a barra de lote tem `position: fixed` e não empurra nada. */
/* A ÚNICA área que rola. A barra vertical e a horizontal aparecem aqui,
   coladas na borda do conteúdo — nunca por baixo da sidebar. */
.content {
  flex: 1 1 auto;
  overflow: auto;
  padding: 24px 28px 40px;
  scrollbar-gutter: stable;
}

/* ---------- Caixas de métricas (assinatura do painel base) ----------
   Melhoria: cada caixa É o filtro do seu estágio. O dourado fica só na
   caixa de cliente fechado — a conversão, como na LP. */
/* =========================================================================
   FILTROS DO FUNIL — barra de pastilhas, não painel de cartões.

   Eram seis blocos de cor sólida ocupando um terço da tela: numa
   ferramenta de trabalho diário, o assunto é a lista de nomes, e o
   filtro é só o caminho até ela. Aqui a cor marca o estágio num ponto
   e num filete; o retângulo colorido some.
   ========================================================================= */
.metrica {
  position: relative;
  display: inline-flex;
  /* center, não baseline: o número (14px) e o rótulo (10.5px) têm
     tamanhos diferentes, e alinhar pela linha de base joga o conjunto
     para baixo dentro da pílula. */
  align-items: center;
  gap: 6px;
  padding: 0 11px 0 9px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: var(--branco);
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.metrica:hover { border-color: var(--cor-estagio, var(--blue)); color: var(--ink); }

/* Ponto da cor do estágio: a mesma linguagem do kanban e da tabela. */
.metrica::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cor-estagio, var(--ink-2));
  align-self: center;
  flex: 0 0 auto;
}

.metrica__num {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}

.metrica__rotulo {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
}

/* Selecionado: a pastilha assume a cor do estágio. Um filtro ativo tem
   de ser óbvio — é ele que explica por que a lista está curta. */
/* Selecionado muda só COR, nunca tamanho nem posição. Havia aqui um
   anel de 5px com translateY(-2px), sobra do tempo em que os filtros
   eram cartões: numa pastilha de 30px, isso estourava a altura da faixa
   e a borda saía cortada. */
.metrica[aria-pressed='true'] {
  background: var(--cor-estagio, var(--navy));
  border-color: var(--cor-estagio, var(--navy));
  color: #fff;
}
.metrica[aria-pressed='true'] .metrica__num { color: #fff; }
.metrica[aria-pressed='true']::before { background: rgba(255, 255, 255, 0.85); }

/* Cada pastilha carrega a cor do seu estágio numa variável local, para
   as regras acima não precisarem de um bloco por estado. */
.metrica--todos      { --cor-estagio: var(--navy); }
.metrica--novo       { --cor-estagio: var(--f-novo); }
.metrica--follow     { --cor-estagio: var(--f-follow); }
.metrica--aguardando { --cor-estagio: var(--f-aguardando); }
.metrica--respondido { --cor-estagio: var(--f-respondido); }
.metrica--fechado    { --cor-estagio: var(--f-fechado); }
.metrica--perdido    { --cor-estagio: var(--f-perdido); }

/* O "novo" pede ação hoje: mantém o realce mesmo sem estar selecionado. */
.metrica--novo:not([aria-pressed='true']) {
  border-color: var(--f-novo);
  color: #7a4d00;
  background: #fff8ec;
}

/* =========================================================================
   BARRA DE CONTROLES — buscar e filtrar, numa faixa só.

   Uma linha, altura fixa: a busca ocupa o espaço que sobra, os filtros
   ficam à direita, e rolam na horizontal quando não couberem. Sem
   flex-wrap no desktop — assim nada desce para uma segunda linha e a
   barra não muda de altura ao filtrar (era o que fazia a tabela pular).
   ========================================================================= */
.ferramentas {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

/* ---------- Campo de busca ---------- */
.busca {
  position: relative;
  display: flex;
  align-items: center;
  /* Encolhe até 180px antes de os filtros começarem a rolar: em tela
     estreita, ver os estágios importa mais que um campo largo. */
  flex: 1 1 180px;
  min-width: 0;
  max-width: 340px;
}

.busca__lupa {
  position: absolute;
  left: 11px;
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--ink-2);
  pointer-events: none;
}

.busca input[type='search'] {
  width: 100%;
  min-width: 0;
  padding: 9px 12px 9px 33px;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--off);
  border: 1px solid transparent;
  border-radius: 999px;
  transition: background 120ms ease, border-color 120ms ease;
}
.busca input[type='search']:focus {
  outline: none;
  background: var(--branco);
  border-color: var(--blue);
}
.busca input[type='search']::placeholder { color: var(--ink-2); }
/* O X nativo do Chrome desalinha dentro da pílula; a busca já limpa
   com Esc e com o atalho da mensagem de vazio. */
.busca input[type='search']::-webkit-search-cancel-button { display: none; }

/* ---------- Filtros do funil ---------- */
/* Divisor: buscar e filtrar são ações diferentes sobre a mesma lista. */
.metricas {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
  min-width: 0;
  padding-left: 14px;
  border-left: 1px solid var(--linha);
  overflow-x: auto;
  scrollbar-width: thin;
}
.metricas::-webkit-scrollbar { height: 3px; }
.metricas::-webkit-scrollbar-thumb { background: var(--linha); border-radius: 3px; }

/* A pastilha não encolhe: texto espremido é pior que rolar. E todas
   têm a mesma altura fixa — sem isso, a que está ativa (com peso de
   fonte diferente) fica um fio mais alta que as vizinhas. */
.metrica {
  flex: 0 0 auto;
  height: 30px;
}

@media (max-width: 900px) {
  /* Empilhado, e sem o divisor vertical — que viraria um traço solto. */
  .ferramentas { flex-wrap: wrap; }
  .busca { flex: 1 1 100%; max-width: none; }
  .metricas {
    flex: 1 1 100%;
    padding-left: 0;
    padding-top: 10px;
    border-left: 0;
    border-top: 1px solid var(--linha);
  }
}

/* ---------- Tabela ---------- */
.quadro__cartao {
  margin-top: 14px;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow-x: auto;
}

.tabela { width: 100%; border-collapse: collapse; min-width: 760px; }

.tabela th, .tabela td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--linha);
}
.tabela tbody tr:last-child th, .tabela tbody tr:last-child td { border-bottom: 0; }

.tabela thead th {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: #fafbfd;
  border-bottom: 1px solid var(--linha);
  white-space: nowrap;
}

.tabela tbody tr { transition: background 100ms ease; }
.tabela tbody tr:hover { background: #f7f9fc; }
.tabela tbody tr.selecionada {
  background: var(--blue-nevoa);
  box-shadow: inset 3px 0 0 var(--blue);
}

.col-check { width: 40px; }
.tabela input[type='checkbox'] {
  width: 16px; height: 16px;
  accent-color: var(--blue);
  cursor: pointer;
}

.lead-nome { font-weight: 700; color: var(--navy); }
.lead-extra {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  margin-top: 3px;
}

.contato a {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
}
.contato a:hover { text-decoration: underline; }
.contato .email {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  margin-top: 3px;
  word-break: break-all;
}

.celula-data {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-2);
  white-space: nowrap;
}

.estado {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.estado--fechado { font-weight: 700; }

.ponto {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.ponto--novo       { background: var(--f-novo); }
.ponto--follow     { background: var(--f-follow); }
.ponto--aguardando { background: var(--f-aguardando); }
.ponto--respondido { background: var(--f-respondido); }
.ponto--fechado    { background: var(--f-fechado); }
.ponto--perdido    { background: var(--f-perdido); }

.vazio {
  padding: 56px 28px;
  text-align: center;
  color: var(--ink-2);
}
.vazio strong { display: block; color: var(--ink); font-size: 16px; margin-bottom: 6px; }

/* =========================================================================
   Barra de lote — flutua sobre o rodapé quando há seleção.
   ========================================================================= */
.lote {
  position: fixed;
  left: calc(50% + var(--menu-larg) / 2);
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: calc(100vw - 32px);
  padding: 12px 18px;
  background: var(--navy);
  color: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(14, 22, 39, 0.4);
  z-index: 40;
  animation: lote-sobe 220ms ease both;
}
.lote[hidden] { display: none; }

@keyframes lote-sobe {
  from { transform: translate(-50%, 16px); opacity: 0; }
  to   { transform: translate(-50%, 0);    opacity: 1; }
}

.lote__contagem {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.lote select {
  padding: 9px 12px;
  font: inherit;
  font-size: 13.5px;
  color: #fff;
  background: var(--navy-alta);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--raio-s);
}

.lote__aplicar {
  padding: 9px 18px;
  border: 0;
  border-radius: var(--raio-s);
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  transition: background 140ms ease;
}
.lote__aplicar:hover { background: var(--blue-escuro); }

.lote__limpar {
  padding: 9px 12px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.lote__limpar:hover { color: #fff; }

/* =========================================================================
   Modal de cadastro manual
   ========================================================================= */
.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
}
.modal[hidden] { display: none; }

.modal__fundo {
  position: absolute;
  inset: 0;
  background: rgba(14, 22, 39, 0.6);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.modal__caixa {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--branco);
  border-radius: var(--raio);
  box-shadow: 0 30px 70px rgba(14, 22, 39, 0.45);
  animation: modal-entra 180ms ease both;
}

@keyframes modal-entra {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.modal__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--linha);
}
.modal__topo h2 { font-size: 17px; color: var(--navy); }

.modal__fechar {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--raio-s);
  background: transparent;
  color: var(--ink-2);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.modal__fechar:hover { background: var(--off); color: var(--ink); }

/* ---------- Formulário ---------- */
.form { padding: 20px 22px 22px; }

.form__linha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.campo { display: block; margin-bottom: 14px; }

.campo > span {
  display: block;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.campo > span em { color: var(--vermelho); font-style: normal; }

.campo input,
.campo select {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 14.5px;
  color: var(--ink);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-s);
}
.campo input:focus,
.campo select:focus { border-color: var(--blue); outline: none; }

.form__dica {
  margin: -6px 0 16px;
  font-size: 12.5px;
  color: var(--ink-2);
}

.form__erro {
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: var(--raio-s);
  background: #fdecea;
  border: 1px solid #f5c6c2;
  color: var(--vermelho);
  font-size: 13px;
}
.form__erro[hidden] { display: none; }

.modal__acoes {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}

.botao-principal {
  padding: 10px 20px;
  border: 0;
  border-radius: var(--raio-s);
  background: var(--blue);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background 140ms ease;
}
.botao-principal:hover { background: var(--blue-escuro); }
.botao-principal:disabled { opacity: 0.6; cursor: progress; }

.botao-secundario {
  padding: 10px 18px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-s);
  background: var(--branco);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.botao-secundario:hover { background: var(--off); }

@media (max-width: 560px) {
  .form__linha { grid-template-columns: 1fr; gap: 0; }
}

/* =========================================================================
   Mobile: menu vira gaveta, como o painel base escondia o dele.
   ========================================================================= */
@media (max-width: 900px) {
  .menu {
    transform: translateX(-100%);
    transition: transform 200ms ease;
    box-shadow: 20px 0 60px rgba(14, 22, 39, 0.35);
  }
  body.menu-aberto .menu { transform: translateX(0); }
  body.menu-aberto .menu-veu[hidden] { display: block; }

  .principal { margin-left: 0; }
  .menu-btn { display: inline-flex; }
  .lote { left: 50%; }

  .topbar, .content { padding-left: 16px; padding-right: 16px; }
  .tabela th:nth-child(4), .tabela td:nth-child(4),
  .tabela th:nth-child(5), .tabela td:nth-child(5) { display: none; }
  .tabela { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lote { animation: none; }
  .menu { transition: none; }
  .cartao-login button::after { display: none; }
}

/* =========================================================================
   ABAS DE VISTA (topbar) — lista x quadro. No mobile o menu lateral vive
   fechado; sem este par no topo, trocar de vista custaria dois toques.
   ========================================================================= */
.abas {
  display: inline-flex;
  margin-left: auto;
  padding: 3px;
  background: var(--off);
  border: 1px solid var(--linha);
  border-radius: 10px;
}

.abas__botao {
  padding: 7px 16px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.abas__botao:hover { color: var(--ink); }

.abas__botao--ativo {
  background: var(--branco);
  color: var(--navy);
  box-shadow: 0 1px 2px rgba(14, 22, 39, 0.12);
}

/* A topbar tinha um só empurrão para a direita (o "Sair"); agora quem
   empurra é o grupo de abas. */
.topbar .logout { margin-left: 12px; }

.vista[hidden] { display: none; }

/* =========================================================================
   QUADRO (kanban) — uma coluna por estágio do funil.
   ========================================================================= */
.kanban {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 14px;
  /* SEM overflow próprio: com ele, a barra horizontal nascia DENTRO do
     quadro — colada embaixo das colunas, no meio da tela. Agora o
     quadro só é largo, e quem rola é a página: a barra vai para o
     rodapé do navegador, onde se espera encontrá-la.
     `width: max-content` faz o quadro assumir a largura real das
     colunas, o que é o que dispara a rolagem da página. */
  width: max-content;
  min-width: 100%;
}

/* As cinco colunas dividem a largura disponível em vez de terem largura
   fixa: um funil cujo fim vive fora da tela não é um funil — e não dá
   para soltar um cartão numa coluna que ninguém enxerga. Abaixo de
   ~1.100px de área útil elas param de encolher e o quadro rola. */
.coluna {
  display: flex;
  flex-direction: column;
  /* Cada coluna tem a SUA largura: --larg é escrita pelo JS no próprio
     elemento ao arrastar a borda, e o padrão global serve de base para
     as que nunca foram ajustadas. */
  flex: 0 0 var(--larg, var(--col-larg, 260px));
  width: var(--larg, var(--col-larg, 260px));
  min-width: 0;
  /* SEM max-height de propósito: com teto, cada coluna ganhava barra de
     rolagem própria e o quadro virava seis áreas de rolagem
     independentes. Agora a coluna cresce com o conteúdo e quem rola é a
     página — uma barra só, a do navegador. */
  background: #e9edf4;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  transition: background 140ms ease, box-shadow 140ms ease;
}

.coluna__topo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid rgba(14, 22, 39, 0.08);
}

.coluna__titulo {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
}

.coluna__contagem {
  margin-left: auto;
  min-width: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(14, 22, 39, 0.09);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
  color: var(--ink-2);
}

/* A coluna do cliente fechado é a única dourada — a conversão, como na LP. */
/* Cada coluna assume a cor do seu estágio no filete e na contagem. */
.coluna--novo       .coluna__topo { border-bottom-color: var(--f-novo); }
.coluna--novo       .coluna__contagem { background: var(--f-novo); color: #3d2600; }
.coluna--follow     .coluna__topo { border-bottom-color: var(--f-follow); }
.coluna--follow     .coluna__contagem { background: var(--f-follow); color: #fff; }
.coluna--aguardando .coluna__topo { border-bottom-color: var(--f-aguardando); }
.coluna--aguardando .coluna__contagem { background: var(--f-aguardando); color: #fff; }
.coluna--respondido .coluna__topo { border-bottom-color: var(--f-respondido); }
.coluna--respondido .coluna__contagem { background: var(--f-respondido); color: #fff; }
.coluna--fechado    .coluna__topo { border-bottom-color: var(--f-fechado); }
.coluna--fechado    .coluna__contagem { background: var(--f-fechado); color: #fff; }
.coluna--perdido    .coluna__topo { border-bottom-color: var(--f-perdido); }
.coluna--perdido    .coluna__contagem { background: var(--f-perdido); color: #fff; }

.coluna__pilha {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 96px;
  padding: 12px;
}

.coluna__vazia {
  margin: auto;
  padding: 18px 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: #9aa3b2;
}

/* Coluna sob o cartão que está sendo arrastado. */
.coluna--alvo {
  background: var(--blue-nevoa);
  box-shadow: inset 0 0 0 2px var(--blue);
}

/* =========================================================================
   CARTÃO DO QUADRO — compacto por padrão, detalhe sob demanda.

   Fechado: uma linha com ponto de estágio, nome, origem e tempo parado.
   ~48px de altura, contra ~150px do formato anterior — cabem três vezes
   mais leads por tela, que é a razão de existir de um quadro.

   Aberto (pela seta): contato e edição, sem virar outra tela.
   ========================================================================= */
.cartao {
  position: relative;
  padding: 9px 10px;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--linha);
  border-radius: 8px;
  cursor: pointer;
  transition: box-shadow 120ms ease, border-color 120ms ease;
}
.cartao:hover { box-shadow: 0 3px 10px rgba(14, 22, 39, 0.10); }
.cartao:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------- Linha compacta (sempre visível) ---------- */
.cartao__linha {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Ponto do estágio no lugar do avatar: o avatar ocupava 34px para
   repetir a inicial de um nome que está logo ao lado. */
.cartao__ponto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.cartao__id { min-width: 0; flex: 1; }

.cartao__nome {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cartao__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.cartao__origem {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cartao__valor { color: var(--f-fechado); font-weight: 700; }

.cartao__tempo {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--ink-2);
  white-space: nowrap;
}

/* ---------- Seta ---------- */
.cartao__seta {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 120ms ease, transform 160ms ease;
}
.cartao__seta svg { width: 13px; height: 13px; }
.cartao__seta:hover { background: var(--off); color: var(--ink); }
.cartao--aberto .cartao__seta { transform: rotate(180deg); }

/* ---------- Detalhe (expandido) ---------- */
.cartao__detalhe {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--linha);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-2);
  line-height: 1.9;
  animation: detalhe-abre 140ms ease both;
}

@keyframes detalhe-abre {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cartao__detalhe { animation: none; }
  .cartao__seta { transition: background 120ms ease; }
}

.cartao__email { display: block; word-break: break-all; }

/* O nome editável fica no detalhe, não na linha compacta: ali ele
   precisa caber numa linha só e cortar com reticências — e um campo
   que corta texto ao editar é armadilha. */
.cartao__nome-edit {
  display: block;
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink);
}
.cartao__nome-edit::before {
  content: 'nome: ';
  font-family: var(--mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-2);
}


.coluna--novo       .cartao { border-left-color: var(--f-novo); }
.coluna--follow     .cartao { border-left-color: var(--f-follow); }
.coluna--aguardando .cartao { border-left-color: var(--f-aguardando); }
.coluna--respondido .cartao { border-left-color: var(--f-respondido); }
.coluna--fechado    .cartao { border-left-color: var(--f-fechado); }
.coluna--perdido    .cartao { border-left-color: var(--f-perdido); }

/* A pega é o único ponto que inicia arraste no toque: touch-action none
   só AQUI, para o dedo continuar rolando o resto do quadro. */



.cartao__id { min-width: 0; }

.cartao__nome {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  overflow-wrap: anywhere;
}





.cartao__email {
  display: block;
  margin-top: 3px;
  word-break: break-all;
}


.etiqueta {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--off);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cartao__tempo {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10.5px;
  color: #9aa3b2;
  white-space: nowrap;
}

/* ---------- Estados do arraste ---------- */
/* O cartão original vira um buraco: mostra de onde o cartão saiu. */
.cartao--saiu {
  opacity: 0.32;
  filter: grayscale(1);
}

.cartao--fantasma {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 80;
  pointer-events: none;   /* precisa sumir do elementFromPoint */
  box-shadow: 0 22px 44px rgba(14, 22, 39, 0.34);
  opacity: 0.96;
}

body.arrastando { cursor: grabbing; user-select: none; }

/* =========================================================================
   Ficha do lead — o cartão aberto por inteiro.
   ========================================================================= */
.modal__caixa--ficha { width: min(520px, 100%); }

.ficha__topo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  background: linear-gradient(180deg, var(--navy-alta), var(--navy));
  border-radius: var(--raio) var(--raio) 0 0;
  color: #fff;
}

.ficha__avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--navy), 0 0 0 4px rgba(255, 255, 255, 0.22);
}
.ficha__avatar--novo       { background: var(--f-novo); color: #3d2600; }
.ficha__avatar--follow     { background: var(--f-follow); }
.ficha__avatar--aguardando { background: var(--f-aguardando); }
.ficha__avatar--respondido { background: var(--f-respondido); }
.ficha__avatar--fechado    { background: var(--f-fechado); }
.ficha__avatar--perdido    { background: var(--f-perdido); }

.ficha__id { min-width: 0; flex: 1; }
.ficha__id h2 { font-size: 19px; color: #fff; overflow-wrap: anywhere; }

.ficha__sub {
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

.ficha__topo .modal__fechar { color: rgba(255, 255, 255, 0.7); }
.ficha__topo .modal__fechar:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

.ficha__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 22px 0;
}
.ficha__acoes:empty { display: none; }

.acao {
  padding: 8px 14px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-s);
  background: var(--branco);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}
.acao:hover { background: var(--off); }
.acao--whats { border-color: var(--verde); color: var(--verde); }
.acao--whats:hover { background: #eaf6f0; }

.ficha__corpo { padding: 16px 22px 22px; }

.campo--estagio { margin-bottom: 18px; }

.ficha__linha {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--linha);
}
.ficha__linha:last-child { border-bottom: 0; }

.ficha__linha dt {
  padding-top: 2px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.ficha__linha dd { overflow-wrap: anywhere; }
.ficha__linha dd a { color: var(--blue); font-weight: 600; text-decoration: none; }
.ficha__linha dd a:hover { text-decoration: underline; }

.ficha__linha--id dd code {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
}

.ficha__relativo {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
}

.ficha__nada { color: var(--ink-2); font-size: 13.5px; }

/* O nome na tabela virou botão (abre a mesma ficha do quadro): tira a
   cara de botão e devolve a de nome forte que ele já tinha. */
button.lead-nome {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--navy);
  text-align: left;
  cursor: pointer;
}
button.lead-nome:hover { color: var(--blue); text-decoration: underline; }

@media (max-width: 900px) {
  /* Colunas quase de tela cheia, roladas na horizontal como no Trello.
     No celular a largura é fixa: redimensionar arrastando a borda é
     gesto de mouse, e ali o dedo precisa da largura inteira. */
  .coluna { flex: 0 0 82vw; width: 82vw; }
  .redimensionador { display: none; }
  .abas__botao { padding: 7px 11px; letter-spacing: 0.08em; }
  .ficha__linha { grid-template-columns: 1fr; gap: 2px; }
}

@media (max-width: 620px) {
  .topbar h1 { font-size: 16px; }
  .topbar__sub { display: none; }
  .abas__botao { font-size: 10px; padding: 7px 9px; }
  .logout { padding: 8px 10px; font-size: 0; gap: 0; }
  .logout svg { width: 17px; height: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .cartao:hover { transform: none; }
}


/* =========================================================================
   Ficha: bloco editável (estágio + valor fechado)
   ========================================================================= */
.ficha__editaveis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}

.campo-moeda {
  display: flex;
  align-items: center;
  border: 1px solid var(--linha);
  border-radius: var(--raio-s);
  background: var(--branco);
  overflow: hidden;
}
.campo-moeda:focus-within { border-color: var(--blue); }

.campo-moeda__prefixo {
  padding: 0 10px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-2);
  background: var(--off);
  align-self: stretch;
  display: grid;
  place-items: center;
}

.campo-moeda input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 0;
  outline: none;
  font: inherit;
  font-size: 14.5px;
  color: var(--ink);
}

.campo__nota {
  display: block;
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--f-fechado);
}
.campo__nota:empty { display: none; }

.campo__erro {
  display: block;
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--vermelho);
}
.campo__erro[hidden] { display: none; }

@media (max-width: 560px) {
  .ficha__editaveis { grid-template-columns: 1fr; }
}

/* Valor fechado: verde de dinheiro, aparecendo no lugar da etiqueta de
   origem quando existe — no cartao, quanto vale importa mais que de
   onde veio. */
.etiqueta--valor {
  background: #e2f4ea;
  color: var(--f-fechado);
  font-weight: 700;
}

.celula-valor {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--f-fechado);
}


/* =========================================================================
   Redimensionador de coluna — a borda direita vira uma alça de arrastar,
   como o cabeçalho de coluna de uma planilha.
   ========================================================================= */
.coluna { position: relative; }

.redimensionador {
  position: absolute;
  top: 0;
  right: -7px;      /* metade sobre o gap: alvo maior sem invadir o vizinho */
  width: 14px;
  height: 100%;
  z-index: 3;
  cursor: col-resize;
  /* Sem fundo: só o traço do ::after aparece, e mesmo assim no hover. */
  background: transparent;
  border: 0;
  padding: 0;
  touch-action: none;
}

.redimensionador::after {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  border-radius: 3px;
  background: var(--blue);
  opacity: 0;
  transition: opacity 120ms ease;
}
.redimensionador:hover::after,
.redimensionador:focus-visible::after,
.redimensionador--ativo::after { opacity: 1; }

/* Enquanto arrasta: o cursor não muda ao passar sobre outros elementos e
   nada é selecionado por engano. */
body.redimensionando {
  cursor: col-resize;
  user-select: none;
}


/* =========================================================================
   LISTA — refinamento de hierarquia e edição inline

   O que a tela precisa entregar, em ordem: QUEM é o lead, EM QUE ponto
   do funil está, e COMO falar com ele. Tudo o mais é apoio.
   ========================================================================= */

/* Filete da cor do estágio na primeira célula: dá o estado da linha
   antes de o olho chegar na última coluna. */
.tabela tbody tr { position: relative; }
.tabela tbody td:first-child { box-shadow: inset 3px 0 0 var(--cor-linha, transparent); }
tr.linha--novo       { --cor-linha: var(--f-novo); }
tr.linha--follow     { --cor-linha: var(--f-follow); }
tr.linha--aguardando { --cor-linha: var(--f-aguardando); }
tr.linha--respondido { --cor-linha: var(--f-respondido); }
tr.linha--fechado    { --cor-linha: var(--f-fechado); }
tr.linha--perdido    { --cor-linha: var(--f-perdido); }

/* O nome é o elemento âncora da linha — ganha peso e tamanho. */
/* O nome vira campo editável nas DUAS vistas; a ficha passa a ter um
   atalho próprio ao lado, para clicar no nome significar sempre a mesma
   coisa (editar), aqui e no quadro. */
.lead-nome.editavel {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--navy);
}

.lead-ficha {
  margin-left: 6px;
  padding: 2px 7px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: var(--branco);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease, border-color 120ms ease, color 120ms ease;
}
/* Só aparece com o mouse na linha: um botão por linha, sempre visível,
   viraria uma coluna de ruído. */
tr:hover .lead-ficha,
.lead-ficha:focus-visible { opacity: 1; }
.lead-ficha:hover { border-color: var(--blue); color: var(--blue); }

/* Campo editável: parece texto até o mouse chegar perto. A borda
   tracejada só no hover avisa "isto se edita" sem transformar a tabela
   num formulário. */
/* Campo editável: parece dado até o mouse chegar. O lápis aparece no
   hover — a borda sozinha não dizia O QUE fazer, e ninguém adivinha que
   um texto de tabela aceita clique. */
.editavel {
  display: inline-block;
  position: relative;
  min-width: 40px;
  padding: 3px 20px 3px 6px;
  margin: -3px -6px;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: text;
  transition: border-color 120ms ease, background 120ms ease;
}

.editavel::after {
  content: '';
  position: absolute;
  right: 5px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -5.5px;
  opacity: 0;
  transition: opacity 120ms ease;
  /* Lápis em SVG embutido: sem requisição extra e herda o tom do texto. */
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.editavel:hover {
  border-color: var(--linha);
  background: var(--off);
}
.editavel:hover::after { opacity: 0.45; }

.editavel:focus {
  outline: none;
  border-color: var(--blue);
  background: var(--branco);
  box-shadow: 0 0 0 3px rgba(47, 90, 174, 0.12);
}
.editavel:focus::after { opacity: 0; }
.editavel--vazio::before {
  content: attr(data-vazio);
  color: var(--ink-2);
  opacity: 0.6;
}

/* Salvando / salvo: um piscar curto no fundo, sem toast nem alerta —
   a mudança é pequena e a confirmação também deve ser. */
.editavel--salvando { border-color: var(--blue); border-style: solid; opacity: 0.6; }
.editavel--salvo { animation: campo-salvo 900ms ease; }
@keyframes campo-salvo {
  0%   { background: #dff3e6; border-color: var(--f-fechado); }
  100% { background: transparent; border-color: transparent; }
}
.editavel--erro { border-color: var(--f-perdido); border-style: solid; background: #fdecea; }

/* Seletor de estágio direto na linha: trocar de etapa é a ação mais
   frequente da tela e não deveria exigir abrir a ficha. */
.estagio-select {
  appearance: none;
  padding: 5px 26px 5px 22px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: var(--branco);
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
                    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: right 11px center, right 7px center;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 120ms ease;
}
.estagio-select:hover { border-color: var(--cor-linha, var(--blue)); }
.estagio-select:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

/* O ponto colorido vive no wrapper, não no <select> (que não aceita
   pseudo-elemento de forma confiável entre navegadores). */
.celula-estagio { position: relative; display: inline-block; }
.celula-estagio::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--cor-linha, var(--ink-2));
  pointer-events: none;
  z-index: 1;
}


/* A célula de contato agora tem campos editáveis + o atalho do
   WhatsApp. O telefone é o dado; "WhatsApp" é a ação — separados, para
   clicar num não significar editar o outro. */
.contato { line-height: 1.5; }

.contato [data-campo='whatsapp'] {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}

.contato__link {
  margin-left: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--f-fechado);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.contato__link:hover { border-bottom-color: currentColor; }

.contato .email {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  word-break: break-all;
}


/* =========================================================================
   Cartão do quadro — as mesmas ações da lista
   ========================================================================= */


.cartao__email {
  display: block;
  font-size: 10.5px;
  word-break: break-all;
}


/* No cartão o campo editável ocupa a linha inteira ao focar, para o
   texto não ficar espremido contra a borda. */


/* =========================================================================
   Sidebar recolhida — o quadro ganha ~200px de largura útil
   ========================================================================= */
body.menu-recolhido {
  --menu-larg: 64px;
}

/* Some tudo que é texto; ficam os ícones, centralizados. */
body.menu-recolhido .box-usuario { padding: 14px 8px; }
body.menu-recolhido .avatar {
  width: 40px;
  height: 40px;
  font-size: 15px;
  margin-bottom: 0;
  box-shadow: 0 0 0 2px var(--navy), 0 0 0 3px var(--gold);
}
body.menu-recolhido .usuario-nome,
body.menu-recolhido .usuario-cargo,
body.menu-recolhido .items-menu h2 { display: none; }

body.menu-recolhido .item {
  justify-content: center;
  padding: 12px 0;
  gap: 0;
  font-size: 0;            /* esconde o rótulo sem tirá-lo do DOM */
  border-left-width: 2px;
}
body.menu-recolhido .item svg { width: 19px; height: 19px; }

/* O rótulo volta como dica ao passar o mouse — sem ele, uma coluna de
   ícones sem legenda vira adivinhação. */
body.menu-recolhido .item { position: relative; }
body.menu-recolhido .item:hover::after {
  content: attr(data-rotulo);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--navy-deep);
  color: #fff;
  font-family: var(--sans);
  font-size: 12px;
  white-space: nowrap;
  z-index: 40;
  box-shadow: var(--sombra);
}

.menu, .principal { transition: margin-left 160ms ease, width 160ms ease; }

@media (prefers-reduced-motion: reduce) {
  .menu, .principal { transition: none; }
}

/* Atalho dentro da mensagem de vazio: parece link, é botão (a ação é
   local, não navega para lugar nenhum). */
.vazio__acao {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: var(--blue);
  text-decoration: underline;
  cursor: pointer;
}
.vazio__acao:hover { color: var(--blue-escuro); }

/* =========================================================================
   Regras que se perderam em reescritas anteriores deste arquivo.
   ========================================================================= */

/* Contêiner das linhas de dados da ficha (o <dl>). Sem ele, o navegador
   aplica a margem padrão de definition list e o bloco desalinha. */
.ficha__dados {
  margin: 0;
  padding: 0;
}

/* Caixa de seleção da lista: o tamanho padrão do sistema é pequeno
   demais para um alvo de clique numa linha de 60px. */
.check-lead {
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
  cursor: pointer;
}

/* O campo de valor ocupa a linha inteira quando a ficha empilha. */
.campo--valor { min-width: 0; }


/* =========================================================================
   COLUNA RECOLHIDA — a coluna vira uma faixa da largura de um emoji.

   Continua no DOM e continua aceitando cartões arrastados: dá para
   mover um lead para "Perdido" sem reabrir a coluna. Recolher é tirar
   do caminho, não esconder.
   ========================================================================= */

/* Botão de recolher, no cabeçalho da coluna aberta. */
.coluna__recolher {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease, background 120ms ease;
}
.coluna__recolher svg { width: 13px; height: 13px; }
/* Só aparece com o mouse na coluna: seis setas sempre visíveis seriam
   ruído num quadro que já tem muita informação. */
.coluna:hover .coluna__recolher,
.coluna__recolher:focus-visible { opacity: 1; }
.coluna__recolher:hover { background: var(--branco); color: var(--ink); }

/* ---------- A faixa recolhida ---------- */
.coluna--recolhida {
  flex: 0 0 44px !important;   /* vence o --larg inline do redimensionador */
  width: 44px !important;
  min-width: 44px;
  align-self: stretch;
  background: var(--branco);
  border-left-width: 3px;
  border-left-style: solid;
  border-left-color: var(--cor-recolhida, var(--linha));
  overflow: hidden;
}

/* Cada estágio pinta o filete da faixa com a sua cor. */
.coluna--recolhida.coluna--novo       { --cor-recolhida: var(--f-novo); }
.coluna--recolhida.coluna--follow     { --cor-recolhida: var(--f-follow); }
.coluna--recolhida.coluna--aguardando { --cor-recolhida: var(--f-aguardando); }
.coluna--recolhida.coluna--respondido { --cor-recolhida: var(--f-respondido); }
.coluna--recolhida.coluna--fechado    { --cor-recolhida: var(--f-fechado); }
.coluna--recolhida.coluna--perdido    { --cor-recolhida: var(--f-perdido); }

.coluna__reabrir {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 150px;
  padding: 12px 0 14px;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: background 120ms ease;
}
.coluna__reabrir:hover { background: var(--off); }

.coluna__emoji { font-size: 17px; line-height: 1; }

.coluna__contagem--vertical {
  min-width: 22px;
  margin-left: 0;
}

/* O nome do estágio de lado, como nas abas de uma pasta de arquivo:
   ocupa 0 de largura extra e ainda identifica a coluna. */
.coluna__titulo-vertical {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}

/* Alvo de solta: a faixa acende inteira quando um cartão passa por
   cima — em 44px não há espaço para um contorno discreto funcionar. */
.coluna--recolhida.coluna--alvo {
  background: var(--blue-nevoa);
  box-shadow: inset 0 0 0 2px var(--blue);
}
.coluna--recolhida.coluna--alvo .coluna__titulo-vertical { color: var(--blue); }


/* =========================================================================
   REUNIÃO AGENDADA (Cal.com)
   ========================================================================= */

/* Selo no cartão fechado: um emoji basta para dizer "tem reunião" —
   a data completa vem no title e no cartão aberto. */
.selo-reuniao {
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 1;
  cursor: help;
}

.reuniao {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: #eef4ff;
  border: 1px solid #d3e0f7;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--f-follow);
}

.reuniao__icone { font-size: 11px; }
.reuniao__quando { font-weight: 700; }

.reuniao__link {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--f-follow);
  color: #fff;
  text-decoration: none;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.reuniao__link:hover { background: var(--blue-escuro); }

/* Cancelada continua visível, riscada: "ele cancelou" é informação de
   trabalho — sumir com o registro faria parecer que nunca marcou. */
.reuniao--cancelada {
  background: #fdecea;
  border-color: #f5c6c2;
  color: var(--f-perdido);
}
.reuniao--cancelada .reuniao__quando { text-decoration: line-through; }
.reuniao__aviso {
  margin-left: auto;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

/* Já aconteceu: perde o destaque, vira registro. */
.reuniao--passada {
  background: var(--off);
  border-color: var(--linha);
  color: var(--ink-2);
}
.reuniao--passada .reuniao__link { background: var(--ink-2); }

/* Na lista, embaixo do "recebido". */
.celula-reuniao {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--f-follow);
  font-weight: 700;
  white-space: nowrap;
}