/*
 * Euromillones
 * Estilo visual alineado con La Primitiva, pero con paleta azul grisácea.
 * Este archivo evita el selector :has() para no dar avisos en algunos editores
 * y para mejorar compatibilidad.
 */

/* =========================================================
   VARIABLES GLOBALES
   ========================================================= */
:root {
	--eu-page-bg: #f5f5f7;
	--eu-surface: #ffffff;
	--eu-surface-soft: #fbfbfd;
	--eu-border: rgba(29, 29, 31, 0.08);
	--eu-border-strong: rgba(29, 29, 31, 0.14);
	--eu-text: #1d1d1f;
	--eu-text-soft: #6e6e73;
	--eu-heading: #111111;

	/* Color de enlace y acento general */
	--eu-link: #4f5f8b;
	--eu-link-hover: #415072;

	/* Borde y sombra de bolas */
	--eu-ball-border: rgba(84, 101, 120, 0.18);
	--eu-ball-shadow: rgba(88, 106, 131, 0.14);

	/* Botón del comprobador */
	--eu-button-start: #dbe3ee;
	--eu-button-mid: #bcc9d9;
	--eu-button-end: #9eafc3;
	--eu-button-text: #1f2a35;

	/* Estados del comprobador */
	--eu-success-bg: #eef4fb;
	--eu-success-border: #bfd1ea;
	--eu-error-bg: #fff3f3;
	--eu-error-border: #f1c1c1;
	--eu-warning-bg: #fff8ec;
	--eu-warning-border: #f0d08f;

	/* Sombra general */
	--eu-shadow: 0 20px 40px rgba(0, 0, 0, 0.04);
	--eu-shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.03);

	/* Radios */
	--eu-radius: 22px;
	--eu-radius-sm: 16px;
}

/* =========================================================
   CONTENEDOR PRINCIPAL
   ========================================================= */
.ld-euro-page {
	max-width: 1120px;
	margin: 0 auto;
	padding: 28px 18px 72px;
	color: var(--eu-text);
}

/* =========================================================
   TARJETAS / BLOQUES PRINCIPALES
   ========================================================= */
.ld-euro-card {
	margin: 0 0 28px;
	padding: 26px;
	background: var(--eu-surface);
	border: 1px solid var(--eu-border);
	border-radius: 28px;
	box-shadow: var(--eu-shadow-soft);
}

/* =========================================================
   TÍTULOS Y TEXTOS
   ========================================================= */
.ld-euro-card h1,
.ld-euro-card h2 {
	margin: 0 0 18px;
	font-size: clamp(28px, 4vw, 40px);
	line-height: 1.08;
	letter-spacing: -0.03em;
	font-weight: 800;
	color: var(--eu-heading);
	text-align: left;
}

.ld-euro-card h3 {
	margin: 0 0 16px;
	font-size: clamp(22px, 3vw, 30px);
	line-height: 1.12;
	letter-spacing: -0.02em;
	font-weight: 800;
	color: var(--eu-heading);
	text-align: left;
}

.ld-euro-card p {
	margin: 0 0 18px;
	font-size: 18px;
	line-height: 1.7;
	color: var(--eu-text-soft);
}

/* =========================================================
   FECHA PRINCIPAL
   ========================================================= */
.ld-euro-draw-date {
	margin: 0 0 18px;
	font-size: 17px;
	font-weight: 700;
	color: var(--eu-heading);
	text-align: center;
}

/* =========================================================
   FILAS DE BOLAS
   ========================================================= */
.ld-euro-balls,
.ld-euro-stars,
.ld-euro-history-combo,
.ld-euro-history-stars,
.ld-euro-table .ld-euro-balls,
.ld-euro-table .ld-euro-stars {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.ld-euro-balls,
.ld-euro-history-combo,
.ld-euro-stars,
.ld-euro-history-stars {
	justify-content: center;
}

/* =========================================================
   BOLAS CON EFECTO BILLAR
   ========================================================= */

/* Base común de bola */
.ld-euro-ball {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	border-radius: 999px;
	font-size: 21px;
	font-weight: 800;
	color: #1d1d1f;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* Reflejo superior para simular brillo de bola */
.ld-euro-ball::before {
	content: "";
	position: absolute;
	left: 12px;
	top: 9px;
	width: 34%;
	height: 20%;
	border-radius: 999px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.42) 100%);
	transform: rotate(-28deg);
	pointer-events: none;
}

