/*--------------------------------------------------------------
# DistribuiJus — estilos próprios do sistema
--------------------------------------------------------------
Tudo que não vem do template mora aqui. Carregado DEPOIS do CSS do
template (ver app/Views/layout/head.php), então o sobrescreve pela
cascata, sem precisar de !important na maioria dos casos.

Antes, isto ficava colado no fim do style.css do template — misturado
com o código de terceiros, o que impedia atualizar o template sem
perder as customizações.

--------------------------------------------------------------
# Cores: por que variáveis, e não valores fixos
--------------------------------------------------------------
Os componentes daqui (avisos, selos, painel do topo, faixas de prazo,
sino) nasceram com cores escritas à mão, pensadas para fundo claro. Num
tema escuro, todas elas ficam erradas ou ilegíveis.

Cada cor virou uma variável definida duas vezes: em :root (tema claro,
com os MESMOS valores de antes — nada muda hoje) e em [data-theme=dark].
"data-theme" é o atributo que o template AppDashboard coloca no elemento
raiz ao trocar de tema; enquanto ele não estiver no ar, nenhum seletor
escuro casa e o sistema segue claro.

Ao mexer nas cores daqui, mexa nas duas listas — a clara e a escura.
--------------------------------------------------------------*/

:root {
    /* Superfícies e texto */
    --dj-superficie: #fff;
    --dj-superficie-suave: #f6f9ff;
    --dj-borda: #ebeef4;
    --dj-borda-suave: #f1f3f7;
    --dj-texto: #444;
    --dj-texto-suave: #6c757d;
    --dj-texto-apagado: #899bbd;
    --dj-marca: #012970;
    --dj-link: #4154f1;

    /* Estados (fundo / texto) — os mesmos das linhas da tabela */
    --dj-pronto-fundo: #cfe2ff;
    --dj-pronto-texto: #084298;
    --dj-pronto-escuro: #052c65;
    --dj-urgente-fundo: #f8d7da;
    --dj-urgente-texto: #842029;
    --dj-prioridade-fundo: #fff3cd;
    --dj-prioridade-texto: #664d03;
    --dj-atencao-borda: #ffe69c;

    /* Avisos (toast) e texto sobre fundos coloridos */
    --dj-aviso-info: #012970;
    --dj-aviso-sucesso: #146c43;
    --dj-aviso-primary: #0b5ed7;
    --dj-aviso-erro: #b02a37;
    --dj-texto-sobre-cor: #fff;

    /* Contador de dias da lista */
    --dj-dias-normal: #545b62;
    --dj-dias-atencao: #9a4d00;

    /* Realce de notificação não lida */
    --dj-nao-lida-fundo: #f2f7ff;
    --dj-nao-lida-barra: #4154f1;

    /* Barra lateral: os dois estados. Como variáveis porque cada medida
       aparece em várias regras (largura da barra, margem do #main, do
       #footer, do estado escondido), e número solto repetido é onde o
       próximo ajuste esquece uma. */
    --dj-sidebar-encolhida: 72px;
    /* 300px, e não 280: com 280 o item mais comprido do menu
       ("Adicionar Vários Processos") ficava 5px maior que o espaço e saía
       cortado. 300 é também a largura que a barra tinha antes, então nada
       parece mais apertado do que já era. */
    --dj-sidebar-aberta: 300px;
}

/*
 * Tema escuro. Só os valores mudam — nenhum componente abaixo precisa
 * saber qual tema está ativo.
 *
 * As cores de estado ficam mais escuras e o texto mais claro, mantendo o
 * contraste mínimo de 4,5:1 que perseguimos no tema claro: um selo azul
 * claro com texto azul escuro vira um selo azul escuro com texto claro,
 * e não o mesmo azul claro brilhando no escuro.
 */
[data-theme="dark"] {
    --dj-superficie: #1e2229;
    --dj-superficie-suave: #171a20;
    --dj-borda: #2c313a;
    --dj-borda-suave: #262a32;
    --dj-texto: #dfe3ea;
    --dj-texto-suave: #a3aab6;
    --dj-texto-apagado: #7d8697;
    --dj-marca: #a8c2f0;
    --dj-link: #7f92ff;

    --dj-pronto-fundo: #17335e;
    --dj-pronto-texto: #b9d3f7;
    --dj-pronto-escuro: #cfe2ff;
    --dj-urgente-fundo: #4a1f23;
    --dj-urgente-texto: #f5b7bb;
    --dj-prioridade-fundo: #43380f;
    --dj-prioridade-texto: #ffdd8a;
    --dj-atencao-borda: #6b5320;

    --dj-aviso-info: #2a3f6b;
    --dj-aviso-sucesso: #1a7a4c;
    --dj-aviso-primary: #2563c9;
    --dj-aviso-erro: #a3242f;
    --dj-texto-sobre-cor: #fff;

    --dj-dias-normal: #a3aab6;
    --dj-dias-atencao: #e0913f;

    --dj-nao-lida-fundo: #1d2740;
    --dj-nao-lida-barra: #7f92ff;
}

/* Contador de dias da lista: 3 faixas (em dia / atenção / atrasado).
   As cores foram escurecidas para passarem no mínimo de contraste da WCAG
   (4,5:1) TAMBÉM sobre as linhas coloridas da tabela — o laranja anterior
   (#fd7e14) ficava em 2,6:1 sobre a linha amarela, ou seja, o aviso mais
   importante da tela era o mais difícil de ler. A hierarquia visual
   continua a mesma: cinza, laranja, vermelho. */
.text-dias-normal {
    color: var(--dj-dias-normal) !important; /* 0 a 59 dias — 6,9:1 no branco */
}

.text-orange {
    color: var(--dj-dias-atencao) !important; /* 60 a 89 dias — 6,1:1 no branco, 5,5:1 na linha amarela */
}

/* Faz os inputs de data dentro do input-group terem o mesmo tamanho */
.input-group .form-control {
    flex: 1 1 auto; /* input ocupa todo o espaço disponível */
}

#icon_data_conclusao,
#icon_data_adicao {
    cursor: pointer;
}

#icon_data_conclusao:hover,
#icon_data_adicao:hover {
    background-color: var(--dj-borda); /* leve realce ao passar o mouse */
}

#data_conclusao,
#data_adicao {
    min-width: 100%; /* garante largura cheia */
}

.data-input-group {
    display: flex;
    align-items: stretch;
}

