/* ===== Dashboard dos afiliados (2026-09-30, /afiliados + affiliates.js) =====
   Página própria, sem o dashboard.css: as cores vêm daqui, com o mesmo tema
   do resto do site (ab_theme → data-theme no <html>). O cabeçalho e o rodapé
   são os do site (header.css e o <style> que o servidor põe com eles). */
.aff-portal {
  --bg: #0a0a0f; --bg-bar: #0d0d14; --card: #12121a; --card-hover: #1a1a24; --input: rgba(255,255,255,0.04);
  --line: rgba(255,255,255,0.09); --text: #f0f0f5; --text-2: #a0a0b8; --text-3: #7c7c92;
  --accent: #f59e0b; --accent-hover: #fbb534; --accent-ink: #111; --accent-soft: rgba(245,158,11,0.10); --accent-line: rgba(245,158,11,0.35);
  --good: #3ddc84; --err: #f87171;
  /* Nomes que o rodapé partilhado usa. */
  --muted: var(--text-3); --amber: #f59e0b;
  /* O cabeçalho do site é fixo: o conteúdo começa por baixo dele. */
  margin: 0; padding-top: 75px; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
  font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased;
}
[data-theme="light"] .aff-portal {
  --bg: #f6f7f9; --bg-bar: #ffffff; --card: #ffffff; --card-hover: #f2f4f7; --input: #f6f7f9;
  --line: #e4e7ec; --text: #16181d; --text-2: #475467; --text-3: #667085;
  --accent: #d97706; --accent-hover: #b45309; --accent-ink: #fff; --accent-soft: rgba(217,119,6,0.08); --accent-line: rgba(217,119,6,0.35);
  --good: #15803d; --err: #dc2626;
}
.aff-portal *, .aff-portal *::before, .aff-portal *::after { box-sizing: border-box; }
/* Os botões e a dica têm display próprio, que ganhava ao atributo hidden. */
.aff-portal [hidden] { display: none !important; }
/* Só no conteúdo: no cabeçalho, o "color: inherit" ganhava ao .btn-amber. */
.aff-main a { color: inherit; }
@media (max-width: 1180px) { .aff-portal { padding-top: 71px; } }
@media (max-width: 600px) { .aff-portal { padding-top: 69px; } }

.aff-main { flex: 1; width: 100%; max-width: 1040px; margin: 0 auto; padding: 32px 24px 0; }
#affiliatesRoot { display: flex; flex-direction: column; gap: 16px; }
/* Conta com sessão: email e "Sair", discretos, por cima do conteúdo. */
.aff-conta { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin: -12px 0 12px; }
.aff-user { color: var(--text-2); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Peças comuns */
.aff-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px; min-width: 0; }
.aff-card h2 { font-size: 1.05rem; margin: 0 0 14px; letter-spacing: -0.01em; }
.aff-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.aff-card-head h2 { margin: 0; }
.aff-eyebrow { display: inline-block; text-transform: uppercase; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; color: var(--accent); margin-bottom: 10px; }
.aff-muted { color: var(--text-2); font-size: 0.87rem; line-height: 1.55; margin: 0; }
.aff-vazio { color: var(--text-3); font-size: 0.87rem; line-height: 1.55; margin: 0; padding: 18px; text-align: center; border: 1px dashed var(--line); border-radius: 12px; }

