/**
 * La comunidad.
 */

/*
 * La comunidad entera se queda con el ancho de la aplicación.
 *
 * Estaba a 700 píxeles, que es la medida buena para una columna de
 * mensajes y solo para eso: la racha necesita camino a lo ancho y los
 * amigos necesitan dos columnas. Los 700 se los queda ahora el muro
 * —abajo, en «.rd-com__panel--muro»— y las otras dos partes respiran.
 */
.rd-com {
	display: flex;
	flex-direction: column;
	gap: var(--rd-space-4);
	max-width: var(--rd-container);
	margin: 0 auto;
	width: 100%;

	/*
	 * Lo que mide la cabecera de pestañas.
	 *
	 * Vive aquí como variable porque la usan dos cosas que se pegan
	 * arriba: la propia cabecera, que se la impone como altura mínima,
	 * y el filtro del muro, que se coloca justo debajo. Escrito a mano
	 * en los dos sitios, el día que cambie el relleno de las pestañas
	 * el filtro se solaparía con ellas.
	 */
	--rd-pestanas-alto: 58px;

	/*
	 * Y lo que mide el filtro del muro, que se pega justo debajo.
	 *
	 * Está aquí por lo mismo: lo necesita quien no lo dibuja. Los
	 * mensajes lo usan para apartarse al saltar a uno desde un aviso.
	 * Sin esa cuenta, el enlace de un aviso deja el mensaje noventa
	 * píxeles por encima del borde de la pantalla, tapado por las dos
	 * barras, y lo que se lee es el mensaje de abajo.
	 *
	 * Es una fila de pastillas que nunca baja de renglón, así que la
	 * altura no cambia: el relleno de la barra más el alto de una
	 * pastilla.
	 */
	--rd-filtro-alto: 66px;
}

/* El aviso de lo que acaba de pasar no se estira con la pantalla: es
   una frase, y una frase de 1180 píxeles no se lee. */
