/**
 * Estilos de las pantallas de cuenta y del interior de la aplicación.
 *
 * Reutiliza los componentes de la landing (.rd-input, .rd-button,
 * .rd-message) para que todo Reddie se vea igual sin duplicar CSS.
 */

/* ==========================================================
   Pantallas de acceso
   ========================================================== */

.rd-auth {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--rd-space-5) var(--rd-space-4);
}

.rd-auth__card {
	background: var(--rd-surface);
	border-radius: var(--rd-radius-lg);
	box-shadow: var(--rd-shadow-card);
	padding: var(--rd-space-6) var(--rd-space-5);
	width: 100%;
	max-width: 440px;
}

.rd-auth__logo {
	display: block;
	width: 72px;
	margin: 0 auto var(--rd-space-4);
}

.rd-auth__logo img {
	width: 100%;
	height: auto;
}

.rd-auth__title {
	font-family: var(--rd-font-display);
	font-weight: var(--rd-weight-display);
	font-size: 1.5rem;
	letter-spacing: -0.025em;
	text-align: center;
	margin: 0 0 var(--rd-space-3);
	color: var(--rd-ink);
}

.rd-auth__sub {
	text-align: center;
	color: var(--rd-ink-soft);
	font-size: var(--rd-size-sm);
	line-height: var(--rd-leading-snug);
	margin: 0 0 var(--rd-space-5);
}

.rd-auth__links {
	margin-top: var(--rd-space-5);
	text-align: center;
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-soft);
	line-height: var(--rd-leading-snug);
}

.rd-auth__links a {
	color: var(--rd-primary);
	text-decoration: underline;
}

.rd-auth__sep {
	margin: 0 var(--rd-space-2);
	color: var(--rd-ink-muted);
}

/* --- Piezas de formulario compartidas --- */

.rd-hint {
	margin: var(--rd-space-2) 0 0;
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-soft);
	line-height: var(--rd-leading-snug);
}

.rd-check {
	display: flex;
	align-items: flex-start;
	gap: var(--rd-space-3);
	margin-bottom: var(--rd-space-5);
	font-size: var(--rd-size-xs);
	line-height: var(--rd-leading-snug);
	color: var(--rd-ink-soft);
	cursor: pointer;
}

.rd-check input[type="checkbox"] {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	accent-color: var(--rd-primary);
	cursor: pointer;
}

.rd-check a {
	color: var(--rd-primary);
	text-decoration: underline;
}

.rd-button--link {
	display: block;
	text-align: center;
	text-decoration: none;
}

.rd-button--soft {
	background: transparent;
	color: var(--rd-primary);
	border: 1px solid var(--rd-border-strong);
}

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

/* ==========================================================
   Interior de la aplicación
   ========================================================== */

.rd-app {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	background: var(--rd-bg);
}

.rd-app__main {
	flex: 1;
	width: 100%;
	max-width: var(--rd-container);
	margin: 0 auto;
	padding: var(--rd-space-6) var(--rd-space-4) calc(var(--rd-space-8) + 60px);
}

.rd-app__welcome {
	text-align: center;
	max-width: 560px;
	margin: 0 auto;
}

.rd-app__mascot {
	width: 92px;
	margin: 0 auto var(--rd-space-4);
}

.rd-app__title {
	font-family: var(--rd-font-display);
	font-weight: var(--rd-weight-display);
	font-size: 1.75rem;
	letter-spacing: -0.03em;
	margin: 0 0 var(--rd-space-3);
	color: var(--rd-ink);
}

.rd-app__lead {
	color: var(--rd-ink-soft);
	font-size: var(--rd-size-base);
	line-height: var(--rd-leading-snug);
	margin: 0 0 var(--rd-space-6);
}

.rd-app__panel {
	background: var(--rd-surface);
	border-radius: var(--rd-radius-lg);
	box-shadow: var(--rd-shadow-card);
	padding: var(--rd-space-5);
	text-align: left;
}

.rd-app__panel-title {
	font-family: var(--rd-font-display);
	font-weight: var(--rd-weight-display);
	font-size: 1.0625rem;
	letter-spacing: -0.02em;
	margin: 0 0 var(--rd-space-4);
	color: var(--rd-ink);
}

.rd-datalist {
	margin: 0;
	display: grid;
	gap: var(--rd-space-3);
}

.rd-datalist dt {
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-soft);
	margin: 0;
}

.rd-datalist dd {
	margin: 2px 0 0;
	font-size: var(--rd-size-sm);
	color: var(--rd-ink);
	word-break: break-word;
}

/* ==========================================================
   Navegación
   ========================================================== */

.rd-nav__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rd-space-4);
	max-width: var(--rd-container);
	margin: 0 auto;
	padding: var(--rd-space-4);
}

