/* =============================================================================
   assets/20_ts_tesouraria.css
   Estilo do módulo Tesouraria (tema claro).

   TUDO aqui nasce dentro de `.ts-app`, o root do módulo. O Dash serve a pasta
   `assets/` inteira em TODA rota: o navegador vê uma folha global só, e o nome
   do arquivo não isola nada. Quem isola é o seletor.

   Os tokens moram no próprio `.ts-app`, e não em `:root`. Herdados dali, valem
   no módulo inteiro e em nenhuma outra rota — que é o isolamento pretendido,
   com a vantagem de dois módulos poderem ter `--fundo` diferente sem disputa.
   ============================================================================= */

.ts-app {
  --superficie: #ffffff;
  --fundo: #f6f6f4;
  --linha: #ececec;
  --linha-suave: #f0efec;
  --tinta: #0b0b0b;
  --tinta-2: #52514e;
  /* 4.58:1 sobre o fundo. O anterior (#85837c) dava 3.51:1, e este
     cinza e' o texto das notas, com 12px — o tamanho que mais precisa
     de contraste, nao o que menos. */
  --tinta-3: #72706a;

  --azul: #2a78d6;
  --verde: #1baf7a;
  --laranja: #eb6834;
  --violeta: #4a3aa7;
  --vermelho: #e34948;

  --raio: 14px;
  --sombra: 0 1px 2px rgba(11, 11, 11, 0.04), 0 1px 8px rgba(11, 11, 11, 0.04);
}

/* ---------- topo ---------- */
.ts-app .topo {
  background: var(--superficie);
  border-bottom: 1px solid var(--linha);
  padding: 14px 22px;
  position: sticky;
  top: 0;
  z-index: 1020;
}

.ts-app .topo h1 {
  font-size: 17px;
  font-weight: 650;
  margin: 0;
  letter-spacing: -0.01em;
}

.ts-app .topo .subtitulo {
  font-size: 12px;
  color: var(--tinta-3);
  margin: 0;
}

.ts-app .seletor-comp .Select-control, .ts-app .seletor-comp .Select__control {
  min-width: 140px;
}

/* ---------- cartoes ---------- */
.ts-app .cartao {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

.ts-app .cabecalho-painel {
  background: transparent;
  border-bottom: 1px solid var(--linha-suave);
  padding: 12px 16px;
}

.ts-app .corpo-painel {
  padding: 12px 16px 14px;
}

.ts-app .titulo-painel {
  font-size: 13px;
  font-weight: 620;
  color: var(--tinta);
}

.ts-app .cartao-indicador .card-body {
  padding: 14px 16px 16px;
}

.ts-app .rotulo {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tinta-2);
}

.ts-app .numero {
  font-size: 26px;
  font-weight: 660;
  letter-spacing: -0.02em;
  color: var(--tinta);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.ts-app .numero { white-space: nowrap; }

.ts-app .numero.pequeno { font-size: 20px; }

.ts-app .numero.negativo { color: var(--vermelho); }

.ts-app .nota {
  font-size: 12px;
  color: var(--tinta-3);
  margin-top: 2px;
  min-height: 18px;
}

.ts-app .ponto {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
  flex: 0 0 auto;
}

.ts-app .dica-icone {
  font-size: 12px;
  color: var(--tinta-3);
  cursor: help;
}

/* ---------- linhas de resumo ---------- */
.ts-app .linha-resumo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--linha-suave);
}

.ts-app .linha-resumo:last-child { border-bottom: none; }

.ts-app .linha-rotulo { font-size: 13px; color: var(--tinta-2); }

.ts-app .linha-valor {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}

.ts-app .linha-valor.forte { font-weight: 650; font-size: 15px; }

/* ---------- botoes segmentados (no lugar de dropdown) ---------- */
/* Estrutura que o dbc gera:
     div.escolha > div.form-check > (input.form-check-input + label.form-check-label)
   Cada .form-check e' um segmento; o label e' a superficie clicavel inteira. */
.ts-app .escolha {
  display: flex;
  width: 100%;
}

.ts-app .escolha > .form-check {
  flex: 1 1 0;
  min-width: 0;
  padding-left: 0;          /* zera o recuo que o Bootstrap deixa para a bolinha */
  margin-bottom: 0;
}

.ts-app .escolha > .form-check + .form-check { margin-left: -1px; }

.ts-app .escolha .form-check-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ts-app .escolha .form-check-label {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 13px;
  font-weight: 550;
  color: var(--tinta-2);
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 0;
  padding: 10px 6px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
}

.ts-app .escolha > .form-check:first-child .form-check-label {
  border-radius: 9px 0 0 9px;
}

.ts-app .escolha > .form-check:last-child .form-check-label {
  border-radius: 0 9px 9px 0;
}

