/* ==========================================================================
   Academy · Rede Lendários — academy-melhorias.css  v1.0  (2026-10-27)
   Carregar POR ÚLTIMO, depois de academy-ui.css, em todas as páginas.

   PARTE 1  Correções (bugs, acessibilidade, consistência). Aplicar já.
   PARTE 2  Direção visual "Ouro é conquista". Pode ir junto ou depois;
            é só apagar o bloco inteiro se quiser subir só a Parte 1.
   ========================================================================== */

/* Fontes Gloock + Hanken Grotesk: carregadas por <link> no <head>
   (public-shell.php, auth_header.php, v2-shell.php). */

/* ==========================================================================
   PARTE 1 — CORREÇÕES
   ========================================================================== */

/* 1.1 Tokens: escala tipográfica, raios e alvos de toque únicos
   (hoje a página usa 15 tamanhos de fonte e 8 raios diferentes). */
:root {
  --fs-xs: 12px;     /* legendas, contadores */
  --fs-sm: 13px;     /* metadados, rótulos */
  --fs-base: 15px;   /* texto do post, botões */
  --fs-md: 17px;     /* nome de autor, títulos de card */
  --fs-lg: 21px;     /* títulos de seção */
  --fs-xl: 28px;     /* títulos de página (mobile) */
  --fs-2xl: 40px;    /* hero (desktop) */

  --r-sm: 10px;      /* inputs, chips, botões pequenos */
  --r-md: 14px;      /* cards no mobile, busca */
  --r-lg: 20px;      /* cards e hero no desktop */
  --r-pill: 999px;   /* CTAs */

  --tap: 44px;       /* alvo mínimo de toque (WCAG 2.5.5) */

  --lx-r: var(--r-lg);
  --lx-r-md: var(--r-md);
  --lx-r-sm: var(--r-sm);
}

/* 1.2 Contraste: --lx-faint (#9A9284) dava 3.08:1 nas datas dos posts.
   Agora passa 4.5:1 sobre branco e sobre o card escuro. */
