feat: the order page in the Site's look, and no search box

"Meus pedidos" was still the prototype's plain page. It now has the Site's
stripe, header and footer, and its type, colours and cards: each order shows
its status, a progress line through production (or the correction the team
asked for), the items with metres and price, where it goes, and on request
the history, the files to download and the correction form. Carts waiting
for payment are listed with a button to pay. Sign-in and account creation
are side by side.

The header, stripe, menu, footer and tokens moved from index.html's inline
style to site-shell.css, which both pages load. The header's search box,
which did nothing, is gone.

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

web/site-shell.css

@@ -0,0 +1,80 @@
+/* Site DTF — what every page shares: the tokens, the base type, the stripe,
+   header, category menu and footer. The Site (index.html) and the order page
+   (portal.html) both load it before their own styles. */
+:root{
+ /* tokens do site institucional */
+ --font-family-base:"Roboto",sans-serif; --font-family-title:"Inter",sans-serif;
+ --font-color-base:#03060b; --font-color-title:#03060b;
+ --font-weight-base:400; --font-weight-title:700; --font-weight-subtitle:600; --font-weight-button:600;
+ --font-size-title:3rem; --font-size-subtitle:2rem; --font-size-button:1.4rem;
+ --font-size-small:1.2rem; --font-size-base:1.4rem; --font-size-medium:1.6rem; --font-size-big:1.8rem;
+ --line-height:1.5;
+ --white:#fff; --black:#03060b;
+ --gray-1:#f9f9f9; --gray-2:#c3c3c3; --gray-3:#707070; --gray-4:#363636;
+ --primary-color:#ffa81a; --secondary-color:#ff7f0a;
+ --white-transparency:#ffffffb3; --transition:all .4s ease;
+ /* apelidos usados nesta pagina, mapeados nos tokens acima */
+ --marinho:var(--black); --papel:var(--white); --cinza:var(--gray-1);
+ --tx:var(--font-color-base); --fraco:var(--gray-3); --linha:#e6e6e6;
+ --laranja:var(--primary-color); --laranja2:var(--secondary-color);
+ --vermelho:#D94A28; --verde:#2E9E5B; --verde-ml:#00A650; --verde-claro:#57D68A;
+ --sombra:0 1px 2px rgba(3,6,11,.05), 0 4px 14px rgba(3,6,11,.05);
+ --sombra-alta:0 2px 6px rgba(3,6,11,.07), 0 10px 30px rgba(3,6,11,.11)}
+
+*{box-sizing:border-box;margin:0;padding:0}
+html{scroll-behavior:smooth;font-size:62.5%}
+body{background:var(--white);color:var(--font-color-base);font-family:var(--font-family-base);
+ font-size:var(--font-size-base);font-weight:var(--font-weight-base);line-height:var(--line-height);
+ -webkit-font-smoothing:antialiased}
+h1,h2,h3{font-family:var(--font-family-title);color:var(--font-color-title);
+ font-weight:var(--font-weight-title);letter-spacing:normal;line-height:1.15}
+.w{max-width:1020px;margin:0 auto;padding:0 22px}
+
+/* tarja rotativa, como no site */
+.tarja{background:var(--laranja);color:#111;text-align:center;padding:8px 16px;
+ font-family:"Inter",sans-serif;font-weight:700;font-size:14.5px;letter-spacing:.02em}
+.tarja a{color:#111;text-decoration:none}
+
+/* topo */
+.topo{background:#fff;border-bottom:1px solid var(--linha);position:sticky;top:0;z-index:60}
+.topo .w{display:flex;align-items:center;gap:22px;padding-top:15px;padding-bottom:15px}
+.logo{display:flex;align-items:center;text-decoration:none;white-space:nowrap;flex:none}
+.logo img{height:26px;width:auto;display:block}
+.logotexto{font-family:"Inter",sans-serif;font-weight:700;font-size:19px;color:var(--black);
+ letter-spacing:-.03em}
+.logotexto i{font-style:normal;color:var(--laranja)}
+.acts{margin-left:auto;display:flex;gap:18px;align-items:center;font-size:15px}
+.acts a{color:var(--tx);text-decoration:none;display:flex;align-items:center;gap:6px}
+.acts a:hover{color:var(--laranja)}
+
+/* menu */
+.menu{background:#fff;border-bottom:1px solid var(--linha)}
+.menu .w{display:flex;gap:0;flex-wrap:wrap}
+.mi{position:relative}
+.mi>a{display:block;padding:13px 16px;font-family:"Inter",sans-serif;font-weight:600;
+ font-size:15px;color:var(--tx);text-decoration:none;white-space:nowrap}
+.mi:hover>a{color:var(--laranja)}
+.mi.on>a{color:var(--laranja);box-shadow:inset 0 -2px 0 var(--laranja)}
+.sub{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--linha);
+ border-radius:0 0 9px 9px;min-width:224px;padding:7px 0;z-index:70;
+ box-shadow:0 10px 26px rgba(0,0,0,.09)}
+.mi:hover .sub,.mi:focus-within .sub{display:block}
+.sub a{display:block;padding:8px 17px;font-size:15px;color:var(--fraco);text-decoration:none}
+.sub a:hover{color:var(--laranja);background:var(--cinza)}
+@media(max-width:820px){
+  .menu .w{overflow-x:auto;flex-wrap:nowrap}
+  .sub{display:none!important}
+}
+
+footer{background:#000;color:#8D9AB0;padding:26px 0 20px;font-size:15px}
+.frow{display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap;padding-bottom:18px}
+.fmarca{display:flex;align-items:center;gap:9px;font-family:"Inter",sans-serif;
+ font-weight:700;font-size:15px;color:var(--laranja);letter-spacing:.06em;white-space:nowrap}
+.fmarca img{height:22px;width:auto;display:block;filter:brightness(0) invert(1)}
+footer a{color:#8D9AB0;text-decoration:none}
+footer a:hover{color:var(--laranja2)}
+.flinks{display:flex;gap:18px;flex-wrap:wrap;font-size:15px}
+.fcont{margin-left:auto;text-align:right;font-size:15px;line-height:1.7}
+@media(max-width:720px){.fcont{margin-left:0;text-align:left}}
+.fbase{border-top:1px solid rgba(255,255,255,.1);padding-top:14px;display:flex;
+ justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13.5px;color:#5A6570}