.ts-app .escolha .form-check-label:hover { background: #f4f4f2; color: var(--tinta); }

.ts-app .escolha .form-check-input:checked + .form-check-label {
  background: var(--azul);
  border-color: var(--azul);
  color: #fff;
  position: relative;
  z-index: 1;
}

/* variacoes: o botao marcado usa a cor que aquele assunto ja' tem no app */
.ts-app .escolha-laranja .form-check-input:checked + .form-check-label {
  background: var(--laranja);
  border-color: var(--laranja);
}

.ts-app .escolha-violeta .form-check-input:checked + .form-check-label {
  background: var(--violeta);
  border-color: var(--violeta);
}

.ts-app .escolha .form-check-label i { opacity: 0.85; }

.ts-app .escolha .form-check-input:focus-visible + .form-check-label {
  box-shadow: 0 0 0 3px rgba(42, 120, 214, 0.25);
  position: relative;
  z-index: 2;
}

/* o seletor de tipo do lancamento merece mais peso: e' a primeira decisao */
.ts-app .escolha-grande .form-check-label { font-size: 15px; padding: 13px 10px; }

/* ---------- barra dividida (irmas / irmaos) ---------- */
.ts-app .barra-dividida {
  display: flex;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  gap: 2px;                 /* respiro entre as fatias, no lugar de borda */
  background: var(--linha);
}

.ts-app .barra-dividida .fatia { height: 100%; }

.ts-app .legenda-fatia {
  font-size: 12px;
  color: var(--tinta-2);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* ---------- sugestoes de membros ---------- */
/* A caixa flutua ancorada no campo: nao empurra nada da tela para baixo.
   So' aparece enquanto o campo (ou um item dela) esta em foco — assim ela sai
   da frente sozinha quando a pessoa passa para o campo seguinte. */
.ts-app .campo-nome { position: relative; }

.ts-app .sugestoes {
  display: none;
  position: absolute;
  bottom: calc(100% + 4px);   /* sobe a partir do campo */
  left: 0;
  right: 0;
  z-index: 1060;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 12px;
  box-shadow: 0 -10px 28px rgba(11, 11, 11, 0.14);
  padding: 6px;
  /* teto modesto: acima do campo ha' menos espaco ate' o topo do modal */
  max-height: min(200px, 38vh);
  overflow-y: auto;
}

.ts-app .campo-nome:focus-within .sugestoes:not(:empty) { display: block; }

/* A caixa que abre para BAIXO.

   A de cima sobe porque nasceu dentro do modal de lancamento, onde o campo fica
   perto do rodape e uma lista descendo sairia da tela. Na busca de dizimistas o
   campo esta' no alto da pagina: descer e' o natural, e subir cobriria o titulo
   da tela. */
.ts-app .sugestoes-abaixo {
  bottom: auto;
  top: calc(100% + 4px);
  box-shadow: 0 10px 28px rgba(11, 11, 11, 0.14);
  max-height: min(320px, 52vh);
}

.ts-app .sugestao {
  display: flex;
  align-items: center;
  width: 100%;
  border: none;
  background: transparent;
  border-radius: 8px;
  padding: 11px 12px;
  font-size: 15px;
  color: var(--tinta);
  text-align: left;
}

.ts-app .sugestao:hover {
  background: rgba(42, 120, 214, 0.09);
  color: var(--azul);
}

/* O foco NAO some. Antes havia `outline: none` aqui, e quem navega pelo
   teclado percorria a lista de nomes sem enxergar onde estava. O fundo do
   :hover nao serve de foco: ele tambem aparece com o mouse parado por cima. */
.ts-app .sugestao:focus-visible {
  background: rgba(42, 120, 214, 0.09);
  color: var(--azul);
  outline: 2px solid var(--azul);
  outline-offset: -2px;
}

.ts-app .sugestao-nota {
  font-size: 12px;
  color: var(--tinta-3);
  padding: 9px 12px;
}

/* oferta de cadastrar o nome digitado, dentro da propria caixa */
.ts-app .cadastrar-bloco {
  padding: 10px 12px 4px;
  margin-top: 4px;
  border-top: 1px solid var(--linha-suave);
}

.ts-app .cadastrar-bloco:first-child {
  border-top: none;
  margin-top: 0;
}

.ts-app .cadastrar-titulo {
  font-size: 13px;
  color: var(--tinta-2);
}

.ts-app .cadastrar-titulo strong {
  color: var(--tinta);
  word-break: break-word;
}

.ts-app .cadastrar-bloco .btn {
  font-size: 14px;
  padding: 9px 10px;
}

/* ---------- lista de itens do lancamento ---------- */
.ts-app .lista-itens {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 12px 14px;
  background: #fbfbfa;
}

.ts-app .item-lista {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 0;
  border-bottom: 1px solid var(--linha-suave);
}

.ts-app .item-lista:last-child { border-bottom: none; }

.ts-app .item-nome {
  font-size: 14px;
  color: var(--tinta);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 44x44 e' o minimo para o dedo acertar sem mira. Com os 4px/6px de antes o
   alvo tinha ~24x20 — e sao justamente os botoes de EXCLUIR, onde errar custa
   caro. O icone continua do mesmo tamanho; o que cresce e' a area clicavel. */
.ts-app .btn-remover {
  color: var(--tinta-3);
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  flex: 0 0 auto;
}

.ts-app .btn-remover:hover { color: var(--vermelho); }

/* ---------- blocos do formulario, tingidos pelo assunto ---------- */
.ts-app .bloco-form {
  border-radius: 12px;
  padding: 14px;
  border-left: 3px solid transparent;
}

.ts-app .bloco-entrada {
  background: rgba(42, 120, 214, 0.05);
  border-left-color: var(--azul);
}

.ts-app .bloco-saida {
  background: rgba(235, 104, 52, 0.06);
  border-left-color: var(--laranja);
}

/* icone discreto na frente do rotulo do campo */
.ts-app .icone-campo {
  color: var(--tinta-3);
  font-size: 13px;
}

.ts-app .btn-adicionar { border-style: dashed; font-weight: 600; }

/* selo colorido no cartao de indicador */
.ts-app .selo {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex: 0 0 auto;
}

/* ---------- formulario ---------- */
.ts-app .cabecalho-grade {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tinta-2);
}

.ts-app .linha-grade .form-control, .ts-app .linha-grade .Select-control { border-radius: 9px; }

.ts-app input.valor { text-align: right; font-variant-numeric: tabular-nums; }

.ts-app .form-label, .ts-app label { font-size: 12px; font-weight: 600; color: var(--tinta-2); }

/* ---------- abas ---------- */
.ts-app .nav-tabs { border-bottom: 1px solid var(--linha); gap: 2px; }

.ts-app .nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--tinta-2);
  font-size: 13px;
  font-weight: 550;
  padding: 10px 14px;
}

