/**
 * Estilos de la pantalla de perfil.
 */

.rd-profile {
	max-width: 720px;
}

.rd-profile__heading {
	font-family: var(--rd-font-display);
	font-weight: var(--rd-weight-display);
	font-size: 1.625rem;
	letter-spacing: -0.03em;
	margin: 0 0 var(--rd-space-2);
	color: var(--rd-ink);
}

.rd-profile__intro {
	color: var(--rd-ink-soft);
	font-size: var(--rd-size-sm);
	line-height: var(--rd-leading-snug);
	margin: 0 0 var(--rd-space-5);
}

.rd-card--flat {
	background: var(--rd-surface);
	border-radius: var(--rd-radius-lg);
	box-shadow: var(--rd-shadow-card);
	padding: var(--rd-space-5);
	margin-bottom: var(--rd-space-5);
}

.rd-profile__section-title {
	font-family: var(--rd-font-display);
	font-weight: var(--rd-weight-display);
	font-size: 1.0625rem;
	letter-spacing: -0.02em;
	margin: 0 0 var(--rd-space-3);
	color: var(--rd-ink);
}

/* --- Identidad --- */

.rd-profile__identity {
	display: flex;
	gap: var(--rd-space-5);
	align-items: flex-start;
	flex-wrap: wrap;
}

.rd-profile__avatar {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--rd-surface-alt);
	flex-shrink: 0;
}

.rd-profile__identity-body {
	flex: 1 1 220px;
	min-width: 0;
}

.rd-profile__username {
	font-family: var(--rd-font-display);
	font-weight: var(--rd-weight-display);
	font-size: 1.25rem;
	letter-spacing: -0.02em;
	margin: 0 0 var(--rd-space-1);
	color: var(--rd-ink);
	word-break: break-word;
}

.rd-profile__meta {
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-soft);
	margin: 0 0 var(--rd-space-4);
}

.rd-profile__avatar-form {
	display: flex;
	align-items: center;
	gap: var(--rd-space-3);
	flex-wrap: wrap;
	margin-bottom: var(--rd-space-2);
}

.rd-filebutton {
	display: inline-flex;
	align-items: center;
	padding: var(--rd-space-2) var(--rd-space-4);
	border: 1px solid var(--rd-border-strong);
	border-radius: var(--rd-radius-pill);
	font-size: var(--rd-size-sm);
	color: var(--rd-primary);
	cursor: pointer;
	transition: background var(--rd-transition);
}

.rd-filebutton:hover {
	background: var(--rd-surface-alt);
}

.rd-filebutton input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.rd-linkbutton {
	background: none;
	border: 0;
	padding: 0;
	font-family: inherit;
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-soft);
	text-decoration: underline;
	cursor: pointer;
}

.rd-linkbutton:hover {
	color: var(--rd-primary);
}

/* --- Formularios --- */

.rd-inline-form {
	display: flex;
	gap: var(--rd-space-3);
	align-items: stretch;
	flex-wrap: wrap;
	margin-top: var(--rd-space-3);
}

.rd-inline-form .rd-input {
	flex: 1 1 200px;
	width: auto;
}

.rd-button--compact {
	width: auto;
	padding-left: var(--rd-space-5);
	padding-right: var(--rd-space-5);
	flex-shrink: 0;
}

.rd-textarea {
	resize: vertical;
	min-height: 88px;
	font-family: inherit;
	line-height: var(--rd-leading-snug);
}

.rd-readonly {
	margin: 0;
	padding: var(--rd-space-3) 0;
	font-size: var(--rd-size-base);
	color: var(--rd-ink);
}

.rd-profile__actions {
	margin-bottom: var(--rd-space-5);
}

.rd-profile__actions .rd-button {
	width: auto;
	padding-left: var(--rd-space-6);
	padding-right: var(--rd-space-6);
}

/* --- Selector de privacidad --- */

.rd-privacy {
	margin-top: var(--rd-space-3);
	padding-top: var(--rd-space-3);
	border-top: 1px dashed var(--rd-border);
}

.rd-privacy--wide {
	margin-bottom: var(--rd-space-5);
}

.rd-privacy__label {
	display: block;
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-muted);
	margin-bottom: var(--rd-space-2);
}

.rd-privacy__options {
	display: flex;
	gap: var(--rd-space-2);
	flex-wrap: wrap;
}

.rd-privacy__option {
	position: relative;
	cursor: pointer;
}

.rd-privacy__option input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.rd-privacy__option span {
	display: inline-block;
	padding: var(--rd-space-2) var(--rd-space-4);
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-pill);
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-soft);
	background: var(--rd-surface);
	transition: all var(--rd-transition);
}

.rd-privacy__option input:checked + span {
	background: var(--rd-primary);
	border-color: var(--rd-primary);
	color: #fff;
}

.rd-privacy__option input:focus-visible + span {
	box-shadow: var(--rd-shadow-focus);
}

/* --- Frases --- */

.rd-phrases {
	display: grid;
	gap: var(--rd-space-4);
	margin-bottom: var(--rd-space-5);
}

.rd-phrase__label {
	display: block;
	font-size: var(--rd-size-sm);
	color: var(--rd-ink);
	margin-bottom: var(--rd-space-2);
	line-height: var(--rd-leading-snug);
}

.rd-phrase.is-locked {
	opacity: 0.45;
}

.rd-phrase.is-locked .rd-input {
	background: var(--rd-surface-alt);
	cursor: not-allowed;
}

/* --- Avatar en la navegación --- */

.rd-nav__profile {
	display: inline-flex;
	align-items: center;
	gap: var(--rd-space-2);
	text-decoration: none;
	color: var(--rd-ink);
	padding: var(--rd-space-1) var(--rd-space-2);
	border-radius: var(--rd-radius-pill);
	transition: background var(--rd-transition);
	min-width: 0;
}

.rd-nav__profile:hover {
	background: var(--rd-surface-alt);
}

.rd-nav__profile.is-active {
	background: var(--rd-badge-bg);
}

.rd-nav__avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--rd-surface-alt);
	flex-shrink: 0;
}

@media (max-width: 899px) {
	.rd-profile {
		max-width: none;
	}

	.rd-privacy__options {
		gap: var(--rd-space-1);
	}

	.rd-privacy__option span {
		padding: var(--rd-space-2) var(--rd-space-3);
	}
}

/* ==========================================================
   Recorte de la foto de perfil
   ========================================================== */

.rd-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

body.rd-noscroll {
	overflow: hidden;
}

.rd-cropper {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--rd-space-4);
	background: rgba(58, 33, 22, 0.55);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

.rd-cropper[hidden] {
	display: none;
}

