/* ==========================================================================
   Semiramis — sistema visual común
   --------------------------------------------------------------------------
   Único lugar del proyecto donde se define cómo se ve algo. Las páginas no
   escriben estilo propio: si una página necesita algo que no está aquí, se
   añade aquí.

   Orden del fichero:
     1. Transiciones de navegación
     2. Tokens de tema
     3. Reajuste de base
     4. Tipografía y elementos
     5. Estructura: barra superior, pestañas, paneles
     6. Componentes: tarjetas, fichas, filtros, índices, reproductor
     7. Utilidades y estados
     8. Impresión y movimiento reducido
   ========================================================================== */

/* 1. Transiciones de navegación ------------------------------------------- */

/* Encadena índice y páginas hijas con un fundido. Los navegadores que no la
   soportan navegan como siempre. */
@view-transition {
	navigation: auto;
}

/* 2. Tokens de tema -------------------------------------------------------- */

:root {
	color-scheme: light;

	/* Permite animar <details> hasta height: auto. Sin soporte, abre de golpe. */
	interpolate-size: allow-keywords;

	/* Color — tema claro */
	--paper: #faf8f5;
	--surface: #ffffff;
	--surface-sunk: #f2eee8;
	--ink: #141210;
	--ink-soft: #6b645c;
	--ink-faint: #9c948a;
	--rule: #e3ddd4;
	--rule-strong: #cdc4b7;
	--accent: #1a3a5c;
	--accent-soft: #e8eef5;
	--good: #3f7d3f;
	--fair: #8a6410;
	--poor: #a83a2e;

	/* Opacidad del grano de papel. En oscuro se apaga. */
	--grain-opacity: 0.022;

	/* Tipografía */
	--font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
	--font-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--text-xs: 0.75rem;
	--text-sm: 0.8125rem;
	--text-base: 0.9375rem;
	--text-md: 1.0625rem;
	--text-lg: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
	--text-xl: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
	--text-2xl: clamp(2.2rem, 1.6rem + 2.8vw, 3.75rem);
	--text-3xl: clamp(2.8rem, 1.8rem + 4.5vw, 5.5rem);

	/* Espaciado */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--space-10: 6rem;
	--space-12: 8rem;
	--space-14: 12rem;
	--space-16: 16rem;

	/* Retícula y forma */
	--measure: 38rem;
	--container: 72rem;
	--radius: 3px;
	--radius-pill: 999px;
	--topbar-height: 3.5rem;

	/* Movimiento */
	--ease: cubic-bezier(0.2, 0, 0, 1);
	--fast: 120ms;
	--normal: 220ms;
	--slow: 400ms;
}

/* Tema oscuro automático, salvo que el usuario haya pedido el claro. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;

		--paper: #0e0d0c;
		--surface: #171514;
		--surface-sunk: #1f1c1a;
		--ink: #f0ece6;
		--ink-soft: #a89f94;
		--ink-faint: #7a7268;
		--rule: #2b2724;
		--rule-strong: #3d3833;
		--accent: #8fb8e6;
		--accent-soft: #1c2836;
		--good: #7cb87c;
		--fair: #d0a44a;
		--poor: #e08074;

		--grain-opacity: 0;
	}
}

/* Tema oscuro elegido a mano. Gana sobre la preferencia del sistema. */
:root[data-theme="dark"] {
	color-scheme: dark;

	--paper: #0e0d0c;
	--surface: #171514;
	--surface-sunk: #1f1c1a;
	--ink: #f0ece6;
	--ink-soft: #a89f94;
	--ink-faint: #7a7268;
	--rule: #2b2724;
	--rule-strong: #3d3833;
	--accent: #8fb8e6;
	--accent-soft: #1c2836;
	--good: #7cb87c;
	--fair: #d0a44a;
	--poor: #e08074;

	--grain-opacity: 0;
}

/* 3. Reajuste de base ------------------------------------------------------ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

/* Sin desplazamiento suave a propósito. Estas páginas miden más de cien mil
   píxeles de alto: una animación que recorre esa distancia tarda segundos, y con
   content-visibility persigue además una posición que cambia según se maquetan
   las fichas que va atravesando. El salto seco llega y llega bien. */

