/* FrikiCoins — botón flotante y panel. Tipos del tema: Bebas Neue + Inter. */
.ltw-fcw {
	--fcw-brand: #510395;
	--fcw-brand-2: #7a1fd1;
	--fcw-deep: #2a0150;
	--fcw-soft: #f6effd;
	--fcw-line: #eadcf7;
	--fcw-text: #232323;
	--fcw-muted: #6d6578;
	--fcw-gold: #f7c62f;
	--fcw-gold-deep: #b98a00;
	--fcw-ok: #1d7a3a;
	--fcw-error: #b3261e;
	--fcw-radius: 20px;
	--fcw-head-font: "Bebas Neue", Impact, sans-serif;
	--fcw-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	position: fixed;
	bottom: 20px;
	z-index: 9990;
	font-family: var(--fcw-font);
	color: var(--fcw-text);
	-webkit-font-smoothing: antialiased;
}

.ltw-fcw--left { left: 20px; }
.ltw-fcw--right { right: 20px; }

.ltw-fcw *,
.ltw-fcw *::before,
.ltw-fcw *::after {
	box-sizing: border-box;
}

.ltw-fcw [hidden] {
	display: none !important;
}

.ltw-fcw .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.ltw-fcw-coin {
	display: block;
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
}

.ltw-fcw-ico {
	display: block;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ------------------------------------------------------------------ */
/* Lanzador                                                            */
/* ------------------------------------------------------------------ */

.ltw-fcw__launcher {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 58px;
	margin: 0;
	padding: 6px 22px 6px 7px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--fcw-brand-2), var(--fcw-brand) 55%, var(--fcw-deep));
	box-shadow: 0 10px 30px rgba(10, 0, 25, .5), 0 3px 8px rgba(10, 0, 25, .3), inset 0 1px 0 rgba(255, 255, 255, .22);
	color: #fff;
	font: 700 15px/1 var(--fcw-font);
	letter-spacing: .01em;
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease;
}

.ltw-fcw__launcher:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 36px rgba(10, 0, 25, .55), 0 4px 10px rgba(10, 0, 25, .32), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.ltw-fcw__launcher:focus-visible {
	outline: 3px solid var(--fcw-gold);
	outline-offset: 3px;
}

.ltw-fcw__launcher-coin {
	font-size: 44px;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25));
	animation: ltw-fcw-spin 6s ease-in-out infinite;
}

.ltw-fcw__launcher-x {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
}

.ltw-fcw.is-open .ltw-fcw__launcher-coin,
.ltw-fcw.is-open .ltw-fcw__launcher-label { display: none; }
.ltw-fcw.is-open .ltw-fcw__launcher-x { display: inline-flex; background: none; }

/* Abierto: el botón se queda en un círculo con la X */
.ltw-fcw.is-open .ltw-fcw__launcher {
	justify-content: center;
	width: 58px;
	padding: 0;
}

/* Punto dorado cuando hay recompensas canjeables */
.ltw-fcw.has-available .ltw-fcw__launcher::after {
	content: "";
	position: absolute;
	top: 4px;
	left: 40px;
	width: 13px;
	height: 13px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #22c55e;
	box-shadow: 0 0 0 0 rgba(34, 197, 94, .6);
	animation: ltw-fcw-pulse 2s infinite;
}

.ltw-fcw.is-open.has-available .ltw-fcw__launcher::after { display: none; }

@keyframes ltw-fcw-spin {
	0%, 80%, 100% { transform: rotateY(0); }
	88% { transform: rotateY(180deg); }
	96% { transform: rotateY(360deg); }
}

@keyframes ltw-fcw-pulse {
	0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); }
	70% { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); }
	100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* ------------------------------------------------------------------ */
/* Panel                                                               */
/* ------------------------------------------------------------------ */

.ltw-fcw__panel {
	position: absolute;
	bottom: 72px;
	display: flex;
	flex-direction: column;
	width: 390px;
	/* Altura fija: no salta al cambiar de vista (p. ej. movimientos vacíos). */
	height: min(660px, calc(100vh - 110px));
	height: min(660px, calc(100dvh - 110px));
	overflow: hidden;
	border-radius: var(--fcw-radius);
	background: #fbf8fe;
	/* Sin borde: el contraste con las zonas moradas de la web lo da una
	 * sombra oscura y amplia que hace de halo alrededor del panel. */
	box-shadow: 0 0 0 1px rgba(10, 0, 25, .12), 0 30px 80px rgba(10, 0, 25, .55), 0 8px 24px rgba(10, 0, 25, .35);
	animation: ltw-fcw-in .22s cubic-bezier(.2, .9, .3, 1.2);
}