.data-input-group .form-control {
    flex: 1;
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.data-input-group .input-group-text {
    background-color: var(--dj-superficie);
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    cursor: pointer;
}

/* Aviso discreto de "Lista atualizada", exibido quando a tela inicial se
   sincroniza sozinha com alguma alteração feita por outro usuário. */
.toast-sync {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 1080;
    background-color: var(--dj-marca);
    color: var(--dj-texto-sobre-cor);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.toast-sync.visivel {
    opacity: 1;
    transform: translateY(0);
}

/* Selo com a quantidade de "P. Análise" no cabeçalho de cada pessoa. Usa o
   mesmo azul das linhas prontas para análise (.table-primary do Bootstrap),
   para o número ser lido como "estes aqui da tabela". */
.contador-card-prontos {
    background-color: var(--dj-pronto-fundo);
    color: var(--dj-pronto-texto);
}

/* Urgente/tutela E pronto para análise. Vermelho como o ícone que esses
   processos já têm na linha (ver getStatusIconClass) — a linha em si fica
   azul, igual à de qualquer pronto, então o selo é o único lugar em que
   essa combinação aparece resumida. */
.contador-card-urgentes {
    background-color: var(--dj-urgente-fundo);
    color: var(--dj-urgente-texto);
}

/* Botão de ação rápida da lista (um clique para o próximo passo do
   processo). Discreto em repouso para não competir com o conteúdo da
   linha, e sólido no hover para deixar claro que é clicável. */
.acao-rapida {
    --bs-btn-padding-y: 0.15rem;
    --bs-btn-padding-x: 0.45rem;
    line-height: 1.2;
    border-radius: 6px;
}

.acao-rapida i {
    font-size: 1rem;
    vertical-align: -1px;
}

/* Em telas de toque o alvo precisa ser maior que o do mouse. */
@media (max-width: 767.98px) {
    .acao-rapida {
        --bs-btn-padding-y: 0.35rem;
        --bs-btn-padding-x: 0.6rem;
    }
}

/* Aviso do sistema (sucesso / erro / informação). Um único componente no
   lugar do alert() do navegador, que travava a aba e não seguia a
   identidade do sistema. Ver mostrarAviso() em assets/js/main.js. */
.toast-aviso {
    position: fixed;
    top: 70px;
    right: 20px;
    z-index: 1090;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(380px, calc(100vw - 40px));
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 0.92rem;
    color: var(--dj-texto-sobre-cor);
    background-color: var(--dj-marca);
    box-shadow: 0 4px 16px rgba(1, 41, 112, 0.25);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

.toast-aviso.visivel {
    opacity: 1;
    transform: translateY(0);
}

.toast-aviso i {
    font-size: 1.15rem;
    flex-shrink: 0;
}

.toast-aviso.sucesso {
    background-color: var(--dj-aviso-sucesso);
    box-shadow: 0 4px 16px rgba(20, 108, 67, 0.25);
}

.toast-aviso.primary {
    /* Azul de "pronto para análise". Escurecido em relação ao #0d6efd do
       Bootstrap para o texto branco passar no contraste mínimo (5,8:1 em
       vez de 4,5:1 no limite). */
    background-color: var(--dj-aviso-primary);
    box-shadow: 0 4px 16px rgba(11, 94, 215, 0.25);
}

.toast-aviso.erro {
    background-color: var(--dj-aviso-erro);
    box-shadow: 0 4px 16px rgba(176, 42, 55, 0.25);
}

@media (max-width: 767.98px) {
    .toast-aviso {
        top: auto;
        bottom: 80px;
        left: 20px;
        right: 20px;
        max-width: none;
    }
}

/* Botão que abre o menu "..." de cada linha. Era um <a href="#">; virou
   <button> por semântica (ver comentário em _lista.php), e este reset
   devolve a aparência de ícone que ele tinha como link. */
.btn-acoes {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    line-height: 1;
}

.btn-acoes:focus-visible {
    outline: 2px solid var(--dj-link);
    outline-offset: 2px;
    border-radius: 4px;
}

/*--------------------------------------------------------------
# Células das tabelas de processo
--------------------------------------------------------------
Estes três padrões estavam escritos à mão, em style="", em seis
arquivos diferentes (lista, pesquisa, lançados e no HTML montado pelo
ProcessoController). Mudar a densidade das tabelas exigia editar todos.
--------------------------------------------------------------*/

/* Coluna de texto longo (observação, serventia): corta com reticências. */
.col-truncada {
    display: inline-block;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

td.col-truncada {
    display: table-cell;
}

/* Célula que responde ao clique (abre a observação, copia o número). */
.col-clicavel {
    cursor: pointer;
}

/* Número do processo: nunca quebra em duas linhas. */
.col-numero {
    white-space: nowrap;
    cursor: pointer;
}

/* Contador "01-", "02-" no início da linha. */
.contador-linha {
    font-size: 0.8em;
    color: var(--dj-texto-suave);
    margin-right: 5px;
}

/* Ícone de calendário dentro do campo de data. */
.campo-com-icone {
    position: relative;
}

.campo-com-icone .form-control {
    padding-right: 40px;
}

.icone-calendario {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

/* Caixa "Processando..." das ações. */
.overlay-processando {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    background: var(--dj-superficie);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

/*--------------------------------------------------------------
# Painel de totais do topo da lista
--------------------------------------------------------------
Um cartão por número, com a barra da sua cor à esquerda — o mesmo
vocabulário dos cartões da página de Relatórios (.rel-kpi).

Antes era uma faixa azul com os três números em texto corrido e
flex-wrap ligado: em tela média o último descia para a segunda linha e
o cabeçalho crescia. Aqui a faixa NUNCA quebra; quando falta espaço ela
rola de lado, o que mantém a altura do cabeçalho estável.
--------------------------------------------------------------*/
.resumo-processos {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 1rem;
    /* Rolar de lado em vez de quebrar a linha. */
    overflow-x: auto;
    /* Sem isto o foco do teclado no botão da legenda fica cortado. */
    padding: 2px;
}

@media (min-width: 768px) {
    .resumo-processos {
        justify-content: flex-end;
    }
}

.resumo-cartao {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 0 0 auto;
    padding: 8px 14px 8px 12px;
    border: 1px solid var(--dj-borda);
    border-left: 3px solid var(--dj-texto-apagado);
    border-radius: 10px;
    background-color: var(--dj-superficie);
    white-space: nowrap;
}

/* A barra da esquerda dá a cor de cada estado sem tingir o cartão
   inteiro, que competiria com as linhas coloridas da tabela abaixo. */
.resumo-cartao.e-total     { border-left-color: var(--dj-marca); }
.resumo-cartao.e-prontos   { border-left-color: var(--dj-link); }
.resumo-cartao.e-pendentes { border-left-color: var(--dj-dias-atencao); }

.resumo-rotulo {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--dj-texto-suave);
    line-height: 1.2;
}

.resumo-linha {
    display: flex;
    align-items: center;
    gap: 7px;
}

.resumo-numero {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--dj-marca);
    /* Dígitos de mesma largura: o número não "pula" ao mudar de 99 para
       100 durante a sincronização automática. */
    font-variant-numeric: tabular-nums;
}

.resumo-legenda {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--dj-texto-apagado);
    font-size: 1.25rem;
    text-decoration: none;
}

.resumo-legenda:hover,
.resumo-legenda:focus-visible {
    color: var(--dj-link);
}

/* Quantos daquele número são Urgente/Tutela. Vermelho cheio: é o único
   ponto quente da faixa e precisa ser achado sem procurar. O raio é o
   mesmo ícone usado nas linhas da tabela e na ficha do processo, então a
   associação é imediata. */
.selo-tutela {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 20px;
    background-color: var(--dj-aviso-erro);
    color: var(--dj-texto-sobre-cor);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    cursor: help;
}

.selo-tutela .bi {
    font-size: 0.7rem;
}

/*--------------------------------------------------------------
# Telas de cadastro em lote e de ordenação de usuários
--------------------------------------------------------------
Estes estilos moravam em <style> dentro das próprias views. Trazidos
para cá para o sistema ter um lugar só de estilo — e porque a tela de
lote vinha inventando uma linguagem visual paralela (fundos e bordas
próprios) que não existia em nenhuma outra tela.
--------------------------------------------------------------*/

/* Prévia dos processos detectados no texto colado */
.processos-lista {
    max-height: 300px;
    overflow-y: auto;
    margin: 20px 0;
    border: 1px solid var(--dj-borda);
    border-radius: 5px;
    padding: 10px;
}

.processo-item {
    display: flex;
    justify-content: space-between;
    padding: 8px;
    border-bottom: 1px solid var(--dj-borda-suave);
}

.processo-item:last-child {
    border-bottom: none;
}

.processo-numero {
    font-weight: 600;
}

.processo-data {
    color: var(--dj-texto-suave);
}

.text-area-container {
    margin-bottom: 20px;
}

/* Campos aplicados a todos os processos do lote */
.campos-comuns {
    background-color: var(--dj-superficie-suave);
    border-radius: 5px;
    padding: 20px;
    margin: 20px 0;
}

/* Lista arrastável da tela de ordenação */
.list-group-item[data-id] {
    cursor: move;
}

.list-group-item .handle {
    cursor: grab;
}

.sortable-ghost {
    opacity: 0.7;
    background-color: var(--dj-pronto-fundo);
}

/* Tela de login (o "olho" que revela a senha e o aviso do "lembre de mim") */
.password-container {
    position: relative;
}

.password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
    color: var(--dj-texto-suave);
}

.login-aviso {
    font-size: 0.85rem;
    padding: 0.5rem;
    margin-top: 0.5rem;
}

/* O nome do usuário no cabeçalho e o atalho de busca do celular viraram
   <button> (eram links href="#"). O reset abaixo mantém a aparência que
   tinham como link dentro do .header-nav. */
.header-nav .nav-profile.btn-acoes,
.header-nav .search-bar-toggle.btn-acoes {
    background: none;
    border: 0;
    color: var(--dj-marca);
}

/*--------------------------------------------------------------
# Sino de notificações
--------------------------------------------------------------*/
.badge-numero {
    position: absolute;
    top: 2px;
    right: -4px;
    font-size: 0.65rem;
    padding: 2px 5px;
    border-radius: 10px;
}

.lista-notificacoes {
    width: min(380px, calc(100vw - 30px));
    /* Cabeçalho + cerca de 5 avisos. Passando disso rola, até os 10 que o
       servidor manda (LIMITE_DO_SINO); depois vai para a página cheia. */
    max-height: 420px;
    overflow-y: auto;
    padding-bottom: 6px;
}

@media (max-height: 700px) {
    .lista-notificacoes {
        max-height: 60vh;
    }
}

.lista-notificacoes .dropdown-header {
    font-size: 0.9rem;
    color: var(--dj-marca);
    font-weight: 600;
    padding: 10px 16px;
    text-align: left;
}

.notificacao-secao {
    padding: 8px 16px 4px;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dj-texto-apagado);
}

.notificacao-secao-rodape {
    padding: 2px 16px 8px;
    font-size: 0.78rem;
    color: var(--dj-texto-apagado);
}

.notificacao-item {
    width: 100%;
    border: 0;
    background: none;
    text-align: left;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 9px 16px;
    color: var(--dj-texto);
    font-size: 0.88rem;
    line-height: 1.35;
    text-decoration: none;
}

.notificacao-item:hover {
    background-color: var(--dj-superficie-suave);
    color: var(--dj-texto);
}

.notificacao-item i {
    font-size: 1.05rem;
    margin-top: 1px;
    flex-shrink: 0;
}

.notificacao-texto .small {
    color: var(--dj-texto-apagado);
}

/* Barra azul à esquerda no que ainda não foi lido — só cor não bastaria
   para quem não distingue bem tonalidades. */
.notificacao-item.nao-lida {
    background-color: var(--dj-nao-lida-fundo);
    box-shadow: inset 3px 0 0 var(--dj-link);
}

.notificacao-vazia,
.notificacao-carregando {
    padding: 22px 16px;
    text-align: center;
    color: var(--dj-texto-suave);
    font-size: 0.88rem;
}

.notificacao-vazia i {
    font-size: 1.8rem;
}

/*--------------------------------------------------------------
# Perfil e administração de usuários
--------------------------------------------------------------*/
.avatar-usuario {
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* Iniciais no lugar da foto: cor derivada do nome (ver avatarUsuario) */
.avatar-iniciais {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dj-texto-sobre-cor);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
}

/* Quem está desativado continua na lista, mas recuado visualmente */
.linha-inativa {
    opacity: 0.6;
}

.acoes-usuario {
    white-space: nowrap;
}

.acoes-usuario .btn {
    margin-left: 4px;
}

.senha-temporaria {
    font-size: 1.15rem;
    letter-spacing: 0.08em;
    background-color: var(--dj-superficie);
    border: 1px solid var(--dj-atencao-borda);
    border-radius: 6px;
    padding: 6px 14px;
    color: var(--dj-marca);
    user-select: all;
}

.lista-dados-conta li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--dj-borda-suave);
}

