/* ==========================================================================
   Libro — la lectura como un libro abierto.

   Entorno de lectura con la superficie blanco perla y azul grisáceo de la
   biblioteca. Se conservan la banda azul y los controles dorados; las hojas
   blancas llevan al pie una franja roja institucional.

   Las medidas de la hoja (--hoja-*) las pone lectura.js en el elemento: son
   las mismas con las que se pagina, así que no se tocan aquí.
   ========================================================================== */

.libro-visor{
  --libro-azul:#0c2a6a;
  --libro-azul-hondo:#081d4b;
  --libro-oro:#f6c400;
  --libro-oro-hondo:#d9a900;
  --libro-rojo:#c8102e;
  --libro-tinta:#1c2333;
  --libro-gris:#6b7486;
  position:relative;
  display:flex;
  flex-direction:column;
  height:calc(100dvh - var(--libro-barra, 64px));
  min-height:520px;
  overflow:hidden;
  color:#fff;
  background:var(--libro-azul-hondo);
  font-family:var(--fuente);
}
#vista-lectura.activa{display:block;padding:0;margin:0;max-width:none;}
.libro-vacio{padding:48px 20px;background:#fff;color:var(--libro-tinta)}

/* Pantalla completa: el navegador la da o, en el iPhone, se simula. */
.libro-visor.libro-pantalla{height:100dvh;}
.libro-visor.libro-fijo{position:fixed;inset:0;z-index:1000;height:100dvh;}

/* ---------------- Banda superior ---------------- */

.libro-cab{
  display:flex;align-items:center;gap:14px;
  padding:10px 18px;
  background:linear-gradient(180deg,#0f3279,var(--libro-azul));
  border-bottom:3px solid var(--libro-oro);
  flex:none;
}
.libro-emblema{
  flex:none;display:grid;place-items:center;
  width:60px;height:46px;border-radius:9px;background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.libro-emblema img{width:34px;height:34px;object-fit:contain}
.libro-titulos{min-width:0;display:flex;flex-direction:column;gap:3px}
.libro-antetitulo{
  font:400 12px/1.4 var(--fuente);letter-spacing:.06em;text-transform:uppercase;
  color:var(--libro-oro);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.libro-nombre{
  margin:0;font:800 21px/1.2 var(--fuente);color:#fff;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.libro-herramientas{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}
.libro-separador{width:1px;height:26px;background:rgba(255,255,255,.18)}

.libro-redondo{
  flex:none;display:grid;place-items:center;
  width:42px;height:42px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.13);color:#fff;cursor:pointer;
  transition:background .18s,color .18s,transform .18s,box-shadow .18s;
}
.libro-redondo:hover{background:rgba(255,255,255,.25);transform:translateY(-1px)}
.libro-redondo:focus-visible{outline:3px solid var(--libro-oro);outline-offset:2px}
.libro-redondo.libro-oro,
.libro-redondo[aria-pressed="true"]{
  background:var(--libro-oro);color:var(--libro-azul);
  box-shadow:0 4px 14px rgba(246,196,0,.35);
}
.libro-redondo.libro-oro:hover,
.libro-redondo[aria-pressed="true"]:hover{background:#ffd632}

/* ---------------- La mesa ---------------- */

.libro-escena{
  position:relative;flex:1;min-height:0;
  display:flex;align-items:center;justify-content:center;
  padding:22px 92px;
  background:
    radial-gradient(ellipse at 50% 40%,#fff 0%,#ffffff80 36%,transparent 72%),
    linear-gradient(135deg,#f4f7fb 0%,#e5edf6 55%,#d4e0ef 100%);
  overflow:hidden;
}
.libro-mesa{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.libro-marco{position:relative;flex:none;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.libro-tomo{position:absolute;left:0;top:0;transform-origin:0 0;touch-action:pan-y pinch-zoom}

.libro-ranura,.libro-debajo{position:absolute;top:0;width:var(--hoja-ancho);height:var(--hoja-alto)}
.libro-ranura{z-index:2}
.libro-ranura-izq{left:0}
.libro-ranura-der{left:var(--hoja-ancho)}
.libro-tomo.simple .libro-ranura-der{left:0}
.libro-debajo{z-index:1;overflow:hidden}
.libro-ranura .libro-pagina,.libro-debajo .libro-pagina{box-shadow:0 20px 44px rgba(0,0,0,.38),0 2px 6px rgba(0,0,0,.2)}

.libro-dorso-capa{
  position:absolute;left:0;top:0;width:0;height:0;z-index:4;pointer-events:none;
  /* Solo un filo para que el borde del papel se distinga sobre la hoja
     blanca de debajo; una sombra ancha se veía como una mancha gris. */
  filter:drop-shadow(0 0 1.2px rgba(12,42,106,.28));
}
.libro-dorso{position:absolute;left:0;top:0;width:var(--hoja-ancho);height:var(--hoja-alto);transform-origin:0 0}
.libro-reverso{width:100%;height:100%;background:linear-gradient(90deg,#f7f7f5,#fff 40%,#fafaf8)}
.libro-brillo{position:absolute;inset:0;z-index:5;pointer-events:none}
.libro-sombra,.libro-brillo-tira{position:absolute;left:0;top:0;transform-origin:50% 0;pointer-events:none}
.libro-sombra{z-index:3;background:linear-gradient(rgba(12,42,106,.16),rgba(12,42,106,0))}
.libro-brillo-tira{background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,0) 70%)}

/* Las esquinas que se agarran. Invisibles: el asomo de la esquina al pasar
   el ratón ya dice que se pueden arrastrar. */
.libro-esquina{position:absolute;z-index:6;width:84px;height:84px;cursor:grab;touch-action:none}
.libro-esquina:active{cursor:grabbing}
.libro-esquina-sd{right:0;top:0}
.libro-esquina-id{right:0;bottom:0}
.libro-esquina-si{left:0;top:0}
.libro-esquina-ii{left:0;bottom:0}
.libro-tomo.girando .libro-esquina:not(:active){pointer-events:none}

/* Flechas doradas a los lados del libro */
.libro-flecha{
  position:absolute;top:50%;z-index:8;transform:translateY(-50%);
  display:grid;place-items:center;width:56px;height:56px;padding:0;border:0;border-radius:50%;
  background:var(--libro-oro);color:var(--libro-azul);cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  transition:transform .18s,background .18s,opacity .18s;
}
.libro-flecha.anterior{left:20px}
.libro-flecha.siguiente{right:20px}
.libro-flecha:hover:not(:disabled){background:#ffd632;transform:translateY(-50%) scale(1.06)}
.libro-flecha:focus-visible{outline:3px solid #fff;outline-offset:3px}
.libro-flecha:disabled{background:rgba(255,255,255,.12);color:rgba(255,255,255,.35);box-shadow:none;cursor:default}

.libro-cargando{
  position:absolute;inset:0;z-index:7;display:flex;align-items:center;justify-content:center;gap:12px;
  font:600 15px var(--fuente);color:var(--libro-azul);
}
.libro-cargando[hidden]{display:none}
.libro-girador{
  width:22px;height:22px;border-radius:50%;
  border:3px solid #c4d1e2;border-top-color:var(--libro-oro);
  animation:libro-girar .8s linear infinite;
}
@keyframes libro-girar{to{transform:rotate(360deg)}}

/* ---------------- Pie: deslizador y pista ---------------- */

/* A los lados quedan libres los botones flotantes de la biblioteca
   («Memoria local» y la Guía), que viven fijos abajo. */
.libro-pie{flex:none;padding:12px 150px 12px 140px;background:#0a2256;border-top:1px solid rgba(255,255,255,.06)}
.libro-pie-fila{display:flex;align-items:center;gap:22px}
.libro-deslizador{
  flex:1;height:6px;margin:0;border-radius:6px;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background:linear-gradient(90deg,var(--libro-oro) var(--progreso,0%),rgba(255,255,255,.2) var(--progreso,0%));
}
.libro-deslizador:disabled{opacity:.4;cursor:default}
.libro-deslizador::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--libro-oro);border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.libro-deslizador::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;
  background:var(--libro-oro);border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.libro-deslizador:focus-visible{outline:3px solid var(--libro-oro);outline-offset:6px}
.libro-indicador{flex:none;min-width:190px;text-align:right;font:700 16px var(--fuente);color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
.libro-pista{margin:8px 0 0;text-align:center;font:500 13.5px/1.4 var(--fuente);color:rgba(255,255,255,.78)}
.libro-pista.activa{color:var(--libro-oro);font-weight:700}

/* ---------------- La hoja ---------------- */

.libro-pagina{
  position:relative;box-sizing:border-box;
  width:var(--hoja-ancho);height:var(--hoja-alto);
  padding:var(--hoja-arriba) var(--hoja-lado) var(--hoja-abajo);
  overflow:hidden;background:#fff;color:var(--libro-tinta, #1c2333);
  font:400 14.6px/1.6 var(--fuente-lectura);
  text-align:left;letter-spacing:0;
  -webkit-font-smoothing:antialiased;
}
.libro-hojas[data-formato="bolsillo"] .libro-pagina{font-size:15.2px}
.libro-pagina-cuerpo{
  display:flow-root;
  height:calc(var(--hoja-alto) - var(--hoja-arriba) - var(--hoja-abajo));
  overflow:hidden;
}
/* El molde mide con la altura libre: lo que mida es lo que ocupa. */
.libro-molde{position:absolute;left:-30000px;top:0;visibility:hidden;pointer-events:none}
.libro-molde .libro-pagina{height:auto}
.libro-molde .libro-pagina-cuerpo{height:auto;overflow:visible}

/* Sombra del lomo en el borde interior de cada hoja */
.libro-pagina.es-izq::after,.libro-pagina.es-der::after{
  content:"";position:absolute;top:0;bottom:0;width:46px;pointer-events:none;
}
.libro-pagina.es-izq::after{right:0;background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.06) 55%,rgba(0,0,0,.2))}
.libro-pagina.es-der::after{left:0;background:linear-gradient(270deg,rgba(0,0,0,0),rgba(0,0,0,.06) 55%,rgba(0,0,0,.2))}

.libro-pagina-cab{
  position:absolute;left:var(--hoja-lado);right:var(--hoja-lado);top:calc(var(--hoja-arriba) * .42);
  display:flex;justify-content:space-between;gap:16px;
  padding-bottom:5px;border-bottom:1.5px solid var(--libro-oro, #f6c400);
  font:500 10px/1.25 var(--fuente);color:var(--libro-gris, #6b7486);white-space:nowrap;
}
.libro-pagina-cab span{overflow:hidden;text-overflow:ellipsis}
.libro-pagina-cab span:last-child{flex:none;font-weight:700;color:var(--libro-azul, #0c2a6a)}
.libro-pagina-pie{
  position:absolute;left:0;right:0;bottom:calc(var(--hoja-abajo) * .4);
  text-align:center;font:600 10.5px var(--fuente);color:var(--libro-azul, #0c2a6a);
}
.libro-franja{
  position:absolute;left:0;right:0;bottom:0;height:7px;
  background:var(--marca-rojo, #d8322d);
}

/* Bloques del texto. Solo margen arriba, para que lo que mide el molde sea
   exactamente lo que ocupa la hoja. */
.libro-pagina :is(p,ul,ol,h2,h3,h4,h5,h6,dl,dd){margin:0}
.libro-texto > * + *{margin-top:.62em}
.libro-texto p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.libro-texto ul,.libro-texto ol{padding-left:1.35em}
.libro-texto li + li{margin-top:.28em}
.libro-texto li.continua{list-style:none}
.libro-texto :is(h2,h3,h4,h5,h6){
  font-family:var(--fuente);font-weight:800;line-height:1.3;color:var(--libro-azul, #0c2a6a);
}
.libro-texto h2{font-size:1.08em;padding-bottom:.28em;border-bottom:2px solid var(--libro-oro, #f6c400)}
.libro-texto :is(h3,h4,h5,h6){font-size:1em}
.libro-texto * + :is(h2,h3,h4){margin-top:1em}

.libro-articulo + .libro-articulo{margin-top:1.3em}
.libro-articulo.continua{margin-top:0}
.libro-art-cab{margin-bottom:.45em}
.libro-art-linea{display:flex;align-items:center;gap:8px;min-height:20px}
.libro-art-num{
  font:800 .74em/1.2 var(--fuente);letter-spacing:.1em;text-transform:uppercase;
  color:var(--libro-rojo, #c8102e);
}
.libro-art-linea .pastilla{font-size:10px;padding:1px 7px}
.libro-art-epi{margin:.18em 0 0;font:800 1.02em/1.3 var(--fuente);color:var(--libro-azul, #0c2a6a)}
.libro-vigencia{margin:.3em 0 0;font:500 .78em/1.4 var(--fuente);color:#8a5a00}
.libro-articulo.destacado .libro-art-cab{animation:libro-destacar 2.2s ease-out}
@keyframes libro-destacar{0%,35%{background:rgba(246,196,0,.35)}100%{background:transparent}}

.libro-nota{
  margin-top:.8em;padding:.55em .8em;border-left:3px solid var(--libro-oro, #f6c400);
  background:#fbf6e2;font:400 .86em/1.5 var(--fuente);color:#4a4228;
}
.libro-nota.continua{margin-top:0}
.libro-nota > * + *{margin-top:.4em}
.libro-nota-titulo{font-weight:800;font-size:.86em;letter-spacing:.06em;text-transform:uppercase;color:#7a5d00}

/* Portada */
.libro-portada{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  height:calc(var(--hoja-alto) - var(--hoja-arriba) - var(--hoja-abajo));
  font-family:var(--fuente);
}
.libro-portada-sello{width:74px;height:74px;object-fit:contain;margin:6px 0 10px}
.libro-portada-casa{font:700 11px/1.3 var(--fuente);letter-spacing:.18em;text-transform:uppercase;color:var(--libro-gris, #6b7486)}
.libro-portada-tipo{margin-top:26px !important;font:800 12px/1.3 var(--fuente);letter-spacing:.16em;text-transform:uppercase;color:var(--libro-rojo, #c8102e)}
.libro-portada-titulo{margin:10px 0 0 !important;font:800 30px/1.15 var(--fuente);color:var(--libro-azul, #0c2a6a);letter-spacing:-.015em;text-wrap:balance}
.libro-hojas[data-formato="bolsillo"] .libro-portada-titulo{font-size:25px}
.libro-portada-filete{display:block;width:72px;height:4px;margin:20px 0;border-radius:4px;background:var(--libro-oro, #f6c400)}
.libro-portada-breve{max-width:92%;font:400 13.5px/1.6 var(--fuente-lectura);color:#3a4256;text-align:center}
.libro-portada-breve span{display:block;margin-bottom:6px;font:800 10.5px/1 var(--fuente);letter-spacing:.14em;text-transform:uppercase;color:var(--libro-azul, #0c2a6a)}
.libro-portada-datos{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px;
  width:100%;margin-top:auto !important;padding-top:16px;border-top:1px solid #e6e9ef;text-align:left;
}
.libro-portada-datos dt{font:700 10px/1.2 var(--fuente);letter-spacing:.12em;text-transform:uppercase;color:var(--libro-gris, #6b7486)}
.libro-portada-datos dd{margin-top:3px !important;font:600 13px/1.35 var(--fuente);color:var(--libro-tinta, #1c2333)}
.libro-portada-pie{margin-top:18px !important;font:700 11px/1.2 var(--fuente);letter-spacing:.08em;color:var(--libro-azul, #0c2a6a)}

/* Índice impreso */
.libro-contenido-titulo{
  margin:0 0 .7em;padding-bottom:.3em;border-bottom:2px solid var(--libro-oro, #f6c400);
  font:800 1.5em/1.2 var(--fuente);color:var(--libro-azul, #0c2a6a);
}
.libro-contenido-nota{font:400 .95em/1.6 var(--fuente);color:#3a4256}
.libro-indice{list-style:none;padding:0;margin:0;font:400 .84em/1.35 var(--fuente)}
.libro-indice-entrada{display:flex;align-items:baseline;gap:4px;padding:2px 0;cursor:pointer;color:var(--libro-tinta, #1c2333)}
.libro-indice-entrada + .libro-indice-entrada{margin-top:2px}
.libro-indice-entrada:hover .libro-indice-texto{color:var(--libro-azul, #0c2a6a);text-decoration:underline}
.libro-indice-texto{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.libro-indice-texto b{font-weight:700;color:var(--libro-azul, #0c2a6a)}
.libro-indice-puntos{flex:1;min-width:14px;border-bottom:1.5px dotted #b9bfcb;transform:translateY(-3px)}
.libro-indice-num{flex:none;min-width:2.6em;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}

/* Colofón */
.libro-colofon{margin-top:2em;font:400 .8em/1.5 var(--fuente);color:var(--libro-gris, #6b7486);text-align:center}
.libro-colofon-filete{display:block;width:56px;height:3px;margin:0 auto 12px;border-radius:3px;background:var(--libro-oro, #f6c400)}
.libro-colofon a{color:var(--libro-azul, #0c2a6a);font-weight:700}

/* Subrayado inteligente: el texto se selecciona en dorado */
#vista-lectura.subrayado-activo .libro-texto{cursor:text}
#vista-lectura.subrayado-activo .libro-texto ::selection{background:rgba(246,196,0,.55)}
#vista-lectura.subrayado-activo .libro-texto::selection{background:rgba(246,196,0,.55)}

/* ---------------- Panel de miniaturas ---------------- */

.libro-panel{
  position:absolute;left:14px;top:14px;bottom:14px;z-index:20;
  display:flex;flex-direction:column;width:min(330px,calc(100% - 28px));
  overflow:hidden;border-radius:16px;background:#f3f5fa;color:var(--libro-tinta);
  box-shadow:0 28px 70px rgba(0,0,0,.5);
}
.libro-panel[hidden]{display:none}
.libro-panel-cab{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 12px 12px 18px;background:var(--libro-azul);color:#fff;
  border-bottom:3px solid var(--libro-oro);font:800 15px var(--fuente);
}
.libro-panel-cerrar{
  display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;cursor:pointer;
}
.libro-panel-cerrar:hover{background:rgba(255,255,255,.26)}
.libro-panel-cuerpo{flex:1;overflow:auto;padding:16px}
.libro-panel-nota{margin:14px 2px 0;font:500 12.5px/1.45 var(--fuente);color:var(--libro-gris)}
.libro-miniaturas{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:16px 12px;justify-items:center}
.libro-mini{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;border:0;background:none;cursor:pointer;color:var(--libro-gris);font:700 12px var(--fuente)}
.libro-mini-hoja{
  position:relative;display:block;overflow:hidden;
  width:112px;height:var(--mini-alto);background:#fff;border-radius:3px;
  box-shadow:0 4px 12px rgba(12,42,106,.18);outline:3px solid transparent;transition:outline-color .15s,transform .15s;
}
.libro-mini:hover .libro-mini-hoja{transform:translateY(-2px)}
.libro-mini.actual .libro-mini-hoja{outline-color:var(--libro-oro)}
.libro-mini.actual{color:var(--libro-azul)}
.libro-pagina.es-mini{position:absolute;left:0;top:0;transform:scale(var(--mini-escala));transform-origin:0 0;pointer-events:none}

/* ---------------- Página ampliada ---------------- */

.libro-ampliar{
  position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;
  background:rgba(6,20,54,.97);
}
.libro-ampliar[hidden]{display:none}
.libro-ampliar-barra{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.libro-ampliar-barra strong{min-width:150px;text-align:center;font:700 15px var(--fuente);color:rgba(255,255,255,.85)}
.libro-ampliar-barra .libro-separador{margin-left:auto}
.libro-ampliar-lienzo{flex:1;overflow:auto;padding:22px 20px 40px}
.libro-ampliar-hoja{position:relative;margin:0 auto;box-shadow:0 22px 60px rgba(0,0,0,.5)}
.libro-ampliar-hoja .libro-pagina{position:absolute;left:0;top:0;transform-origin:0 0}

/* El aviso de «enviado al hallazgo» flota sobre el libro */
.libro-visor .lectura-aviso{bottom:96px}

/* ---------------- Teléfono ---------------- */

@media (max-width:759px){
  .libro-visor{min-height:480px}
  .libro-cab{flex-wrap:wrap;gap:10px;padding:10px 12px}
  .libro-emblema{width:46px;height:38px}
  .libro-emblema img{width:28px;height:28px}
  .libro-titulos{flex:1}
  .libro-nombre{font-size:17px}
  .libro-antetitulo{font-size:10px}
  .libro-herramientas{width:100%;justify-content:space-between;gap:6px}
  .libro-redondo{width:40px;height:40px}
  /* En el teléfono las flechas bajan a las esquinas: a media altura
     taparían el borde del texto. */
  .libro-flecha{top:auto;bottom:10px;transform:none;width:42px;height:42px}
  .libro-flecha:hover:not(:disabled){transform:scale(1.06)}
  .libro-flecha svg{width:22px;height:22px}
  .libro-flecha.anterior{left:8px}
  .libro-flecha.siguiente{right:8px}
  .libro-escena{padding:12px 14px 62px}
  .libro-pie{padding:10px 14px 64px}
  .libro-pie-fila{gap:12px}
  .libro-indicador{min-width:0;font-size:13px}
  .libro-pista{font-size:12px;padding-right:76px;text-align:left}
  .libro-ampliar-barra{flex-wrap:wrap;padding:10px 12px}
  .libro-ampliar-barra strong{min-width:0;flex:1}
}

@media (prefers-reduced-motion:reduce){
  .libro-marco{transition:none}
}