.ltw-fcw--left .ltw-fcw__panel { left: 0; transform-origin: bottom left; }
.ltw-fcw--right .ltw-fcw__panel { right: 0; transform-origin: bottom right; }

/* Sin animar la opacidad: si el navegador congela la animación (pestaña en
 * segundo plano) el panel quedaría translúcido encima de la página. */
@keyframes ltw-fcw-in {
	from { transform: translateY(14px) scale(.97); }
	to { transform: none; }
}

.ltw-fcw.is-busy .ltw-fcw__body {
	opacity: .55;
	pointer-events: none;
	transition: opacity .15s;
}

/* Cabecera */
.ltw-fcw__head {
	position: relative;
	flex: 0 0 auto;
	padding: 22px 24px 20px;
	overflow: hidden;
	border-bottom: 3px solid var(--fcw-gold);
	/* Un único degradado diagonal de marca y un brillo suave tras las monedas. */
	background:
		radial-gradient(60% 80% at 85% 25%, rgba(255, 255, 255, .14), transparent 70%),
		linear-gradient(135deg, #6a12c4 0%, var(--fcw-brand) 45%, #3a016f 100%);
	color: #fff;
	transition: padding .2s ease;
}

.ltw-fcw__kicker {
	margin: 0 0 2px;
	color: var(--fcw-gold);
	font: 700 11px/1.3 var(--fcw-font);
	letter-spacing: .14em;
	text-transform: uppercase;
}

.ltw-fcw__title {
	position: relative;
	margin: 0 !important;
	color: #fff !important;
	font: 400 44px/0.95 var(--fcw-head-font) !important;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.ltw-fcw__deco {
	position: absolute;
	pointer-events: none;
	filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .3));
}

.ltw-fcw__deco--1 { top: 18px; right: 58px; font-size: 64px; transform: rotate(-18deg); }
.ltw-fcw__deco--2 { top: 70px; right: 14px; font-size: 42px; transform: rotate(16deg); opacity: .9; }
.ltw-fcw__deco--3 { bottom: 10px; right: 112px; font-size: 30px; transform: rotate(32deg); opacity: .6; }

.ltw-fcw__back,
.ltw-fcw__close {
	position: absolute;
	top: 14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	color: #fff;
	cursor: pointer;
	transition: background .15s;
}

.ltw-fcw__back:hover,
.ltw-fcw__close:hover { background: rgba(255, 255, 255, .28); }
.ltw-fcw__close { right: 14px; }

.ltw-fcw button:focus { outline: none; }
.ltw-fcw button:focus-visible,
.ltw-fcw a:focus-visible {
	outline: 2px solid var(--fcw-gold);
	outline-offset: 2px;
}
.ltw-fcw__back { left: 14px; }

/* En subvistas la cabecera se compacta */
.ltw-fcw.is-subview .ltw-fcw__head { padding: 16px 24px 16px 60px; }
.ltw-fcw.is-subview .ltw-fcw__kicker,
.ltw-fcw.is-subview .ltw-fcw__deco { display: none; }
.ltw-fcw.is-subview .ltw-fcw__title { font-size: 30px !important; line-height: 1 !important; }

/* Saldo en la cabecera compacta */
.ltw-fcw__head-balance {
	position: absolute;
	top: 50%;
	right: 58px;
	display: none;
	align-items: center;
	gap: 6px;
	padding: 4px 10px 4px 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	font: 700 13px/1 var(--fcw-font);
	transform: translateY(-50%);
}

.ltw-fcw__head-balance .ltw-fcw-coin { font-size: 22px; }
.ltw-fcw.is-subview .ltw-fcw__head-balance:not(:empty) { display: inline-flex; }

/* Cuerpo */
.ltw-fcw__body {
	/* min-height: 0 es imprescindible: con el `auto` por defecto de flexbox
	 * el hijo no encoge por debajo de su contenido y nunca hace scroll. */
	flex: 1 1 0;
	min-height: 0;
	padding: 18px;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-y;
	scrollbar-width: thin;
	scrollbar-color: #c9a6ee transparent;
	font-size: 14px;
	line-height: 1.45;
}

.ltw-fcw__body p { margin: 0; }
.ltw-fcw__body small { display: block; color: var(--fcw-muted); font-size: 12.5px; }

.ltw-fcw__loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 140px;
	color: var(--fcw-muted);
}

