/* =========================================================================
   TELA: LOGIN (admin/login.php)
   Única tela fora do shell: sem sidebar, a marca não tem onde se apresentar.
   Por isso o palco é dividido — à esquerda quem é e o que o painel faz, à
   direita a entrada. Abaixo de 900px a marca vira o cabeçalho do formulário.
   ========================================================================= */

.pg-login .auth {
    width: 100%;
    max-width: 400px;
    display: grid;
    gap: var(--sp-7);
    align-items: center;
}

.auth__brand { animation: sos-rise-in var(--dur-5) var(--ease-out) both; }
/* O raio de 22px é o da folha/moldura; superfície de conteúdo do painel é 18px. */
.pg-login .auth-card { animation-delay: 90ms; border-radius: var(--r-surface); }

.auth__logo {
    color: var(--ink-onnavy);
    font-size: var(--fs-3xl);
    margin: 0;
}

.auth__claim {
    margin: var(--sp-2) 0 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-md);
    letter-spacing: var(--tr-tight);
    line-height: var(--lh-snug);
    color: var(--ink-onnavy);
}

.auth__facts {
    list-style: none;
    margin: var(--sp-5) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.auth__facts li {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    color: var(--ink-onnavy-muted);
}
.auth__facts svg {
    width: 17px; height: 17px; flex: 0 0 17px;
    color: var(--orange-400);
}

/* O rótulo do formulário deixa de repetir a marca (ela está ao lado): vira o
   título do cartão, e não mais uma legenda apagada. */
.pg-login .auth-card h2 {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 700;
    letter-spacing: var(--tr-tight);
    color: var(--ink-strong);
    margin-bottom: var(--sp-5);
}

@media (min-width: 900px) {
    .pg-login .auth {
        max-width: 880px;
        grid-template-columns: minmax(0, 1fr) 400px;
        gap: var(--sp-16);
    }
    .auth__logo { font-size: var(--fs-4xl); }
    .auth__claim { font-size: var(--fs-lg); }
}

/* Em tela baixa (celular deitado) a lista de fatos empurraria o formulário
   para fora da dobra — a entrada vem primeiro. */
@media (max-width: 899px) and (max-height: 620px) {
    .auth__facts { display: none; }
}