/* ==========================================================
   Hábitos: la rejilla del mes
   ==========================================================

   TODO EL TRUCO ESTÁ EN DOS VARIABLES

   Cada pieza de la tabla —la esquina, las cabeceras de día, los nombres
   de los hábitos, las casillas y los contadores— lleva escrito su sitio
   en «--f» (fila) y «--c» (columna), pensados para el ordenador.

   En el móvil no se cambia el marcado ni se dibuja otra tabla: se
   intercambian las dos. Lo que era fila pasa a ser columna y al revés,
   y la tabla queda traspuesta. Con dos rejillas distintas habría que
   acordarse de tocar las dos cada vez que cambiara algo.

   POR QUÉ ENTRA EL MES ENTERO SIN BARRA DE DESPLAZAMIENTO

   Porque verlo entero de un vistazo es justo lo que hace útil un
   seguimiento así. Una tabla que hay que arrastrar de lado deja de
   contar la historia del mes y pasa a ser una lista.

   Y no solo entero: en grande. El mes de hoy ocupa la pantalla de
   arriba abajo, sin tener que bajar ni un dedo. Es LO MÁS IMPORTANTE
   de esta pantalla, y de ahí salen tres medidas que si no parecerían
   caprichos: el contenedor se ensancha más que el del resto de la
   aplicación, las filas se estiran con la ventana en vez de medir lo
   que midan, y hay un tope por fila para que con dos hábitos no salgan
   casillas de un palmo.

   En el móvil se da la vuelta y los días pasan a filas, que de arriba
   abajo hay sitio de sobra.

   BAJANDO SE VEN LOS MESES DE ANTES

   Cada mes es un bloque con su título y su rejilla, uno detrás de otro.
   Los de atrás los va trayendo el guion según se acercan, y por eso
   todo lo que hay aquí vale igual para el primero que para los que
   llegan después: no hay ni una regla que dependa de ser el de hoy.
   ========================================================== */

.rd-habitos {
	display: flex;
	flex-direction: column;
	gap: var(--rd-space-4);

	/* Más ancho que el resto de la aplicación, y a propósito.
	   Treinta y un columnas en los 1180 de siempre salen a treinta
	   píxeles: una rejilla apretada que se lee con esfuerzo. En un
	   portátil normal esto le saca cuatro o cinco píxeles a cada
	   columna, y en una pantalla grande bastantes más. */
	max-width: min(1560px, 100%);
}

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

/* --- El bloque de un mes --- */

.rd-habitos__mes {
	display: flex;
	flex-direction: column;
	gap: var(--rd-space-4);

	/*
	 * Que el mes ocupe la pantalla.
	 *
	 * «--rd-habitos-alto» lo mide el guion: lo que queda de ventana por
	 * debajo del bloque, contando la barra de navegación, la de
	 * administración si la hay y los márgenes. Es un dato que el CSS no
	 * puede saber, porque la barra mide distinto según el ancho.
	 *
	 * El valor de repuesto es el de un portátil corriente, y es el que
	 * vale mientras el guion no ha llegado o si no llega nunca: se ve
	 * bien igual, solo que sin ajustar al píxel.
	 *
	 * Las dos líneas son la misma con distinta unidad. «svh» descuenta
	 * las barras del navegador del móvil; donde no se entienda, la
	 * primera queda en pie.
	 *
	 * Y es «height», no «min-height», aunque de lo que se trate sea de
	 * ocupar un mínimo. El motivo está una caja más adentro: la rejilla
	 * reparte su alto entre las filas, y para repartir un alto hay que
	 * saberlo. Con «min-height» el navegador considera que el alto de
	 * este bloque «depende del contenido», así que la rejilla no puede
	 * pedirle el cien por cien y se queda en el mínimo de cada fila: la
	 * tabla salía de ciento setenta píxeles en una pantalla de
	 * seiscientos. Con «height» el número es firme y el reparto sale.
	 */
	height: var(--rd-habitos-alto, calc(100vh - 190px));
	height: var(--rd-habitos-alto, calc(100svh - 190px));
}

/* --- La cabecera de cada mes --- */

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

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

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

/* --- La rejilla --- */

.rd-habitos__marco {
	/* Crece con el bloque: es lo que le da altura a la rejilla para que
	   sus filas puedan estirarse. */
	flex: 1;
	display: flex;
	min-height: 0;

	/* Con pocos hábitos la rejilla no llega al tope de la pantalla y
	   sobra alto. Centrada, ese aire queda repartido arriba y abajo y
	   parece hecho aposta; pegada al techo parecía que se había
	   quedado a medias. */
	align-items: center;

	/* Solo por si acaso: en una ventana muy estrecha antes de que entre
	   la versión de móvil, mejor poder arrastrar que ver la tabla
	   aplastada hasta lo ilegible. */
	overflow-x: auto;
	padding-bottom: 2px;
}

