/**
 * Estados do sistema à vista — WhatsApp, saldos por banco, conversa e atividade.
 *
 * O herói do WhatsApp ganha medalhão circular com sombra dura, marca d'água
 * rotacionada no canto e chips translúcidos; a cor do medalhão acompanha a
 * variante de estado do bloco .conexao definido em primitivos.css.
 *
 * O saldo diário agrupado por banco é acordeão: cabeça clicável com seta que
 * gira, contas recuadas com fio próprio, mesma linguagem da vista em lista. Os
 * valores de saldo são azul escuro no positivo e vermelho escuro no negativo —
 * esta é a última palavra da cascata sobre .saldos__valor e .saldos-grade__valor,
 * então precisa vir depois de saldos.css.
 *
 * O fio da conversa usa balões estilo mensageiro (usuário à esquerda, bot à
 * direita) e é reaproveitado pelo Sr. Spent em chat.css. Fecham o arquivo a
 * faixa global de WhatsApp caído, os filtros da atividade com ícone e tom por
 * origem, e a saudação com relógio do servidor no topo da navegação.
 */

.conexao__fundo {
  position: absolute;
  right: -34px;
  top: 50%;
  transform: translateY(-50%) rotate(-10deg);
  color: #fff;
  opacity: .12;
  pointer-events: none;
  line-height: 0;
}

.conexao__marca {
  flex: none;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 5px 5px 0 rgba(16, 17, 20, .22);
  position: relative;
}

.conexao--bom     .conexao__marca { color: var(--sem-bom); }
.conexao--atencao .conexao__marca { color: var(--sem-atencao); }
.conexao--critico .conexao__marca { color: var(--sem-critico); }

.conexao__titulo { font-size: 24px; }

.conexao__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-top: var(--e3);
  position: relative;
}

.conexao__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: var(--raio-pilula);
  background: rgba(255, 255, 255, .18);
  font-size: var(--t-meta);
  font-weight: var(--peso-forte);
  white-space: nowrap;
}

/* Aviso por e-mail de queda: linha discreta no pé do cartão, só para admin.
   O trilho do interruptor é redefinido aqui porque o padrão nasce para fundo de
   cartão claro e desapareceria sobre a cor cheia do herói; ligado fica branco
   para se ler em qualquer uma das três variantes de tom. */
.conexao__aviso {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin-top: var(--e4);
  padding-top: var(--e3);
  border-top: 1px solid rgba(255, 255, 255, .22);
  position: relative;
  cursor: pointer;
}

.conexao__aviso-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.conexao__aviso-rotulo { font-size: var(--t-apoio); font-weight: var(--peso-forte); }

.conexao__aviso-destino {
  font-size: var(--t-meta);
  opacity: .85;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conexao__aviso .toggle__trilho {
  background: rgba(0, 0, 0, .22);
  border-color: rgba(255, 255, 255, .35);
}

.conexao__aviso .toggle__trilho::after { background: #fff; box-shadow: none; }

.conexao__aviso .toggle__caixa:checked + .toggle__trilho { background: rgba(255, 255, 255, .45); }

@media (max-width: 700px) {
  .conexao__fundo { right: -70px; opacity: .09; }
}

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

.saldos-banco + .saldos-banco { border-top: 1px solid var(--separador); }

.saldos-banco__cabeca {
  display: flex;
  align-items: center;
  gap: var(--e2);
  width: 100%;
  padding: var(--e2) 0;
  min-height: 44px;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--t-apoio);
  color: var(--tinta-1);
  cursor: pointer;
  text-align: left;
}

.saldos-banco__nome { flex: 1 1 auto; font-weight: var(--peso-forte); color: var(--tinta-1); }

.saldos-banco__meta { flex: none; font-size: var(--t-meta); color: var(--tinta-3); white-space: nowrap; }

.saldos-banco__seta {
  flex: none;
  color: var(--tinta-3);
  transform: rotate(90deg);
  transition: transform var(--transicao);
}

.saldos-banco--aberto .saldos-banco__seta { transform: rotate(180deg); }

.saldos-banco__contas { padding: 0 0 var(--e2) 30px; }

.saldos__valor,
.saldos-grade__valor { color: #1e40af; }

.saldos__valor--negativo,
.saldos-grade__valor--negativo { color: #991b1b; }

.linha--clicavel { cursor: pointer; }

.linha--clicavel:hover { background: var(--sup-elevada); }

.fio {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--e1);
}

.fio__msg {
  max-width: 78%;
  padding: var(--e2) var(--e3);
  border-radius: var(--raio-medio);
  font-size: var(--t-apoio);
}

.fio__msg--usuario {
  align-self: flex-end;
  background: var(--sup-afundada);
  border-bottom-right-radius: 4px;
}

.fio__msg--bot {
  align-self: flex-start;
  background: color-mix(in srgb, var(--marca-azul) 14%, var(--sup-cartao));
  border-bottom-left-radius: 4px;
}

.fio__texto { white-space: pre-wrap; word-break: break-word; }

.fio__quando { margin-top: 2px; font-size: var(--t-etiqueta); color: var(--tinta-3); text-align: right; }

.faixa-critica {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2) var(--e4);
  border-radius: var(--raio-pequeno);
  background: var(--sem-critico);
  color: #fff;
  font-size: var(--t-apoio);
  font-weight: var(--peso-forte);
}

.faixa-critica__link { color: #fff; margin-left: auto; white-space: nowrap; }

.filtros__chip { display: inline-flex; align-items: center; gap: 6px; }

.filtros__chip svg { opacity: .7; }

.filtros__chip--ativo svg { opacity: 1; }

.filtros__campo { position: relative; display: inline-flex; align-items: center; }

.filtros__campo > svg {
  position: absolute;
  left: 10px;
  color: var(--tinta-3);
  pointer-events: none;
}

.filtros__campo .campo { padding-left: 30px; }

.atv-legenda { border-left: 3px solid transparent; }

.atv-legenda--bot      { border-left-color: var(--sem-info); }
.atv-legenda--clientes { border-left-color: var(--sem-atencao); }
.atv-legenda--acessos  { border-left-color: var(--sem-neutro); }

#atividade .trilha__item .linha:hover { background: var(--sup-elevada); }

#atividade .trilha__diff { background: color-mix(in srgb, var(--sem-info) 6%, var(--sup-afundada)); }

.nav__boasvindas {
  padding: var(--e3) var(--e3) var(--e4);
  border-bottom: 1px solid rgba(247, 247, 248, .12);
  margin-bottom: var(--e3);
}

.nav__saudacao {
  color: var(--tinta-inversa);
  font-size: var(--t-corpo);
  font-weight: var(--peso-negro);
  letter-spacing: -.01em;
}

.nav__relogio {
  margin-top: 2px;
  color: rgba(247, 247, 248, .55);
  font-size: var(--t-meta);
  font-variant-numeric: tabular-nums;
}