added new style responsive

app/(private)/Alta/page.tsx

@@ -1,4 +1,4 @@
-'use client'
+"use client";
 import { useState } from "react";
 import StepNavigator from "@/app/Components/StepNavigator/StepNavigator";
 
@@ -6,86 +6,71 @@ export default function Page() {
   const [step, setStep] = useState(1);
   const [major, setMajor] = useState("");
 
-  const handleNext = (e: any) => {
-    e.preventDefault();
-    if (step < 3) setStep(step + 1);
-  };
-
-  const handlePrev = (e: any) => {
-    e.preventDefault();
-    if (step > 1) setStep(step - 1);
-  };
-
   return (
     <section className="containerSection">
       <h1 className="title">ALTA</h1>
 
       <StepNavigator totalSteps={2} onFinish={() => console.log()}>
-        <form className='containerForm'>
-          <label className='label'>No.Cuenta</label>
+        <form className="containerForm">
+          <label className="label">No.Cuenta</label>
           <input
-            type='text'
+            type="text"
             //value={user}
             //onChange={(e) => setUser(e.target.value)}
-            placeholder='Coloca un número de cuenta...'
+            placeholder="Coloca un número de cuenta..."
           />
 
-          <label className='label'>Nombre</label>
+          <label className="label">Nombre</label>
           <input
-            type='text'
+            type="text"
             //value={user}
             //onChange={(e) => setUser(e.target.value)}
-            placeholder='Coloca el nombre'
+            placeholder="Coloca el nombre"
           />
 
-          <label className='label'>Apellido Paterno</label>
+          <label className="label">Apellido Paterno</label>
           <input
-            type='text'
+            type="text"
             //value={user}
             //onChange={(e) => setUser(e.target.value)}
-            placeholder='Coloca el apellido paterno'
+            placeholder="Coloca el apellido paterno"
           />
 
-          <label className='label'>Apellido Materno</label>
+          <label className="label">Apellido Materno</label>
           <input
-            type='text'
+            type="text"
             //value={user}
             //onChange={(e) => setUser(e.target.value)}
-            placeholder='Coloca el apellido materno'
+            placeholder="Coloca el apellido materno"
           />
         </form>
         <form>
-          <label className='label'>Email</label>
+          <label className="label">Email</label>
           <input
-            type='text'
+            type="text"
             //value={user}
             //onChange={(e) => setUser(e.target.value)}
-            placeholder='Coloca '
+            placeholder="Coloca "
           />
 
-          <label className='label'>Fecha Nacimiento</label>
+          <label className="label">Fecha Nacimiento</label>
           <input
-            type='text'
+            type="text"
             //value={user}
             //onChange={(e) => setUser(e.target.value)}
-            placeholder='Coloca '
+            placeholder="Coloca "
           />
 
-          <label className='label'>Carrera</label>
-          <select
-            value={major}
-            onChange={(e) => setMajor(e.target.value)}
-          >
+          <label className="label">Carrera</label>
+          <select value={major} onChange={(e) => setMajor(e.target.value)}>
             <option value="">-- Selecciona un tiempo --</option>
             <option value="15">15 minutos</option>
           </select>
 
           <button className="button buttonSearch">registrar</button>
-
         </form>
       </StepNavigator>
-
-    </section >
+    </section>
   );
 }
-//IO
+//IO

app/Components/BarNavigation/BarNavigation.css

@@ -56,7 +56,6 @@
   align-items: center;
   justify-content: center;
   width: 100%;
-  gap: 10px;
   position: relative;
   z-index: 1;
   border-radius: 4px 4px 0 0;
@@ -139,7 +138,7 @@ tbody {
 
   .barNavigation ul {
     position: absolute;
-    background-color: rgb(1, 92, 184);
+    background-color: #003e79;
     flex-direction: column;
     padding: 10px 0;
     align-items: center;
@@ -160,10 +159,10 @@ tbody {
   }
 
   .subMenu ul {
-    width: 90%;
+    width: 100%;
     border-radius: 4px;
     position: relative;
-    background-color: rgba(0, 61, 121, 1);
+    background-color: rgb(1, 92, 184);
   }
 
   thead,

app/Components/ChangePassword/changePassword.tsx

@@ -14,7 +14,7 @@ export default function ChangePassword() {
 
   return (
     <section className="centerGrid containerSection">
-      <form onSubmit={handleChangePass}>
+      <form onSubmit={handleChangePass} className="pass">
         <div className="containerInput relative">
           <label className="label">Contraseña actual</label>
           <input

app/Components/StepNavigator/StepNavigator.css

@@ -1,11 +1,12 @@
 .stepNavigator {
-    position: relative;
-    max-width: 600px;
-    margin-top: 1rem;
-    border: 1px solid #e5e7eb;
-    border-radius: 4px;
-    background-color: #f9fafb;
-    padding: 1rem;
-    display: flex;
-    flex-direction: column;
-}
+  position: relative;
+  width: 100%;
+  max-width: 600px;
+  margin-top: 1rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 4px;
+  background-color: #f9fafb;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+}

app/globals.css

@@ -289,7 +289,6 @@ form {
 
 .toggleGroup {
   display: flex;
-  gap: 5px;
   background-color: #f3f4f6;
   border-radius: 6px;
   flex-wrap: wrap;
@@ -306,6 +305,9 @@ form {
   font-weight: 500;
   overflow: hidden;
   max-height: 60px;
+  padding: 1rem 0.5rem;
+  min-width: 100px;
+  min-height: 45px;
 }
 
 .toggleButton.active {
@@ -387,10 +389,41 @@ table tr {
   width: 100%;
 }
 
+.pass {
+  display: flex;
+  width: 300px;
+}
+
 @media (max-width: 1330px) {
   .mainContainer {
     grid-template-rows: 60px 1fr;
   }
+
+  .centerGrid {
+    display: flex !important;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .img {
+    width: 100%;
+  }
+
+  .img::after {
+    background: linear-gradient(to right, #f9f9f993, rgba(128, 128, 128, 0));
+  }
+
+  .img::before {
+    display: flex;
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to left, #f9f9f993, rgba(128, 128, 128, 0));
+  }
+
+  .title {
+    text-align: center;
+  }
 }
 
 @media (max-width: 1300px) {
@@ -449,10 +482,6 @@ table tr {
     background: linear-gradient(to left, #f9f9f9, rgba(128, 128, 128, 0));
   }
 
-  .title {
-    text-align: center;
-  }
-
   .containerSection {
     align-items: center;
   }
@@ -480,6 +509,10 @@ table tr {
     font-size: 1.5rem;
     padding: 1rem 1.5rem;
   }
+
+  .toggleButton {
+    padding: 0;
+  }
 }
 
 @media (max-height: 960px) {