/* LEITOR DE PÁGINAS (fase 3) · tudo com prefixo .pag */
.pag{--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--bgp:#0b0518;
  position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;padding:0;
  background:radial-gradient(120% 70% at 50% 0%,#1d0d3a 0%,var(--bgp) 60%);color:var(--ink);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:none;animation:none}
.pag button{font-family:'Poppins',sans-serif;-webkit-tap-highlight-color:transparent}
.pag :focus-visible,.pag-sh :focus-visible{outline:2.5px solid var(--gold2);outline-offset:2px;border-radius:12px}

/* barras */
.pag-top,.pag-bot{position:relative;z-index:3;display:flex;align-items:center;gap:var(--s2);flex:none;
  background:rgba(14,6,30,.94);transition:opacity .2s ease,transform .2s ease}
.pag-top{padding:calc(var(--s2) + env(safe-area-inset-top,0px)) var(--s2) var(--s2);border-bottom:1px solid rgba(168,130,255,.14)}
.pag-bot{padding:var(--s2) var(--s2) calc(var(--s2) + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(168,130,255,.14)}
.pag-ib{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:12px;border:1px solid var(--glassb);
  background:var(--glass);color:var(--ink);cursor:pointer;padding:0}
.pag-ib:active{transform:scale(.94)}
.pag-ib:disabled{opacity:.35;cursor:default}
.pag-ib[hidden]{display:none}
.pag-tt{flex:1;min-width:0;padding:0 var(--s1)}
.pag-t{font-family:'Cinzel',serif;font-weight:700;font-size:13.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pag-sec{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.pag-nav{color:var(--gold2)}
.pag-mid{flex:1;min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:2px}
.pag-cnt{text-align:center;font-size:12.5px;font-weight:600;color:var(--gold2);font-variant-numeric:tabular-nums;letter-spacing:.04em}

/* barra de progresso / arraste */
.pag-rg{--pct:0%;-webkit-appearance:none;appearance:none;width:100%;height:28px;margin:0;background:transparent;cursor:pointer;touch-action:pan-x}
.pag-rg::-webkit-slider-runnable-track{height:5px;border-radius:9px;background:linear-gradient(90deg,var(--gold) var(--pct),rgba(255,255,255,.14) var(--pct))}
.pag-rg::-moz-range-track{height:5px;border-radius:9px;background:linear-gradient(90deg,var(--gold) var(--pct),rgba(255,255,255,.14) var(--pct))}
.pag-rg::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-7.5px;border-radius:50%;background:var(--gold2);border:3px solid #2a1450;box-shadow:0 0 0 1px var(--gold)}
.pag-rg::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--gold2);border:3px solid #2a1450}

/* palco */
.pag-stage{position:relative;z-index:1;flex:1;min-height:0;overflow:hidden;touch-action:none;cursor:grab}
.pag.zoom .pag-stage{cursor:move}
.pag-track{position:absolute;inset:0;will-change:transform}
.pag-track.anim{transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.pag-sl{position:absolute;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.pag-pg{position:relative;flex:none;background:#140c30;border-radius:2px;box-shadow:0 10px 30px rgba(0,0,0,.55);transform-origin:50% 50%;overflow:hidden}
.pag-pg.anim{transition:transform .24s cubic-bezier(.2,.8,.2,1)}
.pag-pg.ok{background:#140c30}
.pag-img{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .18s ease;pointer-events:none}
/* o render tem 2 px claros na borda direita: a imagem passa 0,2% da caixa e o excesso fica escondido */
.pag-img{width:100.2%;max-width:none}
.pag-pg.ok .pag-img{opacity:1}
.pag-pg.err .pag-img{display:none}
.pag-ld{position:absolute;inset:0;display:grid;place-items:center}
.pag-pg.ok .pag-ld,.pag-pg.err .pag-ld{display:none}
.pag-spin{width:28px;height:28px;border-radius:50%;border:3px solid rgba(245,197,66,.22);border-top-color:var(--gold);animation:pagspin .8s linear infinite}
@keyframes pagspin{to{transform:rotate(360deg)}}
.pag-err,.pag-msg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);padding:var(--s5);text-align:center}
.pag-err p,.pag-msg p{font-size:14px;color:var(--muted);max-width:280px}
.pag-msg{z-index:2}
.pag-msg[hidden]{display:none}
.pag-btn{min-height:44px;padding:0 var(--s5);border-radius:999px;border:1px solid var(--gold);background:var(--accsoft);color:var(--gold2);font:600 14px 'Poppins';cursor:pointer}

/* dica de primeiro uso */
.pag-dica{position:absolute;left:50%;bottom:var(--s4);transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;gap:2px;
  padding:var(--s2) var(--s4);border-radius:14px;background:rgba(14,6,30,.88);border:1px solid var(--glassb);
  font-size:12.5px;color:var(--ink);text-align:center;white-space:nowrap;pointer-events:none;transition:opacity .5s}
.pag-dica.sai{opacity:0}

/* imersivo: só a página; um toque mostra/esconde as barras por cima */
.pag.imm{background:#000}
.pag.imm .pag-top,.pag.imm .pag-bot{position:absolute;left:0;right:0;opacity:0;pointer-events:none}
.pag.imm .pag-top{top:0;transform:translateY(-8px)}
.pag.imm .pag-bot{bottom:0;transform:translateY(8px)}
.pag.imm.ui .pag-top,.pag.imm.ui .pag-bot{opacity:1;pointer-events:auto;transform:none}
.pag.imm .pag-pg{border-radius:0;box-shadow:none}

/* travado */
.pag-lock{text-align:center;padding:var(--s5) var(--s3) 40px;display:flex;flex-direction:column;align-items:center;gap:var(--s3)}
.pag-lock-ic{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:var(--accsoft);color:var(--gold2);border:1px solid var(--acc);margin-top:var(--s4)}
.pag-lock-ic svg{width:32px;height:32px}
.pag-lock h2{font-family:'Cinzel',serif;font-size:20px;line-height:1.3;text-wrap:balance}
.pag-lock p{color:var(--muted);font-size:14px;line-height:1.55;max-width:320px}
.pag-lock .btn{max-width:320px;margin-top:var(--s2)}

/* folha (índice e busca) */
.pag-sh{--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;-webkit-user-select:none;user-select:none}
.pag-sh input:focus-visible{outline:none}
.pag-sh-t{font-family:'Cinzel',serif;font-weight:700;font-size:17px;line-height:1.3;text-wrap:balance}
.pag-sh-s{font-size:12.5px;color:var(--muted);margin-top:4px}
.pag-sh-acts{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.pag-sh-acts>span{display:contents}
.pag-chip{position:relative;overflow:hidden;min-height:44px;display:inline-flex;align-items:center;gap:var(--s2);padding:0 var(--s4);border-radius:999px;
  border:1px solid var(--glassb);background:var(--glass);color:var(--ink);font:600 13.5px 'Poppins';cursor:pointer}
.pag-chip svg{width:18px;height:18px;flex:none;color:var(--gold2)}
.pag-chip[data-off]{border-color:var(--acc);background:var(--accsoft);color:var(--gold2)}
.pag-dl i{position:absolute;left:0;bottom:0;height:3px;width:var(--pct,0%);background:var(--gold);transition:width .2s}
.pag-okc{border-color:rgba(58,209,122,.5);color:#b8f5d0}
.pag-okc svg{color:var(--ok)}
.pag-h3{font-family:'Cinzel',serif;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);margin:var(--s5) 0 var(--s2)}
.pag-ind{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.pag-ix{width:100%;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s2) var(--s3);border-radius:12px;
  border:0;background:transparent;color:var(--ink);font:500 14px/1.35 'Poppins';text-align:left;cursor:pointer}
.pag-ix:active,.pag-ix.on{background:rgba(245,197,66,.1)}
.pag-ix.on span{color:var(--gold2)}
.pag-ix small{flex:none;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.pag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:var(--s3)}
.pag-th{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;border:0;background:transparent;color:var(--muted);cursor:pointer;font:600 12px 'Poppins'}
.pag-th-im{display:block;width:100%;overflow:hidden;border-radius:6px;background:#2a1a4a;border:2px solid transparent;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.pag-th-im img{display:block;width:100%;height:100%;object-fit:cover}
.pag-th.on .pag-th-im{border-color:var(--gold)}
.pag-th.on{color:var(--gold2)}

.pag-q{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s3);padding:0 var(--s3);min-height:48px;border-radius:14px;border:1.5px solid var(--cardb);background:rgba(12,4,32,.6)}
.pag-q:focus-within{border-color:var(--gold)}
.pag-q svg{width:20px;height:20px;color:var(--muted);flex:none}
.pag-q input{flex:1;min-width:0;height:46px;border:0;outline:0;background:transparent;color:var(--ink);font:400 16px 'Poppins'}
.pag-q input::placeholder{color:#8a78b0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pag-res{margin-top:var(--s3);display:flex;flex-direction:column;gap:var(--s2);min-height:120px}
.pag-res-m{display:flex;align-items:center;gap:var(--s2);font-size:13px;color:var(--muted);padding:var(--s1) 2px}
.pag-res-m .pag-spin{width:18px;height:18px;border-width:2px}
.pag-r{display:flex;flex-direction:column;gap:4px;width:100%;padding:var(--s3);border-radius:14px;border:1px solid var(--glassb);background:var(--glass);
  color:var(--ink);text-align:left;cursor:pointer;font-family:'Poppins',sans-serif}
.pag-r:active{border-color:var(--acc)}
.pag-r-p{font-size:12px;font-weight:700;color:var(--gold2);letter-spacing:.03em}
.pag-r-t{font-size:13.5px;line-height:1.5;color:#e2d8f5}
.pag-r mark{background:rgba(245,197,66,.28);color:var(--gold2);border-radius:3px;padding:0 2px}

@media (prefers-reduced-motion: reduce){
  .pag-track.anim,.pag-pg.anim{transition:none}
}