From 2bd096f7cebdb051d04a3fbaaba2b085c0170d86 Mon Sep 17 00:00:00 2001
From: Pablo Occhiuzzi <104530403+opablon@users.noreply.github.com>
Date: Wed, 6 Aug 2025 13:37:35 +0000
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20agregar=20secci=C3=B3n=20te=C3=B3ri?=
 =?UTF-8?q?ca=20colapsable?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx   | 41 ++++++++++++++++++++++++++++++++++-------
 src/index.css | 15 +++++++++++++++
 2 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index d251b7c..cfd9dd6 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -20,6 +20,7 @@ function App() {
   const [isAppFullyReady, setIsAppFullyReady] = useState(false);
   const [transitionCompleted, setTransitionCompleted] = useState(false);
   const [isTheorySectionReady, setIsTheorySectionReady] = useState(false);
+  const [isTheoryOpen, setIsTheoryOpen] = useState(false);
 
   const {
     isLoading,
@@ -103,6 +104,10 @@ function App() {
     });
   };
 
+  const toggleTheorySection = () => {
+    setIsTheoryOpen(!isTheoryOpen);
+  };
+
   // Renderizar ambos elementos con transiciones CSS
   return (
     <>
@@ -159,14 +164,36 @@ function App() {
             </aside>
           </main>
           
-          {/* Lazy loading de la sección de teoría */}
-          <Suspense fallback={
-            <div className="flex justify-center items-center py-12">
-              <div className="text-gray-500">Cargando contenido teórico...</div>
+          {/* Sección de teoría con botón colapsable */}
+          <div className="mt-8">
+            <div className="text-center mb-4">
+              <button
+                onClick={toggleTheorySection}
+                className="inline-flex items-center gap-2 px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg shadow-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all duration-300 ease-in-out transform hover:scale-105"
+                aria-expanded={isTheoryOpen}
+                aria-label={isTheoryOpen ? "Ocultar explicación teórica" : "Mostrar explicación teórica"}
+              >
+                <span className="text-xl" role="img" aria-hidden="true">
+                  {isTheoryOpen ? "⬆️" : "🧠"}
+                </span>
+                {isTheoryOpen ? "Ocultar explicación" : "¿Cómo funciona esto?"}
+              </button>
+            </div>
+            
+            {/* Contenedor colapsable con CSS Grid */}
+            <div className={`theory-collapsible ${isTheoryOpen ? 'open' : ''}`}>
+              <div className="theory-collapsible-content">
+                {/* Lazy loading de la sección de teoría */}
+                <Suspense fallback={
+                  <div className="flex justify-center items-center py-12">
+                    <div className="text-gray-500">Cargando contenido teórico...</div>
+                  </div>
+                }>
+                  <TheorySection onReady={() => setIsTheorySectionReady(true)} />
+                </Suspense>
+              </div>
             </div>
-          }>
-            <TheorySection onReady={() => setIsTheorySectionReady(true)} />
-          </Suspense>
+          </div>
           
           {/* Footer */}
           <footer ref={footerRef} className="mt-12 pt-6 border-t border-gray-200 text-center text-gray-500">
diff --git a/src/index.css b/src/index.css
index b5c61c9..31ebfb1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,18 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* Clases para accordion con animación CSS Grid */
+.theory-collapsible {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.4s ease-out;
+}
+
+.theory-collapsible.open {
+  grid-template-rows: 1fr;
+}
+
+.theory-collapsible-content {
+  overflow: hidden;
+}

From 5280e4ec8be3ce479b8f8a1e2b7f5ed043589416 Mon Sep 17 00:00:00 2001
From: Pablo Occhiuzzi <104530403+opablon@users.noreply.github.com>
Date: Wed, 6 Aug 2025 13:46:50 +0000
Subject: [PATCH 2/3] refactor: usar solo Tailwind para consistencia

---
 src/App.jsx   | 10 +++++++---
 src/index.css | 15 ---------------
 2 files changed, 7 insertions(+), 18 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index cfd9dd6..dcfb3a9 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -180,9 +180,13 @@ function App() {
               </button>
             </div>
             
-            {/* Contenedor colapsable con CSS Grid */}
-            <div className={`theory-collapsible ${isTheoryOpen ? 'open' : ''}`}>
-              <div className="theory-collapsible-content">
+            {/* Contenedor colapsable con Tailwind CSS Grid */}
+            <div className={`grid transition-all duration-300 ease-out ${
+              isTheoryOpen 
+                ? 'grid-rows-[1fr] opacity-100' 
+                : 'grid-rows-[0fr] opacity-0'
+            }`}>
+              <div className="overflow-hidden">
                 {/* Lazy loading de la sección de teoría */}
                 <Suspense fallback={
                   <div className="flex justify-center items-center py-12">
diff --git a/src/index.css b/src/index.css
index 31ebfb1..b5c61c9 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,18 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-/* Clases para accordion con animación CSS Grid */
-.theory-collapsible {
-  display: grid;
-  grid-template-rows: 0fr;
-  transition: grid-template-rows 0.4s ease-out;
-}
-
-.theory-collapsible.open {
-  grid-template-rows: 1fr;
-}
-
-.theory-collapsible-content {
-  overflow: hidden;
-}

From a1f1f654091f1821f2fe7ee424e1b766e6b49865 Mon Sep 17 00:00:00 2001
From: Pablo Occhiuzzi <104530403+opablon@users.noreply.github.com>
Date: Wed, 6 Aug 2025 13:50:47 +0000
Subject: [PATCH 3/3] fix footer top margin

---
 src/App.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.jsx b/src/App.jsx
index dcfb3a9..4023d25 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -200,7 +200,7 @@ function App() {
           </div>
           
           {/* Footer */}
-          <footer ref={footerRef} className="mt-12 pt-6 border-t border-gray-200 text-center text-gray-500">
+          <footer ref={footerRef} className="mt-4 pt-6 border-t border-gray-200 text-center text-gray-500">
             <p>
               <a 
                 href="https://github.com/opablon/cae"