/* ==========================================
   Actividades reutilizables del libro (js/libro/actividades-libro.js)
   Qué cubre: Lienzo de arrastrar, marcar palabras, arrastrar texto, completar en línea, ficha, mediciones, carrusel e iframe; más los estilos de la página del entregable de la Misión 3.
   Orden de carga: ver ESTRUCTURA.md (este archivo es el nº 10 de 12).
   Secciones:
     · ACTIVIDADES DEL LIBRO (js/libro/actividades-libro.js) — Misión 2
   ========================================== */

/* Misión 3 · mediciones registradas, mostradas sobre el completar de conclusiones. */
.mediciones-recordatorio {
  margin: 0 0 1rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--atx-panel-border);
  border-radius: 12px;
  background: #ecfeff;
}

.mediciones-recordatorio h4 {
  margin: 0 0 0.3rem;
  font-size: 0.95rem;
}

.mediciones-recordatorio ul {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.88rem;
}

/* Misión 3 · página del entregable (reglas + Social Lounge + confirmación). */
.entregable-caja {
  margin: 0.8rem 0 1rem;
  padding: 0.9rem 1.1rem;
  border: 2px dashed var(--atx-accent-teal);
  border-radius: 12px;
  background: #f0fdfa;
}

.entregable-caja h4 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.entregable-reglas {
  margin: 0;
  padding-left: 1.3rem;
  line-height: 1.6;
}

.entregable-confirmacion {
  display: block;
  margin: 1rem 0 0.6rem;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
}

.entregable-confirmacion input {
  margin-right: 0.5rem;
}


/* ==========================================
   ACTIVIDADES DEL LIBRO (js/libro/actividades-libro.js) — Misión 2
   Lienzo de arrastrar, marcar palabras, arrastrar texto, completar en línea,
   carrusel e iframe responsive.
   ========================================== */

/* ---- Lienzo de arrastrar (DragQuestion) ----
   touch-action:none va solo en las fichas (no en todo el lienzo) para que en
   el móvil se pueda seguir desplazando la página sobre el lienzo, que en la
   actividad de Lewis es muy alto. */
.lienzo-actividad {
  position: relative;
  width: 100%;
  border: 1px solid var(--atx-panel-border);
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  user-select: none;
}

.lienzo-fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.lienzo-zona {
  position: absolute;
  box-sizing: border-box;
  border: 2px dashed rgba(23, 104, 196, 0.45);
  border-radius: 8px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.lienzo-zona.zona-activa {
  background: rgba(45, 212, 191, 0.22);
  border-color: var(--atx-accent-teal);
}

.lienzo-ficha {
  position: absolute;
  height: auto;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 3px 6px rgba(15, 23, 42, 0.35));
  transition: left 0.2s ease, top 0.2s ease, transform 0.15s ease;
}

.lienzo-ficha.arrastrando {
  transition: none;
  z-index: 20;
  cursor: grabbing;
  transform: scale(1.06);
}

/* Modo "tocar y colocar": ficha seleccionada y zonas libres invitando al toque. */
.lienzo-ficha.ficha-seleccionada {
  outline: 3px solid var(--atx-accent-amber);
  outline-offset: 2px;
  border-radius: 6px;
  transform: scale(1.08);
  z-index: 15;
}

.lienzo-actividad.con-seleccion .lienzo-zona {
  cursor: pointer;
  background: rgba(45, 212, 191, 0.14);
  border-color: var(--atx-accent-teal);
}

.lienzo-ayuda {
  margin: 0.2rem 0 0.7rem;
  font-size: 0.82rem;
  color: var(--atx-text-muted);
}

.lienzo-ficha.lienzo-ficha-inactiva {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}

.lienzo-ficha.arrastrar-correcto {
  outline: 3px solid var(--atx-accent-green);
  outline-offset: 2px;
  border-radius: 6px;
}

