/*
 * RU Herramientas · estilos de las herramientas (ponderaciones, beca y test).
 * Se apoya en los tokens y componentes del tema RU; aquí solo va lo propio de estas páginas.
 * Móvil primero (375 px). Sin colores ni medidas fuera de los tokens.
 */
@layer templates {
	.ruh-muted {
		font-weight: var(--weight-regular);
		color: var(--text-muted);
	}

	.ruh-mt {
		margin-block-start: var(--space-8);
	}

	.ruh-intro {
		max-inline-size: var(--measure);
		margin-block-end: var(--space-6);
		color: var(--text-secondary);
	}

	.ruh-foot {
		max-inline-size: var(--measure);
		margin-block-start: var(--block-y);
		font-size: var(--text-body-sm);
		color: var(--text-muted);
	}

	.ruh .ru-section__head h2 {
		text-wrap: balance;
	}

	/* Marca de ponderación: 0,2 en primario, 0,1 en neutro. */
	.ruh-w {
		display: inline-grid;
		place-items: center;
		min-inline-size: 2.25rem;
		padding: .125rem var(--space-2);
		border-radius: var(--radius-full);
		font-size: var(--text-caption);
		font-weight: var(--weight-semibold);
		font-variant-numeric: tabular-nums;
		line-height: 1.5;
	}

	.ruh-w--2 {
		background: var(--accent);
		color: var(--neutral-0);
	}

	.ruh-w--1 {
		background: var(--primary-100);
		color: var(--primary-800);
	}

	.ruh-legend {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-2);
		font-size: var(--text-body-sm);
		color: var(--text-secondary);
	}

	.ruh-legend .ruh-w--1 {
		margin-inline-start: var(--space-3);
	}

	/* ---- Ponderaciones: buscador. */
	.ruh-pond__form {
		display: grid;
		gap: var(--space-6);
		padding: clamp(var(--space-4), 3vw, var(--space-8));
		background: var(--bg-subtle);
		border-radius: var(--radius-2xl);
	}

	.ruh-pond__fields {
		display: grid;
		gap: var(--space-4);
	}

	.ruh [hidden],
	.ruh-result[hidden] {
		display: none;
	}

	.ruh-pond__mats > summary {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		min-block-size: var(--tap);
		font-size: var(--text-label);
		font-weight: var(--weight-medium);
		color: var(--neutral-700);
		cursor: pointer;
		list-style: none;
	}

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

	.ruh-pond__mats > summary > span:first-child {
		flex: 1;
	}

	.ruh-pond__mats > summary .ru-icon {
		color: var(--neutral-500);
		transition: transform var(--dur) var(--ease-out);
	}

	.ruh-pond__mats[open] > summary .ru-icon {
		transform: rotate(45deg);
	}

	.ruh-pond__mats .ru-chips {
		margin-block-start: var(--space-2);
	}

	.ruh-pond__mats .ru-chip {
		cursor: pointer;
	}

	.ruh-pond__status {
		font-size: var(--text-body-sm);
		font-weight: var(--weight-medium);
		color: var(--text-secondary);
	}

	.ruh-pond__actions:has([hidden]) {
		display: none;
	}

	/* ---- Ponderaciones: tabla por universidad. */
	.ruh-unis {
		display: grid;
		gap: var(--space-3);
	}

	.ruh-uni {
		background: var(--neutral-0);
		border: 1px solid var(--border);
		border-radius: var(--radius-xl);
	}

	.ruh-uni > summary {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: var(--space-1) var(--space-4);
		min-block-size: var(--control-lg);
		padding: var(--space-4) var(--space-4);
		cursor: pointer;
		list-style: none;
	}

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

	.ruh-uni__name {
		font-size: var(--text-h4);
		font-weight: var(--weight-semibold);
		letter-spacing: var(--tracking-snug);
	}

	.ruh-uni__meta {
		grid-column: 1;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-2);
		font-size: var(--text-body-sm);
		color: var(--text-muted);
	}

	.ruh-uni > summary .ru-icon {
		grid-column: 2;
		grid-row: 1 / span 2;
		color: var(--neutral-500);
		transition: transform var(--dur) var(--ease-out);
	}

	.ruh-uni[open] > summary .ru-icon {
		transform: rotate(180deg);
	}

	.ruh-uni[open] > summary {
		border-block-end: 1px solid var(--border);
	}

	.ruh-rows {
		display: grid;
		gap: 0;
	}

	.ruh-row {
		display: grid;
		align-content: start;
		gap: var(--space-2);
		padding: var(--space-4);
		border-block-end: 1px solid var(--border);
	}

	.ruh-row:last-child {
		border-block-end: 0;
	}

	.ruh-row__name {
		font-weight: var(--weight-semibold);
		line-height: 1.35;
	}

	.ruh-row__w {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: baseline;
		gap: var(--space-3);
		font-size: var(--text-body-sm);
		line-height: 1.5;
		color: var(--text-secondary);
	}

	.ruh-row__l {
		min-inline-size: 0;
	}

	.ruh-row__w mark {
		padding: 0 .2em;
		background: var(--lime-300);
		border-radius: var(--radius-sm);
		color: var(--neutral-900);
		font-weight: var(--weight-medium);
	}

	.ruh-row__me {
		padding: var(--space-2) var(--space-3);
		background: var(--accent-soft);
		border-radius: var(--radius-md);
		font-size: var(--text-body-sm);
		color: var(--primary-800);
	}

	.ruh-row__me.is-none {
		background: var(--bg-muted);
		color: var(--text-secondary);
	}

	/* ---- Ponderaciones: demostración «cuánto suma». */
	.ruh-demo__grid,
	.ruh-beca__grid {
		display: grid;
		gap: var(--space-8);
		align-items: start;
	}

	.ruh-demo__form {
		display: grid;
		gap: var(--space-6);
	}

	.ruh-demo__title {
		font-size: var(--text-h3);
		font-weight: var(--weight-semibold);
		letter-spacing: var(--tracking-snug);
	}

	.ruh-range {
		inline-size: 100%;
		block-size: var(--tap);
		accent-color: var(--accent);
	}

	.ruh-seg {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
		min-inline-size: 0;
	}

	.ruh-seg legend {
		inline-size: 100%;
		margin-block-end: var(--space-2);
	}

	.ruh-seg label,
	.ruh-scale label {
		position: relative;
		flex: 1 1 auto;
	}

	.ruh-seg input,
	.ruh-scale input {
		position: absolute;
		inset: 0;
		inline-size: 100%;
		block-size: 100%;
		margin: 0;
		opacity: 0;
		cursor: pointer;
	}

	.ruh-seg span,
	.ruh-scale span {
		display: grid;
		place-items: center;
		min-block-size: var(--tap);
		padding-inline: var(--space-3);
		background: var(--neutral-0);
		border: 1px solid var(--border-strong);
		border-radius: var(--radius-md);
		font-size: var(--text-body-sm);
		font-weight: var(--weight-medium);
		color: var(--neutral-700);
		transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
	}

	.ruh-seg input:checked + span,
	.ruh-scale input:checked + span {
		background: var(--accent);
		border-color: var(--accent);
		color: var(--neutral-0);
	}

	.ruh-seg input:focus-visible + span,
	.ruh-scale input:focus-visible + span {
		box-shadow: var(--ring);
		border-color: var(--focus);
	}

	.ruh-demo__out,
	.ruh-beca__result {
		display: grid;
		gap: var(--space-4);
		padding: var(--space-6);
		background: var(--neutral-0);
		border: 1px solid var(--border);
		border-radius: var(--radius-2xl);
		box-shadow: var(--shadow-md);
	}

	.ruh-demo__big {
		font-size: clamp(2.75rem, 2rem + 3vw, 3.75rem);
		font-weight: var(--weight-bold);
		line-height: 1;
		letter-spacing: -.04em;
		font-variant-numeric: tabular-nums;
		color: var(--accent);
	}

	.ruh-demo__big small {
		font-size: var(--text-body);
		font-weight: var(--weight-medium);
		letter-spacing: 0;
		color: var(--text-secondary);
	}

	.ruh-demo__note {
		font-size: var(--text-body-sm);
		line-height: var(--leading-normal);
		color: var(--text-secondary);
	}

	.ruh-bar,
	.ruh-progress {
		block-size: .625rem;
		background: var(--chart-track);
		border-radius: var(--radius-full);
		overflow: hidden;
	}

	.ruh-bar span,
	.ruh-progress span {
		display: block;
		block-size: 100%;
		inline-size: 0;
		background: var(--chart-1);
		border-radius: var(--radius-full);
		transition: inline-size var(--dur) var(--ease-out);
	}

	.ruh-pending {
		margin-block-start: var(--space-8);
	}

	.ruh-pending__list {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2) var(--space-6);
		margin-block-start: var(--space-3);
		font-size: var(--text-body-sm);
		color: var(--text-secondary);
	}

	.ruh-formula {
		padding: var(--space-4) var(--space-6);
		background: var(--bg-subtle);
		border-radius: var(--radius-lg);
		font-weight: var(--weight-semibold);
		font-variant-numeric: tabular-nums;
		color: var(--neutral-900);
	}

	/* ---- Beca. */
	.ruh-beca__form {
		display: grid;
		gap: var(--space-8);
	}

	.ruh-beca__form legend,
	.ruh-beca__more > summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-3);
		margin-block-end: var(--space-4);
		font-size: var(--text-h3);
		font-weight: var(--weight-semibold);
		letter-spacing: var(--tracking-snug);
	}

	.ruh-beca__more > summary {
		min-block-size: var(--tap);
		margin-block-end: 0;
		cursor: pointer;
		list-style: none;
	}

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

	.ruh-beca__more > summary .ru-icon {
		color: var(--neutral-500);
		transition: transform var(--dur) var(--ease-out);
	}

	.ruh-beca__more[open] > summary .ru-icon {
		transform: rotate(45deg);
	}

	.ruh-beca__more[open] > summary {
		margin-block-end: var(--space-4);
	}

	.ruh-beca__fields {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
		gap: var(--space-4);
		align-items: start;
	}

	.ruh-check {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: start;
		gap: var(--space-3);
		min-block-size: var(--tap);
		padding-block: var(--space-2);
		font-size: var(--text-body-sm);
		line-height: 1.45;
		color: var(--neutral-700);
		cursor: pointer;
	}

	.ruh-check input {
		inline-size: 1.25rem;
		block-size: 1.25rem;
		margin-block-start: .1rem;
		accent-color: var(--accent);
	}

	.ruh-beca__result h2,
	.ruh-result__k {
		font-size: var(--text-label);
		font-weight: var(--weight-semibold);
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		color: var(--text-muted);
	}

	.ruh-beca__umbral {
		font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.375rem);
		font-weight: var(--weight-bold);
		line-height: 1.1;
		letter-spacing: var(--tracking-tight);
		color: var(--accent);
		text-wrap: balance;
	}

	.ruh-beca__umbral.is-empty,
	.ruh-beca__umbral.is-out {
		color: var(--neutral-400);
	}

	.ruh-beca__msg {
		font-size: var(--text-body-sm);
		line-height: var(--leading-normal);
		color: var(--text-secondary);
	}

	.ruh-beca__list {
		display: grid;
		gap: var(--space-2);
		font-size: var(--text-body-sm);
	}

	.ruh-beca__list li {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--space-3);
		padding-block: var(--space-2);
		border-block-end: 1px solid var(--border);
	}

	.ruh-beca__list li.is-off {
		color: var(--text-muted);
	}

	.ruh-beca__list strong {
		font-variant-numeric: tabular-nums;
		white-space: nowrap;
	}

	.ruh-beca__sum {
		padding: var(--space-3) var(--space-4);
		background: var(--accent-soft);
		border-radius: var(--radius-md);
		font-size: var(--text-body-sm);
		color: var(--primary-800);
	}

	.ruh-gauge__track {
		position: relative;
		display: flex;
		block-size: .75rem;
		border-radius: var(--radius-full);
	}

	.ruh-gauge__z {
		flex: 1;
		block-size: 100%;
	}

	.ruh-gauge__z--1 {
		background: var(--primary-600);
		border-start-start-radius: var(--radius-full);
		border-end-start-radius: var(--radius-full);
	}

	.ruh-gauge__z--2 {
		background: var(--primary-400);
	}

	.ruh-gauge__z--3 {
		background: var(--primary-200);
	}

	.ruh-gauge__z--4 {
		background: var(--neutral-200);
		border-start-end-radius: var(--radius-full);
		border-end-end-radius: var(--radius-full);
	}

	.ruh-gauge__dot {
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: 0;
		inline-size: 1.25rem;
		block-size: 1.25rem;
		background: var(--neutral-0);
		border: 3px solid var(--neutral-900);
		border-radius: var(--radius-full);
		box-shadow: var(--shadow-sm);
		translate: -50% -50%;
		transition: inset-inline-start var(--dur) var(--ease-out);
	}

	.ruh-gauge__legend {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-2);
		margin-block-start: var(--space-3);
		font-size: var(--text-caption);
		color: var(--text-muted);
	}

	.ruh-gauge__legend strong {
		display: block;
		font-size: var(--text-body-sm);
		font-variant-numeric: tabular-nums;
		color: var(--text);
	}

	.ruh-table th[scope="row"] {
		font-weight: var(--weight-medium);
		text-align: start;
	}

	.ruh-table td.ru-num,
	.ruh-table thead th:not(:first-child) {
		text-align: end;
	}

	.ruh-table thead th {
		white-space: normal;
	}

	.ruh-table td.ru-num {
		white-space: nowrap;
	}

	.ruh-table tbody th,
	.ruh-table tbody td,
	.ruh-table thead th {
		padding-inline: var(--space-2);
	}

	.ruh-tier {
		display: grid;
		align-content: start;
		gap: var(--space-4);
		padding: var(--space-6);
		background: var(--neutral-0);
		border: 1px solid var(--border);
		border-block-start: 4px solid var(--primary-600);
		border-radius: var(--radius-xl);
	}

	.ruh-tier--2 {
		border-block-start-color: var(--primary-400);
	}

	.ruh-tier--3 {
		border-block-start-color: var(--primary-200);
	}

	.ruh-tier h3 {
		font-size: var(--text-h4);
	}

	.ruh-tier ul {
		list-style: none;
		padding: 0;
		margin: 0;
		display: grid;
		gap: var(--space-2);
		font-size: var(--text-body-sm);
		color: var(--text-secondary);
	}

	.ruh-tier li {
		padding-block-end: var(--space-2);
		border-block-end: 1px solid var(--border);
	}

	.ruh-tier li:last-child {
		padding-block-end: 0;
		border-block-end: 0;
	}

	.ruh-tier strong {
		color: var(--text);
		font-variant-numeric: tabular-nums;
	}

	/* ---- Test. */
	.ruh-test__form {
		display: grid;
		gap: var(--space-6);
		max-inline-size: 48rem;
		margin-inline: auto;
	}

	.ruh-test__top {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--space-4);
	}

	.ruh-test__q {
		font-size: var(--text-h3);
		font-weight: var(--weight-semibold);
		letter-spacing: var(--tracking-snug);
	}

	.ruh-test__count {
		font-size: var(--text-body-sm);
		font-variant-numeric: tabular-nums;
		color: var(--text-muted);
	}

	.ruh-test .ruh-progress {
		position: sticky;
		inset-block-start: calc(var(--header-h) + var(--space-2));
		z-index: var(--z-sticky);
		box-shadow: 0 0 0 4px var(--neutral-0);
	}

	.ruh-test__list {
		display: grid;
		gap: var(--space-3);
		counter-reset: ruh-q;
	}

	.ruh-item {
		padding: var(--space-4);
		background: var(--neutral-0);
		border: 1px solid var(--border);
		border-radius: var(--radius-xl);
		counter-increment: ruh-q;
		transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
	}

	.ruh-item.is-done {
		background: var(--bg-subtle);
	}

	.ruh-item.is-missing {
		border-color: var(--error-500);
	}

	.ruh-item fieldset {
		display: grid;
		gap: var(--space-3);
		min-inline-size: 0;
	}

	.ruh-item legend {
		display: block;
		padding: 0;
		margin-block-end: var(--space-3);
		font-size: var(--text-body-lg);
		font-weight: var(--weight-medium);
		line-height: 1.35;
	}

	.ruh-item legend::before {
		content: counter(ruh-q) ". ";
		font-variant-numeric: tabular-nums;
		color: var(--text-muted);
	}

	.ruh-scale {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--space-2);
	}

	.ruh-scale span {
		padding-inline: var(--space-1);
	}

	.ruh-test__actions {
		display: grid;
		justify-items: center;
		gap: var(--space-3);
	}

	.ruh-test__actions .ru-btn {
		inline-size: 100%;
		max-inline-size: 22rem;
	}

	.ruh-result {
		display: grid;
		gap: var(--space-6);
		max-inline-size: 48rem;
		margin-inline: auto;
		margin-block-start: var(--space-12);
		padding: clamp(var(--space-4), 3vw, var(--space-8));
		background: var(--neutral-0);
		border: 1px solid var(--border);
		border-radius: var(--radius-2xl);
		box-shadow: var(--shadow-md);
	}

	.ruh-result:focus {
		outline: 0;
	}

	.ruh-result h2 {
		font-size: var(--text-h2);
		text-wrap: balance;
	}

	.ruh-result__intro {
		font-size: var(--text-body-sm);
		color: var(--text-secondary);
	}

	.ruh-result__bars {
		display: grid;
		gap: var(--space-3);
	}

	.ruh-result__bars li {
		display: grid;
		gap: var(--space-1);
		font-size: var(--text-body-sm);
	}

	.ruh-result__bars li > div:first-child {
		display: flex;
		justify-content: space-between;
		gap: var(--space-3);
	}

	.ruh-result__bars li.is-top {
		font-weight: var(--weight-semibold);
	}

	.ruh-result__bars li:not(.is-top) .ruh-bar span {
		background: var(--primary-200);
	}

	.ruh-result__bars strong {
		font-variant-numeric: tabular-nums;
	}

	.ruh-result__top {
		display: grid;
		gap: var(--space-6);
	}

	.ruh-pick {
		display: grid;
		gap: var(--space-3);
		padding: var(--space-6);
		background: var(--bg-subtle);
		border-radius: var(--radius-xl);
	}

	.ruh-pick h3 {
		font-size: var(--text-h3);
	}

	.ruh-pick p {
		color: var(--text-secondary);
	}

	.ruh-result__again {
		text-align: center;
	}

	.ruh-areas {
		gap: var(--space-4);
	}

	.ruh-area {
		display: grid;
		align-content: start;
		gap: var(--space-3);
		padding: var(--space-6);
		background: var(--neutral-0);
		border: 1px solid var(--border);
		border-radius: var(--radius-xl);
	}

	.ruh-area h3 {
		font-size: var(--text-h3);
	}

	.ruh-area > p {
		color: var(--text-secondary);
	}

	@media (max-width: 39.99rem) {
		.ruh-table {
			font-size: var(--text-label);
		}

		.ruh-table tbody th,
		.ruh-table tbody td,
		.ruh-table thead th {
			padding-inline: var(--space-1);
		}
	}

	@media (min-width: 40rem) {
		.ruh-pond__fields {
			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		}

		.ruh-uni > summary {
			padding-inline: var(--space-6);
		}

		.ruh-row {
			padding-inline: var(--space-6);
		}

	}

	@media (min-width: 64rem) {
		.ruh-demo__grid {
			grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
			align-items: center;
		}

		.ruh-beca__grid {
			grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
		}

		.ruh-beca__result {
			position: sticky;
			inset-block-start: calc(var(--header-h) + var(--space-6));
			padding: var(--space-8);
		}

		.ruh-rows {
			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		}

		.ruh-row {
			border-inline-end: 1px solid var(--border);
		}

		.ruh-row:nth-child(2n) {
			border-inline-end: 0;
		}

		.ruh-row:nth-last-child(2):nth-child(odd) {
			border-block-end: 0;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.ruh-bar span,
		.ruh-progress span,
		.ruh-gauge__dot {
			transition: none;
		}
	}
}