/**
 * TigerNicks Configurator — diseño final (FASE 4) con la piel del rediseño (1.18.0).
 *
 * Estructura tipo "preview grande + panel de opciones" con barra de precio/CTA
 * fija, franja de vistas y secciones de swatches agrupados. Identidad TigerNicks:
 * negro / gris muy oscuro + naranja, detalles geométricos finos (esquinas chaflán,
 * resplandor naranja en el elemento activo), micro-interacciones.
 *
 * El componente va totalmente aislado del tema del sitio: define su propia paleta
 * y no hereda colores. Todo se declara de forma explícita.
 *
 * 1.18.0 — Colores, tipografías y radios salen de los TOKENS del sistema de diseño
 * del rediseño (docs/design-system.md · theme tn-rd.css). Están todos en el bloque
 * de variables de ".tn-cfg" (más abajo): para cualquier ajuste futuro de color,
 * tipografía o radio basta con tocar ese bloque.
 */

.tn-cfg,
.tn-cfg * {
	box-sizing: border-box;
}

/* --- Aislamiento del tema del sitio ----------------------------------------
 * WooCommerce y muchos temas aplican estilos GLOBALES a <button>, <a> y campos
 * de formulario. Aqui se NEUTRALIZAN dentro del configurador; cada componente
 * del plugin usa selectores ".tn-cfg .tn-..." (mas especificos) y les vuelve a
 * dar su aspecto.
 * -------------------------------------------------------------------------- */
.tn-cfg button,
.tn-cfg a,
.tn-cfg input:not([type="checkbox"]):not([type="radio"]),
.tn-cfg select,
.tn-cfg textarea {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	outline: none;
	color: inherit;
	font: inherit;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	text-shadow: none;
	text-align: inherit;
	min-width: 0;
	min-height: 0;
	width: auto;
	max-width: none;
	height: auto;
	float: none;
	transform: none;
	transition: none;
	animation: none;
	filter: none;
	-webkit-appearance: none;
	appearance: none;
}
.tn-cfg button { cursor: pointer; }
.tn-cfg input[type="checkbox"],
.tn-cfg input[type="radio"] {
	margin: 0;
	box-shadow: none;
	filter: none;
	transform: none;
}

/* El atributo [hidden] debe ganar siempre (algunos temas lo pisan). */
.tn-cfg [hidden] {
	display: none !important;
}

.tn-cfg {
	/* ===== TOKENS DEL SISTEMA DE DISEÑO (rediseño) =====================
	   Fuente de verdad: docs/design-system.md / theme assets/css/tn-rd.css.
	   Cambia aquí y se aplica a todo el configurador. */
	--tn-sys-bg: #08080A;          /* bg: fondo de página */
	--tn-sys-pn: #111114;          /* pn: tarjetas y paneles */
	--tn-sys-pn-deep: #0B0B0D;     /* pn-deep: campos de formulario */
	--tn-sys-ln: rgba(255, 255, 255, 0.1); /* ln: único borde del sistema */
	--tn-sys-tx: #F4F1EC;          /* tx: texto principal / "papel" */
	--tn-sys-tx-2: #CFCAC2;        /* tx-2: párrafos */
	--tn-sys-mu: #A6A19A;          /* mu: texto secundario (nunca sobre naranja) */
	--tn-sys-or: #FF6A00;          /* or: acción */
	--tn-sys-or-hover: #FF8A2B;    /* or-hover */
	--tn-sys-ort: #FF8F45;         /* ort: naranja para texto pequeño */
	--tn-sys-ink: #0B0B0C;         /* ink: texto sobre naranja / papel */
	--tn-sys-ok: #6FD08C;          /* ok: éxito */

	/* ===== Alias que usa el CSS del plugin ============================= */
	--tn-bg: var(--tn-sys-pn-deep);
	--tn-panel: var(--tn-sys-pn);
	--tn-elev: #17171B;            /* superficie elevada (pn + 4% blanco) */
	--tn-elev-2: #1D1D22;          /* superficie elevada 2 (pn + 7% blanco) */
	--tn-line: var(--tn-sys-ln);
	--tn-line-strong: rgba(255, 255, 255, 0.18);
	--tn-orange: var(--tn-sys-or);
	--tn-orange-2: var(--tn-sys-or-hover);
	--tn-orange-text: var(--tn-sys-ort);
	--tn-ink: var(--tn-sys-ink);
	--tn-paper: var(--tn-sys-tx);
	--tn-glow: rgba(255, 106, 0, 0.32);
	--tn-text: var(--tn-sys-tx);
	--tn-text-2: var(--tn-sys-tx-2);
	--tn-dim: var(--tn-sys-mu);
	--tn-good: var(--tn-sys-ok);
	--tn-bad: #FF6B6B;             /* error (no hay token): 6,4:1 sobre pn */
	--tn-focus: var(--tn-sys-ort); /* anillo de foco sobre fondo oscuro */

	/* Radios del sistema: 12 / 18 / 22. */
	--tn-r-sm: 12px;
	--tn-r-md: 18px;
	--tn-r-lg: 22px;
	--tn-radius: var(--tn-r-lg);

	/* Escenario: oscuro con el foco naranja del sistema (.spot / .mcard). */
	--tn-stage: radial-gradient(circle at 50% 46%, rgba(255, 106, 0, 0.13) 0%, rgba(255, 106, 0, 0) 58%), #0B0B0D;

	/* Tipografías del sistema. */
	--tn-font-display: "Anybody", "DM Sans", system-ui, sans-serif; /* titulares 800, 80%, mayúsculas */
	--tn-font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--tn-font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* etiquetas */
	--tn-font-perso: "DM Sans", sans-serif; /* texto del cliente sin fuente elegida */

	/* Botón primario: esquina inferior derecha recortada (14 px). */
	--tn-btn-cut: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);

	display: grid;
	grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
	gap: 22px;
	position: relative;
	padding: 20px;
	background: var(--tn-bg);
	border: 1px solid var(--tn-line);
	border-radius: var(--tn-radius);
	color: var(--tn-text);
	font-family: var(--tn-font-body);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

/* Etiquetas del sistema: DM Mono 12.5px, tracking .14em, mayúsculas. */
.tn-cfg .tn-price__label,
.tn-cfg .tn-group__title,
.tn-cfg .tn-stage__pane-tag,
.tn-cfg .tn-comp-nav__name,
.tn-cfg .tn-gate__step,
.tn-cfg .tn-info-card h4,
.tn-cfg .tn-info-card__total span,
.tn-cfg .tn-perso-group__title,
.tn-cfg .tn-perso-editor__title,
.tn-cfg .tn-perso-list__title,
.tn-cfg .tn-perso-list__view,
.tn-cfg .tn-comp-tabs__locked,
.tn-cfg .tn-swatch__badge {
	font-family: var(--tn-font-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tn-bad);
}

/* Titulares del sistema: Anybody 800, ancho 80%, mayúsculas. */
.tn-cfg .tn-gate__title,
.tn-cfg .tn-price__amount,
.tn-cfg .tn-info-card__total b {
	font-family: var(--tn-font-display);
	font-weight: 800;
	font-stretch: 80%;
	text-transform: uppercase;
	line-height: 1;
}

/* Chaflán / esquinas técnicas */
.tn-cfg::before,
.tn-cfg::after {
	content: "";
	position: absolute;
	width: 24px;
	height: 24px;
	pointer-events: none;
}
.tn-cfg::before {
	top: -1px;
	left: -1px;
	border-top: 2px solid var(--tn-orange);
	border-left: 2px solid var(--tn-orange);
	border-top-left-radius: var(--tn-radius);
}
.tn-cfg::after {
	bottom: -1px;
	right: -1px;
	border-bottom: 2px solid var(--tn-orange);
	border-right: 2px solid var(--tn-orange);
	border-bottom-right-radius: var(--tn-radius);
}

.tn-cfg :focus-visible {
	outline: 2px solid var(--tn-focus);
	outline-offset: 2px;
	border-radius: 4px;
}
/* Swatch: el anillo de foco rodea el círculo (no la caja del botón). */
.tn-cfg .tn-swatch:focus-visible { outline: none; }
.tn-cfg .tn-swatch:focus-visible .tn-swatch__thumb {
	outline: 2px solid var(--tn-focus);
	outline-offset: 3px;
}

/* ============ PREVIEW ============ */

.tn-cfg .tn-cfg__stagewrap {
	min-width: 0;
}

.tn-cfg .tn-stage {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--tn-radius);
	background: var(--tn-stage);
	border: 1px solid var(--tn-line);
	overflow: hidden;
}

/* rejilla geométrica muy sutil */
.tn-cfg .tn-stage__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(var(--tn-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--tn-line) 1px, transparent 1px);
	background-size: 44px 44px;
	opacity: 0.12;
	mask-image: radial-gradient(circle at 50% 45%, #000 30%, transparent 75%);
}

/* ---- Paneles del escenario: uno por vista ----
   El de la vista activa se muestra grande (.is-main); el de la vista siguiente,
   pequeño en una esquina (.is-mini). El resto quedan ocultos. El cambio de
   tamaño se anima → una "crece" mientras la otra "encoge". */
.tn-cfg .tn-stage__pane {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: none;
	transition:
		top 420ms cubic-bezier(0.4, 0, 0.2, 1),
		left 420ms cubic-bezier(0.4, 0, 0.2, 1),
		width 420ms cubic-bezier(0.4, 0, 0.2, 1),
		height 420ms cubic-bezier(0.4, 0, 0.2, 1),
		opacity 260ms ease;
}
.tn-cfg .tn-stage__pane.is-main {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 1;
	z-index: 1;
}
/* La otra cara: solo la imagen del mando en pequeño, sin caja ni fondo.
   Se puede pulsar para traerla al frente. */
.tn-cfg .tn-stage__pane.is-mini {
	top: 3%;
	left: 3%;
	width: 24%;
	height: 30%;
	opacity: 0.75;
	z-index: 3;
	pointer-events: auto;
	cursor: pointer;
	transition:
		top 420ms cubic-bezier(0.4, 0, 0.2, 1),
		left 420ms cubic-bezier(0.4, 0, 0.2, 1),
		width 420ms cubic-bezier(0.4, 0, 0.2, 1),
		height 420ms cubic-bezier(0.4, 0, 0.2, 1),
		opacity 200ms ease;
}
.tn-cfg .tn-stage__pane.is-mini:hover,
.tn-cfg .tn-stage__pane.is-mini:focus-visible {
	opacity: 1;
	outline: none;
}

/* Etiqueta con el nombre de la vista. Solo en la miniatura, muy discreta. */
.tn-cfg .tn-stage__pane-tag {
	position: absolute;
	left: 8px;
	top: 6px;
	z-index: 4;
	font-family: var(--tn-font-mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tn-text-2);
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
	pointer-events: none;
}
.tn-cfg .tn-stage__pane.is-main .tn-stage__pane-tag { display: none; }
.tn-cfg .tn-stage__pane.is-mini .tn-stage__pane-tag { left: 4px; top: 3px; font-size: 10px; }

/* Diseño completo del cliente: su imagen sustituye el mando en esa vista. */
.tn-cfg .tn-stage__pane.has-fulldesign .tn-stage__layers,
.tn-cfg .tn-stage__pane.has-fulldesign .tn-perso-canvas { display: none; }
.tn-cfg .tn-stage__pane.has-fulldesign .tn-stage__base {
	top: 2%;
	left: 2%;
	width: 96%;
	height: 96%;
	/* object-fit: contain (heredado) mantiene la proporción de la imagen subida. */
}

/* Imagen base de la vista (la foto del mando). Dentro del panel, debajo de las
   capas de componentes; si no hay miniatura, queda oculta. */
.tn-cfg .tn-stage__base {
	position: absolute;
	top: 6%;
	left: 6%;
	width: 88%;
	height: 88%;
	object-fit: contain;
	pointer-events: none;
	filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.45));
}
.tn-cfg .tn-stage__base[hidden] { display: none; }
.tn-cfg .tn-stage__pane.is-mini .tn-stage__base { top: 4%; left: 4%; width: 92%; height: 92%; }

