/* =====================================================================
   AprovAKI — Hotfix v15 (2026-07-29 · noite)
   ---------------------------------------------------------------------
   Este arquivo carrega DEPOIS de aki_uiux_v14.css.

   Blocos desta versão:

   1) Guarda extra contra a letra "A" dentro da moeda AKIcoin.
      A moeda oficial é 100% CSS (via .aki-akicoin-mark, v13). Este
      bloco garante que, em qualquer contexto, nenhum ::before/::after
      injete a letra "A" dentro de .aki-coin-chip__coin — inclusive
      resquícios de aki_uiux_v6.css, aki_uiux_v11.css e o fallback
      antigo de aki_ui_extra.css. Também esconde qualquer <img> filho.

   2) Chip de pontuação (pts) no pódio e no Top 50 do ranking, agora
      com proporção coerente: moeda menor, gap justo, tipografia
      alinhada ao "521 acertos" do card. Antes o chip do #1 ficava
      grande demais e o do Top 50 aparecia com lilás forte de mais.

   3) Alexandrita (Lendário) com gradiente iridescente inspirado na
      pedra: roxo → rosa → azul → verde. Aplicado em:
        - Nome da patente no perfil (avatar_badge.php: .patente-caption
          strong / span).
        - Chip "Alexandrita · Lendário" do header (v13 usa
          .aki-userchip__head-patente).
        - Anel externo da moeda (.aki-akicoin-mark) quando a patente
          é Alexandrita.
        - Trilhos do progresso de patente (--patente-color) reforçados
          via gradiente em backgrounds que aceitam.

   Todas as regras usam !important porque precisam ganhar de v13/v14 e
   de style_user.css (ambos já usam !important em várias métricas).
   ===================================================================== */


/* ------------------------------------------------------------
   1) GUARDA DEFINITIVA CONTRA "A" DENTRO DA MOEDA
   ------------------------------------------------------------ */

/* Nenhum ::before/::after dentro de .aki-coin-chip__coin pode
   pintar texto. .aki-akicoin-mark tem regras próprias para
   ::before/::after (borda interna + traço "1"), que continuam
   valendo em outros seletores.
   Aqui a moeda "pura" (.aki-coin-chip__coin sem .aki-akicoin-mark)
   fica sem qualquer letra, mesmo se .is-fallback for aplicada. */
.aki-coin-chip__coin::before,
.aki-coin-chip__coin::after,
.aki-coin-chip__coin.is-fallback::before,
.aki-coin-chip__coin.is-fallback::after,
.usuario-akicoins__coin::before,
.usuario-akicoins__coin::after,
.aki-userchip__coin--mini::before,
.aki-userchip__coin--mini::after {
    content: none !important;
}

/* Se um dia algum trecho antigo ainda tentar renderizar um <img>
   dentro do disco (ex.: assets/img/icones/AKIcoins.png), o disco
   dourado do v13 continua aparecendo sem ícone quebrado. */
.aki-coin-chip__coin > img,
.usuario-akicoins__coin > img,
.aki-userchip__coin--mini > img {
    display: none !important;
}

/* Exceção: quando a mesma tag também tem .aki-akicoin-mark, mantemos
   as pseudo-elementos porque desenham a "linha central" da moeda
   dourada oficial (v13). */
.aki-akicoin-mark::before {
    content: "" !important;
}
.aki-akicoin-mark::after {
    content: "" !important;
}


/* ------------------------------------------------------------
   2) CHIP DE PONTUAÇÃO NO RANKING — PROPORÇÃO CORRIGIDA
   ------------------------------------------------------------
   Origem do problema:
     - style_user.css encolhe .podium-name / .podium-if em telas
       pequenas, mas mantém .aki-coin-chip--podium na métrica de
       desktop, deixando o chip parecendo enorme dentro do card #1.
     - No Top 50 a variação --inline herda o mesmo lilás forte do
       chip do perfil, dando peso visual excessivo ao lado do
       nome do aluno.

   Regra: chip = complemento visual, nunca compete com "521 acertos".
*/