.lienzo-ficha.arrastrar-incorrecto {
  outline: 3px solid #ef4444;
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---- Marcar la palabra correcta (MarkTheWords) ---- */
.marcar-oracion {
  line-height: 2.5;
  margin: 0 0 0.7rem 0;
  font-size: 0.98rem;
}

.marcar-grupo {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  vertical-align: middle;
  margin: 0 0.15rem;
}

.marcar-opcion {
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.15rem 0.65rem;
  border: 1px solid var(--atx-panel-border);
  border-radius: 999px;
  background: #ffffff;
  color: var(--atx-text-dark);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.marcar-opcion:hover:not(:disabled) {
  border-color: var(--atx-accent-teal);
  background: #ecfeff;
}

.marcar-opcion:disabled {
  cursor: default;
}

.marcar-opcion.marcar-seleccionada {
  background: var(--atx-accent-teal);
  border-color: var(--atx-accent-teal);
  color: #ffffff;
  font-weight: 700;
}

.marcar-opcion.marcar-correcta {
  background: #dcfce7;
  border-color: var(--atx-accent-green);
  color: #166534;
  font-weight: 700;
}

.marcar-opcion.marcar-incorrecta {
  background: #fee2e2;
  border-color: #ef4444;
  color: #991b1b;
  text-decoration: line-through;
}

.marcar-opcion.marcar-solucion {
  border: 1px dashed var(--atx-accent-green);
  color: #166534;
  font-weight: 700;
}

/* ---- Arrastrar palabras a huecos (DragText) ---- */
.dt-linea {
  line-height: 2.7;
  margin: 0 0 0.5rem 0;
}

.dt-hueco {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 9ch;
  min-height: 2rem;
  padding: 0 0.3rem;
  margin: 0 0.2rem;
  vertical-align: middle;
  border-bottom: 2px dashed var(--atx-accent-teal);
  border-radius: 6px 6px 0 0;
  background: rgba(45, 212, 191, 0.08);
}

.dt-banco {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-height: 3.4rem;
  margin: 1rem 0;
  padding: 0.8rem;
  border: 1px dashed var(--atx-panel-border);
  border-radius: 12px;
  background: var(--atx-panel-bg-suave);
}

.dt-ficha {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  background: #ffffff;
  border: 1px solid var(--atx-panel-border);
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--atx-text-dark);
  cursor: grab;
  touch-action: none;
  user-select: none;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}

.dt-ficha.dt-origen-arrastrando {
  opacity: 0.35;
}

.dt-ficha.dt-correcta {
  background: #dcfce7;
  border-color: var(--atx-accent-green);
  color: #166534;
}

.dt-ficha.dt-incorrecta {
  background: #fee2e2;
  border-color: #ef4444;
  color: #991b1b;
}

.dt-ficha.dt-inactiva {
  opacity: 0.5;
  cursor: default;
}

.dt-fantasma {
  position: fixed;
  z-index: 100000;
  margin: 0;
  pointer-events: none;
  transform: scale(1.06);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.3);
}

.dt-solucion {
  font-size: 0.78rem;
  font-weight: 700;
  color: #166534;
}

/* Nota de ortografía: la respuesta contó como válida, pero se muestra cómo
   se escribe (libro.js notaOrtografiaLibro; Misión 1 "completar" y Misión 2). */
.completar-nota-ortografia {
  margin: 0.25rem 0 0 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: #92400e;
}

.completar-nota-ortografia:empty {
  display: none;
}

.completar-linea-nota {
  margin: 0 0.3rem;
  font-size: 0.74rem;
  font-weight: 700;
  color: #92400e;
  white-space: nowrap;
}

/* ---- Completar escribiendo en línea (Blanks) ---- */
.completar-linea-parrafo {
  line-height: 2.5;
  margin: 0 0 1rem 0;
  font-size: 0.98rem;
}

.completar-linea-input {
  font-family: inherit;
  font-size: 0.9rem;
  text-align: center;
  padding: 0.1rem 0.45rem;
  margin: 0 0.2rem;
  border: none;
  border-bottom: 2px solid var(--atx-accent-teal);
  border-radius: 4px 4px 0 0;
  background: rgba(45, 212, 191, 0.08);
  box-sizing: content-box;
}

.completar-linea-input:focus {
  outline: none;
  background: rgba(45, 212, 191, 0.18);
}