.rd-nav__user {
	display: flex;
	align-items: center;
	gap: var(--rd-space-3);
	flex-shrink: 0;
}

.rd-nav__coins {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	flex-shrink: 0;
	padding: 5px 17px 5px 6px;
	border-radius: var(--rd-radius-pill);
	background: var(--rd-badge-bg);
	color: var(--rd-primary);
	text-decoration: none;
	font-weight: 700;
	font-size: var(--rd-size-base);
	line-height: 1;
	transition: background var(--rd-transition);
}

/* La moneda de la barra, algo mayor que antes: ahora es lo primero
   que se ve, donde estaba la marca. */
/* El tamaño lo pone la propia moneda, con su clase «rd-coin3d--46».
   Ponerlo aquí a mano pisaba el suyo, y sin su medida las tiras del
   canto quedaban descolocadas y la moneda se veía plana. */

/* Cifras de ancho fijo: así el contador no se mueve de sitio cuando el
   saldo pasa de 9 a 10 o de 99 a 100. */
.rd-nav__coins-n {
	font-variant-numeric: tabular-nums;
}

.rd-nav__coins:hover {
	background: var(--rd-highlight);
}

.rd-nav__coins.is-active {
	background: var(--rd-primary);
	color: var(--rd-surface);
}

/*
 * El nombre solo cabe en pantallas anchas. Con seis apartados en la
 * barra, por debajo de 1200 se partía en dos líneas y descuadraba
 * la altura de todo.
 */
.rd-nav__name {
	display: none;
	font-size: var(--rd-size-sm);
	color: var(--rd-ink);
	max-width: 130px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --- La campana de los avisos ---

   Va en su propio círculo, con el mismo par de colores que la píldora
   de las monedas. El motivo es que hay cinco temas y el icono suelto
   heredaba «--rd-ink-soft», que en los temas oscuros es un gris
   azulado: sobre un fondo azul noche la campana se veía azul sobre
   azul y casi no estaba.

   El círculo resuelve las cinco de golpe, porque «--rd-badge-bg» y
   «--rd-primary» se definen en cada tema y están pensados para
   contrastar entre sí. Es la misma pareja que lleva el monedero, que
   ya se lee bien en todos. */
.rd-nav__aviso {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--rd-badge-bg);
	color: var(--rd-primary);
	text-decoration: none;
	transition: background var(--rd-transition);
}

.rd-nav__aviso:hover,
.rd-nav__aviso:focus-visible {
	background: var(--rd-highlight);
}

/* En la pantalla de avisos se invierte, igual que hace el monedero
   cuando estás en la tienda: así se sabe dónde estás. */
.rd-nav__aviso.is-active {
	background: var(--rd-primary);
	color: var(--rd-surface);
}

.rd-nav__aviso svg {
	width: 22px;
	height: 22px;
	stroke-width: 1.9;
}

/* El contador se pega al dibujo, no a la caja. */
.rd-nav__aviso .rd-campana__cuenta {
	left: auto;
	right: 1px;
	top: 1px;
	margin-left: 0;
}

/* --- La campana de avisos, a la izquierda del perfil ---

   Vuelve a la barra después de una temporada dentro de Casa. Se viste
   como el engranaje de ajustes —mismo tamaño, mismo hueco, mismo
   comportamiento al pasar por encima— porque son los dos botones de la
   esquina y tienen que leerse como pareja.

   Es un botón en Casa y un enlace fuera; se pinta igual en los dos
   casos, que para quien mira es la misma cosa. */
.rd-nav__campana {
	position: relative;
	display: inline-flex;
	color: var(--rd-ink-soft);
	padding: var(--rd-space-2);
	border: 0;
	background: none;
	border-radius: var(--rd-radius-sm);
	cursor: pointer;
	transition: color var(--rd-transition), background var(--rd-transition);
}

.rd-nav__campana svg,
.rd-nav__campana .rd-icon {
	width: 22px;
	height: 22px;
}

.rd-nav__campana:hover,
.rd-nav__campana:focus-visible,
.rd-nav__campana.is-active,
.rd-nav__campana.is-abierto {
	color: var(--rd-primary);
	background: var(--rd-surface-alt);
}

/* Cuántas hay sin leer.

   Un número y no un punto: «tienes avisos» y «tienes catorce avisos» son
   dos cosas distintas. Va montado sobre el borde de la campana, que es
   donde se espera encontrarlo. */
