/*
	 * La gráfica, a todo el ancho de su tarjeta.
	 *
	 * El fallo estaba en la dirección de la caja. En una caja flexible
	 * en fila, el ancho es el eje principal y ahí el dibujo se queda en
	 * su tamaño natural por mucho que se le pida el cien por cien. En
	 * una caja en columna, el ancho pasa a ser el eje secundario, y en
	 * ese los hijos se estiran solos hasta llenar la caja.
	 *
	 * Así que el mismo dibujo, con las mismas órdenes, llena el ancho o
	 * no según en qué dirección esté la caja. Es de esas cosas que solo
	 * se ven probando.
	 */
	/* La caja, en bloque y centrada por márgenes automáticos. Sin
	   repartos de por medio: el ancho lo fija ya el propio dibujo. */
	.rd-evo__grafica .rd-chart__box {
		display: block;
		width: 100%;
		max-width: none;
		margin-top: auto;
		margin-bottom: auto;
	}/**
 * Evolución.
 *
 * Ningún color a mano: los de ánimo los pone el plugin en el atributo
 * de estilo, y el resto sale de las variables de tokens.css.
 */

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

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

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

.rd-evo__subheading {
	font-size: var(--rd-size-sm);
	font-weight: 600;
	color: var(--rd-ink-soft);
	margin: var(--rd-space-5) 0 var(--rd-space-3);
}

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

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

/* ==========================================================
   La gráfica del mes
   ========================================================== */

/*
 * La gráfica se queda centrada y con un tope de ancho. Antes ocupaba
 * todo el hueco disponible y en una pantalla ancha se veía estirada;
 * en el móvil, en cambio, obligaba a desplazar a lo ancho.
 */
/* La gráfica, a lo ancho de su tarjeta.

   Estaba topada a 620 píxeles y centrada, así que en un monitor
   quedaban dos franjas vacías a los lados casi tan anchas como la
   propia gráfica. Ese tope tenía sentido cuando la tarjeta ocupaba
   toda la pantalla; con la tarjeta ya limitada, sobra.

   Se deja un tope alto para que en pantallas muy anchas la línea no se
   estire hasta parecer plana: una gráfica demasiado ancha aplana las
   subidas y bajadas, que es justo lo que se viene a mirar. */
.rd-chart__box {
	margin: var(--rd-space-3) auto var(--rd-space-2);
	max-width: 1100px;
}

.rd-chart {
	display: block;
	width: 100%;
	height: auto;
}

/* Las rayas de fondo, una por ánimo: sirven para leer la altura sin
   tener que poner números. */
.rd-chart__guide {
	fill: none;
	stroke: var(--rd-border);
	stroke-width: 1;
}

/* El suelo de la gráfica, del mismo color que las rayas de cada ánimo:
   marca dónde acaba el dibujo sin competir con la línea. */
.rd-chart__axis {
	fill: none;
	stroke: var(--rd-border);
	stroke-width: 2;
	stroke-linecap: round;
}

.rd-chart__line {
	fill: none;
	stroke: var(--rd-chart-line);
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.rd-chart__dot {
	stroke: var(--rd-surface);
	stroke-width: 2;
}

/* En el cuadro la letra mide 19, pero la gráfica se encoge para caber:
   en un móvil se queda en unos 10 píxeles reales, que es el mínimo
   para poder leerla. */
.rd-chart__day {
	fill: var(--rd-ink-soft);
	font-family: var(--rd-font-body);
	font-size: 19px;
}

/* ==========================================================
   Listas con barra (ánimos y emociones)
   ==========================================================
   EL «ul» DEL SELECTOR NO SOBRA, Y CONVIENE DEJARLO EXPLICADO PORQUE
   NO SE VE LEYENDO ESTE ARCHIVO SOLO.

   «.rd-rank» son dos cosas distintas en esta web:

   - estas listas con barra, que son siempre un «ul» (Evolución y
     Progreso), y
   - la TARJETA del ranking de uso, que es un «section» y vive en
     «progress.css» (pantallas de Rachas y Comunidad).

   Sin el «ul», estas tres líneas —«margin: 0 auto», «max-width» y
   «gap»— caían también sobre la tarjeta, y como esta hoja se carga
   después que «progress.css» ganaban ellas. El resultado se veía en
   Rachas: la tarjeta del ranking se quedaba en 1100 centrados dentro
   de una columna de 1148 y entraba veinticuatro píxeles por cada lado
   respecto a la tarjeta de la racha, que está justo encima. En un
   móvil de 500 eran treinta y dos por lado. Y el «gap» le añadía de
   propina un hueco de alto entre el título y la lista que nadie había
   pedido.

   Lo suyo sería que las dos familias no se llamaran igual, pero
   renombrar toca cuatro plantillas de golpe. El «ul» las separa hoy
   sin tocar ni una: una tarjeta nunca va a ser un «ul», y estas
   listas nunca van a dejar de serlo.

   OJO al cambiar el peso de estos selectores: «.rd-evo__listas
   .rd-rank» de más abajo tiene que seguir pesando más que este.
   ========================================================== */

ul.rd-rank {
	list-style: none;
	margin: 0 auto;
	max-width: 1100px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--rd-space-3);
}

