/**
 * Widget "Timeline / Pasos".
 *
 * La orientación (horizontal / vertical) se resuelve con variables CSS: cada modo
 * solo redefine el bloque de variables `--tl-*` y todas las reglas estructurales
 * se escriben una única vez.
 *
 * Elementor carga este archivo solo en las páginas donde se usa el widget.
 */

/* -------------------------------------------------------------------------
 * Variables de apariencia (las sobrescriben los controles del widget)
 * ------------------------------------------------------------------------- */
.aqs-timeline {
	--aqs-tl-item-gap: 24px;
	--aqs-tl-content-gap: 20px;
	--aqs-tl-content-justify: center;

	--aqs-tl-icon-size: 76px;
	--aqs-tl-icon-inner-size: 38px;
	--aqs-tl-icon-bg: #ffffff;
	--aqs-tl-icon-color: #0075c9;
	--aqs-tl-icon-justify: center;
	--aqs-tl-icon-align: center;
	--aqs-tl-icon-offset-x: 0px;
	--aqs-tl-icon-offset-y: 0px;

	--aqs-tl-line-color: #8ecae9;
	--aqs-tl-line-thickness: 4px;
	--aqs-tl-line-dash: 12px;
	--aqs-tl-line-space: 8px;
	--aqs-tl-line-offset: 12px;
	/* Solo en vertical: altura fija de la línea. El control que la define pone
	   además `--aqs-tl-line-grow: 0` para que deje de estirarse. */
	--aqs-tl-line-height: auto;
	--aqs-tl-line-grow: 1;

	--aqs-tl-title-bg: #3ab0e2;
	--aqs-tl-title-color: #ffffff;
	--aqs-tl-title-icon-gap: 6px;
	--aqs-tl-subtitle-color: #003d7c;
	--aqs-tl-description-color: #0075c9;
}

/* -------------------------------------------------------------------------
 * Variables de orientación — horizontal (por defecto)
 * ------------------------------------------------------------------------- */
.aqs-timeline {
	--tl-display: grid;
	--tl-item-display: contents;
	--tl-dir: row;
	--tl-item-dir: column;
	--tl-item-flex: 1 1 0;
	--tl-marker-dir: row;
	--tl-line-w: auto;
	--tl-line-h: var(--aqs-tl-line-thickness);
	--tl-line-flex: 1 1 auto;
	--tl-line-margin: 0 var(--aqs-tl-line-offset);
	--tl-grad-dir: to right;
	--tl-grad-repeat: repeat-x;
	--tl-dot-bg-size: calc(var(--aqs-tl-line-thickness) + var(--aqs-tl-line-space)) 100%;
	--tl-content-pad: var(--aqs-tl-content-gap) var(--aqs-tl-item-gap) 0 0;
	--tl-content-pad-last: var(--aqs-tl-content-gap) 0 0 0;
	--tl-content-justify: flex-start;
	--tl-content-self: stretch;
	--tl-content-min-h: 0px;
	--tl-content-min-h-last: 0px;
}

/* -------------------------------------------------------------------------
 * Variables de orientación — vertical
 * ------------------------------------------------------------------------- */
.aqs-timeline--stack-always {
	--tl-display: flex;
	--tl-item-display: flex;
	--tl-dir: column;
	--tl-item-dir: row;
	--tl-item-flex: 0 0 auto;
	--tl-marker-dir: column;
	--tl-line-w: var(--aqs-tl-line-thickness);
	--tl-line-h: var(--aqs-tl-line-height);
	--tl-line-flex: var(--aqs-tl-line-grow) 1 auto;
	--tl-line-margin: var(--aqs-tl-line-offset) 0;
	--tl-grad-dir: to bottom;
	--tl-grad-repeat: repeat-y;
	--tl-dot-bg-size: 100% calc(var(--aqs-tl-line-thickness) + var(--aqs-tl-line-space));
	--tl-content-pad: 0 0 var(--aqs-tl-item-gap) var(--aqs-tl-content-gap);
	--tl-content-pad-last: 0 0 0 var(--aqs-tl-content-gap);
	--tl-content-justify: var(--aqs-tl-content-justify);
	--tl-content-self: flex-start;
	/* El min-height incluye el padding inferior (border-box), así la caja de
	   contenido mide justo lo que el icono y el texto se centra sobre su eje. */
	--tl-content-min-h: calc(var(--aqs-tl-icon-size) + var(--aqs-tl-item-gap));
	--tl-content-min-h-last: var(--aqs-tl-icon-size);
}

