/* ==========================================
   CONFIGURAÇÕES DA PÁGINA
========================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.pagina-curso {
    --curso-azul-claro: #cfefff;
    --curso-azul-medio: #5fa8d3;
    --curso-azul-escuro: #1d3557;
    --curso-black: #08192b;
    --curso-dourado: gold;
    --curso-branco: #ffffff;
    --curso-texto: #33475b;

    min-height: 100vh;

    font-family: "Nunito", sans-serif;
    color: var(--curso-texto);
    background: #f7fbfd;
}


/* ==========================================
   CABEÇALHO
========================================== */

.pagina-curso .cabecalho-conteudo {
    position: sticky;
    width: 100%;
    display: flex;
    align-items: center;
    background: var(--curso-black);
    color: var(--curso-branco);
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.4);
    z-index: 999;
    border-bottom: 3px solid var(--curso-dourado);
}



/* ==========================================
   BOTÃO VOLTAR
========================================== */

.pagina-curso
.cabecalho-conteudo
> .btn-voltar {
    position: absolute;

    top: 50%;
    left: 20px;

    transform: translateY(-50%);

    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
    min-height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0;

    border: 0 !important;
    border-radius: 50%;

    background: transparent !important;

    box-shadow: none !important;

    cursor: pointer;
    z-index: 10;

    transition: transform 0.2s ease;
}


.pagina-curso
.cabecalho-conteudo
> .btn-voltar
> .btn-voltar-img {
    display: block;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px;
    min-height: 34px;
    max-width: 34px !important;
    max-height: 34px !important;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    object-fit: contain;
}


.pagina-curso
.cabecalho-conteudo
> .btn-voltar:hover {
    transform:
        translateY(-50%)
        scale(1.08);

    background:
        transparent !important;
}


.pagina-curso
.cabecalho-conteudo
> .btn-voltar:active {
    transform:
        translateY(-50%)
        scale(0.95);
}


/* ==========================================
   LOGO
========================================== */

.pagina-curso .identidade {
    display: flex;
    align-items: center;

    margin-left: 52px;
}


.pagina-curso .identidade img {
    width: 46px;
    height: 46px;

    object-fit: contain;
}


/* ==========================================
   TÍTULO CENTRAL DO CABEÇALHO
========================================== */

.pagina-curso .indicador {
    position: absolute;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%);

    width: max-content;

    max-width:
        calc(100% - 150px);

    color: #ffec94;

    font-size:
        clamp(13px, 2vw, 18px);

    font-weight: 900;
    text-align: center;
}


/* ==========================================
   APRESENTAÇÃO
========================================== */

.pagina-curso
.apresentacao-conteudo {
    padding: 52px 20px;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #eaf8ff,
            var(--curso-azul-claro)
        );

    border-bottom:
        1px solid #cbdfe8;
}


.pagina-curso
.apresentacao-conteudo h1 {
    margin-bottom: 12px;

    color:
        var(--curso-azul-escuro);

    font-size:
        clamp(36px, 6vw, 62px);

    font-weight: 900;
}


.pagina-curso
.apresentacao-conteudo > p {
    max-width: 720px;

    margin:
        0 auto 28px;

    font-size: 17px;
    line-height: 1.7;
}


/* ==========================================
   PAINEL DE PROGRESSO
========================================== */

.pagina-curso .painel-curso {
    max-width: 620px;

    margin: 0 auto;
    padding: 20px;

    border:
        2px solid
        var(--curso-dourado);

    border-radius: 22px;

    background:
        rgba(255, 255, 255, 0.96);

    box-shadow:
        0 8px 20px
        rgba(29, 53, 87, 0.18);

    text-align: left;
}


.pagina-curso
.progresso-curso-texto {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 9px;
}


.pagina-curso
.progresso-curso-texto span {
    color:
        var(--curso-azul-escuro);

    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1px;
}


.pagina-curso
.progresso-curso-texto strong {
    color:
        var(--curso-azul-escuro);

    font-size: 22px;
}


.pagina-curso .barra-curso {
    height: 18px;

    overflow: hidden;

    border-radius: 20px;

    background: #dce9ef;
}


