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/ui/AddressAutocomplete.tsx

@@ -99,7 +99,7 @@ export const AddressAutocomplete: React.FC<AddressAutocompleteProps> = ({
   return (
     <div ref={wrapperRef} className={`relative ${className}`}>
       <div className="relative">
-        <MapPin className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+        <MapPin className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-[var(--text-secondary)]" />
 
         <Input
           type="text"
@@ -109,15 +109,15 @@ export const AddressAutocomplete: React.FC<AddressAutocompleteProps> = ({
           placeholder={placeholder}
           disabled={disabled}
           required={required}
-          className={`pl-10 pr-10 ${selectedAddress ? 'border-green-500' : ''}`}
+          className={`pl-10 pr-10 ${selectedAddress ? 'border-[var(--color-success)]' : ''}`}
         />
 
         <div className="absolute right-3 top-1/2 transform -translate-y-1/2 flex items-center gap-1">
           {isLoading && (
-            <Loader2 className="h-4 w-4 animate-spin text-gray-400" />
+            <Loader2 className="h-4 w-4 animate-spin text-[var(--text-secondary)]" />
           )}
           {selectedAddress && !isLoading && (
-            <Check className="h-4 w-4 text-green-600" />
+            <Check className="h-4 w-4 text-[var(--color-success)]" />
           )}
           {query && !disabled && (
             <Button
@@ -125,7 +125,7 @@ export const AddressAutocomplete: React.FC<AddressAutocompleteProps> = ({
               variant="ghost"
               size="sm"
               onClick={handleClear}
-              className="h-6 w-6 p-0 hover:bg-gray-100"
+              className="h-6 w-6 p-0 hover:bg-[var(--bg-secondary)]"
             >
               <X className="h-3 w-3" />
             </Button>
@@ -135,36 +135,36 @@ export const AddressAutocomplete: React.FC<AddressAutocompleteProps> = ({
 
       {/* Error message */}
       {error && (
-        <div className="mt-1 text-sm text-red-600">
+        <div className="mt-1 text-sm text-[var(--color-error)]">
           {error}
         </div>
       )}
 
       {/* Results dropdown */}
       {showResults && results.length > 0 && (
-        <Card className="absolute z-50 w-full mt-1 max-h-80 overflow-y-auto shadow-lg">
+        <Card className="absolute z-50 w-full mt-1 max-h-80 overflow-y-auto shadow-lg bg-[var(--bg-primary)]">
           <CardBody className="p-0">
-            <div className="divide-y divide-gray-100">
+            <div className="divide-y divide-[var(--border-secondary)]">
               {results.map((result) => (
                 <button
                   key={result.place_id}
                   type="button"
                   onClick={() => handleSelectAddress(result)}
-                  className="w-full text-left px-4 py-3 hover:bg-gray-50 focus:bg-gray-50 focus:outline-none transition-colors"
+                  className="w-full text-left px-4 py-3 hover:bg-[var(--bg-secondary)] focus:bg-[var(--bg-secondary)] focus:outline-none transition-colors"
                 >
                   <div className="flex items-start gap-3">
-                    <MapPin className="h-4 w-4 text-blue-600 mt-1 flex-shrink-0" />
+                    <MapPin className="h-4 w-4 text-[var(--color-primary)] mt-1 flex-shrink-0" />
                     <div className="flex-1 min-w-0">
-                      <div className="text-sm font-medium text-gray-900 truncate">
+                      <div className="text-sm font-medium text-[var(--text-primary)] truncate">
                         {result.address.road && result.address.house_number
                           ? `${result.address.road}, ${result.address.house_number}`
                           : result.address.road || result.display_name}
                       </div>
-                      <div className="text-xs text-gray-600 truncate mt-0.5">
+                      <div className="text-xs text-[var(--text-secondary)] truncate mt-0.5">
                         {result.address.city || result.address.municipality || result.address.suburb}
                         {result.address.postcode && `, ${result.address.postcode}`}
                       </div>
-                      <div className="text-xs text-gray-400 mt-1">
+                      <div className="text-xs text-[var(--text-tertiary)] mt-1">
                         {result.lat.toFixed(6)}, {result.lon.toFixed(6)}
                       </div>
                     </div>
@@ -178,9 +178,9 @@ export const AddressAutocomplete: React.FC<AddressAutocompleteProps> = ({
 
       {/* No results message */}
       {showResults && !isLoading && query.length >= 3 && results.length === 0 && !error && (
-        <Card className="absolute z-50 w-full mt-1 shadow-lg">
+        <Card className="absolute z-50 w-full mt-1 shadow-lg bg-[var(--bg-primary)]">
           <CardBody className="p-4">
-            <div className="text-sm text-gray-600 text-center">
+            <div className="text-sm text-[var(--text-secondary)] text-center">
               No addresses found for "{query}"
             </div>
           </CardBody>

frontend/src/components/ui/InfoCard.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { AlertCircle, Info, Lightbulb, Sparkles } from 'lucide-react';
+
+export type InfoCardVariant = 'info' | 'warning' | 'success' | 'tip' | 'template';
+
+interface InfoCardProps {
+  title: string;
+  description: string;
+  variant?: InfoCardVariant;
+  icon?: React.ReactNode;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * Unified InfoCard component for displaying consistent info/warning/tip blocks
+ * across all onboarding wizard steps.
+ *
+ * Uses global styling and color palette for dark mode compatibility.
+ */
+export const InfoCard: React.FC<InfoCardProps> = ({
+  title,
+  description,
+  variant = 'info',
+  icon,
+  children,
+  className = '',
+}) => {
+  const getVariantStyles = () => {
+    switch (variant) {
+      case 'info':
+        return {
+          container: 'bg-[var(--color-info)]/10 border-[var(--color-info)]/20',
+          icon: 'text-[var(--color-info)]',
+          defaultIcon: <Info className="w-5 h-5" />,
+        };
+      case 'warning':
+        return {
+          container: 'bg-[var(--color-warning)]/10 border-[var(--color-warning)]/20',
+          icon: 'text-[var(--color-warning)]',
+          defaultIcon: <AlertCircle className="w-5 h-5" />,
+        };
+      case 'success':
+        return {
+          container: 'bg-[var(--color-success)]/10 border-[var(--color-success)]/20',
+          icon: 'text-[var(--color-success)]',
+          defaultIcon: <Sparkles className="w-5 h-5" />,
+        };
+      case 'tip':
+        return {
+          container: 'bg-[var(--color-primary)]/10 border-[var(--color-primary)]/20',
+          icon: 'text-[var(--color-primary)]',
+          defaultIcon: <Lightbulb className="w-5 h-5" />,
+        };
+      case 'template':
+        return {
+          container: 'bg-gradient-to-br from-purple-50 to-blue-50 dark:from-purple-900/10 dark:to-blue-900/10 border-purple-200 dark:border-purple-700',
+          icon: 'text-purple-600 dark:text-purple-400',
+          defaultIcon: <Sparkles className="w-5 h-5" />,
+        };
+      default:
+        return {
+          container: 'bg-[var(--color-info)]/10 border-[var(--color-info)]/20',
+          icon: 'text-[var(--color-info)]',
+          defaultIcon: <Info className="w-5 h-5" />,
+        };
+    }
+  };
+
+  const styles = getVariantStyles();
+
+  return (
+    <div className={`${styles.container} border rounded-lg p-4 ${className}`}>
+      <h3 className="font-semibold text-[var(--text-primary)] mb-2 flex items-center gap-2">
+        <span className={styles.icon}>
+          {icon || styles.defaultIcon}
+        </span>
+        {title}
+      </h3>
+      <p className="text-sm text-[var(--text-secondary)]">
+        {description}
+      </p>
+      {children && (
+        <div className="mt-3">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default InfoCard;

frontend/src/components/ui/TemplateCard.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+interface TemplateCardProps {
+  icon: string | React.ReactNode;
+  title: string;
+  description: string;
+  itemsCount?: number;
+  onClick: () => void;
+  className?: string;
+}
+
+/**
+ * Unified TemplateCard component for displaying template options
+ * across all onboarding wizard steps.
+ *
+ * Uses global styling and color palette for dark mode compatibility.
+ */
+export const TemplateCard: React.FC<TemplateCardProps> = ({
+  icon,
+  title,
+  description,
+  itemsCount,
+  onClick,
+  className = '',
+}) => {
+  return (
+    <button
+      onClick={onClick}
+      className={`text-left p-4 bg-[var(--bg-primary)] dark:bg-[var(--surface-secondary)] border-2 border-purple-200 dark:border-purple-700 rounded-lg hover:border-purple-400 dark:hover:border-purple-500 hover:shadow-md transition-all group ${className}`}
+    >
+      <div className="flex items-start gap-3">
+        {typeof icon === 'string' ? (
+          <span className="text-3xl group-hover:scale-110 transition-transform">{icon}</span>
+        ) : (
+          <span className="group-hover:scale-110 transition-transform">{icon}</span>
+        )}
+        <div className="flex-1 min-w-0">
+          <h4 className="font-medium text-[var(--text-primary)] mb-1">
+            {title}
+          </h4>
+          <p className="text-xs text-[var(--text-secondary)] mb-2">
+            {description}
+          </p>
+          {itemsCount !== undefined && (
+            <p className="text-xs text-purple-600 dark:text-purple-400 font-medium">
+              {itemsCount} items
+            </p>
+          )}
+        </div>
+      </div>
+    </button>
+  );
+};
+
+export default TemplateCard;