/* ==========================================================================
   Telas de erro (401, 403, 404, 500 e o genérico).

   O palco iluminado vem de tela-limpa.css, o mesmo da tela de login. Aqui fica
   só o que é do erro: o número, a frase e a saída.

   Quem cai aqui acabou de sair de uma tela do sistema, muitas vezes no meio de
   uma tarefa. A tela precisa dizer três coisas, nesta ordem: você continua no
   Xenios, foi isto que aconteceu, e é por aqui que se volta.
   ========================================================================== */

.xn-erro-pagina {
    /* Mais larga que o formulário de login (312px): aqui o conteúdo é frase, não
       campo, e uma linha de texto curta demais quebra em pedaços estranhos. */
    max-width: 400px;
    text-align: center;
}

/* ── O número ────────────────────────────────────────────────────────────
   Grande, mas em tinta fraca: é referência, não manchete. Quem chega quer ler
   o que houve — o código serve para dizer ao suporte, e para quem já sabe o
   que "404" significa reconhecer de longe.

   Sem `position: absolute` nem marca-d'água atrás do texto: sobrepor número
   translúcido a frase é exatamente o tipo de efeito que reprova em contraste. */
.xn-erro-pagina__codigo {
    margin: 0 0 var(--occ-space-2);
    font-size: 60px;
    font-weight: var(--occ-fw-bold);
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--occ-ink-faint);
    font-variant-numeric: tabular-nums;
}

/* O genérico não tem número; sem ele o título encosta na marca. */
.xn-erro-pagina__codigo:empty {
    display: none;
}

.xn-erro-pagina__titulo {
    margin: 0 0 var(--occ-space-3);
    font-size: var(--occ-fs-lg);
    font-weight: var(--occ-fw-semibold);
    line-height: var(--occ-lh-tight);
    letter-spacing: -.01em;
    color: var(--occ-ink);
    text-wrap: balance;
}

.xn-erro-pagina__texto {
    margin: 0;
    font-size: var(--occ-fs-base);
    line-height: var(--occ-lh-base);
    color: var(--occ-ink-soft);
    text-wrap: balance;
}

/* ── Código de referência (só no 500) ────────────────────────────────────
   O mesmo código que foi ao Telegram. É o que liga o relato do operador ao
   alerta certo do grupo, então precisa ser fácil de ler em voz alta e de
   selecionar com o mouse — daí a fonte monoespaçada e a superfície própria. */
.xn-erro-pagina__referencia {
    margin: var(--occ-space-5) 0 0;
    padding: var(--occ-space-3) var(--occ-space-4);
    background: var(--occ-surface);
    border: 1px solid var(--occ-line);
    border-radius: var(--occ-radius-xs);
    font-size: var(--occ-fs-sm);
    line-height: var(--occ-lh-base);
    color: var(--occ-ink-soft);
}

.xn-erro-pagina__referencia strong {
    display: block;
    margin-top: var(--occ-space-1);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--occ-fs-md);
    font-weight: var(--occ-fw-semibold);
    color: var(--occ-ink);
    letter-spacing: .02em;
    /* o operador vai ditar isto ao telefone ou colar num chamado */
    user-select: all;
}

/* ── A saída ─────────────────────────────────────────────────────────────
   Botão sólido, e não link de texto: numa tela sem mais nada para fazer, a
   única ação disponível deve parecer acionável. O `</br></br></br>` seguido de
   um link azul do tema antigo não parecia. */
.xn-erro-pagina__acao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    margin-top: var(--occ-space-6);
    padding: 0 var(--occ-space-6);
    border-radius: var(--occ-radius-xs);
    background: var(--occ-accent);
    color: #fff;
    font-size: var(--occ-fs-base);
    font-weight: var(--occ-fw-semibold);
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 10px 22px -12px rgba(28, 167, 167, .7);
    transition: filter .18s var(--occ-ease), transform .12s var(--occ-ease);
}

/* No escuro o teal clareia (#3cd0d0) e texto branco em cima dele cai para
   ~2,3:1. O texto escuro sobre o mesmo fundo dá 9:1. */
[data-color-theme="dark"] .xn-erro-pagina__acao {
    color: #0d2b2b;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 22px -12px rgba(60, 208, 208, .5);
}

.xn-erro-pagina__acao:hover {
    filter: brightness(1.07);
    color: #fff;
    text-decoration: none;
}

[data-color-theme="dark"] .xn-erro-pagina__acao:hover {
    color: #0d2b2b;
}

.xn-erro-pagina__acao:active {
    transform: translateY(1px);
}

@media (max-width: 480px) {
    .xn-erro-pagina__codigo {
        font-size: 48px;
    }
}