.tn-cfg .tn-stage__layers {
	position: absolute;
	inset: 6%;
	/* Contexto de apilamiento propio: los z-index de las piezas (10…130+) se
	   ordenan ENTRE ELLAS y no pasan por encima del diseño del cliente (6), su
	   marco (8) ni del lienzo de textos/stickers (40). Antes un texto quedaba
	   oculto bajo cualquier pieza con z-index > 40 (p. ej. el touchpad). */
	z-index: 2;
}
.tn-cfg .tn-stage__pane.is-mini .tn-stage__layers { inset: 4%; }

.tn-cfg .tn-layer {
	position: absolute;
	inset: 0;
}

/* #6/#7: diseño del cliente. .tn-fd-clip queda FIJO al recuadro del mando y
   recorta a las zonas; .tn-fd-obj se mueve/gira/escala dentro. */
.tn-cfg .tn-fd-clip {
	position: absolute;
	left: 0; top: 0;
	width: 100%;
	height: 100%;
	z-index: 6;
	overflow: hidden;
}
.tn-cfg .tn-fd-clip[hidden] { display: none; }
.tn-cfg .tn-stage__pane.is-mini .tn-fd-clip { display: none; }

.tn-cfg .tn-fd-obj {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 60%;
	transform: translate(-50%, -50%);
	transform-origin: center center;
	pointer-events: none;
}
.tn-cfg .tn-fd-obj .tn-fd-overlay {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: fill;
	pointer-events: none;
}

/* 1.18.6: impresión realista (canvas): diseño + textos + stickers recortados a
   las zonas, con el sombreado de la carcasa y las piezas de encima delante.
   Mientras se ve, el DOM de esos elementos queda transparente (sigue ahí para
   arrastrar y para las asas). Por encima del diseño (6), bajo sus asas (8). */
.tn-cfg .tn-print-render {
	position: absolute;
	left: 0; top: 0;
	width: 100%;
	height: 100%;
	z-index: 7;
	pointer-events: none;
}
.tn-cfg .tn-stage__pane.is-mini .tn-print-render { display: none; }
.tn-cfg .tn-stage__pane.is-print-render .tn-perso-obj__text,
.tn-cfg .tn-stage__pane.is-print-render .tn-perso-obj__img,
.tn-cfg .tn-stage__pane.is-print-render .tn-fd-overlay { opacity: 0; }

/* Marco + asas del diseño del cliente: FUERA del recorte (para verlos) y
   perfectamente alineado con la imagen. */
.tn-cfg .tn-fd-frame {
	position: absolute;
	left: 0; top: 0;
	width: 100%;
	height: 100%;
	z-index: 8;
	pointer-events: none;
}
.tn-cfg .tn-fd-frame[hidden] { display: none; }
.tn-cfg .tn-stage__pane.is-mini .tn-fd-frame { display: none; }
.tn-cfg .tn-fd-handles {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 60%;
	transform: translate(-50%, -50%);
	transform-origin: center center;
}
.tn-cfg .tn-fd-handles.is-editable {
	pointer-events: auto;
	cursor: move;
}
.tn-cfg .tn-fd-handles.is-editable::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 1.5px dashed rgba(255, 255, 255, 0.8);
	pointer-events: none;
}
.tn-cfg .tn-fd-handles.is-editable.is-selected::before { border-color: var(--tn-orange); border-style: solid; }
.tn-cfg .tn-fd-handles .tn-perso-handle { pointer-events: auto; }

/* ---- FASE 7: lienzo de personalización (texto + stickers) ---- */
/* Los textos/stickers solo se pintan en la cara grande (nunca en la miniatura),
   así conservan tamaño y posición al girar el mando. */
.tn-cfg .tn-stage__pane.is-mini .tn-perso-canvas { display: none; }
.tn-cfg .tn-perso-canvas {
	position: absolute;
	inset: 0;
	z-index: 40;
	pointer-events: none;
	overflow: hidden;
}
/* El lienzo NO captura eventos en su fondo (así el diseño del cliente que hay
   debajo se puede arrastrar); solo sus objetos. */
.tn-cfg .tn-perso-canvas.is-editable { pointer-events: none; }
.tn-cfg .tn-perso-canvas.is-editable .tn-perso-obj { pointer-events: auto; }

.tn-cfg .tn-perso-obj {
	position: absolute;
	transform-origin: center;
	will-change: transform;
	user-select: none;
	line-height: 1;
}
.tn-cfg .tn-perso-canvas.is-editable .tn-perso-obj { cursor: grab; }
.tn-cfg .tn-perso-canvas.is-editable .tn-perso-obj:active { cursor: grabbing; }

/* #6: guía de la zona imprimible. */
.tn-cfg .tn-perso-area {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
}
.tn-cfg .tn-perso-area polygon {
	/* 1.18.6: guía discreta (la impresión ya se ve recortada y sombreada). */
	fill: rgba(255, 106, 0, 0.04);
	stroke: var(--tn-orange);
	stroke-width: 1.5;
	stroke-dasharray: 6 4;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	animation: tn-area-pulse 1.8s ease-in-out infinite;
}
/* Hueco (zona de exclusión): nada se puede colocar aquí. */
.tn-cfg .tn-perso-area polygon.tn-perso-area__hole {
	fill: rgba(10, 12, 18, 0.16);
	stroke: #ff5470;
	animation: tn-area-hole-pulse 1.8s ease-in-out infinite;
}
/* Titileo para que se entienda dónde se pueden colocar los elementos. */
@keyframes tn-area-pulse {
	0%, 100% { fill: rgba(255, 106, 0, 0.02); stroke-opacity: 0.45; }
	50%      { fill: rgba(255, 106, 0, 0.09); stroke-opacity: 0.9; }
}
@keyframes tn-area-hole-pulse {
	0%, 100% { stroke-opacity: 0.5; }
	50%      { stroke-opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.tn-cfg .tn-perso-area polygon { animation: none; fill: rgba(255, 106, 0, 0.05); }
	.tn-cfg .tn-perso-area polygon.tn-perso-area__hole { animation: none; fill: rgba(10, 12, 18, 0.16); }
}

/* FASE 7: mando de colocación para móvil (mover / girar / tamaño con los dedos). */
.tn-cfg .tn-perso-pad { display: none; }
.tn-cfg .tn-perso-pad[hidden] { display: none !important; }
@media (max-width: 1023px) and (orientation: portrait) {
	.tn-cfg .tn-perso-pad {
		display: flex;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: calc(76px + var(--tn-sticky-bottom, 0px) + env(safe-area-inset-bottom, 0px));
		z-index: 30;
		align-items: center;
		gap: 8px;
		padding: 8px;
		border-radius: 14px;
		background: rgba(17, 17, 20, 0.94);
		border: 1px solid var(--tn-line);
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
		backdrop-filter: blur(4px);
		max-width: calc(100vw - 16px);
	}
	.tn-cfg .tn-perso-pad button {
		-webkit-appearance: none;
		appearance: none;
		border: 1px solid var(--tn-line);
		background: var(--tn-elev-2);
		color: var(--tn-text);
		border-radius: 10px;
		font-size: 15px;
		line-height: 1;
		width: 36px;
		height: 36px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		touch-action: none;
		user-select: none;
		padding: 0;
	}
	.tn-cfg .tn-perso-pad button:active { background: var(--tn-orange); border-color: var(--tn-orange); color: var(--tn-ink); }
	.tn-cfg .tn-perso-pad__move {
		display: grid;
		grid-template-columns: repeat(3, 34px);
		grid-template-rows: repeat(3, 34px);
		gap: 3px;
	}
	.tn-cfg .tn-perso-pad__move button { width: 34px; height: 34px; font-size: 13px; }
	.tn-cfg .tn-perso-pad__move [data-pad="up"]     { grid-area: 1 / 2; }
	.tn-cfg .tn-perso-pad__move [data-pad="left"]   { grid-area: 2 / 1; }
	.tn-cfg .tn-perso-pad__move [data-pad="center"] { grid-area: 2 / 2; }
	.tn-cfg .tn-perso-pad__move [data-pad="right"]  { grid-area: 2 / 3; }
	.tn-cfg .tn-perso-pad__move [data-pad="down"]   { grid-area: 3 / 2; }
	.tn-cfg .tn-perso-pad__grp { display: flex; flex-direction: column; gap: 3px; }
	.tn-cfg .tn-perso-pad__del { background: rgba(255, 107, 107, 0.14) !important; border-color: rgba(255, 107, 107, 0.45) !important; }
}
/* En horizontal el mando se oculta: se arrastra directamente con el dedo. */

.tn-cfg .tn-perso-obj__text {
	display: inline-block;
	white-space: nowrap;
	font-family: var(--tn-font-perso);
	font-weight: 700;
	font-size: var(--tn-perso-fs, 24px);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.tn-cfg .tn-perso-obj__img {
	display: block;
	width: var(--tn-perso-sw, 90px);
	height: auto;
}

.tn-cfg .tn-perso-obj.is-selected::before {
	content: "";
	position: absolute;
	inset: -8px;
	border: 1px dashed var(--tn-orange);
	border-radius: 4px;
	pointer-events: none;
}

.tn-cfg .tn-perso-handle {
	position: absolute;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--tn-orange);
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.tn-cfg .tn-perso-obj:not(.is-selected) .tn-perso-handle { display: none; }
.tn-cfg .tn-perso-handle--rot {
	left: 50%;
	top: -34px;
	transform: translateX(-50%);
}
.tn-cfg .tn-perso-handle--rot::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	width: 2px;
	height: 12px;
	background: #fff;
	transform: translateX(-50%);
}
.tn-cfg .tn-perso-handle--scale {
	right: -18px;
	bottom: -18px;
	background: #fff;
	border-color: var(--tn-orange);
}

.tn-cfg .tn-layer__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 1;
	transition: opacity 190ms ease;
	filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.45));
}
.tn-cfg .tn-layer__img.is-entering,
.tn-cfg .tn-layer__img.is-leaving {
	opacity: 0;
}

/* Las flechas laterales de vista se han retirado: solo queda el botón de girar. */
.tn-cfg .tn-stage__nav { display: none !important; }