.rd-com > .rd-message {
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

/* ==========================================================
   La cabecera de las tres partes
   ==========================================================
   Los tres nombres sueltos, cada uno en el centro de su tercio de
   pantalla, justo debajo de la barra de la aplicación y pegados ahí al
   bajar: es lo que permite saltar de los mensajes a la racha sin volver
   al principio del muro.

   Antes iban los tres apretados dentro de un recuadro con borde en
   mitad de la pantalla. Ya no hay recuadro: los nombres van sueltos
   sobre el fondo del tema y repartidos a lo ancho.
   ========================================================== */

/* --- La fila con las tres partes ---

   NI SE PEGA ARRIBA NI DIFUMINA NADA, y las dos cosas van juntas.

   Se pegaba arriba al bajar, y para que el contenido que pasaba por
   detrás no se leyera encima de los nombres, difuminaba lo que tenía
   detrás. Ese difuminado es lo que Alba veía como «el rectángulo que
   engloba los 3 títulos»: sobre un tema con dibujo —la cuadrícula de
   Orden, los rombos de Rumbo— una franja borrosa de lado a lado se ve
   exactamente como un rectángulo, aunque no tenga ni borde ni fondo.

   No hay forma de tener las dos cosas: una barra que se queda quieta
   mientras el muro pasa por detrás TIENE que tapar lo que pasa, y
   taparlo es dibujar un rectángulo. Así que la barra deja de pegarse y
   sube con la página. Quien quiera cambiar de parte sube, que es lo
   mismo que se hace en cualquier sitio.

   Lo que sí sigue pegado es el filtro del muro, que es donde de verdad
   duele tener que subir: en un muro largo, cambiar de categoría cada
   dos por tres. Ese lleva su propio difuminado y no rodea nada.

   Tampoco se sale ya de la columna con «100vw». Se salía para poder
   repartir los nombres en tercios de PANTALLA; ahora Alba los quiere
   más juntos, así que se reparten solos por su tamaño y la barra no
   necesita medir la ventana. De paso desaparece el apaño que hacía
   falta por las barras de desplazamiento de Windows. */
.rd-com__pestanas {
	display: flex;
	justify-content: center;
	min-height: var(--rd-pestanas-alto);
	align-items: center;
}

/*
 * Aquí había un seguro contra el desbordamiento lateral.
 *
 * Hacía falta mientras la cabecera se salía de la columna con «100vw»
 * para repartir los nombres en tercios de pantalla: donde la barra de
 * desplazamiento ocupa sitio de verdad —Windows, o un Mac con las
 * barras siempre a la vista—, «100vw» mide quince píxeles más que la
 * página y la cabecera asomaba siete y medio por cada lado, con lo que
 * la pantalla entera se podía arrastrar de lado.
 *
 * Ya no se sale de la columna, así que no hay nada que asome y el
 * seguro sobra. Se quita en vez de dejarlo por si acaso: un «overflow»
 * puesto donde no hace falta recorta sombras y aros de foco sin que
 * nadie sepa por qué.
 */

/*
 * Los tres nombres, sueltos y centrados.
 *
 * Esto era el recuadro que Alba quería quitar: borde, fondo crema y
 * cuatro píxeles de relleno alrededor de las tres pastillas. No queda
 * nada de eso; cada nombre va por su cuenta.
 *
 * Estuvieron repartidos en tercios de pantalla y se pidió juntarlos:
 * en un monitor los tercios los mandaban a las esquinas. Ahora es una
 * fila centrada con un hueco fijo entre ellos.
 *
 * Y ya no hay «overflow-x: auto»: no queda nada que se desborde,
 * porque los nombres parten de renglón en vez de estirar la fila.
 *
 * EL DIV SE QUEDA AUNQUE YA NO PINTE NADA. Es él quien lleva el papel
 * de «tablist» y quien busca comunidad.js para gobernar las pestañas:
 * si se quita, ese guion se para en su tercera línea y se van con él
 * las pestañas, las flechas del teclado y la ficha de los amigos.
 */
.rd-com__pestanas-caja {
	/*
	 * Los tres, juntos pero sin tocarse.
	 *
	 * Estuvieron repartidos en tercios de pantalla, y en un monitor eso
	 * los mandaba a las esquinas: a 1440 quedaban 480 píxeles entre uno
	 * y otro y los tres dejaban de leerse como un grupo. Ahora cada uno
	 * ocupa lo que mide su nombre y entre ellos va un hueco fijo.
	 *
	 * El hueco crece con la pantalla pero con tope: en un móvil son 24
	 * píxeles —lo justo para que no se toquen— y de 700 en adelante se
	 * queda en 72, que es donde se ven separados sin desperdigarse.
	 */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(var(--rd-space-4), 6vw, 72px);

	/*
	 * Cada uno con el alto de lo suyo, no con el del más alto.
	 *
	 * Estirarlos para igualarlos parece lo pulcro y sale al revés: en
	 * un móvil, «Racha y ranking» parte en dos renglones y «Muro» no,
	 * así que la pastilla encendida de «Muro» se estiraba a dos
	 * renglones de alto midiendo cuatro letras de ancho, y con el radio
	 * de pastilla eso deja de ser una pastilla y se convierte en un
	 * círculo marrón. Sin estirar, es una pastilla en los seis anchos.
	 */
	align-items: center;
}

.rd-com__pestana {
	/*
	 * Del ancho de su nombre y no más.
	 *
	 * En una fila, sin esto el enlace se estira para llenar el hueco
	 * que le toque y la pastilla de la encendida deja de ser una
	 * pastilla: pasa a ser un rectángulo largo. Con «flex: 0 0 auto»
	 * cada uno pide lo que mide y el hueco lo pone el «gap».
	 */
	flex: 0 0 auto;
	max-width: 100%;

	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px var(--rd-space-4);
	border-radius: var(--rd-radius-pill);

	/*
	 * La tinta entera, no la apagada.
	 *
	 * Fuera del recuadro el nombre se lee sobre el fondo de la tienda,
	 * y ahí «--rd-ink-soft» no llegaba: medido fondo a fondo daba 3,97
	 * en Foco, 3,97 en Orden, 3,95 en Descanso, 4,03 en Rumbo y 3,95 en
	 * Creatividad, los cinco por debajo del 4,5 que pide un texto
	 * normal. En Calma daba 8,40, pero no se cambia solo la mitad: el
	 * mismo nombre no puede leerse peor según el fondo que se tenga
	 * puesto.
	 *
	 * Con «--rd-ink» son 13,57 en el peor de los claros y 14,12 en
	 * Calma. Y la encendida se sigue distinguiendo por su pastilla de
	 * color, que es como se distinguía ya.
	 */
	color: var(--rd-ink);
	font-size: var(--rd-size-sm);
	font-weight: 600;
	line-height: var(--rd-leading-snug);
	text-align: center;

	/*
	 * Y puede partir en dos renglones. Hace falta: en un móvil de 320
	 * un tercio mide 98 píxeles y «Racha y ranking» de una sola línea
	 * pide 148. Antes llevaba «nowrap» y la fila se iba a lo ancho con
	 * su propia barra de desplazamiento; ahora parte y cabe.
	 *
	 * El renglón va corto —«snug», ahí arriba— para que dos líneas más
	 * el relleno sigan cabiendo en los 58 píxeles de
	 * «--rd-pestanas-alto». Si la cabecera creciera de esa cuenta, el
	 * filtro del muro —que se pega justo debajo, a esa misma altura— se
	 * le montaría encima.
	 */
	white-space: normal;

	text-decoration: none;
	cursor: pointer;
}

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

.rd-com__pestana.is-on {
	background: var(--rd-primary);
	color: #fff;
}

/* El aro del teclado, dicho a mano. Entre pestañas se anda con las
   flechas y solo una es tabulable: si no se ve dónde está el foco, no
   hay forma de saber qué parte se va a abrir al pulsar. */
.rd-com__pestana:focus-visible {
	outline: 2px solid var(--rd-primary);
	outline-offset: 2px;
}

/* ==========================================================
   Sin el guion, la pastilla encendida la dice el ancla
   ==========================================================
   El servidor no sabe qué parte se está viendo: el ancla de la
   dirección no viaja en la petición. Antes se marcaba «Muro» a mano
   desde PHP, así que entrar por un enlace a #racha enseñaba la racha
   con la pastilla del muro encendida.

   Ahora la plantilla no marca ninguna y esto lo resuelve mirando a qué
   parte apunta el ancla, que es lo mismo que ya decide cuál se ve unas
   líneas más abajo. En cuanto llega el guion y pone «data-rd-listo»,
   estas reglas se apartan y manda la clase.

   Van en su propio bloque y NO metidas en la lista de «.is-on»: un
   navegador que no entienda «:has()» tira la regla entera donde
   aparezca, y ahí se llevaría por delante también el camino bueno, el
   del guion.
   ========================================================== */

.rd-com:has(.rd-com__paneles:not([data-rd-listo])):not(:has(.rd-com__panel:target)) .rd-com__pestana--muro,
.rd-com:has(.rd-com__paneles:not([data-rd-listo])):has(.rd-com__panel--muro:target) .rd-com__pestana--muro,
.rd-com:has(.rd-com__paneles:not([data-rd-listo])):has(.rd-com__panel--racha:target) .rd-com__pestana--racha,
.rd-com:has(.rd-com__paneles:not([data-rd-listo])):has(.rd-com__panel--amigos:target) .rd-com__pestana--amigos {
	background: var(--rd-primary);
	color: #fff;
}

/* ==========================================================
   Las tres partes
   ==========================================================
   Solo se ve una, la elegida. Y hay dos formas de decidir cuál, porque
   hay dos mundos:

   - Sin JavaScript manda el ancla de la dirección, la de toda la vida.
     De serie se ve el muro; si el ancla señala a otra parte, se ve esa.
     Así los enlaces de la cabecera funcionan igual que cualquier enlace
     aunque no se ejecute un solo guion.

   - Con JavaScript manda la clase que pone el guion, y el ancla pasa a
     ser solo la memoria de dónde estabas. El guion avisa de que ya está
     con «data-rd-listo», y a partir de ahí estas reglas se apartan.

   No se usa el atributo «hidden» para esconderlas: con él, sin
   JavaScript no habría forma de sacarlas, y quien navegue sin guiones
   se quedaría con el muro y nada más.
   ========================================================== */

/*
 * Cada parte, por dentro, es una columna con aire entre sus piezas.
 *
 * Ese hueco lo ponía «.rd-com» cuando todo colgaba directamente de
 * ella. Al meter el contenido dentro de los paneles dejó de llegarle, y
 * los mensajes del muro se quedaron pegados unos a otros. Por eso lo
 * que se enseña se enseña con «flex» y no con «block».
 */
.rd-com__panel {
	flex-direction: column;
	gap: var(--rd-space-4);
	min-width: 0;
}

.rd-com__paneles:not([data-rd-listo]) .rd-com__panel {
	display: none;
}

.rd-com__paneles:not([data-rd-listo]) .rd-com__panel--muro {
	display: flex;
}

/* Si el ancla señala a OTRA parte, el muro se aparta. Se nombran las
   otras dos una a una en vez de preguntar por «cualquier panel
   señalado», y por dos motivos.

   El primero: los avisos traen anclas a un mensaje concreto
   —«#mensaje-34»— y esas están dentro del muro, así que el muro tiene
   que quedarse. Eso ya se tenía en cuenta.

   El segundo se escapó y dejaba la pantalla en blanco: con «#muro» en
   la dirección, el propio muro es el panel señalado, así que esta regla
   lo escondía. Y como pesa más que la de abajo, la de abajo no llegaba
   a devolverlo: pulsar «Muro» sin guiones no enseñaba nada. */
.rd-com__paneles:not([data-rd-listo]):has(.rd-com__panel--racha:target) .rd-com__panel--muro,
.rd-com__paneles:not([data-rd-listo]):has(.rd-com__panel--amigos:target) .rd-com__panel--muro {
	display: none;
}

.rd-com__paneles:not([data-rd-listo]) .rd-com__panel:target {
	display: flex;
}

.rd-com__paneles[data-rd-listo] .rd-com__panel {
	display: none;
}

.rd-com__paneles[data-rd-listo] .rd-com__panel.is-activa {
	display: flex;
}

/* El panel no dibuja nada propio: es una caja que agrupa. Lo que sí
   hace es recuperar la columna que tenía la comunidad entera antes,
   pero solo para el muro. */
.rd-com__panel--muro {
	max-width: 700px;
	margin: 0 auto;
	width: 100%;
}

/* ==========================================================
   La racha y el ranking, en una sola columna
   ==========================================================
   Las dos tarjetas se copian de la pantalla de Rachas y se ven bien
   por su cuenta, pero aquí van una encima de otra y no se leían como
   una columna: el ranking entraba veinticuatro píxeles por cada lado.

   HUBO DOS TOPES DISTINTOS METIÉNDOSE AQUÍ, y conviene dejarlos
   escritos porque no se ven leyendo ninguno de los dos archivos por
   separado.

   EL PRIMERO ERA UN CHOQUE DE NOMBRES, y ya está arreglado en su
   sitio. «.rd-rank» eran dos cosas distintas en esta web: la tarjeta
   del ranking, que vive en «progress.css», y las listas con barra de
   Evolución —ánimos y emociones—, que viven en «evolution.css».
   Aquella le ponía «max-width: 1100px» y «margin: 0 auto» a todo lo
   que se llamara «.rd-rank», y como se carga después que
   «progress.css» se lo quedaba también la tarjeta: 1100 píxeles
   centrados dentro de un contenedor de 1148. Hoy ese selector lleva
   «ul» delante —las listas siempre son un «ul» y la tarjeta nunca lo
   es—, así que ya no alcanza a esta tarjeta ni aquí ni en Rachas. Se
   deja contado porque el nombre lo siguen compartiendo las dos
   familias, y quien vuelva a escribir un «.rd-rank» a secas volverá a
   repartir estilos entre cosas que no tienen nada que ver.

   EL SEGUNDO TOPE SIGUE VIVO, y es el que justifica la regla de abajo.
   Las dos tarjetas llevan «.rd-card», y «landing.css» le pone
   «max-width: 480px centrado» entre 720 y 1019 píxeles: ahí la tarjeta
   es el formulario de entrar, y un formulario de 800 píxeles de ancho
   no se rellena cómodo. En la comunidad eso dejaba la racha en 480
   dentro de una columna de 818, con el ranking a lo ancho al lado.
   Justo lo contrario que en el ordenador, y en la misma pantalla.

   Así que aquí se les quita el tope a las dos. No se toca «.rd-card» a
   secas —el formulario de entrar sí quiere el suyo—: solo lo que está
   dentro de esta parte de la comunidad, que es una columna y necesita
   el ancho entero.

   Con el ancho ya igualado quedaba el relleno, que también hay que
   igualar: con la racha a «space-4» y el ranking a «space-5», los
   bordes coincidían pero los títulos no. «Ranking de uso» empezaba
   ocho píxeles más adentro que «Racha de uso», y eso solo basta para
   que se lean como dos columnas distintas.
   ========================================================== */
.rd-com__panel--racha .rd-streak,
.rd-com__panel--racha .rd-rank {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	width: 100%;
}

/* Y el hueco de debajo lo pone el panel con su «gap», igual que se lo
   pone a la racha. El «margin-bottom» que trae el ranking de la
   pantalla de Rachas dejaba aquí un escalón que la racha no tiene. */
.rd-com__panel--racha .rd-rankings {
	margin-bottom: 0;
}

/*
 * EL RELLENO DE LAS DOS TARJETAS, ESCRITO UNA SOLA VEZ.
 *
 * Podría ponerse un número a cada una y cuadrarlo a ojo, y así estaba
 * al principio. No aguanta: el relleno de estas tarjetas lo tocan tres
 * archivos a distintos anchos —«progress.css» aprieta la racha por
 * debajo de 900 y «movil.css» vuelve a soltar TODAS las tarjetas por
 * debajo de 768—, así que un número fijo aquí cuadraba en el ordenador
 * y se descuadraba cuatro píxeles en el móvil.
 *
 * Con una variable no puede pasar: las dos leen la misma, así que digan
 * lo que digan los otros archivos, las dos valen lo mismo siempre. Los
 * valores son los que ya tenía la racha en cada tramo, para que nada
 * cambie de aspecto salvo lo que se venía a arreglar.
 */
.rd-com__panel--racha {
	--rd-com-tarjeta: var(--rd-space-4);
}

.rd-com__panel--racha .rd-streak,
.rd-com__panel--racha .rd-rank {
	padding: var(--rd-com-tarjeta);
}

@media (max-width: 899px) {
	.rd-com__panel--racha {
		--rd-com-tarjeta: var(--rd-space-3);
	}
}

/* Por debajo de 767 se vuelve a «space-4». No es un capricho: ahí
   «--rd-space-3» ya vale la mitad y «movil.css» deja todas las tarjetas
   de la web en «space-4». Seguirle es lo que evita que esta pantalla
   sea la única con las tarjetas más apretadas que las demás. */
@media (max-width: 767px) {
	.rd-com__panel--racha {
		--rd-com-tarjeta: var(--rd-space-4);
	}
}

/* Al entrar con el tabulador, el panel se marca: es un bloque enfocable
   y sin aviso el foco parece haberse perdido. */
.rd-com__panel:focus-visible {
	outline: 2px solid var(--rd-primary);
	outline-offset: 4px;
	border-radius: var(--rd-radius-md);
}

.rd-com__head {
	text-align: center;
	margin-bottom: var(--rd-space-2);
}

.rd-com__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-xl);
	color: var(--rd-ink);
}

