.input-field {
    position: relative;
}

.toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #999;
}

.toggle-password:hover {
    color: #223450;
    cursor: pointer;
}

.input-field i.filled {
    color: #223450; /* Cambia este color según tus necesidades */
}
/* Alinear adecuadamente el ícono */
.toggle-password {
    right: 15px;
}

.logo-container {
    position: absolute;
    top: 40px; /* Ajusta según el espacio que quieras entre el logo y la parte superior */
    left: 75%;
    transform: translateX(-50%); /* Centra el logo */
}

.logo {
    width: 180px; /* Ajusta el tamaño del logo */
    height: auto;
}

@media (max-width: 570px) {
    .logo {
        display: block;
    }

    .logo-container {
        position: absolute;
        top: 35%; /* Ajusta según el espacio que quieras entre el logo y la parte superior */
        left: 50%;
        transform: translateX(-50%); /* Centra el logo */
    }
}


    .error-message {
    display: block;
    font-size: 0.82rem;
    margin-top: 3px;

    /* estilo minimalista */
    color: #d9534f;                 /* rojo suave */
    font-weight: 400;
    letter-spacing: 0.3px;

    /* animación delicada */
    opacity: 0;
    transform: translateY(-2px);
    animation: fadeIn 0.25s ease-out forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}