/* Guia do Google Authenticator (0.15.1). Paleta Sálvia (src/marca.js). Celular primeiro; no computador, coluna de leitura. */
:root {
  --pr-fundo: #F4F7F3; --pr-superficie: #FFFFFF; --pr-texto: #14261D; --pr-texto-secundario: #4F6157; --pr-borda: #DCE5DE;
  --pr-borda-campo: #7E9488; --pr-primaria: #0F7A55; --pr-primaria-hover: #0B6B4A; --pr-texto-botao: #FFFFFF; --pr-destaque: #E9B949;
  --pr-texto-sobre-destaque: #2A1E00; --pr-destaque-suave: #E7F3EC; --pr-sucesso: #146C43; --pr-erro: #C0362C; --pr-aviso: #9A5B00;
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--pr-fundo); color: var(--pr-texto); font: 16px/1.55 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow-x: hidden; }
a { color: var(--pr-primaria); }
:focus-visible { outline: 3px solid var(--pr-primaria); outline-offset: 2px; border-radius: 6px; }
.pular { position: absolute; left: -9999px; top: 0; }
.pular:focus { left: 12px; top: 12px; background: var(--pr-superficie); padding: 8px 12px; border-radius: 8px; z-index: 5; }
.topo { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--pr-superficie); border-bottom: 1px solid var(--pr-borda); }
.logo { height: 34px; width: auto; }
.topo-area { color: var(--pr-texto-secundario); font-weight: 500; }
.guia { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; }
h1 { font-size: clamp(1.5rem, 4vw, 2.1rem); line-height: 1.2; margin: 0 0 8px; letter-spacing: -.01em; }
.sub { color: var(--pr-texto-secundario); margin: 0 0 20px; font-size: 1.05rem; }
.bloco { background: var(--pr-superficie); border: 1px solid var(--pr-borda); border-radius: 14px; padding: 18px 16px; margin-bottom: 14px; }
.bloco h2 { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; margin: 0 0 12px; }
.bloco p { margin: 0; }
.num { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--pr-destaque-suave); color: var(--pr-primaria); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 18px; border-radius: 10px; border: 1px solid var(--pr-primaria);
  background: var(--pr-superficie); color: var(--pr-primaria); font-weight: 600; text-decoration: none; }
.btn:hover { background: var(--pr-destaque-suave); }
.lista { margin: 0; padding-left: 20px; }
.lista li { margin-bottom: 8px; }
.voltar { margin-top: 20px; }
/* ---------- 0.15.1: Google Authenticator (lojas, passo a passo, aparelho) ----------
   data-aparelho no <html> (iphone, android ou computador) vem do JS da página. Sem JS: tudo como no computador. */
html:not([data-aparelho="iphone"]):not([data-aparelho="android"]) .so-ua-celular { display: none !important; }
html[data-aparelho="iphone"] .so-ua-computador, html[data-aparelho="android"] .so-ua-computador { display: none !important; }
.lojas-autenticador { margin: 14px 0 16px; padding: 14px; border-radius: 12px; background: var(--pr-destaque-suave); border: 1px solid var(--pr-borda); }
.lojas-titulo { margin: 0 0 10px; font-weight: 700; color: var(--pr-texto); }
.lojas { display: flex; flex-wrap: wrap; gap: 8px; }
.lojas .loja { flex: 1 1 160px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; text-align: center; }
html[data-aparelho="iphone"] .loja-iphone, html[data-aparelho="android"] .loja-android { order: -1; flex-basis: 100%; background: var(--pr-primaria); border-color: var(--pr-primaria); color: var(--pr-texto-botao); }
html[data-aparelho="iphone"] .loja-iphone:hover, html[data-aparelho="android"] .loja-android:hover { background: var(--pr-primaria-hover); color: var(--pr-texto-botao); }
.qr-loja { display: flex; align-items: center; gap: 14px; margin-top: 12px; font-size: .88rem; color: var(--pr-texto-secundario); }
.qr-loja img { flex: none; width: 112px; height: 112px; border-radius: 8px; border: 1px solid var(--pr-borda); background: #fff; image-rendering: pixelated; }
.qr-loja p { margin: 0; }
.passo-a-passo { padding-left: 0; list-style: none; counter-reset: passo; margin: 14px 0 16px; }
.passo-a-passo > li { counter-increment: passo; position: relative; padding: 2px 0 10px 40px; color: var(--pr-texto); }
.passo-a-passo > li::before { content: counter(passo); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--pr-primaria); color: var(--pr-texto-botao); font-weight: 700; font-size: .85rem; display: flex; align-items: center; justify-content: center; }
.qr-totp { margin: 0 0 12px; display: flex; align-items: center; gap: 14px; font-size: .88rem; color: var(--pr-texto-secundario); }
.qr-totp img { flex: none; width: 180px; height: 180px; border: 1px solid var(--pr-borda); border-radius: 10px; background: #fff; image-rendering: pixelated; }
.ajuda-codigo { margin: -6px 0 12px; font-size: .86rem; color: var(--pr-texto-secundario); }
.ajuda-codigo a { font-weight: 600; }
.usuario-oculto { position: absolute !important; left: -10000px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.motivo-estorno:empty { display: none; }
.copiar-chave { margin: 8px 0 14px; }