@charset "UTF-8";
/* ==========================================================================
   CriticaBits — la rúbrica del autor
   --------------------------------------------------------------------------
   La ficha de valoración del final del análisis, compuesta como un marcador
   de recreativa: barra de título, criterios con medidor de diez casillas y la
   nota final destacada. El marcado lo genera `inc/criticabits/rubrica.php` a
   partir del bloque que ya está escrito en la entrada.

   La tipografía de píxeles se queda: es lo que le da carácter y es lo que se
   pidió conservar. Lo que cambia es el reparto. «Press Start 2P» mide casi el
   doble por carácter que una monoespaciada normal, así que se reserva para el
   rótulo, el título y las cifras —lo que se mira— y la descripción de cada
   criterio pasa a la monoespaciada del sistema, que es lo que se lee. Antes
   iba todo en píxeles, en mayúsculas y centrado: cuatro líneas de 45
   caracteres cada una que había que descifrar palabra a palabra.

   ÍNDICE
     1. Ancho y caja
     2. Barra de título
     3. Criterios y medidor
     4. Nota final
     5. El bicho
     6. Pantallas estrechas
     7. Movimiento reducido
   ========================================================================== */

/* ==========================================================================
   1. Ancho y caja
   ========================================================================== */

.cb-rubrica {
	--cb-rub-tinta: #7ef9ff;
	--cb-rub-tinta-apagada: rgba(126, 249, 255, .55);
	--cb-rub-marco: rgba(126, 249, 255, .45);
	--cb-rub-fondo: #0b0f18;
	--cb-rub-celda: rgba(126, 249, 255, .14);
	--cb-rub-pixel: "Press Start 2P", ui-monospace, monospace;
	--cb-rub-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Consolas, monospace;

	position: relative;
	margin-block: var(--cb-s7, 3rem);
	border: 1px solid var(--cb-rub-marco);
	border-radius: var(--cb-radio-m, 10px);
	background: var(--cb-rub-fondo);
	color: var(--cb-rub-tinta);
	/* El halo, quieto. Antes pulsaba en bucle sin parar. */
	box-shadow:
		0 0 0 1px rgba(126, 249, 255, .08),
		0 24px 60px -30px rgba(0, 212, 255, .55);
	overflow: hidden;
}

/*
 * El ancho.
 *
 * Iba en `grid-column: wide`, la columna ancha de la rejilla del artículo, y
 * por eso quedaba a un palmo del borde de la ventana mientras el texto de
 * alrededor respiraba. La rúbrica es texto: va en la columna de lectura, como
 * los párrafos que la rodean.
 */
.cb-article .entry-content > .cb-rubrica {
	grid-column: text;
}

/* Las líneas de barrido de la pantalla, muy leves: se intuyen, no se miran. */
.cb-rubrica::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: repeating-linear-gradient(
		180deg,
		rgba(126, 249, 255, .035) 0 1px,
		transparent 1px 4px
	);
}

/* ==========================================================================
   2. Barra de título
   ========================================================================== */

.cb-rubrica__barra {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .7rem 1.1rem;
	border-bottom: 1px solid var(--cb-rub-marco);
	background: rgba(126, 249, 255, .06);
}