body {
	margin: 0;
	background-color: var(--paper);
	color: var(--ink);
	font-family: var(--font-text);
	font-size: var(--text-base);
	line-height: 1.6;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Grano de papel. Capa fija, no interactiva, imperceptible salvo de cerca:
   es lo que evita que el fondo claro parezca un plano de color muerto. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: var(--grain-opacity);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
	transition: opacity var(--slow) var(--ease);
}

body > * {
	position: relative;
	z-index: 1;
}

::selection {
	background-color: var(--accent);
	color: var(--paper);
}

::marker {
	color: var(--ink-faint);
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 1px;
}

img,
video,
audio {
	max-width: 100%;
}

/* 4. Tipografía y elementos ------------------------------------------------ */

h1,
h2,
h3,
h4 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 1.15;
	text-wrap: balance;
	font-variation-settings: "SOFT" 0, "WONK" 0;
}

p {
	margin: 0 0 var(--space-4);
	text-wrap: pretty;
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
	transition: text-decoration-color var(--fast) var(--ease),
		text-underline-offset var(--fast) var(--ease);
}

a:hover {
	text-decoration-color: var(--accent);
	text-underline-offset: 0.24em;
}

.page-title {
	font-size: var(--text-2xl);
	font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 100;
	letter-spacing: -0.015em;
}

.page-subtitle {
	margin-top: var(--space-3);
	color: var(--ink-soft);
	font-family: var(--font-text);
	font-size: var(--text-md);
	font-weight: 400;
	letter-spacing: 0.01em;
}

.section-title {
	font-size: var(--text-xl);
	font-variation-settings: "SOFT" 20, "opsz" 40;
}

.prose {
	max-width: var(--measure);
	margin-inline: auto;
	color: var(--ink-soft);
	font-size: var(--text-md);
	line-height: 1.7;
}

.prose strong {
	color: var(--ink);
	font-weight: 600;
}

.container {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--space-5);
}

/* 5. Estructura ------------------------------------------------------------ */

.skip-link {
	position: absolute;
	top: var(--space-2);
	left: var(--space-2);
	z-index: 100;
	padding: var(--space-2) var(--space-4);
	background-color: var(--surface);
	border: 1px solid var(--rule-strong);
	border-radius: var(--radius);
	transform: translateY(-200%);
	transition: transform var(--fast) var(--ease);
}

.skip-link:focus {
	transform: translateY(0);
}

.topbar {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: var(--space-4);
	min-height: var(--topbar-height);
	padding-inline: var(--space-5);
	border-bottom: 1px solid var(--rule);
	background-color: color-mix(in srgb, var(--paper) 82%, transparent);
	backdrop-filter: blur(12px) saturate(1.4);
	-webkit-backdrop-filter: blur(12px) saturate(1.4);
}


.topbar__brand {
	flex: 0 0 auto;
	min-width: 0;
	font-family: var(--font-display);
	font-size: var(--text-md);
	font-variation-settings: "SOFT" 20, "opsz" 20;
	color: var(--ink);
	text-decoration: none;
	white-space: nowrap;
}

.topbar__brand:hover {
	color: var(--accent);
}

.topbar__search {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	min-width: 0;
}

.topbar__search input {
	width: 100%;
	max-width: 26rem;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background-color: var(--surface);
	color: var(--ink);
	font: inherit;
	caret-color: var(--accent);
	transition: border-color var(--fast) var(--ease),
		box-shadow var(--fast) var(--ease);
}

.topbar__search input::placeholder {
	color: var(--ink-faint);
}

.topbar__search input:focus {
	border-color: var(--accent);
	outline: none;
	box-shadow: 0 0 0 3px var(--accent-soft);
}

.topbar__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--space-1);
}

/* Barra de progreso de lectura. Se anima sola contra el desplazamiento del
   documento: sin JavaScript, sin escuchar el evento scroll. */
.progress {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 30;
	width: 100%;
	height: 2px;
	transform-origin: 0 50%;
	background-color: var(--accent);
	scale: 0 1;
	animation: progress-grow linear both;
	animation-timeline: scroll(root block);
}

@keyframes progress-grow {
	to {
		scale: 1 1;
	}
}

@supports not (animation-timeline: scroll()) {
	.progress {
		display: none;
	}
}

