/* Estilos compartilhados pelas páginas standalone de autenticação
   (esqueci_senha, verificar_codigo, nova_senha, novo_usuario).
   Cada página mantém no seu próprio <style> apenas o que for
   genuinamente específico dela (overrides de tamanho/espaçamento e
   componentes exclusivos como .otp-wrap, .strength-bar, .section-sep). */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
    font-family: var(--font-body);
    background: var(--color-surface-sunken);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
    -webkit-font-smoothing: antialiased;
}

.auth-card {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    border: 0.5px solid var(--color-border);
    box-shadow: var(--shadow-md);
    padding: 44px 40px;
    width: 100%;
    max-width: 400px;
    animation: rise 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 32px; }

.auth-mark {
    width: 34px; height: 34px;
    background: var(--color-primary);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 15px; font-weight: 600; color: #fff;
    flex-shrink: 0;
}

.auth-brand-text { font-family: var(--font-display); font-size: 13px; color: var(--color-ink-tertiary); }

.auth-heading { margin-bottom: 28px; }

.auth-heading h1 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-ink);
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}

.auth-heading p { font-size: var(--text-sm); color: var(--color-ink-tertiary); line-height: 1.6; }

.field { margin-bottom: 18px; }

.field-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-ink-secondary);
    margin-bottom: 6px;
}

.field-input {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-ink);
    background: var(--color-surface-raised);
    border: 0.5px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    width: 100%;
    outline: none;
    transition: border-color 150ms, box-shadow 150ms, background 150ms;
}

.field-input:focus {
    background: var(--color-surface);
    border-color: var(--color-primary-mid);
    box-shadow: 0 0 0 3px var(--color-primary-bg);
}

.field-input::placeholder { color: var(--color-ink-disabled); }

.field-hint { font-size: var(--text-xs); color: var(--color-ink-tertiary); margin-top: 5px; display: block; }

.auth-footer {
    text-align: center;
    margin-top: 20px;
}

.auth-link {
    font-size: var(--text-sm);
    color: var(--color-ink-tertiary);
    text-decoration: none;
    transition: color 150ms;
}

.auth-link:hover { color: var(--color-primary); }

.auth-stepper { display:flex; align-items:center; margin-bottom:24px; }
.step-node { display:flex; flex-direction:column; align-items:center; gap:4px; }
.step-circle {
    width:28px; height:28px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:600;
    border:1.5px solid var(--color-border-strong);
    color:var(--color-ink-tertiary); background:var(--color-surface);
}
.step-node.done  .step-circle { background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
.step-node.active .step-circle { border-color:var(--color-primary); color:var(--color-primary); }
.step-lbl { font-size:10px; color:var(--color-ink-tertiary); white-space:nowrap; }
.step-node.active .step-lbl { color:var(--color-primary); font-weight:500; }
.step-line { flex:1; height:1.5px; background:var(--color-border); margin:0 6px; margin-bottom:16px; }
.step-line.done { background:var(--color-primary); }

.flash {
    padding: 10px 12px;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    line-height: 1.5;
    margin-bottom: 20px;
}

.flash-error   { background: var(--color-danger-bg);  color: var(--color-danger-dark);   border-left: 3px solid var(--color-danger); }
.flash-success { background: var(--color-success-bg); color: var(--color-primary-dark);  border-left: 3px solid var(--color-primary); }