/* =====================================================================
   CRM Zap Tecnologia — componentes.css
   Peças reaproveitadas em todas as telas: cartão, tabela, etiqueta,
   selo, botão, formulário, aviso, paginação, números e linha do tempo.
   Nenhum seletor da Etapa 10 foi removido — as 13 telas dependem deles.
   ===================================================================== */

.cartao {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  padding: 20px;
  margin-bottom: 18px;
}

/* ------------------------------------------------------------ tabela */
.tabela { width: 100%; border-collapse: collapse; background: var(--branco); }
.tabela th {
  text-align: left;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--texto-fraco);
  padding: 11px 14px;
  border-bottom: 1px solid var(--borda);
  background: var(--superficie-2);
  white-space: nowrap;
}
.tabela td { padding: 12px 14px; border-bottom: 1px solid var(--borda); }
.tabela tr:hover td { background: var(--superficie-2); }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela a.nome { color: var(--azul); font-weight: 600; text-decoration: none; }
.tabela a.nome:hover { text-decoration: underline; }
.tabela-rolagem { overflow-x: auto; border-radius: var(--raio-g); border: 1px solid var(--borda); }

/* ---------------------------------------------------------- etiquetas
   Fundo claro com texto na cor, em vez de fundo chapado branco em cima.
   Lê melhor em tabela cheia e não briga com a linha inteira. */
.etiqueta {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
}
.et-ativo      { background: var(--ativo); }
.et-1mes       { background: var(--mes1); }
.et-2meses     { background: var(--mes2); }
.et-3meses     { background: var(--mes3); }
.et-mais3meses { background: var(--mais3); }
.et-sem_compra { background: var(--texto-tenue); }

.selo {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--superficie-3);
  color: var(--texto-fraco);
  border: 1px solid var(--borda);
}
.selo-escola  { background: #E7EFFB; color: var(--azul);   border-color: #C6DAF5; }
.selo-publico { background: #E4F3FA; color: #17708F;       border-color: #BEE0EF; }
.selo-alerta  { background: var(--atencao-fundo); color: var(--atencao); border-color: #F0DCB6; }

/* ------------------------------------------------------------ botões */
.botao {
  display: inline-block;
  padding: 10px 18px;
  border-radius: var(--raio);
  border: 1px solid var(--azul);
  background: var(--azul);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
}
.botao:hover { background: var(--azul-escuro); border-color: var(--azul-escuro); }
.botao-claro { background: #fff; color: var(--azul); }
.botao-claro:hover { background: var(--superficie-2); }
.botao-zap { background: var(--verde); border-color: var(--verde); }
.botao-zap:hover { background: #2F7A2D; border-color: #2F7A2D; }
.botao-pequeno { padding: 6px 12px; font-size: 13.5px; }

/* ---------------------------------------------------------- formulário */
label { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 6px; color: var(--texto-fraco); }
input[type=text], input[type=email], input[type=password],
input[type=date], input[type=number], select, textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 15.5px;
  font-family: inherit;
  color: var(--texto);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: #fff;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--azul);
  outline-offset: -1px;
  border-color: var(--azul);
}
.campo { margin-bottom: 16px; }
.linha-campos { display: flex; gap: 14px; flex-wrap: wrap; }
.linha-campos .campo { flex: 1; min-width: 190px; }

/* ------------------------------------------------------------- busca */
.barra-busca { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.barra-busca .campo { margin-bottom: 0; }
.barra-busca input[type=text] { min-width: 260px; }

/* ------------------------------------------------------------ avisos */
.aviso { padding: 13px 16px; border-radius: var(--raio); margin-bottom: 18px; font-size: 15px; }
.aviso-erro { background: var(--alerta-fundo); color: #8B2013; border: 1px solid #F0C4C0; }
.aviso-ok   { background: var(--ok-fundo);     color: #1F6B27; border: 1px solid #BFE0BC; }
.aviso-info { background: #E7EFFB;             color: var(--azul); border: 1px solid #C6DAF5; }

/* --------------------------------------------------------- paginação */
.paginacao { display: flex; gap: 6px; align-items: center; margin-top: 18px; flex-wrap: wrap; }
.paginacao a, .paginacao span {
  padding: 8px 13px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  text-decoration: none;
  color: var(--azul);
  background: #fff;
}
.paginacao .atual { background: var(--azul); color: #fff; border-color: var(--azul); font-weight: 600; }
.paginacao .inerte { color: var(--texto-tenue); background: var(--superficie-2); }
.paginacao .contagem { border: 0; background: none; color: var(--texto-fraco); font-size: 14px; }

/* ------------------------------------------------------------- fichas */
.grade-dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px,1fr)); gap: 16px 22px; }
.dado .rotulo { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--texto-fraco); }
.dado .valor  { font-size: 16px; font-weight: 500; }
.dado .valor.vazio { color: var(--texto-tenue); font-weight: 400; }

.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px,1fr)); gap: 14px; }
.numero {
  background: #fff; border: 1px solid var(--borda);
  border-radius: var(--raio-g); padding: 15px; box-shadow: var(--sombra);
}
.numero .rotulo { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--texto-fraco); font-weight: 600; }
.numero .valor { font-size: 26px; font-weight: 700; color: var(--azul); font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.numero .valor.alerta { color: var(--alerta); }

.vazio-total { text-align: center; padding: 46px 20px; color: var(--texto-fraco); }

/* -------------------------------------------------- linha do tempo */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li {
  padding: 11px 0 11px 20px; border-left: 2px solid var(--borda);
  margin-left: 5px; position: relative;
}
.timeline li::before {
  content: ''; position: absolute; left: -6px; top: 16px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--azul); border: 2px solid #fff;
}
.timeline .quando { font-size: 12.5px; color: var(--texto-fraco); }
.timeline .oque { font-weight: 600; }
.timeline .nota { color: var(--texto); margin-top: 2px; }

/* botão que parece link, para ações destrutivas discretas */
.link-perigo {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--alerta); font-size: 13px; font-family: inherit; text-decoration: underline;
}
.link-perigo:hover { color: #8B2013; }

/* ------------------------------------------------------- dados do lead
   O lead.php monta <div class="dados"> com <div><dt>/<dd></div> dentro,
   mas nunca existiu regra para essa classe — a ficha saía como uma pilha
   de texto solto. Mesmo desenho da .grade-dados das outras fichas. */
.dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px,1fr)); gap: 16px 22px; }
.dados dt { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--texto-fraco); }
.dados dd { margin: 1px 0 0; font-size: 16px; font-weight: 500; }