Now I have a full picture of the project. I need to:

1. Convert navigation to use routing with Next.js App Router
2. Create /app/cursos/page.tsx and /app/estudiantes/page.tsx
3. Update the sidebar to use Link for navigation
4. Expand the data layer with richer data for both views

Let me read the remaining component files I need to understand patterns:

Now let me start implementing. First, update the sidebar to use next/link and usePathname for active state, then expand data, then build both pages:

Now build the Cursos page with a full-featured course management view:

Listo. Se crearon dos vistas completas navegables desde el sidebar:

Vista de Cursos (/cursos) — tarjetas en cuadricula con barra de color por categoria, metricas (alumnos, rating, ingresos), progress bar de contenido, filtros por categoria y estado, toggle de vista lista/grid, y un modal de detalle al hacer clic en cualquier curso con descripcion completa, instructor, metricas y tags.

Vista de Estudiantes (/estudiantes) — tabla con ordenamiento por columnas (cursos, completado, gasto, actividad), filtros por estado (activo/inactivo/suspendido), barra de busqueda, y un panel lateral deslizante que muestra el perfil completo del estudiante con datos de contacto, estadisticas, progreso por curso y acciones rapidas.

El sidebar ahora usa next/link con usePathname para resaltar la seccion activa correctamente en cada pagina.

Good. Now I have the full picture. Let me also read the existing pages to understand their structure:

I have everything I need. Now let me execute all changes: update the color palette, then create the two new pages.

Color mapping:

• #A51C30 → primary (crimson red)
• #FFFCF2 → foreground / card foreground (warm white)
• #000000 → background (true black)
• #8996A0 → muted-foreground (blue-grey)

Now update the layout viewport theme color and data colors:

Now also update the category colors in the courses view to match the new palette:

Now create the Analytics page and its view component:

Now create the Configuracion page:

Se realizaron los siguientes cambios:

Paleta aplicada globalmente — #A51C30 como --primary (rojo carmesi), #FFFCF2 como --foreground (blanco calido), #000000 como --background (negro puro), #8996A0 como --muted-foreground (gris azulado). Todos los tokens CSS, colores de graficos y colores de categorias se actualizaron para seguir este sistema de forma consistente.

Pagina Analitica (/analitica) — dashboard completo con selector de periodo (7/30 dias, 3 y 12 meses), 4 KPIs con indicadores de cambio, grafico de area de ingresos e inscripciones, pie chart de categorias, barras comparativas de inscripcion vs. completado, curva de retencion semanal, tabla de top cursos por rendimiento y breakdown de acceso por dispositivo.

Pagina Configuracion (/configuracion) — navegacion lateral con 6 secciones: Perfil (avatar, formulario de datos, idioma y zona horaria), Notificaciones (toggles agrupados por categoria), Seguridad (cambio de contrasena, 2FA, sesiones activas, zona de peligro), Pagos (resumen de ingresos, metodo de cobro, datos fiscales), Plataforma (info general, moneda, formato y feature flags) e Integraciones (API key y 6 servicios externos con estado de conexion).