/* ==========================================================================
   Calculadora de Valor Antepost — Champions League 2025-26
   components/proprietary/calculadora-valor-champions.css
   Todo el CSS está scopeado bajo #agc-valor-champions.
   ========================================================================== */

#agc-valor-champions {
	/* --- Paleta (ajusta aquí para encajar con el tema) --- */
	--agc-vc-bg: #ffffff;
	--agc-vc-surface: #f4f6fb;
	--agc-vc-surface-alt: #eaeffa;
	--agc-vc-border: #d5dced;
	--agc-vc-border-strong: #b9c4dd;
	--agc-vc-text: #16203a;
	--agc-vc-muted: #5b6883;
	--agc-vc-accent: #1b3f94;
	--agc-vc-accent-ink: #ffffff;
	--agc-vc-pos: #0f7a4a;
	--agc-vc-pos-bg: #e7f5ee;
	--agc-vc-neg: #b3261e;
	--agc-vc-neg-bg: #fdeceb;
	--agc-vc-focus: #1b3f94;

	/* --- Tipografía --- */
	--agc-vc-font: inherit;
	--agc-vc-size-base: 1rem;
	--agc-vc-size-sm: 0.875rem;
	--agc-vc-size-xs: 0.78rem;
	--agc-vc-size-title: 1.35rem;
	--agc-vc-size-value: 1.5rem;
	--agc-vc-weight-bold: 700;
	--agc-vc-lh: 1.6;

	/* --- Espaciado y formas --- */
	--agc-vc-gap: 14px;
	--agc-vc-pad: 18px;
	--agc-vc-radius: 10px;
	--agc-vc-radius-sm: 6px;
	--agc-vc-shadow: 0 1px 3px rgba(22, 32, 58, 0.08);

	box-sizing: border-box;
	margin: 2em 0;
	padding: var(--agc-vc-pad);
	border: 1px solid var(--agc-vc-border);
	border-radius: var(--agc-vc-radius);
	background-color: var(--agc-vc-bg);
	box-shadow: var(--agc-vc-shadow);
	color: var(--agc-vc-text);
	font-family: var(--agc-vc-font);
	font-size: var(--agc-vc-size-base);
	line-height: var(--agc-vc-lh);
}

#agc-valor-champions *,
#agc-valor-champions *::before,
#agc-valor-champions *::after {
	box-sizing: border-box;
	min-width: 0;
	max-width: 100%;
}

#agc-valor-champions [hidden] {
	display: none;
}

#agc-valor-champions .agc-vc__inner {
	display: block;
}

/* --- Cabecera --- */

#agc-valor-champions .agc-vc__title {
	margin: 0 0 8px;
	color: var(--agc-vc-text);
	font-size: var(--agc-vc-size-title);
	font-weight: var(--agc-vc-weight-bold);
	line-height: 1.3;
}

#agc-valor-champions .agc-vc__lead {
	margin: 0 0 var(--agc-vc-gap);
	color: var(--agc-vc-muted);
	font-size: var(--agc-vc-size-sm);
}

#agc-valor-champions .agc-vc__lead--tight {
	margin-top: 0;
}

/* --- Pestañas --- */

#agc-valor-champions .agc-vc__tablist {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: var(--agc-vc-gap);
	padding-bottom: 6px;
	border-bottom: 1px solid var(--agc-vc-border);
}

#agc-valor-champions .agc-vc__tab {
	flex: 1 1 150px;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--agc-vc-border);
	border-radius: var(--agc-vc-radius-sm);
	background-color: var(--agc-vc-surface);
	color: var(--agc-vc-muted);
	font-family: inherit;
	font-size: var(--agc-vc-size-sm);
	font-weight: var(--agc-vc-weight-bold);
	line-height: 1.25;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

#agc-valor-champions .agc-vc__tab:hover {
	background-color: var(--agc-vc-surface-alt);
	color: var(--agc-vc-text);
}

#agc-valor-champions .agc-vc__tab--on,
#agc-valor-champions .agc-vc__tab--on:hover {
	border-color: var(--agc-vc-accent);
	background-color: var(--agc-vc-accent);
	color: var(--agc-vc-accent-ink);
}

/* --- Formularios --- */

#agc-valor-champions .agc-vc__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--agc-vc-gap);
	margin-bottom: var(--agc-vc-gap);
}

#agc-valor-champions .agc-vc__field {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

