body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Poppins', sans-serif;
  box-sizing: border-box;
  overflow-x: hidden; /* Previene desplazamiento lateral */
  overflow-y: hidden; /* Previene el desplazamiento vertical en todo el documento */

}

.container {
  display: flex;
  height: 100vh;
  overflow-x: hidden; /* Asegura que el contenedor principal no cause desplazamiento lateral */
}

.column {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: hidden; /* Previene desplazamiento lateral en las columnas */
}

.frame {
  min-width: 100px;
  background: #ffffff;
  border-radius: 25px;
  padding: 20px;
  width: 360px; /* Ajusta este valor según sea necesario */
  max-width: 100%; /* Asegura que el frame no sea más ancho que la pantalla */
  box-sizing: border-box; /* Incluye padding en el cálculo del ancho */
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0px -4px 6px rgba(0, 0, 0, 0.1), 0px 4px 6px rgba(0, 0, 0, 0.1);
}
  .icon {
    background: url('./assets/images/f46287a2-a4c6-416c-91f7-61e03cf20b10.png') no-repeat center center;
    background-size: contain; /* Asegura que la imagen se ajuste dentro del div.icon */
    width: 80px; /* Ajusta al tamaño de tu icono */
    height: 80px; /* Ajusta al tamaño de tu icono */
    margin-bottom: 20px;
    margin-top: 50px;
  }
  .title {
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  font-weight: bold;
  text-align: center; /* Centra el texto horizontalmente */
  width: 100%; /* Asume el ancho completo de su contenedor */
  margin: 0; /* Remueve cualquier margen por defecto */
}

  .subtitle {
  color: #727782;
  font-family: Poppins, var(--default-font-family);
  font-size: 14px;
  font-weight: 500; 
  text-align: center;
  margin-bottom: 30px;/* Subtitle styles */
  }
  .input-field {
  font-family: 'Poppins', sans-serif;
  font-size: 16px; /* Ajusta el tamaño de la fuente según tus preferencias */
  padding: 10px 20px; /* Asegúrate de que el relleno coincida con el de tu botón para alinearlos */
  border: 2px solid #c2c8ce; /* Borde más fuerte que el color del placeholder */
  color: #a7b0b9; /* Color del texto cuando el usuario escribe */
  background-color: #ffffff; /* Fondo blanco o el color de fondo que desees */
  border-radius: 25px; /* Bordes redondeados como el botón de ingresar */
  width: 90%; /* El mismo ancho que el botón de ingresar */
  box-sizing: border-box; /* Incluye el padding y el borde en el ancho total del input */
  margin-bottom: 10px; /* Añade un margen inferior si es necesario para separarlo del botón */
}

.input-field::placeholder {
  color: #a7b0b9; /* Color gris para el placeholder */
  opacity: 1; /* Asegura que el color del placeholder sea opaco */
}

.input-field:focus {
  outline: none; /* Elimina el contorno que aparece al enfocar el input */
  border-color: #023aae; /* Cambia el color del borde al enfocar el input si lo deseas */
}
.button {
  background-color: #023aae;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: space-between; /* Modificado para separar el texto y el icono */
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  width: 90%;
  margin: 10px 0;
}

.button span {
  flex-grow: 1; /* Hace que el texto ocupe todo el espacio disponible, centrando efectivamente el texto */
  text-align: center;
}

.button:active i {
  transform: scale(1.5); /* Aumenta la escala del icono a 1.5 */
  transition: transform 0.2s ease; /* Añade una transición suave */
}
.button:hover {
  background-color: #012f8e; /* Color del botón al pasar el mouse */
  transition: background-color 0.3s ease; /* Transición suave para el cambio de color */
}
  
.register-link {
  font-family: 'Poppins', sans-serif;
  color: #727782; /* Color gris para el texto */
  font-size: 14px; /* Ajusta al tamaño de fuente deseado */
}

.register-action {
  font-weight: bold;
  color: #003399; /* Azul para el texto "Registrarme" */
  cursor: pointer; /* Cambia el cursor a un puntero para indicar que es un enlace/clickable */
}

