/**
 * Nekodex (F6): pantalla de escaneo (registro/resultado) y /nekodex/ del
 * fan. Mobile-first, reutiliza tokens y componentes (.fm-boton,
 * .fm-contenedor, .fm-chip, .fm-aviso) de main.css.
 */

.fm-nekodex-scan,
.fm-nekodex {
	padding: var(--fm-espacio-lg) 0;
}

.fm-nekodex-registro-form,
.fm-nekodex-registro-form label {
	display: block;
	margin-top: var(--fm-espacio-xs);
}

.fm-nekodex-registro-form input {
	width: 100%;
	padding: var(--fm-espacio-sm);
	border: 2px solid var(--fm-color-texto);
	border-radius: var(--fm-radio-borde);
	font-family: var(--fm-fuente-texto);
	font-size: 1rem;
	margin-bottom: var(--fm-espacio-sm);
}

.fm-nekodex-registro-form button {
	width: 100%;
}

.fm-nekodex-celebracion {
	text-align: center;
	padding: var(--fm-espacio-lg) var(--fm-espacio-sm);
	background: var(--fm-color-blanco);
	border-radius: var(--fm-radio-borde);
	animation: fm-nekodex-sticker-pop 0.3s ease-out;
}

/**
 * Bloque B, ronda 5: TODA visita registrada con PIN exitoso muestra esta
 * celebración — nunca una confirmación de texto plano. "Grande" cuando hay
 * premio nuevo (sticker/trofeo/cupón), "simple" cuando no (visita repetida
 * sin nada nuevo esta vez) pero siempre con su propia animación agradable.
 */
.fm-nekodex-celebracion--grande {
	border: 2px solid var(--fm-color-acento);
	box-shadow: 0 0 0 4px rgba(232, 106, 154, 0.2);
}

.fm-nekodex-celebracion--simple {
	padding: var(--fm-espacio-md) var(--fm-espacio-sm);
}

.fm-nekodex-celebracion-icono {
	display: block;
	font-size: 2.5rem;
	margin-bottom: var(--fm-espacio-xs);
}

.fm-nekodex-celebracion--simple .fm-nekodex-celebracion-icono {
	font-size: 1.8rem;
}

.fm-nekodex-cupones-ganados {
	list-style: none;
	padding: 0;
	margin: var(--fm-espacio-md) 0;
}

.fm-nekodex-cupones-ganados li {
	padding: var(--fm-espacio-sm);
	border: 2px dashed var(--fm-color-acento);
	border-radius: var(--fm-radio-borde);
	margin-bottom: var(--fm-espacio-xs);
}

.fm-nekodex-trofeos-ganados li {
	border-color: var(--fm-color-texto);
}

.fm-nekodex-progreso-caja {
	background: var(--fm-color-blanco);
	border-radius: var(--fm-radio-borde);
	padding: var(--fm-espacio-sm);
	margin-bottom: var(--fm-espacio-md);
}

.fm-nekodex-seccion {
	margin-bottom: var(--fm-espacio-lg);
}

/* Álbum: una "hoja de papel" donde los stickers van pegados directo, sin
   tarjeta por sticker. El arte se ve completo (contain, sin recorte). */
.fm-nekodex-album {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--fm-espacio-md) var(--fm-espacio-sm);
	list-style: none;
	margin: 0;
	padding: var(--fm-espacio-md) var(--fm-espacio-sm);
	background-color: #FFFDF8;
	background-image: radial-gradient(rgba(122, 110, 134, 0.16) 1px, transparent 1px);
	background-size: 18px 18px;
	border: 1px solid rgba(122, 110, 134, 0.22);
	border-radius: var(--fm-radio-borde);
	box-shadow: 0 2px 10px rgba(28, 20, 38, 0.08);
}

.fm-nekodex-sticker {
	text-align: center;
}

.fm-nekodex-sticker-icono {
	display: block;
	font-size: 3.5rem;
	line-height: 1;
	padding: var(--fm-espacio-sm) 0;
}

/* Arte del sticker: ocupa todo el ancho de su columna, con su proporción
   original (PNG con transparencia). */
