/* ==========================================================================
   Biblioteca Digital - catalogo publico, ficha individual y lector PDF
   Identidad visual CEMER (verde institucional + dorado). Scopes:
   .library-page (catalogo), .library-detail-page (ficha), .pdf-reader (lector)
   ========================================================================== */

.library-page,
.library-detail-page {
  --library-green-950: #003f2f;
  --library-green-900: #00563f;
  --library-green-700: #0f6b49;
  --library-green-500: #27965b;
  --library-green-100: #e7f3ec;
  --library-gold: #c7a33c;
  --library-navy: #17233d;
  --library-bg: #f4f8f5;
  --library-surface: #ffffff;
  --library-border: #dce7e1;
  --library-text: #172033;
  --library-muted: #627080;
  --library-radius-lg: 20px;
  --library-radius-md: 16px;
  --library-radius-sm: 8px;
  --library-shadow: 0 2px 10px rgba(23, 35, 61, 0.08);
  --library-shadow-lg: 0 12px 32px rgba(0, 63, 47, 0.14);

  background: var(--library-bg);
  color: var(--library-text);
  min-height: 100vh;
}

.library-page *, .library-detail-page * { box-sizing: border-box; }

.library-container {
  width: min(100% - 32px, 1240px);
  margin-inline: auto;
}

/* ==========================================================================
   FASE 3 — Hero del catalogo
   ========================================================================== */

.library-hero {
  padding: 150px 0 48px;
  background:
    radial-gradient(120% 160% at 100% 0%, rgba(199, 163, 60, 0.16), transparent 55%),
    linear-gradient(155deg, var(--library-green-700), var(--library-green-950));
  color: #ffffff;
}

.library-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

.library-eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #f2e6c2;
  font-family: var(--font-cinzel, serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.library-hero__title {
  margin: 16px 0 14px;
  color: #ffffff;
  font-family: var(--font-playfair, Georgia, serif);
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  font-weight: 700;
  line-height: 1.12;
}

.library-hero__text {
  margin: 0 0 22px;
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1rem;
  line-height: 1.6;
}

.library-hero__metrics {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.library-metric__value {
  display: block;
  color: var(--library-gold);
  font-family: var(--font-playfair, Georgia, serif);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
}

.library-metric__label {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
}

/* Buscador principal */
.library-hero__search {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--library-radius-md);
  padding: 22px;
  backdrop-filter: blur(2px);
}

.library-hero__search-label {
  display: block;
  margin: 0 0 10px;
  color: #f2e6c2;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.library-search-row {
  display: flex;
  gap: 8px;
}

.library-search-input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: none;
  border-radius: var(--library-radius-sm);
  background: #ffffff;
  color: var(--library-text);
  font-size: 0.95rem;
  outline: none;
}

.library-search-input:focus-visible {
  box-shadow: 0 0 0 3px rgba(199, 163, 60, 0.55);
}

.library-search-btn {
  padding: 12px 20px;
  border: none;
  border-radius: var(--library-radius-sm);
  background: var(--library-gold);
  color: var(--library-navy);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s;
}

.library-search-btn:hover,
.library-search-btn:focus-visible { filter: brightness(1.08); }

