/**
 * Escucha a Reddie.
 */

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

.rd-oracle__box {
	max-width: 640px;
	margin: 0 auto;
	width: 100%;
}

.rd-oracle__title {
	margin: 0 0 var(--rd-space-4);
	font-family: var(--rd-font-display);
	font-weight: var(--rd-weight-display);
	font-size: var(--rd-size-xl);
	color: var(--rd-ink);
	text-align: center;
}

.rd-oracle__heading {
	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);
}

/* El mensaje del día, con más aire y letra algo mayor que el resto de
   la aplicación: es para leerlo despacio, no para ojearlo. */
.rd-oracle__msg {
	font-size: var(--rd-size-lg);
	line-height: 1.7;
	color: var(--rd-ink);
	min-height: 120px;
}

.rd-oracle__msg p {
	margin: 0 0 var(--rd-space-4);
}

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

.rd-oracle__wait {
	text-align: center;
}

.rd-oracle__lead {
	font-size: var(--rd-size-lg);
	color: var(--rd-ink);
	margin: 0 0 var(--rd-space-3);
}

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

/* --- Mientras escribe --- */

.rd-oracle__loading {
	display: flex;
	gap: 6px;
	justify-content: center;
	margin-bottom: var(--rd-space-3);
}

.rd-oracle__loading span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--rd-primary);
	animation: rd-latido 1.2s ease-in-out infinite;
}

.rd-oracle__loading span:nth-child(2) {
	animation-delay: 0.2s;
}

.rd-oracle__loading span:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes rd-latido {
	0%, 60%, 100% {
		opacity: 0.25;
	}

	30% {
		opacity: 1;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.rd-oracle__loading span {
		animation: none;
		opacity: 0.6;
	}
}

/* --- Los anteriores --- */

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

.rd-oracle__old {
	padding: var(--rd-space-4);
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-md);
	font-size: var(--rd-size-sm);
	line-height: var(--rd-leading-normal);
	color: var(--rd-ink-soft);
}

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

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

.rd-oracle__day {
	font-weight: 600;
	color: var(--rd-ink);
	font-size: var(--rd-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* ==========================================================
   Reddie: dormido y despierto
   ==========================================================
   Mientras espera, medita y levita. A la hora, abre los ojos y mira de
   frente. El cambio de postura es lo que marca que ha llegado el
   mensaje, más que cualquier aviso escrito.
   ========================================================== */

.rd-oracle__reddie {
	display: flex;
	justify-content: center;
	margin-bottom: var(--rd-space-5);
}

.rd-oracle__reddie img {
	display: block;
	height: auto;
}

/* --- Dormido: levita --- */

.rd-oracle__reddie--medita {
	position: relative;
	padding-bottom: 26px;
}

.rd-oracle__reddie--medita img {
	width: min(190px, 50vw);
	position: relative;
	z-index: 1;
	/* Cuatro segundos por vuelta: lo bastante lento como para leerse
	   como respirar y no como una animación pidiendo atención. Una
	   pantalla de espera no debería tener prisa. */
	animation: rd-levitar 4s ease-in-out infinite;
}

/* La sombra del suelo. Se encoge y se aclara cuando Reddie sube, que es
   lo que de verdad hace que parezca que levita: sin ella el dibujo solo
   sube y baja, y no se sabe respecto a qué. */
.rd-oracle__reddie--medita::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: min(120px, 32vw);
	height: 16px;
	margin: 0 auto;
	border-radius: 50%;
	background: rgba(58, 33, 22, .38);
	filter: blur(5px);
	animation: rd-sombra 4s ease-in-out infinite;
}

@keyframes rd-sombra {
	0%, 100% { transform: scale(1);   opacity: 1; }
	50%      { transform: scale(.82); opacity: .6; }
}

@keyframes rd-levitar {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-14px); }
}

/* --- Despierto: mira de frente --- */

.rd-oracle__reddie--despierto img {
	width: min(190px, 52vw);
	/* Una entrada corta, solo la primera vez que se pinta: aparece
	   creciendo un poco, como quien abre los ojos. */
	animation: rd-despertar .7s ease-out both;
}

@keyframes rd-despertar {
	from { opacity: 0; transform: scale(.9); }
	to   { opacity: 1; transform: scale(1); }
}