.rd-habitos__tabla {
	display: grid;

	/*
	 * Nombre + un día por columna + el contador del final.
	 *
	 * Las dos columnas de los extremos se encogen con la ventana en vez
	 * de medir siempre lo mismo, y no es un adorno: con el nombre fijo
	 * en doscientos, en un portátil de mil píxeles los treinta y un días
	 * no cabían y aparecía una barra para arrastrar de lado. Un mes que
	 * hay que arrastrar deja de leerse de un vistazo, que es justo lo
	 * que tiene que hacer esta pantalla.
	 *
	 * Los topes de abajo están medidos: con los mínimos, la rejilla
	 * entera cabe en 760 píxeles, y por debajo de 900 ya entra la
	 * versión de móvil, que la da la vuelta.
	 */
	grid-template-columns:
		clamp(126px, 15vw, 200px)
		repeat(var(--rd-dias), minmax(16px, 1fr))
		clamp(42px, 4.6vw, 68px);

	/*
	 * La cabecera de los días mide lo que mida; las filas de hábitos se
	 * reparten TODO lo que sobre.
	 *
	 * Antes era «grid-auto-rows», que le da a cada fila lo que ocupe su
	 * contenido: la tabla salía de doscientos píxeles arriba del todo y
	 * dejaba media pantalla vacía debajo.
	 */
	grid-template-rows: auto repeat(var(--rd-habitos), minmax(40px, 1fr));

	/*
	 * Y un tope por fila, que es lo que evita el ridículo.
	 *
	 * Con cinco hábitos las filas salen holgadas y el tope ni se nota.
	 * Con dos, repartir la pantalla entera entre dos filas daría
	 * casillas de trescientos píxeles de alto: no es una rejilla, son
	 * dos franjas. Con el tope, lo que sobra se reparte como aire
	 * arriba y abajo, y el de abajo deja asomar el título del mes
	 * anterior, que cuenta que hay más cosa bajando.
	 *
	 * Los 46 del final son la fila del botón de añadir, cuando la hay.
	 * «--rd-anadir» vale 1 o 0 y lo pone la plantilla. Sin sumarla, esa
	 * fila salía de dentro del tope y se la quitaba a los hábitos: con
	 * un hábito y el botón debajo, la única casilla se quedaba en la
	 * mitad de alto que con dos hábitos.
	 */
	max-height: calc(var(--rd-habitos) * 108px + 60px + var(--rd-anadir, 0) * 46px);

	/* Con «align-items: center» arriba, la rejilla mediría lo que
	   ocupara su contenido y las filas de «1fr» se quedarían en el
	   mínimo. Esto le devuelve el alto del marco, y el tope de arriba
	   lo recorta cuando sobra. */
	height: 100%;

	flex: 1;
	gap: 3px;

	/* Sin suelo de ancho: las columnas ya traen el suyo y son ellas las
	   que deciden. Un mínimo aquí encima solo podía pelearse con el de
	   ahí arriba. */
	min-width: 0;
}

/* ==========================================================
   DETRÁS DEL SEGUIMIENTO, EL COLOR DEL TEMA EN DIFUMINADO
   ==========================================================

   Dos de los seis fondos dibujan líneas: Orden una cuadrícula de cuaderno
   y Rumbo un enrejado de rombos. Los dos se cruzan con la rejilla del
   seguimiento —que también es líneas— y el mes se vuelve ilegible: no hay
   forma de saber qué raya es una casilla y cuál es el papel.

   Lo que hace falta no es quitar el fondo, que es de la persona y lo ha
   comprado: es quitarle EL DIBUJO y dejarle EL COLOR. Y eso es
   literalmente lo que hace un desenfoque: una cuadrícula azul muy fina,
   borrosa del todo, es una mancha azul lisa. El color sale del propio
   fondo, así que no hay que adivinarlo ni escribirlo aquí; el día que se
   retoque la paleta de Orden, esto la sigue sola.

   Los otros cuatro no se tocan. Foco no dibuja nada, Descanso son lunares
   redondos que no se confunden con una casilla, Creatividad son luces
   difusas y Calma son estrellas: ninguno pelea con la rejilla, y
   emborronarlos sería quitarles lo que se compró.

   QUIÉN DECIDE QUE ESTE FONDO LLEVA LÍNEAS

   El guion, y no una clase del servidor: el body no lleva ninguna marca
   de QUÉ fondo hay puesto —solo si es oscuro—, y el fondo se pinta en un
   «body::before» que trae el plugin. Así que habitos.js mira ese dibujo y
   pone la clase cuando encuentra rayas. Está explicado allí.

   Si el guion no llegara a ejecutarse no pasa nada raro: se queda como
   hasta ahora.
*/
/*
   EL DESENFOQUE VA EN LA PROPIA TABLA, NO EN UNA CAPA APARTE

   La primera versión era una capa suelta detrás, un poco más grande que
   la rejilla para que el difuminado empezara antes que la primera
   casilla. Y sobraba por los lados justo dentro del marco, que es el que
   lleva «overflow-x: auto»: esos dieciséis píxeles de más contaban como
   contenido y aparecía una barra para arrastrar la tabla de lado.

   Una tabla que se puede arrastrar es exactamente lo que esta pantalla
   no quiere ser, así que el difuminado se pone en la tabla misma. No
   sobresale, no hay nada que arrastrar, y no hace falta ni capa ni
   z-index: lo que va detrás se difumina y las casillas se siguen
   pintando encima como siempre.

   Las esquinas redondeadas recortan también el difuminado, así que la
   mancha no queda con pico.
*/
.rd-habitos--difuminado .rd-habitos__tabla {
	border-radius: var(--rd-radius-lg);
	backdrop-filter: blur(26px);
	-webkit-backdrop-filter: blur(26px);
}

