/* ============================================================================
   _perfil_ui.css — Folha compartilhada do perfil (V1, docs/MELHORIAS_PERFIL_UI_2.md)
   Carregada por user/topo.php (perfil próprio) e user/teste1/topo.php (público).

   Regras deste arquivo:
   - Cores de destaque SEMPRE via --pf-c1/--pf-c2/--pf-link (o "Tema de Perfil" da
     loja sobrescreve as vars com !important — ver _gamificacao/_cosmeticos.php).
     Exceções legítimas: cores de raridade (troféus/cartas) e nomes decorados.
   - Site em QUIRKS MODE com <center> ancestral: .pfui-card zera text-align de
     propósito; nada de reset global aqui (box-sizing só onde precisar).
   - Os miolos de geral.php/teste1_geral.php ainda declaram estilos próprios com os
     MESMOS valores destes tokens (igualados na V2); a migração completa do markup
     para .pfui-* é pendência anotada no doc — não remover os tokens daqui.
   ========================================================================== */

/* O card padrão do perfil */
.pfui-card {
  background: var(--cg-card-a);
  border: 1px solid var(--cg-linha-2);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 14px;
  text-align: left; /* quirks mode: não herdar centralização do <center> ancestral */
}

/* Rótulo de seção padrão (com emoji opcional no começo) */
.pfui-label {
  display: block;
  color: var(--cg-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 12px;
}
.pfui-label a { color: var(--pf-link); text-transform: none; letter-spacing: 0; font-size: 12px; text-decoration: none; }
.pfui-label a:hover { text-decoration: underline; }

/* Chip padrão (mesmo desenho de .pf-hdr-chip/.pcg-chip) */
.pfui-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--cg-txt-2);
  background: var(--cg-card);
  border: 1px solid var(--cg-linha-3);
  border-radius: 999px;
  padding: 6px 12px;
  box-sizing: border-box;
  text-decoration: none;
}
.pfui-chip b { color: var(--cg-txt-2); }

/* Empty state padrão (V9) — ícone temático + frase + CTA opcional */
.pfui-empty {
  color: var(--cg-dim);
  font-size: 12px;
  padding: 10px 0;
  line-height: 1.7;
}
.pfui-empty .pfui-empty-ico { font-size: 18px; margin-right: 8px; vertical-align: middle; }
.pfui-empty a { color: var(--pf-link); }

/* ── Acessibilidade transversal (V9) ───────────────────────────────────── */

/* Foco visível nos controles do perfil (teclado) */
.pf-nav-tab:focus-visible,
.pf-hdr-chip:focus-visible,
.pf-hdr-btn:focus-visible,
.pfui-chip:focus-visible,
.pcg-bt:focus-visible,
.bio-btn:focus-visible {
  outline: 2px solid var(--pf-link);
  outline-offset: 2px;
}

/* Menos movimento para quem pediu menos movimento */
@media (prefers-reduced-motion: reduce) {
  .cover-img, .cover-item, .imagem1,
  .pd-card img, .pd-carta,
  .trofeu-badge, .pfui-anim {
    transition: none !important;
    transform: none !important;
  }
}

/* ── V5: Painel de Bordo (medidores radiais + linha de órbita) ─────────────
   Usado por user/geral.php e user/teste1/geral.php via perfil_gauge_html()
   (user/_perfil_stats.php). O anel é um conic-gradient das vars do tema sobre
   o trilho var(--cg-linha-2); o furo central é um ::before da cor aproximada do card. */
.pfb-secao { margin-bottom: 18px; }
.pfb-secao:last-child { margin-bottom: 0; }
.pfb-secao-titulo { display: block; color: var(--cg-txt-2); font-size: 12px; font-weight: bold; margin-bottom: 12px; }
.pfb-gauge-wrap { flex: 1; text-align: center; }
.pfb-gauge { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto; position: relative;
  background: conic-gradient(var(--pf-c1), var(--pf-c2) calc(var(--pfb-pct) * 1%), var(--cg-linha-2) 0); }
.pfb-gauge::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--cg-card-2); }
.pfb-gauge-val { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--pf-link); font-size: 14px; font-weight: bold; font-family: tahoma, sans-serif; z-index: 1; }
.pfb-gauge-lbl { color: var(--cg-muted); font-size: 11px; margin-top: 6px; }
.pfb-orbit { position: relative; }
.pfb-orbit-rocket { position: absolute; top: 50%; transform: translate(-50%, -50%);
  font-size: 13px; line-height: 1; pointer-events: none; z-index: 1; }
@media (max-width: 600px) {
  .pfb-gauge { width: 54px; height: 54px; }
  .pfb-gauge-val { font-size: 12.5px; }
  .pfb-gauge-lbl { font-size: 10px; }
}

/* ── V6: contagem discreta nas abas + brilho na aba ativa ────────────────── */
.pf-nav-count { font-size: 11px; color: var(--cg-dim-2); font-weight: normal; }
.pf-nav-tab.active { text-shadow: 0 0 12px var(--pf-link); }