/**
 * Campus: estilos de las vistas.
 *
 * Usa los tokens y componentes del tema (ru.css). Todo va en la capa «components» y con el
 * prefijo ruc-, así las utilidades del tema siguen mandando y nada de aquí toca el resto del sitio.
 */
@layer components {

	/* ------------------------------------------------------------------ base */

	.ruc {
		--ruc-nav-w: 15rem;
		--ruc-bar-h: 4rem;
		padding-block: var(--space-6) var(--section-y);
	}

	/* Enlaces dentro de texto. Los que son un componente llevan su propia clase. */
	.ruc p > a:not([class]),
	.ruc-doc a:not([class]),
	.ruc-dialog p > a:not([class]) {
		color: var(--link);
		font-weight: var(--weight-medium);
		text-decoration: underline;
		text-decoration-color: var(--primary-200);
		text-decoration-thickness: 1.5px;
		text-underline-offset: .2em;
	}

	.ruc p > a:not([class]):hover,
	.ruc-doc a:not([class]):hover,
	.ruc-dialog p > a:not([class]):hover {
		color: var(--primary-800);
		text-decoration-color: currentColor;
	}

	.ruc h1 {
		font-size: var(--text-h2);
		letter-spacing: var(--tracking-snug);
		line-height: 1.15;
	}

	.ruc h2 {
		font-size: var(--text-h3);
		letter-spacing: var(--tracking-snug);
	}

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

	.ruc-icon {
		inline-size: 1.25rem;
		block-size: 1.25rem;
	}

	.ruc-eyebrow {
		font-size: var(--text-label);
		font-weight: var(--weight-semibold);
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		color: var(--accent);
	}

	/* ------------------------------------------------------------------ marco de la aplicación */

	.ruc-shell {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-8);
	}

	.ruc-main {
		min-inline-size: 0;
		max-inline-size: 58rem;
	}

	.ruc-main > * + * {
		margin-block-start: var(--space-6);
	}

	/* Navegación: barra inferior en móvil, columna lateral en escritorio. */
	.ruc-nav {
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: var(--z-sticky);
		background: var(--bg);
		border-block-start: 1px solid var(--border);
		padding-block-end: env(safe-area-inset-bottom, 0);
	}

	.ruc-nav__me,
	.ruc-nav__desk {
		display: none;
	}

	.ruc-nav__list {
		display: flex;
		justify-content: space-around;
		max-inline-size: 34rem;
		margin-inline: auto;
	}

	.ruc-nav__list > li {
		flex: 1;
		min-inline-size: 0;
	}

	.ruc-nav__link {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		min-block-size: var(--ruc-bar-h);
		padding-inline: var(--space-1);
		font-size: var(--text-caption);
		font-weight: var(--weight-medium);
		color: var(--text-secondary);
		transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
	}

	.ruc-nav__link .ruc-icon {
		inline-size: 1.375rem;
		block-size: 1.375rem;
	}

	.ruc-nav__link span {
		max-inline-size: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.ruc-nav__link[aria-current] {
		color: var(--accent);
	}

	.ruc-nav__link:focus-visible {
		outline-offset: -3px;
	}

	.ruc--app {
		padding-block-end: calc(var(--ruc-bar-h) + var(--space-12));
	}

	/* Con la barra inferior fija, el pie del sitio necesita ese hueco para verse entero. */
	body.ru-campus--app .ru-footer {
		padding-block-end: calc(var(--ruc-bar-h) + var(--space-8));
	}

	.ruc-quick {
		display: flex;
		align-items: center;
		gap: var(--space-1);
	}

	.ruc-quick__brand {
		margin-inline-end: auto;
		font-size: var(--text-label);
		font-weight: var(--weight-semibold);
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		color: var(--accent);
	}

	.ruc-quick__bell {
		position: relative;
	}

	.ruc-dot {
		display: inline-grid;
		place-items: center;
		min-inline-size: 1.125rem;
		block-size: 1.125rem;
		padding-inline: .3rem;
		background: var(--error-600);
		color: var(--neutral-0);
		border-radius: var(--radius-full);
		font-size: .6875rem;
		font-weight: var(--weight-semibold);
		line-height: 1;
	}

	.ruc-quick__bell .ruc-dot {
		position: absolute;
		inset-block-start: .25rem;
		inset-inline-end: .1rem;
	}

	@media (min-width: 64rem) {
		.ruc--app {
			padding-block-end: var(--section-y);
		}

		body.ru-campus--app .ru-footer {
			padding-block-end: var(--space-8);
		}

		.ruc-shell {
			grid-template-columns: var(--ruc-nav-w) minmax(0, 1fr);
			align-items: start;
			gap: var(--space-12);
		}

		.ruc-nav {
			position: sticky;
			inset: auto;
			inset-block-start: calc(var(--header-h) + var(--space-6));
			z-index: auto;
			padding: 0;
			border: 0;
		}

		.ruc-nav__me {
			display: flex;
			align-items: center;
			gap: var(--space-3);
			padding: var(--space-2);
			margin-block-end: var(--space-3);
			border-radius: var(--radius-lg);
			transition: background-color var(--dur-fast) var(--ease-out);
		}

		.ruc-nav__me:hover {
			background: var(--bg-subtle);
		}

		.ruc-nav__name {
			min-inline-size: 0;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			font-weight: var(--weight-semibold);
		}

		.ruc-nav__desk {
			display: block;
		}

		.ruc-nav__list {
			flex-direction: column;
			gap: 2px;
			max-inline-size: none;
		}

		.ruc-nav__link {
			flex-direction: row;
			justify-content: flex-start;
			gap: var(--space-3);
			min-block-size: var(--tap);
			padding-inline: var(--space-3);
			border-radius: var(--radius-md);
			font-size: var(--text-body-sm);
		}

		.ruc-nav__link:hover {
			background: var(--bg-subtle);
			color: var(--text);
		}

		.ruc-nav__link[aria-current] {
			background: var(--accent-soft);
			color: var(--primary-800);
		}

		.ruc-nav__link .ruc-dot {
			margin-inline-start: auto;
		}

		.ruc-quick {
			display: none;
		}
	}

	/* ------------------------------------------------------------------ avatar */

	.ruc-avatar {
		flex: none;
		display: inline-grid;
		place-items: center;
		inline-size: 2.5rem;
		block-size: 2.5rem;
		border-radius: var(--radius-full);
		background: var(--primary-100);
		color: var(--primary-900);
		font-weight: var(--weight-semibold);
		line-height: 1;
	}

	.ruc-avatar--sm {
		inline-size: 2rem;
		block-size: 2rem;
		font-size: var(--text-body-sm);
	}

	.ruc-avatar--1 { background: var(--lime-100); color: #3f5206; }
	.ruc-avatar--2 { background: var(--info-50); color: var(--info-700); }
	.ruc-avatar--3 { background: var(--warning-50); color: var(--warning-700); }
	.ruc-avatar--4 { background: var(--success-50); color: var(--success-700); }
	.ruc-avatar--5 { background: var(--neutral-100); color: var(--neutral-800); }

	/* ------------------------------------------------------------------ cabecera de vista */

	.ruc-head {
		display: flex;
		flex-wrap: wrap;
		align-items: end;
		justify-content: space-between;
		gap: var(--space-4);
	}

	.ruc-head__sub {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-1) var(--space-2);
		margin-block-start: var(--space-2);
		color: var(--text-secondary);
	}

	.ruc-head__sub .ruc-icon {
		inline-size: 1rem;
		block-size: 1rem;
		color: var(--text-muted);
	}

	.ruc-banner {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-2) var(--space-3);
		padding: var(--space-3) var(--space-4);
		background: var(--warning-50);
		border-radius: var(--radius-lg);
		font-size: var(--text-body-sm);
		color: var(--neutral-800);
	}

	.ruc-banner > .ruc-icon {
		color: var(--warning-700);
	}

	.ruc-banner p {
		flex: 1 1 14rem;
	}

	.ruc-banner .ru-btn--link {
		min-block-size: var(--control-sm);
	}

	.ruc-subtitle {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		margin-block: var(--space-8) var(--space-3);
		font-size: var(--text-h4);
	}

	.ruc .ruc-subtitle {
		font-size: var(--text-h4);
	}

	.ruc-subtitle__n {
		font-size: var(--text-label);
		font-weight: var(--weight-medium);
		color: var(--text-muted);
	}

	.ruc-title2 {
		font-size: var(--text-h3);
	}

	.ruc-footnote {
		margin-block-start: var(--space-4);
		font-size: var(--text-label);
		color: var(--text-muted);
	}

	/* ------------------------------------------------------------------ tarjetas */

	.ruc-card {
		padding: var(--space-6);
		background: var(--neutral-0);
		border: 1px solid var(--border);
		border-radius: var(--radius-xl);
	}

	.ruc-card__head {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--space-2) var(--space-4);
		margin-block-end: var(--space-4);
	}

	.ruc-card__more {
		font-size: var(--text-body-sm);
		font-weight: var(--weight-medium);
		color: var(--link);
	}

	.ruc-card__more:hover {
		text-decoration: underline;
	}

	.ruc-card__empty,
	.ruc-card__note {
		font-size: var(--text-body-sm);
		color: var(--text-secondary);
	}

	.ruc-card__empty + .ru-btn {
		margin-block-start: var(--space-4);
	}

	.ruc-card__sub {
		margin-block: var(--space-6) var(--space-2);
		font-size: var(--text-label);
		font-weight: var(--weight-semibold);
		color: var(--text-secondary);
	}

	.ruc .ruc-card__sub {
		font-size: var(--text-label);
	}

	.ruc-card__foot {
		margin-block-start: var(--space-4);
	}

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

	@media (min-width: 48rem) {
		.ruc-grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.ruc-rows--2 {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			column-gap: var(--space-8);
		}

		.ruc-rows--2 .ruc-row:nth-child(2) {
			border-block-start: 0;
		}

		.ruc-card--wide {
			grid-column: 1 / -1;
		}

		.ruc-progress {
			grid-row: span 1;
		}
	}

	/* ------------------------------------------------------------------ progreso */

	.ruc-progress__head {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		margin-block-end: var(--space-3);
	}

	.ruc-progress__pct {
		font-size: var(--text-h3);
		font-weight: var(--weight-bold);
		font-variant-numeric: tabular-nums;
		color: var(--accent);
	}

	.ruc-bar {
		block-size: .5rem;
		background: var(--bg-muted);
		border-radius: var(--radius-full);
		overflow: hidden;
	}

	.ruc-bar span {
		display: block;
		block-size: 100%;
		background: var(--accent);
		border-radius: inherit;
		transition: inline-size var(--dur) var(--ease-out);
	}

	.ruc-todo {
		display: grid;
		gap: var(--space-2);
		margin-block: var(--space-4);
		font-size: var(--text-body-sm);
	}

	.ruc-todo li {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		min-block-size: 1.75rem;
	}

	.ruc-todo__mark {
		flex: none;
		display: grid;
		place-items: center;
		inline-size: 1.25rem;
		block-size: 1.25rem;
		border: 1.5px solid var(--border-strong);
		border-radius: var(--radius-full);
	}

	.ruc-todo .is-done {
		color: var(--text-muted);
	}

	.ruc-todo .is-done .ruc-todo__mark {
		background: var(--success-700);
		border-color: var(--success-700);
		color: var(--neutral-0);
	}

	.ruc-todo__mark .ruc-icon {
		inline-size: .8rem;
		block-size: .8rem;
		stroke-width: 3;
	}

	/* ------------------------------------------------------------------ filas de entidades */

	.ruc-rows {
		display: grid;
	}

	.ruc-row {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		padding-block: var(--space-3);
	}

	.ruc-row + .ruc-row {
		border-block-start: 1px solid var(--border);
	}

	.ruc-rows--card {
		padding-inline: var(--space-4);
		background: var(--neutral-0);
		border: 1px solid var(--border);
		border-radius: var(--radius-xl);
	}

	.ruc-row__icon {
		flex: none;
		display: grid;
		place-items: center;
		inline-size: 2.25rem;
		block-size: 2.25rem;
		background: var(--bg-subtle);
		border-radius: var(--radius-md);
		color: var(--neutral-600);
	}

	.ruc-row__text {
		flex: 1;
		display: grid;
		min-inline-size: 0;
	}

	.ruc-row__name {
		font-weight: var(--weight-medium);
		overflow-wrap: anywhere;
	}

	a.ruc-row__name:hover {
		color: var(--link);
		text-decoration: underline;
	}

	.ruc-row__detail {
		font-size: var(--text-label);
		color: var(--text-muted);
	}

	.ruc-row__actions {
		flex: none;
		display: flex;
		align-items: center;
		gap: var(--space-1);
	}

	@media (max-width: 39.99rem) {
		.ruc-row {
			flex-wrap: wrap;
		}

		.ruc-row__actions {
			inline-size: 100%;
			justify-content: flex-end;
		}

		.ruc-rows .ruc-row__actions:has(> :only-child) {
			inline-size: auto;
		}
	}

	.ruc-tag {
		display: inline-flex;
		align-items: center;
		gap: var(--space-1);
		min-block-size: 1.5rem;
		padding-inline: var(--space-2);
		background: var(--bg-muted);
		border-radius: var(--radius-sm);
		font-size: var(--text-caption);
		font-weight: var(--weight-medium);
		color: var(--neutral-700);
		white-space: nowrap;
	}

	a.ruc-tag:hover {
		background: var(--accent-soft);
		color: var(--primary-800);
	}

	.ruc-tag--ok {
		background: var(--success-50);
		color: var(--success-700);
	}

	.ruc-tag .ruc-icon {
		inline-size: .875rem;
		block-size: .875rem;
	}

	/* ------------------------------------------------------------------ opciones (inicio) */

	.ruc-options {
		display: grid;
	}

	.ruc-option-row {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		padding-block: var(--space-3);
	}

	.ruc-option-row + .ruc-option-row {
		border-block-start: 1px solid var(--border);
	}

	.ruc-option-row__n,
	.ruc-item__n {
		flex: none;
		display: grid;
		place-items: center;
		inline-size: 1.75rem;
		block-size: 1.75rem;
		background: var(--accent-soft);
		border-radius: var(--radius-full);
		font-size: var(--text-label);
		font-weight: var(--weight-semibold);
		font-variant-numeric: tabular-nums;
		color: var(--primary-800);
	}

	.ruc-option-row__text {
		flex: 1;
		display: grid;
		min-inline-size: 0;
	}

	.ruc-status {
		flex: none;
		padding: .2rem var(--space-2);
		background: var(--bg-muted);
		border-radius: var(--radius-sm);
		font-size: var(--text-caption);
		font-weight: var(--weight-medium);
		color: var(--neutral-700);
	}

	.ruc-status--will_apply,
	.ruc-status--applied {
		background: var(--accent-soft);
		color: var(--primary-800);
	}

	.ruc-status--admitted,
	.ruc-status--enrolling {
		background: var(--success-50);
		color: var(--success-700);
	}

	.ruc-status--waitlist {
		background: var(--warning-50);
		color: var(--warning-700);
	}

	@media (max-width: 39.99rem) {
		.ruc-option-row {
			flex-wrap: wrap;
		}

		.ruc-option-row .ruc-status {
			margin-inline-start: calc(1.75rem + var(--space-3));
		}
	}

	/* ------------------------------------------------------------------ agenda */

	.ruc-agenda {
		display: grid;
		gap: var(--space-3);
	}

	.ruc-agenda li {
		display: flex;
		align-items: flex-start;
		gap: var(--space-3);
	}

	.ruc-agenda__icon {
		flex: none;
		display: grid;
		place-items: center;
		inline-size: 1.5rem;
		block-size: 1.5rem;
		color: var(--text-muted);
	}

	.ruc-agenda__icon--official {
		color: var(--accent);
	}

	.ruc-agenda__text {
		display: grid;
		min-inline-size: 0;
		font-size: var(--text-body-sm);
	}

	.ruc-agenda__text time {
		font-size: var(--text-label);
		color: var(--text-muted);
	}

	.ruc-agenda__scope {
		color: var(--text-muted);
	}

	.ruc-tick {
		flex: none;
		appearance: none;
		display: inline-grid;
		place-content: center;
		inline-size: 1.5rem;
		block-size: 1.5rem;
		margin: 0;
		background: var(--neutral-0);
		border: 1.5px solid var(--neutral-400);
		border-radius: var(--radius-sm);
		cursor: pointer;
		transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
	}

	.ruc-tick::after {
		content: "";
		inline-size: .75rem;
		block-size: .45rem;
		border-inline-start: 2.5px solid var(--neutral-0);
		border-block-end: 2.5px solid var(--neutral-0);
		transform: translateY(-1px) rotate(-45deg) scale(0);
		transition: transform var(--dur-fast) var(--ease-out);
	}

	.ruc-tick:checked {
		background: var(--accent);
		border-color: var(--accent);
	}

	.ruc-tick:checked::after {
		transform: translateY(-1px) rotate(-45deg) scale(1);
	}

	.ruc-tick:hover {
		border-color: var(--accent);
	}

	/* ------------------------------------------------------------------ formularios */

	.ruc-form {
		display: grid;
		gap: var(--space-4);
	}

	.ruc-form__row {
		display: grid;
		gap: var(--space-4);
	}

	@media (min-width: 40rem) {
		.ruc-form__row {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	.ruc-form > .ru-btn,
	.ruc-stackform > .ru-btn {
		justify-self: start;
	}

	.ruc-stackform {
		display: grid;
		gap: var(--space-3);
	}

	.ruc-textarea {
		padding-block: var(--space-3);
		min-block-size: 5.5rem;
		line-height: 1.5;
		resize: vertical;
	}

	.ruc-select--sm select {
		min-block-size: var(--control-sm);
		padding-inline: var(--space-3) var(--space-8);
		font-size: var(--text-body-sm);
	}

	.ruc-select--sm {
		--h: var(--control-sm);
	}

	.ruc-select--narrow {
		max-inline-size: 12rem;
	}

	.ruc .ru-select select,
	.ruc-dialog .ru-select select {
		appearance: none;
		padding-inline-end: var(--space-10);
	}

	.ruc .ru-input:focus-visible,
	.ruc .ru-select select:focus-visible,
	.ruc-dialog .ru-input:focus-visible {
		outline: 2px solid var(--focus);
		outline-offset: 1px;
		border-color: var(--focus);
		border-radius: var(--radius-md);
	}

	.ruc .ru-form-msg:empty,
	.ruc-dialog .ru-form-msg:empty {
		display: none;
	}

	.ruc-check {
		display: flex;
		align-items: flex-start;
		gap: var(--space-3);
		font-size: var(--text-body-sm);
		color: var(--neutral-800);
		cursor: pointer;
	}

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

	.ruc-hp {
		position: absolute;
		inset-inline-start: -200vw;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
	}

	.ruc-inline {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-items: end;
		gap: var(--space-3);
		padding: var(--space-4);
		background: var(--bg-subtle);
		border-radius: var(--radius-xl);
	}

	.ruc-inline .ru-form-msg {
		grid-column: 1 / -1;
	}

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

	/* Píldoras: filtros (enlaces) y tipos de publicación (radios). */
	.ruc-chips {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
	}

	.ruc-pill {
		position: relative;
		display: inline-flex;
		cursor: pointer;
	}

	.ruc-pill input {
		position: absolute;
		inset: 0;
		opacity: 0;
		cursor: pointer;
	}

	.ruc-pill span {
		display: inline-flex;
		align-items: center;
		min-block-size: var(--control-sm);
		padding-inline: var(--space-4);
		background: var(--neutral-0);
		border: 1px solid var(--border-strong);
		border-radius: var(--radius-full);
		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);
	}

	.ruc-pill--sm span {
		min-block-size: 2rem;
		padding-inline: var(--space-3);
		font-size: var(--text-label);
	}

	.ruc-pill:hover span {
		border-color: var(--neutral-400);
		color: var(--neutral-900);
	}

	.ruc-pill.is-on span,
	.ruc-pill input:checked + span {
		background: var(--primary-800);
		border-color: var(--primary-800);
		color: var(--neutral-0);
	}

	.ruc-pill input:focus-visible + span {
		outline: 2px solid var(--focus);
		outline-offset: 2px;
	}

	/* Opciones grandes (primeros pasos). */
	.ruc-cards {
		display: grid;
		gap: var(--space-3);
	}

	.ruc-cardopt {
		position: relative;
		display: block;
		cursor: pointer;
	}

	.ruc-cardopt input {
		position: absolute;
		inset: 0;
		opacity: 0;
		cursor: pointer;
	}

	.ruc-cardopt span {
		display: flex;
		align-items: center;
		min-block-size: var(--control-lg);
		padding: var(--space-3) var(--space-6);
		background: var(--neutral-0);
		border: 1.5px solid var(--border-strong);
		border-radius: var(--radius-lg);
		font-weight: var(--weight-medium);
		transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
	}

	.ruc-cardopt:hover span {
		border-color: var(--neutral-400);
	}

	.ruc-cardopt input:checked + span {
		background: var(--accent-soft);
		border-color: var(--accent);
		color: var(--primary-900);
	}

	.ruc-cardopt input:focus-visible + span {
		outline: 2px solid var(--focus);
		outline-offset: 2px;
	}

	@media (min-width: 40rem) {
		.ruc-cards--row {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}

	/* Interruptores (preferencias). */
	.ruc-switches {
		display: grid;
	}

	.ruc-switches li + li {
		border-block-start: 1px solid var(--border);
	}

	.ruc-switch {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-4);
		padding-block: var(--space-3);
		cursor: pointer;
	}

	.ruc-switch > span {
		display: grid;
		font-size: var(--text-body-sm);
	}

	.ruc-switch > span span {
		color: var(--text-muted);
	}

	.ruc-switch input {
		flex: none;
		appearance: none;
		position: relative;
		inline-size: 2.75rem;
		block-size: 1.625rem;
		margin: 0;
		background: var(--neutral-400);
		border-radius: var(--radius-full);
		cursor: pointer;
		transition: background-color var(--dur-fast) var(--ease-out);
	}

	.ruc-switch input::after {
		content: "";
		position: absolute;
		inset-block-start: .1875rem;
		inset-inline-start: .1875rem;
		inline-size: 1.25rem;
		block-size: 1.25rem;
		background: var(--neutral-0);
		border-radius: var(--radius-full);
		box-shadow: var(--shadow-xs);
		transition: transform var(--dur-fast) var(--ease-out);
	}

	.ruc-switch input:checked {
		background: var(--accent);
	}

	.ruc-switch input:checked::after {
		transform: translateX(1.125rem);
	}

	/* ------------------------------------------------------------------ buscador */

	.ruc-search {
		position: relative;
		display: grid;
		gap: var(--space-2);
	}

	.ruc-search__box {
		position: relative;
	}

	.ruc-search__box .ruc-icon {
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: var(--space-4);
		translate: 0 -50%;
		color: var(--neutral-500);
		pointer-events: none;
	}

	.ruc-search__box .ru-input {
		padding-inline-start: var(--space-12);
	}

	.ruc-search__box .ru-input::-webkit-search-cancel-button {
		appearance: none;
	}

	.ruc-search__list {
		position: absolute;
		inset-inline: 0;
		inset-block-start: 100%;
		z-index: var(--z-sticky);
		max-block-size: 20rem;
		margin-block-start: var(--space-1);
		padding: var(--space-1);
		overflow-y: auto;
		background: var(--neutral-0);
		border: 1px solid var(--border);
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-md);
	}

	.ruc-search__list li {
		display: grid;
		padding: var(--space-2) var(--space-3);
		border-radius: var(--radius-md);
		cursor: pointer;
	}

	.ruc-search__list li span {
		font-size: var(--text-label);
		color: var(--text-muted);
	}

	.ruc-search__list li:hover,
	.ruc-search__list li[aria-selected="true"] {
		background: var(--accent-soft);
	}

	.ruc-search__status {
		font-size: var(--text-label);
		color: var(--text-muted);
	}

	.ruc-search__status:empty {
		display: none;
	}

	.ruc-search__chosen {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-3);
		padding: var(--space-2) var(--space-4);
		background: var(--accent-soft);
		border-radius: var(--radius-md);
		font-weight: var(--weight-medium);
		color: var(--primary-900);
	}

	.ruc-search__chosen .ru-btn--link {
		min-block-size: var(--control-sm);
	}

	.ruc-start {
		display: grid;
		gap: var(--space-3);
		background: var(--bg-subtle);
		border-color: transparent;
	}

	.ruc-start__alt {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2) var(--space-6);
		font-size: var(--text-body-sm);
	}

	.ruc-picks {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
		margin-block-start: var(--space-4);
	}

	.ruc-pick {
		display: inline-flex;
		align-items: center;
		gap: var(--space-1);
		min-block-size: var(--control-sm);
		padding-inline: var(--space-4) var(--space-1);
		background: var(--accent-soft);
		border-radius: var(--radius-full);
		font-size: var(--text-body-sm);
		font-weight: var(--weight-medium);
		color: var(--primary-900);
	}

	.ruc-pick__x {
		display: grid;
		place-items: center;
		inline-size: 2rem;
		block-size: 2rem;
		border-radius: var(--radius-full);
		color: var(--primary-800);
	}

	.ruc-pick__x:hover {
		background: var(--primary-200);
	}

	.ruc-pick__x .ruc-icon {
		inline-size: 1rem;
		block-size: 1rem;
	}

	.ruc-picks__empty {
		margin-block-start: var(--space-4);
		font-size: var(--text-body-sm);
		color: var(--text-muted);
	}

	/* ------------------------------------------------------------------ mi plan */

	.ruc-tabs {
		margin-block-end: var(--space-6);
	}

	.ruc-plan {
		display: grid;
		gap: var(--space-3);
	}

	.ruc-item {
		display: flex;
		gap: var(--space-4);
		padding: var(--space-4);
		background: var(--neutral-0);
		border: 1px solid var(--border);
		border-radius: var(--radius-xl);
	}

	.ruc-plan--off .ruc-item {
		background: var(--bg-subtle);
	}

	.ruc-plan--off .ruc-item__name {
		color: var(--text-secondary);
	}

	.ruc-item__order {
		flex: none;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-1);
	}

	.ruc-item__move {
		display: grid;
		place-items: center;
		inline-size: 2rem;
		block-size: 2rem;
		border-radius: var(--radius-md);
		color: var(--neutral-600);
	}

	.ruc-item__move:hover:not(:disabled) {
		background: var(--bg-muted);
		color: var(--neutral-900);
	}

	.ruc-item__move:disabled {
		color: var(--neutral-300);
		cursor: default;
	}

	.ruc-item__move .ruc-icon {
		inline-size: 1.125rem;
		block-size: 1.125rem;
	}

	.ruc-item__main {
		flex: 1;
		min-inline-size: 0;
	}

	.ruc-item__name {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-2);
		font-weight: var(--weight-semibold);
	}

	.ruc-item__name a:hover {
		color: var(--link);
		text-decoration: underline;
	}

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

	.ruc-facts {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2) var(--space-8);
		margin-block-start: var(--space-3);
	}

	.ruc-facts dt {
		font-size: var(--text-caption);
		color: var(--text-muted);
	}

	.ruc-facts dd {
		font-weight: var(--weight-semibold);
		font-variant-numeric: tabular-nums;
	}

	.ruc-facts--lg {
		padding: var(--space-4) var(--space-6);
		background: var(--bg-subtle);
		border-radius: var(--radius-xl);
	}

	.ruc-facts--lg dd {
		font-size: var(--text-h3);
	}

	.ruc-up {
		color: var(--success-700);
	}

	.ruc-down {
		color: var(--error-700);
	}

	.ruc-item__controls {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: var(--space-2);
		margin-block-start: var(--space-4);
	}

	.ruc-item__controls .ru-select {
		min-inline-size: 12.5rem;
	}

	.ruc-item__del {
		margin-inline-start: auto;
		color: var(--neutral-500);
	}

	.ruc-item__del:hover {
		color: var(--error-700);
	}

	.ruc-note {
		flex: 1 1 auto;
	}

	.ruc-note[open] {
		flex-basis: 100%;
		order: 3;
	}

	.ruc-note > summary {
		inline-size: fit-content;
	}

	.ruc-note__box {
		display: grid;
		gap: var(--space-1);
		margin-block-start: var(--space-2);
	}

	.ruc-tasks,
	.ruc-dates,
	.ruc-notes {
		display: grid;
		gap: var(--space-2);
		margin-block-start: var(--space-4);
	}

	.ruc-task,
	.ruc-date {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
		background: var(--neutral-0);
		border: 1px solid var(--border);
		border-radius: var(--radius-lg);
	}

	.ruc-task__text {
		flex: 1;
		display: grid;
		min-inline-size: 0;
		cursor: pointer;
	}

	.ruc-task__text time,
	.ruc-date time {
		font-size: var(--text-label);
		color: var(--text-muted);
	}

	.ruc-task.is-done .ruc-task__text span {
		color: var(--text-muted);
		text-decoration: line-through;
	}

	.ruc-late {
		color: var(--error-700);
	}

	.ruc-task__text time.ruc-late {
		color: var(--error-700);
	}

	.ruc-date {
		flex-wrap: wrap;
	}

	.ruc-date > time {
		flex: none;
		inline-size: 11rem;
		font-size: var(--text-body-sm);
		font-weight: var(--weight-semibold);
		color: var(--text);
	}

	.ruc-date > span {
		flex: 1 1 12rem;
		min-inline-size: 0;
	}

	.ruc-date.is-past {
		background: var(--bg-subtle);
	}

	.ruc-date.is-past > time,
	.ruc-date.is-past > span {
		color: var(--text-muted);
	}

	.ruc-date--official {
		border-color: var(--primary-200);
	}

	.ruc-notecard {
		padding: var(--space-4);
		background: var(--warning-50);
		border-radius: var(--radius-lg);
	}

	.ruc-notecard__foot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-block-start: var(--space-2);
		font-size: var(--text-label);
		color: var(--text-muted);
	}

	@media (max-width: 39.99rem) {
		.ruc-item {
			gap: var(--space-3);
			padding: var(--space-3);
		}

		.ruc-item__controls .ru-select {
			flex: 1 1 100%;
		}
	}

	/* ------------------------------------------------------------------ comunidad */

	.ruc-places__title {
		font-size: var(--text-label);
		font-weight: var(--weight-semibold);
		color: var(--text-secondary);
	}

	.ruc .ruc-places__title {
		font-size: var(--text-label);
	}

	.ruc-places__list {
		display: flex;
		gap: var(--space-2);
		margin-block: var(--space-2);
		padding-block-end: var(--space-1);
		overflow-x: auto;
		scrollbar-width: thin;
	}

	.ruc-places__list .ru-chip {
		white-space: nowrap;
	}

	.ruc-places__list .ruc-icon {
		inline-size: 1rem;
		block-size: 1rem;
		color: var(--text-muted);
	}

	.ruc-places__hint {
		font-size: var(--text-label);
		color: var(--text-muted);
	}

	.ruc-feedbar {
		display: grid;
		gap: var(--space-3);
	}

	.ruc-feedbar .ruc-tabs {
		margin: 0;
	}

	.ruc-filters {
		display: grid;
		gap: var(--space-2);
	}

	.ruc-subtitle--list {
		margin-block-end: calc(var(--space-3) * -1);
	}

	.ruc-community > * + *,
	.ruc-thread > * + * {
		margin-block-start: var(--space-6);
	}

	.ruc-community.ru-container,
	.ruc-thread.ru-container,
	.ruc-doc.ru-container {
		max-inline-size: calc(46rem + var(--gutter) * 2);
	}

	.ruc-crossfilter {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2) var(--space-4);
		padding: var(--space-3) var(--space-4);
		background: var(--accent-soft);
		border-radius: var(--radius-lg);
		font-size: var(--text-body-sm);
		font-weight: var(--weight-medium);
		color: var(--primary-900);
	}

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

	.ruc-composer {
		display: grid;
		gap: var(--space-3);
		padding: var(--space-4);
		background: var(--neutral-0);
		border: 1px solid var(--border-strong);
		border-radius: var(--radius-xl);
		box-shadow: var(--shadow-xs);
	}

	.ruc-composer:focus-within {
		border-color: var(--primary-300);
		box-shadow: var(--ring);
	}

	.ruc-kinds {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
	}

	.ruc-composer__foot {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-3);
	}

	.ruc-composer__hint {
		flex: 1 1 14rem;
		font-size: var(--text-label);
		color: var(--text-muted);
	}

	.ruc-composer--reply {
		margin-block-start: var(--space-6);
	}

	.ruc-replyto {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-3);
		padding: var(--space-1) var(--space-3);
		background: var(--accent-soft);
		border-radius: var(--radius-md);
		font-size: var(--text-body-sm);
		color: var(--primary-900);
	}

	.ruc-replyto .ru-btn--link {
		min-block-size: var(--control-sm);
	}

	.ruc-posts {
		display: grid;
		gap: var(--space-3);
		margin-block-start: var(--space-4);
	}

	.ruc-post {
		display: grid;
		gap: var(--space-3);
		padding: var(--space-4);
		background: var(--neutral-0);
		border: 1px solid var(--border);
		border-radius: var(--radius-xl);
	}

	.ruc-posts--flat {
		gap: 0;
		margin: 0;
	}

	.ruc-posts--flat .ruc-post {
		padding: var(--space-4) 0;
		border: 0;
		border-radius: 0;
	}

	.ruc-posts--flat .ruc-post + .ruc-post {
		border-block-start: 1px solid var(--border);
	}

	.ruc-post__head {
		display: flex;
		align-items: center;
		gap: var(--space-3);
	}

	.ruc-post__who {
		flex: 1;
		min-inline-size: 0;
	}

	.ruc-post__name {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-1) var(--space-2);
		font-size: var(--text-body-sm);
		font-weight: var(--weight-semibold);
	}

	.ruc-post__you {
		font-weight: var(--weight-regular);
		color: var(--text-muted);
	}

	.ruc-post__meta {
		font-size: var(--text-label);
		font-weight: var(--weight-regular);
		color: var(--text-muted);
	}

	.ruc-kind {
		flex: none;
		align-self: flex-start;
		padding: .2rem var(--space-2);
		background: var(--bg-muted);
		border-radius: var(--radius-sm);
		font-size: var(--text-caption);
		font-weight: var(--weight-semibold);
		color: var(--neutral-700);
	}

	.ruc-kind--question { background: var(--accent-soft); color: var(--primary-800); }
	.ruc-kind--experience { background: var(--success-50); color: var(--success-700); }
	.ruc-kind--advice { background: var(--lime-100); color: #3f5206; }
	.ruc-kind--notice { background: var(--warning-50); color: var(--warning-700); }
	.ruc-kind--housing,
	.ruc-kind--people { background: var(--info-50); color: var(--info-700); }

	.ruc-post__body {
		line-height: 1.55;
		color: var(--neutral-800);
		overflow-wrap: anywhere;
	}

	.ruc-post__link {
		display: block;
	}

	.ruc-post__link:hover {
		color: var(--neutral-900);
	}

	.ruc .ruc-post__body--lead {
		font-size: var(--text-body-lg);
		font-weight: var(--weight-regular);
		letter-spacing: 0;
		line-height: 1.55;
		text-wrap: pretty;
	}

	.ruc-post__state {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		padding: var(--space-2) var(--space-3);
		background: var(--warning-50);
		border-radius: var(--radius-md);
		font-size: var(--text-label);
		color: var(--warning-700);
	}

	.ruc-post__state .ruc-icon {
		inline-size: 1rem;
		block-size: 1rem;
	}

	.ruc-post__places {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
	}

	.ruc-post__foot {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-1);
		margin-inline-start: calc(var(--space-2) * -1);
	}

	.ruc-act {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		min-block-size: var(--control-sm);
		padding-inline: var(--space-2);
		border-radius: var(--radius-md);
		font-size: var(--text-label);
		font-weight: var(--weight-medium);
		color: var(--text-secondary);
		transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
	}

	.ruc-act .ruc-icon {
		inline-size: 1.125rem;
		block-size: 1.125rem;
	}

	button.ruc-act:hover,
	a.ruc-act:hover,
	summary.ruc-act:hover {
		background: var(--bg-muted);
		color: var(--neutral-900);
	}

	.ruc-act[aria-pressed="true"] {
		color: var(--accent);
	}

	.ruc-act[aria-pressed="true"] .ruc-icon {
		fill: var(--primary-100);
	}

	.ruc-act__n:empty {
		display: none;
	}

	.ruc-act__n {
		font-variant-numeric: tabular-nums;
	}

	.ruc-more {
		position: relative;
		margin-inline-start: auto;
	}

	.ruc-more__menu {
		position: absolute;
		inset-inline-end: 0;
		inset-block-start: 100%;
		z-index: var(--z-sticky);
		min-inline-size: 15rem;
		padding: var(--space-1);
		background: var(--neutral-0);
		border: 1px solid var(--border);
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-md);
	}

	.ruc-more__menu button {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		inline-size: 100%;
		min-block-size: var(--tap);
		padding-inline: var(--space-3);
		border-radius: var(--radius-md);
		font-size: var(--text-body-sm);
		text-align: start;
	}

	.ruc-more__menu button:hover {
		background: var(--bg-subtle);
	}

	.ruc-more__menu .ruc-icon {
		inline-size: 1.125rem;
		block-size: 1.125rem;
		color: var(--text-muted);
	}

	.ruc-back__link {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		min-block-size: var(--control-sm);
		font-size: var(--text-body-sm);
		font-weight: var(--weight-medium);
		color: var(--text-secondary);
	}

	.ruc-back__link:hover {
		color: var(--link);
	}

	.ruc-replies {
		margin-block-start: var(--space-8);
	}

	.ruc-replygroup + .ruc-replygroup {
		margin-block-start: var(--space-4);
		padding-block-start: var(--space-4);
		border-block-start: 1px solid var(--border);
	}

	.ruc-replygroup__children {
		display: grid;
		gap: var(--space-4);
		margin-block-start: var(--space-4);
		margin-inline-start: var(--space-4);
		padding-inline-start: var(--space-4);
		border-inline-start: 2px solid var(--border);
	}

	.ruc-reply {
		display: flex;
		gap: var(--space-3);
	}

	.ruc-reply__in {
		flex: 1;
		min-inline-size: 0;
		display: grid;
		gap: var(--space-1);
	}

	.ruc-reply__body {
		line-height: 1.55;
		color: var(--neutral-800);
		overflow-wrap: anywhere;
	}

	.ruc-morewrap {
		display: flex;
		justify-content: center;
		margin-block-start: var(--space-6);
	}

	/* ------------------------------------------------------------------ avisos */

	.ruc-notifs {
		display: grid;
		gap: var(--space-2);
	}

	.ruc-notif a {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		padding: var(--space-3) var(--space-4);
		background: var(--neutral-0);
		border: 1px solid var(--border);
		border-radius: var(--radius-lg);
		transition: border-color var(--dur-fast) var(--ease-out);
	}

	.ruc-notif a:hover {
		border-color: var(--neutral-400);
	}

	.ruc-notif.is-new a {
		background: var(--accent-soft);
		border-color: var(--primary-200);
	}

	.ruc-notif__icon {
		flex: none;
		display: grid;
		place-items: center;
		inline-size: 2.25rem;
		block-size: 2.25rem;
		background: var(--neutral-0);
		border-radius: var(--radius-full);
		color: var(--neutral-600);
		box-shadow: var(--shadow-xs);
	}

	.ruc-notif__text {
		flex: 1;
		display: grid;
		min-inline-size: 0;
		font-size: var(--text-body-sm);
	}

	.ruc-notif__text time {
		font-size: var(--text-label);
		color: var(--text-muted);
	}

	.ruc-notif__new {
		flex: none;
		font-size: var(--text-caption);
		font-weight: var(--weight-semibold);
		color: var(--primary-800);
	}

	/* ------------------------------------------------------------------ explorar */

	.ruc-crumbs ol {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-1) var(--space-2);
		list-style: none;
		padding: 0;
		font-size: var(--text-body-sm);
		color: var(--text-muted);
	}

	.ruc-crumbs li + li::before {
		content: "›";
		margin-inline-end: var(--space-2);
		color: var(--neutral-400);
	}

	.ruc-crumbs a {
		color: var(--link);
		font-weight: var(--weight-medium);
	}

	.ruc-crumbs a:hover {
		text-decoration: underline;
	}

	.ruc-crumbs [aria-current] {
		color: var(--text);
		font-weight: var(--weight-medium);
	}

	.ruc-map {
		display: grid;
		grid-template-columns: repeat(7, minmax(0, 1fr));
		grid-auto-rows: 1fr;
		gap: var(--space-2);
		max-inline-size: 36rem;
		padding: var(--space-4);
		background: var(--bg-subtle);
		border-radius: var(--radius-2xl);
	}

	.ruc-tile {
		display: grid;
		place-content: center;
		justify-items: center;
		gap: 1px;
		aspect-ratio: 1;
		background: var(--neutral-0);
		border: 1.5px solid var(--border-strong);
		border-radius: var(--radius-lg);
		transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
	}

	a.ruc-tile:hover {
		border-color: var(--accent);
		background: var(--accent-soft);
		transform: translateY(-2px);
	}

	.ruc-tile.is-mine {
		background: var(--primary-800);
		border-color: var(--primary-800);
		color: var(--neutral-0);
	}

	a.ruc-tile.is-mine:hover {
		background: var(--primary-900);
		border-color: var(--primary-900);
	}

	.ruc-tile--empty {
		background: transparent;
		border-style: dashed;
		color: var(--text-muted);
	}

	.ruc-tile__code {
		font-size: clamp(.625rem, .4rem + 1.1vw, .8125rem);
		font-weight: var(--weight-semibold);
		letter-spacing: .02em;
	}

	.ruc-tile__n {
		font-size: clamp(.625rem, .4rem + 1vw, .75rem);
		font-variant-numeric: tabular-nums;
		opacity: .75;
	}

	.ruc-legend {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-1) var(--space-6);
		font-size: var(--text-label);
		color: var(--text-muted);
	}

	.ruc-legend span {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
	}

	.ruc-legend__dot {
		inline-size: .75rem;
		block-size: .75rem;
		border-radius: 3px;
	}

	.ruc-legend__dot--mine {
		background: var(--primary-800);
	}

	.ruc-linkgrid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
		gap: var(--space-2);
	}

	.ruc-linkgrid a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-3);
		min-block-size: var(--control-md);
		padding: var(--space-2) var(--space-4);
		background: var(--neutral-0);
		border: 1px solid var(--border);
		border-radius: var(--radius-lg);
		font-size: var(--text-body-sm);
		font-weight: var(--weight-medium);
		transition: border-color var(--dur-fast) var(--ease-out);
	}

	.ruc-linkgrid a:hover {
		border-color: var(--accent);
		color: var(--link);
	}

	.ruc-linkgrid__n,
	.ruc-linkgrid .ruc-icon {
		flex: none;
		color: var(--text-muted);
		font-variant-numeric: tabular-nums;
	}

	.ruc-nodes {
		display: grid;
		gap: var(--space-2);
		margin-block-start: var(--space-4);
	}

	.ruc-node {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		padding: var(--space-3) var(--space-4);
		background: var(--neutral-0);
		border: 1px solid var(--border);
		border-radius: var(--radius-lg);
		transition: border-color var(--dur-fast) var(--ease-out);
	}

	.ruc-node:hover {
		border-color: var(--accent);
	}

	.ruc-node.is-mine {
		border-color: var(--primary-300);
	}

	.ruc-node__icon {
		flex: none;
		display: grid;
		place-items: center;
		inline-size: 2.5rem;
		block-size: 2.5rem;
		background: var(--bg-subtle);
		border-radius: var(--radius-md);
		color: var(--neutral-600);
	}

	.ruc-node__text {
		flex: 1;
		display: grid;
		min-inline-size: 0;
	}

	.ruc-node__text span {
		font-size: var(--text-label);
		color: var(--text-muted);
	}

	.ruc-node__go {
		flex: none;
		color: var(--neutral-400);
	}

	.ruc-entityhead {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-4);
	}

	.ruc-entityhead__meta {
		margin-block-start: var(--space-1);
		font-size: var(--text-body-sm);
		color: var(--text-secondary);
	}

	.ruc-branches {
		display: grid;
		gap: var(--space-4);
	}

	.ruc-branch {
		padding: var(--space-4);
		background: var(--neutral-0);
		border: 1px solid var(--border);
		border-radius: var(--radius-xl);
	}

	.ruc-branch__title {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		margin-block-end: var(--space-3);
	}

	.ruc-branch__title .ruc-icon {
		color: var(--text-muted);
	}

	.ruc-leaves {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
		gap: var(--space-2);
	}

	.ruc-leaf {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 0 var(--space-3);
		block-size: 100%;
		padding: var(--space-2) var(--space-3);
		background: var(--bg-subtle);
		border: 1px solid transparent;
		border-radius: var(--radius-md);
		font-size: var(--text-body-sm);
		transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
	}

	.ruc-leaf:hover {
		background: var(--neutral-0);
		border-color: var(--accent);
	}

	.ruc-leaf.is-mine {
		background: var(--accent-soft);
	}

	.ruc-leaf__name {
		font-weight: var(--weight-medium);
	}

	.ruc-leaf__meta {
		font-size: var(--text-label);
		font-variant-numeric: tabular-nums;
		color: var(--text-secondary);
	}

	.ruc-leaf .ruc-tag {
		grid-column: 1 / -1;
		justify-self: start;
		margin-block-start: var(--space-1);
	}

	.ruc-courses {
		display: grid;
		gap: var(--space-2);
		list-style: none;
		padding: 0;
	}

	.ruc-course {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		min-block-size: var(--control-md);
		padding: var(--space-2) var(--space-4);
		background: var(--neutral-0);
		border: 1px solid var(--border);
		border-radius: var(--radius-lg);
		font-size: var(--text-body-sm);
	}

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

	.ruc-course__n {
		flex: none;
		font-weight: var(--weight-bold);
		color: var(--accent);
	}

	.ruc-course .ruc-icon {
		margin-inline-start: auto;
		color: var(--neutral-400);
	}

	/* ------------------------------------------------------------------ perfil */

	.ruc-panel {
		display: grid;
		gap: var(--space-4);
	}

	.ruc-panel > .ru-btn {
		justify-self: start;
	}

	.ruc-panel__sub {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		margin-block-start: var(--space-4);
		padding-block-start: var(--space-4);
		border-block-start: 1px solid var(--border);
	}

	.ruc-panel__sub .ruc-icon {
		inline-size: 1rem;
		block-size: 1rem;
		color: var(--text-muted);
	}

	.ruc-panel__text {
		max-inline-size: var(--measure);
		font-size: var(--text-body-sm);
		color: var(--text-secondary);
	}

	/* ------------------------------------------------------------------ acceso */

	.ruc-auth {
		display: grid;
		justify-items: center;
		padding-block: var(--space-8);
	}

	.ruc-auth__card {
		display: grid;
		gap: var(--space-4);
		inline-size: 100%;
		max-inline-size: 27rem;
		padding: var(--space-8) var(--space-6);
		background: var(--neutral-0);
		border: 1px solid var(--border);
		border-radius: var(--radius-2xl);
		box-shadow: var(--shadow-sm);
	}

	.ruc-auth__card--center {
		justify-items: center;
		text-align: center;
	}

	.ruc .ruc-auth__title {
		font-size: var(--text-h2);
	}

	.ruc-auth__lead {
		color: var(--text-secondary);
	}

	.ruc-auth__alt {
		font-size: var(--text-body-sm);
		color: var(--text-secondary);
		text-align: center;
	}

	.ruc-notice {
		padding: var(--space-3) var(--space-4);
		background: var(--bg-subtle);
		border-radius: var(--radius-md);
		font-size: var(--text-body-sm);
		color: var(--neutral-800);
	}

	.ruc-notice--warn {
		background: var(--warning-50);
	}

	.ruc-bigicon {
		display: grid;
		place-items: center;
		inline-size: 3.5rem;
		block-size: 3.5rem;
		background: var(--bg-muted);
		border-radius: var(--radius-full);
		color: var(--neutral-600);
	}

	.ruc-bigicon--ok {
		background: var(--success-50);
		color: var(--success-700);
	}

	.ruc-bigicon .ruc-icon {
		inline-size: 1.75rem;
		block-size: 1.75rem;
	}

	/* ------------------------------------------------------------------ primeros pasos */

	.ruc-onb {
		max-inline-size: calc(40rem + var(--gutter) * 2);
		padding-block: var(--space-4) var(--space-12);
	}

	.ruc-onb__top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-4);
	}

	.ruc-onb__count {
		font-size: var(--text-label);
		font-weight: var(--weight-medium);
		color: var(--text-muted);
	}

	.ruc-onb__bar {
		block-size: .375rem;
		margin-block: var(--space-2) var(--space-10);
		background: var(--bg-muted);
		border-radius: var(--radius-full);
		overflow: hidden;
	}

	.ruc-onb__bar span {
		display: block;
		block-size: 100%;
		inline-size: 25%;
		background: var(--accent);
		border-radius: inherit;
		transition: inline-size var(--dur) var(--ease-out);
	}

	.ruc-onb__step > * + * {
		margin-block-start: var(--space-4);
	}

	.ruc-onb__step h1:focus {
		outline: none;
	}

	.ruc-onb__lead {
		color: var(--text-secondary);
	}

	.ruc-onb__actions {
		display: flex;
		justify-content: flex-end;
		gap: var(--space-3);
		margin-block-start: var(--space-8);
	}

	.ruc-onb form > * + * {
		margin-block-start: var(--space-4);
	}

	/* ------------------------------------------------------------------ portada */

	.ruc--landing {
		padding-block-start: 0;
	}

	.ruc-hero {
		padding-block: clamp(var(--space-10), 7vw, var(--space-24));
		background: linear-gradient(180deg, var(--primary-50), var(--bg));
	}

	.ruc-hero__in {
		display: grid;
		align-items: center;
		gap: var(--space-12);
	}

	.ruc .ruc-hero h1 {
		margin-block-start: var(--space-3);
		font-size: var(--text-display-lg);
		line-height: var(--leading-tight);
		letter-spacing: var(--tracking-tight);
		max-inline-size: 16ch;
	}

	.ruc-hero__cta {
		margin-block-start: var(--space-8);
	}

	.ruc-hero__note {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		margin-block-start: var(--space-4);
		font-size: var(--text-body-sm);
		color: var(--text-secondary);
	}

	.ruc-hero__note .ruc-icon {
		inline-size: 1rem;
		block-size: 1rem;
	}

	.ruc-mock {
		display: grid;
		gap: var(--space-3);
		max-inline-size: 24rem;
		margin-inline: auto;
		padding: var(--space-6);
		background: var(--neutral-0);
		border: 1px solid var(--border);
		border-radius: var(--radius-2xl);
		box-shadow: var(--shadow-lg);
		rotate: 1.5deg;
	}

	.ruc-mock__title {
		font-weight: var(--weight-semibold);
	}

	.ruc-mock__row,
	.ruc-mock__task {
		display: flex;
		align-items: center;
		gap: var(--space-3);
	}

	.ruc-mock__row {
		padding: var(--space-3);
		background: var(--bg-subtle);
		border-radius: var(--radius-lg);
	}

	.ruc-mock__n {
		display: grid;
		place-items: center;
		inline-size: 1.5rem;
		block-size: 1.5rem;
		background: var(--accent-soft);
		border-radius: var(--radius-full);
		font-size: var(--text-caption);
		font-weight: var(--weight-semibold);
		color: var(--primary-800);
	}

	.ruc-mock__bar {
		block-size: .625rem;
		background: var(--neutral-200);
		border-radius: var(--radius-full);
	}

	.ruc-mock__bar--a { inline-size: 52%; background: var(--neutral-300); }
	.ruc-mock__bar--b { inline-size: 40%; }
	.ruc-mock__bar--c { inline-size: 46%; }
	.ruc-mock__bar--d { inline-size: 58%; }
	.ruc-mock__bar--e { inline-size: 44%; }

	.ruc-mock__chip {
		inline-size: 3.25rem;
		block-size: 1.25rem;
		margin-inline-start: auto;
		background: var(--neutral-200);
		border-radius: var(--radius-sm);
	}

	.ruc-mock__chip--go {
		background: var(--primary-200);
	}

	.ruc-mock__check {
		display: grid;
		place-items: center;
		inline-size: 1.25rem;
		block-size: 1.25rem;
		background: var(--accent);
		border-radius: var(--radius-sm);
		color: var(--neutral-0);
	}

	.ruc-mock__check .ruc-icon {
		inline-size: .8rem;
		block-size: .8rem;
		stroke-width: 3;
	}

	.ruc-mock__check--off {
		background: transparent;
		border: 1.5px solid var(--neutral-300);
	}

	.ruc-section {
		margin-block-start: var(--block-y);
	}

	.ruc .ruc-section__title {
		margin-block-end: var(--space-6);
		font-size: var(--text-h2);
	}

	.ruc-section__cta {
		margin-block-start: var(--space-8);
	}

	.ruc-features {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
		gap: var(--space-4);
	}

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

	.ruc-feature__icon {
		display: grid;
		place-items: center;
		inline-size: 2.75rem;
		block-size: 2.75rem;
		margin-block-end: var(--space-2);
		background: var(--accent-soft);
		border-radius: var(--radius-lg);
		color: var(--accent);
	}

	.ruc .ruc-feature h3 {
		font-size: var(--text-h4);
	}

	.ruc-feature p {
		font-size: var(--text-body-sm);
		line-height: 1.55;
		color: var(--text-secondary);
	}

	.ruc-privacy {
		display: grid;
		gap: var(--space-6);
		padding: clamp(var(--space-6), 4vw, var(--space-12));
		background: var(--neutral-900);
		border-radius: var(--radius-2xl);
		color: var(--neutral-200);
	}

	.ruc .ruc-privacy h2 {
		margin: 0;
		color: var(--neutral-0);
	}

	.ruc-privacy__lead {
		margin-block-start: var(--space-3);
		color: var(--neutral-300);
	}

	.ruc-checks {
		display: grid;
		gap: var(--space-3);
	}

	.ruc-checks li {
		display: flex;
		gap: var(--space-3);
	}

	.ruc-checks .ruc-icon {
		flex: none;
		margin-block-start: .15rem;
		color: var(--lime-400);
		stroke-width: 2.5;
	}

	.ruc-steps {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
		gap: var(--space-4);
		list-style: none;
		padding: 0;
		counter-reset: ruc-step;
	}

	.ruc-steps li {
		display: grid;
		align-content: start;
		gap: var(--space-1);
		padding-block-start: var(--space-4);
		border-block-start: 2px solid var(--accent);
		counter-increment: ruc-step;
	}

	.ruc-steps li::before {
		content: counter(ruc-step);
		font-size: var(--text-label);
		font-weight: var(--weight-bold);
		color: var(--accent);
	}

	.ruc-steps span {
		font-size: var(--text-body-sm);
		color: var(--text-secondary);
	}

	@media (min-width: 56rem) {
		.ruc-hero__in {
			grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
		}

		.ruc-privacy {
			grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
			align-items: center;
		}
	}

	/* ------------------------------------------------------------------ normas */

	.ruc-doc {
		max-inline-size: 46rem;
	}

	.ruc-doc > * + * {
		margin-block-start: var(--space-4);
	}

	.ruc-doc__lead {
		font-size: var(--text-body-lg);
		color: var(--text-secondary);
	}

	.ruc .ruc-doc h2 {
		margin-block-start: var(--space-10);
		font-size: var(--text-h3);
	}

	.ruc-doc ul {
		display: grid;
		gap: var(--space-2);
		padding-inline-start: 1.25em;
		color: var(--neutral-800);
	}

	.ruc-doc li::marker {
		color: var(--text-muted);
	}

	.ruc-doc__foot {
		margin-block-start: var(--space-10);
		padding-block-start: var(--space-4);
		border-block-start: 1px solid var(--border);
		font-size: var(--text-body-sm);
	}

	/* ------------------------------------------------------------------ diálogos */

	.ruc-dialog {
		max-block-size: min(46rem, 100dvh - var(--space-8));
		padding: var(--space-6);
		overflow-y: auto;
	}

	.ruc-dialog::backdrop {
		background: var(--overlay);
	}

	.ruc-dialog--sm {
		inline-size: min(100% - var(--gutter) * 2, 26rem);
	}

	.ruc-dialog__title {
		font-size: var(--text-h3);
	}

	.ruc-dialog__sub {
		font-size: var(--text-h4);
		margin-block: var(--space-2);
	}

	.ruc-dialog__sub:focus {
		outline: none;
	}

	.ruc-dialog__text {
		margin-block-end: var(--space-4);
		font-size: var(--text-body-sm);
		color: var(--text-secondary);
	}

	.ruc-dialog__foot {
		align-items: center;
		margin-block-start: var(--space-6);
	}

	.ruc-dialog .ru-field,
	.ruc-dialog form > .ruc-options {
		margin-block-end: var(--space-4);
	}

	.ruc-dialog .ruc-search__list {
		position: static;
		box-shadow: none;
	}

	.ruc-dialog .ruc-options {
		display: grid;
		gap: var(--space-1);
	}

	.ruc-option {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		min-block-size: var(--tap);
		padding-inline: var(--space-3);
		border-radius: var(--radius-md);
		cursor: pointer;
	}

	.ruc-option:hover {
		background: var(--bg-subtle);
	}

	.ruc-option input {
		inline-size: 1.125rem;
		block-size: 1.125rem;
		accent-color: var(--accent);
	}

	.ruc-picklist {
		display: grid;
		gap: var(--space-1);
		max-block-size: 18rem;
		margin-block: var(--space-3);
		overflow-y: auto;
	}

	.ruc-picklist li {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-3);
		padding: var(--space-2) var(--space-3);
		background: var(--bg-subtle);
		border-radius: var(--radius-md);
	}

	.ruc-picklist li > span {
		display: grid;
		min-inline-size: 0;
		font-size: var(--text-body-sm);
	}

	.ruc-picklist li > span span {
		font-size: var(--text-label);
		color: var(--text-muted);
	}

	.ruc-picklist .is-done {
		--btn-fg: var(--success-700);
		--btn-border: transparent;
		--btn-bg: transparent;
		box-shadow: none;
	}

	/* ------------------------------------------------------------------ avisos breves */

	.ruc-toasts {
		position: fixed;
		inset-inline: var(--space-4);
		inset-block-end: calc(var(--ruc-bar-h, 4rem) + 5rem + env(safe-area-inset-bottom, 0px));
		z-index: calc(var(--z-overlay) + 2);
		display: grid;
		justify-items: center;
		gap: var(--space-2);
		pointer-events: none;
	}

	.ruc-toast {
		max-inline-size: 30rem;
		padding: var(--space-3) var(--space-4);
		background: var(--neutral-900);
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-lg);
		font-size: var(--text-body-sm);
		font-weight: var(--weight-medium);
		color: var(--neutral-0);
		animation: ruc-toast-in var(--dur) var(--ease-out);
		transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
	}

	.ruc-toast--error {
		background: var(--error-700);
	}

	.ruc-toast.is-out {
		opacity: 0;
		transform: translateY(.5rem);
	}

	@keyframes ruc-toast-in {
		from {
			opacity: 0;
			transform: translateY(.75rem);
		}
	}

	@media (min-width: 64rem) {
		.ruc-toasts {
			inset-block-end: var(--space-8);
		}
	}

	/* El atributo hidden manda sobre cualquier display de esta hoja. */
	.ruc [hidden],
	.ruc-dialog [hidden] {
		display: none;
	}

	[aria-busy="true"] {
		opacity: .65;
		cursor: progress;
	}
}

/*
 * Fuera de las capas a propósito: el botón flotante del asistente del sitio está fuera de ellas y
 * taparía la última pestaña de la barra inferior de Campus. En las vistas de aplicación se sube
 * por encima de la barra; en escritorio no hay barra y se queda donde está.
 */
@media (max-width: 63.99rem) {
	body.ru-campus--app .lia-launcher {
		inset-block-end: calc(4rem + 1rem + env(safe-area-inset-bottom, 0px));
	}
}
