/**
 * Progreso: la parte de hábitos.
 *
 * La parte emocional de esta pantalla se viste sola con evolution.css:
 * el marcado y las clases son los mismos que tenía Evolución, y por eso
 * aquí casi no hay reglas para ella. Lo que hay es lo nuevo: la gráfica
 * de relación, la lista de constancia y los anillos de la semana.
 *
 * Los dos colores de las gráficas se nombran aquí arriba y en ningún
 * otro sitio: el día que haya que cambiar uno se cambia en un sitio y no
 * en veinte reglas. Los dos tienen un valor de día y otro de noche, por
 * el mismo motivo y con las mismas cuentas: el del verde está escrito
 * justo debajo, y el del rojo en tokens.css, que es de donde sale.
 */

.rd-progreso {
	/* EL VERDE DE LOS HÁBITOS. UN VALOR POR TEMA, Y NO ES UN CAPRICHO.

	   Es el «Verde claro» de la paleta de hábitos del plugin
	   (Reddie_Habits::colores()), no un verde inventado: los hábitos ya
	   se pintan con esos diez colores en la pantalla de Hábitos y en las
	   barras de aquí abajo, así que la línea que los resume va del mismo
	   juego.

	   Va escrito a mano y no como variable porque en tokens.css no hay
	   ningún verde: los que existen son el de «mensaje correcto», que
	   quiere decir otra cosa, y los de los ánimos, que quieren decir
	   justo lo que aquí NO se quiere decir. Poner un color de ánimo en la
	   línea de hábitos sería insinuar que una cosa es la otra.

	   POR QUÉ HAY DOS Y NO UNO. Aquí estaba el «Verde claro» tal cual,
	   #7acb5a, para los dos temas, y sobre el crema no se veía: la línea
	   contra el recuadro hundido daba 1,71 y la muestra de la leyenda
	   contra la tarjeta 1,88, cuando lo mínimo para una raya o un
	   cuadradito de color es 3. En la noche ese mismo verde da 3,66 y va
	   sobrado. Y al revés: el «Verde oscuro» de la misma paleta llega a
	   4,61 sobre el crema pero se queda en 1,35 sobre el azul de noche,
	   donde desaparece. Se probaron los dos verdes de la paleta y toda
	   la escalera de tonos que hay entre ellos: NO hay un solo verde que
	   valga para los dos fondos, porque uno es casi blanco y el otro
	   casi negro. Un color, dos fondos opuestos, no salen las cuentas.
	   Así que hay dos valores.

	   EL DE DÍA es el mismo verde —mismo tono, 103 grados— con la luz
	   bajada hasta donde empieza a verse: sigue siendo el verde claro
	   que se pidió, no un verde de bosque. Contra el recuadro da 3,49 y
	   contra la tarjeta 3,83. Y aguanta también sobre los otros fondos
	   de la tienda, que tiñen las tarjetas de azul, lila, rosa o
	   pistacho: el peor de los cinco es Descanso, con 3,33.

	   EL DE NOCHE, más abajo, es el «Verde claro» de la paleta sin
	   tocar, que allí ya se ve de sobra. */
	--rd-habitos-linea: #468e29;

	/* Y el rojo del ánimo: el mismo que usa la gráfica de arriba.

	   No es una coincidencia ni una comodidad: en las dos gráficas de
	   esta pantalla esa línea es la misma cosa —el ánimo que se apuntó
	   cada día—, y con el mismo color se reconoce sin leer la leyenda.
	   Lo que NO se puede leer igual es la altura, y de eso se ocupan la
	   etiqueta del eje y todo lo demás que hay más abajo.

	   Este también tiene un valor de noche, pero no se escribe aquí: se
	   escribe en el propio token, en tokens.css, porque la gráfica de
	   arriba lo coge de allí directamente y no pasa por este nombre. Si
	   se corrigiera aquí, la de abajo se vería y la de arriba no. */
	--rd-animo-linea: var(--rd-chart-line);
}

/* EL VERDE DE LA NOCHE.

   Se cuelga de «rd-oscuro», que es la marca que el tema le pone al body
   cuando el fondo elegido es Calma (functions.php). Es la única señal
   que hay en la página de que se está de noche: el resto del tema
   oscuro son variables que el plugin inyecta —tinta, bordes,
   superficies— y entre ellas no hay ningún verde, así que no había nada
   de lo que tirar. De esta misma clase cuelga el rojo de noche de las
   gráficas, en tokens.css; son las dos únicas reglas de todo el tema
   que la miran.

   Y no se usa «prefers-color-scheme» a propósito: aquí la noche no la
   decide el sistema operativo, la decide quien elige el fondo Calma en
   la tienda. Preguntarle al sistema pondría el verde de noche a quien
   tiene la pantalla en crema, que es justo el caso que no se ve. */
body.rd-oscuro .rd-progreso {
	--rd-habitos-linea: #7acb5a;
}

