/**
 * Estilos de logros, rachas y ranking.
 */

.rd-progress {
	max-width: var(--rd-container);
	display: grid;
	gap: var(--rd-space-5);
}

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

/* ==========================================================
   Resumen
   ========================================================== */

/* ==========================================================
   Rachas
   ========================================================== */

/* Las dos rachas van una debajo de otra: cada una necesita el ancho
   entero para su camino. */
.rd-streaks {
	display: flex;
	flex-direction: column;
	gap: var(--rd-space-4);
	min-width: 0;
}

.rd-streaks > * {
	min-width: 0;
}

.rd-streak {
	padding: var(--rd-space-4);
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-md);
	background: var(--rd-surface);
}

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

.rd-streak__text {
	flex: 1;
	min-width: 160px;
}

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

.rd-streak__chip {
	display: inline-block;
	font-size: var(--rd-size-xs);
	font-weight: 600;
	color: var(--rd-primary);
	background: var(--rd-badge-bg);
	border-radius: var(--rd-radius-pill);
	padding: 6px var(--rd-space-3);
	white-space: nowrap;
}

.rd-streak__chip--soft {
	color: var(--rd-ink-soft);
	background: var(--rd-surface-alt);
}

/* El número va encima de la llama, como en un contador. */
.rd-streak__flame {
	position: relative;
	/* La caja mide más que el icono: ese hueco de abajo a la derecha
	   es donde vive la chapa del número, sin pisar el dibujo. */
	width: 72px;
	height: 72px;
	margin-right: 8px;
	flex-shrink: 0;
	color: var(--rd-border-strong);
}

.rd-streak.is-alive .rd-streak__flame {
	color: var(--rd-flame);
}

.rd-streak__flame svg.rd-streak__icono {
	position: absolute;
	top: 0;
	left: 0;
	width: 54px;
	height: 54px;
}

.rd-streak__number {
	position: absolute;
	right: 0;
	bottom: 0;
	min-width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 8px;
	border-radius: var(--rd-radius-pill);
	/* Rosa algodón de azúcar. No lo lleva nada más en esta pantalla,
	   así que el número se distingue solo del coral de los botones y
	   del dorado de las monedas del camino. */
	background: linear-gradient(160deg, #FFC2DA 0%, #F79FC2 55%, #EE85AE 100%);
	border: 3px solid var(--rd-surface);
	box-shadow: 0 2px 6px rgba(58, 33, 22, .22);
	font-family: var(--rd-font-display);
	font-weight: var(--rd-weight-display);
	font-size: 19px;
	line-height: 1;
	margin: 0;
	color: #5A2338;
	font-variant-numeric: tabular-nums;
}

.rd-streak.is-alive .rd-streak__number {
	color: var(--rd-ink);
}

.rd-streak__label {
	font-size: var(--rd-size-base);
	font-weight: 600;
	color: var(--rd-ink);
	margin: 0 0 2px;
}

.rd-streak__hint {
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-muted);
	margin: 0;
	line-height: 1.3;
}

/* ==========================================================
   El camino de patitas
   ==========================================================
   Una casilla por día. Las andadas en marrón, las que faltan en
   claro. Al romperse la racha vuelven todas a claro solas, porque
   el color sale del número de días, no de nada guardado aparte.
   ========================================================== */

/*
 * El camino es su propio recuadro, con desplazamiento horizontal
 * propio. La página se mueve en vertical y esta caja en horizontal:
 * «overscroll-behavior-x: contain» evita que al llegar al final del
 * camino el gesto se le pase a la página y salte a otro sitio.
 */
.rd-path {
	min-width: 0;
	max-width: 100%;
	margin-top: var(--rd-space-4);
	padding: var(--rd-space-4) var(--rd-space-4) var(--rd-space-3);
	/* Los bordes se desvanecen en vez de cortar a cuchillo. Un corte
	   recto delata que hay una caja con final; así se lee como que el
	   camino sigue más allá de la pantalla. */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 44px, #000 calc(100% - 64px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 44px, #000 calc(100% - 64px), transparent 100%);
	background: var(--rd-surface-alt);
	border-radius: var(--rd-radius-md);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	/*
	 * Aquí NO se pone «scrollbar-color». Al ponerlo, Chrome deja de
	 * hacer caso al grosor de abajo y deja una barra flotante finísima
	 * que además se esconde sola. Firefox se queda con la suya de
	 * ancho normal, que ya se ve.
	 */
	/* La del navegador se esconde: se dibuja una propia debajo, porque
	   en macOS y en el móvil las del sistema no se ven. */
	scrollbar-width: none;
}

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

/* ---- La barra de desplazamiento propia ---- */

.rd-path__track {
	display: flex;
	gap: 2px;
	padding: 6px 0 var(--rd-space-3);
	min-width: min-content;
}

.rd-path__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
	width: 62px;
}

.rd-path__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
}

/*
 * Las huellas ya vienen mirando a la derecha, que es hacia donde se
 * avanza. Aquí solo se alternan arriba y abajo con un ligero giro,
 * como las que deja un animal al andar: izquierda, derecha, izquierda.
 *
 * El desplazamiento se aplica solo a la huella, no a la casilla, para
 * que los números de los días sigan cuadrados en su línea.
 */
.rd-path__step:nth-child(odd) .rd-path__paw {
	transform: translateY(11px) rotate(-14deg);
}

.rd-path__step:nth-child(even) .rd-path__paw {
	transform: translateY(-11px) rotate(14deg);
}

