@charset "UTF-8";
/* ==========================================================================
   CriticaBits — gráficas
   --------------------------------------------------------------------------
   El marcado que pinta esta hoja lo genera `inc/criticabits/graficas.php` a
   partir de una tabla normal de Gutenberg. Aquí no se inventa ninguna
   estructura: se le da forma a la que hay.

   Dos decisiones que explican casi todo lo demás:

   1. La tabla SIGUE SIENDO una tabla. No se le pone `display:block` a nada,
      porque en cuanto se hace eso el navegador deja de exponerla como tabla
      y el lector de pantalla pierde la relación entre cada cifra y su
      encabezado. Todo el aspecto de gráfica se consigue con las celdas
      convertidas en cajas flexibles, que no tocan la semántica de la fila.

   2. La barra parte de su ancho final. El estado por defecto de
      `.cb-g__barra` es la escala completa; la animación sólo la encoge para
      volver a crecer, y sólo cuando el navegador sabe animar por posición de
      scroll o cuando el JavaScript ha podido marcarla. Así, si falla la
      animación, la gráfica se ve entera y correcta en lugar de vacía.

   ÍNDICE
     1. Fichas
     2. Panel común
     3. Comparativa de barras
     4. Cara a cara
     5. Anillos de porcentaje
     6. Animación
     7. Pantalla estrecha, impresión y movimiento reducido
   ========================================================================== */

/* ==========================================================================
   1. Fichas
   ========================================================================== */

