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/features/login/login.page.css

@@ -0,0 +1,93 @@
+.login {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  min-height: 100vh;
+  background: var(--win);
+}
+.brand-panel {
+  background: var(--shell);
+  color: var(--shell-ink);
+  padding: 24px 32px;
+}
+.brand {
+  font-weight: 600;
+  font-size: 16px;
+}
+.brand small {
+  display: block;
+  margin-top: 2px;
+  font-weight: 400;
+  font-size: 12px;
+  color: var(--shell-quiet);
+}
+.form-panel {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+}
+.box {
+  width: 100%;
+  max-width: 320px;
+  display: grid;
+  gap: 6px;
+}
+h1 {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 400;
+}
+.sub {
+  margin: 0 0 12px;
+  color: var(--quiet);
+  font-size: 12px;
+}
+label {
+  margin-top: 6px;
+  font-size: 12px;
+  color: var(--quiet);
+}
+.in {
+  height: 30px;
+  width: 100%;
+  padding: 2px 8px;
+  border: 1px solid var(--field-b);
+  border-radius: 2px;
+  background: var(--field);
+}
+.in:focus {
+  border-color: var(--focus);
+  outline: none;
+  box-shadow: 0 0 0 1px var(--focus);
+}
+.btn {
+  margin-top: 14px;
+  height: 32px;
+  border: 1px solid var(--btn-b);
+  border-radius: 3px;
+  background: var(--btn);
+  cursor: pointer;
+}
+.btn.main {
+  border-color: var(--focus);
+  background: var(--focus);
+  color: #fff;
+  font-weight: 600;
+}
+.btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.error {
+  padding: 8px 10px;
+  border: 1px solid var(--err);
+  background: var(--err-bg);
+  color: var(--err);
+  font-size: 12px;
+}
+@media (max-width: 800px) {
+  .login {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr;
+  }
+}