.rd-cropper__panel {
	background: var(--rd-surface);
	border-radius: var(--rd-radius-lg);
	box-shadow: var(--rd-shadow-card);
	padding: var(--rd-space-5);
	width: 100%;
	max-width: 380px;
	max-height: 100%;
	overflow-y: auto;
}

.rd-cropper__title {
	font-family: var(--rd-font-display);
	font-weight: var(--rd-weight-display);
	font-size: 1.25rem;
	letter-spacing: -0.02em;
	text-align: center;
	margin: 0 0 var(--rd-space-2);
	color: var(--rd-ink);
}

.rd-cropper__hint {
	text-align: center;
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-soft);
	margin: 0 0 var(--rd-space-4);
	line-height: var(--rd-leading-snug);
}

/* El escenario es cuadrado; la máscara dibuja el círculo encima. */
.rd-cropper__stage {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--rd-radius-md);
	background: var(--rd-surface-alt);
	cursor: grab;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

.rd-cropper__stage:active {
	cursor: grabbing;
}

.rd-cropper__image {
	position: absolute;
	top: 0;
	left: 0;
	max-width: none;
	transform-origin: 0 0;
	pointer-events: none;
}

.rd-cropper__mask {
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: 50%;
	box-shadow: 0 0 0 9999px rgba(253, 243, 236, 0.82);
}

.rd-cropper__zoom-row {
	display: flex;
	align-items: center;
	gap: var(--rd-space-3);
	margin: var(--rd-space-4) 0 var(--rd-space-5);
	color: var(--rd-ink-soft);
}

.rd-cropper__zoom-row svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.rd-cropper__zoom {
	flex: 1;
	accent-color: var(--rd-primary);
	cursor: pointer;
}

.rd-cropper__actions {
	display: grid;
	gap: var(--rd-space-3);
}

.rd-cropper__actions .rd-button {
	width: 100%;
}

@media (max-height: 700px) {
	.rd-cropper__stage {
		max-width: 240px;
		margin: 0 auto;
	}
}

.rd-hint--notice {
	color: var(--rd-primary);
}

/* ==========================================================
   Distintivo de cuenta verificada
   ========================================================== */

.rd-verified {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	flex-shrink: 0;
}

.rd-verified svg {
	width: 100%;
	height: 100%;
	display: block;
}

.rd-verified__disc {
	fill: var(--rd-verified);
}

.rd-verified__check {
	stroke: #fff;
}

.rd-verified--md {
	width: 20px;
	height: 20px;
	margin-left: 6px;
}

.rd-verified--sm {
	width: 15px;
	height: 15px;
	margin-left: 4px;
}

/*
 * Aquí había un «.rd-nav__name { display: inline-flex }».
 *
 * Se ha quitado, y no se vuelve a poner: es una regla de la barra de
 * navegación metida en la hoja del perfil, sin condición de ancho y
 * cargada después de app.css, así que ganaba siempre y la palabra
 * «Perfil» salía también en el móvil. Esos cincuenta píxeles de más
 * eran los que descuadraban el reparto de la fila.
 *
 * Quién enseña esa palabra y a partir de qué ancho lo deciden app.css
 * y nav.css, que son las hojas de la barra.
 */

/* ==========================================================
   Así te ve el resto
   ========================================================== */

.rd-profile__topbar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--rd-space-4);
	flex-wrap: wrap;
	margin-bottom: var(--rd-space-5);
}

.rd-profile__topbar .rd-profile__intro {
	margin-bottom: 0;
}

.rd-iconbutton {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: var(--rd-space-2) var(--rd-space-4);
	border: 1px solid var(--rd-border-strong);
	border-radius: var(--rd-radius-pill);
	font-size: var(--rd-size-sm);
	color: var(--rd-primary);
	text-decoration: none;
	background: var(--rd-surface);
	white-space: nowrap;
	flex-shrink: 0;
	transition: background var(--rd-transition), color var(--rd-transition);
}

.rd-iconbutton svg {
	width: 16px;
	height: 16px;
}

.rd-iconbutton:hover {
	background: var(--rd-surface-alt);
}

.rd-iconbutton--primary {
	background: var(--rd-primary);
	border-color: var(--rd-primary);
	color: #fff;
}

.rd-iconbutton--primary:hover {
	background: var(--rd-primary-hover);
	color: #fff;
}

/* --- Ficha --- */

.rd-view__head {
	display: flex;
	gap: var(--rd-space-5);
	align-items: flex-start;
	flex-wrap: wrap;
	padding-bottom: var(--rd-space-5);
	border-bottom: 1px solid var(--rd-border);
}

.rd-view__avatar {
	width: 88px;
	height: 88px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--rd-surface-alt);
	flex-shrink: 0;
}

.rd-view__ident {
	flex: 1 1 220px;
	min-width: 0;
}

.rd-view__name {
	display: flex;
	align-items: center;
	font-family: var(--rd-font-display);
	font-weight: var(--rd-weight-display);
	font-size: 1.375rem;
	letter-spacing: -0.02em;
	margin: 0 0 var(--rd-space-2);
	color: var(--rd-ink);
	word-break: break-word;
}

.rd-view__bio {
	font-size: var(--rd-size-sm);
	line-height: var(--rd-leading-snug);
	color: var(--rd-ink-soft);
	margin: 0 0 var(--rd-space-2);
}

.rd-view__meta {
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-muted);
	margin: 0;
}

/* --- Datos --- */

.rd-view__data {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--rd-space-4);
	margin: var(--rd-space-5) 0 0;
	padding: 0;
}

.rd-view__data div {
	min-width: 0;
}

.rd-view__data dt {
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-muted);
	margin-bottom: 3px;
}

.rd-view__data dd {
	margin: 0;
	font-size: var(--rd-size-sm);
	color: var(--rd-ink);
	word-break: break-word;
}

/* --- Frases --- */

.rd-view__phrases {
	margin-top: var(--rd-space-5);
	padding-top: var(--rd-space-5);
	border-top: 1px solid var(--rd-border);
}

.rd-view__section {
	font-family: var(--rd-font-display);
	font-weight: var(--rd-weight-display);
	font-size: 1rem;
	letter-spacing: -0.02em;
	margin: 0 0 var(--rd-space-4);
	color: var(--rd-ink);
}

.rd-view__phrase {
	padding: var(--rd-space-3) 0;
	border-bottom: 1px dashed var(--rd-border);
}

.rd-view__phrase:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.rd-view__phrase-q {
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-muted);
	margin: 0 0 3px;
}

.rd-view__phrase-a {
	font-size: var(--rd-size-base);
	color: var(--rd-ink);
	margin: 0;
	line-height: var(--rd-leading-snug);
}

/* --- Avisos --- */

.rd-view__empty {
	margin: var(--rd-space-5) 0 0;
	padding: var(--rd-space-4);
	background: var(--rd-surface-alt);
	border-radius: var(--rd-radius-md);
	font-size: var(--rd-size-sm);
	line-height: var(--rd-leading-snug);
	color: var(--rd-ink-soft);
}

