/* ═══════════════════════════════════════════════════════════════════════════════════════
   👤 PERFIL.CSS — o LAYOUT da casa do jogador no site (perfil.html)

   POR QUE EXISTE: o perfil nasceu como um cartão solto de 4 números; virou a porta pras
   telas de Indicação, Escolinha, Aluguel, Recompensas, Cupom e o cadastro do PIX. Isso pede
   grade de abas, listas e estados vazios.

   🧬 F3 (03/09) — SÓ LAYOUT. Zero hex, zero `.btn`, media só em {640, 1024}. A CARA vem do
   ds.css: o herói é `.glass-forte`, cada painel um `.glass`, as abas são `.chip`, os tiles
   de número e as linhas de lista são `.glass-escuro`, as pílulas de estado são `.pill`, o
   cadastro do PIX é o do carteira-painel.js (carteira.css). Aqui: grade, gap, tamanhos.
   O que era STAKE aqui (`.stk-*`) vive no stake.css, o dono — saiu.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ══════════════════ a moldura da página ══════════════════ */
.pf-wrap { width: min(1240px, 92vw); margin: var(--sp-6) auto var(--sp-8); }
.pf-wide { max-width: 980px; }
.pf-pilha { display: flex; flex-direction: column; gap: var(--sp-4); }
.pf-card { padding: var(--sp-4); }
.pf-gate { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); }
.pf-gate h2 { font-size: var(--fs-6); }
.pf-gate .lead { margin: 0; }

/* ── o herói: avatar + nick + selos ─────────────────────────────────────────────────── */
.pf-head { display: flex; align-items: center; gap: var(--sp-4); }
.pf-av { width: 72px; height: 72px; flex: none; border-radius: var(--r-lg); object-fit: cover; image-rendering: pixelated;
  background: var(--elevated); border: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.pf-quem { min-width: 0; display: grid; gap: 6px; }
.pf-nick { font-family: var(--font-head); font-weight: 800; font-size: var(--fs-6); line-height: 1.1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-badges { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.pf-badges:empty { display: none; }
.pf-sub { font-size: var(--fs-2); }
.pf-sub:empty { display: none; }

/* ── as abas: chips do ds, rolando na horizontal no toque ───────────────────────────── */
.ab-head { display: flex; gap: var(--sp-2); overflow-x: auto; padding: 2px 2px var(--sp-1); scrollbar-width: none; }
.ab-head::-webkit-scrollbar { display: none; }
.ab-head .chip { flex: none; }
/* 🎨 27/08 — os ícones das abas (eram emoji). `currentColor` faz cada um acompanhar o estado
   da própria aba (mute → ouro quando ativa) sem uma segunda regra de cor. */
.ab-bt .ab-ic { width: 16px; height: 16px; fill: currentColor; flex: none; }
/* 🔒 aba em construção: apagada, mas presente. Some no hover pra não parecer quebrada. */
.ab-bt[data-lock] { opacity: .55; }
.ab-bt[data-lock]:hover { opacity: .8; }

.ab-pane { display: none; }
.ab-pane.on { display: block; }

/* ═══ 🔒 o aviso das áreas em construção (dentro da própria aba, não em modal) ═══ */
.pf-lock { display: grid; place-items: center; gap: var(--sp-2); text-align: center;
  padding: var(--sp-7) var(--sp-5); color: var(--text-dim); }
.pf-lock svg { width: 34px; height: 34px; fill: currentColor; opacity: .45; }
.pf-lock b { font-family: var(--font-head); font-size: var(--fs-4); color: var(--text); }
.pf-lock p { margin: 0; max-width: 46ch; line-height: 1.6; font-size: var(--fs-2); }
.pf-lock a { color: var(--gold); font-weight: 700; }

/* ── estados: carregando · vazio · erro. Os três são HONESTOS: dizem o que houve, nunca
      pintam um número no lugar do que não veio. ──────────────────────────────────────── */
.ab-load, .ab-vazio { padding: var(--sp-7) var(--sp-5); text-align: center; color: var(--text-mute); font-size: var(--fs-2); }
.ab-vazio .ve { font-size: 34px; display: block; margin-bottom: var(--sp-2); opacity: .55; }
.ab-vazio .vt { font-size: var(--fs-3); font-weight: 700; color: var(--text-dim); margin-bottom: 6px; }
.ab-vazio .vs { font-size: var(--fs-2); line-height: 1.6; max-width: 440px; margin: 0 auto; }
.ab-vazio > a { margin-top: var(--sp-4); }

/* ── grade de números por aba (os tiles são `.glass-escuro`) ────────────────────────── */
.pf-grid, .ab-nums { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.ab-nums--depois { margin-top: var(--sp-5); }
.pf-stat, .ab-num { padding: var(--sp-4); border-radius: var(--r-md); min-width: 0; }
.pf-stat .v, .ab-num .v { font-family: var(--font-px); font-size: var(--fs-3); color: var(--gold); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; }
.ab-num .v.brl { font-size: var(--fs-2); }
.pf-stat .l, .ab-num .l { font-size: var(--fs-1); font-weight: 700; color: var(--text-mute); margin-top: 6px;
  text-transform: uppercase; letter-spacing: .06em; }
.ab-num.destaque { border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.ab-num.destaque .v { color: var(--green); }
.pf-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* ── linhas de lista (vagas, contratos, anúncios, extrato) — `.glass-escuro` ─────────── */
.ab-lista { display: flex; flex-direction: column; gap: var(--sp-2); }
.ab-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); }
.ab-row--solta { margin: var(--sp-2) 0 var(--sp-3); }
.ab-row .r-ico { font-size: 20px; flex: none; line-height: 1; }
.ab-row .r-main { flex: 1 1 200px; min-width: 0; }
.ab-row .r-t { font-size: var(--fs-2); font-weight: 700; color: var(--text); }
.ab-row .r-s { font-size: var(--fs-1); color: var(--text-mute); margin-top: 3px; line-height: 1.5; }
.ab-row .r-v { font-family: var(--font-px); font-size: 12px; color: var(--gold); white-space: nowrap; }
.ab-row .r-v.pos { color: var(--green); }
.ab-row .r-v.dimv { color: var(--text-mute); }
/* 🧾 o número do lançamento: mono e discreto, do jeito que banco imprime */
.r-num { font: 700 11px var(--font-mono); opacity: .6; letter-spacing: .3px; }

/* ── o link de convite: a única coisa COPIÁVEL do perfil ────────────────────────────── */
.pf-convite { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap;
  padding: var(--sp-4); border-radius: var(--r-md); margin-bottom: var(--sp-4); }
.pf-convite .cv-t { font-size: var(--fs-1); font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); width: 100%; }
.pf-convite code { flex: 1 1 200px; min-width: 0; overflow-x: auto; white-space: nowrap;
  font: 600 var(--fs-1) var(--font-mono); color: var(--text); padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm); background: rgba(0, 0, 0, .35); border: 1px solid var(--border); }

/* ── rodapé de cada aba: o caminho pra AÇÃO, que mora no jogo ───────────────────────── */
.ab-pe { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--border);
  display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; font-size: var(--fs-2); color: var(--text-mute); }
