/* ============================================================
   Route Step - cards, checkbox state and step actions
   Source: extracted from route-tracker shell
   Selector root: .pensamos-route-tracker__step
   ============================================================ */

.pensamos-route-tracker__step {
	--pensamos-step-border: #aee0ff;
	--pensamos-step-soft: #eef8ff;
	--pensamos-step-badge-start: #6cd6ff;
	--pensamos-step-badge-end: #3dbaf3;
	--pensamos-step-shadow: rgba(61, 186, 243, 0.14);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 18px;
	align-items: start;
	padding: 24px;
	border: 1px solid var(--pensamos-step-border);
	border-radius: 28px;
	background:
		radial-gradient(circle at top right, color-mix(in srgb, var(--pensamos-step-shadow) 88%, transparent), transparent 48%),
		linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(250, 252, 255, 1) 100%);
	box-shadow: 0 14px 30px rgba(13, 28, 49, 0.05);
	transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.pensamos-route-tracker__steps > .pensamos-route-tracker__step:nth-child(4n + 1) {
	--pensamos-step-border: #aee0ff;
	--pensamos-step-soft: #eef8ff;
	--pensamos-step-badge-start: #6cd6ff;
	--pensamos-step-badge-end: #3dbaf3;
	--pensamos-step-shadow: rgba(61, 186, 243, 0.16);
}

.pensamos-route-tracker__steps > .pensamos-route-tracker__step:nth-child(4n + 2) {
	--pensamos-step-border: #cce97a;
	--pensamos-step-soft: #f7ffe8;
	--pensamos-step-badge-start: #7be51a;
	--pensamos-step-badge-end: #58cc02;
	--pensamos-step-shadow: rgba(88, 204, 2, 0.16);
}

.pensamos-route-tracker__steps > .pensamos-route-tracker__step:nth-child(4n + 3) {
	--pensamos-step-border: #ffd36b;
	--pensamos-step-soft: #fff8e5;
	--pensamos-step-badge-start: #ffd055;
	--pensamos-step-badge-end: #ffb92f;
	--pensamos-step-shadow: rgba(255, 185, 47, 0.18);
}

.pensamos-route-tracker__steps > .pensamos-route-tracker__step:nth-child(4n) {
	--pensamos-step-border: #ffc2d1;
	--pensamos-step-soft: #fff2f7;
	--pensamos-step-badge-start: #ff8cab;
	--pensamos-step-badge-end: #ff6b95;
	--pensamos-step-shadow: rgba(255, 107, 149, 0.18);
}

.pensamos-route-tracker--quiz-model .pensamos-route-tracker__steps {
	gap: 12px;
}

.pensamos-route-tracker--quiz-model .pensamos-route-tracker__step {
	padding: 15px 16px;
	gap: 12px;
	border-radius: 20px;
}

.pensamos-route-tracker--quiz-model .pensamos-route-tracker__step-copy strong {
	font-size: 1rem;
	line-height: 1.2;
}

.pensamos-route-tracker--quiz-model .pensamos-route-tracker__step-copy strong::after {
	width: 50px;
	height: 3px;
	opacity: 0.82;
	box-shadow: 0 6px 12px color-mix(in srgb, var(--pensamos-step-badge-end) 24%, transparent);
}

.pensamos-route-tracker--quiz-model .pensamos-route-tracker__step-copy span,
.pensamos-route-tracker--quiz-model .pensamos-route-tracker__step-meta p {
	font-size: 0.9rem;
	line-height: 1.42;
}

.pensamos-route-tracker--quiz-model .pensamos-route-tracker__step-meta {
	display: grid;
	gap: 6px;
	align-items: start;
}

.pensamos-route-tracker__step.is-recommended {
	border-color: var(--pensamos-step-border);
	background:
		radial-gradient(circle at top right, color-mix(in srgb, var(--pensamos-step-shadow) 100%, transparent), transparent 46%),
		linear-gradient(180deg, color-mix(in srgb, var(--pensamos-step-soft) 86%, white) 0%, rgba(255, 255, 255, 1) 100%);
	box-shadow: 0 18px 34px color-mix(in srgb, var(--pensamos-step-shadow) 88%, transparent);
}

.pensamos-route-tracker__step.is-complete {
	background: linear-gradient(180deg, rgba(242, 250, 246, 1) 0%, rgba(255, 255, 255, 1) 100%);
	border-color: rgba(43, 143, 110, 0.34);
}