/* Bola azul grisácea con centro blanco integrado */
.ld-euro-ball:not(.ld-euro-ball--star) {
	background:
		radial-gradient(circle at 50% 50%, #ffffff 0%, #fbfbfb 31%, #d8d8d8 40%, transparent 41%),
		radial-gradient(circle at 32% 28%, #f8fbfe 0%, #e5edf6 22%, #cfdae7 52%, #aebdce 78%, #91a5bb 100%);
	border: 1px solid rgba(84, 101, 120, 0.18);
	box-shadow:
		inset 0 -10px 18px rgba(84, 101, 120, 0.18),
		inset 0 8px 12px rgba(255, 255, 255, 0.58),
		0 8px 18px rgba(88, 106, 131, 0.14);
}

/* Bola dorada para estrellas con centro blanco integrado */
.ld-euro-ball--star {
	background:
		radial-gradient(circle at 50% 50%, #ffffff 0%, #fbfbfb 31%, #d8d8d8 40%, transparent 41%),
		radial-gradient(circle at 32% 28%, #fff9ea 0%, #f7e9b9 22%, #efd37f 52%, #d8ad42 78%, #b88517 100%);
	border: 1px solid rgba(142, 106, 19, 0.20);
	color: #5a420a;
	box-shadow:
		inset 0 -10px 18px rgba(164, 121, 20, 0.20),
		inset 0 8px 12px rgba(255, 255, 255, 0.58),
		0 8px 18px rgba(184, 133, 23, 0.18);
}

/* Compatibilidad por si quedara CSS antiguo */
.ld-euro-star {
	clip-path: none !important;
	filter: none !important;
	background: transparent !important;
	width: auto;
	height: auto;
}

/* Tamaño en tabla */
.ld-euro-table .ld-euro-ball {
	width: 42px;
	height: 42px;
	font-size: 15px;
}

/* Móvil */
@media (max-width: 767px) {
	.ld-euro-ball {
		width: 58px;
		height: 58px;
		font-size: 19px;
	}

	.ld-euro-table .ld-euro-ball {
		width: 38px;
		height: 38px;
		font-size: 14px;
	}
}

/*
 * Compatibilidad:
 * Si quedara alguna clase antigua de estrella en el HTML o CSS previo,
 * neutralizamos su forma de estrella para que no rompa el diseño.
 */
.ld-euro-star {
	clip-path: none !important;
	filter: none !important;
	background: transparent !important;
	width: auto;
	height: auto;
}

/* =========================================================
   ETIQUETAS PEQUEÑAS
   ========================================================= */
.ld-euro-stars-title,
.ld-euro-check-label {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--eu-text-soft);
	text-align: center;
}

/* =========================================================
   FORMULARIO DEL COMPROBADOR
   ========================================================= */
.ld-euro-check-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	background: var(--eu-surface);
	border-radius: 28px;
	box-shadow: var(--eu-shadow);
}

.ld-euro-check-group {
	margin: 0;
}

.ld-euro-check-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
}

.ld-euro-check-grid-stars {
	grid-template-columns: repeat(2, 1fr);
	max-width: 260px;
	margin: 0 auto;
}

.ld-euro-check-grid input {
	width: 100%;
	height: 54px;
	padding: 12px 14px;
	border: 1px solid var(--eu-border-strong);
	border-radius: 16px;
	background: #f2f2f4;
	color: var(--eu-heading);
	font-size: 17px;
	font-weight: 700;
	text-align: center;
}

.ld-euro-check-grid input:focus {
	outline: none;
	border-color: rgba(79, 95, 139, 0.5);
	box-shadow: 0 0 0 4px rgba(79, 95, 139, 0.12);
}

.ld-euro-check-submit-wrap {
	width: 100%;
	text-align: left;
}

.ld-euro-check-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 54px;
	padding: 0 24px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(180deg, var(--eu-button-start) 0%, var(--eu-button-mid) 55%, var(--eu-button-end) 100%);
	color: var(--eu-button-text);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 10px 20px rgba(120, 136, 158, 0.18);
	transition: background 0.2s ease, transform 0.2s ease;
}

