/* Estilos para Medalhas de Frequência */

.medalha-frequencia {
    width: 24px;
    height: 24px;
    margin-right: 5px;
    vertical-align: middle;
    display: inline-block;
    transition: transform 0.2s ease;
}

.medalha-frequencia:hover {
    transform: scale(1.2);
    cursor: help;
}

/* Variações de tamanho para diferentes contextos */
.medalha-frequencia.medalha-sm {
    width: 18px;
    height: 18px;
    margin-right: 3px;
}

.medalha-frequencia.medalha-md {
    width: 24px;
    height: 24px;
    margin-right: 5px;
}

.medalha-frequencia.medalha-lg {
    width: 32px;
    height: 32px;
    margin-right: 8px;
}

.medalha-frequencia.medalha-xl {
    width: 40px;
    height: 40px;
    margin-right: 10px;
}

/* Animação de brilho para medalhas */
@keyframes medalha-brilho {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.2);
    }
}

.medalha-ouro {
    animation: medalha-brilho 2s ease-in-out infinite;
}

/* Estilos responsivos */
@media (max-width: 768px) {
    .medalha-frequencia {
        width: 20px;
        height: 20px;
        margin-right: 4px;
    }
    
    .medalha-frequencia.medalha-lg {
        width: 28px;
        height: 28px;
        margin-right: 6px;
    }
}

@media (max-width: 480px) {
    .medalha-frequencia {
        width: 18px;
        height: 18px;
        margin-right: 3px;
    }
    
    .medalha-frequencia.medalha-lg {
        width: 24px;
        height: 24px;
        margin-right: 5px;
    }
}