.pensamos-route-tracker__step.is-plan {
	align-items: start;
}

.pensamos-route-tracker__step-main {
	display: grid;
	gap: 2px;
	min-width: 0;
	align-content: start;
}

.pensamos-route-tracker__checkbox {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 16px;
	align-items: start;
	cursor: pointer;
}

.pensamos-route-tracker__checkbox input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.pensamos-route-tracker__checkbox-ui {
	position: relative;
	width: 28px;
	height: 28px;
	margin-top: 2px;
	border: 2px solid color-mix(in srgb, var(--pensamos-accent) 44%, white);
	border-radius: 10px;
	background: color-mix(in srgb, var(--pensamos-route-soft) 86%, white);
	transition: background 0.18s ease, border-color 0.18s ease;
}

.pensamos-route-tracker__checkbox input:checked + .pensamos-route-tracker__checkbox-ui {
	border-color: #2b8f6e;
	background: linear-gradient(135deg, #2b8f6e 0%, #57ba92 100%);
}

.pensamos-route-tracker__checkbox input:checked + .pensamos-route-tracker__checkbox-ui::after {
	content: "";
	position: absolute;
	top: 4px;
	left: 7px;
	width: 6px;
	height: 11px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(40deg);
}

.pensamos-route-tracker__checkbox input:focus-visible + .pensamos-route-tracker__checkbox-ui {
	outline: 3px solid color-mix(in srgb, var(--pensamos-accent) 26%, white);
	outline-offset: 2px;
}

.pensamos-route-tracker__step-copy {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pensamos-route-tracker__step-copy strong {
	position: relative;
	display: inline-flex;
	width: fit-content;
	padding-bottom: 8px;
	color: var(--pensamos-primary);
	font-size: 1.2rem;
	line-height: 1.22;
}

.pensamos-route-tracker__step-copy strong::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 58px;
	height: 4px;
	border-radius: 999px;
	background: linear-gradient(90deg, color-mix(in srgb, var(--pensamos-step-badge-end) 68%, white) 0%, color-mix(in srgb, var(--pensamos-step-badge-end) 18%, white) 100%);
	opacity: 0.86;
	box-shadow: 0 7px 14px color-mix(in srgb, var(--pensamos-step-badge-end) 26%, transparent);
}

.pensamos-route-tracker__step-plan {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}

.pensamos-route-tracker__step-marker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-top: 2px;
	border-radius: 14px;
	background: linear-gradient(180deg, var(--pensamos-step-badge-start) 0%, var(--pensamos-step-badge-end) 100%);
	border: 0;
	color: #ffffff;
	font-size: 0.94rem;
	font-weight: 800;
	box-shadow: 0 14px 26px color-mix(in srgb, var(--pensamos-step-shadow) 88%, transparent);
}

.pensamos-route-tracker__step-meta {
	display: grid;
	gap: 10px;
	justify-items: start;
	align-items: start;
	margin-top: 16px;
	padding-left: 56px;
}

.pensamos-route-tracker__meta-pill {
	width: fit-content;
	padding: 9px 15px;
	border: 1px solid var(--pensamos-step-border);
	background: color-mix(in srgb, var(--pensamos-step-soft) 84%, white);
	color: var(--pensamos-primary);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.pensamos-route-tracker__step-meta p {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.55;
}

.pensamos-route-tracker__step-tip {
	width: min(100%, 72ch);
	padding: 13px 15px;
	border: 1px solid var(--pensamos-step-border);
	border-radius: 18px;
	background: color-mix(in srgb, var(--pensamos-step-soft) 88%, white);
	color: #48617d;
}

.pensamos-route-tracker__step-actions {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 10px;
	align-content: start;
	align-items: flex-end;
	padding-top: 2px;
}

.pensamos-route-tracker--quiz-model .pensamos-route-tracker__step-action,
.pensamos-route-tracker--quiz-model .pensamos-route-tracker__quiz-trigger {
	min-height: 40px;
	padding: 0 10px;
	font-size: 0.82rem;
}

@media (max-width: 820px) {
	.pensamos-route-tracker__step {
		grid-template-columns: 1fr;
	}

	.pensamos-route-tracker__step-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.pensamos-route-tracker__step-action {
		width: 100%;
	}

	.pensamos-route-tracker__step-meta {
		padding-left: 0;
	}
}

@media (max-width: 680px) {
	.pensamos-route-tracker__step-action {
		justify-content: center;
		width: 100%;
	}
}