.fm-nekodex-sticker-imagen {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	margin: 0 auto;
}

.fm-nekodex-sticker-icono--pendiente {
	opacity: 0.6;
}

/* El nombre ya no se ve en el álbum: va solo en el modal de detalle. */
.fm-nekodex-sticker-nombre {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.fm-nekodex-cupones-lista,
.fm-nekodex-tiendas-lista {
	list-style: none;
	padding: 0;
}

/* .fm-nekodex-cupon/.fm-chip--usado/.fm-chip--urgencia: retirados — "Mis
   cupones" ahora usa el mismo componente .fm-cupon-tarjeta que el resto del
   sitio (ver main.css y fm_theme_render_nekodex_cupon_usuario()/
   fm_theme_render_nekodex_cupon_publico_favorito() en functions.php). */

/* -------------------------------------------------------------------- */
/* Modal de cupón unificado (#fm-modal-cupon) y modal de desbloqueo      */
/* (#fm-modal-desbloquear) — Bloque B, ronda 3. Comparten estructura y   */
/* clases (.fm-modal-cupon__*) para no duplicar estilos.                 */
/*                                                                       */
/* BUG DE RAÍZ arreglado aquí: el modal viejo (.fm-nekodex-modal-pin)    */
/* tenía `display: flex` fijo, SIN ninguna regla `[hidden]` que lo        */
/* anulara — por eso se veía abierto de entrada y "Cancelar" (que solo    */
/* ponía el atributo `hidden`) no cambiaba nada visualmente. La regla de  */
/* abajo, con selector compuesto `.fm-modal-cupon[hidden]` (especificidad */
/* más alta que `.fm-modal-cupon` sola) + `!important`, es la que faltaba.*/
/* -------------------------------------------------------------------- */

.fm-modal-cupon,
.fm-modal-desbloquear {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--fm-espacio-sm);
	z-index: 100;
}

.fm-modal-cupon[hidden],
.fm-modal-desbloquear[hidden] {
	display: none !important;
}

.fm-modal-cupon__fondo {
	position: absolute;
	inset: 0;
	background: rgba(28, 20, 38, 0.7);
}

.fm-modal-cupon__caja {
	position: relative;
	background: var(--fm-color-blanco);
	border-radius: var(--fm-radio-borde);
	padding: var(--fm-espacio-lg);
	max-width: 360px;
	width: 100%;
	text-align: center;
	animation: fm-modal-cupon-aparecer 0.15s ease-out;
}

