docs/superpowers/specs/2026-07-02-admin-access-design.md

@@ -0,0 +1,73 @@
+# Diseño: Acceso al Panel de Administración
+
+## Resumen
+Añadir un botón de acceso al panel de administración en la página de perfil (pestaña "Usuario") que solo sea visible para usuarios con permisos de administrador.
+
+## Objetivo
+Proporcionar una forma intuitiva y consistente para que los usuarios administradores accedan al panel de administración desde la interfaz principal.
+
+## Requisitos
+1. El botón solo debe aparecer cuando el usuario tiene `is_admin: true`
+2. El botón debe seguir el mismo estilo que los otros elementos del menú del perfil
+3. Al hacer clic, debe navegar a la vista de administración existente
+4. No debe afectar la experiencia de usuarios no administradores
+
+## Diseño Detallado
+
+### Ubicación
+- **Página:** ProfileView (pestaña "Usuario" en BottomNav)
+- **Sección:** Dentro de `.profile-menu`, después de "Configuración de Texto"
+- **Posición:** Antes del botón "Cerrar Sesión"
+
+### Componente
+- **Tipo:** Botón con ícono, texto y chevron (igual que otros items del menú)
+- **Ícono:** Engranaje (⚙️) con fondo de color primario
+- **Texto:** "Panel de Administración"
+- **Estilo:** Idéntico a `.profile-menu-item` existente
+
+### Comportamiento
+1. **Renderizado condicional:**
+   ```jsx
+   {currentUser?.is_admin && (
+     <button className="profile-menu-item" onClick={onAdminClick}>
+       <div className="menu-item-icon menu-item-icon--primary">
+         <svg>...</svg>
+       </div>
+       <span className="menu-item-label">Panel de Administración</span>
+       <svg className="menu-item-chevron">...</svg>
+     </button>
+   )}
+   ```
+
+2. **Navegación:**
+   - Recibir función `onAdminClick` como prop
+   - En `App.jsx`, implementar `handleAdminClick` que cambie `screen` a `'admin'`
+
+### Cambios en Archivos
+
+#### 1. `frontend/src/views/ProfileView.jsx`
+- Añadir prop `onAdminClick`
+- Renderizar botón condicionalmente basado en `currentUser?.is_admin`
+
+#### 2. `frontend/src/App.jsx`
+- Añadir función `handleAdminClick` que establezca `screen` en `'admin'`
+- Pasar `onAdminClick={handleAdminClick}` a `ProfileView`
+
+### Estilos
+No se requieren cambios en CSS - se reutilizan las clases existentes:
+- `.profile-menu-item`
+- `.menu-item-icon--primary`
+- `.menu-item-label`
+- `.menu-item-chevron`
+
+## Criterios de Aceptación
+1. ✅ Botón visible solo para usuarios admin
+2. ✅ Botón no visible para usuarios normales
+3. ✅ Estilo consistente con otros elementos del menú
+4. ✅ Al hacer clic, navega a la vista de administración
+5. ✅ No se muestra en dispositivos móviles si el usuario no es admin
+
+## Impacto
+- **Archivos modificados:** 2 (`ProfileView.jsx`, `App.jsx`)
+- **Complejidad:** Baja
+- **Riesgo:** Mínimo - solo añade un elemento condicional