Improve responsive UX/UI consistency across all frontend screens.

This polish pass unifies mobile navigation, spacing, typography hierarchy, and CTA behavior so all core exam workflows remain clear and fully usable on both mobile and desktop.

frontend/src/components/layout/Navbar.jsx

@@ -10,37 +10,60 @@ export default function Navbar() {
   const { user, logout } = useAuth();
   const navigate = useNavigate();
   const [confirmOut, setConfirmOut] = useState(false);
+  const [mobileOpen, setMobileOpen] = useState(false);
 
   const doLogout = () => {
     logout();
     navigate("/login");
   };
 
+  const closeMobileMenu = () => setMobileOpen(false);
+
   return (
     <header className="navbar">
       <div className="navbar-inner">
-        <Link to="/" className="brand">
+        <Link to="/" className="brand" onClick={closeMobileMenu}>
           <span className="brand-logo">
             <Icon name="document" size={18} />
           </span>
-          GenExámenes IA
+          <span className="brand-text">GenExámenes IA</span>
         </Link>
-        <nav className="nav-links">
-          <NavLink to="/" end className="nav-link">
-            Mis exámenes
-          </NavLink>
-          <NavLink to="/plantillas/nueva" className="nav-link">
-            Crear examen
-          </NavLink>
-        </nav>
-        <span className="nav-spacer" />
-        <div className="nav-user">
-          <div className="avatar" title={user?.email}>
-            {initials(user?.full_name || user?.email)}
+
+        <Button
+          variant="ghost"
+          size="sm"
+          className="nav-mobile-toggle"
+          aria-label={mobileOpen ? "Cerrar menú" : "Abrir menú"}
+          onClick={() => setMobileOpen((open) => !open)}
+        >
+          <Icon name={mobileOpen ? "close" : "listChecks"} size={18} />
+        </Button>
+
+        <div className={`nav-collapse ${mobileOpen ? "open" : ""}`}>
+          <nav className="nav-links">
+            <NavLink to="/" end className="nav-link" onClick={closeMobileMenu}>
+              Mis exámenes
+            </NavLink>
+            <NavLink to="/plantillas/nueva" className="nav-link" onClick={closeMobileMenu}>
+              Crear examen
+            </NavLink>
+          </nav>
+          <span className="nav-spacer" />
+          <div className="nav-user">
+            <div className="avatar" title={user?.email}>
+              {initials(user?.full_name || user?.email)}
+            </div>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => {
+                closeMobileMenu();
+                setConfirmOut(true);
+              }}
+            >
+              Salir
+            </Button>
           </div>
-          <Button variant="ghost" size="sm" onClick={() => setConfirmOut(true)}>
-            Salir
-          </Button>
         </div>
       </div>