/**
 * Cliente — cartões da visão geral, teia de vínculos, trilha de auditoria e a
 * lista simples de saldos.
 *
 * A marca do cliente mostra o logo quando existe e a inicial sobre o azul da
 * marca quando não. Na teia, cada cliente é uma zona de soltura tracejada que
 * vira sólida ao receber o arrasto; as pessoas ficam à esquerda com alça de
 * arraste. A trilha de auditoria desenha o diff antes -> depois recuado até
 * depois do azulejo, com o valor antigo riscado.
 *
 * Duas regras de contexto vivem aqui de propósito: em #pessoas o nome ganha
 * corpo e o telefone fica menor e esmaecido; em #cliente as linhas de validação
 * ficam mais densas (são muitas, cada uma com pouca altura).
 */

.cartoes-clientes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--e4);
}

.cartao-cliente {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform var(--transicao), box-shadow var(--transicao);
}

.cartao-cliente:hover { transform: translateY(-2px); box-shadow: var(--sombra-flutua); }

.cartao-cliente__marca {
  flex: none;
  width: 40px; height: 40px;
  border-radius: var(--raio-azulejo);
  background: var(--marca-azul);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}

.cartao-cliente__marca--g { width: 56px; height: 56px; }

.cartao-cliente__inicial {
  font-weight: var(--peso-brutal);
  font-size: 18px;
  color: var(--marca-tinta);
}

.cartao-cliente__logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--sup-cartao);
  padding: 4px;
}

.cartao-cliente__numeros {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--separador);
  border-top: 1px solid var(--separador);
}

.linha__cauda--horizontal { flex-direction: row; align-items: center; }

.teia {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 1.6fr);
  gap: var(--e4);
  align-items: start;
}

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

.teia__coluna { display: flex; flex-direction: column; gap: var(--e3); min-width: 0; }

.teia__clientes { display: flex; flex-direction: column; min-width: 0; }

.teia__pessoas { display: flex; flex-direction: column; padding-bottom: var(--e3); }

.teia__pessoa {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e2) var(--e5);
  cursor: grab;
}

.teia__pessoa:active { cursor: grabbing; }
.teia__pessoa--arrastando { opacity: .4; }
.teia__pessoa--solta .linha__apoio { color: var(--sem-atencao); }

.teia__alca { color: var(--tinta-3); margin-left: auto; }

.teia__cliente {
  background: var(--sup-cartao);
  border: 1px dashed var(--borda-cartao);
  border-radius: var(--raio-cartao);
  padding: var(--e4) var(--e5);
  margin-bottom: var(--e3);
  transition: border-color var(--transicao), background var(--transicao);
}

.teia__cliente--alvo {
  border-color: var(--marca-azul);
  border-style: solid;
  background: rgba(14, 176, 234, .06);
}

.teia__cliente-topo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin-bottom: var(--e3);
}

.teia__membros { display: flex; flex-wrap: wrap; gap: var(--e2); min-height: 30px; }

.teia__membro {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  border-radius: var(--raio-pilula);
  background: var(--sup-afundada);
  font-size: var(--t-apoio);
  font-weight: var(--peso-forte);
}

.teia__membro-nome { max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.teia__remover {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--sem-critico);
  cursor: pointer;
}

.teia__remover:hover { background: var(--suave-critico); }

#pessoas .linha__nome { font-size: 16px; }
#pessoas .linha__apoio { color: var(--tinta-3); font-variant-numeric: tabular-nums; }

.trilha__item { position: relative; }

.trilha__item + .trilha__item::before {
  content: "";
  position: absolute; top: 0; left: 68px; right: 0;
  height: 1px;
  background: var(--separador);
}

.trilha__diff {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 var(--e5) var(--e3) 68px;
  padding: var(--e2) var(--e3);
  border-radius: var(--raio-pequeno);
  background: var(--sup-afundada);
  font-size: var(--t-meta);
  font-variant-numeric: tabular-nums;
}

.trilha__mudanca { display: flex; align-items: center; gap: var(--e2); min-width: 0; }

.trilha__campo {
  flex: 0 0 84px;
  font-weight: var(--peso-negro);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: var(--t-etiqueta);
  color: var(--tinta-3);
}

.trilha__antes { color: var(--tinta-3); text-decoration: line-through; }
.trilha__seta  { color: var(--tinta-3); transform: rotate(90deg); }
.trilha__depois { font-weight: var(--peso-forte); }

.trilha__reverter { margin: 0 var(--e5) var(--e4) 68px; }

.linha__selos { display: inline-flex; gap: 4px; }

#cliente .cartao .linha:has(.chip--atencao),
#cliente .cartao .linha:has(.chip--critico) { min-height: 44px; padding-top: 6px; padding-bottom: 6px; }

.cliente__duplo { display: flex; flex-direction: column; gap: var(--e4); }

@media (min-width: 1200px) {
  .cliente__duplo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    align-items: start;
  }
}

.saldos {
  display: flex;
  flex-direction: column;
  padding: 0 var(--e5) var(--e4);
}

.saldos__conta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  padding: 5px 0;
  font-size: var(--t-apoio);
  border-top: 1px solid var(--separador);
  min-width: 0;
}

.saldos__nome {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--tinta-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.saldos__valor {
  font-variant-numeric: tabular-nums;
  font-weight: var(--peso-forte);
  white-space: nowrap;
}

.saldos__valor--negativo { color: var(--sem-critico); }