diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 1d9d8e4..6ed5048 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -72,6 +72,9 @@ jobs:
       - name: Testes das mascaras (JavaScript)
         run: node tests/js/masks.test.js
 
+      - name: Testes do envio de formulario (JavaScript)
+        run: node tests/js/forms.test.js
+
   # o public/js/masks.js e versionado e gerado do src/ts/masks.ts: se alguem mexer no .ts e esquecer
   # de rodar o tsc (ou editar o .js na mao), o compilado deixa de bater com o fonte e o job falha.
   mascaras:
diff --git a/CLAUDE.md b/CLAUDE.md
index 2c8eb99..3d0194c 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -35,7 +35,7 @@ Banco: `mysql -u root -p < database/schema.sql` em instalação nova. Banco já
 
 **Padrão de controller** — cada rota tem um `renderX()` público: no GET chama `View::render(...)`, no POST delega para um `handleX()` privado. Todo `handle*` começa com `Csrf::verify()` (aborta com 403). Rotas privadas começam com `$merchantId = $this->authGuard()`; o `merchant_id` vem **sempre da sessão**, nunca do formulário, e todo model filtra por ele (isolamento entre lojas).
 
-**Post/Redirect/Get com códigos de flash** — handlers terminam com `redirect('rota', ['error' => 'codigo'])` ou `['success' => 'codigo']` (`redirect()` tem tipo `never`, faz `exit`). `views/partials/flash.php` traduz o código via um mapa fixo; **código novo precisa ser adicionado nesse mapa**, senão nada aparece. Nunca exibir o valor cru da query string.
+**Post/Redirect/Get com códigos de flash** — handlers terminam com `redirect('rota', ['error' => 'codigo'])` ou `['success' => 'codigo']` (`redirect()` tem tipo `never`, faz `exit`). `views/partials/flash.php` traduz o código via um mapa fixo; **código novo precisa ser adicionado nesse mapa**, senão nada aparece. Erro que aponta um campo também entra no mapa de `field_error_attr()` (`helpers.php`), e o `<input>` leva `<?= field_error_attr('nome_do_campo') ?>`: o campo sai com `aria-invalid` (borda de erro) ligado à mensagem. Nunca exibir o valor cru da query string.
 
 **Views** — PHP puro em `views/`, recebem variáveis via `extract()` do `View::render($view, $data)`. Toda saída passa por `e()`. Links e actions usam `url('rota', [...])`; formulários POST incluem `<?= Csrf::field() ?>`. Páginas do painel incluem `partials/merchant-header.php` / `merchant-footer.php` (definir `$title` antes). Helpers globais (`e`, `redirect`, `url`, `format_phone`, `format_document`, `format_datetime`) ficam em `src/Support/helpers.php`, carregado pelo autoload `files` do Composer.
 
@@ -69,6 +69,7 @@ Banco: `mysql -u root -p < database/schema.sql` em instalação nova. Banco já
 - Commits no padrão `tipo(escopo): descrição` (`feat`, `fix`, `refactor`, `docs`, `test`, `chore`); branches `tipo/nome` com o mesmo tipo do commit (ex.: `feat/logout`, `fix/csrf-token`). Nunca commitar direto na `main`: tudo entra por PR, e o PR referencia a issue com `close #N` quando houver.
 - SQL sempre com prepared statements; o PDO usa `ATTR_EMULATE_PREPARES = false`, então o mesmo placeholder não pode aparecer duas vezes na query (use `:p1`, `:p2`).
 - Máscaras de telefone e CPF/CNPJ ficam em `src/ts/masks.ts` (`data-mask="phone"` / `"document"` no input), compiladas com `tsc` para `public/js/masks.js`, que é versionado: rode `tsc` ao mexer no `.ts`. É só apresentação; o back-end continua limpando os dígitos.
+- `src/ts/forms.ts` (compilado para `public/js/forms.js`, também versionado) vale para todo `<form>`: no envio, o botão clicado ganha a classe `is-loading` (`components.css`) e um segundo envio do mesmo formulário é barrado. Página nova com formulário carrega `/js/forms.js`; o botão não recebe `disabled`.
 
 ## Backlog
 
diff --git a/public/css/app.css b/public/css/app.css
index c0179fe..a90266c 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -561,7 +561,7 @@ span.btn-secondary {
     }
 }
 
-/* progresso ate o proximo premio: barra fina com o preenchimento na cor da marca */
+/* progresso ate o proximo premio: frase em cima da barra (a barra em si e o .progress do components.css) */
 .reward-progress {
     margin-top: 0.75rem;
 }
@@ -571,20 +571,6 @@ span.btn-secondary {
     margin-bottom: 0.4rem;
 }
 
-.progress {
-    height: 0.6rem;
-    background: var(--bg-body);
-    border: 1px solid var(--border);
-    border-radius: 999px;
-    overflow: hidden;
-}
-
-.progress-bar {
-    height: 100%;
-    background: var(--primary);
-    border-radius: 999px;
-}
-
 /* cartaz: folha clara (--paper) com nome da loja e qr code; centralizado e legivel de longe */
 .poster {
     max-width: 520px;
diff --git a/public/css/components.css b/public/css/components.css
index b33a781..e266cc0 100644
--- a/public/css/components.css
+++ b/public/css/components.css
@@ -19,7 +19,9 @@
     border: 1px solid var(--border);
     border-radius: 8px;
     font-size: 1rem;
-    outline: none;
+    /* contorno transparente em vez de "none": no modo de alto contraste do windows a sombra do
+       foco some e o navegador pinta este contorno, entao o foco nunca fica invisivel */
+    outline: 2px solid transparent;
     transition: all 0.2s ease-in-out;
     background: var(--bg-card);
     /* Fundo do input levemente mais claro que o body */
@@ -58,6 +60,43 @@
     background: var(--primary-hover);
     transform: translateY(-1px);
 }
