feat: Improve onboarding wizard UI, UX and dark mode support

This commit implements multiple improvements to the onboarding wizard:

**1. Unified UI Components:**
- Created InfoCard component for consistent "why is important" blocks across all steps
- Created TemplateCard component for consistent template displays
- Both components use global CSS variables for proper dark mode support

**2. Initial Stock Entry Step Improvements:**
- Fixed title/subtitle positioning using unified InfoCard component
- Fixed missing count bug in warning message (now uses {{count}} interpolation)
- Fixed dark mode colors using CSS variables (--color-success, --color-info, etc.)
- Changed next button title from "completar configuración" to "Continuar →"
- Implemented stock creation API call using useAddStock hook
- Products with stock now properly save to backend on step completion

**3. Dark Mode Fixes:**
- Fixed QualitySetupStep: Enhanced button selection visibility with rings and shadows
- Fixed TeamSetupStep: Enhanced role selection visibility with rings and shadows
- Fixed AddressAutocomplete: Replaced all hardcoded colors with CSS variables
- All dropdown results, icons, and hover states now properly adapt to dark mode

**4. Streamlined Wizard Flow:**
- Removed POI Detection step from wizard (step previously added complexity)
- POI detection now runs automatically in background after tenant registration
- Non-blocking approach ensures users aren't delayed by POI detection
- Removed Revision step (setup-review) as it adds no user value
- Completion step is now the final step before dashboard

**5. Backend Updates:**
- Updated onboarding_progress.py to remove poi-detection from ONBOARDING_STEPS
- Updated onboarding_progress.py to remove setup-review from ONBOARDING_STEPS
- Updated step dependencies to reflect streamlined flow
- POI detection documented as automatic background process

All changes maintain backward compatibility and use proper TypeScript types.

frontend/src/components/domain/onboarding/steps/InitialStockEntryStep.tsx

@@ -4,6 +4,9 @@ import { Package, Salad, AlertCircle, ArrowRight, ArrowLeft, CheckCircle } from
 import Button from '../../../ui/Button/Button';
 import Card from '../../../ui/Card/Card';
 import Input from '../../../ui/Input/Input';
