/*
 * La Galga Gris · configurator.css
 * Stepper visual de 6 pasos. Transiciones horizontales + crossfade vía GSAP en JS.
 */

.lgg-configurator {
	background: var(--color-bg-card);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	color: var(--color-ink-primary);
	min-height: 580px;
}
.lgg-configurator--full {
	min-height: calc(100vh - 200px);
}

/* ── Head: progress ─────────────────────────────────────────────── */
.lgg-configurator__head {
	padding: var(--sp-5) var(--sp-5) var(--sp-3);
	border-bottom: 1px solid var(--color-border-subtle);
	background: var(--color-bg-base);
	position: relative;
}
.lgg-configurator__progress {
	position: relative;
}
.lgg-configurator__bar {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--sp-2);
	position: relative;
	z-index: 2;
}
.lgg-configurator__step-tab button {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	padding: var(--sp-2) var(--sp-3);
	border-radius: var(--radius-md);
	background: transparent;
	color: var(--color-ink-muted);
	border: 0;
	cursor: pointer;
	text-align: left;
	transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.lgg-configurator__step-tab.is-current button { background: var(--color-bg-card); color: var(--color-ink-primary); box-shadow: var(--shadow-sm); }
.lgg-configurator__step-tab.is-done button    { color: var(--color-ink-secondary); }
.lgg-configurator__step-tab.is-done button .lgg-configurator__step-n { color: var(--color-accent); }
.lgg-configurator__step-tab:not(.is-done):not(.is-current) button { cursor: not-allowed; }

.lgg-configurator__step-n {
	font-family: var(--font-display);
	font-size: var(--fz-micro);
	font-weight: var(--fw-medium);
	letter-spacing: 0.04em;
}
.lgg-configurator__step-label {
	font-family: var(--font-body);
	font-size: var(--fz-small);
	font-weight: var(--fw-semibold);
}

.lgg-configurator__bar-fill {
	position: absolute;
	left: 0; right: 0; bottom: -3px;
	height: 3px;
	background: var(--color-accent);
	width: 16.66%;
	border-radius: 2px;
	transition: width var(--dur-slow) var(--ease-emphasized);
	z-index: 1;
}

.lgg-configurator__reset {
	margin-top: var(--sp-3);
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	background: none;
	border: 0;
	font-size: var(--fz-small);
	color: var(--color-ink-muted);
	cursor: pointer;
}
.lgg-configurator__reset:hover { color: var(--color-danger); }

/* ── Viewport / steps ───────────────────────────────────────────── */
.lgg-configurator__viewport {
	flex: 1;
	position: relative;
	overflow: hidden;
	background: var(--color-bg-card);
}
.lgg-configurator__form {
	position: relative;
	min-height: 100%;
}
.lgg-configurator__step {
	display: none;
	padding: var(--sp-6) var(--sp-5);
}
.lgg-configurator__step.is-active { display: block; }

.lgg-configurator__step-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-6);
	align-items: start;
}
@media (min-width: 900px) {
	.lgg-configurator__step-grid { grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-7); }
}

.lgg-configurator__step-copy { display: flex; flex-direction: column; gap: var(--sp-3); }
.lgg-configurator__step-copy--top { margin-bottom: var(--sp-5); max-width: 56ch; }
.lgg-configurator__step-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: var(--fw-medium);
	line-height: 1.1;
}
.lgg-configurator__step-control { display: flex; flex-direction: column; gap: var(--sp-4); }

/* ── Paso 1: medidor de cuello ──────────────────────────────────── */
.lgg-configurator__neckmeter svg { width: 100%; max-width: 360px; height: auto; }
.lgg-configurator__slider {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	max-width: 360px;
}
.lgg-configurator__slider input[type="range"] {
	width: 100%;
	accent-color: var(--color-accent);
	height: 4px;
}

.lgg-configurator__sizes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-2);
	border: 0;
	padding: 0;
	margin: 0;
}
.lgg-configurator__size-radio {
	position: relative;
	display: flex;
	gap: var(--sp-3);
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-md);
	background: var(--color-bg-card);
	cursor: pointer;
	font-size: var(--fz-small);
	color: var(--color-ink-secondary);
	line-height: 1.4;
	transition: border-color var(--dur-fast) var(--ease-standard),
				box-shadow var(--dur-fast) var(--ease-standard),
				background var(--dur-fast) var(--ease-standard);
}
.lgg-configurator__size-radio input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.lgg-configurator__size-radio strong {
	display: block;
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: var(--fw-medium);
	color: var(--color-ink-primary);
	line-height: 1;
}
.lgg-configurator__size-radio em { font-style: normal; font-size: var(--fz-micro); color: var(--color-ink-muted); }
.lgg-configurator__size-radio.is-suggested { border-color: var(--color-accent); }
.lgg-configurator__size-radio:has(input:checked) {
	border-color: var(--color-accent);
	background: var(--color-accent-soft);
	box-shadow: var(--shadow-glow-accent);
}