.ltw-fcw__spinner {
	width: 20px;
	height: 20px;
	border: 2.5px solid var(--fcw-line);
	border-top-color: var(--fcw-brand);
	border-radius: 50%;
	animation: ltw-fcw-rot .8s linear infinite;
}

@keyframes ltw-fcw-rot { to { transform: rotate(360deg); } }

.ltw-fcw__body::-webkit-scrollbar { width: 6px; }
.ltw-fcw__body::-webkit-scrollbar-thumb { border-radius: 999px; background: #c9a6ee; }
.ltw-fcw__body::-webkit-scrollbar-track { background: transparent; }

/* Vistas cortas (movimientos vacíos, invitado…): contenido centrado en el alto fijo */
.ltw-fcw__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 70%;
	padding: 20px;
	color: var(--fcw-muted);
	text-align: center;
}

.ltw-fcw__empty .ltw-fcw-coin { font-size: 72px; opacity: .9; }
.ltw-fcw__empty .ltw-fcw__btn { flex: 0 0 auto; }

/* Saldo */
.ltw-fcw__balance,
.ltw-fcw__hero,
.ltw-fcw__card {
	position: relative;
	/* Sin margen negativo: el cuerpo tiene overflow y recortaba lo que
	 * se metía bajo la cabecera («¡Hola, …!» salía cortado). */
	margin: 0 0 16px;
	padding: 18px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(42, 1, 80, .12);
}

.ltw-fcw.is-subview .ltw-fcw__body > :first-child { margin-top: 0; }

.ltw-fcw__hello {
	margin-bottom: 8px !important;
	color: var(--fcw-muted);
	font-weight: 600;
}

.ltw-fcw__amount {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ltw-fcw__amount .ltw-fcw-coin { font-size: 46px; }
.ltw-fcw__amount small { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: 11px !important; }

.ltw-fcw__amount strong {
	display: block;
	color: var(--fcw-brand);
	font: 400 40px/1 var(--fcw-head-font);
	letter-spacing: .02em;
}

.ltw-fcw__pending {
	margin-top: 8px !important;
	color: var(--fcw-muted);
	font-size: 12.5px;
}

.ltw-fcw__progress {
	height: 8px;
	margin-top: 12px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--fcw-soft);
}

.ltw-fcw__progress > span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--fcw-gold), #ffa600);
	transition: width .4s ease;
}

.ltw-fcw__progress--sm { height: 5px; margin-top: 6px; }

.ltw-fcw__next {
	margin-top: 8px !important;
	font-size: 13px;
	font-weight: 600;
}

/* Invitado */
.ltw-fcw__hero h3,
.ltw-fcw__card h3 {
	margin: 0 0 6px !important;
	color: var(--fcw-text) !important;
	font: 400 24px/1.05 var(--fcw-head-font) !important;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.ltw-fcw__hero p { color: var(--fcw-muted); }

.ltw-fcw__card--closed {
	display: flex;
	gap: 12px;
	color: var(--fcw-muted);
}

.ltw-fcw__card--closed .ltw-fcw-ico { width: 28px; height: 28px; color: var(--fcw-brand); }

/* Botones */
.ltw-fcw__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
}

.ltw-fcw__btn {
	display: inline-flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 44px;
	margin: 0;
	padding: 10px 18px;
	/* Mismo lenguaje que los botones del tema (btnBase): Bebas en
	 * mayúsculas y radio de 8 px. */
	border: 1px solid var(--fcw-brand);
	border-radius: 8px;
	background: var(--fcw-brand);
	color: #fff !important;
	font: 400 17px/1 var(--fcw-head-font);
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none !important;
	cursor: pointer;
	transition: background .15s, transform .15s;
}