.rd-view__note {
	display: flex;
	align-items: flex-start;
	gap: var(--rd-space-2);
	margin: var(--rd-space-5) 0 0;
	padding-top: var(--rd-space-4);
	border-top: 1px solid var(--rd-border);
	font-size: var(--rd-size-xs);
	line-height: var(--rd-leading-snug);
	color: var(--rd-ink-muted);
}

.rd-view__note svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	margin-top: 1px;
}


/* ==========================================================
   Tus datos: descargarlos y borrar la cuenta
   ========================================================== */

.rd-data__lead {
	margin: 0 0 var(--rd-space-5);
	color: var(--rd-ink-soft);
	line-height: var(--rd-leading-normal);
}

.rd-data__block {
	padding: var(--rd-space-4);
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-md);
	margin-bottom: var(--rd-space-4);
}

/* El bloque de borrar va marcado, pero sin alarmar: es un derecho, no
   una zona peligrosa. */
.rd-data__block--danger {
	border-color: var(--rd-primary);
	background: var(--rd-surface-alt);
	margin-bottom: 0;
}

.rd-data__title {
	margin: 0 0 var(--rd-space-2);
	font-family: var(--rd-font-display);
	font-weight: var(--rd-weight-display);
	font-size: var(--rd-size-base);
	color: var(--rd-ink);
}

.rd-data__hint {
	margin: 0 0 var(--rd-space-3);
	font-size: var(--rd-size-sm);
	color: var(--rd-ink-soft);
	line-height: var(--rd-leading-normal);
}

.rd-data__form {
	max-width: 340px;
}

.rd-button--danger {
	background: var(--rd-primary);
	color: var(--rd-surface);
}

.rd-button--danger:hover {
	background: var(--rd-primary-hover);
}


/* ==========================================================
   Ajustes
   ========================================================== */

.rd-settings {
	display: flex;
	flex-direction: column;
	gap: var(--rd-space-5);
}

.rd-settings__title {
	margin: 0 0 var(--rd-space-3);
	font-family: var(--rd-font-display);
	font-weight: var(--rd-weight-display);
	font-size: var(--rd-size-lg);
	color: var(--rd-ink);
}

.rd-settings__hint {
	margin: 0 0 var(--rd-space-3);
	font-size: var(--rd-size-sm);
	color: var(--rd-ink-soft);
	line-height: var(--rd-leading-normal);
}

.rd-settings__form {
	max-width: 360px;
}

.rd-settings__legal {
	margin: var(--rd-space-4) 0 0;
	font-size: var(--rd-size-sm);
}

.rd-settings__legal a {
	color: var(--rd-primary);
}


/* --- Personas bloqueadas --- */

.rd-blocked {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--rd-space-2);
	max-width: 360px;
}

.rd-blocked__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rd-space-3);
	padding: var(--rd-space-3);
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-md);
}

.rd-blocked__name {
	font-size: var(--rd-size-sm);
	color: var(--rd-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ==========================================================
   Un apartado, una tarjeta
   ==========================================================
   Y quién lo ve, arriba junto al título. Antes iba al final de cada
   campo, debajo de las pistas, que es el sitio donde menos se mira de
   toda la caja: la gente rellenaba el perfil sin darse cuenta de que
   estaba decidiendo qué enseña.
   ========================================================== */

.rd-field__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rd-space-4);
	flex-wrap: wrap;
	margin-bottom: var(--rd-space-3);
}

.rd-field__head .rd-profile__section-title {
	margin: 0;
}

.rd-profile__section-hint {
	margin: -4px 0 var(--rd-space-4);
	font-size: var(--rd-size-sm);
	color: var(--rd-ink-muted);
	line-height: var(--rd-leading-normal);
}

/* ==========================================================
   La ficha
   ==========================================================
   La foto manda: ocupa el ancho entero y el nombre va encima, sobre un
   velo oscuro. Debajo, cada cosa en su propia tarjeta. Antes era una
   lista de etiquetas y valores, que se lee como un formulario y no
   como una persona.
   ========================================================== */

.rd-ficha {
	display: flex;
	flex-direction: column;
	gap: var(--rd-space-3);
	/* La foto se guarda a 400 píxeles. Enseñarla más grande es
	   estirarla, y eso es lo que se veía borroso. */
	max-width: 400px;
	margin: 0 auto;
}

.rd-ficha__foto {
	position: relative;
	/* Cuadrada, que es como se recorta y se guarda. En 4 por 5 había
	   que recortar por arriba y por abajo o estirar, y las dos cosas
	   empeoran lo que se ve. */
	aspect-ratio: 1 / 1;
	border-radius: var(--rd-radius-lg);
	overflow: hidden;
	box-shadow: var(--rd-shadow-card);
	background: var(--rd-surface-alt);
	/*
	 * Lo de dentro se mide contra la foto, no contra la pantalla.
	 *
	 * Esta caja es un contenedor, así que sus hijos pueden usar «cqi»:
	 * la centésima parte del ancho de la foto. Es lo que hace que el
	 * nombre ocupe siempre la misma porción del cuadrado, mida la foto
	 * 400 píxeles en un ordenador o 320 en un móvil pequeño.
	 *
	 * Con píxeles fijos no había forma: el tamaño que dejaba el nombre
	 * en su sitio en el escritorio se comía la foto en el móvil.
	 */
	container-type: inline-size;
}

.rd-ficha__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*
 * El nivel, arriba a la derecha.
 *
 * La sombra no es adorno: la silueta es coral maciza y muchas fotos
 * tienen justo esos tonos. Sin una sombra que la despegue, el nivel
 * desaparece dentro de la foto de media comunidad.
 */
.rd-ficha__nivel {
	position: absolute;
	/* Cada medida va dos veces: primero en píxeles y después en «cqi».
	   Un navegador que no entienda los contenedores tira la segunda
	   línea y se queda con la primera, que es la misma proporción para
	   una foto de 400. Sin la primera se quedaría sin ninguna. */
	top: 16px;
	top: 4cqi;
	right: 16px;
	right: 4cqi;
	font-size: 44px;
	font-size: 12cqi;
	filter: drop-shadow(0 2px 5px rgba(28, 18, 12, .5));
}

/* El velo: sin él, un nombre claro sobre una foto clara no se lee. Va
   de transparente a oscuro para no ensuciar la mitad de arriba.

   Ocupa el ancho entero aunque el texto solo use la mitad izquierda:
   un degradado que se cortara por la mitad dejaría una raya vertical
   en medio de la foto, que es peor que el velo. */