/* Botón de girar el mando: círculo, solo icono, centrado abajo. */
.tn-cfg .tn-stage__reset {
	position: absolute;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	z-index: 42;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	padding: 0;
	color: var(--tn-text);
	background: rgba(8, 8, 10, 0.82);
	border: 1px solid var(--tn-orange);
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
	transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.tn-cfg .tn-stage__reset svg { width: 24px; height: 24px; transition: transform 300ms ease; }
.tn-cfg .tn-stage__reset:hover {
	background: var(--tn-orange);
	color: var(--tn-ink);
	box-shadow: 0 0 0 4px var(--tn-glow), 0 6px 22px rgba(0, 0, 0, 0.45);
}
.tn-cfg .tn-stage__reset:hover svg { transform: rotate(-180deg); }

/* En "Personalizar" el mando solo gira si hay más de una cara personalizable
   (1.18.6: textos y stickers también detrás); si no, se ocultan el botón de
   girar y la miniatura de la otra cara. */
.tn-cfg .tn-stage.is-perso-locked .tn-stage__reset { display: none; }
.tn-cfg .tn-stage.is-perso-locked .tn-stage__pane.is-mini { display: none; }

/* ============ PANEL ============ */

.tn-cfg .tn-cfg__panel {
	min-width: 0;
	display: flex;
	flex-direction: column;
	background: var(--tn-panel);
	border: 1px solid var(--tn-line);
	border-radius: var(--tn-r-md);
	overflow: hidden;
	max-height: 640px;
}

/* barra fija de precio + CTA */
.tn-cfg .tn-bar {
	position: sticky;
	top: 0;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	background: var(--tn-panel);
	border-bottom: 1px solid var(--tn-line);
}

.tn-cfg .tn-price {
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	line-height: 1.15;
	white-space: nowrap;
}
.tn-cfg .tn-price__label {
	font-family: var(--tn-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tn-dim);
}
.tn-cfg .tn-price__amount {
	font-family: var(--tn-font-display);
	font-weight: 800;
	font-stretch: 80%;
	font-size: 26px;
	line-height: 1;
	color: var(--tn-orange);
	font-variant-numeric: tabular-nums;
	transition: transform 150ms ease;
}
.tn-cfg .tn-price__amount.is-bumped { transform: scale(1.06); }
.tn-cfg .tn-price__hint {
	font-size: 12px;
	color: var(--tn-dim);
	font-variant-numeric: tabular-nums;
	margin-top: 2px;
}
.tn-cfg .tn-price__hint[hidden] { display: none; }

.tn-cfg .tn-bar__actions {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.tn-cfg .tn-bar__summary {
	width: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	color: var(--tn-text-2);
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid var(--tn-line);
	border-radius: var(--tn-r-sm);
	cursor: pointer;
	transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.tn-cfg .tn-bar__summary svg { width: 18px; height: 18px; }
.tn-cfg .tn-bar__summary:hover,
.tn-cfg .tn-bar__summary.is-open {
	color: var(--tn-orange);
	border-color: var(--tn-orange);
}

.tn-cfg .tn-addtocart {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 24px 0 20px;
	border: 0;
	border-radius: 0;
	/* Botón primario del sistema: naranja, texto ink, esquina recortada. */
	clip-path: var(--tn-btn-cut);
	background: var(--tn-orange);
	color: var(--tn-ink);
	font-family: var(--tn-font-body);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Brillo que cruza el botón al pasar el ratón (como .btn del sistema). */
.tn-cfg .tn-addtocart::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.5) 50%, transparent 60%);
	transform: translateX(-120%);
	transition: transform 0.7s;
	pointer-events: none;
}
.tn-cfg .tn-addtocart:hover {
	background: var(--tn-orange-2);
	transform: translateY(-2px);
}
.tn-cfg .tn-addtocart:hover::after { transform: translateX(120%); }
/* El clip-path recorta el outline: foco = anillo interior visible. */
.tn-cfg .tn-addtocart:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 3px var(--tn-ink), inset 0 0 0 5px var(--tn-paper);
}
.tn-cfg .tn-addtocart__icon { flex: 0 0 auto; width: 17px; height: 17px; }
.tn-cfg .tn-addtocart__text { overflow: hidden; text-overflow: ellipsis; }
.tn-cfg .tn-addtocart.is-loading { pointer-events: none; opacity: 0.8; }
.tn-cfg .tn-addtocart.is-loading .tn-addtocart__icon { display: none; }
.tn-cfg .tn-addtocart__spinner {
	display: none;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(11, 11, 12, 0.3);
	border-top-color: var(--tn-ink);
	border-radius: 50%;
	animation: tn-spin 0.7s linear infinite;
}
.tn-cfg .tn-addtocart.is-loading .tn-addtocart__spinner { display: inline-block; }
@keyframes tn-spin { to { transform: rotate(360deg); } }

/* botón "i" activo (tarjeta de info visible) */
.tn-cfg .tn-bar__summary.is-active {
	background: var(--tn-orange);
	border-color: var(--tn-orange);
	color: var(--tn-ink);
}

/* tarjeta de información dentro del preview */
.tn-cfg .tn-info-card {
	position: absolute;
	inset: 8% 10%;
	z-index: 50;
	display: flex;
	flex-direction: column;
	background: rgba(11, 11, 13, 0.94);
	border: 1px solid var(--tn-line);
	border-radius: var(--tn-r-md);
	padding: 20px 22px;
	overflow-y: auto;
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}
.tn-cfg .tn-info-card h4 {
	margin: 0 0 14px;
	font-family: var(--tn-font-mono);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tn-orange-text);
}
.tn-cfg .tn-info-card dl { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.tn-cfg .tn-info-card__row {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	font-size: 14px;
	line-height: 1.35;
}
.tn-cfg .tn-info-card__row dt { margin: 0; color: var(--tn-dim); }
.tn-cfg .tn-info-card__row dd { margin: 0; text-align: right; font-weight: 500; }
.tn-cfg .tn-info-card__row dd span { color: var(--tn-orange-text); font-variant-numeric: tabular-nums; }
.tn-cfg .tn-info-card__total {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--tn-line);
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}
.tn-cfg .tn-info-card__total span { font-size: 12.5px; color: var(--tn-dim); }
.tn-cfg .tn-info-card__total b {
	font-size: 26px;
	color: var(--tn-orange);
	font-variant-numeric: tabular-nums;
}
.tn-cfg .tn-stage--info .tn-stage__pane { opacity: 0.12; }
.tn-cfg .tn-stage--info .tn-stage__pane.is-mini { opacity: 0; }

/* El nombre de la vista lo muestra ahora la etiqueta de cada panel
   (.tn-stage__pane-tag); este nodo se conserva por compatibilidad. */
.tn-cfg .tn-stage__viewname { display: none; }

/* ============ NAVEGADOR DE PIEZAS (iconos) ============ */

/* Carrusel de iconos de pieza: viewport fijo de N iconos. La navegación va con
   las flechas ‹ › de la barra de abajo (que además llevan el título de pieza). */
.tn-cfg .tn-comp-tabswrap {
	--tn-tabs-visible: 6;
	position: relative;
	border-bottom: 1px solid var(--tn-line);
}

.tn-cfg .tn-comp-tabs {
	min-width: 0;
	display: flex;
	gap: 0;
	padding: 10px 0 0;
	overflow: hidden;
	scroll-behavior: smooth;
}
.tn-cfg .tn-comp-tabs::-webkit-scrollbar { display: none; }
@media ( prefers-reduced-motion: reduce ) {
	.tn-cfg .tn-comp-tabs { scroll-behavior: auto; }
}

.tn-cfg .tn-comp-tab {
	position: relative;
	flex: 0 0 calc( 100% / var(--tn-tabs-visible) );
	min-width: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 3px 9px;
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	color: var(--tn-dim);
	cursor: pointer;
	transition: color 140ms ease, border-color 140ms ease;
}
.tn-cfg .tn-comp-tab__icon {
	width: 100%;
	max-width: 56px;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--tn-r-sm);
	border: 1px solid transparent;
	transition: background 0.25s ease, border-color 0.25s ease;
	background: var(--tn-elev-2);
	overflow: hidden;
}
.tn-cfg .tn-comp-tab__icon img { width: 100%; height: 100%; object-fit: contain; padding: 3px; opacity: 0.8; }
.tn-cfg .tn-comp-tab__icon svg { width: 58%; height: 58%; }
.tn-cfg .tn-comp-tab:hover { color: var(--tn-text); }
.tn-cfg .tn-comp-tab:hover .tn-comp-tab__icon { background: var(--tn-elev); }
.tn-cfg .tn-comp-tab.is-active { color: var(--tn-text); border-bottom-color: var(--tn-orange); }
.tn-cfg .tn-comp-tab.is-active .tn-comp-tab__icon { background: var(--tn-elev); border-color: rgba(255, 106, 0, 0.55); }
.tn-cfg .tn-comp-tab:focus-visible { outline: none; }
.tn-cfg .tn-comp-tab:focus-visible .tn-comp-tab__icon { outline: 2px solid var(--tn-focus); outline-offset: 2px; }
.tn-cfg .tn-comp-tab.is-active .tn-comp-tab__icon img { opacity: 1; }

/* Pestaña del NIVEL 1: el SVG por defecto va en naranja. */
.tn-cfg .tn-comp-tab--gate .tn-comp-tab__icon { color: var(--tn-orange); }

/* Mientras el Nivel 1 está SIN responder: fondo naranja + icono BLANCO
   (imagen subida o SVG). Al desbloquear vuelve a su color natural. */
.tn-cfg.is-gated .tn-comp-tab--gate .tn-comp-tab__icon { background: var(--tn-orange); }
.tn-cfg.is-gated .tn-comp-tab--gate .tn-comp-tab__icon svg { color: var(--tn-ink); }
.tn-cfg.is-gated .tn-comp-tab--gate .tn-comp-tab__icon img {
	/* Icono en tinta sobre naranja (contraste del sistema: ink sobre or). */
	filter: brightness(0);
}

/* ---- NIVEL 1: desbloqueo por niveles ---- */
/* Candado sobre las pestañas bloqueadas hasta responder la puerta. */
.tn-cfg .tn-comp-tab__lock {
	position: absolute;
	top: 6px;
	left: 3px;
	right: 3px;
	width: auto;
	max-width: 62px;
	margin: 0 auto;
	aspect-ratio: 1 / 1;
	transform: none;
	display: none;
	align-items: center;
	justify-content: center;
	border-radius: var(--tn-r-sm);
	background: rgba(8, 8, 10, 0.72);
	color: var(--tn-text-2);
	backdrop-filter: blur(1px);
}
.tn-cfg .tn-comp-tab__lock svg { width: 20px; height: 20px; }
.tn-cfg .tn-comp-tab.is-locked { cursor: not-allowed; opacity: 0.85; }
.tn-cfg .tn-comp-tab.is-locked .tn-comp-tab__icon { filter: grayscale(1) brightness(0.6); }
.tn-cfg .tn-comp-tab.is-locked .tn-comp-tab__lock { display: flex; }

/* Sacudida de la franja al intentar saltarse el NIVEL 1. */
@keyframes tn-shake {
	10%, 90% { transform: translateX(-1px); }
	20%, 80% { transform: translateX(2px); }
	30%, 50%, 70% { transform: translateX(-4px); }
	40%, 60% { transform: translateX(4px); }
}
.tn-cfg .tn-comp-tabs.is-shaking { animation: tn-shake 500ms ease; }

/* Desbloqueo escalonado de cada pestaña. */
@keyframes tn-unlock {
	0% { transform: translateY(4px) scale(0.9); opacity: 0.2; }
	45% { transform: translateY(0) scale(1.06); opacity: 1; box-shadow: 0 0 0 4px var(--tn-glow); }
	100% { transform: translateY(0) scale(1); opacity: 1; box-shadow: 0 0 0 0 transparent; }
}
.tn-cfg .tn-comp-tab.is-unlocking {
	animation: tn-unlock 640ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
	animation-delay: var(--tn-unlock-delay, 0ms);
}

/* Parpadeo de la capa que cambia (sin escalar la imagen). */
@keyframes tn-layer-flash {
	0%, 100% { opacity: 1; }
	20% { opacity: 0.15; }
	40% { opacity: 1; }
	60% { opacity: 0.35; }
	80% { opacity: 1; }
}
.tn-cfg .tn-layer.is-flash { animation: tn-layer-flash 560ms ease-in-out; }

@media (prefers-reduced-motion: reduce) {
	.tn-cfg .tn-comp-tabs.is-shaking,
	.tn-cfg .tn-comp-tab.is-unlocking,
	.tn-cfg .tn-layer.is-flash { animation: none; }
}

