*{
	padding: 0;
	margin: 0;
	font-family: sans-serif;
}
/*Definición de variables para almacenar colores*/
:root{
	--fondo: #112;
	--negro: #001;
	--blanco: #ddd;
	--celeste: #0bd;
	--gris: #aaa;
	--verde: #5f5;
	--rojo: #f55;
}
body{
	background-color: var(--fondo);
}
.contenedor{
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 50px 0px;
}
.principal{
	width: 90%;
	color: var(--blanco);
}
.txt-ntd{
	margin-top: 10px;
}
.entradas{
	width: 100%;
	outline: none;
	border: none;
	font-size: 1rem;
	background-color: var(--fondo);
	border-bottom: 3px solid var(--celeste);
	color: var(--blanco);
}
.mensaje, .correcto{
	color: var(--verde);
	font-size: 0.8rem;
}
.error, .incoincidencia{
	color: var(--rojo);
	font-size: 0.8rem;
}
/**/
.cnt-cntr{
	width: 100%;
	position: relative;
	display: inline-block;
}
.espaneo{
	position: absolute;
	transform: translateY(-50%);
	right: 4px;
	top: 8px;
	cursor: pointer;
	overflow: hidden;
}
.pestana{
	border: 3px solid var(--gris);
	width: 20px;
	border-radius: 75%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.circulo{
	width: 10px;
	height: 10px;
	background-color: var(--gris);
	border-radius: 50%;
}
/**/
.txt-sgr{
	margin-top: 20px;
}
.cnt-dvr{
	width: 100%;
	background-color: var(--negro);
	margin-top: 25px;
}
.txt-advertencia{
	padding: 10px;
}
.cnt-btn{
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 25px 0px;
}
.continuar{
	border: none;
	cursor: pointer;
	font-size: 1.1rem;
	background-color: var(--celeste);
	color: var(--blanco);
	padding: 8px 20px;
}
.txt-ngr{
	display: block;
	text-align: center;
}
.enlace{
	color: var(--blanco);
}
/*Diseño responsivo*/
@media(min-width: 600px){
	.contenedor{
		padding: 15px 0px;
	}
	.principal{
		width: 500px;
		background-color: var(--fondo);
		padding: 30px;
		box-shadow: 0px 20px 40px var(--negro);
		border-radius: 15px;
	}
}
