@charset "utf-8";
/* CSS Document */
:root{
	--color-1 : #0d0d0dff;
	--color-2 : #efefefff;
	--color-2-oscuro : #dadadaff;
	--color-3 : #d93b58ff;
	--color-4 : #7e51b9ff;
	--color-5 : #306ebfff;
	--color-6 : #548c2bff;
	--color-7 : #d9a13bff;
	--color-8 : #023859ff;

	--colors-label: red, blue, green, purple;
	--n:4;
	--i:0;
}
*{
	margin: 0px;
	padding: 0px;
	border: none 0px;
	font-size: 13pt;
	user-select: none;
}
:is([data-send="true"]) *{
	cursor: progress;
}
:is([data-send="true"]) #answers{
	display: none;
}
:is([data-send="true"]) #img{
	display: none;
}
:is([data-send="true"]) section{
	height: 50px;
}
#end{
	display: none;
}
#finished{
	display: none;
}
:is([data-end="finished"]) section:not(#finished){
	display: none;
}
:is([data-end="finished"]) #timer{
	display: none;
}
:is([data-end="finished"]) header{
	display: none;
}
:is([data-end="finished"]) #finished{
	height: 95vh;
	width: 100%;
	padding: 0px;
	margin: 0px;
	font-size: 150%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

#load{
	display: none;
}
:is([data-subjet="loading"]) section:not(#load){
	display: none;
}
:is([data-subjet="loading"]) #timer{
	display: none;
}
:is([data-subjet="loading"]) header{
	display: none;
}
:is([data-subjet="loading"]) #load{
	height: 95vh;
	width: 100%;
	padding: 0px;
	margin: 0px;
	font-size: 150%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

#ErrorURL{
	display: none;
}
:is([data-subjet="ErrorURL"]) section:not(#ErrorURL){
	display: none;
}
:is([data-subjet="ErrorURL"]) #ErrorURL{
	display: none;
}
:is([data-subjet="ErrorURL"]) header{
	display: none;
}
:is([data-subjet="ErrorURL"]) #ErrorURL{
	height: 95vh;
	width: 100%;
	padding: 0px;
	margin: 0px;
	font-size: 150%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

:is([data-end="end"]) #end{
	width: 100%;
	height: 100%;
	z-index: 2;
	position: fixed;
	background-color:rgba(0,0,0,0.50);
	color: rgba(255,255,255,1.00);
	display: flex;
	justify-content: center;
	align-items: center;
}
input[type="radio"]{
	display: none;
}
footer{
	display: flex; /*flex*/
	justify-content: space-around;
	align-items: center;
	
	position: fixed;
	bottom: 0px;
	
	width: 100%;
	height: 50px;
	background-color: var(--color-1);
	color: var(--color-2);
	border-top: 5px solid var(--color-2);
}
footer h1{
	font-size: 150%;
	text-shadow: 0px 0px 33px var(--color-2);
}
#course{
	font-size: 100%;
}

footer #timer{
	background-color: var(--color-2);
	color: var(--color-8);
	border-radius: 20px;
	display: flex;
	width: 30%;
	justify-content: center;
	font-size: 125%;
}
footer #timer > div{
	margin:  0px 10px;
}
footer #timer:hover::before{
	content: "Tiempo restante:";
}

header{
	min-height: 169px;
	width: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	
}
header #subject{
	text-transform:capitalize;
	text-decoration:underline;
	font-style: oblique;
}
header #question{
	width: 80%;
}

header #number{
	/*width: 85px;*/
	padding: 10px;
	height: 85px;
	font-size: 26pt;
	text-align: center;
	background-color: var(--color-7);
	color: var(--color-2);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

section{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 95%;
	height: auto;
	margin:  0px auto 60px;
	background-color: var(--color-2-oscuro);
	padding: 20px;
}
section #imgActive{
	display: none;
}
section #img,#imgQuestion{
	margin-top: 10px;
	width: auto;
	max-height: 300px;
	/*transition: all 2s;*/
	position: relative;
}
:has(#imgQuestion:hover) #imgQuestion{
	filter: brightness(50%);
}
:has(section #imgActive:checked) #imgQuestion:hover{
	filter: brightness(100%);
}
#zoom{
	display: none;
	width: 50px;
	height: 50px;