.rd-com__heading {
	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-com__hint {
	margin: 0;
	font-size: var(--rd-size-sm);
	color: var(--rd-ink-soft);
	line-height: var(--rd-leading-normal);
}

.rd-com__back a {
	font-size: var(--rd-size-sm);
	color: var(--rd-primary);
	text-decoration: none;
}

.rd-com__back a:hover {
	text-decoration: underline;
}

/* --- Los temas --- */

.rd-com__topics {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--rd-space-3);
}

.rd-com__topic {
	display: flex;
	align-items: center;
	gap: var(--rd-space-3);
	padding: var(--rd-space-4);
	background: var(--rd-surface);
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-md);
	text-decoration: none;
	height: 100%;
	transition: border-color var(--rd-transition);
}

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

.rd-com__topic-icon .rd-icon {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
}

.rd-com__topic-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.rd-com__topic-text strong {
	color: var(--rd-ink);
	font-size: var(--rd-size-base);
}

.rd-com__topic-text span {
	color: var(--rd-ink-soft);
	font-size: var(--rd-size-xs);
	line-height: 1.35;
}

/* --- Los mensajes --- */

.rd-com__msg {
	position: relative;
	/* Contorno del tema. Sobre un fondo con patrón, una tarjeta sin
	   borde se difumina contra el dibujo de detrás y cuesta ver dónde
	   empieza y acaba cada mensaje. */
	border: 2px solid var(--rd-border-strong);

	/*
	 * El sitio que hay que dejar arriba al saltar a un mensaje.
	 *
	 * Los avisos enlazan a «#mensaje-34», y reaccionar a uno recarga y
	 * vuelve a su ancla. Encima del muro hay dos barras pegadas —la
	 * cabecera de las tres partes y el filtro—, y el navegador no las
	 * tiene en cuenta: dejaba el mensaje justo debajo del borde de
	 * arriba, o sea, tapado. Se llegaba de un aviso y lo primero que se
	 * leía era el mensaje siguiente.
	 *
	 * Los dos altos más un hueco, para que no quede pegado a la barra.
	 */
	scroll-margin-top: calc(var(--rd-pestanas-alto) + var(--rd-filtro-alto) + var(--rd-space-3));
}

