:root {
    /* Largura de referencia do player de video (cap do #divCurso/iframe). */
    --player-video-width: 1048px;
    /* Gap unico entre TODAS as caixas do player (menu<->video, video<->rodape,  */
    /* cabecalho do rodape<->faixa de texto). Ajuste aqui afeta todas. O JS le    */
    /* este mesmo valor (GAP_DETALHES em player-layout.js).                       */
    --player-gap: 6px;
    /* Largura compartilhada dos DOIS menus laterais (esquerdo = .sidebarSlider;  */
    /* direito = .pf-right-group), sempre igual. Os menus PREENCHEM a lateral      */
    /* deixando exatamente --player-gap ate o video central (que e centralizado e  */
    /* tem largura --player-video-width). Assim o gap menu<->video fica igual      */
    /* (6px) dos dois lados em QUALQUER resolucao. Piso de 300px (telas estreitas) */
    /* e teto de 560px (evita menus gigantes em telas muito largas).              */
    --sidebar-slider-width: clamp(300px, calc((100vw - var(--player-video-width)) / 2 - var(--player-gap)), 560px);
    /* Padding horizontal dos cabecalhos de "caixa" do rodape (.pf-header, ex.: a  */
    /* barra "Detalhes"): e o recuo do titulo dentro da coluna.                     */
    --pf-header-padding-x: 18px;
    --transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================ */
/* ESTRUTURA PRINCIPAL */
/* ============================================ */

/* Banner superior: faixa full-width com o NOME DO CURSO, acima de toda a         */
/* estrutura (menu / player / rodape). Compartilha o MESMO look das caixas de     */
/* titulo dos menus laterais (.slider-header): gradiente claro + linha divisoria  */
/* (regra unica abaixo), recuo de 20px (10px a esq.) e titulo bold 18px. Fica FORA */
/* do #conteudoPlayer, entao nao interfere na coluna direita/video (posicionados  */
/* de forma absoluta ancorados no topo de .conteudoPlayer).                        */
.player-topo {
    width: 100%;
    box-sizing: border-box;
    padding: 20px 20px 20px 10px;
    text-align: left;
    margin-bottom: var(--player-gap);
    /* Mesma elevacao de "caixa" dos menus laterais (.sidebarSlider / .pf-right-group */
    /* usam 2px 0 15px), aqui apontando para BAIXO — e o que faz a faixa ler como um   */
    /* box/cabecalho igual ao slider-header, e nao como uma tira plana.                */
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}

/* Baseado no titulo das caixas dos menus laterais (.rotuloCabecalhoMenuPlayer), */
/* com a fonte um pouco maior por ser o nome do curso em destaque no topo.        */
.player-topo-titulo {
    font: bold 18px Arial;
    color: #355a9e;
    overflow-wrap: break-word;
}

/* No desktop o nome do curso usa recuo fixo (20px), alinhado a esquerda da faixa  */
/* (em destaque, sobre o menu esquerdo). O calc comentado abaixo alinhava o titulo */
/* a coluna central do video (#divCurso) — mantido comentado caso queira voltar.   */
@media (min-width: 1200px) {
    .player-topo {
        /* padding-left: calc(var(--sidebar-slider-width) + var(--player-gap) + var(--pf-header-padding-x)); */
        padding-left: 20px;
    }
}

.conteudoPlayer {
    width: 100% !important;
    min-height: 800px;
    position: relative; /* referencia para a coluna de informacoes (desktop) */
}

.overflowDesativo {
    overflow: inherit !important;
    display: flex;
    flex-direction: column;
}
/* ============================================ */
/* SLIDER LATERAL - ABERTO POR PADRÃO (DESKTOP) */
/* ============================================ */
.sidebarSlider {
    position: relative;
    overflow-y: auto; /* scroll interno */
    width: var(--sidebar-slider-width);
    min-width: var(--sidebar-slider-width);
    background: #ffffff;
    box-shadow: 2px 0 15px rgba(0, 0, 0, 0.1);
    transform: translateX(0);
    transition: transform 0.3s ease;
    z-index: 1101;
    overflow: visible;
    display: flex;
    flex-direction: column;
}

    .sidebarSlider.open .toggleSlider {
        right: 5px; /* dentro, alinhado */
    }

    .sidebarSlider.closed .toggleSlider {
        /* 12px de folga visual + os 24px do buffer do painel fechado (abaixo),    */
        /* para o botao "flutuar" na beira da tela mesmo com o painel deslocado.   */
        left: calc(100% + 36px);
    }

    /* DESKTOP - SLIDER FECHADO */
    /* Desliza o painel pela propria largura + um buffer de 24px (espelha o     */
    /* handle direito). O buffer tira a SOMBRA do painel de dentro da tela      */
    /* (blur ~17px), evitando o "sliver" que sobrava. O toggle compensa esse    */
    /* buffer (left: 100% + 36px) para continuar flutuando na beira da tela.    */
    .sidebarSlider.closed {
        transform: translateX(calc(-100% - 24px));
        max-height: 38.9rem; /* Altura reduzida quando fechado */
        height: auto;
    }

    /* DESKTOP - SLIDER ABERTO */
    .sidebarSlider.open {
        transform: translateX(0);
        max-height: 38.9rem; /* Altura maior quando aberto */

        height: auto;
    }


.SCOsPlayer td {
    min-width: 12px !important;
}

/* ============================================ */
/* ÁREA DE CONTEÚDO DO VÍDEO */
/* ============================================ */

#divCurso {
    display: none;
    position: absolute;
    /* Altura: no DESKTOP e definida dinamicamente por ajustarAlturaPlayer()      */
    /* (player-layout.js) = topo real do video ate a base da viewport, menos gap  */
    /* + barra Detalhes + respiro (sem numero magico). No MOBILE vem do CSS        */
    /* (56.25vw, no @media max-width:1199px). Por isso nao ha height fixo aqui.    */
    z-index: 1000;
    transition: var(--transition);
    pointer-events: none;
    width: 99%;
}

    #divCurso iframe,
    #divCurso .areaCurso,
    #divCurso .divIframe {
        pointer-events: auto;
    }

    /* Cap de largura: apenas para pacotes responsivos (e player legado). Os de   */
    /* tamanho fixo (.player-fixo, PlayerV2) sao renderizados no tamanho nativo e */
    /* escalados via transform pelo JS (escalarPacoteFixo em player-layout.js);   */
    /* limita-los aqui cortaria o conteudo interno (ex.: 1280px) antes de escalar.*/
    #divCurso:not(.player-fixo) iframe,
    #divCurso:not(.player-fixo) .areaCurso,
    #divCurso:not(.player-fixo) .divIframe {
        max-width: var(--player-video-width) !important;
    }