/* Las monedas no se desplazan: no son una pisada, son la recompensa,
   y se quedan centradas en el camino para que canten. */

.rd-path__paw {
	width: 44px;
	height: 44px;
}

/* Los dos estados, escritos los dos: así se lee de un vistazo cuál es
   cuál y ninguno depende de un valor por defecto escondido. */
.rd-path__step.is-todo .rd-path__paw {
	color: var(--rd-border);
}

.rd-path__step.is-done .rd-path__paw {
	color: var(--rd-ink);
}

/* Las monedas por conseguir se ven apagadas, pero se ven: saber que
   viene uno es la mitad de la gracia. */
.rd-path__coin {
	width: 52px;
	height: 52px;
	opacity: 0.5;
	filter: grayscale(0.55);
}

/* Las casillas con moneda van algo más anchas: la moneda ocupa más que
   una huella y si no, el camino se ve apretado justo donde importa. */
.rd-path__step.is-prize {
	width: 48px;
}

.rd-path__step.is-done .rd-path__coin {
	opacity: 1;
	filter: none;
}

.rd-path__day {
	/* Más grandes: con el camino agrandado, el número de antes se
	   perdía debajo de la huella. */
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	color: var(--rd-ink-soft);
	font-variant-numeric: tabular-nums;
	min-height: 15px;
}

.rd-streak__best {
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-soft);
	margin: 0;
	padding-top: var(--rd-space-3);
	border-top: 1px dashed var(--rd-border);
}

/* ==========================================================
   Ranking
   ========================================================== */

.rd-ranking__note {
	background: var(--rd-surface-alt);
	border-radius: var(--rd-radius-md);
	padding: var(--rd-space-4);
	margin-bottom: var(--rd-space-4);
}

.rd-ranking__note p {
	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-ranking__note p:first-child {
	color: var(--rd-ink);
}

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

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

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

.rd-ranking__tabs {
	display: flex;
	gap: var(--rd-space-2);
	margin-bottom: var(--rd-space-4);
}

.rd-ranking__tabs a {
	padding: var(--rd-space-2) var(--rd-space-4);
	border-radius: var(--rd-radius-pill);
	border: 1px solid var(--rd-border);
	font-size: var(--rd-size-sm);
	color: var(--rd-ink-soft);
	text-decoration: none;
	transition: all var(--rd-transition);
}

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

.rd-ranking__tabs a.is-active {
	background: var(--rd-primary);
	border-color: var(--rd-primary);
	color: #fff;
}

/* --- Podio de los tres primeros --- */

.rd-podium {
	list-style: none;
	margin: var(--rd-space-4) 0;
	padding: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: var(--rd-space-3);
}

.rd-podium__spot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--rd-space-1);
	flex: 1;
	max-width: 150px;
	min-width: 0;
	padding: var(--rd-space-2) var(--rd-space-1) 0;
	border-radius: var(--rd-radius-md);
}

/* En pantalla van 2 · 1 · 3, pero en el código van por orden de
   puesto: quien lea la página con un lector de pantalla los oye
   en el orden correcto. */
.rd-podium__spot--1 { order: 2; }
.rd-podium__spot--2 { order: 1; }
.rd-podium__spot--3 { order: 3; }

.rd-podium__spot.is-me {
	background: var(--rd-badge-bg);
}

.rd-podium__avatar {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--rd-surface-alt);
	border: 3px solid var(--rd-border);
}

.rd-podium__spot--1 .rd-podium__avatar {
	width: 68px;
	height: 68px;
	border-color: var(--rd-gold);
}

.rd-podium__spot--2 .rd-podium__avatar { border-color: var(--rd-silver); }
.rd-podium__spot--3 .rd-podium__avatar { border-color: var(--rd-bronze); }

