/* ==========================================================================
   Barra superior (header) e a faixa de título/breadcrumb.
   Carregada pelo _Layout, junto do menu.css.
   ========================================================================== */

:root {
    --topo-ink: #1f2a37;
    --topo-suave: #6b7685;
    --topo-borda: #e4e9f0;
    --topo-azul: #1d5fa8;
    --topo-hover: #f1f5fa;
}

.right-panel header.header,
.right-panel .breadcrumbs {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Open Sans", "Helvetica Neue", Arial, sans-serif;
}

/* --- Barra superior ------------------------------------------------------ */

.right-panel header.header {
    padding: 11px 20px;
    background: #ffffff;
    border-bottom: 1px solid var(--topo-borda);
    box-shadow: 0 1px 2px rgba(16, 32, 56, .05);
}

    .right-panel header.header .header-menu > div[class*="col"] {
        padding: 0;
    }

    .right-panel header.header .header-left.mt-2 {
        margin-top: 0 !important;
    }

    .right-panel header.header .menutoggle {
        margin-top: 0;
    }

/* Nome da entidade. A altura de linha acompanha a do bloco do usuário, para os
   dois ficarem alinhados sem precisar de flex — flex no .header-menu empurrava
   a largura mínima da célula e criava rolagem horizontal perto de 800px. */
.topo-entidade {
    margin: 0;
    padding: 11px 0;
    overflow: hidden;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .06em;
    line-height: 1.35;
    text-transform: uppercase;
    color: var(--topo-ink);
}

/* --- Área do usuário ----------------------------------------------------- */

.user-area .dropdown-toggle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* O ícone vem depois do nome no HTML; aqui ele aparece antes. */
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 5px 14px 5px 5px;
    color: var(--topo-suave);
    border-radius: 999px;
    transition: background-color .15s ease, color .15s ease;
}

    .user-area .dropdown-toggle:hover,
    .user-area .dropdown-toggle:focus {
        color: var(--topo-ink);
        text-decoration: none;
        background: var(--topo-hover);
    }

    .user-area .dropdown-toggle > span {
        margin: 0 0 0 10px !important;
        overflow: hidden;
        max-width: 240px;
        font-size: 13.5px;
        font-weight: 500;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .user-area .dropdown-toggle > .fa {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 32px;
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        line-height: 32px;
        font-size: 14px;
        text-align: center;
        color: var(--topo-azul);
        background: #e8f1fc;
        border-radius: 50%;
    }

.user-area .user-menu {
    top: 58px !important;
    min-width: 216px;
    max-width: none;
    padding: 8px;
    background: #ffffff;
    border: 1px solid var(--topo-borda) !important;
    border-radius: 12px;
    box-shadow: 0 16px 34px rgba(16, 32, 56, .14);
}

    .user-area .user-menu .nav-link {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 8px 10px;
        font-size: 13.5px;
        line-height: 20px;
        color: #3c4858;
        border-radius: 8px;
        transition: background-color .15s ease, color .15s ease;
    }

        .user-area .user-menu .nav-link:hover,
        .user-area .user-menu .nav-link:focus {
            color: var(--topo-azul);
            background: var(--topo-hover);
        }

        .user-area .user-menu .nav-link .fa {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 18px;
            flex: 0 0 18px;
            width: 18px;
            margin-right: 10px;
            font-size: 14px;
            text-align: center;
            color: #8a95a5;
            transition: color .15s ease;
        }

        .user-area .user-menu .nav-link:hover .fa {
            color: var(--topo-azul);
        }

    .user-area .user-menu .dropdown-divider {
        margin: 6px 4px;
        border-top-color: #eaeef4;
    }

/* --- Faixa de título / breadcrumb ---------------------------------------- */

.right-panel .breadcrumbs {
    background-color: transparent;
}

    .right-panel .breadcrumbs .page-header {
        min-height: 0;
        background: transparent;
    }

        .right-panel .breadcrumbs .page-header h1 {
            margin: 0;
            padding: 20px 0 0;
            font-size: 20px;
            font-weight: 600;
            letter-spacing: -.01em;
            line-height: 1.3;
            color: var(--topo-ink);
        }

        .right-panel .breadcrumbs .page-header .breadcrumb {
            margin: 0;
            padding: 26px 0 0;
            font-size: 12.5px;
            text-transform: none;
            background: transparent;
            border-radius: 0;
        }

            .right-panel .breadcrumbs .page-header .breadcrumb li {
                color: var(--topo-suave);
            }

                .right-panel .breadcrumbs .page-header .breadcrumb li a {
                    color: var(--topo-suave);
                }

                    .right-panel .breadcrumbs .page-header .breadcrumb li a:hover {
                        color: var(--topo-azul);
                        text-decoration: none;
                    }

                .right-panel .breadcrumbs .page-header .breadcrumb li.active {
                    font-weight: 600;
                    color: var(--topo-ink);
                }

                .right-panel .breadcrumbs .page-header .breadcrumb > li + li:before {
                    color: #c3ccd9;
                }

/* --- Telas pequenas ------------------------------------------------------ */

@media (max-width: 575.99px) {
    .right-panel header.header {
        padding: 8px 14px;
    }

    .topo-entidade {
        padding: 6px 0;
    }

    .user-area .dropdown-toggle {
        padding: 4px 10px 4px 4px;
    }

        .user-area .dropdown-toggle > span {
            max-width: 118px;
            font-size: 12.5px;
        }

    .user-area .user-menu {
        top: 48px !important;
    }

    .right-panel .breadcrumbs .page-header h1 {
        padding: 14px 0 0;
        font-size: 17px;
    }

    .right-panel .breadcrumbs .page-header .breadcrumb {
        padding: 2px 0 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .user-area .dropdown-toggle,
    .user-area .user-menu .nav-link,
    .user-area .user-menu .nav-link .fa {
        transition: none;
    }
}