/* ==========================================================================
   Konvolutt — páginas de acesso (login, cadastro, senha, confirmação)
   Carregada DEPOIS de app.css: só sobrepõe .login-* para alinhar com a página
   pública (home.css): creme, manchas de cor, contorno grosso, mascote.
   ========================================================================== */
.login-body {
  --kraft:        #e8d5b5;
  --mustard:      #e0a92a;
  --mustard-soft: #fbefcf;
  --coral-soft:   #fde6de;
  --cream:        #fbf7ee;
  --outline:      #13203a;
  padding: 7rem 0 3rem;
  background:
    radial-gradient(closest-side, var(--mustard-soft) 0 92%, transparent 100%) 92% -6% / 520px 440px no-repeat,
    radial-gradient(closest-side, var(--green-soft) 0 92%, transparent 100%) 4% 104% / 460px 380px no-repeat,
    radial-gradient(closest-side, var(--coral-soft) 0 92%, transparent 100%) -4% 34% / 260px 240px no-repeat,
    linear-gradient(180deg, var(--cream) 0%, var(--white) 100%);
}

/* Cartão ------------------------------------------------------------------ */
.login-card {
  position: relative;
  width: min(430px, calc(100% - 2rem));
  padding: 2.6rem 2rem 2rem;
  border: 3px solid var(--outline);
  border-radius: 22px;
  box-shadow: 10px 10px 0 var(--mustard);
  gap: .85rem;
}
.auth-mascote {
  position: absolute; left: 50%; top: -92px; width: 128px; height: auto;
  translate: -50% 0;
  filter: drop-shadow(0 10px 14px rgba(19,32,58,.18));
  animation: auth-bob 5s ease-in-out infinite;
}
@keyframes auth-bob { 0%, 100% { translate: -50% 0; } 50% { translate: -50% -8px; } }
.login-card .login-brand { display: flex; justify-content: center; }
.login-card .login-logo { height: 40px; }
.login-card h1 { font-size: 1.55rem; line-height: 1.15; letter-spacing: -.03em; color: var(--navy-deep); font-weight: 760; text-align: center; }
.login-card > .muted { text-align: center; }

/* Campos ------------------------------------------------------------------ */
.login-card label { gap: .35rem; font-weight: 650; color: var(--navy); }
.login-card input:not([type="radio"]) {
  padding: .7rem .85rem; border: 2px solid var(--line); border-radius: 12px; background: var(--white);
  font-weight: 500; color: var(--ink); transition: border-color .12s ease, box-shadow .12s ease;
}
.login-card input:not([type="radio"]):focus { outline: none; border-color: var(--outline); box-shadow: 0 0 0 4px var(--mustard-soft); }
/* 2ª etapa do login: código grande e centralizado; caixa "confiar neste aparelho" em linha */
.login-card label:has(.code-input) { align-items: center; }
.login-card label.check { flex-direction: row; align-items: center; justify-content: center; gap: .5rem; font-weight: 500; }
.login-card label.check input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--green); }
.login-card .choice legend { font-weight: 650; color: var(--navy); }
.login-card .choice label { border: 2px solid var(--line); border-radius: 14px; padding: .75rem .85rem; font-weight: 400; transition: border-color .12s ease, background .12s ease; }
.login-card .choice label:hover { border-color: var(--navy); }
.login-card .choice label:has(input:checked) { border-color: var(--outline); background: var(--mustard-soft); }
.login-card .choice input { accent-color: var(--green); }

/* Botões e links ---------------------------------------------------------- */
.login-card .btn { min-height: 46px; padding: .7rem 1.1rem; border-radius: 999px; font-weight: 700; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.login-card .btn:hover { transform: translateY(-1px); }
.login-card .btn-primary { background: var(--green); border-color: var(--green); color: var(--white); box-shadow: 0 8px 20px rgba(31,138,91,.28); }
.login-card .btn-primary:hover { background: #18764d; border-color: #18764d; box-shadow: 0 10px 24px rgba(31,138,91,.34); }
.login-card .btn:not(.btn-primary) { background: var(--white); border: 2px solid var(--navy); color: var(--navy); }
.login-card .btn:not(.btn-primary):hover { background: var(--navy); color: var(--white); }
.login-card .alert { border-radius: 12px; border-width: 2px; }
.login-links a { color: var(--green); }
.login-links a:hover { color: #18764d; }

@media (max-width: 640px) {
  .login-body { padding-top: 6rem; }
  .login-card { padding: 2.2rem 1.35rem 1.6rem; box-shadow: 7px 7px 0 var(--mustard); }
  .auth-mascote { width: 110px; top: -80px; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-mascote { animation: none; }
  .login-card .btn, .login-card input, .login-card .choice label { transition: none; }
}

/* Entrar com biometria: botão secundário sob o "Entrar" (só aparece em navegador que oferece) */
.login-card #btn-passkey[hidden], .login-card #passkey-error[hidden] { display: none; }