.rd-podium__name {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	font-size: var(--rd-size-xs);
	color: var(--rd-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rd-podium__score {
	font-size: var(--rd-size-sm);
	font-weight: 600;
	color: var(--rd-primary);
}

.rd-podium__step {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: var(--rd-space-2);
	border-radius: var(--rd-radius-sm) var(--rd-radius-sm) 0 0;
	font-family: var(--rd-font-display);
	font-weight: var(--rd-weight-display);
	font-size: var(--rd-size-lg);
	color: var(--rd-surface);
}

.rd-podium__spot--1 .rd-podium__step {
	height: 74px;
	background: var(--rd-gold);
}

.rd-podium__spot--2 .rd-podium__step {
	height: 56px;
	background: var(--rd-silver);
}

.rd-podium__spot--3 .rd-podium__step {
	height: 42px;
	background: var(--rd-bronze);
}

.rd-ranking__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 6px;
	counter-reset: puesto;
}

.rd-ranking__row {
	display: flex;
	align-items: center;
	gap: var(--rd-space-3);
	padding: var(--rd-space-2) var(--rd-space-3);
	border-radius: var(--rd-radius-md);
	border: 1px solid transparent;
}

.rd-ranking__row.is-me {
	background: var(--rd-badge-bg);
	border-color: var(--rd-primary);
}

.rd-ranking__pos {
	width: 26px;
	text-align: center;
	font-size: var(--rd-size-sm);
	font-weight: 600;
	color: var(--rd-ink-muted);
	flex-shrink: 0;
}

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

.rd-ranking__name {
	display: inline-flex;
	align-items: center;
	flex: 1;
	min-width: 0;
	font-size: var(--rd-size-sm);
	color: var(--rd-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

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

/* ==========================================================
   Logros
   ========================================================== */

.rd-badges {
	display: grid;
	/* Más anchas que antes: con las estrellas grandes y el texto que se
	   despliega, en 112 píxeles se partía cada palabra. */
	grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
	gap: var(--rd-space-3);
	align-items: start;
}

.rd-badge {
	text-align: center;
	padding: var(--rd-space-4) var(--rd-space-3);
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-md);
	background: var(--rd-surface);
	opacity: 0.55;
	transition: opacity var(--rd-transition), border-color var(--rd-transition);
}

.rd-badge.is-started {
	opacity: 1;
}

.rd-badge.is-done {
	border-color: var(--rd-primary);
	background: var(--rd-badge-bg);
}

.rd-badge__icon {
	width: 46px;
	height: 46px;
	margin: 0 auto var(--rd-space-2);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--rd-surface-alt);
}

.rd-badge.is-done .rd-badge__icon {
	background: var(--rd-surface);
}

.rd-badge__icon .rd-icon,
.rd-badge__icon .rd-face {
	width: 30px;
	height: 30px;
}

.rd-badge__icon .rd-face {
	width: 100%;
	height: 100%;
}

.rd-badge__label {
	font-size: var(--rd-size-xs);
	color: var(--rd-ink);
	margin: 0 0 var(--rd-space-2);
	line-height: 1.25;
	min-height: 2.4em;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rd-badge__stars {
	display: flex;
	justify-content: center;
	gap: 2px;
	margin-bottom: var(--rd-space-2);
}

.rd-star {
	width: 22px;
	height: 22px;
	fill: var(--rd-border);
	/*
	 * Un contorno fino, en oro oscuro.
	 *
	 * Las conseguidas llevan halo dorado, y un halo es luz que se
	 * escapa por los bordes: la estrella queda brillante por dentro y
	 * deshecha por fuera. Con una línea alrededor, el halo sigue ahí
	 * pero la forma se mantiene entera.
	 *
	 * Estaba en la tinta del tema, que es casi negra, y el negro sobre
	 * oro no se lee como el borde de una medalla sino como un dibujo
	 * repasado a rotulador. Un oro oscuro hace el mismo trabajo —marcar
	 * dónde acaba la estrella— sin salirse de la familia del color.
	 */
	stroke: #9A7412;
	stroke-width: 0.9;
	stroke-linejoin: round;
	paint-order: stroke fill;
	transition: filter var(--rd-transition);
}

/* Las que faltan van con el contorno del tema y más suave: sin oro
   dentro, un borde dorado alrededor de un hueco gris queda raro. Son un
   hueco por rellenar, no un dibujo que reclame la vista. */
.rd-star:not(.is-on) {
	stroke: var(--rd-ink-muted);
	stroke-width: 0.7;
	opacity: .8;
}

/* Las conseguidas relucen.

   Tres capas, las mismas que hacen el metal del primer puesto del
   ranking: el degradado en diagonal por bandas, un halo dorado que las
   separa del fondo, y una sombra corta debajo que les da grosor. Un
   relleno plano las deja como una casilla marcada; esto las convierte
   en algo ganado. */
.rd-star.is-on {
	fill: url(#rd-brillo);
	filter:
		drop-shadow(0 0 4px rgba(247, 209, 90, .95))
		drop-shadow(0 0 10px rgba(242, 198, 76, .55))
		drop-shadow(0 1px 1px rgba(150, 100, 15, .45));
}

/* Y un punto más grandes: el brillo necesita sitio para verse. */
.rd-star {
	width: 24px;
	height: 24px;
}

/* Si el degradado no llega a cargarse, el dorado plano de siempre. */
.rd-star.is-on {
	fill: var(--rd-star);
	fill: url(#rd-brillo) var(--rd-star);
}

.rd-badge__bar {
	height: 4px;
	border-radius: 2px;
	background: var(--rd-surface-alt);
	overflow: hidden;
	margin-bottom: 5px;
}

.rd-badge__bar span {
	display: block;
	height: 100%;
	background: var(--rd-primary);
	border-radius: 2px;
}

.rd-badge__meta {
	font-size: 11px;
	color: var(--rd-ink-muted);
	margin: 0;
}

@media (max-width: 520px) {
	.rd-badges {
		grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
	}
}

/* Cada racha en su propia tarjeta: separadas se leen como dos cosas
   distintas, que es lo que son. */
.rd-streaks {
	display: flex;
	flex-direction: column;
	gap: var(--rd-space-4);
}

.rd-progress__title--suelto {
	margin-bottom: var(--rd-space-3);
}

/* El icono de cada racha, en lugar de la llama repetida. */
/* La llamita, junto a «Tu mejor racha». */
.rd-llama {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	margin-right: 5px;
	vertical-align: -3px;
}

.rd-streak__chip {
	display: inline-flex;
	align-items: center;
}

/* --- Cada logro, desplegable --- */

.rd-badge__cara {
	display: block;
	cursor: pointer;
	list-style: none;
}

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

.rd-badge[open] {
	opacity: 1;
	border-color: var(--rd-border-strong);
}

.rd-badge__detalle {
	margin-top: var(--rd-space-3);
	padding-top: var(--rd-space-3);
	border-top: 1px solid var(--rd-border);
	text-align: left;
}

.rd-badge__detalle p {
	margin: 0;
	font-size: var(--rd-size-xs);
	line-height: var(--rd-leading-normal);
	color: var(--rd-ink-soft);
}

.rd-badge__pasos {
	margin-top: 5px !important;
	color: var(--rd-ink-muted) !important;
}

/* ==========================================================
   Los dos rankings
   ==========================================================
   Uno al lado del otro en pantalla ancha, uno debajo del otro en
   móvil. Ahí no caben dos columnas: cada lista se quedaría en 170
   píxeles y los nombres se cortarían a cuatro letras.

   Todos los colores salen de las variables del tema, así que las dos
   tarjetas se ven como el resto de la pantalla en los seis temas sin
   una sola regla por tema.
   ========================================================== */

.rd-rankings {
	display: grid;
	/* Se reparte solo según cuántos rankings haya.

	   Estaba en dos columnas fijas, de cuando había dos —uso y diario—.
	   Al quedarse solo el de uso, la mitad derecha se quedaba en blanco
	   y la lista parecía cortada por la mitad.

	   Con «auto-fit» y un mínimo, uno solo ocupa el ancho entero y dos
	   vuelven a ponerse lado a lado sin tocar nada. */
	grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
	gap: var(--rd-space-4);
	margin-bottom: var(--rd-space-5);
	/* Del mismo alto aunque una tenga más filas: con «start» quedaban
	   descuadradas y parecían bloques sueltos. */
	align-items: stretch;
}

/* El relleno se declara entero, arriba y a los lados, porque estas
   tarjetas llevan una lista pegada a los bordes y sin él el título
   quedaba tocando el borde de la tarjeta.

   AQUÍ NO SE DECLARA NINGÚN ANCHO, Y ES A PROPÓSITO. Esta tarjeta va
   siempre debajo de la de la racha, y las dos tienen que empezar y
   acabar en la misma raya vertical: en cuanto una de las dos se pone
   un «max-width» propio, la otra queda más ancha y se leen como dos
   columnas distintas en vez de como una. El ancho lo pone «.rd-card»,
   que es lo que llevan las dos y todas las demás tarjetas de la
   pantalla, y así basta con no contradecirlo.

   Esto no es una precaución teórica: el ancho se lo estaba poniendo
   «evolution.css», que tenía un «.rd-rank» a secas —de sus listas con
   barra, que no tienen nada que ver con esta tarjeta— y le colaba un
   tope de 1100 centrados. Se arregló allí, poniéndole «ul» delante al
   selector. Está contado entero en «evolution.css». */
.rd-rankings .rd-rank,
.rd-rank.rd-card--flat {
	display: flex;
	flex-direction: column;
	/* Escrito dos veces y con doble clase a propósito.
	   El relleno lo pone también «.rd-card--flat», que vive en otro
	   archivo, y depender del orden en que se carguen los dos deja el
	   resultado a suerte. Con dos clases en el mismo selector, esta
	   gana siempre. */
	padding: var(--rd-space-5);
}

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

/* El título del ranking y su botón de compartir, en la misma fila.

   Alba, 04-09-2026: el botón tenía que ser «exactamente como el de
   Progreso», y allí vive al lado del título, no debajo. Aquí igual.

   «align-items: start» y no «center»: el título puede partirse en dos
   líneas en una pantalla estrecha, y con el centrado el botón se
   quedaría flotando a media altura en vez de arriba, alineado con la
   primera línea, que es donde se busca. */
.rd-rank__cabecera {
	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: var(--rd-space-3);
}

/* El botón no encoge: lo que se aprieta es el título, que tiene
   adónde bajar. */
.rd-rank__cabecera .rd-share__open {
	flex: none;
}

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

.rd-rank__list {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--rd-surface);
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-md);
	overflow: hidden;
}

/*
 * La fila, en rejilla y no en caja flexible.
 *
 * Con caja flexible había que pedirle que no partiera y confiar en que
 * el nombre encogiera lo suficiente; si por lo que fuera no encogía, el
 * número de racha se caía a un segundo renglón. En una rejilla de
 * cuatro columnas fijas eso no puede pasar: hay cuatro huecos en una
 * fila y no existe un quinto sitio adonde bajar nada.
 *
 * La tercera columna es «minmax(0, 1fr)»: se queda con el espacio
 * sobrante y puede encogerse hasta cero. El cero es la parte
 * importante: sin él, un nombre largo empuja al número fuera de la
 * tarjeta en vez de recortarse con puntos suspensivos.
 *
 * «grid-template-areas: none» no sobra, aunque aquí no se use ni una
 * sola zona con nombre. «.rd-rank__row» es un nombre que en esta casa
 * lo llevan dos cosas distintas: estas filas del ranking y las barras
 * de ánimos y emociones de evolution.css. Aquella, por debajo de 600
 * píxeles, reparte su fila en dos renglones con zonas con nombre, y
 * como el nombre de clase es el mismo, el reparto caía también sobre
 * estas filas. No se notaba a simple vista —ningún hijo de aquí pide
 * zona, así que los cuatro se quedaban en el primer renglón— pero el
 * segundo renglón vacío existía y se llevaba un hueco de rejilla
 * entero. Seis píxeles por fila, quince filas: noventa píxeles de
 * nada en mitad del móvil. Con esta línea la fila vuelve a ser una.
 */
.rd-rank__list .rd-rank__row,
.rd-rank__yo {
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr) auto;
	grid-template-areas: none;
	align-items: center;
	gap: 8px;
	padding: 7px 10px;
	border-bottom: 1px solid var(--rd-border);
}


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

.rd-rank__row.is-me {
	background: var(--rd-badge-bg);
}

.rd-rank__pos {
	flex-shrink: 0;
	min-width: 28px;
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-muted);
	font-variant-numeric: tabular-nums;
}

