/*
 * DoceLar — CSS das rotas públicas: páginas legais e o wrapper das telas de
 * acesso (login, cadastro e senha: dl-f05.css).
 * Consome exclusivamente var(--dl-*) de dl-tokens.css; os componentes de UI já
 * vêm estilizados por dl-components.css — aqui só o que é específico de tela.
 */

@layer dl-telas {

/* ------------------------------------------------------------------ */
/* Paginação                                                           */
/* ------------------------------------------------------------------ */
.dl-paginacao {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.dl-paginacao__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--dl-branco);
    color: var(--dl-azul-marinho);
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
}

.dl-paginacao__item--ativo {
    background: var(--dl-azul);
    color: var(--dl-branco);
}

/* Login, cadastro e senha: dl-f05.css (F5). */

/* ------------------------------------------------------------------ */
/* Telas de acesso — wrapper do split desktop.                         */
/* No mobile o wrapper não gera caixa e o painel de marca não existe;  */
/* o layout de sempre segue intacto. Quem monta o split é a camada     */
/* desktop (dl-desktop.css, >=1024px).                                 */
/* ------------------------------------------------------------------ */
.dl-acesso {
    display: contents;
}

.dl-acesso__painel {
    display: none;
}

/* "Voltar para o login" dos cadastros: no mobile quem volta é a seta do header. */
.dl-acesso .dl-acesso__voltar-login {
    display: none;
}

/* ------------------------------------------------------------------ */
/* Páginas legais (Política de Privacidade / Termos de Uso).           */
/* Texto corrido longo: títulos em escala própria, menores que a       */
/* global de dl-tokens. Medida de ~70ch para leitura confortável no    */
/* desktop; no mobile o container já limita.                           */
/* ------------------------------------------------------------------ */
.dl-legal {
    padding-block: 24px 48px;
}

.dl-legal .dl-legal__titulo,
.dl-legal h2 {
    font-family: var(--dl-fonte);
}

.dl-legal__titulo {
    margin: 0 0 4px;
    font-size: var(--dl-h2-tamanho);
    font-weight: 600;
}

.dl-legal__atualizacao {
    margin: 0 0 24px;
    font-size: 13px;
    color: var(--dl-cinza-50);
}

.dl-legal__secao {
    max-width: 70ch;
}

.dl-legal__secao h2 {
    margin: 28px 0 8px;
    font-size: 17px;
    font-weight: 600;
}

.dl-legal__secao p {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 24px;
    color: var(--dl-cinza-70);
}

}