.navbar-logo {
    max-height: 3.5rem;
    width: auto;
}

/* Header sin breakpoint fijo. Cuando los dos .navbar-row caben en una línea,
   justify-content:space-between los empuja a los extremos. Cuando dejan de caber,
   un ResizeObserver (ver _LayoutBase.cshtml) añade la clase .navbar--wrapped al
   <nav> y cada row pasa a ocupar el 100% de su línea con justify-content:center. */
nav.navbar > .container-fluid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    column-gap: 1rem;
    row-gap: 0.5rem;
}

nav.navbar > .container-fluid > .navbar-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-width: 0;
    gap: 0.5rem;
}

nav.navbar > .container-fluid > .navbar-row:first-child {
    justify-content: flex-start;
}

nav.navbar > .container-fluid > .navbar-row:last-child {
    justify-content: flex-end;
}

nav.navbar.navbar--wrapped > .container-fluid > .navbar-row {
    flex-basis: 100%;
    justify-content: center;
}

/* El componente Idioma usa ms-auto para empujarse a la derecha cuando es hijo directo
   del container-fluid (caso del Login, sin .navbar-row). Dentro del .navbar-row de
   este LayoutBase ese margen rompe el space-between/justify-content del row, así que
   lo neutralizamos solo en este contexto. Bootstrap declara .ms-auto con !important
   (margin-inline-start: auto !important), así que aquí también hace falta. */
nav.navbar > .container-fluid > .navbar-row > .ms-auto {
    margin-inline-start: 0 !important;
}

@media (max-width: 1199.98px) {
    #logout,
    nav.navbar > .container-fluid > .navbar-row .dropdown-toggle {
        min-width: 44px;
        min-height: 44px;
        padding: 0.375rem 0.75rem;
    }

    .navbar-logo {
        max-height: 1.85rem;
    }
}