.rd-rank__row.is-me .rd-rank__pos,
.rd-rank__yo .rd-rank__pos {
	color: var(--rd-primary);
	font-weight: 600;
}

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

/* El nombre se corta con puntos suspensivos en vez de empujar el
   número fuera de la tarjeta. */
/* El nombre, pegado a la foto.

   Estaba con «flex: 1», que le daba todo el espacio sobrante y dejaba
   el nombre flotando lejos del avatar. Ahora ocupa lo que necesita y
   el hueco se lo queda el número, que se va al borde derecho. */
.rd-rank__name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: left;
	font-size: var(--rd-size-sm);
	color: var(--rd-ink);
}

.rd-rank__score {
	/* Al borde derecho de su columna, que ya es la última. */
	justify-self: end;
	padding-left: var(--rd-space-3);
	font-size: var(--rd-size-sm);
	font-weight: 600;
	color: var(--rd-ink);
	font-variant-numeric: tabular-nums;
}

/* Tu fila, separada del resto por la línea coral. */
.rd-rank__yo {
	margin-top: -1px;
	background: var(--rd-badge-bg);
	border: 1px solid var(--rd-border);
	border-top: 2px solid var(--rd-primary);
	border-radius: 0 0 var(--rd-radius-md) var(--rd-radius-md);
}

