# 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