/* Slider ABERTO */
.overflow-auto.slider-open #divCurso {
    /*left: 8%;*/
}

/* Slider FECHADO */
.overflow-auto.slider-closed #divCurso {
    /* left: 0;*/
}

/* Container do curso centralizado */
.areaCurso {
    position: relative;
    width: 100%;
    height: 100%;
}


/* ============================================ */
/* BOTÃO TOGGLE - POSIÇÃO AJUSTADA */
/* ============================================ */
.toggleSlider {
    position: absolute;
    width: 44px;
    height: 44px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2001;
    transition: right 0.3s ease;
    flex-shrink: 0;
}

/* ============================================ */
/* HEADER DO SLIDER */
/* ============================================ */

/* Look compartilhado das caixas de titulo do player: os DOIS menus laterais      */
/* (esquerdo e direito) e o banner superior (nome do curso). Faixa com gradiente  */
/* e linha divisoria. Editar aqui afeta os tres ao mesmo tempo (esquerdo =        */
/* .slider-header; direito = cabecalho do .pf-right-group; topo = .player-topo).  */
.player-topo,
.slider-header,
.pf-right-group .pf-header,
.pf-right-group .pf-header:hover {
    background: linear-gradient(to bottom, #f9fafb, #f3f4f6);
    border-bottom: 1px solid #e5e7eb;
}

.slider-header {
    padding: 20px;
    padding-right: 60px;
    position: relative;
    z-index: 10;
    flex-shrink: 0; /* Impede o header de esmagar */
    display: flex;
    align-items: center;
    /* Espaço reservado a direita para o handle de recolher. Reduzido em relacao   */
    /* aos 70px antigos: assim o botao de legenda desliza para a direita (para a    */
    /* folga que sobrava ate o handle) e a margem do titulo (abaixo) compensa esse  */
    /* recuo, mantendo a largura util do texto igual — o nome nao ganha nova quebra. */
    padding-right: 58px;
}

    .slider-header h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #1f2937;
        letter-spacing: 0.3px;
    }

/* ============================================ */
/* CONTEÚDO DO SLIDER - SEM OVERFLOW */
/* ============================================ */

.slider-content {
    flex: 1; /* Ocupa todo o espaço restante */
    overflow-y: auto; /* Habilita o scroll apenas aqui */
    overflow-x: hidden; /* Evita scroll horizontal */
    height: 100%;
}

