From 36da717836cd50bbac090be92dcda06ed61f56b8 Mon Sep 17 00:00:00 2001
From: Alexis <isalexis.design@gmail.com>
Date: Thu, 30 Apr 2026 14:16:51 +0200
Subject: [PATCH] refactor: improve layout and styling in MembershipEvaluator
 component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Adjust padding in Step3FinalGraph for better alignment.
- Update styles in TermResult for consistent spacing and improved readability.
- Change labels from "Inferior" and "Superior" to "Mínimo" and "Máximo" for clarity.
---
 .../src/components/editor/Step3FinalGraph.jsx  |  2 +-
 .../editor/finalGraph/MembershipEvaluator.jsx  | 18 +++++++++---------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/editor/Step3FinalGraph.jsx b/frontend/src/components/editor/Step3FinalGraph.jsx
index abc7a06..4a8fcbd 100644
--- a/frontend/src/components/editor/Step3FinalGraph.jsx
+++ b/frontend/src/components/editor/Step3FinalGraph.jsx
@@ -86,7 +86,7 @@ const Step3FinalGraph = memo(({ data, criterionName }) => {
 
       {/* Evaluador Manual */}
       {isReady && sortedResults.length > 0 && (
-        <div className="mt-4 pt-4 border-t border-slate-100 relative z-10">
+        <div className="mt-4 pt-4 border-t border-slate-100 relative z-10 pl-[60px]">
           <MembershipEvaluator sortedResults={sortedResults} />
         </div>
       )}
diff --git a/frontend/src/components/editor/finalGraph/MembershipEvaluator.jsx b/frontend/src/components/editor/finalGraph/MembershipEvaluator.jsx
index 38a348e..c41f75e 100644
--- a/frontend/src/components/editor/finalGraph/MembershipEvaluator.jsx
+++ b/frontend/src/components/editor/finalGraph/MembershipEvaluator.jsx
@@ -19,27 +19,27 @@ const filterActive = (results) =>
 
 const TermResult = ({ result }) => {
   const uncertainty = result.isType2 ? Math.abs(result.upper - result.lower) : 0;
-  const isSimple = !result.isType2 || uncertainty < 0.001;
+  const isSimple = !result.isType2 || uncertainty <= 0.001;
   const displayY = result.isType2 ? result.upper : result.y;
 
   return (
-    <div className="flex flex-col text-xs font-medium bg-slate-50 px-3 py-2 rounded-xl border border-slate-100 shrink-0">
-      <span className="uppercase font-black mb-1 tracking-wide leading-none" style={{ color: result.color }}>
+    <div className="flex flex-col text-xs font-medium bg-slate-50 p-2.5 rounded-xl border border-slate-100">
+      <span className="uppercase font-black mb-1.5" style={{ color: result.color }}>
         {result.term}
       </span>
       {isSimple ? (
-        <span className="text-slate-700 flex justify-between gap-2">
+        <span className="text-slate-600 flex justify-between gap-4">
           Pertenencia: <b>{displayY.toFixed(3)}</b>
         </span>
       ) : (
         <>
-          <span className="text-slate-600 flex justify-between gap-2">
-            Inferior: <b>{result.lower.toFixed(3)}</b>
+          <span className="text-slate-600 flex justify-between gap-4">
+            Mínimo: <b>{result.lower.toFixed(3)}</b>
           </span>
-          <span className="text-slate-600 flex justify-between gap-2 mt-0.5">
-            Superior: <b>{result.upper.toFixed(3)}</b>
+          <span className="text-slate-600 flex justify-between gap-4 mt-0.5">
+            Máximo: <b>{result.upper.toFixed(3)}</b>
           </span>
-          <span className="text-slate-500 font-bold mt-1 pt-1 border-t border-slate-200 flex justify-between gap-2">
+          <span className="text-slate-500 font-bold mt-1.5 pt-1.5 border-t border-slate-200 flex justify-between gap-4">
             Incertidumbre: <span>{uncertainty.toFixed(3)}</span>
           </span>
         </>