/*
 * Rediseño minimalista inspirado en la limpieza visual de Apple:
 * más tipografía, más aire, menos cajas y menos ruido visual.
 * Mantiene las clases actuales del proyecto para no tocar el PHP.
 */

:root {
	--pp-page-bg: #f5f5f7;
	--pp-surface: #ffffff;
	--pp-surface-soft: #fbfbfd;
	--pp-border: rgba(29, 29, 31, 0.08);
	--pp-border-strong: rgba(29, 29, 31, 0.14);
	--pp-text: #1d1d1f;
	--pp-text-soft: #6e6e73;
	--pp-heading: #111111;
	--pp-link: #0066cc;
	--pp-link-hover: #004ea2;
	--pp-ball-bg: linear-gradient(180deg, #ffffff 0%, #f1f3f6 100%);
	--pp-ball-border: rgba(0, 0, 0, 0.08);
	--pp-success-bg: #effaf2;
	--pp-success-border: #b9e4c4;
	--pp-error-bg: #fff3f3;
	--pp-error-border: #f1c1c1;
	--pp-warning-bg: #fff8ec;
	--pp-warning-border: #f0d08f;
	--pp-shadow: 0 20px 40px rgba(0, 0, 0, 0.04);
	--pp-shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.03);
	--pp-radius: 22px;
	--pp-radius-sm: 16px;
}

/*
 * Contenedor principal.
 * El diseño se apoya más en el espacio en blanco que en bloques pesados.
 */
.pp-wrapper {
	max-width: 1120px;
	margin: 0 auto;
	padding: 28px 18px 72px;
	color: var(--pp-text);
}

/*
 * Cabecera principal.
 * Más editorial y más limpia: gran titular y menos aspecto de tarjeta cerrada.
 */
.pp-hero {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 20px 0 28px;
	box-shadow: none;
	margin-bottom: 24px;
	text-align: center;
}

.pp-eyebrow {
	display: inline-block;
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pp-link);
}

.pp-hero h1 {
	margin: 0 0 14px;
	font-size: clamp(40px, 6vw, 64px);
	line-height: 1.02;
	letter-spacing: -0.04em;
	font-weight: 800;
	color: var(--pp-heading);
}

.pp-hero-text {
	margin: 0 auto;
	max-width: 760px;
	font-size: 19px;
	line-height: 1.6;
	color: var(--pp-text-soft);
}

/*
 * Tarjetas resumen.
 * Se convierten en una franja integrada con divisores sutiles.
 */
.pp-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin-bottom: 36px;
	background: var(--pp-surface);
	border: 1px solid var(--pp-border);
	border-radius: 28px;
	box-shadow: var(--pp-shadow-soft);
	overflow: hidden;
}

.pp-card {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 24px 22px;
	box-shadow: none;
	position: relative;
}

.pp-card:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 22px;
	right: 22px;
	bottom: 0;
	height: 1px;
	background: var(--pp-border);
}

.pp-card-label {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--pp-text-soft);
}

.pp-card-value {
	margin: 0;
	font-size: 28px;
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--pp-heading);
}

/*
 * Secciones generales.
 * Menos caja, más sección integrada.
 */
.pp-section {
	background: transparent;
	border: 0;
	border-top: 1px solid var(--pp-border);
	border-radius: 0;
	padding: 32px 0;
	box-shadow: none;
	margin-bottom: 0;
}

.pp-section h2 {
	margin-top: 0;
	margin-bottom: 18px;
	font-size: clamp(28px, 4vw, 40px);
	line-height: 1.08;
	letter-spacing: -0.03em;
	font-weight: 800;
	color: var(--pp-heading);
}

/*
 * Bloque del último sorteo.
 * Se integra en un panel blanco muy suave.
 */
.pp-highlight {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 26px;
	border-radius: 28px;
	background: var(--pp-surface);
	box-shadow: var(--pp-shadow);
}

.pp-balls {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.pp-ball {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 999px;
	background: var(--pp-ball-bg);
	border: 1px solid var(--pp-ball-border);
	color: var(--pp-heading);
	font-size: 19px;
	font-weight: 800;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.pp-meta {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px 0 0;
	border-top: 1px solid var(--pp-border);
}

.pp-meta p {
	margin: 0;
	font-size: 16px;
	color: var(--pp-text-soft);
}

.pp-meta strong {
	color: var(--pp-heading);
}

/*
 * Cuadrículas estadísticas.
 */
.pp-numbers-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}

.pp-number-card {
	padding: 20px 18px;
	border-radius: 22px;
	background: var(--pp-surface);
	border: 1px solid var(--pp-border);
	box-shadow: var(--pp-shadow-soft);
	text-align: center;
}

.pp-number-count {
	margin-top: 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--pp-text-soft);
}

