/**
 * Estilos del diario.
 */

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

.rd-diary__grid {
	display: grid;
	gap: var(--rd-space-5);
	align-items: start;
}

.rd-diary__side {
	display: grid;
	gap: var(--rd-space-5);
	align-content: start;
	min-width: 0;
}

/* ==========================================================
   Calendario
   ========================================================== */

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

.rd-calendar__month {
	font-family: var(--rd-font-display);
	font-weight: var(--rd-weight-display);
	font-size: 1.0625rem;
	letter-spacing: -0.02em;
	margin: 0;
	color: var(--rd-ink);
	text-align: center;
	flex: 1;
}

.rd-calendar__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	color: var(--rd-ink-soft);
	flex-shrink: 0;
	transition: background var(--rd-transition), color var(--rd-transition);
}

.rd-calendar__nav svg {
	width: 18px;
	height: 18px;
}

.rd-calendar__nav:hover {
	background: var(--rd-surface-alt);
	color: var(--rd-primary);
}

.rd-calendar__nav.is-off {
	visibility: hidden;
}

.rd-calendar__weekdays,
.rd-calendar__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	/* Más aire entre días: con las caritas más pequeñas, el hueco es lo
	   que hace que el mes se lea de un vistazo en vez de como un
	   bloque apretado. */
	column-gap: 8px;
	row-gap: 14px;
}

.rd-calendar__weekdays {
	margin-bottom: 6px;
}

.rd-calendar__weekdays span {
	text-align: center;
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-muted);
	padding: 2px 0;
}

/* --- Un día del calendario --- */

.rd-day {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	text-decoration: none;
	padding: 2px 0;
	border-radius: var(--rd-radius-sm);
	transition: transform var(--rd-transition);
}

.rd-day__disc {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 78%;
	max-width: 42px;
	margin: 0 auto;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: var(--rd-surface-alt);
	border: 1.5px solid transparent;
	transition: border-color var(--rd-transition), transform var(--rd-transition);
}

/* Con caras que no son un círculo —la de Reddie tiene orejas— el hueco
   no puede recortar ni pintar su propio círculo detrás: se comía las
   puntas y dibujaba un aro que no pertenece a la cara. */
.rd-day.has-entry .rd-day__disc {
	overflow: visible;
	background: transparent;
	border-color: transparent;
}

.rd-day__num {
	font-size: var(--rd-size-xs);
	line-height: 1;
	color: var(--rd-ink-muted);
}

.rd-day.is-empty {
	visibility: hidden;
}

/* Un día con registro se pinta del color de su estado de ánimo. */
.rd-day.has-entry .rd-day__disc {
	background: transparent;
}

.rd-day.has-entry .rd-day__num {
	color: var(--rd-ink-soft);
}

.rd-day:hover .rd-day__disc {
	transform: scale(1.08);
	border-color: var(--rd-border-strong);
}

/* Hoy: un punto debajo del número, no un aro.
   El aro competía con el del día elegido y con el contorno del ánimo,
   y tres aros en el mismo sitio no se distinguen entre sí. */
.rd-day.is-today .rd-day__num {
	position: relative;
	color: var(--rd-primary);
	font-weight: 600;
}

.rd-day.is-today .rd-day__num::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -7px;
	width: 5px;
	height: 5px;
	margin-left: -2.5px;
	border-radius: 50%;
	background: var(--rd-primary);
}

/* Sitio para el punto: sin esto se sale de la casilla y las filas del
   calendario quedan pegadas. */
.rd-day {
	padding-bottom: 9px;
}

.rd-day.is-selected .rd-day__disc {
	border-color: var(--rd-primary);
	box-shadow: 0 0 0 3px var(--rd-highlight);
}

/* HOY, MIENTRAS ESTÁ SIN APUNTAR: UN ARO DE LÍNEA CONTINUA.

   Alba, 28-08-2026: «el día actual se ve vacío; ponle un círculo como
   el del resto de los días pero con línea continua en vez de
   discontinua».

   Y se veía vacío de verdad: los días de más adelante llevan su aro de
   puntos, los pasados llevan su carita, y hoy —que es justo el que hay
   que rellenar— no llevaba nada más que un punto de cinco píxeles
   debajo del número. El hueco que más invita a tocar era el único sin
   forma.

   CONTINUA Y NO DE PUNTOS, porque son dos cosas distintas: los puntos
   dicen «todavía no toca» y hoy sí toca. Y del color de la marca, que
   es el mismo del número: así el aro y el número dicen lo mismo.

   PERO SOLO SI NO HAY REGISTRO, y esa es la parte que hay que
   respetar. En cuanto se apunta el día, la casilla se llena con la
   carita del ánimo, y ahí el aro sobra: la carita no es un círculo
   perfecto —la de Reddie tiene orejas—, así que el aro y la cara se
   desencuadran, y en el móvil los dos bordes quedan a un pelo uno de
   otro. Fue el motivo por el que se quitó en su día, y sigue siendo
   bueno; lo que estaba mal era quitarlo también cuando no hay cara. */
.rd-day.is-today:not(.has-entry) .rd-day__disc {
	background: transparent;
	border: 2px solid var(--rd-primary);
}

/* Con aro, el punto de debajo sobra: dos marcas para lo mismo en la
   misma casilla se leen como dos cosas distintas. */
.rd-day.is-today:not(.has-entry) .rd-day__num::after {
	display: none;
}

/* Y con registro, se queda como estaba: manda la carita. */
.rd-day.is-today.has-entry .rd-day__disc,
.rd-day.is-today.has-entry.is-selected .rd-day__disc {
	border-color: transparent;
	box-shadow: none;
}

.rd-caritas--reddie .rd-day.is-today .rd-face {
	filter: none;
}

.rd-day.is-future .rd-day__num {
	opacity: 0.5;
}

.rd-day.is-future .rd-day__disc {
	background: transparent;
	border: 1.5px dashed var(--rd-border);
}

/* Una fecha especial dibuja un anillo continuo del color elegido,
   incluso en días futuros, que por defecto van con línea discontinua. */
.rd-day.has-special .rd-day__disc {
	border: 2.5px solid var(--rd-ring, var(--rd-primary));
	border-style: solid;
}

/* --- Leyenda --- */

.rd-legend {
	list-style: none;
	margin: var(--rd-space-4) 0 0;
	padding: var(--rd-space-4) 0 0;
	border-top: 1px solid var(--rd-border);
	display: flex;
	flex-wrap: wrap;
	gap: var(--rd-space-3);
}

.rd-legend__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-soft);
}

.rd-legend__dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	flex-shrink: 0;
}

/* ==========================================================
   Registro del día
   ========================================================== */

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

.rd-entry__question {
	font-family: var(--rd-font-display);
	font-weight: var(--rd-weight-display);
	font-size: 1.5rem;
	letter-spacing: -0.03em;
	margin: 0 0 4px;
	color: var(--rd-ink);
	line-height: 1.15;
}

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

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

.rd-entry__legend {
	display: block;
	font-size: var(--rd-size-sm);
	font-weight: 600;
	color: var(--rd-ink);
	margin-bottom: var(--rd-space-3);
	padding: 0;
}

