/* ==========================================================================
   Probador virtual
   Se carga SOLO en la ficha de producto (ver inc/probador-ui.php).

   Nota de especificidad: en este theme "body.nj-theme a" y
   "body.nj-theme h1,h2,h3,h4" fijan color con dos selectores, así que le
   ganan a cualquier regla de una sola clase. Todo lo que pinta texto acá va
   prefijado con body.nj-theme — ya nos mordió dos veces en este proyecto.
   ========================================================================== */

/* ---------------------------------- Botón en la ficha ---------------------------------- */

body.nj-theme .nj-probador-abrir {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 22px;
	padding: 14px 26px;
	background: var(--nj-ink);
	color: var(--nj-ivory);
	border: none;
	font-family: var(--nj-font-body);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1.4px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

body.nj-theme .nj-probador-abrir:hover {
	background: var(--nj-bronze);
}

body.nj-theme .nj-probador-bajada {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--nj-ink-soft);
	max-width: 38ch;
}

/* ---------------------------------- Modal ---------------------------------- */

.nj-probador {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s;
}

.nj-probador.is-abierto {
	opacity: 1;
	visibility: visible;
}

.nj-probador__fondo {
	position: absolute;
	inset: 0;
	background: rgba(28, 24, 16, 0.62);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

.nj-probador__caja {
	position: relative;
	z-index: 1;
	width: min(760px, 100%);
	max-height: 88vh;
	overflow-y: auto;
	background: var(--nj-ivory);
	padding: 44px 48px 40px;
	transform: translateY(14px);
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.nj-probador.is-abierto .nj-probador__caja {
	transform: translateY(0);
}

body.nj-theme .nj-probador__cerrar {
	position: absolute;
	top: 14px;
	right: 18px;
	background: none;
	border: none;
	font-size: 30px;
	line-height: 1;
	color: var(--nj-ink-soft);
	cursor: pointer;
	padding: 4px 8px;
}

body.nj-theme .nj-probador__cerrar:hover {
	color: var(--nj-ink);
}

/* ---------------------------------- Pasos ---------------------------------- */

.nj-probador__paso {
	display: none;
}

.nj-probador__paso.is-activo {
	display: block;
}

.nj-probador__paso--centrado.is-activo {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

body.nj-theme .nj-probador__eyebrow {
	display: block;
	text-transform: uppercase;
	letter-spacing: 2.5px;
	font-size: 11px;
	color: var(--nj-bronze);
	margin-bottom: 12px;
}

body.nj-theme .nj-probador__paso h2 {
	font-family: var(--nj-font-display);
	font-weight: 500;
	font-size: clamp(26px, 3vw, 34px);
	color: var(--nj-ink);
	margin: 0 0 14px;
}

body.nj-theme .nj-probador__intro {
	font-size: 15px;
	line-height: 1.7;
	color: var(--nj-ink-soft);
	margin: 0 0 28px;
	max-width: 58ch;
}

/* ---------------------------------- Ejemplos de encuadre ---------------------------------- */

.nj-probador__ejemplos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 150px));
	gap: 20px;
	margin-bottom: 30px;
}

.nj-probador__ejemplo {
	margin: 0;
	text-align: center;
}

.nj-probador__ejemplo svg {
	width: 100%;
	height: auto;
	display: block;
	background: #fff;
}

.nj-probador__ejemplo .marco {
	fill: none;
	stroke: var(--nj-line);
	stroke-width: 1.5;
}

.nj-probador__ejemplo .cuerpo {
	fill: none;
	stroke-width: 3;
	stroke-linecap: round;
}

.nj-probador__ejemplo--si .cuerpo {
	stroke: var(--nj-bronze);
}

.nj-probador__ejemplo--no .cuerpo {
	stroke: rgba(28, 24, 16, 0.3);
}

.nj-probador__ejemplo--si svg {
	outline: 2px solid var(--nj-bronze);
}

.nj-probador__ejemplo--no svg {
	outline: 1px solid var(--nj-line);
}

.nj-probador__ejemplo figcaption {
	display: block;
	margin-top: 10px;
	font-size: 12px;
	line-height: 1.5;
}

body.nj-theme .nj-probador__ejemplo figcaption strong {
	display: block;
	color: var(--nj-ink);
	margin-bottom: 2px;
}

body.nj-theme .nj-probador__ejemplo figcaption span {
	color: var(--nj-ink-soft);
}

/* ---------------------------------- Listas sí / no ---------------------------------- */

