/*
 * Configurador 3D (fch-child 1.1.0 · F2-5). Móvil primero: el visor arriba y los controles debajo; desde 1024 px,
 * visor a la izquierda (se queda fijo al bajar) y controles a la derecha. Solo fichas --fch-* del sistema de diseño.
 * Sin JavaScript o sin WebGL: foto fija y resumen (los controles .fch-solo-3d no se ven).
 */

.fch-config {
	background: linear-gradient(180deg, var(--fch-color-fondo) 0%, var(--fch-cera-100) 100%);
}

.fch-config:not(.fch-config--con-3d) .fch-solo-3d {
	display: none !important;
}

.fch-config__rejilla {
	display: grid;
	gap: var(--fch-esp-bloque);
	min-width: 0;
}

.fch-config__escena,
.fch-config__panel {
	display: grid;
	gap: var(--fch-esp-4);
	align-content: start;
	min-width: 0;
}

/* ---------------------------------------------------------------- Visor */
.fch-config__lienzo {
	position: relative;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 1 / 1;
	border: var(--fch-borde-fino) solid var(--fch-color-borde);
	border-radius: var(--fch-radio-lg);
	background:
		radial-gradient(120% 90% at 50% 18%, var(--fch-blanco) 0%, var(--fch-cera-50) 55%, var(--fch-cera-200) 100%);
	box-shadow: var(--fch-sombra-2);
}

.fch-config__lienzo:focus-visible {
	outline: var(--fch-foco-ancho) solid var(--fch-color-foco);
	outline-offset: var(--fch-foco-separacion);
}

.fch-config__canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	cursor: grab;
}

.fch-config__canvas:active {
	cursor: grabbing;
}

.fch-config__foto {
	position: absolute;
	inset: 0;
	margin: 0;
	display: grid;
	place-items: center;
	padding: var(--fch-esp-6);
}

.fch-config__foto picture,
.fch-config__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Con el 3D listo, fuera la foto; sin modelo para ese tipo, fuera el lienzo (y la foto, si no es el principal). */
.fch-config--listo .fch-config__foto,
.fch-config--sin-modelo:not(.fch-config--foto) .fch-config__foto {
	display: none;
}

/* 1.4.1 · «Ver foto de estudio» con el 3D: la foto real encima del lienzo (y vuelta al 3D con el mismo botón). */
.fch-config--ver-foto .fch-config__foto {
	display: grid !important;
	z-index: 1;
	background: inherit;
	padding: 0; /* 1.6.0: la foto llena el visor (fondo de estudio continuo; el tarro queda centrado) */
}

.fch-config--ver-foto .fch-config__foto img {
	object-fit: cover;
}

.fch-config--ver-foto .fch-config__pista {
	visibility: hidden;
}

.fch-config--con-3d:not(.fch-config--ver-foto) .fch-solo-foto,
.fch-galeria-forma [data-config-ver-foto] {
	display: none !important;
}

/* Sin 3D: el aviso, en letra pequeña debajo de la foto. */
.fch-config__estado.fch-config__estado--pie {
	position: static;
	transform: none;
	padding: 0;
	background: none;
	box-shadow: none;
	color: var(--fch-color-texto-suave);
	font-family: inherit;
	font-size: 1rem;
	text-align: start;
}

.fch-config--sin-modelo .fch-config__canvas {
	visibility: hidden;
}

.fch-config__estado {
	position: absolute;
	inset-inline: var(--fch-esp-4);
	bottom: var(--fch-esp-4);
	margin: 0;
	padding: var(--fch-esp-2) var(--fch-esp-4);
	border-radius: var(--fch-radio-pildora);
	background-color: var(--fch-color-superficie);
	box-shadow: var(--fch-sombra-1);
	color: var(--fch-color-texto);
	font-size: var(--fch-texto-sm);
	text-align: center;
}

.fch-config--sin-modelo:not(.fch-config--foto) .fch-config__estado {
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
	background-color: transparent;
	box-shadow: none;
	font-family: var(--fch-fuente-titulos);
	font-size: var(--fch-texto-lg);
}

