feat(web): login, sesión, interceptor, guards y layout con menú por permisos

- Login contra POST /api/auth/login; SessionStore en localStorage con el
  timeout deslizante que informa el servidor (sessionTimeoutMinutes).
- Interceptor: Bearer en /api, renueva actividad y, ante 401, cierra la
  sesión y vuelve al login recordando la ruta (solo rutas internas).
- Guards: sesión, invitado y permiso por pantalla (data.path). Corrige que
  inject() no puede usarse tras un await en permissionGuard.
- Layout con barra superior (empresa, usuario, tema, salir) y menú lateral
  filtrado por GET /api/user/menu; plegable y con botón en pantallas angostas.
- Menú único en libs/sap-types (MENU, filterMenu); el backend verifica por
  test que las rutas de permiso de sus recursos existan en él.
- Una ruta por pantalla del menú; las no construidas muestran "no disponible".
- Verificado en Chrome headless contra el backend y SAP reales: redirección
  sin sesión, menú de 20 pantallas, navegación, plegado, tema oscuro y
  persistencia, vista móvil, salir, token inválido y credenciales malas.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

apps/web/src/app/layout/main-layout.css

@@ -0,0 +1,133 @@
+.app {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+.shell {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 6px 12px;
+  background: var(--shell);
+  color: var(--shell-ink);
+  flex: none;
+}
+.brand {
+  color: inherit;
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 14px;
+}
+.brand small {
+  font-weight: 400;
+  margin-left: 8px;
+  color: var(--shell-quiet);
+}
+.sp {
+  flex: 1;
+}
+.user {
+  font-size: 12px;
+  color: var(--shell-quiet);
+}
+.out,
+.burger {
+  background: transparent;
+  color: var(--shell-ink);
+  border: 1px solid var(--shell-quiet);
+  border-radius: 3px;
+  padding: 2px 10px;
+  cursor: pointer;
+}
+.burger {
+  display: none;
+  padding: 2px 8px;
+}
+.out:hover,
+.burger:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+.body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+.side {
+  width: 224px;
+  flex: none;
+  overflow-y: auto;
+  background: var(--panel);
+  border-right: 1px solid var(--line);
+  padding: 6px 0;
+}
+.mod {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: 5px 12px;
+  background: none;
+  border: none;
+  font-weight: 600;
+  cursor: pointer;
+}
+.mod:hover {
+  background: var(--btn-h);
+}
+.caret {
+  display: inline-block;
+  width: 14px;
+  color: var(--quiet);
+}
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+li a {
+  display: block;
+  padding: 4px 12px 4px 28px;
+  color: var(--ink);
+  text-decoration: none;
+}
+li a:hover {
+  background: var(--btn-h);
+}
+li a.active {
+  background: var(--row-sel);
+  border-left: 3px solid var(--focus);
+  padding-left: 25px;
+  font-weight: 600;
+}
+.note {
+  margin: 8px 12px;
+  color: var(--quiet);
+  font-size: 12px;
+}
+.note.err {
+  color: var(--err);
+}
+.content {
+  flex: 1;
+  min-width: 0;
+  overflow: auto;
+  padding: 16px;
+}
+@media (max-width: 900px) {
+  .burger {
+    display: inline-block;
+  }
+  .user {
+    display: none;
+  }
+  .side {
+    display: none;
+    position: absolute;
+    top: 38px;
+    bottom: 0;
+    z-index: 30;
+    box-shadow: var(--shadow-pop);
+  }
+  .side.open {
+    display: block;
+  }
+}