/**
 * Saldos em grade, indicadores personalizados e interruptores.
 *
 * A grade de saldos é a vista de app de finanças: cartões de conta com valor em
 * peso negro e um sparkline mais alto. Os indicadores extras entram na MESMA
 * grade dos indicadores base via display:contents, e o botão "+" é um indicador
 * tracejado.
 *
 * O cartão de saldos responde à PRÓPRIA largura (ele ocupa a coluna de 20% do
 * trio), então usa container query em vez de media query: abaixo de 350px some o
 * gráfico da linha — a grade continua tendo o dela — e a grade vira uma coluna.
 *
 * Ainda aqui: o tique do pulso a cada ciclo real de sync, o rodapé da navegação
 * virando link, o interruptor de notificação (checkbox invisível sobre trilho
 * desenhado) e a regra de integridade em que o botão Corrigir só aparece no
 * hover, no foco ou quando a linha é tocada — a gravidade do problema vai na cor
 * do azulejo, não em um chip repetido em toda linha.
 */

.saldos-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 1px;
  background: var(--separador);
  border-top: 1px solid var(--separador);
}

.saldos-grade__conta {
  background: var(--sup-cartao);
  padding: var(--e3) var(--e4);
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  min-width: 0;
}

.saldos-grade__topo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-width: 0;
  font-size: var(--t-meta);
  color: var(--tinta-2);
}

.saldos-grade__topo .saldos__nome {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.saldos-grade__valor {
  font-size: 17px;
  font-weight: var(--peso-negro);
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
}

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

.saldos-grade__grafico { height: 40px; }

.indicadores__extras { display: contents; }

button.indicador { font: inherit; text-align: left; border: 0; cursor: pointer; }

button.indicador:hover { background: var(--sup-elevada); }

.indicador--mais {
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: var(--e2);
  color: var(--tinta-3);
  border: 1px dashed var(--borda-cartao) !important;
  border-radius: 0;
}

.indicador--mais span { font-size: var(--t-apoio); font-weight: var(--peso-forte); }

.icone-girado { transform: rotate(45deg); }

.pulso--tique .pulso__ponto { animation: tique .6s ease-out; }

@keyframes tique {
  0%   { transform: scale(1.7); opacity: 1; }
  100% { transform: scale(1);   opacity: .8; }
}

.nav__whats-link { text-decoration: none; color: inherit; display: block; }

.nav__whats-link:hover .nav__whats { opacity: 1; }

.notif__linha { cursor: pointer; }

.toggle { position: relative; flex: none; width: 42px; height: 24px; }

.toggle__caixa {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.toggle__trilho {
  position: absolute;
  inset: 0;
  border-radius: var(--raio-pilula);
  background: var(--sup-afundada);
  border: 1px solid var(--borda-cartao);
  transition: background var(--transicao);
  pointer-events: none;
}

.toggle__trilho::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--sup-cartao);
  box-shadow: var(--sombra-cartao);
  transition: transform var(--transicao);
}

.toggle__caixa:checked + .toggle__trilho { background: var(--sem-bom); }

.toggle__caixa:checked + .toggle__trilho::after { transform: translateX(18px); }

.toggle__caixa:focus-visible + .toggle__trilho { box-shadow: var(--foco, 0 0 0 3px rgba(14, 176, 234, .4)); }

.cliente__trio > .cartao { container-type: inline-size; }

@container (max-width: 350px) {
  .saldos__grafico { display: none; }

  .saldos-grade { grid-template-columns: 1fr; }
}

.linha--problema { cursor: pointer; }

.linha--problema .botao { display: none; }

.linha--problema:hover .botao,
.linha--problema:focus-within .botao,
.linha--problema.linha--ativa .botao { display: inline-flex; }