.completar-linea-input.completar-correcto {
  border-bottom-color: var(--atx-accent-green);
  background: #dcfce7;
  color: #166534;
  font-weight: 700;
}

.completar-linea-input.completar-incorrecto {
  border-bottom-color: #ef4444;
  background: #fee2e2;
  color: #991b1b;
}

/* ---- Ficha del constructor: se escribe DENTRO de los recuadros de la imagen
   (subtipo 'tabla', ver actividades-libro.js). Cada <input> va superpuesto con
   left/top/width/height en % de la imagen, así que escala con ella. ---- */
/* En pantallas estrechas la imagen conserva un ancho mínimo legible y se
   desplaza en horizontal dentro de su contenedor, sin desbordar la página. */
.ficha-imagen-scroll {
  width: 100%;
  overflow-x: auto;
  margin: 0.8rem 0 1rem;
  -webkit-overflow-scrolling: touch;
}

.ficha-imagen {
  position: relative;
  width: 100%;
  min-width: 640px;
  container-type: inline-size; /* permite dimensionar la letra en cqw (% del ancho de la imagen) */
}

/* Hoja de mediciones (subtipo 'mediciones'): imagen vertical, limitada de ancho
   y con los tiempos escritos más grandes y centrados. */
/* La hoja de mediciones ocupa TODO el ancho de la página (se ve más grande y
   clara); el texto de las casillas escala con ella (cqw). */
.ficha-imagen.mediciones-imagen {
  max-width: none;
  min-width: 0;
  margin: 0 auto;
}

.mediciones-imagen .ficha-input {
  text-align: center;
  font-size: 2.6cqw;
}

.ficha-rev-lista {
  margin: 0 0 0.5rem 1.2rem;
  padding: 0;
  font-size: 0.84rem;
  color: #7c2d12;
}

.ficha-imagen-fondo {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  user-select: none;
  pointer-events: none;
}

.ficha-input {
  position: absolute;
  box-sizing: border-box;
  min-width: 0;
  padding: 0 2%;
  border: 2px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #0f172a;
  font-family: inherit;
  font-size: 0.85rem; /* respaldo si el navegador no soporta cqw */
  font-size: 1.55cqw;
  font-weight: 600;
  text-align: center;
}

.ficha-input:focus {
  outline: none;
  border-color: var(--atx-accent-teal);
  background: rgba(236, 254, 255, 0.9);
}

.ficha-input.completar-correcto {
  border-color: var(--atx-accent-green);
  background: rgba(220, 252, 231, 0.95);
  color: #166534;
  font-weight: 800;
}

.ficha-input.completar-incorrecto {
  border-color: #ef4444;
  background: rgba(254, 226, 226, 0.95);
  color: #991b1b;
}

/* Panel de revisión de la ficha: hasta 3 tablas (ortografía, símbolos, datos
   del átomo) que solo aparecen si hacen falta (ver htmlRevisionFicha). */
.ficha-revision {
  margin: 0.2rem 0 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--atx-panel-border);
  border-radius: 12px;
  background: #fffbeb;
}

.ficha-revision h4 {
  margin: 0 0 0.6rem;
  font-size: 1rem;
}

.ficha-rev-bloque {
  margin-bottom: 1rem;
}

.ficha-rev-bloque h5 {
  margin: 0 0 0.25rem;
  font-size: 0.92rem;
  color: var(--atx-accent-teal-dark);
}

.ficha-rev-intro {
  margin: 0 0 0.4rem;
  font-size: 0.84rem;
  color: #92400e;
}

.ficha-rev-scroll {
  overflow-x: auto;
}

.ficha-rev-tabla {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 0.82rem;
  background: #ffffff;
}

.ficha-rev-tabla th,
.ficha-rev-tabla td {
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--atx-panel-border);
  text-align: left;
  vertical-align: top;
}

.ficha-rev-tabla th {
  background: #e0f2fe;
  color: #0c4a6e;
  font-weight: 800;
}

.ficha-rev-tabla td:first-child {
  width: 2.6rem;
  text-align: center;
  font-weight: 800;
}