.rd-nav__globo {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: var(--rd-radius-pill);
	background: var(--rd-danger, #E5453F);
	color: #FFF6EF;
	font-size: 11px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
	pointer-events: none;
}

.rd-nav__logout {
	display: inline-flex;
	color: var(--rd-ink-soft);
	padding: var(--rd-space-2);
	border-radius: var(--rd-radius-sm);
	transition: color var(--rd-transition), background var(--rd-transition);
}

.rd-nav__logout svg {
	width: 20px;
	height: 20px;
}

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

.rd-nav__icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

/* --- Móvil: barra inferior fija --- */

@media (max-width: 899px) {
	.rd-nav__sections {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 40;
		display: flex;
		justify-content: space-around;
		background: var(--rd-surface);
		border-top: 1px solid var(--rd-border);
		/*
		 * LOS LADOS TAMBIÉN LLEVAN SU HUECO. Faltaba, y se comía las
		 * pestañas de los extremos.
		 *
		 * Alba, 31-08-2026: «el header de abajo se corta con el borde de
		 * la pantalla; se cortan Emociones y Comunidad».
		 *
		 * MEDIDO en un móvil de 375 antes de tocarlo: cinco pestañas de
		 * 73,4 más 4 de relleno por lado suman 375 clavados. Cero
		 * holgura: «Emociones» empezaba en el píxel 4 y «Comunidad»
		 * acababa en el 371.
		 *
		 * Y por eso en un teléfono se ve peor que en el navegador del
		 * ordenador: la pantalla tiene las esquinas redondeadas, así que
		 * los últimos píxeles de cada lado no se ven aunque estén
		 * pintados. De ahí «safe-area-inset-left» y «-right», que es lo
		 * que el sistema dice que hay que apartar. Abajo ya se hacía
		 * —por la barra del gesto de inicio—, pero los lados no.
		 *
		 * No hace falta encoger la letra: las pestañas son «flex: 1», o
		 * sea que se reparten lo que quede. Con doce píxeles por lado
		 * pasan de 73,4 a 70,2, y la palabra más larga («Comunidad», 11
		 * píxeles de letra) ocupa unos 58. Sigue cabiendo sin cortarse.
		 */
		/*
		 * LAS ESQUINAS REDONDEADAS DE LA PANTALLA, QUE ES LO QUE CORTABA.
		 *
		 * El intento anterior puso «safe-area-inset-left» y «-right» y
		 * NO BASTÓ, por un motivo que no es evidente: en vertical esos
		 * dos valen CERO. Solo apartan de la muesca y de la barra de
		 * gestos; de la curva de las esquinas no apartan nada. Así que
		 * las pestañas de los extremos seguían metidas en la curva y se
		 * veían mordidas.
		 *
		 * CALCULADO, no puesto a ojo. Una esquina de radio r se come, a
		 * una altura y sobre el filo de abajo, esto de ancho:
		 *
		 *     r - raíz(r² - (r - y)²)
		 *
		 * Los móviles de hoy andan entre 40 y 62 de radio. Con el texto
		 * a 18 píxeles del filo, el peor caso —62— se come 18,3. Con 20
		 * de margen lateral queda cubierto hasta el más agresivo, y sin
		 * depender de saber qué teléfono tiene nadie.
		 *
		 * Por eso el relleno de abajo son 18 más lo que pida el sistema:
		 * los 18 no son estética, son los que suben la letra por encima
		 * de la curva. Bajarlos obliga a ensanchar mucho los lados, y
		 * entonces en una pantalla estrecha no caben las cinco.
		 *
		 * El FONDO sí llega de lado a lado y la esquina se lo come: eso
		 * da igual, es color. Lo que no puede quedar dentro de la curva
		 * es el contenido.
		 */
		padding:
			var(--rd-space-2)
			calc(20px + env(safe-area-inset-right, 0px))
			calc(18px + env(safe-area-inset-bottom, 0px))
			calc(20px + env(safe-area-inset-left, 0px));
	}

	/*
	 * Y en pantallas estrechas, la letra un punto menos.
	 *
	 * Con 20 de margen por lado, una pantalla de 320 deja 56 píxeles por
	 * pestaña y «Comunidad» a 11 ocupa unos 58: se cortaría la palabra,
	 * que es justo lo que veníamos a arreglar. A 10 cabe con holgura.
	 *
	 * Se toca la letra y no el margen porque el margen es lo que
	 * mantiene el texto fuera de la curva: si se recorta, vuelve el
	 * problema en los teléfonos pequeños, que además suelen ser los de
	 * esquina más cerrada.
	 */

	/*
	 * Y que ninguna pestaña pueda desbordar por su contenido.
	 *
	 * Sin «min-width: 0», un elemento flexible se niega a encogerse por
	 * debajo de lo que mide su texto, y en una pantalla estrecha de
	 * verdad —320 píxeles— las cinco juntas empujarían la barra a lo
	 * ancho en vez de repartirse.
	 */
	.rd-nav__item {
		min-width: 0;
	}

	.rd-nav__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 3px;
		flex: 1;
		padding: var(--rd-space-2) 0;
		text-decoration: none;
		color: var(--rd-ink-soft);
		font-size: 11px;
		line-height: 1.2;
		text-align: center;
	}

	/*
	 * PANTALLAS ESTRECHAS: LETRA MÁS PEQUEÑA Y MENOS MARGEN.
	 *
	 * VA AQUÍ ABAJO Y NO ARRIBA, y esto ya me costó una vuelta: la
	 * primera versión de esta regla estaba antes del bloque de aquí
	 * encima. Las dos son «.rd-nav__item», misma fuerza, así que ganaba
	 * la de más abajo y la letra se quedaba en 11 como si nada.
	 *
	 * A 320 píxeles, con veinte de margen por lado, cada pestaña se
	 * queda en 56 y «Comunidad» ocupa 60: la palabra salía cortada con
	 * puntos suspensivos. Cortada por el navegador en vez de por la
	 * esquina, pero cortada igual.
	 *
	 * Y EL MARGEN SE PUEDE APRETAR AQUÍ SIN RIESGO, que es lo que
	 * permite arreglarlo: los veinte píxeles de arriba están para
	 * esquivar las esquinas redondeadas, y los teléfonos de 320 son los
	 * antiguos, que tienen la pantalla con las esquinas prácticamente
	 * cuadradas. Las esquinas muy curvadas empiezan en los de 375 para
	 * arriba, donde el margen se queda como está.
	 *
	 * Con diez de margen y letra de 10: 60 píxeles por pestaña para una
	 * palabra de 53. Entra entera.
	 */
	@media (max-width: 359px) {
		.rd-nav__sections {
			padding-left: calc(10px + env(safe-area-inset-left, 0px));
			padding-right: calc(10px + env(safe-area-inset-right, 0px));
		}

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

	.rd-nav__item.is-active {
		color: var(--rd-primary);
	}

	.rd-nav__item.is-soon {
		opacity: 0.4;
		cursor: default;
	}

	.rd-nav__name {
		display: none;
	}
}

@media (min-width: 1200px) {
	.rd-nav__name {
		display: inline-flex;
	}
}

/* --- Ordenador: barra superior --- */

@media (min-width: 900px) {
	.rd-nav {
		border-bottom: 1px solid var(--rd-border);
		background: var(--rd-surface);
	}

	.rd-nav__sections {
		display: flex;
		align-items: center;
		gap: var(--rd-space-2);
	}

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

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

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

	.rd-nav__item.is-soon {
		opacity: 0.4;
		cursor: default;
	}

	.rd-nav__item.is-soon:hover {
		background: transparent;
		color: var(--rd-ink-soft);
	}

	.rd-app__main {
		padding-bottom: var(--rd-space-8);
	}

	.rd-app__title {
		font-size: 2rem;
	}
}


/* La etiqueta larga solo cabe en pantallas anchas. */
.rd-nav__short {
	display: none;
}

@media (max-width: 1100px) {
	.rd-nav__full {
		display: none;
	}

	.rd-nav__short {
		display: inline;
	}
}

@media (max-width: 899px) {
	.rd-nav__full {
		display: none;
	}

	.rd-nav__short {
		display: inline;
	}
}


/* Etiquetas que solo lee un lector de pantalla. Se quedaron huérfanas
   al reescribir una hoja de estilos; su sitio es aquí, porque las usan
   varias pantallas. */
.rd-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* El protocolo de crisis, cuando salta al guardar el diario o al
   intentar publicar algo que no debe publicarse. Marcado pero sin
   colores de alarma: quien lo lee no necesita que le griten. */
.rd-message--crisis {
	background: var(--rd-surface);
	border: 1px solid var(--rd-primary);
	color: var(--rd-ink);
	text-align: left;
	line-height: var(--rd-leading-normal);
}

.rd-message--crisis p {
	margin: 0 0 var(--rd-space-2);
}

.rd-message--crisis p:last-child {
	margin-bottom: 0;
}

/* ==========================================================
   Las caras que no son un círculo
   ==========================================================
   La cara de Reddie tiene orejas que llegan a las esquinas del dibujo,
   así que ocupa el cuadro entero mientras las demás son un círculo
   dentro de él. A igual tamaño de hueco, su cabeza se veía más pequeña.

   Se agranda para que pese lo mismo que las otras. El dibujo no cambia:
   lo único que cambia es a qué tamaño se pinta.

   Y en ningún sitio puede llevar «border-radius»: en un SVG, redondear
   las esquinas recorta lo que sobresale, y se comía las orejas.
   ========================================================== */

.rd-face--reddie {
	transform: scale(1.18);
	transform-origin: center;
}



/* ==========================================================
   Compartir la evolución
   ========================================================== */

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

.rd-share__open {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	flex-shrink: 0;
	padding: 10px var(--rd-space-4);
	border: 1px solid var(--rd-border-strong);
	border-radius: var(--rd-radius-pill);
	background: var(--rd-surface-alt);
	color: var(--rd-ink);
	font-size: var(--rd-size-sm);
	font-weight: 600;
	cursor: pointer;
}

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

.rd-share__open .rd-icon {
	width: 21px;
	height: 21px;
}

/* El panel. Cubre la pantalla porque lo que viene después es una
   decisión: qué se publica y dónde. */
.rd-share {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--rd-space-4);
	background: rgba(28, 20, 14, .62);
}

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