.fch-config__ayuda {
	margin: 0;
	color: var(--fch-color-texto-suave);
	font-size: var(--fch-texto-sm);
	line-height: var(--fch-interlineado-compacto);
}

/* ---------------------------------------------------------------- Botones de opción */
.fch-config__vistas,
.fch-config__grupo-corto,
.fch-config__muestras {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fch-esp-2);
}

.fch-config__opciones {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
	gap: var(--fch-esp-2);
}

.fch-config__opcion,
.fch-config__muestra {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: var(--fch-esp-0-5);
	min-width: var(--fch-tactil-min);
	min-height: var(--fch-control-alto);
	margin: 0;
	padding: var(--fch-esp-2) var(--fch-esp-4);
	border: var(--fch-borde-fino) solid var(--fch-color-borde-control);
	border-radius: var(--fch-radio-sm);
	background-color: var(--fch-color-superficie);
	color: var(--fch-color-texto);
	font-family: var(--fch-fuente-texto);
	font-size: var(--fch-texto-base);
	line-height: var(--fch-interlineado-compacto);
	text-align: left;
	cursor: pointer;
	transition: border-color var(--fch-dur-rapida) var(--fch-curva-salida), box-shadow var(--fch-dur-rapida) var(--fch-curva-salida), background-color var(--fch-dur-rapida) var(--fch-curva-salida);
	-webkit-tap-highlight-color: transparent;
}

.fch-config__opcion[hidden],
.fch-config__muestra[hidden],
.fch-config__motivo[hidden] {
	display: none;
}

.fch-config__opcion--vista,
.fch-config__opcion--vela,
.fch-config__opcion--foto,
.fch-config__opcion--sm {
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--fch-esp-1) var(--fch-esp-2);
}

.fch-config__opcion--vela .fch-icono {
	color: var(--fch-oro-600);
}

.fch-config__opcion:hover,
.fch-config__muestra:hover {
	border-color: var(--fch-color-accion);
}

.fch-config__opcion[aria-pressed="true"],
.fch-config__muestra[aria-pressed="true"] {
	border-color: var(--fch-color-accion);
	box-shadow: inset 0 0 0 var(--fch-borde-fino) var(--fch-color-accion);
	background-color: var(--fch-color-superficie);
}

.fch-config__opcion--vista[aria-pressed="true"],
.fch-config__opcion--sm[aria-pressed="true"] {
	background-color: var(--fch-color-accion);
	color: var(--fch-color-sobre-accion);
}

.fch-config__opcion--vela[aria-pressed="true"] {
	border-color: var(--fch-oro-600);
	box-shadow: inset 0 0 0 var(--fch-borde-fino) var(--fch-oro-600);
	background-color: var(--fch-oro-100);
}

.fch-config__opcion:focus-visible,
.fch-config__muestra:focus-visible {
	outline: var(--fch-foco-ancho) solid var(--fch-color-foco);
	outline-offset: var(--fch-foco-separacion);
}

.fch-config__opcion[aria-disabled="true"],
.fch-config__muestra[aria-disabled="true"] {
	border-style: dashed;
	border-color: var(--fch-color-borde-control);
	box-shadow: none;
	background-color: var(--fch-color-superficie-alt);
	color: var(--fch-color-texto-suave);
	cursor: not-allowed;
}

.fch-config__nombre {
	font-weight: var(--fch-peso-medio);
}

.fch-config__detalle,
.fch-config__motivo {
	color: var(--fch-color-texto-suave);
	font-size: var(--fch-texto-sm);
}

.fch-config__opcion[aria-pressed="true"] .fch-config__detalle {
	color: var(--fch-color-texto);
}

.fch-config__opcion--vista[aria-pressed="true"] .fch-config__motivo,
.fch-config__opcion--sm[aria-pressed="true"] .fch-config__motivo {
	color: inherit;
}

