feat: simplify budget calculator with manual default and dynamic multiplier

src/main.js

@@ -21,10 +21,36 @@ const inputMateriaTotal = document.getElementById('manual-materia');
 const inputConfeccionTotal = document.getElementById('manual-confeccion');
 const inputCorte = document.getElementById('costo-corte');
 const inputDistribucion = document.getElementById('costo-distribucion');
-
 const btnCalcular = document.getElementById('btn-calcular');
+
 const resVenta = document.getElementById('res-venta');
 const resCoste = document.getElementById('res-coste');
+const inputMultiplicador = document.getElementById('input-multiplicador');
+const formulaMulti = document.getElementById('formula-multi');
+
+// Toggle Buttons
+const toggleBtns = document.querySelectorAll('.toggle-btn');
+toggleBtns.forEach(btn => {
+    btn.onclick = () => {
+        const group = btn.dataset.group;
+        const targetId = btn.dataset.target;
+
+        // Update Buttons
+        document.querySelectorAll(`.toggle-btn[data-group="${group}"]`).forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+
+        // Update Content
+        const contentGroup = group === 'materia' ? ['materia-excel', 'materia-manual'] : ['confeccion-excel', 'confeccion-manual'];
+        contentGroup.forEach(id => {
+            document.getElementById(id).classList.toggle('hidden', id !== targetId);
+        });
+    };
+});
+
+// Listener para actualizar el texto de la fórmula cuando cambie el multiplicador
+inputMultiplicador.oninput = () => {
+    formulaMulti.innerText = `x ${inputMultiplicador.value}`;
+};
 
 // Handlers para subida de archivos
 uploadConfeccion.onclick = () => fileConfeccion.click();
@@ -56,7 +82,7 @@ async function handleFileUpload(event, type) {
 
 function renderTable(container, data, keys, targetInput) {
     container.innerHTML = '';
-    
+
     // Detectar nombres de columnas automáticamente si no son estándar
     const availableKeys = data.length > 0 ? Object.keys(data[0]) : [];
     const nameKey = availableKeys[0] || 'Concepto';
@@ -82,7 +108,7 @@ function renderTable(container, data, keys, targetInput) {
 // Búsqueda en tablas
 searchMateria.oninput = (e) => {
     const term = e.target.value.toLowerCase();
-    const filtered = dataMaterias.filter(item => 
+    const filtered = dataMaterias.filter(item =>
         Object.values(item).some(val => String(val).toLowerCase().includes(term))
     );
     renderTable(tbodyMaterias, filtered, [], inputMateriaTotal);
@@ -90,7 +116,7 @@ searchMateria.oninput = (e) => {
 
 searchConfeccion.oninput = (e) => {
     const term = e.target.value.toLowerCase();
-    const filtered = dataConfeccion.filter(item => 
+    const filtered = dataConfeccion.filter(item =>
         Object.values(item).some(val => String(val).toLowerCase().includes(term))
     );
     renderTable(tbodyConfeccion, filtered, [], inputConfeccionTotal);
@@ -102,9 +128,10 @@ btnCalcular.onclick = () => {
     const c = parseFloat(inputConfeccionTotal.value) || 0;
     const corte = parseFloat(inputCorte.value) || 0;
     const dist = parseFloat(inputDistribucion.value) || 0;
+    const multiplicador = parseFloat(inputMultiplicador.value) || 2;
 
     const costeTotal = m + c + corte + dist;
-    const precioVenta = costeTotal * 2;
+    const precioVenta = costeTotal * multiplicador;
 
     resCoste.innerText = costeTotal.toFixed(2);
     resVenta.innerText = precioVenta.toFixed(2);

src/style.css

@@ -1,13 +1,15 @@
 :root {
   --font-serif: 'Playfair Display', serif;
   --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
-  
+
   /* Palette: Ballet Atelier */
   --bg-color: #fcf9f8;
   --card-bg: rgba(255, 255, 255, 0.85);
-  --primary-color: #d4a373; /* Satin Tan */
+  --primary-color: #d4a373;
+  /* Satin Tan */
   --primary-light: #faedcd;
-  --accent-color: #e76f51; /* Deep Silk */
+  --accent-color: #e76f51;
+  /* Deep Silk */
   --text-dark: #264653;
   --text-muted: #6d6d6d;
   --border-color: #e9edc9;
@@ -31,7 +33,9 @@ body {
   flex-direction: column;
 }
 
-h1, h2, h3 {
+h1,
+h2,
+h3 {
   font-family: var(--font-serif);
   font-weight: 700;
 }
@@ -87,7 +91,8 @@ label {
   letter-spacing: 0.5px;
 }
 
-input, select {
+input,
+select {
   width: 100%;
   padding: 1rem;
   border: 1px solid #ddd;
@@ -97,7 +102,8 @@ input, select {
   transition: all 0.3s ease;
 }
 
-input:focus, select:focus {
+input:focus,
+select:focus {
   outline: none;
   border-color: var(--primary-color);
   box-shadow: 0 0 0 3px var(--primary-light);
@@ -208,7 +214,8 @@ table {
   border-collapse: collapse;
 }
 
-th, td {
+th,
+td {
   padding: 0.75rem;
   text-align: left;
   border-bottom: 1px solid #eee;
@@ -245,3 +252,35 @@ tr:hover {
 .hidden {
   display: none;
 }
+
+/* Input Toggles */
+.input-toggle {
+  display: flex;
+  background: #f0f0f0;
+  padding: 0.25rem;
+  border-radius: 50px;
+  margin-bottom: 1rem;
+  width: fit-content;
+}
+
+.toggle-btn {
+  border: none;
+  background: none;
+  padding: 0.5rem 1.5rem;
+  border-radius: 50px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  color: var(--text-muted);
+}
+
+.toggle-btn.active {
+  background: white;
+  color: var(--primary-color);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.toggle-content {
+  transition: all 0.3s ease;
+}