.rd-share__caja {
	width: 100%;
	max-width: 520px;
	padding: var(--rd-space-5);
	background: var(--rd-surface);
	border-radius: var(--rd-radius-lg);
	box-shadow: var(--rd-shadow-card);
}

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

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

.rd-share__op {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	padding: var(--rd-space-3);
	background: var(--rd-surface-alt);
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-md);
	cursor: pointer;
	text-align: center;
}

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

.rd-share__op strong {
	font-size: var(--rd-size-sm);
	color: var(--rd-ink);
}

.rd-share__op small {
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-muted);
	line-height: 1.35;
}

/* Un marco con la forma real de cada formato: se entiende antes que
   leyendo «1080 × 1920». */
.rd-share__marco {
	display: block;
	background: var(--rd-bg);
	border: 1.5px solid var(--rd-border-strong);
	border-radius: 5px;
}

.rd-share__marco--vertical {
	width: 34px;
	height: 60px;
}

.rd-share__marco--post {
	width: 48px;
	height: 60px;
}

.rd-share__nota {
	margin: var(--rd-space-4) 0 0;
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-muted);
	line-height: var(--rd-leading-normal);
}

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

@media (max-width: 599px) {
	.rd-share__open span {
		display: none;
	}

	.rd-share__open {
		padding: 10px 12px;
	}
}