/* ==========================================================
   «Así has sentido agosto»: el dibujo entero rojo
   ==========================================================
   LA LÍNEA YA ERA ROJA. LO QUE NO LO ERA ERAN LOS PUNTOS.

   Se pidió que la línea de esa gráfica fuera roja y, medida en
   pantalla, lo es en los seis fondos de la tienda: #e4002b de día, con
   4,49 a 4,68 contra la tarjeta según el fondo, y #ff8fa8 de noche, con
   5,01. Ahí no había nada que arreglar.

   Lo que se veía naranja, amarillo o verde eran los VEINTIDÓS PUNTOS
   que van encima. Los pinta el plugin uno a uno, cada día del color de
   su ánimo, escrito en el propio dibujo. Y son bolas de 4,5 de radio
   sobre un trazo de 2,6: ocupan más que la línea que tapan, así que lo
   que se lee al mirar la gráfica de lejos son ellos y no ella. De ahí
   «la línea no es roja»: la línea sí, el dibujo no.

   Y esos puntos no se veían. Medidos contra la tarjeta en los cinco
   fondos de día: el amarillo daba 1,50, el verde lima 1,80, el naranja
   2,21, el verde 2,25 y el azul grisáceo 2,83, cuando lo mínimo para
   algo dibujado es 3. Ninguno llegaba, en ningún fondo claro.

   PONERLOS DEL ROJO DE LA LÍNEA ARREGLA LAS DOS COSAS A LA VEZ, y no es
   una salida por la tangente: es lo que ya hace la otra gráfica de esta
   misma pantalla. Unos centímetros más abajo, «Relación: hábitos -
   estado de ánimo» dibuja la MISMA línea —el ánimo apuntado cada día— y
   allí el trazo, las puntas y los puntos son todos del mismo rojo. Eran
   dos maneras de pintar la misma cosa en una sola pantalla.

   NO SE PIERDE NADA. El ánimo de cada día se lee por la ALTURA del
   punto, que es para lo que están las cinco caritas del lado izquierdo
   y las cinco rayas de fondo. El color repetía ese dato en un idioma
   que encima no se veía.

   Y LOS PUNTOS SIGUEN SIENDO PUNTOS: conservan el aro del color de la
   tarjeta que ya les ponía evolution.css, así que se ven como cuentas
   ensartadas en la línea. Eso importa, porque un punto marca un día
   apuntado y los días sin apuntar se saltan: sin los puntos no se
   sabría cuáles son.

   POR QUÉ AQUÍ Y NO EN evolution.css. Esa hoja también viste la
   pantalla vieja de Evolución, que sigue en pie. Este encargo es sobre
   Progreso, así que la regla se cuelga de «.rd-progreso» y no toca la
   otra.

   Y por qué basta una regla normal para ganarle al color que trae el
   dibujo: el plugin lo escribe como atributo del SVG, y cualquier regla
   de una hoja de estilos pesa más que eso.
   ========================================================== */
.rd-progreso .rd-chart__dot {
	fill: var(--rd-chart-line);
}

/* ==========================================================
   El título de arriba y su botón de compartir
   ==========================================================
   Los dos encabezados de esta pantalla —«Progreso emocional» y
   «Progreso de tus hábitos»— llevan ahora un botón de compartir al
   lado, así que los dos se visten igual.
   ========================================================== */

/* AIRE POR ENCIMA DEL TÍTULO.

   El encabezado venía de evolution.css con un margen NEGATIVO arriba.
   Allí tiene sentido: en Evolución el título es lo único que hay antes
   del contenido y sin ese tirón quedaba muy suelto.

   Aquí no. Esta pantalla empieza pegada a la barra de navegación, y con
   el tirón hacia arriba el título casi la tocaba: parecía parte de la
   barra en vez del principio de la página. Se le devuelve el aire. */
.rd-progreso .rd-evo__head--suelto {
	margin-top: var(--rd-space-4);
}

/* EL TÍTULO, A LA MISMA ALTURA QUE EL BOTÓN.

   Aquí estaba el desajuste. La fila centra a sus dos hijos, pero el
   título arrastra un margen inferior de evolution.css —el que lo
   separaba de lo que venía debajo cuando iba solo—, así que su caja es
   más alta que su letra por abajo. Al centrar la caja, la letra queda
   subida justo esa mitad de margen y el título se lee un pelín más
   arriba que el botón. Se ve poco y no se olvida una vez visto.

   Se le quita el margen: quien separa aquí es la fila entera, no el
   título. */
.rd-progreso .rd-evo__head .rd-evo__title {
	margin-bottom: 0;
}

/* ==========================================================
   Las dos partes, separadas
   ==========================================================
   Una raya y aire. Para decir que son dos cosas no hacen falta dos
   fondos ni dos recuadros: con eso la pantalla se llenaría de tarjetas
   dentro de tarjetas.

   El único sitio que sí lleva recuadro propio es la gráfica de
   relación, y no es por estética: está más abajo, en «.rd-rel», con el
   porqué entero.
   ========================================================== */

/* El aire de aquí arriba es parte de una corrección, no decoración.

   Las dos partes llevan una gráfica, y las dos gráficas dibujan el
   ánimo de los mismos días: la de arriba sobre una escala de 0 a 10 y
   la de abajo sobre una de 0 a 5. Son la misma línea a dos alturas
   distintas, así que lo único que no puede pasar es que se lean como
   una sola rejilla en dos pisos. Pegadas, el ojo compara en vertical
   antes de leer nada.

   La de arriba no se puede tocar. Lo que se hace aquí es que la de
   abajo no parezca su continuación: primero, separándolas de verdad
   —una raya y un buen hueco, no un margen de cortesía—, y luego
   metiendo la gráfica en su propio recuadro (más abajo, en «.rd-rel»).
   El lienzo de la de abajo tampoco copia ya las medidas de la de
   arriba: eso está explicado en progress.php.

   Había una tercera cosa, y era la que mejor funcionaba: entre las dos
   gráficas iba el bloque de la ayuda profesional. Con algo entero de
   por medio, las dos no cabían en una sola ojeada, y comparar dos
   alturas que no se ven a la vez es mucho más difícil.

   Ese bloque se quitó por encargo el 01-09-2026, así que el hueco lo
   tiene que poner esta regla sola. Por eso las dos medidas de aquí
   abajo subieron un escalón —de 5 a 6 el margen y de 7 a 8 el
   relleno—: no es que ahora se vea mejor con más aire, es que ese aire
   estaba haciendo un trabajo y alguien tiene que seguir haciéndolo.
   Si el bloque de la ayuda vuelve, estas dos medidas pueden volver
   también a 5 y a 7. */
