/* =========================================
   BARRA DE EVOLUÇÃO
========================================= */

.barra-evolucao{

    display:flex;

    gap:10px;

    overflow-x:auto;

    margin:20px 0 15px;

    padding-bottom:6px;

    scrollbar-width:none;

}

.barra-evolucao::-webkit-scrollbar{

    display:none;

}


/* BOTÕES */

.aba-evolucao{

    flex:0 0 auto;

    background:#1e293b;

    color:#cbd5e1;

    border:1px solid #334155;

    border-radius:12px;

    padding:10px 18px;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

    white-space:nowrap;

}

.aba-evolucao:hover{

    background:#2563eb;

    border-color:#2563eb;

    color:#fff;

    transform:translateY(-2px);

}

.aba-evolucao.ativo{

    background:#2563eb;

    color:#fff;

    border-color:#2563eb;

}


/* =========================================
   PAINEL EXPANSÍVEL
========================================= */

.painel-expandido{

    background:#111827;

    border:1px solid #334155;

    border-radius:16px;

    margin-bottom:20px;

    padding:20px;

    animation:expandirPainel .25s ease;

}

@keyframes expandirPainel{

    from{

        opacity:0;

        transform:translateY(-10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* ABAS */

.painel-aba{

    display:none;

}

.painel-aba.ativo{

    display:block;

}


/* TÍTULOS */

.painel-aba h3{

    margin:0 0 18px;

    color:#fff;

    font-size:18px;

}

.oculto{

    display:none !important;

}

/* RESPONSIVO */

@media (max-width:768px){

    .barra-evolucao{

        padding-bottom:10px;

    }

}

/* =========================================
   CENTRO DE EVOLUÇÃO
========================================= */


.painel-expandido {

    width: 100%;

    margin-top: 20px;

    background:
        linear-gradient(
            145deg,
            #1e293b,
            #0f172a
        );

    border-radius: 18px;

    padding: 22px;

    box-shadow:
        0 10px 25px rgba(0,0,0,0.35);

    border:
        1px solid rgba(255,255,255,0.08);

    animation:
        aparecerPainel .25s ease;

}


.painel-expandido.oculto {

    display:none;

}



.painel-aba {

    width:100%;

}



.painel-aba h3 {

    margin:

        0 0 18px 0;

    color:#f8fafc;

    font-size:22px;

    font-weight:700;

}



/* =========================================
   RANKING
========================================= */


#melhores-desempenhos {


    display:flex;

    flex-direction:column;

    gap:12px;


}



.ranking-item {


    background:

        rgba(255,255,255,0.05);


    padding:14px 18px;


    border-radius:12px;


    display:flex;

    justify-content:space-between;


    align-items:center;


    border:

        1px solid rgba(255,255,255,0.08);


}



.ranking-item:hover {


    transform:translateY(-2px);

    background:

        rgba(255,255,255,0.08);

}



/* =========================================
   FOCO
========================================= */


#focos-evolucao {


    background:

        rgba(255,255,255,0.05);


    padding:18px;


    border-radius:14px;


    color:#e2e8f0;


}



/* =========================================
   EVOLUÇÃO
========================================= */


#dados-evolucao {


    display:grid;

    grid-template-columns:

        repeat(auto-fit,minmax(180px,1fr));


    gap:15px;


}



.card-evolucao {


    background:

        rgba(255,255,255,0.06);


    border-radius:14px;


    padding:18px;


    border:

        1px solid rgba(255,255,255,0.08);


}



/* =========================================
   CONQUISTAS
========================================= */


#lista-conquistas {


    display:grid;


    grid-template-columns:

        repeat(auto-fit,minmax(180px,1fr));


    gap:15px;


}



.card-conquista {


    background:

        rgba(255,255,255,0.06);


    border-radius:14px;


    padding:18px;


    text-align:center;


}



/* =========================================
   ANIMAÇÃO
========================================= */


@keyframes aparecerPainel {


    from {

        opacity:0;

        transform:
            translateY(-10px);

    }


    to {

        opacity:1;

        transform:
            translateY(0);

    }


}

#painel-expandido,
#ranking-wrapper {
    overflow: visible !important;
}