.pagina-curso #barraCurso {
    width: 0%;
    height: 100%;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            var(--curso-dourado),
            #fff0a6
        );

    transition: width 0.5s ease;
}


.pagina-curso #resumoCurso {
    margin-top: 8px;

    color: #637582;

    font-size: 13px;
}


/* ==========================================
   ÁREA DO CURSO
========================================== */

.pagina-curso .area-curso {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        330px;

    align-items: start;
    gap: 25px;

    max-width: 1200px;

    margin: 0 auto;
    padding: 42px 20px;
}


/* ==========================================
   TRILHA
========================================== */

.pagina-curso
.area-curso
.trilha-conteudo {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;
}


.pagina-curso .titulo-secao {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    gap: 20px;

    margin-bottom: 22px;
}


.pagina-curso
.titulo-secao > div > span {
    color:
        var(--curso-azul-medio);

    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1px;
}


.pagina-curso
.titulo-secao h2 {
    margin-top: 4px;

    color:
        var(--curso-azul-escuro);

    font-size:
        clamp(24px, 3vw, 34px);
}


.pagina-curso
.titulo-secao > p {
    max-width: 300px;

    color: #637582;

    font-size: 13px;
    text-align: right;
}


/* ==========================================
   CARDS DAS AULAS
========================================== */

.pagina-curso .lista-topicos {
    display: flex;
    flex-direction: column;

    gap: 18px;
}


.pagina-curso .topico {
    position: relative;

    display: grid;

    grid-template-columns:
        55px
        minmax(0, 1fr);

    gap: 18px;

    padding: 21px;

    border:
        2px solid #d5e6ed;

    border-radius: 23px;

    background:
        var(--curso-branco);

    box-shadow:
        0 8px 20px
        rgba(29, 53, 87, 0.12);

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}


.pagina-curso
.topico:not(.bloqueada):hover {
    transform: translateY(-3px);
}


.pagina-curso .numero-topico {
    width: 55px;
    height: 55px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        2px solid
        var(--curso-dourado);

    border-radius: 50%;

    background:
        var(--curso-azul-escuro);

    color:
        var(--curso-branco);

    font-size: 17px;
    font-weight: 900;
}


.pagina-curso
.descricao-topico .situacao {
    display: inline-block;

    margin-bottom: 5px;

    color:
        var(--curso-azul-medio);

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
}


.pagina-curso
.descricao-topico h3 {
    margin-bottom: 7px;

    color:
        var(--curso-azul-escuro);

    font-size: 21px;
}


.pagina-curso
.descricao-topico p {
    color: #637582;

    font-size: 14px;
    line-height: 1.5;
}


/* ==========================================
   BOTÕES DOS CARDS
========================================== */

.pagina-curso .acoes-topico {
    grid-column: 1 / -1;

    display: flex;
    justify-content: flex-end;

    gap: 10px;

    padding-top: 4px;
}


.pagina-curso
.acoes-topico a {
    min-width: 190px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    padding: 11px 14px;

    border-radius: 18px;

    font-size: 13px;
    font-weight: 900;
    text-decoration: none;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}


.pagina-curso
.acoes-topico small {
    display: block;

    margin-bottom: 2px;

    font-size: 9px;
    letter-spacing: 1px;
}


.pagina-curso
.acoes-topico .icone {
    font-size: 20px;
}


.pagina-curso .btn-aula {
    border:
        1px solid #93c6db;

    background:
        var(--curso-azul-claro);

    color:
        var(--curso-azul-escuro);
}


.pagina-curso .btn-jogo {
    border:
        1px solid
        var(--curso-dourado);

    background:
        var(--curso-azul-escuro);

    color:
        var(--curso-branco);
}


.pagina-curso
.acoes-topico a:hover {
    transform:
        translateY(-2px);
}


/* ==========================================
   CARD CONCLUÍDO
========================================== */

.pagina-curso .topico.concluida {
    border-color: #60a875;

    background: #f3fbf5;
}


.pagina-curso
.topico.concluida
.numero-topico {
    border-color: #60a875;

    background: #327c49;
}


.pagina-curso
.topico.concluida
.situacao {
    color: #327c49;
}


