diff --git a/back/app/Http/Controllers/Administracion/NoticiaController.php b/back/app/Http/Controllers/Administracion/NoticiaController.php
new file mode 100644
index 0000000..d7aa0ef
--- /dev/null
+++ b/back/app/Http/Controllers/Administracion/NoticiaController.php
@@ -0,0 +1,183 @@
+<?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();
+
+        // filtros opcionales
+        if ($request->filled('publicado')) {
+            $query->where('publicado', $request->boolean('publicado'));
+        }
+
+        if ($request->filled('categoria')) {
+            $query->where('categoria', $request->string('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(),
+            '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,
+        ]);
+    }
+    // GET /api/noticias/{noticia}
+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'],
+            'imagen' => ['nullable', 'file', 'mimes:jpg,jpeg,png,webp', 'max:4096'],
+            'imagen_path' => ['nullable', 'string', 'max:255'],
+            'link_url' => ['nullable', 'string', 'max:600'],
+            'link_texto' => ['nullable', 'string', 'max:120'],
+            'fecha_publicacion' => ['nullable', 'date'],
+            'publicado' => ['nullable', 'boolean'],
+            'destacado' => ['nullable', 'boolean'],
+            'orden' => ['nullable', 'integer'],
+        ]);
+
+        // slug por defecto
+        if (empty($data['slug'])) {
+            $data['slug'] = Str::slug($data['titulo']);
+        }
+
+        // subir imagen si viene
+        if ($request->hasFile('imagen')) {
+            $path = $request->file('imagen')->store('noticias', 'public');
+            $data['imagen_path'] = $path;
+        }
+
+        // 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,
+        ], 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'],
+            'imagen' => ['sometimes', 'nullable', 'file', 'mimes:jpg,jpeg,png,webp', 'max:4096'],
+            'imagen_path' => ['sometimes', 'nullable', 'string', 'max:255'],
+            'link_url' => ['sometimes', 'nullable', 'string', '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, reemplazar
+        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;
+        }
+
+        // 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)
+    {
+        // opcional: borrar imagen al eliminar
+        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/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/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 fc78ac4..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
 {
@@ -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/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..e748d96
--- /dev/null
+++ b/back/app/Models/Noticia.php
@@ -0,0 +1,55 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+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',
+        'link_url',
+        'link_texto',
+        'fecha_publicacion',
+        'publicado',
+        'destacado',
+        'orden',
+    ];
+
+    protected $casts = [
+        'fecha_publicacion' => 'datetime',
+        'publicado' => 'boolean',
+        'destacado' => 'boolean',
+        'orden' => 'integer',
+    ];
+
+    protected $appends = ['imagen_url'];
+
+    public function getImagenUrlAttribute(): ?string
+    {
+        if (!$this->imagen_path) return null;
+        return asset('storage/' . ltrim($this->imagen_path, '/'));
+    }
+
+    // Auto-generar slug si no viene
+    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/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/Services/ExamenService.php b/back/app/Services/ExamenService.php
index 527df22..0c99677 100644
--- a/back/app/Services/ExamenService.php
+++ b/back/app/Services/ExamenService.php
@@ -158,16 +158,6 @@ public function guardarRespuesta(PreguntaAsignada $pa, ?string $respuesta): arra
 }
 
 
-    /**
-     * Finalizar examen
-     */
-    public function finalizarExamen(Examen $examen): void
-    {
-        $examen->update([
-            'estado'   => 'finalizado',
-            'hora_fin' => now()
-        ]);
-    }
 
     private function mezclarOpciones(?array $opciones): array
     {
diff --git a/back/routes/api.php b/back/routes/api.php
index 9d84758..e820897 100644
--- a/back/routes/api.php
+++ b/back/routes/api.php
@@ -16,9 +16,9 @@ use App\Http\Controllers\Administracion\ReglaAreaProcesoController;
 use App\Http\Controllers\Administracion\ProcesoAdmisionController;
 use App\Http\Controllers\Administracion\ProcesoAdmisionDetalleController;
 use App\Http\Controllers\Administracion\PostulanteController;
-    use App\Http\Administracion\CalificacionController;
-use App\Models\ProcesoAdmisionDetalle;
-
+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();
@@ -65,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}', [NoticiaController::class, 'showPublic']);
+
 Route::middleware(['auth:sanctum'])->prefix('admin')->group(function () {
 
     Route::get('/cursos', [CursoController::class, 'index']);
@@ -178,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']);
     
 });
 
@@ -203,4 +220,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/src/components/WebPage.vue b/front/src/components/WebPage.vue
index 61bd441..fb08d37 100644
--- a/front/src/components/WebPage.vue
+++ b/front/src/components/WebPage.vue
@@ -9,27 +9,18 @@
 
     <ProcessSection />
 
-    <ConvocatoriasSection
-      @show-modal="showModal"
-      @open-preinscripcion="openPreinscripcion"
-    />
+    <ConvocatoriasSection/>
 
-    <ProgramasSection :facultades="facultades" />
+    <ProgramasSection/>
 
     <StatsSection />
 
-    <NoticiasSection :noticias="noticias" />
+    <NoticiasSection/>
 
-    <ModalidadesSection :modalidades="modalidades" />
 
     <ContactSection />
   </div>
 
-  <PreinscripcionModal
-    v-model:visible="preinscripcionModalVisible"
-    :facultades="facultades"
-    @submit="submitPreinscripcion"
-  />
 
   <FooterModerno />
 </template>
@@ -50,168 +41,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 preinscripcionModalVisible = ref(false)
-
-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")
@@ -223,18 +55,6 @@ const openVirtualTour = () => {
   window.open("https://example.com", "_blank", "noopener,noreferrer")
 }
 
-const openPreinscripcion = () => {
-  preinscripcionModalVisible.value = true
-}
-
-const showModal = (type) => {
-  console.log("Mostrar modal:", type)
-}
-
-const submitPreinscripcion = () => {
-  message.success("Preinscripción iniciada exitosamente")
-  preinscripcionModalVisible.value = false
-}
 </script>
 
 <style scoped>
diff --git a/front/src/components/WebPageSections/ConvocatoriasSection.vue b/front/src/components/WebPageSections/ConvocatoriasSection.vue
index 772fa67..cbd2116 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,48 +12,89 @@
         </p>
       </div>
 
-      <div class="convocatorias-grid">
-        <a-card class="main-convocatoria-card">
+      <a-skeleton v-if="store.loading" active :paragraph="{ rows: 8 }" />
+
+      <div v-else class="convocatorias-grid">
+        <!-- PRINCIPAL -->
+        <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>Admisión Ordinaria 2026-I</h3>
-                  <p class="convocatoria-date">Inscripciones: 20 Oct - 30 Nov</p>
+                  <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">
+                    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="success" class="status-tag">Abierto</a-tag>
+                <a-tag color="success" class="status-tag">
+                  {{ store.procesoPrincipal.estado }}
+                </a-tag>
               </div>
 
               <p class="convocatoria-desc">