.lista-dados-conta li:last-child {
    border-bottom: none;
}

@media (max-width: 767.98px) {
    .acoes-usuario {
        white-space: normal;
    }

    .acoes-usuario .btn {
        margin: 2px 0 2px 4px;
    }
}

/* Avatar no cabeçalho: o template dimensionava o ícone antigo pelo
   font-size, que não vale para uma imagem. */
.nav-profile .avatar-usuario {
    border: 1px solid var(--dj-borda);
}

.nav-profile:hover .avatar-usuario {
    border-color: var(--dj-pronto-fundo);
}

/* Nome e cargo em duas linhas no perfil do cabeçalho. */
.header-nav .nav-profile .nav-profile-details {
    align-items: center;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
    text-align: center;
}

.header-nav .nav-profile .nav-profile-name {
    align-items: center;
    color: var(--dj-marca);
    display: flex;
    font-size: 14px;
    font-weight: 600;
    gap: 5px;
    justify-content: center;
    white-space: nowrap;
}

.header-nav .nav-profile .nav-profile-name i {
    font-size: 11px;
}

.header-nav .nav-profile .nav-profile-cargo {
    color: #6c757d;
    display: block;
    font-size: 11px;
    font-weight: 400;
    margin-top: 3px;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    width: 100%;
    white-space: nowrap;
}

