formulario.css

* {
	box-sizing: border-box;
}
body {
	font-family: 'Roboto', sans-serif;
	background: #E5E5E5;
}
main {
	max-width: 800px;
	width: 90%;
	margin: auto;
	padding: 40px;
}

.formulario {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.formulario__label {
  display: block;
  font-weight: 700;
  padding: 10px;
  cursor: pointer;
}

.formulario__grupo-input {
  position: relative;
}

.formulario__input {
width: 100%;
background: #fff;
border: 3px solid transparent;
border-radius: 3px;
height: 45px;
line-height: 45px;
padding: 0 40px 0 10px;
transition: .3 ease all;
}

.formulario__input:focus {
  border: 3px solid blueviolet;
  outline: none;
  box-shadow: 3px 0 38px rgba(163, 163, 163, 0.4);
}

/*Técnica para ocultar el 'mensaje de error', pone display: none
y se combina con la función de abajo*/
.formulario__input-error {
  font-size: 12px;
  margin-bottom: 0;
  display: none;
}

.formulario__input-error-activo {
  display: block;
}

/*Ahora trabaja con el ícono*/
.formulario__validacion-estado {
  position: absolute;
  right: 10px;
  bottom: 15px;
  /*Con z-ondex se asegura que quede por encima de otros elementos*/
  z-index: 100;
  font-size: 16px;
  /*Para ocultarlo coloca opacity: 0*/
  opacity: 0;
}

/*Ahora va por el checkob. Con esto lo separa de la palabra.*/
.formulario__checkbox {
  margin-right: 10px;
}

.formulario__grupo-terminos,
.formulario__mensaje,
.formulario__grupo-btn-enviar {
  grid-column: span 2;
}

/*Nuevamente para ocultar el mensaje le coloca display: none*/
.formulario__mensaje {
  height: 45px;
  line-height: 45px;
  background-color: #f66060;
  padding: 0 15px;
  border-radius: 3px;
  display: none;
}

/*El mensaje se va a mostrar cuando tenga el modificador de activo.
Cuando tenga ese modificador el display será block*/

.formulario__mensaje {
  display: block;
}

/*Ejemplo de cómo acomodar una expresión con elemento <p>.
Es un párrafo, por lo tanto tiene márgenes y estos se pueden
acomodar. Lo llama con .formulario__mensaje p y le coloca
margin 0.*/

.formulario__mensaje p {
  margin: 0;
}

/*De acá abajo trabaja con el botón enviar*/

.formulario__grupo-btn-enviar {
display: flex;
flex-direction: column;
align-items: center;
}

.formulario__btn {
  height: 45px;
  line-height: 45px;
  width: 30%;
  background: black;
  color: #E5E5E5;
  font-weight: bold;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: .1s ease all;
}

.formulario__btn:hover {
  box-shadow: 3px 0px 30px rgba(163, 163, 163, 1);
}

.formulario__mensaje-exito {
  font-size: 14px;
  color: #119200;
  display: none;
}

.formulario__mensaje-exito-activo {
  display: block;
}

/* Estilos para validación. Las casillas cambian de color de verde a rojo
cuando la información agregada es incorrecta. Ver que esto lo trabaja con 
el ícono y en todos los grupos. Después de hacer esto va al html y cambia
a formulario__grupo-incorrecto (antes era sólo formulario__grupo*/
.formulario__grupo-correcto .formulario__validacion-estado {
  color: #1ed12d;
  opacity: 1;
}

/* Se lee así, "accedemos al grupo formulario__grupo con el modificador '-incorrecto'
y queremos que el formulario label que tenemos dentro sea de color rojo. Luego quiero
acceder a .formulario__grupo-incorrecto quiero también acceder a .formulario__validacion-estado
que sería el ícono para decirle que debe ser rojo y con opacidad 1.

Todo esto para que el usuario vea la palabra "Usuario" en rojo cuando ingresa mal los
datos*/ 
.formulario__grupo-incorrecto .formulario__label {
  color: red;
}

.formulario__grupo-incorrecto .formulario__validacion-estado {
  color: red;
  opacity: 1;
}

/*Para modificar la cajita, el box, y que pase a rojo también hay que hacer una entrada 
por acá.*/
.formulario__grupo-incorrecto .formulario__input {
  border: 3px solid red;
}

/*¡¡¡Luego vuelve a modificar el html de y le quita .formulario__grupo-incorrecto
para dejar sólo formulario__grupo!!! ¿Cuándo se accede a uno u otro?*/

/*Para los media se lee, "quiero acceder a un media, que sea de pantalla y cuando tenga
un max-width, es decir cuando tenga un ancho máximo de 800px* se cambian sus columnas.
Por eso se diseña un gtc... Además hay que modificar el grupo de los términos 
span 2 por sólo 1.*/

@media screen and (max-width: 800px) {
	.formulario {
		grid-template-columns: 1fr;}
	}

	.formulario__grupo-terminos, 
	.formulario__mensaje,
	.formulario__grupo-btn-enviar {
		grid-column: 1;
	}