/* Documentos legais públicos — Termos de Participação e Aviso de Privacidade.
   Carregada SÓ nessas duas páginas (App\Controllers\DocumentoLegalController),
   sobre app.css.

   FOLHA PRÓPRIA, e não um bloco novo em app.css, pelo mesmo motivo que separa
   admin.css: são páginas de LEITURA LONGA, uma superfície que nenhuma tela da
   experiência tem. O que elas precisam — texto à esquerda, escala tipográfica de
   documento, listas com respiro — não serve a nenhuma outra tela, e app.css já é
   carregada em toda requisição, inclusive nas de jogo, que disputam cada
   milissegundo do Wi-Fi da feira.

   NADA AQUI REDEFINE TOKEN INSTITUCIONAL. Todas as cores vêm dos tokens de
   app.css: uma decisão de leitura destes documentos não pode repintar o painel
   do operador, que carrega a mesma folha base (é o incidente do Lote B).

   O ALVO É O CELULAR E O TOTEM. Quem abre estes textos está na fila, de pé, com
   o aparelho na mão — ou diante de uma TV touch. Daí o corpo de 1.05rem (e não
   letra miúda de rodapé), o alvo de toque de 2.75rem nos links de navegação e o
   texto alinhado à esquerda. */

/* O CHASSI DA PÁGINA MUDA, e isso não é estética.

   `.pagina` é `flex column` com `justify-content: center`, e `.conteudo` vem com
   `text-align: center` — as duas coisas certas para uma tela de uma pergunta e um
   botão. Num documento mais alto que a viewport, `justify-content: center` empurra
   o começo do conteúdo para FORA da área rolável pelo topo: o título e a
   identificação do controlador ficam inalcançáveis, e a página abre no meio da
   §3. Texto corrido centralizado, por sua vez, muda o ponto de partida de cada
   linha e é o pior caso conhecido de leitura longa. */
.pagina--documento .pagina {
    justify-content: flex-start;
}

.pagina--documento .conteudo {
    text-align: left;
}

.documento-legal {
    color: var(--cor-texto);
    font-size: 1.05rem;
    line-height: 1.65;
}

.documento-legal h1 {
    margin-bottom: 0.75rem;
}

.documento-legal h2 {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--cor-marrom);
    /* Espaço acima maior que abaixo: o título pertence ao que vem DEPOIS dele.
       Com o espaçamento simétrico, cada seção lia como um bloco solto. */
    margin: 2.25rem 0 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--cor-borda);
}

.documento-legal h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--cor-marrom);
    margin: 1.5rem 0 0.4rem;
}

.documento-legal p {
    margin: 0 0 1rem;
}

.documento-legal ul,
.documento-legal ol {
    margin: 0 0 1rem;
    /* Recuo pequeno: em tela estreita, cada rem de recuo sai da largura da linha,
       e estes documentos têm listas de quatro e cinco níveis de detalhe. */
    padding-left: 1.4rem;
}

.documento-legal li {
    margin-bottom: 0.6rem;
}

/* Identificação do controlador / realização.
   Um <dl>, e não um parágrafo: é um par rótulo-valor, e é a informação que
   alguém procura primeiro num documento destes. */
.documento-legal__evento {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--cor-marrom);
    margin: 0 0 1rem;
}

.documento-legal__identificacao {
    margin: 0 0 1.75rem;
    padding: 1rem 1.15rem;
    background: var(--cor-rose);
    border-left: 4px solid var(--cor-vermelho);
    border-radius: var(--raio);
    color: var(--cor-marrom);
}

.documento-legal__identificacao dt {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
}

.documento-legal__identificacao dd {
    margin: 0;
    line-height: 1.5;
}

/* Bloco de atenção dentro do texto (a estação é compartilhada). Fundo suave em
   vez de borda vermelha: é uma ressalva importante, não um erro — e a tela de
   alerta vermelho já significa outra coisa nesta aplicação. */
.documento-legal__destaque {
    margin: 0 0 1.25rem;
    padding: 1rem 1.15rem;
    background: var(--cor-fundo-suave);
    border: 1px solid var(--cor-borda-forte);
    border-radius: var(--raio);
}

.documento-legal__destaque p:last-child {
    margin-bottom: 0;
}

.documento-legal__remissao {
    margin-top: 1.75rem;
}

.documento-legal a {
    color: var(--cor-vermelho-medio);
    text-decoration: underline;
}

/* Navegação do rodapé. Dois links empilhados em tela estreita e lado a lado
   quando cabem, sempre com alvo de toque cheio: dois links colados numa tela
   sensível ao toque são dois erros de toque. */
.documento-legal__navegacao {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--cor-borda);
}

.documento-legal__navegacao a {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    font-weight: 600;
}