feat: Update remaining settings cards with new UX design patterns

Applied consistent design patterns to operational settings cards using SettingSection, SettingRow, and Toggle components for improved user experience.

## Updated Cards

### ProcurementSettingsCard
- Replaced checkboxes with toggle switches for all boolean settings
- Added progressive disclosure for auto-approval threshold settings
- Grouped smart procurement options with consistent toggle rows
- Added helpful descriptions and tooltips
- Better visual hierarchy with icons and sections

### ProductionSettingsCard
- Converted quality check and schedule optimization to toggles
- Progressive disclosure for quality parameters (only shown when enabled)
- Improved section organization with clearer headings
- Better responsive grid layouts

### POSSettingsCard
- Replaced sync checkboxes with toggle switches
- Cleaner layout with SettingRow components
- Enhanced info box with dark mode support
- Better visual feedback for sync settings

### SupplierSettingsCard
- Wrapped in SettingSection for consistency
- Better organized performance thresholds
- Enhanced info box styling with dark mode
- Clearer visual hierarchy

### OrderSettingsCard
- Converted discount and delivery toggles
- Progressive disclosure not needed but consistent layout applied
- Better organized sections with icons
- Enhanced info box with business rules explanation

## Key Improvements

- ✅ Toggle switches instead of checkboxes for binary settings
- ✅ Progressive disclosure hides complexity until needed
- ✅ Consistent SettingSection wrapping for all cards
- ✅ Dark mode support for info boxes
- ✅ Help text and tooltips for better guidance
- ✅ Responsive layouts optimized for mobile and desktop
- ✅ Icons for visual recognition
- ✅ Unified design language across all operational settings

All cards now follow the same design patterns established in the bakery and user settings redesign.

frontend/src/pages/app/database/ajustes/cards/SupplierSettingsCard.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Truck, Calendar, TrendingUp, AlertTriangle, DollarSign } from 'lucide-react';
-import { Card, Input } from '../../../../../components/ui';
+import { Truck, Calendar, TrendingUp, AlertTriangle, Info } from 'lucide-react';
+import { Input, SettingSection } from '../../../../../components/ui';
 import type { SupplierSettings } from '../../../../../api/types/settings';
 
 interface SupplierSettingsCardProps {
@@ -22,20 +22,19 @@ const SupplierSettingsCard: React.FC<SupplierSettingsCardProps> = ({
   };
 
   return (
-    <Card className="p-6">
-      <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-6 flex items-center">
-        <Truck className="w-5 h-5 mr-2 text-[var(--color-primary)]" />
-        Gestión de Proveedores
-      </h3>
-
-      <div className="space-y-6">
+    <SettingSection
+      title="Gestión de Proveedores"
+      description="Configure supplier performance thresholds and default terms"
+      icon={<Truck className="w-5 h-5" />}
+    >
+      <div className="divide-y divide-[var(--border-primary)]">
         {/* Default Terms */}
-        <div>
+        <div className="p-4 sm:p-6">
           <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
             <Calendar className="w-4 h-4 mr-2" />
             Términos Predeterminados
           </h4>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pl-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             <Input
               type="number"
               label="Plazo de Pago Predeterminado (días)"
@@ -63,12 +62,12 @@ const SupplierSettingsCard: React.FC<SupplierSettingsCardProps> = ({
         </div>
 
         {/* Performance Thresholds - Delivery */}
-        <div>
+        <div className="p-4 sm:p-6">
           <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
             <TrendingUp className="w-4 h-4 mr-2" />
             Umbrales de Rendimiento - Entregas
           </h4>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pl-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             <Input
               type="number"
               label="Tasa de Entrega Excelente (%)"
@@ -96,12 +95,12 @@ const SupplierSettingsCard: React.FC<SupplierSettingsCardProps> = ({
         </div>
 
         {/* Performance Thresholds - Quality */}
-        <div>
+        <div className="p-4 sm:p-6">
           <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
             <TrendingUp className="w-4 h-4 mr-2" />
             Umbrales de Rendimiento - Calidad
           </h4>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pl-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             <Input
               type="number"
               label="Tasa de Calidad Excelente (%)"
@@ -129,12 +128,12 @@ const SupplierSettingsCard: React.FC<SupplierSettingsCardProps> = ({
         </div>
 
         {/* Critical Alerts */}
-        <div>
+        <div className="p-4 sm:p-6">
           <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
             <AlertTriangle className="w-4 h-4 mr-2" />
             Alertas Críticas
           </h4>
-          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 pl-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
             <Input
               type="number"
               label="Retraso de Entrega Crítico (horas)"
@@ -174,14 +173,14 @@ const SupplierSettingsCard: React.FC<SupplierSettingsCardProps> = ({
         </div>
 
         {/* Info Box */}
-        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+        <div className="p-4 sm:p-6 bg-blue-50 dark:bg-blue-900/20">
           <div className="flex items-start gap-3">
-            <TrendingUp className="w-5 h-5 text-blue-600 mt-0.5" />
+            <Info className="w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" />
             <div className="flex-1">
-              <h5 className="text-sm font-semibold text-blue-900 mb-1">
+              <h5 className="text-sm font-semibold text-blue-900 dark:text-blue-100 mb-1">
                 Evaluación de Proveedores
               </h5>
-              <p className="text-xs text-blue-700">
+              <p className="text-xs text-blue-700 dark:text-blue-300">
                 Estos umbrales se utilizan para evaluar automáticamente el rendimiento de los proveedores.
                 Los proveedores con rendimiento por debajo de los umbrales "buenos" recibirán alertas automáticas.
               </p>
@@ -189,7 +188,7 @@ const SupplierSettingsCard: React.FC<SupplierSettingsCardProps> = ({
           </div>
         </div>
       </div>
-    </Card>
+    </SettingSection>
   );
 };