/**
 * Integración de RD Loterías en Vivo con la identidad de Almomento.
 *
 * El plugin viene con una estética propia: panel oscuro azul marino y acento
 * verde menta. Aquí no se toca el plugin (sigue sirviendo a su sitio original
 * tal cual): sólo se redefinen sus variables y las pocas reglas que llevan el
 * color escrito a mano, para que el tablero se lea como una sección más del
 * portal — fondo claro, el azul #081c76 de la marca y las tipografías del tema.
 */

/* ---------- Paleta del widget en vivo ---------- */

.rdlot {
	--rdlot-fondo: #fbf9f9;          /* surface */
	--rdlot-panel: #ffffff;
	--rdlot-panel-alto: #f5f3f3;     /* surface-container-low */
	--rdlot-borde: #e7bdb6;          /* outline-variant */
	--rdlot-texto: #1b1c1c;          /* on-surface */
	--rdlot-tenue: #5d3f3b;          /* on-surface-variant */
	--rdlot-acento: var(--dum-primary, #081c76); /* primary */
	--rdlot-radio: 12px;

	/* El gradiente radial azul del plugin se sustituye por el gris del portal. */
	background: var(--rdlot-fondo);
	border: 1px solid var(--rdlot-borde);
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* El titular lleva `color: #fff` fijo en el plugin, pensado para el panel
   oscuro: sobre fondo claro desaparecía. */
.rdlot-hero__titulo,
.rdlot-hero h2 {
	font-family: 'Archivo Narrow', 'Inter', sans-serif;
	font-weight: 800;
	color: var(--rdlot-texto);
}

/* Mismo caso con los avisos: sus colores (rojo y amarillo pastel) estaban
   calculados para leerse sobre azul marino. */
.rdlot-aviso--error {
	border-color: rgba(185, 28, 28, .4);
	color: #b91c1c;
}

.rdlot-aviso--tibio {
	border-color: rgba(180, 130, 10, .4);
	color: #92600a;
}

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

/* La sombra del plugin está calculada para fondo oscuro: sobre claro se ve
   como una mancha. */
.rdlot-card {
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -18px rgba(0, 0, 0, .35);
}

.rdlot-card:hover {
	box-shadow: 0 10px 28px -18px rgba(8, 28, 118, .55);
}

/* Fondo del logo: en el plugin es blanco translúcido para recortarlo sobre la
   cabecera de color, y así sigue funcionando aquí. */

/* ---------- Distintivo «en vivo» y acentos ---------- */

.rdlot-vivo {
	background: rgba(8, 28, 118, .1);
	border-color: rgba(8, 28, 118, .35);
}

@keyframes rdlot-latido {
	0%   { box-shadow: 0 0 0 0 rgba(8, 28, 118, .7); }
	70%  { box-shadow: 0 0 0 9px rgba(8, 28, 118, 0); }
	100% { box-shadow: 0 0 0 0 rgba(8, 28, 118, 0); }
}

@keyframes rdlot-destello {
	0%  { transform: scale(1.28); box-shadow: 0 0 0 6px rgba(8, 28, 118, .55); }
}

/* ---------- Etiqueta de fecha del sorteo ---------- */

/* Era blanco al 6 % sobre panel oscuro: sobre blanco desaparecía. */
.rdlot-sorteo__fecha {
	background: #f0eeee;
	border: 1px solid var(--rdlot-borde);
}

.rdlot-sorteo__fecha.es-hoy {
	background: rgba(8, 28, 118, .1);
	border-color: rgba(8, 28, 118, .3);
	color: var(--rdlot-acento);
}

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

/* Sobre el panel oscuro se recortaban solas; sobre blanco necesitan un filo. */
.rdlot-bola {
	border: 1px solid rgba(0, 0, 0, .1);
	box-shadow: inset 0 -2px 4px rgba(0, 0, 0, .1), 0 2px 5px rgba(0, 0, 0, .14);
}

.rdlot-bola--red,
.rdlot-bola--blue,
.rdlot-bola--green,
.rdlot-bola--yellow {
	border-color: transparent;
}

/* ---------- Pie del widget ---------- */

.rdlot-pie a {
	color: var(--rdlot-acento);
	font-weight: 600;
}

/* ---------- Tarjetas dentro de las entradas diarias ---------- */

/* Éstas ya nacen claras; sólo se alinean con la tipografía y el filo del
   portal para que no parezcan un bloque pegado de otro sitio. */
.rdlot-post {
	--rdlot-post-borde: #e7bdb6;
	--rdlot-post-texto: #1b1c1c;
	--rdlot-post-tenue: #5d3f3b;
	--rdlot-post-suave: #f5f3f3;

	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.rdlot-post__nombre {
	font-family: 'Archivo Narrow', 'Inter', sans-serif;
	font-size: 1.05rem;
	letter-spacing: .02em;
}

.rdlot-post__banca {
	border-radius: 12px;
}

/* El tema aplica `prose` al cuerpo del artículo y sus márgenes de párrafo
   descuadraban la rejilla de tarjetas. */
.prose .rdlot-post {
	margin-top: 24px;
	margin-bottom: 32px;
}