/**
 * [gd_proceso] - Pasos de un proceso, en columna.
 *
 * Paleta y medidas tomadas del diseño (procesos.png): tarjeta de 172x62 con
 * radio 10 y una linea punteada azul entre una y otra. La separacion es de
 * 15px, y la linea la lee de ahi: al cambiar el hueco, se ajusta sola.
 *
 * El estado destacado no duplica reglas: solo cambia un puñado de tokens
 * (--gd-proc-c-*) que la tarjeta consume. Asi el bloque "activo" son seis
 * declaraciones, no una copia entera de la tarjeta.
 */

.gd-proc {
	/* Reposo */
	--gd-proc-fondo: #f8fafc;
	--gd-proc-borde: rgba(34, 51, 85, 0.06);
	--gd-proc-titulo: #111827;
	--gd-proc-texto: #737a88;
	--gd-proc-circulo: #e0e3e9;
	--gd-proc-circulo-texto: #79808d;

	/* Destacado: el paso bajo el cursor, y el inicial mientras no haya cursor */
	--gd-proc-on-fondo: #172238;
	--gd-proc-on-borde: #5b8cff;
	--gd-proc-on-titulo: #ffffff;
	--gd-proc-on-texto: #64a1c3;
	--gd-proc-on-circulo: #5b8cff;
	--gd-proc-on-circulo-texto: #ffffff;

	--gd-proc-linea: rgba(89, 139, 255, 0.44);
	--gd-proc-radio: 10px;
	--gd-proc-hueco: 15px;
	--gd-proc-circulo-tamano: 28px;

	/* Lo fija el shortcode con un style inline. */
	--gd-proc-ancho: 340px;

	--gd-proc-fuente-titulo: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif;
	--gd-proc-fuente-texto: "Inter", system-ui, -apple-system, sans-serif;

	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--gd-proc-hueco);
	width: 100%;
	max-width: var(--gd-proc-ancho);
	margin-inline: auto;
	/* Reset de lista: es un <ol> por semantica, no por su viñeta. */
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.gd-proc *,
.gd-proc *::before,
.gd-proc *::after {
	box-sizing: border-box;
}

.gd-proc.gd-proc--oscuro {
	--gd-proc-fondo: rgba(255, 255, 255, 0.05);
	--gd-proc-borde: rgba(255, 255, 255, 0.1);
	--gd-proc-titulo: #ffffff;
	--gd-proc-texto: rgba(255, 255, 255, 0.55);
	--gd-proc-circulo: rgba(255, 255, 255, 0.12);
	--gd-proc-circulo-texto: rgba(255, 255, 255, 0.7);
	/* Sobre fondo oscuro el destacado se levanta en vez de hundirse. */
	--gd-proc-on-fondo: #1d2b46;
}


/* --- Paso y linea de union ------------------------------------------------
 * La linea vive en el ::after del <li> y cae dentro del hueco del flex, por
 * eso arranca en top:100% y mide justo --gd-proc-hueco.
 * ---------------------------------------------------------------------- */

.gd-proc .gd-proc__paso {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gd-proc .gd-proc__paso::before {
	/* Anula la viñeta que algunos temas dibujan con ::before. */
	content: none;
}

.gd-proc .gd-proc__paso:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	width: 2px;
	height: var(--gd-proc-hueco);
	transform: translateX(-1px);
	background-image: repeating-linear-gradient(
		to bottom,
		var(--gd-proc-linea) 0 4px,
		transparent 4px 8px
	);
}


/* --- Tarjeta -------------------------------------------------------------- */

.gd-proc .gd-proc__tarjeta {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 62px;
	padding: 12px 16px 12px 56px;
	border: 1px solid var(--gd-proc-c-borde, var(--gd-proc-borde));
	border-radius: var(--gd-proc-radio);
	background: var(--gd-proc-c-fondo, var(--gd-proc-fondo));
	text-align: center;
	text-decoration: none;
	transition: background-color 0.28s ease, border-color 0.28s ease,
		box-shadow 0.28s ease;
}

/*
 * El circulo se saca del flujo para que el texto quede centrado respecto de
 * la tarjeta entera, como en el diseño, y no respecto del hueco que sobra.
 */