.rd-progreso__parte {
	border-top: 1px solid var(--rd-border);
	margin-top: var(--rd-space-6);
	padding-top: var(--rd-space-8);
	display: flex;
	flex-direction: column;
	gap: var(--rd-space-5);
}

/* El encabezado de la segunda parte, con el mismo aire que el de la
   primera: los dos son un comienzo, no un subapartado. Y con el mismo
   sangrado que el de arriba, para que los dos títulos y los dos botones
   caigan en la misma vertical. */
.rd-progreso__cabecera {
	padding: 0 var(--rd-space-2);
}

/* ==========================================================
   «¿Necesitas ayuda profesional?», entre las dos partes
   ==========================================================
   ESTE APARTADO YA NO SE PINTA EN PROGRESO. Se quitó por encargo el
   01-09-2026 y la regla se ha dejado aquí a posta, sin borrar: si
   vuelve, vuelve colocado. No estorba a nadie porque no hay ningún
   «.rd-progreso__ayuda» en la página, y en progress.php, en el sitio
   exacto donde vivía, está apuntado cómo era y de dónde copiarlo.

   Lo que viene debajo describe cómo estaba puesto, y sigue siendo
   verdad para el día que se devuelva.

   Ya no cerraba la pantalla: cerraba la parte EMOCIONAL, que es de
   donde sale. Y tiene que notarse que es de ella y no de los hábitos,
   sin que haga falta ponerle un cartel.

   Eso se hace con la distancia, que es lo que el ojo usa para agrupar:
   pegado a lo de arriba, suelto de lo de abajo. Por arriba se le recoge
   parte del hueco de la columna; por debajo se queda entera la
   separación de «.rd-progreso__parte», que es una raya y tres dedos de
   aire. A un lado tiene un dedo y al otro cuatro: no hay duda de a cuál
   pertenece.
   ========================================================== */

.rd-progreso__ayuda {
	/* Recoge el hueco de la columna y el margen propio del bloque, y
	   deja solo un respiro. No es un capricho de medidas: si arriba y
	   abajo midieran lo mismo, este bloque flotaría entre las dos partes
	   sin ser de ninguna. */
	margin-top: calc(var(--rd-space-3) - var(--rd-space-5));
}

/* ==========================================================
   Leyenda de la gráfica
   ==========================================================
   En HTML y no dentro del dibujo. Dentro, la letra se encoge con el
   SVG y en un teléfono acaba en cinco píxeles; fuera es texto normal,
   se puede seleccionar y lo lee un lector de pantalla.
   ========================================================== */

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

.rd-leyenda__item {
	display: inline-flex;
	align-items: center;
	gap: var(--rd-space-2);
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-soft);
}

.rd-leyenda__cuadro {
	width: 12px;
	height: 12px;
	border-radius: 3px;
	flex-shrink: 0;
}

/* CADA MUESTRA TIENE LA FORMA DE SU LÍNEA, NO SOLO SU COLOR.

   Antes la del ánimo iba rayada porque su línea iba a rayas. Ahora esa
   línea es seguida —igual que la de la gráfica de arriba, que es lo que
   se ha pedido—, así que la muestra rayada mentía sobre lo que hay en
   el dibujo.

   Pero las dos no pueden distinguirse solo por el color: verde y rojo
   son justo la pareja que no ve una de cada doce personas, y en blanco
   y negro los dos cuadraditos serían el mismo gris.

   Así que se distinguen por la forma, y la forma es la de verdad: los
   hábitos son un bloque relleno, porque su línea lleva debajo una
   mancha de color; el ánimo es una raya, porque es una línea a secas.
   Quien mire el dibujo reconoce cada una sin tener que fiarse del
   color. */
.rd-leyenda__cuadro--habitos {
	background: var(--rd-habitos-linea);
}

.rd-leyenda__cuadro--animo {
	/* Una raya, no un cuadrado: se queda con el ancho y pierde el alto.
	   Se centra sola porque la fila ya centra a sus hijos. */
	height: 3px;
	border-radius: var(--rd-radius-pill);
	background: var(--rd-animo-linea);
}

/* ==========================================================
   Gráfica «Relación: Hábitos - Estado de ánimo»
   ========================================================== */

