fix(ci): compatibilidad con el runner self-hosted (npm 10 / Node 20)

- vitest 4 traía vite 8 anidado con esbuild 0.28: el lockfile quedaba
  incompleto para npm ci y el npm 10.8.2 del runner fallaba con
  "Missing @esbuild/* from lock file" / EBADPLATFORM. vitest 3 usa el
  vite 5 del proyecto como peer: sin árbol anidado, esbuild solo 0.21.5
- jsdom 30 exige Node >=22.22 (el runner tiene 20.20): bajado a jsdom 26
- tests.yml sobre el runner real (self-hosted, Node del sistema) en vez
  de ubuntu-latest, que no existe como label
- aserciones de max()/calc() tolerantes a la serialización de jsdom 26

tests/component/BannerMovil.spec.jsx

@@ -24,7 +24,15 @@ const matchMediaMock = (esMovil) => (_query) => ({
 
 // En pantallas anchas la tarjeta acompaña a la columna de 720px (mismo borde
 // que el contenido); en estrechas queda a 16px del borde de la ventana.
-const PATRON_ALINEADO_CUERPO = /left:\s*max\(16px,\s*[^;]*100vw[^;]*720px[^;]*16px[^;]*\)/;
+// (la serialización exacta de max()/calc() varía entre versiones de jsdom,
+// así que se comprueba por contenido y no por sintaxis exacta)
+function assertAlineadoAlCuerpo(styleAttr) {
+  const left = (styleAttr.match(/left:\s*([^;]+)/) || [])[1];
+  expect(left, "debe usar left con max()").toMatch(/max\(/);
+  expect(left).toContain("100vw");
+  expect(left).toContain("720px");
+  expect(left).toContain("16px");
+}
 
 function contenedorFijo() {
   const fijos = [...document.querySelectorAll("div")].filter((d) => d.style.position === "fixed");
@@ -53,7 +61,7 @@ describe("BannerMovil (PC y móvil): abajo a la izquierda, alineado al cuerpo",
 
     const contenedor = contenedorFijo();
     expect(contenedor.style.bottom).toBe("0px");
-    expect(contenedor.getAttribute("style")).toMatch(PATRON_ALINEADO_CUERPO);
+    assertAlineadoAlCuerpo(contenedor.getAttribute("style"));
     expect(contenedor.style.right).toBe(""); // nunca a la derecha, ahí vive el FAB
     // en PC la tarjeta es más grande
     const tarjeta = screen.getByRole("button", { name: "Cerrar aviso de instalación" }).parentElement;
@@ -65,7 +73,7 @@ describe("BannerMovil (PC y móvil): abajo a la izquierda, alineado al cuerpo",
     render(<BannerMovil />);
     const contenedor = contenedorFijo();
     // misma fórmula: con vw < 720px el navegador la evalúa a 16px
-    expect(contenedor.getAttribute("style")).toMatch(PATRON_ALINEADO_CUERPO);
+    assertAlineadoAlCuerpo(contenedor.getAttribute("style"));
     expect(contenedor.style.bottom).toBe("0px");
     expect(contenedor.style.right).toBe("");
     const tarjeta = screen.getByRole("button", { name: "Cerrar aviso de instalación" }).parentElement;

tests/component/BotonFlotante.spec.jsx

@@ -59,8 +59,13 @@ describe("BotonFlotante", () => {
     const contenedor = boton.closest("div").parentElement; // button → relativo → fijo
     expect(contenedor.style.position).toBe("fixed");
     expect(contenedor.style.bottom).toBe("0px");
-    // en pantallas anchas acompaña a la columna de 720px; mínimo 16px
-    expect(contenedor.getAttribute("style")).toMatch(/right:\s*max\(16px,\s*[^;]*100vw[^;]*720px[^;]*16px[^;]*\)/);
+    // en pantallas anchas acompaña a la columna de 720px; mínimo 16px.
+    // (la serialización exacta de max()/calc() varía entre versiones de jsdom)
+    const right = (contenedor.getAttribute("style").match(/right:\s*([^;]+)/) || [])[1];
+    expect(right).toMatch(/max\(/);
+    expect(right).toContain("100vw");
+    expect(right).toContain("720px");
+    expect(right).toContain("16px");
     // en PC el FAB mide 64px (en móvil 54)
     expect(boton.style.width).toBe("64px");
     expect(boton.style.height).toBe("64px");

tests/component/BotonProponerArriba.spec.jsx

@@ -30,8 +30,13 @@ describe("BotonProponerArriba (solo PC)", () => {
 
     expect(boton.style.position).toBe("fixed");
     expect(boton.style.top).toBe("20px");
-    // alineado al borde derecho de la columna de 720px; mínimo 16px
-    expect(boton.getAttribute("style")).toMatch(/right:\s*max\(16px,\s*[^;]*100vw[^;]*720px[^;]*16px[^;]*\)/);
+    // alineado al borde derecho de la columna de 720px; mínimo 16px.
+    // (la serialización exacta de max()/calc() varía entre versiones de jsdom)
+    const right = (boton.getAttribute("style").match(/right:\s*([^;]+)/) || [])[1];
+    expect(right).toMatch(/max\(/);
+    expect(right).toContain("100vw");
+    expect(right).toContain("720px");
+    expect(right).toContain("16px");
 
     fireEvent.click(boton);
     expect(onClick).toHaveBeenCalledTimes(1);