/* Container do título (paginas legadas: Player.aspx, PlayerMobile.aspx, IndicePlayerPDF.aspx) */
.rotuloInfoPaginaAnterior {
    flex: 1;
    min-width: 0; /* ESSENCIAL para funcionar ellipsis */
    max-width: 220px;
    overflow-wrap: break-word;
}

/* Titulo dos cabecalhos dos menus laterais do player (esquerdo e direito).   s
/* Classe propria do player — NAO reaproveita a global .rotuloInfoPaginaAnterior */
/* para que ajustes aqui nao afetem (nem sejam afetados por) o resto do sistema. */
.rotuloCabecalhoMenuPlayer {
    flex: 1;
    min-width: 0; /* ESSENCIAL para funcionar ellipsis */
    max-width: 220px;
    overflow-wrap: break-word;
    font: bold 14px Arial;
    color: #355a9e;
}

/* Menu lateral ESQUERDO: o titulo pode ocupar toda a largura livre do        */
/* cabecalho (o menu chega a 560px), sem o teto de 220px que quebrava o texto */
/* cedo e deixava sobra antes do botao de legenda. Os cabecalhos da direita   */
/* (Desempenho/Progresso) mantem o teto acima, pois sao rotulos curtos.       */
.slider-header .rotuloCabecalhoMenuPlayer {
    max-width: none;
    /* Folga entre o nome do curso e o botao de legenda, para o titulo (que pode   */
    /* ocupar toda a largura) nao encostar no icone quando for longo. O header teve */
    /* o padding-right reduzido na MESMA medida, entao esta margem afasta o botao   */
    /* sem tirar largura do texto (nao gera quebra extra de linha).                 */
    margin-right: 12px;
}
/* ============================================ */
/* ÁREA DE OBJETOS DO PLAYER */
/* ============================================ */

.areaObjsPlayer {
    flex: 1;
    transition: all 0.3s ease;
    padding: 20px;
}

.overflow-auto.slider-closed .areaObjsPlayer {
    padding-left: 80px;
}

.overflow-auto.slider-open .areaObjsPlayer {
    padding-left: 20px;
}

.boxLegendaPlayerScorm {
    float: none !important;
}

/* ============================================ */
/* LOADING */
/* ============================================ */

#loading {
    width: 100%;
    height: 100vh;
    position: fixed;
    background-color: rgba(192, 192, 192, 0.5);
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    display: none;
    pointer-events: all !important;
    z-index: 999999;
}

#imgGif {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 15px;
    pointer-events: none;
    top: 50%;
    left: 50%;
    margin: -25px 0 0 -25px;
}

/* ============================================ */
/* RESPONSIVO */
/* ============================================ */

/* MOBILE / TABLET - FECHADO POR PADRÃO */
@media (max-width: 1199px) {
    .sidebarSlider {
        top: 0;
        left: 0;
        transform: translateX(calc(-1 * var(--sidebar-slider-width)));
        z-index: 1500;
    }

    #sidebarSlider.open {
        transform: translateX(0);
    }

    .toggleSlider {
        top: 1%;
    }

    #divCurso {
        left: 0 !important;
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    .sidebarSlider {
        width: 280px;
    }

        .sidebarSlider.closed {
            transform: translateX(calc(-1 * var(--sidebar-slider-width)));
        }

    :root {
        --sidebar-slider-width: 280px;
    }
}

/* ============================================ */
/* SCROLLBAR PERSONALIZADA (WEBKIT) */
/* ============================================ */

.sidebarSlider::-webkit-scrollbar {
    width: 6px;
}

.sidebarSlider::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.sidebarSlider::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

/* ============================================ */
/* UTILITÁRIOS */
/* ============================================ */

.noScroll {
    overflow: hidden;
}

/* ============================================ */
/* PRINT - ESCONDER SLIDER */
/* ============================================ */

@media print {
    #sidebarSlider,
    #toggleSlider,
    #sliderOverlay {
        display: none !important;
    }

    .areaObjsPlayer {
        padding-left: 0 !important;
    }
}

/* ============================================ */
/* IFRAME DO CURSO */
/* ============================================ */

.divIframe {
    /*position: absolute;*/
    bottom: 0px;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 100%;
}

#frmCurso {
    border: 0;
}

