/* AyuTech — Central de Tarefas: páginas de acesso (entrar, 2FA, ativação, alterar senha).
   Usa as cores, a fonte e os componentes de estilo.css; aqui ficam só o layout e os detalhes destas páginas. */

@import url("estilo.css");

html, body { height: auto; min-height: 100%; overflow: auto; }
.pagina-acesso {
  display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 1.5rem 1rem;
  background: radial-gradient(60rem 30rem at 50% -10%, var(--vermelho-suave), transparent 70%), var(--fundo);
}
.acesso { width: 100%; max-width: 430px; }
.acesso.largo { max-width: 540px; }
.marca-acesso { display: flex; align-items: center; justify-content: center; gap: .8rem; margin-bottom: 1.5rem; color: var(--texto-forte); }
.marca-acesso .marca-kanji { width: 52px; height: 52px; }
.marca-acesso .marca-divisor { height: 40px; }
.marca-acesso .marca-texto strong { font-size: 1.35rem; }
.marca-acesso .marca-texto small { font-size: .78rem; }
.acesso .cartao { margin-bottom: 0; }
.acesso .cartao-corpo { padding: 1.75rem; }
.acesso h1 { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; font-size: 1.25rem; }
.acesso h1 .icone { color: var(--vermelho-vivo); }
.acesso .subtitulo { margin: 0 0 1.25rem; }
.acesso .subtitulo code, .acesso .ajuda code { font-size: .85em; padding: .05rem .35rem; border-radius: 5px; background: var(--afundado); }
.acesso .ajuda.antes-campos { margin: -.5rem 0 1rem; }
.acesso .campo input { width: 100%; }
.acesso .botao.largo { margin-top: .5rem; }
.rodape-acesso { margin-top: 1rem; text-align: center; font-size: .8rem; color: var(--texto-suave); }

.alerta.erro { background: var(--erro-fundo); color: var(--erro); }
.alerta.aviso { background: var(--aviso-fundo); color: var(--aviso); }
.alerta.sucesso { background: var(--ok-fundo); color: var(--ok); }
.alerta span { flex: 1; }

/* Etapas da ativação */
.passos { display: flex; gap: .35rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.passos li { display: inline-flex; align-items: center; gap: .35rem; flex: 1; padding: .35rem .5rem; border-radius: 999px; background: var(--realce); color: var(--texto-suave); font-size: .76rem; font-weight: 500; }
.passos li span { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--neutro-fundo); font-size: .7rem; font-weight: 700; }
.passos li.atual { background: var(--vermelho-suave); color: var(--texto-forte); box-shadow: inset 0 0 0 1px var(--vermelho); }
.passos li.atual span { background: var(--vermelho); color: #fff; }
.passos li.feito span { background: var(--ok); color: #fff; }

/* QR Code: fundo branco também no tema escuro, para a câmera ler. */
.qr { width: 216px; margin: 0 auto 1rem; padding: 10px; border-radius: 14px; background: #fff; }
.qr svg { display: block; width: 100%; height: auto; }
.chave-manual {
  margin: .35rem 0 1.1rem; padding: .55rem .75rem; border: 1px dashed var(--borda-forte); border-radius: var(--raio-pequeno);
  background: var(--afundado); font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .9rem;
  letter-spacing: .04em; text-align: center; word-break: break-all; user-select: all;
}
.codigos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.codigos li {
  padding: .5rem; border: 1px solid var(--borda); border-radius: var(--raio-pequeno); background: var(--afundado);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .92rem; text-align: center; user-select: all;
}
.botoes-acesso { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-top: 1.25rem; }
.vazio-acesso { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: .5rem 0; text-align: center; }
.vazio-acesso .icone { width: 32px; height: 32px; color: var(--vermelho-vivo); }
.vazio-acesso h1 { justify-content: center; }
.vazio-acesso p { color: var(--texto-suave); }

@media (max-width: 480px) {
  .acesso .cartao-corpo { padding: 1.25rem; }
  .passos li { font-size: .7rem; padding: .3rem .4rem; }
}