/* =========================================================
   He Visto un Fantasma — Libros y Medios: single y archivo de Libro, fichas, reseñas, créditos y archivo/ficha de Apariciones
 * (Medios reutiliza la estructura de Libro). Se carga en Libro y en Medios.
   Depende de app.css (tokens y base). Las reglas conservan el orden relativo
   que tenían en el CSS monolítico.
   ========================================================= */

/* ---------- Single Libro ---------- */

.hvuf-libro__nav {
	padding-top: var(--space-5);
}

.hvuf-libro__hero {
	display: grid;
	grid-template-columns: minmax(220px, 320px) 1fr;
	gap: var(--space-7);
	padding-block: var(--space-6);
}

.hvuf-libro__cover-image {
	aspect-ratio: 2 / 3;
	width: 100%;
	object-fit: cover;
	border: 1px solid var(--color-border);
}

.hvuf-libro__excerpt {
	color: var(--color-text-muted);
	font-size: 1.05rem;
}

.hvuf-libro__excerpt p {
	margin: 0 0 var(--space-3);
}

.hvuf-libro__excerpt p:last-child {
	margin-bottom: 0;
}

/* Ficha técnica: admite de 1 a 5 datos sin dejar huecos (flex con salto de línea). */

.hvuf-ficha-tecnica {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4) var(--space-6);
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	padding-block: var(--space-4);
	margin: var(--space-4) 0;
}

.hvuf-ficha-tecnica > div {
	flex: 0 1 auto;
	min-width: 0;
}

.hvuf-ficha-tecnica dt {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
	margin-bottom: var(--space-1);
}

.hvuf-ficha-tecnica dt abbr {
	text-decoration: none;
	cursor: help;
}

.hvuf-ficha-tecnica dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.hvuf-libro__compra {
	margin-top: var(--space-5);
}

.hvuf-libro__compra-titulo {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
	margin: 0 0 var(--space-3);
}

/* "Dónde comprar": varias tiendas con el mismo trato visual (ninguna
   asumida como principal salvo la que el editor marque explícitamente). */

.hvuf-tiendas-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.hvuf-tienda-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	color: var(--color-text);
	text-decoration: none;
	font-size: 0.9rem;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.hvuf-tienda-link:hover,
.hvuf-tienda-link:focus-visible {
	border-color: var(--color-accent-strong);
	color: var(--color-accent-strong);
}

.hvuf-tienda-link--principal {
	border-color: var(--color-accent);
}

/* Secciones de la ficha: alineadas con el héroe (contenedor completo) y con el
   texto limitado a un ancho legible. */

.hvuf-libro__resenas,
.hvuf-libro__editorial,
.hvuf-libro__muestra {
	padding-block: var(--space-6);
	border-top: 1px solid var(--color-border);
}

/* RESEÑAS en la ficha: misma banda que en /libros/, centrada y con algo más de aire. */

.hvuf-libro__resenas {
	padding-block: var(--space-5);
}

.hvuf-libro__resenas .hvuf-libro-ficha__resenas--ficha {
	margin: 0 auto;
}

.hvuf-libro__h2-menor {
	margin: 0 0 var(--space-4);
	font-family: var(--font-sans);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-accent-strong);
}

/* CRÉDITOS: rol y nombre alineados, sin cajas ni tabla. */

.hvuf-libro-creditos {
	max-width: 68ch;
	margin: 0;
}

.hvuf-libro-creditos__fila {
	display: grid;
	grid-template-columns: minmax(6.5rem, 9rem) minmax(0, 1fr);
	gap: var(--space-1) var(--space-3);
	padding-block: var(--space-2);
}

.hvuf-libro-creditos dt {
	color: var(--color-text-muted);
	font-size: 0.9rem;
}

.hvuf-libro-creditos dd {
	margin: 0;
	overflow-wrap: anywhere;
}

/* El enlace se distingue por el subrayado, no solo por el color. */