/*
 * Caja de combinación.
 */
.pp-combo-box {
	padding: 26px;
	border-radius: 28px;
	background: var(--pp-surface);
	border: 1px solid var(--pp-border);
	box-shadow: var(--pp-shadow);
}

.pp-combo-main {
	margin: 0 0 10px;
	font-size: clamp(28px, 4vw, 38px);
	line-height: 1.08;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--pp-heading);
}

.pp-combo-meta {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--pp-text-soft);
}

/*
 * Tabla.
 * Más limpia, más aire, menos borde duro.
 */
.pp-table-wrapper {
	overflow-x: auto;
	background: var(--pp-surface);
	border-radius: 26px;
	box-shadow: var(--pp-shadow);
}

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

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

.pp-table tbody td {
	padding: 18px 18px;
	font-size: 15px;
	color: var(--pp-text);
	border-bottom: 1px solid rgba(29, 29, 31, 0.06);
}

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

/*
 * Lista de búsquedas.
 */
.pp-search-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pp-search-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	border-radius: 20px;
	background: var(--pp-surface);
	border: 1px solid var(--pp-border);
	box-shadow: var(--pp-shadow-soft);
}

.pp-search-combo {
	font-weight: 700;
	color: var(--pp-heading);
}

.pp-search-count {
	font-size: 14px;
	font-weight: 600;
	color: var(--pp-text-soft);
}

.pp-section-seo p {
	color: var(--pp-text-soft);
	line-height: 1.8;
	max-width: 820px;
}

.pp-empty {
	padding: 16px 18px;
	border-radius: 18px;
	background: var(--pp-surface);
	border: 1px solid var(--pp-border);
	color: var(--pp-text-soft);
}

.pp-shortcode-block {
	margin-bottom: 10px;
}

.pp-shortcode-title {
	margin: 0 0 18px;
	font-size: clamp(26px, 3.8vw, 36px);
	line-height: 1.08;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--pp-heading);
}

/*
 * Buscador.
 * Se unifica en un bloque blanco elegante y sin exceso de cajas internas.
 */
.pp-search-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	background: var(--pp-surface);
	border-radius: 28px;
	box-shadow: var(--pp-shadow);
}

.pp-search-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;
}

.pp-search-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pp-search-field label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pp-text-soft);
}

.pp-search-field input {
	width: 100%;
	height: 54px;
	padding: 12px 14px;
	border: 1px solid var(--pp-border-strong);
	border-radius: 16px;
	background: #ffffff;
	color: var(--pp-heading);
	font-size: 17px;
	font-weight: 700;
}

.pp-search-field input:focus {
	outline: none;
	border-color: rgba(0, 102, 204, 0.5);
	box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.12);
}

.pp-search-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 54px;
	padding: 0 24px;
	border: 0;
	border-radius: 999px;
	background: var(--pp-link);
	color: #ffffff;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.pp-search-button:hover {
	background: var(--pp-link-hover);
	transform: translateY(-1px);
}

.pp-search-result {
	margin-top: 18px;
}

.pp-search-query {
	margin-bottom: 14px;
	font-size: 18px;
	font-weight: 600;
	color: var(--pp-heading);
}

.pp-search-status {
	margin: 14px 0 20px;
	padding: 16px 18px;
	border-radius: 18px;
	border: 1px solid var(--pp-border);
}

.pp-search-status p {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
}

.pp-search-status--success {
	background: var(--pp-success-bg);
	border-color: var(--pp-success-border);
}

.pp-search-status--success p {
	color: #1f6d3f;
}

.pp-search-status--error {
	background: var(--pp-error-bg);
	border-color: var(--pp-error-border);
}

.pp-search-status--error p {
	color: #9a2d2d;
}

.pp-search-status--not-found {
	background: var(--pp-warning-bg);
	border-color: var(--pp-warning-border);
}

.pp-search-status--not-found p {
	color: #8b6820;
}

.pp-search-summary {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 20px;
}

.pp-search-summary-card {
	padding: 20px;
	border-radius: 22px;
	background: var(--pp-surface);
	border: 1px solid var(--pp-border);
	box-shadow: var(--pp-shadow-soft);
}

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

.pp-search-summary-value {
	margin: 0;
	font-size: 24px;
	font-weight: 800;
	color: var(--pp-heading);
}

