/* ============================================================
   VISOR PROPIO DE PDF · lavidbuenosaires.com
   Un solo visor para el aula (CME/CEL/Seminario), el cuadernillo,
   Casas de Milagros y el lector de la Editorial Rhema.

   Los colores salen de variables con valor por defecto (tema claro
   del aula). El lector de la Editorial, que vive en el tema oscuro
   de styles.css, agrega la clase `visor-oscuro` y redefine los tokens.
   ============================================================ */

.visor-pdf {
  --visor-bg: #E9ECF2;            /* fondo del área de páginas */
  --visor-bar-bg: #fff;
  --visor-fg: #152140;
  --visor-fg-soft: #4A5870;
  --visor-line: #E6E9F0;
  --visor-accent: #5E2E86;
  --visor-accent-2: #4BBA7C;
  --visor-btn-bg: #fff;
  --visor-page-shadow: 0 10px 24px -14px rgba(21, 33, 64, .45);
  --visor-radius: 16px;

  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 1px solid var(--visor-line);
  border-radius: var(--visor-radius);
  overflow: hidden;
  background: var(--visor-bg);
  color: var(--visor-fg);
  font-family: inherit;
  box-shadow: 0 10px 24px -20px rgba(21, 33, 64, .25);
  /* Nada se selecciona ni se arrastra desde el visor: no hay capa de
     texto (pdf.js pinta a canvas) y el canvas no se puede "guardar como". */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.visor-pdf.visor-oscuro {
  --visor-bg: #0A1B30;
  --visor-bar-bg: #0E2542;
  --visor-fg: #EFE9DD;
  --visor-fg-soft: #C9C2B4;
  --visor-line: rgba(239, 233, 221, .14);
  --visor-accent: #E8552E;
  --visor-accent-2: #F47C5A;
  --visor-btn-bg: rgba(22, 54, 92, .6);
  --visor-page-shadow: 0 24px 60px -20px rgba(0, 0, 0, .55);
  --visor-radius: 12px;
  box-shadow: none;
}

/* ---- barra ---------------------------------------------------- */
.visor-bar {
  position: relative;
  z-index: 4;                /* queda por encima del overlay de estado */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 8px 12px;
  background: var(--visor-bar-bg);
  border-bottom: 1px solid var(--visor-line);
  font-size: .82rem;
  color: var(--visor-fg-soft);
  min-width: 0;
}
.visor-titulo {
  flex: 1 1 160px;
  min-width: 0;
  font-weight: 700;
  color: var(--visor-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.visor-grupo { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.visor-bar button {
  border: 1px solid var(--visor-line);
  background: var(--visor-btn-bg);
  color: var(--visor-fg);
  border-radius: 8px;
  padding: .34em .62em;
  font-family: inherit;
  font-weight: 700;
  font-size: .82rem;
  line-height: 1.2;
  cursor: pointer;
  min-width: 2.1em;
  transition: border-color .15s, color .15s, background .15s;
}
.visor-bar button:hover:not([disabled]) { border-color: var(--visor-accent-2); color: var(--visor-accent-2); }
.visor-bar button:focus-visible { outline: 2.5px solid var(--visor-accent); outline-offset: 2px; }
.visor-bar button[disabled] { opacity: .45; cursor: default; }
.visor-bar button.on { border-color: var(--visor-accent); color: var(--visor-accent); }
.visor-pag-in {
  width: 3.4em;
  text-align: center;
  border: 1px solid var(--visor-line);
  border-radius: 8px;
  padding: .3em .2em;
  font-family: inherit;
  font-weight: 700;
  font-size: .82rem;
  color: var(--visor-fg);
  background: var(--visor-btn-bg);
  -moz-appearance: textfield;
  -webkit-user-select: text;
  user-select: text;
}
.visor-pag-in::-webkit-outer-spin-button, .visor-pag-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.visor-pag-in:focus { outline: none; border-color: var(--visor-accent); }
.visor-pag-tot { font-variant-numeric: tabular-nums; white-space: nowrap; }
.visor-zoom-lbl { min-width: 3.4em; text-align: center; font-variant-numeric: tabular-nums; }

/* ---- páginas -------------------------------------------------- */
.visor-scroller {
  position: relative;
  height: 680px;             /* la sobreescribe data-alto */
  min-height: 260px;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 14px 10px 24px;
  scroll-behavior: auto;     /* el salto del índice tiene que ser inmediato */
}
.visor-paginas { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.visor-pagina {
  position: relative;
  flex: none;
  background: #fff;
  box-shadow: var(--visor-page-shadow);
  border-radius: 3px;
  overflow: hidden;
  max-width: 100%;
}
.visor-pagina canvas { display: block; width: 100%; height: 100%; pointer-events: none; }
/* número tenue mientras la página todavía no se pintó */
.visor-pagina::before {
  content: attr(data-n);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(21, 33, 64, .18);
  font-size: 1.4rem; font-weight: 800;
}
.visor-pagina.pintada::before { display: none; }

/* ---- estados -------------------------------------------------- */
.visor-estado {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  background: var(--visor-bg);
  color: var(--visor-fg-soft);
  font-size: .9rem;
  z-index: 3;
}
.visor-estado[data-estado="listo"] { display: none; }
.visor-estado b { color: var(--visor-fg); }
.visor-estado button {
  border: none; cursor: pointer; font-family: inherit; font-weight: 700; font-size: .88rem;
  color: #fff; background: var(--visor-accent); border-radius: 999px; padding: .6em 1.3em;
}
.visor-spin {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--visor-line); border-top-color: var(--visor-accent);
  animation: visor-girar .8s linear infinite;
}
.visor-estado[data-estado="error"] .visor-spin,
.visor-estado[data-estado="vacio"] .visor-spin { display: none; }
@keyframes visor-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .visor-spin { animation-duration: 1.6s; } }
.visor-noscript { padding: 24px; text-align: center; }

/* ---- pantalla completa propia -------------------------------- */
.visor-pdf.visor-full {
  position: fixed; inset: 0; z-index: 9990;
  height: 100vh; height: 100dvh;
  max-height: 100vh; max-height: 100dvh;
  border: 0; border-radius: 0;
  box-shadow: none;
}
.visor-pdf.visor-full .visor-scroller { flex: 1 1 auto; height: auto !important; min-height: 0; }

/* ---- sólo al imprimir: nada del visor sale en papel ---------- */
.visor-print-msg { display: none; }
@media print {
  .visor-pdf > *:not(.visor-print-msg) { display: none !important; }
  .visor-pdf .visor-print-msg {
    display: block !important;
    padding: 24px; text-align: center; font-weight: 700;
    border: 1px dashed #888; border-radius: 12px;
  }
}

/* ---- móvil ---------------------------------------------------- */
@media (max-width: 560px) {
  .visor-bar { padding: 8px 8px; gap: 6px 4px; }
  .visor-titulo { flex-basis: 100%; }
  .visor-bar button { padding: .3em .42em; font-size: .78rem; min-width: 1.9em; }
  .visor-pag-in { width: 2.8em; }
  .visor-zoom-lbl { display: none; }   /* el % no entra: quedan − y + */
  .visor-grupo:last-child { margin-left: auto; }
  .visor-scroller { padding: 10px 6px 18px; }
  .visor-btn-txt { display: none; }    /* en pantallas chicas quedan los íconos */
}