/* ── Paso 2: anchuras ───────────────────────────────────────────── */
.lgg-configurator__widths {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-2);
	border: 0;
	padding: 0;
	margin: 0;
}
.lgg-configurator__width-radio {
	position: relative;
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: var(--sp-4);
	align-items: center;
	padding: var(--sp-4);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-md);
	cursor: pointer;
	background: var(--color-bg-card);
	transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.lgg-configurator__width-radio input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.lgg-configurator__width-radio:has(input:checked) {
	border-color: var(--color-accent);
	background: var(--color-accent-soft);
}
.lgg-configurator__width-art {
	display: flex;
	align-items: center;
}
.lgg-configurator__width-art span {
	display: block;
	width: 100%;
	background: var(--color-ink-primary);
	border-radius: 3px;
}
.lgg-configurator__width-label strong {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: var(--fw-medium);
	color: var(--color-ink-primary);
	margin-right: var(--sp-2);
}

/* ── Paso 3: diseños grid ───────────────────────────────────────── */
.lgg-configurator__designs-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin-bottom: var(--sp-4);
}
.lgg-configurator__designs-filters .lgg-chip { cursor: pointer; border: 1px solid var(--color-border-default); }
.lgg-configurator__designs-filters .lgg-chip.is-active { background: var(--color-ink-primary); color: var(--color-ink-inverse); border-color: var(--color-ink-primary); }

.lgg-configurator__designs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-3);
}
@media (min-width: 600px) { .lgg-configurator__designs { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .lgg-configurator__designs { grid-template-columns: repeat(4, 1fr); } }

.lgg-configurator__design {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	cursor: pointer;
	padding: var(--sp-2);
	border-radius: var(--radius-md);
	transition: background var(--dur-fast) var(--ease-standard);
}
.lgg-configurator__design input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.lgg-configurator__design[hidden] { display: none !important; }
.lgg-configurator__design:hover { background: var(--color-bg-subtle); }
.lgg-configurator__design:has(input:checked) {
	background: var(--color-accent-soft);
	box-shadow: var(--shadow-glow-accent);
}
.lgg-configurator__design-thumb {
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--color-bg-subtle);
}
.lgg-configurator__design-name {
	font-family: var(--font-body);
	font-size: var(--fz-small);
	font-weight: var(--fw-medium);
	color: var(--color-ink-primary);
	text-align: center;
}

