/* ============================================================
   AprovAKI — Hotfix UI/UX v8 (2026-07-19)
   Este arquivo é ADITIVO. Não edita style_user.css nem v6.
   Ordem de intenção (cada bloco tem sua seção):
     1) @username discreto sob o nome no ranking
     2) Chip AKIcoins menor no pódio e Top 50
     3) Ícone de denúncia menor e reposicionado no Top 50
     4) Ocultar tag "Você" ao lado do nome (era duplicidade)
     5) Cor da marca (#4B3CB8) no dropdown do userchip
   ============================================================ */

/* ============================================================
   SEÇÃO 1 — @username sob o nome (pódio + Top 50)
   Menor que o nome, cor apagada, clica e vai ao perfil.
   ============================================================ */
.podium-handle-user {
    display: block;
    margin: 2px 0 4px;
    font-size: 0.7rem;
    font-weight: 500;
    color: #8a90a2;
    line-height: 1.15;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
    padding: 0 8px;
}
.podium-handle-user:hover,
.podium-handle-user:focus-visible {
    color: #4B3CB8;
    text-decoration: none;
    outline: none;
}
.podium-1 .podium-handle-user { font-size: 0.72rem; }

.ranking-person .ranking-handle {
    display: block;
    margin: 1px 0 2px;
    font-size: 0.7rem;
    font-weight: 500;
    color: #8a90a2;
    line-height: 1.15;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
}
.ranking-person .ranking-handle:hover,
.ranking-person .ranking-handle:focus-visible {
    color: #4B3CB8;
    text-decoration: none;
    outline: none;
}

@media (max-width: 640px) {
    .podium-handle-user,
    .ranking-person .ranking-handle {
        font-size: 0.66rem;
    }
}
/* ============================================================
   SEÇÃO 2 — chip AKIcoins menor no pódio e Top 50
   Objetivo: retângulo lilás arredondado discreto, sem brigar
   por espaço com o nome. Sobrescreve v6/aki_ui_extra.
   ============================================================ */
.aki-coin-chip.aki-coin-chip--podium {
    font-size: 0.68rem !important;
    padding: 2px 8px !important;
    gap: 4px !important;
    border-radius: 999px !important;
    margin: 2px auto 0 !important;
    cursor: help;
}
.podium-1 .aki-coin-chip.aki-coin-chip--podium {
    font-size: 0.72rem !important;
    padding: 3px 9px !important;
}

.aki-coin-chip.aki-coin-chip--inline {
    font-size: 0.66rem !important;
    padding: 2px 7px !important;
    gap: 4px !important;
    border-radius: 999px !important;
    cursor: help;
}

/* O ícone da moeda usa 1em (herdado de aki_ui_extra), então
   como a fonte encolheu o ícone acompanha. Ainda assim
   travamos um mínimo pra não ficar "sumido". */
.aki-coin-chip.aki-coin-chip--podium .aki-coin-chip__coin,
.aki-coin-chip.aki-coin-chip--inline .aki-coin-chip__coin {
    width: 0.95em !important;
    height: 0.95em !important;
    flex: 0 0 0.95em !important;
}

.aki-coin-chip.aki-coin-chip--podium strong,
.aki-coin-chip.aki-coin-chip--inline strong {
    font-weight: 800 !important;
    letter-spacing: -0.01em;
}
.aki-coin-chip.aki-coin-chip--podium .aki-coin-chip__lbl,
.aki-coin-chip.aki-coin-chip--inline .aki-coin-chip__lbl {
    font-weight: 600 !important;
    opacity: 0.85;
}

/* Foco visível para acessibilidade (o chip agora abre balão
   ao clicar/tocar/tab). */
.aki-coin-chip[role="button"]:focus-visible {
    outline: 2px solid #4B3CB8;
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .aki-coin-chip.aki-coin-chip--inline {
        font-size: 0.64rem !important;
        padding: 2px 6px !important;
    }
}
/* ============================================================
   SEÇÃO 3 — ícone de denúncia (bandeira) no Top 50
   Menor ainda que o v7 e ancorado no canto superior direito
   do card, em paridade com o pódio. Não briga com o chip
   "5 min." nem com a área do avatar.
   ============================================================ */
.ranking-row .aki-denunciar-btn {
    top: 6px !important;
    right: 6px !important;
    transform: none !important;
    width: 18px !important;
    height: 18px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    color: #b1abc7 !important;
    box-shadow: none !important;
    opacity: 0.55;
    z-index: 3;
    transition: opacity .15s ease, color .15s ease,
                background .15s ease, border-color .15s ease,
                transform .15s ease;
}
.ranking-row .aki-denunciar-btn i {
    font-size: 10px !important;
    line-height: 1 !important;
}
.ranking-row:hover .aki-denunciar-btn {
    opacity: 0.9;
}
.ranking-row .aki-denunciar-btn:hover,
.ranking-row .aki-denunciar-btn:focus-visible {
    background: #fdecec !important;
    border-color: #f5c1c1 !important;
    color: #b42323 !important;
    opacity: 1 !important;
    transform: scale(1.08) !important;
    outline: none !important;
}

@media (max-width: 640px) {
    .ranking-row {
        padding-right: 28px !important;
    }
    .ranking-row .aki-denunciar-btn {
        width: 16px !important;
        height: 16px !important;
        top: 5px !important;
        right: 5px !important;
    }
    .ranking-row .aki-denunciar-btn i {
        font-size: 9px !important;
    }
}
/* ============================================================
   SEÇÃO 4 — tag "Você" duplicada
   O card do pódio já tem a marca "VOCÊ" no canto superior
   direito (podium-me::after) e o card do Top 50 já tem halo
   roxo em .ranking-row-me. Portanto a tag inline ao lado do
   nome é redundância. O ranking.php v8 já não renderiza
   .ranking-me-tag; este bloco é uma trava para caches antigos.
   ============================================================ */
.podium-card .ranking-me-tag,
.ranking-row .ranking-me-tag {
    display: none !important;
}
/* ============================================================
   SEÇÃO 5 — dropdown do userchip com cor da marca
   Antes: nome do aluno, itens do menu (Meu perfil, Desempenho,
   Ranking, Editar perfil) usavam #2D2464 — quase preto
   acinzentado, destoando da paleta lilás do resto do site.
   Agora: seguem a cor da marca #4B3CB8, com peso mantido.
   ============================================================ */
.aki-userchip__head-nome {
    color: #4B3CB8 !important;
}
.aki-userchip__menu a {
    color: #4B3CB8 !important;
    font-weight: 700 !important;
}
.aki-userchip__menu a:hover,
.aki-userchip__menu a:focus-visible {
    color: #3A2E9C !important;
    background: rgba(75, 60, 184, 0.10) !important;
}
.aki-userchip__menu a i {
    color: #4B3CB8 !important;
}
.aki-userchip__menu a:hover i,
.aki-userchip__menu a:focus-visible i {
    color: #3A2E9C !important;
}

/* "Sair" mantém aviso vermelho já herdado do CSS antigo;
   só damos peso 700 pra casar com os outros. */
.aki-userchip__menu a.aki-userchip__exit {
    font-weight: 700 !important;
}

/* Contador de pontos "55 pts" abaixo do nome também usa
   a cor da marca em vez do quase-preto. */
.aki-userchip [data-aki-pontos-head],
.aki-userchip .aki-userchip__head-coins strong {
    color: #4B3CB8 !important;
}
.aki-userchip .aki-userchip__head-coins span:last-child {
    color: #6b6690 !important;
}