.rd-entry fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 var(--rd-space-5);
}

.rd-entry__actions {
	margin-top: var(--rd-space-5);
}

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

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

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

/* --- Estados de ánimo --- */

.rd-moods__row {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--rd-space-2);
}

.rd-mood {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	text-align: center;
}

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

.rd-mood__face {
	display: block;
	width: 52px;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	transition: transform var(--rd-transition), filter var(--rd-transition);
}

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

.rd-mood:hover .rd-mood__face {
	transform: scale(1.06);
}

/* El elegido lleva un contorno que sigue la forma de la cara, no un
   aro. Con la cara de Reddie, un círculo alrededor no corresponde a
   nada: la silueta tiene orejas.

   Se hace con cuatro sombras planas en las cuatro direcciones, que es
   la única manera de que un contorno siga el dibujo y no la caja.

   El color sale de la tinta del tema: marrón sobre fondo claro y
   blanco sobre el fondo Cielo, sin tener que decirlo dos veces. */
.rd-mood input:checked + .rd-mood__face {
	filter:
		drop-shadow(3px 0 0 var(--rd-ink))
		drop-shadow(-3px 0 0 var(--rd-ink))
		drop-shadow(0 3px 0 var(--rd-ink))
		drop-shadow(0 -3px 0 var(--rd-ink))
		drop-shadow(2.1px 2.1px 0 var(--rd-ink))
		drop-shadow(-2.1px 2.1px 0 var(--rd-ink))
		drop-shadow(2.1px -2.1px 0 var(--rd-ink))
		drop-shadow(-2.1px -2.1px 0 var(--rd-ink));
}

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

.rd-mood__label {
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-soft);
	line-height: 1.2;
}

.rd-mood input:checked ~ .rd-mood__label {
	color: var(--rd-ink);
}

/* --- Emociones --- */

/* La leyenda de un fieldset no acepta bien los flotantes,
   así que se reparte con flex. */
.rd-emotions > .rd-entry__legend {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--rd-space-3);
	width: 100%;
}

.rd-emotions__count {
	font-weight: 400;
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-muted);
	white-space: nowrap;
}

.rd-emotions__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: var(--rd-space-2);
}

/* ----------------------------------------------------------
   Las pastillas, cada una de su color
   ----------------------------------------------------------
   Cada emoción tiene tres tonos elegidos a mano: el relleno, el
   acento y la tinta. No están escritos aquí. Viven en el catálogo del
   plugin —Reddie_Emotions— y llegan a cada pastilla como tres
   variables, «--rd-emo-fondo», «--rd-emo-acento» y «--rd-emo-texto»,
   que pone Reddie_Emotions::css_variables() colgadas de la hoja de
   tokens, igual que los colores de los ánimos.

   Por eso aquí no hay veintidós reglas sino una de cada cosa: se dice
   DÓNDE va cada tono, una vez, y vale para las veintidós. Escritos a
   mano en esta hoja, cambiar un color obligaría a tocar dos archivos,
   y el día que alguien tocase solo uno el catálogo diría una cosa y
   la pantalla enseñaría otra.

   Cada var() lleva detrás el color de siempre. Una emoción sin
   colores —el catálogo se puede ampliar por filtro— sale con la
   pastilla crema de antes, entera y legible, en vez de a medio
   pintar.

   Y todo lo que se ve DENTRO de la pastilla sale de esos tres tonos y
   no de los del tema. Es lo que hace que se lea igual de día y de
   noche: la pastilla es una isla de color y Calma no la tiñe, así que
   el nombre siempre cae sobre el mismo relleno. Medidos los
   veintidós, el nombre sobre su relleno va de 6,53:1 —Motivado/a, el
   más justo— a 9,79:1, muy por encima del 4,5 que pide un texto. Y
   son los mismos números con Calma puesto.
   ---------------------------------------------------------- */

.rd-emotion {
	cursor: pointer;
}

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

.rd-emotion__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: var(--rd-space-3) var(--rd-space-2);
	border: 1px solid var(--rd-emo-acento, var(--rd-border));
	border-radius: var(--rd-radius-md);
	background: var(--rd-emo-fondo, var(--rd-surface));
	text-align: center;
	transition: all var(--rd-transition);
	height: 100%;
}

/* Al pasar por encima, el borde se pone de la tinta.
   El acento no vale para avisar de nada: contra su propio relleno,
   diecisiete de los veintidós no llegan ni a 3:1 —el de Tranquilo/a
   se queda en 1,22, casi el mismo color que su fondo—, así que se le
   deja solo rematar la pastilla. La tinta, que es la que se lee, es
   la única de las tres que se ve siempre. */
.rd-emotion:hover .rd-emotion__body {
	border-color: var(--rd-emo-texto, var(--rd-border-strong));
}

/*
 * Elegida: un marco oscuro de dos píxeles.
 *
 * Son dos y no uno para que se distinga de lejos de las otras
 * veintiuna, y se hacen con el borde de siempre más un contorno
 * pegado por fuera, no subiendo el borde a 2px: el borde ocupa sitio,
 * así que al elegir la pastilla crecería un píxel por cada lado y la
 * fila entera daría un salto. El contorno no ocupa nada.
 *
 * Y contorno y no sombra porque la sombra ya está pedida por el foco
 * del teclado, dos líneas más abajo: si las dos escribieran en
 * «box-shadow», elegir con el teclado apagaría una de las dos y no
 * habría forma de saber cuál.
 *
 * El marco va en la tinta de la emoción, que contra su propio relleno
 * mide de 6,53:1 a 9,79:1, cuando a un elemento así le basta con 3:1.
 * Y de noche mide igual, porque las dos son de la emoción.
 *
 * El relleno NO cambia al elegir. Cambiarlo sería teñir la emoción de
 * otro color, y el color es justo lo que la nombra.
 */
/*
 * ELEGIDA: SU COLOR A TOPE, Y UN REBORDE GRUESO.
 *
 * Alba, 30-08-2026: «haz el color más saturado de las emociones
 * seleccionadas y añádele un reborde grueso, oscuro en temas claros y
 * claro en temas oscuros».
 *
 * EL RELLENO NO SE CALCULA AQUÍ. Lo trae «--rd-emo-fuerte», que lo
 * escribe el catálogo del plugin emoción por emoción: es su propio
 * relleno mezclado con su propio acento —el mismo color subido de
 * fuerza, nunca otro color— hasta donde cada una aguanta sin que su
 * nombre baje de 4,5. Y aguantan cosas muy distintas: Feliz llega casi
 * hasta su acento y Frustrado/a apenas se mueve, porque su tinta está
 * muy cerca de él. Con un porcentaje fijo escrito aquí mandarían las
 * tres peores y las otras veinte se quedarían flojas. El porqué está en
 * «Reddie_Emotions::fuerte()».
 *
 * EL REBORDE, POR DENTRO Y NO POR FUERA. Cuatro píxeles, con el
 * contorno arrancando donde acaba el borde. Por fuera se metería en el
 * hueco de ocho que separa una pastilla de la siguiente, y dos elegidas
 * vecinas se leerían como un bloque; por dentro ese hueco no se toca
 * nunca. Y no se hace subiendo el borde, porque el borde ocupa sitio y
 * la fila entera daría un salto al elegir.
 */