/* CSS-pattern factory para el demo de telas */
.lgg-pattern { background: var(--color-bg-subtle); }
.lgg-pattern--leopard       { background: radial-gradient(ellipse at 20% 30%, #8B5A2B 0 18%, transparent 22%), radial-gradient(ellipse at 70% 60%, #8B5A2B 0 14%, transparent 19%), radial-gradient(ellipse at 35% 75%, #8B5A2B 0 12%, transparent 17%), #E8C99B; }
.lgg-pattern--leopard-green { background: radial-gradient(ellipse at 25% 30%, #1F4D2C 0 16%, transparent 22%), radial-gradient(ellipse at 70% 60%, #1F4D2C 0 14%, transparent 19%), radial-gradient(ellipse at 35% 75%, #1F4D2C 0 12%, transparent 17%), #A4C39A; }
.lgg-pattern--dots-pink     { background-image: radial-gradient(#FFFFFF 14%, transparent 16%), radial-gradient(#FFFFFF 14%, transparent 16%); background-size: 18px 18px; background-position: 0 0, 9px 9px; background-color: #FF6B9C; }
.lgg-pattern--pop-blue      { background: linear-gradient(135deg, #4A90E2 50%, #FFD60A 50%); }
.lgg-pattern--pop-yellow    { background: repeating-linear-gradient(45deg, #FFD60A 0 12px, #FF6B35 12px 24px); }
.lgg-pattern--pop-red       { background: radial-gradient(circle at 30% 30%, #FFD60A 0 12%, transparent 14%), radial-gradient(circle at 70% 60%, #FFD60A 0 10%, transparent 12%), #E63946; }
.lgg-pattern--floral-blue   { background: radial-gradient(circle at 25% 30%, #FFFFFF 0 8%, transparent 10%), radial-gradient(circle at 70% 70%, #FFFFFF 0 8%, transparent 10%), radial-gradient(circle at 50% 50%, #87CEEB 0 14%, transparent 16%), #2C5F8D; }
.lgg-pattern--floral-pink   { background: radial-gradient(circle at 25% 30%, #FFFFFF 0 8%, transparent 10%), radial-gradient(circle at 70% 70%, #FFFFFF 0 8%, transparent 10%), radial-gradient(circle at 50% 50%, #FFB6C1 0 14%, transparent 16%), #C75D8A; }
.lgg-pattern--geo           { background: linear-gradient(45deg, #3D4A55 25%, transparent 25%, transparent 75%, #3D4A55 75%), linear-gradient(45deg, #3D4A55 25%, #D9C5A3 25%, #D9C5A3 75%, #3D4A55 75%); background-size: 16px 16px; background-position: 0 0, 8px 8px; }
.lgg-pattern--tropical      { background: radial-gradient(circle at 30% 40%, #FFD60A 0 10%, transparent 12%), radial-gradient(circle at 70% 70%, #FF6B35 0 10%, transparent 12%), radial-gradient(circle at 50% 25%, #06A77D 0 8%, transparent 10%), #FFF2D8; }
.lgg-pattern--skull         { background: radial-gradient(circle at 30% 35%, #FFFFFF 0 8%, transparent 10%), radial-gradient(circle at 70% 35%, #FFFFFF 0 8%, transparent 10%), radial-gradient(circle at 50% 60%, #FFFFFF 0 10%, transparent 12%), #1A2026; }
.lgg-pattern--wave-pink     { background: repeating-radial-gradient(circle at 0 50%, #FFB6C1 0 10px, #C75D8A 10px 20px); }

/* ── Paso 4: leash ──────────────────────────────────────────────── */
.lgg-configurator__leash {
	display: grid;
	gap: var(--sp-2);
	border: 0;
	padding: 0;
	margin: 0;
}
.lgg-configurator__leash-radio {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	padding: var(--sp-4);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-md);
	cursor: pointer;
	background: var(--color-bg-card);
}
.lgg-configurator__leash-radio input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.lgg-configurator__leash-radio:has(input:checked) {
	border-color: var(--color-accent);
	background: var(--color-accent-soft);
}
.lgg-configurator__leash-h {
	font-family: var(--font-display);
	font-size: 1.1rem;
	font-weight: var(--fw-medium);
	color: var(--color-ink-primary);
}
.lgg-configurator__leash-p {
	font-size: var(--fz-small);
	color: var(--color-ink-secondary);
}
.lgg-configurator__leash-p strong { color: var(--color-ink-primary); font-weight: var(--fw-semibold); }

/* ── Paso 5: chapa ──────────────────────────────────────────────── */
.lgg-configurator__tag-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	margin-top: var(--sp-2);
	padding: var(--sp-3) var(--sp-4);
	background: var(--color-bg-subtle);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-md);
	cursor: pointer;
	font-size: var(--fz-small);
	font-weight: var(--fw-medium);
}
.lgg-configurator__tag-preview {
	background: var(--color-bg-subtle);
	border-radius: var(--radius-md);
	padding: var(--sp-3);
	display: flex;
	justify-content: center;
}
.lgg-configurator__tag-preview svg { max-width: 240px; width: 100%; height: auto; filter: drop-shadow(0 6px 10px rgba(26,32,38,0.12)); }
.lgg-configurator__tag-fields {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	margin-top: var(--sp-3);
}
.lgg-configurator__tag-material {
	border: 0; padding: 0; margin: 0;
	display: flex;
	gap: var(--sp-3);
	flex-wrap: wrap;
}

/* ── Paso 6: summary ────────────────────────────────────────────── */
.lgg-configurator__summary {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-4);
	max-width: 720px;
	margin-inline: auto;
}
.lgg-configurator__summary-copy { display: flex; flex-direction: column; gap: var(--sp-3); }
.lgg-configurator__summary-list {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	background: var(--color-bg-subtle);
	border-radius: var(--radius-md);
	padding: var(--sp-4);
}
.lgg-configurator__summary-row {
	display: flex;
	justify-content: space-between;
	gap: var(--sp-4);
	padding: var(--sp-2) 0;
	border-bottom: 1px dashed var(--color-border-subtle);
}
.lgg-configurator__summary-row:last-child { border-bottom: 0; }
.lgg-configurator__summary-row dt { font-size: var(--fz-small); color: var(--color-ink-secondary); }
.lgg-configurator__summary-row dd { margin: 0; font-weight: var(--fw-semibold); color: var(--color-ink-primary); }
.lgg-configurator__summary-row--total {
	margin-top: var(--sp-2);
	padding-top: var(--sp-3);
	border-top: 1px solid var(--color-border-default);
}
.lgg-configurator__summary-row--total dt {
	font-family: var(--font-display);
	font-size: 1.1rem;
	color: var(--color-ink-primary);
	font-weight: var(--fw-medium);
}
.lgg-configurator__summary-row--total dd {
	font-family: var(--font-display);
	font-size: 1.75rem;
	color: var(--color-accent);
	font-weight: var(--fw-medium);
}

/* ── Foot ───────────────────────────────────────────────────────── */
.lgg-configurator__foot {
	display: flex;
	gap: var(--sp-3);
	align-items: center;
	justify-content: space-between;
	padding: var(--sp-4) var(--sp-5);
	border-top: 1px solid var(--color-border-subtle);
	background: var(--color-bg-base);
}
.lgg-configurator__foot-status {
	flex: 1;
	text-align: center;
	font-size: var(--fz-small);
	color: var(--color-ink-muted);
}
.lgg-configurator__foot-status.is-error { color: var(--color-danger); }
.lgg-configurator__foot-status.is-success { color: var(--color-success); }