/*
 * Quiz de diagnóstico (`/test`) — Nivel Vital.
 * Paleta: mismas variables de color D4 que el resto del sitio (--nv-verde-oscuro, etc.),
 * definidas en `.nv-portada` (portada.css) y `.nv-ficha` (ficha-biomarcador.css), ambas
 * encoladas siempre antes que este archivo — ver nv_bib_encolar_estilos_publicos() en
 * plantilla-publica.php. Los botones (`.nv-portada__boton`) y la cuadrícula de tarjetas
 * de resultado (`.nv-biblioteca__grid`, `.nv-tarjeta`) se reutilizan tal cual, sin
 * redefinirlos aquí — mismo principio que la portada: ninguna tarjeta ni botón nuevo
 * que mantener.
 *
 * Un color de acento por perfil, tomado de la propia paleta D4 (sin colores nuevos):
 * fatiga-silenciosa → verde azulado · estancamiento-general → ámbar ·
 * mente-saturada → morado · sueno-fragmentado → verde oscuro. Es solo un matiz visual
 * para diferenciar los 4 resultados a simple vista, no tiene significado clínico.
 */

.nv-quiz {
	background: var(--nv-blanco);
}

/* Defensivo: cualquier elemento con el atributo `hidden` (usado por quiz.js para
   alternar intro/preguntas/resultados) debe quedar oculto pase lo que pase — sin esto,
   una regla de `display` propia (p. ej. `.nv-quiz__anterior` más abajo) puede ganarle al
   estilo por defecto del navegador para `[hidden]`, porque ambas son reglas de autor con
   especificidad similar y la más concreta/tardía gana. */
.nv-quiz [hidden] {
	display: none !important;
}

.nv-quiz h1,
.nv-quiz h2,
.nv-quiz h3 {
	font-family: 'Montserrat', 'Open Sans', sans-serif;
}

/* ---------------------------------------------------------------- */
/* Hero                                                               */
/* ---------------------------------------------------------------- */

.nv-quiz__hero {
	background: var(--nv-verde-oscuro);
	padding: 4.5rem 1.5rem 3.5rem;
	text-align: center;
}

.nv-quiz__hero-contenido {
	max-width: 620px;
	margin: 0 auto;
}

.nv-quiz__kicker {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #d9c98a;
	margin: 0 0 1rem;
}

.nv-quiz__titulo {
	font-size: clamp(1.9rem, 4vw, 2.6rem);
	font-weight: 800;
	line-height: 1.2;
	color: var(--nv-blanco);
	margin: 0 0 1rem;
}

.nv-quiz__entradilla {
	font-family: 'Open Sans', sans-serif;
	font-size: 1.05rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.88);
	margin: 0 0 1.25rem;
}

.nv-quiz__privacidad {
	font-family: 'Open Sans', sans-serif;
	font-size: 0.85rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.68);
	margin: 0 0 1.75rem;
}

/* ---------------------------------------------------------------- */
/* Cuerpo — preguntas                                                 */
/* ---------------------------------------------------------------- */

.nv-quiz__cuerpo {
	max-width: 720px;
	margin: 0 auto;
	padding: 3rem 1.5rem 4rem;
}

.nv-quiz__progreso {
	height: 6px;
	border-radius: 999px;
	background: var(--nv-borde);
	overflow: hidden;
	margin-bottom: 0.75rem;
}

.nv-quiz__progreso-relleno {
	height: 100%;
	width: 0%;
	background: var(--nv-verde-azulado);
	border-radius: 999px;
	transition: width 0.3s ease;
}

.nv-quiz__contador {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--nv-texto-suave);
	margin: 0 0 1.75rem;
}

.nv-quiz__pregunta-texto {
	font-size: clamp(1.3rem, 3vw, 1.6rem);
	font-weight: 800;
	color: var(--nv-verde-oscuro);
	line-height: 1.35;
	margin: 0 0 1.5rem;
	outline: none;
}

.nv-quiz__opciones {
	display: grid;
	gap: 0.85rem;
}

.nv-quiz__opcion {
	text-align: left;
	font-family: 'Open Sans', sans-serif;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--nv-texto);
	background: var(--nv-casi-blanco);
	border: 2px solid var(--nv-borde);
	border-radius: 14px;
	padding: 1rem 1.25rem;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
}