.rd-emotion input:checked + .rd-emotion__body {
	border-color: var(--rd-emo-texto, var(--rd-primary));
	background: var(--rd-emo-fuerte, var(--rd-emo-fondo, var(--rd-badge-bg)));

	/* Oscuro: la tinta de la emoción. Contra su propio relleno mide de
	   4,53 a 6,12 —a un reborde le basta con 3— y es el mismo tono que
	   ya lleva el nombre, así que la pastilla sigue siendo de un color. */
	outline: 4px solid var(--rd-emo-texto, var(--rd-primary));
	outline-offset: -1px;

	/* Y ADEMÁS SE LEVANTA.
	 *
	 * Alba, 28-08-2026: «haz que las seleccionadas se vean con una
	 * sombra». Se queda: el relleno es una diferencia de COLOR y la
	 * sombra una de ALTURA, y las dos se ven desde ángulos distintos
	 * —el color de frente, la sombra de reojo—.
	 *
	 * DOS SOMBRAS Y NO UNA: la de abajo, corta y pegada, es la que hace
	 * que la pastilla parezca apoyada; la de arriba, larga y suave, es
	 * la que la levanta. Con una sola queda o pegatina o globo.
	 *
	 * Sin mover nada de sitio: una sombra no ocupa hueco, así que la
	 * rejilla no da el salto que daría con un «transform». */
	box-shadow:
		0 8px 18px -6px rgba(58, 33, 22, .45),
		0 2px 5px rgba(58, 33, 22, .22);
}

/*
 * Y EN CALMA, UN SEGUNDO REBORDE CLARO POR FUERA.
 *
 * Esta es la parte de «claro en temas oscuros», y hubo que medirla dos
 * veces para acertar.
 *
 * LO QUE NO FUNCIONA: aclarar el reborde de dentro. Las pastillas son
 * islas de su color —Calma no las tiñe, a propósito—, así que el relleno
 * es claro en los dos temas. Un reborde claro sobre un relleno claro
 * mide de 1,0 a 1,6: no se ve. Probado y descartado.
 *
 * LO QUE SÍ: dejar el reborde oscuro donde está —que contra el relleno
 * de la pastilla funciona igual de bien en los dos temas— y añadir
 * FUERA un segundo aro claro. Ahí sí hay algo oscuro contra lo que
 * recortarse: la tarjeta azul de Calma. Lo que se pierde en un fondo
 * oscuro no es el relleno de la pastilla, es su CANTO contra la página,
 * y eso solo se arregla por fuera.
 *
 * DOS PÍXELES Y NO CUATRO: el aro de fuera sí se mete en el hueco de
 * ocho que separa una pastilla de la siguiente. Con dos por cada lado
 * quedan cuatro de aire entre dos elegidas vecinas, que es suficiente
 * para que se sigan leyendo como dos.
 *
 * VA EN «box-shadow» y no en un segundo contorno porque solo hay un
 * «outline» por elemento y ese ya está usado por el de dentro. Se pone
 * delante de las dos sombras del relevo, que se repiten aquí enteras:
 * escribir «box-shadow» otra vez sustituye lo anterior, no lo suma.
 */
body.rd-oscuro .rd-emotion input:checked + .rd-emotion__body {
	box-shadow:
		0 0 0 2px rgba(255, 255, 255, .82),
		0 8px 18px -6px rgba(12, 18, 34, .55),
		0 2px 5px rgba(12, 18, 34, .32);
}

/*
 * AQUÍ ESTABA LA MARCA DE VISTO, y se ha ido.
 *
 * Era un disco con un tic en la esquina de la pastilla elegida. Servía
 * —de un vistazo se sabía cuáles estaban—, pero Alba lo quitó por un
 * motivo de diseño que se ve al mirar las veintidós juntas: cada
 * emoción YA TIENE su icono, y ponerle encima un segundo icono
 * convierte la pastilla en dos dibujos peleándose por el mismo sitio.
 *
 * En su lugar, el marco de la elegida se hace GRUESO Y OSCURO, que es
 * lo que pidió. Ver la regla de abajo.
 */

/* El foco del teclado, que también escribe en «box-shadow».
 *
 * Y por eso hay una tercera regla: una pastilla ELEGIDA a la que además
 * se llega con el tabulador tiene que enseñar las dos cosas. Sin ella,
 * la de foco pisaría a la de elegida y la pastilla se caería de golpe
 * justo cuando el teclado la señala. Se ponen las dos en la misma
 * declaración, el foco delante para que quede por fuera. */
.rd-emotion input:focus-visible + .rd-emotion__body {
	box-shadow: var(--rd-shadow-focus);
}

.rd-emotion input:checked:focus-visible + .rd-emotion__body {
	box-shadow:
		var(--rd-shadow-focus),
		0 8px 18px -6px rgba(58, 33, 22, .45),
		0 2px 5px rgba(58, 33, 22, .22);
}

.rd-emotion input:disabled + .rd-emotion__body {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Cuando ya hay 6 elegidas, el resto se apaga. */
.rd-emotion.is-blocked .rd-emotion__body {
	opacity: 0.35;
}

/*
 * El disco del icono: un velo blanco, no un color del tema.
 *
 * Los iconos de las emociones son dibujos a todo color —verdes,
 * dorados, azules— y no se tiñen: necesitan caer sobre algo claro
 * para leerse. Un velo blanco sirve para los veintidós fondos porque
 * deja pasar un punto del color de debajo, así que el disco sigue
 * siendo de la emoción sin apagar el dibujo.
 *
 * Antes era «--rd-surface-alt», que con Calma se vuelve oscuro. Sobre
 * un relleno que ahora es claro siempre, eso dejaba el dibujo metido
 * en un agujero negro justo de noche.
 */
.rd-emotion__icon {
	width: 40px;
	height: 40px;
	padding: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	box-sizing: border-box;
	flex-shrink: 0;
	transition: background var(--rd-transition);
}

/* Elegida, el velo se cierra del todo: el icono se despega del
   relleno y acompaña al marco. Es la segunda seña de que está
   elegida, y esta se ve incluso de reojo. */
.rd-emotion input:checked + .rd-emotion__body .rd-emotion__icon {
	background: #fff;
}

.rd-emotion__label {
	font-size: var(--rd-size-xs);
	color: var(--rd-emo-texto, var(--rd-ink-soft));
	line-height: 1.2;
}

/* El nombre no se aclara ni se apaga al elegir: el tono de la tabla
   es el que Alba midió sobre ese relleno, y es el mismo antes y
   después. Esta regla es la que salva a una emoción sin colores, que
   sí pasa de la tinta suave a la fuerte. */
.rd-emotion input:checked + .rd-emotion__body .rd-emotion__label {
	color: var(--rd-emo-texto, var(--rd-ink));
}

/* ==========================================================
   Escritorio: dos columnas
   ========================================================== */

@media (min-width: 900px) {
	/*
	 * Las dos columnas, iguales.
	 *
	 * La de la derecha era vez y media más ancha que el calendario, y
	 * eso hacía dos cosas malas a la vez: dejaba el calendario
	 * estrecho, tan alto que no cabía en la pantalla sin bajar, y
	 * daba al registro un ancho distinto, así que las dos mitades no
	 * se leían como dos partes de lo mismo.
	 *
	 * Igualadas, el calendario gana ancho, encoge de alto y cabe
	 * entero; y el registro ocupa exactamente lo mismo.
	 */
	.rd-diary__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	/*
	 * El formulario, en una sola columna.
	 *
	 * Estuvo en dos para que cupiera en la pantalla, y lo conseguía a
	 * costa de mezclar los grupos: las emociones terminaban a la altura
	 * del sueño y no se sabía dónde acababa una cosa y empezaba otra.
	 * Rellenar el día es una secuencia —cómo estoy, qué he sentido, qué
	 * he dormido, qué he hecho— y una secuencia se lee hacia abajo.
	 *
	 * Se pierde el caber sin bajar, y aquí compensa: al escribir se baja
	 * de todas formas, porque hay que ir tocando cosas. El caber de una
	 * vez importa al leer lo ya guardado, y eso sigue en dos columnas.
	 *
	 * Con el ancho entero, además, las emociones pasan de dos por fila a
	 * cuatro o cinco, así que el formulario acaba siendo más corto que
	 * en dos columnas.
	 */
	#rd-entry-form > fieldset,
	#rd-entry-form > label,
	#rd-entry-form > .rd-entry__note {
		margin-bottom: var(--rd-space-5);
	}

	.rd-mood__face {
		width: 54px;
		height: 54px;
		font-size: 26px;
	}
}

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

	.rd-mood__face {
		width: 42px;
		height: 42px;
		font-size: 21px;
	}

	.rd-mood__label {
		font-size: 10px;
	}
}

