/* =========================================================================
   Estantería de Publicaciones (recursos con variante "estanteria").
   Portadas de marca generadas + índice plegable + ficha emergente.
   Solo la carga la página que la usa (layout.php la incluye condicional).
   Colores SIEMPRE desde tokens.css (paleta v1.1 + rampa --pub-* verificada
   en el build). Sin estilos en línea: cumple la CSP.
   ========================================================================= */

.publicaciones__interior {
  max-width: var(--ancho-contenido);
  margin-inline: auto;
  padding-inline: var(--esp-4);
}

.publicaciones__intro {
  max-width: 54ch;
  color: var(--gris-texto);
}

/* ---------- Estante de portadas ---------- */
.estante {
  display: grid;
  gap: var(--esp-5);
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  margin-top: var(--esp-6);
}

.cov {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 3 / 4.15;
  border-radius: 6px 12px 12px 6px;
  padding: var(--esp-4) var(--esp-4) var(--esp-4) var(--esp-5);
  color: var(--blanco);
  text-decoration: none;
  overflow: hidden;
  background: var(--cov, var(--tinta));
  box-shadow: var(--sombra-suave);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  isolation: isolate;
}

/* lomo del libro */
.cov::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.55rem;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0));
}

/* brillo de barniz */
.cov::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 80% at 15% 0%, rgba(255, 255, 255, 0.18), transparent 55%);
}

.cov:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra-alzada);
}

.cov__tipo {
  font-family: var(--fuente-titular);
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.cov__titulo {
  font-family: var(--fuente-cita);
  font-style: italic;
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.2;
  margin-top: var(--esp-2);
  /* nunca desborda la portada: recorta con puntos suspensivos */
  display: -webkit-box;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cov__pie {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding-top: var(--esp-3);
}

.cov__anio {
  font-family: var(--fuente-titular);
  font-weight: 700;
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}

.cov__star {
  position: absolute;
  top: 0.85rem;
  right: 0.9rem;
  width: 1.1rem;
  height: 1.1rem;
  background: url("/assets/marca/estrella-logo-yalocin.png") center / contain no-repeat;
  opacity: 0.92;
}

/* Rampa cromática por antigüedad (reciente = --pub-1 → antigua = --pub-12).
   Todos verificados como fondo de texto blanco en pares_de_uso (>= 4.5:1). */
.cov--pub-1  { --cov: var(--pub-1); }
.cov--pub-2  { --cov: var(--pub-2); }
.cov--pub-3  { --cov: var(--pub-3); }
.cov--pub-4  { --cov: var(--pub-4); }
.cov--pub-5  { --cov: var(--pub-5); }
.cov--pub-6  { --cov: var(--pub-6); }
.cov--pub-7  { --cov: var(--pub-7); }
.cov--pub-8  { --cov: var(--pub-8); }
.cov--pub-9  { --cov: var(--pub-9); }
.cov--pub-10 { --cov: var(--pub-10); }
.cov--pub-11 { --cov: var(--pub-11); }
.cov--pub-12 { --cov: var(--pub-12); }

/* ---------- Índice plegable (respaldo sin JS) ---------- */
.pub-indice {
  margin-top: var(--esp-7);
  border-top: 1px solid var(--borde);
}

.pub-indice__llamada {
  list-style: none;
  cursor: pointer;
  padding: var(--esp-4) 0 var(--esp-1);
  font-family: var(--fuente-titular);
  font-weight: 600;
  color: var(--azul);
  display: flex;
  align-items: center;
  gap: var(--esp-2);
}

.pub-indice__llamada::-webkit-details-marker { display: none; }

.pub-indice__llamada::before {
  content: "\25B8"; /* ▸ */
  transition: transform 0.2s ease;
}

.pub-indice[open] > .pub-indice__llamada::before { transform: rotate(90deg); }

.pub-indice__lista {
  list-style: none;
  margin: var(--esp-3) 0 0;
  padding: 0;
}

.pub-fila {
  display: grid;
  gap: 0.1rem var(--esp-5);
  padding: var(--esp-4) 0;
  border-bottom: 1px solid var(--borde);
  scroll-margin-top: calc(var(--alto-cabecera) + 1rem);
}

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

.pub-fila__anio {
  font-family: var(--fuente-titular);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
  opacity: 0.28;
}

.pub-fila__tipo {
  font-family: var(--fuente-titular);
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--morado);
}

.pub-fila__tit {
  font-family: var(--fuente-cita);
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 0.1rem 0 0.2rem;
}

.pub-fila__tit a { color: var(--tinta); text-decoration: none; }
.pub-fila__tit a:hover,
.pub-fila__tit a:focus-visible { color: var(--azul); text-decoration: underline; }

.pub-fila__desc { font-size: var(--texto-s); color: var(--gris-texto); margin: 0; }
.pub-fila__nota { font-size: var(--texto-xs); color: var(--gris-texto); font-style: italic; margin: 0.2rem 0 0; }

@media (min-width: 44em) {
  .pub-fila { grid-template-columns: 5rem 1fr; }
}

/* ---------- Ficha emergente ---------- */
.pub-modal {
  border: none;
  border-radius: var(--radio-tarjeta);
  padding: 0;
  width: min(680px, 92vw);
  margin: auto; /* el reset global de márgenes rompería el centrado del dialog */
  background: var(--blanco);
  color: var(--tinta);
  box-shadow: var(--sombra-alzada);
  overflow: hidden;
}

.pub-modal::backdrop { background: rgba(20, 29, 51, 0.55); }

.pub-modal__cuerpo { display: grid; }

@media (min-width: 38em) {
  .pub-modal__cuerpo { grid-template-columns: 210px 1fr; }
}

/* la portada dentro de la ficha reutiliza el aspecto de .cov, sin hover */
.pub-modal__portada {
  position: relative;
  aspect-ratio: 16 / 8;
  transform: none;
  box-shadow: none;
  border-radius: 0;
}

.pub-modal__portada:hover { transform: none; box-shadow: none; }

@media (min-width: 38em) {
  .pub-modal__portada { aspect-ratio: auto; }
}

.pub-modal__portada img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pub-modal__info {
  padding: var(--esp-5) var(--esp-5);
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  min-width: 0;
}

.pub-modal__meta {
  font-family: var(--fuente-titular);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--magenta);
}

.pub-modal__tit {
  font-family: var(--fuente-cita);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.24;
  margin: 0;
  color: var(--tinta);
}

.pub-modal__resena { font-size: var(--texto-s); color: var(--tinta); margin: 0.2rem 0 0.3rem; }
.pub-modal__nota { font-size: var(--texto-xs); color: var(--gris-texto); font-style: italic; margin: 0; }

.pub-modal__fuente {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  font-family: var(--fuente-titular);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--blanco);
  background: var(--degradado-primario);
  padding: 0.55rem 1.05rem;
  border-radius: 999px;
}

.pub-modal__fuente:hover { filter: brightness(1.06); }

.pub-modal__cerrar {
  position: absolute;
  top: 0.55rem;
  right: 0.6rem;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  color: var(--tinta);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.pub-modal__cerrar:hover { background: var(--blanco); }

@media (prefers-reduced-motion: reduce) {
  .cov,
  .pub-indice__llamada::before { transition: none; }
}