/* Largura/altura 100% para pacotes responsivos (e player legado). Os de tamanho */
/* fixo (.player-fixo) recebem o tamanho nativo + transform:scale() inline via JS */
/* (escalarPacoteFixo em player-layout.js), entao ficam de fora deste !important. */
#divCurso:not(.player-fixo) #frmCurso {
    width: 100% !important;
    height: 100% !important;
}

/* ============================================ */
/* BOTÕES DE CONTROLE */
/* ============================================ */

#areaBTNFechar {
    display: none;
    font: 14px Calibri, Arial;
    color: #666666;
}

#btnSim {
    margin-right: 10px;
    margin-top: 5px;
    background-color: #e3e3e3;
    background-image: url('../App_Themes/Padrao/Imagens/btnSim.png');
    background-repeat: no-repeat;
    background-position: center center;
    color: #ffffff;
    padding: 10px;
    text-align: center;
    width: 50px;
    height: 30px;
    cursor: pointer;
}

#btnNao {
    margin-top: 5px;
    background-color: #e3e3e3;
    background-image: url('../App_Themes/Padrao/Imagens/btnNao.png');
    background-repeat: no-repeat;
    background-position: center center;
    color: #ffffff;
    padding: 10px;
    text-align: center;
    width: 50px;
    height: 30px;
    cursor: pointer;
}


.SCOsPlayer a.selected-item {
    background-color: inherit !important;
    border-left: 4px solid #2563eb;
    color: #1e3a8a !important;
    font-weight: 600;
    border-radius: 4px;
    padding-left: 6px;
    position: relative;
}
    /* Hover não quebra o destaque */
    .SCOsPlayer a.selected-item:hover {
        background: linear-gradient(90deg, #dbeafe, #f1f5f9);
    }

/* Item bloqueado (pre-requisito nao atendido). E renderizado como link para que   */
/* a conclusao do item anterior possa libera-lo no client, mas fica acinzentado e  */
/* sem indicacao de clique enquanto data-locked='true' (guard em LaunchSCO).        */
.SCOsPlayer a.locked-item {
    color: #9ca3af !important;
    cursor: not-allowed;
    opacity: 0.6;
}

    .SCOsPlayer a.locked-item:hover {
        background: none;
    }

.sliderLegenda {
    display: flex;
    flex-direction: column;
}

    .sliderLegenda .configOutrasInfos div {
        margin-bottom: 5px;
    }

/* ============================================ */
/* TRANSICAO ENTRE LISTA DE AULAS E LEGENDA      */
/* ============================================ */
#painelMenuAulas,
#painelLegenda {
    transition: opacity 0.28s ease, transform 0.28s ease;
    opacity: 1;
    transform: translateX(0);
}

    /* Estado de saida: desliza levemente para a esquerda enquanto desaparece */
    #painelMenuAulas.painel-saindo,
    #painelLegenda.painel-saindo {
        opacity: 0;
        transform: translateX(-10px);
    }

    /* Estado de entrada (instante antes do reflow): comeca deslocado a direita */
    #painelMenuAulas.painel-entrando,
    #painelLegenda.painel-entrando {
        opacity: 0;
        transform: translateX(10px);
    }

@media (prefers-reduced-motion: reduce) {
    #painelMenuAulas,
    #painelLegenda {
        transition: opacity 0.15s linear;
        transform: none !important;
    }
}

/* ============================================ */
/* BOTAO DE LEGENDA (alterna lista de aulas <-> legenda no cabecalho do menu) */
/* ============================================ */
.btn-tooltip-info {
    flex-shrink: 0;
    margin-left: auto; /* empurra o icone para a direita, junto ao toggle */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    background-color: transparent;
    transition: background-color 0.3s ease;
}

    /* Estado inicial: icone azul sobre fundo transparente. */
    .btn-tooltip-info svg {
        fill: #007daf;
        transition: fill 0.3s ease;
    }

    /* Estado ativo (legenda visivel): fundo azul, icone branco. */
    .btn-tooltip-info.active-state {
        background-color: #007daf;
    }

        .btn-tooltip-info.active-state svg {
            fill: #ffffff;
        }

.legenda-container {
}

.legenda-card {
    width: 100%;
    overflow: hidden;
}

.legenda-header {
    background: #5B4BB5;
    padding: 16px 20px;
}

.legenda-title {
    color: #fff;
    font-size: 15px !important;
    font-weight: 500 !important;
    font-family: calibri_ !important;
    letter-spacing: 0.04em;
    background-image: url('/App_Themes/CentralDoAluno/Imagens/CustomizacaoVM/imagens/banner-legenda.png');
    background-repeat: no-repeat;
    background-position: 28% 48%;
    background-size: 110%;
    width: 100%;
    height: 78px !important;
}