.library-search-clear {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.8rem;
  text-decoration: none;
}
.library-search-clear:hover { color: #ffffff; text-decoration: underline; }

@media (max-width: 900px) {
  .library-hero { padding-top: 128px; }
  .library-hero__inner { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FASE 4 — Filtros
   ========================================================================== */

.library-filters {
  padding: 22px 0;
  border-bottom: 1px solid var(--library-border);
  background: var(--library-surface);
}

.library-filters__row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.library-filters__pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
}

.library-filter-pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border: 1px solid var(--library-border);
  border-radius: 999px;
  background: var(--library-bg);
  color: var(--library-text);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.library-filter-pill:hover {
  border-color: var(--library-green-500);
  color: var(--library-green-900);
}

.library-filter-pill[aria-current="true"] {
  background: var(--library-green-900);
  border-color: var(--library-green-900);
  color: #ffffff;
}

.library-filters__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.library-filters__count {
  color: var(--library-muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

.library-filters__clear {
  color: var(--library-green-900);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.library-filters__clear:hover { text-decoration: underline; }

/* Select-based secondary filters (categoria/anio/autor/programa) */
.library-filters__form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.library-filters__select,
.library-filters__input {
  padding: 8px 12px;
  border: 1px solid var(--library-border);
  border-radius: var(--library-radius-sm);
  background: #ffffff;
  color: var(--library-text);
  font-size: 0.85rem;
}

.library-filters__select:focus-visible,
.library-filters__input:focus-visible {
  outline: none;
  border-color: var(--library-green-500);
  box-shadow: 0 0 0 3px rgba(39, 150, 91, 0.18);
}

/* ==========================================================================
   FASE 5 — Publicacion destacada
   ========================================================================== */

.library-featured {
  padding: 32px 0 8px;
}

.library-featured__card {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: 32px;
  background: var(--library-surface);
  border-radius: var(--library-radius-lg);
  box-shadow: var(--library-shadow-lg);
  padding: 28px;
}

.library-featured__cover-link {
  display: block;
  border-radius: var(--library-radius-sm);
  overflow: hidden;
  background: var(--library-green-100);
  border: 1px solid var(--library-border);
  aspect-ratio: 3 / 4;
}

.library-featured__cover {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--library-green-100);
  display: block;
}

.library-featured__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: var(--library-green-700);
}

.library-featured__eyebrow {
  color: var(--library-green-700);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.library-featured__title {
  margin: 8px 0 4px;
  font-family: var(--font-playfair, Georgia, serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--library-navy);
  line-height: 1.2;
}
.library-featured__title a { color: inherit; text-decoration: none; }
.library-featured__title a:hover { color: var(--library-green-900); }

.library-featured__subtitle {
  margin: 0 0 10px;
  color: var(--library-muted);
  font-style: italic;
  font-size: 0.95rem;
}

.library-featured__authors {
  margin: 0 0 12px;
  color: var(--library-text);
  font-size: 0.88rem;
}

.library-featured__summary {
  margin: 0 0 18px;
  color: var(--library-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.library-featured__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 700px) {
  .library-featured__card { grid-template-columns: 1fr; }
  .library-featured__cover-link { max-width: 220px; margin: 0 auto; }
}

/* ==========================================================================
   Botones comunes (catalogo + ficha)
   ========================================================================== */

.library-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  min-height: 40px;
  border-radius: var(--library-radius-sm);
  border: 1px solid transparent;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s, background 0.15s, border-color 0.15s;
}

.library-btn--primary { background: var(--library-green-900); color: #ffffff; }
.library-btn--primary:hover { filter: brightness(1.1); }

.library-btn--gold { background: var(--library-gold); color: var(--library-navy); }
.library-btn--gold:hover { filter: brightness(1.08); }

.library-btn--outline {
  background: transparent;
  color: var(--library-green-900);
  border-color: var(--library-green-900);
}
.library-btn--outline:hover { background: var(--library-green-100); }

.library-btn:focus-visible {
  outline: 2px solid var(--library-gold);
  outline-offset: 2px;
}

/* ==========================================================================
   FASE 6 — Catalogo (grid de cards)
   ========================================================================== */

.library-catalog { padding: 32px 0 64px; }

.library-catalog__title {
  margin: 0 0 20px;
  font-family: var(--font-playfair, Georgia, serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--library-navy);
}

.library-empty {
  text-align: center;
  padding: 48px 0;
  color: var(--library-muted);
}
.library-empty-link { color: var(--library-green-900); font-weight: 700; text-decoration: none; }
.library-empty-link:hover { text-decoration: underline; }

.library-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

@media (max-width: 1200px) { .library-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .library-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .library-grid { grid-template-columns: 1fr; } }

.library-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--library-surface);
  border: 1px solid var(--library-border);
  border-radius: var(--library-radius-md);
  box-shadow: var(--library-shadow);
  overflow: hidden;
  transition: transform 0.18s, box-shadow 0.18s;
}
.library-card:hover { transform: translateY(-3px); box-shadow: var(--library-shadow-lg); }

.library-card__cover-link {
  display: block;
  aspect-ratio: 3 / 4;
  background: var(--library-green-100);
  border-bottom: 1px solid var(--library-border);
}
.library-card__cover {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.library-card__cover-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  color: var(--library-green-700);
}

.library-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
}

.library-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.library-card__category {
  font-size: 0.68rem;
  color: var(--library-muted);
}

.library-card__title {
  margin: 2px 0 0;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--library-navy);
}
.library-card__title a {
  color: inherit;
  text-decoration: none;
  /* La card entera es clickeable via stretched-link; el enlace del titulo permanece accesible/focoseable */
}
.library-card__title a:hover { color: var(--library-green-900); }

.library-card__authors {
  margin: 0;
  color: var(--library-muted);
  font-size: 0.78rem;
}

.library-card__footer {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.library-card__year { color: var(--library-muted); font-size: 0.78rem; }

.library-card__link {
  position: relative;
  z-index: 2;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--library-green-900);
  text-decoration: none;
}
.library-card__link:hover { text-decoration: underline; }

/* Card completa clickeable conservando el enlace de titulo accesible */
.library-card__stretched::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Badges tipo documental */
.library-tipo-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--library-green-100);
  color: var(--library-green-900);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ==========================================================================
   Paginacion
   ========================================================================== */