/*--------------------------------------------------------------
# Página de perfil
--------------------------------------------------------------*/
/* O nome só vira link ao passar o mouse: numa lista com 8 cabeçalhos,
   8 nomes sublinhados em azul competiriam com os processos. */
.link-perfil {
    color: inherit;
    text-decoration: none;
}

.link-perfil:hover {
    color: var(--dj-link);
    text-decoration: underline;
}

.cartao-perfil {
    padding-top: 24px;
}

.perfil-foto {
    position: relative;
    display: inline-block;
}

.perfil-trocar-foto {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    padding: 0;
    border: 1px solid var(--dj-borda);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Números do perfil. O mesmo bloco serve para o painel de estatísticas
   avançadas, quando ele vier. */
.painel-numeros .numero-cartao {
    display: block;
    height: 100%;
    padding: 14px 12px;
    border-radius: 8px;
    background-color: var(--dj-superficie-suave);
    border: 1px solid var(--dj-borda);
    text-align: center;
    text-decoration: none;
    color: inherit;
}

a.numero-cartao:hover {
    border-color: var(--dj-link);
}

.numero-valor {
    display: block;
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--dj-marca);
    font-variant-numeric: tabular-nums;
}

.numero-rotulo {
    display: block;
    margin-top: 2px;
    font-size: 0.78rem;
    color: var(--dj-texto-suave);
}

.numero-pronto {
    background-color: var(--dj-pronto-fundo);
    border-color: var(--dj-pronto-fundo);
}

.numero-pronto .numero-valor,
.numero-pronto .numero-rotulo {
    color: var(--dj-pronto-texto);
}

.numero-urgente {
    background-color: var(--dj-urgente-fundo);
    border-color: var(--dj-urgente-fundo);
}

.numero-urgente .numero-valor,
.numero-urgente .numero-rotulo {
    color: var(--dj-urgente-texto);
}

.numero-sucesso .numero-valor {
    color: var(--dj-aviso-sucesso);
}

/* Miniatura no cabeçalho do card, entre o nome e os selos. Um respiro
   maior à esquerda separa a foto do nome; o menor à direita mantém a
   foto colada ao bloco de identidade, e não aos números. */
.avatar-cabecalho {
    margin: 0 4px 0 8px;
    vertical-align: -7px;
}

/* Selo de urgência dentro do aviso. Fica na própria linha, abaixo do
   número, para não empurrar o texto nem quebrar em telas estreitas. */
.selo-urgente {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 1px 8px;
    border-radius: 10px;
    background-color: var(--dj-urgente-fundo);
    color: var(--dj-urgente-texto);
    font-size: 0.72rem;
    font-weight: 600;
}

/* "Com Prioridade" é um degrau abaixo de urgente/tutela: mesmo formato de
   selo, no amarelo que a linha da tabela já usa para essa marcação. */
.selo-prioridade {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 1px 8px;
    border-radius: 10px;
    background-color: var(--dj-prioridade-fundo);
    color: var(--dj-prioridade-texto);
    font-size: 0.72rem;
    font-weight: 600;
}

/*--------------------------------------------------------------
# Botões flutuantes: "novo processo" e "voltar ao topo"
--------------------------------------------------------------
Os dois vinham do template em posições fixas próprias e acabavam um
por cima do outro no canto inferior direito.

Sobrou um só: o "voltar ao topo", no canto de baixo à direita, onde
antes ficava o "+".

O botão flutuante de adicionar saiu porque dois botões redondos
empilhados no mesmo canto disputavam o clique — e, na prática, o de cima
cobria parte do de baixo. Adicionar processo continua a um clique de
distância, no botão azul do topo da página e no menu lateral.

Não fica à esquerda porque ali mora a barra lateral: no computador ele
flutuaria por cima do menu, e ao recolher a barra ficaria perdido no
meio do nada.
--------------------------------------------------------------*/
.back-to-top {
    /* Mesma cara do botão "+" do topo da página (btn-primary rounded-3
       shadow-sm do Bootstrap): mesmo azul, mesmo canto arredondado,
       mesma sombra. Assim os dois se leem como o mesmo tipo de coisa —
       um botão de ação do sistema —, e não como dois enfeites
       diferentes. */
    width: 46px;
    height: 46px;
    right: 30px;
    bottom: 30px;
    border-radius: 0.5rem; /* o mesmo do .rounded-3 */
    background: #0d6efd;   /* o mesmo do .btn-primary */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* .shadow-sm */
}

.back-to-top:hover {
    background: #0b5ed7; /* o hover do .btn-primary */
    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.35);
}

.back-to-top i {
    font-size: 26px;
}

@media (max-width: 767.98px) {
    /* Um pouco menor e mais perto do canto, como todo botão flutuante
       no celular. */
    .back-to-top {
        width: 42px;
        height: 42px;
        right: 20px;
        bottom: 20px;
    }

    .back-to-top i {
        font-size: 24px;
    }
}


/* Rodapé do sino, quando há mais avisos do que ele mostra */
.notificacao-ver-todas {
    display: block;
    padding: 10px 16px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dj-link);
    text-decoration: none;
}

.notificacao-ver-todas:hover {
    background-color: var(--dj-superficie-suave);
    color: var(--dj-link);
}

/* Na página cheia a lista não rola nem tem largura fixa: ela é a página. */
.lista-notificacoes-pagina .notificacao-item {
    border-radius: 6px;
}

.lista-notificacoes-pagina .notificacao-secao:first-child {
    padding-top: 0;
}

/*--------------------------------------------------------------
# Ficha do processo (modal aberto pelo sino)
--------------------------------------------------------------*/
.ficha-numero {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--dj-marca);
    white-space: nowrap;
}

.ficha-dados {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 8px 16px;
    margin: 0;
}

.ficha-dados dt {
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--dj-texto-suave);
}

