@charset "utf-8";
/* Autor: Francisco Camarena , triplewsystems.com */

@import url('https://fonts.googleapis.com/css?family=Rambla');

html { 
/*  background: url(/imagenes/background/fondo_artis.jpg) fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat:no-repeat;
  height:100%;
  */
}

body{
/*  height:100%;*/
}


.grid_general {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	width: 100%;
	height:100%;

	justify-items: left;
	align-items: center;
	
	padding:0em 0em 0em 0em;
	
	background:;
	box-sizing: border-box;
}
	
	
.login_recuadro{

	border-radius			:	1em 1em 1em 1em;
	-moz-border-radius		:	1em 1em 1em 1em;
	-webkit-border-radius	:	1em 1em 1em 1em;

	-webkit-box-shadow		:	3px 0px 16px -4px rgba(0,0,0,0.75);
	-moz-box-shadow			:	3px 0px 16px -4px rgba(0,0,0,0.75);
	box-shadow				:	3px 0px 16px -4px rgba(0,0,0,0.75);
		
	border: 0px solid #CCCCCC;
		
	position:absolute;
	width:300px;
	height:380px;

	
	padding:1em;
	box-sizing: border-box;

	/*background:rgba(255, 255, 255, 0.5);*/
	background-color: white;
	z-index:11;
}


#div_aviso_error{
	border-radius			: 10px 10px 10px 10px;
	-moz-border-radius		: 10px 10px 10px 10px;
	-webkit-border-radius	: 10px 10px 10px 10px;

	float:left; 
	background:#F00; 
	padding:8px; 
	margin-top:10px; 
	margin-left:0px; 
	font-size:14px; 
	color:#EFEFED; 
	font-family:'Rambla';
	
}

#fondo_logo_cliente{
	position:absolute; 
	width:300px; 
	height:100%; 
	right:0px;
	background-image:url(/imagenes/transparencia_logo_cliente.png);
	background-repeat:repeat;
}

#fondo_logo_cliente img{
	padding:10px;
	box-sizing:border-box;
	position:absolute;
	top:27%;
	width:100%;
	height:auto;	
}

#franja_superior{
	float:left;
	width:100%;
	height:auto;
	background-image:url(../imagenes/transparencia.fw.png);
	background-repeat:repeat;
/*	background:#000;*/
	text-align:center;
	padding-top:10px;
	padding-bottom:5px;
}

#franja_superior img{
	border-radius: 0px 0px 0px 0px;
	-moz-border-radius: 0px 0px 0px 0px;
	-webkit-border-radius: 0px 0px 0px 0px;
	width:350px;
	height:auto;
}

#franja_centro{
	float:left;
	width:100%;
	height:70%;
	background:;
}

#franja_vertical{

	border-radius			:	0px 0px 0px 0px;
	-moz-border-radius		:	0px 0px 0px 0px;
	-webkit-border-radius	:	0px 0px 0px 0px;
	border: 0px solid #CCCCCC;

	-webkit-box-shadow: 3px 0px 16px -4px rgba(0,0,0,0.75);
	-moz-box-shadow: 3px 0px 16px -4px rgba(0,0,0,0.75);
	box-shadow: 3px 0px 16px -4px rgba(0,0,0,0.75);
		
	display:none;
	position:absolute;
	width:400px;

	height:100%;
	top: 0px;

	left:30px;
	z-index:-100;
	padding:10px 0px 0px 0px;
	box-sizing: border-box;
	background-image:url(../imagenes/fondo_azul_2.png);
	background-repeat:repeat;
	background:;

}




#logo_sistema{
	margin:0 auto;
	width:100%;
	text-align:center;
	padding:20px;
	padding-left:25px;
	padding-top:15px;
	box-sizing:border-box;
}

#login_dentro{
	border-radius			: 10px 10px 10px 10px;
	-moz-border-radius		: 10px 10px 10px 10px;
	-webkit-border-radius	: 10px 10px 10px 10px;

	box-sizing: border-box;
	float:left;
	width:100%;
	height:auto;
	margin-top:0px;
	padding:0em;
/*	background-image:url(../imagenes/transparencia_logo_cliente.png);*/
	background-repeat:repeat;
	background:;

}

#login_centrado{
	box-sizing: border-box;
	padding:0px;
	margin:0 auto; 
	width:100%;
}

#fila{
	float:left;
	width:100%;
	height:auto;
	margin-bottom:0px;
	background:;
}

#etiqueta_login{
	float:left;
	box-sizing: border-box;
	font-family:'Rambla';
	font-size:14px;
	width:100%;
	height:35px;
	padding:8px;
	background:;
	color:#00263B;
	font-weight:600;
	text-align:left;
}

#campo{
	float:left;
	width:100%;
	height:auto;
	background:;
}	



#franja_inferior{
	position:fixed;
	bottom:0px;
	width:100%;
	height:20px;
	background:#000;
	color:#CCC;
	font-size:12px;
	padding-top:6px;
	padding-bottom:4px;
	text-align:center;
}

.cboton_ingresar{

	border-radius			: 1em 1em 1em 1em;
	-moz-border-radius		: 1em 1em 1em 1em;
	-webkit-border-radius	: 1em 1em 1em 1em;

	border: 0px solid #6BBBD6;

	margin-top:10px;
	width:100%;
	
	box-sizing: border-box;	

	background-color: #4a22f4;
	color:#FFF;

	font-family:'Rambla';
	font-size:16px;
	padding:11px;
}

.cboton_ingresar:hover{
	cursor:pointer;
	background:#8abc29;
	/*background-color: #4a22f4;*/
}