:root,
:root[data-community-theme="light"] { --lx-faint: #736B5E; }
:root[data-community-theme="dark"]  { --lx-faint: #B0A592; }

/* 1.3 Cards do feed desalinhados no mobile/tablet.
   Causa: margin 0 -12px num container com gutter de 16px, e valia até 900px.
   Agora: até 620px o card vai de borda a borda de verdade;
   de 621px a 900px volta a ser um card arredondado alinhado com a busca. */
@media (max-width: 900px) {
  :root[data-community-theme] body.lx-body .social-post {
    margin: 0 0 14px;
    border-radius: var(--r-md);
    border-left: 1px solid var(--lx-line);
    border-right: 1px solid var(--lx-line);
  }
}
@media (max-width: 620px) {
  :root[data-community-theme] body.lx-body .social-post {
    margin: 0 -16px 10px;
    width: auto;
    max-width: none;   /* community-public-v3.1.css limitava a 100% e o card não chegava na borda direita */
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
}

/* Tablet (coluna lateral escondida): o feed tinha largura máxima centralizada e
   ficava 5px para dentro do hero e da busca. Agora usa a grade inteira. */
@media (max-width: 930px) {
  .guest-grid {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
  }
}

/* 1.4 "Entrar" sumia do topo abaixo de 640px: quem já tem conta
   não achava o login. Volta a aparecer, compacto. */
@media (max-width: 640px) {
  :root[data-community-theme] body.lx-guest .guest-login {
    display: inline-flex;
    min-height: 40px;
    padding: 0 14px !important;
    font-size: var(--fs-sm);
  }
}

/* 1.5 Botão "Criar meu acesso" com 160px de altura no celular.
   Causa: .auth-actions também tem a classe .field (flex em coluna) e os
   filhos têm flex: 1 1 160px, então os 160px viravam altura.
   Agora fica em linha com quebra: no celular cada botão ocupa a largura toda. */
body.lx-auth .auth-actions {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
}
body.lx-auth .auth-actions > * {
  flex: 1 1 160px;
  height: auto;
  min-height: 50px;
}

/* 1.6 Alvos de toque: ações do post (40px), links "Entrar / Criar conta"
   dentro do post (17px) e busca (36px) sobem para 44px. */
:root[data-community-theme] body.lx-body .social-post-actions :is(.social-action, button, a) {
  min-height: var(--tap);
}
:root[data-community-theme] body.lx-body .social-more-link {
  width: var(--tap);
  height: var(--tap);
}
/* Área de toque maior sem mudar a linha do texto (padding + margem negativa). */
:root[data-community-theme] body.lx-body .social-guest-comment-cta a {
  display: inline-block;
  padding: 13px 0;
  margin: -13px 0;
}
:root[data-community-theme] body.lx-body .social-extra-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap);
}
/* Celulares estreitos: as 4 ações cabem numa linha sem cortar "Salvar referência". */
@media (max-width: 420px) {
  :root[data-community-theme] body.lx-body .social-post-actions :is(.social-action, button, a),
  :root[data-community-theme] body.lx-body .social-extra-link {
    padding-left: 8px;
    padding-right: 8px;
    gap: 5px;
  }
  :root[data-community-theme] body.lx-body .social-post-actions,
  :root[data-community-theme] body.lx-body .lx-actions-row {
    gap: 0;
  }
}
:root[data-community-theme] body.lx-body .social-header-search {
  min-height: 52px;
  border-radius: var(--r-md);
}
:root[data-community-theme] body.lx-body .social-header-search :is(input, button) {
  min-height: var(--tap);
}
:root[data-community-theme] body.lx-body .social-header-search button {
  border-radius: var(--r-sm);
}

/* 1.7 Nada abaixo de 12px (havia 10px, 11px e 11.5px). */
:root[data-community-theme] body.lx-body .social-post-meta { font-size: var(--fs-sm); }
:root[data-community-theme] body.lx-body .social-author-tag { font-size: var(--fs-xs); }
:root[data-community-theme] body.lx-body .social-post-stats { font-size: var(--fs-sm); }
:root[data-community-theme] body.lx-body .social-guest-comment-cta { font-size: var(--fs-sm); }
.guest-join-kicker,
.social-clear-search,
.social-post-body .community-file-card small {
  font-size: var(--fs-xs) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* 1.8 Imagem quebrada: o JS (academy-melhorias.js) marca a mídia com
   .is-broken quando o arquivo não carrega; aqui ela some do post. */
.community-media.is-broken { display: none !important; }

/* 1.9 Ícones SVG (substituem ♥ ▤ ↗ ☾ — ver trechos PHP). */
.lx-ico {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: inline-block;
  vertical-align: middle;
}

/* 1.10 Foco visível também nos links de visitante. */
:root[data-community-theme] body.lx-body :is(.guest-login, .guest-signup, .guest-explore, .social-more-link):focus-visible {
  outline: 2px solid var(--lx-gold);
  outline-offset: 3px;
}


/* ==========================================================================
   PARTE 2 — DIREÇÃO VISUAL "OURO É CONQUISTA"
   Ouro só aparece em nível, conquista e na ação principal da tela.
   Verde (vert) = venda e comissão. O resto fica sóbrio.
   ========================================================================== */

/* 2.1 Paleta */
:root,
:root[data-community-theme="light"] {
  --lx-canvas:    #F7F7F4;   /* Papel: sai o creme amarelado #F3F1EC */
  --lx-card:      #FFFFFF;
  --lx-card-2:    #FBFBF9;
  --lx-hover:     #F1F0EC;
  --lx-ink:       #17130E;   /* Sable */
  --lx-ink-2:     #2B2721;   /* Tinta */
  --lx-muted:     #5F584D;
  --lx-line:      #E6E4DE;
  --lx-line-2:    #D6D2C9;
  --lx-gold:      #C9A24B;   /* Ouro */
  --lx-gold-2:    #7A5C1E;   /* Ouro velho: ouro em texto, 5.9:1 */
  --lx-gold-soft: #FAF3E2;
  --lx-gold-ring: #DDBE73;
  --lx-vert:      #1E5A41;   /* Vert: venda, comissão, tarefa paga */
  --lx-vert-soft: #E7F1EC;
  --lx-ok:        var(--lx-vert);
}
:root[data-community-theme="dark"] {
  /* Noite em grafite quente, não preto: os cards se destacam do fundo
     (antes 1.06:1, agora 1.14:1 + bordas 1.45:1) e todo texto passa de 5.6:1. */
  --lx-canvas:    #1E1C18;
  --lx-card:      #2A2722;
  --lx-card-2:    #302D27;
  --lx-hover:     #37332C;
  --lx-ink:       #F4EFE6;
  --lx-ink-2:     #E3DCCF;
  --lx-muted:     #C2B8A8;
  --lx-faint:     #B0A592;
  --lx-line:      #45403A;
  --lx-line-2:    #56504A;
  --lx-gold:      #D8B25E;
  --lx-gold-2:    #E6C77E;
  --lx-gold-soft: rgba(216,178,94,.14);
  --lx-gold-ring: #D8B25E;
  --lx-shadow:    0 1px 2px rgba(0,0,0,.25);
  --lx-vert:      #6CC39A;
  --lx-vert-soft: rgba(108,195,154,.14);
  --lx-ok:        var(--lx-vert);
}
html[data-community-theme="dark"] { background: var(--lx-canvas); }

/* 2.1b Páginas de visitante usam variáveis próprias (--guest-*, em
   community-public-v3.1.css). Elas passam a seguir a mesma paleta. */
html[data-community-theme] body.community-public-page {
  --guest-bg:     var(--lx-canvas);
  --guest-card:   var(--lx-card);
  --guest-text:   var(--lx-ink);
  --guest-muted:  var(--lx-muted);
  --guest-border: var(--lx-line);
  --guest-gold:   var(--lx-gold-2);
}
html[data-community-theme="light"] { background: var(--lx-canvas); }

/* 2.2 Tipografia: Gloock nos títulos, Hanken Grotesk na interface.
   Cormorant Garamond continua só no logotipo. */
:root {
  --lx-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --lx-display: "Gloock", Georgia, "Times New Roman", serif;
}
:root[data-community-theme] body.lx-body,
body.lx-auth {
  font-family: var(--lx-sans);
}
:root[data-community-theme] body.lx-body :is(button, input, select, textarea),
body.lx-auth :is(button, input, select, textarea) {
  font-family: var(--lx-sans);
}

:root[data-community-theme] body.lx-body :is(
  .guest-hero h1,
  .guest-feed-head h2,
  .guest-join-card h2,
  .guest-aside h2,
  .v2-page-head h1,
  .community-room-header h1,
  .page-hero h1,
  .v2-page > header h1,
  .community-dashboard-hero h2,
  .community-dashboard-section-head h2
),
body.lx-auth .auth-card h1,
body.lx-auth .lx-auth-brand h2 {
  font-family: var(--lx-display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
}

.guest-hero h1 {
  font-size: clamp(var(--fs-xl), 5.2vw, 48px) !important;
  line-height: 1.06 !important;
  max-width: 16ch;
}
.guest-feed-head h2,
:root[data-community-theme] body.lx-body .community-dashboard-section-head h2 {
  font-size: var(--fs-lg) !important;
  line-height: 1.2 !important;
}
.guest-join-card h2 {
  font-size: clamp(20px, 2.6vw, 24px) !important;
  line-height: 1.2 !important;
  max-width: 24ch;
}
body.lx-auth .auth-card h1 { font-size: 32px !important; line-height: 1.1 !important; }
body.lx-auth .lx-auth-brand h2 { line-height: 1.04 !important; }

/* Títulos dentro do post continuam na sans (são conteúdo, não marca). */
:root[data-community-theme] body.lx-body .social-post-body h2 {
  font-family: var(--lx-sans);
  font-size: var(--fs-md);
  font-weight: 800;
}

/* 2.3 Ouro só onde é conquista ou ação principal */

/* Avatar: anel neutro para todos; o anel dourado fica para nível/destaque
   (.is-level / .is-featured, a ligar quando o nível estiver no HTML). */
:root[data-community-theme] body.lx-body .social-avatar {
  background: var(--lx-hover);
  color: var(--lx-ink-2);
  box-shadow: 0 0 0 2px var(--lx-card), 0 0 0 3px var(--lx-line-2);
}
/* academy-theme-global.css pinta o avatar de membro de dourado no tema claro
   (seletor mais forte); este seletor tem o mesmo peso e vem depois. */
html[data-community-theme] body.lx-body.community-social-page .social-avatar.member {
  background: var(--lx-hover);
  color: var(--lx-ink-2);
  border-color: transparent;
}
:root[data-community-theme] body.lx-body .social-avatar:is(.is-level, .is-featured) {
  box-shadow: 0 0 0 2px var(--lx-card), 0 0 0 3.5px var(--lx-gold-ring);
}
:root[data-community-theme] body.lx-body .social-avatar.team {
  background-color: var(--lx-ink);
}

/* Selo ADM é cargo, não conquista: vira selo escuro discreto. */
:root[data-community-theme] body.lx-body .social-author-tag {
  background: var(--lx-ink);
  color: #F3ECDD;
}
:root[data-community-theme="dark"] body.lx-body .social-author-tag {
  background: #F3ECDD;
  color: #17130E;
}

/* Busca: botão secundário escuro (o dourado fica para o CTA de cadastro). */
:root[data-community-theme] body.lx-body .social-header-search button,
.social-search-row button {
  background: var(--lx-ink) !important;
  color: #F3ECDD !important;
}
:root[data-community-theme] body.lx-body .social-header-search button:hover,
.social-search-row button:hover {
  background: var(--lx-ink-2) !important;
}
:root[data-community-theme="dark"] body.lx-body .social-header-search button {
  background: #F3ECDD !important;
  color: #17130E !important;
}

/* Barra fixa do mobile e CTAs de cadastro: um só tratamento dourado. */
@media (max-width: 620px) {
  .guest-mobile-cta a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    padding: 0 18px !important;
    border-radius: var(--r-pill) !important;
    background: var(--lx-metal) !important;
    color: #1A1306 !important;
    font-weight: 800;
  }
  .guest-mobile-cta .guest-mobile-login {
    background: transparent !important;
    color: #F3ECDD !important;
    border: 1px solid rgba(255,255,255,.18);
  }
}

/* Convite no meio do feed: continua o cartão escuro do academy-ui.css
   (mesmo tratamento do hero e do topo). */

/* Post fixado: marca em ouro velho, sem caixa. */
:root[data-community-theme] body.lx-body .social-post:has(.social-pinned-label) {
  border-color: var(--lx-gold-ring);
}

/* Verde = dinheiro: contadores de venda/comissão e status de tarefa paga. */
:root[data-community-theme] body.lx-body :is(.lx-money, .is-paid, .task-paid, .community-task-reward) {
  color: var(--lx-vert);
}
:root[data-community-theme] body.lx-body :is(.lx-money-chip, .task-reward-chip) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--lx-vert-soft);
  color: var(--lx-vert);
  font-size: var(--fs-xs);
  font-weight: 800;
}