.library-pagination {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 32px;
}

.library-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  height: 2.2rem;
  padding: 0 0.5rem;
  border: 1px solid var(--library-border);
  border-radius: var(--library-radius-sm);
  background: #ffffff;
  color: var(--library-navy);
  font-size: 0.85rem;
  text-decoration: none;
}
.library-page-link:hover { border-color: var(--library-green-500); }
.library-page-link[aria-current="page"] {
  background: var(--library-green-900);
  border-color: var(--library-green-900);
  color: #ffffff;
  font-weight: 700;
}
.library-page-ellipsis { color: var(--library-muted); line-height: 2.2rem; padding: 0 4px; }

@media (max-width: 860px) {}
@media (max-width: 640px) {}

/* ==========================================================================
   FASE 17 — Relacionadas
   ========================================================================== */

.library-related { padding: 8px 0 40px; }
.library-related h2 {
  margin: 0 0 18px;
  font-family: var(--font-playfair, Georgia, serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--library-navy);
}
.library-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 860px) { .library-related__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .library-related__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   FASE 12-16 — Lector PDF (.pdf-reader)
   ========================================================================== */

.pdf-reader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  flex-direction: column;
  background: rgba(10, 20, 20, 0.92);
}
.pdf-reader[data-open="true"] { display: flex; }

.pdf-reader__toolbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--library-green-950, #003f2f);
  color: #fff;
}

