Redesign professional profile UI + sidebar mode indicator

- professional_profile_view: gradient header card with avatar overlay,
  sectioned cards (service modality, address, rate, payment chips, schedule),
  animated payment method chips, full-width save button with loading state
- sidebar: teal-dark background in pro mode vs navy in user mode,
  animated mode indicator pill, muted toggle button in pro mode

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

lib/ui/shared/sidebar.dart

@@ -29,13 +29,62 @@ class Sidebar extends StatelessWidget {
     return Container(
       width: 220,
       height: double.infinity,
-      decoration: buildBoxDecoration(),
+      decoration: buildBoxDecoration(professionalProvider.isProModeActive),
       child: ListView(
         physics: const ClampingScrollPhysics(),
         children: [
           const Logo(),
           const SizedBox(height: 8),
 
+          // Mode indicator pill
+          Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
+            child: AnimatedContainer(
+              duration: const Duration(milliseconds: 300),
+              padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
+              decoration: BoxDecoration(
+                color: professionalProvider.isProModeActive
+                    ? const Color(0xFF16A34A).withOpacity(0.18)
+                    : const Color(0xFF42A4EF).withOpacity(0.14),
+                border: Border.all(
+                  color: professionalProvider.isProModeActive
+                      ? const Color(0xFF22C55E).withOpacity(0.5)
+                      : const Color(0xFF42A4EF).withOpacity(0.4),
+                  width: 1,
+                ),
+                borderRadius: BorderRadius.circular(8),
+              ),
+              child: Row(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  Icon(
+                    professionalProvider.isProModeActive
+                        ? Icons.work_outline
+                        : Icons.person_outline,
+                    size: 13,
+                    color: professionalProvider.isProModeActive
+                        ? const Color(0xFF4ADE80)
+                        : const Color(0xFF7DD3FC),
+                  ),
+                  const SizedBox(width: 6),
+                  Text(
+                    professionalProvider.isProModeActive
+                        ? 'Modo Profesional'
+                        : 'Modo Usuario',
+                    style: TextStyle(
+                      fontSize: 11,
+                      fontWeight: FontWeight.w600,
+                      color: professionalProvider.isProModeActive
+                          ? const Color(0xFF4ADE80)
+                          : const Color(0xFF7DD3FC),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+          const SizedBox(height: 4),
+
           if (professionalProvider.isProModeActive) ...[
             const TextSeparator(text: 'Profesional'),
             MenuItem(
@@ -147,13 +196,20 @@ class Sidebar extends StatelessWidget {
                     navigateTo(Flurorouter.requestProfessionalRoute);
                   }
                 },
-                child: Container(
+                child: AnimatedContainer(
+                  duration: const Duration(milliseconds: 300),
                   padding: const EdgeInsets.symmetric(vertical: 11),
                   decoration: BoxDecoration(
-                    gradient: const LinearGradient(
+                    gradient: LinearGradient(
-                      colors: [Color(0xFF42A4EF), Color(0xFF1565C0)],
+                      colors: professionalProvider.isProModeActive
+                          ? [const Color(0xFF374151), const Color(0xFF1F2937)]
+                          : [const Color(0xFF42A4EF), const Color(0xFF1565C0)],
                     ),
                     borderRadius: BorderRadius.circular(10),
+                    border: professionalProvider.isProModeActive
+                        ? Border.all(
+                            color: Colors.white.withOpacity(0.1), width: 1)
+                        : null,
                   ),
                   child: Row(
                     mainAxisAlignment: MainAxisAlignment.center,
@@ -162,14 +218,20 @@ class Sidebar extends StatelessWidget {
                         professionalProvider.isProModeActive
                             ? Icons.person_outlined
                             : Icons.work_outline,
-                        color: Colors.white,
+                        color: professionalProvider.isProModeActive
+                            ? Colors.white70
+                            : Colors.white,
                         size: 16,
                       ),
                       const SizedBox(width: 8),
                       Text(
-                        'Modo ${professionalProvider.isProModeActive ? 'Usuario' : 'Profesional'}',
+                        professionalProvider.isProModeActive
-                        style: const TextStyle(
+                            ? 'Ir a modo Usuario'
-                          color: Colors.white,
+                            : 'Ir a modo Profesional',
+                        style: TextStyle(
+                          color: professionalProvider.isProModeActive
+                              ? Colors.white70
+                              : Colors.white,
                           fontSize: 13,
                           fontWeight: FontWeight.w600,
                         ),
@@ -193,16 +255,15 @@ class Sidebar extends StatelessWidget {
     );
   }
 
-  BoxDecoration buildBoxDecoration() => const BoxDecoration(
+  BoxDecoration buildBoxDecoration(bool isProMode) => BoxDecoration(
         gradient: LinearGradient(
           begin: Alignment.topCenter,
           end: Alignment.bottomCenter,
-          colors: [
+          colors: isProMode
-            Color(0xFF0D1B3E),
+              ? const [Color(0xFF0A1F18), Color(0xFF061510)]
-            Color(0xFF0A1628),
+              : const [Color(0xFF0D1B3E), Color(0xFF0A1628)],
-          ],
         ),
-        boxShadow: [
+        boxShadow: const [
           BoxShadow(
             color: Colors.black38,
             blurRadius: 12,