/* barra ‹ NOMBRE · opción › */
.tn-cfg .tn-comp-nav {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--tn-line);
}
.tn-cfg .tn-comp-nav__arrow {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--tn-line);
	border-radius: var(--tn-r-sm);
	background: rgba(255, 255, 255, 0.07);
	color: var(--tn-text);
	cursor: pointer;
	transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, opacity 0.25s ease;
}
.tn-cfg .tn-comp-nav__arrow svg { width: 16px; height: 16px; }
.tn-cfg .tn-comp-nav__arrow:not(:disabled):hover { color: var(--tn-orange); border-color: var(--tn-orange); background: rgba(255, 255, 255, 0.12); }
.tn-cfg .tn-comp-nav__arrow:disabled { opacity: 0.3; cursor: default; }
.tn-cfg .tn-comp-nav__label { flex: 1 1 auto; min-width: 0; line-height: 1.2; }
.tn-cfg .tn-comp-nav__name {
	display: block;
	font-family: var(--tn-font-mono);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tn-orange-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tn-cfg .tn-comp-nav__opt {
	display: block;
	margin-top: 2px;
	font-size: 14px;
	color: var(--tn-text-2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* scroll de secciones */
.tn-cfg .tn-cfg__scroll {
	padding: 4px 16px 18px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* ---- Barras de desplazamiento con estilo de marca ---- */
.tn-cfg,
.tn-cfg *,
.tn-cfg .tn-cfg__scroll,
.tn-cfg .tn-cfg__panel,
.tn-cfg .tn-info-card,
.tn-cfg .tn-comp-tabs,
.tn-cfg .tn-perso-editor select {
	scrollbar-width: thin;
	scrollbar-color: var(--tn-orange) transparent;
}
.tn-cfg *::-webkit-scrollbar,
.tn-cfg .tn-cfg__scroll::-webkit-scrollbar,
.tn-cfg .tn-info-card::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
.tn-cfg *::-webkit-scrollbar-track,
.tn-cfg .tn-cfg__scroll::-webkit-scrollbar-track,
.tn-cfg .tn-info-card::-webkit-scrollbar-track {
	background: transparent;
}
.tn-cfg *::-webkit-scrollbar-thumb,
.tn-cfg .tn-cfg__scroll::-webkit-scrollbar-thumb,
.tn-cfg .tn-info-card::-webkit-scrollbar-thumb {
	background: var(--tn-orange);
	border-radius: 999px;
	border: 2px solid transparent;
	background-clip: padding-box;
}
.tn-cfg *::-webkit-scrollbar-thumb:hover,
.tn-cfg .tn-cfg__scroll::-webkit-scrollbar-thumb:hover {
	background: var(--tn-orange-2);
	background-clip: padding-box;
}
.tn-cfg *::-webkit-scrollbar-corner { background: transparent; }
/* La franja de iconos (scroll horizontal) sigue sin barra visible. */
.tn-cfg .tn-comp-tabs { scrollbar-width: none; }
.tn-cfg .tn-comp-tabs::-webkit-scrollbar { display: none; }

/* ============ COMPONENTES / SWATCHES ============ */

.tn-cfg .tn-component {
	padding: 16px 0;
	border-bottom: 1px solid var(--tn-line);
}
.tn-cfg .tn-component:last-of-type { border-bottom: 0; }

/* Una pieza a la vez: solo se muestra el componente activo (pestaña de icono).
   El nombre de la pieza y su opción activa los muestra SOLO la barra .tn-comp-nav
   (no se repite ni en la pestaña de icono ni encima de los swatches). */
.tn-cfg .tn-component:not(.is-current) { display: none !important; }

.tn-cfg .tn-group { margin-bottom: 12px; }
.tn-cfg .tn-group:last-child { margin-bottom: 0; }
.tn-cfg .tn-group__title {
	margin: 0 0 10px;
	font-family: var(--tn-font-mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tn-dim);
}

.tn-cfg .tn-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 8px;
}

.tn-cfg .tn-swatch {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: var(--tn-text-2);
	transition: color 0.25s ease;
}
.tn-cfg .tn-swatch:hover { color: var(--tn-text); }

.tn-cfg .tn-swatch__thumb {
	position: relative;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--tn-elev-2);
	border: 2px solid var(--tn-line-strong);
	overflow: hidden;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.tn-cfg .tn-swatch__thumb img { width: 100%; height: 100%; object-fit: cover; }
.tn-cfg .tn-swatch:hover .tn-swatch__thumb {
	border-color: var(--tn-orange-2);
	transform: translateY(-1px);
}

/* Opción "Estándar" (acabado de fábrica): sin imagen, aro punteado. */
.tn-cfg .tn-swatch--standard .tn-swatch__thumb {
	border-style: dashed;
	background: transparent;
}
.tn-cfg .tn-swatch__std {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 22px;
	height: 22px;
	color: var(--tn-dim);
}
.tn-cfg .tn-swatch--standard.is-selected .tn-swatch__std { color: var(--tn-orange); }
.tn-cfg .tn-swatch.is-selected { color: var(--tn-text); }
.tn-cfg .tn-swatch.is-selected .tn-swatch__thumb {
	border-color: var(--tn-orange);
	box-shadow: 0 0 0 3px var(--tn-glow);
}

.tn-cfg .tn-swatch__check {
	position: absolute;
	right: 1px;
	bottom: 1px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--tn-orange);
	transform: scale(0);
	transition: transform 150ms ease;
}
.tn-cfg .tn-swatch__check::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 2px;
	width: 4px;
	height: 8px;
	border: solid var(--tn-ink);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.tn-cfg .tn-swatch.is-selected .tn-swatch__check { transform: scale(1); }

.tn-cfg .tn-swatch__name {
	font-size: 11.5px;
	line-height: 1.2;
	text-align: center;
}
.tn-cfg .tn-swatch__delta {
	font-size: 11px;
	color: var(--tn-orange-text);
	font-variant-numeric: tabular-nums;
}

/* FASE 5: componente bloqueado por una regla "force" */
.tn-cfg .tn-component--locked .tn-swatch[aria-disabled="true"] {
	opacity: 0.4;
	cursor: not-allowed;
}
.tn-cfg .tn-comp-nav.is-locked .tn-comp-nav__name::after {
	/* Candado dibujado con máscara SVG (el sistema no usa emojis). */
	content: "";
	display: inline-block;
	width: 11px;
	height: 11px;
	margin-left: 7px;
	vertical-align: -1px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V8a5 5 0 0 1 10 0v2h2v11H5V10h2Zm2 0h6V8a3 3 0 0 0-6 0v2Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V8a5 5 0 0 1 10 0v2h2v11H5V10h2Zm2 0h6V8a3 3 0 0 0-6 0v2Z'/%3E%3C/svg%3E") center / contain no-repeat;
	opacity: 0.85;
}

.tn-cfg .tn-swatch--unavailable {
	cursor: not-allowed;
	opacity: 0.38;
}
.tn-cfg .tn-swatch--unavailable .tn-swatch__thumb { filter: grayscale(1); }
.tn-cfg .tn-swatch__badge {
	font-family: var(--tn-font-display);
	font-size: 8px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tn-bad);
}

/* ===== NIVEL 1: "¿Cómo lo hacemos?" (mando nuevo / mando propio) ===== */
.tn-cfg .tn-component--gate { padding: 18px 0 8px; }

.tn-cfg .tn-gate__head { margin-bottom: 16px; }
.tn-cfg .tn-gate__step {
	display: inline-block;
	margin-bottom: 10px;
	padding: 4px 11px;
	border-radius: 999px;
	background: var(--tn-orange);
	color: var(--tn-ink);
	font-family: var(--tn-font-mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.tn-cfg .tn-gate__title {
	margin: 0 0 6px;
	font-family: var(--tn-font-display);
	font-size: 24px;
	font-weight: 800;
	font-stretch: 80%;
	line-height: 0.96;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--tn-text);
}
.tn-cfg .tn-gate__sub {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--tn-text-2);
}

.tn-cfg .tn-gate__cards {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 100%;
}
.tn-cfg .tn-gate-card {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 14px;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 16px 44px 16px 16px;
	text-align: left;
	white-space: normal;
	background: var(--tn-elev);
	border: 1.5px solid var(--tn-line);
	border-radius: var(--tn-r-md);
	color: var(--tn-text);
	cursor: pointer;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.tn-cfg .tn-gate-card:hover {
	border-color: var(--tn-orange-2);
	background: var(--tn-elev-2);
}
.tn-cfg .tn-gate-card:focus-visible {
	outline: 2px solid var(--tn-focus);
	outline-offset: 2px;
}
.tn-cfg .tn-gate-card.is-selected {
	border-color: var(--tn-orange);
	box-shadow: 0 0 0 3px var(--tn-glow);
	background: var(--tn-elev-2);
}
.tn-cfg .tn-gate-card__icon {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--tn-r-sm);
	background: rgba(255, 106, 0, 0.12);
	color: var(--tn-orange);
	overflow: hidden;
	transition: background 0.25s ease;
}
.tn-cfg .tn-gate-card.is-selected .tn-gate-card__icon { background: rgba(255, 106, 0, 0.2); }
.tn-cfg .tn-gate-card__icon svg { width: 24px; height: 24px; }
.tn-cfg .tn-gate-card__icon img { width: 100%; height: 100%; object-fit: contain; padding: 7px; }
.tn-cfg .tn-gate-card__body {
	flex: 1 1 auto;
	min-width: 0;
}
.tn-cfg .tn-gate-card__name {
	display: block;
	font-family: var(--tn-font-body);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.3;
	margin-bottom: 4px;
	white-space: normal;
	overflow-wrap: break-word;
}
.tn-cfg .tn-gate-card__desc {
	display: block;
	font-size: 13px;
	line-height: 1.5;
	color: var(--tn-text-2);
	white-space: normal;
	overflow-wrap: break-word;
}
.tn-cfg .tn-gate-card__check {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid var(--tn-line-strong);
	transition: border-color 0.25s ease, background 0.25s ease;
}
.tn-cfg .tn-gate-card.is-selected .tn-gate-card__check {
	border-color: var(--tn-orange);
	background: var(--tn-orange);
}
.tn-cfg .tn-gate-card.is-selected .tn-gate-card__check::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 2px;
	width: 4px;
	height: 9px;
	border: solid var(--tn-ink);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* #2 — Panel "Nos envías tu mando" (suelto en el panel, cuando eliges "envío mi mando"). */
.tn-cfg .tn-gate-own {
	margin: 6px 0 14px;
	padding: 16px;
	background: var(--tn-elev);
	border: 1px solid rgba(255, 106, 0, 0.55);
	border-radius: var(--tn-r-md);
}
.tn-cfg.is-gated .tn-gate-own { display: none; }
.tn-cfg .tn-gate-own__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	color: var(--tn-orange);
}
.tn-cfg .tn-gate-own__head svg { width: 20px; height: 20px; }
.tn-cfg .tn-gate-own__head h4 {
	margin: 0;
	font-family: var(--tn-font-display);
	font-size: 18px;
	font-weight: 800;
	font-stretch: 80%;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--tn-text);
}
.tn-cfg .tn-gate-own__model { display: block; }
.tn-cfg .tn-gate-own__model > span {
	display: block;
	margin-bottom: 6px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--tn-text);
}
.tn-cfg .tn-gate-own__model > span b { color: var(--tn-orange-text); margin-left: 2px; }
.tn-cfg .tn-gate-own__model input {
	width: 100%;
	min-height: 46px;
	padding: 0 12px;
	background: var(--tn-sys-pn-deep);
	color: var(--tn-text);
	border: 1px solid var(--tn-line);
	border-radius: var(--tn-r-sm);
	font: inherit;
	font-size: 15px;
}
.tn-cfg .tn-gate-own__model input:focus { outline: none; border-color: var(--tn-orange); }
.tn-cfg .tn-gate-own__model input.is-missing { border-color: var(--tn-bad); }
.tn-cfg .tn-gate-own__instr {
	margin-top: 12px;
	font-size: 13px;
}
.tn-cfg .tn-gate-own__instr summary {
	cursor: pointer;
	color: var(--tn-orange-text);
	font-weight: 700;
	list-style: none;
}
.tn-cfg .tn-gate-own__instr summary::-webkit-details-marker { display: none; }
.tn-cfg .tn-gate-own__instr summary::before { content: ""; display: inline-block; width: .85em; height: .85em; margin-right: .35em; vertical-align: -.08em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .2s; }
.tn-cfg .tn-gate-own__instr[open] summary::before { transform: rotate(90deg); }
.tn-cfg .tn-gate-own__instr > div { margin-top: 8px; }
.tn-cfg .tn-gate-own__instr p {
	margin: 0 0 8px;
	line-height: 1.5;
	color: var(--tn-text-2);
	white-space: pre-line;
}
.tn-cfg .tn-gate-own__link {
	display: inline-block;
	margin-top: 4px;
	font-weight: 700;
	color: var(--tn-orange-text);
	text-decoration: none;
}
.tn-cfg .tn-gate-own__link:hover { text-decoration: underline; }