.fch-config__motivo {
	flex-basis: 100%;
	font-style: italic;
}

.fch-config__sello {
	margin-top: var(--fch-esp-0-5);
	padding: 0 var(--fch-esp-2);
	border-radius: var(--fch-radio-pildora);
	background-color: var(--fch-oro-100);
	color: var(--fch-oro-700);
	font-size: var(--fch-texto-xs);
	font-weight: var(--fch-peso-medio);
	white-space: nowrap;
}

.fch-config__muestra {
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--fch-esp-1) var(--fch-esp-2);
	padding-inline: var(--fch-esp-3) var(--fch-esp-4);
}

.fch-config__punto {
	flex: none;
	width: var(--fch-icono);
	height: var(--fch-icono);
	border: var(--fch-borde-fino) solid var(--fch-pabilo-a28);
	border-radius: var(--fch-radio-pildora);
	background-color: var(--muestra);
}

/* ---------------------------------------------------------------- Grupos y resumen */
.fch-config__grupo {
	display: grid;
	gap: var(--fch-esp-2);
}

.fch-config__etiqueta {
	margin: 0;
	color: var(--fch-color-texto);
	font-family: var(--fch-fuente-texto);
	font-size: var(--fch-texto-sm);
	font-weight: var(--fch-peso-medio);
	letter-spacing: var(--fch-tracking-versal);
	text-transform: uppercase;
}

.fch-config__resumen {
	display: grid;
	gap: var(--fch-esp-2);
	padding: var(--fch-tarjeta-relleno);
	border: var(--fch-borde-fino) solid var(--fch-color-borde);
	border-radius: var(--fch-tarjeta-radio);
	background-color: var(--fch-color-superficie);
	box-shadow: var(--fch-sombra-1);
}

.fch-config__resumen p {
	margin: 0;
}

.fch-config__resumen-titulo {
	font-family: var(--fch-fuente-titulos);
	font-size: var(--fch-texto-xl);
	line-height: var(--fch-interlineado-titulo);
}

.fch-config__resumen-medidas,
.fch-config__aviso {
	color: var(--fch-color-texto-suave);
	font-size: var(--fch-texto-sm);
}

.fch-config__cambio {
	margin: 0;
	color: var(--fch-color-atencion);
	font-size: var(--fch-texto-sm);
}

.fch-config__cambio[hidden] {
	display: none;
}

.fch-config__estudio,
.fch-config__aviso-vela {
	display: flex;
	align-items: flex-start;
	gap: var(--fch-esp-2);
	margin: 0;
	padding: var(--fch-esp-2) var(--fch-esp-3);
	border-radius: var(--fch-radio-sm);
	background-color: var(--fch-color-atencion-fondo);
	color: var(--fch-color-atencion);
	font-size: var(--fch-texto-sm);
}

.fch-config__estudio[hidden],
.fch-config__aviso-vela[hidden] {
	display: none;
}

.fch-config__estudio .fch-icono,
.fch-config__aviso-vela .fch-icono {
	flex: none;
	margin-top: 0.15em;
}

.fch-config__precio {
	font-size: var(--fch-texto-lg);
}

/* ---------------------------------------------------------------- Montaje y desmontaje (con la rayita) */
.fch-config__animacion {
	display: grid;
	gap: var(--fch-esp-3);
	padding: var(--fch-esp-4);
	border: var(--fch-borde-fino) solid var(--fch-color-borde);
	border-radius: var(--fch-radio-md);
	background-color: var(--fch-color-superficie);
}

.fch-config__animacion[hidden] {
	display: none;
}

.fch-config__fila {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--fch-esp-3);
}

.fch-config__mandos {
	display: flex;
	align-items: center;
	gap: var(--fch-esp-2);
}

.fch-config__play {
	flex: 1;
}

.fch-config__i-pausa,
.fch-config__play.es-pausa .fch-config__i-seguir {
	display: none;
}

.fch-config__play.es-pausa .fch-config__i-pausa {
	display: inline-block;
}