/*	background-image: url(https://desarrollosoluciones.net/apps/oCuestionarioDeValidacion/img/lupa.png);*/
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
    bottom: 66px;
    left: 380px;
	filter: invert(1);
}
:has(#imgQuestion:hover) #zoom{
	display: block;
}
:has(section #imgActive:checked) #zoom{
	display: none;
}
:has(section #imgActive:checked) #imgQuestion, #img{
	max-height: 100%
}
:has(section #imgActive:checked) #img{
	margin-top: 0px;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	top: 0px;
	right: 0px;
	width: 100%;
	height: 100%;
	max-height:100%;
	background-color:rgba(0,0,0,0.64);
}

section #answers{
	margin: 0px auto;
	display: grid;
	padding: 4%;
	padding-left: 0px;
	width: 90%;
	grid-template-columns: repeat(auto-fill,minmax(350px,2fr));
    gap: 1%;
}
/*    seleccion multiple      */
section #answers > label{
	width: 100%;
	padding: 20px;
	color: var(--color-2);
	transition: all 0.5s;
	text-shadow: 0px 0px 10px rgba(0,0,0,0.81);
}
:has(#answers:hover) section #answers > label:not(label:hover){
	filter: brightness(70%);
}

section #answers #A{
	background:
		linear-gradient(var(--colors-label)) no-repeat
		0 calc(var(--i)*100%/(var(--n) - 1))
		/100% calc(1px*infinity);
}
section #answers #B{
	background:
		linear-gradient(var(--colors-label)) no-repeat
		0 calc(var(--i)*100%/(var(--n) - 1))
		/100% calc(1px*infinity);
}
section #answers #C{
	background:
		linear-gradient(var(--colors-label)) no-repeat
		0 calc(var(--i)*100%/(var(--n) - 1))
		/100% calc(1px*infinity);
}
section #answers #D{
	background:
		linear-gradient(var(--colors-label)) no-repeat
		0 calc(var(--i)*100%/(var(--n) - 1))
		/100% calc(1px*infinity);
}

:has(#a:checked) section #answers #A{background: var(--color-8);}
:has(#b:checked) section #answers #B{background: var(--color-8)}
:has(#c:checked) section #answers #C{background: var(--color-8)}
:has(#d:checked) section #answers #D{background: var(--color-8)}
#A{
	content: "";
}
/** Tru/false **/
:is([data-type="2"]) #A{
	display: block;
}
:is([data-type="2"]) #B{
	display: block;
}
:is([data-type="2"]) #C{
	display: none;
}
:is([data-type="2"]) #D{
	display: none;
}
/** Tru/false **/
:is([data-type="3"]) #A{
	display: block;
}
:is([data-type="3"]) #B{
	display: block;
}
:is([data-type="3"]) #C{
	display: block;
}
:is([data-type="3"]) #D{
	display: none;
}
/** Mensajes **/
:is([data-subjet="mensaje"] ) label:nth-child(n+3){
	display: none;
}
:is([data-subjet="mensaje"]) #A::after{
	content: "Siguiente";
}
:is([data-subjet="mensaje"]) #A{
	grid-column: 1 / 3;
}

:is([data-subjet="mensaje_1"] ) label:nth-child(n+3){
	display: none;
}
:is([data-subjet="mensaje_1"]) #A::after{
	content: "Siguiente";
}
:is([data-subjet="mensaje_1"]) #A{
	grid-column: 1 / 3;
}
/*    fin de seleccion multiple      */
section #answers #text{
    margin: 10px auto;
    padding: 1%;
    min-width: 500px;
	grid-column: 1 / 3;
	display: none;
}
:is([data-type="text"]) #text{
    display: block !important;
    order: 1;
}
:is([data-type="text"]) #A{
	order: 2 !important;
}
:is([data-type="text"]) #A::after{
	content: "Siguiente";
}
:is([data-type="text"] ) label:nth-child(n+3){
	display: none;
}




:is([data-subjet="mensaje_1"]) footer{
	display: none;
}
	
@media (max-width: 700px){
	header{
		flex-direction: column;
		margin: 20px auto;
	}
	section{
		width: 100%;
		margin: 0px auto 70px;
		padding: 1px;
		background-color: var(--color-2)
	}
	section #answers > label{
		margin: 0px auto;
		/*width: 90%;*/
	}
    section #answers #text{
        grid-column: 1/1;
    }
}
@media (min-width: 844px){
	section #answers{
		gap:5%;
	}
}
@media (max-width: 424px){
    section #answers{
		gap:5%;
	}
	footer h1{
		font-size: 100%;
	}
	footer #timer{
		font-size: 100%;
	}
    section #answers #text{
        grid-column: 1/1;
    }
}