/* Digital / Face ID (js/bio.js): botao do login, balaozinho da logo e janelinha de pergunta. Tudo escondido ate o JS decidir mostrar. */

/* botao "Entrar com digital / Face ID" na tela de login (mesmas medidas do .btn-login) */
.btn-bio {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 137%; box-sizing: border-box; padding: 11px; margin: 0 0 13px;
  border-radius: 29px; border: 1.5px solid var(--acento, #f60); background: transparent; color: var(--acento, #f60);
  font-family: var(--font, Arial, sans-serif); font-size: 16px; font-weight: 600; cursor: pointer; letter-spacing: 0.2px; transition: 0.18s;
}
.btn-bio[hidden] { display: none; }
.btn-bio svg { width: 26px; height: 26px; fill: currentColor; flex: none; }
.btn-bio:hover:not(:disabled) { background: var(--acento-fundo, rgba(243, 124, 32, 0.12)); }
.btn-bio:disabled { opacity: 0.6; cursor: not-allowed; }

/* balaozinho que abre na logo do topo (so no app instalado) */
.bio-pop {
  position: fixed; z-index: 99998; min-width: 240px; padding: 6px; border-radius: 12px;
  background: #292b35; color: #fff; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.bio-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px;
  background: none; color: inherit; font: 500 14px Arial, sans-serif; text-align: left; cursor: pointer;
}
.bio-item:hover { background: rgba(255, 255, 255, 0.1); }
.bio-item svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
[data-tema="claro"] .bio-pop { background: #fff; color: #1b2230; border-color: #dfe7f1; box-shadow: 0 12px 32px rgba(20, 40, 80, 0.2); }
[data-tema="claro"] .bio-item:hover { background: rgba(31, 95, 174, 0.1); }

/* janelinha de pergunta / aviso */
.bio-ov { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, 0.55); }
.bio-box { width: 100%; max-width: 380px; padding: 20px; border-radius: 14px; background: #292b35; color: #fff; font-family: Arial, sans-serif; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45); box-sizing: border-box; }
.bio-box h3 { margin: 0 0 8px; font-size: 17px; color: #f37c20; }
.bio-box p { margin: 0 0 16px; font-size: 14px; line-height: 1.45; }
.bio-bts { display: flex; justify-content: flex-end; gap: 8px; }
.bio-b { height: 38px; padding: 0 16px; border-radius: 19px; border: 1px solid rgba(255, 255, 255, 0.25); background: transparent; color: inherit; font-size: 14px; cursor: pointer; }
.bio-b-ok { border-color: #f37c20; background: #f37c20; color: #fff; font-weight: 700; }
[data-tema="claro"] .bio-box { background: #fff; color: #1b2230; }
[data-tema="claro"] .bio-box h3 { color: #1f5fae; }
[data-tema="claro"] .bio-b { border-color: #c9d3e1; }
[data-tema="claro"] .bio-b-ok { border-color: #1f5fae; background: #1f5fae; color: #fff; }

/* login no celular em pe: a pagina usa initial-scale=0.5, entao tudo precisa ser maior (igual ao .btn-login e aos campos) */
@media screen and (max-width: 1000px) and (orientation: portrait) {
  .btn-bio { width: 90vw; height: 95px; padding: 0 26px; margin: 0 0 30px; font-size: 24px; border-radius: 50px; }
  .btn-bio svg { width: 48px; height: 48px; }
  body.pg-login .bio-box { max-width: 70vw; padding: 38px; border-radius: 30px; }
  body.pg-login .bio-box h3 { font-size: 36px; margin-bottom: 16px; }
  body.pg-login .bio-box p { font-size: 30px; margin-bottom: 30px; }
  body.pg-login .bio-b { height: 80px; padding: 0 44px; font-size: 30px; border-radius: 40px; }
}