/* ═══════════════════════════════════════════════════════════
   PDF-READER.CSS — Lector integrado de artículos (PDF.js)
   ═══════════════════════════════════════════════════════════
   Overlay de pantalla completa, inyectado por js/pdf-reader.js
   sobre articulos.html. Reutiliza tokens de css/main.css
   (--gold, --anchor, --font-display, --ease, etc.) — no
   redefine ninguno. Completamente aislado: ningún selector de
   aquí afecta a index.html, agendar.html ni al resto del sitio.
   ═══════════════════════════════════════════════════════════ */

.pdf-reader-overlay {
  position: fixed; inset: 0; z-index: 2500;
  display: none;
  flex-direction: column;
  background: rgba(8, 12, 20, 0.97);
  opacity: 0;
  transition: opacity 0.32s var(--ease);
}
.pdf-reader-overlay.open { display: flex; }
.pdf-reader-overlay.visible { opacity: 1; }

/* ── Barra superior — identidad del documento + controles de vista ──
   Se oculta/asoma sola (ver .controls-hidden más abajo): un
   translateY + opacity, no display, para que la transición sea
   suave y para que pointer-events:none baste sin desmontar nada. */
.pdf-reader-topbar {
  flex-shrink: 0;
  height: 64px; padding: 0 1.1rem;
  display: flex; align-items: center; gap: 1rem;
  background: rgba(15, 27, 45, 0.82);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--anchor-border);
  transition: transform 0.32s var(--ease), opacity 0.32s var(--ease);
}
.pdf-reader-doc-info { min-width: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 0.15rem; }
.pdf-reader-category {
  font-size: 0.63rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold-bright);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pdf-reader-title {
  font-family: var(--font-display); font-size: 0.98rem; color: var(--anchor-text); font-weight: 400;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pdf-reader-controls { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

/* ── Barra de progreso de lectura — hilo dorado muy fino, discreto ── */
.pdf-reader-progress { height: 2px; flex-shrink: 0; background: rgba(250, 248, 243, 0.08); }
.pdf-reader-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
  transition: width 0.4s var(--ease);
}

/* ── Botones — área táctil cómoda (≥44px) para todos; los de mayor
   prioridad (zoom, pantalla completa, cerrar) llevan además un fondo
   e ícono con más contraste de forma permanente, no solo al pasar el
   cursor — en móvil no existe :hover, así que depender solo de eso
   dejaba esos botones prácticamente invisibles hasta tocarlos. Los
   secundarios (compartir) se quedan con el estilo discreto de antes. ── */
.pdf-reader-btn {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; color: var(--anchor-text-dim);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.pdf-reader-btn svg { width: 20px; height: 20px; }
.pdf-reader-btn:hover:not(:disabled) { background: rgba(201, 166, 107, 0.14); color: var(--gold-bright); }
.pdf-reader-btn:active:not(:disabled) { transform: scale(0.92); }
.pdf-reader-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.pdf-reader-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pdf-reader-btn[aria-expanded="true"] { background: rgba(201, 166, 107, 0.16); color: var(--gold-bright); }

/* Acciones principales: siempre visibles con fondo + contraste propios. */
.pdf-reader-btn--prominent {
  background: rgba(250, 248, 243, 0.07);
  border-color: rgba(250, 248, 243, 0.12);
  color: var(--anchor-text);
}
.pdf-reader-btn--prominent:hover:not(:disabled) { background: rgba(201, 166, 107, 0.2); border-color: rgba(201, 166, 107, 0.35); color: var(--gold-bright); }
.pdf-reader-btn--prominent:disabled { background: rgba(250, 248, 243, 0.03); border-color: rgba(250, 248, 243, 0.06); }

.pdf-reader-btn--close.pdf-reader-btn--prominent:hover:not(:disabled) { background: rgba(222, 100, 90, 0.18); border-color: rgba(222, 100, 90, 0.35); color: #e88478; }

/* ── Compartir — botón + menú flotante propio ── */
.pdf-reader-share-wrap { position: relative; }
.pdf-reader-share-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 20;
  min-width: 190px; padding: 0.4rem;
  background: rgba(20, 32, 50, 0.98);
  border: 1px solid var(--anchor-border); border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  display: flex; flex-direction: column; gap: 0.1rem;
  opacity: 0; transform: translateY(-6px) scale(0.98); pointer-events: none;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}
.pdf-reader-share-menu.open { opacity: 1; transform: none; pointer-events: auto; }
.pdf-reader-share-item {
  display: flex; align-items: center; gap: 0.7rem; width: 100%;
  padding: 0.55rem 0.7rem; border-radius: 6px; background: transparent; border: none;
  color: var(--anchor-text-dim); font-family: var(--font-body); font-size: 0.82rem; text-align: left;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.pdf-reader-share-item svg { width: 17px; height: 17px; flex-shrink: 0; }
.pdf-reader-share-item:hover { background: rgba(201, 166, 107, 0.12); color: var(--gold-bright); }
.pdf-reader-share-item.copied { color: var(--gold-bright); }

/* ── Ocultamiento automático de las barras — ver showControls()/
   hideControls() en js/pdf-reader.js. Se anima con transform (no con
   display), así la reaparición es instantánea y suave; pointer-events
   se corta mientras están ocultas para que no capturen toques ni foco
   de ratón por encima del documento. La barra de progreso NO se
   incluye aquí a propósito: es solo un hilo de 2px, no interrumpe la
   lectura, y sirve como referencia incluso con los controles ocultos. */
.pdf-reader-overlay.controls-hidden .pdf-reader-topbar {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
.pdf-reader-overlay.controls-hidden .pdf-reader-bottombar {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .pdf-reader-topbar, .pdf-reader-bottombar { transition: none; }
}

/* ── Aviso de primer uso — un toast discreto, no un tutorial modal.
   Ver maybeShowHint() en js/pdf-reader.js: aparece una sola vez por
   navegador (localStorage) y se retira solo. ── */
.pdf-reader-hint {
  position: absolute; top: 74px; left: 50%; z-index: 15;
  transform: translate(-50%, -8px);
  max-width: min(86vw, 360px);
  padding: 0.6rem 1rem;
  background: rgba(20, 32, 50, 0.96);
  border: 1px solid var(--anchor-border);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  color: var(--anchor-text-dim);
  font-family: var(--font-body); font-size: 0.8rem; line-height: 1.4; text-align: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.pdf-reader-hint.visible { opacity: 1; transform: translate(-50%, 0); }

/* ── Área del documento ── */
.pdf-reader-viewport {
  flex: 1; min-height: 0; overflow: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1.6rem;
  touch-action: pan-x pan-y; /* permite paneo nativo pero bloquea el pinch-zoom nativo del navegador */
}
/* "safe center" evita que, con overflow y zoom, el navegador impida
   hacer scroll hasta los bordes superior/izquierdo del documento
   ampliado. Se declara DESPUÉS del centrado normal a propósito: si el
   navegador no soporta la palabra clave "safe", ignora la línea (valor
   inválido) y conserva el centrado normal ya declarado arriba. */
.pdf-reader-viewport { align-items: safe center; justify-content: safe center; }

.pdf-reader-canvas-wrap { position: relative; flex-shrink: 0; }

/* Dos canvases apilados en el mismo hueco: en reposo solo uno es
   visible (el otro lleva .layer-hidden). Durante un giro de página el
   saliente se oculta al instante y la entrante queda visible de
   inmediato debajo del "curl stage" (ver más abajo) — ninguno de los
   dos anima su propio transform/opacity para el giro; lo que se ve
   moverse son las hojas del curl. */
.pdf-reader-canvas {
  position: absolute; top: 0; left: 0;
  display: block; background: #fff; border-radius: 3px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45), 0 2px 10px rgba(0,0,0,0.3);
  transform-origin: center center;
  transition: transform 0.52s var(--ease), opacity 0.45s var(--ease);
  z-index: 1;
  backface-visibility: hidden;
}
.pdf-reader-canvas.layer-hidden { opacity: 0; pointer-events: none; z-index: 0; }

/* Sombra ambiental — se asoma solo mientras se pasa la página, un
   oscurecimiento muy sutil de todo el hueco además de la sombra
   dinámica propia del curl (.pdf-curl-shadow, más abajo). */
.pdf-reader-canvas-wrap::after {
  content: ''; position: absolute; inset: 0; border-radius: 3px; pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, rgba(0,0,0,0.14), transparent 35%, transparent 65%, rgba(0,0,0,0.14));
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.pdf-reader-canvas-wrap.turning::after { opacity: 1; }

.pdf-reader-canvas-wrap.pinching .pdf-reader-canvas:not(.layer-hidden) { transition: none; }

/* ═══════════════════════════════════════════════════════════
   EFECTO DE HOJA (page curl) — deformación continua vía WebGL
   ═══════════════════════════════════════════════════════════
   #pdfr-curl-gl es el <canvas> WebGL donde se dibuja la hoja
   deformándose como una malla continua (ver playPageCurl() en
   js/pdf-reader.js) — no hay elementos DOM por segmento, así que no
   hay bordes ni capas de composición que puedan delatarse como tiras.
   Permanece oculto (display:none) salvo mientras dura un giro. La
   sombra del pliegue es el único elemento auxiliar: una banda ancha y
   difuminada que JS reposiciona cuadro a cuadro seguiendo el punto de
   mayor curvatura — sin transición CSS propia, para no ir a la zaga
   de las actualizaciones por frame. */
.pdf-curl-gl {
  position: absolute; inset: 0; z-index: 4;
  display: none;
  pointer-events: none;
}

.pdf-curl-shadow {
  position: absolute; top: 0; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.32) 50%, transparent);
  filter: blur(10px);
  opacity: 0; pointer-events: none;
  z-index: 3;
}

/* ── Entrada elegante — el documento aparece con una leve escala, no de golpe ── */
.pdf-reader-canvas-wrap {
  opacity: 0; transform: scale(0.97);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  transition-delay: 0.05s;
}
.pdf-reader-overlay.visible .pdf-reader-canvas-wrap { opacity: 1; transform: none; }

/* ── CTA final — solo en la última página, integrada como cierre
   editorial del artículo, no como un banner superpuesto. Reutiliza
   .btn.btn-gold de css/main.css: el mismo botón "Agendar cita" que
   ya aparece en el resto del sitio. ── */
.pdf-reader-cta {
  width: 100%; max-width: 480px; margin: 0 auto; flex-shrink: 0;
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  pointer-events: none;
}
.pdf-reader-cta.visible { opacity: 1; transform: none; pointer-events: auto; }
.pdf-reader-cta-inner {
  text-align: center; padding: 2.6rem 1.6rem 0.4rem;
  margin-top: 1.6rem;
  border-top: 1px solid rgba(250, 248, 243, 0.14);
  /* Halo dorado muy sutil: marca este bloque como el cierre editorial
     del artículo sin convertirlo en un banner — se nota, no se impone. */
  background: radial-gradient(ellipse 260px 170px at 50% 0%, rgba(201, 166, 107, 0.09), transparent 72%);
}
.pdf-reader-cta-kicker {
  font-size: 0.63rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold-bright);
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.pdf-reader-cta-kicker::before {
  content: ''; width: 22px; height: 1px; background: var(--gold);
}
.pdf-reader-cta-inner h3 {
  color: var(--anchor-text); font-weight: 300; font-size: 1.55rem; line-height: 1.3;
  margin: 0.7rem 0 0.75rem;
}
.pdf-reader-cta-inner p {
  color: var(--anchor-text-dim); font-size: 0.92rem; line-height: 1.75;
  max-width: 36ch; margin: 0 auto 1.5rem;
}
.pdf-reader-cta-inner .btn {
  margin-bottom: 2.2rem;
  padding: 1.05rem 2.6rem;
  letter-spacing: 0.08em;
}

/* ── Barra inferior — paginación, el gesto central de "revista" ── */
.pdf-reader-bottombar {
  flex-shrink: 0; height: 64px;
  display: flex; align-items: center; justify-content: center; gap: 1.1rem;
  background: rgba(15, 27, 45, 0.72);
  border-top: 1px solid var(--anchor-border);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.pdf-reader-page-indicator {
  font-family: var(--font-body); font-size: 0.82rem; letter-spacing: 0.04em;
  color: var(--anchor-text-dim); min-width: 4.2em; text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Prev/Siguiente pasan de círculo-solo-ícono a píldora ícono+texto,
   tal como pide el formato "← Anterior | 03 / 08 | Siguiente →". El
   selector compuesto (dos clases) gana por especificidad a la regla
   base .pdf-reader-btn sin depender del orden de las reglas. */
.pdf-reader-btn.pdf-reader-btn--nav {
  width: auto; height: 44px; padding: 0 1.15rem; border-radius: 22px;
  gap: 0.55rem; font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0.02em; font-weight: 500;
}
.pdf-reader-btn.pdf-reader-btn--nav .pdf-reader-btn-icon { display: flex; }
.pdf-reader-btn.pdf-reader-btn--nav .pdf-reader-btn-icon svg { width: 16px; height: 16px; }
.pdf-reader-btn.pdf-reader-btn--nav:active:not(:disabled) { transform: scale(0.96); }

/* ── Carga — spinner discreto, solo si el render tarda más de un instante ── */
.pdf-reader-loading {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s var(--ease);
}
.pdf-reader-loading.visible { opacity: 1; }
.pdf-reader-spinner {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2.5px solid rgba(222, 192, 138, 0.22);
  border-top-color: var(--gold-bright);
  animation: pdf-reader-spin 0.85s linear infinite;
}
@keyframes pdf-reader-spin { to { transform: rotate(360deg); } }

/* ── Estado de error — mensaje editorial, no un error crudo de navegador ── */
.pdf-reader-error {
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.1rem; text-align: center; max-width: 380px; margin: 0 auto; padding: 2rem;
}
.pdf-reader-error.visible { display: flex; }
.pdf-reader-error .lamp { width: 34px; height: 34px; opacity: 0.55; }
.pdf-reader-error h3 { color: var(--anchor-text); font-weight: 400; font-size: 1.3rem; }
.pdf-reader-error p { color: var(--anchor-text-dim); font-size: 0.94rem; line-height: 1.75; }
.pdf-reader-error .btn { margin-top: 0.3rem; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  .pdf-reader-topbar { height: 58px; padding: 0 0.7rem; gap: 0.5rem; }
  .pdf-reader-title { font-size: 0.88rem; }
  /* En móvil los botones crecen respecto a desktop, no al revés: es
     la superficie que más se toca con el pulgar. */
  .pdf-reader-controls { gap: 0.4rem; }
  .pdf-reader-btn { width: 48px; height: 48px; }
  .pdf-reader-btn svg { width: 21px; height: 21px; }
  .pdf-reader-hint { top: 66px; font-size: 0.78rem; }
  .pdf-reader-viewport { padding: 0.9rem; }
  .pdf-reader-bottombar { height: 64px; gap: 0.6rem; }
  .pdf-reader-btn.pdf-reader-btn--nav { height: 48px; padding: 0 1rem; font-size: 0.74rem; }
  .pdf-reader-page-indicator { font-size: 0.78rem; min-width: 3.6em; }
  .pdf-reader-share-menu { right: -6px; min-width: 178px; }
  .pdf-reader-cta-inner h3 { font-size: 1.32rem; }
}

/* En pantallas muy angostas, la categoría del documento se oculta
   (el título ya es lo esencial) para no apretar los controles, y los
   botones de navegación vuelven a ser círculos solo-ícono (con
   aria-label ya presente) para no competir por espacio. */
@media (max-width: 420px) {
  .pdf-reader-category { display: none; }
}
@media (max-width: 380px) {
  .pdf-reader-controls { gap: 0.32rem; }
  .pdf-reader-btn-label { display: none; }
  .pdf-reader-btn.pdf-reader-btn--nav { width: 48px; height: 48px; padding: 0; border-radius: 50%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .pdf-reader-overlay, .pdf-reader-canvas-wrap, .pdf-reader-canvas, .pdf-reader-loading,
  .pdf-reader-cta, .pdf-reader-progress-fill, .pdf-reader-share-menu { transition: none; }
  .pdf-reader-spinner { animation-duration: 1.6s; }
}
/* El efecto de hoja en sí (playPageCurl) ni siquiera se invoca cuando
   prefers-reduced-motion está activo — turnToPage() usa la vía de
   repintado directo sin animación, así que #pdfr-curl-gl no necesita
   ninguna regla aquí. */