+
+/* botao de um formulario que ja foi enviado (classe posta pelo public/js/forms.js): fica apagado,
+   ganha uma rodinha girando ao lado do texto e para de receber clique. vale para qualquer botao
+   (.btn-primary, .btn-secondary, o "Sair" do menu), por isso usa a cor do proprio texto (currentColor) */
+.is-loading {
+    opacity: 0.7;
+    cursor: progress;
+    pointer-events: none;
+}
+
+.is-loading::after {
+    content: "";
+    display: inline-block;
+    flex-shrink: 0;
+    width: 1em;
+    height: 1em;
+    margin-left: 0.5em;
+    vertical-align: -0.15em;
+    border: 2px solid currentColor;
+    border-right-color: transparent;
+    border-radius: 50%;
+    animation: btn-spin 0.7s linear infinite;
+}
+
+@keyframes btn-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* quem pediu menos movimento no sistema ve a rodinha parada (o botao apagado ja avisa) */
+@media (prefers-reduced-motion: reduce) {
+    .is-loading::after {
+        animation: none;
+    }
+}
+
 /* Selects e textareas com o mesmo visual dos inputs */
 .form-group select,
 .form-group textarea {
@@ -68,7 +107,7 @@
     border: 1px solid var(--border);
     border-radius: 8px;
     font-size: 1rem;
-    outline: none;
+    outline: 2px solid transparent;
 }
 
 .form-group select:focus,
@@ -77,6 +116,29 @@
     box-shadow: 0 0 0 3px var(--focus-ring);
 }
 
+/* campo com erro (aria-invalid="true", posto pelo field_error_attr() do helpers.php): borda vermelha
+   mais grossa (a sombra de 1px engrossa sem mexer no tamanho do campo). vem depois das regras de
+   foco de proposito: com o foco no campo, a borda continua vermelha e o anel fica em volta */
+.form-group input[aria-invalid="true"],
+.form-group select[aria-invalid="true"],
+.form-group textarea[aria-invalid="true"] {
+    border-color: var(--error);
+    box-shadow: 0 0 0 1px var(--error);
+}
+
+.form-group input[aria-invalid="true"]:focus,
+.form-group select[aria-invalid="true"]:focus,
+.form-group textarea[aria-invalid="true"]:focus {
+    border-color: var(--error);
+    box-shadow: 0 0 0 1px var(--error), 0 0 0 4px var(--focus-ring);
+}
+
+/* checkbox nao tem borda pra pintar: o erro vira um contorno em volta da caixinha */
+.form-group .checkbox input[aria-invalid="true"] {
+    outline: 2px solid var(--error);
+    outline-offset: 2px;
+}
+
 /* Linha com 2+ campos: um embaixo do outro no celular, lado a lado a partir de 640px */
 .form-row {
     display: grid;
@@ -170,3 +232,44 @@
     border-color: var(--warning);
     color: var(--warning-text);
 }
+
+/* botao de envio que vem logo depois de uma linha de campos: um respiro a mais em cima */
+.form-submit {
+    margin-top: 1rem;
+}
+
+/* card de formulario longo (cadastro da loja): no celular segue 100%, em tela grande vai ate 600px.
+   o seletor duplo vence o max-width que o auth.css da ao .auth-container nas telas maiores */
+.auth-container.auth-container-wide {
+    max-width: 600px;
+}
+
+/* barra de progresso: <progress max="100" value="N">. o preenchimento vem do atributo value,
+   entao a view nao precisa de style="width". cada navegador desenha a barra com um
+   pseudo-elemento proprio, e eles nao podem dividir a mesma regra (um seletor desconhecido anula a regra toda) */
+.progress {
+    display: block;
+    width: 100%;
+    height: 0.6rem;
+    -webkit-appearance: none;
+    appearance: none;
+    background: var(--bg-body);
+    border: 1px solid var(--border);
+    border-radius: 999px;
+    overflow: hidden;
+}
+
+.progress::-webkit-progress-bar {
+    background: var(--bg-body);
+    border-radius: 999px;
+}
+
+.progress::-webkit-progress-value {
+    background: var(--primary);
+    border-radius: 999px;
+}
+
+.progress::-moz-progress-bar {
+    background: var(--primary);
+    border-radius: 999px;
+}
diff --git a/public/css/global.css b/public/css/global.css
index f37a3c4..5669564 100644
--- a/public/css/global.css
+++ b/public/css/global.css
@@ -25,6 +25,7 @@
 
    Foco
      --focus-ring       anel de foco de inputs (acessibilidade: o foco precisa ser visivel)
+                        o contorno de foco dos demais elementos (:focus-visible) usa --primary-hover
 
    Papel (cartaz impresso)
      --paper            fundo da folha do cartaz e da impressao (qr code precisa de fundo claro)
