feat: check Tiny products and add a supervised order test

"Testar conexão" now also reads the four configured Tiny products and
requires each to be active. app/tiny_probe.py runs from the worker console
to list products, confirm the configured ids, and create one marked test
order through the worker's own delivery path, proving the duplicate guard
by search before a second delivery. Nothing is sent without --confirmar.

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

app/adapters.py

@@ -146,6 +146,8 @@ class FreightAdapter(Protocol):
     def quote(self, service: str, postal_code: str) -> dict: ...
 
 class FakeFreight:
+    name = 'fake'
+
     def quote(self, service: str, postal_code: str) -> dict:
         if service == 'pickup':
             return {'provider': 'fake', 'service': 'pickup', 'total_cents': 0, 'postal_code': ''}

app/api/customer.py

@@ -57,7 +57,7 @@ def login(body: Login, request: Request, response: Response):
     if not account or not matches:
         login_failed(email)
         audit('customer_login_failed', ip=client_ip(request))
-        raise HTTPException(401, 'Invalid email or password')
+        raise HTTPException(401, 'E-mail ou senha inválidos.')
     previous = current(request)
     with db.connect() as c:
         if not stored.startswith('scrypt-v2$'):

app/api/health.py

@@ -7,7 +7,8 @@ from ..core import db
 from ..core.auth import client_ip, owner, new_session, rate_limit
 from ..core.limits import upload_limit_bytes
 from ..core.models import Freight
-from ..runtime import ENVIRONMENT, GUEST_SESSION_LIMIT, PART_BYTES, freight, payment, storage
+from ..runtime import (ENVIRONMENT, GUEST_SESSION_LIMIT, PART_BYTES, freight, payment,
+                       require_delivery_available, storage)
 
 router = APIRouter()
 
@@ -40,6 +41,7 @@ def session(request: Request, response: Response):
 
 @router.post('/api/freight')
 def quote_freight(body: Freight):
+    require_delivery_available(body.service)
     try:
         return freight.quote(body.service, body.postal_code)
     except ValueError as exc:

app/api/operator.py

@@ -17,7 +17,7 @@ from ..core.models import Move, OperatorLogin, Resolution, Review
 from ..core.pricing import price
 from ..printjobs import queue as queue_print_files
 from .. import tiny
-from ..runtime import (BOARD_FINISHED_LIMIT, BOARD_QUOTE_LIMIT, STATES, TRANSITIONS,
+from ..runtime import (BACK, BOARD_FINISHED_LIMIT, BOARD_QUOTE_LIMIT, ENVIRONMENT, STATES, TRANSITIONS, payment,
                        enqueue, freight, quote_view, storage, upload_row)
 from ..scanning import require_clean
 
@@ -30,14 +30,14 @@ def operator_login(body: OperatorLogin, request: Request, response: Response):
     with db.connect() as c:
         account = c.execute('SELECT * FROM dtf_local.operators WHERE email=%s', (email,)).fetchone()
         if not c.execute('SELECT 1 FROM dtf_local.operators WHERE active LIMIT 1').fetchone():
-            raise HTTPException(503, 'No Kanban operator account is configured')
+            raise HTTPException(503, 'Nenhuma conta de operador configurada.')
     # Comparable password work whether or not the account exists or is active.
     stored = account['password_hash'] if account else DUMMY_PASSWORD_HASH
     matches = password_matches(body.password, stored)
     if not account or not account['active'] or not matches:
         login_failed('operator:'+email)
         audit('operator_login_failed', ip=client_ip(request), operator=email)
-        raise HTTPException(401, 'Invalid operator login')
+        raise HTTPException(401, 'E-mail ou senha inválidos.')
     token = secrets.token_urlsafe(32)
     with db.connect() as c:
         previous = hashlib.sha256(request.cookies.get('dtf_operator','').encode()).hexdigest()
@@ -84,41 +84,112 @@ def board(user=Depends(operator)):
         approved_total = c.execute('''SELECT count(*) AS n FROM dtf_local.quotes q
             LEFT JOIN dtf_local.orders o ON o.quote_id=q.id
             WHERE o.id IS NULL AND q.approved IS NOT NULL''').fetchone()['n']
-        orders = active + list(reversed(finished))
+        orders = with_print_files(c, active + list(reversed(finished)))
+        # A paid notification that did not become an order is money received
+        # for nothing the factory will make. The board carries the count; the
+        # Pagamentos tab pages through them until someone records a resolution.
+        issues_total = c.execute('''SELECT count(*) AS n FROM dtf_local.payment_events
+            WHERE (outcome LIKE 'refused%' OR outcome LIKE 'attention%') AND resolved_at IS NULL''').fetchone()['n']
+        return {'states': STATES, 'transitions': TRANSITIONS, 'back': BACK,
+                'orders': orders, 'payment_issues_total': issues_total, 'tiny': tiny_status(), 'operator': user,
+                'providers': {'payment': payment.name}, 'environment': ENVIRONMENT,
+                'finished_shown': len(finished), 'finished_total': finished_total,
+                'quotes': [quote_view(c, q) for q in pending + approved],
+                'pending_total': pending_total, 'approved_total': approved_total}
+
+
+def with_print_files(c, orders):
     generated = c.execute('''SELECT p.order_id,p.item_index,p.status,p.upload_id,p.detail,u.name
         FROM dtf_local.print_files p LEFT JOIN dtf_local.uploads u ON u.id=p.upload_id
         WHERE p.order_id=ANY(%s) ORDER BY p.item_index''', ([o['id'] for o in orders],)).fetchall()
     for order in orders:
         order['print_files'] = [row for row in generated if row['order_id'] == order['id']]
-        # A paid notification that did not become an order is money received
+    return orders
-        # for nothing the factory will make. It stays on the board until a
+
-        # person records what was done about it.
+
-        refused = c.execute('''SELECT id,provider,event_id,reference,status,amount_cents,received_at,outcome
+def cursor_pair(first, second):
-            FROM dtf_local.payment_events WHERE (outcome LIKE 'refused%' OR outcome LIKE 'attention%') AND resolved_at IS NULL
+    if (first is None) != (second is None):
-            ORDER BY received_at LIMIT 100''').fetchall()
+        raise HTTPException(422, 'Both cursor fields are required')
-        return {'states': STATES, 'transitions': TRANSITIONS,
+    return first is not None
-                'orders': orders, 'payment_issues': refused, 'tiny': tiny_status(),
+
-                'finished_shown': len(finished), 'finished_total': finished_total,
+
-                'quotes': [quote_view(c, q) for q in pending + approved],
+@router.get('/api/operator/orders/finished')
-                'pending_total': pending_total, 'approved_total': approved_total,
+def finished_page(before_created_at: datetime | None = None, before_id: UUID | None = None,
-                'events': c.execute('SELECT * FROM dtf_local.outbox ORDER BY id DESC LIMIT 100').fetchall()}
+                  limit: int = Query(default=50, ge=1, le=100), user=Depends(operator)):
+    """Older finished orders, newest first, beyond the board's recent window."""
+    paged = cursor_pair(before_created_at, before_id)
+    with db.connect() as c:
+        rows = c.execute('''SELECT * FROM dtf_local.orders WHERE state='fin'
+            ''' + ('AND (created_at,id)<(%s,%s) ' if paged else '') + '''
+            ORDER BY created_at DESC,id DESC LIMIT %s''',
+            ((before_created_at, before_id) if paged else ()) + (limit + 1,)).fetchall()
+        return {'orders': with_print_files(c, rows[:limit]), 'has_more': len(rows) > limit}
+
+
+@router.get('/api/operator/payment-events')
+def payment_events(state: Literal['open','resolved','all'] = 'open',
+                   offset: int = Query(default=0, ge=0),
+                   limit: int = Query(default=20, ge=1, le=100), user=Depends(operator)):
+    """Payments that needed a person, newest first: open ones to act on, resolved ones as history."""
+    where = {'open': 'AND resolved_at IS NULL', 'resolved': 'AND resolved_at IS NOT NULL', 'all': ''}[state]
+    with db.connect() as c:
+        rows = c.execute('''SELECT id,provider,event_id,reference,status,amount_cents,received_at,outcome,
+              resolved_at,resolved_by,resolution
+            FROM dtf_local.payment_events WHERE (outcome LIKE 'refused%%' OR outcome LIKE 'attention%%') ''' + where + '''
+            ORDER BY received_at DESC,id DESC LIMIT %s OFFSET %s''', (limit, offset)).fetchall()
+        total = c.execute('''SELECT count(*) AS n FROM dtf_local.payment_events
+            WHERE (outcome LIKE 'refused%' OR outcome LIKE 'attention%') ''' + where).fetchone()['n']
+        return {'issues': rows, 'total': total}
+
+
+@router.get('/api/operator/events')
+def events(provider: Literal['tiny','whatsapp'] | None = None,
+           status: Literal['delivered','queued','failing'] | None = None,
+           event: Literal['payment_approved','production_started','correction_needed','ready'] | None = None,
+           order: int | None = Query(default=None, ge=1), offset: int = Query(default=0, ge=0),
+           limit: int = Query(default=20, ge=1, le=100), user=Depends(operator)):
+    """The integration send log, newest first, filtered, by page with a total."""
+    clauses, params = [], []
+    if provider:
+        clauses.append('provider=%s'); params.append(provider)
+    if status == 'delivered':
+        clauses.append('delivered_at IS NOT NULL')
+    elif status == 'queued':
+        clauses.append('delivered_at IS NULL AND last_error IS NULL')
+    elif status == 'failing':
+        clauses.append('delivered_at IS NULL AND last_error IS NOT NULL')
+    if event:
+        clauses.append("payload->>'event'=%s"); params.append(event)
+    if order:
+        clauses.append("payload->>'number'=%s"); params.append(str(order))
+    where = ('WHERE ' + ' AND '.join(clauses)) if clauses else ''
+    with db.connect() as c:
+        rows = c.execute(f'SELECT * FROM dtf_local.outbox {where} ORDER BY id DESC LIMIT %s OFFSET %s',
+                         (*params, limit, offset)).fetchall()
+        total = c.execute(f'SELECT count(*) AS n FROM dtf_local.outbox {where}', params).fetchone()['n']
+        return {'events': rows, 'total': total}
 
 @router.get('/api/operator/quotes')
 def quote_page(kind: Literal['pending','approved'], before_created_at: datetime | None = None,
-               before_id: UUID | None = None, limit: int = Query(default=50, ge=1, le=100),
+               before_id: UUID | None = None, offset: int = Query(default=0, ge=0),
-               user=Depends(operator)):
+               limit: int = Query(default=50, ge=1, le=100), user=Depends(operator)):
+    """Unpaid quotes, newest first: by cursor, or by page (offset) with a total."""
     if (before_created_at is None) != (before_id is None):
         raise HTTPException(422, 'Both quote cursor fields are required')
     approved_filter = 'q.approved IS NULL' if kind == 'pending' else 'q.approved IS NOT NULL'
     cursor = 'AND (q.created_at,q.id)<(%s,%s)' if before_created_at else ''
