/* ═══════════════════════════════════════════════════════════════
   css/lector.css — Modo lectura avanzado
   Acompana a js/lector.js. Solo se carga en ver.php.
   ═══════════════════════════════════════════════════════════════ */

/* ── Barra de progreso ───────────────────────────────────────── */
.lectura-progreso{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;
  background:transparent;pointer-events:none;}
.lectura-progreso i{display:block;height:100%;width:0;
  background:linear-gradient(90deg,#e60012,#ff9f1c);
  box-shadow:0 0 10px rgba(255,159,28,.55);transition:width .1s linear;}

/* ── Indicador flotante ──────────────────────────────────────── */
.lectura-hud{position:fixed;right:16px;bottom:78px;z-index:150;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  background:rgba(6,14,28,.9);backdrop-filter:blur(9px);
  border:1px solid rgba(42,74,122,.85);border-radius:11px;padding:8px 12px;
  font-size:.7rem;color:#7a9cc4;opacity:0;transform:translateY(8px);
  transition:opacity .25s,transform .25s;pointer-events:none;}
.lectura-hud.visible{opacity:1;transform:none;}
.lectura-hud .hud-pct{color:#ff9f1c;font-weight:700;font-size:.78rem;}

/* ── Aviso de "continuar donde lo dejaste" ───────────────────── */
.lectura-reanudar{position:fixed;left:50%;bottom:22px;transform:translate(-50%,18px);
  z-index:190;display:flex;align-items:center;gap:11px;
  background:rgba(6,14,28,.96);backdrop-filter:blur(12px);
  border:1px solid rgba(255,159,28,.4);border-radius:13px;padding:11px 14px;
  font-size:.81rem;color:#d6e4ff;box-shadow:0 12px 34px rgba(0,0,0,.5);
  opacity:0;transition:opacity .3s,transform .3s;max-width:calc(100vw - 28px);}
.lectura-reanudar.visible{opacity:1;transform:translate(-50%,0);}
.lectura-reanudar i{color:#ff9f1c;margin-right:5px;}
.lectura-reanudar .lr-si{background:linear-gradient(135deg,#e60012,#a0000e);color:#fff;
  border:0;padding:7px 15px;border-radius:8px;font-size:.78rem;font-weight:600;
  cursor:pointer;font-family:inherit;white-space:nowrap;}
.lectura-reanudar .lr-no{background:none;border:0;color:#7a9cc4;font-size:1.15rem;
  cursor:pointer;line-height:1;padding:0 3px;}

/* ── Indice de capitulos ─────────────────────────────────────── */
.lectura-indice-btn{position:fixed;right:16px;bottom:22px;z-index:160;
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,159,28,.35);
  background:rgba(6,14,28,.92);backdrop-filter:blur(9px);color:#ff9f1c;
  font-size:1rem;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.42);}
.lectura-indice-btn:hover{background:rgba(255,159,28,.15);}

.lectura-indice{position:fixed;right:16px;bottom:78px;z-index:170;
  width:min(310px,calc(100vw - 32px));max-height:min(460px,60vh);overflow-y:auto;
  background:rgba(9,18,34,.97);backdrop-filter:blur(14px);
  border:1px solid rgba(42,74,122,.9);border-radius:14px;
  box-shadow:0 16px 44px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.97);
  transition:opacity .22s,transform .22s,visibility .22s;}
.lectura-indice.abierto{opacity:1;visibility:visible;transform:none;}
.lectura-indice .li-hd{padding:13px 16px;border-bottom:1px solid rgba(42,74,122,.7);
  font-family:'Cinzel',serif;font-size:.8rem;color:#ff9f1c;position:sticky;top:0;
  background:rgba(9,18,34,.97);}
.lectura-indice ul{list-style:none;margin:0;padding:7px;}
.lectura-indice a{display:flex;align-items:center;gap:10px;padding:9px 10px;
  border-radius:9px;color:#7a9cc4;font-size:.81rem;text-decoration:none;}
.lectura-indice a:hover{background:rgba(255,255,255,.05);color:#d6e4ff;}
.lectura-indice a.on{background:rgba(255,159,28,.12);color:#ff9f1c;}
.lectura-indice .li-n{width:24px;height:24px;flex-shrink:0;border-radius:7px;
  background:rgba(255,159,28,.12);color:#ff9f1c;display:flex;align-items:center;
  justify-content:center;font-size:.7rem;font-weight:700;}
.lectura-indice .li-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ── Ayuda de atajos ─────────────────────────────────────────── */
.lectura-atajos{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:210;
  background:rgba(9,18,34,.98);border:1px solid rgba(42,74,122,.9);border-radius:15px;
  padding:22px 26px;box-shadow:0 20px 55px rgba(0,0,0,.6);cursor:pointer;
  max-width:calc(100vw - 32px);}
.lectura-atajos .la-hd{font-family:'Cinzel',serif;color:#ff9f1c;font-size:.92rem;
  margin-bottom:14px;text-align:center;}
.lectura-atajos .la-fila{display:flex;align-items:center;gap:9px;padding:5px 0;
  font-size:.8rem;color:#7a9cc4;}
.lectura-atajos .la-fila span{margin-left:auto;padding-left:16px;}
.lectura-atajos kbd{background:rgba(0,0,0,.4);border:1px solid rgba(42,74,122,.9);
  border-radius:6px;padding:2px 8px;font-family:Consolas,monospace;font-size:.76rem;color:#d6e4ff;}

/* ═══════════════════════════════════════════════════════════════
   TEMAS DE LECTURA
   Solo repintan la zona de texto, no el resto de la interfaz.
   ═══════════════════════════════════════════════════════════════ */
body.lectura-sepia .reader-layout{background:#f4ecd8;border-radius:14px;}
body.lectura-sepia .cap-body,
body.lectura-sepia .cap-body p{color:#4a3f2f;}
body.lectura-sepia .cap-title,
body.lectura-sepia .cap-body h2,
body.lectura-sepia .cap-body h3{color:#7a5c2e;}
body.lectura-sepia .cap-body blockquote{border-left-color:#b99a5e;color:#6b5940;}

body.lectura-claro .reader-layout{background:#fdfdfb;border-radius:14px;}
body.lectura-claro .cap-body,
body.lectura-claro .cap-body p{color:#242830;}
body.lectura-claro .cap-title,
body.lectura-claro .cap-body h2,
body.lectura-claro .cap-body h3{color:#0f2b4a;}

body.lectura-noche .reader-layout{background:#05080f;border-radius:14px;}
body.lectura-noche .cap-body,
body.lectura-noche .cap-body p{color:#8a94a6;}
body.lectura-noche .cap-title,
body.lectura-noche .cap-body h2,
body.lectura-noche .cap-body h3{color:#c9a04a;}

body.lectura-sepia .reader-layout,
body.lectura-claro .reader-layout,
body.lectura-noche .reader-layout{padding-left:34px;padding-right:34px;
  box-shadow:0 10px 40px rgba(0,0,0,.28);}

body.lectura-justificada .cap-body,
body.lectura-justificada .cap-body p{text-align:justify;hyphens:auto;}

/* ── Columna de botones flotantes (esquina inferior derecha) ─────
   De abajo arriba: índice de capítulos (si hay más de uno), botón de
   tema y el indicador "Cap. X · %". Antes el botón de tema caía justo
   encima del índice y lo tapaba. El panel del índice se abre a la
   izquierda de la columna para no tapar el botón de tema.
   "body #theme-toggle" gana a la regla del <style> de ver.php. */
body #theme-toggle{right:16px;bottom:22px;}
.lectura-hud{bottom:78px;}
body.con-indice #theme-toggle{bottom:78px;}
body.con-indice .lectura-hud{bottom:134px;}
.lectura-indice{right:78px;bottom:22px;width:min(310px,calc(100vw - 94px));}
/* Con el índice abierto sobra el indicador (y quedaría debajo del panel) */
body:has(.lectura-indice.abierto) .lectura-hud{opacity:0;}

/* ── Movil ───────────────────────────────────────────────────── */
@media(max-width:640px){
  body #theme-toggle{right:11px;bottom:16px;width:42px;height:42px;}
  .lectura-hud{right:11px;bottom:66px;padding:6px 10px;}
  .lectura-indice-btn{right:11px;bottom:16px;width:42px;height:42px;}
  body.con-indice #theme-toggle{bottom:66px;}
  body.con-indice .lectura-hud{bottom:116px;}
  .lectura-indice{right:66px;bottom:16px;width:min(310px,calc(100vw - 77px));}
  /* El aviso de "continuar" no se mete debajo de la columna de botones */
  .lectura-reanudar{flex-wrap:wrap;justify-content:center;text-align:center;
    left:11px;right:66px;transform:translateY(18px);max-width:none;}
  .lectura-reanudar.visible{transform:none;}
  body.lectura-sepia .reader-layout,
  body.lectura-claro .reader-layout,
  body.lectura-noche .reader-layout{padding-left:18px;padding-right:18px;}
}

@media (prefers-reduced-motion: reduce){
  .lectura-progreso i{transition:none;}
}