.rd-rank__row {
	display: grid;
	grid-template-columns: 32px minmax(96px, 130px) 1fr 44px;
	align-items: center;
	gap: var(--rd-space-3);
}

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

.rd-rank__face {
	display: flex;
	align-items: center;
	justify-content: center;
}

.rd-rank__face .rd-face,
.rd-rank__face .rd-icon {
	width: 28px;
	height: 28px;
}

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

.rd-rank__track {
	height: 12px;
	border-radius: var(--rd-radius-pill);
	background: var(--rd-surface-alt);
	overflow: hidden;
}

.rd-rank__bar {
	display: block;
	height: 100%;
	border-radius: var(--rd-radius-pill);
	min-width: 3px;
	background: var(--rd-primary);
}

.rd-rank__bar--soft {
	background: var(--rd-primary);
	opacity: 0.75;
}

/* ==========================================================
   Cruces: una barra partida por ánimos
   ========================================================== */

.rd-cross {
	list-style: none;
	margin: 0 auto;
	max-width: 1100px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--rd-space-3);
}

.rd-cross__row {
	display: grid;
	grid-template-columns: minmax(140px, 210px) 1fr;
	align-items: center;
	gap: var(--rd-space-3);
}

.rd-cross__name {
	display: inline-flex;
	align-items: center;
	gap: var(--rd-space-2);
	font-size: var(--rd-size-sm);
	color: var(--rd-ink);
	min-width: 0;
}