.aff-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--accent); border: 1px solid var(--accent); color: var(--accent-ink); border-radius: 10px; padding: 11px 18px; font: inherit; font-weight: 700; font-size: 0.9rem; cursor: pointer; text-decoration: none; white-space: nowrap; }
.aff-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.aff-btn:disabled { opacity: 0.6; cursor: wait; }
.aff-btn--ghost { background: transparent; color: var(--text); border-color: var(--line); }
.aff-btn--ghost:hover { background: var(--card-hover); border-color: var(--line); }
.aff-btn--sm { padding: 6px 12px; font-size: 0.8rem; font-weight: 600; }
.aff-btn--wide { width: 100%; }
.aff-btn:focus-visible, .aff-col:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Entrada: programa + conta lado a lado */
.aff-landing { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.aff-hero { background: linear-gradient(135deg, var(--accent-soft), transparent 70%), var(--card); border: 1px solid var(--accent-line); border-radius: 16px; padding: 32px; }
.aff-hero h1 { font-size: 1.9rem; line-height: 1.2; letter-spacing: -0.03em; margin: 0 0 12px; }
.aff-hero > p { color: var(--text-2); font-size: 0.95rem; line-height: 1.65; margin: 0 0 24px; }
.aff-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.aff-steps li { display: flex; gap: 12px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.aff-steps li > b { flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; }
.aff-steps strong { display: block; font-size: 0.92rem; margin-bottom: 3px; }
.aff-steps span { color: var(--text-2); font-size: 0.84rem; line-height: 1.5; }

.aff-auth .aff-muted { margin-bottom: 18px; }
.aff-ou { display: flex; align-items: center; gap: 10px; margin: 16px 0; color: var(--text-3); font-size: 0.72rem; font-weight: 600; }
.aff-ou::before, .aff-ou::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.aff-toggle { text-align: center; font-size: 0.86rem; color: var(--text-2); margin: 16px 0 0; }
.aff-toggle a { text-decoration: none; }
.aff-toggle strong { color: var(--accent); }
.aff-legal { font-size: 0.74rem; color: var(--text-3); text-align: center; line-height: 1.5; margin: 14px 0 0; }
.aff-legal a { color: var(--text-2); }

/* Formulários */
.aff-form label { display: block; margin-bottom: 14px; }
.aff-form label > span, .aff-payform label > span { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 6px; }
.aff-form input:not([type=checkbox]), .aff-form textarea, .aff-payform input, .aff-link input {
  width: 100%; background: var(--input); color: var(--text); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 12px; font: inherit; font-size: 0.9rem; }
.aff-form textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.aff-form input:focus, .aff-form textarea:focus, .aff-payform input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.aff-form-sub { margin: -8px 0 18px; }
.aff-rules { border: 1px dashed var(--line); border-radius: 10px; padding: 12px 14px; margin: 4px 0 14px; font-size: 0.82rem; }
.aff-rules ul { margin: 6px 0 0; padding-left: 18px; list-style: disc; color: var(--text-2); line-height: 1.6; }
.aff-form label.aff-check { display: flex; gap: 8px; align-items: center; font-size: 0.86rem; cursor: pointer; }
.aff-form label.aff-check > span { margin: 0; font-weight: 500; }
.aff-check input { width: 16px; height: 16px; accent-color: var(--accent); }
.aff-err { color: var(--err); font-size: 0.85rem; margin: 0 0 12px; }
.aff-actions { display: flex; justify-content: flex-end; }

/* Estados (pendente, rejeitado, suspenso, erro) */
.aff-state { text-align: center; padding: 48px 24px; max-width: 620px; margin: 24px auto 0; width: 100%; }
.aff-state-ico { font-size: 2.4rem; margin-bottom: 10px; }
.aff-state h2 { font-size: 1.25rem; margin-bottom: 8px; }
.aff-state > p { color: var(--text-2); font-size: 0.92rem; line-height: 1.6; margin: 0 auto 14px; }

/* Painel */
.aff-head h1 { font-size: 1.6rem; letter-spacing: -0.03em; margin: 0 0 4px; }
.aff-link { display: flex; gap: 8px; margin-bottom: 10px; }
.aff-link input { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.88rem; }
.aff-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.aff-stat { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; min-width: 0; }
.aff-stat span { display: block; font-size: 0.74rem; color: var(--text-3); margin-bottom: 6px; }
.aff-stat b { display: block; font-size: 1.35rem; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; }
.aff-stat small { display: block; margin-top: 4px; font-size: 0.72rem; color: var(--text-3); }
.aff-stat--hot { border-color: var(--accent-line); background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--card); }
.aff-stat--hot b { color: var(--accent); }

/* Gráfico de cliques: uma série, barras finas, eixo discreto */
.aff-plot { display: flex; gap: 10px; height: 180px; }
.aff-yaxis { display: flex; flex-direction: column; justify-content: space-between; font-size: 0.7rem; color: var(--text-3); font-variant-numeric: tabular-nums; text-align: right; min-width: 22px; padding-bottom: 1px; }
.aff-bars { position: relative; flex: 1; display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--line); background-image: linear-gradient(var(--line), var(--line)); background-size: 100% 1px; background-repeat: no-repeat; background-position: top; }
.aff-col { flex: 1; height: 100%; display: flex; align-items: flex-end; cursor: default; border-radius: 4px 4px 0 0; }
.aff-col.on { background: var(--accent-soft); }
.aff-barra { width: 100%; background: var(--accent); border-radius: 4px 4px 0 0; }
.aff-col.on .aff-barra { background: var(--accent-hover); }
.aff-plot-vazio { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 24px; color: var(--text-3); font-size: 0.86rem; pointer-events: none; }
.aff-xaxis { display: flex; justify-content: space-between; margin: 6px 0 0 32px; font-size: 0.7rem; color: var(--text-3); }
.aff-tip { position: absolute; top: 0; z-index: 2; pointer-events: none; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; background: var(--bg-bar); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0,0,0,0.25); font-size: 0.76rem; color: var(--text-2); white-space: nowrap; }
.aff-tip b { color: var(--text); font-size: 0.8rem; }

/* Atividade e pagamentos */
.aff-duas { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.aff-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.aff-table th { text-align: left; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); padding: 0 8px 8px; border-bottom: 1px solid var(--line); }
.aff-table td { padding: 10px 8px; border-bottom: 1px solid var(--line); }
.aff-table tr:last-child td { border-bottom: 0; }
.aff-table .aff-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aff-mais { color: var(--good); }
.aff-payform { display: flex; gap: 8px; align-items: flex-end; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.aff-payform label { flex: 1; min-width: 0; }

@media (max-width: 900px) {
  .aff-landing, .aff-duas { grid-template-columns: 1fr; }
  .aff-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .aff-main { padding: 20px 16px 0; }
  .aff-hero { padding: 22px; }
  .aff-hero h1 { font-size: 1.45rem; }
  .aff-card { padding: 18px; }
  .aff-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aff-link, .aff-payform { flex-direction: column; align-items: stretch; }
  .aff-plot { height: 150px; }
}