.ts-app .nav-tabs .nav-link:hover { color: var(--tinta); background: transparent; }

.ts-app .nav-tabs .nav-link.active {
  color: var(--azul);
  background: transparent;
  border-bottom-color: var(--azul);
}

/* ---------- tabelas de relatorio ---------- */
.ts-app .tabela-relatorio { font-size: 13px; margin-bottom: 0; }

.ts-app .tabela-relatorio th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tinta-2);
  font-weight: 600;
  border-bottom: 1px solid var(--linha) !important;
}

.ts-app .tabela-relatorio td { border-bottom: 1px solid var(--linha-suave) !important; }

.ts-app .txt-dir { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- relatorio de fechamento ---------- */
.ts-app .relatorio {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 26px 30px;
  box-shadow: var(--sombra);
}

.ts-app .relatorio h2 { font-size: 19px; font-weight: 660; margin-bottom: 2px; }

.ts-app .relatorio .secao {
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-2);
  margin: 22px 0 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--linha);
}

.ts-app .assinatura {
  border-top: 1px solid var(--tinta-3);
  margin-top: 52px;
  padding-top: 6px;
  font-size: 12px;
  color: var(--tinta-2);
  text-align: center;
}

/* ---------- diversos ---------- */
.ts-app .btn { font-size: 13px; font-weight: 550; border-radius: 9px; }

.ts-app .badge-status { font-size: 11px; font-weight: 600; letter-spacing: 0.03em; }

.ts-app .alerta-estouro { border-left: 3px solid var(--vermelho); }

.ts-app .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td.focused {
  outline: 1px solid var(--azul) !important;
}

/* ---------- menu lateral ---------- */
.ts-app .menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 550;
  color: var(--tinta);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}

.ts-app .menu-item:hover { background: #f4f4f2; }

.ts-app .menu-item.ativo {
  background: rgba(42, 120, 214, 0.1);
  color: var(--azul);
}

.ts-app .menu-item i { font-size: 17px; width: 22px; text-align: center; }

.ts-app .menu-secao {
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-3);
  padding: 16px 16px 6px;
}

.ts-app .btn-menu {
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--tinta);
  padding: 6px 10px 6px 0;
}

/* ---------- botao flutuante de novo lancamento ---------- */
.ts-app .fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1035;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(42, 120, 214, 0.38);
  font-weight: 600;
  height: 58px;
  width: 58px;
  padding: 0;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ts-app .fab span { display: none; }

@media (min-width: 768px) {
.ts-app .fab { width: auto; height: auto; padding: 11px 20px; font-size: 15px; gap: 8px; }
.ts-app .fab span { display: inline; }
}

/* ---------- aviso do dia de fechar ---------- */
/* Uma linha so': aviso a esquerda, botao a direita. Antes eram tres linhas e um
   botao de largura inteira — 120px do alto da tela do celular. */
.ts-app .faixa-prazo {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid rgba(42, 120, 214, 0.35);
  background: rgba(42, 120, 214, 0.06);
  border-radius: var(--raio);
  padding: 8px 10px 8px 14px;
  font-size: 14px;
  /* o texto encolhe antes do botao: e' melhor cortar a data do que empurrar o
     botao para fora da tela */
  min-height: 46px;
}

.ts-app .faixa-prazo .btn { padding: 5px 14px; }

.ts-app .faixa-prazo.atrasada {
  border-color: rgba(227, 73, 72, 0.45);
  background: rgba(227, 73, 72, 0.07);
}

.ts-app .faixa-prazo.atrasada strong, .ts-app .faixa-prazo.atrasada .bi { color: var(--vermelho); }

.ts-app .nota-prazo {
  color: var(--tinta-3);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ts-app .contagem {
  font-size: 12px;
  color: var(--tinta-2);
  font-weight: 550;
}

@media (max-width: 767.98px) {
/* 16px evita o zoom automatico do Safari ao focar um campo */
.ts-app .form-control, .ts-app .form-control:focus, .ts-app .Select-control, .ts-app .Select__control { font-size: 16px !important; }
.ts-app .form-control { min-height: 46px; }
/* Dois cartoes por linha: o numero precisa caber inteiro na metade da
     tela. Em vw, ele acompanha a largura do aparelho em vez de depender
     de um ponto de quebra escolhido no chute. */
.ts-app .numero { font-size: 30px; }
.ts-app .cartao-indicador .numero { font-size: clamp(17px, 5.6vw, 30px); }
.ts-app .topo { padding: 10px 14px; }
.ts-app .topo h1 { font-size: 16px; }
.ts-app .relatorio { padding: 18px 16px; }
/* espaco para o botao flutuante nao cobrir o fim da pagina */
.ts-app .conteudo { padding-bottom: 88px; }
/* alvo confortavel para o dedo nos botoes segmentados */
.ts-app .escolha .form-check-label { font-size: 14px; padding: 13px 6px; }
.ts-app .escolha-grande .form-check-label { font-size: 16px; padding: 15px 8px; }
/* o campo de data nativo abre o seletor do proprio celular */
.ts-app input[type="date"] { min-height: 46px; }
.ts-app .modal-body { padding: 16px 14px; }
.ts-app .modal-footer .btn { flex: 1 1 auto; padding: 11px 14px; }
}

@media print {
.ts-app .topo, .ts-app .nav-tabs, .ts-app .btn, .ts-app .fab, .ts-app .offcanvas, .ts-app .offcanvas-backdrop, .ts-app .nao-imprimir { display: none !important; }
.ts-app .conteudo { padding: 0 !important; }
.ts-app .relatorio { border: none; box-shadow: none; padding: 0; }
.ts-app .tab-content > .tab-pane:not(.active) { display: none !important; }
.ts-app .cartao { break-inside: avoid; }
}

/* ---------- o lapis de editar, dentro da tabela ---------- */
/* A celula inteira e' o alvo, nao so' o glifo: 44px de altura ja' vem da
   propria linha, e o padding lateral completa a largura. */
.ts-app .acao-linha {
  color: var(--tinta-3);
  font-size: 16px;
  cursor: pointer;
  padding: 0 10px;
}

.ts-app td:hover > .dash-cell-value .acao-linha, .ts-app .acao-linha:hover {
  color: var(--azul);
}

/* ---------- o total embaixo da barra de proporcao ---------- */
.ts-app .total-do-cartao {
  text-align: center;
  font-size: 13px;
  color: var(--tinta-2);
  margin-top: 6px;
}

/* ---------- painel: secao, destino das entradas, medidor e rosca ---------- */
.ts-app .titulo-secao {
  font-size: 17px;
  font-weight: 650;
  color: var(--tinta);
  margin: 22px 0 10px;
}

/* pilula pequena: "60%", "40%", "Regra 60/40" */
.ts-app .selo-texto {
  font-size: 11px;
  font-weight: 650;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--linha-suave);
  color: var(--tinta-2);
  white-space: nowrap;
}

