/* Estilos padrão para menus de abas/tabmenu reutilizáveis na plataforma */
.tabmenu-wrapper {
    display: flex;
    /* width: 100%; */
    padding: 0 2rem;
}

.tabmenu {
    display: inline-flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 2rem 0 1.5rem;
    align-items: center;
    padding: 1rem 1.2rem;
    background: transparent;
    border-radius: 2rem;
    /* width: auto;
    max-width: min(100%, 56rem); */
}

.tabmenu__button {
    /* var(--white) sozinho (sem borda) mal se distingue do fundo da pagina
       (tambem var(--lavender-mist)) no tema escuro — ambos ficam quase-pretos
       e o botao inativo perde o contorno (~1.1:1, muito abaixo do 3:1 minimo
       de contraste de componente da WCAG). A borda roxa translucida ja e o
       padrao usado em .btn-secondary (ver shared/css/modal.css) e funciona
       em ambos os temas sem precisar de um valor por tema. */
    border: 1px solid rgba(111, 0, 255, 0.16);
    background: var(--white);
    color: var(--black);
    border-radius: var(--radius-md);
    padding: 0.9rem 1.4rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    font-family: var(--montserrat);
    min-width: 0;
    width: auto;
}

.tabmenu__button:hover,
.tabmenu__button:focus-visible {
    background: rgba(111, 0, 255, 0.08);
    outline: none;
}

.tabmenu__button.active {
    background: linear-gradient(to top, #6f00ff, #b379ff);
    /* Cor fixa (nao var(--white)): o gradiente e uma superficie de marca que
       nao muda com o tema, mas var(--white) muda — no tema escuro ela virava
       quase-preto sobre o roxo (contraste ~2.78:1, abaixo do minimo de 4.5:1).
       Mesmo padrao ja usado em .btn-primary (shared/css/modal.css). */
    color: #fff;
    border-color: transparent;
    border: none;
}

.tabmenu__button.active:hover {
    transform: none;
}

.tabmenu__description {
    width: 100%;
    margin-top: 0.75rem;
    color: var(--gray);
    font-size: clamp(0.95rem, 1vw, 1rem);
}

.tabmenu-panel {
    margin: 0 5vw 2rem;
}

@media (max-width: 768px) {
    .tabmenu {
        display: flex;
        justify-content: center;
        flex-wrap: nowrap;
        gap: 0.4rem;
        margin: 1.2rem 0 0.9rem;
        padding: 0.55rem;
        width: auto;
        border-radius: 1.5rem;
        overflow-x: auto;
    }

    .tabmenu__button {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 6.5rem;
        max-width: 9rem;
        min-height: 2.75rem; /* ~44px touch target (WCAG 2.5.5) */
        width: auto;
        padding: 0.75rem 1.1rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 520px) {
    .tabmenu {
        gap: 0.35rem;
    }

    .tabmenu__button {
        min-width: 5rem;
        max-width: 8rem;
        min-height: 2.75rem;
        padding: 0.65rem 0.9rem;
        font-size: 0.82rem;
    }

    .tabmenu-wrapper {
        padding: 0 0.5rem;
    }

    .title-estatisticaspage-main {
        margin-top: 19vw;
    }
}

#estatisticas-results.estatisticas-transition-enter {
    animation: estatisticasFadeIn 240ms ease-out both;
}

#estatisticas-results.estatisticas-transition-exit {
    animation: estatisticasFadeOut 180ms ease-in both;
}

#estatisticas-results.estatisticas-transition-enter .course-card,
#estatisticas-results.estatisticas-transition-enter .container-estatistica-block,
#estatisticas-results.estatisticas-transition-enter .estatisticas-clear-history-wrapper,
#estatisticas-results.estatisticas-transition-enter .title-estatisticaspage {
    animation: estatisticasFadeUp 360ms ease-out both;
}

@keyframes estatisticasFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes estatisticasFadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-8px);
    }
}

@keyframes estatisticasFadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}