/* Leyendo un mensaje suelto no hay filtro, así que su altura sobra. Va
   después y no antes a propósito: si el navegador no entiende «:has()»
   se queda con la cuenta de arriba, que aparta de más pero nunca de
   menos. Apartar de menos es volver a tapar el mensaje. */
.rd-com__panel--muro:not(:has(.rd-com__filtro)) .rd-com__msg {
	scroll-margin-top: calc(var(--rd-pestanas-alto) + var(--rd-space-3));
}

.rd-com__msg.is-main {
	border: 1px solid var(--rd-primary);
}

/* La chapa del tema, arriba del todo. */
.rd-com__tag {
	display: inline-block;
	margin-bottom: var(--rd-space-3);
	padding: 4px var(--rd-space-3);
	background: var(--rd-badge-bg);
	color: var(--rd-primary);
	border-radius: var(--rd-radius-pill);
	font-size: var(--rd-size-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

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

.rd-com__avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.rd-com__who {
	font-weight: 600;
	font-size: var(--rd-size-sm);
	color: var(--rd-ink);
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

/* Quien firma sin nombre se ve distinto, para que nadie confunda
   «Alguien de Reddie» con un nombre de usuario de verdad. */
.rd-com__who.is-anon {
	font-style: italic;
	font-weight: 500;
	color: var(--rd-ink-muted);
}

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

.rd-com__when::before {
	content: "·";
	margin-right: var(--rd-space-2);
}

.rd-com__subject {
	margin: 0 0 var(--rd-space-2);
	font-family: var(--rd-font-display);
	font-weight: var(--rd-weight-display);
	font-size: var(--rd-size-lg);
	line-height: 1.25;
	color: var(--rd-ink);
	overflow-wrap: anywhere;
}

.rd-com__subject a {
	color: inherit;
	text-decoration: none;
}

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

.rd-com__body {
	line-height: var(--rd-leading-normal);
	color: var(--rd-ink-soft);
	font-size: var(--rd-size-sm);
	overflow-wrap: anywhere;
}

.rd-com__body p {
	margin: 0 0 var(--rd-space-3);
}

.rd-com__body p:last-child {
	margin-bottom: 0;
}

/* --- La barra de acciones --- */

.rd-com__actions {
	display: flex;
	align-items: center;
	gap: var(--rd-space-2);
	margin-top: var(--rd-space-4);
	padding-top: var(--rd-space-3);
	border-top: 1px solid var(--rd-border);
	flex-wrap: wrap;
}

.rd-com__pill-form {
	display: inline;
}

.rd-com__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px var(--rd-space-3);
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-pill);
	background: none;
	color: var(--rd-ink-soft);
	font-family: inherit;
	font-size: var(--rd-size-xs);
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: border-color var(--rd-transition), color var(--rd-transition);
}

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

/* Lo que ya has marcado se queda encendido: sin esto no sabrías si tu
   voto llegó a contarse. */
.rd-com__pill.is-on {
	border-color: var(--rd-primary);
	background: var(--rd-badge-bg);
	color: var(--rd-primary);
}

.rd-com__pill svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

.rd-com__views {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-left: auto;
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-muted);
	font-variant-numeric: tabular-nums;
}

.rd-com__views svg {
	width: 15px;
	height: 15px;
}

/* --- Escribir --- */

.rd-com__form {
	max-width: 100%;
}

.rd-com__title-input {
	width: 100%;
	margin-bottom: var(--rd-space-3);
}

.rd-com__text {
	width: 100%;
	resize: vertical;
	min-height: 110px;
	font-family: var(--rd-font-body);
	margin-bottom: var(--rd-space-3);
}

.rd-com__anon {
	margin-bottom: var(--rd-space-2);
}

.rd-com__legal {
	margin: 0 0 var(--rd-space-4);
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-muted);
	line-height: var(--rd-leading-normal);
}

.rd-com__new {
	text-align: center;
	color: var(--rd-ink-soft);
	font-size: var(--rd-size-sm);
}

.rd-com__new p {
	margin: 0;
}

.rd-com__saved-link {
	margin: 0 0 var(--rd-space-2);
	text-align: center;
	font-size: var(--rd-size-sm);
}

.rd-com__saved-link a {
	color: var(--rd-primary);
	text-decoration: none;
	font-weight: 600;
}

.rd-com__saved-link a:hover {
	text-decoration: underline;
}

/* ==========================================================
   El muro
   ==========================================================
   Todos los mensajes en una sola columna, los más nuevos arriba. El
   tema deja de ser una puerta y pasa a ser un filtro.
   ========================================================== */

/* El filtro se queda pegado arriba al bajar: en un muro largo, tener
   que subir del todo para cambiar de categoría es lo que hace que
   nadie la cambie. */
.rd-com__filtro {
	position: sticky;
	/* Arriba del todo. Estaba a la altura de la cabecera de las tres
	   partes porque aquella también se pegaba; ahora sube con la página,
	   así que dejar aquí ese hueco abriría una franja por la que se
	   vería pasar el muro. */
	top: 0;
	z-index: 5;
	display: flex;
	gap: var(--rd-space-2);
	overflow-x: auto;
	padding: var(--rd-space-3) 0;
	margin-bottom: var(--rd-space-3);
	scrollbar-width: none;

	/* Se deja ver el fondo del tema y solo se difumina lo que pasa por
	   detrás al desplazar. Con un color de fondo, la barra se veía
	   como un rectángulo pegado encima del patrón. */
	background: transparent;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

/* Donde no haya difuminado, un velo del color del tema: menos bonito,
   pero el texto se sigue leyendo cuando algo pasa por detrás. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.rd-com__filtro {
		background: var(--rd-surface);
	}
}

.rd-com__filtro::-webkit-scrollbar {
	display: none;
}

.rd-com__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	padding: 8px var(--rd-space-4);
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-pill);
	background: var(--rd-surface);
	color: var(--rd-ink-soft);
	font-size: var(--rd-size-sm);
	font-weight: 600;
	text-decoration: none;
}

.rd-com__chip .rd-icon {
	width: 20px;
	height: 20px;
}

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

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

/* El icono de la categoría, en la cabecera de cada mensaje. */
.rd-com__cat-icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--rd-surface-alt);
}

.rd-com__cat-icono .rd-icon {
	width: 20px;
	height: 20px;
}

/* --- El botón de escribir --- */