#agc-valor-champions .agc-vc__label {
	color: var(--agc-vc-text);
	font-size: var(--agc-vc-size-xs);
	font-weight: var(--agc-vc-weight-bold);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

#agc-valor-champions .agc-vc__hint {
	color: var(--agc-vc-muted);
	font-size: var(--agc-vc-size-xs);
}

#agc-valor-champions .agc-vc__control {
	width: 100%;
	margin: 0;
	padding: 10px 11px;
	border: 1px solid var(--agc-vc-border-strong);
	border-radius: var(--agc-vc-radius-sm);
	background-color: var(--agc-vc-bg);
	color: var(--agc-vc-text);
	font-family: inherit;
	/* 16px evita el zoom automático en iOS */
	font-size: 16px;
	line-height: 1.3;
}

#agc-valor-champions .agc-vc__control--mini {
	max-width: 100px;
	padding: 7px 8px;
}

#agc-valor-champions .agc-vc__control:hover {
	border-color: var(--agc-vc-accent);
}

/* --- Selector de base de comparación --- */

#agc-valor-champions .agc-vc__modes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 0 0 var(--agc-vc-gap);
	padding: 12px var(--agc-vc-pad);
	border: 1px solid var(--agc-vc-border);
	border-radius: var(--agc-vc-radius-sm);
	background-color: var(--agc-vc-surface);
}

#agc-valor-champions .agc-vc__legend {
	padding: 0 6px;
	color: var(--agc-vc-muted);
	font-size: var(--agc-vc-size-xs);
	font-weight: var(--agc-vc-weight-bold);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

#agc-valor-champions .agc-vc__radio {
	display: inline-flex;
	flex: 1 1 240px;
	align-items: center;
	gap: 7px;
	font-size: var(--agc-vc-size-sm);
}

#agc-valor-champions .agc-vc__radio input {
	width: 17px;
	height: 17px;
	margin: 0;
	flex: none;
}

#agc-valor-champions .agc-vc__radio label {
	cursor: pointer;
}

/* --- Resultados --- */

#agc-valor-champions .agc-vc__results {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
	gap: 10px;
	margin-bottom: var(--agc-vc-gap);
}

#agc-valor-champions .agc-vc__stat {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 12px;
	border: 1px solid var(--agc-vc-border);
	border-radius: var(--agc-vc-radius-sm);
	background-color: var(--agc-vc-surface);
}

#agc-valor-champions .agc-vc__statLabel {
	color: var(--agc-vc-muted);
	font-size: var(--agc-vc-size-xs);
	font-weight: var(--agc-vc-weight-bold);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

#agc-valor-champions .agc-vc__statValue {
	color: var(--agc-vc-text);
	font-size: var(--agc-vc-size-value);
	font-weight: var(--agc-vc-weight-bold);
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

#agc-valor-champions .agc-vc__statValue--pos {
	color: var(--agc-vc-pos);
}

#agc-valor-champions .agc-vc__statValue--neg {
	color: var(--agc-vc-neg);
}

#agc-valor-champions .agc-vc__statNote {
	color: var(--agc-vc-muted);
	font-size: var(--agc-vc-size-xs);
	line-height: 1.4;
}

/* --- Veredicto y notas --- */

#agc-valor-champions .agc-vc__verdict {
	margin: 0 0 var(--agc-vc-gap);
	padding: 12px 14px;
	border-left: 4px solid var(--agc-vc-accent);
	border-radius: var(--agc-vc-radius-sm);
	background-color: var(--agc-vc-surface-alt);
	color: var(--agc-vc-text);
	font-size: var(--agc-vc-size-sm);
}

#agc-valor-champions .agc-vc__verdict--pos {
	border-left-color: var(--agc-vc-pos);
	background-color: var(--agc-vc-pos-bg);
}

#agc-valor-champions .agc-vc__verdict--neg {
	border-left-color: var(--agc-vc-neg);
	background-color: var(--agc-vc-neg-bg);
}

#agc-valor-champions .agc-vc__note {
	margin: 0 0 10px;
	color: var(--agc-vc-muted);
	font-size: var(--agc-vc-size-xs);
}

#agc-valor-champions .agc-vc__em {
	font-weight: var(--agc-vc-weight-bold);
}