.rd-rank__yo.is-arriba {
	display: none;
}

/* Cuando la lista está vacía. Compacto: una lista sin nadie no debería
   ocupar lo mismo que una llena. */
.rd-rank .rd-hint {
	margin: 0;
	padding: var(--rd-space-4);
	background: var(--rd-surface);
	border: 1px dashed var(--rd-border);
	border-radius: var(--rd-radius-md);
	font-size: var(--rd-size-sm);
	text-align: center;
}

/* El interruptor, abajo del todo y pegado al borde inferior aunque la
   otra tarjeta sea más alta. */
.rd-rank__toggle {
	margin-top: auto;
	padding-top: var(--rd-space-3);
	text-align: center;
}

.rd-rank__toggle .rd-linkbutton {
	font-size: var(--rd-size-xs);
}

@media (max-width: 899px) {
	.rd-rankings {
		grid-template-columns: 1fr;
	}

	.rd-rankings .rd-rank,
	.rd-rank.rd-card--flat {
		padding: var(--rd-space-4);
	}

	/* --- La lista entera también en el móvil ---

	   Aquí había un «nth-child(n + 6)» que dejaba la lista en cinco
	   filas. Nació cuando había dos rankings, uso y diario: eran treinta
	   filas seguidas y debajo venían los logros, así que cortar veinte
	   tenía sentido. Hoy el ranking es uno solo y son quince filas en las
	   dos pantallas que lo enseñan. En Comunidad no hay nada detrás; en
	   Rachas detrás siguen los logros, pero diez filas más son unos
	   trescientos píxeles de arrastre, no los seiscientos que se
	   ahorraban antes. Lo que el corte seguía quitando eran diez de los
	   quince puestos que se pidieron.

	   Se estudió meter la lista en una caja con desplazamiento propio
	   para que ocupara siempre lo mismo. Se descartó por dos motivos:
	   un dedo que arrastra dentro de una caja que a su vez está dentro
	   de una página que también se arrastra acaba moviendo la que no
	   era; y una lista que termina dentro de un recuadro esconde su
	   propio final, así que quien va decimoquinto puede no enterarse
	   nunca de que está. La página ya se desplaza, y ese gesto no hay
	   que explicárselo a nadie.

	   Lo que sí se hace es bajar la fila, para que quince no ocupen el
	   triple que cinco. Eso se aprieta más abajo, en el bloque de móvil
	   que ya existía para las filas del ranking, y no aquí: dos sitios
	   distintos tocando el relleno de la misma fila es volver a tener
	   dos números que cuadrar.

	   La fila de «tú» tampoco necesita ya reglas propias en el móvil.
	   Tenía dos —una la enseñaba y otra la escondía— gobernadas por ese
	   corte de cinco que había que repetir a mano en community.php. Con
	   la lista entera el corte es uno solo, el de la lista, y lo
	   resuelve «.rd-rank__yo.is-arriba» ahí arriba: si sales en la
	   lista, tu fila de abajo sobra en cualquier ancho de pantalla. */
}

/* --- Oro, plata y bronce, de medalla ---

   El primer intento iba en velos translúcidos sobre el fondo del tema,
   para que funcionara en los seis sin tocar el texto. Funcionaba, pero
   salía apagado: un velo deja pasar el color de debajo y el metal se
   queda en una insinuación.

   Aquí el metal es macizo. Y eso cambia una cosa importante: como el
   fondo ya no depende del tema, el texto tampoco puede depender de él.
   Los tres metales son claros, así que el texto va oscuro y fijo, y se
   lee igual en los seis temas. Es la única parte de la aplicación con
   colores que no salen de las variables, y tiene motivo: el oro es oro
   en todas partes.

   La textura sale de cuatro cosas:

   - Un degradado con paradas bruscas, no suaves: el metal pulido
     refleja en bandas, no en transiciones lentas.
   - Dos franjas de luz cruzadas en diagonal.
   - Un bisel: filo claro arriba, sombra abajo, como el canto de una
     chapa troquelada.
   - Un grano finísimo, que es lo que evita que se vea como plástico. */
.rd-rank__row.is-medalla {
	position: relative;
	overflow: hidden;
	border-left: 0;
	box-shadow:
		inset 0 2px 0 rgba(255, 255, 255, .75),
		inset 0 -2px 4px rgba(0, 0, 0, .28),
		inset 3px 0 0 rgba(255, 255, 255, .35);
}

