.contenido-principal {
  background-color: #d2e6cd; /*color de fondo*/
  border: 3px solid #1e2e1f; /*borde*/
  margin: 10px auto; /*margen arriba y abajo, centrado horizontalmente*/
  max-width: 800px; /*ancho maximo*/
  padding: 70px; /*espacio interno*/
}

.forms-nuevos {
  text-align: center; /*centra el texto horizontalmente*/
  margin: 15px; /*margen alrededor*/
  font-weight: bold; /*negrita*/
}

.nombre-apellidos-forms,
.email-forms,
.usuario-forms {
  font-weight: bold; /*negrita*/
  display: grid; /*activa grid para poner los elementos en filas y columnas*/
  grid-template-columns: auto 1fr auto 1fr; /*columnas*/
  gap: 5px; /*separacion entre filas y columnas*/
  align-items: center; /*centra verticalmente los elementos*/
  justify-content: center; /*centra horizontalmente los elementos*/
  padding: 10px; /*espacio interno*/
  margin: 50px 0; /*separacion entre filas*/
}
.campo {
  display: contents; /*para los elementos hijos*/
}
.campo label {
  text-align: left; /*alinea el texto a la izquierda*/
  font-size: 16px; /*tamaño letra*/
}
.campo input {
  width: auto; /*ancho automatico*/ 
  padding: 8px; /*espacio interno*/
  margin-top: 5px;  /*margen por encima*/
  box-sizing: border-box; /*quita problemas de salida de margen*/
  border: 1px solid #bababa; /*color borde*/
  border-radius: 10px; /*redondeado*/
}
.fecha-nacimiento-forms{
  font-weight: bold; /*negrita*/
  display: grid; /*activa grid para poner los elementos en filas y columnas*/
  grid-template-columns: auto 1fr; /*columnas*/
  gap: 5px; /*separacion entre filas y columnas*/
  align-items: center; /*centra verticalmente los elementos*/
  justify-content: center; /*centra horizontalmente los elementos*/
  padding: 10px; /*espacio interno*/
  margin: 0 auto; /*margen arriba y abajo, centrado horizontalmente*/
  width: fit-content; /*ajusta el ancho al contenido*/
}
#fecha-nacimiento {
  width: auto; /*ancho automatico*/
  padding: 8px; /*espacio interno*/
  margin-top: 5px; /*margen por encima*/
  box-sizing: border-box; /*quita problemas de salida de margen*/
  border: 1px solid #bababa; /*color borde*/
  border-radius: 10px; /*redondeado*/
  cursor: pointer; /*cambia el cursor al pasar por encima*/
}
.imagen-forms {
  font-weight: bold; /*negrita*/
  display: flex; /*activa flexbox para poner los elementos en fila*/
  margin: 20px auto; /*margen arriba y abajo, centrado horizontalmente*/
  align-items: center; /*centra verticalmente los elementos*/
  justify-content: center; /*centra horizontalmente los elementos*/
  padding: 10px; /*espacio interno*/
  position: relative; /*para posicionar el input de archivo*/
}
.imagen-forms input[type="file"] {
  position: absolute; /*posicion absoluta*/
  opacity: 0; /*oculto*/
  width: 30%; /*ancho*/
  height: 100%; /*alto*/
  cursor: pointer; /*cambia el cursor al pasar por encima*/
}
.imagen-forms label[for="imagen"] {
  background-color: white; /*color de fondo*/
  padding: 10px; /*espacio interno*/
  border-radius: 10px; /*redondeado*/
  font-weight: bold; /*negrita*/
  transition: 0.3s; /*transicion para hover*/
  border: 1px solid #bababa; /*color borde*/
  border-radius: 10px; /*redondeado*/
}
.imagen-forms label[for="imagen"]:hover {
  background-color: #e3e1e1; /*color al pasar el raton*/
}
.terminos-priv {
  display: flex; /*activa flexbox para poner los elementos en fila*/
  justify-content: center; /*centra horizontalmente los elementos*/
  gap: 5px; /*separacion entre elementos*/
  font-size: 14px; /*tamaño de letra*/
  padding: 10px; /*espacio interno*/
}
.terminos-priv label {
  cursor: pointer; /*cambia el cursor al pasar por encima*/
}
.btn-datos {
  display: block; /*para que ocupe toda la linea*/
  width: 30%; /*ocupa el 30% del contenedor*/
  margin-left: auto; /*centra el boton*/
  margin-right: auto; /*centra el boton*/
  margin-top: 15px; /*margen por encima*/
  justify-content: center; /*centra horizontalmente los elementos*/
  background-color: #e3e1e1; /*color de fondo*/
  border: 1.5px solid #6a6a6a; /*borde*/
  color: rgb(0, 0, 0); /*color letra*/
  font-weight: bold; /*negrita*/
  padding: 10px; /*espacio interno*/
  border-radius: 10px; /*redondeado*/
  transition: 0.3s; /*transicion para hover*/
  cursor: pointer; /*cambia el cursor al pasar por encima*/
}
.btn-datos:hover {
  background-color: #a1a1a1; /*color al pasar el raton*/
}
.btn-datos:disabled {
  background-color: #c8c8c8; /*color de fondo*/
  border-color: #6a6a6a; /*color borde*/
  cursor: not-allowed; /*cambia el cursor*/
  opacity: 0.5; /*opacidad*/
}
.btn-datos:disabled:hover {
  background-color: #c8c8c8; /*color de fondo*/
  transform: none; /*sin transformacion*/
}
.info-archivo {
  font-size: 14px; /*tamaño letra*/
  color: #000000ff; /*color letra*/
  margin-top: 10px; /*margen por encima*/
  text-align: center; /*centra el texto horizontalmente*/
  width: 100%; /*ocupa todo el ancho del contenedor*/
  font-weight: lighter; /*letra fina*/
}