docs: promote /web from develop for backup-restore, Log2RAM and Network Flow guides

Brings 69 files from develop under /web/:
- Full Backup & Restore section (11 pages EN + ES: overview, how-it-works, destinations,
  creating backups, scheduled jobs, restoring, cross-kernel hydration)
- Log2RAM dedicated block in post-install/optional with commands + upstream link
- Network Flow diagram documented on monitor/dashboard/network
- Rewritten category descriptions in post-install/customizable
- Fixed automated.json thresholds + link to Log2RAM section
- Updated screenshots (network-flow-overview, storage-top-row, vms modals)

No code, config or AppImage binaries touched — /web/ scope only. Merging deploys
the documentation site to the current beta release notes.

web/app/[locale]/docs/monitor/dashboard/network/page.tsx

@@ -34,6 +34,7 @@ export default async function NetworkTabPage({
   const messages = (await getMessages({ locale })) as unknown as {
     docs: { monitor: { dashboard: { network: {
       topRow: { rows: TopRow[] }
+      flow: { elements: string[]; pulses: string[] }
       groups: { badges: string[] }
       drillIn: { rows: DrillRow[] }
       latency: {
@@ -48,6 +49,8 @@ export default async function NetworkTabPage({
   }
   const net = messages.docs.monitor.dashboard.network
   const topRows = net.topRow.rows
+  const flowElements = net.flow.elements
+  const flowPulses = net.flow.pulses
   const badges = net.groups.badges
   const drillRows = net.drillIn.rows
   const targets = net.latency.targets
@@ -96,6 +99,42 @@ export default async function NetworkTabPage({
         </table>
       </div>
 
+      <h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("flow.heading")}</h2>
+      <p className="mb-4 text-gray-800 leading-relaxed">
+        {t.rich("flow.intro", { strong })}
+      </p>
+
+      <figure className="my-4">
+        <img
+          src="/monitor/network-flow-overview.png"
+          alt={t("flow.imageAlt")}
+          className="rounded-lg border border-gray-200 shadow-sm w-full"
+        />
+        <figcaption className="text-sm text-gray-500 mt-2 text-center italic">
+          {t("flow.imageCaption")}
+        </figcaption>
+      </figure>
+
+      <h3 className="text-lg font-semibold mt-6 mb-2 text-gray-900">{t("flow.elementsTitle")}</h3>
+      <p className="mb-2 text-gray-800 leading-relaxed">{t("flow.elementsIntro")}</p>
+      <ul className="list-disc pl-6 mb-6 text-gray-800 leading-relaxed space-y-1">
+        {flowElements.map((_, idx) => (
+          <li key={idx}>{t.rich(`flow.elements.${idx}`, { strong })}</li>
+        ))}
+      </ul>
+
+      <h3 className="text-lg font-semibold mt-6 mb-2 text-gray-900">{t("flow.pulsesTitle")}</h3>
+      <p className="mb-2 text-gray-800 leading-relaxed">{t("flow.pulsesBody")}</p>
+      <ul className="list-disc pl-6 mb-6 text-gray-800 leading-relaxed space-y-1">
+        {flowPulses.map((_, idx) => (
+          <li key={idx}>{t.rich(`flow.pulses.${idx}`, { strong, em })}</li>
+        ))}
+      </ul>
+
+      <Callout variant="tip" title={t("flow.useTitle")}>
+        {t.rich("flow.useBody", { em })}
+      </Callout>
+
       <h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("groups.heading")}</h2>
       <p className="mb-4 text-gray-800 leading-relaxed">
         {t.rich("groups.intro", { strong })}

web/app/[locale]/docs/monitor/dashboard/system-overview/page.tsx

@@ -31,6 +31,7 @@ export default async function SystemOverviewTabPage({
   const messages = (await getMessages({ locale })) as unknown as {
     docs: { monitor: { dashboard: { systemOverview: {
       topRow: { rows: TopRow[]; thresholdsItems: string[] }
+      processes: { listItems: string[]; detailItems: string[] }
       bottom: { storageItems: string[] }
       refresh: { items: string[] }
       dataCollected: { rows: DataRow[] }
@@ -40,6 +41,8 @@ export default async function SystemOverviewTabPage({
   const so = messages.docs.monitor.dashboard.systemOverview
   const topRows = so.topRow.rows
   const thresholdsItems = so.topRow.thresholdsItems
+  const processListItems = so.processes.listItems
+  const processDetailItems = so.processes.detailItems
   const storageItems = so.bottom.storageItems
   const refreshItems = so.refresh.items
   const dataRows = so.dataCollected.rows
@@ -135,6 +138,53 @@ export default async function SystemOverviewTabPage({
         {t("topRow.sparklineBody")}
       </Callout>
 
+      <h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("processes.heading")}</h2>
+      <p className="mb-4 text-gray-800 leading-relaxed">
+        {t.rich("processes.intro", { code })}
+      </p>
+
+      <h3 className="text-lg font-semibold mt-6 mb-2 text-gray-900">{t("processes.listTitle")}</h3>
+      <ul className="list-disc pl-6 mb-4 text-gray-800 leading-relaxed space-y-1">
+        {processListItems.map((_, idx) => (
+          <li key={idx}>{t.rich(`processes.listItems.${idx}`, { strong })}</li>
+        ))}
+      </ul>
+
+      <figure className="my-6">
+        <img
+          src="/monitor/system-overview-top-processes.png"
+          alt={t("processes.captureListAlt")}
+          className="rounded-lg border border-gray-200 shadow-sm w-full"
+        />
+        <figcaption className="text-sm text-gray-500 mt-2 text-center italic">
+          {t("processes.captureListCaption")}
+        </figcaption>
+      </figure>
+
+      <h3 className="text-lg font-semibold mt-6 mb-2 text-gray-900">{t("processes.detailTitle")}</h3>
+      <p className="mb-4 text-gray-800 leading-relaxed">
+        {t.rich("processes.detailIntro", { code })}
+      </p>
+      <ul className="list-disc pl-6 mb-4 text-gray-800 leading-relaxed space-y-1">
+        {processDetailItems.map((_, idx) => (
+          <li key={idx}>{t.rich(`processes.detailItems.${idx}`, { strong, code })}</li>
+        ))}
+      </ul>
+      <p className="mb-4 text-gray-800 leading-relaxed">
+        {t.rich("processes.detailRefresh", { em, code })}
+      </p>
+
+      <figure className="my-6">
+        <img
+          src="/monitor/system-overview-process-detail.png"
+          alt={t("processes.captureDetailAlt")}
+          className="rounded-lg border border-gray-200 shadow-sm w-full"
+        />
+        <figcaption className="text-sm text-gray-500 mt-2 text-center italic">
+          {t("processes.captureDetailCaption")}
+        </figcaption>
+      </figure>
+
       <h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">{t("middle.heading")}</h2>
       <p className="mb-4 text-gray-800 leading-relaxed">
         {t.rich("middle.body1", { code, em })}