/* ============================================================
   GeSS — Admin Template
   Bootstrap 5.3.8 | jQuery 4.0.0 | Bootstrap Icons 1.13.1
   Paleta: azul-marinho + ciano do logo PCP Saúde (sidebar escura, conteúdo claro)
   ============================================================ */

/*:root {*/
/* Tokens da marca — mesmos valores do pacote de logo (Imagens/GeSS logo
       redesign2/LEIA-ME.txt): laranja #F2622E, hover/escuro #D8451A, tinta #17202A.
       --nr-primary-light e o segundo stop do gradiente são derivados (não vêm do
       pacote), só pra manter o mesmo efeito visual que já existia. */
/*--nr-primary: #f2622e;
    --nr-primary-dark: #d8451a;
    --nr-primary-light: #fdeee7;
    --nr-gradient: linear-gradient(135deg, #f2622e 0%, #ff8a5c 100%);
    --nr-dark: #17202a;
    --nr-gray: #6c757d;
    --nr-bg: #f6f7f9;
    --nr-card-border: #eceef1;
    --nr-sidebar-w: 260px;
    --nr-topbar-h: 64px;
    --nr-success: #16a34a;
    --nr-info: #0ea5e9;
    --nr-warning: #f59e0b;
    --nr-danger: #dc2626;
    --nr-purple: #7c3aed;
}*/

:root {
    /* Paleta extraída do logo PCP Saúde: fundo azul-marinho #102038, ícone em gradiente
       ciano (#00e2d6) → azul (#00adfc). O primário é um azul um pouco mais fechado que o do
       ícone pra manter contraste com texto branco em botões/links. */
    --nr-navy: #102038;
    --nr-primary: #0093d6;
    --nr-primary-dark: #0b6fa4;
    --nr-primary-light: #e3f5fc;
    --nr-accent: #00e2d6;
    --nr-gradient: linear-gradient(135deg, #00adfc 0%, #00e2d6 100%);
    --nr-dark: #102038;
    --nr-gray: #6c757d;
    --nr-bg: #f6f7f9;
    --nr-card-border: #eceef1;
    --nr-sidebar-w: 260px;
    --nr-topbar-h: 64px;
    --nr-success: #16a34a;
    --nr-info: #0ea5e9;
    --nr-warning: #f59e0b;
    --nr-danger: #dc2626;
    --nr-purple: #7c3aed;
}

/* Base menor que o padrão do Bootstrap (16px) — como o resto do arquivo usa rem
   quase em tudo, isso encolhe a interface inteira de forma proporcional (texto,
   espaçamentos, ícones), deixando as telas mais densas e menos cansativas sem
   precisar tocar em cada regra uma por uma. */
html {
    font-size: 14.5px;
}

* {
    outline: none !important;
}

body {
    background-color: var(--nr-bg);
    font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    color: #343a40;
    min-height: 100vh;
}

/* ---------- Sidebar ---------- */
.nr-sidebar {
    width: var(--nr-sidebar-w);
    height: 100vh;
    background: var(--nr-navy);
    border-right: 1px solid rgba(255, 255, 255, .06);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    transition: margin-left .25s ease;
}

    /* Área de navegação rola sozinha quando os itens não cabem na tela;
   brand (topo) e rodapé permanecem fixos. */
    .nr-sidebar nav.nav {
        flex: 1 1 auto;
        flex-wrap: nowrap;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* Scroll personalizado, discreto e alinhado à paleta do layout */
    .nr-sidebar nav.nav {
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, .18) transparent;
    }

        .nr-sidebar nav.nav::-webkit-scrollbar {
            width: 6px;
        }

        .nr-sidebar nav.nav::-webkit-scrollbar-track {
            background: transparent;
        }

        .nr-sidebar nav.nav::-webkit-scrollbar-thumb {
            background: var(--nr-card-border);
            border-radius: 999px;
        }

            .nr-sidebar nav.nav::-webkit-scrollbar-thumb:hover {
                background: var(--nr-primary);
            }

/* ---------- Loader global de AJAX (ver ajaxStart/ajaxStop em nrdesk.js) ---------- */
.nr-top-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 20000;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
}

    .nr-top-loader.active {
        opacity: 1;
    }

    .nr-top-loader span {
        display: block;
        position: absolute;
        top: 0;
        left: -40%;
        height: 100%;
        width: 40%;
        background: var(--nr-gradient);
        border-radius: 0 4px 4px 0;
    }

    .nr-top-loader.active span {
        animation: nrTopLoaderSlide 1.1s ease-in-out infinite;
    }

