/* ============================================================
   VISOR DE PDF -- componente reutilizable (visor-pdf.js)
   Un único documento incrustado (PDF.js sobre <canvas>), con su propia
   barra de zoom/paginación. Ver cabecera de visor-pdf.js para el motivo de
   dibujar en canvas en vez de enlazar el PDF directamente. Quién navega
   entre varios documentos (barra superior entre ejercicios, panel lateral,
   portada) es cosa de app.js/data/ejercicios.js, no de este componente.
   ============================================================ */
.cn-visor-pdf { margin: 8px 0 22px 0; }

.vp-intro { margin-bottom: 18px; }
.vp-intro h2 { margin: 0 0 6px 0; }
.vp-intro p { color: var(--color-muted); margin: 0; }

/* ---------- Visor ---------- */
.vp-visor {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.vp-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.vp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--brand-ink);
  cursor: pointer;
  transition: all var(--transition);
}
.vp-btn:hover { border-color: var(--color-interactive); color: var(--color-interactive); }
.vp-btn:disabled { opacity: 0.4; cursor: default; }

.vp-toolbar-separador {
  width: 1px;
  align-self: stretch;
  background: var(--color-border);
  margin: 2px 4px;
}

.vp-pagina-indicador {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--color-muted);
  white-space: nowrap;
  padding: 0 4px;
}

/* Contenedor con scroll PROPIO -- si el PDF se hace zoom y ya no cabe, hace
   scroll aquí dentro, nunca provoca scroll horizontal de toda la página
   (misma idea que .cn-tabla-wrap en content.css).
   A propósito NO es flex: con flex (incluso con flex-shrink:0/align-items:
   flex-start) el navegador sigue interfiriendo con el tamaño real de un
   <canvas> -- es un elemento reemplazado con relación de aspecto, y estirar o
   acotar cualquiera de sus dos ejes en un contenedor flex recalcula el otro
   para mantener la proporción, encogiendo el canvas en silencio y anulando el
   zoom. Con layout de bloque normal + text-align:center, el canvas (inline-
   block) conserva su tamaño real en píxeles tal cual lo fija visor-pdf.js, y
   overflow:auto hace scroll si no cabe -- ni la altura ni el ancho lo tocan. */
.vp-lienzo-scroll {
  overflow: auto;
  max-height: 78vh;
  min-height: 320px;
  padding: 16px;
  text-align: center;
  background: repeating-linear-gradient(
    45deg, rgba(27, 29, 58, 0.02), rgba(27, 29, 58, 0.02) 10px,
    transparent 10px, transparent 20px
  );
}

.vp-lienzo-estado {
  /* SIN "display: block" -- un <p> ya lo es por defecto, y forzarlo aquí
     pisaría con más especificidad el "display: none" que aplica el propio
     atributo [hidden] cuando visor-pdf.js oculta este texto tras cargar
     (bug real detectado en verificación: el aviso "Cargando…" se quedaba
     visible encima del PDF ya renderizado). */
  margin: 60px auto;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-muted);
}

/* ":not([hidden])" -- por el mismo motivo que el comentario de .vp-lienzo-estado: una regla de
   autor que fije "display" siempre gana sobre el "display:none" del atributo [hidden] del
   navegador (el origen de la regla importa antes que la especificidad). Sin este ":not()", el
   canvas se vería (vacío, en blanco) mientras el PDF todavía está cargando. */
.vp-canvas:not([hidden]) {
  display: inline-block;
  box-shadow: var(--shadow-figura, var(--shadow-card));
  background: #FFFFFF;
}