/* ============================================================
   Ezzetilo AFILIADOS: ajustes próprios do painel do parceiro.
   O grosso do visual vem de master.css (mesmas variáveis --mx-*):
   é o mesmo sistema escuro, então duplicar tudo aqui só criaria
   dois lugares para o tema divergir.
   ============================================================ */

/* Coluna de argumento na tela de login: some no celular para o
   formulário não ficar empurrado para baixo da dobra. */
@media (max-width: 900px) {
  .aff-hero-col { display: none !important; }
  .aff-logo-mobile { display: flex !important; }
}

/* ── Menu lateral vira gaveta no celular ────────────────────── */
.aff-burger { display: none; }

@media (max-width: 860px) {
  .aff-side {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 220;
    transform: translateX(-100%);
    transition: transform .22s cubic-bezier(.32, .72, 0, 1);
    box-shadow: 0 0 40px rgba(0, 0, 0, .5);
  }
  .aff-side.aberto { transform: translateX(0); }
  .aff-burger { display: inline-flex !important; }
  .aff-backdrop {
    position: fixed;
    inset: 0;
    z-index: 210;
    background: rgba(4, 10, 16, .6);
    backdrop-filter: blur(2px);
  }
}

/* ── Tabela → cartões no celular ─────────────────────────────
   Grade com colunas fixas fica ilegível em 380px de largura. Em vez
   de rolar na horizontal (que esconde a coluna do valor, justamente
   a que importa), cada linha vira um cartão com os rótulos ao lado. */
@media (max-width: 760px) {
  .aff-tabela .aff-thead { display: none !important; }

  .aff-tabela .aff-trow {
    display: block !important;
    padding: 14px 16px !important;
  }

  .aff-tabela .aff-trow > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 3px 0;
    text-align: right !important;
  }

  .aff-tabela .aff-trow > div::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 750;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mx-text-4);
    text-align: left;
  }

  /* A primeira célula (nome do cliente/parceiro) vira o título do
     cartão: sem rótulo e alinhada à esquerda. */
  .aff-tabela .aff-trow > div:first-child {
    display: block;
    text-align: left !important;
    padding-bottom: 9px;
    margin-bottom: 5px;
    border-bottom: 1px solid var(--mx-border);
  }
  .aff-tabela .aff-trow > div:first-child::before { content: none; }
}

/* Máscara circular da prova de vida: o recorte é feito com um
   box-shadow gigante, então o contêiner precisa cortar o excesso. */
.aff-cam-mask { overflow: hidden; }

/* Números de dinheiro alinhados em colunas (tabular): evita o
   texto "dançar" quando o valor muda com a animação de contagem. */
.aff-num { font-variant-numeric: tabular-nums; }

/* Impressão do extrato: sem menu, sem botão, fundo branco. */
@media print {
  .aff-side, .aff-burger, header button { display: none !important; }
  body { background: #fff !important; }
}