/* ==========================================
   Visor de libro interactivo (js/libro/libro.js)
   Qué cubre: Marco del libro, tabla de contenido, página, giro de página, preguntas y completar de las misiones.
   Lo usan las Misiones 1, 2 y 3.
   Orden de carga: ver ESTRUCTURA.md (este archivo es el nº 5 de 12).
   Secciones:
     · VISOR DE LIBRO INTERACTIVO
     · PASAR DE PÁGINA COMO EN UN LIBRO (ver prepararHojaAnteriorLibro e
   ========================================== */

/* ==========================================
   VISOR DE LIBRO INTERACTIVO
   ========================================== */

/* Modal del libro notablemente más grande que el genérico, con look de
   "libro abierto": lomo central, esquina de página y sombra de encuadernado. */
.modal-libro {
  max-width: 1280px;
  width: 94vw;
  max-height: 92vh;
  background: #fbf6ea;
}

.libro-avisos {
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  background: #fef3c7;
  border-bottom: 1px solid #f59e0b;
}

.libro-avisos:not(:has(p:not(.oculto-modal))) {
  display: none;
}

.libro-avisos .hotspot-aviso-incompleto,
.libro-avisos .carrusel-aviso {
  position: static;
  transform: none;
  margin: 0;
  max-width: none;
  padding: 0.25rem;
  border-radius: 0;
  background: transparent;
  color: #78350f;
  white-space: normal;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
}

.libro-avisos p:not(.oculto-modal) {
  border-radius: 8px;
  animation: atxAvisoAtencion 2.4s ease-in-out 2;
}

