From 9b979725e57d2d5c56c3ddbfa1f3e6f2ceca08bf Mon Sep 17 00:00:00 2001
From: IO <320154041@pcpuma.acatlan.unam.mx>
Date: Wed, 19 Nov 2025 18:17:24 -0600
Subject: [PATCH] added new style to ask 1

---
 .../pregunta1_1/pregunta1.1.css               |   7 +-
 src/components/Equipo_Computo/Pregunta1.tsx   | 357 ++++++------------
 src/components/Equipo_Computo/Pregunta_4.tsx  |   2 +-
 src/components/Equipo_Computo/pregunta1.1.css | 144 +++++++
 4 files changed, 270 insertions(+), 240 deletions(-)
 create mode 100644 src/components/Equipo_Computo/pregunta1.1.css

diff --git a/src/app/(Administrador)/pregunta1_1/pregunta1.1.css b/src/app/(Administrador)/pregunta1_1/pregunta1.1.css
index 62bfe3e..f7c439b 100644
--- a/src/app/(Administrador)/pregunta1_1/pregunta1.1.css
+++ b/src/app/(Administrador)/pregunta1_1/pregunta1.1.css
@@ -29,7 +29,7 @@
   border-radius: 10px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
   overflow-x: auto;
-  
+  min-width: 700px;
 }
 
 /* Tabla */
@@ -81,7 +81,7 @@
 
 /* Input  */
 .input-contenedor input {
-  width: 40%;
+  width: 100%;
   padding: 6px 25px 6px 6px;
   border: 2px solid #002855; 
   border-radius: 6px;
@@ -144,6 +144,5 @@
 }
 
 .tabla-contenedor {
-  flex: 1;               
-  min-width: 300px;       
+  flex: 1;                    
 }
diff --git a/src/components/Equipo_Computo/Pregunta1.tsx b/src/components/Equipo_Computo/Pregunta1.tsx
index a13e83a..610a596 100644
--- a/src/components/Equipo_Computo/Pregunta1.tsx
+++ b/src/components/Equipo_Computo/Pregunta1.tsx
@@ -1,242 +1,129 @@
 "use client";