@keyframes nrTopLoaderSlide {
    0% {
        left: -40%;
    }

    100% {
        left: 100%;
    }
}

.nr-sidebar.collapsed {
    margin-left: calc(var(--nr-sidebar-w) * -1);
}

/* html.nr-sidebar-collapsed: aplicado por um script inline no <head> (ver _Layout.cshtml),
   antes do corpo renderizar — evita "piscar" expandido e só depois recolher a cada navegação
   (aqui é MVC tradicional com reload de página inteira, o estado só sobrevive via localStorage).
   Só faz sentido no desktop (>=992px) — no mobile o menu some/aparece via .show-mobile, e essa
   regra não pode competir em especificidade com aquela (era o que quebrava o toggle no celular). */
@media (min-width: 992px) {
    html.nr-sidebar-collapsed .nr-sidebar {
        margin-left: calc(var(--nr-sidebar-w) * -1);
    }
}

.nr-brand {
    height: var(--nr-topbar-h);
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: 12px 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

    /* .brand-logo é o PNG da marca (partial _LogoMarca.cshtml) — largura livre, só a altura
   é fixada. O fundo do PNG é o mesmo azul-marinho da sidebar, por isso "funde" com ela. */
    .nr-brand .brand-logo {
        height: 40px;
        width: auto;
        display: block;
    }

.nr-sidebar .nav-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .38);
    padding: 1.1rem 1.5rem .35rem;
}

.nr-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: rgba(255, 255, 255, .74);
    font-weight: 500;
    font-size: .925rem;
    padding: .6rem 1rem;
    margin: .1rem .75rem;
    border-radius: .6rem;
    transition: all .15s ease;
}

    .nr-sidebar .nav-link i {
        font-size: 1.1rem;
        width: 22px;
        text-align: center;
    }

    .nr-sidebar .nav-link:hover {
        background: rgba(255, 255, 255, .08);
        color: #fff;
    }

    .nr-sidebar .nav-link.active {
        background: linear-gradient(135deg, #0093d6 0%, #00b8d9 100%);
        color: #fff;
        font-weight: 600;
        box-shadow: 0 4px 14px rgba(0, 173, 252, .35);
    }

/* Contador da fila (ex.: Triagem) — só aparece quando > 0 (ver _Layout.cshtml). */
.nr-nav-badge {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--nr-danger);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.nr-sidebar .nav-link.active .nr-nav-badge {
    background: rgba(255, 255, 255, .28);
}

.nr-sidebar-footer {
    margin-top: auto;
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: .8rem;
    color: rgba(255, 255, 255, .38);
    text-align: center;
}

/* ---------- Topbar ---------- */
.nr-topbar {
    height: var(--nr-topbar-h);
    background: #ffffff;
    border-bottom: 1px solid var(--nr-card-border);
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.5rem;
}

    .nr-topbar .btn-toggle {
        border: 1px solid var(--nr-card-border);
        background: #fff;
        border-radius: .6rem;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--nr-dark);
    }

        .nr-topbar .btn-toggle:hover {
            background: var(--nr-primary-light);
            color: var(--nr-primary);
        }

.nr-search {
    max-width: 340px;
}

    .nr-search .form-control {
        background: var(--nr-bg);
        border: 1px solid transparent;
        border-radius: .6rem;
        padding-left: 2.4rem;
        padding-right: 3.4rem;
    }

        .nr-search .form-control:focus {
            background: #fff;
            border-color: var(--nr-primary);
            box-shadow: 0 0 0 .2rem rgba(0, 147, 214, .12);
        }

    .nr-search .bi-search {
        position: absolute;
        left: .85rem;
        top: 50%;
        transform: translateY(-50%);
        color: #9aa1ab;
    }

/* Atalho "Ctrl K" — some sozinho quando o campo ganha texto/foco real não é necessário:
   fica sempre visível, discreto, como uma dica (mesmo padrão de apps tipo command palette). */
.nr-search-kbd {
    position: absolute;
    right: .6rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .68rem;
    font-family: inherit;
    color: #9aa1ab;
    background: #fff;
    border: 1px solid var(--nr-card-border);
    border-radius: .35rem;
    padding: .1rem .35rem;
    pointer-events: none;
}