/* ==========================================================
   Las páginas de la tienda
   ==========================================================
   Carrito y pago. El logo grande de la portada ocupa la pantalla
   entera, y quien va a pagar tiene que desplazarse para encontrar el
   formulario: cada desplazamiento de más es gente que se va.
   ========================================================== */

.rd-shell--tienda .rd-header {
	padding: var(--rd-space-5) 0 var(--rd-space-4);
	margin-bottom: 0;
}

.rd-shell--tienda .rd-logo {
	flex-direction: row;
	align-items: center;
	gap: 10px;
}

.rd-shell--tienda .rd-logo__mark {
	width: 44px;
	height: auto;
}

.rd-shell--tienda .rd-logo__text {
	font-size: var(--rd-size-xl);
}

/* Y el contenido, con un ancho de lectura cómodo: un formulario de
   pago a lo ancho de la pantalla se lee peor. */
.rd-shell--tienda .rd-main {
	max-width: 760px;
	margin: 0 auto;
}

/* ==========================================================
   La página de pago (WooCommerce clásico)
   ==========================================================
   El pago va a dos columnas, como el ejemplo que dio Alba: datos a la
   izquierda, «Tu pedido» y el pago a la derecha. Todo con la marca de
   Reddie. Va sobre el fondo crema, sin tarjeta alrededor, con una
   cabecera propia (título a dos tonos + «Pago seguro» + línea) que
   dibuja page.php.

   Solo se aplica en .rd-shell--pago, así que no toca ninguna otra
   pantalla de la tienda. */

/* Ancho cómodo a dos columnas. */
.rd-shell--pago .rd-main {
	max-width: 1120px;
}

.rd-checkout {
	width: 100%;
}

/* --- Cabecera --- */
.rd-checkout__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--rd-space-5);
	flex-wrap: wrap;
}

.rd-checkout__title {
	margin: 0;
	font-family: var(--rd-font-display);
	font-weight: var(--rd-weight-display);
	font-size: clamp(2.4rem, 6vw, 4rem);
	line-height: 1;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	color: var(--rd-ink);
}

.rd-checkout__accent {
	color: var(--rd-primary);
}

.rd-checkout__secure {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--rd-ink-soft);
	font-size: var(--rd-size-sm);
	font-weight: 500;
	padding-bottom: 10px;
	white-space: nowrap;
}

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

.rd-checkout__rule {
	height: 3px;
	background: var(--rd-ink);
	border-radius: 2px;
	margin: var(--rd-space-4) 0 var(--rd-space-6);
	opacity: 0.9;
}

/* --- Avisos sueltos de WooCommerce ---

   El cupón ya no existe: se apaga en el plugin, no se esconde aquí.
   Estas reglas se quedan para el resto de avisos de la pasarela. */
.rd-shell--pago .woocommerce-info a {
	color: var(--rd-primary);
}

/* --- Dos columnas: datos | pedido + pago --- */
.rd-shell--pago form.checkout.woocommerce-checkout {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	grid-template-areas:
		"datos resumen-h"
		"datos resumen";
	column-gap: var(--rd-space-7);
	row-gap: var(--rd-space-3);
	align-items: start;
}

