From 9d12e81c90863ea846c90921b27b03d2da9b7d70 Mon Sep 17 00:00:00 2001
From: Alexis <isalexis.design@gmail.com>
Date: Thu, 26 Mar 2026 14:01:39 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20arreglar=20tama=C3=B1os=20y=20m=C3=A1rge?=
 =?UTF-8?q?nes=20generales=20de=20la=20app?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/layout/MainLayout.jsx | 32 ++++++++++---------
 frontend/src/index.css                        |  6 +++-
 frontend/src/pages/AdvancedMode.jsx           |  4 +--
 3 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/layout/MainLayout.jsx b/frontend/src/components/layout/MainLayout.jsx
index fc1996d..4b83e1c 100644
--- a/frontend/src/components/layout/MainLayout.jsx
+++ b/frontend/src/components/layout/MainLayout.jsx
@@ -3,22 +3,24 @@ import { Outlet } from 'react-router-dom';
 export default function MainLayout() {
   return (
     <div className="min-h-screen bg-slate-50 font-sans text-slate-900">
-        {/* Cabecera */}
-        <header className="bg-white border-b border-slate-200 sticky top-0 z-50 shadow-sm">
-            <div className="max-w-7xl mx-auto px-4 h-14 flex items-center gap-3">
-            <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center shadow-inner">
-                <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
-            </h1>
-            </div>
-        </header>
+      
+      {/* Cabecera */}
+      <header className="bg-white border-b border-slate-200 sticky top-0 z-50 shadow-sm">
+        <div className="max-w-7xl mx-auto px-4 h-14 flex items-center gap-3">
+          <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center shadow-inner">
+            <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
+          </h1>
+        </div>
+      </header>
 
-        {/* Contenido principal */}
-        <main className="max-w-7xl mx-auto px-4 py-6">
-            <Outlet />
-        </main>
+      {/* Contenido principal */}
+      <main className="max-w-7xl mx-auto px-4 py-6">
+        <Outlet />
+      </main>
+      
     </div>
   );
 }
\ No newline at end of file
diff --git a/frontend/src/index.css b/frontend/src/index.css
index a461c50..e63f41c 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1 +1,5 @@
-@import "tailwindcss";
\ No newline at end of file
+@import "tailwindcss";
+
+body {
+  overflow-y: scroll;
+}
\ No newline at end of file
diff --git a/frontend/src/pages/AdvancedMode.jsx b/frontend/src/pages/AdvancedMode.jsx
index e3fc674..04f9a54 100644
--- a/frontend/src/pages/AdvancedMode.jsx
+++ b/frontend/src/pages/AdvancedMode.jsx
@@ -151,7 +151,7 @@ export default function AdvancedMode() {
 
           <CriterionInput criterionName={criterionName} setCriterionName={handleCriterionChange} error={errors.criterion} />
           
-          <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 ref={containerRef} className={`w-full mt-2 transition-all relative ${!isZoomActive && needsZoom ? 'overflow-x-auto flex justify-start pb-8 pt-4 px-4' : 'overflow-hidden flex justify-center pb-8 pt-4'}`}>
             <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">
@@ -187,7 +187,7 @@ export default function AdvancedMode() {
 
       {/* PASO 2 */}
       {step === 2 && (
-        <div className="w-full max-w-6xl bg-white p-6 rounded-2xl shadow-sm border border-slate-200 animate-fade-in relative overflow-visible">
+        <div className="w-full bg-white p-6 rounded-2xl shadow-sm border border-slate-200 animate-fade-in relative overflow-visible">
           <div className="flex justify-between items-center mb-6 border-b pb-3">
             <h2 className="text-xl font-bold text-slate-800">Paso 2: Modelar Conceptos Difusos</h2>
             <button onClick={() => setStep(1)} className="text-slate-500 hover:text-blue-600 text-sm font-semibold underline">← Volver a las cartas</button>