.register-action:hover {
  text-decoration: underline; /* Opcional: subraya el texto al pasar el mouse para mayor énfasis */
}
.separator {
  height: 2px; /* Altura del separador */
  background-color: #4e4e4e25; /* Color gris del separador */
  width: 70%; /* Ancho del separador es el 70% del contenedor */
  margin: 20px auto; /* Espacio arriba y abajo del separador y centrado horizontalmente */
}
.column {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Organiza los hijos verticalmente */
    background: url('./assets/images/FONDO.png') no-repeat center right;
    background-size: contain;
    
  }
 
  .white {
    background-color: white;
    background: white;
  }
  .blue {
  display: flex;
  flex-direction: column; /* Asegura que el contenido se apile verticalmente */
  align-items: flex-start; /* Alinea el contenido a la izquierda */
  padding: 0 10%; /* Añade un poco de padding para no pegar el texto al borde */
  background: #003399 url('./assets/images/fondo2.png') no-repeat center right; /* Color de fondo y fondo aplicado */
  background-size: contain;
  color: white;
}

  
  .title-2 {
    font-size: 45px;
    font-weight: 600;
    margin: 0 0 20px; /* Espacio debajo del título */
    max-width: 80%; 
  }
  .subtitle-2 {
    font-size: 20px;
    font-weight: 300;
    width: 100%; /* Opcional, ajusta según necesidad */
    max-width: 70%; 
  }

  .corner-image {
  position: absolute;
  bottom: 0px; /* Aleja la imagen 0px del borde inferior */
  right: 30px; /* Aleja la imagen 20px del borde derecho */
  background: url('./assets/images/58ab1003-6974-436a-8b40-b1319e9647c1.png') no-repeat;
  background-size: contain; /* Ajusta según necesites para mantener las proporciones de la imagen */
  width: 100px; /* Ajusta según el tamaño deseado de la imagen */
  height: 100px; /* Ajusta según el tamaño deseado de la imagen */
  z-index: 2; /* Asegura que la imagen se muestre sobre el fondo pero debajo del texto */
}
@media screen and (max-width: 1024px) {
  /* Para tablets */
  .blue, .corner-image {
    display: none; /* Oculta la columna azul y las imágenes decorativas */
  }

  .container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .white, .column {
    width: 100%; /* Aprovecha todo el ancho disponible */
    max-width: 500px; /* Limita el ancho máximo para tablets */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .frame {
    width: 80%; /* Ajusta el ancho del frame para tablets */
    margin: auto; /* Centra el frame vertical y horizontalmente */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Estilo opcional para sombra */
  }

}
/* Estilos básicos */
/* ... Tus estilos existentes ... */

/* Responsividad */
@media screen and (max-width: 1024px) {
  .blue, .corner-image, .title-2, .subtitle-2 {
    display: none;
  }

  .container, .column {
    flex-direction: column;
    align-items: center;
    width: 100vw;
  }

  .frame {
    width: 90%; /* Ajusta el ancho del frame en dispositivos móviles */
    margin: 20px auto; /* Centra el frame verticalmente */
   
  }

  /* Asegura que los inputs y botones se ajusten al nuevo tamaño del frame */
  .input-field, .button {
    width: calc(100% - 40px); /* Ajusta el ancho según el padding del frame */
  }
 
  
  }
@media screen and (max-width: 820px) {
  .blue, .corner-image, .title-2, .subtitle-2 {
    display: none;
  }

  .container, .column {
    flex-direction: column;
    align-items: center;
    width: 100vw;
  }

  .frame {
    width: 90%; /* Ajusta el ancho del frame en dispositivos móviles */
    margin: 20px auto; /* Centra el frame verticalmente */
  }

  /* Asegura que los inputs y botones se ajusten al nuevo tamaño del frame */
  .input-field, .button {
    width: calc(100% - 40px); /* Ajusta el ancho según el padding del frame */
  }
 
  
  }

/* Mantén tus otras media queries y estilos sin cambios */
/* Ajustes para dispositivos móviles */
@media screen and (max-width: 768px) {
  .blue, .corner-image, .title-2, .subtitle-2 {
    display: none;
  }

  .container, .column {
    flex-direction: column;
    align-items: center;
    width: 100vw;
  }

  .frame {
    width: 90%; /* Ajusta el ancho del frame en dispositivos móviles */
    margin: 20px auto; /* Centra el frame verticalmente */
  }

  /* Asegura que los inputs y botones se ajusten al nuevo tamaño del frame */
  .input-field, .button {
    width: calc(100% - 40px); /* Ajusta el ancho según el padding del frame */
  }
 
  
  }

  @media screen and (max-width: 414px) {
  .container {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra el contenido verticalmente */
    align-items: center; /* Centra el contenido horizontalmente */
    width: 100vw; /* Asegura que el contenedor ocupe el ancho completo de la vista */
    height: 100vh; /* Asegura que el contenedor ocupe la altura completa de la vista */
  }

  .frame {
    width: 95%; /* Ajusta el ancho del frame para llenar más espacio */
    margin: auto; /* Añade esto si aún no está presente para centrar horizontalmente */
    box-shadow: 0px -4px 6px rgba(0, 0, 0, 0.1), 0px 4px 6px rgba(0, 0, 0, 0.1); /* Opcional: ajusta la sombra según tus preferencias */
    /* Asegura que no haya margen superior o inferior específico que pueda desplazar el frame de su centro */
  }
}

.tablet-header{
  display: flex;
  justify-content: center; /* Centra el contenido horizontalmente */
  align-items: center; /* Centra el contenido verticalmente */
  background-color: #003399;
  width: 100%;
  padding: 10px 0;
}
.header-logo {
  width: auto; /* Mantiene la proporción del logo */
  height: 40px; /* Ajusta la altura para hacer el logo más pequeño */
  max-width: 100%; /* Asegura que el logo no exceda el ancho del contenedor */
}
@media screen and (min-width: 1025px) {
  .tablet-header {
    display: none;
  }
}