.pdf-reader__title {
  flex: 1 1 160px;
  min-width: 0;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pdf-reader__group { display: flex; align-items: center; gap: 4px; }

.pdf-reader__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 10px;
  border: none;
  border-radius: var(--library-radius-sm, 8px);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  font-size: 0.95rem;
  transition: background 0.15s;
}
.pdf-reader__btn:hover { background: rgba(255, 255, 255, 0.22); }
.pdf-reader__btn:focus-visible { outline: 2px solid var(--library-gold, #c7a33c); outline-offset: 2px; }
.pdf-reader__btn:disabled { opacity: 0.4; cursor: default; }
.pdf-reader__btn--close { background: rgba(220, 60, 60, 0.35); }
.pdf-reader__btn--close:hover { background: rgba(220, 60, 60, 0.55); }

.pdf-reader__page-indicator {
  font-size: 0.82rem;
  white-space: nowrap;
  min-width: 84px;
  text-align: center;
}

.pdf-reader__body {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  background: #3a3f3d;
}

.pdf-reader__canvas-wrap {
  position: relative;
  background: #fff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  border-radius: 4px;
  line-height: 0;
}

.pdf-reader__canvas-wrap canvas {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

/* Transicion ligera entre paginas */
.pdf-reader__canvas-wrap canvas {
  transition: opacity 200ms ease, transform 200ms ease;
}
.pdf-page--leaving { opacity: 0; transform: translateX(-12px); }
.pdf-page--entering { opacity: 0; transform: translateX(12px); }

@media (prefers-reduced-motion: reduce) {
  .pdf-reader__canvas-wrap canvas { transition: none !important; }
}

.pdf-reader__status {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85);
  color: var(--library-navy, #17233d);
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 4px;
}
.pdf-reader__status[data-visible="true"] { display: flex; }

.pdf-reader__fallback {
  max-width: 420px;
  margin: 40px auto;
  padding: 20px;
  background: #fff;
  border-radius: var(--library-radius-sm, 8px);
  text-align: center;
  color: var(--library-navy, #17233d);
  font-size: 0.9rem;
}
.pdf-reader__fallback a { color: var(--library-green-900, #00563f); font-weight: 700; }

@media (max-width: 640px) {
  .pdf-reader__toolbar { justify-content: center; }
  .pdf-reader__title { flex-basis: 100%; text-align: center; order: -1; margin-bottom: 4px; }
  .pdf-reader__body { padding: 10px; }
}

/* ==========================================================================
   Ficha bibliografica — .pub-*
   --------------------------------------------------------------------------
   Tres niveles: identidad (.publication-hero) -> informacion editorial (.pub-body)
   -> acciones de lectura (.pub-aside). Consume el sistema global: IBM Plex
   Sans para interfaz, IBM Plex Serif para el titulo editorial, IBM Plex Mono
   para metadatos verificables (anio, ISBN, DOI, idioma).

   Namespace propio para no colisionar con el listado (.library-card,
   .library-container y .library-btn se comparten y no se tocan aqui).
   ========================================================================== */

.library-detail-page {
  --pub-green-950: #003f2f;
  --pub-green-900: #00563f;
  --pub-green-700: #0f6b49;
  --pub-gold: #c7a33c;
  --pub-bg: #f4f8f5;
  --pub-surface: #ffffff;
  --pub-border: #dce7e1;
  --pub-text: #172033;
  --pub-muted: #52606d;
  --pub-subtle: #627080;

  display: block;
  background: var(--pub-bg);
  color: var(--pub-text);
  /* Compensacion del header fijo (position:fixed, nav de 76px). Es el mismo
     valor que usan .institucional-page, .programas-page y .event-detail.
     Antes esta compensacion la cargaba .library-breadcrumb con
     "padding: 128px 0 12px"; al mover el breadcrumb dentro del hero y
     eliminar esa clase, el offset se perdio y el header tapaba los primeros
     76px de la cabecera. Vive aqui, en el contenedor de pagina, para que no
     dependa de que exista un componente concreto arriba. */
  padding-top: 76px;
  padding-bottom: clamp(48px, 6vw, 88px);
}

/* Header solido de pagina interior, igual que Institucional y Eventos. Sin
   esta clase el <body> quedaba sin marca y el header se renderizaba como
   pildora flotante transparente sobre la cabecera verde. */
/* Se apunta a .public-header, la clase real del partial
   (app/Views/partials/public-header.php), y NO al elemento <header> a secas
   como hacen las otras hojas del proyecto. Motivo: ese selector generico
   alcanza a CUALQUIER <header> del documento; cuando la cabecera de la ficha
   era un <header>, le imponia "padding: 0" y el hero perdia todo su
   espaciado vertical, dejando el cuerpo montado encima. Acotarlo a la clase
   elimina el efecto colateral de raiz. */
body.library-solid-nav .public-header {
  padding: 0;
  background: #003f2f;
}

body.library-solid-nav nav#navbar {
  max-width: 1540px;
  width: 100%;
  min-height: 76px;
  margin-top: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

@media (min-width: 768px) {
  body.library-solid-nav nav#navbar {
    margin-top: 0;
    padding: 0 32px;
    min-height: 76px;
  }
}

body.library-solid-nav nav#navbar.scrolled {
  max-width: 1540px;
  margin-top: 0;
}

.library-detail-page a:focus-visible,
.library-detail-page button:focus-visible {
  outline: 3px solid rgba(15, 107, 73, 0.55);
  outline-offset: 3px;
}

/* ---------- Nivel 1: cabecera editorial ---------- */
.publication-hero {
  background: var(--pub-green-950);
  color: #ffffff;
  padding-block: clamp(28px, 4vw, 48px) clamp(32px, 4.5vw, 56px);
}

.publication-hero__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(18px, 2.5vw, 28px);
  font-size: var(--fs-caption);
  color: rgba(255, 255, 255, 0.72);
}

.publication-hero__breadcrumb a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
}

.publication-hero__breadcrumb a:hover {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Etiqueta principal: el tipo de publicacion. Unica insignia de la ficha. */
.publication-hero__label {
  display: inline-flex;
  align-items: center;
  margin: 0 0 12px;
  padding: 6px 14px;
  border: 1px solid var(--pub-gold);
  border-radius: 999px;
  color: var(--pub-gold);
  font-size: var(--fs-overline);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Metadatos secundarios: una sola linea, menor peso que la etiqueta. */
.publication-hero__meta {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.02em;
}

.publication-hero__title {
  max-width: 22ch;
  margin: 0 0 14px;
  color: #ffffff;
  font-family: var(--font-serif);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.publication-hero__subtitle {
  max-width: 62ch;
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--fs-lead);
  line-height: 1.5;
}

.publication-hero__authors {
  max-width: 68ch;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

/* ---------- Composicion 35 / 65 ---------- */
/* Separacion real entre el hero y el cuerpo. Vive en la seccion de
   contenido (no como margin del layout) para que el aire exista aunque el
   layout cambie de disposicion en otro breakpoint. */
.library-content {
  padding-block: clamp(2rem, 4vw, 4rem);
}

.publication-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
}

/* ---------- Columna izquierda: portada + acciones ---------- */
.pub-aside__inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pub-cover {
  width: 100%;
  max-width: 320px;
  margin-inline: auto;
}

/* La portada conserva su proporcion real: sin aspect-ratio impuesto ni
   object-fit que la recorte. */
.pub-cover__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md, 12px);
  box-shadow: 0 2px 6px rgba(0, 39, 29, 0.10), 0 18px 40px -20px rgba(0, 39, 29, 0.45);
}

.pub-cover__fallback {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  width: 100%;
  border-radius: var(--radius-md, 12px);
  background: #e7f3ec;
  color: var(--pub-green-700);
}

.pub-cover__fallback [data-lucide],
.pub-cover__fallback svg {
  width: 40px;
  height: 40px;
}

.pub-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 320px;
  margin-inline: auto;
  width: 100%;
}

.pub-aside__format {
  max-width: 320px;
  margin: 0 auto;
  width: 100%;
  color: var(--pub-subtle);
  font-size: var(--fs-caption);
  text-align: center;
}

/* Metadato verificable: siempre en monoespaciada */
.pub-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ---------- Columna derecha: cuerpo editorial ---------- */
.pub-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 40px);
}

