/* ==========================================================================
   Enquadramento das telas do aluno — casca compartilhada

   Desenho aprovado pelo dono do produto a partir de `/aluno/foruns`: superfície
   de fundo, título centralizado e FORA do painel, botão de voltar à esquerda,
   cantos superiores do painel arredondados e sombra dando o contorno.

   Estas classes nasceram como `.aluno-forum-*` dentro de `Pages/Forum/forum.css`
   e foram promovidas para cá quando o mesmo enquadramento passou a valer para
   8 telas. Duplicar o desenho por tela é exatamente o que este trabalho combate:
   no `forum.css` ficou só o que é do fórum (card de tópico, comentário, conteúdo
   do post, FAB).

   Quem escreve estas classes é o componente
   `Components/TiivoComponentes/Aluno/PaginaAluno.razor` — as telas não as
   repetem à mão.

   Cor sempre por token do tema (var(--mud-palette-*)) — nunca hex literal, que
   é o que impede tema escuro e white label.
   ========================================================================== */

.aluno-pagina-background {
    background-color: var(--mud-palette-background);
    width: 100%;
    display: block;
}

/* O painel desce até o fim da página. O `min-height: 100vh` é o que o faz
   encostar embaixo mesmo com pouco conteúdo; sem ele a superfície parava no fim
   da lista e sobrava fundo por baixo.

   A sombra SOBE (-2px) de propósito: o painel é full-bleed e desce até o fim da
   página, então a única aresta visível é a de cima — uma sombra descendente
   ficaria escondida atrás do próprio painel. Com Background e Surface os dois em
   branco puro no tema claro, é ela que dá o contorno. */
.aluno-pagina-painel {
    margin-top: 15px;
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
    background-color: var(--mud-palette-surface);
    min-height: 100vh;
    padding: 32px 24px 100px 24px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
}

/* O topo é um MudStack Row de três colunas: voltar | título | ação da direita.
   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 deste arquivo (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: var(--mud-palette-text-primary)` alimenta o `Color="Color.Inherit"`
   dos botões, que no MudBlazor vira `color: inherit !important` — por isso
   precisa ser um token, não `#fff` fixo: o botão de voltar ficava branco sobre
   fundo claro no tema claro. */
.aluno-pagina-topo {
    padding: 24px 12px 6px 12px;
    color: var(--mud-palette-text-primary);
}

/* Ocupa o espaço entre as duas colunas de botão; `min-width: 0` deixa título
   longo quebrar em vez de esticar a linha. */
.aluno-pagina-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.

   Hoje o espelho é o CAMINHO ALTERNATIVO: por padrão a coluna da direita é o
   alternador de tema claro/escuro, que tem a mesma largura e portanto centraliza
   o título pelo mesmo mecanismo — só que ocupando o espaço com algo útil. O
   espelho continua aqui para quando a tela desligar o alternador
   (`MostrarAlternadorTema="false"`), e o alinhamento não pode depender disso. */
.aluno-pagina-topo-espelho {
    visibility: hidden;
    pointer-events: none;
}

/* No DESKTOP a MudAppBar do LayoutAluno já tem o alternador de tema — os dois juntos deixavam o
   mesmo botão em dois lugares da mesma tela. No mobile a appbar some por media query (mesmo
   breakpoint de 960px do LayoutAluno.css) e este vira o único, que é o motivo de ele existir.

   `visibility: hidden` e não `display: none` de propósito: o botão precisa continuar OCUPANDO a
   largura dele, senão o título perde a coluna que o equilibra e sai do centro. É exatamente o
   comportamento do espelho acima — no desktop o alternador simplesmente vira um espelho. */
@media (min-width: 960px) {
    .aluno-pagina-topo-acao {
        visibility: hidden;
        pointer-events: none;
    }
}

.aluno-pagina-topo-titulo {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    text-align: center;
    word-break: break-word;
}

.aluno-pagina-topo-subtitulo {
    margin: 6px 0 0;
    font-size: .9rem;
    color: var(--mud-palette-text-secondary);
    text-align: center;
}

@media (max-width: 600px) {
    .aluno-pagina-topo-titulo {
        font-size: 24px;
    }

    .aluno-pagina-painel {
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        padding: 24px 16px 100px 16px;
    }
}