/* Donde no haya desenfoque —un navegador viejo— no pasa nada: se ve el
   fondo con sus líneas, como hasta ahora. Por eso no se le pone ni
   color ni borde propios; si se los pusiera, ahí saldría un recuadro
   suelto en medio de la pantalla. */

.rd-habitos__esquina,
.rd-habitos__dia,
.rd-habitos__nombre,
.rd-habitos__casilla,
.rd-habitos__cuenta,
.rd-habitos__anadir {
	grid-row: var(--f);
	grid-column: var(--c);
}

/* --- Las cabeceras de los días --- */

.rd-habitos__dia {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 1px;
	padding-bottom: 5px;
	font-size: 12px;
	line-height: 1;
	color: var(--rd-ink-muted);
}

.rd-habitos__dia-n {
	font-weight: 600;
	color: var(--rd-ink-soft);
}

.rd-habitos__dia-s {
	font-size: 10px;
	opacity: .7;
}

/* Hoy, marcado. Es el día que se va a pulsar el noventa por ciento de
   las veces, así que tiene que encontrarse sin buscarlo. */
.rd-habitos__dia.es-hoy .rd-habitos__dia-n {
	color: var(--rd-primary);
}

.rd-habitos__dia.es-hoy .rd-habitos__dia-n::after {
	content: "";
	display: block;
	width: 4px;
	height: 4px;
	margin: 2px auto 0;
	border-radius: 50%;
	background: var(--rd-primary);
}

/* --- El nombre del hábito, que además es el botón de editarlo --- */

.rd-habitos__nombre {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-md);
	background: var(--rd-surface);
	cursor: pointer;
	text-align: left;
	overflow: hidden;
	transition: background var(--rd-transition), border-color var(--rd-transition);
}

/*
   AL PASAR POR ENCIMA, CADA UNO SE PONE DE SU COLOR

   Antes se ponían todos igual: el borde cogía «--rd-border-strong», que
   es el tono del fondo que tenga puesto cada persona, y con Orden salían
   los cinco azules. Eso convierte el gesto de señalar un hábito en algo
   que no dice de cuál se trata.

   Ahora el color sale de la propia fila. No hay una regla por color —diez
   colores por dos temas serían veinte reglas que hay que acordarse de
   tocar cada vez que la paleta cambie—: hay una variable por fila que
   pone la plantilla, y esto la usa sin saber cuál es.

   Y NO SE USA EL COLOR CRUDO PARA LA LETRA

   El amarillo #F5C518 sobre el crema de la tarjeta da 1,3 de contraste y
   el verde claro #7ACB5A da 1,6: eso no es un nombre de color, es un
   nombre que desaparece. «--rd-hab-tinta» es ese mismo color con la luz
   bajada lo justo para llegar a 4,6 —y ni un paso más, así que el azul
   oscuro y el morado salen tal cual—. Está medido en la plantilla, sobre
   el fondo compuesto capa a capa, y allí se explica de dónde sale.

   El punto de la izquierda sigue con el color crudo: ahí no hay texto que
   leer y es lo que ata la fila con sus casillas.
*/
.rd-habitos__nombre:hover,
.rd-habitos__nombre:focus-visible {
	background: var(--rd-surface-alt);
	border-color: var(--rd-hab-tinta, var(--rd-border-strong));
}

.rd-habitos__nombre:hover .rd-habitos__nombre-t,
.rd-habitos__nombre:focus-visible .rd-habitos__nombre-t {
	color: var(--rd-hab-tinta, var(--rd-ink));
}

/*
   En Calma el fondo de la tarjeta es blanco al 13 % sobre azul noche, y
   ahí la letra tiene que ir al revés: aclarada, no oscurecida. Es la
   misma variable medida contra ese otro fondo.

   Cuelga de «body.rd-oscuro» y no de «prefers-color-scheme»: aquí la
   noche no la decide el sistema, la decide el fondo de la tienda.
*/
body.rd-oscuro .rd-habitos__nombre:hover,
body.rd-oscuro .rd-habitos__nombre:focus-visible {
	border-color: var(--rd-hab-tinta-noche, var(--rd-border-strong));
}

body.rd-oscuro .rd-habitos__nombre:hover .rd-habitos__nombre-t,
body.rd-oscuro .rd-habitos__nombre:focus-visible .rd-habitos__nombre-t {
	color: var(--rd-hab-tinta-noche, var(--rd-ink));
}

/* El punto del color elegido. Es lo que ata el nombre con sus casillas
   y con su barra en Progreso. */
.rd-habitos__punto {
	width: 10px;
	height: 10px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--rd-hab-color);
}

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

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