.ld-euro-check-submit:hover {
	background: linear-gradient(180deg, #d4ddeb 0%, #b8c4d5 55%, #98a9bf 100%);
	transform: translateY(-1px);
}

/* =========================================================
   MENSAJES DEL COMPROBADOR
   ========================================================= */
.ld-euro-check-result {
	margin-top: 18px;
}

.ld-euro-check-success,
.ld-euro-check-error,
.ld-euro-check-info {
	padding: 16px 18px;
	border-radius: 18px;
	border: 1px solid var(--eu-border);
}

.ld-euro-check-success {
	background: var(--eu-success-bg);
	border-color: var(--eu-success-border);
}

.ld-euro-check-success p {
	color: #355c86;
	font-weight: 700;
}

.ld-euro-check-error {
	background: var(--eu-error-bg);
	border-color: var(--eu-error-border);
}

.ld-euro-check-error p {
	color: #9a2d2d;
	font-weight: 700;
}

.ld-euro-check-info {
	background: var(--eu-warning-bg);
	border-color: var(--eu-warning-border);
}

.ld-euro-check-info p {
	color: #8b6820;
	font-weight: 700;
}

.ld-euro-check-dates {
	margin: 14px 0 0;
	padding-left: 20px;
	color: var(--eu-text-soft);
}

/* =========================================================
   TARJETAS ESTADÍSTICAS
   ========================================================= */
.ld-euro-stat-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.ld-euro-stat-item {
	padding: 20px 18px;
	border-radius: 22px;
	background: var(--eu-surface);
	border: 1px solid var(--eu-border);
	box-shadow: var(--eu-shadow-soft);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.ld-euro-stat-total {
	font-size: 14px;
	font-weight: 600;
	color: var(--eu-text-soft);
}

.ld-euro-stats-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}

.ld-euro-stat-card {
	padding: 20px 18px;
	border-radius: 22px;
	background: var(--eu-surface);
	border: 1px solid var(--eu-border);
	box-shadow: var(--eu-shadow-soft);
}

/* =========================================================
   RESUMEN SUPERIOR
   ========================================================= */
.ld-euro-summary {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
	margin-bottom: 24px;
	background: var(--eu-surface);
	border: 1px solid var(--eu-border);
	border-radius: 28px;
	box-shadow: var(--eu-shadow-soft);
	overflow: hidden;
}

.ld-euro-summary-item {
	position: relative;
	padding: 24px 22px;
}

.ld-euro-summary-item:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 22px;
	right: 0;
	bottom: 22px;
	width: 1px;
	background: var(--eu-border);
}

.ld-euro-summary-label {
	display: block;
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--eu-text-soft);
}

.ld-euro-summary-value {
	display: block;
	font-size: 28px;
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--eu-heading);
}

/* =========================================================
   HISTÓRICO EN TARJETAS
   ========================================================= */
.ld-euro-history {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ld-euro-history-row {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px 20px;
	border-radius: 20px;
	background: var(--eu-surface);
	border: 1px solid var(--eu-border);
	box-shadow: var(--eu-shadow-soft);
}

.ld-euro-history-date {
	font-size: 15px;
	font-weight: 700;
	color: var(--eu-heading);
	text-align: center;
}

/* =========================================================
   TABLA DE ÚLTIMOS 10 SORTEOS
   ========================================================= */
.ld-euro-table-wrap {
	overflow-x: auto;
	background: var(--eu-surface);
	border-radius: 26px;
	box-shadow: var(--eu-shadow);
}

.ld-euro-table {
	width: 100%;
	min-width: 680px;
	border-collapse: collapse;
}

.ld-euro-table thead th {
	padding: 18px 18px;
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--eu-text-soft);
	background: transparent;
	border-bottom: 1px solid var(--eu-border);
}

.ld-euro-table tbody td {
	padding: 18px 18px;
	font-size: 15px;
	color: var(--eu-text);
	border-bottom: 1px solid rgba(29, 29, 31, 0.06);
	text-align: center;
	vertical-align: middle;
}

.ld-euro-table tbody tr:last-child td {
	border-bottom: 0;
}

.ld-euro-table .ld-euro-balls,
.ld-euro-table .ld-euro-stars {
	justify-content: center;
}

.ld-euro-table .ld-euro-ball {
	width: 42px;
	height: 42px;
	font-size: 15px;
}

/* =========================================================
   MENSAJES VACÍOS
   ========================================================= */
