/* Console de Mentoria — CSS à mão, mobile primeiro.
   Uso principal: celular, no trânsito, entre reuniões.

   DNA visual: o design system do Método Kata — petróleo #042D42, areia
   #E6E6D9 e laranja #C4760C, serifada nos títulos. Veio do handoff em
   docs/design/handoff-plataforma/. Substituiu o tema preto+prata de
   agosto, que por sua vez tinha substituído o azul do começo.

   Os tokens vivem em static/tokens.css; aqui só existe o mapa de nomes
   antigos para eles.

   Escuro apenas, de propósito: a referência da landing nunca teve modo
   claro, e inventar um seria interpretação, não sistema. */

@font-face { font-family: 'Inter'; font-weight: 300; font-display: swap;
  src: url(/static/fonts/Inter-300.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap;
  src: url(/static/fonts/Inter-400.woff2) format('woff2'); }

:root {
  /* Camada de ALIAS: os nomes antigos continuam valendo para as ~100
     regras já escritas, mas agora apontam para os tokens do design
     system (static/tokens.css). Migrar assim trocou o produto inteiro
     sem reescrever regra por regra — mesma jogada de agosto. */
  --fundo: var(--surface-base);
  --superficie: var(--surface-raised);
  --superficie-alta: rgba(230, 230, 217, .06);
  --borda: var(--line);
  --borda-forte: var(--line-strong);
  --texto: var(--text-primary);
  --texto-fraco: var(--text-secondary);
  --apagado: var(--text-muted);

  /* O acento do sistema agora é o laranja. `--prata` sobrevive só como
     nome; o que ele aponta é accent-action. */
  --prata: var(--accent-action);
  --prata-escura: var(--accent-label);
  --brilho: var(--accent-ring);
  --acento: var(--accent-action);

  /* VERMELHO NÃO EXISTE NO SISTEMA. Alerta e erro são laranja com peso,
     borda e halo — não cor nova. Os três nomes continuam para não
     quebrar regra existente, mas todos apontam para o mesmo laranja. */
  --ok: var(--text-secondary);
  --atencao: var(--accent-label);
  --critico: var(--accent-action);

  --titulo: var(--font-titulo);
  --corpo: var(--font-corpo);
  --dado: var(--font-dado);

  --raio: var(--chanfro);
  --raio-carta: var(--chanfro-bloco);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 300 16px/1.55 var(--corpo);
  padding-bottom: env(safe-area-inset-bottom);
}

a { color: inherit; text-decoration: none; }

h1, h2, h3 { font-family: var(--titulo); font-weight: 600; }

/* ---------- topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  padding-top: max(12px, env(safe-area-inset-top));
  background: rgba(2, 26, 39, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borda);
}

.marca {
  font-family: var(--titulo); font-weight: 700;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--prata); text-shadow: 0 0 12px var(--brilho);
}
.marca span {
  color: var(--apagado); font-weight: 400; margin-left: 6px;
  text-shadow: none; letter-spacing: .14em;
}

.topo nav { display: flex; gap: 2px; }
.topo nav a {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: var(--alvo); padding: 0 11px;
  border-radius: var(--raio);
  color: var(--apagado); font-size: 13px; font-weight: 400;
  border: 1px solid transparent;
}
.topo nav a:hover { color: var(--texto); }
.topo nav a.ativo {
  color: var(--text-primary);
  border-color: var(--borda-forte);
  background: var(--superficie-alta);
}

.badge {
  background: var(--critico); color: var(--on-accent);
  font-size: 11px; font-weight: 700;
  min-width: 18px; padding: 1px 5px;
  border-radius: 9px; text-align: center;
}

/* ---------- layout ---------- */
main { padding: 18px 16px 48px; max-width: 780px; margin: 0 auto; }

h1 {
  font-size: 28px; margin: 6px 0 4px;
  letter-spacing: -.02em; line-height: 1.15; color: var(--text-primary);
}

.resumo, .vazio { color: var(--texto-fraco); font-size: 14px; margin: 0 0 16px; }
.vazio a, .resumo a { color: var(--prata); text-decoration: underline;
  text-underline-offset: 3px; }

/* ---------- cartões da torre ---------- */
.cartoes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--borda-forte);
  border-radius: var(--raio-carta);
  overflow: hidden;
}
.cartao > a { display: block; padding: 15px 16px; }

.cartao.risco-ok      { border-left-color: var(--ok); }
.cartao.risco-atencao { border-left-color: var(--atencao); }
.cartao.risco-critico { border-left-color: var(--critico); }

