Fix UI issues 2

frontend/src/components/domain/unified-wizard/ItemTypeSelector.tsx

@@ -10,7 +10,6 @@ import {
   Users,
   UserPlus,
   Euro as EuroIcon,
-  Sparkles,
   FileText,
   Factory,
   Search,
@@ -159,21 +158,6 @@ export const ItemTypeSelector: React.FC<ItemTypeSelectorProps> = ({ onSelect })
 
   return (
     <div className="space-y-6">
-      {/* Header */}
-      <div className="text-center pb-4 border-b border-[var(--border-primary)]">
-        <div className="flex items-center justify-center mb-3">
-          <div className="p-3 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-primary)]/5 rounded-full">
-            <Sparkles className="w-8 h-8 text-[var(--color-primary)]" />
-          </div>
-        </div>
-        <h2 className="text-2xl font-bold text-[var(--text-primary)] mb-2">
-          {t('itemTypeSelector.title')}
-        </h2>
-        <p className="text-[var(--text-secondary)] max-w-md mx-auto">
-          {t('itemTypeSelector.description')}
-        </p>
-      </div>
-
       {/* Search and Filters */}
       <div className="space-y-3">
         {/* Search Bar */}
@@ -256,7 +240,7 @@ export const ItemTypeSelector: React.FC<ItemTypeSelectorProps> = ({ onSelect })
               )}
 
               {/* Content */}
-              <div className="flex items-center gap-4">
+              <div className="flex items-start gap-4">
                 {/* Icon */}
                 <div
                   className={`
@@ -272,8 +256,8 @@ export const ItemTypeSelector: React.FC<ItemTypeSelectorProps> = ({ onSelect })
                 </div>
 
                 {/* Text */}
-                <div className="flex-1 text-left">
-                  <h3 className="text-base md:text-lg font-semibold text-[var(--text-primary)] mb-0.5 group-hover:text-[var(--color-primary)] transition-colors">
+                <div className="flex-1 text-left pr-16">
+                  <h3 className="text-base md:text-lg font-semibold text-[var(--text-primary)] group-hover:text-[var(--color-primary)] transition-colors">
                     {itemType.title}
                   </h3>
                   <p className="text-sm text-[var(--text-secondary)] leading-snug mt-1">

frontend/src/components/ui/WizardModal/WizardModal.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useCallback, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import { X, ChevronLeft, ChevronRight, AlertCircle, CheckCircle } from 'lucide-react';
 
 export interface WizardStep {
@@ -48,12 +49,26 @@ export const WizardModal: React.FC<WizardModalProps> = ({
   dataRef,
   onDataChange
 }) => {
+  const { t } = useTranslation('wizards');
   const [currentStepIndex, setCurrentStepIndex] = useState(0);
   const [isValidating, setIsValidating] = useState(false);
   const [validationError, setValidationError] = useState<string | null>(null);
   const [validationSuccess, setValidationSuccess] = useState(false);
 
   const currentStep = steps[currentStepIndex];
+
+  // Helper to translate step title - if it looks like a translation key (contains dots), translate it
+  const translateStepTitle = (stepTitle: string): string => {
+    if (stepTitle.includes('.')) {
+      const translated = t(stepTitle);
+      // If translation returns the key itself, return just the last part as fallback
+      if (translated === stepTitle) {
+        return stepTitle.split('.').pop() || stepTitle;
+      }
+      return translated;
+    }
+    return stepTitle;
+  };
   const isFirstStep = currentStepIndex === 0;
   const isLastStep = currentStepIndex === steps.length - 1;
 
@@ -178,11 +193,11 @@ export const WizardModal: React.FC<WizardModalProps> = ({
       {/* Modal */}
       <div className="fixed inset-0 z-50 flex items-center justify-center p-4 pointer-events-none">
         <div
-          className={`bg-[var(--bg-primary)] rounded-xl shadow-2xl ${sizeClasses[size]} w-full max-h-[90vh] overflow-hidden pointer-events-auto animate-slideUp`}
+          className={`bg-[var(--bg-primary)] rounded-xl shadow-2xl ${sizeClasses[size]} w-full max-h-[90vh] flex flex-col overflow-hidden pointer-events-auto animate-slideUp`}
           onClick={(e) => e.stopPropagation()}
         >
           {/* Header */}
-          <div className="sticky top-0 z-10 bg-[var(--bg-primary)] border-b border-[var(--border-secondary)] shadow-sm">
+          <div className="flex-shrink-0 z-10 bg-[var(--bg-primary)] border-b border-[var(--border-secondary)] shadow-sm">
             {/* Title Bar */}
             <div className="flex items-center justify-between p-4 sm:p-6 pb-3 sm:pb-4">
               <div className="flex items-center gap-3 min-w-0 flex-1">
@@ -232,7 +247,7 @@ export const WizardModal: React.FC<WizardModalProps> = ({
                             ? 'bg-[var(--color-primary)] shadow-md'
                             : 'bg-[var(--bg-tertiary)] cursor-not-allowed'
                         }`}
