/*MOBILE*/
@media only screen and (max-width: 991px) {
    .lbl-foo {
        font-size: 18px;
    }

    .header-contents {
    }

        .header-contents div {
            width: 100% !important;
        }

        .header-contents .header-btn {
            width: 30px !important;
        }

    .nav-webapp {
        display: none !important;
    }

    .nav-mobile {
        display: block !important;
    }

    .col-lg-5 {
        width: 100% !important;
    }


    .modal-dialog {
        max-width: 100% !important;
    }

    .mobile-w-100 {
        width: 100% !important;
    }

    .card-modelo-index img {
        height: auto;
    }

    .flex-mobile {
        display: flex !important;
    }

        .flex-mobile li {
            margin-left: 5px;
            margin-right: 5px;
        }


    .filter-mobile-hide {
        display: none;
        opacity: 0;
    }

    .filter-mobile-show {
        display: block;
        opacity: 1;
    }

    .filters-btn-mobile {
        display: block;
        margin-left: 75%;
    }

    .card-off {
        width: 50%;
    }

        .card-off .img-off {
            width: 100%;
            height: 200px;
        }

    .filter-mobile {
        transition: visibility 1s, opacity 0.5s linear;
        display: none;
    }

    .pnl-top-categorias {
        flex-wrap: wrap;
        place-content: center;
        width: 100%;
        display: flex;
    }

        .pnl-top-categorias .card-categoria {
            width: 50%;
        }


    .pnl-myaccount {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .pnl-menu-account {
        display: none !important;
    }

    .mobile-ms-0 {
        margin-left: 0 !important;
    }

    .mobile-show {
        display: block;
    }

    .mobile-show-flex {
        display: flex;
    }

    .mobile-column-reverse {
        flex-direction: column-reverse;
    }

    .img-sel-item-mobile {
        max-width: 88.25px;
    }


    .v-mobile {
        display: block;
    }

    .v-desktop {
        display: none !important;
    }


    .mobile-100 {
        width: 100% !important;
    }



    .f-row-reverse-mobile {
        flex-direction: column-reverse;
    }

    .mt-0-mobile {
        margin-top: 0 !important;
    }


    .pnl-topo {
    }

        .pnl-topo img {
            height: 300px;
        }


    .px-0-mobile {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }



    /* Mostra o player mobile e oculta o desktop */
    .v-desktop {
        display: none !important;
    }

    .v-mobile {
        display: block !important;
    }

    /* Garante 100% na largura onde você já usa "mobile-100" */
    .mobile-100 {
        width: 100% !important;
    }

    /* Torna o wrapper uma coluna (em vez de linhas lado a lado) */
    .conteudo-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem;
    }

        /* Truque: promove os filhos internos do col-lg-9
     (vídeo e quizzes) para virarem irmãos do painel de aulas,
     assim conseguimos ordenar os três apenas com CSS */
        .conteudo-wrapper > .col-lg-9 {
            display: contents; /* amplamente suportado nos navegadores modernos */
        }

    /* Ordem desejada no mobile */
    .conteudoAulaSelecionado {
        order: 1;
    }
    /* Vídeo */
    .listaTodosConteudos {
        order: 2;
    }
    /* Aulas */
    .block-quizzes {
        order: 3;
    }
    /* Quizzes */

    /* Altura do iframe no mobile com proporção 16:9 */
    .v-mobile iframe {
        width: 100%;
        aspect-ratio: 16 / 9;
        height: auto;
        min-height: unset; /* ignora min-height desktop */
    }
}




@media (min-width: 992px) {
    .v-desktop {
        /*display: block !important;*/
    }

    .v-mobile {
        display: none !important;
    }
}