.cartao-topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.cartao-topo strong { display: block; font-size: 16px; font-weight: 400; color: var(--text-primary); }
.empresa { color: var(--texto-fraco); font-size: 13px; }

.dias {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-size: 13px; font-weight: 400;
  color: var(--texto-fraco);
  background: var(--superficie-alta);
  border: 1px solid var(--borda);
  padding: 3px 8px; border-radius: 999px;
}
.risco-atencao .dias { color: var(--atencao); }
.risco-critico .dias { color: var(--critico); }

.barra {
  height: 5px; border-radius: 3px;
  background: rgba(230, 230, 217, .09);
  overflow: hidden;
}
.barra > span {
  display: block; height: 100%;
  background: var(--accent-action);
  box-shadow: 0 0 8px var(--brilho);
  border-radius: 3px;
}

.cartao-rodape {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 10px;
  font-size: 13px; color: var(--texto-fraco);
  font-variant-numeric: tabular-nums;
}
.cartao-rodape .alerta { color: var(--critico); }

/* ---------- login ---------- */
.login {
  max-width: 340px; margin: 15vh auto 0;
  display: grid; gap: 10px;
}
.login h1 { text-align: center; margin-bottom: 12px; }
.login h1 span {
  display: block; color: var(--apagado); font-family: var(--corpo);
  font-weight: 300; font-size: 14px; letter-spacing: 0; margin-top: 4px;
}
.login label { font-size: 13px; color: var(--texto-fraco); }

input, button {
  font: inherit;
  min-height: var(--alvo);
  border-radius: var(--raio);
  border: 1px solid var(--borda);
  padding: 0 12px;
}
input {
  background: rgba(230, 230, 217, .04);
  color: var(--texto);
  width: 100%;
}
input::placeholder { color: var(--apagado); }
input:focus, button:focus-visible {
  outline: 1px solid var(--prata-escura); outline-offset: 1px;
  border-color: var(--borda-forte);
}

button {
  background: var(--accent-action);
  color: var(--on-accent);
  font-family: var(--titulo); font-weight: 600;
  border: none; cursor: pointer;
}
button:hover { box-shadow: 0 0 18px rgba(196, 118, 12, .18); }
button:active { filter: brightness(.92); }

.erro {
  background: rgba(196, 118, 12, .1);
  border: 1px solid var(--critico);
  color: var(--critico);
  padding: 9px 12px; border-radius: var(--raio);
  font-size: 14px; margin: 0;
}

/* ---------- ficha do mentorado ---------- */
.voltar { display: inline-block; color: var(--texto-fraco); font-size: 14px; margin-bottom: 10px; }

.ficha h1 { margin-bottom: 2px; }
.ficha .sub { color: var(--texto-fraco); font-size: 14px; margin: 0 0 2px; }
.contato {
  margin-top: 12px; width: 100%;
  background: var(--superficie-alta); color: var(--texto);
  border: 1px solid var(--borda);
}

.indicadores {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; margin: 16px 0;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--borda-forte);
  border-radius: var(--raio-carta);
  padding: 14px 12px;
}
.indicadores.risco-ok      { border-left-color: var(--ok); }
.indicadores.risco-atencao { border-left-color: var(--atencao); }
.indicadores.risco-critico { border-left-color: var(--critico); }
.indicadores > div { text-align: center; }
.indicadores strong {
  display: block; font-size: 20px;
  font-family: var(--titulo); font-weight: 700; color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.indicadores strong.alerta { color: var(--critico); }
.indicadores span { font-size: 11px; color: var(--texto-fraco); }

/* ---------- meta ---------- */
.meta {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-carta); padding: 16px; margin-bottom: 20px;
}
.meta h2 { font-size: 16px; margin: 0 0 10px; }
.meta .unidade { color: var(--texto-fraco); font-weight: 400; font-size: 14px; }
.meta-numeros {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.meta-numeros .seta { color: var(--texto-fraco); }
.meta-numeros .baseline, .meta-numeros .alvo { color: var(--texto-fraco); font-size: 15px; }
input.meta-atual { width: 90px; text-align: center; font-weight: 600; min-height: 38px; }
.meta .ajuda { color: var(--texto-fraco); font-size: 12px; margin: 8px 0 0; }
.meta-nova { display: grid; gap: 8px; }
.meta-nova .trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

/* ---------- trilha ---------- */
.trilha h2, .tarefas h2 { font-size: 16px; margin: 20px 0 8px; }
.bloco {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--texto-fraco); margin: 14px 0 6px;
}
.sessoes, .lista-tarefas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

