From 763c42d50d092a783e082f8164cf5c7d4e9574d6 Mon Sep 17 00:00:00 2001
From: CarlosssFlores <307100636@pcpuma.acatlan.unam.mx>
Date: Mon, 10 Nov 2025 12:31:34 -0600
Subject: [PATCH] pregunta 3-3.5

---
 src/app/(Administrador)/pregunta3.1/page.tsx  |  46 +--
 .../(Administrador)/pregunta3.1/page3.1.css   | 149 +++----
 src/app/(Administrador)/pregunta3.2/page.tsx  |   2 +-
 src/app/(Administrador)/pregunta3.3/page.tsx  |   2 +-
 src/app/(Administrador)/pregunta3.4/page.tsx  | 209 +++++-----
 .../(Administrador)/pregunta3.4/page3.4.css   | 164 ++++----
 src/app/(Administrador)/pregunta3.5/page.tsx  |   2 +-
 .../(Administrador)/pregunta3.5/page3.5.css   |  45 ++-
 src/app/(Administrador)/pregunta3/page.tsx    | 379 ++++++++++++------
 src/app/(Administrador)/pregunta3/page3.css   | 143 ++++---
 10 files changed, 665 insertions(+), 476 deletions(-)

diff --git a/src/app/(Administrador)/pregunta3.1/page.tsx b/src/app/(Administrador)/pregunta3.1/page.tsx
index 0d9342b..e42253a 100644
--- a/src/app/(Administrador)/pregunta3.1/page.tsx
+++ b/src/app/(Administrador)/pregunta3.1/page.tsx
@@ -148,7 +148,7 @@ export default function Pregunta3() {
             Presione cada pestaña para ingresar la información.
           </p>
 
-          {/* Pestañas simuladas */}
+          {/* Pestañas */}
           <div className="tab-container">
             <div className="tab active">
               Computadoras de escritorio Plataforma PC
@@ -165,8 +165,8 @@ export default function Pregunta3() {
             <div className="tab inactive">Alto rendimiento Servidores</div>
           </div>
 
-          {/* Tabla principal */}
-          <div className="tabla-pc-container">
+          {/* Tabla */}
+          <div className="tabla-wrapper">
             <table className="tabla-pc">
               <thead>
                 <tr>
@@ -181,35 +181,31 @@ export default function Pregunta3() {
                   </th>
                 </tr>
                 <tr>
-                  <th className="sub-header">Alumnos</th>
-                  <th className="sub-header">Profesores</th>
-                  <th className="sub-header">Técnicos Académicos</th>
-                  <th className="sub-header">Investigadores</th>
-                  <th className="sub-header">Administrativos</th>
+                  <th>Alumnos</th>
+                  <th>Profesores</th>
+                  <th>Técnicos Académicos</th>
+                  <th>Investigadores</th>
+                  <th>Administrativos</th>
                 </tr>
               </thead>
               <tbody>
-                {data.map((item, index) => (
-                  <tr key={index}>
+                {data.map((item, i) => (
+                  <tr key={i}>
                     <td className="tipo-procesador">{item.tipo}</td>
                     <td>
-                      <input type="text" value={item.alumnos} readOnly />
+                      <input value={item.alumnos} readOnly />
                     </td>
                     <td>
-                      <input type="text" value={item.profesores} readOnly />
+                      <input value={item.profesores} readOnly />
                     </td>
                     <td>
-                      <input type="text" value={item.tecnicos} readOnly />
+                      <input value={item.tecnicos} readOnly />
                     </td>
                     <td>
-                      <input type="text" value={item.investigadores} readOnly />
+                      <input value={item.investigadores} readOnly />
                     </td>
                     <td>
-                      <input
-                        type="text"
-                        value={item.administrativos}
-                        readOnly
-                      />
+                      <input value={item.administrativos} readOnly />
                     </td>
                     <td className="total-celda">{item.total}</td>
                   </tr>
@@ -217,19 +213,19 @@ export default function Pregunta3() {
                 <tr className="fila-total">
                   <td className="tipo-procesador">Total</td>
                   <td>
-                    <input type="text" value={total.alumnos} readOnly />
+                    <input value={total.alumnos} readOnly />
                   </td>
                   <td>
-                    <input type="text" value={total.profesores} readOnly />
+                    <input value={total.profesores} readOnly />
                   </td>
                   <td>
-                    <input type="text" value={total.tecnicos} readOnly />
+                    <input value={total.tecnicos} readOnly />
                   </td>
                   <td>
-                    <input type="text" value={total.investigadores} readOnly />
+                    <input value={total.investigadores} readOnly />
                   </td>
                   <td>
-                    <input type="text" value={total.administrativos} readOnly />
+                    <input value={total.administrativos} readOnly />
                   </td>
                   <td className="total-celda final-total">{total.total}</td>
                 </tr>
@@ -242,7 +238,7 @@ export default function Pregunta3() {
         </section>
 
         <div className="boton-contenedor">
-          <Link href="/pregunta3-2" className="boton siguiente">
+          <Link href="/pregunta3.2" className="boton siguiente">
             Pregunta 3 (2/5) →
           </Link>
         </div>
diff --git a/src/app/(Administrador)/pregunta3.1/page3.1.css b/src/app/(Administrador)/pregunta3.1/page3.1.css
index 6850464..59fba05 100644
--- a/src/app/(Administrador)/pregunta3.1/page3.1.css
+++ b/src/app/(Administrador)/pregunta3.1/page3.1.css
@@ -1,17 +1,33 @@
-/* === ESTILOS PREGUNTA 3 (1/5) === */
+/* === CONTENEDOR GENERAL === */
+.pregunta-page {
+  display: flex;
+  justify-content: center;
+  padding: 2rem 0;
+}
 
+.pregunta-container {
+  width: 90%;
+  max-width: 1100px;
+  background-color: white;
+  padding: 1.5rem;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+/* === TITULOS === */
 .pregunta-titulo {
   text-align: center;
-  color: #1e3a8a;
-  margin-bottom: 1.2rem;
-  font-size: 1.5rem;
+  color: #0a2d6e;
+  margin-bottom: 1rem;
+  font-size: 1.6rem;
   font-weight: 700;
 }
 
 .pregunta-texto {
   font-size: 1rem;
-  font-weight: 500;
-  margin-bottom: 0.5rem;
+  font-weight: 600;
+  margin-bottom: 0.2rem;
+  color: #1f2937;
 }
 
 .pregunta-subtexto {
@@ -23,126 +39,113 @@
 /* === PESTAÑAS === */
 .tab-container {
   display: flex;
-  overflow-x: auto;
-  border-bottom: 2px solid #e5e7eb;
-  margin-bottom: 1.5rem;
+  border-bottom: 3px solid #d1d5db;
+  margin-bottom: 1rem;
 }
 
 .tab {
-  padding: 0.8rem 1.2rem;
+  padding: 0.6rem 1rem;
   cursor: pointer;
-  white-space: nowrap;
-  font-weight: 500;
+  font-weight: 600;
   border-radius: 8px 8px 0 0;
-  transition: all 0.2s ease;
   margin-right: 0.25rem;
+  font-size: 0.9rem;
 }
 
 .tab.active {
   color: #1e40af;
-  border-bottom: 3px solid #1e40af;
+  border: 2px solid #1e40af;
+  border-bottom: none;
   background-color: #f3f4f6;
 }
 
 .tab.inactive {
   color: #6b7280;
-  background-color: #ffffff;
-}
-
-.tab.inactive:hover {
-  color: #1e40af;
-  background-color: #f9fafb;
+  background-color: #fff;
 }
 
 /* === TABLA === */
-.tabla-pc-container {
+.tabla-wrapper {
   overflow-x: auto;
-  margin-bottom: 2rem;
-  position: relative;
+  display: flex;
+  justify-content: center;
 }
 
 .tabla-pc {
-  width: 100%;
   border-collapse: collapse;
-  min-width: 950px;
-  font-size: 0.85rem;
+  width: 95%;
+  text-align: center;
+  font-size: 0.83rem;
+}
+
+.tabla-pc th,
+.tabla-pc td {
+  border: 1px solid #d1d5db;
+  padding: 0.4rem;
+}
+
+.header-procesador,
+.header-total {
+  background-color: #3b82f6;
+  color: white;
+  font-weight: 700;
+}
+
+.header-poblacion {
+  background-color: #9333ea;
+  color: white;
+  font-weight: 700;
 }
 
 .tabla-pc th {
-  padding: 0.7rem 0.5rem;
   text-align: center;
-  color: white;
-  font-weight: 600;
-  border: 1px solid #d1d5db;
 }
 
-.tabla-pc .header-procesador,
-.tabla-pc .header-total {
-  background-color: #3b82f6;
-}
-
-.tabla-pc .header-poblacion {
-  background-color: #9333ea;
-}
-
-.tabla-pc .sub-header {
-  background-color: #a855f7;
-  color: white;
-}
-
-.tabla-pc td {
-  border: 1px solid #e5e7eb;
-  text-align: center;
-  vertical-align: middle;
-}
-
-.tabla-pc .tipo-procesador {
+.tipo-procesador {
   text-align: left;
-  font-weight: 500;
-  padding: 0.6rem 0.5rem;
   background-color: #f9fafb;
-  color: #374151;
+  font-weight: 600;
+  padding-left: 0.5rem;
 }
 
-.tabla-pc input[type="text"] {
-  width: 100%;
-  padding: 0.45rem 0.3rem;
+.tabla-pc input {
+  width: 60px;
+  text-align: center;
   border: none;
   background-color: #f3f4f6;
-  text-align: center;
-  box-sizing: border-box;
-  color: #374151;
+  border-radius: 4px;
+  padding: 0.2rem;
+  font-size: 0.8rem;
+  color: #111827;
 }
 
-.tabla-pc .total-celda {
+.total-celda {
   background-color: #e0f2fe;
   font-weight: 600;
   color: #1e3a8a;
 }
 
-.tabla-pc .fila-total td {
+.fila-total td {
   background-color: #bfdbfe;
   font-weight: 700;
 }
 
-.tabla-pc .fila-total .total-celda {
+.fila-total .total-celda {
   background-color: #93c5fd;
 }
 
 /* === BOTONES === */
 .boton-consultar {
-  position: absolute;
-  bottom: -3.5rem;
-  right: 0;
+  margin-top: 1rem;
   background-color: #10b981;
   color: white;
-  padding: 0.6rem 1.2rem;
+  padding: 0.5rem 1rem;
   border: none;
   border-radius: 8px;
   font-size: 0.9rem;
   cursor: pointer;
-  box-shadow: 0 2px 5px rgba(16, 185, 129, 0.3);
-  transition: background-color 0.2s;
+  float: right;
+  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
 }
 
 .boton-consultar:hover {
@@ -150,21 +153,19 @@
 }
 
 .boton-contenedor {
-  margin-top: 5rem;
   text-align: right;
+  margin-top: 4rem;
 }
 
 .boton.siguiente {
   background-color: #2563eb;
   color: white;
-  padding: 0.7rem 1.4rem;
+  padding: 0.6rem 1.2rem;
   border-radius: 8px;
   text-decoration: none;
   font-weight: 500;
-  box-shadow: 0 2px 5px rgba(37, 99, 235, 0.3);
-  transition: background-color 0.2s;
 }
 
 .boton.siguiente:hover {
-  background-color: #1e40af;
+  background-color: #1e3a8a;
 }
diff --git a/src/app/(Administrador)/pregunta3.2/page.tsx b/src/app/(Administrador)/pregunta3.2/page.tsx
index f464093..37d5445 100644
--- a/src/app/(Administrador)/pregunta3.2/page.tsx
+++ b/src/app/(Administrador)/pregunta3.2/page.tsx
@@ -260,7 +260,7 @@ export default function Pregunta3_2() {
         </section>
 
         <div className="boton-contenedor">
-          <Link href="/pregunta3-3" className="boton siguiente">
+          <Link href="/pregunta3.3" className="boton siguiente">
             Pregunta 3 (3/5) →
           </Link>
         </div>
diff --git a/src/app/(Administrador)/pregunta3.3/page.tsx b/src/app/(Administrador)/pregunta3.3/page.tsx
index 68c43c4..e74e421 100644
--- a/src/app/(Administrador)/pregunta3.3/page.tsx
+++ b/src/app/(Administrador)/pregunta3.3/page.tsx
@@ -261,7 +261,7 @@ export default function Pregunta3_3() {
         </section>
 
         <div className="boton-contenedor">
-          <Link href="/pregunta3-4" className="boton siguiente">
+          <Link href="/pregunta3.4" className="boton siguiente">
             Pregunta 3 (4/5) →
           </Link>
         </div>
diff --git a/src/app/(Administrador)/pregunta3.4/page.tsx b/src/app/(Administrador)/pregunta3.4/page.tsx
index 74b41ea..7c5c13f 100644
--- a/src/app/(Administrador)/pregunta3.4/page.tsx
+++ b/src/app/(Administrador)/pregunta3.4/page.tsx
@@ -144,118 +144,113 @@ export default function Pregunta3_4() {
   };
 
   return (
-    <main className="pregunta-page pregunta3">
-      <div className="pregunta-container">
-        <h1 className="pregunta-titulo">PREGUNTA 3 (4/5)</h1>
+    <main className="pregunta3-container">
+      <h1 className="pregunta3-titulo">PREGUNTA 3 (4/5)</h1>
 
-        <section className="pregunta-seccion">
-          <p className="pregunta-texto">
-            3. Desglose la cantidad de población beneficiada por plataforma y
-            tipo de procesador: *
-          </p>
-          <p className="pregunta-subtexto">
-            Presione cada pestaña para ingresar la información.
-          </p>
+      <div className="pregunta3-descripcion">
+        <p>
+          <strong>3.</strong> Desglose la cantidad de población beneficiada por
+          plataforma y tipo de procesador:
+        </p>
+        <span className="subtexto">
+          Presione cada pestaña para ingresar la información.
+        </span>
+      </div>
 
-          {/* === PESTAÑAS === */}
-          <div className="tab-container">
-            <div className="tab inactive">
-              Computadoras de escritorio Plataforma PC
-            </div>
-            <div className="tab inactive">
-              Computadoras de escritorio Plataforma Apple
-            </div>
-            <div className="tab inactive">
-              Computadoras portátiles Plataforma PC
-            </div>
-            <div className="tab active">
-              Computadoras portátiles Plataforma Apple
-            </div>
-            <div className="tab inactive">Alto rendimiento Servidores</div>
-          </div>
+      {/* === PESTAÑAS === */}
+      <div className="tabs">
+        <button className="tab inactive">
+          Computadoras de escritorio Plataforma PC
+        </button>
+        <button className="tab inactive">
+          Computadoras de escritorio Plataforma Apple
+        </button>
+        <button className="tab inactive">
+          Computadoras portátiles Plataforma PC
+        </button>
+        <button className="tab active">
+          Computadoras portátiles Plataforma Apple
+        </button>
+        <button className="tab inactive">Alto rendimiento Servidores</button>
+      </div>
 
-          {/* === TABLA === */}
-          <div className="tabla-apple-container">
-            <table className="tabla-apple">
-              <thead>
-                <tr>
-                  <th rowSpan={2} className="header-procesador">
-                    Plataforma Apple <br /> Tipo de procesador
-                  </th>
-                  <th colSpan={5} className="header-poblacion">
-                    Población Beneficiada
-                  </th>
-                  <th rowSpan={2} className="header-total">
-                    Total
-                  </th>
-                </tr>
-                <tr>
-                  <th className="sub-header">Alumnos</th>
-                  <th className="sub-header">Profesores</th>
-                  <th className="sub-header">Técnicos Académicos</th>
-                  <th className="sub-header">Investigadores</th>
-                  <th className="sub-header">Administrativos</th>
-                </tr>
-              </thead>
+      {/* === TABLA === */}
+      <div className="tabla-wrapper">
+        <table className="tabla-pregunta3">
+          <thead>
+            <tr>
+              <th rowSpan={2} className="header-procesador">
+                Plataforma Apple <br /> Tipo de procesador
+              </th>
+              <th colSpan={5} className="header-poblacion">
+                Población Beneficiada
+              </th>
+              <th rowSpan={2} className="header-total">
+                Total
+              </th>
+            </tr>
+            <tr>
+              <th>Alumnos</th>
+              <th>Profesores</th>
+              <th>Técnicos Académicos</th>
+              <th>Investigadores</th>
+              <th>Administrativos</th>
+            </tr>
+          </thead>
 
-              <tbody>
-                {data.map((item, index) => (
-                  <tr key={index}>
-                    <td className="tipo-procesador">{item.tipo}</td>
-                    <td>
-                      <input type="text" value={item.alumnos} readOnly />
-                    </td>
-                    <td>
-                      <input type="text" value={item.profesores} readOnly />
-                    </td>
-                    <td>
-                      <input type="text" value={item.tecnicos} readOnly />
-                    </td>
-                    <td>
-                      <input type="text" value={item.investigadores} readOnly />
-                    </td>
-                    <td>
-                      <input
-                        type="text"
-                        value={item.administrativos}
-                        readOnly
-                      />
-                    </td>
-                    <td className="total-celda">{item.total}</td>
-                  </tr>
-                ))}
-                <tr className="fila-total">
-                  <td className="tipo-procesador">Total</td>
-                  <td>
-                    <input type="text" value={total.alumnos} readOnly />
-                  </td>
-                  <td>
-                    <input type="text" value={total.profesores} readOnly />
-                  </td>
-                  <td>
-                    <input type="text" value={total.tecnicos} readOnly />
-                  </td>
-                  <td>
-                    <input type="text" value={total.investigadores} readOnly />
-                  </td>
-                  <td>
-                    <input type="text" value={total.administrativos} readOnly />
-                  </td>
-                  <td className="total-celda final-total">{total.total}</td>
-                </tr>
-              </tbody>
-            </table>
-            <button className="boton-consultar">
-              Consultar las equivalencias de procesadores
-            </button>
-          </div>
-        </section>
+          <tbody>
+            {data.map((item, index) => (
+              <tr key={index}>
+                <td className="tipo-procesador">{item.tipo}</td>
+                <td>
+                  <input type="text" value={item.alumnos} readOnly />
+                </td>
+                <td>
+                  <input type="text" value={item.profesores} readOnly />
+                </td>
+                <td>
+                  <input type="text" value={item.tecnicos} readOnly />
+                </td>
+                <td>
+                  <input type="text" value={item.investigadores} readOnly />
+                </td>
+                <td>
+                  <input type="text" value={item.administrativos} readOnly />
+                </td>
+                <td className="celda-total">{item.total}</td>
+              </tr>
+            ))}
+            <tr className="fila-total">
+              <td>Total</td>
+              <td>
+                <input type="text" value={total.alumnos} readOnly />
+              </td>
+              <td>
+                <input type="text" value={total.profesores} readOnly />
+              </td>
+              <td>
+                <input type="text" value={total.tecnicos} readOnly />
+              </td>
+              <td>
+                <input type="text" value={total.investigadores} readOnly />
+              </td>
+              <td>
+                <input type="text" value={total.administrativos} readOnly />
+              </td>
+              <td className="celda-total final">{total.total}</td>
+            </tr>
+          </tbody>
+        </table>
 
-        <div className="boton-contenedor">
-          <Link href="/pregunta3-5" className="boton siguiente">
-            Pregunta 3 (5/5) →
-          </Link>
-        </div>
+        <button className="boton-consultar">
+          Consultar las equivalencias de procesadores
+        </button>
+      </div>
+
+      <div className="boton-siguiente">
+        <Link href="/pregunta3.5" className="next">
+          Pregunta 3 (5/5) →
+        </Link>
       </div>
     </main>
   );
diff --git a/src/app/(Administrador)/pregunta3.4/page3.4.css b/src/app/(Administrador)/pregunta3.4/page3.4.css
index bcf163a..1f94b1f 100644
--- a/src/app/(Administrador)/pregunta3.4/page3.4.css
+++ b/src/app/(Administrador)/pregunta3.4/page3.4.css
@@ -1,170 +1,166 @@
-/* === ESTILOS PREGUNTA 3 (4/5) - Portátiles Plataforma Apple === */
+/* === CONTENEDOR GENERAL === */
+.pregunta3-container {
+  max-width: 1100px;
+  margin: 2rem auto;
+  padding: 2rem;
+  background: #fff;
+  border-radius: 16px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+  font-family: "Inter", sans-serif;
+}
 
-.pregunta-titulo {
-  text-align: center;
-  color: #a855f7;
-  margin-bottom: 1.2rem;
-  font-size: 1.5rem;
+.pregunta3-titulo {
+  text-align: left;
+  font-size: 1.3rem;
   font-weight: 700;
-}
-
-.pregunta-texto {
-  font-size: 1rem;
-  font-weight: 500;
-  margin-bottom: 0.5rem;
-}
-
-.pregunta-subtexto {
-  font-size: 0.9rem;
-  color: #6b7280;
+  color: #6d28d9;
   margin-bottom: 1rem;
 }
 
-/* === PESTAÑAS === */
-.tab-container {
+.pregunta3-descripcion p {
+  font-size: 1rem;
+  margin-bottom: 0.3rem;
+}
+
+.subtexto {
+  font-size: 0.9rem;
+  color: #6b7280;
+}
+
+/* === TABS === */
+.tabs {
   display: flex;
-  overflow-x: auto;
+  flex-wrap: wrap;
+  margin: 1rem 0 1.5rem;
   border-bottom: 2px solid #e5e7eb;
-  margin-bottom: 1.5rem;
 }
 
 .tab {
-  padding: 0.8rem 1.2rem;
+  padding: 0.8rem 1.1rem;
+  font-size: 0.9rem;
+  border: none;
   cursor: pointer;
-  white-space: nowrap;
-  font-weight: 500;
-  border-radius: 8px 8px 0 0;
+  background: #fff;
+  color: #6b7280;
   transition: all 0.2s ease;
+  border-radius: 8px 8px 0 0;
   margin-right: 0.25rem;
 }
 
 .tab.active {
-  color: #9333ea;
+  background: #f3f4f6;
+  color: #7e22ce;
   border-bottom: 3px solid #9333ea;
-  background-color: #f3f4f6;
-}
-
-.tab.inactive {
-  color: #6b7280;
-  background-color: #ffffff;
 }
 
 .tab.inactive:hover {
+  background: #f9fafb;
   color: #9333ea;
-  background-color: #f9fafb;
 }
 
 /* === TABLA === */
-.tabla-apple-container {
+.tabla-wrapper {
   overflow-x: auto;
-  margin-bottom: 2rem;
   position: relative;
+  margin-bottom: 2.5rem;
 }
 
-.tabla-apple {
+.tabla-pregunta3 {
   width: 100%;
   border-collapse: collapse;
   min-width: 950px;
   font-size: 0.85rem;
 }
 
-.tabla-apple th {
-  padding: 0.7rem 0.5rem;
-  text-align: center;
-  color: white;
-  font-weight: 600;
-  border: 1px solid #d1d5db;
-}
-
-.tabla-apple .header-procesador,
-.tabla-apple .header-total {
-  background-color: #9333ea;
-}
-
-.tabla-apple .header-poblacion {
-  background-color: #7e22ce;
-}
-
-.tabla-apple .sub-header {
-  background-color: #a855f7;
-  color: white;
-}
-
-.tabla-apple td {
+.tabla-pregunta3 th,
+.tabla-pregunta3 td {
   border: 1px solid #e5e7eb;
   text-align: center;
-  vertical-align: middle;
+  padding: 0.5rem;
 }
 
-.tabla-apple .tipo-procesador {
-  text-align: left;
-  font-weight: 500;
-  padding: 0.6rem 0.5rem;
-  background-color: #faf5ff;
-  color: #4b5563;
+.header-procesador,
+.header-total {
+  background-color: #9333ea;
+  color: #fff;
+  font-weight: 600;
 }
 
-.tabla-apple input[type="text"] {
+.header-poblacion {
+  background-color: #7e22ce;
+  color: #fff;
+  font-weight: 600;
+}
+
+.tabla-pregunta3 th {
+  padding: 0.7rem;
+}
+
+.tabla-pregunta3 input {
   width: 100%;
-  padding: 0.45rem 0.3rem;
+  padding: 0.4rem;
   border: none;
   background-color: #f3f4f6;
   text-align: center;
-  box-sizing: border-box;
-  color: #374151;
+  font-size: 0.85rem;
 }
 
-.tabla-apple .total-celda {
+.tipo-procesador {
+  text-align: left;
+  background-color: #faf5ff;
+  font-weight: 500;
+  color: #4b5563;
+}
+
+.celda-total {
   background-color: #f3e8ff;
   font-weight: 600;
-  color: #7e22ce;
+  color: #6b21a8;
 }
 
-.tabla-apple .fila-total td {
+.fila-total td {
   background-color: #e9d5ff;
   font-weight: 700;
 }
 
-.tabla-apple .fila-total .total-celda {
+.fila-total .celda-total.final {
   background-color: #d8b4fe;
 }
 
 /* === BOTONES === */
 .boton-consultar {
   position: absolute;
-  bottom: -3.5rem;
+  bottom: -3rem;
   right: 0;
   background-color: #10b981;
   color: white;
-  padding: 0.6rem 1.2rem;
+  padding: 0.6rem 1.1rem;
   border: none;
   border-radius: 8px;
   font-size: 0.9rem;
   cursor: pointer;
-  box-shadow: 0 2px 5px rgba(16, 185, 129, 0.3);
-  transition: background-color 0.2s;
+  transition: all 0.2s;
 }
 
 .boton-consultar:hover {
   background-color: #059669;
 }
 
-.boton-contenedor {
-  margin-top: 5rem;
+.boton-siguiente {
   text-align: right;
+  margin-top: 4rem;
 }
 
-.boton.siguiente {
+.next {
   background-color: #9333ea;
   color: white;
   padding: 0.7rem 1.4rem;
   border-radius: 8px;
   text-decoration: none;
   font-weight: 500;
-  box-shadow: 0 2px 5px rgba(147, 51, 234, 0.3);
-  transition: background-color 0.2s;
+  transition: 0.2s;
 }
 
-.boton.siguiente:hover {
+.next:hover {
   background-color: #7e22ce;
 }
diff --git a/src/app/(Administrador)/pregunta3.5/page.tsx b/src/app/(Administrador)/pregunta3.5/page.tsx
index a82a285..4bc0f71 100644
--- a/src/app/(Administrador)/pregunta3.5/page.tsx
+++ b/src/app/(Administrador)/pregunta3.5/page.tsx
@@ -146,7 +146,7 @@ export default function Pregunta3_5() {
 
               <tbody>
                 {data.map((item, index) => (
-                  <tr key={index}>
+                  <tr key={index} className="tabla-fila">
                     <td className="tipo-procesador">{item.tipo}</td>
                     <td>
                       <input type="text" value={item.alumnos} readOnly />
diff --git a/src/app/(Administrador)/pregunta3.5/page3.5.css b/src/app/(Administrador)/pregunta3.5/page3.5.css
index 8ba8eea..efbc42d 100644
--- a/src/app/(Administrador)/pregunta3.5/page3.5.css
+++ b/src/app/(Administrador)/pregunta3.5/page3.5.css
@@ -1,23 +1,43 @@
 /* === ESTILOS PREGUNTA 3 (5/5) - Alto Rendimiento Servidores === */
 
+.pregunta-page {
+  display: flex;
+  justify-content: center;
+  padding: 2rem 1rem;
+  background-color: #f9fafb;
+}
+
+.pregunta-container {
+  width: 100%;
+  max-width: 1100px;
+  background-color: #ffffff;
+  border-radius: 12px;
+  padding: 2rem 2.5rem;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
+}
+
 .pregunta-titulo {
   text-align: center;
   color: #2563eb;
-  margin-bottom: 1.2rem;
-  font-size: 1.5rem;
+  margin-bottom: 1.5rem;
+  font-size: 1.6rem;
   font-weight: 700;
+  border-bottom: 3px solid #2563eb;
+  display: inline-block;
+  padding-bottom: 0.3rem;
 }
 
 .pregunta-texto {
   font-size: 1rem;
   font-weight: 500;
   margin-bottom: 0.5rem;
+  color: #1f2937;
 }
 
 .pregunta-subtexto {
   font-size: 0.9rem;
   color: #6b7280;
-  margin-bottom: 1rem;
+  margin-bottom: 1.2rem;
 }
 
 /* === PESTAÑAS === */
@@ -42,6 +62,7 @@
   color: #2563eb;
   border-bottom: 3px solid #2563eb;
   background-color: #f3f4f6;
+  box-shadow: inset 0 -2px 4px rgba(37, 99, 235, 0.1);
 }
 
 .tab.inactive {
@@ -57,7 +78,7 @@
 /* === TABLA === */
 .tabla-servidores-container {
   overflow-x: auto;
-  margin-bottom: 2rem;
+  margin-bottom: 3rem;
   position: relative;
 }
 
@@ -66,6 +87,9 @@
   border-collapse: collapse;
   min-width: 950px;
   font-size: 0.85rem;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.08);
 }
 
 .tabla-servidores th {
@@ -94,12 +118,18 @@
   border: 1px solid #e5e7eb;
   text-align: center;
   vertical-align: middle;
+  background-color: #ffffff;
+  transition: background-color 0.2s;
+}
+
+.tabla-fila:hover td {
+  background-color: #f3f4f6;
 }
 
 .tabla-servidores .tipo-procesador {
   text-align: left;
   font-weight: 500;
-  padding: 0.6rem 0.5rem;
+  padding: 0.6rem 0.7rem;
   background-color: #eff6ff;
   color: #374151;
 }
@@ -108,10 +138,11 @@
   width: 100%;
   padding: 0.45rem 0.3rem;
   border: none;
-  background-color: #f3f4f6;
+  background-color: #f9fafb;
   text-align: center;
-  box-sizing: border-box;
   color: #374151;
+  border-radius: 4px;
+  font-weight: 500;
 }
 
 .tabla-servidores .total-celda {
diff --git a/src/app/(Administrador)/pregunta3/page.tsx b/src/app/(Administrador)/pregunta3/page.tsx
index c0abc0a..2952041 100644
--- a/src/app/(Administrador)/pregunta3/page.tsx
+++ b/src/app/(Administrador)/pregunta3/page.tsx
@@ -1,108 +1,220 @@
 "use client";
 
-import React from "react";
+import React, { useState } from "react";
 import Link from "next/link";
-import "./page3.css"; // Asegúrate de que los estilos están en este archivo
+import "./page3.css";
 
 export default function Pregunta3() {
-  // Datos de ejemplo basados en las imágenes (especialmente la de la tabla final)
+  const [activeTab, setActiveTab] = useState(0);
+
+  const tabs = [
+    "Computadoras de escritorio Plataforma PC",
+    "Computadoras de escritorio Plataforma Apple",
+    "Computadoras portátiles Plataforma PC",
+    "Computadoras portátiles Plataforma Apple",
+    "Alto rendimiento Servidores",
+  ];
+
+  // === DATOS DE CADA TABLA ===
   const data = [
+    // === 1. PC Escritorio ===
     {
-      tipo: "Xeon 6",
-      alumnos: "",
-      profesores: "",
-      tecnicos: "",
-      investigadores: "0",
-      administrativos: "0",
-      total: "0",
+      color: "#16a34a",
+      headerColor: "#15803d",
+      rows: [
+        {
+          tipo: "Core i9 / Ryzen 9",
+          alumnos: "",
+          profesores: "",
+          tecnicos: "",
+          investigadores: "",
+          administrativos: "",
+          total: "0",
+        },
+        {
+          tipo: "Core i7 / Ryzen 7",
+          alumnos: "15",
+          profesores: "8",
+          tecnicos: "",
+          investigadores: "",
+          administrativos: "",
+          total: "23",
+        },
+        {
+          tipo: "Core i5 / Ryzen 5",
+          alumnos: "10",
+          profesores: "5",
+          tecnicos: "",
+          investigadores: "",
+          administrativos: "2",
+          total: "17",
+        },
+      ],
+      total: {
+        alumnos: "25",
+        profesores: "13",
+        tecnicos: "0",
+        investigadores: "0",
+        administrativos: "2",
+        total: "40",
+      },
     },
+    // === 2. Apple Escritorio ===
     {
-      tipo: "Xeon Bronce, Plata, Oro 5a generación",
-      alumnos: "",
-      profesores: "",
-      tecnicos: "",
-      investigadores: "0",
-      administrativos: "1",
-      total: "1",
+      color: "#a855f7",
+      headerColor: "#7e22ce",
+      rows: [
+        {
+          tipo: "Familia M3",
+          alumnos: "10",
+          profesores: "2",
+          tecnicos: "",
+          investigadores: "",
+          administrativos: "",
+          total: "12",
+        },
+        {
+          tipo: "Familia M2",
+          alumnos: "5",
+          profesores: "3",
+          tecnicos: "",
+          investigadores: "",
+          administrativos: "",
+          total: "8",
+        },
+      ],
+      total: {
+        alumnos: "15",
+        profesores: "5",
+        tecnicos: "0",
+        investigadores: "0",
+        administrativos: "0",
+        total: "20",
+      },
     },
+    // === 3. PC Portátiles ===
     {
-      tipo: "Xeon Bronce, Plata, Oro 4a generación",
-      alumnos: "",
-      profesores: "",
-      tecnicos: "",
-      investigadores: "0",
-      administrativos: "6",
-      total: "6",
+      color: "#22c55e",
+      headerColor: "#15803d",
+      rows: [
+        {
+          tipo: "Core i5 (12a generación)",
+          alumnos: "12",
+          profesores: "5",
+          tecnicos: "",
+          investigadores: "",
+          administrativos: "",
+          total: "17",
+        },
+        {
+          tipo: "Core i7 (13a generación)",
+          alumnos: "6",
+          profesores: "4",
+          tecnicos: "",
+          investigadores: "",
+          administrativos: "1",
+          total: "11",
+        },
+      ],
+      total: {
+        alumnos: "18",
+        profesores: "9",
+        tecnicos: "0",
+        investigadores: "0",
+        administrativos: "1",
+        total: "28",
+      },
     },
+    // === 4. Apple Portátiles ===
     {
-      tipo: "Xeon Bronce, Plata, Oro 3a generación",
-      alumnos: "",
-      profesores: "",
-      tecnicos: "",
-      investigadores: "0",
-      administrativos: "1",
-      total: "1",
+      color: "#9333ea",
+      headerColor: "#7e22ce",
+      rows: [
+        {
+          tipo: "Familia M2",
+          alumnos: "35",
+          profesores: "3",
+          tecnicos: "",
+          investigadores: "",
+          administrativos: "",
+          total: "38",
+        },
+        {
+          tipo: "Familia M1",
+          alumnos: "",
+          profesores: "5",
+          tecnicos: "",
+          investigadores: "",
+          administrativos: "1",
+          total: "6",
+        },
+        {
+          tipo: "i5 o equivalentes (12a generación en adelante)",
+          alumnos: "",
+          profesores: "14",
+          tecnicos: "",
+          investigadores: "",
+          administrativos: "",
+          total: "14",
+        },
+      ],
+      total: {
+        alumnos: "35",
+        profesores: "31",
+        tecnicos: "0",
+        investigadores: "0",
+        administrativos: "5",
+        total: "71",
+      },
     },
+    // === 5. Servidores ===
     {
-      tipo: "Xeon Bronce, Plata, Oro 2a generación",
-      alumnos: "",
-      profesores: "",
-      tecnicos: "",
-      investigadores: "0",
-      administrativos: "0",
-      total: "0",
-    },
-    {
-      tipo: "Xeon Bronce, Plata, Oro 1a generación",
-      alumnos: "",
-      profesores: "",
-      tecnicos: "",
-      investigadores: "0",
-      administrativos: "0",
-      total: "0",
-    },
-    {
-      tipo: "Xeon E3, E5, E7",
-      alumnos: "19",
-      profesores: "",
-      tecnicos: "",
-      investigadores: "0",
-      administrativos: "16",
-      total: "35",
-    },
-    {
-      tipo: "Xeon Phi",
-      alumnos: "",
-      profesores: "",
-      tecnicos: "",
-      investigadores: "0",
-      administrativos: "0",
-      total: "0",
-    },
-    {
-      tipo: "Xeon's anteriores",
-      alumnos: "",
-      profesores: "",
-      tecnicos: "",
-      investigadores: "0",
-      administrativos: "1",
-      total: "1",
+      color: "#2563eb",
+      headerColor: "#1e40af",
+      rows: [
+        {
+          tipo: "Xeon E3, E5, E7",
+          alumnos: "19",
+          profesores: "",
+          tecnicos: "",
+          investigadores: "16",
+          administrativos: "",
+          total: "35",
+        },
+        {
+          tipo: "Xeon Bronce, Plata, Oro 6a generación",
+          alumnos: "",
+          profesores: "",
+          tecnicos: "",
+          investigadores: "",
+          administrativos: "1",
+          total: "1",
+        },
+        {
+          tipo: "Xeon Phi",
+          alumnos: "",
+          profesores: "",
+          tecnicos: "",
+          investigadores: "",
+          administrativos: "1",
+          total: "1",
+        },
+      ],
+      total: {
+        alumnos: "19",
+        profesores: "0",
+        tecnicos: "0",
+        investigadores: "16",
+        administrativos: "2",
+        total: "37",
+      },
     },
   ];
 
-  const total = {
-    alumnos: "19",
-    profesores: "0",
-    tecnicos: "0",
-    investigadores: "0",
-    administrativos: "24", // Suma de los valores de ejemplo
-    total: "43", // Suma de los totales de ejemplo
-  };
-
   return (
-    <main className="pregunta-page pregunta3">
+    <main className="pregunta-page">
       <div className="pregunta-container">
-        <h1 className="pregunta-titulo">PREGUNTA 3 (5/5)</h1>
+        <h1 className="pregunta-titulo">PREGUNTA 3 (1/5 - 5/5)</h1>
 
         <section className="pregunta-seccion">
           <p className="pregunta-texto">
@@ -113,44 +225,65 @@ export default function Pregunta3() {
             Presione cada pestaña para ingresar la información.
           </p>
 
-          {/* === Pestañas de Plataforma (Simulación) === */}
+          {/* === PESTAÑAS === */}
           <div className="tab-container">
-            {/* Solo se muestra la pestaña 'Alto rendimiento Servidores' activa */}
-            <div className="tab active">Alto rendimiento Servidores</div>
-            <div className="tab inactive">
-              Computadoras portátiles Plataforma Apple
-            </div>
-            {/* ... otras pestañas que no son visibles en la imagen de la tabla ... */}
+            {tabs.map((tab, index) => (
+              <div
+                key={index}
+                className={`tab ${activeTab === index ? "active" : "inactive"}`}
+                style={
+                  activeTab === index
+                    ? {
+                        borderBottomColor: data[index].color,
+                        color: data[index].color,
+                      }
+                    : {}
+                }
+                onClick={() => setActiveTab(index)}
+              >
+                {tab}
+              </div>
+            ))}
           </div>
 
-          {/* === Contenido de la Tabla === */}
-          <div className="tabla-servidores-container">
-            <table className="tabla-servidores">
+          {/* === TABLA === */}
+          <div className="tabla-container">
+            <table className="tabla">
               <thead>
                 <tr>
-                  <th rowSpan={2} className="header-servidores">
-                    Servidores
-                    <br />
+                  <th
+                    rowSpan={2}
+                    className="header-procesador"
+                    style={{ backgroundColor: data[activeTab].color }}
+                  >
                     Tipo de procesador
                   </th>
-                  <th colSpan={5} className="header-poblacion">
+                  <th
+                    colSpan={5}
+                    className="header-poblacion"
+                    style={{ backgroundColor: data[activeTab].headerColor }}
+                  >
                     Población Beneficiada
                   </th>
-                  <th rowSpan={2} className="header-total">
+                  <th
+                    rowSpan={2}
+                    className="header-total"
+                    style={{ backgroundColor: data[activeTab].color }}
+                  >
                     Total
                   </th>
                 </tr>
                 <tr>
                   <th className="sub-header">Alumnos</th>
                   <th className="sub-header">Profesores</th>
-                  <th className="sub-header">Técnicos Académicos</th>
+                  <th className="sub-header">Técnicos</th>
                   <th className="sub-header">Investigadores</th>
                   <th className="sub-header">Administrativos</th>
                 </tr>
               </thead>
               <tbody>
-                {data.map((item, index) => (
-                  <tr key={index}>
+                {data[activeTab].rows.map((item, i) => (
+                  <tr key={i}>
                     <td className="tipo-procesador">{item.tipo}</td>
                     <td>
                       <input type="text" value={item.alumnos} readOnly />
@@ -177,34 +310,54 @@ export default function Pregunta3() {
                 <tr className="fila-total">
                   <td className="tipo-procesador">Total</td>
                   <td>
-                    <input type="text" value={total.alumnos} readOnly />
+                    <input
+                      type="text"
+                      value={data[activeTab].total.alumnos}
+                      readOnly
+                    />
                   </td>
                   <td>
-                    <input type="text" value={total.profesores} readOnly />
+                    <input
+                      type="text"
+                      value={data[activeTab].total.profesores}
+                      readOnly
+                    />
                   </td>
                   <td>
-                    <input type="text" value={total.tecnicos} readOnly />
+                    <input
+                      type="text"
+                      value={data[activeTab].total.tecnicos}
+                      readOnly
+                    />
                   </td>
                   <td>
-                    <input type="text" value={total.investigadores} readOnly />
+                    <input
+                      type="text"
+                      value={data[activeTab].total.investigadores}
+                      readOnly
+                    />
                   </td>
                   <td>
-                    <input type="text" value={total.administrativos} readOnly />
+                    <input
+                      type="text"
+                      value={data[activeTab].total.administrativos}
+                      readOnly
+                    />
                   </td>
-                  <td className="total-celda final-total">{total.total}</td>
+                  <td className="total-celda">{data[activeTab].total.total}</td>
                 </tr>
               </tbody>
             </table>
+
             <button className="boton-consultar">
-              Consultar el equivalente del procesador
+              Consultar las equivalencias de procesadores
             </button>
           </div>
         </section>
 
         <div className="boton-contenedor">
-          {/* Se asume que este sería el botón de navegación final o de guardar */}
-          <Link href="/siguiente-seccion" className="boton siguiente">
-            Pregunta 4 →
+          <Link href="/" className="boton volver">
+            ← Volver al inicio
           </Link>
         </div>
       </div>
diff --git a/src/app/(Administrador)/pregunta3/page3.css b/src/app/(Administrador)/pregunta3/page3.css
index 5e3e716..1c0a843 100644
--- a/src/app/(Administrador)/pregunta3/page3.css
+++ b/src/app/(Administrador)/pregunta3/page3.css
@@ -1,4 +1,28 @@
-/* --- Estilos específicos para la Pregunta 3 (Tabla y Pestañas) --- */
+/* === CONTENEDOR GENERAL === */
+.pregunta-page {
+  display: flex;
+  justify-content: center;
+  padding: 2rem;
+}
+
+.pregunta-container {
+  width: 100%;
+  max-width: 1100px;
+}
+
+.pregunta-titulo {
+  text-align: center;
+  color: #1e3a8a;
+  margin-bottom: 1.2rem;
+  font-size: 1.6rem;
+  font-weight: 700;
+}
+
+.pregunta-texto {
+  font-size: 1rem;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+}
 
 .pregunta-subtexto {
   font-size: 0.9rem;
@@ -9,16 +33,15 @@
 /* === PESTAÑAS === */
 .tab-container {
   display: flex;
-  flex-wrap: nowrap; /* Para que las pestañas se mantengan en una fila */
-  overflow-x: auto; /* Permite scroll horizontal si hay muchas pestañas */
-  margin-bottom: 1.5rem;
+  overflow-x: auto;
   border-bottom: 2px solid #e5e7eb;
+  margin-bottom: 1.5rem;
 }
 
 .tab {
   padding: 0.8rem 1.2rem;
   cursor: pointer;
-  white-space: nowrap; /* Previene el salto de línea en el texto de la pestaña */
+  white-space: nowrap;
   font-weight: 500;
   border-radius: 8px 8px 0 0;
   transition: all 0.2s ease;
@@ -26,8 +49,7 @@
 }
 
 .tab.active {
-  color: #1e40af;
-  border-bottom: 3px solid #1e40af;
+  font-weight: 600;
   background-color: #f3f4f6;
 }
 
@@ -37,26 +59,24 @@
 }
 
 .tab.inactive:hover {
-  color: #1e40af;
   background-color: #f9fafb;
 }
 
-/* === TABLA DE SERVIDORES === */
-.tabla-servidores-container {
-  overflow-x: auto; /* Permite scroll horizontal en la tabla */
-  margin-bottom: 2rem;
-  position: relative; /* Para posicionar el botón */
+/* === TABLA === */
+.tabla-container {
+  overflow-x: auto;
+  position: relative;
 }
 
-.tabla-servidores {
+.tabla {
   width: 100%;
   border-collapse: collapse;
+  min-width: 950px;
   font-size: 0.85rem;
-  min-width: 900px; /* Asegura un ancho mínimo para que se vea bien */
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
 }
 
-/* Encabezados */
-.tabla-servidores th {
+.tabla th {
   padding: 0.7rem 0.5rem;
   text-align: center;
   color: white;
@@ -64,72 +84,53 @@
   border: 1px solid #d1d5db;
 }
 
-.tabla-servidores thead .header-servidores,
-.tabla-servidores thead .header-total {
-  background-color: #3b82f6; /* Azul base para servidores/total */
+.tabla .sub-header {
+  background-color: #9ca3af;
 }
 
-.tabla-servidores thead .header-poblacion {
-  background-color: #ef4444; /* Rojo/Rosa para población (ajustar color si es necesario) */
-}
-
-.tabla-servidores thead .sub-header {
-  background-color: #f87171; /* Tono más claro para sub-encabezados de población */
-  color: white;
-}
-
-/* Celdas del cuerpo */
-.tabla-servidores td {
-  padding: 0; /* Quitamos padding de la celda para controlarlo en el input */
+.tabla td {
   border: 1px solid #e5e7eb;
   text-align: center;
   vertical-align: middle;
 }
 
-.tabla-servidores .tipo-procesador {
-  padding: 0.7rem 0.5rem;
-  text-align: left;
-  font-weight: 500;
-  color: #374151;
+.tabla tr:hover td {
   background-color: #f9fafb;
 }
 
-.tabla-servidores input[type="text"] {
+.tipo-procesador {
+  text-align: left;
+  font-weight: 500;
+  padding: 0.6rem 0.5rem;
+  background-color: #f9fafb;
+  color: #374151;
+}
+
+.tabla input[type="text"] {
   width: 100%;
-  padding: 0.5rem 0.3rem;
+  padding: 0.45rem 0.3rem;
   border: none;
-  text-align: center;
-  background-color: transparent;
-  box-sizing: border-box; /* Asegura que el padding no cambie el ancho */
-}
-
-.tabla-servidores input[type="text"]:read-only {
   background-color: #f3f4f6;
-  color: #4b5563;
+  text-align: center;
+  box-sizing: border-box;
+  color: #374151;
 }
 
-.tabla-servidores .total-celda {
-  background-color: #e0f2fe; /* Azul muy claro para las celdas de total */
+.total-celda {
   font-weight: 600;
-  color: #1e40af;
-  padding: 0.5rem;
+  color: #111827;
+  background-color: #eef2ff;
 }
 
-.tabla-servidores .fila-total td {
-  background-color: #bfdbfe; /* Azul más intenso para la fila total */
+.fila-total td {
+  background-color: #e0e7ff;
   font-weight: 700;
 }
 
-.tabla-servidores .fila-total .total-celda {
-  background-color: #93c5fd;
-}
-
-/* Botón Consultar */
+/* === BOTONES === */
 .boton-consultar {
-  position: absolute;
-  bottom: -3.5rem; /* Debajo de la tabla */
-  right: 0;
-  background-color: #10b981; /* Verde */
+  margin-top: 1rem;
+  background-color: #10b981;
   color: white;
   padding: 0.6rem 1.2rem;
   border: none;
@@ -138,13 +139,29 @@
   cursor: pointer;
   box-shadow: 0 2px 5px rgba(16, 185, 129, 0.3);
   transition: background-color 0.2s;
+  float: right;
 }
 
 .boton-consultar:hover {
   background-color: #059669;
 }
 
-/* Ajuste para el contenedor de botones si ya existe */
 .boton-contenedor {
-  margin-top: 5rem; /* Asegura espacio debajo del botón 'Consultar' */
+  margin-top: 4rem;
+  text-align: right;
+}
+
+.boton.volver {
+  background-color: #2563eb;
+  color: white;
+  padding: 0.7rem 1.4rem;
+  border-radius: 8px;
+  text-decoration: none;
+  font-weight: 500;
+  box-shadow: 0 2px 5px rgba(37, 99, 235, 0.3);
+  transition: background-color 0.2s;
+}
+
+.boton.volver:hover {
+  background-color: #1d4ed8;
 }