@charset "utf-8";
/* CSS Document xxx */

body, html {
    width: 100%;
    height: 100%;
    background-color: #133b4a;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    font-family: Arial, Helvetica, sans-serif !important;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    font-size: 14px;
}

.ambiente {
    background-color: #FF0;
    color: #f00;
    font-size: 2vw;
    text-align: center;
    font-weight: bold;
    padding: 1vw;
}

.cont-form-login{
	float: left;
    border-radius: 10px 10px;
    -webkit-border-radius: 10px 10px;
    -moz-border-radius: 10px 10px;
    color: #ffffff;
    padding: 2%;
    margin: 1%;
    margin-left: 30%;
	width: 65%;
}

.cont-login{
	width: 50%;
    padding: 3vw;
    background-color: #3337;
    border-radius: 1vw;
    margin: 3vw auto;
	border: 0.25vw solid #fff;
}

.cont-equipo-oculto{
	display:none;
	width:100%;
}

.cont-equipo-visible{
	display:block;
	width:100%;
}

.titulo-login{
	text-align: center;
    font-size: 2vw;
    margin: 1vw 0vw;
}

.boton-login {
    padding: 0.2%;
    text-align: center;
    font-size: 1.4vw;
    border-radius: 0px 30px 0px 0px;
    -webkit-border-radius: 0px 30px 0px 0px;
    -moz-border-radius: 0px 30px 0px 0px;
    outline: 0;
    color: #FFF;
    cursor: pointer;
    background-color: #fecf00;
    text-shadow: 0px 0px 0px #fff;
    font-weight: 900;
    width: 31%;
    margin-left: 36%;
	margin-top: 6%;
}

.boton-login:hover{
    color: #ff0;
    background-color: #007bfe;
}

.div-evento-h{
	float: left;
	text-align: left;
	margin: 1%;
	width: 26%;
	height: 90%;
	position: fixed;    
	display: flex;
    justify-content: center;
    align-items: center;
}

.img-registro{
	height:100%;
}

.div-evento-v{
    display: none;
    text-align: center;
    margin-top: 1vw;
    width: 100%;
}

.img-registro-portrait{
	width:95%;
}

.contenedor-form {
    float: left;
    border-radius: 10px 10px;
    -webkit-border-radius: 10px 10px;
    -moz-border-radius: 10px 10px;
    outline: 0;
    background-color: rgb(0 0 0 / 24%);
    color: #ffffff;
    padding: 2%;
    width: 65%;
    margin: 1%;
    margin-left: 30%;
    height: 80vh;
    min-height: 84%;
    padding-top: 0.5%;
    overflow: hidden;
	position:relative;
}

.titulo{
	padding: 0%;
	font-size: 1.5vw;
	text-align: center;
	font-weight: bolder;
	color: #ffed00;
	text-shadow: 2px 3px 5px #000;
	margin-bottom: 1vw;
}

.logo-colsubsidio{
	width: 35%;
}

.logo-teatro-colsubsidio{
	width:100%;
	max-width:500px;
}

.titulo-principal{
    padding: 1vw;
    font-size: 1.5vw;
    text-align: center;
    font-weight: bolder;
    color: #fff;
    background-color: #00b5fc77;
    border-radius: 0.5vw;
    margin: 1vw;

}

.titulo-principal-confirmacion{
    padding: 1%;
    font-size: 1.8vw;
    text-align: center;
    font-weight: bolder;
    color: #ffffff;
    /*text-shadow: 2px 3px 5px #000;*/
    background: #0a93fb;
    border-radius: 10px;
}

.texto-nota{
	text-align: right;
    color: #FF9;
    font-style: italic;
    font-size: 1vw;
    padding: 1vw;
}

.obligatoriedad{
	float:left;
	width:1vw;
	font-size:1.4vw;
	color:#f00;
}

.etiqueta{
	padding: 0.25% 0.25% 1.6% 1%;
	width:30%; 
	float:left; 
	font-size:1.4vw; 
	color:#ffffff; 
}

.campo{
	padding:0.3%;
	margin:0.25%;
	width:60%;
	float:left;
	font-size:1.3vw;
	background-color: #a8c0ac8c;
	border:none;
	outline:none;
	border-radius: 0.5vw;
	-webkit-border-radius: 0.5vw; 
	-moz-border-radius: 0.5vw;
	padding-left: 1.2%;
    padding-right: 2%;
	color:#FFF;
}