.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	justify-content: center;
	padding: var(--space-5) 0 var(--space-6);
	border-bottom: 1px solid var(--rule);
}

/* Dentro de la barra las pestañas son una fila más, no una sección: sin el aire
   ni la línea que llevan cuando van sueltas en la página. Si crecieran, la barra
   dejaría de medir --topbar-height y los elementos pegajosos se descolocarían. */
.topbar .tabs {
	flex: 0 0 auto;
	padding: 0;
	border-bottom: none;
}

.tabs__tab {
	appearance: none;
	padding: var(--space-2) var(--space-4);
	border: 1px solid transparent;
	border-radius: var(--radius);
	background: none;
	color: var(--ink-soft);
	font: inherit;
	font-size: var(--text-sm);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color var(--fast) var(--ease),
		background-color var(--fast) var(--ease),
		border-color var(--fast) var(--ease);
}

.tabs__tab:hover {
	color: var(--ink);
	background-color: var(--surface-sunk);
}

.tabs__tab[aria-selected="true"] {
	color: var(--accent);
	border-color: var(--rule);
	background-color: var(--surface);
}

.panel {
	padding-block: var(--space-6) var(--space-10);
}

/* Los paneles que entran lo hacen con un fundido corto. Sin @starting-style,
   simplemente aparecen. */
.panel:not([hidden]) {
	opacity: 1;
	transition: opacity var(--normal) var(--ease);
}

@starting-style {
	.panel:not([hidden]) {
		opacity: 0;
	}
}

.page-head {
	padding-block: var(--space-10) var(--space-6);
	text-align: center;
}

/* 6. Componentes ----------------------------------------------------------- */

/* 6.1 Tarjeta de programa */

.card {
	margin-bottom: var(--space-4);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background-color: var(--surface);

	/* La razón de que 1.251 tarjetas no ahoguen el navegador: sólo se maqueta
	   lo que está cerca de la ventana. El tamaño estimado evita que la barra
	   de desplazamiento salte al recorrer la página. */
	content-visibility: auto;
	contain-intrinsic-size: auto 5rem;

	transition: border-color var(--fast) var(--ease);
}

.card:hover {
	border-color: var(--rule-strong);
}

/* Destino de un ancla: se marca durante unos segundos para que quien llega
   desde un enlace antiguo vea dónde ha aterrizado. */
.card:target,
.person:target {
	border-color: var(--accent);
}

.card:target {
	animation: land var(--slow) var(--ease) 3;
}

@keyframes land {
	50% {
		background-color: var(--accent-soft);
	}
}

/* La cabecera fija de la página no puede tapar el destino del salto. */
.card,
.person,
.panel,
[id] {
	scroll-margin-top: calc(var(--topbar-height) + var(--space-4));
}

.card__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-3) var(--space-5);
	padding: var(--space-5);
	cursor: pointer;
	list-style: none;
}

.card__head::-webkit-details-marker {
	display: none;
}

.card__number {
	flex: 0 0 auto;
	color: var(--ink-faint);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.04em;
}

.card__date {
	flex: 0 0 auto;
	color: var(--ink-soft);
	font-size: var(--text-sm);
	font-variant-numeric: tabular-nums;
}

.card__title {
	flex: 1 1 14rem;
	min-width: 0;
	font-family: var(--font-text);
	font-size: var(--text-base);
	font-weight: 600;
	line-height: 1.4;
}

.card__meta {
	flex: 0 1 auto;
	display: flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--ink-soft);
	font-size: var(--text-sm);
}

.card__meta em {
	font-style: italic;
}

/* Cuerpo desplegable. Con ::details-content e interpolate-size se anima hasta
   la altura real; sin ellos, abre de golpe y funciona igual. */
.card__body {
	padding: 0 var(--space-5) var(--space-6);
	border-top: 1px solid var(--rule);
	padding-top: var(--space-5);
}

/* La tarjeta es un <article> y dentro lleva el <details>: el artículo es la
   unidad de contenido, el details sólo el mecanismo de apertura. */
.card > details::details-content {
	block-size: 0;
	overflow: hidden;
	opacity: 0;
	transition: content-visibility var(--normal) allow-discrete,
		opacity var(--normal) var(--ease),
		block-size var(--normal) var(--ease);
}