.nj-probador__listas {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px;
	margin-bottom: 32px;
}

body.nj-theme .nj-probador__lista h3 {
	font-family: var(--nj-font-body);
	font-weight: 500;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1.4px;
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--nj-line);
}

body.nj-theme .nj-probador__lista--si h3 {
	color: var(--nj-bronze);
}

body.nj-theme .nj-probador__lista--no h3 {
	color: var(--nj-ink-soft);
}

.nj-probador__lista ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

body.nj-theme .nj-probador__lista li {
	position: relative;
	padding-left: 20px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--nj-ink-soft);
}

body.nj-theme .nj-probador__lista li::before {
	position: absolute;
	left: 0;
	top: 0;
}

body.nj-theme .nj-probador__lista--si li::before {
	content: "✓";
	color: var(--nj-bronze);
}

body.nj-theme .nj-probador__lista--no li::before {
	content: "×";
	color: rgba(28, 24, 16, 0.4);
	font-size: 15px;
	line-height: 1.35;
}

/* ---------------------------------- Subir foto ---------------------------------- */

.nj-probador__soltar {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 40px 24px;
	border: 1px dashed var(--nj-line);
	background: var(--nj-ivory-deep);
	cursor: pointer;
	overflow: hidden;
	min-height: 210px;
	transition: border-color 0.2s ease;
}

.nj-probador__soltar:hover {
	border-color: var(--nj-bronze);
}

body.nj-theme .nj-probador__soltar-icono {
	color: var(--nj-bronze);
	line-height: 0;
}

body.nj-theme .nj-probador__soltar-texto {
	font-size: 14px;
	color: var(--nj-ink);
	letter-spacing: 0.3px;
}

body.nj-theme .nj-probador__soltar-nota {
	font-size: 11.5px;
	color: var(--nj-ink-soft);
}

.nj-probador__vista {
	display: none;
}

/* Con foto elegida, el marco deja de ser una caja de alto fijo y toma la
   proporción de la foto: la clienta ve la imagen ENTERA, igual que la va a
   recibir la IA. Antes el marco medía 210px de alto y la foto se estiraba a
   inset:0, así que una foto vertical se veía recortada arriba y abajo —
   justo el encuadre de cuerpo entero que le pedimos en el paso 1. */
.nj-probador__soltar.tiene-foto {
	display: block;
	padding: 0;
	min-height: 0;
}

.nj-probador__soltar.tiene-foto .nj-probador__vista {
	display: block;
	position: static;
	width: auto;
	max-width: 100%;
	height: auto;
	/* Tope para que una foto muy vertical no empuje el consentimiento y el
	   botón fuera de la ventana. */
	max-height: 58vh;
	margin: 0 auto;
	object-fit: contain;
	background: var(--nj-ivory-deep);
}

/* Ícono y texto de invitación ya no hacen falta: la foto habla sola. Queda
   la nota, flotando abajo, convertida en "tocá para cambiarla". */
.nj-probador__soltar.tiene-foto .nj-probador__soltar-icono,
.nj-probador__soltar.tiene-foto .nj-probador__soltar-texto {
	display: none;
}

.nj-probador__soltar.tiene-foto .nj-probador__soltar-nota {
	position: absolute;
	left: 50%;
	bottom: 10px;
	transform: translateX(-50%);
	z-index: 1;
	background: rgba(247, 244, 238, 0.92);
	padding: 3px 10px;
	border-radius: 3px;
	white-space: nowrap;
}

/* ---------------------------------- Consentimiento ---------------------------------- */

.nj-probador__legal {
	margin-top: 24px;
	padding: 20px 22px;
	background: var(--nj-ivory-deep);
}

body.nj-theme .nj-probador__legal-titulo {
	margin: 0 0 14px;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 1.4px;
	color: var(--nj-bronze);
}

.nj-probador__check {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin-bottom: 12px;
	cursor: pointer;
}

.nj-probador__check:last-child {
	margin-bottom: 0;
}

.nj-probador__check--datos {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--nj-line);
}

.nj-probador__check input {
	margin: 2px 0 0;
	flex-shrink: 0;
	accent-color: var(--nj-bronze);
	width: 16px;
	height: 16px;
	cursor: pointer;
}

body.nj-theme .nj-probador__check span {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--nj-ink-soft);
}

/* ---------------------------------- Errores ---------------------------------- */

