diff --git a/src/pages/ProductionOrders.tsx b/src/pages/ProductionOrders.tsx
index 254137d..70e63e2 100644
--- a/src/pages/ProductionOrders.tsx
+++ b/src/pages/ProductionOrders.tsx
@@ -1,4 +1,4 @@
-import { type FormEvent, useCallback, useEffect, useMemo, useState } from 'react';
+import { Fragment, type FormEvent, useCallback, useEffect, useMemo, useState } from 'react';
 import { Link, useOutletContext } from 'react-router-dom';
 import { ArrowLeft, CheckCircle2, ClipboardList, Clock3, Download, Eye, PackageCheck, PlayCircle, Search, X, XCircle } from 'lucide-react';
 import DateRangePicker from '../components/DateRangePicker';
@@ -268,6 +268,48 @@ const ProductionOrders = () => {
     exportToCSV(exportData, `ordens_producao_${new Date().toISOString().split('T')[0]}.csv`);
   };
 
+  const renderOrderDetails = (order: ProductionOrderItem) => (
+    <div className="space-y-6 rounded-xl border border-dark-border bg-dark-input/25 p-5">
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <p className="text-xs font-bold uppercase tracking-widest text-dark-muted">Detalhes da OP</p>
+          <p className="mt-1 text-sm font-bold text-dark-text">{order.number || `OP #${order.id}`} · {order.productDescription}</p>
+        </div>
+        <button type="button" onClick={() => setSelectedOrderId(null)} className="inline-flex h-8 items-center gap-1.5 rounded-lg border border-dark-border bg-dark-card px-2.5 text-xs font-bold text-dark-muted transition-colors hover:border-brand-primary hover:text-brand-primary">
+          <X className="h-3.5 w-3.5" /> Fechar
+        </button>
+      </div>
+
+      <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
+        <div className="rounded-xl border border-dark-border bg-dark-card p-3"><p className="text-[10px] font-bold uppercase tracking-wider text-dark-muted">Quantidade</p><p className="mt-1 text-lg font-bold text-dark-text">{formatQuantity(order.quantity)} <span className="text-xs text-dark-muted">{order.unit}</span></p></div>
+        <div className="rounded-xl border border-dark-border bg-dark-card p-3"><p className="text-[10px] font-bold uppercase tracking-wider text-dark-muted">Status</p><button type="button" onClick={() => setStatusEditorOrderId(order.id)} className={`mt-2 inline-flex items-center gap-2 rounded-lg border px-2.5 py-1 text-xs font-bold ${getStatusStyle(order.status, order.statusLabel).className}`}><span className={`h-2 w-2 rounded-full ${getStatusStyle(order.status, order.statusLabel).dotClass}`} />{getStatusStyle(order.status, order.statusLabel).label}</button></div>
+        <div className="rounded-xl border border-dark-border bg-dark-card p-3"><p className="text-[10px] font-bold uppercase tracking-wider text-dark-muted">Emissão</p><p className="mt-1 text-sm font-bold text-dark-text">{formatDate(order.issueDate)}</p></div>
+        <div className="rounded-xl border border-dark-border bg-dark-card p-3"><p className="text-[10px] font-bold uppercase tracking-wider text-dark-muted">Previsão</p><p className="mt-1 text-sm font-bold text-dark-text">{formatDate(order.expectedDate)}</p></div>
+      </div>
+
+      <section>
+        <h3 className="text-xs font-bold uppercase tracking-widest text-dark-muted">Produto e marcadores</h3>
+        <div className="mt-3 rounded-xl border border-dark-border bg-dark-card p-4">
+          <p className="font-mono text-xs font-bold text-dark-muted">{order.productSku || 'Sem SKU'}</p>
+          {order.markers.length > 0 && <div className="mt-3 flex flex-wrap gap-1.5">{order.markers.map(marker => <span key={`${order.id}-${marker.label}`} className="inline-flex items-center gap-1.5 rounded-full border border-dark-border bg-dark-input px-2.5 py-1 text-[10px] font-bold text-dark-muted"><span className="h-1.5 w-1.5 rounded-full" style={{ backgroundColor: marker.color || 'var(--color-dark-muted)' }} />{marker.label}</span>)}</div>}
+          <div className="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-xs font-semibold text-dark-muted"><span>Pedido: {order.orderReference || '-'}</span><span>Integração: {order.integrationStatus || 'Local'}</span></div>
+        </div>
+      </section>
+
+      <section>
+        <h3 className="text-xs font-bold uppercase tracking-widest text-dark-muted">Composição</h3>
+        {order.components.length ? <div className="mt-3 overflow-hidden rounded-xl border border-dark-border"><table className="w-full text-xs"><thead className="bg-dark-header text-dark-muted"><tr><th className="px-3 py-2.5 text-left font-bold">Material</th><th className="px-3 py-2.5 text-right font-bold">Por unidade</th><th className="px-3 py-2.5 text-right font-bold">Total</th></tr></thead><tbody className="divide-y divide-dark-border">{order.components.map(component => <tr key={component.id}><td className="px-3 py-3"><p className="font-bold text-dark-text">{component.componentName}</p><p className="mt-0.5 font-mono text-[10px] font-semibold text-dark-muted">{component.componentSku || 'Sem SKU'}</p></td><td className="px-3 py-3 text-right font-semibold text-dark-muted">{formatQuantity(component.quantityPerUnit)} {component.unit}</td><td className="px-3 py-3 text-right font-bold text-dark-text">{formatQuantity(component.totalQuantity)} {component.unit}</td></tr>)}</tbody></table></div> : <p className="mt-3 rounded-xl border border-dark-border bg-dark-card px-4 py-3 text-sm font-semibold text-dark-muted">Sem composição sincronizada.</p>}
+      </section>
+
+      <section>
+        <h3 className="text-xs font-bold uppercase tracking-widest text-dark-muted">Baixa de material</h3>
+        {order.status === 'in_progress' ? <form onSubmit={handleProductionExit} className="mt-3 rounded-xl border border-dark-border bg-dark-card p-4"><p className="text-sm font-semibold text-dark-muted">Registre uma saída somente quando o material for realmente consumido pela OP.</p><div className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2"><label className="text-xs font-bold text-dark-muted">Lote de material<select value={exitForm.lotId} onChange={(event) => setExitForm(current => ({ ...current, lotId: event.target.value }))} className="mt-1.5 h-11 w-full rounded-lg border border-dark-border bg-dark-input px-3 text-sm font-semibold text-dark-text outline-none focus:border-brand-primary"><option value="">Selecione...</option>{supplyLots.map(lot => <option key={lot.id} value={lot.id}>#{lot.id} · {lot.product} · {formatQuantity(lot.quantity)} {lot.unit}</option>)}</select></label><label className="text-xs font-bold text-dark-muted">Quantidade<input inputMode="decimal" value={exitForm.quantity} onChange={(event) => setExitForm(current => ({ ...current, quantity: event.target.value }))} className="mt-1.5 h-11 w-full rounded-lg border border-dark-border bg-dark-input px-3 text-sm font-semibold text-dark-text outline-none placeholder:text-dark-muted focus:border-brand-primary" placeholder="kg" /></label><label className="sm:col-span-2 text-xs font-bold text-dark-muted">Motivo (opcional)<input value={exitForm.reason} onChange={(event) => setExitForm(current => ({ ...current, reason: event.target.value }))} className="mt-1.5 h-11 w-full rounded-lg border border-dark-border bg-dark-input px-3 text-sm font-semibold text-dark-text outline-none placeholder:text-dark-muted focus:border-brand-primary" placeholder="Ex.: corte do pedido" /></label></div>{selectedLot && <p className="mt-3 text-xs font-bold text-dark-muted">Saldo do lote #{selectedLot.id}: {formatQuantity(selectedLot.quantity)} {selectedLot.unit}</p>}<button type="submit" disabled={isSupplyBusy || !supplyLots.length || !exitForm.lotId || !exitForm.quantity} className="mt-4 inline-flex h-11 items-center gap-2 rounded-lg border border-brand-primary/35 bg-brand-primary/10 px-4 text-sm font-bold text-brand-primary transition-colors hover:bg-brand-primary/20 disabled:cursor-not-allowed disabled:opacity-50"><PackageCheck className="h-4 w-4" />{isSupplyBusy ? 'Registrando...' : 'Registrar baixa'}</button>{supplyMessage && <p className="mt-3 rounded-lg border border-dark-border bg-dark-input px-3 py-2 text-sm font-bold text-dark-muted">{supplyMessage}</p>}</form> : <div className="mt-3 rounded-xl border border-dark-border bg-dark-card px-4 py-3 text-sm font-semibold text-dark-muted">Altere a OP para <span className="font-bold text-sky-300">Em andamento</span> antes de registrar a baixa de materiais.</div>}
+      </section>
+
+      {(order.steps.length > 0 || order.notes || order.supplier || order.lotCode || order.rollQuantity || order.fabricKg || order.ribKg || order.yieldPiecesPerKg) && <section><h3 className="text-xs font-bold uppercase tracking-widest text-dark-muted">Informações adicionais</h3><div className="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2">{(order.supplier || order.lotCode || order.rollQuantity || order.fabricKg || order.ribKg || order.yieldPiecesPerKg) && <dl className="grid grid-cols-2 gap-3 rounded-xl border border-dark-border bg-dark-card p-4 text-xs sm:col-span-2">{order.supplier && <div><dt className="font-bold text-dark-muted">Fornecedor</dt><dd className="mt-1 font-bold text-dark-text">{order.supplier}</dd></div>}{order.lotCode && <div><dt className="font-bold text-dark-muted">Lote</dt><dd className="mt-1 font-bold text-dark-text">{order.lotCode}</dd></div>}{order.rollQuantity !== null && <div><dt className="font-bold text-dark-muted">Rolos</dt><dd className="mt-1 font-bold text-dark-text">{formatQuantity(order.rollQuantity)}</dd></div>}{order.fabricKg !== null && <div><dt className="font-bold text-dark-muted">Malha</dt><dd className="mt-1 font-bold text-dark-text">{formatQuantity(order.fabricKg)} kg</dd></div>}{order.ribKg !== null && <div><dt className="font-bold text-dark-muted">Ribana</dt><dd className="mt-1 font-bold text-dark-text">{formatQuantity(order.ribKg)} kg</dd></div>}{order.yieldPiecesPerKg !== null && <div><dt className="font-bold text-dark-muted">Rendimento</dt><dd className="mt-1 font-bold text-dark-text">{formatQuantity(order.yieldPiecesPerKg)} un./kg</dd></div>}</dl>}{order.steps.length > 0 && <div className="rounded-xl border border-dark-border bg-dark-card p-4 sm:col-span-2"><p className="text-xs font-bold text-dark-text">Etapas</p><div className="mt-3 divide-y divide-dark-border">{order.steps.map(step => <div key={step.id} className="flex items-center gap-3 py-2 text-xs"><span className="h-2.5 w-2.5 rounded-full" style={{ backgroundColor: step.color || 'var(--color-brand-primary)' }} /><span className="font-bold text-dark-text">{step.name}</span><span className="ml-auto font-semibold text-dark-muted">{formatDate(step.startDate)} - {formatDate(step.endDate)}</span></div>)}</div></div>}{order.notes && <p className="whitespace-pre-wrap rounded-xl border border-dark-border bg-dark-card p-4 text-sm font-semibold text-dark-muted sm:col-span-2">{order.notes}</p>}</div></section>}
+    </div>
+  );
+
   return (
     <div className="space-y-6">
       <div className="flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
@@ -456,7 +498,8 @@ const ProductionOrders = () => {
                   {paginatedOrders.map((order: ProductionOrderItem) => {
                     const statusStyle = getStatusStyle(order.status, order.statusLabel);
                     return (
-                        <tr key={order.id} className="transition-colors hover:bg-dark-input/50">
+                      <Fragment key={order.id}>
+                        <tr className="transition-colors hover:bg-dark-input/50">
                           <td className="px-6 py-3 font-mono text-xs font-bold text-dark-text">{order.number || '-'}</td>
                           <td className="px-6 py-3">
                             <div className="font-bold text-dark-text">{order.productDescription}</div>
@@ -485,18 +528,21 @@ const ProductionOrders = () => {
                             <button
                               type="button"
                               onClick={() => {
-                                setSelectedOrderId(order.id);
+                                setSelectedOrderId(current => current === order.id ? null : order.id);
                                 setSupplyMessage('');
                                 setExitForm({ lotId: '', quantity: '', reason: '' });
                               }}
-                              title="Abrir detalhes da OP"
-                              aria-label={`Abrir detalhes da OP ${order.number || order.id}`}
-                              className="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-dark-border bg-dark-input text-dark-muted transition-colors hover:border-brand-primary hover:text-brand-primary"
+                              title={selectedOrderId === order.id ? 'Fechar detalhes da OP' : 'Abrir detalhes da OP'}
+                              aria-label={`${selectedOrderId === order.id ? 'Fechar' : 'Abrir'} detalhes da OP ${order.number || order.id}`}
+                              aria-expanded={selectedOrderId === order.id}
+                              className={`inline-flex h-9 w-9 items-center justify-center rounded-lg border transition-colors hover:border-brand-primary hover:text-brand-primary ${selectedOrderId === order.id ? 'border-brand-primary bg-brand-primary/10 text-brand-primary' : 'border-dark-border bg-dark-input text-dark-muted'}`}
                             >
                               <Eye className="h-4 w-4" />
                             </button>
                           </td>
                         </tr>
+                        {selectedOrderId === order.id && <tr className="bg-dark-input/20"><td colSpan={5} className="px-6 pb-5 pt-3">{renderOrderDetails(order)}</td></tr>}
+                      </Fragment>
                     );
                   })}
                 </tbody>
@@ -537,69 +583,6 @@ const ProductionOrders = () => {
         </div>
       )}
 
-      {selectedOrder && (
-        <div className="fixed inset-0 z-50 flex justify-end bg-black/70 p-0 backdrop-blur-sm" role="dialog" aria-modal="true" aria-label={`Detalhes da OP ${selectedOrder.number || selectedOrder.id}`}>
-          <button type="button" aria-label="Fechar detalhes" onClick={() => setSelectedOrderId(null)} className="absolute inset-0 cursor-default" />
-          <aside className="relative flex h-full w-full max-w-3xl flex-col border-l border-dark-border bg-dark-card shadow-2xl">
-            <div className="flex items-start justify-between gap-4 border-b border-dark-border px-6 py-5">
-              <div className="min-w-0">
-                <p className="text-xs font-bold uppercase tracking-widest text-dark-muted">Ordem de produção</p>
-                <h2 className="mt-2 text-xl font-bold text-dark-text">{selectedOrder.number || `OP #${selectedOrder.id}`}</h2>
-                <p className="mt-1 truncate text-sm font-semibold text-dark-muted">{selectedOrder.productDescription}</p>
-              </div>
-              <button type="button" onClick={() => setSelectedOrderId(null)} aria-label="Fechar detalhes" className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-dark-border bg-dark-input text-dark-muted transition-colors hover:border-brand-primary hover:text-brand-primary">
-                <X className="h-5 w-5" />
-              </button>
-            </div>
-
-            <div className="flex-1 space-y-6 overflow-y-auto px-6 py-5">
-              <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
-                <div className="rounded-xl border border-dark-border bg-dark-input/60 p-3"><p className="text-[10px] font-bold uppercase tracking-wider text-dark-muted">Quantidade</p><p className="mt-1 text-lg font-bold text-dark-text">{formatQuantity(selectedOrder.quantity)} <span className="text-xs text-dark-muted">{selectedOrder.unit}</span></p></div>
-                <div className="rounded-xl border border-dark-border bg-dark-input/60 p-3"><p className="text-[10px] font-bold uppercase tracking-wider text-dark-muted">Status</p><button type="button" onClick={() => setStatusEditorOrderId(selectedOrder.id)} className={`mt-2 inline-flex items-center gap-2 rounded-lg border px-2.5 py-1 text-xs font-bold ${getStatusStyle(selectedOrder.status, selectedOrder.statusLabel).className}`}><span className={`h-2 w-2 rounded-full ${getStatusStyle(selectedOrder.status, selectedOrder.statusLabel).dotClass}`} />{getStatusStyle(selectedOrder.status, selectedOrder.statusLabel).label}</button></div>
-                <div className="rounded-xl border border-dark-border bg-dark-input/60 p-3"><p className="text-[10px] font-bold uppercase tracking-wider text-dark-muted">Emissão</p><p className="mt-1 text-sm font-bold text-dark-text">{formatDate(selectedOrder.issueDate)}</p></div>
-                <div className="rounded-xl border border-dark-border bg-dark-input/60 p-3"><p className="text-[10px] font-bold uppercase tracking-wider text-dark-muted">Previsão</p><p className="mt-1 text-sm font-bold text-dark-text">{formatDate(selectedOrder.expectedDate)}</p></div>
-              </div>
-
-              <section>
-                <h3 className="text-xs font-bold uppercase tracking-widest text-dark-muted">Produto e marcadores</h3>
-                <div className="mt-3 rounded-xl border border-dark-border bg-dark-input/45 p-4">
-                  <p className="font-mono text-xs font-bold text-dark-muted">{selectedOrder.productSku || 'Sem SKU'}</p>
-                  {selectedOrder.markers.length > 0 && <div className="mt-3 flex flex-wrap gap-1.5">{selectedOrder.markers.map(marker => <span key={`${selectedOrder.id}-${marker.label}`} className="inline-flex items-center gap-1.5 rounded-full border border-dark-border bg-dark-card px-2.5 py-1 text-[10px] font-bold text-dark-muted"><span className="h-1.5 w-1.5 rounded-full" style={{ backgroundColor: marker.color || 'var(--color-dark-muted)' }} />{marker.label}</span>)}</div>}
-                  <div className="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-xs font-semibold text-dark-muted"><span>Pedido: {selectedOrder.orderReference || '-'}</span><span>Integração: {selectedOrder.integrationStatus || 'Local'}</span></div>
-                </div>
-              </section>
-
-              <section>
-                <h3 className="text-xs font-bold uppercase tracking-widest text-dark-muted">Composição</h3>
-                {selectedOrder.components.length ? (
-                  <div className="mt-3 overflow-hidden rounded-xl border border-dark-border">
-                    <table className="w-full text-xs"><thead className="bg-dark-header text-dark-muted"><tr><th className="px-3 py-2.5 text-left font-bold">Material</th><th className="px-3 py-2.5 text-right font-bold">Por unidade</th><th className="px-3 py-2.5 text-right font-bold">Total</th></tr></thead><tbody className="divide-y divide-dark-border">{selectedOrder.components.map(component => <tr key={component.id}><td className="px-3 py-3"><p className="font-bold text-dark-text">{component.componentName}</p><p className="mt-0.5 font-mono text-[10px] font-semibold text-dark-muted">{component.componentSku || 'Sem SKU'}</p></td><td className="px-3 py-3 text-right font-semibold text-dark-muted">{formatQuantity(component.quantityPerUnit)} {component.unit}</td><td className="px-3 py-3 text-right font-bold text-dark-text">{formatQuantity(component.totalQuantity)} {component.unit}</td></tr>)}</tbody></table>
-                  </div>
-                ) : <p className="mt-3 rounded-xl border border-dark-border bg-dark-input/45 px-4 py-3 text-sm font-semibold text-dark-muted">Sem composição sincronizada.</p>}
-              </section>
-
-              <section>
-                <h3 className="text-xs font-bold uppercase tracking-widest text-dark-muted">Baixa de material</h3>
-                {selectedOrder.status === 'in_progress' ? (
-                  <form onSubmit={handleProductionExit} className="mt-3 rounded-xl border border-dark-border bg-dark-input/45 p-4">
-                    <p className="text-sm font-semibold text-dark-muted">Registre uma saída somente quando o material for realmente consumido pela OP.</p>
-                    <div className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
-                      <label className="text-xs font-bold text-dark-muted">Lote de material<select value={exitForm.lotId} onChange={(event) => setExitForm(current => ({ ...current, lotId: event.target.value }))} className="mt-1.5 h-11 w-full rounded-lg border border-dark-border bg-dark-card px-3 text-sm font-semibold text-dark-text outline-none focus:border-brand-primary"><option value="">Selecione...</option>{supplyLots.map(lot => <option key={lot.id} value={lot.id}>#{lot.id} · {lot.product} · {formatQuantity(lot.quantity)} {lot.unit}</option>)}</select></label>
-                      <label className="text-xs font-bold text-dark-muted">Quantidade<input inputMode="decimal" value={exitForm.quantity} onChange={(event) => setExitForm(current => ({ ...current, quantity: event.target.value }))} className="mt-1.5 h-11 w-full rounded-lg border border-dark-border bg-dark-card px-3 text-sm font-semibold text-dark-text outline-none placeholder:text-dark-muted focus:border-brand-primary" placeholder="kg" /></label>
-                      <label className="sm:col-span-2 text-xs font-bold text-dark-muted">Motivo (opcional)<input value={exitForm.reason} onChange={(event) => setExitForm(current => ({ ...current, reason: event.target.value }))} className="mt-1.5 h-11 w-full rounded-lg border border-dark-border bg-dark-card px-3 text-sm font-semibold text-dark-text outline-none placeholder:text-dark-muted focus:border-brand-primary" placeholder="Ex.: corte do pedido" /></label>
-                    </div>
-                    {selectedLot && <p className="mt-3 text-xs font-bold text-dark-muted">Saldo do lote #{selectedLot.id}: {formatQuantity(selectedLot.quantity)} {selectedLot.unit}</p>}
-                    <button type="submit" disabled={isSupplyBusy || !supplyLots.length || !exitForm.lotId || !exitForm.quantity} className="mt-4 inline-flex h-11 items-center gap-2 rounded-lg border border-brand-primary/35 bg-brand-primary/10 px-4 text-sm font-bold text-brand-primary transition-colors hover:bg-brand-primary/20 disabled:cursor-not-allowed disabled:opacity-50"><PackageCheck className="h-4 w-4" />{isSupplyBusy ? 'Registrando...' : 'Registrar baixa'}</button>
-                    {supplyMessage && <p className="mt-3 rounded-lg border border-dark-border bg-dark-card px-3 py-2 text-sm font-bold text-dark-muted">{supplyMessage}</p>}
-                  </form>
-                ) : <div className="mt-3 rounded-xl border border-dark-border bg-dark-input/45 px-4 py-3 text-sm font-semibold text-dark-muted">Altere a OP para <span className="font-bold text-sky-300">Em andamento</span> antes de registrar a baixa de materiais.</div>}
-              </section>
-
-              {(selectedOrder.steps.length > 0 || selectedOrder.notes || selectedOrder.supplier || selectedOrder.lotCode || selectedOrder.rollQuantity || selectedOrder.fabricKg || selectedOrder.ribKg || selectedOrder.yieldPiecesPerKg) && <section><h3 className="text-xs font-bold uppercase tracking-widest text-dark-muted">Informações adicionais</h3><div className="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2">{(selectedOrder.supplier || selectedOrder.lotCode || selectedOrder.rollQuantity || selectedOrder.fabricKg || selectedOrder.ribKg || selectedOrder.yieldPiecesPerKg) && <dl className="grid grid-cols-2 gap-3 rounded-xl border border-dark-border bg-dark-input/45 p-4 text-xs sm:col-span-2">{selectedOrder.supplier && <div><dt className="font-bold text-dark-muted">Fornecedor</dt><dd className="mt-1 font-bold text-dark-text">{selectedOrder.supplier}</dd></div>}{selectedOrder.lotCode && <div><dt className="font-bold text-dark-muted">Lote</dt><dd className="mt-1 font-bold text-dark-text">{selectedOrder.lotCode}</dd></div>}{selectedOrder.rollQuantity !== null && <div><dt className="font-bold text-dark-muted">Rolos</dt><dd className="mt-1 font-bold text-dark-text">{formatQuantity(selectedOrder.rollQuantity)}</dd></div>}{selectedOrder.fabricKg !== null && <div><dt className="font-bold text-dark-muted">Malha</dt><dd className="mt-1 font-bold text-dark-text">{formatQuantity(selectedOrder.fabricKg)} kg</dd></div>}{selectedOrder.ribKg !== null && <div><dt className="font-bold text-dark-muted">Ribana</dt><dd className="mt-1 font-bold text-dark-text">{formatQuantity(selectedOrder.ribKg)} kg</dd></div>}{selectedOrder.yieldPiecesPerKg !== null && <div><dt className="font-bold text-dark-muted">Rendimento</dt><dd className="mt-1 font-bold text-dark-text">{formatQuantity(selectedOrder.yieldPiecesPerKg)} un./kg</dd></div>}</dl>}{selectedOrder.steps.length > 0 && <div className="rounded-xl border border-dark-border bg-dark-input/45 p-4 sm:col-span-2"><p className="text-xs font-bold text-dark-text">Etapas</p><div className="mt-3 divide-y divide-dark-border">{selectedOrder.steps.map(step => <div key={step.id} className="flex items-center gap-3 py-2 text-xs"><span className="h-2.5 w-2.5 rounded-full" style={{ backgroundColor: step.color || 'var(--color-brand-primary)' }} /><span className="font-bold text-dark-text">{step.name}</span><span className="ml-auto font-semibold text-dark-muted">{formatDate(step.startDate)} - {formatDate(step.endDate)}</span></div>)}</div></div>}{selectedOrder.notes && <p className="whitespace-pre-wrap rounded-xl border border-dark-border bg-dark-input/45 p-4 text-sm font-semibold text-dark-muted sm:col-span-2">{selectedOrder.notes}</p>}</div></section>}
-            </div>
-          </aside>
-        </div>
-      )}
 
       {statusEditorOrder && (
         <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/70 p-4 backdrop-blur-sm" role="dialog" aria-modal="true" aria-labelledby="production-status-title">