.aki-coin-chip.aki-coin-chip--podium,
.podium-handle.aki-coin-chip--podium {
    font-size: 0.66rem !important;
    padding: 2px 8px !important;
    gap: 4px !important;
    margin: 3px auto 0 !important;
    background: #F4F1FF !important;
    border: 1px solid #E4DEFB !important;
    box-shadow: 0 1px 2px rgba(75, 60, 184, 0.06) !important;
    line-height: 1.1 !important;
}

/* Ligeiro reforço só no pódio 1 (líder), sem virar bloco pesado. */
.podium-1 .aki-coin-chip.aki-coin-chip--podium {
    font-size: 0.7rem !important;
    padding: 2px 9px !important;
}

/* Top 50 — chip inline realmente mais leve, tom lilás mais suave. */
.aki-coin-chip.aki-coin-chip--inline {
    font-size: 0.68rem !important;
    padding: 2px 8px !important;
    gap: 4px !important;
    background: #F4F1FF !important;
    border: 1px solid #E4DEFB !important;
    line-height: 1.1 !important;
    color: #3d3475 !important;
}

/* Moeda dentro do chip do pódio/Top 50: um pouco menor, para não
   engolir o "148 pts". */
.aki-coin-chip.aki-coin-chip--podium .aki-coin-chip__coin,
.aki-coin-chip.aki-coin-chip--inline .aki-coin-chip__coin {
    width: 0.85em !important;
    height: 0.85em !important;
    flex: 0 0 0.85em !important;
}

/* "pts" um degrau mais discreto que o número. */
.aki-coin-chip.aki-coin-chip--podium .aki-coin-chip__lbl,
.aki-coin-chip.aki-coin-chip--inline .aki-coin-chip__lbl {
    font-size: 0.9em !important;
    color: #6b6394 !important;
    font-weight: 700 !important;
}

/* Nome do aluno no Top 50 respira mais em relação ao chip. */
.ranking-person > h2 {
    margin-bottom: 2px !important;
}
.ranking-person .ranking-handle {
    margin: 0 0 3px !important;
}
.ranking-sub {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 2px 0 0 !important;
}
.ranking-sub__if {
    font-size: 0.72rem !important;
    color: #6b7280 !important;
}

/* Mobile: encolhe mais um passo, sem deformar. */
@media (max-width: 480px) {
    .aki-coin-chip.aki-coin-chip--podium,
    .podium-1 .aki-coin-chip.aki-coin-chip--podium {
        font-size: 0.62rem !important;
        padding: 1px 7px !important;
    }
    .aki-coin-chip.aki-coin-chip--inline {
        font-size: 0.64rem !important;
        padding: 1px 7px !important;
    }
}


/* ------------------------------------------------------------
   3) ALEXANDRITA (LENDÁRIO) — GRADIENTE IRIDESCENTE
   ------------------------------------------------------------
   Referência visual: pedra alexandrita, com viragem cromática
   entre roxo/rosa (magenta) e azul/verde. Objetivo: passar
   sensação de raridade sem cair em glitter cafona.

   Truque de compatibilidade: usamos `background-image` com
   `background-clip: text` + `color: transparent` para o texto,
   e `background` (gradiente) para o fundo das áreas coloridas.
*/

:root {
    --aki-alex-gradient:
        linear-gradient(
            135deg,
            #7c3aed 0%,
            #b028d1 22%,
            #d63384 42%,
            #6f6df0 62%,
            #2ea6ff 80%,
            #14b8a6 100%
        );
    --aki-alex-shadow:
        0 0 0 1px rgba(124, 58, 237, 0.18),
        0 4px 14px -6px rgba(160, 40, 200, 0.45);
}

/* 3.1 · Nome + classe da patente no perfil (.patente-caption é o
        bloco "Alexandrita / Lendário" abaixo do avatar em user.php).
   O rótulo só recebe o gradiente quando o wrapper superior está
   marcado com a cor da patente Alexandrita. Como avatar_badge.php
   não injeta uma classe .patente-alexandrita, casamos pela cor
   via seletor de atributo (--patente-color: #7c3aed do próprio
   avatar_badge.php:90). */