/* ==========================================================
   Actividades
   ========================================================== */

.rd-activities > .rd-entry__legend {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--rd-space-3);
	width: 100%;
}

.rd-activities__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: var(--rd-space-2);
}

.rd-activity {
	cursor: pointer;
}

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

.rd-activity__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	height: 100%;
	padding: var(--rd-space-3) var(--rd-space-2);
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-md);
	background: var(--rd-surface);
	text-align: center;
	transition: all var(--rd-transition);
}

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

.rd-activity input:checked + .rd-activity__body {
	border-color: var(--rd-primary);
	background: var(--rd-badge-bg);
}

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

.rd-activity input:disabled + .rd-activity__body {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Los iconos usan dos tonos: relleno suave y trazo. */
.rd-activity__icon {
	width: 44px;
	height: 44px;
	padding: 8px;
	border-radius: 50%;
	background: var(--rd-surface-alt);
	box-sizing: border-box;
	flex-shrink: 0;
	transition: background var(--rd-transition);
}

.rd-activity__label {
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-soft);
	line-height: 1.2;
}

.rd-activity input:checked + .rd-activity__body .rd-activity__label {
	color: var(--rd-ink);
}

@media (max-width: 520px) {
	/*
	 * Los iconos de actividad, del tamaño de las caritas.
	 *
	 * Estaban en 26 píxeles y las caritas en 52: a ese tamaño un plato,
	 * una cama y un gráfico se convierten en tres manchas parecidas y
	 * hay que leer la etiqueta para saber qué es cada una, que es
	 * justamente lo que un icono viene a evitar.
	 *
	 * Con 44 caben tres por fila en una pantalla estrecha, así que la
	 * rejilla también se ensancha para que no se apretujen.
	 */
	.rd-activities__grid {
		grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	}

	.rd-activity__icon {
		width: 44px;
		height: 44px;
		padding: 7px;
	}
}

/* ==========================================================
   Días especiales
   ========================================================== */

/* Marca de color en la esquina del día */
.rd-day {
	position: relative;
}

.rd-day__mark {
	position: absolute;
	top: 0;
	right: 0;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: 1.5px solid var(--rd-surface);
	pointer-events: none;
}

.rd-special {
	margin-top: var(--rd-space-5);
}

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

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

.rd-special__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	flex-shrink: 0;
}

.rd-special__icon .rd-icon {
	width: 24px;
	height: 24px;
}

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

.rd-special__title {
	font-size: var(--rd-size-sm);
	color: var(--rd-ink);
	word-break: break-word;
}

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

.rd-special__remove {
	background: none;
	border: 0;
	padding: var(--rd-space-2);
	color: var(--rd-ink-muted);
	cursor: pointer;
	border-radius: var(--rd-radius-sm);
	display: flex;
	flex-shrink: 0;
}

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

.rd-special__remove:hover {
	color: var(--rd-primary);
	background: var(--rd-surface-alt);
}

/* --- Formulario de alta --- */

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

.rd-special__cats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
	gap: var(--rd-space-2);
	margin-bottom: var(--rd-space-3);
}

.rd-special__cat-option {
	cursor: pointer;
}

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

.rd-special__cat-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: var(--rd-space-3) var(--rd-space-2);
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-md);
	background: var(--rd-surface);
	text-align: center;
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-soft);
	line-height: 1.2;
	height: 100%;
	transition: all var(--rd-transition);
}

.rd-special__cat-body .rd-icon {
	width: 30px;
	height: 30px;
}

.rd-special__cat-option input:checked + .rd-special__cat-body {
	border-color: var(--rd-primary);
	background: var(--rd-badge-bg);
	color: var(--rd-ink);
}

.rd-special__cat-option input:focus-visible + .rd-special__cat-body {
	box-shadow: var(--rd-shadow-focus);
}

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

.rd-special__add .rd-input {
	flex: 1 1 180px;
	width: auto;
}

/* --- Lo que viene --- */

/* «Lo que viene» arranca más cerca de lo de arriba, y la línea pasa a
   ir entre el título y la lista.

   Encima del título, la línea separaba dos cosas que no lo necesitan:
   ya se distinguen porque una es un formulario y la otra un titular.
   Debajo hace algo útil: marca dónde empieza la lista de fechas. */
.rd-special__upcoming {
	margin-top: var(--rd-space-4);
}

.rd-special__upcoming .rd-special__heading {
	margin-bottom: 0;
	padding-bottom: var(--rd-space-2);
	border-bottom: 1px solid var(--rd-border);
}

.rd-special__upcoming ul {
	margin-top: var(--rd-space-3);
}

.rd-special__upcoming-title {
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-muted);
	margin: 0 0 var(--rd-space-3);
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.rd-special__upcoming ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--rd-space-2);
}

.rd-special__upcoming a {
	display: flex;
	align-items: center;
	gap: var(--rd-space-3);
	text-decoration: none;
	color: var(--rd-ink-soft);
	font-size: var(--rd-size-sm);
	padding: var(--rd-space-2);
	border-radius: var(--rd-radius-sm);
	transition: background var(--rd-transition);
}

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

.rd-special__upcoming strong {
	flex: 1;
	min-width: 0;
	font-weight: 500;
	color: var(--rd-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rd-special__upcoming span:last-child {
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-muted);
	flex-shrink: 0;
}

.rd-special__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}