/* As duas metades dividem a linha e um fio as separa. No celular o fio vira
   horizontal: lado a lado, cada metade ficaria com uns 140px e o valor
   quebraria no meio do numero. */
.ts-app .destino-duplo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 3vw, 16px);
}

.ts-app .metade-destino + .metade-destino {
  border-left: 1px solid var(--linha);
  padding-left: clamp(10px, 3vw, 16px);
}

.ts-app .numero.destino {
  font-size: clamp(17px, 5.2vw, 24px);
  margin-top: 8px;
}

.ts-app .medidor {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--linha);
}

.ts-app .medidor-trilho {
  height: 10px;
  border-radius: 999px;
  background: var(--linha);
  overflow: hidden;
  margin-top: 8px;
  /* flex porque acima de 100% a barra tem DOIS pedacos lado a lado: o que
     coube no limite e o que passou. O arredondamento das pontas fica com o
     trilho, que recorta os dois */
  display: flex;
}

.ts-app .medidor-cheio {
  height: 100%;
  border-radius: 999px;
  /* a barra cresce da esquerda; sem largura minima uma fracao de 1% sumiria */
  min-width: 3px;
  flex: none;
}

/* o que passou do limite */
.ts-app .medidor-excesso {
  height: 100%;
  flex: none;
  min-width: 3px;
  /* o fio claro marca onde estava o limite. Sem ele, dois laranjas vizinhos
     viram um bloco so' e some justamente a informacao que este pedaco existe
     para dar: ate' onde dava para gastar */
  border-left: 2px solid var(--superficie);
  box-sizing: border-box;
}

.ts-app .medidor-pe {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--tinta-3);
  margin-top: 8px;
}

.ts-app .medidor-titulo {
  font-size: 14px;
  color: var(--tinta);
}

.ts-app .medidor-restam { font-weight: 640; }

/* legenda da rosca: nome a esquerda, contagem e % alinhadas a direita */
.ts-app .legenda-rosca { width: 100%; }

.ts-app .legenda-linha {
  display: flex;
  align-items: center;
  padding: 9px 0;
  font-size: 14px;
}

.ts-app .legenda-linha + .legenda-linha { border-top: 1px solid var(--linha-suave); }

.ts-app .legenda-nome { color: var(--tinta-2); }

.ts-app .legenda-conta {
  margin-left: auto;
  font-weight: 660;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}

.ts-app .legenda-pct {
  width: 44px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-3);
}

.ts-app .legenda-rosca-pe {
  font-size: 12px;
  color: var(--tinta-3);
  text-align: center;
  margin-top: 2px;
}

/* ---------- lista de lancamentos ---------- */
/* Substitui a DataTable. Ela media as colunas em JS e, com cinco delas numa
   tela de 318px, sobrava rolagem lateral bem em cima da coluna do valor. */
.ts-app .lista-lanc { margin-top: 4px; }

.ts-app .linha-lanc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 2px;
  border-top: 1px solid var(--linha-suave);
}

.ts-app .linha-lanc:first-child { border-top: 0; }

/* `min-width: 0` e' o que permite a descricao encolher: sem isso o flex usa a
   largura do conteudo como minimo e a linha estoura para fora do cartao */
.ts-app .lanc-corpo {
  flex: 1;
  min-width: 0;
}