@media (max-width: 1024px) {
	.aqs-timeline--stack-tablet {
		--tl-display: flex;
		--tl-item-display: flex;
		--tl-dir: column;
		--tl-item-dir: row;
		--tl-item-flex: 0 0 auto;
		--tl-marker-dir: column;
		--tl-line-w: var(--aqs-tl-line-thickness);
		--tl-line-h: var(--aqs-tl-line-height);
		--tl-line-flex: var(--aqs-tl-line-grow) 1 auto;
		--tl-line-margin: var(--aqs-tl-line-offset) 0;
		--tl-grad-dir: to bottom;
		--tl-grad-repeat: repeat-y;
		--tl-dot-bg-size: 100% calc(var(--aqs-tl-line-thickness) + var(--aqs-tl-line-space));
		--tl-content-pad: 0 0 var(--aqs-tl-item-gap) var(--aqs-tl-content-gap);
		--tl-content-pad-last: 0 0 0 var(--aqs-tl-content-gap);
		--tl-content-justify: var(--aqs-tl-content-justify);
		--tl-content-self: flex-start;
		--tl-content-min-h: calc(var(--aqs-tl-icon-size) + var(--aqs-tl-item-gap));
		--tl-content-min-h-last: var(--aqs-tl-icon-size);
	}
}

@media (max-width: 767px) {
	.aqs-timeline--stack-mobile {
		--tl-display: flex;
		--tl-item-display: flex;
		--tl-dir: column;
		--tl-item-dir: row;
		--tl-item-flex: 0 0 auto;
		--tl-marker-dir: column;
		--tl-line-w: var(--aqs-tl-line-thickness);
		--tl-line-h: var(--aqs-tl-line-height);
		--tl-line-flex: var(--aqs-tl-line-grow) 1 auto;
		--tl-line-margin: var(--aqs-tl-line-offset) 0;
		--tl-grad-dir: to bottom;
		--tl-grad-repeat: repeat-y;
		--tl-dot-bg-size: 100% calc(var(--aqs-tl-line-thickness) + var(--aqs-tl-line-space));
		--tl-content-pad: 0 0 var(--aqs-tl-item-gap) var(--aqs-tl-content-gap);
		--tl-content-pad-last: 0 0 0 var(--aqs-tl-content-gap);
		--tl-content-justify: var(--aqs-tl-content-justify);
		--tl-content-self: flex-start;
		--tl-content-min-h: calc(var(--aqs-tl-icon-size) + var(--aqs-tl-item-gap));
		--tl-content-min-h-last: var(--aqs-tl-icon-size);
	}
}

/* -------------------------------------------------------------------------
 * Estructura
 * ------------------------------------------------------------------------- */
/**
 * En horizontal el contenedor es una rejilla de dos filas (marcadores / contenido)
 * y los pasos son `display: contents`, así todos los marcadores comparten la altura
 * de la fila: los iconos quedan centrados sobre el mismo eje y los textos empiezan a
 * la misma altura aunque cada paso tenga un tamaño de icono distinto.
 *
 * En vertical el contenedor vuelve a ser flex y las propiedades de rejilla se ignoran
 * (y viceversa con las de flex), por eso conviven en la misma regla.
 */
.aqs-timeline {
	display: var(--tl-display);
	flex-direction: var(--tl-dir);
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	grid-template-rows: auto auto;
	align-items: stretch;
}

.aqs-timeline__item {
	display: var(--tl-item-display);
	flex: var(--tl-item-flex);
	flex-direction: var(--tl-item-dir);
	align-items: stretch;
	min-width: 0;
}

.aqs-timeline__marker {
	display: flex;
	flex: 0 0 auto;
	flex-direction: var(--tl-marker-dir);
	align-items: center;
}

.aqs-timeline__icon {
	display: flex;
	flex: 0 0 auto;
	align-items: var(--aqs-tl-icon-align);
	justify-content: var(--aqs-tl-icon-justify);
	box-sizing: border-box;
	width: var(--aqs-tl-icon-size);
	height: var(--aqs-tl-icon-size);
	background-color: var(--aqs-tl-icon-bg);
	color: var(--aqs-tl-icon-color);
	overflow: hidden;
}

/* El desplazamiento va en `translate` y no en márgenes: así el ajuste es exacto
   (un margen en un contenedor centrado solo mueve la mitad) y no altera el layout. */