.ficha-rev-tabla td strong {
  color: #166534;
}

.ficha-rev-ok {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #166534;
}
/* ---- Carrusel de imágenes (ImageSlider) ---- */
.carrusel-libro {
  max-width: 760px;
  margin: 0 auto 1rem auto;
}

/* Carrusel "grande": ocupa todo el ancho de la página (reglas del entregable). */
.carrusel-libro.carrusel-grande {
  max-width: none;
}

.carrusel-marco {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #0f172a;
  box-shadow: 0 6px 18px rgba(30, 27, 58, 0.18);
}

.carrusel-imagen {
  display: block;
  width: 100%;
  height: auto;
}

/* Transición entre diapositivas (ver moverCarruselLibro, actividades-libro.js):
   la actual sale hacia un lado y la nueva entra desde el contrario. El marco
   tiene overflow:hidden, así que el deslizamiento queda recortado. */
.carrusel-imagen.carrusel-sale-izq { animation: atxCarruselSaleIzq 0.18s ease-in both; }
.carrusel-imagen.carrusel-sale-der { animation: atxCarruselSaleDer 0.18s ease-in both; }
.carrusel-imagen.carrusel-entra-der { animation: atxCarruselEntraDer 0.3s ease-out both; }
.carrusel-imagen.carrusel-entra-izq { animation: atxCarruselEntraIzq 0.3s ease-out both; }

@keyframes atxCarruselSaleIzq {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-12%); }
}

@keyframes atxCarruselSaleDer {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(12%); }
}

@keyframes atxCarruselEntraDer {
  from { opacity: 0; transform: translateX(12%); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes atxCarruselEntraIzq {
  from { opacity: 0; transform: translateX(-12%); }
  to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .carrusel-imagen.carrusel-sale-izq,
  .carrusel-imagen.carrusel-sale-der,
  .carrusel-imagen.carrusel-entra-der,
  .carrusel-imagen.carrusel-entra-izq {
    animation: none;
  }
}

.carrusel-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.4rem;
  height: 2.4rem;
  border: none;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.65);
  color: #ffffff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.carrusel-flecha:hover {
  background: rgba(15, 23, 42, 0.85);
}

.carrusel-flecha-izq { left: 0.6rem; }
.carrusel-flecha-der { right: 0.6rem; }

/* Aviso al intentar avanzar sin haber visto todas las diapositivas (se oculta
   con oculto-modal; lo muestra paginaLibroSiguiente en libro.js). */
.carrusel-aviso {
  margin: 0.6rem auto 0;
  padding: 0.5rem 0.9rem;
  max-width: 760px;
  border-radius: 10px;
  background: #fef3c7;
  color: #92400e;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
}

.carrusel-pie {
  margin: 0.6rem 0 0.3rem 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--atx-text-muted);
}

.carrusel-puntos {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
}

.carrusel-punto {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--atx-panel-border);
  transition: background 0.2s ease, transform 0.2s ease;
}

.carrusel-punto.activo {
  background: var(--atx-accent-teal);
  transform: scale(1.3);
}

/* ---- Iframe responsive (IFrameEmbed) ---- */
.libro-iframe-contenedor {
  position: relative;
  width: 100%;
  min-height: 320px;
  border: 1px solid var(--atx-panel-border);
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
}

.libro-iframe-contenedor iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* "Escudo" transparente sobre el simulador: deja que la página se desplace con
   la rueda/gestos hasta que se hace clic para usarlo (ver activarIframeLibro). */
.iframe-escudo {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 0.8rem;
  background: transparent;
  cursor: pointer;
}

.iframe-escudo span {
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.78);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  pointer-events: none;
}

.libro-iframe-contenedor.iframe-activo .iframe-escudo {
  display: none;
}

.iframe-escudo-boton {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: none;
  padding: 0.25rem 0.6rem;
  border: none;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.78);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.libro-iframe-contenedor.iframe-activo .iframe-escudo-boton {
  display: block;
}

.libro-iframe-aviso {
  margin: 0.5rem 0 1rem 0;
  font-size: 0.8rem;
  color: var(--atx-text-muted);
}