.login_formulario{
	border-radius			: 1em 1em 1em 1em;
	-moz-border-radius		: 1em 1em 1em 1em;
	-webkit-border-radius	: 1em 1em 1em 1em;

	border: 1px solid #ccc;
	box-sizing: border-box;	
		
	font-family: 'Rambla';
	padding:10px 20px;
	width:100%;
	/*color:#052658;*/
	color:rgba(0, 0, 0, 1);
	font-size:17px;	
	font-weight:500;
	/*background:url(../imagenes/transparencia_input_blanco.fw.png) repeat;*/
	/*background:#A8CBDE;*/
	background:rgba(255, 255, 255, 0.7);

}

.login_formulario:focus{
	outline:0px;
}


.login_formulario_clave{
	border-radius			: 1em 1em 1em 1em;
	-moz-border-radius		: 1em 1em 1em 1em;
	-webkit-border-radius	: 1em 1em 1em 1em;

	border: 1px solid #ccc;
	box-sizing: border-box;	
		
	font-family: 'Rambla';
	padding:10px 40px 10px 20px;
	
	width:100%;
	/*color:#052658;*/
	color:rgba(0, 0, 0, 1);
	font-size:17px;	
	font-weight:500;
	/*background:url(../imagenes/transparencia_input_blanco.fw.png) repeat;*/
	/*background:#A8CBDE;*/
	background:rgba(255, 255, 255, 0.7);

}

.login_formulario_clave:focus{
	outline:0px;
}


@media only screen and (max-width:1600px){

	#franja_superior{
		height:8%;
	}
		
	
	
	#logo_sistema{
		
		top:calc(50% - 210px);
	}
		
}


/******************************************/
/***    DISEÑO PARA TABLETAS  HORIZONTAL   ****/
/******************************************/
@media only screen and (max-width:1350px){

	#franja_superior{
		height:10%;
		padding-top:2%;
		padding-bottom:2%;
		
	}

	.login_recuadro{

		border-radius			:	1em 1em 1em 1em;
		-moz-border-radius		:	1em 1em 1em 1em;
		-webkit-border-radius	:	1em 1em 1em 1em;
	
		position:inherit;
		float:left;

		width:250px;
		height:auto;
	
		padding:1em;
			
		/*background:rgba(255, 255, 255, 0.5);*/
		background-color: white;
		
	}

	#logo_sistema{
		margin:0 auto;
		width:100%;
		text-align:center;
		padding:20px;
		padding-left:30px;
		padding-top:1em;
		box-sizing:border-box;
	}


	.login_formulario{
		border-radius			: 0.8em .8em .8em .8em;
		-moz-border-radius		: 0.8em .8em .8em .8em;
		-webkit-border-radius	: 0.8em .8em .8em .8em;
			
		padding:8px 17px;
		width:100%;
		font-size:16px;	
		font-weight:500;

	
	}
	
		
}

@media only screen and (max-width:1024px){

		

	
	
	#login_dentro{
		padding:0em;
	}
	
	#franja_superior img{
		height:100%;
		width:auto;
	}
}
@media only screen and (max-width:968px){

	#logo_sistema{
		margin:0 auto;
		width:100%;
		text-align:center;
		
		padding-bottom:10px;
		box-sizing:border-box;
	}
	
	.login_recuadro{

		border-radius			:	2em 2em 2em 2em;
		-moz-border-radius		:	2em 2em 2em 2em;
		-webkit-border-radius	:	2em 2em 2em 2em;
	
		position:inherit;
		float:left;

		width:100%;
		height:auto;
	
		padding:1.2em;
			
		/*background:rgba(255, 255, 255, 0.5);*/
		
	}

	.cboton_ingresar{
		border-radius			: 	1em 1em 1em 1em;
		-moz-border-radius		:	1em 1em 1em 1em;
		-webkit-border-radius	:	1em 1em 1em 1em;

		background-color: #4a22f4;
		color:#FFF;
		font-family:'Rambla';
		font-size:18px;
		padding:1em;
	}
		
	.login_formulario{
		border-radius			: 	.7em .7em .7em .7em;
		-moz-border-radius		:	.7em .7em .7em .7em;
		-webkit-border-radius	:	.7em .7em .7em .7em;
		
		padding:.8em;
		width:100%;
		
		color:rgba(0, 0, 0, 1);
		font-size:19px;	
		font-weight:500;
		
	
	}
	
	.login_formulario:focus{
		outline:0px;
	}

	.login_formulario_clave{

		border-radius			: 	.7em .7em .7em .7em;
		-moz-border-radius		:	.7em .7em .7em .7em;
		-webkit-border-radius	:	.7em .7em .7em .7em;

		padding:0.8em;
		
		width:100%;
		
		color:rgba(0, 0, 0, 1);
		font-size:17px;	
		

	}

}

/******************************************/
/***    DISEÑO PARA TABLETAS           ****/
/******************************************/

@media only screen and (max-width:768px){

	#boton_ingresar{
		width:100%;
	}

	#franja_superior{
		width:100%;
		height:auto;

	}

	#franja_superior img{
		width:90%;
		height:auto;	
		margin-left:3%;
	}
	

}

/******************************************/
/***    DISEÑO PARA MOVILES 480        ****/
/******************************************/
@media only screen and (max-width:480px){



	

}
/******************************************/
/***    DISEÑO PARA MOVILES 320        ****/
/******************************************/
@media only screen and (max-width:320px){



}
/******************************************/
/***    DISEÑO PARA MOVILES 240        ****/
/******************************************/
@media only screen and (max-width:240px){
	

}