.rd-com__nuevo {
	position: fixed;
	right: var(--rd-space-5);
	/* Por encima de la barra de abajo del móvil, que en pantallas
	   estrechas ocupa la franja inferior. */
	bottom: calc(var(--rd-space-5) + 68px);
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: var(--rd-primary);
	color: #fff;
	box-shadow: 0 6px 18px rgba(58, 33, 22, .3);
	text-decoration: none;
}

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

.rd-com__nuevo svg {
	width: 30px;
	height: 30px;
}

@media (min-width: 900px) {
	.rd-com__nuevo {
		bottom: var(--rd-space-5);
	}
}

/* --- La categoría dentro del recuadro de escribir --- */

.rd-com__cabecera {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--rd-space-4);
	margin-bottom: var(--rd-space-4);
	padding-bottom: var(--rd-space-4);
	border-bottom: 1px solid var(--rd-border);
}

.rd-com__cat {
	display: flex;
	align-items: center;
	gap: var(--rd-space-3);
	order: -1;
	min-width: 0;
}

.rd-com__cat .rd-icon {
	width: 38px;
	height: 38px;
	flex-shrink: 0;
}

.rd-com__cat strong {
	display: block;
	font-family: var(--rd-font-display);
	font-weight: var(--rd-weight-display);
	font-size: var(--rd-size-lg);
	color: var(--rd-ink);
}

.rd-com__cat small {
	display: block;
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-muted);
	line-height: 1.4;
}

.rd-com__atras {
	flex-shrink: 0;
	font-size: var(--rd-size-sm);
	font-weight: 600;
	color: var(--rd-primary);
	text-decoration: none;
}

/* La categoría, al extremo opuesto de quién escribe: así no compite con
   el nombre, que es lo primero que se mira. */
.rd-com__cat-icono {
	margin-left: auto;
}

.rd-com__who a {
	color: inherit;
	text-decoration: none;
}

.rd-com__who a:hover {
	color: var(--rd-primary);
	text-decoration: underline;
}

/* --- El perfil de otra persona --- */

.rd-otro {
	display: flex;
	align-items: center;
	gap: var(--rd-space-4);
}

.rd-otro__foto {
	width: 96px;
	height: 96px;
	flex-shrink: 0;
	border-radius: 50%;
	object-fit: cover;
}

.rd-otro__quien {
	min-width: 0;
}

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

.rd-otro__frases {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--rd-space-4);
}

.rd-otro__frases strong {
	display: block;
	font-size: var(--rd-size-sm);
	color: var(--rd-ink-muted);
	margin-bottom: 3px;
}

.rd-otro__frases span {
	display: block;
	color: var(--rd-ink);
	line-height: var(--rd-leading-normal);
}

@media (max-width: 599px) {
	.rd-otro {
		flex-direction: column;
		text-align: center;
	}
}

/* La categoría lleva su nombre al lado: un icono suelto obliga a
   acordarse de qué significa cada dibujo, y son cinco. */
.rd-com__cat-icono {
	width: auto;
	gap: 6px;
	padding: 5px 12px 5px 8px;
	border-radius: var(--rd-radius-pill);
	font-size: var(--rd-size-xs);
	font-weight: 600;
	color: var(--rd-ink-muted);
	white-space: nowrap;
}

@media (max-width: 599px) {
	/* En pantalla estrecha el nombre se come la fila: se queda el
	   dibujo, que ahí sí cabe. */
	.rd-com__cat-icono > span {
		display: none;
	}

	.rd-com__cat-icono {
		padding: 5px;
	}
}

/* Los dibujos de la comunidad no llevan clase, así que se les da tamaño
   por el sitio donde estén. Sin esto, el marcador de «Guardados» salía
   sin tamaño y no se veía. */
.rd-com__chip > svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

/* Eliminar lo propio. Discreto: no compite con reaccionar ni comentar,
   que es lo que se hace a diario. */
.rd-com__borrar {
	margin-left: auto;
}

.rd-com__borrar > summary {
	cursor: pointer;
	list-style: none;
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-muted);
}

.rd-com__borrar > summary::-webkit-details-marker {
	display: none;
}

.rd-com__borrar > summary:hover {
	color: #C0392B;
	text-decoration: underline;
}

.rd-com__borrar .rd-confirm__box {
	position: absolute;
	right: 0;
	z-index: 3;
	width: min(280px, 78vw);
	background: var(--rd-surface);
	box-shadow: var(--rd-shadow-card);
	text-align: left;
}

.rd-com__borrar[open] {
	position: relative;
}

/* ==========================================================
   Tus amigos
   ==========================================================
   La lista a la izquierda y la ficha de quien esté elegido a la
   derecha. La lista ocupa menos: son caras y nombres, que se recorren
   de un vistazo, y la ficha es lo que hay que leer.

   Antes esto era una tira de caras con desplazamiento horizontal
   encima del filtro del muro. Ahí no cabía un nombre entero —se
   cortaba con puntos suspensivos— y para ver a alguien había que
   salirse de la comunidad. Ahora tiene pantalla propia.
   ========================================================== */

.rd-amigos {
	display: grid;
	gap: var(--rd-space-5);
	/* Arriba y no centrado: la lista es corta y la ficha larga, y con
	   «center» la lista quedaría flotando a media altura. */
	align-items: start;
}

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

.rd-amigos__vacio {
	max-width: 560px;
	margin: 0 auto;
	text-align: center;
}

/* Tres columnas, las filas que hagan falta. Fijas y no automáticas: con
   «auto-fill» el número cambia según lo ancha que sea la ventana, y una
   lista que se recoloca sola al ajustar la pantalla se vuelve a leer
   entera cada vez. */
.rd-amigos__rejilla {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--rd-space-3);
}

/* Cada amigo es un enlace a su perfil —sin el guion es lo único que
   hace falta que sea—, así que hay que quitarle el subrayado y devolver
   el color y la letra del resto de la lista. */
.rd-amigos__uno {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	padding: var(--rd-space-3) 6px;
	border: 1px solid transparent;
	border-radius: var(--rd-radius-md);
	background: none;
	color: var(--rd-ink-soft);
	font-family: inherit;
	font-size: var(--rd-size-xs);
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.rd-amigos__uno:hover {
	border-color: var(--rd-border);
	background: var(--rd-surface);
}

/* El elegido, marcado con el color del tema: es la única forma de saber
   de quién es la ficha de al lado cuando hay quince caras. */
.rd-amigos__uno.is-on {
	border-color: var(--rd-primary);
	background: var(--rd-surface);
	color: var(--rd-ink);
	font-weight: 600;
}

.rd-amigos__foto {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--rd-surface);
	box-shadow: 0 2px 8px rgba(58, 33, 22, .16);
}

.rd-amigos__uno.is-on .rd-amigos__foto {
	border-color: var(--rd-primary);
}

/* Lo mismo que arriba: la rejilla también se recorre con las flechas. */
.rd-amigos__uno:focus-visible {
	outline: 2px solid var(--rd-primary);
	outline-offset: 2px;
}