.ts-app .lanc-topo {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.ts-app .lanc-desc {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: var(--tinta);
  /* nome comprido vira reticencia em vez de quebrar em tres linhas */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ts-app .lanc-valor {
  font-size: 14px;
  font-weight: 660;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ts-app .lanc-meta {
  font-size: 12px;
  color: var(--tinta-3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* alvo de 40px para o dedo, sem alargar a linha */
.ts-app .lanc-marca { flex: 0 0 auto; margin: 0; padding: 0; }

.ts-app .lanc-marca .form-check-input { width: 20px; height: 20px; margin: 0; }

.ts-app .lanc-lapis {
  flex: 0 0 auto;
  padding: 6px 8px;
  color: var(--tinta-3);
  text-decoration: none;
}

.ts-app .lanc-lapis:hover { color: var(--azul); }

.ts-app .lista-vazia {
  padding: 26px 8px;
  text-align: center;
  color: var(--tinta-3);
  font-size: 14px;
}

/* ---------- pastilhas de filtro ---------- */
/* Diferente do .escolha (largura inteira, para decisao de formulario): aqui
   cada pastilha ocupa so' o texto, e as tres cabem numa linha sobrando espaco. */
.ts-app .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ts-app .chips > .form-check {
  padding-left: 0;
  margin-bottom: 0;
}

.ts-app .chips .form-check-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ts-app .chips .form-check-label {
  display: block;
  font-size: 13px;
  font-weight: 550;
  color: var(--tinta-2);
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 5px 14px;
  cursor: pointer;
  white-space: nowrap;
}

.ts-app .chips .form-check-input:checked + .form-check-label {
  background: var(--azul);
  border-color: var(--azul);
  color: #fff;
}

.ts-app .chips .form-check-input:focus-visible + .form-check-label {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
}

.ts-app .botao-ordem {
  padding: 2px 6px;
  font-size: 12px;
  color: var(--tinta-3);
  text-decoration: none;
  white-space: nowrap;
}

.ts-app .botao-ordem:hover { color: var(--azul); }

/* barra que so' existe quando ha' algo marcado */
.ts-app .barra-selecao {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: rgba(42, 120, 214, 0.08);
  font-size: 13px;
}

/* icones que substituem palavra na linha (irma/irmao, dinheiro/pix) */
.ts-app .icone-linha {
  color: var(--tinta-3);
  font-size: 13px;
}

/* legenda das cores da categoria */
.ts-app .legenda-cores {
  display: flex;
  flex-wrap: wrap;
  /* centralizada: e' uma faixa estreita entre os filtros e a lista, e
     encostada a' esquerda parecia mais um controle esquecido do que uma
     explicacao */
  justify-content: center;
  gap: 14px;
  font-size: 12px;
  color: var(--tinta-3);
  padding: 2px 2px 8px;
  border-bottom: 1px solid var(--linha-suave);
  margin-bottom: 4px;
}

.ts-app .legenda-cor { display: inline-flex; align-items: center; }

/* O resumo do que esta' na tela: quantos, quanto entrou, quanto saiu.

   Sem pilula colorida. A cor desta tela e' da CATEGORIA do lancamento, e uma
   pilula azul escrita "Entradas" ao lado de uma legenda onde azul quer dizer
   "Dizimo" faz a mesma cor significar duas coisas. */
.ts-app .resumo-mes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 6px 16px;
  font-size: 13px;
  color: var(--tinta-2);
  padding: 6px 2px 2px;
}

.ts-app .resumo-conta {
  color: var(--tinta-3);
  font-size: 12px;
  width: 100%;
  text-align: center;
}

.ts-app .resumo-rotulo { color: var(--tinta-3); }

/* O "+" que acrescenta outra pessoa ao mesmo envelope.

   Dentro do campo, no canto: e' um detalhe deste campo, nao um controle a mais
   do formulario. Cinza, sem cor de acao — a maioria dos envelopes e' de uma
   pessoa so', e o botao nao pode competir com o que se veio fazer. */
.ts-app .campo-com-mais .form-control { padding-right: 40px; }

.ts-app .campo-com-mais .botao-mais {
  position: absolute;
  top: 4px; right: 4px;
  z-index: 3;
  display: flex; align-items: center; justify-content: center;
  padding: 6px; border: 0; border-radius: 6px;
  color: var(--tinta-3);
  text-decoration: none;
  line-height: 1;
}

.ts-app .campo-com-mais .botao-mais:hover, .ts-app .campo-com-mais .botao-mais:focus {
  background: var(--linha-suave);
  color: var(--azul);
  box-shadow: none;
}

/* Quanto fica para cada um, antes de salvar. A divisao acontece de qualquer
   jeito; esta caixa e' o que impede a surpresa no extrato depois. */
.ts-app .bloco-divisao {
  padding: 8px 10px;
  border-left: 3px solid var(--azul);
  border-radius: 8px;
  background: var(--fundo);
}

/* O relatorio de dizimistas: uma linha por pessoa, uma bolinha por mes.

   Bolinhas, e nao colunas de tabela: doze colunas numa tela de celular ligariam
   a rolagem lateral bem em cima do que se veio ver. Doze bolinhas cabem em pouco
   mais de cem pixels — e um buraco no meio da fila salta aos olhos de um jeito
   que uma coluna de "sim/nao" nao consegue. */
.ts-app .dz-tabela { font-size: 14px; }

.ts-app .dz-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--linha-suave);
}

.ts-app .dz-linha:last-child { border-bottom: 0; }

.ts-app .dz-cabecalho {
  border-bottom: 1px solid var(--linha);
  padding-bottom: 4px;
}

.ts-app .dz-nome {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ts-app .dz-meses {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.ts-app .dz-mes-rotulo {
  width: 12px;
  font-size: 9px;
  text-transform: uppercase;
  color: var(--tinta-3);
  text-align: center;
  letter-spacing: -.02em;
}

.ts-app .dz-bola {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--linha);
  background: transparent;
}

.ts-app .dz-bola.cheia {
  background: var(--azul);
  border-color: var(--azul);
}

.ts-app .dz-pct {
  flex-shrink: 0;
  width: 40px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-2);
}

@media (max-width: 560px) {
.ts-app .dz-linha { flex-wrap: wrap; gap: 2px 10px; }
.ts-app .dz-nome { flex: 1 0 100%; font-weight: 600; }
.ts-app .dz-meses { flex: 1 1 auto; }
.ts-app .dz-pct { margin-left: auto; }
/* o cabecalho nao tem nome para mostrar: some o espaco dele */
.ts-app .dz-cabecalho .dz-nome { display: none; }
}

/* O olho que mostra a senha, DENTRO do campo.

   Antes era um botao com borda ao lado, num `input-group`: parecia um segundo
   controle, algo a mais para preencher. Sobreposto no canto ele e' o que e' —
   um detalhe do proprio campo. Cinza, sem cor de acao: nao e' o que se veio
   fazer nesta tela. */
.ts-app .campo-senha { position: relative; }

.ts-app .campo-senha .entrada-senha { padding-right: 42px; }

.ts-app .campo-senha .olho-campo {
  position: absolute;
  top: 50%; right: 4px; transform: translateY(-50%);
  z-index: 3;
  display: flex; align-items: center; justify-content: center;
  padding: 6px; border: 0; border-radius: 6px;
  color: var(--tinta-3);
  text-decoration: none;
  line-height: 1;
}

.ts-app .campo-senha .olho-campo:hover, .ts-app .campo-senha .olho-campo:focus {
  background: var(--linha-suave);
  color: var(--tinta-2);
  box-shadow: none;
}

.ts-app .campo-senha .olho-campo i { font-size: 17px; }

/* O icone na frente do valor: como entrou (PIX, dinheiro) ou que tipo de gasto
   e' (fixa, variavel). Herda a cor do valor, entao nao precisa de cor propria. */
.ts-app .icone-valor {
  font-size: 13px;
  opacity: .75;
}

/* marca discreta de quem contribuiu sem estar no cadastro */
/* O convite para instalar o app, no alto da tela.

   Azul claro, e nao a cor de alerta: e' oferta, nao problema. Quem esta' com
   pressa passa por ela sem parar. */
.ts-app .faixa-instalar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 14px;
  margin-bottom: 12px;
  border: 1px solid var(--linha);
  border-left: 3px solid var(--azul);
  border-radius: 10px;
  background: var(--superficie);
  font-size: 14px;
}

.ts-app .faixa-instalar-icone {
  font-size: 20px;
  color: var(--azul);
  flex-shrink: 0;
}

.ts-app .faixa-instalar-nota {
  font-size: 12px;
  color: var(--tinta-3);
  margin-top: 2px;
}

/* O "agora nao" e' discreto de proposito: recusar tem de ser possivel e facil,
   sem competir com o botao que resolve. */
.ts-app .faixa-instalar-x {
  color: var(--tinta-3);
  flex-shrink: 0;
  padding: 4px 8px;
}

/* A caixa onde se cola a planilha: fonte de largura fixa, para as colunas
   coladas ficarem alinhadas e a pessoa enxergar onde uma linha esta' torta. */
.ts-app .ms-texto {
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  font-size: 13px;
  white-space: pre;
  overflow-x: auto;
}

/* A previa do que sera' lancado. Compacta: 60 linhas tem de caber sem virar
   uma rolagem infinita. */
.ts-app .tabela-previa {
  font-size: 13px;
  margin-bottom: 0;
}

.ts-app .tabela-previa th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tinta-3);
  font-weight: 600;
}