.campoMx{
	padding:0.5vw;
	margin:0.5vw;
	width:20vw;
	float:left;
	font-size:1.3vw;
	background-color: #a8c0ac8c;
	border:none;
	outline:none;
	border-radius: 10px 10px;
	-webkit-border-radius: 10px 10px; 
	-moz-border-radius: 10px 10px;
	color:#FFF;
}

.cont-autorizacion{
	padding:0.3%;
	margin:0.25%;
	width:100%;
	float:left;
	font-size:1.3vw;
	background-color: #a8c0ac8c;
	border:none;
	outline:none;
	border-radius: 10px 10px;
	-webkit-border-radius: 10px 10px; 
	-moz-border-radius: 10px 10px;
	padding-left: 1.2%;
    padding-right: 2%;
	color:#FFF;
}

.lista{
	width:66%;
}

.listaMx{
	width:8%;
}

.errado{
    background-color: #faa9;
}

.campoErrValid {
	padding: 0.5%;
	margin: 0.25% 0.25% 0.25% 2%;
	width: 64%;
	float: left;
	font-size: 1.25vw;
	background-color: rgb(254 210 1 / 60%);
	border: none;
	outline: none;
	border-radius: 10px 10px;
	-webkit-border-radius: 10px 10px;
	-moz-border-radius: 10px 10px;
}

.mayusculas{
	text-transform:uppercase;
}

.minusculas{
	text-transform:lowercase;
}

.texto{
	font-size: 1.3vw;
    color: #c5c5c5;
    float: left;
    width: 65%;
}

.texto-autorizacion{
	font-size: 1.3vw;
    color: #c5c5c5;
    float: left;
    padding: 0.5vw 2vw 0.5vw 0.5vw;
	width: 95%;
	border-radius: 0.75vw;
	margin: 2vw 0vw;
}

.texto-opciones{
	font-size:1.1vw;
	color:#ffffff;
	display:inline;
}

.opcion{
	height: 1.1vw;
    width: 1.1vw;
    float: left;
    margin: 0.25vw 2vw;
}

.texto-opcion{
	float:left;
}

.texto-info{
	font-size: 1.25vw;
    text-shadow: 0.2vw 0.2vw 0.5vw black;
    margin-bottom: 1vw;
    padding: 1vw;
    background-color: #fff3;
    border-radius: 0.75vw;
}

.separador{
    width: 100%;
    height: 1vw;
}

.vinculo {
	color: #11caa9;
	text-decoration: underline;
}

.boton {
    padding: 0.2%;
    text-align: center;
    font-size: 1.4vw;
    border-radius: 0.5vw;
    -webkit-border-radius: 0.5vw;
    -moz-border-radius: 0.5vw;
    outline: 0;
    color: #FFF;
    cursor: pointer;
    background-color: #9bed3f77;
    font-weight: 900;
    width: 20%;
    margin-left: 39%;
    margin-top: 0%;
}

.boton:hover{
    color: #ff0;
    background-color: #d7e31e77;
}

.boton-error {
    padding: 0.2%;
    text-align: center;
    font-size: 1.4vw;
    border-radius: 0.5vw;
    -webkit-border-radius: 0.5vw;
    -moz-border-radius: 0.5vw;
    outline: 0;
    color: #FFF;
    cursor: pointer;
    background-color: #d1c173;
    font-weight: 900;
    width: 20%;
    margin-left: 39%;
    margin-top: 0%;
}

.boton-error:hover{
    color: #ff0;
    background-color: #b8a859;
}

.boton-trivia {
    padding: 0.2%;
    text-align: center;
    font-size: 1.4vw;
    border-radius: 0px 30px 0px 0px;
    -webkit-border-radius: 0px 30px 0px 0px;
    -moz-border-radius: 0px 30px 0px 0px;
    outline: 0;
    color: #FFF;
    cursor: pointer;
    border: 3px solid #53565b;
    background-color: #0a93fb;
    text-shadow: 0px 0px 0px #fff;
    font-weight: 900;
    width: 50%;
    margin-left: 33%;
    margin-top: 0%;
}

.boton-trivia:hover{
    color: #fff;
    background-color: #b38e10;
}

.pie{
    position: absolute;
    bottom: 0vw;
    width: 100%;
    border-radius: 0.25vw;
	pointer-events: none;
}

.cont-logo-super{
    width: 12%;
    position: absolute;
    right: 1vw;
    top: -1vw;
}

