/* WS Editore — estilos del visor "Ver por dentro" (libros del plan lector).
   Clases con prefijo .lxv para no pisar al visor viejo (.lb3v) que sigue vivo en la home.
   Usa las variables de color del propio sitio (--ink, --amber, etc.) y, si no existen, cae a valores fijos. */

.lxv {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(20, 16, 12, .82);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.lxv-abierto { display: flex; }

.lxv-caja {
  position: relative;
  width: min(1000px, 100%);
  /* ALTURA explícita, no solo max-height: sin altura definida el navegador ignora el `max-height: 100%`
     de la hoja y el lienzo la recortaba (se veían solo 366 de los 544 px de la página).
     `dvh` = alto REALMENTE visible: en el celular `vh` cuenta la barra del navegador como si no estuviera
     y la hoja se cortaba abajo. El `vh` queda de respaldo para navegadores viejos. */
  height: 94vh;
  height: 94dvh;
  max-height: 94vh;
  max-height: 94dvh;
  display: flex;
  flex-direction: column;
  background: #fdfaf4;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
}

.lxv-barra {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  padding: .7rem 3.2rem .7rem 1rem;
  background: #f6efe3;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.lxv-titulo { font-weight: 700; font-size: .95rem; color: #2c231a; }
.lxv-cuenta { font-size: .85rem; color: #6b5c4a; margin-left: auto; }
.lxv-pista { font-size: .8rem; color: #8a7a66; }

.lxv-cerrar {
  position: absolute;
  top: .45rem;
  right: .5rem;
  width: 2.1rem;
  height: 2.1rem;
  border: 0;
  border-radius: 50%;
  background: #2c231a;
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.lxv-cerrar:hover,
.lxv-cerrar:focus-visible { background: #b0111a; }

.lxv-lienzo {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #efe7d9;
  overflow: hidden;                 /* sin scroll interno: o se ve la hoja entera o nada */
  padding: .8rem;
}

/* La hoja.
   OJO con el tamaño: un `max-height: 100%` NO sirve aquí — el contenedor flexible no tiene altura
   definida, el navegador ignora el porcentaje y la hoja salía a tamaño natural (hasta 1000 px de ancho
   → ~1400 px de alto) recortada por la caja. Se mide contra la VENTANA, que sí es un dato seguro:
   así la hoja SIEMPRE se ve completa, con el aire de la barra de arriba y el pie. */
.lxv-hoja {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;                 /* válido ahora: la caja y el lienzo tienen altura definida */
  object-fit: contain;
  opacity: 0;
  transition: opacity .18s ease;
  border-radius: 3px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
}
.lxv-hoja.lxv-lista { opacity: 1; }

/* marca de agua: el material se muestra; el libro completo se entrega al colegio */
.lxv-marca {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-family: system-ui, sans-serif;
  font-size: clamp(1.1rem, 4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: .18em;
  color: rgba(44, 35, 26, .10);
  text-align: center;
  transform: rotate(-24deg);
  user-select: none;
}

.lxv-cargando {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: .5rem .9rem;
  border-radius: 999px;
  background: rgba(44, 35, 26, .82);
  color: #fff;
  font-size: .85rem;
  text-align: center;
  max-width: 80%;
}

.lxv-pie {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .7rem 1rem;
  background: #fdfaf4;
  border-top: 1px solid rgba(0, 0, 0, .08);
}

.lxv-pie-txt { margin: 0; font-size: .85rem; color: #6b5c4a; flex: 1 1 16rem; }

.lxv-cta {
  display: inline-block;
  padding: .5rem .9rem;
  border-radius: 999px;
  background: #b0111a;
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
}
.lxv-cta:hover { background: #8d0d14; }

.lxv-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.6rem;
  height: 2.6rem;
  border: 0;
  border-radius: 50%;
  background: rgba(44, 35, 26, .72);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.lxv-nav:hover { background: rgba(44, 35, 26, .92); }
.lxv-ant { left: .6rem; }
.lxv-sig { right: .6rem; }

@media (max-width: 640px) {
  .lxv-caja { height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; border-radius: 10px; }
  .lxv-pista { display: none; }
  .lxv-nav { width: 2.2rem; height: 2.2rem; font-size: 1.3rem; }
  .lxv-pie { padding: .6rem .7rem; }
}

/* el libro que gira: el mismo componente del sitio, con un ancho más estrecho para las tarjetas */
.lxv-libro-3d { max-width: 260px; margin: 0 auto; }