feat: Minha conta with sign-in, overview, orders and account details

The order page becomes the customer's area, one page at four addresses:

- /conta/entrar: sign in or create an account, side by side. "Esqueci
  minha senha" points to the Dropstar WhatsApp until e-mail can be sent.
- /conta: the counts of orders waiting for payment, in production, in
  correction and finished, and the latest one.
- /conta/pedidos: every order and the cart waiting for payment in one list,
  newest first, filtered by group, order number and period, ten per page.
  The cart shows "Aguardando pagamento" and its "Pagar" goes to the PIX
  page when a PIX code is open. An order opens in place with its progress,
  items, delivery, history, files and the correction form. A guest sees
  the orders paid in this browser.
- /conta/dados: WhatsApp and a saved delivery address (the CNPJ is locked),
  e-mail and password changes, both confirmed with the current password;
  a password change signs the other devices out.

The cart fills in the account's details and saved address. New API routes
for the details, and the order list takes filters and pages and returns
the counts; only the newest unpaid quote whose files still exist is listed.
The Site's "Minha conta" and "Ver meus pedidos" point to the new addresses.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/portal.html

@@ -3,7 +3,7 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Meus pedidos · DTF Dropstar</title>
+<title>Minha conta · DTF Dropstar</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
@@ -20,38 +20,29 @@
 <header class="topo"><div class="w">
   <a class="logo" href="https://www.dropstaratacado.com.br" aria-label="Dropstar Atacado"><img src="https://cdn.vnda.com.br/dropstar/2025/12/17/logo-header-15125700-16129080.png?v=1766009286" alt="Dropstar"></a>
   <div class="acts">
-    <a href="/portal.html" aria-current="page"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg><span class="actTx">Minha conta</span></a>
+    <a href="/conta" aria-current="page"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg><span class="actTx" id="quem">Minha conta</span></a>
     <a href="/carrinho"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg><span class="actTx">Carrinho</span></a>
   </div>
 </div></header>
 
 <main class="ped w">
-  <a class="volta" href="/#envio">‹ Enviar outra arte</a>
-  <div class="pedCab">
-    <div>
-      <p class="et">DTF Dropstar</p>
-      <h1>Meus pedidos</h1>
-      <p class="conta" id="account"></p>
-    </div>
-    <div class="pedAcoes">
-      <button type="button" class="bSec" id="refresh">Atualizar</button>
-      <button type="button" class="bSec" id="logout" hidden>Sair</button>
-    </div>
-  </div>
   <p class="pedAviso" id="dev-notice" hidden>Ambiente de desenvolvimento local. Pagamentos e notificações são simulados. Use apenas dados de teste.</p>
   <p class="pedMsg" id="message" role="status"></p>
 
-  <section class="acesso" id="auth" aria-label="Entrar ou criar conta">
-    <p class="acessoIntro" id="guest"></p>
+  <!-- /conta/entrar -->
+  <section class="acesso" id="auth" hidden aria-labelledby="tEntrar">
+    <h1 id="tEntrar">Minha conta</h1>
     <div class="acessoGrid">
       <form class="bloco" id="login">
         <h2>Entrar</h2>
-        <p class="nota2">Já comprou com seu CNPJ? Entre para ver todos os seus pedidos.</p>
+        <p class="nota2">Para ver seus pedidos e seus dados.</p>
         <label for="email">E-mail</label>
         <input id="email" type="email" autocomplete="username" required>
         <label for="password">Senha</label>
         <input id="password" type="password" autocomplete="current-password" required>
         <button class="bPri">Entrar</button>
+        <button type="button" class="bLink" id="esqueci">Esqueci minha senha</button>
+        <p class="nota2" id="esqueciTx" hidden>A recuperação por e-mail chega em breve. Enquanto isso, fale com a Dropstar pelo WhatsApp <a href="https://wa.me/message/NJ76CLIOUGXLB1" target="_blank" rel="noopener">16 99428-0056</a>.</p>
       </form>
       <form class="bloco" id="register">
         <h2>Criar conta</h2>
@@ -65,13 +56,89 @@
         <label for="register-password">Senha <span class="obs">12 caracteres ou mais</span></label>
         <input id="register-password" type="password" minlength="12" maxlength="128" autocomplete="new-password" required>
         <button class="bPri">Criar conta</button>
-        <p class="nota2">Guarde sua senha: a recuperação por e-mail ainda não está disponível.</p>
       </form>
     </div>
   </section>
 
