diff --git a/frontend/src/components/domain/unified-wizard/wizards/CustomerOrderWizard.tsx b/frontend/src/components/domain/unified-wizard/wizards/CustomerOrderWizard.tsx
index 16015988..5121474a 100644
--- a/frontend/src/components/domain/unified-wizard/wizards/CustomerOrderWizard.tsx
+++ b/frontend/src/components/domain/unified-wizard/wizards/CustomerOrderWizard.tsx
@@ -226,7 +226,7 @@ const CustomerSelectionStep: React.FC<WizardDataProps> = ({ data, onDataChange,
                   value={newCustomer.name}
                   onChange={(e) => setNewCustomer({ ...newCustomer, name: e.target.value })}
                   placeholder="Ej: Restaurante El Molino"
-                  className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+                  className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
                 />
               </div>
 
@@ -237,7 +237,7 @@ const CustomerSelectionStep: React.FC<WizardDataProps> = ({ data, onDataChange,
                 <select
                   value={newCustomer.type}
                   onChange={(e) => setNewCustomer({ ...newCustomer, type: e.target.value })}
-                  className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+                  className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
                 >
                   <option value="retail">Minorista</option>
                   <option value="wholesale">Mayorista</option>
@@ -255,7 +255,7 @@ const CustomerSelectionStep: React.FC<WizardDataProps> = ({ data, onDataChange,
                   value={newCustomer.phone}
                   onChange={(e) => setNewCustomer({ ...newCustomer, phone: e.target.value })}
                   placeholder="+34 123 456 789"
-                  className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+                  className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
                 />
               </div>
 
@@ -268,7 +268,7 @@ const CustomerSelectionStep: React.FC<WizardDataProps> = ({ data, onDataChange,
                   value={newCustomer.email}
                   onChange={(e) => setNewCustomer({ ...newCustomer, email: e.target.value })}
                   placeholder="contacto@restaurante.com"
-                  className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+                  className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
                 />
               </div>
             </div>
@@ -681,7 +681,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
               value={deliveryData.deliveryDate}
               onChange={(e) => setDeliveryData({ ...deliveryData, deliveryDate: e.target.value })}
               min={new Date().toISOString().split('T')[0]}
-              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
             />
           </div>
 
@@ -693,7 +693,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
               type="time"
               value={deliveryData.deliveryTime}
               onChange={(e) => setDeliveryData({ ...deliveryData, deliveryTime: e.target.value })}
-              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
             />
           </div>
         </div>
@@ -753,7 +753,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
               onChange={(e) => setDeliveryData({ ...deliveryData, deliveryAddress: e.target.value })}
               placeholder="Calle, número, piso, código postal, ciudad..."
               rows={3}
-              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
             />
           </div>
         )}
@@ -767,7 +767,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
           <select
             value={deliveryData.paymentMethod}
             onChange={(e) => setDeliveryData({ ...deliveryData, paymentMethod: e.target.value })}
-            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
           >
             <option value="cash">Efectivo</option>
             <option value="card">Tarjeta</option>
@@ -786,7 +786,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
           <select
             value={deliveryData.orderStatus}
             onChange={(e) => setDeliveryData({ ...deliveryData, orderStatus: e.target.value })}
-            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
           >
             <option value="pending">Pendiente</option>
             <option value="confirmed">Confirmado</option>
@@ -804,7 +804,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
             onChange={(e) => setDeliveryData({ ...deliveryData, specialInstructions: e.target.value })}
             placeholder="Notas sobre el pedido, preferencias de entrega, etc..."
             rows={3}
-            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
           />
         </div>
 
diff --git a/frontend/src/components/domain/unified-wizard/wizards/CustomerWizard.tsx b/frontend/src/components/domain/unified-wizard/wizards/CustomerWizard.tsx
index 26818b7d..d13c3190 100644
--- a/frontend/src/components/domain/unified-wizard/wizards/CustomerWizard.tsx
+++ b/frontend/src/components/domain/unified-wizard/wizards/CustomerWizard.tsx
@@ -70,7 +70,7 @@ const CustomerDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
                 value={customerData.name}
                 onChange={(e) => setCustomerData({ ...customerData, name: e.target.value })}
                 placeholder="Ej: Restaurante El Molino"
-                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
               />
             </div>
 
@@ -81,7 +81,7 @@ const CustomerDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
               <select
                 value={customerData.customerType}
                 onChange={(e) => setCustomerData({ ...customerData, customerType: e.target.value })}
-                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
               >
                 <option value="retail">Minorista</option>
                 <option value="wholesale">Mayorista</option>
@@ -101,7 +101,7 @@ const CustomerDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
                 value={customerData.contactPerson}
                 onChange={(e) => setCustomerData({ ...customerData, contactPerson: e.target.value })}
                 placeholder="Nombre del contacto"
-                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
               />
             </div>
           </div>
@@ -125,7 +125,7 @@ const CustomerDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
                 value={customerData.phone}
                 onChange={(e) => setCustomerData({ ...customerData, phone: e.target.value })}
                 placeholder="+34 123 456 789"
-                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
               />
             </div>
 
@@ -139,7 +139,7 @@ const CustomerDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
                 value={customerData.email}
                 onChange={(e) => setCustomerData({ ...customerData, email: e.target.value })}
                 placeholder="contacto@empresa.com"
-                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
               />
             </div>
           </div>
@@ -162,7 +162,7 @@ const CustomerDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
                 onChange={(e) => setCustomerData({ ...customerData, address: e.target.value })}
                 placeholder="Calle, número, piso, etc..."
                 rows={2}
-                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
               />
             </div>
 
@@ -175,7 +175,7 @@ const CustomerDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
                 value={customerData.city}
                 onChange={(e) => setCustomerData({ ...customerData, city: e.target.value })}
                 placeholder="Ciudad"
-                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
               />
             </div>
 
@@ -188,7 +188,7 @@ const CustomerDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
                 value={customerData.postalCode}
                 onChange={(e) => setCustomerData({ ...customerData, postalCode: e.target.value })}
                 placeholder="28001"
-                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
               />
             </div>
           </div>
@@ -357,7 +357,7 @@ const PreferencesTermsStep: React.FC<WizardDataProps> = ({ data, onDataChange, o
               <select
                 value={preferences.paymentTerms}
                 onChange={(e) => setPreferences({ ...preferences, paymentTerms: e.target.value })}
-                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
               >
                 <option value="immediate">Pago Inmediato</option>
                 <option value="net15">Net 15 días</option>
@@ -379,7 +379,7 @@ const PreferencesTermsStep: React.FC<WizardDataProps> = ({ data, onDataChange, o
                     setPreferences({ ...preferences, customPaymentDays: e.target.value })
                   }
                   placeholder="45"
-                  className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+                  className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
                   min="1"
                 />
               </div>
@@ -396,7 +396,7 @@ const PreferencesTermsStep: React.FC<WizardDataProps> = ({ data, onDataChange, o
                   setPreferences({ ...preferences, discountPercentage: e.target.value })
                 }
                 placeholder="10"
-                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
                 min="0"
                 max="100"
                 step="0.1"
@@ -493,7 +493,7 @@ const PreferencesTermsStep: React.FC<WizardDataProps> = ({ data, onDataChange, o
                 }
                 placeholder="Ej: Vegano, sin azúcar, kosher, halal..."
                 rows={2}
-                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+                className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
               />
             </div>
           </div>
@@ -509,7 +509,7 @@ const PreferencesTermsStep: React.FC<WizardDataProps> = ({ data, onDataChange, o
             onChange={(e) => setPreferences({ ...preferences, notes: e.target.value })}
             placeholder="Información adicional sobre el cliente, preferencias especiales, historial..."
             rows={3}
-            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
           />
         </div>
 
diff --git a/frontend/src/components/domain/unified-wizard/wizards/EquipmentWizard.tsx b/frontend/src/components/domain/unified-wizard/wizards/EquipmentWizard.tsx
index 963c3e6b..e4f6a47b 100644
--- a/frontend/src/components/domain/unified-wizard/wizards/EquipmentWizard.tsx
+++ b/frontend/src/components/domain/unified-wizard/wizards/EquipmentWizard.tsx
@@ -81,7 +81,7 @@ const EquipmentDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, o
           <select
             value={equipmentData.type}
             onChange={(e) => setEquipmentData({ ...equipmentData, type: e.target.value })}
-            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
           >
             <option value="oven">Horno</option>
             <option value="mixer">Amasadora</option>
@@ -97,7 +97,7 @@ const EquipmentDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, o
             value={equipmentData.brand}
             onChange={(e) => setEquipmentData({ ...equipmentData, brand: e.target.value })}
             placeholder="Ej: Rational SCC 101"
-            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
           />
         </div>
         <div>
@@ -107,7 +107,7 @@ const EquipmentDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, o
             value={equipmentData.location}
             onChange={(e) => setEquipmentData({ ...equipmentData, location: e.target.value })}
             placeholder="Ej: Cocina principal"
-            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
           />
         </div>
         <div>
@@ -116,7 +116,7 @@ const EquipmentDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, o
             type="date"
             value={equipmentData.purchaseDate}
             onChange={(e) => setEquipmentData({ ...equipmentData, purchaseDate: e.target.value })}
-            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
           />
         </div>
       </div>
diff --git a/frontend/src/components/domain/unified-wizard/wizards/InventoryWizard.tsx b/frontend/src/components/domain/unified-wizard/wizards/InventoryWizard.tsx
index 80eda200..041e7d06 100644
--- a/frontend/src/components/domain/unified-wizard/wizards/InventoryWizard.tsx
+++ b/frontend/src/components/domain/unified-wizard/wizards/InventoryWizard.tsx
@@ -132,7 +132,7 @@ const CoreDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNext
             value={formData.name}
             onChange={(e) => setFormData({ ...formData, name: e.target.value })}
             placeholder={isIngredient ? "Ej: Harina de trigo" : "Ej: Baguette tradicional"}
-            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
           />
         </div>
 
@@ -143,7 +143,7 @@ const CoreDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNext
           <select
             value={formData.category}
             onChange={(e) => setFormData({ ...formData, category: e.target.value })}
-            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
           >
             <option value="">Seleccionar...</option>
             {isIngredient ? (
@@ -173,7 +173,7 @@ const CoreDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNext
           <select
             value={formData.unit}
             onChange={(e) => setFormData({ ...formData, unit: e.target.value })}
-            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
           >
             <option value="">Seleccionar...</option>
             <option value="kg">Kilogramos (kg)</option>
@@ -191,7 +191,7 @@ const CoreDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNext
           <select
             value={formData.storage}
             onChange={(e) => setFormData({ ...formData, storage: e.target.value })}
-            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
           >
             <option value="dry">Seco</option>
             <option value="refrigerated">Refrigerado</option>
@@ -208,7 +208,7 @@ const CoreDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNext
             value={formData.reorderPoint}
             onChange={(e) => setFormData({ ...formData, reorderPoint: e.target.value })}
             placeholder="Cantidad mínima"
-            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
             min="0"
           />
         </div>
@@ -281,7 +281,7 @@ const InitialLotStep: React.FC<WizardDataProps> = ({ data, onDataChange, onCompl
               value={lotData.quantity}
               onChange={(e) => setLotData({ ...lotData, quantity: e.target.value })}
               placeholder="100"
-              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
               min="0"
             />
           </div>
@@ -295,7 +295,7 @@ const InitialLotStep: React.FC<WizardDataProps> = ({ data, onDataChange, onCompl
               value={lotData.batchNumber}
               onChange={(e) => setLotData({ ...lotData, batchNumber: e.target.value })}
               placeholder="LOT-2025-001"
-              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
             />
           </div>
 
@@ -307,7 +307,7 @@ const InitialLotStep: React.FC<WizardDataProps> = ({ data, onDataChange, onCompl
               type="date"
               value={lotData.expiryDate}
               onChange={(e) => setLotData({ ...lotData, expiryDate: e.target.value })}
-              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
             />
           </div>
 
@@ -320,7 +320,7 @@ const InitialLotStep: React.FC<WizardDataProps> = ({ data, onDataChange, onCompl
               value={lotData.costPerUnit}
               onChange={(e) => setLotData({ ...lotData, costPerUnit: e.target.value })}
               placeholder="1.50"
-              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
               min="0"
               step="0.01"
             />
diff --git a/frontend/src/components/domain/unified-wizard/wizards/QualityTemplateWizard.tsx b/frontend/src/components/domain/unified-wizard/wizards/QualityTemplateWizard.tsx
index 5b3d9bec..88420cbe 100644
--- a/frontend/src/components/domain/unified-wizard/wizards/QualityTemplateWizard.tsx
+++ b/frontend/src/components/domain/unified-wizard/wizards/QualityTemplateWizard.tsx
@@ -97,7 +97,7 @@ const TemplateInfoStep: React.FC<WizardDataProps> = ({ data, onDataChange, onCom
             value={templateData.name}
             onChange={(e) => setTemplateData({ ...templateData, name: e.target.value })}
             placeholder="Ej: Control de Calidad de Pan"
-            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
           />
         </div>
         <div>
@@ -105,7 +105,7 @@ const TemplateInfoStep: React.FC<WizardDataProps> = ({ data, onDataChange, onCom
           <select
             value={templateData.scope}
             onChange={(e) => setTemplateData({ ...templateData, scope: e.target.value })}
-            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
           >
             <option value="product">Calidad de Producto</option>
             <option value="process">Higiene de Proceso</option>
@@ -118,7 +118,7 @@ const TemplateInfoStep: React.FC<WizardDataProps> = ({ data, onDataChange, onCom
           <select
             value={templateData.frequency}
             onChange={(e) => setTemplateData({ ...templateData, frequency: e.target.value })}
-            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
           >
             <option value="batch">Cada Lote</option>
             <option value="daily">Diario</option>
diff --git a/frontend/src/components/domain/unified-wizard/wizards/RecipeWizard.tsx b/frontend/src/components/domain/unified-wizard/wizards/RecipeWizard.tsx
index a132a677..62afc018 100644
--- a/frontend/src/components/domain/unified-wizard/wizards/RecipeWizard.tsx
+++ b/frontend/src/components/domain/unified-wizard/wizards/RecipeWizard.tsx
@@ -60,7 +60,7 @@ const RecipeDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNe
             value={recipeData.name}
             onChange={(e) => setRecipeData({ ...recipeData, name: e.target.value })}
             placeholder="Ej: Baguette Tradicional"
-            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
           />
         </div>
         <div>
@@ -68,7 +68,7 @@ const RecipeDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNe
           <select
             value={recipeData.category}
             onChange={(e) => setRecipeData({ ...recipeData, category: e.target.value })}
-            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
           >
             <option value="bread">Pan</option>
             <option value="pastry">Pastelería</option>
@@ -82,7 +82,7 @@ const RecipeDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNe
           <select
             value={recipeData.finishedProductId}
             onChange={(e) => setRecipeData({ ...recipeData, finishedProductId: e.target.value })}
-            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
             disabled={loading}
           >
             <option value="">Seleccionar producto...</option>
@@ -98,7 +98,7 @@ const RecipeDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNe
             value={recipeData.yieldQuantity}
             onChange={(e) => setRecipeData({ ...recipeData, yieldQuantity: e.target.value })}
             placeholder="12"
-            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
             min="1"
           />
         </div>
@@ -107,7 +107,7 @@ const RecipeDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNe
           <select
             value={recipeData.yieldUnit}
             onChange={(e) => setRecipeData({ ...recipeData, yieldUnit: e.target.value })}
-            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
           >
             <option value="units">Unidades</option>
             <option value="kg">Kilogramos</option>
@@ -124,7 +124,7 @@ const RecipeDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNe
             value={recipeData.prepTime}
             onChange={(e) => setRecipeData({ ...recipeData, prepTime: e.target.value })}
             placeholder="60"
-            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
             min="0"
           />
         </div>
@@ -134,7 +134,7 @@ const RecipeDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNe
             value={recipeData.instructions}
             onChange={(e) => setRecipeData({ ...recipeData, instructions: e.target.value })}
             placeholder="Pasos de preparación de la receta..."
-            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
             rows={4}
           />
         </div>
diff --git a/frontend/src/components/domain/unified-wizard/wizards/SupplierWizard.tsx b/frontend/src/components/domain/unified-wizard/wizards/SupplierWizard.tsx
index 78514e7a..1eed5f93 100644
--- a/frontend/src/components/domain/unified-wizard/wizards/SupplierWizard.tsx
+++ b/frontend/src/components/domain/unified-wizard/wizards/SupplierWizard.tsx
@@ -49,7 +49,7 @@ const SupplierInfoStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNex
               value={supplierData.name}
               onChange={(e) => setSupplierData({ ...supplierData, name: e.target.value })}
               placeholder="Ej: Harinas Premium S.L."
-              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
             />
           </div>
 
@@ -62,7 +62,7 @@ const SupplierInfoStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNex
               value={supplierData.contactPerson}
               onChange={(e) => setSupplierData({ ...supplierData, contactPerson: e.target.value })}
               placeholder="Nombre del contacto"
-              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
             />
           </div>
 
@@ -76,7 +76,7 @@ const SupplierInfoStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNex
               value={supplierData.phone}
               onChange={(e) => setSupplierData({ ...supplierData, phone: e.target.value })}
               placeholder="+34 123 456 789"
-              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
             />
           </div>
 
@@ -90,7 +90,7 @@ const SupplierInfoStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNex
               value={supplierData.email}
               onChange={(e) => setSupplierData({ ...supplierData, email: e.target.value })}
               placeholder="contacto@proveedor.com"
-              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
             />
           </div>
 
@@ -103,7 +103,7 @@ const SupplierInfoStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNex
               value={supplierData.address}
               onChange={(e) => setSupplierData({ ...supplierData, address: e.target.value })}
               placeholder="Calle, Ciudad, País"
-              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
             />
           </div>
 
@@ -118,7 +118,7 @@ const SupplierInfoStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNex
               onChange={(e) => setSupplierData({ ...supplierData, leadTimeDays: e.target.value })}
               placeholder="Ej: 7"
               min="0"
-              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
             />
           </div>
 
@@ -129,7 +129,7 @@ const SupplierInfoStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNex
             <select
               value={supplierData.paymentTerms}
               onChange={(e) => setSupplierData({ ...supplierData, paymentTerms: e.target.value })}
-              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
             >
               <option value="">Seleccionar...</option>
               <option value="immediate">Inmediato</option>
@@ -148,7 +148,7 @@ const SupplierInfoStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNex
               onChange={(e) => setSupplierData({ ...supplierData, notes: e.target.value })}
               placeholder="Información adicional sobre el proveedor..."
               rows={3}
-              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+              className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
             />
           </div>
         </div>
diff --git a/frontend/src/components/domain/unified-wizard/wizards/TeamMemberWizard.tsx b/frontend/src/components/domain/unified-wizard/wizards/TeamMemberWizard.tsx
index 278b08a8..902907c3 100644
--- a/frontend/src/components/domain/unified-wizard/wizards/TeamMemberWizard.tsx
+++ b/frontend/src/components/domain/unified-wizard/wizards/TeamMemberWizard.tsx
@@ -32,7 +32,7 @@ const MemberDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNe
             value={memberData.fullName}
             onChange={(e) => setMemberData({ ...memberData, fullName: e.target.value })}
             placeholder="Ej: Juan García"
-            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
           />
         </div>
         <div>
@@ -45,7 +45,7 @@ const MemberDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNe
             value={memberData.email}
             onChange={(e) => setMemberData({ ...memberData, email: e.target.value })}
             placeholder="juan@panaderia.com"
-            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
           />
         </div>
         <div>
@@ -58,7 +58,7 @@ const MemberDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNe
             value={memberData.phone}
             onChange={(e) => setMemberData({ ...memberData, phone: e.target.value })}
             placeholder="+34 123 456 789"
-            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
           />
         </div>
         <div>
@@ -66,7 +66,7 @@ const MemberDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNe
           <select
             value={memberData.position}
             onChange={(e) => setMemberData({ ...memberData, position: e.target.value })}
-            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
           >
             <option value="baker">Panadero</option>
             <option value="pastry-chef">Pastelero</option>
@@ -80,7 +80,7 @@ const MemberDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNe
           <select
             value={memberData.employmentType}
             onChange={(e) => setMemberData({ ...memberData, employmentType: e.target.value })}
-            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+            className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
           >
             <option value="full-time">Tiempo Completo</option>
             <option value="part-time">Medio Tiempo</option>
@@ -175,7 +175,7 @@ const PermissionsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onComp
         <select
           value={permissions.role}
           onChange={(e) => setPermissions({ ...permissions, role: e.target.value })}
-          className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
+          className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
         >
           <option value="admin">Administrador</option>
           <option value="manager">Gerente</option>