` (utilizador com
acesso) não tem `
`, por isso estas regras não têm efeito
nenhum nesse caso - nenhuma duplicação de estrutura. */
.darka-curriculum-module summary {
list-style: none;
cursor: pointer;
margin: 0 0 10px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 2px 16px;
}
.darka-curriculum-module summary::-webkit-details-marker {
display: none;
}
.darka-curriculum-module summary::after {
content: '+';
font-size: 20px;
font-weight: 400;
line-height: 1;
color: var(--darka-primary);
flex-shrink: 0;
}
.darka-curriculum-module[open] summary::after {
content: '\2212';
}
.darka-curriculum-module__title {
font-size: var(--darka-text-base);
font-weight: 600;
flex: 1 1 auto;
min-width: 0;
}
/* Discreta e em bloco próprio (pedido explícito), abaixo do título -
mesma técnica de opacidade reduzida sobre a cor herdada já usada em
`.darka-field-help`/`.darka-sidebar-module__progress`, nunca uma cor
nova; `order:2` + `flex-basis:100%` força a quebra para a linha
seguinte, deixando o título e o marcador +/- na primeira linha. */
.darka-curriculum-module__count {
order: 2;
flex-basis: 100%;
font-size: var(--darka-text-xs);
opacity: 0.65;
}
.darka-curriculum-lessons {
list-style: none;
margin: 0;
padding: 0;
font-size: var(--darka-text-xs);
}
.darka-curriculum-lessons li {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
border-top: 1px solid var(--darka-border);
}
.darka-curriculum-lessons li:first-child {
border-top: none;
}
.darka-curriculum-lessons a {
display: flex;
align-items: center;
gap: 10px;
color: var(--darka-text);
text-decoration: none;
width: 100%;
}
.darka-curriculum-lessons a:hover {
color: var(--darka-primary);
}
.darka-curriculum-lessons li.is-locked {
opacity: 0.6;
}
.darka-lesson-icon {
font-size: 13px;
flex-shrink: 0;
}
.darka-lesson-row__text {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
text-align: left;
}
.darka-lesson-row__text small {
opacity: 0.6;
font-size: var(--darka-text-xs);
}
.darka-course-sidebar-sticky {
position: sticky;
top: 20px;
}
.darka-course-sidebar-card {
background: var(--darka-surface);
border: 1px solid var(--darka-border);
border-radius: 12px;
padding: 24px;
text-align: center;
}
.darka-course-sidebar-card .darka-price {
display: block;
font-size: var(--darka-text-lg);
margin-bottom: 8px;
}
.darka-course-sidebar-card .darka-btn-primary,
.darka-course-sidebar-card .darka-btn-secondary {
width: 100%;
margin: 12px 0;
}
.darka-feature-list {
list-style: none;
margin: 16px 0 0;
padding: 0;
text-align: left;
font-size: var(--darka-text-xs);
display: flex;
flex-direction: column;
gap: 8px;
}
.darka-instructor-card {
display: flex;
align-items: center;
gap: 10px;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--darka-border);
font-size: var(--darka-text-xs);
text-align: left;
}
.darka-instructor-card img {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.darka-instructor-card div {
display: flex;
flex-direction: column;
}
.darka-locked-notice {
padding: 12px;
border-radius: 8px;
background: rgba(239, 68, 68, 0.1);
color: #fca5a5;
font-size: var(--darka-text-xs);
margin: 12px 0;
}
/* ---------- Página de aula / player ---------- */
/* REMOVIDO: `.darka-lesson-topbar`/`.darka-lesson-back`/
`.darka-lesson-breadcrumb*` (cabeçalho próprio da aula: botão
"Voltar" + breadcrumb) — substituído pelo Header oficial da
Dashboard (`Components::topbar()`, ver `LessonPage::render()`),
pedido explícito; regras órfãs eliminadas. */
/* AJUSTADO: arquitetura "app shell fixa, só o centro rola" (pedido
explícito) — Header e as duas Sidebars (principal e da Playlist)
ficam sempre visíveis; só `.darka-lesson-main` tem rolagem própria.
Só a partir de 901px: abaixo disso, o layout já reverte para uma
única coluna empilhada (ver media query mais abaixo), onde a página
inteira rola normalmente — mais adequado a ecrãs pequenos do que
forçar painéis com scroll interno próprio. `body.darka-lesson-page`
fecha isto só a esta página: `.darka-app-shell`/`.darka-sidebar` são
classes partilhadas com o Dashboard/Perfil, que continuam com o
comportamento de sempre (página inteira a rolar), inalterados. */
@media (min-width: 901px) {
body.darka-lesson-page {
height: 100vh;
overflow: hidden;
}
body.darka-lesson-page .darka-app-shell {
height: 100vh;
}
body.darka-lesson-page .darka-sidebar {
overflow-y: auto;
}
body.darka-lesson-page .darka-app-content {
height: 100vh;
overflow: hidden;
}
body.darka-lesson-page .darka-app-topbar {
flex-shrink: 0;
}
body.darka-lesson-page .darka-lesson-layout {
flex: 1;
min-height: 0;
}
body.darka-lesson-page .darka-lesson-main {
height: 100%;
overflow-y: auto;
}
/* AJUSTADO (auditoria "Sidebar da Aula — Padding e Scroll"): deixou
de ter `overflow-y: auto` própria — antes a Sidebar inteira
rolava como um único bloco (título, progresso, pesquisa e a
playlist juntos). Passa a ser só `height: 100%` (mantido, para o
layout de altura fixa da página de aula continuar igual); o
scroll passa a viver exclusivamente em `.darka-sidebar-modules`,
ver a regra base de `.darka-lesson-sidebar` mais abaixo. */
body.darka-lesson-page .darka-lesson-sidebar {
height: 100%;
}
/* NOVO: a área central continua rolável — só a barra de rolagem
deixa de ser desenhada, e por isso também deixa de ocupar espaço
na largura da página (Firefox: `scrollbar-width: none`; Chrome/
Safari/Edge: `::-webkit-scrollbar { display: none }`, logo
abaixo). */
body.darka-lesson-page .darka-lesson-main {
scrollbar-width: none;
}
}
body.darka-lesson-page .darka-lesson-main::-webkit-scrollbar {
display: none;
}
/* AJUSTADO: a barra de progresso mudou-se para dentro da Sidebar
(`.darka-sidebar-progress`, logo abaixo do título do curso) — já não
existe nenhuma faixa a toda a largura no topo da página, por isso a
antiga `.darka-lesson-progress-row` foi removida (deixou de haver
elemento nenhum a usá-la). `.darka-lesson-progress-label` continua a
ser usada, agora dentro da Sidebar. */
.darka-lesson-progress-label {
display: flex;
justify-content: space-between;
font-size: var(--darka-text-xs);
margin-bottom: 6px;
opacity: 0.75;
}
/* NOVO: contentor compacto da barra de progresso dentro da Sidebar,
logo abaixo do título do curso e antes da playlist. */
.darka-sidebar-progress {
margin-bottom: 16px;
}
/* REMOVIDO: `.darka-lesson-meta` (duração abaixo do título, pedido
explícito de remoção) — a única chamada que a usava, em
`LessonPage::main_area()`, foi removida; regra órfã eliminada.
`Components::format_duration()` continua a existir e a ser usado nos
outros locais de sempre (cartão de curso, etc.), inalterado. */
/* REMOVIDO: `.darka-lesson-title-row` (título da aula acima do Player +
botão de alternar a Sidebar da Playlist) — título removido a pedido
explícito; o botão mudou-se para o topo interno da própria Sidebar da
Playlist (ver `.darka-sidebar-toggle-row`, mais abaixo). Regras órfãs
eliminadas. */
/* AJUSTADO: `1fr` sozinho tem um mínimo automático baseado no conteúdo
(`min-width: auto`), não `0` — nalguns casos isso impede a coluna de
ocupar toda a largura que devia, encolhendo `.darka-lesson-main` (e a
percentagem do Player calculada sobre ela) para menos do que o
esperado. `minmax(0, 1fr)` é a correção padrão: liberta a coluna para
crescer até à largura total disponível, garantindo que a percentagem
escolhida no admin é calculada sobre o espaço real ao lado da
Sidebar. */
/* AJUSTADO (auditoria "Sidebar da Aula — Estrutura Visual"): largura
aumentada de 320px para 360px (pedido explícito — "aumente um pouco",
mais espaço para título dos módulos/aulas, duração e ícones), só em
Desktop (`minmax(0, 1fr)` na outra coluna continua a garantir que o
Player nunca fica espremido). Tablet/Mobile inalterados — continuam
a usar a largura própria do painel sobreposto (`min(340px, 88vw)`,
ver a media query ≤900px mais abaixo). */
.darka-lesson-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
min-height: calc(100vh - 130px);
}
/* AJUSTADO: estado "Sidebar da aula oculta" — o botão que a alterna
mudou-se para o topo interno da própria Sidebar (`data-darka-lesson-sidebar-toggle`,
ver `sidebar()` em LessonPage.php e `initLessonSidebarToggle()` em
student.js). Por isso, ao ocultar, a Sidebar já NÃO desaparece por
completo (`display: none` deixaria o botão que a reabre também
escondido, sem forma de a mostrar de novo) — encolhe para uma faixa
estreita (56px) com só a linha do botão visível; o resto do conteúdo
fica `display: none`. */
.darka-lesson-layout.darka-lesson-sidebar-hidden {
grid-template-columns: minmax(0, 1fr) 56px;
}
.darka-lesson-layout.darka-lesson-sidebar-hidden .darka-lesson-sidebar {
padding: 20px 8px;
overflow: hidden;
}
.darka-lesson-layout.darka-lesson-sidebar-hidden .darka-lesson-sidebar > *:not(.darka-sidebar-toggle-row) {
display: none;
}
/* NOVO: configuração de admin "Posição da Sidebar da Playlist"
(`general.lesson_sidebar_position`) — 'left' aplica esta classe (ver
`LessonPage::render()`). Usa `order` (CSS Grid também respeita
`order` no posicionamento automático dos itens) para trocar
visualmente Player e Sidebar da aula SEM mudar a ordem no DOM — a
Sidebar PRINCIPAL da app shell (`.darka-sidebar`) fica de fora desta
troca, é um grid diferente (`.darka-app-shell`), não afetado. */
.darka-lesson-layout.darka-playlist-left {
grid-template-columns: 360px minmax(0, 1fr);
}
.darka-lesson-layout.darka-playlist-left .darka-lesson-sidebar {
order: 1;
border-left: none;
border-right: 1px solid var(--darka-border);
}
.darka-lesson-layout.darka-playlist-left .darka-lesson-main {
order: 2;
}
/* NOVO: combinação "Playlist à esquerda" + "Sidebar oculta" — precisa
de uma regra própria (3 classes, mais específica do que as duas
regras de 2 classes acima) para a faixa estreita (56px) aparecer do
lado esquerdo em vez do direito. */
.darka-lesson-layout.darka-playlist-left.darka-lesson-sidebar-hidden {
grid-template-columns: 56px minmax(0, 1fr);
}
/* AJUSTADO: `max-width` sozinho não centra um bloco — sem `margin: 0
auto`, `.darka-lesson-main` ficava encostado à esquerda da coluna do
grid (`.darka-lesson-layout`), com um vão vazio à direita em ecrãs
largos, antes da Sidebar. Agora toda a área principal (player,
título, descrição, ações, navegação, quiz, comentários — tudo o que
já vive dentro de `main_area()`) fica centralizada como um bloco só,
com a mesma largura máxima profissional de sempre. Continua
responsivo sem precisar de media query própria: abaixo de 900px
(largura do container), o `max-width` deixa de ter efeito e ocupa a
coluna toda. A Sidebar, à parte, não foi tocada. */
/* CORRIGIDO: a percentagem configurável no admin ("Largura do Player")
estava a ser aplicada só ao `.darka-lesson-player` (o vídeo em si), que
fica dentro desta caixa — mas esta caixa tinha um `max-width` fixo
(1100px), alheio à definição do admin. Resultado visível: mudar a
percentagem no painel não tinha nenhum efeito prático, porque a caixa
que envolve o Player + abas (Descrição/Material) + navegação +
comentários continuava sempre do mesmo tamanho. Agora é esta caixa
(`.darka-lesson-main`) que recebe a percentagem, via `style` inline
gerado em `LessonPage::main_area()` a partir de
`general.lesson_player_width` (60/70/80/90/100%, por omissão 80%),
calculada sobre a largura da coluna de conteúdo do grid
(`.darka-lesson-layout`), ao lado da Sidebar — exatamente a "área
principal de conteúdo" pedida. O `max-width: 1400px` aqui é só um
valor de resguardo generoso para o caso (não esperado) de o atributo
`style` não chegar a ser aplicado. */
/* CORRIGIDO (causa raiz confirmada por medição real em DevTools — largura
do container do Player a colapsar ao trocar de aba/aula, em ecrãs
≥901px): `.darka-lesson-main` nunca tinha um `width` explícito, só
`max-width` — a largura real ficava dependente do navegador resolver
"auto" através do algoritmo de stretch do grid. Este elemento é
também um contentor de scroll (`overflow-y:auto`, `height:100%` de um
ancestral com altura fixa — ver a arquitetura "só o centro rola" mais
abaixo) e contém, dois níveis adentro, um vídeo com `aspect-ratio:16/9`.
Essa combinação (bloco de largura "auto", contentor de scroll com
altura limitada, descendente com aspect-ratio) é resolvida de forma
ambígua por alguns motores de layout: em vez de esticar sempre até
`max-width`, o motor tentava encontrar uma largura que "encaixasse"
numa altura implícita — e essa altura implícita muda consoante o
conteúdo da aba visível (Descrição mais alto, Material mais baixo),
explicando por que só a troca de aba/aula disparava o colapso, e só
em ecrãs onde a regra de scroll interno está ativa (confirmado: não
ocorria em mobile, onde essa regra não existe). Dar-lhe um `width`
explícito remove essa ambiguidade — a largura deixa de depender do
cálculo "auto" e passa a ser sempre 100% da coluna do grid,
independentemente da altura do conteúdo. */
/* AJUSTADO (correções finais 1.0 — Ponto 4, "área abaixo dos
comentários muito apertada"): `.darka-lesson-comments` (a secção de
comentários) é o último elemento desta coluna — o padding inferior
de apenas 32px era literalmente todo o espaço de respiro depois do
último comentário/formulário de resposta, tornando desconfortável
ler, responder e rolar até ao fim. Não altera o Player, a Sidebar
nem as abas — só o espaço no final da coluna rolável. */
.darka-lesson-main {
width: 100%;
padding: 24px 32px 120px;
max-width: 1400px;
margin: 0 auto;
}
/* AJUSTADO: o Player deixou de ter a sua própria percentagem — ocupa
sempre 100% da caixa `.darka-lesson-main`, que é quem agora responde à
definição do admin (ver acima). Continua com a mesma aparência de
sempre (fundo preto, cantos arredondados, proporção 16:9 via
`aspect-ratio` abaixo). Player Universal (providers, Bunny.net, etc.)
não foi tocado — só este dimensionamento. */
.darka-lesson-player {
background: #000;
border-radius: 12px;
overflow: hidden;
width: 100%;
margin: 0 0 20px;
}
/* AJUSTADO (Revisão Geral e Otimização Responsiva — Secção 15/16:
"padronizar breakpoints, não multiplicar exceções pontuais"): esta
regra vivia isolada aqui, a 640px — dobrada para dentro do bloco
principal de mobile/tablet (900px, mais abaixo no ficheiro), o mesmo
breakpoint usado por toda a "app shell". A caixa inteira (Player +
abas + comentários) usa sempre a largura disponível em qualquer
ecrã ≤900px, independentemente da percentagem configurada para
desktop — nunca fica artificialmente pequena num tablet ou
telemóvel. `!important` é necessário porque a largura de desktop
vem de um `style` inline (maior prioridade de cascata do que
qualquer regra de folha de estilo comum), a única exceção
deliberada a esta prática no projeto. */
.darka-lesson-player img,
.darka-lesson-player video,
.darka-lesson-player iframe,
.darka-video-embed iframe {
width: 100%;
aspect-ratio: 16 / 9;
border: none;
display: block;
background: #000;
}
/* NOVO (Player Universal): mensagem clara quando um vídeo não consegue
carregar (ver video-player.js) — nunca um espaço vazio silencioso. */
.darka-video-error {
margin: 0;
padding: 14px 16px;
background: rgba(239, 68, 68, 0.12);
color: #fca5a5;
font-size: var(--darka-text-xs);
text-align: center;
}
.darka-pdf-frame {
width: 100%;
height: 70vh;
border: none;
}
.darka-lesson-description {
line-height: 1.7;
margin-bottom: 24px;
}
/* NOVO (pedido "Melhoria da Área de Descrição da Aula no Front-end"):
conteúdo rico (agora vindo de um editor WYSIWYG no admin, ver
`Components::sanitize_rich_content()`) — imagens/vídeos/áudios/
`