.rd-ficha__sobre {
	position: absolute;
	inset: auto 0 0 0;
	/* El trato con el nombre: pase lo que pase, no sube de la mitad de
	   la foto. Los tamaños de abajo están calculados para que el texto
	   quepa muy por debajo de este techo; esto es la red por si algún
	   día alguien estrena un nombre imposible. */
	max-height: 50%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	padding: var(--rd-space-6) var(--rd-space-5) var(--rd-space-4);
	padding: 8cqi 5cqi 5cqi;
	background: linear-gradient(to top, rgba(28, 18, 12, .82) 0%, rgba(28, 18, 12, .55) 55%, transparent 100%);
	color: #fff;
}

/*
 * El nombre: un techo para todos y un solo renglón.
 *
 * Esto es lo que ha pedido Alba, y antes pasaba justo lo contrario.
 *
 * ANTES. El tamaño salía de «cqi», que es la centésima parte del ancho
 * de la foto, así que el mismo nombre se veía de un tamaño en el perfil
 * —donde la foto mide 400— y de otro en Comunidad —donde mide 560—.
 * Medidos en pantalla: 26,4 y 27 píxeles. Y el hueco era la mitad del
 * ancho, así que cualquier nombre de más de doce o trece letras se
 * partía en dos o tres renglones. Un nombre partido no se lee como un
 * nombre.
 *
 * AHORA. Dos cambios y en este orden:
 *
 *   1. El nombre ocupa el ancho entero del velo y no la mitad. El velo
 *      ya se pintaba de lado a lado, y el nivel vive arriba a la
 *      derecha, así que abajo no le quita el sitio a nadie. Con el
 *      ancho doblado, un nombre largo cabe entero sin encoger.
 *   2. El tamaño lleva techo, y el techo es lo que manda en todas las
 *      pantallas donde hay sitio: 23 píxeles en el perfil, en Comunidad
 *      y en cualquier tableta. Igual en los dos lados, que es lo que se
 *      pedía.
 *
 * ¿Y POR QUÉ SIGUE HABIENDO «cqi» SI ES LO QUE FALLABA? Porque hace
 * falta un suelo para el móvil, donde la foto no llega a 300 píxeles y
 * a 23 no cabe un nombre largo. Ahí, y solo ahí, el tamaño baja: encoge
 * lo justo para que quepa y ni un punto más. En cuanto la foto pasa de
 * 371 píxeles, el techo vuelve a mandar y todos los nombres miden lo
 * mismo otra vez. Y de 371 no baja ninguna foto de ordenador ni de
 * tableta: medidas una por una, van de 376 —el perfil en una ventana de
 * 768— a 560 —una ficha de Comunidad en pantalla ancha—.
 *
 * DE DÓNDE SALE EL 6,2. Un nombre de usuario tiene entre 3 y 20
 * caracteres y solo puede llevar letras minúsculas, cifras, punto y
 * guion bajo: lo dice Reddie_Username, no es una suposición. Del ancho
 * de la foto el texto dispone de 90cqi —los otros 10 son el relleno del
 * velo—, así que el tamaño y lo que cabe son la misma cuenta: con
 * 6,2cqi de letra caben 90 ÷ 6,2 = 14,5 anchos de letra de nombre.
 *
 * ESE 14,5 SE QUEDÓ CORTO, y aquí está medido por qué. El 13,7 que
 * justificaba la cuenta era «veinte cifras», y las cifras no son lo más
 * ancho que se puede escribir. Medido con la Montserrat de la casa:
 *
 *     mariadelascandelas12  11,65   (el más largo que existe hoy)
 *     maxi_mm_ww_mm_ww_mmm  16,14   se recorta
 *     ammmwwwmmmwwwmmmwww   18,51   se recorta
 *     wwwwwwwwwwwwwwwwwwww  18,80   se recorta
 *     mmmmmmmmmmmmmmmmmmmm  20,90   se recorta
 *
 * y el distintivo de verificado suma 0,73 más. O sea que el peor caso
 * que Reddie deja escribir son 21,63, y el presupuesto son 14,5.
 *
 * LAS TRES COSAS QUE PIDIÓ ALBA NO CABEN JUNTAS, y conviene tenerlo
 * escrito para no volver a intentarlo. Pidió que el tamaño se ajuste,
 * que no se parta en dos renglones y que no haya nombres más grandes
 * que otros. Si todos miden lo mismo, ese tamaño lo manda la foto más
 * pequeña de las tres pantallas —277 píxeles, el perfil en un móvil de
 * 320—, y para que ahí quepan 21,63 anchos de letra el nombre de TODO
 * el mundo tendría que bajar a 11,5 píxeles. Once píxeles y medio para
 * el nombre de una persona no es una solución, es otro fallo.
 *
 * ASÍ QUE LA LECTURA BUENA ES LA OTRA, y es además lo primero que dice
 * la frase: «que el tamaño de la letra se ajuste». El techo de 23 es de
 * todos y nadie lo pasa —ahí está el «no haya nombres más grandes que
 * otros», que habla de pasarse, no de quedarse corto—, y el nombre que
 * no quepa a 23 baja lo justo para caber. Nadie sale más grande que
 * nadie y a nadie se le corta el nombre.
 *
 * Con una consecuencia que conviene saber: un nombre de esos, el que ha
 * tenido que encoger, no sale igual en las tres pantallas. En Comunidad
 * la foto mide 560 y ahí cabe a 23; en el perfil mide 400 y baja a 17.
 * No hay manera de evitarlo sin encogerlo también donde sobra sitio, y
 * eso sería castigar a la pantalla ancha por lo que le pasa a la
 * estrecha. Los nombres que caben —que hoy son todos— siguen midiendo
 * lo mismo en las tres, que es lo que se notaba y lo que se pedía.
 *
 * LO QUE FALTA PARA QUE ESO PASE es un dato que el CSS no puede sacar:
 * cuánto mide el nombre. No sabe contar texto ni medirlo, y no hay
 * manera de darle la vuelta —una consulta de contenedor tampoco vale,
 * porque un elemento con «container-type» no puede medirse por lo que
 * lleva dentro—. La cuenta de abajo ya está escrita para recibirlo en
 * «--rd-ficha-nombre-em» —el ancho del nombre en anchos de letra, con
 * el distintivo si lo lleva—, que es lo que tiene que poner la
 * plantilla al pintar el cuadro. Queda apuntado en el informe con la
 * tabla de anchos que hace falta para calcularlo.
 *
 * Sin ese dato se usa 14,5161, que es exactamente el 6,2cqi de antes,
 * así que hoy no cambia ni un píxel en ninguna pantalla: comprobado,
 * 23 en el perfil y en Comunidad, 20,65 a 375 y 17,2 a 320. Y el día
 * que la plantilla lo mande, esta hoja no hay que tocarla.
 *
 * LOS TRES TÉRMINOS, de dentro afuera. El «6,2cqi» es el ritmo de
 * siempre y es quien manda en el móvil: sin él, un nombre corto en una
 * foto de 333 se iría al techo de 23 y el móvil dejaría de encoger, que
 * es lo que hoy está bien. La división es la que ajusta el nombre largo
 * y solo puede bajar, nunca subir. El techo de 23 es el de todos.
 *
 * EL SUELO DE 11 no es un gusto, es la cuenta: el peor nombre posible
 * son 21,63 anchos de letra y la foto más pequeña que se da mide 278
 * píxeles, o sea 250 de texto, y 250 ÷ 21,63 son 11,6. Con 11 de suelo
 * no se recorta ni ese ni ninguno, y sigue leyéndose por encima de la
 * antigüedad, que en esa misma foto se pinta a 10. Puesto más alto —lo
 * probé con 14— el nombre de veinte emes vuelve a recortarse en el
 * móvil de 320, que es justo lo que se venía a arreglar. Y puesto ahí
 * abajo no estorba: con el valor de reserva el tamaño más pequeño que
 * se da hoy son los 17,2 de ese móvil, así que el suelo solo aparece si
 * la plantilla manda un número disparatado.
 *
 * Las dos líneas de «font-size» son a propósito: un navegador que no
 * entienda los contenedores tira la segunda y se queda con el techo,
 * que es la medida buena en casi todas las pantallas.
 */
