/*
 * lector.css — lector de publicaciones del portal (lector.js). Componente local pv-lector-*, candidato al UIKit como
 * .se-reader (docs/avisos-uikit.md §9). Solo tokens del kit: claro y oscuro salen de ahí. Se carga solo en las páginas
 * que muestran el lector (detalle de un libro de Publicaciones y «Leer» de un micrositio).
 *
 * Partes: anfitrión (hueco mientras llegan los metadatos y visor de respaldo) · barra · cuerpo (miniaturas | escena |
 * búsqueda) · pie (avance). Estados: is-doble / is-sencilla (por ancho), is-minis, is-busca, is-completa.
 */

.pv-lector-anfitrion{
  --pv-lector-alto:min(72vh,760px);
  --pv-lector-mesa:color-mix(in oklab,var(--se-surface-bg),var(--se-border) 45%);
  margin:1.5rem 0 1rem;
}
@media (max-width:720px){.pv-lector-anfitrion{--pv-lector-alto:min(64svh,560px)}}

/* Sin JavaScript: solo el visor de PDF. Con JavaScript: el hueco del lector hasta que llegan los metadatos; si el
   servidor no puede dibujar el PDF, vuelve el visor (.is-respaldo). */
.pv-lector-espera{display:none}
.pv-js .pv-lector-anfitrion:not(.is-listo):not(.is-respaldo) .pv-lector-espera{
  display:grid;place-items:center;height:calc(var(--pv-lector-alto) + 6.75rem);
  background:var(--pv-lector-mesa);border:1px solid var(--se-border);border-radius:var(--se-radius-xl);
}
.pv-lector-espera-hoja{
  height:calc(100% - 3rem);aspect-ratio:210/297;max-width:90%;box-shadow:var(--se-shadow-key);
  background:linear-gradient(90deg,var(--se-skeleton-bg) 25%,var(--se-skeleton-shine) 50%,var(--se-skeleton-bg) 75%) 0 0/200% 100%;
  animation:pv-lector-brillo 1.4s linear infinite;
}
.pv-js .pv-lector-anfitrion:not(.is-respaldo) .pv-lector-respaldo{display:none}

/* ── raíz ── */
.pv-lector{
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;background:var(--pv-lector-mesa);color:var(--se-fg-body);
  border:1px solid var(--se-border);border-radius:var(--se-radius-xl);overflow:hidden;position:relative;
}
.pv-lector:focus{outline:none}
.pv-lector:focus-visible{box-shadow:var(--se-focus-ring)}
.pv-lector.is-sencilla .pv-lector-solo-doble,.pv-lector.is-doble .pv-lector-solo-sencilla{display:none !important}

