/* styles.css */

/* Reset de márgenes y paddings */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Ocupa toda la pantalla */
html, body {
  height: 100%;
  width: 100%;
  font-family: 'Poppins', sans-serif;
}

/* Contenedor principal */
.container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex; /* Centra contenido */
  justify-content: center;
  align-items: center;
}

/* Imagen de fondo */
.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Asegura que la imagen cubra todo el fondo */
  z-index: -2; /* Envía la imagen al fondo */
}

/* Gradiente sobre la imagen */
.gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(157deg, rgba(222, 238, 255, 0.5) 0%, #B9DCFF 100%);
  z-index: -1; /* Coloca el gradiente detrás del contenido */
}

/* Contenido centrado */

/* Contenido centrado */
.header, .card {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #10294D;

  /* Aumentar la altura explícitamente */
  height: 370px; /* Ajusta esta altura según lo que necesites */
  padding: 40px 20px; /* Aumentar el padding para mantener proporciones */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centra verticalmente */
  align-items: center; /* Centra horizontalmente */
}

/* Estilos de la tarjeta */
.card {
  background: rgba(255, 255, 255, 0.9); /* Fondo translúcido */
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  max-width: 400px;
  width: 100%;
  margin-bottom: 30px; /* Añadir un margen inferior para separar de otros elementos */
}

/* Input y botón */
.input-container {
  margin-bottom: 20px; /* Aumenta el espacio entre cada input */
  text-align: left;
}

.input-container label {
  font-size: 14px;
  font-weight: bold;
  display: block; /* Asegura que el label ocupe toda la línea */
  margin-bottom: 15px; /* Espacio entre el label y el input */
  margin-top: 30px; /* Espacio encima del primer label */
}

.input-container input {
  width: 100%;
  padding: 12px; /* Aumenta el padding del input */
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  margin-bottom: 15px; /* Espacio entre los inputs */
}

.submit-button {
  width: 100%;
  padding: 12px;
  background: #3683FB;
  color: white;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 30px; /* Añade espacio debajo del botón */
}


.link-container {
  margin-top: 40px;
}

.link-container span {
  font-size: 14px;
  color: #10294D;
  margin-right: 5px; /* Espacio entre el texto y el enlace */
}

.link-container a {
  font-size: 14px;
  color: #3683FB;
  text-decoration: underline;
}

.header {
  display: block; /* Cambiar a block para que los elementos se apilen verticalmente */
}

/* Título principal */
.header-title {
  font-size: 40px; /* Aumentar tamaño del título */
  font-weight: bold;
  margin-bottom: 20px; /* Más espacio debajo del título */
}

/* Subtítulo */
.header-subtitle {
  font-size: 18px; /* Aumentar tamaño del subtítulo */
  font-weight: normal;
  color: #555555;
  margin-top: 10px; /* Espacio encima */
  margin-bottom: 20px; /* Espacio debajo */
}


.header-subtitle {
  display: flex; /* Alinea las imágenes horizontalmente */
  gap: 10px; /* Espacio entre las imágenes */
  margin-right: 10px; /* Un poco de espacio entre las imágenes y el texto */
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
  margin-top: 100px !important; /* Uso de !important para asegurar que se aplique */
}

/* Reducir el tamaño de "with support" */
.logo-container div div {
  font-size: 9px; /* Tamaño más pequeño para el texto "with support" */
  color: #555555; /* Cambiar el color si es necesario */
}

.cier-image {
  max-width: 200px; /* Ajusta este valor según tus necesidades */
  height: auto; /* Mantiene las proporciones */
}

/* Asegúrate de que las imágenes se ajusten bien */
.logo-container img {
  max-width: 200px; /* Ajusta el tamaño de las imágenes según necesites */
  height: auto; /* Mantiene la proporción de las imágenes */
}

/* Estilo específico para el formulario de registro */
#input-register {
  margin-bottom: 10px; /* Espaciado más ajustado entre los campos */
  text-align: left;
}

#input-register label {
  margin-top: 7px;
  font-size: 14px;
  font-weight: bold;
}

#input-register input {
  margin-top: 2px;
  margin-bottom: 5px;
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

/* Contenedor de los botones del formulario de registro */
#botton-register {
  display: flex; /* Flexbox para organizar los botones en una fila */
  justify-content: space-between; /* Espaciado uniforme entre los botones */
  gap: 10px; /* Espacio entre los botones */
  margin-top: 15px;
}

/* Botón "Enviar" */
#botton-register .submit-button {
  flex: 1; /* Ambos botones ocupan el mismo ancho */
  padding: 12px;
  background: #3683FB;
  color: white;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  transition: background 0.3s ease;
}

#botton-register .submit-button:hover {
  background: #2c6ec7; /* Color más oscuro al pasar el mouse */
}

/* Botón "Atrás" */
#botton-register .back-button {
  background: #ccc; /* Fondo gris claro */
  color: #000; /* Texto negro */
  transition: background 0.3s ease;
}

#botton-register .back-button:hover {
  background: #b3b3b3; /* Color más oscuro al pasar el mouse */
}