/* =====================================================================
   AprovAKI — aki_patente_anel_v17.css  (2026-08-01 · v17.3 FINAL)
   ---------------------------------------------------------------------
   ESCOPO ESTRITO
   Este CSS só toca no PÓDIO e no TOP 50 da página /ranking.
   NÃO altera:
     - Anel do perfil grande (avatar_cluster / avatar-anel--perfil).
     - Anel da Linha do Tempo (avatar-anel--post).
     - Anel do dropdown do header (aki-userchip).
   Esses três lugares continuam sob o comando de aki_avatar_ring_flat.css
   (v5) e aki_patente_v16.css (v16.6). Sem regressão nesses lugares.

   POR QUE ESTE ARQUIVO EXISTE
   O aki_avatar_ring_flat.css v5 (2026-08-01) resolveu o halo do avatar
   do perfil, mas para tanto escondeu (`display: none`) as SVGs
   `.podium-avatar .ranking-avatar-ring` e `.ranking-avatar .ranking-avatar-ring`
   do ranking. Essas SVGs eram (e continuam sendo) a fonte oficial da
   barra de progresso proporcional do pódio/Top 50, controladas por
   `stroke-dashoffset` no PHP (ranking.php:497-500 e :594-596). Sem elas,
   o ranking passou a exibir todos os anéis cheios ou nenhum anel.

   ESTRATÉGIA
   Reverter no pódio e Top 50:
     1) Anular o `border` transparente + `background-image` composto do v5.
     2) Devolver o fundo neutro pela cor de trilha do v16.6 (--patente-track).
     3) Reexibir a SVG do anel de progresso.
     4) Deixar a SVG.__bar tomar a cor da patente (via --patente-color).
     5) Manter a "fatia de progresso" no valor proporcional que o PHP já
        calcula por aluno em stroke-dashoffset.
   O anel iridescente da Alexandrita continua funcionando porque o
   próprio PHP emite `stroke: currentColor` e o v16.6 aplica o filter
   drop-shadow multicromático — não precisamos duplicar aqui.

   CARREGAMENTO
   Este arquivo DEVE ser carregado DEPOIS de aki_avatar_ring_flat.css
   E DEPOIS de aki_patente_v16.css. O header.php entregue neste zip
   já garante essa ordem.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1) DESFAZ NO PÓDIO E TOP 50 as regras do v5 que trocaram a técnica.
   Escopo intencionalmente restrito a `.podium-avatar` e `.ranking-avatar`.
   NÃO toca em `.avatar-cluster` nem `.avatar-anel--perfil` (perfil).
   NÃO toca em `.avatar-anel--post` (Linha do Tempo).

   FIX (v17.4 · 2026-08-01):
   Excluímos `.ranking-patente-alexandrita` deste bloco. Para Alexandrita,
   o anel iridescente do perfil (aki_avatar_ring_flat.css v5, bloco D)
   deve permanecer ativo também no pódio/Top 50, para bater 1:1 com a
   tela do perfil (sem sombra, com conic-gradient multicromático).
   --------------------------------------------------------------------- */
