/*
 * c-detail — piezas de la ficha que no son metadatos: navegación (volver,
 * anterior/siguiente), cabecera (tipo, título, datos breves), visor e
 * imágenes, herramientas (compartir, imprimir…), "Cómo citar" y relacionados.
 * La disposición la pone cada vista (v-detail-*.css).
 */
@layer components {
	/* ── navegación ─────────────────────────────────────────────────────── */
	.c-detail-nav__back, .c-detail-nav { font-size: var(--step--1); }
	.c-detail-nav__back a {
		display: inline-flex;
		align-items: center;
		gap: 0.4em;
		color: var(--color-muted);
		text-decoration: none;
	}
	.c-detail-nav__back a:not(:has(.c-icon))::before { content: "‹"; font-size: 1.3em; line-height: 1; }
	.c-detail-nav__back a:hover { color: var(--color-strong); }
	.detailNavBgLeft a, .detailNavBgRight a {
		display: inline-flex;
		align-items: center;
		gap: 0.35em;
		color: var(--color-muted);
		font-size: var(--step--1);
		text-decoration: none;
	}
	.detailNavBgRight a { flex-direction: row-reverse; }
	:is(.detailNavBgLeft, .detailNavBgRight) a:hover { color: var(--color-strong); }
	:is(.detailNavBgLeft, .detailNavBgRight) .small { font-size: inherit; }
	.c-detail-nav { display: none; }   /* repetición para pantallas chicas del markup heredado: alcanza con la de arriba */

	/* ── cabecera ───────────────────────────────────────────────────────── */
	.c-detail-header { display: grid; gap: var(--space-2xs); }
	.c-detail-header__eyebrow {
		color: var(--color-accent-text);
		font-size: var(--step--2);
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}
	.c-detail-header__eyebrow:first-letter { text-transform: uppercase; }
	.c-detail-header__title { font-size: var(--step-4); max-inline-size: 28ch; }
	.c-detail-header__facts {
		display: flex;
		flex-wrap: wrap;
		gap: 0 var(--space-s);
		margin: 0;
		padding: 0;
		list-style: none;
		font-family: var(--font-heading);
		font-size: var(--step-1);
		color: var(--color-strong);
	}
	.c-detail-header__fact + .c-detail-header__fact::before {
		content: "";
		display: inline-block;
		inline-size: 0.3em;
		aspect-ratio: 1;
		margin-inline-end: var(--space-s);
		border-radius: 50%;
		background: var(--color-rule);
		vertical-align: 0.2em;
	}

	/* ── visor e imágenes ───────────────────────────────────────────────── */
	.c-viewer--main .c-viewer__stage {
		display: grid;
		place-items: center;
		background: var(--color-soft);
		padding: var(--space-m);
	}
	.c-viewer--main .c-viewer__stage > a { display: grid; justify-items: center; gap: var(--space-2xs); text-decoration: none; }
	.c-viewer--main .c-viewer__stage img { max-block-size: 70vh; inline-size: auto; object-fit: contain; cursor: zoom-in; }
	.c-viewer--main .c-viewer__stage br { display: none; }
	.c-viewer__caption { font-size: var(--step--2); color: var(--color-muted); }
	.c-viewer__caption:empty { display: none; }
	.c-viewer__back { margin-block-start: var(--space-xs); }

	.c-viewer-thumbs__list {
		display: flex;
		gap: var(--space-2xs);
		overflow-x: auto;
		padding-block: var(--space-2xs);
		scrollbar-width: thin;
	}
	.c-viewer-thumbs__list .frontSlide { flex: none; }
	.c-viewer-thumbs__list img {
		display: block;
		inline-size: 5.5rem;
		aspect-ratio: 1;
		object-fit: cover;
		background: var(--color-soft);
		outline: 1px solid var(--color-border);
		outline-offset: -1px;
	}
	.c-viewer-thumbs__list a:hover img { outline-color: var(--color-accent); }
	.frontSlideCaption:empty { display: none; }
	.frontSlideCaption { font-size: var(--step--2); color: var(--color-muted); max-inline-size: 5.5rem; }

	/* ── herramientas: íconos en círculos ──────────────────────────────── */
	#tools-bar-container { position: static !important; }   /* el JS heredado le pone left inline */
	.c-detail-tools {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2xs);
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.c-detail-tools :is(a, button) {
		display: grid;
		place-items: center;
		inline-size: 2.5rem;
		aspect-ratio: 1;
		border: 1px solid var(--color-border);
		border-radius: 50%;
		background: var(--color-surface);
		cursor: pointer;
	}
	.c-detail-tools :is(a, button):hover { border-color: var(--color-accent); }
	.c-detail-tools svg { inline-size: 1.6rem; block-size: auto; }
	.c-detail-tools svg :is(g, path) { stroke: currentColor; }
	.c-detail-tools span { display: contents; }

	/* ── Cómo citar ─────────────────────────────────────────────────────── */
	.c-cite {
		display: grid;
		gap: var(--space-2xs);
		justify-items: start;
		padding: var(--space-m);
		background: var(--color-soft);
		font-size: var(--step--1);
	}
	.c-cite__title { font-size: var(--step-1); }
	.c-cite__text { font-family: var(--font-heading); font-size: var(--step-0); max-inline-size: none; }

	/* ── relacionados: banda a todo el ancho ───────────────────────────── */
	.c-detail__related:has(.c-rail) {
		background: var(--color-band);
		box-shadow: 0 0 0 100vmax var(--color-band);
		clip-path: inset(0 -100vmax);
		margin-block-start: var(--space-2xl);
		padding-block: var(--space-xl);
	}
}
@layer components {
	/* la banda de relacionados llega hasta el footer */
	#pageArea:has(.c-detail__related .c-rail) { padding-block-end: 0; }
}