/**
 * Estilos del bloque de resultados dentro de las entradas diarias.
 *
 * A diferencia del widget en vivo, esto es estático: son los números de la
 * fecha del titular y no cambian. Look editorial, pensado para leerse dentro
 * de un artículo, y adaptado al modo claro y oscuro del tema.
 */

.rdlot-post {
	--rdlot-post-panel: #ffffff;
	--rdlot-post-borde: #e5e7eb;
	--rdlot-post-texto: #111827;
	--rdlot-post-tenue: #6b7280;
	--rdlot-post-suave: #f9fafb;

	display: grid;
	/* 340px deja caber una fila completa de bolas sin que la última caiga sola. */
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	/* `stretch` iguala el alto de todas las tarjetas de una misma fila: los
	   bordes inferiores quedan alineados en vez de dentados. */
	align-items: stretch;
	gap: 20px;
	margin: 28px 0 36px;
	font-family: inherit;
}

.rdlot-post *,
.rdlot-post *::before,
.rdlot-post *::after {
	box-sizing: border-box;
}

/* ---------- Tarjeta de banca ---------- */

.rdlot-post__banca {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--rdlot-post-panel);
	border: 1px solid var(--rdlot-post-borde);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -16px rgba(0, 0, 0, .35);
}

/* ---------- Orden por tamaño ----------
   Las bancas traen entre 1 y 6 sorteos, así que dejarlas en el orden de la
   fuente mezcla en la misma fila una tarjeta de 160px con otra de 650px.
   Agrupando las grandes con las grandes, cada fila queda pareja y el alto
   que regala `stretch` se reduce al mínimo.

   Se ordena por CSS y no al generar el HTML a propósito: así también se
   arreglan las entradas ya publicadas, cuyo HTML está congelado en la base
   de datos. Las reglas van de menos a más sorteos porque todas tienen la
   misma especificidad: gana la última que coincida, o sea la del número
   más alto de sorteos que tenga la tarjeta. */
.rdlot-post__banca { order: 9; }
.rdlot-post__banca:has(.rdlot-post__sorteo:nth-child(2)) { order: 8; }
.rdlot-post__banca:has(.rdlot-post__sorteo:nth-child(3)) { order: 7; }
.rdlot-post__banca:has(.rdlot-post__sorteo:nth-child(4)) { order: 6; }
.rdlot-post__banca:has(.rdlot-post__sorteo:nth-child(5)) { order: 5; }
.rdlot-post__banca:has(.rdlot-post__sorteo:nth-child(6)) { order: 4; }
.rdlot-post__banca:has(.rdlot-post__sorteo:nth-child(7)) { order: 3; }
.rdlot-post__banca:has(.rdlot-post__sorteo:nth-child(8)) { order: 2; }