.sessao {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 11px 13px;
}
.sessao.feita { opacity: 0.72; }
.sessao-cabeca { display: flex; gap: 10px; align-items: baseline; }
.ordem {
  flex-shrink: 0; width: 22px; text-align: center;
  font-size: 12px; font-weight: 700; color: var(--texto-fraco);
}
.sessao-texto strong { font-size: 15px; font-weight: 600; }
.prevista { display: block; font-size: 12px; color: var(--texto-fraco); }

.marcos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.marco {
  display: flex; align-items: center; gap: 7px;
  background: transparent; border: 1px solid var(--borda);
  color: var(--texto-fraco); font-size: 13px; font-weight: 500;
  text-align: left; padding: 0 10px; min-height: var(--alvo);
  border-radius: var(--raio); cursor: pointer;
}
.marco.ligado { color: var(--texto); border-color: var(--ok); }
.caixa {
  flex-shrink: 0;
  width: 19px; height: 19px; border-radius: 5px;
  border: 1.5px solid var(--borda);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; line-height: 1;
}
.marco.ligado .caixa { background: var(--ok); border-color: var(--ok); color: var(--text-primary); }

/* portal do mentorado */
.link-portal { color: var(--acento); text-decoration: underline; font-variant-numeric: tabular-nums; }
.ajuda-inline { font-size: 11px; color: var(--texto-fraco); }
.portal .indicadores { grid-template-columns: repeat(4, 1fr); }

/* gate de fase */
.sessao.bloqueada { opacity: 0.55; }
.marco.travado { cursor: not-allowed; color: var(--texto-fraco); }
.marco.travado .caixa { border-style: dashed; font-size: 10px; }
.bloco .cadeado { margin-left: 6px; }

/* ---------- tarefas ---------- */
.tarefa-nova { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin-bottom: 10px; }
.tarefa-nova input[type="date"] { grid-column: 1; }
.tarefa-nova button { grid-column: 2; grid-row: 1 / 3; }

.tarefa {
  display: flex; align-items: center; gap: 8px;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding-right: 10px;
}
.tarefa .marco { flex: 1; border: none; }
.tarefa.concluida { opacity: 0.55; }
.tarefa.concluida .descricao { text-decoration: line-through; }
.tarefa.concluida .caixa { background: var(--ok); border-color: var(--ok); color: var(--text-primary); }
.tarefa.atrasada { border-color: var(--critico); }
.tarefa .prazo { font-size: 12px; color: var(--texto-fraco); font-variant-numeric: tabular-nums; }
.tarefa.atrasada .prazo { color: var(--critico); font-weight: 600; }

/* ---------- régua ---------- */
.cartao-corpo { padding: 14px; }
.motivo {
  flex-shrink: 0; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--texto-fraco);
  background: var(--superficie-alta); padding: 3px 7px; border-radius: 6px;
}
.mensagem {
  margin: 10px 0 0; padding: 10px 12px;
  background: var(--superficie-alta); border-radius: var(--raio);
  font-size: 14px; line-height: 1.45;
}
.zap { font-variant-numeric: tabular-nums; }

/* ---------- formulários ---------- */
.formulario { display: grid; gap: 8px; max-width: 420px; }
.formulario label { font-size: 13px; color: var(--texto-fraco); margin-top: 4px; }

select, textarea {
  font: inherit; width: 100%;
  min-height: var(--alvo);
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 10px 12px;
}
select:focus, textarea:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
textarea { resize: vertical; line-height: 1.45; }

/* ---------- aplicação pública (/aplicar) ---------- */
.aplicar { max-width: 480px; margin: 0 auto; padding-top: 8px; }
.aplicar h1 { font-size: 22px; line-height: 1.25; }
.aplicar .formulario { max-width: none; }
.aplicar h2 {
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--texto-fraco); margin: 18px 0 2px;
  border-bottom: 1px solid var(--borda); padding-bottom: 6px;
}
.aplicar button { margin-top: 14px; }
.obrigado { text-align: center; padding-top: 18vh; }

/* honeypot: fora da tela, invisível pra humano, irresistível pra bot */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- práticas + check-in ---------- */
.praticas h2 { font-size: 16px; margin: 20px 0 8px; }
.lista-praticas { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }

.pratica {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 10px 12px;
}
.pratica-linha { display: flex; align-items: center; gap: 8px; }
.pratica-linha strong { flex: 1; font-size: 15px; font-weight: 600; }
.tipo-tag {
  flex-shrink: 0; font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.5px; font-weight: 700;
  padding: 2px 6px; border-radius: 5px;
  background: var(--superficie-alta); color: var(--texto-fraco);
}
.tipo-ritual { color: var(--acento); }
.pratica-cadencia { font-size: 12px; color: var(--texto-fraco); }
.pratica-encerrar {
  flex-shrink: 0; width: 32px; min-height: 32px; padding: 0;
  background: transparent; border: 1px solid var(--borda);
  color: var(--texto-fraco); font-size: 16px; border-radius: 8px;
}
.pratica-evidencia { margin: 6px 0 0; font-size: 13px; color: var(--texto-fraco); }
.sem-evidencia { color: var(--atencao); }