.span-legenda {
    position: relative;
    top: 15px
}

.legenda-content {
    padding: 16px 20px 8px;
}

.legenda-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.legenda-item-last {
    margin-bottom: 4px;
}

.legenda-text {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.icon-box {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-purple {
    background: #EEEDFE;
}

.icon-gray {
    background: #F0F0F0;
}

.icon-blue {
    background: #E6F1FB;
}

.icon-green {
    background: #EAF3DE;
}

.icon-red {
    background: #FCEBEB;
}

.legenda-icon {
    height: 18px;
}

.icon-box i {
    font-size: 22px;
    line-height: 1;
}

.icon-purple i {
    color: #635BFF;
}

.icon-gray i {
    color: #7B7B7B;
}

.icon-blue i {
    color: #2D8CFF;
}

.icon-green i {
    color: #34C759;
}

.icon-red i {
    color: #E53935;
}

.legenda-divider {
    border: none;
    border-top: 1px dashed #CCCCCC;
    margin: 14px 0;
}

/* ============================================ */
/* RODAPE / INFORMACOES DO CURSO (acordeoes)    */
/* ============================================ */

.player-footer {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    border-top: 1px solid #e5e7eb;
    background: #ffffff;
}

/* Item acordeao */
.pf-item {
    position: relative;
    z-index: 1100; /* acima do divCurso (z-index 1000), abaixo do cabecalho/menu de idioma */
    border-bottom: 1px solid #e5e7eb;
}

.pf-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px var(--pf-header-padding-x);
    background: #f9fafb;
    border: none;
    border-radius: 0;
    cursor: pointer;
    text-align: left;
    font: bold 14px Arial, sans-serif; /* mesma fonte/cor do titulo dos menus (.rotuloCabecalhoMenuPlayer): */
    color: #355a9e; /* assim os headers do rodape (mobile) ficam todos iguais.          */
    letter-spacing: 0.3px;
}

    .pf-header:hover {
        background: #f3f4f6;
    }

.pf-title {
    flex: 1;
    min-width: 0;
}

.pf-chevron {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    transition: transform 0.25s ease;
}

    .pf-chevron::before {
        content: '\25BE'; /* triangulo para baixo */
        font-size: 12px;
        line-height: 1;
        color: #6b7280;
    }

.pf-item.open .pf-chevron {
    transform: rotate(180deg);
}

/* Painel que abre para baixo */
.pf-panel {
    display: none;
    padding: 16px 18px;
    background: #ffffff;
}

.pf-item.open .pf-panel {
    display: block;
}

/* Linhas da caixa de Desempenho */
.pf-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    font: 14px Calibri, Arial, sans-serif;
    color: #2C3D5B;
}

.pf-value {
    font-weight: bold;
    text-align: right;
}

.pf-value-destaque {
    color: #970b0b;
}

/* Progresso / Nota */
.pf-barra-rotulo {
    margin-bottom: 8px;
    font: 14px Calibri, Arial, sans-serif;
    color: #2C3D5B;
}

/* A BarraProgresso renderiza um container relative cujos filhos sao todos    */
/* absolute (altura 0). Este wrapper reserva a altura para a barra nao vazar  */
/* (respeitando o padding do painel) — equivale ao <td height=30> do DetalhesCurso. */
.pf-barra {
    position: relative;
    height: 36px;
}

.pf-nota {
    margin-top: 16px;
}

/* Botao de certificado: logo abaixo das barras de Progresso/Nota */
.pf-certificado {
    margin-top: 16px;
}

/* Detalhes do curso */
.pf-detalhe-secao {
    margin-bottom: 16px;
}

    .pf-detalhe-secao:last-child {
        margin-bottom: 0;
    }

.pf-detalhe-titulo {
    margin: 0 0 6px 0;
    font: 600 13px Calibri, Arial, sans-serif;
    color: #1f2937;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.pf-detalhe-texto {
    margin: 0;
    font: 14px Calibri, Arial, sans-serif;
    color: #4b5563;
    line-height: 1.5;
}