/* Painel de resultados — mesmo cartão/sombra usado nos dropdowns do Bootstrap no projeto,
   só que posicionado manualmente (o campo de busca não é um .dropdown do Bootstrap). */
.nr-search-results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + .4rem);
    background: #fff;
    border: 1px solid var(--nr-card-border);
    border-radius: .75rem;
    box-shadow: 0 12px 32px rgba(23, 32, 42, .12);
    max-height: 70vh;
    overflow-y: auto;
    z-index: 1060;
    padding: .4rem 0;
}

.nr-search-msg {
    padding: .75rem 1rem;
    font-size: .85rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.nr-search-grupo + .nr-search-grupo {
    border-top: 1px solid var(--nr-card-border);
    margin-top: .3rem;
    padding-top: .3rem;
}

.nr-search-grupo-titulo {
    padding: .3rem 1rem;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #9aa1ab;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.nr-search-item {
    display: block;
    padding: .45rem 1rem;
    text-decoration: none;
    color: inherit;
}

    .nr-search-item:hover, .nr-search-item.ativo {
        background: var(--nr-primary-light);
    }

.nr-search-item-titulo {
    font-size: .87rem;
    font-weight: 600;
    color: var(--nr-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nr-search-item-sub {
    font-size: .76rem;
    color: #8a8f98;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nr-topbar .icon-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: .6rem;
    border: none;
    background: transparent;
    color: #4b5563;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

    .nr-topbar .icon-btn:hover {
        background: var(--nr-bg);
    }

    .nr-topbar .icon-btn .badge-dot {
        position: absolute;
        top: 7px;
        right: 8px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--nr-danger);
        border: 2px solid #fff;
    }

/* ---------- Sinos (Triagem / Aprovações) ----------
   Mesmo cartão de dropdown da Busca Global (.nr-search-item* em nrdesk.css), só que ancorado
   à direita, sob o ícone, em vez de esticado sob um campo de texto. */
.nr-bell {
    position: relative;
}

.nr-topbar .icon-btn .badge-count {
    position: absolute;
    top: 0px;
    right: 3px;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--nr-danger);
    color: #fff;
    font-size: .64rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    border: 2px solid #fff;
}

.nr-bell-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + .5rem);
    width: 320px;
    background: #fff;
    border: 1px solid var(--nr-card-border);
    border-radius: .75rem;
    box-shadow: 0 12px 32px rgba(23, 32, 42, .12);
    max-height: 70vh;
    overflow-y: auto;
    z-index: 1060;
    padding-bottom: .4rem;
}

    .nr-bell-dropdown .nr-search-grupo-titulo {
        padding-bottom: .55rem;
    }

.nr-bell-vertodos {
    display: block;
    text-align: center;
    padding: .55rem 1rem .2rem;
    margin-top: .2rem;
    border-top: 1px solid var(--nr-card-border);
    font-size: .8rem;
    font-weight: 600;
    color: var(--nr-primary);
    text-decoration: none;
}

    .nr-bell-vertodos:hover {
        color: var(--nr-primary-dark);
    }

.nr-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--nr-gradient);
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nr-avatar-lg {
    width: 96px;
    height: 96px;
    font-size: 2rem;
    border-radius: 50%;
    background: var(--nr-gradient);
    color: #fff;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(0, 147, 214, .35);
}

/* ---------- Conteúdo ---------- */
.nr-main {
    margin-left: var(--nr-sidebar-w);
    transition: margin-left .25s ease;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

    .nr-main.expanded {
        margin-left: 0;
    }

@media (min-width: 992px) {
    html.nr-sidebar-collapsed .nr-main {
        margin-left: 0;
    }
}

.nr-content {
    padding: 1.75rem;
    flex: 1;
}

.page-title {
    font-weight: 800;
    color: var(--nr-dark);
    letter-spacing: -.02em;
}

.breadcrumb-item a {
    color: var(--nr-primary);
    text-decoration: none;
}

/* ---------- Cards ---------- */
.card {
    border: 1px solid var(--nr-card-border);
    border-radius: .9rem;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--nr-card-border);
    font-weight: 700;
    color: var(--nr-dark);
    padding: 1rem 1.25rem;
}

