/* ---------- Diagnóstico ----------
 * El cuestionario paso a paso y su resultado. Los campos y el resumen de
 * errores son los de la captación (`lead.css`); aquí van el avance, las
 * opciones, las acciones y el mapa de dimensiones de `DESIGN.md`.
 *
 * Ningún valor literal de color ni de tipografía: todo sale de los tokens. */

.diagnostic {
	max-width: var(--spacing-measure);
}

.diagnostic__title {
	margin-top: var(--spacing-lg);
	font-size: var(--font-size-h2);
	line-height: var(--font-leading-snug);
}

/* Recibe el foco al cambiar de pantalla, y no es un control que nadie haya
 * elegido: no dibuja anillo. */
.diagnostic__title:focus {
	outline: none;
}

.diagnostic__body {
	margin-top: var(--spacing-md);
}

/* ---------- Avance ---------- */

.diagnostic-progress {
	display: grid;
	gap: var(--spacing-xs);
}

.diagnostic-progress__label {
	font-size: var(--font-size-small);
	color: var(--color-ink-secondary);
}

.diagnostic-progress__bar {
	position: relative;
	height: 8px;
	border-radius: var(--rounded-pill);
	background: var(--color-surface-sunken);
	overflow: hidden;
}

/* En morado y no en naranja: el naranja de la pantalla es la acción. */
.diagnostic-progress__fill {
	position: absolute;
	inset: 0 auto 0 0;
	border-radius: inherit;
	background: var(--color-brand-purple);
}

/* ---------- Opciones ----------
 * Toda la tarjeta es el objetivo táctil, y la elegida se distingue por el
 * borde, no solo por el punto del control. */

.diagnostic-form {
	margin-top: var(--spacing-lg);
}

.diagnostic-options {
	display: grid;
	gap: var(--spacing-sm);
	margin: 0;
	padding: 0;
	border: 0;
}

.diagnostic-option {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-sm);
	min-height: var(--layout-touch-target);
	padding: var(--spacing-md);
	border: 1px solid var(--color-border-control);
	border-radius: var(--rounded-md);
	background: var(--color-surface-raised);
	cursor: pointer;
}

.diagnostic-option input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: calc(var(--spacing-unit) / 2);
}

/* El borde crece hacia dentro: la tarjeta elegida no empuja a las demás. */
.diagnostic-option:has(input:checked) {
	border-width: 2px;
	border-color: var(--color-brand-blue);
	padding: calc(var(--spacing-md) - 1px);
}

.diagnostic-option:has(input:focus-visible) {
	outline: 3px solid var(--color-border-focus);
	outline-offset: 2px;
}

.diagnostic-option input:focus-visible {
	outline: none;
}

/* ---------- Acciones ----------
 * La principal va primero en el documento y en pantalla: es la que dispara
 * Intro. */

.diagnostic-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-sm);
	margin-top: var(--spacing-xl);
}

/* ---------- Resultado ---------- */

.diagnostic-result {
	margin-top: var(--spacing-lg);
	max-width: 880px;
	padding: var(--spacing-lg);
	border-radius: var(--rounded-lg);
	background: var(--color-surface-raised);
	box-shadow: var(--shadow-card);
}

/* La esquina de pétalo solo cuando hay ancho para su relleno: a 360 px la curva
 * se comería el mapa. */
@media (min-width: 40rem) {
	.diagnostic-result {
		padding: var(--spacing-xl);
		padding-block-end: calc(var(--rounded-petal-corner) + var(--spacing-lg));
		border-end-start-radius: var(--rounded-petal-corner);
	}
}

.diagnostic-result__title {
	margin-top: var(--spacing-xs);
	font-size: var(--font-size-h2);
	line-height: var(--font-leading-snug);
}

.diagnostic-result__stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-xs) var(--spacing-lg);
	margin: var(--spacing-md) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--font-size-small);
	color: var(--color-ink-secondary);
}

.diagnostic-result__stats strong {
	font-weight: var(--font-weight-black);
	color: var(--color-ink-primary);
}

.diagnostic-result__block {
	margin-top: var(--spacing-xl);
}

.diagnostic-result__subhead {
	font-size: var(--font-size-h3);
}

.diagnostic-result__sub {
	margin-top: var(--spacing-xs);
	font-size: var(--font-size-small);
	color: var(--color-ink-secondary);
}

/* ---------- Mapa de dimensiones (DESIGN.md · Components) ----------
 * Cada tramo, del más bajo al más alto, toma sus tokens por posición: el color
 * nunca lo decide el texto de la etiqueta, que quien edita puede cambiar. */