.ab-pe > a { margin-left: auto; }

/* ── 🎫 o cupom ──────────────────────────────────────────────────────────────────────── */
.pf-cupom { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); }
.pf-cupom .input { text-transform: uppercase; letter-spacing: 1px; }
.pf-cupom-msg { margin-top: var(--sp-3); font-size: var(--fs-2); line-height: 1.6; }
.pf-cupom-msg:empty { display: none; }

/* ═══ 🧾 02/09 — a paginação do extrato de bônus (chips do ds, 1 · 2 · 3) ═══ */
.ct-pags { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: var(--sp-3) 0 2px; align-items: center; }
.ct-pag { min-width: 44px; justify-content: center; padding: 6px 10px; }
.ct-pag-mais { font: 700 var(--fs-1) var(--font-b); opacity: .6; margin-left: 4px; }
.ct-h { margin: var(--sp-5) 0 var(--sp-2); font-family: var(--font-head); font-size: var(--fs-1); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); }
.ct-nota { margin: var(--sp-3) 0 0; font-size: var(--fs-2); color: var(--text-mute); line-height: 1.6; }

/* ═══ 🧾 o recibo: cara de documento (protocolo em mono, total em destaque), no vidro escuro ═══ */
.pf-recibo { border-radius: var(--r-lg); overflow: hidden; }
.pf-recibo .rc-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); border-bottom: 1px dashed var(--border);
  font-size: var(--fs-1); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); }
.pf-recibo .rc-topo code { font-family: var(--font-mono); font-size: var(--fs-1); letter-spacing: .04em;
  color: var(--gold); text-transform: none; }
.pf-recibo .rc-total { padding: var(--sp-4) var(--sp-4) 6px; text-align: center; font-family: var(--font-head);
  font-size: 30px; font-weight: 900; color: var(--gold); }
.pf-recibo .rc-linhas { padding: var(--sp-2) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: 7px; }
.pf-recibo .rc-linhas > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-2); }
.pf-recibo .rc-linhas span { color: var(--text-mute); }
.pf-recibo .rc-linhas b { color: var(--text-dim); text-align: right; word-break: break-word; }

