new style to grid and to global

app/(private)/Impresiones/page.tsx

@@ -47,7 +47,7 @@ export default async function Page(props: {
             Carrera={student.carrera.carrera}
             Credito={student.credito}
           />
-
+          <div style={{height:"10px"}}> </div>
           <Toggle
             defaultView={key}
             options={[

app/(private)/InformacionEquipo/informacionequipo.css

@@ -48,7 +48,7 @@
 .checkbox-grid {
   display: grid;
   grid-template-columns: repeat(3, 240px);
-  grid-template-rows: repeat(14, auto);
+  grid-template-rows: repeat(13, auto);
   gap: 10px 20px;
   flex-wrap: wrap;
   justify-content: start;

app/globals.css

@@ -402,12 +402,14 @@ form {
 
 .toggleSection {
   width: 100%;
-  max-width: 750px;
+  max-width: fit-content;
+  min-width: 750px;
   border-radius: 4px;
   background-color: #fff;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   height: fit-content;
   overflow: hidden;
+  scrollbar-width: none;
 }
 
 .toggleGroup {
@@ -686,11 +688,10 @@ table td:last-child {
   }
 
   .toggleButton {
-    padding: 0;
+    padding: 0.5rem;
   }
 
   .toggleSection {
-    margin-top: 2rem;
     overflow: auto;
   }
 
@@ -702,6 +703,12 @@ table td:last-child {
   }
 }
 
+@media(max-width:785px) {
+  .toggleSection {
+    min-width: 250px;
+  }
+}
+
 @media (max-width: 700px) {
   .title {
     max-width: 250px;
@@ -710,4 +717,9 @@ table td:last-child {
     min-height: 50px;
     align-items: center;
   }
+
+  .toggleButton {
+    min-height: 35px;
+    padding: 0;
+  }
 }