.rd-habitos__frec {
	font-size: 11px;
	color: var(--rd-ink-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* --- Las casillas --- */

.rd-habitos__casilla {
	position: relative;
	padding: 0;
	border: 1px solid var(--rd-border);
	border-radius: 8px;
	background: transparent;
	cursor: pointer;
	overflow: hidden;

	/* El área pulsable no puede ser menor que la casilla dibujada. */
	min-height: 34px;
	transition: border-color var(--rd-transition);
}

/*
   LAS QUE TODAVÍA SE PUEDEN MARCAR VAN CON FONDO

   Hoy y los tres días de antes. Al llevar fondo y las demás no, las
   cuatro forman una franja al final del mes que se ve sin explicarla:
   ahí es donde se puede tocar.

   Sin esta señal, pulsar un martes de hace dos semanas no hacía nada y
   no había forma de saber por qué. Que no pase nada al pulsar es lo
   peor que puede hacer una pantalla.
*/
.rd-habitos__casilla:not(:disabled) {
	background: var(--rd-surface-alt);
}

.rd-habitos__casilla:hover:not(:disabled) {
	border-color: var(--rd-hab-color);
}

.rd-habitos__casilla:focus-visible {
	outline: 2px solid var(--rd-hab-color);
	outline-offset: 1px;
}

/* Los días que aún no han llegado no se pueden marcar. Se dejan
   visibles y apagados: la forma del mes se sigue leyendo entera. */
.rd-habitos__casilla.es-futuro {
	background: transparent;
	border-style: dashed;
	opacity: .45;
	cursor: default;
}

/*
   LOS DÍAS QUE YA NO SE PUEDEN MARCAR

   Solo se marca hoy y los tres de antes. Los días anteriores se ven
   enteros —lo cumplido sigue pintado, que para eso está la rejilla—
   pero no se pueden tocar.

   La diferencia se cuenta sin fundido y sin tachones: las casillas
   abiertas llevan el fondo de tarjeta y las cerradas se quedan planas.
   Apagarlas con opacidad habría difuminado también lo cumplido, que es
   justo lo que se viene a mirar, y las de los meses de atrás —todas
   cerradas— se habrían visto como un mes en gris.
*/
.rd-habitos__casilla.es-cerrada {
	background: transparent;
	cursor: default;
}

/*
   EL RELLENO PROPORCIONAL

   Aquí es donde un hábito de tres veces al día se distingue de uno de
   una. «--rd-lleno» va de 0 a 1 y lo pone el servidor al pintar, y el
   guion al ir tocando: con dos veces al día vale 0, 0,5 y 1; con tres,
   0, un tercio, dos tercios y 1.

   Crece desde abajo, como un vaso que se llena. Probé a rellenar de
   izquierda a derecha y en una casilla de treinta píxeles no se
   distingue un tercio de la mitad; de abajo arriba sí, porque el ojo
   compara alturas mucho mejor que anchuras estrechas.
*/
.rd-habitos__relleno {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: calc(var(--rd-lleno, 0) * 100%);
	background: var(--rd-hab-color);
	transition: height 180ms ease;
}

/*
   LAS DIVISIONES DE LOS DE VARIAS VECES AL DÍA

   Tres veces al día, tres trozos dibujados. Antes el relleno subía en
   proporción y ya está, y eso no se lee: dos tercios y tres cuartos son
   la misma mancha de color, y con la casilla vacía no había forma de
   saber si ese hábito era de una vez o de cuatro.

   Con las rayas se ve lo que falta antes de empezar, que es la mitad
   de para qué sirve marcar algo varias veces al día.

   Van POR ENCIMA del relleno, en un tono sacado de la tinta: sobre el
   crema del fondo y sobre cualquiera de los diez colores se ve igual, y
   en el tema oscuro la tinta es blanca y se sigue viendo. Un color fijo
   habría desaparecido sobre la mitad de la paleta.
*/
.rd-habitos__partes {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;

	/*
	 * Un píxel de más de alto, y no sobra.
	 *
	 * El patrón dibuja una raya al final de cada trozo, así que la
	 * última cae justo en el borde de arriba: una raya pegada al borde,
	 * como si la casilla llevara dos. Con un píxel de más esa última se
	 * sale del recorte de la casilla y desaparece, y las de en medio se
	 * mueven menos de un píxel.
	 */
	height: calc(100% + 1px);

	background-image: repeating-linear-gradient(
		to top,
		transparent 0,
		transparent calc(100% / var(--rd-partes, 1) - 1px),
		color-mix(in srgb, var(--rd-ink) 30%, transparent) calc(100% / var(--rd-partes, 1) - 1px),
		color-mix(in srgb, var(--rd-ink) 30%, transparent) calc(100% / var(--rd-partes, 1))
	);
	pointer-events: none;
}

/* Cumplido del todo: además del relleno, el borde se tiñe. Con el
   relleno solo, una casilla a dos tercios y una entera se parecen
   demasiado de reojo. */
.rd-habitos__casilla[aria-pressed="true"] {
	border-color: var(--rd-hab-color);
}

/* --- El contador del final de la fila --- */

.rd-habitos__cuenta {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 600;
	color: var(--rd-ink-soft);
	white-space: nowrap;
}

/* Los diarios no llevan contador, pero su hueco se queda: si unas filas
   lo tuvieran y otras no, la rejilla dejaría de estar cuadrada. */
.rd-habitos__cuenta.es-vacia {
	visibility: hidden;
}

/* --- El final de la bajada --- */

/* Donde el guion mete los meses de atrás. Reserva un poco de alto para
   que haya algo a lo que acercarse: sin alto, un bloque vacío al final
   de la página nunca llega a entrar en la ventana y no se pediría
   nunca el mes siguiente. */
.rd-habitos__mas {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 72px;
	font-size: var(--rd-size-sm);
	color: var(--rd-ink-muted);
}

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

/* --- Añadir y vacío --- */

/*
   AÑADIR VA DENTRO DE LA REJILLA, DEBAJO DEL ÚLTIMO NOMBRE

   Estaba arriba a la derecha, en el hueco de las flechas de mes, y allí
   parecía una acción de la pantalla. Aquí es lo que de verdad es: el
   sitio del hábito siguiente. Por eso se parece a un nombre —mismo ancho
   de columna, mismas esquinas, mismo alto de letra— y se distingue en lo
   único que hace falta: el borde de rayas, que dice «esto todavía no está
   puesto».

   La plantilla le da su «--f» y su «--c», que es como se coloca todo lo
   demás. Cae en una fila que no existe en «grid-template-rows»: la crea
   el navegador y mide lo que ocupe el botón. Si estuviera en la
   plantilla de filas se repartiría el alto como un hábito más y saldría
   un botón de un palmo.
*/
.rd-habitos__anadir {
	align-self: start;
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 34px;
	padding: 6px 10px;
	border: 1px dashed var(--rd-border-strong);
	border-radius: var(--rd-radius-md);
	background: none;
	color: var(--rd-ink-soft);
	font-family: inherit;

	/* Un punto por debajo del nombre de un hábito: en la columna más
	   estrecha —135 píxeles en un portátil de 900— «Añadir un hábito»
	   al tamaño del nombre se parte en dos líneas feas. */
	font-size: var(--rd-size-xs);
	font-weight: 600;
	line-height: 1.2;
	text-align: left;
	cursor: pointer;
	transition: background var(--rd-transition), border-color var(--rd-transition), color var(--rd-transition);
}

.rd-habitos__anadir:hover,
.rd-habitos__anadir:focus-visible {
	background: var(--rd-surface-alt);
	border-color: var(--rd-ink-soft);
	color: var(--rd-ink);
}

/* El «+» ocupa el sitio del punto de color de los nombres, para que el
   texto de este botón empiece donde empiezan los de arriba. */
.rd-habitos__anadir-mas {
	flex-shrink: 0;
	width: 12px;
	font-size: 15px;
	line-height: 1;
	text-align: center;
}

.rd-habitos__vacio {
	padding: var(--rd-space-6) var(--rd-space-4);
	text-align: center;
	color: var(--rd-ink-muted);
	background: var(--rd-surface);
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-lg);
}

.rd-habitos__vacio-tit {
	margin: 0 0 6px;
	font-size: var(--rd-size-md);
	font-weight: 600;
	color: var(--rd-ink);
}

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

/* ==========================================================
   El panel de definir un hábito
   ========================================================== */

.rd-habitos__panel {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--rd-space-4);
}

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