.stat-card {
    overflow: hidden;
    position: relative;
}

    .stat-card .stat-icon {
        width: 52px;
        height: 52px;
        border-radius: .8rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        color: #fff;
    }

    .stat-card .stat-value {
        font-size: 1.7rem;
        font-weight: 800;
        color: var(--nr-dark);
    }

    .stat-card .stat-label {
        font-size: .85rem;
        color: var(--nr-gray);
        font-weight: 500;
    }

.bg-grad-primary {
    background: var(--nr-gradient);
}

.bg-grad-success {
    background: linear-gradient(135deg, #16a34a, #4ade80);
}

.bg-grad-info {
    background: linear-gradient(135deg, #0284c7, #38bdf8);
}

.bg-grad-purple {
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
}

.bg-grad-danger {
    background: linear-gradient(135deg, #dc2626, #f87171);
}

.trend-up {
    color: var(--nr-success);
    font-weight: 600;
    font-size: .8rem;
}

.trend-down {
    color: var(--nr-danger);
    font-weight: 600;
    font-size: .8rem;
}

/* ---------- Botões ---------- */
.btn-primary {
    --bs-btn-bg: var(--nr-primary);
    --bs-btn-border-color: var(--nr-primary);
    --bs-btn-hover-bg: var(--nr-primary-dark);
    --bs-btn-hover-border-color: var(--nr-primary-dark);
    --bs-btn-active-bg: var(--nr-primary-dark);
    --bs-btn-active-border-color: var(--nr-primary-dark);
    --bs-btn-focus-shadow-rgb: 0, 147, 214;
    font-weight: 600;
    border-radius: .6rem;
}

.btn-outline-primary {
    --bs-btn-color: var(--nr-primary);
    --bs-btn-border-color: var(--nr-primary);
    --bs-btn-hover-bg: var(--nr-primary);
    --bs-btn-hover-border-color: var(--nr-primary);
    --bs-btn-active-bg: var(--nr-primary-dark);
    --bs-btn-active-border-color: var(--nr-primary-dark);
    --bs-btn-focus-shadow-rgb: 0, 147, 214;
    font-weight: 600;
    border-radius: .6rem;
}

.btn-light-subtle {
    background: var(--nr-bg);
    border: 1px solid var(--nr-card-border);
    border-radius: .6rem;
    font-weight: 600;
}

/* ---------- Formulários ---------- */
.form-control, .form-select {
    border-radius: .6rem;
    border-color: #dde1e6;
    padding: .55rem .9rem;
}

    .form-control:focus, .form-select:focus {
        border-color: var(--nr-primary);
        box-shadow: 0 0 0 .2rem rgba(0, 147, 214, .12);
    }

.form-label {
    font-weight: 600;
    font-size: .875rem;
    color: #374151;
}

.form-check-input:checked {
    background-color: var(--nr-primary);
    border-color: var(--nr-primary);
}

.form-check-input:focus {
    box-shadow: 0 0 0 .2rem rgba(0, 147, 214, .12);
    border-color: var(--nr-primary);
}

/* ---------- Tabelas ---------- */
.table thead th {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6b7280;
    background: var(--nr-bg);
    border-bottom: 1px solid var(--nr-card-border);
    padding: .75rem 1rem;
}

.table tbody td {
    padding: .85rem 1rem;
    vertical-align: middle;
}

.table-hover tbody tr:hover {
    background-color: #fffaf8;
}

.badge-status {
    font-size: .72rem;
    font-weight: 700;
    padding: .35em .8em;
    border-radius: 2rem;
}

    .badge-status.ativo {
        background: #dcfce7;
        color: #15803d;
    }

    .badge-status.inativo {
        background: #fee2e2;
        color: #b91c1c;
    }

    .badge-status.pendente {
        background: #fef3c7;
        color: #b45309;
    }

.btn-action {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    border: 1px solid var(--nr-card-border);
    background: #fff;
    color: #6b7280;
}

    .btn-action:hover.edit {
        background: #eff6ff;
        color: #1d4ed8;
        border-color: #bfdbfe;
    }

    .btn-action:hover.delete {
        background: #fef2f2;
        color: #b91c1c;
        border-color: #fecaca;
    }

    .btn-action:hover.view {
        background: var(--nr-primary-light);
        color: var(--nr-primary-dark);
        border-color: #ffd4c4;
    }

/* ---------- Paginação ---------- */
.pagination .page-link {
    color: var(--nr-primary);
    border-radius: .5rem;
    margin: 0 .15rem;
    border-color: var(--nr-card-border);
    font-weight: 600;
}

.pagination .page-item.active .page-link {
    background: var(--nr-primary);
    border-color: var(--nr-primary);
    color: #fff;
}

/* ---------- Login ---------- */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nr-navy);
    background-image: radial-gradient(circle at 15% 20%, rgba(0, 173, 252, .18) 0, transparent 45%), radial-gradient(circle at 85% 80%, rgba(0, 226, 214, .14) 0, transparent 45%);
    padding: 2rem 1rem;
}

/* Marca acima do card de login — mesmo azul-marinho do PNG, então sem "caixa" visível. */
.login-wrap {
    width: 100%;
    max-width: 420px;
}

    .login-wrap .login-brand {
        display: flex;
        justify-content: center;
        margin-bottom: 1.5rem;
    }

        .login-wrap .login-brand .brand-logo {
            height: 60px;
            width: auto;
        }

    .login-wrap .login-card {
        max-width: none;
    }

.login-card {
    width: 100%;
    max-width: 420px;
    border-radius: 1.1rem;
    border: none;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    background: #fff;
}

    .login-card .brand-icon-lg {
        width: 64px;
        height: 64px;
        border-radius: 1rem;
        background: var(--nr-gradient);
        color: #fff;
        font-size: 1.8rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        box-shadow: 0 10px 26px rgba(0, 147, 214, .4);
    }


.link-primary-nr {
    color: var(--nr-primary);
    font-weight: 600;
    text-decoration: none;
}

    .link-primary-nr:hover {
        color: var(--nr-primary-dark);
        text-decoration: underline;
    }

/* ---------- Modais ---------- */
.modal-content {
    border-radius: 1rem;
    border: none;
}

.modal-header {
    border-bottom: 1px solid var(--nr-card-border);
}

.modal-footer {
    border-top: 1px solid var(--nr-card-border);
}

/* Fundo mais escuro que o padrão do Bootstrap (.5) — com conteúdo branco atrás do
   modal, o padrão quase não dava contraste. Cada backdrop empilhado (ver nrdesk.js)
   soma sobre o anterior, então uma confirmação aberta por cima fica bem destacada. */
.modal-backdrop.show {
    opacity: .7;
}

/* ---------- Perfil ---------- */
.nav-pills .nav-link {
    color: #4b5563;
    font-weight: 600;
    border-radius: .6rem;
}

    .nav-pills .nav-link.active {
        background: var(--nr-gradient);
        color: #fff;
    }

.list-group-item {
    border-color: var(--nr-card-border);
}

/* ---------- Utilidades ---------- */
.text-primary-nr {
    color: var(--nr-primary) !important;
}

.bg-primary-nr-subtle {
    background: var(--nr-primary-light) !important;
}

.progress {
    height: 8px;
    border-radius: 1rem;
    background: #eef0f3;
}

.progress-bar {
    background: var(--nr-gradient);
    border-radius: 1rem;
}

.password-strength {
    height: 6px;
    border-radius: 1rem;
    background: #eef0f3;
    overflow: hidden;
}

    .password-strength .bar {
        height: 100%;
        width: 0;
        border-radius: 1rem;
        transition: all .3s ease;
    }

/* ---------- Responsivo ---------- */
@media (max-width: 991.98px) {
    .nr-sidebar {
        margin-left: calc(var(--nr-sidebar-w) * -1);
    }

        .nr-sidebar.show-mobile {
            margin-left: 0;
            box-shadow: 0 0 40px rgba(0,0,0,.2);
        }

    .nr-main {
        margin-left: 0;
    }

    .nr-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.35);
        z-index: 1035;
        display: none;
    }

        .nr-backdrop.show {
            display: block;
        }
}