/* Neutraliza los flotados y anchos que WooCommerce pone por su cuenta:
   con la rejilla, cada bloque va a su sitio y a todo el ancho de su
   columna. */
.rd-shell--pago #customer_details,
.rd-shell--pago #customer_details .col-1,
.rd-shell--pago #customer_details .col-2,
.rd-shell--pago #order_review {
	float: none;
	width: 100%;
}

.rd-shell--pago #customer_details {
	grid-area: datos;
}

.rd-shell--pago #order_review_heading {
	grid-area: resumen-h;
	margin-top: 0;
}

.rd-shell--pago #order_review {
	grid-area: resumen;
}

/* --- Campos y títulos de sección --- */
.rd-shell--pago .woocommerce-billing-fields > h3,
.rd-shell--pago #order_review_heading {
	font-family: var(--rd-font-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: var(--rd-size-sm);
	color: var(--rd-ink);
	margin: 0 0 var(--rd-space-4);
}

.rd-shell--pago .form-row {
	margin-bottom: var(--rd-space-4);
	padding: 0;
}

.rd-shell--pago .form-row label {
	display: block;
	font-size: 14px;
	color: var(--rd-ink-soft);
	font-weight: 500;
	margin-bottom: 6px;
}

.rd-shell--pago .woocommerce-checkout input.input-text,
.rd-shell--pago .woocommerce-checkout .form-row input[type="text"],
.rd-shell--pago .woocommerce-checkout .form-row input[type="email"],
.rd-shell--pago .woocommerce-checkout .form-row input[type="tel"],
.rd-shell--pago .woocommerce-checkout .select2-selection {
	width: 100%;
	padding: 15px 16px;
	border: 1.5px solid var(--rd-border-strong);
	border-radius: var(--rd-radius-md);
	/* Token, no un blanco fijo: en el tema oscuro el campo se oscurece
	   solo y el texto (que también es un token) sigue leyéndose. */
	background: var(--rd-surface);
	color: var(--rd-ink);
	font-family: var(--rd-font-body);
	font-size: var(--rd-size-base);
	line-height: 1.3;
}

.rd-shell--pago .woocommerce-checkout input.input-text:focus {
	outline: none;
	border-color: var(--rd-primary);
	box-shadow: var(--rd-shadow-focus);
}

/* --- «Tu pedido»: tarjeta con resumen y tabla limpia --- */
.rd-shell--pago #order_review {
	background: var(--rd-surface);
	border: 1.5px solid var(--rd-border);
	border-radius: var(--rd-radius-lg);
	padding: var(--rd-space-5);
	box-shadow: var(--rd-shadow-card);
}

.rd-shell--pago .woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 var(--rd-space-4);
}

.rd-shell--pago .woocommerce-checkout-review-order-table th,
.rd-shell--pago .woocommerce-checkout-review-order-table td {
	padding: 14px 0;
	border-bottom: 1px solid var(--rd-border);
	text-align: left;
	font-size: var(--rd-size-base);
	color: var(--rd-ink);
	vertical-align: top;
}

.rd-shell--pago .woocommerce-checkout-review-order-table th:last-child,
.rd-shell--pago .woocommerce-checkout-review-order-table td:last-child {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.rd-shell--pago .woocommerce-checkout-review-order-table thead th {
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 13px;
	color: var(--rd-ink-soft);
	font-weight: 600;
}

.rd-shell--pago .woocommerce-checkout-review-order-table .order-total th,
.rd-shell--pago .woocommerce-checkout-review-order-table .order-total td {
	border-bottom: none;
	border-top: 2px solid var(--rd-border-strong);
	padding-top: 16px;
	font-family: var(--rd-font-display);
	font-weight: 800;
	text-transform: uppercase;
}

.rd-shell--pago .woocommerce-checkout-review-order-table .order-total .amount {
	color: var(--rd-primary);
	font-size: 22px;
}

/* La ilustración del producto (Reddie con su café, sus bolos o su cine)
   que el plugin mete en la línea del resumen. Miniatura pequeña y
   redondeada a la izquierda; el nombre fluye a su lado. */
.rd-shell--pago .woocommerce-checkout-review-order-table td.product-name {
	overflow: hidden;
}

.rd-shell--pago .rd-resumen-img {
	float: left;
	margin: 2px 12px 0 0;
	line-height: 0;
}

.rd-shell--pago .rd-resumen-img img {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: contain;
	padding: 4px;
	border-radius: var(--rd-radius-md);
	border: 1px solid var(--rd-border);
	background: var(--rd-surface-alt);
}

/* --- Métodos de pago --- */
.rd-shell--pago #payment {
	background: transparent;
	padding: 0;
}

