/* login-acesso.css — só o que é EXCLUSIVO da tela de entrada (PRD-0017, TASK-006).
   O resto (caixinhas de código, códigos de recuperação, regras de senha, passos)
   é compartilhado e mora em app.css, seção "IDENTIDADE (PRD-0017)".
   Só var(--sb-*); a única cor fixa é o QR (preto sobre branco nos dois temas —
   o leitor do celular precisa: 21:1). */

/* Caixa larga nas telas com QR, códigos e formulário de pedido. */
.sb-login-caixa.sb-login-larga { max-width: 460px; }

/* Ritmo vertical entre os blocos de cada tela. */
.sb-login-caixa section > * + * { margin-top: var(--sb-e-4); }
.sb-login-caixa section > .sb-login-titulo + .sb-login-subtitulo { margin-top: 0; }
.sb-login-caixa section > .sb-passos + .sb-login-titulo { margin-top: 0; }
.sb-login-caixa section > .sb-login-subtitulo { margin-bottom: 0; }
.sb-login-caixa section > .sb-login-titulo:first-child + .sb-login-subtitulo { margin-bottom: 0; }
/* O título recebe foco só por programa (troca de tela, para o leitor de tela anunciar) — não é clicável, então
   não ganha contorno (mesmo padrão do .man-artigo > h2 do manual). */
.sb-login-caixa .sb-login-titulo:focus,
.sb-login-caixa .sb-login-titulo:focus-visible { outline: none; }
.sb-login-texto { color: var(--sb-tinta-2); font-size: var(--sb-t-14); line-height: 1.5; }
.sb-login-acoes { display: flex; flex-direction: column; gap: var(--sb-e-2); }
.sb-login-acoes .sb-login-botao { margin-top: 0; }
.sb-login-caixa .sb-alerta > svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.sb-login-mono { font-family: var(--sb-mono); letter-spacing: .04em; }

/* Links de rodapé: botões com cara de link, alvo de toque cheio. */
.sb-login-links {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--sb-e-4);
}
.sb-login-links > button, .sb-login-links > a {
  min-height: var(--sb-toque); display: inline-flex; align-items: center;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--sb-t-13); font-weight: 550;
  color: var(--sb-link); text-decoration: none;
}
.sb-login-links > button:hover, .sb-login-links > a:hover { text-decoration: underline; }
.sb-login-links > button[aria-busy="true"] { opacity: .6; cursor: progress; }

/* Ícone grande do topo da tela (escudo, perigo, ok) — SVG do sbIcone. */
.sb-login-ico {
  width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: var(--sb-raio-pill); background: var(--sb-acento-fraco); color: var(--sb-acento-tinta);
  margin-bottom: var(--sb-e-3);
}
.sb-login-ico svg { width: 24px; height: 24px; stroke-width: 1.8; }
.sb-login-ico-perigo { background: var(--sb-perigo-f); color: var(--sb-perigo); }
.sb-login-ico-ok { background: var(--sb-ok-f); color: var(--sb-ok); }

/* "Guardei os códigos…": o rótulo inteiro é o alvo (44px); a caixa não herda o
   min-height de input do login (app.css, ≤860px). */
.sb-login-caixa .sb-check-bloco { min-height: var(--sb-toque); align-items: center; }
.sb-login-caixa .sb-check-bloco > input { min-height: 0; margin: 0; width: 18px; height: 18px; flex: 0 0 auto; }

/* Senha com "Mostrar". */
.sb-senha-linha { display: flex; gap: var(--sb-e-2); align-items: stretch; }
.sb-senha-linha > input { flex: 1; min-width: 0; }
.sb-senha-linha > .btn { flex: 0 0 auto; min-width: 72px; }

/* QR + chave. */
.sb-qr-bloco { display: flex; gap: var(--sb-e-5); align-items: flex-start; }
.sb-qr {
  flex: 0 0 auto; width: 180px; height: 180px; padding: 12px; box-sizing: content-box;
  background: #fff; border: 1px solid var(--sb-linha); border-radius: var(--sb-raio);
}
.sb-qr svg { display: block; width: 100%; height: 100%; }
.sb-qr .sb-tabela-wrap { padding: 0 !important; border: 0; background: none; }
.sb-chave-bloco { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sb-e-2); min-width: 0; }
.sb-chave {
  display: block; max-width: 100%; padding: var(--sb-e-2) var(--sb-e-3);
  font: 600 var(--sb-t-14)/1.5 var(--sb-mono); letter-spacing: .04em; color: var(--sb-tinta);
  background: var(--sb-neutro-f); border-radius: var(--sb-raio); overflow-wrap: anywhere;
}
.sb-chave:empty { display: none; }

/* "Adicionar no aplicativo deste celular": só no celular. */
.sb-otpauth { display: none !important; }
@media (max-width: 860px) {
  .sb-otpauth:not([hidden]) { display: inline-flex !important; justify-content: center; align-items: center; }
  .sb-chave-bloco .btn { min-height: var(--sb-toque); }
  .sb-senha-linha > .btn { min-height: var(--sb-toque); }
}

/* Celular estreito: 6 caixinhas em 295px úteis a 375px; QR empilha; botões 100%. */
@media (max-width: 420px) {
  .sb-login-pagina { padding: var(--sb-e-4); }
  .sb-login-caixa { padding: var(--sb-e-6) var(--sb-e-5); }
  .sb-qr-bloco { flex-direction: column; align-items: center; }
  .sb-chave-bloco { align-items: stretch; width: 100%; }
  .sb-chave-bloco .btn, .sb-login-caixa .btn { width: 100%; justify-content: center; }
  .sb-senha-linha > .btn { width: auto; }
}