/* ---------- Atendimento: status e SLA ---------- */
.badge-cha-status {
    font-size: .72rem;
    font-weight: 700;
    padding: .35em .8em;
    border-radius: 2rem;
    white-space: nowrap;
}

    .badge-cha-status.st-aberto {
        background: #e0f2fe;
        color: #0369a1;
    }

    .badge-cha-status.st-em-atendimento {
        background: #dbeafe;
        color: #1d4ed8;
    }

    .badge-cha-status.st-aguardando-solicitante {
        background: #fef3c7;
        color: #b45309;
    }

    .badge-cha-status.st-agendado {
        background: #ede9fe;
        color: #6d28d9;
    }

    .badge-cha-status.st-aguardando-validacao {
        background: #fef9c3;
        color: #854d0e;
    }

    .badge-cha-status.st-resolvido {
        background: #dcfce7;
        color: #15803d;
    }

    .badge-cha-status.st-fechado {
        background: #e5e7eb;
        color: #374151;
    }

    .badge-cha-status.st-cancelado {
        background: #fee2e2;
        color: #b91c1c;
    }

/* Escala de cores do SLA (percentual consumido do prazo de solução). */
.badge-sla {
    font-size: .72rem;
    font-weight: 700;
    padding: .35em .75em;
    border-radius: 2rem;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: .3em;
}

    .badge-sla .bi {
        font-size: .85em;
    }

    .badge-sla.sla-tranquilo {
        background: #dcfce7;
        color: #15803d;
    }

    .badge-sla.sla-atencao {
        background: #fef3c7;
        color: #b45309;
    }

    .badge-sla.sla-critico {
        background: #ffe4d5;
        color: #c2410c;
    }

    .badge-sla.sla-estourado {
        background: #fee2e2;
        color: #b91c1c;
    }

    .badge-sla.sla-indefinido {
        background: #eef0f3;
        color: #6b7280;
    }