.pub-section {
  padding: clamp(22px, 2.6vw, 32px);
  background: var(--pub-surface);
  border: 1px solid var(--pub-border);
  border-radius: var(--radius-lg, 16px);
}

.pub-section__title {
  margin: 0 0 16px;
  color: var(--pub-green-900);
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.25;
}

/* Prosa editorial: medida de lectura acotada, sin justificar. */
.pub-prose {
  max-width: 68ch;
  color: var(--pub-text);
  font-size: var(--fs-body);
  line-height: 1.65;
  text-align: left;
}

.pub-prose > * + * {
  margin-top: 1em;
}

.pub-prose p {
  margin: 0;
}

.pub-prose a {
  color: var(--pub-green-700);
  text-underline-offset: 3px;
}

.pub-prose ul,
.pub-prose ol {
  padding-left: 1.25rem;
}

.pub-prose li + li {
  margin-top: 0.35em;
}

/* ---------- Palabras clave y etiquetas ---------- */
.pub-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.pub-keywords a {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border: 1px solid var(--pub-border);
  border-radius: 999px;
  color: var(--pub-muted);
  font-size: var(--fs-caption);
  text-decoration: none;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.pub-keywords a:hover,
.pub-keywords a:focus-visible {
  border-color: var(--pub-green-700);
  background: rgba(15, 107, 73, 0.07);
  color: var(--pub-green-900);
}

/* ---------- Datos bibliograficos ---------- */
.pub-data {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
}

.pub-data__row {
  display: grid;
  grid-template-columns: minmax(120px, 34%) minmax(0, 1fr);
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--pub-border);
}