-                Proceso de admisión general para todas las carreras profesionales de pregrado.
-                Examen de conocimientos: 15 de diciembre.
+                {{ 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', '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', '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', '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', 'cronograma')">
+                  <a-button
+                    v-if="tieneTipo('cronograma')"
+                    class="action-btn"
+                    @click="abrirPorTipo('cronograma')"
+                  >
                     <template #icon><CalendarOutlined /></template>
                     Cronograma
                   </a-button>
@@ -62,17 +103,20 @@
 
               <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>
+             <!-- PREINSCRIPCION -->
+            <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>
 
+              <!-- Botón centrado abajo y estilo igual a Portal del Postulante -->
+              <div v-if="store.procesoPrincipal?.link_preinscripcion" class="preinscripcion-btn-wrap">
                 <a-button
                   type="primary"
                   size="large"
-                  class="preinscripcion-btn"
-                  @click="$emit('open-preinscripcion')"
+                  :href="store.procesoPrincipal.link_preinscripcion"
+                  target="_blank"
                 >
                   <template #icon><FormOutlined /></template>
                   Iniciar Preinscripción
@@ -81,6 +125,8 @@
             </div>
 
 
+            </div>
+
             <div class="main-card-media">
               <a-image
                 src="/images/extra.jpg"
@@ -92,59 +138,98 @@
           </div>
         </a-card>
 
-<div class="secondary-list">
+        <!-- SECUNDARIAS (hardcode por ahora) -->
+        <div class="secondary-list">
+          <a-card class="secondary-convocatoria-card">
+            <div class="convocatoria-header">
+              <div>
+                <h4 class="secondary-title">CEPREUNA</h4>
+                <p class="convocatoria-date">30 de enero</p>
+              </div>
 
-  <a-card class="secondary-convocatoria-card">
-    <div class="convocatoria-header">
-      <div>
-        <h4 class="secondary-title">CEPREUNA</h4>
-        <p class="convocatoria-date">30 de enero</p>
-      </div>
+              <a-tag class="status-tag" color="default">FINALIZADO</a-tag>
+            </div>
 
-      <a-tag class="status-tag" color="default">FINALIZADO</a-tag>
-    </div>
+            <p class="convocatoria-desc">Postulantes del CEPRE</p>
 
-    <p class="convocatoria-desc">Postulantes del CEPRE</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 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>
+          <a-card class="secondary-convocatoria-card">
+            <div class="convocatoria-header">
+              <div>
+                <h4 class="secondary-title">Extraordinario</h4>
+                <p class="convocatoria-date">15 de febrero</p>
+              </div>
 
+              <a-tag class="status-tag" color="orange">PRÓXIMAMENTE</a-tag>
+            </div>
 
-  <a-card class="secondary-convocatoria-card">
-    <div class="convocatoria-header">
-      <div>
-        <h4 class="secondary-title">Extraordinario</h4>
-        <p class="convocatoria-date">15 de febrero</p>
+            <p class="convocatoria-desc">
+              Modalidad extraordinaria para perfiles específicos
+            </p>
+
+            <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">Consultar</a-button>
+            </div>
+          </a-card>
+        </div>
       </div>
-
-      <a-tag class="status-tag" color="orange">PRÓXIMAMENTE</a-tag>
     </div>
+  </section>
 
-    <p class="convocatoria-desc">Modalidad extraordinaria para perfiles específicos</p>
-
-    <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">
-        Consultar
-      </a-button>
-    </div>
-  </a-card>
-</div>
-      </div>
+  <!-- MODAL (para detalles por tipo) -->
+    <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"
+    >
+      <h3>{{ detalle.titulo_detalle }}</h3>
+
+      <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>
-  </section>
+  </a-modal>
 </template>
 
 <script setup>
+import { onMounted, ref } from "vue"
+import { useWebAdmisionStore } from "../../store/web"
+
 import {
   FileTextOutlined,
   DollarOutlined,
@@ -153,34 +238,47 @@ import {
   FormOutlined,
 } from "@ant-design/icons-vue"
 
-defineProps({
-  otrasConvocatorias: {
-    type: Array,
-    default: () => [], 
-  },
-})
+const store = useWebAdmisionStore()
 
 const emit = defineEmits(["show-modal", "open-preinscripcion"])
 
-const handleConsultar = (c) => {
+const modalVisible = ref(false)
+const detallesSeleccionados = ref([])
+const tituloModal = ref("")
 
-  if (c && typeof c.onConsultar === "function") {
-    c.onConsultar()
-    return
-  }
-  emit("show-modal", c?.modalKey ? c.modalKey : "detalle")
+onMounted(() => {
+  store.cargarProcesos()
+})
+
+const formatFecha = (fecha) => {
+  if (!fecha) return ""
+  return new Date(fecha).toLocaleDateString("es-PE", {
+    day: "2-digit",
+    month: "short",
+    year: "numeric",
+  })
 }
-</script>
 
-<style scoped>
+const tieneTipo = (tipo) => {
+  return store.procesoPrincipal?.detalles?.some((d) => d.tipo === tipo)
+}
+
+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; 
+  position: relative;
   padding: 40px 0;
   font-family: "Times New Roman", Times, serif;
-  background: #fbfcff; 
-  overflow: hidden;   
+  background: #fbfcff;
+  overflow: hidden;
 }
 
 .convocatorias-modern::before {
@@ -190,8 +288,7 @@ const handleConsultar = (c) => {
   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,
@@ -208,8 +305,13 @@ const handleConsultar = (c) => {
 
   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;
@@ -218,7 +320,6 @@ const handleConsultar = (c) => {
   padding: 0 24px;
 }
 
-
 .section-header {
   text-align: center;
   margin-bottom: 50px;
@@ -251,15 +352,13 @@ const handleConsultar = (c) => {
   border-radius: 999px;
 }
 
-
 .convocatorias-grid {
   display: grid;
-  grid-template-columns: 1fr; 
+  grid-template-columns: 1fr;
   gap: 24px;
   align-items: start;
 }
 
-
 .main-convocatoria-card {
   position: relative;
   border: none;
@@ -283,7 +382,6 @@ const handleConsultar = (c) => {
   font-weight: 700;
 }
 
-
 .main-card-grid {
   display: grid;
   grid-template-columns: 1.2fr 0.8fr;
@@ -298,7 +396,6 @@ const handleConsultar = (c) => {
 .main-card-media {
   display: flex;
   justify-content: flex-end;
-
 }
 
 .convocatoria-image :deep(img) {
@@ -310,7 +407,6 @@ const handleConsultar = (c) => {
   border-radius: 14px;
 }
 
-
 .convocatoria-header {
   display: flex;
   justify-content: space-between;
@@ -361,7 +457,6 @@ const handleConsultar = (c) => {
   font-weight: 700;
 }
 
-
 .action-buttons-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -379,10 +474,17 @@ const handleConsultar = (c) => {
 }
 
 .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 {
@@ -390,14 +492,35 @@ const handleConsultar = (c) => {
   color: #666;
 }
 
-.preinscripcion-btn {
-  background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
-  border: none;
-  height: 52px;
-  font-weight: 700;
+/* fila inferior centrada */
+.preinscripcion-btn-wrap {
+  display: flex;
+  justify-content: center;
+  margin-top: 6px;
+}
+
+/* botón claro estilo AntDV */
+.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);
@@ -440,7 +563,7 @@ const handleConsultar = (c) => {
   }
 
   .secondary-list {
-    grid-template-columns: 1fr; 
+    grid-template-columns: 1fr;
   }
 }
 
@@ -459,4 +582,4 @@ const handleConsultar = (c) => {
     grid-template-columns: 1fr;
   }
 }
-</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 2fe7c3c..7dca6f2 100644
--- a/front/src/components/WebPageSections/NoticiasSection.vue
+++ b/front/src/components/WebPageSections/NoticiasSection.vue
@@ -1,7 +1,9 @@
+<!-- src/components/web/NewsSection.vue -->
 <template>
-  <section class="news-section">
+  <!-- Si no hay noticias, NO renderiza NADA -->
+  <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,29 +14,27 @@
             Entérate de los anuncios, resultados y novedades institucionales
           </a-typography-paragraph>
         </div>
-
-
       </div>
 
       <a-divider class="divider" />
 
       <!-- Grid -->
+       <div v-if="mappedNoticias.length">
       <a-row :gutter="[24, 24]">
         <a-col
-          v-for="noticia in noticias"
+          v-for="noticia in mappedNoticias"
           :key="noticia.id"
           :xs="24"
           :sm="12"
           :lg="8"
         >
-
           <a-badge-ribbon
-            :text="noticia.categoria"
-            :color="noticia.tagColor || 'blue'"
+            :text="noticia.categoria || 'Noticia'"
+            :color="noticia.tagColor"
           >
             <a-card hoverable class="card" :bodyStyle="{ padding: '16px' }">
-              <!-- Cover -->
-              <template #cover>
+              <!-- Cover SOLO si hay imagen -->
+              <template v-if="noticia.imagen" #cover>
                 <div
                   class="cover"
                   :style="{ backgroundImage: `url(${noticia.imagen})` }"
@@ -49,6 +49,12 @@
               </template>
 
               <a-space direction="vertical" size="small" class="content">
+                <!-- Si NO hay imagen, mostramos la fecha aquí -->
+                <div v-if="!noticia.imagen" class="date-inline">
+                  <CalendarOutlined />
+                  <span>{{ noticia.fecha }}</span>
+                </div>
+
                 <a-typography-title
                   :level="4"
                   class="card-title"
@@ -62,39 +68,101 @@
                   :ellipsis="{ rows: 3, tooltip: noticia.descripcion }"
                 />
 
-
                 <div class="actions">
-                  <a-button type="link" class="read-more">
+                  <a-button type="link" class="read-more" @click="handleLeerMas(noticia)">
                     Leer más
                     <ArrowRightOutlined />
                   </a-button>
 
-                  <!-- Tag secundario opcional (si quieres mostrar algo extra)
-                  <a-tag color="default" class="tag-soft">Institucional</a-tag>
-                  -->
+                  <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>
     </div>
   </section>
 </template>
 
 <script setup>
-import { CalendarOutlined, RightOutlined, ArrowRightOutlined } from "@ant-design/icons-vue"
+import { computed, onMounted } from "vue"
+import { CalendarOutlined, ArrowRightOutlined } from "@ant-design/icons-vue"
+import { useNoticiasPublicasStore } from "../../store/noticiasPublicas.store"
 
-defineProps({
-  noticias: {
-    type: Array,
-    default: () => [],
-  },
+const noticiasStore = useNoticiasPublicasStore()
+
+onMounted(() => {
+  // si ya está cargado, no vuelve a pedir
+  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"
+
+    // ✅ SIN imagen por defecto (NO /images/extra.jpg)
+    const imagen =
+      n.imagen_url ||
+      (n.imagen_path ? `http://localhost:8000/storage/${n.imagen_path}` : 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 handleLeerMas = (noticia) => {
+  // aquí tú decides: navegar, abrir modal, etc.
+  // por ahora solo lo dejamos listo para que conectes tu acción
+  console.log("Leer más:", noticia.slug || noticia.id)
+}
+
+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>
-
 .news-section {
   position: relative;
   padding: 88px 0;
@@ -134,59 +202,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: "Times New Roman", Times, serif !important;
-  font-weight: 900;           /* fuerte para título */
+  font-weight: 900;
   color: #111a56;
   letter-spacing: -0.4px;
 }
 
-
 .subtitle {
   margin: 8px 0 0 !important;
   text-align: center;
-  font-family: "Times New Roman", Times, 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: "Times New Roman", Times, 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,12 +254,6 @@ defineProps({
   box-shadow: 0 18px 44px rgba(0, 0, 0, 0.12);
 }
 
-
-.card :deep(.ant-card-cover) {
-  margin: 0;
-}
-
-
 .cover {
   position: relative;
   height: 200px;
@@ -225,7 +271,6 @@ defineProps({
   );
 }
 
-
 .date-pill {
   position: absolute;
   left: 14px;
@@ -243,9 +288,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 +316,6 @@ defineProps({
   font-size: 0.98rem;
 }
 
-
 .actions {
   display: flex;
   justify-content: space-between;
@@ -275,21 +328,14 @@ defineProps({
   font-weight: 900;
 }
 
+.tag-soft {
+  border-radius: 999px;
+  font-weight: 700;
+}
 
 @media (max-width: 768px) {
   .news-section {
     padding: 64px 0;
   }
-
-.header {
-  flex-direction: column;   
-  align-items: center;
-  text-align: center;
-  gap: 10px;
-}
-
-  .btn-all {
-    margin-top: 6px;
-  }
 }
-</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 0ade7ac..fdae7b5 100644
--- a/front/src/components/WebPageSections/ProcessSection.vue
+++ b/front/src/components/WebPageSections/ProcessSection.vue
@@ -3,29 +3,111 @@
   <section class="process-section" aria-labelledby="process-title">
     <div class="section-container">
       <div class="section-header">
-        <h2 id="process-title" class="section-title">Proceso de Admisión 2026</h2>
+        <h2 id="process-title" class="section-title">{{ tituloProceso }}</h2>
         <p class="section-subtitle">
-          Sigue estos pasos para postular al Examen General 2026-I
+          ¿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 title="Preinscripción Virtual" description="20 Oct - 30 Nov" />
-          <a-step title="Inscripción Presencial" description="1 - 5 Dic" />
-          <a-step title="Examen" description="15 Diciembre" />
-          <a-step title="Resultados" description="20 Diciembre" />
-          <a-step title="Control Biométrico Ingresantes" description="8 - 12 Ene" />
-        </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>
@@ -33,22 +115,254 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted } from "vue"
+import { ref, computed, onMounted, onUnmounted } from "vue"
+import { useWebAdmisionStore } from "../../store/web"
 
-const currentStep = 2
+const store = useWebAdmisionStore()
 
+/** Responsive */
 const isMobile = ref(false)
-const checkScreen = () => {
-  isMobile.value = window.innerWidth < 768
-}
+const checkScreen = () => (isMobile.value = window.innerWidth < 768)
+
+/** reloj (para refrescar estados “activo hoy”) */
+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)
+})
+
+/** Helpers fecha */
+const toDate = (value) => {
+  if (!value) return null
+  const d = new Date(value)
+  return isNaN(d.getTime()) ? null : d
+}
+
+const startOfDay = (d) => {
+  const x = new Date(d)
+  x.setHours(0, 0, 0, 0)
+  return x
+}
+
+const endOfDay = (d) => {
+  const x = new Date(d)
+  x.setHours(23, 59, 59, 999)
+  return x
+}
+
+const inRange = (n, start, end) => {
+  if (!start || !end) return false
+  return n >= startOfDay(start) && n <= endOfDay(end)
+}
+
+const sameDay = (a, b) =>
+  a.getFullYear() === b.getFullYear() &&
+  a.getMonth() === b.getMonth() &&
+  a.getDate() === b.getDate()
+
+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"
+}
+
+/** Título */
+const tituloProceso = computed(() => {
+  const p = store.procesoPrincipal
+  if (!p) return "Proceso de Admisión"
+  return p.titulo || p.tipo_proceso || "Proceso de Admisión"
+})
+
+/**
+ * REGLA IMPORTANTE:
+ * Preinscripción dura hasta el fin de inscripción:
+ * inicio_preinscripcion -> fin_inscripcion
+ */
+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)
+
+  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
+})
+
+/** Status por step: permite que PRE e INS sean "process" a la vez */
+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 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"
+}
+
+/** Poner un “🟢” cuando esté activo */
+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),
+    },
+  ]
+})
+
+/** “Qué hacer hoy” (claro para jóvenes) */
+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, guarda tu constancia o captura y revisa los Requisitos del proceso.")
+  }
+
+  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 por Admisión.")
+  }
+
+  if (a.exa) {
+    tareas.push("📝 Hoy es el Examen: llega temprano, lleva tu DNI y sigue las indicaciones del reglamento.")
+  }
+
+  if (a.res) {
+    tareas.push("📣 Hoy salen Resultados: revisa el enlace oficial y guarda una captura/constancia.")
+  }
+
+  if (a.bio) {
+    tareas.push("✅ Si ingresaste: acércate al control biométrico dentro de las fechas indicadas.")
+  }
+
+  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 tareas
 })
 </script>
 
@@ -85,7 +399,6 @@ onUnmounted(() => {
   line-height: 1.4;
 }
 
-
 .process-card {
   border: 1px solid #e5e7eb;
   border-radius: 14px;
@@ -94,32 +407,30 @@ onUnmounted(() => {
   background: #fff;
 }
 
-
 .modern-steps {
   padding: 8px 8px;
 }
 
 .modern-steps :deep(.ant-steps-item-title) {
-  white-space: normal !important;  
-  overflow: visible !important;    
-  text-overflow: clip !important;   
+  white-space: normal !important;
+  overflow: visible !important;
+  text-overflow: clip !important;
   max-width: none !important;
 }
 
 .modern-steps :deep(.ant-steps-item-content) {
-  min-width: 0; 
+  min-width: 0;
   width: 100%;
 }
 
 .modern-steps :deep(.ant-steps-item-container) {
-  align-items: flex-start; 
+  align-items: flex-start;
 }
 
 .modern-steps :deep(.ant-steps-item) {
-  flex: 1 1 0; 
+  flex: 1 1 0;
 }
 
-
 .modern-steps :deep(.ant-steps-item-title) {
   font-size: 0.95rem;
   font-weight: 700;
@@ -134,7 +445,6 @@ onUnmounted(() => {
   line-height: 1.25;
 }
 
-
 .modern-steps :deep(.ant-steps-item-icon) {
   width: 30px;
   height: 30px;
@@ -142,19 +452,16 @@ onUnmounted(() => {
   font-size: 13px;
 }
 
-
 .modern-steps :deep(.ant-steps-item-tail::after) {
   height: 2px;
   background: #dfe6e9;
 }
 
-
 .modern-steps :deep(.ant-steps-item-process .ant-steps-item-icon) {
   background-color: #1e3a8a;
   border-color: #1e3a8a;
 }
 
-
 .modern-steps :deep(.ant-steps-item-finish .ant-steps-item-icon > .ant-steps-icon) {
   color: #1e3a8a;
 }
@@ -162,7 +469,6 @@ onUnmounted(() => {
   border-color: #1e3a8a;
 }
 
-
 .process-note {
   display: flex;
   align-items: center;
@@ -180,7 +486,107 @@ onUnmounted(() => {
   flex-shrink: 0;
 }
 
+/* ====== Guía rápida ====== */
+.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;
+}
+
+/* Responsive */
 @media (max-width: 992px) {
   .section-title {
     font-size: 1.85rem;
@@ -190,28 +596,26 @@ onUnmounted(() => {
   }
 }
 
-
 @media (max-width: 768px) {
   .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>
\ 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..ccbe066
--- /dev/null
+++ b/front/src/components/WebPageSections/navbarcontent/Cepreuna.vue
@@ -0,0 +1,131 @@
+<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 (Capítulo VI — Sub-capítulo I)
+        </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">Asignación de vacantes</h4>
+          <p class="text">
+            Las vacantes se cubren de acuerdo con el puntaje alcanzado, hasta completar el número ofertado
+            por los programas de estudio, según lo dispuesto por el reglamento.
+          </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 con la debida anticipación.
+            </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..f76a892
--- /dev/null
+++ b/front/src/components/WebPageSections/navbarcontent/Extraordinario.vue
@@ -0,0 +1,148 @@
+<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 (Capítulo VI — Sub-capítulo II)
+        </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-card class="soft-card" size="small">
+          <h4 class="subheading">Asignación de vacantes</h4>
+          <p class="text">
+            Las vacantes se cubren de acuerdo con el puntaje alcanzado hasta completar el número ofertado por los
+            programas de estudio, conforme a lo establecido en el reglamento.
+          </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..57a62d4
--- /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'
+import Nabvar from '../../nabvar.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 865fb09..c880af9 100644
--- a/front/src/components/nabvar.vue
+++ b/front/src/components/nabvar.vue
@@ -149,9 +149,9 @@ const navItems = computed(() => [
     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" },
@@ -171,9 +171,9 @@ const routesByKey = {
   sociales: "/programas/sociales",
   procesos: "/procesos",
   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 d5fb3ac..60198d2 100644
--- a/front/src/router/index.js
+++ b/front/src/router/index.js
@@ -1,16 +1,16 @@
 // 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 { useUserStore } from '../store/user'
 import { useAuthStore as usePostulanteStore } from '../store/postulanteStore'
 
 const routes = [
 
-  { path: '/', component: Hello },
+  { path: '/', component: WebPage },
 
   { path: '/login', component: Login, meta: { guest: true } },
-
+  
   {
     path: '/login-postulante',
     name: 'login-postulante',
@@ -18,6 +18,29 @@ const routes = [
     meta: { guest: true },
   },
 
+  {
+    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',
@@ -138,7 +161,14 @@ const routes = [
         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 28c0c3c..1a3314e 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,33 +8,32 @@ export const useExamenStore = defineStore('examenStore', {
     examenActual: null,
     preguntas: [],
     cargando: false,
+    calificando: false,   // ✅ nuevo
+    resultado: null,      // ✅ nuevo (para guardar resultados_examenes)
     error: null,
   }),
+
   actions: {
-  async fetchProcesos() {
-    try {
-      this.cargando = true
-      const { data } = await api.get('/examen/procesos')
-
-      // ✅ normaliza
-      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 {
-      this.cargando = false
-    }
-  },
+    async fetchProcesos() {
+      try {
+        this.cargando = true
+        const { data } = await api.get('/examen/procesos')
 
+        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 {
+        this.cargando = false
+      }
+    },
 
     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
@@ -59,7 +57,6 @@ export const useExamenStore = defineStore('examenStore', {
       }
     },
 
-
     async fetchExamenActual() {
       try {
         this.cargando = true
@@ -100,36 +97,78 @@ export const useExamenStore = defineStore('examenStore', {
       }
     },
 
+    async responderPregunta(preguntaId, respuesta) {
+      try {
+        const { data } = await api.post(`/examen/pregunta/${preguntaId}/responder`, { respuesta })
 
-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 && data.success) {
-      this.preguntas[index].respuesta = respuesta
-      this.preguntas[index].es_correcta = data.correcta   // 1, 0 o 2
-      this.preguntas[index].puntaje = data.puntaje
-    }
+        const index = this.preguntas.findIndex(p => p.id === preguntaId)
 
-    return data
+        if (index !== -1 && data.success) {
+          this.preguntas[index].respuesta = respuesta
+          this.preguntas[index].es_correcta = data.correcta // 1, 0 o 2
+          this.preguntas[index].puntaje = data.puntaje
+        }
 
-  } catch (e) {
-    this.error = e.response?.data?.message || e.message
-    return { success: false, message: this.error }
-  }
-},
+        return data
+      } catch (e) {
+        this.error = e.response?.data?.message || e.message
+        return { success: false, message: this.error }
+      }
+    },
 
+    // ✅ NUEVO: Calificar examen
+    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
@@ -143,6 +182,8 @@ async responderPregunta(preguntaId, respuesta) {
       this.examenActual = null
       this.preguntas = []
       this.cargando = false
+      this.calificando = false   // ✅ nuevo
+      this.resultado = null      // ✅ nuevo
       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..a551a48
--- /dev/null
+++ b/front/src/store/noticiasPublicas.store.js
@@ -0,0 +1,50 @@
+// src/store/noticiasPublicas.store.js
+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 {
+        // ✅ usa TU ruta real
+        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
+      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/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/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/layout/layout.vue b/front/src/views/administrador/layout/layout.vue
index 765ae5d..d546cc4 100644
--- a/front/src/views/administrador/layout/layout.vue
+++ b/front/src/views/administrador/layout/layout.vue
@@ -209,7 +209,7 @@
               <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">
@@ -218,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>
             
@@ -425,7 +431,7 @@ const handleMenuSelect = ({ key }) => {
     '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' },
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 6e9ddf4..cfb807a 100644
--- a/front/src/views/postulante/Dashboard.vue
+++ b/front/src/views/postulante/Dashboard.vue
@@ -1,340 +1,200 @@
-
+<!-- DashboardPostulante.vue (test + procesos activos) -->
 <template>
   <a-spin :spinning="loading">
 
-        <div class="topbar">
-          <div class="topbarLeft">
-            <div class="hello">Bienvenido, {{ authStore.userName}}</div>
-            <div class="sub">DNI: {{ authStore.userDni || 'No registrado' }}</div>
-          </div>
-
-          <div class="topbarRight">
-            <div class="statusLine">
-              <span class="label">Estado:</span>
-              <a-badge :status="eligibilityUi.badge" :text="eligibilityUi.text" />
+      <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>
 
-            <a-button class="btnTop" @click="fetchDashboard" :loading="loading" block>
-              Actualizar
-            </a-button>
           </div>
-        </div>
-
-        <a-divider />
 
-        <div class="testBox">
-          <div class="testHead">
-            <div class="testHeadLeft">
-              <div class="testTitle">Tu test de admisión</div>
-              <div class="testSub">
-                Responde con calma. Busca un lugar tranquilo. (10 preguntas • 10 min aprox.)
+          <a-divider class="softDivider" />
+
+          <!-- TEST -->
+          <a-card :bordered="false" class="testBox">
+
+
+            <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>
+
+                <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>
-            </div>
 
-            <div class="testHeadRight">
-              <a-button
-                type="primary"
-                size="large"
-                class="btnTest"
-                :disabled="!canStartTest"
-                block
-                @click="onStartTest"
-              >
-                {{ testCtaText }}
-              </a-button>
-              <div class="microHelp" v-if="!canStartTest">No disponible por el momento.</div>
-            </div>
-          </div>
+              <div class="testHeadRight">
+                <a-button type="primary" size="large" class="btnTest" :disabled="!canGoTest" @click="goToTest" block>
+                  Ir al test
+                </a-button>
 
-          <div class="testInfoGrid">
-            <div class="infoItem">
-              <div class="infoK">Estado</div>
-              <div class="infoV">
-                <a-badge :status="testStatusUi.badge" :text="testStatusUi.text" />
+                <div class="microHelp" v-if="!canGoTest">Aún no tienes un test asignado.</div>
               </div>
             </div>
+          </a-card>
 
-            <div class="infoItem">
-              <div class="infoK">Tiempo restante</div>
-              <div class="infoV">
-                <span class="strong" :class="{ warn: expiresSoon && timeRemainingText !== 'Vencido' }">
-                  {{ timeRemainingText }}
-                </span>
-                <span v-if="expiresSoon && timeRemainingText !== 'Vencido'" class="hintInline">
-                  (vence pronto)
-                </span>
-              </div>
-            </div>
+          <a-divider class="softDivider" />
 
-            <div class="infoItem">
-              <div class="infoK">Disponible desde</div>
-              <div class="infoV">
-                {{ state.eligibility.testAvailableAt ? fmtDate(state.eligibility.testAvailableAt) : "—" }}
+          <!-- PROCESOS ACTIVOS -->
+          
+            <div class="sectionHead">
+              <div>
+                <div class="sectionTitle">Procesos activos</div>
+                <div class="sectionSub">Revisa los procesos habilitados y postula cuando corresponda.</div>
               </div>
-            </div>
 
-            <div class="infoItem">
-              <div class="infoK">Fecha límite</div>
-              <div class="infoV">
-                {{ state.eligibility.testExpiresAt ? fmtDate(state.eligibility.testExpiresAt) : "—" }}
+              <div class="sectionRight">
+                <a-badge count="Nuevo" class="new-badge" />
               </div>
             </div>
-          </div>
-
-          <div class="mt12">
-            <a-alert
-              v-if="state.eligibility.testStatus === 'COMPLETADO'"
-              type="success"
-              show-icon
-              message="¡Listo! Ya completaste el test."
-              description="Ahora puedes revisar los procesos disponibles."
-            />
-            <a-alert
-              v-else-if="!state.eligibility.hasTestAssigned"
-              type="info"
-              show-icon
-              message="Aún no tienes un test asignado."
-              description="Vuelve a revisar en unos minutos."
-            />
-            <a-alert
-              v-else
-              type="info"
-              show-icon
-              message="Importante"
-              description="Al iniciar o continuar, el tiempo puede comenzar a correr según la configuración del proceso."
-            />
-          </div>
-
-          <a-alert
-            v-if="!state.eligibility.isEligibleToApply && state.eligibility.reasons?.length"
-            type="warning"
-            show-icon
-            message="Requisitos pendientes"
-            class="mt12"
-          >
-            <template #description>
-              <ul class="reasons">
-                <li v-for="(r, idx) in state.eligibility.reasons" :key="idx">{{ r }}</li>
-              </ul>
-            </template>
-          </a-alert>
-        </div>
-
-        <a-divider />
-
-
-
-        <a-divider />
 
-        <!-- Procesos -->
-        <div class="section">
-          <div class="sectionHead">
-            <div>
-              <div class="sectionTitle">Procesos disponibles</div>
-              <div class="sectionSub">Revisa fechas y postula cuando esté habilitado.</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>
 
-          <div class="tableWrap mt12">
-            <a-table
-              :columns="processColumns"
-              :data-source="state.availableProcesses"
-              row-key="id"
-              :pagination="{ pageSize: 6 }"
-              :scroll="{ x: 720 }"
-            >
-              <template #bodyCell="{ column, record }">
-                <template v-if="column.key === 'startDate'">
-                  {{ fmtDate(record.startDate) }}
-                </template>
-
-                <template v-else-if="column.key === 'endDate'">
-                  {{ fmtDate(record.endDate) }}
-                </template>
-
-                <template v-else-if="column.key === 'status'">
-                  <a-tag class="chip">{{ record.status }}</a-tag>
-                </template>
-
-                <template v-else-if="column.key === 'actions'">
-                  <div class="actions">
-                    <a-button size="small" block @click="onViewProcess(record)">Ver</a-button>
-                    <a-button size="small" type="primary" block :disabled="!record.canApply" @click="onApply(record)">
-                      Postular
-                    </a-button>
-                  </div>
-
-                  <div v-if="!record.canApply" class="microHelp">Este proceso aún no permite postular.</div>
-                </template>
-              </template>
-            </a-table>
-          </div>
+          <!-- Mensaje cuando no hay procesos -->
+          <a-empty
+            v-if="!loading && state.processes.length === 0"
+            class="mt12"
+            description="No hay procesos activos por el momento."
+          />
         </div>
-
-        <a-divider />
   </a-spin>
 </template>
 
 <script setup>
-import { computed, onMounted, reactive, ref, onBeforeUnmount } from "vue";
-import { message, Modal } from "ant-design-vue";
-import { useAuthStore } from '../../store/postulanteStore'
-const authStore = useAuthStore()
-
-const loading = ref(false);
-const nowTick = ref(Date.now());
-let timer = null;
-
-const state = reactive({
-  applicant: { id: null, nombres: "Postulante", documento: "—" },
-  applications: [],
-  eligibility: {
-    isEligibleToApply: false,
-    reasons: [],
-    hasTestAssigned: true,
-    testStatus: "PENDIENTE", 
-    testAvailableAt: null,
-    testExpiresAt: null,
-    testUrl: null,
-  },
-  availableProcesses: [],
-});
-
-
-function parseDate(val) {
-  if (!val) return null;
-  const iso = String(val).includes("T") ? String(val) : String(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`;
-}
-function fmtDate(val) {
-  const d = parseDate(val);
-  if (!d) return val || "—";
-  const dd = String(d.getDate()).padStart(2, "0");
-  const mm = String(d.getMonth() + 1).padStart(2, "0");
-  const yyyy = d.getFullYear();
-  const hh = String(d.getHours()).padStart(2, "0");
-  const mi = String(d.getMinutes()).padStart(2, "0");
-  return `${dd}/${mm}/${yyyy} ${hh}:${mi}`;
-}
-
-
-const eligibilityUi = computed(() => {
-  return state.eligibility.isEligibleToApply
-    ? { badge: "success", text: "Apto para postular" }
-    : { badge: "error", text: "No apto para postular" };
-});
+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 testStatusUi = computed(() => {
-  const s = state.eligibility.testStatus;
-  if (s === "EN_PROGRESO") return { badge: "processing", text: "En progreso" };
-  if (s === "COMPLETADO") return { badge: "success", text: "Completado" };
-  if (s === "NO_DISPONIBLE") return { badge: "default", text: "No disponible" };
-  return { badge: "warning", text: "Pendiente" };
-});
-
-const testCtaText = computed(() => {
-  const s = state.eligibility.testStatus;
-  if (s === "EN_PROGRESO") return "Continuar test";
-  if (s === "COMPLETADO") return "Ver estado";
-  if (s === "NO_DISPONIBLE") return "No disponible";
-  return "Iniciar test";
-});
+// ✅ Ajusta a tus rutas reales
+const ROUTE_TEST_PANEL = { name: "PanelTest" }; // tu panel del test
+const ROUTE_PROCESS_DETAIL = (id) => ({ name: "ProcesoDetalle", params: { id } }); // opcional
 
-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;
-});
-
-const testExpireMs = computed(() => {
-  const d = parseDate(state.eligibility.testExpiresAt);
-  if (!d) return null;
-  return d.getTime() - nowTick.value;
-});
+const router = useRouter();
+const authStore = useAuthStore();
 
-const expiresSoon = computed(() => {
-  const ms = testExpireMs.value;
-  return ms !== null && ms > 0 && ms <= 24 * 60 * 60 * 1000;
-});
+const loading = ref(false);
 
-const timeRemainingText = computed(() => {
-  const ms = testExpireMs.value;
-  if (ms === null) return "—";
-  if (ms <= 0) return "Vencido";
-  return msToHuman(ms);
+const state = reactive({
+  test: { hasAssigned: true }, // viene de tu backend/store
+  processes: [], // procesos activos
 });
 
+const canGoTest = computed(() => !!state.test.hasAssigned);
 
 const processColumns = computed(() => [
   { title: "Proceso", dataIndex: "name", key: "name", ellipsis: true },
-  { title: "Inicio", dataIndex: "startDate", key: "startDate", responsive: ["md"] },
-  { title: "Fin", dataIndex: "endDate", key: "endDate", responsive: ["md"] },
-  { title: "Estado", dataIndex: "status", key: "status", responsive: ["sm"] },
-  { title: "Vacantes", dataIndex: "vacancies", key: "vacancies", responsive: ["sm"] },
+  { title: "Estado", key: "status", responsive: ["sm"] },
+  { title: "Aptitud", key: "eligibility", responsive: ["md"] },
   { title: "Acciones", key: "actions" },
 ]);
 
-
+// ✅ Mock: reemplaza por tu store / api real
 const api = {
   async getDashboard() {
     return new Promise((resolve) => {
       setTimeout(() => {
         resolve({
-         
-          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: "portal-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 {
@@ -342,26 +202,26 @@ 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?",
+    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();
-        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) {
+  // router.push(ROUTE_PROCESS_DETAIL(process.id));
+  message.info(`Abrir detalle del proceso: ${process.name}`);
+}
+
+function onApply(process) {
   if (!process.canApply) return;
 
   Modal.confirm({
@@ -381,36 +241,70 @@ async function onApply(process) {
   });
 }
 
-function onViewProcess(process) {
-  message.info(`Abrir detalle del proceso: ${process.name}`);
-}
-
-onMounted(async () => {
-  await fetchDashboard();
-  timer = setInterval(() => (nowTick.value = Date.now()), 1000);
-});
-
-onBeforeUnmount(() => {
-  if (timer) clearInterval(timer);
-});
+onMounted(fetchDashboard);
 </script>
 
-
 <style scoped>
+/* =========================
+   BASE estilo Convocatorias
+   ========================= */
+.dashboard-modern {
+  position: relative;
+  padding: 40px 0;
+  font-family: "Times New Roman", Times, serif;
+  background: #fbfcff;
+  overflow: hidden;
+}
+
+.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;
+}
 
-
+/* Layout container */
 .page {
   width: 100%;
-  padding: 12px;
-}
-
-.pageCard {
   max-width: 1120px;
   margin: 0 auto;
-  border-radius: 14px;
+  padding: 0;
 }
 
-/* Header */
+/* Helpers */
+.mt12 { margin-top: 12px; }
+.microHelp { font-size: 0.95rem; color: #666; margin-top: 6px; }
+.softDivider { margin: 18px 0; }
+
+/* =========================
+   Topbar
+   ========================= */
 .topbar {
   display: flex;
   justify-content: space-between;
@@ -420,151 +314,119 @@ onBeforeUnmount(() => {
 }
 
 .hello {
-  font-size: 24px;
-  font-weight: 800;
-  color: var(--ant-colorTextHeading, #111827);
+  font-size: 2rem;
+  font-weight: 700;
+  color: #0d1b52;
+  margin: 0;
 }
+
 .sub {
-  margin-top: 4px;
-  font-size: 12px;
-  color: var(--ant-colorTextSecondary, #6b7280);
+  margin-top: 6px;
+  font-size: 1rem;
+  color: #666;
 }
 
 .topbarRight {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  align-items: flex-end;
   min-width: 260px;
-}
-.statusLine {
   display: flex;
-  gap: 8px;
-  align-items: center;
-  flex-wrap: wrap;
-}
-.label {
-  font-size: 12px;
-  color: var(--ant-colorTextSecondary, #6b7280);
+  justify-content: flex-end;
 }
+
 .btnTop {
   min-width: 180px;
+  height: 46px;
+  border-radius: 10px;
+  font-weight: 700;
 }
 
-/* TEST destacado (sin degradado) */
+/* =========================
+   Test destacado (card principal)
+   ========================= */
 .testBox {
-  border: 2px solid var(--ant-colorPrimary, #1677ff);
-  background: var(--ant-colorBgContainer, #fff);
-  border-radius: 12px;
-  padding: 16px;
+  position: relative;
+  border: none;
+  border-radius: 16px;
+  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.08);
+  background: #fff;
+}
+
+.testBox :deep(.ant-card-body) {
+  padding: 28px;
+}
+
+/* Badge tipo convocatorias */
+.cardBadge {
+  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;
 }
 
 .testHead {
   display: flex;
   justify-content: space-between;
-  gap: 12px;
-  flex-wrap: wrap; /* ✅ clave para móvil */
+  gap: 16px;
+  flex-wrap: wrap;
   align-items: flex-start;
 }
 
 .testTitle {
-  font-size: 20px;
-  font-weight: 900;
-  color: var(--ant-colorTextHeading, #111827);
+  font-size: 1.55rem;
+  font-weight: 700;
+  color: #1a237e;
 }
+
 .testSub {
-  margin-top: 4px;
-  font-size: 12px;
-  color: var(--ant-colorTextSecondary, #6b7280);
-  line-height: 1.4;
+  margin-top: 8px;
+  font-size: 1rem;
+  color: #666;
+  line-height: 1.55;
+  max-width: 760px;
 }
 
 .testHeadRight {
   min-width: 260px;
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 8px;
   align-items: flex-end;
 }
 
 .btnTest {
-  height: 44px;
-  border-radius: 10px;
-  font-weight: 800;
+  height: 52px;
+  border-radius: 12px;
+  font-weight: 700;
+  background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
+  border: none;
 }
 
-.testInfoGrid {
-  margin-top: 12px;
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+/* bullets */
+.bulletRow {
+  display: flex;
   gap: 10px;
+  align-items: flex-start;
+  font-size: 1rem;
+  color: #666;
+  line-height: 1.55;
 }
 
-.infoItem {
-  border: 1px solid var(--ant-colorBorderSecondary, rgba(0,0,0,.06));
-  background: var(--ant-colorFillAlter, #fafafa);
-  border-radius: 10px;
-  padding: 10px 12px;
-  min-width: 0;
-}
-.infoK {
-  font-size: 12px;
-  color: var(--ant-colorTextSecondary, #6b7280);
-}
-.infoV {
-  margin-top: 4px;
-  font-weight: 800;
-  color: var(--ant-colorText, #111827);
-  word-break: break-word;
-}
-
-.strong { font-weight: 900; }
-.warn { color: var(--ant-colorTextHeading, #111827); }
-.hintInline {
-  margin-left: 6px;
-  font-size: 12px;
-  color: var(--ant-colorTextSecondary, #6b7280);
-}
-
-.reasons {
-  margin: 8px 0 0 18px;
-  line-height: 1.7;
-}
-
-.summaryBox {
-  border: 1px solid var(--ant-colorBorderSecondary, rgba(0,0,0,.06));
-  background: var(--ant-colorFillAlter, #fafafa);
-  border-radius: 12px;
-  padding: 14px;
-}
-.summaryTitle {
-  font-weight: 800;
-  color: var(--ant-colorTextHeading, #111827);
-  margin-bottom: 10px;
-}
-.summaryGrid {
-  display: grid;
-  grid-template-columns: 1fr 2fr;
-  gap: 12px;
-}
-.summaryK {
-  font-size: 12px;
-  color: var(--ant-colorTextSecondary, #6b7280);
-}
-.summaryV {
-  font-weight: 900;
-  color: var(--ant-colorTextHeading, #111827);
-}
-.chips {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-.chip {
+.dot {
+  width: 8px;
+  height: 8px;
   border-radius: 999px;
+  background: #1a237e;
+  margin-top: 9px;
+  flex: 0 0 auto;
 }
 
-/* Secciones */
+/* =========================
+   Section header
+   ========================= */
 .sectionHead {
   display: flex;
   justify-content: space-between;
@@ -572,93 +434,136 @@ onBeforeUnmount(() => {
   flex-wrap: wrap;
   align-items: flex-start;
 }
+
+.sectionRight { margin-top: 4px; }
+
 .sectionTitle {
-  font-size: 20px;
-  font-weight: 800;
-  color: var(--ant-colorTextHeading, #111827);
+  font-size: 1.55rem;
+  font-weight: 700;
+  color: #0d1b52;
+  margin: 0;
 }
+
 .sectionSub {
-  margin-top: 4px;
-  font-size: 12px;
-  color: var(--ant-colorTextSecondary, #6b7280);
+  margin-top: 8px;
+  font-size: 1rem;
+  color: #666;
+  line-height: 1.55;
 }
 
-/* Tabla: evita romper en móvil */
+/* 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;
+}
+
+/* =========================
+   Table "card look"
+   ========================= */
 .tableWrap {
   width: 100%;
   overflow-x: auto;
+  border-radius: 16px;
+  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.08);
+  background: #fff;
+  padding: 8px;
 }
-:deep(.ant-table-container) {
+
+:deep(.modernTable .ant-table) {
+  background: transparent;
+}
+
+:deep(.modernTable .ant-table-container) {
   overflow-x: auto;
+  border-radius: 12px;
+}
+
+:deep(.modernTable .ant-table-thead > tr > th) {
+  background: rgba(13, 27, 82, 0.03);
+  color: #0d1b52;
+  font-weight: 700;
+}
+
+:deep(.modernTable .ant-table-tbody > tr > td) {
+  color: #666;
 }
 
-/* Acciones: en móvil se apilan */
+/* Status pill estilo convocatorias */
+.status-tag {
+  font-weight: 700;
+  padding: 4px 12px;
+  border-radius: 999px;
+  white-space: nowrap;
+}
+
+/* Actions */
 .actions {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 8px;
 }
-.microHelp {
-  margin-top: 6px;
-  font-size: 12px;
-  color: var(--ant-colorTextSecondary, #6b7280);
-}
 
-.listItem {
-  padding-left: 0;
-  padding-right: 0;
-}
-.listTitle {
-  display: flex;
-  justify-content: space-between;
-  gap: 10px;
-  flex-wrap: wrap;
-  align-items: center;
-}
-.listName {
+.actionBtn {
+  border-radius: 10px;
+  height: 38px;
   font-weight: 700;
 }
-.muted {
-  color: var(--ant-colorTextSecondary, #6b7280);
-}
 
-.mt12 { margin-top: 12px; }
+.actionBtnPrimary {
+  border-radius: 10px;
+  height: 38px;
+  font-weight: 700;
+}
 
-/* ✅ Breakpoints reales */
+/* Responsive */
 @media (max-width: 768px) {
-  .page { padding: 8px; }
-
-  .topbarRight {
-    width: 100%;
-    min-width: 0;
-    align-items: stretch;
+.hide-mobile{
+    display: none !important;
   }
-  .btnTop {
-    width: 100%;
-    min-width: 0;
+  /* ✅ Quita el padding superior del wrapper (era 40px) */
+  .test-modern{
+    padding-top: 0 !important;
+    padding-bottom: 24px; /* opcional */
   }
 
-  .testHeadRight {
-    width: 100%;
-    min-width: 0;
-    align-items: stretch;
+  /* ✅ Quita padding lateral del container para que sea edge-to-edge */
+  .section-container{
+    max-width: none;
+    padding: 0 !important;
+    margin: 0 !important;
   }
 
-  .testInfoGrid {
-    grid-template-columns: 1fr; /* ✅ cards info en columna */
+  /* ✅ Card principal a todo el ancho y pegado arriba */
+  .hero{
+    grid-template-columns: 1fr;
+    width: 100%;
+    margin: 0 !important;
+    border-radius: 0 !important;
+
+    /* importante: sin “espacio arriba” */
+    padding: 14px 16px 18px !important;
   }
 
-  .summaryGrid {
-    grid-template-columns: 1fr; /* ✅ resumen en columna */
+  /* ✅ Asegura que el primer texto no empuje hacia abajo */
+  .heroKicker{ margin-top: 0 !important; }
+  .heroTitle{ margin-top: 6px !important; }
+  .heroText{ margin-top: 8px !important; }
+
+  /* Para que la sección “Tu camino” no se pegue a los bordes */
+  .section{
+    padding: 0 16px;
   }
 
-  .actions {
-    grid-template-columns: 1fr; /* ✅ botones uno debajo del otro */
+  /* Facts */
+  .heroFacts{
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 
-@media (max-width: 480px) {
-  .testBox { padding: 12px; }
-  .testTitle { font-size: 16px; }
+@media (max-width: 576px){
+  .heroFacts{
+    grid-template-columns: 1fr;
+  }
 }
 </style>
diff --git a/front/src/views/postulante/MisProcesos.vue b/front/src/views/postulante/MisProcesos.vue
index e5db0ea..1530c29 100644
--- a/front/src/views/postulante/MisProcesos.vue
+++ b/front/src/views/postulante/MisProcesos.vue
@@ -210,9 +210,11 @@ onBeforeUnmount(() => {
   min-width: 240px;
 }
 .title {
-  font-weight: 900;
-  color: var(--ant-colorTextHeading, #111827);
-  font-size: 16px;
+  margin: 0;
+  font-size: 1.85rem;
+  font-weight: 700;
+  color: #0d1b52;
+  line-height: 1.15;
 }
 .subtitle {
   margin-top: 4px;
diff --git a/front/src/views/postulante/Pagos.vue b/front/src/views/postulante/Pagos.vue
index d67b8b0..69f6ccd 100644
--- a/front/src/views/postulante/Pagos.vue
+++ b/front/src/views/postulante/Pagos.vue
@@ -253,9 +253,11 @@ onBeforeUnmount(() => {
   min-width: 240px;
 }
 .title {
-  font-weight: 900;
-  color: var(--ant-colorTextHeading, #111827);
-  font-size: 16px;
+  margin: 0;
+  font-size: 1.85rem;
+  font-weight: 700;
+  color: #0d1b52;
+  line-height: 1.15;
 }
 .subtitle {
   margin-top: 4px;
diff --git a/front/src/views/postulante/PortalView.vue b/front/src/views/postulante/PortalView.vue
index 3cd041e..73e31b1 100644
--- a/front/src/views/postulante/PortalView.vue
+++ b/front/src/views/postulante/PortalView.vue
@@ -55,13 +55,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" />
 
@@ -306,6 +299,8 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
+
+
 /* Tipografía institucional */
 .portal-layout,
 .portal-layout * {
@@ -665,7 +660,34 @@ 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 ===== */
diff --git a/front/src/views/postulante/PreguntasExamen.vue b/front/src/views/postulante/PreguntasExamen.vue
index ea8bf70..f366b57 100644
--- a/front/src/views/postulante/PreguntasExamen.vue
+++ b/front/src/views/postulante/PreguntasExamen.vue
@@ -65,37 +65,45 @@
       </div>
 
       <!-- Enunciado -->
-      <div class="enunciado" v-html="preguntaActual.enunciado"></div>
+
+      <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>
+
 
       <!-- Respuestas -->
       <div class="answer">
         <!-- Opciones -->
-        <div v-if="tieneOpciones(preguntaActual)">
-          <a-radio-group
-            v-model:value="preguntaActual.respuestaSeleccionada"
-            :disabled="preguntaActual.estado === 'respondida' || guardando || finalizando"
-            class="radio-group"
-          >
-            <a-space direction="vertical" style="width: 100%">
-              <a-radio
-                v-for="op in preguntaActual.opcionesOrdenadas"
-                :key="op.key"
-                :value="op.key.toString()"
-                class="opt"
-              >
-                <span class="optKey">{{ getLetraOpcion(op.key) }}.</span>
-                <span class="optText" v-html="op.texto"></span>
-              </a-radio>
-            </a-space>
-          </a-radio-group>
-        </div>
+      <div v-if="tieneOpciones(preguntaActual)">
+        <a-radio-group
+          v-model:value="preguntaActual.respuestaSeleccionada"
+          :disabled="preguntaActual.estado === 'respondida' || guardando || finalizando"
+          class="radio-group"
+        >
+          <a-space direction="vertical" style="width: 100%">
+            <a-radio
+              v-for="op in preguntaActual.opcionesOrdenadas"
+              :key="op.key"
+              :value="op.key.toString()"
+              class="opt"
+            >
+              <span class="optKey">{{ getLetraOpcion(op.key) }})</span>
+              <span class="optText">
+                <MarkdownLatex :content="op.texto" />
+              </span>
+            </a-radio>
+          </a-space>
+        </a-radio-group>
+      </div>
+
 
         <!-- Abierta -->
         <div v-else>
@@ -405,10 +413,10 @@
 
 
 <script setup>
-import { ref, computed, onMounted, onBeforeUnmount, watch } from "vue";
+import { ref, computed, onMounted, onBeforeUnmount, watch, h  } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useExamenStore } from "../../store/examen.store";
-import { message, Modal } from "ant-design-vue";
+import { message, Modal,Spin } from "ant-design-vue";
 
 const route = useRoute();
 const router = useRouter();
@@ -423,7 +431,7 @@ 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) {
@@ -561,35 +569,88 @@ const siguienteAccion = async () => {
   }
 };
 
-/* FINALIZAR */
+
+
 const finalizarExamen = async () => {
-  const examenId = route.params.examenId;
+  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" } },
+      })
+
+      setTimeout(() => {
+        modal.destroy()
+        router.push({ name: "PanelResultados", params: { examenId } })
+      }, 1200)
+
+      return
+    }
+
+    // ❌ 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" } },
+    })
+    setTimeout(() => modal.destroy(), 2000)
+  } finally {
+    // evita doble click mientras “califica”
+    setTimeout(() => {
+      finalizando.value = false
+    }, 5000)
+  }
+}
 
-  Modal.confirm({
-    title: "Finalizar examen",
-    content: "¿Confirmas finalizar? Luego no podrás modificar respuestas.",
-    okText: "Finalizar",
-    cancelText: "Cancelar",
-    onOk: async () => {
-      try {
-        finalizando.value = true;
-        const r = await examenStore.finalizarExamen(examenId);
-
-        if (r?.success) {
-          message.success("Examen finalizado");
-          router.push({ name: "PanelResultados", params: { examenId } });
-        } else {
-          message.error(r?.message || "No se pudo finalizar");
-        }
-      } catch (e) {
-        console.error(e);
-        message.error("Error al finalizar");
-      } finally {
-        finalizando.value = false;
-      }
-    },
-  });
-};
 
 /* TIMER */
 const finalizarExamenAutomaticamente = () => {
diff --git a/front/src/views/postulante/Resultados.vue b/front/src/views/postulante/Resultados.vue
index 4198c3e..7f7151e 100644
--- a/front/src/views/postulante/Resultados.vue
+++ b/front/src/views/postulante/Resultados.vue
@@ -1,827 +1,506 @@
+<!-- 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">
+    <!-- Header minimal -->
+    <div class="head">
+      <div>
+        <div class="hTitle">Resultados del examen</div>
+        <div class="hSub">Resumen claro + detalle por curso. Todo responsivo.</div>
       </div>
-      
-      <div class="estado-final">
-        <a-tag :color="getEstadoColor()" size="large">
-          {{ getEstadoTexto() }}
-        </a-tag>
-        <span class="recomendacion">
-          {{ recomendacionTexto }}
-        </span>
+
+      <!-- (opcional) acciones -->
+      <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">
+        <!-- TOP: Scoreboard -->
+        <a-row :gutter="[16, 16]">
+          <!-- Puntaje principal -->
+          <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">
+                  Orden: <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>
+
+          <!-- KPIs -->
+          <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>
+
+        <!-- DETALLE: tabla por curso -->
+        <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">Ratio: {{ 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;
+/* Layout */
+.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);
+/* Diseño alternativo: limpio, tipo "scoreboard" */
+.alt {
+  background: transparent;
 }
 
-.stat-content {
+/* Header */
+.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;
+/* Cards */
+.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; }
+
+/* Pills numéricas (en vez de tags de color) */
+.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 */
+.empty { margin-top: 12px; }
 
-/* Responsive */
+/* ✅ Responsive completo */
 @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 5d550b5..2eadcd2 100644
--- a/front/src/views/postulante/Test.vue
+++ b/front/src/views/postulante/Test.vue
@@ -49,7 +49,11 @@ const secuenciaTitle = computed(() => {
 });
 
 const voucherSrc = computed(() => {
-  const map = { caja: "/voucher-caja.png", pagalo: "/voucher-pagalo.png", bn: "/voucher-bn.png" };
+  const map = {
+    caja: "/voucher-caja.png",
+    pagalo: "/voucher-pagalo.png",
+    bn: "/voucher-bn.png",
+  };
   return map[secuenciaTipo.value] || "/voucher-bn.png";
 });
 
@@ -105,16 +109,12 @@ const estadoAlertDesc = computed(() => {
     : "Son 10 preguntas. Al finalizar verás tu resultado al instante.";
 });
 
-/** CTA */
-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 };
-});
+/** ✅ Botones separados (visibilidad) */
+const canIniciar = computed(() => hasExamen.value && !yaDioTest.value);
+const canVerResultados = computed(() => hasExamen.value && yaDioTest.value);
+const openSeleccionArea = () => {
+  showModal.value = true;
+};
 
 /** Options */
 const procesoOptions = computed(() =>
@@ -142,6 +142,9 @@ const tipoPagoOptions = [
  * ✅ IMPORTANTE:
  * La condición de pago debe funcionar aunque venga 1/"1"/true/"true"
  */
+const normalizeRequierePago = (v) => v === 1 || v === "1" || v === true || v === "true";
+
+/** Si estás eligiendo proceso en el modal */
 const procesoRequierePago = computed(() => {
   const pid = formState.proceso_id;
   if (pid === undefined || pid === null || pid === "") return false;
@@ -149,10 +152,31 @@ const procesoRequierePago = computed(() => {
   const proceso = (examenStore.procesos || []).find((p) => String(p.id) === String(pid));
   if (!proceso) return false;
 
-  const v = proceso.requiere_pago;
-  return v === 1 || v === "1" || v === true || v === "true";
+  return normalizeRequierePago(proceso.requiere_pago);
+});
+
+/** Si ya tienes examen asignado */
+const examenRequierePago = computed(() => {
+  const v = examenStore.examenActual?.proceso?.requiere_pago;
+  return normalizeRequierePago(v);
 });
 
+/** ✅ Solo para mostrar un texto informativo */
+const requierePagoInfo = computed(() => procesoRequierePago.value || examenRequierePago.value);
+
+/** ✅ Contexto para jóvenes (texto claro y tranquilizador) */
+const textoReferencial = computed(() => ({
+  message: "✅ Test referencial (no afecta tu postulación)",
+  description:
+    "Este test solo te ayuda a medir tu nivel y practicar. No cambia tu puntaje ni tu postulación oficial.",
+}));
+
+const textoCarpeta = computed(() => ({
+  message: "💳 Secuencia: también sirve la de tu Carpeta de Postulante",
+  description:
+    "Si tu proceso pide secuencia, puedes usar la misma del pago de la Carpeta de Postulante. No pagas nada extra por este test.",
+}));
+
 /** Validación (condicional) */
 const rules = {
   proceso_id: [{ required: true, message: "Selecciona un proceso", trigger: "change" }],
@@ -244,12 +268,9 @@ const crearExamen = async () => {
       resetModal();
       await examenStore.fetchExamenActual();
     } else {
-      // si backend responde errors, intenta mostrarlo
       const msg =
         result?.message ||
-        (result?.errors
-          ? Object.values(result.errors).flat().join(" ")
-          : "No se pudo asignar el área");
+        (result?.errors ? Object.values(result.errors).flat().join(" ") : "No se pudo asignar el área");
       message.error(msg);
     }
   } catch (e) {
@@ -307,10 +328,6 @@ const resetModal = () => {
   formRef.value?.clearValidate?.();
 };
 
-/**
- * ✅ Solo resetea cuando CIERRAS modal (no cuando cambia proceso)
- * IMPORTANTE: usamos watch(showModal) y NO tocamos showModal desde otros watchers
- */
 watch(showModal, (open) => {
   if (!open) resetModal();
 });
@@ -328,484 +345,557 @@ onMounted(async () => {
 </script>
 
 <template>
-  <!-- ✅ OJO: loading del card SOLO usa loadingPage, NO uses examenStore.cargando -->
-  <a-card :loading="loadingPage" class="pageCard" :bordered="true">
-    <!-- Header -->
-    <template #title>
-      <div class="topbar">
-        <div class="topbarLeft">
-          <div class="titleRow">
-            <span class="title">Test diagnóstico</span>
-            <span class="statusPill">{{ estadoTexto }}</span>
-          </div>
-          <div class="subtitle">
-            Guía referencial para medir tu nivel. <b>No afecta</b> tu admisión.
-          </div>
-        </div>
+  <!-- WRAPPER estilo Convocatorias -->
+
+<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="topbarRight">
-          <a-button @click="refrescar" class="btnTop" block>Actualizar</a-button>
-        </div>
-      </div>
-    </template>
-
-    <!-- HERO -->
-    <section class="hero">
-      <div class="heroLeft">
-        <div class="heroKicker">Tu evaluación</div>
-        <div class="heroTitle">Aquí está tu test</div>
-        <div class="heroText">10 preguntas • 10 min aprox. • Resultado inmediato</div>
-
-        <div class="heroFacts">
-          <div class="fact">
-            <div class="factK">Proceso</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="heroFacts hide-mobile">
 
-        <a-alert
-          class="mt12"
-          :type="estadoAlertType"
-          show-icon
-          :message="estadoAlertMessage"
-          :description="estadoAlertDesc"
-        />
-      </div>
-
-      <div class="heroRight">
-        <div class="ctaCard">
-          <div class="ctaTitle">Acción</div>
-          <div class="ctaHint">
-            <span v-if="!hasExamen">Primero selecciona tu área.</span>
-            <span v-else-if="hasExamen && !yaDioTest">Inicia cuando estés listo.</span>
-            <span v-else>Puedes ver tus resultados.</span>
+            <div class="fact">
+              <div class="factK">Proceso</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>
 
-          <a-button
-            :type="primaryAction.type"
-            size="large"
-            :loading="primaryAction.loading"
-            @click="primaryAction.onClick"
-            class="ctaBtn"
-            block
-          >
-            {{ primaryAction.label }}
-          </a-button>
-
-          <a-button v-if="procesoRequierePago" type="link" class="ctaLink" @click="openSecuencia('bn')">
-            ¿Dónde veo mi secuencia?
-          </a-button>
-
-          <a-divider class="ctaDivider" />
-
-          <div class="miniGrid">
-            <div class="mini">
-              <div class="miniK">Estado</div>
-              <div class="miniV">{{ estadoTexto }}</div>
-            </div>
-            <div class="mini">
-              <div class="miniK">Consejo</div>
-              <div class="miniV">Responde con calma.</div>
+          <!-- BOTONES DE BANCO -->
+          <div class="bankActions">
+            <div class="bankHead">
+              <div class="bankTitle">Ver ejemplos de “Secuencia”</div>
+              <div class="bankSub">
+                Te sirve si el proceso te pide secuencia (puede ser la de la Carpeta de Postulante).
+              </div>
             </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>
-    </section>
-
-    <a-divider />
-
-    <!-- Progreso -->
-    <section class="section">
-      <div class="sectionTitle">Tu camino</div>
-      <div class="sectionSub">Paso a paso, sin complicaciones.</div>
-
-      <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 mt12">
-        <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>
-    </section>
-
-    <a-divider />
-
-    <!-- FAQ -->
-    <section class="section">
-      <div class="sectionTitle">Preguntas frecuentes</div>
-      <div class="sectionSub">Respuestas cortas y claras.</div>
-
-      <a-collapse accordion class="mt12">
-        <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>
-    </section>
-
-    <!-- ================== 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>.
-            </div>
 
-            <div class="voucher-img-wrap">
-              <a-image :src="voucherSrc" :preview="true" alt="Voucher de ejemplo" />
+        <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>
 
-            <a-alert class="mt12" type="warning" show-icon message="Habilitación" :description="habilitacionTexto" />
-          </a-card>
-        </a-col>
+            <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-col :xs="24" :md="10">
-          <a-card :bordered="true">
-            <div class="sectionTitle">¿Qué hago?</div>
+      <a-divider />
 
-            <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>
+      <!-- Progreso -->
+      <section class="section">
+        <div class="sectionTitle">Tu camino</div>
+        <div class="sectionSub">Simple, rápido y sin estrés.</div>
 
-            <a-divider />
+        <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>
 
-            <a-alert type="info" show-icon message="Tranquilo" description="No tienes que pagar nada extra por este test." />
+        <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 />
+
+      <!-- ================== 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>.
+              </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>
+
+      <!-- ================== MODAL SELECCIÓN ÁREA ================== -->
+      <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"
+        />
 
-            <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="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="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="loadingAreas"
-          />
-        </a-form-item>
-
-        <!-- ✅ CAMPOS DE PAGO: aparecen sin cerrar modal -->
-        <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-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.tipo_pago"
-              placeholder="Selecciona tipo de pago"
-              :options="tipoPagoOptions"
+              v-model:value="formState.proceso_id"
+              placeholder="Selecciona un proceso"
+              :options="procesoOptions"
+              @change="handleProcesoChange"
+              :loading="loadingPage"
             />
           </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 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>
-        </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>
+
+          <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>
+
+
 </template>
 
 <style scoped>
 /* =========================
-   Base (formal, 17+, sin degradados)
+   BASE (estilo Convocatorias)
    ========================= */
-.pageCard {
-  max-width: 1100px;
+.test-modern {
+  position: relative;
+  padding: 40px 0;
+  font-family: "Times New Roman", Times, serif;
+  background: #fbfcff;
+  overflow: hidden;
+}
+
+.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;
+}
+
+.section-container {
+  position: relative;
+  z-index: 1;
+  max-width: 1200px;
   margin: 0 auto;
-  border-radius: 14px;
+  padding: 0 24px;
 }
 
+/* Helpers */
 .mt12 { margin-top: 12px; }
+.mt16 { margin-top: 16px; }
 .mb12 { margin-bottom: 12px; }
+.muted { color: #666; line-height: 1.6; }
 
-/* Header */
-.topbar {
-  display: flex;
-  justify-content: space-between;
-  gap: 12px;
-  flex-wrap: wrap;
-  align-items: flex-start;
-}
-
-.titleRow {
-  display: flex;
-  gap: 10px;
-  flex-wrap: wrap;
-  align-items: center;
-}
-
-.title {
-  font-weight: 800;
-  color: var(--ant-colorTextHeading, #111827);
+/* =========================
+   HERO (tarjeta principal tipo convocatorias)
+   ========================= */
+.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;
 }
 
-.statusPill {
-  display: inline-flex;
-  align-items: center;
-  padding: 3px 10px;
+/* Badge "Principal" estilo convocatorias */
+.hero::after {
+  position: absolute;
+  top: -12px;
+  left: 24px;
+  background: linear-gradient(45deg, #1890ff, #52c41a);
+  color: #fff;
+  padding: 6px 16px;
   border-radius: 999px;
-  border: 1px solid var(--ant-colorBorderSecondary, rgba(0,0,0,.08));
-  background: var(--ant-colorFillAlter, #fafafa);
-  font-size: 12px;
+  font-size: 0.75rem;
   font-weight: 700;
-  color: var(--ant-colorText, #111827);
-}
-
-.subtitle {
-  margin-top: 4px;
-  font-size: 12px;
-  color: var(--ant-colorTextSecondary, #6b7280);
-  line-height: 1.35;
-}
-
-.topbarRight {
-  min-width: 220px;
-  display: flex;
-  justify-content: flex-end;
 }
 
-.btnTop {
-  border-radius: 10px;
-}
-
-/* HERO (sin degradado) */
-.hero {
-  border: 2px solid var(--ant-colorPrimary, #1677ff);
-  border-radius: 14px;
-  padding: 16px;
-  background: var(--ant-colorBgContainer, #fff);
-
-  display: grid;
-  grid-template-columns: 1.4fr 0.9fr;
-  gap: 14px;
-}
+.heroLeft, .heroRight { min-width: 0; }
 
 .heroKicker {
-  font-size: 12px;
-  letter-spacing: 0.2px;
-  color: var(--ant-colorTextSecondary, #6b7280);
-  font-weight: 700;
+  font-size: 0.95rem;
+  color: #666;
+  margin-bottom: 6px;
 }
 
 .heroTitle {
-  margin-top: 4px;
-  font-size: 20px;
+  margin: 0;
+  font-size: 1.85rem;
+  font-weight: 700;
+  color: #0d1b52;
   line-height: 1.15;
-  font-weight: 900;
-  color: var(--ant-colorTextHeading, #111827);
 }
 
 .heroText {
-  margin-top: 6px;
-  font-size: 13px;
-  color: var(--ant-colorText, #374151);
+  margin-top: 10px;
+  font-size: 1.05rem;
+  color: #666;
 }
 
+/* Facts */
 .heroFacts {
-  margin-top: 12px;
+  margin-top: 16px;
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 10px;
+  gap: 12px;
 }
 
 .fact {
-  border: 1px solid var(--ant-colorBorderSecondary, rgba(0,0,0,.06));
-  background: var(--ant-colorFillAlter, #fafafa);
+  border: 1px solid rgba(13, 27, 82, 0.10);
+  background: rgba(13, 27, 82, 0.03);
   border-radius: 12px;
-  padding: 10px 12px;
-  min-width: 0;
+  padding: 12px;
 }
+
 .factK {
-  font-size: 12px;
-  color: var(--ant-colorTextSecondary, #6b7280);
+  font-size: 0.9rem;
+  color: #666;
+  font-weight: 700;
 }
+
 .factV {
-  margin-top: 4px;
-  font-weight: 800;
-  color: var(--ant-colorTextHeading, #111827);
+  margin-top: 6px;
+  font-weight: 700;
+  font-size: 0.95rem;
+  color: #1a237e;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-/* CTA card */
-.ctaCard {
-  border: 1px solid var(--ant-colorBorderSecondary, rgba(0,0,0,.06));
-  background: var(--ant-colorFillAlter, #fafafa);
+/* Banco */
+.bankActions {
+  margin-top: 18px;
+  padding: 16px;
   border-radius: 14px;
-  padding: 14px;
-  height: 100%;
+  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;
+}
+
+/* CTA */
+.ctaCard {
+  border: none;
+  border-radius: 16px;
+  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.08);
+  background: #fff;
+  padding: 20px;
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 12px;
+}
+
+.ctaHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
 }
 
 .ctaTitle {
-  font-weight: 900;
-  color: var(--ant-colorTextHeading, #111827);
+  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: #0d1b52;
 }
 
 .ctaHint {
-  font-size: 12px;
-  color: var(--ant-colorTextSecondary, #6b7280);
-  line-height: 1.35;
+  margin-top: 6px;
+  font-size: 0.95rem;
+  color: #666;
+  line-height: 1.45;
 }
 
-.ctaBtn {
-  height: 44px;
-  border-radius: 12px;
-  font-weight: 900;
+/* Status pill */
+.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;
 }
 
-.ctaLink {
-  padding: 0;
-  height: auto;
-  text-align: left;
+.statusTag.ok {
+  border-color: rgba(82, 196, 26, 0.30);
+  background: rgba(82, 196, 26, 0.12);
+  color: rgba(32, 120, 16, 1);
 }
 
-.ctaDivider {
-  margin: 10px 0 0;
+.statusTag.pending {
+  border-color: rgba(24, 144, 255, 0.30);
+  background: rgba(24, 144, 255, 0.12);
+  color: rgba(9, 74, 168, 1);
 }
 
-.miniGrid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 10px;
+.statusTag.empty {
+  border-color: rgba(0,0,0,0.10);
+  background: rgba(0,0,0,0.04);
+  color: #777;
 }
 
-.mini {
-  border: 1px solid var(--ant-colorBorderSecondary, rgba(0,0,0,.06));
-  background: #fff;
+/* Botones */
+.ctaBtn {
+  height: 52px;
   border-radius: 12px;
-  padding: 10px 12px;
-  min-width: 0;
+  font-weight: 700;
 }
-.miniK {
-  font-size: 12px;
-  color: var(--ant-colorTextSecondary, #6b7280);
+
+.primaryBtn {
+  background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
+  border: none;
 }
-.miniV {
-  margin-top: 4px;
-  font-weight: 800;
-  color: var(--ant-colorTextHeading, #111827);
+
+.ghostBtn {
+  background: rgba(13, 27, 82, 0.04);
+  border: 1px solid rgba(13, 27, 82, 0.14);
 }
 
-/* Sections */
+.ctaDivider { margin: 14px 0 0; }
+
+/* Secciones inferiores */
 .sectionTitle {
-  font-weight: 900;
-  color: var(--ant-colorTextHeading, #111827);
+  font-size: 1.35rem;
+  font-weight: 700;
+  color: #0d1b52;
+  margin: 0;
 }
+
 .sectionSub {
-  margin-top: 4px;
-  font-size: 12px;
-  color: var(--ant-colorTextSecondary, #6b7280);
+  margin-top: 8px;
+  font-size: 1rem;
+  color: #666;
 }
 
 .hint {
-  font-size: 12px;
-  color: var(--ant-colorTextSecondary, #6b7280);
+  margin-top: 10px;
+  font-size: 0.95rem;
+  color: #666;
+}
+
+/* Modales */
+:deep(.voucher-modal .ant-modal-content),
+:deep(.select-modal .ant-modal-content) {
+  border-radius: 16px;
 }
 
-.bullets, .ordered {
-  margin: 0 0 0 18px;
-  line-height: 1.7;
+:deep(.voucher-modal .ant-modal),
+:deep(.select-modal .ant-modal) {
+  max-width: 92vw;
+}
+
+/* Pago */
+.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,.06));
+  background: rgba(13, 27, 82, 0.03);
+  border: 1px solid rgba(13, 27, 82, 0.10);
   padding: 10px;
-  border-radius: 12px;
+  border-radius: 14px;
 }
 
 .modal-actions {
@@ -815,42 +905,61 @@ onMounted(async () => {
   gap: 10px;
 }
 
-/* Pay block */
-.pay-block {
-  margin-top: 8px;
-  padding: 12px;
-  border: 1px solid var(--ant-colorBorderSecondary, rgba(0,0,0,.06));
-  border-radius: 12px;
-  background: var(--ant-colorFillAlter, #fafafa);
-}
+/* Opcional: cards ant-design más “suaves” */
+:deep(.ant-card) { border-radius: 12px; }
+:deep(.ant-card-bordered) { border: 1px solid rgba(13, 27, 82, 0.10); }
 
-/* Responsive */
-@media (max-width: 992px) {
-  .hero {
-    grid-template-columns: 1fr;
+/* =========================
+   FULL WIDTH + TOP 0 EN MÓVIL
+   ========================= */
+@media (max-width: 768px) {
+.hide-mobile{
+    display: none !important;
   }
-  .heroFacts {
-    grid-template-columns: 1fr;
+  /* ✅ Quita el padding superior del wrapper (era 40px) */
+  .test-modern{
+    padding-top: 0 !important;
+    padding-bottom: 24px; /* opcional */
+  }
+
+  /* ✅ Quita padding lateral del container para que sea edge-to-edge */
+  .section-container{
+    max-width: none;
+    padding: 0 !important;
+    margin: 0 !important;
   }
-  .miniGrid {
+
+  /* ✅ Card principal a todo el ancho y pegado arriba */
+  .hero{
     grid-template-columns: 1fr;
+    width: 100%;
+    margin: 0 !important;
+    border-radius: 0 !important;
+
+    /* importante: sin “espacio arriba” */
+    padding: 14px 16px 18px !important;
   }
-}
 
-@media (max-width: 576px) {
-  .pageCard { margin: 0; }
-  .topbarRight { width: 100%; min-width: 0; }
-  .btnTop { width: 100%; }
-}
+  /* ✅ Asegura que el primer texto no empuje hacia abajo */
+  .heroKicker{ margin-top: 0 !important; }
+  .heroTitle{ margin-top: 6px !important; }
+  .heroText{ margin-top: 8px !important; }
 
-/* Modales no se salen en móvil */
-:deep(.voucher-modal .ant-modal),
-:deep(.select-modal .ant-modal) {
-  max-width: 92vw;
+  /* Para que la sección “Tu camino” no se pegue a los bordes */
+  .section{
+    padding: 0 16px;
+  }
+
+  /* Facts */
+  .heroFacts{
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }
 
-:deep(.voucher-modal .ant-modal-content),
-:deep(.select-modal .ant-modal-content) {
-  border-radius: 14px;
+@media (max-width: 576px){
+  .heroFacts{
+    grid-template-columns: 1fr;
+  }
 }
+
 </style>