/* ---------- Seletor de colunas da grade (Atendimento) ---------- */
.nr-col-picker {
    min-width: 260px;
    padding: 0;
    max-height: 360px;
    overflow-y: auto;
}

    .nr-col-picker .nr-col-dica {
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: .03em;
    }

    .nr-col-picker .nr-col-lista {
        padding: .25rem .25rem .5rem;
    }

    .nr-col-picker .nr-col-item {
        display: flex;
        align-items: center;
        gap: .5rem;
        padding: .3rem .5rem;
        border-radius: .4rem;
        cursor: grab;
    }

        .nr-col-picker .nr-col-item:hover {
            background: var(--nr-bg);
        }

        .nr-col-picker .nr-col-item.nr-col-dragover {
            box-shadow: inset 0 2px 0 var(--nr-primary);
        }

    .nr-col-picker .nr-col-handle {
        color: #9aa1ab;
    }

    .nr-col-picker .form-check.form-switch {
        padding-left: 2.5em;
        margin-bottom: 0;
    }

    .nr-col-picker .form-check-label {
        font-size: .85rem;
    }

/* ---------- Modal maximizado de Atendimento ---------- */
#modalAtendimento .modal-content {
    border-radius: 0;
    height: 100%;
}

#modalAtendimento .modal-body {
    padding: 1rem 1.25rem;
}

#modalAtendimento #atMensagens {
    max-height: 300px;
    min-height: 110px;
    flex-grow: 0;
}

#modalAtendimento #atInteracaoForm {
    flex-shrink: 0;
}

#modalAtendimento .nr-at-scroll {
    overflow-y: auto;
}

#modalAtendimento .nav-tabs .nav-link {
    font-size: .85rem;
    font-weight: 600;
    color: #6b7280;
}

    #modalAtendimento .nav-tabs .nav-link.active {
        color: var(--nr-primary-dark);
        border-bottom-color: var(--nr-primary);
    }

/* Layout lado a lado (desktop, >= lg): cada coluna ocupa a altura toda do modal e
   rola por dentro; a área das abas usa um wrapper "vazio" (nr-at-tabwrap) que
   preenche o espaço restante da coluna, com o .tab-content posicionado em absolute
   dentro dele — assim ele nunca cresce além do espaço disponível, e sempre há uma
   rolagem interna própria em vez de cortar conteúdo. Ficou tudo dentro do media
   query (em vez de usar as classes utilitárias position-absolute/top-0/etc do
   Bootstrap) justamente para não precisar de !important para desligar no mobile. */
