/* Barra de progreso por capítulos + botón día/noche debajo (lado izquierdo). */
#valu-rail{position:fixed;left:24px;top:50%;transform:translateY(-50%);z-index:60;width:28px;display:flex;flex-direction:column;align-items:center;gap:20px;pointer-events:none}
#valu-rail .bg-switch-wrap{position:static;top:auto;right:auto;pointer-events:auto}
/* Botón día/noche en vertical: sol arriba, luna abajo */
#valu-rail .bg-slider{width:28px;height:52px}
#valu-rail .bg-slider::after{top:2px;left:2px}
#valu-rail #bg-checkbox:checked + .bg-slider::after{top:26px;left:2px}

#chapters{--d:14px;position:relative;width:28px;height:clamp(230px,40vh,440px)}
#chapters .ch-line{position:absolute;top:0;bottom:0;left:calc(50% - 2px);width:4px;border-radius:4px;background:rgba(255,255,255,.28)}
#chapters .ch-fill{position:absolute;left:0;right:0;top:0;height:calc(var(--d) / 2 + (100% - var(--d)) * var(--c, 0));border-radius:4px;background:#fff}
#chapters .ch-dot{pointer-events:auto;position:absolute;left:calc(50% - var(--d) / 2);top:calc(var(--d) / 2 + (100% - var(--d)) * var(--k, 0));width:var(--d);height:var(--d);margin-top:calc(var(--d) / -2);border-radius:50%;box-sizing:border-box;background:rgba(46,32,84,.55);border:3px solid rgba(255,255,255,.5);transition:background .25s,border-color .25s,box-shadow .25s}
#chapters .ch-dot.on{border-color:#fff}
#chapters .ch-dot.now{background:#fff;border-color:#fff;box-shadow:0 0 0 5px rgba(255,126,174,.55)}
html.bg-night #chapters .ch-dot.now{box-shadow:0 0 0 5px rgba(196,181,253,.5)}
#chapters .ch-dot span{position:absolute;left:28px;top:50%;transform:translateY(-50%) translateX(-6px);white-space:nowrap;padding:6px 14px;border-radius:8px;font-size:.75rem;font-weight:500;letter-spacing:.06em;color:#fff;background:rgba(46,32,84,.82);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);pointer-events:none;opacity:0;transition:opacity .35s ease,transform .35s ease}
/* El nombre aparece un momento al cambiar de sección (.show) y al pasar el ratón */
#chapters .ch-dot.show span,#chapters .ch-dot:hover span,#chapters .ch-dot:focus-visible span{opacity:1;transform:translateY(-50%) translateX(0)}
#chapters .ch-dot:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:768px){
  #valu-rail{left:max(6px,env(safe-area-inset-left));gap:16px}
  #chapters{--d:12px;height:clamp(200px,34vh,360px)}
  #chapters .ch-line{left:calc(50% - 1.5px);width:3px}
  #chapters .ch-dot{border-width:2px}
  #chapters .ch-dot.now,html.bg-night #chapters .ch-dot.now{box-shadow:0 0 0 4px rgba(255,126,174,.55)}
  html.bg-night #chapters .ch-dot.now{box-shadow:0 0 0 4px rgba(196,181,253,.5)}
  #chapters .ch-dot span{left:24px;padding:5px 11px;font-size:.7rem}
}
@media (prefers-reduced-motion:reduce){#chapters .ch-dot,#chapters .ch-dot span{transition:none}}