From e5ea40ae73c9402945d0113fcb1eca6c64a27148 Mon Sep 17 00:00:00 2001
From: IO <320154041@pcpuma.acatlan.unam.mx>
Date: Tue, 18 Nov 2025 18:09:48 -0600
Subject: [PATCH] fixed perifericos

---
 src/app/(Administrador)/perifericos/page.tsx  | 37 +++++++------------
 src/app/(Administrador)/pregunta4EP/page.tsx  |  9 ++++-
 .../(Administrador)/pregunta7/pregunta7.css   |  4 +-
 .../(Administrador)/pregunta7_1/pregunta7.css |  4 +-
 .../(Administrador)/pregunta9/pregunta1.css   |  3 +-
 src/app/styles/layout/pregunta4EP.scss        | 13 +++----
 src/app/styles/layout/reporte.scss            |  2 +-
 src/components/BarNavigationAdmin.tsx         |  9 ++++-
 src/components/Equipo_Computo/pregunta7.css   |  5 +--
 src/components/Equipo_Computo/pregunta9.css   |  4 +-
 src/components/Perifericos/Pregunta1EP.tsx    |  6 ++-
 src/components/Perifericos/Pregunta2EP.tsx    | 15 +++++---
 src/components/Perifericos/Pregunta4EP.tsx    |  7 +++-
 .../Perifericos/pregunta2EP.module.scss       | 15 ++++----
 src/components/header.tsx                     |  2 +-
 15 files changed, 70 insertions(+), 65 deletions(-)

diff --git a/src/app/(Administrador)/perifericos/page.tsx b/src/app/(Administrador)/perifericos/page.tsx
index c09695e..9305fa0 100644
--- a/src/app/(Administrador)/perifericos/page.tsx
+++ b/src/app/(Administrador)/perifericos/page.tsx
@@ -1,54 +1,43 @@
 "use client";
 
 import { useState } from "react";
-import Pregunta1 from "@/components/Equipo_Computo/Pregunta1";
-import Pregunta1_1 from "@/components/Equipo_Computo/Pregunta1_1";
-import Pregunta2_1 from "@/components/Equipo_Computo/Pregunta2_1";
-import Pregunta3 from "@/components/Equipo_Computo/Pregunta3";
-import Pregunta3_1 from "@/components/Equipo_Computo/Pregunta3_1";
-import Pregunta3_2 from "@/components/Equipo_Computo/Pregunta3_2";
-import Pregunta3_3 from "@/components/Equipo_Computo/Pregunta3_3";
-import Pregunta3_4 from "@/components/Equipo_Computo/Pregunta3_4";
-import Pregunta3_5 from "@/components/Equipo_Computo/Pregunta3_5";
 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 Pregunta7EP from "@/components/Perifericos/Pregunta7EP";
-import Pregunta9 from "@/components/Equipo_Computo/Pregunta9";
 import "../../styles/layout/reporte.scss";
 
 type PreguntaKey =