@media (min-width: 992px) {
    /* min-height:0 aqui é o elo que faltava: sem ele, o .modal-body (flex item do
       .modal-content) cresce para caber todo o conteúdo em vez de respeitar a
       altura disponível — e aí nada abaixo dele fica realmente "contido". */
    #modalAtendimento .modal-body {
        overflow: hidden;
        min-height: 0;
    }

    #modalAtendimento .nr-at-col {
        min-height: 0;
        overflow-y: auto;
    }

    #modalAtendimento .nr-at-tabwrap {
        flex: 1 1 0;
        min-height: 0;
        position: relative;
    }

        #modalAtendimento .nr-at-tabwrap .tab-content {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow-y: auto;
        }
    /* A caixa de dados (solicitante/item/descrição) rola dentro de si mesma se a
       descrição for longa, em vez de empurrar o restante do painel (mensagens/
       formulário) para fora da área visível — só faz sentido com as colunas lado
       a lado, de altura fixa. */
    #modalAtendimento .nr-at-info-box {
        max-height: 220px;
        overflow-y: auto;
    }
}

/* Mobile / telas pequenas (< lg): as colunas empilham (col-12 antes de col-lg-*), e
   o esquema de altura fixa acima não se aplica — o modal-body inteiro rola como uma
   página normal, e cada bloco assume sua altura natural. A área das abas ganha uma
   altura mínima só para não ficar "espremida" quando o conteúdo da aba ativa é
   curto (ex.: Categorização). */
@media (max-width: 991.98px) {
    #modalAtendimento .modal-body {
        overflow-y: auto;
        overflow-x: hidden;
    }

    #modalAtendimento .nr-at-col {
        overflow: visible;
        height: auto;
    }

    #modalAtendimento .nr-at-tabwrap .tab-content {
        min-height: 320px;
    }
}

.nr-at-info-box {
    background: var(--nr-bg);
    border: 1px solid var(--nr-card-border);
    border-radius: .6rem;
    padding: .85rem 1rem;
}

    .nr-at-info-box .lbl {
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #9aa1ab;
        font-weight: 700;
    }

    .nr-at-info-box .val {
        font-size: .88rem;
        color: var(--nr-dark);
        font-weight: 600;
    }

/* Barra de rolagem fina e na cor da paleta, para todas as áreas roláveis do
   Atendimento (evita a barra cinza padrão do navegador, que destoa do layout). */
#modalAtendimento .nr-at-col,
#modalAtendimento .nr-at-scroll,
#modalAtendimento .nr-at-info-box {
    scrollbar-width: thin;
    scrollbar-color: var(--nr-primary) transparent;
}

    #modalAtendimento .nr-at-col::-webkit-scrollbar,
    #modalAtendimento .nr-at-scroll::-webkit-scrollbar,
    #modalAtendimento .nr-at-info-box::-webkit-scrollbar {
        width: 5px;
    }

    #modalAtendimento .nr-at-col::-webkit-scrollbar-track,
    #modalAtendimento .nr-at-scroll::-webkit-scrollbar-track,
    #modalAtendimento .nr-at-info-box::-webkit-scrollbar-track {
        background: transparent;
    }

    #modalAtendimento .nr-at-col::-webkit-scrollbar-thumb,
    #modalAtendimento .nr-at-scroll::-webkit-scrollbar-thumb,
    #modalAtendimento .nr-at-info-box::-webkit-scrollbar-thumb {
        background: var(--nr-primary);
        border-radius: 999px;
    }

        #modalAtendimento .nr-at-col::-webkit-scrollbar-thumb:hover,
        #modalAtendimento .nr-at-scroll::-webkit-scrollbar-thumb:hover,
        #modalAtendimento .nr-at-info-box::-webkit-scrollbar-thumb:hover {
            background: var(--nr-primary-dark);
        }

/* Mensagens de interação (agente x solicitante) */
.nr-msg {
    max-width: 85%;
    border-radius: .8rem;
    padding: .55rem .8rem;
    margin-bottom: .6rem;
    font-size: .85rem;
}

.nr-msg-solicitante {
    background: #fff;
    border: 1px solid var(--nr-card-border);
    margin-right: auto;
}

.nr-msg-agente {
    background: var(--nr-primary-light);
    border: 1px solid #ffd4c4;
    margin-left: auto;
}

.nr-msg .nr-msg-meta {
    font-size: .72rem;
    color: #9aa1ab;
    margin-top: .25rem;
}

/* Linha do tempo visual */
.nr-timeline {
    position: relative;
    padding-left: 1.75rem;
}

    .nr-timeline::before {
        content: "";
        position: absolute;
        left: .4rem;
        top: .3rem;
        bottom: .3rem;
        width: 2px;
        background: var(--nr-card-border);
    }