[style*="--patente-color: #7c3aed"] .patente-caption strong,
[style*="--patente-color:#7c3aed"]  .patente-caption strong,
.patente-caption--alexandrita strong {
    background: var(--aki-alex-gradient) !important;
    -webkit-background-clip: text !important;
            background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    letter-spacing: 0.01em !important;
    filter: drop-shadow(0 1px 0 rgba(255,255,255,0.4)) !important;
}

[style*="--patente-color: #7c3aed"] .patente-caption span,
[style*="--patente-color:#7c3aed"]  .patente-caption span,
.patente-caption--alexandrita span {
    background: var(--aki-alex-gradient) !important;
    -webkit-background-clip: text !important;
            background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
}

/* 3.2 · Chip "Alexandrita · Classe" no header — .aki-patente-cor
        aparece no header.php:345 e ganha a --aki-p do v4. Quando
        essa var vira #7c3aed (Alexandrita), aplicamos o gradiente
        de fundo com texto branco alto contraste. */
.aki-userchip__head-patente.aki-patente-cor[style*="--aki-p: #7c3aed"],
.aki-userchip__head-patente.aki-patente-cor[style*="--aki-p:#7c3aed"] {
    background: var(--aki-alex-gradient) !important;
    background-size: 200% 200% !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: var(--aki-alex-shadow) !important;
    animation: aki-alex-shimmer 8s ease-in-out infinite !important;
}

/* 3.3 · Anel da moeda (.aki-akicoin-mark) quando o wrapper está
        marcado como patente alexandrita. A moeda base continua
        dourada (é AKIcoin, não muda de cor por patente), mas o
        anel externo ganha um halo Alexandrita quando o chip
        pertence a esse aluno. */
.ranking-patente-alexandrita .aki-akicoin-mark {
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.7),
        0 0 0 1.5px rgba(124, 58, 237, 0.35),
        0 0 6px rgba(224, 32, 190, 0.35) !important;
}

/* 3.4 · Chips de ranking com patente Alexandrita ganham borda
        levemente iridescente. Sem exagero. */
.aki-coin-chip.ranking-patente-alexandrita.aki-coin-chip--podium,
.aki-coin-chip.ranking-patente-alexandrita.aki-coin-chip--inline {
    border-color: transparent !important;
    background:
        linear-gradient(#F4F1FF, #F4F1FF) padding-box,
        var(--aki-alex-gradient) border-box !important;
    border: 1px solid transparent !important;
}

/* 3.5 · Anéis de progresso de patente (avatar-cluster e
        ranking-avatar) ganham stroke degradê quando Alexandrita.
        Aproveitamos que a variável --patente-color vale #7c3aed
        e definimos um SVG gradient via ::after… porém stroke
        SVG não aceita background-image. Solução prática: reforçar
        a cor com um filter drop-shadow iridescente. */
.ranking-avatar.ranking-patente-alexandrita .ranking-avatar-ring__bar,
[style*="--patente-color: #7c3aed"] .progress-ring__bar,
[style*="--patente-color:#7c3aed"]  .progress-ring__bar {
    filter:
        drop-shadow(0 0 3px rgba(124, 58, 237, 0.55))
        drop-shadow(0 0 4px rgba(224, 32, 190, 0.35)) !important;
}

/* 3.6 · Animação suave de troca de tom (12s). Discreta o bastante
        para não distrair a leitura. */
@keyframes aki-alex-shimmer {
    0%   { background-position:   0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position:   0% 50%; }
}

/* Respeita usuários que pediram menos animação. */
@media (prefers-reduced-motion: reduce) {
    .aki-userchip__head-patente.aki-patente-cor[style*="--aki-p: #7c3aed"],
    .aki-userchip__head-patente.aki-patente-cor[style*="--aki-p:#7c3aed"] {
        animation: none !important;
    }
}