search by room

app/(private)/InformacionEquipo/informacionequipo.css

@@ -12,11 +12,15 @@
   flex-direction: column;
   align-items: start;
 }
+
+.form-container {
+  gap: 10px;
+}
+
 .form-container label {
   font-size: 14px;
-  margin-right: 10px; /* espacio entre "Salas" y la caja */
-  display: inline-block; /* lo hace estar en la misma línea */
-  vertical-align: middle; /* alinea verticalmente con el select */
+  display: inline-block;
+  vertical-align: middle;
 }
 
 .form-container select {
@@ -25,8 +29,9 @@
   border: 1px solid #ccc;
   border-radius: 6px;
   outline: none;
-  vertical-align: middle; /* asegura alineación */
+  vertical-align: middle;
   transition: all 0.2s ease-in-out;
+  margin-bottom: 1rem;
 }
 
 .form-container select:hover {
@@ -43,9 +48,9 @@
 .checkbox-grid {
   display: grid;
   grid-template-columns: repeat(3, 240px); /* ancho fijo por columna */
-  gap: 6px 20px;
+  gap: 10px 20px;
   flex-wrap: wrap;
-  margin-right: 2px;
+  justify-content: start;
 }
 
 .checkbox-grid label {
@@ -54,6 +59,7 @@
   font-size: 13px;
   cursor: pointer;
   white-space: nowrap;
+  width: fit-content;
 }
 
 .checkbox-grid input[type="checkbox"] {

app/Components/InformacionEquipos/ProgramSelector.tsx

@@ -90,7 +90,7 @@ export default function ProgramSelector({
         }
 
         if (id) {
-          res = await axios.get(`${envConfig.apiUrl}/programa-area/${id}`);
+          res = await axios.get(`${envConfig.apiUrl}/area-ubicacion/programs/${id}`);
         }
 
         res?.data.forEach((item: any) => {

app/Components/InformacionEquipos/SelectorEquipo.tsx

@@ -50,6 +50,7 @@ export default function SelectorEquipo({ onSearch }: Props) {
 
   return (
     <form className="form-container">
+      <label>Ubicacion de equipo</label>
       <select value={selected} onChange={handleChangeEquipo}>
         <option value="">-- Selecciona una equipo --</option>
         {sala &&

app/Components/InformacionEquipos/SelectorSala.tsx

@@ -44,6 +44,7 @@ export default function SelectorSala({ onSearch }: Props) {
 
   return (
     <form className="form-container" onSubmit={handleSubmit}>
+      <label>Salas</label>
       <select value={selected} onChange={handleChangeEquipo}>
         <option value="">-- Selecciona una sala --</option>
         {sala &&

app/globals.css

@@ -585,7 +585,6 @@ table td:last-child {
   align-items: center;
   font-size: 13px;
   cursor: pointer;
-  margin-right: 1rem;
 }
 
 .checkbox-grid input[type="checkbox"] {