html body .podium-avatar:not(.ranking-patente-alexandrita),
html body .ranking-avatar:not(.ranking-patente-alexandrita) {
    /* zera o truque border+dupla camada que o v5 aplica */
    border: 0 !important;
    background-image: none !important;
    background-clip: border-box !important;
    background-origin: padding-box !important;
    padding: 3px !important;

    /* volta ao fundo neutro proposto pelo v16.6:
       cada .ranking-patente-<codigo> define --patente-track. */
    background-color: var(--patente-track, #e5e7eb) !important;

    /* garante forma redonda e sem halo/sombra */
    border-radius: 50% !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    position: relative !important;
}


/* ---------------------------------------------------------------------
   2) REEXIBE a SVG do anel de progresso no pódio e Top 50.
   O v5 tinha feito `display: none !important` nessa SVG. Aqui derrubamos.

   FIX (v17.4 · 2026-08-01):
   Para `.ranking-patente-alexandrita` mantemos a SVG ESCONDIDA — o anel
   iridescente do perfil (aki_avatar_ring_flat.css v5, bloco D + B) já
   desenha o efeito multicolor via border-image no wrapper, e essa é a
   forma correta (imagem do perfil). Reexibir a SVG voltaria a criar o
   arco roxo sólido + drop-shadow, que é exatamente a "sombra" que o
   usuário quer remover.
   --------------------------------------------------------------------- */
html body .podium-avatar:not(.ranking-patente-alexandrita)  .ranking-avatar-ring,
html body .ranking-avatar:not(.ranking-patente-alexandrita) .ranking-avatar-ring {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: rotate(-90deg) !important;
    pointer-events: none !important;
    z-index: 1 !important;
    overflow: visible !important;
}

/* Trilha SVG transparente: o fundo do wrapper (bloco 1) já é a trilha. */
html body .podium-avatar  .ranking-avatar-ring .ranking-avatar-ring__track,
html body .ranking-avatar .ranking-avatar-ring .ranking-avatar-ring__track {
    fill: transparent !important;
    stroke: transparent !important;
    stroke-width: 0 !important;
}

/* Barra do anel — usa a cor sólida da patente do wrapper. O
   `stroke-dasharray` e `stroke-dashoffset` ficam sob controle do PHP
   (ranking.php:499-500 e :595-596). */
html body .podium-avatar  .ranking-avatar-ring .ranking-avatar-ring__bar,
html body .ranking-avatar .ranking-avatar-ring .ranking-avatar-ring__bar {
    fill: transparent !important;
    stroke: var(--patente-color, #94a3b8) !important;
    stroke-width: 5 !important;
    stroke-linecap: round !important;
    transition: stroke-dashoffset .5s ease !important;
}


/* ---------------------------------------------------------------------
   3) CORES SÓLIDAS por patente (--patente-color).
   O v16.6 já define isso via variáveis --pt-<codigo>-solid, mas
   podemos existir sem depender da ordem de cascata do v16 —
   restaurando explicitamente aqui.
   --------------------------------------------------------------------- */
html body .podium-avatar.ranking-patente-bronze,
html body .ranking-avatar.ranking-patente-bronze {
    --patente-color: #c98a3c;
    --patente-track: #f5e6d0;
}
html body .podium-avatar.ranking-patente-prata,
html body .ranking-avatar.ranking-patente-prata {
    --patente-color: #7b8aa1;
    --patente-track: #e5ebf3;
}
html body .podium-avatar.ranking-patente-ouro,
html body .ranking-avatar.ranking-patente-ouro {
    --patente-color: #e5b400;
    --patente-track: #fdf1c0;
}
html body .podium-avatar.ranking-patente-esmeralda,
html body .ranking-avatar.ranking-patente-esmeralda {
    --patente-color: #059669;
    --patente-track: #d1fae5;
}
html body .podium-avatar.ranking-patente-rubi,
html body .ranking-avatar.ranking-patente-rubi {
    --patente-color: #dc2626;
    --patente-track: #fee2e2;
}
html body .podium-avatar.ranking-patente-diamante,
html body .ranking-avatar.ranking-patente-diamante {
    --patente-color: #0ea5e9;
    --patente-track: #e0f2fe;
}
html body .podium-avatar.ranking-patente-alexandrita,
html body .ranking-avatar.ranking-patente-alexandrita {
    --patente-color: #7c3aed;
    --patente-track: #ede9fe;
}

/* ---------------------------------------------------------------------
   ALEXANDRITA (v17.7 · 2026-08-01) — anel iridescente ESTÁTICO.
   FIX: removida a animação `filter: hue-rotate` (v17.5/v17.6) porque
   `filter` no elemento pai cascateia para os filhos e discolorava a
   foto do usuário (efeito verde/hue-shift visto na imagem 1). Agora o
   anel é um conic-gradient estático, sem filter no wrapper.
   --------------------------------------------------------------------- */
html body .podium-avatar.ranking-patente-alexandrita,
html body .ranking-avatar.ranking-patente-alexandrita {
    border: 0 !important;
    padding: 3px !important;
    background-color: transparent !important;
    background-image: conic-gradient(from 210deg,
        #22c55e 0deg,
        #06b6d4 72deg,
        #3b82f6 144deg,
        #7c3aed 216deg,
        #ec4899 288deg,
        #22c55e 360deg) !important;
    background-clip: border-box !important;
    background-origin: padding-box !important;
    box-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    animation: none !important;
}

/* SVG interna some — o anel iridescente já é o background do wrapper. */
html body .podium-avatar.ranking-patente-alexandrita  .ranking-avatar-ring,
html body .ranking-avatar.ranking-patente-alexandrita .ranking-avatar-ring {
    display: none !important;
}
html body .podium-avatar.ranking-patente-alexandrita  .ranking-avatar-ring__bar,
html body .ranking-avatar.ranking-patente-alexandrita .ranking-avatar-ring__bar {
    stroke: transparent !important;
    filter: none !important;
    -webkit-filter: none !important;
}


/* ---------------------------------------------------------------------
   4) FOTO por cima do anel.
   O PHP emite `<img class="podium-avatar-photo">` e
   `<img class="ranking-avatar-photo">`. Preservamos a mesma técnica
   do style_user.css (foto com borda branca fina para separar do anel).
   --------------------------------------------------------------------- */
html body .podium-avatar > .podium-avatar-photo {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
    border: 3px solid #fff !important;
    box-sizing: border-box !important;
    background: #f1f5f9 !important;
    box-shadow: none !important;
}

html body .ranking-avatar > .ranking-avatar-photo {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
    border: 2px solid #fff !important;
    box-sizing: border-box !important;
    background: #f1f5f9 !important;
    box-shadow: none !important;
}


/* ---------------------------------------------------------------------
   5) TROFÉU LATERAL — z-index acima do anel e da foto (mantém posição
   do style_user.css). Sem sombra, seguindo v16.4.
   --------------------------------------------------------------------- */
html body .podium-avatar .podium-avatar-badge,
html body .ranking-avatar .ranking-avatar-badge {
    z-index: 3 !important;
    filter: none !important;
    -webkit-filter: none !important;
    box-shadow: none !important;
}


/* ---------------------------------------------------------------------
   6) NADA MAIS. Perfil, Linha do Tempo e dropdown ficam intocados.
   --------------------------------------------------------------------- */


/* =====================================================================
   v17.6 · 2026-08-01 · UNIFICAÇÃO DO ANEL DE PATENTE
   ---------------------------------------------------------------------
   Objetivo: em TODOS os lugares onde aparece uma foto de perfil com anel
   ao redor, o anel deve refletir a patente atual do usuário — e para
   Alexandrita (Lendário) deve ser IDÊNTICO ao do perfil grande
   (conic-gradient iridescente verde→ciano→azul→lilás→magenta).

   Alvos deste bloco:
     A) Header userchip mini (32px, barrinha do topo — imagem 3).
     B) Header userchip big (60px, dentro do dropdown aberto — imagem 1).
     C) Post do feed / caderno / questões (avatar-anel--post — imagem 2).

   Também ajusta a espessura do anel do userchip mini para proporção
   correta (a queixa "anel muito grosso"): stroke-width cai de 3 para
   2 em 32×32, e a foto ganha borda branca fina de 1.5px para separar
   do anel — mesmo padrão visto no perfil.
   ===================================================================== */


/* ---------------------------------------------------------------------
   A) HEADER USERCHIP — MINI (32×32) e BIG (60×60)
   Espessura do anel proporcional, cor SÓLIDA da patente para B/P/O/E/R/D
   e conic-gradient iridescente para Alexandrita.
   --------------------------------------------------------------------- */

/* Espessura fina no mini (correção de proporção) */
html body .aki-userchip .aki-userchip__ring .aki-userchip__ring-track,
html body .aki-userchip .aki-userchip__ring .aki-userchip__ring-bar {
    stroke-width: 2 !important;
}
html body .aki-userchip .aki-userchip__ring--big .aki-userchip__ring-track,
html body .aki-userchip .aki-userchip__ring--big .aki-userchip__ring-bar {
    stroke-width: 3 !important;
}

/* -----------------------------------------------------------------
   Alexandrita no userchip (mini + big) — v17.9 · 01/08/2026 noite
   -----------------------------------------------------------------
   REFATOR (D18): este bloco agora declara APENAS o que é exclusivo
   da Alexandrita — o conic-gradient iridescente no wrapper e o
   ocultamento do SVG de progresso (Alexandrita é patente máxima,
   não há "faixa a completar", então o anel é sempre cheio).

   Tamanho, posição e borda da foto interna (.aki-userchip__avatar-img
   e .aki-userchip__head-av-img) NÃO são declarados aqui. Ficam sob
   responsabilidade exclusiva do bloco v17.8 (mais abaixo neste mesmo
   arquivo), que já centraliza a foto com top/left/right/bottom + width
   auto para TODAS as patentes.

   Motivo do refator: o bloco anterior (v17.6/v17.7) declarava também
   width:100%; height:100% na foto. Como esse seletor tem
   [data-patente="alexandrita"] (especificidade 0,0,3,2), vencia o
   width:auto do v17.8 (especificidade 0,0,2,2) MAS não vencia o
   top:4px/left:4px do v17.8 (position:absolute vencia por ser mais
   específica). Resultado: em Alexandrita a foto ficava com width 60px
   ancorada em top:4/left:4, extrapolando o wrapper. Sintoma visual:
   foto deslocada, cobrindo o troféu lateral e escondendo parte do
   anel iridescente. Bug só aparecia em Alexandrita porque só ela
   ativa o seletor [data-patente="alexandrita"]. B/P/O/E/R/D nunca
   quebraram e continuam intactas. */
/* v17.9 (2026-08-01): a Alexandrita não pinta mais o fundo inteiro do
   wrapper — isso deixava o "anel" com a espessura do padding do wrapper
   (3px no mini / 4px no big), maior que o stroke SVG (2px / 3px) das
   demais patentes. Agora o anel iridescente é desenhado por um ::before
   com máscara, cuja padding = stroke-width do SVG das outras patentes.
   Assim a espessura visual fica idêntica em todas as patentes. */
html body .aki-userchip[data-patente="alexandrita"] .aki-userchip__avatar,
html body .aki-userchip[data-patente="alexandrita"] .aki-userchip__head-av {
    background-image: none !important;
    background-color: transparent !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    filter: none !important;
    -webkit-filter: none !important;
    animation: none !important;
    position: relative !important;
    overflow: visible !important;
}
/* ---------------------------------------------------------------------
   v17.18 (09/08/2026) — O ANEL SAI DO ::before E GANHA ELEMENTO PROPRIO
   ---------------------------------------------------------------------
   BUG RELATADO: na patente Alexandrita, o anel do avatar da barra do
   topo aparecia deslocado para a esquerda, virando uma "mancha colorida
   com um buraco no meio", com a foto vazando para fora. Nas outras
   patentes (Bronze etc.) estava correto.

   CAUSA: o anel era desenhado no ::before de .aki-userchip__avatar.
   Mas esse mesmo elemento tem data-aki-tooltip ("Alexandrita • Patente"),
   e a SETA do tooltip tambem e desenhada no ::before dele
   (aki_ui_extra.css linha 41 + aki_tooltip_pos_fix.css linha 29).

   Um unico ::before, dois donos. Medido no navegador:

     propriedade    quem ganhava        efeito
     background     o anel              o anel existia
     inset/padding  o anel              espessura certa
     opacity        A SETA (= 0)        anel INVISIVEL parado
     transform      A SETA (-14px)      anel EMPURRADO p/ esquerda
     border         A SETA (5px)        caixa inflada, anel deformado

   O anel tinha !important no que declarava, mas NUNCA declarou opacity,
   transform nem border — entao nessas tres a seta do tooltip vencia.
   Ao passar o mouse, a seta mudava opacity/transform e arrastava o anel
   junto. Era exatamente o print enviado.

   Por que so a Alexandrita quebrava: so ela desenha anel via ::before.
   As outras patentes usam o <svg> de progresso, que e um elemento de
   verdade e nao disputa nada com o tooltip.

   CONSERTO: o anel passa a morar em .aki-userchip__iris, um <span> real
   emitido pelo header.php. O ::before volta a ser exclusivamente a seta
   do tooltip, intacta em todas as patentes. Geometria preservada: os
   mesmos inset/padding calculados no v17.10 (mini 2px+2px, big
   1.5px+3px), agora aplicados ao elemento proprio.
   --------------------------------------------------------------------- */

/* O ::before do avatar volta a ser SO a seta do tooltip: limpamos aqui
   apenas o que desenhava o anel (fundo, mascara e o padding que dava a
   espessura). NAO mexemos em inset/top/left/transform/border: essas sao
   da seta, definidas em aki_ui_extra.css e reposicionadas em
   aki_tooltip_pos_fix.css. Zerar o inset aqui jogava a seta para o meio
   do avatar (medido: top 11px na Alexandrita contra 35px na Bronze). */
html body .aki-userchip[data-patente="alexandrita"] .aki-userchip__avatar::before,
html body .aki-userchip[data-patente="alexandrita"] .aki-userchip__head-av::before {
    background: none !important;
    -webkit-mask: none !important;
            mask: none !important;
    padding: 0 !important;
}

/* O anel iridescente, agora em elemento proprio. Fica escondido nas
   demais patentes (elas usam o SVG de progresso). */
html body .aki-userchip__iris {
    display: none;
}
html body .aki-userchip[data-patente="alexandrita"] .aki-userchip__iris {
    display: block !important;
    position: absolute !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    background: conic-gradient(from 210deg,
        #22c55e 0deg,
        #06b6d4 72deg,
        #3b82f6 144deg,
        #7c3aed 216deg,
        #ec4899 288deg,
        #22c55e 360deg) !important;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
            mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
            mask-composite: exclude !important;
    pointer-events: none !important;
    /* as tres que faltavam no ::before e causavam o bug: */
    opacity: 1 !important;
    transform: none !important;
    border: 0 !important;
    transition: none !important;
    animation: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    box-shadow: none !important;
    z-index: 3 !important;   /* acima da foto: substitui o SVG oculto */
}
/* v17.10 (2026-08-01): além da espessura, o anel precisa ocupar o MESMO
   raio do SVG das outras patentes. O SVG usa r=13 em viewBox 32 (mini)
   e r=27 em viewBox 60 (big), com o stroke centrado sobre esse raio.
   Ou seja:
     - Mini: outer edge do stroke em r=14 (2px de folga até a borda);
     - Big : outer edge do stroke em r=28.5 (1.5px de folga até a borda).
   Portanto o anel da Alexandrita deve ficar RECUADO da borda do
   wrapper pela mesma folga, senão o anel sai maior/mais para fora.

   v17.18 (09/08/2026): a mesma geometria, agora aplicada ao elemento
   proprio .aki-userchip__iris em vez do ::before (que voltou a ser a
   seta do tooltip). Os numeros nao mudaram. */

/* Mini (32×32): 2px de inset + 2px de padding = anel entre r=12 e r=14,
   igual ao stroke SVG das demais patentes. */
html body .aki-userchip[data-patente="alexandrita"] .aki-userchip__avatar .aki-userchip__iris {
    inset: 2px !important;
    padding: 2px !important;
}
/* Big (60×60): 1.5px de inset + 3px de padding = anel entre r=25.5 e
   r=28.5, igual ao stroke SVG das demais patentes. */
html body .aki-userchip[data-patente="alexandrita"] .aki-userchip__head-av .aki-userchip__iris {
    inset: 1.5px !important;
    padding: 3px !important;
}

/* v17.11 (2026-08-01): o troféu (.aki-userchip__head-medal) tinha
   z-index:2 e o ::before do anel iridescente tem z-index:3 — então o
   anel passava por cima do troféu na região sobreposta (canto inferior
   direito). As outras patentes usam SVG que fica atrás do troféu por
   default. Aqui subimos o troféu acima do anel só na Alexandrita, para
   restaurar o mesmo comportamento visual das demais. */
html body .aki-userchip[data-patente="alexandrita"] .aki-userchip__head-medal {
    z-index: 4 !important;
}

/* v17.12 (2026-08-01): FOTO INTERNA MENOR — proporção 0,80 do wrapper.
   O bloco B (linhas ~601-617) posiciona a foto com inset 4px, o que
   deixa a foto com 52px (~87% de 60px) — encostando no anel iridescente
   e transbordando visualmente. As demais patentes disfarçam isso porque
   o stroke SVG tem anti-alias suave; a Alexandrita, com o ring opaco
   via ::before mascarado, deixa evidente o "afogamento" da foto.
   Solução: só na Alexandrita, elevar o inset da foto para 6px (mini: 4px),
   restaurando o gap branco 1,5px entre foto e anel — mesmo padrão-alvo
   descrito no comentário do v17.8. */
/* v17.13 (2026-08-01): reduzir mais um pouco a foto, tanto no mini
   quanto no big. Alvo: proporção foto/wrapper ~0,73 (parece o padrão
   visual real das demais patentes quando comparadas lado a lado).
     - Mini 32×32: inset 5px → foto 22px (~0,69)
     - Big  60×60: inset 8px → foto 44px (~0,73) */
html body .aki-userchip[data-patente="alexandrita"] .aki-userchip__head-av-img {
    top: 8px !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
}
html body .aki-userchip[data-patente="alexandrita"] .aki-userchip__avatar-img {
    top: 5px !important;
    left: 5px !important;
    right: 5px !important;
    bottom: 5px !important;
}

/* SVG some — o anel iridescente já é o background do wrapper.
   O progresso proporcional (stroke-dashoffset) não se aplica à
   Alexandrita porque é patente máxima. */
html body .aki-userchip[data-patente="alexandrita"] .aki-userchip__ring,
html body .aki-userchip[data-patente="alexandrita"] .aki-userchip__ring--big {
    display: none !important;
}


/* ---------------------------------------------------------------------
   B) POST DO FEED / CADERNO — avatar-anel--post
   Substitui o conic-gradient monocromático baseado em --patente-progress
   por conic-gradient iridescente completo (anel cheio, sem barra
   parcial — o feed não expõe progresso).
   --------------------------------------------------------------------- */
html body .avatar-anel--post.is-alexandrita {
    padding: 2px !important;
    overflow: visible !important;
    position: relative !important;
    background: transparent !important;
}
html body .avatar-anel--post.is-alexandrita::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 50% !important;
    padding: 2px !important;
    background:
        conic-gradient(from 210deg,
            #22c55e 0deg,
            #06b6d4 72deg,
            #3b82f6 144deg,
            #7c3aed 216deg,
            #ec4899 288deg,
            #22c55e 360deg) !important;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
            mask-composite: exclude !important;
    pointer-events: none !important;
    z-index: 0 !important;
    /* FIX v17.7: sem animação hue-rotate (afetava a cor da foto). */
    animation: none !important;
}
html body .avatar-anel--post.is-alexandrita .post-avatar,
html body .avatar-anel--post.is-alexandrita img.post-avatar {
    position: relative !important;
    z-index: 1 !important;
    border: 1.5px solid #fff !important;
    box-sizing: border-box !important;
}
html body .avatar-anel--post.is-alexandrita .nivel-badge { z-index: 2 !important; }


/* ---------------------------------------------------------------------
   v17.7 — Alexandrita agora é estática em todos os lugares, então não
   precisa de bloco de reduced-motion específico.
   --------------------------------------------------------------------- */


/* =====================================================================
   v17.7 · BLOCO D — PROPORCIONALIDADE DO ANEL NO PERFIL GRANDE
   ---------------------------------------------------------------------
   Problema: aki_avatar_ring_flat.css v5 pintou o anel do perfil como
   uma border-image conic 100% (anel cheio) e escondeu (`display: none`)
   o SVG `.progress-ring` que era quem mostrava o arco proporcional
   controlado por --patente-progress (avatar_badge.php:373-378).

   Consequência (imagem 2): usuário Bronze com 6% aparece com anel
   totalmente laranja, como se tivesse batido a meta.

   Correção: para TODAS as patentes exceto Alexandrita, no perfil grande:
     1) volta a mostrar o SVG .progress-ring (arco proporcional real);
     2) o wrapper vira um fundo neutro (trilha suave da patente);
     3) some a border-image conic 100% do v5.
   Para Alexandrita mantemos o anel iridescente cheio (bloco D do v5),
   porque essa patente é a máxima (progresso sempre 100%) — não existe
   "faixa a completar".
   --------------------------------------------------------------------- */

/* Wrapper do perfil grande — remove a border-image 100% para todas as
   patentes NÃO-Alexandrita, e volta ao fundo neutro da trilha. */
html body .avatar-cluster:not(.is-alexandrita) .avatar-anel--perfil,
html body .avatar-wrapper.avatar-anel--perfil:not(.is-alexandrita) {
    border: 0 !important;
    padding: 0 !important;
    background-image: none !important;
    background-color: var(--patente-track, #e5e7eb) !important;
    background-clip: border-box !important;
    background-origin: padding-box !important;
    box-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    position: relative !important;
    border-radius: 50% !important;
}

/* Reexibe o SVG progress-ring do perfil (v5 tinha escondido). */
html body .avatar-cluster:not(.is-alexandrita) .avatar-anel--perfil .progress-ring,
html body .avatar-wrapper.avatar-anel--perfil:not(.is-alexandrita) .progress-ring {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: rotate(-90deg) !important;
    pointer-events: none !important;
    z-index: 1 !important;
    overflow: visible !important;
}

/* Trilha SVG transparente (a trilha vem do wrapper). */
html body .avatar-cluster:not(.is-alexandrita) .avatar-anel--perfil .progress-ring .progress-ring__circle,
html body .avatar-wrapper.avatar-anel--perfil:not(.is-alexandrita) .progress-ring .progress-ring__circle {
    fill: transparent !important;
    stroke: transparent !important;
    stroke-width: 0 !important;
}

/* Barra do progresso — cor sólida da patente, na espessura padrão. */
html body .avatar-cluster:not(.is-alexandrita) .avatar-anel--perfil .progress-ring .progress-ring__bar,
html body .avatar-wrapper.avatar-anel--perfil:not(.is-alexandrita) .progress-ring .progress-ring__bar {
    fill: transparent !important;
    stroke: var(--patente-color, #94a3b8) !important;
    stroke-width: 5 !important;
    stroke-linecap: round !important;
    transition: stroke-dashoffset .5s ease !important;
}

/* Foto do perfil — respeita o padding do wrapper (3px) que o
   style_user.css já define, restaurando o gap branco fino
   entre foto e anel. */
html body .avatar-cluster:not(.is-alexandrita) .avatar-anel--perfil > picture,
html body .avatar-cluster:not(.is-alexandrita) .avatar-anel--perfil > picture > img.avatar-perfil,
html body .avatar-cluster:not(.is-alexandrita) .avatar-anel--perfil > img.avatar-perfil {
    position: absolute !important;
    top: 3px !important;
    left: 3px !important;
    width: calc(100% - 6px) !important;
    height: calc(100% - 6px) !important;
    border: 3px solid #fff !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    background: #f1f5f9 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
}


/* ---------------------------------------------------------------------
   v17.7 · BLOCO E — MESMA CORREÇÃO NO USERCHIP MINI/BIG DO HEADER
   ---------------------------------------------------------------------
   O anel do userchip do header deve mostrar o progresso proporcional
   da patente atual (o PHP já emite stroke-dashoffset correto no SVG).
   Para NÃO-Alexandrita: nada a fazer (o SVG já funciona nativo).
   Somente garantimos que o wrapper NÃO tenha background pintado
   (senão volta o círculo laranja/lilás cheio).
   --------------------------------------------------------------------- */
html body .aki-userchip:not([data-patente="alexandrita"]) .aki-userchip__avatar,
html body .aki-userchip:not([data-patente="alexandrita"]) .aki-userchip__head-av {
    background-image: none !important;
    background-color: transparent !important;
    padding: 0 !important;
    animation: none !important;
    filter: none !important;
    -webkit-filter: none !important;
}


/* =====================================================================
   v17.8 · 2026-08-01 · UNIFICAÇÃO PROPORCIONAL DO ANEL + FOTO
   ---------------------------------------------------------------------
   PROBLEMA (imagem 2 do usuário)
   O userchip mini do header (32×32) exibia a foto em 24×24 (75% do
   wrapper) sem gap branco entre foto e anel — resultado: anel parece
   grosso demais e a foto parece "afogada" dentro do círculo. Isso
   diverge do dropdown grande (imagem 1: 60×60 com foto 48×48 = 80%,
   com gap branco de 1,5px), que o usuário classificou como correto.

   PADRÃO ADOTADO (do dropdown grande — 60×60, imagem 1)
     - ratio foto/wrapper .............. 0,80
     - stroke-width do anel ............ 5% do wrapper
     - gap branco entre foto e anel .... 2,5% do wrapper

   OBJETIVO
   Em TODAS as instâncias (header mini/big, perfil grande, pódio, Top50,
   post/feed), independentemente da patente (Bronze → Alexandrita), o
   anel deve ter a MESMA espessura RELATIVA e a foto deve preencher o
   interior na MESMA proporção (0,80) com o mesmo alinhamento central.
   O progresso do anel (stroke-dashoffset) continua sob controle do PHP.
   ===================================================================== */

/* ----- A) HEADER USERCHIP MINI (32×32) — foto preenche até a borda do anel ----- */
html body .aki-userchip .aki-userchip__avatar {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    border-radius: 50% !important;
    overflow: visible !important;
}
html body .aki-userchip .aki-userchip__avatar-img {
    position: absolute !important;
    top: 3px !important;
    left: 3px !important;
    right: 3px !important;
    bottom: 3px !important;
    width: auto !important;
    height: auto !important;
    z-index: 1 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    background: #f1f5f9 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
html body .aki-userchip .aki-userchip__avatar-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 50% !important;
}
/* SVG do anel ocupa 100% do wrapper; espessura fina (2px). */
html body .aki-userchip .aki-userchip__ring {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2 !important;
    pointer-events: none !important;
}
html body .aki-userchip .aki-userchip__ring .aki-userchip__ring-track,
html body .aki-userchip .aki-userchip__ring .aki-userchip__ring-bar {
    stroke-width: 2 !important;
    stroke-linecap: round !important;
}
/* v17.9: Alexandrita usa o MESMO inset da foto que as outras patentes
   (top/left/right/bottom = 3px, herdado do bloco A). O anel iridescente
   agora vem do ::before de espessura 2px, exatamente igual ao stroke SVG
   das demais patentes. Nenhuma borda branca extra — as outras patentes
   também não têm. */

/* ----- B) HEADER USERCHIP BIG (60×60) — foto preenche até a borda do anel ----- */
html body .aki-userchip .aki-userchip__head-av {
    width: 60px !important;
    height: 60px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    flex: 0 0 60px !important;
    overflow: visible !important;
}
html body .aki-userchip .aki-userchip__head-av-img {
    position: absolute !important;
    top: 4px !important;
    left: 4px !important;
    right: 4px !important;
    bottom: 4px !important;
    width: auto !important;
    height: auto !important;
    z-index: 1 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    background: #f1f5f9 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
html body .aki-userchip .aki-userchip__head-av-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 50% !important;
}
html body .aki-userchip .aki-userchip__ring--big {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2 !important;
    pointer-events: none !important;
}
html body .aki-userchip .aki-userchip__ring--big .aki-userchip__ring-track,
html body .aki-userchip .aki-userchip__ring--big .aki-userchip__ring-bar {
    stroke-width: 3 !important;
    stroke-linecap: round !important;
}
/* v17.9: idem para o big (60×60). Sem borda branca extra na foto —
   o gap branco vem do inset 4px do bloco B, igual às outras patentes. */

/* ----- C) PERFIL GRANDE (avatar-cluster / avatar-anel--perfil) -----
   Recriação EXATA do padrão do ranking (.ranking-avatar):
     - wrapper: padding 3px, fundo = trilha suave da patente
     - SVG por cima com stroke 5, cor da patente
     - foto 100%×100% com borda branca 2px */
html body .avatar-cluster .avatar-anel--perfil,
html body .avatar-wrapper.avatar-anel--perfil {
    width: 76px !important;
    height: 76px !important;
    box-sizing: border-box !important;
    position: relative !important;
    border-radius: 50% !important;
    padding: 3px !important;
    background-image: none !important;
    background-color: var(--patente-track, #e5e7eb) !important;
    border: 0 !important;
    overflow: visible !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
html body .avatar-cluster .avatar-anel--perfil > picture,
html body .avatar-cluster .avatar-anel--perfil > img.avatar-perfil,
html body .avatar-cluster .avatar-anel--perfil > picture > img.avatar-perfil,
html body .avatar-wrapper.avatar-anel--perfil > picture,
html body .avatar-wrapper.avatar-anel--perfil > img.avatar-perfil,
html body .avatar-wrapper.avatar-anel--perfil > picture > img.avatar-perfil {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center !important;
    box-sizing: border-box !important;
    background: #f1f5f9 !important;
    border: 2px solid #fff !important;
    z-index: 2 !important;
    display: block !important;
}
/* SVG progress-ring por cima da foto, na borda do wrapper — igual ranking. */
html body .avatar-cluster .avatar-anel--perfil .progress-ring,
html body .avatar-wrapper.avatar-anel--perfil .progress-ring {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: rotate(-90deg) !important;
    z-index: 1 !important;
    pointer-events: none !important;
    overflow: visible !important;
}
html body .avatar-cluster .avatar-anel--perfil .progress-ring__circle,
html body .avatar-wrapper.avatar-anel--perfil .progress-ring__circle {
    fill: transparent !important;
    stroke: transparent !important;
    stroke-width: 0 !important;
}
html body .avatar-cluster .avatar-anel--perfil .progress-ring__bar,
html body .avatar-wrapper.avatar-anel--perfil .progress-ring__bar {
    fill: transparent !important;
    stroke: var(--patente-color, #94a3b8) !important;
    stroke-width: 5 !important;
    stroke-linecap: round !important;
    transition: stroke-dashoffset .5s ease !important;
}

/* ----- D) POST DO FEED (avatar-anel--post 40×40) ----- */
html body .avatar-anel--post {
    width: 40px !important;
    height: 40px !important;
    padding: 2px !important;              /* 40 * 0,05 = 2 */
    box-sizing: border-box !important;
    position: relative !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
html body .avatar-anel--post > .post-avatar,
html body .avatar-anel--post > picture,
html body .avatar-anel--post > picture > img.post-avatar {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center !important;
    box-sizing: border-box !important;
    background: #f1f5f9 !important;
    border: 1px solid #fff !important;    /* gap branco fino, mesmo padrão */
    display: block !important;
}

/* ----- E) PÓDIO E TOP50 — alinhamento e proporção da foto -----
   O ranking já usa .podium-avatar e .ranking-avatar em tamanhos variados
   (definidos por style_user.css). Mantemos padding 3px (bloco 1 v17.3)
   e apenas garantimos que a foto se centralize e cubra todo o interior. */
html body .podium-avatar,
html body .ranking-avatar {
    box-sizing: border-box !important;
    padding: 3px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    border-radius: 50% !important;
}
html body .podium-avatar > .podium-avatar-photo,
html body .ranking-avatar > .ranking-avatar-photo {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center !important;
    box-sizing: border-box !important;
    display: block !important;
}
/* Espessura da barra do anel SVG do ranking padronizada (5% do wrapper).
   O PHP já entrega stroke-dashoffset correto para o progresso individual. */
html body .podium-avatar .ranking-avatar-ring .ranking-avatar-ring__bar,
html body .ranking-avatar .ranking-avatar-ring .ranking-avatar-ring__bar {
    stroke-width: 5 !important;
    stroke-linecap: round !important;
}


/* ---------------------------------------------------------------------
   v17.8 · NOTA FINAL
   O progresso do anel (fatia proporcional preenchida) permanece
   controlado pelo PHP via stroke-dasharray/stroke-dashoffset — este
   bloco NÃO altera o cálculo do progresso, apenas UNIFICA a espessura
   do traço e o alinhamento/proporção da foto dentro do círculo.
   --------------------------------------------------------------------- */