.ficha-dados dd {
    margin: 0;
    font-size: 0.95rem;
}

.ficha-dados .avatar-usuario {
    vertical-align: -6px;
    margin-right: 4px;
}

/* Editor de observação embutido na ficha */
.ficha-editar-obs {
    padding: 0;
    font-size: 0.85rem;
    text-decoration: none;
    color: var(--dj-marca);
}

.ficha-editar-obs:hover {
    text-decoration: underline;
}

.ficha-obs-editor textarea {
    /* Sem isto o campo herda a largura do conteúdo da grade e fica estreito. */
    width: 100%;
    resize: vertical;
}

@media (max-width: 575.98px) {
    /* Em tela estreita, rótulo em cima do valor. */
    .ficha-dados {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .ficha-dados dd {
        margin-bottom: 10px;
    }
}

/*--------------------------------------------------------------
# Configurações do Sistema
--------------------------------------------------------------*/
.config-nivel {
    border: 1px solid var(--dj-borda);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 14px;
}

.config-nivel-titulo {
    font-weight: 600;
    margin-bottom: 12px;
}

.config-nivel-titulo .bi {
    margin-right: 6px;
}

/*--------------------------------------------------------------
# Painel de lançados por período (tela de Processos Lançados)
--------------------------------------------------------------
Eram oito números do mesmo tamanho e da mesma cor verde, o que obrigava
a ler todos para achar o que interessa. Agora o período atual é um
número grande e o anterior aparece embaixo, como comparação.
--------------------------------------------------------------*/
.painel-item {
    height: 100%;
    padding: 14px 16px;
    border: 1px solid var(--dj-borda);
    border-radius: 10px;
    background-color: var(--dj-superficie);
}

.painel-rotulo {
    display: block;
    font-size: 0.8rem;
    color: var(--dj-texto-suave);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.painel-numero {
    display: block;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--dj-marca);
}

.painel-comparacao {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 0.8rem;
    color: var(--dj-texto-suave);
}

.painel-seta {
    font-size: 1.1rem;
    line-height: 1;
}

.painel-diferenca {
    font-weight: 600;
}

.painel-anterior {
    margin-left: 5px;
    white-space: nowrap;
}

/* A seta e o sinal já dizem para que lado foi; a cor só reforça, para
   quem não distingue as duas (ver WCAG 1.4.1 — não usar só a cor). */
.comparacao-acima .painel-seta,
.comparacao-acima .painel-diferenca {
    color: var(--dj-aviso-sucesso);
}

.comparacao-abaixo .painel-seta,
.comparacao-abaixo .painel-diferenca {
    color: var(--dj-dias-atencao);
}

@media (max-width: 575.98px) {
    .painel-numero {
        font-size: 1.5rem;
    }

    /* Em tela estreita o "ontem: 9" não cabe ao lado do número da
       diferença; vai para a linha de baixo em vez de espremer. */
    .painel-comparacao {
        flex-wrap: wrap;
    }

    .painel-anterior {
        margin-left: 0;
        flex-basis: 100%;
    }
}

/*--------------------------------------------------------------
# Relatórios
--------------------------------------------------------------
Os gráficos daqui são <div> com largura/altura em porcentagem, sem
biblioteca. As duas que o template traz (ECharts, ApexCharts) pesam
centenas de KB para desenhar doze barras — e a página de Lançados
acabou de ser limpa exatamente desse tipo de peso. Como bônus, estes
imprimem bem e seguem o tema pelas variáveis de cor.
--------------------------------------------------------------*/

/* ---- Seletor de período ----
   Duas faixas empilhadas: os atalhos em cima, o intervalo livre embaixo.
   Antes era uma linha só com margin-left:auto no bloco das datas — numa
   tela larga isso abria um vão enorme no meio e os dois grupos pareciam
   não ter relação nenhuma. */
.rel-filtro .card-body {
    padding: 14px 18px;
}

.rel-periodos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rel-filtro-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--dj-borda-suave);
}

.rel-personalizado-rotulo {
    font-size: 0.85rem;
    color: var(--dj-texto-suave);
}

.rel-periodo {
    padding: 5px 12px;
    border: 1px solid var(--dj-borda);
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--dj-texto-suave);
    text-decoration: none;
    white-space: nowrap;
}

.rel-periodo:hover {
    border-color: var(--dj-link);
    color: var(--dj-link);
}

.rel-periodo.ativo {
    background-color: var(--dj-marca);
    border-color: var(--dj-marca);
    color: var(--dj-texto-sobre-cor);
}

.rel-personalizado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.rel-personalizado input[type="date"] {
    width: 145px;
}

/* ---- Títulos de seção ---- */
/* Uma distância só entre blocos, do título ao cartão e de um bloco ao
   seguinte. Antes o espaço acima e abaixo do título era diferente do
   gutter das linhas, e a página ficava com respiros irregulares. */
.rel-secao {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin: 28px 0 10px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--dj-marca);
}

/* O primeiro título vem logo depois do filtro: sem isto, ele herda a
   distância dos demais e o topo da página fica com um vão maior. */
.rel-filtro + .rel-secao {
    margin-top: 18px;
}

/* Dentro de uma coluna (Serventias / Ritmo da semana), os dois títulos
   já estão alinhados pelo topo da linha — a distância do bloco anterior é
   dada pela própria linha (.rel-linha-dupla), senão o título encostaria
   no cartão de cima. */
.relatorio .col-xl-7 > .rel-secao,
.relatorio .col-xl-5 > .rel-secao {
    margin-top: 0;
}

/* 12 + os 16px de padding que o gutter (g-3) dá aos filhos = os mesmos
   28px de respiro que os outros blocos têm. */
.relatorio .rel-linha-dupla {
    margin-top: 12px;
}

.relatorio .card {
    margin-bottom: 0;
}

/* Uma linha inteira (a de cartões ou a de duas colunas) e o próximo
   título mantêm a mesma distância dos outros blocos. */
.relatorio .row + .rel-secao {
    margin-top: 28px;
}

.rel-secao small {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--dj-texto-suave);
}

/* ---- Números do topo ---- */
.rel-kpi {
    height: 100%;
    padding: 16px 18px;
    border: 1px solid var(--dj-borda);
    border-radius: 10px;
    background-color: var(--dj-superficie);
}

/* O número principal do relatório ganha a barra da marca à esquerda:
   entre quatro cartões iguais, é preciso dizer por onde começar. */
.rel-kpi-destaque {
    border-left: 4px solid var(--dj-marca);
}

.rel-kpi-rotulo {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--dj-texto-suave);
}

.rel-kpi-numero {
    display: block;
    margin: 2px 0;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--dj-marca);
}