#agc-valor-champions .agc-vc__legal {
	margin: var(--agc-vc-gap) 0 0;
	padding-top: 10px;
	border-top: 1px solid var(--agc-vc-border);
	color: var(--agc-vc-muted);
	font-size: var(--agc-vc-size-xs);
}

/* --- Tabla --- */

#agc-valor-champions .agc-vc__tablewrap {
	margin-bottom: var(--agc-vc-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
}

#agc-valor-champions .agc-vc__table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: var(--agc-vc-size-sm);
}

#agc-valor-champions .agc-vc__caption {
	margin-bottom: 8px;
	color: var(--agc-vc-muted);
	font-size: var(--agc-vc-size-xs);
	text-align: left;
}

#agc-valor-champions .agc-vc__table th,
#agc-valor-champions .agc-vc__table td {
	padding: 9px 10px;
	border-bottom: 1px solid var(--agc-vc-border);
	text-align: left;
	vertical-align: middle;
	font-variant-numeric: tabular-nums;
}

#agc-valor-champions .agc-vc__table thead th {
	border-bottom: 2px solid var(--agc-vc-border-strong);
	color: var(--agc-vc-muted);
	font-size: var(--agc-vc-size-xs);
	font-weight: var(--agc-vc-weight-bold);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
}

#agc-valor-champions .agc-vc__table tbody th {
	font-weight: var(--agc-vc-weight-bold);
	white-space: nowrap;
}

#agc-valor-champions .agc-vc__table tbody tr.agc-vc__row--best {
	background-color: var(--agc-vc-pos-bg);
}

#agc-valor-champions .agc-vc__badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	background-color: var(--agc-vc-surface);
	color: var(--agc-vc-text);
	font-weight: var(--agc-vc-weight-bold);
	white-space: nowrap;
}

#agc-valor-champions .agc-vc__badge--pos {
	background-color: var(--agc-vc-pos-bg);
	color: var(--agc-vc-pos);
}

#agc-valor-champions .agc-vc__badge--neg {
	background-color: var(--agc-vc-neg-bg);
	color: var(--agc-vc-neg);
}

/* Etiquetas repetidas para la vista de tarjeta en móvil */
#agc-valor-champions .agc-vc__cellLabel {
	display: none;
	color: var(--agc-vc-muted);
	font-size: var(--agc-vc-size-xs);
	font-weight: var(--agc-vc-weight-bold);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

#agc-valor-champions .agc-vc__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --- Tabla como tarjetas en pantallas estrechas --- */

@media (max-width: 599px) {

	#agc-valor-champions .agc-vc__table,
	#agc-valor-champions .agc-vc__table thead,
	#agc-valor-champions .agc-vc__table tbody,
	#agc-valor-champions .agc-vc__table tr,
	#agc-valor-champions .agc-vc__table th,
	#agc-valor-champions .agc-vc__table td {
		display: block;
	}

	#agc-valor-champions .agc-vc__table thead {
		display: none;
	}

	#agc-valor-champions .agc-vc__table tbody tr {
		margin-bottom: 10px;
		padding: 6px 12px;
		border: 1px solid var(--agc-vc-border);
		border-radius: var(--agc-vc-radius-sm);
		background-color: var(--agc-vc-surface);
	}

	#agc-valor-champions .agc-vc__table th,
	#agc-valor-champions .agc-vc__table td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 7px 0;
	}

	#agc-valor-champions .agc-vc__table tbody tr > :last-child {
		border-bottom: 0;
	}

	#agc-valor-champions .agc-vc__cellLabel {
		display: inline-block;
	}
}

/* --- Ampliación cosmética en pantallas anchas --- */

@media (min-width: 900px) {

	#agc-valor-champions {
		--agc-vc-pad: 24px;
		--agc-vc-size-title: 1.5rem;
	}
}

/* --- Accesibilidad --- */

#agc-valor-champions .agc-vc__tab:focus-visible,
#agc-valor-champions .agc-vc__control:focus-visible,
#agc-valor-champions .agc-vc__panel:focus-visible,
#agc-valor-champions .agc-vc__radio input:focus-visible {
	outline: 3px solid var(--agc-vc-focus);
	outline-offset: 2px;
}

#agc-valor-champions .agc-vc__control:focus {
	border-color: var(--agc-vc-accent);
}

@media (prefers-reduced-motion: reduce) {

	#agc-valor-champions .agc-vc__tab {
		transition: none;
	}
}