From 53dbbe5382360238ff0aa65b2e02df12eb69eb5b Mon Sep 17 00:00:00 2001
From: elmer <elmerjk.20@gmail.com>
Date: Tue, 10 Feb 2026 22:46:41 -0500
Subject: [PATCH] last_commits

---
 .../ReglaAreaProcesoController.php            |  322 ++++
 .../app/Http/Controllers/ExamenController.php |  500 ++++++
 .../Controllers/PostulanteAuthController.php  |  269 ++++
 back/app/Models/Area.php                      |    7 +-
 back/app/Models/AreaAdmision.php              |   32 +
 back/app/Models/Examen.php                    |   69 +
 back/app/Models/Pago.php                      |   23 +
 back/app/Models/Postulante.php                |   51 +
 back/app/Models/PreguntaAsignada.php          |   39 +
 back/app/Models/Proceso.php                   |   19 +-
 back/app/Models/ProcesoAdmision.php           |   35 +
 back/app/Models/ReglaAreaProceso.php          |   32 +
 back/app/Models/ResultadoAdmision.php         |   62 +
 back/app/Models/ResultadoAdmisionCarga.php    |  148 ++
 back/app/Services/ExamenService.php           |  164 ++
 back/config/auth.php                          |   10 +
 back/routes/api.php                           |   74 +
 front/package-lock.json                       |   47 +-
 front/public/logotiny.png                     |  Bin 0 -> 48191 bytes
 front/src/axiosPostulante.js                  |   32 +
 front/src/components/Footer.vue               |  167 ++
 front/src/components/HelloWorld.vue           | 1414 -----------------
 .../Postulante/VincularAcademia.vue           |  615 -------
 .../components/SuperAdmin/AcademiasList.vue   |  307 ----
 front/src/components/WebPage.vue              | 1140 +++++++++++++
 front/src/components/nabvar.vue               |  658 ++++++++
 front/src/router/index.js                     |  109 +-
 front/src/store/areacursoStore.js             |   74 -
 front/src/store/examen.store.js               |  139 ++
 front/src/store/postulanteStore.js            |  141 ++
 front/src/store/reglaAreaProceso.store.js     |  257 +++
 front/src/views/administrador/Dashboard.vue   |    2 +-
 .../administrador/Procesos/ReglasList.vue     |  769 +++++++++
 .../views/administrador/areas/AreasList.vue   |    8 +-
 .../src/views/administrador/layout/layout.vue |   15 +
 front/src/views/postulante/Dashboard.vue      |  355 +++++
 front/src/views/postulante/LoginView.vue      | 1284 +++++++++++++++
 front/src/views/postulante/Pagos.vue          |  128 ++
 front/src/views/postulante/PortalView.vue     | 1210 ++++++++++++++
 .../src/views/postulante/PreguntasExamen.vue  |  664 ++++++++
 front/src/views/postulante/Resultados.vue     |  827 ++++++++++
 41 files changed, 9753 insertions(+), 2465 deletions(-)
 create mode 100644 back/app/Http/Controllers/Administracion/ReglaAreaProcesoController.php
 create mode 100644 back/app/Http/Controllers/ExamenController.php
 create mode 100644 back/app/Http/Controllers/PostulanteAuthController.php
 create mode 100644 back/app/Models/AreaAdmision.php
 create mode 100644 back/app/Models/Examen.php
 create mode 100644 back/app/Models/Pago.php
 create mode 100644 back/app/Models/Postulante.php
 create mode 100644 back/app/Models/PreguntaAsignada.php
 create mode 100644 back/app/Models/ProcesoAdmision.php
 create mode 100644 back/app/Models/ReglaAreaProceso.php
 create mode 100644 back/app/Models/ResultadoAdmision.php
 create mode 100644 back/app/Models/ResultadoAdmisionCarga.php
 create mode 100644 back/app/Services/ExamenService.php
 create mode 100644 front/public/logotiny.png
 create mode 100644 front/src/axiosPostulante.js
 create mode 100644 front/src/components/Footer.vue
 delete mode 100644 front/src/components/HelloWorld.vue
 delete mode 100644 front/src/components/Postulante/VincularAcademia.vue
 delete mode 100644 front/src/components/SuperAdmin/AcademiasList.vue
 create mode 100644 front/src/components/WebPage.vue
 create mode 100644 front/src/components/nabvar.vue
 delete mode 100644 front/src/store/areacursoStore.js
 create mode 100644 front/src/store/examen.store.js
 create mode 100644 front/src/store/postulanteStore.js
 create mode 100644 front/src/store/reglaAreaProceso.store.js
 create mode 100644 front/src/views/administrador/Procesos/ReglasList.vue
 create mode 100644 front/src/views/postulante/Dashboard.vue
 create mode 100644 front/src/views/postulante/LoginView.vue
 create mode 100644 front/src/views/postulante/Pagos.vue
 create mode 100644 front/src/views/postulante/PortalView.vue
 create mode 100644 front/src/views/postulante/PreguntasExamen.vue
 create mode 100644 front/src/views/postulante/Resultados.vue

diff --git a/back/app/Http/Controllers/Administracion/ReglaAreaProcesoController.php b/back/app/Http/Controllers/Administracion/ReglaAreaProcesoController.php
new file mode 100644
index 0000000..f80fdf9
--- /dev/null
+++ b/back/app/Http/Controllers/Administracion/ReglaAreaProcesoController.php
@@ -0,0 +1,322 @@
+<?php
+
+namespace App\Http\Controllers\Administracion;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use App\Models\AreaProceso;
+use App\Models\Proceso;
+use App\Models\ReglaAreaProceso;
+use Illuminate\Support\Facades\DB;
+
+class ReglaAreaProcesoController extends Controller
+{
+    /**
+     * Mostrar cursos de un area_proceso con reglas existentes
+     */
+
+
+
+    public function areasProcesos()
+    {
+        $areasProcesos = DB::table('area_proceso as ap')
+            ->leftJoin('reglas_area_proceso as r', 'ap.id', '=', 'r.area_proceso_id')
+            ->leftJoin('area_curso as ac', 'ap.area_id', '=', 'ac.area_id') // pivot area_curso
+            ->leftJoin('cursos as c', 'ac.curso_id', '=', 'c.id')          // unimos los cursos reales
+            ->join('areas as a', 'ap.area_id', '=', 'a.id')
+            ->join('procesos as p', 'ap.proceso_id', '=', 'p.id')
+            ->select(
+                'ap.id',
+                'ap.area_id',
+                'ap.proceso_id',
+                'a.nombre as area_nombre',
+                'p.nombre as proceso_nombre',
+                DB::raw('COUNT(DISTINCT r.id) as reglas_count'),
+                DB::raw('COUNT(DISTINCT c.id) as cursos_count')
+            )
+            ->groupBy('ap.id', 'ap.area_id', 'ap.proceso_id', 'a.nombre', 'p.nombre')
+            ->get();
+
+        return response()->json([
+            'areaProcesos' => $areasProcesos
+        ]);
+    }
+
+
+
+
+
+public function index($areaProcesoId)
+{
+    // Obtener el area_proceso y su proceso
+    $areaProceso = DB::table('area_proceso as ap')
+        ->join('areas as a', 'a.id', '=', 'ap.area_id')
+        ->join('procesos as p', 'p.id', '=', 'ap.proceso_id')
+        ->where('ap.id', $areaProcesoId)
+        ->select('ap.id as area_proceso_id', 'a.id as area_id', 'a.nombre as area_nombre', 
+                 'p.id as proceso_id', 'p.nombre as proceso_nombre', 'p.duracion as cantidad_total_preguntas')
+        ->first();
+
+    if (!$areaProceso) {
+        return response()->json(['error' => 'AreaProceso no encontrado'], 404);
+    }
+
+    // Traer todos los cursos del área (pivot area_curso)
+    $cursos = DB::table('area_curso as ac')
+        ->join('cursos as c', 'c.id', '=', 'ac.curso_id')
+        ->where('ac.area_id', $areaProceso->area_id)
+        ->select('c.id as curso_id', 'c.nombre as nombre')
+        ->get();
+
+    // Traer reglas existentes para este area_proceso
+    $reglasExistentes = DB::table('reglas_area_proceso')
+        ->where('area_proceso_id', $areaProcesoId)
+        ->get();
+
+    // Mapear cursos con reglas si existen
+    $reglas = $cursos->map(function ($curso) use ($reglasExistentes) {
+        $regla = $reglasExistentes->firstWhere('curso_id', $curso->curso_id);
+        return [
+            'curso_id' => $curso->curso_id,
+            'nombre' => $curso->nombre,
+            'regla_id' => $regla->id ?? null,
+            'orden' => $regla->orden ?? null,
+            'cantidad_preguntas' => $regla->cantidad_preguntas ?? null,
+            'nivel_dificultad' => $regla->nivel_dificultad ?? 'medio',
+            'ponderacion' => $regla->ponderacion ?? null,
+        ];
+    })->sortBy('orden')->values();
+
+    return response()->json([
+        'area_proceso_id' => $areaProceso->area_proceso_id,
+        'proceso' => [
+            'id' => $areaProceso->proceso_id,
+            'nombre' => $areaProceso->proceso_nombre,
+            'cantidad_total_preguntas' => $areaProceso->cantidad_total_preguntas,
+        ],
+        'cursos' => $reglas,
+        'total_preguntas_asignadas' => $reglasExistentes->sum('cantidad_preguntas'),
+    ]);
+}
+
+public function store(Request $request, $areaProcesoId)
+{
+    $request->validate([
+        'curso_id' => 'required|exists:cursos,id',
+        'cantidad_preguntas' => 'required|integer|min:0',
+        'orden' => 'required|integer|min:1',
+        'nivel_dificultad' => 'nullable|string|in:bajo,medio,alto',
+        'ponderacion' => 'nullable|numeric|min:0|max:100',
+    ]);
+
+    // 🔹 Cantidad total de preguntas del proceso (vía pivot)
+    $areaProceso = DB::table('area_proceso as ap')
+        ->join('procesos as p', 'ap.proceso_id', '=', 'p.id')
+        ->where('ap.id', $areaProcesoId)
+        ->select('p.cantidad_pregunta')
+        ->first();
+
+    if (!$areaProceso) {
+        return response()->json([
+            'error' => 'No se encontró el proceso asociado al área'
+        ], 404);
+    }
+
+    $totalPreguntasProceso = $areaProceso->cantidad_pregunta;
+
+    // 🔹 Total ya asignado (excluyendo este curso si ya existe)
+    $totalAsignado = DB::table('reglas_area_proceso')
+        ->where('area_proceso_id', $areaProcesoId)
+        ->where('curso_id', '!=', $request->curso_id)
+        ->sum('cantidad_preguntas');
+
+    $totalNuevo = $totalAsignado + $request->cantidad_preguntas;
+
+    if ($totalNuevo > $totalPreguntasProceso) {
+        return response()->json([
+            'error' => 'Excede la cantidad total de preguntas del proceso. Disponible: ' .
+                ($totalPreguntasProceso - $totalAsignado)
+        ], 422);
+    }
+
+    // 🔹 Insertar o actualizar UNA regla
+    DB::table('reglas_area_proceso')->updateOrInsert(
+        [
+            'area_proceso_id' => $areaProcesoId,
+            'curso_id' => $request->curso_id,
+        ],
+        [
+            'cantidad_preguntas' => $request->cantidad_preguntas,
+            'orden' => $request->orden,
+            'nivel_dificultad' => $request->nivel_dificultad ?? 'medio',
+            'ponderacion' => $request->ponderacion ?? 0,
+            'updated_at' => now(),
+            'created_at' => now(),
+        ]
+    );
+
+    $totalAsignadoFinal = DB::table('reglas_area_proceso')
+        ->where('area_proceso_id', $areaProcesoId)
+        ->sum('cantidad_preguntas');
+
+    return response()->json([
+        'success' => true,
+        'message' => 'Regla guardada correctamente',
+        'total_preguntas_asignadas' => $totalAsignadoFinal,
+        'preguntas_disponibles' => $totalPreguntasProceso - $totalAsignadoFinal,
+    ]);
+}
+
+
+public function update(Request $request, $reglaId)
+{
+    $request->validate([
+        'cantidad_preguntas' => 'required|integer|min:0',
+        'orden' => 'required|integer|min:1',
+        'nivel_dificultad' => 'nullable|string|in:bajo,medio,alto',
+        'ponderacion' => 'nullable|numeric|min:0|max:100',
+    ]);
+
+    // 🔹 Obtener la regla actual
+    $regla = DB::table('reglas_area_proceso')
+        ->where('id', $reglaId)
+        ->first();
+
+    if (!$regla) {
+        return response()->json([
+            'error' => 'La regla no existe'
+        ], 404);
+    }
+
+    // 🔹 Obtener cantidad total de preguntas del proceso (vía pivot)
+    $areaProceso = DB::table('area_proceso as ap')
+        ->join('procesos as p', 'ap.proceso_id', '=', 'p.id')
+        ->where('ap.id', $regla->area_proceso_id)
+        ->select('p.cantidad_pregunta')
+        ->first();
+
+    if (!$areaProceso) {
+        return response()->json([
+            'error' => 'No se encontró el proceso asociado al área'
+        ], 404);
+    }
+
+    $totalPreguntasProceso = $areaProceso->cantidad_pregunta;
+
+    // 🔹 Total asignado EXCLUYENDO esta regla
+    $totalAsignado = DB::table('reglas_area_proceso')
+        ->where('area_proceso_id', $regla->area_proceso_id)
+        ->where('id', '!=', $reglaId)
+        ->sum('cantidad_preguntas');
+
+    $totalNuevo = $totalAsignado + $request->cantidad_preguntas;
+
+    if ($totalNuevo > $totalPreguntasProceso) {
+        return response()->json([
+            'error' => 'Excede la cantidad total de preguntas del proceso. Disponible: ' .
+                ($totalPreguntasProceso - $totalAsignado)
+        ], 422);
+    }
+
+    // 🔹 Actualizar la regla
+    DB::table('reglas_area_proceso')
+        ->where('id', $reglaId)
+        ->update([
+            'cantidad_preguntas' => $request->cantidad_preguntas,
+            'orden' => $request->orden,
+            'nivel_dificultad' => $request->nivel_dificultad ?? 'medio',
+            'ponderacion' => $request->ponderacion ?? 0,
+            'updated_at' => now(),
+        ]);
+
+    $totalAsignadoFinal = DB::table('reglas_area_proceso')
+        ->where('area_proceso_id', $regla->area_proceso_id)
+        ->sum('cantidad_preguntas');
+
+    return response()->json([
+        'success' => true,
+        'message' => 'Regla actualizada correctamente',
+        'total_preguntas_asignadas' => $totalAsignadoFinal,
+        'preguntas_disponibles' => $totalPreguntasProceso - $totalAsignadoFinal,
+    ]);
+}
+
+    /**
+     * Eliminar una regla
+     */
+    public function destroy($reglaId)
+    {
+        $regla = ReglaAreaProceso::findOrFail($reglaId);
+        $areaProcesoId = $regla->area_proceso_id;
+        
+        $regla->delete();
+
+        return response()->json([
+            'success' => true,
+            'message' => 'Regla eliminada correctamente',
+            'total_preguntas_asignadas' => ReglaAreaProceso::where('area_proceso_id', $areaProcesoId)
+                ->sum('cantidad_preguntas'),
+        ]);
+    }
+
+
+
+public function storeMultiple(Request $request, $areaProcesoId)
+{
+    $request->validate([
+        'reglas' => 'required|array',
+        'reglas.*.curso_id' => 'required|exists:cursos,id',
+        'reglas.*.cantidad_preguntas' => 'required|integer|min:0',
+        'reglas.*.orden' => 'required|integer|min:1',
+        'reglas.*.nivel_dificultad' => 'nullable|string|in:bajo,medio,alto',
+        'reglas.*.ponderacion' => 'nullable|numeric|min:0|max:100',
+    ]);
+
+    // Obtener la cantidad total de preguntas del proceso a través del pivot
+    $areaProceso = DB::table('area_proceso as ap')
+        ->join('procesos as p', 'ap.proceso_id', '=', 'p.id')
+        ->where('ap.id', $areaProcesoId)
+        ->select('p.cantidad_pregunta')
+        ->first();
+
+    $totalPreguntasProceso = $areaProceso->cantidad_pregunta ?? 0;
+
+    // Validar total de preguntas asignadas
+    $totalNuevo = collect($request->reglas)->sum('cantidad_preguntas');
+    if ($totalNuevo > $totalPreguntasProceso) {
+        return response()->json([
+            'error' => 'Excede la cantidad total de preguntas del proceso. Máximo permitido: ' . $totalPreguntasProceso
+        ], 422);
+    }
+
+    // Eliminar reglas existentes directamente en la tabla pivot
+    DB::table('reglas_area_proceso')->where('area_proceso_id', $areaProcesoId)->delete();
+
+    // Insertar las nuevas reglas
+    $insertData = collect($request->reglas)->map(function ($r) use ($areaProcesoId) {
+        return [
+            'area_proceso_id' => $areaProcesoId,
+            'curso_id' => $r['curso_id'],
+            'cantidad_preguntas' => $r['cantidad_preguntas'],
+            'orden' => $r['orden'],
+            'nivel_dificultad' => $r['nivel_dificultad'] ?? 'medio',
+            'ponderacion' => $r['ponderacion'] ?? 0,
+            'created_at' => now(),
+            'updated_at' => now(),
+        ];
+    })->toArray();
+
+    if (!empty($insertData)) {
+        DB::table('reglas_area_proceso')->insert($insertData);
+    }
+
+    return response()->json([
+        'success' => true,
+        'message' => 'Reglas guardadas correctamente',
+        'total_preguntas_asignadas' => $totalNuevo,
+        'preguntas_disponibles' => $totalPreguntasProceso - $totalNuevo,
+    ]);
+}
+
+
+}
\ No newline at end of file
diff --git a/back/app/Http/Controllers/ExamenController.php b/back/app/Http/Controllers/ExamenController.php
new file mode 100644
index 0000000..a6dff66
--- /dev/null
+++ b/back/app/Http/Controllers/ExamenController.php
@@ -0,0 +1,500 @@
+<?php
+
+namespace App\Http\Controllers;
+use App\Models\Postulante;
+use App\Models\Proceso;
+use App\Models\Area;
+use App\Models\Curso;
+use App\Models\Pregunta;
+use App\Models\Alternativa;
+use App\Models\Examen;
+use App\Models\PreguntaAsignada;
+use App\Models\AlternativaAsignada;
+use App\Models\DetalleResultado;
+use App\Models\RespuestaPostulante;
+use App\Models\ResultadoExamen;
+use App\Models\Recomendaciones;
+use App\Models\Pago;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Log;
+use Illuminate\Support\Facades\Storage;
+use Illuminate\Support\Facades\Http;
+use App\Services\ExamenService;
+
+class ExamenController extends Controller
+{
+
+    protected $examenService;
+
+    public function __construct(ExamenService $examenService)
+    {
+        $this->examenService = $examenService;
+    }
+public function procesoexamen(Request $request)
+{
+    $postulante = $request->user();
+
+    $procesos = Proceso::where('activo', 1)
+        ->whereNotExists(function ($q) use ($postulante) {
+            $q->select(\DB::raw(1))
+              ->from('examenes')
+              ->join('area_proceso', 'area_proceso.id', '=', 'examenes.area_proceso_id')
+              ->whereColumn('area_proceso.proceso_id', 'procesos.id')
+              ->where('examenes.postulante_id', $postulante->id);
+        })
+        ->select('id', 'nombre', 'requiere_pago')
+        ->get();
+
+    return response()->json($procesos);
+}
+
+    
+public function areas(Request $request)
+{
+    $procesoId = $request->query('proceso_id');
+
+    $areas = Area::select('areas.id', 'areas.nombre')
+        ->whereHas('procesos', function ($query) use ($procesoId) {
+            $query->where('procesos.id', $procesoId)
+                  ->where('procesos.activo', 1);
+        })
+        ->with(['procesos' => function ($q) use ($procesoId) {
+            $q->where('procesos.id', $procesoId)
+              ->select('procesos.id')
+              ->withPivot('id', 'proceso_id', 'area_id');
+        }])
+        ->get()
+        ->map(function ($area) {
+            $pivot = $area->procesos->first()->pivot;
+
+            return [
+                'area_id'          => $area->id,
+                'nombre'           => $area->nombre,
+                'area_proceso_id'  => $pivot->id, // 🔥 CLAVE
+            ];
+        });
+
+    return response()->json($areas);
+}
+
+
+    
+public function crearExamen(Request $request)
+{
+    $postulante = $request->user();
+
+    $request->validate([
+        'area_proceso_id' => 'required|exists:area_proceso,id',
+    ]);
+
+    // 🔥 Obtener TODO desde el pivot
+    $areaProceso = \DB::table('area_proceso')
+        ->join('procesos', 'procesos.id', '=', 'area_proceso.proceso_id')
+        ->join('areas', 'areas.id', '=', 'area_proceso.area_id')
+        ->where('area_proceso.id', $request->area_proceso_id)
+        ->select(
+            'area_proceso.id',
+            'area_proceso.area_id',
+            'area_proceso.proceso_id',
+            'procesos.requiere_pago'
+        )
+        ->first();
+
+    if (!$areaProceso) {
+        return response()->json(['message' => 'Relación área-proceso inválida'], 400);
+    }
+
+    $yaDioProceso = Examen::join('area_proceso', 'area_proceso.id', '=', 'examenes.area_proceso_id')
+    ->where('examenes.postulante_id', $postulante->id)
+    ->where('area_proceso.proceso_id', $areaProceso->proceso_id)
+    ->exists();
+
+    if ($yaDioProceso) {
+        return response()->json([
+            'message' => 'Ya rendiste un examen para este proceso'
+        ], 400);
+    }
+
+    $pagado = 0;
+    $pagoId = null;
+
+    // 💰 Validación de pago
+    if ($areaProceso->requiere_pago) {
+        $request->validate([
+            'tipo_pago'   => 'required|in:pyto_peru,banco_nacion,caja',
+            'codigo_pago' => 'required',
+        ]);
+
+        $response = $this->validarPago(
+            $request->tipo_pago,
+            $request->codigo_pago,
+            $postulante->dni
+        );
+
+        if (!$response['estado']) {
+            return response()->json(['message' => 'Pago inválido'], 400);
+        }
+
+        $pago = Pago::firstOrCreate(
+            [
+                'codigo_pago' => $request->codigo_pago,
+                'tipo_pago' => $request->tipo_pago,
+            ],
+            [
+                'postulante_id' => $postulante->id,
+                'monto' => $response['monto'],
+                'fecha_pago' => $response['fecha_pago'],
+            ]
+        );
+
+        if ($pago->utilizado) {
+            return response()->json(['message' => 'Pago ya utilizado'], 400);
+        }
+
+        $pago->update(['utilizado' => true]);
+
+        $pagado = 1;
+        $pagoId = $pago->id;
+    }
+
+    // 🧠 Crear / actualizar examen
+    $examen = Examen::updateOrCreate(
+        ['postulante_id' => $postulante->id,
+        'area_proceso_id' => $areaProceso->id, // 🔥 pivot
+        'pagado' => $pagado,
+        'tipo_pago' => $request->tipo_pago ?? null,
+        'pago_id' => $pagoId,
+        ]
+    );
+
+    return response()->json([
+        'success' => true,
+        'examen_id' => $examen->id,
+        'mensaje' => 'Examen creado correctamente',
+    ]);
+}
+
+
+    public function validarPago($tipoPago, $codigoPago, $dni)
+    {
+        return match ($tipoPago) {
+            'pyto_peru'     => $this->validarPagoPytoPeru($codigoPago, $dni),
+            'banco_nacion'  => $this->validarPagoBancoNacion($codigoPago, $dni),
+            'caja'          => $this->validarPagoCaja($codigoPago, $dni),
+            default         => ['estado' => false],
+        };
+    }
+
+    private function validarPagoBancoNacion($secuencia, $dni)
+    {
+        $url = 'https://inscripciones.admision.unap.edu.pe/api/get-pagos-banco-secuencia';
+
+        $response = Http::post($url, [
+            'secuencia' => $secuencia,
+        ]);
+        
+        if (!$response->successful()) {
+            \Log::error('Error en la solicitud a la API', ['status' => $response->status(), 'body' => $response->body()]);
+            return ['estado' => false, 'message' => 'Error en la solicitud a la API'];
+        }
+        
+        $data = $response->json();
+        
+        if (isset($data['estado']) && $data['estado'] === true) {
+            foreach ($data['datos'] as $pago) {
+                if (isset($pago['dni']) && trim($pago['dni']) == trim($dni)) {
+                    return [
+                        'estado' => true,
+                        'monto' => $pago['imp_pag'],
+                        'fecha_pago' => $pago['fch_pag'],
+                    ];
+                }
+            }
+        }
+        
+        return ['estado' => false, 'message' => 'Datos no válidos o no encontrados'];
+    }
+ 
+    private function validarPagoPytoPeru($authorizationCode, $dni)
+    {
+        $url = "https://service2.unap.edu.pe/PAYMENTS_MNG/v1/{$dni}/8/";
+        $response = Http::get($url);
+    
+        if ($response->successful()) {
+            $data = $response->json();
+            
+            
+            if (isset($data['data'][0]['autorizationCode']) && $data['data'][0]['autorizationCode'] === $authorizationCode) {
+                return [
+                    'estado' => true,
+                    'monto' => $data['data'][0]['total'], 
+                    'fecha_pago' => $data['data'][0]['confirmedDate'], 
+                ];
+            }
+        }
+    
+        return ['estado' => false, 'message' => 'El código de autorización no coincide.'];
+    }
+
+    private function validarPagoCaja($codigoPago, $dni)
+    {
+        $url = "https://inscripciones.admision.unap.edu.pe/api/get-pago-caja/{$dni}/{$codigoPago}";
+
+        $response = Http::get($url);
+
+        if (!$response->successful()) {
+            \Log::error('Error API Caja', [
+                'status' => $response->status(),
+                'body' => $response->body()
+            ]);
+            return ['estado' => false, 'message' => 'Error en la API de Caja'];
+        }
+
+        $data = $response->json();
+
+        if (
+            isset($data['paymentTitle'], $data['paymentAmount'], $data['paymentDatetime']) &&
+            trim($data['paymentTitle']) === trim($codigoPago)
+        ) {
+            return [
+                'estado' => true,
+                'monto' => (float) $data['paymentAmount'],
+                'fecha_pago' => $data['paymentDatetime'],
+            ];
+        }
+
+        return ['estado' => false, 'message' => 'Pago no válido o no encontrado'];
+    }
+    
+public function miExamenActual(Request $request)
+{
+    $postulante = $request->user();
+
+    // Obtenemos el examen más reciente junto con área y proceso usando joins
+    $examen = Examen::join('area_proceso', 'area_proceso.id', '=', 'examenes.area_proceso_id')
+        ->join('areas', 'areas.id', '=', 'area_proceso.area_id')
+        ->join('procesos', 'procesos.id', '=', 'area_proceso.proceso_id')
+        ->where('examenes.postulante_id', $postulante->id)
+        ->select(
+            'examenes.id',
+            'examenes.pagado',
+            'examenes.tipo_pago',
+            'examenes.intentos',                      // intentos del examen
+            'areas.id as area_id',
+            'areas.nombre as area_nombre',
+            'procesos.id as proceso_id',
+            'procesos.nombre as proceso_nombre',
+            'procesos.intentos_maximos as proceso_intentos_maximos' // intentos máximos del proceso
+        )
+        ->latest('examenes.created_at') // solo el más reciente
+        ->first();
+
+    if (!$examen) {
+        return response()->json([
+            'success' => true,
+            'mensaje' => 'No tienes exámenes asignados actualmente',
+            'examen' => null
+        ]);
+    }
+
+    return response()->json([
+        'success' => true,
+        'examen' => [
+            'id' => $examen->id,
+            'intentos' => $examen->intentos,
+            'intentos_maximos' => $examen->proceso_intentos_maximos,
+            'proceso' => [
+                'id' => $examen->proceso_id,
+                'nombre' => $examen->proceso_nombre,
+            ],
+            'area' => [
+                'id' => $examen->area_id,
+                'nombre' => $examen->area_nombre,
+            ],
+            'pagado' => $examen->pagado,
+            'tipo_pago' => $examen->tipo_pago ?? null,
+        ]
+    ]);
+}
+
+
+
+    
+/**
+ * 2. GENERAR PREGUNTAS PARA EXAMEN (si no las tiene)
+ */
+public function generarPreguntas($examenId)
+{
+    $examen = Examen::findOrFail($examenId);
+
+    // Verificar que el examen pertenece al usuario autenticado
+    $postulante = request()->user();
+    if ($examen->postulante_id !== $postulante->id) {
+        return response()->json([
+            'success' => false,
+            'message' => 'No autorizado'
+        ], 403);
+    }
+
+    // Si YA tiene preguntas, no generar nuevas, solo confirmar éxito
+    if ($examen->preguntasAsignadas()->exists()) {
+        return response()->json([
+            'success' => true,
+            'message' => 'El examen ya tiene preguntas generadas',
+            'ya_tiene_preguntas' => true,
+            'total_preguntas' => $examen->preguntasAsignadas()->count()
+        ]);
+    }
+
+    // Si NO tiene preguntas, generar usando el servicio
+    $resultado = $this->examenService->generarPreguntasExamen($examen);
+
+    if (!$resultado['success']) {
+        return response()->json($resultado, 400);
+    }
+
+    return response()->json([
+        'success' => true,
+        'message' => 'Preguntas generadas exitosamente',
+        'ya_tiene_preguntas' => false,
+        'total_preguntas' => $examen->preguntasAsignadas()->count()
+    ]);
+}
+
+
+    /**
+     * 4. INICIAR EXAMEN (marcar hora inicio)
+     */
+public function iniciarExamen(Request $request)
+{
+    $request->validate([
+        'examen_id' => 'required|exists:examenes,id'
+    ]);
+
+    $examen = Examen::findOrFail($request->examen_id);
+
+    // Verificar que el examen pertenece al usuario autenticado
+    $postulante = $request->user();
+    if ($examen->postulante_id !== $postulante->id) {
+        return response()->json([
+            'success' => false,
+            'message' => 'No autorizado'
+        ], 403);
+    }
+
+    // Traer datos del área-proceso directamente desde la DB
+    $areaProceso = \DB::table('area_proceso')
+        ->join('procesos', 'area_proceso.proceso_id', '=', 'procesos.id')
+        ->join('areas', 'area_proceso.area_id', '=', 'areas.id')
+        ->where('area_proceso.id', $examen->area_proceso_id)
+        ->select(
+            'procesos.id as proceso_id',
+            'procesos.nombre as proceso_nombre',
+            'procesos.duracion as proceso_duracion',
+            'procesos.intentos_maximos as proceso_intentos_maximos',
+            'areas.nombre as area_nombre'
+        )
+        ->first();
+
+    // Verificar que tenga preguntas
+    if (!$examen->preguntasAsignadas()->exists()) {
+        return response()->json([
+            'success' => false,
+            'message' => 'El examen no tiene preguntas generadas'
+        ], 400);
+    }
+
+    // Verificar que no exceda el número máximo de intentos
+    if ($areaProceso && $examen->intentos >= $areaProceso->proceso_intentos_maximos) {
+        return response()->json([
+            'success' => false,
+            'message' => 'Has alcanzado el número máximo de intentos para este proceso'
+        ], 403);
+    }
+
+    // Marcar hora inicio si no está iniciado
+    if (!$examen->hora_inicio) {
+        $examen->update([
+            'hora_inicio' => now(),
+            'estado' => 'en_progreso',
+            'intentos' => $examen->intentos + 1
+        ]);
+    }
+
+    // Obtener preguntas con toda la información
+    $preguntas = $this->examenService->obtenerPreguntasExamen($examen);
+
+    return response()->json([
+        'success' => true,
+        'examen' => [
+            'id' => $examen->id,
+            'estado' => $examen->estado,
+            'hora_inicio' => $examen->hora_inicio,
+            'intentos' => $examen->intentos,
+            'intentos_maximos' => $areaProceso->proceso_intentos_maximos ?? null,
+            'proceso' => $areaProceso->proceso_nombre ?? null,
+            'duracion' => $areaProceso->proceso_duracion ?? null,
+            'area' => $areaProceso->area_nombre ?? null
+        ],
+        'preguntas' => $preguntas
+    ]);
+}
+
+
+    /**
+     * 5. RESPONDER PREGUNTA
+     */
+    public function responderPregunta($preguntaAsignadaId, Request $request)
+    {
+        $request->validate([
+            'respuesta' => 'required|string'
+        ]);
+
+        $preguntaAsignada = PreguntaAsignada::with(['examen', 'pregunta'])
+            ->findOrFail($preguntaAsignadaId);
+
+        // Verificar que pertenece al usuario
+        $postulante = $request->user();
+        if ($preguntaAsignada->examen->postulante_id !== $postulante->id) {
+            return response()->json([
+                'success' => false,
+                'message' => 'No autorizado'
+            ], 403);
+        }
+
+        // Guardar respuesta
+        $resultado = $this->examenService->guardarRespuesta(
+            $preguntaAsignada,
+            $request->respuesta
+        );
+
+        return response()->json($resultado);
+    }
+
+    /**
+     * 6. FINALIZAR EXAMEN
+     */
+    public function finalizarExamen($examenId)
+    {
+        $examen = Examen::findOrFail($examenId);
+
+        // Verificar que el examen pertenece al usuario autenticado
+        $postulante = request()->user();
+        if ($examen->postulante_id !== $postulante->id) {
+            return response()->json([
+                'success' => false,
+                'message' => 'No autorizado'
+            ], 403);
+        }
+
+        $this->examenService->finalizarExamen($examen);
+
+        return response()->json([
+            'success' => true,
+            'message' => 'Examen finalizado exitosamente'
+        ]);
+    }
+
+
+}
\ No newline at end of file
diff --git a/back/app/Http/Controllers/PostulanteAuthController.php b/back/app/Http/Controllers/PostulanteAuthController.php
new file mode 100644
index 0000000..7e07c69
--- /dev/null
+++ b/back/app/Http/Controllers/PostulanteAuthController.php
@@ -0,0 +1,269 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use App\Models\Postulante;
+use Illuminate\Support\Facades\Hash;
+use Illuminate\Support\Facades\Validator;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Log;
+use Illuminate\Support\Str;
+use Illuminate\Support\Facades\Http;
+class PostulanteAuthController extends Controller
+{
+    /**
+     * Registro de postulante (normal) con DNI
+     */
+    public function register(Request $request)
+    {
+        $validator = Validator::make($request->all(), [
+            'name' => 'required|string|max:255|regex:/^[\pL\s\-]+$/u',
+            'email' => 'required|email|unique:postulantes,email|max:255',
+            'password' => [
+                'required',
+                'string',
+                'min:8',
+                'confirmed',
+                'regex:/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/'
+            ],
+            'dni' => 'required|string|max:20|unique:postulantes,dni',
+        ], [
+            'password.regex' => 'La contraseña debe contener al menos una mayúscula, una minúscula, un número y un carácter especial.',
+            'name.regex' => 'El nombre solo puede contener letras y espacios.',
+        ]);
+
+        if ($validator->fails()) {
+            return response()->json(['success' => false, 'errors' => $validator->errors()], 422);
+        }
+
+        $postulante = Postulante::create([
+            'name' => strip_tags(trim($request->name)),
+            'email' => strtolower(trim($request->email)),
+            'password' => $request->password,
+            'dni' => $request->dni,
+        ]);
+
+        Log::info('Postulante registrado', ['id' => $postulante->id, 'dni' => $postulante->dni]);
+
+        return response()->json(['success' => true, 'message' => 'Postulante registrado exitosamente', 'postulante' => $postulante], 201);
+    }
+
+    public function login(Request $request)
+    {
+        $validator = Validator::make($request->all(), [
+            'email' => 'required|email|max:255',
+            'password' => 'required|string',
+        ]);
+
+        if ($validator->fails()) {
+            return response()->json(['success' => false, 'errors' => $validator->errors()], 422);
+        }
+
+        $email = strtolower(trim($request->email));
+
+        $postulante = Postulante::where('email', $email)->first();
+
+        if (!$postulante || !Hash::check($request->password, $postulante->password)) {
+            Log::warning('Intento de login fallido', ['email' => $email]);
+            return response()->json([
+                'success' => false,
+                'message' => 'Credenciales inválidas'
+            ], 401);
+        }
+
+        $deviceId = $request->header('Device-Id') ?? Str::random(10);
+
+        // Revocar tokens antiguos
+        $postulante->tokens()->delete();
+
+        // Crear token
+        $token = $postulante
+            ->createToken($deviceId, ['*'], now()->addHour())
+            ->plainTextToken;
+
+        $postulante->update([
+            'device_id' => $deviceId,
+            'last_activity' => now()
+        ]);
+
+        Log::info('Login exitoso', ['id' => $postulante->id]);
+
+        return response()->json([
+            'success' => true,
+            'message' => 'Login exitoso',
+            'postulante' => [
+                'id' => $postulante->id,
+                'name' => $postulante->name,
+                'email' => $postulante->email,
+                'dni' => $postulante->dni
+            ],
+            'token' => $token,
+            'token_type' => 'Bearer',
+            'expires_in' => 3600
+        ]);
+    }
+
+    /**
+     * Logout
+     */
+    public function logout(Request $request)
+    {
+        $postulante = $request->user();
+        if ($postulante) {
+            $postulante->tokens()->delete();
+            $postulante->device_id = null;
+            $postulante->last_activity = null;
+            $postulante->save();
+        }
+
+        return response()->json(['success' => true, 'message' => 'Sesión cerrada correctamente']);
+    }
+
+    /**
+     * Información del postulante logueado
+     */
+    public function me(Request $request)
+    {
+        $postulante = $request->user();
+        if (!$postulante) {
+            return response()->json(['success' => false, 'message' => 'No autenticado'], 401);
+        }
+
+        // Actualizar última actividad al hacer request
+        $postulante->update(['last_activity' => now()]);
+
+        return response()->json([
+            'success' => true,
+            'postulante' => [
+                'id' => $postulante->id,
+                'name' => $postulante->name,
+                'email' => $postulante->email,
+                'dni' => $postulante->dni
+            ]
+        ]);
+    }
+
+
+public function obtenerPagosPostulante(Request $request)
+    {
+        $postulante = $request->user(); // o Auth::guard('postulante')->user();
+
+        if (!$postulante) {
+            return response()->json([
+                'success' => false,
+                'message' => 'No autenticado'
+            ], 401);
+        }
+
+        $dni = trim($postulante->dni);
+
+        $pagos = [];
+
+        // ===============================
+        // 1️⃣ PAGOS PYTO PERÚ
+        // ===============================
+        $urlPyto = "https://service2.unap.edu.pe/PAYMENTS_MNG/v1/{$dni}/8/";
+        $responsePyto = Http::get($urlPyto);
+
+        if ($responsePyto->successful()) {
+            $dataPyto = $responsePyto->json();
+
+            if (!empty($dataPyto['data'])) {
+                foreach ($dataPyto['data'] as $pago) {
+                    $pagos[] = [
+                        'tipo' => 'pyto_peru',
+                        'codigo' => $pago['autorizationCode'] ?? null,
+                        'monto' => $pago['total'] ?? null,
+                        'fecha_pago' => $pago['confirmedDate'] ?? null,
+                        'estado' => true,
+                        'raw' => $pago // devuelve toda la info original
+                    ];
+                }
+            }
+        }
+
+        // ===============================
+        // 2️⃣ PAGOS CAJA
+        // ===============================
+        $urlCaja = "https://inscripciones.admision.unap.edu.pe/api/get-pagos-caja-dni/{$dni}";
+        $responseCaja = Http::get($urlCaja);
+
+        if ($responseCaja->successful()) {
+            $dataCaja = $responseCaja->json();
+
+            if (!empty($dataCaja)) {
+                foreach ($dataCaja as $pago) {
+                    $pagos[] = [
+                        'tipo' => 'caja',
+                        'codigo' => $pago['paymentTitle'] ?? null,
+                        'monto' => $pago['paymentAmount'] ?? null,
+                        'fecha_pago' => $pago['paymentDatetime'] ?? null,
+                        'estado' => true,
+                        'raw' => $pago
+                    ];
+                }
+            }
+        }
+
+        // ===============================
+        // 3️⃣ BANCO NACIÓN
+        // ===============================
+        $urlBanco = 'https://inscripciones.admision.unap.edu.pe/api/get-pagos-banco-dni';
+
+        $responseBanco = Http::post($urlBanco, [
+            'dni' => $dni,
+        ]);
+
+        if ($responseBanco->successful()) {
+            $dataBanco = $responseBanco->json();
+
+            if (!empty($dataBanco['datos'])) {
+                foreach ($dataBanco['datos'] as $pago) {
+                    $pagos[] = [
+                        'tipo' => 'banco_nacion',
+                        'codigo' => $pago['secuencia'] ?? null,
+                        'monto' => $pago['imp_pag'] ?? null,
+                        'fecha_pago' => $pago['fch_pag'] ?? null,
+                        'estado' => true,
+                        'raw' => $pago
+                    ];
+                }
+            }
+        }
+
+        return response()->json([
+            'success' => true,
+            'postulante' => [
+                'id' => $postulante->id,
+                'name' => $postulante->name,
+                'dni' => $dni,
+                'email' => $postulante->email,
+            ],
+            'total_pagos' => count($pagos),
+            'pagos' => $pagos
+        ]);
+    }
+
+public function misProcesos(Request $request)
+{
+    $dni = $request->user()->dni;
+
+    $procesos = ResultadoAdmision::select(
+            'procesos_admision.id',
+            'procesos_admision.nombre',
+            'resultados_admision.puntaje',
+            'resultados_admision.apto'
+        )
+        ->join('procesos_admision', 'procesos_admision.id', '=', 'resultados_admision.idproceso')
+        ->where('resultados_admision.dni', $dni)
+        ->distinct()
+        ->get();
+
+    return response()->json([
+        'success' => true,
+        'data' => $procesos
+    ]);
+}
+
+}
diff --git a/back/app/Models/Area.php b/back/app/Models/Area.php
index 45de851..fb8f7df 100644
--- a/back/app/Models/Area.php
+++ b/back/app/Models/Area.php
@@ -95,7 +95,12 @@ class Area extends Model
 
     public function procesos()
     {
-        return $this->belongsToMany(Proceso::class, 'area_proceso')->withTimestamps();
+        return $this->belongsToMany(Proceso::class, 'area_proceso')
+                    ->withPivot('id')
+                    ->withTimestamps();
     }
 
+
+    
+
 }
diff --git a/back/app/Models/AreaAdmision.php b/back/app/Models/AreaAdmision.php
new file mode 100644
index 0000000..9c9e433
--- /dev/null
+++ b/back/app/Models/AreaAdmision.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+
+class AreaAdmision extends Model
+{
+    protected $table = 'areas_admision';
+
+    protected $fillable = [
+        'nombre',
+        'descripcion',
+        'estado'
+    ];
+
+    protected $casts = [
+        'estado' => 'boolean'
+    ];
+
+    /*
+    |--------------------------------------------------------------------------
+    | RELACIONES
+    |--------------------------------------------------------------------------
+    */
+
+    // Un área tiene muchos resultados
+    public function resultados()
+    {
+        return $this->hasMany(ResultadoAdmision::class, 'idearea');
+    }
+}
diff --git a/back/app/Models/Examen.php b/back/app/Models/Examen.php
new file mode 100644
index 0000000..7ab594f
--- /dev/null
+++ b/back/app/Models/Examen.php
@@ -0,0 +1,69 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class Examen extends Model
+{
+    use HasFactory;
+
+    protected $table = 'examenes';
+
+    protected $fillable = [
+        'postulante_id',
+        'area_proceso_id',
+        'pagado',   
+        'tipo_pago',     
+        'pago_id', 
+        'intentos',
+        'hora_inicio',
+         
+    ];
+
+    public function postulante()
+    {
+        return $this->belongsTo(Postulante::class, 'postulante_id');
+    }
+
+
+    // public function area()
+    // {
+    //     return $this->belongsTo(Area::class, 'area_id');
+    // }
+
+    public function areaProceso()
+    {
+        return $this->belongsTo(AreaProceso::class, 'area_proceso_id');
+    }
+
+    public function pago()
+    {
+        return $this->belongsTo(Pago::class, 'pago_id');
+    }
+
+    // Accesos rápidos opcionales
+    public function area()
+    {
+        return $this->hasOneThrough(
+            Area::class,
+            AreaProceso::class,
+            'id',              // Foreign key on AreaProceso table...
+            'id',              // Foreign key on Area table...
+            'area_proceso_id', // Local key on Examen table...
+            'area_id'          // Local key on AreaProceso table...
+        );
+    }
+
+    public function proceso()
+    {
+        return $this->areaProceso->proceso;
+    }
+
+    public function preguntasAsignadas()
+    {
+        return $this->hasMany(PreguntaAsignada::class, 'examen_id');
+    }
+    
+}
diff --git a/back/app/Models/Pago.php b/back/app/Models/Pago.php
new file mode 100644
index 0000000..f01ca43
--- /dev/null
+++ b/back/app/Models/Pago.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class Pago extends Model
+{
+    use HasFactory;
+
+    protected $fillable = [
+        'postulante_id',
+        'tipo_pago',
+        'codigo_pago',
+        'monto',
+        'utilizado',
+        'original_date',
+        'confirmed_date',
+        'fecha_pago',
+    ];
+}
+
diff --git a/back/app/Models/Postulante.php b/back/app/Models/Postulante.php
new file mode 100644
index 0000000..9b9838e
--- /dev/null
+++ b/back/app/Models/Postulante.php
@@ -0,0 +1,51 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Foundation\Auth\User as Authenticatable; // Para usar login
+use Laravel\Sanctum\HasApiTokens; // Para tokens API
+use Illuminate\Notifications\Notifiable;
+
+class Postulante extends Authenticatable
+{
+    use HasApiTokens, HasFactory, Notifiable;
+
+    protected $table = 'postulantes';
+
+    /**
+     * Campos asignables
+     */
+    protected $fillable = [
+        'name',
+        'email',
+        'password',
+        'dni',
+        'device_id',
+        'last_activity'
+    ];
+
+    /**
+     * Campos ocultos al serializar
+     */
+    protected $hidden = [
+        'password',
+        'device_id',
+        'tokens'
+    ];
+
+    /**
+     * Casting
+     */
+    protected $casts = [
+        'last_activity' => 'datetime',
+    ];
+
+    /**
+     * Mutator para encriptar la contraseña automáticamente
+     */
+    public function setPasswordAttribute($value)
+    {
+        $this->attributes['password'] = bcrypt($value);
+    }
+}
diff --git a/back/app/Models/PreguntaAsignada.php b/back/app/Models/PreguntaAsignada.php
new file mode 100644
index 0000000..1124262
--- /dev/null
+++ b/back/app/Models/PreguntaAsignada.php
@@ -0,0 +1,39 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+
+class PreguntaAsignada extends Model
+{
+    protected $table = 'preguntas_asignadas';
+    
+    protected $fillable = [
+        'examen_id',
+        'pregunta_id',
+        'orden',
+        'respuesta_usuario',
+        'es_correcta',
+        'estado',
+        'puntaje',
+        'respondida_at'
+    ];
+    
+    protected $casts = [
+        'es_correcta' => 'boolean',
+        'puntaje' => 'decimal:2'
+    ];
+    
+    protected $dates = ['respondida_at'];
+    
+    public function examen(): BelongsTo
+    {
+        return $this->belongsTo(Examen::class);
+    }
+    
+    public function pregunta(): BelongsTo
+    {
+        return $this->belongsTo(Pregunta::class);
+    }
+}
\ No newline at end of file
diff --git a/back/app/Models/Proceso.php b/back/app/Models/Proceso.php
index e03fa1f..70db393 100644
--- a/back/app/Models/Proceso.php
+++ b/back/app/Models/Proceso.php
@@ -34,6 +34,7 @@ class Proceso extends Model
         'fecha_inicio',
         'fecha_fin',
         'tiempo_por_pregunta',
+        'cantidad_pregunta',
     ];
 
     protected $casts = [
@@ -113,11 +114,15 @@ class Proceso extends Model
         });
     }
 
-        public function areas()
-    {
-        return $this->belongsToMany(
-            Area::class,
-            'area_proceso'
-        )->withTimestamps();
-    }
+public function areas()
+{
+    return $this->belongsToMany(
+        Area::class,
+        'area_proceso' // nombre de la tabla pivot
+    )
+    ->withPivot('id')   // columnas extra de la tabla pivot que quieres acceder
+    ->withTimestamps(); // para manejar created_at y updated_at automáticamente
+}
+
+
 }
diff --git a/back/app/Models/ProcesoAdmision.php b/back/app/Models/ProcesoAdmision.php
new file mode 100644
index 0000000..39206ba
--- /dev/null
+++ b/back/app/Models/ProcesoAdmision.php
@@ -0,0 +1,35 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+
+class ProcesoAdmision extends Model
+{
+    protected $table = 'procesos_admision';
+
+    protected $fillable = [
+        'nombre',
+        'fecha_inicio',
+        'fecha_fin',
+        'estado'
+    ];
+
+    protected $casts = [
+        'fecha_inicio' => 'datetime',
+        'fecha_fin'    => 'datetime',
+        'estado'       => 'boolean'
+    ];
+
+    /*
+    |--------------------------------------------------------------------------
+    | RELACIONES
+    |--------------------------------------------------------------------------
+    */
+
+    // Un proceso tiene muchos resultados
+    public function resultados()
+    {
+        return $this->hasMany(ResultadoAdmision::class, 'idproceso');
+    }
+}
diff --git a/back/app/Models/ReglaAreaProceso.php b/back/app/Models/ReglaAreaProceso.php
new file mode 100644
index 0000000..f383030
--- /dev/null
+++ b/back/app/Models/ReglaAreaProceso.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class ReglaAreaProceso extends Model
+{
+    use HasFactory;
+
+    protected $table = 'reglas_area_proceso';
+
+    protected $fillable = [
+        'area_proceso_id',
+        'curso_id',
+        'cantidad_preguntas',
+        'orden',
+        'nivel_dificultad',
+        'ponderacion',
+    ];
+
+    public function areaProceso()
+    {
+        return $this->belongsTo(AreaProceso::class);
+    }
+
+    public function curso()
+    {
+        return $this->belongsTo(Curso::class);
+    }
+}
diff --git a/back/app/Models/ResultadoAdmision.php b/back/app/Models/ResultadoAdmision.php
new file mode 100644
index 0000000..9ec8037
--- /dev/null
+++ b/back/app/Models/ResultadoAdmision.php
@@ -0,0 +1,62 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+
+class ResultadoAdmision extends Model
+{
+    protected $table = 'resultados_admision';
+
+    protected $fillable = [
+        'dni',
+        'paterno',
+        'materno',
+        'nombres',
+        'puntaje',
+        'vocacional',
+        'apto',
+        'obs',
+        'desprograma',
+        'idproceso',
+        'idearea',
+        'litho',
+        'numlectura',
+        'tipo',
+        'calificar',
+        'aula',
+        'respuestas',
+        'puesto'
+    ];
+
+    protected $casts = [
+        'puntaje' => 'decimal:2',
+        'vocacional' => 'decimal:2',
+        'desprograma' => 'boolean',
+        'calificar' => 'boolean',
+        'respuestas' => 'array'
+    ];
+
+    /*
+    |--------------------------------------------------------------------------
+    | RELACIONES
+    |--------------------------------------------------------------------------
+    */
+
+    public function proceso()
+    {
+        return $this->belongsTo(ProcesoAdmision::class, 'idproceso');
+    }
+
+    public function area()
+    {
+        return $this->belongsTo(AreaAdmision::class, 'idearea');
+    }
+
+    public function detalleCursos()
+    {
+        return $this->hasOne(ResultadoAdmisionCarga::class, 'dni', 'dni')
+            ->whereColumn('idproceso', 'resultados_admision.idproceso')
+            ->whereColumn('idearea', 'resultados_admision.idearea');
+    }
+}
diff --git a/back/app/Models/ResultadoAdmisionCarga.php b/back/app/Models/ResultadoAdmisionCarga.php
new file mode 100644
index 0000000..ded238b
--- /dev/null
+++ b/back/app/Models/ResultadoAdmisionCarga.php
@@ -0,0 +1,148 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+
+class ResultadoAdmisionCarga extends Model
+{
+    protected $table = 'resultados_admision_carga';
+
+    protected $primaryKey = 'id';
+
+    public $timestamps = false; // Solo tienes created_at
+
+    protected $guarded = []; 
+    // Uso guarded vacío porque tienes MUCHOS campos.
+    // Es más práctico que escribir todos en fillable.
+
+    protected $casts = [
+
+        'puntaje_total' => 'decimal:2',
+        'puesto' => 'integer',
+
+        // ARITMETICA
+        'correctas_aritmetica' => 'integer',
+        'blancas_aritmetica' => 'integer',
+        'puntaje_aritmetica' => 'decimal:2',
+        'porcentaje_aritmetica' => 'decimal:2',
+
+        // ALGEBRA
+        'correctas_algebra' => 'integer',
+        'blancas_algebra' => 'integer',
+        'puntaje_algebra' => 'decimal:2',
+        'porcentaje_algebra' => 'decimal:2',
+
+        // GEOMETRIA
+        'correctas_geometria' => 'integer',
+        'blancas_geometria' => 'integer',
+        'puntaje_geometria' => 'decimal:2',
+        'porcentaje_geometria' => 'decimal:2',
+
+        // TRIGONOMETRIA
+        'correctas_trigonometria' => 'integer',
+        'blancas_trigonometria' => 'integer',
+        'puntaje_trigonometria' => 'decimal:2',
+        'porcentaje_trigonometria' => 'decimal:2',
+
+        // FISICA
+        'correctas_fisica' => 'integer',
+        'blancas_fisica' => 'integer',
+        'puntaje_fisica' => 'decimal:2',
+        'porcentaje_fisica' => 'decimal:2',
+
+        // QUIMICA
+        'correctas_quimica' => 'integer',
+        'blancas_quimica' => 'integer',
+        'puntaje_quimica' => 'decimal:2',
+        'porcentaje_quimica' => 'decimal:2',
+
+        // BIOLOGIA
+        'correctas_biologia_anatomia' => 'integer',
+        'blancas_biologia_anatomia' => 'integer',
+        'puntaje_biologia_anatomia' => 'decimal:2',
+        'porcentaje_biologia_anatomia' => 'decimal:2',
+
+        // PSICOLOGIA
+        'correctas_psicologia_filosofia' => 'integer',
+        'blancas_psicologia_filosofia' => 'integer',
+        'puntaje_psicologia_filosofia' => 'decimal:2',
+        'porcentaje_psicologia_filosofia' => 'decimal:2',
+
+        // GEOGRAFIA
+        'correctas_geografia' => 'integer',
+        'blancas_geografia' => 'integer',
+        'puntaje_geografia' => 'decimal:2',
+        'porcentaje_geografia' => 'decimal:2',
+
+        // HISTORIA
+        'correctas_historia' => 'integer',
+        'blancas_historia' => 'integer',
+        'puntaje_historia' => 'decimal:2',
+        'porcentaje_historia' => 'decimal:2',
+
+        // EDUCACION CIVICA
+        'correctas_educacion_civica' => 'integer',
+        'blancas_educacion_civica' => 'integer',
+        'puntaje_educacion_civica' => 'decimal:2',
+        'porcentaje_educacion_civica' => 'decimal:2',
+
+        // ECONOMIA
+        'correctas_economia' => 'integer',
+        'blancas_economia' => 'integer',
+        'puntaje_economia' => 'decimal:2',
+        'porcentaje_economia' => 'decimal:2',
+
+        // COMUNICACION
+        'correctas_comunicacion' => 'integer',
+        'blancas_comunicacion' => 'integer',
+        'puntaje_comunicacion' => 'decimal:2',
+        'porcentaje_comunicacion' => 'decimal:2',
+
+        // LITERATURA
+        'correctas_literatura' => 'integer',
+        'blancas_literatura' => 'integer',
+        'puntaje_literatura' => 'decimal:2',
+        'porcentaje_literatura' => 'decimal:2',
+
+        // RAZONAMIENTO MATEMATICO
+        'correctas_razonamiento_matematico' => 'integer',
+        'blancas_razonamiento_matematico' => 'integer',
+        'puntaje_razonamiento_matematico' => 'decimal:2',
+        'porcentaje_razonamiento_matematico' => 'decimal:2',
+
+        // RAZONAMIENTO VERBAL
+        'correctas_razonamiento_verbal' => 'integer',
+        'blancas_razonamiento_verbal' => 'integer',
+        'puntaje_razonamiento_verbal' => 'decimal:2',
+        'porcentaje_razonamiento_verbal' => 'decimal:2',
+
+        // INGLES
+        'correctas_ingles' => 'integer',
+        'blancas_ingles' => 'integer',
+        'puntaje_ingles' => 'decimal:2',
+        'porcentaje_ingles' => 'decimal:2',
+
+        // QUECHUA / AIMARA
+        'correctas_quechua_aimara' => 'integer',
+        'blancas_quechua_aimara' => 'integer',
+        'puntaje_quechua_aimara' => 'decimal:2',
+        'porcentaje_quechua_aimara' => 'decimal:2',
+    ];
+
+    /*
+    |--------------------------------------------------------------------------
+    | RELACIONES
+    |--------------------------------------------------------------------------
+    */
+
+    public function proceso()
+    {
+        return $this->belongsTo(ProcesoAdmision::class, 'idproceso');
+    }
+
+    public function area()
+    {
+        return $this->belongsTo(AreaAdmision::class, 'idearea');
+    }
+}
diff --git a/back/app/Services/ExamenService.php b/back/app/Services/ExamenService.php
new file mode 100644
index 0000000..daddafd
--- /dev/null
+++ b/back/app/Services/ExamenService.php
@@ -0,0 +1,164 @@
+<?php
+
+namespace App\Services;
+
+use App\Models\Examen;
+use App\Models\Pregunta;
+use App\Models\ReglaAreaProceso;
+use App\Models\PreguntaAsignada;
+use Illuminate\Support\Facades\DB;
+
+class ExamenService
+{
+    /**
+     * Generar preguntas según reglas
+     */
+    public function generarPreguntasExamen(Examen $examen): array
+    {
+        if ($examen->preguntasAsignadas()->exists()) {
+            return [
+                'success' => false,
+                'message' => 'El examen ya tiene preguntas'
+            ];
+        }
+
+        $reglas = ReglaAreaProceso::where('area_proceso_id', $examen->area_proceso_id)
+            ->orderBy('orden')
+            ->get();
+
+        if ($reglas->isEmpty()) {
+            return [
+                'success' => false,
+                'message' => 'No hay reglas configuradas'
+            ];
+        }
+
+        DB::beginTransaction();
+
+        try {
+            $orden = 1;
+
+            foreach ($reglas as $regla) {
+                $preguntas = Pregunta::where('curso_id', $regla->curso_id)
+                    ->where('activo', 1)
+                    ->when($regla->nivel_dificultad, fn ($q) =>
+                        $q->where('nivel_dificultad', $regla->nivel_dificultad)
+                    )
+                    ->inRandomOrder()
+                    ->limit($regla->cantidad_preguntas)
+                    ->get();
+
+                if ($preguntas->count() < $regla->cantidad_preguntas) {
+                    throw new \Exception("Preguntas insuficientes para curso {$regla->curso_id}");
+                }
+
+                foreach ($preguntas as $pregunta) {
+                    PreguntaAsignada::create([
+                        'examen_id'    => $examen->id,
+                        'pregunta_id'  => $pregunta->id,
+                        'orden'        => $orden++,
+                        'puntaje_base' => $regla->ponderacion,
+                        'estado'       => 'pendiente',
+                    ]);
+                }
+            }
+
+            DB::commit();
+
+            return ['success' => true];
+
+        } catch (\Throwable $e) {
+            DB::rollBack();
+            return ['success' => false, 'message' => $e->getMessage()];
+        }
+    }
+
+
+public function obtenerPreguntasExamen(Examen $examen): array
+{
+    // Traemos preguntas con curso
+    $preguntas = $examen->preguntasAsignadas()
+        ->with('pregunta.curso')
+        ->get()
+        ->sortBy('orden');
+
+    // Traemos datos del área-proceso directamente desde la DB
+    $areaProceso = \DB::table('area_proceso')
+        ->join('procesos', 'area_proceso.proceso_id', '=', 'procesos.id')
+        ->join('areas', 'area_proceso.area_id', '=', 'areas.id')
+        ->where('area_proceso.id', $examen->area_proceso_id)
+        ->select(
+            'procesos.nombre as proceso_nombre',
+            'procesos.duracion as proceso_duracion',
+            'procesos.intentos_maximos as proceso_intentos_maximos',
+            'areas.nombre as area_nombre'
+        )
+        ->first();
+
+    return $preguntas->map(fn($pa) => [
+        'id'             => $pa->id,
+        'orden'          => $pa->orden,
+        'enunciado'      => $pa->pregunta->enunciado,
+        'extra'          => $pa->pregunta->enunciado_adicional,
+        'opciones'       => $this->mezclarOpciones($pa->pregunta->opciones),
+        'imagenes'       => $pa->pregunta->imagenes,
+        'estado'         => $pa->estado,
+        'respuesta'      => $pa->pregunta->respuesta_correcta,
+        'curso'          => $pa->pregunta->curso->nombre ?? null,
+        'proceso'        => $areaProceso->proceso_nombre ?? null,
+        'duracion'       => $areaProceso->proceso_duracion ?? null,
+        'intentos_maximos'=> $areaProceso->proceso_intentos_maximos ?? null,
+        'area'           => $areaProceso->area_nombre ?? null
+    ])->values()->toArray();
+}
+
+
+
+
+    public function guardarRespuesta(PreguntaAsignada $pa, string $respuesta): array
+    {
+        if ($pa->estado === 'respondida') {
+            return ['success' => false, 'message' => 'Ya respondida'];
+        }
+
+        $esCorrecta = $respuesta === $pa->pregunta->respuesta_correcta;
+
+        $pa->update([
+            'respuesta_usuario' => $respuesta,
+            'es_correcta'       => $esCorrecta,
+            'puntaje_obtenido'  => $esCorrecta ? $pa->puntaje_base : 0,
+            'estado'            => 'respondida',
+            'respondida_at'     => now()
+        ]);
+
+        return [
+            'success'  => true,
+            'correcta' => $esCorrecta,
+            'puntaje'  => $pa->puntaje_obtenido
+        ];
+    }
+
+    /**
+     * Finalizar examen
+     */
+    public function finalizarExamen(Examen $examen): void
+    {
+        $examen->update([
+            'estado'   => 'finalizado',
+            'hora_fin' => now()
+        ]);
+    }
+
+    private function mezclarOpciones(?array $opciones): array
+    {
+        if (!$opciones) return [];
+
+        $keys = array_keys($opciones);
+        shuffle($keys);
+
+        return array_map(fn ($k) => [
+            'key' => $k,
+            'texto' => $opciones[$k]
+        ], $keys);
+    }
+}
diff --git a/back/config/auth.php b/back/config/auth.php
index 7d1eb0d..50416eb 100644
--- a/back/config/auth.php
+++ b/back/config/auth.php
@@ -40,6 +40,11 @@ return [
             'driver' => 'session',
             'provider' => 'users',
         ],
+
+        'postulante' => [
+            'driver' => 'sanctum',
+            'provider' => 'postulantes',
+        ],
     ],
 
     /*
@@ -69,6 +74,11 @@ return [
         //     'driver' => 'database',
         //     'table' => 'users',
         // ],
+
+        'postulantes' => [
+            'driver' => 'eloquent',
+            'model' => App\Models\Postulante::class,
+        ],
     ],
 
     /*
diff --git a/back/routes/api.php b/back/routes/api.php
index 22263a4..67fd8fa 100644
--- a/back/routes/api.php
+++ b/back/routes/api.php
@@ -11,6 +11,9 @@ use App\Http\Controllers\Administracion\AreaController;
 use App\Http\Controllers\Administracion\CursoController;
 use App\Http\Controllers\Administracion\PreguntaController;
 use App\Http\Controllers\Administracion\ProcesoController;
+use App\Http\Controllers\PostulanteAuthController;
+use App\Http\Controllers\ExamenController;
+use App\Http\Controllers\Administracion\ReglaAreaProcesoController;
 
 
 Route::get('/user', function (Request $request) {
@@ -81,3 +84,74 @@ Route::middleware(['auth:sanctum'])->prefix('admin')->group(function () {
 });
 
 
+
+Route::prefix('postulante')->group(function () {
+
+    // Registro
+    Route::post('/register', [PostulanteAuthController::class, 'register']);
+
+    // Login
+    Route::post('/login', [PostulanteAuthController::class, 'login']);
+
+    // Rutas protegidas por token
+    Route::middleware('auth:sanctum')->group(function () {
+        Route::post('/logout', [PostulanteAuthController::class, 'logout']);
+        Route::get('/me', [PostulanteAuthController::class, 'me']);
+        Route::get('/pagos', [PostulanteAuthController::class, 'obtenerPagosPostulante']);
+        Route::get('/postulante/mis-procesos',[PostulanteAuthController::class, 'misProcesos']);
+
+    });
+
+
+});
+
+
+// Route::middleware('auth:sanctum')->group(function () {
+//     Route::get('/procesos', [ExamenController::class, 'procesoexamen']);
+//     Route::get('/areas', [ExamenController::class, 'areas']);
+//     Route::post('/examen', [ExamenController::class, 'store']);
+//     Route::get('/examen/actual', [ExamenController::class, 'miExamenActual']);
+// });
+
+
+Route::middleware(['auth:sanctum'])->prefix('area-proceso')->group(function () {
+    Route::get('areasprocesos', [ReglaAreaProcesoController::class, 'areasProcesos']);
+    Route::prefix('{areaProcesoId}/reglas')->group(function () {
+        Route::get('/', [ReglaAreaProcesoController::class, 'index']);           // Listar reglas
+        Route::post('/', [ReglaAreaProcesoController::class, 'store']);          // Crear/actualizar regla individual
+        Route::post('/multiple', [ReglaAreaProcesoController::class, 'storeMultiple']); // Guardar múltiples reglas
+    });
+});
+
+Route::middleware(['auth:sanctum'])->prefix('reglas')->group(function () {
+    Route::put('/{reglaId}', [ReglaAreaProcesoController::class, 'update']);      // Editar regla
+    Route::delete('/{reglaId}', [ReglaAreaProcesoController::class, 'destroy']);  // Eliminar regla
+});
+
+
+
+// Examen - Flujo separado
+Route::middleware(['auth:postulante'])->group(function () {
+    // Configuración
+    Route::get('/examen/procesos', [ExamenController::class, 'procesoexamen']);
+    Route::get('/examen/areas', [ExamenController::class, 'areas']);
+    Route::get('/examen/actual', [ExamenController::class, 'miExamenActual']);
+    
+    // Crear examen (sin preguntas)
+    Route::post('/examen/crear', [ExamenController::class, 'crearExamen']);
+    
+    // Generar preguntas
+    Route::post('/examen/{examen}/generar-preguntas', [ExamenController::class, 'generarPreguntas']);
+    
+    // Obtener preguntas
+    Route::get('/examen/{examen}/preguntas', [ExamenController::class, 'obtenerPreguntas']);
+    
+    // Iniciar examen (marcar hora inicio)
+    Route::post('/examen/iniciar', [ExamenController::class, 'iniciarExamen']);
+    
+    // Responder preguntas
+    Route::post('/examen/pregunta/{pregunta}/responder', [ExamenController::class, 'responderPregunta']);
+    
+    // Finalizar examen
+    Route::post('/examen/{examen}/finalizar', [ExamenController::class, 'finalizarExamen']);
+});
\ No newline at end of file
diff --git a/front/package-lock.json b/front/package-lock.json
index dd9f2ca..7158e86 100644
--- a/front/package-lock.json
+++ b/front/package-lock.json
@@ -1188,6 +1188,7 @@
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -1197,6 +1198,7 @@
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -1342,6 +1344,7 @@
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
       "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -1351,7 +1354,6 @@
       "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
       "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@kurkle/color": "^0.3.0"
       },
@@ -1364,6 +1366,7 @@
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
       "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
       "license": "ISC",
+      "peer": true,
       "dependencies": {
         "string-width": "^4.2.0",
         "strip-ansi": "^6.0.0",
@@ -1384,6 +1387,7 @@
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -1395,7 +1399,8 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/combined-stream": {
       "version": "1.0.8",
@@ -1467,6 +1472,7 @@
       "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
       "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -1547,7 +1553,8 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
       "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/dom-align": {
       "version": "1.12.4",
@@ -1579,7 +1586,8 @@
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/entities": {
       "version": "7.0.1",
@@ -1727,6 +1735,7 @@
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
       "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "locate-path": "^5.0.0",
         "path-exists": "^4.0.0"
@@ -1809,6 +1818,7 @@
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
       "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
       "license": "ISC",
+      "peer": true,
       "engines": {
         "node": "6.* || 8.* || >= 10.*"
       }
@@ -1956,6 +1966,7 @@
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -2013,7 +2024,6 @@
         "https://opencollective.com/katex",
         "https://github.com/sponsors/katex"
       ],
-      "license": "MIT",
       "dependencies": {
         "commander": "^8.3.0"
       },
@@ -2035,6 +2045,7 @@
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
       "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "p-locate": "^4.1.0"
       },
@@ -2251,6 +2262,7 @@
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
       "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "p-try": "^2.0.0"
       },
@@ -2266,6 +2278,7 @@
       "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
       "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "p-limit": "^2.2.0"
       },
@@ -2278,6 +2291,7 @@
       "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
       "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -2297,6 +2311,7 @@
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
       "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -2319,7 +2334,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -2353,6 +2367,7 @@
       "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
       "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=10.13.0"
       }
@@ -2503,6 +2518,7 @@
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
       "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2511,7 +2527,8 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
       "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
-      "license": "ISC"
+      "license": "ISC",
+      "peer": true
     },
     "node_modules/resize-observer-polyfill": {
       "version": "1.5.1",
@@ -2583,7 +2600,8 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
       "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
-      "license": "ISC"
+      "license": "ISC",
+      "peer": true
     },
     "node_modules/set-function-length": {
       "version": "1.2.2",
@@ -2646,6 +2664,7 @@
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -2660,6 +2679,7 @@
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -2729,7 +2749,6 @@
       "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -2804,7 +2823,6 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.27.tgz",
       "integrity": "sha512-aJ/UtoEyFySPBGarREmN4z6qNKpbEguYHMmXSiOGk69czc+zhs0NF6tEFrY8TZKAl8N/LYAkd4JHVd5E/AsSmw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.27",
         "@vue/compiler-sfc": "3.5.27",
@@ -2896,13 +2914,15 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
       "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
-      "license": "ISC"
+      "license": "ISC",
+      "peer": true
     },
     "node_modules/wrap-ansi": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
       "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "ansi-styles": "^4.0.0",
         "string-width": "^4.1.0",
@@ -2916,13 +2936,15 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
       "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
-      "license": "ISC"
+      "license": "ISC",
+      "peer": true
     },
     "node_modules/yargs": {
       "version": "15.4.1",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
       "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "cliui": "^6.0.0",
         "decamelize": "^1.2.0",
@@ -2945,6 +2967,7 @@
       "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
       "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
       "license": "ISC",
+      "peer": true,
       "dependencies": {
         "camelcase": "^5.0.0",
         "decamelize": "^1.2.0"
diff --git a/front/public/logotiny.png b/front/public/logotiny.png
new file mode 100644
index 0000000000000000000000000000000000000000..a3463b7c4aff6554f920d43c2b8588551e351037
GIT binary patch
literal 48191
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
DOiefi

literal 0
HcmV?d00001

diff --git a/front/src/axiosPostulante.js b/front/src/axiosPostulante.js
new file mode 100644
index 0000000..cbc069b
--- /dev/null
+++ b/front/src/axiosPostulante.js
@@ -0,0 +1,32 @@
+import axios from 'axios'
+import router from './router'
+import { useAuthStore } from './store/postulanteStore'
+
+const apiPostulante = axios.create({
+  baseURL: import.meta.env.VITE_API_URL,
+  headers: { 'Content-Type': 'application/json', Accept: 'application/json' }
+})
+
+// Interceptor para agregar token del postulante
+apiPostulante.interceptors.request.use(config => {
+  const postulanteStore = useAuthStore()
+  if (postulanteStore.token) {
+    config.headers.Authorization = `Bearer ${postulanteStore.token}`
+  }
+  return config
+})
+
+// Manejo de errores (401)
+apiPostulante.interceptors.response.use(
+  response => response,
+  error => {
+    const postulanteStore = useAuthStore()
+    if (error.response?.status === 401) {
+      postulanteStore.logout()
+      router.push('/login-postulante')
+    }
+    return Promise.reject(error)
+  }
+)
+
+export default apiPostulante
diff --git a/front/src/components/Footer.vue b/front/src/components/Footer.vue
new file mode 100644
index 0000000..b78bcb6
--- /dev/null
+++ b/front/src/components/Footer.vue
@@ -0,0 +1,167 @@
+<template>
+  <footer class="modern-footer">
+    <div class="footer-container">
+
+      <!-- COLUMNA 1 -->
+      <div class="footer-col">
+        <div class="footer-logo">
+          <img src="/logotiny.png" alt="Logo UNA" />
+          <div class="footer-title">
+            <h3>Universidad Nacional del Altiplano</h3>
+            <span>Dirección de Admisión</span>
+          </div>
+        </div>
+
+        <p class="footer-text">
+          Institución pública de educación superior comprometida con la
+          formación académica, científica y humanística de la región.
+        </p>
+      </div>
+
+      <!-- COLUMNA 2 -->
+      <div class="footer-col">
+        <h4>Admisión</h4>
+        <ul>
+          <li>Proceso Ordinario</li>
+          <li>Proceso Extraordinario</li>
+          <li>Modalidades</li>
+          <li>Resultados</li>
+        </ul>
+      </div>
+
+      <!-- COLUMNA 3 -->
+      <div class="footer-col">
+        <h4>Programas</h4>
+        <ul>
+          <li>Ingenierías</li>
+          <li>Biomédicas</li>
+          <li>Sociales</li>
+        </ul>
+      </div>
+
+      <!-- COLUMNA 4 -->
+      <div class="footer-col">
+        <h4>Contacto</h4>
+        <ul>
+          <li>Av. Floral N° 1153 – Puno</li>
+          <li>📞 (051) 123-456</li>
+          <li>✉️ admision@unap.edu.pe</li>
+        </ul>
+      </div>
+    </div>
+
+    <!-- FOOTER BOTTOM -->
+    <div class="footer-bottom">
+      © {{ new Date().getFullYear() }} Universidad Nacional del Altiplano.
+      Todos los derechos reservados.
+    </div>
+  </footer>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+/* FUENTE */
+.modern-footer,
+.footer-col h4,
+.footer-col li,
+.footer-text,
+.footer-bottom {
+  font-family: "Times New Roman", Times, serif;
+}
+
+/* FOOTER BASE */
+.modern-footer {
+  background: #f9fafb;
+  border-top: 1px solid #d1d5db;
+  margin-top: 60px;
+}
+
+/* CONTAINER */
+.footer-container {
+  max-width: 1320px;
+  margin: auto;
+  padding: 48px 24px;
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr 1fr;
+  gap: 32px;
+}
+
+/* LOGO */
+.footer-logo {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 14px;
+}
+
+.footer-logo img {
+  width: 46px;
+  height: 46px;
+  border: 1px solid #cbd5e1;
+  border-radius: 6px;
+  object-fit: contain;
+}
+
+.footer-title h3 {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 700;
+  color: #111827;
+}
+
+.footer-title span {
+  font-size: 0.8rem;
+  color: #374151;
+}
+
+/* TEXT */
+.footer-text {
+  font-size: 0.9rem;
+  color: #374151;
+  line-height: 1.6;
+  max-width: 360px;
+}
+
+/* COLUMNS */
+.footer-col h4 {
+  margin-bottom: 12px;
+  font-size: 0.95rem;
+  font-weight: 700;
+  color: #111827;
+}
+
+.footer-col ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.footer-col li {
+  font-size: 0.88rem;
+  color: #1f2937;
+  margin-bottom: 8px;
+}
+
+/* BOTTOM */
+.footer-bottom {
+  border-top: 1px solid #e5e7eb;
+  padding: 14px 24px;
+  text-align: center;
+  font-size: 0.82rem;
+  color: #374151;
+}
+
+/* RESPONSIVE */
+@media (max-width: 900px) {
+  .footer-container {
+    grid-template-columns: 1fr;
+    padding: 36px 24px;
+  }
+
+  .footer-text {
+    max-width: 100%;
+  }
+}
+</style>
diff --git a/front/src/components/HelloWorld.vue b/front/src/components/HelloWorld.vue
deleted file mode 100644
index a5fc821..0000000
--- a/front/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,1414 +0,0 @@
-<template>
-  <!-- Header/Navbar -->
-  <a-layout-header class="landing-header">
-    <div class="header-container">
-      <div class="logo">
-        <RocketOutlined />
-        <span class="logo-text">Exam<span class="logo-highlight">Pro</span></span>
-      </div>
-      
-      <div class="nav-desktop" v-if="!isMobile">
-        <a-menu v-model:selectedKeys="selectedMenu" mode="horizontal" :style="{ border: 'none' }">
-          <a-menu-item key="inicio" @click="scrollToSection('hero')">Inicio</a-menu-item>
-          <a-menu-item key="academias" @click="scrollToSection('academias')">Academias</a-menu-item>
-          <a-menu-item key="caracteristicas" @click="scrollToSection('features')">Características</a-menu-item>
-          <a-menu-item key="precios" @click="scrollToSection('pricing')">Precios</a-menu-item>
-          <a-menu-item key="testimonios" @click="scrollToSection('testimonials')">Testimonios</a-menu-item>
-          <a-menu-item key="contacto" @click="scrollToSection('contact')">Contacto</a-menu-item>
-        </a-menu>
-      </div>
-      
-      <div class="header-actions">
-        <a-space :size="16">
-          <a-button v-if="!isMobile" @click="router.push('/login')">
-            Iniciar Sesión
-          </a-button>
-          <a-button type="primary" v-if="!isMobile" @click="router.push('/registro')">
-            Registrarse Gratis
-          </a-button>
-          
-          <!-- Menú móvil -->
-          <a-button 
-            v-if="isMobile" 
-            type="text" 
-            @click="mobileMenuVisible = true"
-            class="mobile-menu-btn"
-          >
-            <MenuOutlined style="font-size: 20px" />
-          </a-button>
-        </a-space>
-      </div>
-    </div>
-    
-    <!-- Mobile Menu Drawer -->
-    <a-drawer
-      v-model:open="mobileMenuVisible"
-      title="ExamPro"
-      placement="right"
-      width="280"
-      :body-style="{ padding: 0 }"
-    >
-      <a-menu
-        v-model:selectedKeys="selectedMenu"
-        mode="vertical"
-        style="border-right: 0"
-        @click="handleMobileMenuClick"
-      >
-        <a-menu-item key="inicio">
-          <HomeOutlined />
-          Inicio
-        </a-menu-item>
-        <a-menu-item key="academias">
-          <BankOutlined />
-          Academias
-        </a-menu-item>
-        <a-menu-item key="caracteristicas">
-          <AppstoreOutlined />
-          Características
-        </a-menu-item>
-        <a-menu-item key="precios">
-          <DollarOutlined />
-          Precios
-        </a-menu-item>
-        <a-menu-item key="testimonios">
-          <MessageOutlined />
-          Testimonios
-        </a-menu-item>
-        <a-menu-item key="contacto">
-          <PhoneOutlined />
-          Contacto
-        </a-menu-item>
-        <a-menu-divider />
-        <a-menu-item key="login">
-          <LoginOutlined />
-          Iniciar Sesión
-        </a-menu-item>
-        <a-menu-item key="registro" style="background: #1890ff; color: white; margin: 16px">
-          <UserAddOutlined />
-          Registrarse Gratis
-        </a-menu-item>
-      </a-menu>
-    </a-drawer>
-  </a-layout-header>
-
-  <a-layout-content class="landing-content">
-    <!-- Sección Hero -->
-    <section id="hero" class="hero-section">
-      <div class="hero-container">
-        <div class="hero-content">
-          <a-badge :count="'NUEVO'" :style="{ backgroundColor: '#52c41a', marginBottom: '16px' }" />
-          <h1 class="hero-title">
-            Plataforma Integral para
-            <span class="text-gradient">Academias y Exámenes</span>
-          </h1>
-          <p class="hero-subtitle">
-            Gestiona tu academia, crea exámenes interactivos y lleva el control de 
-            estudiantes todo en una sola plataforma. Más de 100 academias confían en nosotros.
-          </p>
-          <div class="hero-actions">
-            <a-space :size="24" :wrap="true">
-              <a-button 
-                type="primary" 
-                size="large" 
-                @click="router.push('/registro')"
-                class="cta-button"
-              >
-                <template #icon>
-                  <RocketOutlined />
-                </template>
-                Comenzar Gratis
-              </a-button>
-              <a-button 
-                size="large" 
-                @click="scrollToSection('features')"
-                class="demo-button"
-              >
-                <template #icon>
-                  <PlayCircleOutlined />
-                </template>
-                Ver Demo
-              </a-button>
-            </a-space>
-          </div>
-          <div class="hero-stats">
-            <div class="stat-item">
-              <div class="stat-number">100+</div>
-              <div class="stat-label">Academias</div>
-            </div>
-            <div class="stat-item">
-              <div class="stat-number">50K+</div>
-              <div class="stat-label">Estudiantes</div>
-            </div>
-            <div class="stat-item">
-              <div class="stat-number">1M+</div>
-              <div class="stat-label">Exámenes</div>
-            </div>
-            <div class="stat-item">
-              <div class="stat-number">99.9%</div>
-              <div class="stat-label">Uptime</div>
-            </div>
-          </div>
-        </div>
-        <div class="hero-image">
-          <img 
-            src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" 
-            alt="Dashboard ExamPro"
-            class="dashboard-image"
-          />
-        </div>
-      </div>
-    </section>
-
-    <!-- Sección de Confianza -->
-    <section class="trust-section">
-      <div class="section-container">
-        <h3 class="section-subtitle">Confían en nosotros</h3>
-        <div class="trust-logos">
-          <div class="logo-item">
-            <BankOutlined />
-            <span>Academia Ciencias</span>
-          </div>
-          <div class="logo-item">
-            <BookOutlined />
-            <span>Instituto Matemáticas</span>
-          </div>
-          <div class="logo-item">
-            <ExperimentOutlined />
-            <span>Centro Estudios</span>
-          </div>
-          <div class="logo-item">
-            <RocketOutlined />
-            <span>Prep Universitaria</span>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- Sección Características -->
-    <section id="features" class="features-section">
-      <div class="section-container">
-        <div class="section-header">
-          <h2 class="section-title">Características Principales</h2>
-          <p class="section-description">
-            Todo lo que necesitas para gestionar tu academia de manera eficiente
-          </p>
-        </div>
-        
-        <a-row :gutter="[24, 24]" class="features-grid">
-          <a-col :xs="24" :sm="12" :md="8">
-            <a-card class="feature-card" hoverable>
-              <template #cover>
-                <div class="feature-icon" style="background: #e6f7ff">
-                  <FileTextOutlined style="color: #1890ff; font-size: 32px" />
-                </div>
-              </template>
-              <a-card-meta
-                title="Exámenes Inteligentes"
-                description="Crea exámenes automatizados con corrección instantánea y análisis de resultados."
-              />
-            </a-card>
-          </a-col>
-          
-          <a-col :xs="24" :sm="12" :md="8">
-            <a-card class="feature-card" hoverable>
-              <template #cover>
-                <div class="feature-icon" style="background: #f6ffed">
-                  <TeamOutlined style="color: #52c41a; font-size: 32px" />
-                </div>
-              </template>
-              <a-card-meta
-                title="Gestión de Estudiantes"
-                description="Control completo de estudiantes, grupos, asistencia y rendimiento académico."
-              />
-            </a-card>
-          </a-col>
-          
-          <a-col :xs="24" :sm="12" :md="8">
-            <a-card class="feature-card" hoverable>
-              <template #cover>
-                <div class="feature-icon" style="background: #fff7e6">
-                  <BarChartOutlined style="color: #fa8c16; font-size: 32px" />
-                </div>
-              </template>
-              <a-card-meta
-                title="Reportes Avanzados"
-                description="Genera reportes detallados de rendimiento, asistencia y finanzas."
-              />
-            </a-card>
-          </a-col>
-          
-          <a-col :xs="24" :sm="12" :md="8">
-            <a-card class="feature-card" hoverable>
-              <template #cover>
-                <div class="feature-icon" style="background: #fff0f6">
-                  <CalendarOutlined style="color: #eb2f96; font-size: 32px" />
-                </div>
-              </template>
-              <a-card-meta
-                title="Calendario Académico"
-                description="Organiza clases, exámenes y eventos en un calendario interactivo."
-              />
-            </a-card>
-          </a-col>
-          
-          <a-col :xs="24" :sm="12" :md="8">
-            <a-card class="feature-card" hoverable>
-              <template #cover>
-                <div class="feature-icon" style="background: #f9f0ff">
-                  <DollarOutlined style="color: #722ed1; font-size: 32px" />
-                </div>
-              </template>
-              <a-card-meta
-                title="Gestión de Pagos"
-                description="Sistema de facturación y seguimiento de pagos automatizado."
-              />
-            </a-card>
-          </a-col>
-          
-          <a-col :xs="24" :sm="12" :md="8">
-            <a-card class="feature-card" hoverable>
-              <template #cover>
-                <div class="feature-icon" style="background: #e6fffb">
-                  <MobileOutlined style="color: #13c2c2; font-size: 32px" />
-                </div>
-              </template>
-              <a-card-meta
-                title="App Móvil"
-                description="Accede desde cualquier dispositivo, disponible para iOS y Android."
-              />
-            </a-card>
-          </a-col>
-        </a-row>
-      </div>
-    </section>
-
-    <!-- Sección Cómo Funciona -->
-    <section class="how-it-works-section">
-      <div class="section-container">
-        <div class="section-header">
-          <h2 class="section-title">Cómo Funciona</h2>
-          <p class="section-description">
-            Tres simples pasos para transformar tu academia
-          </p>
-        </div>
-        
-        <a-row :gutter="[48, 48]" class="steps-grid" justify="center">
-          <a-col :xs="24" :md="8">
-            <div class="step-item">
-              <div class="step-number">01</div>
-              <div class="step-icon">
-                <UserAddOutlined />
-              </div>
-              <h3 class="step-title">Regístrate</h3>
-              <p class="step-description">
-                Crea tu cuenta gratuita y configura tu academia en minutos
-              </p>
-            </div>
-          </a-col>
-          
-          <a-col :xs="24" :md="8">
-            <div class="step-item">
-              <div class="step-number">02</div>
-              <div class="step-icon">
-                <SettingOutlined />
-              </div>
-              <h3 class="step-title">Configura</h3>
-              <p class="step-description">
-                Personaliza tu academia, añade estudiantes y crea tus cursos
-              </p>
-            </div>
-          </a-col>
-          
-          <a-col :xs="24" :md="8">
-            <div class="step-item">
-              <div class="step-number">03</div>
-              <div class="step-icon">
-                <RocketOutlined />
-              </div>
-              <h3 class="step-title">¡Comienza!</h3>
-              <p class="step-description">
-                Empieza a gestionar clases, exámenes y pagos desde hoy mismo
-              </p>
-            </div>
-          </a-col>
-        </a-row>
-      </div>
-    </section>
-
-    <!-- Sección Precios -->
-    <section id="pricing" class="pricing-section">
-      <div class="section-container">
-        <div class="section-header">
-          <h2 class="section-title">Planes y Precios</h2>
-          <p class="section-description">
-            Elige el plan perfecto para tu academia
-          </p>
-          <div class="pricing-toggle">
-            <span>Mensual</span>
-            <a-switch v-model:checked="yearlyBilling" />
-            <span>Anual <a-tag color="green">-20%</a-tag></span>
-          </div>
-        </div>
-        
-        <a-row :gutter="[24, 24]" justify="center">
-          <a-col :xs="24" :md="8">
-            <a-card class="pricing-card" :class="{ 'popular': false }">
-              <div class="pricing-header">
-                <h3 class="plan-name">Básico</h3>
-                <div class="plan-price">
-                  <span class="price-currency">$</span>
-                  <span class="price-amount">{{ yearlyBilling ? '19' : '24' }}</span>
-                  <span class="price-period">/mes</span>
-                </div>
-                <p class="plan-description">Perfecto para academias pequeñas</p>
-              </div>
-              
-              <div class="plan-features">
-                <div class="feature-item">
-                  <CheckCircleOutlined style="color: #52c41a" />
-                  <span>Hasta 50 estudiantes</span>
-                </div>
-                <div class="feature-item">
-                  <CheckCircleOutlined style="color: #52c41a" />
-                  <span>Exámenes ilimitados</span>
-                </div>
-                <div class="feature-item">
-                  <CheckCircleOutlined style="color: #52c41a" />
-                  <span>Soporte por email</span>
-                </div>
-                <div class="feature-item">
-                  <MinusOutlined style="color: #d9d9d9" />
-                  <span class="disabled">App móvil</span>
-                </div>
-                <div class="feature-item">
-                  <MinusOutlined style="color: #d9d9d9" />
-                  <span class="disabled">Reportes avanzados</span>
-                </div>
-              </div>
-              
-              <a-button block size="large" @click="router.push('/registro')">
-                Comenzar Gratis
-              </a-button>
-            </a-card>
-          </a-col>
-          
-          <a-col :xs="24" :md="8">
-            <a-card class="pricing-card popular">
-              <a-tag color="red" class="popular-tag">MÁS POPULAR</a-tag>
-              <div class="pricing-header">
-                <h3 class="plan-name">Profesional</h3>
-                <div class="plan-price">
-                  <span class="price-currency">$</span>
-                  <span class="price-amount">{{ yearlyBilling ? '49' : '59' }}</span>
-                  <span class="price-period">/mes</span>
-                </div>
-                <p class="plan-description">Ideal para academias en crecimiento</p>
-              </div>
-              
-              <div class="plan-features">
-                <div class="feature-item">
-                  <CheckCircleOutlined style="color: #52c41a" />
-                  <span>Hasta 200 estudiantes</span>
-                </div>
-                <div class="feature-item">
-                  <CheckCircleOutlined style="color: #52c41a" />
-                  <span>Todas las características</span>
-                </div>
-                <div class="feature-item">
-                  <CheckCircleOutlined style="color: #52c41a" />
-                  <span>Soporte prioritario</span>
-                </div>
-                <div class="feature-item">
-                  <CheckCircleOutlined style="color: #52c41a" />
-                  <span>App móvil incluida</span>
-                </div>
-                <div class="feature-item">
-                  <CheckCircleOutlined style="color: #52c41a" />
-                  <span>Reportes avanzados</span>
-                </div>
-              </div>
-              
-              <a-button type="primary" block size="large" @click="router.push('/registro')">
-                Comenzar Prueba Gratis
-              </a-button>
-            </a-card>
-          </a-col>
-          
-          <a-col :xs="24" :md="8">
-            <a-card class="pricing-card" :class="{ 'popular': false }">
-              <div class="pricing-header">
-                <h3 class="plan-name">Enterprise</h3>
-                <div class="plan-price">
-                  <span class="price-currency">$</span>
-                  <span class="price-amount">{{ yearlyBilling ? '99' : '119' }}</span>
-                  <span class="price-period">/mes</span>
-                </div>
-                <p class="plan-description">Para instituciones grandes</p>
-              </div>
-              
-              <div class="plan-features">
-                <div class="feature-item">
-                  <CheckCircleOutlined style="color: #52c41a" />
-                  <span>Estudiantes ilimitados</span>
-                </div>
-                <div class="feature-item">
-                  <CheckCircleOutlined style="color: #52c41a" />
-                  <span>Personalización completa</span>
-                </div>
-                <div class="feature-item">
-                  <CheckCircleOutlined style="color: #52c41a" />
-                  <span>Soporte 24/7</span>
-                </div>
-                <div class="feature-item">
-                  <CheckCircleOutlined style="color: #52c41a" />
-                  <span>API personalizada</span>
-                </div>
-                <div class="feature-item">
-                  <CheckCircleOutlined style="color: #52c41a" />
-                  <span>Migración asistida</span>
-                </div>
-              </div>
-              
-              <a-button block size="large" @click="openContactModal">
-                Contactar Ventas
-              </a-button>
-            </a-card>
-          </a-col>
-        </a-row>
-        
-        <div class="pricing-footer">
-          <p>Todos los planes incluyen prueba gratuita de 14 días. Sin tarjetas de crédito requeridas.</p>
-        </div>
-      </div>
-    </section>
-
-    <!-- Sección Testimonios -->
-    <section id="testimonials" class="testimonials-section">
-      <div class="section-container">
-        <div class="section-header">
-          <h2 class="section-title">Lo que dicen nuestros clientes</h2>
-          <p class="section-description">
-            Más de 100 academias han transformado su gestión con ExamPro
-          </p>
-        </div>
-        
-        <a-row :gutter="[24, 24]">
-          <a-col :xs="24" :md="12">
-            <a-card class="testimonial-card">
-              <div class="testimonial-content">
-                <div class="testimonial-text">
-                  "ExamPro ha revolucionado la forma en que gestionamos nuestra academia. 
-                  La plataforma es intuitiva y nos ha ahorrado horas de trabajo administrativo."
-                </div>
-                <div class="testimonial-author">
-                  <a-avatar :size="48" style="background-color: #1890ff">
-                    M
-                  </a-avatar>
-                  <div class="author-info">
-                    <div class="author-name">María González</div>
-                    <div class="author-role">Directora, Academia Ciencias Exactas</div>
-                  </div>
-                </div>
-              </div>
-            </a-card>
-          </a-col>
-          
-          <a-col :xs="24" :md="12">
-            <a-card class="testimonial-card">
-              <div class="testimonial-content">
-                <div class="testimonial-text">
-                  "Los reportes de rendimiento nos han permitido identificar áreas de mejora 
-                  y personalizar la enseñanza para cada estudiante. ¡Increíble herramienta!"
-                </div>
-                <div class="testimonial-author">
-                  <a-avatar :size="48" style="background-color: #52c41a">
-                    C
-                  </a-avatar>
-                  <div class="author-info">
-                    <div class="author-name">Carlos Rodríguez</div>
-                    <div class="author-role">Profesor, Instituto Matemático</div>
-                  </div>
-                </div>
-              </div>
-            </a-card>
-          </a-col>
-        </a-row>
-      </div>
-    </section>
-
-    <!-- CTA Final -->
-    <section class="cta-section">
-      <div class="section-container">
-        <div class="cta-content">
-          <h2 class="cta-title">¿Listo para transformar tu academia?</h2>
-          <p class="cta-description">
-            Únete a las más de 100 academias que ya usan ExamPro. 
-            Comienza tu prueba gratuita de 14 días hoy mismo.
-          </p>
-          <div class="cta-actions">
-            <a-space :size="16" wrap>
-              <a-button 
-                type="primary" 
-                size="large" 
-                @click="router.push('/registro')"
-                class="cta-button"
-              >
-                <template #icon>
-                  <RocketOutlined />
-                </template>
-                Comenzar Gratis
-              </a-button>
-              <a-button 
-                size="large"
-                @click="openContactModal"
-                class="demo-button"
-              >
-                <template #icon>
-                  <MessageOutlined />
-                </template>
-                Hablar con Ventas
-              </a-button>
-            </a-space>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- Footer -->
-    <a-layout-footer class="landing-footer">
-      <div class="footer-container">
-        <div class="footer-main">
-          <div class="footer-column">
-            <div class="footer-logo">
-              <RocketOutlined />
-              <span class="logo-text">Exam<span class="logo-highlight">Pro</span></span>
-            </div>
-            <p class="footer-description">
-              Plataforma integral para la gestión de academias y exámenes.
-              Transformando la educación desde 2023.
-            </p>
-            <div class="social-links">
-              <a-space :size="16">
-                <a href="#" class="social-link">
-                  <FacebookOutlined />
-                </a>
-                <a href="#" class="social-link">
-                  <TwitterOutlined />
-                </a>
-                <a href="#" class="social-link">
-                  <InstagramOutlined />
-                </a>
-                <a href="#" class="social-link">
-                  <LinkedinOutlined />
-                </a>
-              </a-space>
-            </div>
-          </div>
-          
-          <div class="footer-column">
-            <h4 class="footer-title">Producto</h4>
-            <ul class="footer-links">
-              <li><a @click="scrollToSection('features')">Características</a></li>
-              <li><a @click="scrollToSection('pricing')">Precios</a></li>
-              <li><a @click="router.push('/demo')">Demo</a></li>
-              <li><a @click="router.push('/actualizaciones')">Actualizaciones</a></li>
-            </ul>
-          </div>
-          
-          <div class="footer-column">
-            <h4 class="footer-title">Compañía</h4>
-            <ul class="footer-links">
-              <li><a @click="router.push('/nosotros')">Nosotros</a></li>
-              <li><a @click="router.push('/blog')">Blog</a></li>
-              <li><a @click="router.push('/carreras')">Carreras</a></li>
-              <li><a @click="openContactModal">Contacto</a></li>
-            </ul>
-          </div>
-          
-          <div class="footer-column">
-            <h4 class="footer-title">Recursos</h4>
-            <ul class="footer-links">
-              <li><a @click="router.push('/ayuda')">Ayuda</a></li>
-              <li><a @click="router.push('/documentacion')">Documentación</a></li>
-              <li><a @click="router.push('/api')">API</a></li>
-              <li><a @click="router.push('/status')">Estado del Sistema</a></li>
-            </ul>
-          </div>
-          
-          <div class="footer-column">
-            <h4 class="footer-title">Legal</h4>
-            <ul class="footer-links">
-              <li><a @click="router.push('/privacidad')">Privacidad</a></li>
-              <li><a @click="router.push('/terminos')">Términos</a></li>
-              <li><a @click="router.push('/cookies')">Cookies</a></li>
-              <li><a @click="router.push('/licencia')">Licencia</a></li>
-            </ul>
-          </div>
-        </div>
-        
-        <a-divider />
-        
-        <div class="footer-bottom">
-          <div class="copyright">
-            © 2024 ExamPro. Todos los derechos reservados.
-          </div>
-          <div class="footer-bottom-links">
-            <a-space :size="24">
-              <a @click="router.push('/privacidad')">Privacidad</a>
-              <a @click="router.push('/terminos')">Términos</a>
-              <a @click="router.push('/mapa-sitio')">Mapa del Sitio</a>
-            </a-space>
-          </div>
-        </div>
-      </div>
-    </a-layout-footer>
-
-    <!-- Modal de Contacto -->
-    <a-modal
-      v-model:open="contactModalVisible"
-      title="Contactar con Ventas"
-      ok-text="Enviar Mensaje"
-      cancel-text="Cancelar"
-      @ok="submitContactForm"
-    >
-      <a-form layout="vertical">
-        <a-form-item label="Nombre Completo">
-          <a-input v-model:value="contactForm.name" placeholder="Tu nombre" />
-        </a-form-item>
-        <a-form-item label="Correo Electrónico">
-          <a-input v-model:value="contactForm.email" placeholder="tucorreo@ejemplo.com" />
-        </a-form-item>
-        <a-form-item label="Academia/Institución">
-          <a-input v-model:value="contactForm.company" placeholder="Nombre de tu academia" />
-        </a-form-item>
-        <a-form-item label="Mensaje">
-          <a-textarea 
-            v-model:value="contactForm.message" 
-            placeholder="Cuéntanos cómo podemos ayudarte..."
-            :rows="4"
-          />
-        </a-form-item>
-      </a-form>
-    </a-modal>
-  </a-layout-content>
-</template>
-
-<script setup>
-import { ref, onMounted, onUnmounted, computed } from 'vue'
-import { useRouter } from 'vue-router'
-import { 
-  RocketOutlined,
-  MenuOutlined,
-  HomeOutlined,
-  BankOutlined,
-  AppstoreOutlined,
-  DollarOutlined,
-  MessageOutlined,
-  PhoneOutlined,
-  LoginOutlined,
-  UserAddOutlined,
-  FileTextOutlined,
-  TeamOutlined,
-  BarChartOutlined,
-  CalendarOutlined,
-  MobileOutlined,
-  SettingOutlined,
-  PlayCircleOutlined,
-  CheckCircleOutlined,
-  MinusOutlined,
-  FacebookOutlined,
-  TwitterOutlined,
-  InstagramOutlined,
-  LinkedinOutlined,
-  BookOutlined,
-  ExperimentOutlined
-} from '@ant-design/icons-vue'
-import { notification } from 'ant-design-vue'
-
-const router = useRouter()
-
-// Estado responsive
-const windowWidth = ref(window.innerWidth)
-const isMobile = computed(() => windowWidth.value < 768)
-
-// Estado del componente
-const selectedMenu = ref(['inicio'])
-const mobileMenuVisible = ref(false)
-const yearlyBilling = ref(true)
-const contactModalVisible = ref(false)
-
-// Formulario de contacto
-const contactForm = ref({
-  name: '',
-  email: '',
-  company: '',
-  message: ''
-})
-
-// Event Listeners para responsive
-const handleResize = () => {
-  windowWidth.value = window.innerWidth
-}
-
-onMounted(() => {
-  window.addEventListener('resize', handleResize)
-  // Añadir scroll suave
-  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-    anchor.addEventListener('click', function (e) {
-      e.preventDefault()
-      const target = document.querySelector(this.getAttribute('href'))
-      if (target) {
-        target.scrollIntoView({ behavior: 'smooth' })
-      }
-    })
-  })
-})
-
-onUnmounted(() => {
-  window.removeEventListener('resize', handleResize)
-})
-
-// Métodos
-const scrollToSection = (sectionId) => {
-  const element = document.getElementById(sectionId)
-  if (element) {
-    element.scrollIntoView({ behavior: 'smooth' })
-  }
-}
-
-const handleMobileMenuClick = ({ key }) => {
-  if (key === 'login') {
-    router.push('/login')
-  } else if (key === 'registro') {
-    router.push('/registro')
-  } else if (key === 'inicio') {
-    scrollToSection('hero')
-  } else if (key === 'academias') {
-    scrollToSection('academias')
-  } else if (key === 'caracteristicas') {
-    scrollToSection('features')
-  } else if (key === 'precios') {
-    scrollToSection('pricing')
-  } else if (key === 'testimonios') {
-    scrollToSection('testimonials')
-  } else if (key === 'contacto') {
-    scrollToSection('contact')
-  }
-  mobileMenuVisible.value = false
-}
-
-const openContactModal = () => {
-  contactModalVisible.value = true
-}
-
-const submitContactForm = async () => {
-  try {
-    // Aquí iría la lógica para enviar el formulario
-    notification.success({
-      message: 'Mensaje enviado',
-      description: 'Te contactaremos en las próximas 24 horas'
-    })
-    contactModalVisible.value = false
-    contactForm.value = { name: '', email: '', company: '', message: '' }
-  } catch (error) {
-    notification.error({
-      message: 'Error',
-      description: 'No se pudo enviar el mensaje. Intenta nuevamente.'
-    })
-  }
-}
-</script>
-
-<style scoped>
-/* Header */
-.landing-header {
-  background: #fff;
-  padding: 0;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 1000;
-}
-
-.header-container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 24px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 72px;
-}
-
-.logo {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 24px;
-  font-weight: 700;
-  color: #1890ff;
-}
-
-.logo-text {
-  color: #333;
-}
-
-.logo-highlight {
-  color: #1890ff;
-}
-
-.nav-desktop :deep(.ant-menu) {
-  background: transparent;
-  border: none;
-}
-
-.header-actions {
-  display: flex;
-  align-items: center;
-}
-
-.mobile-menu-btn {
-  font-size: 20px;
-}
-
-/* Hero Section */
-.landing-content {
-  margin-top: 72px;
-}
-
-.hero-section {
-  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-  padding: 80px 0;
-  overflow: hidden;
-}
-
-.hero-container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 24px;
-  display: flex;
-  align-items: center;
-  gap: 48px;
-}
-
-.hero-content {
-  flex: 1;
-}
-
-.hero-title {
-  font-size: clamp(2rem, 5vw, 3.5rem);
-  font-weight: 800;
-  line-height: 1.2;
-  margin-bottom: 24px;
-  color: #333;
-}
-
-.text-gradient {
-  background: linear-gradient(135deg, #1890ff 0%, #722ed1 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.hero-subtitle {
-  font-size: clamp(1rem, 2vw, 1.25rem);
-  color: #666;
-  margin-bottom: 32px;
-  line-height: 1.6;
-}
-
-.hero-actions {
-  margin-bottom: 48px;
-}
-
-.cta-button {
-  background: linear-gradient(135deg, #1890ff 0%, #722ed1 100%);
-  border: none;
-  height: 48px;
-  padding: 0 32px;
-  font-weight: 600;
-}
-
-.demo-button {
-  height: 48px;
-  padding: 0 32px;
-  font-weight: 600;
-}
-
-.hero-stats {
-  display: flex;
-  gap: 32px;
-  flex-wrap: wrap;
-}
-
-.stat-item {
-  text-align: center;
-}
-
-.stat-number {
-  font-size: 2rem;
-  font-weight: 700;
-  color: #1890ff;
-  margin-bottom: 4px;
-}
-
-.stat-label {
-  color: #666;
-  font-size: 0.875rem;
-}
-
-.hero-image {
-  flex: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.dashboard-image {
-  width: 100%;
-  max-width: 600px;
-  border-radius: 16px;
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
-  transform: perspective(1000px) rotateY(-10deg);
-}
-
-/* Trust Section */
-.trust-section {
-  padding: 60px 0;
-  background: #fff;
-}
-
-.section-container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 24px;
-}
-
-.section-subtitle {
-  text-align: center;
-  color: #666;
-  margin-bottom: 32px;
-  font-size: 1rem;
-}
-
-.trust-logos {
-  display: flex;
-  justify-content: center;
-  gap: 48px;
-  flex-wrap: wrap;
-}
-
-.logo-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 1.125rem;
-  color: #333;
-}
-
-.logo-item :deep(.anticon) {
-  font-size: 24px;
-  color: #1890ff;
-}
-
-/* Features Section */
-.features-section {
-  padding: 80px 0;
-  background: #f8f9fa;
-}
-
-.section-header {
-  text-align: center;
-  margin-bottom: 48px;
-}
-
-.section-title {
-  font-size: clamp(1.75rem, 4vw, 2.5rem);
-  font-weight: 700;
-  color: #333;
-  margin-bottom: 16px;
-}
-
-.section-description {
-  font-size: 1.125rem;
-  color: #666;
-  max-width: 600px;
-  margin: 0 auto;
-}
-
-.feature-card {
-  height: 100%;
-  transition: transform 0.3s;
-}
-
-.feature-card:hover {
-  transform: translateY(-8px);
-}
-
-.feature-icon {
-  height: 120px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 8px 8px 0 0;
-}
-
-/* How It Works */
-.how-it-works-section {
-  padding: 80px 0;
-  background: #fff;
-}
-
-.steps-grid {
-  margin-top: 48px;
-}
-
-.step-item {
-  text-align: center;
-  padding: 32px;
-}
-
-.step-number {
-  font-size: 4rem;
-  font-weight: 900;
-  color: #f0f0f0;
-  margin-bottom: -40px;
-}
-
-.step-icon {
-  width: 80px;
-  height: 80px;
-  background: linear-gradient(135deg, #1890ff 0%, #722ed1 100%);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0 auto 24px;
-}
-
-.step-icon :deep(.anticon) {
-  font-size: 32px;
-  color: white;
-}
-
-.step-title {
-  font-size: 1.5rem;
-  font-weight: 600;
-  margin-bottom: 16px;
-  color: #333;
-}
-
-.step-description {
-  color: #666;
-  line-height: 1.6;
-}
-
-/* Pricing Section */
-.pricing-section {
-  padding: 80px 0;
-  background: #f8f9fa;
-}
-
-.pricing-toggle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 16px;
-  margin-top: 24px;
-}
-
-.pricing-card {
-  position: relative;
-  text-align: center;
-  border-radius: 16px;
-  padding: 32px;
-  transition: all 0.3s;
-}
-
-.pricing-card.popular {
-  border: 2px solid #1890ff;
-  transform: scale(1.05);
-  box-shadow: 0 20px 40px rgba(24, 144, 255, 0.1);
-}
-
-.popular-tag {
-  position: absolute;
-  top: -12px;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.pricing-header {
-  margin-bottom: 32px;
-}
-
-.plan-name {
-  font-size: 1.5rem;
-  font-weight: 600;
-  margin-bottom: 16px;
-  color: #333;
-}
-
-.plan-price {
-  margin-bottom: 16px;
-}
-
-.price-currency {
-  font-size: 1.5rem;
-  vertical-align: top;
-  color: #666;
-}
-
-.price-amount {
-  font-size: 3rem;
-  font-weight: 700;
-  color: #333;
-}
-
-.price-period {
-  color: #666;
-  font-size: 1rem;
-}
-
-.plan-description {
-  color: #666;
-}
-
-.plan-features {
-  margin: 32px 0;
-  text-align: left;
-}
-
-.feature-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 12px;
-  color: #333;
-}
-
-.feature-item .disabled {
-  color: #999;
-}
-
-.pricing-footer {
-  text-align: center;
-  margin-top: 48px;
-  color: #666;
-}
-
-/* Testimonials */
-.testimonials-section {
-  padding: 80px 0;
-  background: #fff;
-}
-
-.testimonial-card {
-  height: 100%;
-}
-
-.testimonial-content {
-  padding: 24px;
-}
-
-.testimonial-text {
-  font-size: 1.125rem;
-  line-height: 1.6;
-  color: #666;
-  margin-bottom: 32px;
-  font-style: italic;
-}
-
-.testimonial-author {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-.author-info {
-  text-align: left;
-}
-
-.author-name {
-  font-weight: 600;
-  color: #333;
-}
-
-.author-role {
-  color: #666;
-  font-size: 0.875rem;
-}
-
-/* CTA Section */
-.cta-section {
-  padding: 80px 0;
-  background: linear-gradient(135deg, #1890ff 0%, #722ed1 100%);
-  color: white;
-}
-
-.cta-content {
-  text-align: center;
-  max-width: 800px;
-  margin: 0 auto;
-}
-
-.cta-title {
-  font-size: clamp(2rem, 4vw, 3rem);
-  font-weight: 700;
-  margin-bottom: 24px;
-  color: white;
-}
-
-.cta-description {
-  font-size: 1.25rem;
-  margin-bottom: 48px;
-  opacity: 0.9;
-}
-
-/* Footer */
-.landing-footer {
-  background: #1a1a1a;
-  color: #fff;
-  padding: 64px 0 24px;
-}
-
-.footer-container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 24px;
-}
-
-.footer-main {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 48px;
-  margin-bottom: 48px;
-}
-
-.footer-column {
-  color: #fff;
-}
-
-.footer-logo {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 24px;
-  font-weight: 700;
-  margin-bottom: 16px;
-  color: white;
-}
-
-.footer-description {
-  color: #999;
-  margin-bottom: 24px;
-  line-height: 1.6;
-}
-
-.social-links {
-  margin-top: 16px;
-}
-
-.social-link {
-  color: #999;
-  font-size: 20px;
-  transition: color 0.3s;
-}
-
-.social-link:hover {
-  color: #1890ff;
-}
-
-.footer-title {
-  color: white;
-  font-size: 1.125rem;
-  font-weight: 600;
-  margin-bottom: 24px;
-}
-
-.footer-links {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.footer-links li {
-  margin-bottom: 12px;
-}
-
-.footer-links a {
-  color: #999;
-  text-decoration: none;
-  transition: color 0.3s;
-  cursor: pointer;
-}
-
-.footer-links a:hover {
-  color: #1890ff;
-}
-
-.footer-bottom {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding-top: 24px;
-  flex-wrap: wrap;
-}
-
-.copyright {
-  color: #999;
-}
-
-.footer-bottom-links a {
-  color: #999;
-  text-decoration: none;
-  transition: color 0.3s;
-  cursor: pointer;
-}
-
-.footer-bottom-links a:hover {
-  color: #1890ff;
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-  .hero-container {
-    flex-direction: column;
-    text-align: center;
-  }
-  
-  .hero-stats {
-    justify-content: center;
-  }
-  
-  .pricing-card.popular {
-    transform: none;
-  }
-  
-  .footer-bottom {
-    flex-direction: column;
-    gap: 16px;
-    text-align: center;
-  }
-  
-  .dashboard-image {
-    transform: none;
-  }
-}
-
-@media (max-width: 576px) {
-  .hero-section {
-    padding: 48px 0;
-  }
-  
-  .trust-logos {
-    gap: 24px;
-  }
-  
-  .step-item {
-    padding: 16px;
-  }
-}
-</style>
\ No newline at end of file
diff --git a/front/src/components/Postulante/VincularAcademia.vue b/front/src/components/Postulante/VincularAcademia.vue
deleted file mode 100644
index 3fbacd4..0000000
--- a/front/src/components/Postulante/VincularAcademia.vue
+++ /dev/null
@@ -1,615 +0,0 @@
-<!-- components/Postulante/VinculacionAcademia.vue -->
-<template>
-  <div class="vinculacion-modal">
-    <div class="modal-content">
-      <!-- Paso 1: Ingresar código -->
-      <div class="step-ingreso" v-if="paso === 1">
-        <div class="step-header">
-          <div class="step-number active">1</div>
-          <div class="step-info">
-            <h3>Ingresa el código de academia</h3>
-            <p>Pide el código a tu profesor o coordinador</p>
-          </div>
-        </div>
-        
-        <a-form
-          :model="formState"
-          layout="vertical"
-          @finish="validarCodigo"
-          class="codigo-form"
-        >
-          <a-form-item
-            label="Código de Academia"
-            :rules="[
-              { required: true, message: 'Ingresa el código' },
-              { pattern: /^[A-Z0-9\-]+$/, message: 'Solo letras mayúsculas, números y guiones' }
-            ]"
-          >
-            <a-input
-              v-model:value="formState.codigo"
-              placeholder="Ej: AC001-2024"
-              size="large"
-              :disabled="vinculacionStore.isLoading"
-              @input="formatearCodigo"
-            >
-              <template #prefix>
-                <KeyOutlined style="color: #666" />
-              </template>
-              <template #suffix>
-                <a-tooltip title="¿Cómo obtener el código?">
-                  <QuestionCircleOutlined 
-                    @click="mostrarAyuda" 
-                    style="cursor: pointer; color: #666" 
-                  />
-                </a-tooltip>
-              </template>
-            </a-input>
-          </a-form-item>
-          
-          <a-form-item>
-            <a-button
-              type="primary"
-              html-type="submit"
-              size="large"
-              :loading="vinculacionStore.isLoading"
-              block
-            >
-              Validar Código
-            </a-button>
-          </a-form-item>
-        </a-form>
-        
-        <!-- Códigos recientes -->
-        <div class="codigos-recientes" v-if="codigosRecientes.length > 0">
-          <h4>Códigos recientes</h4>
-          <a-space :size="8" wrap>
-            <a-tag
-              v-for="codigo in codigosRecientes"
-              :key="codigo"
-              color="blue"
-              style="cursor: pointer"
-              @click="usarCodigoReciente(codigo)"
-            >
-              {{ codigo }}
-              <CloseOutlined @click.stop="eliminarCodigoReciente(codigo)" />
-            </a-tag>
-          </a-space>
-        </div>
-        
-        <!-- Ayuda QR -->
-        <div class="qr-section">
-          <p class="qr-title">
-            <QrcodeOutlined /> También puedes usar QR
-          </p>
-          <div class="qr-actions">
-            <a-button @click="escanearQR">
-              <CameraOutlined />
-              Escanear QR
-            </a-button>
-            <a-button @click="mostrarEjemploQR">
-              <EyeOutlined />
-              Ver ejemplo
-            </a-button>
-          </div>
-        </div>
-      </div>
-      
-      <!-- Paso 2: Confirmar vinculación -->
-      <div class="step-confirmacion" v-else-if="paso === 2 && vinculacionStore.codigoValidado">
-        <div class="step-header">
-          <div class="step-number active">2</div>
-          <div class="step-info">
-            <h3>Confirmar vinculación</h3>
-            <p>Revisa los detalles antes de vincular</p>
-          </div>
-        </div>
-        
-        <a-card class="academia-info-card">
-          <a-space direction="vertical" size="large" style="width: 100%">
-            <!-- Información de la academia -->
-            <div class="academia-details">
-              <div class="academia-header">
-                <a-avatar :size="48" :style="{ backgroundColor: stringToColor(vinculacionStore.codigoValidado.nombre) }">
-                  {{ vinculacionStore.codigoValidado.nombre.charAt(0).toUpperCase() }}
-                </a-avatar>
-                <div class="academia-titulo">
-                  <h3 style="margin: 0">{{ vinculacionStore.codigoValidado.nombre }}</h3>
-                  <p style="margin: 0; color: #666">
-                    Código: <strong>{{ vinculacionStore.codigoValidado.codigo }}</strong>
-                  </p>
-                </div>
-              </div>
-              
-              <a-divider style="margin: 16px 0" />
-              
-              <!-- Estadísticas -->
-              <a-row :gutter="16" class="academia-stats">
-                <a-col :span="12">
-                  <div class="stat-item">
-                    <TeamOutlined style="color: #1890ff; font-size: 20px" />
-                    <div class="stat-info">
-                      <div class="stat-value">{{ vinculacionStore.codigoValidado.estudiantes_activos }}</div>
-                      <div class="stat-label">Estudiantes</div>
-                    </div>
-                  </div>
-                </a-col>
-                <a-col :span="12">
-                  <div class="stat-item">
-                    <FileTextOutlined style="color: #52c41a; font-size: 20px" />
-                    <div class="stat-info">
-                      <div class="stat-value">+{{ examenesCount }}</div>
-                      <div class="stat-label">Exámenes</div>
-                    </div>
-                  </div>
-                </a-col>
-              </a-row>
-              
-              <!-- Límite de estudiantes -->
-              <a-alert
-                v-if="vinculacionStore.codigoValidado.estudiantes_activos >= vinculacionStore.codigoValidado.limite_estudiantes * 0.9"
-                type="warning"
-                message="Cupo casi lleno"
-                :description="`${vinculacionStore.codigoValidado.estudiantes_activos}/${vinculacionStore.codigoValidado.limite_estudiantes} estudiantes`"
-                show-icon
-                style="margin-top: 16px"
-              />
-              
-              <!-- Estado -->
-              <div class="academia-status">
-                <a-tag :color="vinculacionStore.codigoValidado.activa ? 'green' : 'red'">
-                  {{ vinculacionStore.codigoValidado.activa ? 'Activa' : 'Inactiva' }}
-                </a-tag>
-                <span v-if="vinculacionStore.codigoValidado.ya_vinculado" class="ya-vinculado">
-                  <CheckCircleOutlined /> Ya estás vinculado
-                </span>
-              </div>
-            </div>
-            
-            <!-- Acciones -->
-            <div class="acciones-confirmacion">
-              <a-space :size="16" style="width: 100%">
-                <a-button
-                  @click="paso = 1"
-                  :disabled="vinculacionStore.isLoading"
-                  block
-                >
-                  <LeftOutlined />
-                  Volver
-                </a-button>
-                <a-button
-                  type="primary"
-                  @click="confirmarVinculacion"
-                  :loading="vinculacionStore.isLoading"
-                  :disabled="
-                    vinculacionStore.codigoValidado.ya_vinculado ||
-                    !vinculacionStore.codigoValidado.activa ||
-                    vinculacionStore.codigoValidado.estudiantes_activos >= vinculacionStore.codigoValidado.limite_estudiantes
-                  "
-
-                  block
-                >
-                  <template v-if="vinculacionStore.codigoValidado.ya_vinculado">
-                    Ya vinculado
-                  </template>
-                  <template v-else>
-                    <LinkOutlined />
-                    Vincularme
-                  </template>
-                </a-button>
-              </a-space>
-            </div>
-          </a-space>
-        </a-card>
-      </div>
-      
-      <!-- Paso 3: Éxito -->
-      <div class="step-exito" v-else-if="paso === 3">
-        <div class="exito-content">
-          <div class="exito-icon">
-            <CheckCircleOutlined style="font-size: 64px; color: #52c41a" />
-          </div>
-          <h2>¡Vinculación exitosa!</h2>
-          <p>Ahora formas parte de <strong>{{ academiaVinculada?.nombre }}</strong></p>
-          
-          <div class="exito-details">
-            <a-card size="small">
-              <a-list size="small">
-                <a-list-item>
-                  <template #actions>
-                    <a-tag color="blue">{{ academiaVinculada?.codigo }}</a-tag>
-                  </template>
-                  <a-list-item-meta>
-                    <template #title>
-                      Código de academia
-                    </template>
-                  </a-list-item-meta>
-                </a-list-item>
-                <a-list-item>
-                  <template #actions>
-                    <span>{{ examenesDisponibles }} disponibles</span>
-                  </template>
-                  <a-list-item-meta>
-                    <template #title>
-                      Exámenes
-                    </template>
-                  </a-list-item-meta>
-                </a-list-item>
-              </a-list>
-            </a-card>
-          </div>
-          
-          <div class="exito-acciones">
-            <a-space :size="16" style="width: 100%">
-              <a-button @click="cerrarModal" block>
-                Continuar
-              </a-button>
-              <a-button type="primary" @click="irAExamenes" block>
-                <EyeOutlined />
-                Ver exámenes
-              </a-button>
-            </a-space>
-          </div>
-        </div>
-      </div>
-      
-      <!-- Error -->
-      <div class="step-error" v-else-if="paso === 'error'">
-        <div class="error-content">
-          <div class="error-icon">
-            <CloseCircleOutlined style="font-size: 64px; color: #ff4d4f" />
-          </div>
-          <h2>Error en la vinculación</h2>
-          <p>{{ errorMensaje }}</p>
-          
-          <div class="error-sugerencias">
-            <a-alert
-              type="info"
-              message="Sugerencias:"
-              description="1. Verifica que el código sea correcto
-              2. Asegúrate de que la academia esté activa
-              3. Contacta al administrador de la academia"
-              show-icon
-            />
-          </div>
-          
-          <div class="error-acciones">
-            <a-space :size="16" style="width: 100%">
-              <a-button @click="reiniciarProceso" type="primary" block>
-                <ReloadOutlined />
-                Intentar nuevamente
-              </a-button>
-              <a-button @click="cerrarModal" block>
-                Cancelar
-              </a-button>
-            </a-space>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive, onMounted } from 'vue'
-import { message } from 'ant-design-vue'
-import { useVinculacionStore } from '../../store/vinculacion'
-import {
-  KeyOutlined,
-  QuestionCircleOutlined,
-  CloseOutlined,
-  QrcodeOutlined,
-  CameraOutlined,
-  EyeOutlined,
-  TeamOutlined,
-  FileTextOutlined,
-  LeftOutlined,
-  LinkOutlined,
-  CheckCircleOutlined,
-  CloseCircleOutlined,
-  ReloadOutlined
-} from '@ant-design/icons-vue'
-
-const vinculacionStore = useVinculacionStore()
-const emit = defineEmits(['cerrar'])
-
-const paso = ref(1)
-const formState = reactive({
-  codigo: ''
-})
-const codigosRecientes = ref([])
-const academiaVinculada = ref(null)
-const errorMensaje = ref('')
-const examenesCount = ref(15) // Esto vendría del backend
-
-onMounted(() => {
-  cargarCodigosRecientes()
-})
-
-const cargarCodigosRecientes = () => {
-  const codigos = localStorage.getItem('codigos_recientes')
-  if (codigos) {
-    codigosRecientes.value = JSON.parse(codigos)
-  }
-}
-
-const guardarCodigoReciente = (codigo) => {
-  const codigos = new Set([codigo, ...codigosRecientes.value])
-  codigosRecientes.value = Array.from(codigos).slice(0, 5)
-  localStorage.setItem('codigos_recientes', JSON.stringify(codigosRecientes.value))
-}
-
-const eliminarCodigoReciente = (codigo) => {
-  codigosRecientes.value = codigosRecientes.value.filter(c => c !== codigo)
-  localStorage.setItem('codigos_recientes', JSON.stringify(codigosRecientes.value))
-}
-
-const usarCodigoReciente = (codigo) => {
-  formState.codigo = codigo
-  validarCodigo()
-}
-
-const formatearCodigo = () => {
-  formState.codigo = formState.codigo.toUpperCase().replace(/[^A-Z0-9\-]/g, '')
-}
-
-const validarCodigo = async () => {
-  if (!formState.codigo.trim()) {
-    message.error('Ingresa un código válido')
-    return
-  }
-  
-  try {
-    await vinculacionStore.validarCodigo(formState.codigo)
-    guardarCodigoReciente(formState.codigo)
-    paso.value = 2
-  } catch (error) {
-    // Error manejado en el store
-  }
-}
-
-const confirmarVinculacion = async () => {
-  try {
-    const resultado = await vinculacionStore.vincularAcademia(formState.codigo)
-    academiaVinculada.value = resultado.academia
-    paso.value = 3
-  } catch (error) {
-    paso.value = 'error'
-    errorMensaje.value = vinculacionStore.getError || 'Error al vincular con la academia'
-  }
-}
-
-const mostrarAyuda = () => {
-  message.info('El código te lo debe proporcionar tu profesor o coordinador de la academia')
-}
-
-const escanearQR = () => {
-  message.info('Función de escaneo de QR en desarrollo')
-}
-
-const mostrarEjemploQR = () => {
-  message.info('El QR contiene el código de la academia para escanear')
-}
-
-const stringToColor = (str) => {
-  let hash = 0
-  for (let i = 0; i < str.length; i++) {
-    hash = str.charCodeAt(i) + ((hash << 5) - hash)
-  }
-  const colors = ['#1890ff', '#52c41a', '#722ed1', '#fa8c16', '#f5222d']
-  return colors[Math.abs(hash) % colors.length]
-}
-
-const cerrarModal = () => {
-  vinculacionStore.hideModalVinculacion()
-  reiniciarProceso()
-}
-
-const irAExamenes = () => {
-  cerrarModal()
-  // Navegar a exámenes
-  router.push('/postulante/examenes')
-}
-
-const reiniciarProceso = () => {
-  paso.value = 1
-  formState.codigo = ''
-  academiaVinculada.value = null
-  errorMensaje.value = ''
-}
-
-const examenesDisponibles = ref(3) // Esto vendría del backend
-</script>
-
-<style scoped>
-.vinculacion-modal {
-  padding: 24px;
-}
-
-.modal-content {
-  max-width: 500px;
-  margin: 0 auto;
-}
-
-/* Pasos */
-.step-header {
-  display: flex;
-  align-items: flex-start;
-  gap: 16px;
-  margin-bottom: 24px;
-}
-
-.step-number {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 600;
-  background: #f0f0f0;
-  color: #999;
-}
-
-.step-number.active {
-  background: #1890ff;
-  color: white;
-}
-
-.step-info h3 {
-  margin: 0 0 4px 0;
-  font-size: 18px;
-}
-
-.step-info p {
-  margin: 0;
-  color: #666;
-  font-size: 14px;
-}
-
-/* Formulario */
-.codigo-form {
-  margin-bottom: 24px;
-}
-
-/* Códigos recientes */
-.codigos-recientes {
-  margin-bottom: 24px;
-}
-
-.codigos-recientes h4 {
-  margin: 0 0 8px 0;
-  font-size: 14px;
-  color: #666;
-}
-
-/* QR Section */
-.qr-section {
-  background: #fafafa;
-  border-radius: 8px;
-  padding: 16px;
-  text-align: center;
-}
-
-.qr-title {
-  margin: 0 0 12px 0;
-  font-weight: 500;
-}
-
-.qr-actions {
-  display: flex;
-  gap: 8px;
-  justify-content: center;
-}
-
-/* Academia Info Card */
-.academia-info-card {
-  margin-bottom: 24px;
-}
-
-.academia-header {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  margin-bottom: 16px;
-}
-
-.academia-titulo {
-  flex: 1;
-}
-
-.academia-stats {
-  margin: 16px 0;
-}
-
-.stat-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.stat-value {
-  font-size: 20px;
-  font-weight: 600;
-  line-height: 1;
-}
-
-.stat-label {
-  font-size: 12px;
-  color: #666;
-  margin-top: 2px;
-}
-
-.academia-status {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-top: 16px;
-}
-
-.ya-vinculado {
-  color: #52c41a;
-  font-size: 14px;
-}
-
-/* Éxito y Error */
-.exito-content,
-.error-content {
-  text-align: center;
-  padding: 24px 0;
-}
-
-.exito-icon,
-.error-icon {
-  margin-bottom: 24px;
-}
-
-.exito-content h2,
-.error-content h2 {
-  margin: 0 0 8px 0;
-  color: #333;
-}
-
-.exito-content p,
-.error-content p {
-  margin: 0 0 24px 0;
-  color: #666;
-}
-
-.exito-details,
-.error-sugerencias {
-  margin-bottom: 24px;
-}
-
-.exito-acciones,
-.error-acciones {
-  max-width: 400px;
-  margin: 0 auto;
-}
-
-/* Responsive */
-@media (max-width: 576px) {
-  .vinculacion-modal {
-    padding: 16px;
-  }
-  
-  .step-header {
-    flex-direction: column;
-    gap: 8px;
-    text-align: center;
-  }
-  
-  .step-number {
-    align-self: center;
-  }
-  
-  .qr-actions {
-    flex-direction: column;
-  }
-  
-  .academia-header {
-    flex-direction: column;
-    text-align: center;
-    gap: 12px;
-  }
-}
-</style>
\ No newline at end of file
diff --git a/front/src/components/SuperAdmin/AcademiasList.vue b/front/src/components/SuperAdmin/AcademiasList.vue
deleted file mode 100644
index 87608f1..0000000
--- a/front/src/components/SuperAdmin/AcademiasList.vue
+++ /dev/null
@@ -1,307 +0,0 @@
-<!-- components/SuperAdmin/AcademiasList.vue -->
-<template>
-  <div class="academias-list">
-    <a-card title="Gestión de Academias" class="mb-4">
-      <template #extra>
-        <a-space>
-          <a-input-search
-            v-model:value="searchText"
-            placeholder="Buscar academias..."
-            style="width: 250px"
-            @search="handleSearch"
-          />
-          <a-button type="primary" @click="showModal = true">
-            <template #icon><plus-outlined /></template>
-            Nueva Academia
-          </a-button>
-        </a-space>
-      </template>
-      
-      <a-table
-        :columns="columns"
-        :data-source="academiaStore.getAcademias"
-        :loading="academiaStore.isLoading"
-        :pagination="academiaStore.getPagination"
-        @change="handleTableChange"
-      >
-        <template #bodyCell="{ column, record }">
-          <template v-if="column.key === 'codigo'">
-            <a-tag color="blue">{{ record.codigo }}</a-tag>
-          </template>
-          
-          <template v-if="column.key === 'estado'">
-            <a-tag :color="record.activa ? 'green' : 'red'">
-              {{ record.activa ? 'Activa' : 'Inactiva' }}
-            </a-tag>
-          </template>
-          
-          <template v-if="column.key === 'estudiantes'">
-            <span>{{ record.estudiantes_activos }} / {{ record.limite_estudiantes }}</span>
-          </template>
-          
-          <template v-if="column.key === 'admin'">
-            <span>{{ record.admin_academia?.name || 'No asignado' }}</span>
-          </template>
-          
-          <template v-if="column.key === 'acciones'">
-            <a-space>
-              <a-button type="link" size="small" @click="verDetalles(record)">
-                <eye-outlined />
-              </a-button>
-              <a-button type="link" size="small" @click="editarAcademia(record)">
-                <edit-outlined />
-              </a-button>
-              <a-popconfirm
-                title="¿Estás seguro de eliminar esta academia?"
-                @confirm="eliminarAcademia(record.id)"
-              >
-                <a-button type="link" danger size="small">
-                  <delete-outlined />
-                </a-button>
-              </a-popconfirm>
-            </a-space>
-          </template>
-        </template>
-      </a-table>
-    </a-card>
-
-    <!-- Modal para crear/editar academia -->
-    <a-modal
-      v-model:open="showModal"
-      :title="modalTitle"
-      width="600px"
-      @ok="handleModalOk"
-      @cancel="handleModalCancel"
-    >
-      <a-form
-        ref="formRef"
-        :model="formState"
-        :rules="rules"
-        layout="vertical"
-        @finish="handleSubmit"
-      >
-        <a-form-item label="Nombre" name="nombre">
-          <a-input
-            v-model:value="formState.nombre"
-            placeholder="Nombre de la academia"
-          />
-        </a-form-item>
-        
-        <a-form-item label="Descripción" name="descripcion">
-          <a-textarea
-            v-model:value="formState.descripcion"
-            placeholder="Descripción de la academia"
-            :rows="3"
-          />
-        </a-form-item>
-        
-        <a-form-item label="Límite de Estudiantes" name="limite_estudiantes">
-          <a-input-number
-            v-model:value="formState.limite_estudiantes"
-            :min="1"
-            :max="10000"
-            style="width: 100%"
-          />
-        </a-form-item>
-        
-        <a-form-item label="Administrador" name="admin_academia_id" required>
-          <a-select
-            v-model:value="formState.admin_academia_id"
-            placeholder="Seleccionar administrador"
-            :loading="loadingAdmins"
-            show-search
-            option-filter-prop="label"
-          >
-            <a-select-option
-              v-for="admin in administradores"
-              :key="admin.id"
-              :value="admin.id"
-              :label="admin.name"
-            >
-              {{ admin.name }} ({{ admin.email }})
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-        
-        <a-form-item label="Estado" name="activa">
-          <a-switch
-            v-model:checked="formState.activa"
-            checked-children="Activa"
-            un-checked-children="Inactiva"
-          />
-        </a-form-item>
-      </a-form>
-    </a-modal>
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive, computed, onMounted } from 'vue'
-import { message } from 'ant-design-vue'
-import {
-  PlusOutlined,
-  EyeOutlined,
-  EditOutlined,
-  DeleteOutlined
-} from '@ant-design/icons-vue'
-import { useAcademiaStore } from '../../stores/academia'
-import { useUserStore } from '../../stores/user'
-
-const academiaStore = useAcademiaStore()
-const userStore = useUserStore()
-
-const searchText = ref('')
-const showModal = ref(false)
-const formRef = ref()
-const loadingAdmins = ref(false)
-const administradores = ref([])
-const editingId = ref(null)
-
-const columns = [
-  {
-    title: 'Código',
-    dataIndex: 'codigo',
-    key: 'codigo',
-    width: 150
-  },
-  {
-    title: 'Nombre',
-    dataIndex: 'nombre',
-    key: 'nombre',
-    ellipsis: true
-  },
-  {
-    title: 'Estado',
-    key: 'estado',
-    width: 100
-  },
-  {
-    title: 'Estudiantes',
-    key: 'estudiantes',
-    width: 150
-  },
-  {
-    title: 'Administrador',
-    key: 'admin',
-    ellipsis: true
-  },
-  {
-    title: 'Creada',
-    dataIndex: 'created_at',
-    key: 'created_at',
-    width: 150,
-    customRender: ({ text }) => new Date(text).toLocaleDateString()
-  },
-  {
-    title: 'Acciones',
-    key: 'acciones',
-    width: 150
-  }
-]
-
-const formState = reactive({
-  nombre: '',
-  descripcion: '',
-  limite_estudiantes: 100,
-  admin_academia_id: null,
-  activa: true
-})
-
-const rules = {
-  nombre: [
-    { required: true, message: 'Por favor ingresa el nombre' },
-    { max: 255, message: 'Máximo 255 caracteres' }
-  ],
-  admin_academia_id: [
-    { required: true, message: 'Por favor selecciona un administrador' }
-  ]
-}
-
-const modalTitle = computed(() => 
-  editingId.value ? 'Editar Academia' : 'Nueva Academia'
-)
-
-onMounted(() => {
-  academiaStore.fetchAcademias()
-  cargarAdministradores()
-})
-
-const cargarAdministradores = async () => {
-  try {
-    loadingAdmins.value = true
-    // Aquí deberías implementar un endpoint para obtener usuarios con rol administrador
-    const response = await api.get('/usuarios?role=administrador')
-    administradores.value = response.data
-  } catch (error) {
-    message.error('Error al cargar administradores')
-  } finally {
-    loadingAdmins.value = false
-  }
-}
-
-const handleSearch = () => {
-  academiaStore.setFiltros({ search: searchText.value })
-}
-
-const handleTableChange = (pagination) => {
-  academiaStore.setPagination({
-    current: pagination.current,
-    pageSize: pagination.pageSize
-  })
-}
-
-const verDetalles = (academia) => {
-  // Navegar a la vista de detalles
-  router.push(`/admin/academias/${academia.id}`)
-}
-
-const editarAcademia = (academia) => {
-  editingId.value = academia.id
-  Object.assign(formState, {
-    nombre: academia.nombre,
-    descripcion: academia.descripcion,
-    limite_estudiantes: academia.limite_estudiantes,
-    admin_academia_id: academia.admin_academia_id,
-    activa: academia.activa
-  })
-  showModal.value = true
-}
-
-const eliminarAcademia = async (id) => {
-  await academiaStore.deleteAcademia(id)
-}
-
-const handleModalOk = () => {
-  formRef.value.validateFields().then(async () => {
-    if (editingId.value) {
-      await academiaStore.updateAcademia(editingId.value, formState)
-    } else {
-      await academiaStore.createAcademia(formState)
-    }
-    showModal.value = false
-    resetForm()
-  })
-}
-
-const handleModalCancel = () => {
-  resetForm()
-}
-
-const resetForm = () => {
-  formRef.value?.resetFields()
-  editingId.value = null
-  Object.assign(formState, {
-    nombre: '',
-    descripcion: '',
-    limite_estudiantes: 100,
-    admin_academia_id: null,
-    activa: true
-  })
-}
-</script>
-
-<style scoped>
-.academias-list {
-  padding: 20px;
-}
-</style>
\ No newline at end of file
diff --git a/front/src/components/WebPage.vue b/front/src/components/WebPage.vue
new file mode 100644
index 0000000..1abbfeb
--- /dev/null
+++ b/front/src/components/WebPage.vue
@@ -0,0 +1,1140 @@
+<!-- components/ContenidoPrincipal.vue -->
+<template>
+  <NavbarModerno />
+
+  <div class="main-content">
+    <!-- Hero Section Moderno -->
+    <section class="modern-hero">
+      <div class="hero-container">
+        <div class="hero-content">
+          <a-tag color="blue" class="hero-tag">Nueva Convocatoria 2024</a-tag>
+          <h1 class="hero-title">
+            Tu futuro comienza
+            <span class="gradient-text">aquí</span>
+          </h1>
+          <p class="hero-subtitle">
+            Forma parte de la comunidad universitaria más prestigiosa del país.
+            <br>Admisión 2024-I | Inscripciones abiertas
+          </p>
+          <div class="hero-actions">
+            <a-button type="primary" size="large" class="cta-button" @click="scrollToConvocatoria">
+              <template #icon><RightCircleOutlined /></template>
+              Postular Ahora
+            </a-button>
+            <a-button size="large" class="secondary-button" @click="openVirtualTour">
+              <template #icon><PlayCircleOutlined /></template>
+              Tour Virtual
+            </a-button>
+          </div>
+        </div>
+        <div class="hero-visual">
+          <div class="floating-card">
+            <div class="card-header">
+              <CalendarOutlined />
+              <span>Próximo Evento</span>
+            </div>
+            <h3>Charla Informativa</h3>
+            <p>25 Nov | 4:00 PM - Virtual</p>
+            <a-button type="link" size="small">Registrarse</a-button>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Sección de Proceso de Admisión -->
+    <section class="process-section">
+      <div class="section-container">
+        <div class="section-header">
+          <h2 class="section-title">Proceso de Admisión 2024</h2>
+          <p class="section-subtitle">Sigue estos pasos para formar parte de nuestra comunidad universitaria</p>
+        </div>
+        
+        <div class="process-timeline">
+          <a-steps :current="2" class="modern-steps">
+            <a-step title="Inscripción" description="20 Oct - 30 Nov" />
+            <a-step title="Validación" description="1 - 5 Dic" />
+            <a-step title="Examen" description="15 Diciembre" />
+            <a-step title="Resultados" description="20 Diciembre" />
+            <a-step title="Matrícula" description="8 - 12 Ene" />
+          </a-steps>
+        </div>
+      </div>
+    </section>
+
+    <!-- Sección de Convocatorias (Principal) -->
+    <section id="convocatorias" class="convocatorias-modern">
+      <div class="section-container">
+        <div class="section-header">
+          <div class="header-with-badge">
+            <h2 class="section-title">Convocatorias Vigentes</h2>
+            <a-badge count="Nuevo" class="new-badge" />
+          </div>
+          <p class="section-subtitle">Selecciona el proceso de admisión que se ajuste a tu perfil</p>
+        </div>
+
+        <div class="convocatorias-grid">
+          <!-- Convocatoria Principal -->
+          <a-card class="main-convocatoria-card">
+            <div class="card-badge">Principal</div>
+            <div class="convocatoria-header">
+              <div>
+                <h3>Admisión Ordinaria 2024-I</h3>
+                <p class="convocatoria-date">Inscripciones: 20 Oct - 30 Nov 2023</p>
+              </div>
+              <a-tag color="success" class="status-tag">Abierto</a-tag>
+            </div>
+            
+            <p class="convocatoria-desc">
+              Proceso de admisión general para todas las carreras profesionales de pregrado.
+              Examen de conocimientos: 15 de diciembre 2023.
+            </p>
+            
+            <a-divider class="custom-divider" />
+            
+            <div class="quick-actions">
+              <h4>Acciones Rápidas</h4>
+              <div class="action-buttons-grid">
+                <a-button class="action-btn" @click="showModal('requisitos')">
+                  <template #icon><FileTextOutlined /></template>
+                  Requisitos
+                </a-button>
+                <a-button class="action-btn" @click="showModal('pagos')">
+                  <template #icon><DollarOutlined /></template>
+                  Pagos
+                </a-button>
+                <a-button class="action-btn" @click="showModal('vacantes')">
+                  <template #icon><TeamOutlined /></template>
+                  Vacantes
+                </a-button>
+                <a-button class="action-btn" @click="showModal('cronograma')">
+                  <template #icon><CalendarOutlined /></template>
+                  Cronograma
+                </a-button>
+              </div>
+            </div>
+            
+            <a-divider class="custom-divider" />
+            
+            <div class="preinscripcion-section">
+              <div class="preinscripcion-info">
+                <h4>Preinscripción en Línea</h4>
+                <p>Completa tu preinscripción de manera digital y segura</p>
+              </div>
+              <a-button type="primary" size="large" class="preinscripcion-btn" @click="openPreinscripcion">
+                <template #icon><FormOutlined /></template>
+                Iniciar Preinscripción
+              </a-button>
+            </div>
+          </a-card>
+
+          <!-- Otras convocatorias -->
+          <a-card class="secondary-convocatoria-card" v-for="conv in otrasConvocatorias" :key="conv.id">
+            <div class="convocatoria-header">
+              <div>
+                <h4>{{ conv.titulo }}</h4>
+                <p class="convocatoria-date">{{ conv.fecha }}</p>
+              </div>
+              <a-tag :color="conv.estadoColor" class="status-tag">{{ conv.estado }}</a-tag>
+            </div>
+            <p class="convocatoria-desc">{{ conv.descripcion }}</p>
+            <div class="card-footer">
+              <a-button type="link" size="small">Ver detalles</a-button>
+              <a-button type="primary" ghost size="small">Consultar</a-button>
+            </div>
+          </a-card>
+        </div>
+      </div>
+    </section>
+
+    <!-- Sección de Programas Académicos -->
+    <section class="programas-section">
+      <div class="section-container">
+        <div class="section-header">
+          <h2 class="section-title">Programas Académicos</h2>
+          <p class="section-subtitle">Explora nuestra oferta académica de pregrado y posgrado</p>
+        </div>
+
+        <div class="facultades-tabs">
+          <a-tabs v-model:activeKey="facultadActiva">
+            <a-tab-pane v-for="facultad in facultades" :key="facultad.id" :tab="facultad.nombre">
+              <div class="carreras-grid">
+                <a-card v-for="carrera in facultad.carreras" :key="carrera.id" class="carrera-card">
+                  <div class="carrera-header">
+                    <div class="carrera-icon">
+                      <component :is="carrera.icono" />
+                    </div>
+                    <div>
+                      <h4>{{ carrera.nombre }}</h4>
+                      <p class="carrera-grado">{{ carrera.grado }}</p>
+                    </div>
+                  </div>
+                  <p class="carrera-desc">{{ carrera.descripcion }}</p>
+                  <div class="carrera-stats">
+                    <span><UserOutlined /> Vacantes: {{ carrera.vacantes }}</span>
+                    <span><TrophyOutlined /> Puntaje: {{ carrera.puntaje }}</span>
+                  </div>
+                  <a-button type="link" size="small" class="carrera-link">Ver plan de estudios</a-button>
+                </a-card>
+              </div>
+            </a-tab-pane>
+          </a-tabs>
+        </div>
+      </div>
+    </section>
+
+    <!-- Sección de Estadísticas -->
+    <section class="stats-section">
+      <div class="section-container">
+        <div class="stats-grid">
+          <div class="stat-card">
+            <h3>25+</h3>
+            <p>Carreras Profesionales</p>
+          </div>
+          <div class="stat-card">
+            <h3>98%</h3>
+            <p>Indice de Satisfacción</p>
+          </div>
+          <div class="stat-card">
+            <h3>15,000+</h3>
+            <p>Estudiantes Activos</p>
+          </div>
+          <div class="stat-card">
+            <h3>85%</h3>
+            <p>Egresados Laborando</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Sección de Noticias y Comunicados -->
+    <section class="noticias-modern">
+      <div class="section-container">
+        <div class="section-header">
+          <h2 class="section-title">Noticias y Comunicados</h2>
+          <a-button type="link" class="view-all">Ver todos</a-button>
+        </div>
+
+        <div class="noticias-grid-modern">
+          <a-card v-for="noticia in noticias" :key="noticia.id" class="noticia-card-modern">
+            <div class="noticia-image" :style="{ backgroundImage: `url(${noticia.imagen})` }">
+              <a-tag :color="noticia.tagColor" class="noticia-tag">{{ noticia.categoria }}</a-tag>
+            </div>
+            <div class="noticia-content">
+              <div class="noticia-meta">
+                <CalendarOutlined />
+                <span>{{ noticia.fecha }}</span>
+              </div>
+              <h4>{{ noticia.titulo }}</h4>
+              <p>{{ noticia.descripcion }}</p>
+              <a-button type="link" size="small">Leer más</a-button>
+            </div>
+          </a-card>
+        </div>
+      </div>
+    </section>
+
+    <!-- Sección de Modalidades -->
+    <section class="modalidades-section">
+      <div class="section-container">
+        <div class="section-header">
+          <h2 class="section-title">Modalidades de Admisión</h2>
+          <p class="section-subtitle">Diferentes formas de ingresar a nuestra universidad</p>
+        </div>
+
+        <div class="modalidades-grid">
+          <a-card v-for="modalidad in modalidades" :key="modalidad.id" class="modalidad-card">
+            <div class="modalidad-icon" :style="{ backgroundColor: modalidad.color }">
+              <component :is="modalidad.icono" />
+            </div>
+            <h4>{{ modalidad.nombre }}</h4>
+            <p>{{ modalidad.descripcion }}</p>
+            <a-tag :color="modalidad.estadoColor" class="modalidad-status">
+              {{ modalidad.estado }}
+            </a-tag>
+          </a-card>
+        </div>
+      </div>
+    </section>
+
+    <!-- Sección de Contacto -->
+    <section class="contact-section">
+      <div class="section-container">
+        <div class="contact-grid">
+          <div class="contact-info">
+            <h2 class="section-title">¿Necesitas Ayuda?</h2>
+            <p class="contact-subtitle">Nuestro equipo está listo para asistirte en todo el proceso de admisión</p>
+            
+            <div class="contact-methods">
+              <div class="contact-method">
+                <PhoneOutlined />
+                <div>
+                  <h4>Teléfono</h4>
+                  <p>(01) 123-4567</p>
+                </div>
+              </div>
+              <div class="contact-method">
+                <MailOutlined />
+                <div>
+                  <h4>Email</h4>
+                  <p>admision@universidad.edu.pe</p>
+                </div>
+              </div>
+              <div class="contact-method">
+                <ClockCircleOutlined />
+                <div>
+                  <h4>Horario</h4>
+                  <p>Lun-Vie: 8:00 AM - 6:00 PM</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <div class="contact-form">
+            <h3>Envíanos un Mensaje</h3>
+            <a-form layout="vertical">
+              <a-form-item label="Nombre completo">
+                <a-input placeholder="Ingresa tu nombre completo" />
+              </a-form-item>
+              <a-form-item label="Email">
+                <a-input placeholder="tu@email.com" />
+              </a-form-item>
+              <a-form-item label="Consulta">
+                <a-textarea placeholder="Describe tu consulta..." :rows="4" />
+              </a-form-item>
+              <a-button type="primary" block>Enviar Mensaje</a-button>
+            </a-form>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Modal de Preinscripción -->
+    <a-modal 
+      v-model:visible="preinscripcionModalVisible" 
+      title="Preinscripción en Línea" 
+      width="600px"
+      :footer="null"
+      class="modern-modal"
+    >
+      <div class="modal-steps">
+        <a-steps :current="0" size="small">
+          <a-step title="Datos Personales" />
+          <a-step title="Programa" />
+          <a-step title="Documentos" />
+          <a-step title="Confirmación" />
+        </a-steps>
+      </div>
+      
+      <a-form layout="vertical" class="modal-form">
+        <h3>Información Personal</h3>
+        
+        <a-row :gutter="16">
+          <a-col :span="12">
+            <a-form-item label="Nombres">
+              <a-input placeholder="Ingresa tus nombres" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="Apellidos">
+              <a-input placeholder="Ingresa tus apellidos" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        
+        <a-form-item label="Correo Electrónico">
+          <a-input type="email" placeholder="ejemplo@correo.com" />
+        </a-form-item>
+        
+        <a-form-item label="Programa de Interés">
+          <a-select placeholder="Selecciona un programa">
+            <a-select-option v-for="facultad in facultades" :key="facultad.id">
+              <optgroup :label="facultad.nombre">
+                <a-select-option v-for="carrera in facultad.carreras" :key="carrera.id" :value="carrera.id">
+                  {{ carrera.nombre }}
+                </a-select-option>
+              </optgroup>
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        
+        <a-form-item>
+          <a-checkbox>
+            Acepto los términos y condiciones del proceso de admisión
+          </a-checkbox>
+        </a-form-item>
+        
+        <div class="modal-actions">
+          <a-button @click="preinscripcionModalVisible = false">Cancelar</a-button>
+          <a-button type="primary" @click="submitPreinscripcion">Continuar</a-button>
+        </div>
+      </a-form>
+    </a-modal>
+  </div>
+
+    <FooterModerno />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { 
+  RightCircleOutlined,
+  PlayCircleOutlined,
+  CalendarOutlined,
+  FileTextOutlined,
+  DollarOutlined,
+  TeamOutlined,
+  FormOutlined,
+  UserOutlined,
+  TrophyOutlined,
+  PhoneOutlined,
+  MailOutlined,
+  ClockCircleOutlined,
+  MedicineBoxOutlined,
+  BuildOutlined,
+  BarChartOutlined,
+  BookOutlined,
+  ExperimentOutlined,
+  CodeOutlined,
+  BankOutlined
+} from '@ant-design/icons-vue'
+import NavbarModerno from '../components/nabvar.vue'
+
+import FooterModerno from '../components/footer.vue'
+// Estado
+const facultadActiva = ref('1')
+const preinscripcionModalVisible = ref(false)
+
+// Otras convocatorias
+const otrasConvocatorias = ref([
+  {
+    id: 1,
+    titulo: 'Admisión Extraordinaria',
+    fecha: '5 - 15 Ene 2024',
+    descripcion: 'Para postulantes con talentos especiales',
+    estado: 'Próximamente',
+    estadoColor: 'orange'
+  },
+  {
+    id: 2,
+    titulo: 'Traslado Externo',
+    fecha: 'Abril 2024',
+    descripcion: 'Para estudiantes de otras universidades',
+    estado: 'Cerrado',
+    estadoColor: 'red'
+  },
+  {
+    id: 3,
+    titulo: 'Evaluación de Talentos',
+    fecha: 'Feb 2024',
+    descripcion: 'Deportistas, artistas y líderes',
+    estado: 'Próximamente',
+    estadoColor: 'orange'
+  }
+])
+
+// Facultades y carreras
+const facultades = ref([
+  {
+    id: '1',
+    nombre: 'Ciencias de la Salud',
+    carreras: [
+      { id: 1, nombre: 'Medicina Humana', grado: 'Bachiller', descripcion: 'Formación médica integral con prácticas desde primer año', vacantes: 50, puntaje: '1800+', icono: MedicineBoxOutlined },
+      { id: 2, nombre: 'Enfermería', grado: 'Bachiller', descripcion: 'Cuidado integral de la salud', vacantes: 60, puntaje: '1500+', icono: UserOutlined }
+    ]
+  },
+  {
+    id: '2',
+    nombre: 'Ingenierías',
+    carreras: [
+      { id: 3, nombre: 'Ingeniería Civil', grado: 'Bachiller', descripcion: 'Diseño y construcción de infraestructura', vacantes: 80, puntaje: '1700+', icono: BuildOutlined },
+      { id: 4, nombre: 'Ingeniería de Sistemas', grado: 'Bachiller', descripcion: 'Desarrollo de software e inteligencia artificial', vacantes: 100, puntaje: '1600+', icono: CodeOutlined }
+    ]
+  },
+  {
+    id: '3',
+    nombre: 'Derecho y Humanidades',
+    carreras: [
+      { id: 5, nombre: 'Derecho', grado: 'Bachiller', descripcion: 'Formación jurídica integral', vacantes: 120, puntaje: '1550+' },
+      { id: 6, nombre: 'Psicología', grado: 'Bachiller', descripcion: 'Ciencias del comportamiento humano', vacantes: 70, puntaje: '1450+', icono: UserOutlined }
+    ]
+  }
+])
+
+// Modalidades
+const modalidades = ref([
+  { id: 1, nombre: 'Admisión Ordinaria', descripcion: 'Examen de conocimientos generales', estado: 'Abierto', estadoColor: 'success', color: '#1890ff', icono: BookOutlined },
+  { id: 2, nombre: 'Evaluación de Talentos', descripcion: 'Para deportistas y artistas destacados', estado: 'Próximamente', estadoColor: 'orange', color: '#faad14', icono: TrophyOutlined },
+  { id: 3, nombre: 'Traslado Externo', descripcion: 'Estudiantes de otras universidades', estado: 'Cerrado', estadoColor: 'red', color: '#ff4d4f', icono: BankOutlined },
+  { id: 4, nombre: 'Segunda Carrera', descripcion: 'Para profesionales graduados', estado: 'Abierto', estadoColor: 'success', color: '#52c41a', icono: ExperimentOutlined }
+])
+
+// Noticias
+const noticias = ref([
+  {
+    id: 1,
+    titulo: 'Nuevo Laboratorio de Investigación',
+    descripcion: 'Inauguramos el moderno laboratorio de ciencias con tecnología de punta.',
+    fecha: '15 Nov 2023',
+    categoria: 'Infraestructura',
+    tagColor: 'blue',
+    imagen: 'https://images.unsplash.com/photo-1532094349884-543bc11b234d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80'
+  },
+  {
+    id: 2,
+    titulo: 'Convenio Internacional',
+    descripcion: 'Firmamos acuerdo con universidad europea para intercambio estudiantil.',
+    fecha: '10 Nov 2023',
+    categoria: 'Internacional',
+    tagColor: 'green',
+    imagen: 'https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80'
+  },
+  {
+    id: 3,
+    titulo: 'Resultados Publicados',
+    descripcion: 'Consulta los resultados del examen de admisión extraordinario.',
+    fecha: '5 Nov 2023',
+    categoria: 'Resultados',
+    tagColor: 'red',
+    imagen: 'https://images.unsplash.com/photo-1562774053-701939374585?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80'
+  }
+])
+
+// Métodos
+const scrollToConvocatoria = () => {
+  const element = document.getElementById('convocatorias')
+  element?.scrollIntoView({ behavior: 'smooth' })
+}
+
+const openVirtualTour = () => {
+  window.open('#', '_blank')
+}
+
+const openPreinscripcion = () => {
+  preinscripcionModalVisible.value = true
+}
+
+const showModal = (type) => {
+  console.log('Mostrar modal:', type)
+}
+
+const submitPreinscripcion = () => {
+  alert('Preinscripción iniciada exitosamente')
+  preinscripcionModalVisible.value = false
+}
+</script>
+
+<style scoped>
+/* Todos los estilos del contenido principal van aquí */
+/* (Copiar todos los estilos del original excepto los del header y footer) */
+
+/* Hero Moderno */
+.modern-hero {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  padding: 80px 0;
+}
+
+.hero-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 24px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 80px;
+  align-items: center;
+}
+
+.hero-tag {
+  background: rgba(255, 255, 255, 0.2);
+  border: none;
+  color: white;
+  margin-bottom: 24px;
+}
+
+.hero-title {
+  font-size: 3.5rem;
+  font-weight: 800;
+  line-height: 1.1;
+  margin-bottom: 24px;
+}
+
+.gradient-text {
+  background: linear-gradient(45deg, #ffd700, #ff6b6b);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.hero-subtitle {
+  font-size: 1.25rem;
+  opacity: 0.9;
+  margin-bottom: 32px;
+  line-height: 1.6;
+}
+
+.hero-actions {
+  display: flex;
+  gap: 16px;
+}
+
+.cta-button {
+  background: white;
+  border: none;
+  color: #1a237e;
+  font-weight: 600;
+}
+
+.secondary-button {
+  background: transparent;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  color: white;
+}
+
+.floating-card {
+  background: white;
+  color: #333;
+  padding: 24px;
+  border-radius: 12px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #666;
+  margin-bottom: 16px;
+}
+
+/* Secciones comunes */
+.section-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 24px;
+}
+
+.section-header {
+  text-align: center;
+  margin-bottom: 60px;
+}
+
+.section-title {
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: #1a237e;
+  margin-bottom: 16px;
+}
+
+.section-subtitle {
+  font-size: 1.125rem;
+  color: #666;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.header-with-badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+}
+
+.new-badge :deep(.ant-badge-count) {
+  background: linear-gradient(45deg, #ff6b6b, #ffd700);
+  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
+}
+
+/* Proceso */
+.process-section {
+  padding: 80px 0;
+  background: #f8f9fa;
+}
+
+.modern-steps {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.modern-steps :deep(.ant-steps-item-title) {
+  font-weight: 600;
+}
+
+/* Convocatorias */
+.convocatorias-modern {
+  padding: 80px 0;
+}
+
+.convocatorias-grid {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 24px;
+}
+
+@media (max-width: 768px) {
+  .convocatorias-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.main-convocatoria-card {
+  position: relative;
+  border: none;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
+  border-radius: 16px;
+  padding: 32px;
+}
+
+.card-badge {
+  position: absolute;
+  top: -12px;
+  left: 24px;
+  background: linear-gradient(45deg, #1890ff, #52c41a);
+  color: white;
+  padding: 6px 16px;
+  border-radius: 20px;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.convocatoria-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 20px;
+}
+
+.convocatoria-header h3 {
+  margin: 0;
+  font-size: 1.5rem;
+  color: #1a237e;
+}
+
+.convocatoria-date {
+  color: #666;
+  margin: 8px 0 0;
+}
+
+.status-tag {
+  font-weight: 600;
+  padding: 4px 12px;
+  border-radius: 20px;
+}
+
+.convocatoria-desc {
+  color: #666;
+  line-height: 1.6;
+  margin-bottom: 24px;
+}
+
+.custom-divider {
+  margin: 24px 0;
+}
+
+.action-buttons-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+  margin-top: 16px;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 48px;
+}
+
+.preinscripcion-section {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 24px;
+}
+
+.preinscripcion-info h4 {
+  margin: 0 0 8px;
+  color: #1a237e;
+}
+
+.preinscripcion-btn {
+  background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
+  border: none;
+  height: 56px;
+  font-weight: 600;
+}
+
+.secondary-convocatoria-card {
+  border: none;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  border-radius: 12px;
+}
+
+.card-footer {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+}
+
+/* Programas */
+.programas-section {
+  padding: 80px 0;
+  background: #f8f9fa;
+}
+
+.facultades-tabs :deep(.ant-tabs-nav) {
+  margin-bottom: 40px;
+}
+
+.carreras-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 24px;
+}
+
+.carrera-card {
+  border: none;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  border-radius: 12px;
+  transition: transform 0.3s ease;
+}
+
+.carrera-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+}
+
+.carrera-header {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.carrera-icon {
+  background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
+  color: white;
+  width: 48px;
+  height: 48px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+}
+
+.carrera-header h4 {
+  margin: 0;
+  color: #1a237e;
+}
+
+.carrera-grado {
+  color: #666;
+  font-size: 0.875rem;
+  margin: 4px 0 0;
+}
+
+.carrera-desc {
+  color: #666;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  margin-bottom: 16px;
+}
+
+.carrera-stats {
+  display: flex;
+  justify-content: space-between;
+  color: #666;
+  font-size: 0.875rem;
+  margin-bottom: 16px;
+}
+
+.carrera-link {
+  color: #1890ff;
+  font-weight: 500;
+}
+
+/* Estadísticas */
+.stats-section {
+  padding: 60px 0;
+  background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
+  color: white;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 40px;
+  text-align: center;
+}
+
+.stat-card h3 {
+  font-size: 3rem;
+  font-weight: 800;
+  margin: 0;
+  background: linear-gradient(45deg, #ffd700, #ff6b6b);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.stat-card p {
+  font-size: 1rem;
+  opacity: 0.9;
+  margin: 8px 0 0;
+}
+
+/* Noticias */
+.noticias-modern {
+  padding: 80px 0;
+}
+
+.view-all {
+  color: #1890ff;
+  font-weight: 500;
+}
+
+.noticias-grid-modern {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: 32px;
+}
+
+.noticia-card-modern {
+  border: none;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  transition: transform 0.3s ease;
+}
+
+.noticia-card-modern:hover {
+  transform: translateY(-4px);
+}
+
+.noticia-image {
+  height: 200px;
+  background-size: cover;
+  background-position: center;
+  position: relative;
+}
+
+.noticia-tag {
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  border: none;
+  font-weight: 500;
+}
+
+.noticia-content {
+  padding: 24px;
+}
+
+.noticia-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #666;
+  font-size: 0.875rem;
+  margin-bottom: 12px;
+}
+
+.noticia-content h4 {
+  margin: 0 0 12px;
+  color: #1a237e;
+  font-size: 1.125rem;
+}
+
+.noticia-content p {
+  color: #666;
+  line-height: 1.5;
+  margin-bottom: 16px;
+}
+
+/* Modalidades */
+.modalidades-section {
+  padding: 80px 0;
+  background: #f8f9fa;
+}
+
+.modalidades-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 24px;
+}
+
+.modalidad-card {
+  border: none;
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  text-align: center;
+  padding: 32px 24px;
+  transition: transform 0.3s ease;
+}
+
+.modalidad-card:hover {
+  transform: translateY(-4px);
+}
+
+.modalidad-icon {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 20px;
+  color: white;
+  font-size: 28px;
+}
+
+.modalidad-card h4 {
+  margin: 0 0 12px;
+  color: #1a237e;
+}
+
+.modalidad-card p {
+  color: #666;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  margin-bottom: 16px;
+}
+
+.modalidad-status {
+  font-weight: 500;
+  padding: 4px 16px;
+  border-radius: 20px;
+}
+
+/* Contacto */
+.contact-section {
+  padding: 80px 0;
+}
+
+.contact-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 80px;
+  align-items: start;
+}
+
+.contact-subtitle {
+  color: #666;
+  font-size: 1.125rem;
+  margin-bottom: 40px;
+}
+
+.contact-methods {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.contact-method {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.contact-method svg {
+  color: #1890ff;
+  font-size: 24px;
+}
+
+.contact-method h4 {
+  margin: 0 0 4px;
+  color: #1a237e;
+}
+
+.contact-method p {
+  margin: 0;
+  color: #666;
+}
+
+.contact-form {
+  background: white;
+  padding: 40px;
+  border-radius: 16px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
+}
+
+.contact-form h3 {
+  margin: 0 0 32px;
+  color: #1a237e;
+}
+
+/* Modal Moderno */
+.modern-modal :deep(.ant-modal-content) {
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+.modern-modal :deep(.ant-modal-header) {
+  border-bottom: none;
+  padding: 32px 32px 0;
+}
+
+.modern-modal :deep(.ant-modal-body) {
+  padding: 32px;
+}
+
+.modern-modal :deep(.ant-modal-title) {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #1a237e;
+}
+
+.modal-steps {
+  margin-bottom: 32px;
+}
+
+.modal-form h3 {
+  margin: 0 0 24px;
+  color: #1a237e;
+}
+
+.modal-actions {
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+  margin-top: 32px;
+}
+
+/* Responsive */
+@media (max-width: 992px) {
+  .hero-container {
+    grid-template-columns: 1fr;
+    text-align: center;
+    gap: 48px;
+  }
+  
+  .hero-title {
+    font-size: 2.5rem;
+  }
+  
+  .contact-grid {
+    grid-template-columns: 1fr;
+    gap: 48px;
+  }
+  
+  .hero-actions {
+    flex-direction: column;
+  }
+  
+  .section-title {
+    font-size: 2rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .hero-title {
+    font-size: 2rem;
+  }
+  
+  .preinscripcion-section {
+    flex-direction: column;
+    text-align: center;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/front/src/components/nabvar.vue b/front/src/components/nabvar.vue
new file mode 100644
index 0000000..fa95146
--- /dev/null
+++ b/front/src/components/nabvar.vue
@@ -0,0 +1,658 @@
+<template>
+  <a-layout-header class="modern-header">
+    <div class="header-container">
+      <!-- LOGO -->
+      <div 
+        class="university-logo" 
+        @click="handleLogoClick"
+        style="cursor: pointer;"
+      >
+        <div class="logo-icon">
+          <img src="/logotiny.png" alt="Logo UNA" />
+        </div>
+        <div class="logo-text">
+          <h1>Universidad Nacional del Altiplano</h1>
+          <span>Dirección de Admisión</span>
+        </div>
+      </div>
+
+      <!-- DESKTOP NAV -->
+      <nav class="modern-nav desktop-only">
+        <a-menu
+          v-model:selectedKeys="selectedKeys"
+          mode="horizontal"
+          class="nav-menu-modern"
+          :items="navItems"
+          @click="handleMenuClick"
+          @openChange="handleDesktopOpenChange"
+        />
+      </nav>
+
+      <!-- MOBILE MENU BUTTON -->
+      <a-button
+        class="mobile-menu-btn mobile-only"
+        type="text"
+        @click="drawerOpen = true"
+      >
+        ☰
+      </a-button>
+    </div>
+
+    <!-- MOBILE DRAWER -->
+    <a-drawer
+      title="Menú"
+      placement="right"
+      :open="drawerOpen && isMobile"
+      @close="handleDrawerClose"
+      :width="280"
+      :bodyStyle="{ padding: 0 }"
+      :headerStyle="{ borderBottom: '1px solid #f0f0f0', fontFamily: 'Times New Roman' }"
+      :closable="true"
+      :maskClosable="true"
+    >
+      <div class="drawer-content">
+        <div class="drawer-header">
+          <div class="drawer-logo">
+            <div class="logo-icon">
+              <img src="/logotiny.png" alt="Logo UNA" />
+            </div>
+            <div class="drawer-logo-text">
+              <h3>UNA</h3>
+              <span>Dirección de Admisión</span>
+            </div>
+          </div>
+        </div>
+
+        <a-menu
+          v-model:selectedKeys="selectedKeys"
+          mode="inline"
+          :items="mobileNavItems"
+          class="drawer-menu"
+          @click="handleDrawerMenuClick"
+          @openChange="handleMobileOpenChange"
+          :openKeys="mobileOpenKeys"
+        />
+      </div>
+
+    <div class="auth-section">
+    <router-link 
+      v-if="!authStore.isAuthenticated" 
+      to="/login-postulante"
+      class="login-link"
+    >
+      <a-button type="primary">
+        <template #icon><UserOutlined /></template>
+        Portal del Postulante
+      </a-button>
+    </router-link>
+    
+    <router-link 
+      v-else 
+      to="/portal"
+      class="portal-link"
+    >
+      <a-button type="primary" ghost>
+        <template #icon><DashboardOutlined /></template>
+        Mi Portal
+      </a-button>
+    </router-link>
+  </div>
+    </a-drawer>
+
+    <div class="auth-section">
+    <router-link 
+      v-if="!authStore.isAuthenticated" 
+      to="/login-postulante"
+      class="login-link"
+    >
+      <a-button type="primary">
+        <template #icon><UserOutlined /></template>
+        Portal del Postulante
+      </a-button>
+    </router-link>
+    
+    <router-link 
+      v-else 
+      to="/portal-postulante"
+      class="portal-link"
+    >
+      <a-button type="primary" ghost>
+        <template #icon><DashboardOutlined /></template>
+        Mi Portal
+      </a-button>
+    </router-link>
+  </div>
+  </a-layout-header>
+  
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
+import { useAuthStore } from '../store/postulanteStore'
+import { UserOutlined, DashboardOutlined } from '@ant-design/icons-vue'
+const drawerOpen = ref(false)
+const selectedKeys = ref(['inicio'])
+const isMobile = ref(false)
+
+
+const authStore = useAuthStore()
+
+const desktopOpenKeys = ref([])
+const mobileOpenKeys = ref([])
+
+// Detectar tamaño de pantalla
+const checkScreenSize = () => {
+  isMobile.value = window.innerWidth < 768
+  
+  // Si cambia a desktop, cerrar el drawer
+  if (!isMobile.value && drawerOpen.value) {
+    drawerOpen.value = false
+    mobileOpenKeys.value = [] // Limpiar openKeys del móvil
+  }
+}
+
+// Items del menú para desktop
+const navItems = computed(() => [
+  { 
+    key: 'inicio', 
+    label: 'Inicio'
+  },
+  {
+    key: 'programas',
+    label: 'Programas',
+    children: [
+      { key: 'ingenierias', label: 'Ingenierías' },
+      { key: 'biomedicas', label: 'Biomédicas' },
+      { key: 'sociales', label: 'Sociales' }
+    ]
+  },
+  { 
+    key: 'procesos', 
+    label: 'Procesos'
+  },
+  {
+    key: 'modalidades',
+    label: 'Modalidades',
+    children: [
+      { key: 'ordinario', label: 'Ordinario' },
+      { key: 'extraordinario', label: 'Extraordinario' },
+      { key: 'sedes', label: 'Sedes' }
+    ]
+  },
+  { 
+    key: 'resultados', 
+    label: 'Resultados'
+  }
+])
+
+// Items del menú para móvil con submenús contraídos
+const mobileNavItems = computed(() => {
+  return navItems.value.map(item => {
+    const baseItem = {
+      key: item.key,
+      label: item.label
+    }
+
+    if (item.children) {
+      // Submenú plegable en móvil
+      return {
+        ...baseItem,
+        children: item.children.map(child => ({
+          key: child.key,
+          label: child.label
+        }))
+      }
+    }
+    
+    return baseItem
+  })
+})
+
+// Observar cambios en el drawer para limpiar openKeys cuando se cierra
+watch(drawerOpen, (newVal) => {
+  if (!newVal) {
+    // Limpiar openKeys cuando se cierra el drawer
+    mobileOpenKeys.value = []
+  }
+})
+
+// Observar cambios en isMobile para cerrar drawer si cambia a desktop
+watch(isMobile, (newVal) => {
+  if (!newVal && drawerOpen.value) {
+    drawerOpen.value = false
+  }
+})
+
+const handleMenuClick = ({ key }) => {
+  selectedKeys.value = [key]
+  
+  console.log('Navegando a:', key)
+  
+  // Si es un item de submenú, cerrar el drawer en móvil
+  const isSubmenuItem = navItems.value.some(item => 
+    item.children && item.children.some(child => child.key === key)
+  )
+  
+  if (isSubmenuItem && isMobile.value) {
+    drawerOpen.value = false
+  }
+}
+
+const handleDrawerMenuClick = ({ key }) => {
+  handleMenuClick({ key })
+  
+  // Si NO es un submenú padre, cerrar el drawer
+  const isParentItem = navItems.value.some(item => 
+    item.key === key && item.children
+  )
+  
+  if (!isParentItem && isMobile.value) {
+    drawerOpen.value = false
+  }
+}
+
+const handleLogoClick = () => {
+  selectedKeys.value = ['inicio']
+  // router.push('/')
+}
+
+const handleDesktopOpenChange = (keys) => {
+  desktopOpenKeys.value = keys
+}
+
+const handleMobileOpenChange = (keys) => {
+  // En móvil, solo permitir un submenú abierto a la vez
+  const latestOpenKey = keys.find(key => !mobileOpenKeys.value.includes(key))
+  
+  if (latestOpenKey) {
+    mobileOpenKeys.value = [latestOpenKey]
+  } else {
+    mobileOpenKeys.value = []
+  }
+}
+
+const handleDrawerClose = () => {
+  // Limpiar openKeys y cerrar drawer
+  mobileOpenKeys.value = []
+  drawerOpen.value = false
+}
+
+// Configurar event listeners para responsive
+onMounted(() => {
+  checkScreenSize()
+  window.addEventListener('resize', checkScreenSize)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', checkScreenSize)
+})
+</script>
+
+<style scoped>
+/* VARIABLES */
+:root {
+  --primary-color: #1e3a8a;
+  --secondary-color: #374151;
+  --border-color: #d1d5db;
+  --bg-color: #ffffff;
+}
+
+/* FUENTE INSTITUCIONAL */
+.modern-header,
+.nav-menu-modern,
+.logo-text h1,
+.logo-text span,
+.drawer-logo-text h3,
+.drawer-logo-text span {
+  font-family: "Times New Roman", Times, serif;
+}
+
+/* HEADER */
+.modern-header {
+  background: rgba(255, 255, 255, 0.92) !important;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-bottom: 1px solid var(--border-color);
+  padding: 0 24px !important;
+  height: 82px !important;
+  line-height: 82px !important;
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  transition: all 0.3s ease;
+}
+
+/* CONTAINER */
+.header-container {
+  max-width: 1320px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 100%;
+  width: 100%;
+}
+
+/* LOGO */
+.university-logo {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  min-width: 250px;
+  transition: opacity 0.3s;
+}
+
+.university-logo:hover {
+  opacity: 0.9;
+}
+
+.logo-icon {
+  width: 46px;
+  height: 46px;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  background: var(--bg-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.logo-icon img {
+  width: 90%;
+  height: 90%;
+  object-fit: contain;
+}
+
+.logo-text {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.4;
+}
+
+.logo-text h1 {
+  margin: 0;
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: var(--primary-color);
+}
+
+.logo-text span {
+  font-size: 0.8rem;
+  color: var(--secondary-color);
+}
+
+/* NAV DESKTOP */
+.modern-nav {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  min-width: 0;
+}
+
+.nav-menu-modern {
+  flex: 1;
+  background: transparent !important;
+  border-bottom: none !important;
+  justify-content: center;
+}
+
+.nav-menu-modern :deep(.ant-menu-item),
+.nav-menu-modern :deep(.ant-menu-submenu) {
+  height: 82px;
+  line-height: 82px;
+  padding: 0 16px;
+  font-size: 0.95rem;
+  color: var(--secondary-color);
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+.nav-menu-modern :deep(.ant-menu-item:hover),
+.nav-menu-modern :deep(.ant-menu-submenu:hover) {
+  color: var(--primary-color);
+}
+
+.nav-menu-modern :deep(.ant-menu-item-selected),
+.nav-menu-modern :deep(.ant-menu-submenu-selected) {
+  color: var(--primary-color);
+  font-weight: 600;
+}
+
+.nav-menu-modern :deep(.ant-menu-item-selected::after),
+.nav-menu-modern :deep(.ant-menu-submenu-selected::after) {
+  border-bottom: 3px solid var(--primary-color) !important;
+}
+
+.nav-menu-modern :deep(.ant-menu-submenu-arrow) {
+  color: var(--secondary-color);
+}
+
+.nav-menu-modern :deep(.ant-menu-submenu:hover .ant-menu-submenu-arrow) {
+  color: var(--primary-color);
+}
+
+/* BOTÓN MÓVIL */
+.mobile-menu-btn {
+  font-size: 24px;
+  color: #111827;
+  padding: 8px;
+  border-radius: 4px;
+  transition: background-color 0.3s;
+}
+
+.mobile-menu-btn:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+/* DRAWER MÓVIL */
+.drawer-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.drawer-header {
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--border-color);
+  background: #fafafa;
+}
+
+.drawer-logo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.drawer-logo-text {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.4;
+}
+
+.drawer-logo-text h3 {
+  margin: 0;
+  color: var(--primary-color);
+  font-size: 1rem;
+}
+
+.drawer-logo-text span {
+  font-size: 12px;
+  color: var(--secondary-color);
+}
+
+.drawer-menu {
+  border-right: none !important;
+}
+
+.drawer-menu :deep(.ant-menu-item) {
+  font-size: 15px;
+  padding-left: 24px !important;
+  height: 48px;
+  line-height: 48px;
+  margin: 4px 0;
+  border-radius: 0;
+  transition: background-color 0.3s;
+}
+
+.drawer-menu :deep(.ant-menu-item:hover) {
+  background-color: #f0f7ff;
+}
+
+.drawer-menu :deep(.ant-menu-item-selected) {
+  background-color: #f0f7ff;
+  color: var(--primary-color);
+  font-weight: 500;
+}
+
+.drawer-menu :deep(.ant-menu-item-selected::after) {
+  border-right: 3px solid var(--primary-color);
+}
+
+.drawer-menu :deep(.ant-menu-submenu-title) {
+  font-size: 15px;
+  padding-left: 24px !important;
+  height: 48px;
+  line-height: 48px;
+  margin: 4px 0;
+  border-radius: 0;
+  transition: background-color 0.3s;
+}
+
+.drawer-menu :deep(.ant-menu-submenu-title:hover) {
+  background-color: #f0f7ff;
+}
+
+.drawer-menu :deep(.ant-menu-submenu-selected > .ant-menu-submenu-title) {
+  color: var(--primary-color);
+  font-weight: 500;
+}
+
+.drawer-menu :deep(.ant-menu-submenu-arrow) {
+  font-size: 12px !important;
+}
+
+.drawer-menu :deep(.ant-menu-submenu .ant-menu-item) {
+  padding-left: 48px !important;
+  font-size: 14px;
+}
+
+/* RESPONSIVE */
+.desktop-only {
+  display: flex;
+}
+
+.mobile-only {
+  display: none;
+}
+
+/* TABLET (768px - 992px) */
+@media (max-width: 992px) {
+  .modern-header {
+    padding: 0 16px !important;
+  }
+  
+  .header-container {
+    padding: 0 8px;
+  }
+  
+  .logo-text h1 {
+    font-size: 14px !important;
+  }
+  
+  .logo-text span {
+    font-size: 12px !important;
+  }
+  
+  .nav-menu-modern :deep(.ant-menu-item),
+  .nav-menu-modern :deep(.ant-menu-submenu) {
+    padding: 0 12px;
+    font-size: 0.9rem;
+  }
+}
+
+/* MOBILE (< 768px) */
+@media (max-width: 768px) {
+  .desktop-only {
+    display: none;
+  }
+  
+  .mobile-only {
+    display: inline-flex;
+  }
+  
+  .modern-header {
+    height: 72px !important;
+    line-height: 72px !important;
+  }
+  
+  .header-container {
+    padding: 0;
+  }
+  
+  .university-logo {
+    min-width: auto;
+    gap: 10px;
+  }
+  
+  .logo-icon {
+    width: 40px;
+    height: 40px;
+  }
+  
+  .logo-text h1 {
+    font-size: 13px !important;
+    line-height: 1.2;
+  }
+  
+  .logo-text span {
+    font-size: 11px !important;
+  }
+}
+
+/* SMALL MOBILE (< 480px) */
+@media (max-width: 480px) {
+  .modern-header {
+    padding: 0 12px !important;
+  }
+  
+  .logo-text h1 {
+    font-size: 12px !important;
+  }
+  
+  .logo-text span {
+    display: none;
+  }
+  
+  .mobile-menu-btn {
+    font-size: 20px;
+    padding: 4px;
+  }
+  
+  .drawer-menu :deep(.ant-menu-submenu-title),
+  .drawer-menu :deep(.ant-menu-item) {
+    height: 44px;
+    line-height: 44px;
+    font-size: 14px;
+  }
+  
+  .drawer-menu :deep(.ant-menu-submenu .ant-menu-item) {
+    height: 40px;
+    line-height: 40px;
+    font-size: 13px;
+  }
+}
+
+/* IMPRESIÓN */
+@media print {
+  .modern-header {
+    position: static;
+    box-shadow: none;
+    border-bottom: 2px solid #000;
+  }
+  
+  .mobile-menu-btn {
+    display: none !important;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/front/src/router/index.js b/front/src/router/index.js
index c772e72..7831dc8 100644
--- a/front/src/router/index.js
+++ b/front/src/router/index.js
@@ -1,24 +1,63 @@
+// router/index.js
 import { createRouter, createWebHistory } from 'vue-router'
 import Login from '../views/Login.vue'
-import Hello from '../components/HelloWorld.vue'
+import Hello from '../components/WebPage.vue'
 import { useUserStore } from '../store/user'
+import { useAuthStore as usePostulanteStore } from '../store/postulanteStore'
 
 const routes = [
-  
-  {
-    path: '/',
-    component: Hello
-  },
+  // Home
+  { path: '/', component: Hello },
+
+  // Login usuarios/admins
+  { path: '/login', component: Login, meta: { guest: true } },
+
+  // Login postulante
   {
-    path: '/login',
-    component: Login,
-    meta: { guest: true }
+    path: '/login-postulante',
+    name: 'login-postulante',
+    component: () => import('../views/postulante/LoginView.vue'),
+    meta: { guest: true },
   },
+
+  // Portal postulante
   {
-    path: '/unauthorized',
-    name: 'Unauthorized',
-    component: () => import('../views/403.vue')
+    path: '/portal-postulante',
+    name: 'portal-postulante',
+    component: () => import('../views/postulante/PortalView.vue'),
+    meta: { requiresAuth: true },
+    children: [
+      {
+        path: '',
+        name: 'DashboardPostulante',
+        component: () => import('../views/postulante/Dashboard.vue'),
+        meta: { requiresAuth: true}
+      },
+      {
+        path: '/portal-postulante/examen/:examenId',
+        name: 'PanelExamen',
+        component: () => import('../views/postulante/PreguntasExamen.vue'),
+        meta: { requiresAuth: true }
+      },
+      {
+        path: '/portal-postulante/resultados/:examenId',
+        name: 'PanelResultados',
+        component: () => import('../views/postulante/Resultados.vue'),
+        meta: { requiresAuth: true }
+      },
+
+      {
+        path: '/portal-postulante/pagos',
+        name: 'PanelPagos',
+        component: () => import('../views/postulante/Pagos.vue'),
+        meta: { requiresAuth: true }
+      },
+    ]
+
+    
   },
+
+  // Usuario normal
   {
     path: '/usuario/dashboard',
     name: 'dashboard',
@@ -26,6 +65,7 @@ const routes = [
     meta: { requiresAuth: true, role: 'usuario' }
   },
 
+  // Admin
   {
     path: '/admin/dashboard',
     component: () => import('../views/administrador/layout/Layout.vue'),
@@ -37,50 +77,50 @@ const routes = [
         component: () => import('../views/administrador/Dashboard.vue'),
         meta: { requiresAuth: true, role: 'administrador' }
       },
-
       {
         path: '/admin/dashboard/areas',
         name: 'Areas',
         component: () => import('../views/administrador/areas/AreasList.vue'),
         meta: { requiresAuth: true, role: 'administrador' }
       },
-
       {
         path: '/admin/dashboard/cursos',
         name: 'Cursos',
         component: () => import('../views/administrador/cursos/CursosList.vue'),
         meta: { requiresAuth: true, role: 'administrador' }
       },
-
       {
         path: '/admin/dashboard/cursos/:id/preguntas',
         name: 'CursoPreguntas',
         component: () => import('../views/administrador/cursos/PreguntasCursoView.vue'),
         meta: { requiresAuth: true, role: 'administrador' }
       },
-      
       {
         path: '/admin/dashboard/procesos',
         name: 'Procesos',
         component: () => import('../views/administrador/Procesos/ProcesosList.vue'),
         meta: { requiresAuth: true, role: 'administrador' }
+      },
+      {
+        path: '/admin/dashboard/reglas',
+        name: 'Reglas',
+        component: () => import('../views/administrador/Procesos/ReglasList.vue'),
+        meta: { requiresAuth: true, role: 'administrador' }
       }
-
     ]
   },
-  
 
+  // Superadmin
   {
     path: '/superadmin/dashboard',
     name: 'superadmin-dashboard',
     component: () => import('../views/superadmin/Dashboard.vue'),
     meta: { requiresAuth: true, role: 'superadmin' }
   },
-  {
-    path: '/403',
-    name: 'forbidden',
-    component: () => import('../views/403.vue')
-  }
+
+  // Errores
+  { path: '/unauthorized', name: 'Unauthorized', component: () => import('../views/403.vue') },
+  { path: '/403', name: 'forbidden', component: () => import('../views/403.vue') }
 ]
 
 const router = createRouter({
@@ -90,19 +130,30 @@ const router = createRouter({
 
 router.beforeEach((to, from, next) => {
   const userStore = useUserStore()
+  const postulanteStore = usePostulanteStore()
 
-  // 🚫 No autenticado
-  if (to.meta.requiresAuth && !userStore.isAuth) {
+  // --- Rutas protegidas para usuarios/admin ---
+  if (to.meta.requiresAuth && !to.path.startsWith('/portal-postulante') && !userStore.isAuth) {
     return next('/login')
   }
 
-  // 🚫 Autenticado intentando ir a login
-  if (to.meta.guest && userStore.isAuth) {
+  // --- Rutas protegidas para postulante ---
+  if (to.meta.requiresAuth && to.path.startsWith('/portal-postulante') && !postulanteStore.isAuthenticated) {
+    return next('/login-postulante')
+  }
+
+  // --- Evitar que usuarios logueados vayan a login ---
+  if (to.meta.guest && !to.path.startsWith('/login-postulante') && userStore.isAuth) {
     userStore.redirectByRole()
     return
   }
 
-  // 🚫 Rol requerido incorrecto
+  // --- Evitar que postulantes logueados vayan a login postulante ---
+  if (to.meta.guest && to.path === '/login-postulante' && postulanteStore.isAuthenticated) {
+    return next('/portal-postulante')
+  }
+
+  // --- Validar roles para usuarios/admins ---
   if (to.meta.role && !userStore.hasRole(to.meta.role)) {
     return next('/403')
   }
@@ -110,6 +161,4 @@ router.beforeEach((to, from, next) => {
   next()
 })
 
-
-
 export default router
diff --git a/front/src/store/areacursoStore.js b/front/src/store/areacursoStore.js
deleted file mode 100644
index 444b049..0000000
--- a/front/src/store/areacursoStore.js
+++ /dev/null
@@ -1,74 +0,0 @@
-// stores/areasStore.js
-import { defineStore } from 'pinia';
-import axios from 'axios';
-
-export const useAreasStore = defineStore('areas', {
-  state: () => ({
-    cursosDisponibles: [],   // todos los cursos
-    cursosVinculados: [],    // cursos vinculados a la área
-    loading: false,
-    error: null,
-  }),
-
-  actions: {
-    // Obtener cursos de un área
-    async fetchCursosPorArea(areaId) {
-      this.loading = true;
-      this.error = null;
-      try {
-        const response = await axios.get(`/areas/${areaId}/cursos-disponibles`);
-        if (response.data.success) {
-          this.cursosDisponibles = response.data.data.todos_los_cursos;
-          this.cursosVinculados = response.data.data.cursos_vinculados;
-        } else {
-          this.error = 'Error cargando cursos';
-        }
-      } catch (err) {
-        this.error = err.response?.data?.message || err.message;
-      } finally {
-        this.loading = false;
-      }
-    },
-
-    // Vincular cursos a un área
-    async vincularCursos(areaId, cursosIds) {
-      this.loading = true;
-      this.error = null;
-      try {
-        const response = await axios.post(`/areas/${areaId}/vincular-cursos`, {
-          cursos: cursosIds
-        });
-        if (response.data.success) {
-          this.cursosVinculados = cursosIds;
-        } else {
-          this.error = 'Error vinculando cursos';
-        }
-      } catch (err) {
-        this.error = err.response?.data?.message || err.message;
-      } finally {
-        this.loading = false;
-      }
-    },
-
-    // Desvincular un curso de un área
-    async desvincularCurso(areaId, cursoId) {
-      this.loading = true;
-      this.error = null;
-      try {
-        const response = await axios.post(`/areas/${areaId}/desvincular-curso`, {
-          curso_id: cursoId
-        });
-        if (response.data.success) {
-          // Actualizar lista local
-          this.cursosVinculados = this.cursosVinculados.filter(id => id !== cursoId);
-        } else {
-          this.error = 'Error desvinculando curso';
-        }
-      } catch (err) {
-        this.error = err.response?.data?.message || err.message;
-      } finally {
-        this.loading = false;
-      }
-    }
-  }
-});
diff --git a/front/src/store/examen.store.js b/front/src/store/examen.store.js
new file mode 100644
index 0000000..69f42d6
--- /dev/null
+++ b/front/src/store/examen.store.js
@@ -0,0 +1,139 @@
+import { defineStore } from 'pinia'
+import api from '../axiosPostulante'
+
+
+export const useExamenStore = defineStore('examenStore', {
+  state: () => ({
+    procesos: [],
+    areas: [],
+    examenActual: null,
+    preguntas: [],
+    cargando: false,
+    error: null,
+  }),
+  actions: {
+    // 1. Obtener procesos disponibles para el postulante
+    async fetchProcesos() {
+      try {
+        this.cargando = true
+        const { data } = await api.get('/examen/procesos')
+        this.procesos = data
+      } catch (e) {
+        this.error = e.response?.data?.message || e.message
+      } finally {
+        this.cargando = false
+      }
+    },
+
+    // 2. Obtener áreas por proceso
+    async fetchAreas(proceso_id) {
+      try {
+        this.cargando = true
+        const { data } = await api.get('/examen/areas', {
+          params: { proceso_id }
+        })
+        this.areas = data
+      } catch (e) {
+        this.error = e.response?.data?.message || e.message
+      } finally {
+        this.cargando = false
+      }
+    },
+
+    // 3. Crear examen (sin preguntas)
+    async crearExamen(area_proceso_id, pago = null) {
+      try {
+        this.cargando = true
+        const payload = { area_proceso_id, ...pago }
+        const { data } = await api.post('/examen/crear', payload)
+        this.examenActual = { id: data.examen_id }
+        return data
+      } catch (e) {
+        this.error = e.response?.data?.message || e.message
+        return { success: false, message: this.error }
+      } finally {
+        this.cargando = false
+      }
+    },
+
+    // 4. Obtener examen actual
+    async fetchExamenActual() {
+      try {
+        this.cargando = true
+        const { data } = await api.get('/examen/actual')
+        this.examenActual = data.examen
+      } catch (e) {
+        this.error = e.response?.data?.message || e.message
+      } finally {
+        this.cargando = false
+      }
+    },
+
+    // 5. Generar preguntas para un examen
+    async generarPreguntas(examenId) {
+      try {
+        this.cargando = true
+        const { data } = await api.post(`/examen/${examenId}/generar-preguntas`)
+        return data
+      } catch (e) {
+        this.error = e.response?.data?.message || e.message
+        return { success: false, message: this.error }
+      } finally {
+        this.cargando = false
+      }
+    },
+
+    // 6. Iniciar examen
+    async iniciarExamen(examenId) {
+      try {
+        this.cargando = true
+        const { data } = await api.post('/examen/iniciar', { examen_id: examenId })
+        this.examenActual = data.examen
+        this.preguntas = data.preguntas
+        return data
+      } catch (e) {
+        this.error = e.response?.data?.message || e.message
+        return { success: false, message: this.error }
+      } finally {
+        this.cargando = false
+      }
+    },
+
+    // 7. Responder pregunta
+    async responderPregunta(preguntaId, respuesta) {
+      try {
+        const { data } = await api.post(`/examen/pregunta/${preguntaId}/responder`, { respuesta })
+        // Actualizar pregunta local si es necesario
+        const index = this.preguntas.findIndex(p => p.id === preguntaId)
+        if (index !== -1) this.preguntas[index].respuesta = respuesta
+        return data
+      } catch (e) {
+        this.error = e.response?.data?.message || e.message
+        return { success: false, message: this.error }
+      }
+    },
+
+    // 8. Finalizar examen
+    async finalizarExamen(examenId) {
+      try {
+        const { data } = await api.post(`/examen/${examenId}/finalizar`)
+        this.examenActual = null
+        this.preguntas = []
+        return data
+      } catch (e) {
+        this.error = e.response?.data?.message || e.message
+        return { success: false, message: this.error }
+      }
+    },
+
+    // Limpiar estado
+    resetStore() {
+      this.procesos = []
+      this.areas = []
+      this.examenActual = null
+      this.preguntas = []
+      this.cargando = false
+      this.error = null
+    }
+  }
+})
diff --git a/front/src/store/postulanteStore.js b/front/src/store/postulanteStore.js
new file mode 100644
index 0000000..3a0a8ce
--- /dev/null
+++ b/front/src/store/postulanteStore.js
@@ -0,0 +1,141 @@
+// stores/authStore.js
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import api from '../axiosPostulante'
+
+export const useAuthStore = defineStore('auth', () => {
+  // Estado
+  const token = ref(localStorage.getItem('postulante_token') || null)
+  const postulante = ref(JSON.parse(localStorage.getItem('postulante_data') || 'null'))
+  const loading = ref(false)
+  const error = ref(null)
+
+  // Getters
+  const isAuthenticated = computed(() => !!token.value)
+  const userDni = computed(() => postulante.value?.dni || null)
+  const userEmail = computed(() => postulante.value?.email || null)
+  const userName = computed(() => postulante.value?.name || null)
+  const userId = computed(() => postulante.value?.id || null)
+
+  // Actions
+
+  // Registro
+  const register = async ({ name, email, password, password_confirmation, dni }) => {
+    try {
+      loading.value = true
+      error.value = null
+
+      const response = await api.post('/postulante/register', {
+        name,
+        email,
+        password,
+        password_confirmation,
+        dni
+      })
+
+      if (response.data.success) {
+        token.value = response.data.token
+        postulante.value = response.data.postulante
+
+        localStorage.setItem('postulante_token', token.value)
+        localStorage.setItem('postulante_data', JSON.stringify(postulante.value))
+
+        return { success: true }
+      }
+
+      return { success: false, error: response.data.message || 'Error en registro' }
+    } catch (err) {
+      error.value = err.response?.data?.message || 'Error en registro'
+      return { success: false, error: error.value }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // Login
+  const login = async ({ email, password, device_id = null }) => {
+    try {
+      loading.value = true
+      error.value = null
+
+      const response = await api.post('/postulante/login', { email, password, device_id })
+
+      if (response.data.success) {
+        token.value = response.data.token
+        postulante.value = response.data.postulante
+
+        localStorage.setItem('postulante_token', token.value)
+        localStorage.setItem('postulante_data', JSON.stringify(postulante.value))
+
+        return { success: true }
+      }
+
+      return { success: false, error: response.data.message || 'Credenciales inválidas' }
+    } catch (err) {
+      error.value = err.response?.data?.message || 'Error en login'
+      return { success: false, error: error.value }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // Logout
+  const logout = async () => {
+    try {
+      if (token.value) {
+        await api.post('/postulante/logout', {}, {
+          headers: { Authorization: `Bearer ${token.value}` }
+        })
+      }
+    } catch (err) {
+      console.error('Error en logout:', err)
+    } finally {
+      token.value = null
+      postulante.value = null
+      localStorage.removeItem('postulante_token')
+      localStorage.removeItem('postulante_data')
+    }
+  }
+
+  // Check sesión
+  const checkAuth = async () => {
+    if (!token.value) return false
+
+    try {
+      const response = await api.get('/postulante/me', {
+        headers: { Authorization: `Bearer ${token.value}` }
+      })
+
+      if (response.data.success) {
+        postulante.value = response.data.postulante
+        return true
+      }
+    } catch (err) {
+      console.error('Error verificando autenticación:', err)
+      await logout()
+    }
+
+    return false
+  }
+
+  return {
+    // Estado
+    token,
+    postulante,
+    loading,
+    error,
+
+    // Getters
+    isAuthenticated,
+    userDni,
+    userEmail,
+    userName,
+    userId,
+
+    // Actions
+    register,
+    login,
+    logout,
+    checkAuth
+  }
+})
diff --git a/front/src/store/reglaAreaProceso.store.js b/front/src/store/reglaAreaProceso.store.js
new file mode 100644
index 0000000..54e0ca8
--- /dev/null
+++ b/front/src/store/reglaAreaProceso.store.js
@@ -0,0 +1,257 @@
+import { defineStore } from 'pinia'
+import api from '../axios'
+
+export const useReglaAreaProcesoStore = defineStore('reglaAreaProceso', {
+  state: () => ({
+    areaProcesoId: null,
+    proceso: null,
+    reglas: [],
+    areaProcesos: [],
+    cargando: false,
+    guardando: false,
+    error: null,
+    totalPreguntasAsignadas: 0,
+    preguntasDisponibles: 0,
+  }),
+
+  getters: {
+    // Obtener total de preguntas del proceso
+    totalPreguntasProceso: (state) => state.proceso?.cantidad_total_preguntas || 0,
+    
+    // Verificar si se ha alcanzado el límite
+    limiteAlcanzado: (state) => state.totalPreguntasAsignadas >= (state.proceso?.cantidad_total_preguntas || 0),
+  },
+
+  actions: {
+    /**
+     * Establecer el area_proceso actual y cargar sus reglas
+     */
+    async setAreaProceso(id) {
+      this.areaProcesoId = id
+      await this.cargarReglas()
+    },
+async cargarAreaProcesos() {
+  this.cargando = true
+  try {
+    // Llamada al endpoint que devuelve áreas-proceso con nombres, reglas y cursos
+    const { data } = await api.get('/area-proceso/areasprocesos')
+
+    // Guardamos en el store
+    // Ahora contiene todas las áreas-proceso, con sus nombres y contadores
+    this.areaProcesos = data.areaProcesos
+
+  } catch (err) {
+    console.error(err)
+    this.error = err.response?.data?.message || 'Error al cargar áreas-proceso'
+  } finally {
+    this.cargando = false
+  }
+},
+
+
+    /**
+     * Cargar reglas de un area_proceso
+     */
+    async cargarReglas() {
+      if (!this.areaProcesoId) return
+      this.cargando = true
+      this.error = null
+      try {
+        const { data } = await api.get(`/area-proceso/${this.areaProcesoId}/reglas`)
+        this.proceso = data.proceso
+        this.reglas = data.cursos
+        this.totalPreguntasAsignadas = data.total_preguntas_asignadas || 0
+        this.preguntasDisponibles = this.proceso.cantidad_total_preguntas - this.totalPreguntasAsignadas
+      } catch (err) {
+        console.error('Error al cargar reglas:', err)
+        this.error = err.response?.data?.message || 'Error al cargar reglas'
+      } finally {
+        this.cargando = false
+      }
+    },
+
+    /**
+     * Crear o actualizar una regla
+     */
+    async guardarRegla(regla) {
+      if (!this.areaProcesoId) return
+      this.guardando = true
+      this.error = null
+      try {
+        const { data } = await api.post(`/area-proceso/${this.areaProcesoId}/reglas`, regla)
+        
+        // Actualizar la regla en el store si ya existe
+        const index = this.reglas.findIndex(r => r.curso_id === data.regla.curso_id)
+        if (index >= 0) {
+          this.reglas[index] = { ...this.reglas[index], ...data.regla }
+        } else {
+          this.reglas.push(data.regla)
+        }
+        
+        // Ordenar por orden
+        this.reglas.sort((a, b) => (a.orden || 999) - (b.orden || 999))
+        
+        // Actualizar contadores
+        this.totalPreguntasAsignadas = data.total_preguntas_asignadas
+        this.preguntasDisponibles = data.preguntas_disponibles
+        
+        return { success: true, data }
+      } catch (err) {
+        console.error('Error al guardar regla:', err)
+        this.error = err.response?.data?.error || err.response?.data?.message || 'Error al guardar regla'
+        return { 
+          success: false, 
+          error: this.error 
+        }
+      } finally {
+        this.guardando = false
+      }
+    },
+
+    /**
+     * Guardar múltiples reglas a la vez
+     */
+    async guardarReglasMultiple(reglas) {
+      if (!this.areaProcesoId) return
+      this.guardando = true
+      this.error = null
+      try {
+        const { data } = await api.post(`/area-proceso/${this.areaProcesoId}/reglas/multiple`, {
+          reglas: reglas
+        })
+        
+        // Recargar las reglas desde el servidor para asegurar consistencia
+        await this.cargarReglas()
+        
+        return { success: true, data }
+      } catch (err) {
+        console.error('Error al guardar reglas:', err)
+        this.error = err.response?.data?.error || err.response?.data?.message || 'Error al guardar reglas'
+        return { 
+          success: false, 
+          error: this.error 
+        }
+      } finally {
+        this.guardando = false
+      }
+    },
+
+    /**
+     * Editar una regla existente
+     */
+    async editarRegla(reglaId, cambios) {
+      this.guardando = true
+      this.error = null
+      try {
+        const { data } = await api.put(`/reglas/${reglaId}`, cambios)
+        
+        // Actualizar store
+        const index = this.reglas.findIndex(r => r.regla_id === reglaId)
+        if (index >= 0) {
+          this.reglas[index] = { ...this.reglas[index], ...data.regla }
+        }
+        
+        // Actualizar contadores
+        if (data.total_preguntas_asignadas !== undefined) {
+          this.totalPreguntasAsignadas = data.total_preguntas_asignadas
+          this.preguntasDisponibles = this.proceso.cantidad_total_preguntas - this.totalPreguntasAsignadas
+        }
+        
+        // Ordenar por orden
+        this.reglas.sort((a, b) => (a.orden || 999) - (b.orden || 999))
+        
+        return { success: true, data }
+      } catch (err) {
+        console.error('Error al editar regla:', err)
+        this.error = err.response?.data?.error || err.response?.data?.message || 'Error al editar regla'
+        return { 
+          success: false, 
+          error: this.error 
+        }
+      } finally {
+        this.guardando = false
+      }
+    },
+
+    /**
+     * Eliminar una regla
+     */
+    async eliminarRegla(reglaId) {
+      this.guardando = true
+      this.error = null
+      try {
+        const { data } = await api.delete(`/reglas/${reglaId}`)
+        
+        // Eliminar del store
+        this.reglas = this.reglas.filter(r => r.regla_id !== reglaId)
+        
+        // Actualizar contadores
+        if (data.total_preguntas_asignadas !== undefined) {
+          this.totalPreguntasAsignadas = data.total_preguntas_asignadas
+          this.preguntasDisponibles = this.proceso.cantidad_total_preguntas - this.totalPreguntasAsignadas
+        }
+        
+        return { success: true, data }
+      } catch (err) {
+        console.error('Error al eliminar regla:', err)
+        this.error = err.response?.data?.message || 'Error al eliminar regla'
+        return { 
+          success: false, 
+          error: this.error 
+        }
+      } finally {
+        this.guardando = false
+      }
+    },
+
+    /**
+     * Reordenar reglas
+     */
+    async reordenarReglas(reglasOrdenadas) {
+      // Primero actualizar localmente
+      reglasOrdenadas.forEach((regla, index) => {
+        const reglaIndex = this.reglas.findIndex(r => r.curso_id === regla.curso_id)
+        if (reglaIndex >= 0) {
+          this.reglas[reglaIndex].orden = index + 1
+        }
+      })
+      
+      // Ordenar array local
+      this.reglas.sort((a, b) => a.orden - b.orden)
+      
+      // Si hay reglas con ID (existentes), actualizar en backend
+      const reglasConId = this.reglas.filter(r => r.regla_id)
+      
+      if (reglasConId.length > 0) {
+        // Podrías hacer una actualización múltiple o individual
+        // Aquí asumimos que cada regla se actualiza individualmente
+        for (const regla of reglasConId) {
+          if (regla.regla_id) {
+            await this.editarRegla(regla.regla_id, { orden: regla.orden })
+          }
+        }
+      }
+    },
+    
+    /**
+     * Calcular preguntas disponibles para un curso específico
+     */
+    calcularPreguntasDisponibles(cursoId, cantidadActual = 0) {
+      const otrasReglas = this.reglas.filter(r => r.curso_id !== cursoId)
+      const totalOtras = otrasReglas.reduce((sum, r) => sum + (r.cantidad_preguntas || 0), 0)
+      return Math.max(0, this.totalPreguntasProceso - totalOtras - cantidadActual)
+    },
+    
+    /**
+     * Resetear store
+     */
+    reset() {
+      this.areaProcesoId = null
+      this.proceso = null
+      this.reglas = []
+      this.totalPreguntasAsignadas = 0
+      this.preguntasDisponibles = 0
+      this.error = null
+    },
+  }
+})
\ No newline at end of file
diff --git a/front/src/views/administrador/Dashboard.vue b/front/src/views/administrador/Dashboard.vue
index 390b3e6..1b9552a 100644
--- a/front/src/views/administrador/Dashboard.vue
+++ b/front/src/views/administrador/Dashboard.vue
@@ -206,7 +206,7 @@
 
     <!-- Modal para nuevo/editar curso -->
     <a-modal
-      v-model:visible="showModal"
+      v-model:open="showModal"
       :title="modalTitle"
       width="600px"
       @ok="handleModalOk"
diff --git a/front/src/views/administrador/Procesos/ReglasList.vue b/front/src/views/administrador/Procesos/ReglasList.vue
new file mode 100644
index 0000000..63dff7e
--- /dev/null
+++ b/front/src/views/administrador/Procesos/ReglasList.vue
@@ -0,0 +1,769 @@
+<template>
+  <div class="reglas-container">
+    <!-- Header -->
+    <div class="reglas-header">
+      <div class="header-title">
+        <h2>Reglas de Evaluación</h2>
+        <p class="subtitle">Configuración de reglas por área-proceso</p>
+      </div>
+      <a-button v-if="store.areaProcesoId" @click="volverALista" size="large">
+        <template #icon><ArrowLeftOutlined /></template>
+        Volver
+      </a-button>
+    </div>
+
+    <!-- Selección de Área Proceso -->
+    <div v-if="!store.areaProcesoId" class="seleccion-section">
+      <div class="card">
+        <div class="card-header">
+          <h3>Seleccionar Área Proceso</h3>
+          <p>Selecciona un área-proceso para configurar sus reglas</p>
+        </div>
+        <div class="card-body">
+          <!-- Filtros -->
+          <div class="filters">
+            <a-input-search
+              v-model:value="filtroBusqueda"
+              placeholder="Buscar área..."
+              @search="filtrarAreas"
+              style="width: 300px"
+            />
+<a-select
+  v-model:value="filtroProceso"
+  placeholder="Filtrar por proceso"
+  style="width: 250px; margin-left: 16px"
+  @change="filtrarAreas"
+>
+  <a-select-option :value="null">Todos los procesos</a-select-option>
+  <a-select-option 
+    v-for="proceso in procesosUnicos" 
+    :key="proceso.id" 
+    :value="proceso.id"
+  >
+    {{ proceso.nombre }}
+  </a-select-option>
+</a-select>
+            <a-button @click="limpiarFiltros" style="margin-left: 16px">
+              <ReloadOutlined /> Limpiar
+            </a-button>
+          </div>
+
+          <!-- Tabla de Áreas Proceso -->
+          <a-table
+            :data-source="areasProcesoFiltradas"
+            :columns="columnasAreas"
+            :loading="store.cargando"
+            :pagination="{ pageSize: 10 }"
+            row-key="id"
+            @rowClick="seleccionarAreaProceso"
+            class="clickable-table"
+          >
+            <template #bodyCell="{ column, record }">
+              <template v-if="column.key === 'cursos'">
+               <a-tag color="blue">{{ record.cursos_count || 0 }} cursos</a-tag>
+
+              </template>
+              <template v-if="column.key === 'reglas_count'">
+                <a-tag :color="record.reglas_count > 0 ? 'green' : 'default'">
+                  {{ record.reglas_count || 0 }} reglas
+                </a-tag>
+
+              </template>
+              <template v-if="column.key === 'accion'">
+                <a-button type="primary" size="small" @click.stop="seleccionarAreaProceso(record)">
+                  Configurar
+                </a-button>
+              </template>
+            </template>
+          </a-table>
+        </div>
+      </div>
+    </div>
+
+    <!-- Configuración de Reglas -->
+    <div v-else class="configuracion-section">
+      <!-- Header del Proceso -->
+      <div class="proceso-info">
+        <div class="proceso-header">
+          <h3>{{ store.proceso?.nombre }} <span class="separator">/</span> {{ nombreAreaActual }}</h3>
+          <div class="proceso-stats">
+            <div class="stat"><span class="stat-label">Total Preguntas:</span> <span class="stat-value">{{ store.totalPreguntasProceso }}</span></div>
+            <div class="stat"><span class="stat-label">Asignadas:</span> <span class="stat-value">{{ store.totalPreguntasAsignadas }}</span></div>
+            <div class="stat"><span class="stat-label">Disponibles:</span> <span class="stat-value" :class="{ 'cero': store.preguntasDisponibles === 0 }">{{ store.preguntasDisponibles }}</span></div>
+          </div>
+        </div>
+
+        <!-- Barra de Progreso -->
+        <div class="progress-container">
+          <div class="progress-info">
+            <span>Progreso de asignación</span>
+            <span>{{ porcentajeAsignado }}%</span>
+          </div>
+          <a-progress 
+            :percent="porcentajeAsignado" 
+            :stroke-color="store.limiteAlcanzado ? '#ff4d4f' : '#52c41a'"
+            :status="store.limiteAlcanzado ? 'exception' : 'normal'"
+          />
+          <div v-if="store.limiteAlcanzado" class="alerta">
+            <a-alert type="warning" show-icon message="Se ha alcanzado el límite de preguntas" />
+          </div>
+        </div>
+
+        <!-- Acciones Rápidas -->
+        <div class="acciones-rapidas">
+          <a-button @click="autoDistribuir" :disabled="store.preguntasDisponibles === 0">
+            <template #icon><RobotOutlined /></template> Distribuir Automático
+          </a-button>
+          <a-button type="primary" @click="guardarTodo" :loading="store.guardando">
+            <template #icon><SaveOutlined /></template> Guardar Todo
+          </a-button>
+          <a-button @click="restablecerCambios" danger>
+            <template #icon><UndoOutlined /></template> Deshacer Cambios
+          </a-button>
+        </div>
+      </div>
+
+      <!-- Tabla de Reglas -->
+      <div class="reglas-table">
+        <a-table
+          :data-source="store.reglas"
+          :columns="columnasReglas"
+          :loading="store.cargando"
+          row-key="curso_id"
+          :pagination="false"
+        >
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'orden'">
+              <div class="orden-controls">
+                <a-button size="small" @click="cambiarOrden(record, -1)" :disabled="esPrimeraRegla(record)"><UpOutlined /></a-button>
+                <a-input-number v-model:value="record.orden" :min="1" :max="store.reglas.length" @change="marcarComoModificado(record)" size="small" style="width: 60px; margin: 0 4px" />
+                <a-button size="small" @click="cambiarOrden(record, 1)" :disabled="esUltimaRegla(record)"><DownOutlined /></a-button>
+              </div>
+            </template>
+
+            <template v-if="column.key === 'curso'">
+              <div class="curso-info"><strong>{{ record.nombre }}</strong><small>ID: {{ record.curso_id }}</small></div>
+            </template>
+
+            <template v-if="column.key === 'preguntas'">
+              <div class="preguntas-control">
+                <a-input-number
+                    v-model:value="record.cantidad_preguntas"
+                    :min="0"
+                    :max="maxPreguntasPorCurso(record)"
+                    @change="validarPreguntas(record)"
+                    style="width: 100px"
+                    :name="'cantidad_' + record.curso_id"
+                  />
+
+                <div class="preguntas-info">
+                  <small>Máx: {{ maxPreguntasPorCurso(record) }}</small>
+                  <small v-if="tieneErrorPreguntas(record)" class="error"><ExclamationCircleOutlined /> Excede límite</small>
+                </div>
+              </div>
+            </template>
+
+            <template v-if="column.key === 'dificultad'">
+              <a-select v-model:value="record.nivel_dificultad" @change="marcarComoModificado(record)" style="width: 120px">
+                <a-select-option value="bajo"><a-tag color="green">Bajo</a-tag></a-select-option>
+                <a-select-option value="medio"><a-tag color="orange">Medio</a-tag></a-select-option>
+                <a-select-option value="alto"><a-tag color="red">Alto</a-tag></a-select-option>
+              </a-select>
+            </template>
+
+            <template v-if="column.key === 'ponderacion'">
+              <div class="ponderacion-control">
+                <a-input-number
+                  v-model:value="record.ponderacion"
+                  :min="0"
+                  :max="100"
+                  :step="0.1"
+                  :precision="2"
+                  string-mode
+                  style="width: 120px"
+                  @change="marcarComoModificado(record)"
+                />
+                <span style="margin-left: 4px"></span>
+              </div>
+            </template>
+
+
+            <template v-if="column.key === 'acciones'">
+              <a-space>
+                <a-button type="primary" size="small" @click="guardarReglaIndividual(record)" :disabled="!reglaModificada(record) || store.guardando" :loading="guardandoIndividual[record.curso_id]"><SaveOutlined /></a-button>
+                <a-button danger size="small" @click="eliminarRegla(record)" v-if="record.regla_id" :disabled="store.guardando"><DeleteOutlined /></a-button>
+              </a-space>
+            </template>
+
+            <template v-if="column.key === 'estado'">
+              <a-tag v-if="reglaModificada(record)" color="orange"><EditOutlined /> Modificado</a-tag>
+              <a-tag v-else-if="record.regla_id" color="green"><CheckCircleOutlined /> Guardado</a-tag>
+              <a-tag v-else color="default"><ClockCircleOutlined /> Sin guardar</a-tag>
+            </template>
+          </template>
+        </a-table>
+      </div>
+
+      <!-- Resumen -->
+      <div class="resumen-section">
+        <a-card title="Resumen">
+          <div class="resumen-grid">
+            <div class="resumen-item"><span class="resumen-label">Cursos configurados:</span> <span class="resumen-value">{{ cursosConfigurados }} / {{ store.reglas.length }}</span></div>
+            <div class="resumen-item"><span class="resumen-label">Total preguntas asignadas:</span> <span class="resumen-value">{{ store.totalPreguntasAsignadas }}</span></div>
+            <div class="resumen-item"><span class="resumen-label">Preguntas disponibles:</span> <span class="resumen-value">{{ store.preguntasDisponibles }}</span></div>
+            <div class="resumen-item"><span class="resumen-label">Porcentaje completado:</span> <span class="resumen-value">{{ porcentajeAsignado }}%</span></div>
+          </div>
+        </a-card>
+      </div>
+    </div>
+
+    <!-- Modal de Confirmación -->
+    <a-modal
+      v-model:open="showConfirmModal"
+      title="Confirmación"
+      ok-text="Confirmar"
+      cancel-text="Cancelar"
+      @ok="confirmarAccion"
+      @cancel="cancelarAccion"
+    >
+      <p>{{ confirmMessage }}</p>
+    </a-modal>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useReglaAreaProcesoStore } from '../../../store/reglaAreaProceso.store' 
+import { message } from 'ant-design-vue'
+import {
+  ArrowLeftOutlined,
+  SaveOutlined,
+  DeleteOutlined,
+  EditOutlined,
+  CheckCircleOutlined,
+  ClockCircleOutlined,
+  UpOutlined,
+  DownOutlined,
+  RobotOutlined,
+  UndoOutlined,
+  ReloadOutlined,
+  ExclamationCircleOutlined
+} from '@ant-design/icons-vue'
+
+const store = useReglaAreaProcesoStore()
+
+// Estados
+const filtroBusqueda = ref('')
+const filtroProceso = ref(null)
+const areasProceso = ref([])                // inicializado seguro
+const areasProcesoFiltradas = ref([])       // inicializado seguro
+const reglasOriginales = ref([])            // copia de reglas originales
+const reglasModificadas = ref([])           // ids de reglas modificadas
+const guardandoIndividual = ref({})
+const showConfirmModal = ref(false)
+const confirmMessage = ref('')
+const confirmAction = ref(null)
+const confirmData = ref(null)
+const nombreAreaActual = ref('')
+
+// Computed
+const porcentajeAsignado = computed(() => {
+  return store.totalPreguntasProceso === 0
+    ? 0
+    : Math.round((store.totalPreguntasAsignadas / store.totalPreguntasProceso) * 100)
+})
+
+const cursosConfigurados = computed(() => {
+  if (!Array.isArray(store.reglas)) return 0
+  return store.reglas.filter(r => r.cantidad_preguntas > 0).length
+})
+
+// Computed defensivo para procesos únicos
+const procesosUnicos = computed(() => {
+  if (!Array.isArray(areasProceso.value)) return []
+  
+  const procesos = areasProceso.value.map(ap => ({
+    id: ap.proceso_id,
+    nombre: ap.proceso_nombre
+  }))
+  // eliminar duplicados por id
+  return [...new Map(procesos.map(p => [p.id, p])).values()]
+})
+
+// Columnas
+const columnasAreas = [
+  { title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
+  { title: 'Área', dataIndex: 'area_nombre', key: 'area' },
+  { title: 'Proceso', dataIndex: 'proceso_nombre', key: 'proceso' },
+  { title: 'Cursos', key: 'cursos', width: 100, align: 'center' },
+  { title: 'Reglas Configuradas', key: 'reglas_count', width: 120, align: 'center' },
+  { title: 'Acción', key: 'accion', width: 100, align: 'center' }
+]
+
+const columnasReglas = [
+  { title: 'Orden', key: 'orden', width: 120 },
+  { title: 'Curso', key: 'curso' },
+  { title: 'Preguntas', key: 'preguntas', width: 150 },
+  { title: 'Dificultad', key: 'dificultad', width: 120 },
+  { title: 'Ponderación', key: 'ponderacion', width: 200 },
+  { title: 'Estado', key: 'estado', width: 100 },
+  { title: 'Acciones', key: 'acciones', width: 120 }
+]
+
+// Métodos
+const cargarAreasProceso = async () => {
+  await store.cargarAreaProcesos()
+  areasProceso.value = Array.isArray(store.areaProcesos) ? store.areaProcesos : []
+  areasProcesoFiltradas.value = [...areasProceso.value]
+}
+
+const filtrarAreas = () => {
+  let filtradas = Array.isArray(areasProceso.value) ? areasProceso.value : []
+
+  if (filtroProceso.value) {
+    filtradas = filtradas.filter(ap => ap.proceso_id === filtroProceso.value)
+  }
+
+  if (filtroBusqueda.value) {
+    const busqueda = filtroBusqueda.value.toLowerCase()
+    filtradas = filtradas.filter(ap =>
+      (ap.area_nombre || '').toLowerCase().includes(busqueda) ||
+      (ap.proceso_nombre || '').toLowerCase().includes(busqueda)
+    )
+  }
+
+  areasProcesoFiltradas.value = filtradas
+}
+
+const limpiarFiltros = () => {
+  filtroBusqueda.value = ''
+  filtroProceso.value = null
+  areasProcesoFiltradas.value = [...areasProceso.value]
+}
+
+const seleccionarAreaProceso = async (areaProceso) => {
+  if (!areaProceso?.id) return
+  await store.setAreaProceso(areaProceso.id)
+  reglasOriginales.value = Array.isArray(store.reglas) ? JSON.parse(JSON.stringify(store.reglas)) : []
+  reglasModificadas.value = []
+  nombreAreaActual.value = areaProceso?.area?.nombre || ''
+}
+
+const volverALista = () => {
+  if (reglasModificadas.value.length > 0) {
+    confirmMessage.value = 'Tienes cambios sin guardar. ¿Seguro que quieres salir?'
+    confirmAction.value = confirmarVolver
+    showConfirmModal.value = true
+  } else {
+    store.reset()
+  }
+}
+
+const confirmarVolver = () => {
+  store.reset()
+  showConfirmModal.value = false
+}
+
+const maxPreguntasPorCurso = (regla) => store.calcularPreguntasDisponibles(regla?.curso_id, regla?.cantidad_preguntas || 0)
+const tieneErrorPreguntas = (regla) => regla?.cantidad_preguntas > maxPreguntasPorCurso(regla)
+const validarPreguntas = (regla) => {
+  if (tieneErrorPreguntas(regla)) regla.cantidad_preguntas = maxPreguntasPorCurso(regla)
+  marcarComoModificado(regla)
+}
+const reglaModificada = (regla) => {
+  if (!Array.isArray(reglasOriginales.value)) return true
+  const original = reglasOriginales.value.find(r => r.curso_id === regla?.curso_id)
+  if (!original) return true
+  return original.orden !== regla.orden ||
+    original.cantidad_preguntas !== regla.cantidad_preguntas ||
+    original.nivel_dificultad !== regla.nivel_dificultad ||
+    original.ponderacion !== regla.ponderacion
+}
+const marcarComoModificado = (regla) => {
+  if (!regla?.curso_id) return
+  if (reglaModificada(regla) && !reglasModificadas.value.includes(regla.curso_id)) {
+    reglasModificadas.value.push(regla.curso_id)
+  }
+}
+
+const esPrimeraRegla = (regla) => store.reglas.findIndex(r => r?.curso_id === regla?.curso_id) === 0
+const esUltimaRegla = (regla) => store.reglas.findIndex(r => r?.curso_id === regla?.curso_id) === (Array.isArray(store.reglas) ? store.reglas.length - 1 : 0)
+
+// Funciones CRUD y acciones (defensivas)
+const cambiarOrden = (regla, direccion) => {
+  if (!Array.isArray(store.reglas)) return
+  const index = store.reglas.findIndex(r => r?.curso_id === regla?.curso_id)
+  const nuevoIndex = index + direccion
+  if (nuevoIndex < 0 || nuevoIndex >= store.reglas.length) return
+  const temp = store.reglas[index]; store.reglas[index] = store.reglas[nuevoIndex]; store.reglas[nuevoIndex] = temp
+  const tempOrden = store.reglas[index].orden; store.reglas[index].orden = store.reglas[nuevoIndex].orden; store.reglas[nuevoIndex].orden = tempOrden
+  marcarComoModificado(store.reglas[index])
+  marcarComoModificado(store.reglas[nuevoIndex])
+}
+// Guardar todas las reglas modificadas
+const guardarTodo = async () => {
+  if (!Array.isArray(reglasModificadas.value) || reglasModificadas.value.length === 0) {
+    message.info('No hay cambios para guardar')
+    return
+  }
+
+  const reglasAGuardar = store.reglas.filter(r => reglasModificadas.value.includes(r.curso_id))
+  const { success, error } = await store.guardarReglasMultiple(reglasAGuardar)
+  if (success) {
+    message.success('Reglas guardadas correctamente')
+    reglasModificadas.value = [] // reset
+  } else {
+    message.error(error || 'Error al guardar reglas')
+  }
+}
+const guardarReglaIndividual = async (regla) => {
+  if (!store) return
+  const result = await store.guardarRegla(regla)
+  if (!result.success) {
+    console.error('Error al guardar regla individual:', result.error)
+  }
+}
+
+// Restablecer cambios locales
+const restablecerCambios = () => {
+  reglasModificadas.value = []
+  // Restaurar reglas a su estado original
+  if (Array.isArray(reglasOriginales.value)) {
+    store.reglas = JSON.parse(JSON.stringify(reglasOriginales.value))
+  }
+  message.info('Cambios deshechos')
+}
+
+const autoDistribuir = () => {
+  if (!Array.isArray(store.reglas) || store.reglas.length === 0) {
+    message.info('No hay reglas para distribuir')
+    return
+  }
+
+  // Total de preguntas disponibles
+  let disponibles = store.preguntasDisponibles
+
+  // Reglas que aún no tienen preguntas asignadas
+  const reglasSinPreguntas = store.reglas.filter(r => !r.cantidad_preguntas || r.cantidad_preguntas === 0)
+
+  if (reglasSinPreguntas.length === 0) {
+    message.info('Todos los cursos ya tienen preguntas asignadas')
+    return
+  }
+
+  // Distribuir de forma equitativa
+  const cantidadPorCurso = Math.floor(disponibles / reglasSinPreguntas.length)
+  reglasSinPreguntas.forEach(r => {
+    r.cantidad_preguntas = cantidadPorCurso
+    marcarComoModificado(r)
+  })
+
+  message.success('Preguntas distribuidas automáticamente')
+}
+
+// Más métodos de guardado y eliminación...
+// (igual que tu código original, solo asegurando ?. y Array.isArray defensivo)
+
+const confirmarAccion = () => { if(confirmAction.value) confirmAction.value() }
+const cancelarAccion = () => {
+  showConfirmModal.value = false
+  confirmAction.value = null
+  confirmData.value = null
+}
+
+onMounted(() => { cargarAreasProceso() })
+</script>
+
+
+<style scoped>
+.reglas-container {
+  padding: 0;
+}
+
+.reglas-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  padding: 0 8px;
+}
+
+.header-title h2 {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 600;
+  color: #1f1f1f;
+}
+
+.subtitle {
+  margin: 4px 0 0 0;
+  color: #666;
+  font-size: 14px;
+}
+
+/* Selección */
+.seleccion-section {
+  margin-top: 20px;
+}
+
+.card {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  border: 1px solid #f0f0f0;
+  margin-bottom: 24px;
+}
+
+.card-header {
+  padding: 20px 24px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.card-header h3 {
+  margin: 0;
+  font-size: 18px;
+  color: #1f1f1f;
+}
+
+.card-header p {
+  margin: 4px 0 0 0;
+  color: #666;
+  font-size: 14px;
+}
+
+.card-body {
+  padding: 24px;
+}
+
+.filters {
+  display: flex;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.clickable-table :deep(.ant-table-tbody > tr) {
+  cursor: pointer;
+}
+
+.clickable-table :deep(.ant-table-tbody > tr:hover) {
+  background: #fafafa;
+}
+
+/* Configuración */
+.configuracion-section {
+  margin-top: 20px;
+}
+
+.proceso-info {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  border: 1px solid #f0f0f0;
+  padding: 24px;
+  margin-bottom: 24px;
+}
+
+.proceso-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 20px;
+}
+
+.proceso-header h3 {
+  margin: 0;
+  font-size: 20px;
+  color: #1f1f1f;
+}
+
+.separator {
+  color: #999;
+  margin: 0 8px;
+}
+
+.proceso-stats {
+  display: flex;
+  gap: 24px;
+}
+
+.stat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.stat-label {
+  font-size: 12px;
+  color: #666;
+  margin-bottom: 4px;
+}
+
+.stat-value {
+  font-size: 18px;
+  font-weight: 600;
+  color: #1f1f1f;
+}
+
+.stat-value.cero {
+  color: #ff4d4f;
+}
+
+.progress-container {
+  margin-bottom: 20px;
+}
+
+.progress-info {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  font-size: 14px;
+  color: #666;
+}
+
+.alerta {
+  margin-top: 12px;
+}
+
+.acciones-rapidas {
+  display: flex;
+  gap: 12px;
+  margin-top: 20px;
+}
+
+/* Tabla de Reglas */
+.reglas-table {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  border: 1px solid #f0f0f0;
+  margin-bottom: 24px;
+  overflow: hidden;
+}
+
+.orden-controls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.curso-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.curso-info small {
+  color: #999;
+  font-size: 12px;
+}
+
+.preguntas-control {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.preguntas-info {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+}
+
+.preguntas-info .error {
+  color: #ff4d4f;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.ponderacion-control {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Resumen */
+.resumen-section {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  border: 1px solid #f0f0f0;
+}
+
+.resumen-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+}
+
+.resumen-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px;
+  background: #fafafa;
+  border-radius: 8px;
+}
+
+.resumen-label {
+  font-size: 12px;
+  color: #666;
+  margin-bottom: 8px;
+}
+
+.resumen-value {
+  font-size: 18px;
+  font-weight: 600;
+  color: #1f1f1f;
+}
+
+/* Responsive */
+@media (max-width: 1200px) {
+  .resumen-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .proceso-header {
+    flex-direction: column;
+    gap: 16px;
+  }
+  
+  .proceso-stats {
+    width: 100%;
+    justify-content: space-between;
+  }
+}
+
+@media (max-width: 768px) {
+  .reglas-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+  }
+  
+  .filters {
+    flex-direction: column;
+    gap: 12px;
+  }
+  
+  .filters > * {
+    width: 100%;
+    margin-left: 0 !important;
+  }
+  
+  .acciones-rapidas {
+    flex-direction: column;
+  }
+  
+  .resumen-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .reglas-table {
+    overflow-x: auto;
+  }
+  
+  .reglas-table :deep(.ant-table) {
+    min-width: 800px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/front/src/views/administrador/areas/AreasList.vue b/front/src/views/administrador/areas/AreasList.vue
index 21f79a0..eb70c0d 100644
--- a/front/src/views/administrador/areas/AreasList.vue
+++ b/front/src/views/administrador/areas/AreasList.vue
@@ -122,7 +122,7 @@
                   @click="showProcessModal(record)"
                   class="action-btn"
                 >
-                  <ApartmentOutlined /> Procesos
+                  <ApartmentOutlined /> P
                 </a-button>
 
 
@@ -132,7 +132,7 @@
                     @click="showCourseModal(record)"
                     class="action-btn"
                   >
-                    <BookOutlined /> Cursos
+                    <BookOutlined /> C
                   </a-button>
               <a-button 
                 type="link" 
@@ -140,7 +140,7 @@
                 @click="showEditModal(record)"
                 class="action-btn"
               >
-                <EditOutlined /> Editar
+                <EditOutlined /> 
               </a-button>
               <a-button 
                 type="link" 
@@ -149,7 +149,7 @@
                 @click="confirmDelete(record)"
                 class="action-btn"
               >
-                <DeleteOutlined /> Eliminar
+                <DeleteOutlined /> 
               </a-button>
             </a-space>
           </template>
diff --git a/front/src/views/administrador/layout/layout.vue b/front/src/views/administrador/layout/layout.vue
index 71726b1..e094809 100644
--- a/front/src/views/administrador/layout/layout.vue
+++ b/front/src/views/administrador/layout/layout.vue
@@ -193,6 +193,12 @@
                   <span class="menu-label">Cursos</span>
                 </div>
               </a-menu-item>
+              <a-menu-item key="examenes-reglas-lista" class="menu-item">
+                <div class="menu-item-content">
+                  <UnorderedListOutlined class="menu-icon" />
+                  <span class="menu-label">Reglas</span>
+                </div>
+              </a-menu-item>
             </a-sub-menu>
 
             <a-sub-menu key="preguntas" class="sub-menu">
@@ -417,6 +423,9 @@ const handleMenuSelect = ({ key }) => {
     'examenes-proceso-lista': { name: 'Procesos' },
     'examenes-area-lista': { name: 'Areas' },
     'examenes-curso-lista': { name: 'Cursos' },
+    'examenes-reglas-lista': { name: 'Reglas' },
+
+    
     'lista-areas': { name: 'AcademiaAreas' },
     'lista-cursos': { name: 'AcademiaCursos' },
     'resultados': { name: 'AcademiaResultados' },
@@ -467,6 +476,12 @@ const updatePageInfo = (key) => {
       subSection: 'cursos', 
       title: 'cursos', 
       subtitle: 'Lista de Cursos' 
+    },
+    'examenes-reglas-lista': { 
+      section: 'Exámenes', 
+      subSection: 'Reglas', 
+      title: 'Reglas', 
+      subtitle: 'Lista de Reglas' 
     }
   }
   
diff --git a/front/src/views/postulante/Dashboard.vue b/front/src/views/postulante/Dashboard.vue
new file mode 100644
index 0000000..14f7ac3
--- /dev/null
+++ b/front/src/views/postulante/Dashboard.vue
@@ -0,0 +1,355 @@
+<template>
+  <a-card title="Mi Examen" :loading="examenStore.cargando">
+    <!-- Estado de carga -->
+    <template v-if="examenStore.cargando && !examenStore.examenActual">
+      <a-skeleton active />
+    </template>
+
+    <!-- Si no hay examen asignado -->
+    <div v-else-if="!examenStore.examenActual" class="no-examen">
+      <a-empty description="No tienes un examen asignado actualmente">
+        <template #extra>
+          <a-button type="primary" @click="showModal = true">
+            Asignar Examen
+          </a-button>
+        </template>
+      </a-empty>
+    </div>
+
+    <!-- Si hay examen -->
+    <div v-else class="examen-info">
+      <a-descriptions title="Información del Examen" bordered>
+        <a-descriptions-item label="Proceso">
+          {{ examenStore.examenActual.proceso?.nombre || 'No asignado' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="Área">
+          {{ examenStore.examenActual.area?.nombre || 'No asignado' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="Intentos realizados">
+          {{ examenStore.examenActual.intentos || 0 }}
+        </a-descriptions-item>
+        <a-descriptions-item label="Estado del examen">
+          <a-tag :color="getEstadoColor">
+            {{ getEstadoTexto }}
+          </a-tag>
+        </a-descriptions-item>
+        <a-descriptions-item label="Pago" v-if="examenStore.examenActual.pagado">
+          <a-tag color="green">Pagado ({{ examenStore.examenActual.tipo_pago }})</a-tag>
+        </a-descriptions-item>
+      </a-descriptions>
+
+      <div class="actions-container" style="margin-top: 24px;">
+        <!-- Botón Seleccionar Área (solo si no tiene área) -->
+        <a-button 
+          v-if="!examenStore.examenActual.area"
+          type="primary"
+          @click="showModal = true"
+          style="margin-right: 8px;"
+        >
+          Seleccionar Área
+        </a-button>
+
+        <!-- Botón Iniciar Examen (solo si hay examen y no hay intentos) -->
+        <a-button 
+          v-if="examenStore.examenActual && (!examenStore.examenActual.intentos || examenStore.examenActual.intentos === 0)"
+          type="primary"
+          :loading="iniciandoExamen"
+          @click="irAlExamen"
+          style="margin-right: 8px;"
+        >
+          Iniciar Examen
+        </a-button>
+
+        <!-- Botón Ver Resultados (solo si hay intentos) -->
+        <a-button 
+          v-if="examenStore.examenActual?.intentos > 0"
+          type="default"
+          @click="verResultado"
+        >
+          Ver Resultados
+        </a-button>
+      </div>
+    </div>
+
+    <!-- Modal para seleccionar área -->
+    <a-modal
+      v-model:visible="showModal"
+      title="Seleccionar Área de Examen"
+      :confirm-loading="creandoExamen"
+      @ok="crearExamen"
+      @cancel="resetModal"
+      :mask-closable="false"
+      width="600px"
+    >
+      <a-form :model="formState" :rules="rules" layout="vertical">
+        <!-- Selección de Proceso -->
+        <a-form-item label="Proceso" name="proceso_id" required>
+          <a-select
+            v-model:value="formState.proceso_id"
+            placeholder="Seleccione un proceso"
+            :options="procesoOptions"
+            @change="handleProcesoChange"
+            :loading="examenStore.cargando"
+          />
+        </a-form-item>
+
+        <!-- Selección de Área -->
+        <a-form-item label="Área" name="area_proceso_id" required>
+          <a-select
+            v-model:value="formState.area_proceso_id"
+            placeholder="Seleccione un área"
+            :options="areaOptions"
+            :disabled="!formState.proceso_id"
+            :loading="examenStore.cargando"
+          />
+        </a-form-item>
+
+        <!-- Información de pago (si el proceso lo requiere) -->
+        <div v-if="procesoRequierePago">
+          <a-alert
+            message="Este proceso requiere pago"
+            type="info"
+            show-icon
+            style="margin-bottom: 16px;"
+          />
+          
+          <a-form-item label="Tipo de Pago" name="tipo_pago" required>
+            <a-select
+              v-model:value="formState.tipo_pago"
+              placeholder="Seleccione tipo de pago"
+              :options="tipoPagoOptions"
+            />
+          </a-form-item>
+
+          <a-form-item label="Código de Pago" name="codigo_pago" required>
+            <a-input
+              v-model:value="formState.codigo_pago"
+              placeholder="Ingrese el código de pago"
+            />
+          </a-form-item>
+        </div>
+      </a-form>
+    </a-modal>
+  </a-card>
+</template>
+
+<script setup>
+import { ref, computed, reactive, onMounted, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { useExamenStore } from '../../store/examen.store'
+import { message, Modal } from 'ant-design-vue'
+
+const router = useRouter()
+const examenStore = useExamenStore()
+
+// Estados reactivos
+const showModal = ref(false)
+const iniciandoExamen = ref(false)
+const creandoExamen = ref(false)
+
+// Formulario para crear examen
+const formState = reactive({
+  proceso_id: undefined,
+  area_proceso_id: undefined,
+  tipo_pago: undefined,
+  codigo_pago: ''
+})
+
+// Reglas de validación
+const rules = {
+  proceso_id: [{ required: true, message: 'Por favor seleccione un proceso' }],
+  area_proceso_id: [{ required: true, message: 'Por favor seleccione un área' }],
+  tipo_pago: [{ 
+    required: computed(() => procesoRequierePago.value), 
+    message: 'Por favor seleccione tipo de pago' 
+  }],
+  codigo_pago: [{ 
+    required: computed(() => procesoRequierePago.value), 
+    message: 'Por favor ingrese código de pago' 
+  }]
+}
+
+// Opciones para selects
+const procesoOptions = computed(() => {
+  return examenStore.procesos.map(p => ({
+    value: p.id,
+    label: p.nombre,
+    requiere_pago: p.requiere_pago
+  }))
+})
+
+const areaOptions = computed(() => {
+  return examenStore.areas.map(a => ({
+    value: a.area_proceso_id,
+    label: a.nombre
+  }))
+})
+
+const tipoPagoOptions = [
+  { value: 'pyto_peru', label: 'Pago por Pytoperú' },
+  { value: 'banco_nacion', label: 'Banco de la Nación' },
+  { value: 'caja', label: 'Caja' }
+]
+
+// Computed properties
+const procesoRequierePago = computed(() => {
+  const proceso = examenStore.procesos.find(p => p.id === formState.proceso_id)
+  return proceso?.requiere_pago === 1
+})
+
+const getEstadoColor = computed(() => {
+  if (!examenStore.examenActual?.intentos || examenStore.examenActual.intentos === 0) {
+    return 'blue'
+  }
+  return 'green'
+})
+
+const getEstadoTexto = computed(() => {
+  if (!examenStore.examenActual?.intentos || examenStore.examenActual.intentos === 0) {
+    return 'Disponible'
+  }
+  return 'Completado'
+})
+
+// Métodos
+const handleProcesoChange = async (procesoId) => {
+  formState.area_proceso_id = undefined
+  if (procesoId) {
+    await examenStore.fetchAreas(procesoId)
+  }
+}
+
+const crearExamen = async () => {
+  try {
+    creandoExamen.value = true
+    
+    const pagoData = procesoRequierePago.value ? {
+      tipo_pago: formState.tipo_pago,
+      codigo_pago: formState.codigo_pago
+    } : null
+
+    const result = await examenStore.crearExamen(
+      formState.area_proceso_id,
+      pagoData
+    )
+
+    if (result.success) {
+      message.success('Examen creado correctamente')
+      showModal.value = false
+      resetModal()
+      // Recargar el examen actual
+      await examenStore.fetchExamenActual()
+    } else {
+      message.error(result.message || 'Error al crear examen')
+    }
+  } catch (error) {
+    message.error('Error al crear examen')
+  } finally {
+    creandoExamen.value = false
+  }
+}
+
+const irAlExamen = async () => {
+  if (!examenStore.examenActual?.id) {
+    message.error('No hay examen para iniciar')
+    return
+  }
+
+  try {
+    iniciandoExamen.value = true
+    
+    // Primero intentar generar preguntas
+    const generarResult = await examenStore.generarPreguntas(examenStore.examenActual.id)
+    
+    if (!generarResult.success) {
+      // Si hay error real, mostrar mensaje
+      if (!generarResult.ya_tiene_preguntas) {
+        message.error(generarResult.message || 'Error al generar preguntas')
+        return
+      }
+      // Si ya tiene preguntas, es un éxito (continuar)
+    }
+
+    // Luego iniciar el examen (esto carga las preguntas)
+    const iniciarResult = await examenStore.iniciarExamen(examenStore.examenActual.id)
+    
+    if (iniciarResult.success) {
+      // Redirigir al panel de examen
+router.push({ name: 'PanelExamen', params: { examenId: examenStore.examenActual.id } })
+
+    } else {
+      message.error(iniciarResult.message || 'Error al iniciar examen')
+    }
+  } catch (error) {
+    message.error('Error al procesar la solicitud')
+    console.error(error)
+  } finally {
+    iniciandoExamen.value = false
+  }
+}
+
+const verResultado = async () => {
+  // Actualizar intentos del examen
+  await examenStore.fetchExamenActual()
+  
+  // Redirigir a resultados
+  router.push({ 
+    name: 'PanelResultados',
+    params: { examenId: examenStore.examenActual?.id }
+  })
+}
+
+const resetModal = () => {
+  Object.keys(formState).forEach(key => {
+    if (key === 'proceso_id' || key === 'area_proceso_id') {
+      formState[key] = undefined
+    } else if (key === 'codigo_pago') {
+      formState[key] = ''
+    } else {
+      formState[key] = undefined
+    }
+  })
+}
+
+// Lifecycle
+onMounted(async () => {
+  // Cargar procesos disponibles
+  await examenStore.fetchProcesos()
+  
+  // Cargar examen actual
+  await examenStore.fetchExamenActual()
+})
+
+// Watch para limpiar áreas cuando se cierra el modal
+watch(showModal, (newVal) => {
+  if (!newVal) {
+    examenStore.areas = []
+  }
+})
+</script>
+
+<style scoped>
+.no-examen {
+  text-align: center;
+  padding: 40px 0;
+}
+
+.examen-info {
+  padding: 16px 0;
+}
+
+.actions-container {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+:deep(.ant-descriptions) {
+  margin-bottom: 16px;
+}
+
+:deep(.ant-descriptions-item-label) {
+  font-weight: 600;
+  width: 180px;
+}
+</style>
\ No newline at end of file
diff --git a/front/src/views/postulante/LoginView.vue b/front/src/views/postulante/LoginView.vue
new file mode 100644
index 0000000..db67d33
--- /dev/null
+++ b/front/src/views/postulante/LoginView.vue
@@ -0,0 +1,1284 @@
+<!-- views/LoginView.vue -->
+<template>
+  <div class="login-page">
+    <!-- Encabezado con logo UNA -->
+    <header class="login-header">
+      <div class="header-container">
+        <div class="una-logo">
+          <div class="logo-wrapper">
+            <img src="/logotiny.png" alt="Logo UNA" class="logo-img" />
+          </div>
+          <div class="una-titles">
+            <h1 class="una-main-title">Universidad Nacional del Altiplano</h1>
+            <h2 class="una-subtitle">Portal del Postulante</h2>
+          </div>
+        </div>
+        <div class="header-contact">
+          <div class="contact-item">
+            <span class="contact-label">Admisión:</span>
+            <span class="contact-value">(051) 123-4567</span>
+          </div>
+          <div class="contact-item">
+            <span class="contact-label">Email:</span>
+            <span class="contact-value">admision@una.edu.pe</span>
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <!-- Contenido principal -->
+    <main class="login-main">
+      <div class="login-container">
+        <!-- Card de Login/Registro -->
+        <div class="auth-card">
+          <!-- Logo más pequeño dentro del card -->
+          <div class="card-logo">
+            <div class="logo-icon-small">
+              <img src="/logotiny.png" alt="Logo UNA" />
+            </div>
+            <div class="card-logo-text">
+              <h2>Acceso al Sistema</h2>
+              <span>Ingresa o crea tu cuenta para continuar</span>
+            </div>
+          </div>
+
+          <!-- Tabs para Login/Registro -->
+          <a-tabs v-model:activeKey="activeTab" centered class="auth-tabs">
+            <a-tab-pane key="login" tab="Iniciar Sesión">
+              <div class="form-section">
+                <div class="form-header">
+                  <h3>Acceder a mi cuenta</h3>
+                  <p>Ingresa tus credenciales para continuar</p>
+                </div>
+
+                <a-form
+                  :model="loginForm"
+                  :rules="loginRules"
+                  layout="vertical"
+                  @finish="handleLogin"
+                  class="auth-form"
+                  ref="loginFormRef"
+                >
+                  <a-form-item label="Correo Electrónico" name="email">
+                    <a-input
+                      v-model:value="loginForm.email"
+                      placeholder="ejemplo@correo.com"
+                      size="large"
+                      :disabled="authStore.loading"
+                      autocomplete="username"
+                    >
+                      <template #prefix>
+                        <MailOutlined />
+                      </template>
+                    </a-input>
+                  </a-form-item>
+
+                  <a-form-item label="Contraseña" name="password">
+                    <a-input-password
+                      v-model:value="loginForm.password"
+                      placeholder="Tu contraseña"
+                      size="large"
+                      :disabled="authStore.loading"
+                      autocomplete="current-password"
+                    >
+                      <template #prefix>
+                        <LockOutlined />
+                      </template>
+                    </a-input-password>
+                  </a-form-item>
+
+                  <!-- Opciones adicionales login -->
+                  <div class="form-options">
+                    <a-checkbox v-model:checked="rememberMe">
+                      Recordar sesión
+                    </a-checkbox>
+                    <a-button type="link" @click="showForgotPassword">
+                      ¿Olvidaste tu contraseña?
+                    </a-button>
+                  </div>
+
+                  <!-- Mensaje de error -->
+                  <div v-if="authStore.error && activeTab === 'login'" class="error-message">
+                    <AlertOutlined />
+                    <span>{{ authStore.error }}</span>
+                  </div>
+
+                  <!-- Botón de submit -->
+                  <a-form-item>
+                    <a-button
+                      type="primary"
+                      html-type="submit"
+                      size="large"
+                      :loading="authStore.loading && activeTab === 'login'"
+                      block
+                      class="submit-btn"
+                    >
+                      <template v-if="!authStore.loading || activeTab !== 'login'">
+                        <LoginOutlined />
+                        Iniciar Sesión
+                      </template>
+                      <span v-else>Verificando...</span>
+                    </a-button>
+                  </a-form-item>
+
+                  <!-- Enlace para registrarse -->
+                  <div class="switch-auth">
+                    <span>¿No tienes una cuenta? </span>
+                    <a-button type="link" @click="activeTab = 'register'">
+                      Regístrate aquí
+                    </a-button>
+                  </div>
+                </a-form>
+              </div>
+            </a-tab-pane>
+
+            <a-tab-pane key="register" tab="Registrarse">
+              <div class="form-section">
+                <div class="form-header">
+                  <h3>Crear nueva cuenta</h3>
+                  <p>Completa el formulario para registrarte</p>
+                </div>
+
+                <a-form
+                  :model="registerForm"
+                  :rules="registerRules"
+                  layout="vertical"
+                  @finish="handleRegister"
+                  class="auth-form"
+                  ref="registerFormRef"
+                >
+                  <a-row :gutter="16">
+                    <a-col :xs="24" :sm="24" :md="12">
+                      <a-form-item label="Nombres" name="name">
+                        <a-input
+                          v-model:value="registerForm.name"
+                          placeholder="Tus nombres completos"
+                          size="large"
+                          :disabled="authStore.loading"
+                          autocomplete="username"
+                        >
+                          <template #prefix>
+                            <UserOutlined />
+                          </template>
+                        </a-input>
+                      </a-form-item>
+                    </a-col>
+                    <a-col :xs="24" :sm="24" :md="12">
+                      <a-form-item label="DNI" name="dni">
+                        <a-input
+                          v-model:value="registerForm.dni"
+                          placeholder="87654321"
+                          size="large"
+                          :maxlength="8"
+                          :disabled="authStore.loading"
+                        >
+                          <template #prefix>
+                            <IdcardOutlined />
+                          </template>
+                        </a-input>
+                      </a-form-item>
+                    </a-col>
+                  </a-row>
+
+                  <a-form-item label="Correo Electrónico" name="email">
+                    <a-input
+                      v-model:value="registerForm.email"
+                      placeholder="ejemplo@correo.com"
+                      size="large"
+                      :disabled="authStore.loading"
+                      autocomplete="email"
+                    >
+                      <template #prefix>
+                        <MailOutlined />
+                      </template>
+                    </a-input>
+                  </a-form-item>
+
+                  <a-row :gutter="16">
+                    <a-col :xs="24" :sm="24" :md="12">
+                      <a-form-item label="Contraseña" name="password">
+                        <a-input-password
+                          v-model:value="registerForm.password"
+                          placeholder="Mínimo 6 caracteres"
+                          size="large"
+                          :disabled="authStore.loading"
+                          autocomplete="new-password"
+                        >
+                          <template #prefix>
+                            <LockOutlined />
+                          </template>
+                        </a-input-password>
+                      </a-form-item>
+                    </a-col>
+                    <a-col :xs="24" :sm="24" :md="12">
+                      <a-form-item label="Confirmar Contraseña" name="password_confirmation">
+                        <a-input-password
+                          v-model:value="registerForm.password_confirmation"
+                          placeholder="Repite tu contraseña"
+                          size="large"
+                          :disabled="authStore.loading"
+                          autocomplete="new-password"
+                        >
+                          <template #prefix>
+                            <SafetyOutlined />
+                          </template>
+                        </a-input-password>
+                      </a-form-item>
+                    </a-col>
+                  </a-row>
+
+                  <!-- Términos y condiciones -->
+                  <a-form-item name="terms">
+                    <a-checkbox v-model:checked="registerForm.terms">
+                      Acepto los 
+                      <a href="#" @click.prevent="showTermsModal">términos y condiciones</a> 
+                      y la 
+                      <a href="#" @click.prevent="showPrivacyModal">política de privacidad</a>
+                    </a-checkbox>
+                  </a-form-item>
+
+                  <!-- Mensaje de error -->
+                  <div v-if="authStore.error && activeTab === 'register'" class="error-message">
+                    <AlertOutlined />
+                    <span>{{ authStore.error }}</span>
+                  </div>
+
+                  <!-- Botón de submit -->
+                  <a-form-item>
+                    <a-button
+                      type="primary"
+                      html-type="submit"
+                      size="large"
+                      :loading="authStore.loading && activeTab === 'register'"
+                      block
+                      class="submit-btn"
+                    >
+                      <template v-if="!authStore.loading || activeTab !== 'register'">
+                        <UserAddOutlined />
+                        Crear Cuenta
+                      </template>
+                      <span v-else>Registrando...</span>
+                    </a-button>
+                  </a-form-item>
+
+                  <!-- Enlace para iniciar sesión -->
+                  <div class="switch-auth">
+                    <span>¿Ya tienes una cuenta? </span>
+                    <a-button type="link" @click="activeTab = 'login'">
+                      Inicia sesión aquí
+                    </a-button>
+                  </div>
+                </a-form>
+              </div>
+            </a-tab-pane>
+          </a-tabs>
+
+          <!-- Enlace de ayuda -->
+          <div class="help-section">
+            <a-divider>¿Necesitas ayuda?</a-divider>
+            <p class="help-text">
+              Si tienes problemas para acceder, comunícate con la
+              Dirección de Admisión al 
+              <a href="tel:0511234567">(051) 123-4567</a>
+            </p>
+          </div>
+        </div>
+      </div>
+    </main>
+
+    <!-- Footer minimalista -->
+    <footer class="login-footer">
+      <div class="footer-container">
+        <p>© 2024 Universidad Nacional del Altiplano - Dirección de Admisión</p>
+        <div class="footer-links">
+          <a href="#" @click.prevent="showTermsModal">Términos y Condiciones</a>
+          <a href="#" @click.prevent="showPrivacyModal">Política de Privacidad</a>
+          <a href="#" @click.prevent="showHelpModal">Ayuda</a>
+        </div>
+      </div>
+    </footer>
+
+    <!-- Modales -->
+    <a-modal
+      v-model:visible="termsModalVisible"
+      title="Términos y Condiciones"
+      :width="modalWidth"
+      :footer="null"
+    >
+      <div class="modal-content">
+        <h3>Términos y Condiciones del Portal del Postulante</h3>
+        <p>1. El postulante se compromete a proporcionar información veraz y actualizada.</p>
+        <p>2. La Universidad se reserva el derecho de verificar la autenticidad de los documentos.</p>
+        <p>3. El acceso al portal es personal e intransferible.</p>
+        <p>4. El postulante es responsable de mantener la confidencialidad de sus credenciales.</p>
+      </div>
+    </a-modal>
+
+    <a-modal
+      v-model:visible="privacyModalVisible"
+      title="Política de Privacidad"
+      :width="modalWidth"
+      :footer="null"
+    >
+      <div class="modal-content">
+        <h3>Política de Privacidad</h3>
+        <p>1. Protegemos tus datos personales conforme a la Ley de Protección de Datos Personales.</p>
+        <p>2. Tu información será utilizada exclusivamente para fines de admisión.</p>
+        <p>3. No compartiremos tu información con terceros sin tu consentimiento.</p>
+        <p>4. Puedes solicitar la eliminación de tus datos según la normativa vigente.</p>
+      </div>
+    </a-modal>
+
+    <a-modal
+      v-model:visible="forgotPasswordModalVisible"
+      title="Recuperar Contraseña"
+      :width="modalWidth"
+      :footer="null"
+    >
+      <div class="modal-content">
+        <p>Ingresa tu correo electrónico para recibir un enlace de recuperación:</p>
+        <a-form
+          :model="forgotPasswordForm"
+          :rules="forgotPasswordRules"
+          layout="vertical"
+          @finish="handleForgotPassword"
+        >
+          <a-form-item label="Correo Electrónico" name="email">
+            <a-input
+              v-model:value="forgotPasswordForm.email"
+              placeholder="ejemplo@correo.com"
+              size="large"
+            >
+              <template #prefix>
+                <MailOutlined />
+              </template>
+            </a-input>
+          </a-form-item>
+          <a-button type="primary" html-type="submit" block :loading="sendingResetLink">
+            <template v-if="!sendingResetLink">
+              Enviar enlace de recuperación
+            </template>
+            <span v-else>Enviando...</span>
+          </a-button>
+        </a-form>
+      </div>
+    </a-modal>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, computed, nextTick } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '../../store/postulanteStore'
+import { 
+  UserOutlined,
+  MailOutlined,
+  LockOutlined,
+  LoginOutlined,
+  UserAddOutlined,
+  SafetyOutlined,
+  IdcardOutlined,
+  AlertOutlined
+} from '@ant-design/icons-vue'
+import { message } from 'ant-design-vue'
+
+const router = useRouter()
+const authStore = useAuthStore()
+
+// Refs
+const activeTab = ref('login')
+const loginFormRef = ref()
+const registerFormRef = ref()
+const rememberMe = ref(false)
+const termsModalVisible = ref(false)
+const privacyModalVisible = ref(false)
+const forgotPasswordModalVisible = ref(false)
+const sendingResetLink = ref(false)
+
+// Computed para ancho de modal responsivo
+const modalWidth = computed(() => {
+  const width = window.innerWidth
+  if (width < 640) return '90%'
+  if (width < 768) return '85%'
+  if (width < 992) return '80%'
+  return '600px'
+})
+
+// Estados de formularios
+const loginForm = reactive({
+  email: '',
+  password: ''
+})
+
+const registerForm = reactive({
+  name: '',
+  email: '',
+  dni: '',
+  password: '',
+  password_confirmation: '',
+  terms: false
+})
+
+const forgotPasswordForm = reactive({
+  email: ''
+})
+
+// Reglas de validación
+const loginRules = {
+  email: [
+    { required: true, message: 'Por favor ingresa tu correo', trigger: 'blur' },
+    { type: 'email', message: 'Correo electrónico inválido', trigger: 'blur' }
+  ],
+  password: [
+    { required: true, message: 'Por favor ingresa tu contraseña', trigger: 'blur' },
+    { min: 6, message: 'La contraseña debe tener al menos 6 caracteres', trigger: 'blur' }
+  ]
+}
+
+const registerRules = {
+  name: [
+    { required: true, message: 'Por favor ingresa tus nombres', trigger: 'blur' },
+    { min: 3, message: 'El nombre debe tener al menos 3 caracteres', trigger: 'blur' }
+  ],
+  email: [
+    { required: true, message: 'Por favor ingresa tu correo', trigger: 'blur' },
+    { type: 'email', message: 'Correo electrónico inválido', trigger: 'blur' }
+  ],
+  dni: [
+    { required: true, message: 'Por favor ingresa tu DNI', trigger: 'blur' },
+    { pattern: /^\d{8}$/, message: 'El DNI debe tener 8 dígitos', trigger: 'blur' }
+  ],
+  password: [
+    { required: true, message: 'Por favor crea una contraseña', trigger: 'blur' },
+    { min: 6, message: 'La contraseña debe tener al menos 6 caracteres', trigger: 'blur' }
+  ],
+password_confirmation: [
+  {
+    required: true,
+    message: 'Por favor confirma tu contraseña',
+    trigger: 'blur'
+  },
+  {
+    async validator(_, value) {
+      if (!value) return
+      if (value !== registerForm.password) {
+        throw new Error('Las contraseñas no coinciden')
+      }
+    },
+    trigger: 'blur'
+  }
+]
+,
+terms: [
+  {
+    async validator(_, value) {
+      if (!value) {
+        throw new Error('Debes aceptar los términos y condiciones')
+      }
+    },
+    trigger: 'change'
+  }
+]
+
+}
+
+const forgotPasswordRules = {
+  email: [
+    { required: true, message: 'Por favor ingresa tu correo', trigger: 'blur' },
+    { type: 'email', message: 'Correo electrónico inválido', trigger: 'blur' }
+  ]
+}
+
+// Manejar login
+const handleLogin = async (values) => {
+  const deviceId = rememberMe.value ? generateDeviceId() : null
+  
+  const result = await authStore.login({
+    email: values.email,
+    password: values.password,
+    device_id: deviceId
+  })
+  
+  if (result.success) {
+    // Redirigir al portal
+    router.push('/portal-postulante')
+  }
+}
+
+// Manejar registro - MODIFICADO: Ahora cambia a login después del registro
+const handleRegister = async (values) => {
+  try {
+    const result = await authStore.register({
+      name: values.name,
+      email: values.email,
+      dni: values.dni,
+      password: values.password,
+      password_confirmation: values.password_confirmation
+    })
+    
+    if (result.success) {
+      // Mostrar mensaje de éxito
+      message.success({
+        content: '¡Registro exitoso! Ahora puedes iniciar sesión con tus credenciales.',
+        duration: 5,
+      })
+      
+      // Guardar el email del registro para facilitar el login
+      loginForm.email = values.email
+      loginForm.password = '' // Limpiar la contraseña por seguridad
+      
+      // Cambiar a la pestaña de login
+      activeTab.value = 'login'
+      
+      // Limpiar el formulario de registro después de un breve delay
+      setTimeout(() => {
+        registerForm.name = ''
+        registerForm.email = ''
+        registerForm.dni = ''
+        registerForm.password = ''
+        registerForm.password_confirmation = ''
+        registerForm.terms = false
+        
+        // Resetear errores de validación
+        if (registerFormRef.value) {
+          registerFormRef.value.clearValidate()
+        }
+      }, 500)
+      
+      return
+    }
+    
+    // Si hay error en el registro, mostrar mensaje
+    if (result.error) {
+      message.error(result.error)
+    }
+    
+  } catch (error) {
+    console.error('Error en registro:', error)
+    message.error('Error en el proceso de registro. Por favor, inténtalo nuevamente.')
+  }
+}
+
+// Funciones auxiliares
+const generateDeviceId = () => {
+  return 'device_' + Math.random().toString(36).substr(2, 9)
+}
+
+const showForgotPassword = () => {
+  forgotPasswordModalVisible.value = true
+}
+
+const handleForgotPassword = async (values) => {
+  sendingResetLink.value = true
+  try {
+    // Aquí implementarías la llamada a la API para recuperar contraseña
+    // await api.post('/postulante/forgot-password', { email: values.email })
+    
+    // Simulando envío
+    await new Promise(resolve => setTimeout(resolve, 1500))
+    
+    message.success('Se ha enviado un enlace de recuperación a tu correo electrónico')
+    forgotPasswordModalVisible.value = false
+    forgotPasswordForm.email = ''
+  } catch (error) {
+    console.error('Error enviando enlace de recuperación:', error)
+    message.error('Error al enviar el enlace de recuperación')
+  } finally {
+    sendingResetLink.value = false
+  }
+}
+
+const showTermsModal = () => {
+  termsModalVisible.value = true
+}
+
+const showPrivacyModal = () => {
+  privacyModalVisible.value = true
+}
+
+const showHelpModal = () => {
+  alert('Para ayuda, contacta a la Dirección de Admisión al (051) 123-4567 o escribe a admision@una.edu.pe')
+}
+
+// Si ya está autenticado, redirigir al portal
+onMounted(async () => {
+  const isAuthenticated = await authStore.checkAuth()
+  if (isAuthenticated) {
+    router.push('/portal')
+  }
+})
+</script>
+
+<style scoped>
+/* Variables */
+:root {
+  --primary-color: #1890ff;
+  --secondary-color: #4a5568;
+  --accent-color: #4299e1;
+  --light-gray: #f7fafc;
+  --medium-gray: #e2e8f0;
+  --dark-gray: #2d3748;
+  --white: #ffffff;
+  --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.06);
+  --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.08);
+  --shadow-heavy: 0 8px 24px rgba(0, 0, 0, 0.12);
+  --font-family: "Times New Roman", Times, serif;
+  --una-blue: #1a365d;
+  --una-gold: #d4af37;
+}
+
+/* Estructura de la página */
+.login-page {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  font-family: var(--font-family);
+  background: #f8f9fa;
+}
+
+/* =========================================== */
+/* ENCABEZADO CON LOGO UNA */
+/* =========================================== */
+.login-header {
+  background: var(--una-blue);
+  color: white;
+  padding: 12px 0;
+  box-shadow: var(--shadow-heavy);
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+}
+
+.header-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.una-logo {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.logo-wrapper {
+  width: 50px;
+  height: 50px;
+  border-radius: 8px;
+  background: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  box-shadow: var(--shadow-medium);
+}
+
+.logo-img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.una-titles {
+  display: flex;
+  flex-direction: column;
+}
+
+.una-main-title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: white;
+  line-height: 1.2;
+}
+
+.una-subtitle {
+  margin: 4px 0 0;
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--una-gold);
+  letter-spacing: 0.5px;
+}
+
+.header-contact {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  text-align: right;
+}
+
+.contact-item {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  font-size: 0.875rem;
+}
+
+.contact-label {
+  font-weight: 600;
+  color: var(--una-gold);
+}
+
+.contact-value {
+  color: white;
+}
+
+/* Contenido principal - CENTRADO */
+.login-main {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 30px 20px;
+  width: 100%;
+}
+
+.login-container {
+  max-width: 500px; /* Ancho fijo para centrar */
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* Card de autenticación */
+.auth-card {
+  background: rgb(255, 255, 255);
+  border-radius: 12px;
+  padding: 40px;
+  box-shadow: var(--shadow-heavy);
+  border: 1px solid var(--medium-gray);
+  width: 100%;
+  margin-top: 20px;
+}
+
+.card-logo {
+  text-align: center;
+  margin-bottom: 30px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid var(--medium-gray);
+}
+
+.logo-icon-small {
+  width: 60px;
+  height: 60px;
+  border-radius: 10px;
+  background: var(--white);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 15px;
+  border: 2px solid var(--primary-color);
+  padding: 5px;
+}
+
+.logo-icon-small img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.card-logo-text h2 {
+  margin: 0 0 8px;
+  color: var(--primary-color);
+  font-size: 1.35rem;
+  font-weight: 700;
+}
+
+.card-logo-text span {
+  color: var(--secondary-color);
+  font-size: 0.875rem;
+}
+
+/* Tabs de autenticación */
+.auth-tabs :deep(.ant-tabs-nav) {
+  margin-bottom: 30px;
+}
+
+.auth-tabs :deep(.ant-tabs-tab) {
+  font-size: 1rem;
+  font-weight: 500;
+  padding: 12px 24px;
+}
+
+.auth-tabs :deep(.ant-tabs-tab-active .ant-tabs-tab-btn) {
+  color: var(--primary-color);
+  font-weight: 600;
+}
+
+.auth-tabs :deep(.ant-tabs-ink-bar) {
+  background: var(--primary-color);
+}
+
+/* Formularios */
+.form-section {
+  background: var(--white);
+  margin-top: 6px;
+  border-radius: 8px;
+  padding: 0;
+}
+
+.form-header {
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.form-header h3 {
+  margin: 0 0 8px;
+  color: var(--primary-color);
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+.form-header p {
+  margin: 0;
+  color: var(--secondary-color);
+  font-size: 0.875rem;
+}
+
+.auth-form :deep(.ant-form-item-label) {
+  font-weight: 600;
+  color: var(--secondary-color);
+  font-size: 0.875rem;
+}
+
+.auth-form :deep(.ant-input),
+.auth-form :deep(.ant-input-password) {
+  border-radius: 6px;
+  border: 1px solid var(--medium-gray);
+  transition: all 0.3s;
+  font-family: var(--font-family);
+}
+
+.auth-form :deep(.ant-input:hover),
+.auth-form :deep(.ant-input-password:hover) {
+  border-color: var(--primary-color);
+}
+
+.auth-form :deep(.ant-input:focus),
+.auth-form :deep(.ant-input-password:focus) {
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
+}
+
+/* Opciones del formulario */
+.form-options {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 20px;
+  font-size: 0.875rem;
+}
+
+.form-options :deep(.ant-checkbox-wrapper) {
+  color: var(--secondary-color);
+}
+
+.form-options :deep(.ant-btn-link) {
+  padding: 0;
+  height: auto;
+  color: var(--primary-color);
+  text-align: left;
+}
+
+.form-options :deep(.ant-btn-link:hover) {
+  color: #096dd9;
+}
+
+/* Switch entre login y registro */
+.switch-auth {
+  text-align: center;
+  margin-top: 20px;
+  color: var(--secondary-color);
+  font-size: 0.875rem;
+}
+
+.switch-auth :deep(.ant-btn-link) {
+  padding: 0;
+  height: auto;
+  color: var(--primary-color);
+  font-weight: 500;
+}
+
+.switch-auth :deep(.ant-btn-link:hover) {
+  color: #096dd9;
+}
+
+/* Mensajes de error */
+.error-message {
+  background: #fff2f0;
+  border: 1px solid #ffccc7;
+  border-radius: 6px;
+  padding: 12px 16px;
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #cf1322;
+  font-size: 0.875rem;
+}
+
+.error-message svg {
+  font-size: 16px;
+}
+
+/* BOTÓN DE SUBMIT - AZUL SÓLIDO */
+.submit-btn {
+  height: 48px;
+  font-weight: 600;
+  background: var(--primary-color); /* Azul sólido */
+  border: none;
+  border-radius: 8px;
+  box-shadow: var(--shadow-medium);
+  transition: all 0.3s;
+  margin-top: 10px;
+  font-size: 1rem;
+}
+
+.submit-btn:hover {
+  background: #096dd9; /* Azul más oscuro para hover */
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-heavy);
+}
+
+.submit-btn:active {
+  background: #0050b3;
+  transform: translateY(0);
+}
+
+/* Términos y condiciones */
+.auth-form :deep(.ant-form-item-control-input-content) .ant-checkbox-wrapper a {
+  color: var(--primary-color);
+  text-decoration: none;
+}
+
+.auth-form :deep(.ant-form-item-control-input-content) .ant-checkbox-wrapper a:hover {
+  text-decoration: underline;
+}
+
+/* Sección de ayuda */
+.help-section {
+  margin-top: 30px;
+}
+
+.help-text {
+  text-align: center;
+  color: var(--secondary-color);
+  font-size: 0.875rem;
+  margin: 0;
+  line-height: 1.5;
+}
+
+.help-text a {
+  color: var(--primary-color);
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.help-text a:hover {
+  text-decoration: underline;
+}
+
+/* Footer */
+.login-footer {
+  background: var(--una-blue);
+  color: white;
+  padding: 20px 0;
+  margin-top: auto;
+  width: 100%;
+}
+
+.footer-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+  text-align: center;
+}
+
+.footer-container p {
+  margin: 0 0 12px;
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 0.75rem;
+}
+
+.footer-links {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  flex-wrap: wrap;
+}
+
+.footer-links a {
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 0.75rem;
+  text-decoration: none;
+  transition: color 0.3s;
+  cursor: pointer;
+}
+
+.footer-links a:hover {
+  color: var(--una-gold);
+  text-decoration: underline;
+}
+
+/* Modales */
+.modal-content {
+  padding: 16px 0;
+  font-family: var(--font-family);
+  font-size: 0.938rem;
+}
+
+.modal-content h3 {
+  color: var(--primary-color);
+  margin-bottom: 16px;
+  font-size: 1.125rem;
+}
+
+.modal-content p {
+  color: var(--secondary-color);
+  margin-bottom: 12px;
+  line-height: 1.6;
+}
+
+/* =========================================== */
+/* MEDIA QUERIES PARA RESPONSIVIDAD */
+/* =========================================== */
+
+/* Tablets pequeñas y móviles grandes (576px - 768px) */
+@media (max-width: 768px) {
+  .header-container {
+    flex-direction: column;
+    gap: 12px;
+    text-align: center;
+  }
+  
+  .una-logo {
+    justify-content: center;
+  }
+  
+  .header-contact {
+    text-align: center;
+    align-items: center;
+  }
+  
+  .contact-item {
+    justify-content: center;
+  }
+  
+  .login-main {
+    padding: 20px 15px;
+  }
+  
+  .auth-card {
+    padding: 30px 25px;
+  }
+  
+  .card-logo-text h2 {
+    font-size: 1.25rem;
+  }
+  
+  .auth-tabs :deep(.ant-tabs-tab) {
+    padding: 10px 20px;
+    font-size: 0.938rem;
+  }
+  
+  .form-header h3 {
+    font-size: 1.125rem;
+  }
+  
+  .submit-btn {
+    height: 46px;
+    font-size: 0.938rem;
+  }
+}
+
+/* Móviles pequeños y medianos (480px - 576px) */
+@media (max-width: 576px) {
+  .login-header {
+    padding: 10px 0;
+  }
+  
+  .una-main-title {
+    font-size: 1rem;
+  }
+  
+  .una-subtitle {
+    font-size: 0.875rem;
+  }
+  
+  .logo-wrapper {
+    width: 40px;
+    height: 40px;
+  }
+  
+  .contact-item {
+    font-size: 0.813rem;
+  }
+  
+  .login-main {
+    padding: 15px 10px;
+  }
+  
+  .auth-card {
+    padding: 25px 20px;
+    border-radius: 10px;
+  }
+  
+  .card-logo {
+    margin-bottom: 25px;
+  }
+  
+  .logo-icon-small {
+    width: 50px;
+    height: 50px;
+  }
+  
+  .card-logo-text h2 {
+    font-size: 1.125rem;
+  }
+  
+  .card-logo-text span {
+    font-size: 0.813rem;
+  }
+  
+  .auth-tabs :deep(.ant-tabs-nav) {
+    margin-bottom: 25px;
+  }
+  
+  .auth-tabs :deep(.ant-tabs-tab) {
+    padding: 8px 16px;
+    font-size: 0.875rem;
+  }
+  
+  .form-header {
+    margin-bottom: 20px;
+  }
+  
+  .form-header h3 {
+    font-size: 1rem;
+  }
+  
+  .form-header p {
+    font-size: 0.813rem;
+  }
+  
+  .auth-form :deep(.ant-form-item-label) {
+    font-size: 0.813rem;
+  }
+  
+  .auth-form :deep(.ant-input),
+  .auth-form :deep(.ant-input-password) {
+    font-size: 0.875rem;
+  }
+  
+  .form-options {
+    font-size: 0.813rem;
+  }
+  
+  .switch-auth {
+    font-size: 0.813rem;
+  }
+  
+  .error-message {
+    padding: 10px 14px;
+    font-size: 0.813rem;
+  }
+  
+  .submit-btn {
+    height: 44px;
+    font-size: 0.875rem;
+  }
+  
+  .help-section {
+    margin-top: 25px;
+  }
+  
+  .help-text {
+    font-size: 0.813rem;
+  }
+  
+  .login-footer {
+    padding: 16px 0;
+  }
+  
+  .footer-container p {
+    font-size: 0.688rem;
+    margin-bottom: 10px;
+  }
+  
+  .footer-links {
+    gap: 15px;
+  }
+  
+  .footer-links a {
+    font-size: 0.688rem;
+  }
+}
+
+/* Móviles muy pequeños (menos de 480px) */
+@media (max-width: 480px) {
+  .una-logo {
+    flex-direction: column;
+    text-align: center;
+    gap: 10px;
+  }
+  
+  .header-contact {
+    width: 100%;
+  }
+  
+  .login-main {
+    padding: 10px 8px;
+  }
+  
+  .auth-card {
+    padding: 20px 16px;
+  }
+  
+  .auth-tabs :deep(.ant-tabs-tab) {
+    padding: 6px 12px;
+    font-size: 0.813rem;
+  }
+  
+  .card-logo-text h2 {
+    font-size: 1rem;
+  }
+  
+  .form-options {
+    flex-direction: column;
+    gap: 10px;
+  }
+  
+  .form-options :deep(.ant-checkbox-wrapper) {
+    width: 100%;
+  }
+  
+  .form-options :deep(.ant-btn-link) {
+    align-self: flex-start;
+  }
+  
+  .submit-btn {
+    height: 42px;
+  }
+  
+  .modal-content {
+    font-size: 0.875rem;
+  }
+  
+  .modal-content h3 {
+    font-size: 1rem;
+  }
+}
+
+/* Pantallas muy altas */
+@media (min-height: 800px) {
+  .login-main {
+    padding-top: 50px;
+    padding-bottom: 50px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/front/src/views/postulante/Pagos.vue b/front/src/views/postulante/Pagos.vue
new file mode 100644
index 0000000..82d3ea2
--- /dev/null
+++ b/front/src/views/postulante/Pagos.vue
@@ -0,0 +1,128 @@
+<template>
+  <a-card class="pagos-card">
+    <template #title>
+      <span>Mis Pagos Realizados</span>
+    </template>
+
+    <!-- Loading -->
+    <a-spin :spinning="loading">
+
+      <!-- Resumen -->
+      <a-alert
+        v-if="!loading"
+        type="info"
+        show-icon
+        class="mb-3"
+      >
+        Total de pagos encontrados: <strong>{{ pagos.length }}</strong>
+      </a-alert>
+
+      <!-- Tabla -->
+      <a-table
+        :dataSource="pagos"
+        :columns="columns"
+        rowKey="key"
+        bordered
+        :pagination="{ pageSize: 5 }"
+      >
+        <!-- Tipo -->
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'tipo'">
+            <a-tag :color="getColor(record.tipo)">
+              {{ record.tipo.toUpperCase() }}
+            </a-tag>
+          </template>
+
+          <template v-else-if="column.key === 'monto'">
+            S/ {{ Number(record.monto).toFixed(2) }}
+          </template>
+
+          <template v-else-if="column.key === 'fecha_pago'">
+            {{ formatFecha(record.fecha_pago) }}
+          </template>
+        </template>
+      </a-table>
+
+    </a-spin>
+  </a-card>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { message } from 'ant-design-vue'
+import api from '.././../axiosPostulante'
+const pagos = ref([])
+const loading = ref(false)
+
+const columns = [
+  {
+    title: 'Tipo',
+    dataIndex: 'tipo',
+    key: 'tipo'
+  },
+  {
+    title: 'Código',
+    dataIndex: 'codigo',
+    key: 'codigo'
+  },
+  {
+    title: 'Monto',
+    dataIndex: 'monto',
+    key: 'monto'
+  },
+  {
+    title: 'Fecha de Pago',
+    dataIndex: 'fecha_pago',
+    key: 'fecha_pago'
+  }
+]
+
+const obtenerPagos = async () => {
+  loading.value = true
+  try {
+    const { data } = await api.get('/postulante/pagos')
+
+    if (data.success) {
+      pagos.value = data.pagos.map((pago, index) => ({
+        ...pago,
+        key: index
+      }))
+    } else {
+      message.error('No se pudieron obtener los pagos')
+    }
+
+  } catch (error) {
+    console.error(error)
+    message.error('Error al cargar pagos')
+  } finally {
+    loading.value = false
+  }
+}
+
+const getColor = (tipo) => {
+  if (tipo === 'pyto_peru') return 'blue'
+  if (tipo === 'banco_nacion') return 'green'
+  if (tipo === 'caja') return 'orange'
+  return 'default'
+}
+
+const formatFecha = (fecha) => {
+  if (!fecha) return '-'
+  return new Date(fecha).toLocaleString('es-PE')
+}
+
+onMounted(() => {
+  obtenerPagos()
+})
+</script>
+
+<style scoped>
+.pagos-card {
+  max-width: 1000px;
+  margin: 20px auto;
+}
+
+.mb-3 {
+  margin-bottom: 16px;
+}
+</style>
diff --git a/front/src/views/postulante/PortalView.vue b/front/src/views/postulante/PortalView.vue
new file mode 100644
index 0000000..898481c
--- /dev/null
+++ b/front/src/views/postulante/PortalView.vue
@@ -0,0 +1,1210 @@
+<!-- views/PortalView.vue -->
+<template>
+  <a-layout style="min-height: 100vh;" class="portal-layout">
+    <!-- Header Responsive -->
+    <a-layout-header class="header">
+      <div class="header-container">
+        <div class="header-left">
+          <div class="brand-section">
+            <a-button
+              type="text"
+              class="menu-toggle"
+              @click="toggleSidebar"
+            >
+              <MenuOutlined />
+            </a-button>
+            
+            <router-link to="/portal-postulante" class="logo-wrapper">
+              <img src="/logotiny.png" alt="Logo UNA" style="height: 40px;" />
+              <div class="logo-content">
+                <h1 class="admin-name">Portal del Postulante</h1>
+              
+              </div>
+            </router-link>
+          </div>
+        </div>
+        
+        <!-- Desktop Actions -->
+        <div class="header-right">
+
+          <!-- Perfil -->
+          <a-dropdown :trigger="['click']" placement="bottomRight" class="profile-dropdown-wrapper">
+            <div class="profile-trigger">
+              <div class="profile-info">
+                <a-avatar 
+                  :size="isMobile ? 32 : 36" 
+                  class="profile-avatar"
+                  :style="{ background: getAvatarColor(authStore.userName) }"
+                >
+                  {{ getUserInitials(authStore.userName) }}
+                </a-avatar>
+
+              </div>
+              <DownOutlined class="dropdown-chevron" />
+            </div>
+
+            <template #overlay>
+              <div class="profile-dropdown">
+                <div class="profile-summary">
+                  <a-avatar 
+                    :size="48"
+                    :style="{ background: getAvatarColor(authStore.userName) }"
+                  >
+                    {{ getUserInitials(authStore.userName) }}
+                  </a-avatar>
+                  <div class="profile-summary-info">
+                    <div class="profile-name">{{ authStore.userName || 'Postulante' }}</div>
+                    <div class="profile-email">{{ authStore.userEmail || 'email@ejemplo.com' }}</div>
+                    <div class="profile-dni">
+                      DNI: {{ authStore.userDni || 'No registrado' }}
+                    </div>
+                    <div class="profile-status">
+                      <a-tag color="green" size="small">Activo</a-tag>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="dropdown-item" @click="goToProfile">
+                  <UserOutlined class="dropdown-icon" />
+                  <div class="dropdown-item-content">
+                    <div class="dropdown-item-title">Mi Perfil</div>
+                    <div class="dropdown-item-subtitle">Información personal</div>
+                  </div>
+                </div>
+
+
+                <div class="dropdown-divider" />
+
+                <div class="dropdown-item logout" @click="handleLogout">
+                  <LogoutOutlined class="dropdown-icon" />
+                  <div class="dropdown-item-content">
+                    <div class="dropdown-item-title">Cerrar sesión</div>
+                    <div class="dropdown-item-subtitle">Salir del portal</div>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </a-dropdown>
+        </div>
+      </div>
+    </a-layout-header>
+
+    <!-- Layout Principal Responsive -->
+    <a-layout
+      class="main-layout"
+      :class="{
+        'layout-collapsed': sidebarCollapsed && !isMobile
+      }"
+    >
+      <!-- Sidebar - Visible en desktop, oculto en móvil -->
+      <div
+        v-if="isMobile && !sidebarCollapsed"
+        class="sidebar-backdrop"
+        @click="sidebarCollapsed = true"
+      />
+      <a-layout-sider
+        v-model:collapsed="sidebarCollapsed"
+        :width="sidebarWidth"
+        :collapsedWidth="collapsedWidth"
+        collapsible
+        breakpoint="lg"
+        :trigger="null"
+        theme="light"
+        class="sidebar"
+        :class="{ 'sidebar-collapsed': sidebarCollapsed, 'sidebar-mobile': isMobile }"
+        @breakpoint="onBreakpoint"
+      >
+
+        <div class="sidebar-menu-container">
+          <a-menu
+            v-model:selectedKeys="selectedKeys"
+            mode="inline"
+            class="sidebar-menu"
+            @select="handleMenuSelect"
+          >
+
+            <!-- Dashboard -->
+            <a-menu-item key="dashboard-postulante" class="menu-item">
+              <div class="menu-item-content">
+                <DashboardOutlined class="menu-icon" />
+                <span class="menu-label">Panel Principal</span>
+              </div>
+            </a-menu-item>
+            
+            <!-- Proceso de Admisión -->
+            <div class="menu-section" v-if="!sidebarCollapsed">
+              <div class="section-label">Proceso de Admisión</div>
+            </div>
+            
+            <a-menu-item key="inscripcion" class="menu-item">
+              <div class="menu-item-content">
+                <FormOutlined class="menu-icon" />
+                <span class="menu-label">Preinscripción</span>
+                
+              </div>
+            </a-menu-item>
+            
+            <a-menu-item key="documentos" class="menu-item">
+              <div class="menu-item-content">
+                <FolderOutlined class="menu-icon" />
+                <span class="menu-label">Documentos</span>
+            
+              </div>
+            </a-menu-item>
+            
+            <a-menu-item key="pagos" class="menu-item">
+              <div class="menu-item-content">
+                <DollarOutlined class="menu-icon" />
+                <span class="menu-label">Pagos</span>
+                <a-tag v-if="!sidebarCollapsed" color="green" size="small">Al día</a-tag>
+              </div>
+            </a-menu-item>
+            
+            <!-- Seguimiento -->
+            <div class="menu-section" v-if="!sidebarCollapsed">
+              <div class="section-label">Seguimiento</div>
+            </div>
+            
+            <a-menu-item key="seguimiento" class="menu-item">
+              <div class="menu-item-content">
+                <LineChartOutlined class="menu-icon" />
+                <span class="menu-label">Estado del Proceso</span>
+              </div>
+            </a-menu-item>
+            
+            <a-menu-item key="resultados" class="menu-item">
+              <div class="menu-item-content">
+                <FileDoneOutlined class="menu-icon" />
+                <span class="menu-label">Resultados</span>
+                <a-badge v-if="!sidebarCollapsed" status="default" />
+              </div>
+            </a-menu-item>
+            
+          
+            
+            <!-- Configuración -->
+            <div class="menu-section" v-if="!sidebarCollapsed">
+              <div class="section-label">Configuración</div>
+            </div>
+            
+            <a-menu-item key="configuracion" class="menu-item">
+              <div class="menu-item-content">
+                <SettingOutlined class="menu-icon" />
+                <span class="menu-label">Configuración</span>
+              </div>
+            </a-menu-item>
+          </a-menu>
+        </div>
+        
+        <!-- Footer del Sidebar -->
+        <div class="sidebar-footer" v-if="!sidebarCollapsed">
+
+          
+          <div class="sidebar-help" @click="openHelp">
+            <QuestionCircleOutlined />
+            <span>Centro de Ayuda</span>
+          </div>
+          
+          <div class="sidebar-version">
+            <div class="version">Portal del Postulante</div>
+            <div class="last-update">UNA Admisión {{ currentYear }}</div>
+          </div>
+        </div>
+      </a-layout-sider>
+
+      <!-- Contenido Principal -->
+      <a-layout-content class="content" :class="{ 'content-collapsed': sidebarCollapsed && !isMobile }">
+        <div class="content-container">
+
+
+          <div class="content-wrapper">
+            <a-card class="content-card">
+              <router-view />
+            </a-card>
+          </div>
+
+        </div>
+      </a-layout-content>
+    </a-layout>
+  </a-layout>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '../../store/postulanteStore'
+import { message } from 'ant-design-vue'
+import {
+  MenuOutlined,
+  DownOutlined,
+  UserOutlined,
+  SettingOutlined,
+  LogoutOutlined,
+  DashboardOutlined,
+  FormOutlined,
+  FolderOutlined,
+  DollarOutlined,
+  LineChartOutlined,
+  FileDoneOutlined,
+  BellOutlined,
+  QuestionCircleOutlined,
+  HomeOutlined,
+  FileTextOutlined,
+  ClockCircleOutlined,
+  CalendarOutlined,
+
+} from '@ant-design/icons-vue'
+
+const router = useRouter()
+const authStore = useAuthStore()
+
+// Estado
+const selectedKeys = ref(['dashboard-postulante'])
+const sidebarCollapsed = ref(false)
+const isMobile = ref(false)
+const currentSection = ref('Panel Principal')
+const currentSubSection = ref('')
+const pageTitle = ref('Panel Principal')
+const pageSubtitle = ref('Bienvenido al Portal del Postulante')
+
+
+const sidebarWidth = computed(() => 280)
+const collapsedWidth = computed(() => (isMobile.value ? 0 : 80))
+
+const currentYear = computed(() => new Date().getFullYear())
+
+// Métodos
+const checkMobile = () => {
+  isMobile.value = window.innerWidth < 992
+  if (isMobile.value) {
+    sidebarCollapsed.value = true
+  }
+}
+
+const toggleSidebar = () => {
+  if (isMobile.value) {
+    sidebarCollapsed.value = !sidebarCollapsed.value
+  } else {
+    sidebarCollapsed.value = !sidebarCollapsed.value
+  }
+}
+
+const onBreakpoint = (broken) => {
+  isMobile.value = broken
+  if (broken) {
+    sidebarCollapsed.value = true
+  }
+}
+
+const getUserInitials = (name) => {
+  if (!name) return 'P'
+  const parts = name.split(' ')
+  if (parts.length === 1) return parts[0].charAt(0).toUpperCase()
+  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase()
+}
+
+const getAvatarColor = (name) => {
+  if (!name) return '#1890ff'
+  const colors = [
+    '#1890ff', '#52c41a', '#fa8c16', '#f5222d',
+    '#722ed1', '#13c2c2', '#eb2f96', '#faad14'
+  ]
+  const index = name.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)
+  return colors[index % colors.length]
+}
+
+const handleMenuSelect = ({ key }) => {
+  selectedKeys.value = [key]
+  updatePageInfo(key)
+
+   const routes = {
+    'dashboard-postulante': { name: 'DashboardPostulante' },
+    'estudiantes-lista': { name: 'AcademiaEstudiantes' },
+    'estudiantes-nuevo': { name: 'AcademiaEstudianteNuevo' },
+    'examenes-proceso-lista': { name: 'Procesos' },
+    'examenes-area-lista': { name: 'Areas' },
+    'examenes-curso-lista': { name: 'Cursos' },
+    'lista-areas': { name: 'AcademiaAreas' },
+    'lista-cursos': { name: 'AcademiaCursos' },
+    'pagos': { name: 'PanelPagos' },
+    'reportes': { name: 'AcademiaReportes' },
+    'config-academia': { name: 'AcademiaConfig' },
+    'usuarios': { name: 'AcademiaUsuarios' }
+  }
+  
+  if (routes[key]) {
+    router.push(routes[key])
+  }
+}
+
+
+const updatePageInfo = (key) => {
+  const pageInfo = {
+    'dashboard-postulante': { 
+      section: 'Panel Principal', 
+      subSection: '', 
+      title: 'Panel Principal', 
+      subtitle: 'Bienvenido al Portal del Postulante' 
+    },
+    'inscripcion': { 
+      section: 'Proceso de Admisión', 
+      subSection: 'Preinscripción', 
+      title: 'Preinscripción', 
+      subtitle: 'Complete su formulario de preinscripción' 
+    },
+    'documentos': { 
+      section: 'Proceso de Admisión', 
+      subSection: 'Documentos', 
+      title: 'Documentos', 
+      subtitle: 'Gestión de documentos requeridos' 
+    },
+    'pagos': { 
+      section: 'Proceso de Admisión', 
+      subSection: 'Pagos', 
+      title: 'Pagos', 
+      subtitle: 'Gestión de pagos y derechos' 
+    },
+    'seguimiento': { 
+      section: 'Seguimiento', 
+      subSection: 'Estado', 
+      title: 'Estado del Proceso', 
+      subtitle: 'Siga el progreso de su admisión' 
+    },
+    'resultados': { 
+      section: 'Seguimiento', 
+      subSection: 'Resultados', 
+      title: 'Resultados', 
+      subtitle: 'Consulte los resultados de su evaluación' 
+    }
+  }
+  
+  const info = pageInfo[key] || { 
+    section: key.charAt(0).toUpperCase() + key.slice(1), 
+    subSection: '', 
+    title: key.charAt(0).toUpperCase() + key.slice(1), 
+    subtitle: 'Portal del Postulante' 
+  }
+  
+  currentSection.value = info.section
+  currentSubSection.value = info.subSection
+  pageTitle.value = info.title
+  pageSubtitle.value = info.subtitle
+}
+
+const handleLogout = async () => {
+  try {
+    await authStore.logout()
+    message.success('Sesión cerrada correctamente')
+    router.push('/login-postulante')
+  } catch (error) {
+    message.error('Error al cerrar sesión')
+  }
+}
+
+const goToProfile = () => {
+  message.info('Perfil del postulante')
+  // router.push('/portal/perfil')
+}
+
+
+const openHelp = () => {
+  message.info('Centro de ayuda disponible')
+  // window.open('/ayuda-postulante', '_blank')
+}
+
+
+
+// Lifecycle
+onMounted(() => {
+  checkMobile()
+  window.addEventListener('resize', checkMobile)
+  updatePageInfo(selectedKeys.value[0])
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', checkMobile)
+})
+</script>
+
+<style scoped>
+/* Layout General */
+.portal-layout {
+  background: #f8fafc;
+}
+
+/* Header Moderno */
+.header {
+  background: white;
+  height: 64px;
+  padding: 0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  border-bottom: 1px solid #f0f0f0;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.header-container {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.brand-section {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.menu-toggle {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  border: none;
+  color: #666;
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s;
+}
+
+.menu-toggle:hover {
+  background: #f5f5f5;
+}
+
+.logo-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  text-decoration: none;
+}
+
+.logo-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.admin-name {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #1f1f1f;
+  line-height: 1.4;
+}
+
+.university-name {
+  font-size: 12px;
+  color: #666;
+  margin-top: 2px;
+}
+
+/* Header Actions */
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.notification-btn {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  color: #666;
+  font-size: 18px;
+}
+
+.notification-btn:hover {
+  background: #f5f5f5;
+}
+
+.notifications-panel {
+  width: 320px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+  border: 1px solid #f0f0f0;
+}
+
+.notifications-header {
+  padding: 16px 20px;
+  background: #f8fafc;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.notifications-header h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.notifications-list {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.notification-item {
+  padding: 16px 20px;
+  display: flex;
+  gap: 12px;
+  border-bottom: 1px solid #f0f0f0;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+.notification-item:hover {
+  background: #f5f5f5;
+}
+
+.notification-item.unread {
+  background: #f0f9ff;
+}
+
+.notification-icon {
+  font-size: 20px;
+  margin-top: 2px;
+}
+
+.notification-content {
+  flex: 1;
+}
+
+.notification-title {
+  font-weight: 500;
+  color: #1f1f1f;
+  margin-bottom: 4px;
+}
+
+.notification-desc {
+  font-size: 13px;
+  color: #666;
+  margin-bottom: 4px;
+}
+
+.notification-time {
+  font-size: 11px;
+  color: #999;
+}
+
+.notifications-footer {
+  padding: 12px 20px;
+  border-top: 1px solid #f0f0f0;
+  text-align: center;
+}
+
+.profile-trigger {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 8px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+.profile-trigger:hover {
+  background: #f5f5f5;
+}
+
+.profile-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.profile-avatar {
+  font-weight: 500;
+  color: white;
+}
+
+.profile-details {
+  display: flex;
+  flex-direction: column;
+}
+
+.profile-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: #1f1f1f;
+  line-height: 1.4;
+}
+
+.role-badge-wrapper {
+  margin-top: 2px;
+}
+
+.role-badge {
+  font-size: 11px;
+  padding: 2px 6px;
+  border-radius: 10px;
+  background: #e6f7ff;
+  color: #1890ff;
+  font-weight: 500;
+}
+
+.role-badge.role-postulante {
+  background: #f6ffed;
+  color: #52c41a;
+}
+
+.dropdown-chevron {
+  font-size: 12px;
+  color: #999;
+  transition: transform 0.3s;
+}
+
+.profile-trigger:hover .dropdown-chevron {
+  color: #666;
+}
+
+/* Profile Dropdown */
+.profile-dropdown {
+  width: 280px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+  border: 1px solid #f0f0f0;
+}
+
+.profile-summary {
+  padding: 20px;
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.profile-summary-info {
+  flex: 1;
+}
+
+.profile-summary-info .profile-name {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.profile-email {
+  font-size: 12px;
+  color: #666;
+  margin-bottom: 2px;
+}
+
+.profile-dni {
+  font-size: 12px;
+  color: #666;
+  margin-bottom: 8px;
+}
+
+.dropdown-item {
+  padding: 12px 20px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+.dropdown-item:hover {
+  background: #f5f5f5;
+}
+
+.dropdown-icon {
+  font-size: 16px;
+  color: #666;
+}
+
+.dropdown-item-content {
+  flex: 1;
+}
+
+.dropdown-item-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #1f1f1f;
+  margin-bottom: 2px;
+}
+
+.dropdown-item-subtitle {
+  font-size: 12px;
+  color: #999;
+}
+
+.dropdown-divider {
+  height: 1px;
+  background: #f0f0f0;
+  margin: 4px 0;
+}
+
+.dropdown-item.logout {
+  border-top: 1px solid #f0f0f0;
+  margin-top: 4px;
+}
+
+.dropdown-item.logout .dropdown-icon {
+  color: #ff4d4f;
+}
+
+.dropdown-item.logout .dropdown-item-title {
+  color: #ff4d4f;
+}
+
+/* Sidebar */
+.sidebar {
+  background: white;
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.06);
+  border-right: 1px solid #f0f0f0;
+  height: calc(100vh - 64px);
+  position: fixed;
+  left: 0;
+  top: 64px;
+  z-index: 99;
+  transition: all 0.3s;
+}
+
+.sidebar-profile {
+  border-bottom: 1px solid #f0f0f0;
+  transition: all 0.3s;
+}
+
+.sidebar-menu-container {
+  height: calc(100% - 100px);
+  overflow-y: auto;
+  padding: 24px 0;
+}
+
+.sidebar-menu-container::-webkit-scrollbar {
+  width: 4px;
+}
+
+.sidebar-menu-container::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+.sidebar-menu-container::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 4px;
+}
+
+.sidebar-menu {
+  border-right: none !important;
+}
+
+.menu-section {
+  padding: 0 16px;
+  margin: 24px 0 12px 0;
+}
+
+.menu-section:first-child {
+  margin-top: 0;
+}
+
+.section-label {
+  font-size: 11px;
+  color: #999;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-weight: 600;
+}
+
+.menu-item {
+  border-radius: 0 !important;
+  margin: 0 !important;
+  height: 40px !important;
+  padding: 0 16px !important;
+  border-left: 3px solid transparent !important;
+}
+
+.menu-item-content {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+}
+
+.menu-icon {
+  font-size: 16px;
+  color: #666;
+  width: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.menu-label {
+  font-size: 14px;
+  color: #333;
+  flex: 1;
+}
+
+.menu-item:deep(.ant-menu-item-selected) {
+  background: #e6f7ff !important;
+  border-left-color: #1890ff !important;
+}
+
+.menu-item:deep(.ant-menu-item-selected) .menu-icon,
+.menu-item:deep(.ant-menu-item-selected) .menu-label {
+  color: #1890ff !important;
+}
+
+/* Sidebar Footer */
+.sidebar-footer {
+  padding: 8px;
+  border-top: 1px solid #f0f0f0;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: white;
+}
+
+.progress-section {
+  margin-bottom: 16px;
+  padding: 12px;
+  background: #f8fafc;
+  border-radius: 8px;
+}
+
+.sidebar-help {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  border-radius: 6px;
+  color: #666;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.sidebar-help:hover {
+  background: #f5f5f5;
+  color: #1890ff;
+}
+
+.sidebar-version {
+  margin-top: 12px;
+  padding: 8px;
+  background: #f8fafc;
+  border-radius: 6px;
+  text-align: center;
+}
+
+.version {
+  font-size: 12px;
+  font-weight: 500;
+  color: #666;
+}
+
+.last-update {
+  font-size: 11px;
+  color: #999;
+  margin-top: 2px;
+}
+
+/* Main Layout */
+.main-layout {
+  margin-left: 280px;
+  transition: margin-left 0.3s ease;
+  min-height: calc(100vh - 64px);
+}
+
+.main-layout.layout-collapsed {
+  margin-left: 80px;
+}
+
+/* Content */
+.content {
+  background: #f8fafc;
+  min-height: calc(100vh - 64px);
+  padding: 24px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.content-container {
+  max-width: 100%;
+  margin: 0 auto;
+}
+
+/* Content Header */
+.content-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 24px;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.breadcrumb {
+  flex: 1;
+  min-width: 0;
+}
+
+.breadcrumb :deep(.ant-breadcrumb) {
+  font-size: 14px;
+}
+
+.breadcrumb :deep(.ant-breadcrumb a) {
+  color: #666;
+}
+
+.breadcrumb :deep(.ant-breadcrumb li:last-child a) {
+  color: #1f1f1f;
+  font-weight: 500;
+}
+
+.page-title {
+  margin-top: 8px;
+}
+
+.page-title h2 {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 600;
+  color: #1f1f1f;
+  line-height: 1.3;
+}
+
+.page-subtitle {
+  font-size: 14px;
+  color: #666;
+  margin-top: 4px;
+}
+
+.content-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Stats Grid */
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.stat-card {
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  border: 1px solid #f0f0f0;
+  transition: all 0.3s;
+  cursor: pointer;
+}
+
+.stat-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transform: translateY(-2px);
+}
+
+.stat-content {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.stat-icon-wrapper {
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+}
+
+.stat-info {
+  flex: 1;
+}
+
+.stat-value {
+  font-size: 24px;
+  font-weight: 600;
+  color: #1f1f1f;
+  line-height: 1.3;
+}
+
+.stat-label {
+  font-size: 14px;
+  color: #666;
+  margin-top: 2px;
+}
+
+/* Action Cards */
+.action-card {
+  border-radius: 12px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.action-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+}
+
+.action-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
+}
+
+/* Page Icon */
+.page-icon {
+  font-size: 64px;
+  color: #1890ff;
+  margin-bottom: 24px;
+}
+
+/* Responsive */
+@media (max-width: 992px) {
+  .main-layout {
+    margin-left: 0 !important;
+  }
+  
+  .main-layout.layout-collapsed {
+    margin-left: 0 !important;
+  }
+  
+  .sidebar {
+    z-index: 1000;
+  }
+  
+  .content {
+    padding: 20px;
+  }
+  
+  .header-container {
+    padding: 0 20px;
+  }
+  
+  .stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .header {
+    height: 56px;
+  }
+  
+  .sidebar {
+    top: 56px;
+    height: calc(100vh - 56px);
+  }
+  
+  .content {
+    padding: 16px;
+    min-height: calc(100vh - 56px);
+  }
+  
+  .header-container {
+    padding: 0 16px;
+  }
+  
+  .admin-name {
+    font-size: 14px;
+  }
+  
+  .menu-toggle {
+    width: 36px;
+    height: 36px;
+    font-size: 16px;
+  }
+  
+  .page-title h2 {
+    font-size: 20px;
+  }
+  
+  .stats-grid {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+  
+  .content-header {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+  }
+  
+  .content-actions {
+    justify-content: flex-end;
+  }
+}
+
+@media (max-width: 576px) {
+  .header-container {
+    padding: 0 12px;
+  }
+  
+  .content {
+    padding: 12px;
+  }
+  
+  .profile-details {
+    display: none;
+  }
+  
+  .dropdown-chevron {
+    display: none;
+  }
+  
+  .university-name {
+    display: none;
+  }
+}
+
+/* Backdrop para móvil */
+.sidebar-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  z-index: 998;
+}
+
+/* Sidebar en móvil */
+.sidebar.sidebar-mobile {
+  position: fixed;
+  left: 0;
+  top: 64px;
+  height: calc(100vh - 64px);
+  z-index: 999;
+  transition: transform 0.3s ease;
+}
+
+.sidebar.sidebar-mobile.ant-layout-sider-collapsed {
+  transform: translateX(-100%);
+}
+
+.content-wrapper {
+  background: transparent;
+}
+
+.content-card {
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  border: 1px solid #f0f0f0;
+  min-height: auto;
+}
+
+</style>
\ No newline at end of file
diff --git a/front/src/views/postulante/PreguntasExamen.vue b/front/src/views/postulante/PreguntasExamen.vue
new file mode 100644
index 0000000..a04c9e9
--- /dev/null
+++ b/front/src/views/postulante/PreguntasExamen.vue
@@ -0,0 +1,664 @@
+<template>
+  <div class="examen-panel">
+    <!-- Header con información del examen -->
+    <a-card>
+      <div class="examen-header">
+        <div class="header-info">
+          <h2>{{ examenInfo.proceso || 'Proceso no disponible' }}</h2>
+          <p><strong>Área:</strong> {{ examenInfo.area || 'Área no disponible' }}</p>
+          <p><strong>Duración:</strong> {{ examenInfo.duracion }} minutos</p>
+          <p><strong>Intentos:</strong> {{ examenInfo.intentos }} / {{ examenInfo.intentos_maximos }}</p>
+          <p><strong>Tiempo restante:</strong></p>
+        </div>
+        <div class="timer">
+          <a-statistic-countdown 
+            :value="timerValue"
+            @finish="finalizarExamenAutomaticamente"
+            format="HH:mm:ss"
+          />
+        </div>
+      </div>
+    </a-card>
+
+    <!-- Preguntas -->
+    <a-card 
+      v-for="(pregunta, index) in preguntasTransformadas" 
+      :key="pregunta.id"
+      class="pregunta-card"
+      style="margin-top: 16px;"
+    >
+      <template #title>
+        <div class="pregunta-header">
+          <span class="pregunta-numero">Pregunta {{ index + 1 }}</span>
+          <span class="curso-tag">
+            <a-tag color="blue">{{ pregunta.curso }}</a-tag>
+          </span>
+          <a-tag :color="pregunta.respondida ? 'green' : 'orange'">
+            {{ pregunta.estado === 'respondida' ? 'Respondida' : 'Pendiente' }}
+          </a-tag>
+        </div>
+      </template>
+
+      <!-- Enunciado -->
+      <div class="enunciado" v-html="pregunta.enunciado"></div>
+
+      <!-- Contenido adicional -->
+      <div v-if="pregunta.extra && pregunta.extra !== pregunta.enunciado" 
+           class="extra" v-html="pregunta.extra"></div>
+
+      <!-- Opciones múltiples -->
+      <div class="opciones" v-if="pregunta.opciones && pregunta.opciones.length">
+        <a-radio-group 
+          v-model:value="pregunta.respuestaSeleccionada"
+          @change="responderPregunta(pregunta)"
+          :disabled="pregunta.estado === 'respondida'"
+        >
+          <a-space direction="vertical" style="width: 100%;">
+            <a-radio 
+              v-for="opcion in pregunta.opcionesOrdenadas" 
+              :key="opcion.key"
+              :value="opcion.key.toString()" <!-- CONVERTIR A STRING -->
+              class="opcion-radio"
+            >
+              <span class="opcion-key">{{ getLetraOpcion(opcion.key) }}.</span>
+              <span v-html="opcion.texto" class="opcion-texto"></span>
+            </a-radio>
+          </a-space>
+        </a-radio-group>
+        
+        <!-- Mostrar respuesta seleccionada -->
+        <div v-if="pregunta.respuestaSeleccionada" class="seleccion-actual">
+          <a-alert 
+            :message="`Ha seleccionado: ${getTextoOpcionSeleccionada(pregunta)}`"
+            type="info"
+            show-icon
+            style="margin-top: 12px;"
+          />
+        </div>
+      </div>
+
+      <!-- Pregunta abierta (si no hay opciones) -->
+      <div v-else class="pregunta-abierta">
+        <a-textarea
+          v-model:value="pregunta.respuestaTexto"
+          placeholder="Escriba su respuesta aquí..."
+          :rows="4"
+          :disabled="pregunta.estado === 'respondida'"
+          @blur="responderPreguntaTexto(pregunta)"
+        />
+      </div>
+      
+      <!-- Información de respuesta correcta (solo para debug) -->
+      <div v-if="debugMode" class="debug-info">
+        <a-alert 
+          :message="`Respuesta correcta: ${pregunta.respuesta} (key: ${pregunta.respuestaKey})`"
+          type="warning"
+          show-icon
+          style="margin-top: 12px;"
+        />
+      </div>
+    </a-card>
+
+    <!-- Resumen y botones -->
+    <a-card style="margin-top: 24px;">
+      <div class="resumen-examen">
+        <h3>Resumen del Examen</h3>
+        <p><strong>Total preguntas:</strong> {{ preguntasTransformadas.length }}</p>
+        <p><strong>Respondidas:</strong> {{ preguntasRespondidas }} de {{ preguntasTransformadas.length }}</p>
+        <p><strong>Progreso:</strong></p>
+        <a-progress :percent="porcentajeCompletado" :stroke-color="{
+          '0%': '#108ee9',
+          '100%': '#87d068',
+        }" />
+      </div>
+      
+      <div class="action-buttons" style="margin-top: 24px; text-align: center;">
+        <a-button 
+          type="primary" 
+          size="large"
+          :loading="finalizando"
+          @click="finalizarExamen"
+          :disabled="!todasRespondidas"
+        >
+          {{ todasRespondidas ? 'Finalizar Examen' : `Responda todas las preguntas (${preguntasTransformadas.length - preguntasRespondidas} pendientes)` }}
+        </a-button>
+        
+        <a-button 
+          type="default" 
+          size="large"
+          style="margin-left: 12px;"
+          @click="guardarYSalir"
+        >
+          Guardar y salir
+        </a-button>
+      </div>
+    </a-card>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useExamenStore } from '../../store/examen.store'
+import { message, Modal } from 'ant-design-vue'
+
+const route = useRoute()
+const router = useRouter()
+const examenStore = useExamenStore()
+
+const finalizando = ref(false)
+const debugMode = ref(false) // Cambiar a true para depuración
+const timerValue = ref(null)
+
+// Computed properties
+const examenInfo = computed(() => {
+  if (!examenStore.examenActual) {
+    return {
+      proceso: null,
+      area: null,
+      duracion: 60,
+      intentos: 0,
+      intentos_maximos: 3
+    }
+  }
+
+  return {
+    proceso: examenStore.examenActual?.proceso || 'Proceso no disponible',
+    area: examenStore.examenActual?.area || 'Área no disponible',
+    duracion: examenStore.examenActual?.duracion || 60,
+    intentos: examenStore.examenActual?.intentos || 0,
+    intentos_maximos: examenStore.examenActual?.intentos_maximos || 3
+  }
+})
+
+// Transformar preguntas - CORREGIDO para manejar keys numéricas
+const preguntasTransformadas = computed(() => {
+  if (!examenStore.preguntas || !Array.isArray(examenStore.preguntas)) {
+    return []
+  }
+
+  return examenStore.preguntas.map(pregunta => {
+    // Encontrar la key correcta para la respuesta
+    let respuestaKey = null
+    if (pregunta.opciones && pregunta.respuesta) {
+      const opcionCorrecta = pregunta.opciones.find(op => 
+        op.texto === pregunta.respuesta || 
+        op.key.toString() === pregunta.respuesta.toString()
+      )
+      respuestaKey = opcionCorrecta ? opcionCorrecta.key : null
+    }
+
+    // Ordenar opciones por key
+    const opcionesOrdenadas = pregunta.opciones ? 
+      [...pregunta.opciones].sort((a, b) => a.key - b.key) : 
+      []
+
+    return {
+      ...pregunta,
+      respuestaKey, // Guardar la key de la respuesta correcta
+      opcionesOrdenadas,
+      // Agregar propiedades reactivas
+      respuestaSeleccionada: null,
+      respuestaTexto: '',
+      // El estado real viene del backend: 'pendiente' o 'respondida'
+    }
+  })
+})
+
+// Helper para convertir key numérico a letra
+const getLetraOpcion = (key) => {
+  const letras = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']
+  return letras[key] || `Opción ${key}`
+}
+
+// Obtener texto de opción seleccionada
+const getTextoOpcionSeleccionada = (pregunta) => {
+  if (!pregunta.respuestaSeleccionada) return ''
+  const opcion = pregunta.opcionesOrdenadas.find(
+    op => op.key.toString() === pregunta.respuestaSeleccionada.toString()
+  )
+  return opcion ? opcion.texto : 'Opción no encontrada'
+}
+
+const preguntasRespondidas = computed(() => {
+  return preguntasTransformadas.value.filter(p => 
+    p.estado === 'respondida' || p.respuestaSeleccionada || p.respuestaTexto
+  ).length
+})
+
+const porcentajeCompletado = computed(() => {
+  if (preguntasTransformadas.length === 0) return 0
+  return Math.round((preguntasRespondidas.value / preguntasTransformadas.value.length) * 100)
+})
+
+const todasRespondidas = computed(() => {
+  return preguntasTransformadas.value.every(p => 
+    p.estado === 'respondida' || p.respuestaSeleccionada || p.respuestaTexto
+  )
+})
+
+// Métodos
+const responderPregunta = async (pregunta) => {
+  if (!pregunta.respuestaSeleccionada) return
+  
+  try {
+    // Asegurarse de que enviamos string (no número)
+    const respuestaString = pregunta.respuestaSeleccionada.toString()
+    
+    // Encontrar el texto completo de la opción seleccionada
+    const opcionSeleccionada = pregunta.opcionesOrdenadas.find(
+      op => op.key.toString() === respuestaString
+    )
+    
+    // Enviar el TEXTO de la opción, no la key
+    const textoRespuesta = opcionSeleccionada ? opcionSeleccionada.texto : respuestaString
+    
+    const result = await examenStore.responderPregunta(
+      pregunta.id, // ID de PreguntaAsignada
+      textoRespuesta // Enviar el texto, no la key
+    )
+    
+    if (result.success) {
+      // Actualizar estado local
+      pregunta.estado = 'respondida'
+      message.success('Respuesta guardada correctamente')
+      
+      // Verificar si es correcta
+      if (result.correcta) {
+        message.info('¡Respuesta correcta!')
+      } else {
+        message.warning('Respuesta incorrecta')
+      }
+    } else {
+      message.error(result.message || 'Error al guardar respuesta')
+      // Revertir selección si falla
+      pregunta.respuestaSeleccionada = null
+    }
+  } catch (error) {
+    message.error('Error al guardar respuesta')
+    console.error('Error:', error)
+    pregunta.respuestaSeleccionada = null
+  }
+}
+
+const responderPreguntaTexto = async (pregunta) => {
+  if (!pregunta.respuestaTexto.trim()) return
+  
+  try {
+    const result = await examenStore.responderPregunta(
+      pregunta.id,
+      pregunta.respuestaTexto
+    )
+    
+    if (result.success) {
+      pregunta.estado = 'respondida'
+      message.success('Respuesta guardada')
+    } else {
+      message.error(result.message || 'Error al guardar respuesta')
+    }
+  } catch (error) {
+    message.error('Error al guardar respuesta')
+    console.error(error)
+  }
+}
+
+const finalizarExamen = async () => {
+  if (!todasRespondidas.value) {
+    message.warning(`Por favor responda todas las preguntas. ${preguntasTransformadas.value.length - preguntasRespondidas.value} pendientes.`)
+    return
+  }
+
+  Modal.confirm({
+    title: '¿Está seguro de finalizar el examen?',
+    content: 'Una vez finalizado no podrá modificar sus respuestas.',
+    okText: 'Sí, finalizar',
+    cancelText: 'Cancelar',
+    onOk: async () => {
+      try {
+        finalizando.value = true
+        const result = await examenStore.finalizarExamen(route.params.examenId)
+        
+        if (result.success) {
+          message.success('Examen finalizado correctamente')
+          router.push({ 
+            name: 'panel-resultados', 
+            params: { examenId: route.params.examenId } 
+          })
+        } else {
+          message.error(result.message || 'Error al finalizar examen')
+        }
+      } catch (error) {
+        message.error('Error al finalizar examen')
+        console.error(error)
+      } finally {
+        finalizando.value = false
+      }
+    }
+  })
+}
+
+const guardarYSalir = async () => {
+  // Primero guardar todas las respuestas pendientes
+  const preguntasPendientes = preguntasTransformadas.value.filter(p => 
+    (p.respuestaSeleccionada || p.respuestaTexto) && p.estado !== 'respondida'
+  )
+  
+  if (preguntasPendientes.length > 0) {
+    Modal.confirm({
+      title: 'Guardar respuestas pendientes',
+      content: `Tiene ${preguntasPendientes.length} respuesta(s) pendientes de guardar. ¿Desea guardarlas antes de salir?`,
+      okText: 'Guardar y salir',
+      cancelText: 'Salir sin guardar',
+      onOk: async () => {
+        try {
+          // Guardar cada respuesta pendiente
+          for (const pregunta of preguntasPendientes) {
+            if (pregunta.respuestaSeleccionada) {
+              await responderPregunta(pregunta)
+            } else if (pregunta.respuestaTexto) {
+              await responderPreguntaTexto(pregunta)
+            }
+          }
+          message.success('Respuestas guardadas')
+          router.push({ name: 'DashboardPostulante' })
+        } catch (error) {
+          message.error('Error al guardar respuestas')
+        }
+      },
+      onCancel: () => {
+        router.push({ name: 'DashboardPostulante' })
+      }
+    })
+  } else {
+    router.push({ name: 'DashboardPostulante' })
+  }
+}
+
+const finalizarExamenAutomaticamente = () => {
+  message.warning('Tiempo agotado. El examen se finalizará automáticamente.')
+  finalizarExamen()
+}
+
+const calcularTiempoRestante = () => {
+  if (examenStore.examenActual?.hora_inicio && examenInfo.value.duracion) {
+    const horaInicio = new Date(examenStore.examenActual.hora_inicio)
+    const duracionMs = examenInfo.value.duracion * 60 * 1000
+    const tiempoFinal = horaInicio.getTime() + duracionMs
+    timerValue.value = tiempoFinal
+    
+    // Verificar si ya se agotó el tiempo
+    if (Date.now() > tiempoFinal) {
+      finalizarExamenAutomaticamente()
+    }
+  } else {
+    // Si no hay hora_inicio, usar duración por defecto desde ahora
+    timerValue.value = Date.now() + (examenInfo.value.duracion * 60 * 1000)
+  }
+}
+
+// Lifecycle
+onMounted(async () => {
+  console.log('=== DATOS DEL EXAMEN ===')
+
+  try {
+    await examenStore.iniciarExamen(route.params.examenId)
+    // ahora las preguntas deberían estar disponibles
+    if (!examenStore.preguntas || examenStore.preguntas.length === 0) {
+      message.error('No se encontraron preguntas para este examen')
+      router.push({ name: 'DashboardPostulante' })
+      return
+    }
+
+    calcularTiempoRestante()
+    setInterval(calcularTiempoRestante, 30000)
+  } catch (err) {
+    console.error(err)
+    message.error('Error al cargar el examen')
+    router.push({ name: 'DashboardPostulante' })
+  }
+})
+
+</script>
+
+<style scoped>
+/* Estilos mejorados */
+.examen-panel {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.examen-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 20px;
+  margin-bottom: 20px;
+  padding: 16px;
+  background: #f0f9ff;
+  border-radius: 8px;
+  border: 1px solid #d6e4ff;
+}
+
+.header-info h2 {
+  margin: 0 0 8px 0;
+  color: #1890ff;
+  font-size: 20px;
+}
+
+.header-info p {
+  margin: 4px 0;
+  color: #595959;
+}
+
+.timer {
+  text-align: right;
+  min-width: 180px;
+}
+
+.timer :deep(.ant-statistic-content) {
+  font-size: 28px;
+  font-weight: bold;
+  color: #fa541c;
+}
+
+.pregunta-card {
+  margin-bottom: 24px;
+  border: 1px solid #e8e8e8;
+  border-radius: 8px;
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
+  transition: box-shadow 0.3s;
+}
+
+.pregunta-card:hover {
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
+}
+
+.pregunta-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.pregunta-numero {
+  font-weight: bold;
+  font-size: 18px;
+  color: #1890ff;
+}
+
+.curso-tag {
+  flex-grow: 1;
+  margin-left: 12px;
+}
+
+.enunciado {
+  font-size: 16px;
+  line-height: 1.7;
+  margin: 20px 0;
+  padding: 20px;
+  background: #fafafa;
+  border-radius: 8px;
+  border-left: 4px solid #1890ff;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+.enunciado :deep(math) {
+  font-size: 1.1em;
+}
+
+.extra {
+  font-size: 14px;
+  line-height: 1.6;
+  margin: 16px 0;
+  padding: 16px;
+  background: #fff7e6;
+  border-radius: 6px;
+  border: 1px solid #ffd591;
+  color: #d46b08;
+}
+
+.opciones {
+  margin-top: 24px;
+}
+
+.opcion-radio {
+  display: flex;
+  align-items: center;
+  padding: 16px 20px;
+  margin: 10px 0;
+  border: 2px solid #d9d9d9;
+  border-radius: 8px;
+  transition: all 0.3s;
+  min-height: 60px;
+  cursor: pointer;
+}
+
+.opcion-radio:hover {
+  border-color: #40a9ff;
+  background: #f0f9ff;
+  transform: translateY(-2px);
+}
+
+.opcion-radio:deep(.ant-radio) {
+  margin-right: 12px;
+}
+
+.opcion-key {
+  font-weight: bold;
+  color: #1890ff;
+  margin-right: 12px;
+  min-width: 24px;
+  font-size: 16px;
+}
+
+.opcion-texto {
+  flex: 1;
+  line-height: 1.6;
+  font-size: 15px;
+}
+
+.seleccion-actual {
+  margin-top: 16px;
+}
+
+.debug-info {
+  margin-top: 16px;
+}
+
+.pregunta-abierta textarea {
+  margin-top: 16px;
+  font-size: 15px;
+  line-height: 1.6;
+}
+
+.resumen-examen {
+  padding: 16px;
+}
+
+.resumen-examen h3 {
+  margin-bottom: 16px;
+  color: #1890ff;
+}
+
+.resumen-examen p {
+  margin: 8px 0;
+  color: #595959;
+}
+
+.action-buttons {
+  padding: 24px 0;
+  border-top: 1px solid #f0f0f0;
+  margin-top: 32px;
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+}
+
+:deep(.ant-card-head) {
+  border-bottom: 1px solid #f0f0f0;
+  background: #fafafa;
+}
+
+:deep(.ant-card-body) {
+  padding: 24px;
+}
+
+/* Estilos para matemáticas */
+.enunciado :deep(.katex) {
+  font-size: 1.1em;
+}
+
+.extra :deep(.katex) {
+  font-size: 1em;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .examen-panel {
+    padding: 10px;
+  }
+  
+  .examen-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  
+  .timer {
+    text-align: left;
+    margin-top: 16px;
+  }
+  
+  .pregunta-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+  
+  .curso-tag {
+    margin-left: 0;
+  }
+  
+  .enunciado {
+    padding: 16px;
+    font-size: 15px;
+  }
+  
+  .opcion-radio {
+    padding: 12px 16px;
+  }
+  
+  .action-buttons {
+    flex-direction: column;
+    gap: 16px;
+  }
+  
+  .action-buttons button {
+    width: 100%;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/front/src/views/postulante/Resultados.vue b/front/src/views/postulante/Resultados.vue
new file mode 100644
index 0000000..4198c3e
--- /dev/null
+++ b/front/src/views/postulante/Resultados.vue
@@ -0,0 +1,827 @@
+<template>
+  <div class="resultados-container">
+    <!-- Header de resultados -->
+    <a-card class="resultados-header">
+      <a-result
+        :status="resultadoStatus"
+        :title="resultadoTitulo"
+        :sub-title="resultadoSubtitulo"
+      >
+        <template #extra>
+          <a-space size="large">
+            <a-button type="primary" @click="verDetalles">
+              <eye-outlined />
+              Ver detalles del examen
+            </a-button>
+            <a-button @click="volverADashboard">
+              <home-outlined />
+              Volver al inicio
+            </a-button>
+          </a-space>
+        </template>
+      </a-result>
+    </a-card>
+
+    <!-- Estadísticas principales -->
+    <div class="stats-grid">
+      <a-card class="stat-card">
+        <div class="stat-content">
+          <check-circle-outlined class="stat-icon" style="color: #52c41a;" />
+          <div class="stat-info">
+            <div class="stat-value">{{ examenStore.progreso.correctas }}</div>
+            <div class="stat-label">Respuestas correctas</div>
+          </div>
+        </div>
+      </a-card>
+
+      <a-card class="stat-card">
+        <div class="stat-content">
+          <close-circle-outlined class="stat-icon" style="color: #f5222d;" />
+          <div class="stat-info">
+            <div class="stat-value">{{ respuestasIncorrectas }}</div>
+            <div class="stat-label">Respuestas incorrectas</div>
+          </div>
+        </div>
+      </a-card>
+
+      <a-card class="stat-card">
+        <div class="stat-content">
+          <star-outlined class="stat-icon" style="color: #faad14;" />
+          <div class="stat-info">
+            <div class="stat-value">{{ examenStore.progreso.puntaje_total }}</div>
+            <div class="stat-label">Puntaje total</div>
+          </div>
+        </div>
+      </a-card>
+
+      <a-card class="stat-card">
+        <div class="stat-content">
+          <percentage-outlined class="stat-icon" style="color: #1890ff;" />
+          <div class="stat-info">
+            <div class="stat-value">{{ porcentajeCorrectas }}%</div>
+            <div class="stat-label">Porcentaje de acierto</div>
+          </div>
+        </div>
+      </a-card>
+    </div>
+
+    <!-- Progreso por áreas/temas -->
+    <a-card class="progreso-card" title="Progreso por área">
+      <a-progress
+        :percent="porcentajeCorrectas"
+        :stroke-color="{
+          '0%': '#f5222d',
+          '100%': '#52c41a',
+        }"
+        :show-info="false"
+      />
+      <div class="progreso-labels">
+        <span>0%</span>
+        <span>50%</span>
+        <span>100%</span>
+      </div>
+      
+      <div class="estado-final">
+        <a-tag :color="getEstadoColor()" size="large">
+          {{ getEstadoTexto() }}
+        </a-tag>
+        <span class="recomendacion">
+          {{ recomendacionTexto }}
+        </span>
+      </div>
+    </a-card>
+
+    <!-- Detalle de preguntas -->
+    <a-card class="preguntas-detalle-card" title="Detalle de respuestas">
+      <a-collapse v-model:activeKey="activeKeys" accordion>
+        <a-collapse-panel 
+          v-for="pregunta in examenStore.preguntas" 
+          :key="pregunta.id"
+          :header="`Pregunta ${pregunta.orden}: ${getResumenPregunta(pregunta)}`"
+        >
+          <!-- Enunciado -->
+          <div class="pregunta-enunciado">
+            <h4>Enunciado:</h4>
+            <div v-html="formatearEnunciado(pregunta.enunciado || '')"></div>
+            
+            <!-- Imágenes -->
+            <div v-if="pregunta.imagenes && pregunta.imagenes.length > 0" class="pregunta-images">
+              <a-image
+                v-for="(imagen, idx) in pregunta.imagenes"
+                :key="idx"
+                :src="imagen.url"
+                :alt="`Imagen ${idx + 1}`"
+                class="detalle-image"
+                :preview="true"
+              />
+            </div>
+          </div>
+
+          <!-- Opciones -->
+          <div class="pregunta-opciones">
+            <h4>Opciones:</h4>
+            <div
+              v-for="opcion in pregunta.opciones || []"
+              :key="opcion.key"
+              class="opcion-detalle"
+              :class="{
+                'correcta': esOpcionCorrecta(pregunta, opcion.key),
+                'seleccionada': pregunta.respuesta_usuario == opcion.key,
+                'incorrecta-seleccionada': pregunta.respuesta_usuario == opcion.key && !esOpcionCorrecta(pregunta, opcion.key)
+              }"
+            >
+              <div class="opcion-detalle-content">
+                <div class="opcion-detalle-letra">
+                  {{ obtenerLetraOpcion(opcion.key) }}
+                  <span v-if="esOpcionCorrecta(pregunta, opcion.key)" class="correct-badge">
+                    ✓
+                  </span>
+                  <span v-if="pregunta.respuesta_usuario == opcion.key && !esOpcionCorrecta(pregunta, opcion.key)" 
+                        class="incorrect-badge">
+                    ✗
+                  </span>
+                </div>
+                <div class="opcion-detalle-texto">
+                  {{ opcion.texto }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Resultado de la pregunta -->
+          <div class="pregunta-resultado">
+            <a-alert
+              :type="pregunta.es_correcta ? 'success' : 'error'"
+              :message="pregunta.es_correcta ? '¡Respuesta correcta!' : 'Respuesta incorrecta'"
+              :description="getDescripcionResultado(pregunta)"
+              show-icon
+            />
+          </div>
+
+          <!-- Explicación (si existe) -->
+          <div v-if="pregunta.explicacion" class="pregunta-explicacion">
+            <h4>Explicación:</h4>
+            <p>{{ pregunta.explicacion }}</p>
+          </div>
+        </a-collapse-panel>
+      </a-collapse>
+    </a-card>
+
+    <!-- Recomendaciones -->
+    <a-card class="recomendaciones-card" title="Recomendaciones">
+      <a-list :data-source="recomendaciones" bordered>
+        <template #renderItem="{ item, index }">
+          <a-list-item>
+            <a-list-item-meta>
+              <template #title>
+                <a-tag :color="item.tipo === 'fortaleza' ? 'green' : 'orange'">
+                  {{ item.tipo === 'fortaleza' ? 'Fortaleza' : 'Área a mejorar' }}
+                </a-tag>
+                {{ item.titulo }}
+              </template>
+              <template #description>
+                {{ item.descripcion }}
+              </template>
+            </a-list-item-meta>
+            <div v-if="item.accion">
+              <a-button type="link" size="small">
+                {{ item.accion }}
+              </a-button>
+            </div>
+          </a-list-item>
+        </template>
+      </a-list>
+    </a-card>
+
+    <!-- Acciones finales -->
+    <a-card class="acciones-card">
+      <div class="acciones-content">
+        <a-space size="large">
+          <a-button type="primary" size="large" @click="crearNuevoExamen">
+            <plus-outlined />
+            Realizar nuevo examen
+          </a-button>
+          
+          <a-button size="large" @click="imprimirResultados">
+            <printer-outlined />
+            Imprimir resultados
+          </a-button>
+          
+          <a-button size="large" @click="compartirResultados">
+            <share-alt-outlined />
+            Compartir resultados
+          </a-button>
+        </a-space>
+      </div>
+    </a-card>
+
+    <!-- Modal para ver detalles completos -->
+    <a-modal
+      v-model:open="modalDetallesVisible"
+      title="Detalles completos del examen"
+      width="800px"
+      :footer="null"
+    >
+      <div class="detalles-completos">
+        <div class="detalle-item">
+          <strong>Proceso:</strong> {{ examenStore.examenActual?.proceso?.nombre || 'No especificado' }}
+        </div>
+        <div class="detalle-item">
+          <strong>Área:</strong> {{ examenStore.examenActual?.area?.nombre || 'No especificado' }}
+        </div>
+        <div class="detalle-item">
+          <strong>Fecha de inicio:</strong> {{ formatFecha(examenStore.examenActual?.hora_inicio) }}
+        </div>
+        <div class="detalle-item">
+          <strong>Duración:</strong> {{ calcularDuracion() }}
+        </div>
+        <div class="detalle-item">
+          <strong>Intentos:</strong> {{ examenStore.intentos }}
+        </div>
+        <div class="detalle-item">
+          <strong>Estado:</strong>
+          <a-tag :color="getEstadoColor()">
+            {{ getEstadoTexto() }}
+          </a-tag>
+        </div>
+        
+        <a-divider />
+        
+        <h3>Resumen estadístico</h3>
+        <div class="estadisticas-detalle">
+          <a-row :gutter="16">
+            <a-col :span="6" v-for="stat in estadisticasDetalle" :key="stat.label">
+              <div class="estadistica-item">
+                <div class="estadistica-valor">{{ stat.value }}</div>
+                <div class="estadistica-label">{{ stat.label }}</div>
+              </div>
+            </a-col>
+          </a-row>
+        </div>
+      </div>
+    </a-modal>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useExamenStore } from '../store/examen.store'
+import { message } from 'ant-design-vue'
+import {
+  CheckCircleOutlined,
+  CloseCircleOutlined,
+  StarOutlined,
+  PercentageOutlined,
+  EyeOutlined,
+  HomeOutlined,
+  PlusOutlined,
+  PrinterOutlined,
+  ShareAltOutlined,
+  TrophyOutlined,
+  BulbOutlined
+} from '@ant-design/icons-vue'
+
+const router = useRouter()
+const examenStore = useExamenStore()
+
+// Estados reactivos
+const activeKeys = ref([])
+const modalDetallesVisible = ref(false)
+
+// Computed properties
+const respuestasIncorrectas = computed(() => {
+  return examenStore.progreso.respondidas - examenStore.progreso.correctas
+})
+
+const porcentajeCorrectas = computed(() => {
+  if (examenStore.progreso.total === 0) return 0
+  return Math.round((examenStore.progreso.correctas / examenStore.progreso.total) * 100)
+})
+
+const resultadoStatus = computed(() => {
+  if (porcentajeCorrectas.value >= 80) return 'success'
+  if (porcentajeCorrectas.value >= 60) return 'warning'
+  return 'error'
+})
+
+const resultadoTitulo = computed(() => {
+  if (porcentajeCorrectas.value >= 80) return '¡Excelente resultado!'
+  if (porcentajeCorrectas.value >= 60) return 'Buen trabajo'
+  return 'Necesitas practicar más'
+})
+
+const resultadoSubtitulo = computed(() => {
+  return `Obtuviste ${examenStore.progreso.correctas} de ${examenStore.progreso.total} respuestas correctas (${porcentajeCorrectas.value}%)`
+})
+
+const recomendacionTexto = computed(() => {
+  if (porcentajeCorrectas.value >= 80) {
+    return 'Tu nivel es excelente. Sigue manteniendo el buen trabajo.'
+  } else if (porcentajeCorrectas.value >= 60) {
+    return 'Tienes un buen nivel, pero hay áreas que puedes mejorar.'
+  } else {
+    return 'Recomendamos repasar los temas antes de intentar nuevamente.'
+  }
+})
+
+const recomendaciones = computed(() => {
+  const recomendacionesList = []
+  
+  if (porcentajeCorrectas.value >= 80) {
+    recomendacionesList.push({
+      tipo: 'fortaleza',
+      titulo: 'Excelente comprensión',
+      descripcion: 'Demuestras un dominio sólido de los temas evaluados.',
+      accion: 'Ver temas avanzados'
+    })
+  } else if (porcentajeCorrectas.value >= 60) {
+    recomendacionesList.push({
+      tipo: 'fortaleza',
+      titulo: 'Bases sólidas',
+      descripcion: 'Tienes buenos fundamentos en la mayoría de temas.',
+      accion: 'Profundizar conocimientos'
+    })
+    recomendacionesList.push({
+      tipo: 'mejora',
+      titulo: 'Áreas específicas',
+      descripcion: 'Algunos temas requieren más atención.',
+      accion: 'Repasar temas'
+    })
+  } else {
+    recomendacionesList.push({
+      tipo: 'mejora',
+      titulo: 'Revisión general',
+      descripcion: 'Recomendamos repasar todos los temas del área.',
+      accion: 'Iniciar repaso'
+    })
+  }
+  
+  // Recomendaciones basadas en respuestas incorrectas
+  if (respuestasIncorrectas.value > examenStore.progreso.total / 2) {
+    recomendacionesList.push({
+      tipo: 'mejora',
+      titulo: 'Tiempo de estudio',
+      descripcion: 'Dedica más tiempo al estudio antes de evaluarte nuevamente.',
+      accion: 'Programar estudio'
+    })
+  }
+  
+  return recomendacionesList
+})
+
+const estadisticasDetalle = computed(() => [
+  { label: 'Total preguntas', value: examenStore.progreso.total },
+  { label: 'Respondidas', value: examenStore.progreso.respondidas },
+  { label: 'Correctas', value: examenStore.progreso.correctas },
+  { label: 'Incorrectas', value: respuestasIncorrectas.value },
+  { label: 'Puntaje máximo', value: examenStore.progreso.total * 10 }, // Asumiendo 10 puntos por pregunta
+  { label: 'Puntaje obtenido', value: examenStore.progreso.puntaje_total },
+  { label: 'Porcentaje', value: `${porcentajeCorrectas.value}%` },
+  { label: 'Tasa de acierto', value: `${Math.round((examenStore.progreso.correctas / examenStore.progreso.respondidas) * 100) || 0}%` }
+])
+
+// Funciones de utilidad
+const formatearEnunciado = (enunciado) => {
+  if (!enunciado) return ''
+  return enunciado.replace(/\n/g, '<br>')
+}
+
+const obtenerLetraOpcion = (key) => {
+  const letras = ['A', 'B', 'C', 'D', 'E', 'F']
+  return letras[key] || `Opción ${key + 1}`
+}
+
+const getResumenPregunta = (pregunta) => {
+  const estado = pregunta.es_correcta ? '✓ Correcta' : '✗ Incorrecta'
+  return `${estado} - Puntaje: ${pregunta.puntaje_obtenido || 0}`
+}
+
+const esOpcionCorrecta = (pregunta, opcionKey) => {
+  // En un sistema real, esto vendría del backend
+  // Por ahora, asumimos que la primera opción es correcta (para demo)
+  return opcionKey == 0
+}
+
+const getDescripcionResultado = (pregunta) => {
+  if (pregunta.es_correcta) {
+    return `Obtuviste ${pregunta.puntaje_obtenido || 0} puntos por esta respuesta correcta.`
+  } else {
+    return `Tu respuesta fue: ${obtenerLetraOpcion(parseInt(pregunta.respuesta_usuario))}. La respuesta correcta era: ${obtenerLetraOpcion(0)}.`
+  }
+}
+
+const formatFecha = (fecha) => {
+  if (!fecha) return 'No disponible'
+  const date = new Date(fecha)
+  return date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+}
+
+const calcularDuracion = () => {
+  if (!examenStore.examenActual?.hora_inicio) return 'No disponible'
+  
+  const inicio = new Date(examenStore.examenActual.hora_inicio)
+  const fin = new Date() // Asumimos que terminó ahora
+  const duracionMs = fin - inicio
+  
+  const minutos = Math.floor(duracionMs / (1000 * 60))
+  const segundos = Math.floor((duracionMs % (1000 * 60)) / 1000)
+  
+  return `${minutos} min ${segundos} seg`
+}
+
+const getEstadoColor = () => {
+  if (porcentajeCorrectas.value >= 80) return 'green'
+  if (porcentajeCorrectas.value >= 60) return 'blue'
+  return 'red'
+}
+
+const getEstadoTexto = () => {
+  if (porcentajeCorrectas.value >= 80) return 'Excelente'
+  if (porcentajeCorrectas.value >= 60) return 'Aprobado'
+  return 'Reprobado'
+}
+
+// Funciones de acciones
+const verDetalles = () => {
+  modalDetallesVisible.value = true
+}
+
+const volverADashboard = () => {
+  router.push('/dashboard')
+}
+
+const crearNuevoExamen = () => {
+  // Resetear el examen actual y volver al dashboard
+  examenStore.resetExamen()
+  examenStore.resetConfiguracion()
+  router.push('/dashboard')
+}
+
+const imprimirResultados = () => {
+  window.print()
+}
+
+const compartirResultados = () => {
+  const resultados = `Mis resultados del examen: ${porcentajeCorrectas.value}% de acierto (${examenStore.progreso.correctas}/${examenStore.progreso.total})`
+  
+  if (navigator.share) {
+    navigator.share({
+      title: 'Resultados de mi examen',
+      text: resultados,
+      url: window.location.href
+    })
+  } else {
+    // Fallback: copiar al portapapeles
+    navigator.clipboard.writeText(resultados)
+      .then(() => {
+        message.success('Resultados copiados al portapapeles')
+      })
+      .catch(() => {
+        message.info(resultados)
+      })
+  }
+}
+
+// Inicialización
+onMounted(() => {
+  // Verificar que tenemos resultados
+  if (!examenStore.tieneExamenActual || !examenStore.tienePreguntasGeneradas) {
+    message.warning('No hay resultados de examen disponibles')
+    router.push('/dashboard')
+    return
+  }
+  
+  // Expandir la primera pregunta por defecto
+  if (examenStore.preguntas.length > 0) {
+    activeKeys.value = [examenStore.preguntas[0].id]
+  }
+})
+</script>
+
+<style scoped>
+.resultados-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 16px;
+}
+
+.resultados-header {
+  margin-bottom: 24px;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.stat-card {
+  transition: all 0.3s;
+}
+
+.stat-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.stat-content {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.stat-icon {
+  font-size: 32px;
+}
+
+.stat-info {
+  flex: 1;
+}
+
+.stat-value {
+  font-size: 28px;
+  font-weight: bold;
+  color: #333;
+  line-height: 1;
+}
+
+.stat-label {
+  font-size: 14px;
+  color: #666;
+  margin-top: 4px;
+}
+
+.progreso-card {
+  margin-bottom: 24px;
+}
+
+.progreso-labels {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 8px;
+  font-size: 12px;
+  color: #666;
+}
+
+.estado-final {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid #f0f0f0;
+}
+
+.recomendacion {
+  font-style: italic;
+  color: #666;
+  max-width: 400px;
+}
+
+.preguntas-detalle-card {
+  margin-bottom: 24px;
+}
+
+.pregunta-enunciado {
+  margin-bottom: 20px;
+  padding: 16px;
+  background: #fafafa;
+  border-radius: 4px;
+}
+
+.pregunta-enunciado h4 {
+  margin-bottom: 8px;
+  color: #333;
+}
+
+.pregunta-images {
+  margin-top: 16px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.detalle-image {
+  max-width: 200px;
+  border-radius: 4px;
+  border: 1px solid #f0f0f0;
+}
+
+.pregunta-opciones {
+  margin-bottom: 20px;
+}
+
+.pregunta-opciones h4 {
+  margin-bottom: 12px;
+  color: #333;
+}
+
+.opcion-detalle {
+  padding: 12px;
+  margin-bottom: 8px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  transition: all 0.3s;
+}
+
+.opcion-detalle.correcta {
+  border-color: #52c41a;
+  background-color: #f6ffed;
+}
+
+.opcion-detalle.seleccionada {
+  border-color: #1890ff;
+  background-color: #e6f7ff;
+}
+
+.opcion-detalle.incorrecta-seleccionada {
+  border-color: #f5222d;
+  background-color: #fff1f0;
+}
+
+.opcion-detalle-content {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.opcion-detalle-letra {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f0f0f0;
+  border-radius: 50%;
+  font-weight: bold;
+  font-size: 12px;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.opcion-detalle.correcta .opcion-detalle-letra {
+  background-color: #52c41a;
+  color: white;
+}
+
+.opcion-detalle.seleccionada .opcion-detalle-letra {
+  background-color: #1890ff;
+  color: white;
+}
+
+.opcion-detalle.incorrecta-seleccionada .opcion-detalle-letra {
+  background-color: #f5222d;
+  color: white;
+}
+
+.correct-badge, .incorrect-badge {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  font-size: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.correct-badge {
+  background-color: #52c41a;
+  color: white;
+}
+
+.incorrect-badge {
+  background-color: #f5222d;
+  color: white;
+}
+
+.opcion-detalle-texto {
+  flex: 1;
+  line-height: 1.4;
+}
+
+.pregunta-resultado {
+  margin-bottom: 16px;
+}
+
+.pregunta-explicacion {
+  padding: 16px;
+  background: #f6ffed;
+  border-radius: 4px;
+  border-left: 3px solid #52c41a;
+}
+
+.pregunta-explicacion h4 {
+  margin-bottom: 8px;
+  color: #333;
+}
+
+.recomendaciones-card {
+  margin-bottom: 24px;
+}
+
+.acciones-card {
+  margin-bottom: 24px;
+}
+
+.acciones-content {
+  display: flex;
+  justify-content: center;
+}
+
+.detalles-completos {
+  padding: 8px;
+}
+
+.detalle-item {
+  margin-bottom: 12px;
+  padding: 8px 0;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.detalle-item:last-child {
+  border-bottom: none;
+}
+
+.estadisticas-detalle {
+  margin-top: 20px;
+}
+
+.estadistica-item {
+  text-align: center;
+  padding: 16px;
+  background: #fafafa;
+  border-radius: 4px;
+  margin-bottom: 16px;
+}
+
+.estadistica-valor {
+  font-size: 24px;
+  font-weight: bold;
+  color: #1890ff;
+  margin-bottom: 4px;
+}
+
+.estadistica-label {
+  font-size: 12px;
+  color: #666;
+  text-transform: uppercase;
+}
+
+/* Estilos para impresión */
+@media print {
+  .resultados-container {
+    padding: 0;
+  }
+  
+  .acciones-card,
+  .ant-space,
+  .ant-btn,
+  .ant-collapse-arrow {
+    display: none !important;
+  }
+  
+  .ant-collapse-content {
+    display: block !important;
+    height: auto !important;
+  }
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .estado-final {
+    flex-direction: column;
+    gap: 12px;
+    align-items: flex-start;
+  }
+  
+  .acciones-content .ant-space {
+    flex-direction: column;
+    width: 100%;
+  }
+  
+  .acciones-content .ant-btn {
+    width: 100%;
+    margin-bottom: 8px;
+  }
+}
+
+@media (max-width: 480px) {
+  .stats-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .stat-content {
+    justify-content: center;
+    text-align: center;
+  }
+}
+</style>
\ No newline at end of file