.rel-kpi-numero small {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--dj-texto-suave);
}

.rel-kpi-nota {
    display: block;
    font-size: 0.78rem;
    color: var(--dj-texto-suave);
}

/* ---- Barra empilhada dos prazos ---- */
/* A barra colava no topo e nas laterais do cartão. O margin dá o mesmo
   respiro que os outros elementos têm dentro do card-body. */
.rel-barra-prazos {
    display: flex;
    height: 32px;
    margin: 6px 0 4px;
    border-radius: 8px;
    overflow: hidden;
}

.rel-faixa {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 3px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--dj-texto-sobre-cor);
}

/* As três faixas de prazo, nas mesmas cores das linhas da tabela: quem
   já conhece o verde/laranja/vermelho da lista lê isto sem legenda. */
.faixa-em-dia { background-color: var(--dj-aviso-sucesso); }
.faixa-atencao { background-color: var(--dj-dias-atencao); }
.faixa-estourado { background-color: var(--dj-aviso-erro); }
.faixa-producao { background-color: var(--dj-link); }

/* Os três números da barra empilhada, em blocos. Substituíram a legenda
   em linha, que deixava o resto do cartão vazio. */
.rel-faixas-detalhe {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 16px;
}

.rel-faixa-bloco {
    padding: 10px 12px;
    border: 1px solid var(--dj-borda);
    border-radius: 8px;
}

.rel-faixa-marca {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    vertical-align: 1px;
}

.rel-faixa-rotulo {
    font-size: 0.8rem;
    color: var(--dj-texto-suave);
}

.rel-faixa-numero {
    display: block;
    margin-top: 2px;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--dj-texto);
}

.rel-faixa-porcento {
    display: block;
    font-size: 0.75rem;
    color: var(--dj-texto-apagado);
}

/* ---- Barra horizontal de uma linha (pessoa, serventia, dia) ---- */
.rel-linha-barra {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.rel-linha-rotulo {
    flex: 0 0 82px;
    font-size: 0.85rem;
    color: var(--dj-texto-suave);
}

.rel-linha-trilho {
    flex: 1;
    height: 10px;
    border-radius: 5px;
    background-color: var(--dj-borda-suave);
    overflow: hidden;
}

.rel-linha-preenchida {
    height: 100%;
    border-radius: 5px;
    min-width: 2px;
}

.rel-linha-valor {
    flex: 0 0 auto;
    min-width: 42px;
    text-align: right;
    font-size: 0.85rem;
    font-weight: 600;
}

/* ---- Gráfico dos 12 meses ---- */
.gr-meses {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 210px;
}

.gr-mes {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

/* O trilho ocupa a altura restante e alinha a barra embaixo — é o que faz
   todas as barras partirem da mesma linha de base. O padding no topo é o
   espaço reservado para o número, que fica ancorado acima da barra. */
.gr-trilho {
    display: flex;
    align-items: flex-end;
    box-sizing: border-box;
    width: 100%;
    flex: 1;
    padding-top: 20px;
}

.gr-barra {
    position: relative;
    width: 100%;
    border-radius: 4px 4px 0 0;
    background-color: var(--dj-link);
    min-height: 2px;
}

/* Ancorado no topo da própria barra. Antes era irmão do trilho, e os doze
   números ficavam numa fileira lá em cima, longe das barras que
   descreviam. */
.gr-valor {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    padding-bottom: 3px;
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center;
    color: var(--dj-texto-suave);
}

/* O mês corrente ainda está em curso: fica com a cor da marca para não
   ser lido como uma queda de produção. */
.gr-mes-atual .gr-barra {
    background-color: var(--dj-marca);
}

.gr-mes-atual .gr-valor {
    color: var(--dj-marca);
}

.gr-rotulo {
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--dj-texto-suave);
    text-align: center;
    line-height: 1.2;
}

.gr-ano {
    font-size: 0.65rem;
    color: var(--dj-texto-apagado);
}

/* ---- Tabelas do relatório ---- */
.rel-tabela th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--dj-texto-suave);
}

.rel-tabela .rel-linha-barra {
    margin-bottom: 0;
}

.rel-col-grafico {
    min-width: 200px;
}

/* Número do processo: parece link, mas abre a ficha em vez de navegar. */
.rel-numero {
    padding: 0;
    border: 0;
    background: none;
    font-weight: 600;
    color: var(--dj-link);
}

.rel-numero:hover {
    text-decoration: underline;
}

.rel-rodape {
    margin-top: 24px;
    text-align: center;
}