.rd-rank__row.is-medalla-1 {
	/* Sin las paradas oscuras que había antes: eran las que dibujaban
	   las rayas verticales que ensuciaban la fila. Quedan los brillos,
	   que es lo que hace el metal, sobre un dorado parejo. */
	background: linear-gradient(
		100deg,
		#e2b32c 0%,
		#f9e3a8 22%,
		#ecc75e 44%,
		#fff7d6 62%,
		#eec84f 82%,
		#e0af26 100%
	);
}

.rd-rank__row.is-medalla-2 {
	background: linear-gradient(
		100deg,
		#b3bcc7 0%,
		#f4f7fa 22%,
		#ccd4dd 44%,
		#ffffff 62%,
		#d6dde5 82%,
		#b8c1cc 100%
	);
}

.rd-rank__row.is-medalla-3 {
	background: linear-gradient(
		100deg,
		#c07c40 0%,
		#f0be92 22%,
		#cf8f57 44%,
		#ffe0c2 62%,
		#dda070 82%,
		#bd7a3d 100%
	);
}

.rd-rank__row.is-medalla::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	/* Solo el destello que cruza. El grano de rayas finas que había
	   aquí sumaba a las verticales y hacía que la fila se leyera como
	   una persiana. */
	background: linear-gradient(
		78deg,
		transparent 38%,
		rgba(255, 255, 255, .55) 48%,
		transparent 58%
	);
}

/* El texto, oscuro y fijo: va sobre metal claro, no sobre el tema. */
.rd-rank__row.is-medalla .rd-rank__name,
.rd-rank__row.is-medalla .rd-rank__score,
.rd-rank__row.is-medalla .rd-rank__pos {
	position: relative;
	z-index: 1;
	color: #2b2214;
	/* Una sombra clarísima detrás de las letras: sobre una superficie
	   con brillos, el texto plano pierde el filo justo donde pasa la
	   luz. */
	text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
}

.rd-rank__row.is-medalla .rd-rank__pos {
	font-weight: 800;
}

.rd-rank__row.is-medalla .rd-rank__score {
	font-weight: 700;
}

.rd-rank__row.is-medalla .rd-rank__avatar {
	position: relative;
	z-index: 1;
	/* Aro claro alrededor de la foto: sin él, una foto oscura se pega
	   al metal y parece un agujero. */
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .8);
}

/* Tu fila con medalla: se marca con una franja coral a la derecha. El
   fondo coral de «esta eres tú» taparía el metal, y quien va primero es
   justo quien quiere ver su oro. */
.rd-rank__row.is-me.is-medalla {
	box-shadow:
		inset 0 2px 0 rgba(255, 255, 255, .75),
		inset 0 -2px 4px rgba(0, 0, 0, .28),
		inset -5px 0 0 var(--rd-primary);
}

/* --- El aviso al salir de un ranking --- */
.rd-rank__salir {
	margin-top: auto;
	padding-top: var(--rd-space-3);
	text-align: center;
}

.rd-rank__salir summary {
	list-style: none;
	cursor: pointer;
	font-size: var(--rd-size-xs);
}

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

.rd-rank__aviso {
	margin-top: var(--rd-space-3);
	padding: var(--rd-space-4);
	background: var(--rd-surface-alt);
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-md);
	text-align: left;
}

.rd-rank__aviso-titulo {
	margin: 0 0 4px;
	font-weight: 600;
	font-size: var(--rd-size-sm);
	color: var(--rd-primary);
}

.rd-rank__aviso p {
	margin: 0;
	font-size: var(--rd-size-xs);
	line-height: var(--rd-leading-normal);
	color: var(--rd-ink-soft);
}

/* Los dos botones, pequeños y en línea si caben.

   Eran dos barras a todo el ancho, del tamaño de un botón principal, y
   esto no es una acción principal: es una confirmación de algo que casi
   nadie va a hacer. Al tamaño de antes gritaban más que el aviso.

   El de quedarse va primero —aparece a la derecha por el orden
   invertido— porque es el que más gente va a querer. */
.rd-rank__aviso-botones {
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--rd-space-2);
	margin-top: var(--rd-space-3);
}

.rd-rank__aviso-botones .rd-button {
	width: auto;
	padding: 7px var(--rd-space-3);
	font-size: var(--rd-size-xs);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}

/* La nota técnica del ranking. Solo la ve quien administra. */
.rd-rank__diag {
	margin: var(--rd-space-3) 0 0;
	padding: var(--rd-space-2) var(--rd-space-3);
	border: 1px dashed var(--rd-border);
	border-radius: var(--rd-radius-sm);
	font-size: var(--rd-size-xs);
	line-height: var(--rd-leading-normal);
	color: var(--rd-ink-muted);
	text-align: left;
}


/* ==========================================================
   Las dos rachas en móvil, sin tener que bajar
   ==========================================================
   Con los tamaños de ordenador, cada tarjeta ocupa media pantalla y
   el segundo camino queda por debajo del borde. Y son dos: quien entra
   en Rachas viene a ver las dos, no una y a buscar la otra.

   No se quita nada, se aprieta todo: relleno, huecos, altura de las
   huellas y del número grande. La información sigue entera.
   ========================================================== */