.logo-super{
	width:100%;
}

.poweredby{
	text-align:left;
	padding:0.5vw;
	color:#CCC;
}

.fondo-error{
	background-color:#000a;
	width:100%;
	height:100%;
	position:fixed;
	top: 0%;
    left: 0%;
}

.cont-mensaje-error{
	width: 50%;
    margin-left: 25%;
    padding: 2vw;
	background-color: #f6e8a3;
	border: thick solid #665608;
    border-radius: 1vw;
	position: fixed;
    top: 15%;
	z-index: 100;
}

.error-titulo{
	font-size: 2vw;
	color: #505050;
    text-align: center;
    font-weight: bold;
}

.error-texto{
	font-size: 1.5vw;
	color: #505050;
    text-align: center;
}


.error-mensaje{
	font-size: 1.25vw;
	color: #505050;
    margin: 3% 0% 0% 3%;
	height:58vh;
	overflow:auto;
}

.fondo-notificacion{
	background-color:#000a;
	width:100%;
	height:100%;
	position:fixed;
	top: 0%;
    left: 0%;
}

.cont-mensaje-notificacion{
	width: 50%;
    margin-left: 25%;
    padding: 2vw;
	background-color: #ffce00;
	border: thick solid #770;
    border-radius: 1vw;
	position: fixed;
    top: 15%;
	color:#006eb6;
}

.notificacion-titulo{
	font-size: 2vw;
	color: #030;
    text-align: center;
    font-weight: bold;
}

.notificacion-texto{
	font-size: 1.5vw;
	color: #040;
    text-align: center;
}

.texto-confirmacion {
	margin: 1% 0% 1% 0%;
    padding: 1%;
    font-size: 1.5vw;
    text-align: center;
    font-weight: bolder;
    color: #ffffff;
}

.img-calendario{
	width:10%;
}

.pregunta {
    border-radius: 1vw;
    padding: 15px;
    margin-bottom: 20px;
    background-color: #ffffff2e;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.pregunta h3 {
	color: #fec925;
    font-size: 1.5vw;
}
.pregunta label {
    display: block;
    margin: 10px 0;
    font-size: 1.5vw;
}
.pregunta input[type="radio"] {
	margin-right: 10px;
}
.btn-enviar {
	display: block;
	width: 100%;
	padding: 10px;
	background-color: #007bff;
	color: #fff;
	border: none;
	border-radius: 5px;
	font-size: 18px;
	cursor: pointer;
}
.btn-enviar:hover {
	background-color: #0056b3;
}

.cont-respuesta {
	margin: 1vw 0vw;
}

.cont-opcion-respuesta {
	float: left;
}

.opcion-respuesta {
	margin-top: 0.85vw;
    margin-left: 2vw;
    width: 1.5vw;
    height: 1.5vw;
}

.texto-opcion-respuesta {
	cursor: pointer;
	float:left;
	width: 55vw;
}

.respuesta-correcta{
	font-size: 2vw;
    background-color: #0A0;
    border: thick solid #070;
    border-radius: 1vw;
    padding: 0.5vw;
    text-align: center;
}

.respuesta-incorrecta{
	font-size: 2vw;
    background-color: #A00;
    border: thick solid #700;
    border-radius: 1vw;
    padding: 0.5vw;
    text-align: center;
}

::placeholder {
	color: #B5B5B5;
	font-style:italic;
	font-size:1.1vw;
	font-family: Arial, Helvetica, sans-serif !important;
}

option {
	color: #333;
}

.clear-both{
	clear: both;
}

.centrado{
	text-align:center;
}

.minusculas{
	text-transform: lowercase;
}

.bloqueado {
	background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 2px, transparent 2px, transparent 4px);
    background-color: #f0f0f099;
    color: #777;
	cursor:no-drop;
}

.oculto{
	display:none;	
}

input::placeholder {
  text-transform: none; /* Evita que afecte al placeholder */
}

input,select {
  box-sizing: border-box;
}

.error-fecha{
	padding: 0.3%;
    margin: 0.25%;
    width: 57%;
    float: left;
    font-size: 1.3vw;
    background-color: #ff09;
    border: none;
    outline: none;
    border-radius: 0.5vw;
    -webkit-border-radius: 0.5vw;
    -moz-border-radius: 0.5vw;
    padding-left: 1.2%;
    padding-right: 2%;
    color: #FFF;
}