/* La rayita temporizador (norma de Sergio): fina, se rellena con el avance. */
.fch-rayita {
	position: relative;
	overflow: hidden;
	height: 3px;
	border-radius: var(--fch-radio-pildora);
	background-color: var(--fch-cera-200);
}

.fch-rayita__relleno {
	position: absolute;
	inset: 0;
	background-color: var(--fch-oro-500);
	transform: scaleX(var(--progreso, 0));
	transform-origin: left center;
}

.fch-config__paso {
	min-height: calc(var(--fch-texto-base) * var(--fch-interlineado-compacto) * 2);
	margin: 0;
	font-weight: var(--fch-peso-medio);
	line-height: var(--fch-interlineado-compacto);
}

.fch-config__nota {
	margin: 0;
	color: var(--fch-color-texto-suave);
	font-size: var(--fch-texto-sm);
}

/* ---------------------------------------------------------------- Pantallas anchas */
@media (min-width: 48em) {
	.fch-config__lienzo {
		aspect-ratio: 4 / 3;
	}
}

@media (min-width: 64em) {
	.fch-config__rejilla {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		align-items: start;
	}

	/* El visor empieza arriba, a la altura de «Tipo de envase», sea cual sea el alto del panel. */
	.fch-config__escena,
	.fch-config__panel {
		align-self: start;
	}

	.fch-config__lienzo {
		aspect-ratio: auto;
		height: min(68vh, 40rem);
		min-height: 26rem;
	}
}

/* Al bajar por el panel, el visor se queda a la vista (top fijo bajo la cabecera); solo si cabe entero en la
 * pantalla, para no dejar sus botones fuera. */
@media (min-width: 64em) and (min-height: 60em) {
	.fch-config__escena {
		position: sticky;
		top: calc(var(--fch-alto-cabecera) + 3rem + var(--fch-esp-4)); /* cabecera + menú de 48 px */
	}
}

@media (prefers-reduced-motion: reduce) {
	.fch-config__opcion,
	.fch-config__muestra {
		transition: none;
	}
}

/* ---------------------------------------------------------------- 1.2.0 · Grabado, acciones y diálogos */
.fch-config__grabado .fch-config__etiqueta label {
	cursor: pointer;
}

.fch-config__grabado .fch-control {
	max-width: 22rem;
	font-size: var(--fch-texto-lg);
	letter-spacing: 0.04em;
}

.fch-config__letra--brygada span {
	font-family: var(--fch-fuente-titulos);
}

.fch-config__letra--jost span {
	font-family: var(--fch-fuente-texto);
}

.fch-config__nota-grabado {
	margin: 0;
	color: var(--fch-color-texto-suave);
	font-size: var(--fch-texto-sm);
	line-height: var(--fch-interlineado-compacto);
}

.fch-config__acciones {
	display: grid;
	gap: var(--fch-esp-2);
	margin-top: var(--fch-esp-2);
}

.fch-config__acciones .fch-btn {
	justify-content: flex-start;
	text-align: left;
}

.fch-config__mensaje {
	margin: 0;
	color: var(--fch-color-texto);
	font-size: var(--fch-texto-sm);
}

.fch-config__dialogo {
	width: min(100% - 2rem, 34rem);
	max-height: calc(100dvh - 2rem);
	padding: 0;
	border: var(--fch-borde-fino) solid var(--fch-color-borde);
	border-radius: var(--fch-tarjeta-radio);
	background-color: var(--fch-color-superficie);
	box-shadow: var(--fch-sombra-3);
	color: var(--fch-color-texto);
}

.fch-config__dialogo::backdrop {
	background-color: var(--fch-color-velo);
}

.fch-config__dialogo-caja {
	display: grid;
	gap: var(--fch-esp-3);
	padding: var(--fch-esp-5);
	justify-items: start;
}

.fch-config__dialogo-titulo {
	margin: 0;
	font-size: var(--fch-texto-2xl);
	font-weight: var(--fch-peso-normal);
}

