feat(web): router wiring completo + nav link usuarios + MustChangePasswordGate integration [UDT-008]

- Agrega ProtectedPage helper que combina ProtectedRoute + MustChangePasswordGate + ProtectedLayout
- Rutas nuevas: /usuarios, /usuarios/:id, /usuarios/:id/editar con permisos RBAC
- /perfil/contrasena sin MustChangePasswordGate (evita redirect loop)
- Sidebar: sección "Mi cuenta" con cambio de contraseña; link Usuarios en sección admin

src/web/src/components/layout/AppSidebar.tsx

@@ -6,8 +6,10 @@ import {
   Zap,
   Settings,
   UserPlus,
+  Users,
   ShieldCheck,
   KeyRound,
+  Lock,
 } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { Badge } from '@/components/ui/badge'
@@ -86,6 +88,25 @@ export function SidebarNav() {
           )
         })}
 
+        {/* Profile / account section — visible for all authenticated users */}
+        <div className="pt-2 pb-1 px-3">
+          <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground/60">
+            Mi cuenta
+          </span>
+        </div>
+        <Link
+          to="/perfil/contrasena"
+          className={cn(
+            'flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors hover:bg-accent hover:text-accent-foreground',
+            pathname === '/perfil/contrasena'
+              ? 'bg-accent text-accent-foreground font-medium'
+              : 'text-muted-foreground',
+          )}
+        >
+          <Lock className="h-4 w-4 shrink-0" />
+          <span>Cambiar contraseña</span>
+        </Link>
+
         {/* Admin-only section */}
         {isAdmin && (
           <>
@@ -94,6 +115,18 @@ export function SidebarNav() {
                 Administración
               </span>
             </div>
+            <Link
+              to="/usuarios"
+              className={cn(
+                'flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors hover:bg-accent hover:text-accent-foreground',
+                pathname.startsWith('/usuarios') && pathname !== '/usuarios/nuevo'
+                  ? 'bg-accent text-accent-foreground font-medium'
+                  : 'text-muted-foreground',
+              )}
+            >
+              <Users className="h-4 w-4 shrink-0" />
+              <span>Usuarios</span>
+            </Link>
             <Link
               to="/usuarios/nuevo"
               className={cn(

src/web/src/router.tsx

@@ -1,8 +1,13 @@
 import { Navigate, Route, Routes } from 'react-router-dom'
 import { useAuthStore } from './stores/authStore'
 import { ProtectedRoute } from './components/routing/ProtectedRoute'
+import { MustChangePasswordGate } from './components/routing/MustChangePasswordGate'
 import { LoginPage } from './features/auth/pages/LoginPage'
 import { CreateUserPage } from './features/users/pages/CreateUserPage'
+import { UsersListPage } from './features/users/pages/UsersListPage'
+import { UserDetailPage } from './features/users/pages/UserDetailPage'
+import { UserEditPage } from './features/users/pages/UserEditPage'
+import { ChangeMyPasswordPage } from './features/profile/pages/ChangeMyPasswordPage'
 import { RolesPage } from './features/roles/pages/RolesPage'
 import { NewRolPage } from './features/roles/pages/NewRolPage'
 import { EditRolPage } from './features/roles/pages/EditRolPage'
@@ -19,9 +24,30 @@ function PublicRoute({ children }: { children: React.ReactNode }) {
   return <>{children}</>
 }
 
+/**
+ * Wraps a protected route with ProtectedLayout + MustChangePasswordGate.
+ * The gate forces users with mustChangePassword=true to /perfil/contrasena.
+ */
+function ProtectedPage({
+  children,
+  requiredPermissions,
+}: {
+  children: React.ReactNode
+  requiredPermissions?: string[]
+}) {
+  return (
+    <ProtectedRoute requiredPermissions={requiredPermissions}>
+      <MustChangePasswordGate>
+        <ProtectedLayout>{children}</ProtectedLayout>
+      </MustChangePasswordGate>
+    </ProtectedRoute>
+  )
+}
+
 export function AppRoutes() {
   return (
     <Routes>
+      {/* Public routes */}
       <Route
         path="/login"
         element={
@@ -32,71 +58,102 @@ export function AppRoutes() {
           </PublicRoute>
         }
       />
+
+      {/* Change password — protected but NO MustChangePasswordGate (avoids redirect loop) */}
       <Route
-        path="/"
+        path="/perfil/contrasena"
         element={
           <ProtectedRoute>
             <ProtectedLayout>
-              <HomePage />
+              <ChangeMyPasswordPage />
             </ProtectedLayout>
           </ProtectedRoute>
         }
       />
+
+      {/* Protected routes — all wrapped with MustChangePasswordGate */}
+      <Route
+        path="/"
+        element={<ProtectedPage><HomePage /></ProtectedPage>}
+      />
+
+      <Route
+        path="/usuarios"
+        element={
+          <ProtectedPage requiredPermissions={['administracion:usuarios:gestionar']}>
+            <UsersListPage />
+          </ProtectedPage>
+        }
+      />
+
       <Route
         path="/usuarios/nuevo"
         element={
-          <ProtectedRoute requiredPermissions={['administracion:usuarios:gestionar']}>
+          <ProtectedPage requiredPermissions={['administracion:usuarios:gestionar']}>
-            <ProtectedLayout>
+            <CreateUserPage />
-              <CreateUserPage />
+          </ProtectedPage>
-            </ProtectedLayout>
-          </ProtectedRoute>
         }
       />
+
+      <Route
+        path="/usuarios/:id"
+        element={
+          <ProtectedPage requiredPermissions={['administracion:usuarios:gestionar']}>
+            <UserDetailPage />
+          </ProtectedPage>
+        }
+      />
+
+      <Route
+        path="/usuarios/:id/editar"
+        element={
+          <ProtectedPage requiredPermissions={['administracion:usuarios:gestionar']}>
+            <UserEditPage />
+          </ProtectedPage>
+        }
+      />
+
       <Route
         path="/admin/roles"
         element={
-          <ProtectedRoute requiredPermissions={['administracion:roles:gestionar']}>
+          <ProtectedPage requiredPermissions={['administracion:roles:gestionar']}>
-            <ProtectedLayout>
+            <RolesPage />
-              <RolesPage />
+          </ProtectedPage>
-            </ProtectedLayout>
-          </ProtectedRoute>
         }
       />
+
       <Route
         path="/admin/roles/nuevo"
         element={
-          <ProtectedRoute requiredPermissions={['administracion:roles:gestionar']}>
+          <ProtectedPage requiredPermissions={['administracion:roles:gestionar']}>
-            <ProtectedLayout>
+            <NewRolPage />
-              <NewRolPage />
+          </ProtectedPage>
-            </ProtectedLayout>
-          </ProtectedRoute>
         }
       />
+
       <Route
         path="/admin/roles/:codigo/editar"
         element={
-          <ProtectedRoute requiredPermissions={['administracion:roles:gestionar']}>
+          <ProtectedPage requiredPermissions={['administracion:roles:gestionar']}>
-            <ProtectedLayout>
+            <EditRolPage />
-              <EditRolPage />
+          </ProtectedPage>
-            </ProtectedLayout>
-          </ProtectedRoute>
         }
       />
+
       <Route
         path="/admin/permisos"
         element={
-          <ProtectedRoute
+          <ProtectedPage
             requiredPermissions={[
               'administracion:roles_permisos:gestionar',
               'administracion:permisos:ver',
             ]}
           >
-            <ProtectedLayout>
+            <RolPermisosPage />
-              <RolPermisosPage />
+          </ProtectedPage>
-            </ProtectedLayout>
-          </ProtectedRoute>
         }
       />
+
       <Route path="*" element={<Navigate to="/" replace />} />
     </Routes>
   )