+import { useCurrentTenant } from '../../../../stores/tenant.store';
+import { useAddStock } from '../../../../api/hooks/inventory';
+import InfoCard from '../../../ui/InfoCard';
 
 export interface ProductWithStock {
   id: string;
@@ -32,6 +35,11 @@ export const InitialStockEntryStep: React.FC<InitialStockEntryStepProps> = ({
   initialData,
 }) => {
   const { t } = useTranslation();
+  const currentTenant = useCurrentTenant();
+  const tenantId = currentTenant?.id || '';
+  const addStockMutation = useAddStock();
+  const [isSaving, setIsSaving] = useState(false);
+
   const [products, setProducts] = useState<ProductWithStock[]>(() => {
     if (initialData?.productsWithStock) {
       return initialData.productsWithStock;
@@ -76,8 +84,36 @@ export const InitialStockEntryStep: React.FC<InitialStockEntryStepProps> = ({
     onComplete?.();
   };
 
-  const handleContinue = () => {
-    onComplete?.();
+  const handleContinue = async () => {
+    setIsSaving(true);
+    try {
+      // Create stock entries for products with initial stock > 0
+      const stockEntries = products.filter(p => p.initialStock && p.initialStock > 0);
+
+      if (stockEntries.length > 0) {
+        // Create stock entries in parallel
+        const stockPromises = stockEntries.map(product =>
+          addStockMutation.mutateAsync({
+            tenantId,
+            stockData: {
+              ingredient_id: product.id,
+              unit_price: 0, // Default price, can be updated later
+              notes: `Initial stock entry from onboarding`
+            }
+          })
+        );
+
+        await Promise.all(stockPromises);
+        console.log(`✅ Created ${stockEntries.length} stock entries successfully`);
+      }
+
+      onComplete?.();
+    } catch (error) {
+      console.error('Error creating stock entries:', error);
+      alert(t('onboarding:stock.error_creating_stock', 'Error al crear los niveles de stock. Por favor, inténtalo de nuevo.'));
+    } finally {
+      setIsSaving(false);
+    }
   };
 
   const productsWithStock = products.filter(p => p.initialStock !== undefined && p.initialStock >= 0);
@@ -106,51 +142,30 @@ export const InitialStockEntryStep: React.FC<InitialStockEntryStepProps> = ({
   }
 
   return (
-    <div className="max-w-4xl mx-auto p-4 md:p-6 space-y-4 md:space-y-6">
-      {/* Header */}
-      <div className="text-center space-y-2 md:space-y-3">
-        <h1 className="text-xl md:text-2xl font-bold text-text-primary px-2">
-          {t('onboarding:stock.title', 'Niveles de Stock Inicial')}
-        </h1>
-        <p className="text-sm md:text-base text-text-secondary max-w-2xl mx-auto px-4">
-          {t(
-            'onboarding:stock.subtitle',
-            'Ingresa las cantidades actuales de cada producto. Esto permite que el sistema rastree el inventario desde hoy.'
-          )}
-        </p>
-      </div>
-
-      {/* Info Banner */}
-      <Card className="bg-blue-50 border-blue-200">
-        <div className="p-4 flex items-start gap-3">
-          <AlertCircle className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" />
-          <div className="text-sm text-blue-900">
-            <p className="font-medium mb-1">
-              {t('onboarding:stock.info_title', '¿Por qué es importante?')}
-            </p>
-            <p className="text-blue-700">
-              {t(
-                'onboarding:stock.info_text',
-                'Sin niveles de stock iniciales, el sistema no puede alertarte sobre stock bajo, planificar producción o calcular costos correctamente. Tómate un momento para ingresar tus cantidades actuales.'
-              )}
-            </p>
-          </div>
-        </div>
-      </Card>
+    <div className="space-y-4 md:space-y-6">
+      {/* Why This Matters */}
+      <InfoCard
+        variant="info"
+        title={t('setup_wizard:why_this_matters', '¿Por qué es importante?')}
+        description={t(
+          'onboarding:stock.info_text',
+          'Sin niveles de stock iniciales, el sistema no puede alertarte sobre stock bajo, planificar producción o calcular costos correctamente. Tómate un momento para ingresar tus cantidades actuales.'
+        )}
+      />
 
       {/* Progress */}
       <div className="space-y-2">
         <div className="flex items-center justify-between text-sm">
-          <span className="text-text-secondary">
+          <span className="text-[var(--text-secondary)]">
             {t('onboarding:stock.progress', 'Progreso de captura')}
           </span>
-          <span className="font-medium text-text-primary">
+          <span className="font-medium text-[var(--text-primary)]">
             {productsWithStock.length} / {products.length}
           </span>
         </div>
-        <div className="w-full bg-gray-200 rounded-full h-2">
+        <div className="w-full bg-[var(--bg-secondary)] rounded-full h-2">
           <div
-            className="bg-primary-500 h-2 rounded-full transition-all duration-300"
+            className="bg-[var(--color-primary)] h-2 rounded-full transition-all duration-300"
             style={{ width: `${completionPercentage}%` }}
           />
         </div>
@@ -170,10 +185,10 @@ export const InitialStockEntryStep: React.FC<InitialStockEntryStepProps> = ({
       {ingredients.length > 0 && (
         <div className="space-y-3">
           <div className="flex items-center gap-2">
-            <div className="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center">
-              <Salad className="w-4 h-4 text-green-600" />
+            <div className="w-8 h-8 bg-[var(--color-success)]/10 dark:bg-[var(--color-success)]/20 rounded-lg flex items-center justify-center">
+              <Salad className="w-4 h-4 text-[var(--color-success)]" />
             </div>
-            <h3 className="font-semibold text-text-primary">
+            <h3 className="font-semibold text-[var(--text-primary)]">
               {t('onboarding:stock.ingredients', 'Ingredientes')} ({ingredients.length})
             </h3>
           </div>
@@ -182,16 +197,16 @@ export const InitialStockEntryStep: React.FC<InitialStockEntryStepProps> = ({
             {ingredients.map(product => {
               const hasStock = product.initialStock !== undefined;
               return (
-                <Card key={product.id} className={hasStock ? 'bg-green-50 border-green-200' : ''}>
+                <Card key={product.id} className={hasStock ? 'bg-[var(--color-success)]/10 dark:bg-[var(--color-success)]/20 border-[var(--color-success)]/30' : ''}>
                   <div className="p-3">
                     <div className="flex items-start justify-between gap-2">
                       <div className="flex-1">
-                        <div className="font-medium text-text-primary flex items-center gap-2">
+                        <div className="font-medium text-[var(--text-primary)] flex items-center gap-2">
                           {product.name}
-                          {hasStock && <CheckCircle className="w-4 h-4 text-green-600" />}
+                          {hasStock && <CheckCircle className="w-4 h-4 text-[var(--color-success)]" />}
                         </div>
                         {product.category && (
-                          <div className="text-xs text-text-secondary">{product.category}</div>
+                          <div className="text-xs text-[var(--text-secondary)]">{product.category}</div>
                         )}
                       </div>
                       <div className="flex items-center gap-2">
@@ -204,7 +219,7 @@ export const InitialStockEntryStep: React.FC<InitialStockEntryStepProps> = ({
                           step="0.01"
                           className="w-20 sm:w-24 text-right min-h-[44px]"
                         />
-                        <span className="text-sm text-text-secondary whitespace-nowrap">
+                        <span className="text-sm text-[var(--text-secondary)] whitespace-nowrap">
                           {product.unit || 'kg'}
                         </span>
                       </div>
@@ -221,10 +236,10 @@ export const InitialStockEntryStep: React.FC<InitialStockEntryStepProps> = ({
       {finishedProducts.length > 0 && (
         <div className="space-y-3">
           <div className="flex items-center gap-2">
-            <div className="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
-              <Package className="w-4 h-4 text-blue-600" />
+            <div className="w-8 h-8 bg-[var(--color-info)]/10 dark:bg-[var(--color-info)]/20 rounded-lg flex items-center justify-center">
+              <Package className="w-4 h-4 text-[var(--color-info)]" />
             </div>
-            <h3 className="font-semibold text-text-primary">
+            <h3 className="font-semibold text-[var(--text-primary)]">
               {t('onboarding:stock.finished_products', 'Productos Terminados')} ({finishedProducts.length})
             </h3>
           </div>
@@ -233,16 +248,16 @@ export const InitialStockEntryStep: React.FC<InitialStockEntryStepProps> = ({
             {finishedProducts.map(product => {
               const hasStock = product.initialStock !== undefined;
               return (
-                <Card key={product.id} className={hasStock ? 'bg-blue-50 border-blue-200' : ''}>
+                <Card key={product.id} className={hasStock ? 'bg-[var(--color-info)]/10 dark:bg-[var(--color-info)]/20 border-[var(--color-info)]/30' : ''}>
                   <div className="p-3">
                     <div className="flex items-start justify-between gap-2">
                       <div className="flex-1">
-                        <div className="font-medium text-text-primary flex items-center gap-2">
+                        <div className="font-medium text-[var(--text-primary)] flex items-center gap-2">
                           {product.name}
-                          {hasStock && <CheckCircle className="w-4 h-4 text-blue-600" />}
+                          {hasStock && <CheckCircle className="w-4 h-4 text-[var(--color-info)]" />}
                         </div>
                         {product.category && (
-                          <div className="text-xs text-text-secondary">{product.category}</div>
+                          <div className="text-xs text-[var(--text-secondary)]">{product.category}</div>
                         )}
                       </div>
                       <div className="flex items-center gap-2">
@@ -255,7 +270,7 @@ export const InitialStockEntryStep: React.FC<InitialStockEntryStepProps> = ({
                           step="1"
                           className="w-24 text-right"
                         />
-                        <span className="text-sm text-text-secondary whitespace-nowrap">
+                        <span className="text-sm text-[var(--text-secondary)] whitespace-nowrap">
                           {product.unit || t('common:units', 'unidades')}
                         </span>
                       </div>
@@ -270,36 +285,35 @@ export const InitialStockEntryStep: React.FC<InitialStockEntryStepProps> = ({
 
       {/* Warning for incomplete */}
       {!allCompleted && (
-        <Card className="bg-amber-50 border-amber-200">
-          <div className="p-4 flex items-start gap-3">
-            <AlertCircle className="w-5 h-5 text-amber-600 flex-shrink-0 mt-0.5" />
-            <div className="text-sm text-amber-900">
-              <p className="font-medium">
-                {t('onboarding:stock.incomplete_warning', 'Faltan {count} productos por completar', {
-                  count: productsWithoutStock.length,
-                })}
-              </p>
-              <p className="text-amber-700 mt-1">
-                {t(
-                  'onboarding:stock.incomplete_help',
-                  'Puedes continuar, pero recomendamos ingresar todas las cantidades para un mejor control de inventario.'
-                )}
-              </p>
-            </div>
-          </div>
-        </Card>
+        <InfoCard
+          variant="warning"
+          title={t('onboarding:stock.incomplete_warning', 'Faltan {{count}} productos por completar', {
+            count: productsWithoutStock.length,
+          })}
+          description={t(
+            'onboarding:stock.incomplete_help',
+            'Puedes continuar, pero recomendamos ingresar todas las cantidades para un mejor control de inventario.'
+          )}
+        />
       )}
 
       {/* Footer Actions */}
-      <div className="flex items-center justify-between pt-6 border-t border-border-primary">
+      <div className="flex items-center justify-between pt-6 border-t border-[var(--border-primary)]">
         <Button onClick={onPrevious} variant="ghost" leftIcon={<ArrowLeft />}>
           {t('common:previous', 'Anterior')}
         </Button>
 
-        <Button onClick={handleContinue} variant="primary" rightIcon={<ArrowRight />}>
-          {allCompleted
-            ? t('onboarding:stock.complete', 'Completar Configuración')
-            : t('onboarding:stock.continue_anyway', 'Continuar de todos modos')}
+        <Button
+          onClick={handleContinue}
+          variant="primary"
+          rightIcon={<ArrowRight />}
+          disabled={isSaving}
+        >
+          {isSaving
+            ? t('common:saving', 'Guardando...')
+            : allCompleted
+              ? t('onboarding:stock.continue_to_next', 'Continuar →')
+              : t('onboarding:stock.continue_anyway', 'Continuar de todos modos')}
         </Button>
       </div>
     </div>