diff --git a/back/app/Http/Controllers/Administracion/CalificacionController.php b/back/app/Http/Controllers/Administracion/CalificacionController.php
new file mode 100644
index 0000000..5b4d2bd
--- /dev/null
+++ b/back/app/Http/Controllers/Administracion/CalificacionController.php
@@ -0,0 +1,109 @@
+<?php
+
+namespace App\Http\Controllers\Administracion;
+
+use App\Http\Controllers\Controller;
+use App\Models\Calificacion;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Validator;
+
+class CalificacionController extends Controller
+{
+    // ✅ Listar todas
+    public function index()
+    {
+        $calificaciones = Calificacion::all();
+
+        return response()->json([
+            'success' => true,
+            'data' => $calificaciones
+        ]);
+    }
+
+    // ✅ Guardar nueva
+    public function store(Request $request)
+    {
+        $request->validate([
+            'nombre' => 'required|string|max:255',
+            'puntos_correcta' => 'required|numeric',
+            'puntos_incorrecta' => 'required|numeric',
+            'puntos_nula' => 'required|numeric',
+            'puntaje_maximo' => 'required|numeric',
+        ]);
+
+        $calificacion = Calificacion::create($request->all());
+
+        return response()->json([
+            'success' => true,
+            'message' => 'Calificación creada correctamente',
+            'data' => $calificacion
+        ]);
+    }
+
+    // ✅ Mostrar una
+    public function show($id)
+    {
+        $calificacion = Calificacion::find($id);
+
+        if (!$calificacion) {
+            return response()->json([
+                'success' => false,
+                'message' => 'No encontrada'
+            ], 404);
+        }
+
+        return response()->json([
+            'success' => true,
+            'data' => $calificacion
+        ]);
+    }
+
+    // ✅ Actualizar
+    public function update(Request $request, $id)
+    {
+        $calificacion = Calificacion::find($id);
+
+        if (!$calificacion) {
+            return response()->json([
+                'success' => false,
+                'message' => 'No encontrada'
+            ], 404);
+        }
+
+        $request->validate([
+            'nombre' => 'required|string|max:255',
+            'puntos_correcta' => 'required|numeric',
+            'puntos_incorrecta' => 'required|numeric',
+            'puntos_nula' => 'required|numeric',
+            'puntaje_maximo' => 'required|numeric',
+        ]);
+
+        $calificacion->update($request->all());
+
+        return response()->json([
+            'success' => true,
+            'message' => 'Calificación actualizada correctamente',
+            'data' => $calificacion
+        ]);
+    }
+
+    // ✅ Eliminar
+    public function destroy($id)
+    {
+        $calificacion = Calificacion::find($id);
+
+        if (!$calificacion) {
+            return response()->json([
+                'success' => false,
+                'message' => 'No encontrada'
+            ], 404);
+        }
+
+        $calificacion->delete();
+
+        return response()->json([
+            'success' => true,
+            'message' => 'Calificación eliminada correctamente'
+        ]);
+    }
+}
\ No newline at end of file
diff --git a/back/app/Http/Controllers/Administracion/ExamenesController.php b/back/app/Http/Controllers/Administracion/ExamenesController.php
deleted file mode 100644
index 944024b..0000000
--- a/back/app/Http/Controllers/Administracion/ExamenesController.php
+++ /dev/null
@@ -1,465 +0,0 @@
-<?php
-namespace App\Http\Controllers\Administracion;
-
-use App\Http\Controllers\Controller;
-use App\Models\Academia;
-use App\Models\User;
-use App\Models\Examen;
-use App\Models\Pregunta;
-use Illuminate\Http\Request;
-use Illuminate\Support\Facades\DB;
-use Illuminate\Support\Facades\Validator;
-use Illuminate\Support\Facades\Log;
-use Illuminate\Support\Str;
-use Carbon\Carbon;
-
-class ExamenesController extends Controller
-{
-
-    public function getExamenes(Request $request)
-    {
-        try {
-            $user = auth()->user();
-            
-            if (!$user->hasRole('administrador')) {
-                return response()->json([
-                    'success' => false,
-                    'message' => 'No autorizado'
-                ], 403);
-            }
-            
-            $academia = Academia::where('admin_academia_id', $user->id)->first();
-            
-            if (!$academia) {
-                return response()->json([
-                    'success' => false,
-                    'message' => 'Academia no encontrada'
-                ], 404);
-            }
-            
-            $query = $academia->examenes()
-                ->withCount(['preguntas', 'intentos' => function($query) {
-                    $query->where('estado', 'finalizado');
-                }])
-                ->latest();
-            
-            if ($request->has('search')) {
-                $search = $request->search;
-                $query->where('titulo', 'like', "%{$search}%");
-            }
-            
-            if ($request->has('publicado')) {
-                $query->where('publicado', $request->publicado);
-            }
-            
-            if ($request->has('tipo')) {
-                $query->where('tipo', $request->tipo);
-            }
-            
-            $examenes = $query->paginate(15);
-            
-            return response()->json([
-                'success' => true,
-                'data' => $examenes
-            ]);
-            
-        } catch (\Exception $e) {
-            Log::error('Error obteniendo exámenes', [
-                'error' => $e->getMessage()
-            ]);
-            
-            return response()->json([
-                'success' => false,
-                'message' => 'Error al cargar los exámenes'
-            ], 500);
-        }
-    }
-
-    public function crearExamen(Request $request)
-    {
-        try {
-            $user = auth()->user();
-            
-            if (!$user->hasRole('administrador')) {
-                return response()->json([
-                    'success' => false,
-                    'message' => 'No autorizado'
-                ], 403);
-            }
-            
-            $academia = Academia::where('admin_academia_id', $user->id)->first();
-            
-            if (!$academia) {
-                return response()->json([
-                    'success' => false,
-                    'message' => 'Academia no encontrada'
-                ], 404);
-            }
-            
-            $validator = Validator::make($request->all(), [
-                'titulo' => 'required|string|max:255',
-                'descripcion' => 'nullable|string',
-                'tipo' => 'required|in:practica,simulacro,evaluacion',
-                'dificultad' => 'required|in:facil,medio,dificil,avanzado',
-
-                'duracion_minutos' => 'required|integer|min:1|max:480',
-                'intentos_permitidos' => 'required|integer|min:1|max:10',
-                'puntaje_minimo' => 'required|numeric|min:0|max:100',
-                'preguntas_aleatorias' => 'boolean',
-                'mostrar_resultados' => 'boolean',
-                'mostrar_respuestas' => 'boolean',
-                'publicado' => 'boolean',
-                'fecha_inicio' => 'nullable|date',
-                'fecha_fin' => 'nullable|date|after_or_equal:fecha_inicio',
-                'configuracion' => 'nullable|array'
-            ]);
-            
-            if ($validator->fails()) {
-                return response()->json([
-                    'success' => false,
-                    'errors' => $validator->errors()
-                ], 422);
-            }
-            
-            DB::beginTransaction();
-            
-            $examen = Examen::create([
-                'academia_id' => $academia->id,
-                'titulo' => $request->titulo,
-                'descripcion' => $request->descripcion,
-                'tipo' => $request->tipo,
-                'dificultad' => $request->dificultad,
-                'duracion_minutos' => $request->duracion_minutos,
-                'intentos_permitidos' => $request->intentos_permitidos,
-                'puntaje_minimo' => $request->puntaje_minimo,
-
-                'preguntas_aleatorias' => $request->preguntas_aleatorias ?? 0,
-
-                'mezclar_opciones' => $request->mezclar_opciones ?? true,
-                'mostrar_resultados' => $request->mostrar_resultados ?? true,
-                'mostrar_respuestas' => $request->mostrar_respuestas ?? false,
-                'mostrar_explicaciones' => $request->mostrar_explicaciones ?? false,
-
-                'activar_timer' => $request->activar_timer ?? true,
-                'permitir_navegacion' => $request->permitir_navegacion ?? true,
-                'permitir_revisar' => $request->permitir_revisar ?? true,
-
-                'publicado' => $request->publicado ?? false,
-                'fecha_inicio' => $request->fecha_inicio,
-                'fecha_fin' => $request->fecha_fin,
-                'orden' => $request->orden ?? 1,
-
-                'configuracion' => $request->configuracion ?? []
-            ]);
-                        
-            DB::commit();
-            
-            Log::info('Examen creado por admin', [
-                'academia_id' => $academia->id,
-                'examen_id' => $examen->id,
-                'admin_id' => $user->id
-            ]);
-            
-            return response()->json([
-                'success' => true,
-                'message' => 'Examen creado exitosamente',
-                'data' => $examen
-            ], 201);
-            
-        } catch (\Exception $e) {
-            DB::rollBack();
-            
-            Log::error('Error creando examen', [
-                'error' => $e->getMessage()
-            ]);
-            
-            return response()->json([
-                'success' => false,
-                'message' => 'Error al crear el examen'
-            ], 500);
-        }
-    }
-    
-    public function getExamen($examenId)
-    {
-        try {
-            $user = auth()->user();
-            
-            if (!$user->hasRole('administrador')) {
-                return response()->json([
-                    'success' => false,
-                    'message' => 'No autorizado'
-                ], 403);
-            }
-            
-            $academia = Academia::where('admin_academia_id', $user->id)->first();
-            
-            if (!$academia) {
-                return response()->json([
-                    'success' => false,
-                    'message' => 'Academia no encontrada'
-                ], 404);
-            }
-            
-            $examen = Examen::where('academia_id', $academia->id)
-                          ->with(['preguntas'])
-                          ->find($examenId);
-            
-            if (!$examen) {
-                return response()->json([
-                    'success' => false,
-                    'message' => 'Examen no encontrado'
-                ], 404);
-            }
-            
-            $estadisticas = DB::table('intentos_examen')
-                ->where('examen_id', $examenId)
-                ->where('estado', 'finalizado')
-                ->selectRaw('COUNT(*) as total_intentos')
-                ->selectRaw('AVG(porcentaje) as promedio')
-                ->selectRaw('SUM(CASE WHEN aprobado = 1 THEN 1 ELSE 0 END) as aprobados')
-                ->first();
-            
-            return response()->json([
-                'success' => true,
-                'data' => [
-                    'examen' => $examen,
-                    'estadisticas' => $estadisticas
-                ]
-            ]);
-            
-        } catch (\Exception $e) {
-            Log::error('Error obteniendo examen', [
-                'error' => $e->getMessage()
-            ]);
-            
-            return response()->json([
-                'success' => false,
-                'message' => 'Error al cargar el examen'
-            ], 500);
-        }
-    }
-    
-    public function actualizarExamen(Request $request, $examenId)
-    {
-        try {
-            $user = auth()->user();
-            
-            if (!$user->hasRole('administrador')) {
-                return response()->json([
-                    'success' => false,
-                    'message' => 'No autorizado'
-                ], 403);
-            }
-            
-            $academia = Academia::where('admin_academia_id', $user->id)->first();
-            
-            if (!$academia) {
-                return response()->json([
-                    'success' => false,
-                    'message' => 'Academia no encontrada'
-                ], 404);
-            }
-            
-            $examen = Examen::where('academia_id', $academia->id)->find($examenId);
-            
-            if (!$examen) {
-                return response()->json([
-                    'success' => false,
-                    'message' => 'Examen no encontrado'
-                ], 404);
-            }
-            
-            $validator = Validator::make($request->all(), [
-                'titulo' => 'sometimes|string|max:255',
-                'descripcion' => 'nullable|string',
-                'tipo' => 'sometimes|in:practica,simulacro,evaluacion',
-                'duracion_minutos' => 'sometimes|integer|min:1|max:480',
-                'intentos_permitidos' => 'sometimes|integer|min:1|max:10',
-                'puntaje_minimo' => 'sometimes|numeric|min:0|max:100',
-                'preguntas_aleatorias' => 'boolean',
-                'mostrar_resultados' => 'boolean',
-                'mostrar_respuestas' => 'boolean',
-                'publicado' => 'boolean',
-                'fecha_inicio' => 'nullable|date',
-                'fecha_fin' => 'nullable|date|after_or_equal:fecha_inicio',
-                'configuracion' => 'nullable|array'
-            ]);
-            
-            if ($validator->fails()) {
-                return response()->json([
-                    'success' => false,
-                    'errors' => $validator->errors()
-                ], 422);
-            }
-            
-            $examen->update($request->only([
-                'titulo', 'descripcion', 'tipo', 'duracion_minutos', 'intentos_permitidos',
-                'puntaje_minimo', 'preguntas_aleatorias', 'mostrar_resultados',
-                'mostrar_respuestas', 'publicado', 'fecha_inicio', 'fecha_fin', 'configuracion'
-            ]));
-            
-            Log::info('Examen actualizado por admin', [
-                'academia_id' => $academia->id,
-                'examen_id' => $examen->id,
-                'admin_id' => $user->id
-            ]);
-            
-            return response()->json([
-                'success' => true,
-                'message' => 'Examen actualizado exitosamente',
-                'data' => $examen
-            ]);
-            
-        } catch (\Exception $e) {
-            Log::error('Error actualizando examen', [
-                'error' => $e->getMessage()
-            ]);
-            
-            return response()->json([
-                'success' => false,
-                'message' => 'Error al actualizar el examen'
-            ], 500);
-        }
-    }
-    
-    public function eliminarExamen($examenId)
-    {
-        try {
-            $user = auth()->user();
-            
-            if (!$user->hasRole('administrador')) {
-                return response()->json([
-                    'success' => false,
-                    'message' => 'No autorizado'
-                ], 403);
-            }
-            
-            $academia = Academia::where('admin_academia_id', $user->id)->first();
-            
-            if (!$academia) {
-                return response()->json([
-                    'success' => false,
-                    'message' => 'Academia no encontrada'
-                ], 404);
-            }
-            
-            $examen = Examen::where('academia_id', $academia->id)->find($examenId);
-            
-            if (!$examen) {
-                return response()->json([
-                    'success' => false,
-                    'message' => 'Examen no encontrado'
-                ], 404);
-            }
-            
-            $tieneIntentos = $examen->intentos()->exists();
-            
-            if ($tieneIntentos) {
-                return response()->json([
-                    'success' => false,
-                    'message' => 'No se puede eliminar un examen con intentos realizados'
-                ], 400);
-            }
-            
-            $examen->delete();
-            
-            Log::info('Examen eliminado por admin', [
-                'academia_id' => $academia->id,
-                'examen_id' => $examenId,
-                'admin_id' => $user->id
-            ]);
-            
-            return response()->json([
-                'success' => true,
-                'message' => 'Examen eliminado exitosamente'
-            ]);
-            
-        } catch (\Exception $e) {
-            Log::error('Error eliminando examen', [
-                'error' => $e->getMessage()
-            ]);
-            
-            return response()->json([
-                'success' => false,
-                'message' => 'Error al eliminar el examen'
-            ], 500);
-        }
-    }
-
-    public function getResultadosExamen($examenId)
-    {
-        try {
-            $user = auth()->user();
-            
-            if (!$user->hasRole('administrador')) {
-                return response()->json([
-                    'success' => false,
-                    'message' => 'No autorizado'
-                ], 403);
-            }
-            
-            $academia = Academia::where('admin_academia_id', $user->id)->first();
-            
-            if (!$academia) {
-                return response()->json([
-                    'success' => false,
-                    'message' => 'Academia no encontrada'
-                ], 404);
-            }
-            
-            $examen = Examen::where('academia_id', $academia->id)->find($examenId);
-            
-            if (!$examen) {
-                return response()->json([
-                    'success' => false,
-                    'message' => 'Examen no encontrado'
-                ], 404);
-            }
-            
-            $resultados = DB::table('intentos_examen')
-                ->join('users', 'intentos_examen.user_id', '=', 'users.id')
-                ->where('intentos_examen.examen_id', $examenId)
-                ->where('intentos_examen.estado', 'finalizado')
-                ->select(
-                    'users.id as estudiante_id',
-                    'users.name as estudiante_nombre',
-                    'users.email as estudiante_email',
-                    'intentos_examen.numero_intento',
-                    'intentos_examen.porcentaje',
-                    'intentos_examen.aprobado',
-                    'intentos_examen.tiempo_utilizado',
-                    'intentos_examen.finalizado_en'
-                )
-                ->orderBy('intentos_examen.porcentaje', 'desc')
-                ->get();
-
-            $estadisticas = [
-                'total_estudiantes' => $resultados->groupBy('estudiante_id')->count(),
-                'promedio' => $resultados->avg('porcentaje'),
-                'aprobados' => $resultados->where('aprobado', true)->count(),
-                'reprobados' => $resultados->where('aprobado', false)->count(),
-                'tiempo_promedio' => $resultados->avg('tiempo_utilizado')
-            ];
-            
-            return response()->json([
-                'success' => true,
-                'data' => [
-                    'resultados' => $resultados,
-                    'estadisticas' => $estadisticas
-                ]
-            ]);
-            
-        } catch (\Exception $e) {
-            Log::error('Error obteniendo resultados', [
-                'error' => $e->getMessage()
-            ]);
-            
-            return response()->json([
-                'success' => false,
-                'message' => 'Error al cargar los resultados'
-            ], 500);
-        }
-    }
-    
-}
\ No newline at end of file
diff --git a/back/app/Http/Controllers/Administracion/NoticiaController.php b/back/app/Http/Controllers/Administracion/NoticiaController.php
new file mode 100644
index 0000000..03bf1dc
--- /dev/null
+++ b/back/app/Http/Controllers/Administracion/NoticiaController.php
@@ -0,0 +1,209 @@
+<?php
+
+namespace App\Http\Controllers\Administracion;
+
+use App\Http\Controllers\Controller;
+use App\Models\Noticia;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Storage;
+use Illuminate\Support\Str;
+
+class NoticiaController extends Controller
+{
+    // GET /api/noticias
+    public function index(Request $request)
+    {
+        $perPage = (int) $request->get('per_page', 9);
+
+        $query = Noticia::query();
+
+        if ($request->filled('publicado')) {
+            $query->where('publicado', $request->boolean('publicado'));
+        }
+
+        if ($request->filled('categoria')) {
+            $query->where('categoria', (string) $request->get('categoria'));
+        }
+
+        if ($request->filled('q')) {
+            $q = trim((string) $request->get('q'));
+            $query->where(function ($sub) use ($q) {
+                $sub->where('titulo', 'like', "%{$q}%")
+                    ->orWhere('descripcion_corta', 'like', "%{$q}%");
+            });
+        }
+
+        $data = $query
+            ->orderByDesc('destacado')
+            ->orderByDesc('fecha_publicacion')
+            ->orderByDesc('orden')
+            ->orderByDesc('id')
+            ->paginate($perPage);
+
+        return response()->json([
+            'success' => true,
+            'data' => $data->items(), // incluye imagen_url por el accessor/appends
+            'meta' => [
+                'current_page' => $data->currentPage(),
+                'last_page' => $data->lastPage(),
+                'per_page' => $data->perPage(),
+                'total' => $data->total(),
+            ],
+        ]);
+    }
+
+    // GET /api/noticias/{noticia}
+    public function show(Noticia $noticia)
+    {
+        return response()->json([
+            'success' => true,
+            'data' => $noticia, // incluye imagen_url por el accessor/appends
+        ]);
+    }
+
+    // GET /api/noticias-publicas/{noticia} (o la ruta que uses)
+    public function showPublic(Noticia $noticia)
+    {
+        abort_unless($noticia->publicado, 404);
+
+        return response()->json([
+            'success' => true,
+            'data' => $noticia,
+        ]);
+    }
+
+    // POST /api/noticias (multipart/form-data si viene imagen)
+    public function store(Request $request)
+    {
+        $data = $request->validate([
+            'titulo' => ['required', 'string', 'max:220'],
+            'slug' => ['nullable', 'string', 'max:260', 'unique:noticias,slug'],
+            'descripcion_corta' => ['nullable', 'string', 'max:500'],
+            'contenido' => ['nullable', 'string'],
+            'categoria' => ['nullable', 'string', 'max:80'],
+            'tag_color' => ['nullable', 'string', 'max:30'],
+
+            // ✅ dos formas de imagen
+            'imagen' => ['nullable', 'file', 'mimes:jpg,jpeg,png,webp', 'max:4096'],
+            'imagen_url' => ['nullable', 'url', 'max:600'],
+
+            'link_url' => ['nullable', 'url', 'max:600'],
+            'link_texto' => ['nullable', 'string', 'max:120'],
+            'fecha_publicacion' => ['nullable', 'date'],
+            'publicado' => ['nullable', 'boolean'],
+            'destacado' => ['nullable', 'boolean'],
+            'orden' => ['nullable', 'integer'],
+        ]);
+
+        // slug por defecto (igual tu modelo lo genera, pero aquí lo dejamos por consistencia)
+        if (empty($data['slug'])) {
+            $data['slug'] = Str::slug($data['titulo']);
+        }
+
+        // si viene archivo, manda a storage y prioriza archivo
+        if ($request->hasFile('imagen')) {
+            $path = $request->file('imagen')->store('noticias', 'public');
+            $data['imagen_path'] = $path;
+            $data['imagen_url'] = null; // ✅ evita conflicto con url externa
+        } else {
+            // si viene imagen_url externa, no debe haber imagen_path
+            $data['imagen_path'] = null;
+        }
+
+        // si publican sin fecha, poner ahora
+        if (!empty($data['publicado']) && empty($data['fecha_publicacion'])) {
+            $data['fecha_publicacion'] = now();
+        }
+
+        $noticia = Noticia::create($data);
+
+        return response()->json([
+            'success' => true,
+            'data' => $noticia->fresh(),
+        ], 201);
+    }
+
+    // PUT/PATCH /api/noticias/{noticia}
+    public function update(Request $request, Noticia $noticia)
+    {
+        $data = $request->validate([
+            'titulo' => ['sometimes', 'required', 'string', 'max:220'],
+            'slug' => ['sometimes', 'nullable', 'string', 'max:260', 'unique:noticias,slug,' . $noticia->id],
+            'descripcion_corta' => ['sometimes', 'nullable', 'string', 'max:500'],
+            'contenido' => ['sometimes', 'nullable', 'string'],
+            'categoria' => ['sometimes', 'nullable', 'string', 'max:80'],
+            'tag_color' => ['sometimes', 'nullable', 'string', 'max:30'],
+
+            // ✅ dos formas de imagen
+            'imagen' => ['sometimes', 'nullable', 'file', 'mimes:jpg,jpeg,png,webp', 'max:4096'],
+            'imagen_url' => ['sometimes', 'nullable', 'url', 'max:600'],
+
+            'link_url' => ['sometimes', 'nullable', 'url', 'max:600'],
+            'link_texto' => ['sometimes', 'nullable', 'string', 'max:120'],
+            'fecha_publicacion' => ['sometimes', 'nullable', 'date'],
+            'publicado' => ['sometimes', 'boolean'],
+            'destacado' => ['sometimes', 'boolean'],
+            'orden' => ['sometimes', 'integer'],
+        ]);
+
+        // Si llega imagen archivo, reemplaza la anterior y limpia imagen_url externa
+        if ($request->hasFile('imagen')) {
+            if ($noticia->imagen_path && Storage::disk('public')->exists($noticia->imagen_path)) {
+                Storage::disk('public')->delete($noticia->imagen_path);
+            }
+            $path = $request->file('imagen')->store('noticias', 'public');
+
+            $data['imagen_path'] = $path;
+            $data['imagen_url'] = null; // ✅ prioridad archivo
+        }
+
+        // Si llega imagen_url (externa), borra la imagen física anterior y limpia imagen_path
+        if (array_key_exists('imagen_url', $data) && !empty($data['imagen_url'])) {
+            if ($noticia->imagen_path && Storage::disk('public')->exists($noticia->imagen_path)) {
+                Storage::disk('public')->delete($noticia->imagen_path);
+            }
+            $data['imagen_path'] = null;
+        }
+
+        // Si explícitamente mandan imagen_url = null (quitar url) y no mandan archivo,
+        // no tocamos imagen_path (se queda como está). Si quieres que también limpie path,
+        // dime y lo cambiamos.
+
+        // si se marca publicado y no hay fecha, set now
+        if (
+            array_key_exists('publicado', $data) &&
+            $data['publicado'] &&
+            empty($noticia->fecha_publicacion) &&
+            empty($data['fecha_publicacion'])
+        ) {
+            $data['fecha_publicacion'] = now();
+        }
+
+        // si cambian titulo y slug no vino, regenerar slug (opcional)
+        if (array_key_exists('titulo', $data) && !array_key_exists('slug', $data)) {
+            $data['slug'] = Str::slug($data['titulo']);
+        }
+
+        $noticia->update($data);
+
+        return response()->json([
+            'success' => true,
+            'data' => $noticia->fresh(),
+        ]);
+    }
+
+    // DELETE /api/noticias/{noticia}
+    public function destroy(Noticia $noticia)
+    {
+        if ($noticia->imagen_path && Storage::disk('public')->exists($noticia->imagen_path)) {
+            Storage::disk('public')->delete($noticia->imagen_path);
+        }
+
+        $noticia->delete();
+
+        return response()->json([
+            'success' => true,
+            'message' => 'Noticia eliminada correctamente',
+        ]);
+    }
+}
diff --git a/back/app/Http/Controllers/Administracion/PostulanteController.php b/back/app/Http/Controllers/Administracion/PostulanteController.php
new file mode 100644
index 0000000..7feb6c0
--- /dev/null
+++ b/back/app/Http/Controllers/Administracion/PostulanteController.php
@@ -0,0 +1,64 @@
+<?php
+
+namespace App\Http\Controllers\Administracion;
+
+use App\Http\Controllers\Controller;
+use App\Models\Postulante;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Validator;
+
+class PostulanteController extends Controller
+{
+    public function obtenerPostulantes(Request $request)
+    {
+        $query = Postulante::query();
+
+        if ($request->buscar) {
+            $query->where(function ($q) use ($request) {
+                $q->where('name', 'like', "%{$request->buscar}%")
+                ->orWhere('email', 'like', "%{$request->buscar}%")
+                ->orWhere('dni', 'like', "%{$request->buscar}%");
+            });
+        }
+
+        $postulantes = $query->orderBy('id', 'desc')
+            ->paginate(20);
+
+        return response()->json([
+            'success' => true,
+            'data' => $postulantes
+        ]);
+    }
+
+    public function actualizarPostulante(Request $request, $id)
+    {
+        $postulante = Postulante::findOrFail($id);
+
+        $request->validate([
+            'name'  => 'required|string|max:255',
+            'email' => 'required|email|unique:postulantes,email,' . $postulante->id,
+            'dni'   => 'required|string|max:20|unique:postulantes,dni,' . $postulante->id,
+            'password' => 'nullable|string|min:6'
+        ]);
+
+        $postulante->update([
+            'name'  => $request->name,
+            'email' => $request->email,
+            'dni'   => $request->dni,
+        ]);
+
+        // 🔹 Solo si envían nueva contraseña
+        if ($request->filled('password')) {
+            $postulante->password = $request->password; 
+            $postulante->save();
+        }
+
+        return response()->json([
+            'success' => true,
+            'message' => 'Postulante actualizado correctamente',
+            'data'    => $postulante
+        ]);
+    }
+
+
+}
diff --git a/back/app/Http/Controllers/Administracion/ProcesoAdmisionDetalleController.php b/back/app/Http/Controllers/Administracion/ProcesoAdmisionDetalleController.php
index 1b24b87..1ab61fb 100644
--- a/back/app/Http/Controllers/Administracion/ProcesoAdmisionDetalleController.php
+++ b/back/app/Http/Controllers/Administracion/ProcesoAdmisionDetalleController.php
@@ -30,6 +30,22 @@ class ProcesoAdmisionDetalleController extends Controller
     {
         ProcesoAdmision::findOrFail($procesoId);
 
+        // ✅ Convertir JSON string -> array antes de validar (cuando llega desde FormData)
+            if ($request->has('listas') && is_string($request->input('listas'))) {
+                $decoded = json_decode($request->input('listas'), true);
+                if (json_last_error() === JSON_ERROR_NONE) {
+                    $request->merge(['listas' => $decoded]);
+                }
+            }
+
+            if ($request->has('meta') && is_string($request->input('meta'))) {
+                $decoded = json_decode($request->input('meta'), true);
+                if (json_last_error() === JSON_ERROR_NONE) {
+                    $request->merge(['meta' => $decoded]);
+                }
+            }
+
+
         $data = $request->validate([
             'tipo' => ['required', Rule::in(['requisitos','pagos','vacantes','cronograma'])],
             'titulo_detalle' => ['required','string','max:255'],
@@ -69,6 +85,22 @@ class ProcesoAdmisionDetalleController extends Controller
     {
         $detalle = ProcesoAdmisionDetalle::findOrFail($id);
 
+        // ✅ Convertir JSON string -> array antes de validar (cuando llega desde FormData)
+            if ($request->has('listas') && is_string($request->input('listas'))) {
+                $decoded = json_decode($request->input('listas'), true);
+                if (json_last_error() === JSON_ERROR_NONE) {
+                    $request->merge(['listas' => $decoded]);
+                }
+            }
+
+            if ($request->has('meta') && is_string($request->input('meta'))) {
+                $decoded = json_decode($request->input('meta'), true);
+                if (json_last_error() === JSON_ERROR_NONE) {
+                    $request->merge(['meta' => $decoded]);
+                }
+            }
+
+
         $data = $request->validate([
             'tipo' => ['sometimes', Rule::in(['requisitos','pagos','vacantes','cronograma'])],
             'titulo_detalle' => ['sometimes','string','max:255'],
diff --git a/back/app/Http/Controllers/Administracion/ReglaAreaProcesoController.php b/back/app/Http/Controllers/Administracion/ReglaAreaProcesoController.php
index 691ffdd..8f13db8 100644
--- a/back/app/Http/Controllers/Administracion/ReglaAreaProcesoController.php
+++ b/back/app/Http/Controllers/Administracion/ReglaAreaProcesoController.php
@@ -11,7 +11,7 @@ use Illuminate\Support\Facades\DB;
 
 class ReglaAreaProcesoController extends Controller
 {
-ion areasProcesos()
+    public function areasProcesos()
     {
         $areasProcesos = DB::table('area_proceso as ap')
             ->leftJoin('reglas_area_proceso as r', 'ap.id', '=', 'r.area_proceso_id')
diff --git a/back/app/Http/Controllers/Controller.php b/back/app/Http/Controllers/Controller.php
index 8677cd5..38bdf98 100644
--- a/back/app/Http/Controllers/Controller.php
+++ b/back/app/Http/Controllers/Controller.php
@@ -4,5 +4,5 @@ namespace App\Http\Controllers;
 
 abstract class Controller
 {
-    //
+
 }
diff --git a/back/app/Http/Controllers/ExamenController.php b/back/app/Http/Controllers/ExamenController.php
index 72abdbb..ec76c9b 100644
--- a/back/app/Http/Controllers/ExamenController.php
+++ b/back/app/Http/Controllers/ExamenController.php
@@ -21,6 +21,7 @@ use Illuminate\Support\Facades\Log;
 use Illuminate\Support\Facades\Storage;
 use Illuminate\Support\Facades\Http;
 use App\Services\ExamenService;
+use Illuminate\Support\Facades\DB;
 
 class ExamenController extends Controller
 {
@@ -431,7 +432,7 @@ public function iniciarExamen(Request $request)
     public function responderPregunta($preguntaAsignadaId, Request $request)
     {
         $request->validate([
-            'respuesta' => 'required|string'
+            'respuesta' => 'nullable|string'
         ]);
 
         $preguntaAsignada = PreguntaAsignada::with(['examen', 'pregunta'])
@@ -454,19 +455,34 @@ public function iniciarExamen(Request $request)
     }
 
 
+
     public function finalizarExamen($examenId)
     {
         $examen = Examen::findOrFail($examenId);
 
         $postulante = request()->user();
-        if ($examen->postulante_id !== $postulante->id) {
+
+        // Validar que el examen le pertenezca al postulante autenticado
+        if ((int) $examen->postulante_id !== (int) $postulante->id) {
             return response()->json([
                 'success' => false,
                 'message' => 'No autorizado'
             ], 403);
         }
 
-        $this->examenService->finalizarExamen($examen);
+        // (Opcional) Evitar finalizar 2 veces
+        if ($examen->estado === 'finalizado') {
+            return response()->json([
+                'success' => false,
+                'message' => 'El examen ya está finalizado'
+            ], 409);
+        }
+
+        // Finalizar examen
+        $examen->update([
+            'estado'   => 'finalizado',
+            'hora_fin' => now(),
+        ]);
 
         return response()->json([
             'success' => true,
@@ -475,4 +491,256 @@ public function iniciarExamen(Request $request)
     }
 
 
+
+    public function calificarExamen($examenId, Request $request)
+    {
+        $postulante = $request->user();
+        if (!$postulante) {
+            return response()->json(['success' => false, 'mensaje' => 'No autenticado.'], 401);
+        }
+
+        return DB::transaction(function () use ($examenId, $postulante) {
+
+            // 1) Validar examen del postulante
+            $examen = DB::table('examenes')
+                ->where('id', $examenId)
+                ->where('postulante_id', $postulante->id)
+                ->first();
+
+            if (!$examen) {
+                return response()->json([
+                    'success' => false,
+                    'mensaje' => 'No se encontró un examen para este postulante.'
+                ], 404);
+            }
+
+            // 2) Si ya está calificado, devolver existente (y opcionalmente recalcular orden)
+            $existente = DB::table('resultados_examenes')
+                ->where('examen_id', $examen->id)
+                ->first();
+
+            if ($existente) {
+                // Obtener proceso_id para poder recalcular si deseas (opcional)
+                $procesoId = DB::table('area_proceso')
+                    ->where('id', $examen->area_proceso_id)
+                    ->value('proceso_id');
+
+               
+                if ($procesoId) $this->recalcularOrdenMerito($procesoId);
+
+                return response()->json([
+                    'success' => true,
+                    'mensaje' => 'Examen ya calificado.',
+                    'total_puntos' => (float)$existente->total_puntos,
+                    'total_correctas' => (int)$existente->total_correctas,
+                    'total_incorrectas' => (int)$existente->total_incorrectas,
+                    'total_nulas' => (int)$existente->total_nulas,
+                    'porcentaje_correctas' => (float)$existente->porcentaje_correctas,
+                    'calificacion_sobre_20' => (float)$existente->calificacion_sobre_20,
+                    'orden_merito' => $existente->orden_merito,
+                    'correctas_por_curso' => json_decode($existente->correctas_por_curso, true),
+                    'incorrectas_por_curso' => json_decode($existente->incorrectas_por_curso ?? '[]', true),
+                    'preguntas_totales_por_curso' => json_decode($existente->preguntas_totales_por_curso ?? '[]', true),
+                ]);
+            }
+
+            // 3) Obtener configuración de calificación desde proceso -> calificaciones
+            $cfg = DB::table('area_proceso as ap')
+                ->join('procesos as pr', 'pr.id', '=', 'ap.proceso_id')
+                ->join('calificaciones as ca', 'ca.id', '=', 'pr.calificacion_id')
+                ->where('ap.id', $examen->area_proceso_id)
+                ->select(
+                    'pr.id as proceso_id',
+                    'ca.puntos_correcta',
+                    'ca.puntos_incorrecta',
+                    'ca.puntos_nula',
+                    'ca.puntaje_maximo'
+                )
+                ->first();
+
+            if (!$cfg) {
+                return response()->json([
+                    'success' => false,
+                    'mensaje' => 'No se ha definido un tipo de calificación para este proceso.'
+                ], 400);
+            }
+
+            $puntosCorrecta   = (float) $cfg->puntos_correcta;
+            $puntosIncorrecta = (float) $cfg->puntos_incorrecta;
+            $puntosNula       = (float) $cfg->puntos_nula;
+            $puntajeMaximo    = (float) $cfg->puntaje_maximo;
+
+            // 4) Traer preguntas asignadas con su pregunta y curso
+            $items = DB::table('preguntas_asignadas as pa')
+                ->join('preguntas as p', 'p.id', '=', 'pa.pregunta_id')
+                ->join('cursos as c', 'c.id', '=', 'p.curso_id')
+                ->where('pa.examen_id', $examen->id)
+                ->select(
+                    'pa.id as pa_id',
+                    'pa.estado as pa_estado',
+                    'pa.respuesta_usuario',
+                    'p.respuesta_correcta',
+                    'c.nombre as curso_nombre'
+                )
+                ->get();
+
+            if ($items->isEmpty()) {
+                return response()->json([
+                    'success' => false,
+                    'mensaje' => 'El examen no tiene preguntas asignadas.'
+                ], 422);
+            }
+
+            // 5) Calificar y actualizar cada pregunta_asignada
+            $totalPuntos = 0.0;
+            $totalCorrectas = 0;
+            $totalIncorrectas = 0;
+            $totalNulas = 0;
+
+            $correctasPorCurso = [];
+            $incorrectasPorCurso = [];
+            $preguntasTotalesPorCurso = [];
+
+            foreach ($items as $row) {
+                $curso = $row->curso_nombre;
+
+                $preguntasTotalesPorCurso[$curso] = ($preguntasTotalesPorCurso[$curso] ?? 0) + 1;
+                $correctasPorCurso[$curso] = $correctasPorCurso[$curso] ?? 0;
+                $incorrectasPorCurso[$curso] = $incorrectasPorCurso[$curso] ?? 0;
+
+                $nuevoEsCorrecta = 2;          // 2 = blanco
+                $nuevoPuntaje    = $puntosNula; // nula/blanco
+
+                if ($row->pa_estado === 'anulada') {
+                    // anulada => nula
+                    $nuevoEsCorrecta = 2;
+                    $nuevoPuntaje = $puntosNula;
+                    $totalNulas++;
+                } else {
+                    $ru = trim((string) $row->respuesta_usuario);
+                    $rc = trim((string) $row->respuesta_correcta);
+
+                    if ($ru === '') {
+                        // blanco
+                        $nuevoEsCorrecta = 2;
+                        $nuevoPuntaje = $puntosNula;
+                        $totalNulas++;
+                    } else {
+                        $ruN = mb_strtoupper($ru);
+                        $rcN = mb_strtoupper($rc);
+
+                        if ($rcN !== '' && $ruN === $rcN) {
+                            $nuevoEsCorrecta = 1;
+                            $nuevoPuntaje = $puntosCorrecta;
+                            $totalCorrectas++;
+                            $correctasPorCurso[$curso]++;
+                        } else {
+                            $nuevoEsCorrecta = 0;
+                            $nuevoPuntaje = $puntosIncorrecta;
+                            $totalIncorrectas++;
+                            $incorrectasPorCurso[$curso]++;
+                        }
+                    }
+                }
+
+                $totalPuntos += (float) $nuevoPuntaje;
+
+                DB::table('preguntas_asignadas')
+                    ->where('id', $row->pa_id)
+                    ->update([
+                        'es_correcta' => $nuevoEsCorrecta,
+                        'puntaje'     => $nuevoPuntaje,
+                        'updated_at'  => now(),
+                    ]);
+            }
+
+            // 6) Resumen
+            $totalPreguntas = (int) $items->count();
+            $porcentajeCorrectas = $totalPreguntas > 0 ? ($totalCorrectas / $totalPreguntas) * 100 : 0;
+
+            $calificacionSobre20 = ($puntajeMaximo > 0)
+                ? ($totalPuntos / $puntajeMaximo) * 20
+                : 0;
+
+            $correctasPorCursoFormato = [];
+            foreach ($correctasPorCurso as $curso => $corr) {
+                $y = $preguntasTotalesPorCurso[$curso] ?? 0;
+                $correctasPorCursoFormato[$curso] = "{$corr} de {$y}";
+            }
+
+            // 7) Guardar resultado en resultados_examenes
+            $resultadoId = DB::table('resultados_examenes')->insertGetId([
+                'postulante_id' => $postulante->id,
+                'examen_id' => $examen->id,
+                'total_puntos' => round($totalPuntos, 3),
+                'correctas_por_curso' => json_encode($correctasPorCursoFormato),
+                'incorrectas_por_curso' => json_encode($incorrectasPorCurso),
+                'preguntas_totales_por_curso' => json_encode($preguntasTotalesPorCurso),
+                'total_correctas' => $totalCorrectas,
+                'total_incorrectas' => $totalIncorrectas,
+                'total_nulas' => $totalNulas,
+                'porcentaje_correctas' => round($porcentajeCorrectas, 2),
+                'calificacion_sobre_20' => round($calificacionSobre20, 2),
+                'created_at' => now(),
+                'updated_at' => now(),
+            ]);
+
+            // 8) Recalcular orden de mérito por proceso
+            $this->recalcularOrdenMerito($cfg->proceso_id);
+
+            // 9) Leer orden_merito ya asignado (opcional)
+            $orden = DB::table('resultados_examenes')->where('id', $resultadoId)->value('orden_merito');
+
+            DB::table('examenes')->where('id', $examen->id)->update([
+                'estado' => 'calificado',
+                'hora_fin' => now(),
+            ]);
+            return response()->json([
+                'success' => true,
+                'mensaje' => 'Examen calificado exitosamente.',
+                'examen_id' => $examen->id,
+                'proceso_id' => $cfg->proceso_id,
+
+                'total_puntos' => round($totalPuntos, 2),
+                'total_correctas' => $totalCorrectas,
+                'total_incorrectas' => $totalIncorrectas,
+                'total_nulas' => $totalNulas,
+
+                'porcentaje_correctas' => round($porcentajeCorrectas, 2),
+                'calificacion_sobre_20' => round($calificacionSobre20, 2),
+                'orden_merito' => $orden,
+
+                'correctas_por_curso' => $correctasPorCursoFormato,
+                'incorrectas_por_curso' => $incorrectasPorCurso,
+                'preguntas_totales_por_curso' => $preguntasTotalesPorCurso,
+            ]);
+        });
+    }
+
+
+    public function recalcularOrdenMerito($procesoId): void
+    {
+        DB::statement("
+            UPDATE resultados_examenes r
+            JOIN (
+                SELECT
+                    r2.id,
+                    ROW_NUMBER() OVER (
+                        ORDER BY
+                            r2.total_puntos DESC,
+                            COALESCE(r2.updated_at, r2.created_at) ASC
+                    ) AS nuevo_orden
+                FROM resultados_examenes r2
+                JOIN examenes e ON e.id = r2.examen_id
+                JOIN area_proceso ap ON ap.id = e.area_proceso_id
+                WHERE ap.proceso_id = ?
+            ) x ON x.id = r.id
+            SET r.orden_merito = x.nuevo_orden
+        ", [$procesoId]);
+    }
+
+
+
+
+
 }
\ No newline at end of file
diff --git a/back/app/Http/Controllers/PostulanteAuthController.php b/back/app/Http/Controllers/PostulanteAuthController.php
index 1c782e1..681ff06 100644
--- a/back/app/Http/Controllers/PostulanteAuthController.php
+++ b/back/app/Http/Controllers/PostulanteAuthController.php
@@ -161,28 +161,28 @@ class PostulanteAuthController extends Controller
 
         $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
-                    ];
-                }
-            }
-        }
+        // // ===============================
+        // // 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
diff --git a/back/app/Http/Controllers/WebController.php b/back/app/Http/Controllers/WebController.php
new file mode 100644
index 0000000..4a793b7
--- /dev/null
+++ b/back/app/Http/Controllers/WebController.php
@@ -0,0 +1,70 @@
+<?php
+
+namespace App\Http\Controllers;
+use App\Models\ProcesoAdmision;
+use App\Models\ProcesoAdmisionDetalle;
+
+class WebController extends Controller
+{
+
+public function GetProcesoAdmision()
+{
+    $procesos = ProcesoAdmision::select(
+            'id',
+            'titulo',
+            'subtitulo',
+            'descripcion',
+            'slug',
+            'tipo_proceso',
+            'modalidad',
+            'publicado',
+            'fecha_publicacion',
+            'fecha_inicio_preinscripcion',
+            'fecha_fin_preinscripcion',
+            'fecha_inicio_inscripcion',
+            'fecha_fin_inscripcion',
+            'fecha_examen1',
+            'fecha_examen2',
+            'fecha_resultados',
+            'fecha_inicio_biometrico',
+            'fecha_fin_biometrico',
+            'imagen_path',
+            'banner_path',
+            'brochure_path',
+            'link_preinscripcion',
+            'link_inscripcion',
+            'link_resultados',
+            'link_reglamento',
+            'estado',
+            'created_at',
+            'updated_at'
+        )
+        ->with([
+            'detalles' => function ($query) {
+                $query->select(
+                    'id',
+                    'proceso_admision_id',
+                    'tipo',
+                    'titulo_detalle',
+                    'descripcion',
+                    'listas',
+                    'meta',
+                    'url',
+                    'imagen_path',
+                    'imagen_path_2',
+                    'created_at',
+                    'updated_at'
+                );
+            }
+        ])
+        ->latest() // 🔥 Esto ordena por created_at DESC
+        ->get();
+
+    return response()->json([
+        'success' => true,
+        'data' => $procesos
+    ]);
+}
+
+
+}
diff --git a/back/app/Models/Examen.php b/back/app/Models/Examen.php
index 1a18ae5..9aaf09e 100644
--- a/back/app/Models/Examen.php
+++ b/back/app/Models/Examen.php
@@ -11,15 +11,22 @@ class Examen extends Model
 
     protected $table = 'examenes';
 
-    protected $fillable = [
+    protected $fillable = [ 
         'postulante_id',
         'area_proceso_id',
-        'pagado',   
-        'tipo_pago',     
-        'pago_id', 
+        'pagado',
+        'tipo_pago',
+        'pago_id',
         'intentos',
         'hora_inicio',
-         
+        'estado',
+        'hora_fin',
+    ];
+
+    protected $casts = [
+        'pagado' => 'boolean',
+        'hora_inicio' => 'datetime',
+        'hora_fin' => 'datetime',
     ];
 
     public function postulante()
diff --git a/back/app/Models/Noticia.php b/back/app/Models/Noticia.php
new file mode 100644
index 0000000..1a61219
--- /dev/null
+++ b/back/app/Models/Noticia.php
@@ -0,0 +1,66 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Support\Facades\Storage;
+use Illuminate\Support\Str;
+
+class Noticia extends Model
+{
+    use SoftDeletes;
+
+    protected $table = 'noticias';
+
+    protected $fillable = [
+        'titulo',
+        'slug',
+        'descripcion_corta',
+        'contenido',
+        'categoria',
+        'tag_color',
+        'imagen_path',
+        'imagen_url', // ✅ agrega esto si también lo guardas en BD
+        'link_url',
+        'link_texto',
+        'fecha_publicacion',
+        'publicado',
+        'destacado',
+        'orden',
+    ];
+
+    protected $casts = [
+        'fecha_publicacion' => 'datetime',
+        'publicado' => 'boolean',
+        'destacado' => 'boolean',
+        'orden' => 'integer',
+    ];
+
+    // ✅ se incluirá en el JSON
+    protected $appends = ['imagen_url'];
+
+    public function getImagenUrlAttribute(): ?string
+    {
+        // 1) Si en BD hay una URL externa, úsala
+        if (!empty($this->attributes['imagen_url'])) {
+            return $this->attributes['imagen_url'];
+        }
+
+        // 2) Si hay imagen en storage, genera URL absoluta
+        if (!empty($this->imagen_path)) {
+            return url(Storage::disk('public')->url($this->imagen_path));
+        }
+
+        return null;
+    }
+
+    protected static function booted(): void
+    {
+        static::saving(function (Noticia $noticia) {
+            if (!$noticia->slug) {
+                $noticia->slug = Str::slug($noticia->titulo);
+            }
+        });
+    }
+}
diff --git a/back/app/Models/PreguntaAsignada.php b/back/app/Models/PreguntaAsignada.php
index 1124262..8862954 100644
--- a/back/app/Models/PreguntaAsignada.php
+++ b/back/app/Models/PreguntaAsignada.php
@@ -21,7 +21,7 @@ class PreguntaAsignada extends Model
     ];
     
     protected $casts = [
-        'es_correcta' => 'boolean',
+        'es_correcta' => 'integer',
         'puntaje' => 'decimal:2'
     ];
     
diff --git a/back/app/Models/ProcesoAdmision.php b/back/app/Models/ProcesoAdmision.php
index 4c4af06..106c862 100644
--- a/back/app/Models/ProcesoAdmision.php
+++ b/back/app/Models/ProcesoAdmision.php
@@ -65,5 +65,7 @@ class ProcesoAdmision extends Model
     {
         return $this->hasMany(ResultadoAdmision::class, 'idproceso');
     }
+
+
 }
 
diff --git a/back/app/Models/ResultadoExamen.php b/back/app/Models/ResultadoExamen.php
new file mode 100644
index 0000000..d8c7ae9
--- /dev/null
+++ b/back/app/Models/ResultadoExamen.php
@@ -0,0 +1,37 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+
+class ResultadoExamen extends Model
+{
+    protected $table = 'resultados_examenes';
+
+    protected $fillable = [
+        'postulante_id',
+        'examen_id',
+        'total_puntos',
+        'correctas_por_curso',
+        'incorrectas_por_curso',
+        'preguntas_totales_por_curso',
+        'total_correctas',
+        'total_incorrectas',
+        'total_nulas',
+        'porcentaje_correctas',
+        'calificacion_sobre_20',
+        'orden_merito',
+        'probabilidad_ingreso',
+        'programa_recomendado',
+    ];
+
+    public function postulante()
+    {
+        return $this->belongsTo(Postulante::class);
+    }
+
+    public function examen()
+    {
+        return $this->belongsTo(Examen::class);
+    }
+}
diff --git a/back/app/Services/ExamenService.php b/back/app/Services/ExamenService.php
index daddafd..0c99677 100644
--- a/back/app/Services/ExamenService.php
+++ b/back/app/Services/ExamenService.php
@@ -115,39 +115,49 @@ public function obtenerPreguntasExamen(Examen $examen): array
 
 
 
-    public function guardarRespuesta(PreguntaAsignada $pa, string $respuesta): array
-    {
-        if ($pa->estado === 'respondida') {
-            return ['success' => false, 'message' => 'Ya respondida'];
-        }
+public function guardarRespuesta(PreguntaAsignada $pa, ?string $respuesta): array
+{
+    if ($pa->estado === 'respondida') {
+        return ['success' => false, 'message' => 'Ya respondida'];
+    }
 
-        $esCorrecta = $respuesta === $pa->pregunta->respuesta_correcta;
+    // 🔹 Si está en blanco
+    if (empty($respuesta)) {
 
         $pa->update([
-            'respuesta_usuario' => $respuesta,
-            'es_correcta'       => $esCorrecta,
-            'puntaje_obtenido'  => $esCorrecta ? $pa->puntaje_base : 0,
+            'respuesta_usuario' => null,
+            'es_correcta'       => 2, // 2 = blanco
+            'puntaje_obtenido'  => 0,
             'estado'            => 'respondida',
             'respondida_at'     => now()
         ]);
 
         return [
             'success'  => true,
-            'correcta' => $esCorrecta,
-            'puntaje'  => $pa->puntaje_obtenido
+            'correcta' => 2,
+            'puntaje'  => 0
         ];
     }
 
-    /**
-     * Finalizar examen
-     */
-    public function finalizarExamen(Examen $examen): void
-    {
-        $examen->update([
-            'estado'   => 'finalizado',
-            'hora_fin' => now()
-        ]);
-    }
+    // 🔹 Si respondió algo
+    $esCorrecta = $respuesta === $pa->pregunta->respuesta_correcta;
+
+    $pa->update([
+        'respuesta_usuario' => $respuesta,
+        'es_correcta'       => $esCorrecta ? 1 : 0,
+        'puntaje_obtenido'  => $esCorrecta ? $pa->puntaje_base : 0,
+        'estado'            => 'respondida',
+        'respondida_at'     => now()
+    ]);
+
+    return [
+        'success'  => true,
+        'correcta' => $esCorrecta ? 1 : 0,
+        'puntaje'  => $pa->puntaje_obtenido
+    ];
+}
+
+
 
     private function mezclarOpciones(?array $opciones): array
     {
diff --git a/back/routes/api.php b/back/routes/api.php
index 2b75a57..66e4db5 100644
--- a/back/routes/api.php
+++ b/back/routes/api.php
@@ -6,7 +6,6 @@ use App\Http\Controllers\AuthController;
 use App\Http\Controllers\AcademiaController;
 use App\Http\Controllers\VinculacionController;
 use App\Http\Controllers\Administracion\administradorController;
-use App\Http\Controllers\Administracion\ExamenesController;
 use App\Http\Controllers\Administracion\AreaController;
 use App\Http\Controllers\Administracion\CursoController;
 use App\Http\Controllers\Administracion\PreguntaController;
@@ -16,7 +15,10 @@ use App\Http\Controllers\ExamenController;
 use App\Http\Controllers\Administracion\ReglaAreaProcesoController;
 use App\Http\Controllers\Administracion\ProcesoAdmisionController;
 use App\Http\Controllers\Administracion\ProcesoAdmisionDetalleController;
-use App\Models\ProcesoAdmisionDetalle;
+use App\Http\Controllers\Administracion\PostulanteController;
+use App\Http\Controllers\Administracion\CalificacionController;
+use App\Http\Controllers\Administracion\NoticiaController;
+use App\Http\Controllers\WebController;
 
 Route::get('/user', function (Request $request) {
      return $request->user();
@@ -63,6 +65,22 @@ Route::middleware(['auth:sanctum'])->prefix('admin')->group(function () {
 
 });
 
+Route::middleware(['auth:sanctum'])->prefix('admin')->group(function () {
+
+    // NOTICIAS
+    Route::get('/noticias', [NoticiaController::class, 'index']);
+    Route::get('/noticias/{noticia}', [NoticiaController::class, 'show']);
+
+    Route::post('/noticias', [NoticiaController::class, 'store']);
+
+    // usa SOLO UNA (PUT o PATCH). Aquí dejo PUT:
+    Route::put('/noticias/{noticia}', [NoticiaController::class, 'update']);
+
+    Route::delete('/noticias/{noticia}', [NoticiaController::class, 'destroy']);
+});
+Route::get('/noticias', [NoticiaController::class, 'index']);
+Route::get('/noticias/{noticia:slug}', [NoticiaController::class, 'showPublic']);
+
 Route::middleware(['auth:sanctum'])->prefix('admin')->group(function () {
 
     Route::get('/cursos', [CursoController::class, 'index']);
@@ -74,6 +92,14 @@ Route::middleware(['auth:sanctum'])->prefix('admin')->group(function () {
 
 });
 
+Route::middleware(['auth:sanctum'])->prefix('admin')->group(function () {
+
+    Route::get('/postulantes', [PostulanteController::class, 'obtenerPostulantes']);
+    Route::put('/postulantes/{id}', [PostulanteController::class, 'actualizarPostulante']);
+});
+
+
+
 
 Route::middleware(['auth:sanctum'])->prefix('admin')->group(function () {
 
@@ -85,6 +111,17 @@ Route::middleware(['auth:sanctum'])->prefix('admin')->group(function () {
 
 });
 
+Route::middleware('auth:sanctum')->group(function () {
+
+
+    Route::get('/calificaciones', [CalificacionController::class, 'index']);
+    Route::post('/calificaciones', [CalificacionController::class, 'store']);
+    Route::get('/calificaciones/{id}', [CalificacionController::class, 'show']);
+    Route::put('/calificaciones/{id}', [CalificacionController::class, 'update']);
+    Route::delete('/calificaciones/{id}', [CalificacionController::class, 'destroy']);
+
+});
+
 
 
 Route::prefix('postulante')->group(function () {
@@ -157,6 +194,7 @@ Route::middleware(['auth:postulante'])->group(function () {
     
     // Finalizar examen
     Route::post('/examen/{examen}/finalizar', [ExamenController::class, 'finalizarExamen']);
+    Route::post('/examen/{examenId}/calificar', [ExamenController::class, 'calificarExamen']);
     
 });
 
@@ -185,4 +223,8 @@ Route::middleware('auth:sanctum')->prefix('admin')->group(function () {
             Route::match(['put','patch'], '/{id}', [ProcesoAdmisionDetalleController::class, 'update'])->name('update');
             Route::delete('/{id}', [ProcesoAdmisionDetalleController::class, 'destroy'])->name('destroy');
         });
-    });
\ No newline at end of file
+    });
+
+
+
+Route::get('/procesos-admision', [WebController::class, 'GetProcesoAdmision']);
diff --git a/front/index.html b/front/index.html
index be16426..b8048bb 100644
--- a/front/index.html
+++ b/front/index.html
@@ -2,10 +2,9 @@
 <html lang="es">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" href="/logotiny.png" />
+    <link rel="icon" type="image/svg+xml" href="" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Direccion de Admision - Universidad Nacional del Altiplano Puno. Procesos de admision, convocatorias, requisitos e inscripciones." />
-    <title>Direccion de Admision - UNA Puno</title>
+    <title>Admisión</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/front/public/1.jpg b/front/public/1.jpg
new file mode 100644
index 0000000..8be3ebf
Binary files /dev/null and b/front/public/1.jpg differ
diff --git a/front/public/2.jpg b/front/public/2.jpg
new file mode 100644
index 0000000..e5ca83b
Binary files /dev/null and b/front/public/2.jpg differ
diff --git a/front/public/PORTADA.jpg.jpeg b/front/public/PORTADA.jpg.jpeg
new file mode 100644
index 0000000..3564490
Binary files /dev/null and b/front/public/PORTADA.jpg.jpeg differ
diff --git a/front/public/PORTADAXD.jpg.jpeg b/front/public/PORTADAXD.jpg.jpeg
new file mode 100644
index 0000000..a2ff101
Binary files /dev/null and b/front/public/PORTADAXD.jpg.jpeg differ
diff --git a/front/public/favicon.ico b/front/public/favicon.ico
new file mode 100644
index 0000000..756b3ed
Binary files /dev/null and b/front/public/favicon.ico differ
diff --git a/front/src/axios.js b/front/src/axios.js
index 5e726ea..9e54b0e 100644
--- a/front/src/axios.js
+++ b/front/src/axios.js
@@ -9,7 +9,7 @@ const api = axios.create({
   }
 });
 
-// Request interceptor
+
 api.interceptors.request.use(
   (config) => {
     const token = localStorage.getItem('token')
@@ -25,7 +25,7 @@ api.interceptors.request.use(
   }
 )
 
-// Response interceptor
+
 api.interceptors.response.use(
   (response) => {
     return response
@@ -33,21 +33,19 @@ api.interceptors.response.use(
   async (error) => {
     const originalRequest = error.config
     
-    // Si el error es 401 y no es un intento de re-autenticación
+
     if (error.response?.status === 401 && !originalRequest._retry) {
       originalRequest._retry = true
       
-      // Limpiar autenticación
+
       localStorage.removeItem('token')
       localStorage.removeItem('user')
-      
-      // Redirigir a login
-      router.push('/login')
+
+      router.push('account/auth/login')
       
       return Promise.reject(error)
     }
-    
-    // Manejar otros errores
+
     if (error.response?.status === 403) {
       router.push('/unauthorized')
     }
diff --git a/front/src/components/Footer.vue b/front/src/components/Footer.vue
index 2f4d7b0..adb1935 100644
--- a/front/src/components/Footer.vue
+++ b/front/src/components/Footer.vue
@@ -13,7 +13,7 @@
 
         <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.
+          formación académica de la región.
         </p>
       </div>
 
@@ -40,8 +40,8 @@
         <h4>Contacto</h4>
         <ul>
           <li>Av. Floral N° 1153 – Puno</li>
-          <li>📞 (051) 123-456</li>
-          <li>✉️ admision@unap.edu.pe</li>
+          <li>📞 (+51) 957 734 361</li>
+          <li>✉️ dgadmision@unap.edu.pe</li>
         </ul>
       </div>
     </div>
diff --git a/front/src/components/WebPage.vue b/front/src/components/WebPage.vue
index ffffa38..39bbdf7 100644
--- a/front/src/components/WebPage.vue
+++ b/front/src/components/WebPage.vue
@@ -9,66 +9,19 @@
 
     <ProcessSection :proceso="procesoPrincipal" />
 
-    <ConvocatoriasSection
-      :procesos="procesosPublicados"
-      @show-modal="showModal"
-    />
+    <ConvocatoriasSection/>
 
-    <ProgramasSection :facultades="facultades" />
+    <!-- <ProgramasSection/> -->
 
     <StatsSection />
 
-    <NoticiasSection :noticias="noticias" />
+    <NoticiasSection/>
 
-    <ModalidadesSection :modalidades="modalidades" />
 
     <ContactSection />
-  </div>
-
-  <PreinscripcionModal
-    v-model:visible="preinscripcionModalVisible"
-    :facultades="facultades"
-    @submit="submitPreinscripcion"
-  />
-
-  <!-- Modal de detalles de convocatoria -->
-  <a-modal
-    v-model:open="detalleModalVisible"
-    :title="detalleModal.titulo"
-    :footer="null"
-    width="700px"
-    centered
-  >
-    <div v-if="detalleModal.imagen_url" class="detalle-modal-imagen">
-      <a-image
-        :src="detalleModal.imagen_url"
-        :alt="detalleModal.titulo"
-        style="width: 100%; max-height: 350px; object-fit: cover; border-radius: 8px;"
-      />
-    </div>
-
-    <div v-if="detalleModal.descripcion" class="detalle-modal-desc" style="margin-top: 16px;">
-      <p style="white-space: pre-line; color: #555; line-height: 1.7;">{{ detalleModal.descripcion }}</p>
-    </div>
-
-    <div v-if="detalleModal.listas && detalleModal.listas.length > 0" style="margin-top: 12px;">
-      <ul style="padding-left: 20px; color: #555;">
-        <li v-for="(item, idx) in detalleModal.listas" :key="idx">{{ item }}</li>
-      </ul>
-    </div>
 
-    <div v-if="detalleModal.imagen_url_2" class="detalle-modal-imagen" style="margin-top: 16px;">
-      <a-image
-        :src="detalleModal.imagen_url_2"
-        :alt="detalleModal.titulo"
-        style="width: 100%; max-height: 350px; object-fit: cover; border-radius: 8px;"
-      />
-    </div>
+  </div>
 
-    <div v-if="!detalleModal.descripcion && !detalleModal.imagen_url && (!detalleModal.listas || detalleModal.listas.length === 0)">
-      <a-empty description="No hay información disponible para esta sección." />
-    </div>
-  </a-modal>
 
   <FooterModerno />
 </template>
@@ -89,184 +42,9 @@ import StatsSection from './WebPageSections/StatsSection.vue'
 import NoticiasSection from './WebPageSections/NoticiasSection.vue'
 import ModalidadesSection from './WebPageSections/ModalidadesSection.vue'
 import ContactSection from './WebPageSections/ContactSection.vue'
-import PreinscripcionModal from './WebPageSections//modal/PreinscripcionModal.vue'
-
-import {
-  MedicineBoxOutlined,
-  BuildOutlined,
-  CodeOutlined,
-  BookOutlined,
-  TrophyOutlined,
-  BankOutlined,
-  ExperimentOutlined,
-  UserOutlined,
-} from "@ant-design/icons-vue"
-
-const procesoStore = useProcesoAdmisionStore()
-
-const procesosPublicados = computed(() => procesoStore.procesosPublicados)
-const procesoPrincipal = computed(() => procesoStore.procesosPublicados[0] || null)
-
-onMounted(() => {
-  procesoStore.fetchProcesosPublicados()
-})
 
-const preinscripcionModalVisible = ref(false)
-const detalleModalVisible = ref(false)
-const detalleModal = ref({
-  titulo: '',
-  descripcion: '',
-  imagen_url: null,
-  imagen_url_2: null,
-  listas: [],
-})
 
-const facultades = [
-  {
-    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: markRaw(MedicineBoxOutlined),
-      },
-      {
-        id: 2,
-        nombre: "Enfermería",
-        grado: "Bachiller",
-        descripcion: "Cuidado integral de la salud",
-        vacantes: 60,
-        puntaje: "1500+",
-        icono: markRaw(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: markRaw(BuildOutlined),
-      },
-      {
-        id: 4,
-        nombre: "Ingeniería de Sistemas",
-        grado: "Bachiller",
-        descripcion: "Desarrollo de software e inteligencia artificial",
-        vacantes: 100,
-        puntaje: "1600+",
-        icono: markRaw(CodeOutlined),
-      },
-    ],
-  },
-  {
-    id: "3",
-    nombre: "Derecho y Humanidades",
-    carreras: [
-      {
-        id: 5,
-        nombre: "Derecho",
-        grado: "Bachiller",
-        descripcion: "Formación jurídica integral",
-        vacantes: 120,
-        puntaje: "1550+",
-        icono: markRaw(BookOutlined),
-      },
-      {
-        id: 6,
-        nombre: "Psicología",
-        grado: "Bachiller",
-        descripcion: "Ciencias del comportamiento humano",
-        vacantes: 70,
-        puntaje: "1450+",
-        icono: markRaw(UserOutlined),
-      },
-    ],
-  },
-]
 
-const modalidades = [
-  {
-    id: 1,
-    nombre: "Admisión Ordinaria",
-    descripcion: "Examen de conocimientos generales",
-    estado: "Abierto",
-    estadoColor: "success",
-    color: "#1890ff",
-    icono: markRaw(BookOutlined),
-  },
-  {
-    id: 2,
-    nombre: "Evaluación de Talentos",
-    descripcion: "Para deportistas y artistas destacados",
-    estado: "Próximamente",
-    estadoColor: "orange",
-    color: "#faad14",
-    icono: markRaw(TrophyOutlined),
-  },
-  {
-    id: 3,
-    nombre: "Traslado Externo",
-    descripcion: "Estudiantes de otras universidades",
-    estado: "Cerrado",
-    estadoColor: "red",
-    color: "#ff4d4f",
-    icono: markRaw(BankOutlined),
-  },
-  {
-    id: 4,
-    nombre: "Segunda Carrera",
-    descripcion: "Para profesionales graduados",
-    estado: "Abierto",
-    estadoColor: "success",
-    color: "#52c41a",
-    icono: markRaw(ExperimentOutlined),
-  },
-]
-
-const noticias = [
-  {
-    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?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?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?auto=format&fit=crop&w=600&q=80",
-  },
-]
 
 const scrollToConvocatoria = () => {
   const el = document.getElementById("convocatorias")
@@ -277,48 +55,6 @@ const openVirtualTour = () => {
   window.open("https://example.com", "_blank", "noopener,noreferrer")
 }
 
-const openPreinscripcion = () => {
-  preinscripcionModalVisible.value = true
-}
-
-const tipoLabels = {
-  requisitos: 'Requisitos',
-  pagos: 'Pagos',
-  vacantes: 'Vacantes',
-  cronograma: 'Cronograma',
-}
-
-const showModal = ({ procesoId, tipo }) => {
-  const proceso = procesosPublicados.value.find(p => p.id === procesoId)
-  if (!proceso) return
-
-  const detalle = proceso.detalles?.find(d => d.tipo === tipo)
-
-  if (detalle) {
-    detalleModal.value = {
-      titulo: detalle.titulo_detalle || tipoLabels[tipo] || tipo,
-      descripcion: detalle.descripcion || '',
-      imagen_url: detalle.imagen_url || null,
-      imagen_url_2: detalle.imagen_url_2 || null,
-      listas: detalle.listas || [],
-    }
-  } else {
-    detalleModal.value = {
-      titulo: `${tipoLabels[tipo] || tipo} - ${proceso.titulo}`,
-      descripcion: '',
-      imagen_url: null,
-      imagen_url_2: null,
-      listas: [],
-    }
-  }
-
-  detalleModalVisible.value = true
-}
-
-const submitPreinscripcion = () => {
-  message.success("Preinscripción iniciada exitosamente")
-  preinscripcionModalVisible.value = false
-}
 </script>
 
 <style scoped>
diff --git a/front/src/components/WebPageSections/ContactSection.vue b/front/src/components/WebPageSections/ContactSection.vue
index 20a39a6..5136747 100644
--- a/front/src/components/WebPageSections/ContactSection.vue
+++ b/front/src/components/WebPageSections/ContactSection.vue
@@ -1,230 +1,167 @@
-<!-- components/contact/ContactSection.vue -->
 <template>
-  <section class="contact-section">
+  <section class="process-section" aria-labelledby="faq-title">
     <div class="section-container">
-      <!-- Preguntas Frecuentes -->
-      <div class="faq-block">
-        <div class="section-header">
-          <h2 class="section-title">Preguntas Frecuentes</h2>
-          <p class="section-subtitle">Resuelve tus dudas sobre el proceso de admision</p>
-        </div>
-
-        <a-collapse
-          v-model:activeKey="activeFaqKeys"
-          :bordered="false"
-          expand-icon-position="end"
-          class="faq-collapse"
-        >
-          <a-collapse-panel
-            v-for="(faq, index) in faqs"
-            :key="String(index)"
-            class="faq-panel"
-          >
-            <template #header>
-              <div class="faq-header">
-                <span class="faq-number">{{ String(index + 1).padStart(2, '0') }}</span>
-                <span class="faq-question">{{ faq.pregunta }}</span>
-              </div>
-            </template>
-            <div class="faq-answer" v-html="faq.respuesta"></div>
+
+      <div class="section-header">
+        <h2 id="faq-title" class="section-title">
+          Preguntas Frecuentes
+        </h2>
+        <p class="section-subtitle">
+          Resolvemos las dudas más comunes sobre el proceso de admisión y el uso de nuestra plataforma.
+        </p>
+      </div>
+
+      <div class="process-card">
+
+
+        <a-collapse accordion class="modern-collapse">
+
+          <a-collapse-panel key="1" header="01. ¿Puedo postular con DNI caducado?">
+            No, su DNI debe estar vigente al momento de la inscripción.
+            En su defecto, puede presentar la Hoja C4 o el ticket de trámite acompañado de una copia del DNI.
+          </a-collapse-panel>
+
+          <a-collapse-panel key="2" header="02. ¿Qué requisitos debo presentar si postulo como persona con discapacidad?">
+            Certificado de Discapacidad emitido por entidades de salud acreditadas en el RENIPRESS.
+            Este debe ser adjuntado junto a los demás requisitos.
           </a-collapse-panel>
+
+          <a-collapse-panel key="3" header="03. ¿Qué hago si ingreso mal mis datos en la preinscripción?">
+            No es posible modificarlos en línea una vez guardados.
+            Debe acercarse al local de inscripción y solicitar ayuda en la oficina de soporte técnico.
+          </a-collapse-panel>
+
+          <a-collapse-panel key="4" header="04. ¿Cuáles son los códigos para realizar los pagos?">
+            <p><b>Código 26:</b> Derechos de Admisión.</p>
+            <p><b>Código 27:</b> Rezagados al proceso de inscripción.</p>
+            <p><b>Código 28:</b> Carpeta de postulante.</p>
+          </a-collapse-panel>
+
+          <a-collapse-panel key="5" header="05. ¿Cómo debo realizar la preinscripción e inscripción?">
+            Ingrese a admision.unap.edu.pe para la preinscripción.
+            <br /><br />
+            La inscripción presencial se realiza según el último dígito del DNI, según el cronograma oficial.
+          </a-collapse-panel>
+
+          <a-collapse-panel key="6" header="06. ¿Qué requisitos debo presentar si postulo a Medicina Humana o Educación Física?">
+            Constancia de evaluación médica emitida por un establecimiento de salud primario,
+            además de los demás requisitos exigidos.
+          </a-collapse-panel>
+
+          <a-collapse-panel key="7" header="07. ¿Puedo cambiar de programa de estudio luego de inscribirme?">
+            Sí. Tras obtener su constancia de inscripción, debe realizar un pago de S/.100 (Código 27)
+            en caja de la Universidad o Banco de la Nación, incluyendo comisión.
+          </a-collapse-panel>
+
+          <a-collapse-panel key="8" header="08. ¿Qué debo traer para inscribirme presencialmente?">
+            <ul>
+              <li>Comprobantes de pago o vouchers</li>
+              <li>DNI original y copia</li>
+              <li>Solicitud de Preinscripción impresa</li>
+              <li>Certificado de estudios original y copia</li>
+            </ul>
+          </a-collapse-panel>
+
+          <a-collapse-panel key="9" header="09. ¿Los postulantes con discapacidad hacen cola?">
+            No. Deben presentar su Certificado de Discapacidad y se les brindará atención preferencial.
+          </a-collapse-panel>
+
         </a-collapse>
+
       </div>
 
     </div>
   </section>
 </template>
 
-<script setup>
-import { ref } from 'vue'
-
-const activeFaqKeys = ref([])
-
-const faqs = [
-  {
-    pregunta: '¿Puedo postular con DNI caducado?',
-    respuesta: 'No, su DNI debe estar vigente al momento de la inscripcion. En su defecto, puede presentar la Hoja C4 o el ticket de tramite acompañado de una copia del DNI.',
-  },
-  {
-    pregunta: '¿Que requisitos debo presentar si postulo como persona con discapacidad?',
-    respuesta: 'Certificado de Discapacidad emitido por entidades de salud acreditadas en el RENIPRESS. Este debe ser adjuntado junto a los demas requisitos.',
-  },
-  {
-    pregunta: '¿Que hago si ingreso mal mis datos en la preinscripcion?',
-    respuesta: 'No es posible modificarlos en linea una vez guardados. Debe acercarse al local de inscripcion y solicitar ayuda en la oficina de soporte tecnico.',
-  },
-  {
-    pregunta: '¿Cuales son los codigos para realizar los pagos?',
-    respuesta: '<p><strong>Codigo 26:</strong> Derechos de Admision.</p><p><strong>Codigo 27:</strong> Rezagados al proceso de inscripcion.</p><p><strong>Codigo 28:</strong> Carpeta de postulante.</p>',
-  },
-  {
-    pregunta: '¿Como debo realizar la preinscripcion e inscripcion?',
-    respuesta: 'Ingrese a <a href="https://admision.unap.edu.pe" target="_blank" rel="noopener noreferrer" class="faq-link">admision.unap.edu.pe</a> para la preinscripcion. La inscripcion presencial se realiza segun el ultimo digito del DNI, segun el cronograma oficial.',
-  },
-  {
-    pregunta: '¿Que requisitos debo presentar si postulo a Medicina Humana o Educacion Fisica?',
-    respuesta: 'Constancia de evaluacion medica emitida por un establecimiento de salud primario, ademas de los demas requisitos exigidos.',
-  },
-  {
-    pregunta: '¿Puedo cambiar de programa de estudio luego de inscribirme?',
-    respuesta: 'Si. Tras obtener su constancia de inscripcion, debe realizar un pago de S/.100 (Codigo 27) en caja de la Universidad o Banco de la Nacion, incluyendo comision.',
-  },
-  {
-    pregunta: '¿Que debo traer para inscribirme presencialmente?',
-    respuesta: '<ul><li>Comprobantes de pago o vouchers</li><li>DNI original y copia</li><li>Solicitud de Preinscripcion impresa (descargada de la web)</li><li>Certificado de estudios original y copia</li></ul>',
-  },
-  {
-    pregunta: '¿Los postulantes con discapacidad hacen cola?',
-    respuesta: 'No. Deben presentar su Certificado de Discapacidad y se les brindara atencion preferencial.',
-  },
-]
-</script>
-
 <style scoped>
-.contact-section {
-  padding: 60px 0 40px;
-  font-family: "Lora", serif;
+
+.process-section {
+  padding: 30px 0;
+  background: #ffffff;
+  font-family: "Times New Roman", Times, serif;
 }
 
 .section-container {
-  max-width: 1200px;
+  max-width: 1100px;
   margin: 0 auto;
-  padding: 0 24px;
-}
-
-/* ── FAQ ── */
-.faq-block {
-  margin-bottom: 0;
+  padding: 0 20px;
 }
 
 .section-header {
   text-align: center;
-  margin-bottom: 48px;
+  margin-bottom: 18px;
 }
 
 .section-title {
-  font-size: 2.5rem;
+  font-size: 2.1rem;
   font-weight: 700;
-  color: #0d1b52;
-  margin: 0 0 12px;
+  color: #2c3e50;
+  margin: 0 0 6px 0;
 }
 
 .section-subtitle {
-  font-size: 1.125rem;
-  color: #666;
-  max-width: 540px;
-  margin: 0 auto;
-}
-
-.faq-collapse {
-  background: transparent;
+  font-size: 1rem;
+  color: #777;
+  margin: 0;
 }
 
-.faq-panel {
+.process-card {
+  border: 1px solid #e5e7eb;
+  border-radius: 14px;
+  padding: 20px 18px;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
   background: #fff;
-  border: 1px solid #e8ecf4 !important;
-  border-radius: 14px !important;
-  margin-bottom: 14px;
-  overflow: hidden;
-  transition: box-shadow 0.25s ease;
-}
-
-.faq-panel:hover {
-  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
 }
 
-.faq-panel :deep(.ant-collapse-header) {
-  padding: 20px 24px !important;
-  align-items: center !important;
-}
-
-.faq-panel :deep(.ant-collapse-content-box) {
-  padding: 0 24px 22px 24px !important;
-}
-
-.faq-header {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-}
-
-.faq-number {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  border-radius: 10px;
-  background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
-  color: #fff;
-  font-size: 0.8rem;
-  font-weight: 700;
-  flex-shrink: 0;
-}
 
-.faq-question {
-  font-weight: 600;
-  color: #1a237e;
-  font-size: 1rem;
-  line-height: 1.4;
+.illustration-box {
+  text-align: center;
+  margin-bottom: 20px;
 }
 
-.faq-answer {
-  color: #555;
-  font-size: 0.975rem;
-  line-height: 1.75;
-  padding-left: 50px;
+.illustration-img {
+  width: 160px;
+  margin-bottom: 8px;
 }
 
-.faq-answer :deep(ul) {
-  padding-left: 20px;
-  margin: 0;
+.illustration-text {
+  font-size: 0.9rem;
+  color: #6b7280;
 }
 
-.faq-answer :deep(ul li) {
-  margin-bottom: 4px;
-}
-
-.faq-answer :deep(p) {
-  margin: 0 0 4px;
+.modern-collapse {
+  background: transparent;
 }
 
-.faq-answer :deep(.faq-link) {
-  color: #1890ff;
-  text-decoration: underline;
+.modern-collapse :deep(.ant-collapse-item) {
+  border-radius: 10px !important;
+  margin-bottom: 10px;
+  background: #f8fafc;
+  border: 1px solid #e5e7eb;
 }
 
-.faq-answer :deep(.faq-link:hover) {
-  color: #0d1b52;
+.modern-collapse :deep(.ant-collapse-header) {
+  font-weight: 700;
+  color: #1e3a8a;
 }
 
-@media (max-width: 992px) {
-  .section-title {
-    font-size: 2rem;
-  }
-
-  .faq-answer {
-    padding-left: 0;
-  }
+.modern-collapse :deep(.ant-collapse-content) {
+  background: #ffffff;
+  border-top: 1px solid #eef2f7;
 }
 
 @media (max-width: 768px) {
-  .contact-section {
-    padding: 40px 0 30px;
-  }
-
-  .faq-panel :deep(.ant-collapse-header) {
-    padding: 16px 18px !important;
+  .section-title {
+    font-size: 1.6rem;
   }
 
-  .faq-number {
-    width: 32px;
-    height: 32px;
-    font-size: 0.75rem;
+  .process-card {
+    padding: 14px 12px;
   }
 
-  .faq-question {
-    font-size: 0.925rem;
+  .illustration-img {
+    width: 120px;
   }
 }
 </style>
diff --git a/front/src/components/WebPageSections/ConvocatoriasSection.vue b/front/src/components/WebPageSections/ConvocatoriasSection.vue
index f94240e..efb442a 100644
--- a/front/src/components/WebPageSections/ConvocatoriasSection.vue
+++ b/front/src/components/WebPageSections/ConvocatoriasSection.vue
@@ -1,4 +1,4 @@
-<!-- components/convocatorias/ConvocatoriasSection.vue -->
+<!-- src/components/convocatorias/ConvocatoriasSection.vue -->
 <template>
   <section id="convocatorias" class="convocatorias-modern">
     <div class="section-container">
@@ -12,57 +12,88 @@
         </p>
       </div>
 
-      <!-- Sin procesos publicados -->
-      <div v-if="procesos.length === 0" class="empty-state">
-        <p>No hay convocatorias vigentes en este momento.</p>
-      </div>
+      <a-skeleton v-if="store.loading" active :paragraph="{ rows: 8 }" />
 
       <div v-else class="convocatorias-grid">
-        <!-- Card principal: primer proceso -->
-        <a-card class="main-convocatoria-card">
+        <a-card v-if="store.procesoPrincipal" class="main-convocatoria-card">
           <div class="card-badge">Principal</div>
 
           <div class="main-card-grid">
             <div class="main-card-text">
               <div class="convocatoria-header">
                 <div>
-                  <h3>{{ principal.titulo }}</h3>
+                  <h3>{{ store.procesoPrincipal.titulo }}</h3>
+                      <a-divider class="custom-divider" />
+                                    <p class="convocatoria-date">
+                    PreInscripciones:
+                    {{ formatFecha(store.procesoPrincipal.fecha_inicio_preinscripcion) }}
+                    -
+                    {{ formatFecha(store.procesoPrincipal.fecha_fin_inscripcion) }}
+                  </p>
                   <p class="convocatoria-date">
-                    {{ formatFechasInscripcion(principal) }}
+                    Inscripciones:
+                    {{ formatFecha(store.procesoPrincipal.fecha_inicio_inscripcion) }}
+                    -
+                    {{ formatFecha(store.procesoPrincipal.fecha_fin_inscripcion) }}
+                  </p>
+                                    <p class="convocatoria-date">
+                    Examen:
+                    {{ formatFecha(store.procesoPrincipal.fecha_examen1) }}
+
                   </p>
                 </div>
 
-                <a-tag :color="getEstadoColor(principal.estado)" class="status-tag">
-                  {{ getEstadoLabel(principal.estado) }}
+                <a-tag color="success" class="status-tag">
+                  {{ store.procesoPrincipal.estado }}
                 </a-tag>
               </div>
 
               <p class="convocatoria-desc">
-                {{ principal.descripcion || principal.subtitulo || 'Proceso de admisión' }}
+                {{ store.procesoPrincipal.descripcion }}
               </p>
 
               <a-divider class="custom-divider" />
 
-              <div class="quick-actions">
+              <!-- ACCIONES RAPIDAS -->
+              <div
+                v-if="store.procesoPrincipal?.detalles?.length"
+                class="quick-actions"
+              >
                 <h4 class="subheading">Acciones Rápidas</h4>
 
                 <div class="action-buttons-grid">
-                  <a-button class="action-btn" @click="$emit('show-modal', { procesoId: principal.id, tipo: 'requisitos' })">
+                  <a-button
+                    v-if="tieneTipo('requisitos')"
+                    class="action-btn"
+                    @click="abrirPorTipo('requisitos')"
+                  >
                     <template #icon><FileTextOutlined /></template>
                     Requisitos
                   </a-button>
 
-                  <a-button class="action-btn" @click="$emit('show-modal', { procesoId: principal.id, tipo: 'pagos' })">
+                  <a-button
+                    v-if="tieneTipo('pagos')"
+                    class="action-btn"
+                    @click="abrirPorTipo('pagos')"
+                  >
                     <template #icon><DollarOutlined /></template>
                     Pagos
                   </a-button>
 
-                  <a-button class="action-btn" @click="$emit('show-modal', { procesoId: principal.id, tipo: 'vacantes' })">
+                  <a-button
+                    v-if="tieneTipo('vacantes')"
+                    class="action-btn"
+                    @click="abrirPorTipo('vacantes')"
+                  >
                     <template #icon><TeamOutlined /></template>
                     Vacantes
                   </a-button>
 
-                  <a-button class="action-btn" @click="$emit('show-modal', { procesoId: principal.id, tipo: 'cronograma' })">
+                  <a-button
+                    v-if="tieneTipo('cronograma')"
+                    class="action-btn"
+                    @click="abrirPorTipo('cronograma')"
+                  >
                     <template #icon><CalendarOutlined /></template>
                     Cronograma
                   </a-button>
@@ -71,17 +102,19 @@
 
               <a-divider class="custom-divider" />
 
-              <div class="preinscripcion-section">
-                <div class="preinscripcion-info">
-                  <h4 class="subheading">Preinscripción en Línea</h4>
-                  <p>Completa tu preinscripción de manera digital y segura</p>
-                </div>
+            <div class="preinscripcion-section">
+              <div class="preinscripcion-info">
+                <h4 class="subheading">Preinscripción en Línea</h4>
+                <p>Completa tu preinscripción de manera virtual y segura</p>
+              </div>
 
+
+              <div v-if="store.procesoPrincipal?.link_preinscripcion" class="preinscripcion-btn-wrap">
                 <a-button
                   type="primary"
                   size="large"
-                  class="preinscripcion-btn"
-                  @click="abrirPreinscripcion(principal)"
+                  :href="store.procesoPrincipal.link_preinscripcion"
+                  target="_blank"
                 >
                   <template #icon><FormOutlined /></template>
                   Iniciar Preinscripción
@@ -89,6 +122,9 @@
               </div>
             </div>
 
+
+            </div>
+
             <div class="main-card-media">
               <a-image
                 :src="principal.imagen_url || '/images/extra.jpg'"
@@ -100,45 +136,97 @@
           </div>
         </a-card>
 
-        <!-- Cards secundarias: resto de procesos -->
-        <div v-if="secundarios.length > 0" class="secondary-list">
-          <a-card
-            v-for="proceso in secundarios"
-            :key="proceso.id"
-            class="secondary-convocatoria-card"
-          >
+        <div class="secondary-list">
+
+            <a-card class="secondary-convocatoria-card">
             <div class="convocatoria-header">
               <div>
-                <h4 class="secondary-title">{{ proceso.titulo }}</h4>
-                <p class="convocatoria-date">{{ formatFechasInscripcion(proceso) }}</p>
+                <h4 class="secondary-title">Extraordinario</h4>
+                <p class="convocatoria-date">30 de enero</p>
               </div>
 
-              <a-tag class="status-tag" :color="getEstadoColor(proceso.estado)">
-                {{ getEstadoLabel(proceso.estado) }}
-              </a-tag>
+              <a-tag class="status-tag" color="orange">Finalizado</a-tag>
             </div>
 
             <p class="convocatoria-desc">
-              {{ proceso.descripcion || proceso.subtitulo || 'Proceso de admisión' }}
+              Modalidad extraordinaria para perfiles específicos
             </p>
 
-            <div class="card-footer">
-              <a-button type="link" size="small" @click="$emit('show-modal', { procesoId: proceso.id, tipo: 'requisitos' })">
+            <!-- <div class="card-footer">
+              <a-button
+                type="link"
+                size="small"
+                @click="emit('show-modal', 'extraordinario')"
+              >
                 Ver detalles
               </a-button>
-              <a-button type="primary" ghost size="small" @click="abrirPreinscripcion(proceso)">
-                Consultar
-              </a-button>
+              <a-button type="primary" ghost size="small">Consultar</a-button>
+            </div> -->
+          </a-card>
+          <a-card class="secondary-convocatoria-card">
+            <div class="convocatoria-header">
+              <div>
+                <h4 class="secondary-title">CEPREUNA</h4>
+                <p class="convocatoria-date">10 y 11 de enero</p>
+              </div>
+
+              <a-tag class="status-tag" color="orange">Finalizado</a-tag>
             </div>
+
+            <p class="convocatoria-desc">Postulantes del CEPREUNA</p>
+
+            <!-- <div class="card-footer">
+              <a-button type="link" size="small" @click="emit('show-modal', 'cepreuna')">
+                Ver detalles
+              </a-button>
+              <a-button type="primary" ghost size="small">Consultar</a-button>
+            </div> -->
           </a-card>
+
+
         </div>
       </div>
     </div>
   </section>
+
+    <a-modal
+      v-model:open="modalVisible"
+      :title="tituloModal"
+      width="400px"
+      centered
+      @ok="modalVisible = false"
+      @cancel="modalVisible = false"
+    >
+    <div
+      v-for="detalle in detallesSeleccionados"
+      :key="detalle.id"
+      style="margin-bottom: 25px"
+    >
+
+      <p v-if="detalle.descripcion">
+        {{ detalle.descripcion }}
+      </p>
+
+      <ul v-if="detalle.listas?.length">
+        <li v-for="(item, i) in detalle.listas" :key="i">
+          {{ item }}
+        </li>
+      </ul>
+
+<a-image
+  v-if="detalle.imagen_url"
+  :src="detalle.imagen_url"
+  :preview="true"
+  class="detalle-img"
+/>
+    </div>
+  </a-modal>
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { onMounted, ref } from "vue"
+import { useWebAdmisionStore } from "../../store/web"
+
 import {
   FileTextOutlined,
   DollarOutlined,
@@ -147,63 +235,48 @@ import {
   FormOutlined,
 } from "@ant-design/icons-vue"
 
-const props = defineProps({
-  procesos: {
-    type: Array,
-    default: () => [],
-  },
-})
+const store = useWebAdmisionStore()
 
 defineEmits(["show-modal"])
 
 const principal = computed(() => props.procesos[0] || {})
 const secundarios = computed(() => props.procesos.slice(1))
 
-const estadoMap = {
-  publicado: { label: 'Abierto', color: 'success' },
-  en_proceso: { label: 'En Proceso', color: 'processing' },
-  nuevo: { label: 'PRÓXIMAMENTE', color: 'orange' },
-  finalizado: { label: 'FINALIZADO', color: 'default' },
-  cancelado: { label: 'CANCELADO', color: 'red' },
-}
+const modalVisible = ref(false)
+const detallesSeleccionados = ref([])
+const tituloModal = ref("")
+
+onMounted(() => {
+  store.cargarProcesos()
+})
 
-function getEstadoLabel(estado) {
-  return estadoMap[estado]?.label || estado || 'Abierto'
+const formatFecha = (fecha) => {
+  if (!fecha) return ""
+  return new Date(fecha).toLocaleDateString("es-PE", {
+    day: "2-digit",
+    month: "short",
+    year: "numeric",
+  })
 }
 
-function getEstadoColor(estado) {
-  return estadoMap[estado]?.color || 'success'
+const tieneTipo = (tipo) => {
+  return store.procesoPrincipal?.detalles?.some((d) => d.tipo === tipo)
 }
 
-function formatFechasInscripcion(proceso) {
-  if (!proceso.fecha_inicio_inscripcion && !proceso.fecha_fin_inscripcion) {
-    return ''
-  }
-  const opts = { day: 'numeric', month: 'short' }
-  const inicio = proceso.fecha_inicio_inscripcion
-    ? new Date(proceso.fecha_inicio_inscripcion).toLocaleDateString('es-PE', opts)
-    : ''
-  const fin = proceso.fecha_fin_inscripcion
-    ? new Date(proceso.fecha_fin_inscripcion).toLocaleDateString('es-PE', opts)
-    : ''
-  if (inicio && fin) return `Inscripciones: ${inicio} - ${fin}`
-  if (inicio) return `Inicio: ${inicio}`
-  return `Hasta: ${fin}`
-}
-
-function abrirPreinscripcion(proceso) {
-  if (proceso.link_preinscripcion) {
-    window.open(proceso.link_preinscripcion, '_blank', 'noopener,noreferrer')
-  }
+const abrirPorTipo = (tipo) => {
+  detallesSeleccionados.value =
+    store.procesoPrincipal?.detalles?.filter((d) => d.tipo === tipo) ?? []
+
+  tituloModal.value = tipo.charAt(0).toUpperCase() + tipo.slice(1)
+  modalVisible.value = true
 }
 </script>
 
 <style scoped>
-
 .convocatorias-modern {
   position: relative;
   padding: 40px 0;
-  font-family: "Lora", serif;
+  font-family: "Times New Roman", Times, serif;
   background: #fbfcff;
   overflow: hidden;
 }
@@ -215,8 +288,7 @@ function abrirPreinscripcion(proceso) {
   pointer-events: none;
   z-index: 0;
 
-  background-image:
-    repeating-linear-gradient(
+  background-image: repeating-linear-gradient(
       to right,
       rgba(13, 27, 82, 0.06) 0,
       rgba(13, 27, 82, 0.06) 1px,
@@ -233,7 +305,13 @@ function abrirPreinscripcion(proceso) {
 
   opacity: 0.55;
 }
-
+.detalle-img :deep(img) {
+  width: 100%;
+  max-width: 720px;
+  max-height: 420px;
+  object-fit: contain;
+  border-radius: 12px;
+}
 .section-container {
   position: relative;
   z-index: 1;
@@ -396,10 +474,17 @@ function abrirPreinscripcion(proceso) {
 }
 
 .preinscripcion-section {
+  display: grid;
+  gap: 10px;
+  padding: 14px 12px;
+  border-radius: 12px;
+  background: rgba(24, 144, 255, 0.05);
+  border: 1px solid rgba(24, 144, 255, 0.18);
+}
+.preinscripcion-btn-wrap {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 18px;
+  justify-content: center;
+  margin-top: 6px;
 }
 
 .preinscripcion-info p {
@@ -407,14 +492,33 @@ function abrirPreinscripcion(proceso) {
   color: #666;
 }
 
-.preinscripcion-btn {
-  background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
-  border: none;
-  height: 52px;
-  font-weight: 700;
+.preinscripcion-btn-wrap {
+  display: flex;
+  justify-content: center;
+  margin-top: 6px;
+}
+
+.preinscripcion-btn-light {
+  height: 46px;
+  padding: 0 18px;
   border-radius: 12px;
+  font-weight: 700;
+
+  background: #ffffff;
+  border: 1px solid rgba(24, 144, 255, 0.35);
+  color: #1890ff;
+
+  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
+  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
 }
 
+.preinscripcion-btn-light:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.10);
+  border-color: rgba(24, 144, 255, 0.55);
+}
+
+
 .secondary-list {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
diff --git a/front/src/components/WebPageSections/HeroSection.vue b/front/src/components/WebPageSections/HeroSection.vue
index 06e386d..25621ea 100644
--- a/front/src/components/WebPageSections/HeroSection.vue
+++ b/front/src/components/WebPageSections/HeroSection.vue
@@ -1,12 +1,11 @@
 <!-- components/hero/HeroSection.vue -->
 <template>
-  <section class="hero" aria-label="Sección principal de admisión">
-
-    <div class="hero-bg" aria-hidden="true">
-      <div class="hero-grid"></div>
-      <div class="hero-shape hero-shape-1"></div>
-      <div class="hero-shape hero-shape-2"></div>
-    </div>
+  <section
+    class="hero"
+    :style="{ backgroundImage: `url(${heroImg})` }"
+    aria-label="Sección principal de admisión"
+  >
+    <div class="hero-overlay"></div>
 
     <div class="hero-container">
 
@@ -18,14 +17,18 @@
             Inscripciones abiertas
           </span>
         </div>
+        <div class="glass-cardtitle">
+          <h1 class="hero-title">
+            Admisión <span class="hero-year">2026</span>
+          </h1>
+        </div>
 
-        <h1 class="hero-title">
-          Admisión <span class="hero-year">2026</span>
-        </h1>
 
         <p class="hero-subtitle">
           Forma parte de una comunidad académica de excelencia.
-          <span class="hero-subtitle-muted">Postula, infórmate y conoce el proceso.</span>
+          <span class="hero-subtitle-muted">
+            Postula, infórmate y conoce el proceso.
+          </span>
         </p>
 
         <div class="hero-actions">
@@ -39,78 +42,48 @@
             Postular ahora
           </a-button>
 
-          <a-button size="large" class="secondary-button" @click="$emit('virtual-tour')">
-            <template #icon><PlayCircleOutlined /></template>
-            Tour virtual
-          </a-button>
-        </div>
-
-        <div class="hero-metrics">
-          <div class="metric">
-            <span class="metric-value">44</span>
-            <span class="metric-label">Programas</span>
-          </div>
-          <div class="metric">
-            <span class="metric-value">3</span>
-            <span class="metric-label">Áreas</span>
-          </div>
-          <div class="metric">
-            <span class="metric-value">+10</span>
-            <span class="metric-label">Sedes</span>
-          </div>
         </div>
       </div>
 
-      <!-- Visual -->
-      <div class="hero-visual">
-        <div class="visual-stack">
-          <div class="floating-card">
-            <div class="card-header">
-              <CalendarOutlined />
-              <span>Próximo evento</span>
-            </div>
-
-            <h3 class="card-title">Charla informativa</h3>
-
-            <div class="card-info">
-              <span class="info-item">
-                <ClockCircleOutlined />
-                25 Nov • 4:00 PM
-              </span>
-              <span class="info-item">
-                <VideoCameraOutlined />
-                Virtual
-              </span>
-            </div>
-
-            <a-button type="primary" ghost class="card-cta" size="middle">
-              Registrarse
-            </a-button>
+      <!-- CARD -->
+      <!-- <div class="hero-visual">
+        <div class="glass-card">
+          <div class="card-header">
+            <CalendarOutlined />
+            <span>Próximo evento</span>
           </div>
 
-          <div class="mini-card" aria-hidden="true">
-            <span class="mini-dot"></span>
-            <div class="mini-text">
-              <div class="mini-title">Guía del postulante</div>
-              <div class="mini-sub">Requisitos y fechas</div>
-            </div>
-            <ArrowRightOutlined class="mini-icon" />
-          </div>
+          <h3>Charla informativa</h3>
+
+          <p class="card-date">
+            <ClockCircleOutlined />
+            25 Nov • 4:00 PM • Virtual
+          </p>
+
+          <a-button
+            size="large"
+            class="secondary-button"
+            @click="$emit('virtual-tour')"
+          >
+            <template #icon><PlayCircleOutlined /></template>
+            Tour virtual
+          </a-button>
         </div>
-      </div>
+      </div> -->
+
     </div>
   </section>
 </template>
 
 <script setup>
+const heroImg = "/PORTADA.jpg.jpeg";
+
 import {
   RightCircleOutlined,
   PlayCircleOutlined,
   CalendarOutlined,
   CheckCircleOutlined,
-  ClockCircleOutlined,
-  VideoCameraOutlined,
-  ArrowRightOutlined,
+  ClockCircleOutlined
 } from "@ant-design/icons-vue";
 
 defineEmits(["scroll-to-convocatoria", "virtual-tour"]);
@@ -124,340 +97,153 @@ defineEmits(["scroll-to-convocatoria", "virtual-tour"]);
 }
 
 .hero {
-  --inst-primary: #1a237e;   /* AZUL institucional (ejemplo) */
-  --inst-secondary: #0f172a; /* oscuro de apoyo */
-  --inst-accent: #c8a100;    /* dorado institucional (ejemplo) */
-
   position: relative;
+  padding: 110px 0;
+  color: white;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
   overflow: hidden;
-  color: #ffffff;
-  padding: 88px 0;
-  background: var(--inst-primary); /* SIN DEGRADADOS */
-}
-
-/* Fondo decorativo sutil (sin degradados) */
-.hero-bg {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-}
-
-/* Patrón de líneas muy suave */
-.hero-grid {
-  position: absolute;
-  inset: 0;
-  opacity: 0.10;
-  background-image: linear-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(255, 255, 255, 0.14) 1px, transparent 1px);
-  background-size: 52px 52px;
+    --text: rgba(245, 247, 255, 0.92);   
+  --muted: rgba(229, 235, 255, 0.72); 
 }
-
-
-.hero-shape {
-  position: absolute;
-  border-radius: 999px;
-  opacity: 0.16;
-  background: #ffffff; 
-}
-
-.hero-shape-1 {
-  width: 460px;
-  height: 460px;
-  left: -220px;
-  top: -240px;
-}
-
-.hero-shape-2 {
-  width: 560px;
-  height: 560px;
-  right: -260px;
-  bottom: -320px;
-}
-
 .hero-container {
   position: relative;
+  z-index: 1;
   max-width: 1200px;
-  margin: 0 auto;
+  margin: auto;
   padding: 0 24px;
   display: grid;
-  grid-template-columns: 1.1fr 0.9fr;
-  gap: 72px;
+  grid-template-columns: 1.2fr 0.8fr;
   align-items: center;
+  gap: 60px;
 }
 
-
+/* BADGES */
 .hero-badges {
   display: flex;
-  align-items: center;
   gap: 12px;
+  margin-bottom: 20px;
   flex-wrap: wrap;
-  margin-bottom: 22px;
 }
 
 .hero-tag {
+  background: rgba(255, 255, 255, 0.15);
   border: 1px solid rgba(255, 255, 255, 0.25);
-  color: #fff;
-  background: rgba(255, 255, 255, 0.12);
-  font-weight: 700;
+  color: rgb(255, 255, 255);
+  font-weight: bold;
 }
 
 .hero-pill {
-  display: inline-flex;
+  display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
+  background: rgba(255, 255, 255, 0.12);
   padding: 6px 12px;
   border-radius: 999px;
-  border: 1px solid rgba(255, 255, 255, 0.22);
-  background: rgba(0, 0, 0, 0.10);
-  font-size: 0.95rem;
-  font-weight: 700;
+  font-weight: bold;
 }
 
 .hero-title {
-  font-size: 3.4rem;
-  font-weight: 900;
-  line-height: 1.08;
-  margin: 0 0 18px;
-  letter-spacing: -0.01em;
+  font-size: 3.5rem;
+  font-weight: bold;
+  margin: 0 0 20px;
+    color: rgba(245, 247, 255, 0.96);
 }
 
 .hero-year {
-  color: var(--inst-accent);
-  position: relative;
-}
-
+  font-size: 2.8rem;
+  font-weight: 900;
+  line-height: 1;
 
-.hero-year::after {
-  content: "";
-  position: absolute;
-  left: 0;
-  bottom: -10px;
-  width: 100%;
-  height: 4px;
-  background: var(--inst-accent);
-  border-radius: 999px;
-  opacity: 0.9;
+  background: linear-gradient(45deg, #ffd700, #ff6b6b);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
 }
 
 .hero-subtitle {
-  font-size: 1.18rem;
-  opacity: 0.95;
-  margin: 0 0 32px;
-  line-height: 1.65;
-  max-width: 560px;
-  font-weight: 600;
-}
-
-.hero-subtitle-muted {
-  display: inline-block;
-  margin-left: 6px;
-  opacity: 0.9;
-  font-weight: 600;
+  font-size: 1.2rem;
+  max-width: 550px;
+  margin-bottom: 30px;
+  line-height: 1.6;
 }
 
+/* BOTONES */
 .hero-actions {
   display: flex;
-  gap: 14px;
+  gap: 15px;
   flex-wrap: wrap;
 }
 
 .cta-button {
-  border: 1px solid rgba(255, 255, 255, 0.22);
-  font-weight: 800;
-  border-radius: 12px;
-  background: var(--inst-accent);
-  color: var(--inst-secondary);
-}
-
-.cta-button:hover {
-  filter: brightness(1.02);
-  transform: translateY(-1px);
+  font-weight: bold;
+  border-radius: 8px;
 }
 
 .secondary-button {
   background: transparent;
-  border: 2px solid rgba(255, 255, 255, 0.28);
-  color: #fff;
-  border-radius: 12px;
-  font-weight: 800;
+  border: 2px solid rgba(255, 255, 255, 0.6);
+  color: white;
+  border-radius: 8px;
+  font-weight: bold;
 }
 
-.secondary-button:hover {
-  background: rgba(255, 255, 255, 0.08);
-}
-
-.hero-metrics {
-  margin-top: 28px;
-  display: flex;
-  gap: 14px;
-  flex-wrap: wrap;
-}
-
-.metric {
-  min-width: 120px;
-  padding: 12px 14px;
-  border-radius: 14px;
-  background: rgba(255, 255, 255, 0.10);
-  border: 1px solid rgba(255, 255, 255, 0.18);
-}
-
-.metric-value {
-  display: block;
-  font-size: 1.25rem;
-  font-weight: 900;
-  line-height: 1.1;
-  color: #fff;
-}
-
-.metric-label {
-  display: block;
-  opacity: 0.9;
-  font-size: 0.95rem;
-  margin-top: 2px;
-  font-weight: 700;
-}
-
-/* ====== VISUAL ====== */
+/* CARD */
 .hero-visual {
   display: flex;
   justify-content: flex-end;
 }
 
-.visual-stack {
-  width: min(420px, 100%);
-  display: grid;
-  gap: 14px;
-}
-
-.floating-card {
-  background: #ffffff;
-  color: #111827;
-  padding: 22px;
-  border-radius: 18px;
-  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
-  border: 1px solid rgba(17, 24, 39, 0.08);
-  transition: transform 0.25s ease, box-shadow 0.25s ease;
+.glass-card {
+  background: rgba(106, 136, 219, 0.55);
+  padding: 28px;
+  border-radius: 16px;
+  width: 100%;
+  max-width: 360px;
+  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
 }
-
-.floating-card:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.22);
+.glass-cardtitle {
+  background: rgba(190, 200, 228, 0.55);
+  padding: 12px 24px;
+  border-radius: 16px;
+  width: fit-content;   
+  max-width: 100%;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
 }
 
 .card-header {
   display: flex;
   align-items: center;
-  gap: 10px;
-  color: #6b7280;
-  margin-bottom: 14px;
-  font-weight: 800;
-}
-
-.card-title {
-  margin: 0 0 12px;
-  color: #111827;
-  font-weight: 900;
-}
-
-.card-info {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px 14px;
-  margin-bottom: 14px;
-  color: #374151;
-  font-weight: 700;
-}
-
-.info-item {
-  display: inline-flex;
-  align-items: center;
   gap: 8px;
-  font-size: 0.95rem;
-  font-weight: 800;
+  font-weight: bold;
 }
 
-.card-cta {
-  border-radius: 12px;
-  font-weight: 900;
-  border-color: var(--inst-primary);
-  color: var(--inst-primary);
-}
-
-.mini-card {
+.card-date {
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 14px 16px;
-  border-radius: 16px;
-  background: rgba(255, 255, 255, 0.10);
-  border: 1px solid rgba(255, 255, 255, 0.18);
-}
-
-.mini-dot {
-  width: 10px;
-  height: 10px;
-  border-radius: 999px;
-  background: var(--inst-accent);
-  box-shadow: 0 0 0 6px rgba(200, 161, 0, 0.18);
-}
-
-.mini-title {
-  font-weight: 900;
-  line-height: 1.1;
-}
-
-.mini-sub {
-  opacity: 0.9;
-  font-size: 0.95rem;
-  margin-top: 2px;
-  font-weight: 700;
+  gap: 6px;
+  margin-bottom: 20px;
 }
 
-.mini-icon {
-  opacity: 0.9;
-}
-
-/* ====== Responsive ====== */
+/* RESPONSIVE */
 @media (max-width: 992px) {
-  .hero {
-    padding: 72px 0;
-  }
-
   .hero-container {
     grid-template-columns: 1fr;
     text-align: center;
-    gap: 40px;
-  }
-
-  .hero-subtitle {
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  .hero-actions {
-    justify-content: center;
   }
 
   .hero-visual {
     justify-content: center;
+    margin-top: 40px;
   }
 
   .hero-title {
-    font-size: 2.7rem;
+    font-size: 2.4rem;
   }
 
-  .hero-metrics {
+  .hero-actions {
     justify-content: center;
   }
 }
-
-@media (max-width: 768px) {
-  .hero-title {
-    font-size: 2.15rem;
-  }
-
-  .metric {
-    min-width: 110px;
-  }
-}
-</style>
\ No newline at end of file
+</style>
diff --git a/front/src/components/WebPageSections/NoticiasSection.vue b/front/src/components/WebPageSections/NoticiasSection.vue
index a540a9d..ce76beb 100644
--- a/front/src/components/WebPageSections/NoticiasSection.vue
+++ b/front/src/components/WebPageSections/NoticiasSection.vue
@@ -1,7 +1,8 @@
+<!-- src/components/web/NewsSection.vue -->
 <template>
   <section class="news-section">
     <div class="container">
-      <!-- Header -->
+      <!-- Header centrado -->
       <div class="header">
         <div class="header-left">
           <a-typography-title :level="2" class="title">
@@ -12,89 +13,259 @@
             Entérate de los anuncios, resultados y novedades institucionales
           </a-typography-paragraph>
         </div>
-
-
       </div>
 
       <a-divider class="divider" />
 
       <!-- Grid -->
-      <a-row :gutter="[24, 24]">
-        <a-col
-          v-for="noticia in noticias"
-          :key="noticia.id"
-          :xs="24"
-          :sm="12"
-          :lg="8"
-        >
-
-          <a-badge-ribbon
-            :text="noticia.categoria"
-            :color="noticia.tagColor || 'blue'"
+      <div v-if="mappedNoticias.length">
+        <a-row :gutter="[24, 24]">
+          <a-col
+            v-for="noticia in mappedNoticias"
+            :key="noticia.id"
+            :xs="24"
+            :sm="12"
+            :lg="8"
           >
-            <a-card hoverable class="card" :bodyStyle="{ padding: '16px' }">
-              <!-- Cover -->
-              <template #cover>
-                <div
-                  class="cover"
-                  :style="{ backgroundImage: `url(${noticia.imagen})` }"
-                >
-                  <div class="cover-overlay" />
-
-                  <div class="date-pill">
+            <a-badge-ribbon
+              :text="noticia.categoria || 'Noticia'"
+              :color="noticia.tagColor"
+            >
+   
+              <a-card
+                hoverable
+                class="card"
+                :bodyStyle="{ padding: '16px' }"
+                @click="openModal(noticia)"
+              >
+    
+                <template v-if="noticia.imagen" #cover>
+                  <div
+                    class="cover"
+                    :style="{ backgroundImage: `url(${noticia.imagen})` }"
+                  >
+                    <div class="cover-overlay" />
+                    <div class="date-pill">
+                      <CalendarOutlined />
+                      <span>{{ noticia.fecha }}</span>
+                    </div>
+                  </div>
+                </template>
+
+                <a-space direction="vertical" size="small" class="content">
+                  <div v-if="!noticia.imagen" class="date-inline">
                     <CalendarOutlined />
                     <span>{{ noticia.fecha }}</span>
                   </div>
-                </div>
-              </template>
-
-              <a-space direction="vertical" size="small" class="content">
-                <a-typography-title
-                  :level="4"
-                  class="card-title"
-                  :content="noticia.titulo"
-                  :ellipsis="{ rows: 2, tooltip: noticia.titulo }"
-                />
-
-                <a-typography-paragraph
-                  class="desc"
-                  :content="noticia.descripcion"
-                  :ellipsis="{ rows: 3, tooltip: noticia.descripcion }"
-                />
-
-
-                <div class="actions">
-                  <a-button type="link" class="read-more">
-                    Leer más
-                    <ArrowRightOutlined />
-                  </a-button>
-
-                  <!-- Tag secundario opcional (si quieres mostrar algo extra)
-                  <a-tag color="default" class="tag-soft">Institucional</a-tag>
-                  -->
-                </div>
-              </a-space>
-            </a-card>
-          </a-badge-ribbon>
-        </a-col>
-      </a-row>
+
+                  <a-typography-title
+                    :level="4"
+                    class="card-title"
+                    :content="noticia.titulo"
+                    :ellipsis="{ rows: 2, tooltip: noticia.titulo }"
+                  />
+
+                  <a-typography-paragraph
+                    class="desc"
+                    :content="noticia.descripcion"
+                    :ellipsis="{ rows: 3, tooltip: noticia.descripcion }"
+                  />
+
+                  <div class="actions">
+          
+                    <a-button
+                      type="link"
+                      class="read-more"
+                      @click.stop="openModal(noticia)"
+                    >
+                      Leer más
+                      <ArrowRightOutlined />
+                    </a-button>
+
+                    <a-tag v-if="noticia.destacado" color="gold" class="tag-soft">
+                      Destacado
+                    </a-tag>
+                  </div>
+                </a-space>
+              </a-card>
+            </a-badge-ribbon>
+          </a-col>
+        </a-row>
+      </div>
+
+  
+      <a-modal
+        v-model:open="modalOpen"
+        :title="modalTitle"
+        :footer="null"
+        :width="860"
+        destroyOnClose
+        @afterClose="onAfterClose"
+      >
+        <div v-if="noticiasStore.loadingOne" style="padding: 8px 0">
+          <a-skeleton active :paragraph="{ rows: 6 }" />
+        </div>
+
+        <a-alert
+          v-else-if="noticiasStore.error"
+          type="error"
+          show-icon
+          :message="noticiasStore.error"
+        />
+
+        <div v-else>
+          <div v-if="modalImage" class="modal-cover">
+            <img :src="modalImage" alt="Imagen de noticia" />
+          </div>
+
+          <div class="modal-meta">
+            <a-tag :color="modalTagColor">{{ modalCategoria }}</a-tag>
+            <span class="modal-date">
+              <CalendarOutlined />
+              {{ modalFecha }}
+            </span>
+          </div>
+
+          <a-typography-paragraph v-if="modalDescripcion" class="modal-desc">
+            {{ modalDescripcion }}
+          </a-typography-paragraph>
+
+          <div v-if="modalContenido" class="modal-content" v-html="modalContenido" />
+
+          <a-empty v-else description="No hay contenido disponible para esta noticia." />
+          <div v-if="modalLinkUrl" class="modal-link">
+            <a-button
+              type="primary"
+              :href="modalLinkUrl"
+              target="_blank"
+              rel="noopener"
+            >
+              {{ modalLinkTexto }}
+            </a-button>
+          </div>
+        </div>
+      </a-modal>
     </div>
   </section>
 </template>
 
 <script setup>
-import { CalendarOutlined, RightOutlined, ArrowRightOutlined } from "@ant-design/icons-vue"
+import { computed, onMounted, ref } from "vue"
+import { CalendarOutlined, ArrowRightOutlined } from "@ant-design/icons-vue"
+import { useNoticiasPublicasStore } from "../../store/noticiasPublicas.store"
+
+const noticiasStore = useNoticiasPublicasStore()
+
+onMounted(() => {
+  if (!noticiasStore.noticias.length) noticiasStore.fetchNoticias()
+})
+
+const mappedNoticias = computed(() => {
+  return (noticiasStore.noticias ?? []).map((n) => {
+    const titulo = n.titulo ?? "Sin título"
+    const descripcion = n.descripcion_corta ?? n.descripcion ?? "Sin descripción"
+
+    const imagen = n.imagen_url ?? null
+
+    return {
+      id: n.id,
+      slug: n.slug,
+      titulo,
+      descripcion,
+      imagen,
+      fecha: formatFecha(n.fecha_publicacion),
+      categoria: n.categoria,
+      tagColor: normalizeTagColor(n.tag_color),
+      destacado: !!n.destacado,
+      raw: n,
+    }
+  })
+})
+
+const modalOpen = ref(false)
+const selectedNoticia = ref(null)
+
+const modalTitle = computed(() => selectedNoticia.value?.titulo ?? "Detalle de noticia")
+const detail = computed(() => noticiasStore.noticiaActual)
+
+const modalImage = computed(() => {
+  const d = detail.value
+  return d?.imagen_url ?? selectedNoticia.value?.imagen ?? null
+})
+
+const modalFecha = computed(() => {
+  const d = detail.value
+  return formatFecha(d?.fecha_publicacion ?? selectedNoticia.value?.raw?.fecha_publicacion)
+})
+
+const modalCategoria = computed(() => {
+  return detail.value?.categoria ?? selectedNoticia.value?.categoria ?? "General"
+})
+
+const modalTagColor = computed(() => {
+  return normalizeTagColor(detail.value?.tag_color ?? selectedNoticia.value?.raw?.tag_color)
+})
 
-defineProps({
-  noticias: {
-    type: Array,
-    default: () => [],
-  },
+const modalDescripcion = computed(() => {
+  const d = detail.value
+  return d?.descripcion_corta ?? selectedNoticia.value?.descripcion ?? ""
 })
+
+const modalContenido = computed(() => {
+  return detail.value?.contenido ?? ""
+})
+
+const modalLinkUrl = computed(() => detail.value?.link_url ?? null)
+const modalLinkTexto = computed(() => detail.value?.link_texto ?? "Leer más")
+
+const openModal = async (noticia) => {
+  selectedNoticia.value = noticia
+  modalOpen.value = true
+
+  noticiasStore.clearNoticiaActual()
+
+  const identifier = noticia.slug || noticia.id
+  await noticiasStore.fetchNoticia(identifier)
+}
+
+const onAfterClose = () => {
+  noticiasStore.clearNoticiaActual()
+  selectedNoticia.value = null
+}
+
+const formatFecha = (iso) => {
+  if (!iso) return "Sin fecha"
+  const d = new Date(iso)
+  if (isNaN(d.getTime())) return "Sin fecha"
+  return d.toLocaleDateString("es-PE", {
+    day: "2-digit",
+    month: "short",
+    year: "numeric",
+  })
+}
+
+const normalizeTagColor = (c) => {
+  const val = String(c || "").trim().toLowerCase()
+  const allowed = new Set([
+    "blue",
+    "red",
+    "green",
+    "orange",
+    "purple",
+    "cyan",
+    "gold",
+    "geekblue",
+    "magenta",
+    "lime",
+    "volcano",
+    "default",
+  ])
+  return allowed.has(val) ? val : "blue"
+}
 </script>
 
-<style scoped>
 
+<style scoped>
 .news-section {
   position: relative;
   padding: 88px 0;
@@ -134,59 +305,43 @@ defineProps({
   padding: 0 24px;
 }
 
-/* ===== Header ===== */
 .header {
   display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
-  gap: 16px;
+  justify-content: center;
+  align-items: center;
   margin-bottom: 18px;
 }
 
 .header-left {
+  width: 100%;
   max-width: 820px;
+  text-align: center;
 }
 
-/* ===== Título centrado + Times New Roman ===== */
 .title {
   margin: 0 !important;
   text-align: center;
-  font-family: "Lora", serif !important;
-  font-weight: 900;           /* fuerte para título */
+  font-family: "Times New Roman", Times, serif !important;
+  font-weight: 900;
   color: #111a56;
   letter-spacing: -0.4px;
 }
 
-
 .subtitle {
   margin: 8px 0 0 !important;
   text-align: center;
-  font-family: "Lora", serif; 
-  font-weight: 300;   
+  font-family: "Times New Roman", Times, serif;
+  font-weight: 300;
   color: rgba(0, 0, 0, 0.58);
   line-height: 1.6;
   font-size: 1.02rem;
 }
 
-.title :deep(.ant-typography),
-.subtitle :deep(.ant-typography) {
-  font-family: "Lora", serif !important;
-}
-
-.btn-all {
-  border-radius: 999px;
-  font-weight: 800;
-  padding: 0 18px;
-  height: 40px;
-  box-shadow: 0 10px 22px rgba(24, 144, 255, 0.18);
-}
-
 .divider {
   margin: 18px 0 28px !important;
   opacity: 0.6;
 }
 
-
 .card {
   border: 0;
   border-radius: 18px;
@@ -202,17 +357,15 @@ defineProps({
   box-shadow: 0 18px 44px rgba(0, 0, 0, 0.12);
 }
 
-
-.card :deep(.ant-card-cover) {
-  margin: 0;
-}
-
-
 .cover {
   position: relative;
   height: 200px;
-  background-size: cover;
+
+  background-size: contain;
   background-position: center;
+  background-repeat: no-repeat;
+
+  background-color: rgba(17, 26, 86, 0.06);
 }
 
 .cover-overlay {
@@ -225,7 +378,6 @@ defineProps({
   );
 }
 
-
 .date-pill {
   position: absolute;
   left: 14px;
@@ -243,9 +395,18 @@ defineProps({
   font-weight: 700;
 }
 
-
-.content {
-  width: 100%;
+.date-inline {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border-radius: 999px;
+  width: fit-content;
+  background: rgba(17, 26, 86, 0.06);
+  border: 1px solid rgba(17, 26, 86, 0.12);
+  color: #111a56;
+  font-weight: 700;
+  font-size: 0.9rem;
 }
 
 .card-title {
@@ -262,7 +423,6 @@ defineProps({
   font-size: 0.98rem;
 }
 
-
 .actions {
   display: flex;
   justify-content: space-between;
@@ -275,21 +435,78 @@ defineProps({
   font-weight: 900;
 }
 
+.tag-soft {
+  border-radius: 999px;
+  font-weight: 700;
+}
 
-@media (max-width: 768px) {
-  .news-section {
-    padding: 64px 0;
-  }
+.modal-cover {
+  width: 100%;
+  height: 360px;             
+  overflow: hidden;
+  border-radius: 14px;
+  margin-bottom: 14px;
+  border: 1px solid rgba(17, 26, 86, 0.10);
+  background: rgba(17, 26, 86, 0.05);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 
-.header {
-  flex-direction: column;   
+.modal-cover img {
+  width: 100%;
+  height: 100%;               
+  object-fit: contain;       
+  display: block;
+}
+
+
+.modal-meta {
+  display: flex;
   align-items: center;
-  text-align: center;
   gap: 10px;
+  margin: 8px 0 10px;
+}
+
+.modal-date {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: rgba(0, 0, 0, 0.55);
+  font-weight: 700;
 }
 
-  .btn-all {
-    margin-top: 6px;
+.modal-desc {
+  color: rgba(0, 0, 0, 0.70);
+  line-height: 1.7;
+  margin-bottom: 12px !important;
+}
+
+.modal-content {
+  line-height: 1.8;
+  color: rgba(0, 0, 0, 0.80);
+}
+.modal-content :deep(img) {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+.modal-content :deep(p) {
+  margin: 0 0 12px;
+}
+
+.modal-content :deep(img) {
+  max-width: 100%;
+  border-radius: 12px;
+}
+
+.modal-link {
+  margin-top: 16px;
+}
+
+@media (max-width: 768px) {
+  .news-section {
+    padding: 64px 0;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/front/src/components/WebPageSections/ProcessSection.vue b/front/src/components/WebPageSections/ProcessSection.vue
index dbfd131..dc3d20e 100644
--- a/front/src/components/WebPageSections/ProcessSection.vue
+++ b/front/src/components/WebPageSections/ProcessSection.vue
@@ -3,30 +3,111 @@
   <section v-if="proceso" class="process-section" aria-labelledby="process-title">
     <div class="section-container">
       <div class="section-header">
-        <h2 id="process-title" class="section-title">{{ proceso.titulo || 'Proceso de Admisión 2026' }}</h2>
+        <h2 id="process-title" class="section-title">{{ tituloProceso }}</h2>
         <p class="section-subtitle">
-          {{ proceso.subtitulo || 'Sigue estos pasos para postular' }}
+          ¿No sabes por dónde empezar? Aquí te guiamos paso a paso y te decimos qué debes hacer hoy.
         </p>
       </div>
 
       <div class="process-card">
+        <!-- STEPS -->
         <a-steps
-          :current="currentStep"
           :direction="isMobile ? 'vertical' : 'horizontal'"
           :responsive="false"
           class="modern-steps"
-        >
-          <a-step
-            v-for="step in steps"
-            :key="step.title"
-            :title="step.title"
-            :description="step.description"
-          />
-        </a-steps>
-
-        <div class="process-note">
+          :items="stepsItems"
+        />
+
+        <!-- GUÍA PARA POSTULANTES -->
+        <div class="help-box" v-if="store.procesoPrincipal">
+          <div class="help-title"> Guía rápida (para no perderte)</div>
+
+          <div class="help-grid">
+            <!-- Etapas activas -->
+            <div class="help-item">
+              <div class="help-label">1) ¿Qué etapa está activa hoy?</div>
+
+              <div class="badges">
+                <span v-if="active.pre" class="badge badge-blue">
+                  Preinscripción activa (virtual / en línea)
+                </span>
+
+                <span v-if="active.ins" class="badge badge-blue">
+                  Inscripción activa (presencial en Campus Universitario)
+                </span>
+
+                <span v-if="active.exa" class="badge badge-green">
+                  Hoy es el Examen
+                </span>
+
+                <span v-if="active.res" class="badge badge-green">
+                  Hoy salen Resultados
+                </span>
+
+                <span v-if="active.bio" class="badge badge-orange">
+                  Biométrico activo (solo ingresantes)
+                </span>
+
+                <span v-if="noActive" class="badge badge-gray">
+                  Aún no inicia o ya terminó una etapa. Revisa las fechas del proceso.
+                </span>
+              </div>
+
+              <div class="tiny-hint">
+                Tip: Si ves “🟢” en una fecha, significa que esa etapa está activa hoy.
+              </div>
+            </div>
+
+            <!-- Qué hacer -->
+            <div class="help-item">
+              <div class="help-label">2) ¿Qué debo hacer ahora?</div>
+
+              <ul class="help-list">
+                <li v-for="(t, i) in tareasHoy" :key="i">{{ t }}</li>
+              </ul>
+
+              <div class="help-actions">
+                <!-- Preinscripción Virtual (solo si existe link) -->
+                <a-button
+                  v-if="store.procesoPrincipal.link_preinscripcion"
+                  type="primary"
+                  :href="store.procesoPrincipal.link_preinscripcion"
+                  target="_blank"
+                >
+                  Iniciar Preinscripción
+                </a-button>
+
+                <a-button
+                  v-if="store.procesoPrincipal.link_reglamento"
+                  type="default"
+                  :href="store.procesoPrincipal.link_reglamento"
+                  target="_blank"
+                >
+                  Ver Reglamento
+                </a-button>
+
+                <a-button
+                  v-if="store.procesoPrincipal.link_resultados"
+                  type="default"
+                  :href="store.procesoPrincipal.link_resultados"
+                  target="_blank"
+                >
+                  Ver Resultados
+                </a-button>
+              </div>
+            </div>
+          </div>
+
+          <!-- Nota fija sobre inscripción presencial -->
+          <div class="campus-note">
+             <b>Importante:</b> La <b>Inscripción</b> se realiza de forma <b>presencial</b> en el
+            <b>Campus Universitario</b>. Lleva tu DNI y los requisitos solicitados.
+          </div>
+        </div>
+
+        <div class="process-note" v-else>
           <span class="dot" />
-          <span>Fechas referenciales. Verifica el cronograma oficial de la Dirección de Admisión</span>
+          <span>Cargando proceso...</span>
         </div>
       </div>
     </div>
@@ -35,90 +116,243 @@
 
 <script setup>
 import { ref, computed, onMounted, onUnmounted } from "vue"
+import { useWebAdmisionStore } from "../../store/web"
 
-const props = defineProps({
-  proceso: {
-    type: Object,
-    default: null,
-  },
-})
+const store = useWebAdmisionStore()
 
 const isMobile = ref(false)
-const checkScreen = () => {
-  isMobile.value = window.innerWidth < 768
-}
+const checkScreen = () => (isMobile.value = window.innerWidth < 768)
+
+const now = ref(new Date())
+let timer = null
 
 onMounted(() => {
   checkScreen()
   window.addEventListener("resize", checkScreen)
+
+  if (!store.procesoPrincipal) store.cargarProcesos()
+
+  timer = setInterval(() => (now.value = new Date()), 60_000)
 })
 
 onUnmounted(() => {
   window.removeEventListener("resize", checkScreen)
+  if (timer) clearInterval(timer)
 })
 
-function formatRango(inicio, fin) {
-  if (!inicio && !fin) return null
-  const opts = { day: 'numeric', month: 'short' }
-  const i = inicio ? new Date(inicio).toLocaleDateString('es-PE', opts) : null
-  const f = fin ? new Date(fin).toLocaleDateString('es-PE', opts) : null
-  if (i && f) return `${i} - ${f}`
-  if (i) return `Desde ${i}`
-  return `Hasta ${f}`
+const toDate = (value) => {
+  if (!value) return null
+  const d = new Date(value)
+  return isNaN(d.getTime()) ? null : d
 }
 
-function formatFecha(fecha) {
-  if (!fecha) return null
-  return new Date(fecha).toLocaleDateString('es-PE', { day: 'numeric', month: 'long' })
+const startOfDay = (d) => {
+  const x = new Date(d)
+  x.setHours(0, 0, 0, 0)
+  return x
 }
 
-const steps = computed(() => {
-  const p = props.proceso
-  if (!p) return []
+const endOfDay = (d) => {
+  const x = new Date(d)
+  x.setHours(23, 59, 59, 999)
+  return x
+}
 
-  const list = []
+const inRange = (n, start, end) => {
+  if (!start || !end) return false
+  return n >= startOfDay(start) && n <= endOfDay(end)
+}
 
-  const preinscripcion = formatRango(p.fecha_inicio_preinscripcion, p.fecha_fin_preinscripcion)
-  if (preinscripcion) {
-    list.push({ title: 'Preinscripción Virtual', description: preinscripcion })
-  }
+const sameDay = (a, b) =>
+  a.getFullYear() === b.getFullYear() &&
+  a.getMonth() === b.getMonth() &&
+  a.getDate() === b.getDate()
 
-  const inscripcion = formatRango(p.fecha_inicio_inscripcion, p.fecha_fin_inscripcion)
-  if (inscripcion) {
-    list.push({ title: 'Inscripción Presencial', description: inscripcion })
-  }
+const fmtShort = (value) => {
+  const d = toDate(value)
+  if (!d) return "Por definir"
+  return d.toLocaleDateString("es-PE", { day: "2-digit", month: "short" })
+}
+
+const fmtLong = (value) => {
+  const d = toDate(value)
+  if (!d) return "Por definir"
+  return d.toLocaleDateString("es-PE", {
+    day: "2-digit",
+    month: "short",
+    year: "numeric",
+  })
+}
+
+const fmtRange = (start, end) => {
+  const s = toDate(start)
+  const e = toDate(end)
+  if (s && e) return `${fmtShort(s)} – ${fmtShort(e)}`
+  if (s && !e) return fmtLong(s)
+  if (!s && e) return fmtLong(e)
+  return "Por definir"
+}
+
+const tituloProceso = computed(() => {
+  const p = store.procesoPrincipal
+  if (!p) return "Proceso de Admisión"
+  return p.titulo || p.tipo_proceso || "Proceso de Admisión"
+})
+
+
+const active = computed(() => {
+  const p = store.procesoPrincipal
+  if (!p) return { pre: false, ins: false, exa: false, res: false, bio: false }
+
+  const n = now.value
+
+  const preIni = toDate(p.fecha_inicio_preinscripcion)
+  const preFin = toDate(p.fecha_fin_inscripcion) || toDate(p.fecha_fin_preinscripcion)
+
+  const insIni = toDate(p.fecha_inicio_inscripcion)
+  const insFin = toDate(p.fecha_fin_inscripcion)
+
+  const exa = toDate(p.fecha_examen1)
+  const res = toDate(p.fecha_resultados)
+
+  const bioIni = toDate(p.fecha_inicio_biometrico)
+  const bioFin = toDate(p.fecha_fin_biometrico)
 
-  const examen = formatRango(p.fecha_examen1, p.fecha_examen2)
-  if (examen) {
-    list.push({ title: 'Examen', description: examen })
+  return {
+    pre: inRange(n, preIni, preFin),
+    ins: inRange(n, insIni, insFin),
+    exa: exa ? sameDay(n, exa) : false,
+    res: res ? sameDay(n, res) : false,
+    bio: inRange(n, bioIni, bioFin),
   }
+})
+
+const noActive = computed(() => {
+  const a = active.value
+  return !a.pre && !a.ins && !a.exa && !a.res && !a.bio
+})
+
+const getStepStatus = (index, p) => {
+  const n = now.value
+
+  const preIni = toDate(p.fecha_inicio_preinscripcion)
+  const preFin = toDate(p.fecha_fin_inscripcion) || toDate(p.fecha_fin_preinscripcion)
+
+  const insIni = toDate(p.fecha_inicio_inscripcion)
+  const insFin = toDate(p.fecha_fin_inscripcion)
+
+  const exa = toDate(p.fecha_examen1)
+  const res = toDate(p.fecha_resultados)
 
-  const resultados = formatFecha(p.fecha_resultados)
-  if (resultados) {
-    list.push({ title: 'Resultados', description: resultados })
+  const bioIni = toDate(p.fecha_inicio_biometrico)
+  const bioFin = toDate(p.fecha_fin_biometrico)
+
+  const activePre = inRange(n, preIni, preFin)
+  const activeIns = inRange(n, insIni, insFin)
+  const activeExa = exa ? sameDay(n, exa) : false
+  const activeRes = res ? sameDay(n, res) : false
+  const activeBio = inRange(n, bioIni, bioFin)
+
+  const passed = (end) => (end ? n > endOfDay(end) : false)
+
+  const hasDates = [
+    Boolean(preIni || preFin),
+    Boolean(insIni || insFin),
+    Boolean(exa),
+    Boolean(res),
+    Boolean(bioIni || bioFin),
+  ][index]
+  if (!hasDates) return "wait"
+
+  if (index === 0) return activePre ? "process" : passed(preFin) ? "finish" : "wait"
+  if (index === 1) return activeIns ? "process" : passed(insFin) ? "finish" : "wait"
+  if (index === 2) return activeExa ? "process" : passed(exa) ? "finish" : "wait"
+  if (index === 3) return activeRes ? "process" : passed(res) ? "finish" : "wait"
+  if (index === 4) return activeBio ? "process" : passed(bioFin) ? "finish" : "wait"
+
+  return "wait"
+}
+
+
+const withActiveBadge = (label, isActive) => (isActive ? `🟢 ${label}` : label)
+
+const stepsItems = computed(() => {
+  const p = store.procesoPrincipal || {}
+  const a = active.value
+
+  return [
+    {
+      title: "Preinscripción Virtual",
+      description: withActiveBadge(
+        fmtRange(p.fecha_inicio_preinscripcion, p.fecha_fin_inscripcion),
+        a.pre
+      ),
+      status: getStepStatus(0, p),
+    },
+    {
+      title: "Inscripción Presencial (Campus)",
+      description: withActiveBadge(
+        fmtRange(p.fecha_inicio_inscripcion, p.fecha_fin_inscripcion),
+        a.ins
+      ),
+      status: getStepStatus(1, p),
+    },
+    {
+      title: "Examen",
+      description: withActiveBadge(fmtLong(p.fecha_examen1), a.exa),
+      status: getStepStatus(2, p),
+    },
+    {
+      title: "Resultados",
+      description: withActiveBadge(fmtLong(p.fecha_resultados), a.res),
+      status: getStepStatus(3, p),
+    },
+    {
+      title: "Control Biométrico (Ingresantes)",
+      description: withActiveBadge(
+        fmtRange(p.fecha_inicio_biometrico, p.fecha_fin_biometrico),
+        a.bio
+      ),
+      status: getStepStatus(4, p),
+    },
+  ]
+})
+
+const tareasHoy = computed(() => {
+  const p = store.procesoPrincipal
+  if (!p) return []
+
+  const a = active.value
+  const tareas = []
+
+  if (a.pre) {
+    tareas.push("Entra a la Preinscripción Virtual y completa tus datos sin apuro (verifica nombres y DNI).")
+    tareas.push("Al terminar, descarga e imprime tu solicitud de preinscripción y revisa los Requisitos del proceso.")
   }
 
-  const biometrico = formatRango(p.fecha_inicio_biometrico, p.fecha_fin_biometrico)
-  if (biometrico) {
-    list.push({ title: 'Control Biométrico', description: biometrico })
+  if (a.ins) {
+    tareas.push("Acércate al Campus Universitario para la Inscripción Presencial.")
+    tareas.push("Lleva tu DNI y los documentos/pagos solicitados.")
   }
 
-  return list
-})
+  if (a.exa) {
+    tareas.push("Hoy es el Examen: llega temprano, lleva tu DNI, constancia de inscripción y sigue las indicaciones del reglamento.")
+  }
 
-const now = new Date()
+  if (a.res) {
+    tareas.push("Hoy salen Resultados.")
+  }
 
-const currentStep = computed(() => {
-  const p = props.proceso
-  if (!p) return 0
+  if (a.bio) {
+    tareas.push("Si ingresaste: acércate al control biométrico dentro de las fechas indicadas.")
+  }
 
-  if (p.fecha_inicio_biometrico && now >= new Date(p.fecha_inicio_biometrico)) return steps.value.length - 1
-  if (p.fecha_resultados && now >= new Date(p.fecha_resultados)) return steps.value.findIndex(s => s.title === 'Resultados')
-  if (p.fecha_examen1 && now >= new Date(p.fecha_examen1)) return steps.value.findIndex(s => s.title === 'Examen')
-  if (p.fecha_inicio_inscripcion && now >= new Date(p.fecha_inicio_inscripcion)) return steps.value.findIndex(s => s.title === 'Inscripción Presencial')
-  if (p.fecha_inicio_preinscripcion && now >= new Date(p.fecha_inicio_preinscripcion)) return steps.value.findIndex(s => s.title === 'Preinscripción Virtual')
+  if (tareas.length === 0) {
+    tareas.push("Revisa las fechas del proceso en los pasos de arriba.")
+    tareas.push("Si aún no inicia: alístate con requisitos, documentos y pagos para no correr a última hora.")
+  }
 
-  return 0
+  return tareas
 })
 </script>
 
@@ -242,6 +476,105 @@ const currentStep = computed(() => {
   flex-shrink: 0;
 }
 
+.help-box {
+  margin-top: 14px;
+  border-top: 1px dashed #e5e7eb;
+  padding-top: 12px;
+}
+
+.help-title {
+  font-weight: 700;
+  color: #1e3a8a;
+  margin-bottom: 10px;
+}
+
+.help-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.help-item {
+  border: 1px solid #eef2ff;
+  background: #fbfcff;
+  border-radius: 12px;
+  padding: 12px;
+}
+
+.help-label {
+  font-weight: 700;
+  color: #2c3e50;
+  margin-bottom: 8px;
+}
+
+.tiny-hint {
+  margin-top: 10px;
+  font-size: 0.86rem;
+  color: #6b7280;
+}
+
+.badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.badge {
+  font-size: 0.82rem;
+  padding: 6px 10px;
+  border-radius: 999px;
+  font-weight: 700;
+}
+
+.badge-blue {
+  background: rgba(30, 58, 138, 0.08);
+  color: #1e3a8a;
+  border: 1px solid rgba(30, 58, 138, 0.18);
+}
+
+.badge-green {
+  background: rgba(16, 185, 129, 0.08);
+  color: #047857;
+  border: 1px solid rgba(16, 185, 129, 0.18);
+}
+
+.badge-orange {
+  background: rgba(245, 158, 11, 0.10);
+  color: #92400e;
+  border: 1px solid rgba(245, 158, 11, 0.22);
+}
+
+.badge-gray {
+  background: rgba(107, 114, 128, 0.08);
+  color: #374151;
+  border: 1px solid rgba(107, 114, 128, 0.18);
+}
+
+.help-list {
+  margin: 0;
+  padding-left: 18px;
+  color: #4b5563;
+  line-height: 1.55;
+}
+
+.help-actions {
+  margin-top: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+/* Nota campus */
+.campus-note {
+  margin-top: 12px;
+  padding: 10px 12px;
+  border-radius: 12px;
+  background: #f8fafc;
+  border: 1px solid #e5e7eb;
+  color: #374151;
+  line-height: 1.5;
+}
+
 @media (max-width: 992px) {
   .section-title {
     font-size: 1.85rem;
@@ -255,23 +588,22 @@ const currentStep = computed(() => {
   .process-section {
     padding: 24px 0;
   }
-
   .section-title {
     font-size: 1.55rem;
   }
-
   .process-card {
     padding: 12px 10px 10px;
   }
-
   .modern-steps {
     padding: 4px 4px;
   }
-
   .modern-steps :deep(.ant-steps-item-icon) {
     width: 28px;
     height: 28px;
     line-height: 28px;
   }
+  .help-grid {
+    grid-template-columns: 1fr;
+  }
 }
 </style>
diff --git a/front/src/components/WebPageSections/ProgramasSection.vue b/front/src/components/WebPageSections/ProgramasSection.vue
index 7e8107e..061c647 100644
--- a/front/src/components/WebPageSections/ProgramasSection.vue
+++ b/front/src/components/WebPageSections/ProgramasSection.vue
@@ -1,4 +1,3 @@
-<!-- components/programas/ProgramasSection.vue  (SOLO ÁREAS, estilo AntDV) -->
 <template>
   <section class="areas-section">
     <div class="section-container">
diff --git a/front/src/components/WebPageSections/StatsSection.vue b/front/src/components/WebPageSections/StatsSection.vue
index 709c2c1..d28ba3b 100644
--- a/front/src/components/WebPageSections/StatsSection.vue
+++ b/front/src/components/WebPageSections/StatsSection.vue
@@ -1,9 +1,8 @@
-<!-- components/stats/StatsSection.vue -->
 <template>
   <section class="stats-section" aria-labelledby="stats-title">
     <div class="section-container">
       <div class="section-header">
-        <h2 id="stats-title" class="section-title">Cifras Clave</h2>
+        <h2 id="stats-title" class="section-title">LA UNA PUNO EN CIFRAS</h2>
         <p class="section-subtitle">
           Indicadores institucionales que reflejan nuestro compromiso académico
         </p>
@@ -11,31 +10,35 @@
 
       <div class="stats-grid">
         <div class="stat-card">
+                    <p class="stat-label">Fundada en</p>
           <div class="stat-top">
-            <span class="stat-number">44+</span>
+            <span class="stat-number">1856</span>
           </div>
-          <p class="stat-label">Carreras Profesionales</p>
+
         </div>
 
         <div class="stat-card">
+                    <p class="stat-label">Facultades</p>
           <div class="stat-top">
-            <span class="stat-number">98%</span>
+            <span class="stat-number">20</span>
           </div>
-          <p class="stat-label">Índice de Satisfacción</p>
+
         </div>
 
         <div class="stat-card">
+          <p class="stat-label">Escuelas Profesionales</p>
           <div class="stat-top">
-            <span class="stat-number">15,000+</span>
+            <span class="stat-number">39</span>
           </div>
-          <p class="stat-label">Estudiantes Activos</p>
+
         </div>
 
         <div class="stat-card">
+                    <p class="stat-label">Estudiantes Matriculados</p>
           <div class="stat-top">
-            <span class="stat-number">85%</span>
+            <span class="stat-number">19,160</span>
           </div>
-          <p class="stat-label">Egresados Laborando</p>
+
         </div>
       </div>
     </div>
@@ -43,7 +46,6 @@
 </template>
 
 <style scoped>
-
 .stats-section {
   position: relative;
   padding: 70px 0;
@@ -53,7 +55,6 @@
   overflow: hidden;
 }
 
-
 .stats-section::before {
   content: "";
   position: absolute;
@@ -79,7 +80,6 @@
     );
 }
 
-
 .stats-section::after {
   content: "";
   position: absolute;
@@ -121,20 +121,17 @@
   line-height: 1.45;
 }
 
-
 .stats-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 18px;
 }
 
-
 .stat-card {
   padding: 22px 18px;
   border-radius: 16px;
   text-align: center;
 
-
   background: rgba(255, 255, 255, 0.10);
   border: 1px solid rgba(255, 255, 255, 0.18);
   backdrop-filter: blur(10px);
@@ -156,7 +153,6 @@
   gap: 6px;
 }
 
-
 .stat-number {
   font-size: 2.8rem;
   font-weight: 900;
@@ -168,14 +164,12 @@
   background-clip: text;
 }
 
-/* Texto */
 .stat-label {
   margin: 10px 0 0;
   font-size: 1.02rem;
   opacity: 0.92;
 }
 
-
 @media (max-width: 992px) {
   .stats-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -196,4 +190,4 @@
     font-size: 2.4rem;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/front/src/components/WebPageSections/navbarcontent/Cepreuna.vue b/front/src/components/WebPageSections/navbarcontent/Cepreuna.vue
new file mode 100644
index 0000000..55254a4
--- /dev/null
+++ b/front/src/components/WebPageSections/navbarcontent/Cepreuna.vue
@@ -0,0 +1,124 @@
+<template>
+      <NavbarModerno />
+  <section class="convocatorias-modern">
+    <div class="section-container">
+      <div class="section-header">
+        <div class="header-with-badge">
+          <h2 class="section-title">CEPREUNA</h2>
+          <a-badge count="Modalidad" class="new-badge" />
+        </div>
+        <p class="section-subtitle">
+          Examen de admisión del Centro Preuniversitario
+        </p>
+      </div>
+
+      <a-card class="main-convocatoria-card">
+        <div class="card-badge">CEPREUNA</div>
+
+        <div class="convocatoria-header">
+          <div>
+            <h3>Examen de Admisión del Centro Preuniversitario</h3>
+            <p class="convocatoria-date">Convocatoria: una vez por semestre</p>
+          </div>
+          <!-- <a-tag class="status-tag" color="success">CEPREUNA</a-tag> -->
+        </div>
+
+        <a-alert
+          type="info"
+          show-icon
+          class="soft-alert"
+          message="Dirigido a estudiantes que concluyeron el quinto año de secundaria y cursaron el ciclo preparatorio del Centro Preuniversitario de la UNA-Puno."
+        />
+
+        <a-divider class="custom-divider" />
+
+        <a-card class="soft-card" size="small">
+          <h4 class="subheading">Evaluación</h4>
+          <p class="text">
+            El postulante rinde un examen de conocimientos con contenidos alineados al perfil del ingresante
+            establecido por la UNA-Puno, en la fecha indicada en el cronograma de admisión.
+          </p>
+        </a-card>
+
+
+        <a-card class="soft-card" size="small">
+          <h4 class="subheading">Requisitos y documentos</h4>
+          <a-list size="small" :split="false" class="info-list">
+            <a-list-item>
+              Presentar la constancia de no adeudar al CEPREUNA y DNI vigente.
+            </a-list-item>
+            <a-list-item>
+              Presentar los documentos exigidos por el reglamento para esta modalidad (según requisitos generales).
+            </a-list-item>
+          </a-list>
+        </a-card>
+      </a-card>
+    </div>
+  </section>
+
+  <FooterModerno />
+</template>
+
+<script setup>
+import NavbarModerno from '../../nabvar.vue'
+import FooterModerno from '../../Footer.vue'
+
+
+</script>
+
+<style scoped>
+/* Diseño tipo Convocatorias (sin mayúsculas globales) */
+.convocatorias-modern {
+  position: relative;
+  padding: 40px 0;
+  font-family: "Times New Roman", Times, serif;
+  background: #fbfcff;
+  overflow: hidden;
+}
+.convocatorias-modern::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  background-image:
+    repeating-linear-gradient(to right, rgba(13, 27, 82, 0.06) 0, rgba(13, 27, 82, 0.06) 1px, transparent 1px, transparent 24px),
+    repeating-linear-gradient(to bottom, rgba(13, 27, 82, 0.06) 0, rgba(13, 27, 82, 0.06) 1px, transparent 1px, transparent 24px);
+  opacity: 0.55;
+}
+.section-container { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
+.section-header { text-align: center; margin-bottom: 40px; }
+.header-with-badge { display: inline-flex; align-items: center; justify-content: center; gap: 14px; }
+.section-title { font-size: 2.4rem; font-weight: 700; color: #0d1b52; margin: 0; }
+.section-subtitle { font-size: 1.125rem; color: #666; max-width: 760px; margin: 14px auto 0; }
+
+.new-badge :deep(.ant-badge-count) {
+  background: linear-gradient(45deg, #ff6b6b, #ffd700);
+  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
+  border-radius: 999px;
+}
+
+.main-convocatoria-card { position: relative; border: none; box-shadow: 0 10px 34px rgba(0,0,0,0.08); border-radius: 16px; }
+.main-convocatoria-card :deep(.ant-card-body) { padding: 28px; }
+
+.card-badge {
+  position: absolute; top: -12px; left: 24px;
+  background: linear-gradient(45deg, #1890ff, #52c41a);
+  color: white; padding: 6px 16px; border-radius: 999px;
+  font-size: 0.75rem; font-weight: 700;
+}
+
+.convocatoria-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
+.convocatoria-header h3 { margin: 0; font-size: 1.55rem; color: #1a237e; }
+.convocatoria-date { color: #666; margin: 6px 0 0; font-size: 0.95rem; }
+
+.status-tag { font-weight: 700; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
+
+.custom-divider { margin: 18px 0; }
+.soft-alert { border-radius: 12px; }
+
+.soft-card { border-radius: 12px; border: 1px solid rgba(0,0,0,0.06); margin-top: 12px; }
+.subheading { margin: 0 0 6px; color: #1a237e; font-weight: 700; }
+.text { margin: 0; color: #666; line-height: 1.7; }
+.info-list :deep(.ant-list-item) { padding: 8px 0; border: none; color: #666; }
+</style>
diff --git a/front/src/components/WebPageSections/navbarcontent/Extraordinario.vue b/front/src/components/WebPageSections/navbarcontent/Extraordinario.vue
new file mode 100644
index 0000000..b386fb9
--- /dev/null
+++ b/front/src/components/WebPageSections/navbarcontent/Extraordinario.vue
@@ -0,0 +1,141 @@
+<template>
+    <NavbarModerno/>
+  <section class="convocatorias-modern">
+    <div class="section-container">
+      <div class="section-header">
+        <div class="header-with-badge">
+          <h2 class="section-title">Extraordinario</h2>
+          <a-badge count="Modalidades" class="new-badge" />
+        </div>
+        <p class="section-subtitle">
+          Examen convocado una vez al año con varias formas de postulación
+        </p>
+      </div>
+
+      <a-card class="main-convocatoria-card">
+        <div class="card-badge">Extraordinario</div>
+
+        <div class="convocatoria-header">
+          <div>
+            <h3>Examen de Admisión Extraordinario</h3>
+            <p class="convocatoria-date">Convocatoria: una vez al año</p>
+          </div>
+          <!-- <a-tag class="status-tag" color="orange">Extraordinario</a-tag> -->
+        </div>
+
+        <a-card class="soft-card" size="small">
+          <h4 class="subheading">Evaluación</h4>
+          <p class="text">
+            El postulante rinde un examen de conocimientos con temas y contenidos alineados al perfil del ingresante,
+            en la fecha prevista en el cronograma de admisión.
+          </p>
+        </a-card>
+
+
+        <a-divider class="custom-divider" />
+
+        <h4 class="subheading" style="margin: 0 0 10px;">Formas de postulación</h4>
+
+        <a-collapse expand-icon-position="end" class="collapse-clean">
+          <a-collapse-panel key="a" header="Primeros puestos / COAR">
+            <p class="text">
+              Dirigido a estudiantes que obtuvieron los primeros lugares del orden de mérito en secundaria, con vigencia
+              definida por el reglamento; incluye egresados del COAR según corresponda.
+            </p>
+            <a-divider class="custom-divider" />
+            <a-list size="small" :split="false" class="info-list">
+              <a-list-item>Comprobantes de pago por admisión y carpeta de postulante.</a-list-item>
+              <a-list-item>Documento de identidad (original y copia).</a-list-item>
+              <a-list-item>Examen médico y aptitud vocacional solo para programas que lo exigen.</a-list-item>
+              <a-list-item>Solicitud generada tras la preinscripción virtual.</a-list-item>
+              <a-list-item>Certificados que acrediten estudios y condición de mérito según corresponda.</a-list-item>
+            </a-list>
+          </a-collapse-panel>
+
+          <a-collapse-panel key="b" header="Graduados o titulados">
+            <a-list size="small" :split="false" class="info-list">
+              <a-list-item>Comprobantes de pago por admisión y carpeta.</a-list-item>
+              <a-list-item>Documento de identidad (original y copia).</a-list-item>
+              <a-list-item>Solicitud generada tras la preinscripción virtual.</a-list-item>
+              <a-list-item>Grado o título certificado por la institución de origen.</a-list-item>
+              <a-list-item>Para extranjeros: legalizaciones requeridas según normativa.</a-list-item>
+              <a-list-item>Constancias de institución de origen o verificación según corresponda.</a-list-item>
+            </a-list>
+          </a-collapse-panel>
+
+          <a-collapse-panel key="c" header="Traslado interno">
+            <a-list size="small" :split="false" class="info-list">
+              <a-list-item>Comprobantes de pago por admisión y carpeta.</a-list-item>
+              <a-list-item>Documento de identidad (original y copia).</a-list-item>
+              <a-list-item>Solicitud indicando programa de origen y programa al que postula, según afinidad.</a-list-item>
+              <a-list-item>Historial académico y constancias de matrícula según requisitos establecidos.</a-list-item>
+            </a-list>
+          </a-collapse-panel>
+
+          <a-collapse-panel key="d" header="Traslado externo (nacional o internacional)">
+            <a-list size="small" :split="false" class="info-list">
+              <a-list-item>Comprobantes de pago por admisión y carpeta.</a-list-item>
+              <a-list-item>Documento de identidad (DNI / carné de extranjería / pasaporte) según corresponda.</a-list-item>
+              <a-list-item>Solicitud de postulación al mismo programa de estudio.</a-list-item>
+              <a-list-item>Certificados de estudios visados; en internacional, requisitos legales adicionales.</a-list-item>
+              <a-list-item>Constancia de matrícula vigente del semestre anterior o similar.</a-list-item>
+            </a-list>
+          </a-collapse-panel>
+
+          <a-collapse-panel key="e" header="Deportistas destacados">
+            <a-list size="small" :split="false" class="info-list">
+              <a-list-item>Comprobantes de pago por admisión y carpeta.</a-list-item>
+              <a-list-item>Documento de identidad (original y copia).</a-list-item>
+              <a-list-item>Resolución y récord deportivo documentado conforme a la normativa aplicable.</a-list-item>
+              <a-list-item>Certificado de estudios secundarios.</a-list-item>
+            </a-list>
+          </a-collapse-panel>
+
+          <a-collapse-panel key="f" header="Beneficiarios del Plan Integral de Reparaciones (PIR)">
+            <a-list size="small" :split="false" class="info-list">
+              <a-list-item>Solicitud generada tras la preinscripción virtual.</a-list-item>
+              <a-list-item>Documento de identidad (original y copia).</a-list-item>
+              <a-list-item>Constancias de registro correspondientes (RUV/REBRED u otras).</a-list-item>
+              <a-list-item>Examen médico y aptitud vocacional solo para programas que lo exigen.</a-list-item>
+              <a-list-item>Certificado de estudios secundarios.</a-list-item>
+            </a-list>
+          </a-collapse-panel>
+        </a-collapse>
+      </a-card>
+    </div>
+  </section>
+  <FooterModerno/>
+</template>
+
+<script setup>
+import NavbarModerno from '../../nabvar.vue'
+import FooterModerno from '../../Footer.vue'
+
+
+</script>
+
+<style scoped>
+/* mismo estilo base del componente CEPREUNA */
+.convocatorias-modern{position:relative;padding:40px 0;font-family:"Times New Roman",Times,serif;background:#fbfcff;overflow:hidden;}
+.convocatorias-modern::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background-image:repeating-linear-gradient(to right,rgba(13,27,82,.06) 0,rgba(13,27,82,.06) 1px,transparent 1px,transparent 24px),repeating-linear-gradient(to bottom,rgba(13,27,82,.06) 0,rgba(13,27,82,.06) 1px,transparent 1px,transparent 24px);opacity:.55;}
+.section-container{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 24px;}
+.section-header{text-align:center;margin-bottom:40px;}
+.header-with-badge{display:inline-flex;align-items:center;justify-content:center;gap:14px;}
+.section-title{font-size:2.4rem;font-weight:700;color:#0d1b52;margin:0;}
+.section-subtitle{font-size:1.125rem;color:#666;max-width:860px;margin:14px auto 0;}
+.new-badge :deep(.ant-badge-count){background:linear-gradient(45deg,#ff6b6b,#ffd700);box-shadow:0 2px 8px rgba(255,107,107,.3);border-radius:999px;}
+.main-convocatoria-card{position:relative;border:none;box-shadow:0 10px 34px rgba(0,0,0,.08);border-radius:16px;}
+.main-convocatoria-card :deep(.ant-card-body){padding:28px;}
+.card-badge{position:absolute;top:-12px;left:24px;background:linear-gradient(45deg,#1890ff,#52c41a);color:#fff;padding:6px 16px;border-radius:999px;font-size:.75rem;font-weight:700;}
+.convocatoria-header{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:14px;}
+.convocatoria-header h3{margin:0;font-size:1.55rem;color:#1a237e;}
+.convocatoria-date{color:#666;margin:6px 0 0;font-size:.95rem;}
+.status-tag{font-weight:700;padding:4px 12px;border-radius:999px;white-space:nowrap;}
+.custom-divider{margin:18px 0;}
+.soft-card{border-radius:12px;border:1px solid rgba(0,0,0,0.06);margin-top:12px;}
+.subheading{margin:0 0 6px;color:#1a237e;font-weight:700;}
+.text{margin:0;color:#666;line-height:1.7;}
+.info-list :deep(.ant-list-item){padding:8px 0;border:none;color:#666;}
+.collapse-clean :deep(.ant-collapse-item){border-radius:12px;overflow:hidden;margin-bottom:10px;border:1px solid rgba(0,0,0,0.06);}
+.collapse-clean :deep(.ant-collapse-header){font-weight:700;color:#1a237e;}
+</style>
diff --git a/front/src/components/WebPageSections/navbarcontent/General.vue b/front/src/components/WebPageSections/navbarcontent/General.vue
new file mode 100644
index 0000000..0db4129
--- /dev/null
+++ b/front/src/components/WebPageSections/navbarcontent/General.vue
@@ -0,0 +1,99 @@
+<template>
+    <NavbarModerno />
+  <section class="convocatorias-modern">
+    <div class="section-container">
+      <div class="section-header">
+        <div class="header-with-badge">
+          <h2 class="section-title">Admisión General</h2>
+          <a-badge count="Semestral" class="new-badge" />
+        </div>
+        <p class="section-subtitle">
+          Modalidad dirigida a egresados de secundaria (incluye postulantes con discapacidad acreditada)
+        </p>
+      </div>
+
+      <a-card class="main-convocatoria-card">
+        <div class="card-badge">General</div>
+
+        <div class="convocatoria-header">
+          <div>
+            <h3>Examen de Admisión General</h3>
+            <p class="convocatoria-date">Convocatoria: una vez por semestre</p>
+          </div>
+<!-- 
+          <a-tag class="status-tag" color="blue">General</a-tag> -->
+        </div>
+
+        <a-alert
+          type="info"
+          show-icon
+          class="soft-alert"
+          message="Incluye postulantes con discapacidad debidamente acreditados mediante su certificado correspondiente."
+        />
+
+        <a-divider class="custom-divider" />
+
+        <a-card class="soft-card" size="small">
+          <h4 class="subheading">A quién está dirigido</h4>
+          <p class="text">
+            Dirigido a estudiantes egresados que hayan concluido educación secundaria en EBR, EBA y COAR.
+          </p>
+        </a-card>
+
+        <a-card class="soft-card" size="small">
+          <h4 class="subheading">Evaluación</h4>
+          <p class="text">
+            Examen de conocimientos basado en contenidos alineados al perfil del ingresante, según el cronograma de admisión.
+          </p>
+        </a-card>
+
+        <a-card class="soft-card" size="small">
+          <h4 class="subheading">Asignación de vacantes</h4>
+          <p class="text">
+            Se asignan por puntaje hasta completar el número ofertado por los programas de estudio, conforme al reglamento.
+          </p>
+        </a-card>
+
+        <a-card class="soft-card" size="small">
+          <h4 class="subheading">Documentación</h4>
+          <p class="text">
+            El postulante debe presentar los documentos exigidos por el reglamento para esta modalidad.
+          </p>
+        </a-card>
+      </a-card>
+    </div>
+  </section>
+  <FooterModerno/>
+</template>
+
+<script setup>
+import NavbarModerno from '../../nabvar.vue'
+import FooterModerno from '../../Footer.vue'
+
+
+
+</script>
+
+<style scoped>
+/* mismo estilo base */
+.convocatorias-modern{position:relative;padding:40px 0;font-family:"Times New Roman",Times,serif;background:#fbfcff;overflow:hidden;}
+.convocatorias-modern::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background-image:repeating-linear-gradient(to right,rgba(13,27,82,.06) 0,rgba(13,27,82,.06) 1px,transparent 1px,transparent 24px),repeating-linear-gradient(to bottom,rgba(13,27,82,.06) 0,rgba(13,27,82,.06) 1px,transparent 1px,transparent 24px);opacity:.55;}
+.section-container{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 24px;}
+.section-header{text-align:center;margin-bottom:40px;}
+.header-with-badge{display:inline-flex;align-items:center;justify-content:center;gap:14px;}
+.section-title{font-size:2.4rem;font-weight:700;color:#0d1b52;margin:0;}
+.section-subtitle{font-size:1.125rem;color:#666;max-width:860px;margin:14px auto 0;}
+.new-badge :deep(.ant-badge-count){background:linear-gradient(45deg,#ff6b6b,#ffd700);box-shadow:0 2px 8px rgba(255,107,107,.3);border-radius:999px;}
+.main-convocatoria-card{position:relative;border:none;box-shadow:0 10px 34px rgba(0,0,0,.08);border-radius:16px;}
+.main-convocatoria-card :deep(.ant-card-body){padding:28px;}
+.card-badge{position:absolute;top:-12px;left:24px;background:linear-gradient(45deg,#1890ff,#52c41a);color:#fff;padding:6px 16px;border-radius:999px;font-size:.75rem;font-weight:700;}
+.convocatoria-header{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:14px;}
+.convocatoria-header h3{margin:0;font-size:1.55rem;color:#1a237e;}
+.convocatoria-date{color:#666;margin:6px 0 0;font-size:.95rem;}
+.status-tag{font-weight:700;padding:4px 12px;border-radius:999px;white-space:nowrap;}
+.custom-divider{margin:18px 0;}
+.soft-alert{border-radius:12px;}
+.soft-card{border-radius:12px;border:1px solid rgba(0,0,0,0.06);margin-top:12px;}
+.subheading{margin:0 0 6px;color:#1a237e;font-weight:700;}
+.text{margin:0;color:#666;line-height:1.7;}
+</style>
diff --git a/front/src/components/WebPageSections/navbarcontent/Resultados.vue b/front/src/components/WebPageSections/navbarcontent/Resultados.vue
new file mode 100644
index 0000000..72c9f90
--- /dev/null
+++ b/front/src/components/WebPageSections/navbarcontent/Resultados.vue
@@ -0,0 +1,411 @@
+<script setup>
+import { ref, computed, onMounted } from "vue"
+import axios from "axios"
+import NavbarModerno from '../../nabvar.vue'
+import FooterModerno from '../../Footer.vue'
+import {
+  CalendarOutlined,
+  FileSearchOutlined,
+} from "@ant-design/icons-vue"
+
+
+
+const procesos = ref([])
+const loading = ref(false)
+const errorMsg = ref("")
+
+const yaPasoFechaExamen = (fec_2, fec_1) => {
+  if (!fec_2 && !fec_1) return true
+
+  const fechaReferencia = fec_2 || fec_1
+  const fecha = new Date(fechaReferencia)
+
+  if (Number.isNaN(fecha.getTime())) return true
+
+  fecha.setDate(fecha.getDate() + 1)
+
+  const hoy = new Date()
+  return hoy >= fecha
+}
+
+const formatFecha = (value) => {
+  if (!value) return ""
+  const d = new Date(value)
+  if (Number.isNaN(d.getTime())) return ""
+  return d.toLocaleDateString("es-PE", { year: "numeric", month: "short", day: "2-digit" })
+}
+
+onMounted(async () => {
+  loading.value = true
+  errorMsg.value = ""
+  try {
+    const response = await axios.get("https://inscripciones.admision.unap.edu.pe/api/get-procesos")
+    if (response.data?.estado) {
+      procesos.value = Array.isArray(response.data?.res) ? response.data.res : []
+    } else {
+      procesos.value = []
+      errorMsg.value = "La API respondió en un formato inesperado."
+    }
+  } catch (error) {
+    procesos.value = []
+    errorMsg.value = "Error al cargar procesos."
+    console.error("Error al cargar procesos:", error)
+  } finally {
+    loading.value = false
+  }
+})
+
+const procesosAgrupados = computed(() => {
+  const agrupado = {}
+  for (const proceso of procesos.value) {
+    const anio = proceso?.anio ?? "Sin año"
+    if (!agrupado[anio]) agrupado[anio] = []
+    agrupado[anio].push(proceso)
+  }
+  return agrupado
+})
+
+const aniosOrdenados = computed(() => {
+  return Object.keys(procesosAgrupados.value).sort((a, b) => Number(b) - Number(a))
+})
+
+/** Solo resultados (examen ya pasó) */
+const resultadosPorAnio = computed(() => {
+  const out = {}
+  for (const anio of aniosOrdenados.value) {
+    out[anio] = (procesosAgrupados.value[anio] || []).filter((p) =>
+      yaPasoFechaExamen(p?.fec_2, p?.fec_1)
+    )
+  }
+  return out
+})
+
+const hayResultados = computed(() =>
+  aniosOrdenados.value.some((anio) => (resultadosPorAnio.value[anio] || []).length > 0)
+)
+
+const linkResultados = (p) => `https://inscripciones.admision.unap.edu.pe/${p?.slug}/resultados`
+
+const estadoTag = (p) => {
+  return yaPasoFechaExamen(p?.fec_2, p?.fec_1)
+    ? { text: "FINALIZADO", color: "default" }
+    : { text: "PRÓXIMAMENTE", color: "orange" }
+}
+</script>
+
+<template>
+  <NavbarModerno />
+
+  <section id="resultados" class="convocatorias-modern">
+    <div class="section-container">
+      <div class="section-header">
+        <div class="header-with-badge">
+          <h2 class="section-title">Resultados</h2>
+        </div>
+        <p class="section-subtitle">
+          Consulta los resultados por año y proceso. Solo se muestran cuando el examen ya pasó.
+        </p>
+      </div>
+
+      <!-- Estados -->
+      <a-card class="main-convocatoria-card" :loading="loading">
+        <div class="card-badge">Resultados</div>
+
+        <template v-if="errorMsg">
+          <div style="padding: 6px 2px; color: #dc2626; font-weight: 700;">
+            {{ errorMsg }}
+          </div>
+        </template>
+
+        <template v-else-if="!hayResultados && !loading">
+          <div style="padding: 6px 2px; color: #666;">
+            Aún no hay resultados disponibles para mostrar.
+          </div>
+        </template>
+
+        <template v-else>
+          <div style="padding: 6px 2px; color:#666;">
+            Resultados disponibles organizados por año:
+          </div>
+        </template>
+      </a-card>
+
+      <!-- ✅ CADA AÑO ES SU PROPIA SECCIÓN / CARD -->
+      <div v-for="anio in aniosOrdenados" :key="anio">
+        <a-card
+          v-if="(resultadosPorAnio[anio] || []).length"
+          class="year-section-card"
+        >
+          <div class="year-header">
+            <div class="year-icon">
+              <CalendarOutlined />
+            </div>
+            <div>
+              <h3 class="year-title">Año {{ anio }}</h3>
+              <p class="year-subtitle">Procesos con resultados disponibles del {{ anio }}.</p>
+            </div>
+          </div>
+
+          <a-divider class="custom-divider" />
+
+          <!-- ✅ UNA SOLA COLUMNA -->
+          <div class="secondary-list one-col">
+            <a-card
+              v-for="proceso in resultadosPorAnio[anio]"
+              :key="proceso.id"
+              class="secondary-convocatoria-card"
+            >
+              <div class="convocatoria-header">
+                <div>
+                  <h4 class="secondary-title">
+                    EXAMEN {{ (proceso?.nombre ?? "proceso").toLowerCase() }}
+                  </h4>
+                  <p class="convocatoria-date">
+                    Examen:
+                    {{ formatFecha(proceso?.fec_2 || proceso?.fec_1) || (proceso?.fecha_examen ) }}
+                  </p>
+                </div>
+
+                <a-tag class="status-tag" :color="estadoTag(proceso).color">
+                  {{ estadoTag(proceso).text }}
+                </a-tag>
+              </div>
+
+              <div class="card-footer">
+
+
+                <a-button type="primary" ghost size="small" :href="linkResultados(proceso)" target="_blank">
+                  <template #icon><FileSearchOutlined /></template>
+                  Ver Resultados
+                </a-button>
+              </div>
+            </a-card>
+          </div>
+        </a-card>
+      </div>
+    </div>
+  </section>
+
+  <FooterModerno />
+</template>
+
+<style scoped>
+/* ====== BASE CONVOCATORIAS ====== */
+
+.convocatorias-modern {
+  position: relative;
+  padding: 40px 0;
+  font-family: "Times New Roman", Times, serif;
+  background: #fbfcff;
+  overflow: hidden;
+}
+
+.convocatorias-modern::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+
+  background-image:
+    repeating-linear-gradient(
+      to right,
+      rgba(13, 27, 82, 0.06) 0,
+      rgba(13, 27, 82, 0.06) 1px,
+      transparent 1px,
+      transparent 24px
+    ),
+    repeating-linear-gradient(
+      to bottom,
+      rgba(13, 27, 82, 0.06) 0,
+      rgba(13, 27, 82, 0.06) 1px,
+      transparent 1px,
+      transparent 24px
+    );
+  opacity: 0.55;
+}
+
+.section-container {
+  position: relative;
+  z-index: 1;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 24px;
+}
+
+.section-header {
+  text-align: center;
+  margin-bottom: 50px;
+}
+
+.header-with-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+}
+
+.section-title {
+  font-size: 2.6rem;
+  font-weight: 700;
+  color: #0d1b52;
+  margin: 0;
+}
+
+.section-subtitle {
+  font-size: 1.125rem;
+  color: #666;
+  max-width: 640px;
+  margin: 14px auto 0;
+}
+
+.new-badge :deep(.ant-badge-count) {
+  background: linear-gradient(45deg, #ff6b6b, #ffd700);
+  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
+  border-radius: 999px;
+}
+
+/* Card “estado” */
+.main-convocatoria-card {
+  position: relative;
+  border: none;
+  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.08);
+  border-radius: 16px;
+  margin-bottom: 18px;
+}
+
+.main-convocatoria-card :deep(.ant-card-body) {
+  padding: 28px;
+}
+
+.card-badge {
+  position: absolute;
+  top: -12px;
+  left: 24px;
+  background: linear-gradient(45deg, #1890ff, #52c41a);
+  color: white;
+  padding: 6px 16px;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  font-weight: 700;
+}
+
+/* ✅ CARD POR AÑO */
+.year-section-card {
+  border: none;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
+  border-radius: 16px;
+  margin-top: 18px;
+}
+
+.year-section-card :deep(.ant-card-body) {
+  padding: 22px;
+}
+
+.year-header {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.year-icon {
+  width: 44px;
+  height: 44px;
+  border-radius: 999px;
+  display: grid;
+  place-items: center;
+  background: rgba(24, 144, 255, 0.12);
+  color: #1890ff;
+  font-size: 18px;
+}
+
+.year-title {
+  margin: 0;
+  font-size: 1.35rem;
+  color: #1a237e;
+  font-weight: 700;
+  font-family: "Times New Roman", Times, serif;
+
+}
+
+.year-subtitle {
+  margin: 4px 0 0;
+  color: #666;
+  font-size: 0.95rem;
+}
+
+.custom-divider {
+  margin: 18px 0;
+}
+
+/* Cards internas */
+.secondary-convocatoria-card {
+  border: none;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
+  border-radius: 12px;
+}
+
+.secondary-convocatoria-card :deep(.ant-card-body) {
+  padding: 18px;
+}
+
+.convocatoria-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 14px;
+  margin-bottom: 14px;
+}
+
+.secondary-title {
+  margin: 0;
+  font-size: 1.05rem;
+  color: #1a237e;
+  text-transform: uppercase;
+  font-family: "Times New Roman", Times, serif;
+}
+
+.convocatoria-date {
+  color: #666;
+  margin: 6px 0 0;
+  font-size: 0.95rem;
+}
+
+.status-tag {
+  font-weight: 700;
+  padding: 4px 12px;
+  border-radius: 999px;
+  white-space: nowrap;
+}
+
+.convocatoria-desc {
+  color: #666;
+  line-height: 1.6;
+  margin: 0 0 18px;
+}
+
+.card-footer {
+  display: flex;
+  align-items: center;
+  margin-top: 12px;
+}
+
+.card-footer > :last-child {
+  margin-left: auto;           /* 👉 empuja el último a la derecha */
+}
+
+/* ✅ UNA SOLA COLUMNA SIEMPRE */
+.secondary-list.one-col {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+}
+
+@media (max-width: 992px) {
+  .section-title { font-size: 2.1rem; }
+}
+
+@media (max-width: 768px) {
+  .convocatorias-modern { padding: 55px 0; }
+}
+</style>
diff --git a/front/src/components/nabvar.vue b/front/src/components/nabvar.vue
index dc4697b..5200f44 100644
--- a/front/src/components/nabvar.vue
+++ b/front/src/components/nabvar.vue
@@ -22,7 +22,7 @@
         />
       </nav>
 
-      <div class="right-actions desktop-only">
+      <!-- <div class="right-actions desktop-only">
         <router-link
           v-if="!authStore.isAuthenticated"
           to="/login-postulante"
@@ -40,7 +40,7 @@
             Mi Portal
           </a-button>
         </router-link>
-      </div>
+      </div> -->
 
       <a-button class="mobile-menu-btn mobile-only" type="text" @click="drawerOpen = true">
         ☰
@@ -81,7 +81,7 @@
           :openKeys="mobileOpenKeys"
         />
 
-        <div class="drawer-auth">
+        <!-- <div class="drawer-auth">
           <router-link
             v-if="!authStore.isAuthenticated"
             to="/login-postulante"
@@ -105,7 +105,7 @@
               Mi Portal
             </a-button>
           </router-link>
-        </div>
+        </div> -->
       </div>
     </a-drawer>
   </a-layout-header>
@@ -144,14 +144,14 @@ const navItems = computed(() => [
       { key: "sociales", label: "Sociales" },
     ],
   },
-  { key: "procesos", label: "Procesos" },
+
   {
     key: "modalidades",
     label: "Modalidades",
     children: [
-      { key: "ordinario", label: "Ordinario" },
+      { key: "cepreuna", label: "Cepreuna" },
       { key: "extraordinario", label: "Extraordinario" },
-      { key: "sedes", label: "Sedes" },
+      { key: "general", label: "General" },
     ],
   },
   { key: "resultados", label: "Resultados" },
@@ -165,15 +165,14 @@ watch(drawerOpen, (open) => {
 
 const routesByKey = {
   inicio: "/",
-  programas: "/programas",
-  ingenierias: "/programas/ingenierias",
-  biomedicas: "/programas/biomedicas",
-  sociales: "/programas/sociales",
-  procesos: "/procesos",
+  programas: "",
+  ingenierias: "",
+  biomedicas: "",
+  sociales: "",
   modalidades: "/modalidades",
-  ordinario: "/modalidades/ordinario",
+  cepreuna: "/modalidades/cepreuna",
   extraordinario: "/modalidades/extraordinario",
-  sedes: "/modalidades/sedes",
+  general: "/modalidades/general",
   resultados: "/resultados",
 }
 
diff --git a/front/src/router/index.js b/front/src/router/index.js
index 5e8a0ac..ec4fa8f 100644
--- a/front/src/router/index.js
+++ b/front/src/router/index.js
@@ -1,16 +1,17 @@
 // router/index.js
 import { createRouter, createWebHistory } from 'vue-router'
 import Login from '../views/Login.vue'
-import Hello from '../components/WebPage.vue'
+import WebPage from '../components/WebPage.vue'
+import NotFound from '../views/NotFound.vue'
 import { useUserStore } from '../store/user'
 import { useAuthStore as usePostulanteStore } from '../store/postulanteStore'
 
 const routes = [
 
-  { path: '/', component: Hello },
-
-  { path: '/login', component: Login, meta: { guest: true } },
+  { path: '/', component: WebPage },
 
+  { path: '/account/auth/login', component: Login, meta: { guest: true } },
+  
   {
     path: '/login-postulante',
     name: 'login-postulante',
@@ -18,6 +19,35 @@ const routes = [
     meta: { guest: true },
   },
 
+    {
+    path: '/:pathMatch(.*)*',
+    name: 'NotFound',
+    component: NotFound
+  },
+  
+  {
+    path: '/resultados',
+    name: 'Resultados',
+    component: () => import('../components/WebPageSections/navbarcontent/Resultados.vue')
+  },
+    {
+    path: '/modalidades/cepreuna',
+    name: 'cepreuna',
+    component: () => import('../components/WebPageSections/navbarcontent/Cepreuna.vue')
+  },
+
+      {
+    path: '/modalidades/extraordinario',
+    name: 'extraordinario',
+    component: () => import('../components/WebPageSections/navbarcontent/Extraordinario.vue')
+  },
+    {
+    path: '/modalidades/general',
+    name: 'general',
+    component: () => import('../components/WebPageSections/navbarcontent/General.vue')
+  },
+
+
 
   {
     path: '/portal-postulante',
@@ -127,7 +157,25 @@ const routes = [
         path: '/admin/dashboard/procesos/:id/detalles',
         name: 'ProcesoAdmisionDetalles',
         component: () => import('../views/administrador/procesoadmision/ProcesoAdmisionDetalles.vue')
+      },
+            {
+        path: '/admin/dashboard/lista-calificacion',
+        name: 'CalificacionList',
+        component: () => import('../views/administrador/Procesos/CalificacionTest.vue')
+      },
+
+      {
+        path: '/admin/dashboard/lista-postulantes',
+        name: 'PostulantesList',
+        component: () => import('../views/administrador/estudiantes/ListPostulantes.vue')
+      },
+
+      {
+        path: '/admin/dashboard/noticias',
+        name: 'NoticiasAdmisionList',
+        component: () => import('../views/administrador/procesoadmision/NoticiasAdmin.vue')
       }
+
     ]
   },
 
diff --git a/front/src/store/examen.store.js b/front/src/store/examen.store.js
index c8769d0..70beb5e 100644
--- a/front/src/store/examen.store.js
+++ b/front/src/store/examen.store.js
@@ -1,7 +1,6 @@
 import { defineStore } from 'pinia'
 import api from '../axiosPostulante'
 
-
 export const useExamenStore = defineStore('examenStore', {
   state: () => ({
     procesos: [],
@@ -9,14 +8,21 @@ export const useExamenStore = defineStore('examenStore', {
     examenActual: null,
     preguntas: [],
     cargando: false,
+    calificando: false,
+    resultado: null,   
     error: null,
   }),
+
   actions: {
     async fetchProcesos() {
       try {
         this.cargando = true
         const { data } = await api.get('/examen/procesos')
-        this.procesos = data
+
+        this.procesos = (data || []).map(p => ({
+          ...p,
+          requiere_pago: p.requiere_pago === 1 || p.requiere_pago === '1' || p.requiere_pago === true
+        }))
       } catch (e) {
         this.error = e.response?.data?.message || e.message
       } finally {
@@ -27,9 +33,7 @@ export const useExamenStore = defineStore('examenStore', {
     async fetchAreas(proceso_id) {
       try {
         this.cargando = true
-        const { data } = await api.get('/examen/areas', {
-          params: { proceso_id }
-        })
+        const { data } = await api.get('/examen/areas', { params: { proceso_id } })
         this.areas = data
       } catch (e) {
         this.error = e.response?.data?.message || e.message
@@ -53,7 +57,6 @@ export const useExamenStore = defineStore('examenStore', {
       }
     },
 
-
     async fetchExamenActual() {
       try {
         this.cargando = true
@@ -94,12 +97,18 @@ export const useExamenStore = defineStore('examenStore', {
       }
     },
 
-
     async responderPregunta(preguntaId, respuesta) {
       try {
         const { data } = await api.post(`/examen/pregunta/${preguntaId}/responder`, { respuesta })
+
         const index = this.preguntas.findIndex(p => p.id === preguntaId)
-        if (index !== -1) this.preguntas[index].respuesta = respuesta
+
+        if (index !== -1 && data.success) {
+          this.preguntas[index].respuesta = respuesta
+          this.preguntas[index].es_correcta = data.correcta 
+          this.preguntas[index].puntaje = data.puntaje
+        }
+
         return data
       } catch (e) {
         this.error = e.response?.data?.message || e.message
@@ -107,11 +116,58 @@ export const useExamenStore = defineStore('examenStore', {
       }
     },
 
+    async calificarExamen(examenId) {
+      try {
+        this.error = null
+        this.calificando = true
+
+        const { data } = await api.post(`/examen/${examenId}/calificar`)
+
+        if (data?.success) {
+          this.resultado = {
+            examen_id: data.examen_id,
+            proceso_id: data.proceso_id,
+            total_puntos: data.total_puntos,
+            total_correctas: data.total_correctas,
+            total_incorrectas: data.total_incorrectas,
+            total_nulas: data.total_nulas,
+            porcentaje_correctas: data.porcentaje_correctas,
+            calificacion_sobre_20: data.calificacion_sobre_20,
+            orden_merito: data.orden_merito,
+            correctas_por_curso: data.correctas_por_curso,
+            incorrectas_por_curso: data.incorrectas_por_curso,
+            preguntas_totales_por_curso: data.preguntas_totales_por_curso,
+          }
+
+          return data
+        }
+
+        this.error = data?.mensaje || data?.message || 'No se pudo calificar el examen.'
+        return { success: false, message: this.error }
+      } catch (e) {
+        const msg = e.response?.data?.mensaje || e.response?.data?.message || e.message
+        this.error = msg
+        return { success: false, message: msg, status: e.response?.status }
+      } finally {
+        this.calificando = false
+      }
+    },
+
     async finalizarExamen(examenId) {
       try {
         const { data } = await api.post(`/examen/${examenId}/finalizar`)
-        this.examenActual = null
-        this.preguntas = []
+
+        if (data?.success) {
+          if (this.examenActual) {
+            this.examenActual.estado = 'finalizado'
+            this.examenActual.hora_fin = new Date().toISOString()
+          }
+
+          this.examenActual = null
+          this.preguntas = []
+          this.error = null
+        }
+
         return data
       } catch (e) {
         this.error = e.response?.data?.message || e.message
@@ -125,6 +181,8 @@ export const useExamenStore = defineStore('examenStore', {
       this.examenActual = null
       this.preguntas = []
       this.cargando = false
+      this.calificando = false   
+      this.resultado = null      
       this.error = null
     }
   }
diff --git a/front/src/store/noticiasPublicas.store.js b/front/src/store/noticiasPublicas.store.js
new file mode 100644
index 0000000..415e598
--- /dev/null
+++ b/front/src/store/noticiasPublicas.store.js
@@ -0,0 +1,49 @@
+import { defineStore } from "pinia"
+import api from "../axiosPostulante"
+
+export const useNoticiasPublicasStore = defineStore("noticiasPublicas", {
+  state: () => ({
+    noticias: [],
+    noticiaActual: null,
+    loading: false,
+    loadingOne: false,
+    error: null,
+  }),
+
+  actions: {
+    async fetchNoticias() {
+      this.loading = true
+      this.error = null
+      try {
+        const res = await api.get("/noticias", {
+          params: { publicado: true, per_page: 9999 },
+        })
+        this.noticias = res.data?.data ?? []
+      } catch (err) {
+        this.error = err.response?.data?.message || "Error al cargar noticias"
+        this.noticias = []
+      } finally {
+        this.loading = false
+      }
+    },
+
+    async fetchNoticia(identifier) {
+      this.loadingOne = true
+      this.error = null
+      this.noticiaActual = null
+      try {
+        const res = await api.get(`/noticias/${identifier}`)
+        this.noticiaActual = res.data?.data ?? null
+      } catch (err) {
+        this.error = err.response?.data?.message || "Error al cargar la noticia"
+        this.noticiaActual = null
+      } finally {
+        this.loadingOne = false
+      }
+    },
+
+    clearNoticiaActual() {
+      this.noticiaActual = null
+    },
+  },
+})
diff --git a/front/src/store/noticiasStore.js b/front/src/store/noticiasStore.js
new file mode 100644
index 0000000..f7e63a1
--- /dev/null
+++ b/front/src/store/noticiasStore.js
@@ -0,0 +1,207 @@
+// src/store/noticiasStore.js
+import { defineStore } from "pinia"
+import api from "../axios" // <-- cambia a tu axios (admin) si tienes otro
+
+export const useNoticiasStore = defineStore("noticias", {
+  state: () => ({
+    noticias: [],
+    noticia: null,
+
+    loading: false,
+    saving: false,
+    deleting: false,
+
+    error: null,
+
+    // paginación (si tu back manda meta)
+    meta: {
+      current_page: 1,
+      last_page: 1,
+      per_page: 9,
+      total: 0,
+    },
+
+    // filtros
+    filters: {
+      publicado: null, // true/false/null
+      categoria: "",
+      q: "",
+      per_page: 9,
+      page: 1,
+    },
+  }),
+
+  getters: {
+    // para el público: solo publicadas (si ya las filtras en backend, esto es opcional)
+    publicadas: (state) => state.noticias.filter((n) => n.publicado),
+
+    // para ordenar en frontend (opcional)
+    ordenadas: (state) =>
+      [...state.noticias].sort((a, b) => {
+        const da = a.fecha_publicacion ? new Date(a.fecha_publicacion).getTime() : 0
+        const db = b.fecha_publicacion ? new Date(b.fecha_publicacion).getTime() : 0
+        return db - da
+      }),
+  },
+
+  actions: {
+    // ========= LISTAR =========
+    async cargarNoticias(extraParams = {}) {
+      this.loading = true
+      this.error = null
+
+      try {
+        const params = {
+          per_page: this.filters.per_page,
+          page: this.filters.page,
+          ...extraParams,
+        }
+
+        if (this.filters.publicado !== null && this.filters.publicado !== "") {
+          params.publicado = this.filters.publicado ? 1 : 0
+        }
+        if (this.filters.categoria) params.categoria = this.filters.categoria
+        if (this.filters.q) params.q = this.filters.q
+
+        // Ruta agrupada:
+        // GET /api/administracion/noticias
+        const res = await api.get("/admin/noticias", { params })
+
+        this.noticias = res.data?.data ?? []
+        this.meta = res.data?.meta ?? this.meta
+      } catch (err) {
+        this.error = err.response?.data?.message || "Error al cargar noticias"
+        console.error(err)
+      } finally {
+        this.loading = false
+      }
+    },
+
+    // ========= VER 1 =========
+    async cargarNoticia(id) {
+      this.loading = true
+      this.error = null
+      try {
+        const res = await api.get(`/admin/noticias/${id}`)
+        this.noticia = res.data?.data ?? res.data
+      } catch (err) {
+        this.error = err.response?.data?.message || "Error al cargar la noticia"
+        console.error(err)
+      } finally {
+        this.loading = false
+      }
+    },
+
+    // ========= CREAR =========
+    // payload: { titulo, descripcion_corta, contenido, categoria, tag_color, fecha_publicacion, publicado, destacado, orden, link_url, link_texto, imagen(File) }
+    async crearNoticia(payload) {
+      this.saving = true
+      this.error = null
+
+      try {
+        const form = this._toFormData(payload)
+
+        const res = await api.post("/admin/noticias", form, {
+          headers: { "Content-Type": "multipart/form-data" },
+        })
+
+        const noticia = res.data?.data ?? null
+        if (noticia) {
+          // opcional: agrega arriba
+          this.noticias = [noticia, ...this.noticias]
+        }
+        return noticia
+      } catch (err) {
+        this.error = err.response?.data?.message || "Error al crear noticia"
+        console.error(err)
+        throw err
+      } finally {
+        this.saving = false
+      }
+    },
+
+    // ========= ACTUALIZAR =========
+    async actualizarNoticia(id, payload) {
+      this.saving = true
+      this.error = null
+
+      try {
+        // Si hay imagen (File), conviene multipart
+        const hasFile = payload?.imagen instanceof File
+        let res
+
+        if (hasFile) {
+          const form = this._toFormData(payload)
+
+          // Si tu ruta es PUT, axios con multipart PUT funciona.
+          res = await api.put(`/admin/noticias/${id}`, form, {
+            headers: { "Content-Type": "multipart/form-data" },
+          })
+        } else {
+          // JSON normal
+          res = await api.put(`/administracion/noticias/${id}`, payload)
+        }
+
+        const updated = res.data?.data ?? null
+
+        if (updated) {
+          this.noticias = this.noticias.map((n) => (n.id === id ? updated : n))
+          if (this.noticia?.id === id) this.noticia = updated
+        }
+
+        return updated
+      } catch (err) {
+        this.error = err.response?.data?.message || "Error al actualizar noticia"
+        console.error(err)
+        throw err
+      } finally {
+        this.saving = false
+      }
+    },
+
+    // ========= ELIMINAR =========
+    async eliminarNoticia(id) {
+      this.deleting = true
+      this.error = null
+      try {
+        await api.delete(`/admin/noticias/${id}`)
+        this.noticias = this.noticias.filter((n) => n.id !== id)
+        if (this.noticia?.id === id) this.noticia = null
+        return true
+      } catch (err) {
+        this.error = err.response?.data?.message || "Error al eliminar noticia"
+        console.error(err)
+        throw err
+      } finally {
+        this.deleting = false
+      }
+    },
+
+    // ========= Helpers =========
+    setFiltro(key, value) {
+      this.filters[key] = value
+    },
+
+    resetFiltros() {
+      this.filters = { publicado: null, categoria: "", q: "", per_page: 9, page: 1 }
+    },
+
+    _toFormData(payload = {}) {
+      const form = new FormData()
+
+      Object.entries(payload).forEach(([k, v]) => {
+        if (v === undefined || v === null) return
+
+        // booleans como 1/0 (Laravel feliz)
+        if (typeof v === "boolean") {
+          form.append(k, v ? "1" : "0")
+          return
+        }
+
+        form.append(k, v)
+      })
+
+      return form
+    },
+  },
+})
diff --git a/front/src/store/user.js b/front/src/store/user.js
index 92801c1..d334e6f 100644
--- a/front/src/store/user.js
+++ b/front/src/store/user.js
@@ -104,7 +104,7 @@ export const useUserStore = defineStore('user', {
         console.error('Error en logout:', error)
       } finally {
         this.clearAuth()
-        router.push('/login')
+        router.push('/account/auth/login')
       }
     },
 
@@ -125,7 +125,7 @@ export const useUserStore = defineStore('user', {
 
     redirectByRole() {
       if (!this.user || !this.user.roles?.length) {
-        router.push('/login')
+        router.push('/account/auth/login')
         return
       }
 
diff --git a/front/src/store/web.js b/front/src/store/web.js
new file mode 100644
index 0000000..7899991
--- /dev/null
+++ b/front/src/store/web.js
@@ -0,0 +1,41 @@
+// src/store/web.js
+import { defineStore } from "pinia"
+import api from "../axiosPostulante"
+
+export const useWebAdmisionStore = defineStore("procesoAdmision", {
+  state: () => ({
+    procesos: [],
+    loading: false,
+    error: null,
+  }),
+
+  getters: {
+    // Si hay uno VIGENTE, úsalo como principal; si no, usa el primero.
+    procesoPrincipal: (state) => {
+      if (!state.procesos?.length) return null
+      return state.procesos.find((p) => p.estado === "publicado") ?? state.procesos[0]
+    },
+
+    // Por si lo necesitas después
+    ultimoProceso: (state) => {
+      return state.procesos?.length ? state.procesos[0] : null
+    },
+  },
+
+  actions: {
+    async cargarProcesos() {
+      this.loading = true
+      this.error = null
+
+      try {
+        const response = await api.get("/procesos-admision")
+        this.procesos = response.data?.data ?? response.data ?? []
+      } catch (err) {
+        this.error = err.response?.data?.message || "Error al cargar procesos"
+        console.error(err)
+      } finally {
+        this.loading = false
+      }
+    },
+  },
+})
diff --git a/front/src/views/Login.vue b/front/src/views/Login.vue
index 6b05dfc..91db23c 100644
--- a/front/src/views/Login.vue
+++ b/front/src/views/Login.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="login-container">
     <div class="login-card">
-      <!-- Logo y título -->
+
       <div class="login-header">
         <div class="logo">
-          <!-- <img src="/logo.png" alt="Logo" /> -->
+          <img src="/logotiny.png" alt="Logo" />
         </div>
         <h2>{{ isRegister ? 'Crear Cuenta' : 'Iniciar Sesión' }}</h2>
         <p class="subtitle">
@@ -15,7 +15,6 @@
         </p>
       </div>
 
-      <!-- Formulario -->
       <a-form
         ref="formRef"
         :model="formState"
@@ -24,8 +23,7 @@
         layout="vertical"
         class="login-form"
       >
-        <!-- Nombre (solo registro) -->
-        <!-- Nombre (solo registro) -->
+
 <a-form-item v-if="isRegister" label="Nombre completo" name="name">
   <a-input
     v-model:value="formState.name"
@@ -39,7 +37,7 @@
   </a-input>
 </a-form-item>
 
-<!-- Email -->
+
 <a-form-item label="Correo electrónico" name="email">
   <a-input
     v-model:value="formState.email"
@@ -53,7 +51,7 @@
   </a-input>
 </a-form-item>
 
-<!-- Contraseña -->
+
 <a-form-item label="Contraseña" name="password">
   <a-input-password
     v-model:value="formState.password"
@@ -67,7 +65,7 @@
   </a-input-password>
 </a-form-item>
 
-<!-- Confirmar contraseña (solo registro) -->
+
 <a-form-item v-if="isRegister" label="Confirmar contraseña" name="password_confirmation">
   <a-input-password
     v-model:value="formState.password_confirmation"
@@ -81,7 +79,7 @@
   </a-input-password>
 </a-form-item>
 
-        <!-- Recordarme (solo login) -->
+
         <div v-if="!isRegister" class="remember-forgot">
           <a-checkbox v-model:checked="rememberMe">
             Recordarme
@@ -91,7 +89,6 @@
           </a-button>
         </div>
 
-        <!-- Botón principal -->
         <a-form-item>
           <a-button
             type="primary"
@@ -105,7 +102,6 @@
           </a-button>
         </a-form-item>
 
-        <!-- Cambiar modo -->
         <div class="toggle-mode">
           <span>
             {{ isRegister 
@@ -118,7 +114,6 @@
           </a-button>
         </div>
 
-        <!-- Términos (solo registro) -->
         <div v-if="isRegister" class="terms">
           <p>
             Al registrarse, acepta nuestros 
@@ -153,19 +148,18 @@ const formState = reactive({
   password_confirmation: ''
 })
 
-// Configurar notificación para que aparezca en el centro superior
 notification.config({
   placement: 'top',
   duration: 2,
   maxCount: 1,
 })
 
-// Función para mostrar toast/notification
+
 const showToast = (type, message, description = '') => {
   const config = {
     message,
     description,
-    duration: 2, // 2 segundos
+    duration: 2, 
     placement: 'top',
   }
 
@@ -187,7 +181,6 @@ const showToast = (type, message, description = '') => {
   }
 }
 
-// Reglas de validación
 const rules = {
   name: [
     { 
@@ -237,18 +230,15 @@ const rules = {
   ]
 }
 
-// Cambiar entre login/registro
 const toggleMode = () => {
   isRegister.value = !isRegister.value
   formRef.value?.resetFields()
 }
 
-// Olvidó contraseña
 const handleForgotPassword = () => {
   showToast('info', 'Recuperación de contraseña', 'Contacte al administrador del sistema')
 }
 
-// Enviar formulario
 const handleSubmit = async () => {
   try {
     loading.value = true
@@ -259,7 +249,7 @@ const handleSubmit = async () => {
         '¡Registro exitoso!', 
         'Tu cuenta ha sido creada correctamente'
       )
-      toggleMode() // Cambiar a login
+      toggleMode() 
     } else {
       await userStore.login(formState.email, formState.password)
       showToast('success', '¡Bienvenido!', 'Inicio de sesión exitoso')
@@ -267,7 +257,7 @@ const handleSubmit = async () => {
   } catch (error) {
     console.error('Error:', error)
     
-    // Extraer mensaje de error del backend
+
     let errorMessage = 'Ocurrió un error inesperado'
     let errorDetails = ''
     
@@ -317,7 +307,7 @@ const handleSubmit = async () => {
       errorDetails = 'Verifique su conexión a internet'
     }
     
-    // Mostrar error en toast
+
     showToast('error', errorMessage, errorDetails)
     
   } finally {
diff --git a/front/src/views/NotFound.vue b/front/src/views/NotFound.vue
new file mode 100644
index 0000000..0b894d3
--- /dev/null
+++ b/front/src/views/NotFound.vue
@@ -0,0 +1,124 @@
+<template>
+  <section class="modalidades-section">
+    <div class="section-container">
+      <div class="section-header">
+        <h1 class="section-title">404</h1>
+        <p class="section-subtitle">
+          La página que estás buscando no existe o fue movida.
+        </p>
+      </div>
+
+      <div class="modalidades-grid">
+
+        <a-card class="modalidad-card">
+          <div class="modalidad-icon bg-error">
+            <WarningOutlined />
+          </div>
+
+          <h4>Enlace incorrecto</h4>
+          <p>
+            Verifica que la dirección esté escrita correctamente
+            o regresa al inicio.
+          </p>
+
+          <a-button type="primary" @click="$router.push('/')">
+            Volver al Inicio
+          </a-button>
+        </a-card>
+
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { WarningOutlined } from "@ant-design/icons-vue"
+</script>
+
+<style scoped>
+.modalidades-section {
+  padding: 100px 0;
+  background: #f8f9fa;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+}
+
+.section-container {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 0 24px;
+  width: 100%;
+}
+
+.section-header {
+  text-align: center;
+  margin-bottom: 50px;
+}
+
+.section-title {
+  font-size: 5rem;
+  font-weight: 700;
+  color: #1a237e;
+  margin-bottom: 10px;
+}
+
+.section-subtitle {
+  font-size: 1.125rem;
+  color: #666;
+}
+
+.modalidades-grid {
+  display: flex;
+  justify-content: center;
+}
+
+.modalidad-card {
+  border: none;
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  text-align: center;
+  padding: 40px 32px;
+  transition: transform 0.3s ease;
+  max-width: 420px;
+  width: 100%;
+}
+
+.modalidad-card:hover {
+  transform: translateY(-4px);
+}
+
+.modalidad-icon {
+  width: 72px;
+  height: 72px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 24px;
+  color: white;
+  font-size: 32px;
+}
+
+.bg-error {
+  background: #ef4444;
+}
+
+.modalidad-card h4 {
+  margin: 0 0 12px;
+  color: #1a237e;
+}
+
+.modalidad-card p {
+  color: #666;
+  font-size: 0.95rem;
+  line-height: 1.6;
+  margin-bottom: 20px;
+}
+
+@media (max-width: 992px) {
+  .section-title {
+    font-size: 3rem;
+  }
+}
+</style>
diff --git a/front/src/views/administrador/Procesos/CalificacionTest.vue b/front/src/views/administrador/Procesos/CalificacionTest.vue
new file mode 100644
index 0000000..1c91c58
--- /dev/null
+++ b/front/src/views/administrador/Procesos/CalificacionTest.vue
@@ -0,0 +1,181 @@
+<template>
+  <div class="page-wrapper">
+    <a-card :bordered="false" class="main-card">
+
+      <!-- Header -->
+      <div class="header">
+        <h2>Gestión de Calificaciones</h2>
+        <a-button type="primary" @click="openModal()">
+          Nueva Calificación
+        </a-button>
+      </div>
+
+      <!-- Tabla -->
+      <a-table
+        :columns="columns"
+        :data-source="calificaciones"
+        :loading="loading"
+        row-key="id"
+        bordered
+      >
+        <template #actions="{ record }">
+          <a-space>
+            <a-button type="link" @click="openModal(record)">
+              Editar
+            </a-button>
+
+            <a-popconfirm
+              title="¿Seguro de eliminar?"
+              @confirm="eliminar(record.id)"
+            >
+              <a-button type="link" danger>
+                Eliminar
+              </a-button>
+            </a-popconfirm>
+          </a-space>
+        </template>
+      </a-table>
+
+    </a-card>
+
+    <!-- Modal -->
+    <a-modal
+      v-model:open="modalVisible"
+      :title="form.id ? 'Editar Calificación' : 'Nueva Calificación'"
+      @ok="guardar"
+      @cancel="cerrarModal"
+      ok-text="Guardar"
+    >
+      <a-form layout="vertical">
+        <a-form-item label="Nombre">
+          <a-input v-model:value="form.nombre" />
+        </a-form-item>
+
+        <a-form-item label="Puntos Correcta">
+          <a-input-number v-model:value="form.puntos_correcta" style="width:100%" />
+        </a-form-item>
+
+        <a-form-item label="Puntos Incorrecta">
+          <a-input-number v-model:value="form.puntos_incorrecta" style="width:100%" />
+        </a-form-item>
+
+        <a-form-item label="Puntos Nula">
+          <a-input-number v-model:value="form.puntos_nula" style="width:100%" />
+        </a-form-item>
+
+        <a-form-item label="Puntaje Máximo">
+          <a-input-number v-model:value="form.puntaje_maximo" style="width:100%" />
+        </a-form-item>
+      </a-form>
+    </a-modal>
+
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { message } from 'ant-design-vue'
+
+import api from '../../../axios'
+
+const calificaciones = ref([])
+const loading = ref(false)
+const modalVisible = ref(false)
+
+const form = ref({
+  id: null,
+  nombre: '',
+  puntos_correcta: 0,
+  puntos_incorrecta: 0,
+  puntos_nula: 0,
+  puntaje_maximo: 0
+})
+
+const columns = [
+  { title: 'Nombre', dataIndex: 'nombre' },
+  { title: 'Correcta', dataIndex: 'puntos_correcta' },
+  { title: 'Incorrecta', dataIndex: 'puntos_incorrecta' },
+  { title: 'Nula', dataIndex: 'puntos_nula' },
+  { title: 'Máximo', dataIndex: 'puntaje_maximo' },
+  { title: 'Acciones', key: 'actions', slots: { customRender: 'actions' } }
+]
+
+const cargar = async () => {
+  loading.value = true
+  try {
+    const { data } = await api .getAll()
+    calificaciones.value = data.data
+  } catch (error) {
+    message.error('Error al cargar')
+  } finally {
+    loading.value = false
+  }
+}
+
+const openModal = (record = null) => {
+  if (record) {
+    form.value = { ...record }
+  } else {
+    form.value = {
+      id: null,
+      nombre: '',
+      puntos_correcta: 0,
+      puntos_incorrecta: 0,
+      puntos_nula: 0,
+      puntaje_maximo: 0
+    }
+  }
+  modalVisible.value = true
+}
+
+const cerrarModal = () => {
+  modalVisible.value = false
+}
+
+const guardar = async () => {
+  try {
+    if (form.value.id) {
+      await api .update(form.value.id, form.value)
+      message.success('Actualizado correctamente')
+    } else {
+      await api .create(form.value)
+      message.success('Creado correctamente')
+    }
+
+    cerrarModal()
+    cargar()
+  } catch (error) {
+    message.error('Error al guardar')
+  }
+}
+
+const eliminar = async (id) => {
+  try {
+    await api .delete(id)
+    message.success('Eliminado correctamente')
+    cargar()
+  } catch (error) {
+    message.error('Error al eliminar')
+  }
+}
+
+onMounted(() => {
+  cargar()
+})
+</script>
+
+<style scoped>
+.page-wrapper {
+  padding: 24px;
+}
+
+.main-card {
+  border-radius: 12px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+</style>
diff --git a/front/src/views/administrador/areas/CursosModal.vue b/front/src/views/administrador/areas/CursosModal.vue
index 8f5f96c..442ec41 100644
--- a/front/src/views/administrador/areas/CursosModal.vue
+++ b/front/src/views/administrador/areas/CursosModal.vue
@@ -8,7 +8,6 @@
     @cancel="handleCancel"
     class="course-modal"
   >
-    <!-- Barra de búsqueda -->
     <div class="search-section">
       <a-input-search
         v-model:value="searchText"
@@ -22,7 +21,6 @@
       </a-input-search>
     </div>
 
-    <!-- Lista de cursos -->
     <div class="courses-container">
       <a-spin :spinning="loading">
         <div class="courses-list">
@@ -124,15 +122,12 @@ const filteredCursos = computed(() => {
   )
 })
 
-// Contador de cursos seleccionados
 const selectedCursosCount = computed(() => selectedCursos.value.length)
 
-// Verificar si un curso está seleccionado
 const isCursoSelected = (cursoId) => {
   return selectedCursos.value.includes(cursoId)
 }
 
-// Toggle de selección de curso
 const toggleCurso = (cursoId) => {
   const index = selectedCursos.value.indexOf(cursoId)
   if (index > -1) {
@@ -142,20 +137,17 @@ const toggleCurso = (cursoId) => {
   }
 }
 
-// Buscar cursos
+
 const handleSearch = () => {
-  // La búsqueda se maneja en computed filteredCursos
 }
 
-// Cancelar
 const handleCancel = () => {
   visible.value = false
   selectedCursos.value = []
   searchText.value = ''
-  areaStore.clearState() // Limpiar estado
+  areaStore.clearState()
 }
 
-// Guardar cambios
 const handleSave = async () => {
   try {
     const result = await areaStore.vincularCursos(props.areaId, selectedCursos.value)
@@ -171,7 +163,6 @@ const handleSave = async () => {
   }
 }
 
-// Función para cargar cursos
 const loadCursos = async () => {
   if (props.areaId) {
     await areaStore.fetchCursosPorArea(props.areaId)
@@ -180,26 +171,21 @@ const loadCursos = async () => {
   }
 }
 
-// Cargar cursos cuando se abre el modal
 watch(() => props.open, async (newVal) => {
   if (newVal && props.areaId) {
-    // Usar nextTick para asegurar que el modal esté montado
     await nextTick()
     await loadCursos()
   }
 })
 
-// También cargar cuando cambia el áreaId (por si cambia mientras el modal está abierto)
 watch(() => props.areaId, async (newVal) => {
   if (props.open && newVal) {
     await loadCursos()
   }
 })
 
-// Limpiar al cerrar
 watch(() => props.open, (newVal) => {
   if (!newVal) {
-    // Pequeño delay para permitir que la animación de cierre termine
     setTimeout(() => {
       selectedCursos.value = []
       searchText.value = ''
@@ -208,7 +194,6 @@ watch(() => props.open, (newVal) => {
   }
 })
 
-// También cargar cursos cuando el componente se monta si ya está abierto
 onMounted(() => {
   if (props.open && props.areaId) {
     loadCursos()
@@ -302,7 +287,6 @@ onMounted(() => {
   border-top: 1px solid #f0f0f0;
 }
 
-/* Scrollbar personalizado */
 .courses-container::-webkit-scrollbar {
   width: 6px;
 }
diff --git a/front/src/views/administrador/areas/ProcesosModal.vue b/front/src/views/administrador/areas/ProcesosModal.vue
index d88c50a..eace62b 100644
--- a/front/src/views/administrador/areas/ProcesosModal.vue
+++ b/front/src/views/administrador/areas/ProcesosModal.vue
@@ -8,7 +8,6 @@
     @cancel="handleCancel"
     class="process-modal"
   >
-    <!-- Barra de búsqueda -->
     <div class="search-section">
       <a-input-search
         v-model:value="searchText"
@@ -22,7 +21,6 @@
       </a-input-search>
     </div>
 
-    <!-- Lista de procesos -->
     <div class="processes-container">
       <a-spin :spinning="loading">
         <div v-if="procesosDisponibles.length === 0 && !loading" class="empty-state">
@@ -69,7 +67,7 @@
       </a-spin>
     </div>
 
-    <!-- Resumen -->
+
     <div class="summary-section">
       <a-alert
         :message="`${selectedProcesosCount} procesos seleccionados de ${procesosDisponibles.length} disponibles`"
@@ -78,7 +76,6 @@
       />
     </div>
 
-    <!-- Acciones -->
     <div class="modal-footer">
       <a-button @click="handleCancel">Cancelar</a-button>
       <a-button type="primary" @click="handleSave" :loading="loading">
@@ -125,7 +122,6 @@ const loading = computed(() => areaStore.loading)
 const procesosDisponibles = computed(() => areaStore.procesosDisponibles || [])
 const procesosVinculados = computed(() => areaStore.procesosVinculados || [])
 
-/* ================= FILTRO ================= */
 const filteredProcesos = computed(() => {
   if (!searchText.value) return procesosDisponibles.value
 
@@ -150,7 +146,6 @@ const toggleProceso = (id) => {
     : selectedProcesos.value.push(id)
 }
 
-/* ================= ACCIONES ================= */
 const handleCancel = () => {
   visible.value = false
   resetModal()
@@ -172,7 +167,7 @@ const handleSave = async () => {
 }
 
 const handleSearch = () => {
-  // La búsqueda se maneja en computed filteredProcesos
+
 }
 
 const loadProcesos = async () => {
@@ -187,7 +182,6 @@ const resetModal = () => {
   selectedProcesos.value = []
 }
 
-/* ================= WATCHERS ================= */
 watch(() => props.open, async (open) => {
   if (open && props.areaId) {
     await nextTick()
@@ -201,14 +195,12 @@ watch(() => props.areaId, async (id) => {
   }
 })
 
-// También cargar cursos cuando el componente se monta si ya está abierto
 onMounted(() => {
   if (props.open && props.areaId) {
     loadProcesos()
   }
 })
 
-// Limpiar al cerrar
 watch(() => props.open, (newVal) => {
   if (!newVal) {
     setTimeout(() => {
diff --git a/front/src/views/administrador/cursos/MarkdownLatex.vue b/front/src/views/administrador/cursos/MarkdownLatex.vue
index a169ddf..715da1c 100644
--- a/front/src/views/administrador/cursos/MarkdownLatex.vue
+++ b/front/src/views/administrador/cursos/MarkdownLatex.vue
@@ -121,11 +121,23 @@ onMounted(() => {
   list-style-type: decimal;
 }
 
-/* Fórmulas centradas */
 .markdown-content :deep(.katex-display) {
-  margin: 1em 0;
+  margin: 0.75em 0;
   text-align: center;
-  overflow-x: auto;
+
+  overflow-x: auto;     /* si es largo, que haga scroll horizontal */
+  overflow-y: hidden;   /* IMPORTANTE: no scroll vertical -> no flechas */
+}
+/* Quitar botones/flechas del scrollbar (Chrome/Edge) */
+.markdown-content :deep(.katex-display::-webkit-scrollbar-button) {
+  display: none;
+}
+.markdown-content :deep(.katex-display::-webkit-scrollbar) {
+  height: 0px;          /* Chrome/Edge */
+}
+/* Si quieres ocultar completamente la barra horizontal (opcional) */
+.markdown-content :deep(.katex-display) {
+  scrollbar-width: none; /* Firefox */
 }
 
 .markdown-content :deep(.latex-error) {
diff --git a/front/src/views/administrador/cursos/PreguntasCursoView.vue b/front/src/views/administrador/cursos/PreguntasCursoView.vue
index 82496f8..d030099 100644
--- a/front/src/views/administrador/cursos/PreguntasCursoView.vue
+++ b/front/src/views/administrador/cursos/PreguntasCursoView.vue
@@ -1,12 +1,13 @@
 <!-- components/AdminAcademia/Cursos/PreguntasCursoView.vue -->
 <template>
   <div class="preguntas-curso-view">
-    <!-- Header con navegación -->
+    <!-- Header con navegación (sticky) -->
     <div class="view-header">
       <div class="header-left">
         <a-button type="link" @click="goBack" class="back-btn">
           <ArrowLeftOutlined /> Volver a Cursos
         </a-button>
+
         <div class="header-title">
           <h2>{{ curso.nombre }}</h2>
           <div class="curso-info">
@@ -17,17 +18,18 @@
           </div>
         </div>
       </div>
+
       <div class="header-right">
-        <a-button type="primary" @click="showCreateModal">
+        <a-button type="primary" @click="showCreateModal" class="primary-cta">
           <template #icon><PlusOutlined /></template>
           Nueva Pregunta
         </a-button>
       </div>
     </div>
 
-    <!-- Estadísticas del Curso -->
+    <!-- Estadísticas -->
     <div class="curso-stats">
-      <a-card class="stat-card">
+      <a-card class="stat-card" :bordered="false">
         <div class="stat-content">
           <div class="stat-icon-wrapper" style="background: #e6f7ff;">
             <QuestionCircleOutlined style="color: #1890ff;" />
@@ -38,8 +40,8 @@
           </div>
         </div>
       </a-card>
-      
-      <a-card class="stat-card">
+
+      <a-card class="stat-card" :bordered="false">
         <div class="stat-content">
           <div class="stat-icon-wrapper" style="background: #f6ffed;">
             <CheckCircleOutlined style="color: #52c41a;" />
@@ -50,8 +52,8 @@
           </div>
         </div>
       </a-card>
-      
-      <a-card class="stat-card">
+
+      <a-card class="stat-card" :bordered="false">
         <div class="stat-content">
           <div class="stat-icon-wrapper" style="background: #fff7e6;">
             <WarningOutlined style="color: #fa8c16;" />
@@ -62,8 +64,8 @@
           </div>
         </div>
       </a-card>
-      
-      <a-card class="stat-card">
+
+      <a-card class="stat-card" :bordered="false">
         <div class="stat-content">
           <div class="stat-icon-wrapper" style="background: #fff2f0;">
             <CloseCircleOutlined style="color: #ff4d4f;" />
@@ -76,54 +78,57 @@
       </a-card>
     </div>
 
-    <!-- Filtros -->
-    <div class="filters-section">
-      <div class="filters">
-        <a-input-search
-          v-model:value="searchText"
-          placeholder="Buscar en preguntas..."
-          @search="handleSearch"
-          style="width: 300px"
-          size="large"
-        />
-        
-        <a-select
-          v-model:value="dificultadFilter"
-          placeholder="Todas las dificultades"
-          style="width: 200px; margin-left: 16px"
-          size="large"
-          @change="handleFilterChange"
-        >
-          <a-select-option value="">Todas las dificultades</a-select-option>
-          <a-select-option value="facil">Fácil</a-select-option>
-          <a-select-option value="medio">Media</a-select-option>
-          <a-select-option value="dificil">Difícil</a-select-option>
-        </a-select>
-        
-        <a-select
-          v-model:value="estadoFilter"
-          placeholder="Todos los estados"
-          style="width: 200px; margin-left: 16px"
-          size="large"
-          @change="handleFilterChange"
-        >
-          <a-select-option value="">Todos los estados</a-select-option>
-          <a-select-option value="true">Activo</a-select-option>
-          <a-select-option value="false">Inactivo</a-select-option>
-        </a-select>
-      </div>
-      
-      <div class="filter-actions">
-        <a-button @click="clearFilters" size="large">
-          <template #icon><ReloadOutlined /></template>
-          Limpiar filtros
-        </a-button>
+    <!-- Filtros (en card) -->
+    <a-card class="filters-card" :bordered="false">
+      <div class="filters-section">
+        <div class="filters">
+          <a-input-search
+            v-model:value="searchText"
+            placeholder="Buscar en preguntas..."
+            @search="handleSearch"
+            style="width: 320px"
+            size="large"
+            allow-clear
+          />
+
+          <a-select
+            v-model:value="dificultadFilter"
+            placeholder="Todas las dificultades"
+            style="width: 220px"
+            size="large"
+            @change="handleFilterChange"
+          >
+            <a-select-option value="">Todas las dificultades</a-select-option>
+            <a-select-option value="facil">Fácil</a-select-option>
+            <a-select-option value="medio">Media</a-select-option>
+            <a-select-option value="dificil">Difícil</a-select-option>
+          </a-select>
+
+          <a-select
+            v-model:value="estadoFilter"
+            placeholder="Todos los estados"
+            style="width: 220px"
+            size="large"
+            @change="handleFilterChange"
+          >
+            <a-select-option value="">Todos los estados</a-select-option>
+            <a-select-option value="true">Activo</a-select-option>
+            <a-select-option value="false">Inactivo</a-select-option>
+          </a-select>
+        </div>
+
+        <div class="filter-actions">
+          <a-button @click="clearFilters" size="large">
+            <template #icon><ReloadOutlined /></template>
+            Limpiar filtros
+          </a-button>
+        </div>
       </div>
-    </div>
+    </a-card>
 
-    <!-- Tabla de Preguntas -->
+    <!-- Tabla -->
     <div class="preguntas-table-container">
-      <a-table 
+      <a-table
         :data-source="preguntas"
         :columns="columns"
         :loading="preguntaStore.loading"
@@ -131,6 +136,8 @@
         row-key="id"
         @change="handleTableChange"
         class="preguntas-table"
+        size="middle"
+        :scroll="{ x: 980 }"
       >
         <template #bodyCell="{ column, record }">
           <!-- Dificultad -->
@@ -150,11 +157,19 @@
             />
           </template>
 
-          <!-- Vista Previa del Enunciado -->
+          <!-- Vista previa del Enunciado -->
           <template v-if="column.key === 'enunciado'">
-            <div class="enunciado-preview" v-html="getEnunciadoPreview(record.enunciado)" />
+            <a-tooltip :title="stripHtml(record.enunciado)">
+              <div class="enunciado-preview" v-html="getEnunciadoPreview(record.enunciado)" />
+            </a-tooltip>
           </template>
 
+          <!-- <template v-if="column.key === 'enunciado'">
+            <div class="enunciado-md-preview">
+              <MarkdownLatex :content="record.enunciado" />
+            </div>
+          </template> -->
+
           <!-- Fecha Creación -->
           <template v-if="column.key === 'created_at'">
             {{ formatDate(record.created_at) }}
@@ -162,33 +177,31 @@
 
           <!-- Acciones -->
           <template v-if="column.key === 'acciones'">
-            <a-space>
-              <a-button 
-                type="link" 
-                size="small"
-                @click="verPregunta(record)"
-                class="action-btn"
-              >
-                <EyeOutlined /> Ver
-              </a-button>
-              <a-button 
-                type="link" 
-                size="small"
-                @click="showEditModal(record)"
-                class="action-btn"
-              >
-                <EditOutlined /> Editar
-              </a-button>
-              <a-button 
-                type="link" 
-                size="small"
-                danger
-                @click="confirmDeletePregunta(record)"
-                class="action-btn"
-              >
-                <DeleteOutlined /> Eliminar
-              </a-button>
-            </a-space>
+            <div class="actions">
+              <a-tooltip title="Ver">
+                <a-button type="text" size="small" @click="verPregunta(record)" class="icon-action">
+                  <EyeOutlined />
+                </a-button>
+              </a-tooltip>
+
+              <a-tooltip title="Editar">
+                <a-button type="text" size="small" @click="showEditModal(record)" class="icon-action">
+                  <EditOutlined />
+                </a-button>
+              </a-tooltip>
+
+              <a-tooltip title="Eliminar">
+                <a-button
+                  type="text"
+                  size="small"
+                  danger
+                  @click="confirmDeletePregunta(record)"
+                  class="icon-action"
+                >
+                  <DeleteOutlined />
+                </a-button>
+              </a-tooltip>
+            </div>
           </template>
         </template>
       </a-table>
@@ -203,23 +216,19 @@
       @cancel="handleModalPreguntaCancel"
       width="1200px"
       class="pregunta-modal"
+      destroy-on-close
     >
-      <a-form
-        ref="formPreguntaRef"
-        :model="formPreguntaState"
-        :rules="formPreguntaRules"
-        layout="vertical"
-      >
-        <!-- Sección del Enunciado -->
-        <a-card size="small" class="section-card">
+      <a-form ref="formPreguntaRef" :model="formPreguntaState" :rules="formPreguntaRules" layout="vertical">
+        <!-- Enunciado -->
+        <a-card size="small" class="section-card" :bordered="false">
           <template #title>
             <div class="section-title">
               <span>Enunciado de la Pregunta</span>
             </div>
           </template>
-          
-          <a-form-item 
-            label="Texto del Enunciado *" 
+
+          <a-form-item
+            label="Texto del Enunciado *"
             name="enunciado"
             :validate-status="getFieldStatus('enunciado')"
             :help="getFieldHelp('enunciado')"
@@ -230,6 +239,7 @@
                   <span>Editor</span>
                   <a-tag color="blue">Markdown & LaTeX</a-tag>
                 </div>
+
                 <a-textarea
                   v-model:value="formPreguntaState.enunciado"
                   placeholder="Escribe el enunciado principal de la pregunta..."
@@ -239,17 +249,18 @@
                   @input="handleEnunciadoInput"
                   class="markdown-editor"
                 />
+
                 <div class="editor-tips">
-                  <small>
-                    <strong>Tips:</strong> Usa **negrita**, *cursiva*, $$fórmulas$$, `código`
-                  </small>
+                  <small><strong>Tips:</strong> **negrita**, *cursiva*, $$fórmulas$$, `código`</small>
                 </div>
               </div>
+
               <div class="preview-column">
                 <div class="editor-header">
                   <span>Vista Previa</span>
                   <a-tag color="green">Actualización en tiempo real</a-tag>
                 </div>
+
                 <div class="preview-content">
                   <div v-if="formPreguntaState.enunciado" class="markdown-preview">
                     <MarkdownLatex :content="formPreguntaState.enunciado" />
@@ -263,10 +274,8 @@
             </div>
           </a-form-item>
 
-          <!-- Subida de imágenes para el enunciado -->
-          <a-form-item 
-            label="Imágenes del Enunciado (Opcional)"
-          >
+          <!-- Imágenes del enunciado -->
+          <a-form-item label="Imágenes del Enunciado (Opcional)">
             <div class="upload-section">
               <a-upload
                 v-model:file-list="imagenesEnunciadoFiles"
@@ -283,14 +292,18 @@
                   <div class="ant-upload-hint">Máx. 5 imágenes, 2MB c/u</div>
                 </div>
               </a-upload>
-              
-              <!-- Vista previa de imágenes existentes (solo en edición) -->
-              <div v-if="isEditingPregunta && formPreguntaState.imagenes_existentes?.length" class="existing-images">
+
+              <div
+                v-if="isEditingPregunta && formPreguntaState.imagenes_existentes?.length"
+                class="existing-images"
+              >
                 <h4>Imágenes existentes:</h4>
                 <div class="image-grid">
-                  <div v-for="(imagen, index) in formPreguntaState.imagenes_existentes" 
-                       :key="'existente-'+index" 
-                       class="image-item">
+                  <div
+                    v-for="(imagen, index) in formPreguntaState.imagenes_existentes"
+                    :key="'existente-'+index"
+                    class="image-item"
+                  >
                     <img :src="getImageUrl(imagen)" :alt="'Imagen ' + (index+1)" />
                     <a-button
                       type="link"
@@ -306,16 +319,15 @@
             </div>
           </a-form-item>
 
-          <!-- Enunciado Adicional con vista previa -->
-          <a-form-item 
-            label="Enunciado Adicional (Opcional)" 
-          >
-            <div class="editor-container">
+          <!-- Enunciado adicional -->
+          <a-form-item label="Enunciado Adicional (Opcional)">
+            <div class="editor-container editor-small">
               <div class="editor-column">
                 <div class="editor-header">
                   <span>Editor</span>
                   <a-tag color="blue">Markdown & LaTeX</a-tag>
                 </div>
+
                 <a-textarea
                   v-model:value="formPreguntaState.enunciado_adicional"
                   placeholder="Información adicional, contexto o detalles importantes..."
@@ -324,10 +336,12 @@
                   class="markdown-editor"
                 />
               </div>
+
               <div class="preview-column">
                 <div class="editor-header">
                   <span>Vista Previa</span>
                 </div>
+
                 <div class="preview-content">
                   <div v-if="formPreguntaState.enunciado_adicional" class="markdown-preview">
                     <MarkdownLatex :content="formPreguntaState.enunciado_adicional" />
@@ -342,48 +356,79 @@
           </a-form-item>
         </a-card>
 
-        <!-- Sección de Opciones -->
-        <a-card size="small" class="section-card">
+        <!-- Opciones (CON LaTeX/Markdown + preview) -->
+        <a-card size="small" class="section-card" :bordered="false">
           <template #title>
             <div class="section-title">
               <span>Opciones de Respuesta</span>
-              <span class="section-subtitle">(Mínimo 2 opciones, selecciona la correcta)</span>
+              <span class="section-subtitle">(Mínimo 2, marca la correcta)</span>
             </div>
           </template>
-          
-          <div class="opciones-container">
-            <div v-for="(opcion, index) in formPreguntaState.opciones" 
-                 :key="index" 
-                 class="opcion-item"
-                 :class="{ 'correct-option': formPreguntaState.respuesta_correcta === opcion }">
-              <div class="opcion-header">
-                <div class="opcion-label">
+
+          <div class="opciones-grid">
+            <div
+              v-for="(opcion, index) in formPreguntaState.opciones"
+              :key="index"
+              class="opcion-card"
+              :class="{ 'is-correct': formPreguntaState.respuesta_correcta === opcion }"
+            >
+              <div class="opcion-top">
+                <div class="opcion-badge">
                   <span class="opcion-letter">{{ String.fromCharCode(65 + index) }}</span>
-                  <a-input
-                    v-model:value="formPreguntaState.opciones[index]"
-                    placeholder="Texto de la opción..."
-                    @change="updateOpcion(index, $event.target.value)"
-                    class="opcion-input"
-                  />
+                  <a-tag color="blue" class="mini-tag">Markdown & LaTeX</a-tag>
                 </div>
-                <div class="opcion-actions">
+
+                <div class="opcion-controls">
                   <a-radio
                     :checked="formPreguntaState.respuesta_correcta === opcion"
                     @change="() => setRespuestaCorrecta(opcion)"
                   >
                     Correcta
                   </a-radio>
+
                   <a-button
                     v-if="formPreguntaState.opciones.length > 2"
-                    type="link"
+                    type="text"
                     danger
                     @click="removeOpcion(index)"
-                    class="remove-opcion-btn"
+                    class="icon-btn"
                   >
-                    <DeleteOutlined /> Eliminar
+                    <DeleteOutlined />
                   </a-button>
                 </div>
               </div>
+
+              <div class="opcion-editor-wrap">
+                <div class="opcion-editor">
+                  <a-textarea
+                    v-model:value="formPreguntaState.opciones[index]"
+                    placeholder="Escribe la opción... (puedes usar $$latex$$, **negrita**, listas, etc.)"
+                    :rows="4"
+                    class="markdown-editor"
+                    @change="updateOpcion(index, $event.target.value)"
+                  />
+                  <div class="editor-tips compact">
+                    <small><strong>Ej:</strong> $$\\int_0^1 x^2 dx$$ · **texto** · `código`</small>
+                  </div>
+                </div>
+
+                <div class="opcion-preview">
+                  <div class="preview-header">
+                    <span>Vista previa</span>
+                    <a-tag color="green" class="mini-tag">Live</a-tag>
+                  </div>
+
+                  <div class="preview-content option-preview-content">
+                    <div v-if="formPreguntaState.opciones[index]" class="markdown-preview">
+                      <MarkdownLatex :content="formPreguntaState.opciones[index]" />
+                    </div>
+                    <div v-else class="empty-preview">
+                      <EyeOutlined style="font-size: 20px; color: #ccc;" />
+                      <p>La opción se verá aquí...</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
 
@@ -392,28 +437,28 @@
             @click="addOpcion"
             block
             :disabled="formPreguntaState.opciones.length >= 5"
+            class="add-opcion-btn"
           >
             <PlusOutlined /> Agregar Opción ({{ formPreguntaState.opciones.length }}/5)
           </a-button>
         </a-card>
 
-        <!-- Sección de Explicación -->
-        <a-card size="small" class="section-card">
+        <!-- Explicación -->
+        <a-card size="small" class="section-card" :bordered="false">
           <template #title>
             <div class="section-title">
               <span>Explicación y Retroalimentación</span>
             </div>
           </template>
-          
-          <a-form-item 
-            label="Explicación de la Respuesta Correcta (Opcional)"
-          >
+
+          <a-form-item label="Explicación de la Respuesta Correcta (Opcional)">
             <div class="editor-container">
               <div class="editor-column">
                 <div class="editor-header">
                   <span>Editor</span>
                   <a-tag color="blue">Markdown & LaTeX</a-tag>
                 </div>
+
                 <a-textarea
                   v-model:value="formPreguntaState.explicacion"
                   placeholder="Explica por qué esta opción es la correcta..."
@@ -421,16 +466,17 @@
                   @input="handleExplicacionInput"
                   class="markdown-editor"
                 />
+
                 <div class="editor-tips">
-                  <small>
-                    <strong>Tips:</strong> Usa $$fórmulas$$ para ecuaciones, **importante**, listas con *
-                  </small>
+                  <small><strong>Tips:</strong> Usa $$fórmulas$$, **importante**, listas con *</small>
                 </div>
               </div>
+
               <div class="preview-column">
                 <div class="editor-header">
                   <span>Vista Previa</span>
                 </div>
+
                 <div class="preview-content">
                   <div v-if="formPreguntaState.explicacion" class="markdown-preview">
                     <MarkdownLatex :content="formPreguntaState.explicacion" />
@@ -444,10 +490,8 @@
             </div>
           </a-form-item>
 
-          <!-- Subida de imágenes para la explicación -->
-          <a-form-item 
-            label="Imágenes de la Explicación (Opcional)"
-          >
+          <!-- Imágenes de explicación -->
+          <a-form-item label="Imágenes de la Explicación (Opcional)">
             <div class="upload-section">
               <a-upload
                 v-model:file-list="imagenesExplicacionFiles"
@@ -464,14 +508,18 @@
                   <div class="ant-upload-hint">Máx. 3 imágenes, 2MB c/u</div>
                 </div>
               </a-upload>
-              
-              <!-- Vista previa de imágenes existentes (solo en edición) -->
-              <div v-if="isEditingPregunta && formPreguntaState.imagenes_explicacion_existentes?.length" class="existing-images">
+
+              <div
+                v-if="isEditingPregunta && formPreguntaState.imagenes_explicacion_existentes?.length"
+                class="existing-images"
+              >
                 <h4>Imágenes existentes:</h4>
                 <div class="image-grid">
-                  <div v-for="(imagen, index) in formPreguntaState.imagenes_explicacion_existentes" 
-                       :key="'exp-existente-'+index" 
-                       class="image-item">
+                  <div
+                    v-for="(imagen, index) in formPreguntaState.imagenes_explicacion_existentes"
+                    :key="'exp-existente-'+index"
+                    class="image-item"
+                  >
                     <img :src="getImageUrl(imagen)" :alt="'Imagen ' + (index+1)" />
                     <a-button
                       type="link"
@@ -489,25 +537,22 @@
         </a-card>
 
         <!-- Configuración -->
-        <a-card size="small" class="section-card">
+        <a-card size="small" class="section-card" :bordered="false">
           <template #title>
             <div class="section-title">
               <span>Configuración</span>
             </div>
           </template>
-          
+
           <div class="config-row">
-            <a-form-item 
-              label="Nivel de Dificultad *" 
+            <a-form-item
+              label="Nivel de Dificultad *"
               name="nivel_dificultad"
               :validate-status="getFieldStatus('nivel_dificultad')"
               :help="getFieldHelp('nivel_dificultad')"
               class="config-item"
             >
-              <a-select
-                v-model:value="formPreguntaState.nivel_dificultad"
-                placeholder="Selecciona la dificultad"
-              >
+              <a-select v-model:value="formPreguntaState.nivel_dificultad" placeholder="Selecciona la dificultad">
                 <a-select-option value="facil">
                   <div class="dificultad-option">
                     <CheckCircleOutlined style="color: #52c41a;" />
@@ -529,10 +574,7 @@
               </a-select>
             </a-form-item>
 
-            <a-form-item 
-              label="Estado" 
-              class="config-item"
-            >
+            <a-form-item label="Estado" class="config-item">
               <a-switch
                 v-model:checked="formPreguntaState.activo"
                 :checked-children="'Activo'"
@@ -556,29 +598,26 @@
       </a-form>
     </a-modal>
 
-    <!-- Modal de Vista de Pregunta -->
+    <!-- Modal Vista de Pregunta -->
     <a-modal
       v-model:open="verPreguntaModalVisible"
       :title="'Vista de Pregunta'"
       width="800px"
       :footer="null"
       @cancel="verPreguntaModalVisible = false"
+      destroy-on-close
     >
       <div class="pregunta-view" v-if="preguntaSeleccionada">
-        
-        <!-- 1. Enunciado principal -->
         <div class="enunciado-principal">
           <MarkdownLatex :content="preguntaSeleccionada.enunciado" />
-        </div>
+        
 
-        <!-- 2. Imágenes del enunciado -->
-        <div v-if="preguntaSeleccionada.imagenes && preguntaSeleccionada.imagenes.length" 
-             class="imagenes-enunciado">
+        <div v-if="preguntaSeleccionada.imagenes && preguntaSeleccionada.imagenes.length" class="imagenes-enunciado">
           <div class="imagenes-grid">
-            <img 
-              v-for="(imagen, index) in preguntaSeleccionada.imagenes" 
+            <img
+              v-for="(imagen, index) in preguntaSeleccionada.imagenes"
               :key="index"
-              :src="imagen" 
+              :src="imagen"
               :alt="'Imagen ' + (index+1)"
               @click="verImagen(imagen)"
               class="clickable-image centered-image"
@@ -586,41 +625,40 @@
           </div>
         </div>
 
-        <!-- 3. Enunciado adicional -->
-        <div v-if="preguntaSeleccionada.enunciado_adicional" class="enunciado-adicional">
-          <h4>Información Adicional:</h4>
+        <div v-if="preguntaSeleccionada.enunciado_adicional" >
           <MarkdownLatex :content="preguntaSeleccionada.enunciado_adicional" />
         </div>
-
-        <!-- 4. Opciones -->
+        </div>
         <div class="opciones-view">
           <h4>Opciones de Respuesta:</h4>
-          <div 
-            v-for="(opcion, index) in (preguntaSeleccionada.opciones || [])" 
+          <div
+            v-for="(opcion, index) in (preguntaSeleccionada.opciones || [])"
             :key="index"
             class="opcion-view"
             :class="{ correcta: opcion === preguntaSeleccionada.respuesta_correcta }"
           >
             <div class="opcion-letter">{{ String.fromCharCode(65 + index) }}.</div>
-            <div class="opcion-text">{{ opcion }}</div>
+            <div class="opcion-text">
+              <MarkdownLatex :content="opcion" />
+            </div>
             <div class="opcion-correct" v-if="opcion === preguntaSeleccionada.respuesta_correcta">
               <CheckCircleOutlined style="color: #52c41a; margin-left: 8px;" />
             </div>
           </div>
         </div>
 
-        <!-- 5. Explicación -->
         <div v-if="preguntaSeleccionada.explicacion" class="explicacion-view">
           <h4>Explicación:</h4>
           <MarkdownLatex :content="preguntaSeleccionada.explicacion" />
         </div>
 
-        <!-- 6. Imágenes de la explicación -->
-        <div v-if="preguntaSeleccionada.imagenes_explicacion && preguntaSeleccionada.imagenes_explicacion.length" 
-             class="imagenes-explicacion">
+        <div
+          v-if="preguntaSeleccionada.imagenes_explicacion && preguntaSeleccionada.imagenes_explicacion.length"
+          class="imagenes-explicacion"
+        >
           <div class="imagenes-grid">
-            <img 
-              v-for="(imagen, index) in preguntaSeleccionada.imagenes_explicacion" 
+            <img
+              v-for="(imagen, index) in preguntaSeleccionada.imagenes_explicacion"
               :key="index"
               :src="getImageUrl(imagen)"
               :alt="'Imagen ' + (index+1)"
@@ -630,7 +668,6 @@
           </div>
         </div>
 
-        <!-- 7. Información adicional -->
         <div class="info-adicional">
           <a-divider />
           <div class="info-row">
@@ -654,7 +691,7 @@
       </div>
     </a-modal>
 
-    <!-- Modal de Confirmación para Eliminar Pregunta -->
+    <!-- Modal Confirmación Eliminar -->
     <a-modal
       v-model:open="deletePreguntaModalVisible"
       title="Eliminar Pregunta"
@@ -663,6 +700,7 @@
       ok-text="Eliminar"
       cancel-text="Cancelar"
       ok-type="danger"
+      destroy-on-close
     >
       <div class="delete-confirm-content">
         <a-alert
@@ -679,10 +717,12 @@
       </div>
     </a-modal>
 
+    <!-- Preview Upload -->
     <a-modal :open="previewVisible" :title="previewTitle" :footer="null" @cancel="previewVisible = false">
       <img alt="Vista previa" style="width: 100%" :src="previewImage" />
     </a-modal>
 
+    <!-- Imagen grande -->
     <a-modal v-model:open="modalImagenVisible" :footer="null" @cancel="modalImagenVisible = false">
       <img :src="imagenGrande" style="width: 100%" />
     </a-modal>
@@ -761,7 +801,7 @@ const pagination = reactive({
   showTotal: (total, range) => `${range[0]}-${range[1]} de ${total} preguntas`
 })
 
-// Formulario de Pregunta
+// Formulario
 const formPreguntaState = reactive({
   id: null,
   curso_id: null,
@@ -776,87 +816,51 @@ const formPreguntaState = reactive({
   imagenes_explicacion_existentes: []
 })
 
-// Funciones de validación manual
+// Validación manual
 const validarFormulario = () => {
   const errors = []
-  
-  // Validar opciones
   const opcionesValidas = formPreguntaState.opciones.filter(op => op && op.trim() !== '')
-  if (opcionesValidas.length < 2) {
-    errors.push('Debe completar al menos 2 opciones')
-  }
-  
-  // Verificar duplicados
+
+  if (opcionesValidas.length < 2) errors.push('Debe completar al menos 2 opciones')
+
   const opcionesSet = new Set(opcionesValidas.map(op => op.trim().toLowerCase()))
-  if (opcionesSet.size !== opcionesValidas.length) {
-    errors.push('No puede haber opciones duplicadas')
-  }
-  
-  // Validar respuesta correcta
+  if (opcionesSet.size !== opcionesValidas.length) errors.push('No puede haber opciones duplicadas')
+
   if (!formPreguntaState.respuesta_correcta || formPreguntaState.respuesta_correcta.trim() === '') {
     errors.push('Debe seleccionar una respuesta correcta')
   } else if (!opcionesValidas.includes(formPreguntaState.respuesta_correcta)) {
     errors.push('La respuesta correcta debe estar entre las opciones')
   }
-  
+
   return errors
 }
 
-// Reglas de validación (solo campos básicos, opciones se validan manualmente)
+// Reglas (solo básicos)
 const formPreguntaRules = {
   enunciado: [
     { required: true, message: 'El enunciado es requerido', trigger: 'blur' },
     { min: 5, message: 'El enunciado debe tener al menos 5 caracteres', trigger: 'blur' }
   ],
-  nivel_dificultad: [
-    { required: true, message: 'La dificultad es requerida', trigger: 'change' }
-  ]
+  nivel_dificultad: [{ required: true, message: 'La dificultad es requerida', trigger: 'change' }]
 }
 
-// Columnas de la tabla de preguntas
+// Columnas
 const columns = [
-  {
-    title: 'ID',
-    dataIndex: 'id',
-    key: 'id',
-    width: 80
-  },
-  {
-    title: 'Enunciado',
-    dataIndex: 'enunciado',
-    key: 'enunciado',
-    ellipsis: true
-  },
-  {
-    title: 'Dificultad',
-    dataIndex: 'nivel_dificultad',
-    key: 'nivel_dificultad',
-    width: 120
-  },
-  {
-    title: 'Estado',
-    dataIndex: 'activo',
-    key: 'activo',
-    width: 100
-  },
-  {
-    title: 'Creado',
-    dataIndex: 'created_at',
-    key: 'created_at',
-    width: 150
-  },
-  {
-    title: 'Acciones',
-    key: 'acciones',
-    width: 200,
-    align: 'center'
-  }
+  { title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
+  { title: 'Enunciado', dataIndex: 'enunciado', key: 'enunciado', ellipsis: true, minWidth: 360 },
+  { title: 'Dificultad', dataIndex: 'nivel_dificultad', key: 'nivel_dificultad', width: 130 },
+  { title: 'Estado', dataIndex: 'activo', key: 'activo', width: 110 },
+  { title: 'Creado', dataIndex: 'created_at', key: 'created_at', width: 150 },
+  { title: 'Acciones', key: 'acciones', width: 160, align: 'center', fixed: 'right' }
 ]
 
 // Computed
 const preguntas = computed(() => preguntaStore.preguntas)
 
-// Métodos para manejar imágenes
+// Utils
+const stripHtml = (html) => (html ? String(html).replace(/<[^>]*>/g, '') : '')
+
+// Imágenes
 const beforeUpload = (file) => {
   const isImage = file.type.startsWith('image/')
   const isLt2M = file.size / 1024 / 1024 < 2
@@ -865,46 +869,37 @@ const beforeUpload = (file) => {
     message.error('Solo se pueden subir imágenes!')
     return false
   }
-
   if (!isLt2M) {
     message.error('La imagen debe ser menor a 2MB!')
     return false
   }
-
-  return false // Devolver false para manejar la subida manualmente
+  return false
 }
 
 const handleRemoveImagenEnunciado = (file) => {
   const index = imagenesEnunciadoFiles.value.findIndex(f => f.uid === file.uid)
-  if (index !== -1) {
-    imagenesEnunciadoFiles.value.splice(index, 1)
-  }
+  if (index !== -1) imagenesEnunciadoFiles.value.splice(index, 1)
 }
 
 const handleRemoveImagenExplicacion = (file) => {
   const index = imagenesExplicacionFiles.value.findIndex(f => f.uid === file.uid)
-  if (index !== -1) {
-    imagenesExplicacionFiles.value.splice(index, 1)
-  }
+  if (index !== -1) imagenesExplicacionFiles.value.splice(index, 1)
 }
 
 const handlePreview = async (file) => {
-  if (!file.url && !file.preview) {
-    file.preview = await getBase64(file.originFileObj)
-  }
+  if (!file.url && !file.preview) file.preview = await getBase64(file.originFileObj)
   previewImage.value = file.url || file.preview
   previewVisible.value = true
   previewTitle.value = file.name || file.url?.substring(file.url?.lastIndexOf('/') + 1) || 'Imagen'
 }
 
-const getBase64 = (file) => {
-  return new Promise((resolve, reject) => {
+const getBase64 = (file) =>
+  new Promise((resolve, reject) => {
     const reader = new FileReader()
     reader.readAsDataURL(file)
     reader.onload = () => resolve(reader.result)
     reader.onerror = error => reject(error)
   })
-}
 
 const getImageUrl = (path) => {
   if (!path) return ''
@@ -917,55 +912,41 @@ const eliminarImagenExistente = (tipo, index) => {
     formPreguntaState.imagenes_existentes = formPreguntaState.imagenes_existentes.filter((_, i) => i !== index)
     message.success('Imagen eliminada (se aplicará al guardar)')
   } else if (tipo === 'explicacion') {
-    formPreguntaState.imagenes_explicacion_existentes = formPreguntaState.imagenes_explicacion_existentes.filter((_, i) => i !== index)
+    formPreguntaState.imagenes_explicacion_existentes =
+      formPreguntaState.imagenes_explicacion_existentes.filter((_, i) => i !== index)
     message.success('Imagen eliminada (se aplicará al guardar)')
   }
 }
 
-// Métodos para ver imágenes en grande
 const verImagen = (url) => {
   imagenGrande.value = url
   modalImagenVisible.value = true
 }
 
-// Handlers para vista previa en tiempo real
-const handleEnunciadoInput = () => {
-  // Actualización automática a través de v-model
-}
-
-const handleAdicionalInput = () => {
-  // Actualización automática a través de v-model
-}
-
-const handleExplicacionInput = () => {
-  // Actualización automática a través de v-model
-}
+// Handlers live preview
+const handleEnunciadoInput = () => {}
+const handleAdicionalInput = () => {}
+const handleExplicacionInput = () => {}
 
-// Métodos principales
+// Navegación
 const goBack = () => {
   router.push({ name: 'AcademiaCursos' })
 }
 
 const fetchPreguntas = async () => {
-  const params = {
-    page: pagination.current,
-    per_page: pagination.pageSize
-  }
-  
+  const params = { page: pagination.current, per_page: pagination.pageSize }
   if (searchText.value) params.search = searchText.value
   if (dificultadFilter.value) params.nivel_dificultad = dificultadFilter.value
   if (estadoFilter.value !== '') params.activo = estadoFilter.value === 'true'
-  
+
   const data = await preguntaStore.fetchPreguntasByCurso(curso.id, params)
 
   if (data) {
-    // Actualizar estadísticas
     estadisticas.total = data.estadisticas?.total || 0
     estadisticas.facil = data.estadisticas?.facil || 0
     estadisticas.medio = data.estadisticas?.medio || 0
     estadisticas.dificil = data.estadisticas?.dificil || 0
-    
-    // Actualizar paginación
+
     if (data.preguntas) {
       pagination.total = data.preguntas.total || 0
       pagination.current = data.preguntas.current_page || 1
@@ -977,16 +958,13 @@ const fetchPreguntas = async () => {
 const loadCursoInfo = async () => {
   const cursoId = parseInt(route.params.id)
   curso.id = cursoId
-  
+
   const cursoEncontrado = cursoStore.cursos.find(c => c.id === cursoId)
-  
-  if (cursoEncontrado) {
-    Object.assign(curso, cursoEncontrado)
-  } else {
-    curso.nombre = `Curso ${cursoId}`
-  }
+  if (cursoEncontrado) Object.assign(curso, cursoEncontrado)
+  else curso.nombre = `Curso ${cursoId}`
 }
 
+// Modal create
 const showCreateModal = () => {
   isEditingPregunta.value = false
   resetPreguntaForm()
@@ -995,29 +973,31 @@ const showCreateModal = () => {
   preguntaStore.errors = null
 }
 
+// Modal edit
 const showEditModal = (pregunta) => {
   isEditingPregunta.value = true
   resetPreguntaForm()
-  
-  // Llenar formulario con datos de la pregunta
+
   formPreguntaState.id = pregunta.id
   formPreguntaState.curso_id = curso.id
   formPreguntaState.enunciado = pregunta.enunciado
   formPreguntaState.enunciado_adicional = pregunta.enunciado_adicional || ''
-  formPreguntaState.opciones = pregunta.opciones && Array.isArray(pregunta.opciones) ? pregunta.opciones : ['']
+
+  // Garantizar mínimo 2 opciones
+  const ops = (pregunta.opciones && Array.isArray(pregunta.opciones)) ? pregunta.opciones : ['', '']
+  formPreguntaState.opciones = ops.length >= 2 ? ops : [...ops, '']
+
   formPreguntaState.respuesta_correcta = pregunta.respuesta_correcta || ''
   formPreguntaState.explicacion = pregunta.explicacion || ''
   formPreguntaState.nivel_dificultad = pregunta.nivel_dificultad
   formPreguntaState.activo = pregunta.activo
-  
-  // Cargar imágenes existentes
+
   formPreguntaState.imagenes_existentes = pregunta.imagenes || []
   formPreguntaState.imagenes_explicacion_existentes = pregunta.imagenes_explicacion || []
-  
-  // Limpiar archivos nuevos
+
   imagenesEnunciadoFiles.value = []
   imagenesExplicacionFiles.value = []
-  
+
   modalPreguntaVisible.value = true
   preguntaStore.errors = null
 }
@@ -1046,19 +1026,14 @@ const handleDeletePregunta = async () => {
 
 const handleModalPreguntaOk = async () => {
   try {
-    // Validar campos básicos con Ant Design
     await formPreguntaRef.value.validateFields()
-    
-    // Luego validar opciones y respuesta correcta manualmente
+
     const erroresValidacion = validarFormulario()
     if (erroresValidacion.length > 0) {
-      erroresValidacion.forEach(error => {
-        message.error(error)
-      })
+      erroresValidacion.forEach(err => message.error(err))
       return
     }
-    
-    // Si pasa todas las validaciones, proceder
+
     await submitPreguntaForm()
   } catch (error) {
     console.log('Validación fallida:', error)
@@ -1073,47 +1048,28 @@ const handleModalPreguntaCancel = () => {
 
 const submitPreguntaForm = async () => {
   try {
-
     const erroresValidacion = validarFormulario()
     if (erroresValidacion.length > 0) {
-      erroresValidacion.forEach(error => message.error(error))
+      erroresValidacion.forEach(err => message.error(err))
       return
     }
 
-    // Crear FormData
     const formData = new FormData()
     formData.append('curso_id', formPreguntaState.curso_id)
     formData.append('enunciado', formPreguntaState.enunciado)
     formData.append('nivel_dificultad', formPreguntaState.nivel_dificultad)
     formData.append('activo', formPreguntaState.activo ? 1 : 0)
 
-    if (formPreguntaState.enunciado_adicional) {
-      formData.append('enunciado_adicional', formPreguntaState.enunciado_adicional)
-    }
-    if (formPreguntaState.explicacion) {
-      formData.append('explicacion', formPreguntaState.explicacion)
-    }
+    if (formPreguntaState.enunciado_adicional) formData.append('enunciado_adicional', formPreguntaState.enunciado_adicional)
+    if (formPreguntaState.explicacion) formData.append('explicacion', formPreguntaState.explicacion)
 
-    // Opciones
     const opcionesValidas = formPreguntaState.opciones.filter(op => op && op.trim() !== '')
     formData.append('opciones', JSON.stringify(opcionesValidas))
     formData.append('respuesta_correcta', formPreguntaState.respuesta_correcta)
 
-    // NUEVAS IMÁGENES DEL ENUNCIADO
-    imagenesEnunciadoFiles.value.forEach(file => {
-      if (file.originFileObj) {
-        formData.append('imagenes[]', file.originFileObj)
-      }
-    })
+    imagenesEnunciadoFiles.value.forEach(file => file.originFileObj && formData.append('imagenes[]', file.originFileObj))
+    imagenesExplicacionFiles.value.forEach(file => file.originFileObj && formData.append('imagenes_explicacion[]', file.originFileObj))
 
-    // NUEVAS IMÁGENES DE EXPLICACIÓN
-    imagenesExplicacionFiles.value.forEach(file => {
-      if (file.originFileObj) {
-        formData.append('imagenes_explicacion[]', file.originFileObj)
-      }
-    })
-
-    // IMÁGENES EXISTENTES (solo arrays, nunca strings dobles)
     if (isEditingPregunta.value) {
       if (formPreguntaState.imagenes_existentes?.length) {
         formData.append('imagenes_existentes', JSON.stringify(formPreguntaState.imagenes_existentes))
@@ -1122,27 +1078,21 @@ const submitPreguntaForm = async () => {
         formData.append('imagenes_explicacion_existentes', JSON.stringify(formPreguntaState.imagenes_explicacion_existentes))
       }
 
-      // Llamar a store para actualizar
       await preguntaStore.actualizarPregunta(formPreguntaState.id, formData)
       message.success('Pregunta actualizada correctamente')
     } else {
-      // Crear nueva pregunta
       await preguntaStore.crearPregunta(formData)
       message.success('Pregunta creada correctamente')
     }
 
-    // Cerrar modal y limpiar formulario
     modalPreguntaVisible.value = false
     resetPreguntaForm()
     preguntaStore.errors = null
     await fetchPreguntas()
-
   } catch (error) {
     console.error('Error al guardar pregunta:', error)
     if (error.response && error.response.data.errors) {
-      Object.values(error.response.data.errors).forEach(errorList => {
-        errorList.forEach(err => message.error(err))
-      })
+      Object.values(error.response.data.errors).forEach(list => list.forEach(err => message.error(err)))
     } else {
       message.error('Error al guardar la pregunta')
     }
@@ -1161,7 +1111,7 @@ const togglePreguntaStatus = async (pregunta) => {
       nivel_dificultad: pregunta.nivel_dificultad,
       activo: !pregunta.activo
     }
-    
+
     await preguntaStore.actualizarPregunta(pregunta.id, payload)
     message.success(`Pregunta ${pregunta.activo ? 'desactivada' : 'activada'} correctamente`)
     await fetchPreguntas()
@@ -1182,34 +1132,38 @@ const resetPreguntaForm = () => {
   formPreguntaState.activo = true
   formPreguntaState.imagenes_existentes = []
   formPreguntaState.imagenes_explicacion_existentes = []
-  
+
   imagenesEnunciadoFiles.value = []
   imagenesExplicacionFiles.value = []
-  
-  if (formPreguntaRef.value) {
-    formPreguntaRef.value.resetFields()
-  }
+
+  if (formPreguntaRef.value) formPreguntaRef.value.resetFields()
 }
 
 const addOpcion = () => {
-  if (formPreguntaState.opciones.length < 5) {
-    formPreguntaState.opciones.push('')
-  }
+  if (formPreguntaState.opciones.length < 5) formPreguntaState.opciones.push('')
 }
 
 const removeOpcion = (index) => {
-  if (formPreguntaState.opciones.length > 2) {
-    const opcionEliminada = formPreguntaState.opciones[index]
-    formPreguntaState.opciones.splice(index, 1)
-    // Si eliminamos la opción correcta, limpiar respuesta_correcta
-    if (opcionEliminada === formPreguntaState.respuesta_correcta) {
-      formPreguntaState.respuesta_correcta = ''
-    }
+  if (formPreguntaState.opciones.length <= 2) return
+
+  const opcionEliminada = formPreguntaState.opciones[index]
+  formPreguntaState.opciones.splice(index, 1)
+
+  if (opcionEliminada === formPreguntaState.respuesta_correcta) {
+    formPreguntaState.respuesta_correcta = ''
   }
 }
 
+/**
+ * Importante: si el usuario edita el texto de la opción marcada como correcta,
+ * actualizamos también respuesta_correcta para que no se “desincronice”.
+ */
 const updateOpcion = (index, value) => {
+  const oldValue = formPreguntaState.opciones[index]
   formPreguntaState.opciones[index] = value
+  if (formPreguntaState.respuesta_correcta === oldValue) {
+    formPreguntaState.respuesta_correcta = value
+  }
 }
 
 const setRespuestaCorrecta = (opcion) => {
@@ -1243,49 +1197,32 @@ const handleTableChange = (paginationConfig) => {
 const formatDate = (dateString) => {
   if (!dateString) return ''
   const date = new Date(dateString)
-  return date.toLocaleDateString('es-ES', {
-    day: '2-digit',
-    month: '2-digit',
-    year: 'numeric'
-  })
+  return date.toLocaleDateString('es-ES', { day: '2-digit', month: '2-digit', year: 'numeric' })
 }
 
 const formatDificultad = (dificultad) => {
-  const map = {
-    'facil': 'Fácil',
-    'medio': 'Media',
-    'dificil': 'Difícil'
-  }
+  const map = { facil: 'Fácil', medio: 'Media', dificil: 'Difícil' }
   return map[dificultad] || dificultad
 }
 
 const getDificultadColor = (dificultad) => {
-  const map = {
-    'facil': 'green',
-    'medio': 'orange',
-    'dificil': 'red'
-  }
+  const map = { facil: 'green', medio: 'orange', dificil: 'red' }
   return map[dificultad] || 'default'
 }
 
 const getEnunciadoPreview = (enunciado) => {
   if (!enunciado) return ''
-  // Remover HTML tags y limitar a 100 caracteres
-  const text = enunciado.replace(/<[^>]*>/g, '')
-  return text.length > 100 ? text.substring(0, 100) + '...' : text
+  const text = stripHtml(enunciado)
+  return text.length > 140 ? text.substring(0, 140) + '...' : text
 }
 
 const getFieldStatus = (fieldName) => {
-  if (preguntaStore.errors && preguntaStore.errors[fieldName]) {
-    return 'error'
-  }
+  if (preguntaStore.errors && preguntaStore.errors[fieldName]) return 'error'
   return ''
 }
 
 const getFieldHelp = (fieldName) => {
-  if (preguntaStore.errors && preguntaStore.errors[fieldName]) {
-    return preguntaStore.errors[fieldName][0]
-  }
+  if (preguntaStore.errors && preguntaStore.errors[fieldName]) return preguntaStore.errors[fieldName][0]
   return ''
 }
 
@@ -1297,22 +1234,31 @@ onMounted(async () => {
 </script>
 
 <style scoped>
+/* Layout general */
 .preguntas-curso-view {
   padding: 0;
 }
 
+/* Header sticky */
 .view-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: rgba(255, 255, 255, 0.92);
+  backdrop-filter: blur(8px);
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 24px;
-  padding: 0 8px;
+  padding: 12px 8px;
+  margin-bottom: 16px;
+  border-bottom: 1px solid #f0f0f0;
 }
 
 .header-left {
   display: flex;
   align-items: center;
   gap: 16px;
+  min-width: 0;
 }
 
 .back-btn {
@@ -1320,89 +1266,103 @@ onMounted(async () => {
   height: auto;
 }
 
+.header-title {
+  min-width: 0;
+}
+
 .header-title h2 {
   margin: 0;
-  font-size: 24px;
-  font-weight: 600;
+  font-size: 22px;
+  font-weight: 650;
   color: #1f1f1f;
+  line-height: 1.2;
 }
 
 .curso-info {
   display: flex;
   align-items: center;
-  gap: 12px;
-  margin-top: 4px;
+  gap: 10px;
+  margin-top: 6px;
 }
 
 .curso-codigo {
-  font-size: 14px;
+  font-size: 13px;
   color: #666;
   background: #f5f5f5;
-  padding: 2px 8px;
-  border-radius: 4px;
+  padding: 2px 10px;
+  border-radius: 999px;
+  border: 1px solid #ededed;
 }
 
+.primary-cta {
+  border-radius: 10px;
+  box-shadow: 0 8px 18px rgba(24,144,255,0.18);
+}
+
+/* Stats */
 .curso-stats {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 16px;
-  margin-bottom: 24px;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 14px;
+  margin-bottom: 14px;
 }
 
 .stat-card {
-  border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  border-radius: 14px;
+  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06);
   border: 1px solid #f0f0f0;
 }
 
 .stat-content {
   display: flex;
   align-items: center;
-  gap: 16px;
+  gap: 14px;
 }
 
 .stat-icon-wrapper {
-  width: 48px;
-  height: 48px;
-  border-radius: 12px;
+  width: 44px;
+  height: 44px;
+  border-radius: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 20px;
-}
-
-.stat-info {
-  flex: 1;
+  font-size: 18px;
 }
 
 .stat-value {
-  font-size: 24px;
-  font-weight: 600;
+  font-size: 22px;
+  font-weight: 700;
   color: #1f1f1f;
-  line-height: 1.3;
+  line-height: 1.2;
 }
 
 .stat-label {
-  font-size: 14px;
+  font-size: 13px;
   color: #666;
   margin-top: 2px;
 }
 
+/* Filtros */
+.filters-card {
+  border-radius: 14px;
+  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06);
+  border: 1px solid #f0f0f0;
+  margin-bottom: 14px;
+}
+
 .filters-section {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 24px;
-  padding: 0 8px;
   flex-wrap: wrap;
-  gap: 16px;
+  gap: 14px;
 }
 
 .filters {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: 16px;
+  gap: 12px;
 }
 
 .filter-actions {
@@ -1410,25 +1370,22 @@ onMounted(async () => {
   align-items: center;
 }
 
+/* Tabla */
 .preguntas-table-container {
   background: white;
-  border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  border-radius: 14px;
+  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06);
   border: 1px solid #f0f0f0;
   overflow: hidden;
 }
 
-.preguntas-table {
-  border-radius: 12px;
-}
-
 .preguntas-table :deep(.ant-table) {
-  border-radius: 12px;
+  border-radius: 14px;
 }
 
 .preguntas-table :deep(.ant-table-thead > tr > th) {
   background: #fafafa;
-  font-weight: 600;
+  font-weight: 650;
   color: #1f1f1f;
   border-bottom: 1px solid #f0f0f0;
 }
@@ -1438,36 +1395,47 @@ onMounted(async () => {
 }
 
 .preguntas-table :deep(.ant-table-tbody > tr:hover > td) {
-  background: #fafafa;
+  background: #fcfcfc;
 }
 
 .enunciado-preview {
-  max-height: 40px;
-  overflow: hidden;
-  text-overflow: ellipsis;
   display: -webkit-box;
+
   -webkit-box-orient: vertical;
+  overflow: hidden;
+  line-height: 1.35;
+  color: #333;
 }
 
-.action-btn {
-  padding: 4px 8px;
-  height: auto;
+.actions {
+  display: inline-flex;
+  gap: 6px;
+  justify-content: center;
 }
 
-.action-btn :deep(.anticon) {
-  font-size: 14px;
+.icon-action {
+  border-radius: 10px;
+}
+
+.icon-action :deep(.anticon) {
+  font-size: 16px;
 }
 
+/* Modal */
 .pregunta-modal :deep(.ant-modal-body) {
-  padding: 24px;
+  padding: 18px;
 }
 
-/* Nuevos estilos para editor con vista previa */
+/* Editor + preview (reutilizable) */
 .editor-container {
   display: flex;
-  gap: 16px;
-  margin-bottom: 16px;
-  height: 300px;
+  gap: 14px;
+  margin-bottom: 10px;
+  height: 320px;
+}
+
+.editor-container.editor-small {
+  height: 260px;
 }
 
 .editor-column,
@@ -1476,6 +1444,7 @@ onMounted(async () => {
   display: flex;
   flex-direction: column;
   height: 100%;
+  min-width: 0;
 }
 
 .editor-header {
@@ -1488,7 +1457,7 @@ onMounted(async () => {
 }
 
 .editor-header span {
-  font-weight: 500;
+  font-weight: 600;
   color: #333;
 }
 
@@ -1500,7 +1469,7 @@ onMounted(async () => {
   line-height: 1.5;
   padding: 12px;
   border: 1px solid #d9d9d9;
-  border-radius: 6px;
+  border-radius: 10px;
   background-color: #fafafa;
 }
 
@@ -1511,20 +1480,25 @@ onMounted(async () => {
 
 .editor-tips {
   margin-top: 8px;
-  padding: 8px;
+  padding: 10px;
   background-color: #f6ffed;
-  border-radius: 4px;
+  border-radius: 10px;
   border: 1px solid #b7eb8f;
   font-size: 12px;
   color: #666;
 }
 
+.editor-tips.compact {
+  padding: 8px;
+  border-radius: 10px;
+}
+
 .preview-content {
   flex: 1;
   overflow-y: auto;
   padding: 12px;
   border: 1px solid #d9d9d9;
-  border-radius: 6px;
+  border-radius: 10px;
   background-color: #fff;
   min-height: 200px;
 }
@@ -1546,58 +1520,15 @@ onMounted(async () => {
 
 .markdown-preview {
   font-size: 14px;
-  line-height: 1.6;
+  line-height: 1.65;
 }
 
-.markdown-preview :deep(h1) {
-  font-size: 1.5em;
-  margin-bottom: 0.5em;
-}
-
-.markdown-preview :deep(h2) {
-  font-size: 1.3em;
-  margin-bottom: 0.5em;
-}
-
-.markdown-preview :deep(p) {
-  margin-bottom: 1em;
-}
-
-.markdown-preview :deep(ul),
-.markdown-preview :deep(ol) {
-  margin-left: 1.5em;
-  margin-bottom: 1em;
-}
-
-.markdown-preview :deep(code) {
-  background-color: #f5f5f5;
-  padding: 2px 4px;
-  border-radius: 3px;
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-  font-size: 0.9em;
-}
-
-.markdown-preview :deep(pre) {
-  background-color: #f5f5f5;
-  padding: 12px;
-  border-radius: 6px;
-  overflow-x: auto;
-  margin-bottom: 1em;
-}
-
-.markdown-preview :deep(blockquote) {
-  border-left: 4px solid #1890ff;
-  padding-left: 12px;
-  margin-left: 0;
-  color: #666;
-  font-style: italic;
-}
-
-/* Estilos adicionales */
+/* Cards de secciones */
 .section-card {
-  margin-bottom: 16px;
-  border-radius: 8px;
+  margin-bottom: 14px;
+  border-radius: 14px;
   border: 1px solid #f0f0f0;
+  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.04);
 }
 
 .section-title {
@@ -1612,15 +1543,16 @@ onMounted(async () => {
   font-weight: normal;
 }
 
+/* Upload */
 .upload-section {
   margin-top: 8px;
 }
 
 .existing-images {
-  margin-top: 16px;
+  margin-top: 14px;
   padding: 12px;
   background: #fafafa;
-  border-radius: 8px;
+  border-radius: 12px;
   border: 1px dashed #d9d9d9;
 }
 
@@ -1638,7 +1570,7 @@ onMounted(async () => {
 
 .image-item {
   position: relative;
-  border-radius: 8px;
+  border-radius: 12px;
   overflow: hidden;
   border: 1px solid #e8e8e8;
 }
@@ -1653,60 +1585,113 @@ onMounted(async () => {
   position: absolute;
   top: 4px;
   right: 4px;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.45);
   color: white;
   border: none;
 }
 
 .remove-image-btn:hover {
-  background: rgba(255, 0, 0, 0.7);
+  background: rgba(255, 0, 0, 0.65);
 }
 
-.opcion-item {
-  padding: 12px;
-  margin-bottom: 12px;
+/* Opciones (nuevo diseño + latex preview) */
+.opciones-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 14px;
+}
+
+.opcion-card {
   border: 1px solid #f0f0f0;
-  border-radius: 8px;
-  background: #fafafa;
+  background: #fff;
+  border-radius: 14px;
+  padding: 12px;
+  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.04);
+  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
+}
+
+.opcion-card:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.06);
 }
 
-.opcion-item.correct-option {
+.opcion-card.is-correct {
   border-color: #52c41a;
-  background: #f6ffed;
+  box-shadow: 0 14px 26px rgba(82, 196, 26, 0.10);
 }
 
-.opcion-header {
+.opcion-top {
   display: flex;
   justify-content: space-between;
-  align-items: flex-start;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 10px;
 }
 
-.opcion-label {
-  flex: 1;
+.opcion-badge {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 10px;
 }
 
 .opcion-letter {
-  font-weight: bold;
+  width: 34px;
+  height: 34px;
+  border-radius: 12px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 800;
   color: #1890ff;
-  min-width: 24px;
+  background: #e6f7ff;
+  border: 1px solid #bae7ff;
 }
 
-.opcion-input {
-  flex: 1;
+.mini-tag {
+  margin: 0;
+  font-size: 12px;
+  border-radius: 999px;
 }
 
-.opcion-actions {
+.opcion-controls {
   display: flex;
   align-items: center;
+  gap: 10px;
+}
+
+.icon-btn {
+  padding: 0 8px;
+  border-radius: 10px;
+}
+
+.opcion-editor-wrap {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
   gap: 12px;
 }
 
+.preview-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.option-preview-content {
+  min-height: 150px;
+}
+
+.add-opcion-btn {
+  margin-top: 10px;
+  border-radius: 12px;
+}
+
+/* Config */
 .config-row {
   display: flex;
-  gap: 24px;
+  gap: 18px;
 }
 
 .config-item {
@@ -1719,8 +1704,9 @@ onMounted(async () => {
   gap: 8px;
 }
 
+/* Footer errores */
 .form-footer {
-  margin-top: 16px;
+  margin-top: 14px;
 }
 
 .error-alert {
@@ -1731,42 +1717,21 @@ onMounted(async () => {
   margin-bottom: 0;
 }
 
-/* Vista de Pregunta */
+/* Vista de pregunta */
 .pregunta-view {
   max-height: 600px;
   overflow-y: auto;
   padding-right: 8px;
 }
 
-.pregunta-view::-webkit-scrollbar {
-  width: 6px;
-}
-
-.pregunta-view::-webkit-scrollbar-track {
-  background: #f1f1f1;
-}
-
-.pregunta-view::-webkit-scrollbar-thumb {
-  background: #888;
-  border-radius: 3px;
-}
-
 .enunciado-principal {
   font-size: 16px;
-  line-height: 1.6;
-  margin-bottom: 20px;
-  padding: 16px;
+  line-height: 1.7;
+  margin-bottom: 18px;
+  padding: 14px;
   background: #fafafa;
-  border-radius: 8px;
-}
-
-.imagenes-preview {
-  margin: 16px 0;
-}
-
-.imagenes-preview h4 {
-  margin: 16px 0 8px 0;
-  color: #666;
+  border-radius: 14px;
+  border: 1px solid #f0f0f0;
 }
 
 .imagenes-grid {
@@ -1779,40 +1744,37 @@ onMounted(async () => {
 .clickable-image {
   max-width: 200px;
   max-height: 200px;
-  border-radius: 8px;
+  border-radius: 12px;
   border: 1px solid #f0f0f0;
   cursor: pointer;
   transition: transform 0.2s;
 }
 
 .clickable-image:hover {
-  transform: scale(1.05);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  transform: scale(1.04);
+  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
 }
 
 .enunciado-adicional {
-  margin-bottom: 20px;
-  padding: 16px;
-  background: #f0f0f0;
-  border-radius: 8px;
-}
-
-.enunciado-adicional h4 {
-  margin-top: 0;
-  color: #666;
+  margin-bottom: 18px;
+  padding: 14px;
+  background: #f5f5f5;
+  border-radius: 14px;
+  border: 1px solid #ededed;
 }
 
 .opciones-view {
-  margin-bottom: 20px;
+  margin-bottom: 18px;
 }
 
 .opcion-view {
   display: flex;
-  align-items: center;
-  padding: 12px 16px;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 12px 14px;
   margin-bottom: 8px;
-  background: #fafafa;
-  border-radius: 8px;
+  background: #fff;
+  border-radius: 14px;
   border: 1px solid #f0f0f0;
 }
 
@@ -1821,36 +1783,23 @@ onMounted(async () => {
   border-color: #b7eb8f;
 }
 
-.opcion-letter {
-  font-weight: bold;
-  margin-right: 12px;
-  min-width: 24px;
-}
-
 .opcion-text {
   flex: 1;
+  min-width: 0;
 }
 
 .explicacion-view {
-  padding: 16px;
+  padding: 14px;
   background: #e6f7ff;
-  border-radius: 8px;
-  margin-bottom: 20px;
-}
-
-.explicacion-view h4 {
-  margin-top: 0;
-  color: #1890ff;
-}
-
-.info-adicional {
-  margin-top: 20px;
+  border-radius: 14px;
+  margin-bottom: 18px;
+  border: 1px solid #bae7ff;
 }
 
 .info-row {
   display: flex;
   flex-wrap: wrap;
-  gap: 24px;
+  gap: 18px;
 }
 
 .info-item {
@@ -1862,17 +1811,17 @@ onMounted(async () => {
 .delete-confirm-content {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 14px;
 }
 
 .pregunta-info {
   background: #fafafa;
   padding: 12px;
-  border-radius: 8px;
+  border-radius: 14px;
   border: 1px solid #f0f0f0;
 }
 
-/* Ajustes para el upload de imágenes */
+/* Ajustes upload */
 :deep(.ant-upload-select-picture-card) {
   width: 100px;
   height: 100px;
@@ -1888,125 +1837,48 @@ onMounted(async () => {
 /* Responsive */
 @media (max-width: 768px) {
   .view-header {
+    position: relative;
     flex-direction: column;
     align-items: flex-start;
-    gap: 16px;
-  }
-  
-  .header-right {
-    align-self: flex-start;
+    gap: 12px;
   }
-  
+
   .filters-section {
     flex-direction: column;
     align-items: stretch;
   }
-  
+
   .filters {
     flex-direction: column;
     width: 100%;
   }
-  
+
   .filters .ant-input-search,
   .filters .ant-select {
-    width: 100%;
-    margin-left: 0;
+    width: 100% !important;
   }
-  
+
   .curso-stats {
     grid-template-columns: 1fr;
   }
-  
+
   .config-row {
     flex-direction: column;
   }
-  
-  .opcion-header {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 8px;
-  }
-  
-  .opcion-actions {
-    align-self: flex-end;
-  }
-  
-  .imagenes-grid {
-    justify-content: center;
-  }
-  
-  .clickable-image {
-    max-width: 150px;
-    max-height: 150px;
-  }
 
-  .editor-container {
+  .editor-container,
+  .editor-container.editor-small {
     flex-direction: column;
     height: auto;
   }
-  
-  .editor-column,
-  .preview-column {
-    width: 100%;
-    min-height: 200px;
-  }
-  
-  .markdown-editor {
-    min-height: 150px;
-  }
-  
-  .pregunta-view h4 {
-    margin-top: 16px;
-    margin-bottom: 8px;
-    color: #333;
-  }
-
-  .imagenes-grid {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 12px;
-    justify-content: center;
-    margin: 8px 0;
-  }
-
-  .centered-image {
-    max-width: 100%;
-    height: auto;
-    cursor: pointer;
-    border-radius: 4px;
-    transition: transform 0.2s;
-  }
 
-  .centered-image:hover {
-    transform: scale(1.05);
-  }
-
-  .opcion-view {
-    display: flex;
-    align-items: center;
-    padding: 6px 12px;
-    margin-bottom: 6px;
-    border: 1px solid #e0e0e0;
-    border-radius: 4px;
-  }
-
-  .opcion-view.correcta {
-    background-color: #f6ffed;
-    border-color: #b7eb8f;
-  }
-
-  .opcion-letter {
-    font-weight: bold;
-    margin-right: 8px;
-  }
-
-  .opcion-correct {
-    margin-left: auto;
+  .opcion-editor-wrap {
+    grid-template-columns: 1fr;
   }
 
-  .explicacion-view,
-  .enunciado-adicional {
-    margin-top: 12px;
+  .clickable-image {
+    max-width: 150px;
+    max-height: 150px;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/front/src/views/administrador/estudiantes/ListPostulantes.vue b/front/src/views/administrador/estudiantes/ListPostulantes.vue
new file mode 100644
index 0000000..7431232
--- /dev/null
+++ b/front/src/views/administrador/estudiantes/ListPostulantes.vue
@@ -0,0 +1,193 @@
+<template>
+  <div class="postulantes-container">
+
+    <div class="header">
+      <div>
+        <h2 class="page-title">Gestión de Postulantes</h2>
+        <p class="page-subtitle">Administra los usuarios registrados</p>
+      </div>
+
+      <a-input-search
+        v-model:value="search"
+        placeholder="Buscar por nombre, email o DNI"
+        style="width: 300px"
+        @search="fetchPostulantes"
+      />
+    </div>
+
+    <a-card>
+      <a-table
+        :columns="columns"
+        :data-source="postulantes"
+        :loading="loading"
+        :pagination="pagination"
+        row-key="id"
+        @change="handleTableChange"
+      >
+        <template #bodyCell="{ column, record }">
+
+          <template v-if="column.key === 'name'">
+            <strong>{{ record.name }}</strong>
+          </template>
+
+          <template v-else-if="column.key === 'email'">
+            {{ record.email }}
+          </template>
+
+          <template v-else-if="column.key === 'dni'">
+            <a-tag color="blue">{{ record.dni }}</a-tag>
+          </template>
+
+          <template v-else-if="column.key === 'last_activity'">
+            {{ record.last_activity ?? 'Sin actividad' }}
+          </template>
+
+          <template v-else-if="column.key === 'acciones'">
+            <a-space>
+              <a-button type="text" @click="editar(record)">
+                Editar
+              </a-button>
+            </a-space>
+          </template>
+
+        </template>
+      </a-table>
+    </a-card>
+
+    <a-modal
+      v-model:open="showModal"
+      title="Editar Postulante"
+      @ok="guardarCambios"
+      @cancel="resetForm"
+    >
+      <a-form layout="vertical">
+        <a-form-item label="Nombre">
+          <a-input v-model:value="form.name" />
+        </a-form-item>
+
+        <a-form-item label="Email">
+          <a-input v-model:value="form.email" />
+        </a-form-item>
+
+        <a-form-item label="DNI">
+          <a-input v-model:value="form.dni" />
+        </a-form-item>
+
+        <a-form-item label="Nueva contraseña (opcional)">
+          <a-input-password v-model:value="form.password" />
+        </a-form-item>
+      </a-form>
+    </a-modal>
+
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { message } from 'ant-design-vue'
+import api from '../../../axios'
+
+const postulantes = ref([])
+const loading = ref(false)
+const search = ref('')
+const showModal = ref(false)
+const editingId = ref(null)
+
+const pagination = reactive({
+  current: 1,
+  pageSize: 20,
+  total: 0
+})
+
+const form = reactive({
+  name: '',
+  email: '',
+  dni: '',
+  password: ''
+})
+
+const columns = [
+  { title: 'Nombre', dataIndex: 'name', key: 'name' },
+  { title: 'Email', dataIndex: 'email', key: 'email' },
+  { title: 'DNI', dataIndex: 'dni', key: 'dni' },
+  { title: 'Última actividad', dataIndex: 'last_activity', key: 'last_activity' },
+  { title: 'Acciones', key: 'acciones', align: 'center' }
+]
+
+const fetchPostulantes = async () => {
+  loading.value = true
+  try {
+    const { data } = await api.get('/admin/postulantes', {
+      params: {
+        page: pagination.current,
+        buscar: search.value
+      }
+    })
+
+    postulantes.value = data.data.data
+    pagination.total = data.data.total
+
+  } catch (error) {
+    message.error('Error al cargar postulantes')
+  } finally {
+    loading.value = false
+  }
+}
+
+const editar = (record) => {
+  editingId.value = record.id
+  form.name = record.name
+  form.email = record.email
+  form.dni = record.dni
+  form.password = ''
+  showModal.value = true
+}
+
+
+const guardarCambios = async () => {
+  try {
+    await api.put(`/admin/postulantes/${editingId.value}`, form)
+    message.success('Postulante actualizado correctamente')
+    showModal.value = false
+    fetchPostulantes()
+  } catch (error) {
+    message.error(error.response?.data?.message || 'Error al actualizar')
+  }
+}
+
+const handleTableChange = (pag) => {
+  pagination.current = pag.current
+  fetchPostulantes()
+}
+
+const resetForm = () => {
+  showModal.value = false
+  editingId.value = null
+}
+
+onMounted(fetchPostulantes)
+</script>
+
+<style scoped>
+.postulantes-container {
+  padding: 10px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 600;
+}
+
+.page-subtitle {
+  font-size: 14px;
+  color: #666;
+}
+</style>
diff --git a/front/src/views/administrador/layout/layout.vue b/front/src/views/administrador/layout/layout.vue
index 2da78ef..7926e60 100644
--- a/front/src/views/administrador/layout/layout.vue
+++ b/front/src/views/administrador/layout/layout.vue
@@ -24,9 +24,8 @@
           </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">
@@ -138,8 +137,7 @@
                 <span class="menu-label">Dashboard</span>
               </div>
             </a-menu-item>
-            
-            <!-- Gestión Académica -->
+
             <div class="menu-section" v-if="!sidebarCollapsed">
               <div class="section-label">Gestión Académica</div>
             </div>
@@ -199,13 +197,19 @@
                   <span class="menu-label">Reglas</span>
                 </div>
               </a-menu-item>
+                <a-menu-item key="examenes-calificaciones-lista" class="menu-item">
+                <div class="menu-item-content">
+                  <UnorderedListOutlined class="menu-icon" />
+                  <span class="menu-label">Calificacion</span>
+                </div>
+              </a-menu-item>
             </a-sub-menu>
 
             <a-sub-menu key="procesos" class="sub-menu">
               <template #title>
                 <div class="sub-menu-title">
                   <QuestionCircleOutlined class="menu-icon" />
-                  <span class="menu-label">Procesos</span>
+                  <span class="menu-label">WebConf</span>
                 </div>
               </template>
               <a-menu-item key="procesos-lista" class="menu-item">
@@ -214,6 +218,12 @@
                   <span class="menu-label">Procesos Lista</span>
                 </div>
               </a-menu-item>
+              <a-menu-item key="noticias-lista" class="menu-item">
+                <div class="menu-item-content">
+                  <AppstoreOutlined class="menu-icon" />
+                  <span class="menu-label">Noticias</span>
+                </div>
+              </a-menu-item>
 
             </a-sub-menu>
             
@@ -413,16 +423,15 @@ const handleMenuSelect = ({ key }) => {
   
   const routes = {
     'dashboard': { name: 'Dashboard' },
-    'estudiantes-lista': { name: 'AcademiaEstudiantes' },
-    'estudiantes-nuevo': { name: 'AcademiaEstudianteNuevo' },
+    'estudiantes-lista': { name: 'PostulantesList' },
+    'examenes-calificaciones-lista': { name: 'CalificacionList' },
     'examenes-proceso-lista': { name: 'Procesos' },
     'examenes-area-lista': { name: 'Areas' },
     'examenes-curso-lista': { name: 'Cursos' },
     'examenes-reglas-lista': { name: 'Reglas' },
 
-    
     'procesos-lista': { name: 'ProcesosAdmisionList' },
-    'lista-cursos': { name: 'AcademiaCursos' },
+    'noticias-lista': { name: 'NoticiasAdmisionList' },
     'resultados': { name: 'AcademiaResultados' },
     'reportes': { name: 'AcademiaReportes' },
     'config-academia': { name: 'AcademiaConfig' },
@@ -496,7 +505,7 @@ const updatePageInfo = (key) => {
 
 const logout = () => {
   userStore.logout()
-  router.push('/login')
+  router.push('/account/auth/login')
 }
 
 const irPerfil = () => {
diff --git a/front/src/views/administrador/procesoadmision/NoticiasAdmin.vue b/front/src/views/administrador/procesoadmision/NoticiasAdmin.vue
new file mode 100644
index 0000000..ae45801
--- /dev/null
+++ b/front/src/views/administrador/procesoadmision/NoticiasAdmin.vue
@@ -0,0 +1,630 @@
+<!-- src/views/administracion/noticias/NoticiasAdmin.vue -->
+<template>
+  <div class="areas-container">
+    <!-- Header -->
+    <div class="areas-header">
+      <div class="header-title">
+        <h2>Noticias</h2>
+        <p class="subtitle">Gestión de noticias y comunicados</p>
+      </div>
+
+      <a-button type="primary" @click="showCreateModal">
+        <template #icon><PlusOutlined /></template>
+        Nueva Noticia
+      </a-button>
+    </div>
+
+    <!-- Filtros -->
+    <div class="filters-section">
+      <a-input-search
+        v-model:value="searchText"
+        placeholder="Buscar por título o descripción..."
+        @search="handleSearch"
+        style="width: 340px"
+        size="large"
+        allowClear
+      />
+
+      <a-select
+        v-model:value="publicadoFilter"
+        placeholder="Publicado"
+        style="width: 200px"
+        size="large"
+        @change="handleFilterChange"
+        allowClear
+      >
+        <a-select-option :value="null">Todos</a-select-option>
+        <a-select-option :value="true">Publicado</a-select-option>
+        <a-select-option :value="false">Borrador</a-select-option>
+      </a-select>
+
+      <a-input
+        v-model:value="categoriaFilter"
+        placeholder="Categoría (opcional)"
+        style="width: 220px"
+        size="large"
+        allowClear
+        @pressEnter="handleFilterChange"
+      />
+
+      <a-button size="large" @click="clearFilters">
+        <ReloadOutlined /> Limpiar
+      </a-button>
+    </div>
+
+    <!-- Tabla -->
+    <div class="areas-table-container">
+      <a-table
+        :data-source="noticiasStore.noticias"
+        :columns="columns"
+        :loading="noticiasStore.loading"
+        :pagination="pagination"
+        row-key="id"
+        @change="handleTableChange"
+        class="areas-table"
+      >
+        <template #bodyCell="{ column, record }">
+          <!-- Imagen -->
+          <template v-if="column.key === 'imagen'">
+            <div class="thumb">
+              <a-image
+                v-if="record.imagen_url"
+                :src="record.imagen_url"
+                :preview="true"
+                :width="56"
+                :height="40"
+                style="object-fit: cover; border-radius: 8px"
+              />
+              <div v-else class="thumb-empty">Sin imagen</div>
+            </div>
+          </template>
+
+          <!-- Publicado -->
+          <template v-if="column.key === 'publicado'">
+            <a-tag :color="record.publicado ? 'green' : 'default'">
+              {{ record.publicado ? "Publicado" : "Borrador" }}
+            </a-tag>
+          </template>
+
+          <!-- Destacado -->
+          <template v-if="column.key === 'destacado'">
+            <a-tag :color="record.destacado ? 'gold' : 'default'">
+              {{ record.destacado ? "Destacado" : "Normal" }}
+            </a-tag>
+          </template>
+
+          <!-- Fecha -->
+          <template v-if="column.key === 'fecha_publicacion'">
+            {{ formatDate(record.fecha_publicacion) }}
+          </template>
+
+          <!-- Acciones -->
+          <template v-if="column.key === 'acciones'">
+            <a-space>
+              <a-button type="link" class="action-btn" @click="showEditModal(record)">
+                <EditOutlined /> Editar
+              </a-button>
+
+              <a-button danger type="link" class="action-btn" @click="confirmDelete(record)">
+                <DeleteOutlined /> Eliminar
+              </a-button>
+            </a-space>
+          </template>
+        </template>
+      </a-table>
+    </div>
+
+    <!-- Modal Crear / Editar -->
+    <a-modal
+      v-model:open="modalVisible"
+      :title="isEditing ? 'Editar Noticia' : 'Nueva Noticia'"
+      :confirm-loading="noticiasStore.saving"
+      @ok="handleSubmit"
+      @cancel="closeModal"
+      width="720px"
+      class="area-modal"
+    >
+      <a-form ref="formRef" :model="formState" layout="vertical">
+        <a-form-item label="Título" required>
+          <a-input v-model:value="formState.titulo" placeholder="Ej: Comunicado oficial..." />
+        </a-form-item>
+
+        <a-form-item label="Descripción corta (para tarjetas)" required>
+          <a-textarea
+            v-model:value="formState.descripcion_corta"
+            :rows="3"
+            placeholder="Resumen breve (máx ~500 caracteres)"
+          />
+        </a-form-item>
+
+        <a-row :gutter="16">
+          <a-col :xs="24" :md="12">
+            <a-form-item label="Categoría (opcional)">
+              <a-input v-model:value="formState.categoria" placeholder="Ej: Resultados" />
+            </a-form-item>
+          </a-col>
+
+          <a-col :xs="24" :md="12">
+            <a-form-item label="Color del ribbon/tag (opcional)">
+              <a-input v-model:value="formState.tag_color" placeholder="blue | red | green | gold ..." />
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-row :gutter="16">
+          <a-col :xs="24" :md="12">
+            <a-form-item label="Fecha de publicación (opcional)">
+              <a-date-picker
+                v-model:value="fechaPicker"
+                style="width: 100%"
+                format="DD/MM/YYYY"
+              />
+            </a-form-item>
+          </a-col>
+
+          <a-col :xs="24" :md="12">
+            <a-form-item label="Orden (opcional)">
+              <a-input-number v-model:value="formState.orden" style="width: 100%" :min="0" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-row :gutter="16">
+          <a-col :xs="24" :md="12">
+            <a-form-item label="Publicado">
+              <a-switch v-model:checked="formState.publicado" checked-children="Sí" un-checked-children="No" />
+            </a-form-item>
+          </a-col>
+
+          <a-col :xs="24" :md="12">
+            <a-form-item label="Destacado">
+              <a-switch v-model:checked="formState.destacado" checked-children="Sí" un-checked-children="No" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-form-item label="Contenido (opcional)">
+          <a-textarea
+            v-model:value="formState.contenido"
+            :rows="6"
+            placeholder="Contenido completo (si lo usarás en el detalle de la noticia)"
+          />
+        </a-form-item>
+
+        <a-row :gutter="16">
+          <a-col :xs="24" :md="16">
+            <a-form-item label="Link (opcional)">
+              <a-input v-model:value="formState.link_url" placeholder="https://..." />
+            </a-form-item>
+          </a-col>
+
+          <a-col :xs="24" :md="8">
+            <a-form-item label="Texto del link (opcional)">
+              <a-input v-model:value="formState.link_texto" placeholder="Ver más" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <!-- Imagen -->
+        <a-form-item label="Imagen (opcional)">
+          <a-upload
+            :before-upload="beforeUpload"
+            :max-count="1"
+            :show-upload-list="false"
+          >
+            <a-button>
+              <UploadOutlined /> Seleccionar imagen
+            </a-button>
+          </a-upload>
+
+          <div class="image-preview" v-if="imagePreviewUrl || formState.imagen_url">
+            <a-image
+              :src="imagePreviewUrl || formState.imagen_url"
+              :preview="true"
+              style="border-radius: 12px; overflow: hidden"
+            />
+            <a-button danger type="link" @click="clearImage" class="remove-image">
+              Quitar imagen
+            </a-button>
+          </div>
+        </a-form-item>
+
+        <a-alert
+          v-if="noticiasStore.error"
+          type="error"
+          show-icon
+          :message="noticiasStore.error"
+        />
+      </a-form>
+    </a-modal>
+
+    <!-- Modal Eliminar -->
+    <a-modal
+      v-model:open="deleteModalVisible"
+      title="Eliminar Noticia"
+      ok-type="danger"
+      ok-text="Eliminar"
+      :confirm-loading="noticiasStore.deleting"
+      @ok="handleDelete"
+      @cancel="deleteModalVisible = false"
+      width="520px"
+    >
+      <a-alert type="warning" show-icon message="¿Deseas eliminar esta noticia?" />
+      <div class="delete-info">
+        <p><strong>{{ noticiaToDelete?.titulo }}</strong></p>
+        <p class="muted">Esta acción no se puede deshacer.</p>
+      </div>
+    </a-modal>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, computed, watch } from "vue"
+import { message } from "ant-design-vue"
+import dayjs from "dayjs"
+
+import {
+  PlusOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  ReloadOutlined,
+  UploadOutlined,
+} from "@ant-design/icons-vue"
+
+import { useNoticiasStore } from "../../../store/noticiasStore"
+
+const noticiasStore = useNoticiasStore()
+
+const modalVisible = ref(false)
+const deleteModalVisible = ref(false)
+const isEditing = ref(false)
+const noticiaToDelete = ref(null)
+const formRef = ref()
+
+const searchText = ref("")
+const publicadoFilter = ref(null)
+const categoriaFilter = ref("")
+
+const fechaPicker = ref(null) // dayjs
+const imagePreviewUrl = ref("")
+const selectedImageFile = ref(null)
+
+const formState = reactive({
+  id: null,
+  titulo: "",
+  descripcion_corta: "",
+  contenido: "",
+  categoria: "",
+  tag_color: "",
+  link_url: "",
+  link_texto: "",
+  fecha_publicacion: null, // ISO string (opcional)
+  publicado: false,
+  destacado: false,
+  orden: null,
+
+  // solo para mostrar cuando editas
+  imagen_url: null,
+})
+
+const pagination = computed(() => ({
+  current: noticiasStore.meta?.current_page || 1,
+  pageSize: noticiasStore.meta?.per_page || 9,
+  total: noticiasStore.meta?.total || 0,
+  showSizeChanger: true,
+}))
+
+const columns = [
+  { title: "ID", dataIndex: "id", key: "id", width: 80 },
+  { title: "Imagen", key: "imagen", width: 90 },
+  { title: "Título", dataIndex: "titulo", key: "titulo" },
+  { title: "Categoría", dataIndex: "categoria", key: "categoria", width: 140 },
+  { title: "Publicado", dataIndex: "publicado", key: "publicado", width: 110 },
+  { title: "Destacado", dataIndex: "destacado", key: "destacado", width: 120 },
+  { title: "Fecha", dataIndex: "fecha_publicacion", key: "fecha_publicacion", width: 140 },
+  { title: "Acciones", key: "acciones", width: 180, align: "center" },
+]
+
+const showCreateModal = () => {
+  isEditing.value = false
+  resetForm()
+  modalVisible.value = true
+}
+
+const showEditModal = (noticia) => {
+  isEditing.value = true
+  resetForm()
+
+  Object.assign(formState, {
+    id: noticia.id,
+    titulo: noticia.titulo || "",
+    descripcion_corta: noticia.descripcion_corta || "",
+    contenido: noticia.contenido || "",
+    categoria: noticia.categoria || "",
+    tag_color: noticia.tag_color || "",
+    link_url: noticia.link_url || "",
+    link_texto: noticia.link_texto || "",
+    fecha_publicacion: noticia.fecha_publicacion || null,
+    publicado: !!noticia.publicado,
+    destacado: !!noticia.destacado,
+    orden: noticia.orden ?? null,
+    imagen_url: noticia.imagen_url || null,
+  })
+
+  fechaPicker.value = noticia.fecha_publicacion ? dayjs(noticia.fecha_publicacion) : null
+
+  modalVisible.value = true
+}
+
+const closeModal = () => {
+  modalVisible.value = false
+  resetForm()
+}
+
+const resetForm = () => {
+  Object.assign(formState, {
+    id: null,
+    titulo: "",
+    descripcion_corta: "",
+    contenido: "",
+    categoria: "",
+    tag_color: "",
+    link_url: "",
+    link_texto: "",
+    fecha_publicacion: null,
+    publicado: false,
+    destacado: false,
+    orden: null,
+    imagen_url: null,
+  })
+
+  fechaPicker.value = null
+  imagePreviewUrl.value = ""
+  selectedImageFile.value = null
+}
+
+watch(fechaPicker, (v) => {
+  formState.fecha_publicacion = v ? v.toISOString() : null
+})
+
+const beforeUpload = (file) => {
+  // preview local
+  selectedImageFile.value = file
+  imagePreviewUrl.value = URL.createObjectURL(file)
+  message.success("Imagen seleccionada")
+  // IMPORTANTE: evitar auto-upload (lo hacemos con el submit)
+  return false
+}
+
+const clearImage = () => {
+  selectedImageFile.value = null
+  imagePreviewUrl.value = ""
+  // si quieres que al actualizar se borre imagen, envía imagen_path = null
+  // aquí solo la quito del preview; el back no borra a menos que lo programes.
+}
+
+const handleSubmit = async () => {
+  try {
+    if (!formState.titulo?.trim() || !formState.descripcion_corta?.trim()) {
+      message.warning("Completa al menos Título y Descripción corta.")
+      return
+    }
+
+    const payload = {
+      titulo: formState.titulo,
+      descripcion_corta: formState.descripcion_corta,
+      contenido: formState.contenido || null,
+      categoria: formState.categoria || null,
+      tag_color: formState.tag_color || null,
+      link_url: formState.link_url || null,
+      link_texto: formState.link_texto || null,
+      fecha_publicacion: formState.fecha_publicacion || null,
+      publicado: formState.publicado,
+      destacado: formState.destacado,
+      orden: formState.orden,
+    }
+
+    if (selectedImageFile.value) payload.imagen = selectedImageFile.value
+
+    if (isEditing.value) {
+      await noticiasStore.actualizarNoticia(formState.id, payload)
+      message.success("Noticia actualizada")
+    } else {
+      await noticiasStore.crearNoticia(payload)
+      message.success("Noticia creada")
+    }
+
+    closeModal()
+    await fetchTable()
+  } catch (e) {
+    message.error("Error al guardar")
+  }
+}
+
+const confirmDelete = (noticia) => {
+  noticiaToDelete.value = noticia
+  deleteModalVisible.value = true
+}
+
+const handleDelete = async () => {
+  try {
+    await noticiasStore.eliminarNoticia(noticiaToDelete.value.id)
+    message.success("Noticia eliminada")
+    deleteModalVisible.value = false
+    await fetchTable()
+  } catch {
+    message.error("Error al eliminar")
+  }
+}
+
+const handleSearch = async () => {
+  noticiasStore.setFiltro("q", searchText.value)
+  noticiasStore.setFiltro("page", 1)
+  await fetchTable()
+}
+
+const handleFilterChange = async () => {
+  noticiasStore.setFiltro("publicado", publicadoFilter.value)
+  noticiasStore.setFiltro("categoria", categoriaFilter.value)
+  noticiasStore.setFiltro("page", 1)
+  await fetchTable()
+}
+
+const clearFilters = async () => {
+  searchText.value = ""
+  publicadoFilter.value = null
+  categoriaFilter.value = ""
+  noticiasStore.resetFiltros()
+  await fetchTable()
+}
+
+const handleTableChange = async (pg) => {
+  noticiasStore.setFiltro("page", pg.current)
+  noticiasStore.setFiltro("per_page", pg.pageSize)
+  await fetchTable()
+}
+
+const fetchTable = async () => {
+  await noticiasStore.cargarNoticias()
+}
+
+const formatDate = (date) => {
+  if (!date) return "-"
+  const d = new Date(date)
+  if (isNaN(d.getTime())) return "-"
+  return d.toLocaleDateString("es-PE")
+}
+
+onMounted(async () => {
+  await fetchTable()
+})
+</script>
+
+<style scoped>
+.areas-container {
+  padding: 0;
+}
+
+.areas-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;
+}
+
+.filters-section {
+  display: flex;
+  align-items: center;
+  margin-bottom: 24px;
+  padding: 0 8px;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.areas-table-container {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  border: 1px solid #f0f0f0;
+  overflow: hidden;
+}
+
+.areas-table :deep(.ant-table-thead > tr > th) {
+  background: #fafafa;
+  font-weight: 600;
+  color: #1f1f1f;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.areas-table :deep(.ant-table-tbody > tr > td) {
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.areas-table :deep(.ant-table-tbody > tr:hover > td) {
+  background: #fafafa;
+}
+
+.action-btn {
+  padding: 4px 8px;
+  height: auto;
+}
+
+.thumb {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.thumb-empty {
+  width: 56px;
+  height: 40px;
+  border-radius: 8px;
+  border: 1px dashed #d9d9d9;
+  display: grid;
+  place-items: center;
+  font-size: 12px;
+  color: #999;
+}
+
+.image-preview {
+  margin-top: 10px;
+  border: 1px solid #f0f0f0;
+  border-radius: 14px;
+  padding: 10px;
+  background: #fafafa;
+}
+.remove-image {
+  padding: 0;
+  margin-top: 6px;
+}
+
+.delete-info {
+  margin-top: 12px;
+}
+.muted {
+  color: #777;
+  margin: 0;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .areas-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+  }
+
+  .filters-section {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .filters-section .ant-input-search,
+  .filters-section .ant-select,
+  .filters-section .ant-input,
+  .filters-section .ant-btn {
+    width: 100% !important;
+  }
+
+  .areas-table-container {
+    overflow-x: auto;
+  }
+
+  .areas-table {
+    min-width: 980px;
+  }
+}
+</style>
diff --git a/front/src/views/postulante/Dashboard.vue b/front/src/views/postulante/Dashboard.vue
index 27add32..7d49148 100644
--- a/front/src/views/postulante/Dashboard.vue
+++ b/front/src/views/postulante/Dashboard.vue
@@ -1,159 +1,196 @@
-<script setup>
-import { computed, onMounted, reactive, ref, onBeforeUnmount } from "vue";
-import { message, Modal } from "ant-design-vue";
+<template>
+  <a-spin :spinning="loading">
 
-const loading = ref(false);
-const nowTick = ref(Date.now());
-let timer = null;
+      <div class="section-container">
+        <div class="page">
+          <!-- Topbar -->
+          <div class="topbar">
+            <div class="topbarLeft">
+              <div class="hello">Bienvenido, {{ authStore.userName }}</div>
+              <div class="sub">DNI: {{ authStore.userDni || "No registrado" }}</div>
+            </div>
 
-const state = reactive({
-  applicant: { id: null, nombres: "Postulante", documento: "—" },
-  applications: [],
-  eligibility: {
-    isEligibleToApply: false,
-    reasons: [],
-    hasTestAssigned: true,
-    testStatus: "PENDIENTE", // PENDIENTE | EN_PROGRESO | COMPLETADO | NO_DISPONIBLE
-    testAvailableAt: null,
-    testExpiresAt: null,
-    testUrl: null,
-  },
-  availableProcesses: [],
-});
+          </div>
 
-/** ---------------------------
- * Helpers tiempo (sin dayjs)
- * --------------------------- */
-function parseDate(val) {
-  if (!val) return null;
-  // soporta "YYYY-MM-DD HH:mm" o ISO
-  const iso = val.includes("T") ? val : val.replace(" ", "T");
-  const d = new Date(iso);
-  return isNaN(d.getTime()) ? null : d;
-}
-function msToHuman(ms) {
-  if (ms <= 0) return "0m";
-  const totalMin = Math.floor(ms / 60000);
-  const d = Math.floor(totalMin / (60 * 24));
-  const h = Math.floor((totalMin % (60 * 24)) / 60);
-  const m = totalMin % 60;
-  if (d > 0) return `${d}d ${h}h`;
-  if (h > 0) return `${h}h ${m}m`;
-  return `${m}m`;
-}
-
-/** ---------------------------
- * Computed
- * --------------------------- */
-const totalApplications = computed(() => state.applications.length);
-
-const applicationsByStatus = computed(() => {
-  const map = {};
-  for (const a of state.applications) map[a.status] = (map[a.status] || 0) + 1;
-  return map;
-});
+          <a-divider class="softDivider" />
 
-const eligibilityTag = computed(() => {
-  return state.eligibility.isEligibleToApply
-    ? { color: "green", text: "Apto para postular" }
-    : { color: "red", text: "No apto para postular" };
-});
+          <a-card :bordered="false" class="testBox">
 
-const testStatusUi = computed(() => {
-  const s = state.eligibility.testStatus;
-  if (s === "EN_PROGRESO") return { color: "blue", text: "En progreso" };
-  if (s === "COMPLETADO") return { color: "green", text: "Completado" };
-  if (s === "NO_DISPONIBLE") return { color: "default", text: "No disponible" };
-  return { color: "orange", text: "Pendiente" };
-});
 
-const testCtaText = computed(() => {
-  const s = state.eligibility.testStatus;
-  if (s === "EN_PROGRESO") return "Continuar test";
-  if (s === "COMPLETADO") return "Test completado";
-  if (s === "NO_DISPONIBLE") return "No disponible";
-  return "Iniciar test";
-});
+            <div class="testHead">
+              <div class="testHeadLeft">
+                <div class="testTitle">Tu test diagnóstico</div>
+                <div class="testSub">
+                  Es un <b>test referencial</b> para practicar y medir tu nivel. <b>No afecta</b> tu postulación oficial.
+                </div>
 
-const canStartTest = computed(() => {
-  const e = state.eligibility;
-  if (!e.hasTestAssigned) return false;
-  if (e.testStatus === "COMPLETADO") return false;
-  if (e.testStatus === "NO_DISPONIBLE") return false;
-  return true;
-});
+                <div class="mt12">
+                  <a-space direction="vertical" size="small">
+                    <div class="bulletRow">
+                      <span class="dot" />
+                      <span>10 preguntas • 10 min aprox. • resultado inmediato</span>
+                    </div>
+                    <div class="bulletRow">
+                      <span class="dot" />
+                      <span>
+                        Si tu proceso pide secuencia, también puedes usar la del pago de tu
+                        <b>Carpeta de Postulante</b> (no pagas extra por este test).
+                      </span>
+                    </div>
+                  </a-space>
+                </div>
+              </div>
 
-const testExpireMs = computed(() => {
-  const d = parseDate(state.eligibility.testExpiresAt);
-  if (!d) return null;
-  return d.getTime() - nowTick.value;
-});
+              <div class="testHeadRight">
+                <a-button type="primary" size="large" class="btnTest" :disabled="!canGoTest" @click="goToTest" block>
+                  Ir al test
+                </a-button>
+
+                <div class="microHelp" v-if="!canGoTest">Aún no tienes un test asignado.</div>
+              </div>
+            </div>
+          </a-card>
+
+          <a-divider class="softDivider" />
+
+          
+            <div class="sectionHead">
+              <div>
+                <div class="sectionTitle">Procesos activos</div>
+                <div class="sectionSub">Revisa los procesos habilitados y postula cuando corresponda.</div>
+              </div>
+
+              <div class="sectionRight">
+                <a-badge count="Nuevo" class="new-badge" />
+              </div>
+            </div>
+
+            <div class="tableWrap mt12">
+              <a-table
+                :columns="processColumns"
+                :data-source="state.processes"
+                row-key="id"
+                :loading="loading"
+                :pagination="{ pageSize: 6 }"
+                :scroll="{ x: 720 }"
+                class="modernTable"
+              >
+                <template #bodyCell="{ column, record }">
+                  <template v-if="column.key === 'status'">
+                    <a-tag class="status-tag" :color="record.statusColor">{{ record.statusText }}</a-tag>
+                  </template>
+
+                  <template v-else-if="column.key === 'eligibility'">
+                    <a-badge
+                      :status="record.isEligible ? 'success' : 'error'"
+                      :text="record.isEligible ? 'Apto' : 'No apto'"
+                    />
+                  </template>
+
+                  <template v-else-if="column.key === 'actions'">
+                    <div class="actions">
+                      <a-button size="small" block class="actionBtn" @click="onViewProcess(record)">Ver</a-button>
+                      <a-button
+                        size="small"
+                        type="primary"
+                        block
+                        class="actionBtnPrimary"
+                        :disabled="!record.canApply"
+                        @click="onApply(record)"
+                      >
+                        Postular
+                      </a-button>
+                    </div>
+
+                    <div v-if="record.canApply === false && record.blockReason" class="microHelp">
+                      {{ record.blockReason }}
+                    </div>
+                  </template>
+                </template>
+              </a-table>
+            </div>
+          </div>
 
-const expiresSoon = computed(() => {
-  // “pronto” si queda <= 24h
-  const ms = testExpireMs.value;
-  return ms !== null && ms > 0 && ms <= 24 * 60 * 60 * 1000;
+          <a-empty
+            v-if="!loading && state.processes.length === 0"
+            class="mt12"
+            description="No hay procesos activos por el momento."
+          />
+        </div>
+  </a-spin>
+</template>
+
+<script setup>
+import { computed, onMounted, reactive, ref } from "vue";
+import { Modal, message } from "ant-design-vue";
+import { useRouter } from "vue-router";
+import { useAuthStore } from "../../store/postulanteStore";
+
+
+const ROUTE_TEST_PANEL = { name: "PanelTest" }; 
+const ROUTE_PROCESS_DETAIL = (id) => ({ name: "ProcesoDetalle", params: { id } });
+
+const router = useRouter();
+const authStore = useAuthStore();
+
+const loading = ref(false);
+
+const state = reactive({
+  test: { hasAssigned: true },
+  processes: [],
 });
 
-const processColumns = [
-  { title: "Proceso", dataIndex: "name", key: "name" },
-  { title: "Inicio", dataIndex: "startDate", key: "startDate", width: 140 },
-  { title: "Fin", dataIndex: "endDate", key: "endDate", width: 140 },
-  { title: "Estado", dataIndex: "status", key: "status", width: 120 },
-  { title: "Vacantes", dataIndex: "vacancies", key: "vacancies", width: 110 },
-  { title: "Acciones", key: "actions", width: 220 },
-];
-
-/** ---------------------------
- * API (reemplaza por tus endpoints)
- * --------------------------- */
+const canGoTest = computed(() => !!state.test.hasAssigned);
+
+const processColumns = computed(() => [
+  { title: "Proceso", dataIndex: "name", key: "name", ellipsis: true },
+  { title: "Estado", key: "status", responsive: ["sm"] },
+  { title: "Aptitud", key: "eligibility", responsive: ["md"] },
+  { title: "Acciones", key: "actions" },
+]);
+
+
 const api = {
   async getDashboard() {
     return new Promise((resolve) => {
       setTimeout(() => {
         resolve({
-          applicant: { id: 7, nombres: "Juan Pérez", documento: "DNI 12345678" },
-          applications: [
-            { id: 1, processName: "Admisión 2025-II", status: "NO_APTO", createdAt: "2025-09-05" },
-            { id: 2, processName: "Admisión 2026-I", status: "EN_REVISION", createdAt: "2026-02-03" },
-            { id: 3, processName: "Admisión 2026-I", status: "APROBADO", createdAt: "2026-02-06" },
-          ],
-          eligibility: {
-            isEligibleToApply: true,
-            reasons: [],
-            hasTestAssigned: true,
-            testStatus: "PENDIENTE",
-            testAvailableAt: "2026-02-10 09:00",
-            testExpiresAt: "2026-02-20 23:59",
-            testUrl: "/postulante/test",
-          },
-          availableProcesses: [
-            { id: 10, name: "Admisión 2026-I", startDate: "2026-02-01", endDate: "2026-02-20", status: "ABIERTO", vacancies: 120, canApply: true },
-            { id: 11, name: "Admisión Extraordinaria 2026", startDate: "2026-03-01", endDate: "2026-03-10", status: "PRONTO", vacancies: 40, canApply: false },
+          test: { hasAssigned: true },
+          processes: [
+            {
+              id: 10,
+              name: "Admisión 2026-I",
+              statusText: "ABIERTO",
+              statusColor: "blue",
+              isEligible: true,
+              canApply: true,
+              blockReason: "",
+            },
+            {
+              id: 11,
+              name: "Admisión Extraordinaria 2026",
+              statusText: "PRONTO",
+              statusColor: "gold",
+              isEligible: false,
+              canApply: false,
+              blockReason: "Este proceso aún no permite postular.",
+            },
           ],
         });
-      }, 350);
+      }, 250);
     });
   },
-  async startTest() {
-    return new Promise((resolve) => setTimeout(resolve, 300));
-  },
-  async applyToProcess() {
+  async applyToProcess(processId) {
     return new Promise((resolve) => setTimeout(resolve, 300));
   },
 };
 
-/** ---------------------------
- * Actions
- * --------------------------- */
 async function fetchDashboard() {
   loading.value = true;
   try {
     const data = await api.getDashboard();
-    state.applicant = data.applicant;
-    state.applications = data.applications;
-    state.eligibility = data.eligibility;
-    state.availableProcesses = data.availableProcesses;
+    state.test = { ...state.test, ...data.test };
+    state.processes = Array.isArray(data.processes) ? data.processes : [];
   } catch {
     message.error("No se pudo cargar el dashboard.");
   } finally {
@@ -161,28 +198,28 @@ async function fetchDashboard() {
   }
 }
 
-async function onStartTest() {
-  if (!canStartTest.value) return;
+function goToTest() {
+  if (!canGoTest.value) return;
 
   Modal.confirm({
-    title: "Test de Admisión",
-    content: "Al iniciar o continuar, el tiempo puede comenzar a correr según la configuración. ¿Deseas continuar?",
-    okText: "Sí",
+    title: "Test diagnóstico",
+    content: "Este test es referencial y no afecta tu postulación. ¿Deseas continuar?",
+    okText: "Continuar",
     cancelText: "Cancelar",
-    async onOk() {
-      try {
-        await api.startTest();
-        message.success("Listo.");
-        if (state.eligibility.testUrl) window.location.href = state.eligibility.testUrl;
-      } catch {
-        message.error("No se pudo iniciar el test.");
-      }
+    onOk() {
+      router.push("/portal-postulante/test");
     },
   });
 }
 
-async function onApply(process) {
+function onViewProcess(process) {
+
+  message.info(`Abrir detalle del proceso: ${process.name}`);
+}
+
+function onApply(process) {
   if (!process.canApply) return;
+
   Modal.confirm({
     title: "Confirmar postulación",
     content: `¿Deseas postular al proceso "${process.name}"?`,
@@ -200,410 +237,309 @@ async function onApply(process) {
   });
 }
 
-function onViewProcess(process) {
-  message.info(`Abrir detalle del proceso: ${process.name}`);
-}
+onMounted(fetchDashboard);
+</script>
 
-onMounted(async () => {
-  await fetchDashboard();
-  timer = setInterval(() => (nowTick.value = Date.now()), 1000);
-});
+<style scoped>
 
-onBeforeUnmount(() => {
-  if (timer) clearInterval(timer);
-});
-</script>
+.dashboard-modern {
+  position: relative;
+  padding: 40px 0;
+  font-family: "Times New Roman", Times, serif;
+  background: #fbfcff;
+  overflow: hidden;
+}
 
-<template>
-  <a-spin :spinning="loading">
-    <a-space direction="vertical" size="large" style="width: 100%">
-      <!-- Encabezado del postulante -->
-      <a-card class="soft-card">
-        <div class="header-row">
-          <div>
-            <div class="h-title">Bienvenido, {{ state.applicant.nombres }}</div>
-            <div class="h-sub">{{ state.applicant.documento }}</div>
-          </div>
+.dashboard-modern::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+
+  background-image:
+    repeating-linear-gradient(
+      to right,
+      rgba(13, 27, 82, 0.06) 0,
+      rgba(13, 27, 82, 0.06) 1px,
+      transparent 1px,
+      transparent 24px
+    ),
+    repeating-linear-gradient(
+      to bottom,
+      rgba(13, 27, 82, 0.06) 0,
+      rgba(13, 27, 82, 0.06) 1px,
+      transparent 1px,
+      transparent 24px
+    );
+  opacity: 0.55;
+}
+
+.section-container {
+  position: relative;
+  z-index: 1;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 24px;
+}
+
+
+.page {
+  width: 100%;
+  max-width: 1120px;
+  margin: 0 auto;
+  padding: 0;
+}
 
-          <div class="header-actions">
-            <a-tag :color="eligibilityTag.color" class="pill-tag">{{ eligibilityTag.text }}</a-tag>
-          </div>
-        </div>
 
-        <a-alert
-          v-if="!state.eligibility.isEligibleToApply && state.eligibility.reasons?.length"
-          type="warning"
-          show-icon
-          message="Requisitos pendientes"
-          style="margin-top: 14px"
-        >
-          <template #description>
-            <ul style="margin: 8px 0 0 18px">
-              <li v-for="(r, idx) in state.eligibility.reasons" :key="idx">{{ r }}</li>
-            </ul>
-          </template>
-        </a-alert>
-      </a-card>
-
-      <!-- ✅ HERO: TEST DE ADMISIÓN (MUY RESALTADO) -->
-      <a-badge-ribbon
-        :text="state.eligibility.testStatus === 'COMPLETADO' ? 'LISTO' : 'IMPORTANTE'"
-        :color="state.eligibility.testStatus === 'COMPLETADO' ? 'green' : 'red'"
-      >
-        <a-card class="test-hero" :bordered="false">
-          <div class="test-grid">
-            <div>
-              <div class="test-kicker">Test de admisión</div>
-              <div class="test-title">Tu evaluación está aquí</div>
-
-              <div class="test-meta">
-                <a-tag :color="testStatusUi.color" class="pill-tag">
-                  Estado: {{ testStatusUi.text }}
-                </a-tag>
-
-                <a-tag v-if="expiresSoon" color="volcano" class="pill-tag">
-                  Vence pronto: {{ msToHuman(testExpireMs || 0) }}
-                </a-tag>
-
-                <a-tag v-else-if="testExpireMs !== null && testExpireMs > 0" color="blue" class="pill-tag">
-                  Tiempo restante: {{ msToHuman(testExpireMs) }}
-                </a-tag>
-              </div>
+.mt12 { margin-top: 12px; }
+.microHelp { font-size: 0.95rem; color: #666; margin-top: 6px; }
+.softDivider { margin: 18px 0; }
 
-              <div class="test-dates" v-if="state.eligibility.testAvailableAt || state.eligibility.testExpiresAt">
-                <div v-if="state.eligibility.testAvailableAt">
-                  <span class="muted">Disponible desde:</span> <b>{{ state.eligibility.testAvailableAt }}</b>
-                </div>
-                <div v-if="state.eligibility.testExpiresAt">
-                  <span class="muted">Fecha límite:</span> <b>{{ state.eligibility.testExpiresAt }}</b>
-                </div>
-              </div>
 
-              <a-alert
-                v-if="state.eligibility.testStatus === 'COMPLETADO'"
-                type="success"
-                show-icon
-                message="Tu test ya fue completado. ¡Bien!"
-                style="margin-top: 12px"
-              />
-              <a-alert
-                v-else-if="!state.eligibility.hasTestAssigned"
-                type="info"
-                show-icon
-                message="Aún no tienes un test asignado."
-                style="margin-top: 12px"
-              />
-              <a-alert
-                v-else-if="!state.eligibility.isEligibleToApply"
-                type="warning"
-                show-icon
-                message="No estás apto para postular por ahora. Revisa los requisitos pendientes."
-                style="margin-top: 12px"
-              />
-            </div>
+.topbar {
+  display: flex;
+  justify-content: space-between;
+  gap: 14px;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
 
-            <div class="test-cta">
-              <div class="cta-box">
-                <div class="cta-label">Acción</div>
-
-                <a-button
-                  type="primary"
-                  size="large"
-                  block
-                  class="cta-btn"
-                  :disabled="!canStartTest"
-                  @click="onStartTest"
-                >
-                  {{ testCtaText }}
-                </a-button>
+.hello {
+  font-size: 2rem;
+  font-weight: 700;
+  color: #0d1b52;
+  margin: 0;
+}
 
-                <div class="cta-hint" v-if="canStartTest">
-                  Entra cuando estés listo. Si estás en progreso, puedes continuar.
-                </div>
-                <div class="cta-hint" v-else>
-                  No disponible por el momento.
-                </div>
+.sub {
+  margin-top: 6px;
+  font-size: 1rem;
+  color: #666;
+}
 
-                <a-divider style="margin: 14px 0" />
+.topbarRight {
+  min-width: 260px;
+  display: flex;
+  justify-content: flex-end;
+}
 
-                <div class="cta-stats">
-                  <div class="stat">
-                    <div class="stat-num">{{ totalApplications }}</div>
-                    <div class="stat-txt">Postulaciones</div>
-                  </div>
-                  <div class="stat">
-                    <div class="stat-num">
-                      {{ state.eligibility.isEligibleToApply ? "Sí" : "No" }}
-                    </div>
-                    <div class="stat-txt">Apto</div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </a-card>
-      </a-badge-ribbon>
-
-      <!-- KPIs secundarios (más limpios) -->
-      <a-row :gutter="[16, 16]">
-        <a-col :xs="24" :md="12">
-          <a-card class="soft-card" title="Resumen de postulaciones">
-            <div class="kpi-row">
-              <div class="kpi">
-                <div class="kpi-label">Veces que postuló</div>
-                <div class="kpi-value">{{ totalApplications }}</div>
-              </div>
-              <div class="kpi-tags">
-                <a-tag v-for="(v, k) in applicationsByStatus" :key="k">
-                  {{ k }}: <b>{{ v }}</b>
-                </a-tag>
-                <a-tag v-if="!Object.keys(applicationsByStatus).length">Sin registros</a-tag>
-              </div>
-            </div>
-          </a-card>
-        </a-col>
-
-        <a-col :xs="24" :md="12">
-          <a-card class="soft-card" title="Estado del postulante">
-            <a-descriptions :column="1" size="small" bordered>
-              <a-descriptions-item label="Aptitud">
-                <a-tag :color="eligibilityTag.color" class="pill-tag">{{ eligibilityTag.text }}</a-tag>
-              </a-descriptions-item>
-              <a-descriptions-item label="Test">
-                <a-tag :color="testStatusUi.color" class="pill-tag">{{ testStatusUi.text }}</a-tag>
-              </a-descriptions-item>
-            </a-descriptions>
-          </a-card>
-        </a-col>
-      </a-row>
-
-      <!-- Procesos disponibles -->
-      <a-card class="soft-card" title="Procesos disponibles">
-        <a-table
-          :columns="processColumns"
-          :data-source="state.availableProcesses"
-          row-key="id"
-          :pagination="{ pageSize: 6 }"
-        >
-          <template #bodyCell="{ column, record }">
-            <template v-if="column.key === 'status'">
-              <a-tag :color="record.status === 'ABIERTO' ? 'green' : record.status === 'PRONTO' ? 'blue' : 'default'">
-                {{ record.status }}
-              </a-tag>
-            </template>
-
-            <template v-else-if="column.key === 'actions'">
-              <a-space>
-                <a-button @click="onViewProcess(record)">Ver</a-button>
-                <a-button
-                  type="primary"
-                  :disabled="!record.canApply || !state.eligibility.isEligibleToApply"
-                  @click="onApply(record)"
-                >
-                  Postular
-                </a-button>
-              </a-space>
+.btnTop {
+  min-width: 180px;
+  height: 46px;
+  border-radius: 10px;
+  font-weight: 700;
+}
 
-              <div v-if="!state.eligibility.isEligibleToApply" class="mini-help">
-                Debes estar apto para postular.
-              </div>
-            </template>
-          </template>
-        </a-table>
-      </a-card>
-
-      <!-- Historial -->
-      <a-card class="soft-card" title="Historial de postulaciones">
-        <a-list
-          :data-source="state.applications"
-          :locale="{ emptyText: 'Aún no tienes postulaciones registradas.' }"
-        >
-          <template #renderItem="{ item }">
-            <a-list-item class="list-item">
-              <a-list-item-meta>
-                <template #title>
-                  <div class="list-title">
-                    <span class="list-title-text">{{ item.processName }}</span>
-                    <a-tag>{{ item.status }}</a-tag>
-                  </div>
-                </template>
-                <template #description>
-                  <span class="muted">Postuló el:</span> {{ item.createdAt }}
-                </template>
-              </a-list-item-meta>
-            </a-list-item>
-          </template>
-        </a-list>
-      </a-card>
-    </a-space>
-  </a-spin>
-</template>
 
-<style scoped>
-/* Cards */
-.soft-card {
-  border-radius: 14px;
+.testBox {
+  position: relative;
+  border: none;
+  border-radius: 16px;
+  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.08);
+  background: #fff;
 }
-.pill-tag {
+
+.testBox :deep(.ant-card-body) {
+  padding: 28px;
+}
+
+.cardBadge {
+  position: absolute;
+  top: -12px;
+  left: 24px;
+  background: linear-gradient(45deg, #1890ff, #52c41a);
+  color: #fff;
+  padding: 6px 16px;
   border-radius: 999px;
-  padding: 4px 10px;
-  font-weight: 600;
+  font-size: 0.75rem;
+  font-weight: 700;
 }
 
-/* Header */
-.header-row {
+.testHead {
   display: flex;
   justify-content: space-between;
   gap: 16px;
   flex-wrap: wrap;
-  align-items: center;
+  align-items: flex-start;
 }
-.h-title {
-  font-size: 18px;
+
+.testTitle {
+  font-size: 1.55rem;
   font-weight: 700;
+  color: #1a237e;
 }
-.h-sub {
-  opacity: 0.75;
-  margin-top: 4px;
+
+.testSub {
+  margin-top: 8px;
+  font-size: 1rem;
+  color: #666;
+  line-height: 1.55;
+  max-width: 760px;
 }
-.header-actions {
+
+.testHeadRight {
+  min-width: 260px;
   display: flex;
-  align-items: center;
-  gap: 10px;
+  flex-direction: column;
+  gap: 8px;
+  align-items: flex-end;
 }
 
-/* TEST HERO */
-.test-hero {
-  border-radius: 18px;
-  overflow: hidden;
-  background: linear-gradient(135deg, rgba(24, 144, 255, 0.14), rgba(82, 196, 26, 0.10));
-}
-.test-grid {
-  display: grid;
-  grid-template-columns: 1.4fr 0.8fr;
-  gap: 16px;
-}
-@media (max-width: 992px) {
-  .test-grid {
-    grid-template-columns: 1fr;
-  }
-}
-.test-kicker {
+.btnTest {
+  height: 52px;
+  border-radius: 12px;
   font-weight: 700;
-  letter-spacing: 0.2px;
-  opacity: 0.85;
+  background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
+  border: none;
 }
-.test-title {
-  font-size: 26px;
-  font-weight: 800;
-  margin-top: 6px;
-  line-height: 1.15;
+
+/* bullets */
+.bulletRow {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  font-size: 1rem;
+  color: #666;
+  line-height: 1.55;
 }
-.test-meta {
-  margin-top: 12px;
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: #1a237e;
+  margin-top: 9px;
+  flex: 0 0 auto;
+}
+
+
+.sectionHead {
   display: flex;
-  gap: 8px;
+  justify-content: space-between;
+  gap: 12px;
   flex-wrap: wrap;
+  align-items: flex-start;
 }
-.test-dates {
-  margin-top: 10px;
-  display: grid;
-  gap: 6px;
+
+.sectionRight { margin-top: 4px; }
+
+.sectionTitle {
+  font-size: 1.55rem;
+  font-weight: 700;
+  color: #0d1b52;
+  margin: 0;
 }
-.muted {
-  opacity: 0.75;
+
+.sectionSub {
+  margin-top: 8px;
+  font-size: 1rem;
+  color: #666;
+  line-height: 1.55;
 }
 
-/* CTA box */
-.test-cta {
-  display: flex;
-  align-items: stretch;
+/* Badge Nuevo (como convocatorias) */
+.new-badge :deep(.ant-badge-count) {
+  background: linear-gradient(45deg, #ff6b6b, #ffd700);
+  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
+  border-radius: 999px;
 }
-.cta-box {
+
+.tableWrap {
   width: 100%;
-  background: rgba(255, 255, 255, 0.75);
-  border: 1px solid rgba(0, 0, 0, 0.06);
+  overflow-x: auto;
   border-radius: 16px;
-  padding: 16px;
-  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.08);
+  background: #fff;
+  padding: 8px;
 }
-.cta-label {
-  font-weight: 700;
-  opacity: 0.85;
-  margin-bottom: 10px;
+
+:deep(.modernTable .ant-table) {
+  background: transparent;
 }
-.cta-btn {
-  height: 44px;
+
+:deep(.modernTable .ant-table-container) {
+  overflow-x: auto;
   border-radius: 12px;
-  font-weight: 800;
-}
-.cta-hint {
-  margin-top: 10px;
-  font-size: 12px;
-  opacity: 0.75;
-  line-height: 1.35;
 }
-.cta-stats {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 12px;
-}
-.stat {
-  border-radius: 12px;
-  padding: 10px 12px;
-  background: rgba(0, 0, 0, 0.02);
-  border: 1px solid rgba(0, 0, 0, 0.05);
+
+:deep(.modernTable .ant-table-thead > tr > th) {
+  background: rgba(13, 27, 82, 0.03);
+  color: #0d1b52;
+  font-weight: 700;
 }
-.stat-num {
-  font-size: 18px;
-  font-weight: 900;
+
+:deep(.modernTable .ant-table-tbody > tr > td) {
+  color: #666;
 }
-.stat-txt {
-  font-size: 12px;
-  opacity: 0.75;
+
+.status-tag {
+  font-weight: 700;
+  padding: 4px 12px;
+  border-radius: 999px;
+  white-space: nowrap;
 }
 
-/* KPI */
-.kpi-row {
+.actions {
   display: grid;
-  gap: 10px;
-}
-.kpi {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  gap: 12px;
-}
-.kpi-label {
-  opacity: 0.75;
-}
-.kpi-value {
-  font-size: 26px;
-  font-weight: 900;
-}
-.kpi-tags {
-  display: flex;
+  grid-template-columns: 1fr 1fr;
   gap: 8px;
-  flex-wrap: wrap;
 }
 
-/* List */
-.list-item {
-  border-radius: 12px;
-}
-.list-title {
-  display: flex;
-  justify-content: space-between;
-  gap: 12px;
-  flex-wrap: wrap;
-  align-items: center;
+.actionBtn {
+  border-radius: 10px;
+  height: 38px;
+  font-weight: 700;
 }
-.list-title-text {
+
+.actionBtnPrimary {
+  border-radius: 10px;
+  height: 38px;
   font-weight: 700;
 }
-.mini-help {
-  margin-top: 6px;
-  font-size: 12px;
-  opacity: 0.7;
+
+
+@media (max-width: 768px) {
+.hide-mobile{
+    display: none !important;
+  }
+
+  .test-modern{
+    padding-top: 0 !important;
+    padding-bottom: 24px; 
+  }
+
+  .section-container{
+    max-width: none;
+    padding: 0 !important;
+    margin: 0 !important;
+  }
+
+  .hero{
+    grid-template-columns: 1fr;
+    width: 100%;
+    margin: 0 !important;
+    border-radius: 0 !important;
+
+    padding: 14px 16px 18px !important;
+  }
+
+  .heroKicker{ margin-top: 0 !important; }
+  .heroTitle{ margin-top: 6px !important; }
+  .heroText{ margin-top: 8px !important; }
+
+  .section{
+    padding: 0 16px;
+  }
+
+  .heroFacts{
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 576px){
+  .heroFacts{
+    grid-template-columns: 1fr;
+  }
 }
 </style>
diff --git a/front/src/views/postulante/LoginView.vue b/front/src/views/postulante/LoginView.vue
index f06d526..0408c24 100644
--- a/front/src/views/postulante/LoginView.vue
+++ b/front/src/views/postulante/LoginView.vue
@@ -4,10 +4,10 @@
       <a-col :xs="22" :sm="20" :md="20" :lg="16" :xl="14">
         <div class="auth-shell">
           <a-row :gutter="[0, 0]" class="auth-layout">
-            <!-- PANEL IZQUIERDO: FORM -->
+
             <a-col :xs="24" :md="12" class="auth-pane auth-pane-form">
               <div class="pane-inner">
-                <!-- Branding -->
+ 
                 <div class="brand">
                   <div class="brand-mark">
                     <img
@@ -56,7 +56,6 @@
                     </a-input>
                   </a-form-item>
 
-                  <!-- Nombre -->
                   <a-form-item v-if="isRegister" label="Nombre completo" name="name">
                     <a-input
                       v-model:value="formState.name"
@@ -67,14 +66,14 @@
                     </a-input>
                   </a-form-item>
 
-                  <!-- Email -->
+
                   <a-form-item label="Correo electrónico" name="email">
                     <a-input v-model:value="formState.email" size="large" placeholder="correo@ejemplo.com">
                       <template #prefix><MailOutlined /></template>
                     </a-input>
                   </a-form-item>
 
-                  <!-- Password -->
+
                   <a-form-item label="Contraseña" name="password">
                     <a-input-password
                       v-model:value="formState.password"
@@ -85,7 +84,7 @@
                     </a-input-password>
                   </a-form-item>
 
-                  <!-- Confirm Password -->
+                
                   <a-form-item
                     v-if="isRegister"
                     label="Confirmar contraseña"
@@ -100,7 +99,7 @@
                     </a-input-password>
                   </a-form-item>
 
-                  <!-- Recordarme -->
+
                   <a-row
                     v-if="!isRegister"
                     justify="space-between"
@@ -138,60 +137,68 @@
               </div>
             </a-col>
 
-            <!-- PANEL DERECHO: INFO (CORTO Y DINÁMICO) -->
-            <a-col :xs="24" :md="12" class="auth-pane auth-pane-info">
-              <div class="pane-inner pane-inner-info">
-                <div class="info-top">
-                  <a-tag class="info-tag">Universidad Nacional del Altiplano – Puno</a-tag>
-
-                  <a-typography-title :level="3" style="margin: 8px 0 0">
-                    {{ isRegister ? "Registro de Postulante" : "Portal del Postulante" }}
-                  </a-typography-title>
-
-                  <a-typography-text type="secondary">
-                    {{
-                      isRegister
-                        ? "Crea tu cuenta para iniciar tu inscripción al proceso de admisión."
-                        : "Inicia sesión para continuar tu inscripción y consultar tu estado."
-                    }}
-                  </a-typography-text>
-                </div>
-
-                <div class="info-section">
-                  <div class="info-section-title">
-                    {{ isRegister ? "Al registrarte podrás" : "Al ingresar podrás" }}
-                  </div>
-
-                  <div class="info-list">
-                    <div class="info-item">
-                      <span class="info-bullet"></span>
-                      <span><b>Completar tu postulación</b> (modalidad, sede y programa).</span>
+                <a-col :xs="24" :md="12" class="auth-pane auth-pane-info">
+                  <div class="pane-inner pane-inner-info">
+                    <div class="info-top">
+                      <a-tag class="info-tag">Universidad Nacional del Altiplano – Puno</a-tag>
+
+                      <a-typography-title :level="3" style="margin: 8px 0 0">
+                        {{ isRegister ? "Registro de Postulante" : "Portal del Postulante" }}
+                      </a-typography-title>
+
+                      <a-typography-text type="secondary">
+                        {{
+                          isRegister
+                            ? "Crea tu cuenta para participar en el proceso de admisión y acceder a todos los servicios del portal."
+                            : "Ingresa al portal para gestionar tu inscripción, revisar procesos disponibles y rendir un test de referencia."
+                        }}
+                      </a-typography-text>
                     </div>
 
-                    <div class="info-item">
-                      <span class="info-bullet"></span>
-                      <span><b>Subir requisitos</b> y revisar observaciones.</span>
+                    <div class="info-section">
+                      <div class="info-section-title">
+                        {{ isRegister ? "Al registrarte podrás" : "Al ingresar podrás" }}
+                      </div>
+
+                      <div class="info-list">
+
+                          <div class="info-item">
+                          <span class="info-bullet"></span>
+                          <span><b>Rendir un test de referencia</b>.</span>
+                        </div>
+                        <div class="info-item">
+                          <span class="info-bullet"></span>
+                          <span><b>Ver procesos disponibles</b> según tu modalidad.</span>
+                        </div>
+
+    
+
+                        <div class="info-item">
+                          <span class="info-bullet"></span>
+                          <span><b>Consultar tu estado</b> de inscripción y seguimiento del proceso.</span>
+                        </div>
+
+                        <!-- <div class="info-item">
+                          <span class="info-bullet"></span>
+                          <span><b>Ver tu resultado detallado</b> por cursos.</span>
+                        </div> -->
+
+                        <div class="info-item">
+                          <span class="info-bullet"></span>
+                          <span><b>Revisar comunicados oficiales</b> del proceso de admisión.</span>
+                        </div>
+                      </div>
                     </div>
 
-                    <div class="info-item" v-if="!isRegister">
-                      <span class="info-bullet"></span>
-                      <span><b>Ver comunicados y resultados</b> del proceso.</span>
-                    </div>
-
-                    <div class="info-item">
-                      <span class="info-bullet"></span>
-                      <span><b>Consultar tu estado</b> de inscripción/admisión.</span>
+                    <div class="info-foot">
+                      <a-typography-text type="secondary">
+                        Plataforma oficial de admisión • Soporte en horario institucional
+                      </a-typography-text>
                     </div>
                   </div>
-                </div>
+                </a-col>
+
 
-                <div class="info-foot">
-                  <a-typography-text type="secondary">
-                    Soporte: Mesa de ayuda • Atención en horario institucional
-                  </a-typography-text>
-                </div>
-              </div>
-            </a-col>
           </a-row>
         </div>
       </a-col>
@@ -214,10 +221,7 @@ const isRegister = ref(false);
 const rememberMe = ref(false);
 const loading = ref(false);
 
-/**
- * ✅ Logo en /public (recomendado):
- * public/logotiny.png  ->  "/logotiny.png"
- */
+
 const logoSrc = "/logotiny.png";
 const logoError = ref(false);
 
@@ -470,7 +474,6 @@ checkExistingAuth();
   font-weight: 800;
 }
 
-/* Info panel corto */
 .info-top {
   text-align: left;
 }
@@ -522,7 +525,6 @@ checkExistingAuth();
   border-top: 1px solid var(--ant-colorBorderSecondary, rgba(0, 0, 0, 0.06));
 }
 
-/* Responsive */
 @media (max-width: 768px) {
   .auth-pane {
     padding: 22px;
@@ -536,7 +538,6 @@ checkExistingAuth();
   }
 }
 
-/* Fallback si no hay color-mix */
 @supports not (color: color-mix(in srgb, white 50%, black)) {
   .info-tag {
     background: rgba(22, 119, 255, 0.12);
diff --git a/front/src/views/postulante/MisProcesos.vue b/front/src/views/postulante/MisProcesos.vue
index 4a11f4d..76664fb 100644
--- a/front/src/views/postulante/MisProcesos.vue
+++ b/front/src/views/postulante/MisProcesos.vue
@@ -1,207 +1,254 @@
 <template>
-  <a-card class="procesos-card" :bordered="false">
+    <div class="title">Mis procesos de admisión</div>
+  <a-card class="card" :bordered="true">
     <template #title>
-      <div class="card-title">
-        <div class="title-left">
-          <div class="title-main">Mis procesos de admisión</div>
-          <div class="title-sub">Resultados registrados por DNI</div>
+      <div class="header">
+        <div class="headerLeft">
+        
+          <div class="subtitle">Resultados registrados por DNI</div>
         </div>
 
-        <div class="title-right">
-          <a-space>
-            <a-button @click="obtenerProcesos" :loading="loading">Actualizar</a-button>
-          </a-space>
+        <div class="headerRight">
+          <a-button
+            @click="obtenerProcesos"
+            :loading="loading"
+            class="btn"
+            type="primary"
+          >
+            Actualizar
+          </a-button>
         </div>
       </div>
     </template>
 
     <a-spin :spinning="loading">
-      <div class="top-summary">
-        <a-alert v-if="!loading" type="info" show-icon class="summary-alert">
-          Total de procesos: <strong>{{ procesos.length }}</strong>
-        </a-alert>
+
+      <div class="tools">
+        <div class="counter">
+          <span class="counterLabel">Total</span>
+          <span class="counterValue">{{ procesosFiltrados.length }}</span>
+        </div>
 
         <a-input
           v-model:value="search"
           allow-clear
-          placeholder="Buscar por nombre de proceso..."
-          class="search-input"
+          placeholder="Buscar por nombre de proceso…"
+          class="search"
         />
       </div>
 
-      <a-table
-        class="procesos-table"
-        :dataSource="procesosFiltrados"
-        :columns="columns"
-        rowKey="id"
-        :pagination="{ pageSize: 7, showSizeChanger: false }"
-        :scroll="{ x: 900 }"
-      >
-        <template #bodyCell="{ column, record }">
-          <!-- Nombre -->
-          <template v-if="column.key === 'nombre'">
-            <div class="nombre">
-              {{ record.nombre || '-' }}
-            </div>
-          </template>
+      <div class="tableWrap desktopOnly">
+        <a-table
+          :dataSource="procesosFiltrados"
+          :columns="columns"
+          rowKey="id"
+          :pagination="{ pageSize: 7, showSizeChanger: false }"
+          :scroll="{ x: 900 }"
+        >
+          <template #bodyCell="{ column, record }">
 
-          <!-- Puntaje -->
-          <template v-else-if="column.key === 'puntaje'">
-            <span class="puntaje">
-              {{ record.puntaje ?? '-' }}
-            </span>
-          </template>
+            <template v-if="column.key === 'nombre'">
+              <div class="nombre">{{ record.nombre || "-" }}</div>
+              <div class="meta">ID: {{ record.id }}</div>
+            </template>
+
+            <template v-else-if="column.key === 'puntaje'">
+              <div class="puntaje">{{ record.puntaje ?? "-" }}</div>
+              <div class="meta">Puntaje</div>
+            </template>
+
+            <template v-else-if="column.key === 'apto'">
+              <span class="statusPill" :class="statusClass(record.apto)">
+                {{ aptoTexto(record.apto) }}
+              </span>
+            </template>
+
+            <template v-else-if="column.key === 'acciones'">
+              <a-button size="small" @click="verDetalle(record)">
+                Ver detalle
+              </a-button>
+            </template>
 
-          <!-- Apto -->
-          <template v-else-if="column.key === 'apto'">
-            <a-tag :color="aptoColor(record.apto)" class="tag-pill">
-              {{ aptoTexto(record.apto) }}
-            </a-tag>
           </template>
 
-          <!-- Acciones -->
-          <template v-else-if="column.key === 'acciones'">
-            <a-space>
-              <a-button size="small" @click="verDetalle(record)">Ver detalle</a-button>
-            </a-space>
+          <template #emptyText>
+            <a-empty description="No se encontraron procesos" />
           </template>
-        </template>
+        </a-table>
+      </div>
+
+
+      <div class="cards mobileOnly">
+        <template v-if="procesosFiltrados.length">
+          <div
+            v-for="p in procesosFiltrados"
+            :key="p.id"
+            class="itemCard"
+          >
+            <div class="itemTop">
+              <div class="itemTitle">{{ p.nombre || "-" }}</div>
+              <span class="statusPill" :class="statusClass(p.apto)">
+                {{ aptoTexto(p.apto) }}
+              </span>
+            </div>
+
+            <div class="itemGrid">
+              <div class="kv">
+                <div class="k">Puntaje</div>
+                <div class="v strong">{{ p.puntaje ?? "-" }}</div>
+              </div>
+
+              <div class="kv">
+                <div class="k">ID</div>
+                <div class="v">{{ p.id }}</div>
+              </div>
+            </div>
 
-        <template #emptyText>
-          <a-empty description="No se encontraron procesos" />
+            <div class="itemActions">
+              <a-button
+                type="primary"
+                block
+                class="btnPrimary"
+                @click="verDetalle(p)"
+              >
+                Ver detalle
+              </a-button>
+            </div>
+          </div>
         </template>
-      </a-table>
+
+        <a-empty v-else description="No se encontraron procesos" />
+      </div>
+
     </a-spin>
   </a-card>
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
-import { message } from 'ant-design-vue'
-import api from '../../axiosPostulante' // ✅ ajusta la ruta a tu axios
+import { ref, computed, onMounted } from "vue";
+import { message } from "ant-design-vue";
+import api from "../../axiosPostulante";
 
-const procesos = ref([])
-const loading = ref(false)
-const search = ref('')
+const procesos = ref([]);
+const loading = ref(false);
+const search = ref("");
 
 const columns = [
-  { title: 'Proceso', dataIndex: 'nombre', key: 'nombre', width: 420 },
-  { title: 'Puntaje', dataIndex: 'puntaje', key: 'puntaje', width: 140 },
-  { title: 'Estado', dataIndex: 'apto', key: 'apto', width: 160 },
-  { title: 'Acciones', key: 'acciones', width: 160 }
-]
+  { title: "Proceso", dataIndex: "nombre", key: "nombre", width: 420 },
+  { title: "Puntaje", dataIndex: "puntaje", key: "puntaje", width: 140 },
+  { title: "Estado", dataIndex: "apto", key: "apto", width: 160 },
+  { title: "Acciones", key: "acciones", width: 160 },
+];
 
 const obtenerProcesos = async () => {
-  loading.value = true
+  loading.value = true;
   try {
-    // ✅ Ruta: crea una ruta GET que apunte a misProcesos()
-    // Ejemplo: Route::get('/postulante/mis-procesos', ...)
-    const { data } = await api.get('/postulante/mis-procesos')
-
+    const { data } = await api.get("/postulante/mis-procesos");
     if (data?.success) {
-      procesos.value = Array.isArray(data.data) ? data.data : []
+      procesos.value = Array.isArray(data.data) ? data.data : [];
     } else {
-      message.error('No se pudieron obtener los procesos')
+      message.error("No se pudieron obtener los procesos");
     }
   } catch (e) {
-    console.error(e)
-    message.error(e.response?.data?.message || 'Error al cargar procesos')
+    message.error(e.response?.data?.message || "Error al cargar procesos");
   } finally {
-    loading.value = false
+    loading.value = false;
   }
-}
+};
 
 const aptoTexto = (apto) => {
-  // en DB puede venir 1/0, true/false, "1"/"0"
-  if (apto === 1 || apto === true || apto === '1') return 'APTO'
-  if (apto === 0 || apto === false || apto === '0') return 'NO APTO'
-  return String(apto ?? '-').toUpperCase()
-}
+  if (apto == 1) return "APTO";
+  if (apto == 0) return "NO APTO";
+  return "-";
+};
 
-const aptoColor = (apto) => {
-  if (apto === 1 || apto === true || apto === '1') return 'green'
-  if (apto === 0 || apto === false || apto === '0') return 'red'
-  return 'default'
-}
+const statusClass = (apto) => {
+  if (apto == 1) return "ok";
+  if (apto == 0) return "bad";
+  return "neutral";
+};
 
 const procesosFiltrados = computed(() => {
-  const q = search.value.trim().toLowerCase()
-  if (!q) return procesos.value
-  return procesos.value.filter(p =>
-    String(p.nombre || '').toLowerCase().includes(q)
-  )
-})
+  const q = search.value.trim().toLowerCase();
+  if (!q) return procesos.value;
+  return procesos.value.filter((p) =>
+    String(p.nombre || "").toLowerCase().includes(q)
+  );
+});
 
 const verDetalle = (record) => {
-  // ✅ Aquí puedes navegar a otra vista si tienes ruta
-  // router.push({ name: 'DetalleProceso', params: { procesoId: record.id } })
-  message.info(`Proceso: ${record.nombre} | Puntaje: ${record.puntaje ?? '-'}`)
-}
+  message.info(`Proceso: ${record.nombre} | Puntaje: ${record.puntaje ?? "-"}`);
+};
 
 onMounted(() => {
-  obtenerProcesos()
-})
+  obtenerProcesos();
+});
 </script>
 
 <style scoped>
-.procesos-card {
+
+
+.card {
+  width: 100%;
   max-width: 1100px;
-  margin: 20px auto;
-  border-radius: 18px;
-  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.10);
-  background: #fff;
+  margin: 16px auto;
+  border-radius: 14px;
 }
 
-.card-title {
+
+.header {
   display: flex;
   justify-content: space-between;
-  gap: 12px;
+  gap: 16px;
   flex-wrap: wrap;
-  align-items: flex-start;
 }
 
-.title-left {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
+.title {
+  font-size: clamp(1.2rem, 4vw, 1.8rem);
+  font-weight: 700;
+  color: #0d1b52;
+  line-height: 1.2;
+  word-break: break-word;
 }
 
-.title-main {
-  font-weight: 900;
-  font-size: 18px;
-  color: #111827;
+.subtitle {
+  font-size: 12px;
+  color: #6b7280;
+  margin-top: 4px;
 }
 
-.title-sub {
-  font-weight: 650;
-  color: #6b7280;
-  font-size: 13px;
+.tools {
+  display: grid;
+  grid-template-columns: 220px 1fr;
+  gap: 12px;
+  margin-bottom: 12px;
 }
 
-.top-summary {
+.counter {
+  background: #fafafa;
+  border-radius: 12px;
+  padding: 10px 12px;
   display: flex;
-  gap: 12px;
-  align-items: center;
   justify-content: space-between;
-  flex-wrap: wrap;
-  margin-bottom: 14px;
+  font-weight: 700;
 }
 
-.summary-alert {
-  border-radius: 14px;
-  margin: 0;
-  flex: 1;
-  min-width: 280px;
+.counterValue {
+  font-size: 18px;
 }
 
-.search-input {
-  max-width: 360px;
+.search {
   border-radius: 12px;
 }
 
+
+.tableWrap {
+  width: 100%;
+  overflow-x: auto;
+}
+
 .nombre {
-  font-weight: 850;
-  color: #111827;
+  font-weight: 800;
 }
 
 .puntaje {
@@ -209,14 +256,105 @@ onMounted(() => {
   color: #1677ff;
 }
 
-.tag-pill {
+.meta {
+  font-size: 12px;
+  color: #6b7280;
+}
+
+
+.statusPill {
+  padding: 4px 10px;
   border-radius: 999px;
-  font-weight: 800;
-  padding: 2px 10px;
+  font-size: 12px;
+  font-weight: 900;
+  background: #f5f5f5;
+}
+
+.statusPill.ok {
+  background: rgba(22,119,255,.1);
+  border: 1px solid rgba(22,119,255,.3);
+}
+
+.statusPill.bad {
+  background: rgba(0,0,0,.04);
+}
+
+.cards {
+  display: grid;
+  gap: 12px;
 }
 
-.procesos-table :deep(.ant-table) {
+.itemCard {
+  border: 1px solid rgba(0,0,0,.08);
   border-radius: 14px;
-  overflow: hidden;
+  padding: 12px;
+}
+
+.itemTop {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.itemTitle {
+  font-weight: 900;
 }
-</style>
\ No newline at end of file
+
+.itemGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.kv {
+  background: #fafafa;
+  border-radius: 12px;
+  padding: 10px;
+}
+
+.k {
+  font-size: 12px;
+  color: #6b7280;
+}
+
+.v {
+  font-weight: 900;
+}
+
+.v.strong {
+  color: #1677ff;
+}
+
+.btnPrimary {
+  height: 42px;
+  border-radius: 12px;
+  font-weight: 900;
+  margin-top: 12px;
+}
+
+
+.desktopOnly { display: block; }
+.mobileOnly { display: none; }
+
+@media (max-width: 768px) {
+  .tools {
+    grid-template-columns: 1fr;
+  }
+
+  .desktopOnly { display: none; }
+  .mobileOnly { display: block; }
+
+  .header {
+    flex-direction: column;
+  }
+  .title {
+    font-size: 1.3rem;
+  }
+  .card {
+    margin: 0;
+    border-radius: 0;
+  }
+}
+
+</style>
diff --git a/front/src/views/postulante/Pagos.vue b/front/src/views/postulante/Pagos.vue
index 4fd9305..d0f346b 100644
--- a/front/src/views/postulante/Pagos.vue
+++ b/front/src/views/postulante/Pagos.vue
@@ -1,202 +1,188 @@
 <template>
-  <a-card class="pagos-card" :bordered="false">
+  <div class="title">Mis pagos realizados</div>
+  <a-card class="card" :bordered="true">
     <template #title>
-      <div class="card-title">
-        <div class="title-left">
-          <div class="title-main">Mis Pagos Realizados</div>
-          <div class="title-sub">Historial de pagos registrados en el sistema</div>
+      <div class="header">
+        <div class="headerLeft">
+          
+          <div class="subtitle">Historial de pagos registrados en el sistema</div>
         </div>
 
-        <div class="title-right">
-          <a-space>
-            <a-button @click="obtenerPagos" :loading="loading">Actualizar</a-button>
-          </a-space>
+        <div class="headerRight">
+          <a-button @click="obtenerPagos" :loading="loading" class="btn" block>
+            Actualizar
+          </a-button>
         </div>
       </div>
     </template>
 
-    <!-- Loading -->
     <a-spin :spinning="loading">
-      <!-- Resumen superior -->
-      <div class="top-summary">
-        <a-alert type="info" show-icon class="summary-alert">
-          Total de pagos encontrados: <strong>{{ pagos.length }}</strong>
-        </a-alert>
+      <div class="tools">
+        <div class="counter">
+          <span class="counterLabel">Total</span>
+          <span class="counterValue">{{ pagosFiltrados.length }}</span>
+        </div>
 
         <a-input
           v-model:value="search"
           allow-clear
-          placeholder="Buscar por código, uso/proceso o tipo..."
-          class="search-input"
+          placeholder="Buscar por código, uso/proceso o tipo…"
+          class="search"
         />
       </div>
 
-      <!-- Tabla -->
-      <a-table
-        class="pagos-table"
-        :dataSource="pagosFiltrados"
-        :columns="columns"
-        rowKey="key"
-        :pagination="{ pageSize: 6, showSizeChanger: false }"
-        :scroll="{ x: 900 }"
-      >
-        <template #bodyCell="{ column, record }">
-          <!-- Tipo -->
-          <template v-if="column.key === 'tipo'">
-            <a-tag :color="getColor(record.tipo)" class="tag-pill">
-              {{ tipoLabel(record.tipo) }}
-            </a-tag>
+      <div v-if="!isMobile" class="tableWrap">
+        <a-table
+          class="table"
+          :dataSource="pagosFiltrados"
+          :columns="columns"
+          rowKey="key"
+          :pagination="{ pageSize: 6, showSizeChanger: false }"
+          :scroll="{ x: 900 }"
+        >
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'tipo'">
+              <span class="pill pill--neutral">{{ tipoLabel(record.tipo) }}</span>
+            </template>
+
+            <template v-else-if="column.key === 'codigo'">
+              <div class="codigoCell">
+                <div class="codigo">{{ record.codigo || "-" }}</div>
+                <span v-if="record.estado" class="pill pill--soft">{{ record.estado }}</span>
+              </div>
+            </template>
+
+            <template v-else-if="column.key === 'uso'">
+              <div class="usoCell">
+                <div class="usoMain">{{ getUso(record) }}</div>
+                <div v-if="record.proceso_nombre || record.proceso" class="usoSub">
+                  {{ record.proceso_nombre || record.proceso }}
+                </div>
+              </div>
+            </template>
+
+            <template v-else-if="column.key === 'monto'">
+              <div class="monto">S/ {{ Number(record.monto || 0).toFixed(2) }}</div>
+            </template>
+
+            <template v-else-if="column.key === 'fecha_pago'">
+              <div class="fecha">{{ formatFecha(record.fecha_pago) }}</div>
+            </template>
           </template>
 
-          <!-- Código -->
-          <template v-else-if="column.key === 'codigo'">
-            <div class="codigo-cell">
-              <span class="codigo">{{ record.codigo || '-' }}</span>
-              <a-tag v-if="record.estado" color="default" class="tag-mini">
-                {{ record.estado }}
-              </a-tag>
-            </div>
+          <template #emptyText>
+            <a-empty description="No se encontraron pagos" />
           </template>
+        </a-table>
+      </div>
 
-          <!-- Uso / Proceso -->
-          <template v-else-if="column.key === 'uso'">
-            <div class="uso-cell">
-              <div class="uso-main">
-                {{ getUso(record) }}
-              </div>
-              <div v-if="record.proceso_nombre || record.proceso" class="uso-sub">
-                {{ record.proceso_nombre || record.proceso }}
+ 
+      <div v-else class="cards">
+        <template v-if="pagosFiltrados.length">
+          <div v-for="p in pagosFiltrados" :key="p.key" class="itemCard">
+            <div class="itemTop">
+              <div class="itemLeft">
+                <div class="itemTitle">{{ getUso(p) }}</div>
+                <div class="itemSub" v-if="p.proceso_nombre || p.proceso">
+                  {{ p.proceso_nombre || p.proceso }}
+                </div>
               </div>
+
+              <span class="pill pill--neutral">{{ tipoLabel(p.tipo) }}</span>
             </div>
-          </template>
 
-          <!-- Monto -->
-          <template v-else-if="column.key === 'monto'">
-            <span class="monto">
-              S/ {{ Number(record.monto || 0).toFixed(2) }}
-            </span>
-          </template>
+            <div class="grid">
+              <div class="kv">
+                <div class="k">Código</div>
+                <div class="v strong">{{ p.codigo || "-" }}</div>
+              </div>
 
-          <!-- Fecha -->
-          <template v-else-if="column.key === 'fecha_pago'">
-            <span class="fecha">{{ formatFecha(record.fecha_pago) }}</span>
-          </template>
-        </template>
+              <div class="kv">
+                <div class="k">Monto</div>
+                <div class="v strong primary">S/ {{ Number(p.monto || 0).toFixed(2) }}</div>
+              </div>
+
+              <div class="kv">
+                <div class="k">Fecha</div>
+                <div class="v">{{ formatFecha(p.fecha_pago) }}</div>
+              </div>
 
-        <!-- Empty -->
-        <template #emptyText>
-          <a-empty description="No se encontraron pagos" />
+              <div class="kv" v-if="p.estado">
+                <div class="k">Estado</div>
+                <div class="v">
+                  <span class="pill pill--soft">{{ p.estado }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
         </template>
-      </a-table>
-
-      <!-- Tip informativo -->
-      <a-alert
-        class="tip-alert"
-        type="warning"
-        show-icon
-        message="Nota"
-        description="Si un pago no muestra el campo “Uso / Proceso”, es porque aún no está asociado a un proceso en el backend."
-      />
+
+        <a-empty v-else description="No se encontraron pagos" />
+      </div>
+
+      <div class="note">
+        <div class="noteTitle">Nota</div>
+        <div class="noteText">
+          Si un pago no muestra “Uso / Proceso”, es porque aún no está asociado a un proceso en el backend.
+        </div>
+      </div>
     </a-spin>
   </a-card>
 </template>
 
 <script setup>
-import { ref, onMounted, computed } from 'vue'
-import { message } from 'ant-design-vue'
-import api from '.././../axiosPostulante'
+import { ref, onMounted, computed, onBeforeUnmount } from "vue";
+import { message } from "ant-design-vue";
+import api from ".././../axiosPostulante";
 
-const pagos = ref([])
-const loading = ref(false)
-const search = ref('')
+const pagos = ref([]);
+const loading = ref(false);
+const search = ref("");
 
 const columns = [
-  {
-    title: 'Tipo',
-    dataIndex: 'tipo',
-    key: 'tipo',
-    width: 140
-  },
-  {
-    title: 'Código',
-    dataIndex: 'codigo',
-    key: 'codigo',
-    width: 200
-  },
-  {
-    title: 'Uso / Proceso',
-    dataIndex: 'uso',
-    key: 'uso',
-    width: 320
-  },
-  {
-    title: 'Monto',
-    dataIndex: 'monto',
-    key: 'monto',
-    width: 140
-  },
-  {
-    title: 'Fecha de Pago',
-    dataIndex: 'fecha_pago',
-    key: 'fecha_pago',
-    width: 220
-  }
-]
+  { title: "Tipo", dataIndex: "tipo", key: "tipo", width: 160 },
+  { title: "Código", dataIndex: "codigo", key: "codigo", width: 220 },
+  { title: "Uso / Proceso", dataIndex: "uso", key: "uso", width: 360 },
+  { title: "Monto", dataIndex: "monto", key: "monto", width: 160 },
+  { title: "Fecha de pago", dataIndex: "fecha_pago", key: "fecha_pago", width: 220 },
+];
 
 const obtenerPagos = async () => {
-  loading.value = true
+  loading.value = true;
   try {
-    const { data } = await api.get('/postulante/pagos')
-
+    const { data } = await api.get("/postulante/pagos");
     if (data.success) {
       pagos.value = (data.pagos || []).map((pago, index) => ({
         ...pago,
-        key: pago.id ?? `${pago.codigo ?? 'pago'}-${index}` // key estable
-      }))
+        key: pago.id ?? `${pago.codigo ?? "pago"}-${index}`,
+      }));
     } else {
-      message.error('No se pudieron obtener los pagos')
+      message.error("No se pudieron obtener los pagos");
     }
   } catch (error) {
-    console.error(error)
-    message.error('Error al cargar pagos')
+    console.error(error);
+    message.error("Error al cargar pagos");
   } finally {
-    loading.value = false
+    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 tipoLabel = (tipo) => {
   const map = {
-    pyto_peru: 'PYTO PERÚ',
-    banco_nacion: 'BANCO NACIÓN',
-    caja: 'CAJA'
-  }
-  return map[tipo] || String(tipo || '-').toUpperCase()
-}
+    pyto_peru: "PYTO PERÚ",
+    banco_nacion: "BANCO NACIÓN",
+    caja: "CAJA",
+  };
+  return map[tipo] || String(tipo || "-").toUpperCase();
+};
 
 const formatFecha = (fecha) => {
-  if (!fecha) return '-'
-  const soloFecha = String(fecha).split(' ')[0] // "2025-01-27"
-  const [y, m, d] = soloFecha.split('-')
-  return `${Number(d)}/${Number(m)}/${y}` // "27/1/2025"
-}
-
-/**
- * ✅ “Uso / Proceso”
- * Ajusta los nombres según lo que tu backend mande:
- * - uso
- * - concepto
- * - motivo
- * - descripcion
- * - proceso_nombre
- * - proceso
- */
+  if (!fecha) return "-";
+  const soloFecha = String(fecha).split(" ")[0];
+  const [y, m, d] = soloFecha.split("-");
+  return `${Number(d)}/${Number(m)}/${y}`;
+};
+
 const getUso = (record) => {
   return (
     record.uso ||
@@ -205,149 +191,278 @@ const getUso = (record) => {
     record.descripcion ||
     record.proceso_nombre ||
     record.proceso ||
-    '-'
-  )
-}
+    "-"
+  );
+};
 
 const pagosFiltrados = computed(() => {
-  const q = search.value.trim().toLowerCase()
-  if (!q) return pagos.value
+  const q = search.value.trim().toLowerCase();
+  if (!q) return pagos.value;
 
   return pagos.value.filter((p) => {
-    const texto = [
-      p.tipo,
-      p.codigo,
-      getUso(p),
-      p.proceso_nombre,
-      p.proceso
-    ]
+    const texto = [p.tipo, p.codigo, getUso(p), p.proceso_nombre, p.proceso]
       .filter(Boolean)
-      .join(' ')
-      .toLowerCase()
+      .join(" ")
+      .toLowerCase();
+    return texto.includes(q);
+  });
+});
+
+const isMobile = ref(false);
+let mq = null;
 
-    return texto.includes(q)
-  })
-})
+function setMobile() {
+  isMobile.value = window.matchMedia("(max-width: 640px)").matches;
+}
 
 onMounted(() => {
-  obtenerPagos()
-})
+  obtenerPagos();
+  mq = window.matchMedia("(max-width: 640px)");
+  setMobile();
+  if (mq.addEventListener) mq.addEventListener("change", setMobile);
+  else mq.addListener(setMobile);
+});
+
+onBeforeUnmount(() => {
+  if (!mq) return;
+  if (mq.removeEventListener) mq.removeEventListener("change", setMobile);
+  else mq.removeListener(setMobile);
+});
 </script>
 
 <style scoped>
-.pagos-card {
+.card {
   max-width: 1100px;
-  margin: 20px auto;
-  border-radius: 18px;
-  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.10);
-  background: #fff;
+  margin: 16px auto;
+  border-radius: 14px;
 }
 
-.card-title {
+
+.header {
   display: flex;
   justify-content: space-between;
+  align-items: flex-start;
   gap: 12px;
   flex-wrap: wrap;
-  align-items: flex-start;
 }
-
-.title-left {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
+.headerLeft {
+  min-width: 240px;
 }
-
-.title-main {
-  font-weight: 900;
-  font-size: 18px;
-  color: #111827;
+.title {
+  font-size: clamp(1.2rem, 4vw, 1.8rem);
+  font-weight: 700;
+  color: #0d1b52;
+  line-height: 1.2;
+  word-break: break-word;
 }
-
-.title-sub {
-  font-weight: 650;
-  color: #6b7280;
-  font-size: 13px;
+.subtitle {
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--ant-colorTextSecondary, #6b7280);
 }
-
-.top-summary {
+.headerRight {
+  min-width: 180px;
   display: flex;
+  justify-content: flex-end;
+}
+.btn {
+  border-radius: 10px;
+}
+
+.tools {
+  display: grid;
+  grid-template-columns: 220px 1fr;
   gap: 12px;
   align-items: center;
+  margin-bottom: 12px;
+}
+.counter {
+  border: 1px solid var(--ant-colorBorderSecondary, rgba(0,0,0,.08));
+  background: var(--ant-colorFillAlter, #fafafa);
+  border-radius: 12px;
+  padding: 10px 12px;
+  display: flex;
   justify-content: space-between;
-  flex-wrap: wrap;
-  margin-bottom: 14px;
+  align-items: baseline;
 }
-
-.summary-alert {
-  border-radius: 14px;
-  margin: 0;
-  flex: 1;
-  min-width: 280px;
+.counterLabel {
+  font-size: 12px;
+  color: var(--ant-colorTextSecondary, #6b7280);
+  font-weight: 800;
 }
-
-.search-input {
-  max-width: 360px;
+.counterValue {
+  font-size: 18px;
+  font-weight: 900;
+  color: var(--ant-colorTextHeading, #111827);
+}
+.search {
   border-radius: 12px;
 }
 
-.pagos-table :deep(.ant-table) {
-  border-radius: 14px;
+.tableWrap {
+  border-radius: 12px;
   overflow: hidden;
 }
-
-.tag-pill {
-  border-radius: 999px;
-  font-weight: 800;
-  padding: 2px 10px;
+.table :deep(.ant-table) {
+  border-radius: 12px;
+  overflow: hidden;
 }
 
-.tag-mini {
+.pill {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 10px;
   border-radius: 999px;
-  font-weight: 700;
+  font-weight: 900;
+  font-size: 12px;
+  border: 1px solid var(--ant-colorBorderSecondary, rgba(0,0,0,.08));
+  background: var(--ant-colorFillAlter, #fafafa);
+  color: var(--ant-colorTextHeading, #111827);
+  white-space: nowrap;
+}
+.pill--neutral {
+  border-color: rgba(0,0,0,.10);
+  background: rgba(0,0,0,.04);
+}
+.pill--soft {
+  border-color: rgba(22,119,255,.25);
+  background: rgba(22,119,255,.08); 
+  color: var(--ant-colorTextHeading, #111827);
 }
 
-.codigo-cell {
+.codigoCell {
   display: flex;
   gap: 8px;
   align-items: center;
   flex-wrap: wrap;
 }
-
 .codigo {
   font-weight: 900;
-  color: #111827;
+  color: var(--ant-colorTextHeading, #111827);
 }
 
-.uso-cell {
+.usoCell {
   display: flex;
   flex-direction: column;
   gap: 2px;
 }
+.usoMain {
+  font-weight: 900;
+  color: var(--ant-colorTextHeading, #111827);
+  line-height: 1.25;
+}
+.usoSub {
+  font-weight: 700;
+  color: var(--ant-colorTextSecondary, #6b7280);
+  font-size: 12px;
+}
 
-.uso-main {
+.monto {
+  font-weight: 900;
+  color: var(--ant-colorPrimary, #1677ff);
+}
+.fecha {
   font-weight: 800;
-  color: #111827;
-  line-height: 1.3;
+  color: var(--ant-colorText, #374151);
 }
 
-.uso-sub {
-  font-weight: 650;
-  color: #6b7280;
-  font-size: 12px;
+.cards {
+  display: grid;
+  gap: 12px;
 }
 
-.monto {
+.itemCard {
+  border: 1px solid var(--ant-colorBorderSecondary, rgba(0,0,0,.08));
+  background: var(--ant-colorBgContainer, #fff);
+  border-radius: 14px;
+  padding: 12px;
+}
+
+.itemTop {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+
+.itemTitle {
   font-weight: 900;
-  color: #1677ff;
+  color: var(--ant-colorTextHeading, #111827);
+  line-height: 1.2;
+}
+.itemSub {
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--ant-colorTextSecondary, #6b7280);
 }
 
-.fecha {
-  font-weight: 650;
-  color: #374151;
+.grid {
+  margin-top: 10px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
 }
 
-.tip-alert {
+.kv {
+  border: 1px solid var(--ant-colorBorderSecondary, rgba(0,0,0,.06));
+  background: var(--ant-colorFillAlter, #fafafa);
+  border-radius: 12px;
+  padding: 10px 12px;
+}
+
+.k {
+  font-size: 12px;
+  color: var(--ant-colorTextSecondary, #6b7280);
+  font-weight: 800;
+}
+.v {
+  margin-top: 4px;
+  font-weight: 900;
+  color: var(--ant-colorTextHeading, #111827);
+}
+.v.strong {
+  font-weight: 900;
+}
+.v.primary {
+  color: var(--ant-colorPrimary, #1677ff);
+}
+
+.note {
   margin-top: 14px;
   border-radius: 14px;
+  border: 1px solid var(--ant-colorBorderSecondary, rgba(0,0,0,.08));
+  background: var(--ant-colorFillAlter, #fafafa);
+  padding: 12px;
+}
+.noteTitle {
+  font-weight: 900;
+  color: var(--ant-colorTextHeading, #111827);
+}
+.noteText {
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--ant-colorTextSecondary, #6b7280);
+  line-height: 1.5;
+}
+
+@media (max-width: 640px) {
+  .card {
+    margin: 0;
+    border-radius: 0;
+  }
+  .headerRight {
+    width: 100%;
+    min-width: 0;
+  }
+  .title {
+    font-size: 1.3rem;
+  }
+  .tools {
+    grid-template-columns: 1fr;
+  }
+  .grid {
+    grid-template-columns: 1fr;
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/front/src/views/postulante/PortalView.vue b/front/src/views/postulante/PortalView.vue
index 3cd041e..fecca08 100644
--- a/front/src/views/postulante/PortalView.vue
+++ b/front/src/views/postulante/PortalView.vue
@@ -1,4 +1,3 @@
-<!-- views/PortalView.vue -->
 <template>
   <a-layout class="portal-layout">
     <!-- Header -->
@@ -19,7 +18,7 @@
         </div>
 
         <div class="header-right">
-          <!-- Perfil -->
+
           <a-dropdown :trigger="['click']" placement="bottomRight">
             <div class="profile-trigger">
               <a-avatar
@@ -55,13 +54,6 @@
                   </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" />
 
@@ -79,19 +71,17 @@
       </div>
     </a-layout-header>
 
-    <!-- Main layout -->
+
     <a-layout
       class="main-layout"
       :class="{ 'layout-collapsed': sidebarCollapsed && !isMobile }"
     >
-      <!-- Backdrop móvil -->
       <div
         v-if="isMobile && !sidebarCollapsed"
         class="sidebar-backdrop"
         @click="sidebarCollapsed = true"
       />
 
-      <!-- Sidebar -->
       <a-layout-sider
         v-model:collapsed="sidebarCollapsed"
         :width="sidebarWidth"
@@ -186,7 +176,6 @@
         </div>
       </a-layout-sider>
 
-      <!-- Content -->
       <a-layout-content class="content">
         <div class="content-container">
           <a-card class="content-card" :bordered="false">
@@ -260,7 +249,6 @@ const getAvatarColor = (name) => {
 const handleMenuSelect = ({ key }) => {
   selectedKeys.value = [key]
 
-  // Ajusta aquí tus rutas reales
   const routes = {
     'dashboard-postulante': { name: 'DashboardPostulante' },
     'test-postulante': { name: 'TestPostulante' },
@@ -280,16 +268,12 @@ const handleLogout = async () => {
   try {
     await authStore.logout()
     message.success('Sesión cerrada correctamente')
-    router.push('/login-postulante')
+    router.push('/')
   } 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')
@@ -305,20 +289,20 @@ onUnmounted(() => {
 })
 </script>
 
+
 <style scoped>
-/* Tipografía institucional */
+
+
 .portal-layout,
 .portal-layout * {
   font-family: "Times New Roman", Times, serif;
 }
 
-/* Layout base */
 .portal-layout {
   min-height: 100vh;
   background: var(--ant-colorBgLayout, #f5f5f5);
 }
 
-/* ===== Header ===== */
 .header {
   height: 64px;
   padding: 0;
@@ -335,8 +319,8 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 32px; /* más aire */
-  width: 100%;     /* ocupa todo */
+  padding: 0 32px; 
+  width: 100%;    
 }
 
 .header-left {
@@ -391,7 +375,6 @@ onUnmounted(() => {
   margin-top: 2px;
 }
 
-/* Profile trigger */
 .header-right {
   display: flex;
   align-items: center;
@@ -420,8 +403,8 @@ onUnmounted(() => {
 .profile-text {
   display: flex;
   flex-direction: column;
-  gap: 0;              /* ✅ elimina separación */
-  line-height: 1.05;   /* ✅ compacto */
+  gap: 0;             
+  line-height: 1.05;  
 }
 
 
@@ -429,7 +412,7 @@ onUnmounted(() => {
   font-size: 13px;
   font-weight: 800;
   color: var(--ant-colorText, #374151);
-  margin: 0;           /* ✅ sin margen */
+  margin: 0;         
   padding: 0;
 }
 
@@ -438,9 +421,9 @@ onUnmounted(() => {
   font-size: 12px;
   font-weight: 700;
   color: var(--ant-colorTextSecondary, #6b7280);
-  margin: 0;           /* ✅ sin margen */
+  margin: 0;      
   padding: 0;
-  transform: translateY(-1px); /* ✅ sube 1px (opcional) */
+  transform: translateY(-1px); 
 }
 .dropdown-chevron {
   font-size: 12px;
@@ -522,7 +505,6 @@ onUnmounted(() => {
   color: #ff4d4f;
 }
 
-/* ===== Sidebar ===== */
 .sidebar {
   background: var(--ant-colorBgContainer, #fff);
   border-right: 1px solid var(--ant-colorBorderSecondary, rgba(0,0,0,.06));
@@ -564,7 +546,6 @@ onUnmounted(() => {
   letter-spacing: .5px;
 }
 
-/* ✅ AntDV menu selected/hover correctos */
 .sidebar-menu :deep(.ant-menu-item) {
   border-radius: 12px;
   margin: 4px 6px;
@@ -592,7 +573,6 @@ onUnmounted(() => {
   margin-left: auto;
 }
 
-/* Sidebar Footer */
 .sidebar-footer {
   position: absolute;
   bottom: 0;
@@ -638,7 +618,6 @@ onUnmounted(() => {
   margin-top: 2px;
 }
 
-/* ===== Main + Content ===== */
 .main-layout {
   margin-left: 280px;
   transition: margin-left .25s ease;
@@ -665,10 +644,36 @@ onUnmounted(() => {
   border-radius: 16px;
   border: 1px solid var(--ant-colorBorderSecondary, rgba(0,0,0,.06));
   box-shadow: var(--ant-boxShadowSecondary, 0 10px 28px rgba(0,0,0,.08));
-  background: var(--ant-colorBgContainer, #fff);
+  background: #fbfcff;
+}
+
+
+
+.content-card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+
+  background-image:
+    repeating-linear-gradient(
+      to right,
+      rgba(13, 27, 82, 0.06) 0,
+      rgba(13, 27, 82, 0.06) 1px,
+      transparent 1px,
+      transparent 24px
+    ),
+    repeating-linear-gradient(
+      to bottom,
+      rgba(13, 27, 82, 0.06) 0,
+      rgba(13, 27, 82, 0.06) 1px,
+      transparent 1px,
+      transparent 24px
+    );
+  opacity: 0.55;
 }
 
-/* ===== Mobile ===== */
 .sidebar-backdrop {
   position: fixed;
   inset: 0;
@@ -676,18 +681,15 @@ onUnmounted(() => {
   z-index: 998;
 }
 
-/* Sidebar en móvil */
 .sidebar.sidebar-mobile {
   top: 64px;
   height: calc(100vh - 64px);
 }
 
-/* AntDV collapsed mobile (width 0) ya lo oculta, pero reforzamos por UX */
 .sidebar.sidebar-mobile :deep(.ant-layout-sider-children) {
   height: 100%;
 }
 
-/* Responsive */
 @media (max-width: 992px) {
   .main-layout,
   .main-layout.layout-collapsed {
diff --git a/front/src/views/postulante/PreguntasExamen.vue b/front/src/views/postulante/PreguntasExamen.vue
index 774e475..7ae9a8d 100644
--- a/front/src/views/postulante/PreguntasExamen.vue
+++ b/front/src/views/postulante/PreguntasExamen.vue
@@ -1,18 +1,38 @@
 <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 class="exam-page">
+    <!-- HEADER SERIO -->
+    <a-card class="top-card" :bordered="false">
+      <div class="topbar">
+        <div class="top-left">
+          <div class="title">
+            <div class="proceso">
+              {{ examenInfo.proceso || "Proceso no disponible" }}
+            </div>
+
+            <div class="sub">
+              <span class="area">{{ examenInfo.area || "Área no disponible" }}</span>
+              <span class="sep">•</span>
+              <span class="prog">Pregunta {{ indiceActual + 1 }} / {{ totalPreguntas }}</span>
+            </div>
+          </div>
+
+          <div class="meta">
+            <span><b>Duración:</b> {{ examenInfo.duracion }} min</span>
+            <span class="sep">•</span>
+            <span><b>Intentos:</b> {{ examenInfo.intentos }} / {{ examenInfo.intentos_maximos }}</span>
+          </div>
+
+          <!-- Progreso (donde corresponde) -->
+          <a-progress class="progress" :percent="porcentajeCompletado" :show-info="false" />
+          <div class="progressText">
+            Progreso: <b>{{ preguntasRespondidas }}</b> guardadas de <b>{{ totalPreguntas }}</b>
+          </div>
         </div>
 
-        <div class="timer">
+        <div class="top-right">
+          <div class="timerLabel">Tiempo restante</div>
           <a-statistic-countdown
+            class="timer"
             :value="timerValue"
             @finish="finalizarExamenAutomaticamente"
             format="HH:mm:ss"
@@ -21,787 +41,922 @@
       </div>
     </a-card>
 
-    <!-- Loading inicial -->
-    <a-card v-if="cargandoInicio" style="margin-top: 16px;">
+    <!-- LOADING -->
+    <a-card v-if="cargandoInicio" class="card" :bordered="false">
       <a-skeleton active />
     </a-card>
 
-    <!-- Pregunta actual (UNA por pantalla) -->
-    <a-card
-      v-else-if="preguntaActual"
-      class="pregunta-card"
-      style="margin-top: 16px;"
-    >
-      <template #title>
-        <div class="pregunta-header">
-          <span class="pregunta-numero">
-            Pregunta {{ indiceActual + 1 }} de {{ totalPreguntas }}
-          </span>
-
-          <span class="curso-tag">
-            <a-tag color="blue">{{ preguntaActual.curso }}</a-tag>
-          </span>
-
-          <a-tag :color="tagColorEstado(preguntaActual)">
-            {{ tagTextoEstado(preguntaActual) }}
-          </a-tag>
+    <!-- CONTENIDO -->
+    <a-card v-else-if="preguntaActual" class="card question-card" :bordered="false">
+      <!-- Cabecera pregunta -->
+      <div class="q-header">
+        <div class="q-left">
+          <div class="q-number">Pregunta {{ indiceActual + 1 }}</div>
+
+          <div class="q-tags">
+            <span v-if="preguntaActual.curso" class="chip">
+              {{ preguntaActual.curso }}
+            </span>
+            <span class="chip muted">
+              {{ estadoTexto(preguntaActual) }}
+            </span>
+          </div>
         </div>
-      </template>
+      </div>
 
       <!-- Enunciado -->
-      <div class="enunciado" v-html="preguntaActual.enunciado"></div>
 
-      <!-- Contenido adicional -->
+      <div class="enunciado">
+        <MarkdownLatex :content="preguntaActual.enunciado" />
+      </div>
+
+      <!-- Extra -->
       <div
         v-if="preguntaActual.extra && preguntaActual.extra !== preguntaActual.enunciado"
         class="extra"
-        v-html="preguntaActual.extra"
-      ></div>
+      >
+        <MarkdownLatex :content="preguntaActual.extra" />
+      </div>
+
 
-      <!-- Opciones múltiples (NO guarda en change) -->
-      <div class="opciones" v-if="preguntaActual.opciones && preguntaActual.opciones.length">
+      <!-- Respuestas -->
+      <div class="answer">
+        <!-- Opciones -->
+      <div v-if="tieneOpciones(preguntaActual)">
         <a-radio-group
           v-model:value="preguntaActual.respuestaSeleccionada"
-          :disabled="preguntaActual.estado === 'respondida'"
+          :disabled="preguntaActual.estado === 'respondida' || guardando || finalizando"
+          class="radio-group"
         >
-          <a-space direction="vertical" style="width: 100%;">
+          <a-space direction="vertical" style="width: 100%">
             <a-radio
-              v-for="opcion in preguntaActual.opcionesOrdenadas"
-              :key="opcion.key"
-              :value="opcion.key.toString()"
-              class="opcion-radio"
+              v-for="op in preguntaActual.opcionesOrdenadas"
+              :key="op.key"
+              :value="op.key.toString()"
+              class="opt"
             >
-              <span class="opcion-key">{{ getLetraOpcion(opcion.key) }}.</span>
-              <span v-html="opcion.texto" class="opcion-texto"></span>
+              <span class="optKey">{{ getLetraOpcion(op.key) }})</span>
+              <span class="optText">
+                <MarkdownLatex :content="op.texto" />
+              </span>
             </a-radio>
           </a-space>
         </a-radio-group>
+      </div>
+
 
-        <div v-if="preguntaActual.respuestaSeleccionada" class="seleccion-actual">
-          <a-alert
-            :message="`Ha seleccionado: ${getTextoOpcionSeleccionada(preguntaActual)}`"
-            type="info"
-            show-icon
-            style="margin-top: 12px;"
+        <!-- Abierta -->
+        <div v-else>
+          <a-textarea
+            v-model:value="preguntaActual.respuestaTexto"
+            :rows="6"
+            placeholder="Escribe tu respuesta..."
+            :disabled="preguntaActual.estado === 'respondida' || guardando || finalizando"
           />
         </div>
       </div>
 
-      <!-- Pregunta abierta (NO guarda en blur) -->
-      <div v-else class="pregunta-abierta">
-        <a-textarea
-          v-model:value="preguntaActual.respuestaTexto"
-          placeholder="Escriba su respuesta aquí..."
-          :rows="4"
-          :disabled="preguntaActual.estado === 'respondida'"
-        />
-      </div>
-
-      <!-- Botones por pregunta -->
-      <div class="nav-preguntas">
-        <a-button :disabled="indiceActual === 0" @click="irAnterior">
-          Anterior
+      <!-- NAV: SOLO 2 BOTONES -->
+      <div class="nav">
+        <a-button
+          :disabled="indiceActual === 0 || guardando || finalizando"
+          @click="irAnterior"
+          class="btn"
+        >
+          Atrás
         </a-button>
 
-        <div class="nav-derecha">
-          <a-button
-            type="primary"
-            :loading="guardando"
-            :disabled="preguntaActual.estado === 'respondida'"
-            @click="guardarYContinuar"
-          >
-            Guardar respuesta y continuar
-          </a-button>
-
-          <a-button
-            :disabled="indiceActual >= totalPreguntas - 1"
-            @click="irSiguiente"
-          >
-            Siguiente
-          </a-button>
-        </div>
+        <a-button
+          type="primary"
+          :loading="guardando || finalizando"
+          @click="siguienteAccion"
+          class="btn primary"
+        >
+          {{ esUltima ? "Guardar y finalizar" : "Siguiente" }}
+        </a-button>
       </div>
 
-      <!-- Debug -->
-      <div v-if="debugMode" class="debug-info">
-        <a-alert
-          :message="`DEBUG | id: ${preguntaActual.id} | estado: ${preguntaActual.estado} | seleccion: ${preguntaActual.respuestaSeleccionada || ''}`"
-          type="warning"
-          show-icon
-          style="margin-top: 12px;"
-        />
+      <!-- Nota sobria -->
+      <div class="note">
+        Al presionar <b>Siguiente</b>, tu respuesta se guarda. Evita recargar o cerrar durante el examen.
       </div>
     </a-card>
 
-    <!-- Si no hay pregunta -->
-    <a-card v-else style="margin-top: 16px;">
+    <!-- SIN PREGUNTAS -->
+    <a-card v-else class="card" :bordered="false">
       <a-alert
         type="warning"
         show-icon
         message="No hay preguntas para mostrar"
-        description="Verifique que el examen tenga preguntas generadas."
+        description="Verifica que el examen tenga preguntas generadas."
       />
-      <div style="margin-top: 12px; text-align: right;">
-        <a-button @click="router.push({ name: 'DashboardPostulante' })">Volver</a-button>
-      </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> {{ totalPreguntas }}</p>
-        <p><strong>Respondidas (guardadas):</strong> {{ preguntasRespondidas }} de {{ totalPreguntas }}</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 (${totalPreguntas - preguntasRespondidas} pendientes)`
-          }}
-        </a-button>
-
-        <a-button
-          type="default"
-          size="large"
-          style="margin-left: 12px;"
-          @click="guardarYSalir"
-        >
-          Guardar y salir
+      <div class="nav" style="margin-top: 12px">
+        <a-button @click="router.push({ name: 'DashboardPostulante' })" class="btn">
+          Volver
         </a-button>
       </div>
     </a-card>
   </div>
 </template>
 
-<script setup>
-import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useExamenStore } from '../../store/examen.store'
-import { message, Modal } from 'ant-design-vue'
+<style scoped>
+/* ============ LAYOUT SERIO ============ */
+.exam-page {
+  max-width: 920px;
+  margin: 0 auto;
+  padding: 16px;
+  background: #f3f4f6; /* más neutral */
+  min-height: 100vh;
+}
 
-const route = useRoute()
-const router = useRouter()
-const examenStore = useExamenStore()
+/* ============ HEADER ============ */
+.top-card {
+  border-radius: 14px;
+  background: #ffffff;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+}
 
-const finalizando = ref(false)
-const guardando = ref(false)
-const debugMode = ref(false)
+.topbar {
+  display: flex;
+  justify-content: space-between;
+  gap: 14px;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
 
-const timerValue = ref(null)
-let timerIntervalId = null
+.top-left {
+  flex: 1;
+  min-width: 260px;
+}
 
-const preguntasLocal = ref([])
-const indiceActual = ref(0)
+.proceso {
+  font-weight: 900;
+  color: #111827;
+  font-size: 16px;
+  line-height: 1.2;
+}
 
-const initOnce = ref(false)
-const cargandoInicio = ref(false)
+.sub {
+  margin-top: 6px;
+  color: #4b5563;
+  font-size: 12px;
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  align-items: center;
+}
 
-/* ---------------------------
-   INFO EXAMEN
----------------------------- */
-const examenInfo = computed(() => {
-  if (!examenStore.examenActual) {
-    return {
-      proceso: null,
-      area: null,
-      duracion: 60,
-      intentos: 0,
-      intentos_maximos: 3
-    }
-  }
+.area {
+  font-weight: 800;
+  color: #111827;
+}
 
-  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
-  }
-})
+.sep {
+  opacity: 0.55;
+}
 
-/* ---------------------------
-   TRANSFORMACIÓN (UNA VEZ)
----------------------------- */
-const transformarPreguntas = (arr) => {
-  if (!Array.isArray(arr)) return []
+.meta {
+  margin-top: 8px;
+  font-size: 12px;
+  color: #6b7280;
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
 
-  return arr.map((pregunta) => {
-    let respuestaKey = null
+.progress {
+  margin-top: 10px;
+}
 
-    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
-    }
+.progressText {
+  margin-top: 6px;
+  font-size: 12px;
+  color: #6b7280;
+}
 
-    const opcionesOrdenadas = pregunta.opciones
-      ? [...pregunta.opciones].sort((a, b) => a.key - b.key)
-      : []
-
-    return {
-      ...pregunta,
-      respuestaKey,
-      opcionesOrdenadas,
-      // estado viene del backend: 'pendiente' o 'respondida'
-      respuestaSeleccionada: null,
-      respuestaTexto: ''
-    }
-  })
+/* Timer sobrio */
+.top-right {
+  min-width: 190px;
+  text-align: right;
 }
 
-/* ✅ IMPORTANTE:
-   No reseteamos preguntasLocal si ya existe, para no perder respuestas locales.
-*/
-watch(
-  () => examenStore.preguntas,
-  (nuevas) => {
-    if (!Array.isArray(nuevas) || nuevas.length === 0) return
-    if (preguntasLocal.value.length === 0) {
-      preguntasLocal.value = transformarPreguntas(nuevas)
-      indiceActual.value = 0
-    }
-  },
-  { immediate: true }
-)
+.timerLabel {
+  font-size: 12px;
+  color: #6b7280;
+  font-weight: 700;
+  margin-bottom: 2px;
+}
 
-/* ---------------------------
-   COMPUTEDS
----------------------------- */
-const totalPreguntas = computed(() => preguntasLocal.value.length)
+.timer :deep(.ant-statistic-content) {
+  font-size: 26px;
+  font-weight: 900;
+  color: #111827;
+}
 
-const preguntaActual = computed(() => {
-  return preguntasLocal.value[indiceActual.value] || null
-})
+/* ============ CARDS ============ */
+.card {
+  margin-top: 12px;
+  border-radius: 16px;
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+}
 
-const preguntasRespondidas = computed(() => {
-  return preguntasLocal.value.filter(p => p.estado === 'respondida').length
-})
+.question-card {
+  padding-bottom: 6px;
+}
 
-const porcentajeCompletado = computed(() => {
-  if (totalPreguntas.value === 0) return 0
-  return Math.round((preguntasRespondidas.value / totalPreguntas.value) * 100)
-})
+/* ============ PREGUNTA ============ */
+.q-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
 
-const todasRespondidas = computed(() => {
-  return preguntasLocal.value.every(p => p.estado === 'respondida')
-})
+.q-number {
+  font-weight: 900;
+  color: #111827;
+}
 
-/* ---------------------------
-   HELPERS UI
----------------------------- */
-const getLetraOpcion = (key) => {
-  const letras = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']
-  return letras[key] || `Opción ${key}`
+.q-tags {
+  margin-top: 6px;
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
 }
 
-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'
+.chip {
+  display: inline-flex;
+  align-items: center;
+  height: 26px;
+  padding: 0 10px;
+  border-radius: 999px;
+  background: #eef2ff;
+  color: #1f2937;
+  font-size: 12px;
+  font-weight: 800;
+  border: 1px solid rgba(0, 0, 0, 0.06);
 }
 
-const tieneRespuestaLocal = (p) => {
-  const tieneOpciones = p?.opciones && p.opciones.length
-  if (tieneOpciones) return !!p.respuestaSeleccionada
-  return !!(p.respuestaTexto && p.respuestaTexto.trim())
+.chip.muted {
+  background: #f3f4f6;
+  color: #374151;
 }
 
-const tagTextoEstado = (p) => {
-  if (p.estado === 'respondida') return 'Respondida'
-  if (tieneRespuestaLocal(p)) return 'Sin guardar'
-  return 'Pendiente'
+/* Enunciado serio */
+.enunciado {
+  margin-top: 12px;
+  padding: 14px 14px;
+  border-radius: 12px;
+  background: #fbfbfc;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  line-height: 1.75;
+  font-size: 15px;
+  color: #111827;
+  overflow-wrap: anywhere;
 }
 
-const tagColorEstado = (p) => {
-  if (p.estado === 'respondida') return 'green'
-  if (tieneRespuestaLocal(p)) return 'gold'
-  return 'orange'
+.extra {
+  margin-top: 10px;
+  padding: 12px 14px;
+  border-radius: 12px;
+  background: #ffffff;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  line-height: 1.7;
+  color: #111827;
+  overflow-wrap: anywhere;
 }
 
-/* ---------------------------
-   NAVEGACIÓN
----------------------------- */
-const irSiguiente = () => {
-  if (indiceActual.value < totalPreguntas.value - 1) indiceActual.value++
+/* ============ RESPUESTAS ============ */
+.answer {
+  margin-top: 14px;
 }
 
-const irAnterior = () => {
-  if (indiceActual.value > 0) indiceActual.value--
+.radio-group {
+  width: 100%;
 }
 
-/* ---------------------------
-   GUARDADO (BOTÓN)
----------------------------- */
-const guardarRespuestaDePregunta = async (p) => {
-  if (!p) return { success: false, message: 'No hay pregunta' }
-  if (p.estado === 'respondida') return { success: true }
+.opt {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 12px 12px;
+  border-radius: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.10);
+  background: #fff;
+  transition: 0.12s ease;
+  cursor: pointer;
+}
 
-  const tieneOpciones = p.opciones && p.opciones.length
+.opt:hover {
+  border-color: rgba(0, 0, 0, 0.18);
+  background: #fafafa;
+}
 
-  if (tieneOpciones) {
-    if (!p.respuestaSeleccionada) return { success: false, message: 'Seleccione una opción' }
+.opt :deep(.ant-radio) {
+  margin-top: 2px;
+}
 
-    const respuestaString = p.respuestaSeleccionada.toString()
-    const opcionSeleccionada = p.opcionesOrdenadas.find(op => op.key.toString() === respuestaString)
-    const textoRespuesta = opcionSeleccionada ? opcionSeleccionada.texto : respuestaString
+.optKey {
+  min-width: 22px;
+  font-weight: 900;
+  color: #111827;
+}
 
-    return await examenStore.responderPregunta(p.id, textoRespuesta)
+.optText {
+  line-height: 1.6;
+  color: #111827;
+  overflow-wrap: anywhere;
+}
+
+/* ============ NAV (SOLO 2 BOTONES) ============ */
+.nav {
+  margin-top: 16px;
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.btn {
+  height: 40px;
+  border-radius: 10px;
+  font-weight: 800;
+  min-width: 140px;
+}
+
+.primary {
+  min-width: 200px;
+}
+
+/* Nota discreta */
+.note {
+  margin-top: 12px;
+  font-size: 12px;
+  color: #6b7280;
+  line-height: 1.5;
+}
+
+/* Responsive */
+@media (max-width: 640px) {
+  .top-right {
+    text-align: left;
+  }
+  .nav {
+    flex-direction: column;
   }
+  .btn,
+  .primary {
+    width: 100%;
+    min-width: 0;
+  }
+}
+</style>
+
 
-  if (!p.respuestaTexto || !p.respuestaTexto.trim()) {
-    return { success: false, message: 'Escriba una respuesta' }
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount, watch, h  } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useExamenStore } from "../../store/examen.store";
+import { message, Modal,Spin } from "ant-design-vue";
+
+const route = useRoute();
+const router = useRouter();
+const examenStore = useExamenStore();
+
+const guardando = ref(false);
+const finalizando = ref(false);
+const timerValue = ref(null);
+let timerIntervalId = null;
+
+const preguntasLocal = ref([]);
+const indiceActual = ref(0);
+const cargandoInicio = ref(false);
+const initOnce = ref(false);
+import MarkdownLatex from '../../views/administrador/cursos/MarkdownLatex.vue'
+/* INFO EXAMEN */
+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,
+  };
+});
 
-  return await examenStore.responderPregunta(p.id, p.respuestaTexto.trim())
-}
+/* TRANSFORMAR */
+const transformarPreguntas = (arr) => {
+  if (!Array.isArray(arr)) return [];
+  return arr.map((p) => ({
+    ...p,
+    opcionesOrdenadas: p.opciones ? [...p.opciones].sort((a, b) => a.key - b.key) : [],
+    respuestaSeleccionada: p.respuestaSeleccionada ?? null,
+    respuestaTexto: p.respuestaTexto ?? "",
+  }));
+};
+
+watch(
+  () => examenStore.preguntas,
+  (nuevas) => {
+    if (!Array.isArray(nuevas) || nuevas.length === 0) return;
+    if (preguntasLocal.value.length === 0) {
+      preguntasLocal.value = transformarPreguntas(nuevas);
+      indiceActual.value = 0;
+    }
+  },
+  { immediate: true }
+);
+
+/* COMPUTEDS */
+const totalPreguntas = computed(() => preguntasLocal.value.length);
+const preguntaActual = computed(() => preguntasLocal.value[indiceActual.value] || null);
+const esUltima = computed(() => indiceActual.value >= totalPreguntas.value - 1);
+
+const preguntasRespondidas = computed(() =>
+  preguntasLocal.value.filter((p) => p.estado === "respondida").length
+);
 
-const guardarYContinuar = async () => {
-  const p = preguntaActual.value
-  if (!p) return
+const porcentajeCompletado = computed(() => {
+  if (!totalPreguntas.value) return 0;
+  return Math.round((preguntasRespondidas.value / totalPreguntas.value) * 100);
+});
+
+/* HELPERS */
+const tieneOpciones = (p) => !!(p?.opciones && p.opciones.length);
+
+const getLetraOpcion = (key) => {
+  const letras = ["A", "B", "C", "D", "E", "F", "G", "H"];
+  return letras[key] || `Opción ${key}`;
+};
+
+const tieneRespuestaLocal = (p) => {
+  if (!p) return false;
+  if (tieneOpciones(p)) return !!p.respuestaSeleccionada;
+  return !!(p.respuestaTexto && p.respuestaTexto.trim());
+};
+
+const estadoTexto = (p) => {
+  if (p.estado === "respondida") return "Guardada";
+  if (tieneRespuestaLocal(p)) return "Sin guardar";
+  return "Pendiente";
+};
+
+/* NAV */
+const irAnterior = () => {
+  if (indiceActual.value > 0) indiceActual.value--;
+};
+
+const guardarRespuestaDePregunta = async (p) => {
+  if (!p) return { success: false, message: "No hay pregunta" };
+
+  // Si ya fue guardada
+  if (p.estado === "respondida") return { success: true };
+
+  let respuesta = null;
+
+  // 🔹 Pregunta con opciones
+  if (tieneOpciones(p)) {
+    if (p.respuestaSeleccionada) {
+      const sel = p.respuestaSeleccionada.toString();
+      const op = p.opcionesOrdenadas.find(
+        (x) => x.key.toString() === sel
+      );
+      respuesta = op ? op.texto : sel;
+    }
+  } 
+  // 🔹 Pregunta abierta
+  else {
+    if (p.respuestaTexto && p.respuestaTexto.trim()) {
+      respuesta = p.respuestaTexto.trim();
+    }
+  }
+
+  // ⚡ Si no hay respuesta → se envía null (BLANCO)
+  return await examenStore.responderPregunta(p.id, respuesta);
+};
+
+
+/* ACCIÓN SIGUIENTE: GUARDA Y AVANZA / FINALIZA */
+const siguienteAccion = async () => {
+  const p = preguntaActual.value;
+  if (!p) return;
 
   try {
-    guardando.value = true
-    const result = await guardarRespuestaDePregunta(p)
+    guardando.value = true;
 
-    if (!result?.success) {
-      message.error(result?.message || 'Error al guardar respuesta')
-      return
+    const r = await guardarRespuestaDePregunta(p);
+    if (!r?.success) {
+      message.warning(r?.message || "Completa tu respuesta antes de continuar");
+      return;
     }
 
-    p.estado = 'respondida'
-    message.success('Respuesta guardada')
+    p.estado = "respondida";
 
-    if (indiceActual.value < totalPreguntas.value - 1) {
-      indiceActual.value++
-    } else {
-      message.info('Ya estás en la última pregunta')
+    if (!esUltima.value) {
+      indiceActual.value++;
+      return;
     }
+
+    // última: finalizar
+    await finalizarExamen();
   } catch (e) {
-    console.error(e)
-    message.error('Error al guardar respuesta')
+    console.error(e);
+    message.error("Error al guardar");
   } finally {
-    guardando.value = false
+    guardando.value = false;
   }
-}
+};
+
+
 
-/* ---------------------------
-   FINALIZAR / GUARDAR Y SALIR
----------------------------- */
 const finalizarExamen = async () => {
-  if (!todasRespondidas.value) {
-    message.warning(`Por favor responda todas las preguntas. ${totalPreguntas.value - preguntasRespondidas.value} pendientes.`)
-    return
-  }
+  const examenId = Number(route.params.examenId)
+
+  // Modal de proceso
+  const modal = Modal.info({
+    title: "Procesando calificación",
+    content: h("div", { style: "display:flex;align-items:center;gap:12px;" }, [
+      h(Spin, { size: "large" }),
+      h("div", [
+        h("div", { style: "font-weight:600;" }, "Finalizando evaluación"),
+        h("div", { style: "margin-top:4px;color:rgba(0,0,0,.65);" }, "Estamos calificando sus respuestas. Por favor, espere..."),
+      ]),
+    ]),
+    maskClosable: false,
+    closable: false,
+    okButtonProps: { style: { display: "none" } },
+  })
+
+  try {
+    finalizando.value = true
+
+    const r = await examenStore.finalizarExamen(examenId)
+
+    // ✅ Caso especial: ya estaba finalizado (409)
+    const msg = (r?.message || "").toLowerCase()
+    if (!r?.success && (msg.includes("ya está finalizado") || msg.includes("ya esta finalizado"))) {
+      modal.update({
+        title: "Evaluación finalizada",
+        content: "El examen ya se encuentra finalizado. Redirigiendo a la página de resultados...",
+        okButtonProps: { style: { display: "none" } },
+      })
 
-  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({
-            // ⚠️ Ajusta el name si tu ruta se llama distinto
-            name: 'PanelResultados',
-            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
-      }
+      setTimeout(() => {
+        modal.destroy()
+        router.push({ name: "PanelResultados", params: { examenId } })
+      }, 1200)
+
+      return
     }
-  })
-}
 
-const guardarYSalir = async () => {
-  const pendientes = preguntasLocal.value.filter(p => p.estado !== 'respondida' && tieneRespuestaLocal(p))
-
-  if (pendientes.length > 0) {
-    Modal.confirm({
-      title: 'Guardar respuestas pendientes',
-      content: `Tiene ${pendientes.length} respuesta(s) lista(s) pero no guardada(s). ¿Desea guardarlas antes de salir?`,
-      okText: 'Guardar y salir',
-      cancelText: 'Salir sin guardar',
-      onOk: async () => {
-        try {
-          for (const p of pendientes) {
-            const r = await guardarRespuestaDePregunta(p)
-            if (r?.success) p.estado = 'respondida'
-          }
-          message.success('Respuestas guardadas')
-          router.push({ name: 'DashboardPostulante' })
-        } catch (e) {
-          console.error(e)
-          message.error('Error al guardar respuestas')
-        }
-      },
-      onCancel: () => {
-        router.push({ name: 'DashboardPostulante' })
-      }
+    // ❌ Otro error
+    if (!r?.success) {
+      modal.update({
+        title: "No se pudo finalizar",
+        content: r?.message || "No fue posible finalizar el examen. Inténtelo nuevamente.",
+        okButtonProps: { style: { display: "none" } },
+      })
+      setTimeout(() => modal.destroy(), 1800)
+      return
+    }
+
+    // ✅ Éxito normal: simular 5 segundos “calificando”
+    setTimeout(() => {
+      modal.update({
+        title: "Calificación completada",
+        content: "Redirigiendo a la página de resultados...",
+        okButtonProps: { style: { display: "none" } },
+      })
+
+      setTimeout(() => {
+        modal.destroy()
+        router.push({ name: "PanelResultados", params: { examenId } })
+      }, 900)
+    }, 5000)
+
+  } catch (e) {
+    modal.update({
+      title: "Error",
+      content: "Ocurrió un problema al finalizar el examen. Por favor, inténtelo nuevamente.",
+      okButtonProps: { style: { display: "none" } },
     })
-  } else {
-    router.push({ name: 'DashboardPostulante' })
+    setTimeout(() => modal.destroy(), 2000)
+  } finally {
+ 
+    setTimeout(() => {
+      finalizando.value = false
+    }, 5000)
   }
 }
 
-/* ---------------------------
-   TIMER
----------------------------- */
+
+
 const finalizarExamenAutomaticamente = () => {
-  message.warning('Tiempo agotado. El examen se finalizará automáticamente.')
-  finalizarExamen()
-}
+  message.error("Tiempo agotado. El examen se finalizará.");
+  finalizarExamen();
+};
 
 const calcularTiempoRestante = () => {
-  // preferir hora_inicio del backend
   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
-
-    if (Date.now() > tiempoFinal) finalizarExamenAutomaticamente()
+    const inicio = new Date(examenStore.examenActual.hora_inicio);
+    const fin = inicio.getTime() + examenInfo.value.duracion * 60 * 1000;
+    timerValue.value = fin;
+    if (Date.now() > fin) finalizarExamenAutomaticamente();
   } else {
-    // fallback
-    timerValue.value = Date.now() + (examenInfo.value.duracion * 60 * 1000)
+    timerValue.value = Date.now() + examenInfo.value.duracion * 60 * 1000;
   }
-}
+};
+
 
-/* ---------------------------
-   INICIO EXAMEN (EJECUTAR 1 SOLA VEZ)
----------------------------- */
 const iniciarSesionExamen = async () => {
-  if (initOnce.value) return
-  initOnce.value = true
+  if (initOnce.value) return;
+  initOnce.value = true;
 
-  const examenId = route.params.examenId
+  const examenId = route.params.examenId;
   if (!examenId) {
-    message.error('No se encontró el ID del examen')
-    router.push({ name: 'DashboardPostulante' })
-    return
+    message.error("No se encontró el examen");
+    router.push({ name: "DashboardPostulante" });
+    return;
   }
 
   try {
-    cargandoInicio.value = true
-
-    // ✅ AQUÍ SÍ se ejecuta iniciarExamen con su examen_id
-    const r = await examenStore.iniciarExamen(examenId)
+    cargandoInicio.value = true;
 
+    const r = await examenStore.iniciarExamen(examenId);
     if (!r?.success) {
-      message.error(r?.message || 'No se pudo iniciar el examen')
-      router.push({ name: 'DashboardPostulante' })
-      return
+      message.error(r?.message || "No se pudo iniciar el examen");
+      router.push({ name: "DashboardPostulante" });
+      return;
     }
 
-    // Inicializar preguntasLocal con lo que vino del backend
-    if (Array.isArray(examenStore.preguntas) && examenStore.preguntas.length > 0) {
-      preguntasLocal.value = transformarPreguntas(examenStore.preguntas)
-      indiceActual.value = 0
+    if (Array.isArray(examenStore.preguntas) && examenStore.preguntas.length) {
+      preguntasLocal.value = transformarPreguntas(examenStore.preguntas);
+      indiceActual.value = 0;
     } else {
-      message.error('No se encontraron preguntas para este examen')
-      router.push({ name: 'DashboardPostulante' })
-      return
+      message.error("No hay preguntas");
+      router.push({ name: "DashboardPostulante" });
+      return;
     }
 
-    // Timer basado en hora_inicio real
-    calcularTiempoRestante()
-    if (timerIntervalId) clearInterval(timerIntervalId)
-    timerIntervalId = setInterval(calcularTiempoRestante, 30000)
-  } catch (e) {
-    console.error(e)
-    message.error('Error al iniciar el examen')
-    router.push({ name: 'DashboardPostulante' })
+    calcularTiempoRestante();
+    if (timerIntervalId) clearInterval(timerIntervalId);
+    timerIntervalId = setInterval(calcularTiempoRestante, 30000);
   } finally {
-    cargandoInicio.value = false
+    cargandoInicio.value = false;
   }
-}
+};
 
-onMounted(() => {
-  iniciarSesionExamen()
-})
+onMounted(iniciarSesionExamen);
 
 onBeforeUnmount(() => {
-  if (timerIntervalId) clearInterval(timerIntervalId)
-})
+  if (timerIntervalId) clearInterval(timerIntervalId);
+});
 </script>
 
 <style scoped>
-.examen-panel {
-  max-width: 1200px;
+
+.exam-page {
+  max-width: 920px;
   margin: 0 auto;
-  padding: 20px;
+  padding: 16px;
+  background: #f6f7f9; 
+  min-height: 100vh;
+}
+
+
+.top-card {
+  border-radius: 14px;
+  background: #ffffff;
+  border: 1px solid rgba(0,0,0,0.06);
 }
 
-.examen-header {
+.topbar {
   display: flex;
   justify-content: space-between;
-  align-items: flex-start;
+  gap: 14px;
   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;
+  align-items: flex-start;
 }
 
-.header-info p {
-  margin: 4px 0;
-  color: #595959;
+.top-left {
+  flex: 1;
+  min-width: 260px;
 }
 
-.timer {
-  text-align: right;
-  min-width: 180px;
+.title .proceso {
+  font-weight: 900;
+  color: #111827;
+  font-size: 16px;
 }
 
-.timer :deep(.ant-statistic-content) {
-  font-size: 28px;
-  font-weight: bold;
-  color: #fa541c;
+.title .sub {
+  margin-top: 4px;
+  color: #4b5563;
+  font-size: 12px;
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  align-items: center;
 }
 
-.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;
+.area {
+  font-weight: 800;
+  color: #111827;
 }
 
-.pregunta-card:hover {
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
+.sep {
+  opacity: 0.5;
 }
 
-.pregunta-header {
+.meta {
+  margin-top: 8px;
+  font-size: 12px;
+  color: #6b7280;
   display: flex;
-  justify-content: space-between;
-  align-items: center;
+  gap: 8px;
   flex-wrap: wrap;
-  gap: 10px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid #f0f0f0;
 }
 
-.pregunta-numero {
-  font-weight: bold;
-  font-size: 18px;
-  color: #1890ff;
+.progress {
+  margin-top: 10px;
 }
 
-.curso-tag {
-  flex-grow: 1;
-  margin-left: 12px;
+.progressText {
+  margin-top: 6px;
+  font-size: 12px;
+  color: #6b7280;
 }
 
-.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;
-}
 
-.extra {
-  font-size: 14px;
-  line-height: 1.6;
-  margin: 16px 0;
-  padding: 16px;
-  background: #fff7e6;
-  border-radius: 6px;
-  border: 1px solid #ffd591;
-  color: #d46b08;
+.top-right {
+  min-width: 180px;
+  text-align: right;
 }
 
-.opciones {
-  margin-top: 24px;
+.timerLabel {
+  font-size: 12px;
+  color: #6b7280;
+  font-weight: 700;
+  margin-bottom: 2px;
 }
 
-.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;
+.timer :deep(.ant-statistic-content) {
+  font-size: 26px;
+  font-weight: 900;
+  color: #111827;
 }
 
-.opcion-radio:hover {
-  border-color: #40a9ff;
-  background: #f0f9ff;
-  transform: translateY(-2px);
+
+.card {
+  margin-top: 12px;
+  border-radius: 16px;
+  background: #fff;
+  border: 1px solid rgba(0,0,0,0.06);
 }
 
-.opcion-radio:deep(.ant-radio) {
-  margin-right: 12px;
+.question-card {
+  padding-bottom: 6px;
 }
 
-.opcion-key {
-  font-weight: bold;
-  color: #1890ff;
-  margin-right: 12px;
-  min-width: 24px;
-  font-size: 16px;
+.q-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
-.opcion-texto {
-  flex: 1;
-  line-height: 1.6;
-  font-size: 15px;
+.q-number {
+  font-weight: 900;
+  color: #111827;
 }
 
-.seleccion-actual {
-  margin-top: 16px;
+.q-tags {
+  margin-top: 6px;
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
 }
 
-.pregunta-abierta textarea {
-  margin-top: 16px;
-  font-size: 15px;
-  line-height: 1.6;
+.chip {
+  display: inline-flex;
+  align-items: center;
+  height: 26px;
+  padding: 0 10px;
+  border-radius: 999px;
+  background: #eef2ff;
+  color: #1f2937;
+  font-size: 12px;
+  font-weight: 800;
+  border: 1px solid rgba(0,0,0,0.06);
 }
 
-.resumen-examen {
-  padding: 16px;
+.chip.muted {
+  background: #f3f4f6;
+  color: #374151;
 }
 
-.resumen-examen h3 {
-  margin-bottom: 16px;
-  color: #1890ff;
+.enunciado {
+  margin-top: 12px;
+  padding: 14px 14px;
+  border-radius: 12px;
+  background: #fbfbfc;
+  border: 1px solid rgba(0,0,0,0.06);
+  line-height: 1.75;
+  font-size: 15px;
+  color: #111827;
+  overflow-wrap: anywhere;
 }
 
-.resumen-examen p {
-  margin: 8px 0;
-  color: #595959;
+.extra {
+  margin-top: 10px;
+  padding: 12px 14px;
+  border-radius: 12px;
+  background: #fff;
+  border: 1px solid rgba(0,0,0,0.08);
+  line-height: 1.7;
+  color: #111827;
+  overflow-wrap: anywhere;
 }
 
-.action-buttons {
-  padding: 24px 0;
-  border-top: 1px solid #f0f0f0;
-  margin-top: 32px;
-  display: flex;
-  justify-content: center;
-  gap: 12px;
+.answer {
+  margin-top: 14px;
 }
 
-.nav-preguntas {
-  display: flex;
-  gap: 12px;
-  margin-top: 20px;
-  justify-content: space-between;
-  flex-wrap: wrap;
+.radio-group {
+  width: 100%;
 }
 
-.nav-derecha {
+.opt {
   display: flex;
-  gap: 12px;
-  margin-left: auto;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 12px 12px;
+  border-radius: 12px;
+  border: 1px solid rgba(0,0,0,0.10);
+  background: #fff;
+  transition: 0.12s ease;
+  cursor: pointer;
 }
 
-:deep(.ant-card-head) {
-  border-bottom: 1px solid #f0f0f0;
+.opt:hover {
+  border-color: rgba(0,0,0,0.20);
   background: #fafafa;
 }
 
-:deep(.ant-card-body) {
-  padding: 24px;
+.opt :deep(.ant-radio) {
+  margin-top: 2px;
 }
 
-/* Responsive */
-@media (max-width: 768px) {
-  .examen-panel {
-    padding: 10px;
-  }
+.optKey {
+  min-width: 22px;
+  font-weight: 900;
+  color: #111827;
+}
 
-  .examen-header {
-    flex-direction: column;
-    align-items: stretch;
-  }
+.optText {
+  line-height: 1.6;
+  color: #111827;
+  overflow-wrap: anywhere;
+}
 
-  .timer {
-    text-align: left;
-    margin-top: 16px;
-  }
+.nav {
+  margin-top: 16px;
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+}
 
-  .pregunta-header {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 8px;
-  }
+.btn {
+  height: 40px;
+  border-radius: 10px;
+  font-weight: 800;
+  min-width: 140px;
+}
 
-  .curso-tag {
-    margin-left: 0;
-  }
+.primary {
+  min-width: 200px;
+}
 
-  .enunciado {
-    padding: 16px;
-    font-size: 15px;
-  }
 
-  .opcion-radio {
-    padding: 12px 16px;
-  }
+.note {
+  margin-top: 12px;
+  font-size: 12px;
+  color: #6b7280;
+  line-height: 1.5;
+}
 
-  .action-buttons {
-    flex-direction: column;
-    gap: 16px;
-  }
 
-  .action-buttons button {
-    width: 100%;
+@media (max-width: 640px) {
+  .top-right {
+    text-align: left;
   }
-
-  .nav-derecha {
-    width: 100%;
-    margin-left: 0;
+  .nav {
     flex-direction: column;
   }
-
-  .nav-derecha button {
+  .btn, .primary {
     width: 100%;
+    min-width: 0;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/front/src/views/postulante/Resultados.vue b/front/src/views/postulante/Resultados.vue
index 4198c3e..50bef88 100644
--- a/front/src/views/postulante/Resultados.vue
+++ b/front/src/views/postulante/Resultados.vue
@@ -1,827 +1,493 @@
+<!-- PanelResultados.vue (DISEÑO ALTERNATIVO: "Scoreboard" moderno, full responsive) -->
 <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 class="page alt">
+    <div class="head">
+      <div>
+        <div class="hTitle">Resultados del examen</div>
+        <div class="hSub">Resumen claro + detalle por curso.</div>
       </div>
-      
-      <div class="estado-final">
-        <a-tag :color="getEstadoColor()" size="large">
-          {{ getEstadoTexto() }}
-        </a-tag>
-        <span class="recomendacion">
-          {{ recomendacionTexto }}
-        </span>
+
+      <div class="headActions">
+        <a-space class="headSpace">
+          <a-button class="btnSoft" @click="volver" :disabled="cargando">Volver</a-button>
+          <a-button class="btnPrimary" type="primary" @click="recalcular" :loading="cargando">
+            Actualizar
+          </a-button>
+        </a-space>
       </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>
+
+    <a-spin :spinning="cargando" tip="Cargando resultados...">
+      <template v-if="resultado">
+        <a-row :gutter="[16, 16]">
+          <a-col :xs="24" :lg="10">
+            <a-card class="card scoreCard" :bordered="false">
+              <div class="scoreTop">
+                <div class="chipDone">
+                  <span class="chipDot" />
+                  Calificado
                 </div>
-                <div class="opcion-detalle-texto">
-                  {{ opcion.texto }}
+
+                <div v-if="resultado.orden_merito != null" class="chipRank">
+                  Puesto: <b>#{{ resultado.orden_merito }}</b>
                 </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 class="scoreMain">{{ fmt2(resultado.total_puntos) }}</div>
+              <div class="scoreLabel">Puntaje total</div>
+
+              <div class="bigProgress">
+                <a-progress :percent="notaPercent" />
+                <div class="bigProgressMeta">
+                  <!-- <span>Nota equivalente</span>
+                  <b>{{ fmt2(resultado.calificacion_sobre_20) }}/20</b> -->
+                </div>
               </div>
-            </a-col>
-          </a-row>
-        </div>
-      </div>
-    </a-modal>
+
+              <a-alert
+                class="advice"
+                show-icon
+                type="success"
+                message="Consejo"
+                :description="consejo"
+              />
+            </a-card>
+          </a-col>
+
+          <a-col :xs="24" :lg="14">
+            <a-row :gutter="[16, 16]">
+              <a-col :xs="24" :sm="12" :md="8">
+                <a-card class="card kpi" :bordered="false">
+                  <div class="kpiK">Correctas</div>
+                  <div class="kpiV">{{ resultado.total_correctas }}</div>
+                  <div class="kpiHint">Aciertos</div>
+                </a-card>
+              </a-col>
+
+              <a-col :xs="24" :sm="12" :md="8">
+                <a-card class="card kpi" :bordered="false">
+                  <div class="kpiK">Incorrectas</div>
+                  <div class="kpiV">{{ resultado.total_incorrectas }}</div>
+                  <div class="kpiHint">Errores</div>
+                </a-card>
+              </a-col>
+
+              <a-col :xs="24" :sm="12" :md="8">
+                <a-card class="card kpi" :bordered="false">
+                  <div class="kpiK">Blanco/Nulas</div>
+                  <div class="kpiV">{{ resultado.total_nulas }}</div>
+                  <div class="kpiHint">Sin respuesta</div>
+                </a-card>
+              </a-col>
+
+              <a-col :xs="24" :sm="12" :md="12">
+                <a-card class="card kpiWide" :bordered="false">
+                  <div class="kpiWideRow">
+                    <div>
+                      <div class="kpiK">% Correctas</div>
+                      <div class="kpiV">{{ fmt2(resultado.porcentaje_correctas) }}%</div>
+                    </div>
+
+                    <div class="miniCircle">
+                      <a-progress type="circle" :percent="notaPercent" :width="96" />
+                      <div class="miniCircleLabel">
+                        <div class="miniCircleMain">{{ fmt2(resultado.calificacion_sobre_20) }}</div>
+                        <div class="miniCircleSub">/20</div>
+                      </div>
+                    </div>
+                  </div>
+                </a-card>
+              </a-col>
+
+              <a-col :xs="24" :sm="12" :md="12">
+                <a-card class="card noteCard" :bordered="false">
+                  <div class="kpiK">Nota sobre 20</div>
+                  <div class="kpiV">{{ fmt2(resultado.calificacion_sobre_20) }}/20</div>
+                  <div class="kpiHint">Equivalencia según puntaje máximo del proceso</div>
+                </a-card>
+              </a-col>
+            </a-row>
+          </a-col>
+        </a-row>
+
+        <a-row :gutter="[16, 16]" class="mt16">
+          <a-col :xs="24">
+            <a-card title="Desempeño por curso" class="card" :bordered="false">
+              <div class="tableWrap">
+                <a-table
+                  :columns="columns"
+                  :dataSource="rowsCursos"
+                  :pagination="false"
+                  size="middle"
+                  rowKey="curso"
+                  :scroll="{ x: 760 }"
+                  class="modernTable"
+                >
+                  <template #bodyCell="{ column, record }">
+                    <template v-if="column.dataIndex === 'curso'">
+                      <div class="courseCell">
+                        <span class="courseDot"></span>
+                        <div>
+                          <div class="courseName">{{ record.curso }}</div>
+                          <div class="courseMeta">{{ record.ratio }}%</div>
+                        </div>
+                      </div>
+                    </template>
+
+                    <template v-else-if="column.dataIndex === 'correctas'">
+                      <span class="pill good">{{ record.correctas }}</span>
+                    </template>
+
+                    <template v-else-if="column.dataIndex === 'incorrectas'">
+                      <span class="pill bad">{{ record.incorrectas }}</span>
+                    </template>
+
+                    <template v-else-if="column.dataIndex === 'total'">
+                      <span class="pill neutral">{{ record.total }}</span>
+                    </template>
+
+                    <template v-else-if="column.dataIndex === 'ratio'">
+                      <a-progress :percent="record.ratio" />
+                    </template>
+                  </template>
+                </a-table>
+              </div>
+            </a-card>
+          </a-col>
+        </a-row>
+      </template>
+
+      <template v-else>
+        <a-empty description="No hay resultados disponibles" class="empty">
+          <a-button type="primary" class="btnPrimary" @click="recalcular" :loading="cargando">
+            Calcular resultados
+          </a-button>
+        </a-empty>
+      </template>
+    </a-spin>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
-import { useExamenStore } from '../store/examen.store'
+import { computed, onMounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import { message } from 'ant-design-vue'
-import {
-  CheckCircleOutlined,
-  CloseCircleOutlined,
-  StarOutlined,
-  PercentageOutlined,
-  EyeOutlined,
-  HomeOutlined,
-  PlusOutlined,
-  PrinterOutlined,
-  ShareAltOutlined,
-  TrophyOutlined,
-  BulbOutlined
-} from '@ant-design/icons-vue'
+import { useExamenStore } from '../../store/examen.store'
 
+const route = useRoute()
 const router = useRouter()
 const examenStore = useExamenStore()
 
-// Estados reactivos
-const activeKeys = ref([])
-const modalDetallesVisible = ref(false)
+const cargando = 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 examenId = computed(() => Number(route.params.examenId))
+const resultado = computed(() => examenStore.resultado)
 
-const resultadoStatus = computed(() => {
-  if (porcentajeCorrectas.value >= 80) return 'success'
-  if (porcentajeCorrectas.value >= 60) return 'warning'
-  return 'error'
-})
+const fmt2 = (n) => {
+  const x = Number(n ?? 0)
+  return x.toFixed(2)
+}
 
-const resultadoTitulo = computed(() => {
-  if (porcentajeCorrectas.value >= 80) return '¡Excelente resultado!'
-  if (porcentajeCorrectas.value >= 60) return 'Buen trabajo'
-  return 'Necesitas practicar más'
+const notaPercent = computed(() => {
+  const nota = Number(resultado.value?.calificacion_sobre_20 ?? 0)
+  const percent = (nota / 20) * 100
+  return Math.max(0, Math.min(100, Math.round(percent)))
 })
 
-const resultadoSubtitulo = computed(() => {
-  return `Obtuviste ${examenStore.progreso.correctas} de ${examenStore.progreso.total} respuestas correctas (${porcentajeCorrectas.value}%)`
+const consejo = computed(() => {
+  const pct = Number(resultado.value?.porcentaje_correctas ?? 0)
+  if (pct >= 80) return '¡Excelente! Mantén el ritmo y refuerza los cursos donde tuviste menos margen.'
+  if (pct >= 60) return 'Vas bien. Enfócate en los cursos con menor ratio y repasa preguntas falladas.'
+  return 'No te preocupes: identifica 1–2 cursos clave, practica y vuelve a intentarlo con estrategia.'
 })
 
-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 columns = [
+  { title: 'Curso', dataIndex: 'curso', key: 'curso', width: 260 },
+  { title: 'Correctas', dataIndex: 'correctas', key: 'correctas', width: 120 },
+  { title: 'Incorrectas', dataIndex: 'incorrectas', key: 'incorrectas', width: 130 },
+  { title: 'Total', dataIndex: 'total', key: 'total', width: 100 },
+  { title: 'Progreso', dataIndex: 'ratio', key: 'ratio', width: 240 },
+]
+
+const rowsCursos = computed(() => {
+  const corr = resultado.value?.correctas_por_curso || {}
+  const inc = resultado.value?.incorrectas_por_curso || {}
+  const tot = resultado.value?.preguntas_totales_por_curso || {}
+
+  const keys = new Set([
+    ...Object.keys(corr || {}),
+    ...Object.keys(inc || {}),
+    ...Object.keys(tot || {}),
+  ])
+
+  const parseCorrectas = (val) => {
+    if (typeof val === 'string' && val.includes('de')) {
+      const [a] = val.split('de')
+      const x = Number(a.trim())
+      return Number.isFinite(x) ? x : 0
+    }
+    const x = Number(val ?? 0)
+    return Number.isFinite(x) ? x : 0
   }
-})
 
-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'
-    })
+  const parseTotal = (curso) => {
+    const x = Number(tot?.[curso] ?? 0)
+    return Number.isFinite(x) ? x : 0
   }
-  
-  // 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 parseIncorrectas = (curso) => {
+    const x = Number(inc?.[curso] ?? 0)
+    return Number.isFinite(x) ? x : 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 rows = Array.from(keys).map((k) => {
+    const correctas = parseCorrectas(corr?.[k] ?? 0)
+    const total = parseTotal(k) || (() => {
+      const val = corr?.[k]
+      if (typeof val === 'string' && val.includes('de')) {
+        const [, b] = val.split('de')
+        const y = Number(b.trim())
+        return Number.isFinite(y) ? y : 0
+      }
+      return 0
+    })()
+    const incorrectas = parseIncorrectas(k)
+    const ratio = total > 0 ? Math.round((correctas / total) * 100) : 0
+    return { curso: k, correctas, incorrectas, total, ratio }
+  })
+
+  rows.sort((a, b) => a.ratio - b.ratio)
+  return rows
+})
 
-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)
-      })
+const recalcular = async () => {
+  if (!examenId.value) return
+
+  cargando.value = true
+  try {
+    const r = await examenStore.calificarExamen(examenId.value)
+    if (r?.success) message.success('Resultados actualizados')
+    else message.error(r?.message || 'No se pudo calcular el resultado')
+  } catch (e) {
+    console.error(e)
+    message.error('Error al obtener resultados')
+  } finally {
+    cargando.value = false
   }
 }
 
-// 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]
+const volver = () => router.back()
+
+onMounted(async () => {
+  if (!resultado.value && examenId.value) {
+    await recalcular()
   }
 })
 </script>
 
 <style scoped>
-.resultados-container {
-  max-width: 1200px;
-  margin: 0 auto;
+.page {
   padding: 16px;
+  max-width: 1120px;
+  margin: 0 auto;
 }
+.mt16 { margin-top: 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);
+.alt {
+  background: transparent;
 }
 
-.stat-content {
+.head {
   display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-.stat-icon {
-  font-size: 32px;
-}
-
-.stat-info {
-  flex: 1;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  margin-bottom: 14px;
 }
-
-.stat-value {
-  font-size: 28px;
-  font-weight: bold;
-  color: #333;
-  line-height: 1;
+.hTitle {
+  margin: 0;
+  font-size: 1.85rem;
+  font-weight: 700;
+  color: #0d1b52;
+  line-height: 1.15;
 }
-
-.stat-label {
-  font-size: 14px;
-  color: #666;
+.hSub {
   margin-top: 4px;
+  font-size: 12.5px;
+  color: var(--ant-colorTextSecondary, #6b7280);
+  line-height: 1.35;
 }
-
-.progreso-card {
-  margin-bottom: 24px;
+.headActions {
+  min-width: 260px;
+  display: flex;
+  justify-content: flex-end;
 }
+.btnSoft, .btnPrimary { border-radius: 12px; font-weight: 900; }
 
-.progreso-labels {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 8px;
-  font-size: 12px;
-  color: #666;
+.card {
+  border-radius: 18px;
+  border: 1px solid var(--ant-colorBorderSecondary, rgba(0,0,0,.06));
+  box-shadow: var(--ant-boxShadowSecondary, 0 10px 28px rgba(0,0,0,.08));
+  background: var(--ant-colorBgContainer, #fff);
 }
+.card :deep(.ant-card-body) { padding: 16px; }
+.scoreCard :deep(.ant-card-body) { padding: 18px; }
 
-.estado-final {
+.scoreTop {
   display: flex;
   justify-content: space-between;
+  gap: 10px;
+  flex-wrap: wrap;
   align-items: center;
-  margin-top: 16px;
-  padding-top: 16px;
-  border-top: 1px solid #f0f0f0;
+  margin-bottom: 10px;
 }
-
-.recomendacion {
-  font-style: italic;
-  color: #666;
-  max-width: 400px;
+.chipDone, .chipRank {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border-radius: 999px;
+  border: 1px solid rgba(22,119,255,.18);
+  background: rgba(22,119,255,.06);
+  font-weight: 900;
+  font-size: 12px;
+  color: #111827;
 }
-
-.preguntas-detalle-card {
-  margin-bottom: 24px;
+.chipDot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: var(--ant-colorPrimary, #1677ff);
 }
 
-.pregunta-enunciado {
-  margin-bottom: 20px;
-  padding: 16px;
-  background: #fafafa;
-  border-radius: 4px;
+.scoreMain {
+  font-size: 44px;
+  font-weight: 950;
+  color: #111827;
+  line-height: 1;
 }
-
-.pregunta-enunciado h4 {
-  margin-bottom: 8px;
-  color: #333;
+.scoreLabel {
+  margin-top: 4px;
+  font-size: 12px;
+  color: #6b7280;
+  font-weight: 800;
 }
 
-.pregunta-images {
-  margin-top: 16px;
+.bigProgress { margin-top: 12px; }
+.bigProgressMeta {
+  margin-top: 6px;
   display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.detalle-image {
-  max-width: 200px;
-  border-radius: 4px;
-  border: 1px solid #f0f0f0;
-}
-
-.pregunta-opciones {
-  margin-bottom: 20px;
+  justify-content: space-between;
+  gap: 10px;
+  font-size: 12px;
+  color: #6b7280;
 }
+.bigProgressMeta b { color: #111827; }
 
-.pregunta-opciones h4 {
-  margin-bottom: 12px;
-  color: #333;
-}
+.advice { margin-top: 12px; border-radius: 14px; }
 
-.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;
+/* KPIs */
+.kpi .kpiK, .kpiWide .kpiK, .noteCard .kpiK {
+  font-size: 12px;
+  color: #6b7280;
+  font-weight: 900;
 }
-
-.opcion-detalle.seleccionada {
-  border-color: #1890ff;
-  background-color: #e6f7ff;
+.kpi .kpiV, .kpiWide .kpiV, .noteCard .kpiV {
+  margin-top: 6px;
+  font-size: 26px;
+  font-weight: 950;
+  color: #111827;
 }
-
-.opcion-detalle.incorrecta-seleccionada {
-  border-color: #f5222d;
-  background-color: #fff1f0;
+.kpiHint {
+  margin-top: 2px;
+  font-size: 12px;
+  color: #6b7280;
 }
 
-.opcion-detalle-content {
+.kpiWideRow {
   display: flex;
-  align-items: center;
+  justify-content: space-between;
   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;
+  flex-wrap: wrap;
 }
 
-.correct-badge, .incorrect-badge {
-  position: absolute;
-  top: -6px;
-  right: -6px;
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  font-size: 8px;
-  display: flex;
+.miniCircle {
+  position: relative;
+  display: inline-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;
+.miniCircleLabel {
+  position: absolute;
+  text-align: center;
 }
+.miniCircleMain { font-weight: 950; font-size: 16px; color: #111827; line-height: 1; }
+.miniCircleSub { font-size: 12px; color: #6b7280; }
 
-.pregunta-explicacion h4 {
-  margin-bottom: 8px;
-  color: #333;
+/* Tabla */
+.tableWrap {
+  width: 100%;
+  overflow-x: auto;
+  border-radius: 14px;
 }
-
-.recomendaciones-card {
-  margin-bottom: 24px;
+.tableWrap :deep(.ant-table-container) { overflow-x: auto; }
+:deep(.modernTable .ant-table-thead > tr > th) {
+  background: rgba(22,119,255,.04);
+  font-weight: 900;
 }
-
-.acciones-card {
-  margin-bottom: 24px;
-}
-
-.acciones-content {
+.courseCell {
   display: flex;
+  gap: 10px;
+  align-items: flex-start;
+}
+.courseDot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  background: var(--ant-colorPrimary, #1677ff);
+  margin-top: 6px;
+  flex: 0 0 auto;
+}
+.courseName { font-weight: 900; color: #111827; line-height: 1.2; }
+.courseMeta { margin-top: 2px; font-size: 12px; color: #6b7280; }
+
+.pill {
+  display: inline-flex;
+  align-items: center;
   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 {
+  min-width: 44px;
+  height: 30px;
+  padding: 0 10px;
+  border-radius: 999px;
+  font-weight: 950;
   font-size: 12px;
-  color: #666;
-  text-transform: uppercase;
+  border: 1px solid rgba(0,0,0,.08);
+  background: rgba(0,0,0,.03);
+  color: #111827;
 }
+.pill.good { border-color: rgba(22,119,255,.25); background: rgba(22,119,255,.08); }
+.pill.bad { border-color: rgba(0,0,0,.10); background: rgba(0,0,0,.04); }
+.pill.neutral { opacity: .92; }
 
-/* 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;
-  }
-}
+.empty { margin-top: 12px; }
 
-/* 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 {
+  .headActions { width: 100%; min-width: 0; justify-content: flex-start; }
+  .headSpace {
     width: 100%;
-    margin-bottom: 8px;
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 10px;
   }
+  .btnSoft, .btnPrimary { width: 100%; }
+  .scoreMain { font-size: 36px; }
 }
 
 @media (max-width: 480px) {
-  .stats-grid {
-    grid-template-columns: 1fr;
-  }
-  
-  .stat-content {
-    justify-content: center;
-    text-align: center;
-  }
+  .page { padding: 12px; }
+  .scoreMain { font-size: 32px; }
+  .bigProgressMeta { flex-direction: column; align-items: flex-start; }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/front/src/views/postulante/Test.vue b/front/src/views/postulante/Test.vue
index 57452fc..2c32c19 100644
--- a/front/src/views/postulante/Test.vue
+++ b/front/src/views/postulante/Test.vue
@@ -3,6 +3,9 @@ import { ref, computed, reactive, onMounted, watch } from "vue";
 import { useRouter } from "vue-router";
 import { useExamenStore } from "../../store/examen.store";
 import { message } from "ant-design-vue";
+import voucherCaja from "../../assets/images/caja.png";
+import voucherPagalo from "../../assets/images/pagalo.png";
+import voucherBn from "../../assets/images/boletabn.jpg";
 
 const router = useRouter();
 const examenStore = useExamenStore();
@@ -10,7 +13,12 @@ const examenStore = useExamenStore();
 const showModal = ref(false);
 const iniciandoExamen = ref(false);
 const creandoExamen = ref(false);
-const formRef = ref();
+const formRef = ref(null);
+
+
+const loadingPage = ref(false);
+const loadingAreas = ref(false);
+
 
 const formState = reactive({
   proceso_id: undefined,
@@ -19,7 +27,7 @@ const formState = reactive({
   codigo_pago: "",
 });
 
-/* ===== Modal Voucher ===== */
+
 const secuenciaModalOpen = ref(false);
 const secuenciaTipo = ref("caja");
 
@@ -33,8 +41,13 @@ const secuenciaTitle = computed(() => {
 });
 
 const voucherSrc = computed(() => {
-  const map = { caja: "/voucher-caja.png", pagalo: "/voucher-pagalo.png", bn: "/voucher-bn.png" };
-  return map[secuenciaTipo.value] || "/voucher-bn.png";
+  const map = {
+    caja: voucherCaja,
+    pagalo: voucherPagalo,
+    bn: voucherBn,
+  };
+
+  return map[secuenciaTipo.value] || "";
 });
 
 const habilitacionTexto = computed(() =>
@@ -50,28 +63,20 @@ const openSecuencia = (tipo) => {
 
 const modalBodyStyle = computed(() => ({ maxHeight: "72vh", overflowY: "auto" }));
 
-/* ===== Datos ===== */
 const hasExamen = computed(() => !!examenStore.examenActual);
 
 const procesoNombre = computed(() => examenStore.examenActual?.proceso?.nombre || "No asignado");
 const areaNombre = computed(() => examenStore.examenActual?.area?.nombre || "No seleccionada");
 const intentosActuales = computed(() => examenStore.examenActual?.intentos || 0);
 const intentosMax = computed(() => examenStore.examenActual?.intentos_max || 1);
-
 const yaDioTest = computed(() => intentosActuales.value > 0);
 
-/** ✅ Formal + agradable: dejamos el Primary solo para el CTA */
 const estadoTexto = computed(() => {
   if (!hasExamen.value) return "Aún sin asignar";
   return yaDioTest.value ? "Completado" : "Listo para iniciar";
 });
 
-const estadoBadgeStatus = computed(() => {
-  if (!hasExamen.value) return "default";
-  return yaDioTest.value ? "success" : "processing";
-});
 
-/* ===== Progreso / Mensajes ===== */
 const stepCurrent = computed(() => {
   if (!hasExamen.value) return 0;
   return yaDioTest.value ? 2 : 1;
@@ -94,24 +99,25 @@ const estadoAlertDesc = computed(() => {
     : "Son 10 preguntas. Al finalizar verás tu resultado al instante.";
 });
 
-/* ===== CTA único (sin duplicar botones) ===== */
-const primaryAction = computed(() => {
-  if (!hasExamen.value) {
-    return { label: "Seleccionar área", type: "primary", loading: false, onClick: () => (showModal.value = true) };
-  }
-  if (!yaDioTest.value) {
-    return { label: "Iniciar test", type: "primary", loading: iniciandoExamen.value, onClick: irAlExamen };
-  }
-  return { label: "Ver resultados", type: "primary", loading: false, onClick: verResultado };
-});
+const canIniciar = computed(() => hasExamen.value && !yaDioTest.value);
+const canVerResultados = computed(() => hasExamen.value && yaDioTest.value);
+const openSeleccionArea = () => {
+  showModal.value = true;
+};
 
-/* ===== Options ===== */
 const procesoOptions = computed(() =>
-  examenStore.procesos.map((p) => ({ value: p.id, label: p.nombre, requiere_pago: p.requiere_pago }))
+  (examenStore.procesos || []).map((p) => ({
+    value: p.id,
+    label: p.nombre,
+    requiere_pago: p.requiere_pago,
+  }))
 );
 
 const areaOptions = computed(() =>
-  examenStore.areas.map((a) => ({ value: a.area_proceso_id, label: a.nombre }))
+  (examenStore.areas || []).map((a) => ({
+    value: a.area_proceso_id,
+    label: a.nombre,
+  }))
 );
 
 const tipoPagoOptions = [
@@ -120,12 +126,22 @@ const tipoPagoOptions = [
   { value: "caja", label: "Caja" },
 ];
 
+
+const normalizeRequierePago = (v) => v === 1 || v === "1" || v === true || v === "true";
+
 const procesoRequierePago = computed(() => {
-  const proceso = examenStore.procesos.find((p) => p.id === formState.proceso_id);
-  return proceso?.requiere_pago === 1;
+  const pid = formState.proceso_id;
+  if (pid === undefined || pid === null || pid === "") return false;
+
+  const proceso = (examenStore.procesos || []).find((p) => String(p.id) === String(pid));
+  if (!proceso) return false;
+
+  return normalizeRequierePago(proceso.requiere_pago);
 });
 
-/* ===== Validación ===== */
+
+
+
 const rules = {
   proceso_id: [{ required: true, message: "Selecciona un proceso", trigger: "change" }],
   area_proceso_id: [{ required: true, message: "Selecciona un área", trigger: "change" }],
@@ -151,15 +167,37 @@ const rules = {
   ],
 };
 
-/* ===== Actions ===== */
+
 const refrescar = async () => {
-  await examenStore.fetchExamenActual();
-  message.success("Actualizado");
+  try {
+    await examenStore.fetchExamenActual();
+    message.success("Actualizado");
+  } catch {
+    message.error("No se pudo actualizar");
+  }
 };
 
+
 const handleProcesoChange = async (procesoId) => {
+
   formState.area_proceso_id = undefined;
-  if (procesoId) await examenStore.fetchAreas(procesoId);
+
+  formState.tipo_pago = undefined;
+  formState.codigo_pago = "";
+
+  formRef.value?.clearValidate?.(["area_proceso_id", "tipo_pago", "codigo_pago"]);
+
+  if (!procesoId) {
+    examenStore.areas = [];
+    return;
+  }
+
+  loadingAreas.value = true;
+  try {
+    await examenStore.fetchAreas(procesoId);
+  } finally {
+    loadingAreas.value = false;
+  }
 };
 
 const crearExamen = async () => {
@@ -170,6 +208,7 @@ const crearExamen = async () => {
 
   try {
     creandoExamen.value = true;
+
     if (formRef.value) await formRef.value.validate();
 
     const pagoData = procesoRequierePago.value
@@ -178,13 +217,16 @@ const crearExamen = async () => {
 
     const result = await examenStore.crearExamen(formState.area_proceso_id, pagoData);
 
-    if (result.success) {
+    if (result?.success) {
       message.success("Área asignada");
       showModal.value = false;
       resetModal();
       await examenStore.fetchExamenActual();
     } else {
-      message.error(result.message || "No se pudo asignar el área");
+      const msg =
+        result?.message ||
+        (result?.errors ? Object.values(result.errors).flat().join(" ") : "No se pudo asignar el área");
+      message.error(msg);
     }
   } catch (e) {
     message.error("No se pudo asignar el área");
@@ -237,329 +279,563 @@ const resetModal = () => {
   formState.area_proceso_id = undefined;
   formState.tipo_pago = undefined;
   formState.codigo_pago = "";
-  if (formRef.value) formRef.value.clearValidate?.();
+  examenStore.areas = [];
+  formRef.value?.clearValidate?.();
 };
 
-/* ===== Lifecycle ===== */
-onMounted(async () => {
-  await examenStore.fetchProcesos();
-  await examenStore.fetchExamenActual();
+watch(showModal, (open) => {
+  if (!open) resetModal();
 });
 
-watch(showModal, (newVal) => {
-  if (!newVal) {
-    examenStore.areas = [];
-    resetModal();
+onMounted(async () => {
+  loadingPage.value = true;
+  try {
+    await examenStore.fetchProcesos();
+    await examenStore.fetchExamenActual();
+  } finally {
+    loadingPage.value = false;
   }
 });
 </script>
 
 <template>
-  <!-- ✅ 1 solo Card contenedor. Sin degradados. Formal y “amigable”. -->
-  <a-card :loading="examenStore.cargando" class="page-card" :bordered="true">
-    <template #title>
-      <div class="header">
-        <div class="header__left">
-          <div class="header__titleRow">
-            <span class="header__title">Test diagnóstico</span>
-
-            <a-badge :status="estadoBadgeStatus" :text="estadoTexto" />
+
+<div class="heroKicker">Test diagnóstico</div>
+          <div class="heroTitle">Practica y conoce tu nivel</div>
+          <div class="heroText">10 preguntas • 10 min aprox. • Resultado inmediato</div>
+
+      <section class="hero">
+        <div class="heroLeft">
+          
+          <a-space direction="vertical" size="middle" class="mt16" style="width: 100%">
+            <a-card size="small">
+              <a-space align="start">
+                <div>
+                  <div style="font-weight: 700; color:#1a237e;">Test referencial (no afecta tu postulación)</div>
+                  <div class="muted">
+                    Este test te ayuda a medir tu nivel y practicar. No cambia tu puntaje ni tu postulación oficial.
+                  </div>
+                  
+                </div>
+              </a-space>
+            </a-card>
+          </a-space>
+
+         <div class="heroFacts hide-mobile">
+
+            <div class="fact">
+              <div class="factK">Nombre:</div>
+              <div class="factV">{{ procesoNombre }}</div>
+            </div>
+            <div class="fact">
+              <div class="factK">Área:</div>
+              <div class="factV">{{ areaNombre }}</div>
+            </div>
+            <div class="fact">
+              <div class="factK">Intentos:</div>
+              <div class="factV">{{ intentosActuales }} / {{ intentosMax }}</div>
+            </div>
           </div>
 
-          <div class="header__subtitle">
-            Es una guía para que midas tu nivel. <b>No afecta</b> tu admisión.
+          <div class="bankActions">
+            <div class="bankHead">
+              <div class="bankTitle">Requisito de acceso”</div>
+              <div class="bankSub">
+               Este test es completamente GRATUITO.
+No se realiza ningún pago adicional.
+
+Únicamente debes ingresar el número de secuencia del pago de tu Carpeta de Postulante, el cual ya realizaste previamente para el proceso de admisión.
+              </div>
+            </div>
+<div style="font-weight: 700; color:#1a237e;">Ver Secuencia</div>
+            <a-space wrap>
+              <a-button class="bankBtn" @click="openSecuencia('caja')">Caja</a-button>
+              <a-button class="bankBtn" @click="openSecuencia('pagalo')">pagalo.pe</a-button>
+              <a-button class="bankBtn" @click="openSecuencia('bn')">Banco Nación</a-button>
+            </a-space>
           </div>
         </div>
 
-        <div class="header__right">
-          <a-button @click="refrescar">Actualizar</a-button>
-        </div>
-      </div>
-    </template>
+        <div class="heroRight">
+          <div class="ctaCard">
+            <div class="ctaHeader">
+              <div>
+                <div class="ctaTitle">Acción rápida</div>
+                <div class="ctaHint">
+                  <span v-if="!hasExamen">Elige tu área y genera tu test.</span>
+                  <span v-else-if="hasExamen && !yaDioTest">Cuando estés listo, empieza.</span>
+                  <span v-else>Revisa tu resultado cuando quieras.</span>
+                </div>
+              </div>
+
+              <div class="statusTag" :class="{ ok: yaDioTest, pending: hasExamen && !yaDioTest, empty: !hasExamen }">
+                {{ estadoTexto }}
+              </div>
+            </div>
 
-    <!-- ✅ 1 bloque principal (sin cards anidados) -->
-    <div class="content">
-      <!-- Mensaje principal -->
-      <a-alert :type="estadoAlertType" show-icon :message="estadoAlertMessage" :description="estadoAlertDesc" />
+            <a-button type="default" size="large" @click="openSeleccionArea" class="ctaBtn ghostBtn" block>
+              Seleccionar área
+            </a-button>
+
+            <a-button
+              v-if="canIniciar"
+              type="primary"
+              size="large"
+              :loading="iniciandoExamen"
+              @click="irAlExamen"
+              class="ctaBtn primaryBtn"
+              block
+            >
+              Iniciar test
+            </a-button>
+
+            <a-button
+              v-if="canVerResultados"
+              type="primary"
+              size="large"
+              @click="verResultado"
+              class="ctaBtn primaryBtn"
+              block
+            >
+              Ver resultados
+            </a-button>
+
+            <a-divider class="ctaDivider" />
+
+            <a-alert
+              class="mt12"
+              :type="estadoAlertType"
+              show-icon
+              :message="estadoAlertMessage"
+              :description="estadoAlertDesc"
+            />
+          </div>
+        </div>
+      </section>
 
       <a-divider />
 
-      <!-- Resumen amigable (rápido de leer) -->
-      <div class="subhead">Resumen rápido</div>
-      <a-descriptions size="small" bordered :column="{ xs: 1, sm: 2, md: 3 }">
-        <a-descriptions-item label="Proceso">{{ procesoNombre }}</a-descriptions-item>
-        <a-descriptions-item label="Área">{{ areaNombre }}</a-descriptions-item>
-        <a-descriptions-item label="Intentos">{{ intentosActuales }} / {{ intentosMax }}</a-descriptions-item>
-        <a-descriptions-item label="Preguntas">10</a-descriptions-item>
-        <a-descriptions-item label="Duración">10 min aprox.</a-descriptions-item>
-        <a-descriptions-item label="Resultado">Al instante</a-descriptions-item>
-      </a-descriptions>
-
-      <!-- ✅ ÚNICO CTA -->
-      <div class="ctaRow">
-        <a-button
-          :type="primaryAction.type"
-          size="large"
-          :loading="primaryAction.loading"
-          @click="primaryAction.onClick"
-          class="ctaBtn"
-        >
-          {{ primaryAction.label }}
-        </a-button>
-
-        <!-- Link discreto (solo si aplica) -->
-        <a-button v-if="procesoRequierePago" type="link" @click="openSecuencia('bn')">
-          ¿Dónde veo mi secuencia?
-        </a-button>
-      </div>
-
-      <a-divider />
+      <section class="section">
+        <div class="sectionTitle">Tu camino</div>
+        <div class="sectionSub">Simple, rápido y sin estrés.</div>
 
-      <!-- Progreso -->
-      <div class="subhead">Tu camino</div>
-      <a-steps :current="stepCurrent" size="small">
-        <a-step title="Selecciona área" description="Elige proceso y área." />
-        <a-step title="Resuelve el test" description="10 preguntas." />
-        <a-step title="Mira tu resultado" description="Recomendaciones." />
-      </a-steps>
+        <a-steps :current="stepCurrent" size="small" class="mt12">
+          <a-step title="Selecciona área" description="Elige proceso y área." />
+          <a-step title="Resuelve el test" description="10 preguntas." />
+          <a-step title="Mira tu resultado" description="Recomendaciones." />
+        </a-steps>
 
-      <div class="hint">
-        <span v-if="!hasExamen">Tip: selecciona un área y luego podrás iniciar.</span>
-        <span v-else-if="hasExamen && !yaDioTest">Tip: responde tranquilo, sin apuro.</span>
-        <span v-else>Tip: puedes volver a ver tus resultados cuando quieras.</span>
-      </div>
+        <div class="hint mt12">
+          <span v-if="!hasExamen">Tip: elige tu área para generar el test.</span>
+          <span v-else-if="hasExamen && !yaDioTest">Tip: responde tranquilo, sin apuro.</span>
+          <span v-else>Tip: puedes volver a ver tus resultados cuando quieras.</span>
+        </div>
+      </section>
 
       <a-divider />
 
-      <!-- FAQ corto -->
-      <a-collapse accordion>
-        <a-collapse-panel key="1" header="¿Para qué sirve este test?">
-          <ul class="bullets">
-            <li>Te ayuda a medir tu preparación antes del examen.</li>
-            <li>No cuenta como nota de admisión.</li>
-            <li>Al terminar ves tu resultado y recomendaciones.</li>
-          </ul>
-        </a-collapse-panel>
-
-        <a-collapse-panel v-if="procesoRequierePago" key="2" header="Secuencia de pago (si tu proceso lo requiere)">
-          <a-alert
-            type="info"
-            show-icon
-            message="El test es gratuito"
-            description="Solo se te pedirá la secuencia del pago de la Carpeta de Postulante (si tu proceso la requiere)."
-            class="mb12"
-          />
-          <a-space wrap>
-            <a-button @click="openSecuencia('caja')">Caja</a-button>
-            <a-button @click="openSecuencia('pagalo')">pagalo.pe</a-button>
-            <a-button @click="openSecuencia('bn')">Banco Nación</a-button>
-          </a-space>
-        </a-collapse-panel>
-      </a-collapse>
-    </div>
-
-    <!-- ================== MODAL SECUENCIA ================== -->
-    <a-modal
-      v-model:open="secuenciaModalOpen"
-      :title="secuenciaTitle"
-      :footer="null"
-      width="920px"
-      :centered="true"
-      :bodyStyle="modalBodyStyle"
-      class="voucher-modal"
-    >
-      <a-row :gutter="[16, 16]" align="top">
-        <a-col :xs="24" :md="14">
-          <a-card :bordered="true">
-            <div class="voucher-caption">
-              Busca el campo <b>“Secuencia”</b> o <b>“N° operación”</b> (según el comprobante).
-            </div>
+      <a-modal
+        v-model:open="secuenciaModalOpen"
+        :title="secuenciaTitle"
+        :footer="null"
+        width="920px"
+        :centered="true"
+        :bodyStyle="modalBodyStyle"
+        class="voucher-modal"
+      >
+        <a-row :gutter="[16, 16]" align="top">
+          <a-col :xs="24" :md="14">
+            <a-card :bordered="true">
+              <div class="voucher-caption">
+                Busca el campo <b>“Secuencia”</b> o <b>“N° operación”</b>.
+              </div>
+
+              <div class="voucher-img-wrap">
+                <a-image :src="voucherSrc" :preview="true" alt="Voucher de ejemplo" />
+              </div>
+
+              <a-alert class="mt12" type="warning" show-icon message="Habilitación" :description="habilitacionTexto" />
+            </a-card>
+          </a-col>
+
+          <a-col :xs="24" :md="10">
+            <a-card :bordered="true">
+              <div class="sectionTitle">¿Qué hago?</div>
+
+              <ol class="ordered mt12">
+                <li>Ubica el número de secuencia en tu voucher/boleta.</li>
+                <li>Ingresa ese número cuando el sistema lo pida.</li>
+                <li>Si pagaste hoy y no aparece, espera el tiempo de habilitación.</li>
+              </ol>
+
+              <a-divider />
+
+              <a-alert type="info" show-icon message="Tranquilo" description="No tienes que pagar nada extra por este test." />
+
+              <div class="modal-actions">
+                <a-button @click="secuenciaModalOpen = false">Cerrar</a-button>
+                <a-button type="primary" @click="secuenciaModalOpen = false">Entendido</a-button>
+              </div>
+            </a-card>
+          </a-col>
+        </a-row>
+      </a-modal>
+
+      <a-modal
+        v-model:open="showModal"
+        title="Seleccionar área"
+        :mask-closable="false"
+        width="640px"
+        @cancel="showModal = false"
+        class="select-modal"
+      >
+        <a-alert
+          v-if="hasExamen"
+          type="warning"
+          show-icon
+          message="No permitido"
+          description="Ya tienes un test asignado. No se puede cambiar el área."
+          class="mb12"
+        />
+
+        <a-form v-else ref="formRef" :model="formState" :rules="rules" layout="vertical">
+          <a-form-item label="Proceso" name="proceso_id" required>
+            <a-select
+              v-model:value="formState.proceso_id"
+              placeholder="Selecciona un proceso"
+              :options="procesoOptions"
+              @change="handleProcesoChange"
+              :loading="loadingPage"
+            />
+          </a-form-item>
 
-            <div class="voucher-img-wrap">
-              <a-image :src="voucherSrc" :preview="true" alt="Voucher de ejemplo" />
-            </div>
+          <a-form-item label="Área" name="area_proceso_id" required>
+            <a-select
+              v-model:value="formState.area_proceso_id"
+              placeholder="Selecciona un área"
+              :options="areaOptions"
+              :disabled="!formState.proceso_id"
+              :loading="loadingAreas"
+            />
+          </a-form-item>
 
-            <a-alert class="mt12" type="warning" show-icon message="Habilitación" :description="habilitacionTexto" />
-          </a-card>
-        </a-col>
+          <div v-if="procesoRequierePago" class="pay-block">
+            <a-alert
+              message="Este proceso requiere secuencia"
+              type="info"
+              show-icon
+              class="mb12"
+              description="Puedes usar la secuencia del pago de tu Carpeta de Postulante (si ya la pagaste)."
+            />
+            <a-form-item label="Tipo de Pago" name="tipo_pago">
+              <a-select v-model:value="formState.tipo_pago" placeholder="Selecciona tipo de pago" :options="tipoPagoOptions" />
+            </a-form-item>
+            <a-form-item label="Código de Pago" name="codigo_pago">
+              <a-input v-model:value="formState.codigo_pago" placeholder="Escribe la secuencia / código" />
+            </a-form-item>
+          </div>
+        </a-form>
+
+        <template #footer>
+          <a-space>
+            <a-button @click="showModal = false">Cerrar</a-button>
+            <a-button v-if="!hasExamen" type="primary" :loading="creandoExamen" @click="crearExamen">
+              Confirmar
+            </a-button>
+          </a-space>
+        </template>
+      </a-modal>
 
-        <a-col :xs="24" :md="10">
-          <a-card :bordered="true">
-            <div class="subhead">¿Qué hago?</div>
 
-            <ol class="ordered">
-              <li>Ubica el número de secuencia en tu voucher/boleta.</li>
-              <li>Ingresa ese número cuando el sistema lo pida.</li>
-              <li>Si pagaste hoy y no aparece, espera el tiempo de habilitación.</li>
-            </ol>
+</template>
 
-            <a-divider />
+<style scoped>
 
-            <a-alert type="info" show-icon message="Tranquilo" description="No tienes que pagar nada extra por este test." />
+.test-modern {
+  position: relative;
+  padding: 40px 0;
+  font-family: "Times New Roman", Times, serif;
+  background: #fbfcff;
+  overflow: hidden;
+}
 
-            <div class="modal-actions">
-              <a-button @click="secuenciaModalOpen = false">Cerrar</a-button>
-              <a-button type="primary" @click="secuenciaModalOpen = false">Entendido</a-button>
-            </div>
-          </a-card>
-        </a-col>
-      </a-row>
-    </a-modal>
-
-    <!-- ================== MODAL SELECCIÓN ÁREA ================== -->
-    <a-modal
-      v-model:open="showModal"
-      title="Seleccionar área"
-      :mask-closable="false"
-      width="640px"
-      @cancel="resetModal"
-    >
-      <a-alert
-        v-if="hasExamen"
-        type="warning"
-        show-icon
-        message="No permitido"
-        description="Ya tienes un test asignado. No se puede cambiar el área."
-        class="mb12"
-      />
-
-      <a-form v-else ref="formRef" :model="formState" :rules="rules" layout="vertical">
-        <a-form-item label="Proceso" name="proceso_id" required>
-          <a-select
-            v-model:value="formState.proceso_id"
-            placeholder="Selecciona un proceso"
-            :options="procesoOptions"
-            @change="handleProcesoChange"
-            :loading="examenStore.cargando"
-          />
-        </a-form-item>
-
-        <a-form-item label="Área" name="area_proceso_id" required>
-          <a-select
-            v-model:value="formState.area_proceso_id"
-            placeholder="Selecciona un área"
-            :options="areaOptions"
-            :disabled="!formState.proceso_id"
-            :loading="examenStore.cargando"
-          />
-        </a-form-item>
-
-        <div v-if="procesoRequierePago" class="pay-block">
-          <a-alert message="Este proceso requiere pago" type="info" show-icon class="mb12" />
-          <a-form-item label="Tipo de Pago" name="tipo_pago">
-            <a-select v-model:value="formState.tipo_pago" placeholder="Selecciona tipo de pago" :options="tipoPagoOptions" />
-          </a-form-item>
-          <a-form-item label="Código de Pago" name="codigo_pago">
-            <a-input v-model:value="formState.codigo_pago" placeholder="Escribe el código de pago" />
-          </a-form-item>
-        </div>
-      </a-form>
-
-      <template #footer>
-        <a-space>
-          <a-button @click="showModal = false">Cerrar</a-button>
-          <a-button v-if="!hasExamen" type="primary" :loading="creandoExamen" @click="crearExamen">
-            Confirmar
-          </a-button>
-        </a-space>
-      </template>
-    </a-modal>
-  </a-card>
-</template>
+.test-modern::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+
+  background-image:
+    repeating-linear-gradient(
+      to right,
+      rgba(13, 27, 82, 0.06) 0,
+      rgba(13, 27, 82, 0.06) 1px,
+      transparent 1px,
+      transparent 24px
+    ),
+    repeating-linear-gradient(
+      to bottom,
+      rgba(13, 27, 82, 0.06) 0,
+      rgba(13, 27, 82, 0.06) 1px,
+      transparent 1px,
+      transparent 24px
+    );
+
+  opacity: 0.55;
+}
 
-<style scoped>
-/* ✅ Sin degradados, formal, y agradable:
-   - Más aire
-   - Mensajes cortos
-   - 1 CTA principal
-   - Tipos legibles
-*/
-.page-card {
-  max-width: 1100px;
+.section-container {
+  position: relative;
+  z-index: 1;
+  max-width: 1200px;
   margin: 0 auto;
+  padding: 0 24px;
+}
+
+
+.mt12 { margin-top: 12px; }
+.mt16 { margin-top: 16px; }
+.mb12 { margin-bottom: 12px; }
+.muted { color: #666; line-height: 1.6; }
+
+
+.hero {
+  position: relative;
+  border: none;
+  border-radius: 16px;
+  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.08);
+  padding: 28px;
+  display: grid;
+  grid-template-columns: 1.2fr 0.8fr;
+  gap: 22px;
+  align-items: start;
+  background: #fff;
+  overflow: hidden;
 }
 
-/* Header */
-.header {
+.hero::after {
+  position: absolute;
+  top: -12px;
+  left: 24px;
+  background: linear-gradient(45deg, #1890ff, #52c41a);
+  color: #fff;
+  padding: 6px 16px;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  font-weight: 700;
+}
+
+.heroLeft, .heroRight { min-width: 0; }
+
+.heroKicker {
+  font-size: 0.95rem;
+  color: #666;
+  margin-bottom: 6px;
+}
+
+.heroTitle {
+  margin: 0;
+  font-size: 1.85rem;
+  font-weight: 700;
+  color: #0d1b52;
+  line-height: 1.15;
+}
+
+.heroText {
+  margin-top: 10px;
+  font-size: 1.05rem;
+  color: #666;
+}
+
+.heroFacts {
+  margin-top: 16px;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.fact {
+  border: 1px solid rgba(13, 27, 82, 0.10);
+  background: rgba(13, 27, 82, 0.03);
+  border-radius: 12px;
+  padding: 12px;
+}
+
+.factK {
+  font-size: 0.9rem;
+  color: #666;
+  font-weight: 700;
+}
+
+.factV {
+  margin-top: 6px;
+  font-weight: 700;
+  font-size: 0.95rem;
+  color: #1a237e;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+
+.bankActions {
+  margin-top: 18px;
+  padding: 16px;
+  border-radius: 14px;
+  border: 1px solid rgba(26, 35, 126, 0.12);
+  background: linear-gradient(180deg, rgba(26, 35, 126, 0.06), rgba(13, 27, 82, 0.03));
+  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
+}
+
+.bankHead { margin-bottom: 10px; }
+
+.bankTitle {
+  margin: 0;
+  font-size: 1.05rem;
+  color: #1a237e;
+  font-weight: 700;
+}
+
+.bankSub {
+  margin-top: 6px;
+  font-size: 0.95rem;
+  color: #666;
+  line-height: 1.45;
+}
+
+.bankBtn {
+  height: 44px;
+  border-radius: 10px;
+  font-weight: 700;
+}
+
+.ctaCard {
+  border: none;
+  border-radius: 16px;
+  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.08);
+  background: #fff;
+  padding: 20px;
   display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
+  flex-direction: column;
   gap: 12px;
-  flex-wrap: wrap;
 }
 
-.header__titleRow {
+.ctaHeader {
   display: flex;
-  gap: 10px;
-  align-items: center;
-  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
 }
 
-.header__title {
+.ctaTitle {
+  margin: 0;
+  font-size: 1.1rem;
   font-weight: 700;
-  color: var(--ant-colorTextHeading, #111827);
+  color: #0d1b52;
 }
 
-.header__subtitle {
-  margin-top: 4px;
-  color: var(--ant-colorTextSecondary, #6b7280);
-  font-size: 12px;
+.ctaHint {
+  margin-top: 6px;
+  font-size: 0.95rem;
+  color: #666;
+  line-height: 1.45;
 }
 
-.content {
-  padding: 4px 0;
+.statusTag {
+  font-weight: 700;
+  padding: 4px 12px;
+  border-radius: 999px;
+  white-space: nowrap;
+  border: 1px solid rgba(0,0,0,0.06);
+  background: rgba(0,0,0,0.03);
+  color: #666;
 }
 
-.subhead {
-  font-weight: 600;
-  margin-bottom: 10px;
-  color: var(--ant-colorTextHeading, #111827);
+.statusTag.ok {
+  border-color: rgba(82, 196, 26, 0.30);
+  background: rgba(82, 196, 26, 0.12);
+  color: rgba(32, 120, 16, 1);
 }
 
-/* CTA row */
-.ctaRow {
-  margin-top: 14px;
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  flex-wrap: wrap;
+.statusTag.pending {
+  border-color: rgba(24, 144, 255, 0.30);
+  background: rgba(24, 144, 255, 0.12);
+  color: rgba(9, 74, 168, 1);
+}
+
+.statusTag.empty {
+  border-color: rgba(0,0,0,0.10);
+  background: rgba(0,0,0,0.04);
+  color: #777;
 }
 
 .ctaBtn {
-  height: 40px;
-  border-radius: 10px; /* un poco más friendly */
-  font-weight: 600;
+  height: 52px;
+  border-radius: 12px;
+  font-weight: 700;
+}
+
+.primaryBtn {
+  background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
+  border: none;
+}
+
+.ghostBtn {
+  background: rgba(13, 27, 82, 0.04);
+  border: 1px solid rgba(13, 27, 82, 0.14);
+}
+
+.ctaDivider { margin: 14px 0 0; }
+
+.sectionTitle {
+  font-size: 1.35rem;
+  font-weight: 700;
+  color: #0d1b52;
+  margin: 0;
+}
+
+.sectionSub {
+  margin-top: 8px;
+  font-size: 1rem;
+  color: #666;
 }
 
-/* Hint */
 .hint {
   margin-top: 10px;
-  color: var(--ant-colorTextSecondary, #6b7280);
-  font-size: 12px;
+  font-size: 0.95rem;
+  color: #666;
 }
 
-/* Lists */
-.bullets {
-  margin: 0 0 0 18px;
-  line-height: 1.7;
+:deep(.voucher-modal .ant-modal-content),
+:deep(.select-modal .ant-modal-content) {
+  border-radius: 16px;
 }
-.ordered {
-  margin: 0 0 0 18px;
-  line-height: 1.7;
+
+:deep(.voucher-modal .ant-modal),
+:deep(.select-modal .ant-modal) {
+  max-width: 92vw;
+}
+
+.pay-block {
+  margin-top: 10px;
+  padding: 12px;
+  border-radius: 14px;
+  border: 1px solid rgba(13, 27, 82, 0.12);
+  background: rgba(13, 27, 82, 0.03);
 }
 
-/* Voucher */
 .voucher-caption {
   margin-bottom: 10px;
-  color: var(--ant-colorText, #374151);
+  color: #666;
   line-height: 1.6;
 }
 
 .voucher-img-wrap {
-  background: var(--ant-colorFillAlter, #fafafa);
-  border: 1px solid var(--ant-colorBorderSecondary, rgba(0, 0, 0, 0.06));
+  background: rgba(13, 27, 82, 0.03);
+  border: 1px solid rgba(13, 27, 82, 0.10);
   padding: 10px;
-  border-radius: 10px;
+  border-radius: 14px;
 }
 
 .modal-actions {
@@ -569,28 +845,51 @@ watch(showModal, (newVal) => {
   gap: 10px;
 }
 
-/* Pay block */
-.pay-block {
-  margin-top: 8px;
-  padding: 12px;
-  border: 1px solid var(--ant-colorBorderSecondary, rgba(0, 0, 0, 0.06));
-  border-radius: 10px;
-  background: var(--ant-colorFillAlter, #fafafa);
-}
+:deep(.ant-card) { border-radius: 12px; }
+:deep(.ant-card-bordered) { border: 1px solid rgba(13, 27, 82, 0.10); }
 
-.mb12 {
-  margin-bottom: 12px;
-}
-.mt12 {
-  margin-top: 12px;
-}
 
-@media (max-width: 576px) {
-  .page-card {
-    margin: 0;
+@media (max-width: 768px) {
+.hide-mobile{
+    display: none !important;
+  }
+  .test-modern{
+    padding-top: 0 !important;
+    padding-bottom: 24px; /* opcional */
   }
-  .ctaBtn {
+
+  .section-container{
+    max-width: none;
+    padding: 0 !important;
+    margin: 0 !important;
+  }
+
+  .hero{
+    grid-template-columns: 1fr;
     width: 100%;
+    margin: 0 !important;
+    border-radius: 0 !important;
+
+    padding: 14px 16px 18px !important;
+  }
+
+  .heroKicker{ margin-top: 0 !important; }
+  .heroTitle{ margin-top: 6px !important; }
+  .heroText{ margin-top: 8px !important; }
+
+  .section{
+    padding: 0 16px;
+  }
+
+  .heroFacts{
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
+
+@media (max-width: 576px){
+  .heroFacts{
+    grid-template-columns: 1fr;
+  }
+}
+
 </style>
diff --git a/front/src/views/usuario/Dashboard.vue b/front/src/views/usuario/Dashboard.vue
index 5be0c1d..2cf78dc 100644
--- a/front/src/views/usuario/Dashboard.vue
+++ b/front/src/views/usuario/Dashboard.vue
@@ -1,4 +1,3 @@
-<!-- views/Dashboard.vue -->
 <template>
   <div style="padding: 24px;">
     <a-result