/* LA ETIQUETA DEL EJE VERTICAL: «Escala de esta gráfica».

   Es lo que queda del párrafo que avisaba de que esta escala no es la
   de la gráfica de arriba. El párrafo se ha quitado por encargo; el
   aviso no se puede quitar, porque las dos gráficas dibujan el ánimo
   con varas distintas y desde hoy además con la misma línea roja
   seguida, así que se parecen más que nunca.

   Puesta en el eje funciona mejor que en un párrafo: un párrafo debajo
   del título se lee antes de mirar el dibujo, cuando todavía no hay
   nada que comparar, y para cuando el ojo sube por el eje buscando una
   altura ya se ha olvidado. La etiqueta está justo ahí, en el eje, en
   el momento exacto.

   YA NO ES UN TEXTO DEL DIBUJO, ES TEXTO DE LA PÁGINA. Dentro del SVG
   el tamaño va en unidades del lienzo y el lienzo se encoge para caber:
   los 16 que tenía se quedaban en 12,3 píxeles de verdad a 1440, en
   10,4 en una tableta y en 7,9 en un teléfono. Es exactamente lo que
   dice el comentario de la leyenda unas líneas más arriba —dentro del
   dibujo, en un teléfono acaba en cinco píxeles— y aquí estaba pasando
   lo mismo. Fuera mide lo que dice que mide en cualquier pantalla, se
   puede seleccionar y, sobre todo, la lee un lector de pantalla: lo de
   dentro del SVG no lo leía ninguno, porque el dibujo se anuncia como
   una imagen con descripción y eso poda todo su interior.

   Tumbada con «writing-mode» y no con un giro a mano: así el navegador
   cuenta bien lo que ocupa y la centra de verdad. El medio giro de
   después es lo que la hace leerse de abajo arriba, que es como se leen
   las etiquetas de un eje.

   No hace falta reservarle sitio: el dibujo ya deja vacías las primeras
   unidades del lienzo, a la izquierda de los números del eje, y ahí es
   donde cae. Por eso va colocada encima y no en la fila: sumar un hueco
   más habría estrechado la gráfica sin necesidad. Medido, el hueco que
   le queda hasta el número del eje más cercano va de 38 píxeles en un
   ordenador a 21 en un teléfono, así que no se tocan en ningún tamaño.

   De alto va sobrada, pero no infinita: en un teléfono, que es donde
   menos sitio hay, ocupa 125 píxeles dentro de un recuadro de 181. Cabe
   un texto bastante más largo que este, no uno del doble; si algún día
   se alarga mucho, asomará por arriba y por abajo.

   Y no recibe el ratón. El recuadro entero escucha al puntero para
   abrir el globo, y una etiqueta por encima abriría un agujero por el
   que el globo se cerraría solo.

   Apagada y pequeña: es una etiqueta, no una advertencia. Aquí no se
   riñe a nadie por mirar. Va con la tinta suave, la misma de los
   números del eje y la de la leyenda, para que las tres se lean como lo
   que son: lo que rodea al dibujo. Contra el recuadro da 3,72 —entre
   3,55 y 3,97 en los cinco fondos claros, y 4,89 con Calma, donde la
   tinta suave es blanca—, frente al 2,34 que daba antes. De ahí no
   sube sin cambiar la tinta suave en tokens.css, que es la de TODO el
   texto secundario de la aplicación y no se toca desde aquí. */
.rd-rel__eje {
	position: absolute;
	top: 50%;
	left: var(--rd-space-3);
	margin: 0;
	writing-mode: vertical-rl;
	transform: translateY(-50%) rotate(180deg);
	white-space: nowrap;
	pointer-events: none;
	font-size: var(--rd-size-xs);
	line-height: 1;
	color: var(--rd-ink-soft);
}

/* El recuadro hundido de la gráfica.

   Dos motivos, y el primero es el importante.

   UNO: que no se confunda con la gráfica de la parte de arriba. Las dos
   dibujan el ánimo de los mismos días con escalas distintas —allí de 0
   a 10, aquí de 0 a 5— y las dos caen en la misma columna de la
   pantalla. Sobre el mismo fondo blanco y sin marco, son dos rejillas
   iguales una encima de otra y el ojo las recorre en vertical como si
   fueran la misma. Con un fondo propio y un borde alrededor, esta pasa
   a ser un objeto aparte: se sigue pudiendo mirar, pero ya no parece la
   continuación de la otra.

   DOS: el globo. Vive dentro de esta caja y ahora tiene un margen por
   el que asomarse sin salirse del recuadro.

   El globo se coloca respecto a esta caja, así que además tiene que ser
   el punto de referencia. */
.rd-rel {
	position: relative;
	padding: var(--rd-space-3);
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-md);
	background: var(--rd-surface-alt);
}

/* Las rayas de fondo, un punto más marcadas que en la gráfica de
   arriba: aquí el fondo ya no es blanco, y con el gris de siempre
   apenas se distinguían del recuadro. */
.rd-rel__svg .rd-chart__guide {
	stroke: var(--rd-border-strong);
}

.rd-rel__svg {
	display: block;
	width: 100%;
	height: auto;
	/* El ratón se sigue por todo el recuadro y no solo encima de las
	   líneas: apuntar a un trazo de dos píxeles es imposible con el
	   ratón, y con el dedo ni te cuento. */
	pointer-events: all;
	/* Y en el móvil, el dedo tiene que poder seguir desplazando la
	   página hacia abajo: sin esto, arrastrar sobre la gráfica se queda
	   atrapado en ella. */
	touch-action: pan-y;
}

/* Las dos líneas.

   El grosor no se escala con el dibujo. Un SVG de 620 de ancho metido
   en una columna de 400 se encoge, y con él el trazo: los 2 píxeles
   pedidos se quedaban en 1,3 en el ordenador y en menos de 1 en el
   móvil. Con «non-scaling-stroke» el trazo mide 2 píxeles de verdad en
   cualquier pantalla, que era justo lo que hacía falta. */