.rd-ficha__nombre {
	max-width: 100%;
	margin: 0;
	font-family: var(--rd-font-display);
	font-weight: var(--rd-weight-display);
	font-size: 23px;
	font-size: clamp(11px, min(6.2cqi, calc(90cqi / var(--rd-ficha-nombre-em, 14.5161))), 23px);
	line-height: 1.15;

	/* Un renglón y nada más. Si algún día un nombre no cupiera ni
	   encogido, se recorta por el final: se sigue reconociendo quién es,
	   y la ficha no cambia de alto según el nombre que le toque. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Aquí había una regla para la edad pegada al nombre.

   Se ha ido porque no casaba con nada: dentro del nombre solo se emite
   ya «<span class="rd-verified">», y el selector pedía un span SIN
   clase. Cero elementos, comprobado en la ficha abierta.

   La edad vive ahora en su propia chapa, fuera del cuadro de la foto,
   y de su tamaño se encarga la regla de la chapa. */


/* El distintivo de verificado, a la medida del nombre: en píxeles
   fijos se quedaba enano cuando el nombre crecía con la foto. */
.rd-ficha__nombre .rd-verified {
	width: .55em;
	height: .55em;
	margin-left: .18em;
}

/* La antigüedad: debajo del nombre, más pequeña y sin negrita. Es un
   dato de contexto, no un titular.

   Con techo por lo mismo que el nombre: en una foto más ancha que las
   de esta pantalla, un 3,6 por ciento deja de ser letra pequeña y pasa
   a competir con el nombre. El tope es el tamaño pequeño de siempre,
   que es justo lo que pide ya en una foto de 400.

   Y con el ancho entero, como el nombre de arriba. Con la mitad, en un
   móvil pequeño «3 años y 11 meses en Reddie» —que es la frase más
   larga que puede salir— se partía en dos renglones debajo de un nombre
   que sí va en uno. */
.rd-ficha__dias {
	max-width: 100%;
	margin: 6px 0 0;
	margin: 1.5cqi 0 0;
	font-size: var(--rd-size-sm);
	font-size: min(3.6cqi, var(--rd-size-sm));
	font-weight: 400;
	line-height: 1.25;
	color: rgba(255, 255, 255, .82);
}

.rd-ficha__bloque {
	padding: var(--rd-space-5);
	background: var(--rd-surface);
	border-radius: var(--rd-radius-lg);
	box-shadow: var(--rd-shadow-card);
}

.rd-ficha__bio {
	margin: 0;
	font-size: var(--rd-size-lg);
	line-height: var(--rd-leading-relaxed);
	color: var(--rd-ink);
}

.rd-ficha__chapas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rd-space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.rd-ficha__chapas li {
	padding: 8px 15px;
	background: var(--rd-surface-alt);
	border-radius: var(--rd-radius-pill);
}

.rd-ficha__chapas small {
	display: block;
	font-size: 11px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--rd-ink-muted);
}

.rd-ficha__chapas span {
	font-size: var(--rd-size-sm);
	font-weight: 600;
	color: var(--rd-ink);
}

.rd-ficha__red small {
	display: block;
	margin-bottom: 7px;
	font-size: var(--rd-size-sm);
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--rd-ink-muted);
	line-height: var(--rd-leading-normal);
}

/* La respuesta manda: es lo único que se viene a leer. La pregunta va
   pequeña y apagada encima, para que se sepa de un vistazo cuál es la
   frase de Reddie y cuál lo que ha escrito la persona. */
.rd-ficha__red p {
	margin: 0;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--rd-ink);
}

/* El botón, en la misma línea que el título. La entradilla es larga y,
   con los tres en la misma fila, empujaba el botón al renglón de abajo. */
.rd-profile__topbar {
	display: block;
}

.rd-profile__titlerow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rd-space-4);
	flex-wrap: wrap;
	margin-bottom: 6px;
}

.rd-profile__titlerow .rd-profile__heading {
	margin: 0;
}

/* Dentro de la cabecera del apartado, el selector no lleva la raya de
   separación: esa raya era para cuando iba al final del campo, colgando
   del contenido de arriba. */
.rd-field__head .rd-privacy {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
	text-align: right;
}

.rd-field__head .rd-privacy__label {
	font-size: 11px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--rd-ink-muted);
}

/* El botón de amistad, debajo de la ficha. */
.rd-otro__amistad {
	max-width: 400px;
	margin: var(--rd-space-4) auto 0;
}

.rd-otro__amistad .rd-button {
	width: 100%;
}

/* El dibujo de cada red, el mismo que lleva en la tienda: si en un
   sitio se ve y en otro no, la frase parece otra cosa. */