/* ── ≥640: mais colunas, mais respiro ──────────────────────────────────────────────── */
@media (min-width: 640px) {
  .pf-wrap { margin-top: var(--sp-7); }
  .pf-card { padding: var(--sp-5) var(--sp-6); }
  .pf-nick { font-size: 28px; }
  .pf-grid { grid-template-columns: repeat(4, 1fr); }
  .ab-nums { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .pf-cupom { grid-template-columns: 1fr auto; }
}

/* ═══ ⚡ D-2 (03/09) — A GERADORA dentro do perfil (o Stake de BombCoin). SÓ layout. ═══ */
/* a ação principal de uma seção, ACIMA da lista (Escolinha: nome + criar; Aluguel: anunciar/ver) */
.pf-acao { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.pf-acao[hidden] { display: none; }
.pf-acao .input { min-width: 0; }
.pf-msg { font-size: var(--fs-2); line-height: 1.5; margin: var(--sp-2) 0 0; min-height: 0; }
.pf-msg:empty { display: none; }
.pf-msg.ok { color: var(--good); font-weight: 700; }
.pf-msg.erro, .ger-prev .erro { color: var(--crit); font-weight: 700; }

/* os 3 prazos: botões-cartão, o escolhido em ouro, o de 90 dias com selo de destaque */
.ger-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-3); }
.ger-tier { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 2px; text-align: center; min-height: 44px;
  padding: var(--sp-3) var(--sp-2); border-radius: var(--r-md); border: 2px solid transparent; transition: border-color .15s, transform .15s; }
.ger-tier b { font: 800 clamp(18px, 5vw, 24px)/1.1 var(--font-d); color: var(--gold); letter-spacing: -.02em; }
.ger-tier span { font: 700 var(--fs-2) var(--font-b); color: var(--text); }
.ger-tier small { font-size: var(--fs-1); line-height: 1.3; color: var(--text-mute); }
.ger-tier.on { border-color: var(--gold); }
.ger-tier.destaque:not(.on) { border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.ger-tier:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ger-tier:hover { transform: translateY(-2px); }

/* valor + atalhos (100 · 1.000 · 10.000 · máx) */
.ger-valor { display: grid; gap: var(--sp-2); }
.ger-valor .field { margin: 0; }
.ger-atalhos { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.ger-atalhos .chip { min-width: 64px; justify-content: center; }
.ger-prev { margin: var(--sp-2) 0 var(--sp-3); font-size: var(--fs-2); line-height: 1.5; color: var(--text-dim); min-height: 1.5em; }
.ger-prev b { color: var(--gold); }
.ger-nota { margin: var(--sp-2) 0 0; font-size: var(--fs-2); line-height: 1.5; }
#gerBt { width: 100%; }

/* 👆 o botão que se SEGURA: a barra enche em 350ms, e só cheia dispara */
.pf-hold::before { content: ''; position: absolute; inset: 0; width: 0; pointer-events: none;
  background: color-mix(in srgb, var(--bg) 28%, transparent); transition: width 0s; }
.pf-hold.holding::before { width: 100%; transition: width .35s linear; }
.pf-hold:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.4); }

/* o que está guardado: a linha pronta pra resgatar ganha a borda boa */
.ger-row > [data-resgata] { flex: none; }
.ger-row.pronto { border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.ger-row .r-s b { color: var(--good); }

/* a escada de desconto: 5 degraus, o atual aceso, os já vencidos apagados */
.ger-esc-tx { margin: 0 0 var(--sp-2); font-size: var(--fs-2); line-height: 1.55; color: var(--text-dim); }
.ger-esc-tx b { color: var(--gold); }
/* piso 14px (óculos): no celular os 5 degraus quebram em 2 linhas em vez de encolher a letra */
.ger-escada { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; }
.ger-degrau { display: grid; gap: 2px; text-align: center; padding: var(--sp-2) 4px; border-radius: var(--r-sm); min-width: 0; }
.ger-degrau b { font: 800 var(--fs-1)/1.2 var(--font-d); color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ger-degrau span { font-size: var(--fs-1); line-height: 1.3; color: var(--text-mute); }
.ger-degrau.feito { opacity: .55; }
.ger-degrau.on { border-color: var(--gold); }
.ger-degrau.on b, .ger-degrau.on span { color: var(--gold); }
.ger-hist { margin-top: var(--sp-4); }
.ger-hist summary .ds-ico { color: var(--gold); }

@media (min-width: 640px) {
  .pf-acao { grid-template-columns: 1fr auto auto; align-items: center; }
  #leaseAcao { grid-template-columns: auto auto 1fr; }
  .ger-valor { grid-template-columns: 1fr auto; align-items: end; }
  .ger-escada { grid-template-columns: repeat(5, 1fr); }
}