/* ==========================================
   CARD BLOQUEADO
========================================== */

.pagina-curso .topico.bloqueada {
    opacity: 0.62;
}


.pagina-curso
.topico.bloqueada::after {
    content:
        "🔒 Conclua o teste anterior para liberar";

    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    border-radius: 21px;

    background:
        rgba(247, 251, 253, 0.88);

    color:
        var(--curso-azul-escuro);

    font-weight: 900;
    text-align: center;

    z-index: 5;
}


/* ==========================================
   RELATÓRIO LATERAL
========================================== */

.pagina-curso .relatorio-curso {
    position: sticky;
    top: 20px;

    overflow: hidden;

    border:
        2px solid
        var(--curso-dourado);

    border-radius: 25px;

    background:
        var(--curso-branco);

    box-shadow:
        0 10px 25px
        rgba(29, 53, 87, 0.18);
}


.pagina-curso
.relatorio-cabecalho {
    padding: 22px;

    background:
        var(--curso-azul-escuro);

    color:
        var(--curso-branco);
}


.pagina-curso
.relatorio-cabecalho > span {
    color:
        var(--curso-dourado);

    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1px;
}


.pagina-curso
.relatorio-cabecalho h2 {
    margin: 5px 0;

    font-size: 24px;
}


.pagina-curso
.relatorio-cabecalho p {
    font-size: 14px;

    opacity: 0.88;
}


/* ==========================================
   RESULTADO GERAL
========================================== */

.pagina-curso .relatorio-geral {
    display: flex;
    align-items: center;

    gap: 17px;

    padding: 22px;

    border-bottom:
        1px solid #dce9ef;
}


.pagina-curso
.circulo-desempenho {
    width: 105px;
    height: 105px;

    flex-shrink: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        radial-gradient(
            closest-side,
            white 76%,
            transparent 78% 100%
        ),
        conic-gradient(
            var(--curso-dourado)
            calc(
                var(--desempenho) * 1%
            ),
            #dce9ef 0
        );
}


.pagina-curso
.circulo-desempenho strong {
    color:
        var(--curso-azul-escuro);

    font-size: 24px;
}


.pagina-curso
.circulo-desempenho span {
    color:
        var(--curso-texto);

    font-size: 11px;
    font-weight: 700;
}


.pagina-curso
.resumo-desempenho p {
    margin: 7px 0;

    font-size: 13px;
}


.pagina-curso
.resumo-desempenho strong {
    display: block;

    color:
        var(--curso-azul-escuro);

    font-size: 20px;
}


/* ==========================================
   BLOCOS DO RELATÓRIO
========================================== */

.pagina-curso .relatorio-bloco {
    padding: 19px 22px;

    border-bottom:
        1px solid #dce9ef;
}


.pagina-curso
.relatorio-bloco h3 {
    margin-bottom: 14px;

    color:
        var(--curso-azul-escuro);

    font-size: 16px;
}


/* ==========================================
   ANDAMENTO DAS AULAS
========================================== */

.pagina-curso .andamento-item {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 12px;

    margin-bottom: 9px;
    padding: 9px 11px;

    border-radius: 12px;

    background: #f3f8fa;

    font-size: 13px;
}


.pagina-curso
.andamento-item strong {
    color:
        var(--curso-azul-escuro);

    font-size: 11px;
    text-align: right;
}


.pagina-curso
.andamento-item.concluida {
    background: #e9f8ee;
}


.pagina-curso
.andamento-item.concluida strong {
    color: #287840;
}


.pagina-curso
.andamento-item.em-andamento {
    border:
        1px solid
        var(--curso-dourado);

    background: #fffbea;
}


/* ==========================================
   DESEMPENHO POR CONTEÚDO
========================================== */

.pagina-curso .desempenho-item {
    margin-bottom: 14px;
}


.pagina-curso
.desempenho-texto {
    display: flex;
    justify-content: space-between;

    margin-bottom: 5px;

    font-size: 12px;
    font-weight: 800;
}


.pagina-curso
.desempenho-barra {
    height: 9px;

    overflow: hidden;

    border-radius: 10px;

    background: #dce9ef;
}