.scroll-area {
  height: 100%;
  overflow-y: auto;
  padding-right: 10px; /* opcional para evitar solapamiento con scroll */
}

#scroll-indicator {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: none;
}

.circle {
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.6); /* contraste con fondo oscuro */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse 1.5s infinite;
}

.arrow {
  color: #000;
  font-size: 20px;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}


/* Smartphones (portrait) */
@media only screen 
and (max-aspect-ratio: 13/9) {
	
	.ambiente {
		font-size: 6vw;
	}

	.div-evento-h{
		display: none;
	}
	
	.div-evento-v{
		display: block;
	}
	
	.titulo-principal{
		padding: 1%;
		font-size: 4.2vw;
		text-align: center;
		font-weight: bolder;
	}

	.texto-confirmacion {
		margin: 10% 0% 1% 0%;
		padding: 2%;
		font-size: 4vw;
		text-align: center;
		font-weight: bolder;
	}
	
	.contenedor-form{
		border-radius: 10px 10px;
		-webkit-border-radius: 10px 10px;
		-moz-border-radius: 10px 10px;
		outline: 0;
		margin: 2.5%;
		padding: 2.5%;
		width: 90%;
		height:auto;
	}

	.etiqueta{
		padding:2%;
		width:90%;
		font-size:4vw;
	}
	
	.campo{
		padding:2%; margin:0.25%; width:95%; float:left; font-size:4.1vw; border:none; outline:none;
		border-radius: 7px 7px;
		-webkit-border-radius: 7px 7px;
		-moz-border-radius: 7px 7px;

	}

	::placeholder {
	  font-size:3.6vw;
	}

	.campoErrValid {
		padding: 2%;
		margin: 0.25%;
		width: 95%;
		float: left;
		font-size: 4vw;
		background-color: rgba(255,153,102,0.85);
		border: none;
		outline: none;
		border-radius: 10px 10px;
		-webkit-border-radius: 10px 10px;
		-moz-border-radius: 10px 10px;
	}

	.texto-nota{
		font-size:3vw;
	}

	.texto{
		width: 90%;
		font-size:4.1vw;
	}

	.texto-opciones{
		font-size:3.6vw;
		margin:5%;
		margin-left:2%;
		display:inline;
		width:30px;
	}

	.opcion{
		height:4vw;
		width:4vw;
	}
	
	.boton {
        font-size: 5.4vw;
        width: 50%;
        margin-left: 25%;
        margin-top: 10%;
    }

	.boton-trivia {
        font-size: 4.4vw;
        width: 74%;
        margin-left: 13%;
        margin-top: 10%;
    }
	
	.poweredby{
		text-align: center;
		padding: 10px;
		color:#CCC;
	}

	.logo-colsubsidio{
		width:80%;
	}

	.logo-super{
		width:70%;
	}

	#divseparador{
		display:none;
	}
	
	#divsuper{
		float:right !important;
		padding:0% 1.5% 0% 0.5% !important;
		width:50% !important;
	}

	.img-calendario{
		width:20%;
	}

	.errado{
		background-color: #faa9;
	}

	.cont-mensaje-error {
        width: 86vw;
        margin-left: 3vw;
        top: 41%;
    }
	
	.error-titulo{
		font-size: 6vw;
	}
	
	.error-texto{
		font-size: 4.5vw;
	}
	
	.error-mensaje{
		font-size: 4vw;
		margin: 3% 0% 0% 10%;
	}
	
	.obligatoriedad{
		font-size: 4vw;
	}

	.titulo-principal-confirmacion {
		font-size: 4.8vw;
	}
	
	.pregunta h3 {
		font-size: 4.5vw;
	}

	.pregunta label {
		font-size: 4.5vw;
	}

	.cont-respuesta {
	
	}

	.cont-opcion-respuesta {
		height: 7vw;
		width: 7vw;
	}

	.texto-opcion-respuesta {
		width: 70vw;
	}

	.opcion-respuesta {
		width: 3.5vw;
		height: 3.5vw;
		margin-top: 2vw;
	}
	
	.respuesta-incorrecta {
    	font-size: 5vw;
		border-radius: 3vw;
	}

	.respuesta-correcta {
    	font-size: 5vw;
		border-radius: 3vw;
	}
	
	.cont-autorizacion{
		padding: 5%;
		width: 94%;
	}

	.texto-info{
		font-size: 5vw;
		margin-top: 5vw;
	}
		
	.pie{
		position: initial;
	}
}