/* El nombre entero, aunque ocupe dos renglones.

   Antes se recortaba con puntos suspensivos y en una tira estrecha eso
   dejaba a media comunidad llamándose «Maria…». El nombre es lo que
   distingue a una persona de otra: si hay que partirlo, se parte. */
.rd-amigos__nombre {
	overflow-wrap: anywhere;
	max-width: 100%;
}

/* La ficha, algo más ancha que en la pantalla del perfil —allí son 400
   píxeles— porque aquí sobra sitio, pero con techo igualmente.

   Sin techo, la foto es cuadrada y crece con la columna: en un monitor
   ancho salía una cara de 700 píxeles de alto que dejaba la bio fuera
   de la pantalla. Y como la foto y las tarjetas de debajo miden lo
   mismo, la ficha se lee como una sola pieza y no como una foto con
   cosas sueltas al lado. */
.rd-amigos__vista .rd-ficha {
	max-width: 560px;
}

/* La caja de la ficha empieza vacía: la ficha se trae al pulsar una
   cara. Esta línea es lo que se ve hasta entonces, y también lo que ve
   quien navega sin guiones, que llega a cada persona por su enlace. Va
   centrada en el hueco de la ficha para que no parezca un texto suelto
   colgando de la esquina. */
.rd-amigos__elige {
	max-width: 560px;
	margin: 0 auto;
	padding: var(--rd-space-5) 0;
	text-align: center;
}

.rd-amigos__ir {
	margin: 0;
	text-align: center;
	font-size: var(--rd-size-sm);
}

.rd-amigos__ir a {
	color: var(--rd-primary);
	font-weight: 600;
	text-decoration: none;
}

.rd-amigos__ir a:hover,
.rd-amigos__ir a:focus-visible {
	text-decoration: underline;
}

/* --- Ordenador: lista a la izquierda, ficha a la derecha --- */

@media (min-width: 900px) {
	/* Cinco doceavos y siete: la lista cabe holgada con sus tres
	   columnas y la ficha se queda con la parte grande, que es lo que
	   pidió Alba y lo que pide el contenido. */
	.rd-amigos {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}

	/*
	 * La lista se queda a la vista mientras se lee la ficha.
	 *
	 * Una ficha con bio y frases es larga, y sin esto había que subir
	 * hasta arriba para cambiar de persona. Se pega justo debajo de la
	 * cabecera de pestañas, que también está pegada.
	 *
	 * Con techo y desplazamiento propio: si alguien tiene sesenta
	 * amigos, la lista no puede ser más alta que la ventana o deja de
	 * poder pegarse.
	 */
	.rd-amigos__lado {
		position: sticky;
		top: calc(var(--rd-pestanas-alto) + var(--rd-space-4));
		max-height: calc(100vh - var(--rd-pestanas-alto) - var(--rd-space-6));
		overflow-y: auto;
	}
}

/* --- Móvil: la lista arriba, de cabecera, y la ficha debajo --- */

@media (max-width: 899px) {
	.rd-amigos {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--rd-space-4);
	}

	/* La lista sigue en tres columnas, pero con techo: si ocupara todo
	   lo que quisiera, con veinte amigos la ficha empezaría cinco
	   pantallas más abajo y nadie llegaría a verla. */
	.rd-amigos__lado {
		max-height: 44vh;
		overflow-y: auto;
		padding-bottom: var(--rd-space-2);
		border-bottom: 1px solid var(--rd-border);
	}

	.rd-amigos__foto {
		width: 58px;
		height: 58px;
	}
}

/* --- La campana --- */

.rd-campana {
	position: relative;
}

/* El contador: círculo rojo con el número en blanco, pegado al dibujo
   y no a la caja entera, que en móvil es mucho más ancha. */
