/* Leads: a tabela paginada e o diálogo de etiquetas (admin).
 * A moldura (cabeçalho, filtros, painel da ficha) vem de funil.css.
 */

.leads-principal { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; min-width: 0; }
.leads-tabela { overflow: auto; min-height: 0; }
.leads-tabela table { width: 100%; border-collapse: collapse; font-size: var(--t-13); }
.leads-tabela th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--fundo);
  text-align: left;
  font-size: var(--t-12);
  font-weight: 600;
  color: var(--suave);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--e-2) var(--e-3);
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
}
.leads-tabela td { padding: var(--e-2) var(--e-3); border-bottom: 1px solid var(--borda); vertical-align: middle; }
.leads-tabela tbody tr { cursor: pointer; background: var(--superficie); }
.leads-tabela tbody tr:hover { background: var(--painel); }
.leads-tabela tbody tr.aberto { background: var(--painel); box-shadow: inset 3px 0 0 var(--texto); }
.leads-tabela tbody tr.com-atencao td:first-child { box-shadow: inset 3px 0 0 var(--aviso); }

.leads-nome { min-width: 180px; }
.leads-nome .selo { margin-left: var(--e-1); font-size: var(--t-12); padding: 1px 6px; }
.leads-abrir {
  border: 0;
  background: transparent;
  color: var(--texto);
  font: inherit;
  font-weight: 700;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.leads-abrir:focus-visible { outline: 2px solid var(--dourado); outline-offset: 2px; border-radius: 2px; }
.leads-tel, .leads-quando { white-space: nowrap; color: var(--suave); font-variant-numeric: tabular-nums; }
.leads-etq .etiqueta { margin: 1px 2px 1px 0; }

.etapa-selo {
  display: inline-block;
  border-radius: var(--pilula);
  padding: 1px 8px;
  font-size: var(--t-12);
  font-weight: 600;
  white-space: nowrap;
  background: var(--marinho-fundo);
  color: var(--marinho);
}
.etapa-selo.fora { background: var(--painel); color: var(--suave); }
.etapa-selo.final-ganho { background: var(--ok-fundo); color: var(--ok-texto); }
.etapa-selo.final-perdido { background: var(--perigo-fundo); color: var(--perigo-texto); }

.paginacao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  padding: var(--e-2) var(--e-4);
  border-top: 1px solid var(--borda);
  font-size: var(--t-13);
  color: var(--suave);
}

/* Diálogo das etiquetas */
.dialogo-largo { width: min(520px, calc(100% - 32px)); padding: var(--e-6); }
.dialogo-largo > p { font-size: var(--t-13); color: var(--suave); margin: var(--e-1) 0 var(--e-4); }
.dialogo-largo .etq-nova { padding: 0; }
.etq-nova .linha { display: flex; gap: var(--e-2); }
.etq-nova .linha .campo:first-child { flex: 1; min-width: 0; }
.etq-lista { display: grid; gap: var(--e-1); margin-top: var(--e-4); max-height: 320px; overflow-y: auto; }
.etq-linha { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); padding: var(--e-1) 0; border-bottom: 1px solid var(--borda); }
.etq-linha.arquivada .etiqueta { opacity: 0.55; }
.etq-estado { font-size: var(--t-12); color: var(--suave); }

@media (max-width: 767px) {
  .leads-tabela th:nth-child(4), .leads-tabela td:nth-child(4),
  .leads-tabela th:nth-child(5), .leads-tabela td:nth-child(5),
  .leads-tabela th:nth-child(6), .leads-tabela td:nth-child(6) { display: none; }
  .etq-nova .linha { flex-wrap: wrap; }
}