@charset "utf-8";

html {
	width:100vw;
	height: 100vh;
}

body{
	width: 100%;
    height: 100%;
    background-image: url(../imagenes/fondo.jpg?v=5);
	-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;
    margin:0;
	font-family: "Poppins", serif;
	font-weight: 400;
	font-style: normal;
}

.area_superior {
	background-color: rgba(174,221,255,0.5);
	height:100px;
}

.titulo{
	color: #005596;
    font-weight: bold;
    padding: 1.5%;
    font-size: 3vw;
    text-shadow: 3px 3px 10px #666;
}

#titulo-div-login {
	text-align: center;
    margin-bottom: 4%;
    font-size: 1.75vw;
	position:relative;
}

.login_etiqueta {
	width: 34%;
    float: left;
    padding: 3%;	
    font-weight: bold;
    text-align: right;
    color: #fff;
    font-size: 1.25vw;
}

.login_div_campo {
	width: 54%;
	float: left;
	padding: 3%;
	font-size: 16px;
	text-align: center;
}

.login {
    position:absolute;
    width:100%;
	margin-top: 1%;
	z-index: 1000;
}

.login_div_existente {
	margin: 0 auto;
    padding: 20px;
    width: 35%;
	border-radius: 1vw;
    box-shadow: 0.5vw 0.5vw 0.5vw #0007;
    outline: 0;
    background-color: #ffd000;
    color: #fff;
}

.login_div_no_existente {
	padding: 20px;
	height: 60px;
	width: 400px;
	-webkit-border-radius: 10px 10px; /* Safari  */ 
	-moz-border-radius: 10px 10px;
	box-shadow: 2px 2px 5px #999;
	outline: 0;
	background-color: rgba(174,221,255,0.5);
    z-index:1002;
}

.login_error {
	padding: 1%;
    width: 30%;
    margin: auto;
    color: #F00;
    font-weight: bold;
    text-align: center;
    -webkit-border-radius: 10px 10px;
    -moz-border-radius: 10px 10px;
    box-shadow: 2px 2px 5px #999;
    margin-top: 0.5%;
    background-color: #daad;
    font-size: 1vw;
}

.login_campo {
	font-size: 1.25vw;
    border: thin solid #E8E8E8;
    -webkit-border-radius: 10px 10px;
    -moz-border-radius: 10px 10px;
    box-shadow: 2px 2px 5px #999;
    outline: 0;
    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
    text-align: center;
    width: 90%;
}

.pan_adm_div_menu {
	-webkit-border-radius: 10px 10px; 
	/* Safari  */ -moz-border-radius: 10px 10px;
	box-shadow: 2px 2px 5px #999;
	background-color: rgba(255,255,255,0.5);
	width: 20%;
	float: left;
	padding: 1.5%;
	margin: 0.5%;
}

.pan_adm_opcion_menu {
	background-color: rgba(174,221,255,0.5);
	padding: 1%;
	margin: 2%;
	cursor:pointer;
}

.pan_adm_opcion_menu:hover {
	background-color: rgba(255,254,210,0.5);
	font-weight:bold;
}

.pan_adm_div_marco {
	-webkit-border-radius: 10px 10px; /* Safari  */ 
	-moz-border-radius: 10px 10px;
	box-shadow: 2px 2px 5px #999;
	background-color: rgba(255,255,255,0.5);
	width: 73%;
	height: 75%;
	float: right;
	margin: 0.5%;
	padding: 1%;
}

.pan_adm_saludo {
	color: #005596;
	font-weight: bold;
	padding: 1.5%;
	margin: 0.5%;
	font-size: 150%;
	float:right;
}

.boton{
	background-color: #0067b1;
    border: 0.25vw solid #025590;
    border-radius: 0.75vw;
    font-size: 1.5vw;
    padding: 0.5vw;
    color: #fff;
	cursor:pointer;
	font-family: "Poppins", serif;
	font-weight: 400;
	font-style: normal;
}

.boton:hover{
	background-color:#0094ff;
}

.pan_adm_intro_menu {
	padding: 1.5%;
	margin: 0.5%;
}