.ltw-fcw__btn:hover { background: #410674; border-color: #410674; }
.ltw-fcw__btn:active { transform: scale(.98); }
.ltw-fcw__btn .ltw-fcw-ico { width: 16px; height: 16px; }

.ltw-fcw__btn--ghost {
	background: transparent;
	color: var(--fcw-brand) !important;
}

.ltw-fcw__btn--ghost:hover { background: var(--fcw-soft); border-color: var(--fcw-brand); }

.ltw-fcw__btn--sm {
	flex: 0 0 auto;
	min-height: 36px;
	padding: 8px 16px;
	font-size: 15px;
}

.ltw-fcw__btn--wa { background: #1fa855; border-color: #1fa855; }
.ltw-fcw__btn--wa:hover { background: #168043; border-color: #168043; }

.ltw-fcw__link {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--fcw-brand);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

/* Menú */
.ltw-fcw__menu,
.ltw-fcw__earn,
.ltw-fcw__rewards,
.ltw-fcw__history,
.ltw-fcw__steps {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ltw-fcw__menu li + li { margin-top: 7px; }

.ltw-fcw__menu-item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 11px 14px;
	border: 1px solid var(--fcw-line);
	border-radius: 14px;
	background: #fff;
	color: var(--fcw-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s, transform .15s;
}

.ltw-fcw__menu-item:hover {
	border-color: var(--fcw-brand);
	box-shadow: 0 6px 16px rgba(81, 3, 149, .1);
	transform: translateY(-1px);
}

.ltw-fcw__menu-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: var(--fcw-soft);
	color: var(--fcw-brand);
}

/* El mismo punto verde del botón flotante, dentro del panel, en la entrada
 * que lleva a las recompensas canjeables. */
.ltw-fcw__menu-icon { position: relative; }
.ltw-fcw__dot {
	position: absolute;
	top: -4px;
	right: -4px;
	width: 13px;
	height: 13px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #22c55e;
	animation: ltw-fcw-pulse 2s infinite;
}

.ltw-fcw__menu-text { flex: 1 1 auto; min-width: 0; }
.ltw-fcw__menu-text strong { display: block; font-size: 14.5px; }
.ltw-fcw__chev { width: 18px; height: 18px; color: var(--fcw-muted); }

.ltw-fcw__banner {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	padding: 10px 12px;
	border-radius: 12px;
	background: #fff7d6;
	color: #5c3d00;
	font-size: 13px;
	font-weight: 600;
}

.ltw-fcw__banner span { flex: 1 1 auto; }
.ltw-fcw__banner a { color: var(--fcw-brand); white-space: nowrap; }

.ltw-fcw__home {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

.ltw-fcw__home > * { flex-shrink: 0; }

.ltw-fcw__foot {
	margin-top: auto !important;
	padding-top: 12px;
	text-align: center;
}

.ltw-fcw__foot a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--fcw-brand);
	font-weight: 600;
}

.ltw-fcw__foot .ltw-fcw-ico { width: 16px; height: 16px; }

/* Títulos de sección */
.ltw-fcw__section-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px !important;
	color: var(--fcw-text) !important;
	font: 400 26px/1 var(--fcw-head-font) !important;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.ltw-fcw__lead { margin-bottom: 14px !important; color: var(--fcw-muted); }
.ltw-fcw__hint { margin-top: 14px !important; color: var(--fcw-muted); font-size: 12.5px; }
.ltw-fcw__muted { display: inline-flex; align-items: center; gap: 4px; color: var(--fcw-muted); font-size: 12.5px; }
.ltw-fcw__muted .ltw-fcw-ico { width: 15px; height: 15px; }

/* Gana */
.ltw-fcw__earn-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--fcw-line);
	border-radius: 14px;
	background: #fff;
}