/* Quem lancou, no fim da linha do extrato. Discreto de proposito: e' a
   resposta de uma pergunta ocasional, e nao pode competir com o valor. */
.ts-app .lanc-autor {
  margin-left: 8px;
  color: var(--tinta-3);
  white-space: nowrap;
}

/* Uma linha do livro de operacoes. */
.ts-app .linha-operacao {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--linha-suave);
  font-size: 13px;
}

.ts-app .linha-operacao:last-child { border-bottom: 0; }

.ts-app .oper-quando {
  color: var(--tinta-3);
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

.ts-app .oper-quem { font-weight: 600; }

.ts-app .oper-detalhe {
  color: var(--tinta-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ts-app .marca-avulso {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--linha-suave);
  color: var(--tinta-3);
  font-size: 11px;
  white-space: nowrap;
}

/* ---------- historico: um bloco por mes ---------- */
/* Substitui a tabela de seis colunas, que rolava de lado no celular. */
.ts-app .linha-mes {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-top: 1px solid var(--linha-suave);
  padding: 12px 2px;
  cursor: pointer;
}

.ts-app .lista-meses .linha-mes:first-child { border-top: 0; }

.ts-app .linha-mes:hover { background: var(--linha-suave); }

.ts-app .linha-mes:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: -2px;
  border-radius: 8px;
}

.ts-app .mes-topo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ts-app .mes-nome {
  font-size: 15px;
  font-weight: 650;
  color: var(--tinta);
}

/* a seta vai para a ponta e avisa que o bloco inteiro abre o mes */
.ts-app .mes-seta {
  margin-left: auto;
  color: var(--tinta-3);
  font-size: 13px;
}

/* tres colunas iguais: alinhadas de um mes para o outro, da' para comparar
   sem ler rotulo nenhum */
.ts-app .mes-numeros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.ts-app .mes-rotulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tinta-3);
}

