.spr-root {
	--spr-accent: #2f6f4f;
	--spr-accent-soft: color-mix(in srgb, var(--spr-accent) 12%, #ffffff);
	--spr-ink: #1f2724;
	--spr-muted: #667079;
	--spr-line: #e2e6e4;
	--spr-bg: #ffffff;
	--spr-radius: 14px;
	max-width: 620px;
	margin: 0 auto;
	font-family: inherit;
	color: var(--spr-ink);
	line-height: 1.5;
	box-sizing: border-box;
}
.spr-root *,
.spr-root *::before,
.spr-root *::after { box-sizing: border-box; }

.spr-card {
	background: var(--spr-bg);
	border: 1px solid var(--spr-line);
	border-radius: var(--spr-radius);
	padding: 28px;
	box-shadow: 0 1px 2px rgba(16, 24, 20, 0.04), 0 8px 24px rgba(16, 24, 20, 0.05);
}

.spr-title {
	margin: 0 0 6px;
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}
.spr-intro {
	margin: 0 0 18px;
	color: var(--spr-muted);
}

/* Progreso */
.spr-progress {
	height: 6px;
	background: var(--spr-line);
	border-radius: 999px;
	overflow: hidden;
	margin: 4px 0 8px;
}
.spr-progress-bar {
	height: 100%;
	background: var(--spr-accent);
	border-radius: 999px;
	transition: width 0.3s ease;
}
.spr-step-count {
	font-size: 0.8rem;
	color: var(--spr-muted);
	margin-bottom: 16px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.spr-question {
	margin: 0 0 4px;
	font-size: 1.1rem;
	font-weight: 650;
}
.spr-help {
	margin: 0 0 16px;
	color: var(--spr-muted);
	font-size: 0.92rem;
}
.spr-multi-hint { font-style: italic; }

/* Opciones */
.spr-options {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 22px;
}
.spr-option {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	text-align: left;
	background: #fff;
	border: 1.5px solid var(--spr-line);
	border-radius: 12px;
	padding: 14px 16px;
	cursor: pointer;
	font: inherit;
	color: inherit;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.spr-option:hover { border-color: var(--spr-accent); }
.spr-option:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--spr-accent-soft);
	border-color: var(--spr-accent);
}
.spr-option.is-active {
	border-color: var(--spr-accent);
	background: var(--spr-accent-soft);
}

.spr-mark {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid var(--spr-line);
	margin-top: 2px;
	position: relative;
	transition: border-color 0.15s ease;
}
.spr-mark-box { border-radius: 6px; }
.spr-option.is-active .spr-mark { border-color: var(--spr-accent); }
.spr-option.is-active .spr-mark::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: inherit;
	background: var(--spr-accent);
}
.spr-mark-box.spr-mark::after { border-radius: 2px; }

.spr-option-body { display: flex; flex-direction: column; gap: 2px; }
.spr-option-label { font-weight: 600; }
.spr-option-desc { font-size: 0.88rem; color: var(--spr-muted); }

/* Navegación */
.spr-nav {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.spr-btn {
	font: inherit;
	font-weight: 600;
	border-radius: 10px;
	padding: 11px 20px;
	cursor: pointer;
	border: 1.5px solid transparent;
	transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.spr-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--spr-accent-soft);
}
.spr-btn-primary {
	background: var(--spr-accent);
	color: #fff;
	margin-left: auto;
}
.spr-btn-primary:hover { opacity: 0.9; }
.spr-btn-primary:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}
.spr-btn-ghost {
	background: transparent;
	color: var(--spr-ink);
	border-color: var(--spr-line);
}
.spr-btn-ghost:hover { border-color: var(--spr-accent); color: var(--spr-accent); }
.spr-btn-ghost:disabled { opacity: 0.4; cursor: not-allowed; }

/* Resultado */
.spr-result-list {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--spr-line);
	border-radius: 12px;
	overflow: hidden;
	margin: 6px 0 20px;
}
.spr-result-row {
	display: flex;
	gap: 14px;
	padding: 13px 16px;
	align-items: baseline;
}
.spr-result-qty {
	font-weight: 700;
	color: var(--spr-ink);
	flex: 0 0 auto;
	min-width: 34px;
}

/* Selector de cantidad */
.spr-option-wrap { display: flex; flex-direction: column; }
.spr-progress-units {
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--spr-muted);
	background: var(--spr-accent-soft);
	border-radius: 8px;
	padding: 6px 10px;
	margin: 0 0 14px;
}
.spr-progress-units.is-ok {
	color: #1a7f4b;
	background: color-mix(in srgb, #1a7f4b 12%, #ffffff);
}
.spr-progress-units.is-over {
	color: #c0392b;
	background: color-mix(in srgb, #c0392b 12%, #ffffff);
}
.spr-unit-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: -4px 0 10px 34px;
}
.spr-unit-label {
	font-size: 0.85rem;
	color: var(--spr-muted);
	margin-right: 2px;
}
.spr-step-sm { width: 34px; height: 34px; font-size: 18px; border-radius: 8px; }
.spr-number-sm { width: 58px; height: 34px; font-size: 15px; }
.spr-stepper {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}
.spr-step-btn {
	width: 46px;
	height: 46px;
	border: 1.5px solid var(--spr-line);
	background: #fff;
	border-radius: 10px;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	color: var(--spr-ink);
	transition: border-color 0.15s ease, background 0.15s ease;
}
.spr-step-btn:hover { border-color: var(--spr-accent); color: var(--spr-accent); }
.spr-step-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--spr-accent-soft); border-color: var(--spr-accent); }
.spr-number {
	width: 96px;
	height: 46px;
	text-align: center;
	font: inherit;
	font-size: 18px;
	font-weight: 600;
	color: var(--spr-ink);
	border: 1.5px solid var(--spr-line);
	border-radius: 10px;
}
.spr-number:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--spr-accent-soft); border-color: var(--spr-accent); }
.spr-result-row:not(:last-child) { border-bottom: 1px solid var(--spr-line); }
.spr-result-ref {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-weight: 700;
	color: var(--spr-accent);
	flex: 0 0 auto;
	min-width: 110px;
}
.spr-result-desc { color: var(--spr-ink); }

.spr-summary {
	background: #f7f9f8;
	border-radius: 12px;
	padding: 14px 16px;
	margin-bottom: 20px;
}
.spr-summary-title {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--spr-muted);
	margin-bottom: 8px;
}
.spr-summary-row {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	padding: 4px 0;
	font-size: 0.92rem;
}
.spr-summary-q { color: var(--spr-muted); }
.spr-summary-a { font-weight: 600; text-align: right; }

@media (max-width: 480px) {
	.spr-card { padding: 20px; }
	.spr-result-row { flex-direction: column; gap: 2px; }
	.spr-result-ref { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.spr-progress-bar,
	.spr-option,
	.spr-btn { transition: none; }
}