@media (max-width: 767.98px) {
    /* Em 375px as duas datas + o "até" + o botão não cabem numa linha: sem
       o wrap, o botão Aplicar ficava para fora da tela. As datas dividem a
       primeira linha e o botão desce ocupando a largura toda. */
    .rel-personalizado {
        margin-left: 0;
        width: 100%;
        flex-wrap: wrap;
    }

    .rel-personalizado input[type="date"] {
        flex: 1 1 120px;
        width: auto;
        min-width: 0;
    }

    .rel-personalizado .btn {
        flex: 1 1 100%;
    }

    .gr-meses {
        height: 165px;
    }

    /* Três blocos lado a lado não cabem em 375px sem quebrar o número. */
    .rel-faixas-detalhe {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .rel-faixa-bloco {
        display: flex;
        align-items: baseline;
        gap: 8px;
        padding: 8px 10px;
    }

    .rel-faixa-numero {
        display: inline;
        margin-left: auto;
        font-size: 1.1rem;
    }

    .rel-faixa-porcento {
        display: inline;
    }

    /* Em tela estreita, doze rótulos não cabem: o valor em cima da barra
       já identifica cada mês pelo tamanho, e o rótulo fica minúsculo. */
    .gr-rotulo {
        font-size: 0.6rem;
    }

    .rel-kpi-numero {
        font-size: 1.5rem;
    }
}

/*--------------------------------------------------------------
# Impressão do relatório
--------------------------------------------------------------
Relatório é o tipo de tela que acaba virando papel (reunião, correição).
Sem estas regras, sairiam o menu, o cabeçalho fixo e os botões — e os
cartões seriam cortados na quebra de página.
--------------------------------------------------------------*/
@media print {
    #header,
    #sidebar,
    #footer,
    .back-to-top,
    .rel-filtro,
    .breadcrumb {
        display: none !important;
    }

    #main {
        margin: 0 !important;
        padding: 0 !important;
    }

    .card,
    .rel-kpi {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        break-inside: avoid;
    }

    .rel-secao {
        break-after: avoid;
    }

    /* Fundos coloridos só saem na impressora se isto for pedido — e sem
       eles a barra de prazos imprime em branco, sem informação nenhuma. */
    .rel-faixa,
    .rel-linha-preenchida,
    .gr-barra {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/*--------------------------------------------------------------
# Selo de tutela no painel de totais da tela inicial
--------------------------------------------------------------
Vermelho no meio dos números azuis de propósito: tutela é o que muda a
ordem do dia. O rótulo em texto acompanha a cor, para quem não distingue
vermelho de azul continuar lendo a informação (WCAG 1.4.1).
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Tabela do "Histórico do Processo"
--------------------------------------------------------------
As larguras ficam aqui, e não em style="" dentro de cada tela: eram três
cópias da mesma tabela com números diferentes, e o cabeçalho "Distribuído
para" quebrava em duas linhas numa delas.
--------------------------------------------------------------*/
.tabela-historico th {
    padding: 10px;
    text-align: left;
    white-space: nowrap;
}

.tabela-historico td {
    padding: 10px;
    vertical-align: middle;
}

.tabela-historico th:nth-child(1),
.tabela-historico td:nth-child(1) {
    width: 15%;
    white-space: nowrap;
}

.tabela-historico th:nth-child(2),
.tabela-historico td:nth-child(2) {
    width: 22%;
    white-space: nowrap;
}

/* A observação é a única que pode ser longa: fica com o resto do espaço
   e é cortada com reticências (clicar abre o texto inteiro no modal). */
.tabela-historico th:nth-child(3),
.tabela-historico td:nth-child(3) {
    width: auto;
    max-width: 0;
}

.tabela-historico th:nth-child(4),
.tabela-historico td:nth-child(4) {
    width: 22%;
}

.tabela-historico th:last-child,
.tabela-historico td:last-child {
    width: 44px;
}

/*--------------------------------------------------------------
# Respiro no topo dos cartões do relatório
--------------------------------------------------------------
O .card-body do template vem com "padding: 0 20px 20px" — sem nada em
cima, porque ele assume que todo cartão começa por um .card-title, que
traz o próprio espaço.

Os cartões daqui não têm título (o título é o <h2> da seção, fora do
cartão), então o conteúdo colava na borda de cima: o gráfico, as três
tabelas e as barras do "Ritmo da semana" começavam a zero pixel do topo.
--------------------------------------------------------------*/
.relatorio .card-body {
    padding-top: 20px;
}

/* Quando existe título, ele já traz os 20px — somar os dois abriria um
   vão maior justamente no cartão que tem cabeçalho. */
.relatorio .card-body > .card-title:first-child {
    padding-top: 0;
}

/* O filtro é mais compacto que os demais e define o próprio espaçamento;
   a regra acima vem depois dele no arquivo, então precisa ser repetida. */
.rel-filtro .card-body {
    padding-top: 14px;
}

/* A barra de prazos já não precisa da margem que compensava a falta de
   padding no topo. */
.rel-barra-prazos {
    margin-top: 0;
}

/*--------------------------------------------------------------
# Tela de pesquisa
--------------------------------------------------------------*/
/* Estado vazio: explica o que a busca cobre em vez de só dizer "nada
   encontrado" e deixar a pessoa sem próximo passo. */
.pesquisa-vazia {
    padding: 28px 20px;
    border: 1px dashed var(--dj-borda);
    border-radius: 10px;
    text-align: center;
    color: var(--dj-texto-suave);
}

.pesquisa-vazia .bi {
    display: block;
    margin-bottom: 8px;
    font-size: 1.6rem;
    color: var(--dj-texto-apagado);
}

.pesquisa-vazia ul {
    display: inline-block;
    text-align: left;
    margin-top: 4px;
}

/*--------------------------------------------------------------
# Respiro no topo dos cartões do relatório
--------------------------------------------------------------
O .card-body do template vem com "padding: 0 20px 20px" — sem nada em
cima, porque ele assume que todo cartão começa por um .card-title, que
traz o próprio espaço.

Os cartões daqui não têm título (o título é o <h2> da seção, fora do
cartão), então o conteúdo colava na borda de cima: o gráfico, as três
tabelas e as barras do "Ritmo da semana" começavam a zero pixel do topo.
--------------------------------------------------------------*/
.relatorio .card-body {
    padding-top: 20px;
}

/* Quando existe título, ele já traz os 20px — somar os dois abriria um
   vão maior justamente no cartão que tem cabeçalho. */
.relatorio .card-body > .card-title:first-child {
    padding-top: 0;
}

/* O filtro é mais compacto que os demais e define o próprio espaçamento;
   a regra acima vem depois dele no arquivo, então precisa ser repetida. */
.rel-filtro .card-body {
    padding-top: 14px;
}

/* A barra de prazos já não precisa da margem que compensava a falta de
   padding no topo. */
.rel-barra-prazos {
    margin-top: 0;
}

/*--------------------------------------------------------------
# Tela de pesquisa
--------------------------------------------------------------*/
/* Estado vazio: explica o que a busca cobre em vez de só dizer "nada
   encontrado" e deixar a pessoa sem próximo passo. */
.pesquisa-vazia {
    padding: 28px 20px;
    border: 1px dashed var(--dj-borda);
    border-radius: 10px;
    text-align: center;
    color: var(--dj-texto-suave);
}

.pesquisa-vazia .bi {
    display: block;
    margin-bottom: 8px;
    font-size: 1.6rem;
    color: var(--dj-texto-apagado);
}

.pesquisa-vazia ul {
    display: inline-block;
    text-align: left;
    margin-top: 4px;
}

/* O relatório dentro do perfil. Reaproveita tudo de .relatorio; só o
   título de abertura precisa de mais respiro, porque vem depois dos
   cartões de situação e produção. */
.relatorio-do-perfil {
    margin-top: 8px;
}

.rel-secao-abertura {
    padding-top: 8px;
    border-top: 1px solid var(--dj-borda);
}

/*--------------------------------------------------------------
# Barra lateral: encolhida, abre ao passar o mouse
--------------------------------------------------------------
Fica em 72px mostrando só os ícones, e abre para 280px ao passar o
mouse ou ao ser alcançada pelo teclado. Os dez itens vão em três
grupos com título.

Quatro decisões que separam "legal" de "irritante":

1. O CONTEÚDO NÃO SE MEXE. A barra expandida flutua POR CIMA, com
   sombra, e #main continua com a margem de 72px. Se a página se
   reorganizasse a cada passada de mouse, ler a tabela viraria um
   pesadelo.

2. O ÍCONE NÃO ANDA. Ele fica na mesma posição nos dois estados; o
   que entra é o texto, à direita. Barra que empurra o ícone ao abrir
   dá sensação de tranco.

3. TECLADO FUNCIONA. :focus-within abre igual ao mouse, então quem
   navega por Tab não fica olhando dez ícones sem legenda. E cada
   ícone tem `title`, para o balão do navegador dizer o nome sem
   precisar esperar a barra abrir.

4. DÁ PARA PRENDER. O alfinete no rodapé deixa a barra aberta; aí sim
   o conteúdo cede espaço, porque a escolha foi deliberada e não vai
   se desfazer sozinha. A preferência fica no navegador de cada um.

A partir de 900px, e não dos 1200px do template. O template escondia a
barra por completo abaixo de 1200, o que deixava sem menu nenhum quem
trabalha numa janela de 1000 ou 1100px — justamente a faixa em que a
barra em miniatura mais rende, porque ocupa 72px em vez de 300.

Abaixo de 900px ela continua escondida, abrindo pelo botão ☰ — aí a tela
é estreita demais para ceder 72px de forma permanente.

Como o template tem as regras dele em 1199/1200px, várias declarações
aqui precisam desfazer o que ele faz na faixa de 900 a 1199 (o `left`,
por exemplo). É por isso que este bloco repete coisas que pareceriam
redundantes.
--------------------------------------------------------------*/
@media (min-width: 900px) {
    /* Desfaz o "left: -300px" que o template aplica abaixo de 1200px. */
    .sidebar {
        left: 0;
    }

    .sidebar {
        width: var(--dj-sidebar-encolhida);
        padding: 16px 12px;
        overflow-x: hidden;
        transition: width 0.22s ease;
    }

    #main,
    #footer {
        margin-left: var(--dj-sidebar-encolhida);
    }

    .sidebar:hover,
    .sidebar:focus-within,
    .sidebar-presa .sidebar {
        width: var(--dj-sidebar-aberta);
        box-shadow: 6px 0 24px rgba(1, 41, 112, 0.16);
    }

    .sidebar-presa #main,
    .sidebar-presa #footer {
        margin-left: var(--dj-sidebar-aberta);
    }

    /* O ☰ do cabeçalho continua escondendo tudo, inclusive quando a barra
       está presa.

       O !important aqui é o caminho honesto: "presa" mora no <html> (para
       ser aplicada antes do primeiro desenho, sem salto) e "toggle-sidebar"
       mora no <body>. Como estão em elementos diferentes, não existe
       seletor que combine as duas e vença por especificidade. */
    .toggle-sidebar .sidebar {
        left: calc(-1 * var(--dj-sidebar-aberta)) !important;
    }

    .toggle-sidebar #main,
    .toggle-sidebar #footer {
        margin-left: 0 !important;
    }

    .sidebar .sidebar-nav .nav-link {
        padding: 11px 14px;
        overflow: hidden;
        white-space: nowrap;
    }

    /* A largura fixa é o que mantém o ícone imóvel entre os dois estados. */
    .sidebar .sidebar-nav .nav-link i {
        flex: 0 0 20px;
        margin-right: 14px;
        font-size: 18px;
        text-align: center;
    }

    /* O texto some por opacidade, e não por display: assim ele já está no
       lugar quando aparece, sem saltar.

       As duas regras usam o MESMO caminho de seletor de propósito. Se a
       que esconde tiver mais especificidade que a que mostra, o texto não
       aparece nunca — foi o defeito da primeira versão deste bloco. */
    .sidebar .sidebar-nav .nav-link span,
    .sidebar .prender-sidebar span {
        opacity: 0;
        transition: opacity 0.15s ease;
    }

    .sidebar:hover .sidebar-nav .nav-link span,
    .sidebar:focus-within .sidebar-nav .nav-link span,
    .sidebar-presa .sidebar .sidebar-nav .nav-link span,
    .sidebar:hover .prender-sidebar span,
    .sidebar:focus-within .prender-sidebar span,
    .sidebar-presa .sidebar .prender-sidebar span {
        opacity: 1;
    }

    /* ---- Títulos de grupo ----
       Encolhida, o texto não cabe: ele fica invisível e um filete curto
       marca a divisão. Ao abrir, o filete some e o título aparece. A
       ALTURA é a mesma nos dois estados, então nada pula na transição. */
    .grupo-titulo {
        position: relative;
        height: 26px;
        margin: 8px 0 2px;
    }

    .grupo-titulo span {
        display: block;
        padding-left: 14px;
        line-height: 26px;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: #a7b3c9;
        opacity: 0;
        white-space: nowrap;
        transition: opacity 0.15s ease;
    }

    .grupo-titulo::before {
        content: "";
        position: absolute;
        left: 14px;
        top: 50%;
        width: 20px;
        border-top: 1px solid #dfe4ee;
        opacity: 1;
        transition: opacity 0.15s ease;
    }

    .sidebar:hover .grupo-titulo span,
    .sidebar:focus-within .grupo-titulo span,
    .sidebar-presa .sidebar .grupo-titulo span {
        opacity: 1;
    }

    .sidebar:hover .grupo-titulo::before,
    .sidebar:focus-within .grupo-titulo::before,
    .sidebar-presa .sidebar .grupo-titulo::before {
        opacity: 0;
    }

    /* O primeiro grupo encosta no topo da barra. */
    .sidebar-nav .grupo-titulo:first-child {
        margin-top: 0;
    }

    /* ---- O alfinete ---- */
    .prender-sidebar {
        display: flex;
        align-items: center;
        width: 100%;
        margin-top: 12px;
        padding: 11px 14px;
        border: 0;
        border-top: 1px solid var(--dj-borda);
        border-radius: 4px;
        background: none;
        color: var(--dj-texto-apagado);
        font-size: 15px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
    }

    .prender-sidebar i {
        flex: 0 0 20px;
        margin-right: 14px;
        font-size: 18px;
        text-align: center;
        transition: transform 0.2s ease;
    }

    .prender-sidebar:hover,
    .prender-sidebar:focus-visible {
        color: var(--dj-link);
        background: var(--dj-superficie-suave);
    }

    .sidebar-presa .prender-sidebar {
        color: var(--dj-link);
    }

    .sidebar-presa .prender-sidebar i {
        transform: rotate(45deg);
    }
}

/* Abaixo de 900px a barra é a de sempre: escondida, abrindo pelo ☰. O
   alfinete e os filetes de grupo não fazem sentido ali. */
@media (max-width: 899.98px) {
    .prender-sidebar {
        display: none;
    }

    .grupo-titulo span {
        display: block;
        padding: 10px 15px 4px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: #a7b3c9;
    }
}

/* O item onde você está, marcado por uma barra à esquerda além da cor de
   fundo — mais firme, e legível para quem não distingue azul. */
.sidebar-nav .nav-link:not(.collapsed) {
    position: relative;
}

.sidebar-nav .nav-link:not(.collapsed)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--dj-link);
}