/* Quien pide menos movimiento se queda las dos quietas. */
@media (prefers-reduced-motion: reduce) {
	.rd-oracle__reddie--medita img,
	.rd-oracle__reddie--despierto img {
		animation: none;
	}
}

/* ==========================================================
   El templo
   ==========================================================
   Un oráculo no vive en un recuadro. Frontón triangular arriba,
   columnas a los lados y escalinata abajo: la forma cuenta de qué va
   la pantalla antes de que nadie lea nada.

   Todo con formas de CSS, sin imágenes: así se tiñe solo con el fondo
   que tenga cada persona, incluido el oscuro.
   ========================================================== */

.rd-templo {
	position: relative;
	max-width: 620px;
	margin: 0 auto var(--rd-space-6);
	padding: 0;
	background: none;
	box-shadow: none;
	border: 0;
}

/* --- El frontón --- */

.rd-templo__fronton {
	position: relative;
	margin: 0 -8px -3px;
	line-height: 0;
}

.rd-templo__svg {
	display: block;
	width: 100%;
	height: 96px;
}

/* Los capiteles: se apoyan sobre las columnas, así que van justo aquí,
   entre el frontón y el cuerpo. */
.rd-templo__capiteles {
	position: relative;
	height: 0;
	z-index: 2;
}

.rd-templo__capitel {
	position: absolute;
	top: -6px;
	width: 104px;
	height: 54px;
}

.rd-templo__capitel--izq { left: -24px; }
.rd-templo__capitel--der { right: -24px; }

/* --- El cuerpo, entre columnas --- */

.rd-templo__cuerpo {
	position: relative;
	padding: calc(var(--rd-space-6) + 44px) 74px var(--rd-space-6);
	background: var(--rd-surface);
	border-left: 2px solid var(--rd-border-strong);
	border-right: 2px solid var(--rd-border-strong);
}

/* Las columnas: franjas verticales a los lados. Las estrías son un
   degradado repetido, que pesa menos que cualquier dibujo. */
.rd-templo__cuerpo::before,
.rd-templo__cuerpo::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 52px;
	background:
		repeating-linear-gradient(90deg,
			var(--rd-border) 0 2px,
			transparent 2px 11px),
		var(--rd-surface-alt);
	border-right: 2px solid var(--rd-border-strong);
	border-left: 2px solid var(--rd-border-strong);
}

.rd-templo__cuerpo::before { left: 0; }
.rd-templo__cuerpo::after  { right: 0; }

/* --- La escalinata --- */

.rd-templo__base {
	margin: 0 -14px;
}

.rd-templo__base span {
	display: block;
	height: 13px;
	background: var(--rd-surface-alt);
	border: 2px solid var(--rd-border-strong);
	border-radius: 3px;
	margin-top: -2px;
}

.rd-templo__base span:nth-child(1) { margin: 0 14px; }
.rd-templo__base span:nth-child(2) { margin-left: 7px; margin-right: 7px; }

/* En pantallas estrechas las columnas se comen el texto. */
@media (max-width: 599px) {
	.rd-templo__cuerpo {
		padding-left: var(--rd-space-5);
		padding-right: var(--rd-space-5);
	}

	.rd-templo__cuerpo::before,
	.rd-templo__cuerpo::after {
		width: 14px;
		background: var(--rd-surface-alt);
	}

	.rd-templo__svg {
		height: 68px;
	}

	/* En estrecho las columnas se afinan y los capiteles no caben. */
	.rd-templo__capiteles {
		display: none;
	}

	.rd-templo__cuerpo {
		padding-top: var(--rd-space-5);
	}
}

/* --- La cuenta atrás --- */

.rd-oracle__reloj {
	display: flex;
	justify-content: center;
	gap: var(--rd-space-3);
	margin: var(--rd-space-4) 0 var(--rd-space-5);
}

.rd-oracle__reloj span {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 68px;
	padding: 9px 6px;
	background: var(--rd-surface-alt);
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-md);
}

.rd-oracle__reloj b {
	font-family: var(--rd-font-display);
	font-weight: var(--rd-weight-display);
	font-size: 30px;
	line-height: 1;
	color: var(--rd-ink);
	/* Cifras de ancho fijo: sin esto el reloj da saltos cada segundo. */
	font-variant-numeric: tabular-nums;
}

.rd-oracle__reloj small {
	margin-top: 3px;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--rd-ink-muted);
}