/* 2.3b Cadastro e login: mesmo fundo papel (academy-ui.css usava #F3F1EC fixo)
   e rodapé com contraste suficiente. */
body.lx-auth,
body.lx-auth .lx-auth-main,
body.lx-auth .auth-footer {
  background: var(--lx-canvas);
}
body.lx-auth .auth-footer,
body.lx-auth .auth-footer a {
  color: var(--lx-muted);
}

/* Link "Voltar ao feed público" no post aberto: área de toque de 44px. */
.guest-single-back a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}

/* 2.4 Cards: sem sombra no feed (o fio já separa). */
:root[data-community-theme] body.lx-body .social-post {
  box-shadow: none;
}

/* 2.5 Movimento: tira o "fade-in" de cada post. Fica reservado um único
   momento animado para quando o creator sobe de nível (.lx-levelup). */
.social-post-enter { animation: none !important; }

@keyframes lx-forge {
  0%   { transform: scale(.86); filter: brightness(.6) saturate(.4); }
  55%  { transform: scale(1.06); filter: brightness(1.35) saturate(1.1); }
  100% { transform: scale(1); filter: none; }
}
.lx-levelup .lx-crest { animation: lx-forge .9s cubic-bezier(.2,.8,.2,1) both; }
@media (prefers-reduced-motion: reduce) {
  .lx-levelup .lx-crest { animation: none; }
}