From cf118d4cc272745a94ae00038a6deba90834b934 Mon Sep 17 00:00:00 2001
From: IO420 <320154041@pcpuma.acatlan.unam.mx>
Date: Fri, 5 Sep 2025 20:54:29 -0400
Subject: [PATCH] fixed problems responsives and added a new component

---
 app/ActivosMantenimiento/page.tsx             |   2 -
 app/Alta/page.tsx                             | 107 ++++++++---------
 app/AsignacionMesas/page.tsx                  |   1 -
 .../BarNavigation/BarNavigation.css           |   4 +-
 .../BarNavigation/BarNavigation.tsx           |  13 +--
 app/Components/Login/Login.css                |   9 +-
 .../ProgramSelector/ProgramSelector.tsx       |  96 +++++++++++++++
 app/Components/Receipt/Receipt.tsx            |   1 -
 app/InformacionEquipo/informacionequipo.css   |  24 +---
 app/InformacionEquipo/page.tsx                | 109 ++----------------
 app/globals.css                               |  10 +-
 11 files changed, 179 insertions(+), 197 deletions(-)
 create mode 100644 app/Components/ProgramSelector/ProgramSelector.tsx

diff --git a/app/ActivosMantenimiento/page.tsx b/app/ActivosMantenimiento/page.tsx
index 11ddc6f..5bf1e47 100644
--- a/app/ActivosMantenimiento/page.tsx
+++ b/app/ActivosMantenimiento/page.tsx
@@ -66,7 +66,6 @@ export default function Page() {
                         <td>{machine.plataforma}</td>
                         <td>{machine.area}</td>
                         <td>
-                          {" "}
                           <input type="checkbox" />
                         </td>
                       </tr>
@@ -98,7 +97,6 @@ export default function Page() {
                       <tr key={index}>
                         <td>{table.mesa}</td>
                         <td>
-                          {" "}
                           <input type="checkbox" />
                         </td>
                       </tr>
diff --git a/app/Alta/page.tsx b/app/Alta/page.tsx
index 2d6431f..5f7975e 100644
--- a/app/Alta/page.tsx
+++ b/app/Alta/page.tsx
@@ -20,66 +20,67 @@ export default function Page() {
     <section className="containerSection">
       <h1 className="title">ALTA</h1>
 
-      <div className='containerInput'>
-        <label className='label'>No.Cuenta</label>
-        <input
-          type='text'
-          //value={user}
-          //onChange={(e) => setUser(e.target.value)}
-          placeholder='Coloca un número de cuenta...'
-        />
+      <form className='containerForm'>
 
-        <label className='label'>Nombre</label>
-        <input
-          type='text'
-          //value={user}
-          //onChange={(e) => setUser(e.target.value)}
-          placeholder='Coloca '
-        />
+          <label className='label'>No.Cuenta</label>
+          <input
+            type='text'
+            //value={user}
+            //onChange={(e) => setUser(e.target.value)}
+            placeholder='Coloca un número de cuenta...'
+          />
 
-        <label className='label'>Apellido Paterno</label>
-        <input
-          type='text'
-          //value={user}
-          //onChange={(e) => setUser(e.target.value)}
-          placeholder='Coloca '
-        />
+          <label className='label'>Nombre</label>
+          <input
+            type='text'
+            //value={user}
+            //onChange={(e) => setUser(e.target.value)}
+            placeholder='Coloca '
+          />
 
-        <label className='label'>Apellido Materno</label>
-        <input
-          type='text'
-          //value={user}
-          //onChange={(e) => setUser(e.target.value)}
-          placeholder='Coloca '
-        />
+          <label className='label'>Apellido Paterno</label>
+          <input
+            type='text'
+            //value={user}
+            //onChange={(e) => setUser(e.target.value)}
+            placeholder='Coloca '
+          />
 
-        <label className='label'>Email</label>
-        <input
-          type='text'
-          //value={user}
-          //onChange={(e) => setUser(e.target.value)}
-          placeholder='Coloca '
-        />
+          <label className='label'>Apellido Materno</label>
+          <input
+            type='text'
+            //value={user}
+            //onChange={(e) => setUser(e.target.value)}
+            placeholder='Coloca '
+          />
 
-        <label className='label'>Fecha Nacimiento</label>
-        <input
-          type='text'
-          //value={user}
-          //onChange={(e) => setUser(e.target.value)}
-          placeholder='Coloca '
-        />
+          <label className='label'>Email</label>
+          <input
+            type='text'
+            //value={user}
+            //onChange={(e) => setUser(e.target.value)}
+            placeholder='Coloca '
+          />
 
-        <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>
+          <label className='label'>Fecha Nacimiento</label>
+          <input
+            type='text'
+            //value={user}
+            //onChange={(e) => setUser(e.target.value)}
+            placeholder='Coloca '
+          />
 
-        <button className="button buttonSearch">registrar</button>
-      </div>
+          <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>
 
     </section>
   );
diff --git a/app/AsignacionMesas/page.tsx b/app/AsignacionMesas/page.tsx
index 23259b5..b941e07 100644
--- a/app/AsignacionMesas/page.tsx
+++ b/app/AsignacionMesas/page.tsx
@@ -53,7 +53,6 @@ export default function Page() {
               content: (
                 <>
                   <div className="checkbox-grid">
-                    {" "}
                     <label>
                       <input type="checkbox" /> Mesa
                     </label>
diff --git a/app/Components/BarNavigation/BarNavigation.css b/app/Components/BarNavigation/BarNavigation.css
index 470c8e4..79f0bc2 100644
--- a/app/Components/BarNavigation/BarNavigation.css
+++ b/app/Components/BarNavigation/BarNavigation.css
@@ -95,6 +95,7 @@
 
 .containerLinks {
     padding: 0 !important;
+    border-radius: 0 0 4px 4px;
 }
 
 .links {
@@ -117,8 +118,6 @@
 
     .menuToggle.center {
         align-items: center;
-        transform: translateX(-50%);
-        left: 50%;
     }
 
     .barNavigation {
@@ -129,7 +128,6 @@
         position: absolute;
         background-color: rgb(1, 92, 184);
         flex-direction: column;
-        gap: 10px;
         padding: 10px 0;
         align-items: center;
         display: none;
diff --git a/app/Components/BarNavigation/BarNavigation.tsx b/app/Components/BarNavigation/BarNavigation.tsx
index b04ac10..27e2b16 100644
--- a/app/Components/BarNavigation/BarNavigation.tsx
+++ b/app/Components/BarNavigation/BarNavigation.tsx
@@ -24,7 +24,7 @@ function BarNavigation() {
             <ul className={openMenu ? "active" : ""}>
                 <li className={`subMenu ${openSubMenu === 0 ? "open" : ""}`}>
                     <span onClick={() => toggleSubMenu(0)}>Inscripciones</span>
-                    <ul className="containerLinks" >
+                    <ul className="containerLinks" onClick={toggleMenu}>
                         <Link href="/Alta" className="links">
                             <li >Alta</li>
                         </Link>
@@ -39,7 +39,7 @@ function BarNavigation() {
 
                 <li className={`subMenu ${openSubMenu === 1 ? "open" : ""}`}>
                     <span onClick={() => toggleSubMenu(1)}>Servicios</span>
-                    <ul>
+                    <ul onClick={toggleMenu}>
                         <Link href="/Impresiones" className="links">
                             <li >
                                 Impresiones y Ploteo
@@ -65,7 +65,7 @@ function BarNavigation() {
 
                 <li className={`subMenu ${openSubMenu === 2 ? "open" : ""}`}>
                     <span onClick={() => toggleSubMenu(2)}>Equipo</span>
-                    <ul >
+                    <ul onClick={toggleMenu}>
                         <Link href="/InformacionEquipo" className="links">
                             <li>Informacion de Equipos</li>
                         </Link>
@@ -83,8 +83,7 @@ function BarNavigation() {
 
                 <li className={`subMenu ${openSubMenu === 3 ? "open" : ""}`}>
                     <span onClick={() => toggleSubMenu(3)}>Reportes</span>
-
-                    <ul>
+                    <ul onClick={toggleMenu}>
                         <Link href="/Recibo" className="links">
                             <li>Recibo</li>
                         </Link>
@@ -96,12 +95,12 @@ function BarNavigation() {
                         </Link>
                     </ul>
                 </li>
-                <li className="subMenu">
+                <li className="subMenu" onClick={toggleMenu}>
                     <Link href="/QuitarSancion" className="links">
                         Quitar sancion
                     </Link>
                 </li>
-                <li className="subMenu">
+                <li className="subMenu" onClick={toggleMenu}>
                     <Link href="CambiarPass" className="links">
                         Cambiar contraseña
                     </Link>
diff --git a/app/Components/Login/Login.css b/app/Components/Login/Login.css
index bc42c63..6cb4275 100644
--- a/app/Components/Login/Login.css
+++ b/app/Components/Login/Login.css
@@ -2,6 +2,13 @@
     width: 300px;
 }
 
+.center {
+  display: grid;
+  grid-template-columns: auto 400px;
+  justify-content: center;
+  align-items: center;
+}
+
 .relative {
     position: relative;
 }
@@ -20,6 +27,6 @@
 
 @media(max-width:800px){
     .center{
-        display: flex;
+        display: flex ;
     }
 }
\ No newline at end of file
diff --git a/app/Components/ProgramSelector/ProgramSelector.tsx b/app/Components/ProgramSelector/ProgramSelector.tsx
new file mode 100644
index 0000000..e255580
--- /dev/null
+++ b/app/Components/ProgramSelector/ProgramSelector.tsx
@@ -0,0 +1,96 @@
+
+
+function ProgramSelector() {
+    return (
+        <div>
+            <form className="form-container">
+                <label htmlFor="equipo">Ubicación de equipo</label>
+                <select id="equipo">
+                    <option value="">buscar</option>
+                    <option value="sala1">Equipo 1</option>
+                    <option value="sala2">Equipo 2</option>
+                    <option value="sala3">Equipo 3</option>
+                </select>
+
+                <div className="checkbox-grid">
+                    <label>
+                        <input type="checkbox" /> 3D MAX STUDIO 2014
+                    </label>
+                    <label>
+                        <input type="checkbox" /> ADOBE CREATIVE SUITE
+                    </label>
+                    <label>
+                        <input type="checkbox" /> ARCHICAD 20
+                    </label>
+                    <label>
+                        <input type="checkbox" /> AUDACITY - win - 2.0
+                    </label>
+                    <label>
+                        <input type="checkbox" /> AUTOCAD
+                    </label>
+                    <label>
+                        <input type="checkbox" /> CODE-BLOCKS
+                    </label>
+                    <label>
+                        <input type="checkbox" /> COREL DRAW
+                    </label>
+                    <label>
+                        <input type="checkbox" /> DEV-C++
+                    </label>
+                    <label>
+                        <input type="checkbox" /> EVIEWS Enterprise
+                    </label>
+                    <label>
+                        <input type="checkbox" /> Google Earth
+                    </label>
+                    <label>
+                        <input type="checkbox" /> INTERNET
+                    </label>
+                    <label>
+                        <input type="checkbox" /> MAPLE
+                    </label>
+                    <label>
+                        <input type="checkbox" /> MATHEMATICA
+                    </label>
+                    <label>
+                        <input type="checkbox" /> MATLAB
+                    </label>
+                    <label>
+                        <input type="checkbox" /> Maxima
+                    </label>
+                    <label>
+                        <input type="checkbox" /> miktex
+                    </label>
+                    <label>
+                        <input type="checkbox" /> NETBEANS
+                    </label>
+                    <label>
+                        <input type="checkbox" /> OFFICE 2016
+                    </label>
+                    <label>
+                        <input type="checkbox" /> PSeInt
+                    </label>
+                    <label>
+                        <input type="checkbox" /> R 3.0.1
+                    </label>
+                    <label>
+                        <input type="checkbox" /> RStudio
+                    </label>
+                    <label>
+                        <input type="checkbox" /> SPSS Statistics
+                    </label>
+                    <label>
+                        <input type="checkbox" /> STATA 13
+                    </label>
+                    <label>
+                        <input type="checkbox" /> STATGRAPHICS Centurion XVI
+                    </label>
+                </div>
+
+                <button className="button buttonSearch">Guardar cambios</button>
+            </form>
+        </div>
+    )
+}
+
+export default ProgramSelector
\ No newline at end of file
diff --git a/app/Components/Receipt/Receipt.tsx b/app/Components/Receipt/Receipt.tsx
index c90cb5d..3f8d424 100644
--- a/app/Components/Receipt/Receipt.tsx
+++ b/app/Components/Receipt/Receipt.tsx
@@ -1,7 +1,6 @@
 'use client'
 import { useEffect, useState } from "react";
 import "./Receipt.css"
-import Selection from "../Selection/Selection";
 
 function Receipt() {
     const [folio, setFolio] = useState('');
diff --git a/app/InformacionEquipo/informacionequipo.css b/app/InformacionEquipo/informacionequipo.css
index 1c9ae13..5f1ee0e 100644
--- a/app/InformacionEquipo/informacionequipo.css
+++ b/app/InformacionEquipo/informacionequipo.css
@@ -7,11 +7,6 @@
   justify-content: start;
 }
 
-.margin {
-  margin: 10px 0;
-  display: flex;
-  gap: 50px;
-}
 .conteinercuadro {
   display: flex;
   flex-direction: column;
@@ -50,6 +45,7 @@
   grid-template-columns: repeat(3, 240px); /* ancho fijo por columna */
   gap: 6px 20px;
   margin-bottom: 20px;
+  flex-wrap: wrap;
 }
 
 .checkbox-grid label {
@@ -66,21 +62,3 @@
   margin: 0;
   margin-right: 1px; /* espacio mínimo entre el box y el texto */
 }
-input[type="checkbox"] {
-  accent-color: #2563eb;
-}
-
-.btn {
-  display: inline-block;
-  background: #2563eb;
-  color: white;
-  border: none;
-  padding: 8px 16px;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: 0.2s ease;
-}
-
-.btn:hover {
-  background: #1d4ed8;
-}
diff --git a/app/InformacionEquipo/page.tsx b/app/InformacionEquipo/page.tsx
index a5bb630..b2975b4 100644
--- a/app/InformacionEquipo/page.tsx
+++ b/app/InformacionEquipo/page.tsx
@@ -1,3 +1,4 @@
+import ProgramSelector from "../Components/ProgramSelector/ProgramSelector";
 import Toggle from "../Components/Toggle/Toggle";
 import "./informacionequipo.css";
 
@@ -13,13 +14,11 @@ export default function Page() {
             key: "1",
             label: "Equipos",
             content: (
-              <div className="containerInput">
-                <div className="margin">
-                  {" "}
+              <form className="containerForm">
+                <div className="groupInput">
                   <input type="text" />
                   <button className="button buttonSearch">
-                    {" "}
-                    Buscar por ubicación{" "}
+                    Buscar
                   </button>
                 </div>
                 <label className="label">Ubicacion</label>
@@ -53,106 +52,20 @@ export default function Page() {
                   //onChange={(e) => setUser(e.target.value)}
                   placeholder="Coloca "
                 />
-                <div className="margin">
+
+                <div className="containerButton">
                   <button className="button buttonSearch">Nuevo</button>
 
                   <button className="button buttonSearch">Editar</button>
                 </div>
-              </div>
+              </form>
             ),
           },
           {
             key: "2",
             label: "Programa por equipo",
             content: (
-              <div>
-                <div className="form-container">
-                  <label htmlFor="equipo">Ubicación de equipo</label>
-                  <select id="equipo">
-                    <option value="">buscar</option>
-                    <option value="sala1">Equipo 1</option>
-                    <option value="sala2">Equipo 2</option>
-                    <option value="sala3">Equipo 3</option>
-                  </select>
-
-                  <div className="checkbox-grid">
-                    <label>
-                      <input type="checkbox" /> 3D MAX STUDIO 2014
-                    </label>
-                    <label>
-                      <input type="checkbox" /> ADOBE CREATIVE SUITE
-                    </label>
-                    <label>
-                      <input type="checkbox" /> ARCHICAD 20
-                    </label>
-                    <label>
-                      <input type="checkbox" /> AUDACITY - win - 2.0
-                    </label>
-                    <label>
-                      <input type="checkbox" /> AUTOCAD
-                    </label>
-                    <label>
-                      <input type="checkbox" /> CODE-BLOCKS
-                    </label>
-                    <label>
-                      <input type="checkbox" /> COREL DRAW
-                    </label>
-                    <label>
-                      <input type="checkbox" /> DEV-C++
-                    </label>
-                    <label>
-                      <input type="checkbox" /> EVIEWS Enterprise
-                    </label>
-                    <label>
-                      <input type="checkbox" /> Google Earth
-                    </label>
-                    <label>
-                      <input type="checkbox" /> INTERNET
-                    </label>
-                    <label>
-                      <input type="checkbox" /> MAPLE
-                    </label>
-                    <label>
-                      <input type="checkbox" /> MATHEMATICA
-                    </label>
-                    <label>
-                      <input type="checkbox" /> MATLAB
-                    </label>
-                    <label>
-                      <input type="checkbox" /> Maxima
-                    </label>
-                    <label>
-                      <input type="checkbox" /> miktex
-                    </label>
-                    <label>
-                      <input type="checkbox" /> NETBEANS
-                    </label>
-                    <label>
-                      <input type="checkbox" /> OFFICE 2016
-                    </label>
-                    <label>
-                      <input type="checkbox" /> PSeInt
-                    </label>
-                    <label>
-                      <input type="checkbox" /> R 3.0.1
-                    </label>
-                    <label>
-                      <input type="checkbox" /> RStudio
-                    </label>
-                    <label>
-                      <input type="checkbox" /> SPSS Statistics
-                    </label>
-                    <label>
-                      <input type="checkbox" /> STATA 13
-                    </label>
-                    <label>
-                      <input type="checkbox" /> STATGRAPHICS Centurion XVI
-                    </label>
-                  </div>
-
-                  <button className="btn">Guardar cambios</button>
-                </div>
-              </div>
+              <ProgramSelector/>
             ),
           },
           {
@@ -160,7 +73,7 @@ export default function Page() {
             label: "Programa por sala",
             content: (
               <div>
-                <div className="form-container">
+                <form className="form-container">
                   <label htmlFor="salas ">Salas </label>
                   <select id="salas">
                     <option value="">Seleccione una sala</option>
@@ -244,8 +157,8 @@ export default function Page() {
                     </label>
                   </div>
 
-                  <button className="btn">Guardar cambios</button>
-                </div>
+                  <button className="button buttonSearch">Guardar cambios</button>
+                </form>
               </div>
             ),
           },
diff --git a/app/globals.css b/app/globals.css
index 0523725..fefef5a 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -215,7 +215,7 @@ a {
   border-radius: 4px;
   background-color: #f3f4f6;
   width: 100%;
-  max-width: 400px;
+  max-width: 450px;
   margin-top: 10px;
 }
 
@@ -267,6 +267,7 @@ form {
   gap: 10px;
   background-color: #f3f4f6;
   border-radius: 6px;
+  flex-wrap: wrap;
 }
 
 .toggleButton {
@@ -288,13 +289,6 @@ form {
   border-bottom: 1px solid rgb(1, 92, 184);
 }
 
-.center {
-  display: grid;
-  grid-template-columns: auto 400px;
-  justify-content: center;
-  align-items: center;
-}
-
 @media (max-width: 800px) {
   header {
     padding: 6px 16px;