From 24af4d4be8915355f55637bdb6dd750aa4a4bba3 Mon Sep 17 00:00:00 2001
From: Alejandra-Guzman-Mendez <424118767@pcpuma.acatlan.unam.mx>
Date: Fri, 7 Nov 2025 09:52:23 -0600
Subject: [PATCH] mensaje

---
 .../(Administrador)/pregunta10/pregunta10.css |   0
 .../(Administrador)/pregunta10/pregunta10.tsx |   0
 src/app/(Administrador)/pregunta9/page.tsx    | 142 ++++++++++++++++++
 .../(Administrador)/pregunta9/pregunta9.css   | 131 ++++++++++++++++
 4 files changed, 273 insertions(+)
 create mode 100644 src/app/(Administrador)/pregunta10/pregunta10.css
 create mode 100644 src/app/(Administrador)/pregunta10/pregunta10.tsx
 create mode 100644 src/app/(Administrador)/pregunta9/page.tsx
 create mode 100644 src/app/(Administrador)/pregunta9/pregunta9.css

diff --git a/src/app/(Administrador)/pregunta10/pregunta10.css b/src/app/(Administrador)/pregunta10/pregunta10.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/(Administrador)/pregunta10/pregunta10.tsx b/src/app/(Administrador)/pregunta10/pregunta10.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/(Administrador)/pregunta9/page.tsx b/src/app/(Administrador)/pregunta9/page.tsx
new file mode 100644
index 0000000..7fbbd5f
--- /dev/null
+++ b/src/app/(Administrador)/pregunta9/page.tsx
@@ -0,0 +1,142 @@
+"use client";
+import React, { useState } from "react";
+import "./pregunta9.css";
+
+export default function Pregunta9() {
+  // Estado para Pregunta 9
+  const [datos, setDatos] = useState([
+    { nombre: "Computadoras de Escritorio", valores: ["", "", "", ""] },
+    { nombre: "Computadoras Portátiles", valores: ["", "", "", ""] },
+    { nombre: "Alto Rendimiento", valores: ["", "", "", ""] },
+  ]);
+
+  // Estado para Pregunta 10
+  const [garantia, setGarantia] = useState({
+    escritorio: "",
+    portatil: "",
+    altoRendimiento: "",
+  });
+
+  // Función para actualizar datos de Pregunta 9
+  const handleChange = (filaIndex: number, colIndex: number, value: string) => {
+    const nuevosDatos = [...datos];
+    nuevosDatos[filaIndex].valores[colIndex] = value;
+    setDatos(nuevosDatos);
+  };
+
+  // Función para calcular total de cada fila en Pregunta 9
+  const calcularTotal = (valores: string[]) =>
+    valores.reduce((acc, val) => acc + (Number(val) || 0), 0);
+
+  return (
+    <div className="contenedor-pregunta">
+      {/* Pregunta 9 */}
+     
+
+      <div className="pregunta-cuadro">
+        9. Calcule porcentualmente (%) la antigüedad que tienen los equipos de
+        cómputo del área universitaria. *
+      </div>
+
+      <div className="tabla-contenedor">
+        <table className="tabla">
+          <thead>
+            <tr>
+              <th className="azul-marino">% Antiguedad de los equipos</th>
+              <th className="rosa-fuerte">Menor a 2 años</th>
+              <th className="rosa-fuerte">Entre 2 y 3 años</th>
+              <th className="rosa-fuerte">Entre 4 y 5 años</th>
+              <th className="rosa-fuerte">Mayor a 6 años</th>
+              <th className="azul-marino">Total</th>
+            </tr>
+          </thead>
+          <tbody>
+            {datos.map((fila, filaIndex) => {
+              const total = calcularTotal(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)
+                          }
+                        />
+                        <span className="porcentaje">%</span>
+                      </div>
+                    </td>
+                  ))}
+                  <td
+                    className={`total-celda ${
+                      total > 100 ? "total-error" : ""
+                    }`}
+                  >
+                    {total.toFixed(2)}%
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Pregunta 10 */}
+      <div className="pregunta-cuadro" style={{ marginTop: "30px" }}>
+        10. ¿Cuántos equipos de cómputo tienen garantía de proveedor?. *
+      </div>
+
+      <div className="tabla-contenedor">
+        <table className="tabla">
+          <thead>
+            <tr>
+              <th className="azul-marino">Computadoras de Escritorio (247)</th>
+              <th className="azul-marino">Computadoras Portátiles (767)</th>
+              <th className="azul-marino">Alto Rendimiento (17)</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <div className="input-contenedor input-sin-porcentaje">
+                  <input
+                    type="number"
+                    value={garantia.escritorio}
+                    onChange={(e) =>
+                      setGarantia({ ...garantia, escritorio: e.target.value })
+                    }
+                  />
+                </div>
+              </td>
+              <td>
+                <div className="input-contenedor input-sin-porcentaje">
+                  <input
+                    type="number"
+                    value={garantia.portatil}
+                    onChange={(e) =>
+                      setGarantia({ ...garantia, portatil: e.target.value })
+                    }
+                  />
+                </div>
+              </td>
+              <td>
+                <div className="input-contenedor input-sin-porcentaje">
+                  <input
+                    type="number"
+                    value={garantia.altoRendimiento}
+                    onChange={(e) =>
+                      setGarantia({ ...garantia, altoRendimiento: e.target.value })
+                    }
+                  />
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(Administrador)/pregunta9/pregunta9.css b/src/app/(Administrador)/pregunta9/pregunta9.css
new file mode 100644
index 0000000..c79800b
--- /dev/null
+++ b/src/app/(Administrador)/pregunta9/pregunta9.css
@@ -0,0 +1,131 @@
+.contenedor-pregunta {
+  padding: 20px;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  background-color: #f9fafc;
+}
+
+
+.pregunta-cuadro {
+  background-color: #f5f5f5;
+  border-left: 6px solid #001f3f;
+  padding: 15px;
+  border-radius: 8px;
+  font-size: 16px;
+  margin-bottom: 25px;
+}
+
+/* Tarjeta */
+.tabla-contenedor {
+  background: white;
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  overflow-x: auto;
+}
+
+/* Tabla */
+.tabla {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: center;
+}
+
+.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 (para ambas preguntas) */
+.input-contenedor {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+
+/* Input editable */
+.input-contenedor input {
+  width: 70%;
+  padding: 6px 25px 6px 6px; /* espacio derecho para % si se usa */
+  border: 2px solid #002855; /* borde azul marino */
+  border-radius: 6px;
+  font-size: 14px;
+  color: #333;
+  text-align: center; /* centra el número */
+  outline: none;
+  background-color: rgb(232, 226, 226);
+  box-sizing: border-box;
+}
+
+/* Centrado vertical del número dentro del input */
+.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;
+}
+
+/* Símbolo % dentro del input (solo para Pregunta 9) */
+.input-contenedor .porcentaje {
+  position: absolute;
+  right: 8px; /* alineado al borde del input */
+  color: #555;
+  font-weight: bold;
+  pointer-events: none;
+  font-size: 14px;
+  top: 50%;
+  transform: translateY(-50%); /* centra verticalmente el % */
+}
+
+/* Celda del total */
+.total-celda {
+  font-weight: bold;
+  color: #002855;
+  background-color: #eef2f6;
+}
+
+/* Total > 100% */
+.total-error {
+  background-color: #ffcccc;
+  color: #a80000;
+}
+
+/* Estilo adicional para inputs sin % (Pregunta 10) */
+.input-sin-porcentaje input {
+  width: 70%;
+  padding: 6px 6px 6px 6px; /* ya no necesita espacio para % */
+}