/*
 * República al Día — Loterías v6.1 "Tu Boleto mejorado" (19-10-2026, noche)
 * Restaurado a petición del dueño (la v7.0 no le gustó). Diseño original de la
 * v6.0 con los tres ajustes que pidió:
 *   1. Colores más visibles: pastels un punto más intensos + barra de acento
 *      y botón de compartir en el color de cada lotería.
 *   2. Botones mejor distribuidos: fila uniforme de dos columnas iguales.
 *   3. Título ordenado: título grande arriba y los datos en línea limpia.
 */

.dum-loteria--glass {
	position: relative;
	margin: 0 0 28px;
	padding: 24px 20px 24px;
	border-radius: 24px;
	overflow: hidden;
	background:
		radial-gradient(circle at 12% 10%, #fbe1ec 0%, transparent 42%),
		radial-gradient(circle at 88% 8%, #dcebfb 0%, transparent 45%),
		radial-gradient(circle at 20% 92%, #dcf5ee 0%, transparent 48%),
		radial-gradient(circle at 85% 88%, #f0e4fb 0%, transparent 45%),
		linear-gradient(135deg, #f9f6fc 0%, #f0f6fb 50%, #f5faf7 100%);
	border: 1px solid rgba(255, 255, 255, 0.95);
	box-shadow:
		0 12px 32px rgba(120, 110, 160, 0.13),
		inset 0 1px 0 rgba(255, 255, 255, 0.95);
	font-variant-numeric: tabular-nums;
}

/* ---------- Ajuste 3: título ordenado ---------- */

.dum-loteria__marquesina {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 20px;
	padding: 0 4px;
}

.dum-loteria__marquesina-titulo {
	font-size: 27px;
	font-weight: 900;
	letter-spacing: -.02em;
	color: #232633;
	line-height: 1.1;
}

/* Retoque: barra de acento pastel debajo del titulo. */
.dum-loteria__marquesina-titulo::after {
	content: "";
	display: block;
	width: 58px;
	height: 6px;
	margin-top: 7px;
	border-radius: 999px;
	background: #f6a7c0;
}

.dum-loteria__marquesina-sub {
	font-size: 13.5px;
	font-weight: 600;
	color: #7c7f8c;
	letter-spacing: .01em;
}

.dum-loteria__marquesina-sub::before {
	content: "●";
	color: #22c55e;
	font-size: 10px;
	margin-right: 8px;
	vertical-align: 2px;
}

/* ---------- Rejilla ---------- */

.dum-loteria__rejilla {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 18px;
}

/* ---------- Tarjetas ---------- */

.dum-loteria__tarjeta {
	position: relative;
	overflow: hidden;
	background: #ffffff;
	border: 1px solid rgba(35, 38, 51, 0.07);
	border-radius: 18px;
	padding: 20px 20px 18px;
	box-shadow: 0 6px 18px rgba(120, 110, 160, 0.10);
	transition: transform .16s ease, box-shadow .16s ease;
}

.dum-loteria__tarjeta:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 26px rgba(120, 110, 160, 0.16);
}

/* Ajuste 1: barra de acento en el color de la lotería, más visible. */
.dum-loteria__tarjeta::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: var(--c);
}

.dum-loteria__tarjeta--c1 { --c: #a583d9; }
.dum-loteria__tarjeta--c2 { --c: #5cbfb4; }
.dum-loteria__tarjeta--c3 { --c: #f7ac30; }
.dum-loteria__tarjeta--c4 { --c: #ef77a4; }
.dum-loteria__tarjeta--c5 { --c: #55a1f2; }
.dum-loteria__tarjeta--c6 { --c: #f9cd10; }
.dum-loteria__tarjeta--c7 { --c: #f77a4f; }
.dum-loteria__tarjeta--c8 { --c: #93bf55; }

/* ---------- Cabeza ---------- */

.dum-loteria__cabeza {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.dum-loteria__hoy {
	background: #ff5d8f;
	color: #ffffff;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .12em;
	padding: 4px 11px;
	border-radius: 999px;
}

.dum-loteria__hora {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12.5px;
	font-weight: 700;
	color: #7c7f8c;
}

.dum-loteria__fecha {
	margin-left: auto;
	background: #f2f3f7;
	color: #565a68;
	font-size: 11.5px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

/* ---------- Identidad ---------- */

.dum-loteria__identidad {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-bottom: 14px;
}

.dum-loteria__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--c);
	color: #ffffff;
	font-size: 17px;
	font-weight: 900;
	box-shadow:
		0 4px 10px rgba(35, 38, 51, 0.14),
		0 0 0 4px rgba(255, 255, 255, 0.65);
	flex: 0 0 auto;
}

.dum-loteria__nombre {
	font-size: 16.5px;
	font-weight: 800;
	letter-spacing: -.01em;
	color: #232633;
	line-height: 1.2;
}

/* ---------- Bolas (colores planos, un punto más vivos) ---------- */

.dum-loteria__bolas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 16px;
	margin-bottom: 2px;
}

.dum-loteria__bola-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

/* Retoque: halo blanco suave alrededor de la bola (la levanta, sigue plana). */
.dum-loteria__bola {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: var(--c);
	color: #ffffff;
	font-size: 21px;
	font-weight: 900;
	letter-spacing: .01em;
	box-shadow:
		0 5px 12px rgba(35, 38, 51, 0.16),
		0 0 0 4px rgba(255, 255, 255, 0.65);
}

/* Retoque: etiquetas como mini-chips legibles. */
.dum-loteria__etiqueta {
	background: #f2f3f7;
	color: #7c7f8c;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .12em;
	padding: 2.5px 8px;
	border-radius: 999px;
}

/* ---------- v6.5: ¿Jugaste hoy? (buscador de números, integrado al diseño) ---------- */

.dum-loteria__buscador {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin-bottom: 20px;
	padding: 15px 18px;
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(35, 38, 51, 0.07);
	border-radius: 18px;
	box-shadow: 0 6px 18px rgba(120, 110, 160, 0.10);
}

/* Tira pastel plana arriba, como la de las tarjetas. */
.dum-loteria__buscador::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: linear-gradient(90deg, #f6a7c0 0% 33.4%, #7ed3d0 33.4% 66.7%, #ffd97a 66.7% 100%);
}

.dum-loteria__buscador-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 900;
	color: #232633;
}

.dum-loteria__buscador-label::before {
	content: "🍀";
	font-size: 16px;
}

.dum-loteria__buscador-input {
	width: 118px;
	padding: 9px 16px;
	border: 2px solid #f6a7c0;
	border-radius: 999px;
	background: #ffffff;
	font-size: 19px;
	font-weight: 900;
	color: #232633;
	text-align: center;
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.dum-loteria__buscador-input:focus {
	border-color: #fb7185;
	box-shadow: 0 0 0 4px rgba(251, 113, 133, 0.15);
}

.dum-loteria__buscador-resultado {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 800;
	color: #16a34a;
	background: #e9f9ef;
	border-radius: 999px;
	padding: 6px 14px;
}

.dum-loteria__bola--acierto {
	box-shadow:
		0 5px 12px rgba(35, 38, 51, 0.16),
		0 0 0 5px #ffd200,
		0 0 18px rgba(255, 210, 0, 0.55);
	animation: dum-loteria-acierto 1.2s ease-in-out infinite;
}

.dum-loteria__tarjeta--apagada {
	opacity: 0.38;
	filter: saturate(0.5);
}

@keyframes dum-loteria-acierto {
	50% { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
	.dum-loteria__bola--acierto {
		animation: none;
	}
}

/* ---------- Pie ---------- */

.dum-loteria__fuente {
	margin: 20px 4px 0;
	font-size: 12.5px;
	color: #8a8d99;
}

.dum-loteria__fuente a {
	color: #565a68;
	font-weight: 700;
}

/* ---------- Móvil ---------- */

@media (max-width: 480px) {
	.dum-loteria--glass {
		padding: 18px 14px 18px;
		border-radius: 18px;
	}

	.dum-loteria__marquesina-titulo {
		font-size: 23px;
	}

	.dum-loteria__bola {
		width: 48px;
		height: 48px;
		font-size: 17px;
	}

	.dum-loteria__rejilla {
		grid-template-columns: 1fr;
	}
}


/* ===== SELECTOR DE DÍAS (nuevo 22-10-2026) ===== */
.dum-loteria__dias {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0 16px;
}

.dum-loteria__dia {
	display: inline-block;
	padding: 7px 16px;
	border-radius: 20px;
	background: #fff;
	border: 1.5px solid rgba(35, 38, 51, 0.10);
	font-size: 13px;
	font-weight: 500;
	color: #555;
	text-decoration: none;
	transition: all 0.15s ease;
}

.dum-loteria__dia:hover {
	border-color: #28b62c;
	color: #232633;
}

.dum-loteria__dia--activo {
	background: linear-gradient(135deg, #28b62c 0%, #1f9a3f 100%);
	color: #fff;
	border-color: transparent;
	box-shadow: 0 3px 10px rgba(40, 182, 44, 0.25);
}

@media (max-width: 640px) {
	.dum-loteria__dia {
		padding: 6px 12px;
		font-size: 12px;
	}
}