/**
 * Estilos del shortcode [evolucion].
 *
 * Se apoya en las variables que ya define Astra (--ast-global-color-*) para
 * que el bloque siga la paleta del sitio aunque se cambie desde el
 * Personalizador. Los valores tras la coma son el respaldo si el tema cambia.
 *   color 0 = morado corporativo   color 3 = dorado de destacados
 *   color 2 = color de titulares   color 4 = fondo lavanda claro
 */

.ongpqn-evo-bloque {
	--ongpqn-morado: var( --ast-global-color-0, #9e43bc );
	--ongpqn-titular: var( --ast-global-color-2, #0f172a );
	--ongpqn-fondo: var( --ast-global-color-4, #f2f0fe );
	--ongpqn-borde: var( --ast-global-color-6, #d8d8f5 );
	--ongpqn-texto: var( --ast-global-color-7, #0d0614 );

	margin: 2.5em 0;
	color: var( --ongpqn-texto );
}

.ongpqn-evo-titulo {
	margin: 0 0 .8em;
	color: var( --ongpqn-titular );
	text-align: center;
}

/* --------------------------------------------- Fichas (vista por defecto)
 *
 * Una ficha por proyecto, cada una con su propia minigráfica escalada a su
 * rango: en un eje compartido, las series pequeñas quedarían pegadas al cero.
 * El color del proyecto identifica la ficha en la franja superior, en la cifra
 * grande y en la línea.
 */

.ongpqn-evo-fichas {
	display: grid;
	/* Dos por fila: la ficha queda el doble de ancha y la minigráfica se lee
	   como una curva y no como una raya estirada. */
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 16px;
}

.ongpqn-evo-ficha {
	display: flex;
	flex-direction: column;
	padding: 16px 18px 10px;
	/* Fondo transparente: hereda el de la sección donde se pegue el shortcode.
	   La ficha se delimita con el borde y con la franja de color del proyecto. */
	background: transparent;
	border: 1px solid var( --ongpqn-borde );
	border-top: 4px solid var( --ongpqn-c, var( --ongpqn-morado ) );
	border-radius: 14px;
}

/* Los márgenes van con el bloque por delante (dos clases) a propósito:
   el tema aplica sus propios márgenes de párrafo con selectores como
   ".entry-content p", que ganan a una sola clase y metían casi 90 px de
   hueco muerto dentro de cada ficha. */
.ongpqn-evo-bloque .ongpqn-evo-ficha__valor {
	margin: 0 0 .06em;
	font-size: clamp( 2rem, 3.6vw, 2.5rem );
	font-weight: 700;
	line-height: 1.05;
	color: var( --ongpqn-c, var( --ongpqn-morado ) );
	font-variant-numeric: tabular-nums;
	letter-spacing: -.02em;
}

.ongpqn-evo-bloque .ongpqn-evo-ficha__nombre {
	margin: 0 0 .1em;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
	color: var( --ongpqn-titular );
}

.ongpqn-evo-bloque .ongpqn-evo-ficha__desc {
	margin: 0;
	font-size: .82rem;
	line-height: 1.3;
	opacity: .65;
}

.ongpqn-evo-bloque .ongpqn-evo-ficha__variacion {
	margin: .55em 0 0;
	font-size: .78rem;
	opacity: .75;
}

.ongpqn-evo-ficha__delta {
	display: inline-block;
	padding: 1px 8px;
	margin-right: 5px;
	border-radius: 999px;
	font-weight: 700;
	color: #14532d;
	background: #dcfce7;
	font-variant-numeric: tabular-nums;
}

.ongpqn-evo-ficha__delta.es-baixa {
	color: #7f1d1d;
	background: #fee2e2;
}

/* Escalado proporcional (height:auto): la gráfica crece con el ancho de la
   ficha y llena el hueco que antes quedaba vacío, sin deformar las cifras. */
.ongpqn-evo-bloque .ongpqn-evo-mini {
	display: block;
	width: 100%;
	height: auto;
	margin: auto 0 0;
	padding-top: 8px;
}

.ongpqn-evo-mini__cifra {
	font-family: inherit;
	/* En unidades del viewBox: con el lienzo a 400 de ancho, en una ficha de
	   unos 550 px estas 8 unidades se ven a unos 11 px. */
	font-size: 8px;
	fill: var( --ongpqn-texto );
	opacity: .5;
	font-variant-numeric: tabular-nums;
}

.ongpqn-evo-mini__cifra.es-ultima {
	font-weight: 700;
	opacity: .85;
}

.ongpqn-evo-ficha__pie {
	display: flex;
	justify-content: space-between;
	margin-top: 2px;
	padding-top: 6px;
	border-top: 1px solid var( --ongpqn-borde );
	font-size: .72rem;
	opacity: .5;
	font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------- Cifras */

.ongpqn-evo-cifras {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 190px, 1fr ) );
	gap: 14px;
	margin-bottom: 26px;
}

.ongpqn-evo-cifra {
	position: relative;
	padding: 20px 18px 16px;
	background: var( --ongpqn-fondo );
	border-radius: 14px;
	border: 1px solid var( --ongpqn-borde );
	/* La franja superior identifica el proyecto con su propio color. */
	border-top: 4px solid var( --ongpqn-c, var( --ongpqn-morado ) );
	transition: transform .18s ease, box-shadow .18s ease;
}

.ongpqn-evo-cifra:hover {
	transform: translateY( -3px );
	box-shadow: 0 10px 24px rgba( 13, 6, 20, .10 );
}

.ongpqn-evo-cifra__valor {
	display: block;
	font-size: clamp( 2.1rem, 5vw, 2.9rem );
	font-weight: 700;
	line-height: 1.05;
	color: var( --ongpqn-c, var( --ongpqn-morado ) );
	font-variant-numeric: tabular-nums;
}

.ongpqn-evo-cifra__nombre {
	margin: .35em 0 .1em;
	font-size: 1.02rem;
	font-weight: 600;
	color: var( --ongpqn-titular );
}

.ongpqn-evo-cifra__desc {
	margin: 0;
	font-size: .86rem;
	line-height: 1.35;
	opacity: .72;
}

.ongpqn-evo-cifra__pie {
	margin: .7em 0 0;
	font-size: .8rem;
	opacity: .7;
}

.ongpqn-evo-cifra__delta {
	display: inline-block;
	padding: 1px 7px;
	margin-right: 4px;
	border-radius: 999px;
	font-weight: 700;
	color: #14532d;
	background: #dcfce7;
}

.ongpqn-evo-cifra__delta.es-baixa {
	color: #7f1d1d;
	background: #fee2e2;
}

/* ---------------------------------------------------------- Gráfica */

.ongpqn-evo-fig {
	margin: 0;
	padding: 8px 0 4px;
	background: transparent;
}

.ongpqn-evo-lienzo {
	position: relative;
}

.ongpqn-evo-svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	font-family: inherit;
}

.ongpqn-evo-rejilla {
	stroke: var( --ongpqn-borde );
	stroke-width: 1;
}

.ongpqn-evo-eje {
	font-size: 12px;
	fill: var( --ongpqn-texto );
	opacity: .55;
	font-family: inherit;
}

.ongpqn-evo-guia {
	stroke: var( --ongpqn-morado );
	stroke-width: 1;
	stroke-dasharray: 4 4;
	opacity: .5;
}

.ongpqn-evo-punto {
	transition: r .12s ease;
}

.ongpqn-evo-punto.esta-activo {
	r: 6.5;
}

/* Trazado progresivo al entrar en pantalla. Se anula si la persona
   ha pedido menos animación en su sistema. */
.ongpqn-evo-lienzo.vai-animar .ongpqn-evo-linea {
	stroke-dasharray: var( --ongpqn-len );
	stroke-dashoffset: var( --ongpqn-len );
}

.ongpqn-evo-lienzo.animada .ongpqn-evo-linea {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 1.1s cubic-bezier( .22, .61, .36, 1 );
}

@media ( prefers-reduced-motion: reduce ) {
	.ongpqn-evo-lienzo.vai-animar .ongpqn-evo-linea {
		stroke-dasharray: none;
		stroke-dashoffset: 0;
	}
	.ongpqn-evo-cifra:hover {
		transform: none;
	}
}

/* --------------------------------------------------------- Tooltip */

.ongpqn-evo-tip {
	position: absolute;
	z-index: 5;
	min-width: 130px;
	padding: 9px 11px;
	background: var( --ongpqn-titular );
	color: #fff;
	border-radius: 10px;
	font-size: .82rem;
	line-height: 1.45;
	pointer-events: none;
	transform: translate( -50%, -115% );
	box-shadow: 0 6px 20px rgba( 13, 6, 20, .25 );
}

.ongpqn-evo-tip b {
	display: block;
	margin-bottom: 3px;
	font-size: .9rem;
}

.ongpqn-evo-tip span {
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.ongpqn-evo-tip i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex: 0 0 auto;
}

.ongpqn-evo-tip em {
	margin-left: auto;
	font-style: normal;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------- Leyenda */

.ongpqn-evo-leyenda {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 18px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
	font-size: .86rem;
}

.ongpqn-evo-leyenda li {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
}

.ongpqn-evo-leyenda span {
	width: 11px;
	height: 11px;
	border-radius: 3px;
	flex: 0 0 auto;
}

/* Tabla equivalente para lectores de pantalla y buscadores. */
.ongpqn-evo-tabla-oculta {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.ongpqn-evo-vacio {
	padding: 14px 16px;
	border-left: 4px solid #fbbe16;
	background: #fffbeb;
}

@media ( max-width: 640px ) {
	/* Una sola columna: a dos, la minigráfica se queda sin ancho útil. */
	.ongpqn-evo-fichas {
		grid-template-columns: 1fr;
		gap: 26px;
	}
	.ongpqn-evo-cifras {
		grid-template-columns: repeat( auto-fit, minmax( 145px, 1fr ) );
	}
}