:root {
	--cb-gr-alto: .7rem;          /* Grosor de la barra en la comparativa. */
	--cb-gr-alto-fino: .3rem;     /* El de las fichas de varias columnas. */
	--cb-gr-pista: rgba(255, 255, 255, .06);
	--cb-gr-radio: 999px;
	--cb-gr-dur: 900ms;
	--cb-gr-escalon: 70ms;        /* Retraso entre una fila y la siguiente. */

	/* Un acento por columna. Se repiten a partir de la quinta. */
	--cb-gr-c1: var(--cb-neon-cyan, #00d4ff);
	--cb-gr-c2: var(--cb-neon-violet, #7a5cff);
	--cb-gr-c3: var(--cb-neon-amber, #ffb14f);
	--cb-gr-c4: #2ee6a8;
}

/* ==========================================================================
   2. Panel común
   --------------------------------------------------------------------------
   La figura ya trae de `criticabits-ui.css` el filete, el radio y el
   desplazamiento lateral. Aquí sólo se le añade fondo y aire: una gráfica
   necesita respirar por dentro mucho más que una tabla de datos.
   ========================================================================== */

.entry-content .cb-g,
.entry-content .cb-d,
.entry-content .cb-a {
	position: relative;
	isolation: isolate;
	padding: clamp(1rem, .6rem + 1.6vw, 1.6rem);
	background-image: linear-gradient(160deg, rgba(34, 41, 57, .55), rgba(18, 22, 32, .72));
	border-color: var(--cb-hairline, rgba(255, 255, 255, .09));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

/*
 * El filete de neón de la esquina superior izquierda.
 *
 * Es la misma marca que llevan el panel y la terminal del sitio, y es lo que
 * hace que una gráfica se lea como parte de Crítica Bits y no como una imagen
 * pegada de otro sitio.
 */
.entry-content .cb-g::before,
.entry-content .cb-d::before,
.entry-content .cb-a::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: clamp(3rem, 18%, 7rem);
	height: 2px;
	background-image: linear-gradient(90deg, var(--cb-neon-pink, #ff005e), var(--cb-neon-violet, #7a5cff));
	border-radius: 0 999px 999px 0;
	pointer-events: none;
}

/* Las tablas de gráfica no llevan cebra ni filetes por fila: la barra ya
   separa una fila de otra, y las dos señales juntas ensucian. */
.entry-content .cb-g table,
.entry-content .cb-d table,
.entry-content .cb-a table {
	border-collapse: separate;
	border-spacing: 0;
}

.entry-content .cb-g th,
.entry-content .cb-g td,
.entry-content .cb-d th,
.entry-content .cb-d td,
.entry-content .cb-a th,
.entry-content .cb-a td {
	border-bottom: 0;
	padding: .5rem .55rem;
	vertical-align: middle;
}

.entry-content .cb-g tbody tr,
.entry-content .cb-d tbody tr,
.entry-content .cb-a tbody tr {
	background-color: transparent;
}

/* La cabecera conserva el rótulo en versalitas de la hoja del sistema, pero
   pierde el degradado inferior: dentro de un panel ya hay bastante línea. */
.entry-content .cb-g thead,
.entry-content .cb-d thead,
.entry-content .cb-a thead {
	background-image: none;
	border-bottom: 1px solid var(--cb-hairline, rgba(255, 255, 255, .09));
}

/*
 * `criticabits-paginas.css` le pone a las tablas de las páginas con hero un
 * fondo y un borde de color en la cabecera, con cuatro clases. Dentro de una
 * gráfica eso dibujaba una banda que la misma gráfica no tiene en una
 * entrada: el mismo bloque con dos aspectos según dónde se ponga.
 */
body .cb-article .entry-content .cb-g thead th,
body .cb-article .entry-content .cb-d thead th,
body .cb-article .entry-content .cb-a thead th,
.entry-content .cb-g thead th,
.entry-content .cb-d thead th,
.entry-content .cb-a thead th {
	background: none;
	border-bottom: 0;
	padding-bottom: .7rem;
	font-size: .68rem;
	letter-spacing: .14em;
	color: var(--cb-ink-3, rgba(255, 255, 255, .62));
}

/*
 * Los tres selectores no son una repetición por descuido.
 *
 * `criticabits-single.css` trae `.cb-article .entry-content figcaption
 * { margin-inline: auto }` con tres clases, y las páginas con hero suman una
 * más. Con dos clases, el pie de la gráfica salía centrado y a 14 px, o sea
 * distinto en una entrada y en una página. Se empata a esas cuentas y se
 * cubre además el caso de que un día el envoltorio `.cb-article` no esté.
 */
body .cb-article .entry-content .cb-g figcaption,
body .cb-article .entry-content .cb-d figcaption,
body .cb-article .entry-content .cb-a figcaption,
.entry-content .cb-g figcaption,
.entry-content .cb-d figcaption,
.entry-content .cb-a figcaption {
	margin: 1rem 0 0;
	padding-top: .85rem;
	border-top: 1px solid var(--cb-hairline, rgba(255, 255, 255, .09));
	font-family: ui-monospace, "SFMono-Regular", "JetBrains Mono", Consolas, "Liberation Mono", monospace;
	font-size: .75rem;
	line-height: 1.55;
	letter-spacing: .02em;
	color: var(--cb-ink-3, rgba(255, 255, 255, .62));
	text-align: left;
}

/*
 * Cifras con dígitos de la misma anchura.
 *
 * Sin esto, un «111» ocupa bastante menos que un «888» en la fuente del
 * sitio, y en una columna de números las unidades no caen en la misma
 * vertical: la gráfica parece descuadrada aunque las barras estén bien.
 */
.entry-content .cb-g__cifra,
.entry-content .cb-d__cifra,
.entry-content .cb-a__valor {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* ==========================================================================
   3. Comparativa de barras
   ========================================================================== */

/*
 * La caja interior de la celda.
 *
 * Es un `span`, así que sin esto no ocuparía el ancho de la celda y la pista
 * se encogería al tamaño de su contenido, que es cero.
 */
.entry-content .cb-g__caja,
.entry-content .cb-d__caja,
.entry-content .cb-a__caja {
	display: block;
	width: 100%;
	min-width: 0;
}

.entry-content .cb-g__rotulo {
	font-size: .9rem;
	line-height: 1.35;
	color: var(--cb-ink-2, rgba(255, 255, 255, .72));
}

.entry-content .cb-g__celda {
	position: relative;
	/* La celda deja de ser un bloque de texto y pasa a ser pista + cifra. */
	--cb-gr-acento: var(--cb-gr-c1);
}

.entry-content .cb-g__pista {
	display: block;
	height: var(--cb-gr-alto);
	border-radius: var(--cb-gr-radio);
	background-color: var(--cb-gr-pista);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
	overflow: hidden;
}

.entry-content .cb-g__barra {
	display: block;
	width: calc(var(--cb-g, 0) * 1%);
	height: 100%;
	min-width: 2px;
	transform-origin: left center;
	border-radius: inherit;
	background-image: linear-gradient(
		90deg,
		color-mix(in srgb, var(--cb-gr-acento) 42%, transparent),
		var(--cb-gr-acento)
	);
	/*
	 * Las barras que no lideran van algo apagadas. No es decoración: es lo
	 * que hace que la mejor cifra se encuentre sin leer los números, que es
	 * para lo que se pone una gráfica en vez de una tabla.
	 */
	opacity: .72;
}

.entry-content .cb-g__celda--lider .cb-g__barra {
	opacity: 1;
	box-shadow: 0 0 16px -3px var(--cb-gr-acento);
}

.entry-content .cb-g__valor {
	display: flex;
	align-items: baseline;
	gap: .22em;
	font-size: .88rem;
	line-height: 1.2;
	color: var(--cb-ink-2, rgba(255, 255, 255, .72));
	white-space: nowrap;
}

.entry-content .cb-g__celda--lider .cb-g__valor {
	font-weight: 650;
	color: var(--cb-gr-acento);
}

.entry-content .cb-g__unidad {
	font-size: .74em;
	letter-spacing: .04em;
	opacity: .7;
}

/* --- Dos columnas: la gráfica de barras clásica --------------------------- */

.entry-content .cb-g--simple table {
	table-layout: auto;
}

/*
 * El rótulo, en un solo renglón.
 *
 * Con `normal`, «Commodore Amiga» partía en dos líneas y esa fila crecía al
 * doble de alto que las demás: en una gráfica de barras, filas de alturas
 * distintas se leen como si midieran cosas distintas. `width: 1%` con
 * `nowrap` hace que la columna mida exactamente lo que mida el rótulo más
 * largo, ni un píxel más.
 */
.entry-content .cb-g--simple .cb-g__rotulo {
	width: 1%;
	padding-left: 0;
	white-space: nowrap;
}

.entry-content .cb-g--simple .cb-g__celda {
	width: 99%;
	padding-right: 0;
	/* Una sola serie: el degradado de la marca en vez de un acento suelto. */
	--cb-gr-acento: var(--cb-neon-violet, #7a5cff);
}

.entry-content .cb-g--simple .cb-g__caja {
	display: flex;
	align-items: center;
	gap: .75rem;
}

.entry-content .cb-g--simple .cb-g__pista {
	flex: 1 1 auto;
	min-width: 3rem;
}

.entry-content .cb-g--simple .cb-g__barra {
	background-image: linear-gradient(90deg, var(--cb-neon-pink, #ff005e), var(--cb-neon-violet, #7a5cff));
}

.entry-content .cb-g--simple .cb-g__celda--lider .cb-g__barra {
	box-shadow: 0 0 18px -4px var(--cb-neon-pink, #ff005e);
}

.entry-content .cb-g--simple .cb-g__celda--lider .cb-g__valor {
	color: #fff;
}

.entry-content .cb-g--simple .cb-g__valor {
	flex: 0 0 auto;
	min-width: 3.2rem;
	justify-content: flex-end;
}

/* --- Tres columnas o más: ficha técnica con medidores --------------------- */

.entry-content .cb-g--multi table {
	table-layout: fixed;
	min-width: 30rem;
}

.entry-content .cb-g--multi .cb-g__rotulo {
	padding-left: 0;
	font-weight: 600;
	color: var(--cb-ink, rgba(255, 255, 255, .9));
}

/*
 * Aquí la cifra va encima y la barra debajo, no una al lado de otra. Con
 * cuatro o cinco columnas no queda ancho para poner las dos cosas en línea:
 * la pista se quedaría en veinte píxeles y dejaría de medir nada.
 *
 * El orden del marcado es pista → cifra, que es el que conviene a la
 * comparativa de dos columnas; `column-reverse` lo invierte aquí sin tener
 * que generar un HTML distinto para cada caso.
 */
.entry-content .cb-g--multi .cb-g__caja {
	display: flex;
	flex-direction: column-reverse;
	gap: .4rem;
}

.entry-content .cb-g--multi .cb-g__pista {
	height: var(--cb-gr-alto-fino);
}

.entry-content .cb-g--multi .cb-g__valor {
	font-size: .95rem;
}

/* Un acento por columna, para poder seguir una columna con la vista. */
.entry-content .cb-g--multi .cb-g__fila > :nth-child(2) { --cb-gr-acento: var(--cb-gr-c1); }
.entry-content .cb-g--multi .cb-g__fila > :nth-child(3) { --cb-gr-acento: var(--cb-gr-c2); }
.entry-content .cb-g--multi .cb-g__fila > :nth-child(4) { --cb-gr-acento: var(--cb-gr-c3); }
.entry-content .cb-g--multi .cb-g__fila > :nth-child(5) { --cb-gr-acento: var(--cb-gr-c4); }
.entry-content .cb-g--multi .cb-g__fila > :nth-child(n+6) { --cb-gr-acento: var(--cb-neon-pink, #ff005e); }

/* ==========================================================================
   4. Cara a cara
   --------------------------------------------------------------------------
   Tres columnas: concepto, uno y otro. Las dos barras de una fila comparten
   escala porque miden lo mismo; el que gana se lleva el acento y una marca.
   ========================================================================== */

.entry-content .cb-d table {
	table-layout: fixed;
	min-width: 26rem;
}

.entry-content .cb-d__concepto {
	width: 30%;
	padding-left: 0;
	font-size: .88rem;
	line-height: 1.35;
	color: var(--cb-ink-2, rgba(255, 255, 255, .72));
}

.entry-content .cb-d__caja {
	display: flex;
	flex-direction: column-reverse;
	gap: .4rem;
}

.entry-content .cb-d__lado--a { --cb-gr-acento: var(--cb-neon-cyan, #00d4ff); }
.entry-content .cb-d__lado--b { --cb-gr-acento: var(--cb-neon-amber, #ffb14f); }

/*
 * El espejo va en la columna de la IZQUIERDA, no en la de la derecha.
 *
 * Con el espejo puesto en la derecha, las dos barras crecían la una hacia la
 * otra y el hueco quedaba en medio: la lectura era «cuánto les falta para
 * tocarse», que no es la comparación que se quiere. Volteando la izquierda,
 * las dos arrancan del canal central y se abren hacia fuera, así que la que
 * más sobresale es la que más mide. Es el mismo dibujo que una gráfica de
 * mariposa, y se entiende sin leer una cifra.
 */
.entry-content .cb-d__lado--a .cb-d__pista { transform: scaleX(-1); }
.entry-content .cb-d__lado--a .cb-d__valor { justify-content: flex-end; }

.entry-content .cb-d__pista {
	display: block;
	height: var(--cb-gr-alto);
	border-radius: var(--cb-gr-radio);
	background-color: var(--cb-gr-pista);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
	overflow: hidden;
}

.entry-content .cb-d__barra {
	display: block;
	width: calc(var(--cb-g, 0) * 1%);
	height: 100%;
	min-width: 2px;
	transform-origin: left center;
	border-radius: inherit;
	background-image: linear-gradient(
		90deg,
		color-mix(in srgb, var(--cb-gr-acento) 40%, transparent),
		var(--cb-gr-acento)
	);
	opacity: .68;
}

.entry-content .cb-d__celda--lider .cb-d__barra {
	opacity: 1;
	box-shadow: 0 0 16px -3px var(--cb-gr-acento);
}

.entry-content .cb-d__valor {
	display: flex;
	align-items: baseline;
	gap: .22em;
	font-size: .92rem;
	line-height: 1.2;
	color: var(--cb-ink-2, rgba(255, 255, 255, .72));
	white-space: nowrap;
}

.entry-content .cb-d__celda--lider .cb-d__valor {
	font-weight: 650;
	color: var(--cb-gr-acento);
}

/* La marca del que gana la fila. Va en la cifra y no en la barra para que se
   entienda también con la hoja de estilo a medio cargar. */
/*
 * La marca del que gana la fila.
 *
 * Va en la cifra y no en la barra para que se entienda también con la hoja a
 * medio cargar, y cada lado la lleva por la cara que da al canal central: en
 * la izquierda detrás de la cifra, en la derecha delante. Las dos marcas
 * quedan así mirándose, que es lo que dice que están compitiendo.
 *
 * Los selectores son compuestos, no descendentes: `cb-d__lado--a` y
 * `cb-d__celda--lider` van las dos en la misma celda.
 */
.entry-content .cb-d__lado--a.cb-d__celda--lider .cb-d__valor::after,
.entry-content .cb-d__lado--b.cb-d__celda--lider .cb-d__valor::before {
	content: "▲";
	font-size: .7em;
	vertical-align: .12em;
}

.entry-content .cb-d__unidad {
	font-size: .74em;
	letter-spacing: .04em;
	opacity: .7;
}

/* Los dos nombres, en la cabecera, con el color de su lado. */
/* Cada nombre, del lado por el que crece su barra. El prefijo con `body` es
   el mismo apaño de cuenta que arriba: las páginas con hero alinean todas las
   celdas de cabecera a la izquierda con cuatro clases. */
body .cb-article .entry-content .cb-d thead th:nth-child(2),
.entry-content .cb-d thead th:nth-child(2) { color: var(--cb-neon-cyan, #00d4ff); text-align: right; }

body .cb-article .entry-content .cb-d thead th:nth-child(3),
.entry-content .cb-d thead th:nth-child(3) { color: var(--cb-neon-amber, #ffb14f); text-align: left; }

/* ==========================================================================
   5. Anillos de porcentaje
   ========================================================================== */

.entry-content .cb-a__rotulo {
	padding-left: 0;
	font-size: .92rem;
	color: var(--cb-ink, rgba(255, 255, 255, .9));
}

.entry-content .cb-a__celda {
	padding-right: 0;
	--cb-gr-acento: var(--cb-neon-cyan, #00d4ff);
}

.entry-content .cb-a__caja {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: .8rem;
}

/*
 * El anillo es un degradado cónico recortado por dentro con una máscara.
 * Se usa máscara y no un círculo de fondo encima porque el panel es
 * translúcido: un disco opaco en el centro se vería como un parche gris.
 */
.entry-content .cb-a__anillo {
	--cb-a-grosor: 5px;
	flex: 0 0 auto;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	background-image: conic-gradient(
		var(--cb-gr-acento) calc(var(--cb-g, 0) * 1%),
		rgba(255, 255, 255, .08) 0
	);
	-webkit-mask-image: radial-gradient(circle, transparent calc(50% - var(--cb-a-grosor)), #000 calc(50% - var(--cb-a-grosor) + 1px));
	mask-image: radial-gradient(circle, transparent calc(50% - var(--cb-a-grosor)), #000 calc(50% - var(--cb-a-grosor) + 1px));
}

.entry-content .cb-a__valor {
	min-width: 3.5rem;
	font-size: 1.05rem;
	font-weight: 650;
	text-align: right;
	color: var(--cb-gr-acento);
}

.entry-content .cb-a__fila:nth-child(4n+2) .cb-a__celda { --cb-gr-acento: var(--cb-gr-c2); }
.entry-content .cb-a__fila:nth-child(4n+3) .cb-a__celda { --cb-gr-acento: var(--cb-gr-c3); }
.entry-content .cb-a__fila:nth-child(4n+4) .cb-a__celda { --cb-gr-acento: var(--cb-gr-c4); }

/* ==========================================================================
   6. Animación
   --------------------------------------------------------------------------
   Dos caminos para lo mismo, y ninguno de los dos deja la gráfica vacía si
   falla.

   El primero es CSS puro: `animation-timeline: view()` liga el avance de la
   animación a la posición del elemento en la pantalla, sin JavaScript y sin
   un solo manejador de scroll. Donde el navegador lo entiende, la barra
   crece mientras se sube hacia ella, y si se vuelve atrás, decrece.

   El segundo es para los navegadores que todavía no lo entienden:
   `criticabits-enhance.js` marca la figura con `cb-gr--js` y le quita
   `cb-gr--espera` al entrar en pantalla. Sólo se aplica a las gráficas que
   están por debajo del pliegue: encoger una que ya se está viendo produciría
   un parpadeo en la primera pintura.
   ========================================================================== */

@keyframes cb-gr-crecer {
	from { transform: scaleX(0); opacity: .25; }
	to   { transform: scaleX(1); }
}

@keyframes cb-gr-girar {
	from { --cb-g: 0; }
}

@supports (animation-timeline: view()) {

	@media (prefers-reduced-motion: no-preference) {

		/*
		 * El cronómetro se declara en la figura, no en la barra, y esto NO es
		 * un detalle de estilo: es la diferencia entre que funcione y que no.
		 *
		 * `view()` a secas mide el elemento contra su antepasado con scroll
		 * más cercano. Y la figura de una gráfica ancha lleva
		 * `overflow-x: auto` desde la hoja del sistema, así que ella misma es
		 * un contenedor con scroll: las barras la tendrían a ella como
		 * referencia, estarían siempre dentro de su propio marco y la
		 * animación no llegaría a arrancar nunca.
		 *
		 * Con un cronómetro con nombre puesto en la figura, lo que se mide es
		 * la figura contra la página, que es lo que se quería. Las barras se
		 * limitan a engancharse a él por el nombre.
		 */
		.entry-content .cb-g,
		.entry-content .cb-d,
		.entry-content .cb-a {
			view-timeline-name: --cb-gr-vista;
			view-timeline-axis: block;
		}

		.entry-content .cb-g__barra,
		.entry-content .cb-d__barra {
			animation: cb-gr-crecer linear both;
			animation-timeline: --cb-gr-vista;
			animation-range: entry 30% cover 42%;
		}

		/* El anillo anima la propia cifra del degradado cónico, que hay que
		   registrar como número para que el navegador sepa interpolarla. */
		.entry-content .cb-a__anillo {
			animation: cb-gr-girar linear both;
			animation-timeline: --cb-gr-vista;
			animation-range: entry 30% cover 45%;
		}
	}
}

@property --cb-g {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

/* --- Camino de respaldo, con JavaScript ---------------------------------- */

/*
 * La transición va sólo en la SALIDA de la espera.
 *
 * Declarada en los dos estados, el momento en que JavaScript pone la clase
 * también se animaba: la barra se veía encogerse de largo a cero antes de
 * volver a crecer. Poniéndola aquí, entrar en la espera es instantáneo
 * —y como sólo se marcan las gráficas que están por debajo del pliegue, ese
 * salto no lo ve nadie— y lo único que se anima es el crecimiento.
 */
.entry-content .cb-gr--js:not(.cb-gr--espera) .cb-g__barra,
.entry-content .cb-gr--js:not(.cb-gr--espera) .cb-d__barra {
	transition: transform var(--cb-gr-dur) var(--cb-ease-out, cubic-bezier(.16, 1, .3, 1));
	transition-delay: calc(var(--cb-i, 0) * var(--cb-gr-escalon));
}

.entry-content .cb-gr--js.cb-gr--espera .cb-g__barra,
.entry-content .cb-gr--js.cb-gr--espera .cb-d__barra {
	transform: scaleX(0);
}

.entry-content .cb-gr--js:not(.cb-gr--espera) .cb-a__anillo {
	transition: --cb-g var(--cb-gr-dur) var(--cb-ease-out, cubic-bezier(.16, 1, .3, 1));
	transition-delay: calc(var(--cb-i, 0) * var(--cb-gr-escalon));
}

.entry-content .cb-gr--js.cb-gr--espera .cb-a__anillo {
	--cb-g: 0;
}

/* ==========================================================================
   7. Pantalla estrecha, impresión y movimiento reducido
   ========================================================================== */

@media (max-width: 600px) {

	/*
	 * Fuera el ancho mínimo.
	 *
	 * Con `min-width: 30rem` en una pantalla de 390 px, la figura se
	 * desplazaba en horizontal y dejaba fuera la última columna. Medido en la
	 * entrada de la RTX 5070 Ti: la columna oculta era «FPS Promedio», o sea
	 * exactamente el dato por el que existe la gráfica, y no había ni un
	 * degradado que avisara de que hubiera más a la derecha.
	 *
	 * Cabe todo aunque las columnas queden estrechas. Una columna estrecha se
	 * lee; una columna que no está no se lee de ninguna manera.
	 */
	.entry-content .cb-g--multi table,
	.entry-content .cb-d table {
		min-width: 0;
		width: 100%;
	}

	/*
	 * Los encabezados, en dos renglones si hace falta.
	 *
	 * Llegan con `white-space: nowrap` y 1,5 px de espaciado entre letras.
	 * Medido a 390 px: la celda mide 74 px y «Plataforma» pide 99, así que se
	 * salía por encima de «Gráficos» y «Jugabilidad» se quedaba cortada en
	 * «Jugabilid». Con el espaciado a la mitad y permiso para partir, cabe.
	 */
	.entry-content .cb-g thead th,
	.entry-content .cb-d thead th,
	.entry-content .cb-a thead th {
		white-space: normal;
		letter-spacing: .06em;
		font-size: .62rem;
		line-height: 1.25;
		overflow-wrap: anywhere;
	}

	/* Con menos ancho, el aire entre celdas estorba más de lo que ordena. */
	.entry-content .cb-g th,
	.entry-content .cb-g td,
	.entry-content .cb-d th,
	.entry-content .cb-d td,
	.entry-content .cb-a th,
	.entry-content .cb-a td {
		padding: .45rem .3rem;
	}

	.entry-content .cb-g--multi .cb-g__valor,
	.entry-content .cb-g--multi .cb-g__rotulo {
		font-size: .8rem;
	}

	/*
	 * La columna del rótulo cede ancho a las de datos.
	 *
	 * `table-layout: fixed` reparte a partes iguales: en la comparativa de
	 * Turrican, cuatro columnas a 74 px. Las cinco estrellas de una
	 * puntuación piden 70, así que llenaban la celda de punta a punta y las
	 * tres columnas se leían como una sola tira de quince estrellas seguidas.
	 * Con el rótulo al 26 %, cada columna de datos sube a 94 px y vuelve a
	 * verse dónde acaba una y empieza la siguiente.
	 */
	.entry-content .cb-g--multi .cb-g__rotulo,
	.entry-content .cb-g--multi thead th:first-child {
		width: 26%;
	}

	.entry-content .cb-g--simple .cb-g__rotulo {
		max-width: 7.5rem;
		font-size: .82rem;
	}

	.entry-content .cb-g--simple .cb-g__valor,
	.entry-content .cb-d__valor {
		font-size: .82rem;
	}

	/*
	 * En el cara a cara, la columna del concepto se lleva más ancho y las
	 * barras se afinan. Medido a 390 px: con el 30 % de antes, «Consumo en
	 * carga» partía en tres renglones y la fila crecía al triple de alto
	 * que las demás.
	 */
	.entry-content .cb-d__concepto {
		width: 34%;
		font-size: .8rem;
	}

	.entry-content .cb-a__anillo {
		width: 2.1rem;
		height: 2.1rem;
		--cb-a-grosor: 4px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.entry-content .cb-g__barra,
	.entry-content .cb-d__barra,
	.entry-content .cb-a__anillo {
		animation: none !important;
		transition: none !important;
		transform: none !important;
	}

	/* Si el movimiento está desactivado, la espera no debe dejar nada a cero. */
	.entry-content .cb-gr--espera .cb-a__anillo {
		--cb-g: var(--cb-g);
	}
}

@media print {

	.entry-content .cb-g,
	.entry-content .cb-d,
	.entry-content .cb-a {
		background: none;
		box-shadow: none;
	}

	.entry-content .cb-g__barra,
	.entry-content .cb-d__barra {
		background: #444 !important;
		opacity: 1;
	}
}