From 62a4db33a661dad83d77949426509b0471d66ee8 Mon Sep 17 00:00:00 2001
From: Alexis <isalexis.design@gmail.com>
Date: Tue, 7 Apr 2026 09:39:48 +0200
Subject: [PATCH] =?UTF-8?q?refactor:=20mejorar=20dise=C3=B1o=20de=20interf?=
 =?UTF-8?q?az=20y=20UX?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/layout/MainLayout.jsx | 14 ++++++++++----
 frontend/src/pages/History.jsx                | 14 ++++++++------
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/layout/MainLayout.jsx b/frontend/src/components/layout/MainLayout.jsx
index 0a127ec..2c164a0 100644
--- a/frontend/src/components/layout/MainLayout.jsx
+++ b/frontend/src/components/layout/MainLayout.jsx
@@ -102,11 +102,17 @@ export default function MainLayout({ children }) {
               </div>
             ) : (
               // BOTONES PARA USUARIO NO LOGUEADO
-              <div className="flex items-center gap-3">
-                <Link to="/login" className="text-sm font-bold text-slate-600 hover:text-blue-600 transition-colors">
-                  Iniciar sesión
+              <div className="flex items-center gap-2 ml-2 border-l border-slate-200 pl-4">
+                <Link 
+                  to="/login" 
+                  className="text-sm font-bold text-slate-600 px-4 py-2 rounded-lg hover:text-blue-600 hover:bg-slate-100 transition-all"
+                >
+                  Entrar
                 </Link>
-                <Link to="/register" className="text-sm font-bold bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors shadow-sm">
+                <Link 
+                  to="/register" 
+                  className="text-sm font-bold bg-blue-600 text-white px-4 py-2 rounded-lg shadow-sm hover:bg-blue-700 hover:shadow transition-all"
+                >
                   Registrarse
                 </Link>
               </div>
diff --git a/frontend/src/pages/History.jsx b/frontend/src/pages/History.jsx
index e5df8c4..12da8e0 100644
--- a/frontend/src/pages/History.jsx
+++ b/frontend/src/pages/History.jsx
@@ -44,8 +44,7 @@ export default function History() {
   };
 
   return (
-    <div className="w-full max-w-5xl mx-auto flex flex-col gap-8 animate-fade-in pb-12">
-      
+    <div className="w-full max-w-7xl mx-auto flex flex-col gap-8 animate-fade-in pb-12">      
       {/* Cabecera */}
       <div className="flex justify-between items-center bg-white p-8 rounded-3xl shadow-sm border border-slate-200">
         <div>
@@ -83,7 +82,7 @@ export default function History() {
             return (
               <div key={itemId} className={`bg-white rounded-2xl shadow-sm border transition-all duration-300 ${isExpanded ? 'border-blue-300 ring-4 ring-blue-50' : 'border-slate-200 hover:border-slate-300'}`}>
                 
-                {/* Cabecera de la Card (Siempre visible) */}
+                {/* Cabecera de la Card */}
                 <div className="p-6 flex flex-col sm:flex-row justify-between items-center gap-4 bg-slate-50/50 rounded-t-2xl">
                   <div className="flex items-center gap-4 w-full sm:w-auto">
                     <div className="w-12 h-12 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-xl shadow-inner">
@@ -92,7 +91,10 @@ export default function History() {
                     <div>
                       <h3 className="text-xl font-bold text-slate-800">{item.name || 'Modelo sin título'}</h3>
                       <p className="text-sm text-slate-500 font-medium">
-                        Guardado en el historial
+                        {item.created_at 
+                          ? `Guardado el ${new Date(item.created_at).toLocaleDateString('es-ES', { day: '2-digit', month: 'long', year: 'numeric' })}` 
+                          : 'Guardado en el historial'
+                        }
                       </p>
                     </div>
                   </div>
@@ -109,12 +111,12 @@ export default function History() {
                       className="px-4 py-2.5 bg-white border border-red-200 text-red-500 font-bold rounded-xl hover:bg-red-50 transition-colors shadow-sm"
                       title="Borrar modelo"
                     >
-                      🗑️
+                      Borrar
                     </button>
                   </div>
                 </div>
 
-                {/* Contenido Desplegable (La Gráfica) */}
+                {/* Contenido Desplegable (La gráfica) */}
                 {isExpanded && (
                   <div className="p-6 border-t border-slate-100 animate-fade-in bg-white rounded-b-2xl">
                     <Step3FinalGraph data={item} criterionName={item.name} />