.rd-campana__cuenta {
	position: absolute;
	top: 2px;
	left: 50%;
	margin-left: 3px;
	min-width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
	border-radius: 99px;
	background: #D6392B;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

@media (min-width: 900px) {
	.rd-campana__cuenta {
		left: 22px;
		margin-left: 0;
	}
}

/* --- La pantalla de avisos --- */

.rd-aviso {
	display: flex;
	align-items: center;
	gap: var(--rd-space-4);
	flex-wrap: wrap;
	margin-bottom: var(--rd-space-3);
	text-decoration: none;
}

.rd-aviso__foto {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.rd-aviso__texto {
	flex: 1;
	min-width: 0;
}

.rd-aviso__texto strong,
.rd-aviso span strong {
	display: block;
	color: var(--rd-ink);
}

.rd-aviso__texto a {
	color: inherit;
	text-decoration: none;
}

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

.rd-aviso__texto small,
.rd-aviso span small {
	display: block;
	font-size: var(--rd-size-sm);
	color: var(--rd-ink-muted);
}

.rd-aviso__botones {
	display: flex;
	gap: var(--rd-space-3);
}

/* El botón «Ir a ver», a la derecha de su fila y no debajo.

   La fila es flexible y admite salto de línea, y el botón se iba solo
   al renglón de abajo ocupando todo el ancho de la tarjeta: en el
   ordenador quedaba una barra enorme para dos palabras. Le pasaba
   porque «.rd-button» es de bloque, así que pedía el ancho entero.

   Con «flex: 0 0 auto» pide lo que mide y el «margin-left: auto» lo
   empuja al borde derecho, que es donde está el de «Aceptar» de las
   solicitudes: las dos clases de fila acaban leyéndose igual.

   En pantalla estrecha sigue bajando al renglón de abajo —no cabe— y
   ahí sí ocupa el ancho, que es lo que hace que se pueda pulsar con el
   pulgar sin apuntar. */
.rd-aviso > .rd-button {
	flex: 0 0 auto;
	width: auto;
	margin-left: auto;
}

/* Los dos botones de una solicitud de amistad, en columna: el de
   aceptar arriba y «Ahora no» debajo, más discreto. No pesan lo mismo,
   así que no se ponen uno al lado del otro como si eligieras entre dos
   opciones iguales. */
.rd-aviso__acciones {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--rd-space-2);
	margin-left: auto;
	flex: 0 0 auto;
}

.rd-aviso__acciones form {
	margin: 0;
}

/* La foto de quien te escribe, dentro de su pastilla: la pastilla ya
   redondea, pero sin esto la foto sale cuadrada encima. */
.rd-aviso__avatar {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

/* Sin notificaciones no hay tarjeta, solo una línea centrada: un
   recuadro vacío pesa más que la frase que lleva dentro. */
.rd-avisos__vacio {
	text-align: center;
	margin-top: var(--rd-space-5);
}

.rd-aviso--oraculo .rd-icon {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
}

.rd-avisos {
	max-width: 620px;
}

/* El botón de desbloquear, en la lista de personas bloqueadas. */
.rd-com__mini-btn {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-size: var(--rd-size-sm);
	font-weight: 600;
	color: var(--rd-primary);
	text-decoration: underline;
}

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

/* El botón de limpiar los avisos, al final de la lista.

   Estaba encima y arrimado a la derecha, colgando del título «Lo que
   ha pasado». Sin ese título se quedaba solo en lo alto de la tarjeta,
   así que baja al final, que es donde se lee después de haber visto lo
   que hay, y se pone en el medio: ya no tiene título con el que
   alinearse por la derecha.

   El ancho es el mismo que el de la lista para que el centro sea el
   mismo centro: la lista se para en 720 y se centra sola, y sin este
   tope el enlace se centraría respecto de la tarjeta entera y quedaría
   un pelo desviado en cuanto la tarjeta fuera más ancha que 720. */
.rd-avisos__limpiar {
	max-width: 720px;
	margin: var(--rd-space-4) auto 0;
	text-align: center;
}

/* Y la tinta entera, no la apagada, en los dos enlaces de esta
   pantalla: el «Ahora no» de una solicitud y este «Limpiar todas».

   «.rd-linkbutton» viene de serie en «--rd-ink-soft», y sobre la
   tarjeta eso se queda entre 4,02 y 4,19 según el fondo: por debajo
   del 4,5 que pide un texto normal, y encima es de los pequeños
   —«--rd-size-xs»—. Con «--rd-ink» son de 13,81 a 14,39 en los cinco
   fondos claros y 10,79 en Calma, y sigue leyéndose como enlace
   porque lo que lo dice es el subrayado, no el color.

   Se cambian los dos juntos y no solo el de limpiar: son el mismo
   tipo de enlace en la misma pantalla, y dejar uno más claro que el
   otro se lee como si uno pesara menos.

   El color de serie vive en «profile.css», que no es de esta pantalla:
   esto solo lo arregla en Notificaciones. En el resto de la web sigue
   igual y hay que arreglarlo allí. */
.rd-avisos .rd-linkbutton {
	color: var(--rd-ink);
}

/* Y al pasar por encima, el tono de encima y no el de la marca.

   De serie el «:hover» lo pinta con «--rd-primary», y ahí se pierde lo
   ganado: sobre la tarjeta da 4,34 en Foco y 4,41 en Calma, otra vez
   por debajo del 4,5. «--rd-primary-hover» es el mismo color un punto
   más hondo y sí llega en los seis fondos: 5,76 en Foco, 6,40 en
   Orden, 8,44 en Descanso, 4,85 en Rumbo —el más justo—, 6,77 en
   Creatividad y 5,21 en Calma.

   No vale ningún color escrito a mano aquí: los dos salen calculados
   del fondo que cada persona tenga puesto, así que en Orden son azules
   y en Rumbo verdes. Por eso se cambia de variable y no de color.

   El nombre de la pantalla va delante para pesar más que el «:hover»
   de serie, que si no gana según en qué orden se junten las hojas. */
.rd-avisos .rd-linkbutton:hover {
	color: var(--rd-primary-hover);
}

/* --- El historial de logros por años --- */

.rd-progress__anio {
	margin-left: 8px;
	font-family: var(--rd-font-base);
	font-weight: 500;
	font-size: var(--rd-size-sm);
	color: var(--rd-ink-muted);
}

.rd-anio {
	border-bottom: 1px solid var(--rd-border);
}

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

.rd-anio__cab {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--rd-space-4);
	padding: var(--rd-space-4) 0;
	cursor: pointer;
	list-style: none;
}

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

.rd-anio__n {
	font-family: var(--rd-font-display);
	font-weight: var(--rd-weight-display);
	font-size: var(--rd-size-lg);
	color: var(--rd-ink);
}

.rd-anio__estrellas {
	font-size: var(--rd-size-sm);
	color: var(--rd-ink-muted);
}

.rd-anio__lista {
	list-style: none;
	margin: 0 0 var(--rd-space-4);
	padding: 0;
}

.rd-anio__lista li {
	display: flex;
	align-items: baseline;
	gap: var(--rd-space-3);
	padding: 7px var(--rd-space-3);
	border-radius: var(--rd-radius-md);
}

.rd-anio__lista li:nth-child(odd) {
	background: var(--rd-surface-alt);
}

.rd-anio__lista span {
	flex: 1;
	min-width: 0;
	color: var(--rd-ink-soft);
}

.rd-anio__lista b {
	color: var(--rd-ink);
	font-variant-numeric: tabular-nums;
}

.rd-anio__lista small {
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-muted);
	white-space: nowrap;
}

/* --- La lista de notificaciones ---

   Va en una lista de verdad y no en un montón de secciones sueltas:
   son elementos del mismo conjunto, ordenados, y quien navegue con
   lector de pantalla oye cuántos hay antes de empezar a recorrerlos.

   La más nueva arriba. El orden lo pone la consulta. */
.rd-avisos__lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* El dibujo del tipo de aviso, en su pastilla. Sustituye a la foto de
   perfil que llevan las solicitudes de amistad, y ocupa lo mismo para
   que todas las filas se alineen igual. */
.rd-aviso__marca {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--rd-badge-bg);
	color: var(--rd-primary);
}

.rd-aviso__marca .rd-icon {
	width: 26px;
	height: 26px;
}

.rd-aviso__cuando {
	display: block;
	margin-top: 3px;
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-muted);
}

/* «Ir a ver», a la izquierda del texto y compacto.

   Estaba al final de la fila y era un botón ancho: ocupaba casi tanto
   como el titular y lo empujaba a partirse en dos renglones. Pegado al
   dibujo y en dos líneas cortas ocupa la mitad, y el titular recupera
   el ancho de la fila.

   Va en el mismo bloque que el icono, así que las filas siguen
   alineadas entre sí aunque unas tengan botón y otras no. */
.rd-aviso__ir {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	min-height: 44px;
	padding: 6px 8px;
	border: 1px solid var(--rd-border-strong);
	border-radius: var(--rd-radius-sm);
	background: transparent;
	font-size: var(--rd-size-xs);
	line-height: 1.15;
	color: var(--rd-ink-soft);
	text-align: center;
	text-decoration: none;
}

.rd-aviso__ir:hover,
.rd-aviso__ir:focus-visible {
	border-color: var(--rd-primary);
	color: var(--rd-primary);
}

@media (max-width: 599px) {
	/* En móvil el dibujo encoge para dejarle sitio al botón: entre los
	   dos se comían el ancho del titular. */
	.rd-aviso__marca {
		width: 40px;
		height: 40px;
	}

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

	.rd-aviso__ir {
		width: 54px;
		min-height: 40px;
	}

	.rd-aviso {
		gap: var(--rd-space-3);
	}
}

/* --- El aviso de publicación sin nombre ---

   Destacado sobre el recuadro de escribir. No es una nota al pie: es
   la información que cambia lo que la gente se atreve a contar. */
.rd-com__anon {
	margin: 0 0 var(--rd-space-4);
	padding: var(--rd-space-3) var(--rd-space-4);
	background: var(--rd-badge-bg);
	border-radius: var(--rd-radius-md);
	font-size: var(--rd-size-sm);
	line-height: var(--rd-leading-normal);
	color: var(--rd-ink-soft);
}

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

/* --- La presentación fija de una categoría ---

   Encima del muro y siempre visible. No es un mensaje: es lo que
   explica para qué sirve el sitio, así que no puede hundirse según
   escribe la gente. Se distingue del resto con la franja lateral, no
   con un fondo llamativo: tiene que estar, no gritar. */