/* Botones de acción del pie del panel: Reiniciar · Compartir. */
.tn-cfg .tn-scroll-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}
.tn-cfg .tn-action-btn {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 0 16px;
	background: rgba(255, 255, 255, 0.07);
	color: var(--tn-text);
	border: 1px solid var(--tn-line);
	border-radius: var(--tn-r-sm);
	font-family: var(--tn-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.tn-cfg .tn-action-btn svg { width: 16px; height: 16px; }
.tn-cfg .tn-action-btn:hover { border-color: var(--tn-orange); background: rgba(255, 255, 255, 0.12); }
.tn-cfg .tn-action-btn--share {
	background: transparent;
	border-color: var(--tn-orange);
	color: var(--tn-orange-text);
}
.tn-cfg .tn-action-btn--share:hover {
	background: var(--tn-orange);
	color: var(--tn-ink);
}
.tn-cfg .tn-action-btn.is-done {
	border-color: var(--tn-good);
	color: var(--tn-good);
}

/* #7 — Bloque "Regalo". */
.tn-cfg .tn-gift {
	margin: 8px 0 4px;
	padding: 14px 16px;
	background: var(--tn-elev);
	border: 1px solid var(--tn-line);
	border-radius: var(--tn-r-sm);
}
.tn-cfg.is-gated .tn-gift { display: none; }
.tn-cfg .tn-gift__toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-family: var(--tn-font-body);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--tn-text);
}
.tn-cfg .tn-gift__toggle span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.tn-cfg .tn-gift__toggle svg { width: 18px; height: 18px; color: var(--tn-orange); }
.tn-cfg .tn-gift__toggle input { width: 16px; height: 16px; accent-color: var(--tn-orange); }
.tn-cfg .tn-gift__body {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--tn-line);
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.tn-cfg .tn-gift__row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--tn-text);
}
.tn-cfg .tn-gift__row.tn-gift__check {
	flex-direction: row;
	align-items: center;
	gap: 8px;
}
.tn-cfg .tn-gift__row.tn-gift__check input { width: 16px; height: 16px; accent-color: var(--tn-orange); }
.tn-cfg .tn-gift__row.tn-gift__check b { color: var(--tn-orange-text); font-variant-numeric: tabular-nums; }
.tn-cfg .tn-gift__row textarea,
.tn-cfg .tn-gift__row input[type="date"] {
	width: 100%;
	padding: 10px 12px;
	background: var(--tn-sys-pn-deep);
	color: var(--tn-text);
	border: 1px solid var(--tn-line);
	border-radius: var(--tn-r-sm);
	font: inherit;
	font-size: 15px;
	font-weight: 400;
}
.tn-cfg .tn-gift__row textarea { resize: vertical; min-height: 44px; }
.tn-cfg .tn-gift__row textarea:focus,
.tn-cfg .tn-gift__row input[type="date"]:focus { outline: none; border-color: var(--tn-orange); }

/* #8 — Móvil: mientras el Nivel 1 está bloqueado, ocultar el resto de pestañas
   y mostrar solo un aviso "Resto bloqueado". */
.tn-cfg .tn-comp-tabs__locked {
	display: none;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	padding: 0 10px;
	color: var(--tn-text-2);
	font-family: var(--tn-font-mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
}
.tn-cfg .tn-comp-tabs__locked svg { width: 16px; height: 16px; }

/* ===== Viñeta flotante (nombre + precio) al pasar el ratón / tocar un swatch ===== */
.tn-cfg .tn-tip {
	position: absolute;
	z-index: 70;
	max-width: min(240px, 72vw);
	padding: 7px 12px;
	background: var(--tn-sys-pn);
	border: 1px solid var(--tn-orange);
	border-radius: var(--tn-r-sm);
	font-family: var(--tn-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.35;
	text-align: center;
	color: var(--tn-text);
	white-space: normal;
	overflow-wrap: break-word;
	pointer-events: none;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
	transform: translate(-50%, calc(-100% - 10px));
	opacity: 0;
	transition: opacity 120ms ease;
}
.tn-cfg .tn-tip::after {
	content: "";
	position: absolute;
	left: calc(50% + var(--tn-tip-arrow, 0px));
	top: 100%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: var(--tn-orange);
}
.tn-cfg .tn-tip.is-visible { opacity: 1; }

/* ===== Notificación tipo "toast" (se oculta sola a los 5 s) ===== */
.tn-cfg .tn-toast {
	position: fixed;
	left: 50%;
	bottom: calc(24px + var(--tn-sticky-bottom, 0px));
	z-index: 2147483000;
	max-width: min(90vw, 420px);
	padding: 13px 18px;
	background: var(--tn-sys-pn);
	border: 1px solid var(--tn-line);
	border-left: 4px solid var(--tn-orange);
	border-radius: var(--tn-r-sm);
	font-family: var(--tn-font-body);
	font-size: 14px;
	line-height: 1.45;
	color: var(--tn-text);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
	transform: translateX(-50%) translateY(14px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.tn-cfg .tn-toast--success { border-left-color: var(--tn-good); }
.tn-cfg .tn-toast--error { border-left-color: var(--tn-bad); }
.tn-cfg .tn-toast.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* Botón "Añadir al carrito" mientras el NIVEL 1 sigue sin responder. */
.tn-cfg .tn-addtocart.is-disabled {
	/* Estado "aún no": gris sólido con texto legible (antes: naranja con
	   opacidad .45 → texto ilegible, contraste < 2:1). Sigue siendo pulsable:
	   lleva al Nivel 1 y muestra el aviso. */
	background: rgba(255, 255, 255, 0.1);
	color: var(--tn-text-2);
	cursor: not-allowed;
	transform: none;
}
.tn-cfg .tn-addtocart.is-disabled::after { display: none; }

/* select (dropdown) */
.tn-cfg .tn-component__select {
	width: 100%;
	min-height: 46px;
	padding: 0 12px;
	background: var(--tn-sys-pn-deep);
	color: var(--tn-text);
	border: 1px solid var(--tn-line);
	border-radius: var(--tn-r-sm);
	font: inherit;
	font-size: 15px;
}

/* ---- FASE 7: panel "Personalizar" ---- */
.tn-cfg .tn-perso-panel__hint {
	margin: 0 0 10px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--tn-text-2);
}
.tn-cfg .tn-perso-panel__zonehint {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	margin: 0 0 12px;
	padding: 10px 12px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--tn-text);
	background: rgba(255, 106, 0, 0.10);
	border: 1px solid rgba(255, 106, 0, 0.35);
	border-radius: var(--tn-r-sm);
}
.tn-cfg .tn-perso-panel__zonehint[hidden] { display: none; }
.tn-cfg .tn-perso-panel__hint--mobile { display: none; }
@media (max-width: 1023px) {
	.tn-cfg .tn-perso-panel__hint--mobile { display: block; }
}
.tn-cfg .tn-perso-panel__zonehint svg { flex: 0 0 auto; margin-top: 1px; color: var(--tn-orange); }

/* Pestañas: Ninguno · Texto · Sticker · Diseño (compacto, una a la vez). */
.tn-cfg .tn-perso-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}
.tn-cfg .tn-perso-tab {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 40px;
	padding: 8px 10px;
	font-family: var(--tn-font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tn-text-2);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--tn-line);
	border-radius: 999px;
	cursor: pointer;
	transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tn-cfg .tn-perso-tab:hover { color: var(--tn-text); border-color: var(--tn-orange); }
/* Chip activo del sistema: naranja con texto ink (nunca blanco sobre naranja). */
.tn-cfg .tn-perso-tab.is-active {
	color: var(--tn-ink);
	background: var(--tn-orange);
	border-color: var(--tn-orange);
}
.tn-cfg .tn-perso-tabpanel { margin: 0; }
.tn-cfg .tn-perso-tabpanel[hidden] { display: none; }
.tn-cfg .tn-perso-tabpanel__lead { margin: 0 0 10px; font-size: 13.5px; color: var(--tn-text-2); line-height: 1.5; }

/* Contenido de cada pestaña del panel Personalizar. */
.tn-cfg .tn-perso-tabpanel.is-active {
	padding: 16px;
	border: 1px solid var(--tn-line);
	border-radius: var(--tn-r-md);
	background: var(--tn-elev);
}
.tn-cfg .tn-perso-group__title {
	margin: 0 0 12px;
	font-family: var(--tn-font-mono);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tn-text);
}
.tn-cfg .tn-perso-group__title span { color: var(--tn-orange-text); font-weight: 500; letter-spacing: 0.06em; }
.tn-cfg .tn-perso-group__note { margin: 0 0 12px; font-size: 13px; color: var(--tn-text-2); }

/* 1.18.6: diseño propio «Próximamente» (visible con su precio, sin poder pedirlo). */
.tn-cfg .tn-soon-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 6px;
	vertical-align: middle;
	border-radius: 50%;
	background: var(--tn-orange);
}
.tn-cfg .tn-perso-tab.is-active .tn-soon-dot { background: var(--tn-ink); }
.tn-cfg .tn-soon { display: flex; flex-direction: column; gap: 8px; }
.tn-cfg .tn-soon__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tn-cfg .tn-soon__badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	font-family: var(--tn-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tn-orange-text);
	border: 1px solid rgba(255, 106, 0, 0.45);
	border-radius: 999px;
	background: rgba(255, 106, 0, 0.1);
}
.tn-cfg .tn-soon__price {
	font-family: var(--tn-font-mono);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--tn-text);
}
.tn-cfg .tn-soon__title { margin: 2px 0 0; font-size: 14px; font-weight: 600; color: var(--tn-text); }
.tn-cfg .tn-soon__text { margin: 0 0 4px; font-size: 13px; line-height: 1.5; color: var(--tn-text-2); }
.tn-cfg .tn-soon .tn-perso-fd__drop {
	aspect-ratio: auto;
	min-height: 64px;
	flex-direction: row;
	cursor: not-allowed;
	opacity: 0.5;
}
.tn-cfg .tn-soon .tn-perso-fd__drop:hover { border-color: var(--tn-line-strong); }

/* Diseño completo: una zona de subida por cara */
.tn-cfg .tn-perso-fd { display: flex; flex-wrap: wrap; gap: 10px; }
.tn-cfg .tn-perso-fd__view { flex: 1 1 140px; display: flex; flex-direction: column; gap: 6px; }
.tn-cfg .tn-perso-fd__drop {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 1px dashed var(--tn-line-strong);
	border-radius: var(--tn-r-sm);
	background: var(--tn-bg) center / contain no-repeat;
	color: var(--tn-dim);
	cursor: pointer;
	transition: border-color 140ms ease;
}
.tn-cfg .tn-perso-fd__drop svg { width: 22px; height: 22px; }
.tn-cfg .tn-perso-fd__drop span {
	font-family: var(--tn-font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tn-text);
}
.tn-cfg .tn-perso-fd__drop:hover { border-color: var(--tn-orange); }
.tn-cfg .tn-perso-fd__view.has-image .tn-perso-fd__drop {
	border-style: solid;
	border-color: var(--tn-orange);
}
.tn-cfg .tn-perso-fd__view.has-image .tn-perso-fd__drop svg,
.tn-cfg .tn-perso-fd__view.has-image .tn-perso-fd__drop span { display: none; }
.tn-cfg .tn-perso-fd__clear {
	align-self: center;
	background: none;
	border: 0;
	padding: 0;
	color: var(--tn-dim);
	font: inherit;
	font-size: 12px;
	text-decoration: underline;
	cursor: pointer;
}
.tn-cfg .tn-perso-fd__clear:hover { color: var(--tn-orange); }

.tn-cfg .tn-perso-add { margin-bottom: 14px; }
.tn-cfg .tn-perso-add__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 46px;
	padding: 0 18px;
	border: 1px solid var(--tn-orange);
	border-radius: var(--tn-r-sm);
	background: transparent;
	color: var(--tn-text);
	font-family: var(--tn-font-body);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease;
}
.tn-cfg .tn-perso-add__btn svg { width: 16px; height: 16px; }
.tn-cfg .tn-perso-add__btn:hover { background: var(--tn-orange); color: var(--tn-ink); }
.tn-cfg .tn-perso-tabpanel .tn-perso-add__btn { margin: 0; }

.tn-cfg .tn-perso-lib__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: 12px;
}

/* Subir mi imagen */
.tn-cfg .tn-perso-upload {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 100%;
	padding: 16px;
	border: 1px dashed var(--tn-line-strong);
	border-radius: var(--tn-r-sm);
	background: var(--tn-bg);
	color: var(--tn-text-2);
	cursor: pointer;
	transition: border-color 140ms ease, color 140ms ease;
}
.tn-cfg .tn-perso-upload svg { width: 22px; height: 22px; }
.tn-cfg .tn-perso-upload span {
	font-family: var(--tn-font-mono);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tn-text);
}
.tn-cfg .tn-perso-upload small { font-size: 12px; }
.tn-cfg .tn-perso-upload:hover { border-color: var(--tn-orange); color: var(--tn-text); }
.tn-cfg .tn-perso-lib__item {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
	border: 1px solid var(--tn-line);
	border-radius: var(--tn-r-sm);
	background: var(--tn-elev-2);
	cursor: pointer;
	transition: border-color 140ms ease, transform 140ms ease;
}
.tn-cfg .tn-perso-lib__item:hover { border-color: var(--tn-orange); transform: translateY(-1px); }
.tn-cfg .tn-perso-lib__item img { max-width: 100%; max-height: 100%; object-fit: contain; }

