new style and new names

src/components/BarNavigationAdmin.tsx

@@ -39,8 +39,8 @@ function BarNavigation() {
           </Link>
         </li> */}
         <li className="subMenu" onClick={toggleMenu}>
-          <Link href="/reporte" className="links">
-            <span>Reporte</span>
+          <Link href="/equipoComputo" className="links">
+            <span>Equipo de Computo</span>
           </Link>
         </li>
                 <li className="subMenu" onClick={toggleMenu}>

src/components/Equipo_Computo/Pregunta2.tsx

@@ -85,6 +85,14 @@ export default function Pregunta1() {
   return (
     <div className={styles.scanView_P1}>
       <div className={styles.container_P1}>
+            <div className="contenedor-censo">
+        Censo de equipos periféricos - Equipo de digitalización
+      </div>
+
+      <div className="pregunta-cuadro">
+        5. Indique el número de equipos de digitalización de acuerdo con la
+        población universitaria al que se destina su uso primordialmente.
+      </div>
         <div className={styles.header_P1}>
           Presione cada pestaña para ver la información de las plataformas.
         </div>

src/components/Equipo_Computo/pregunta3.module.scss

@@ -6,7 +6,6 @@
 
   .container_P3 {
     width: 100%;
-    max-width: 1000px;
     background: #fff;
     border-radius: 12px;
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);

src/components/Equipo_Computo/pregunta7.css

@@ -1,5 +1,4 @@
 .contenedor-pregunta {
-  padding: 20px;
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 }
 

src/components/Equipo_Computo/pregunta9.css

@@ -1,7 +1,3 @@
-.contenedor-pregunta {
-  padding: 20px;
-}
-
 
 .pregunta-cuadro {
   border-left: 6px solid #001f3f;

src/components/Perifericos/Pregunta5EP.tsx

@@ -1,54 +1,126 @@
 "use client";
-import React from "react";
 import "./pregunta5EP.scss";
+import styles from "./pregunta2EP.module.scss";
+import { useEffect, useState } from "react";
+
+interface EquiposPoblacion {
+  alumnos: string;
+  profesores: string;
+  tecnicosAcademicos: string;
+  investigadores: string;
+  administrativos: string;
+  total: string;
+}
 
 export default function Pregunta5EP() {
+    const [equipos, setEquipos] = useState<EquiposPoblacion>({
+      alumnos: "35",
+      profesores: "43",
+      tecnicosAcademicos: "",
+      investigadores: "",
+      administrativos: "302",
+      total: "380",
+    });
+  
+    // Listo para conectar al backend
+    useEffect(() => {
+      /*
+      fetch("https://tu-api-backend.com/api/equipos-poblacion")
+        .then((res) => res.json())
+        .then((data) => setEquipos(data))
+        .catch((err) => console.error("Error al obtener datos:", err));
+      */
+    }, []);
+  
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const { name, value } = e.target;
+      setEquipos((prev) => ({
+        ...prev,
+        [name]: value,
+      }));
+    };
   return (
     <div className="container">
-      <div className="header">
-        Indique el número de equipos de digitalización de acuerdo con la
-        población universitaria al que se destina su uso primordialmente.
-        <span>*</span>
-        <small> (Requerido en el caso de contar con Equipo de digitalización)</small>
+      <div className="contenedor-censo">
+        Censo de equipos periféricos - Equipo de digitalización
       </div>
 
-      <div className="row">
-        <div className="item">
-          <label htmlFor="alumnos-digital">Alumnos</label>
-          <input type="text" id="alumnos-digital" defaultValue="11" />
+      <div className="pregunta-cuadro">
+        5. Indique el número de equipos de digitalización de acuerdo con la
+        población universitaria al que se destina su uso primordialmente.
+      </div>
+
+            <div className={styles.row_P2}>
+        <div className={styles.item_P2}>
+          <label htmlFor="alumnos">Alumnos</label>
+          <input
+            type="text"
+            id="alumnos"
+            name="alumnos"
+            value={equipos.alumnos}
+            onChange={handleChange}
+          />
         </div>
 
-        <div className="item">
-          <label htmlFor="profesores-digital">
-            Profesores <span className="help-icon">?</span>
+        <div className={styles.item_P2}>
+          <label htmlFor="profesores">
+            Profesores
           </label>
-          <input type="text" id="profesores-digital" defaultValue="24" />
+          <input
+            type="text"
+            id="profesores"
+            name="profesores"
+            value={equipos.profesores}
+            onChange={handleChange}
+          />
         </div>
 
-        <div className="item">
-          <label htmlFor="tecnicos-academicos-digital">
-            Técnicos Académicos
+        <div className={styles.item_P2}>
+          <label htmlFor="tecnicosAcademicos">Técnicos Académicos</label>
+          <input
+            type="text"
+            id="tecnicosAcademicos"
+            name="tecnicosAcademicos"
+            value={equipos.tecnicosAcademicos}
+            onChange={handleChange}
+          />
+        </div>
+
+        <div className={styles.item_P2}>
+          <label htmlFor="investigadores">
+            Investigadores
           </label>
-          <input type="text" id="tecnicos-academicos-digital" defaultValue="" />
+          <input
+            type="text"
+            id="investigadores"
+            name="investigadores"
+            value={equipos.investigadores}
+            onChange={handleChange}
+          />
         </div>
 
-        <div className="item">
-          <label htmlFor="investigadores-digital">
-            Investigadores <span className="help-icon">?</span>
+        <div className={styles.item_P2}>
+          <label htmlFor="administrativos">
+            Administrativos 
           </label>
-          <input type="text" id="investigadores-digital" defaultValue="" />
+          <input
+            type="text"
+            id="administrativos"
+            name="administrativos"
+            value={equipos.administrativos}
+            onChange={handleChange}
+          />
         </div>
 
-        <div className="item">
-          <label htmlFor="administrativos-digital">
-            Administrativos <span className="help-icon">?</span>
-          </label>
-          <input type="text" id="administrativos-digital" defaultValue="101" />
-        </div>
-
-        <div className="item">
-          <label htmlFor="total-digital">Total</label>
-          <input type="text" id="total-digital" defaultValue="136" />
+        <div className={styles.item_P2}>
+          <label htmlFor="total">Total</label>
+          <input
+            type="text"
+            id="total"
+            name="total"
+            value={equipos.total}
+            onChange={handleChange}
+          />
         </div>
       </div>
     </div>

src/components/Perifericos/pregunta2EP.module.scss

@@ -1,6 +1,5 @@
 .container_P2 {
   max-width: 1200px;
-  padding: 20px;
 
   label {
     display: block;

src/components/Perifericos/pregunta5EP.scss

@@ -1,12 +1,6 @@
 
 .container {
   max-width: 1000px;
-  margin: 2% auto 20% auto;
-  background: white;
-  padding: 20px;
-  border: 1px solid #ddd;
-  border-radius: 6px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }
 
 .header {

src/components/header.tsx

@@ -10,7 +10,7 @@ function Header() {
   const pathname = usePathname();
 
   const publicNav = ["/escaner", "/agregarEquipo", "/editar"];
-  const privateNav = ["/reporte", "/crearCuenta", "/cambiarPass","/perifericos"];
+  const privateNav = ["/equipoComputo", "/crearCuenta", "/cambiarPass","/perifericos"];
 
   return (
     <header className={header.header}>