.pagina-curso
.desempenho-barra div {
    height: 100%;

    border-radius: 10px;

    background:
        var(--curso-azul-medio);
}


.pagina-curso
.desempenho-item.atencao
.desempenho-barra div {
    background: #e5a622;
}


.pagina-curso
.relatorio-vazio {
    color: #687987;

    font-size: 13px;
    line-height: 1.5;
}


/* ==========================================
   RECOMENDAÇÕES
========================================== */

.pagina-curso .recomendacoes {
    background: #fffbea;
}


.pagina-curso
.recomendacoes p,
.pagina-curso
.recomendacoes li {
    color:
        var(--curso-texto);

    font-size: 13px;
    line-height: 1.5;
}


.pagina-curso
.recomendacoes ul {
    padding-left: 18px;
}


/* ==========================================
   CONCLUSÃO DA TRILHA
========================================== */

.pagina-curso
.conclusao-potenciacao {
    padding: 22px;

    background:
        var(--curso-azul-escuro);

    color:
        var(--curso-branco);

    text-align: center;
}


.pagina-curso
.conclusao-potenciacao > span {
    font-size: 36px;
}


.pagina-curso
.conclusao-potenciacao h3 {
    margin: 7px 0;
}


.pagina-curso
.conclusao-potenciacao p {
    margin-bottom: 14px;

    font-size: 13px;
}


.pagina-curso
.conclusao-potenciacao button {
    padding: 10px 17px;

    border:
        2px solid
        var(--curso-dourado);

    border-radius: 18px;

    background:
        var(--curso-branco);

    color:
        var(--curso-azul-escuro);

    font:
        900 13px
        "Nunito",
        sans-serif;

    cursor: pointer;
}


/* ==========================================
   MODAL DA VIDEOAULA
========================================== */

.pagina-curso .modal-videoaula {
    position: fixed;
    inset: 0;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background:
        rgba(8, 25, 43, 0.82);

    z-index: 9999;
}


.pagina-curso
.modal-videoaula.aberto {
    display: flex;
}


.pagina-curso .videoaula-box {
    width:
        min(900px, 100%);

    max-height: 95vh;

    overflow-y: auto;

    border:
        2px solid
        var(--curso-dourado);

    border-radius: 25px;

    background:
        var(--curso-branco);

    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, 0.45);
}


.pagina-curso
.videoaula-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 16px 20px;

    border-bottom:
        2px solid
        var(--curso-dourado);

    background:
        var(--curso-azul-escuro);

    color:
        var(--curso-branco);
}


.pagina-curso
.videoaula-topo span {
    color:
        var(--curso-dourado);

    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1px;
}


.pagina-curso
.videoaula-topo h2 {
    margin-top: 3px;

    font-size: 22px;
}


.pagina-curso
.fechar-videoaula {
    width: 40px;
    height: 40px;
    min-width: 40px;

    padding: 0;

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

    border-radius: 50%;

    background:
        transparent;

    color:
        var(--curso-branco);

    font-size: 30px;
    line-height: 1;

    cursor: pointer;
}


.pagina-curso
.fechar-videoaula:hover {
    border-color:
        var(--curso-dourado);

    color:
        var(--curso-dourado);
}


.pagina-curso
.videoaula-player {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    background: #000000;
}


.pagina-curso
#playerVideoaula,
.pagina-curso
#playerVideoaula iframe {
    display: block;

    width: 100%;
    height: 100%;
}


.pagina-curso
.aviso-videoaula {
    padding: 14px 20px;

    color:
        var(--curso-azul-escuro);

    font-size: 14px;
    font-weight: 700;
    text-align: center;
}


/* ==========================================
   RODAPÉ
========================================== */

.pagina-curso > footer {
    padding: 20px;
    text-align: center;
    background:
        var(--curso-black);
    color:
        var(--curso-branco);
    border-top:
        2px solid
        var(--curso-dourado);
}


/* ==========================================
   TABLETS
========================================== */

@media (max-width: 950px) {

    .pagina-curso .area-curso {
        grid-template-columns: 1fr;
    }

    .pagina-curso
    .relatorio-curso {
        position: static;

        width: 100%;
    }
}