.aqs-timeline__icon > * {
	transform: translate(var(--aqs-tl-icon-offset-x), var(--aqs-tl-icon-offset-y));
}

.aqs-timeline__icon i {
	font-size: var(--aqs-tl-icon-inner-size);
	line-height: 1;
}

.aqs-timeline__icon svg {
	width: var(--aqs-tl-icon-inner-size);
	height: var(--aqs-tl-icon-inner-size);
	fill: currentColor;
}

.aqs-timeline__icon img {
	width: var(--aqs-tl-icon-inner-size);
	height: auto;
	max-width: 100%;
	object-fit: contain;
}

/**
 * El bloque de texto va en un hijo propio (`__text`) y no directamente aquí: la
 * etiqueta es `inline-block` y como hijo de un flex se estiraría a todo el ancho,
 * perdiendo la forma de píldora.
 */
.aqs-timeline__content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: var(--tl-content-justify);
	align-self: var(--tl-content-self);
	min-width: 0;
	min-height: var(--tl-content-min-h);
	padding: var(--tl-content-pad);
}

.aqs-timeline__item:last-child .aqs-timeline__content {
	min-height: var(--tl-content-min-h-last);
	padding: var(--tl-content-pad-last);
}

.aqs-timeline__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.aqs-timeline__title {
	display: inline-flex;
	align-items: center;
	gap: var(--aqs-tl-title-icon-gap);
	background-color: var(--aqs-tl-title-bg);
	color: var(--aqs-tl-title-color);
	line-height: 1.4;
}

.aqs-timeline__title-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	color: var(--aqs-tl-title-icon-color, currentColor);
	font-size: var(--aqs-tl-title-icon-size, 1em);
	margin-left: 10px;
}

.aqs-timeline__title-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.aqs-timeline__subtitle {
	margin-top: 0;
	color: var(--aqs-tl-subtitle-color);
}

.aqs-timeline__description {
	color: var(--aqs-tl-description-color);
}

.aqs-timeline__description > *:first-child {
	margin-top: 0;
}

.aqs-timeline__description > *:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * Línea conectora
 * ------------------------------------------------------------------------- */
.aqs-timeline__line {
	flex: var(--tl-line-flex);
	align-self: center;
	width: var(--tl-line-w);
	height: var(--tl-line-h);
	margin: var(--tl-line-margin);
	background-color: var(--aqs-tl-line-color);
}

/**
 * El patrón se resuelve en PHP y se imprime como modificador en cada línea
 * (`--solid`, `--dotted`, …), no en el contenedor: así un paso puede llevar un
 * estilo distinto al global sin peleas de especificidad.
 */
.aqs-timeline__line--dashed,
.aqs-timeline__line--squares,
.aqs-timeline__line--dotted {
	background-color: transparent;
}

/* Guiones */
.aqs-timeline__line--dashed {
	background-image: repeating-linear-gradient(
		var(--tl-grad-dir),
		var(--aqs-tl-line-color) 0,
		var(--aqs-tl-line-color) var(--aqs-tl-line-dash),
		transparent var(--aqs-tl-line-dash),
		transparent calc(var(--aqs-tl-line-dash) + var(--aqs-tl-line-space))
	);
}

/* Cuadrados: guiones cuya longitud es igual al grosor */
.aqs-timeline__line--squares {
	background-image: repeating-linear-gradient(
		var(--tl-grad-dir),
		var(--aqs-tl-line-color) 0,
		var(--aqs-tl-line-color) var(--aqs-tl-line-thickness),
		transparent var(--aqs-tl-line-thickness),
		transparent calc(var(--aqs-tl-line-thickness) + var(--aqs-tl-line-space))
	);
}

/* Puntos */
.aqs-timeline__line--dotted {
	background-image: radial-gradient(circle closest-side, var(--aqs-tl-line-color) 98%, transparent 100%);
	background-size: var(--tl-dot-bg-size);
	background-repeat: var(--tl-grad-repeat);
	background-position: center;
}

/* -------------------------------------------------------------------------
 * Textos alternativos en móvil
 *
 * Ambas versiones se imprimen en el HTML y es el CSS quien decide cuál se ve,
 * para que el resultado siga siendo válido con la página cacheada.
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.aqs-timeline--hide-mobile {
		display: none !important;
	}
}

@media (min-width: 768px) {
	.aqs-timeline--only-mobile {
		display: none !important;
	}
}