.rd-cross__name .rd-icon {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

/* Los días que sostienen la barra, en pequeño y apagado: informa sin
   competir con el nombre. */
.rd-cross__days {
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-muted);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.rd-mix {
	display: flex;
	height: 14px;
	border-radius: var(--rd-radius-pill);
	overflow: hidden;
	background: var(--rd-surface-alt);
}

.rd-mix__part {
	display: block;
	height: 100%;
}

@media (max-width: 599px) {
	.rd-rank__row {
		grid-template-columns: 28px 1fr auto;
		grid-template-areas:
			"cara etiqueta numero"
			"barra barra barra";
		gap: var(--rd-space-2);
	}

	.rd-rank__count {
		grid-area: numero;
	}

	.rd-rank__face {
		grid-area: cara;
	}

	.rd-rank__label {
		grid-area: etiqueta;
	}

	.rd-rank__track {
		grid-area: barra;
	}

	.rd-cross__row {
		grid-template-columns: 1fr;
		gap: var(--rd-space-2);
	}
}

/* El encabezado sin tarjeta: el título y el botón de compartir sueltos
   sobre el fondo, con el mismo aire que tenían dentro del recuadro. */
/* El título, más cerca de los bloques. Al quitarle la tarjeta se quedó
   con el hueco de cuando la tenía, y sumado al relleno de arriba de la
   pantalla eran dos dedos de nada entre el título y el contenido. */
.rd-evo__head--suelto {
	margin-top: calc(var(--rd-space-4) * -1);
	margin-bottom: var(--rd-space-3);
	padding: 0 var(--rd-space-2);
}

@media (max-width: 899px) {
	/* La línea de la gráfica, más gruesa en móvil.

	   A 2,6 píxeles se ve bien en un monitor y se pierde en una
	   pantalla de teléfono, donde la gráfica mide la mitad y hay
	   bastante más luz alrededor. A 4 se sigue leyendo como una línea
	   y no como una barra. */
	.rd-chart__line {
		stroke-width: 4;
	}

	/* Los puntos, a juego: con la línea más gruesa se los tragaba. El
	   borde es lo que los separa de la línea, así que se engorda él y
	   no el punto. */
	.rd-chart__dot {
		stroke-width: 2.6;
	}
}

/* ==========================================================
   Evolución en ordenador: los tres apartados, una pantalla
   ==========================================================
   La gráfica a la izquierda, algo más de la mitad, y las dos listas
   de barras apiladas en el hueco de la derecha. Son las tres cosas que
   se vienen a mirar y no tenía sentido que hubiera que bajar para ver
   la segunda.

   Por debajo de 900 píxeles la rejilla se deshace sola y vuelven a ir
   una debajo de otra, que ahí es la única forma que cabe.
   ========================================================== */

@media (min-width: 900px) {
	.rd-evo__panel {
		display: grid;
		/* La gráfica, algo más estrecha que antes: con el lienzo más
		   alto, dándole tanto ancho quedaba tumbada. */
		grid-template-columns: 1fr 1.05fr;
		gap: var(--rd-space-4);
		align-items: start;
	}

	/*
	 * La segunda tarjeta llega hasta abajo.
	 *
	 * Dos filas: la primera a lo que ocupe, la segunda se queda con lo
	 * que sobre. Así el borde inferior de «Emociones más presentes»
	 * cae a la misma altura que el de la gráfica, sea cual sea el alto
	 * de las dos columnas.
	 *
	 * Lo único que se estira es la tarjeta. En el intento anterior le
	 * puse además una caja flexible por dentro, y ese estirado se metió
	 * hasta las filas de cada emoción: las barras se quedaban en un
	 * palito. La tarjeta puede crecer sin que crezca lo que lleva
	 * dentro, y eso es exactamente lo que hace falta aquí: el contenido
	 * se queda arriba, a su tamaño, y lo que sobra es fondo.
	 */
	.rd-evo__listas {
		display: grid;
		grid-template-rows: auto 1fr;
		gap: var(--rd-space-4);
	}

	/* Las tarjetas de dentro pierden el margen inferior: aquí quien
	   separa es el hueco de la rejilla, y sumar los dos deja una zanja
	   entre las dos listas. */
	.rd-evo__panel > .rd-card,
	.rd-evo__listas > .rd-card {
		margin-bottom: 0;
	}

	/* Las filas de barras, más apretadas.

	   Una barra no necesita ser larga para comparar: lo que se lee es
	   la proporción entre unas y otras, y eso se ve igual en doscientos
	   píxeles que en seiscientos. Lo que sí hacía falta era que el
	   nombre y el número fueran en la misma línea, y eso ya estaba. */
	.rd-evo__listas .rd-rank {
		gap: 6px;
	}

	.rd-evo__listas .rd-rank__row {
		grid-template-columns: 24px minmax(72px, 104px) 1fr 26px;
		gap: var(--rd-space-2);
	}

	.rd-evo__listas .rd-rank__face .rd-face,
	.rd-evo__listas .rd-rank__face .rd-icon {
		width: 22px;
		height: 22px;
	}

	.rd-evo__listas .rd-rank__track {
		height: 9px;
	}

	.rd-evo__listas .rd-rank__label,
	.rd-evo__listas .rd-rank__count {
		font-size: var(--rd-size-xs);
	}

	/*
	 * Las dos columnas acaban a la misma altura.
	 *
	 * Las dos listas juntas suman menos que la gráfica, así que
	 * quedaba un hueco vacío debajo de las emociones. Con «stretch»,
	 * la tarjeta de la gráfica se estira hasta el borde inferior de la
	 * otra columna.
	 */
	.rd-evo__panel {
		align-items: stretch;
	}

	.rd-evo__grafica {
		display: flex;
		flex-direction: column;
	}

	/* Y la gráfica crece con la tarjeta en vez de dejar el hueco
	   dentro. El tope de ancho lo pone ya la rejilla, así que aquí
	   sobra. */
	/*
	 * La gráfica, a todo el ancho de su tarjeta.
	 *
	 * Estaba en caja flexible con el dibujo centrado, y ahí un SVG con
	 * ancho del cien por cien no se estira: la caja flexible le hace
	 * caso a su tamaño natural antes que a la orden de ocupar todo, y
	 * el resultado era una gráfica pequeña flotando en medio de la
	 * tarjeta.
	 *
	 * Con rejilla, la celda ocupa el ancho entero y el dibujo se ajusta
	 * a ella. Lo que sobra de alto se reparte arriba y abajo.
	 */
	/*
	 * La gráfica, a todo el ancho de su tarjeta.
	 *
	 * El fallo estaba en la dirección de la caja. En una caja flexible
	 * en fila, el ancho es el eje principal y ahí el dibujo se queda en
	 * su tamaño natural por mucho que se le pida el cien por cien. En
	 * una caja en columna, el ancho pasa a ser el eje secundario, y en
	 * ese los hijos se estiran solos hasta llenar la caja.
	 *
	 * El mismo dibujo, con las mismas órdenes, llena el ancho o no
	 * según en qué dirección esté la caja.
	 */
	.rd-evo__grafica .rd-chart__box {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		max-width: none;
		margin-top: var(--rd-space-2);
		margin-bottom: 0;
	}

	/*
	 * La gráfica se centra en el alto que le sobre.
	 *
	 * El dibujo conserva su proporción a propósito: estirarlo llenaría
	 * la caja pero dejaría las caritas del eje ovaladas y los puntos
	 * elípticos. Lo que se ha hecho es dibujarlo más alto de origen, y
	 * lo poco que sobre se reparte arriba y abajo.
	 */
	.rd-evo__grafica .rd-chart {
		width: 100%;
		height: auto;
	}
}