.rd-com__intro {
	margin-bottom: var(--rd-space-4);
	border-left: 3px solid var(--rd-primary);
}

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

/* La lista de avisos, más estrecha.

   Una fila de tres elementos —dibujo, texto y botón— no gana nada por
   estirarse hasta el ancho de la pantalla: el titular cabe de sobra y
   lo que sobra es hueco vacío entre el texto y el botón. */
/* --- La lista de avisos, en filas ---

   Estaba a 480 píxeles de ancho, y ahí el titular se parte en tres
   renglones: cada aviso ocupaba el alto de un párrafo para decir una
   línea. Estrecho no es lo mismo que compacto.

   A 720 —el mismo ancho que usan los rankings y las listas de
   Evolución— el titular cabe de una vez y cada aviso es una fila.
   Caben el doble en la misma pantalla. */
.rd-avisos__lista,
.rd-avisos .rd-aviso {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 900px) {
	/* Menos relleno y menos hueco: el dibujo, el texto y el botón caben
	   de sobra en una línea, así que el aire vertical no hace falta. */
	.rd-avisos .rd-aviso {
		padding: var(--rd-space-3) var(--rd-space-4);
		margin-bottom: var(--rd-space-2);
	}

	/*
	 * Tres líneas exactas: titular, explicación y cuándo.
	 *
	 * Cada una en la suya y ninguna se parte, por larga que sea. Lo que
	 * no cabe se recorta con puntos suspensivos.
	 *
	 * Que no se parta es lo que hace que todas las filas midan lo
	 * mismo, y eso es lo que convierte una lista en algo que se recorre
	 * de un vistazo: cuando cada fila mide distinto, hay que leerlas
	 * todas para saber dónde acaba una y empieza la siguiente.
	 *
	 * El recorte necesita que la columna del texto pueda encogerse a
	 * cero. Sin eso, un titular largo empuja al botón fuera de la
	 * tarjeta en lugar de recortarse.
	 */
	.rd-avisos .rd-aviso__texto {
		min-width: 0;
	}

	.rd-avisos .rd-aviso__texto strong,
	.rd-avisos .rd-aviso__texto small,
	.rd-avisos .rd-aviso__cuando {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.rd-avisos .rd-aviso__texto strong {
		margin-bottom: 1px;
	}

	.rd-avisos .rd-aviso__marca {
		width: 40px;
		height: 40px;
	}

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

/* El «volver a la comunidad» del perfil ajeno, con aire.

   Quedaba pegado al botón de la solicitud de amistad, y dos cosas
   pulsables a un pelo una de otra se acaban tocando por error en un
   móvil. */
.rd-com__volver {
	margin-top: var(--rd-space-6);
}

/* --- El recuadro de responder, dentro del mensaje ---

   Separado por una línea del pie de acciones, para que se lea como
   algo que sale del mensaje y no como un mensaje nuevo pegado. */
.rd-com__responder {
	margin-top: var(--rd-space-4);
	padding-top: var(--rd-space-4);
	border-top: 1px solid var(--rd-border);
}

/* Dentro del mensaje, el formulario no lleva tarjeta propia: ya está
   dentro de una. */
.rd-com__responder .rd-com__form {
	margin: 0;
}

.rd-com__responder textarea {
	min-height: 92px;
}

/* --- El hilo desplegado dentro del mensaje --- */
.rd-com__hilo {
	margin-top: var(--rd-space-4);
	padding-top: var(--rd-space-4);
	border-top: 1px solid var(--rd-border);
}

/* Las respuestas, escalonadas a la derecha y con una línea que las
   cuelga del mensaje del que salen. Sin ese hilo visual, una respuesta
   larga se lee como un mensaje suelto más del muro. */
.rd-com__respuestas {
	margin-bottom: var(--rd-space-4);
	padding-left: var(--rd-space-4);
	border-left: 2px solid var(--rd-border);
}

/* Dentro del hilo, las respuestas no llevan tarjeta propia.

   Ya están dentro de una, y una tarjeta dentro de otra se lee como un
   error. Se quita todo lo que hace tarjeta: el relleno, el fondo, la
   sombra, las esquinas y —esto se me pasó la primera vez— el borde de
   dos píxeles, que es el rectángulo que se veía alrededor.

   Lo único que marca que es una respuesta es la línea de la izquierda
   del bloque que las agrupa, que sí se queda. */
.rd-com__respuestas .rd-com__msg,
.rd-com__respuestas .rd-com__msg.is-main {
	margin-bottom: var(--rd-space-4);
	padding: 0;
	background: transparent;
	box-shadow: none;
	border: 0;
	border-radius: 0;
}

.rd-com__respuestas .rd-com__msg:last-child {
	margin-bottom: 0;
}

.rd-com__responder .rd-com__form {
	margin: 0;
}

.rd-com__responder textarea {
	min-height: 92px;
}

/* Publicar y cerrar, en línea. */
.rd-com__enviar {
	display: flex;
	align-items: center;
	gap: var(--rd-space-2);
	flex-wrap: wrap;
}

/* El botón de escribir otro comentario, cuando la caja está plegada.

   La regla de «hidden» va primero y aparte porque «display» la pisa:
   el navegador esconde lo que lleva «hidden» poniéndole display:none,
   y cualquier display que se escriba después gana. Por eso el botón se
   veía siempre, incluso sin haber escrito nada. */
.rd-com__otra[hidden] {
	display: none;
}

.rd-com__otra {
	display: inline-block;
	padding: 8px var(--rd-space-4);
	border: 1px dashed var(--rd-border-strong);
	border-radius: var(--rd-radius-pill);
	background: transparent;
	font-size: var(--rd-size-sm);
	color: var(--rd-ink-soft);
	cursor: pointer;
}

.rd-com__otra:hover,
.rd-com__otra:focus-visible {
	border-color: var(--rd-primary);
	color: var(--rd-primary);
}

/* El comentario recién publicado, resaltado un momento. Es la forma de
   decir «este es el tuyo» sin escribirlo. */
.rd-com__msg.is-nuevo {
	animation: rd-com-nuevo 2.4s ease-out;
}

@keyframes rd-com-nuevo {
	0%,
	40% {
		background: var(--rd-badge-bg);
		border-radius: var(--rd-radius-md);
	}

	100% {
		background: transparent;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rd-com__msg.is-nuevo {
		animation: none;
	}
}

/* El nivel de quien escribe, del tamaño del avatar.

   El distintivo escala con la letra, así que basta darle el tamaño de
   fuente que corresponda: la caja y el número van juntos. */
/* El tamaño y la separación los pone app.css, que se carga después:
   aquí solo queda dicho que el distintivo no empuja a nada. */
.rd-com__nivel {
	vertical-align: middle;
}

/* Y la fecha se queda a su izquierda, no al final: el nivel es lo que
   cierra la fila. */
.rd-com__meta .rd-com__when {
	margin-left: 0;
}

@media (max-width: 767px) {
	.rd-com__nivel {
		font-size: 28px;
	}
}