@media (min-width: 768px) {
	.pp-wrapper {
		padding: 36px 22px 84px;
	}

	.pp-cards {
		grid-template-columns: repeat(2, 1fr);
	}

	.pp-card:not(:last-child)::after {
		left: auto;
		top: 22px;
		right: 0;
		bottom: 22px;
		width: 1px;
		height: auto;
	}

	.pp-number-card {
		padding: 22px;
	}

	.pp-numbers-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1024px) {
	.pp-cards {
		grid-template-columns: repeat(4, 1fr);
	}

	.pp-highlight {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.pp-meta {
		min-width: 260px;
		padding: 0 0 0 26px;
		border-top: 0;
		border-left: 1px solid var(--pp-border);
	}
}

@media (max-width: 767px) {
	.pp-wrapper {
		padding: 22px 16px 56px;
	}

	.pp-cards {
		border-radius: 22px;
	}

	.pp-card {
		padding: 20px 18px;
	}

	.pp-search-form {
		padding: 18px;
		border-radius: 22px;
	}

	.pp-search-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.pp-ball {
		width: 54px;
		height: 54px;
		font-size: 18px;
	}

	.pp-search-summary {
		grid-template-columns: 1fr;
	}
}


/*
 * Ajustes v2 solicitados por el usuario.
 * 1) Bolas tipo billar en verde claro.
 * 2) Reintegros centrados.
 * 3) Combinación más repetida más elegante y menos agresiva.
 * 4) Tablas centradas por columna.
 */

.pp-ball {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #c9f5b8 0%, #9ee37f 52%, #72c95d 100%);
	border: 1px solid rgba(62, 122, 45, 0.16);
	color: #183116;
	box-shadow: inset 0 -8px 14px rgba(72, 131, 56, 0.18), 0 8px 18px rgba(94, 167, 74, 0.18);
}

.pp-ball::before {
	content: "";
	position: absolute;
	left: 12px;
	top: 8px;
	width: 42%;
	height: 42%;
	border-radius: 999px;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.58) 45%, rgba(255, 255, 255, 0) 100%);
	pointer-events: none;
}

.pp-section > .pp-card {
	text-align: center;
}

.pp-section > .pp-card .pp-card-label,
.pp-section > .pp-card .pp-card-value,
.pp-section > .pp-card .pp-number-count {
	text-align: center;
}

.pp-section > .pp-card .pp-card-value {
	font-size: 36px;
}

.pp-section > .pp-card .pp-number-count {
	margin-top: 10px;
}

.pp-combo-box {
	padding: 22px 24px;
	border-radius: 24px;
}

.pp-combo-main {
	margin: 0 0 8px;
	font-size: clamp(24px, 3vw, 32px);
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.pp-combo-meta {
	font-size: 14px;
	font-weight: 600;
	color: var(--pp-text-soft);
}

.pp-table thead th,
.pp-table tbody td {
	text-align: center;
}


/*
 * Ajustes v3.
 * 1) Bolas inspiradas en bola de billar con centro blanco.
 * 2) Verde muy claro tirando a gris.
 * 3) Complementario y reintegro preparados para mostrarse como bolas auxiliares.
 */

.pp-ball {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: radial-gradient(circle at 32% 28%, #f8fcf6 0%, #e7f0e2 22%, #cfddd0 52%, #a8bcaa 78%, #8ea591 100%);
	border: 1px solid rgba(84, 101, 85, 0.16);
	color: #1d1d1f;
	box-shadow:
		inset 0 -10px 18px rgba(84, 101, 85, 0.16),
		inset 0 8px 12px rgba(255, 255, 255, 0.55),
		0 8px 18px rgba(88, 106, 91, 0.12);
}

.pp-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.45) 100%);
	transform: rotate(-28deg);
	filter: blur(0.2px);
	z-index: 0;
}

.pp-ball::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 54%;
	height: 54%;
	transform: translate(-50%, -50%);
	border-radius: 999px;
	background: radial-gradient(circle, #ffffff 0%, #fbfbfb 72%, #d9d9d9 100%);
	box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.8), inset 0 -2px 4px rgba(0, 0, 0, 0.06);
	z-index: -1;
}

.pp-ball--aux {
	width: 56px;
	height: 56px;
	font-size: 18px;
}

.pp-highlight {
	align-items: center;
}

.pp-meta {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.pp-meta-date {
	font-size: 17px;
	color: var(--pp-text-soft);
}

.pp-meta-date strong {
	color: var(--pp-heading);
}

.pp-meta-balls {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
}

.pp-meta-ball-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	min-width: 92px;
}

.pp-meta-ball-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pp-text-soft);
	text-align: center;
}

.pp-meta-ball-empty {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	background: #f2f2f4;
	border: 1px solid rgba(29, 29, 31, 0.08);
	font-size: 20px;
	font-weight: 700;
	color: var(--pp-text-soft);
}

@media (max-width: 767px) {
	.pp-ball {
		width: 54px;
		height: 54px;
		font-size: 18px;
	}

	.pp-ball--aux,
	.pp-meta-ball-empty {
		width: 52px;
		height: 52px;
		font-size: 17px;
	}

	.pp-meta {
		width: 100%;
		padding-top: 16px;
	}

	.pp-meta-balls {
		justify-content: flex-start;
	}
}