.card > details[open]::details-content {
	block-size: auto;
	opacity: 1;
}

/* 6.2 Pares etiqueta / valor */

.field {
	display: grid;
	grid-template-columns: 7.5rem 1fr;
	gap: var(--space-2) var(--space-5);
	padding-block: var(--space-4);
	border-bottom: 1px solid var(--rule);
}

.field:last-child {
	border-bottom: none;
}

.field__label {
	color: var(--ink-faint);
	font-size: var(--text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding-top: 0.15em;
}

.field__value {
	min-width: 0;
	font-size: var(--text-base);
}

.field__value ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.field__value li + li {
	margin-top: var(--space-1);
}

@media (max-width: 34rem) {
	.field {
		grid-template-columns: 1fr;
		gap: var(--space-1);
	}
}

/* 6.3 Calidad, chips, botones */

.quality {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
}

.quality::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: currentcolor;
}

.quality--good {
	color: var(--good);
}

.quality--fair {
	color: var(--fair);
}

.quality--poor {
	color: var(--poor);
}

.chip {
	display: inline-block;
	padding: 0.1em 0.6em;
	border: 1px solid var(--rule);
	border-radius: var(--radius-pill);
	background-color: var(--surface-sunk);
	color: var(--ink-soft);
	font-size: var(--text-xs);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color var(--fast) var(--ease),
		color var(--fast) var(--ease);
}

a.chip:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.button {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--rule-strong);
	border-radius: var(--radius);
	background-color: var(--surface);
	color: var(--ink);
	font: inherit;
	font-size: var(--text-sm);
	text-decoration: none;
	cursor: pointer;
	transition: border-color var(--fast) var(--ease),
		background-color var(--fast) var(--ease),
		color var(--fast) var(--ease);
}

.button:hover {
	border-color: var(--accent);
	color: var(--accent);
	background-color: var(--accent-soft);
}

.button--ghost {
	border-color: transparent;
	background: none;
	color: var(--ink-soft);
	padding-inline: var(--space-2);
}

.button--ghost:hover {
	background-color: var(--surface-sunk);
	color: var(--ink);
}

.link-external::after {
	content: "↗";
	display: inline-block;
	margin-left: 0.25em;
	font-size: 0.8em;
	color: var(--ink-faint);
	vertical-align: 0.1em;
}

/* 6.4 Filtros */

.filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	padding-block: var(--space-4);
	margin-bottom: var(--space-5);
	border-bottom: 1px solid var(--rule);
}

