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.css

@@ -1,67 +1,99 @@
-/* Meus pedidos: the Site's look (tokens and shell from site-shell.css and
-   site-v2.css) for the order page. */
+/* Minha conta: the Site's look (tokens and shell from site-shell.css and
+   site-v2.css) for sign-in, the overview, the orders and the details. */
 [hidden]{display:none!important}
 body{background:var(--cinza)}
 .topo .acts a[aria-current="page"]{color:var(--laranja-escuro)}
-.ped{padding-top:26px;padding-bottom:64px;min-height:70vh}
-.volta{display:inline-block;margin-bottom:14px;font-size:15px;color:var(--texto2);text-decoration:none}
-.volta:hover{color:var(--laranja-escuro)}
-.pedCab{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
-.pedCab h1{font-size:34px;font-weight:800;margin-top:4px}
-.conta{margin-top:6px;font-size:15px;color:var(--fraco)}
-.conta:empty{display:none}
-.pedAcoes{display:flex;gap:10px}
+#quem{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
+.ped{padding-top:28px;padding-bottom:64px;min-height:70vh}
+.ped h1{font-size:30px;font-weight:800;margin-bottom:14px}
 .pedAviso{margin-bottom:14px;padding:12px 16px;border-radius:var(--raio2);background:var(--aviso-fundo);border:1px solid var(--aviso-linha);font-size:15px}
-.pedMsg{margin-bottom:14px;font-size:15px;color:var(--laranja-escuro)}
+.pedMsg{margin-bottom:14px;padding:10px 14px;border-radius:var(--raio2);background:var(--verde-fundo);color:var(--verde);font-size:15px}
+.pedMsg.erro{background:#FDE8E6;color:#B42318}
 .pedMsg:empty{display:none}
 
 /* Buttons, as on the Site. */
 .bPri{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border:0;border-radius:var(--raio2);background:var(--laranja);color:var(--preto);font-family:"Inter",sans-serif;font-weight:800;font-size:16px;text-decoration:none;cursor:pointer}
 .bPri:hover:not(:disabled){background:#FFB53D}
+.bPri.bMini{height:38px;padding:0 16px;font-size:15px}
 .bSec{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 16px;border:1px solid #D6D6D6;border-radius:var(--raio2);background:#fff;color:var(--preto);font-family:"Inter",sans-serif;font-weight:700;font-size:15px;cursor:pointer}
 .bSec:hover:not(:disabled){border-color:var(--preto)}
 .bSec .ic{width:18px;height:18px}
-.bLink{margin-top:14px;padding:0;border:0;background:none;color:var(--laranja-escuro);font-family:"Inter",sans-serif;font-weight:700;font-size:15px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
+.bLink{align-self:flex-start;margin-top:12px;padding:0;border:0;background:none;color:var(--laranja-escuro);font-family:inherit;font-weight:600;font-size:15px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
 button:disabled{opacity:.6;cursor:default}
 
-/* Sign in / create account. */
-.acesso{margin-bottom:26px}
-.acessoIntro{margin-bottom:12px;font-size:15px;color:var(--texto2)}
-.acessoIntro:empty{display:none}
-.acessoGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
-.bloco{display:flex;flex-direction:column;padding:22px;border:1px solid var(--linha);border-radius:var(--raio);background:#fff}
-.bloco h2{font-size:21px;font-weight:800}
-.bloco .nota2{margin:4px 0 12px;font-size:14.5px;color:var(--fraco)}
-.bloco label,.correcaoForm label{margin:10px 0 5px;font-size:14px;font-weight:600;color:var(--texto2)}
+/* Forms. */
+.acessoGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;align-items:start}
+.bloco{display:flex;flex-direction:column;margin-bottom:16px;padding:22px;border:1px solid var(--linha);border-radius:var(--raio);background:#fff}
+.bloco h2{font-size:20px;font-weight:800}
+.nota2{margin:4px 0 8px;font-size:14.5px;color:var(--fraco)}
+.nota2 a{color:var(--laranja-escuro)}
+.bloco label{margin:10px 0 5px;font-size:14px;font-weight:600;color:var(--texto2)}
 .bloco label .obs{font-weight:400;color:var(--fraco)}
-.bloco input,.correcaoForm textarea{width:100%;height:46px;padding:0 13px;border:1px solid #D6D6D6;border-radius:var(--raio2);font:inherit;font-size:16px;background:#fff}
-.correcaoForm textarea{height:auto;padding:10px 13px;resize:vertical}
-.bloco input:focus,.correcaoForm textarea:focus{outline:none;border-color:var(--laranja);box-shadow:0 0 0 3px rgba(255,168,26,.2)}
-.bloco .bPri{margin-top:16px}
-.bloco .nota2:last-child{margin:12px 0 0}
+.bloco input,.busca2 input,.busca2 select,.correcaoForm textarea{width:100%;height:46px;padding:0 13px;border:1px solid #D6D6D6;border-radius:var(--raio2);font:inherit;font-size:16px;background:#fff;color:var(--preto)}
+.bloco input[readonly]{background:var(--cinza);color:var(--texto2)}
+.bloco input:focus,.busca2 input:focus,.busca2 select:focus,.correcaoForm textarea:focus{outline:none;border-color:var(--laranja);box-shadow:0 0 0 3px rgba(255,168,26,.2)}
+.bloco>.bPri,.bloco>.bSec{margin-top:16px;align-self:flex-start}
 .duas{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
-.duas>div{display:flex;flex-direction:column}
+.tres{display:grid;grid-template-columns:1fr 1fr 90px;gap:0 12px}
+.duas>div,.tres>div{display:flex;flex-direction:column}
 
-/* Orders. */
-.grupo{margin-bottom:22px}
-.grupo:empty{display:none}
-.tituloGrupo{margin-bottom:12px;font-size:20px;font-weight:800}
-.pedido{margin-bottom:14px;padding:20px 22px;border:1px solid var(--linha);border-radius:var(--raio);background:#fff}
-.pedido.pendente{border-color:var(--aviso-linha)}
-.pedido.correcao{border-color:#F3B7A9}
-.pedTopo{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
-.pedTopo>div{flex:1;min-width:160px}
-.pedTopo h3{font-size:19px;font-weight:800}
-.pedTopo .data{font-size:14.5px;color:var(--fraco)}
-.pedTopo .valor{font-family:"Inter",sans-serif;font-size:19px;font-weight:800}
-.pedido.pendente .bPri{margin-top:14px}
-.pedido .nota2{margin-top:10px;font-size:15px;color:var(--fraco)}
-.estado{padding:5px 11px;border-radius:999px;font-family:"Inter",sans-serif;font-size:14px;font-weight:700;background:var(--cinza);color:var(--texto2);white-space:nowrap}
+/* The account area: menu on the side, one view beside it. */
+.area{display:grid;grid-template-columns:210px minmax(0,1fr);gap:28px;align-items:start}
+.lateral{position:sticky;top:90px;display:flex;flex-direction:column;gap:2px;padding:10px;border:1px solid var(--linha);border-radius:var(--raio);background:#fff}
+.lateral a,.lateral button{display:block;padding:10px 12px;border:0;border-radius:var(--raio2);background:none;color:var(--texto2);font:inherit;font-size:15.5px;text-align:left;text-decoration:none;cursor:pointer}
+.lateral a:hover,.lateral button:hover{background:var(--cinza);color:var(--preto)}
+.lateral a.on{background:var(--aviso-fundo);color:var(--laranja-escuro);font-weight:700}
+.lateral button{margin-top:6px;border-top:1px solid var(--linha);border-radius:0 0 var(--raio2) var(--raio2)}
+.conta{margin:-8px 0 16px;font-size:15px;color:var(--fraco)}
+.acessoIntro{margin:-6px 0 14px;font-size:15px;color:var(--texto2)}
+.acessoIntro:empty{display:none}
+.tituloGrupo{margin:22px 0 10px;font-size:18px;font-weight:800}
+
+/* Overview. */
+.metricas{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
+.metrica{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border:1px solid var(--linha);border-radius:var(--raio);background:#fff;color:var(--texto2);font-size:14.5px;text-decoration:none}
+.metrica:hover{border-color:var(--laranja)}
+.metrica b{font-family:"Inter",sans-serif;font-size:28px;font-weight:800;color:var(--preto)}
+.metrica.alerta{border-color:#F3B7A9;background:#FFF6F4}
+.verTodos{display:inline-block;margin-top:12px;color:var(--laranja-escuro);font-weight:700;text-decoration:none}
+
+/* Orders: filters, rows, pages. */
+.filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
+.chipF{height:36px;padding:0 14px;border:1px solid #D6D6D6;border-radius:999px;background:#fff;color:var(--texto2);font:inherit;font-size:14.5px;font-weight:600;cursor:pointer}
+.chipF:hover{border-color:var(--preto)}
+.chipF.on{border-color:var(--laranja);background:var(--aviso-fundo);color:var(--laranja-escuro)}
+.busca2{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:10px;margin-bottom:12px}
+.lista{border:1px solid var(--linha);border-radius:var(--raio);background:#fff;overflow:hidden}
+.lista:empty{display:none}
+.item+.item{border-top:1px solid var(--linha)}
+.item.pendente{background:#FFFCF6}
+.linha{display:grid;grid-template-columns:90px minmax(0,1fr) auto 110px 90px;gap:14px;align-items:center;padding:14px 18px;cursor:pointer}
+.item.pendente .linha{cursor:default}
+.linha:hover{background:var(--cinza)}
+.linha .num{font-family:"Inter",sans-serif;font-size:16px}
+.oque{display:flex;flex-direction:column;min-width:0}
+.oque span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
+.oque .data{font-size:14px;color:var(--fraco)}
+.estadoW{display:flex;align-items:center;gap:6px}
+.estado{padding:4px 10px;border-radius:999px;font-family:"Inter",sans-serif;font-size:13.5px;font-weight:700;background:var(--cinza);color:var(--texto2);white-space:nowrap}
+.via{font-size:13px;font-weight:700;color:var(--fraco)}
 .est-fin{background:var(--verde-fundo);color:var(--verde)}
 .est-cor{background:#FDE8E6;color:#B42318}
-.est-imp,.est-fil,.est-tra,.est-rec{background:var(--aviso-fundo);color:var(--laranja-escuro)}
+.est-pay{background:#FFF1D6;color:#8A4B00}
+.est-rev{background:#EEF1F5;color:#45505E}
+.est-imp,.est-fil,.est-tra,.est-rec{background:#E7F0FB;color:#1D4E89}
+.linha .valor{font-family:"Inter",sans-serif;font-size:16px;text-align:right}
+.acao{display:flex;justify-content:flex-end}
+.acao .bSec{height:36px;padding:0 14px}
+.paginas{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
+.pags{display:flex;gap:6px}
+.pag{min-width:38px;height:38px;border:1px solid #D6D6D6;border-radius:var(--raio2);background:#fff;font:inherit;font-weight:700;cursor:pointer}
+.pag.on{border-color:var(--laranja);background:var(--aviso-fundo);color:var(--laranja-escuro);cursor:default}
+.vazio{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:26px 22px;font-size:16px;color:var(--texto2)}
 
-/* Progress through production. */
+/* An order opened in the list. */
+.detalhe{padding:4px 18px 18px;border-top:1px dashed var(--linha);background:#fff}
 .trilha{display:flex;list-style:none;margin:18px 0 6px;padding:0}
 .trilha li{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:14px;color:var(--fraco)}
 .trilha li::before{content:"";position:absolute;top:14px;left:-50%;width:100%;height:2px;background:#E0E0E0;z-index:0}
@@ -77,7 +109,6 @@ button:disabled{opacity:.6;cursor:default}
 .trilha li.atual b{font-weight:800}
 .pedAlerta{display:flex;gap:10px;align-items:flex-start;margin:16px 0 4px;padding:12px 14px;border-radius:var(--raio2);background:#FDE8E6;color:#7A1C10;font-size:15px}
 .pedAlerta .ic{flex:none;width:20px;height:20px;margin-top:1px;color:#B42318}
-
 .itensPed{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--linha)}
 .itensPed li{display:flex;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--linha);font-size:15.5px}
 .itensPed .nome{flex:1;font-weight:600}
@@ -85,12 +116,8 @@ button:disabled{opacity:.6;cursor:default}
 .itensPed b{min-width:96px;text-align:right;font-family:"Inter",sans-serif}
 .itensPed .frete .nome{font-weight:400;color:var(--texto2)}
 .entregaPed{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:15px;color:var(--texto2)}
-.entregaPed .ic{width:19px;height:19px;color:var(--laranja-escuro)}
-
-/* Details. */
-.detalhe:empty{display:none}
-.detalhe{margin-top:14px;padding-top:4px;border-top:1px dashed var(--linha)}
-.secao{margin-top:14px}
+.entregaPed .ic{flex:none;width:19px;height:19px;color:var(--laranja-escuro)}
+.secao{margin-top:16px}
 .secao h4{margin-bottom:8px;font-size:16px;font-weight:800}
 .historico{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--linha)}
 .historico li{position:relative;padding:0 0 12px 12px;font-size:15px}
@@ -103,14 +130,23 @@ button:disabled{opacity:.6;cursor:default}
 .arquivo b{overflow-wrap:anywhere;font-size:15px}
 .arquivo span{font-size:14px;color:var(--fraco)}
 .correcaoForm{display:flex;flex-direction:column;padding:16px;border-radius:var(--raio2);background:var(--cinza)}
-.correcaoForm input[type=file]{font-size:15px}
+.correcaoForm label{margin:10px 0 5px;font-size:14px;font-weight:600;color:var(--texto2)}
+.correcaoForm textarea{height:auto;padding:10px 13px;resize:vertical}
 .correcaoForm .bPri{margin-top:14px;align-self:flex-start}
 
-.vazio{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:26px 22px;border:1px dashed #D6D6D6;border-radius:var(--raio);background:#fff;font-size:16px;color:var(--texto2)}
-
-@media (max-width:600px){
-  .pedCab h1{font-size:28px}
-  .trilha b{font-size:12.5px}
-  .duas{grid-template-columns:1fr}
-  .pedido{padding:16px}
+@media (max-width:820px){
+  .area{grid-template-columns:1fr;gap:16px}
+  .lateral{position:static;flex-direction:row;flex-wrap:wrap}
+  .lateral button{margin:0;border:0;border-radius:var(--raio2)}
+  .linha{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}
+  .linha .num{grid-column:1}
+  .linha .oque{grid-column:1/-1;grid-row:2}
+  .linha .estadoW{grid-column:2;grid-row:1;justify-self:end}
+  .linha .valor{grid-column:1;grid-row:3;text-align:left}
+  .linha .acao{grid-column:2;grid-row:3}
+}
+@media (max-width:600px){
+  .ped h1{font-size:26px}
+  .trilha b{font-size:12.5px}
+  .duas,.tres,.busca2{grid-template-columns:1fr}
 }