.hvuf-libro-creditos__enlace {
	color: var(--color-text);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.hvuf-libro-creditos__enlace:hover {
	color: var(--color-accent-strong);
}

/* SOBRE EL LIBRO */

.hvuf-libro__contenido h2,
.hvuf-libro__muestra h2 {
	margin-bottom: var(--space-4);
}

/* max-width: 64ch y padding-block: 0 retirados: .entry-content (misma especificidad y declarado después
   en el CSS monolítico) los anulaba. Se conserva el render actual. */
.hvuf-libro__texto {
	font-size: 1.05rem;
	line-height: 1.75;
}

.hvuf-libro__texto > :first-child {
	margin-top: 0;
}

.hvuf-libro__texto > :last-child {
	margin-bottom: 0;
}

/* MUESTRA: bloque editorial con enlace externo, o iframe de un dominio autorizado. */

.hvuf-libro__muestra-texto {
	max-width: 64ch;
	color: var(--color-text-muted);
	font-size: 1.05rem;
}

.hvuf-vista-previa-frame {
	max-width: 900px;
	aspect-ratio: 16 / 10;
	border: 1px solid var(--color-border);
	background: var(--color-surface);
}

.hvuf-vista-previa-frame iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

.hvuf-vista-previa-fallback {
	font-size: 0.85rem;
	color: var(--color-text-muted);
}

/* Zona editorial: Sobre el libro | Créditos. Una columna por defecto (móvil y
   tablet estrecha); dos a partir de 900 px, con un filete vertical tenue. */

.hvuf-libro__editorial {
	display: grid;
	gap: var(--space-5);
}

@media (min-width: 900px) {
	.hvuf-libro__editorial--doble {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		gap: 0 var(--space-7);
	}

	.hvuf-libro__editorial--doble .hvuf-libro__creditos {
		border-left: 1px solid var(--color-border);
		padding-left: var(--space-6);
	}
}

@media (max-width: 700px) {
	.hvuf-libro__hero {
		grid-template-columns: 1fr;
	}

	.hvuf-libro-creditos__fila {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		padding-block: var(--space-3);
	}

	.hvuf-libro__cover {
		max-width: 220px;
	}
}

.hvuf-archive-header__filtro {
	color: var(--color-text-muted);
	font-size: 0.9rem;
	margin-top: var(--space-3);
}

.hvuf-archive-header__filtro a {
	color: var(--color-accent-strong);
	margin-left: var(--space-2);
}

/* ---------- Fichas de libro (archivo /libros/) ----------
 * Ficha editorial horizontal: portada contenida (260-320px) sin recortar
 * a la izquierda, datos a la derecha. Pensada para uno o varios libros,
 * separados por una linea divisoria sutil en vez de un grid de portadas.
 */

.hvuf-libro-lista {
	display: flex;
	flex-direction: column;
	max-width: 900px;
	padding-block: var(--space-6) var(--space-8);
}

.hvuf-libro-ficha {
	display: flex;
	align-items: center;
	gap: var(--space-7);
}

.hvuf-libro-ficha + .hvuf-libro-ficha {
	margin-top: var(--space-8);
	padding-top: var(--space-8);
	border-top: 1px solid var(--color-border);
}

/* Alternancia opcional: a partir del segundo libro, portada e info
   intercambian de lado visualmente (el orden real del documento no
   cambia). Puramente decorativo; se cancela por completo en móvil. */

.hvuf-libro-lista .hvuf-libro-ficha:nth-child(even) {
	flex-direction: row-reverse;
}

.hvuf-libro-ficha__cover {
	flex: 0 0 auto;
	width: clamp(260px, 24vw, 320px);
}

.hvuf-libro-ficha__cover-image {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--color-border);
}

.hvuf-libro-ficha__cover .hvuf-placeholder {
	aspect-ratio: 2 / 3;
}

.hvuf-libro-ficha__info {
	flex: 1 1 auto;
	min-width: 0;
}

.hvuf-libro-ficha__title {
	font-size: 1.5rem;
	margin: 0 0 var(--space-3);
}

.hvuf-libro-ficha__title a {
	color: var(--color-text);
	text-decoration: none;
}

.hvuf-libro-ficha__title a:hover {
	color: var(--color-accent-strong);
}

.hvuf-libro-ficha__excerpt {
	color: var(--color-text-muted);
	max-width: 60ch;
	margin: 0 0 var(--space-4);
}

.hvuf-libro-ficha__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-top: var(--space-5);
}

@media (max-width: 700px) {
	.hvuf-libro-ficha,
	.hvuf-libro-lista .hvuf-libro-ficha:nth-child(even) {
		flex-direction: column;
		text-align: left;
	}

	.hvuf-libro-ficha__cover {
		width: 100%;
		max-width: 220px;
		margin-inline: auto;
	}
}

/* ---------- Archivo /medios/: filtro por tipo ---------- */

.hvuf-medios-filtro {
	margin-top: var(--space-4);
}

.hvuf-medios-filtro ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* min-height 44px para un target tactil adecuado; el estado activo no
   depende solo del color (peso de fuente + subrayado inferior + aria-current). */

.hvuf-medios-filtro__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--color-text-muted);
	text-decoration: none;
	font-size: 0.9rem;
	border-bottom: 2px solid transparent;
}

.hvuf-medios-filtro__link:hover {
	color: var(--color-text);
}

.hvuf-medios-filtro__link.is-active {
	color: var(--color-text);
	font-weight: 600;
	border-bottom-color: var(--color-accent-strong);
}

/* ---------- Archivo /medios/: secciones y listado compacto ---------- */

.hvuf-medios-seccion {
	margin-top: var(--space-8);
}

.hvuf-medios-seccion:first-of-type {
	margin-top: 0;
}