.fch-config__dialogo-caja p {
	margin: 0;
}

.fch-config__qr {
	width: min(100%, 16rem);
	justify-self: center;
	border-radius: var(--fch-radio-md);
	overflow: hidden;
}

.fch-config__qr svg {
	display: block;
	width: 100%;
	height: auto;
}

.fch-config__tarjeta {
	width: min(100%, 15rem);
	height: auto;
	justify-self: center;
	border: var(--fch-borde-fino) solid var(--fch-color-borde);
	border-radius: var(--fch-radio-md);
}

.fch-config__dialogo .fch-control {
	width: 100%;
	font-size: var(--fch-texto-sm);
}

.fch-config__dialogo-botones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fch-esp-2);
}

.fch-config__cerrar {
	justify-self: end;
}

/* Capa de «Míralo en tu casa» (WebXR con dom-overlay). */
.fch-ar-capa {
	position: fixed;
	inset: auto 0 0;
	display: grid;
	gap: var(--fch-esp-3);
	justify-items: center;
	padding: var(--fch-esp-4) var(--fch-esp-4) calc(var(--fch-esp-6) + env(safe-area-inset-bottom));
	color: #fff;
	text-align: center;
}

.fch-ar-capa__texto {
	margin: 0;
	padding: var(--fch-esp-2) var(--fch-esp-3);
	border-radius: var(--fch-radio-md);
	background-color: rgb(29 26 23 / 0.72);
	font-size: var(--fch-texto-base);
}

/* Ficha «Mi Flame Care» para imprimir: en pantalla no se ve; al imprimir, solo ella. */
.fch-hoja {
	display: none;
}

@media print {
	html.fch-imprimiendo body > :not(#fch-mi-flame-care) {
		display: none !important;
	}

	html.fch-imprimiendo .fch-hoja {
		display: block;
		color: #1d1a17;
		font-family: var(--fch-fuente-texto);
		text-align: center;
	}

	.fch-hoja h1 {
		margin: 0 0 0.5rem;
		font-family: var(--fch-fuente-titulos);
		font-size: 28pt;
		font-weight: 400;
	}

	.fch-hoja__marca {
		margin: 0 0 0.25rem;
		color: #5f574f;
		font-size: 10pt;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}

	.fch-hoja img {
		width: 11cm;
		height: auto;
	}

	.fch-hoja dl {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 0.2rem 1rem;
		max-width: 15cm;
		margin: 0.5rem auto;
		text-align: left;
		font-size: 11pt;
	}

	.fch-hoja dt {
		font-weight: 600;
	}

	.fch-hoja dd {
		margin: 0;
	}

	.fch-hoja__pie {
		margin-top: 1rem;
		color: #5f574f;
		font-size: 9pt;
		word-break: break-all;
	}
}

/* 1.4.1 · Modo foto (sin WebGL): el visor se ajusta a la foto de estudio (cuadrada) y la foto lo llena. */
.fch-config:not(.fch-config--con-3d) .fch-config__lienzo {
	height: auto !important;
	aspect-ratio: 1 / 1;
}

.fch-config:not(.fch-config--con-3d) .fch-config__foto {
	padding: 0;
}

/* 1.6.0 · Foto real primero: mientras se ve la foto, «Ver en 3D» es el botón principal del visor. */
.fch-config--ver-foto .fch-config__opcion--ver3d[aria-pressed="true"] {
	border-color: var(--fch-pabilo-900);
	background-color: var(--fch-pabilo-900);
	color: var(--fch-cera-50);
}


/* 1.6.0 · Con la foto a la vista no hay vista 3D elegida ni ayuda para girar: solo «Ver en 3D» resalta. */
.fch-config--ver-foto .fch-config__ayuda {
	display: none;
}

.fch-config--ver-foto .fch-config__opcion--vista[aria-pressed="true"] {
	border-color: var(--fch-color-borde-control);
	box-shadow: none;
	background-color: var(--fch-color-superficie);
	color: var(--fch-color-texto);
}