-  <section class="grupo" id="quotes" aria-label="Aguardando pagamento"></section>
-  <section class="grupo" id="orders" aria-label="Pedidos"></section>
+  <!-- /conta, /conta/pedidos, /conta/dados -->
+  <div class="area" id="area" hidden>
+    <nav class="lateral" aria-label="Minha conta">
+      <a href="/conta" data-view="geral" data-conta>Visão geral</a>
+      <a href="/conta/pedidos" data-view="pedidos">Pedidos</a>
+      <a href="/conta/dados" data-view="dados" data-conta>Dados da conta</a>
+      <a href="/conta/entrar" data-view="entrar" id="navEntrar">Entrar</a>
+      <button type="button" id="logout" hidden>Sair</button>
+    </nav>
+
+    <section class="vista" id="vGeral" hidden aria-labelledby="tGeral">
+      <h1 id="tGeral">Olá</h1>
+      <p class="conta" id="account"></p>
+      <div class="metricas" id="metricas"></div>
+      <h2 class="tituloGrupo">Último pedido</h2>
+      <div class="lista" id="ultimo"></div>
+      <a class="verTodos" href="/conta/pedidos" data-view="pedidos">Ver todos os pedidos ›</a>
+    </section>
+
+    <section class="vista" id="vPedidos" hidden aria-labelledby="tPedidos">
+      <h1 id="tPedidos">Pedidos</h1>
+      <p class="acessoIntro" id="guest"></p>
+      <div class="filtros" id="filtros" role="group" aria-label="Filtrar pedidos"></div>
+      <div class="busca2">
+        <label class="sr" for="fNumero">Número do pedido</label>
+        <input id="fNumero" inputmode="numeric" placeholder="Nº do pedido">
+        <label class="sr" for="fPeriodo">Período</label>
+        <select id="fPeriodo">
+          <option value="30">Últimos 30 dias</option>
+          <option value="90">Últimos 90 dias</option>
+          <option value="365">Último ano</option>
+          <option value="0" selected>Todo o período</option>
+        </select>
+      </div>
+      <div class="lista" id="orders"></div>
+      <div class="paginas" id="paginas"></div>
+    </section>
+
+    <section class="vista" id="vDados" hidden aria-labelledby="tDados">
+      <h1 id="tDados">Dados da conta</h1>
+      <form class="bloco" id="fPerfil">
+        <h2>Empresa e entrega</h2>
+        <div class="duas">
+          <div><label for="dCnpj">CNPJ</label><input id="dCnpj" readonly aria-readonly="true"></div>
+          <div><label for="dZap">WhatsApp</label><input id="dZap" inputmode="numeric" autocomplete="tel" required></div>
+        </div>
+        <p class="nota2">Endereço de entrega: preenche o carrinho quando você escolhe receber em casa. Deixe em branco para não guardar.</p>
+        <div class="duas">
+          <div><label for="dCep">CEP</label><input id="dCep" inputmode="numeric" maxlength="9" placeholder="00000-000"></div>
+          <div><label for="dNome">Quem recebe</label><input id="dNome" maxlength="120"></div>
+        </div>
+        <label for="dRua">Rua / avenida</label><input id="dRua" maxlength="160">
+        <div class="duas">
+          <div><label for="dNum">Número</label><input id="dNum" maxlength="20"></div>
+          <div><label for="dComp">Complemento (opcional)</label><input id="dComp" maxlength="80"></div>
+        </div>
+        <div class="tres">
+          <div><label for="dBairro">Bairro</label><input id="dBairro" maxlength="80"></div>
+          <div><label for="dCidade">Cidade</label><input id="dCidade" maxlength="80"></div>
+          <div><label for="dUf">UF</label><input id="dUf" maxlength="2"></div>
+        </div>
+        <button class="bPri">Salvar</button>
+      </form>
+      <form class="bloco" id="fEmail">
+        <h2>E-mail</h2>
+        <p class="nota2">É o seu acesso e para onde vai a nota fiscal.</p>
+        <label for="dMail">E-mail</label><input id="dMail" type="email" autocomplete="email" required>
+        <label for="dMailSenha">Senha atual, para confirmar</label><input id="dMailSenha" type="password" autocomplete="current-password" required>
+        <button class="bSec">Alterar e-mail</button>
+      </form>
+      <form class="bloco" id="fSenha">
+        <h2>Senha</h2>
+        <label for="dAtual">Senha atual</label><input id="dAtual" type="password" autocomplete="current-password" required>
+        <label for="dNova">Nova senha <span class="obs">12 caracteres ou mais</span></label><input id="dNova" type="password" minlength="12" maxlength="128" autocomplete="new-password" required>
+        <button class="bSec">Alterar senha</button>
+        <p class="nota2">Os outros aparelhos conectados saem da conta.</p>
+      </form>
+    </section>
+  </div>
 </main>
 
 <footer><div class="w">