.filters__label {
	color: var(--ink-faint);
	font-size: var(--text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Separa un grupo de filtros del anterior sin necesidad de una regla en línea. */
.filters__label + .filter,
.filters__label:not(:first-child) {
	margin-left: var(--space-3);
}

.filter {
	appearance: none;
	padding: 0.2em 0.75em;
	border: 1px solid var(--rule);
	border-radius: var(--radius-pill);
	background-color: transparent;
	color: var(--ink-soft);
	font: inherit;
	font-size: var(--text-sm);
	cursor: pointer;
	transition: border-color var(--fast) var(--ease),
		background-color var(--fast) var(--ease),
		color var(--fast) var(--ease);
}

.filter:hover {
	border-color: var(--rule-strong);
	color: var(--ink);
}

.filter[aria-pressed="true"] {
	border-color: var(--accent);
	background-color: var(--accent-soft);
	color: var(--accent);
}

.counter {
	margin-left: auto;
	color: var(--ink-faint);
	font-size: var(--text-sm);
	font-variant-numeric: tabular-nums;
}

/* 6.5 Índices alfabéticos y cabeceras de grupo */

.alpha-index {
	position: sticky;
	top: var(--topbar-height);
	z-index: 10;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	padding-block: var(--space-3);
	margin-bottom: var(--space-4);
	border-bottom: 1px solid var(--rule);
	background-color: color-mix(in srgb, var(--paper) 88%, transparent);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.alpha-index a {
	min-width: 1.6rem;
	padding: 0.1em 0.3em;
	border-radius: var(--radius);
	color: var(--ink-soft);
	font-size: var(--text-sm);
	text-align: center;
	text-decoration: none;
}

.alpha-index a:hover {
	background-color: var(--surface-sunk);
	color: var(--accent);
}

.group-head {
	position: sticky;
	top: var(--topbar-height);
	z-index: 5;
	padding-block: var(--space-2);
	margin-block: var(--space-8) var(--space-4);
	border-bottom: 1px solid var(--rule-strong);
	background-color: color-mix(in srgb, var(--paper) 90%, transparent);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--ink-soft);
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-variation-settings: "SOFT" 20, "opsz" 30;
	font-variant-numeric: tabular-nums;
}

/* 6.6 Índices de personas y de películas */

/* Tres columnas con rejilla, no con `columns`.
   La multicolumna reparte el contenido para equilibrar las columnas, así que al
   abrir una ficha recalcula el reparto entero y las de al lado saltan de columna:
   la lista entera se reordena bajo el cursor. Con rejilla cada ficha tiene su
   celda y no se mueve nunca; al abrir una, sólo crece su fila. */
.people {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	align-items: start;
	gap: 0 var(--space-8);
}

.person {
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--rule);
	content-visibility: auto;
	contain-intrinsic-size: auto 2rem;
}

.person > summary {
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
	cursor: pointer;
	list-style: none;
	font-size: var(--text-base);
}

.person > summary::-webkit-details-marker {
	display: none;
}

.person > summary::before {
	content: "+";
	color: var(--ink-faint);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	transition: transform var(--fast) var(--ease);
}

.person[open] > summary::before {
	content: "−";
}

/* Una cabecera de letra dentro de la rejilla ocupa la fila entera. Sin esto se
   sienta en una celda como si fuera un nombre más, y la letra aparece en medio
   de la lista en vez de encabezarla. */
.people > .group-head,
.films > .group-head {
	grid-column: 1 / -1;
}

.person__name {
	min-width: 0;
}

.person__count {
	margin-left: auto;
	color: var(--ink-faint);
	font-size: var(--text-xs);
	font-variant-numeric: tabular-nums;
}

.person__programs {
	margin: var(--space-2) 0 var(--space-3) var(--space-4);
	padding: 0;
	list-style: none;
	font-size: var(--text-sm);
}

.person__programs li + li {
	margin-top: var(--space-1);
}

.films {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	align-items: start;
	gap: 0 var(--space-8);
}

.film {
	margin-bottom: var(--space-3);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--rule);
	font-size: var(--text-base);
}

.film a {
	color: var(--ink);
	text-decoration: none;
}

.film a:hover {
	color: var(--accent);
	text-decoration: underline;
}

.film__year {
	color: var(--ink-faint);
	font-size: var(--text-xs);
	font-variant-numeric: tabular-nums;
}

/* 6.7 Filas de programa de radio */

.show {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-2) var(--space-4);
	padding-block: var(--space-4);
	border-bottom: 1px solid var(--rule);
	content-visibility: auto;
	contain-intrinsic-size: auto 3.5rem;
}

/* Fila superior de un programa de radio: todo lo que se ve sin desplegar nada. */
.show__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-2) var(--space-3);
	width: 100%;
}

.show__date {
	flex: 0 0 5.5rem;
	color: var(--ink-faint);
	font-size: var(--text-xs);
	font-variant-numeric: tabular-nums;
}

.show__title {
	flex: 1 1 16rem;
	min-width: 0;
	font-size: var(--text-base);
}

.show__guests {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
}

.show__actions {
	display: flex;
	gap: var(--space-1);
	margin-left: auto;
}

/* 6.8 Reproductor */

.player {
	width: 100%;
	margin-top: var(--space-3);
	padding: var(--space-3);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background-color: var(--surface-sunk);
}

.player audio,
.player video {
	display: block;
	width: 100%;
}

.player video {
	max-height: 70vh;
	background-color: #000;
}

/* 6.9 Panel de atajos */

.shortcuts {
	max-width: 24rem;
	padding: var(--space-5);
	border: 1px solid var(--rule-strong);
	border-radius: var(--radius);
	background-color: var(--surface);
	color: var(--ink);
}

.shortcuts::backdrop {
	background-color: rgb(0 0 0 / 0.4);
	backdrop-filter: blur(2px);
}

.shortcuts dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-2) var(--space-4);
	margin: var(--space-4) 0 0;
}