/*
 * Ajustes v4.
 * 1) Fecha centrada entre complementario y reintegro.
 * 2) Bolas auxiliares más grandes.
 * 3) Combinación más repetida en bolas.
 * 4) Tabla de últimos sorteos con bolas en combinación, complementario y reintegro.
 */

.pp-meta {
	width: 100%;
	align-items: center;
}

.pp-meta-balls {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 20px;
}

.pp-meta-ball-group {
	justify-self: center;
}

.pp-meta-date-inline {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-align: center;
}

.pp-meta-date-inline-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pp-text-soft);
}

.pp-meta-date-inline-value {
	font-size: 17px;
	font-weight: 700;
	color: var(--pp-heading);
	white-space: nowrap;
}

.pp-ball--aux {
	width: 66px;
	height: 66px;
	font-size: 22px;
}

.pp-meta-ball-empty {
	width: 66px;
	height: 66px;
	font-size: 22px;
}

.pp-ball-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.pp-ball-row--center {
	justify-content: center;
}

.pp-ball--combo {
	width: 62px;
	height: 62px;
	font-size: 21px;
}

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

.pp-ball--table-aux {
	width: 44px;
	height: 44px;
	font-size: 16px;
}

.pp-combo-box {
	padding: 22px 24px;
}

.pp-combo-box .pp-ball-row {
	margin-bottom: 10px;
}

.pp-table tbody td {
	vertical-align: middle;
}

.pp-table tbody td .pp-ball-row {
	justify-content: center;
}

@media (max-width: 767px) {
	.pp-meta-balls {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.pp-ball--aux,
	.pp-meta-ball-empty {
		width: 60px;
		height: 60px;
		font-size: 20px;
	}

	.pp-ball--combo {
		width: 58px;
		height: 58px;
		font-size: 19px;
	}

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

	.pp-ball--table-aux {
		width: 40px;
		height: 40px;
		font-size: 15px;
	}
}


/*
 * Ajustes v5.
 * Correcciones de disposición solicitadas.
 */

.pp-meta {
	gap: 16px;
}

.pp-meta-date-inline {
	align-items: center;
	text-align: center;
}

.pp-meta-balls {
	grid-template-columns: repeat(2, minmax(120px, auto));
	justify-content: center;
	gap: 28px;
}

.pp-ball--aux {
	width: 58px;
	height: 58px;
	font-size: 19px;
}

.pp-ball--reintegro-card {
	width: 74px;
	height: 74px;
	font-size: 28px;
	margin: 8px auto 10px;
}

.pp-card--ball-centered {
	text-align: center;
}

.pp-card--ball-centered .pp-card-label,
.pp-card--ball-centered .pp-number-count {
	text-align: center;
}

.pp-card--ball-centered .pp-number-count {
	font-weight: 700;
}

.pp-combo-meta {
	text-align: center;
	font-weight: 700;
}

.pp-search-button {
	background: linear-gradient(180deg, #dbead7 0%, #bdd3b8 55%, #a2bc9c 100%);
	color: #1f2a1d;
	box-shadow: 0 10px 20px rgba(121, 145, 114, 0.18);
}

.pp-search-button:hover {
	background: linear-gradient(180deg, #d3e5ce 0%, #b6ccb1 55%, #9ab593 100%);
}

@media (max-width: 767px) {
	.pp-meta-balls {
		grid-template-columns: repeat(2, minmax(100px, auto));
		gap: 18px;
	}

	.pp-ball--reintegro-card {
		width: 68px;
		height: 68px;
		font-size: 26px;
	}
}

/* 
 * En la tabla de "Últimos sorteos" quitamos el brillo superior
 * para que los números se lean mejor en móvil.
 */
.pp-table .pp-ball--table::before,
.pp-table .pp-ball--table-aux::before {
	display: none;
}

.pp-card--ball-centered {
	background: #ffffff;
	border: 1px solid rgba(29, 29, 31, 0.08);
	border-radius: 28px;
	padding: 36px 28px;
	max-width: 420px;
	margin: 0 auto;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.pp-card--ball-centered .pp-card-label {
	margin: 0 0 18px;
	text-align: center;
}

.pp-card--ball-centered .pp-ball--reintegro-card {
	margin: 0 auto 18px;
}

.pp-card--ball-centered .pp-number-count {
	margin: 0;
	text-align: center;
	font-weight: 600;
	color: #5f6b63;
}

@media (max-width: 767px) {
	.pp-card--ball-centered {
		padding: 28px 20px;
		border-radius: 22px;
	}
}