/*diseño de cuerpo*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}
/*Diseño de contenedor principal*/
.contenedor-principal {
  width: 100vw;
  height: 100vh;
  background: #f4f4f4; 
  display: flex;
  justify-content: center;
  align-items: center;
}
/*Diseño de formulario*/
.contenedor-formulario {
  width: 400px;
  height: 650px;
  background: #fff;
  border: 1px solid #ccc;
  position: relative;
  overflow: hidden;
}
/*Diseño de grupo de botones para alternar entre login y registro*/
.grupo-botones-alternar {
  width: 220px;
  margin: 30px auto 20px;
  position: relative;
  border: 1px solid #ccc;
  background: #fff;
  display: flex;
}
/*Diseño de botones para alternar entre login y registro*/

.btn-alternar {
  padding: 10px 0;
  cursor: pointer;
  background: transparent;
  border: none;
  width: 50%;
  font-size: 14px;
  color: #000;
  z-index: 2;
  position: relative;
}
/* Diseño del indicador activo debajo de los botones de alternar */
#indicador-activo {
  position: absolute;
  width: 50%;
  height: 100%;
  background: #e0e0e0; 
  transition: 0.3s;
  z-index: 1;
}
/* Diseño de los formularios de login y registro */
.grupo-inputs {
  position: absolute;
  width: 300px;
  top: 100px;
  transition: 0.4s;
  display: flex;
  flex-direction: column;
}
/* Posiciones iniciales de los formularios */
#formulario-login { left: 50px; }
#formulario-registro { left: 450px; }


.grupo-inputs b {
  font-size: 13px;
  color: #333;
  margin: 10px 0 5px;
}

.btn-enviar {
  width: 100%;
  background: #333; 
  color: #fff;
  border: none;
  padding: 10px;
  font-size: 14px;
  cursor: pointer;
  margin-top: 15px;
}

.btn-enviar:hover { 
  background: #000; 
}