.rd-shell--pago #payment ul.payment_methods {
	border: none;
	padding: 0;
	margin: 0 0 var(--rd-space-4);
}

.rd-shell--pago #payment ul.payment_methods li {
	list-style: none;
	background: var(--rd-surface-alt);
	border: 1.5px solid var(--rd-border-strong);
	border-radius: var(--rd-radius-md);
	padding: 14px 16px;
	margin: 0 0 10px;
}

.rd-shell--pago #payment div.payment_box {
	background: var(--rd-surface-alt);
	border-radius: var(--rd-radius-md);
	color: var(--rd-ink-soft);
	margin: 8px 0 0;
}

.rd-shell--pago #payment div.payment_box::before {
	display: none;
}

/* --- Botón de pagar --- */
.rd-shell--pago #place_order {
	width: 100%;
	background: var(--rd-primary);
	color: #fff;
	border: none;
	border-radius: var(--rd-radius-pill);
	padding: 18px 24px;
	font-family: var(--rd-font-display);
	font-weight: 800;
	font-size: var(--rd-size-lg);
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background var(--rd-transition);
}

.rd-shell--pago #place_order:hover {
	background: var(--rd-primary-hover);
}

/* --- Móvil: una columna, con margen a los lados --- */
@media (max-width: 820px) {
	.rd-shell--pago form.checkout.woocommerce-checkout {
		grid-template-columns: 1fr;
		grid-template-areas:
			"datos"
			"resumen-h"
			"resumen";
		row-gap: var(--rd-space-5);
	}

	.rd-checkout__rule {
		margin: var(--rd-space-3) 0 var(--rd-space-5);
	}
}

/* --- El país va puesto, no preguntado ---

   La tienda es española y quien apoya a Reddie llega desde una cuenta
   en español, así que preguntarle el país es un campo de más en una
   pantalla que existe para no tener ninguno. Pero el campo tiene que
   estar en el formulario: la pasarela lo mira para decidir qué formas
   de pago ofrecer, y sin él no dibuja el recuadro de la tarjeta.

   Se esconde con position, no con display:none, porque un campo
   obligatorio oculto del todo no se puede enfocar y algunos
   navegadores se atascan al avisar de que falta. */
.rd-shell--pago .rd-campo-oculto {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --- Llegar a pagar sin nada que pagar ---

   Se vuelve atrás con el navegador, se guarda el enlace en marcadores,
   se abre en otra pestaña al día siguiente. En todos esos casos el
   carrito ya no está, y lo que toca es volver a ofrecer las tres
   opciones. WooCommerce por su cuenta deja la pantalla vacía. */
.rd-pago-vacio {
	max-width: 560px;
	margin: 0 auto;
	text-align: center;
}

.rd-pago-vacio__texto {
	margin: 0 0 var(--rd-space-5);
	color: var(--rd-ink-soft);
}

.rd-pago-vacio__opciones {
	display: grid;
	gap: var(--rd-space-3);
	margin: 0 0 var(--rd-space-5);
	padding: 0;
	list-style: none;
}

.rd-pago-vacio__boton {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rd-space-3);
	padding: var(--rd-space-3) var(--rd-space-4);
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-md);
	background: var(--rd-surface);
	color: var(--rd-ink);
	text-decoration: none;
	text-align: left;
}

.rd-pago-vacio__boton:hover,
.rd-pago-vacio__boton:focus-visible {
	border-color: var(--rd-primary);
}

.rd-pago-vacio__boton strong {
	flex-shrink: 0;
	color: var(--rd-primary);
}

.rd-pago-vacio__volver {
	margin: 0;
}

/* Nota técnica para quien administra. No la ve nadie más. */
.rd-pago-vacio__diag {
	margin-top: var(--rd-space-6);
	padding: var(--rd-space-3) var(--rd-space-4);
	border: 1px dashed var(--rd-border);
	border-radius: var(--rd-radius-md);
	font-size: 0.875rem;
	text-align: left;
	color: var(--rd-ink-soft);
}

.rd-pago-vacio__diag ul {
	margin: var(--rd-space-2) 0 0;
	padding-left: 1.25em;
}

/* La explicación de por qué el registro está cerrado. Un párrafo, no
   un aviso de error: no ha pasado nada malo, es que todavía no toca. */
.rd-auth__nota {
	margin: 0 0 var(--rd-space-5);
	font-size: var(--rd-size-sm);
	line-height: var(--rd-leading-relaxed);
	color: var(--rd-ink-soft);
	text-align: center;
}

/* --- El ojo de ver la contraseña ---

   El campo se envuelve en una caja con posición propia para poder
   colgar el botón del borde derecho. El relleno de la derecha del
   campo deja sitio al ojo: sin él, el texto pasa por debajo. */
.rd-pass {
	position: relative;
	display: block;
}