/* -------------------------------------------- */
/* DESKTOP: Desempenho e Progresso na direita    */
/* -------------------------------------------- */
/* Breakpoint elevado para 1200px: como os dois menus laterais ocupam 360px    */
/* cada (+ gutters = 760px), abaixo disso o video ficaria espremido. Entao a   */
/* partir de < 1200px tudo desce para o rodape (acordeao). Mantenha em sincronia */
/* com FOOTER_BREAKPOINT em ~/Scripts/player/player-layout.js.                  */
@media (min-width: 1200px) {

    /* Conteudo (menu) so existe no mobile */
    .pf-conteudo {
        display: none;
    }

    /* Grupo Desempenho + Progresso vira a coluna fixa da direita.            */
    /* Usa o MESMO estilo visual do menu lateral (.sidebarSlider): um unico   */
    /* painel branco com sombra, sem cards separados. Desempenho e Progresso  */
    /* vivem dentro dele como secoes contiguas (uma so linha entre eles).     */
    .pf-right-group {
        position: absolute;
        top: 0;
        right: 0;
        width: var(--sidebar-slider-width); /* mesma largura do menu lateral esquerdo */
        display: flex;
        flex-direction: column;
        gap: 0;
        background: #ffffff;
        box-shadow: -2px 0 15px rgba(0, 0, 0, 0.1); /* espelho do menu lateral */
        z-index: 1101; /* acima do divCurso, abaixo do cabecalho/menu de idioma */
        transition: transform 0.3s ease;
    }

        /* Colapsada: desliza inteira para fora pela direita, deixando so o handle. */
        /* A folga extra (alem da largura) garante que a borda/sombra dos cards    */
        /* nao fique assomando na beira da tela.                                   */
        .pf-right-group.closed {
            transform: translateX(calc(100% + 24px));
        }

    /* Handle de colapso: espelho do .toggleSlider do menu lateral. A APARENCIA */
    /* (quadrado branco, borda, raio, tamanho) vem da classe .toggleSlider,     */
    /* compartilhada com o menu esquerdo — aqui so o posicionamento especifico  */
    /* (canto superior esquerdo do painel) e a cor do icone.                    */
    .toggleRightGroup {
        top: 12px;
        left: 12px;
        color: #1f2937;
    }

        .toggleRightGroup:hover {
            background: #f3f4f6;
        }

    /* Fechada: a coluna sai pela direita e o handle passa a pokar na borda   */
    /* da tela (espelha o `.closed .toggleSlider { left: 100% }` do menu).    */
    /* O `right` usa a MESMA folga do translate da coluna, de modo que o     */
    /* handle (que acompanha o deslocamento) pare exatamente na beira.       */
    .pf-right-group.closed .toggleRightGroup {
        left: auto;
        right: calc(100% + 24px);
    }

        /* Espelha o icone quando fechada, indicando que vai reabrir. */
        .pf-right-group.closed .toggleRightGroup svg {
            transform: scaleX(-1);
        }

    /* O cabecalho do Desempenho reserva espaco a esquerda para o handle,     */
    /* assim como o .slider-header reserva padding-right para o .toggleSlider.*/
    .pf-desempenho > .pf-header {
        padding-left: 68px;
        min-height: 68px;
    }

    /* Desempenho e Progresso formam um unico bloco: sem cards            */
    /* individuais (sem borda/raio/sombra propria).                       */
    .pf-right-group .pf-item {
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: #ffffff;
    }

    /* Unica linha separadora entre Desempenho (em cima) e Progresso. */
    .pf-right-group .pf-progresso {
        border-top: 1px solid #e5e7eb;
    }

    /* No desktop essas caixas ficam sempre abertas e nao colapsam */
    .pf-right-group .pf-panel {
        display: block;
    }

    .pf-right-group .pf-chevron {
        display: none;
    }

    /* No desktop o cabecalho e so um titulo (nao colapsa), entao nao tem  */
    /* feedback de clique; o hover mantem o gradiente (ver regra           */
    /* compartilhada com .slider-header).                                  */
    .pf-right-group .pf-header {
        cursor: default;
    }

    /* O painel de Progresso ja traz o rotulo "Progresso" dentro          */
    /* (.pf-barra-rotulo); no desktop o header do acordeao seria          */
    /* redundante, entao e ocultado (no mobile ele e o botao do acordeao). */
    .pf-right-group .pf-progresso > .pf-header {
        display: none;
    }

    /* Detalhes deixa de ser faixa full-width no rodape e vai para a    */
    /* coluna central, abaixo do video (entre o menu e a coluna direita). */
    .player-footer {
        margin-top: 0;
        border-top: none;
        background: transparent;
    }

    /* Video confinado a coluna central (entre o menu e a coluna direita).      */
    /* As gutters = largura do menu + o gap unico (--player-gap), iguais nos     */
    /* dois lados (necessario tambem para a faixa full-width do Detalhes ficar   */
    /* centralizada).                                                            */
    #divCurso {
        left: calc(var(--sidebar-slider-width) + var(--player-gap));
        right: calc(var(--sidebar-slider-width) + var(--player-gap));
        width: auto;
    }

    /* Evita que a faixa full-width do Detalhes (100vw, abaixo) gere scroll      */
    /* horizontal e a recorta na largura da area do player (mesma extensao das   */
    /* colunas laterais). overflow-x:clip nao cria container de rolagem nem      */
    /* afeta o eixo vertical (diferente de overflow-x:hidden).                   */
    .conteudoPlayer {
        overflow-x: clip;
    }

    /* Detalhes posicionado logo ABAIXO do video, na coluna central.            */
    /* O CABECALHO ("Rodape") fica contido na coluna central; ao abrir, o texto */
    /* vira uma FAIXA full-width (de ponta a ponta da area do player) com o      */
    /* conteudo de texto mantido na largura da coluna (alinhado ao rodape).     */
    .pf-detalhes {
        position: absolute;
        /* O 'top' e definido dinamicamente por ajustarAlturaPlayer()             */
        /* (player-layout.js) = base real do video + gap. Sem fallback fixo aqui  */
        /* para nao deixar numero magico; ate o JS rodar a barra fica na posicao   */
        /* estatica (apos a coluna esquerda), sem sobrepor o video.               */
        /* Mesmas gutters do #divCurso; com max-width + margin auto o rodape fica */
        /* sempre com a MESMA largura (e centralizado) que o player de video,     */
        /* que tem cap de --player-video-width.                                    */
        left: calc(var(--sidebar-slider-width) + var(--player-gap));
        right: calc(var(--sidebar-slider-width) + var(--player-gap));
        max-width: var(--player-video-width);
        margin: 0 auto;
        background: transparent;
    }

        /* Barra "Rodape" (cabecalho): caixa contida na coluna central. */
        .pf-detalhes > .pf-header {
            border: 1px solid #e5e7eb;
            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
        }

        /* Painel de texto: o conteudo permanece na largura da coluna (herdada   */
        /* do .pf-detalhes centralizado), mas um ::before desenha uma FAIXA       */
        /* branca full-width atras dele. O truque (left: 50% - 50vw; width:100vw) */
        /* so alinha em 0 porque a coluna e simetrica na viewport (gutters de     */
        /* 380px iguais => coluna centralizada). O overflow-x:clip do             */
        /* .conteudoPlayer recorta a faixa na borda da area do player.            */
        .pf-detalhes .pf-panel {
            position: relative;
            margin-top: var(--player-gap);
            background: transparent;
        }

            .pf-detalhes .pf-panel::before {
                content: '';
                position: absolute;
                top: 0;
                bottom: 0;
                left: calc(50% - 50vw);
                width: 100vw;
                z-index: -1;
                background: #ffffff;
                border-top: 1px solid #e5e7eb;
                border-bottom: 1px solid #e5e7eb;
                box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
            }
}

