body {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centrar horizontalmente los elementos hijos */
    align-items: center; /* Centrar verticalmente los elementos hijos */
    height: 100vh; /* Establecer el cuerpo para ocupar toda la altura visible */
    margin: 0; /* Eliminar el margen predeterminado del cuerpo */
}

.header {
    margin-bottom: 20px; /* Espacio entre el encabezado y el formulario */
}

/* Estilos para el logo */
.logo {
    width: 300px;
    justify-content: center;

}

form {
    width: 300px;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center; /* Centrar los elementos dentro del formulario */
}

/* Estilos para los campos de texto y contraseña */
input[type="text"],
input[type="password"] {
    width: calc(100% - 30px); /* Ajustar el ancho para dejar espacio para el icono de ojo */
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box; /* Esto asegura que el ancho del cuadro incluya el padding y el borde */
    text-align: center; /* Centrar el texto del placeholder */
    display: inline-block; /* Para permitir que el icono de ojo se posicione correctamente al lado del campo */
    vertical-align: middle; /* Alinear verticalmente el campo de entrada */
}

/* Estilos para el botón de enviar */
input[type="submit"] {
    width: 100%;
    padding: 10px;
    background-color: #4cafa7;
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s;
}

/* Estilos adicionales para pantallas más pequeñas (menos de 768px) */
@media screen and (max-width: 768px) {
    form {
        width: 80%; /* Reducir el ancho del formulario en pantallas más pequeñas */
    }
}

/* Estilos para el icono de ojo */
.eye-icon {
    position: absolute;
    top: 55%;
    right: 20px; /* Ajusta según sea necesario */
    transform: translateY(-50%);
    cursor: pointer;

}