-    params = ((before_created_at,before_id) if before_created_at else ()) + (limit+1,)
+    skip = 0 if before_created_at else offset
+    params = ((before_created_at,before_id) if before_created_at else ()) + (limit+1, skip)
     with db.connect() as c:
         rows = c.execute(f'''SELECT q.* FROM dtf_local.quotes q
             LEFT JOIN dtf_local.orders o ON o.quote_id=q.id
             WHERE o.id IS NULL AND {approved_filter} {cursor}
-            ORDER BY q.created_at DESC,q.id DESC LIMIT %s''', params).fetchall()
+            ORDER BY q.created_at DESC,q.id DESC LIMIT %s OFFSET %s''', params).fetchall()
+        total = c.execute(f'''SELECT count(*) AS n FROM dtf_local.quotes q
+            LEFT JOIN dtf_local.orders o ON o.quote_id=q.id
+            WHERE o.id IS NULL AND {approved_filter}''').fetchone()['n']
         return {'quotes':[quote_view(c,row) for row in rows[:limit]],
-                'has_more':len(rows)>limit}
+                'has_more':len(rows)>limit, 'total': total}
 
 @router.post('/api/operator/quotes/{uid}/approve')
 def approve(uid: UUID, body: Review, user=Depends(operator)):
@@ -159,26 +230,34 @@ def move(uid: UUID, body: Move, user=Depends(operator)):
         if not row:
             raise HTTPException(404, 'Order not found')
         if body.version != row['version']:
-            raise HTTPException(409, 'Order changed; refresh the board')
+            raise HTTPException(409, 'O pedido mudou. Clique em Atualizar.')
         if body.state == row['state']:
             return row
-        if body.state not in TRANSITIONS[row['state']]:
+        back = BACK.get(row['state']) == body.state
-            raise HTTPException(409, 'Move is not allowed from this state')
+        if body.state not in TRANSITIONS[row['state']] and not back:
+            raise HTTPException(409, f"Não dá para ir de {STATES[row['state']]} para {STATES[body.state]}.")
         if body.state == 'cor' and not body.reason.strip():
-            raise HTTPException(422, 'Correction requires a reason')
+            raise HTTPException(422, 'Informe o motivo da correção.')
+        if back and not body.reason.strip():
+            raise HTTPException(422, 'Informe por que o pedido está voltando de etapa.')
         if body.state in ('fil','imp'):
             coverage = c.execute('SELECT DISTINCT f.item_index FROM dtf_local.order_files f JOIN dtf_local.uploads u ON u.id=f.upload_id WHERE f.order_id=%s AND f.kind=\'final\' AND f.active AND u.expires_at>now() AND u.purged_at IS NULL AND u.scan_state=\'clean\'', (uid,)).fetchall()
             if {r['item_index'] for r in coverage} != set(range(len(row['snapshot']['items']))):
-                raise HTTPException(409, 'Approve a complete final-file set for every item before queueing')
+                raise HTTPException(409, 'Aprove os arquivos finais de todos os itens antes de colocar na fila.')
         if body.state == 'cor':
             c.execute("UPDATE dtf_local.order_files SET active=false WHERE order_id=%s AND kind='final'", (uid,))
-        c.execute('INSERT INTO dtf_local.movements(order_id,from_state,to_state,operator,reason) VALUES(%s,%s,%s,%s,%s)',
+        c.execute('INSERT INTO dtf_local.movements(order_id,from_state,to_state,operator,reason,back) VALUES(%s,%s,%s,%s,%s,%s)',
-                  (uid,row['state'],body.state,user,body.reason))
+                  (uid,row['state'],body.state,user,body.reason,back))
         changed = c.execute('UPDATE dtf_local.orders SET state=%s, version=version+1, updated_at=now() WHERE id=%s RETURNING *', (body.state,uid)).fetchone()
         events = {'imp':'production_started','cor':'correction_needed','fin':'ready'}
-        if body.state in events:
+        if body.state in events and not back:
+            # "Production started" and "ready" reach the customer once per order,
+            # even if a mistaken move is undone and made again. Each correction
+            # is a new request, so it keeps one message per movement.
+            once = body.state in ('imp','fin')
             for provider in ('tiny','whatsapp'):
-                enqueue(c, f'{uid}:{changed["version"]}:{provider}', provider,
+                key = f'{uid}:{events[body.state]}:{provider}' if once else f'{uid}:{changed["version"]}:{provider}'
+                enqueue(c, key, provider,
                         {'order_id':str(uid), 'number':row['number'], 'event':events[body.state], 'reason':body.reason,
                          'customer_path': f'/portal.html?order={uid}'})
     return changed
@@ -224,6 +303,18 @@ def tiny_connect(user=Depends(operator)):
     audit('tiny_connect_started', operator=user)
     return {'url': tiny.TinyAuth().authorize_url(user)}
 
+@router.post('/api/operator/tiny/test')
+def tiny_test(user=Depends(operator)):
+    """Read one order and one contact from Tiny. Creates nothing."""
+    if not tiny.configured():
+        raise HTTPException(503, 'Tiny application is not configured')
+    try:
+        results = tiny.check()
+    except tiny.TinyNotConnected as exc:
+        raise HTTPException(409, str(exc))
+    audit('tiny_tested', operator=user, ok=all(v == 'ok' for v in results.values()))
+    return {'ok': all(v == 'ok' for v in results.values()), 'results': results}
+
 @router.get('/api/operator/tiny/callback')
 def tiny_callback(code: str = Query(max_length=4096), state: str = Query(max_length=128)):
     """Tiny's redirect back. Cross-site, so the operator cookie is absent: the

app/api/quotes.py

@@ -10,7 +10,7 @@ from psycopg.types.json import Jsonb
 from ..core import db
 from ..core.auth import owner
 from ..core.models import QuoteRequest
-from ..runtime import freight, quote_view, upload_row
+from ..runtime import freight, quote_view, require_delivery_available, upload_row
 from ..scanning import require_clean
 
 router = APIRouter()
@@ -20,6 +20,7 @@ def create_quote(body: QuoteRequest, session_id=Depends(owner)):
     for item in body.items:
         if abs(item.metres*100-item.production.height_cm) > Decimal('0.02'):
             raise HTTPException(422, 'Quoted metres do not match the submitted layout height')
+    require_delivery_available(body.freight.service)
     draft = body.model_dump(mode='json', exclude={'request_key'})
     digest = hashlib.sha256(json.dumps(draft, sort_keys=True).encode()).hexdigest()
     try:

app/api/uploads.py

@@ -37,7 +37,7 @@ def begin_upload(body: UploadStart, session_id=Depends(owner)):
             usage['owned']+body.size > int(os.environ.get('OWNER_UPLOAD_QUOTA_BYTES','10737418240')) or
             usage['pending'] >= int(os.environ.get('MAX_PENDING_UPLOADS','10'))):
             audit('upload_quota_rejected')
-            raise HTTPException(429, 'Local storage quota or pending upload limit reached')
+            raise HTTPException(429, 'Limite de armazenamento ou de envios pendentes atingido. Tente de novo mais tarde.')
         multipart = storage.begin(key)
         c.execute('''INSERT INTO dtf_local.uploads(id,owner,name,size,object_key,multipart_id,expires_at)
             VALUES(%s,%s,%s,%s,%s,%s,now()+interval '1 hour')''',

app/core/auth.py

@@ -45,7 +45,7 @@ def session_row(request):
     try:
         sid = UUID(request.cookies.get('dtf_session', ''))
     except ValueError:
-        raise HTTPException(401, 'Start a local session first')
+        raise HTTPException(401, 'Sessão não iniciada. Recarregue a página.')
     with connect() as c:
         row = c.execute('SELECT * FROM dtf_local.sessions WHERE id=%s AND expires_at>now()', (sid,)).fetchone()
     if not row:
@@ -92,7 +92,7 @@ def rate_limit(scope, identity, limit, seconds=900):
           RETURNING attempts""", (key,seconds,seconds)).fetchone()
     if row['attempts'] > limit:
         audit('rate_limit', scope=scope)
-        raise HTTPException(429, 'Too many requests. Try again later.', headers={'Retry-After':str(seconds)})
+        raise HTTPException(429, 'Muitas tentativas. Tente de novo mais tarde.', headers={'Retry-After':str(seconds)})
 
 ACCOUNT_FAILURES = 10
 
@@ -108,7 +108,7 @@ def throttle(email, request):
             WHERE key=%s AND started_at >= now()-interval '900 seconds'""", (key,)).fetchone()
     if row and row['attempts'] >= ACCOUNT_FAILURES:
         audit('rate_limit', scope='auth-account')
-        raise HTTPException(429, 'Too many requests. Try again later.', headers={'Retry-After': '900'})
+        raise HTTPException(429, 'Muitas tentativas. Tente de novo mais tarde.', headers={'Retry-After': '900'})
 
 def login_failed(email):
     """Count a failed sign-in (or registration attempt) against the account."""
@@ -117,10 +117,10 @@ def login_failed(email):
 def operator(request: Request):
     token = request.cookies.get('dtf_operator', '')
     if not token or len(token)>128:
-        raise HTTPException(401, 'Sign in to the local Kanban')
+        raise HTTPException(401, 'Entre no Kanban.')
     digest = hashlib.sha256(token.encode()).hexdigest()
     with connect() as c:
         row = c.execute('SELECT username FROM dtf_local.operator_sessions WHERE token_hash=%s AND expires_at>now()', (digest,)).fetchone()
     if not row:
-        raise HTTPException(401, 'Operator session expired')
+        raise HTTPException(401, 'Sua sessão expirou. Entre de novo.')
     return row['username']

app/printfile.py

@@ -46,7 +46,8 @@ Image.MAX_IMAGE_PIXELS = None
 
 
 class Unsupported(Exception):
-    """This item cannot be generated automatically; the reason is for the operator."""
+    """This item cannot be generated automatically. The reason is shown to the
+    operator on the Kanban, so it is written in Portuguese."""
 
 
 class Name(str):
@@ -153,14 +154,14 @@ class SourceImage:
             self.image = Image.open(path)
             self.format = self.image.format
         except Image.DecompressionBombError as exc:
-            raise Unsupported(f'"{name}" is too large to generate automatically') from exc
+            raise Unsupported(f'"{name}" é grande demais para gerar automaticamente') from exc
         except Exception as exc:
-            raise Unsupported(f'"{name}" is not an image this generator can read') from exc
+            raise Unsupported(f'"{name}" não é uma imagem que o gerador consiga ler') from exc
         if self.format not in SUPPORTED_FORMATS:
-            raise Unsupported(f'"{name}" is {self.format or "an unknown format"}; '
+            raise Unsupported(f'"{name}" está em {self.format or "formato desconhecido"}; '
-                              'only JPEG, PNG, WebP and TIFF are generated automatically')
+                              'só JPEG, PNG, WebP, TIFF e PDF são gerados automaticamente')
         if getattr(self.image, 'n_frames', 1) > 1 and self.format != 'TIFF':
-            raise Unsupported(f'"{name}" is animated or has several frames')
+            raise Unsupported(f'"{name}" é animado ou tem vários quadros')
         # Browsers draw a photo upright according to its EXIF orientation, and
         # the Site measured it that way, so the print must too.
         try:
@@ -181,8 +182,8 @@ class SourceImage:
             return self._embed_jpeg(pdf)
         width, height = self.image.size
         if width * height > MAX_DECODED_PIXELS:
-            raise Unsupported(f'"{self.name}" has {width} x {height} px, more than the '
+            raise Unsupported(f'"{self.name}" tem {width} × {height} px, mais do que o '
-                              'generator decodes; prepare this item by hand')
+                              'gerador processa; prepare este item à mão')
         return self._embed_pixels(pdf)
 
     def _colorspace(self, pdf, mode):
@@ -235,7 +236,7 @@ class SourceImage:
         elif mode in ('P', 'PA', 'RGB', 'RGBA', 'RGBa'):
             color_mode = 'RGB'
         else:
-            raise Unsupported(f'"{self.name}" uses the {mode} colour mode, which is not generated automatically')
+            raise Unsupported(f'"{self.name}" usa o modo de cor {mode}, que não é gerado automaticamente')
         if has_alpha:
             image = image.convert('RGBA' if color_mode == 'RGB' else 'LA')
         width, height = image.size
@@ -304,29 +305,29 @@ class PdfPage:
         try:
             self.pdf = pikepdf.open(path)
         except pikepdf.PasswordError as exc:
-            raise Unsupported(f'"{name}" is password-protected') from exc
+            raise Unsupported(f'"{name}" está protegido por senha') from exc
         except Exception as exc:
-            raise Unsupported(f'"{name}" is not a PDF this generator can read') from exc
+            raise Unsupported(f'"{name}" não é um PDF que o gerador consiga ler') from exc
         try:
             pages = len(self.pdf.pages)
             if pages != 1:
-                raise Unsupported(f'"{name}" has {pages} pages; only single-page PDFs are generated automatically')
+                raise Unsupported(f'"{name}" tem {pages} páginas; só PDFs de uma página são gerados automaticamente')
             self.page = self.pdf.pages[0]
             self.rotation = int(self.page.rotation) % 360
             if self.rotation not in (0, 90, 180, 270):
-                raise Unsupported(f'"{name}" has an unsupported page rotation')
+                raise Unsupported(f'"{name}" tem uma rotação de página não suportada')
             box = [float(v) for v in self.page.cropbox]
         except Unsupported:
             self.pdf.close()
             raise
         except Exception as exc:
             self.pdf.close()
-            raise Unsupported(f'"{name}" has a page this generator cannot read') from exc
+            raise Unsupported(f'"{name}" tem uma página que o gerador não consegue ler') from exc
         self.x0, self.y0 = min(box[0], box[2]), min(box[1], box[3])
         self.w, self.h = abs(box[2] - box[0]), abs(box[3] - box[1])
         if self.w <= 0 or self.h <= 0:
             self.pdf.close()
-            raise Unsupported(f'"{name}" has an empty page')
+            raise Unsupported(f'"{name}" tem uma página vazia')
         # As displayed, which is what the proportions are checked against.
         self.size = (self.h, self.w) if self.rotation in (90, 270) else (self.w, self.h)
 
@@ -373,7 +374,7 @@ def check_layout(item, sizes, vector=()):
     height = Decimal(str(production['height_cm']))
     billed = Decimal(str(item['billed_metres'])) * 100
     if height > billed + HEIGHT_TOLERANCE_CM:
-        raise Unsupported(f'layout is {height} cm long but only {billed} cm were billed')
+        raise Unsupported(f'a montagem tem {height} cm, mas só {billed} cm foram cobrados')
     lowest = None
     for placement in production['placements']:
         width_px, height_px = sizes[placement['source_index']]
@@ -384,8 +385,8 @@ def check_layout(item, sizes, vector=()):
         drift = abs((width_px / height_px) / (width_cm / length_cm) - 1)
         if drift > ASPECT_TOLERANCE:
             source = production['sources'][placement['source_index']]
-            raise Unsupported(f'file {placement["source_index"] + 1} has proportions that do not match '
+            raise Unsupported(f'o arquivo {placement["source_index"] + 1} tem proporções diferentes '
-                              f'the quoted {source["width_cm"]} x {source["length_cm"]} cm')
+                              f'das cotadas ({source["width_cm"]} × {source["length_cm"]} cm)')
         if placement['source_index'] in vector:
             continue
         dpi = width_px / (width_cm / 2.54)
@@ -405,7 +406,7 @@ def render(item, files, out, title):
     """
     production = item['production']
     if production.get('version') != 2:
-        raise Unsupported('item uses an obsolete production layout')
+        raise Unsupported('o item usa uma montagem antiga')
     sources = []
     try:
         for index in range(len(production['sources'])):

app/printjobs.py

@@ -101,9 +101,9 @@ def produce(storage, job, item, uploads):
     for upload_id in item['uploads']:
         row = uploads.get(upload_id)
         if not row or row['scan_state'] != 'clean':
-            raise Unsupported('an original file is missing or not cleared by the malware scan')
+            raise Unsupported('um arquivo original está ausente ou não foi liberado pelo antivírus')
         if row['purged_at'] or row['expired']:
-            raise Unsupported('an original file has passed its retention period')
+            raise Unsupported('um arquivo original passou do prazo de guarda')
     number = job['number']
     name = f'pedido-{number}-item-{job["item_index"] + 1}.pdf'
     with tempfile.TemporaryDirectory(prefix='print-') as scratch:

app/runtime.py

@@ -46,6 +46,16 @@ STATES = {'rec': 'Arte recebida', 'tra': 'Arte tratada', 'fil': 'Fila de impress
           'imp': 'Imprimindo', 'cor': 'Correção', 'fin': 'Finalizado'}
 TRANSITIONS = {'rec': ['tra','cor'], 'tra': ['fil','cor'], 'fil': ['imp','cor'],
                'imp': ['fin','cor'], 'cor': ['rec','tra'], 'fin': []}
+# Undoing a move made by mistake: one stage back, with an internal reason. It
+# is not a correction: the customer is not told and approved finals stay.
+BACK = {'tra': 'rec', 'fil': 'tra', 'imp': 'fil', 'fin': 'imp'}
+
+
+def require_delivery_available(service):
+    """Outside the local stack, a simulated freight price must never reach a
+    customer: until a real freight provider exists, only pickup is offered."""
+    if service != 'pickup' and ENVIRONMENT != 'local' and getattr(freight, 'name', '') == 'fake':
+        raise HTTPException(503, 'A entrega ainda não está disponível. Escolha a retirada em Franca.')
 
 
 def upload_row(c, upload_id, session_id, lock=False):

app/schema.sql

@@ -173,6 +173,9 @@ CREATE INDEX IF NOT EXISTS payment_events_unprocessed ON dtf_local.payment_event
 CREATE INDEX IF NOT EXISTS print_files_open ON dtf_local.print_files(created_at)
  WHERE status IN ('pending','rendering');
 
+-- A movement that undid an earlier one (a mistaken move), shown as such.
+ALTER TABLE dtf_local.movements ADD COLUMN IF NOT EXISTS back boolean NOT NULL DEFAULT false;
+
 -- The Kanban lists payment events a person must act on (money without an
 -- order, or a reversed payment on an existing order) until resolved.
 ALTER TABLE dtf_local.payment_events ADD COLUMN IF NOT EXISTS resolved_at timestamptz;

app/tiny.py

@@ -223,6 +223,44 @@ def order_payload(payload, contact_id, today=None):
     return pedido
 
 
+def configured_product(orders, mode):
+    """The Tiny product a mode's setting points at, or a reason it cannot be used."""
+    setting = PRODUCT_SETTINGS[mode]
+    value = os.environ.get(setting, '')
+    if not value.isdigit():
+        return None, f'{setting} sem id'
+    found = orders.request('GET', f'/produtos/{value}')
+    if found.get('situacao') != 'A':
+        return found, f"produto {value} não está ativo no Tiny ({found.get('situacao')})"
+    return found, 'ok'
+
+
+def check(auth=None, transport=None, orders=None):
+    """Read-only proof that the connection and permissions work: one order and
+    one contact listed and each configured product found active, nothing
+    created. Raises TinyNotConnected when there is no usable connection;
+    otherwise reports each read separately."""
+    orders = orders or TinyOrders(auth=auth or TinyAuth(), transport=transport)
+
+    def listed(path):
+        orders.request('GET', path, params={'limit': 1})
+        return 'ok'
+
+    reads = [('pedidos', lambda: listed('/pedidos')), ('contatos', lambda: listed('/contatos'))]
+    reads += [(PRODUCTS[mode], lambda mode=mode: configured_product(orders, mode)[1]) for mode in PRODUCT_SETTINGS]
+    results = {}
+    for name, read in reads:
+        try:
+            results[name] = read()
+        except TinyNotConnected:
+            raise
+        except TinyError as exc:
+            results[name] = str(exc)[:200]
+        except httpx.HTTPError:
+            results[name] = 'sem resposta do Tiny'
+    return results
+
+
 class TinyOrders:
     def __init__(self, auth=None, transport=None, today=None):
         missing = [name for name in required_settings() if not os.environ.get(name)]

app/tiny_probe.py

@@ -0,0 +1,132 @@
+"""Supervised checks against the client's real Tiny, run by hand from a
+container console (docker exec, or Portainer > Containers > worker > Console).
+Tiny has no sandbox, so this is how the adapter is proven on the real account.
+
+    python -m app.tiny_probe produtos [termo]   list active products (read-only)
+    python -m app.tiny_probe conferir           connection and the four product ids (read-only)
+    python -m app.tiny_probe pedido --cnpj ... --email ... --celular ... [--modo file]
+                                                show the test order; --confirmar creates it
+
+The test order goes through TinyOrders.deliver, exactly as the worker sends a
+paid order. The duplicate guard is then proven read-only first (the order must
+be found by its purchase-order number) and only then by a second delivery,
+which must return the existing order. If the search cannot find the order, the
+second delivery is not attempted: it would create a duplicate. Cancel the test
+order in Olist afterwards.
+"""
+import argparse
+import json
+import sys
+import time
+from datetime import datetime
+
+from .core.pricing import TIERS
+from .core.secrets import load as load_secret_files
+from . import tiny
+
+FIND_ATTEMPTS = 4
+FIND_WAIT_SECONDS = 5
+
+
+def test_order(cnpj, email, celular, mode, now=None):
+    number = 'TESTE-' + (now or datetime.now(tiny.BRASILIA)).strftime('%Y%m%d%H%M')
+    unit = TIERS[mode][0][1]
+    return {'order_id': 'teste-integracao', 'number': number, 'event': 'payment_approved',
+            'order': {'customer': {'cnpj': cnpj, 'mail': email, 'zap': celular},
+                      'items': [{'mode': mode, 'grade': 100, 'billed_metres': '1', 'unit_cents': unit}],
+                      'freight': {'service': 'pickup', 'total_cents': 0},
+                      'destination': None, 'total_cents': unit}}
+
+
+def produtos(orders, termo, out):
+    params = {'situacao': 'A', 'limit': 100}
+    if termo:
+        params['nome'] = termo
+    found = orders.request('GET', '/produtos', params=params).get('itens') or []
+    for item in found:
+        preco = (item.get('precos') or {}).get('preco')
+        out(f"{item['id']}\t{item.get('sku') or '-'}\t{item.get('descricao')}\tR$ {preco}")
+    out(f'{len(found)} produto(s) ativo(s)' + (f' com "{termo}"' if termo else '') + '.')
+
+
+def conferir(orders, out):
+    ok = True
+    for mode, setting in tiny.PRODUCT_SETTINGS.items():
+        product, result = tiny.configured_product(orders, mode)
+        ok &= result == 'ok'
+        described = f"{product.get('sku') or '-'} · {product.get('descricao')}" if product else ''
+        out(f'{setting} ({tiny.PRODUCTS[mode]}): {result} {described}'.rstrip())
+    for name, result in tiny.check(orders=orders).items():
+        if name in ('pedidos', 'contatos'):
+            ok &= result == 'ok'
+            out(f'{name}: {result}')
+    out('Tudo conferido.' if ok else 'Há pendências acima.')
+    return ok
+
+
+def pedido(orders, payload, confirm, out, wait=time.sleep):
+    cnpj = payload['order']['customer']['cnpj']
+    contacts = orders.request('GET', '/contatos', params={'cpfCnpj': cnpj, 'limit': 5}).get('itens') or []
+    known = [c for c in contacts if ''.join(ch for ch in str(c.get('cpfCnpj') or '') if ch.isdigit()) == cnpj]
+    out(f"Contato {cnpj}: " + (f"já existe no Tiny (id {known[0]['id']})" if known
+                               else 'não existe; será criado com o e-mail como nome'))
+    out('Pedido que será enviado:')
+    out(json.dumps(tiny.order_payload(payload, known[0]['id'] if known else 0), ensure_ascii=False, indent=2))
+    if not confirm:
+        out('Nada foi criado. Repita com --confirmar para criar este pedido no Tiny.')
+        return None
+    first = orders.deliver('teste-integracao', payload)
+    out(f"1º envio: {first['status']} · Tiny id {first['tiny_id']} · nº {first['tiny_number']}")
+    for attempt in range(FIND_ATTEMPTS):
+        found = orders.find(payload)
+        if found:
+            break
+        if attempt < FIND_ATTEMPTS - 1:
+            wait(FIND_WAIT_SECONDS)
+    else:
+        out(f'FALHA: a busca por {tiny.purchase_order(payload["number"])} não encontrou o pedido. '
+            'Um reenvio criaria um duplicado; o 2º envio não foi feito. Cancele o pedido no Olist.')
+        return False
+    second = orders.deliver('teste-integracao', payload)
+    out(f"2º envio: {second['status']} · Tiny id {second['tiny_id']}")
+    passed = second['status'] == 'already-created' and second['tiny_id'] == first['tiny_id']
+    out(('OK: o reenvio encontrou o mesmo pedido.' if passed else 'FALHA: o reenvio não devolveu o mesmo pedido.')
+        + f" Cancele o pedido nº {first['tiny_number']} no Olist.")
+    return passed
+
+
+def main(argv=None, orders=None, out=print):
+    parser = argparse.ArgumentParser(prog='python -m app.tiny_probe')
+    commands = parser.add_subparsers(dest='command', required=True)
+    listing = commands.add_parser('produtos')
+    listing.add_argument('termo', nargs='?', default='')
+    commands.add_parser('conferir')
+    order = commands.add_parser('pedido')
+    order.add_argument('--cnpj', required=True)
+    order.add_argument('--email', required=True)
+    order.add_argument('--celular', required=True)
+    order.add_argument('--modo', choices=sorted(tiny.PRODUCT_SETTINGS), default='file')
+    order.add_argument('--confirmar', action='store_true')
+    args = parser.parse_args(argv)
+    if orders is None:
+        load_secret_files()
+        orders = tiny.TinyOrders(auth=tiny.TinyAuth())
+    try:
+        if args.command == 'produtos':
+            produtos(orders, args.termo, out)
+            return 0
+        if args.command == 'conferir':
+            return 0 if conferir(orders, out) else 1
+        cnpj = ''.join(ch for ch in args.cnpj if ch.isdigit())
+        if len(cnpj) != 14:
+            out('Informe um CNPJ com 14 dígitos.')
+            return 2
+        payload = test_order(cnpj, args.email, args.celular, args.modo)
+        return 0 if pedido(orders, payload, args.confirmar, out) is not False else 1
+    except tiny.TinyError as exc:
+        out(f'Tiny: {exc}')
+        return 1
+
+
+if __name__ == '__main__':
+    sys.exit(main())

deploy/nginx.conf.template

@@ -48,6 +48,11 @@ server {
     }
     # Always revalidate HTML/JS/CSS after a deployment. Without this, a browser
     # can pair a new Kanban page with a cached older script after a rollout.
+    # The Site's product pages and cart are addresses of the same page (web/site-pages.js).
+    location ~ ^/(arquivo-por-metro|artes-avulsas|uv-arquivo-por-metro|uv-artes-avulsas|carrinho)/?$ {
+        expires -1;
+        try_files /index.html =404;
+    }
     location / {
         expires -1;
         try_files $uri $uri/ =404;

docs/LOCAL_SETUP.md

@@ -62,25 +62,35 @@ operator interfaces.
 4. Click the Site checkout button. Files upload directly to MinIO, remain
    quarantined until ClamAV returns `clean`, and then become eligible for a quote.
    The local banner displays a quote ID awaiting commercial review.
-5. Open Kanban and log in. In **Cotações**, download the original if needed,
+5. Open Kanban and log in. Open the **Cotações** tab, pick the quote, download
-   confirm/correct total metres and grade, tick the manual confirmation, and
+   the original if needed, confirm/correct metres and grade, tick the
-   click **Aprovar cotação**. For the fixture keep 1.01 m and grade 0.
+   confirmation at the bottom and click **Aprovar cotação**. For the fixture
+   keep 1.01 m and grade 0.
 6. Return to the Site and click its checkout action again. Inspect the
    authoritative server total, then click **Criar pedido de teste**. No real
    payment occurs.
-7. Refresh Kanban. The paid order starts in **Arte recebida**. Move it using
+7. Click **Atualizar** on the Kanban. The paid order appears in **Arte
-   the buttons or drag and drop to **Arte tratada**. Open **Arquivos de produção**,
+   recebida** on the **Produção** tab. Click its card to open the order panel,
-   select the manually prepared final files for every item, enter a review note,
+   then **Mover para Arte tratada** (dragging the card to a column also works).
-   tick the confirmation and click **Aprovar arquivos finais**. Use the harmless
+   In the panel's **Arquivos finais**, select the manually prepared final file
-   fixture again only for this local test. The text fixture is not an image, so
+   for every item, enter a review note, tick the confirmation and click
-   its print file shows **preparar à mão**; with a PNG or JPEG artwork the
+   **Aprovar arquivos finais**. Use the harmless fixture again only for this
-   generated PDF is preselected instead (see "Print files").
+   local test. The text fixture is not an image, so its print file shows
-   Continue through **Fila de impressão →
+   **Preparar à mão**; with a PNG, JPEG or PDF artwork the generated file is
-   Imprimindo → Finalizado**. A move to **Correção** requires a reason; it can
+   preselected instead (see "Print files"). Continue with the panel's main
-   return to **Arte recebida** or **Arte tratada**. Finalizado is terminal locally.
+   button through **Fila de impressão → Imprimindo → Finalizado**. **Pedir
-8. Inspect **Histórico** and **Eventos locais de integração**. Worker receipts
+   correção** asks for the reason the customer will see; from **Correção** the
-   should say recorded locally. Download links expire after five minutes;
+   order returns to **Arte recebida** or **Arte tratada**. A move made by
-   request another link from Kanban when needed.
+   mistake is undone with **Voltar para …**: one stage back, with an internal
+   reason recorded in the history. The customer is not notified, approved
+   finals stay, and "produção iniciada"/"pedido pronto" are sent only once per
+   order even if the stage is entered again. Dragging a card only goes forward;
+   the columns it can be dropped on are highlighted.
+8. The panel's **Histórico** lists every move. The **Pagamentos** tab lists
+   payments that need a person; **Integrações** shows the Tiny connection and
+   the send log; with the fake adapters every send reads "Registrado
+   (simulado)". Download links expire after five minutes; click again for a new
+   one. The previous Kanban is kept in git tag `ui-v1`.
 
 The manual quote step is necessary to enforce the backend trust boundary while
 automatic pre-flight is deferred. Browser measurements and grade are proposals.

docs/ROADMAP.md

@@ -7,16 +7,23 @@
 > Update the **Current step** line and the item status every time something moves.
 > Add new findings at the bottom of the relevant block rather than rewriting history.
 
-**Current step (2026-09-24, Week 2):** Client inputs for Mercado Pago and
+**Current step (2026-09-25, last day of Week 2):** Still waiting on the client
-freight were requested on 2026-09-24; Tiny access is already with the client.
+for Mercado Pago credentials and webhook access (1.1) and freight data (1.2);
-Built without them: server-side print-file generation (1.4), the delivery
+Tiny's app credentials are in production and the connection starts from the
-address (3.8), the Kanban's payment-issue and print-file views (1.5), and
+Kanban (1.3). Built and deployed without them: server-side print-file
-Mercado Pago and Tiny adapters written from the public API documentation and
+generation (1.4), the delivery address (3.8), the Kanban's payment-issue and
-tested against fake transports (1.1, 1.3). None of the provider work is a
+print-file views and its redesign (1.5), the Site redesign (5.17), and Mercado
-verified integration. The complete CI integration sequence passed locally on
+Pago and Tiny adapters written from the public API documentation and tested
-2026-09-24 (all API suites including the new `print_file_test`, adapter and
+against fake transports. None of the provider work is a verified integration.
-generator unit suites, retention, runtime security, and both browser suites),
+Every change passed the full integration sequence locally (Docker Engine in
-run with Docker Engine in WSL against a fresh build; pending a Gitea runner run.
+WSL) and on the Gitea runner, which publishes images on green pushes to `main`;
+the user verified each release in production after redeploying in Portainer.
+Operator and Site guides are in `docs/` (see Reporting).
+**Left for today:** product ids for the four products from the client's Tiny and
+one supervised real order (1.3); a Mercado Pago sandbox payment by PIX and card
+if the credentials arrive (1.1); the freight connector if the data arrives
+(1.2, otherwise the one Week 2 item that slips, on client inputs); the Week 2
+client report.
 
 **Previous step (2026-09-23):** Payment safety fixes 2.13 and 2.14 and
 the local order-correctness work in 3.6/3.9 have passed integration checks.
@@ -261,6 +268,16 @@ From the report already sent. These are dated promises, not backlog.
   real orders. Still to confirm on the client's account: plan (Construa+),
   product ids, token lifetimes, whether pickup needs a transportador, and
   rate limits.
+  **Supervised run (2026-09-25):** the payload and query parameters were
+  checked against Tiny's published v3 OpenAPI spec (`GET /pedidos` accepts
+  `cpfCnpj` and `dataInicial`; `GET /pedidos/{id}` returns
+  `numeroOrdemCompra`). "Testar conexão" on the Kanban now also reads the four
+  configured products and requires each to be active. `python -m
+  app.tiny_probe` runs from the worker console: `produtos` and `conferir` are
+  read-only; `pedido` shows the test order and creates it only with
+  `--confirmar`, through the worker's own `deliver`, then proves the duplicate
+  guard by search first and only then by a second delivery. Not yet run
+  against the client's account.
 - `[~]` 1.4 — Final print-file generation (see 3.2 and 3.6: production instructions
   must survive checkout before an output engine can reproduce the approved job).
   **Built (2026-09-24):** each paid item gets a PDF the width of the film and
@@ -287,6 +304,17 @@ download, approve as final, queue; hand-preparation routing and retry).
   print-file status per item, and a panel lists payments that need a person
   (money without an order, refunds after an order) until resolved. Confirm
   with the operation that these are the main states before closing.
+  **2026-09-24:** a mistaken move can be undone one stage back (`BACK` in
+  `app/runtime.py`) with an internal reason, flagged in the history
+  (`movements.back`), without notifying the customer; "production started" and
+  "ready" are enqueued once per order. Previously the only way back was
+  Correção, which messages the customer and invalidates approved finals.
+  **Redesign (2026-09-24):** tabs for Produção, Cotações, Pagamentos and
+  Integrações; an order panel with stages, items, print files, final files and
+  history; numbered pagination (20 per page) on quotes, payment issues and the
+  integration log, which also has filters; messages dismiss themselves. The
+  operator guide (`docs/guia-operador-kanban.pdf`) documents the flow for the
+  operation to confirm.
 - `[x]` 1.6 — **Block 0.2 + 0.3** were completed and verified on 2026-09-18.
 
 `[!]` The production compose currently blocks `dev_paid` (`ENVIRONMENT != 'local'`)
@@ -710,6 +738,22 @@ print-file evidence still need correction before this item can close.
   attempt counts against the source address and only failures count against
   the account; registration still counts every attempt. The security suite's
   lockout check (ten failures, then 429) is unchanged and passes.
+- `[x]` 5.17 — Site redesign (2026-09-24), Dropstar brand kept; the previous
+  look is tag `ui-v1`. The home, one page per product (`/arquivo-por-metro`,
+  `/artes-avulsas`, `/uv-arquivo-por-metro`, `/uv-artes-avulsas`) and
+  `/carrinho` have their own addresses but stay one document, so artwork held in
+  the browser survives moving between them (`web/site-pages.js`,
+  `web/site-steps.js`; nginx serves `index.html` for those paths). The product
+  page is built around a buy box (`web/site-compra.js`) that shows the item the
+  flow already priced (grade, price per metre, metres charged, total,
+  resolution acknowledgement and "Adicionar ao carrinho"); the duplicated
+  quality and preview panels are hidden. The cart has "Remover" per item,
+  "Esvaziar carrinho" and an 8-second undo. Fixed on the way, all already in
+  production before: the saved-cart note took a grid column and pushed the
+  order into a narrow strip, the panels outside `.w` ran edge to edge, and
+  "57 cm" wrapped on the ready-sheet option. The browser suite covers product
+  and cart addresses, reload on a product page, and remove/undo; the security
+  suite checks the new addresses carry the same CSP.
 - `[ ]` 5.13 — Define production recovery: scheduled encrypted offsite database
   and object backups, a consistent snapshot boundary, Swarm data placement and
   a restore rehearsal that opens every required live order file.
@@ -831,6 +875,12 @@ print-file evidence still need correction before this item can close.
 
 ### Reporting
 
+- `[x]` Operator guide (`docs/guia-operador-kanban.pdf`) and Site guide
+  (`docs/guia-site-dtf.pdf`), 2026-09-24, with screenshots of a throwaway stack
+  and fictional orders. The payment step has no screenshot until Mercado Pago
+  is configured, and the guides name the provisional Kanban domain; regenerate
+  them when either changes. Early work toward Week 3's "orientação à operação".
+- `[ ]` Week-2 client report, due end of day 2026-09-25.
 - `[x]` Week-1 client report (`Relatorio-Semana-1-DTF.docx`), corrected 2026-09-18 to
   remove the inaccurate "Arquivo por metro permanece separado, com seleção explícita"
   claim and the internal commit reference.

infra/nginx.conf.template

@@ -19,6 +19,10 @@ server {
         proxy_set_header X-Forwarded-For $remote_addr;
         client_max_body_size 2m;
     }
+    # The Site's product pages and cart are addresses of the same page (web/site-pages.js).
+    location ~ ^/(arquivo-por-metro|artes-avulsas|uv-arquivo-por-metro|uv-artes-avulsas|carrinho)/?$ {
+        try_files /index.html =404;
+    }
     location / { try_files $uri $uri/ =404; }
 }
 server {

tests/browser_test.mjs

@@ -63,6 +63,10 @@ try{
   await site.call('Page.reload');
   await waitFor(()=>site.eval('typeof window.dtfCheckout === "function"'),'reload after security probe');
   await site.click('[data-modo="file"]');
+  // Each product has its own page; the home's parts are not on it.
+  assert.deepEqual(await site.eval(`({path:location.pathname,page:document.documentElement.dataset.rota,
+    cards:getComputedStyle($('cards')).display,cart:getComputedStyle($('carr')).display})`),
+    {path:'/arquivo-por-metro',page:'produto',cards:'none',cart:'none'});
   await site.click('[data-cam="tabela"]');
   const root=await site.call('DOM.getDocument');
   const input=await site.call('DOM.querySelector',{nodeId:root.root.nodeId,selector:'#inp'});
@@ -77,6 +81,15 @@ try{
   await pause(800);
   await site.call('Page.reload');
   await waitFor(()=>site.eval('typeof pedido!=="undefined" && pedido.length===1'),'persistent cart recovery');
+  // Reloading a product page reopens that product; the cart is its own page.
+  assert.equal(await site.eval('modo'),'file');
+  await site.click('#cartLink');
+  await waitFor(()=>site.eval(`location.pathname==='/carrinho' && getComputedStyle($('carr')).display!=='none' && getComputedStyle($('foco')).display==='none'`),'cart page');
+  // Removing an item is one click and can be undone.
+  await site.click('[data-rmi="0"]');
+  assert.deepEqual(await site.eval(`({items:pedido.length,empty:!$('carrVazio').hidden||document.documentElement.hasAttribute('data-sem-itens'),undo:!$('desfazer').hidden})`),{items:0,empty:true,undo:true});
+  await site.click('#desfazerBtn');
+  assert.equal(await site.eval('pedido.length===1 && pedido[0].total===21.89 && $("desfazer").hidden'),true);
   assert.equal(await site.eval('pedido[0].localFiles[0].name'),'local-test.cdr');
   assert.equal(await site.eval('pedido[0].total'),21.89);
   assert.equal(await site.eval('document.getElementById("bPagar").disabled'),false);
@@ -92,6 +105,11 @@ try{
   await kanban.fill('#email',process.env.OPERATOR_EMAIL||'operator@example.test');
   await kanban.fill('#password',process.env.OPERATOR_PASSWORD||'local-operator-only');
   await kanban.eval('document.getElementById("login").requestSubmit()');
+  // Quotes live in their own tab; the review pane shows the one picked.
+  await waitFor(()=>kanban.eval('!document.getElementById("app").hidden'),'Kanban sign-in');
+  await kanban.click('[data-tab="quotes"]');
+  await waitFor(()=>kanban.eval(`!!document.querySelector('[data-quote-pick="${qid}"]')`),'quote listed on Kanban');
+  await kanban.click(`[data-quote-pick="${qid}"]`);
   await waitFor(async()=> (await kanban.text()).includes(qid.slice(0,8)),'quote on Kanban');
   assert.equal(await kanban.eval('sessionStorage.getItem("dtf-operator")'),null);
   assert.equal(await kanban.eval('document.getElementById("password").value'),'');
@@ -114,21 +132,34 @@ try{
   const oid=await kanban.eval(`board.orders.find(o=>o.quote_id===${JSON.stringify(qid)}).id`);
   assert.deepEqual(await kanban.eval(`(()=>{const spec=board.orders.find(o=>o.id===${JSON.stringify(oid)}).snapshot.items[0].production;const source=spec.sources[0];return {kind:source.kind,copies:source.copies,length:Number(source.length_cm),height:Number(spec.height_cm),placed:spec.placements.length}})()`),
     {kind:'sheet',copies:1,length:101,height:101,placed:1});
-  // Click real transition buttons, including rerender after each move.
+  // Open the order's panel from its card, then click the real transition
+  // buttons there, including the rerender after each move.
+  await kanban.click('[data-tab="board"]');
+  await kanban.click(`[data-card="${oid}"]`);
+  await waitFor(()=>kanban.eval(`!!document.querySelector('[data-order="${oid}"] [data-move]')`),'order panel');
   for(const [title,state] of [['Arte tratada','tra'],['Fila de impressão','fil'],['Imprimindo','imp'],['Finalizado','fin']]){
     if(state==='fil'){
-      await kanban.eval(`(()=>{const card=document.querySelector('[data-order="${oid}"]');[...card.querySelectorAll('button')].find(x=>x.textContent==='Arquivos de produção').click();})()`);
       await waitFor(()=>kanban.eval(`!!document.querySelector('[data-order="${oid}"] [data-final-item]')`),'final upload controls');
       const doc=await kanban.call('DOM.getDocument');
       const input=await kanban.call('DOM.querySelector',{nodeId:doc.root.nodeId,selector:`[data-order="${oid}"] [data-final-item]`});
       await kanban.call('DOM.setFileInputFiles',{nodeId:input.nodeId,files:[resolve('tests/fixtures/local-test.cdr')]});
       await kanban.fill(`[data-order="${oid}"] input[placeholder="Nota da revisão"]`,'Browser test final file');
-      await kanban.eval(`(()=>{const form=document.querySelector('[data-order="${oid}"] form');form.querySelector('[type=checkbox]').click();form.requestSubmit();})()`);
+      await kanban.eval(`(()=>{const check=document.querySelector('[data-order="${oid}"] [data-confirm]');check.click();check.closest('form').requestSubmit();})()`);
       await waitFor(()=>kanban.eval(`board.orders.find(o=>o.id==='${oid}').version===2`),'final file approval');
     }
-    await kanban.eval(`(()=>{const card=document.querySelector('[data-order="${oid}"]');[...card.querySelectorAll('button')].find(x=>x.textContent===${JSON.stringify('→ '+title)}).click();})()`);
+    await waitFor(()=>kanban.eval(`!!document.querySelector('[data-order="${oid}"] [data-move="${state}"]')`),'move to '+title);
+    await kanban.click(`[data-order="${oid}"] [data-move="${state}"]`);
     await waitFor(()=>kanban.eval(`board.orders.find(o=>o.id==='${oid}').state==='${state}'`),'transition '+state);
   }
+  // Undo a mistaken move from the panel: one stage back with an internal reason.
+  await waitFor(()=>kanban.eval(`!!document.querySelector('[data-order="${oid}"] [data-back="imp"]')`),'back button');
+  await kanban.click(`[data-order="${oid}"] [data-back="imp"]`);
+  await kanban.fill(`[data-order="${oid}"] form.reason input`,'Movido por engano (teste)');
+  await kanban.eval(`document.querySelector('[data-order="${oid}"] form.reason input').closest('form').requestSubmit()`);
+  await waitFor(()=>kanban.eval(`board.orders.find(o=>o.id==='${oid}').state==='imp'`),'undo to Imprimindo');
+  await waitFor(()=>kanban.eval(`!!document.querySelector('[data-order="${oid}"] [data-move="fin"]')`),'move to Finalizado again');
+  await kanban.click(`[data-order="${oid}"] [data-move="fin"]`);
+  await waitFor(()=>kanban.eval(`board.orders.find(o=>o.id==='${oid}').state==='fin'`),'finished again');
   // Reload proves the board is persisted on the backend.
   await kanban.call('Page.reload');
   await waitFor(()=>kanban.eval(`typeof board!=='undefined' && !!board && board.orders.some(o=>o.id==='${oid}'&&o.state==='fin')`),'persisted board');

tests/payment_test.py

@@ -109,7 +109,7 @@ def run():
 
     # The customer is told once, not once per delivery.
     board = Client()
-    events = board.call('/operator/board', operator=True)['events']
+    events = board.call('/operator/events?order=' + str(order['number']), operator=True)['events']
     paid = [e for e in events if e['payload'].get('order_id') == order['id']
             and e['payload'].get('event') == 'payment_approved']
     assert len(paid) == 2, f'expected one tiny and one whatsapp event, got {len(paid)}'

tests/print_file_test.py

@@ -126,7 +126,7 @@ def run():
     manual = upload_bytes(client, b'LOCAL PRINT TEST - NOT AN IMAGE', name='LOCAL-PRINT-TEST.cdr')
     order = paid_order(client, loose_item(manual, copies=1))
     order, row = wait_print(client, order['id'], 'manual')
-    assert 'not an image' in row['detail']['reason'], row
+    assert 'não é uma imagem' in row['detail']['reason'], row
     rows = client.call('/operator/orders/' + order['id'] + '/print-files', {}, operator=True)
     assert rows[0]['status'] == 'pending'
     wait_print(client, order['id'], 'manual')
@@ -141,17 +141,43 @@ def run():
     outcome = deliver({'event_id': event_id, 'reference': quote_id,
                        'status': 'approved', 'amount_cents': total - 1})
     assert outcome['outcome'].startswith('refused'), outcome
-    issues = client.call('/operator/board', operator=True)['payment_issues']
+    issues = client.call('/operator/payment-events?state=open&limit=100', operator=True)['issues']
     issue = next(i for i in issues if i['event_id'] == event_id)
+    assert client.call('/operator/board', operator=True)['payment_issues_total'] >= 1
     client.call('/operator/payment-events/' + issue['id'] + '/resolve', {'note': 'no'},
                 operator=True, expected=422)
     client.call('/operator/payment-events/' + issue['id'] + '/resolve',
                 {'note': 'Local test: refunded the underpayment'}, operator=True)
     client.call('/operator/payment-events/' + issue['id'] + '/resolve',
                 {'note': 'Local test: second resolution'}, operator=True, expected=404)
-    issues = client.call('/operator/board', operator=True)['payment_issues']
+    issues = client.call('/operator/payment-events?state=open&limit=100', operator=True)['issues']
     assert not any(i['event_id'] == event_id for i in issues)
-    print('PASS: refused paid notification is listed until an operator resolves it')
+    resolved_page = client.call('/operator/payment-events?state=resolved&limit=100', operator=True)
+    assert resolved_page['total'] >= 1
+    resolved = resolved_page['issues']
+    done = next(i for i in resolved if i['event_id'] == event_id)
+    assert done['resolution'] == 'Local test: refunded the underpayment' and done['resolved_by']
+    print('PASS: refused paid notification is listed until an operator resolves it, then kept as history')
+
+    # The send log pages by id and filters by destination, status, event and order.
+    page = client.call('/operator/events?limit=2', operator=True)
+    assert len(page['events']) == 2 and page['total'] > 2
+    second = client.call('/operator/events?limit=2&offset=2', operator=True)
+    assert all(e['id'] < page['events'][-1]['id'] for e in second['events'])
+    assert second['total'] == page['total']
+    tiny = client.call('/operator/events?provider=tiny&event=payment_approved&status=delivered&limit=100', operator=True)
+    assert tiny['events'] and all(e['provider'] == 'tiny' and e['payload']['event'] == 'payment_approved'
+                                   and e['delivered_at'] for e in tiny['events'])
+    client.call('/operator/events?provider=email', operator=True, expected=422)
+    client.call('/operator/events?limit=500', operator=True, expected=422)
+    quotes = client.call('/operator/quotes?kind=approved&limit=1&offset=0', operator=True)
+    assert 'total' in quotes and len(quotes['quotes']) <= 1
+    finished = client.call('/operator/orders/finished?limit=1', operator=True)
+    if finished['orders']:
+        last = finished['orders'][-1]
+        client.call('/operator/orders/finished?before_created_at=' + last['created_at'].replace('+', '%2B')
+                    + '&before_id=' + last['id'], operator=True)
+    print('PASS: send log, payment history and finished orders page and filter')
 
 
 if __name__ == '__main__':

tests/security_test.py

@@ -29,6 +29,10 @@ def run():
     assert script_src == "script-src 'self'", script_src
     assert "object-src 'none'" in policy
     assert 'cdnjs' not in policy, 'pdf.js is vendored; no CDN belongs in the policy'
+    # Product pages and the cart are addresses of the Site's page, under the same policy.
+    for page in ('/arquivo-por-metro','/artes-avulsas','/uv-arquivo-por-metro','/uv-artes-avulsas','/carrinho'):
+        assert raw(page,200)['Content-Security-Policy']==policy,page
+    raw('/carrinho/outra-coisa',404)
     raw('/api/health',400,{'Host':'attacker.invalid'})
     raw('/api/account/logout',403,{'Content-Type':'application/json','Origin':'https://attacker.invalid'},b'{}')
     raw('/api/account/logout',403,{'Content-Type':'application/json','Origin':'http://localhost:9999'},b'{}')

tests/smoke_test.py

@@ -185,10 +185,21 @@ def run():
         version+=1;assert moved['version']==version
     client.call('/operator/orders/'+oid+'/move',{'state':'rec','version':0},operator=True,expected=409)
     assert len(client.call('/operator/orders/'+oid+'/history',operator=True))==6
+    # A mistaken move can be undone one stage at a time, with an internal
+    # reason. The customer is not told again: going back and forward once more
+    # adds no messages (the outbox count below stays 8).
+    client.call('/operator/orders/'+oid+'/move',{'state':'imp','version':version},operator=True,expected=422)
+    client.call('/operator/orders/'+oid+'/move',{'state':'tra','version':version},operator=True,expected=409)
+    back=client.call('/operator/orders/'+oid+'/move',{'state':'imp','version':version,'reason':'Movido por engano'},operator=True)
+    assert back['state']=='imp';version+=1
+    client.call('/operator/orders/'+oid+'/move',{'state':'fin','version':version},operator=True);version+=1
+    history=client.call('/operator/orders/'+oid+'/history',operator=True)
+    assert len(history)==8 and history[-2]['back'] and history[-2]['reason']=='Movido por engano' and not history[-1]['back']
+    print('PASS: a mistaken move is undone one stage back with a reason, without messaging the customer again')
     print('PASS: all modes, authoritative review/prices/freight, tamper rejection, concurrent payment idempotency, transitions and history')
     deadline=time.monotonic()+30
     while time.monotonic()<deadline:
-        events=[e for e in client.call('/operator/board',operator=True)['events'] if e['payload']['order_id']==oid]
+        events=[e for e in client.call('/operator/events?order='+str(order['number']),operator=True)['events'] if e['payload']['order_id']==oid]
         if len(events)==8 and all(e['delivered_at'] and e['receipt'] for e in events):break
         time.sleep(1)
     else:raise AssertionError('Mock outbox did not drain')

tests/test_printfile.py

@@ -115,19 +115,19 @@ class PrintFileTests(unittest.TestCase):
 
     def test_refuses_what_it_cannot_reproduce(self):
         png = self.save(quadrants(), 'a.png')
-        with self.assertRaisesRegex(Unsupported, 'proportions'):
+        with self.assertRaisesRegex(Unsupported, 'proporções'):
             self.render(item([placement(0, 0, 20, 20)], [source(20, 20)], 20), [png])
-        with self.assertRaisesRegex(Unsupported, 'billed'):
+        with self.assertRaisesRegex(Unsupported, 'cobrados'):
             self.render(item([placement(0, 0, 20, 10)], [source(20, 10)], 150, billed='1.0'), [png])
         fake_pdf = os.path.join(self.dir.name, 'art.pdf')
         with open(fake_pdf, 'wb') as handle:
             handle.write(b'%PDF-1.4\n%%EOF\n')
-        with self.assertRaisesRegex(Unsupported, 'not a PDF'):
+        with self.assertRaisesRegex(Unsupported, 'não é um PDF'):
             self.render(item([placement(0, 0, 20, 10)], [source(20, 10)], 10), [fake_pdf])
         cdr = os.path.join(self.dir.name, 'art.cdr')
         with open(cdr, 'wb') as handle:
             handle.write(b'not artwork')
-        with self.assertRaisesRegex(Unsupported, 'not an image'):
+        with self.assertRaisesRegex(Unsupported, 'não é uma imagem'):
             self.render(item([placement(0, 0, 20, 10)], [source(20, 10)], 10), [cdr])
 
     def test_long_layouts_scale_user_space_instead_of_splitting(self):
@@ -247,12 +247,12 @@ class PdfSourceTests(unittest.TestCase):
         self.assertEqual(detail['min_dpi'], round(80 / (20 / 2.54)))
 
     def test_refuses_pdfs_it_cannot_place(self):
-        with self.assertRaisesRegex(Unsupported, '2 pages'):
+        with self.assertRaisesRegex(Unsupported, '2 páginas'):
             self.render(item([placement(0, 0, 20, 10)], [source(20, 10)], 10), [self.pdf('two.pdf', pages=2)])
-        with self.assertRaisesRegex(Unsupported, 'password'):
+        with self.assertRaisesRegex(Unsupported, 'senha'):
             self.render(item([placement(0, 0, 20, 10)], [source(20, 10)], 10),
                         [self.pdf('locked.pdf', password='secret')])
-        with self.assertRaisesRegex(Unsupported, 'proportions'):
+        with self.assertRaisesRegex(Unsupported, 'proporções'):
             self.render(item([placement(0, 0, 20, 20)], [source(20, 20)], 20), [self.pdf('square.pdf')])
 
     @unittest.skipIf(fitz is None, 'PyMuPDF is not installed')

tests/test_tiny.py

@@ -31,24 +31,34 @@ class FakeAuth:
         return 'access-1'
 
 
-@mock.patch.dict(os.environ, PRODUCTS)
+class FakeTinyCase(unittest.TestCase):
-class TinyTests(unittest.TestCase):
+    """A Tiny account in memory: contacts, orders and the four products."""
+
     def setUp(self):
         self.contacts = []
         self.orders = []
         self.calls = []
+        self.products = {value: {'id': int(value), 'sku': f'DTF-{value}', 'descricao': f'Produto {value}',
+                                 'situacao': 'A', 'precos': {'preco': 14.9}} for value in PRODUCTS.values()}
 
         def handler(request):
             path = request.url.path.removeprefix('/public-api/v3')
             self.calls.append((request.method, path))
             assert request.headers['authorization'] == 'Bearer access-1'
             if request.method == 'GET' and path == '/contatos':
-                cnpj = request.url.params['cpfCnpj']
+                cnpj = request.url.params.get('cpfCnpj')
-                return httpx.Response(200, json={'itens': [c for c in self.contacts if c['cpfCnpj'] == cnpj]})
+                return httpx.Response(200, json={'itens': [c for c in self.contacts if cnpj in (None, c['cpfCnpj'])]})
             if request.method == 'POST' and path == '/contatos':
                 contact = {**json.loads(request.content), 'id': 500 + len(self.contacts)}
                 self.contacts.append(contact)
                 return httpx.Response(200, json={'id': contact['id']})
+            if request.method == 'GET' and path.startswith('/produtos/'):
+                wanted = path.rsplit('/', 1)[-1]
+                if wanted not in self.products:
+                    return httpx.Response(404, json={'mensagem': 'não encontrado'})
+                return httpx.Response(200, json=self.products[wanted])
+            if request.method == 'GET' and path == '/produtos':
+                return httpx.Response(200, json={'itens': list(self.products.values())})
             if request.method == 'GET' and path == '/pedidos':
                 return httpx.Response(200, json={'itens': [{'id': o['id']} for o in self.orders]})
             if request.method == 'GET' and path.startswith('/pedidos/'):
@@ -61,9 +71,13 @@ class TinyTests(unittest.TestCase):
                 return httpx.Response(200, json={'id': order['id'], 'numeroPedido': order['numeroPedido']})
             return httpx.Response(404)
 
+        self.handler = handler
         self.tiny = TinyOrders(auth=FakeAuth(), transport=httpx.MockTransport(handler),
                                today=date(2026, 9, 24))
 
+
+@mock.patch.dict(os.environ, PRODUCTS)
+class TinyTests(FakeTinyCase):
     def test_payload_carries_contact_products_address_and_freight(self):
         pedido = order_payload(PAID, 777, date(2026, 9, 24))
         self.assertEqual((pedido['idContato'], pedido['numeroOrdemCompra'], pedido['data']),
@@ -106,11 +120,75 @@ class TinyTests(unittest.TestCase):
                 self.tiny.deliver('k3', PAID)
         self.assertNotIn(('POST', '/pedidos'), self.calls)
 
+    def test_connection_check_only_reads(self):
+        from app.tiny import check
+        results = check(auth=FakeAuth(), transport=httpx.MockTransport(self.handler))
+        self.assertEqual(set(results.values()), {'ok'})
+        self.assertEqual(len(results), 6)
+        self.assertTrue(all(method == 'GET' for method, _ in self.calls))
+        self.products['103']['situacao'] = 'I'
+        with mock.patch.dict(os.environ, {'TINY_PRODUCT_UV_AVULSA': ''}):
+            results = check(auth=FakeAuth(), transport=httpx.MockTransport(self.handler))
+        self.assertIn('não está ativo', results['DTF UV 28,5 cm · folha montada'])
+        self.assertEqual(results['DTF UV 28,5 cm · artes avulsas'], 'TINY_PRODUCT_UV_AVULSA sem id')
+        self.assertEqual(results['pedidos'], 'ok')
+        denied = check(auth=FakeAuth(), transport=httpx.MockTransport(lambda r: httpx.Response(403, text='forbidden')))
+        self.assertTrue(denied['pedidos'].startswith('GET /pedidos: 403'))
+
     def test_rate_limit_is_a_retryable_failure(self):
         tiny = TinyOrders(auth=FakeAuth(), transport=httpx.MockTransport(lambda r: httpx.Response(429)))
         with self.assertRaisesRegex(TinyError, 'rate limit'):
             tiny.deliver('k4', PAID)
 
 
+@mock.patch.dict(os.environ, PRODUCTS)
+class TinyProbeTests(FakeTinyCase):
+    """The supervised console tool run against the fake Tiny."""
+
+    def probe(self, *argv):
+        from app import tiny_probe
+        lines = []
+        code = tiny_probe.main(list(argv), orders=self.tiny, out=lines.append)
+        return code, '\n'.join(lines)
+
+    def test_products_and_settings_are_listed_without_writing(self):
+        code, text = self.probe('produtos', 'DTF')
+        self.assertEqual(code, 0)
+        self.assertIn('101\tDTF-101\tProduto 101', text)
+        code, text = self.probe('conferir')
+        self.assertEqual(code, 0)
+        self.assertIn('TINY_PRODUCT_UV_AVULSA (DTF UV 28,5 cm · artes avulsas): ok DTF-104', text)
+        self.assertTrue(all(method == 'GET' for method, _ in self.calls))
+
+    def test_order_is_shown_and_not_created_without_confirmation(self):
+        code, text = self.probe('pedido', '--cnpj', '11.222.333/0001-81', '--email', 'a@example.test',
+                                '--celular', '16999999999')
+        self.assertEqual(code, 0)
+        self.assertIn('"numeroOrdemCompra": "DTF-TESTE-', text)
+        self.assertIn('Nada foi criado', text)
+        self.assertEqual(self.orders, [])
+        self.assertTrue(all(method == 'GET' for method, _ in self.calls))
+
+    def test_confirmed_order_is_created_once_and_found_on_resend(self):
+        code, text = self.probe('pedido', '--cnpj', '11222333000181', '--email', 'a@example.test',
+                                '--celular', '16999999999', '--modo', 'uv', '--confirmar')
+        self.assertEqual(code, 0, text)
+        self.assertEqual(len(self.orders), 1)
+        self.assertEqual(self.orders[0]['itens'][0]['produto'], {'id': 104})
+        self.assertIn('2º envio: already-created', text)
+
+    def test_resend_is_skipped_when_the_search_cannot_find_the_order(self):
+        from app import tiny_probe
+        blind = lambda request: (httpx.Response(200, json={'itens': []})
+                                 if request.method == 'GET' and request.url.path.endswith('/pedidos')
+                                 else self.handler(request))
+        self.tiny = TinyOrders(auth=FakeAuth(), transport=httpx.MockTransport(blind), today=date(2026, 9, 24))
+        payload = tiny_probe.test_order('11222333000181', 'a@example.test', '16999999999', 'file')
+        lines = []
+        self.assertFalse(tiny_probe.pedido(self.tiny, payload, True, lines.append, wait=lambda s: None))
+        self.assertEqual(len(self.orders), 1)
+        self.assertIn('o 2º envio não foi feito', lines[-1])
+
+
 if __name__ == '__main__':
     unittest.main()

web/cart.js

@@ -3,7 +3,7 @@
   let database,scope,timer,restoring=true;
   let signedOut=false;
   window.addEventListener('dtf-private-data-cleared',()=>{signedOut=true;clearTimeout(timer);pedido=[];itemAtual=null;folhas=[];artes=[];});
-  const notice=document.createElement('p');notice.style.cssText='font:13px system-ui;color:#56616d;padding:8px 20px';
+  const notice=document.createElement('p');notice.className='carrAviso';
   document.getElementById('carr').prepend(notice);
   function transaction(mode,fn){return new Promise((resolve,reject)=>{const tx=database.transaction('cart',mode);const request=fn(tx.objectStore('cart'));let result;request.onsuccess=()=>result=request.result;tx.oncomplete=()=>resolve(result);tx.onerror=()=>reject(tx.error);tx.onabort=()=>reject(tx.error);});}
   async function save(){

web/checkout.js

@@ -127,7 +127,9 @@
         return;
       }
       if (quote.status==='pending_review') {
-        message('Arquivos enviados. No Kanban, confira metragem e nota e aprove a cotação '+draftId.slice(0,8)+'.');
+        message((await ready).environment==='local'
+          ? 'Arquivos enviados. No Kanban, confira metragem e nota e aprove a cotação '+draftId.slice(0,8)+'.'
+          : 'Arquivos enviados. Nossa equipe está conferindo a cotação '+draftId.slice(0,8)+'; o valor final aparece aqui em seguida.');
       } else if (quote.status==='approved') {
         message('Total validado no servidor: '+rs(quote.approved.total_cents/100)+' · inclui frete. Cotação válida por 24 horas.');
         if ((await ready).payment_provider === 'mercadopago') {
@@ -163,8 +165,9 @@
           } catch(error) { message(error.message); event.target.disabled=false; }
         });
       } else if (quote.status==='paid') {
-        message('Pedido #'+quote.order.number+' · etapa: '+quote.order.state+'.');
+        const STAGES={rec:'arte recebida',tra:'arte tratada',fil:'na fila de impressão',imp:'imprimindo',cor:'aguardando correção',fin:'finalizado'};
-        button('Novo pedido',()=>{clearDraft();location.reload();});
+        message('Pedido #'+quote.order.number+' · '+(STAGES[quote.order.state]||quote.order.state)+'.');
+        button('Novo pedido',()=>{clearDraft();location.assign('/');});
       } else {
         message('Cotação expirada. Envie o carrinho para uma nova revisão.');
         button('Nova cotação',clearDraft);

web/index.html

@@ -748,6 +748,8 @@ footer a:hover{color:var(--laranja2)}
  justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:11px;color:#5A6570}
 @media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}
 </style>
+<link rel="stylesheet" href="/site-v2.css?v=6">
+<script src="/site-pages.js"></script>
 </head>
 <body>
 
@@ -763,7 +765,7 @@ footer a:hover{color:var(--laranja2)}
   </div>
   <div class="acts">
     <a href="/portal.html">Minha conta</a>
-    <a href="#carr" id="cartLink">Carrinho (0)</a>
+    <a href="/carrinho" id="cartLink">Carrinho (0)</a>
   </div>
 </div></header>
 
@@ -784,10 +786,10 @@ footer a:hover{color:var(--laranja2)}
     </div>
   </div>
   <div class="mi on">
-    <a href="#envio">Impressão DTF</a>
+    <a href="/#envio">Impressão DTF</a>
     <div class="sub">
-      <a href="#envio">DTF Têxtil · 57 cm</a>
+      <a href="/#envio">DTF Têxtil · 57 cm</a>
-      <a href="#envio">DTF UV · 28,5 cm</a>
+      <a href="/#envio">DTF UV · 28,5 cm</a>
     </div>
   </div>
   <div class="mi">
@@ -820,171 +822,101 @@ footer a:hover{color:var(--laranja2)}
   </div>
 </div></nav>
 
-<header class="hero">
+<header class="hero2">
-  <div class="fundo" aria-hidden="true">
+  <div class="w hero2-grid">
-    <svg viewBox="0 0 1400 300" preserveAspectRatio="xMidYMid slice">
+    <div class="hero2-text">
-      <g fill="#fff">
+      <div class="chips">
-        <rect x="20"  y="16"  width="118" height="140" rx="5"/>
+        <span class="chip2 destaque">Metro a partir de R$ 14,90</span>
-        <rect x="150" y="16"  width="118" height="140" rx="5"/>
+        <span class="chip2">Franca · SP · envio em até 24 h</span>
-        <rect x="280" y="16"  width="76"  height="66"  rx="5"/>
-        <rect x="368" y="16"  width="76"  height="66"  rx="5"/>
-        <rect x="280" y="94"  width="164" height="62"  rx="5"/>
-        <rect x="456" y="16"  width="96"  height="96"  rx="5"/>
-        <rect x="564" y="16"  width="96"  height="96"  rx="5"/>
-        <rect x="456" y="124" width="204" height="32"  rx="5"/>
-        <rect x="672" y="16"  width="118" height="140" rx="5"/>
-        <rect x="802" y="16"  width="112" height="66"  rx="5"/>
-        <rect x="802" y="94"  width="112" height="62"  rx="5"/>
-        <rect x="926" y="16"  width="150" height="140" rx="5"/>
-        <rect x="1088" y="16" width="86"  height="86"  rx="5"/>
-        <rect x="1186" y="16" width="86"  height="86"  rx="5"/>
-        <rect x="1088" y="114" width="184" height="42" rx="5"/>
-        <rect x="1284" y="16" width="96"  height="140" rx="5"/>
-        <rect x="20"  y="168" width="76"  height="76"  rx="5"/>
-        <rect x="108" y="168" width="76"  height="76"  rx="5"/>
-        <rect x="196" y="168" width="76"  height="76"  rx="5"/>
-        <rect x="284" y="168" width="160" height="76"  rx="5"/>
-        <rect x="456" y="168" width="104" height="118" rx="5"/>
-        <rect x="572" y="168" width="104" height="118" rx="5"/>
-        <rect x="688" y="168" width="226" height="54"  rx="5"/>
-        <rect x="688" y="234" width="108" height="52"  rx="5"/>
-        <rect x="808" y="234" width="106" height="52"  rx="5"/>
-        <rect x="926" y="168" width="150" height="118" rx="5"/>
-        <rect x="1088" y="168" width="184" height="56" rx="5"/>
-        <rect x="1088" y="236" width="86" height="50"  rx="5"/>
-        <rect x="1186" y="236" width="86" height="50"  rx="5"/>
-        <rect x="1284" y="168" width="96" height="118" rx="5"/>
-        <rect x="20"  y="256" width="424" height="30"  rx="5"/>
-      </g>
-    </svg>
       </div>
-
+      <h1>A gente encaixa sua folha e você paga <em>menos metro</em></h1>
-  <div class="w">
+      <p>Mande a arte, veja a nota e a folha montada antes de pagar. Revisão de 5 pontos e reencaixe por nossa conta.</p>
-    <div class="hgrid">
+      <div class="hero2-cta">
-      <div>
+        <a href="/#envio" class="btn-laranja">Enviar minha arte <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
-        <div class="selos1">
+        <span>Sem cadastro · preço em segundos</span>
-          <span class="sel top">Metro a partir de R$ 14,90</span>
-          <span class="sel novo">Revisão inclusa</span>
-          <span class="sel pos">Franca · SP</span>
-        </div>
-        <h1>A gente encaixa sua folha<br><em>e você paga menos metro</em></h1>
-        <p class="sub2">Mande a arte, veja a nota em segundos e a folha montada antes de fechar.
-          <b>Revisão e remanejamento por nossa conta.</b></p>
-        <div class="hcta">
-          <a href="#envio" class="btn1">Enviar minha arte</a>
-          <span class="mini">sem cadastro · resposta em segundos</span>
       </div>
     </div>
-
+    <div class="hero2-folha" aria-hidden="true">
-      <div class="pfaixa">
+      <div class="hf-cab"><b>Sua folha montada</b><span>filme 57 cm · prévia</span></div>
-        <a class="pcard dest" href="#envio">
+      <div class="hf-area">
-          <span class="marc">mais vendido</span>
+        <i style="left:3%;top:5%;width:34%;height:40%;background:#FFA81A"></i>
-          <span class="apartir">com arte boa</span>
+        <i style="left:39%;top:5%;width:34%;height:40%;background:#FFA81A"></i>
-          <span class="vl">R$ 14,90<small> /m</small></span>
+        <i style="left:75%;top:5%;width:22%;height:55%;background:#2BB6D9"></i>
-          <span class="nm">Arquivo por metro</span>
+        <i style="left:3%;top:49%;width:22%;height:40%;border-radius:50%;background:#E0508F"></i>
-          <span class="dsc">têxtil · 57 cm</span>
+        <i style="left:27%;top:49%;width:22%;height:40%;border-radius:50%;background:#E0508F"></i>
-        </a>
+        <i style="left:51%;top:49%;width:22%;height:30%;background:#E9C23A"></i>
-        <a class="pcard" href="#envio">
+        <i style="left:75%;top:63%;width:22%;height:26%;background:#E9C23A"></i>
-          <span class="apartir">com arte boa</span>
-          <span class="vl">R$ 24,90<small> /m</small></span>
-          <span class="nm">Artes avulsas</span>
-          <span class="dsc">têxtil · montamos a folha</span>
-        </a>
-        <a class="pcard" href="#envio">
-          <span class="apartir">com arte boa</span>
-          <span class="vl">R$ 69,90<small> /m</small></span>
-          <span class="nm">Arquivo UV</span>
-          <span class="dsc">rígido · 28,5 cm</span>
-        </a>
-        <a class="pcard" href="#envio">
-          <span class="apartir">com arte boa</span>
-          <span class="vl">R$ 83,90<small> /m</small></span>
-          <span class="nm">Artes avulsas UV</span>
-          <span class="dsc">rígido · montamos a folha</span>
-        </a>
       </div>
+      <div class="hf-num">
+        <div><span>Metragem</span><b>0,60 m</b></div>
+        <div><span>Nota da arte</span><b class="verde">92</b></div>
+        <div><span>Preço do metro</span><b class="laranja">R$ 24,90</b></div>
       </div>
-
-    <div class="barrah">
-      <span><i>◆</i> Revisão de <b>5 pontos</b> sem custo</span>
-      <span><i>◆</i> Cobrança por <b>proporção</b>, a cada 10 cm</span>
-      <span><i>◆</i> Filme de <b>57 cm</b>, o dobro do padrão</span>
-      <span><i>◆</i> Prévia da folha <b>antes de pagar</b></span>
     </div>
   </div>
 </header>
 
-
+<section class="etapas2"><div class="w">
-<!-- PROVA -->
+  <div><span>1</span><div><b>Envie a arte</b><p>PNG, JPG ou PDF, conforme o produto. Sem cadastro.</p></div></div>
-<section class="prova"><div class="w">
+  <div><span>2</span><div><b>Veja nota e montagem</b><p>A folha e o preço aparecem na hora.</p></div></div>
-  <div class="p1"><b>Quanto melhor sua arte,<br><em>menor o preço do metro</em></b>
+  <div><span>3</span><div><b>Confira e pague</b><p>Conferimos a metragem e liberamos o pagamento.</p></div></div>
-    <span>Têxtil de R$ 19,90 a R$ 14,90 · UV de R$ 99,90 a R$ 69,90.
+  <div><span>4</span><div><b>Acompanhe</b><p>Aviso no WhatsApp a cada etapa.</p></div></div>
-      A nota aparece na tela antes de você pagar.</span></div>
-  <div class="p1"><b>Filme de 57 cm,<br><em>o dobro do padrão</em></b>
-    <span>Cabe o dobro de arte por metro. E reencaixamos sua folha sem cobrar.</span></div>
-  <div class="p1"><b>Você paga só<br><em>o que usa</em></b>
-    <span>Cobrança a cada 10 cm. Folha de 2,75 m custa 2,80 — não 3.</span></div>
-  <div class="p1"><b>Erro pego<br><em>antes de imprimir</em></b>
-    <span>5 pontos conferidos e a nota na tela. Sem custo.</span></div>
-  <div class="p1"><b>Envio em<br><em>até 24 horas</em></b>
-    <span>E avisamos por WhatsApp a cada etapa do pedido.</span></div>
 </div></section>
 
 <!-- ENVIO -->
-<section id="envio"><div class="w">
+<section id="envio">
+<nav class="passos" id="passos" aria-label="Etapas do pedido" hidden>
+  <a href="/#envio" data-passo="1"><span>1</span>Montagem</a>
+  <i aria-hidden="true"></i>
+  <a href="/carrinho" data-passo="2"><span>2</span>Dados e entrega</a>
+  <i aria-hidden="true"></i>
+  <a href="/carrinho#checkoutStatus" data-passo="3"><span>3</span>Pagamento</a>
+</nav>
+<div class="w">
+
 
   <!-- 3 cards -->
   <div id="cards">
-    <div class="et">Comece por aqui</div>
+    <div class="cards-cab">
-    <h2>Qual é o seu <em>caso</em>?</h2>
+      <div><div class="et">Escolha o produto</div>
+        <h2>Qual é o seu caso?</h2></div>
+      <p>O preço do metro depende da nota da arte: quanto melhor o arquivo, menor o preço.</p>
+    </div>
     <div class="escolha">
       <button class="ec f" data-modo="file">
-        <span class="marc">Mais vendido</span>
+        <div class="ec-top"><span class="ec-kind">DTF TÊXTIL · 57 CM</span><span class="marc2">Mais vendido</span></div>
-        <div class="top"><h3>Arquivo por metro</h3>
+        <h3>Arquivo por metro</h3>
-          <span class="p"><i>tabela</i>R$ 19,90<small>/m</small></span></div>
+        <p>Você monta a folha e manda pronta. Revisamos, corrigimos e reencaixamos se sobrar espaço.</p>
-        <div class="chama2">Quer pagar <b>R$ 14,90</b>? Arte em 300 DPI, em arquivo que a gente confere.</div>
+        <div class="ec-pe">
-        <div class="in">
+          <div class="ec-preco"><span>de</span><b data-de="file">—</b><span>a <em data-ate="file">—</em> /m conforme a nota da arte</span></div>
-          <span class="lg">DTF têxtil · 57 cm</span>
+          <span class="ec-go">Enviar minha folha</span>
-          <p>Você monta a folha e manda pronta. Revisamos, corrigimos e reencaixamos.</p>
-          <ul><li>Remanejamos e sua folha encolhe</li><li>Arquivo bom paga o mínimo</li>
-            <li>Você continua no controle do layout</li></ul>
-          <span class="go">Enviar minha folha ›</span>
         </div>
       </button>
-
       <button class="ec a" data-modo="avulsa">
-        <div class="top"><h3>Artes avulsas</h3><span class="p"><i>tabela</i>R$ 29,90<small>/m</small></span></div>
+        <div class="ec-top"><span class="ec-kind">DTF TÊXTIL · 57 CM</span></div>
-        <div class="chama2">Quer pagar <b>R$ 24,90</b>? Arte em 300 DPI, em arquivo que a gente confere.</div>
+        <h3>Artes avulsas</h3>
-        <div class="in">
+        <p>Cada arte num arquivo. A gente monta a folha com o melhor encaixe. Montagem inclusa no preço.</p>
-          <span class="lg">DTF têxtil · 57 cm</span>
+        <div class="ec-pe">
-          <p>Cada arte num arquivo. Montamos a folha com o melhor encaixe.</p>
+          <div class="ec-preco"><span>de</span><b data-de="avulsa">—</b><span>a <em data-ate="avulsa">—</em> /m conforme a nota da arte</span></div>
-          <ul><li>Sugerimos a largura que rende mais</li><li>Sobreposição não acontece</li>
+          <span class="ec-go">Enviar minhas artes</span>
-            <li>Montagem inclusa · R$ 10,00 no metro</li></ul>
-          <span class="go">Enviar minhas artes ›</span>
         </div>
       </button>
-
       <button class="ec u" data-modo="uvfile">
-        <div class="top"><h3>Arquivo por metro · UV</h3><span class="p"><i>tabela</i>R$ 85,90<small>/m</small></span></div>
+        <div class="ec-top"><span class="ec-kind">ADESIVO UV · 28,5 CM</span></div>
-        <div class="chama2">Quer pagar <b>R$ 69,90</b>? Arte em 300 DPI, em arquivo que a gente confere.</div>
+        <h3>Arquivo por metro · UV</h3>
-        <div class="in">
+        <p>Sua folha de UV montada. Para rígidos: caneca, garrafa, case. Não precisa de prensa.</p>
-          <span class="lg">Adesivo UV · 28,5 cm</span>
+        <div class="ec-pe">
-          <p>Sua folha de UV montada. Revisamos, corrigimos e reencaixamos.</p>
+          <div class="ec-preco"><span>de</span><b data-de="uvfile">—</b><span>a <em data-ate="uvfile">—</em> /m conforme a nota da arte</span></div>
-          <ul><li>Arquivo bom paga o mínimo</li><li>Remanejamos e sua folha encolhe</li>
+          <span class="ec-go">Enviar folha de UV</span>
-            <li>Rígido: caneca, garrafa, case</li></ul>
-          <span class="go">Enviar minha folha de UV ›</span>
         </div>
       </button>
-
       <button class="ec u" data-modo="uv">
-        <div class="top"><h3>Artes avulsas · UV</h3><span class="p"><i>tabela</i>R$ 99,90<small>/m</small></span></div>
+        <div class="ec-top"><span class="ec-kind">ADESIVO UV · 28,5 CM</span></div>
-        <div class="chama2">Quer pagar <b>R$ 83,90</b>? Arte em 300 DPI, em arquivo que a gente confere.</div>
+        <h3>Artes avulsas · UV</h3>
-        <div class="in">
+        <p>Cada arte num arquivo. Montamos a folha de UV com o melhor encaixe. Montagem inclusa no preço.</p>
-          <span class="lg">Adesivo UV · 28,5 cm</span>
+        <div class="ec-pe">
-          <p>Cada arte num arquivo. Montamos a folha de UV com o melhor encaixe.</p>
+          <div class="ec-preco"><span>de</span><b data-de="uv">—</b><span>a <em data-ate="uv">—</em> /m conforme a nota da arte</span></div>
-          <ul><li>Sugerimos a largura que rende mais</li><li>Montagem inclusa</li>
+          <span class="ec-go">Enviar artes de UV</span>
-            <li>Não precisa de prensa</li></ul>
-          <span class="go">Enviar minhas artes de UV ›</span>
         </div>
       </button>
     </div>
@@ -992,33 +924,33 @@ footer a:hover{color:var(--laranja2)}
 
   <!-- painel focado -->
   <div class="foco" id="foco">
-    <button class="voltar" id="bVoltar"><span>‹</span>Trocar de produto</button>
+    <button class="voltar" id="bVoltar"><span>‹</span>Todos os produtos</button>
     <div class="focoGrid">
       <div class="cat" id="catFoco">
       <div class="cabfoco" style="padding:20px 22px 14px;margin:0">
         <div><h3 id="fTit">—</h3><span class="lg" id="fLg" style="display:block"></span></div>
         <span class="pr2" id="fPreco"></span>
         <p id="fSub"></p>
-      </div>
+            <div class="caminhos tipoEnvio" id="tipoEnvio" hidden>
-      <div class="in" style="padding:0 22px 22px">
-        <div class="foco2" id="foco2">
-          <div class="fila">
-            <div class="trocouCam" id="trocouCam" style="display:none"></div>
-            <div class="caminhos" id="tipoEnvio" hidden>
               <button type="button" class="cam on" data-tipo="folha">
                 <span class="mk2"></span>
-                <div><b>Já é uma folha montada</b>
+                <div><b>Folha já montada</b>
                   <span>a imagem ocupa a largura inteira do filme de
                     <span id="larguraFolhaPronta">57</span> cm</span>
                   <em id="tipoFolhaPreco">—</em></div>
               </button>
               <button type="button" class="cam" data-tipo="avulsa">
                 <span class="mk2"></span>
-                <div><b>São artes separadas</b>
+                <div><b>Artes separadas</b>
                   <span>você informa a largura de cada uma e nós montamos a folha</span>
                   <em id="tipoAvulsaPreco">—</em></div>
               </button>
             </div>
+      </div>
+      <div class="in" style="padding:0 22px 22px">
+        <div class="foco2" id="foco2">
+          <div class="fila">
+            <div class="trocouCam" id="trocouCam" style="display:none"></div>
             <div class="trocouCam" id="avisoTipo" style="display:none"></div>
             <div class="caminhos" id="caminhos">
               <button class="cam on" data-cam="auto">
@@ -1044,28 +976,10 @@ footer a:hover{color:var(--laranja2)}
             <div id="lista"></div>
             <div class="resumoA" id="rA" style="display:none"></div>
             <input type="file" id="inp" hidden>
-            <div class="aoVivo" id="aoVivo"></div>
-          </div>
-          <aside class="mont" id="mont">
-            <div class="montcab"><b id="montcabTit">Montagem ao vivo</b>
-              <div class="zoomB"><button id="zMenos" title="Diminuir">−</button>
-                <span id="zTxt">100%</span>
-                <button id="zMais" title="Aumentar">+</button></div>
-              <span id="vMt">—</span></div>
-            <div id="vArea"></div>
-            <div id="vUso"></div>
-            <p class="montpe">Prévia aproximada. No servidor o encaixe é refeito do zero —
-              o resultado sai igual ou melhor, nunca pior.</p>
-
-          </aside>
-        </div>
-      </div>
-    </div>
-  </div>
     <aside class="req" id="req">
-      <h3 class="reqcab">O que devo saber<br>sobre a arte</h3>
+              <h3 class="reqcab">Dicas sobre a arte</h3>
 
-      <details open>
+              <details>
                 <summary>Como pagar o menor metro</summary>
                 <ul>
                   <li class="s"><b>300 DPI no tamanho que vai imprimir.</b> É a nota máxima
@@ -1128,6 +1042,41 @@ footer a:hover{color:var(--laranja2)}
               </details>
             </aside>
           </div>
+          <aside class="mont" id="mont">
+            <div class="montcab"><b id="montcabTit">Montagem ao vivo</b>
+              <div class="zoomB"><button id="zMenos" title="Diminuir">−</button>
+                <span id="zTxt">100%</span>
+                <button id="zMais" title="Aumentar">+</button></div>
+              <span id="vMt">—</span></div>
+            <div id="vArea"></div>
+            <div id="vUso"></div>
+            <p class="montpe">Prévia. O encaixe final é refeito no servidor e nunca sai pior.</p>
+            <div class="compra" id="compra">
+              <div class="aoVivo" id="aoVivo"></div>
+              <div id="compraVals" hidden>
+                <div class="cNota"><span>Nota da arte</span><i><i id="cNotaBar"></i></i><b id="cNota">—</b></div>
+                <div class="cLin"><span>Preço do metro</span><span><s id="cTabela"></s><b id="cMetro">—</b></span></div>
+                <div class="cLin"><span>Metragem cobrada</span><b id="cMetragem">—</b></div>
+                <p class="cObs" id="cObs"></p>
+                <div class="cTot"><span>Total</span><b id="cTotal">—</b></div>
+                <div id="qmsg" style="display:none"></div>
+    <div class="ciente" id="ciente">
+              <h4 id="cienteTit">Ressalva de resolução</h4>
+              <div id="cienteTxt"></div>
+              <label><input type="checkbox" id="cienteOk">
+                <span>Li e entendi. Quero imprimir assim mesmo.</span></label>
+            </div>
+              </div>
+              <button type="button" class="cAdd" id="bAdd" disabled>Adicionar ao carrinho</button>
+              <p class="cPe">Revisão de 5 pontos e reencaixe grátis</p>
+            </div>
+
+          </aside>
+        </div>
+      </div>
+    </div>
+  </div>
+    </div>
   </div>
 
   <!-- nota -->
@@ -1140,16 +1089,9 @@ footer a:hover{color:var(--laranja2)}
     </div>
     <div class="qbar"><i id="qbi" style="width:0%"></i></div>
     <div class="qitens" id="qitens"></div>
-    <div class="ciente" id="ciente">
-      <h4 id="cienteTit">Ressalva de resolução</h4>
-      <div id="cienteTxt"></div>
-      <label><input type="checkbox" id="cienteOk">
-        <span>Li e entendi. Quero imprimir assim mesmo.</span></label>
-    </div>
     <div class="qbts">
       <button class="qb chama" id="qOk">Seguir para o pedido</button>
     </div>
-    <div id="qmsg" style="margin-top:12px;font-size:12.5px;display:none"></div>
   </div>
 
   <!-- prévia da montagem -->
@@ -1166,7 +1108,7 @@ footer a:hover{color:var(--laranja2)}
       <div class="pinfo" id="pInfo"></div>
     </div>
     <div class="pcta">
-      <button class="pb p" id="pOk">Está certo, fechar o pedido</button>
+      <button class="pb p" id="pOk">Adicionar ao carrinho</button>
       <button class="pb" id="pMais">Adicionar mais artes</button>
       <button class="pb" id="pVolta">Trocar o arquivo</button>
     </div>
@@ -1179,7 +1121,8 @@ footer a:hover{color:var(--laranja2)}
       <h3>Seu pedido</h3>
 
       <div class="cxE">
-        <h4>Itens</h4>
+        <div class="itensCab"><h4>Itens</h4>
+          <button type="button" class="esvaziar" id="bEsvaziar">Esvaziar carrinho</button></div>
         <div id="itens"></div>
         <div id="atual">
           <div class="rot" style="margin-top:12px">Item que você está montando</div>
@@ -1260,7 +1203,7 @@ footer a:hover{color:var(--laranja2)}
       <div class="tot"><span>Total</span><b id="carrTot">R$ 0,00</b></div>
       <div class="cbts">
         <button id="bPagar">Ir para o pagamento</button>
-        <button id="bMais" class="sec">Adicionar outro produto</button>
+        <button id="bMais" class="sec">Continuar comprando</button>
       </div>
       <p class="obs">A nota fiscal sai no CNPJ informado. O arquivo fica guardado por 30 dias;
         depois disso, um novo pedido precisa do arquivo de novo. O histórico do pedido
@@ -1274,101 +1217,47 @@ footer a:hover{color:var(--laranja2)}
     <p id="checkoutStatus" class="avisoE" role="status" aria-live="polite"></p>
     <div id="checkoutActions"></div>
   </div>
+  <div class="desfazer" id="desfazer" role="status" hidden>
+    <span id="desfazerTxt"></span><button type="button" id="desfazerBtn">Desfazer</button>
+  </div>
+  <div class="carrVazio" id="carrVazio" hidden>
+    <h2>Seu carrinho está vazio</h2>
+    <p>Escolha um produto, envie a arte e veja o preço na hora.</p>
+    <a href="/#envio" class="btn-laranja">Escolher produto</a>
+  </div>
 </div></section>
 
-<!-- INFORMAÇÃO EM CARROSSEL -->
+<!-- PREÇO E VANTAGENS -->
-<section id="info"><div class="w">
+<section id="info" class="info2"><div class="w info2-grid">
-  <div class="et">Como funciona</div>
+  <div class="info2-preco">
-  <h2>Tudo o que você precisa saber, <em>em cinco cartões</em></h2>
+    <div class="et">Preço</div>
-
+    <h2>Arte melhor, metro mais barato</h2>
-  <div class="carro">
+    <p>A nota aparece na tela antes de você pagar. Preço da folha que você monta:</p>
-    <div class="trilho" id="trilho">
-
-      <div class="slide">
-        <div class="stop">
-          <div class="sinfo"><span class="et2">Preço</span><h3>Arte melhor,<br>metro mais barato</h3></div>
-          <div class="selo"><i></i><b>−25<em>%</em></b><span>no metro</span></div>
-        </div>
-        <p>Vale nos quatro produtos. Preço da folha que você monta:</p>
     <table>
-          <tr><td class="cab">nota</td><td class="cab">têxtil</td><td class="cab">UV</td></tr>
+      <thead><tr><th scope="col">Nota da arte</th><th scope="col">Têxtil 57 cm</th><th scope="col">UV 28,5 cm</th></tr></thead>
-          <tr><td>90–100</td><td>R$ 14,90</td><td>R$ 69,90</td></tr>
+      <tbody>
-          <tr><td>75–89</td><td>R$ 16,20</td><td>R$ 73,90</td></tr>
+        <tr><td>90 a 100</td><td class="melhor">R$ 14,90</td><td class="melhor">R$ 69,90</td></tr>
-          <tr><td>60–74</td><td>R$ 17,50</td><td>R$ 77,90</td></tr>
+        <tr><td>75 a 89</td><td>R$ 16,20</td><td>R$ 73,90</td></tr>
-          <tr><td>40–59</td><td>R$ 18,70</td><td>R$ 81,90</td></tr>
+        <tr><td>60 a 74</td><td>R$ 17,50</td><td>R$ 77,90</td></tr>
+        <tr><td>40 a 59</td><td>R$ 18,70</td><td>R$ 81,90</td></tr>
         <tr><td>abaixo de 40</td><td>R$ 19,90</td><td>R$ 85,90</td></tr>
+      </tbody>
     </table>
-        <div class="dest">Se a montagem for nossa, some <b>R$ 10,00</b> no têxtil e
+    <p class="nota2">Montagem das artes avulsas: + R$ 10,00 no têxtil e + R$ 14,00 no UV, em qualquer faixa.</p>
-          <b>R$ 14,00</b> no UV — mesma escada, em qualquer faixa</div>
-      </div>
-
-      <div class="slide">
-        <div class="stop">
-          <div class="sinfo"><span class="et2">Largura</span><h3>O dobro do<br>filme padrão</h3></div>
-          <div class="selo"><i></i><b>57<em>cm</em></b><span>de filme</span></div>
-        </div>
-        <p>A maioria trabalha com 28,5 cm. Na nossa largura cabe o dobro de arte
-          por metro corrido — e o metro sai mais barato por peça.</p>
-        <ul>
-          <li>Duas artes de 28 cm lado a lado</li>
-          <li>Menos emenda, menos corte</li>
-          <li>DTF UV também disponível, em 28,5 cm</li>
-        </ul>
-      </div>
-
-      <div class="slide">
-        <div class="stop">
-          <div class="sinfo"><span class="et2">Encaixe</span><h3>Reencaixamos<br>sua folha de graça</h3></div>
-          <div class="selo"><i></i><b>grátis</b><span>reencaixe</span></div>
-        </div>
-        <p>Se a sua montagem deixa espaço sobrando, refazemos o encaixe com o mesmo
-          motor que usamos nas nossas montagens.</p>
-        <ul>
-          <li>Artes que se tocam, separadas com 5 mm</li>
-          <li>Giramos as peças para aproveitar a largura</li>
-          <li>A folha encolhe e a sua conta diminui</li>
-        </ul>
-        <div class="dest">Refazemos o encaixe <b>antes de imprimir</b>, sem cobrar nada</div>
-      </div>
-
-      <div class="slide">
-        <div class="stop">
-          <div class="sinfo"><span class="et2">Cobrança</span><h3>Você paga<br>o que usa</h3></div>
-          <div class="selo"><i></i><b>10<em>cm</em></b><span>de cada vez</span></div>
-        </div>
-        <p>Arredondamos a cada 10 cm. Uma folha de 2,75 m custa 2,80 m — quem cobra
-          metro cheio cobraria 3.</p>
-        <ul>
-          <li>Pedido mínimo de 1 metro</li>
-          <li>A identificação do pedido é por nossa conta</li>
-          <li>Sem taxa de arquivo, sem taxa de revisão</li>
-        </ul>
-      </div>
-
-      <div class="slide">
-        <div class="stop">
-          <div class="sinfo"><span class="et2">Sem burocracia</span><h3>Conta só na<br>hora de pagar</h3></div>
-          <div class="selo"><i></i><b>0</b><span>conta e senha</span></div>
-        </div>
-        <p>Sobe a arte e vê o preço sem conta nenhuma. A conta nasce no pagamento, junto com o CNPJ da nota — e o próximo pedido já vem com suas artes anteriores. A revisão de 5 pontos vem junto —
-          há quem cobre R$ 19,90 por pedido só por isso.</p>
-        <ul>
-          <li>Sem cadastro para subir e ver o preço</li>
-          <li>Envio em até 24 horas</li>
-          <li>WhatsApp a cada etapa do pedido</li>
-          <li>Arquivo guardado 30 dias · histórico do pedido na conta</li>
-        </ul>
-      </div>
-
-    </div>
-    <div class="navc">
-      <button id="cAnt" aria-label="Anterior">‹</button>
-      <button id="cPro" aria-label="Próximo">›</button>
-      <div class="pontos" id="cPontos"></div>
   </div>
+  <div class="info2-vant">
+    <div><b class="n">57 cm</b><b>O dobro do filme padrão</b><span>Cabe o dobro de arte por metro corrido.</span></div>
+    <div><b class="n">10 cm</b><b>Você paga o que usa</b><span>Folha de 2,75 m custa 2,80 m, não 3. Pedido mínimo de 1 metro.</span></div>
+    <div><b class="n">Grátis</b><b>Reencaixe da folha</b><span>Sobrou espaço? Refazemos o encaixe e a conta diminui.</span></div>
+    <div><b class="n">5 pontos</b><b>Revisão sem custo</b><span>Erro pego antes de imprimir. Arquivo guardado por 30 dias.</span></div>
   </div>
 </div></section>
 
+<div class="barraM" id="barraM" hidden>
+  <div><span id="barraMSub">Seu pedido</span><b id="barraMTot">R$ 0,00</b></div>
+  <a href="/carrinho" id="barraMBtn">Continuar</a>
+</div>
+
 <footer><div class="w">
   <div class="frow">
     <span class="fmarca"><img src="https://cdn.vnda.com.br/dropstar/2025/12/17/logo-header-15125700-16129080.png?v=1766009286" alt="Dropstar">DTF</span>
@@ -1404,10 +1293,12 @@ footer a:hover{color:var(--laranja2)}
 <script src="/site-packing.js"></script>
 <script src="/site-cart.js"></script>
 <script src="/site-flow.js"></script>
+<script src="/site-compra.js"></script>
 <script src="/privacy.js"></script>
 <script src="/upload.js"></script>
 <script src="/checkout.js"></script>
 <script src="/cart.js"></script>
+<script src="/site-steps.js"></script>
 
 </body>
 </html>

web/kanban.css

@@ -0,0 +1,203 @@
+/* Kanban DTF. The previous look is kept in git tag ui-v1. */
+:root{
+  --bg:#0F1113;--bar:#13161A;--col:#13161A;--card:#1A1D21;--card2:#23282D;--panel:#15181B;
+  --line:#262A2F;--line2:#2A2F35;--line3:#3A4047;
+  --tx:#ECE9E4;--tx2:#D5D2CC;--muted:#A3A9B0;--faint:#8B929A;
+  --accent:#FF8B2B;--accent-tx:#FFB575;--ok:#6FD19C;--warn:#F2B33D;--bad:#F4968B;--bad-line:#5A3530;
+  --rec:#2BB6D9;--tra:#E0508F;--fil:#E9C23A;--imp:#D9D6D0;--cor:#F06A5B;--fin:#3FB97A;
+  --mono:Manrope,system-ui,sans-serif;
+}
+*{box-sizing:border-box}
+html,body{margin:0;background:var(--bg);color:var(--tx)}
+body{font:14px/1.45 Manrope,system-ui,sans-serif;font-variant-numeric:tabular-nums}
+button,input,textarea{font:inherit;color:inherit}
+button{cursor:pointer}
+button:disabled{opacity:.5;cursor:default}
+a{color:var(--accent-tx)}
+[hidden]{display:none!important}
+.mono{font-family:var(--mono)}
+.muted{color:var(--muted)}
+.faint{color:var(--faint)}
+.btn{height:36px;padding:0 12px;border-radius:8px;border:1px solid var(--line2);background:var(--card2);color:var(--tx);font-size:13px;font-weight:600;white-space:nowrap}
+.btn:hover{border-color:var(--line3)}
+.btn.ghost{background:transparent;color:var(--muted)}
+.btn.primary{height:44px;border:0;background:var(--accent);color:#0F1113;font-weight:800;font-size:14px;padding:0 18px}
+.btn.primary:hover{filter:brightness(1.08)}
+.btn.danger{height:44px;background:transparent;border-color:var(--bad-line);color:var(--bad);font-weight:700;font-size:14px}
+.btn.warn{border:0;background:var(--warn);color:#0F1113;font-weight:800}
+.chip{height:34px;padding:0 12px;border-radius:8px;border:1px solid var(--line2);background:transparent;color:var(--muted);font-size:13px;font-weight:600}
+.chip[aria-pressed=true]{border-color:var(--accent);background:rgba(255,139,43,.12);color:var(--accent-tx)}
+.badge{font-size:12px;font-weight:700;border-radius:999px;padding:1px 8px;background:var(--accent);color:#0F1113}
+.badge.warn{background:var(--warn);color:#0F1113}
+.badge:empty{display:none}
+.eyebrow{font-size:12px;color:var(--faint);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin:0 0 8px}
+input[type=text],input[type=email],input[type=password],input[type=number],input:not([type]),textarea{height:40px;padding:0 12px;border-radius:8px;border:1px solid var(--line3);background:var(--bg);color:var(--tx)}
+textarea{height:auto;padding:10px 12px;min-height:72px;width:100%;resize:vertical}
+input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}
+input[type=file]{font-size:13px;color:var(--muted);max-width:100%}
+.check{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--tx2)}
+.ok{color:var(--ok)}.warn{color:var(--warn)}.bad{color:var(--bad)}
+
+/* Sign-in */
+.login{max-width:380px;margin:12vh auto 0;padding:32px;border:1px solid var(--line2);border-radius:14px;background:var(--panel);display:flex;flex-direction:column;gap:14px}
+.login label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--muted)}
+.login .hint{font-size:12px;color:var(--faint);margin:0}
+
+/* Top bar */
+.top{height:64px;padding:0 24px;display:flex;align-items:center;gap:22px;border-bottom:1px solid var(--line);background:var(--bar);position:sticky;top:0;z-index:5}
+.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;letter-spacing:-.01em;white-space:nowrap}
+.brand i{width:28px;height:28px;border-radius:7px;background:var(--accent);color:#0F1113;font-style:normal;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center}
+.tabs{display:flex;gap:4px;align-self:stretch}
+.tabs button{display:flex;align-items:center;gap:8px;padding:0 14px;border:0;border-bottom:2px solid transparent;background:none;color:var(--muted);font-weight:600;font-size:14px}
+.tabs button[aria-selected=true]{color:var(--tx);font-weight:700;border-bottom-color:var(--accent)}
+.tabs .count{font-family:var(--mono);font-size:12px;color:var(--muted)}
+.search{display:flex;align-items:center;gap:8px;width:300px;height:38px;padding:0 12px;border:1px solid var(--line2);border-radius:9px;background:var(--card);color:var(--faint);margin-left:auto}
+.search input{flex:1;min-width:0;border:0;background:transparent;height:auto;padding:0;outline:none}
+.tinydot{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);white-space:nowrap}
+.tinydot::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--dot,#5B6168)}
+.tinydot:empty{display:none}
+.who{font-size:13px;color:var(--muted);white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}
+#status{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:20;margin:0;max-width:min(640px,calc(100vw - 32px));padding:10px 16px;border-radius:10px;border:1px solid var(--line3);background:#1E2226;color:var(--tx);font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
+#status:empty,#login-status:empty{display:none}
+#status.error{border-color:var(--bad-line);color:var(--bad)}
+#login-status.error{color:var(--bad)}
+
+/* Board */
+main{padding:0 24px 24px}
+.bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 0 12px}
+.bar h1,.split h1,.page h1{margin:0;font-size:22px;font-weight:800;letter-spacing:-.02em}
+.chips{display:flex;gap:8px;flex-wrap:wrap}
+.bar .chips{margin-left:auto}
+.kan{display:grid;grid-template-columns:repeat(6,minmax(220px,1fr));gap:12px;overflow-x:auto;padding-bottom:8px;align-items:start}
+.col{display:flex;flex-direction:column;gap:10px;background:var(--col);border:1px solid #22262B;border-radius:12px;padding:12px;min-height:320px}
+.col.allowed{border-color:rgba(255,139,43,.45);background:#17140F}
+.col.target{border-color:var(--accent)}
+.col-head{display:flex;flex-direction:column;gap:6px;padding:2px 2px 8px;border-bottom:1px solid #22262B}
+.col-head div{display:flex;align-items:center;gap:8px}
+.col-head h2{margin:0;font-size:14px;font-weight:700}
+.col-head .swatch{width:10px;height:10px;border-radius:3px;background:var(--c)}
+.col-head .n{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--muted)}
+.col-head small{font-size:12px;color:var(--faint)}
+.col .empty{font-size:12px;color:var(--faint);padding:8px 2px}
+.card{text-align:left;display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:10px;border:1px solid var(--line2);background:var(--card);width:100%}
+.card:hover,.card.open{border-color:var(--line3);background:#1E2226}
+.card .row{display:flex;align-items:baseline;gap:8px;width:100%}
+.card .num{font-size:14px;font-weight:800}
+.card .age{margin-left:auto;font-size:12px;color:var(--faint)}
+.card .cust{font-size:13px;font-weight:600;color:var(--tx);width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.tags{display:flex;flex-wrap:wrap;gap:6px}
+.tag{font-size:12px;padding:3px 8px;border-radius:6px;background:var(--card2);color:var(--tx2)}
+.card .foot{display:flex;align-items:center;gap:6px;font-size:12px}
+.card .foot .where{margin-left:auto;color:var(--muted)}
+.late{font-size:12px;color:#F06A5B;font-weight:600}
+
+/* Order panel */
+.drawer{position:fixed;inset:0;z-index:10;display:flex;justify-content:flex-end}
+.scrim{position:absolute;inset:0;background:rgba(8,9,11,.6)}
+.panel{position:relative;width:min(600px,100vw);height:100%;background:var(--panel);border-left:1px solid var(--line2);display:flex;flex-direction:column}
+.panel-head{padding:20px 24px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
+.panel-head .row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
+.panel-head .num{font-size:22px;font-weight:800}
+.stage{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--c) 18%,transparent);color:var(--c)}
+.close{margin-left:auto;width:40px;height:40px;border-radius:8px;border:1px solid var(--line2);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center}
+.steps{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
+.steps li{display:flex;flex-direction:column;gap:6px;font-size:11px;color:var(--faint)}
+.steps li::before{content:"";height:4px;border-radius:4px;background:var(--line2)}
+.steps li.done{color:var(--muted)}.steps li.done::before{background:var(--c)}
+.steps li.now{color:var(--tx);font-weight:700}.steps li.now::before{background:var(--c)}
+.moves{display:flex;gap:10px;flex-wrap:wrap}
+.moves .primary{flex:1}
+.reason{display:flex;flex-direction:column;gap:8px}
+.panel-body{flex:1;overflow:auto;padding:20px 24px 32px;display:flex;flex-direction:column;gap:24px}
+.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
+.facts b{display:block;font-size:14px}
+.facts span{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
+.item{display:flex;gap:14px;padding:14px;border:1px solid var(--line2);border-radius:12px;background:var(--card)}
+.item.attention{border-color:#4A3A1E;background:#1C1A15}
+.item .preview{width:96px;flex-shrink:0;border-radius:8px;background:var(--card2);display:flex;align-items:flex-start;justify-content:center;padding:6px}
+.item .preview svg{width:100%;height:auto;display:block}
+.item .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
+.item .title{display:flex;align-items:baseline;gap:8px}
+.item .title b{font-size:14px}
+.item .title .mono{margin-left:auto;font-size:13px}
+.item .line{font-size:12px;color:var(--muted)}
+.item .file{display:flex;align-items:center;gap:8px;font-size:13px}
+.buttons{display:flex;gap:8px;flex-wrap:wrap}
+.finals{display:flex;flex-direction:column;gap:12px}
+.finals .rev{font-size:13px;display:flex;flex-direction:column;gap:4px;padding:10px 12px;border:1px solid var(--line2);border-radius:10px}
+.finals form{display:flex;flex-direction:column;gap:12px;padding:14px;border:1px solid var(--line2);border-radius:12px}
+.finals .slot{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}
+.timeline{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
+.timeline li{display:flex;gap:12px;font-size:13px}
+.timeline li::before{content:"";width:8px;height:8px;margin-top:6px;border-radius:999px;background:var(--c,var(--muted));flex-shrink:0}
+.timeline small{display:block;color:var(--faint);font-size:12px}
+
+/* Quotes */
+#tab-quotes{padding-top:18px}
+.split{display:flex;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;min-height:calc(100vh - 140px)}
+.split .list{width:460px;flex-shrink:0;border-right:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:12px;background:#111316}
+.qitem{text-align:left;display:flex;justify-content:space-between;gap:12px;padding:14px;border-radius:10px;border:1px solid var(--line2);background:var(--card);width:100%}
+.qitem[aria-current=true]{border-color:var(--accent);background:#1F1A15}
+.qitem b{display:block;font-size:14px;overflow-wrap:anywhere}
+.qitem span{font-size:12px;color:var(--muted)}
+.qitem .right{text-align:right;flex-shrink:0}
+.qitem .flag{display:block;color:var(--warn);font-weight:600;margin-top:4px}
+.pane{flex:1;min-width:0;display:flex;flex-direction:column}
+.pane .head{padding:18px 24px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
+.pane .head b{font-size:18px;overflow-wrap:anywhere}
+.pane .content{flex:1;padding:20px 24px;display:flex;flex-direction:column;gap:16px}
+.pane .fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
+.pane .fields label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:var(--muted)}
+.pane .fields input[readonly]{color:var(--faint);background:var(--panel);border-color:var(--line2)}
+.pane .foot{padding:16px 24px;border-top:1px solid var(--line);background:var(--bar);display:flex;align-items:center;gap:16px;flex-wrap:wrap}
+.pane .foot .total{margin-left:auto;font-family:var(--mono);color:var(--muted)}
+.pane .foot .total b{color:var(--tx)}
+.pane .note{padding:24px;color:var(--muted)}
+
+/* Payments and integrations */
+.page{display:flex;flex-direction:column;gap:22px;padding-top:18px}
+.page h2{margin:0 0 10px;font-size:15px;font-weight:800}
+.issue{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 18px;border-radius:12px;border:1px solid #4A3A1E;background:#1C1A15;margin-bottom:8px}
+.issue .text{flex:1;min-width:260px;display:flex;flex-direction:column;gap:4px}
+.issue .text b{font-size:14px}
+.issue .text span{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
+.issue form{display:flex;gap:8px;align-items:center}
+.issue.done{border-color:var(--line2);background:var(--card)}
+.pager{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 4px;border-top:1px solid var(--line);margin-top:8px;font-size:13px;color:var(--muted)}
+.pager-size{display:flex;align-items:center;gap:8px}
+.pager-size select{height:34px;padding:0 8px;border-radius:8px;border:1px solid var(--line3);background:var(--bg);color:var(--tx)}
+.pager-range{margin-left:auto}
+.pager-nav{display:flex;align-items:center;gap:6px}
+.pager .pg{width:34px;height:34px;border-radius:8px;border:1px solid var(--line2);background:transparent;color:var(--tx);font-size:16px;line-height:1}
+.pager .pg:disabled{color:var(--faint);opacity:.45}
+.pager-page{display:flex;align-items:center;gap:6px;margin:0 4px}
+.pager-page input{width:56px;height:34px;text-align:center;padding:0 4px}
+.pager.compact{gap:10px;padding:12px 0 0}
+.pager.compact .pager-range{margin-left:0}
+.pager.compact .pager-nav{margin-left:auto}
+.filters{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}
+.field{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:var(--muted)}
+.field select,.field input{height:38px;min-width:160px;padding:0 10px;border-radius:8px;border:1px solid var(--line3);background:var(--bg);color:var(--tx)}
+.field input{min-width:110px;width:110px}
+.issue input{width:320px}
+.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
+.integration{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:12px;border:1px solid var(--line2);background:var(--card)}
+.integration .head{display:flex;align-items:center;gap:8px}
+.integration .head b{font-size:15px}
+.integration .head .dot{width:9px;height:9px;border-radius:999px;background:var(--dot,#5B6168)}
+.integration .head em{margin-left:auto;font-style:normal;font-size:12px;font-weight:700;color:var(--dotx,var(--muted))}
+.integration p{margin:0;font-size:13px;color:var(--muted)}
+.integration .buttons{margin-top:auto}
+table.log{width:100%;border-collapse:collapse;font-size:13px}
+table.log th{text-align:left;color:var(--faint);font-weight:600;padding:8px 12px;border-bottom:1px solid var(--line)}
+table.log td{padding:10px 12px;border-bottom:1px solid #1E2226;vertical-align:top}
+.good{color:var(--ok);font-weight:600}.retry{color:var(--warn);font-weight:600}
+
+@media (max-width:900px){
+  .top{flex-wrap:wrap;height:auto;padding:10px 16px;gap:10px}
+  .search{order:5;width:100%;margin-left:0}
+  main{padding:0 16px 16px}
+  .split{flex-direction:column}
+  .split .list{width:auto;border-right:0;border-bottom:1px solid var(--line)}
+  .facts,.pane .fields{grid-template-columns:1fr}
+}

web/kanban.html

@@ -1,21 +1,70 @@
 <!doctype html>
 <html lang="pt-BR"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
-<title>DTF · Kanban local</title>
+<title>Kanban DTF</title>
-<style>
+<link rel="preconnect" href="https://fonts.googleapis.com">
-:root{--bg:#0B0D10;--card:#15181D;--card2:#1C2026;--linha:#282C34;--tx:#EDEBE6;--fraco:#a1a6af;--ciano:#00B8DA}
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&amp;display=swap">
-*{box-sizing:border-box}body{background:var(--bg);color:var(--tx);font:14px/1.5 system-ui,sans-serif;padding:20px;margin:0}
+<link rel="stylesheet" href="/kanban.css?v=redesign-7">
-h1{font-size:24px;margin:0}h2{font-size:18px}header{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:20px}
+</head><body>
-.aviso{background:#152026;border-left:3px solid var(--ciano);padding:12px;color:#b9cbd2;margin:16px 0}
+<form id="login" class="login" hidden>
-button,input,select{font:inherit;border:1px solid #56616d;border-radius:5px;padding:8px;background:var(--card2);color:var(--tx)}
+  <div class="brand"><i aria-hidden="true">D</i>Kanban DTF</div>
-button{cursor:pointer}button:hover{border-color:var(--ciano)}button:disabled{opacity:.5}input[type=number]{width:100px}
+  <label>E-mail <input id="email" type="email" autocomplete="username" required></label>
-label{display:inline-flex;gap:8px;align-items:center;margin:5px}#kan{display:grid;grid-template-columns:repeat(6,minmax(220px,1fr));gap:10px;overflow-x:auto;padding-bottom:16px}
+  <label>Senha <input id="password" type="password" autocomplete="current-password" required></label>
-.col{background:var(--card);border:1px solid var(--linha);border-radius:9px;min-height:250px;padding:10px}.col h2{font-size:14px;border-bottom:2px solid var(--cc);padding-bottom:10px}.col.alvo{border-color:var(--ciano)}
+  <button class="btn primary">Entrar</button>
-.cd,.review{background:var(--card2);border:1px solid var(--linha);border-left:3px solid var(--cc,var(--ciano));border-radius:6px;padding:12px;margin-bottom:10px}.cd{cursor:grab}.cd p{overflow-wrap:anywhere}.meta{color:var(--fraco);font-size:12px}.actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.error{color:#ffad83}.print{margin-top:8px;padding-top:8px;border-top:1px solid var(--linha)}.print button{margin-left:6px}#tiny{font-size:12px;color:var(--fraco);margin-right:8px}#tiny button{margin-left:6px}#status{min-height:24px}details{margin:16px 0}pre{white-space:pre-wrap;overflow-wrap:anywhere}a{color:var(--ciano)}
+  <p id="login-status" class="hint" role="alert"></p>
-</style></head><body>
+</form>
-<header><h1>Kanban DTF</h1><span id="tiny"></span><button id="refresh">Atualizar</button><button id="logout">Sair</button></header>
+
-<div class="aviso">Confira a cotação manualmente. Em Arquivos de produção, envie e aprove os arquivos finais de todos os itens antes de colocar o pedido na fila. Não há validação automática de arte.</div>
+<div id="app" hidden>
-<form id="login"><label>E-mail <input id="email" type="email" autocomplete="username" required></label><label>Senha <input id="password" type="password" autocomplete="current-password" required></label><button>Entrar</button></form>
+  <header class="top">
-<p id="status" role="status"></p>
+    <div class="brand"><i aria-hidden="true">D</i>Kanban DTF</div>
-<section id="payments"></section><section id="reviews"></section><div id="kan"></div>
+    <nav class="tabs" aria-label="Seções">
-<details><summary>Eventos locais de integração</summary><pre id="events"></pre></details>
+      <button type="button" data-tab="board" aria-selected="true">Produção <span class="count" id="count-board"></span></button>
-<script src="/upload.js"></script><script src="/kanban.js?v=pdf-print-1"></script></body></html>
+      <button type="button" data-tab="quotes" aria-selected="false">Cotações <span class="badge" id="badge-quotes"></span></button>
+      <button type="button" data-tab="payments" aria-selected="false">Pagamentos <span class="badge warn" id="badge-payments"></span></button>
+      <button type="button" data-tab="integrations" aria-selected="false">Integrações</button>
+    </nav>
+    <label class="search">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="M20 20l-3.5-3.5"></path></svg>
+      <input id="search" type="search" placeholder="Buscar pedido, cliente ou CNPJ" aria-label="Buscar pedido, cliente ou CNPJ">
+    </label>
+    <span id="tiny" class="tinydot"></span>
+    <span id="who" class="who"></span>
+    <button class="btn ghost" id="refresh" type="button">Atualizar</button>
+    <button class="btn ghost" id="logout" type="button">Sair</button>
+  </header>
+  <p id="status" role="status"></p>
+  <main>
+    <section id="tab-board">
+      <div class="bar"><h1>Produção</h1><span class="muted" id="board-summary"></span><div class="chips" id="filters"></div></div>
+      <div class="kan" id="kan"></div>
+    </section>
+    <section id="tab-quotes" hidden>
+      <div class="split">
+        <div class="list">
+          <h1>Cotações</h1>
+          <div class="chips" id="quote-filters"></div>
+          <div id="quote-list" style="display:flex;flex-direction:column;gap:8px"></div>
+        </div>
+        <div class="pane" id="reviews"></div>
+      </div>
+    </section>
+    <section id="tab-payments" class="page" hidden>
+      <h1>Pagamentos</h1>
+      <section id="payments"></section>
+    </section>
+    <section id="tab-integrations" class="page" hidden>
+      <h1>Integrações</h1>
+      <section><div class="grid4" id="integrations"></div></section>
+      <section><h2>Registro de envios</h2>
+        <div class="filters" id="event-filters"></div>
+        <table class="log"><thead><tr><th scope="col">Quando</th><th scope="col">Pedido</th><th scope="col">Destino</th><th scope="col">Evento</th><th scope="col">Resultado</th></tr></thead><tbody id="events"></tbody></table>
+        <div id="events-more"></div>
+      </section>
+    </section>
+  </main>
+</div>
+
+<div class="drawer" id="drawer" hidden>
+  <div class="scrim" id="scrim"></div>
+  <aside class="panel" id="panel" aria-label="Pedido"></aside>
+</div>
+<script src="/upload.js"></script><script src="/kanban.js?v=redesign-8"></script></body></html>

web/kanban.js

@@ -1,249 +1,656 @@
-/* Reuses the prototype palette, column names and drag/drop interaction; no machine controls. */
+/* Kanban DTF: production board, quote review, payments and integrations.
+   Everything is built with textContent; nothing from an order or a customer is
+   ever parsed as HTML. The previous screen is in git tag ui-v1. */
 const $ = id=>document.getElementById(id);
 // Remove credentials saved by older local builds. Only HttpOnly sessions now.
 sessionStorage.removeItem('dtf-operator');
-let board;
+
-let extraQuotes={pending:[],approved:[]};
+const STAGE_COLORS={rec:'var(--rec)',tra:'var(--tra)',fil:'var(--fil)',imp:'var(--imp)',cor:'var(--cor)',fin:'var(--fin)'};
-let moreQuotes={pending:false,approved:false};
+const FLOW=['rec','tra','fil','imp','fin'];
+const PRODUCT={file:'DTF Têxtil · folha montada',avulsa:'DTF Têxtil · artes avulsas',uvfile:'DTF UV · folha montada',uv:'DTF UV · artes avulsas'};
+const SHORT={file:'Têxtil folha',avulsa:'Têxtil avulsa',uvfile:'UV folha',uv:'UV avulsa'};
+const EVENTS={payment_approved:'Pagamento aprovado',production_started:'Produção iniciada',correction_needed:'Correção necessária',ready:'Pedido pronto'};
+const LATE_HOURS=4;
+// Payment outcomes are recorded by the API in English; operators read Portuguese.
+function outcomeText(outcome){
+  const rules=[
+    [/^refused: paid (\S+) but quote total is (\d+)/,m=>'valor pago ('+(m[1]==='None'?'não informado':money(Number(m[1])))+') diferente do total da cotação ('+money(Number(m[2]))+')'],
+    [/^refused: quote expired/,()=>'a cotação venceu antes do pagamento'],
+    [/^refused: quote not found/,()=>'cotação não encontrada'],
+    [/^refused: reference is not a quote id/,()=>'a referência do pagamento não é uma cotação'],
+    [/^refused: quote was never reviewed/,()=>'a cotação ainda não tinha sido revisada'],
+    [/^refused: quote uses an obsolete/,()=>'a cotação usa uma montagem antiga'],
+    [/^attention: payment (\w+) for order (\d+)/,m=>'pagamento '+(m[1]==='refunded'?'estornado':'cancelado')+' depois do pedido #'+m[2]],
+  ];
+  for(const [pattern,text] of rules){const m=outcome.match(pattern);if(m)return text(m);}
+  return outcome;
+}
+
+let board=null;
+let tab='board', filter='all', search='', openOrder=null, openToken=0;
+let quoteKind='pending', pickedQuote=null;
+let olderFinished=[], finishedMore=null;
+
 const money=cents=>(cents/100).toLocaleString('pt-BR',{style:'currency',currency:'BRL'});
-function node(tag,text,className){const e=document.createElement(tag);if(text!==undefined)e.textContent=text;if(className)e.className=className;return e;}
+const metres=value=>Number(value).toLocaleString('pt-BR',{minimumFractionDigits:2,maximumFractionDigits:2})+' m';
-function action(text,fn){const b=node('button',text);b.onclick=async()=>{b.disabled=true;try{await fn();}catch(e){$('status').textContent=e.message;}finally{b.disabled=false;}};return b;}
+const when=value=>new Date(value).toLocaleString('pt-BR',{day:'2-digit',month:'2-digit',hour:'2-digit',minute:'2-digit'});
+function ago(value){
+  const minutes=Math.max(0,Math.round((Date.now()-new Date(value))/60000));
+  if(minutes<60)return 'há '+minutes+' min';
+  const hours=Math.round(minutes/60);
+  return hours<48?'há '+hours+' h':'há '+Math.round(hours/24)+' dias';
+}
+function node(tag,text,className){const e=document.createElement(tag);if(text!==undefined&&text!==null)e.textContent=text;if(className)e.className=className;return e;}
+function button(text,fn,className='btn'){
+  const b=node('button',text,className);b.type='button';
+  b.onclick=async event=>{event.stopPropagation();b.disabled=true;try{await fn();}catch(e){say(e.message,true);}finally{b.disabled=false;}};
+  return b;
+}
+// Messages are notifications, not state: they clear themselves. Errors stay
+// longer so they can be read; a caller can hold one for as long as it needs.
+let sayTimer=null;
+function say(text,error=false,ms){
+  clearTimeout(sayTimer);
+  for(const id of ['status','login-status']){$(id).textContent=text||'';$(id).classList.toggle('error',!!error);}
+  if(text)sayTimer=setTimeout(()=>say(''),ms??(error?8000:4000));
+}
+function icon(path){
+  const ns='http://www.w3.org/2000/svg';const svg=document.createElementNS(ns,'svg');
+  svg.setAttribute('width','14');svg.setAttribute('height','14');svg.setAttribute('viewBox','0 0 24 24');
+  svg.setAttribute('fill','none');svg.setAttribute('stroke','currentColor');svg.setAttribute('stroke-width','2.2');svg.setAttribute('aria-hidden','true');
+  for(const d of path){const p=document.createElementNS(ns,d.startsWith('circle')?'circle':'path');
+    if(d.startsWith('circle')){const [cx,cy,r]=d.split(' ').slice(1);p.setAttribute('cx',cx);p.setAttribute('cy',cy);p.setAttribute('r',r);}else p.setAttribute('d',d);svg.append(p);}
+  return svg;
+}
+const ICON_OK=['M5 12l4 4 10-10'], ICON_WARN=['M12 8v5M12 17h.01','circle 12 12 9'];
 async function api(path,body){
   const r=await fetch('/api/operator'+path,{headers:{'Content-Type':'application/json'},...(body===undefined?{}:{method:'POST',body:JSON.stringify(body)})});
   const d=await r.json();if(!r.ok){const error=new Error(typeof d.detail==='string'?d.detail:'Confira os campos ('+r.status+').');error.status=r.status;throw error;}return d;
 }
-function files(container,items){
-  for(const uid of [...new Set(items.flatMap(i=>i.uploads))])container.append(action('Baixar original '+uid.slice(0,6),async()=>{
-    const result=await api('/uploads/'+uid+'/download');
-    const link=node('a');link.href=result.url;link.referrerPolicy='no-referrer';link.download=result.name;link.click();
-  }));
-}
-function productionLines(container,item){
-  if(!item.production){container.append(node('p','Instruções de produção ausentes; não produzir este item.','meta'));return;}
-  container.append(node('p','Especificação v'+item.production.version+' · qualidade '+item.quality_status+
-    (item.quality_status==='warning'?' · ressalva '+(item.quality_acknowledged?'aceita':'não aceita'):''),'meta'));
-  if(item.production.placements){
-    container.append(node('p',item.production.placements.length+' peças posicionadas em '+
-      item.production.film_width_cm+' × '+item.production.height_cm+' cm de filme','meta'));
-    const download=node('button','Baixar manifesto da montagem');
-    download.type='button';
-    download.onclick=()=>{
-      const url=URL.createObjectURL(new Blob([JSON.stringify(item.production,null,2)],{type:'application/json'}));
-      const link=node('a');link.href=url;
-      link.download='dtf-layout-'+item.production.sources[0].upload_id.slice(0,8)+'.json';
-      link.click();setTimeout(()=>URL.revokeObjectURL(url),1000);
-    };
-    container.append(download);
-  }
-  item.production.sources.forEach((source,index)=>container.append(node('p',
-    (index+1)+'. '+source.kind+' · '+source.copies+' × '+source.width_cm+' × '+source.length_cm+
-    ' cm · giro '+source.rotation_degrees+'°'+(source.mirrored?' · espelhada':'')+
-    ' · medida '+source.measurement+' · arquivo '+source.upload_id.slice(0,8),'meta')));
-}
-const PRINT_STATUS={pending:'na fila para gerar',rendering:'gerando…',ready:'pronto',
-  manual:'preparar à mão',failed:'falhou ao gerar'};
 function download(uid){return async()=>{
   const result=await api('/uploads/'+uid+'/download');
   const link=node('a');link.href=result.url;link.referrerPolicy='no-referrer';link.download=result.name;link.click();
 };}
-function printFiles(card,order){
+function manifest(production){
-  const rows=order.print_files||[];
+  const url=URL.createObjectURL(new Blob([JSON.stringify(production,null,2)],{type:'application/json'}));
-  const box=node('div',undefined,'print');
+  const link=node('a');link.href=url;link.download='dtf-layout-'+production.sources[0].upload_id.slice(0,8)+'.json';
-  box.append(node('b','Arquivo de impressão'));
+  link.click();setTimeout(()=>URL.revokeObjectURL(url),1000);
-  order.snapshot.items.forEach((item,index)=>{
-    const row=rows.find(r=>r.item_index===index);
-    const line=node('p','Item '+(index+1)+' · '+(row?PRINT_STATUS[row.status]:'não gerado'),'meta');
-    if(row?.status==='ready'){
-      line.textContent+=' · '+row.detail.film_width_cm+' × '+row.detail.height_cm+' cm'+
-        (row.detail.min_dpi?' · menor resolução '+row.detail.min_dpi+' DPI':'')+
-        (row.detail.vector_sources?' · PDF vetorial':'');
-      line.append(action('Baixar PDF',download(row.upload_id)));
-    }
-    if(row?.status==='manual')line.append(node('span',' · '+row.detail.reason));
-    box.append(line);
-  });
-  const retry=order.snapshot.items.some((_,index)=>{const row=rows.find(r=>r.item_index===index);
-    return !row||row.status==='manual'||row.status==='failed';});
-  if(retry&&['rec','tra'].includes(order.state))
-    box.append(action('Gerar arquivos de impressão',async()=>{await api('/orders/'+order.id+'/print-files',{});await load();}));
-  card.append(box);
-}
-function paymentIssues(){
-  $('payments').replaceChildren();
-  if(!board.payment_issues?.length)return;
-  $('payments').append(node('h2','Pagamentos que precisam de atenção · '+board.payment_issues.length));
-  $('payments').append(node('p','Um pagamento chegou sem virar pedido (valor diferente, cotação vencida) ou foi '+
-    'estornado depois do pedido. Confira no painel do provedor, resolva com o cliente e registre o que foi feito.','meta'));
-  for(const issue of board.payment_issues){
-    const card=node('article',undefined,'review');
-    card.append(node('b',issue.provider+' · evento '+issue.event_id),
-      node('p',(issue.amount_cents==null?'valor não informado':money(issue.amount_cents))+' · cotação '+
-        (issue.reference||'—')+' · '+new Date(issue.received_at).toLocaleString('pt-BR'),'meta'),
-      node('p',issue.outcome));
-    card.append(action('Registrar resolução',async()=>{
-      const note=prompt('O que foi feito? (ex.: estornado no Mercado Pago em 25/09)');if(!note)return;
-      await api('/payment-events/'+issue.id+'/resolve',{note});await load();
-    }));
-    $('payments').append(card);
-  }
 }
+
+// ---- Loading and tabs ------------------------------------------------------
+
 async function load(){
   try{
     board=await api('/board');
-    extraQuotes={pending:[],approved:[]};
+    const known=new Set(board.orders.map(o=>o.id));
-    moreQuotes={pending:board.pending_total>board.quotes.filter(q=>!q.approved).length,
+    board.orders.push(...olderFinished.filter(o=>!known.has(o.id)));
-      approved:board.approved_total>board.quotes.filter(q=>!!q.approved).length};
+    if(finishedMore===null)finishedMore=board.finished_total>board.finished_shown;
-    $('login').hidden=true;
+    $('login').hidden=true;$('app').hidden=false;
-    $('status').textContent='Atualizado às '+new Date().toLocaleTimeString()+tinyNotice;
+    say('Atualizado às '+new Date().toLocaleTimeString('pt-BR')+tinyNotice,false,tinyNotice?6000:2500);
     render();
-  }catch(e){$('status').textContent=e.message;$('login').hidden=false;}
+  }catch(e){
+    if(e.status===401||e.status===503){$('app').hidden=true;$('login').hidden=false;$('drawer').hidden=true;}
+    // Not being signed in yet is the normal start, not an error.
+    if(e.status===401){say('');return;}
+    say(e.message,true);
+  }
 }
-async function loadMoreQuotes(kind){
+function showTab(name){
-  const shown=[...board.quotes.filter(q=>kind==='pending'?!q.approved:!!q.approved),...extraQuotes[kind]];
+  tab=name;
-  const last=shown.at(-1);
+  for(const b of document.querySelectorAll('[data-tab]'))b.setAttribute('aria-selected',String(b.dataset.tab===name));
-  const params=new URLSearchParams({kind,limit:'50'});
+  for(const id of ['board','quotes','payments','integrations'])$('tab-'+id).hidden=name!==id;
-  if(last){params.set('before_created_at',last.created_at);params.set('before_id',last.id);}
+  const lists={quotes:loadQuotes,payments:loadIssues,integrations:loadEvents};
-  const page=await api('/quotes?'+params);
+  if(board&&lists[name])lists[name]().catch(e=>say(e.message,true));
-  const known=new Set(shown.map(q=>q.id));
-  extraQuotes[kind].push(...page.quotes.filter(q=>!known.has(q.id)));
-  moreQuotes[kind]=page.has_more;
-  render();
 }
-// The one-time authorisation of this system in the client's Tiny. Shown only
+function render(){
-// when the Tiny application is configured on the server.
+  $('who').textContent=board.operator||'';
-function tinyStatus(){
+  $('count-board').textContent=String(board.orders.filter(o=>o.state!=='fin').length);
-  const box=$('tiny');box.replaceChildren();
+  $('badge-quotes').textContent=board.pending_total?String(board.pending_total):'';
-  const tiny=board.tiny||{};
+  $('badge-payments').textContent=board.payment_issues_total?String(board.payment_issues_total):'';
-  if(!tiny.configured)return;
+  tinyHeader();renderBoard();renderIntegrations();
-  box.append(node('span',tiny.connected
+  // Lists live on their own pages of the API; refresh the one being looked at.
-    ? 'Tiny conectado'+(tiny.orders_enabled?'':' · envio de pedidos desligado')
+  const lists={quotes:loadQuotes,payments:loadIssues,integrations:loadEvents};
-    : 'Tiny não conectado'));
+  if(lists[tab])lists[tab]().catch(e=>say(e.message,true));
-  box.append(action(tiny.connected?'Reconectar Tiny':'Conectar Tiny',async()=>{
+  if(openOrder){const order=board.orders.find(o=>o.id===openOrder);if(order)renderPanel(order);else closePanel();}
-    const result=await api('/tiny/connect',{});location.href=result.url;
+}
+
+// ---- Production board ----------------------------------------------------
+
+function printState(order){
+  if(order.state==='fil'||order.state==='imp')return {text:'Final aprovado',tone:'ok'};
+  if(order.state==='fin')return {text:'Concluído',tone:'ok'};
+  if(order.state==='cor')return {text:'Aguardando o cliente',tone:''};
+  const rows=order.print_files||[], items=order.snapshot.items.length;
+  const ready=rows.filter(r=>r.status==='ready').length;
+  if(rows.some(r=>r.status==='pending'||r.status==='rendering'))return {text:'Gerando arquivo…',tone:''};
+  if(ready===items)return {text:'PDF pronto',tone:'ok'};
+  if(rows.some(r=>r.status==='manual'||r.status==='failed'))
+    return {text:items>1&&ready?ready+' de '+items+' pronto':'Preparar à mão',tone:'warn'};
+  return {text:'Sem arquivo gerado',tone:'warn'};
+}
+function matches(order){
+  const modes=order.snapshot.items.map(i=>i.mode);
+  if(filter==='textil'&&!modes.some(m=>m==='file'||m==='avulsa'))return false;
+  if(filter==='uv'&&!modes.some(m=>m==='uvfile'||m==='uv'))return false;
+  if(filter==='manual'&&!(order.print_files||[]).some(r=>r.status==='manual'||r.status==='failed'))return false;
+  if(!search)return true;
+  const c=order.snapshot.customer, d=order.snapshot.destination||{};
+  const hay=[String(order.number),c.mail,c.cnpj,d.recipient,d.city].join(' ').toLowerCase();
+  const digits=search.replace(/\D/g,'');
+  return hay.includes(search)||(digits.length>=3&&hay.replace(/\D/g,'').includes(digits));
+}
+function renderBoard(){
+  const filters=[['all','Todos'],['textil','Têxtil'],['uv','UV'],['manual','Preparar à mão']];
+  $('filters').replaceChildren(...filters.map(([key,label])=>{
+    const b=node('button',label,'chip');b.type='button';b.setAttribute('aria-pressed',String(filter===key));
+    b.onclick=()=>{filter=key;renderBoard();};return b;}));
+  const active=board.orders.filter(o=>['rec','tra','fil','imp'].includes(o.state));
+  const queued=active.reduce((s,o)=>s+o.snapshot.items.reduce((t,i)=>t+Number(i.billed_metres),0),0);
+  $('board-summary').textContent=metres(queued)+' em produção';
+  $('kan').replaceChildren(...Object.entries(board.states).map(([state,title])=>{
+    const column=node('section',undefined,'col');column.dataset.state=state;
+    const orders=board.orders.filter(o=>o.state===state&&matches(o));
+    const total=orders.reduce((s,o)=>s+o.snapshot.items.reduce((t,i)=>t+Number(i.billed_metres),0),0);
+    const head=node('div',undefined,'col-head');const line=node('div');
+    const swatch=node('span',undefined,'swatch');swatch.style.setProperty('--c',STAGE_COLORS[state]);
+    // Finished orders are a recent window, not the whole history: say so.
+    const count=state==='fin'&&board.finished_total>orders.length?orders.length+' de '+board.finished_total:String(orders.length);
+    line.append(swatch,node('h2',title),node('span',count,'n'));
+    head.append(line,node('small',orders.length?metres(total)+' no total':'vazio'));
+    column.append(head);
+    for(const order of orders)column.append(card(order));
+    if(state==='fin'&&finishedMore&&!search&&filter==='all')moreButton(column,true,loadOlderFinished);
+    // Dragging only goes forward to the next stage. Going back or asking for a
+    // correction needs a reason, so those happen in the order panel.
+    column.ondragover=e=>{if(!column.classList.contains('allowed'))return;e.preventDefault();column.classList.add('target');};
+    column.ondragleave=()=>column.classList.remove('target');
+    column.ondrop=async e=>{e.preventDefault();column.classList.remove('target');
+      const order=board.orders.find(o=>o.id===e.dataTransfer.getData('text/plain'));
+      if(order&&order.state!==state)try{await move(order,state);}catch(error){say(error.message,true);}};
+    return column;
   }));
 }
-const tinyResult=new URLSearchParams(location.search).get('tiny');
+function card(order){
-const tinyNotice=tinyResult?(tinyResult==='connected'?' · Tiny conectado.':' · Não foi possível conectar o Tiny. Tente de novo.'):'';
+  const c=node('button',undefined,'card');c.type='button';c.dataset.card=order.id;c.draggable=true;
-if(tinyResult)history.replaceState(null,'',location.pathname);
+  if(order.id===openOrder)c.classList.add('open');
-function render(){
+  const top=node('div',undefined,'row');
-  tinyStatus();
+  top.append(node('span','#'+order.number,'num'),node('span',ago(order.updated_at),'age'));
-  paymentIssues();
+  const tags=node('div',undefined,'tags');
-  $('reviews').replaceChildren();
+  for(const item of order.snapshot.items)tags.append(node('span',SHORT[item.mode]+' · '+metres(item.billed_metres),'tag'));
-  if(board.pending_total || board.approved_total)
+  const foot=node('div',undefined,'foot');const p=printState(order);
-    $('reviews').append(node('h2','Cotações · '+board.pending_total+' pendentes · '+
+  const status=node('span',p.text,p.tone);status.style.display='flex';status.style.alignItems='center';status.style.gap='5px';
-      board.approved_total+' aprovadas sem pedido'));
+  if(p.tone==='ok')status.prepend(icon(ICON_OK));if(p.tone==='warn')status.prepend(icon(ICON_WARN));
-  for(const quote of [...board.quotes,...extraQuotes.pending,...extraQuotes.approved]){
+  const dest=order.snapshot.destination;
-    const card=node('article',undefined,'review');
+  foot.append(status,node('span',dest?'Entrega · '+dest.state:'Retirada','where'));
-    card.append(node('b',quote.id.slice(0,8)+' · '+quote.draft.customer.mail));
+  c.append(top,node('div',order.snapshot.customer.mail,'cust'),tags,foot);
-    if(quote.status==='pending_review' && quote.draft.items.some(item=>item.production?.version!==2)){
+  if(['rec','tra','fil','imp'].includes(order.state)&&Date.now()-new Date(order.updated_at)>LATE_HOURS*3600000)
-      card.append(node('p','Cotação com montagem antiga. Peça ao cliente para enviar uma nova cotação.'));
+    c.append(node('div','Parado há mais de '+LATE_HOURS+' h','late'));
-    }else if(quote.status!=='pending_review'){
+  c.onclick=()=>openPanel(order.id);
-      card.append(node('p',quote.status==='expired'?'Cotação expirada. O cliente precisa solicitar outra.':'Aprovada: '+money(quote.approved.total_cents)+'. Volte ao Site, atualize o pedido e confirme o pagamento local.'));
+  c.ondragstart=e=>{
-    }else{
+    e.dataTransfer.setData('text/plain',order.id);
-      const form=node('form');
+    const forward=board.transitions[order.state].filter(s=>s!=='cor');
-      const edits=quote.draft.items.map((item,index)=>{
+    for(const col of document.querySelectorAll('.col[data-state]'))col.classList.toggle('allowed',forward.includes(col.dataset.state));
-        const row=node('div');row.append(node('strong',(index+1)+'. '+item.mode+' '));
+    say(forward.length?'Mover para '+forward.map(s=>board.states[s]).join(' ou '):'Pedido finalizado',false,60000);
-        productionLines(row,item);
+  };
-        const metres=node('input');metres.type='number';metres.min='0.001';metres.max='12000';metres.step='any';metres.value=item.metres;metres.required=true;
+  c.ondragend=()=>{for(const col of document.querySelectorAll('.col'))col.classList.remove('allowed','target');say('');};
-        const grade=node('input');grade.type='number';grade.min='0';grade.max='100';grade.step='1';grade.value=item.grade;grade.required=true;
+  return c;
-        const ml=node('label','Metros conferidos');ml.append(metres);const gl=node('label','Nota conferida');gl.append(grade);row.append(ml,gl);form.append(row);
-        return ()=>({...item,metres:metres.value,grade:Number(grade.value)});
-      });
-      const check=node('input');check.type='checkbox';check.required=true;const label=node('label','Conferi os arquivos, a metragem total (incluindo repetições/montagem) e a nota.');label.prepend(check);form.append(label);
-      const submit=node('button','Aprovar cotação');submit.type='submit';form.append(submit);
-      form.onsubmit=async e=>{e.preventDefault();submit.disabled=true;try{await api('/quotes/'+quote.id+'/approve',{items:edits.map(fn=>fn())});await load();}catch(error){$('status').textContent=error.message;submit.disabled=false;}};
-      card.append(form);
-    }
-    const downloads=node('div',undefined,'actions');files(downloads,quote.draft.items);card.append(downloads);$('reviews').append(card);
-  }
-  for(const [kind,label] of [['pending','Carregar cotações pendentes mais antigas'],
-                              ['approved','Carregar cotações aprovadas mais antigas']]){
-    if(moreQuotes[kind])$('reviews').append(action(label,()=>loadMoreQuotes(kind)));
-  }
-  $('kan').replaceChildren();
-  const colors=['#00b8da','#e0357c','#efb700','#edebe6','#e0642a','#48b072'];
-  Object.entries(board.states).forEach(([state,title],index)=>{
-    const column=node('section',undefined,'col');column.dataset.state=state;column.style.setProperty('--cc',colors[index]);
-    const orders=board.orders.filter(o=>o.state===state);
-    // Finished orders are a recent window, not the whole history: say so rather
-    // than let the count read as an all-time total.
-    const count=state==='fin'&&board.finished_total>orders.length
-      ? orders.length+' de '+board.finished_total : String(orders.length);
-    column.append(node('h2',title+' · '+count));
-    for(const order of orders){
-      const card=node('article',undefined,'cd');card.draggable=true;card.dataset.order=order.id;
-      card.append(node('b','#'+order.number+' · '+(order.payment?.provider==='fake'?'Pago local':'Pago')),node('p',order.snapshot.customer.mail,'meta'),node('p',money(order.snapshot.total_cents)));
-      const to=order.snapshot.destination;
-      card.append(node('p',to?'Entrega: '+to.recipient+' · '+to.street+', '+to.number+(to.complement?' '+to.complement:'')+
-        ' · '+to.district+' · '+to.city+'/'+to.state+' · CEP '+to.postal_code:'Retirada em Franca','meta'));
-      for(const item of order.snapshot.items){
-        card.append(node('p',item.mode+' · '+item.billed_metres+' m · nota '+item.grade,'meta'));
-        productionLines(card,item);
-      }
-      printFiles(card,order);
-      const actions=node('div',undefined,'actions');files(actions,order.snapshot.items);
-      const artwork=node('div');
-      actions.append(action('Arquivos de produção',()=>artworkPanel(order,artwork)));
-      actions.append(action('Histórico',async()=>{const rows=await api('/orders/'+order.id+'/history');alert(rows.map(r=>board.states[r.from_state]+' → '+board.states[r.to_state]+' · '+r.operator+(r.reason?' · '+r.reason:'')).join('\n')||'Pedido recebido.');}));
-      for(const next of board.transitions[state])actions.append(action('→ '+board.states[next],()=>move(order,next)));
-      card.append(actions,artwork);card.ondragstart=e=>e.dataTransfer.setData('text/plain',order.id);column.append(card);
-    }
-    column.ondragover=e=>{e.preventDefault();column.classList.add('alvo');};column.ondragleave=()=>column.classList.remove('alvo');
-    column.ondrop=async e=>{e.preventDefault();column.classList.remove('alvo');const order=board.orders.find(o=>o.id===e.dataTransfer.getData('text/plain'));if(order)try{await move(order,state);}catch(error){$('status').textContent=error.message;}};
-    $('kan').append(column);
-  });
-  $('events').textContent=board.events.map(e=>e.provider+' · '+e.payload.event+' · pedido #'+e.payload.number+' · '+(e.delivered_at?'registrado localmente':'pendente')+' · tentativas '+e.attempts).join('\n')||'Nenhum evento.';
 }
-async function move(order,state){
+async function loadOlderFinished(){
-  let reason='';if(state==='cor'){reason=prompt('Motivo da correção:');if(!reason)return;}
+  const shown=board.orders.filter(o=>o.state==='fin').sort((a,b)=>a.created_at<b.created_at?-1:1);
-  await api('/orders/'+order.id+'/move',{state,version:order.version,reason});await load();
+  const oldest=shown[0];const params=new URLSearchParams({limit:'50'});
+  if(oldest){params.set('before_created_at',oldest.created_at);params.set('before_id',oldest.id);}
+  const page=await api('/orders/finished?'+params);
+  const known=new Set(board.orders.map(o=>o.id));
+  const fresh=page.orders.filter(o=>!known.has(o.id));
+  olderFinished.push(...fresh);board.orders.push(...fresh);finishedMore=page.has_more;renderBoard();
+}
+async function move(order,state,reason=''){
+  await api('/orders/'+order.id+'/move',{state,version:order.version,reason});
+  await load();
 }
-$('login').onsubmit=async e=>{e.preventDefault();try{await api('/login',{email:$('email').value,password:$('password').value});await load();}catch(error){$('status').textContent=error.message;}finally{$('password').value='';}};
-$('logout').onclick=async()=>{await api('/logout',{});for(const key of Object.keys(localStorage))if(key.startsWith('dtf-'))localStorage.removeItem(key);location.reload();};
-$('refresh').onclick=load;
-load();
 
-async function artworkPanel(order,container){
+// ---- Order panel ---------------------------------------------------------
-  container.replaceChildren();
+
-  const revisions=await api('/orders/'+order.id+'/files');
+function openPanel(id){openOrder=id;const order=board.orders.find(o=>o.id===id);$('drawer').hidden=false;renderPanel(order);renderBoard();}
-  for(const file of revisions){
+function closePanel(){openOrder=null;$('drawer').hidden=true;$('panel').replaceChildren();if(board)renderBoard();}
-    const row=node('p',(file.kind==='final'?'Final':'Correção do cliente')+' · item '+(file.item_index+1)+' · '+file.name+' · '+(file.expired?'expirado':file.active?'atual':'substituído'),'meta');
+$('scrim').onclick=closePanel;
-    row.append(node('p',file.note));
+document.addEventListener('keydown',e=>{if(e.key==='Escape'&&openOrder)closePanel();});
-    if(!file.expired)row.append(action('Baixar '+file.name,download(file.upload_id)));
+
-    container.append(row);
+function layoutPreview(production){
+  const ns='http://www.w3.org/2000/svg', w=Number(production.film_width_cm), h=Math.max(1,Number(production.height_cm));
+  const svg=document.createElementNS(ns,'svg');svg.setAttribute('viewBox','0 0 '+w+' '+h);svg.setAttribute('role','img');
+  svg.setAttribute('aria-label','Montagem: '+production.placements.length+' peças em '+w+' × '+h+' cm');
+  const film=document.createElementNS(ns,'rect');film.setAttribute('width',w);film.setAttribute('height',h);film.setAttribute('fill','#0F1113');svg.append(film);
+  const colors=['#2BB6D9','#E0508F','#E9C23A','#6FD19C','#FF8B2B','#A78BFA'];
+  for(const p of production.placements){const r=document.createElementNS(ns,'rect');
+    r.setAttribute('x',p.x_cm);r.setAttribute('y',p.y_cm);r.setAttribute('width',p.width_cm);r.setAttribute('height',p.length_cm);
+    r.setAttribute('fill',colors[p.source_index%colors.length]);r.setAttribute('fill-opacity','.55');svg.append(r);}
+  return svg;
+}
+function renderPanel(order){
+  const token=++openToken, panel=$('panel');panel.dataset.order=order.id;
+  const color=STAGE_COLORS[order.state];
+  const head=node('div',undefined,'panel-head');
+  const row=node('div',undefined,'row');
+  const stage=node('span',board.states[order.state],'stage');stage.style.setProperty('--c',color);
+  const close=node('button',undefined,'close');close.type='button';close.setAttribute('aria-label','Fechar');close.append(icon(['M6 6l12 12M18 6L6 18']));close.onclick=closePanel;
+  row.append(node('span','#'+order.number,'num'),stage,node('span','pago '+when(order.created_at),'faint'),close);
+  const steps=node('ol',undefined,'steps');steps.setAttribute('aria-label','Etapas');
+  const at=FLOW.indexOf(order.state);
+  for(const [i,s] of FLOW.entries()){const li=node('li',board.states[s]);li.style.setProperty('--c',STAGE_COLORS[s]);
+    if(at>=0&&i<at)li.classList.add('done');if(i===at)li.classList.add('now');steps.append(li);}
+  head.append(row,steps,moves(order));
+
+  const body=node('div',undefined,'panel-body');
+  const s=order.snapshot, dest=s.destination;
+  const facts=node('section',undefined,'facts');
+  const who=node('div');who.append(node('p','Cliente','eyebrow'),node('b',s.customer.mail),node('span','CNPJ '+s.customer.cnpj+' · '+s.customer.zap));
+  const where=node('div');where.append(node('p','Entrega','eyebrow'),node('b',dest?dest.recipient:'Retirada em Franca'),
+    node('span',dest?dest.street+', '+dest.number+(dest.complement?' '+dest.complement:'')+' · '+dest.district+' · '+dest.city+'/'+dest.state+' · CEP '+dest.postal_code:'Cliente retira na fábrica'));
+  facts.append(who,where);
+  const items=node('section');items.append(node('p','Itens e arquivos de impressão','eyebrow'));
+  const itemsList=node('div');itemsList.style.display='flex';itemsList.style.flexDirection='column';itemsList.style.gap='10px';
+  s.items.forEach((item,index)=>itemsList.append(itemCard(order,item,index)));
+  items.append(itemsList);
+  const total=node('p',undefined,'muted');total.append('Total pago: ',node('b',money(s.total_cents)));items.append(total);
+  const finals=node('section',undefined,'finals');finals.append(node('p','Arquivos finais','eyebrow'),node('p','Carregando…','faint'));
+  const history=node('section');history.append(node('p','Histórico','eyebrow'),node('p','Carregando…','faint'));
+  body.append(facts,items,finals,history);
+  panel.replaceChildren(head,body);
+
+  api('/orders/'+order.id+'/files').then(rows=>{if(token===openToken)finalsSection(order,rows,finals);}).catch(e=>say(e.message,true));
+  api('/orders/'+order.id+'/history').then(rows=>{if(token===openToken)historySection(order,rows,history);}).catch(e=>say(e.message,true));
+}
+function moves(order){
+  const box=node('div');box.style.display='flex';box.style.flexDirection='column';box.style.gap='10px';
+  const row=node('div',undefined,'moves');
+  const reason=node('form',undefined,'reason');reason.hidden=true;
+  for(const next of board.transitions[order.state]){
+    if(next==='cor'){
+      const b=node('button','Pedir correção','btn danger');b.type='button';b.dataset.move='cor';
+      b.onclick=()=>{reason.hidden=!reason.hidden;backForm.hidden=true;if(!reason.hidden)reason.querySelector('textarea').focus();};row.append(b);
+    }else{
+      const b=button('Mover para '+board.states[next],()=>move(order,next),'btn primary');b.dataset.move=next;row.append(b);
     }
-  if(!['rec','tra','cor'].includes(order.state))return;
+  }
-  const form=node('form');
+  // Undo a mistaken move: one stage back, internal reason, no customer message.
-  form.append(node('p','Enviar um conjunto final completo. Pode haver várias partes por item. Um novo conjunto substitui o anterior.'));
+  const previous=board.back?.[order.state];
-  // A generated print file reproduces the approved layout; offer it first, and
+  const backForm=node('form',undefined,'reason');backForm.hidden=true;
-  // keep the upload for items that need hand preparation. Not after a
+  if(previous){
-  // correction: the file was made from artwork the customer has replaced.
+    const b=node('button','Voltar para '+board.states[previous],'btn ghost');b.type='button';b.dataset.back=previous;
+    b.onclick=()=>{backForm.hidden=!backForm.hidden;reason.hidden=true;if(!backForm.hidden)backForm.querySelector('input').focus();};
+    row.append(b);
+    const why=node('input');why.placeholder='Motivo';why.setAttribute('aria-label','Motivo do retorno');why.required=true;why.maxLength=1000;
+    const go=node('button','Voltar para '+board.states[previous],'btn');
+    backForm.append(why,go);
+    backForm.onsubmit=async e=>{e.preventDefault();go.disabled=true;try{await move(order,previous,why.value.trim());}catch(error){say(error.message,true);go.disabled=false;}};
+  }
+  if(!row.children.length)row.append(node('span','Pedido concluído.','muted'));
+  const text=node('textarea');text.placeholder='Motivo da correção';text.setAttribute('aria-label','Motivo da correção');text.maxLength=1000;text.required=true;
+  const confirm=node('button','Enviar para correção','btn danger');
+  reason.append(text,confirm);
+  reason.onsubmit=async e=>{e.preventDefault();confirm.disabled=true;try{await move(order,'cor',text.value.trim());}catch(error){say(error.message,true);confirm.disabled=false;}};
+  box.append(row,reason,backForm);return box;
+}
+const PRINT_TEXT={pending:'Na fila para gerar',rendering:'Gerando arquivo…',ready:'PDF gerado',manual:'Preparar à mão',failed:'Falhou ao gerar'};
+function itemCard(order,item,index){
+  const row=(order.print_files||[]).find(r=>r.item_index===index);
+  const box=node('div',undefined,'item');
+  if(row&&(row.status==='manual'||row.status==='failed'))box.classList.add('attention');
+  const preview=node('div',undefined,'preview');
+  if(item.production?.placements)preview.append(layoutPreview(item.production));
+  const body=node('div',undefined,'body');
+  const title=node('div',undefined,'title');title.append(node('b',PRODUCT[item.mode]),node('span',metres(item.billed_metres),'mono'));
+  const spec=item.production;
+  const line=spec?(spec.placements.length+' peças em '+spec.film_width_cm+' × '+spec.height_cm+' cm · nota '+item.grade):('nota '+item.grade);
+  body.append(title,node('div',line,'line'));
+  const file=node('div',undefined,'file');
+  if(row){
+    const tone=row.status==='ready'?'ok':row.status==='manual'||row.status==='failed'?'warn':'muted';
+    const label=node('span',PRINT_TEXT[row.status]+(row.status==='ready'&&row.name?' · '+row.name:'')+(row.status==='manual'&&row.detail.reason?': '+row.detail.reason:''),tone);
+    file.append(tone==='ok'?icon(ICON_OK):tone==='warn'?icon(ICON_WARN):'',label);
+    if(row.status==='ready'&&row.detail){body.append(file,node('div',[row.detail.film_width_cm+' × '+row.detail.height_cm+' cm',
+      row.detail.min_dpi?'menor resolução '+row.detail.min_dpi+' DPI':'',row.detail.vector_sources?'PDF vetorial':''].filter(Boolean).join(' · '),'line'));}
+    else body.append(file);
+  }else body.append(node('div','Arquivo de impressão ainda não gerado','line'));
+  const buttons=node('div',undefined,'buttons');
+  if(row?.status==='ready')buttons.append(button('Baixar PDF',download(row.upload_id)));
+  item.uploads.forEach((uid,i)=>buttons.append(button(item.uploads.length>1?'Original '+(i+1):'Baixar original',download(uid),'btn ghost')));
+  if(spec?.placements)buttons.append(button('Manifesto',()=>manifest(spec),'btn ghost'));
+  if(['rec','tra'].includes(order.state)&&(!row||row.status==='manual'||row.status==='failed'))
+    buttons.append(button('Gerar novamente',async()=>{await api('/orders/'+order.id+'/print-files',{});await load();},'btn ghost'));
+  body.append(buttons);
+  box.append(preview,body);return box;
+}
+function finalsSection(order,revisions,section){
+  section.replaceChildren(node('p','Arquivos finais','eyebrow'));
+  for(const file of revisions){
+    const rev=node('div',undefined,'rev');
+    rev.append(node('b',(file.kind==='final'?'Final':'Correção do cliente')+' · item '+(file.item_index+1)+' · '+file.name),
+      node('span',(file.expired?'expirado':file.active?'atual':'substituído')+' · '+when(file.created_at)+' · '+file.note,'faint'));
+    if(!file.expired){const b=button('Baixar',download(file.upload_id),'btn ghost');b.style.alignSelf='flex-start';rev.append(b);}
+    section.append(rev);
+  }
+  if(!['rec','tra','cor'].includes(order.state)){if(!revisions.length)section.append(node('p','Nenhum arquivo final registrado.','faint'));return;}
+  // A generated print file reproduces the approved layout: offer it first. Not
+  // after a customer correction, which replaced the artwork it was made from.
   const corrected=revisions.some(file=>file.kind==='correction');
+  const form=node('form');
   const inputs=order.snapshot.items.map((item,index)=>{
-    const label=node('label','Item '+(index+1)+' · '+item.mode);label.style.display='block';
+    const slot=node('label',undefined,'slot');slot.append('Item '+(index+1)+' · '+PRODUCT[item.mode]);
-    const input=node('input');input.type='file';input.multiple=true;input.required=true;input.dataset.finalItem=index;input.style.width='100%';
+    const input=node('input');input.type='file';input.multiple=true;input.required=true;input.dataset.finalItem=index;
     const generated=corrected?null:(order.print_files||[]).find(r=>r.item_index===index&&r.status==='ready');
     if(generated){
-      const use=node('input');use.type='checkbox';use.checked=true;input.required=false;input.hidden=true;
+      const use=node('input');use.type='checkbox';use.checked=true;use.dataset.useGenerated=index;input.required=false;input.hidden=true;
       use.onchange=()=>{input.hidden=use.checked;input.required=!use.checked;};
-      const choice=node('label',' Usar o arquivo gerado ('+generated.name+')');choice.prepend(use);choice.style.display='block';
+      const choice=node('label',undefined,'check');choice.append(use,'Usar o PDF gerado ('+generated.name+')');
-      label.append(choice);input.generated=()=>use.checked?generated.upload_id:null;
+      slot.append(choice);input.generated=()=>use.checked?generated.upload_id:null;
     }
-    label.append(input);form.append(label);return input;});
+    slot.append(input);form.append(slot);return input;
-  const note=node('input');note.placeholder='Nota da revisão';note.required=true;note.maxLength=1000;note.style.width='100%';form.append(note);
+  });
-  const check=node('input');check.type='checkbox';check.required=true;const label=node('label','Conferi estes arquivos finais para impressão manual.');label.prepend(check);form.append(label);
+  const note=node('input');note.placeholder='Nota da revisão';note.required=true;note.maxLength=1000;
-  const submit=node('button','Aprovar arquivos finais');submit.type='submit';form.append(submit);
+  const check=node('input');check.type='checkbox';check.required=true;check.dataset.confirm='';
+  const confirm=node('label',undefined,'check');confirm.append(check,'Arquivos conferidos');
+  const submit=node('button','Aprovar arquivos finais','btn primary');
+  form.append(note,confirm,submit);
   form.onsubmit=async event=>{event.preventDefault();submit.disabled=true;try{
     const refs=[];
     for(const [index,input] of inputs.entries()){
       const generated=input.generated?.();
       if(generated){refs.push({item_index:index,upload_id:generated});continue;}
       for(const file of input.files){
-      const uid=await dtfUpload(file,{api,startPath:'/orders/'+order.id+'/uploads',scope:'operator:'+order.id+':'+order.version,progress:text=>$('status').textContent=text});
+        const uid=await dtfUpload(file,{api,startPath:'/orders/'+order.id+'/uploads',scope:'operator:'+order.id+':'+order.version,progress:text=>say(text)});
         refs.push({item_index:index,upload_id:uid});
-    }}
+      }
+    }
     await api('/orders/'+order.id+'/final-files',{version:order.version,files:refs,note:note.value});
     await load();
-  }catch(error){$('status').textContent=error.message;submit.disabled=false;}};
+  }catch(error){say(error.message,true);submit.disabled=false;}};
-  container.append(form);
+  section.append(form);
 }
+function historySection(order,rows,section){
+  const list=node('ol',undefined,'timeline');
+  for(const r of [...rows].reverse()){
+    const li=node('li');li.style.setProperty('--c',STAGE_COLORS[r.to_state]);
+    const text=node('div');text.append(node('b',r.back?'Voltou para '+board.states[r.to_state]:board.states[r.from_state]+' → '+board.states[r.to_state]));
+    if(r.reason)text.append(node('span',' · '+r.reason,'muted'));
+    text.append(node('small',when(r.created_at)+' · '+r.operator));li.append(text);list.append(li);
+  }
+  const first=node('li');first.style.setProperty('--c','var(--rec)');
+  const t=node('div');t.append(node('b','Pedido recebido e pago'),node('small',when(order.created_at)+' · '+(board.environment==='local'&&order.payment?.provider==='fake'?'pagamento de teste':'Site')));
+  first.append(t);list.append(first);
+  section.replaceChildren(node('p','Histórico','eyebrow'),list);
+}
+
+// ---- Quotes --------------------------------------------------------------
+
+function quoteMetres(q){return (q.approved||q.draft).items.reduce((s,i)=>s+Number(i.billed_metres||i.metres),0);}
+let quoteRows=[], quoteTotal=0, quotePage=1, quoteSize=20, currentQuote=null, quoteLoading=0;
+async function loadQuotes(){
+  const token=++quoteLoading;
+  const page=await api('/quotes?'+new URLSearchParams({kind:quoteKind,limit:String(quoteSize),offset:String((quotePage-1)*quoteSize)}));
+  if(token!==quoteLoading)return;
+  quoteRows=page.quotes;quoteTotal=page.total;
+  if(quotePage>1&&!quoteRows.length&&quoteTotal){quotePage=Math.ceil(quoteTotal/quoteSize);return loadQuotes();}
+  renderQuotes();
+}
+function renderQuotes(){
+  const kinds=[['pending','A revisar',board.pending_total],['approved','Aprovadas, aguardando pagamento',board.approved_total]];
+  $('quote-filters').replaceChildren(...kinds.map(([key,label,count])=>{
+    const b=node('button',label+' · '+count,'chip');b.type='button';b.setAttribute('aria-pressed',String(quoteKind===key));
+    b.onclick=()=>{quoteKind=key;quotePage=1;currentQuote=null;loadQuotes().catch(e=>say(e.message,true));};return b;}));
+  if(!currentQuote||(!quoteRows.some(q=>q.id===currentQuote.id)&&currentQuote.status==='pending_review'))currentQuote=quoteRows[0]||null;
+  else currentQuote=quoteRows.find(q=>q.id===currentQuote.id)||currentQuote;
+  const list=quoteRows.map(q=>{
+    const b=node('button',undefined,'qitem');b.type='button';b.dataset.quotePick=q.id;b.setAttribute('aria-current',String(q.id===currentQuote?.id));
+    const left=node('div');left.append(node('b',q.draft.customer.mail),
+      node('span',q.draft.items.map(i=>SHORT[i.mode]).join(' + ')+' · '+metres(quoteMetres(q))));
+    if(q.draft.items.some(i=>i.production?.version!==2))left.append(node('span','Montagem antiga: peça nova cotação','flag'));
+    else if(q.draft.items.some(i=>i.quality_status==='warning'))left.append(node('span','Ressalva de resolução aceita pelo cliente','flag'));
+    const right=node('div',undefined,'right');
+    right.append(node('b',q.approved?money(q.approved.total_cents):q.id.slice(0,8),'mono'),node('span',ago(q.created_at)));
+    b.append(left,right);b.onclick=()=>{currentQuote=q;renderQuotes();};return b;
+  });
+  if(!list.length)list.push(node('p',quoteKind==='pending'?'Nenhuma cotação para revisar.':'Nenhuma cotação aprovada aguardando pagamento.','faint'));
+  if(quoteTotal>quoteSize||quotePage>1)list.push(pager({page:quotePage,size:quoteSize,total:quoteTotal,noun:'cotações',compact:true,
+    onPage:n=>{quotePage=n;loadQuotes().catch(e=>say(e.message,true));},
+    onSize:n=>{quoteSize=n;quotePage=1;loadQuotes().catch(e=>say(e.message,true));}}));
+  $('quote-list').replaceChildren(...list);
+  $('reviews').replaceChildren(currentQuote?review(currentQuote):node('p','Selecione uma cotação.','note'));
+}
+function review(quote){
+  const card=node('article',undefined,'review');card.style.display='contents';card.dataset.quote=quote.id;
+  const head=node('div',undefined,'head');const title=node('div');
+  title.append(node('b',quote.draft.customer.mail),node('div','Cotação '+quote.id.slice(0,8)+' · enviada '+ago(quote.created_at)+' · '+
+    (quote.draft.destination?'entrega em '+quote.draft.destination.city+'/'+quote.draft.destination.state:'retirada em Franca'),'muted'));
+  head.append(title);
+  const content=node('div',undefined,'content');
+  const foot=node('div',undefined,'foot');
+  if(quote.status==='pending_review'&&quote.draft.items.some(item=>item.production?.version!==2)){
+    content.append(node('p','Montagem antiga. Solicite uma nova cotação ao cliente.','muted'));
+    card.append(head,content);return card;
+  }
+  if(quote.status!=='pending_review'){
+    content.append(node('p',quote.status==='expired'?'Cotação expirada. O cliente precisa solicitar outra.':
+      'Aprovada: '+money(quote.approved.total_cents)+' · aguardando pagamento','muted'));
+    for(const item of quote.draft.items)content.append(quoteItem(item,null));
+    card.append(head,content);return card;
+  }
+  const form=node('form');form.style.display='contents';
+  const edits=quote.draft.items.map(item=>{const fields={};content.append(quoteItem(item,fields));
+    return ()=>({...item,metres:fields.metres.value,grade:Number(fields.grade.value)});});
+  const check=node('input');check.type='checkbox';check.required=true;
+  const confirm=node('label',undefined,'check');confirm.append(check,'Arquivos, metragem e nota conferidos');
+  const submit=node('button','Aprovar cotação','btn primary');
+  foot.append(confirm,submit);
+  form.append(content,foot);
+  form.onsubmit=async e=>{e.preventDefault();submit.disabled=true;
+    try{const approved=await api('/quotes/'+quote.id+'/approve',{items:edits.map(fn=>fn())});
+      // Keep showing the quote just approved while its list refreshes.
+      currentQuote={...quote,approved,status:'approved'};say('Cotação aprovada.');await load();}
+    catch(error){say(error.message,true);submit.disabled=false;}};
+  card.append(head,form);return card;
+}
+function quoteItem(item,fields){
+  const box=node('div',undefined,'item');
+  const preview=node('div',undefined,'preview');preview.style.width='160px';
+  if(item.production?.placements)preview.append(layoutPreview(item.production));
+  const body=node('div',undefined,'body');
+  const title=node('div',undefined,'title');
+  const quality=item.quality_status==='ok'?'qualidade ok':item.quality_status==='warning'?'ressalva '+(item.quality_acknowledged?'aceita':'não aceita'):'qualidade não verificada';
+  title.append(node('b',PRODUCT[item.mode]),node('span',quality+' · nota '+item.grade,item.quality_status==='ok'?'ok':'warn'));
+  body.append(title);
+  if(item.production)body.append(node('div',item.production.sources.length+' arquivo(s) · '+item.production.placements.length+' peças · '+
+    item.production.film_width_cm+' × '+item.production.height_cm+' cm','line'));
+  if(fields){
+    const grid=node('div',undefined,'fields');
+    const asked=node('label','Metros do cliente');const a=node('input');a.value=item.metres;a.readOnly=true;asked.append(a);
+    const m=node('label','Metros conferidos');fields.metres=node('input');Object.assign(fields.metres,{type:'number',min:'0.001',max:'12000',step:'any',value:item.metres,required:true});m.append(fields.metres);
+    const g=node('label','Nota conferida');fields.grade=node('input');Object.assign(fields.grade,{type:'number',min:'0',max:'100',step:'1',value:item.grade,required:true});g.append(fields.grade);
+    grid.append(asked,m,g);body.append(grid);
+  }
+  const buttons=node('div',undefined,'buttons');
+  item.uploads.forEach((uid,i)=>buttons.append(button(item.uploads.length>1?'Original '+(i+1):'Baixar original',download(uid),'btn ghost')));
+  if(item.production?.placements)buttons.append(button('Manifesto',()=>manifest(item.production),'btn ghost'));
+  body.append(buttons);box.append(preview,body);return box;
+}
+
+// ---- Payments and integrations ------------------------------------------
+
+const tinyResult=new URLSearchParams(location.search).get('tiny');
+const tinyNotice=tinyResult?(tinyResult==='connected'?' · Tiny conectado.':' · Não foi possível conectar o Tiny. Tente de novo.'):'';
+if(tinyResult)history.replaceState(null,'',location.pathname);
+function tinyHeader(){
+  const t=board.tiny||{};const el=$('tiny');
+  if(!t.configured){el.textContent='';return;}
+  el.textContent=t.connected?'Tiny conectado':'Tiny não conectado';
+  el.style.setProperty('--dot',t.connected?'var(--fin)':'var(--warn)');
+}
+function integration(name,state,tone,text,actions=[]){
+  const box=node('div',undefined,'integration');
+  const head=node('div',undefined,'head');const dot=node('span',undefined,'dot');
+  const colors={ok:['var(--fin)','var(--ok)'],warn:['var(--warn)','var(--warn)'],off:['#5B6168','var(--muted)']}[tone];
+  dot.style.setProperty('--dot',colors[0]);const em=node('em',state);em.style.setProperty('--dotx',colors[1]);
+  head.append(dot,node('b',name),em);box.append(head,node('p',text));
+  if(actions.length){const b=node('div',undefined,'buttons');b.append(...actions);box.append(b);}
+  return box;
+}
+// The page bar under every list: page size, range, first/previous/page/next/last.
+const PAGE_SIZES=[10,20,50,100];
+function pager({page,size,total,noun,onPage,onSize,compact=false}){
+  const pages=Math.max(1,Math.ceil(total/size));
+  const bar=node('div',undefined,'pager'+(compact?' compact':''));
+  const sizeLabel=node('label',undefined,'pager-size');
+  const select=node('select');select.setAttribute('aria-label','Itens por página');
+  for(const n of PAGE_SIZES){const o=node('option',String(n));o.value=String(n);o.selected=n===size;select.append(o);}
+  select.onchange=()=>onSize(Number(select.value));
+  sizeLabel.append('Mostrar',select,'por página');
+  const nav=node('div',undefined,'pager-nav');
+  const from=total?(page-1)*size+1:0, to=Math.min(total,page*size);
+  const go=(label,aria,target,disabled)=>{const b=node('button',label,'pg');b.type='button';b.setAttribute('aria-label',aria);b.disabled=disabled;b.onclick=()=>onPage(target);return b;};
+  const pageLabel=node('label',undefined,'pager-page');
+  const input=node('input');input.type='number';input.min='1';input.max=String(pages);input.value=String(page);input.setAttribute('aria-label','Página');
+  input.onchange=()=>onPage(Math.min(pages,Math.max(1,Math.round(Number(input.value))||1)));
+  pageLabel.append(compact?'':'Página',input,'de '+pages);
+  nav.append(go('«','Primeira página',1,page<=1),go('‹','Página anterior',page-1,page<=1),pageLabel,
+    go('›','Próxima página',page+1,page>=pages),go('»','Última página',pages,page>=pages));
+  bar.append(sizeLabel,node('span',(compact?'':'Mostrando ')+from+' a '+to+' de '+total+(compact?'':' '+noun),'pager-range'),nav);
+  return bar;
+}
+function chips(container,options,current,pick){
+  container.replaceChildren(...options.map(([key,label])=>{
+    const b=node('button',label,'chip');b.type='button';b.setAttribute('aria-pressed',String(current===key));
+    b.onclick=()=>pick(key);return b;}));
+}
+function moreButton(container,has,fn){
+  if(!has)return;
+  const b=button('Carregar mais',fn,'btn ghost');b.style.alignSelf='flex-start';b.style.marginTop='8px';container.append(b);
+}
+
+// Payments needing a person: paged, open or resolved (history).
+let issueState='open', issueRows=[], issueTotal=0, issuePage=1, issueSize=20, issueLoading=0;
+async function loadIssues(){
+  const token=++issueLoading;
+  const page=await api('/payment-events?'+new URLSearchParams({state:issueState,limit:String(issueSize),offset:String((issuePage-1)*issueSize)}));
+  if(token!==issueLoading)return;
+  issueRows=page.issues;issueTotal=page.total;
+  if(issuePage>1&&!issueRows.length&&issueTotal){issuePage=Math.ceil(issueTotal/issueSize);return loadIssues();}
+  renderIssues();
+}
+function renderIssues(){
+  const filters=node('div',undefined,'chips');filters.style.marginBottom='12px';
+  chips(filters,[['open','Abertos'],['resolved','Resolvidos'],['all','Todos']],issueState,key=>{issueState=key;issuePage=1;loadIssues().catch(e=>say(e.message,true));});
+  const list=node('div');
+  if(!issueRows.length)list.append(node('p',issueState==='resolved'?'Nenhum pagamento resolvido.':'Nenhum pagamento pendente.','faint'));
+  for(const issue of issueRows){
+    const box=node('div',undefined,'issue');
+    if(issue.resolved_at)box.classList.add('done');
+    box.append(issue.resolved_at?icon(ICON_OK):icon(ICON_WARN));box.firstChild.style.color=issue.resolved_at?'var(--ok)':'var(--warn)';
+    const text=node('div',undefined,'text');
+    text.append(node('b',(issue.amount_cents==null?'Pagamento sem valor informado':'Pagamento de '+money(issue.amount_cents))+': '+outcomeText(issue.outcome)),
+      node('span',issue.provider+' · evento '+issue.event_id+' · cotação '+(issue.reference||'—')+' · '+when(issue.received_at)));
+    if(issue.resolved_at){
+      text.append(node('span','Resolvido por '+issue.resolved_by+' em '+when(issue.resolved_at)+': '+issue.resolution));
+      box.append(text);
+    }else{
+      const form=node('form');const note=node('input');note.placeholder='Resolução';note.setAttribute('aria-label','Resolução');note.required=true;note.minLength=3;note.maxLength=1000;
+      const save=node('button','Registrar resolução','btn warn');form.append(note,save);
+      form.onsubmit=async e=>{e.preventDefault();save.disabled=true;
+        try{await api('/payment-events/'+issue.id+'/resolve',{note:note.value});say('Resolução registrada.');await load();}
+        catch(error){say(error.message,true);save.disabled=false;}};
+      box.append(text,form);
+    }
+    list.append(box);
+  }
+  const bar=pager({page:issuePage,size:issueSize,total:issueTotal,noun:'pagamentos',
+    onPage:n=>{issuePage=n;loadIssues().catch(e=>say(e.message,true));},
+    onSize:n=>{issueSize=n;issuePage=1;loadIssues().catch(e=>say(e.message,true));}});
+  $('payments').replaceChildren(filters,list,bar);
+}
+
+// The integration send log: filtered and paged on the server.
+let eventFilter={provider:'',status:'',event:'',order:''}, eventRows=[], eventTotal=0, eventPage=1, eventSize=20, eventLoading=0, eventTimer=null;
+async function loadEvents(){
+  const token=++eventLoading;
+  const params=new URLSearchParams({limit:String(eventSize),offset:String((eventPage-1)*eventSize)});
+  for(const [key,value] of Object.entries(eventFilter))if(value)params.set(key,value);
+  const page=await api('/events?'+params);
+  if(token!==eventLoading)return;
+  eventRows=page.events;eventTotal=page.total;
+  if(eventPage>1&&!eventRows.length&&eventTotal){eventPage=Math.ceil(eventTotal/eventSize);return loadEvents();}
+  renderEvents();
+}
+function eventFilters(){
+  const bar=$('event-filters');if(bar.dataset.ready)return;bar.dataset.ready='1';
+  const select=(label,key,options)=>{
+    const field=node('label',undefined,'field');field.append(label);
+    const s=node('select');for(const [value,text] of options){const o=node('option',text);o.value=value;s.append(o);}
+    s.onchange=()=>{eventFilter[key]=s.value;eventPage=1;loadEvents().catch(e=>say(e.message,true));};
+    field.append(s);return field;
+  };
+  const order=node('label',undefined,'field');order.append('Pedido');
+  const input=node('input');input.type='number';input.min='1';input.placeholder='Nº';input.setAttribute('inputmode','numeric');
+  input.oninput=()=>{clearTimeout(eventTimer);eventTimer=setTimeout(()=>{eventFilter.order=input.value.trim();eventPage=1;loadEvents().catch(e=>say(e.message,true));},350);};
+  order.append(input);
+  bar.append(
+    select('Destino','provider',[['','Todos'],['tiny','Tiny'],['whatsapp','WhatsApp']]),
+    select('Situação','status',[['','Todas'],['delivered','Enviados'],['queued','Na fila'],['failing','Com erro']]),
+    select('Evento','event',[['','Todos'],...Object.entries(EVENTS)]),
+    order);
+}
+function eventResult(e){
+  const receipt=e.receipt||{};
+  if(e.delivered_at){
+    if(receipt.status==='created')return ['Criado no Tiny nº '+receipt.tiny_number,'good'];
+    if(receipt.status==='already-created')return ['Já existia no Tiny nº '+receipt.tiny_number+' (reenvio)','good'];
+    if(receipt.status==='not-applicable')return ['Não se aplica ao Tiny',''];
+    return ['Registrado, sem envio',''];
+  }
+  if(e.last_error)return ['Nova tentativa · '+e.last_error+' (tentativa '+e.attempts+')','retry'];
+  return ['Na fila',''];
+}
+function renderEvents(){
+  const rows=eventRows.map(e=>{
+    const tr=node('tr');const [result,cls]=eventResult(e);
+    tr.append(node('td',when(e.delivered_at||e.available_at),'muted'),node('td','#'+e.payload.number,'mono'),
+      node('td',{tiny:'Tiny',whatsapp:'WhatsApp'}[e.provider]||e.provider),
+      node('td',EVENTS[e.payload.event]||e.payload.event),node('td',result,cls));
+    return tr;
+  });
+  if(!rows.length){const tr=node('tr');const td=node('td','Nenhum envio encontrado.','faint');td.colSpan=5;tr.append(td);rows.push(tr);}
+  $('events').replaceChildren(...rows);
+  $('events-more').replaceChildren(pager({page:eventPage,size:eventSize,total:eventTotal,noun:'envios',
+    onPage:n=>{eventPage=n;loadEvents().catch(e=>say(e.message,true));},
+    onSize:n=>{eventSize=n;eventPage=1;loadEvents().catch(e=>say(e.message,true));}}));
+}
+
+function renderIntegrations(){
+  const t=board.tiny||{};const cards=[];
+  if(!t.configured)cards.push(integration('Tiny','Não configurado','off','Credenciais ausentes no servidor.'));
+  else{
+    const connect=button(t.connected?'Reconectar':'Conectar Tiny',async()=>{const r=await api('/tiny/connect',{});location.href=r.url;},t.connected?'btn ghost':'btn');
+    const actions=[connect];
+    if(t.connected){
+      actions.unshift(button('Testar conexão',async()=>{const r=await api('/tiny/test',{});
+        say(r.ok?'Conexão com o Tiny ok: pedidos, contatos e os 4 produtos conferidos.':'Tiny: '+Object.entries(r.results).filter(([,v])=>v!=='ok').map(([k,v])=>k+': '+v).join(' · '),!r.ok);}));}
+    cards.push(integration('Tiny',t.connected?'Conectado':'Não conectado',t.connected?'ok':'warn',
+      t.connected?t.connected_by+' · '+when(t.connected_at)+' · envio de pedidos '+(t.orders_enabled?'ativo':'desativado'):
+      'Conecte com uma conta do Tiny.',actions));
+  }
+  const mp=board.providers?.payment;
+  cards.push(integration('Mercado Pago',mp==='mercadopago'?'Ativo':'Não configurado',mp==='mercadopago'?'ok':'off',
+    mp==='mercadopago'?'PIX e cartão ativos.':'Aguardando credenciais.'));
+  cards.push(integration('Frete','Não configurado','off','Somente retirada.'));
+  cards.push(integration('WhatsApp','Não configurado','off','Mensagens registradas, sem envio.'));
+  $('integrations').replaceChildren(...cards);
+  eventFilters();
+}
+
+// ---- Wiring --------------------------------------------------------------
+
+for(const b of document.querySelectorAll('[data-tab]'))b.onclick=()=>showTab(b.dataset.tab);
+$('search').oninput=e=>{search=e.target.value.trim().toLowerCase();renderBoard();if(search)showTab('board');};
+$('login').onsubmit=async e=>{e.preventDefault();try{await api('/login',{email:$('email').value,password:$('password').value});await load();}catch(error){say(error.message,true);}finally{$('password').value='';}};
+$('logout').onclick=async()=>{await api('/logout',{});for(const key of Object.keys(localStorage))if(key.startsWith('dtf-'))localStorage.removeItem(key);location.reload();};
+$('refresh').onclick=load;
+load();

web/portal.html

@@ -3,9 +3,9 @@
 *{box-sizing:border-box}body{margin:0;background:#f6f7f9;color:#20252d;font:15px/1.5 system-ui,sans-serif}header{background:white;border-bottom:1px solid #ddd;padding:20px max(20px,calc((100% - 1100px)/2));display:flex;gap:24px;align-items:center;flex-wrap:wrap}.brand{color:#ef8500;font-size:24px;font-style:italic;font-weight:900}a{color:#8a4e00}main{max-width:1100px;margin:24px auto;padding:0 20px}h1{font-size:28px}h2{font-size:21px}h3{font-size:17px}.notice{background:#fff1d4;border-left:4px solid #ffa900;padding:12px 16px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}.card{background:white;border:1px solid #ddd;border-radius:10px;padding:20px;margin:16px 0}.card p{overflow-wrap:anywhere}.muted{color:#596471}label{display:block;margin:10px 0}input,textarea,button{font:inherit;border:1px solid #9aa0a8;border-radius:6px;padding:10px}input:not([type=file]),textarea{width:100%}button{background:#ffa900;border-color:#ffa900;cursor:pointer}button:disabled{opacity:.6}form{margin:10px 0}.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}#message{min-height:24px;color:#9b3800}li{margin:8px 0}.tag{background:#eef2f6;padding:5px 10px;border-radius:6px}details{margin:12px 0}[hidden]{display:none!important}
 </style></head><body>
 <header><a class="brand" href="/">DROPSTAR</a><a href="/">Enviar arte</a><span>Minha conta · DTF</span><button id="logout" hidden>Sair</button></header>
-<main><h1>Meus pedidos DTF</h1><p class="notice">Ambiente de desenvolvimento local. Pagamentos e notificações são simulados. Use apenas dados de teste.</p><p id="message" role="status"></p>
+<main><h1>Meus pedidos DTF</h1><p class="notice" id="dev-notice" hidden>Ambiente de desenvolvimento local. Pagamentos e notificações são simulados. Use apenas dados de teste.</p><p id="message" role="status"></p>
 <div id="account"></div><section id="auth" class="grid">
 <form id="login" class="card"><h2>Entrar</h2><label>E-mail <input id="email" type="email" autocomplete="username" required></label><label>Senha <input id="password" type="password" autocomplete="current-password" required></label><button>Entrar</button></form>
-<form id="register" class="card"><h2>Criar conta local</h2><label>CNPJ <input id="cnpj" required></label><label>WhatsApp <input id="phone" required></label><label>E-mail <input id="register-email" type="email" autocomplete="email" required></label><label>Senha (12 caracteres ou mais) <input id="register-password" type="password" minlength="12" maxlength="128" autocomplete="new-password" required></label><button>Criar conta</button><p class="muted">Pedidos desta sessão serão associados à sua conta. Não há envio de e-mail nem recuperação de senha nesta versão local.</p></form>
+<form id="register" class="card"><h2>Criar conta</h2><label>CNPJ <input id="cnpj" required></label><label>WhatsApp <input id="phone" required></label><label>E-mail <input id="register-email" type="email" autocomplete="email" required></label><label>Senha (12 caracteres ou mais) <input id="register-password" type="password" minlength="12" maxlength="128" autocomplete="new-password" required></label><button>Criar conta</button><p class="muted">Pedidos desta sessão serão associados à sua conta. Guarde sua senha: a recuperação por e-mail ainda não está disponível.</p></form>
 </section><div class="actions"><h2>Acompanhamento</h2><button id="refresh">Atualizar pedidos</button></div><p id="guest" class="muted"></p><section id="quotes"></section><section id="orders"></section></main>
 <script src="/privacy.js"></script><script src="/upload.js"></script><script src="/portal.js"></script></body></html>

web/portal.js

@@ -1,13 +1,14 @@
 const $=id=>document.getElementById(id);
 const node=(tag,text)=>{const el=document.createElement(tag);if(text!==undefined)el.textContent=text;return el;};
 const money=c=>(c/100).toLocaleString('pt-BR',{style:'currency',currency:'BRL'});
-let scope,states={};
+let scope,states={},environment='';
 async function api(path,body){const r=await fetch('/api'+path,{headers:{'Content-Type':'application/json'},...(body===undefined?{}:{method:'POST',body:JSON.stringify(body)})});const d=await r.json();if(!r.ok){const error=new Error(typeof d.detail==='string'?d.detail:'Confira os campos informados.');error.status=r.status;throw error;}return d;}
 function button(text,fn){const b=node('button',text);b.onclick=async()=>{b.disabled=true;try{await fn();}catch(e){$('message').textContent=e.message;}finally{b.disabled=false;}};return b;}
 function forgetCheckout(){for(const k of ['dtf-quote','dtf-request-key','dtf-request-body'])localStorage.removeItem(k);}
 async function load(){
   try{
-    scope=(await api('/session')).cart_scope;
+    const session=await api('/session');scope=session.cart_scope;environment=session.environment;
+    $('dev-notice').hidden=environment!=='local';
     const account=await api('/account/me');
     $('auth').hidden=!!account.customer;$('logout').hidden=!account.customer;
     $('account').textContent=account.customer?'Conta: '+account.customer.mail:'';
@@ -17,13 +18,13 @@ async function load(){
     for(const quote of data.quotes){
       const card=node('article');card.className='card';card.append(node('h3','Cotação '+quote.id.slice(0,8)));
       card.append(node('p',quote.approved?'Total aprovado: '+money(quote.approved.total_cents):'Aguardando conferência de metragem e nota.'));
-      const link=node('a','Abrir cotação no Site');link.href='/?quote='+quote.id;card.append(link);$('quotes').append(card);
+      const link=node('a','Abrir cotação no Site');link.href='/carrinho?quote='+quote.id;card.append(link);$('quotes').append(card);
     }
     $('orders').replaceChildren();
     if(!data.orders.length)$('orders').append(node('p','Nenhum pedido pago nesta conta ou sessão.'));
     for(const order of data.orders){
       const card=node('article');card.className='card';card.id='order-'+order.id;
-      card.append(node('h3','Pedido #'+order.number),node('p',states[order.state]+' · '+money(order.snapshot.total_cents)+' · pagamento local'));
+      card.append(node('h3','Pedido #'+order.number),node('p',states[order.state]+' · '+money(order.snapshot.total_cents)+(environment==='local'?' · pagamento de teste':'')));
       card.append(node('p',new Date(order.created_at).toLocaleString('pt-BR')));
       const content=node('div');
       card.append(button('Ver detalhes e arquivos',()=>details(order.id,content)),content);$('orders').append(card);
@@ -71,6 +72,6 @@ async function authenticate(path,body){
 }
 $('login').onsubmit=async event=>{event.preventDefault();try{await authenticate('/account/login',{email:$('email').value,password:$('password').value});}catch(e){$('message').textContent=e.message;}};
 $('register').onsubmit=async event=>{event.preventDefault();try{await authenticate('/account/register',{customer:{cnpj:$('cnpj').value,zap:$('phone').value,mail:$('register-email').value},password:$('register-password').value});}catch(e){$('message').textContent=e.message;}};
-$('logout').onclick=async()=>{try{await window.dtfForgetPrivateData();await api('/account/logout',{});location.reload();}catch(error){$('message').textContent='Não foi possível concluir a limpeza local. Feche as abas do Site e limpe os dados deste site no navegador.';}};
+$('logout').onclick=async()=>{try{await window.dtfForgetPrivateData();await api('/account/logout',{});location.reload();}catch(error){$('message').textContent='Não foi possível limpar os dados deste navegador. Feche as abas do Site e limpe os dados do site nas configurações do navegador.';}};
 $('refresh').onclick=load;
 load();

web/site-cart.js

@@ -30,10 +30,15 @@ function pintaPedido(){
   $('itens').innerHTML = pedido.map((it,i)=>
     '<div class="item"><div class="nm2"><b>'+escapeHTML(it.tit)+'</b><span>'+escapeHTML(it.desc)+'</span></div>'+
     '<div class="vl2">'+rs(it.total)+'</div>'+
-    '<button class="x" data-rmi="'+i+'" aria-label="Remover">×</button></div>').join('');
+    '<button type="button" class="x" data-rmi="'+i+'" aria-label="Remover '+escapeHTML(it.tit)+'">Remover</button></div>').join('');
   $('itens').querySelectorAll('[data-rmi]').forEach(b=>b.addEventListener('click',()=>{
-    pedido.splice(+b.dataset.rmi,1); pintaPedido();
+    const i=+b.dataset.rmi, [item]=pedido.splice(i,1);
+    pintaPedido();
+    avisaDesfazer(item.tit+' saiu do carrinho.',()=>{
+      pedido.splice(Math.min(i,pedido.length),0,item); pintaPedido();
+    });
   }));
+  $('bEsvaziar').hidden = pedido.length+(itemAtual?1:0) < 2;
   const itens = pedido.reduce((t,it)=>t+it.total,0) + (itemAtual? itemAtual.total : 0);
   const frete = entrega.tipo==='frete' && entrega.cotado ? entrega.valor : 0;
   const soma = itens + frete;
@@ -118,4 +123,19 @@ function carrinho(){
       'o metro cai para '+rs(piso)+' — são '+rs(ganho)+' a menos neste pedido.','var(--verde)');
   }
 }
+// Removing is one click, and a wrong click is undone from the notice that follows.
+let desfazerAcao=null, desfazerTimer=null;
+function avisaDesfazer(texto,acao){
+  desfazerAcao=acao; clearTimeout(desfazerTimer);
+  $('desfazerTxt').textContent=texto; $('desfazer').hidden=false;
+  desfazerTimer=setTimeout(fechaDesfazer,8000);
+}
+function fechaDesfazer(){ clearTimeout(desfazerTimer); desfazerAcao=null; $('desfazer').hidden=true; }
+addEventListener('dtf-page-changed',fechaDesfazer);
+$('desfazerBtn').addEventListener('click',()=>{ const acao=desfazerAcao; fechaDesfazer(); if(acao) acao(); });
+$('bEsvaziar').addEventListener('click',()=>{
+  const antes=pedido.slice();
+  pedido=[]; invalidaItemAtual(); pintaPedido();
+  avisaDesfazer('Carrinho esvaziado.',()=>{ pedido=antes; pintaPedido(); });
+});
 function qm(t,c){ const m=$('qmsg'); m.style.display='block'; m.style.color=c||'var(--verde)'; m.innerHTML=t; }

web/site-compra.js

@@ -0,0 +1,30 @@
+/* Site DTF — the product page's buy box: grade, price per metre, billed length,
+   total and the add-to-cart button, beside the live sheet. It shows the item
+   the other site-*.js files already priced (itemAtual) and never computes a
+   price of its own, so the box and the cart always agree. */
+(function(){
+  const vals=$('compraVals'), add=$('bAdd');
+  function pintaCompra(){
+    const it=itemAtual;
+    vals.hidden=!it;
+    add.disabled=!it || !itemPodeEnviar(it);
+    if(!it) return;
+    const semNota=!it.nota;
+    $('cNota').textContent = semNota ? 'sem nota' : it.nota;
+    $('cNotaBar').style.width=(semNota?0:it.nota)+'%';
+    $('cNotaBar').className = semNota ? '' : it.nota>=85 ? 'ok' : it.nota>=50 ? 'av' : 'er';
+    $('cTabela').textContent = TABELA[it.modo]-it.unit>0.001 ? rs(TABELA[it.modo]) : '';
+    $('cMetro').textContent=rs(it.unit);
+    $('cMetragem').textContent=fmtM(it.cob)+' m';
+    const sobraCm=Math.round((it.cob-it.metros)*100);
+    $('cObs').textContent =
+      it.cob===MINIMO_M && it.metros<MINIMO_M
+        ? (ehFolha(it.modo) ? 'Pedido mínimo de 1 m.'
+                            : 'Pedido mínimo de 1 m: ainda cabem '+sobraCm+' cm de artes sem custo.')
+        : sobraCm>0 ? fmtM(it.metros)+' m de folha, arredondado a cada 10 cm.' : '';
+    $('cTotal').textContent=rs(it.total);
+  }
+  add.addEventListener('click',()=>adicionaAoCarrinho());
+  addEventListener('dtf-cart-changed',pintaCompra);
+  pintaCompra();
+})();

web/site-config.js

@@ -10,22 +10,22 @@ const fmt=b=>b<1048576?(b/1024).toFixed(0)+' KB':(b/1048576).toFixed(1).replace(
 // ── modos
 const MODOS={
   file:  {tit:'Arquivo por metro', lg:'DTF têxtil · 57 cm', larg:57,
-          preco:'tabela R$ 19,90/m · até R$ 14,90', multi:true, folha:true,
+          preco:'R$ 14,90 a R$ 19,90 /m conforme a nota', multi:true, folha:true,
           sub:'Sua folha montada. Revisamos, corrigimos e reencaixamos antes de imprimir.',
           zt:'Arraste suas folhas montadas',
           zs:'uma ou várias · PNG, JPG, TIFF ou PDF · PSD, AI e CDR passam por tratamento'},
   avulsa:{tit:'Artes avulsas', lg:'DTF têxtil · 57 cm', larg:57,
-          preco:'tabela R$ 29,90/m · até R$ 24,90', multi:true,
+          preco:'R$ 24,90 a R$ 29,90 /m conforme a nota', multi:true,
           sub:'Cada arte num arquivo. Montamos a folha com o melhor encaixe.',
           zt:'Arraste suas artes aqui',
           zs:'PNG ou JPG com fundo transparente · informe a largura de cada uma'},
   uvfile:{tit:'Arquivo por metro · UV', lg:'Adesivo UV · 28,5 cm', larg:28.5,
-          preco:'tabela R$ 85,90/m · até R$ 69,90', multi:true, folha:true,
+          preco:'R$ 69,90 a R$ 85,90 /m conforme a nota', multi:true, folha:true,
           sub:'Sua folha de UV montada. Revisamos, corrigimos e reencaixamos antes de imprimir.',
           zt:'Arraste suas folhas de UV',
           zs:'uma ou várias · PNG, JPG, TIFF ou PDF · PSD, AI e CDR passam por tratamento'},
   uv:    {tit:'Artes avulsas · UV', lg:'Adesivo UV · 28,5 cm', larg:28.5,
-          preco:'tabela R$ 99,90/m · até R$ 83,90', multi:true,
+          preco:'R$ 83,90 a R$ 99,90 /m conforme a nota', multi:true,
           sub:'Cada arte de UV num arquivo. Montamos a folha com o melhor encaixe.',
           zt:'Arraste suas artes de UV',
           zs:'PNG ou JPG com fundo transparente · informe a largura de cada arte'}

web/site-flow.js

@@ -7,15 +7,36 @@
 // Por isso a nota NÃO muda aqui. E a metragem nova só existe depois que o motor
 // roda na folha de verdade, no servidor: o navegador recebe a folha fechada,
 // não as artes separadas, então não há como recalcular aqui sem inventar número.
+// Loose artworks still show the mounted sheet below; a ready sheet goes
+// straight to the cart.
 $('qOk').addEventListener('click',()=>{
   if($('qOk').disabled) return;
+  if(!$('prev').classList.contains('on')){ adicionaAoCarrinho(); return; }
   const ok=$('ciente').classList.contains('on');
   qm(ok? '<b>Registrado.</b> Você confirmou que viu a ressalva de resolução.'
-       : '<b>Certo.</b> Seu pedido está montado abaixo.','var(--tx)');
+       : '<b>Certo.</b> Confira a folha montada abaixo.','var(--tx)');
-  $('carr').scrollIntoView({behavior:'smooth',block:'nearest'});
+  $('prev').scrollIntoView({behavior:'smooth',block:'start'});
 });
 
-$('pOk').addEventListener('click',()=>$('carr').scrollIntoView({behavior:'smooth'}));
+// The finished item joins the order and the product page starts over empty.
+function guardaItem(){
+  if(itemAtual && !itemPodeEnviar(itemAtual)){
+    $('ciente').scrollIntoView({behavior:'smooth',block:'center'});
+    return false;
+  }
+  if(itemAtual){ pedido.push(itemAtual); itemAtual=null; }
+  $('atual').style.display='none'; $('carrLin').innerHTML='';
+  $('foco').classList.remove('on');
+  ['qual','prev'].forEach(id=>$(id).classList.remove('on'));
+  modo=null; artes=[]; folhas=[]; metros=0; nota=0; montagemCm=0;
+  pintaPedido();
+  return true;
+}
+function adicionaAoCarrinho(){
+  if(!itemAtual){ $('compra').scrollIntoView({behavior:'smooth',block:'nearest'}); return; }
+  if(guardaItem()) vaiPara(CARRINHO);
+}
+$('pOk').addEventListener('click',adicionaAoCarrinho);
 $('pMais').addEventListener('click',()=>$('foco').scrollIntoView({behavior:'smooth'}));
 $('pVolta').addEventListener('click',()=>{
   folhas=[]; artes=[]; reencaixado=false; pintaFolha(); pintaArtes();
@@ -165,19 +186,7 @@ $('bCep').addEventListener('click',async()=>{
   pintaEntrega();
 });
 
-$('bMais').addEventListener('click',()=>{
+$('bMais').addEventListener('click',()=>{ if(guardaItem()) vaiPara('/#envio'); });
-  if(itemAtual && !itemPodeEnviar(itemAtual)){
-    $('qual').scrollIntoView({behavior:'smooth',block:'nearest'});
-    return;
-  }
-  if(itemAtual){ pedido.push(itemAtual); itemAtual=null; }
-  $('atual').style.display='none'; $('carrLin').innerHTML='';
-  $('foco').classList.remove('on'); $('cards').style.display='';
-  ['qual','prev'].forEach(id=>$(id).classList.remove('on'));
-  modo=null; artes=[]; folhas=[]; metros=0; nota=0; montagemCm=0;
-  pintaPedido();
-  document.getElementById('envio').scrollIntoView({behavior:'smooth'});
-});
 
 $('bPagar').addEventListener('click',()=>{
   if(window.dtfCheckout) window.dtfCheckout();

web/site-modes.js

@@ -3,7 +3,12 @@
    Loaded as classic scripts in the order listed there: they share one global
    scope and run top to bottom, exactly as the original did. */
 // ── escolha
-document.querySelectorAll('.ec').forEach(b=>b.addEventListener('click',()=>abrir(b.dataset.modo)));
+document.querySelectorAll('.ec').forEach(b=>b.addEventListener('click',()=>escolheProduto(b.dataset.modo)));
+// Back on the home and into the same product: the artworks sent are still there.
+function escolheProduto(m){
+  if(modo===m && $('foco').classList.contains('on')) vaiPara(PAGINAS[m]);
+  else abrir(m);
+}
 function abrir(m){
   modo=m; artes=[]; folhas=[]; metros=0; nota=0; reencaixado=false;
   montagemCm=0;
@@ -13,7 +18,7 @@ function abrir(m){
   recemChegada=null; caminho='auto'; avisoCam(''); pintaCaminhos();
   $('vMt').textContent='—'; previaAoVivo(); agendaAvaliacao();
   limpaPaineis();   // o carrinho só some se o pedido estiver vazio
-  $('foco').scrollIntoView({behavior:'smooth',block:'start'});
+  vaiPara(PAGINAS[m]);
 }
 function pintaModo(){
   const m=modo;
@@ -29,6 +34,7 @@ function pintaModo(){
   $('larguraFolhaPronta').textContent=String(c.larg).replace('.',',');
   $('foco2').classList.remove('sofila');            // a caixa de requisitos vale nos 4 modos
   $('montcabTit').textContent = ehFolha(m) ? 'Sua folha' : 'Montagem ao vivo';
+  $('qOk').textContent = ehFolha(m) ? 'Adicionar ao carrinho' : 'Ver a folha montada';
   pintaTipoEnvio();
 }
 // O par folha montada / artes separadas fica visível e com preço nos dois lados,
@@ -81,15 +87,16 @@ function trocaTipo(destino){
   if(!destino || modo===destino) return;
   folhas=[]; artes=[]; recemChegada=null; metros=0; nota=0; montagemCm=0;
   modo=destino;
+  history.replaceState(history.state,'',PAGINAS[modo]); document.title=tituloPagina();
   $('lista').innerHTML=''; $('rA').style.display='none'; recusa([]);
   caminho='auto'; avisoCam('');
   pintaModo(); pintaCaminhos(); limpaPaineis(); agendaAvaliacao(); previaAoVivo();
 }
 $('bVoltar').addEventListener('click',()=>{
-  itemAtual=null; $('atual').style.display='none'; $('carrLin').innerHTML=''; pintaPedido();
+  itemAtual=null; modo=null; $('atual').style.display='none'; $('carrLin').innerHTML=''; pintaPedido();
-  $('foco').classList.remove('on'); $('cards').style.display='';
+  $('foco').classList.remove('on');
   ['qual','prev'].forEach(id=>$(id).classList.remove('on'));
   if(!pedido.length) $('carr').classList.remove('on');
-  document.getElementById('envio').scrollIntoView({behavior:'smooth'});
+  vaiPara('/#envio');
 });
 

web/site-pages.js

@@ -0,0 +1,19 @@
+/* Site DTF — the Site's pages: the home, one page per product and the cart.
+   They share this document, so artworks already loaded in the browser survive
+   moving between them; each page has its own address, so Back, Forward, reload
+   and shared links behave as in any store. nginx serves index.html for these
+   addresses. Loaded in <head> so the right page is the first one painted;
+   site-steps.js does the navigation. */
+const PAGINAS={file:'/arquivo-por-metro', avulsa:'/artes-avulsas',
+               uvfile:'/uv-arquivo-por-metro', uv:'/uv-artes-avulsas'};
+const CARRINHO='/carrinho';
+function paginaDe(caminho){
+  caminho=caminho.replace(/\/+$/,'')||'/';
+  if(caminho===CARRINHO) return {pagina:'carrinho'};
+  const m=Object.keys(PAGINAS).find(k=>PAGINAS[k]===caminho);
+  return m ? {pagina:'produto',modo:m} : {pagina:'inicio'};
+}
+// Older portal links open a quote on the home address; quotes live in the cart.
+if(location.pathname==='/' && new URLSearchParams(location.search).has('quote'))
+  history.replaceState(null,'',CARRINHO+location.search);
+document.documentElement.dataset.rota=paginaDe(location.pathname).pagina;

web/site-pdf.js

@@ -319,36 +319,6 @@ function sugestao(a){
   if(economiaCm<0.5) return null;                  // menos de meio centímetro não é notícia
   return {alvo, de:n, para:n+1, fileiras:fa-fd, cm:economiaCm};
 }
-// A cota em escala: o cliente ve a peca dentro da largura do filme, quantas cabem
-// lado a lado e quanto sobra. Numero em texto ninguem le; retangulo todo mundo entende.
-function vizPeca(a){
-  const BASE=300, L=larguraFilme();
-  const e0=BASE/L, alt0=a.cm*propDe(a)*e0;
-  const k = alt0>132 ? 132/alt0 : 1;              // tira nunca fica alta demais
-  const e = e0*k;
-  const n=cabemNaLinha(a.cm), pw=a.cm*e, ph=a.cm*propDe(a)*e, gp=GAP_CM*e;
-  const sobra=L-(n*a.cm+(n-1)*GAP_CM);
-  const ext=escapeHTML(a.f.name.split('.').pop().toUpperCase());
-  let pecas='';
-  for(let i=0;i<n;i++) pecas+='<div class="pc" style="width:'+pw.toFixed(1)+'px;height:'+
-    ph.toFixed(1)+'px">'+(a.src?'<img src="'+a.src+'" alt="" style="transform:'+
-    (a.giro?'rotate(90deg) ':'')+(a.esp?'scaleX(-1)':'')+'">':'<span>'+ext+'</span>')+'</div>';
-  const Wt=(L*e+6).toFixed(1);                    // +6 = borda e respiro da tira
-  return '<div class="viz">'+
-    '<div class="vizRow">'+
-      '<div class="vizH" style="height:'+ph.toFixed(1)+'px"><span>'+n1(a.cm*propDe(a))+' cm</span></div>'+
-      '<div class="vizTira" style="width:'+Wt+'px">'+
-        '<div class="vizL"><i></i><b>'+n1(L)+' cm de filme</b><i></i></div>'+
-        '<div class="tira" style="height:'+ph.toFixed(1)+'px;gap:'+gp.toFixed(1)+'px">'+pecas+
-          (sobra>0.25?'<div class="folga"><span>sobra '+n1(sobra)+' cm</span></div>':'')+
-        '</div>'+
-      '</div>'+
-    '</div>'+
-    '<div class="vizPe"><b>'+n1(a.cm)+' cm</b> de largura · <b>'+n+
-      (n>1?' peças':' peça')+'</b> por fileira'+
-      (sobra>0.25?' · sobram <b>'+n1(sobra)+' cm</b>':' · largura toda aproveitada')+'</div>'+
-  '</div>';
-}
 const n1=v=>v.toFixed(1).replace('.',',');
 
 function pintaArtes(){
@@ -362,17 +332,20 @@ function pintaArtes(){
     }else if(a.cm>0 && a.src){
       const dpi=Math.round(dpiDe(a)), n=Math.max(6,Math.min(100,Math.round(dpi/300*100)));
       barra='<div class="qb2"><i class="'+cls(n)+'" style="width:'+n+'%"></i></div>';
+      const fila=cabemNaLinha(a.cm);
       calc='<span class="'+cls(n)+'"><b>'+n+'%</b> · '+dpi+' DPI</span><span>'+
-        a.q+' × '+n1(a.cm)+' × '+n1(a.cm*propDe(a))+' cm</span>';
+        a.q+' × '+n1(a.cm)+' × '+n1(a.cm*propDe(a))+' cm · '+fila+' por fileira</span>';
       const sug=sugestao(a);
-      dica = sug
+      // One hint per row, on the row it is about: resolution first, since it
-        ? '<div class="dica"><b>Reduzindo para '+n1(sug.alvo)+' cm você economiza '+
+      // changes the price; otherwise a width that saves sheet.
-          n1(sug.cm)+' cm de folha</b>Passam de '+sug.de+' para '+sug.para+
+      const maxCm=Math.floor(a.px/DPI_AVISA*2.54*10)/10;
-          ' por fileira, e as suas '+a.q+' peças ocupam '+sug.fileiras+
+      dica = dpi<DPI_AVISA && maxCm>0 && maxCm<a.cm
-          ' fileira'+(sug.fileiras>1?'s':'')+' a menos.<button data-usar="'+i+'" data-cm="'+
+        ? '<div class="dica av">Pequena para '+n1(a.cm)+' cm. Em '+DPI_AVISA+' DPI ela sai com até '+
-          sug.alvo+'">Usar sugerido</button></div>'
+          n1(maxCm)+' cm, ou envie um arquivo maior.</div>'
+        : sug
+        ? '<div class="dica">Com '+n1(sug.alvo)+' cm cabem '+sug.para+' por fileira e a folha encolhe '+
+          n1(sug.cm)+' cm.<button data-usar="'+i+'" data-cm="'+sug.alvo+'">Usar '+n1(sug.alvo)+' cm</button></div>'
         : '';
-      dica = vizPeca(a) + dica;
     }
     return '<div class="art'+(a===recemChegada?' nova':'')+'"><div class="l1"><b>'+escapeHTML(a.f.name)+'</b>'+
       '<span style="color:var(--fraco);font-size:10.5px">'+

web/site-steps.js

@@ -0,0 +1,136 @@
+/* Site DTF — moving between the Site's pages (addresses in site-pages.js), the
+   order progress bar, the product card prices and the phone total bar. It only
+   switches which page is shown and reads the page's state (the open product,
+   the cart, the checkout status); orders, prices and files stay with the other
+   site-*.js files. */
+// Card prices come from the same table the checkout uses, so they cannot drift.
+document.querySelectorAll('[data-de]').forEach(el=>{ el.textContent=rs(pisoEscada(el.dataset.de)); });
+document.querySelectorAll('[data-ate]').forEach(el=>{ el.textContent=rs(TABELA[el.dataset.ate]); });
+
+const TITULO_INICIO=document.title;
+function tituloPagina(){
+  const p=paginaDe(location.pathname);
+  if(p.pagina==='carrinho') return 'Carrinho · DTF Dropstar';
+  if(p.pagina==='produto') return MODOS[p.modo].tit+' · DTF Dropstar';
+  return TITULO_INICIO;
+}
+
+// Shows the page for the current address; `ancora` scrolls to a section,
+// otherwise the page opens at `y` (the saved position on Back and Forward).
+function mostraPagina(ancora,y,suave){
+  const p=paginaDe(location.pathname);
+  if(p.pagina==='produto' && modo!==p.modo) abrir(p.modo);
+  document.documentElement.dataset.rota=p.pagina;
+  $('cards').style.display='';
+  document.title=tituloPagina();
+  window.dispatchEvent(new Event('dtf-page-changed'));
+  const el=ancora && document.getElementById(ancora);
+  if(el) el.scrollIntoView({behavior:suave?'smooth':'auto',block:'start'});
+  else window.scrollTo(0,y||0);
+}
+function vaiPara(url){
+  const u=new URL(url,location.href);
+  const ancora=u.hash.slice(1)||null;
+  if(u.pathname+u.search===location.pathname+location.search){
+    mostraPagina(ancora,0,true);
+    return;
+  }
+  try{ history.replaceState({...(history.state||{}),y:scrollY},''); }catch(e){}
+  history.pushState({y:0},'',u.pathname+u.search+u.hash);
+  mostraPagina(ancora,0,false);
+}
+
+(function(){
+  if('scrollRestoration' in history) history.scrollRestoration='manual';
+  addEventListener('popstate',e=>mostraPagina(e.state?null:location.hash.slice(1)||null,e.state?.y));
+
+  // Links to the Site's own pages move inside this document; everything else
+  // (the account portal, the store, e-mail) is a normal link.
+  document.addEventListener('click',e=>{
+    const a=e.target.closest && e.target.closest('a[href]');
+    if(!a || e.defaultPrevented || e.button || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || a.target) return;
+    const u=new URL(a.href,location.href);
+    if(u.origin!==location.origin) return;
+    const caminho=u.pathname.replace(/\/+$/,'')||'/';
+    if(caminho!=='/' && caminho!=='/index.html' && paginaDe(caminho).pagina==='inicio') return;
+    e.preventDefault(); vaiPara(u.pathname+u.search+u.hash);
+  });
+
+  const passos=$('passos'), barra=$('barraM'), vazio=$('carrVazio');
+  const foco=$('foco'), carr=$('carr'), status=$('checkoutStatus'), acoes=$('checkoutActions');
+  const rota=()=>document.documentElement.dataset.rota;
+  const temCheckout=()=>!!(status.textContent||'').trim() || acoes.children.length>0;
+
+  // The store header is sticky; the progress bar and the side panels sit below it.
+  function alturas(){
+    const topo=document.querySelector('.topo')?.offsetHeight||0;
+    document.documentElement.style.setProperty('--topo',topo+'px');
+    document.documentElement.style.setProperty('--topo-passos',(topo+(passos.hidden?0:passos.offsetHeight)+16)+'px');
+  }
+  function naTela(el){
+    const r=el.getBoundingClientRect();
+    return r.height>0 && r.top<innerHeight && r.bottom>0;
+  }
+  // Where the phone bar's button leads: the add-to-cart button on a product
+  // page, the order summary in the cart.
+  function alvoBarra(){
+    if(rota()==='produto' && itemAtual) return $('bAdd');
+    if(rota()==='carrinho' && (pedido.length || itemAtual) && !temCheckout())
+      return document.querySelector('.resumo');
+    return null;
+  }
+  let pendente=false;
+  function pinta(){
+    pendente=false;
+    const r=rota();
+    // With nothing in it, the cart page says so instead of showing an empty form.
+    const semItens = !pedido.length && !itemAtual;
+    const carrinhoVazio = r==='carrinho' && semItens && !temCheckout();
+    document.documentElement.toggleAttribute('data-sem-itens', semItens);
+    vazio.hidden = !carrinhoVazio;
+    passos.hidden = r==='inicio' || carrinhoVazio;
+    alturas();
+    if(!passos.hidden){
+      const atual = r==='produto' ? 1 : temCheckout() ? 3 : 2;
+      passos.querySelectorAll('[data-passo]').forEach(a=>{
+        const n=Number(a.dataset.passo);
+        a.classList.toggle('atual',n===atual); a.classList.toggle('feito',n<atual);
+        if(n===atual) a.setAttribute('aria-current','step'); else a.removeAttribute('aria-current');
+      });
+      passos.querySelector('[data-passo="1"]').href =
+        modo && foco.classList.contains('on') ? PAGINAS[modo] : '/#envio';
+    }
+    const alvo=alvoBarra();
+    const mostrar=!!alvo && !naTela(alvo);
+    barra.hidden=!mostrar;
+    if(mostrar){
+      $('barraMTot').textContent=$('carrTot').textContent;
+      $('barraMSub').textContent= r==='produto' ? 'Total até agora' : 'Seu pedido';
+    }
+  }
+  function agenda(){ if(!pendente){ pendente=true; requestAnimationFrame(pinta); } }
+
+  const obs=new MutationObserver(agenda);
+  obs.observe(foco,{attributes:true,attributeFilter:['class']});
+  obs.observe(carr,{attributes:true,attributeFilter:['class']});
+  obs.observe($('prev'),{attributes:true,attributeFilter:['class']});
+  obs.observe(status,{childList:true,characterData:true,subtree:true});
+  obs.observe(acoes,{childList:true});
+  obs.observe($('carrTot'),{childList:true,characterData:true,subtree:true});
+  addEventListener('scroll',agenda,{passive:true});
+  addEventListener('resize',agenda);
+  addEventListener('dtf-cart-changed',agenda);
+  addEventListener('dtf-page-changed',agenda);
+
+  // Payment is a step only once the order has been sent.
+  passos.querySelector('[data-passo="3"]').addEventListener('click',e=>{
+    if(!temCheckout()) e.preventDefault();
+  });
+  $('barraMBtn').addEventListener('click',e=>{
+    e.preventDefault();
+    alvoBarra()?.scrollIntoView({behavior:'smooth',block:'center'});
+  });
+
+  try{ history.replaceState({...(history.state||{}),y:0},''); }catch(e){}
+  mostraPagina(location.hash.slice(1)||null,0);
+})();

web/site-v2.css

@@ -0,0 +1,272 @@
+/* Site DTF — redesign (2026-09). Loaded after the page's own styles and only
+   restyles: every element and class the scripts use keeps its meaning. The
+   previous look is in git tag ui-v1. */
+:root{
+  --laranja:#FFA81A; --laranja2:#FF7F0A; --laranja-escuro:#C25E00;
+  --preto:#03060B; --texto2:#45484D; --fraco:#5C5F64; --linha:#E6E6E6; --cinza:#F9F9F9;
+  --verde:#1E7A45; --verde-ml:#1E7A45; --verde-fundo:#E3F5EA; --aviso-fundo:#FFF8EC; --aviso-linha:#F6D9A6;
+  --raio:14px; --raio2:10px;
+}
+body{background:#fff}
+.w{max-width:1200px;padding:0 24px}
+h1,h2,h3,h4{font-family:"Inter",sans-serif}
+.et{font-family:"Inter",sans-serif;font-weight:800;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--laranja-escuro)}
+
+/* Pages (site-pages.js): the home, a product page and the cart show only their own parts. */
+html[data-rota="inicio"] :is(#passos,#foco,#qual,#prev,#carr,.checkout,#carrVazio),
+html[data-rota="produto"] :is(.hero2,.etapas2,#cards,#carr,.checkout,#carrVazio,#info),
+html[data-rota="carrinho"] :is(.hero2,.etapas2,#cards,#foco,#qual,#prev,#info){display:none!important}
+html[data-sem-itens] #carr{display:none!important}
+html:not([data-rota="inicio"]) #envio{padding-top:0;padding-bottom:64px;min-height:70vh}
+#envio,#foco,#qual,#prev,#checkoutStatus{scroll-margin-top:var(--topo-passos,128px)}
+.carrVazio{max-width:520px;margin:48px auto 0;padding:0 16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
+.carrVazio[hidden]{display:none}
+.carrVazio h2{font-size:28px;font-weight:800;letter-spacing:-.02em}
+.carrVazio p{color:var(--fraco);font-size:16px}
+
+/* Hero */
+.hero2{background:var(--preto);color:#fff;padding:64px 0}
+.hero2-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center}
+.hero2-text{display:flex;flex-direction:column;gap:24px}
+.chips{display:flex;gap:10px;flex-wrap:wrap}
+.chip2{font-family:"Inter",sans-serif;font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:6px 12px;border-radius:6px;border:1px solid #3A3D42;color:#E4E4E4}
+.chip2.destaque{background:var(--laranja);border-color:var(--laranja);color:var(--preto);font-weight:800}
+.hero2 h1{color:#fff;font-size:clamp(34px,4.6vw,58px);line-height:1.04;font-weight:900;letter-spacing:-.03em}
+.hero2 h1 em{font-style:normal;color:var(--laranja)}
+.hero2-text>p{font-size:18px;line-height:1.55;color:#C9CCD1;max-width:560px}
+.hero2-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
+.hero2-cta span{font-size:14px;color:#9EA3AA}
+.btn-laranja{height:56px;padding:0 28px;border-radius:var(--raio2);background:var(--laranja);color:var(--preto);font-family:"Inter",sans-serif;font-weight:800;font-size:17px;display:inline-flex;align-items:center;gap:10px;text-decoration:none}
+.btn-laranja:hover{background:#FFB53D}
+.hero2-folha{background:#14171B;border:1px solid #262A2F;border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:14px}
+.hf-cab{display:flex;align-items:baseline;gap:10px}
+.hf-cab b{font-family:"Inter",sans-serif;font-size:15px}
+.hf-cab span{margin-left:auto;font-size:13px;color:#9EA3AA}
+.hf-area{position:relative;height:260px;border-radius:10px;background:#0B0D10;border:1px dashed #3A3D42;overflow:hidden}
+.hf-area i{position:absolute;border-radius:6px;opacity:.88}
+.hf-num{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
+.hf-num span{display:block;font-size:12px;color:#9EA3AA}
+.hf-num b{font-family:"Inter",sans-serif;font-size:18px}
+.hf-num .verde{color:#57D68A}.hf-num .laranja{color:var(--laranja)}
+
+/* Steps strip */
+.etapas2{padding:32px 0;border-bottom:1px solid var(--linha)}
+.etapas2 .w{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
+.etapas2 .w>div{display:flex;gap:14px;align-items:flex-start}
+.etapas2 span{width:36px;height:36px;flex-shrink:0;border-radius:999px;background:#FFF1DB;color:var(--laranja-escuro);font-family:"Inter",sans-serif;font-weight:800;display:flex;align-items:center;justify-content:center}
+.etapas2 b{font-family:"Inter",sans-serif;font-size:15.5px}
+.etapas2 p{margin-top:3px;font-size:14px;color:var(--fraco)}
+section+section{border-top:0}
+
+/* Product chooser */
+#envio{padding-top:56px}
+.cards-cab{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap}
+.cards-cab h2{margin-top:8px;font-size:clamp(28px,3vw,38px);font-weight:800;letter-spacing:-.02em}
+.cards-cab p{margin-left:auto;max-width:440px;font-size:15px;color:var(--fraco)}
+.escolha{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:28px}
+.ec{text-align:left;padding:26px;gap:14px;border:1px solid var(--linha);border-radius:16px;box-shadow:none;cursor:pointer;font:inherit;color:inherit}
+.ec::before,.ec::after{display:none}
+.ec:hover{border-color:var(--laranja);box-shadow:0 10px 30px rgba(3,6,11,.08);transform:translateY(-2px)}
+.ec.f,.ec.f:hover{border-color:var(--linha)}
+.ec.f:hover{border-color:var(--laranja)}
+.ec-top{display:flex;align-items:center;gap:10px}
+.ec-kind{font-family:"Inter",sans-serif;font-weight:700;font-size:12px;letter-spacing:.05em;color:#707070}
+.marc2{margin-left:auto;font-family:"Inter",sans-serif;font-weight:800;font-size:11px;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--preto);color:var(--laranja)}
+.ec h3{font-size:25px;font-weight:800;letter-spacing:-.01em;color:var(--preto)}
+.ec>p{font-size:15px;line-height:1.5;color:var(--texto2);flex:1}
+.ec-pe{display:flex;align-items:flex-end;gap:12px;padding-top:14px;border-top:1px solid #EFEFEF}
+.ec-preco{display:flex;flex-direction:column;gap:2px}
+.ec-preco span{font-size:13px;color:#707070}
+.ec-preco em{font-style:normal}
+.ec-preco b{font-family:"Inter",sans-serif;font-size:29px;font-weight:900;letter-spacing:-.02em;color:var(--preto)}
+.ec-go{margin-left:auto;height:46px;padding:0 18px;border-radius:var(--raio2);background:var(--preto);color:#fff;font-family:"Inter",sans-serif;font-weight:700;font-size:15px;display:flex;align-items:center;white-space:nowrap}
+.ec:hover .ec-go{background:var(--laranja);color:var(--preto)}
+
+/* Progress bar */
+.passos{position:sticky;top:var(--topo,64px);z-index:30;display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 22px;padding:14px 16px;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--linha);font-family:"Inter",sans-serif;font-size:14px}
+.passos[hidden]{display:none}
+.passos a{display:flex;align-items:center;gap:8px;color:#707070;font-weight:600;text-decoration:none}
+.passos a span{width:26px;height:26px;border-radius:999px;border:2px solid #D0D0D0;display:flex;align-items:center;justify-content:center;font-size:13px}
+.passos a.atual{color:var(--preto);font-weight:800}
+.passos a.atual span{background:var(--laranja);border-color:var(--laranja)}
+.passos a.feito{color:var(--verde)}
+.passos a.feito span{background:var(--verde-fundo);border-color:var(--verde-fundo);color:var(--verde)}
+.passos i{width:48px;height:2px;background:#E0E0E0}
+
+/* Product page (Montagem): artworks on the left; on the right a buy box that
+   stays in view with the live sheet, the grade, the price, the total and the
+   add-to-cart button. The old quality and preview panels are not shown: their
+   parts live in the buy box, and the rest repeated it (the findings list too:
+   each row already says what was checked). */
+#qual,#prev,#rA,.qb2,#qitens{display:none!important}
+.voltar{height:auto;padding:0;border:0;background:none;box-shadow:none;font-size:14px;font-weight:500;color:var(--fraco);margin:24px 0 14px}
+.voltar:hover{color:var(--laranja-escuro)}
+.focoGrid{grid-template-columns:minmax(0,1fr);gap:20px}
+.cat,.cat.file{border:0;background:transparent;box-shadow:none;overflow:visible}
+.cabfoco,.cat.file .cabfoco{padding:0 0 20px!important;background:transparent;border:0;display:grid;
+  grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t e" "s e" "p e";column-gap:24px;align-items:end}
+.cabfoco>div:first-child{grid-area:t;display:flex;flex-direction:column-reverse;gap:4px}
+.cabfoco .lg{font-size:12px;color:#707070;letter-spacing:.05em}
+.cabfoco h3{font-size:32px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
+.cabfoco p{grid-area:s;margin-top:6px;font-size:15px;color:var(--texto2)}
+.cabfoco .pr2{grid-area:p;margin-top:4px;font-size:14px;font-weight:600;color:var(--fraco);white-space:normal}
+.tipoEnvio{grid-area:e;margin:0}
+.tipoEnvio:not([hidden]){display:inline-flex;gap:4px;padding:4px;border-radius:10px;background:#EFEFEF}
+.tipoEnvio .cam,.tipoEnvio .cam.on{border:0;box-shadow:none;background:transparent;padding:0 14px;min-height:40px;border-radius:8px;align-items:center}
+.tipoEnvio .cam.on{background:#fff;box-shadow:0 1px 2px rgba(3,6,11,.14)}
+.tipoEnvio .cam .mk2,.tipoEnvio .cam span,.tipoEnvio .cam em{display:none}
+.tipoEnvio .cam b{margin:0;font-size:13.5px;font-weight:600;white-space:nowrap}
+.tipoEnvio .cam.on b{font-weight:800}
+.tipoEnvio .cam:disabled{cursor:default}
+.tipoEnvio .cam:disabled:not(.on){opacity:.5}
+.cat .in{padding:0!important}
+.foco2{grid-template-columns:minmax(0,1fr) 420px;gap:32px}
+.fila{display:flex;flex-direction:column;gap:12px}
+.fila>*{margin:0}
+.cam{border-radius:var(--raio2)}
+.cam.on{border-color:var(--laranja);background:var(--aviso-fundo)}
+#larguraFolhaPronta{display:inline}
+.zona{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;row-gap:2px;align-items:center;text-align:left;padding:16px 20px;margin:0;border:2px dashed #F2B25A;background:var(--aviso-fundo);border-radius:var(--raio)}
+.zona .ico{grid-row:1/4;width:44px;height:44px;line-height:44px;margin:0;border-radius:10px;background:var(--laranja);color:var(--preto);box-shadow:none}
+.zona b{font-size:15px;margin:0}
+.zona span{max-width:none;margin:0;font-size:13px;color:var(--fraco)}
+.zona .bt{display:none}
+.zona:hover,.zona.sobre{border-color:var(--laranja2);box-shadow:none}
+#lista{display:flex;flex-direction:column;gap:10px}
+#lista:empty{display:none}
+.art{margin:0;padding:14px 16px;border-radius:12px;background:#fff;border:1px solid var(--linha)}
+.art.nova{background:#fff;box-shadow:0 0 0 2px rgba(255,168,26,.45)}
+.art .l1 b{font-size:15px;font-weight:700}
+.art label{font-size:12px}
+.art input{height:42px;font-size:15px;font-weight:600;border-radius:8px}
+.art .cps{grid-template-columns:repeat(2,minmax(0,160px))}
+.rep{margin:0;padding:14px 16px;border-radius:12px;background:#fff;border:1px solid var(--linha)}
+.calc{font-size:13px;margin-top:8px}
+.dica{display:flex;align-items:center;gap:12px;margin-top:10px;padding:10px 12px;border:0;border-radius:8px;background:var(--verde-fundo);font-size:13px;color:#14532D}
+.dica.av{background:var(--aviso-fundo);color:#5A3A00}
+.dica button{display:inline-flex;width:auto;margin:0 0 0 auto;flex:none;height:34px;align-items:center;padding:0 12px;border-radius:7px;border:1px solid var(--verde);background:#fff;color:var(--verde);box-shadow:none;font-size:13px}
+.dica button:hover{background:var(--verde);color:#fff;box-shadow:none}
+.req{position:static;padding:16px 20px 6px;border-radius:12px;box-shadow:none}
+.reqcab{font-size:15px;margin-bottom:6px}
+
+/* The buy box */
+.mont{position:sticky;top:var(--topo-passos,128px);padding:20px;border-radius:16px;background:#fff;box-shadow:none;display:flex;flex-direction:column;gap:12px}
+.mont>*{margin:0}
+.montcab b{font-size:17px;font-weight:800}
+.montpe{font-size:12px;text-align:center}
+.compra{display:flex;flex-direction:column;gap:12px;padding-top:16px;border-top:1px solid #EFEFEF}
+.compra .aoVivo{margin:0}
+.compra .aoVivo.pronto{display:none}
+#compraVals{display:flex;flex-direction:column;gap:10px;font-size:15px}
+#compraVals[hidden]{display:none}
+.cNota{display:flex;align-items:center;gap:12px}
+.cNota span,.cLin>span:first-child{color:var(--texto2)}
+.cNota>i{flex:1;height:6px;border-radius:999px;background:#EFEFEF;overflow:hidden}
+.cNota>i i{display:block;height:100%;border-radius:999px;background:#C9CCD1}
+.cNota>i i.ok{background:var(--verde)}.cNota>i i.av{background:var(--laranja)}.cNota>i i.er{background:var(--vermelho)}
+.cNota b{font-family:"Inter",sans-serif;font-weight:800}
+.cLin{display:flex;align-items:baseline;gap:8px}
+.cLin>span:last-child,.cLin>b{margin-left:auto;display:flex;gap:8px;align-items:baseline}
+.cLin s{font-size:13px;color:#707070}
+.cObs{margin:-4px 0 0;font-size:13px;color:var(--verde)}
+.cObs:empty{display:none}
+.cTot{display:flex;align-items:baseline;padding-top:12px;border-top:1px solid #EFEFEF}
+.cTot span{font-family:"Inter",sans-serif;font-weight:700}
+.cTot b{margin-left:auto;font-family:"Inter",sans-serif;font-size:30px;font-weight:900;letter-spacing:-.01em}
+#qmsg{font-size:13px;line-height:1.45}
+.compra .ciente{margin:0;padding:12px 14px}
+.compra .ciente h4{font-size:13.5px}
+.compra .ciente p,.compra .ciente .lista{font-size:13px}
+.cAdd{height:54px;border-radius:var(--raio2);border:0;background:var(--laranja);color:var(--preto);font-family:"Inter",sans-serif;font-weight:800;font-size:16px;cursor:pointer}
+.cAdd:hover:not(:disabled){background:#FFB53D}
+.cAdd:disabled{background:#EDEDED;color:#8A8D92;cursor:not-allowed}
+.cPe{margin:0;font-size:13px;color:var(--fraco);text-align:center}
+@media(max-width:1100px){.foco2{grid-template-columns:1fr}.mont{position:static}}
+@media(max-width:620px){.montcab b{font-size:15px}
+  .cabfoco,.cat.file .cabfoco{grid-template-columns:1fr;grid-template-areas:"t" "s" "p" "e"}
+  .tipoEnvio:not([hidden]){display:grid;grid-template-columns:1fr 1fr;margin-top:14px}}
+
+/* The quality, preview, cart and checkout panels sit directly in #envio,
+   outside .w; they share the page column so nothing runs edge to edge. */
+#envio>.qual,#envio>.prev,#envio>.carr,#envio>.checkout{width:min(1152px,calc(100% - 48px));margin-left:auto;margin-right:auto}
+@media(max-width:820px){#envio>.qual,#envio>.prev,#envio>.carr,#envio>.checkout{width:calc(100% - 32px)}}
+
+/* Cart */
+.itensCab{display:flex;align-items:baseline;gap:12px;margin-bottom:11px}
+.itensCab h4{margin:0}
+.esvaziar{margin-left:auto;border:0;background:none;padding:6px 0;font-size:13.5px;font-weight:600;color:var(--fraco);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
+.esvaziar:hover{color:#B8391C}
+.esvaziar[hidden]{display:none}
+.item{align-items:center}
+.item .x{flex:none;height:36px;padding:0 12px;border-radius:8px;border:1px solid #D6D6D6;background:#fff;color:var(--texto2);font-size:13px;font-weight:600;font-family:inherit;cursor:pointer}
+.item .x:hover{border-color:#B8391C;color:#B8391C}
+.desfazer{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:80;display:flex;align-items:center;gap:16px;padding:12px 14px 12px 18px;border-radius:12px;background:var(--preto);color:#fff;font-size:14px;box-shadow:0 10px 30px rgba(3,6,11,.25);max-width:calc(100% - 32px);box-sizing:border-box}
+.desfazer[hidden]{display:none}
+.desfazer button{flex:none;height:36px;padding:0 14px;border-radius:8px;border:0;background:var(--laranja);color:var(--preto);font-family:"Inter",sans-serif;font-weight:800;font-size:14px;cursor:pointer}
+@media(max-width:820px){.desfazer{bottom:100px}}
+.carrAviso{grid-column:1/-1;font-size:13px;color:var(--fraco)}
+.carrAviso:empty{display:none}
+.carr{border-radius:16px}
+.carr h3{font-size:24px;font-weight:800;letter-spacing:-.02em}
+.cxE{border-radius:var(--raio);border-color:var(--linha)}
+.cxE h4,.resumo h4{font-family:"Inter",sans-serif;font-weight:800;font-size:17px}
+.cp input,.cepL input{height:46px;border-radius:var(--raio2)}
+.cp input:focus,.cepL input:focus{border-color:var(--laranja2);box-shadow:0 0 0 3px rgba(255,168,26,.18)}
+.opE{border-radius:12px}
+.opE.on{border:2px solid var(--laranja);background:var(--aviso-fundo)}
+.resumo{position:sticky;top:var(--topo-passos,128px);border-radius:16px}
+.tot b{font-family:"Inter",sans-serif;font-weight:900}
+#bPagar{height:54px;border-radius:var(--raio2);background:var(--laranja);color:var(--preto);border:0;font-family:"Inter",sans-serif;font-weight:800;font-size:16px}
+#bPagar:hover:not(:disabled){background:#FFB53D}
+#bPagar:disabled{background:#EDEDED;color:#8A8D92}
+#bMais{height:46px;border-radius:var(--raio2);font-family:"Inter",sans-serif;font-weight:600}
+.checkout{max-width:760px;margin:20px auto 0}
+.checkout #checkoutStatus:not(:empty){padding:16px 18px;border-radius:var(--raio);background:var(--verde-fundo);border:1px solid #BFE6CE;color:#14532D;font-size:15px}
+#checkoutActions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
+#checkoutActions button{height:48px!important;padding:0 20px!important;margin:0!important;border-radius:var(--raio2);border:0;background:var(--laranja);color:var(--preto);font-family:"Inter",sans-serif;font-weight:800;font-size:15px}
+#checkoutActions input{height:44px;border-radius:var(--raio2);border:1px solid #D6D6D6;padding:0 12px}
+
+/* Price and benefits */
+.info2{background:var(--cinza);padding:64px 0}
+.info2-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;align-items:start}
+.info2-preco{display:flex;flex-direction:column;gap:16px}
+.info2 h2{font-size:clamp(26px,3vw,34px);font-weight:800;letter-spacing:-.02em}
+.info2-preco>p{font-size:15px;color:var(--texto2)}
+.info2 table{border-collapse:collapse;background:#fff;border:1px solid var(--linha);border-radius:12px;overflow:hidden;font-size:15px}
+.info2 th{text-align:left;background:var(--preto);color:#fff;font-family:"Inter",sans-serif;font-size:13px;padding:12px 18px}
+.info2 td{padding:11px 18px;border-top:1px solid #EFEFEF}
+.info2 td.melhor{font-weight:700;color:var(--verde)}
+.info2 .nota2{font-size:13px;color:#707070}
+.info2-vant{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
+.info2-vant>div{padding:22px;border-radius:var(--raio);background:#fff;border:1px solid var(--linha);display:flex;flex-direction:column;gap:6px}
+.info2-vant b{font-family:"Inter",sans-serif;font-size:16px}
+.info2-vant b.n{font-size:32px;font-weight:900;color:var(--laranja2)}
+.info2-vant span{font-size:14px;color:var(--fraco)}
+
+/* Phone total bar */
+.barraM{display:none}
+@media (max-width:820px){
+  .barraM:not([hidden]){display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;align-items:center;gap:12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--linha);box-shadow:0 -6px 20px rgba(3,6,11,.08)}
+  .barraM div{display:flex;flex-direction:column}
+  .barraM span{font-size:12px;color:#707070}
+  .barraM b{font-family:"Inter",sans-serif;font-size:21px;font-weight:900}
+  .barraM a{margin-left:auto;height:50px;padding:0 22px;border-radius:var(--raio2);background:var(--laranja);color:var(--preto);font-family:"Inter",sans-serif;font-weight:800;font-size:16px;display:flex;align-items:center;text-decoration:none}
+  .w{padding:0 16px}
+  .hero2{padding:40px 0}
+  .hero2-grid,.info2-grid{grid-template-columns:1fr;gap:28px}
+  .etapas2 .w{grid-template-columns:repeat(2,minmax(0,1fr))}
+  .escolha{grid-template-columns:1fr}
+  .cards-cab p{margin-left:0}
+  .ec-pe{flex-wrap:wrap}
+  .ec-go{margin-left:0;width:100%;justify-content:center}
+  .focoGrid{grid-template-columns:1fr}
+  .mont,.resumo{position:static}
+  .passos{gap:8px;font-size:12.5px;margin:0 0 16px;padding:10px 16px}
+  .passos i{width:14px}
+  .passos a{flex-direction:column;gap:4px;text-align:center}
+  .info2-vant{grid-template-columns:1fr}
+  footer{padding-bottom:84px}
+}
+@media (max-width:480px){
+  .etapas2 .w{grid-template-columns:1fr}
+}