Modo manga: capítulo siguiente a la izquierda y la hoja se curva según por dónde se agarra

- En der→izq, la barra inferior del lector va como la lectura: Cap. sig. a la izquierda y Cap. ant. a la derecha.
- En móvil, la página y la barra de progreso van arriba, y cada botón de capítulo en su extremo.
- Al arrastrar con el dedo por arriba o por abajo, esa parte de la hoja va por delante y el lomo no se mueve;
  por el centro, como siempre. Sin capas nuevas.

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

app/public/app.js

@@ -1407,7 +1407,7 @@ async function viewReader(mangaId, chapterId, startPage) {
       <span id="pnum" class="muted"></span>
       <input type="range" id="slider" min="1" max="${total}" value="${page + 1}">
       <button class="btn small" id="zoomreset" hidden title="Quitar zoom">${icon('zoomOut')}</button>
-      ${next ? `<a class="btn small" href="${readUrl(mangaId, next.id)}">Cap. sig. ${icon('next')}</a>` : ''}
+      ${next ? `<a class="btn small chnext" href="${readUrl(mangaId, next.id)}">Cap. sig. ${icon('next')}</a>` : ''}
     </div>
   </div>`
   const reader = $('.reader', app)
@@ -1542,6 +1542,7 @@ async function viewReader(mangaId, chapterId, startPage) {
   // al terminar solo queda la nueva. Si se pasa otra página antes de acabar, la animación se completa ya.
   let turning = null // { anims, cleanup } (y move/release si sigue al dedo)
   let wantDrag = false
+  let grabY = null // altura de la pantalla por la que el dedo agarró la página
   // Lado por el que se mueve la hoja: el de la página que pasa (más marcado en doble página).
   const turnPan = dir => (settings.dir === 'rtl' ? -1 : 1) * dir * (shown.length === 2 ? 0.3 : 0.12)
   function finishTurn() {
@@ -1609,13 +1610,17 @@ async function viewReader(mangaId, chapterId, startPage) {
       })
     }
     // Devuelve cuánto está levantada la hoja (0 a 1), para la sombra de debajo.
-    function set(g, reverse) {
+    // tiltZ/tiltX: curvatura total de la hoja agarrada por arriba o por abajo. Se reparte entre las tiras, de modo
+    // que junto al lomo apenas se nota y el borde libre se lleva todo: la hoja sigue pegada al libro. Cambia de
+    // signo con la cara visible para que la parte agarrada vaya siempre por delante.
+    function set(g, reverse, tiltZ = 0, tiltX = 0) {
       let prev = 0, lift = 0
       angles(g, reverse).forEach((a, i) => {
         const t = strips[i]
-        t.s.style.transform = `${i ? `translateX(${step}px) ` : ''}rotateY(${(sgn * (a - prev)).toFixed(2)}deg)`
-        prev = a
         const c = Math.cos((a * Math.PI) / 180)
+        const bend = tiltZ || tiltX ? ` rotateZ(${((tiltZ * c) / N).toFixed(3)}deg) rotateX(${((tiltX * c) / N).toFixed(3)}deg)` : ''
+        t.s.style.transform = `${i ? `translateX(${step}px) ` : ''}rotateY(${(sgn * (a - prev)).toFixed(2)}deg)${bend}`
+        prev = a
         // Se oscurece al inclinarse. Con un filtro en la propia cara y no con una capa negra encima: en Safari
         // cada capa se compone aparte y en las uniones entre tiras asomaban líneas.
         t.f.style.filter = `brightness(${(1 - (1 - c) * 0.3).toFixed(3)})`
@@ -1645,8 +1650,11 @@ async function viewReader(mangaId, chapterId, startPage) {
       }
       return (lo + hi) / 2
     }
-    return { el, set, span, solve }
+    // Punto fijo de la curvatura: el borde opuesto al agarrado (no afecta al giro sobre el eje vertical).
+    const pivot = y => strips.forEach(t => { t.s.style.transformOrigin = `${spineLeft ? 'left' : 'right'} ${y}` })
+    return { el, set, span, solve, pivot }
   }
+  const GRAB_TILT_Z = 8, GRAB_TILT_X = 6 // curvatura total, en grados, de la hoja agarrada por arriba o por abajo
   // drag: la página sigue al dedo; devuelve el control (move/release) en vez de animarse sola.
   function turnPage(old, stage, dir, drag = false) {
     // "Delante" es hacia la izquierda en izq→der (la hoja derecha pasa a la izquierda) y al revés en der→izq.
@@ -1728,7 +1736,17 @@ async function viewReader(mangaId, chapterId, startPage) {
       box.append(drop, curl.el)
       extra.push(drop, curl.el)
       ;[g0, g1] = double ? [0, 1] : curl.span(reverse)
-      step = g => { drop.style.opacity = (curl.set(g, reverse) * 0.8).toFixed(3) }
+      // Agarrada por arriba o por abajo (tercio superior o inferior), esa parte va por delante: la hoja se curva
+      // sin separarse del lomo. Sin capas nuevas; es 0 al principio y al final del giro, así que cae exacta.
+      // Por el centro, como siempre.
+      const grabAt = drag && grabY != null ? (grabY - B.top - rect.t) / rect.h : 0.5
+      const grab = grabAt < 1 / 3 ? -1 : grabAt > 2 / 3 ? 1 : 0
+      if (grab) curl.pivot(grab < 0 ? 'bottom' : 'top')
+      step = g => {
+        const k = grab ? grab * Math.sin(Math.PI * Math.min(1, Math.max(0, (g - g0) / (g1 - g0 || 1)))) : 0
+        const lift = curl.set(g, reverse, (spineLeft ? 1 : -1) * (reverse ? -1 : 1) * GRAB_TILT_Z * k, GRAB_TILT_X * k)
+        drop.style.opacity = (lift * 0.8).toFixed(3)
+      }
       dur = double ? 700 : 560
       auto = t => g0 + (g1 - g0) * t
       // El borde libre va donde lo lleva el dedo: de su sitio al lomo (una página) o al otro lado (doble);
@@ -1803,6 +1821,13 @@ async function viewReader(mangaId, chapterId, startPage) {
     if (page > 0) goTo(groupOf(page - 1)[0], false, false, -1)
   }
 
+  // En der → izq, la barra de abajo va como la lectura: el capítulo siguiente a la izquierda.
+  function syncDirUi() {
+    const rtl = isPaged() && settings.dir === 'rtl'
+    slider.dir = rtl ? 'rtl' : 'ltr'
+    $('.rbar.bottom').classList.toggle('rtl', rtl)
+  }
+
   function render() {
     observer?.disconnect()
     const keep = lastShown()
@@ -1811,7 +1836,7 @@ async function viewReader(mangaId, chapterId, startPage) {
     renderModeQuick()
     box.dataset.dir = settings.dir
     // En der → izq la barra de progreso también avanza de derecha a izquierda (en vertical no aplica).
-    slider.dir = isPaged() && settings.dir === 'rtl' ? 'rtl' : 'ltr'
+    syncDirUi()
     $('#dir').hidden = !isPaged()
     if (isPaged()) {
       box.innerHTML = ''
@@ -1933,7 +1958,8 @@ async function viewReader(mangaId, chapterId, startPage) {
           const prev = [...shown]
           finishTurn()
           wantDrag = true
-          try { fwd ? forward() : backward() } finally { wantDrag = false }
+          grabY = tap.y
+          try { fwd ? forward() : backward() } finally { wantDrag = false; grabY = null }
           if (turning?.move) {
             gesture = { type: 'turn', ctl: turning, prev, dir: fwd ? 1 : -1, x0: tap.x, k: dx < 0 ? -1 : 1, d: Math.abs(dx), v: 0, t: e.timeStamp }
             turning.move(gesture.d / turning.range)
@@ -2020,7 +2046,7 @@ async function viewReader(mangaId, chapterId, startPage) {
     render()
   })
   $('#fit').addEventListener('change', e => { settings.fit = e.target.value; savePrefs(); render() })
-  $('#dir').addEventListener('change', e => { settings.dir = e.target.value; box.dataset.dir = settings.dir; slider.dir = settings.dir; savePrefs() })
+  $('#dir').addEventListener('change', e => { settings.dir = e.target.value; box.dataset.dir = settings.dir; syncDirUi(); savePrefs() })
   $('#filter').addEventListener('change', e => { settings.filter = e.target.value; saveGlobal(); applyFilter() })
   $('#anim').value = settings.anim
   $('#anim').addEventListener('change', e => { settings.anim = e.target.value; saveGlobal() })

app/public/style.css

@@ -98,6 +98,16 @@ input:focus, select:focus { border-color: var(--accent); }
   background: rgba(10, 9, 14, .9); backdrop-filter: blur(6px); transition: transform .2s; flex-wrap: wrap; }
 .rbar.top { top: 0; padding-top: max(8px, env(safe-area-inset-top)); }
 .rbar.bottom { bottom: 0; justify-content: center; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
+.rbar.bottom.rtl, .rbar.bottom.rtl a.btn { flex-direction: row-reverse; }
+/* Móvil: arriba la página y la barra de progreso; abajo cada botón en su extremo. */
+@media (max-width: 640px) {
+  .rbar.bottom { justify-content: space-between; }
+  .rbar.bottom #pnum { order: -2; }
+  .rbar.bottom input[type=range] { order: -1; flex: 1 1 calc(100% - 80px); max-width: none; }
+  .rbar.bottom .chnext { margin-left: auto; }
+  .rbar.bottom.rtl .chnext { margin-left: 0; margin-right: auto; }
+}
+.rbar.bottom.rtl a.btn .ic, .paged[data-dir="rtl"] .chapter-end a.primary .ic { transform: scaleX(-1); }
 .reader.hide-ui .rbar.top { transform: translateY(-110%); }
 .reader.hide-ui .rbar.bottom { transform: translateY(110%); }
 .rbar .ttl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .9rem; }