-  | "pregunta1EP"
-  | "pregunta2EP"
-  | "pregunta4EP"
+  | "pregunta1"
+  | "pregunta2"
+  | "pregunta4"
   | "pregunta7"
 
 const LABELS: Record<PreguntaKey, string> = {
-  pregunta1EP: "Pregunta 1 EP",
-  pregunta2EP: "Pregunta 2 EP",
-  pregunta4EP: "Pregunta 4 EP",
+  pregunta1: "Pregunta 1",
+  pregunta2: "Pregunta 2",
+  pregunta4: "Pregunta 4",
   pregunta7: "Pregunta 7",
 };
 
 // Mapeo de fondo por pregunta (puedes personalizarlo)
 const TAB_BACKGROUNDS: Record<PreguntaKey, string> = {
-  pregunta1EP: "bg-gray",
-  pregunta2EP: "bg-gray",
-  pregunta4EP: "bg-gray",
+  pregunta1: "bg-gray",
+  pregunta2: "bg-gray",
+  pregunta4: "bg-gray",
   pregunta7: "bg-gray",
 };
 
 export default function Page() {
-  const [activeTab, setActiveTab] = useState<PreguntaKey>("pregunta1EP");
+  const [activeTab, setActiveTab] = useState<PreguntaKey>("pregunta1");
 
   const renderPregunta = () => {
     switch (activeTab) {
-      case "pregunta1EP":
+      case "pregunta1":
         return <Pregunta1EP />;
-      case "pregunta2EP":
+      case "pregunta2":
         return <Pregunta2EP />;  
-      case "pregunta4EP":
+      case "pregunta4":
         return <Pregunta4EP />;
       case "pregunta7":
         return <Pregunta7 />;
diff --git a/src/app/(Administrador)/pregunta4EP/page.tsx b/src/app/(Administrador)/pregunta4EP/page.tsx
index ee0e02d..79f2c3b 100644
--- a/src/app/(Administrador)/pregunta4EP/page.tsx
+++ b/src/app/(Administrador)/pregunta4EP/page.tsx
@@ -38,10 +38,17 @@ export default function Pregunta4EPPage() {
 
   return (
     <div className="container">
-      <div className="header-bar">
+
+      <div className="contenedor-censo">
         Censo de equipos periféricos - Equipo de digitalización
       </div>
 
+      <div className="pregunta-cuadro">
+        7. Calcule porcentualmente (%) la antiguedad que tienen los equipos
+        periféricos del área universitaria. * (Requerido en el caso de contar
+        con Equipo de impresión o digitalización.)
+      </div>
+
       <div className="grid">
         <div className="item">
           <label htmlFor="digitalizadorCamaPlana">
diff --git a/src/app/(Administrador)/pregunta7/pregunta7.css b/src/app/(Administrador)/pregunta7/pregunta7.css
index e749651..c428384 100644
--- a/src/app/(Administrador)/pregunta7/pregunta7.css
+++ b/src/app/(Administrador)/pregunta7/pregunta7.css
@@ -1,7 +1,6 @@
 .contenedor-pregunta {
   padding: 20px;
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-  background-color: #f9fafc;
 }
 
 .contenedor-censo{
@@ -14,7 +13,6 @@
  
 
 .pregunta-cuadro {
-  background-color: #f5f5f5;
   border-left: 6px solid #001f3f;
   padding: 15px;
   border-radius: 8px;
@@ -79,7 +77,7 @@
 /* Input  */
 .input-contenedor input {
   width: 40%;
-  padding: 6px 25px 6px 6px;
+  padding: 6px 6px 6px 6px;
   border: 2px solid #002855; 
   border-radius: 6px;
   font-size: 14px;
diff --git a/src/app/(Administrador)/pregunta7_1/pregunta7.css b/src/app/(Administrador)/pregunta7_1/pregunta7.css
index 664490e..63d3f27 100644
--- a/src/app/(Administrador)/pregunta7_1/pregunta7.css
+++ b/src/app/(Administrador)/pregunta7_1/pregunta7.css
@@ -1,7 +1,6 @@
 .contenedor-pregunta {
   padding: 20px;
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-  background-color: #f9fafc;
 }
 
 .contenedor-censo{
@@ -11,7 +10,6 @@ color: white;
  
 
 .pregunta-cuadro {
-  background-color: #f5f5f5;
   border-left: 6px solid #001f3f;
   padding: 15px;
   border-radius: 8px;
@@ -76,7 +74,7 @@ color: white;
 /* Input  */
 .input-contenedor input {
   width: 40%;
-  padding: 6px 25px 6px 6px;
+  padding: 6px 6px 6px 6px;
   border: 2px solid #002855; 
   border-radius: 6px;
   font-size: 14px;
diff --git a/src/app/(Administrador)/pregunta9/pregunta1.css b/src/app/(Administrador)/pregunta9/pregunta1.css
index 5bc5cec..b68ed70 100644
--- a/src/app/(Administrador)/pregunta9/pregunta1.css
+++ b/src/app/(Administrador)/pregunta9/pregunta1.css
@@ -5,7 +5,6 @@
 
 
 .pregunta-cuadro {
-  background-color: #f5f5f5;
   border-left: 6px solid #001f3f;
   padding: 15px;
   border-radius: 8px;
@@ -70,7 +69,7 @@
 /* Input  */
 .input-contenedor input {
   width: 40%;
-  padding: 6px 25px 6px 6px;
+  padding: 6px 6px 6px 6px;
   border: 2px solid #002855; 
   border-radius: 6px;
   font-size: 14px;
diff --git a/src/app/styles/layout/pregunta4EP.scss b/src/app/styles/layout/pregunta4EP.scss
index 2a9f1a9..617ab71 100644
--- a/src/app/styles/layout/pregunta4EP.scss
+++ b/src/app/styles/layout/pregunta4EP.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-bar {
@@ -18,12 +12,16 @@
   border-radius: 4px 4px 0 0;
 }
 
-
 .grid {
+  background-color: #fff;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   align-items: end;
+  border-radius: 10px;
+  padding: 20px;
+  overflow-x: auto;
+  box-shadow: 0 4px 10px #0000001a;
 }
 
 .item {
@@ -51,5 +49,6 @@ input[type="text"] {
 @media (max-width: 768px) {
   .grid {
     grid-template-columns: 1fr;
+    gap: 0;
   }
 }
diff --git a/src/app/styles/layout/reporte.scss b/src/app/styles/layout/reporte.scss
index f4841ab..9efa0c9 100644
--- a/src/app/styles/layout/reporte.scss
+++ b/src/app/styles/layout/reporte.scss
@@ -5,7 +5,7 @@
 
   .container_reporte {
     width: calc(100% - 2%);
-    max-width: 1000px;
+    max-width: 1200px;
     margin: 0 auto;
     background: #fff;
     border-radius: 10px;
diff --git a/src/components/BarNavigationAdmin.tsx b/src/components/BarNavigationAdmin.tsx
index f2b7d13..074a578 100644
--- a/src/components/BarNavigationAdmin.tsx
+++ b/src/components/BarNavigationAdmin.tsx
@@ -33,15 +33,20 @@ function BarNavigation() {
             <span>Crear Cuenta</span>
           </Link>
         </li>
-        <li className="subMenu" onClick={toggleMenu}>
+        {/* <li className="subMenu" onClick={toggleMenu}>
           <Link href="/cambiarPass" className="links">
             <span>Cambiar Contraseña</span>
           </Link>
-        </li>
+        </li> */}
         <li className="subMenu" onClick={toggleMenu}>
           <Link href="/reporte" className="links">
             <span>Reporte</span>
           </Link>
+        </li>
+                <li className="subMenu" onClick={toggleMenu}>
+          <Link href="/perifericos" className="links">
+            <span>Perifericos</span>
+          </Link>
         </li>
         <li className="subMenu">
           <button className="logout-button" onClick={cerrarSesion}>
diff --git a/src/components/Equipo_Computo/pregunta7.css b/src/components/Equipo_Computo/pregunta7.css
index e749651..6073f1a 100644
--- a/src/components/Equipo_Computo/pregunta7.css
+++ b/src/components/Equipo_Computo/pregunta7.css
@@ -1,7 +1,6 @@
 .contenedor-pregunta {
   padding: 20px;
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-  background-color: #f9fafc;
 }
 
 .contenedor-censo{
@@ -14,7 +13,7 @@
  
 
 .pregunta-cuadro {
-  background-color: #f5f5f5;
+  background-color: #fff;
   border-left: 6px solid #001f3f;
   padding: 15px;
   border-radius: 8px;
@@ -79,7 +78,7 @@
 /* Input  */
 .input-contenedor input {
   width: 40%;
-  padding: 6px 25px 6px 6px;
+  padding: 6px 6px 6px 6px;
   border: 2px solid #002855; 
   border-radius: 6px;
   font-size: 14px;
diff --git a/src/components/Equipo_Computo/pregunta9.css b/src/components/Equipo_Computo/pregunta9.css
index 5bc5cec..60e00f0 100644
--- a/src/components/Equipo_Computo/pregunta9.css
+++ b/src/components/Equipo_Computo/pregunta9.css
@@ -1,11 +1,9 @@
 .contenedor-pregunta {
   padding: 20px;
-  background-color: #f9fafc;
 }
 
 
 .pregunta-cuadro {
-  background-color: #f5f5f5;
   border-left: 6px solid #001f3f;
   padding: 15px;
   border-radius: 8px;
@@ -70,7 +68,7 @@
 /* Input  */
 .input-contenedor input {
   width: 40%;
-  padding: 6px 25px 6px 6px;
+  padding: 6px 6px 6px 6px;
   border: 2px solid #002855; 
   border-radius: 6px;
   font-size: 14px;
diff --git a/src/components/Perifericos/Pregunta1EP.tsx b/src/components/Perifericos/Pregunta1EP.tsx
index b71141c..95c9a67 100644
--- a/src/components/Perifericos/Pregunta1EP.tsx
+++ b/src/components/Perifericos/Pregunta1EP.tsx
@@ -47,7 +47,11 @@ export default function Pregunta1EP() {
 
   return (
     <div className="container">
-      <div className="header">
+      <div className="contenedor-censo">
+        Censo de equipos periféricos - Equipo de digitalización
+      </div>
+
+      <div className="pregunta-cuadro">
         1. Desglose el número de equipos de impresión con que cuenta el área
         universitaria.
       </div>
diff --git a/src/components/Perifericos/Pregunta2EP.tsx b/src/components/Perifericos/Pregunta2EP.tsx
index 4a6df47..c8d0ccd 100644
--- a/src/components/Perifericos/Pregunta2EP.tsx
+++ b/src/components/Perifericos/Pregunta2EP.tsx
@@ -41,9 +41,12 @@ export default function Pregunta2EP() {
 
   return (
     <div className={styles.container_P2}>
-      <div className={styles.header_P2}>
-        <span className={styles.required_P2}>*</span>
-        <small>(Requerido en el caso de contar con Equipo de impresión)</small>
+      <div className="contenedor-censo">
+        Censo de equipos periféricos - Equipo de digitalización
+      </div>
+
+      <div className="pregunta-cuadro">
+        2. Indique el número de equipos de impresión de acuerdo con la población universitaria al que se destina su uso primordialmente.
       </div>
 
       <div className={styles.row_P2}>
@@ -60,7 +63,7 @@ export default function Pregunta2EP() {
 
         <div className={styles.item_P2}>
           <label htmlFor="profesores">
-            Profesores <span className={styles.helpIcon_P2}>?</span>
+            Profesores
           </label>
           <input
             type="text"
@@ -84,7 +87,7 @@ export default function Pregunta2EP() {
 
         <div className={styles.item_P2}>
           <label htmlFor="investigadores">
-            Investigadores <span className={styles.helpIcon_P2}>?</span>
+            Investigadores
           </label>
           <input
             type="text"
@@ -97,7 +100,7 @@ export default function Pregunta2EP() {
 
         <div className={styles.item_P2}>
           <label htmlFor="administrativos">
-            Administrativos <span className={styles.helpIcon_P2}>?</span>
+            Administrativos 
           </label>
           <input
             type="text"
diff --git a/src/components/Perifericos/Pregunta4EP.tsx b/src/components/Perifericos/Pregunta4EP.tsx
index 264e99e..07bce03 100644
--- a/src/components/Perifericos/Pregunta4EP.tsx
+++ b/src/components/Perifericos/Pregunta4EP.tsx
@@ -38,10 +38,15 @@ export default function Pregunta4EP() {
 
   return (
     <div className="container">
-      <div className="header-bar">
+      <div className="contenedor-censo">
         Censo de equipos periféricos - Equipo de digitalización
       </div>
 
+      <div className="pregunta-cuadro">
+        4. Desglose el número de equipos de digitalización con que cuenta el
+        área universitaria.
+      </div>
+
       <div className="grid">
         <div className="item">
           <label htmlFor="digitalizadorCamaPlana">
diff --git a/src/components/Perifericos/pregunta2EP.module.scss b/src/components/Perifericos/pregunta2EP.module.scss
index 85ac844..e0bc04a 100644
--- a/src/components/Perifericos/pregunta2EP.module.scss
+++ b/src/components/Perifericos/pregunta2EP.module.scss
@@ -1,11 +1,6 @@
 .container_P2 {
-  max-width: 1000px;
-  margin: 2% 10% 20% 10%;
-  background: white;
+  max-width: 1200px;
   padding: 20px;
-  border: 1px solid #ddd;
-  border-radius: 6px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 
   label {
     display: block;
@@ -48,13 +43,19 @@
 .row_P2 {
   display: flex;
   gap: 10px;
-  align-items: flex-start;
+  align-items: end;
   flex-wrap: wrap;
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 20px;
+  overflow-x: auto;
+  box-shadow: 0 4px 10px #0000001a;
 }
 
 .item_P2 {
   flex: 1;
   min-width: 140px;
+  width: 100%;
 }
 
 /* Responsivo */
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 6fd177f..085b9df 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -10,7 +10,7 @@ function Header() {
   const pathname = usePathname();
 
   const publicNav = ["/escaner", "/agregarEquipo", "/editar"];
-  const privateNav = ["/reporte", "/crearCuenta", "/cambiarPass"];
+  const privateNav = ["/reporte", "/crearCuenta", "/cambiarPass","/perifericos"];
 
   return (
     <header className={header.header}>