chore: Styling OrderLine

src/pages/catalog/components/order/components/order_line/OrderLine.module.css

@@ -0,0 +1,93 @@
+
+.cardline_container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: #ffffff;
+    border: 1px solid #e0e0e0;
+    border-radius: 12px;
+    margin: 0.5rem auto;
+    padding: 1rem 1.5rem;
+    gap: 1rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    transition: all 0.2s ease;
+    max-width: 800px;
+}
+
+.cardline_container:hover {
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+    transform: translateY(-1px);
+}
+
+.cardline_info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.cardline_product_name {
+    font-weight: 600;
+    color: #333;
+    font-size: 1rem;
+    margin: 0;
+}
+
+.cardline_details {
+    display: flex;
+    gap: 1rem;
+    font-size: 0.875rem;
+    color: #666;
+}
+
+.cardline_price {
+    font-weight: 700;
+    color: black;
+    font-size: 1.1rem;
+    min-width: 80px;
+    text-align: right;
+}
+
+.cardline_quantity {
+    background: #f5f5f5;
+    padding: 0.25rem 0.75rem;
+    border-radius: 16px;
+    font-weight: 500;
+    color: #555;
+}
+
+.cardline_delete {
+    background: red;
+    bold: ;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+    font-size: 0.875rem;
+    transition: all 0.2s ease;
+}
+
+.cardline_delete:hover {
+    background: #ff5252;
+    transform: scale(1.05);
+}
+
+/* Responsive para móviles */
+@media (max-width: 768px) {
+    .cardline_container {
+        flex-direction: column;
+        align-items: stretch;
+        text-align: center;
+        padding: 1rem;
+    }
+
+    .cardline_details {
+        justify-content: center;
+    }
+
+    .cardline_price {
+        text-align: center;
+        margin: 0.5rem 0;
+    }
+}

src/pages/catalog/components/order/components/order_line/OrderLine.tsx

@@ -1,5 +1,5 @@
 import type { ProductLine } from '../../../../../../types.ts'
-
+import styles from './OrderLine.module.css'
 
 type OrderLineProps = {
   line: ProductLine;
@@ -10,9 +10,21 @@ const OrderLine = ( {line} : OrderLineProps ) => {
   const { product, quantity, unitPrice, totalAmount } = line;
 
   return (
-    <>
-      <p>{product.name} {quantity}{product.uomSymbol} {unitPrice} {totalAmount} <button>Eliminar</button></p>
-    </>
+    <div className={styles.cardline_container}>
+      <div className={styles.cardline_info}>
+        <h4 className={styles.cardline_product_name}>{product.name}</h4>
+        <div className={styles.cardline_details}>
+          <span className={styles.cardline_quantity}>Cantidad: {quantity}</span>
+          <span className={styles.cardline_unit_price}>{unitPrice} c/u</span>
+        </div>
+      </div>
+      <div className={styles.cardline_price}>{totalAmount}</div>
+      <button className={styles.cardline_delete}>
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14zM10 11v6M14 11v6"/>
+        </svg>
+      </button>
+    </div>
   )
 }