.ltw-fcw__earn-item + .ltw-fcw__earn-item { margin-top: 8px; }
.ltw-fcw__earn-text { flex: 1 1 140px; min-width: 0; }
.ltw-fcw__earn-text strong { display: block; }
.ltw-fcw__earn-text small { color: var(--fcw-brand) !important; font-weight: 700; }
.ltw-fcw__earn-action { display: flex; gap: 6px; margin-left: auto; }
.ltw-fcw__earn-item.is-done { background: #f6fbf7; border-color: #cfe8d6; }
.ltw-fcw__earn-item.is-done .ltw-fcw__menu-icon { background: #e3f3e7; color: var(--fcw-ok); }

.ltw-fcw__done {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--fcw-ok);
	font-size: 12.5px;
	font-weight: 700;
}

.ltw-fcw__done .ltw-fcw-ico { width: 16px; height: 16px; stroke-width: 2.4; }

.ltw-fcw__inline {
	display: flex;
	flex: 1 1 100%;
	flex-wrap: wrap;
	gap: 8px;
}

.ltw-fcw__inline input {
	flex: 1 1 150px;
	min-height: 36px;
	padding: 6px 10px;
	border: 1px solid var(--fcw-line);
	border-radius: 10px;
	font: inherit;
}

.ltw-fcw__inline small { flex: 1 1 100%; }

/* Recompensas */
.ltw-fcw__reward {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 12px;
	border: 1px solid var(--fcw-line);
	border-radius: 16px;
	background: #fff;
	transition: border-color .15s;
}

.ltw-fcw__reward + .ltw-fcw__reward { margin-top: 10px; }
.ltw-fcw__reward.is-available:hover { border-color: var(--fcw-brand); }
.ltw-fcw__reward.is-in-cart { border: 2px solid var(--fcw-brand); background: var(--fcw-soft); }

.ltw-fcw__reward-media {
	position: relative;
	display: flex;
	flex: 0 0 76px;
	align-items: center;
	justify-content: center;
	height: 76px;
	overflow: hidden;
	border-radius: 12px;
	background: linear-gradient(145deg, var(--fcw-soft), #ead9fb);
}

.ltw-fcw__reward-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ltw-fcw__reward-ico { color: var(--fcw-brand); }
.ltw-fcw__reward-ico .ltw-fcw-ico { width: 34px; height: 34px; stroke-width: 1.5; }

.ltw-fcw__reward-media .ltw-fc-art { width: 112%; height: 112%; flex: 0 0 auto; }

.ltw-fcw__reward.is-locked .ltw-fcw__reward-media img,
.ltw-fcw__reward.is-locked .ltw-fcw__reward-media .ltw-fc-art,
.ltw-fcw__reward.is-locked .ltw-fcw__reward-ico { filter: grayscale(1); opacity: .45; }

.ltw-fcw__reward-lock {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(35, 35, 35, .82);
	color: #fff;
}

.ltw-fcw__reward-lock .ltw-fcw-ico { width: 16px; height: 16px; }

.ltw-fcw__reward-body {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ltw-fcw__reward-body > strong { font-size: 14.5px; line-height: 1.25; }

/* Coste: la misma pastilla de FrikiCoins de la web (.ltw-fc-pill), en pequeño */
.ltw-fcw__reward-cost {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 5px;
	margin-top: 3px;
	padding: 2px 10px 2px 2px;
	border: 1px solid #e4d6f2;
	border-radius: 999px;
	background: #f8f1fe;
	color: var(--fcw-brand);
	font: 400 17px/1.2 var(--fcw-head-font);
	letter-spacing: .02em;
}

.ltw-fcw__reward-cost .ltw-fcw-coin { font-size: 20px; }
.ltw-fcw__reward.is-locked .ltw-fcw__reward-body > strong,
.ltw-fcw__reward.is-locked .ltw-fcw__reward-cost { opacity: .7; }

.ltw-fcw__reward-foot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	margin-top: 6px;
}

.ltw-fcw__reward-foot:has(.ltw-fcw__done) { flex-direction: row; align-items: center; gap: 12px; }
.ltw-fcw__reward-foot .ltw-fcw__progress { width: 100%; }

.ltw-fcw__lockline {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--fcw-muted);
	font-size: 12.5px;
	font-weight: 600;
}

.ltw-fcw__lockline .ltw-fcw-ico { width: 14px; height: 14px; }

.ltw-fcw__redeem-form {
	flex: 1 1 100%;
	padding-top: 12px;
	border-top: 1px dashed var(--fcw-line);
}

.ltw-fcw__options {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	border: 0;
}

.ltw-fcw__options legend {
	margin-bottom: 6px;
	padding: 0;
	font-weight: 700;
}

.ltw-fcw__option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 10px;
	border: 1px solid var(--fcw-line);
	border-radius: 10px;
	cursor: pointer;
}

.ltw-fcw__option:has(input:checked) { border-color: var(--fcw-brand); background: var(--fcw-soft); }
.ltw-fcw__option.is-disabled { opacity: .5; cursor: not-allowed; }
.ltw-fcw__option input { accent-color: var(--fcw-brand); }
.ltw-fcw__option img { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; }
.ltw-fcw__option span { font-size: 13px; }

.ltw-fcw__field { display: block; margin-top: 10px; }
.ltw-fcw__field span { display: block; margin-bottom: 4px; font-weight: 700; }

.ltw-fcw__field textarea {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--fcw-line);
	border-radius: 10px;
	font: inherit;
	resize: vertical;
}

/* Referidos */
.ltw-fcw__steps { margin-bottom: 16px; }

.ltw-fcw__steps li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
	font-weight: 600;
}

.ltw-fcw__steps li span {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--fcw-gold);
	color: #4a3200;
	font: 400 18px/1 var(--fcw-head-font);
}

.ltw-fcw__copy {
	display: flex;
	gap: 6px;
	padding: 5px 5px 5px 12px;
	border: 1px solid var(--fcw-line);
	border-radius: 10px;
	background: #fff;
}

