/* INMAG Magazine — estilos del lector compartido premium v2.0 */

/* Botones extra de la barra */
.rbtn.on{background:linear-gradient(120deg,#CAA85A,#B99448);color:#1a1407}
.rbtn.rissue{width:auto;padding:0 14px;font-size:.78rem;letter-spacing:.02em;text-decoration:none;display:inline-flex;align-items:center}
#reader-bar{flex-wrap:wrap;row-gap:8px}

/* Mejora 4 — barra de secciones */
.rsecbar{position:relative;height:34px;margin:18px auto 0;max-width:860px;background:rgba(255,255,255,.08);border-radius:50px;border:1px solid rgba(255,255,255,.12)}
.rsec-fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,rgba(185,148,72,.55),rgba(202,168,90,.85));border-radius:50px;transition:width .45s cubic-bezier(.16,1,.3,1);pointer-events:none}
.rsec-dot{position:absolute;top:50%;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;background:#0D1F3A;border:2px solid rgba(227,200,133,.7);cursor:pointer;padding:0;transition:transform .2s,background .2s;z-index:2}
.rsec-dot:hover{transform:translate(-50%,-50%) scale(1.35)}
.rsec-dot.on{background:#E3C885;border-color:#fff}
.rsec-lbl{position:absolute;top:-30px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:.68rem;font-weight:700;color:#E3C885;background:rgba(4,16,30,.92);padding:3px 10px;border-radius:50px;opacity:0;pointer-events:none;transition:opacity .2s}
.rsec-dot:hover .rsec-lbl,.rsec-dot.on .rsec-lbl{opacity:1}
@media(max-width:700px){.rsec-lbl{display:none}.rsecbar{height:26px}}

/* Mejora 1 — vista continua */
#scroll-view{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:22px;padding:8px 0}
.sv-page{position:relative;border-radius:10px;overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.45);background:#0b1626}
.sv-page img{width:100%;display:block;min-height:220px}
.sv-num{position:absolute;right:10px;bottom:10px;background:rgba(4,16,30,.78);color:#E3C885;font-size:.72rem;font-weight:800;padding:3px 10px;border-radius:50px}

/* Mejora 2 — miniaturas */
#thumbs-ov{position:fixed;inset:0;background:rgba(4,16,30,.94);z-index:1200;display:none;flex-direction:column;backdrop-filter:blur(6px)}
#thumbs-ov.open{display:flex}
.th-head{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;color:#fff;font-weight:800;font-size:1rem;border-bottom:1px solid rgba(255,255,255,.12)}
.th-close{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:.95rem}
.th-grid{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px;padding:18px 22px}
.th-cell{position:relative;border:2px solid transparent;border-radius:8px;overflow:hidden;cursor:pointer;background:#0b1626;padding:0;transition:border-color .18s,transform .18s}
.th-cell:hover{border-color:#B99448;transform:translateY(-3px)}
.th-cell img{width:100%;display:block;aspect-ratio:210/297;object-fit:cover}
.th-cell span{position:absolute;left:6px;bottom:6px;background:rgba(4,16,30,.85);color:#E3C885;font-size:.66rem;font-weight:800;padding:2px 8px;border-radius:50px}

/* Mejora 3 — continuar donde lo dejaste */
.rresume{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:12px;background:rgba(4,16,30,.94);border:1px solid rgba(185,148,72,.5);color:#fff;border-radius:50px;padding:9px 10px 9px 18px;font-size:.86rem;box-shadow:0 14px 38px rgba(0,0,0,.5);transition:opacity .5s}
.rresume.hide{opacity:0;pointer-events:none}
.rresume b{color:#E3C885}
.rr-go{background:linear-gradient(120deg,#CAA85A,#B99448);border:none;color:#1a1407;font-weight:800;font-size:.82rem;border-radius:50px;padding:7px 16px;cursor:pointer}
.rr-x{background:none;border:none;color:rgba(255,255,255,.5);cursor:pointer;font-size:.85rem;padding:4px}

/* Mejora 6 — sala oscura */
body.mag-darkroom{background:#05080f}
body.mag-darkroom .navbar,body.mag-darkroom .topbar,body.mag-darkroom .iss-hero,body.mag-darkroom .sec,body.mag-darkroom footer,body.mag-darkroom .mkt-strip{filter:brightness(.28) saturate(.6);transition:filter .5s}
body.mag-darkroom .reader{background:#05080f}

/* Mejora 8 — CTA suscripción */
.rcta{position:fixed;right:18px;bottom:18px;z-index:1100;width:min(330px,calc(100vw - 36px));background:linear-gradient(150deg,#0D1F3A,#04101E);border:1px solid rgba(185,148,72,.45);border-radius:16px;padding:20px;color:#fff;box-shadow:0 26px 60px rgba(0,0,0,.55);opacity:0;transform:translateY(14px);transition:opacity .45s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1)}
.rcta.show{opacity:1;transform:translateY(0)}
.rcta-x{position:absolute;top:8px;right:10px;background:none;border:none;color:rgba(255,255,255,.5);cursor:pointer;font-size:.85rem}
.rcta-t{font-weight:800;font-size:1.02rem;margin-bottom:4px}
.rcta-p{color:rgba(255,255,255,.68);font-size:.85rem;margin-bottom:12px;line-height:1.5}
.rcta-f{display:flex;gap:8px}
.rcta-f input{flex:1;min-width:0;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:10px 12px;color:#fff;font-family:inherit;font-size:.85rem;outline:none}
.rcta-f input:focus{border-color:#B99448}
.rcta-f button{background:linear-gradient(120deg,#CAA85A,#B99448);border:none;color:#1a1407;font-weight:800;font-size:.82rem;border-radius:10px;padding:10px 14px;cursor:pointer;white-space:nowrap}
@media(prefers-reduced-motion:reduce){.rcta{transition:opacity .2s}}

/* Mejora 9 — fin de número */
#rend{position:absolute;inset:0;z-index:45;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;background:radial-gradient(ellipse at center,rgba(13,31,58,.96),rgba(4,16,30,.98));border-radius:12px;padding:30px;color:#fff}
#rend.show{display:flex}
.re-x{position:absolute;top:12px;right:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;width:34px;height:34px;border-radius:50%;cursor:pointer}
.re-k{font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#E3C885}
.re-t{font-family:var(--font-head,'Playfair Display',serif);font-weight:800;font-size:clamp(1.2rem,2.6vw,1.8rem);max-width:24ch;line-height:1.25}
.re-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}
.re-btn{display:inline-flex;align-items:center;font-weight:800;font-size:.86rem;padding:11px 20px;border-radius:50px;text-decoration:none;transition:transform .25s}
.re-btn:hover{transform:translateY(-2px)}
.re-btn.primary{background:linear-gradient(120deg,#CAA85A,#B99448);color:#1a1407}
.re-btn.ghost{border:1.5px solid rgba(255,255,255,.4);color:#fff}