.ts-app .mes-valor {
  font-size: 14px;
  font-weight: 620;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ts-app .mes-valor.entrada { color: var(--azul); }

.ts-app .mes-valor.saida { color: var(--laranja); }

.ts-app .mes-valor.negativo { color: var(--vermelho); }

/* ---------- abas da pagina de Cadastros ---------- */
/* Rolam de lado no celular em vez de quebrar em duas linhas: tres abas em
   duas linhas empurrariam a lista para baixo da dobra. */
.ts-app .abas-cadastro {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.ts-app .abas-cadastro::-webkit-scrollbar { display: none; }

.ts-app .aba-cadastro {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;              /* alvo de toque */
  padding: 0 16px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--tinta-2);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.ts-app .aba-cadastro:hover { border-color: var(--azul); color: var(--azul); }

.ts-app .aba-cadastro.ativa {
  background: var(--azul);
  border-color: var(--azul);
  color: #fff;
}

.ts-app .aba-cadastro:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
}

/* ---------- linha que abre alguma coisa (a igreja, na Administracao) ---------- */
/* E' um <button>, entao precisa perder a aparencia de botao e ganhar a de
   linha de lista — o que muda e' so' o cursor e o realce ao tocar. */
.ts-app .item-clicavel {
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  transition: background .15s ease;
}

.ts-app .item-clicavel:hover { background: var(--fundo); }

.ts-app .item-clicavel:active { background: var(--linha); }

.ts-app .item-clicavel:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: -2px;
}

/* ---------- a caixa do link de convite ---------- */
.ts-app .cv-caixa {
  padding: 12px;
  border: 1px solid var(--verde);
  border-radius: 10px;
  background: rgba(27, 175, 122, .06);
}

/* O endereco e' longo e nao pode ser cortado: quem copia precisa do inteiro. */
.ts-app .cv-endereco {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  word-break: break-all;
}

/* ==========================================================================
   A ficha de uma pessoa: o historico dela, mes a mes.

   E' uma lista e nao uma tabela pelo mesmo motivo das bolinhas do relatorio
   geral: numa tela de celular, quatro colunas (mes, dizimo, oferta, total)
   ligariam a rolagem lateral em cima do que se veio ver. Empilhado, o mes e o
   total ficam nas pontas — que e' o que o olho procura — e o detalhe do que
   compoe aquele total fica no meio, podendo quebrar linha sem estragar nada.
   ========================================================================== */
.ts-app .ficha-lista {
  border: 1px solid var(--linha);
  border-radius: 14px;
  overflow: hidden;
}

.ts-app .ficha-linha {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--linha-suave);
}

.ts-app .ficha-linha:last-child { border-bottom: none; }

.ts-app .ficha-linha:nth-child(odd) { background: var(--linha-suave); }

.ts-app .ficha-mes { flex: 0 0 auto; }

/* o detalhe empurra o total para a direita, e cede o espaco primeiro quando
   nao cabe tudo na mesma linha */
.ts-app .ficha-partes {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.92rem;
  color: var(--tinta-2);
}

