/*
 * Painel · estilos de acesso (entrar, código de verificação, boas-vindas, duas etapas, recuperar acesso) — pacote A1.
 * Mesmas regras do painel.css: só layout, tudo com var(--token); nada de cor escrita à mão, de @font-face ou de @import.
 * Este arquivo é só do pacote: o painel.css fica para o que é de todos.
 */

/* A página de acesso: marca no alto, cartão no meio, © embaixo. */
.acesso { gap: var(--espaco-6); padding: var(--espaco-12) var(--espaco-6); }
.acesso .entrar__marca { font: 700 28px/32px var(--font-titulo); }
.acesso__cartao { padding: var(--espaco-8); gap: var(--espaco-5); box-sizing: border-box; }
.acesso .acesso__cartao--440 { max-width: 440px; }
.acesso .acesso__cartao--480 { max-width: 480px; }
.acesso .acesso__cartao--520 { max-width: 520px; }
.acesso__rodape { margin: 0; text-align: center; font-size: 13px; line-height: 18px; color: var(--texto-2); }
.acesso__texto { margin: 0; color: var(--texto); }
.acesso__aviso[hidden] { display: none; }
.acesso .entrar__cartao > div[aria-live]:empty { display: none; }   /* a área de erro do núcleo, quando vazia, não ocupa espaço */

.acesso__link { align-self: center; min-height: var(--alvo-toque); display: inline-flex; align-items: center; font-weight: 600; }
.acesso__mostrar { min-height: var(--alvo-toque); padding: 0 var(--espaco-3); }
.acesso .ui-def dd { overflow-wrap: anywhere; }

/* Código de 6 dígitos */
.acesso__codigo { grid-template-columns: repeat(6, minmax(0, 48px)); justify-content: center; }
.acesso__codigo input { width: 100%; min-width: 0; }
.acesso__codigo--erro input { border: 2px solid var(--erro); }
.acesso__ajuda-codigo { text-align: center; }

/* Regras da senha */
.acesso__regras { display: flex; flex-direction: column; gap: var(--espaco-1); }
.acesso__regras-titulo { font-weight: 600; }
.acesso__regras .ui-checklist li { padding: var(--espaco-2) 0; }
.acesso__regras .ui-checklist li .ui-checklist__texto,
.acesso__regras .ui-checklist li[data-estado="feito"] .ui-checklist__texto { color: var(--texto-2); text-decoration: none; }

/* Ativação em 4 passos */
.acesso__passo { display: flex; flex-direction: column; gap: var(--espaco-2); }
.acesso__passo-rotulo { font-weight: 600; color: var(--texto-2); }
.acesso__barra--1 { width: 25%; }
.acesso__barra--2 { width: 50%; }
.acesso__barra--3 { width: 75%; }
.acesso__barra--4 { width: 100%; }
.acesso__acoes { display: flex; flex-wrap: wrap; gap: var(--espaco-3); align-items: center; justify-content: space-between; }
.acesso__acoes--fim { justify-content: flex-end; }
.acesso__acoes--inicio { justify-content: flex-start; }
.acesso .codigos { padding: 0; background: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espaco-2); }
.acesso .codigos li { font: 600 18px/24px var(--font-mono); padding: var(--espaco-2); border: 1px solid var(--linha); border-radius: var(--raio-1); text-align: center; overflow-wrap: anywhere; }

/* Celular: sem cartão, o conteúdo direto na página (protótipos P1 e P1b a 390 e 360 px). */
@media (max-width: 480px) {
  .acesso { justify-content: flex-start; padding: var(--espaco-8) var(--espaco-4) var(--espaco-6); }
  .acesso .acesso__cartao { border: 0; background: none; padding: 0; }
}

/* Ao imprimir os códigos, só o que importa: nada de botão e link. */
@media print {
  .acesso .ui-btn, .acesso__link, .ui-opcao-linha { display: none; }
}