@media (max-width: 780px) {

    .pagina-curso
    .titulo-secao {
        align-items: flex-start;
        flex-direction: column;

        gap: 6px;
    }

    .pagina-curso
    .titulo-secao > p {
        max-width: none;

        text-align: left;
    }

    .pagina-curso
    .acoes-topico {
        flex-direction: column;
    }

    .pagina-curso
    .acoes-topico a {
        width: 100%;
        min-width: 0;
    }
}


/* ==========================================
   CELULARES
========================================== */

@media (max-width: 560px) {

    .pagina-curso
    .cabecalho-conteudo {
        min-height: 66px;

        padding: 8px 12px;
    }

    .pagina-curso
    .cabecalho-conteudo
    > .btn-voltar {
        left: 12px;
    }

    .pagina-curso
    .identidade {
        margin-left: auto;
    }

    .pagina-curso
    .identidade img {
        width: 38px;
        height: 38px;
    }

    .pagina-curso
    .indicador {
        display: block;

        max-width:
            calc(100% - 130px);

        font-size: 13px;
    }

    .pagina-curso
    .apresentacao-conteudo {
        padding: 36px 16px;
    }

    .pagina-curso
    .apresentacao-conteudo > p {
        font-size: 15px;
    }

    .pagina-curso
    .area-curso {
        padding: 28px 12px;

        gap: 20px;
    }

    .pagina-curso .topico {
        padding: 16px;

        grid-template-columns:
            44px
            minmax(0, 1fr);

        gap: 12px;
    }

    .pagina-curso
    .numero-topico {
        width: 44px;
        height: 44px;

        font-size: 14px;
    }

    .pagina-curso
    .descricao-topico h3 {
        font-size: 18px;
    }

    .pagina-curso
    .relatorio-geral {
        flex-direction: column;

        text-align: center;
    }

    .pagina-curso
    .videoaula-box {
        border-radius: 18px;
    }

    .pagina-curso
    .videoaula-topo {
        padding: 12px 14px;
    }

    .pagina-curso
    .videoaula-topo h2 {
        font-size: 18px;
    }

    .pagina-curso
    .modal-videoaula {
        padding: 10px;
    }
}

/* ==========================================
   TRILHA DE POTENCIAÇÃO E RADICIAÇÃO — JANELA EM LIBRAS
========================================== */
.pagina-radiciacao .janela-libras-trilha iframe,
.pagina-potenciacao .janela-libras-trilha iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 2px solid #5fa8d3;
    border-radius: 14px;
    background: #000;
}

.pagina-potenciacao .janela-libras-trilha button,
.pagina-radiciacao .janela-libras-trilha button,
.pagina-radiciacao .btn-voltar-matematica,
.pagina-potenciacao .btn-voltar-matematica {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 10px 14px;
    border: 2px solid #5fa8d3;
    border-radius: 12px;
    background: #dff4ff;
    color: #1d3557;
    font: inherit;
    font-weight: 900;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color .2s ease,
                color .2s ease,
                transform .2s ease;
}

.pagina-potenciacao .janela-libras-trilha button:hover,
.pagina-potenciacao .janela-libras-trilha button:focus-visible,
.pagina-potenciacao .btn-voltar-matematica:hover,
.pagina-potenciacao .btn-voltar-matematica:focus-visible,
.pagina-radiciacao .janela-libras-trilha button:hover,
.pagina-radiciacao .janela-libras-trilha button:focus-visible,
.pagina-radiciacao .btn-voltar-matematica:hover,
.pagina-radiciacao .btn-voltar-matematica:focus-visible {
    background: #1d3557;
    color: #fff;
    transform: translateY(-1px);
}

.pagina-potenciacao .revisao-sem-teste,
.pagina-radiciacao .revisao-sem-teste {
    cursor: default;
}

.pagina-potenciacao .revisao-sem-teste:hover,
.pagina-radiciacao .revisao-sem-teste:hover {
    transform: none;
}

@media (max-width: 600px) {
    .pagina-potenciacao .janela-libras-trilha iframe,
    .pagina-radiciacao .janela-libras-trilha iframe  {
        min-height: 190px;
    }
}