.tn-cfg .tn-perso-editor {
	margin: 14px 0;
	padding: 16px;
	border: 1px solid var(--tn-line);
	border-radius: var(--tn-r-sm);
	background: var(--tn-elev);
}
.tn-cfg .tn-perso-editor__title {
	margin: 0 0 10px;
	font-family: var(--tn-font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tn-dim);
}
.tn-cfg .tn-perso-editor label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; margin-bottom: 10px; }
.tn-cfg .tn-perso-editor label span { color: var(--tn-text-2); }
.tn-cfg .tn-perso-editor input[type="text"] {
	min-height: 46px;
	padding: 0 12px;
	background: var(--tn-sys-pn-deep);
	color: var(--tn-text);
	border: 1px solid var(--tn-line);
	border-radius: var(--tn-r-sm);
	font: inherit;
	font-size: 15px;
}
.tn-cfg .tn-perso-editor__row { display: flex; gap: 12px; }
.tn-cfg .tn-perso-editor__row label { flex: 1; }
.tn-cfg .tn-perso-editor select {
	min-height: 46px;
	padding: 0 10px;
	background: var(--tn-sys-pn-deep);
	color: var(--tn-text);
	border: 1px solid var(--tn-line);
	border-radius: var(--tn-r-sm);
	font: inherit;
	font-size: 15px;
}
.tn-cfg .tn-perso-editor input[type="color"] {
	width: 100%;
	height: 46px;
	padding: 3px;
	background: var(--tn-sys-pn-deep);
	border: 1px solid var(--tn-line);
	border-radius: var(--tn-r-sm);
}
.tn-cfg .tn-perso-editor__del {
	margin-top: 4px;
	background: none;
	border: 0;
	padding: 0;
	color: var(--tn-bad);
	font: inherit;
	font-size: 12px;
	text-decoration: underline;
	cursor: pointer;
}
.tn-cfg .tn-perso-panel__empty { font-size: 13px; color: var(--tn-text-2); }

/* Lista de elementos añadidos (varios textos / imágenes) */
.tn-cfg .tn-perso-list__title {
	margin: 6px 0 8px;
	font-family: var(--tn-font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tn-dim);
}
.tn-cfg .tn-perso-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tn-cfg .tn-perso-tabpanel .tn-perso-list:not(:empty) { margin-top: 10px; }
.tn-cfg .tn-perso-list__item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	border: 1px solid var(--tn-line);
	border-radius: var(--tn-r-sm);
	background: var(--tn-elev-2);
	cursor: pointer;
	transition: border-color 0.25s ease;
}
.tn-cfg .tn-perso-list__item:hover { border-color: var(--tn-orange-2); }
.tn-cfg .tn-perso-list__item.is-selected { border-color: var(--tn-orange); box-shadow: inset 0 0 0 1px var(--tn-orange); }
.tn-cfg .tn-perso-list__ico { flex: 0 0 auto; width: 18px; height: 18px; color: var(--tn-orange); }
.tn-cfg .tn-perso-list__ico svg { width: 100%; height: 100%; }
.tn-cfg .tn-perso-list__label {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tn-cfg .tn-perso-list__view { flex: 0 0 auto; font-size: 11px; color: var(--tn-dim); }
.tn-cfg .tn-perso-list__del {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--tn-dim);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}
.tn-cfg .tn-perso-list__del:hover { background: var(--tn-bad); color: var(--tn-ink); }

.tn-cfg .tn-feedback {
	margin: 12px 0 0;
	min-height: 1em;
	font-size: 14px;
}
.tn-cfg .tn-feedback--success { color: var(--tn-good); }
.tn-cfg .tn-feedback--error { color: var(--tn-bad); }

.tn-cfg .tn-reset-link {
	margin-top: 10px;
	background: none;
	border: 0;
	padding: 0;
	color: var(--tn-dim);
	font: inherit;
	font-size: 12px;
	text-decoration: underline;
	cursor: pointer;
}
.tn-cfg .tn-reset-link:hover { color: var(--tn-orange); }

/* Aviso de diagnóstico (solo editores) */
.tn-cfg .tn-diag {
	margin-top: 12px;
	padding: 8px 10px;
	border: 1px solid var(--tn-line);
	border-left: 3px solid var(--tn-orange);
	border-radius: 6px;
	font-size: 12px;
	color: var(--tn-dim);
}
.tn-cfg .tn-diag summary { cursor: pointer; color: var(--tn-orange); }
.tn-cfg .tn-diag a { color: var(--tn-orange); }
.tn-cfg .tn-diag ul { margin: 6px 0 0; padding-left: 18px; }
.tn-cfg .tn-diag ul ul { margin: 2px 0 4px; }
.tn-cfg .tn-diag code { font-size: 11px; word-break: break-all; }
.tn-cfg .tn-diag--snap { border-left-color: var(--tn-bad); }
.tn-cfg .tn-diag--snap summary { color: var(--tn-bad); }

/* ============ RESPONSIVE ============ */

/* ---- Escritorio: pantalla completa, proporciones de la referencia ----
        preview ~64% / panel ~36%, alto = viewport, sin scroll de página.
        El panel scrollea por dentro. ---- */
@media (min-width: 1024px) {

	/* Evita el scroll horizontal que puede generar el ancho 100vw. */
	html:has(.tn-cfg--fullbleed) { overflow-x: clip; }

	.tn-cfg {
		grid-template-columns: 64% 36%;
		gap: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		/* --tn-cfg-h lo calcula el JS descontando la cabecera del tema y la barra
		   de administración; si el JS no corre, cae en 100vh. */
		height: var(--tn-cfg-h, 100vh);
		max-height: var(--tn-cfg-h, 100vh);
		overflow: hidden;
	}
	.tn-cfg::before,
	.tn-cfg::after { display: none; }

	.tn-cfg--fullbleed {
		width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}
	.tn-cfg--boxed {
		border: 1px solid var(--tn-line);
		border-radius: var(--tn-radius);
		/* Respaldo sin JS: alto útil bajo la cabecera fija, como mucho 760px. */
		height: var(--tn-cfg-h, min(calc(100vh - 100px), 760px));
		max-height: var(--tn-cfg-h, min(calc(100vh - 100px), 760px));
		min-height: 560px;
	}
	.tn-cfg--boxed::before,
	.tn-cfg--boxed::after { display: block; }

	.tn-cfg .tn-cfg__stagewrap { height: 100%; min-height: 0; }
	.tn-cfg .tn-stage {
		height: 100%;
		aspect-ratio: auto;
		border: 0;
		border-radius: 0;
	}
	.tn-cfg .tn-stage__pane.is-main .tn-stage__layers { inset: 7% 9%; }
	.tn-cfg .tn-stage__pane.is-main .tn-stage__base { top: 7%; left: 9%; width: 82%; height: 86%; }
	.tn-cfg .tn-stage__pane.is-mini { width: 20%; height: 26%; }
	.tn-cfg .tn-stage__reset { width: 58px; height: 58px; bottom: 22px; }
	.tn-cfg .tn-stage__reset svg { width: 26px; height: 26px; }

	.tn-cfg .tn-cfg__panel {
		height: 100%;
		max-height: none;
		border: 0;
		border-left: 1px solid var(--tn-line);
		border-radius: 0;
	}

	/* Barra de precio: banda propia arriba del panel con el precio y el CTA
	   (misma estructura que antes). 1.18.0: la banda clara pasa a la superficie
	   elevada del sistema (tema oscuro único; el naranja no va sobre "papel"). */
	.tn-cfg .tn-bar {
		background: var(--tn-elev);
		border-bottom: 1px solid var(--tn-line);
		padding: 20px 24px;
	}
	.tn-cfg .tn-price__label { display: none; }
	.tn-cfg .tn-price__amount {
		color: var(--tn-text);
		font-size: clamp(26px, 2vw, 32px);
	}
	/* Si el precio es muy largo, el CTA baja a su propia fila (sin recortes). */
	.tn-cfg .tn-bar { flex-wrap: wrap; row-gap: 12px; }
	.tn-cfg .tn-bar__actions { flex: 1 0 auto; justify-content: flex-end; }
	.tn-cfg .tn-addtocart {
		min-height: 54px;
		padding: 0 24px 0 20px;
		font-size: 14px;
	}

	.tn-cfg .tn-cfg__scroll {
		flex: 1 1 auto;
		min-height: 0;
		padding: 10px 22px 26px;
	}

	/* Carrusel: 6 iconos por vista en escritorio, cajas ~20% más grandes. */
	.tn-cfg .tn-comp-tabswrap { --tn-tabs-visible: 6; }
	.tn-cfg .tn-comp-tabs { padding: 12px 4px 0; }
	.tn-cfg .tn-comp-tab { padding: 8px 4px 10px; }
	.tn-cfg .tn-comp-tab__icon { max-width: 74px; border-radius: var(--tn-r-sm); }
	.tn-cfg .tn-comp-tab__icon svg { width: 60%; height: 60%; }
	.tn-cfg .tn-comp-tab__lock { max-width: 74px; border-radius: var(--tn-r-sm); }
	.tn-cfg .tn-comp-nav { padding: 14px 20px; }

	.tn-cfg .tn-component { padding: 16px 2px; }

	/* Swatches: círculos juntos (flex-wrap, poco gap). */
	.tn-cfg .tn-swatches { gap: 8px; }
	.tn-cfg .tn-swatch { padding: 0; }
	.tn-cfg .tn-swatch__thumb { width: 52px; height: 52px; }
	.tn-cfg .tn-swatch__check { width: 20px; height: 20px; }
	.tn-cfg .tn-swatch:hover .tn-swatch__thumb { transform: none; }
	.tn-cfg .tn-swatch__name,
	.tn-cfg .tn-swatch__delta {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}
}

/* Escritorio estrecho (1024–1279): el panel mide ~340–440px; precio y CTA más
   compactos para que quepan en la banda sin aplastar el botón de info. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.tn-cfg .tn-bar { padding: 16px 16px; gap: 10px; }
	.tn-cfg .tn-price__amount { font-size: 26px; }
	.tn-cfg .tn-addtocart { min-height: 48px; padding: 0 18px 0 14px; font-size: 12.5px; letter-spacing: 0.04em; }
	.tn-cfg .tn-addtocart__icon { display: none; }
}
.tn-cfg .tn-bar__summary { flex: 0 0 auto; }

/* Elementos solo de móvil/tablet (1.18.2): ocultos en escritorio. */
.tn-cfg .tn-stage__tools,
.tn-cfg .tn-comp-nav__delta { display: none; }

/* ======================================================================
   1.18.2 — MÓVIL Y TABLET (< 1024px)
   Patrón de configurador tipo "app" (Nike By You / SCUF): el configurador
   ocupa el alto útil de la pantalla (bajo la cabecera fija del tema y sobre
   su barra inferior, que mide el JS) y se reparte así:
     · preview arriba (~38% del alto, svh → sin saltos por la barra de URL),
       el mando SIEMPRE entero (contain) y con una franja inferior reservada
       para la miniatura de la otra cara, el botón de girar y las acciones
       secundarias (Reiniciar · Compartir), que así nunca tapan el mando;
     · tira de piezas con scroll horizontal + snap + degradados de borde;
     · cabecera ‹ PIEZA · opción +precio ›;
     · opciones con scroll PROPIO (no colapsan bajo franjas pegajosas);
     · barra de compra compacta abajo (pegajosa mientras el configurador
       está en pantalla; respeta safe-area-inset-bottom).
   En escritorio (≥ 1024px) nada de esto aplica.
   ====================================================================== */