.pratica-nova { display: grid; grid-template-columns: 1fr; gap: 6px; margin-bottom: 6px; }

.checkin-form { display: grid; gap: 8px; }
.checkin-pratica {
  border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 8px 12px 10px; margin: 0;
  display: flex; flex-wrap: wrap; gap: 6px 14px;
}
.checkin-pratica legend { font-size: 13px; color: var(--texto-fraco); padding: 0 4px; }
.checkin-pratica label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; min-height: 32px; cursor: pointer;
}
.checkin-pratica input[type="radio"] { min-height: 0; width: 18px; height: 18px; }

.lista-checkins { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lista-checkins li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  font-size: 13px; padding: 6px 10px;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 8px;
}
.checkin-data { color: var(--texto-fraco); font-variant-numeric: tabular-nums; }
.checkin-placar { font-variant-numeric: tabular-nums; font-weight: 600; }
.ok-cor { color: var(--ok); }
.critico-cor { color: var(--critico); }
.checkin-travou { color: var(--texto-fraco); flex-basis: 100%; }

/* ---------- leituras do KPI ---------- */
.leituras { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 3px; }
.leituras li {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.leitura-data { color: var(--texto-fraco); min-width: 52px; }
.leitura-origem { font-size: 11px; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: 0.4px; }

/* ---------- leads ---------- */
.lead.triagem-super_qualificado { border-left-color: var(--acento); }
.lead.triagem-qualificado       { border-left-color: var(--ok); }
.lead.triagem-neutro            { border-left-color: var(--atencao); }
.lead.triagem-desqualificado    { border-left-color: var(--borda); }
.lead-encerrado { opacity: 0.55; }

.triagem {
  flex-shrink: 0; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.5px; font-weight: 700;
  background: var(--superficie-alta); color: var(--texto-fraco);
  padding: 3px 7px; border-radius: 6px;
}
.triagem-super_qualificado .triagem { color: var(--acento); }
.triagem-qualificado       .triagem { color: var(--ok); }
.triagem-neutro            .triagem { color: var(--atencao); }

.lead-detalhe { font-size: 13px; color: var(--texto-fraco); margin: 8px 0 0; }
.lead-detalhe .link { color: var(--acento); text-decoration: underline; }

.lead-acoes {
  display: grid; grid-template-columns: auto 1fr; gap: 8px;
  margin-top: 10px; align-items: center;
}
.zap-botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--alvo); padding: 0 14px;
  border: 1px solid var(--ok); color: var(--ok);
  border-radius: var(--raio); font-size: 14px; font-weight: 600;
}
.lead-acoes select { min-width: 0; }

/* =====================================================================
   Painel do gestor — a home
   Faixas empilhadas: dinheiro, funil, operação, travas.
   ===================================================================== */

.faixa {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-carta);
  padding: 16px;
  margin-bottom: 12px;
}
.faixa h2 {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--apagado);
  margin: 0 0 14px;
}
.faixa .resumo { margin: -6px 0 12px; }
.faixa .vazio  { margin: 0; }
.faixa .indicadores { margin-bottom: 0; }

/* --- o alvo do semestre --- */
.alvo-topo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.alvo-topo strong {
  font-size: 34px;
  font-family: var(--titulo); font-weight: 700; color: var(--text-primary);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px var(--brilho);
}
.alvo-topo span { color: var(--texto-fraco); font-size: 14px; }

.barra-alta { height: 10px; }

.alvo-rodape {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--texto-fraco);
  margin: 6px 0 14px;
  font-variant-numeric: tabular-nums;
}

.ritmo {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--borda);
  font-size: 13px;
  color: var(--texto-fraco);
}
.ritmo strong { color: var(--texto); font-variant-numeric: tabular-nums; }

