diff --git a/nodejs-project/nodejs-project/src/client/assets/styles/mobile.css b/nodejs-project/nodejs-project/src/client/assets/styles/mobile.css
index 0a485bc1..b9c6b6b7 100644
--- a/nodejs-project/nodejs-project/src/client/assets/styles/mobile.css
+++ b/nodejs-project/nodejs-project/src/client/assets/styles/mobile.css
@@ -732,6 +732,7 @@ pre, code {
 
 /* ============================================================
    ACTPAGER — paginador móvil CSS-only para activity_view
+   Enfoque: display:none por defecto, una celda visible a la vez
    ============================================================ */
 .actpager {
   display: block !important;
@@ -752,20 +753,16 @@ pre, code {
   gap: 10px !important;
 }
 .actpager-clip {
-  overflow: hidden !important;
   width: 100% !important;
+  overflow: hidden !important;
 }
 .actpager-row {
-  display: flex !important;
-  flex-direction: row !important;
-  flex-wrap: nowrap !important;
+  display: block !important;
   width: 100% !important;
-  transition: transform 0.3s ease !important;
-  transform: translateX(0) !important;
 }
+/* Por defecto todas las celdas ocultas */
 .actpager-cell {
-  flex: 0 0 100% !important;
-  display: flex !important;
+  display: none !important;
   flex-direction: row !important;
   gap: 8px !important;
   width: 100% !important;
@@ -778,13 +775,15 @@ pre, code {
 }
 .actpager-cell .filter-btn {
   width: 100% !important;
-  padding: 12px 10px !important;
-  font-size: 0.9rem !important;
+  padding: 8px 6px !important;
+  min-height: 36px !important;
+  font-size: 0.82rem !important;
   font-weight: 700 !important;
   white-space: nowrap !important;
   overflow: hidden !important;
   text-overflow: ellipsis !important;
-  border-radius: 8px !important;
+  border-radius: 6px !important;
+  line-height: 1.1 !important;
 }
 .actpager-controls {
   display: flex !important;
@@ -793,218 +792,266 @@ pre, code {
   align-items: center !important;
   width: 100% !important;
 }
+/* Por defecto todos los sets de flechas ocultos */
 .actpager-arrows {
   display: none !important;
   flex-direction: row !important;
   align-items: center !important;
   justify-content: center !important;
-  gap: 18px !important;
+  gap: 28px !important;
   width: 100% !important;
 }
 .actpager-arrow {
-  width: 44px !important;
-  height: 44px !important;
+  width: 40px !important;
+  height: 40px !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
-  font-size: 1.7rem !important;
+  font-size: 1.5rem !important;
   font-weight: 700 !important;
   border-radius: 50% !important;
   cursor: pointer !important;
   user-select: none !important;
   line-height: 1 !important;
+  margin: 0 !important;
 }
 .actpager-arrow.disabled {
-  opacity: 0.25 !important;
+  opacity: 0.2 !important;
   cursor: default !important;
   pointer-events: none !important;
 }
-.actpager-counter {
-  font-size: 0.9rem !important;
-  font-weight: 700 !important;
-  min-width: 60px !important;
-  text-align: center !important;
-  letter-spacing: 0.05em !important;
-}
 
-/* Reglas por página: traslación + arrows visibles */
-.actpager-r0:checked ~ .actpager-frame .actpager-row {
-  transform: translateX(-0%) !important;
+/* Reglas por página: muestra solo la celda y las flechas correspondientes */
+.actpager-r0:checked ~ .actpager-frame .actpager-cell:nth-child(1) {
+  display: flex !important;
 }
 .actpager-r0:checked ~ .actpager-frame .actpager-a0 {
   display: flex !important;
 }
-.actpager-r1:checked ~ .actpager-frame .actpager-row {
-  transform: translateX(-100%) !important;
+.actpager-r1:checked ~ .actpager-frame .actpager-cell:nth-child(2) {
+  display: flex !important;
 }
 .actpager-r1:checked ~ .actpager-frame .actpager-a1 {
   display: flex !important;
 }
-.actpager-r2:checked ~ .actpager-frame .actpager-row {
-  transform: translateX(-200%) !important;
+.actpager-r2:checked ~ .actpager-frame .actpager-cell:nth-child(3) {
+  display: flex !important;
 }
 .actpager-r2:checked ~ .actpager-frame .actpager-a2 {
   display: flex !important;
 }
-.actpager-r3:checked ~ .actpager-frame .actpager-row {
-  transform: translateX(-300%) !important;
+.actpager-r3:checked ~ .actpager-frame .actpager-cell:nth-child(4) {
+  display: flex !important;
 }
 .actpager-r3:checked ~ .actpager-frame .actpager-a3 {
   display: flex !important;
 }
-.actpager-r4:checked ~ .actpager-frame .actpager-row {
-  transform: translateX(-400%) !important;
+.actpager-r4:checked ~ .actpager-frame .actpager-cell:nth-child(5) {
+  display: flex !important;
 }
 .actpager-r4:checked ~ .actpager-frame .actpager-a4 {
   display: flex !important;
 }
-.actpager-r5:checked ~ .actpager-frame .actpager-row {
-  transform: translateX(-500%) !important;
+.actpager-r5:checked ~ .actpager-frame .actpager-cell:nth-child(6) {
+  display: flex !important;
 }
 .actpager-r5:checked ~ .actpager-frame .actpager-a5 {
   display: flex !important;
 }
-.actpager-r6:checked ~ .actpager-frame .actpager-row {
-  transform: translateX(-600%) !important;
+.actpager-r6:checked ~ .actpager-frame .actpager-cell:nth-child(7) {
+  display: flex !important;
 }
 .actpager-r6:checked ~ .actpager-frame .actpager-a6 {
   display: flex !important;
 }
-.actpager-r7:checked ~ .actpager-frame .actpager-row {
-  transform: translateX(-700%) !important;
+.actpager-r7:checked ~ .actpager-frame .actpager-cell:nth-child(8) {
+  display: flex !important;
 }
 .actpager-r7:checked ~ .actpager-frame .actpager-a7 {
   display: flex !important;
 }
-.actpager-r8:checked ~ .actpager-frame .actpager-row {
-  transform: translateX(-800%) !important;
+.actpager-r8:checked ~ .actpager-frame .actpager-cell:nth-child(9) {
+  display: flex !important;
 }
 .actpager-r8:checked ~ .actpager-frame .actpager-a8 {
   display: flex !important;
 }
-.actpager-r9:checked ~ .actpager-frame .actpager-row {
-  transform: translateX(-900%) !important;
+.actpager-r9:checked ~ .actpager-frame .actpager-cell:nth-child(10) {
+  display: flex !important;
 }
 .actpager-r9:checked ~ .actpager-frame .actpager-a9 {
   display: flex !important;
 }
-.actpager-r10:checked ~ .actpager-frame .actpager-row {
-  transform: translateX(-1000%) !important;
+.actpager-r10:checked ~ .actpager-frame .actpager-cell:nth-child(11) {
+  display: flex !important;
 }
 .actpager-r10:checked ~ .actpager-frame .actpager-a10 {
   display: flex !important;
 }
-.actpager-r11:checked ~ .actpager-frame .actpager-row {
-  transform: translateX(-1100%) !important;
+.actpager-r11:checked ~ .actpager-frame .actpager-cell:nth-child(12) {
+  display: flex !important;
 }
 .actpager-r11:checked ~ .actpager-frame .actpager-a11 {
   display: flex !important;
 }
-.actpager-r12:checked ~ .actpager-frame .actpager-row {
-  transform: translateX(-1200%) !important;
+.actpager-r12:checked ~ .actpager-frame .actpager-cell:nth-child(13) {
+  display: flex !important;
 }
 .actpager-r12:checked ~ .actpager-frame .actpager-a12 {
   display: flex !important;
 }
-.actpager-r13:checked ~ .actpager-frame .actpager-row {
-  transform: translateX(-1300%) !important;
+.actpager-r13:checked ~ .actpager-frame .actpager-cell:nth-child(14) {
+  display: flex !important;
 }
 .actpager-r13:checked ~ .actpager-frame .actpager-a13 {
   display: flex !important;
 }
-.actpager-r14:checked ~ .actpager-frame .actpager-row {
-  transform: translateX(-1400%) !important;
+.actpager-r14:checked ~ .actpager-frame .actpager-cell:nth-child(15) {
+  display: flex !important;
 }
 .actpager-r14:checked ~ .actpager-frame .actpager-a14 {
   display: flex !important;
 }
-.actpager-r15:checked ~ .actpager-frame .actpager-row {
-  transform: translateX(-1500%) !important;
+.actpager-r15:checked ~ .actpager-frame .actpager-cell:nth-child(16) {
+  display: flex !important;
 }
 .actpager-r15:checked ~ .actpager-frame .actpager-a15 {
   display: flex !important;
 }
-.actpager-r16:checked ~ .actpager-frame .actpager-row {
-  transform: translateX(-1600%) !important;
+.actpager-r16:checked ~ .actpager-frame .actpager-cell:nth-child(17) {
+  display: flex !important;
 }
 .actpager-r16:checked ~ .actpager-frame .actpager-a16 {
   display: flex !important;
 }
-.actpager-r17:checked ~ .actpager-frame .actpager-row {
-  transform: translateX(-1700%) !important;
+.actpager-r17:checked ~ .actpager-frame .actpager-cell:nth-child(18) {
+  display: flex !important;
 }
 .actpager-r17:checked ~ .actpager-frame .actpager-a17 {
   display: flex !important;
 }
-.actpager-r18:checked ~ .actpager-frame .actpager-row {
-  transform: translateX(-1800%) !important;
+.actpager-r18:checked ~ .actpager-frame .actpager-cell:nth-child(19) {
+  display: flex !important;
 }
 .actpager-r18:checked ~ .actpager-frame .actpager-a18 {
   display: flex !important;
 }
-.actpager-r19:checked ~ .actpager-frame .actpager-row {
-  transform: translateX(-1900%) !important;
+.actpager-r19:checked ~ .actpager-frame .actpager-cell:nth-child(20) {
+  display: flex !important;
 }
 .actpager-r19:checked ~ .actpager-frame .actpager-a19 {
   display: flex !important;
 }
-.actpager-r20:checked ~ .actpager-frame .actpager-row {
-  transform: translateX(-2000%) !important;
+.actpager-r20:checked ~ .actpager-frame .actpager-cell:nth-child(21) {
+  display: flex !important;
 }
 .actpager-r20:checked ~ .actpager-frame .actpager-a20 {
   display: flex !important;
 }
-.actpager-r21:checked ~ .actpager-frame .actpager-row {
-  transform: translateX(-2100%) !important;
+.actpager-r21:checked ~ .actpager-frame .actpager-cell:nth-child(22) {
+  display: flex !important;
 }
 .actpager-r21:checked ~ .actpager-frame .actpager-a21 {
   display: flex !important;
 }
-.actpager-r22:checked ~ .actpager-frame .actpager-row {
-  transform: translateX(-2200%) !important;
+.actpager-r22:checked ~ .actpager-frame .actpager-cell:nth-child(23) {
+  display: flex !important;
 }
 .actpager-r22:checked ~ .actpager-frame .actpager-a22 {
   display: flex !important;
 }
-.actpager-r23:checked ~ .actpager-frame .actpager-row {
-  transform: translateX(-2300%) !important;
+.actpager-r23:checked ~ .actpager-frame .actpager-cell:nth-child(24) {
+  display: flex !important;
 }
 .actpager-r23:checked ~ .actpager-frame .actpager-a23 {
   display: flex !important;
 }
-.actpager-r24:checked ~ .actpager-frame .actpager-row {
-  transform: translateX(-2400%) !important;
+.actpager-r24:checked ~ .actpager-frame .actpager-cell:nth-child(25) {
+  display: flex !important;
 }
 .actpager-r24:checked ~ .actpager-frame .actpager-a24 {
   display: flex !important;
 }
-.actpager-r25:checked ~ .actpager-frame .actpager-row {
-  transform: translateX(-2500%) !important;
+.actpager-r25:checked ~ .actpager-frame .actpager-cell:nth-child(26) {
+  display: flex !important;
 }
 .actpager-r25:checked ~ .actpager-frame .actpager-a25 {
   display: flex !important;
 }
-.actpager-r26:checked ~ .actpager-frame .actpager-row {
-  transform: translateX(-2600%) !important;
+.actpager-r26:checked ~ .actpager-frame .actpager-cell:nth-child(27) {
+  display: flex !important;
 }
 .actpager-r26:checked ~ .actpager-frame .actpager-a26 {
   display: flex !important;
 }
-.actpager-r27:checked ~ .actpager-frame .actpager-row {
-  transform: translateX(-2700%) !important;
+.actpager-r27:checked ~ .actpager-frame .actpager-cell:nth-child(28) {
+  display: flex !important;
 }
 .actpager-r27:checked ~ .actpager-frame .actpager-a27 {
   display: flex !important;
 }
-.actpager-r28:checked ~ .actpager-frame .actpager-row {
-  transform: translateX(-2800%) !important;
+.actpager-r28:checked ~ .actpager-frame .actpager-cell:nth-child(29) {
+  display: flex !important;
 }
 .actpager-r28:checked ~ .actpager-frame .actpager-a28 {
   display: flex !important;
 }
-.actpager-r29:checked ~ .actpager-frame .actpager-row {
-  transform: translateX(-2900%) !important;
+.actpager-r29:checked ~ .actpager-frame .actpager-cell:nth-child(30) {
+  display: flex !important;
 }
 .actpager-r29:checked ~ .actpager-frame .actpager-a29 {
   display: flex !important;
 }
+
+/* ============================================================
+   ACTPAGER: ajustes finales — sin bg/border en divs internos,
+   compacto, pegado arriba
+   ============================================================ */
+.actpager,
+.actpager-frame,
+.actpager-clip,
+.actpager-row,
+.actpager-cell,
+.actpager-controls,
+.actpager-arrows {
+  background: transparent !important;
+  border: none !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+.actpager {
+  margin-top: 0 !important;
+}
+
+.actpager-frame {
+  gap: 8px !important;
+  padding: 6px 0 !important;
+}
+
+.actpager-cell {
+  gap: 10px !important;
+}
+
+.actpager-controls {
+  margin-top: 4px !important;
+}
+
+.actpager-arrows {
+  gap: 40px !important;
+}
+
+.actpager-arrow {
+  width: 32px !important;
+  height: 32px !important;
+  font-size: 1.3rem !important;
+  background: transparent !important;
+  border: 1px solid #555 !important;
+}
+
+.actpager-form {
+  background: transparent !important;
+  border: none !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}
diff --git a/nodejs-project/nodejs-project/src/views/activity_view.js b/nodejs-project/nodejs-project/src/views/activity_view.js
index 78b36d85..1539e66b 100644
--- a/nodejs-project/nodejs-project/src/views/activity_view.js
+++ b/nodejs-project/nodejs-project/src/views/activity_view.js
@@ -1721,16 +1721,16 @@ exports.activityView = (actions, filter, userId, q = '') => {
     if (i === 0) attrs.checked = 'checked';
     radios.push(input(attrs));
   }
+  const haxe = require('../server/node_modules/hyperaxe');
   const arrowSets = [];
   for (let i = 0; i < totalPages; i++) {
     const prev = i > 0
-      ? require('../server/node_modules/hyperaxe').label({ for: `actp${i - 1}`, class: 'actpager-arrow' }, '‹')
-      : require('../server/node_modules/hyperaxe').span({ class: 'actpager-arrow disabled' }, '‹');
+      ? haxe.label({ for: `actp${i - 1}`, class: 'actpager-arrow' }, '‹')
+      : haxe.span({ class: 'actpager-arrow disabled' }, '‹');
     const next = i < totalPages - 1
-      ? require('../server/node_modules/hyperaxe').label({ for: `actp${i + 1}`, class: 'actpager-arrow' }, '›')
-      : require('../server/node_modules/hyperaxe').span({ class: 'actpager-arrow disabled' }, '›');
-    const counter = require('../server/node_modules/hyperaxe').span({ class: 'actpager-counter' }, `${i + 1} / ${totalPages}`);
-    arrowSets.push(div({ class: `actpager-arrows actpager-a${i}` }, prev, counter, next));
+      ? haxe.label({ for: `actp${i + 1}`, class: 'actpager-arrow' }, '›')
+      : haxe.span({ class: 'actpager-arrow disabled' }, '›');
+    arrowSets.push(div({ class: `actpager-arrows actpager-a${i}` }, prev, next));
   }
   const mobilePager = section({ class: 'actpager', style: 'display:none' },
     ...radios,