/**
 * Test de nivel.
 *
 * Fichero propio y no dentro de configurador.css: esto solo se carga en las dos
 * paginas del test, y no tiene sentido que viaje en cada pagina de la web.
 *
 * Misma paleta que el resto del plugin. El coral (#FE8A5C) da 2,33:1 sobre
 * blanco, asi que aqui tampoco se usa como color de texto: solo como relleno.
 */
.ag-test {
	--ag-test-azul: var( --ag-azul, #1d2448 );
	--ag-test-acento: var( --ag-acento, #fe8a5c );
	--ag-test-texto: var( --ag-texto, #4a4a4a );
	--ag-test-suave: var( --ag-texto-suave, #7a7a7a );
	--ag-test-borde: var( --ag-borde, #e2e5eb );

	color: var( --ag-test-texto );
	font-weight: 400;
	/* Alineado con los titulos de la pagina, que van a la izquierda: centrado
	   quedaba desplazado respecto a «Rellena estos datos…». */
	margin: 0;
	max-width: 760px;
}

/* El reset.css del tema da `display: inline-block` a todos los botones, y eso
   anula el atributo `hidden`: el boton de validar se veia desde el principio y
   dejaba validar un bloque a medias, con las que faltaban como falladas. */
.ag-test [hidden] {
	display: none !important;
}

/* ------------------------------------------------------------- Contacto */

/* Mismo aspecto que los formularios de la web (.ag-cf7 en configurador.css):
   dos campos por fila, el nombre dentro de la caja, borde azul marino, y la
   casilla legal a la izquierda del boton. */

.ag-test__contacto {
	background: #fff;
	border: 1px solid var( --ag-test-borde );
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba( 29, 36, 72, .04 ), 0 8px 24px rgba( 29, 36, 72, .06 );
	padding: 2rem 2.25rem;
}

.ag-test__fila {
	column-gap: 1.25rem;
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

.ag-test__campo {
	margin: 0 0 1.1rem;
}

/* La etiqueta se queda para los lectores de pantalla; a la vista, el nombre
   del campo va dentro de la caja. */
.ag-test .ag-test__oculto {
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	height: 1px;
	margin: 0;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.ag-test .ag-test__campo input[type="text"],
.ag-test .ag-test__campo input[type="email"],
.ag-test .ag-test__campo input[type="tel"],
.ag-test .ag-test__campo select {
	background: #fff;
	border: 1px solid var( --ag-test-azul );
	border-radius: 3px;
	box-sizing: border-box;
	color: var( --ag-test-texto );
	font-family: inherit;
	font-size: .95rem;
	height: auto;
	margin: 0;
	padding: .85rem 1rem;
	width: 100%;
}

.ag-test .ag-test__campo input::placeholder {
	color: #9aa1ad;
	opacity: 1;
}

/* Sin pais elegido, el desplegable se lee como los demas campos vacios. */
.ag-test .ag-test__campo select:invalid {
	color: #9aa1ad;
}

.ag-test .ag-test__campo select option {
	color: var( --ag-test-texto );
}

.ag-test .ag-test__campo input:focus,
.ag-test .ag-test__campo select:focus {
	border-color: var( --ag-test-acento );
	outline: 0;
}

.ag-test__pie {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
	justify-content: space-between;
	margin-top: .5rem;
}

.ag-test__legal {
	color: var( --ag-test-texto );
	flex: 1 1 280px;
	font-size: .88rem;
	line-height: 1.4;
	margin: 0;
}

.ag-test__legal label {
	align-items: flex-start;
	cursor: pointer;
	display: flex;
	gap: .5rem;
}

.ag-test__legal input[type="checkbox"] {
	accent-color: var( --ag-test-acento );
	flex: 0 0 auto;
	margin: .15rem 0 0;
}

/* Con `.ag-test` delante: la regla `.elementor a` carga despues y quitaba el subrayado. */
.ag-test .ag-test__legal a {
	color: var( --ag-test-azul );
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Van despues de los estilos de los campos para ganarles: con igual
   especificidad manda el orden, y antes los errores no se marcaban. */
.ag-test .ag-test__campo input.ag-test__campo--mal,
.ag-test .ag-test__campo select.ag-test__campo--mal {
	border-color: #b42318;
}

.ag-test input[type="checkbox"].ag-test__campo--mal {
	outline: 2px solid #b42318;
	outline-offset: 2px;
}

.ag-test__error {
	color: #b42318;
	font-size: .9rem;
	margin: 0 0 1rem;
}

/* -------------------------------------------------------------- Bloques */

.ag-test__bloque {
	background: #fff;
	border: 1px solid var( --ag-test-borde );
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba( 29, 36, 72, .04 ), 0 8px 24px rgba( 29, 36, 72, .06 );
	margin: 0 0 1.5rem;
	padding: 1.6rem 1.75rem;
}

.ag-test__bloque-titulo {
	border-bottom: 1px solid var( --ag-test-borde );
	color: var( --ag-test-azul );
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0 0 1.4rem;
	padding: 0 0 .7rem;
}

.ag-test__pregunta {
	border-bottom: 1px solid var( --ag-test-borde );
	margin: 0 0 1.1rem;
	padding: 0 0 1.1rem;
}

.ag-test__pregunta:last-of-type {
	border-bottom: 0;
}

.ag-test__enunciado {
	color: var( --ag-test-azul );
	font-weight: 600;
	line-height: 1.5;
	margin: 0 0 .7rem;
}

.ag-test__numero {
	color: var( --ag-test-suave );
	font-weight: 400;
	margin-right: .3rem;
}

.ag-test__opcion {
	align-items: baseline;
	display: flex;
	gap: .55rem;
	margin: 0 0 .4rem;
}

.ag-test__opcion label {
	cursor: pointer;
	line-height: 1.5;
}

.ag-test__opcion input[type="radio"]:disabled + label {
	cursor: default;
}

/* Los dos colores del original, para que «Ver respuestas» se lea igual. */
.ag-test__opcion--fallada label {
	color: #df7a7b;
	text-decoration: line-through;
}

.ag-test__opcion--correcta label {
	color: #5a8296;
	font-weight: 600;
}

/* ------------------------------------------------------- Avisos y botones */

.ag-test__aviso {
	color: var( --ag-test-suave );
	font-size: .9rem;
	margin: 1.2rem 0 0;
}

.ag-test__acciones {
	margin: 1.2rem 0 0;
}

/* Coral y redondeado, como el boton de los formularios de la web. Con
   `.ag-test` delante: el reset.css del tema carga despues que este fichero y,
   a igual especificidad, pintaba los botones con su contorno rosa. */
.ag-test .ag-test__boton {
	background: var( --ag-test-acento );
	border: 1px solid var( --ag-test-acento );
	border-radius: 999px;
	color: #fff;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	min-width: 170px;
	padding: .85rem 2.2rem;
	transition: background-color .15s ease, border-color .15s ease;
	white-space: normal;
}

.ag-test .ag-test__boton:hover,
.ag-test .ag-test__boton:focus {
	background: #f57840;
	border-color: #f57840;
	color: #fff;
}

.ag-test .ag-test__boton--secundario,
.ag-test .ag-test__boton--secundario:hover,
.ag-test .ag-test__boton--secundario:focus {
	background: #fff;
	border-color: var( --ag-test-azul );
	color: var( --ag-test-azul );
}

.ag-test .ag-test__boton--secundario:hover {
	background: #f4f5f9;
}

.ag-test .ag-test__boton[disabled] {
	cursor: default;
	opacity: .55;
}

.ag-test a:focus-visible,
.ag-test button:focus-visible,
.ag-test input:focus-visible,
.ag-test select:focus-visible {
	outline: 2px solid var( --ag-test-azul );
	outline-offset: 2px;
}

/* ------------------------------------------------------------ Resultados */

.ag-test__resultado {
	border-radius: 10px;
	margin: 1.2rem 0 0;
	padding: 1.1rem 1.25rem;
}

.ag-test__resultado--bien {
	background: #f2f9f4;
}

.ag-test__resultado--mal {
	background: #fdf4f3;
}

.ag-test__resultado--final {
	background: #fff6f1;
}

.ag-test__resultado p {
	margin: 0 0 .6rem;
}

.ag-test__porcentaje {
	color: var( --ag-test-azul );
	font-size: 1.05rem;
	font-weight: 600;
}

.ag-test__nivel {
	color: var( --ag-test-azul );
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
}

.ag-test .ag-test__curso a {
	color: var( --ag-test-azul );
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ag-test__aviso-envio {
	color: var( --ag-test-texto );
	font-size: .92rem;
	margin: .8rem 0 0;
}

/* ---------------------------------------------------------------- Movil */

/* El mismo corte que los formularios de la web: por debajo, un campo por fila
   y la casilla encima del boton. */
@media ( max-width: 782px ) {

	.ag-test__fila {
		grid-template-columns: 1fr;
	}

	.ag-test__pie {
		align-items: stretch;
		flex-direction: column;
	}

	/* En columna, el ancho minimo de la casilla pasaria a ser su alto. */
	.ag-test__pie > .ag-test__legal {
		flex: 0 0 auto;
	}
}

@media ( max-width: 600px ) {

	.ag-test__contacto,
	.ag-test__bloque {
		padding: 1.25rem 1.1rem;
	}

	.ag-test .ag-test__boton {
		display: block;
		margin: 0 0 .6rem;
		width: 100%;
	}
}