.dimension-map {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
	margin: var(--spacing-md) 0 0;
	padding: 0;
	list-style: none;
}

/* La fila ocupa la tarjeta: el tope de lectura de la base es para texto, y
 * aquí lo lleva solo la lectura. */
.dimension-map__row {
	max-width: none;
}

.dimension-map__row--band-1 {
	--score-bar: var(--color-score-high-priority);
	--score-ink: var(--color-score-high-priority-ink);
	--score-tint: var(--color-score-high-priority-tint);
}

.dimension-map__row--band-2 {
	--score-bar: var(--color-score-developing);
	--score-ink: var(--color-score-developing-ink);
	--score-tint: var(--color-score-developing-tint);
}

.dimension-map__row--band-3 {
	--score-bar: var(--color-score-solid);
	--score-ink: var(--color-score-solid-ink);
	--score-tint: var(--color-score-solid-tint);
}

.dimension-map__row--band-4 {
	--score-bar: var(--color-score-strength);
	--score-ink: var(--color-score-strength-ink);
	--score-tint: var(--color-score-strength-tint);
}

.dimension-map__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-xs);
}

.dimension-map__name {
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-black);
	color: var(--color-ink-primary);
}

/* En caja de frase y sobre tint: el botón es la única superficie naranja
 * saturada con texto de la pantalla. */
.dimension-map__label {
	display: inline-block;
	padding: var(--spacing-unit) var(--spacing-sm);
	border-radius: var(--rounded-pill);
	background: var(--score-tint, var(--color-surface-sunken));
	color: var(--score-ink, var(--color-ink-primary));
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-bold);
	line-height: var(--font-leading-snug);
}

.dimension-map__line {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	margin-top: var(--spacing-xs);
}

.dimension-map__bar {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	height: 12px;
	border-radius: var(--rounded-pill);
	background: var(--color-surface-sunken);
	overflow: hidden;
}

.dimension-map__fill {
	position: absolute;
	inset: 0 auto 0 0;
	border-radius: inherit;
	background: var(--score-bar, var(--color-ink-secondary));
}

/* Las marcas en 1, 2 y 3, del color de la tarjeta, sobre pista y relleno. */
.dimension-map__bar::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		to right,
		transparent calc(25% - 1px),
		var(--color-surface-raised) calc(25% - 1px),
		var(--color-surface-raised) calc(25% + 1px),
		transparent calc(25% + 1px),
		transparent calc(50% - 1px),
		var(--color-surface-raised) calc(50% - 1px),
		var(--color-surface-raised) calc(50% + 1px),
		transparent calc(50% + 1px),
		transparent calc(75% - 1px),
		var(--color-surface-raised) calc(75% - 1px),
		var(--color-surface-raised) calc(75% + 1px),
		transparent calc(75% + 1px)
	);
}

/* Ancho fijo: las cinco barras terminan alineadas. */
.dimension-map__score {
	flex: 0 0 4.5em;
	text-align: right;
	font-weight: var(--font-weight-black);
	font-variant-numeric: tabular-nums;
	color: var(--color-ink-primary);
}

.dimension-map__score small {
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-regular);
	color: var(--color-ink-secondary);
}

.dimension-map__reading {
	margin-top: var(--spacing-xs);
	font-size: var(--font-size-small);
	color: var(--color-ink-secondary);
}

/* ---------- Prioridad, fortaleza y siguiente paso ---------- */

.diagnostic-priority {
	padding: var(--spacing-lg);
	border-radius: var(--rounded-md);
	background: var(--color-surface-sunken);
}

.diagnostic-priority__title {
	margin-top: var(--spacing-xs);
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-black);
}

.diagnostic-priority__notice {
	margin-top: var(--spacing-md);
	padding-top: var(--spacing-md);
	border-top: 1px solid var(--color-border-default);
	font-size: var(--font-size-small);
}

.diagnostic-result__pair {
	display: grid;
	gap: var(--spacing-xl);
}

@media (min-width: 40rem) {
	.diagnostic-result__pair {
		grid-template-columns: 1fr 1fr;
	}
}

.diagnostic-result__name {
	margin-top: var(--spacing-xs);
	font-size: var(--font-size-h4);
}

.diagnostic-cta__lead {
	margin-bottom: var(--spacing-md);
	font-size: var(--font-size-body-lg);
}

.diagnostic-cta__note {
	margin-top: var(--spacing-xs);
	font-size: var(--font-size-small);
	color: var(--color-ink-secondary);
}