.ts-app .ficha-total {
  flex: 0 0 auto;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.ts-app .ficha-rodape {
  margin-top: 10px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Um mes ainda aberto pode receber mais contribuicao, e a linha dele vai mudar.
   Sem este aviso, o total de hoje e o de semana que vem seriam dois numeros
   diferentes sem explicacao nenhuma na tela. */
.ts-app .dz-aberto {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--laranja, #eb6834);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 1px 7px;
  white-space: nowrap;
}

/* Esconder de verdade.

   Os utilitarios do Bootstrap (`d-flex`, `d-block`) vem com `!important`, entao
   um `display: none` sem forca nenhuma perde a disputa e o elemento continua na
   tela. Esta classe existe para ganhar dela. */
.ts-app .sumido { display: none !important; }

/* O cabecalho do painel quando o titulo divide a linha com um filtro de quatro
   pastilhas.

   Numa tela de celular nao cabem os dois lado a lado: o titulo quebrava em duas
   linhas e as pastilhas em outras duas, com a ultima sozinha embaixo — 94px de
   cabecalho antes de o grafico comecar. Empilhado, o titulo fica numa linha e as
   quatro pastilhas noutra. */
.ts-app .chips-filtro .form-check-label {
  padding: 4px 10px;
  font-size: 12.5px;
}

@media (max-width: 575.98px) {
.ts-app .cabecalho-painel > div:has(.chips-filtro) {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 8px;
  }
/* as quatro numa linha so', dividindo o espaco por igual */
.ts-app .chips-filtro {
    width: 100%;
    flex-wrap: nowrap;
    gap: 4px;
  }
.ts-app .chips-filtro > .form-check { flex: 1 1 0; min-width: 0; }
.ts-app .chips-filtro .form-check-label {
    text-align: center;
    padding: 5px 2px;
    font-size: 12px;
    /* nomes curtos cabem; se um crescer, corta com reticencias em vez de
       empurrar os outros para fora */
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ==========================================================================
   Os caixas avulsos.

   O saldo e' a pergunta que se faz a um caixa de reserva — "quanto tem ali?" —
   entao ele e' o numero grande da linha, alinhado a' direita, com os digitos de
   largura fixa para as linhas empilhadas formarem coluna.
   ========================================================================== */
.ts-app .caixa-saldo {
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 12px;
  font-weight: 650;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  color: var(--verde, #1baf7a);
  white-space: nowrap;
}

/* saldo negativo e' informacao, nao enfeite: um caixa no vermelho precisa
   saltar da lista sem que se tenha de ler o sinal */
.ts-app .caixa-saldo.negativo { color: var(--laranja, #eb6834); }

.ts-app .caixa-valor {
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

.ts-app .caixa-valor.entrada { color: var(--azul, #2a78d6); }

.ts-app .caixa-valor.saida { color: var(--laranja, #eb6834); }

/* A descricao do lancamento avulso: ate' duas linhas, e nao meia.

   Numa tela de 375px, a linha divide espaco com o valor e dois botoes — e uma
   linha so' com corte deixava "Doacao do irm...", que nao diz de quem foi.
   Duas linhas cabem o suficiente para reconhecer o lancamento sem que a lista
   vire um paredao. */
.ts-app .cx-descricao {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
  /* `.item-nome` traz `nowrap`, e com ele o texto nunca quebra — o line-clamp
     acima nao tinha o que limitar e a linha continuava cortada no primeiro
     terco. Aqui ele volta a poder quebrar. */
  white-space: normal;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

/* sem isto, um filho flex se recusa a encolher abaixo do proprio conteudo e
   empurra o valor para fora da tela */
.ts-app .min-w-0 { min-width: 0; }

/* ==========================================================================
   Os dois bolsos de um caixa avulso: o que esta' na mao e o que esta' na conta.

   Lado a lado e nao empilhados: a comparacao entre os dois e' a leitura que se
   faz — "tenho mais no PIX do que em dinheiro" — e empilhados essa comparacao
   pediria rolagem.
   ========================================================================== */
.ts-app .bolso { padding: 12px 14px; }

.ts-app .bolso-saldo {
  font-size: 1.35rem;
  font-weight: 680;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  margin-top: 4px;
  color: var(--tinta);
}

.ts-app .bolso-saldo.negativo { color: var(--laranja); }

/* o que compoe o saldo, em corpo menor: esta' ali para conferir, nao para ler
   primeiro */
.ts-app .bolso-detalhe {
  display: flex;
  justify-content: space-between;
  gap: 2px 8px;
  margin-top: 6px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  /* Empilha em vez de quebrar no meio do numero.
     Dois bolsos lado a lado numa tela de 375px deixam ~150px para cada, e
     "+ R$ 1.000,00" nao cabe ao lado de "− R$ 380,50": sem isto o valor
     quebrava entre o "R$" e os digitos. */
  flex-wrap: wrap;
}

.ts-app .bolso-detalhe > span { white-space: nowrap; }

@media (max-width: 420px) {
/* um por linha: mais alto, mas cada numero inteiro */
.ts-app .bolso-detalhe { flex-direction: column; }
}

.ts-app .bolso-entrou { color: var(--azul); }

.ts-app .bolso-saiu { color: var(--laranja); }

.ts-app .caixa-total {
  font-size: 1.15rem;
  font-weight: 680;
  font-variant-numeric: tabular-nums;
}

.ts-app .caixa-total.negativo { color: var(--laranja); }

/* A forma de pagamento, num selo ao lado da data.

   Selo e nao coluna: sao duas palavras curtas, e uma coluna so' para elas
   roubaria a largura da descricao — que e' o que se le' primeiro. */
.ts-app .cx-rodape {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.ts-app .selo-forma {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--linha-suave);
  color: var(--tinta-2);
  white-space: nowrap;
}

.ts-app .selo-forma.pix { background: rgba(42, 120, 214, 0.12); color: var(--azul); }

/* o link de compartilhar: inteiro, selecionavel, e sem virar uma linha unica
   que sai da tela */
.ts-app .campo-link {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  padding: 10px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: var(--linha-suave);
  color: var(--tinta);
  resize: none;
  word-break: break-all;
}

/* A quebra embaixo do numero de um cartao do resumo.

   O cartao tem 172px de largura e 138 uteis, e a linha do numero ja' usa 115
   deles — a quebra nao cabia ao lado, so' embaixo. Ela vive nesta linha fina de
   13px, e existe nos QUATRO cartoes para que os quatro continuem da mesma
   altura: uma linha em um so' o deixaria mais alto que os vizinhos. */
.ts-app .quebra-card {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.15;
  color: var(--tinta-3, #8a8a86);
  font-variant-numeric: tabular-nums;
}

.ts-app .quebra-parte {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  min-width: 0;
}

/* o icone um pouco menor que o numero: ele identifica o bolso, nao concorre
   com o valor */
.ts-app .quebra-parte i { font-size: 10px; opacity: 0.85; }

@media (max-width: 359px) {
.ts-app .quebra-card { flex-direction: column; gap: 1px; }
}

/* ==========================================================================
   O sino: avisos dos caixas que a pessoa marcou.

   Fica no topo, ao lado do selo do caixa, porque e' de la' que se olha para
   saber "mudou alguma coisa?" — e porque o topo e' a unica parte da tela que
   sobrevive a toda navegacao.
   ========================================================================== */
.ts-app .btn-sino {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 0; border-radius: 12px;
  background: transparent;
  color: var(--tinta-2);
  font-size: 19px;
  cursor: pointer;
}

.ts-app .btn-sino:hover, .ts-app .btn-sino:focus-visible { background: var(--linha-suave); }

/* O contador so' existe quando ha' o que contar.
   Vazio, ele nao ocupa espaco nenhum — um circulo cinza permanente ao lado do
   sino ensinaria a pessoa a ignorar aquele canto da tela. */
.ts-app .sino-conta { display: none; }

.ts-app .sino-conta.com-aviso {
  display: flex; align-items: center; justify-content: center;
  position: absolute; top: 2px; right: 2px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--laranja);
  color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* uma linha da lista de avisos */
.ts-app .aviso {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--linha-suave);
}

.ts-app .aviso:last-child { border-bottom: none; }

.ts-app .aviso i { margin-top: 7px; flex: 0 0 auto; opacity: .25; }

.ts-app .aviso.novo i { opacity: 1; }

.ts-app .aviso-texto { font-size: 15px; color: var(--tinta-2); }

.ts-app .aviso.novo .aviso-texto { color: var(--tinta); font-weight: 550; }

/* o interruptor de aviso de um caixa */
.ts-app .botao-seguir { border-radius: 999px; white-space: nowrap; }

.ts-app .botao-seguir.ativo {
  background: var(--verde);
  border-color: var(--verde);
  color: #fff;
}