.rd-rel__linea {
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.rd-rel__linea--habitos {
	stroke: var(--rd-habitos-linea);
}

/* SEGUIDA, COMO LA DE LA GRÁFICA DE ARRIBA.

   Iba a rayas para que no se confundiera con la de hábitos cuando las
   dos se cruzan. Ahora va seguida por encargo, y con razón: es la misma
   línea que la de la gráfica de la parte emocional, el mismo ánimo de
   los mismos días, y allí es roja y seguida. Dibujar la misma cosa de
   dos maneras distintas en la misma pantalla hacía dudar de si era la
   misma cosa.

   Y desde hoy es además UN SOLO trazado, como el de arriba, en vez de
   uno por tramo: mismo rojo, mismo grosor, mismas puntas redondas, sin
   guiones. Lo único que no se ha igualado son los huecos de los días
   sin registro, que allí se saltan y aquí se dejan a la vista. El
   porqué está en progress.php, donde se monta la línea.

   Lo que las separa ahora no es el trazo, es el cuerpo: la de hábitos
   lleva debajo una mancha de color y esta no. Se distinguen igual de
   bien donde se cruzan, y además se distinguen en blanco y negro. */
.rd-rel__linea--animo {
	stroke: var(--rd-animo-linea);
}

/* El relleno de hábitos, al diez por ciento. Lo justo para que se vea
   qué línea tiene cuerpo; más oscuro se comería la línea del ánimo
   cada vez que pasara por encima. */
.rd-rel__area {
	fill: var(--rd-habitos-linea);
	fill-opacity: 0.1;
	stroke: none;
}

/* Un solo día de hábitos: no hay tramo que dibujar, así que se pinta el
   punto. Sin esto, ese día no existiría en la gráfica. */
.rd-rel__solo--habitos {
	fill: var(--rd-habitos-linea);
}

/* LAS PUNTAS DE LA LÍNEA DEL ÁNIMO.

   Un punto en el primer día y en el último de cada racha de días
   apuntados. No son adorno: son lo que convierte un hueco en un dato.
   Sin ellos, la línea parece un dibujo que se ha roto; con ellos se lee
   que el registro llega hasta ese día y que después no hay días que
   unir, que es la verdad.

   Del mismo rojo y sin borde, para que sean la propia línea y no otra
   capa de información encima: los que caen en medio de una racha
   desaparecen bajo el trazo y solo se ven los de los extremos, que son
   los únicos que dicen algo.

   Del mismo tamaño que el punto del día suelto de hábitos, que es la
   otra vez que en esta gráfica un día se dibuja como un punto: son la
   misma idea y no hay motivo para que se vean distintos. Y de ahí no
   suben, por lo mismo que los puntos del ratón solo salen al pasar por
   encima: en una gráfica de treinta y un días, cualquier bola de más
   tapa la forma de la línea, que es lo que se ha venido a mirar. */
.rd-rel__punta--animo {
	fill: var(--rd-animo-linea);
}

/* Los puntos y la raya vertical solo salen al pasar el ratón: en una
   gráfica de treinta y un días, treinta y un puntos por línea son
   sesenta y dos bolas y ya no se ve la forma. */
.rd-rel__guia,
.rd-rel__punto {
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--rd-transition);
}

.rd-rel.is-activa .rd-rel__guia,
.rd-rel.is-activa .rd-rel__punto {
	opacity: 1;
}

/* Cuando el día no tiene ese dato, el punto se queda escondido aunque
   el globo esté abierto. */
.rd-rel__punto.is-oculto {
	opacity: 0 !important;
}

.rd-rel__guia {
	fill: none;
	stroke: var(--rd-border-strong);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

/* El borde del color del fondo separa el punto de su línea. Es el fondo
   del recuadro hundido, no el de la tarjeta: con el otro se veía un aro
   más claro alrededor de cada bola. */
.rd-rel__punto {
	stroke: var(--rd-surface-alt);
	stroke-width: 2;
}

.rd-rel__punto--habitos {
	fill: var(--rd-habitos-linea);
}

.rd-rel__punto--animo {
	fill: var(--rd-animo-linea);
}

/* El globo.

   Va por encima del dibujo y no lo toca: si recibiera el ratón, al
   colocarse bajo el puntero se taparía a sí mismo y empezaría a
   parpadear. */
.rd-rel__globo {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	pointer-events: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 132px;
	padding: var(--rd-space-2) var(--rd-space-3);
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-sm);
	background: var(--rd-surface);
	box-shadow: var(--rd-shadow-card);
	font-size: var(--rd-size-xs);
	color: var(--rd-ink);
	/* El desplazamiento lo pone el guion en estas dos variables, no
	   tocando «left» y «top»: así la posición y el centrado viven en
	   sitios distintos y no se pisan. */
	transform: translate(var(--rd-globo-x, 0), var(--rd-globo-y, 0));
}

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

.rd-rel__globo-dia {
	font-weight: 600;
	margin-bottom: 2px;
}

.rd-rel__globo-fila {
	display: flex;
	align-items: center;
	gap: var(--rd-space-2);
	white-space: nowrap;
}

.rd-rel__globo-et {
	color: var(--rd-ink-soft);
}