.rd-habitos__panel-fondo {
	position: absolute;
	inset: 0;
	background: rgba(20, 16, 14, .45);
}

.rd-habitos__panel-caja {
	position: relative;
	width: min(420px, 100%);
	max-height: 90vh;
	overflow-y: auto;
	padding: var(--rd-space-5);
	background: var(--rd-surface);
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-lg);
	box-shadow: var(--rd-shadow-card);
}

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

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

.rd-habitos__panel-x {
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: var(--rd-surface-alt);
	color: var(--rd-ink-soft);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

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

.rd-habitos__lab {
	display: block;
	margin-bottom: 6px;
	font-size: var(--rd-size-sm);
	font-weight: 600;
	color: var(--rd-ink);
}

.rd-habitos__pista {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: var(--rd-ink-muted);
}

/* ==========================================================
   El desplegable de la casa
   ==========================================================

   POR QUÉ NO ES UN «SELECT»

   Porque la lista de un «select» no la dibuja la página: la dibuja el
   sistema, con sus colores, sus esquinas y su tipo de letra, y no hay
   CSS que la alcance. Dentro de un panel redondeado y crema aparecía
   una lista cuadrada de Windows, y en el tema oscuro una lista blanca
   en medio de una noche azul.

   Así que la lista se escribe en la página. El botón que la abre lleva
   la clase «rd-input» además de la suya: hereda de un plumazo el
   tamaño, el borde, el foco y el aspecto que ya tiene un campo en cada
   tema —incluido el oscuro, que lo pinta el propio tema— y aquí solo se
   le añade lo que un campo no tiene: la flecha y la lista.

   Todo lo demás —abrir con las flechas, moverse, Inicio y Fin, Escape,
   buscar escribiendo— lo lleva el guion, porque eso es lo que de verdad
   hay que devolverle a quien no usa el ratón.
   ========================================================== */

.rd-elegir {
	position: relative;
}

.rd-elegir__boton {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rd-space-3);
	text-align: left;
	cursor: pointer;
}