.nv-quiz__opcion:hover,
.nv-quiz__opcion:focus-visible {
	border-color: var(--nv-verde-azulado);
	background: var(--nv-blanco);
	transform: translateY(-1px);
	outline: none;
}

.nv-quiz__opcion:active {
	transform: translateY(0);
}

/* La 5ª opción de cada pregunta ("no me afecta") — v0.27.0. Visualmente más discreta
   a propósito (borde de puntos, sin el fondo sólido de las otras 4): sigue siendo una
   respuesta tan válida como las demás, pero no debe competir en peso visual con las 4
   que sí describen un problema, o el ojo tiende a leerla como "la opción por defecto". */
.nv-quiz__opcion--neutra {
	background: transparent;
	border-style: dashed;
	color: var(--nv-texto-suave);
}

.nv-quiz__opcion--neutra:hover,
.nv-quiz__opcion--neutra:focus-visible {
	background: var(--nv-casi-blanco);
	color: var(--nv-texto);
}

.nv-quiz__anterior {
	display: inline-block;
	margin-top: 2rem;
	background: none;
	border: none;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 0.88rem;
	color: var(--nv-texto-suave);
	cursor: pointer;
	padding: 0.4rem 0;
}

.nv-quiz__anterior:hover,
.nv-quiz__anterior:focus-visible {
	color: var(--nv-morado);
}

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

.nv-quiz__resultado {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 2.5rem;
}

.nv-quiz__resultado-titulo {
	font-size: clamp(1.8rem, 4vw, 2.3rem);
	font-weight: 800;
	color: var(--nv-verde-oscuro);
	margin: 0 0 1rem;
}

.nv-quiz__resultado-descripcion {
	font-family: 'Open Sans', sans-serif;
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--nv-texto);
	margin: 0 0 1rem;
}

.nv-quiz__resultado-aviso {
	font-family: 'Open Sans', sans-serif;
	font-size: 0.85rem;
	line-height: 1.55;
	color: var(--nv-texto-suave);
	margin: 0 0 2.5rem;
}

.nv-quiz__resultado-subtitulo {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--nv-verde-oscuro);
	margin: 0 0 1.25rem;
	text-align: left;
}

.nv-quiz__resultado-vacio {
	text-align: left;
	font-family: 'Open Sans', sans-serif;
	color: var(--nv-texto-suave);
	background: var(--nv-casi-blanco);
	border: 1px solid var(--nv-borde);
	border-radius: 14px;
	padding: 1.25rem 1.5rem;
	margin: 0 0 1.5rem;
}

.nv-quiz__resultado-acciones {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin-top: 2.5rem;
}

.nv-quiz__repetir {
	background: none;
	border: 2px solid var(--nv-borde);
	border-radius: 999px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--nv-verde-oscuro);
	padding: 0.85rem 1.6rem;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.nv-quiz__repetir:hover,
.nv-quiz__repetir:focus-visible {
	border-color: var(--nv-morado);
	color: var(--nv-morado);
	outline: none;
}

/* Un matiz de color por perfil en el título del resultado — puramente visual. */
.nv-quiz__resultado[data-perfil="fatiga-silenciosa"] .nv-quiz__resultado-titulo { color: var(--nv-verde-azulado); }
.nv-quiz__resultado[data-perfil="estancamiento-general"] .nv-quiz__resultado-titulo { color: var(--nv-ambar); }
.nv-quiz__resultado[data-perfil="mente-saturada"] .nv-quiz__resultado-titulo { color: var(--nv-morado); }
.nv-quiz__resultado[data-perfil="sueno-fragmentado"] .nv-quiz__resultado-titulo { color: var(--nv-verde-oscuro); }
/* Resultado neutro (v0.27.0) — tono deliberadamente apagado, sin color de "alerta" ni
   de "logro": no es ni un problema ni un premio, es la ausencia de una señal fuerte. */
.nv-quiz__resultado[data-perfil="neutral"] .nv-quiz__resultado-titulo { color: var(--nv-texto-suave); }

@media (max-width: 560px) {
	.nv-quiz__hero {
		padding: 3.5rem 1.25rem 2.75rem;
	}
	.nv-quiz__cuerpo {
		padding: 2.25rem 1.25rem 3rem;
	}
	.nv-quiz__resultado-subtitulo {
		text-align: center;
	}
}