body.nj-theme .nj-probador__error {
	display: none;
	margin: 18px 0 0;
	padding: 12px 16px;
	border-left: 2px solid var(--nj-bronze);
	background: rgba(176, 141, 87, 0.09);
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--nj-ink);
}

body.nj-theme .nj-probador__error.is-visible {
	display: block;
}

/* ---------------------------------- Acciones ---------------------------------- */

.nj-probador__acciones {
	display: flex;
	align-items: center;
	gap: 22px;
	margin-top: 26px;
}

.nj-probador__acciones--resultado {
	justify-content: center;
	flex-wrap: wrap;
	gap: 18px;
}

body.nj-theme .nj-probador__cta {
	display: inline-block;
	padding: 14px 30px;
	background: var(--nj-ink);
	color: var(--nj-ivory);
	border: none;
	font-family: var(--nj-font-body);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1.4px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}

body.nj-theme .nj-probador__cta:hover {
	background: var(--nj-bronze);
	color: var(--nj-ivory);
}

body.nj-theme .nj-probador__cta:disabled {
	opacity: 0.35;
	cursor: not-allowed;
	background: var(--nj-ink);
}

body.nj-theme .nj-probador__volver {
	background: none;
	border: none;
	padding: 6px 0;
	font-family: var(--nj-font-body);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--nj-ink-soft);
	text-decoration: none;
	border-bottom: 1px solid var(--nj-line);
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
}

body.nj-theme .nj-probador__volver:hover {
	color: var(--nj-ink);
	border-color: var(--nj-ink);
}

/* ---------------------------------- Procesando ---------------------------------- */

.nj-probador__spinner {
	width: 44px;
	height: 44px;
	margin-bottom: 26px;
	border: 1px solid var(--nj-line);
	border-top-color: var(--nj-bronze);
	border-radius: 50%;
	animation: nj-probador-girar 0.9s linear infinite;
}

@keyframes nj-probador-girar {
	to { transform: rotate(360deg); }
}

/* ---------------------------------- Resultado ---------------------------------- */

.nj-probador__resultado {
	display: block;
	width: 100%;
	max-width: 430px;
	height: auto;
	margin: 6px auto 22px;
	background: var(--nj-ivory-deep);
}

body.nj-theme .nj-probador__aviso {
	max-width: 52ch;
	margin: 0 auto;
	padding: 14px 18px;
	background: var(--nj-ivory-deep);
	font-size: 13px;
	line-height: 1.65;
	color: var(--nj-ink-soft);
}

body.nj-theme .nj-probador__aviso strong {
	color: var(--nj-ink);
}

body.nj-theme .nj-probador__restantes {
	margin: 20px 0 0;
	font-size: 12px;
	letter-spacing: 0.4px;
	color: var(--nj-ink-soft);
}

/* Vacío mientras no se sabe el estado (o si falla la consulta): sin esto deja
   un renglón de aire arriba de los botones. */
body.nj-theme .nj-probador__restantes:empty {
	display: none;
}

/* ---------------------------------- Mobile ----------------------------------
   La mayoría va a subir la foto desde el celular, así que el modal pasa a
   pantalla completa en vez de quedar como una tarjeta flotante. */

@media (max-width: 640px) {
	.nj-probador {
		padding: 0;
	}

	.nj-probador__caja {
		width: 100%;
		max-height: 100vh;
		height: 100%;
		padding: 40px 22px 32px;
	}

	.nj-probador__listas {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.nj-probador__ejemplos {
		grid-template-columns: repeat(2, 1fr);
		max-width: 280px;
		margin-inline: auto;
	}

	.nj-probador__acciones {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 14px;
	}

	body.nj-theme .nj-probador__cta {
		width: 100%;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nj-probador,
	.nj-probador__caja {
		transition: none;
	}
	.nj-probador__spinner {
		animation-duration: 2.5s;
	}
}

/* ---------------------------------- Cartel de modo demo ----------------------------------
   Tiene que ser imposible de confundir con un resultado real: por eso rompe
   la paleta discreta del resto del modal a propósito. */

body.nj-theme .nj-probador__demo {
	display: none;
	width: 100%;
	max-width: 430px;
	margin: 0 auto 14px;
	padding: 12px 16px;
	background: var(--nj-ink);
	color: var(--nj-ivory);
	font-size: 12.5px;
	line-height: 1.55;
	text-align: left;
}

body.nj-theme .nj-probador__demo.is-visible {
	display: block;
}

body.nj-theme .nj-probador__demo strong {
	color: var(--nj-bronze-soft);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 11px;
}