Planificacion y flashcard

src/main/resources/static/css/style.css

@@ -931,8 +931,37 @@ a:hover { text-decoration: underline; }
    RESPONSIVE
    ============================================================ */
 @media (max-width: 768px) {
+  /* La topbar dobla a 2 filas en móvil → aumentar la variable de offset */
+  :root { --topbar-h: 86px; }
+
   .menu-toggle { display: block; }
 
+  /* Topbar: wrap para 2 filas (iconos/usuario arriba, nav abajo) */
+  .topbar {
+    height: auto;
+    flex-wrap: wrap;
+    padding: .35rem .8rem .2rem;
+    row-gap: 0;
+  }
+
+  .menu-toggle  { order: 0; }
+  .topbar-brand { order: 1; }
+  .topbar-user  { order: 2; margin-left: auto; }
+  .topbar-progress { display: none; }   /* evita que ocupe espacio en móvil */
+
+  /* Segunda fila: links desplazables horizontalmente */
+  .topbar-nav {
+    order: 10;
+    width: 100%;
+    margin-left: 0;
+    overflow-x: auto;
+    scrollbar-width: none;          /* Firefox */
+    padding: .15rem 0 .3rem;
+    gap: .15rem;
+  }
+  .topbar-nav::-webkit-scrollbar { display: none; }
+  .topbar-nav a { white-space: nowrap; font-size: .8rem; padding: .28rem .65rem; }
+
   .sidebar {
     transform: translateX(-100%);
     width: min(var(--sidebar-w), 85vw);