.rd-elegir__txt {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* La flecha, dibujada con dos bordes: un cuadrado girado del que solo
   se ven dos lados. Sin archivo que pedir y del color del texto, así
   que en el tema oscuro se aclara sola. */
.rd-elegir__flecha {
	flex-shrink: 0;
	width: 9px;
	height: 9px;
	margin-bottom: 3px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	opacity: .5;
	transform: rotate(45deg);
	transition: transform var(--rd-transition);
}

.rd-elegir__boton[aria-expanded="true"] .rd-elegir__flecha {
	margin-bottom: -3px;
	transform: rotate(225deg);
}

.rd-elegir__lista {
	position: absolute;
	z-index: 5;
	left: 0;
	right: 0;
	top: calc(100% + 6px);
	margin: 0;
	padding: var(--rd-space-2);
	list-style: none;

	/* Diez frecuencias no caben en pantalla pequeña, así que la lista
	   se queda en esta altura y se desplaza por dentro. */
	max-height: 268px;
	overflow-y: auto;

	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-md);
	box-shadow: var(--rd-shadow-card);

	/*
	 * Opaca en los dos temas sin escribir ni un color a mano.
	 *
	 * En el tema oscuro «--rd-surface» es medio transparente —está
	 * pensada para tarjetas sobre el cielo— y una lista por la que se
	 * transparenta la rejilla no se lee. Poniendo el fondo de la página
	 * debajo y la superficie encima, el resultado es opaco y sigue
	 * siendo el color que le toque a cada tema.
	 */
	background-color: var(--rd-bg);
	background-image: linear-gradient(var(--rd-surface), var(--rd-surface));
}

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

/* Cuando abajo no cabe, se abre hacia arriba. Lo decide el guion, que
   es quien puede medir. */
.rd-elegir.abre-arriba .rd-elegir__lista {
	top: auto;
	bottom: calc(100% + 6px);
}

.rd-elegir__op {
	display: flex;
	align-items: center;
	gap: var(--rd-space-2);
	padding: 9px 10px;
	border-radius: var(--rd-radius-sm);
	font-size: var(--rd-size-sm);
	color: var(--rd-ink);
	cursor: pointer;
}

/* La misma marca para el ratón y para el teclado: quien va con flechas
   tiene que ver dónde está igual que quien pasa el ratón por encima. */
.rd-elegir__op:hover,
.rd-elegir__op.esta-encima {
	background: var(--rd-surface-alt);
}

.rd-elegir__op[aria-selected="true"] {
	color: var(--rd-primary);
	font-weight: 600;
}

/* El hueco de la marca se reserva siempre, esté puesta o no: si solo
   ocupara sitio en la elegida, la lista entera bailaría al cambiar. */
.rd-elegir__marca {
	position: relative;
	flex-shrink: 0;
	width: 14px;
	height: 14px;
}

.rd-elegir__op[aria-selected="true"] .rd-elegir__marca::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 0;
	width: 5px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}

/* Los diez colores. Cuadrados grandes y en dos filas de cinco: en una
   sola fila salen a veinte píxeles y elegir un color mirando un punto
   de veinte píxeles no es elegir, es acertar. */
.rd-habitos__colores {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
}

.rd-habitos__color {
	position: relative;
	height: 34px;
	border: 2px solid transparent;
	border-radius: var(--rd-radius-sm);
	background: var(--rd-hab-color);
	cursor: pointer;
}

.rd-habitos__color[aria-checked="true"] {
	border-color: var(--rd-ink);
}

.rd-habitos__color[aria-checked="true"]::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #FFF;
	box-shadow: 0 0 0 2px rgba(0, 0, 0, .18);
}