.rd-ficha__red small,
.rd-phrase__label {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* El dibujo va en su baldosa. Suelto sobre el fondo de la tarjeta se
   pierde: son dibujos de colores claros sobre crema, y el recuadro les
   da un borde donde apoyarse. */
.rd-red__caja {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border-radius: 11px;
	background: var(--rd-surface);
	border: 1px solid var(--rd-border);
}

.rd-red__icono {
	width: 23px;
	height: 23px;
	display: block;
}

.rd-phrase__label .rd-red__caja {
	width: 34px;
	height: 34px;
	border-radius: 10px;
}

.rd-phrase__label .rd-red__icono {
	width: 21px;
	height: 21px;
}

/* Contestada: la baldosa se enciende, y de un vistazo se ve cuáles
   están hechas sin tener que leerlas. */
.rd-ficha__red .rd-red__caja,
.rd-phrase.is-filled .rd-red__caja {
	background: var(--rd-badge-bg);
	border-color: var(--rd-border-strong);
}

/* Los bloqueados llevan el dibujo apagado, como el resto de la caja. */
.rd-phrase.is-locked .rd-red__caja {
	opacity: .5;
}

.rd-phrase.is-locked .rd-red__icono {
	filter: grayscale(.6);
}

/* ==========================================================
   Ajustes: índice y secciones
   ==========================================================
   Antes eran ocho apartados apilados en una sola pantalla, y para
   cambiar el correo había que pasar por delante de «Borrar mi cuenta».
   Ahora se entra a un índice y cada cosa vive en su sitio.
   ========================================================== */

.rd-ajustes__head {
	display: flex;
	align-items: baseline;
	gap: var(--rd-space-4);
	flex-wrap: wrap;
	margin-bottom: var(--rd-space-5);
}

.rd-ajustes__atras {
	font-size: var(--rd-size-sm);
	font-weight: 600;
	color: var(--rd-primary);
	text-decoration: none;
	order: -1;
}

.rd-ajustes__grupo {
	padding: var(--rd-space-4) var(--rd-space-4) var(--rd-space-2);
	margin-bottom: var(--rd-space-4);
}

.rd-ajustes__grupo-titulo {
	margin: 0 0 var(--rd-space-2);
	padding: 0 var(--rd-space-2);
	font-size: var(--rd-size-xs);
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--rd-ink-muted);
}

.rd-ajustes__lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rd-ajustes__lista a {
	display: flex;
	align-items: center;
	gap: var(--rd-space-3);
	padding: var(--rd-space-3) var(--rd-space-2);
	border-radius: var(--rd-radius-md);
	text-decoration: none;
	color: var(--rd-ink);
}

.rd-ajustes__lista a:hover {
	background: var(--rd-surface-alt);
}

/* Una raya finita entre filas, menos en la última: separa sin cargar
   la pantalla de bordes. */
.rd-ajustes__lista li + li a {
	border-top: 1px solid var(--rd-border);
	border-radius: 0 0 var(--rd-radius-md) var(--rd-radius-md);
}

.rd-ajustes__icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	border-radius: 10px;
	background: var(--rd-surface-alt);
	border: 1px solid var(--rd-border);
}

.rd-ajustes__icono .rd-icon {
	width: 21px;
	height: 21px;
}

.rd-ajustes__texto {
	flex: 1;
	min-width: 0;
	font-size: var(--rd-size-base);
}

.rd-ajustes__flecha {
	flex-shrink: 0;
	font-size: 22px;
	line-height: 1;
	color: var(--rd-ink-muted);
}

/* ==========================================================
   Ayuda profesional
   ==========================================================
   Cerrado de serie y en último lugar: quien no quiera abrirlo, no lo
   abre. Nadie tiene que pasar por delante de una sugerencia de ir al
   psicólogo para mirar sus gráficas.
   ========================================================== */

/* --- El recuadro, con halo ---

   Este apartado no es uno más de la pantalla: es el que hay que
   encontrar el día que alguien lo necesite de verdad. El halo lo separa
   del resto sin gritar, y al respirar despacio se ve por el rabillo del
   ojo aunque no se esté mirando ahí.

   El color es el coral de la marca. No es una elección estética: es la
   única variable que cada uno de los seis temas define pensando en que
   destaque sobre su propio fondo. Un color fijo se perdería en alguno.

   El resplandor va por fuera con «box-shadow», que no se recorta contra
   el «overflow: hidden» de la propia caja. Con un borde de color se
   habría visto una raya; lo que se busca es luz, no línea. */
.rd-ayuda {
	position: relative;
	margin-top: var(--rd-space-5);
	background: var(--rd-surface);
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-lg);
	overflow: hidden;
	animation: rd-ayuda-halo 3.6s ease-in-out infinite;
}

/* Al pasar por encima se queda encendido y quieto: ya se ha encontrado,
   ya no hace falta que llame. */
.rd-ayuda:hover,
.rd-ayuda[open] {
	animation-play-state: paused;
	box-shadow:
		0 0 0 1px rgba(255, 130, 86, .55),
		0 0 26px rgba(255, 130, 86, .42);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--rd-primary) 55%, transparent),
		0 0 26px color-mix(in srgb, var(--rd-primary) 42%, transparent);
}

@keyframes rd-ayuda-halo {
	0%,
	100% {
		box-shadow:
			0 0 0 1px rgba(255, 130, 86, .28),
			0 0 10px rgba(255, 130, 86, .20);
		box-shadow:
			0 0 0 1px color-mix(in srgb, var(--rd-primary) 28%, transparent),
			0 0 10px color-mix(in srgb, var(--rd-primary) 20%, transparent);
	}

	50% {
		box-shadow:
			0 0 0 1px rgba(255, 130, 86, .62),
			0 0 24px rgba(255, 130, 86, .48);
		box-shadow:
			0 0 0 1px color-mix(in srgb, var(--rd-primary) 62%, transparent),
			0 0 24px color-mix(in srgb, var(--rd-primary) 48%, transparent);
	}
}

.rd-ayuda__cabecera {
	display: flex;
	align-items: center;
	gap: var(--rd-space-3);
	padding: var(--rd-space-4) var(--rd-space-5);
	cursor: pointer;
	list-style: none;
}

.rd-ayuda__cabecera::-webkit-details-marker {
	display: none;
}

.rd-ayuda__icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 11px;
	background: var(--rd-surface-alt);
	border: 1px solid var(--rd-border);
}

.rd-ayuda__icono .rd-icon {
	width: 23px;
	height: 23px;
}

.rd-ayuda__titulo {
	flex: 1;
	min-width: 0;
	font-family: var(--rd-font-display);
	font-weight: var(--rd-weight-display);
	font-size: var(--rd-size-base);
	color: var(--rd-ink);
}

.rd-ayuda__flecha {
	flex-shrink: 0;
	font-size: 22px;
	line-height: 1;
	color: var(--rd-ink-muted);
	/* Al mismo paso que el despliegue: si la flecha gira antes de que
	   el texto haya terminado de bajar, parece que va por su cuenta. */
	transition: transform 700ms cubic-bezier(.22, .61, .36, 1);
}

.rd-ayuda[open] .rd-ayuda__flecha {
	transform: rotate(90deg);
}

/* --- El despliegue, pausado ---

   La caja de fuera es la que se mueve: el guion le da una altura en
   píxeles y la lleva de cero a lo que ocupe el texto. La de dentro solo
   mide y lleva el relleno, porque una caja con relleno no llega nunca a
   altura cero y se quedaría una franja abierta al cerrar.

   La transición cuelga de «is-js», que pone el propio guion. Si el
   guion no llega a ejecutarse, no hay transición y el desplegable abre
   de golpe, como cualquier «details»: entero y funcionando. */
