/* QClave — telas de acesso (login, cadastro, verificação do código). Tema escuro: sem sessão,
   sem a troca de tema das telas internas. Regras de página ficam no <style> de cada template. */

.auth-container { min-height: calc(100vh - var(--nav-h)); }

/* 16px nos campos e botões: o Safari do iPhone dá zoom ao focar um campo menor que isso */
.auth-box input, .auth-box .submit-btn, .auth-box .pw-toggle { font-size: 16px; }
.auth-box input { min-height: 48px; }
.auth-box .submit-btn { min-height: 48px; }

.pw-field { position: relative; }
.pw-field input { padding-right: 3.4rem; }
.pw-toggle {
    position: absolute; right: 0.3rem; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; border-radius: 8px; color: var(--muted); cursor: pointer;
}
.pw-toggle:hover, .pw-toggle:focus-visible { color: var(--text); }

.auth-footer a { display: inline-flex; align-items: center; min-height: 44px; }

/* Entrada com o Google: mesma altura de 48px dos campos e botões */
.google-btn {
    display: flex; align-items: center; justify-content: center; gap: 0.6rem;
    min-height: 48px; padding: 0.8rem 1rem; margin-bottom: 1.2rem;
    background: var(--surface2); color: var(--text);
    border: 1.5px solid var(--border); border-radius: 7px;
    font-family: var(--font-mono); font-size: 16px; font-weight: 600; text-decoration: none;
    transition: border-color 0.2s;
}
.google-btn:hover, .google-btn:focus-visible { border-color: var(--accent); }
.auth-divider {
    display: flex; align-items: center; gap: 0.8rem; margin: 0 0 1.2rem;
    font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.1em;
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.auth-box :focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }

@media (max-width: 767.98px) {
    .auth-container { align-items: flex-start; padding: 2rem 1rem; }
    .auth-box h1 { font-size: 1.6rem; }
    .form-card { padding: 1.4rem; }
}