From ddddfaef73a066de7da6fa3bb5744f364959eea3 Mon Sep 17 00:00:00 2001
From: Alexis <isalexis.design@gmail.com>
Date: Thu, 26 Mar 2026 13:19:06 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20arreglar=20tama=C3=B1o=20del=20Criterion?=
 =?UTF-8?q?Input=20y=20m=C3=A1rgenes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/CriterionInput.jsx | 42 +++++++++++-----------
 frontend/src/pages/AdvancedMode.jsx        |  5 ++-
 2 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/CriterionInput.jsx b/frontend/src/components/CriterionInput.jsx
index bc15f39..b636ede 100644
--- a/frontend/src/components/CriterionInput.jsx
+++ b/frontend/src/components/CriterionInput.jsx
@@ -1,27 +1,29 @@
 export default function CriterionInput({ criterionName, setCriterionName, error }) {
   return (
-    <div className="w-full max-w-2xl bg-white p-6 rounded-2xl shadow-sm border border-slate-200 mb-12">
-      <label className="block text-sm font-bold text-slate-400 uppercase tracking-widest mb-2 text-center">
-        Nombre del Criterio
+    <div className="flex flex-row items-center justify-center gap-3 w-full z-30 relative mb-2">
+      <label className="text-sm font-bold text-slate-600 uppercase tracking-wide whitespace-nowrap">
+        Nombre del Criterio:
       </label>
-      <input
-        type="text"
-        placeholder="Ej. Calidad del aceite..."
-        value={criterionName}
-        onChange={(e) => setCriterionName(e.target.value)}
-        className={`w-full text-3xl font-bold p-2 text-center text-slate-700 border-b-2 outline-none transition-colors ${
-          error 
-            ? 'border-red-400 focus:border-red-500' 
-            : 'border-transparent hover:border-slate-200 focus:border-blue-500'
-        }`}
-      />
-      
-      {error && (
-        <p className="text-red-500 text-sm font-semibold text-center mt-2 animate-pulse">
-          El nombre del criterio es obligatorio
-        </p>
-      )}
       
+      <div className="relative w-72">
+        <input
+          type="text"
+          placeholder="Ej: Calidad del código"
+          value={criterionName}
+          onChange={(e) => setCriterionName(e.target.value)}
+          className={`w-full px-4 py-1.5 rounded-lg border-2 font-bold outline-none transition-all ${
+            error 
+              ? 'border-red-400 focus:border-red-500 bg-red-50 text-red-700 placeholder:text-red-300' 
+              : 'border-slate-200 focus:border-blue-400 bg-slate-50 text-slate-800'
+          }`}
+        />
+        
+        {error && (
+          <span className="absolute top-1/2 -right-24 -translate-y-1/2 text-xs font-bold text-red-500 animate-pulse whitespace-nowrap">
+            * Obligatorio
+          </span>
+        )}
+      </div>
     </div>
   );
 }
\ No newline at end of file
diff --git a/frontend/src/pages/AdvancedMode.jsx b/frontend/src/pages/AdvancedMode.jsx
index 81aeb4a..e3fc674 100644
--- a/frontend/src/pages/AdvancedMode.jsx
+++ b/frontend/src/pages/AdvancedMode.jsx
@@ -13,13 +13,16 @@ export default function AdvancedMode() {
   const [step, setStep] = useState(1); 
   const [isLoading, setIsLoading] = useState(false);
 
+  // Estados Fase 1 (Escala)
   const [criterionName, setCriterionName] = useState('');
   const [levels, setLevels] = useState(['', '', '']); 
   const [blankCards, setBlankCards] = useState([0, 0]);
   const [errors, setErrors] = useState({ criterion: false, levels: [] });
   
+  // Estado para controlar la lupa (Zoom)
   const [isZoomActive, setIsZoomActive] = useState(true);
 
+  // Medición exacta con Refs
   const containerRef = useRef(null);
   const tableRef = useRef(null);
   const [dimensions, setDimensions] = useState({ container: 1000, table: 0 });
@@ -148,7 +151,7 @@ export default function AdvancedMode() {
 
           <CriterionInput criterionName={criterionName} setCriterionName={handleCriterionChange} error={errors.criterion} />
           
-          <div ref={containerRef} className={`w-full mt-6 transition-all relative ${!isZoomActive && needsZoom ? 'overflow-x-auto flex justify-start pb-8 pt-8 px-4' : 'overflow-hidden flex justify-center pb-8 pt-8'}`}>
+          <div ref={containerRef} className={`w-full mt-2 pb-4 pt-4 transition-all relative ${!isZoomActive && needsZoom ? 'overflow-x-auto flex justify-start px-4' : 'overflow-hidden flex justify-center'}`}>
             <div className={`flex flex-row items-start min-w-max transition-transform duration-500 ease-out px-4 origin-top`} style={{ transform: `scale(${currentScale})`, marginBottom: isZoomActive && currentScale < 1 ? `-${(1 - currentScale) * 300}px` : '0px' }}>
               
               <div ref={tableRef} className="flex flex-row items-start relative px-10 overflow-visible">