added new button

src/app/(Operador)/cambiarPass/page.tsx

@@ -7,40 +7,28 @@ import Cookies from "js-cookie";
 import "../../styles/layout/ForgotPasswordPage.scss";
 
 export default function UpdateUserPage() {
-  const [id_User, setId_User] = useState("");
   const [nombre, setNombre] = useState("");
   const [contrasenaN, setContrasenaN] = useState("");
   const [contrasenaV, setContrasenaV] = useState("");
-  const [tipoUsuario, setTipoUsuario] = useState("");
   const [loading, setLoading] = useState(false);
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    if (!id_User || isNaN(Number(id_User))) {
-      toast.error("El ID de usuario es obligatorio y debe ser un número.");
-      return;
-    }
-
-    if (nombre && nombre.trim().length < 3) {
+    if (!nombre || nombre.trim().length < 3) {
       toast.error("El nombre debe tener al menos 3 caracteres.");
       return;
     }
 
-    if (contrasenaN && contrasenaN.length < 6) {
+    if (!contrasenaN || contrasenaN.length < 6) {
       toast.error("La nueva contraseña debe tener al menos 6 caracteres.");
       return;
     }
 
-    if (contrasenaV && contrasenaV.length < 6) {
+    if (!contrasenaV || contrasenaV.length < 6) {
       toast.error("La contraseña actual debe tener al menos 6 caracteres.");
       return;
     }
 
-    if (tipoUsuario && isNaN(Number(tipoUsuario))) {
-      toast.error("El tipo de usuario debe ser un número.");
-      return;
-    }
-
     try {
       setLoading(true);
 
@@ -50,11 +38,9 @@ export default function UpdateUserPage() {
       const response = await axios.post(
         `${process.env.NEXT_PUBLIC_API_URL}/auth/UpdateUsuario`,
         {
-          id_User: Number(id_User),
           nombre,
           contrasenaN,
           contrasenaV,
-          tipoUsuario: tipoUsuario ? Number(tipoUsuario) : undefined,
         },
         { headers }
       );
@@ -71,8 +57,6 @@ export default function UpdateUserPage() {
     <section className="forgot-password-page">
       <div className="forgot-form-container">
         <h1>Actualizar contraseña</h1>
-        <p>Ingresa el ID y los campos que deseas modificar.</p>
-
         <form onSubmit={handleSubmit} className="forgot-form">
           
           <div>

src/app/styles/layout/BarNavigation.scss

@@ -109,7 +109,6 @@
   border-radius: 6px;
   cursor: pointer;
   font-weight: bold;
-  font-size: 2rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -171,7 +170,6 @@
 
   .logout-button {
     margin-top: 10px;
-    font-size: 1.75rem;
     padding: 6px 12px;
     max-width: 180px;
   }

src/app/styles/layout/BarNavigationAdmin.scss

@@ -109,7 +109,6 @@
   border-radius: 6px;
   cursor: pointer;
   font-weight: bold;
-  font-size: 2rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -170,7 +169,6 @@
 
   .logout-button {
     margin-top: 10px;
-    font-size: 1.75rem;
     padding: 6px 12px;
     max-width: 180px;
   }

src/app/styles/layout/ForgotPasswordPage.scss

@@ -9,7 +9,6 @@
   justify-content: center;
   align-items: center;
   width: 100%;
-  min-height: 100vh;
   padding: 2rem;
   color: #222;
 
@@ -26,7 +25,7 @@
       font-size: 3rem;
       font-weight: 700;
       margin-bottom: 1.5rem;
-      color: #bd8c01; // Amarillo tipo login
+      color: #bd8c01; 
     }
 
     p {

src/components/Equipo_Computo/pregunta7.css

@@ -17,7 +17,6 @@
   padding: 15px;
   border-radius: 8px;
   font-size: 16px;
-  margin-bottom: 25px;
 }
 
 .tabla-contenedor {

src/components/Perifericos/Pregunta1EP.tsx

@@ -3,6 +3,7 @@ import React, { useState, useEffect } from "react";
 import style from "./pregunta1EP.module.scss";
 import axios from "axios";
 import Cookies from "js-cookie";
+import ToggleButton from "../ToggleButton";
 
 interface EquiposImpresion {
   inyeccionTinta: string;
@@ -122,6 +123,7 @@ export default function Pregunta1EP() {
 
       <div className="pregunta-cuadro">Equipos de impresión.</div>
 
+      <ToggleButton/>
       <div className={style.grid}>
         {/* Columna 1 */}
         <div className="item">

src/components/Perifericos/pregunta5EP.scss

@@ -1,5 +1,7 @@
-
 .container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
   width: 100%;
 }
 

src/components/ToggleButton.module.scss

@@ -0,0 +1,92 @@
+:root {
+  --bg-off: #fff;
+  --bg-on: linear-gradient(90deg, #003e79 0%, #015cb8 100%);
+  --thumb-off: #015cb8;
+  --thumb-on: #fff;
+  --shadow: 0 6px 18px rgba(99, 102, 241, 0.18);
+}
+
+.toggle {
+  --padding: 6px;
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  padding: 6px 12px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  user-select: none;
+  border-radius: 999px;
+  transition: transform 160ms ease, box-shadow 160ms ease;
+  outline: none;
+}
+
+.toggle:active {
+  transform: scale(0.98);
+}
+
+.track {
+  width: 70px;
+  height: 34px;
+  background: var(--bg-off);
+  border-radius: 999px;
+  display: inline-block;
+  padding: var(--padding);
+  box-sizing: border-box;
+  position: relative;
+  transition: background 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms ease;
+  box-shadow: none;
+}
+
+/* When the component has the `on` class, style the inner track and thumb accordingly. */
+.on .track {
+  background: var(--bg-on);
+  box-shadow: var(--shadow);
+}
+
+.thumb {
+  width: 22px;
+  height: 22px;
+  background: var(--thumb-off);
+  border-radius: 50%;
+  display: block;
+  transform: translateX(0);
+  transition: transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms ease;
+  box-shadow: 0 4px 10px rgba(16,24,40,0.12);
+}
+
+.on .thumb {
+  background: var(--thumb-on);
+  transform: translateX(38px);
+  box-shadow: 0 6px 16px rgba(91, 90, 255, 0.18);
+}
+
+.label {
+position: absolute;
+right: 10px;
+top: 8px;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
+  font-size: 14px;
+  font-weight: 600;
+  color: #0f172a;
+  letter-spacing: 0.2px;
+}
+
+.on .label {
+    right: 45%;
+  color: #fff;
+  text-shadow: 0 1px 0 rgba(0,0,0,0.12);
+}
+
+/* Focus visible for accessibility */
+.toggle:focus-visible .track {
+  box-shadow: 0 0 0 4px rgba(99,102,241,0.12);
+}
+
+/* Small responsive tweak */
+@media (max-width: 420px) {
+  .track { width: 52px; height: 30px; }
+  .thumb { width: 20px; height: 20px; }
+  .on .thumb { transform: translateX(24px); }
+  .label { font-size: 13px; }
+}

src/components/ToggleButton.tsx

@@ -0,0 +1,51 @@
+// ToggleButton.tsx
+// Usa este archivo como `ToggleButton.tsx`
+
+import React, { useState } from 'react';
+import styles from './ToggleButton.module.scss';
+
+export type ToggleButtonProps = {
+  /** estado inicial: true -> presionado ("desuso") */
+  defaultOn?: boolean;
+  /** callback cuando cambia el estado */
+  onChange?: (on: boolean) => void;
+  /** texto cuando está apagado (por defecto: "uso") */
+  offLabel?: string;
+  /** texto cuando está encendido (por defecto: "desuso") */
+  onLabel?: string;
+  className?: string;
+};
+
+const ToggleButton: React.FC<ToggleButtonProps> = ({
+  defaultOn = false,
+  onChange,
+  offLabel = 'Uso',
+  onLabel = 'Baja',
+  className = '',
+}) => {
+  const [on, setOn] = useState<boolean>(defaultOn);
+
+  function toggle() {
+    const next = !on;
+    setOn(next);
+    onChange?.(next);
+  }
+
+  return (
+    <button
+      type="button"
+      aria-pressed={on}
+      className={`${styles.toggle} ${on ? styles.on : ''} ${className}`}
+      onClick={toggle}
+      title={on ? onLabel : offLabel}
+    >
+      <span className={styles.track}>
+        <span className={styles.thumb} />
+      <span className={styles.label}>{on ? onLabel : offLabel}</span>
+
+      </span>
+    </button>
+  );
+};
+
+export default ToggleButton;