@media (max-width: 767px) {
    .login-container {
        width: 100%; /* Ocupa el 100% del ancho en pantallas pequeñas */
    }
    .image-container {
        display: none; /* Oculta la imagen en pantallas pequeñas */
    }
    .login-title {
        font-size: 16px; /* Reduce el tamaño del título */
    }
}

.login-title {
    font-family: 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 44.8px;
    text-align: center;
    text-decoration: underline;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin-top: 10px;
}

.btn-login {
    width: 279px; /* Ancho del botón */
    height: 40px; /* Altura del botón */
    background-color: #093559; /* Color de fondo */
    color: white; /* Color del texto */
    font-weight: 700; /* Negrita */
    border-radius: 8px 0px 0px 0px; /* Bordes redondeados solo en la parte superior izquierda */
    opacity: 1; /* Asegúrate de que el botón sea visible */
    border: none; /* Sin borde */
    font-size: 16px; /* Tamaño de fuente */
    transition: background-color 0.3s ease-in-out; /* Transición al pasar el ratón */
}

.btn-login:hover {
    background-color: #0a4d75; /* Color más claro para el hover */
}

/* Estilo para el texto de "¿Aún no tienes cuenta? Regístrate" */
.register-text {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 19.2px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    opacity: 1; /* Asegura que el texto sea visible */
    width: 390px; /* Ajusta el ancho del texto */
    height: 40px; /* Ajusta la altura */
    margin-top: 485px; /* Espacio adicional arriba */
}

/* Estilo para el enlace "Regístrate" */
.register-link {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 19.2px;
    text-align: center;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #093559; /* Color del enlace */
}

.register-link:hover {
    color: #3bca0a; /* Color del enlace al pasar el ratón */
}

/* Estilo para el texto de "¿Olvidaste tu contraseña? Recuperar" */
.forgot-password-text {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 19.2px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    opacity: 1; /* Asegura que el texto sea visible */
    width: 279px; /* Ajusta el ancho del texto */
    height: 20px; /* Ajusta la altura */
    margin-top: 20px; /* Espacio adicional arriba */
}

/* Estilo para el enlace "Recuperar" */
.forgot-password-link {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 19.2px;
    text-align: center;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #093559; /* Color del enlace */
}

.forgot-password-link:hover {
    color: #3bca0a; /* Color del enlace al pasar el ratón */
}


.btn-register {
    width: 279px; /* Ancho del botón */
    height: 40px; /* Altura del botón */
    background-color: #093559; /* Color de fondo */
    color: white; /* Color del texto */
    font-weight: 700; /* Negrita */
    border-radius: 8px 0px 0px 0px; /* Bordes redondeados solo en la parte superior izquierda */
    opacity: 1; /* Asegúrate de que el botón sea visible */
    border: none; /* Sin borde */
    font-size: 16px; /* Tamaño de fuente */
    transition: background-color 0.3s ease-in-out; /* Transición al pasar el ratón */
}

.btn-register:hover {
    background-color: #093559; /* Color más claro para el hover */
}

.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #25D366;
    color: white;
    border-radius: 50%;
    padding: 15px;
    font-size: 28px;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.2);
    box-shadow: 0 6px 12px rgba(0,0,0,0.4);
}