/* Lector de libros de Editorial Docentes 2.0 (PDF.js autoalojado).
   Se carga DESPUES de public.css y de pdfjs/web/capas.css. */

body.lector{
  background:#12202B;
  margin:0;
  height:100dvh;
  min-height:100vh;
  overflow:hidden;              /* el scroll vive en .lec-lienzo */
  color:#F7F3EA;
  display:flex;
  flex-direction:column;
  overscroll-behavior:none;
}

/* ---------- barra de herramientas ---------- */
.lec-barra{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px clamp(6px,1.6vw,16px);
  background:var(--navy,#0B1E2C);
  border-bottom:1px solid rgba(200,162,75,.32);
  min-height:56px;
  overflow-x:auto;              /* si no cabe, se desplaza la barra, no la pagina */
  overflow-y:hidden;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
.lec-barra::-webkit-scrollbar{height:4px}
.lec-barra::-webkit-scrollbar-thumb{background:rgba(229,197,110,.4);border-radius:4px}
/* Sin esta pista, en movil los controles de la derecha parecen no existir. */
.lec-barra.desborda-dcha{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent)}
.lec-barra.desborda-izda{-webkit-mask-image:linear-gradient(to right,transparent,#000 26px);
  mask-image:linear-gradient(to right,transparent,#000 26px)}
.lec-barra.desborda-izda.desborda-dcha{
  -webkit-mask-image:linear-gradient(to right,transparent,#000 26px,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(to right,transparent,#000 26px,#000 calc(100% - 26px),transparent)}

.lec-grupo{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.lec-sep{flex:0 0 auto;width:1px;height:26px;background:rgba(229,197,110,.22);margin:0 4px}
.lec-elastico{flex:1 1 auto;min-width:8px}

.lec-titulo{
  flex:0 1 auto;min-width:0;
  font-family:var(--serif,Georgia,serif);font-size:14.5px;letter-spacing:.02em;
  color:#F7F3EA;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:min(38vw,460px);
}

/* Todos los controles son <button>/<a> reales, con area tactil de 44x44. */
.lec-btn{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-width:44px;min-height:44px;padding:0 10px;
  background:transparent;border:1px solid transparent;border-radius:8px;
  color:#DCD3C1;font:inherit;font-size:13px;line-height:1;
  text-decoration:none;cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:background .15s,color .15s,border-color .15s;
}
.lec-btn:hover:not([disabled]){background:rgba(229,197,110,.12);color:var(--oros,#E5C56E)}
.lec-btn[disabled]{opacity:.35;cursor:default}
.lec-btn[aria-pressed="true"]{background:rgba(229,197,110,.2);color:var(--oros,#E5C56E);border-color:rgba(229,197,110,.45)}
.lec-btn .ico{font-size:16px;line-height:1}
.lec-btn .rot{white-space:nowrap}
@media(max-width:900px){.lec-btn .rot{display:none}}

.lec-barra :focus-visible{outline:2px solid #F7F3EA;outline-offset:2px;border-radius:8px}

/* campo de pagina + estado "12-13 de 269" */
.lec-pag{display:flex;align-items:center;gap:7px;flex:0 0 auto;padding:0 2px}
.lec-pag input{
  width:4.2em;min-height:36px;padding:5px 6px;text-align:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(229,197,110,.35);border-radius:6px;
  color:#F7F3EA;font:inherit;font-size:13.5px;-moz-appearance:textfield;appearance:textfield;
}
.lec-pag input::-webkit-outer-spin-button,.lec-pag input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.lec-pag input:focus-visible{outline:2px solid #F7F3EA;outline-offset:1px}
.lec-pag .estado{font-size:12.5px;color:#A9A192;white-space:nowrap}
.lec-pag .estado b{color:#DCD3C1;font-weight:600}

/* ---------- lienzo ---------- */
/* pan-x pan-y: el navegador conserva el desplazamiento pero cede el pellizco al
   lector, que lo traduce a zoom del PDF (no zoom del navegador sobre la página). */
.lec-lienzo{touch-action:pan-y;
  flex:1 1 auto;
  position:relative;
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:clamp(10px,2vw,26px) clamp(6px,2vw,26px);
  display:flex;
  align-items:flex-start;
  justify-content:center;
}
.lec-pliego{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:clamp(6px,1.2vw,16px);
  margin:auto;                  /* centra tambien en vertical si sobra alto;
                                   con margin:auto el contenido desbordado sigue
                                   siendo alcanzable al hacer scroll (justify-content
                                   center lo dejaria cortado por la izquierda) */
}
.lec-pliego.una .lec-hueco{display:none}

/* una pagina */
.lec-pagina{
  --scale-factor:1;
  --user-unit:1;
  --total-scale-factor:calc(var(--scale-factor) * var(--user-unit));
  --scale-round-x:1px;
  --scale-round-y:1px;
  position:relative;
  direction:ltr;
  flex:0 0 auto;
  background:#fff;
  box-shadow:0 10px 34px rgba(0,0,0,.5);
  overflow:hidden;
  border-radius:2px;
}
.lec-pagina canvas{position:absolute;top:0;left:0;display:block}
/* hueco que ocupa el sitio de la pagina par ausente frente a la portada */
.lec-hueco{flex:0 0 auto;visibility:hidden}

/* ---------- estados ---------- */
.lec-estado{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:24px;text-align:center;background:#12202B;z-index:5;
}
.lec-estado[hidden]{display:none!important}
.lec-estado h2{font-family:var(--serif,Georgia,serif);font-weight:400;font-size:20px;margin:0;color:#F7F3EA}
.lec-estado p{margin:0;max-width:44ch;font-size:14px;color:#A9A192;line-height:1.6}
.lec-estado .acciones{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.lec-estado .btn{padding:11px 22px;font-size:13.5px}
.lec-estado .btn-oro{background:var(--oro,#C8A24B);color:var(--navy,#0B1E2C);border-radius:8px;
  text-decoration:none;font-weight:700;display:inline-flex;align-items:center;min-height:44px;
  padding:0 22px;border:0;cursor:pointer;font-family:inherit}
.lec-estado .btn-out{background:transparent;border:2px solid rgba(229,197,110,.55);color:#F7F3EA;border-radius:8px;
  text-decoration:none;font-weight:700;display:inline-flex;align-items:center;min-height:44px;
  padding:0 22px;cursor:pointer;font-family:inherit;font-size:13.5px}
.lec-estado :focus-visible{outline:2px solid #F7F3EA;outline-offset:3px}

/* barra de progreso de carga */
.lec-progreso{width:min(320px,70vw);height:4px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}
.lec-progreso i{display:block;height:100%;width:0;background:var(--oro,#C8A24B);transition:width .2s linear}
/* Indeterminada mientras PDF.js no reporte un porcentaje real: con peticiones de
   rango el "loaded/total" no describe lo que falta para ver la primera pagina. */
.lec-progreso.indeterminado i{width:38%;transition:none;animation:lec-desliza 1.5s ease-in-out infinite}
@keyframes lec-desliza{0%{transform:translateX(-115%)}100%{transform:translateX(380%)}}

/* giro del indicador de carga */
.lec-giro{width:34px;height:34px;border-radius:50%;border:3px solid rgba(229,197,110,.25);
  border-top-color:var(--oro,#C8A24B);animation:lec-girar .9s linear infinite}
@keyframes lec-girar{to{transform:rotate(360deg)}}

/* region viva: anuncia sin ocupar sitio ni robar el foco */
.lec-vivo{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- enlaces internos del PDF ----------
   Las capas se colocan solas (capas.css de PDF.js). Solo devolvemos el foco
   visible, que el CSS original anula con --link-outline:none. */
.lec-pagina .annotationLayer .linkAnnotation > a:focus-visible{
  outline:3px solid var(--oro,#C8A24B);outline-offset:1px;border-radius:2px;
  background:rgba(200,162,75,.25);
}

/* ---------- movil ---------- */
@media(max-width:640px){
  .lec-titulo{display:none}
  .lec-barra{gap:2px;padding:4px 6px;min-height:52px}
  .lec-pag input{width:3.6em}
  .lec-pag .estado{font-size:11.5px}
}

/* ---------- respeto por reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .lec-btn,.lec-progreso i{transition:none}
  .lec-giro{animation-duration:2.4s}
  .lec-progreso.indeterminado i{animation:none;width:100%;opacity:.45}
  .lec-lienzo{scroll-behavior:auto}
}

/* ===========================================================================
   Índice desplegable, progreso de lectura y controles de paso de página
   =========================================================================== */

/* --- Panel de índice: se desliza desde la izquierda, no tapa la barra --- */
.lec-panel{position:fixed;left:0;top:var(--barra-h,56px);bottom:0;width:min(360px,86vw);
  background:#0f2233;border-right:1px solid rgba(200,162,75,.28);z-index:40;
  display:flex;flex-direction:column;box-shadow:8px 0 34px rgba(0,0,0,.45);
  transform:translateX(-102%);transition:transform .22s ease}
.lec-panel.abierto{transform:translateX(0)}
.lec-panel[hidden]{display:flex}          /* el hidden lo gobierna .abierto, no display */
.lec-panel-cab{display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid rgba(200,162,75,.2)}
.lec-panel-cab h2{margin:0;font-family:var(--serif,Georgia,serif);font-weight:400;
  font-size:18px;color:#F7F3EA;letter-spacing:.02em}
.lec-cerrar{background:none;border:0;color:#C9C3B6;font-size:18px;cursor:pointer;
  width:44px;height:44px;border-radius:8px}
.lec-cerrar:hover{background:rgba(255,255,255,.07);color:#fff}
.lec-panel-cuerpo{overflow-y:auto;padding:8px 0 20px;flex:1;
  overscroll-behavior:contain;                 /* el indice no arrastra la pagina de debajo */
  scrollbar-width:thin;scrollbar-color:transparent transparent;
  transition:scrollbar-color .25s ease}
/* La barra de desplazamiento del indice es parte del libro, no del sistema: fina, del
   oro de la casa y en reposo invisible. Solo se declara al posar el raton o mientras
   se recorre con el teclado, para no partir el panel con una franja clara. */
.lec-panel-cuerpo:hover,.lec-panel-cuerpo:focus-within{scrollbar-color:rgba(229,197,110,.45) transparent}
.lec-panel-cuerpo::-webkit-scrollbar{width:10px}
.lec-panel-cuerpo::-webkit-scrollbar-track{background:transparent}
.lec-panel-cuerpo::-webkit-scrollbar-thumb{
  background:transparent;border-radius:99px;
  border:3px solid transparent;background-clip:content-box;
  transition:background-color .25s ease}
.lec-panel-cuerpo:hover::-webkit-scrollbar-thumb,
.lec-panel-cuerpo:focus-within::-webkit-scrollbar-thumb{background:rgba(229,197,110,.4)}
.lec-panel-cuerpo::-webkit-scrollbar-thumb:hover{background:rgba(229,197,110,.72)}
.lec-panel-cuerpo::-webkit-scrollbar-thumb:active{background:var(--oros,#E5C56E)}
@media (prefers-reduced-motion:reduce){
  .lec-panel-cuerpo,.lec-panel-cuerpo::-webkit-scrollbar-thumb{transition:none}
}
/* En tactil no hay raton que la despierte: se deja visible pero discreta. */
@media (hover:none){
  .lec-panel-cuerpo{scrollbar-color:rgba(229,197,110,.35) transparent}
  .lec-panel-cuerpo::-webkit-scrollbar-thumb{background:rgba(229,197,110,.35)}
}
.lec-panel-vacio{color:#9A9488;font-size:13px;padding:16px}

.lec-ix{display:block;width:100%;background:none;border:0;
  text-align:left;color:#E8E2D6;padding:11px 16px;cursor:pointer;font:inherit;font-size:13.5px;
  line-height:1.35;border-left:3px solid transparent}
.lec-ix-fila{display:flex;align-items:baseline;gap:10px}
.lec-ix:hover{background:rgba(255,255,255,.06)}
.lec-ix:focus-visible{outline:2px solid var(--oros,#E5C56E);outline-offset:-2px}
.lec-ix.actual{border-left-color:var(--oros,#E5C56E);background:rgba(229,197,110,.10);color:#fff}
.lec-ix .n{color:var(--oros,#E5C56E);min-width:20px;font-variant-numeric:tabular-nums}
.lec-ix .f{margin-left:auto;color:#8F8878;font-size:12px;font-variant-numeric:tabular-nums}
.lec-ix.tv{text-transform:uppercase;letter-spacing:.12em;font-size:10.5px;
  color:var(--oros,#E5C56E);padding-top:18px}
/* Preliminares y finales (dedicatoria, introduccion, referencias, biografias): no
   llevan numero, pero se sangran hasta la columna del titulo de capitulo (16 de
   relleno + 20 del hueco del numero + 10 de separacion) para que la lista no se
   quiebre en dos alineaciones distintas. */
.lec-ix.frontal{padding-left:46px;color:#CFC8B8}
.lec-ix.frontal.actual{color:#fff}

/* Titulo largo de la seccion. Se despliega al pasar el raton o al recibir el foco,
   con una transicion de grid (0fr a 1fr) porque es la unica forma de animar una
   altura desconocida sin fijarla a mano y sin que el texto se recorte. */
.lec-ix-sub{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .22s ease,opacity .18s ease,margin-top .22s ease;
  margin-top:0;padding-left:30px;color:#A9A192;font-size:11.5px;line-height:1.4;
  letter-spacing:.02em;text-transform:none}
.lec-ix-sub>span{overflow:hidden;display:block}
.lec-ix:hover .lec-ix-sub,
.lec-ix:focus-visible .lec-ix-sub,
.lec-ix.actual .lec-ix-sub{grid-template-rows:1fr;opacity:1;margin-top:5px}
.lec-ix:hover .lec-ix-sub,.lec-ix.actual .lec-ix-sub{color:#CFC8B8}
.lec-ix.tv .lec-ix-sub{padding-left:0}
.lec-ix.frontal .lec-ix-sub{padding-left:0}
/* En tactil no hay raton que posar: el titulo largo se muestra siempre. */
@media (hover:none){
  .lec-ix-sub{grid-template-rows:1fr;opacity:1;margin-top:5px}
}
@media (prefers-reduced-motion:reduce){
  .lec-ix-sub{transition:none}
}

/* --- Progreso de lectura: hilo fino bajo la barra --- */
.lec-progreso-lectura{position:fixed;left:0;right:0;top:var(--barra-h,56px);height:3px;
  background:rgba(255,255,255,.07);z-index:35}
.lec-progreso-lectura i{display:block;height:100%;width:0;background:var(--oros,#E5C56E);
  transition:width .25s ease}
.lec-progreso-cifra{position:absolute;right:10px;top:6px;font-size:11px;color:#8F8878;
  font-variant-numeric:tabular-nums;letter-spacing:.04em}

/* --- Marca de la casa en la barra del lector --- */
.lec-marca{display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;
  text-decoration:none;color:inherit;padding:0 4px;border-radius:8px;
  opacity:.9;transition:opacity .18s ease}
.lec-marca:hover,.lec-marca:focus-visible{opacity:1}
.lec-marca:focus-visible{outline:2px solid var(--oros,#E5C56E);outline-offset:2px}
.lec-marca img{width:26px;height:26px;display:block;flex:0 0 auto}
.lec-marca-t{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:#B7AF9D;white-space:nowrap}
.lec-marca-t b{font-weight:700;color:var(--oros,#E5C56E)}
/* La barra es estrecha y lo que no puede faltar son los controles: por debajo de
   860px se queda solo el simbolo, y en movil desaparece del todo (la marca ya esta
   en la ficha del libro, a un toque de "Volver al libro"). */
@media (max-width:860px){.lec-marca-t{display:none}}
@media (max-width:560px){.lec-marca{display:none}}

/* --- Paso de pagina: la esquina del libro se levanta al pasar el raton ---
   Las esquinas se anclan a la HOJA, no a la ventana: lector.js mide el pliego tras
   cada pintado y publica su caja en --pl-izda / --pl-dcha / --pl-abajo. Si se fijaran
   a los bordes de la pantalla, en "ajustar a la pagina" quedarian flotando en el
   vacio, lejos del papel, y el gesto dejaria de leerse como pasar una hoja. */
.lec-esquina{
  position:absolute;z-index:30;border:0;padding:0;cursor:pointer;background:none;
  width:var(--esq,104px);height:var(--esq,104px);
  bottom:var(--pl-abajo,0px);
  opacity:0;transition:opacity .2s ease;
  -webkit-tap-highlight-color:transparent;
  /* El doblez vive DENTRO del papel: la caja va a ras del borde de la hoja y se
     recorta, de modo que ni el pliegue ni su sombra pueden invadir el fondo del
     visor. Sin esto, el efecto se lee como una pegatina sobre la aplicacion y no
     como una esquina de la propia pagina. */
  overflow:hidden;
}
.lec-esquina-izda{left:var(--pl-izda,0px)}
.lec-esquina-dcha{left:auto;right:var(--pl-dcha,0px)}

/* El pliegue: un triangulo con el reverso del papel y su sombra. En reposo asoma
   apenas; al posar el raton se levanta. La escala se aplica sobre la propia esquina
   para que el vertice del doblez no se mueva del angulo de la hoja. */
.lec-esquina::before{
  content:"";position:absolute;inset:0;
  transform:scale(.26);transform-origin:100% 100%;
  transition:transform .26s cubic-bezier(.22,.9,.3,1),filter .26s ease;
  background:linear-gradient(225deg,#FFFDF8 0%,#F3EDE0 38%,#DCD3C0 72%,#BDB29A 100%);
  clip-path:polygon(100% 0,100% 100%,0 100%);
  filter:drop-shadow(-3px -3px 7px rgba(10,20,32,.34));
}
.lec-esquina-izda::before{
  transform-origin:0 100%;
  background:linear-gradient(135deg,#FFFDF8 0%,#F3EDE0 38%,#DCD3C0 72%,#BDB29A 100%);
  clip-path:polygon(0 0,100% 100%,0 100%);
  filter:drop-shadow(3px -3px 7px rgba(10,20,32,.34));
}
/* La flecha vive dentro del doblez y solo aparece cuando este ya esta levantado. */
.lec-esquina .ico{
  position:absolute;right:11px;bottom:9px;font-size:19px;line-height:1;color:#6E6552;
  opacity:0;transform:translateY(5px);transition:opacity .2s ease .06s,transform .2s ease .06s;
}
.lec-esquina-izda .ico{right:auto;left:11px}

/* Solo se ofrece cuando el raton esta sobre el libro: no compite con la lectura. */
.lec-lienzo:hover .lec-esquina{opacity:1}
.lec-esquina:focus-visible{opacity:1;outline:2px solid var(--oros,#E5C56E);outline-offset:-4px;border-radius:4px}
.lec-esquina:hover::before,.lec-esquina:focus-visible::before{
  transform:scale(1);filter:drop-shadow(-8px -8px 16px rgba(10,20,32,.42))}
.lec-esquina-izda:hover::before,.lec-esquina-izda:focus-visible::before{
  filter:drop-shadow(8px -8px 16px rgba(10,20,32,.42))}
.lec-esquina:hover .ico,.lec-esquina:focus-visible .ico{opacity:1;transform:translateY(0)}
/* Al pulsar, el doblez se hunde: confirma el gesto sin salirse de la hoja. */
.lec-esquina:active::before{transform:scale(.9);transition-duration:.1s}
.lec-esquina[disabled]{opacity:0 !important;pointer-events:none}

/* En tactil no hay raton que levante la esquina: los gestos ya pasan la pagina. */
@media (hover:none){.lec-esquina{display:none}}
@media (prefers-reduced-motion:reduce){
  .lec-panel,.lec-progreso-lectura i{transition:none}
  .lec-esquina,.lec-esquina::before,.lec-esquina .ico{transition:none}
  .lec-esquina::before{transform:scale(.5)}
}

/* Es una indicación de política, no una barrera contra la extracción del PDF. */
@media print{
  body.lector.lec-sin-impresion{display:block;height:auto;min-height:0;overflow:visible;background:#fff;color:#111}
  body.lector.lec-sin-impresion .lec-lienzo,
  body.lector.lec-sin-impresion .lec-barra,
  body.lector.lec-sin-impresion .lec-panel,
  body.lector.lec-sin-impresion .lec-progreso-lectura,
  body.lector.lec-sin-impresion .lec-vivo{display:none!important}
  body.lector.lec-sin-impresion::after{
    content:"Esta obra es de lectura en línea. Consulte las condiciones de uso en la ficha del libro.";
    display:block;padding:40px;font:16px/1.5 serif;color:#111
  }
}

/* El botón de compartir usa el mismo aspecto que el resto de la barra, pero el
   diálogo vive en public.css, que el lector ya carga. */
#lec-barra [data-compartir] { font: inherit; }