added toggleButtons

src/app/styles/layout/pregunta7.scss

@@ -1,17 +1,20 @@
-.contenedor-censo{
+.contenedor-censo {
   color: #fff;
   background-color: #003e79;
   border-radius: 4px;
   padding: 15px;
   font-size: 16px;
 }
+
 .pregunta-cuadro {
-    background-color: #fff;
-    border-left: 10px solid #003e79;
-    border-radius: 8px;
-    padding: 15px;
-    font-size: 16px;
+  position: relative;
+  background-color: #fff;
+  border-left: 10px solid #003e79;
+  border-radius: 8px;
+  padding: 15px;
+  font-size: 16px;
 }
+
 .container {
   max-width: 100%;
   display: flex;
@@ -53,7 +56,7 @@
 
 .table-container {
   background-color: #fff;
-  border-radius:0 0 4px 4px;
+  border-radius: 0 0 4px 4px;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
   overflow: hidden;
 }
@@ -73,8 +76,6 @@ thead th {
   cursor: pointer;
   user-select: none;
   transition: background-color 0.3s;
-  
-  
 
   &:hover {
     background-color: #0056b3;
@@ -119,7 +120,7 @@ tr:nth-child(even) {
     }
 
     &.active {
-      background-color:#0056b3;
+      background-color: #0056b3;
       color: #fff;
       border-color: #0056b3;
       font-weight: 600;
@@ -141,4 +142,4 @@ tr:nth-child(even) {
     flex-direction: column;
     align-items: flex-start;
   }
-}
+}

src/components/Equipo_Computo/Pregunta1.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect } from "react";
 import axios from "axios";
 import Cookies from "js-cookie";
 import style from "./pregunta1_1.module.scss";
+import ToggleButton from "../Toggle/ToggleButton";
 
 type RawEntry = {
   uso: string;
@@ -163,7 +164,7 @@ export default function Pregunta1() {
       <div className={style["contenedor-censo"]}>Censo de equipos de cómputo</div>
 
       <div className={style["pregunta-cuadro"]}>
-        Número de equipos de cómputo por cada categoría y perfil de usuario.
+        Número de equipos de cómputo por cada categoría y perfil de usuario.<ToggleButton/>
       </div>
 
       <div className={style["contenedor-tablas"]}>

src/components/Equipo_Computo/Pregunta2.tsx

@@ -5,6 +5,7 @@ import axios from "axios";
 import styles from "./pregunta2.module.scss";
 import Cookies from "js-cookie";
 import style from "styled-jsx/style";
+import ToggleButton from "../Toggle/ToggleButton";
 type OsEntry = {
   os: string;
   count: number;
@@ -87,7 +88,7 @@ export default function Pregunta2() {
       <div className={styles["contenedor-censo_p1"]}>Censo de equipos de cómputo - Sitema Operativo</div>
 
       <div className={styles["pregunta-cuadro_p1"]}>
-        Número de equipos de cómputo por cada categoría y perfil de usuario.
+        Número de equipos de cómputo por cada categoría y perfil de usuario.<ToggleButton/>
       </div>
       <div className={styles.scanView_P1}>
 

src/components/Equipo_Computo/Pregunta3.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect } from "react";
 import axios from "axios";
 import Cookies from "js-cookie";
 import styles from "./pregunta3.module.scss";
+import ToggleButton from "../Toggle/ToggleButton";
 
 type ProcessorEntry = {
   tipo: string;
@@ -144,7 +145,7 @@ export default function Pregunta3_2() {
         <div className={styles["contenedor-censo_P3"]}>Censo de equipos de cómputo - Plataforma y tipo procesador</div>
 
       <div className={styles["pregunta-cuadro_P3"]}>
-        Cantidad de población beneficiada por plataforma y tipo de procesador.
+        Cantidad de población beneficiada por plataforma y tipo de procesador.<ToggleButton/>
       </div>
         <div className={styles.scanView_P3}>
 

src/components/Equipo_Computo/Pregunta7.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect } from "react";
 import Cookies from "js-cookie";
 import axios from "axios";
 import "./pregunta7.css";
+import ToggleButton from "../Toggle/ToggleButton";
 
 type AntiguedadItem = {
   antiguedad: string | null;
@@ -115,7 +116,7 @@ export default function Pregunta7() {
       </div>
 
       <div className="pregunta-cuadro">
-        Antigüedad que tienen los equipos periféricos del área universitaria.
+        Antigüedad que tienen los equipos periféricos del área universitaria.<ToggleButton/>
       </div>
 
       <div className="tabla-contenedor">

src/components/Equipo_Computo/Pregunta9.tsx

@@ -5,6 +5,7 @@ import Cookies from "js-cookie";
 import axios from "axios";
 import "./pregunta9.css";
 import Pregunta10 from "./pregunta10";
+import ToggleButton from "../Toggle/ToggleButton";
 
 type AntiguedadItem = {
   antiguedad: string | null;
@@ -126,7 +127,7 @@ export default function Pregunta9() {
 
       {/* Pregunta 9: Antigüedad */}
       <div className="pregunta-cuadro">
-        Antigüedad que tienen los equipos de cómputo del área universitaria.
+        Antigüedad que tienen los equipos de cómputo del área universitaria.<ToggleButton/>
       </div>
 
       <div className="tabla-contenedor">

src/components/Equipo_Computo/pregunta10.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect } from "react";
 import axios from "axios";
 import Cookies from "js-cookie";
 import "./pregunta10.css";
+import ToggleButton from "../Toggle/ToggleButton";
 
 export default function Pregunta10() {
   const [garantia, setGarantia] = useState({
@@ -55,7 +56,7 @@ export default function Pregunta10() {
   return (
     <>
       <div className="pregunta-cuadro">
-        Equipos de cómputo que tienen garantía de proveedor
+        Equipos de cómputo que tienen garantía de proveedoro.<ToggleButton/>
       </div>
 
       <div className="tabla-contenedor">

src/components/Equipo_Computo/pregunta1_1.module.scss

@@ -6,18 +6,19 @@
   font-size: 16px;
 }
 
-.contenedor-pregunta{
+.contenedor-pregunta {
   display: flex;
   flex-direction: column;
   gap: 10px;
 }
 
 .pregunta-cuadro {
-    background-color: #fff;
-    border-left: 10px solid #003e79;
-    border-radius: 8px;
-    padding: 15px;
-    font-size: 16px;
+  position: relative;
+  background-color: #fff;
+  border-left: 10px solid #003e79;
+  border-radius: 8px;
+  padding: 15px;
+  font-size: 16px;
 }
 
 .tabla-contenedor {
@@ -37,7 +38,8 @@
   color: black;
   table-layout: fixed;
 
-  th, td {
+  th,
+  td {
     border: 1px solid #ddd;
     padding: 12px;
   }
@@ -73,7 +75,7 @@
 
   input {
     width: 100%;
-    padding: 6px 25px 6px 6px;
+    padding: 6px 6px 6px 6px;
     border: 2px solid #003e79;
     border-radius: 6px;
     font-size: 14px;

src/components/Equipo_Computo/pregunta2.module.scss

@@ -18,6 +18,7 @@
 }
 
 .pregunta-cuadro_p1 {
+  position: relative;
   background-color: #fff;
   border-left: 10px solid #003e79;
   border-radius: 8px;

src/components/Equipo_Computo/pregunta3.module.scss

@@ -7,6 +7,7 @@
 }
 
 .pregunta-cuadro_P3 {
+  position: relative;
     background-color: #fff;
     border-left: 10px solid #003e79;
     border-radius: 8px;

src/components/Equipo_Computo/pregunta7.css

@@ -4,7 +4,7 @@
   gap: 10px;
 }
 
-.contenedor-censo{
+.contenedor-censo {
   background-color: #003e79;
   color: white;
   padding: 15px;
@@ -13,6 +13,7 @@
 }
 
 .pregunta-cuadro {
+  position: relative;
   background-color: #fff;
   border-left: 10px solid #003e79;
   padding: 15px;
@@ -40,7 +41,6 @@
 .tabla td {
   border: 1px solid #ddd;
   padding: 12px;
-  
 }
 
 .tabla th {
@@ -77,17 +77,16 @@
 .input-contenedor input {
   width: 100%;
   padding: 6px 6px 6px 6px;
-  border: 2px solid #003e79; 
+  border: 2px solid #003e79;
   border-radius: 6px;
   font-size: 14px;
   color: #333;
-  text-align: center; 
+  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;
@@ -106,11 +105,10 @@
   opacity: 1;
 }
 
- 
 .input-contenedor .porcentaje {
   position: absolute;
-   
-  right: 8px; 
+
+  right: 8px;
   color: #555;
   font-weight: bold;
   pointer-events: none;
@@ -131,4 +129,3 @@
   background-color: #ffcccc;
   color: #a80000;
 }
-

src/components/Perifericos/Pregunta1EP.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import style from "./pregunta1EP.module.scss";
 import axios from "axios";
 import Cookies from "js-cookie";
@@ -121,9 +121,8 @@ export default function Pregunta1EP() {
         Censo de equipos periféricos - Equipo de Impresion
       </div>
 
-      <div className="pregunta-cuadro">Equipos de impresión.</div>
+      <div className="pregunta-cuadro">Equipos de impresión.<ToggleButton/></div>
 
-      <ToggleButton/>
       <div className={style.grid}>
         {/* Columna 1 */}
         <div className="item">

src/components/Perifericos/Pregunta2EP.tsx

@@ -3,6 +3,7 @@ import { useState, useEffect } from "react";
 import styles from "./pregunta2EP.module.scss";
 import axios from "axios";
 import Cookies from "js-cookie";
+import ToggleButton from "../Toggle/ToggleButton";
 
 interface EquiposPoblacion {
   alumnos: string;
@@ -97,7 +98,7 @@ export default function Pregunta2EP() {
   return (
     <div className={styles.container_P2}>
       <div className="pregunta-cuadro">
-        Equipos de impresión de acuerdo con la población universitaria.
+        Equipos de impresión de acuerdo con la población universitaria.<ToggleButton/>
       </div>
 
       <div className={styles.row_P2}>

src/components/Perifericos/Pregunta4EP.tsx

@@ -3,6 +3,7 @@ import { useState, useEffect } from "react";
 import "@/app/styles/layout/pregunta4EP.scss";
 import Cookies from "js-cookie";
 import axios from "axios";
+import ToggleButton from "../Toggle/ToggleButton";
 
 interface EquiposDigitalizacion {
   digitalizadorCamaPlana: string;
@@ -76,7 +77,7 @@ export default function Pregunta4EP() {
       </div>
 
       <div className="pregunta-cuadro">
-        Número de equipos de digitalización.
+        Número de equipos de digitalización.<ToggleButton/>
       </div>
 
       <div className="grid">

src/components/Perifericos/Pregunta5EP.tsx

@@ -4,6 +4,7 @@ import styles from "./pregunta2EP.module.scss";
 import { useEffect, useState } from "react";
 import Cookies from "js-cookie";
 import axios from "axios";
+import ToggleButton from "../Toggle/ToggleButton";
 
 interface EquiposPoblacion {
   alumnos: string;
@@ -98,7 +99,7 @@ export default function Pregunta5EP() {
     <div className="container">
       <div className="pregunta-cuadro">
         Número de equipos de digitalización de acuerdo con la población
-        universitaria.
+        universitaria.<ToggleButton/>
       </div>
 
       <div className={styles.row_P2}>

src/components/Perifericos/Pregunta7EP.tsx

@@ -4,6 +4,7 @@ import React, { useState, useEffect } from "react";
 import axios from "axios";
 import Cookies from "js-cookie";
 import "../../app/styles/layout/pregunta7.scss";
+import ToggleButton from "../Toggle/ToggleButton";
 
 interface Dato {
   nombre: string;
@@ -82,7 +83,7 @@ export default function Pregunta7EP() {
     <div className="container">
       
       <div className="contenedor-censo">Censo de equipos de cómputo - Laboratorio</div>
-      <div className="pregunta-cuadro">Numero de laboratorios.</div>
+      <div className="pregunta-cuadro">Numero de laboratorios.<ToggleButton/></div>
 
       <div className="controls">
         <div className="show-records">

src/components/Perifericos/Pregunta8.tsx

@@ -4,6 +4,7 @@ import React, { useState, useEffect } from "react";
 import axios from "axios";
 import Cookies from "js-cookie";
 import "../../app/styles/layout/pregunta7.scss";
+import ToggleButton from "../Toggle/ToggleButton";
 
 interface Dato {
   nombre: string;
@@ -82,7 +83,7 @@ export default function Pregunta8() {
     <div className="container">
       
       <div className="contenedor-censo">Censo de equipos de cómputo - Proyectos</div>
-      <div className="pregunta-cuadro">Numero de proyectos.</div>
+      <div className="pregunta-cuadro">Numero de proyectos.<ToggleButton/></div>
       <div className="controls">
         <div className="show-records">
           Mostrar

src/components/Toggle/ToggleButton.module.scss

@@ -8,8 +8,9 @@
 }
 
 .containerToggle{
-    display: flex;
-    justify-content: end;
+  position: absolute;
+  right: 10px;
+  top: 15%;
 }
 
 .toggle {