diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index cc70991..066c112 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -49,7 +49,7 @@
           <button class="icon-btn" title="Test" @click="selfTest"><img class="icon" src="/icons/test.svg" alt="test"></button>
           <a class="icon-btn" title="Descargar" href="/api/requests.csv" target="_blank"><img class="icon" src="/icons/download.svg" alt="descargar"></a>
           <button class="icon-btn" title="Copiar" @click="copyRequests"><img class="icon" src="/icons/copy.svg" alt="copiar"></button>
-          <button class="icon-btn" title="Colapsar" @click="sidebarCollapsed = !sidebarCollapsed">{{ sidebarCollapsed ? 'Expandir' : 'Colapsar' }}</button>
+          <button class="icon-btn collapse-btn" title="Colapsar" @click="sidebarCollapsed = !sidebarCollapsed">{{ sidebarCollapsed ? 'Expandir' : 'Colapsar' }}</button>
         </div>
       </div>
       <div class="scroll">
@@ -75,7 +75,7 @@
             <img class="icon" src="/icons/layout-devices.svg" alt="dispositivos"/> Dispositivos
           </button>
           <button class="icon-btn" title="Filtrar" @click="showUserFilters = true"><img class="icon" src="/icons/filter.svg" alt="filtro"/></button>
-          <button class="icon-btn" title="Colapsar" @click="mainCollapsed = !mainCollapsed">{{ mainCollapsed ? 'Expandir' : 'Colapsar' }}</button>
+          <button class="icon-btn collapse-btn" title="Colapsar" @click="mainCollapsed = !mainCollapsed">{{ mainCollapsed ? 'Expandir' : 'Colapsar' }}</button>
         </div>
       </div>
       <div class="scroll">
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 52bc202..16c97fc 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -96,11 +96,31 @@ a { color: inherit; }
 .card:hover { box-shadow: 0 8px 20px rgba(0,0,0,.12); }
 .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
 
+/* Botones de colapsar: solo visibles en móvil */
+.collapse-btn {
+  display: none;
+}
+
 /* Responsive */
 @media (max-width: 980px) {
-  .shell { grid-template-columns: 1fr; grid-template-areas: 
+  .shell { grid-template-columns: 1fr; grid-template-areas:
     "main"
     "sidebar"; }
+
+  /* Mostrar botones de colapsar solo en móvil */
+  .collapse-btn {
+    display: inline-flex;
+  }
+
+  /* En móvil, desactivar el sistema de grid de 52px para contenedores colapsados */
+  .shell:has(> aside.collapsed) { grid-template-columns: 1fr; }
+  .shell:has(> main.collapsed)  { grid-template-columns: 1fr; }
+
+  /* En móvil, los paneles colapsados solo ocupan el espacio del header */
+  .panel.collapsed {
+    height: auto;
+    min-height: auto;
+  }
 }
 
 /* When a panel is collapsed, hide its scroll and shrink its grid track to show only header */