.nr-timeline-item {
    position: relative;
    padding-bottom: 1.1rem;
}

    .nr-timeline-item:last-child {
        padding-bottom: 0;
    }

.nr-timeline-dot {
    position: absolute;
    left: -1.75rem;
    top: .1rem;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nr-primary-light);
    color: var(--nr-primary-dark);
    font-size: .68rem;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--nr-card-border);
}

.nr-timeline-titulo {
    font-weight: 600;
    font-size: .85rem;
}

.nr-timeline-meta {
    font-size: .72rem;
    color: #9aa1ab;
}

.nr-timeline-decorrido {
    display: inline-block;
    margin-top: .2rem;
    font-size: .7rem;
    font-weight: 700;
    color: var(--nr-primary-dark);
    background: var(--nr-primary-light);
    padding: .1em .55em;
    border-radius: 1rem;
}

/* ---------- Loaders da marca ----------
   Baseado no pacote de logo (Imagens/GeSS logo redesign2/nrdesk-loading.html) —
   cores herdadas dos tokens da marca (var(--nr-primary) etc.) em vez de fixas, pra
   acompanhar a paleta se ela mudar. Usa <svg> inline no HTML (ver markup nos pontos
   que já usavam spinner-border do Bootstrap: Home/Index, ConfiguracaoEnvioEmail/
   Index, Configuracoes/Index, login.js) + as classes abaixo pra girar/posicionar. */
@keyframes nr-spin {
    to {
        transform: rotate(360deg);
    }
}

.nr-spinner {
    animation: nr-spin 1s linear infinite;
    flex: none;
}

.nr-spinner-inline {
    display: inline-block;
    vertical-align: -.25em;
}

/* Card de seção (ex.: "carregando lista...") — usar com role="status" aria-live="polite". */
.nr-loading-card {
    display: inline-flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem 1.25rem;
    background: #fff;
    border: 1px solid var(--nr-card-border);
    border-radius: .9rem;
    box-shadow: 0 2px 8px rgba(23, 32, 42, .05);
}

.nr-loading-card__spin {
    position: relative;
    width: 34px;
    height: 34px;
    flex: none;
}

    .nr-loading-card__spin svg:first-child {
        position: absolute;
        inset: 0;
    }

.nr-loading-card__txt {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

    .nr-loading-card__txt b {
        font-size: .85rem;
        font-weight: 600;
        color: var(--nr-dark);
    }

    .nr-loading-card__txt small {
        font-size: .7rem;
        color: #9aa1ab;
    }

/* Splash de boot (tela cheia) — pronto pra uso futuro (ex.: transição pós-login),
   ainda não disparado em nenhuma tela. */
.nr-splash {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
    background: var(--nr-bg);
}

.nr-splash__mark {
    position: relative;
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nr-splash__halo {
    position: absolute;
    inset: 0;
    border-radius: 30px;
    background: var(--nr-primary);
    opacity: .16;
    animation: nr-halo 2s ease-out infinite;
}

@keyframes nr-halo {
    0% {
        transform: scale(.9);
        opacity: .5;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.nr-splash__ring {
    position: absolute;
    inset: 0;
    animation: nr-spin 1.15s linear infinite;
}

.nr-splash__tile {
    width: 62px;
    height: 62px;
    border-radius: 19px;
    background: var(--nr-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(216, 69, 26, .24);
    animation: nr-pulse 2s ease-in-out infinite;
}

@keyframes nr-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.06);
        opacity: .88;
    }
}

.nr-splash .nr-wordmark {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    font-size: 1.6rem;
    letter-spacing: -.035em;
    color: var(--nr-dark);
}

    .nr-splash .nr-wordmark b {
        font-weight: 800;
    }

    .nr-splash .nr-wordmark span {
        font-weight: 500;
        color: #45403a;
    }

/* Respeita quem pediu menos movimento na tela (ver preferência do SO/navegador) —
   mesmo critério do pacote de logo. */
@media (prefers-reduced-motion: reduce) {
    .nr-spinner, .nr-splash__ring, .nr-splash__halo, .nr-splash__tile {
        animation-duration: 3s !important;
    }

    .nr-splash__halo, .nr-splash__tile {
        animation: none !important;
    }
}