@media (max-width: 899px) {
	.rd-streak {
		padding: var(--rd-space-3);
	}

	/* El número de días, algo menor: a tamaño de ordenador ocupa él
	   solo el alto de tres huellas. */
	.rd-streak__number {
		font-size: 2rem;
		line-height: 1.05;
	}

	.rd-streak__head {
		gap: var(--rd-space-2);
	}

	/* La explicación de qué cuenta cada racha se lee una vez y ya no
	   hace falta. En móvil se guarda para que quepan los dos caminos;
	   quien la quiera, la tiene en el ordenador. */
	.rd-streak__hint {
		display: none;
	}

	.rd-path {
		margin-top: var(--rd-space-3);
		padding: var(--rd-space-3) var(--rd-space-3) var(--rd-space-2);
	}

	.rd-path__track {
		padding: 2px 0 var(--rd-space-2);
	}

	/* Las huellas y las monedas, más pequeñas. El camino se arrastra
	   igual, así que lo único que cambia es cuántos días se ven de una
	   vez, y eso en un móvil ya era poco de todos modos. */
	.rd-path__step {
		width: 30px;
	}

	.rd-path__step.is-prize {
		width: 40px;
	}

	/*
	 * La moneda se encoge con «scale», no cambiándole el ancho.
	 *
	 * Está hecha de dos caras y un canto de tiras estrechas colocadas
	 * en el espacio, a una distancia calculada para su tamaño original.
	 * Al cambiarle solo el ancho, las caras encogían y el canto se
	 * quedaba donde estaba: por eso se veían esos arcos sueltos
	 * alrededor, como si la moneda estuviera rota.
	 *
	 * «scale» encoge la pieza entera, canto incluido, y todo sigue
	 * encajando.
	 */
	.rd-path__coin {
		transform: scale(0.78);
		transform-origin: center;
	}

	.rd-path__paw {
		width: 20px;
		height: 20px;
	}

	/* La chapa del número, más pequeña y algo más fuera: a tamaño de
	   ordenador se comía una esquina del dibujo. */
	.rd-streak__flame {
		width: 60px;
		height: 60px;
	}

	/* La chapa de «Tu mejor racha», ajustada a su texto. Ocupaba toda
	   la fila para decir cuatro palabras. */
	.rd-streak__chip {
		width: auto;
		align-self: flex-start;
		padding: 5px var(--rd-space-3);
		font-size: var(--rd-size-xs);
	}

	.rd-streak__marks {
		align-items: flex-start;
	}

	.rd-streak__number {
		min-width: 30px;
		height: 30px;
		right: -6px;
		bottom: -4px;
		padding: 0 7px;
		font-size: 1.15rem;
	}

	/* Y menos hueco entre las dos tarjetas. */
	.rd-streaks > * + * {
		margin-top: var(--rd-space-3);
	}
}

/* El distintivo de verificado, dentro del nombre y sin que lo empuje.
   Va con «inline-flex» para que no añada línea base propia y el nombre
   no se descuadre respecto a la foto. */
.rd-rank__name .rd-badge-check,
.rd-rank__name svg {
	display: inline-flex;
	vertical-align: middle;
	flex-shrink: 0;
	margin-left: 3px;
}

@media (max-width: 899px) {
	/* En móvil se aprieta todo un poco: la fila tiene que caber en una
	   sola línea con el nombre legible.

	   Y ahora se aprieta bastante más que antes, porque antes en el
	   móvil solo se veían cinco filas y ahora se ven las quince. Lo que
	   se quita es hueco, no información: el nombre y el número siguen
	   con su tamaño de letra, y la foto baja de 24 a 22 píxeles, que a
	   este tamaño es una cara igual de reconocible.

	   La cuenta, para que se pueda rehacer si algún día cambia el tope:
	   la fila la marca la pieza más alta, que es la foto, más el
	   relleno de arriba y abajo, más la línea que la separa de la
	   siguiente. Con 22 + 3 + 3 + 1 la fila sale por 29 píxeles, así
	   que quince filas ocupan lo mismo que ocupaban diez de las de
	   antes. La tarjeta entera cabe de una pantalla larga en vez de
	   tres.

	   El selector lleva «.rd-rank__list» delante a propósito, calcado
	   del que pone el relleno de base más arriba. Sin él esta regla
	   pesa menos que aquella y el navegador se queda con la de
	   ordenador: la fila de «tú», que sí encaja con «.rd-rank__yo» a
	   secas, se apretaba, y las de la lista no. Quedaban con distinto
	   margen izquierdo una encima de otra, que es como se descubrió. */
	.rd-rank__list .rd-rank__row,
	.rd-rank__yo {
		gap: 6px;
		padding: 3px 8px;
	}

	.rd-rank__pos {
		min-width: 26px;
	}

	.rd-rank__avatar {
		width: 22px;
		height: 22px;
	}

	/* La foto manda en el alto de la fila, así que el nombre y el
	   número no pueden estirarla por su cuenta con la interlínea que
	   traen del texto normal. Con esto la fila mide lo que se ha
	   calculado arriba y no lo que decida la fuente. */
	.rd-rank__name,
	.rd-rank__score,
	.rd-rank__pos {
		line-height: 1.25;
	}
}

/* ==========================================================
   La estrella con premio y su celebración
   ========================================================== */

/* El botón no se ve: lo que se ve es la estrella de dentro. Así el
   dibujo manda y el botón solo aporta lo que un dibujo no puede, que es
   poder pulsarse con el teclado. */
.rd-star__btn {
	display: inline-flex;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
}

/* La estrella por cobrar late.

   Es el mismo lenguaje que las monedas del camino: lo que se mueve
   pide que lo pulses, lo quieto ya está cobrado. */