/* ==========================================================
   Añadir una fecha especial
   ========================================================== */

.rd-special__wrap {
	margin: 0;
}

.rd-special__summary {
	display: flex;
	align-items: center;
	gap: var(--rd-space-3);
	cursor: pointer;
	list-style: none;
	user-select: none;
}

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

.rd-special__summary-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--rd-surface-alt);
	flex-shrink: 0;
}

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

.rd-special__summary-text {
	flex: 1;
	font-size: var(--rd-size-base);
	font-weight: 500;
	color: var(--rd-ink);
}

.rd-special__chev {
	width: 18px;
	height: 18px;
	color: var(--rd-ink-muted);
	flex-shrink: 0;
	transition: transform var(--rd-transition);
}

.rd-special__wrap[open] .rd-special__chev {
	transform: rotate(180deg);
}

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

.rd-special__step {
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-muted);
	margin: 0 0 var(--rd-space-2);
	letter-spacing: 0.02em;
}

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

.rd-special__form .rd-button {
	width: 100%;
	margin-top: var(--rd-space-2);
}

/* --- Muestras de color --- */

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

.rd-swatch {
	position: relative;
	cursor: pointer;
	line-height: 0;
}

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

.rd-swatch__dot {
	display: block;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 3px solid transparent;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
	transition: transform var(--rd-transition), border-color var(--rd-transition);
}

.rd-swatch:hover .rd-swatch__dot {
	transform: scale(1.1);
}

.rd-swatch input:checked + .rd-swatch__dot {
	border-color: var(--rd-ink);
}

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

/* --- Encabezados de las listas --- */

.rd-special__heading {
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-muted);
	margin: 0 0 var(--rd-space-3);
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.rd-special__item {
	border-left-width: 4px;
	border-left-style: solid;
}


/* Volver al mes en curso de un salto */
.rd-calendar__back {
	margin: 0 0 var(--rd-space-3);
	text-align: center;
}

.rd-calendar__back a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--rd-size-xs);
	color: var(--rd-primary);
	text-decoration: none;
	padding: 4px var(--rd-space-3);
	border-radius: var(--rd-radius-pill);
	border: 1px solid var(--rd-border-strong);
	transition: background var(--rd-transition);
}

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

.rd-calendar__back svg {
	width: 14px;
	height: 14px;
}

/* ==========================================================
   Selector de fecha propio
   ========================================================== */

.rd-datepick {
	position: relative;
	margin-bottom: var(--rd-space-4);
}

.rd-datepick__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rd-space-3);
	width: 100%;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
	color: var(--rd-ink);
}

.rd-datepick__ico {
	width: 18px;
	height: 18px;
	color: var(--rd-ink-muted);
	flex-shrink: 0;
}

.rd-datepick__panel {
	position: absolute;
	z-index: 40;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	background: var(--rd-surface);
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-md);
	box-shadow: var(--rd-shadow-card);
	padding: var(--rd-space-4);
}

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

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

.rd-datepick__month {
	font-family: var(--rd-font-display);
	font-weight: var(--rd-weight-display);
	font-size: var(--rd-size-sm);
	letter-spacing: -0.01em;
	color: var(--rd-ink);
	flex: 1;
	text-align: center;
}

.rd-datepick__weekdays,
.rd-datepick__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 3px;
}

.rd-datepick__weekdays span {
	text-align: center;
	font-size: 11px;
	color: var(--rd-ink-muted);
	padding-bottom: 4px;
}

.rd-datepick__day {
	aspect-ratio: 1 / 1;
	border: 0;
	background: transparent;
	border-radius: 50%;
	font-family: inherit;
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-soft);
	cursor: pointer;
	transition: background var(--rd-transition), color var(--rd-transition);
}

.rd-datepick__day:hover:not(:disabled) {
	background: var(--rd-surface-alt);
	color: var(--rd-ink);
}

.rd-datepick__day:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.rd-datepick__day.is-today {
	box-shadow: inset 0 0 0 1.5px var(--rd-primary);
	color: var(--rd-primary);
}

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

.rd-datepick__today {
	display: block;
	width: 100%;
	margin-top: var(--rd-space-3);
	padding: var(--rd-space-2);
	border: 1px solid var(--rd-border-strong);
	border-radius: var(--rd-radius-pill);
	background: transparent;
	font-family: inherit;
	font-size: var(--rd-size-xs);
	color: var(--rd-primary);
	cursor: pointer;
	transition: background var(--rd-transition);
}

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

/* ==========================================================
   Resumen del día
   ==========================================================
   Lo que se ve cuando el registro ya está guardado: solo lo elegido.
   ========================================================== */

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

.rd-summary__mood {
	display: flex;
	align-items: center;
	gap: var(--rd-space-3);
	font-size: var(--rd-size-lg);
	font-weight: 600;
	color: var(--rd-ink);
}

.rd-summary__mood .rd-face {
	width: 48px;
	height: 48px;
	flex-shrink: 0;
}

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

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

.rd-summary__chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 13px 6px 8px;
	background: var(--rd-surface-alt);
	border-radius: var(--rd-radius-pill);
	font-size: var(--rd-size-sm);
	color: var(--rd-ink);
}

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

.rd-summary__note {
	margin: 0;
	white-space: pre-wrap;
	line-height: var(--rd-leading-relaxed);
	color: var(--rd-ink-soft);
}

/* La cabecera del registro, con el lápiz en el extremo opuesto. */

.rd-entry__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--rd-space-4);
}

.rd-entry__edit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--rd-surface-alt);
	border: 1px solid var(--rd-border);
	text-decoration: none;
}

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

.rd-entry__edit .rd-icon {
	width: 22px;
	height: 22px;
}

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

/* --- Editar una fecha de «Lo que viene» --- */

.rd-special__upcoming li {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--rd-space-2);
	flex-wrap: wrap;
	padding-right: 36px;
}

.rd-special__upcoming li > a {
	flex: 1;
	min-width: 0;
}

.rd-upnext__edit {
	flex-basis: 100%;
	min-width: 0;
}

.rd-upnext__edit > summary {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	cursor: pointer;
	list-style: none;
	opacity: .55;
	transition: opacity var(--rd-transition);
}

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

.rd-upnext__edit > summary:hover,
.rd-upnext__edit[open] > summary {
	opacity: 1;
	background: var(--rd-surface-alt);
}

.rd-upnext__edit > summary .rd-icon {
	width: 17px;
	height: 17px;
}

/* El formulario ocupa toda la fila, debajo del evento. */
.rd-upnext__form {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: var(--rd-space-2);
	padding: var(--rd-space-3);
	background: var(--rd-surface-alt);
	border-radius: var(--rd-radius-md);
}

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

.rd-linkbutton--danger {
	color: var(--rd-ink-muted);
}

.rd-linkbutton--danger:hover {
	color: #C0392B;
}

/* --- El recuadro de la fecha especial, más ceñido --- */

.rd-special.rd-card--flat {
	padding: var(--rd-space-3) var(--rd-space-4);
}

.rd-special__summary {
	padding: 2px 0;
}