/* --- funil --- */
.funil {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.funil li {
  background: var(--superficie-alta);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 10px 6px;
  text-align: center;
  position: relative;
}
.funil li + li::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 50%;
  width: 4px;
  height: 1px;
  background: var(--borda);
}
.funil strong {
  display: block;
  font-size: 21px;
  font-family: var(--titulo); font-weight: 700; color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.funil span { font-size: 11px; color: var(--texto-fraco); }
.funil .fim { border-color: var(--prata-escura);
  box-shadow: 0 0 20px rgba(196, 118, 12, .08); }

.acao { margin: 12px 0 0; font-size: 14px; }
.acao a { color: var(--acento); }

/* --- travas estratégicas --- */
.pendencias { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.pendencia {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--superficie-alta);
  border-radius: 8px;
  padding: 10px 12px;
  border-left: 3px solid var(--atencao);
}
.pendencia.feita { border-left-color: var(--ok); opacity: 0.55; }
.pendencia.feita strong { text-decoration: line-through; }

.pendencia .marcador {
  flex: none;
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 8px;
  border: 1px solid var(--borda-forte);
  background: rgba(230, 230, 217, .04);
  color: var(--ok);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.pendencia .marcador:hover { border-color: var(--acento); }

.pendencia-corpo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pendencia-corpo strong { font-size: 14px; }
.pendencia-corpo span { font-size: 12px; color: var(--texto-fraco); line-height: 1.45; }
.pendencia-corpo .quando { font-style: italic; }

/* =====================================================================
   Contrato — bloco na ficha do mentorado
   ===================================================================== */

.contrato {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-carta);
  padding: 16px;
  margin-bottom: 12px;
}
.contrato h2 { font-size: 16px; margin: 0 0 10px; }
.contrato .resumo { margin: 0 0 12px; }

.lista-contratos { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 12px; }
.lista-contratos > li {
  background: var(--superficie-alta);
  border-radius: 8px;
  padding: 12px;
}

.contrato-topo { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.contrato-topo strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.contrato-topo .quando { margin-left: auto; font-size: 12px; color: var(--texto-fraco); }

.condicao {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--superficie);
  color: var(--texto-fraco);
  border: 1px solid var(--borda);
}
.condicao-72h { color: var(--atencao); border-color: var(--atencao); }

.contrato-rodape {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--texto-fraco);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.contrato-rodape .alerta  { color: var(--atencao); font-weight: 600; }
.contrato-rodape .quitado { color: var(--ok); font-weight: 600; }

.linha-form { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.linha-form input  { flex: 1 1 130px; min-width: 0; }
.linha-form select { flex: 0 1 auto; }

.ajuda { font-size: 12px; color: var(--texto-fraco); margin: -6px 0 4px; }

/* =====================================================================
   Prospecção — o topo do funil
   Linha compacta: identidade à esquerda, ação de um toque à direita.
   ===================================================================== */

.filtros {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.filtros a {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--borda);
  color: var(--texto-fraco);
}
.filtros a.ativo {
  background: var(--superficie-alta);
  color: var(--texto);
  border-color: var(--acento);
}

.prospectos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

.prospecto {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--superficie-alta);
  border-radius: 8px;
  padding: 9px 10px 9px 12px;
  border-left: 3px solid var(--borda);
}
.prospecto.fase-follow_up  { border-left-color: var(--atencao); }
.prospecto.fase-conversando{ border-left-color: var(--ok); }
.prospecto.fase-fora       { opacity: 0.45; }

.prospecto-corpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.prospecto-topo {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.prospecto-topo strong { font-size: 14px; }

.prospecto-sub {
  font-size: 12px;
  color: var(--texto-fraco);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temp {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--borda);
  color: var(--texto-fraco);
}
.temp-quente { color: var(--prata); border-color: var(--prata-escura);
  text-shadow: 0 0 10px var(--brilho); }
.temp-morno  { color: var(--atencao); border-color: var(--atencao); }

.persona { font-size: 10px; color: var(--texto-fraco); }

.devido {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--atencao);
  color: var(--fundo);
  font-weight: 700;
}

.prospecto-acoes { flex: none; display: flex; gap: 4px; align-items: center; }
.prospecto-acoes button,
.prospecto-acoes .botao-fantasma {
  min-height: 34px;
  padding: 0 11px;
  font-size: 12px;
  font-family: var(--corpo); font-weight: 400;
  border-radius: 999px;
  border: 1px solid var(--borda-forte);
  background: rgba(230, 230, 217, .04);
  color: var(--texto);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.prospecto-acoes button:hover { border-color: var(--prata-escura);
  box-shadow: 0 0 14px rgba(196, 118, 12, .12); }
.prospecto-acoes .botao-fantasma { color: var(--texto-fraco); }
.prospecto-acoes .botao-ok { border-color: var(--ok); color: var(--ok); }

.estado-final { font-size: 11px; color: var(--texto-fraco); font-style: italic; }

@media (max-width: 420px) {
  .prospecto { flex-wrap: wrap; }
  .prospecto-acoes { width: 100%; justify-content: flex-end; }
}