@keyframes fm-modal-cupon-aparecer {
	from {
		opacity: 0;
		transform: translateY(8px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.fm-modal-cupon__cerrar {
	position: absolute;
	top: var(--fm-espacio-xs);
	right: var(--fm-espacio-xs);
	background: none;
	border: none;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	padding: var(--fm-espacio-xs);
	color: var(--fm-color-texto);
}

.fm-modal-cupon__negocio {
	margin-bottom: var(--fm-espacio-xs);
}

/**
 * Imagen del cupón en el modal + tratamiento distinto exclusivo/público
 * (Bloque B, mismo criterio que las tarjetas y "Mis cupones").
 */
.fm-modal-cupon__imagen {
	display: block;
	width: 72px;
	height: 72px;
	object-fit: cover;
	margin: 0 auto var(--fm-espacio-sm);
	border: 2px solid var(--fm-color-texto);
	border-radius: 10px;
}

.fm-modal-cupon__imagen[hidden] {
	display: none;
}

.fm-modal-cupon--exclusivo .fm-modal-cupon__caja {
	border: 2px solid var(--fm-color-acento);
	box-shadow: 0 0 0 4px rgba(232, 106, 154, 0.25);
}

.fm-modal-cupon--exclusivo .fm-modal-cupon__imagen {
	border-color: var(--fm-color-acento);
}

#fm-modal-cupon-pin,
#fm-modal-desbloquear-pin {
	font-size: 2rem;
	text-align: center;
	letter-spacing: 0.5em;
	width: 100%;
	padding: var(--fm-espacio-sm);
	border: 2px solid var(--fm-color-texto);
	border-radius: var(--fm-radio-borde);
	margin: var(--fm-espacio-sm) 0;
}

.fm-modal-cupon__mensaje {
	min-height: 1.5em;
	color: var(--fm-color-acento-oscuro);
}

.fm-modal-cupon__paso .fm-boton,
.fm-modal-desbloquear__paso .fm-boton {
	width: 100%;
	margin-top: var(--fm-espacio-xs);
}

.fm-nekodex-cupon-aplicado-hora {
	font-family: var(--fm-fuente-display);
	font-size: 1.5rem;
}

/* -------------------------------------------------------------------- */
/* Adelanto de cupones bloqueados del Nekodex en la ficha (Bloque A).    */
/* -------------------------------------------------------------------- */

.fm-nekodex-desbloqueo {
	margin-top: var(--fm-espacio-sm);
	display: flex;
	flex-direction: column;
	gap: var(--fm-espacio-sm);
}

/* .fm-nekodex-preview-bloqueado/-icono: retirados — el adelanto bloqueado
   ahora usa .fm-cupon-tarjeta--bloqueado (main.css), mismo componente que
   el resto de tarjetas de cupón. */

/**
 * "Registrar visita en mi Nekodex": antes un .fm-boton--secundario plano
 * (solo borde, sin relleno) — Fabi pidió "más diseño, más llamativo".
 * Ancho completo, degradado de marca, sombra cómic y un pequeño ícono, para
 * que destaque como la acción principal de la sección Nekodex.
 */
.fm-boton-registrar-visita {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	box-sizing: border-box;
	padding: 14px 18px;
	border: 2px solid var(--fm-color-texto);
	border-radius: var(--fm-radio-borde);
	background: linear-gradient(135deg, var(--fm-color-acento), var(--fm-color-acento-oscuro));
	color: var(--fm-color-blanco);
	font-family: var(--fm-fuente-texto);
	font-weight: 800;
	font-size: 0.95rem;
	text-align: center;
	text-decoration: none;
	box-shadow: 4px 4px 0 var(--fm-color-texto);
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fm-boton-registrar-visita:hover,
.fm-boton-registrar-visita:focus-visible {
	color: var(--fm-color-blanco);
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--fm-color-texto);
}

.fm-boton-registrar-visita-icono {
	font-size: 1.2rem;
	line-height: 1;
}

@media (min-width: 600px) {
	.fm-nekodex-album {
		grid-template-columns: repeat(3, 1fr);
		padding: var(--fm-espacio-md);
	}
}

@media (min-width: 900px) {
	.fm-nekodex-album {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--fm-espacio-lg) var(--fm-espacio-md);
		padding: var(--fm-espacio-lg);
	}
}

/* -------------------------------------------------------------------- */
/* Bloque F: tabs de /nekodex/ (Álbum / Mis cupones / Todos los cupones). */
/* -------------------------------------------------------------------- */

.fm-nekodex-intro {
	color: var(--fm-color-gris, #6b6b6b);
	margin-top: -0.5em;
}

.fm-nekodex-tabs {
	display: flex;
	gap: var(--fm-espacio-xs);
	overflow-x: auto;
	margin-bottom: var(--fm-espacio-md);
	border-bottom: 2px solid var(--fm-color-texto);
}

.fm-nekodex-tabs__boton {
	flex-shrink: 0;
	padding: var(--fm-espacio-xs) var(--fm-espacio-sm);
	border: none;
	background: none;
	font: 700 0.95rem var(--fm-fuente-texto);
	color: var(--fm-color-texto);
	cursor: pointer;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.fm-nekodex-tabs__boton[aria-selected="true"] {
	color: var(--fm-color-acento);
	border-bottom-color: var(--fm-color-acento);
}

.fm-nekodex-tab-panel {
	animation: fm-nekodex-tab-aparecer 0.2s ease-out;
}

@keyframes fm-nekodex-tab-aparecer {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.fm-nekodex-progreso {
	font-weight: 700;
}

.fm-nekodex-buscador-tienda {
	margin-bottom: var(--fm-espacio-md);
	background: var(--fm-color-blanco);
	border-radius: var(--fm-radio-borde);
	padding: var(--fm-espacio-sm);
}

.fm-nekodex-buscador-tienda label {
	display: block;
	font-weight: 700;
	margin-bottom: var(--fm-espacio-xs);
}

.fm-nekodex-buscador-tienda select {
	width: 100%;
	padding: var(--fm-espacio-sm);
	border: 2px solid var(--fm-color-texto);
	border-radius: var(--fm-radio-borde);
	font-family: var(--fm-fuente-texto);
	font-size: 1rem;
	background: var(--fm-color-fondo);
}

/* Estado bloqueado vs. desbloqueado del sticker, sin tarjeta: el ganado va
   a color con sombra que sigue la silueta del PNG (y "pop" al pintarse); el
   bloqueado es el "hueco" del álbum, la silueta del mismo arte. */
.fm-nekodex-sticker--ganado {
	animation: fm-nekodex-sticker-pop 0.3s ease-out;
}

.fm-nekodex-sticker--ganado .fm-nekodex-sticker-imagen {
	filter: drop-shadow(0 3px 4px rgba(28, 20, 38, 0.35));
}

.fm-nekodex-sticker--pendiente .fm-nekodex-sticker-imagen {
	filter: brightness(0);
	opacity: 0.12;
}

.fm-nekodex-sticker--pendiente .fm-nekodex-sticker-icono {
	opacity: 0.25;
	filter: grayscale(1);
}

/* Sticker por tiempo limitado que ya terminó y que el fan no ganó: sigue
   visible ("Ya no disponible"), más apagado que un bloqueado normal. */
.fm-nekodex-sticker--vencido .fm-nekodex-sticker-imagen,
.fm-nekodex-sticker--vencido .fm-nekodex-sticker-icono {
	opacity: 0.06;
}

/* "Pegados a mano": inclinación leve alterna. */
.fm-nekodex-sticker:nth-child(odd) .fm-nekodex-sticker-boton {
	transform: rotate(-2deg);
}

.fm-nekodex-sticker:nth-child(even) .fm-nekodex-sticker-boton {
	transform: rotate(2.5deg);
}

.fm-nekodex-sticker:nth-child(3n) .fm-nekodex-sticker-boton {
	transform: rotate(-1deg);
}

@media (prefers-reduced-motion: no-preference) {
	.fm-nekodex-sticker-boton {
		transition: transform 0.15s ease-out;
	}

	.fm-nekodex-sticker--ganado .fm-nekodex-sticker-boton:hover {
		transform: rotate(0deg) scale(1.05);
	}
}

@keyframes fm-nekodex-sticker-pop {
	from {
		transform: scale(0.85);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

.fm-nekodex-usados summary {
	cursor: pointer;
	font-weight: 700;
	margin: var(--fm-espacio-sm) 0;
}

/* .fm-chip--urgencia: main.css (sitewide). */

.fm-modal-cupon__etiquetas {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 4px 0;
}

/* -------------------------------------------------------------------- */
/* Bloque F: álbum de trofeos ("Otros stickers") y su modal de detalle    */
/* (#fm-modal-trofeo, reutiliza .fm-modal-cupon__* — ver funciones.php).  */
/* -------------------------------------------------------------------- */

.fm-nekodex-sticker-boton {
	display: block;
	width: 100%;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	font: inherit;
	text-align: center;
	cursor: pointer;
	color: inherit;
	appearance: none;
}

/* Modal del sticker: el sticker flota sobre el fondo oscuro, sin caja, y la
   info va en una tarjeta de papel al lado (debajo en celular). Se anulan los
   estilos de "caja blanca" que hereda de .fm-modal-cupon__caja. */
.fm-modal-trofeo__caja {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--fm-espacio-md);
	max-width: 720px;
	max-height: 100%;
	overflow-y: auto;
	padding: var(--fm-espacio-md) 0;
	background: none;
	border: 0;
	box-shadow: none;
	text-align: left;
}

.fm-modal-trofeo .fm-modal-cupon__cerrar {
	top: var(--fm-espacio-xs);
	right: var(--fm-espacio-xs);
	color: var(--fm-color-blanco);
	font-size: 2rem;
}

.fm-modal-trofeo__sticker {
	flex: 0 0 auto;
	animation: fm-modal-trofeo-pop 0.35s ease-out;
}

@keyframes fm-modal-trofeo-pop {
	from {
		opacity: 0;
		transform: scale(0.8);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Flotación suave (sube y baja con una leve inclinación). */
.fm-modal-trofeo__flota {
	position: relative;
	width: min(260px, 62vw);
	aspect-ratio: 1 / 1;
	animation: fm-modal-trofeo-flotar 4s ease-in-out infinite;
}

@keyframes fm-modal-trofeo-flotar {
	0%,
	100% {
		transform: translateY(0) rotate(-3deg);
	}
	50% {
		transform: translateY(-10px) rotate(2deg);
	}
}

.fm-modal-trofeo__imagen {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.5));
}

.fm-modal-trofeo__imagen[hidden],
.fm-modal-trofeo__icono[hidden],
.fm-modal-trofeo__tienda[hidden] {
	display: none;
}

.fm-modal-trofeo__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 6rem;
}

/* Por ganar: silueta del mismo arte, como el hueco del álbum. */
.fm-modal-trofeo--pendiente .fm-modal-trofeo__imagen {
	filter: brightness(0) opacity(0.35);
}

.fm-modal-trofeo--pendiente .fm-modal-trofeo__icono {
	opacity: 0.4;
}

/* Brillo: un destello que cruza el sticker (recortado con su propia silueta
   vía máscara) y se repite cada 5 segundos. Solo en los ganados. */
.fm-modal-trofeo--ganado .fm-modal-trofeo__flota::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.9) 50%, transparent 62%);
	background-size: 300% 100%;
	background-position: 160% 0;
	-webkit-mask-image: var(--fm-sticker-mascara);
	mask-image: var(--fm-sticker-mascara);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	animation: fm-modal-trofeo-brillo 5s ease-in-out infinite;
}

@keyframes fm-modal-trofeo-brillo {
	0% {
		background-position: 160% 0;
	}
	24%,
	100% {
		background-position: -60% 0;
	}
}

.fm-modal-trofeo__info {
	position: relative;
	width: 100%;
	background-color: #FFFDF8;
	background-image: radial-gradient(rgba(122, 110, 134, 0.16) 1px, transparent 1px);
	background-size: 18px 18px;
	border: 1px solid rgba(122, 110, 134, 0.22);
	border-radius: var(--fm-radio-borde);
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
	padding: var(--fm-espacio-md);
}

.fm-modal-trofeo__titulo {
	margin: 0 0 var(--fm-espacio-xs);
}

.fm-modal-trofeo__estado {
	display: inline-block;
	margin: 0 0 var(--fm-espacio-sm);
	padding: 2px 10px;
	border-radius: 999px;
	background: rgba(122, 110, 134, 0.14);
	color: var(--fm-color-gris, #6b6b6b);
	font-size: 0.85rem;
	font-weight: 600;
}

.fm-modal-trofeo--ganado .fm-modal-trofeo__estado {
	background: rgba(61, 187, 107, 0.18);
	color: #1f7a45;
}

.fm-modal-trofeo__descripcion {
	margin: 0 0 var(--fm-espacio-sm);
}

.fm-modal-trofeo__tienda {
	display: inline-block;
}

/* Escritorio: sticker a la izquierda, info a la derecha. */
@media (min-width: 700px) {
	.fm-modal-trofeo__caja {
		flex-direction: row;
		align-items: center;
		gap: var(--fm-espacio-lg);
	}

	.fm-modal-trofeo__info {
		flex: 1 1 auto;
		width: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fm-modal-trofeo__sticker,
	.fm-modal-trofeo__flota,
	.fm-modal-trofeo--ganado .fm-modal-trofeo__flota::after {
		animation: none;
	}

	.fm-modal-trofeo--ganado .fm-modal-trofeo__flota::after {
		display: none;
	}
}