.rd-ayuda__cuerpo {
	overflow: hidden;
	border-top: 1px solid var(--rd-border);
}

.rd-ayuda.is-js .rd-ayuda__cuerpo {
	/* Arranca con decisión y frena al llegar, como una tapa de verdad.
	   A velocidad constante parece una persiana eléctrica. */
	transition: height 700ms cubic-bezier(.22, .61, .36, 1);
}

.rd-ayuda__interior {
	padding: var(--rd-space-4) var(--rd-space-5) var(--rd-space-5);
}

/* Para quien ha pedido al sistema que no le muevan las cosas. El guion
   también se aparta, así que aquí solo hay que quitar la transición. */
@media (prefers-reduced-motion: reduce) {
	.rd-ayuda.is-js .rd-ayuda__cuerpo {
		transition: none;
	}

	.rd-ayuda__flecha {
		transition: none;
	}

	/* El halo se queda encendido y fijo. Se pierde el latido, no la
	   señal: quien no puede con el movimiento sigue viendo destacado
	   el apartado. */
	.rd-ayuda {
		animation: none;
		box-shadow:
			0 0 0 1px rgba(255, 130, 86, .45),
			0 0 18px rgba(255, 130, 86, .32);
		box-shadow:
			0 0 0 1px color-mix(in srgb, var(--rd-primary) 45%, transparent),
			0 0 18px color-mix(in srgb, var(--rd-primary) 32%, transparent);
	}
}

.rd-ayuda__cuerpo p {
	margin: 0 0 var(--rd-space-4);
	line-height: var(--rd-leading-relaxed);
	color: var(--rd-ink-soft);
}

.rd-ayuda__cuerpo h3 {
	margin: 0 0 var(--rd-space-3);
	font-family: var(--rd-font-display);
	font-weight: var(--rd-weight-display);
	font-size: var(--rd-size-lg);
	color: var(--rd-ink);
}

.rd-ayuda__acciones {
	margin-bottom: var(--rd-space-4) !important;
}

/* El aviso de la colaboración, discreto pero legible: se dice porque
   hay que decirlo, no para que pase desapercibido. */
.rd-ayuda__aviso {
	margin-bottom: 0 !important;
	padding-top: var(--rd-space-3);
	border-top: 1px dashed var(--rd-border);
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-muted) !important;
}

/* El botón de Cognitive Care.
   Esquinas menos redondas que las del resto: un botón de píldora es de
   Reddie, y este lleva a otro sitio. Y con aire por encima, porque
   pegado al texto se pulsa sin haber terminado de leer. */
.rd-ayuda__acciones {
	margin-top: var(--rd-space-6) !important;
	margin-bottom: var(--rd-space-5) !important;
}

.rd-ayuda__boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px var(--rd-space-6);
	border-radius: 10px;
	background: var(--rd-primary);
	color: #fff;
	font-size: var(--rd-size-base);
	font-weight: 600;
	letter-spacing: .01em;
	text-decoration: none;
	box-shadow: 0 2px 6px rgba(58, 33, 22, .16);
	transition: transform var(--rd-transition), box-shadow var(--rd-transition), background var(--rd-transition);
}

.rd-ayuda__boton:hover {
	background: var(--rd-primary-hover);
	box-shadow: 0 5px 14px rgba(58, 33, 22, .24);
	transform: translateY(-1px);
}

/* Al pulsar se hunde un poco: da la sensación de que responde. */
.rd-ayuda__boton:active {
	transform: translateY(1px);
	box-shadow: 0 1px 3px rgba(58, 33, 22, .2);
}

@media (max-width: 599px) {
	.rd-ayuda__boton {
		width: 100%;
	}
}

/* --- Lo que Reddie puede leer --- */

.rd-lectura {
	display: flex;
	flex-direction: column;
	gap: var(--rd-space-3);
	margin-top: var(--rd-space-4);
}

.rd-lectura__op {
	display: flex;
	align-items: flex-start;
	gap: var(--rd-space-3);
	padding: var(--rd-space-4);
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-md);
	cursor: pointer;
}

.rd-lectura__op:hover {
	border-color: var(--rd-border-strong);
}

.rd-lectura__op input {
	margin-top: 3px;
	flex-shrink: 0;
}

.rd-lectura__op strong {
	display: block;
	color: var(--rd-ink);
}

.rd-lectura__op small {
	display: block;
	margin-top: 3px;
	font-size: var(--rd-size-sm);
	color: var(--rd-ink-muted);
	line-height: var(--rd-leading-normal);
}

/* La advertencia de qué se pierde. Va destacada porque es la
   consecuencia de la decisión, no una nota al pie. */
.rd-lectura__nota {
	margin: 0;
	padding: var(--rd-space-4);
	background: var(--rd-surface-alt);
	border-left: 3px solid var(--rd-border-strong);
	border-radius: var(--rd-radius-md);
	font-size: var(--rd-size-sm);
	color: var(--rd-ink-soft);
	line-height: var(--rd-leading-normal);
}

/* ==========================================================
   La ficha en móvil
   ==========================================================
   Las reds salían con la respuesta a 22 píxeles, que es un tamaño
   pensado para verlas en una columna estrecha dentro de una pantalla
   ancha. En un móvil esa misma columna ocupa todo, y una frase de
   diez palabras se comía cuatro renglones: cada red pedía media
   pantalla y había que desplazarse para leer tres respuestas.

   Aquí la respuesta baja al tamaño de la biografía y la caja se
   estrecha. Solo en móvil: en ordenador el tamaño grande funciona,
   porque ahí la columna no llega a los 400 píxeles.
   ========================================================== */

@media (max-width: 899px) {
	.rd-ficha__bloque {
		padding: var(--rd-space-4);
		border-radius: var(--rd-radius-md);
	}

	.rd-ficha__red p {
		font-size: var(--rd-size-lg);
		line-height: var(--rd-leading-normal);
	}

	.rd-ficha__red small {
		margin-bottom: 5px;
		font-size: var(--rd-size-xs);
	}

	/* El dibujo de la red, a juego con el texto: al encoger la frase,
	   la baldosa de 34 píxeles se quedaba desproporcionada. */
	.rd-ficha__red .rd-red__caja {
		width: 28px;
		height: 28px;
		border-radius: 8px;
	}

	.rd-ficha__red .rd-red__icono {
		width: 18px;
		height: 18px;
	}

	/* Aire a los lados. Las cajas llegaban al borde de la pantalla y
	   el texto quedaba pegado al cristal. */
	.rd-ficha {
		gap: var(--rd-space-2);
		padding-left: var(--rd-space-3);
		padding-right: var(--rd-space-3);
	}
}