.shortcuts dt {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
}

.shortcuts dt kbd {
	padding: 0.15em 0.45em;
	border: 1px solid var(--rule-strong);
	border-radius: var(--radius);
	background-color: var(--surface-sunk);
}

.shortcuts dd {
	margin: 0;
	color: var(--ink-soft);
	font-size: var(--text-sm);
}

/* Sin soporte de popover el botón de ayuda no serviría de nada: se retira. */
@supports not selector(:popover-open) {
	[popovertarget] {
		display: none;
	}
}

/* 6.10 Índice del sitio */

.index-section {
	padding-block: var(--space-6);
	border-top: 1px solid var(--rule);
}

.index-section__title {
	margin-bottom: var(--space-4);
	color: var(--ink-faint);
	font-family: var(--font-text);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.index-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.index-list li {
	padding-block: var(--space-3);
}

.index-list li + li {
	border-top: 1px solid var(--rule);
}

.index-list a {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-variation-settings: "SOFT" 25, "opsz" 40;
	color: var(--ink);
	text-decoration: none;
}

.index-list a:hover {
	color: var(--accent);
}

.contact {
	padding-block: var(--space-8) var(--space-6);
	color: var(--ink-faint);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	text-align: center;
}

/* 7. Utilidades y estados -------------------------------------------------- */

/* Marca de coincidencia de búsqueda, tanto si se resalta con la API de
   Highlight como si se envuelve en <mark>. */
::highlight(search-hit),
mark {
	background-color: var(--accent-soft);
	color: var(--accent);
}

.empty {
	padding: var(--space-8) 0;
	color: var(--ink-faint);
	font-size: var(--text-md);
	text-align: center;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Si el panel no tiene ningún elemento visible, el mensaje de vacío aparece.
   Sin :has() lo pone JavaScript quitando el atributo hidden. */
.panel:has(.card:not([data-filtered])) .empty,
.panel:has(.show:not([data-filtered])) .empty {
	display: none;
}

[hidden] {
	display: none !important;
}


/* En pantalla estrecha la barra no cabe en una fila: se reparte en dos, con las
   pestañas abajo y desplazables en horizontal, que es lo que hace todo el mundo.
   Sin esto el documento entero desbordaba a lo ancho en un teléfono. */
@media (max-width: 60rem) {
	.topbar {
		flex-wrap: wrap;
		gap: var(--space-2) var(--space-3);
		padding-block: var(--space-2);
	}

	.topbar__search {
		order: 3;
		flex: 1 1 100%;
		justify-content: stretch;
	}

	.topbar__search input {
		max-width: none;
	}

	/* Sin min-width: 0 un contenedor flexible no baja de su contenido y el
	   overflow-x nunca llega a activarse: desborda la página entera. */
	.topbar .tabs {
		order: 4;
		flex: 1 1 100%;
		min-width: 0;
		justify-content: flex-start;
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	/* El nombre del archivo puede ser largo; que se recorte antes que empujar. */
	.topbar__brand {
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.topbar .tabs::-webkit-scrollbar {
		display: none;
	}

	.topbar .tabs__tab {
		flex: 0 0 auto;
	}

	/* Con la barra ya en varias filas, los elementos pegajosos no pueden fiarse
	   de una altura fija: se despegan y se colocan en el flujo. */
	.alpha-index,
	.group-head {
		position: static;
		backdrop-filter: none;
	}
}

/* 8. Impresión y movimiento reducido --------------------------------------- */

@media print {
	:root {
		--paper: #fff;
		--surface: #fff;
		--surface-sunk: #fff;
		--ink: #000;
		--ink-soft: #333;
		--ink-faint: #666;
		--rule: #ccc;
		--rule-strong: #999;
		--accent: #000;
		--grain-opacity: 0;
	}

	.topbar,
	.tabs,
	.filters,
	.progress,
	.alpha-index,
	.skip-link,
	.player,
	.button {
		display: none !important;
	}

	.panel[hidden] {
		display: block !important;
	}

	.card,
	.person,
	.show {
		content-visibility: visible;
		break-inside: avoid;
	}

	.card::details-content {
		block-size: auto;
		opacity: 1;
	}

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
		color: #666;
		word-break: break-all;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.progress {
		display: none;
	}
}