@media (max-width: 1023px) {

	html:has(.tn-cfg--fullbleed) { overflow-x: clip; }

	.tn-cfg {
		--tn-stage-h: clamp(190px, 38vh, 440px);
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto minmax(0, 1fr);
		gap: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: var(--tn-bg);
		height: calc(100vh - var(--tn-sticky-top, 0px) - var(--tn-sticky-bottom, 0px));
		min-height: 500px;
	}
	@supports (height: 100svh) {
		.tn-cfg {
			--tn-stage-h: clamp(190px, 38svh, 440px);
			height: calc(100svh - var(--tn-sticky-top, 0px) - var(--tn-sticky-bottom, 0px));
		}
	}
	.tn-cfg::before,
	.tn-cfg::after { display: none; }
	.tn-cfg--fullbleed {
		width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}
	.tn-cfg--boxed {
		border: 1px solid var(--tn-line);
		border-radius: var(--tn-r-md);
	}

	/* ---- Preview ---- */
	.tn-cfg .tn-cfg__stagewrap {
		position: relative;
		min-width: 0;
		min-height: 0;
	}
	.tn-cfg .tn-stage {
		/* Recuadro del mando (lo lee el JS): franja inferior para los controles. */
		--tn-box-pad-t: 10px;
		--tn-box-pad-b: 58px;
		--tn-box-pad-x: 10px;
		aspect-ratio: auto;
		height: var(--tn-stage-h);
		border: 0;
		border-bottom: 1px solid var(--tn-line);
		border-radius: 0;
	}
	.tn-cfg--boxed .tn-stage { border-radius: var(--tn-r-md) var(--tn-r-md) 0 0; }

	/* Girar: centrado en la franja inferior, 44px (objetivo táctil). */
	.tn-cfg .tn-stage__reset { width: 46px; height: 46px; bottom: 6px; }
	.tn-cfg .tn-stage__reset svg { width: 20px; height: 20px; }

	/* Miniatura de la otra cara: abajo a la izquierda, fuera del mando. */
	.tn-cfg .tn-stage__pane.is-mini {
		top: calc(100% - 54px);
		left: 8px;
		width: 72px;
		height: 48px;
		opacity: 0.85;
		border-radius: var(--tn-r-sm);
	}
	.tn-cfg .tn-stage__pane.is-mini .tn-stage__pane-tag { display: none; }

	/* Reiniciar · Compartir: abajo a la derecha (antes, dos botones enormes al pie). */
	.tn-cfg .tn-stage__tools {
		display: flex;
		position: absolute;
		right: 8px;
		bottom: 7px;
		z-index: 42;
		gap: 6px;
	}
	.tn-cfg .tn-stage__tool {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		color: var(--tn-text);
		background: rgba(8, 8, 10, 0.72);
		border: 1px solid var(--tn-line-strong);
		border-radius: 50%;
		cursor: pointer;
		transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
	}
	.tn-cfg .tn-stage__tool svg { width: 18px; height: 18px; }
	.tn-cfg .tn-stage__tool--share { color: var(--tn-orange-text); border-color: rgba(255, 106, 0, 0.6); }
	.tn-cfg .tn-stage__tool:active { background: var(--tn-orange); color: var(--tn-ink); border-color: var(--tn-orange); }
	.tn-cfg .tn-stage__tool.is-done { border-color: var(--tn-good); color: var(--tn-good); }

	/* Tarjeta de información: dentro del preview, sin tapar los controles. */
	.tn-cfg .tn-info-card { inset: 8px 8px 58px; padding: 14px 16px; }

	/* ---- Panel ---- */
	.tn-cfg .tn-cfg__panel {
		display: flex;
		flex-direction: column;
		min-height: 0;
		max-height: none;
		border: 0;
		border-radius: 0;
		overflow: visible;
	}
	.tn-cfg .tn-comp-tabswrap { order: 1; flex: 0 0 auto; }
	.tn-cfg .tn-comp-nav { order: 2; flex: 0 0 auto; }
	.tn-cfg .tn-cfg__scroll {
		order: 3;
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 12px 14px 18px;
	}

	/* Barra de compra compacta. */
	.tn-cfg .tn-bar {
		order: 4;
		flex: 0 0 auto;
		position: sticky;
		top: auto;
		bottom: var(--tn-sticky-bottom, 0px);
		z-index: 45;
		flex-wrap: nowrap;
		gap: 10px;
		padding: 10px 12px max(10px, calc(env(safe-area-inset-bottom, 0px) + 6px - var(--tn-sticky-bottom, 0px)));
		background: var(--tn-panel);
		border-top: 1px solid var(--tn-line);
		border-bottom: 0;
		box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.35);
	}
	.tn-cfg--boxed .tn-bar { border-radius: 0 0 var(--tn-r-md) var(--tn-r-md); }
	.tn-cfg .tn-price__label { font-size: 10px; }
	.tn-cfg .tn-price__amount { font-size: 24px; }
	.tn-cfg .tn-bar__actions { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
	.tn-cfg .tn-bar__summary { width: 44px; min-height: 48px; }
	.tn-cfg .tn-addtocart {
		flex: 1 1 auto;
		min-width: 0;
		max-width: 380px;
		min-height: 48px;
		padding: 0 18px 0 14px;
		font-size: 13px;
	}

	/* Las acciones del pie del panel pasan al preview (ver .tn-stage__tools). */
	.tn-cfg .tn-scroll-actions { display: none; }

	/* ---- Tira de piezas: scroll con el dedo, snap y degradados ---- */
	.tn-cfg .tn-comp-tabswrap {
		position: relative;
		background: var(--tn-panel);
	}
	.tn-cfg .tn-comp-tabs {
		height: auto;
		padding: 6px 12px 0;
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scroll-padding-inline: 40px;
		-webkit-overflow-scrolling: touch;
	}
	.tn-cfg .tn-comp-tab {
		flex: 0 0 64px;
		min-height: 62px;
		padding: 4px 4px 8px;
		scroll-snap-align: center;
	}
	.tn-cfg .tn-comp-tab__icon { max-width: 52px; }
	.tn-cfg .tn-comp-tab__icon svg { width: 56%; height: 56%; }
	.tn-cfg .tn-comp-tab__lock { max-width: 52px; top: 4px; left: 6px; right: 6px; }
	.tn-cfg .tn-comp-tab.is-active .tn-comp-tab__icon {
		border-color: var(--tn-orange);
		box-shadow: 0 0 0 2px var(--tn-glow);
	}
	.tn-cfg .tn-comp-tabswrap::before,
	.tn-cfg .tn-comp-tabswrap::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 1px;
		z-index: 2;
		width: 34px;
		pointer-events: none;
		opacity: 0;
		transition: opacity 0.2s ease;
	}
	.tn-cfg .tn-comp-tabswrap::before { left: 0; background: linear-gradient(90deg, var(--tn-panel) 20%, rgba(17, 17, 20, 0)); }
	.tn-cfg .tn-comp-tabswrap::after { right: 0; background: linear-gradient(270deg, var(--tn-panel) 20%, rgba(17, 17, 20, 0)); }
	.tn-cfg .tn-comp-tabswrap.has-more-start::before,
	.tn-cfg .tn-comp-tabswrap.has-more-end::after { opacity: 1; }

	/* Mientras el Nivel 1 está bloqueado: solo su pestaña + aviso. */
	.tn-cfg.is-gated .tn-comp-tab:not(.tn-comp-tab--gate) { display: none; }
	.tn-cfg.is-gated .tn-comp-tabs__locked { display: inline-flex; }

	/* ---- Cabecera ‹ PIEZA · opción +precio › ---- */
	.tn-cfg .tn-comp-nav {
		gap: 8px;
		min-height: 56px;
		padding: 6px 10px;
		background: var(--tn-panel);
		transition: background 0.3s ease;
	}
	.tn-cfg .tn-comp-nav__arrow { width: 44px; height: 44px; }
	.tn-cfg .tn-comp-nav__opt { color: var(--tn-text); }
	.tn-cfg .tn-comp-nav__delta {
		display: inline;
		margin-left: 8px;
		color: var(--tn-orange-text);
		font-weight: 600;
		font-variant-numeric: tabular-nums;
	}
	.tn-cfg .tn-comp-nav.is-flash { background: rgba(255, 106, 0, 0.12); }

	/* ---- Opciones ---- */
	.tn-cfg .tn-component { padding: 4px 0 10px; border-bottom: 0; }
	.tn-cfg .tn-group { margin-bottom: 16px; }
	.tn-cfg .tn-group__title { margin: 0 0 10px; font-size: 11px; color: var(--tn-text-2); }
	.tn-cfg .tn-swatches {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
		gap: 12px 4px;
		justify-items: center;
		align-items: start;
	}
	.tn-cfg .tn-swatch { gap: 4px; width: 100%; min-height: 52px; padding: 2px 0; }
	.tn-cfg .tn-swatch__thumb { width: 50px; height: 50px; flex: 0 0 auto; }
	.tn-cfg .tn-swatch__check { width: 18px; height: 18px; }
	/* El nombre va en la cabecera al tocar (y en el aria-label); el suplemento
	   de precio se ve siempre bajo cada círculo. */
	.tn-cfg .tn-swatch__name { display: none; }
	.tn-cfg .tn-swatch__delta { display: block; font-size: 10.5px; line-height: 1.1; }
	.tn-cfg .tn-swatch__badge { font-size: 9px; }

	/* ---- Nivel 1 ---- */
	.tn-cfg .tn-component--gate { padding: 8px 0 6px; }
	.tn-cfg .tn-gate__head { margin-bottom: 12px; }
	.tn-cfg .tn-gate__step { margin-bottom: 8px; }
	.tn-cfg .tn-gate__title { font-size: 21px; }
	.tn-cfg .tn-gate__sub { font-size: 13.5px; }
	.tn-cfg .tn-gate__cards { gap: 10px; }
	.tn-cfg .tn-gate-card { gap: 12px; padding: 14px 40px 14px 14px; border-radius: var(--tn-r-sm); }
	.tn-cfg .tn-gate-card__icon { width: 40px; height: 40px; }
	.tn-cfg .tn-gate-card__check { top: 14px; right: 14px; }

	/* ---- Personalizar / regalo: objetivos táctiles y sin zoom de iOS ---- */
	.tn-cfg input[type="text"],
	.tn-cfg input[type="date"],
	.tn-cfg input[type="email"],
	.tn-cfg input[type="number"],
	.tn-cfg input[type="tel"],
	.tn-cfg select,
	.tn-cfg textarea { font-size: 16px !important; }
	.tn-cfg .tn-perso-tab { min-height: 44px; }
	.tn-cfg .tn-perso-tabpanel.is-active { padding: 14px; }
	.tn-cfg .tn-perso-list__del { width: 40px; height: 40px; margin: -8px -8px -8px 0; }
	.tn-cfg .tn-perso-editor { padding: 14px; }
	.tn-cfg .tn-perso-editor__del,
	.tn-cfg .tn-perso-fd__clear { min-height: 44px; padding: 0 4px; }
	.tn-cfg .tn-gift__toggle { min-height: 44px; }
	.tn-cfg .tn-gift__toggle input,
	.tn-cfg .tn-gift__row.tn-gift__check input { width: 20px; height: 20px; }

	/* Avisos y mando de colocación: ANCLADOS al configurador (que ocupa la
	   pantalla), justo encima de la barra de compra. Con position: fixed algunos
	   temas (p. ej. un contenedor con transform para animar la entrada) los
	   descolocaban; así no tapan el mando ni la barra. */
	/* Arriba, sobre el preview (zona libre encima del mando): así no tapa las
	   opciones ni la barra de compra. */
	.tn-cfg .tn-toast {
		position: absolute;
		top: 10px;
		bottom: auto;
	}
	/* Mando de colocación (Personalizar, con un elemento seleccionado): ocupa el
	   sitio de la tira de piezas + cabecera, que no hacen falta mientras se
	   coloca; así no tapa ni el mando ni el panel de texto/sticker. */
	.tn-cfg .tn-perso-pad {
		position: absolute;
		top: var(--tn-stage-h);
		bottom: auto;
		left: 0;
		right: 0;
		z-index: 46;
		justify-content: center;
		min-height: 130px;
		max-width: none;
		transform: none;
		border-radius: 0;
		border-width: 0 0 1px;
		background: var(--tn-panel);
		box-shadow: none;
	}
	.tn-cfg .tn-perso-pad .tn-perso-pad__done {
		width: auto;
		padding: 0 14px;
		font-family: var(--tn-font-body);
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--tn-ink);
		background: var(--tn-orange);
		border-color: var(--tn-orange);
		touch-action: manipulation;
	}
	.tn-cfg .tn-toast {
		max-width: calc(100% - 24px);
		width: max-content;
		padding: 10px 14px;
		font-size: 13.5px;
	}

	/* ---- Botones flotantes del tema / plugins ----
	   Con el configurador en pantalla (clase que pone el JS) se ocultan:
	   WhatsApp, reservar cita (tn-appointments) y "Envía tu mando" del tema
	   antiguo, para que no tapen la barra de compra. */
	body.tn-cfg-mobile-active .mbar,
	body.tn-cfg-mobile-active .tn-whatsapp,
	body.tn-cfg-mobile-active #tn-whatsapp,
	body.tn-cfg-mobile-active .tn-send-btn,
	body.tn-cfg-mobile-active #tn-send-btn,
	body.tn-cfg-mobile-active #tn-booking-widget,
	body.tn-cfg-mobile-active .tn-widget,
	body.tn-cfg-mobile-active .joinchat,
	body.tn-cfg-mobile-active #ht-ctc-chat {
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
		transition: opacity 0.2s ease, visibility 0s linear 0.2s !important;
	}
}

