/**
 * Los ajustes del móvil.
 *
 * Este archivo existe por una razón concreta y vale la pena dejarla
 * escrita, porque es el fallo que costó dos intentos encontrar.
 *
 * En CSS, entre dos reglas que pesan lo mismo gana la última que se
 * carga. Los ajustes de móvil estaban en app.css, que se carga antes
 * que diary.css, community.css y las demás hojas de cada pantalla. Así
 * que cada vez que aquí se decía «esta carita mide 44», la hoja del
 * diario decía después «mide 54» y ganaba ella. El archivo estaba bien
 * escrito y no servía de nada.
 *
 * Metiendo una regla dentro de «@media» no se arregla: las consultas de
 * medios no dan peso, solo dicen cuándo aplicar. Lo que decide es el
 * orden.
 *
 * Así que esto va en un archivo aparte que se carga el último, después
 * de todas las pantallas. Es el sitio donde una regla de móvil puede
 * ganarle a la medida de escritorio que le corresponda.
 *
 * Y por eso conviene que aquí solo vivan ajustes de tamaño y espacio
 * para pantallas pequeñas: si se empieza a usar como cajón de sastre
 * para arreglar cualquier cosa, se convierte en el archivo que pisa a
 * todos los demás y nadie sabe ya por qué algo se ve como se ve.
 */

@media (max-width: 767px) {
	/* ==========================================================
	   Lo que no sale de las variables
	   ==========================================================
	   La escala de tokens.css cambia todo lo que está escrito con
	   variables. Lo que queda son las medidas fijas en píxeles: los
	   dibujos, las caritas, las monedas y los avatares. Y resulta que
	   son justo las que ocupan sitio.

	   Aquí se recortan todas de golpe con un selector por cada familia,
	   en vez de ir archivo por archivo: son cuarenta y pico reglas
	   repartidas por seis hojas, y tocarlas una a una es garantía de
	   dejarse la mitad.
	   ========================================================== */

	/* El margen lateral. Catorce píxeles a cada lado ya son un margen;
	   más es regalar ancho a los bordes, y el ancho es lo que no
	   sobra. */
	.rd-app__main {
		padding-top: var(--rd-space-4);
		padding-left: 13px;
		padding-right: 13px;
		padding-bottom: calc(var(--rd-space-6) + 56px);
	}

	/* Las tarjetas: menos relleno y menos hueco entre ellas. Es lo que
	   más se nota, porque hay muchas seguidas. */
	.rd-card--flat,
	.rd-card {
		padding: var(--rd-space-4);
		margin-bottom: var(--rd-space-4);
	}

	/* Los títulos de pantalla, pegados a su contenido: el hueco que
	   tenían estaba calculado para una letra de 28 píxeles. */
	.rd-evo__title,
	.rd-progress__title,
	.rd-oracle__heading,
	.rd-com__title,
	.rd-profile__section-title {
		margin-bottom: var(--rd-space-3);
	}

	/* La moneda de la barra: era de 46 y es lo primero que se ve. A 34
	   sigue reconociéndose y deja de ser el elemento más grande de la
	   pantalla. Se encoge con «scale» y no con el ancho, porque está
	   hecha de caras y canto colocados en el espacio: cambiándole solo
	   el ancho aparecen arcos sueltos alrededor. */
	.rd-nav__coin {
		transform: scale(0.74);
		transform-origin: left center;
		margin-right: -10px;
	}

	/* Los avatares de la comunidad y los rankings. */
	.rd-com__avatar,
	.rd-perfil__avatar,
	.rd-friend__avatar {
		width: 40px;
		height: 40px;
	}

	/* Las caritas grandes de elegir ánimo. Ocupaban 54 y son cinco en
	   fila: a 44 caben con aire y siguen siendo pulsables. */
	.rd-mood__face {
		width: 44px;
		height: 44px;
		font-size: 22px;
	}

	/* Los botones: alto suficiente para el dedo y ni un píxel más. Los
	   cuarenta y cuatro píxeles son el mínimo recomendado para algo que
	   se pulsa, así que de ahí no se baja. */
	.rd-button {
		min-height: 44px;
		padding: 10px var(--rd-space-4);
		font-size: var(--rd-size-sm);
	}

	/* Casa, pegada a la barra de abajo. La pantalla principal es la que
	   peor lleva el relleno de abajo pensado para el resto: aquí no hay
	   nada que desplazar, así que ese hueco es hueco y ya. */
	.rd-app__main.rd-casa {
		padding-bottom: calc(var(--rd-space-3) + 56px);
	}
}