Fix: controlar mejor los rangos de la gráfica para la lógica difusa

frontend/src/components/layout/MainLayout.jsx

@@ -11,7 +11,7 @@ export default function MainLayout() {
             <span className="text-white font-black text-xl leading-none">DoC</span>
           </div>
           <h1 className="text-xl font-bold text-slate-800">
-            Deck of Cards Method
+            Deck of Cards
           </h1>
         </div>
       </header>

frontend/src/components/membershipFunction/Controls.jsx

@@ -28,13 +28,13 @@ export default function Controls({ selectedTerm, currentMf, selectedColor, baseS
         <div className="space-y-4">
           <div>
             <label className="flex justify-between text-xs font-bold text-slate-600 mb-1">
-              <span>Inicio del Núcleo (Límite: {prevSupportEnd.toFixed(2)})</span><span style={{ color: selectedColor }}>{currentMf.coreStart.toFixed(3)}</span>
+              <span>Inicio del Núcleo</span><span style={{ color: selectedColor }}>{currentMf.coreStart.toFixed(3)}</span>
             </label>
             <input type="range" min={prevSupportEnd} max={nextCoreStart} step="0.001" value={currentMf.coreStart} onChange={(e) => updateCurrentMf('coreStart', e.target.value)} className="w-full cursor-pointer h-1.5" style={{ accentColor: selectedColor }} />
           </div>
           <div>
             <label className="flex justify-between text-xs font-bold text-slate-600 mb-1">
-              <span>Inicio del Soporte (Límite: {prevCoreEnd.toFixed(2)})</span><span style={{ color: selectedColor }}>{currentMf.supportStart.toFixed(3)}</span>
+              <span>Inicio del Soporte</span><span style={{ color: selectedColor }}>{currentMf.supportStart.toFixed(3)}</span>
             </label>
             <input type="range" min={prevCoreEnd} max={nextCoreStart} step="0.001" value={currentMf.supportStart} onChange={(e) => updateCurrentMf('supportStart', e.target.value)} className="w-full cursor-pointer h-1.5" style={{ accentColor: selectedColor, opacity: 0.7 }} />
           </div>
@@ -43,13 +43,13 @@ export default function Controls({ selectedTerm, currentMf, selectedColor, baseS
         <div className="space-y-4">
           <div>
             <label className="flex justify-between text-xs font-bold text-slate-600 mb-1">
-              <span>Fin del Núcleo (Límite: {nextSupportStart.toFixed(2)})</span><span style={{ color: selectedColor }}>{currentMf.coreEnd.toFixed(3)}</span>
+              <span>Fin del Núcleo</span><span style={{ color: selectedColor }}>{currentMf.coreEnd.toFixed(3)}</span>
             </label>
             <input type="range" min={prevCoreEnd} max={nextSupportStart} step="0.001" value={currentMf.coreEnd} onChange={(e) => updateCurrentMf('coreEnd', e.target.value)} className="w-full cursor-pointer h-1.5" style={{ accentColor: selectedColor }} />
           </div>
           <div>
             <label className="flex justify-between text-xs font-bold text-slate-600 mb-1">
-              <span>Fin del Soporte (Límite: {nextCoreStart.toFixed(2)})</span><span style={{ color: selectedColor }}>{currentMf.supportEnd.toFixed(3)}</span>
+              <span>Fin del Soporte</span><span style={{ color: selectedColor }}>{currentMf.supportEnd.toFixed(3)}</span>
             </label>
             <input type="range" min={prevCoreEnd} max={nextCoreStart} step="0.001" value={currentMf.supportEnd} onChange={(e) => updateCurrentMf('supportEnd', e.target.value)} className="w-full cursor-pointer h-1.5" style={{ accentColor: selectedColor, opacity: 0.7 }} />
           </div>

frontend/src/pages/AdvancedMode.jsx

@@ -13,16 +13,13 @@ 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 });
@@ -96,17 +93,35 @@ export default function AdvancedMode() {
         nextSupportStart = prev[scaleKeys[selectedIndex + 1]].supportStart;
       }
 
+      const anchor = baseScale[selectedTerm];
+
       if (field === 'supportStart' && numValue < prevCoreEnd) numValue = prevCoreEnd;
       if (field === 'coreStart' && numValue < prevSupportEnd) numValue = prevSupportEnd;
       if (field === 'coreEnd' && numValue > nextSupportStart) numValue = nextSupportStart;
       if (field === 'supportEnd' && numValue > nextCoreStart) numValue = nextCoreStart;
 
+      if ((field === 'supportStart' || field === 'coreStart') && numValue > anchor) numValue = anchor;
+      if ((field === 'supportEnd' || field === 'coreEnd') && numValue < anchor) numValue = anchor;
+
       const current = { ...prev[selectedTerm], [field]: numValue };
 
-      if (field === 'supportStart' && current.supportStart > current.coreStart) current.coreStart = current.supportStart;
+      if (field === 'supportStart') {
-      if (field === 'coreStart') { if (current.coreStart < current.supportStart) current.supportStart = current.coreStart; if (current.coreStart > current.coreEnd) current.coreEnd = current.coreStart; }
+        if (current.supportStart > current.coreStart) current.coreStart = current.supportStart;
-      if (field === 'coreEnd') { if (current.coreEnd < current.coreStart) current.coreStart = current.coreEnd; if (current.coreEnd > current.supportEnd) current.supportEnd = current.coreEnd; }
+        if (current.coreStart > current.coreEnd) current.coreEnd = current.coreStart;
-      if (field === 'supportEnd' && current.supportEnd < current.coreEnd) current.coreEnd = current.supportEnd;
+        if (current.coreEnd > current.supportEnd) current.supportEnd = current.coreEnd;
+      } else if (field === 'coreStart') {
+        if (current.coreStart < current.supportStart) current.supportStart = current.coreStart;
+        if (current.coreStart > current.coreEnd) current.coreEnd = current.coreStart;
+        if (current.coreEnd > current.supportEnd) current.supportEnd = current.coreEnd;
+      } else if (field === 'coreEnd') {
+        if (current.coreEnd > current.supportEnd) current.supportEnd = current.coreEnd;
+        if (current.coreEnd < current.coreStart) current.coreStart = current.coreEnd;
+        if (current.coreStart < current.supportStart) current.supportStart = current.coreStart;
+      } else if (field === 'supportEnd') {
+        if (current.supportEnd < current.coreEnd) current.coreEnd = current.supportEnd;
+        if (current.coreEnd < current.coreStart) current.coreStart = current.coreEnd;
+        if (current.coreStart < current.supportStart) current.supportStart = current.coreStart;
+      }
 
       return { ...prev, [selectedTerm]: current };
     });
@@ -133,7 +148,7 @@ export default function AdvancedMode() {
           
           <div className="flex justify-between items-center w-full mb-4 border-b pb-3 relative z-30">
             <h2 className="text-xl font-bold text-slate-800">
-              Paso 1: Escala de Referencia (Mesa)
+              Paso 1: Establecer escala
             </h2>
             {needsZoom && (
               <button