/* Los tres pilotos de la ventana, como en los comentarios. */
.cb-rubrica__pilotos {
	flex: 0 0 auto;
	width: 38px;
	height: 8px;
	background:
		radial-gradient(circle 4px at 4px 4px, #ff5f57 96%, transparent),
		radial-gradient(circle 4px at 19px 4px, #ffbd2e 96%, transparent),
		radial-gradient(circle 4px at 34px 4px, #28c840 96%, transparent);
	opacity: .85;
}

/*
 * El rótulo va en la monoespaciada del sistema y no en la de píxeles.
 * «Press Start 2P» no trae mayúsculas acentuadas: con `text-transform:
 * uppercase` la Ú caía en la tipografía de reserva y salía «RúBRICA DEL
 * AUTOR», con una letra de otra familia y de otro tamaño en medio de la
 * palabra. Lo mismo pasaba en «PUNTUACIóN FINAL».
 *
 * Además es el mismo tratamiento que llevan los demás rótulos del sitio —la
 * barra de comentarios, «EN ESTA PÁGINA», los títulos de la columna lateral—,
 * así que la ficha deja de ser una isla.
 */
.cb-rubrica__rotulo {
	font-family: var(--cb-rub-mono);
	font-size: .68rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cb-rub-tinta);
}

.cb-rubrica__cuerpo {
	position: relative;
	z-index: 1;
	padding: 1.5rem 1.4rem 1.4rem;
}

.cb-rubrica__titulo {
	margin: 0 0 1.5rem;
	font-family: var(--cb-rub-pixel);
	font-size: .82rem;
	line-height: 1.7;
	letter-spacing: .02em;
	color: #fff;
	text-wrap: balance;
}

/* ==========================================================================
   3. Criterios y medidor
   --------------------------------------------------------------------------
   Cada criterio es una rejilla de tres columnas: nombre, medidor y nota. La
   descripción cae debajo, a lo ancho de las tres. Así el ojo baja por la
   columna de las notas sin tropezar con texto de longitudes distintas, que es
   lo que se busca en una ficha de valoración.
   ========================================================================== */

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

/*
 * La primera columna va a un ancho fijo y no a `auto`.
 *
 * Cada criterio es su propia rejilla, así que con `auto` cada fila medía su
 * columna por su cuenta: los cuatro medidores empezaban en cuatro verticales
 * distintas —265, 275, 265 y 265 px medidos— y la columna de notas quedaba
 * dentada. Con un ancho fijo las cuatro filas comparten cuadrícula sin
 * necesidad de `subgrid`, que todavía no está en todos los navegadores.
 */
.cb-rubrica__criterio {
	display: grid;
	grid-template-columns: 8.75rem 1fr 4.5rem;
	align-items: center;
	gap: .45rem .9rem;
	margin: 0;
	padding: .85rem 0;
	border-top: 1px solid rgba(126, 249, 255, .14);
}

.cb-rubrica__criterio:first-child {
	border-top: 0;
	padding-top: 0;
}

.cb-rubrica__nombre {
	font-family: var(--cb-rub-pixel);
	font-size: .62rem;
	line-height: 1.5;
	letter-spacing: .02em;
	color: var(--cb-rub-tinta);
}

/* --- El medidor ----------------------------------------------------------
   Diez casillas, como las barras de energía de los juegos de los que habla el
   sitio. Es lo que convierte cuatro cifras sueltas en algo comparable de un
   vistazo. */

.cb-rubrica__medidor {
	display: flex;
	gap: 3px;
	min-width: 6rem;
}

.cb-rubrica__celda {
	flex: 1 1 auto;
	height: 12px;
	background: var(--cb-rub-celda);
	/* Esquinas vivas: es un medidor de píxeles, no una barra de progreso. */
	border-radius: var(--cb-radio-xs, 4px);
}

.cb-rubrica__celda.is-llena {
	background: var(--cb-rub-tinta);
	box-shadow: 0 0 8px -1px rgba(126, 249, 255, .8);
}

/* La media casilla: un 9,5 no puede pintar lo mismo que un 10. */
.cb-rubrica__celda.is-media {
	background: linear-gradient(90deg, var(--cb-rub-tinta) 50%, var(--cb-rub-celda) 50%);
	box-shadow: 0 0 8px -1px rgba(126, 249, 255, .45);
}

.cb-rubrica__nota {
	font-family: var(--cb-rub-pixel);
	font-size: .72rem;
	line-height: 1;
	white-space: nowrap;
	text-align: right;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.cb-rubrica__sobre {
	font-size: .72em;
	color: var(--cb-rub-tinta-apagada);
}

/* La descripción, en la monoespaciada del sistema, colgando del medidor. */
.cb-rubrica__detalle {
	grid-column: 2 / -1;
	font-family: var(--cb-rub-mono);
	font-size: .8125rem;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	color: rgba(255, 255, 255, .62);
}

/* ==========================================================================
   4. Nota final
   ========================================================================== */

.cb-rubrica__pie {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.1rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--cb-rub-marco);
}

.cb-rubrica__final {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: .5rem;
	margin: 0 0 0 auto;
	text-align: right;
}

.cb-rubrica__final-rotulo {
	font-family: var(--cb-rub-mono);
	font-size: .68rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cb-rub-tinta-apagada);
}

/*
 * La nota final, del tamaño que le corresponde: es el dato por el que mucha
 * gente entra al artículo. Antes era una línea más, en una chapa cian con
 * texto negro de 20 px.
 */
.cb-rubrica__final-nota {
	font-family: var(--cb-rub-pixel);
	font-size: clamp(1.35rem, 1rem + 1.6vw, 2rem);
	line-height: 1;
	color: #fff;
	font-variant-numeric: tabular-nums;
	text-shadow: 0 0 22px rgba(126, 249, 255, .6);
}

.cb-rubrica__final-nota .cb-rubrica__sobre {
	font-size: .45em;
}

/* ==========================================================================
   5. El bicho
   --------------------------------------------------------------------------
   El dibujo de píxeles que acompaña a la rúbrica. Iba en `position:absolute`
   con un `bottom` y un `left` negativos escritos a ojo —y distintos en cada
   entrada— que lo sacaban fuera del marco. Ahora vive dentro de la ficha, en
   la esquina que le corresponde, y se alinea solo.
   ========================================================================== */

.cb-rubrica__bicho {
	flex: 0 0 auto;
	width: auto;
	height: clamp(56px, 12vw, 84px);
	margin: 0;
	/* Los dibujos son de pocos píxeles: escalarlos suavizados los emborrona. */
	image-rendering: pixelated;
	box-shadow: none;
	border-radius: 0;
	align-self: flex-end;
}

/* ==========================================================================
   6. Pantallas estrechas
   ========================================================================== */

@media (max-width: 600px) {

	.cb-rubrica__criterio {
		grid-template-columns: 1fr auto;
	}

	/* El medidor pasa a su propia línea: a 360 px, con el nombre en píxeles
	   delante, le quedaban 40 px y las diez casillas no se distinguían. */
	.cb-rubrica__medidor {
		grid-column: 1 / -1;
		grid-row: 2;
		min-width: 0;
	}

	.cb-rubrica__detalle {
		grid-column: 1 / -1;
		grid-row: 3;
	}

	/* En columna, el bicho se quedaba solo a la derecha con un hueco vacío
	   encima de la nota. Los dos a la izquierda, uno debajo del otro. */
	.cb-rubrica__pie {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	.cb-rubrica__bicho {
		align-self: flex-start;
	}

	.cb-rubrica__final {
		align-items: flex-start;
		margin-left: 0;
		text-align: left;
	}
}

/* ==========================================================================
   7. Movimiento reducido
   --------------------------------------------------------------------------
   No hay nada que apagar: la ficha no se mueve. Las dos animaciones que tenía
   —el marco pulsando cada dos segundos y el rótulo parpadeando cada medio
   segundo, las dos infinitas y ninguna con esta consulta— se han retirado.
   Una caja que late en el borde del ojo mientras se lee el párrafo de al lado
   no aporta nada y a quien tiene sensibilidad al movimiento le molesta de
   verdad.
   ========================================================================== */