/* ==========================================================
   El pergamino
   ==========================================================
   Dibujado, no fotografiado. La foto de un pergamino real quedaba
   pegada en medio de una pantalla de formas planas: se veía el
   recorte. Este usa los colores y el trazo del resto de Reddie, así
   que pertenece a la misma pantalla.

   Todo con formas de CSS: sin imágenes que cargar y sin bordes que
   recortar mal.
   ========================================================== */

.rd-pergamino {
	position: relative;
	margin: var(--rd-space-6) 0 0;
	padding: var(--rd-space-6) var(--rd-space-5);
	/* El papel: crema cálido con un punto de tostado hacia los bordes,
	   como el papel que ha estado enrollado. */
	background:
		linear-gradient(90deg, rgba(196, 158, 106, .22) 0, transparent 26px, transparent calc(100% - 26px), rgba(196, 158, 106, .22) 100%),
		#FBF1DE;
	border: 2px solid #C9A97A;
	border-radius: 3px;
	color: #4A3520;
}

/* Los dos rodillos. Sobresalen un poco por los lados, que es lo que
   hace que se lea como un rollo y no como una tarjeta beige. */
.rd-pergamino::before,
.rd-pergamino::after {
	content: "";
	position: absolute;
	left: -14px;
	right: -14px;
	height: 18px;
	background: linear-gradient(180deg, #E8CFA4 0%, #D8B884 52%, #B9945F 100%);
	border: 2px solid #8C6A3F;
	border-radius: 99px;
}

.rd-pergamino::before {
	top: -11px;
}

.rd-pergamino::after {
	bottom: -11px;
}

.rd-pergamino p {
	margin: 0 0 var(--rd-space-4);
	line-height: var(--rd-leading-relaxed);
	color: #4A3520;
}

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

/* La primera línea suele ser el título de la fábula, la cita o el
   nombre de la persona: se le da presencia. */
.rd-pergamino p:first-child {
	font-family: var(--rd-font-display);
	font-weight: var(--rd-weight-display);
	font-size: var(--rd-size-lg);
	color: #3B2916;
}

@media (max-width: 599px) {
	.rd-pergamino {
		padding: var(--rd-space-5) var(--rd-space-4);
	}

	.rd-pergamino::before,
	.rd-pergamino::after {
		left: -8px;
		right: -8px;
	}
}

/* El botón de guardar el mensaje del día. */
.rd-oracle__guardar {
	margin-top: var(--rd-space-5);
	text-align: center;
}

/* --- La lista de oráculos anteriores --- */

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

/* Cada uno en su recuadro: separados se leen como mensajes distintos,
   que es lo que son. Seguidos parecían un texto largo.

   ALBA, 27-08-2026: «que las páginas de consejos anteriores vayan
   alternando entre azul oscuro y azul clarito».

   POR QUÉ ALTERNAR ARREGLA ALGO DE VERDAD. Todos eran del mismo crema
   que la página, así que el recuadro solo se veía por su borde de un
   píxel y una lista de ocho consejos volvía a leerse como un texto
   largo, que era justo lo que el recuadro venía a evitar. Con dos
   fondos que se turnan, dónde acaba uno y empieza el siguiente se ve
   sin leer.

   Y LOS DOS AZULES SON ISLAS DE COLOR, como las pastillas de las
   emociones: se pintan aquí el fondo Y la letra, así que no dependen
   del tema. Es lo que hace que se lean igual con Calma y con los cinco
   fondos claros. Si solo se pintara el fondo, la letra vendría del tema
   y de noche saldría clara sobre el azul clarito.

   MEDIDO, no elegido a ojo:
     - crema sobre el azul oscuro   10,16:1
     - azul tinta sobre el clarito   9,78:1
     - y los dos azules entre sí     9,36:1, o sea que el turno se ve.

   EL BORDE HACE FALTA y no es un adorno: el azul clarito contra el
   papel de día mide 1,18:1 y el oscuro contra el papel de Calma 1,12:1,
   así que en uno de los dos temas el recuadro se fundiría con la
   página. Con este azul medio, el borde mide entre 2,80 y 3,52 contra
   los cuatro fondos posibles, y el recuadro se ve siempre.

   Las variables van en la propia hoja para que la cabecera, la fecha y
   el «Eliminar» se tiñan solos: escritas ahí abajo una a una, el día
   que se cambie un azul habría que acordarse de cinco sitios. */
.rd-oracle__old {
	padding: var(--rd-space-5);
	background: var(--rd-hoja-fondo);
	border: 1px solid #6E86AB;
	border-radius: var(--rd-radius-lg);
	color: var(--rd-hoja-tinta);
}

.rd-oracle__old:nth-child(odd) {
	--rd-hoja-fondo: #26385E;
	--rd-hoja-tinta: #F4EFEA;
	--rd-hoja-suave: #C9D6EA;
	--rd-hoja-linea: rgba(244, 239, 234, .28);
}

.rd-oracle__old:nth-child(even) {
	--rd-hoja-fondo: #DDE8F5;
	--rd-hoja-tinta: #22355C;
	--rd-hoja-suave: #48597C;
	--rd-hoja-linea: rgba(34, 53, 92, .22);
}

/* El texto del consejo, dentro del azul que le toque. */
.rd-oracle__old p {
	color: var(--rd-hoja-tinta);
}

.rd-oracle__old-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rd-space-4);
	margin-bottom: var(--rd-space-3);
	padding-bottom: var(--rd-space-3);
	border-bottom: 1px solid var(--rd-hoja-linea);
}