@@ -93,3 +94,11 @@ a {
 a:hover {
     color: var(--primary-hover);
 }
+
+/* foco do teclado sempre visivel: links, botoes, menu, <summary>... tudo que recebe tab ganha o
+   mesmo contorno. :focus-visible so vale pra quem navega pelo teclado (clique do mouse nao acende).
+   campos de formulario tem o proprio anel de foco (components.css). */
+:focus-visible {
+    outline: 2px solid var(--primary-hover);
+    outline-offset: 2px;
+}
diff --git a/public/js/forms.js b/public/js/forms.js
new file mode 100644
index 0000000..363c469
--- /dev/null
+++ b/public/js/forms.js
@@ -0,0 +1,47 @@
+"use strict";
+// envio de formulario: o botao clicado mostra "carregando" e um segundo envio do mesmo
+// formulario e barrado (clique duplo ou enter repetido lancaria pontos duas vezes).
+// e so conforto: sem js o formulario segue funcionando, e o servidor continua validando tudo.
+//
+// vale para todo <form> da pagina, sem atributo nenhum no html.
+// sem import/export de proposito: o arquivo e carregado como script comum (<script src>).
+// o botao nao recebe "disabled": botao desabilitado nao e enviado junto com o formulario e perde
+// o foco do teclado. quem barra o segundo envio e a marca no <form>; o css (.is-loading) so mostra.
+function startSubmit(form, button) {
+    if (form.dataset.submitting === "1")
+        return false;
+    form.dataset.submitting = "1";
+    if (button) {
+        button.classList.add("is-loading");
+        button.setAttribute("aria-busy", "true");
+        button.setAttribute("aria-disabled", "true");
+    }
+    return true;
+}
+function resetSubmit(form) {
+    delete form.dataset.submitting;
+    form.querySelectorAll(".is-loading").forEach((button) => {
+        button.classList.remove("is-loading");
+        button.removeAttribute("aria-busy");
+        button.removeAttribute("aria-disabled");
+    });
+}
+// escuta no document: roda depois do onsubmit do proprio formulario, entao um confirm()
+// cancelado ja chega aqui com defaultPrevented e o botao nao fica preso em "carregando".
+document.addEventListener("submit", (event) => {
+    var _a;
+    if (event.defaultPrevented)
+        return;
+    const form = event.target;
+    // submitter e o botao que disparou o envio; no enter dentro de um campo, cai no primeiro botao de envio
+    const button = (_a = event.submitter) !== null && _a !== void 0 ? _a : form.querySelector('button[type="submit"], button:not([type])');
+    if (!startSubmit(form, button))
+        event.preventDefault();
+});
+// voltar do navegador pode trazer a pagina guardada como estava (bfcache), com o botao
+// ainda em "carregando": nesse caso libera tudo de novo.
+window.addEventListener("pageshow", (event) => {
+    if (!event.persisted)
+        return;
+    document.querySelectorAll("form").forEach(resetSubmit);
+});
diff --git a/src/Support/helpers.php b/src/Support/helpers.php
index e8ed919..3b21e3f 100644
--- a/src/Support/helpers.php
+++ b/src/Support/helpers.php
@@ -57,6 +57,40 @@ function url(string $route, array $params = []): string {
     return '/index.php?' . http_build_query(array_merge(['url' => $route], $params));
 }
 
+// marca o campo que causou o erro: devolve os atributos pra colar dentro do <input> quando o
+// codigo de erro da tela aponta pro campo $field (pelo name), ou texto vazio.
+// aria-invalid pinta a borda (components.css) e avisa o leitor de tela; aria-describedby liga o
+// campo a mensagem (o id="flash-error" do partials/flash.php).
+// $code: por padrao o ?error= da url; tela que nao usa flash (consulta publica) passa o proprio codigo.
+// codigo novo de erro ligado a um campo entra neste mapa.
+function field_error_attr(string $field, ?string $code = null): string {
+    static $fields = [
+        'documento_invalido'        => ['document'],
+        'email_invalido'            => ['email'],
+        'senha_curta'               => ['password', 'new_password'],
+        'senhas_diferentes'         => ['password', 'password_confirm', 'new_password', 'new_password_confirm'],
+        'ja_cadastrado'             => ['email', 'document'],
+        'credenciais_invalidas'     => ['email', 'password'],
+        'senha_atual_incorreta'     => ['current_password'],
+        'telefone_invalido'         => ['phone'],
+        'cliente_nao_encontrado'    => ['phone'],
+        'loja_invalida'             => ['loja'],
+        'nome_obrigatorio'          => ['name'],
+        'consentimento_obrigatorio' => ['consent'],
+        'confirmacao_obrigatoria'   => ['confirm'],
+        'pontos_invalidos'          => ['points'],
+        'valor_invalido'            => ['amount'],
+        'valor_sem_pontos'          => ['amount'],
+        'regra_invalida'            => ['rule'],
+    ];
+
+    $code ??= $_GET['error'] ?? null;
+    if (!is_string($code) || !in_array($field, $fields[$code] ?? [], true)) {
+        return '';
+    }
+    return ' aria-invalid="true" aria-describedby="flash-error"';
+}
+
 // como cada tipo de movimentacao aparece no extrato e nos relatorios: [rotulo, classe do selo, sinal]
 function log_type_view(string $type): array {
     return match ($type) {
diff --git a/src/ts/forms.ts b/src/ts/forms.ts
new file mode 100644
index 0000000..927dffe
--- /dev/null
+++ b/src/ts/forms.ts
@@ -0,0 +1,50 @@
+// envio de formulario: o botao clicado mostra "carregando" e um segundo envio do mesmo
+// formulario e barrado (clique duplo ou enter repetido lancaria pontos duas vezes).
+// e so conforto: sem js o formulario segue funcionando, e o servidor continua validando tudo.
+//
+// vale para todo <form> da pagina, sem atributo nenhum no html.
+// sem import/export de proposito: o arquivo e carregado como script comum (<script src>).
+
+// o botao nao recebe "disabled": botao desabilitado nao e enviado junto com o formulario e perde
+// o foco do teclado. quem barra o segundo envio e a marca no <form>; o css (.is-loading) so mostra.
+function startSubmit(form: HTMLFormElement, button: HTMLElement | null): boolean {
+    if (form.dataset.submitting === "1") return false;
+
+    form.dataset.submitting = "1";
+    if (button) {
+        button.classList.add("is-loading");
+        button.setAttribute("aria-busy", "true");
+        button.setAttribute("aria-disabled", "true");
+    }
+    return true;
+}
+
+function resetSubmit(form: HTMLFormElement): void {
+    delete form.dataset.submitting;
+    form.querySelectorAll<HTMLElement>(".is-loading").forEach((button) => {
+        button.classList.remove("is-loading");
+        button.removeAttribute("aria-busy");
+        button.removeAttribute("aria-disabled");
+    });
+}
+
+// escuta no document: roda depois do onsubmit do proprio formulario, entao um confirm()
+// cancelado ja chega aqui com defaultPrevented e o botao nao fica preso em "carregando".
+document.addEventListener("submit", (event) => {
+    if (event.defaultPrevented) return;
+
+    const form = event.target as HTMLFormElement;
+    // submitter e o botao que disparou o envio; no enter dentro de um campo, cai no primeiro botao de envio
+    const button =
+        event.submitter ??
+        form.querySelector<HTMLElement>('button[type="submit"], button:not([type])');
+
+    if (!startSubmit(form, button)) event.preventDefault();
+});
+
+// voltar do navegador pode trazer a pagina guardada como estava (bfcache), com o botao
+// ainda em "carregando": nesse caso libera tudo de novo.
+window.addEventListener("pageshow", (event) => {
+    if (!event.persisted) return;
+    document.querySelectorAll<HTMLFormElement>("form").forEach(resetSubmit);
+});
diff --git a/tests/Feature/FieldErrorTest.php b/tests/Feature/FieldErrorTest.php
new file mode 100644
index 0000000..8db4a4f
--- /dev/null
+++ b/tests/Feature/FieldErrorTest.php
@@ -0,0 +1,60 @@
+<?php
+
+namespace Tests\Feature;
+
+use Tests\Support\HttpTestCase;
+
+// campo com erro sai marcado (aria-invalid) e ligado a mensagem (aria-describedby -> id da mensagem)
+final class FieldErrorTest extends HttpTestCase {
+    private const MARCADO = ' aria-invalid="true" aria-describedby="flash-error"';
+
+    public function testLoginErradoMarcaEmailESenha(): void {
+        $this->createMerchant('erro@teste.test');
+        [, $location] = $this->post('merchant/login', ['email' => 'erro@teste.test', 'password' => 'errada'], true, 'merchant/login');
+
+        $this->get($location);
+        $this->assertStringContainsString('id="flash-error" role="alert"', $this->lastBody);
+        $this->assertStringContainsString('name="email" id="email"' . self::MARCADO, $this->lastBody);
+        $this->assertStringContainsString('name="password" id="password"' . self::MARCADO, $this->lastBody);
+    }
+
+    public function testTelaSemErroNaoMarcaNada(): void {
+        $this->get('merchant/login');
+        $this->assertStringNotContainsString('aria-invalid', $this->lastBody);
+        $this->assertStringNotContainsString('flash-error', $this->lastBody);
+    }
+
+    public function testErroDeUmCampoNaoMarcaOsOutros(): void {
+        $this->get('merchant/register&error=documento_invalido');
+        $this->assertStringContainsString('name="document" id="document"' . self::MARCADO, $this->lastBody);
+        $this->assertSame(1, substr_count($this->lastBody, 'aria-invalid'));
+    }
+
+    public function testCodigoDesconhecidoNaUrlNaoMarcaNada(): void {
+        $this->get('merchant/register&error=' . urlencode('"><script>'));
+        $this->assertStringNotContainsString('aria-invalid', $this->lastBody);
+    }
+
+    public function testPontosInvalidosMarcaOCampoDePontos(): void {
+        $m = $this->createMerchant('erro@teste.test');
+        $this->db->exec("INSERT INTO customers (phone) VALUES ('11911110001')");
+        (new \App\Models\LoyaltyCardModel($this->db))->findOrCreate($m, (int)$this->db->lastInsertId(), 'Bia', \App\Support\Privacy::VERSION);
+        $this->loginAs('erro@teste.test');
+
+        $this->get('merchant/customer&phone=11911110001&error=pontos_invalidos');
+        $this->assertStringContainsString('name="points" id="points"' . self::MARCADO, $this->lastBody);
+    }
+
+    public function testConsultaPublicaMarcaTelefoneInvalido(): void {
+        $code = $this->publicCode($this->createMerchant('erro@teste.test'));
+        $this->post('customer/balance', ['phone' => '123', 'loja' => $code], true, 'customer/balance&loja=' . $code);
+
+        $this->assertStringContainsString('id="flash-error" role="alert"', $this->lastBody);
+        $this->assertStringContainsString('name="phone" id="phone"' . self::MARCADO, $this->lastBody);
+    }
+
+    public function testMensagemDeSucessoTemPapelDeStatus(): void {
+        $this->get('merchant/login&success=logout');
+        $this->assertStringContainsString('id="flash-success" role="status"', $this->lastBody);
+    }
+}
diff --git a/tests/Feature/FormsScriptTest.php b/tests/Feature/FormsScriptTest.php
new file mode 100644
index 0000000..792e2f5
--- /dev/null
+++ b/tests/Feature/FormsScriptTest.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace Tests\Feature;
+
+use Tests\Support\HttpTestCase;
+
+// as paginas com formulario carregam o script do botao "carregando" (a logica dele e testada em tests/js)
+final class FormsScriptTest extends HttpTestCase {
+    public function testLoginECadastroCarregamOScript(): void {
+        $this->get('merchant/login');
+        $this->assertStringContainsString('src="/js/forms.js"', $this->lastBody);
+
+        $this->get('merchant/register');
+        $this->assertStringContainsString('src="/js/forms.js"', $this->lastBody);
+    }
+
+    public function testConsultaPublicaCarregaOScript(): void {
+        $code = $this->publicCode($this->createMerchant('forms@teste.test'));
+        $this->get('customer/balance&loja=' . $code);
+        $this->assertStringContainsString('src="/js/forms.js"', $this->lastBody);
+    }
+
+    public function testPainelCarregaOScript(): void {
+        $this->createMerchant('forms@teste.test');
+        $this->loginAs('forms@teste.test');
+        $this->get('merchant/dashboard');
+        $this->assertStringContainsString('src="/js/forms.js"', $this->lastBody);
+    }
+
+    public function testOArquivoCompiladoExiste(): void {
+        $this->assertFileExists(__DIR__ . '/../../public/js/forms.js');
+    }
+}
diff --git a/tests/Feature/RewardProgressScreenTest.php b/tests/Feature/RewardProgressScreenTest.php
index 14eaf7d..c52a39f 100644
--- a/tests/Feature/RewardProgressScreenTest.php
+++ b/tests/Feature/RewardProgressScreenTest.php
@@ -25,8 +25,9 @@ public function testConsultaPublicaMostraFaltamPontosEBarra(): void {
 
         $this->post('customer/balance', ['phone' => '11911110001', 'loja' => $code], true, 'customer/balance&loja=' . $code);
         $this->assertMatchesRegularExpression('/Faltam\s*<strong>20 pontos<\/strong>\s*para\s*<strong>Suco<\/strong>/', $this->lastBody);
-        $this->assertStringContainsString('aria-valuenow="60"', $this->lastBody);
-        $this->assertStringContainsString('width: 60%', $this->lastBody);
+        $this->assertStringContainsString('max="100" value="60"', $this->lastBody);
+        // a largura vem do atributo value: a view nao pode voltar a ter estilo solto
+        $this->assertStringNotContainsString('style=', $this->lastBody);
     }
 
     public function testTelaDoLojistaMostraOMesmoProgresso(): void {
@@ -35,7 +36,7 @@ public function testTelaDoLojistaMostraOMesmoProgresso(): void {
 
         $this->get('merchant/customer&phone=11911110001');
         $this->assertMatchesRegularExpression('/Faltam\s*<strong>20 pontos<\/strong>\s*para\s*<strong>Suco<\/strong>/', $this->lastBody);
-        $this->assertStringContainsString('aria-valuenow="60"', $this->lastBody);
+        $this->assertStringContainsString('max="100" value="60"', $this->lastBody);
     }
 
     public function testSaldoZeroMostraOPrimeiroPremio(): void {
@@ -44,7 +45,7 @@ public function testSaldoZeroMostraOPrimeiroPremio(): void {
 
         $this->get('merchant/customer&phone=11911110001');
         $this->assertMatchesRegularExpression('/Faltam\s*<strong>20 pontos<\/strong>\s*para\s*<strong>Cafe<\/strong>/', $this->lastBody);
-        $this->assertStringContainsString('aria-valuenow="0"', $this->lastBody);
+        $this->assertStringContainsString('max="100" value="0"', $this->lastBody);
     }
 
     public function testQuandoPagaTudoDizQueJaDaParaResgatar(): void {
@@ -53,7 +54,7 @@ public function testQuandoPagaTudoDizQueJaDaParaResgatar(): void {
 
         $this->get('merchant/customer&phone=11911110001');
         $this->assertStringContainsString('Já dá para resgatar qualquer prêmio', $this->lastBody);
-        $this->assertStringContainsString('aria-valuenow="100"', $this->lastBody);
+        $this->assertStringContainsString('max="100" value="100"', $this->lastBody);
     }
 
     public function testLojaSemPremioNaoMostraBarra(): void {
@@ -63,7 +64,7 @@ public function testLojaSemPremioNaoMostraBarra(): void {
         $this->loginAs('loja@teste.test');
 
         $this->get('merchant/customer&phone=11911110001');
-        $this->assertStringNotContainsString('progressbar', $this->lastBody);
+        $this->assertStringNotContainsString('<progress', $this->lastBody);
     }
 
     public function testPremioInativoNaoEntraNoProgresso(): void {
diff --git a/tests/Unit/HelpersTest.php b/tests/Unit/HelpersTest.php
index 2ac8ca0..f6fee43 100644
--- a/tests/Unit/HelpersTest.php
+++ b/tests/Unit/HelpersTest.php
@@ -12,4 +12,27 @@ public function testFormatDocument(): void {
         $this->assertSame('123', format_document('123'), 'tamanho desconhecido sai so com os digitos');
         $this->assertSame('', format_document(null));
     }
+
+    public function testFieldErrorAttrMarcaSoOCampoQueOErroAponta(): void {
+        $marcado = ' aria-invalid="true" aria-describedby="flash-error"';
+
+        $this->assertSame($marcado, field_error_attr('email', 'email_invalido'));
+        $this->assertSame('', field_error_attr('phone', 'email_invalido'), 'outro campo da mesma tela fica limpo');
+        $this->assertSame($marcado, field_error_attr('password_confirm', 'senhas_diferentes'), 'erro que aponta dois campos');
+        $this->assertSame('', field_error_attr('email', 'erro_servidor'), 'erro geral nao marca campo');
+        $this->assertSame('', field_error_attr('email', 'codigo_inventado'));
+    }
+
+    public function testFieldErrorAttrSemCodigoUsaOErroDaUrl(): void {
+        $_GET['error'] = 'telefone_invalido';
+        try {
+            $this->assertNotSame('', field_error_attr('phone'));
+            $this->assertSame('', field_error_attr('email'));
+
+            unset($_GET['error']);
+            $this->assertSame('', field_error_attr('phone'), 'sem erro na url nada e marcado');
+        } finally {
+            unset($_GET['error']);
+        }
+    }
 }
diff --git a/tests/js/forms.test.js b/tests/js/forms.test.js
new file mode 100644
index 0000000..2fcc879
--- /dev/null
+++ b/tests/js/forms.test.js
@@ -0,0 +1,63 @@
+// testa o bloqueio de envio duplo de public/js/forms.js (compilado de src/ts/forms.ts) sem navegador: node tests/js/forms.test.js
+const vm = require('vm'), fs = require('fs'), assert = require('assert');
+
+// o minimo de DOM que o forms.js usa: guarda os listeners pra disparar os eventos na mao
+const listeners = {};
+const listen = (type, fn) => { listeners[type] = fn; };
+const makeButton = () => {
+    const classes = new Set(), attrs = {};
+    return {
+        classes, attrs,
+        classList: { add: (c) => classes.add(c), remove: (c) => classes.delete(c) },
+        setAttribute: (k, v) => { attrs[k] = v; },
+        removeAttribute: (k) => { delete attrs[k]; },
+    };
+};
+const makeForm = (button) => ({
+    dataset: {},
+    querySelector: () => button,
+    querySelectorAll: () => (button.classes.has('is-loading') ? [button] : []),
+});
+const submit = (form, extra) => {
+    const event = Object.assign({ target: form, defaultPrevented: false, submitter: null }, extra);
+    event.preventDefault = () => { event.defaultPrevented = true; };
+    listeners.submit(event);
+    return event;
+};
+
+const forms = [];
+const ctx = { document: { addEventListener: listen, querySelectorAll: () => forms }, window: { addEventListener: listen } };
+vm.createContext(ctx);
+vm.runInContext(fs.readFileSync(require('path').join(__dirname, '../../public/js/forms.js'), 'utf8'), ctx);
+
+// primeiro envio passa e o botao clicado entra em "carregando"
+let button = makeButton(), form = makeForm(button);
+forms.push(form);
+assert.strictEqual(submit(form, { submitter: button }).defaultPrevented, false, 'primeiro envio passa');
+assert.ok(button.classes.has('is-loading'), 'botao em carregando');
+assert.strictEqual(button.attrs['aria-busy'], 'true');
+assert.strictEqual(button.attrs.disabled, undefined, 'botao nao fica disabled');
+
+// segundo envio do mesmo formulario e barrado
+assert.strictEqual(submit(form, { submitter: button }).defaultPrevented, true, 'segundo envio barrado');
+
+// voltar do navegador com a pagina guardada (bfcache) libera de novo; carga normal nao mexe
+listeners.pageshow({ persisted: false });
+assert.ok(button.classes.has('is-loading'), 'carga normal nao mexe');
+listeners.pageshow({ persisted: true });
+assert.ok(!button.classes.has('is-loading'), 'bfcache libera o botao');
+assert.strictEqual(button.attrs['aria-busy'], undefined);
+assert.strictEqual(submit(form, { submitter: button }).defaultPrevented, false, 'envia de novo depois de voltar');
+
+// confirm() cancelado (onsubmit devolveu false): nada de carregando, e o proximo envio continua valendo
+button = makeButton(); form = makeForm(button);
+submit(form, { submitter: button, defaultPrevented: true });
+assert.ok(!button.classes.has('is-loading'), 'envio cancelado nao marca o botao');
+assert.strictEqual(submit(form, { submitter: button }).defaultPrevented, false, 'envia depois do cancelamento');
+
+// enter dentro de um campo (sem submitter): usa o primeiro botao de envio do formulario
+button = makeButton(); form = makeForm(button);
+submit(form);
+assert.ok(button.classes.has('is-loading'), 'enter marca o botao de envio');
+
+console.log('ok');
diff --git a/views/auth/merchant/login.php b/views/auth/merchant/login.php
index 637778e..95414d7 100644
--- a/views/auth/merchant/login.php
+++ b/views/auth/merchant/login.php
@@ -25,12 +25,12 @@
 
             <div class="form-group">
                 <label for="email">E-mail Comercial</label>
-                <input type="email" name="email" id="email" placeholder="seu@email.com" required autocomplete="email">
+                <input type="email" name="email" id="email"<?= field_error_attr('email') ?> placeholder="seu@email.com" required autocomplete="email">
             </div>
 
             <div class="form-group">
                 <label for="password">Senha</label>
-                <input type="password" name="password" id="password" placeholder="••••••••" required>
+                <input type="password" name="password" id="password"<?= field_error_attr('password') ?> placeholder="••••••••" required>
             </div>
 
             <button type="submit" class="btn-primary">Entrar no Painel</button>
@@ -42,5 +42,6 @@
         </footer>
     </div>
 
+    <script src="/js/forms.js"></script>
 </body>
 </html>
diff --git a/views/auth/merchant/register.php b/views/auth/merchant/register.php
index 563c063..50913dc 100644
--- a/views/auth/merchant/register.php
+++ b/views/auth/merchant/register.php
@@ -12,7 +12,8 @@
 </head>
 <body class="auth-page">
 
-    <div class="auth-container" style="max-width: 600px;"> <header class="auth-header">
+    <div class="auth-container auth-container-wide">
+        <header class="auth-header">
             <img src="/assets/fidelityx-logo.svg" alt="FidelityX Logo" class="auth-logo">
             <p>Registre sua empresa no ecossistema FidelityX</p>
         </header>
@@ -46,13 +47,13 @@
 
             <div class="form-group">
                 <label for="document">CPF ou CNPJ</label>
-                <input type="text" name="document" id="document" placeholder="000.000.000-00 ou 00.000.000/0000-00" inputmode="numeric" maxlength="18" data-mask="document" required>
+                <input type="text" name="document" id="document"<?= field_error_attr('document') ?> placeholder="000.000.000-00 ou 00.000.000/0000-00" inputmode="numeric" maxlength="18" data-mask="document" required>
             </div>
 
             <div class="form-row">
                 <div class="form-group">
                     <label for="phone">Telefone</label>
-                    <input type="tel" name="phone" id="phone" placeholder="(11) 99999-9999" maxlength="15" data-mask="phone" required>
+                    <input type="tel" name="phone" id="phone"<?= field_error_attr('phone') ?> placeholder="(11) 99999-9999" maxlength="15" data-mask="phone" required>
                 </div>
 
                 <div class="form-group">
@@ -82,22 +83,22 @@
 
             <div class="form-group">
                 <label for="email">E-mail Comercial</label>
-                <input type="email" name="email" id="email" placeholder="seu@email.com" maxlength="255" required>
+                <input type="email" name="email" id="email"<?= field_error_attr('email') ?> placeholder="seu@email.com" maxlength="255" required>
             </div>
 
             <div class="form-row">
                 <div class="form-group">
                     <label for="password">Senha</label>
-                    <input type="password" name="password" id="password" placeholder="Mínimo 6 dígitos" minlength="6" required>
+                    <input type="password" name="password" id="password"<?= field_error_attr('password') ?> placeholder="Mínimo 6 dígitos" minlength="6" required>
                 </div>
 
                 <div class="form-group">
                     <label for="password_confirm">Confirmar Senha</label>
-                    <input type="password" name="password_confirm" id="password_confirm" placeholder="Repita a senha" minlength="6" required>
+                    <input type="password" name="password_confirm" id="password_confirm"<?= field_error_attr('password_confirm') ?> placeholder="Repita a senha" minlength="6" required>
                 </div>
             </div>
 
-            <button type="submit" class="btn-primary" style="margin-top: 1rem;">Criar Minha Conta Profissional</button>
+            <button type="submit" class="btn-primary form-submit">Criar Minha Conta Profissional</button>
         </form>
 
         <footer class="auth-footer">
@@ -106,5 +107,6 @@
     </div>
 
     <script src="/js/masks.js"></script>
+    <script src="/js/forms.js"></script>
 </body>
 </html>
diff --git a/views/customer/balance.php b/views/customer/balance.php
index 7b12736..29eebed 100644
--- a/views/customer/balance.php
+++ b/views/customer/balance.php
@@ -26,7 +26,7 @@
         <?php if (!$store): ?>
             <?php // sem loja: pede o codigo (vem impresso no cartaz, embaixo do QR). nao lista lojas de proposito ?>
             <?php if ($error === 'loja_invalida'): ?>
-                <div class="alert alert-error">Código de loja não encontrado. Confira o código no cartaz da loja.</div>
+                <div class="alert alert-error" id="flash-error" role="alert">Código de loja não encontrado. Confira o código no cartaz da loja.</div>
             <?php endif; ?>
 
             <p class="muted balance-help">Aponte a câmera do celular para o QR code no balcão da loja, ou digite o código que aparece embaixo dele.</p>
@@ -35,14 +35,14 @@
                 <input type="hidden" name="url" value="customer/balance">
                 <div class="form-group">
                     <label for="loja">Código da loja</label>
-                    <input type="text" name="loja" id="loja" maxlength="12" autocomplete="off" autocapitalize="characters"
+                    <input type="text" name="loja" id="loja"<?= field_error_attr('loja', $error) ?> maxlength="12" autocomplete="off" autocapitalize="characters"
                            placeholder="Ex: 7K2M9QXA" required autofocus>
                 </div>
                 <button type="submit" class="btn-primary">Continuar</button>
             </form>
         <?php else: ?>
             <?php if ($error === 'telefone_invalido'): ?>
-                <div class="alert alert-error">Informe um telefone válido com DDD.</div>
+                <div class="alert alert-error" id="flash-error" role="alert">Informe um telefone válido com DDD.</div>
             <?php endif; ?>
 
             <form action="<?= e(url('customer/balance')) ?>" method="POST">
@@ -51,7 +51,7 @@
 
                 <div class="form-group">
                     <label for="phone">Seu telefone</label>
-                    <input type="tel" name="phone" id="phone" placeholder="(11) 99999-9999" maxlength="15" data-mask="phone"
+                    <input type="tel" name="phone" id="phone"<?= field_error_attr('phone', $error) ?> placeholder="(11) 99999-9999" maxlength="15" data-mask="phone"
                            value="<?= e(format_phone($phone)) ?>" required>
                 </div>
 
@@ -93,5 +93,6 @@
     </div>
 
     <script src="/js/masks.js"></script>
+    <script src="/js/forms.js"></script>
 </body>
 </html>
diff --git a/views/merchant/customer-new.php b/views/merchant/customer-new.php
index 59c76f4..500e4a0 100644
--- a/views/merchant/customer-new.php
+++ b/views/merchant/customer-new.php
@@ -12,13 +12,13 @@
 
         <div class="form-group">
             <label for="name">Nome do cliente</label>
-            <input type="text" name="name" id="name" placeholder="Ex: Maria Silva" maxlength="255"
+            <input type="text" name="name" id="name"<?= field_error_attr('name') ?> placeholder="Ex: Maria Silva" maxlength="255"
                    autocomplete="off" required autofocus>
         </div>
 
         <div class="form-group">
             <label class="checkbox">
-                <input type="checkbox" name="consent" value="1" required>
+                <input type="checkbox" name="consent" value="1"<?= field_error_attr('consent') ?> required>
                 <span>O cliente autorizou esta loja a guardar o nome e o telefone dele para o programa de pontos
                     (<a href="<?= e(url('privacy')) ?>" target="_blank" rel="noopener">política de privacidade</a>).</span>
             </label>
diff --git a/views/merchant/customer.php b/views/merchant/customer.php
index 14a1767..2585a72 100644
--- a/views/merchant/customer.php
+++ b/views/merchant/customer.php
@@ -49,7 +49,7 @@
             <input type="hidden" name="phone" value="<?= e($card['phone']) ?>">
             <div class="form-group">
                 <label class="checkbox">
-                    <input type="checkbox" name="consent" value="1" required>
+                    <input type="checkbox" name="consent" value="1"<?= field_error_attr('consent') ?> required>
                     <span>O cliente autorizou esta loja a guardar o nome e o telefone dele para o programa de pontos
                         (<a href="<?= e(url('privacy')) ?>" target="_blank" rel="noopener">política de privacidade</a>).</span>
                 </label>
@@ -76,7 +76,7 @@
             <?php // com regra: o lojista digita o valor e ve os pontos antes de confirmar (o servidor recalcula) ?>
             <div class="form-group">
                 <label for="amount">Valor da compra (R$)</label>
-                <input type="text" name="amount" id="amount" inputmode="decimal" autocomplete="off"
+                <input type="text" name="amount" id="amount"<?= field_error_attr('amount') ?> inputmode="decimal" autocomplete="off"
                        placeholder="0,00" maxlength="15" data-rule-cents="<?= (int)$pointsRule ?>" autofocus>
                 <p class="muted amount-preview" id="amount-preview" aria-live="polite">
                     A cada <?= e(\App\Support\Money::format($pointsRule)) ?> em compras, 1 ponto (arredonda pra baixo).
@@ -86,7 +86,7 @@
 
         <div class="form-group">
             <label for="points">Pontos<?php if ($pointsRule): ?> <span class="muted">(ou digite direto)</span><?php endif; ?></label>
-            <input type="number" name="points" id="points" min="1" max="10000" inputmode="numeric"
+            <input type="number" name="points" id="points"<?= field_error_attr('points') ?> min="1" max="10000" inputmode="numeric"
                    placeholder="0"<?= $pointsRule ? '' : ' required autofocus' ?>>
             <div class="quick-points">
                 <button type="button" class="btn-secondary" data-add="1">+1</button>
@@ -145,7 +145,7 @@
         <input type="hidden" name="phone" value="<?= e($card['phone']) ?>">
         <div class="form-group">
             <label class="checkbox">
-                <input type="checkbox" name="confirm" value="1" required>
+                <input type="checkbox" name="confirm" value="1"<?= field_error_attr('confirm') ?> required>
                 <span>O cliente pediu a exclusão dos dados dele.</span>
             </label>
         </div>
diff --git a/views/merchant/dashboard.php b/views/merchant/dashboard.php
index 1fb29cd..7a46ff1 100644
--- a/views/merchant/dashboard.php
+++ b/views/merchant/dashboard.php
@@ -30,7 +30,7 @@
         <input type="hidden" name="url" value="merchant/dashboard">
         <div class="form-group">
             <label for="phone">Telefone do cliente</label>
-            <input type="tel" name="phone" id="phone" inputmode="numeric" maxlength="15" data-mask="phone" autocomplete="off"
+            <input type="tel" name="phone" id="phone"<?= field_error_attr('phone') ?> inputmode="numeric" maxlength="15" data-mask="phone" autocomplete="off"
                    placeholder="(11) 99999-9999" required autofocus>
         </div>
         <button type="submit" class="btn-primary">Continuar</button>
diff --git a/views/merchant/points-rule.php b/views/merchant/points-rule.php
index bc4bf17..e08cb1b 100644
--- a/views/merchant/points-rule.php
+++ b/views/merchant/points-rule.php
@@ -16,7 +16,7 @@
 
         <div class="form-group">
             <label for="rule">A cada quantos reais em compras o cliente ganha 1 ponto?</label>
-            <input type="text" name="rule" id="rule" inputmode="decimal" autocomplete="off" maxlength="15"
+            <input type="text" name="rule" id="rule"<?= field_error_attr('rule') ?> inputmode="decimal" autocomplete="off" maxlength="15"
                    placeholder="1,00" value="<?= $ruleCents ? e(number_format($ruleCents / 100, 2, ',', '.')) : '' ?>" required autofocus>
             <p class="muted rule-example">Ex.: com R$ 1,00, uma compra de R$ 12,90 dá 12 pontos. Com R$ 5,00, dá 2 pontos.</p>
         </div>
diff --git a/views/merchant/profile.php b/views/merchant/profile.php
index 6f29aec..474bf96 100644
--- a/views/merchant/profile.php
+++ b/views/merchant/profile.php
@@ -32,7 +32,7 @@
         <div class="form-row">
             <div class="form-group">
                 <label for="phone">Telefone</label>
-                <input type="tel" name="phone" id="phone" maxlength="15" data-mask="phone" value="<?= e(format_phone($profile['phone'])) ?>" required>
+                <input type="tel" name="phone" id="phone"<?= field_error_attr('phone') ?> maxlength="15" data-mask="phone" value="<?= e(format_phone($profile['phone'])) ?>" required>
             </div>
 
             <div class="form-group">
@@ -84,18 +84,18 @@
 
         <div class="form-group">
             <label for="current_password">Senha atual</label>
-            <input type="password" name="current_password" id="current_password" autocomplete="current-password" required>
+            <input type="password" name="current_password" id="current_password"<?= field_error_attr('current_password') ?> autocomplete="current-password" required>
         </div>
 
         <div class="form-row">
             <div class="form-group">
                 <label for="new_password">Nova senha</label>
-                <input type="password" name="new_password" id="new_password" minlength="<?= (int)$minPassword ?>" autocomplete="new-password" required>
+                <input type="password" name="new_password" id="new_password"<?= field_error_attr('new_password') ?> minlength="<?= (int)$minPassword ?>" autocomplete="new-password" required>
             </div>
 
             <div class="form-group">
                 <label for="new_password_confirm">Confirmar nova senha</label>
-                <input type="password" name="new_password_confirm" id="new_password_confirm" minlength="<?= (int)$minPassword ?>" autocomplete="new-password" required>
+                <input type="password" name="new_password_confirm" id="new_password_confirm"<?= field_error_attr('new_password_confirm') ?> minlength="<?= (int)$minPassword ?>" autocomplete="new-password" required>
             </div>
         </div>
         <p class="muted form-hint">Mínimo de <?= (int)$minPassword ?> caracteres. Ao trocar, os outros aparelhos conectados nesta conta precisam entrar de novo.</p>
diff --git a/views/partials/flash.php b/views/partials/flash.php
index 7571a03..5b95067 100644
--- a/views/partials/flash.php
+++ b/views/partials/flash.php
@@ -56,9 +56,11 @@
     ],
 ];
 
-foreach (['error', 'success'] as $flashType):
+// role faz o leitor de tela ler a mensagem ao abrir a pagina (alert interrompe, status espera a vez).
+// o id e o alvo do aria-describedby dos campos marcados por field_error_attr() (helpers.php).
+foreach (['error' => 'alert', 'success' => 'status'] as $flashType => $flashRole):
     $flashCode = $_GET[$flashType] ?? null;
     if (is_string($flashCode) && isset($flashMessages[$flashType][$flashCode])): ?>
-        <div class="alert alert-<?= $flashType ?>"><?= e($flashMessages[$flashType][$flashCode]) ?></div>
+        <div class="alert alert-<?= $flashType ?>" id="flash-<?= $flashType ?>" role="<?= $flashRole ?>"><?= e($flashMessages[$flashType][$flashCode]) ?></div>
     <?php endif;
 endforeach;
diff --git a/views/partials/merchant-footer.php b/views/partials/merchant-footer.php
index 9b9db6d..8da0689 100644
--- a/views/partials/merchant-footer.php
+++ b/views/partials/merchant-footer.php
@@ -1,4 +1,5 @@
     </main>
     <script src="/js/masks.js"></script>
+    <script src="/js/forms.js"></script>
 </body>
 </html>
diff --git a/views/partials/reward-progress.php b/views/partials/reward-progress.php
index 3de49fe..608b31c 100644
--- a/views/partials/reward-progress.php
+++ b/views/partials/reward-progress.php
@@ -14,8 +14,6 @@
             para <strong><?= e($progress['reward']['name']) ?></strong>
         </p>
     <?php endif; ?>
-    <div class="progress" role="progressbar" aria-label="Progresso até o próximo prêmio"
-         aria-valuemin="0" aria-valuemax="100" aria-valuenow="<?= (int)$progress['percent'] ?>">
-        <div class="progress-bar" style="width: <?= (int)$progress['percent'] ?>%"></div>
-    </div>
+    <progress class="progress" aria-label="Progresso até o próximo prêmio"
+              max="100" value="<?= (int)$progress['percent'] ?>"><?= (int)$progress['percent'] ?>%</progress>
 </div>