/*
 * conta.css — As páginas de conta com a cara nova
 *
 * Carrega-se DEPOIS do zeus.css, de quem herda os tokens. Não se inventam
 * cores aqui: quem manda continua a ser o tema da aplicação.
 *
 * Porque é que isto é um ficheiro à parte e não uma reescrita das páginas:
 * o registo, a recuperação e a nova palavra-passe têm o JavaScript preso a
 * nomes de classes e de campos (`.passo-conteudo.ativo`, `.recado.erro`,
 * `#reg-username`…). Trocar o aspecto sem lhes tocar é mudar a folha de
 * estilo; reescrever o HTML era arriscar partir o que já funciona.
 */

/* ── moldura ──────────────────────────────────────────────────────── */
.container-focado {
    max-width: 680px;
    margin: 0 auto;
    padding: 48px 24px 32px;
}

.auth-container {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    padding: 30px;
}

.section-header { margin-bottom: 26px; }
.section-header h2 {
    font-family: var(--f-display);
    font-size: 26px;
    color: var(--ink);
    margin-bottom: 8px;
}
.section-header p { color: var(--muted); font-size: 15px; }
.text-center { text-align: center; }

/* ── passos do registo ────────────────────────────────────────────── */
.passos-indicador {
    display: flex;
    gap: 8px;
    margin-bottom: 28px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.passo-item {
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--muted);
    padding-bottom: 8px;
    border-bottom: 2px solid transparent;
    margin-bottom: -15px;
}
.passo-item.ativo { color: var(--accent-ink); border-bottom-color: var(--accent); }

/* O JavaScript liga e desliga os passos por esta classe — não mexer. */
.passo-conteudo { display: none; }
.passo-conteudo.ativo { display: block; }

/* ── campos ───────────────────────────────────────────────────────── */
.form-row { display: flex; gap: 14px; flex-wrap: wrap; }
.form-row > * { flex: 1 1 220px; }

.input-group { margin-bottom: 16px; }
.input-group label {
    display: block;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 5px;
}
.input-group input,
.input-group select {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: var(--r-control);
    background: var(--field);
    color: var(--ink);
    font-family: inherit;
    font-size: 15px;
}
.input-group input:focus,
.input-group select:focus {
    outline: 2px solid var(--accent-soft);
    border-color: var(--accent);
}
.input-group input::placeholder { color: var(--muted); }

.checkbox-group { display: flex; align-items: flex-start; gap: 9px; }
.checkbox-group input { width: auto; margin-top: 3px; accent-color: var(--accent); }
.label-inline { font-size: 14px; color: var(--ink2); margin: 0 !important; }

.aviso-campo {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: var(--muted);
    min-height: 16px;
}
.aviso-campo.ok { color: var(--positive); }
.aviso-campo.erro { color: var(--warm); }

/* ── recados ──────────────────────────────────────────────────────── */
.recado {
    display: none;
    margin-bottom: 16px;
    padding: 11px 14px;
    border-radius: var(--r-control);
    font-size: 14px;
    background: var(--surface2);
    color: var(--ink2);
}
.recado.erro { background: var(--warm-soft); color: var(--warm); border: 1px solid var(--warm-border); }
.recado.ok   { background: var(--pos-soft); color: var(--positive); }
.recado.info { background: var(--surface2); color: var(--ink2); }

/* ── caixas de destaque ───────────────────────────────────────────── */
.disclaimer-box {
    border-radius: var(--r-card);
    padding: 18px 20px;
    margin-bottom: 18px;
    background: var(--surface2);
    border: 1px solid var(--border);
}
.disclaimer-box strong { display: block; margin-bottom: 8px; color: var(--ink); font-size: 15px; }
.disclaimer-box p { font-size: 14px; color: var(--ink2); }
.disclaimer-box p + p { margin-top: 9px; }
.disclaimer-box a { color: var(--accent-ink); }

.disclaimer-box.sucesso { background: var(--pos-soft); border-color: transparent; }
.disclaimer-box.sucesso strong { color: var(--positive); }

.disclaimer-box.aviso { background: var(--warm-soft); border-color: var(--warm-border); }
.disclaimer-box.aviso strong { color: var(--warm); }

.destaque-inline {
    font-family: var(--f-mono);
    font-size: 14px;
    color: var(--ink);
    background: var(--surface);
    padding: 1px 6px;
    border-radius: 5px;
}

/* ── botões ───────────────────────────────────────────────────────── */
.btn-auth {
    display: inline-block;
    width: 100%;
    padding: 12px 20px;
    border: 1px solid transparent;
    border-radius: var(--r-control);
    background: var(--accent);
    color: var(--on-accent);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.btn-auth:hover { background: var(--accent-ink); }
.btn-auth:disabled { opacity: .55; cursor: default; }

/* O "voltar" não compete com a acção principal ao lado dele. */
.btn-auth.voltar {
    background: var(--surface);
    color: var(--ink2);
    border-color: var(--border2);
}
.btn-auth.voltar:hover { background: var(--surface2); }
.voltar-largo { margin-top: 6px; }

.nota-rodape { margin-top: 14px; font-size: 13px; color: var(--muted); text-align: center; }
.nota-rodape a { color: var(--accent-ink); }

@media (max-width: 620px) {
    .container-focado { padding: 28px 16px; }
    .auth-container { padding: 22px 18px; }
    .form-row { gap: 0; }
}