.rd-special__summary-icon {
	width: 34px;
	height: 34px;
}

.rd-special__form {
	padding-top: var(--rd-space-3);
}

/* Con el formulario abierto, el lápiz se queda arriba, junto al nombre
   del evento. Centrado quedaría flotando a media altura del formulario. */
.rd-upnext__edit[open] > summary {
	top: 0;
	transform: none;
}

/* ==========================================================
   Confirmar dentro de la web
   ==========================================================
   En vez de la ventana del navegador, que es gris, sale fuera de la
   página y no se parece en nada a Reddie. Esta hereda los colores del
   fondo que tenga cada persona.
   ========================================================== */

.rd-confirm > summary {
	cursor: pointer;
	list-style: none;
}

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

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

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

/* Los dos botones del editor de fechas: mismo tamaño y misma forma. La
   pregunta de antes es la que protege, no que uno parezca menos botón. */
.rd-upnext__actions .rd-button,
.rd-upnext__edit .rd-confirm > summary,
.rd-upnext__edit .rd-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 128px;
	padding: 11px var(--rd-space-4);
	font-size: var(--rd-size-sm);
}

.rd-upnext__edit .rd-confirm {
	margin-top: var(--rd-space-2);
}

/* --- Las tres listas de la fecha --- */

.rd-fecha {
	display: flex;
	gap: 6px;
}

.rd-fecha .rd-input {
	padding: 10px var(--rd-space-3);
}

.rd-fecha__dia { flex: 0 0 74px; }
.rd-fecha__mes { flex: 1 1 auto; min-width: 0; }
.rd-fecha__ano { flex: 0 0 96px; }

.rd-confirm--wide .rd-confirm__box {
	max-width: 420px;
}

/* ==========================================================
   Caras que no son un círculo
   ==========================================================
   La de Reddie tiene orejas que salen del círculo. Donde el resto de
   temas usan un aro, aquí hace falta un contorno que siga la silueta:
   un círculo alrededor no corresponde a nada de lo que se ve.
   ========================================================== */

.rd-caritas--reddie .rd-day.has-entry .rd-day__disc {
	background: transparent;
	border-color: transparent;
	overflow: visible;
}

/* El día abierto, con contorno grueso por silueta. Hoy ya no lleva
   contorno: se marca con el punto de debajo del número. */
.rd-caritas--reddie .rd-day.is-selected .rd-face {
	filter:
		drop-shadow(3px 0 0 var(--rd-primary))
		drop-shadow(-3px 0 0 var(--rd-primary))
		drop-shadow(0 3px 0 var(--rd-primary))
		drop-shadow(0 -3px 0 var(--rd-primary))
		drop-shadow(2.1px 2.1px 0 var(--rd-primary))
		drop-shadow(-2.1px 2.1px 0 var(--rd-primary))
		drop-shadow(2.1px -2.1px 0 var(--rd-primary))
		drop-shadow(-2.1px -2.1px 0 var(--rd-primary));
}

/* Y el aro circular fuera en cuanto haya cara, tenga entrada o no. */
.rd-caritas--reddie .rd-day .rd-day__disc {
	overflow: visible;
}

.rd-caritas--reddie .rd-day.has-entry .rd-day__disc,
.rd-caritas--reddie .rd-day.is-today .rd-day__disc,
.rd-caritas--reddie .rd-day.is-selected .rd-day__disc {
	background: transparent;
	border-color: transparent;
}

/* ==========================================================
   El diario en móvil: el registro es una hoja, no una columna
   ==========================================================
   Antes venía todo apilado: calendario, añadir fecha especial, la
   lista de fechas y, al final del todo, «¿Cómo ha ido tu día?». Para
   apuntar un día había que bajar tres pantallas pasando por delante
   de dos cosas que no se habían pedido. Cada pantalla de bajada es
   gente que se pierde por el camino.

   Ahora el calendario ocupa la pantalla y el registro sube desde
   abajo al pulsar un día, como una aplicación del teléfono.

   Todo esto lo decide el ancho de la ventana, no el servidor. Si la
   página se generara distinta para móvil, la caché guardaría una sola
   copia y la serviría a todo el mundo: quien pidiera primero decidiría
   lo que ven los demás.
   ========================================================== */

