/* Fórum do curso (Plano 03) — Fases 5 e 6.
MudBlazor resolve a estrutura; aqui ficam só os ajustes que ele não cobre:
o recuo de uma resposta, o corte do resumo do card e a tipografia do HTML do post. */
/* ------------------------------------------------------------------ enquadramento (área do aluno)
As telas de fórum do aluno seguem o mesmo desenho das outras telas dele: fundo escuro com a
onda animada, título centralizado em branco acima e o painel branco de cantos arredondados
descendo até o fim da página.
Referências, ambas em `PaginasAluno/Usuario/`:
`.aluno-perfil-background` ... fundo #030617 + `onda-background`
`.aluno-ranking-lista` ....... painel branco, raio 60px, `min-height: 100vh`
O `min-height: 100vh` é o que faz o painel encostar embaixo mesmo com pouco conteúdo; sem
ele o branco parava no fim da lista e sobrava fundo escuro.
Estas classes valem só para a área do aluno. As telas administrativas (`PaginasEmpresa/Forum`)
continuam no fundo padrão do `LayoutAplicativo`. */
.aluno-forum-background {
background: #030617;
width: 100%;
display: block;
}
.aluno-forum-painel {
margin-top: 15px;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
background: #fff;
min-height: 100vh;
padding: 32px 24px 100px 24px;
}
/* O topo é um MudStack Row de três colunas: voltar | título | espelho do voltar.
Quem alinha é o MudStack; esta classe só dá espaçamento e cor.
Nada de `display`/`flex-direction`/`align-items` aqui: seriam a mesma especificidade (0,1,0)
das classes do próprio MudStack, e como o MudBlazor.min.css é carregado DEPOIS do forum.css
(linhas 69 e 30 do App.razor) o empate se resolve por ordem de origem e o MudBlazor vence.
Foi exatamente o que quebrou a tentativa anterior com `position: absolute`: o MudIconButton
recebe a classe `mud-ripple`, que é `position: relative`, e o botão voltava para o fluxo.
`color: #fff` alimenta o `Color="Color.Inherit"` do botão, que no MudBlazor vira
`color: inherit !important`. */
.aluno-forum-topo {
padding: 24px 12px 6px 12px;
color: #fff;
}
/* Ocupa o espaço entre os dois botões; `min-width: 0` deixa título longo quebrar em vez de
esticar a linha. */
.aluno-forum-topo-centro {
flex-grow: 1;
min-width: 0;
}
/* Espelho invisível do botão de voltar, à direita. Reserva exatamente a MESMA largura que ele
ocupa à esquerda, então o bloco central fica centralizado em relação à tela — sem depender de
posicionamento absoluto nem de adivinhar a largura do MudIconButton em cada `Size`.
`visibility: hidden` já o tira da ordem de tabulação e da árvore de acessibilidade. */
.aluno-forum-topo-espelho {
visibility: hidden;
pointer-events: none;
}
.aluno-forum-topo-titulo {
margin: 0;
font-size: 32px;
font-weight: 700;
color: #fff;
text-align: center;
word-break: break-word;
}
.aluno-forum-topo-subtitulo {
margin: 6px 0 0;
font-size: .9rem;
color: rgba(255, 255, 255, .7);
text-align: center;
}
@media (max-width: 600px) {
.aluno-forum-topo-titulo {
font-size: 24px;
}
.aluno-forum-painel {
border-top-left-radius: 30px;
border-top-right-radius: 30px;
padding: 24px 16px 100px 16px;
}
}
/* ------------------------------------------------------------------ atalho flutuante
Convive com a tela de trilha, que empilha em três níveis:
.menu-navegacao ......... z-index 2147483647 (fixo, 70px de altura, embaixo)
PopupEtapaTrilha ........ z-index 9999 (dentro de .aluno-trilha-container)
BotaoEtapaTrilha ........ z-index 1
O FAB fica entre a etapa e o popup: sempre clicável sobre as etapas — que se deslocam até
±300px na horizontal e podem passar por baixo dele — e coberto quando um popup abre.
O `bottom` livra a barra de navegação. */
.forum-fab {
position: fixed;
right: 16px;
bottom: 86px; /* 70px do menu-navegacao + 16px de folga */
z-index: 500;
}
/* Em telas estreitas a amplitude do seno cai para 80px e as etapas ficam mais ao centro,
mas o menu continua com 70px — o afastamento é o mesmo. */
@media (max-width: 768px) {
.forum-fab {
right: 12px;
bottom: 82px;
}
}
/* ------------------------------------------------------------------ card do perfil
`.aluno-perfil-proxima-aula-icone` foi feito para (80x80, object-fit). O MudIcon
renderiza um