/* Tela de leads: colagem da planilha, mapeamento de colunas e resultado. */

.leads-colagem {
  margin-bottom: var(--gutter);
}

.leads-area {
  width: 100%;
  min-height: 96px;
  padding: var(--esp-3) var(--esp-4);
  border: 1px dashed var(--cor-borda-forte);
  border-radius: var(--raio-container);
  background: var(--cor-superficie-baixa);
  font-family: var(--fonte-mono);
  font-size: var(--txt-corpo-p);
  color: var(--cor-texto);
  resize: vertical;
}

.leads-area:focus {
  outline: 2px solid var(--cor-primaria);
  outline-offset: -1px;
  border-style: solid;
  border-color: var(--cor-primaria);
}

.leads-area::placeholder {
  font-family: var(--fonte);
  color: var(--cor-texto-fraco);
}

.leads-opcao {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin-top: var(--esp-3);
  font-size: var(--txt-corpo-p);
  color: var(--cor-texto-fraco);
  cursor: pointer;
}

/* O botao de recomecar fica no fim do cabecalho do card. */
.leads-recomecar {
  margin-left: auto;
  align-self: center;
  padding: var(--esp-1) var(--esp-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
  background: var(--cor-superficie);
  font: inherit;
  font-size: var(--txt-corpo-p);
  color: var(--cor-texto-fraco);
  cursor: pointer;
}

.leads-recomecar:hover {
  border-color: var(--cor-borda-forte);
  color: var(--cor-titulo);
}

.leads-aviso {
  display: block;
  margin-bottom: var(--esp-4);
}

/* ---------- previa ---------- */
/*
 * A tabela rola dentro da propria caixa. Planilha larga nao pode empurrar a
 * pagina inteira para o lado.
 */
.leads-tabela-area {
  overflow-x: auto;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-container);
}

.leads-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--txt-corpo-p);
}

.leads-tabela th,
.leads-tabela td {
  padding: var(--esp-2) var(--esp-3);
  text-align: left;
  border-bottom: 1px solid var(--cor-borda);
  max-width: 220px;
}

.leads-tabela thead th {
  position: sticky;
  top: 0;
  background: var(--cor-superficie-baixa);
  vertical-align: top;
  white-space: nowrap;
}

.leads-tabela tbody tr:last-child td {
  border-bottom: 0;
}

.leads-tabela tbody tr:hover {
  background: var(--cor-superficie-baixa);
}

.leads-col-titulo {
  display: block;
  font-size: var(--txt-rotulo-p);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-texto-fraco);
  margin-bottom: var(--esp-1);
  max-width: 200px;
}

.leads-mapa {
  width: 100%;
  max-width: 200px;
  padding: 3px var(--esp-2);
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-controle);
  background: var(--cor-superficie);
  font: inherit;
  font-size: var(--txt-rotulo);
  color: var(--cor-titulo);
}

.leads-col-num {
  width: 44px;
  color: var(--cor-texto-fraco);
  text-align: right;
}

.leads-col-situacao {
  white-space: nowrap;
}

/* Linha com problema: tinge de leve, sem gritar. */
.leads-linha--erro td {
  background: var(--cor-erro-tint);
}

.leads-linha--erro:hover td {
  background: var(--cor-erro-tint);
}

/* ---------- acoes e resultado ---------- */
.leads-acoes {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--esp-4);
  margin-top: var(--esp-5);
}

.leads-contagem {
  font-size: var(--txt-corpo-p);
  color: var(--cor-texto-fraco);
}

.leads-contagem strong {
  color: var(--cor-titulo);
}

.leads-nota {
  margin-top: var(--esp-3);
  font-size: var(--txt-rotulo);
}

.leads-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--gutter);
}

.leads-numeros .metrica {
  padding: 0;
}

.leads-rejeitados {
  margin-top: var(--esp-5);
  padding-top: var(--esp-4);
  border-top: 1px solid var(--cor-borda);
}

.leads-rejeitados ul {
  margin: var(--esp-2) 0 0;
  padding-left: var(--esp-5);
  font-size: var(--txt-corpo-p);
  color: var(--cor-texto);
}

.leads-rejeitados li {
  margin-bottom: var(--esp-1);
}

@media (max-width: 900px) {
  .leads-acoes {
    flex-direction: column;
    align-items: stretch;
  }
}