/* La misma revisión, medida de dos maneras. La versión anterior recortaba dos
   tablas superpuestas con un deslizador y el texto se partía a media palabra:
   aquí las dos columnas se ven enteras a la vez y la comparación la hace la
   longitud de la barra, que es lo que se lee de un vistazo. */

.iaexp-cmp {
	--iaexp-cmp-tinta: var(--e-global-color-secondary);
	--iaexp-cmp-suave: var(--e-global-color-text, #5B5675);
	--iaexp-cmp-buena: var(--e-global-color-primary);
	--iaexp-cmp-linea: color-mix(in srgb, var(--e-global-color-secondary) 12%, transparent);
	color: var(--iaexp-cmp-tinta);
}

.iaexp-cmp__titulo {
	margin: 0 0 0.5rem;
	font-family: var(--e-global-typography-primary-font-family), sans-serif;
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem);
	font-weight: 800;
	line-height: 1.15;
}

.iaexp-cmp__entradilla {
	max-width: 62ch;
	margin: 0 0 1.75rem;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--iaexp-cmp-suave);
}

/* --- La tabla ------------------------------------------------------------ */

.iaexp-cmp__tabla {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.iaexp-cmp__cabecera {
	padding: 0 0 0.75rem;
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: left;
	color: var(--iaexp-cmp-suave);
}

.iaexp-cmp__cabecera--buena {
	color: var(--iaexp-cmp-buena);
}

.iaexp-cmp__fila > * {
	padding: 1rem 0;
	border-top: 1px solid var(--iaexp-cmp-linea);
	vertical-align: baseline;
}

.iaexp-cmp__concepto {
	width: 38%;
	padding-right: 1.5rem;
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.35;
	text-align: left;
	color: var(--iaexp-cmp-tinta);
}

.iaexp-cmp__celda {
	position: relative;
	padding-right: 1.5rem;
}

.iaexp-cmp__cifra {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-family: var(--e-global-typography-primary-font-family), sans-serif;
	/* Tabular para que las tres cifras de la columna caigan en la misma
	   vertical: es una comparación, y un dígito desalineado la estorba. */
	font-variant-numeric: tabular-nums;
	font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem);
	font-weight: 800;
	line-height: 1;
	color: var(--iaexp-cmp-suave);
}

.iaexp-cmp__cifra--buena {
	color: var(--iaexp-cmp-buena);
}

.iaexp-cmp__tic {
	width: 1.1em;
	height: 1.1em;
	flex: none;
}

.iaexp-cmp__unidad {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.78rem;
	letter-spacing: 0.02em;
	color: var(--iaexp-cmp-suave);
	opacity: 0.8;
}

/* La barra vive bajo la cifra, ocupando el ancho de la celda: es la pieza que
   convierte «154 frente a 0» en algo que se compara sin leer los números. */
.iaexp-cmp__barra {
	display: block;
	height: 6px;
	width: var(--iaexp-cmp-prop, 0%);
	margin-top: 0.7rem;
	border-radius: 999px;
	background: linear-gradient(90deg,
		color-mix(in srgb, var(--iaexp-cmp-suave) 65%, transparent),
		color-mix(in srgb, var(--iaexp-cmp-suave) 25%, transparent));
}

.iaexp-cmp__texto {
	display: block;
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--iaexp-cmp-suave);
}

.iaexp-cmp__texto--buena {
	color: var(--iaexp-cmp-buena);
}

.iaexp-cmp__pie {
	margin: 1.25rem 0 0;
	font-size: 0.85rem;
	color: var(--iaexp-cmp-suave);
	opacity: 0.85;
}

/* --- Crecimiento de las barras ------------------------------------------
   El JS solo declara data-anim cuando el bloque está fuera de pantalla al
   cargar: si ya se está viendo, las barras salen a su ancho final y nadie ve
   un salto. Sin JS, este bloque no entra y las barras se pintan enteras. */

.iaexp-cmp[data-anim] .iaexp-cmp__barra {
	width: 0;
	transition: width 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.iaexp-cmp[data-anim][data-visible] .iaexp-cmp__barra {
	width: var(--iaexp-cmp-prop, 0%);
}

@media (prefers-reduced-motion: reduce) {
	.iaexp-cmp[data-anim] .iaexp-cmp__barra {
		width: var(--iaexp-cmp-prop, 0%);
		transition: none;
	}
}

/* --- Móvil ---------------------------------------------------------------
   Tres columnas no caben: cada fila pasa a bloque y las dos medidas se ponen
   una al lado de la otra con su etiqueta, que aquí sí hace falta porque la
   cabecera de la tabla deja de estar a la vista. */

@media (max-width: 767px) {
	.iaexp-cmp__tabla,
	.iaexp-cmp__tabla tbody {
		display: block;
		width: 100%;
	}

	.iaexp-cmp__tabla thead {
		display: none;
	}

	.iaexp-cmp__fila {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.75rem 1rem;
		width: 100%;
		padding: 1.1rem 0;
		border-top: 1px solid var(--iaexp-cmp-linea);
	}

	.iaexp-cmp__fila > * {
		display: block;
		padding: 0;
		border-top: 0;
	}

	.iaexp-cmp__concepto {
		grid-column: 1 / -1;
		width: auto;
		font-weight: 700;
	}

	.iaexp-cmp__celda::before {
		content: attr(data-columna);
		display: block;
		margin-bottom: 0.35rem;
		font-family: var(--e-global-typography-accent-font-family), sans-serif;
		font-size: 0.68rem;
		font-weight: 800;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--iaexp-cmp-suave);
	}

	.iaexp-cmp__celda--despues::before {
		color: var(--iaexp-cmp-buena);
	}
}

/* Sobre la aurora oscura la comparativa invierte su paleta, igual que el resto
   de bloques del plugin. */
.iaexp-aurora .iaexp-cmp {
	--iaexp-cmp-tinta: var(--e-global-color-4c06697, #fff);
	--iaexp-cmp-suave: var(--e-global-color-329db06, #d6d4e4);
	--iaexp-cmp-buena: var(--e-global-color-4c06697, #fff);
	--iaexp-cmp-linea: color-mix(in srgb, var(--e-global-color-4c06697, #fff) 18%, transparent);
}