.rd-habitos__error {
	margin: 0 0 var(--rd-space-3);
	padding: 8px 12px;
	border-radius: var(--rd-radius-sm);
	background: color-mix(in srgb, var(--rd-danger, #E5453F) 12%, transparent);
	color: var(--rd-danger, #E5453F);
	font-size: var(--rd-size-sm);
}

/* MITAD Y MITAD, que es como lo pidió Alba.

   Antes «Guardar» ocupaba todo el ancho que le dejaba su hermano y
   «Quitar este hábito» era un texto suelto a la izquierda: dos cosas de
   tamaños muy distintos que no se leían como una pareja de opciones.

   «flex: 1 1 0» —con el cero— es lo que hace que se repartan de verdad:
   con «flex: 1» a secas la base es el contenido, y como un texto es más
   largo que la palabra «Guardar», la mitad de la izquierda salía más
   ancha que la de la derecha. Partiendo de cero, los dos crecen desde el
   mismo sitio.

   Y CUANDO NO HAY NADA QUE QUITAR —al crear un hábito nuevo— el de
   quitar llega con «hidden», así que «Guardar» se queda con la línea
   entera. Es lo que tiene que pasar: no hay dos opciones, hay una. */
.rd-habitos__panel-pie {
	display: flex;
	align-items: center;
	gap: var(--rd-space-3);
	margin-top: var(--rd-space-5);
}

.rd-habitos__panel-pie > * {
	flex: 1 1 0;
	min-width: 0;
}

/* Quitar sigue siendo discreto y sin recuadro: es lo contrario de lo que
   se viene a hacer aquí, y un botón rojo al lado de «Guardar» se pulsa
   sin querer. Lo que cambia es que ahora ocupa su mitad, así que va
   centrado en ella; alineado a la izquierda quedaba flotando. */
.rd-habitos__retirar {
	color: var(--rd-ink-muted);
	font-size: var(--rd-size-sm);
	text-align: center;

	/* EL MISMO RELLENO QUE «GUARDAR», y no es un capricho de simetría:
	   es lo que hace que las dos mitades midan lo mismo.

	   Con «flex: 1 1 0» los dos hermanos parten de cero y se reparten el
	   hueco a partes iguales… del CONTENIDO. El relleno se suma después,
	   así que el que lo lleva —el botón, con sus 16 por lado— acababa 32
	   píxeles más ancho que el que no. Medido: 250 contra 218.

	   Dándole el mismo relleno, los dos parten del mismo sitio y salen
	   iguales. De paso, el sitio donde se puede pulsar «Quitar» deja de
	   ser solo el texto. */
	padding: 12px var(--rd-space-4);
}

.rd-habitos__retirar:hover {
	color: var(--rd-danger, #E5453F);
}

/* ==========================================================
   El cartel de retirar un hábito
   ==========================================================

   Era el «confirm» del navegador: un cartel del sistema pegado al borde
   de arriba, con su letra, sus botones y la dirección de la web escrita
   dentro. En medio de una pantalla crema y redondeada parece que algo se
   ha roto. Es el mismo motivo por el que los desplegables de aquí no son
   «select».

   Así que es una tarjeta de la casa. Reaprovecha «rd-habitos__panel-caja»
   —el mismo fondo, el mismo borde, la misma sombra y las mismas esquinas
   que el panel de definir un hábito— y solo añade lo suyo: el ancho, que
   es menor porque aquí no hay campos, y el pie de dos botones.
*/
.rd-habitos__aviso {
	position: fixed;
	inset: 0;

	/* Por encima del panel de definir, que va en 120: este cartel se
	   abre desde dentro de aquel y tiene que quedar delante. */
	z-index: 130;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--rd-space-4);
}

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

.rd-habitos__aviso-caja {
	width: min(380px, 100%);
}

/* El nombre del hábito, para que no haya duda de cuál se retira. */
.rd-habitos__aviso-cual {
	margin: var(--rd-space-3) 0 var(--rd-space-4);
	font-family: var(--rd-font-display);
	font-weight: var(--rd-weight-display);
	font-size: var(--rd-size-md);
	color: var(--rd-ink);

	/* Un nombre de treinta caracteres sin espacios no puede empujar la
	   tarjeta más allá de la pantalla. */
	overflow-wrap: anywhere;
}

/*
   EL TEXTO NO USA «--rd-ink-soft», Y ESTÁ MEDIDO

   Es lo que se usa en la casa para el texto secundario, pero sobre una
   tarjeta clara se queda en 4,08 —y en 4,02 con Descanso—, por debajo
   de los 4,5 que hace falta para leer un texto normal. Aquí no se puede
   pasar por alto: esto es justo lo que hay que entender antes de
   decidir si se retira un hábito.

   Así que se apaga la tinta de verdad en vez de coger un gris de la
   paleta. Al 88 % da entre 9,7 y 10,0 sobre las cinco tarjetas claras y
   8,8 sobre el azul de Calma, y sigue leyéndose más suave que un
   titular. Es el mismo recurso que ya usan las divisiones de las
   casillas unas líneas más arriba, y funciona solo en los dos temas
   porque «--rd-ink» es marrón de día y blanco de noche.
*/
.rd-habitos__aviso-txt {
	margin: 0 0 var(--rd-space-3);
	font-size: var(--rd-size-sm);
	line-height: var(--rd-leading-snug);
	color: color-mix(in srgb, var(--rd-ink) 88%, transparent);
}

/* La tercera línea cuenta algo bueno y va un punto más callada: no es
   una advertencia, es un dato. Al 72 % se queda en 5,8 de día y 6,5 de
   noche, así que baja de tono sin bajar de lo que se lee. */
.rd-habitos__aviso-txt--suave {
	margin-bottom: 0;
	font-size: var(--rd-size-xs);
	color: color-mix(in srgb, var(--rd-ink) 72%, transparent);
}

/*
   LOS DOS BOTONES, DEL MISMO TAMAÑO Y UNO AL LADO DEL OTRO

   «Dejarlo como está» va primero y con el botón hueco; «Retirar», con el
   lleno, porque es lo que se ha venido a hacer. Ninguno de los dos va en
   rojo ni con signos de admiración: aquí no se borra nada —lo marcado se
   queda— y asustar con lo que no pasa no ayuda a decidir.

   En una pantalla estrecha se ponen uno encima del otro, y el de dejarlo
   como está queda abajo, que es donde llega el pulgar.
*/
.rd-habitos__aviso-pie {
	display: flex;
	flex-wrap: wrap-reverse;
	gap: var(--rd-space-3);
	margin-top: var(--rd-space-5);
}

/* Cada uno mide lo que dice, y el sitio que sobra se reparte. Con un
   ancho de partida igual para los dos, «Dejarlo como está» se partía en
   dos renglones mientras «Retirar» nadaba en hueco vacío. */
.rd-habitos__aviso-pie .rd-button {
	flex: 1 1 auto;
	width: auto;
	padding: 12px var(--rd-space-4);
	font-size: var(--rd-size-sm);
}

/*
   EL DE DEJARLO COMO ESTÁ VA CON TINTA, NO CON EL CORAL DE LA MARCA

   Lo normal para un botón hueco en la casa es «rd-button--soft», que
   pinta la letra y el borde con «--rd-primary». Medido sobre esta
   tarjeta no llega: en Calma el coral se aclara a #FF8256 y la letra se
   queda en 4,41 sobre el azul de la caja, y el borde en 2,54, por debajo
   de los 3 que necesita un contorno para verse.

   Con la tinta de siempre la letra sube a 10,8 en Calma y a 13,8 o más
   en los cinco temas claros, y el borde queda entre 4,0 y 6,7: por
   encima de los 3 en los seis. Y de paso se distingue mejor cuál de los
   dos botones es el que hace algo.
*/
.rd-habitos__aviso-no {
	background: transparent;
	color: var(--rd-ink);
	border: 1px solid var(--rd-ink-soft);
}

.rd-habitos__aviso-no:hover {
	background: var(--rd-surface-alt);
	border-color: var(--rd-ink);
}

/* ==========================================================
   El móvil: la tabla se da la vuelta
   ==========================================================

   Los hábitos pasan a ser columnas y los días filas. Es la misma tabla
   con «--f» y «--c» intercambiadas, y de paso se gana lo que hacía
   falta: los días crecen hacia abajo, que es la dirección en la que un
   móvil tiene sitio de sobra, y la casilla recupera tamaño de dedo.
   ========================================================== */

@media (max-width: 899px) {
	/* Aquí no se ocupa la pantalla a la fuerza: dada la vuelta, el mes
	   son treinta y una filas y hay que bajar sí o sí. Estirarlas
	   además haría un mes de varias pantallas de alto. */
	.rd-habitos__mes {
		height: auto;
	}

	.rd-habitos__marco {
		display: block;
	}

	.rd-habitos__tabla {
		/* Día + un hábito por columna. El contador ya no va al final de
		   la fila sino al pie de su columna, y le toca una fila propia. */
		grid-template-columns: 44px repeat(var(--rd-habitos), minmax(52px, 1fr));

		/* Las filas vuelven a medir lo que ocupen: el reparto de altura
		   del ordenador aquí no tiene sentido, porque las filas son los
		   días y son treinta y uno. */
		grid-template-rows: none;
		grid-auto-rows: minmax(38px, auto);
		max-height: none;
		min-width: 0;
	}

	.rd-habitos__esquina,
	.rd-habitos__dia,
	.rd-habitos__nombre,
	.rd-habitos__casilla,
	.rd-habitos__cuenta {
		/* Aquí está la vuelta entera: dos líneas. */
		grid-row: var(--c);
		grid-column: var(--f);
	}

	/*
	   El botón de añadir NO se da la vuelta con los demás.

	   Dada la vuelta le tocaría la fila 1 y una columna suya al final, y
	   ahí no cabe: las columnas de móvil miden 52 píxeles y «Añadir un
	   hábito» necesita el triple, así que empujaba la tabla fuera de la
	   pantalla y aparecía una barra para arrastrar de lado.

	   Aquí abajo no hay «columna de los nombres» que respetar —los
	   nombres son la fila de arriba—, así que va donde de verdad
	   corresponde: al final de la tabla y de lado a lado. «grid-row:
	   auto» con las columnas fijadas de 1 a -1 lo deja en la primera fila
	   entera que quede libre, que es la de después de los contadores.
	*/
	.rd-habitos__anadir {
		grid-row: auto;
		grid-column: 1 / -1;
		justify-content: center;
		margin-top: 6px;
		min-height: 44px;
		font-size: var(--rd-size-sm);
		text-align: center;
	}

	/* La cabecera del día, ahora a la izquierda y en una línea. */
	.rd-habitos__dia {
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		gap: 4px;
		padding: 0 6px 0 0;
	}

	.rd-habitos__dia.es-hoy .rd-habitos__dia-n::after {
		display: none;
	}

	.rd-habitos__dia.es-hoy {
		font-weight: 700;
	}

	/* El nombre del hábito, de pie sobre su columna. Sin la frecuencia
	   al lado: en 52 píxeles de ancho no cabe, y se dice al abrir el
	   panel. */
	.rd-habitos__nombre {
		flex-direction: column;
		align-items: center;
		gap: 3px;
		padding: 6px 4px;
		text-align: center;
	}

	.rd-habitos__nombre-t {
		font-size: 11px;
		white-space: normal;
		line-height: 1.15;
	}

	/* Aquí la frecuencia se parte en dos líneas en vez de recortarse.
	   Va centrada, y un texto centrado que no cabe pierde el principio
	   Y el final: «3 veces por semana» se quedaba en «veces por
	   seman», que no dice nada. */
	.rd-habitos__frec {
		font-size: 9px;
		white-space: normal;
		line-height: 1.1;
	}

	.rd-habitos__casilla {
		min-height: 30px;
	}

	.rd-habitos__cuenta {
		font-size: 11px;
	}

	/* La tabla del móvil es larga —treinta y una filas— así que la
	   cabecera con los nombres se queda pegada arriba al bajar. Sin
	   esto, a mitad de mes ya no se sabe qué columna es cuál. */
	.rd-habitos__nombre,
	.rd-habitos__esquina {
		position: sticky;
		top: 0;
		z-index: 2;
	}

	.rd-habitos__esquina {
		background: var(--rd-bg, var(--rd-surface));
	}

	.rd-habitos__colores {
		grid-template-columns: repeat(5, 1fr);
	}
}