/* Campañas Elanco — CSS propio del plugin.
   El design system (tokens.css + components.css) lo aporta el tema Elanco y
   cubre todos los componentes reutilizables (.reto-line, .catalog-card,
   .form-input, .btn-*, .activity-list, .modal-*, dashboard…). Aquí solo va
   lo específico del plugin que no forma parte del design system. */

/* Saldo del shortcode [elanco_balance] (card Bootstrap, fuera del DS). */
.elanco-balance { background: linear-gradient(135deg, #f8f9fa, #eef1f5); }

/* Línea de reto dinámica (JS): reutiliza .reto-line del design system y solo
   añade una 4.ª columna para la vista previa de puntos en escritorio.
   La doble clase gana en especificidad sin depender del orden de carga. */
@media (min-width: 600px) {
	.reto-line.elanco-line { grid-template-columns: 2fr 1fr 1fr auto; }
}

/* Paginación AJAX de "Últimas actividades" (usa tokens del tema). */
.elanco-activity { position: relative; }
.elanco-activity[aria-busy="true"] { opacity: .5; pointer-events: none; }

.elanco-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 16px;
}

.elanco-page {
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border: 1px solid var(--grey-20);
	border-radius: 8px;
	background: var(--white);
	color: var(--text-dark);
	font-family: var(--font);
	font-size: 13px;
	font-weight: bold;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.elanco-page:hover:not(:disabled):not(.is-active) {
	border-color: var(--elanco-blue);
	color: var(--elanco-blue);
}

.elanco-page.is-active {
	background: var(--elanco-blue);
	border-color: var(--elanco-blue);
	color: var(--white);
	cursor: default;
}

.elanco-page:disabled { opacity: .45; cursor: not-allowed; }
.elanco-page-gap { color: var(--grey); padding: 0 2px; }