/* ── barra ── */
.pv-lector-barra{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;padding:.5rem .75rem;
  background:var(--se-card-bg);border-bottom:1px solid var(--se-border);
}
.pv-lector-barra-tit{display:flex;align-items:center;gap:.6rem;flex:1 1 14rem;min-width:0}
.pv-lector-cab{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.pv-lector-tit{font-weight:var(--se-weight-bold);color:var(--se-fg-strong);font-size:var(--se-text-md);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-lector-sub{font-size:var(--se-text-sm);color:var(--se-fg-meta);font-variant-numeric:tabular-nums}
.pv-lector-barra-acc{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.pv-lector-ir{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--se-text-sm);color:var(--se-fg-meta);font-variant-numeric:tabular-nums;margin:0}
.pv-lector-ir-campo{
  width:3.4rem;min-height:2.15rem;padding:0 .35rem;text-align:center;font:inherit;font-weight:var(--se-weight-bold);
  color:var(--se-fg-strong);background:var(--se-card-bg);border:1px solid var(--se-border-form);border-radius:var(--se-radius-lg);
}
.pv-lector-ir-campo:focus-visible,.pv-lector-campo:focus-visible{outline:none;border-color:var(--se-primary);box-shadow:var(--se-focus-ring)}

.pv-lector-btn{
  appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  min-height:2.4rem;min-width:2.4rem;padding:0 .75rem;border:1px solid var(--se-border);border-radius:var(--se-radius-lg);
  background:var(--se-card-bg);color:var(--se-fg-strong);font:inherit;font-size:var(--se-text-md);font-weight:var(--se-weight-semibold);
  line-height:1.2;cursor:pointer;text-decoration:none;white-space:nowrap;transition:border-color var(--se-transition-fast),color var(--se-transition-fast);
}
.pv-lector-btn:not(.pv-lector-btn--texto){padding:0}
.pv-lector-btn:hover{border-color:var(--se-primary);color:var(--se-primary-text)}
.pv-lector-btn:focus-visible{outline:none;box-shadow:var(--se-focus-ring)}
.pv-lector-btn[aria-expanded="true"]{background:var(--se-primary-subtle);border-color:var(--se-primary);color:var(--se-primary-text)}
.pv-lector-btn[disabled]{opacity:.4;cursor:default;border-color:var(--se-border);color:var(--se-fg-strong)}
.pv-lector-btn--brand{background:var(--se-primary-fill);border-color:var(--se-primary-fill);color:var(--se-on-primary)}
.pv-lector-btn--brand:hover{color:var(--se-on-primary);background:var(--se-primary-hover);border-color:var(--se-primary-hover)}
.pv-lector-btn[hidden]{display:none}

/* ── cuerpo: miniaturas | escena | búsqueda ── */
.pv-lector-cuerpo{display:grid;grid-template-columns:auto minmax(0,1fr) auto;height:var(--pv-lector-alto);min-height:0;position:relative}
.pv-lector-panel{background:var(--se-card-bg);overflow:auto;overscroll-behavior:contain;min-height:0}
.pv-lector-panel[hidden]{display:none}
.pv-lector-minis{grid-column:1;width:15rem;border-right:1px solid var(--se-border)}
.pv-lector-busca{grid-column:3;width:19rem;border-left:1px solid var(--se-border);padding:.9rem}
.pv-lector-escena{grid-column:2;grid-row:1}

.pv-lector-minis-lista{display:grid;gap:.75rem;padding:.75rem;align-content:start}
.pv-lector-mini{
  appearance:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;align-items:end;padding:.3rem;
  background:none;border:2px solid transparent;border-radius:var(--se-radius-lg);cursor:pointer;text-align:center;font:inherit;
}
.pv-lector-mini.is-sola{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.pv-lector-mini.is-sola .pv-lector-mini-hoja:first-child{grid-column:2}
.pv-lector-mini:hover{border-color:var(--se-border)}
.pv-lector-mini:focus-visible{outline:none;box-shadow:var(--se-focus-ring)}
.pv-lector-mini[aria-current="true"]{border-color:var(--se-primary);background:var(--se-primary-subtle)}
.pv-lector-mini-hoja{display:block;aspect-ratio:var(--pv-hoja-ar,0.707);background:var(--se-skeleton-bg);box-shadow:var(--se-shadow-sm);overflow:hidden}
.pv-lector-mini-hoja img{display:block;width:100%;height:100%;object-fit:cover}
.pv-lector-mini small{grid-column:1/-1;font-size:var(--se-text-sm);color:var(--se-fg-meta);font-variant-numeric:tabular-nums;padding-top:.2rem}
.pv-lector-mini[aria-current="true"] small{color:var(--se-primary-text);font-weight:var(--se-weight-bold)}

/* ── escena y pliego ── */
.pv-lector-escena{
  position:relative;display:grid;place-items:center;padding:1.1rem 4rem;overflow:hidden;min-height:0;
  touch-action:pan-y;user-select:none;container-type:size;
}
/* El pliego mide lo que cabe en la escena con la proporción de sus hojas: sin saltos cuando llegan las imágenes. */
.pv-lector-pliego{
  display:flex;width:min(100cqw,calc(100cqh * var(--pv-pliego-ar,0.707)));height:min(100cqh,calc(100cqw / var(--pv-pliego-ar,0.707)));
  box-shadow:var(--se-shadow-key);transition:opacity var(--se-transition-fast),transform var(--se-transition-fast);
}
.pv-lector-pliego.is-va{opacity:0;transform:translateX(-14px)}
.pv-lector-pliego.is-vuelve{opacity:0;transform:translateX(14px)}
.pv-lector-hoja{
  position:relative;margin:0;flex:calc(var(--pv-hoja-ar,0.707) * 100) 1 0;min-width:0;height:100%;overflow:hidden;
  /* Página que se está dibujando: el hueco de la hoja con un brillo que pasa. */
  background:linear-gradient(90deg,var(--se-skeleton-bg) 25%,var(--se-skeleton-shine) 50%,var(--se-skeleton-bg) 75%) 0 0/200% 100%;
  animation:pv-lector-brillo 1.4s linear infinite;
}
.pv-lector-hoja.is-lista{animation:none;background:var(--se-card-bg)}
.pv-lector-img{display:block;width:100%;height:100%;object-fit:fill;opacity:0;transition:opacity var(--se-transition-fast)}
.pv-lector-hoja.is-lista .pv-lector-img{opacity:1}
/* Lomo: una sombra suave en el borde interior de cada hoja del pliego. */
.pv-lector-pliego:not(.is-sola) .pv-lector-hoja::after{content:"";position:absolute;inset:0;pointer-events:none}
.pv-lector-pliego:not(.is-sola) .pv-lector-hoja:first-child::after{background:linear-gradient(to left,rgba(var(--se-shadow-rgb),.16),transparent 6%)}
.pv-lector-pliego:not(.is-sola) .pv-lector-hoja:last-child::after{background:linear-gradient(to right,rgba(var(--se-shadow-rgb),.2),transparent 7%)}
.pv-lector-hoja-error{
  position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:.75rem;padding:1rem;text-align:center;
  background:var(--se-card-bg);color:var(--se-fg-body);font-size:var(--se-text-md);animation:none;
}
.pv-lector-hoja:has(.pv-lector-hoja-error){animation:none}
.pv-lector-hoja-error strong{color:var(--se-fg-strong)}
@keyframes pv-lector-brillo{to{background-position:-200% 0}}

.pv-lector-flecha{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:2.75rem;height:2.75rem;border-radius:var(--se-radius-circle);
  background:color-mix(in oklab,var(--se-card-bg) 92%,transparent);
}
.pv-lector-flecha--ant{left:.6rem}
.pv-lector-flecha--sig{right:.6rem}
.pv-lector-desliza{
  position:absolute;left:50%;bottom:.75rem;transform:translateX(-50%);padding:.25rem .7rem;border-radius:var(--se-radius-pill);
  background:var(--se-backdrop-bg);color:var(--se-on-primary);font-size:var(--se-text-sm);font-weight:var(--se-weight-semibold);
  pointer-events:none;opacity:0;transition:opacity var(--se-transition-smooth);white-space:nowrap;
}
.pv-lector-desliza.is-visible{opacity:1}

/* ── búsqueda ── */
.pv-lector-busca-cab{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.6rem}
.pv-lector-busca-tit{font-weight:var(--se-weight-bold);color:var(--se-fg-strong);font-size:var(--se-text-md);margin:0}
.pv-lector-cerrar{border-color:transparent}
.pv-lector-buscador{display:flex;gap:.4rem;margin:0}
.pv-lector-campo{
  flex:1;min-width:0;min-height:2.4rem;padding:0 .65rem;font:inherit;font-size:var(--se-text-md);color:var(--se-fg-strong);
  background:var(--se-card-bg);border:1px solid var(--se-border-form);border-radius:var(--se-radius-lg);
}
.pv-lector-res-cuenta{margin:.75rem 0 .5rem;font-size:var(--se-text-sm);color:var(--se-fg-meta)}
.pv-lector-res{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.pv-lector-res-btn{
  appearance:none;display:grid;gap:.15rem;width:100%;padding:.55rem .65rem;text-align:left;font:inherit;font-size:var(--se-text-sm);
  line-height:1.45;color:var(--se-fg-body);background:var(--se-card-bg);border:1px solid var(--se-border);border-radius:var(--se-radius-lg);cursor:pointer;
}
.pv-lector-res-btn:hover{border-color:var(--se-primary)}
.pv-lector-res-btn:focus-visible{outline:none;box-shadow:var(--se-focus-ring)}
.pv-lector-res-btn strong{color:var(--se-fg-strong);font-size:var(--se-text-sm)}
.pv-lector-res mark{padding:0 1px;border-radius:var(--se-radius-md);background:var(--se-warning-soft);color:inherit;font-weight:var(--se-weight-semibold)}

/* ── pie ── */
.pv-lector-pie{
  display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;background:var(--se-card-bg);border-top:1px solid var(--se-border);
  font-size:var(--se-text-sm);color:var(--se-fg-meta);font-variant-numeric:tabular-nums;
}
.pv-lector-avance{flex:1;height:4px;border-radius:var(--se-radius-md);background:var(--se-border);overflow:hidden}
.pv-lector-avance i{display:block;height:100%;width:0;background:var(--se-primary);transition:width var(--se-transition-base)}
.pv-lector-movil-nav{display:inline-flex;align-items:center;gap:.5rem}

/* ── angosto: una página, paneles como hoja inferior ── */
.pv-lector.is-sencilla .pv-lector-escena{padding:.75rem .5rem}
.pv-lector.is-sencilla .pv-lector-flecha{display:none}
/* Barra en dos renglones: miniaturas · título · buscar, y debajo «Abrir el PDF» y «Descargar PDF · peso», siempre visibles. */
.pv-lector.is-sencilla .pv-lector-barra{gap:.5rem}
.pv-lector.is-sencilla .pv-lector-barra-acc{display:contents}
.pv-lector.is-sencilla .pv-lector-barra-tit{flex:1 1 calc(100% - 3rem)}
.pv-lector.is-sencilla .pv-lector-btn--texto{flex:0 0 auto;font-size:var(--se-text-sm);padding:0 .6rem}
.pv-lector.is-sencilla .pv-lector-btn--brand{flex:1 1 auto}
.pv-lector.is-sencilla .pv-lector-panel{
  position:absolute;left:0;right:0;bottom:0;width:auto;height:66%;z-index:3;border:0;border-top:1px solid var(--se-border);
  grid-column:1/-1;grid-row:1;
  box-shadow:var(--se-shadow-overlay);
}
.pv-lector.is-sencilla .pv-lector-minis-lista{grid-template-columns:repeat(3,minmax(0,1fr))}
.pv-lector.is-sencilla .pv-lector-mini{grid-template-columns:minmax(0,1fr)}
.pv-lector.is-sencilla .pv-lector-pie{justify-content:space-between}
.pv-lector.is-sencilla .pv-lector-avance{order:-1;flex:0 0 100%;margin:-.1rem 0 .1rem}
.pv-lector.is-sencilla .pv-lector-pie{flex-wrap:wrap;justify-content:center}

/* ── pantalla completa ── */
.pv-lector:fullscreen{border:0;border-radius:0;height:100vh;height:100dvh;grid-template-rows:auto minmax(0,1fr) auto}
.pv-lector:fullscreen .pv-lector-cuerpo{height:auto}

@media (prefers-reduced-motion:reduce){
  .pv-lector-pliego,.pv-lector-img,.pv-lector-avance i,.pv-lector-desliza{transition:none}
  .pv-lector-hoja,.pv-lector-espera-hoja{animation:none}
}

/* ── detalle del expediente con lector: el lector a todo lo ancho; los datos debajo ── */
.pv-detail--lector{grid-template-columns:minmax(0,1fr)}
.pv-detail--lector .pv-aside{position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));align-items:start}

/* ── página «Leer» de un micrositio ── */
.pv-lector-pagina{padding-top:1.75rem;padding-bottom:2.5rem}
.pv-lector-pagina-tit{margin:0;font-size:var(--se-text-2xl);font-weight:var(--se-weight-xbold);color:var(--se-fg-strong);letter-spacing:-.02em;line-height:var(--se-leading-tight);text-wrap:balance}
.pv-lector-pagina-desc{margin:.5rem 0 0;max-width:var(--se-measure);color:var(--se-fg-body)}
.pv-lector-pagina-volver{margin:1rem 0 0;font-size:var(--se-text-md)}
.pv-lector-pagina-volver a{color:var(--se-primary-text);font-weight:var(--se-weight-semibold)}