/* -------------------------------------------- */
/* MOBILE / TABLET: tudo vira acordeao no rodape */
/* -------------------------------------------- */
@media (max-width: 1199px) {

    .pf-conteudo {
        display: block;
    }

    /* O grupo deixa de ser coluna fixa e volta para o fluxo do rodape */
    .pf-right-group {
        position: static;
        width: auto;
        display: block;
        transform: none !important; /* anula qualquer estado .closed herdado do desktop */
    }

    /* Handle de colapso so existe no desktop */
    .toggleRightGroup {
        display: none;
    }

    /* O Detalhes volta ao fluxo do rodape (sem o posicionamento absoluto do desktop) */
    .pf-detalhes {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        border: none;
        border-bottom: 1px solid #e5e7eb;
        border-radius: 0;
        box-shadow: none;
        /* O .player-footer e display:flex, entao o .pf-detalhes e um FLEX ITEM: o     */
        /* z-index (herdado de .pf-item = 1100) vale mesmo com position:static e cria  */
        /* um stacking context em 1100 -- o MESMO nivel do .pf-progresso (que ancora   */
        /* o botao de certificado e seu .cert-idioma-menu position:fixed). Como o      */
        /* Detalhes vem DEPOIS no DOM, empatado em 1100 ele ganha por ordem e cobria   */
        /* o menu (aumentar o z-index do menu nao adiantava: ele fica preso no 1100 do */
        /* .pf-progresso). No mobile o Detalhes esta no fluxo e nao precisa se sobrepor */
        /* a nada, entao voltamos para auto e o menu do certificado aparece por cima.  */
        z-index: auto;
    }

    /* No mobile/tablet vira uma coluna unica: o video passa a fluir (em vez */
    /* de absoluto) e a legenda fica logo abaixo dele, sem sobreposicao.     */
    /* Os filhos internos (areaCurso > divIframe > iframe) sao todos          */
    /* height:100%, entao o #divCurso PRECISA de uma altura definida — com    */
    /* height:auto a cadeia colapsa e o player vira uma fita fina. Damos uma  */
    /* altura responsiva em proporcao 16:9 da largura, com teto alinhado ao   */
    /* iframe (max-width 1004px => 1004 * 9/16 ≈ 565px) e um piso para telas  */
    /* muito estreitas.                                                       */
    #divCurso {
        position: relative !important;
        left: 0 !important;
        right: auto !important;
        width: 100% !important;
        height: 56.25vw;
        max-height: 565px;
        min-height: 260px;
    }

    /* Trava de seguranca contra o estouro horizontal do SCORM fixo no mobile.       */
    /* No mobile o #divCurso esta no fluxo (position:relative) e o iframe nasce no   */
    /* tamanho NATIVO (ex.: 1290px) antes de o escalarPacoteFixo (player-layout.js)  */
    /* aplicar o transform:scale(). No desktop o .conteudoComBorda tem overflow:     */
    /* hidden e recorta esse excedente; no mobile (sem essa regra) o iframe nativo   */
    /* inflava a pagina inteira ate ~1020px, e o escalarPacoteFixo media a coluna    */
    /* JA inflada -> escalava para 1020 em vez da viewport -> o video vazava. O      */
    /* overflow-x:clip aqui isola a largura do player: o excedente nativo nao        */
    /* propaga para os ancestrais, entao a coluna mede a viewport real e o scale     */
    /* enquadra certo. Espelha o overflow-x:clip que o desktop ja aplica (>=1200px). */
    .conteudoPlayer {
        overflow-x: clip;
    }

    /* ----------------------------------------------------------------- */
    /* Menu lateral movido (via JS) para dentro do botao "Conteudo".      */
    /* No rodape ele se comporta como painel de acordeao (abre p/ baixo). */
    /* ----------------------------------------------------------------- */
    .pf-conteudo > .sidebarSlider {
        position: static;
        transform: none !important;
        width: 100%;
        min-width: 0;
        max-height: none;
        right: auto;
        left: auto;
        box-shadow: none;
        z-index: auto;
        display: none; /* so aparece com o acordeao aberto */
    }

    .pf-conteudo.open > .sidebarSlider {
        display: flex;
    }

    /* O menu e aberto/fechado pelos botoes do rodape ("Conteudo" e          */
    /* "Legendas"), entao o cabecalho interno do slider (toggle + titulo +   */
    /* botao ⓘ de legenda) e dispensavel no mobile: a alternancia lista de   */
    /* aulas <-> legenda virou os dois botoes lado a lado abaixo.            */
    .pf-conteudo .slider-header {
        display: none;
    }

    .pf-conteudo .slider-content {
        max-height: 60vh;
        overflow-y: auto;
    }

    /* "Conteudo" e "Legendas" lado a lado, dividindo a largura do rodape.   */
    /* Cada um e um .pf-header com seu proprio chevron de aberto/fechado.    */
    .pf-conteudo-tabs {
        display: flex;
    }

        .pf-conteudo-tabs .pf-header {
            flex: 1 1 50%;
            min-width: 0;
        }

        .pf-conteudo-tabs .pf-tab-conteudo {
            border-right: 1px solid #e5e7eb;
        }

    /* Chevron por aba: o estado .open do .pf-conteudo (herdado de .pf-item)  */
    /* giraria os DOIS chevrons. Aqui zeramos e giramos apenas o da aba ativa */
    /* (a que esta exibindo seu painel), conforme show-menu / show-legenda.   */
    .pf-conteudo.open .pf-conteudo-tabs .pf-chevron {
        transform: none;
    }

    .pf-conteudo.open.show-menu .pf-tab-conteudo .pf-chevron,
    .pf-conteudo.open.show-legenda .pf-tab-legenda .pf-chevron {
        transform: rotate(180deg);
    }

    /* Realce sutil da aba ativa, para reforcar qual painel esta aberto. */
    .pf-conteudo.open.show-menu .pf-tab-conteudo,
    .pf-conteudo.open.show-legenda .pf-tab-legenda {
        background: #eef2f9;
    }
}