@keyframes atxAvisoAtencion {
  0%, 100% { background-color: transparent; }
  50% { background-color: #fde68a; }
}

@media (prefers-reduced-motion: reduce) {
  .libro-avisos p:not(.oculto-modal) {
    animation: none;
  }
}

.libro-cuerpo {
  display: grid;
  grid-template-columns: 240px 1fr;
  /* flex:1 + min-height:0 es lo que deja que este bloque se encoja en
     viewports bajos en vez de empujar el footer (con "Siguiente ▶") fuera
     de la vista — .libro-tabla-contenido y .libro-pagina ya tienen su
     propio overflow-y:auto para el scroll interno cuando no entra todo. */
  flex: 1;
  min-height: 0;
  background: #fbf6ea;
  /* Sombra tenue en el centro simulando el lomo/pliegue de un libro abierto. */
  background-image: linear-gradient(90deg,
    transparent 0,
    transparent calc(240px - 10px),
    rgba(0, 0, 0, 0.08) calc(240px - 2px),
    rgba(0, 0, 0, 0.03) 240px,
    transparent calc(240px + 12px)
  );
}

.libro-tabla-contenido {
  border-right: 1px solid var(--atx-panel-border);
  background: var(--atx-panel-bg-suave);
  padding: 1.3rem 0.8rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.libro-toc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 0.55rem 0.6rem;
  text-align: left;
  font-size: 0.78rem;
  color: var(--atx-text-muted);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.libro-toc-item:hover {
  background: rgba(8, 145, 178, 0.08);
}

.libro-toc-item.activo {
  background: var(--atx-accent-teal);
  color: #ffffff;
  font-weight: 700;
}

.libro-toc-numero {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--atx-track-bg);
  color: var(--atx-text-dark);
  font-size: 0.68rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.libro-toc-item.activo .libro-toc-numero {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.libro-pagina {
  padding: 2.2rem 2.6rem;
  overflow-y: auto;
  /* Papel crema con una leve sombra junto al lomo (borde izquierdo). */
  background: linear-gradient(90deg, rgba(120, 90, 40, 0.1) 0, rgba(120, 90, 40, 0) 34px), #fffdf8;
}

/* ==========================================
   PASAR DE PÁGINA COMO EN UN LIBRO (ver prepararHojaAnteriorLibro e
   iniciarVolteoLibro en libro.js). La hoja que se va gira sobre el borde
   izquierdo (el lomo) con perspectiva y sombra; al retroceder, la anterior
   vuelve a posarse encima. Con "reducir movimiento" no se anima.
   ========================================== */
.libro-cuerpo {
  position: relative;
}

.libro-cuerpo.libro-volteando {
  perspective: 3200px;
}

/* Marcapáginas (cinta) en la esquina superior de la hoja. */
.libro-cuerpo::after {
  content: '';
  position: absolute;
  top: 0;
  right: 34px;
  width: 22px;
  height: 66px;
  background: linear-gradient(180deg, #dc2626, #b91c1c);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
  filter: drop-shadow(0 2px 2px rgba(15, 23, 42, 0.3));
  z-index: 6;
  pointer-events: none;
}

.libro-hoja-saliente {
  position: absolute;
  z-index: 5;
  margin: 0;
  box-sizing: border-box;
  pointer-events: none;
  transform-origin: left center;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.libro-hoja-saliente.estatica-debajo {
  z-index: 1;
}

.libro-hoja-saliente.volteo-adelante {
  animation: atxHojaSale 0.76s cubic-bezier(0.55, 0.05, 0.4, 1) both;
}

.libro-pagina.volteo-atras {
  position: relative;
  z-index: 5;
  transform-origin: left center;
  backface-visibility: hidden;
  animation: atxHojaEntra 0.76s cubic-bezier(0.3, 0.1, 0.35, 1) both;
}

/* La hoja de debajo se oscurece junto al lomo mientras la otra pasa por encima. */
.libro-pagina.libro-bajo-hoja,
.libro-hoja-saliente.libro-bajo-hoja {
  animation: atxBajoHoja 0.76s ease-out both;
}

@keyframes atxHojaSale {
  0% { transform: rotateY(0deg); opacity: 1; box-shadow: 0 0 0 rgba(15, 23, 42, 0); }
  55% { transform: rotateY(-46deg); opacity: 1; box-shadow: 34px 0 60px rgba(15, 23, 42, 0.4); }
  100% { transform: rotateY(-80deg); opacity: 0; box-shadow: 40px 0 70px rgba(15, 23, 42, 0); }
}

@keyframes atxHojaEntra {
  0% { transform: rotateY(-80deg); opacity: 0; box-shadow: 40px 0 70px rgba(15, 23, 42, 0); }
  45% { transform: rotateY(-46deg); opacity: 1; box-shadow: 34px 0 60px rgba(15, 23, 42, 0.4); }
  100% { transform: rotateY(0deg); opacity: 1; box-shadow: 0 0 0 rgba(15, 23, 42, 0); }
}

@keyframes atxBajoHoja {
  0% { box-shadow: inset 110px 0 90px -70px rgba(15, 23, 42, 0.42); }
  100% { box-shadow: inset 0 0 0 0 rgba(15, 23, 42, 0); }
}

/* Número de página al pie de la hoja, como en un libro impreso. */
.libro-numero-pagina {
  margin-top: 2rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(120, 90, 40, 0.18);
  text-align: center;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--atx-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .libro-hoja-saliente,
  .libro-pagina.volteo-atras,
  .libro-pagina.libro-bajo-hoja {
    animation: none;
  }
}

.libro-pagina h3 {
  margin: 0 0 1.1rem 0;
  color: var(--atx-accent-teal-dark);
  font-size: 1.4rem;
  font-family: Georgia, 'Times New Roman', serif;
}

/* Etiqueta pequeña opcional (pagina.seccion) encima del título de una
   página — marca el inicio de una sección temática del libro (ej.
   "Diseñamos una solución solar"), la misma que lista la página de resumen
   final como completada o no. */
.libro-seccion-eyebrow {
  margin: 0 0 0.3rem 0;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--atx-accent-amber-dark);
}

.libro-pagina-imagen {
  max-width: 100%;
  max-height: 62vh;
  display: block;
  margin: 0 auto 1.1rem auto;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(30, 27, 58, 0.15);
}

.libro-pagina-texto {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--atx-text-dark);
  font-family: Georgia, 'Times New Roman', serif;
}

/* Oración clave destacada dentro de una página (ej. "Conoce el desafío"):
   más grande y con una barra de acento a la izquierda, para que resalte
   sobre el resto del texto sin ser un título de página aparte. */
.libro-subtitulo-destacado {
  margin: 0 0 1.1rem 0;
  padding: 0.8rem 1.1rem;
  border-left: 4px solid var(--atx-accent-teal);
  background: var(--atx-panel-bg-suave);
  border-radius: 0 10px 10px 0;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--atx-accent-teal-dark);
}

.libro-pagina-texto p {
  margin: 0 0 0.9rem 0;
}

/* Encabezados de sección dentro de la página de resumen final (ej. "🏆
   Puntaje ganado", "📖 Progreso del libro") — en sans-serif para
   diferenciarse del cuerpo de texto en Georgia. */
.libro-pagina-texto h4 {
  margin: 1.1rem 0 0.4rem 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.95rem;
  color: var(--atx-accent-teal-dark);
}

.libro-pregunta-texto {
  font-size: 0.9rem;
  color: var(--atx-text-dark);
  margin-bottom: 0.8rem;
}

.libro-pregunta-opcion {
  display: block;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--atx-panel-border);
  border-radius: 8px;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.libro-pregunta-opcion:hover {
  border-color: var(--atx-accent-teal);
  background: #ecfeff;
}

/* Marca la opción que el estudiante ya había elegido en una sesión
   anterior, al restaurar una pregunta ya respondida (ver
   obtenerRespuestaGuardadaLibro en guardado-respuestas.js). */
.libro-pregunta-opcion.opcion-guardada {
  border-color: var(--atx-accent-teal);
  background: #ecfeff;
  font-weight: 700;
}

/* Resultado de una pregunta ya verificada: la elegida en verde o rojo y, si
   falló, la correcta resaltada en verde (ver verificarPreguntaLibro, libro.js). */
.libro-pregunta-opcion.opcion-correcta {
  border-color: var(--atx-accent-green);
  background: #dcfce7;
  color: #166534;
  font-weight: 700;
}

.libro-pregunta-opcion.opcion-incorrecta {
  border-color: #ef4444;
  background: #fee2e2;
  color: #991b1b;
  font-weight: 700;
}

/* Opciones con imagen (pregunta.imagenesOpciones, ver renderizarPaginaPregunta
   en libro.js) — la imagen va debajo de la etiqueta, a todo el ancho. */
.libro-pregunta-opcion.opcion-con-imagen {
  font-weight: 700;
}

.libro-pregunta-opcion-imagen {
  display: block;
  max-width: 100%;
  max-height: 160px;
  margin: 0.5rem auto 0;
  border-radius: 6px;
}

/* Preguntas con imágenes en las opciones: cuadrícula de 2 columnas centrada
   (1 columna en pantallas estrechas) en vez de una opción por fila. */
.libro-pregunta-cuadricula {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  max-width: 640px;
  margin: 0 auto;
}

.libro-pregunta-cuadricula .libro-pregunta-opcion {
  margin-bottom: 0;
  text-align: center;
}

@media (max-width: 520px) {
  .libro-pregunta-cuadricula {
    grid-template-columns: 1fr;
  }
}

#libroBtnAnterior:disabled, #libroBtnSiguiente:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.libro-progreso-bg {
  height: 5px;
  background: rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}

.libro-progreso-fill {
  height: 100%;
  background: var(--atx-accent-amber);
  transition: width 0.4s ease;
}

.libro-toc-item.bloqueada {
  opacity: 0.45;
  cursor: not-allowed;
}

.libro-toc-item.bloqueada .libro-toc-numero {
  background: transparent;
  font-size: 0.65rem;
}

/* Animación de "pasar página": un leve giro en 3D en vez de un cambio seco,
   para que se sienta más como hojear un libro que como cambiar de pantalla. */
.libro-cuerpo {
  perspective: 1600px;
}

/* Giro más marcado + una sombra que se desvanece en el borde, para que se
   sienta más como una hoja física levantándose y no solo un fundido. */
@keyframes atxLibroPaginaEntra {
  0% {
    opacity: 0;
    transform: rotateY(-22deg) translateX(36px);
    box-shadow: -26px 0 40px rgba(15, 23, 42, 0.28);
  }
  65% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: rotateY(0) translateX(0);
    box-shadow: 0 0 0 rgba(15, 23, 42, 0);
  }
}

.libro-pagina-anim {
  animation: atxLibroPaginaEntra 0.45s cubic-bezier(0.22, 0.9, 0.3, 1);
  transform-origin: left center;
}

.libro-pagina-badge {
  display: inline-block;
  background: rgba(16, 185, 129, 0.15);
  color: var(--atx-accent-green-dark);
  font-size: 0.7rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 0.6rem;
}