.rd-rel__globo-val {
	margin-left: auto;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* ==========================================================
   Constancia por hábito
   ==========================================================
   UNA FILA POR HÁBITO, COMO «EMOCIONES MÁS PRESENTES».

   Eran tarjetas en rejilla, cada una con su número grande. Se leían
   bien de una en una y fatal de tres en tres: cada barra empezaba en
   una vertical distinta, así que para saber cuál iba más adelantado
   había que leer los tres porcentajes y compararlos de cabeza. Puestas
   en fila, todas arrancan en el mismo sitio y la más larga se ve sola.

   Y son las mismas piezas y el mismo orden que las listas de la parte
   emocional, que están unos centímetros más arriba en esta pantalla:
   de qué es, la barra, y el número al final. Una sola manera de enseñar
   una lista con barras en toda la pantalla.

   No se reutiliza «.rd-rank» directamente, aunque se parezcan: aquella
   lleva un icono delante y aquí no hay icono, y su primera columna está
   pensada para una palabra («Bien», «Orgulloso/a») mientras que aquí
   caben dos líneas con el nombre y el dato en bruto. Colgarse de sus
   medidas sería atarse a los cambios de otra lista.
   ========================================================== */

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

.rd-constancia__item {
	display: grid;
	/* Nombre, barra y porcentaje. El nombre tiene un tope para que un
	   hábito de nombre largo no se coma la barra, y la barra se queda
	   con todo lo que sobre. El porcentaje va en ancho fijo para que
	   los de dos y tres cifras acaben en la misma vertical. */
	grid-template-columns: minmax(96px, 150px) 1fr 44px;
	align-items: center;
	gap: var(--rd-space-3);
	min-width: 0;
}

.rd-constancia__quien {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.rd-constancia__nombre {
	font-size: var(--rd-size-sm);
	line-height: var(--rd-leading-snug);
	color: var(--rd-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* El dato en bruto, debajo del nombre y en pequeño. Sin él, un cien por
   cien de algo de una vez por semana y otro de algo diario se leen
   igual, y no valen lo mismo.

   Va con el nombre y no en columna propia porque no es otro número que
   comparar: es de qué va la fila. */
.rd-constancia__bruto {
	font-size: 12px;
	line-height: var(--rd-leading-snug);
	color: var(--rd-ink-muted);
	font-variant-numeric: tabular-nums;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* El canal, del mismo alto que el de las listas de arriba: son la misma
   clase de barra y no hay motivo para que se vean distintas. */
.rd-constancia__canal {
	display: block;
	height: 12px;
	border-radius: var(--rd-radius-pill);
	background: var(--rd-surface-alt);
	overflow: hidden;
}

.rd-constancia__barra {
	display: block;
	height: 100%;
	border-radius: var(--rd-radius-pill);
	/* Un mínimo para que un cero por ciento no desaparezca del todo: la
	   fila existe aunque el número sea cero, y una barra sin nada se lee
	   como un fallo de la pantalla. */
	min-width: 3px;
	/* El color del hábito, el mismo con el que se marca en la tabla de
	   Hábitos: es lo que permite reconocer la fila sin leer el nombre. */
	background: var(--rd-habito, var(--rd-primary));
}

/* El porcentaje, al final de la barra. Ya no va enorme: en fila, lo que
   se compara es el largo de las barras, y el número está para leer el
   dato exacto de una, no para gritar. */
.rd-constancia__pct {
	font-size: var(--rd-size-sm);
	font-weight: 600;
	color: var(--rd-ink);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* ==========================================================
   Constancia por día de la semana
   ==========================================================
   Siete anillos en fila. El canal de fondo es el mismo color del
   anillo rebajado, nunca gris: un canal gris al lado de un arco de
   color parece una barra a medio cargar, y lo que es es la vuelta
   entera del día.
   ========================================================== */

/* LOS SIETE, EN EL MEDIO Y NO REPARTIDOS DE BORDE A BORDE.

   Iban con el hueco repartido, así que se estiraban hasta tocar los dos
   lados de la tarjeta: el lunes pegado al borde izquierdo, el domingo
   al derecho y cinco huecos enormes en medio. Siete cosas separadas por
   más aire del que ocupan dejan de leerse como una fila y pasan a ser
   siete cosas sueltas.

   Centrados y con un hueco fijo se leen como lo que son: una semana. Y
   el bloque queda centrado en su tarjeta, que es lo que se ha pedido.

   El hueco es en dos medidas por si algún día doblan a dos filas: la
   primera es la separación entre filas y la segunda la de los lados. */
.rd-semana {
	list-style: none;
	margin: var(--rd-space-3) 0 var(--rd-space-2);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--rd-space-4) var(--rd-space-2);
}

.rd-semana__dia {
	/* Dos colores y no siete. Si cada día tuviera el suyo, el rojo
	   sería un color más y dejaría de significar nada; así, lo único
	   que dice el color es «estos son los que menos». */
	--rd-anillo: var(--rd-frost);
	/* Ni se estira ni se encoge: sesenta y cuatro píxeles siempre. El
	   «0 1 62px» de antes dejaba que se encogieran cuando la columna
	   era estrecha, y un anillo de cuarenta píxeles no tiene sitio
	   dentro para su propio porcentaje. Ahora, si no caben, saltan de
	   fila; y caber pequeños e ilegibles no es caber.

	   Sesenta y cuatro y no más: los siete con su hueco suman 496 y la
	   tarjeta da 532 en un ordenador. Con setenta y dos —que se probó—
	   suman 552, el domingo se caía a una segunda fila él solo y la
	   semana dejaba de leerse como una semana. */
	flex: 0 0 64px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--rd-space-1);
}

.rd-semana__dia.es-bajo {
	/* El rojo de la marca, no uno nuevo. Y no es un color de error: no
	   hay nada que corregir, solo un día que destaca. */
	--rd-anillo: var(--rd-primary);
}

.rd-semana__anillo {
	position: relative;
	width: 100%;
	/* Un poco más que antes. El dibujo de dentro no cambia —sigue
	   siendo un lienzo de 62— así que todo crece a la vez y no hay nada
	   que recolocar. */
	max-width: 64px;
	aspect-ratio: 1;
}

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

/* El aro, más gordo: de 8 a 10 sobre un lienzo de 62. Con el anillo
   pequeño y el trazo fino, el arco de un día al treinta por ciento era
   un rasguño y había que fijarse para verlo. */
.rd-semana__canal,
.rd-semana__arco {
	fill: none;
	stroke-width: 10;
	stroke-linecap: round;
}

/* El canal, algo menos transparente. Es el que dice hasta dónde llega
   la vuelta entera: si no se ve, el arco no se lee como una parte de
   algo, solo como una rayita torcida. Sin pasarse, que entonces
   compite con el arco y parece que hay dos datos. */
.rd-semana__canal {
	stroke: var(--rd-anillo);
	opacity: 0.24;
}

.rd-semana__arco {
	stroke: var(--rd-anillo);
	/* Desde arriba y en el sentido de las agujas del reloj. Un arco de
	   SVG arranca a las tres, así que se gira un cuarto de vuelta hacia
	   atrás para que empiece a las doce. */
	transform: rotate(-90deg);
	transform-origin: 50% 50%;
}

/* El número, dentro del anillo y un punto más grande: es el dato, y
   ahora hay sitio de sobra para él. */
.rd-semana__pct {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 600;
	color: var(--rd-ink);
	font-variant-numeric: tabular-nums;
}

.rd-semana__abrev {
	font-size: 13px;
	color: var(--rd-ink-soft);
}

@media (max-width: 599px) {
	/* En un teléfono la semana se dobla en dos filas: cuatro y tres.

	   Los siete seguidos no caben —en una pantalla de 375 la tarjeta da
	   unos 317 píxeles y los siete piden 496—, así que o se doblan o se
	   encogen hasta que el porcentaje de dentro no se lee. Se doblan.

	   La medida va en porcentaje y no en píxeles para que sean cuatro
	   exactos por fila, sea cual sea el teléfono: con una medida fija,
	   en una pantalla un poco más ancha entra un quinto y la segunda
	   fila se queda con dos. Y la segunda fila va centrada, que con tres
	   sueltos a la izquierda parece que falta uno. */
	.rd-semana__dia {
		flex: 0 0 calc(25% - var(--rd-space-2));
	}

	/* La constancia por hábito se dobla en dos filas: arriba el nombre y
	   el porcentaje, y la barra debajo a todo lo ancho. En una pantalla
	   estrecha, con las tres cosas en línea la barra se queda en un
	   palito de treinta píxeles y deja de decir nada.

	   Es la misma forma que toman aquí las listas de ánimos y emociones,
	   que están más arriba en esta pantalla.

	   LA FILA Y LA COLUMNA VAN ESCRITAS LAS DOS, a propósito. Diciendo
	   solo la columna, el navegador coloca cada pieza en la primera
	   hueco libre por orden de aparición: la barra ocupa las dos
	   columnas, así que se baja a la segunda fila, y el porcentaje —que
	   viene después en el HTML— se cae a una TERCERA fila él solo. Se
	   veía: el número aparecía debajo de la barra en vez de al lado del
	   nombre. */
	/* Y más aire entre hábito y hábito. Cada uno ocupa ahora dos filas,
	   así que con el hueco de antes la barra de uno quedaba tan cerca
	   del nombre del siguiente como de su propio nombre, y las tres
	   fichas se leían como una lista corrida. */
	.rd-constancia {
		gap: var(--rd-space-4);
	}

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

	.rd-constancia__quien {
		grid-row: 1;
		grid-column: 1;
	}

	.rd-constancia__pct {
		grid-row: 1;
		grid-column: 2;
	}

	.rd-constancia__canal {
		grid-row: 2;
		grid-column: 1 / -1;
	}
}

/* ==========================================================
   «Ver tus progresos anteriores» (los dos desplegables)
   ==========================================================
   Progreso enseña el mes en curso y se reinicia el día 1. Lo de antes
   no se borra, pero dejaba de poder mirarse: esto es la puerta de
   atrás.

   SON DOS, uno por parte: el de emociones cuelga del panel emocional y
   el de hábitos, del de hábitos. Comparten estas reglas porque son la
   misma puerta puesta dos veces; lo que cambia es lo que hay detrás.

   Y VAN CERRADOS. Dentro puede haber doce meses con un panel entero
   cada uno; abiertos de serie, llegar a lo siguiente sería un viaje.
   ========================================================== */

.rd-historial {
	margin-top: var(--rd-space-4);
}

/* LA CAJA. Alba, 01-09-2026: «quiero que el botón de "ver tus progresos
   anteriores" ... vaya en una cajita para que sean visibles».

   Antes era una línea de texto con una raya debajo, y así no parecía un
   botón: parecía un título más de la pantalla, y en una pantalla que ya
   tiene cuatro títulos se perdía. En caja —fondo, borde y esquinas
   redondeadas— se lee como lo que es: algo en lo que se entra.

   EL MATERIAL ES EL DE LAS TARJETAS, a propósito: el mismo fondo y el
   mismo radio, para que no aparezca una textura nueva en una pantalla
   que ya está llena de tarjetas. Lo que la distingue de ellas es que
   lleva borde y NO lleva sombra. Las tarjetas de datos flotan sobre el
   papel; esta está apoyada en él, que es como se comporta algo que se
   pulsa.

   LA FILA ENTERA ES EL SITIO DONDE PULSAR. La flecha va al final,
   separada del título por todo el hueco que sobre —eso hace
   «space-between»—, así que no hay que acertarle a un triangulito de
   diez píxeles. En un móvil eso es la diferencia entre abrirlo a la
   primera y darle tres veces.

   El triángulo que pone el navegador por su cuenta se quita en
   «list-style» y otra vez en «-webkit-details-marker»: hacen falta las
   dos, porque Safari no hace caso de la primera. */
.rd-historial__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rd-space-3);
	padding: var(--rd-space-4);
	/* Cuarenta y ocho píxeles de alto pase lo que pase: es la medida
	   mínima de algo que se pulsa con el dedo, y con el relleno de
	   móvil —que encoge— la fila se quedaba en cuarenta y seis. */
	min-height: 48px;
	background: var(--rd-surface);
	border: 1px solid var(--rd-border-strong, var(--rd-border));
	border-radius: var(--rd-radius-md);
	cursor: pointer;
	list-style: none;
	user-select: none;
}

/* Al abrirse, la caja deja de ser un botón suelto y pasa a ser la tapa
   de lo que hay debajo: se le cuadran las esquinas de abajo y se le
   quita la raya que la cerraba, para que la caja y lo desplegado sean
   un solo recuadro y no dos pegados. */
.rd-historial[open] .rd-historial__cabecera {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom-color: transparent;
}

/* Se pulsa, y tiene que notarse antes de pulsarla. */
.rd-historial__cabecera:hover {
	background: var(--rd-surface-alt);
}

@media (hover: none) {
	.rd-historial__cabecera:active {
		background: var(--rd-surface-alt);
	}
}

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

/* El foco del teclado se ve. Un desplegable que solo se puede abrir
   con el ratón deja fuera a quien navega con el tabulador. */
.rd-historial__cabecera:focus-visible {
	outline: 2px solid var(--rd-primary);
	outline-offset: 2px;
	border-radius: var(--rd-radius-sm);
}

.rd-historial__titulo {
	font-weight: 600;
	font-size: 1rem;
	color: var(--rd-ink);
}

/* La flecha gira al abrir: es la única señal de si está abierto o
   cerrado, porque el texto no cambia. */
.rd-historial__flecha {
	flex: none;
	font-size: 1.35rem;
	line-height: 1;
	color: var(--rd-ink-soft, var(--rd-ink));
	transform: rotate(90deg);
	transition: transform 200ms ease;
}

.rd-historial[open] .rd-historial__flecha {
	transform: rotate(270deg);
}

@media (prefers-reduced-motion: reduce) {
	.rd-historial__flecha {
		transition: none;
	}
}

/* Lo desplegado es la parte de abajo de la misma caja: se cierra por
   los lados y por abajo con el mismo borde, así que al abrir no
   aparecen dos recuadros pegados sino uno que ha crecido.

   Sin fondo propio, porque dentro ya vienen las tarjetas de cada mes
   con el suyo, y dos fondos uno encima de otro embarran los dos. */
.rd-historial__cuerpo {
	padding: var(--rd-space-4) var(--rd-space-2) var(--rd-space-5);
	display: flex;
	flex-direction: column;
	gap: var(--rd-space-7);
	border: 1px solid var(--rd-border-strong, var(--rd-border));
	border-top: none;
	border-bottom-left-radius: var(--rd-radius-md);
	border-bottom-right-radius: var(--rd-radius-md);
}

/* La línea que explica por qué esto existe. Va en gris y pequeña: es
   una aclaración, no un dato. */
.rd-historial__nota {
	margin: 0 var(--rd-space-2) var(--rd-space-2);
	font-size: 0.9rem;
	color: var(--rd-ink-soft, var(--rd-ink));
}

/* Cada mes, con su título y su panel debajo.

   El hueco entre el título y su panel es menor que el hueco entre un
   mes y el siguiente —«space-3» aquí dentro contra «space-7» en el
   cuerpo—, que es lo que agrupa cada mes sin tener que ponerle un
   recuadro alrededor. La distancia es lo que el ojo usa para agrupar,
   igual que en el resto de esta pantalla. */
.rd-historial__mes {
	display: flex;
	flex-direction: column;
	gap: var(--rd-space-3);
}

/* El título de cada mes.

   Es el que manda sobre todo lo que viene debajo —la gráfica y las dos
   listas de ese mes— y tiene que LEERSE así.

   Aquí ponía «font-weight: 700» y nada más, y con eso heredaba la letra
   del cuerpo (Inter). Los títulos que agrupa, en cambio, son
   «.rd-evo__heading»: Montserrat 800. Medido en pantalla, los dos
   acababan en 19 píxeles, así que «Progreso emocional de agosto» se
   leía MÁS FLOJO que «Así has sentido agosto», que cuelga de él. La
   jerarquía se veía justo del revés.

   Ahora lleva la misma letra de titular que el resto de la pantalla y
   un escalón más de tamaño que sus hijos, que es lo que lo pone por
   encima sin necesidad de gritar. El sangrado lateral es el de las
   cabeceras de las partes, para que caiga en la misma vertical. */
.rd-historial__mes-titulo {
	margin: 0;
	padding: 0 var(--rd-space-2);
	font-family: var(--rd-font-display);
	font-weight: var(--rd-weight-display);
	font-size: calc(var(--rd-size-lg) * 1.15);
	color: var(--rd-ink);
}

/* Los títulos de dentro del panel arrancan pegados a su tarjeta: el
   hueco ya lo pone la rejilla. */
.rd-historial__mes .rd-evo__heading {
	margin-top: 0;
}

/* ==========================================================
   LOS LOGROS DE ÁNIMO Y EMOCIONES, PLEGADOS
   ==========================================================
   Son veintiocho —cinco ánimos y veintitrés emociones— y enseñan el
   mismo recuento que ya sale en las gráficas de esta misma pantalla.
   Sueltos en la lista la tapaban entera, así que estuvieron quitados.

   Quitados, sin embargo, seguían dando estrellas y avisando de ellas: el
   aviso llevaba a una pantalla donde esa estrella no se pintaba, y sus
   reddies se quedaban sin poder recoger. Plegados en la misma cajita que
   «Ver tus progresos anteriores» la lista sigue corta y la estrella
   existe, que es lo único que hacía falta.

   La cajita es la de arriba, entera y sin tocar. Aquí solo se quita el
   relleno del cuerpo para que la lista de logros —que ya trae su propio
   borde— encaje dentro y no se vea un recuadro dentro de otro. */

.rd-historial--logros .rd-historial__cuerpo {
	padding: 0;
	gap: 0;
}

.rd-historial--logros .rd-logros {
	border: 0;
	border-radius: 0 0 var(--rd-radius-md) var(--rd-radius-md);
}

/* El título empuja, para que lo que venga detrás quede junto a la
   flecha y no suelto en medio de la fila. */
.rd-historial--logros .rd-historial__titulo {
	flex: 1 1 auto;
}

/* «2 estrellas por recoger».

   Es la razón por la que el desplegable está abierto, así que tiene que
   verse antes que nada: va en el color de la marca sobre su fondo claro,
   que en esta aplicación es siempre lo mismo —algo que te espera—.

   Solo aparece cuando hay algo que recoger. Un contador que casi siempre
   pone cero enseña a no mirarlo. */
.rd-historial__cobrar {
	flex: none;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--rd-badge-bg);
	color: var(--rd-primary);
	font-size: 0.8rem;
	font-weight: 600;
	white-space: nowrap;
}