/* Vora vermella en focus als inputs */
.form-control:focus {
    border-color: #dc3545; /* vermell Bootstrap danger */
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

/* Layout base */
.login-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Separador vermell */
.login-separator {
    background-color: #c62828;
    opacity: 0.9;
    border-radius: 2px;
}

/* Mòbil i pantalles mitjanes: barra horitzontal */
@media (max-width: 991px) {
    .login-separator {
        width: 100%;
        height: 4px;
        margin: 1.5rem 0;
    }
}

/* Escriptori: barra vertical */
@media (min-width: 992px) {
    .login-box {
        flex-direction: row;
        align-items: stretch;
    }

    .login-separator {
        width: 4px;
        height: auto;
        margin: 0 2rem;
    }
}



/* Imatge del login responsive */
.login-logo img {
    width: 100%;
    height: auto;
    max-width: 300px; /* escriptori */
}

/* Pantalles mitjanes (tablets, portàtils petits) */
@media (max-width: 991px) {
    .login-logo img {
        max-width: 220px;
    }
}

/* Pantalles petites (mòbils normals) */
@media (max-width: 768px) {
    .login-logo img {
        max-width: 170px;
    }
}

/* Pantalles molt petites (mòbils estrets) */
@media (max-width: 480px) {
    .login-logo img {
        max-width: 150px;
    }
}