.rd-pass__input {
	width: 100%;
	padding-right: 44px;
}

.rd-pass__ojo {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--rd-ink-muted);
	cursor: pointer;
}

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

.rd-pass__ojo svg {
	width: 20px;
	height: 20px;
}


/* ==========================================================
   El distintivo de nivel
   ==========================================================
   La silueta de la cabeza de Reddie con el número dentro.

   El color no está en la imagen: la imagen es una máscara en blanco y el
   color lo pone el CSS. Así el distintivo sale exactamente del mismo
   coral que la marca, y si algún día cambia ese coral, cambia solo.

   Antes iba pintado dentro del archivo y por eso no coincidía con el
   resto: eran dos marrones distintos que nadie había puesto de acuerdo.
   ========================================================== */

.rd-nivel {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	/* La cabeza es más ancha que alta —tiene orejas—, así que la caja
	   respeta esa proporción o la silueta sale ovalada. */
	width: 1.35em;
	height: 1em;
	background-color: var(--rd-primary);
	-webkit-mask-image: url('../img/nivel-cabeza.png');
	mask-image: url('../img/nivel-cabeza.png');
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* El número va encima de la máscara, no dentro: si estuviera dentro lo
   recortaría también y desaparecería. */
.rd-nivel__n {
	position: absolute;
	top: 58%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: var(--rd-font-display);
	font-weight: var(--rd-weight-display);
	font-size: .34em;
	line-height: 1;
	color: #FFF6EF;
}

/* Ese 58 por ciento no es un capricho: la cabeza tiene las orejas
   arriba, así que su centro visual está más abajo que el geométrico y
   centrado exacto se ve alto. */

/* El salto de subir de nivel.

   Cuando Reddie sube sin recargar, el número cambia solo en una esquina
   de la pantalla mientras estás mirando a Reddie, y no te enteras. Un
   par de brincos lo dicen sin necesidad de un cartel.

   Es un gesto de alegría, así que crece y vuelve: nada de parpadeos ni
   de rojos, que se leen como una alarma. */
@keyframes rd-nivel-sube {
	0%   { transform: scale(1); }
	30%  { transform: scale(1.35); }
	50%  { transform: scale(1.1); }
	70%  { transform: scale(1.22); }
	100% { transform: scale(1); }
}

.rd-nivel.is-subiendo {
	animation: rd-nivel-sube 900ms ease;
}

/* Quien haya pedido menos movimiento no recibe los brincos. El número
   cambia igual, que es lo que de verdad importa. */
@media (prefers-reduced-motion: reduce) {
	.rd-nivel.is-subiendo {
		animation: none;
	}
}

/* --- El nivel en la barra ---

   Sustituye al icono de la casa, así que tiene que medir como los demás
   iconos de la barra y no como un añadido. */
.rd-nav__nivel {
	font-size: 30px;
}

/* Y los iconos de la barra, algo más grandes: con la cabeza de Reddie al
   lado, los de 22 píxeles se veían pequeños en comparación. */
.rd-nav__item .rd-icon,
.rd-nav__item svg {
	width: 26px;
	height: 26px;
}

@media (max-width: 767px) {
	.rd-nav__nivel {
		font-size: 26px;
	}

	.rd-nav__item .rd-icon,
	.rd-nav__item svg {
		width: 23px;
		height: 23px;
	}
}

/* --- El nivel sobre la pastilla activa ---

   Dentro de Casa, la pastilla de la sección se pinta en coral y el
   distintivo también: coral sobre coral es invisible. Ahí se invierte
   —silueta clara y número oscuro— igual que se invierte el texto.

   Se hace con dos reglas y no con una porque el color de la silueta lo
   pone «background-color» y el del número «color»: son dos propiedades
   distintas de dos elementos distintos. */
.rd-nav__item.is-active .rd-nivel {
	background-color: #FFF6EF;
}

.rd-nav__item.is-active .rd-nivel__n {
	color: var(--rd-primary);
}

/* En móvil la sección activa no lleva pastilla, solo el texto en coral,
   así que el distintivo se queda como está: sobre el fondo de la barra
   el coral se lee bien. */
@media (max-width: 899px) {
	.rd-nav__item.is-active .rd-nivel {
		background-color: var(--rd-primary);
	}

	.rd-nav__item.is-active .rd-nivel__n {
		color: #FFF6EF;
	}
}

/* --- El nivel en el muro, junto al nombre ---

   Estaba empujado al extremo derecho de la fila y del tamaño del avatar.
   Así se leía como un dato aparte; pegado al nombre se lee como parte de
   quién escribe, que es lo que es. */
.rd-com__nivel {
	font-size: 22px;
	margin-left: 6px;
}

@media (max-width: 767px) {
	.rd-com__nivel {
		font-size: 19px;
	}
}