.gd-proc .gd-proc__numero {
	position: absolute;
	top: 50%;
	left: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--gd-proc-circulo-tamano);
	height: var(--gd-proc-circulo-tamano);
	margin-top: calc(var(--gd-proc-circulo-tamano) / -2);
	border-radius: 50%;
	background: var(--gd-proc-c-circulo, var(--gd-proc-circulo));
	color: var(--gd-proc-c-circulo-texto, var(--gd-proc-circulo-texto));
	font-family: var(--gd-proc-fuente-texto);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	transition: background-color 0.28s ease, color 0.28s ease;
}

.gd-proc.gd-proc--sin-numeros .gd-proc__numero {
	display: none;
}

.gd-proc.gd-proc--sin-numeros .gd-proc__tarjeta {
	padding-left: 16px;
}

.gd-proc .gd-proc__cuerpo {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.gd-proc .gd-proc__titulo {
	color: var(--gd-proc-c-titulo, var(--gd-proc-titulo));
	font-family: var(--gd-proc-fuente-titulo);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	transition: color 0.28s ease;
}

.gd-proc .gd-proc__texto {
	color: var(--gd-proc-c-texto, var(--gd-proc-texto));
	font-family: var(--gd-proc-fuente-texto);
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.35;
	transition: color 0.28s ease;
}


/* --- Estado destacado -----------------------------------------------------
 * El bloque de tokens aparece dos veces a proposito:
 *
 *   - el primero es el hover, y funciona en cualquier navegador;
 *   - el segundo da esa misma forma al paso inicial, pero solo mientras no
 *     haya ningun paso bajo el cursor, y eso necesita :has().
 *
 * Si los dos selectores compartieran una sola regla, un navegador sin :has()
 * descartaria la lista entera y se quedaria tambien sin hover. Separados, lo
 * peor que pasa ahi es perder el destacado en reposo.
 * ---------------------------------------------------------------------- */

.gd-proc .gd-proc__paso:hover,
.gd-proc .gd-proc__paso:focus-within {
	--gd-proc-c-fondo: var(--gd-proc-on-fondo);
	--gd-proc-c-borde: var(--gd-proc-on-borde);
	--gd-proc-c-titulo: var(--gd-proc-on-titulo);
	--gd-proc-c-texto: var(--gd-proc-on-texto);
	--gd-proc-c-circulo: var(--gd-proc-on-circulo);
	--gd-proc-c-circulo-texto: var(--gd-proc-on-circulo-texto);
}

.gd-proc:not(:has(.gd-proc__paso:hover, .gd-proc__paso:focus-within)) .gd-proc__paso.is-inicial {
	--gd-proc-c-fondo: var(--gd-proc-on-fondo);
	--gd-proc-c-borde: var(--gd-proc-on-borde);
	--gd-proc-c-titulo: var(--gd-proc-on-titulo);
	--gd-proc-c-texto: var(--gd-proc-on-texto);
	--gd-proc-c-circulo: var(--gd-proc-on-circulo);
	--gd-proc-c-circulo-texto: var(--gd-proc-on-circulo-texto);
}

/* El halo azul que el diseño le pone al paso destacado. */
.gd-proc .gd-proc__paso:hover .gd-proc__tarjeta,
.gd-proc .gd-proc__paso:focus-within .gd-proc__tarjeta,
.gd-proc:not(:has(.gd-proc__paso:hover, .gd-proc__paso:focus-within)) .gd-proc__paso.is-inicial .gd-proc__tarjeta {
	box-shadow: 0 0 0 3px rgba(91, 140, 255, 0.16);
}

.gd-proc a.gd-proc__tarjeta {
	cursor: pointer;
}

.gd-proc a.gd-proc__tarjeta:focus-visible {
	outline: 2px solid var(--gd-proc-on-borde);
	outline-offset: 3px;
}


/* --- Preferencias de movimiento ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.gd-proc .gd-proc__tarjeta,
	.gd-proc .gd-proc__numero,
	.gd-proc .gd-proc__titulo,
	.gd-proc .gd-proc__texto {
		transition: none;
	}
}