.ld-euro-empty {
	padding: 16px 18px;
	border-radius: 18px;
	background: var(--eu-surface);
	border: 1px solid var(--eu-border);
	color: var(--eu-text-soft);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (min-width: 768px) {
	.ld-euro-card {
		padding: 30px;
	}
}

@media (max-width: 767px) {
	.ld-euro-page {
		padding: 22px 16px 56px;
	}

	.ld-euro-card {
		padding: 20px 18px;
		border-radius: 22px;
	}

	.ld-euro-card h1,
	.ld-euro-card h2 {
		font-size: clamp(26px, 8vw, 36px);
	}

	.ld-euro-card h3 {
		font-size: 24px;
	}

	.ld-euro-check-form {
		padding: 18px;
		border-radius: 22px;
	}

	.ld-euro-check-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.ld-euro-check-grid-stars {
		max-width: 100%;
	}

	.ld-euro-ball {
		width: 58px;
		height: 58px;
		font-size: 19px;
	}

	.ld-euro-stat-list,
	.ld-euro-stats-grid,
	.ld-euro-summary {
		grid-template-columns: 1fr;
	}

	.ld-euro-summary-item:not(:last-child)::after {
		left: 22px;
		right: 22px;
		top: auto;
		bottom: 0;
		width: auto;
		height: 1px;
	}

	.ld-euro-table .ld-euro-ball {
		width: 38px;
		height: 38px;
		font-size: 14px;
	}
}

/* =========================================================
   TABLA ÚLTIMOS SORTEOS
   Quitar brillo superior sin perder el centro blanco
   ========================================================= */

/* Números en la tabla: mismo estilo billar, pero sin brillo */
.ld-euro-table .ld-euro-ball:not(.ld-euro-ball--star) {
	background:
		radial-gradient(circle at 50% 50%, #ffffff 0%, #fbfbfb 26%, #d8d8d8 34%, transparent 35%),
		radial-gradient(circle at 32% 28%, #f8fbfe 0%, #e5edf6 22%, #cfdae7 52%, #aebdce 78%, #91a5bb 100%) !important;
	border: 1px solid rgba(84, 101, 120, 0.18);
	box-shadow:
		inset 0 -10px 18px rgba(84, 101, 120, 0.18),
		inset 0 8px 12px rgba(255, 255, 255, 0.58),
		0 8px 18px rgba(88, 106, 131, 0.14);
}

/* Estrellas en la tabla: mismo estilo billar dorado, pero sin brillo */
.ld-euro-table .ld-euro-ball--star {
	background:
		radial-gradient(circle at 50% 50%, #ffffff 0%, #fbfbfb 26%, #d8d8d8 34%, transparent 35%),
		radial-gradient(circle at 32% 28%, #fff9ea 0%, #f7e9b9 22%, #efd37f 52%, #d8ad42 78%, #b88517 100%) !important;
	border: 1px solid rgba(142, 106, 19, 0.20);
	color: #5a420a;
	box-shadow:
		inset 0 -10px 18px rgba(164, 121, 20, 0.20),
		inset 0 8px 12px rgba(255, 255, 255, 0.58),
		0 8px 18px rgba(184, 133, 23, 0.18);
}

/* En la tabla apagamos cualquier pseudo-elemento antiguo o nuevo */
.ld-euro-table .ld-euro-ball::before,
.ld-euro-table .ld-euro-ball::after {
	display: none !important;
}
/* =========================================================
   AJUSTE VISUAL TIPO PRIMITIVA
   El contenedor exterior de algunos shortcodes se funde con el fondo
   y solo las cajitas internas quedan blancas
   ========================================================= */

/* Bloques que deben fundirse con el fondo gris de la página */
.ld-euro-card--cards-grid,
.ld-euro-card--stats-wrapper,
.ld-euro-card--table-wrapper,
.ld-euro-card--history-wrapper {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
}

/* Mantener buena separación del título respecto al contenido */
.ld-euro-card--cards-grid h2,
.ld-euro-card--stats-wrapper h2,
.ld-euro-card--table-wrapper h2,
.ld-euro-card--history-wrapper h2 {
	margin-bottom: 18px;
}

/* El texto introductorio externo queda visualmente como en La Primitiva */
.ld-euro-card--cards-grid > p,
.ld-euro-card--stats-wrapper > p,
.ld-euro-card--table-wrapper > p,
.ld-euro-card--history-wrapper > p {
	margin-bottom: 18px;
}

/* Las cajitas internas siguen siendo blancas */
.ld-euro-stat-item,
.ld-euro-stat-card,
.ld-euro-history-row,
.ld-euro-table-wrap,
.ld-euro-summary {
	background: var(--eu-surface);
}

/* Afinamos el aire visual para que recuerde más a La Primitiva */
.ld-euro-stat-list,
.ld-euro-stats-grid,
.ld-euro-history {
	gap: 16px;
}

/* La tabla mantiene su caja blanca independiente */
.ld-euro-table-wrap {
	border-radius: 26px;
	box-shadow: var(--eu-shadow);
}

/* El resumen superior mantiene tarjeta blanca y limpia */
.ld-euro-summary {
	margin-bottom: 20px;
}

/* En móvil, sin romper el espaciado */
@media (max-width: 767px) {
	.ld-euro-card--cards-grid,
	.ld-euro-card--stats-wrapper,
	.ld-euro-card--table-wrapper,
	.ld-euro-card--history-wrapper {
		padding: 0;
	}
}
/* =========================================================
   CONSULTA TU COMBINACIÓN
   Formato tipo La Primitiva
   ========================================================= */

.ld-euro-check-result {
	margin-top: 22px;
}

.ld-euro-check-query {
	margin: 0 0 18px;
	font-size: 18px;
	line-height: 1.6;
	color: var(--eu-heading);
	font-weight: 700;
}

.ld-euro-check-query-label {
	font-weight: 800;
	color: var(--eu-heading);
}

.ld-euro-check-query-values {
	color: var(--eu-heading);
	font-weight: 700;
}

.ld-euro-check-status {
	margin: 0 0 20px;
	padding: 16px 18px;
	border-radius: 18px;
	border: 1px solid var(--eu-border);
}

.ld-euro-check-status p {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
}

.ld-euro-check-status--success {
	background: #eef8f0;
	border-color: #b9e4c4;
}

.ld-euro-check-status--success p {
	color: #2f6e42;
}

.ld-euro-check-status--not-found {
	background: #fff8ec;
	border-color: #f0d08f;
}

.ld-euro-check-status--not-found p {
	color: #8b6820;
}

.ld-euro-check-status--error {
	background: #fff3f3;
	border-color: #f1c1c1;
}

.ld-euro-check-status--error p {
	color: #9a2d2d;
}

.ld-euro-check-table-wrap {
	overflow-x: auto;
	background: var(--eu-surface);
	border-radius: 26px;
	box-shadow: var(--eu-shadow);
}

.ld-euro-check-table {
	width: 100%;
	min-width: 760px;
	border-collapse: collapse;
}

.ld-euro-check-table thead th {
	padding: 18px 18px;
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--eu-text-soft);
	background: transparent;
	border-bottom: 1px solid var(--eu-border);
}

.ld-euro-check-table tbody td {
	padding: 18px 18px;
	font-size: 15px;
	color: var(--eu-text);
	border-bottom: 1px solid rgba(29, 29, 31, 0.06);
	text-align: center;
	vertical-align: middle;
}

.ld-euro-check-table tbody tr:last-child td {
	border-bottom: 0;
}

.ld-euro-check-table .ld-euro-balls,
.ld-euro-check-table .ld-euro-stars {
	justify-content: center;
}

.ld-euro-check-table .ld-euro-ball {
	width: 42px;
	height: 42px;
	font-size: 15px;
}

.ld-euro-check-table .ld-euro-ball::before {
	display: none !important;
}

@media (max-width: 767px) {
	.ld-euro-check-query {
		font-size: 17px;
	}

	.ld-euro-check-table {
		min-width: 640px;
	}

	.ld-euro-check-table .ld-euro-ball {
		width: 38px;
		height: 38px;
		font-size: 14px;
	}
}
/* =========================================================
   TABLA DEL COMPROBADOR
   Mostrar números normales, como en La Primitiva
   ========================================================= */

.ld-euro-check-table tbody td {
	font-size: 15px;
	font-weight: 500;
	color: var(--eu-text);
}

.ld-euro-check-table tbody td:nth-child(2),
.ld-euro-check-table tbody td:nth-child(3) {
	font-weight: 600;
	letter-spacing: 0.01em;
}