/* ===================================================================== AprovAKI — aki_avatar_perfil_v2.css · v2 · 01/08/2026 --------------------------------------------------------------------- Corrige o "efeito círculo duplo" no avatar do cabeçalho de user.php. CAUSA O aki_avatar_ring_flat.css (v5) aplica em .avatar-anel--perfil uma técnica de border-image simulada: borda transparente de 3px + dois background-images (linear-gradient cinza no padding-box e conic da patente no border-box). Isso pinta um anel próprio na borda e um fundo cinza claro no interior. Combinado com o track beige que o aki_patente_v16.css já aplica no mesmo wrapper via background-color, ficam visíveis DUAS silhuetas circulares atrás da foto (o anel v5 por fora + a área beige/cinza que sobra ao redor da foto). ALVO Voltar ao visual do print de referência (imagem 2, "Bronze / Aprendiz"): apenas UMA trilha (cor da patente / track) + arco de progresso proporcional desenhado pelo SVG progress-ring por cima. ESCOPO Estritamente `.perfil-card .avatar-cluster:not(.is-alexandrita) .avatar-anel--perfil`. Não toca em: - Avatares dos posts do feed (.avatar-anel--post) - Pódio e Top 50 do /ranking (.podium-avatar / .ranking-avatar) - Dropdown do header (.aki-userchip) ================================================================== */ /* 1) Desfaz a técnica border-image do v5 (border+dupla camada) neste wrapper. Volta ao padding original (3px) e ao fundo simples. FIX 2026-08-01: fundo trocado para CINZA CLARO (#f1f5f9) — antes usava var(--patente-track) que era CREME para Bronze, dando a impressão de anel laranja "cheio". Agora o interior fica cinza padrão em todas as patentes, e o arco proporcional da barra de progresso (SVG bloco 2/3 abaixo) continua sendo desenhado por cima na cor da patente. IMPORTANTE: Alexandrita é EXCLUÍDA — ela tem gradient conic iridescente próprio como background-image do wrapper (definido em aki_avatar_ring_flat.css linhas 167+). Sobrescrever com background-color sólido apagaria o efeito. */ html body .perfil-card .avatar-cluster:not(.is-alexandrita) .avatar-anel--perfil, html body .perfil-card .avatar-wrapper.avatar-anel--perfil:not(.is-alexandrita) { border: 0 !important; padding: 3px !important; background-image: none !important; background-color: #f1f5f9 !important; box-sizing: border-box !important; } /* 2) Reexibe a SVG do progress-ring (v5 escondia com display:none). É ela que desenha o arco proporcional na cor da patente. */ html body .perfil-card .avatar-cluster:not(.is-alexandrita) .avatar-anel--perfil .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: o background-color do wrapper já é a trilha. */ html body .perfil-card .avatar-cluster:not(.is-alexandrita) .avatar-anel--perfil .progress-ring__circle { fill: transparent !important; stroke: transparent !important; stroke-width: 0 !important; } /* Barra SVG: cor da patente, espessura equivalente ao ranking. */ html body .perfil-card .avatar-cluster:not(.is-alexandrita) .avatar-anel--perfil .progress-ring__bar { fill: transparent !important; stroke: var(--patente-color, #c98a3c) !important; stroke-width: 5 !important; stroke-linecap: round !important; transition: stroke-dashoffset .5s ease !important; } /* 3) Foto centralizada dentro do padding (deixa 3px da trilha visíveis). Anula o "top:0/left:0/width:100%/height:100%" que o v5 aplicava para encostar a foto no border-image. */ html body .perfil-card .avatar-cluster:not(.is-alexandrita) .avatar-anel--perfil > picture, html body .perfil-card .avatar-cluster:not(.is-alexandrita) .avatar-anel--perfil > img.avatar-perfil, html body .perfil-card .avatar-cluster:not(.is-alexandrita) .avatar-anel--perfil > picture > img.avatar-perfil { position: absolute !important; top: 3px !important; left: 3px !important; width: calc(100% - 6px) !important; height: calc(100% - 6px) !important; border-radius: 50% !important; object-fit: cover !important; box-sizing: border-box !important; background: transparent !important; box-shadow: none !important; z-index: 2 !important; } /* Foto sem "borda branca" interna que criava o segundo círculo aparente. */ html body .perfil-card .avatar-cluster:not(.is-alexandrita) .avatar-anel--perfil > picture > img.avatar-perfil, html body .perfil-card .avatar-cluster:not(.is-alexandrita) .avatar-anel--perfil > img.avatar-perfil { border: 0 !important; } /* 4) Troféu (nivel-badge) fica no canto inferior-direito, acima da foto. */ html body .perfil-card .avatar-cluster:not(.is-alexandrita) .avatar-anel--perfil .nivel-badge { position: absolute !important; right: -4px !important; bottom: 1px !important; top: auto !important; left: auto !important; z-index: 3 !important; filter: none !important; box-shadow: none !important; } /* 5) FIX 2026-08-01 · noite: proporção da foto no userchip do header. Antes: inset 4px (big) / 3px (mini) → foto grande demais, a cabeça do avatar encostava no topo do anel. Agora: inset 7px (big) / 4px (mini) → gap uniforme e foto centrada. IMPORTANTE — exclusão da Alexandrita: A patente Alexandrita usa técnica própria em aki_patente_anel_v17.css (SVG oculto + conic-gradient no background do wrapper + padding). Nessa técnica a foto tem `width:100%; height:100%` e não pode receber top/left/right/bottom. Usamos `:not([data-patente="alexandrita"])` para preservar o layout iridescente original. */ html body .aki-userchip:not([data-patente="alexandrita"]) .aki-userchip__head-av-img { top: 7px !important; left: 7px !important; right: 7px !important; bottom: 7px !important; background: #f1f5f9 !important; } html body .aki-userchip:not([data-patente="alexandrita"]) .aki-userchip__avatar-img { top: 4px !important; left: 4px !important; right: 4px !important; bottom: 4px !important; background: #f1f5f9 !important; }