Fix issues

frontend/src/components/domain/auth/RegisterForm.tsx

@@ -8,6 +8,7 @@ import { SubscriptionSelection } from './SubscriptionSelection';
 import PaymentForm from './PaymentForm';
 import { loadStripe } from '@stripe/stripe-js';
 import { Elements } from '@stripe/react-stripe-js';
+import { CheckCircle } from 'lucide-react';
 
 // Initialize Stripe - In production, use environment variable
 const stripePromise = loadStripe(import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY || 'pk_test_51234567890123456789012345678901234567890123456789012345678901234567890123456789012345');
@@ -168,48 +169,69 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
  };
 
   // Render step indicator
-  const renderStepIndicator = () => (
-    <div className="flex justify-center mb-6">
-      <div className="flex items-center space-x-4">
-        <div className={`flex items-center justify-center w-8 h-8 rounded-full ${
-          currentStep === 'basic_info' ? 'bg-color-primary text-white' : 
-          currentStep === 'subscription' || currentStep === 'payment' ? 'bg-color-success text-white' : 'bg-bg-secondary text-text-secondary'
-        }`}>
-          1
-        </div>
-        <div className="h-1 w-16 bg-border-primary"></div>
-        <div className={`flex items-center justify-center w-8 h-8 rounded-full ${
-          currentStep === 'subscription' ? 'bg-color-primary text-white' : 
-          currentStep === 'payment' ? 'bg-color-success text-white' : 'bg-bg-secondary text-text-secondary'
-        }`}>
-          2
-        </div>
-        <div className="h-1 w-16 bg-border-primary"></div>
-        <div className={`flex items-center justify-center w-8 h-8 rounded-full ${
-          currentStep === 'payment' ? 'bg-color-primary text-white' : 'bg-bg-secondary text-text-secondary'
-        }`}>
-          3
+  const renderStepIndicator = () => {
+    const steps = [
+      { key: 'basic_info', label: 'Información', number: 1 },
+      { key: 'subscription', label: 'Plan', number: 2 },
+      { key: 'payment', label: 'Pago', number: 3 }
+    ];
+
+    const getStepIndex = (step: RegistrationStep) => {
+      return steps.findIndex(s => s.key === step);
+    };
+
+    const currentIndex = getStepIndex(currentStep);
+
+    return (
+      <div className="mb-6 sm:mb-8">
+        <div className="flex justify-center items-center">
+          {steps.map((step, index) => (
+            <React.Fragment key={step.key}>
+              <div className="flex flex-col items-center">
+                <div className={`flex items-center justify-center w-8 h-8 sm:w-10 sm:h-10 rounded-full font-semibold text-sm transition-all duration-200 ${
+                  index < currentIndex
+                    ? 'bg-color-success text-white'
+                    : index === currentIndex
+                    ? 'bg-color-primary text-white ring-4 ring-color-primary/20'
+                    : 'bg-bg-secondary text-text-secondary'
+                }`}>
+                  {index < currentIndex ? (
+                    <CheckCircle className="w-5 h-5" />
+                  ) : (
+                    step.number
+                  )}
+                </div>
+                <span className={`mt-1 sm:mt-2 text-[10px] sm:text-xs font-medium hidden sm:block ${
+                  index <= currentIndex ? 'text-text-primary' : 'text-text-secondary'
+                }`}>
+                  {step.label}
+                </span>
+              </div>
+              {index < steps.length - 1 && (
+                <div className={`h-0.5 w-8 sm:w-16 mx-2 sm:mx-4 transition-all duration-200 ${
+                  index < currentIndex ? 'bg-color-success' : 'bg-border-primary'
+                }`} />
+              )}
+            </React.Fragment>
+          ))}
         </div>
       </div>
-    </div>
-  );
+    );
+  };
 
   // Render current step
   const renderCurrentStep = () => {
     switch (currentStep) {
       case 'basic_info':
         return (
-          <div className="space-y-6">
-            <div className="text-center mb-8">
-              <h1 className="text-3xl font-bold text-text-primary mb-2">
+          <div className="space-y-4 sm:space-y-6">
+            <div className="text-center mb-4 sm:mb-6">
+              <h1 className="text-2xl sm:text-3xl font-bold text-text-primary mb-2">
                 {t('auth:register.title', 'Crear Cuenta')}
               </h1>
-              <p className="text-text-secondary text-lg">
+              <p className="text-text-secondary text-sm sm:text-base">
                 {t('auth:register.subtitle', 'Únete y comienza hoy mismo')}
               </p>
-              <p className="text-sm text-text-tertiary mt-2">
-                Paso 1 de 3: Información Básica
-              </p>
             </div>
 
             <form onSubmit={(e) => { e.preventDefault(); handleNextStep(); }} className="space-y-6">
@@ -396,14 +418,13 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
                 )}
               </div>
 
-              <div className="flex justify-between pt-4">
-                <div></div> {/* Spacer for alignment */}
+              <div className="flex justify-end pt-4">
                 <Button
                   type="submit"
                   variant="primary"
                   size="lg"
                   disabled={isLoading || !validatePassword(formData.password) || !formData.acceptTerms || passwordMatchStatus !== 'match'}
-                  className="w-48"
+                  className="w-full sm:w-48"
                 >
                   Siguiente
                 </Button>
@@ -415,16 +436,13 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
       case 'subscription':
         return (
           <div className="space-y-6">
-            <div className="text-center mb-8">
-              <h1 className="text-3xl font-bold text-text-primary mb-2">
+            <div className="text-center">
+              <h1 className="text-2xl sm:text-3xl font-bold text-text-primary mb-2">
                 {t('auth:subscription.select_plan', 'Selecciona tu plan')}
               </h1>
-              <p className="text-text-secondary text-lg">
+              <p className="text-text-secondary text-sm sm:text-base">
                 {t('auth:subscription.choose_plan', 'Elige el plan que mejor se adapte a tu negocio')}
               </p>
-              <p className="text-sm text-text-tertiary mt-2">
-                Paso 2 de 3: Plan de Suscripción
-              </p>
             </div>
 
             <SubscriptionSelection
@@ -435,13 +453,13 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
               trialSelected={useTrial}
             />
 
-            <div className="flex justify-between pt-4">
+            <div className="flex flex-col sm:flex-row justify-between gap-3 sm:gap-4 pt-2 border-t border-border-primary">
               <Button
                 variant="outline"
                 size="lg"
                 onClick={handlePreviousStep}
                 disabled={isLoading}
-                className="w-48"
+                className="w-full sm:w-48 order-2 sm:order-1"
               >
                 Anterior
               </Button>
@@ -450,7 +468,7 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
                 size="lg"
                 onClick={handleNextStep}
                 disabled={isLoading}
-                className="w-48"
+                className="w-full sm:w-48 order-1 sm:order-2"
               >
                 Siguiente
               </Button>
@@ -460,17 +478,14 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
       
       case 'payment':
         return (
-          <div className="space-y-6">
-            <div className="text-center mb-8">
-              <h1 className="text-3xl font-bold text-text-primary mb-2">
+          <div className="space-y-4 sm:space-y-6">
+            <div className="text-center mb-4 sm:mb-6">
+              <h1 className="text-2xl sm:text-3xl font-bold text-text-primary mb-2">
                 {t('auth:payment.payment_info', 'Información de Pago')}
               </h1>
-              <p className="text-text-secondary text-lg">
+              <p className="text-text-secondary text-xs sm:text-sm">
                 {t('auth:payment.secure_payment', 'Tu información de pago está protegida con encriptación de extremo a extremo')}
               </p>
-              <p className="text-sm text-text-tertiary mt-2">
-                Paso 3 de 3: Procesamiento de Pago
-              </p>
             </div>
 
             <Elements stripe={stripePromise}>
@@ -482,13 +497,13 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
               />
             </Elements>
 
-            <div className="flex justify-between pt-4">
+            <div className="flex justify-start pt-4">
               <Button
                 variant="outline"
                 size="lg"
                 onClick={handlePreviousStep}
                 disabled={isLoading}
-                className="w-48"
+                className="w-full sm:w-48"
               >
                 Anterior
               </Button>
@@ -499,7 +514,7 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
   };
 
   return (
-    <Card className={`p-8 w-full max-w-3xl ${className || ''}`} role="main">
+    <Card className={`p-4 sm:p-6 lg:p-8 w-full max-w-6xl ${className || ''}`} role="main">
       {renderStepIndicator()}
       {renderCurrentStep()}