-                        aria-label={`${step.title} - ${isCompleted ? 'Completado' : isCurrent ? 'En progreso' : 'Pendiente'}`}
+                        aria-label={`${translateStepTitle(step.title)} - ${isCompleted ? 'Completado' : isCurrent ? 'En progreso' : 'Pendiente'}`}
                       >
                         {isCurrent && (
                           <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent animate-shimmer" />
@@ -241,7 +256,7 @@ export const WizardModal: React.FC<WizardModalProps> = ({
 
                       {/* Tooltip on hover */}
                       <div className="absolute left-1/2 -translate-x-1/2 bottom-full mb-2 px-2 py-1 bg-[var(--bg-primary)] border border-[var(--border-secondary)] rounded shadow-lg text-xs whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-20">
-                        {step.title}
+                        {translateStepTitle(step.title)}
                         <div className="absolute top-full left-1/2 -translate-x-1/2 -mt-px border-4 border-transparent border-t-[var(--border-secondary)]" />
                       </div>
                     </div>
@@ -250,7 +265,7 @@ export const WizardModal: React.FC<WizardModalProps> = ({
               </div>
               <div className="flex items-center justify-between text-xs sm:text-sm">
                 <div className="flex items-center gap-2 min-w-0 flex-1">
-                  <span className="font-semibold text-[var(--text-primary)] truncate">{currentStep.title}</span>
+                  <span className="font-semibold text-[var(--text-primary)] truncate">{translateStepTitle(currentStep.title)}</span>
                   {currentStep.isOptional && (
                     <span className="px-2 py-0.5 text-xs bg-[var(--bg-secondary)] text-[var(--text-tertiary)] rounded-full flex-shrink-0">
                       Opcional
@@ -265,7 +280,7 @@ export const WizardModal: React.FC<WizardModalProps> = ({
           </div>
 
           {/* Step Content */}
-          <div className="p-4 sm:p-6 overflow-y-auto" style={{ maxHeight: 'calc(90vh - 220px)' }}>
+          <div className="flex-1 min-h-0 p-4 sm:p-6 overflow-y-auto">
             {/* Validation Messages */}
             {validationError && (
               <div className="mb-4 p-3 sm:p-4 bg-red-50 border border-red-200 rounded-lg flex items-start gap-3 animate-slideDown">
@@ -304,7 +319,7 @@ export const WizardModal: React.FC<WizardModalProps> = ({
           </div>
 
           {/* Footer Navigation */}
-          <div className="sticky bottom-0 border-t border-[var(--border-secondary)] bg-[var(--bg-secondary)]/80 backdrop-blur-md px-4 sm:px-6 py-3 sm:py-4 shadow-lg">
+          <div className="flex-shrink-0 border-t border-[var(--border-secondary)] bg-[var(--bg-secondary)]/80 backdrop-blur-md px-4 sm:px-6 py-3 sm:py-4 shadow-lg">
             {/* Keyboard Shortcuts Hint */}
             <div className="hidden md:flex items-center justify-center gap-4 text-xs text-[var(--text-tertiary)] mb-2 pb-2 border-b border-[var(--border-secondary)]/50">
               <span className="flex items-center gap-1.5">