@import url('colores_felgrau.css');


*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
background-color: var(--fondo);
cursor:default;
}

@font-face {
	font-family: 'Poppins';
	src: url('Poppins-Regular.woff2') format('woff2');
}

body{	font-family: 'Poppins';}


.fondo123_login{
position: absolute;
bottom: 5%;
left: 15%;
overflow: hidden;
width: 70%;
height: 25%;
background-position: bottom;
background-repeat: no-repeat;
background-size: 70%;
background-image: url(../icono/fondo123.png);
}
.logo1{
position: absolute;
overflow: hidden;
padding: 13%;
margin: 40% 37%;
width: 26%;
height: auto;
background-position: top;
background-repeat: no-repeat;
background-size: 100%;
background-image: url(../icono/logo.png);
z-index: 99;
filter: drop-shadow(1px 6px 6px #FFF);
display:none;
}

.loginerror{
position: absolute;
	width: 100%;
	/* margin: 1% 0; */
	/* left: 0; */
	top: 29%;
	/* text-align: center; */
	color: Red;
	font-size: 16px;
	text-transform: capitalize;
	display: flex;
	justify-content: center;
}

#div_cabecera{
position:absolute;
padding-top:9px;

top:4em;
left:0em;
height:1em;
width:100%;

z-index:998;
}

/* T I T U L O S */
#lbl_titulo{
position:absolute;
overflow:hidden;

color:var(--letra_titulo);

text-align:center;
text-transform: capitalize;

top:0em;
left:0em;
height:7em;
width:100%;

z-index:9;


display: flex;
justify-content:flex-star;
flex-wrap:wrap;

background:var(--titulo);
}

#lbl_titulo .titulo_login{
font-size: 2em;
width:100%;
padding-top:15px;
}
#lbl_titulo .subtitulo{
font-size: 1em;
width:100%;
padding-top:15px;
}
#lbl_titulo .aux{
width:15%;
}

#pinpad{
position: absolute;
	overflow: hidden;
	/* top: 25%; */
	/* left: 0%; */
	height: 300px;
	width: auto;
	/* text-align: center;*/
}

#div_contenedor{
position:absolute;
padding:0px; 
overflow:hidden;

bottom: 0;
left:0em;
height:83%;
width:100%;

z-index:99;

	display: flex;
	align-items: center;
	justify-content: center;

}

#div_area{
position:absolute;
overflow:auto;
z-index:999;
height:99%;
width:100%;
left:22%;
}



/* barra */
#div_barra_login{
position:absolute;
padding:12px 0px 0px 0px;
overflow:hidden;

bottom:0.8em;
left:5%;
height:3em;
width:90%;

z-index:9999;

background:transparent;
color:#a55773;
text-align:center;
font-weight:Bold;
}




input[type="password"] {
  padding: 0 40px;
  width: 10%;
  margin: auto;
  border: none;
  outline: none;
  font-size: 6px;
  color: transparent;
  text-align: center;
	background: none;
}

input:focus {
  outline: none;
}

.pinButton{
	font-weight:Bold;
	border: none;
	font-size: 1em;
	border-radius: 50%;
	height: 50px;
	width: 50px;
	font-weight: 550;
	color: transparent;
	text-shadow: 0 0 0 var(--letra_pinlogin);
	margin: 7px 7px;
	background: var(--boton_pinlogin);
	backdrop-filter: blur(1px);
		cursor:pointer;
}

.clear,
.enter {
  font-size: 1em !important;
}

.pinButton:hover {
  box-shadow: var(--boton_pinlogin) 0 0 1px 1px;
}
.pinButton:active {
  background: var(--boton_pinlogin_activo);
  color: var(--letra_pinlogin_activo);
}
.clear:hover {
  box-shadow: #ff3c41 0 0 1px 1px;
}
.clear:active {
  background: #ff3c41;
  color: #fff;
}
.enter:hover {
  box-shadow: #47cf73 0 0 1px 1px;
}
.enter:active {
  background: #47cf73;
  color: #fff;
}





/* Estilo básico */
.gif-container {
position: absolute;
/* top: 0em; */
width: 30%;
height: 17%;
margin: 35%;
display: flex;
justify-content: center;
align-items: center;
}
.gif-container img {
width: 100%;
height: 100%;
mix-blend-mode: multiply; /* Mezcla para eliminar fondo */
}
.hidden {
display: none; /* Ocultar GIF después de cierto tiempo */
}


/* laptop 15'7 */
@media only screen and (min-width: 1667px) {}

/* laptop 1570*/
@media only screen and (min-width: 1441px) and (max-width: 1666px) {
	/*Login*/
	.fondo123_login{
	left: 42.5%;
	width: 15%;
	}
	.logo1{
		padding: 5%;
		margin: 9% 45% 0 45%;
		width: auto;
		height: auto;
		background-position: top;
		background-repeat: no-repeat;
		background-size: 65%;
	}
	.gif-container {
		width: 9%;
		height: auto;
		margin: 7.8% 45.4% 0 45.4%;
	}

.pinButton {
	height: 40px;
	width: 40px;
	margin: 3px;
}
.loginerror {
	top: 26%;
	font-size: 0.8em;
}


}

/* laptop 1440*/
@media only screen and (min-width: 1024px) and (max-width: 1440px) {}

/* laptop / tableta	1024*/
@media only screen and (min-width: 835px) and (max-width: 1024px) {
	.pinButton {
	font-size: 0.8em;
	height: 30px;
	width: 30px;
	}
.logo1 {
	padding: 5%;
	margin: 2%;
	width: 1%;
	background-size: 66%;
}
	.gif-container{display:none;}
	.fondo123_login{display:none;}
	.loginerror {
	top: 4%;
	font-size: 0.8em;
	}
}



/* iPlay mini landscape*/
@media only screen and (min-width: 769px) and (max-width: 834px) {
	
	
	
.pinButton {
font-weight: Bold;
border: none;
font-size: 0.9em;
border-radius: 50%;
height: 40px;
width: 40px;
font-weight: bold;
margin: 4px;
}
.fondo123_login{display:none;}
.gif-container {
width: 15%;
height: auto;
margin: 22% 11%;
}
.logo1 {
padding: 8%;
margin: 24.5% 10.5%;
width: 5%;
background-size: 66%;
}
.loginerror {
top: 15%;
font-size: 0.9em;
}


}

/* tableta iplay mini */
@media only screen and (min-width: 481px) and (max-width: 768px) {
		/*LOGIN*/
	.loginerror {
		top: 26%;
	}
	.logo1 {
		margin: 37.7% 40% 0 40%;
		padding: 9.8%;
		width: 4%;
	}
	.fondo123_login{
	left: 25%;
	width: 50%;
	}
	
#div_contenedor{
border-radius:22px 22px 0 0;
z-index:999;
background-color:var(--fondo);

}
#lbl_titulo{
	height:11em;
}







}

/* celular g 82*/
@media only screen and (min-width: 426px) and (max-width: 480px) {}

/*otros celulares*/
@media only screen and (min-width: 375px) and (max-width: 426px) {
	/*login*/
	.pinButton {
		height: 40px;
		width: 40px;
	}
	.loginerror {
		top: 22%;
		font-size: 14px;
	}
	.logo1 {
		margin: 25% 30%;
	}
}

/* iPhone de favi */
@media only screen and (max-width: 374px) {}