.rd-oracle__old .rd-oracle__day {
	margin: 0;
	color: var(--rd-hoja-tinta);
}

/* Quitar: discreto. No compite con la lectura, que es a lo que se
   viene. */
.rd-oracle__quitar {
	position: relative;
	flex-shrink: 0;
}

/* «Eliminar» se tiñe con el tono suave de su hoja. Con el gris de la
   página se perdía del todo sobre el azul oscuro: medía 1,9. */
.rd-oracle__quitar > summary {
	cursor: pointer;
	list-style: none;
	font-size: var(--rd-size-xs);
	color: var(--rd-hoja-suave, var(--rd-ink-muted));
}

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

/* El rojo de siempre sobre el azul oscuro mide 2,3 y no se lee, así que
   la hoja oscura lleva el suyo, más claro. Es el mismo rojo subido de
   luz, igual que hace «--rd-chart-line» con Calma. */
.rd-oracle__quitar > summary:hover {
	color: #C0392B;
	text-decoration: underline;
}

.rd-oracle__old:nth-child(odd) .rd-oracle__quitar > summary:hover {
	color: #FF9A8B;
}

.rd-oracle__quitar .rd-confirm__box {
	position: absolute;
	right: 0;
	z-index: 3;
	width: min(280px, 78vw);
	background: var(--rd-surface);
	box-shadow: var(--rd-shadow-card);
	text-align: left;
}

/* El botón de abrir el oráculo, donde antes estaba la cuenta atrás. */
.rd-oracle__abrir {
	margin: var(--rd-space-5) 0 0;
	text-align: center;
}

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

/* --- La ficha de las biografías: retrato y enlace ---

   Solo aparece en las piezas de biografía. La foto es de tamaño
   medio y redonda, para que quepa dentro del pergamino sin partir
   la lectura en dos, y va después del texto: primero se lee quién
   fue y qué hizo, y luego se le pone cara.

   De seis de las catorce personas no hay foto que se pueda usar, así
   que la ficha tiene que verse bien también con el enlace solo. */
.rd-oracle__ficha {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--rd-space-3);
	margin-top: var(--rd-space-5);
	padding-top: var(--rd-space-4);
	border-top: 1px solid var(--rd-border);
	text-align: center;
}

.rd-oracle__retrato {
	margin: 0;
}

.rd-oracle__retrato img {
	width: 132px;
	height: 132px;
	object-fit: cover;
	border-radius: 50%;
	border: 3px solid var(--rd-surface-alt);
	display: block;
}

/* El crédito de la foto. Pequeño y discreto, pero presente: con
   licencia Creative Commons, nombrar a quien la hizo es obligatorio,
   no un detalle de cortesía. */
.rd-oracle__retrato figcaption {
	margin-top: var(--rd-space-2);
	font-size: 0.75rem;
	color: var(--rd-ink-soft);
}

.rd-oracle__wiki {
	font-size: var(--rd-size-sm);
	color: var(--rd-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

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

@media (max-width: 480px) {
	.rd-oracle__retrato img {
		width: 108px;
		height: 108px;
	}
}