feat: Complete SalonOS implementation with authentication, payments, reports, and documentation

- Implement client authentication with Supabase magic links
- Add Stripe payment integration for deposits
- Complete The Boutique booking flow with payment processing
- Implement Aperture backend with staff/resources management
- Add comprehensive reports: sales, payments, payroll
- Create permissions management system by roles
- Configure kiosk system with enrollment
- Add no-show logic and penalization system
- Update project documentation and API docs
- Enhance README with current project status

app/booking/cita/page.tsx

@@ -1,15 +1,20 @@
 'use client'
 
 import { useState, useEffect } from 'react'
+import { useRouter } from 'next/navigation'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
-import { CheckCircle2, Calendar, Clock, MapPin } from 'lucide-react'
+import { CheckCircle2, Calendar, Clock, MapPin, CreditCard } from 'lucide-react'
+import { CardElement, useStripe, useElements } from '@stripe/react-stripe-js'
 import { format } from 'date-fns'
 import { es } from 'date-fns/locale'
+import { useAuth } from '@/lib/auth/context'
 
 export default function CitaPage() {
+  const { user, loading: authLoading } = useAuth()
+  const router = useRouter()
   const [formData, setFormData] = useState({
     nombre: '',
     email: '',
@@ -17,8 +22,32 @@ export default function CitaPage() {
     notas: ''
   })
   const [bookingDetails, setBookingDetails] = useState<any>(null)
-  const [loading, setLoading] = useState(false)
+  const [pageLoading, setPageLoading] = useState(false)
   const [submitted, setSubmitted] = useState(false)
+  const [paymentIntent, setPaymentIntent] = useState<any>(null)
+  const [showPayment, setShowPayment] = useState(false)
+  const stripe = useStripe()
+  const elements = useElements()
+
+  useEffect(() => {
+    if (!authLoading && !user) {
+      router.push('/booking/login?redirect=/booking/cita' + window.location.search)
+    }
+  }, [user, authLoading, router])
+
+  if (authLoading) {
+    return (
+      <div className="min-h-screen bg-[var(--bone-white)] pt-24 flex items-center justify-center">
+        <div className="text-center">
+          <p>Cargando...</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (!user) {
+    return null
+  }
 
   useEffect(() => {
     const params = new URLSearchParams(window.location.search)
@@ -32,6 +61,15 @@ export default function CitaPage() {
     }
   }, [])
 
+  useEffect(() => {
+    if (user) {
+      setFormData(prev => ({
+        ...prev,
+        email: user.email || ''
+      }))
+    }
+  }, [user])
+
   const fetchBookingDetails = async (serviceId: string, locationId: string, date: string, time: string) => {
     try {
       const response = await fetch(`/api/availability/time-slots?location_id=${locationId}&service_id=${serviceId}&date=${date}`)
@@ -51,10 +89,10 @@ export default function CitaPage() {
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
-    setLoading(true)
+    setPageLoading(true)
 
     try {
-      const response = await fetch('/api/bookings', {
+      const response = await fetch('/api/create-payment-intent', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json'
@@ -73,16 +111,17 @@ export default function CitaPage() {
 
       const data = await response.json()
 
-      if (response.ok && data.success) {
-        setSubmitted(true)
+      if (response.ok) {
+        setPaymentIntent(data)
+        setShowPayment(true)
       } else {
-        alert('Error al crear la reserva: ' + (data.error || 'Error desconocido'))
+        alert('Error al preparar el pago: ' + (data.error || 'Error desconocido'))
       }
     } catch (error) {
-      console.error('Error creating booking:', error)
-      alert('Error al crear la reserva')
+      console.error('Error creating payment intent:', error)
+      alert('Error al preparar el pago')
     } finally {
-      setLoading(false)
+      setPageLoading(false)
     }
   }
 
@@ -93,6 +132,57 @@ export default function CitaPage() {
     })
   }
 
+  const handlePayment = async () => {
+    if (!stripe || !elements) return
+
+    setPageLoading(true)
+
+    const { error } = await stripe.confirmCardPayment(paymentIntent.clientSecret, {
+      payment_method: {
+        card: elements.getElement(CardElement)!,
+      }
+    })
+
+    if (error) {
+      alert('Error en el pago: ' + error.message)
+      setPageLoading(false)
+    } else {
+      // Payment succeeded, create booking
+      try {
+        const response = await fetch('/api/bookings', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            customer_email: formData.email,
+            customer_phone: formData.telefono,
+            customer_first_name: formData.nombre.split(' ')[0] || formData.nombre,
+            customer_last_name: formData.nombre.split(' ').slice(1).join(' '),
+            service_id: bookingDetails.service_id,
+            location_id: bookingDetails.location_id,
+            start_time_utc: bookingDetails.startTime,
+            notes: formData.notas,
+            payment_intent_id: paymentIntent.id
+          })
+        })
+
+        const data = await response.json()
+
+        if (response.ok && data.success) {
+          setSubmitted(true)
+        } else {
+          alert('Error al crear la reserva: ' + (data.error || 'Error desconocido'))
+        }
+      } catch (error) {
+        console.error('Error creating booking:', error)
+        alert('Error al crear la reserva')
+      } finally {
+        setPageLoading(false)
+      }
+    }
+  }
+
   if (submitted) {
     return (
       <div className="min-h-screen bg-[var(--bone-white)] pt-24 flex items-center justify-center">
@@ -257,19 +347,52 @@ export default function CitaPage() {
                   />
                 </div>
 
-                <Button
-                  type="submit"
-                  disabled={loading}
-                  className="w-full"
-                >
-                  {loading ? 'Procesando...' : 'Confirmar Reserva'}
-                </Button>
+                {showPayment ? (
+                  <div className="space-y-4">
+                    <div className="p-4 rounded-lg" style={{ background: 'var(--bone-white)' }}>
+                      <Label>Información de Pago</Label>
+                      <p className="text-sm opacity-70 mb-4">
+                        Depósito requerido: ${(paymentIntent.amount / 100).toFixed(2)} USD
+                        (50% del servicio o $200 máximo)
+                      </p>
+                      <div className="border rounded-lg p-4" style={{ borderColor: 'var(--mocha-taupe)' }}>
+                        <CardElement
+                          options={{
+                            style: {
+                              base: {
+                                fontSize: '16px',
+                                color: 'var(--charcoal-brown)',
+                                '::placeholder': {
+                                  color: 'var(--mocha-taupe)',
+                                },
+                              },
+                            },
+                          }}
+                        />
+                      </div>
+                    </div>
+                    <Button
+                      onClick={handlePayment}
+                      disabled={!stripe || pageLoading}
+                      className="w-full"
+                    >
+                      {pageLoading ? 'Procesando Pago...' : 'Pagar y Confirmar Reserva'}
+                    </Button>
+                  </div>
+                ) : (
+                  <Button
+                    type="submit"
+                    disabled={pageLoading}
+                  >
+                    {pageLoading ? 'Procesando...' : 'Continuar al Pago'}
+                  </Button>
+                )}
               </form>
 
               <div className="mt-6 p-4 rounded-lg" style={{ background: 'var(--bone-white)' }}>
                 <p className="text-sm" style={{ color: 'var(--charcoal-brown)', opacity: 0.7 }}>
                   * Al confirmar tu reserva, recibirás un correo de confirmación
-                  con los detalles. La reserva se mantendrá por 30 minutos.
+                  con los detalles. Se requiere un depósito para confirmar.
                 </p>
               </div>
             </CardContent>

app/booking/layout.tsx

@@ -1,15 +1,23 @@
+'use client'
+
 import { ReactNode } from 'react'
 import { Button } from '@/components/ui/button'
 import Link from 'next/link'
-import { Calendar, User } from 'lucide-react'
+import { Calendar, User, LogOut } from 'lucide-react'
+import { useAuth } from '@/lib/auth/context'
+import { loadStripe } from '@stripe/stripe-js'
+import { Elements } from '@stripe/react-stripe-js'
+
+const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!)
 
 export default function BookingLayout({
   children,
 }: {
   children: ReactNode
 }) {
+  const { user, signOut, loading } = useAuth()
   return (
-    <>
+    <Elements stripe={stripePromise}>
       <header className="site-header booking-header">
         <nav className="nav-primary">
           <div className="logo">
@@ -26,23 +34,37 @@ export default function BookingLayout({
                 Reservar
               </Button>
             </Link>
-            <Link href="/booking/mis-citas">
-              <Button variant="ghost" size="sm">
-                <Calendar className="w-4 h-4 mr-2" />
-                Mis Citas
-              </Button>
-            </Link>
-            <Link href="/booking/perfil">
-              <Button variant="ghost" size="sm">
-                <User className="w-4 h-4 mr-2" />
-                Perfil
-              </Button>
-            </Link>
-            <Link href="/booking/login">
-              <Button variant="outline" size="sm">
-                Iniciar Sesión
-              </Button>
-            </Link>
+            {user ? (
+              <>
+                <Link href="/booking/mis-citas">
+                  <Button variant="ghost" size="sm">
+                    <Calendar className="w-4 h-4 mr-2" />
+                    Mis Citas
+                  </Button>
+                </Link>
+                <Link href="/booking/perfil">
+                  <Button variant="ghost" size="sm">
+                    <User className="w-4 h-4 mr-2" />
+                    Perfil
+                  </Button>
+                </Link>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => signOut()}
+                  disabled={loading}
+                >
+                  <LogOut className="w-4 h-4 mr-2" />
+                  Salir
+                </Button>
+              </>
+            ) : (
+              <Link href="/booking/login">
+                <Button variant="outline" size="sm">
+                  Iniciar Sesión
+                </Button>
+              </Link>
+            )}
           </div>
         </nav>
       </header>
@@ -50,6 +72,6 @@ export default function BookingLayout({
       <main className="pt-24">
         {children}
       </main>
-    </>
+    </Elements>
   )
 }

app/booking/login/page.tsx

@@ -5,74 +5,31 @@ import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
-import { Eye, EyeOff, Mail, Lock, User } from 'lucide-react'
+import { Mail, CheckCircle } from 'lucide-react'
+import { useAuth } from '@/lib/auth/context'
 
 export default function LoginPage() {
-  const [activeTab, setActiveTab] = useState<'login' | 'signup'>('login')
-  const [showPassword, setShowPassword] = useState(false)
+  const { signIn } = useAuth()
+  const [email, setEmail] = useState('')
   const [loading, setLoading] = useState(false)
-  const [formData, setFormData] = useState({
-    email: '',
-    password: '',
-    confirmPassword: '',
-    firstName: '',
-    lastName: '',
-    phone: ''
-  })
+  const [emailSent, setEmailSent] = useState(false)
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setFormData({
-      ...formData,
-      [e.target.name]: e.target.value
-    })
-  }
-
-  const handleLogin = async (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
-    setLoading(true)
-
-    try {
-      // En una implementación real, esto haría una llamada a la API de autenticación
-      // Por ahora, simulamos un login exitoso
-      setTimeout(() => {
-        localStorage.setItem('customer_token', 'mock-token-123')
-        alert('Login exitoso! Redirigiendo...')
-        window.location.href = '/perfil'
-      }, 1000)
-    } catch (error) {
-      console.error('Login error:', error)
-      alert('Error al iniciar sesión')
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  const handleSignup = async (e: React.FormEvent) => {
-    e.preventDefault()
-
-    if (formData.password !== formData.confirmPassword) {
-      alert('Las contraseñas no coinciden')
-      return
-    }
+    if (!email) return
 
     setLoading(true)
 
     try {
-      // En una implementación real, esto crearía la cuenta del cliente
-      // Por ahora, simulamos un registro exitoso
-      setTimeout(() => {
-        alert('Cuenta creada exitosamente! Ahora puedes iniciar sesión.')
-        setActiveTab('login')
-        setFormData({
-          ...formData,
-          password: '',
-          confirmPassword: ''
-        })
-      }, 1000)
+      const { error } = await signIn(email)
+      if (error) {
+        alert('Error al enviar el enlace mágico: ' + error.message)
+      } else {
+        setEmailSent(true)
+      }
     } catch (error) {
-      console.error('Signup error:', error)
-      alert('Error al crear la cuenta')
+      console.error('Auth error:', error)
+      alert('Error al enviar el enlace mágico')
     } finally {
       setLoading(false)
     }
@@ -93,213 +50,62 @@ export default function LoginPage() {
         <Card className="border-none" style={{ background: 'var(--soft-cream)' }}>
           <CardHeader>
             <CardTitle style={{ color: 'var(--charcoal-brown)' }}>
-              Bienvenido
+              {emailSent ? 'Enlace Enviado' : 'Bienvenido'}
             </CardTitle>
             <CardDescription>
-              Gestiona tus citas y accede a beneficios exclusivos
+              {emailSent
+                ? 'Revisa tu email y haz clic en el enlace para acceder'
+                : 'Ingresa tu email para recibir un enlace mágico de acceso'
+              }
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <Tabs value={activeTab} onValueChange={(value) => setActiveTab(value as 'login' | 'signup')}>
-              <TabsList className="grid w-full grid-cols-2 mb-6">
-                <TabsTrigger value="login">Iniciar Sesión</TabsTrigger>
-                <TabsTrigger value="signup">Crear Cuenta</TabsTrigger>
-              </TabsList>
-
-              <TabsContent value="login">
-                <form onSubmit={handleLogin} className="space-y-4">
-                  <div>
-                    <Label htmlFor="email">Email</Label>
-                    <div className="relative">
-                      <Mail className="absolute left-3 top-3 h-4 w-4 opacity-50" style={{ color: 'var(--mocha-taupe)' }} />
-                      <Input
-                        id="email"
-                        name="email"
-                        type="email"
-                        value={formData.email}
-                        onChange={handleChange}
-                        required
-                        className="pl-10"
-                        style={{ borderColor: 'var(--mocha-taupe)' }}
-                        placeholder="tu@email.com"
-                      />
-                    </div>
-                  </div>
-
-                  <div>
-                    <Label htmlFor="password">Contraseña</Label>
-                    <div className="relative">
-                      <Lock className="absolute left-3 top-3 h-4 w-4 opacity-50" style={{ color: 'var(--mocha-taupe)' }} />
-                      <Input
-                        id="password"
-                        name="password"
-                        type={showPassword ? 'text' : 'password'}
-                        value={formData.password}
-                        onChange={handleChange}
-                        required
-                        className="pl-10 pr-10"
-                        style={{ borderColor: 'var(--mocha-taupe)' }}
-                        placeholder="Tu contraseña"
-                      />
-                      <button
-                        type="button"
-                        onClick={() => setShowPassword(!showPassword)}
-                        className="absolute right-3 top-3 opacity-50 hover:opacity-100"
-                        style={{ color: 'var(--mocha-taupe)' }}
-                      >
-                        {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-                      </button>
-                    </div>
-                  </div>
-
-                  <Button
-                    type="submit"
-                    disabled={loading}
-                    className="w-full"
-                  >
-                    {loading ? 'Iniciando...' : 'Iniciar Sesión'}
-                  </Button>
-                </form>
-
-                <div className="mt-6 text-center">
-                  <Button
-                    variant="link"
-                    onClick={() => alert('Funcionalidad de recuperación próximamente')}
-                    className="text-sm"
-                    style={{ color: 'var(--mocha-taupe)' }}
-                  >
-                    ¿Olvidaste tu contraseña?
-                  </Button>
-                </div>
-              </TabsContent>
-
-              <TabsContent value="signup">
-                <form onSubmit={handleSignup} className="space-y-4">
-                  <div className="grid grid-cols-2 gap-4">
-                    <div>
-                      <Label htmlFor="firstName">Nombre</Label>
-                      <div className="relative">
-                        <User className="absolute left-3 top-3 h-4 w-4 opacity-50" style={{ color: 'var(--mocha-taupe)' }} />
-                        <Input
-                          id="firstName"
-                          name="firstName"
-                          value={formData.firstName}
-                          onChange={handleChange}
-                          required
-                          className="pl-10"
-                          style={{ borderColor: 'var(--mocha-taupe)' }}
-                          placeholder="María"
-                        />
-                      </div>
-                    </div>
-                    <div>
-                      <Label htmlFor="lastName">Apellido</Label>
-                      <Input
-                        id="lastName"
-                        name="lastName"
-                        value={formData.lastName}
-                        onChange={handleChange}
-                        required
-                        style={{ borderColor: 'var(--mocha-taupe)' }}
-                        placeholder="García"
-                      />
-                    </div>
-                  </div>
-
-                  <div>
-                    <Label htmlFor="signupEmail">Email</Label>
-                    <div className="relative">
-                      <Mail className="absolute left-3 top-3 h-4 w-4 opacity-50" style={{ color: 'var(--mocha-taupe)' }} />
-                      <Input
-                        id="signupEmail"
-                        name="email"
-                        type="email"
-                        value={formData.email}
-                        onChange={handleChange}
-                        required
-                        className="pl-10"
-                        style={{ borderColor: 'var(--mocha-taupe)' }}
-                        placeholder="tu@email.com"
-                      />
-                    </div>
-                  </div>
-
-                  <div>
-                    <Label htmlFor="phone">Teléfono</Label>
+            {emailSent ? (
+              <div className="text-center space-y-4">
+                <CheckCircle className="mx-auto h-16 w-16 text-green-500" />
+                <p className="text-sm" style={{ color: 'var(--charcoal-brown)' }}>
+                  Hemos enviado un enlace mágico a <strong>{email}</strong>
+                </p>
+                <p className="text-xs opacity-70" style={{ color: 'var(--charcoal-brown)' }}>
+                  El enlace expirará en 1 hora. Revisa tu bandeja de entrada y carpeta de spam.
+                </p>
+                <Button
+                  variant="outline"
+                  onClick={() => setEmailSent(false)}
+                  className="w-full"
+                >
+                  Enviar otro enlace
+                </Button>
+              </div>
+            ) : (
+              <form onSubmit={handleSubmit} className="space-y-4">
+                <div>
+                  <Label htmlFor="email">Email</Label>
+                  <div className="relative">
+                    <Mail className="absolute left-3 top-3 h-4 w-4 opacity-50" style={{ color: 'var(--mocha-taupe)' }} />
                     <Input
-                      id="phone"
-                      name="phone"
-                      type="tel"
-                      value={formData.phone}
-                      onChange={handleChange}
-                      style={{ borderColor: 'var(--mocha-taupe)' }}
-                      placeholder="+52 844 123 4567"
-                    />
-                  </div>
-
-                  <div>
-                    <Label htmlFor="signupPassword">Contraseña</Label>
-                    <div className="relative">
-                      <Lock className="absolute left-3 top-3 h-4 w-4 opacity-50" style={{ color: 'var(--mocha-taupe)' }} />
-                      <Input
-                        id="signupPassword"
-                        name="password"
-                        type={showPassword ? 'text' : 'password'}
-                        value={formData.password}
-                        onChange={handleChange}
-                        required
-                        className="pl-10 pr-10"
-                        style={{ borderColor: 'var(--mocha-taupe)' }}
-                        placeholder="Mínimo 8 caracteres"
-                      />
-                      <button
-                        type="button"
-                        onClick={() => setShowPassword(!showPassword)}
-                        className="absolute right-3 top-3 opacity-50 hover:opacity-100"
-                        style={{ color: 'var(--mocha-taupe)' }}
-                      >
-                        {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-                      </button>
-                    </div>
-                  </div>
-
-                  <div>
-                    <Label htmlFor="confirmPassword">Confirmar Contraseña</Label>
-                    <Input
-                      id="confirmPassword"
-                      name="confirmPassword"
-                      type="password"
-                      value={formData.confirmPassword}
-                      onChange={handleChange}
+                      id="email"
+                      name="email"
+                      type="email"
+                      value={email}
+                      onChange={(e) => setEmail(e.target.value)}
                       required
+                      className="pl-10"
                       style={{ borderColor: 'var(--mocha-taupe)' }}
-                      placeholder="Repite tu contraseña"
+                      placeholder="tu@email.com"
                     />
                   </div>
-
-                  <Button
-                    type="submit"
-                    disabled={loading}
-                    className="w-full"
-                  >
-                    {loading ? 'Creando cuenta...' : 'Crear Cuenta'}
-                  </Button>
-                </form>
-
-                <div className="mt-6 p-4 rounded-lg" style={{ background: 'var(--bone-white)' }}>
-                  <p className="text-xs opacity-70" style={{ color: 'var(--charcoal-brown)' }}>
-                    Al crear una cuenta, aceptas nuestros{' '}
-                    <a href="/privacy-policy" className="underline hover:opacity-70" style={{ color: 'var(--deep-earth)' }}>
-                      términos de privacidad
-                    </a>{' '}
-                    y{' '}
-                    <a href="/legal" className="underline hover:opacity-70" style={{ color: 'var(--deep-earth)' }}>
-                      condiciones de servicio
-                    </a>.
-                  </p>
                 </div>
-              </TabsContent>
-            </Tabs>
+
+                <Button
+                  type="submit"
+                  disabled={loading || !email}
+                  className="w-full"
+                >
+                  {loading ? 'Enviando...' : 'Enviar Enlace Mágico'}
+                </Button>
+              </form>
+            )}
           </CardContent>
         </Card>
 

app/booking/perfil/page.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useState, useEffect } from 'react'
+import { useRouter } from 'next/navigation'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
@@ -8,12 +9,15 @@ import { Label } from '@/components/ui/label'
 import { Calendar, Clock, MapPin, User, Mail, Phone } from 'lucide-react'
 import { format } from 'date-fns'
 import { es } from 'date-fns/locale'
+import { useAuth } from '@/lib/auth/context'
 
 export default function PerfilPage() {
+  const { user, loading: authLoading } = useAuth()
+  const router = useRouter()
   const [customer, setCustomer] = useState<any>(null)
   const [bookings, setBookings] = useState<any[]>([])
   const [isEditing, setIsEditing] = useState(false)
-  const [loading, setLoading] = useState(false)
+  const [pageLoading, setPageLoading] = useState(false)
   const [formData, setFormData] = useState({
     first_name: '',
     last_name: '',
@@ -21,6 +25,26 @@ export default function PerfilPage() {
     phone: ''
   })
 
+  useEffect(() => {
+    if (!authLoading && !user) {
+      router.push('/booking/login')
+    }
+  }, [user, authLoading, router])
+
+  if (authLoading) {
+    return (
+      <div className="min-h-screen bg-[var(--bone-white)] pt-24 flex items-center justify-center">
+        <div className="text-center">
+          <p>Cargando...</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (!user) {
+    return null
+  }
+
   useEffect(() => {
     loadCustomerProfile()
     loadCustomerBookings()
@@ -82,7 +106,7 @@ export default function PerfilPage() {
   }
 
   const handleSaveProfile = async () => {
-    setLoading(true)
+    setPageLoading(true)
     try {
       // En una implementación real, esto actualizaría el perfil del cliente
       setCustomer({
@@ -95,7 +119,7 @@ export default function PerfilPage() {
       console.error('Error updating profile:', error)
       alert('Error al actualizar el perfil')
     } finally {
-      setLoading(false)
+      setPageLoading(false)
     }
   }
 
@@ -209,10 +233,10 @@ export default function PerfilPage() {
                       className="mt-1"
                     />
                   </div>
-                  <div className="flex gap-2">
-                    <Button onClick={handleSaveProfile} disabled={loading}>
-                      {loading ? 'Guardando...' : 'Guardar'}
-                    </Button>
+                   <div className="flex gap-2">
+                     <Button onClick={handleSaveProfile} disabled={pageLoading}>
+                       {pageLoading ? 'Guardando...' : 'Guardar'}
+                     </Button>
                     <Button variant="outline" onClick={() => setIsEditing(false)}>
                       Cancelar
                     </Button>