.pub-data__row:last-child {
  border-bottom: 0;
}

.pub-data dt {
  margin: 0;
  color: var(--pub-subtle);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.pub-data dd {
  margin: 0;
  color: var(--pub-text);
  font-size: var(--fs-sm);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.pub-data dd a {
  color: var(--pub-green-700);
  text-underline-offset: 3px;
}

/* ---------- Autoria y creditos ---------- */
.pub-credits {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.pub-credits__label {
  margin: 0 0 6px;
  color: var(--pub-subtle);
  font-size: var(--fs-overline);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pub-credits__names {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--pub-text);
  font-size: var(--fs-sm);
  line-height: 1.65;
}

/* ---------- Cita sugerida ---------- */
.pub-cite__text {
  max-width: 68ch;
  margin: 0 0 16px;
  padding: 16px 18px;
  border-left: 3px solid var(--pub-gold);
  border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0;
  background: #f8faf9;
  color: var(--pub-text);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

/* ---------- Relacionadas ---------- */
.library-detail-page .library-related {
  margin-top: clamp(36px, 5vw, 64px);
}

.library-detail-page .library-related h2 {
  margin: 0 0 20px;
  color: var(--pub-green-900);
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 600;
}

.library-detail-page .library-related__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (min-width: 640px) {
  .library-detail-page .library-related__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  /* Datos bibliograficos a dos columnas en pantallas amplias */
  .pub-data {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
  }

  .pub-credits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
  }
}

@media (min-width: 1024px) {
  /* 35 / 65 */
  .publication-layout {
    grid-template-columns: minmax(240px, 35fr) minmax(0, 65fr);
    align-items: start;
  }

  .pub-cover,
  .pub-actions,
  .pub-aside__format {
    margin-inline: 0;
  }

  /* Sin position:sticky a proposito. Con "align-items: start" en .publication-layout
     el item del grid mide exactamente lo que mide su contenido, de modo que
     el sticky no tiene recorrido y queda inerte; ademas obliga a calcular un
     top contra la altura del header. La estabilidad visual tiene prioridad
     sobre el sticky (criterio del encargo). */

  .library-detail-page .library-related__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .publication-hero__title {
    max-width: none;
  }

  .pub-section {
    padding: 20px 18px;
  }

  .pub-data__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* El lector a pantalla completa no debe verse afectado por el sticky */
@media (prefers-reduced-motion: reduce) {
  .pub-keywords a {
    transition: none;
  }
}