.ltw-fcw__copy input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0 !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	color: var(--fcw-text);
	font: inherit;
	font-size: 13px;
	outline: none;
}

/* Historial */
.ltw-fcw__history li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--fcw-line);
}

.ltw-fcw__history li > div { min-width: 0; }
.ltw-fcw__history strong { display: block; font-size: 13.5px; }
.ltw-fcw__history small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ltw-fcw__points {
	flex: 0 0 auto;
	color: var(--fcw-ok);
	font-weight: 800;
	text-align: right;
}

.ltw-fcw__points.is-negative { color: #a1261d; }
.ltw-fcw__history li.is-redeemed .ltw-fcw__points { color: var(--fcw-brand); }
.ltw-fcw__history li.is-pending .ltw-fcw__points { color: #a26b00; }
.ltw-fcw__history li.is-cancelled .ltw-fcw__points { color: var(--fcw-muted); }
.ltw-fcw__points small { display: block; margin-top: 2px; color: var(--fcw-muted); font-size: 11.5px; font-weight: 600; text-decoration: none; }
/* La etiqueta del resultado (Añadidos, Canjeados…) con el color del importe */
.ltw-fcw__history li.is-added .ltw-fcw__points small { color: var(--fcw-ok); }
.ltw-fcw__history li.is-redeemed .ltw-fcw__points small { color: var(--fcw-brand); }
.ltw-fcw__history li.is-deducted .ltw-fcw__points small { color: #a1261d; }
.ltw-fcw__history li.is-pending .ltw-fcw__points small { color: #a26b00; }
.ltw-fcw__history li.is-returned .ltw-fcw__points small { color: #1c4fa8; }

/* Aviso */
.ltw-fcw__toast {
	position: absolute;
	right: 16px;
	bottom: 16px;
	left: 16px;
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--fcw-text);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	animation: ltw-fcw-in .2s ease;
}

.ltw-fcw__toast.is-error { background: var(--fcw-error); }

/* ------------------------------------------------------------------ */
/* Móvil: hoja inferior                                                */
/* ------------------------------------------------------------------ */

/* Pantallas bajas (portátiles de 720-800 px con barras del navegador): se
 * compacta la portada del panel para que quepa entera sin un mini scroll. */
@media (min-width: 601px) and (max-height: 820px) {
	.ltw-fcw__head { padding: 18px 24px 16px; }
	.ltw-fcw__deco--1 { top: 12px; font-size: 56px; }
	.ltw-fcw__deco--2 { top: 58px; font-size: 36px; }
	.ltw-fcw__deco--3 { bottom: 6px; font-size: 26px; }
	.ltw-fcw__body { padding: 14px 18px; }
	.ltw-fcw__balance,
	.ltw-fcw__hero,
	.ltw-fcw__card { margin-bottom: 12px; padding: 14px 18px; }
	.ltw-fcw__amount .ltw-fcw-coin { font-size: 40px; }
	.ltw-fcw__amount strong { font-size: 34px; }
	.ltw-fcw__menu li + li { margin-top: 6px; }
	.ltw-fcw__menu-item { padding: 9px 14px; }
	.ltw-fcw__foot { padding-top: 10px; }
}

@media (max-width: 600px) {
	.ltw-fcw { bottom: 14px; }
	.ltw-fcw--left { left: 14px; }
	.ltw-fcw--right { right: 14px; }

	.ltw-fcw__launcher {
		height: 52px;
		padding: 5px 16px 5px 6px;
		font-size: 14px;
	}

	.ltw-fcw__launcher-coin { font-size: 40px; }

	.ltw-fcw__panel {
		position: fixed;
		right: 0 !important;
		bottom: 0;
		left: 0 !important;
		width: auto;
		border-radius: var(--fcw-radius) var(--fcw-radius) 0 0;
		animation-name: ltw-fcw-sheet;
	}

	.ltw-fcw.is-open .ltw-fcw__launcher { visibility: hidden; }

	html.ltw-fcw-lock,
	html.ltw-fcw-lock body { overflow: hidden !important; }

	.ltw-fcw__panel {
		height: min(88vh, 720px);
		height: min(88dvh, 720px);
	}

	@keyframes ltw-fcw-sheet {
		from { transform: translateY(100%); }
		to { transform: none; }
	}
}

@media (prefers-reduced-motion: reduce) {
	.ltw-fcw *,
	.ltw-fcw *::before,
	.ltw-fcw *::after {
		animation: none !important;
		transition: none !important;
	}
}
