añade un campo costos extras en el primer panel, en el segundo panel, añade los valores de costos extras tanto en elc osto por unidad como en el costo por cantidad - Follow Up Deployment

index.html

@@ -105,6 +105,18 @@
                     <input type="text" id="orderName" value="Pedido 1"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                 </div>
+
+                <div>
+                    <label for="extraCosts" class="block text-sm font-medium text-gray-700 mb-1">
+                        <i class="fas fa-plus-circle text-indigo-500 mr-2"></i>Costos extras por unidad ($)
+                    </label>
+                    <div class="relative">
+                        <input type="number" id="extraCosts" min="0" step="0.01" value="0"
+                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
+                        <span class="absolute right-3 top-2.5 text-gray-500">$/unidad</span>
+                    </div>
+                    <p id="extraCostsError" class="text-red-500 text-xs mt-1 hidden">Ingrese un valor válido</p>
+                </div>
             </div>
 
             <div class="mt-6 flex justify-center">
@@ -137,6 +149,10 @@
                             <span class="text-gray-600">Costo costura (1 unidad):</span>
                             <span id="sewingCostSingle" class="font-medium">$0.00</span>
                         </div>
+                        <div class="flex justify-between">
+                            <span class="text-gray-600">Costos extras (1 unidad):</span>
+                            <span id="extraCostsSingle" class="font-medium">$0.00</span>
+                        </div>
                         <div class="border-t border-gray-200 my-2"></div>
                         <div class="flex justify-between">
                             <span class="text-gray-800 font-semibold">Total por 1 unidad:</span>
@@ -154,6 +170,10 @@
                             <span class="text-gray-600">Costo sublimación:</span>
                             <span id="sublimationCostQuantity" class="font-medium">$0.00</span>
                         </div>
+                        <div class="flex justify-between">
+                            <span class="text-gray-600">Costos extras:</span>
+                            <span id="extraCostsQuantity" class="font-medium">$0.00</span>
+                        </div>
                         <div class="border-t border-gray-200 my-2"></div>
                         <div class="flex justify-between">
                             <span class="text-gray-800 font-semibold">Total por <span id="quantityDisplay">1</span> unidad(es):</span>
@@ -227,6 +247,7 @@
                 const fabricArea = parseFloat(fabricAreaInput.value);
                 const sublimationArea = parseFloat(sublimationAreaInput.value);
                 const sewingPrice = parseFloat(sewingPriceInput.value);
+                const extraCosts = parseFloat(document.getElementById('extraCosts').value) || 0;
                 
                 // Validate inputs
                 let isValid = true;
@@ -266,13 +287,14 @@
                 // Calculate costs
                 const fabricCostPerUnit = fabricPrice * fabricArea;
                 const sublimationCostPerUnit = sublimationPrice * sublimationArea;
-                const totalCostPerUnit = fabricCostPerUnit + sublimationCostPerUnit + sewingPrice;
+                const totalCostPerUnit = fabricCostPerUnit + sublimationCostPerUnit + sewingPrice + extraCosts;
                 
                 const quantity = parseInt(document.getElementById('quantity').value) || 1;
                 document.getElementById('quantityDisplay').textContent = quantity;
                 const fabricCostForQuantity = fabricCostPerUnit * quantity;
                 const sublimationCostForQuantity = sublimationCostPerUnit * quantity;
                 const sewingCostForQuantity = sewingPrice * quantity;
+                const extraCostsForQuantity = extraCosts * quantity;
                 const totalCostForQuantity = totalCostPerUnit * quantity;
                 
                 // Update UI with results
@@ -281,9 +303,11 @@
                 totalCostSingle.textContent = `${totalCostPerUnit.toFixed(2)}`;
                 
                 document.getElementById('sewingCostSingle').textContent = `${sewingPrice.toFixed(2)}`;
+                document.getElementById('extraCostsSingle').textContent = `${extraCosts.toFixed(2)}`;
                 document.getElementById('fabricCostQuantity').textContent = `${fabricCostForQuantity.toFixed(2)}`;
                 document.getElementById('sublimationCostQuantity').textContent = `${sublimationCostForQuantity.toFixed(2)}`;
                 document.getElementById('sewingCostQuantity').textContent = `${sewingCostForQuantity.toFixed(2)}`;
+                document.getElementById('extraCostsQuantity').textContent = `${extraCostsForQuantity.toFixed(2)}`;
                 document.getElementById('totalCostQuantity').textContent = `${totalCostForQuantity.toFixed(2)}`;
 
                 // Add to history
@@ -362,5 +386,5 @@
             }
         });
     </script>
-<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo2" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=JymNils/calculadora-textil" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p><p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=JymNils/calculadora-textil" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo2" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=JymNils/calculadora-textil" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p><p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=JymNils/calculadora-textil" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p><p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=JymNils/calculadora-textil2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>