.rdlot-post__cab {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 12px 16px;
	background: linear-gradient(135deg, var(--marca) 0%, color-mix(in srgb, var(--marca) 74%, #000) 100%);
	color: var(--marca-texto);
}

/* Apaisados y de proporciones dispares: alto fijo y ancho libre hasta un tope
   (ver la nota equivalente en rd-loterias.css). */
.rdlot-post__logo {
	flex-shrink: 0;
	width: auto;
	max-width: 80px;
	height: 28px;
	padding: 3px 6px;
	border-radius: 7px;
	background: rgba(255, 255, 255, .94);
	object-fit: contain;
	box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
}

/* Los logos blancos —Loteka, Lotodom y La Suerte Dominicana— desaparecían en la
   caja clara: van hechos para fondo de color, no para papel. A esos se les da la
   caja en oscuro, teñida con el color de la banca para que siga siendo la
   cabecera de su tarjeta, y un filo claro que la delimite. El resto de logos son
   oscuros y en esta caja no se leerían, así que la lista es explícita
   (RDLOT_Fuente::LOGOS_CLAROS), medida sobre los PNG del origen. */
.rdlot-post__logo--claro {
	background: #14110f;
	background: color-mix(in srgb, var(--marca) 22%, #000);
	border: 1px solid rgba(255, 255, 255, .34);
}

/* Es un <h3> real: cuenta como encabezado del artículo, pero sin los
   márgenes ni el tamaño que le daría el tema. */
.rdlot-post__nombre {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: .01em;
	color: inherit;
}

/* ---------- Sorteo ---------- */

.rdlot-post__sorteos {
	flex: 1; /* Ocupa el alto que `stretch` le regale a la tarjeta. */
	display: flex;
	flex-direction: column;
	padding: 4px 16px 14px;
}

/* El sobrante se reparte entre todos los sorteos en vez de acumularse en un
   hueco muerto al final de la tarjeta. */
.rdlot-post__sorteo {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 13px 0;
	border-bottom: 1px dashed var(--rdlot-post-borde);
}

.rdlot-post__sorteo:last-child {
	border-bottom: 0;
	padding-bottom: 2px;
}

.rdlot-post__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 9px;
}

.rdlot-post__juego {
	font-size: .88rem;
	font-weight: 700;
	color: var(--rdlot-post-texto);
}

.rdlot-post__fecha {
	flex-shrink: 0;
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--rdlot-post-tenue);
}

/* ---------- Bolas ---------- */

/* Rejilla en vez de `flex-wrap`: con columnas de ancho fijo, los números de
   un sorteo caen justo debajo de los del anterior. Los sorteos largos (el
   Super Kino son 20 bolas) se parten en líneas completas y ordenadas en
   lugar de envolverse de cualquier manera. */
.rdlot-post__bolas {
	display: grid;
	grid-template-columns: repeat(auto-fill, 42px);
	justify-content: start;
	gap: 7px;
}

/* Ancho fijo, no `min-width`: los números son todos de dos cifras, así que
   ninguna bola necesita ensancharse y todas ocupan la misma columna. */
.rdlot-post__bola {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border-radius: 50%;
	background: linear-gradient(160deg, #ffffff 0%, #d7dde5 100%);
	border: 1px solid rgba(0, 0, 0, .08);
	color: #0b1220;
	font-size: 1.02rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	box-shadow: inset 0 -2px 4px rgba(0, 0, 0, .1), 0 2px 5px rgba(0, 0, 0, .12);
}

.rdlot-post__bola--square {
	border-radius: 10px;
}

.rdlot-post__bola--red {
	background: linear-gradient(160deg, #f87171 0%, #b91c1c 100%);
	border-color: transparent;
	color: #fff;
}

.rdlot-post__bola--blue {
	background: linear-gradient(160deg, #60a5fa 0%, #1d4ed8 100%);
	border-color: transparent;
	color: #fff;
}

.rdlot-post__bola--green {
	background: linear-gradient(160deg, #4ade80 0%, #15803d 100%);
	border-color: transparent;
	color: #fff;
}

.rdlot-post__bola--yellow {
	background: linear-gradient(160deg, #fde047 0%, #ca8a04 100%);
	border-color: transparent;
	color: #1c1917;
}

/* ---------- Responsive ---------- */

@media (max-width: 600px) {
	.rdlot-post {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	/* En una sola columna no hay filas que emparejar: mandan el orden de la
	   fuente y el alto natural de cada tarjeta. */
	.rdlot-post__banca,
	.rdlot-post__banca:has(.rdlot-post__sorteo:nth-child(2)),
	.rdlot-post__banca:has(.rdlot-post__sorteo:nth-child(3)),
	.rdlot-post__banca:has(.rdlot-post__sorteo:nth-child(4)),
	.rdlot-post__banca:has(.rdlot-post__sorteo:nth-child(5)),
	.rdlot-post__banca:has(.rdlot-post__sorteo:nth-child(6)),
	.rdlot-post__banca:has(.rdlot-post__sorteo:nth-child(7)),
	.rdlot-post__banca:has(.rdlot-post__sorteo:nth-child(8)) {
		order: 0;
	}

	.rdlot-post__sorteo {
		flex: 0 0 auto;
	}

	.rdlot-post__bolas {
		grid-template-columns: repeat(auto-fill, 38px);
	}

	.rdlot-post__bola {
		width: 38px;
		height: 38px;
		font-size: .95rem;
	}
}

/* Sin variante por `prefers-color-scheme`: quien manda aquí es la paleta del
   tema, no la del sistema operativo. Atender al sistema dejaba tarjetas
   oscuras sobre una página clara. Si algún día el tema pasa a oscuro, basta
   con redefinir las cuatro variables de arriba. */