.poweredby {
	position: absolute;
    bottom: 1%;
    width: 100%;
    color: #a7510b;
    z-index: 1100;
    text-align: center;
    font-size: 1vw;
}

.img-logo {
	max-width: 25%;
	margin: 1%;
}

.div-titulo {
    width: 30%;
    margin: auto;
}

.div-imagen1 {
	position: absolute;
    bottom: 17%;
    left: 1%;
    width: 17%;
    z-index: 1;
}

.div-imagen2 {
	position: absolute;
    bottom: 36%;
    right: 1%;
    width: 17%;
    z-index: 1;
}

.div-imagen3 {
	position: absolute;
    bottom: 0%;
    right: 8%;
    width: 17%;
    z-index: 1;
}

.div-info {
	position: absolute;
    bottom: 1%;
    right: 5%;
    width: 15%;
	z-index: 1;
}

.div-logo-supersubsidio{
	position: fixed;
    bottom: 2%;
    right: 1%;
    width: 1.5%;
}

.img-info{
    width:100%;
}

.img-titulo{
    width:100%;
}

.img-imagen1{
    width:100%;
}

.img-imagen2{
	width:100%;
}

.img-imagen3{
	width:100%;
}

.img-personaje{
    width:100%;
}

.img-logo-supersubsidio{
	width:100%;
}

#div-texto1-empresa {
	position: absolute;
	bottom: 0%;
	left: 0px;
	width: 98%;
    height:60%;
	padding: 0% 1% 1% 0%;
    background-repeat:no-repeat;
    background-image:url(../imagenes/personas-empresa.png?v=1);
    background-size:90%;
    background-position:bottom;
}

#img-complemento {
	position: absolute;
	bottom: 3%;
	right: 6px;
	width: 1%;
	padding-left: 1%;
	max-height: 70%;
}

.material-symbols-outlined {
	font-variation-settings:
	'FILL' 0,
	'wght' 400,
	'GRAD' 0,
	'opsz' 24
}

.info-usuario{
	position: absolute;
    top: 20%;
    right: 10%;
	cursor:default;
}

@media only screen and (max-aspect-ratio: 1/1)
{

    body{
        background-image: url(../imagenes/fondo.jpg?v=5);
    }
	
	.titulo{
		font-size:6vw;
	}

	.div-personaje {
        width: 60%;
		margin: 0% 19%;
		top: 61%;
	}
   
	.div-info {
        width: 84%;
		margin: 0% 8%;
		right: 0%;
		top: 89%;
    }

    .div-logo-supersubsidio {
        right: 1%;
    	width: 4%;
    }

    .login {
        position:inherit;
    }

	#div-texto1-empresa {
        height:50%;
        background-size: 80%;
        bottom:5%;
	}

	.login_div_existente {
		margin: 0 auto;
		font-size: 3vw;
		width: 75%;
		/*margin-top: 5%;*/
		border-radius: 3vw;
	}
	
	.boton-version {
		font-size:6vw;
	}
	
	.login_error {
		font-size:3vw;
	}

	.login_etiqueta {
		width: 94%;
		padding: 0%;
		font-size: 4vw;
	}
	
	.login_div_campo {
		width: 94%;
		padding: 3%;
		font-size: 3vw;
		text-align: center;
	}

	.poweredby {
		font-size: 3vw;
		bottom: inherit;
		margin-top: 2%;
	}

	#btnIngresar{
		font-size: 6vw;
		border: 1vw solid #025590;
		border-radius: 2vw;
	}
	
	#identificacion {
		font-size:6vw;
	}

	#titulo-div-login {
		font-size:6vw;
	}

	#login-etiqueta-vacio{
		height:0px;
		padding:0%;
	}
	
	.img-logo{
		max-width:45%;
	}
	
	#img-complemento {
		width: 3%;
	}
	
	.login_campo{
		font-size:6vw;
	}

	.div-titulo{
		width: 90%;
	}

	.div-imagen1{
		bottom: 17%;
		width: 35%;
	}

	.div-imagen2 {
		bottom: 20%;
		width: 35%;
	}

	.div-imagen3 {
		bottom: 0%;
		width: 35%;
	}

	#titulo-div-login {
		margin-bottom: 0%;
	}

}