new style and new names

src/app/(Administrador)/equipoComputo/page.tsx

@@ -12,25 +12,22 @@ import "../../styles/layout/reporte.scss";
 type PreguntaKey =
   | "pregunta1"
   | "pregunta2"
-  | "pregunta2_1"
   | "pregunta3"
   | "pregunta7EP"
   | "pregunta9";
 
 const LABELS: Record<PreguntaKey, string> = {
-  pregunta1: "Pregunta 1 ",
-  pregunta2: "Pregunta 2",
-  pregunta2_1: "Pregunta 2.1",
-  pregunta3: "Pregunta 3",
-  pregunta7EP: "Pregunta 7 EP",
-  pregunta9: "Pregunta 9",
+  pregunta1: "Perfil de Usuario",
+  pregunta2: "Sistema Operativo",
+  pregunta3: "Plataforma y tipo procesador",
+  pregunta7EP: "Laboratorios",
+  pregunta9: "Generales",
 };
 
 // Mapeo de fondo por pregunta (puedes personalizarlo)
 const TAB_BACKGROUNDS: Record<PreguntaKey, string> = {
   pregunta1: "bg-gray",
   pregunta2: "bg-gray",
-  pregunta2_1: "bg-gray",
   pregunta3: "bg-gray",
   pregunta7EP: "bg-gray",
   pregunta9: "bg-blue",
@@ -45,8 +42,6 @@ export default function Page() {
         return <Pregunta1 />;
       case "pregunta2":
         return <Pregutna2 />;
-      case "pregunta2_1":
-        return <Pregunta2_1 />;
       case "pregunta3":
         return <Pregunta3 />;
       case "pregunta7EP":

src/app/(Administrador)/perifericos/page.tsx

@@ -5,18 +5,21 @@ import Pregunta7 from "@/components/Equipo_Computo/Pregunta7";
 import Pregunta1EP from "@/components/Perifericos/Pregunta1EP";
 import Pregunta2EP from "@/components/Perifericos/Pregunta2EP";
 import Pregunta4EP from "@/components/Perifericos/Pregunta4EP";
+import Pregunta5EP from "@/components/Perifericos/Pregunta5EP";
 import "../../styles/layout/reporte.scss";
 
 type PreguntaKey =
   | "pregunta1"
   | "pregunta2"
   | "pregunta4"
-  | "pregunta7"
+  | "pregunta5"
+  | "pregunta7";
 
 const LABELS: Record<PreguntaKey, string> = {
   pregunta1: "Pregunta 1",
   pregunta2: "Pregunta 2",
   pregunta4: "Pregunta 4",
+  pregunta5: "Pregunta 5",
   pregunta7: "Pregunta 7",
 };
 
@@ -25,6 +28,7 @@ const TAB_BACKGROUNDS: Record<PreguntaKey, string> = {
   pregunta1: "bg-gray",
   pregunta2: "bg-gray",
   pregunta4: "bg-gray",
+  pregunta5: "bg-gray",
   pregunta7: "bg-gray",
 };
 
@@ -36,9 +40,11 @@ export default function Page() {
       case "pregunta1":
         return <Pregunta1EP />;
       case "pregunta2":
-        return <Pregunta2EP />;  
+        return <Pregunta2EP />;
       case "pregunta4":
         return <Pregunta4EP />;
+      case "pregunta5":
+        return <Pregunta5EP />;
       case "pregunta7":
         return <Pregunta7 />;
       default:
@@ -54,10 +60,7 @@ export default function Page() {
 
   return (
     <div className="scanView_reporte">
-      
       <div className="container_reporte">
-          
-        
         <div className="main-content_reporte">
           <div className="tabs_reporte">
             {Object.entries(LABELS).map(([key, label]) => (
@@ -79,4 +82,4 @@ export default function Page() {
       </div>
     </div>
   );
-}
+}

src/app/(Administrador)/pregunta2/pregunta2.scss

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

src/app/(Administrador)/pregunta5EP/page.tsx

@@ -1,5 +1,4 @@
 "use client";
-import React from "react";
 import "../../styles/layout/pregunta5EP.scss";
 
 export default function Pregunta5EP() {
@@ -20,7 +19,7 @@ export default function Pregunta5EP() {
 
         <div className="item">
           <label htmlFor="profesores-digital">
-            Profesores <span className="help-icon">?</span>
+            Profesores 
           </label>
           <input type="text" id="profesores-digital" defaultValue="24" />
         </div>
@@ -34,14 +33,14 @@ export default function Pregunta5EP() {
 
         <div className="item">
           <label htmlFor="investigadores-digital">
-            Investigadores <span className="help-icon">?</span>
+            Investigadores 
           </label>
           <input type="text" id="investigadores-digital" defaultValue="" />
         </div>
 
         <div className="item">
           <label htmlFor="administrativos-digital">
-            Administrativos <span className="help-icon">?</span>
+            Administrativos 
           </label>
           <input type="text" id="administrativos-digital" defaultValue="101" />
         </div>

src/app/(Administrador)/pregunta7/pregunta7.css

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

src/app/(Administrador)/pregunta7_1/pregunta7.css

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

src/app/(Administrador)/pregunta9/pregunta1.css

@@ -1,5 +1,4 @@
 .contenedor-pregunta {
-  padding: 20px;
   background-color: #f9fafc;
 }
 

src/app/styles/layout/pregunta4EP.scss

@@ -1,5 +1,4 @@
 .container {
-  padding: 20px;
   border-radius: 6px;
 }
 

src/app/styles/layout/pregunta7.scss

@@ -1,6 +1,5 @@
 .container {
   max-width: 100%;
-  margin: 10px 10%;
 }
 
 .controls {

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}>