-import "./pregunta1.module.scss"
+import React, { useState } from "react";
+import "./pregunta1.1.css";
+
+export default function Pregunta1() {
+  const [datos, setDatos] = useState([
+    { nombre: "Windows", valores: ["", "", "", "", ""] },
+    { nombre: "Linux", valores: ["", "", "", "", ""] },
+    { nombre: "Mac OS", valores: ["", "", "", "", ""] },
+    { nombre: "Total", valores: ["", "", "", "", ""] },
+  ]);
+
+  const handleChange = (filaIndex: number, colIndex: number, value: string) => {
+    const nuevosDatos = [...datos];
+    nuevosDatos[filaIndex].valores[colIndex] = value;
+    setDatos(nuevosDatos);
+  };
+
+  const calcularTotalFila = (valores: string[]) =>
+    valores.reduce((acc, val) => acc + (Number(val) || 0), 0);
+
+  const calcularTotalesColumnas = () => {
+    const numColumnas = datos[0].valores.length;
+    const totales = Array(numColumnas).fill(0);
+    datos.slice(0, -1).forEach((fila) => {
+      fila.valores.forEach((valor, colIndex) => {
+        totales[colIndex] += Number(valor) || 0;
+      });
+    });
+    return totales;
+  };
+
+  const totalesColumnas = calcularTotalesColumnas();
+
+  // Títulos de las tablas
+  const tablas = [
+    "Computadoras de escritorio",
+    "Tabletas",
+    "Computadoras portátiles",
+    "Alto rendimiento",
+  ];
+
+  // Función para renderizar una tabla
+  const renderTabla = (titulo: string) => (
+    <div className="tabla-contenedor">
+      <table className="tabla">
+        <thead>
+          <tr>
+            <th className="azul-marino">{titulo}</th>
+            <th className="rosa-fuerte">Alumnos</th>
+            <th className="rosa-fuerte">Profesores</th>
+            <th className="rosa-fuerte">Técnicos Académicos</th>
+            <th className="rosa-fuerte">Investigadores</th>
+            <th className="rosa-fuerte">Administrativos</th>
+            <th className="azul-marino">Total</th>
+          </tr>
+        </thead>
+        <tbody>
+          {datos.map((fila, filaIndex) => {
+            if (fila.nombre === "Total") {
+              const totalGeneral = calcularTotalFila(
+                totalesColumnas.map(String)
+              );
+              return (
+                <tr key={filaIndex} className="fila-total">
+                  <td className="negrita">{fila.nombre}</td>
+                  {totalesColumnas.map((colTotal, i) => (
+                    <td key={i}>{colTotal}</td>
+                  ))}
+                  <td className="negrita">{totalGeneral}</td>
+                </tr>
+              );
+            }
+
+            const totalFila = calcularTotalFila(fila.valores);
+            return (
+              <tr key={filaIndex}>
+                <td>{fila.nombre}</td>
+                {fila.valores.map((valor, colIndex) => (
+                  <td key={colIndex}>
+                    <div className="input-contenedor">
+                      <input
+                        type="number"
+                        value={valor}
+                        onChange={(e) =>
+                          handleChange(filaIndex, colIndex, e.target.value)
+                        }
+                      />
+                    </div>
+                  </td>
+                ))}
+                <td
+                  className={`total-celda ${
+                    totalFila > 100 ? "total-error" : ""
+                  }`}
+                >
+                  {totalFila}
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
 
-export default function Pregunta1_1() {
   return (
-    <section>
-      <div>
-        <h1>Censo Equipos de computo</h1>
-        <p className="instructions">
-          Desglosa en cada renglon el número de equipos de cómputo dedicado por
-          cada categoría enlistada, de acuerdo con el perfil del usuario al que
-          se destina su uso primordialmente.
-        </p>
+    <div className="contenedor-pregunta">
+      <div className="contenedor-censo">Censo de equipos de cómputo</div>
 
-        <div className="container">
-
-          {/* ===================== */}
-          {/* 1. COMPUTADORAS DE ESCRITORIO */}
-          {/* ===================== */}
-          <div className="table-container">
-            <table>
-              <thead>
-                <tr>
-                  <th>Computadoras de escritorio</th>
-                  <th>Alumnos</th>
-                  <th>Profesores</th>
-                  <th>Tecnicos Academicos</th>
-                  <th>Investigadores</th>
-                  <th>Administrativos</th>
-                  <th>Total</th>
-                </tr>
-              </thead>
-
-              <tbody>
-
-                {/* Windows */}
-                <tr>
-                  <th>Windows</th>
-                  <td><input type="number" className="numero" /></td>
-                  <td><input type="number" className="numero" /></td>
-                  <td><input type="number" className="numero" /></td>
-                  <td><input type="number" className="numero" /></td>
-                  <td><input type="number" className="numero" /></td>
-                  <th>10</th>
-                </tr>
-
-                {/* Linux */}
-                <tr>
-                  <th>Linux</th>
-                  <td><input type="number" className="numero" /></td>
-                  <td><input type="number" className="numero" /></td>
-                  <td><input type="number" className="numero" /></td>
-                  <td><input type="number" className="numero" /></td>
-                  <td><input type="number" className="numero" /></td>
-                  <th>10</th>
-                </tr>
-
-                {/* Mac OS */}
-                <tr>
-                  <th>Mac OS</th>
-                  <td><input type="number" className="numero" /></td>
-                  <td><input type="number" className="numero" /></td>
-                  <td><input type="number" className="numero" /></td>
-                  <td><input type="number" className="numero" /></td>
-                  <td><input type="number" className="numero" /></td>
-                  <th>10</th>
-                </tr>
-
-                {/* Totales */}
-                <tr>
-                  <th>Total</th>
-                  <th>10</th>
-                  <th>10</th>
-                  <th>10</th>
-                  <th>10</th>
-                  <th>10</th>
-                  <th>10</th>
-                </tr>
-
-              </tbody>
-            </table>
-          </div>
-
-          {/* ===================== */}
-          {/* 2. COMPUTADORAS PORTÁTILES */}
-          {/* ===================== */}
-          <div className="table-container">
-            <table>
-              <thead>
-                <tr>
-                  <th>Computadoras portátiles</th>
-                  <th>Alumnos</th>
-                  <th>Profesores</th>
-                  <th>Tecnicos Academicos</th>
-                  <th>Investigadores</th>
-                  <th>Administrativos</th>
-                  <th>Total</th>
-                </tr>
-              </thead>
-
-              <tbody>
-
-                {/* Windows */}
-                <tr>
-                  <th>Windows</th>
-                  <td><input type="number" className="numero" /></td>
-                  <td><input type="number" className="numero" /></td>
-                  <td><input type="number" className="numero" /></td>
-                  <td><input type="number" className="numero" /></td>
-                  <td><input type="number" className="numero" /></td>
-                  <th>10</th>
-                </tr>
-
-                {/* Chromebook */}
-                <tr>
-                  <th>Chromebook</th>
-                  <td><input type="number" className="numero" /></td>
-                  <td><input type="number" className="numero" /></td>
-                  <td><input type="number" className="numero" /></td>
-                  <td><input type="number" className="numero" /></td>
-                  <td><input type="number" className="numero" /></td>
-                  <th>10</th>
-                </tr>
-
-                {/* Mac OS */}
-                <tr>
-                  <th>Mac OS</th>
-                  <td><input type="number" className="numero" /></td>
-                  <td><input type="number" className="numero" /></td>
-                  <td><input type="number" className="numero" /></td>
-                  <td><input type="number" className="numero" /></td>
-                  <td><input type="number" className="numero" /></td>
-                  <th>10</th>
-                </tr>
-
-                {/* Totales */}
-                <tr>
-                  <th>Total</th>
-                  <th>10</th><th>10</th><th>10</th><th>10</th><th>10</th>
-                  <th>10</th>
-                </tr>
-
-              </tbody>
-            </table>
-          </div>
-
-          {/* ===================== */}
-          {/* 3. TABLETAS */}
-          {/* ===================== */}
-          <div className="table-container">
-            <table>
-              <thead>
-                <tr>
-                  <th>Tabletas</th>
-                  <th>Alumnos</th>
-                  <th>Profesores</th>
-                  <th>Tecnicos Academicos</th>
-                  <th>Investigadores</th>
-                  <th>Administrativos</th>
-                  <th>Total</th>
-                </tr>
-              </thead>
-
-              <tbody>
-
-                {/* Android */}
-                <tr>
-                  <th>Android</th>
-                  <td><input type="number" className="numero" /></td>
-                  <td><input type="number" className="numero" /></td>
-                  <td><input type="number" className="numero" /></td>
-                  <td><input type="number" className="numero" /></td>
-                  <td><input type="number" className="numero" /></td>
-                  <th>10</th>
-                </tr>
-
-                {/* iPad IOS */}
-                <tr>
-                  <th>iPad iOS</th>
-                  <td><input type="number" className="numero" /></td>
-                  <td><input type="number" className="numero" /></td>
-                  <td><input type="number" className="numero" /></td>
-                  <td><input type="number" className="numero" /></td>
-                  <td><input type="number" className="numero" /></td>
-                  <th>10</th>
-                </tr>
-
-                {/* Totales */}
-                <tr>
-                  <th>Total</th>
-                  <th>10</th><th>10</th><th>10</th><th>10</th><th>10</th>
-                  <th>10</th>
-                </tr>
-
-              </tbody>
-            </table>
-          </div>
-
-          {/* ===================== */}
-          {/* 4. ALTO RENDIMIENTO */}
-          {/* ===================== */}
-          <div className="table-container">
-            <table>
-              <thead>
-                <tr>
-                  <th>Alto Rendimiento</th>
-                  <th>Alumnos</th>
-                  <th>Profesores</th>
-                  <th>Tecnicos Academicos</th>
-                  <th>Investigadores</th>
-                  <th>Administrativos</th>
-                  <th>Total</th>
-                </tr>
-              </thead>
-
-              <tbody>
-
-                <tr>
-                  <th>Servidores</th>
-                  <td><input type="number" className="numero" /></td>
-                  <td><input type="number" className="numero" /></td>
-                  <td><input type="number" className="numero" /></td>
-                  <td><input type="number" className="numero" /></td>
-                  <td><input type="number" className="numero" /></td>
-                  <th>10</th>
-                </tr>
-
-                <tr>
-                  <th>Total</th>
-                  <th>10</th><th>10</th><th>10</th><th>10</th><th>10</th>
-                  <th>10</th>
-                </tr>
-
-              </tbody>
-            </table>
-          </div>
-
-        </div>
+      <div className="pregunta-cuadro">
+        1. Desglose en cada renglón, el número de equipos de cómputo dedicado por cada categoría
+        enlistada, de acuerdo con el perfil de usuario al que se destina su uso primordialmente. *
       </div>
-    </section>
+
+      {/* FILA SUPERIOR */}
+      <div className="contenedor-tablas">
+        {renderTabla(tablas[0])}
+        {renderTabla(tablas[1])}
+      </div>
+
+      {/* FILA INFERIOR */}
+      <div className="contenedor-tablas">
+        {renderTabla(tablas[2])}
+        {renderTabla(tablas[3])}
+      </div>
+    </div>
   );
 }
diff --git a/src/components/Equipo_Computo/Pregunta_4.tsx b/src/components/Equipo_Computo/Pregunta_4.tsx
index 83c0f81..515e0f9 100644
--- a/src/components/Equipo_Computo/Pregunta_4.tsx
+++ b/src/components/Equipo_Computo/Pregunta_4.tsx
@@ -15,7 +15,7 @@ export default function Pregunta4() {
           ¿Cuántos servidores son ocupados en producción?
         </label>
 
-        <input type="number" defaultValue={34} className="single-input" />
+        <input type="number" className="single-input" />
 
       </section>
     </main>
diff --git a/src/components/Equipo_Computo/pregunta1.1.css b/src/components/Equipo_Computo/pregunta1.1.css
new file mode 100644
index 0000000..c7aa8f5
--- /dev/null
+++ b/src/components/Equipo_Computo/pregunta1.1.css
@@ -0,0 +1,144 @@
+
+.contenedor-censo{
+  background-color: #002855;
+  color: white;
+  padding: 15px;
+  font-size: 20px;
+  margin-bottom: 25px;
+}
+ 
+
+.pregunta-cuadro {
+  background-color: #f5f5f5;
+  border-left: 6px solid #001f3f;
+  padding: 15px;
+  border-radius: 8px;
+  font-size: 16px;
+  margin-bottom: 25px;
+}
+
+
+.tabla-contenedor {
+  background: white;
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  overflow-x: auto;
+  min-width: 700px;
+}
+
+/* Tabla */
+.tabla {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: center;
+  color: black;
+  width: 100%;        /* ocupa todo el ancho del contenedor */
+  table-layout: fixed;
+}
+
+.tabla th,
+.tabla td {
+  border: 1px solid #ddd;
+  padding: 12px;
+  
+}
+
+.tabla th {
+  color: white;
+  font-weight: 600;
+  font-size: 15px;
+}
+
+.tabla td {
+  font-size: 14px;
+}
+
+/* Colores personalizados */
+.azul-marino {
+  background-color: #002855;
+  color: white;
+}
+
+.rosa-fuerte {
+  background-color: #dc1557;
+  color: white;
+}
+
+/* Contenedor input  */
+.input-contenedor {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+
+/* Input  */
+.input-contenedor input {
+  width: 100%;
+  padding: 6px 25px 6px 6px;
+  border: 2px solid #002855; 
+  border-radius: 6px;
+  font-size: 14px;
+  color: #333;
+  text-align: center; 
+  outline: none;
+  background-color: rgb(232, 226, 226);
+  box-sizing: border-box;
+}
+
+
+.input-contenedor input::-webkit-inner-spin-button,
+.input-contenedor input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Focus del input */
+.input-contenedor input:focus {
+  border-color: #001f3f;
+  box-shadow: 0 0 6px rgba(0, 47, 95, 0.3);
+}
+
+/* Placeholder gris claro */
+.input-contenedor input::placeholder {
+  color: #bbb;
+  opacity: 1;
+}
+
+ 
+.input-contenedor .porcentaje {
+  position: absolute;
+  right: 8px; 
+  color: #555;
+  font-weight: bold;
+  pointer-events: none;
+  font-size: 14px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* Celda del total */
+.total-celda {
+  font-weight: bold;
+  color: #002855;
+  background-color: #eef2f6;
+}
+
+/* Total > 100% */
+.total-error {
+  background-color: #ffcccc;
+  color: #a80000;
+}
+
+.contenedor-tablas {
+  display: flex;          
+  gap: 10px;              
+  flex-wrap: wrap;
+  margin-bottom: 10px;
+}
+
+.tabla-contenedor {
+  flex: 1;                    
+}