/* ==========================================================
   Editar el perfil: un solo bloque
   ==========================================================
   Eran seis tarjetas sueltas, una por apartado, flotando una debajo de
   otra. Con seis cajas la pantalla parece seis ajustes distintos en vez
   de un perfil, y ninguna de las seis se atrevía a ocupar el ancho de
   la web: todas quedaban en una columna estrecha con la mitad derecha
   vacía.

   Ahora es una sola tarjeta con los márgenes del resto de la web, y
   dentro cada parte separada por una raya fina.
   ========================================================== */

.rd-profile--editando {
	max-width: var(--rd-container);
}

/* El relleno se lo quedan las partes, no la tarjeta: así las rayas que
   las separan llegan de lado a lado y no se quedan cortas. */
/* Se escribe «.rd-card.rd-editar» y no «.rd-editar» a secas, y hace
   falta: «movil.css» le pone relleno a todas las tarjetas y se carga el
   ÚLTIMO a propósito, así que con un solo nombre de clase ganaba él y en
   el teléfono esta tarjeta volvía a tener doce píxeles de margen por
   dentro. Se veía: las rayas que separan las partes y la franja de «Mis
   reds» se quedaban cortas por los dos lados, como un panel mal
   encajado. Con dos nombres, esta regla pesa más y la tarjeta va a ras
   en todas las pantallas, que es lo que quiere el «overflow» de aquí
   abajo. */
.rd-card.rd-editar {
	padding: 0;
	/* Y con las esquinas redondeadas, la primera y la última parte se
	   recortan a la forma de la tarjeta en vez de asomar por debajo. */
	overflow: hidden;
}

.rd-editar__parte {
	padding: var(--rd-space-5);
	border-top: 1px solid var(--rd-border);
}

/* La primera no lleva raya: no separa nada, solo dibujaría un renglón
   pegado al borde de arriba. Se busca así, y no con el hermano
   anterior, porque tres de las partes van dentro de su formulario y
   entre hermanos no se ven. */
.rd-editar > .rd-editar__parte:first-child {
	border-top: 0;
}

/* «Mis reds», apartada del resto.

   Alba, 01-09-2026: «haz que la parte de "mis reds" esté diferenciada
   del resto de info del perfil, ponla más separada».

   Y tiene sentido: las partes de arriba son los DATOS de la cuenta —la
   foto, el nombre, la edad, la biografía, el contacto—, todas del mismo
   tipo y separadas entre sí por un hilo. Las reds no son un dato: son
   frases que se escriben para que las lea otra gente. Puestas en la
   misma lista y con la misma raya, parecían el sexto campo del
   formulario.

   Se separan con las dos cosas que el ojo usa para agrupar, la
   distancia y el fondo: un buen hueco por arriba —tres veces el de las
   otras— y su propio suelo, un tono más cálido que el de la tarjeta. Va
   de lado a lado porque la tarjeta recorta a sus bordes
   («overflow: hidden» en «.rd-editar»), así que se lee como una franja
   aparte y no como un recuadro flotando dentro de otro. */
.rd-editar__parte--reds {
	margin-top: var(--rd-space-6);
	padding-top: var(--rd-space-6);
	padding-bottom: var(--rd-space-6);
	background: var(--rd-surface-alt);
}

.rd-editar__titulo {
	margin-bottom: var(--rd-space-4);
}

/* Quién puede verlo, debajo del título del apartado. Sin la raya de
   separación: esa raya era de cuando el selector iba al final del
   campo, colgando del contenido de arriba. */
.rd-editar__titulo .rd-privacy {
	margin-top: var(--rd-space-2);
	padding-top: 0;
	border-top: 0;
}

/* Cada campo de dentro de una parte —el correo, el teléfono, las
   redes— con su aire. */
.rd-editar__campo + .rd-editar__campo {
	margin-top: var(--rd-space-5);
}

.rd-editar__redes {
	display: grid;
	gap: var(--rd-space-4);
}

.rd-editar .rd-profile__actions {
	margin: var(--rd-space-5) 0 0;
}

/* El botón de cambiar el nombre era tan grande como el de guardar todo
   el perfil, y no hace lo mismo: cambia una palabra. Al tamaño de la
   pista que tiene al lado.

   Y la fila deja de estirar sus hijos, que era lo que devolvía al botón
   la altura del campo de texto por mucho que se le bajara el relleno. */
.rd-button--mini {
	width: auto;
	flex-shrink: 0;
	padding: var(--rd-space-2) var(--rd-space-4);
	font-size: var(--rd-size-sm);
}

.rd-inline-form--nombre {
	align-items: center;
}

/* Un nombre son veinte caracteres como mucho: un campo de 600 píxeles
   para escribirlos promete un sitio que no existe. */
.rd-inline-form--nombre .rd-input {
	max-width: 320px;
}

@media (min-width: 900px) {
	/*
	 * En pantalla ancha, dos columnas por parte: a la izquierda de qué
	 * va y quién lo ve, a la derecha lo que se rellena.
	 *
	 * Es lo que hace que el bloque ancho sirva de algo. Con una sola
	 * columna, ensanchar la tarjeta solo consigue campos de texto de
	 * medio metro, que se leen peor, no mejor.
	 */
	.rd-editar__parte {
		display: grid;
		grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
		gap: var(--rd-space-6);
		align-items: start;
		padding: var(--rd-space-6);
	}

	.rd-editar__titulo {
		margin-bottom: 0;
	}

	/* Los tres botones de privacidad, uno debajo de otro: en la columna
	   estrecha del título no caben en fila, y partidos a la mitad se
	   leen peor que apilados. */
	.rd-editar__titulo .rd-privacy__options {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Los campos tampoco crecen sin fin. Un renglón demasiado largo
	   cansa de leer, y esto es un formulario, no un cartel. */
	.rd-editar__campos {
		max-width: 620px;
	}

	/* Instagram y TikTok caben de dos en dos; la otra red lleva una
	   dirección entera y se queda con la fila. */
	.rd-editar__redes {
		grid-template-columns: 1fr 1fr;
	}

	.rd-editar__redes > div:last-child {
		grid-column: 1 / -1;
	}
}


/* ==========================================================
   AQUÍ ESTABAN LOS ESTILOS DE LOS LOGROS DEL PERFIL
   ==========================================================
   Se han ido con ellos el 29-08-2026: los logros solo se ven en
   Progreso. Ver el porqué en «reddie/profile.php», donde estaba el
   bloque.

   Lo que se va son solo los envoltorios de esta pantalla —la cabecera
   «Tus logros», el ancho de la tarjeta y el pie con el enlace—. Las
   filas en sí, «.rd-logro» y compañía, NO se tocan: son de la pantalla
   de Logros y viven en progress.css, que es de donde las cogía esta.
   ========================================================== */