.hvuf-medios-seccion + .hvuf-medios-seccion {
	border-top: 1px solid var(--color-border);
	padding-top: var(--space-7);
}

.hvuf-medios-seccion__title {
	margin: var(--space-6) 0 0;
}

.hvuf-medios-seccion:first-of-type .hvuf-medios-seccion__title {
	margin-top: 0;
}

/* Listado compacto tipo "indice de dossier": sin imagenes, una linea de
   metadatos y el titulo como enlace directo (externo casi siempre). */

.hvuf-medios-lista-compacta {
	list-style: none;
	margin: 0;
	max-width: 780px;
	padding: var(--space-5) 0 var(--space-8);
	display: flex;
	flex-direction: column;
}

.hvuf-medios-item {
	padding-block: var(--space-4);
}

.hvuf-medios-item + .hvuf-medios-item {
	border-top: 1px solid var(--color-border);
}

.hvuf-medios-item__meta {
	color: var(--color-text-muted);
	font-size: 0.85rem;
	margin: 0 0 var(--space-1);
}

.hvuf-medios-item__title {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	padding-block: var(--space-1);
	color: var(--color-text);
	text-decoration: none;
	font-size: 1.05rem;
	line-height: 1.4;
}

.hvuf-medios-item__title:hover,
.hvuf-medios-item__title:focus-visible {
	color: var(--color-accent-strong);
}

.hvuf-medios-item__flecha {
	flex-shrink: 0;
	margin-top: 0.35em;
	color: var(--color-text-muted);
}

@media (max-width: 700px) {
	.hvuf-medios-filtro ul {
		gap: var(--space-1) var(--space-4);
	}
}

/* ---------- Archivo /libros/: reseñas y medios, créditos ---------- */

/* Jerarquía: 1) libro, 2) Comprar / Saber más, 3) reseñas y medios (chips
   sobrios), 4) créditos (casi susurrados). */

/* Banda compacta de accesos secundarios (Amazon ↗ Goodreads ↗ Babelio ↗
   Medios →): mismo lenguaje que las barras de plataformas de la Home pero
   más pequeña; menos peso que Comprar / Saber más, más que los créditos. */

.hvuf-libro-ficha__resenas {
	margin-top: var(--space-5);
	/* El ancho se ajusta a la fila de accesos: el microtítulo se centra sobre ella. */
	width: fit-content;
	max-width: 100%;
}

/* Microtítulo: RESEÑAS con un filete fino a cada lado (CSS, no caracteres). */

.hvuf-libro-ficha__microtitulo {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	margin: 0 0 9px;
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--color-accent-strong);
}

.hvuf-libro-ficha__microtitulo::before,
.hvuf-libro-ficha__microtitulo::after {
	content: "";
	flex: 0 0 42px;
	height: 1px;
	background: rgba(91, 130, 189, 0.35);
}

/* El tracking deja un hueco tras la última letra: se compensa para centrar de verdad. */

.hvuf-libro-ficha__microtitulo span {
	margin-right: -0.24em;
}

@media (max-width: 900px) {
	.hvuf-libro-ficha__microtitulo::before,
	.hvuf-libro-ficha__microtitulo::after {
		flex-basis: 32px;
	}
}

.hvuf-resenas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hvuf-resenas li {
	display: flex;
}

.hvuf-resena-link {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	box-sizing: border-box;
	min-width: 7.5rem;
	min-height: 44px;
	padding: 0 var(--space-4);
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--color-text);
	text-decoration: none;
	background: rgba(236, 233, 227, 0.05);
	border: 1px solid rgba(236, 233, 227, 0.22);
	border-radius: var(--radius);
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.hvuf-resena-link:hover,
.hvuf-resena-link:focus-visible {
	color: var(--color-text);
	background: rgba(91, 130, 189, 0.16);
	border-color: var(--color-accent-strong);
}

.hvuf-resena-link .hvuf-icon {
	flex-shrink: 0;
	width: 0.85em;
	height: 0.85em;
	opacity: 0.75;
}

.hvuf-resena-link:hover .hvuf-icon,
.hvuf-resena-link:focus-visible .hvuf-icon {
	opacity: 1;
}

/* Móvil: cuadrícula 2×2, mismo peso para los cuatro accesos. */

@media (max-width: 700px) {
	.hvuf-libro-ficha__resenas {
		width: 100%;
	}

	.hvuf-libro-ficha__microtitulo::before,
	.hvuf-libro-ficha__microtitulo::after {
		flex-basis: 28px;
	}

	.hvuf-resenas {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hvuf-resenas li,
	.hvuf-resena-link {
		min-width: 0;
		width: 100%;
	}
}

/* A 320 px y menos el microtítulo queda solo con el texto (sin filetes). */

@media (max-width: 340px) {
	.hvuf-libro-ficha__microtitulo::before,
	.hvuf-libro-ficha__microtitulo::after {
		display: none;
	}
}