/**
 * Tela do cliente em trio e o cartão de lançamentos.
 *
 * O trio (saldos | lançamentos | integridade) é flex com grow 20/65/15 e basis 0:
 * as proporções valem em QUALQUER largura, sem depender de media ou container
 * query, então zoom e sidebar não interferem. Os min-width fazem a fileira
 * quebrar quando não há espaço para os três, e align-items:stretch casa as
 * alturas — o cartão mais alto (em geral o Saldo) dita a linha e a lista de
 * lançamentos preenche o próprio cartão, rolando por dentro. Expandir troca o
 * flex-basis para auto: a lista inteira sem rolagem, e a linha cresce junto.
 *
 * A .lanc-barra é o cabeçalho de cartão padrão (título à esquerda, ações à
 * direita, tudo numa régua só) e zera o padding assimétrico do subtítulo.
 *
 * Também aqui: o logo do banco na linha de saldo, as abas dentro de cartão à la
 * navegador, os botões de troca de vista (lista/grade) e o sparkline — uma linha
 * real em miniatura que herda currentColor e por isso muda de cor pela variante
 * --alta/--baixa/--neutra.
 */

.cliente__trio {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e4);

  align-items: stretch;
}

.cliente__trio > .cartao { display: flex; flex-direction: column; }

.cliente__trio > :nth-child(1) { flex: 20 1 0; min-width: min(100%, 150px); }
.cliente__trio > :nth-child(2) { flex: 65 1 0; min-width: min(100%, 300px); }
.cliente__trio > :nth-child(3) { flex: 15 1 0; min-width: min(100%, 140px); }

.lanc-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  min-height: 54px;
  padding: var(--e2) var(--e4);
  border-bottom: 1px solid var(--separador);
}

.lanc-barra .planilha__subtitulo {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 0 0 var(--e2);
  border-top: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lanc-barra__acoes { display: flex; align-items: center; gap: var(--e2); flex: none; }

.lanc-lista {
  flex: 1 1 0;
  min-height: 200px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lanc-lista--aberta { flex-basis: auto; }

.lanc__valor--orcado { color: var(--tinta-2); font-weight: var(--peso-medio); }

.saldos__icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--sup-afundada);
  overflow: hidden;
}

.saldos__logo { width: 100%; height: 100%; object-fit: cover; }

.abas {
  display: flex;
  gap: var(--e1);
  padding: var(--e3) var(--e4) 0;
  border-bottom: 1px solid var(--separador);
  background: var(--sup-afundada);
}

.abas__aba {
  padding: 9px var(--e4);
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: var(--raio-pequeno) var(--raio-pequeno) 0 0;
  background: none;
  color: var(--tinta-2);
  font: inherit;
  font-size: var(--t-apoio);
  font-weight: var(--peso-forte);
  cursor: pointer;
  position: relative;
  top: 1px;
}

.abas__aba:hover { color: var(--tinta-1); }

.abas__aba--ativa {
  background: var(--sup-cartao);
  border-color: var(--separador);
  color: var(--tinta-1);
}

.vista-botao {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--borda-cartao);
  border-radius: var(--raio-pequeno);
  background: var(--sup-cartao);
  color: var(--tinta-3);
  cursor: pointer;
}

.vista-botao:hover { color: var(--tinta-1); }

.vista-botao--ativo {
  background: var(--sup-afundada);
  color: var(--tinta-1);
  border-color: var(--separador);
}

.spark { display: block; width: 100%; height: 100%; overflow: visible; }

.spark__linha {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.spark__area { fill: currentColor; opacity: .1; }

.spark--alta   { color: var(--sem-bom); }
.spark--baixa  { color: var(--sem-critico); }
.spark--neutra { color: var(--tinta-3); }

.saldos__grafico { flex: none; width: 64px; height: 22px; }

.saldos__grafico--total { width: 120px; height: 30px; margin-right: var(--e5); }