.rd-star.is-cobrable {
	animation: rd-estrella-late 1.1s ease-in-out infinite;
	transform-origin: center;
}

@keyframes rd-estrella-late {
	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.22);
	}
}

/* --- La celebración --- */
.rd-premio {
	position: fixed;
	inset: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .55);
	cursor: pointer;
	animation: rd-premio-entra .28s ease-out;
}

.rd-premio.se-va {
	animation: rd-premio-entra .35s ease-in reverse;
	opacity: 0;
}

@keyframes rd-premio-entra {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.rd-premio__caja {
	text-align: center;
}

/* La moneda grande de la celebración.

   El dibujo lo pone el reddie que copia el guion; aquí solo se le da
   sitio y se le pone un halo detrás para que destaque sobre el velo.

   Y gira sola: la moneda de Reddie ya sabe girar —es la misma que da
   vueltas en el monedero— así que no hace falta inventarle un giro. */
.rd-premio__moneda {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 170px;
	height: 170px;
	margin: 0 auto;
	filter: drop-shadow(0 0 34px rgba(242, 198, 76, .75));
}

.rd-premio__moneda .rd-coin3d__giro {
	animation: rd-girar-moneda 1.1s linear infinite;
}



.rd-premio__x {
	margin: var(--rd-space-4) 0 0;
	font-family: var(--rd-font-display);
	font-weight: var(--rd-weight-display);
	font-size: 3rem;
	color: #FFF6D2;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}

@media (prefers-reduced-motion: reduce) {
	.rd-star.is-cobrable,
	.rd-premio__moneda .rd-coin3d__giro,
	.rd-premio {
		animation: none;
	}

	/* Sin movimiento, la estrella por cobrar se marca con un aro. */
	.rd-star.is-cobrable {
		filter: drop-shadow(0 0 6px var(--rd-primary));
	}
}

/* ==========================================================
   Los logros, en filas
   ==========================================================
   Estaban en tarjetas, y en una tarjeta estrecha las cinco estrellas
   solo caben si son diminutas: eran de 24 píxeles y hay que pulsarlas
   con el dedo. Lo que se recomienda para algo pulsable en un móvil son
   44, casi el doble.

   En una fila sobra ancho, así que las estrellas pueden ser grandes sin
   quitarle sitio a nada.
   ========================================================== */

.rd-logros {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-md);
	overflow: hidden;
}

.rd-logro {
	display: grid;
	/* Icono, texto, cuenta y estrellas. Cuatro columnas fijas: en una
	   rejilla no existe un quinto sitio adonde bajar nada, así que la
	   fila no puede partirse por larga que sea. */
	grid-template-columns: 44px minmax(0, 1fr) 92px auto;
	align-items: center;
	gap: var(--rd-space-3);
	padding: var(--rd-space-3) var(--rd-space-4);
	border-bottom: 1px solid var(--rd-border);
}

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

.rd-logro__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--rd-badge-bg);
	color: var(--rd-primary);
}

.rd-logro__icon .rd-icon,
.rd-logro__icon .rd-face {
	width: 24px;
	height: 24px;
}

/* Los logros sin empezar, apagados: se ven, pero no compiten con los
   que están en marcha. */
.rd-logro:not(.is-started) .rd-logro__icon {
	opacity: .5;
	filter: grayscale(.5);
}

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

.rd-logro__label,
.rd-logro__hint {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rd-logro__label {
	font-size: var(--rd-size-base);
	color: var(--rd-ink);
}

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

.rd-logro__cuenta {
	font-size: var(--rd-size-sm);
	font-weight: 600;
	color: var(--rd-ink-soft);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.rd-logro__bar {
	display: block;
	height: 4px;
	margin-top: 5px;
	border-radius: var(--rd-radius-pill);
	background: var(--rd-surface-alt);
	overflow: hidden;
}

.rd-logro__bar > span {
	display: block;
	height: 100%;
	border-radius: var(--rd-radius-pill);
	background: var(--rd-primary);
}

.rd-logro.is-done .rd-logro__cuenta {
	color: var(--rd-primary);
}

/* --- Las estrellas, grandes --- */
.rd-logro__stars {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.rd-logro__stars .rd-star {
	width: 34px;
	height: 34px;
}

/* La zona pulsable es mayor que el dibujo: el relleno del botón cuenta
   para el dedo aunque no se vea. Con esto cada estrella cobrable ocupa
   los 44 píxeles que hacen falta. */
.rd-logro__stars .rd-star__btn {
	padding: 5px;
	border-radius: 50%;
}

.rd-logro__stars .rd-star__btn:hover,
.rd-logro__stars .rd-star__btn:focus-visible {
	background: var(--rd-badge-bg);
}

@media (max-width: 599px) {
	/* En móvil la cuenta se va debajo del nombre: cuatro columnas no
	   caben, y de las cuatro es la que menos sitio necesita. */
	.rd-logro {
		grid-template-columns: 40px minmax(0, 1fr) auto;
		gap: var(--rd-space-2);
		padding: var(--rd-space-3);
	}

	.rd-logro__hint {
		display: none;
	}

	.rd-logro__cuenta {
		grid-column: 2;
		grid-row: 2;
		text-align: left;
		font-size: var(--rd-size-xs);
	}

	.rd-logro__stars {
		grid-column: 3;
		grid-row: 1 / span 2;
		gap: 2px;
	}

	.rd-logro__stars .rd-star {
		width: 28px;
		height: 28px;
	}
}