/* Tablet en vertical: un poco más de preview y piezas algo mayores. */
@media (min-width: 600px) and (max-width: 1023px) and (min-height: 540px) {
	.tn-cfg { --tn-stage-h: clamp(260px, 40vh, 520px); }
	@supports (height: 100svh) {
		.tn-cfg { --tn-stage-h: clamp(260px, 40svh, 520px); }
	}
	.tn-cfg .tn-comp-tab { flex-basis: 76px; }
	.tn-cfg .tn-comp-tab__icon,
	.tn-cfg .tn-comp-tab__lock { max-width: 60px; }
	.tn-cfg .tn-cfg__scroll { padding: 14px 20px 20px; }
	.tn-cfg .tn-swatches { grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); }
	.tn-cfg .tn-swatch__thumb { width: 54px; height: 54px; }
}

/* Móvil en horizontal (poco alto): preview a la izquierda, panel a la derecha,
   todo más compacto para que quepa entre la cabecera y la barra del tema. */
@media (max-width: 1023px) and (max-height: 539px) {
	.tn-cfg {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		grid-template-rows: minmax(0, 1fr);
		min-height: 220px;
	}
	.tn-cfg .tn-cfg__stagewrap { height: 100%; }
	.tn-cfg .tn-stage {
		--tn-box-pad-t: 6px;
		--tn-box-pad-b: 52px;
		height: 100%;
		border-bottom: 0;
		border-right: 1px solid var(--tn-line);
	}
	.tn-cfg .tn-info-card { inset: 6px 6px 52px; }
	.tn-cfg .tn-comp-tabs { padding-top: 2px; }
	.tn-cfg .tn-comp-tab { flex-basis: 52px; min-height: 48px; padding: 2px 3px 5px; }
	.tn-cfg .tn-comp-tab__icon,
	.tn-cfg .tn-comp-tab__lock { max-width: 42px; }
	.tn-cfg .tn-comp-tab__lock { top: 2px; }
	.tn-cfg .tn-comp-nav { min-height: 46px; padding: 1px 8px; }
	.tn-cfg .tn-comp-nav__arrow { width: 40px; height: 40px; }
	.tn-cfg .tn-cfg__scroll { padding: 8px 12px 10px; }
	.tn-cfg .tn-bar { padding-top: 4px; padding-bottom: max(4px, env(safe-area-inset-bottom, 0px)); }
	.tn-cfg .tn-price__amount { font-size: 20px; }
	.tn-cfg .tn-addtocart,
	.tn-cfg .tn-bar__summary { min-height: 44px; }
	.tn-cfg .tn-toast { bottom: 64px; }
}

/* Móviles estrechos. */
@media (max-width: 400px) {
	.tn-cfg .tn-price__amount { font-size: 21px; }
	.tn-cfg .tn-bar { gap: 8px; padding-left: 10px; padding-right: 10px; }
	.tn-cfg .tn-addtocart { letter-spacing: 0.03em; padding: 0 14px 0 12px; }
	.tn-cfg .tn-addtocart__text { font-size: 12.5px; }
	.tn-cfg .tn-addtocart__icon { display: none; }
	.tn-cfg .tn-swatches { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }
}

/* Táctil: sin estados :hover "pegados" tras tocar. */
@media (max-width: 1023px) and (hover: none) {
	.tn-cfg .tn-stage__reset:hover {
		background: rgba(8, 8, 10, 0.82);
		color: var(--tn-text);
		box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
	}
	.tn-cfg .tn-stage__reset:hover svg { transform: none; }
	.tn-cfg .tn-addtocart:hover { transform: none; background: var(--tn-orange); }
	.tn-cfg .tn-addtocart:hover::after { transform: translateX(-120%); }
	.tn-cfg .tn-addtocart.is-disabled:hover { background: rgba(255, 255, 255, 0.1); }
	.tn-cfg .tn-swatch:hover .tn-swatch__thumb { transform: none; border-color: var(--tn-line-strong); }
	.tn-cfg .tn-swatch.is-selected:hover .tn-swatch__thumb { border-color: var(--tn-orange); }
	.tn-cfg .tn-comp-nav__arrow:not(:disabled):hover {
		color: var(--tn-text);
		border-color: var(--tn-line);
		background: rgba(255, 255, 255, 0.07);
	}
	.tn-cfg .tn-comp-tab:hover .tn-comp-tab__icon { background: var(--tn-elev-2); }
	.tn-cfg .tn-comp-tab.is-active:hover .tn-comp-tab__icon { background: var(--tn-elev); }
}

@media (prefers-reduced-motion: reduce) {
	.tn-cfg *,
	.tn-cfg *::before,
	.tn-cfg *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* 1.18.3 — Iconos SVG de línea (en lugar de glifos ▲ ◀ ✕ ⚠) */
.tn-cfg .tn-cfg-ico { display: block; width: 16px; height: 16px; flex-shrink: 0; }
.tn-cfg .tn-perso-list__del { display: inline-flex; align-items: center; justify-content: center; }
.tn-cfg .tn-perso-list__del .tn-cfg-ico { width: 15px; height: 15px; }
.tn-cfg .tn-perso-list__warn { display: inline-flex; vertical-align: -2px; margin-left: 4px; color: #F5B83D; }
.tn-cfg .tn-perso-list__warn .tn-cfg-ico { width: 14px; height: 14px; }

/* =========================================================================
   1.19.0 — Fecha estimada · Sorpréndeme · Guárdalo por email
   ========================================================================= */

/* Fecha estimada bajo el precio (una línea discreta, con icono de envío). */
.tn-cfg .tn-eta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	font-family: var(--tn-font-body);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--tn-text-2);
	white-space: normal;
	line-height: 1.3;
	/* Línea propia bajo el precio y el botón (la barra hace salto de línea). */
	flex: 1 0 100%;
	order: 3;
}
.tn-cfg .tn-eta svg { flex: 0 0 auto; width: 15px; height: 15px; color: var(--tn-good); }
.tn-cfg .tn-eta[hidden] { display: none; }

/* Sorpréndeme: el dado gira al tirar. */
.tn-cfg .tn-action-btn--surprise svg,
.tn-cfg .tn-stage__tool--surprise svg { transform-origin: 50% 50%; }
.tn-cfg .is-rolling svg { animation: tn-roll 520ms cubic-bezier(.2, .8, .2, 1); }
@keyframes tn-roll {
	0% { transform: rotate(0) scale(1); }
	45% { transform: rotate(200deg) scale(1.18); }
	100% { transform: rotate(360deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.tn-cfg .is-rolling svg { animation: none; }
}

/* Ventana «Guárdalo por email». */
.tn-cfg .tn-save {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(4, 4, 6, 0.72);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	animation: tn-save-in 180ms ease-out;
}
.tn-cfg .tn-save[hidden] { display: none; }
@keyframes tn-save-in { from { opacity: 0; } to { opacity: 1; } }
.tn-cfg .tn-save__box {
	position: relative;
	width: 100%;
	max-width: 420px;
	margin: 0;
	padding: 28px 26px 24px;
	background: var(--tn-panel);
	border: 1px solid var(--tn-line-strong);
	border-top: 3px solid var(--tn-orange);
	border-radius: var(--tn-r-md, 16px);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
	color: var(--tn-text);
	font-family: var(--tn-font-body);
	text-align: left;
}
.tn-cfg .tn-save__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: transparent;
	color: var(--tn-dim);
	border: 1px solid var(--tn-line);
	border-radius: 50%;
	cursor: pointer;
}
.tn-cfg .tn-save__close:hover { color: var(--tn-text); border-color: var(--tn-line-strong); }
.tn-cfg .tn-save__close svg { width: 16px; height: 16px; }
.tn-cfg .tn-save__eyebrow {
	margin: 0 0 6px;
	font-family: var(--tn-font-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tn-orange-text);
}
.tn-cfg .tn-save__title {
	margin: 0 0 8px;
	font-family: var(--tn-font-display);
	font-weight: 800;
	font-stretch: 80%;
	font-size: 28px;
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--tn-text);
}
.tn-cfg .tn-save__text { margin: 0 0 18px; font-size: 14px; line-height: 1.55; color: var(--tn-text-2); }
.tn-cfg .tn-save__field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.tn-cfg .tn-save__field span { font-size: 12px; font-weight: 600; color: var(--tn-dim); }
.tn-cfg .tn-save__field input {
	height: 48px;
	padding: 0 14px;
	background: var(--tn-bg);
	color: var(--tn-text);
	border: 1px solid var(--tn-line-strong);
	border-radius: var(--tn-r-sm);
	font-size: 16px;
}
.tn-cfg .tn-save__field input:focus { outline: 2px solid var(--tn-focus); outline-offset: 1px; border-color: transparent; }
.tn-cfg .tn-save__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tn-cfg .tn-save__check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 12px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--tn-text-2);
	cursor: pointer;
}
.tn-cfg .tn-save__check input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--tn-orange); flex: 0 0 auto; }
.tn-cfg .tn-save__legal { margin: 0 0 14px; font-size: 12px; line-height: 1.5; color: var(--tn-dim); }
.tn-cfg .tn-save__legal a { color: var(--tn-orange-text); }
.tn-cfg .tn-save__note { margin: 0 0 12px; font-size: 13px; color: var(--tn-bad); }
.tn-cfg .tn-save__note[hidden] { display: none; }
.tn-cfg .tn-save__submit {
	width: 100%;
	height: 52px;
	background: var(--tn-orange);
	color: var(--tn-ink);
	border: 0;
	border-radius: var(--tn-r-sm);
	font-family: var(--tn-font-body);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s ease;
}
.tn-cfg .tn-save__submit:hover { background: var(--tn-orange-2); }
.tn-cfg .tn-save__submit:disabled { opacity: 0.6; cursor: wait; }

/* Móvil/tablet: los 4 botones del preview en columna a la derecha (no tapan el
   botón de girar del centro). */
@media (max-width: 1023px) {
	.tn-cfg .tn-stage__tools { flex-direction: column; }

	/* La fecha va en una franja fina justo encima de la barra de compra (en la
	   barra no cabe sin aplastar el botón «Añadir al carrito»). */
	.tn-cfg .tn-eta {
		flex: none;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		max-width: none;
		margin: 0;
		padding: 6px 14px;
		font-size: 11.5px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		background: rgba(17, 17, 20, 0.96);
		border-top: 1px solid var(--tn-line);
	}
	.tn-cfg .tn-eta span { overflow: hidden; text-overflow: ellipsis; }
	.tn-cfg .tn-cfg__scroll { padding-bottom: 46px; }
}

/* El botón de enviar no se deja pisar por los estilos de botón del tema. */
.tn-cfg .tn-save .tn-save__box .tn-save__submit {
	background: var(--tn-orange);
	color: var(--tn-ink);
	border: 0;
	text-align: center;
	box-shadow: none;
}
.tn-cfg .tn-save .tn-save__box .tn-save__submit:hover { background: var(--tn-orange-2); color: var(--tn-ink); }
.tn-cfg .tn-save .tn-save__box .tn-save__close { background: transparent; box-shadow: none; }
.tn-cfg .tn-save .tn-save__box .tn-save__title { margin: 0 0 8px; padding: 0; }
.tn-cfg .tn-save .tn-save__box p { margin-top: 0; }