/* ============================================================
   TELAS DO CLIENTE — 03/09/2026

   Desenhado para o celular de quem tem 50 anos, à noite, com internet ruim.
   Não é a versão pequena do desktop: é o principal.

   As medidas aqui não são gosto:
   · corpo 16px porque abaixo disso o iOS dá zoom sozinho ao focar um campo, e
     o cliente perde o contexto da tela
   · alvo de toque 48px porque dedo não é cursor
   · o número grande usa fonte tabular para não dançar ao atualizar
   · a ação principal fica no terço inferior, onde o polegar alcança
   ============================================================ */

.tc{ max-width: 640px; margin: 0 auto; padding: var(--e-5, 24px) 0 var(--e-8, 64px); }
.tc h2{ font-size: 20px; margin-bottom: var(--e-4, 16px); }
.tc h3{ font-size: 16px; margin: var(--e-6, 32px) 0 var(--e-3, 12px); color: var(--muted); }

/* O número por que ele abriu o app. Tudo o mais é secundário a ele. */
.tc-destaque{
  background: linear-gradient(150deg, var(--blue, #0B2A55), var(--ink, #071426));
  color: #fff; border-radius: var(--r-lg, 20px);
  padding: var(--e-6, 32px) var(--e-5, 24px); margin-bottom: var(--e-5, 24px);
}
.tc-destaque small{ display:block; font-size: 12px; font-weight: 800; letter-spacing: .12em; color: #9DB4D4; margin-bottom: 10px; }
.tc-numero{ display:block; font-size: clamp(38px, 10vw, 56px); font-weight: 900; line-height: 1;
            letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--sun, #FFC400); }
.tc-sub{ display:block; margin-top: 10px; font-size: 15px; color: #C9D8EC; }
.tc-destaque-verde .tc-numero{ color: var(--green, #22C55E); }

.tc-cartoes{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: var(--e-5, 24px); }
@media (max-width: 520px){ .tc-cartoes{ grid-template-columns: 1fr; } }
.tc-cartao{ background: var(--surface, #fff); border: 1px solid var(--line); border-radius: var(--r-md, 14px); padding: var(--e-4, 16px); }
.tc-cartao small{ display:block; font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--muted); margin-bottom: 6px; }
.tc-cartao strong{ display:block; font-size: 26px; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tc-cartao span{ display:block; margin-top: 4px; font-size: 13px; color: var(--muted); }

/* A etiqueta "estimativa" nunca é opcional. É ela que impede o cliente de
   somar mentalmente uma projeção com um valor real — e é essa soma que produz
   a decepção na primeira fatura. */
.tc-tag{ display:inline-block; background: var(--sun, #FFC400); color: #3D2E00;
         font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
         padding: 3px 8px; border-radius: 999px; margin-right: 8px; vertical-align: middle; }

.tc-linha-estimativa{ background: var(--surface-alt, #F0F4F9); border-radius: var(--r-sm, 10px);
                      padding: 14px 16px; font-size: 14px; line-height: 1.55; margin-bottom: var(--e-4, 16px); }
.tc-estimativa{ margin-top: var(--e-4, 16px); }
.tc-estimativa strong{ display:block; font-size: 30px; font-weight: 900; font-variant-numeric: tabular-nums; margin: 6px 0 2px; }
.tc-estimativa small{ display:block; font-size: 13px; color: var(--muted); }

/* Estado vazio: é a tela dos primeiros 60 dias. Se disser "sem dados", o
   cliente acha que foi enganado. */
.tc-vazio{ text-align: center; padding: var(--e-7, 48px) var(--e-4, 16px);
           border: 1px dashed var(--line); border-radius: var(--r-md, 14px); background: var(--surface-alt, #F0F4F9); }
.tc-vazio-icone{ font-size: 44px; margin-bottom: 12px; }
.tc-vazio h2{ font-size: 20px; margin-bottom: 8px; }
.tc-vazio p{ color: var(--muted); max-width: 42ch; margin: 0 auto; }
.tc-vazio-pequeno{ border: 1px dashed var(--line); border-radius: var(--r-md, 14px);
                   padding: var(--e-5, 24px); background: var(--surface-alt, #F0F4F9); }
.tc-vazio-pequeno p{ color: var(--muted); font-size: 14px; margin: 6px 0 0; }

.tc-proximo{ background: rgba(255,196,0,.12); border-left: 3px solid var(--sun, #FFC400);
             border-radius: var(--r-sm, 10px); padding: 14px 16px; margin-top: var(--e-4, 16px);
             text-align: left; font-size: 15px; line-height: 1.5; }
.tc-tranquilo{ background: rgba(34,197,94,.10); border-left: 3px solid var(--green, #22C55E);
               border-radius: var(--r-sm, 10px); padding: 14px 16px; font-size: 15px; line-height: 1.5; }

/* Passos da adesão. O passo atual é o único destacado — barra de progresso com
   tudo aceso não diz onde ele está. */
.tc-passos{ list-style: none; padding: 0; margin: 0 0 var(--e-5, 24px); display: grid; gap: 2px; }
.tc-passo{ display: flex; align-items: center; gap: 12px; padding: 12px 14px; font-size: 15px;
           border-radius: var(--r-sm, 10px); }
.tc-passo span{ flex: 0 0 22px; text-align: center; font-weight: 900; }
.tc-feito{ color: var(--muted); }
.tc-feito span{ color: var(--green, #22C55E); }
.tc-agora{ background: var(--surface, #fff); border: 1px solid var(--line); font-weight: 800; }
.tc-agora span{ color: var(--sun, #FFC400); }
.tc-futuro{ color: #9AA9BC; }

/* Indicação */
.tc-convite{ background: var(--surface, #fff); border: 1px solid var(--line);
             border-radius: var(--r-md, 14px); padding: var(--e-5, 24px); }
.tc-convite p{ margin: 0 0 10px; font-size: 14px; color: var(--muted); }
.tc-link{ display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.tc-link code{ flex: 1; background: var(--surface-alt, #F0F4F9); border-radius: var(--r-sm, 10px);
               padding: 12px 14px; font-size: 13px; word-break: break-all; }
.tc-convite .btn{ min-height: 48px; }
@media (max-width: 520px){ .tc-link{ flex-direction: column; align-items: stretch; } }

.tc-indicados{ display: grid; gap: 8px; }
.tc-indicado{ display: flex; justify-content: space-between; align-items: center; gap: 16px;
              background: var(--surface, #fff); border: 1px solid var(--line);
              border-radius: var(--r-md, 14px); padding: 14px 16px; }
.tc-indicado b{ display:block; font-size: 15px; }
.tc-indicado small{ display:block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.tc-indicado-valor{ text-align: right; flex: 0 0 auto; }
.tc-indicado-valor strong, .tc-indicado-valor span{ display:block; font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; }
.tc-ok{ color: var(--green, #22C55E); }
/* Pendente em cinza, nunca em verde: valor projetado com cor de dinheiro
   confirmado é o começo de "vocês me prometeram e não pagaram". */
.tc-pendente{ color: var(--muted); }
.tc-indicado-valor small{ font-size: 12px; color: var(--muted); }

.tc-legal{ font-size: 12px; line-height: 1.5; color: var(--muted); margin-top: var(--e-4, 16px); }