@media (max-width: 899px) {

	/* El velo. Tapa el calendario del todo y recoge los toques de fuera.
	 *
	 * ALBA, 28-08-2026: «cuando se abra la pestaña del registro, que solo
	 * se vea esa pestaña, sin nada de fondo».
	 *
	 * Estaba al 55 %, así que el calendario seguía viéndose por debajo
	 * mientras se elegían las emociones. Ahora es OPACO: durante el medio
	 * segundo que tarda la hoja en subir no se ve el mes de fondo, y
	 * cuando ya está arriba la hoja lo tapa entero de todas formas.
	 *
	 * Del color de la página y no negro: negro sería un telón de cine
	 * delante de una pantalla que es crema, y se leería como que algo se
	 * ha roto. Así parece que la página cambia, que es lo que pasa. */
	.rd-entry__velo {
		position: fixed;
		inset: 0;
		z-index: 55;
		background: var(--rd-bg, #FDF3EC);
		opacity: 0;
		transition: opacity var(--rd-transition);
	}

	.rd-entry__velo.is-open {
		opacity: 1;
	}

	.rd-entry {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		/* LLEGA ARRIBA DEL TODO. Antes se quedaba en el 88 % a propósito,
		   para dejar ver un trozo del calendario y no perder de vista
		   dónde se estaba. Alba lo pidió al revés el 28-08-2026: que al
		   abrir el registro no se vea nada más, porque ese trozo de
		   calendario asomando por arriba se leía como que la pestaña se
		   había abierto encima de algo, no como una pantalla.

		   «dvh» y no «vh»: en el móvil la barra de direcciones aparece
		   y desaparece al desplazar, y «vh» mide siempre la pantalla
		   sin ella. Con «vh» la hoja se pasa de alto justo cuando la
		   barra está a la vista, que es al abrirla, y el pie queda por
		   debajo del borde. La línea de «vh» se queda debajo para los
		   navegadores que no entiendan la otra. */
		top: 0;
		height: 100vh;
		height: 100dvh;
		max-height: none;
		overflow-y: auto;
		overscroll-behavior: contain;
		/* Sin esquinas redondeadas: una hoja que ocupa la pantalla entera
		   con las puntas de arriba redondeadas deja dos triangulitos del
		   color del velo en las esquinas, y eso sí que parece un fallo. */
		border-radius: 0;
		/* Poco arriba: el espacio de verdad lo pone la barra, que va
		   dentro y se queda pegada al desplazar. */
		padding-top: 0;
		/* Sitio para que el botón de guardar no quede debajo de la
		   barra de abajo ni del borde redondeado del teléfono. */
		padding-bottom: calc(var(--rd-space-7) + env(safe-area-inset-bottom, 0px));
		box-shadow: 0 -18px 40px rgba(12, 18, 34, .28);
		transform: translateY(100%);
		transition: transform var(--rd-transition);
	}

	.rd-entry.is-open {
		transform: translateY(0);
	}

	/* Mientras la hoja está cerrada no se puede tocar ni tabular: si
	   no, el teclado se pierde dentro de algo que no se ve. */
	.rd-entry:not(.is-open) {
		visibility: hidden;
	}

	/* La barra de la hoja, en su propia fila.

	   Se queda pegada arriba al desplazar dentro de la hoja: el
	   formulario es largo, y con la equis solo al principio había que
	   volver a subir del todo para cerrar.

	   Los márgenes negativos son para que el fondo llegue de borde a
	   borde: la tarjeta tiene relleno a los lados, y sin ellos el
	   contenido se vería asomar por las esquinas al pasar por debajo. */
	.rd-entry__barra {
		position: sticky;
		top: 0;
		z-index: 3;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		min-height: 52px;
		margin: 0 calc(var(--rd-space-5) * -1) var(--rd-space-2);
		padding: 10px var(--rd-space-5) 0;
		background: var(--rd-surface);
		border-radius: var(--rd-radius-lg) var(--rd-radius-lg) 0 0;
	}

	.rd-entry__asa {
		position: absolute;
		top: 9px;
		left: 50%;
		transform: translateX(-50%);
		width: 42px;
		height: 4px;
		border-radius: 99px;
		background: var(--rd-border-strong);
	}

	.rd-entry__cerrar {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		flex-shrink: 0;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var(--rd-surface-alt);
		color: var(--rd-ink-soft);
		cursor: pointer;
	}

	/* La cabecera arranca por debajo de la barra, nunca detrás. */
	.rd-entry__head {
		margin-top: 0;
	}

	/* El título, algo menor en la hoja: a 1,5 rem se partía en tres
	   renglones y empujaba las caritas fuera de la primera pantalla. */
	.rd-entry__question {
		font-size: 1.3rem;
	}

	.rd-entry__cerrar svg {
		width: 18px;
		height: 18px;
	}

	/* Con la hoja abierta, el fondo no se desplaza. */
	body.rd-hoja-abierta {
		overflow: hidden;
	}

	/* La barra gris de WordPress, que solo ve quien administra, va
	   fija arriba y tapa lo que caiga debajo. La hoja se encoge para
	   dejarla en paz. Los usuarios normales no la tienen, así que para
	   ellos esta regla no llega a aplicarse. */
	body.admin-bar .rd-entry {
		max-height: calc(88vh - 46px);
		max-height: calc(88dvh - 46px);
	}

	.rd-entry__cta-ancha {
		display: none;
	}

	/* El botón de guardar, ancho: es la acción de la pantalla. */
	.rd-entry__actions .rd-button {
		width: 100%;
	}
}

/* En ordenador nada de esto existe: el registro sigue siendo la
   columna de la derecha, siempre visible. */
@media (min-width: 900px) {
	.rd-entry__velo,
	.rd-entry__barra,
	.rd-entry__cta-movil {
		display: none;
	}
}

/* El aviso de qué hace falta para la racha. Discreto: es una
   aclaración, no una advertencia. */
.rd-emotions__aviso {
	margin: 0 0 var(--rd-space-3);
	font-size: var(--rd-size-xs);
	line-height: var(--rd-leading-normal);
	color: var(--rd-ink-soft);
}

/* ==========================================================
   El registro guardado, en dos columnas
   ==========================================================
   Esto es lo que se ve la mayor parte del tiempo: el resumen de lo
   apuntado, no el formulario. En una sola columna se salía por debajo
   de la pantalla y había que bajar para ver la nota.

   Va al final del archivo a propósito. Estas reglas compiten con las
   generales del resumen, que están más arriba, y entre reglas que
   pesan lo mismo gana la última escrita. Puesto antes, «display:flex»
   volvía a ganar y las columnas se quedaban en nada: una caja flexible
   ignora las columnas de texto sin avisar.
   ========================================================== */

@media (min-width: 900px) {
	.rd-entry .rd-summary {
		display: block;
		column-count: 2;
		column-gap: var(--rd-space-5);
	}

	/* Ningún grupo se parte entre columnas: unas emociones cortadas
	   por la mitad son peor que un hueco. */
	/* El hueco entre grupos, más estrecho.

	   Es lo que decide el alto del registro entero, y ese alto tenía
	   que cuadrar con el del calendario de al lado. Cada grupo ya se
	   distingue por su titular, así que el hueco no tiene que hacer
	   ese trabajo: puede quedarse en lo justo para que no se toquen. */
	.rd-entry .rd-summary__block {
		break-inside: avoid;
		margin-bottom: var(--rd-space-3);
	}

	/* Y el titular de cada grupo, pegado a sus píldoras: separado de
	   ellas parecía el final del grupo anterior en vez del principio
	   del suyo. */
	.rd-entry .rd-summary__block .rd-entry__legend {
		margin-bottom: var(--rd-space-2);
	}

	/* Las píldoras, algo más juntas entre sí. */
	.rd-entry .rd-summary__chips {
		gap: 6px;
	}

	/* El ánimo, a lo ancho de las dos: es el titular del día, no un
	   grupo más. El margen lo pone él porque ya no hay caja flexible
	   que reparta huecos. */
	.rd-entry .rd-summary__mood {
		column-span: all;
		margin-bottom: var(--rd-space-4);
	}

	/* Y las píldoras algo más bajas: son las que deciden el alto del
	   resumen cuando hay muchas marcadas. */
	.rd-entry .rd-summary__chip {
		padding-top: 5px;
		padding-bottom: 5px;
	}
}

/* ==========================================================
   El diario en ordenador, con más sitio para el registro
   ==========================================================
   La pantalla se ensancha y el calendario se queda algo más estrecho.
   Lo que gana uno lo pierde el otro, y quien lo necesita es el
   registro: el calendario con siete columnas se lee bien apretado,
   mientras que las emociones y las actividades son píldoras con texto
   y en poco ancho se apelotonan.

   Solo en el diario. En el resto de pantallas el ancho de siempre
   funciona, y ensancharlo todo por esto sería mover lo que ya está
   bien para arreglar lo que no.
   ========================================================== */

@media (min-width: 900px) {
	/*
	 * El diario vuelve al ancho de siempre.
	 *
	 * Se le habían dado ciento veinte píxeles de más para que cupiera
	 * el registro, y eso lo dejaba descuadrado respecto al resto de la
	 * web: al cambiar de pantalla se notaba el salto de los márgenes.
	 *
	 * El sitio que necesitaba el registro sale ahora de apretar el
	 * calendario, que es de donde tenía que haber salido: siete
	 * columnas de números no necesitan tanto ancho.
	 */
	.rd-diary__grid {
		grid-template-columns: minmax(0, 0.76fr) minmax(0, 1fr);
	}

	/* Las casillas, más pequeñas y más juntas. */
	.rd-day__disc {
		max-width: 34px;
	}
}

@media (min-width: 900px) {
	/* --- El calendario, más compacto ---

	   Los días se separaban por dos vías a la vez: el hueco entre
	   columnas y el ancho sobrante de cada casilla, que empujaba las
	   caritas al centro de su celda. Sumadas, quedaban flotando.

	   Se acota el ancho de la cuadrícula y con eso el calendario ocupa
	   menos, que es lo que le hacía falta al registro de al lado. */
	/*
	 * La cabecera de los días y la cuadrícula, con las mismas medidas.
	 *
	 * Al estrechar el calendario solo apreté la cuadrícula, y la fila
	 * de arriba —L M X J V S D— se quedó con el ancho y el hueco de
	 * antes. Son dos rejillas de siete columnas cada una: si no miden
	 * lo mismo, sus columnas no caen en el mismo sitio y las caritas
	 * quedan desplazadas respecto a su letra.
	 */
	.rd-diary .rd-calendar__weekdays,
	.rd-diary .rd-calendar__grid {
		max-width: 400px;
		margin-left: auto;
		margin-right: auto;
		column-gap: 2px;
	}

	.rd-diary .rd-calendar__grid {
		row-gap: 11px;
	}

	/* --- Dónde cae cada grupo del resumen ---

	   Izquierda: emociones, sueño y actividad. Derecha: productividad y
	   la nota. Se fuerza el corte en productividad; lo anterior se
	   queda en la primera columna y lo siguiente pasa a la segunda.

	   Sin esto, el navegador reparte por altura para dejar las dos
	   columnas iguales, y la nota —que es la más larga— acababa
	   partiendo el reparto por donde le convenía a él, no por donde
	   tiene sentido leerlo. */
	.rd-entry .rd-summary__block--productividad {
		break-before: column;
	}

	/* La nota, que va detrás, no debe romperse otra vez: si es larga,
	   que siga en su columna en vez de saltar a una tercera. */
	.rd-entry .rd-summary__note {
		break-inside: auto;
	}
}

/* --- El registro, un tono distinto del calendario ---

   Las dos tarjetas eran del mismo color y se leían como una sola cosa
   partida en dos. Con un tono de diferencia se entiende que son dos
   mitades: a la izquierda el mes, a la derecha el día.

   El color sale de «--rd-surface-deep», que cada tema calcula a partir
   del suyo propio: azul más hondo en Orden, verde en Calma, crema en
   Foco. Y en el tema oscuro va al revés, más claro que la superficie,
   porque allí lo que separa es la luz y no la sombra.

   Los dos intentos anteriores oscurecían mezclando tinta, que es casi
   negra, y salía gris: el negro no oscurece un color, lo apaga. Para
   oscurecer sin perder el tono hay que bajarle la luz al propio color,
   y eso solo puede hacerlo quien sabe cuál es, que es el tema.

   Debajo queda el segundo tono de siempre por si un tema antiguo no
   trae el tercero. */
.rd-entry.rd-card--flat {
	background: var(--rd-surface-deep, var(--rd-surface-alt));
}


/* --- La nota larga, recortada ---

   El desplegable no lleva la flecha de siempre: aquí el texto ya se
   corta con puntos suspensivos y el «Leer más» dice lo que hay que
   saber. Una flecha encima sería decirlo dos veces. */
.rd-summary__mas > summary {
	list-style: none;
	cursor: pointer;
}

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

.rd-summary__leer {
	display: inline;
	margin-left: 4px;
	font-size: var(--rd-size-sm);
	font-weight: 600;
	color: var(--rd-primary);
}

.rd-summary__mas > summary:hover .rd-summary__leer {
	text-decoration: underline;
}

/* Abierto, se esconde el recorte y se enseña el texto entero. Los dos
   están en la página desde el principio: abrir no pide nada a nadie. */
.rd-summary__mas[open] > summary {
	display: none;
}

/* --- Los días que no cuentan para la racha ---

   Apuntados pero con menos de tres emociones. Se marcan con un aro
   discontinuo y la carita algo apagada: se ve que hay algo escrito y a
   la vez que ese día no suma.

   Es información que antes no existía en ninguna parte: la racha se
   rompía y no había forma de saber en qué día ni por qué. */
.rd-day.no-cuenta .rd-day__disc {
	border-color: var(--rd-border-strong);
	border-style: dashed;
	border-width: 2px;
}

.rd-day.no-cuenta .rd-face,
.rd-day.no-cuenta .rd-day__cara {
	opacity: .55;
}

/* La leyenda de debajo del calendario. */
.rd-calendar__leyenda {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin: var(--rd-space-3) 0 0;
	font-size: var(--rd-size-xs);
	line-height: var(--rd-leading-normal);
	color: var(--rd-ink-muted);
	text-align: center;
}

.rd-calendar__leyenda span {
	display: inline-block;
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	border: 2px dashed var(--rd-border-strong);
	border-radius: 50%;
}

/* El aviso de que faltan emociones, dentro del propio grupo.

   Va en coral y con borde para que se distinga de la línea gris de
   ayuda que tiene justo debajo: son dos frases parecidas y si se
   parecieran también en el aspecto, no se vería que una es un error. */
/* En rojo, no en el coral de la marca.

   El coral es el color de todo lo que se puede pulsar en Reddie, así
   que un aviso en coral se lee como un botón más. El rojo aquí quiere
   decir «esto ha salido mal», que es justo lo que ha pasado.

   Los tres tonos son fijos y no salen del tema: un rojo que cambiara de
   color según el fondo dejaría de leerse como un error. */
.rd-emotions__error {
	margin: 0 0 var(--rd-space-3);
	padding: var(--rd-space-3) var(--rd-space-4);
	border: 1px solid #d94b3d;
	border-left-width: 4px;
	border-radius: var(--rd-radius-md);
	background: #fdecea;
	font-size: var(--rd-size-sm);
	font-weight: 600;
	line-height: var(--rd-leading-normal);
	color: #8f2a20;
}

/* El aviso escondido no ocupa sitio. La regla va antes que la de
   display para que no la pise: el navegador esconde lo que lleva
   «hidden» con display:none, y cualquier display escrito después gana. */
.rd-emotions__error[hidden] {
	display: none;
}

/* --- «Borrar este día», lejos de «Guardar» ---

   Estaban a dos dedos, y son las dos únicas cosas pulsables al final
   del registro: una guarda todo y la otra lo borra todo. En un móvil,
   con el dedo, esa distancia no es suficiente.

   Se separa con hueco y con una línea, y se pone a la derecha: el
   pulgar viene subiendo desde el botón de guardar, que está a la
   izquierda, así que alejarlo también en horizontal ayuda.

   Y va en gris apagado, no en coral. Borrar no es una acción que la
   pantalla deba invitar a hacer; tiene que estar, no llamar. */
.rd-entry__actions + .rd-confirm,
form + .rd-confirm--wide {
	margin-top: var(--rd-space-7);
	padding-top: var(--rd-space-4);
	border-top: 1px solid var(--rd-border);
	text-align: right;
}

.rd-confirm--wide > summary {
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-muted);
}

.rd-confirm--wide > summary:hover,
.rd-confirm--wide[open] > summary {
	color: var(--rd-primary);
}

/* Abierto, la confirmación vuelve a la izquierda: ahí ya hay que leer
   lo que se pregunta, y un texto alineado a la derecha se lee peor. */
.rd-confirm--wide[open] {
	text-align: left;
}