/* =============================================================================
   Portal da Transparência - CSS custom ESCOPADO sob #pt-app.
   Integração no mesmo documento do Joomla (template também usa Bootstrap): todas
   as regras são prefixadas com #pt-app para não vazar para o template nem sofrer
   dele. O ID já dá especificidade suficiente (o portal vence dentro do próprio
   escopo). Exceções propositais, FORA de #pt-app:
     - body.high-contrast / body.highlight-links: acessibilidade opt-in, aplicada
       à página inteira (togglada no <body> pelo accessibility.js);
     - .dt-button-collection: o DataTables pode anexá-la ao <body> (classe de
       plugin, sem colisão com o Joomla).
   ============================================================================= */

/* NÃO estilizar a barra de rolagem no elemento raiz (html/body). Já foi tentado
   e desfeito: o visual cinza padrão do navegador ficou mais limpo, e a regra
   tinha um efeito colateral inesperado.

   `scrollbar-color` é uma propriedade HERDADA. Posta no html, ela desce para
   todo descendente rolável e pinta também as barras internas, como a dos cards
   do dashboard (#dashDestaque .dash-destaque-body, que tem overflow-y: auto) e
   a dos dropdowns do menu. Ou seja, colorir "só a barra da página" não existe
   por esse caminho.

   A barra azul do portal é apenas a horizontal das tabelas
   (#dynamic-top-scrollbar), estilizada mais abaixo com seletor próprio. */

/* Variáveis de tema: escopadas ao portal (não redefinem o Bootstrap do Joomla) */
#pt-app {
    --bs-primary: #003d69;
    --bs-primary-rgb: 0, 61, 105;
    --bs-secondary: #495057;
    --bs-secondary-rgb: 73, 80, 87;
    --bs-secondary-color: #495057;
    --bs-secondary-text-emphasis: #2b2f32;

    --bs-link-color: #003d69;
    --bs-link-hover-color: #002f51;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #f8f9fa;
    /* minimal gray */
}

#pt-app .text-secondary,
#pt-app .text-secondary-emphasis,
#pt-app .text-muted {
    color: #495057 !important;
}

/* Cabecalho: fundo "holografico" discreto, em azul/cinza da propria paleta
   (#82b9eb do submenu e #003d69 da marca sobre o cinza #f1f5f9). Entra SO como
   background-image, entao o bg-white do markup segue sendo a cor de base e nenhuma
   estrutura muda. Sao quatro camadas, de cima para baixo:
     1. faixa diagonal clara, larga e quase invisivel - e ela que da o ar de filme
        holografico, sem virar arco-iris;
     2. brilho azul claro nascendo no canto esquerdo;
     3. sombra azul da marca no canto direito;
     4. degrade cinza vertical de base.
   Sem animacao de proposito: o cabecalho ja muda de altura ao rolar, e um brilho em
   movimento cansaria a leitura. A navbar azul cobre a parte de baixo, entao o efeito
   aparece na faixa dos logos. */
#pt-app #main-header {
    background-image:
        linear-gradient(103deg, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, .8) 46%, rgba(255, 255, 255, 0) 56%),
        radial-gradient(120% 150% at 8% -20%, rgba(130, 185, 235, .24) 0%, rgba(130, 185, 235, 0) 58%),
        radial-gradient(95% 130% at 94% -25%, rgba(0, 61, 105, .13) 0%, rgba(0, 61, 105, 0) 62%),
        linear-gradient(180deg, #fdfefe 0%, #f1f5f9 100%);
}

/* Header & Logo Transitions */
#pt-app .transition-topbar {
    transition: padding 0.3s ease;
}

#pt-app .transition-logo {
    transition: width 0.3s ease, height 0.3s ease;
}

/* Mobile: mantem os logos na proporcao reduzida (o logo LAI bem menor), independente
   do estado de scroll (vence o height inline que o accessibility.js aplica). */
@media (max-width: 575.98px) {
    #pt-app #header-lai-logo { height: 34px !important; margin-left: 14px !important; }
    #pt-app #header-logo { height: 46px !important; width: auto !important; }
}

/* Mobile: busca + exportacao (toolbar do DataTables) em UMA linha propria, ocupando a
   largura toda; a busca cresce e o botao Exportar fica ao lado. Os filtros ficam no
   collapse (botao "Filtros"). */
@media (max-width: 767.98px) {
    /* UMA linha para Filtros + Pesquisar + Exportar: os dois botoes ficam inteiros e
       o campo de busca encolhe no meio. O espaco entre eles vem do gap-2 do slot. */
    /* nowrap com !important: o markup do CMS/conector/arquivos traz o utilitario
       .flex-wrap (que e !important no Bootstrap) e jogaria o Exportar para outra linha. */
    #pt-app #dtToolbar { width: 100%; margin-left: 0 !important; flex-wrap: nowrap !important; }
    #pt-app #dtToolbar .pt-btn-filtros { flex: 0 0 auto; width: auto; }
    #pt-app #dtToolbar .dataTables_filter { flex: 1 1 auto; width: auto; min-width: 0; margin: 0; }
    #pt-app #dtToolbar .dataTables_filter input { width: 100% !important; min-width: 0; }
    #pt-app #dtToolbar div.dt-buttons { flex: 0 0 auto; width: auto; display: flex; flex-wrap: nowrap; gap: .35rem; margin: 0; }
    #pt-app #dtToolbar div.dt-buttons .dt-button { flex: 0 0 auto; margin: 0; }
    /* Linha da busca/Filtros/Exportar vem ANTES do painel de filtros, para o painel
       abrir logo abaixo do botao que o controla. */
    #pt-app .consulta-header .border-top > #dtToolbar { order: 1; }
    #pt-app .consulta-header .border-top > #filtrosColapse { order: 2; }
    /* Filtros no mobile ocupam a LINHA INTEIRA (vencendo o flex-grow-1 do markup),
       para os selects nao abrirem espremidos ao lado do botao "Filtros". */
    #pt-app .consulta-header .border-top { align-items: flex-start; }
    /* As regras casam pelo FORMULARIO (#formFiltroPeriodo), presente em todas as
       telas de consulta, e nao so pelo collapse: assim valem tambem onde os filtros
       ficam sempre visiveis. */
    #pt-app #filtrosColapse,
    #pt-app #formFiltroPeriodo { flex: 0 0 100% !important; width: 100%; }
    #pt-app #formFiltroPeriodo .form-select,
    #pt-app #formFiltroPeriodo .input-group { width: 100% !important; }
    #pt-app #formFiltroPeriodo .input-group { max-width: 100%; }
    #pt-app #formFiltroPeriodo .btn { width: 100%; }
    /* Rotulo do filtro com a mesma largura minima: os campos ficam alinhados na
       coluna, em vez de comecarem cada um num ponto diferente. */
    #pt-app #formFiltroPeriodo .input-group-text { min-width: 96px; }
    /* Os filtros de campo trazem max-width:160px inline (util no desktop, onde a
       linha e unica). No mobile o campo ocupa o resto do grupo. */
    #pt-app #formFiltroPeriodo .input-group .form-control { max-width: none !important; }
    /* Fonte 16px nos campos: e o limite abaixo do qual o iOS aplica zoom automatico ao
       focar (e depois deixa a pagina deslocada na horizontal). A ALTURA fica a padrao do
       tema: forcar 44px aqui deformava os botoes e os campos.
    #pt-app #formFiltroPeriodo .form-select,
    #pt-app #formFiltroPeriodo .form-control,
    #pt-app #dtToolbar .dataTables_filter input { font-size: 16px; }

    /* Data de atualizacao alinhada a direita. */
    #pt-app .align-items-end { align-items: flex-end !important; }
    /* Cabecalho com dois objetos (Voltar e data de atualizacao): um em cada canto, na
       largura toda - Voltar na esquerda, data na direita. Na tela de arquivos o grupo
       mora dentro de uma coluna (align-items-end), que tambem passa a ocupar a linha. */
    #pt-app .consulta-header .pt-cab-acoes {
        width: 100%;
        /* !important para vencer o utilitario .justify-content-end do markup (a tela de
           arquivos usa esse utilitario, e os utilitarios do Bootstrap sao !important).
           O flex-wrap fica como esta: se os dois nao couberem (320px com data longa),
           e melhor empilhar do que estourar a largura da pagina. */
        justify-content: space-between !important;
    }
    #pt-app .consulta-header .align-items-end { width: 100%; }

    /* "Voltar" + data de atualizacao na MESMA linha ate 320px: o badge fica um passo
       menor. O !important e necessario porque a medida vem de style inline na view. */
    #pt-app .consulta-header .badge {
        font-size: .78rem !important;
        padding: .35rem .5rem !important;
    }

    /* Titulo dos modais compacto no mobile (cabe o botao fechar). */
    #pt-app .modal-title { text-transform: uppercase; max-width: 60%; font-size: 1rem; }
}

/* Telas de leitura (DataTables) em >=768px: a linha de filtros + Pesquisar +
   Exportar fica numa UNICA linha, sem quebrar. Os campos largos (selects)
   encolhem para caber; a busca e o exportar ficam juntos e inteiros (nao
   encolhem). No mobile (<768px) vale o empilhamento definido acima. */
@media (min-width: 768px) {
    #pt-app .consulta-header .border-top { flex-wrap: nowrap !important; }
    #pt-app .consulta-header #filtrosColapse { min-width: 0; }
    #pt-app #formFiltroPeriodo { flex-wrap: nowrap !important; min-width: 0; }
    /* Cada filtro encolhe (input-group), mas o rotulo (label) fica fixo e o
       select/campo e que diminui dinamicamente conforme falta espaco. */
    #pt-app #formFiltroPeriodo .input-group { min-width: 0; flex: 0 1 auto; }
    #pt-app #formFiltroPeriodo .input-group-text { flex-shrink: 0; }
    #pt-app #formFiltroPeriodo .form-select,
    #pt-app #formFiltroPeriodo .form-control { min-width: 0; flex: 1 1 auto; }
    /* Busca + Exportar juntos, sem quebrar; a BUSCA encolhe se faltar espaco
       (evita barra de rolagem horizontal na pagina, ex.: Ordem Cronologica); o
       botao Exportar fica inteiro. */
    #pt-app #dtToolbar { flex-wrap: nowrap !important; min-width: 0; }
    #pt-app #dtToolbar .dataTables_filter { min-width: 0; }
    #pt-app #dtToolbar .dataTables_filter input { min-width: 80px; }
    #pt-app #dtToolbar div.dt-buttons { flex-shrink: 0; }
}

/* Accessibility: High Contrast (GLOBAL - opt-in, página inteira) */
body.high-contrast {
    background-color: #000 !important;
    color: #fff !important;
}

body.high-contrast * {
    background-color: transparent;
    color: #fff !important;
    border-color: #fff !important;
}

body.high-contrast a {
    color: #ff0 !important;
    text-decoration: underline !important;
}

/* Mesmo motivo do bloco acima, agora na COR do texto: o cinza #495057 e o azul #003d69
   sao aplicados por regras como "#pt-app .text-muted" (1 id + 1 classe), que vencem o
   "body.high-contrast *" por especificidade - ficavam em 2,57:1 e 1,87:1 sobre o preto.
   Aqui voltam ao branco. */
body.high-contrast #pt-app .text-secondary,
body.high-contrast #pt-app .text-secondary-emphasis,
body.high-contrast #pt-app .text-muted,
body.high-contrast #pt-app .text-primary,
body.high-contrast #pt-app .link-primary {
    color: #fff !important;
}

/* Selo do Radar da Transparencia: o unico bloco que CONTINUA claro no modo, porque e
   um selo de terceiro com dois logotipos feitos para fundo claro. Entao aqui o texto
   volta ao escuro (o branco global deixava 1:1 sobre o #f8f9fa da placa). */
body.high-contrast #pt-app .btn-radar,
body.high-contrast #pt-app .btn-radar .txt-radar {
    color: #222 !important;
}

/* Alto contraste no chrome do portal: a regra "body.high-contrast *" acima zera a cor
   de fundo SEM !important, entao perde para os utilitarios .bg-white (#main-header) e
   para o fundo proprio do .consulta-header - os dois continuavam claros com o texto
   branco por cima, ou seja, ilegiveis. Aqui o fundo vai a preto explicitamente, e a
   imagem decorativa do cabecalho sai (a regra do * nao alcanca background-image, e
   qualquer tinta atrapalha a leitura nesse modo). */
body.high-contrast #pt-app #main-header,
body.high-contrast #pt-app .consulta-header {
    background-color: #000 !important;
    background-image: none !important;
}

/* O selo da LAI agora tem fundo transparente (alfa no proprio arquivo). No alto
   contraste o fundo da pagina vira preto, e o verde escuro do texto do selo sumiria
   nele; aqui - e SO aqui - devolvemos a placa branca que o arquivo opaco antigo
   trazia, para o selo nao depender da cor de fundo. */
body.high-contrast #pt-app #header-lai-logo {
    background-color: #fff !important;
    padding: 3px;
    border-radius: 3px;
}

/* Utilitarios de fundo claro do Bootstrap (badges, input-group-text, plates diversos):
   sao !important e sobrevivem ao modo, deixando texto branco sobre #f8f9fa. Vao para o
   mesmo #111 dos cards, que se destaca do preto do fundo sem perder contraste. O
   #main-header e o .consulta-header tem regra propria acima (2 ids) e continuam pretos. */
body.high-contrast #pt-app .bg-light,
body.high-contrast #pt-app .bg-white,
body.high-contrast #pt-app .bg-body,
body.high-contrast #pt-app .bg-body-tertiary,
body.high-contrast #pt-app .bg-body-secondary {
    background-color: #111 !important;
}

body.high-contrast .card,
body.high-contrast .navbar,
body.high-contrast .modal-content,
body.high-contrast .dropdown-menu {
    background-color: #111 !important;
    border: 1px solid #fff !important;
    /* Zera degrades de fundo (cards do tema e do dashboard). Sem isto o
       background-image continuaria pintando por cima do preto e o alto
       contraste perderia o efeito. */
    background-image: none !important;
}

body.high-contrast button {
    background-color: #333 !important;
}

/* Accessibility: Highlight Links (GLOBAL - opt-in) */
body.highlight-links a {
    background-color: #ff0 !important;
    color: #000 !important;
    text-decoration: underline !important;
    font-weight: bold;
    border-radius: 2px;
}

/* Botões */
#pt-app .btn-primary {
    background-color: #003d69 !important;
    border-color: #003d69 !important;
    padding: 3px 5px;
}

#pt-app .btn-primary:hover,
#pt-app .btn-primary:focus,
#pt-app .btn-primary:active {
    background-color: #002f51 !important;
    border-color: #002f51 !important;
}

/* Tabelas de dados mais densas (teste aprovado pelo usuário): células compactas,
   fonte menor e sem quebra de linha, para caber mais dados na tela. A rolagem
   horizontal fica a cargo da barra sticky azul. */
#pt-app .table>:not(caption)>*>* {
    padding: 5px;
    font-size: 0.80em;
    white-space: nowrap !important;
}

/* A tabela de dados das consultas (#dataTableBase) é a que carrega muita coluna,
   então vai um passo além na densidade: fonte menor que os 0.80em das demais.
   Só ela: o modal "Ver Detalhes" e as tabelas do painel ficam no tamanho antigo.
   Vale para cabeçalho, corpo e rodapé de totais. Para ajustar o tamanho, é este
   único valor. */
#pt-app #dataTableBase>:not(caption)>*>* {
    font-size: 0.72em;
}

/* Exceção: a tabela do modal "Ver Detalhes" deve quebrar linha (layout fixo,
   overflow oculto). Sem isto o nowrap acima cortaria os valores longos. */
#pt-app #tabelaDetalhes>:not(caption)>*>* {
    white-space: normal !important;
}

/* A regra de densidade acima (padding: 5px) sobrepõe o padding-right que o
   DataTables reserva para o ícone de ordenação (▲▼ em right:10px), fazendo a seta
   cair sobre o texto do cabeçalho. Restaura o espaço só nos TH ordenáveis. */
#pt-app table.dataTable thead>tr>th.sorting,
#pt-app table.dataTable thead>tr>th.sorting_asc,
#pt-app table.dataTable thead>tr>th.sorting_desc,
#pt-app table.dataTable thead>tr>th.sorting_asc_disabled,
#pt-app table.dataTable thead>tr>th.sorting_desc_disabled {
    padding-right: 21px !important;
    position: relative;
}

/* Cabecalhos das tabelas de dados sempre em MAIUSCULAS (pedido do usuario). */
#pt-app #dataTableBase thead th,
#pt-app table.dataTable thead th {
    text-transform: uppercase;
}

/* Links */
#pt-app .text-primary {
    color: #003d69 !important;
}

#pt-app .link-primary {
    color: #003d69 !important;
}

#pt-app .link-primary:hover {
    color: #002f51 !important;
}

/* Fundos */
#pt-app .bg-primary {
    background-color: #003d69 !important;
}

/* Bordas */
#pt-app .border-primary {
    border-color: #003d69 !important;
}

/* Alertas */
#pt-app .alert-primary {
    color: #00253d;
    background-color: #d9e8f3;
    border-color: #b8d3e7;
}

/* Badges */
#pt-app .badge.bg-primary {
    background-color: #003d69 !important;
}

/* Dropdowns */
#pt-app .dropdown-item.active,
#pt-app .dropdown-item:active {
    background-color: #003d69 !important;
}

/* Paginação */
#pt-app .page-item.active .page-link {
    background-color: #003d69 !important;
    border-color: #003d69 !important;
}

#pt-app .page-link {
    color: #003d69;
}

#pt-app .page-link:hover {
    color: #002f51;
}

/* Checkboxes e radios Bootstrap */
#pt-app .form-check-input:checked {
    background-color: #003d69;
    border-color: #003d69;
}

/* Switch */
#pt-app .form-switch .form-check-input:checked {
    background-color: #003d69;
    border-color: #003d69;
}

/* Inputs focados */
#pt-app .form-control:focus,
#pt-app .form-select:focus {
    border-color: #003d69;
    box-shadow: 0 0 0 .25rem rgba(0, 61, 105, .25);
}

/* Tabelas */
#pt-app .table-primary {
    --bs-table-bg: #d9e8f3;
    --bs-table-striped-bg: #c9deed;
    --bs-table-active-bg: #b8d3e7;
    --bs-table-hover-bg: #c2d9ea;
}

/* Accordion */
#pt-app .accordion-button:not(.collapsed) {
    background-color: rgba(0, 61, 105, .1);
    color: #003d69;
}

/* Progress */
#pt-app .progress-bar {
    background-color: #003d69;
}

#pt-app .navbar {
    background-color: var(--bs-primary) !important;
}

#pt-app .navbar,
#pt-app .navbar a,
#pt-app .navbar .nav-link,
#pt-app .navbar .navbar-brand,
#pt-app .navbar i {
    color: #fff;
}

#pt-app a.dropdown-item i {
    color: #003d69;
}

/* Força a cor primária (azul) nos ícones dentro dos resultados de busca,
   sobreescrevendo a regra do .navbar i acima */
#pt-app #globalSearchResults i,
#pt-app #globalSearchResults .text-muted,
#pt-app #globalSearchResults .fw-semibold {
    color: initial;
}

#pt-app #globalSearchResults i.text-primary {
    color: var(--bs-primary) !important;
}

#pt-app #globalSearchResults.dropdown-menu a.dropdown-item {
    color: var(--bs-dark) !important;
}

#pt-app #globalSearchResults.dropdown-menu a.dropdown-item .text-muted {
    color: var(--bs-secondary) !important;
}

#pt-app #globalSearchResults.dropdown-menu a.dropdown-item:hover {
    background-color: var(--bs-light) !important;
}

/* Busca global (pt-busca): ao abrir, o campo NAO empurra o menu/tela. Vira um
   overlay posicionado a esquerda do icone (cresce para a esquerda, por cima do
   menu). O !important vence o .position-relative do markup. */
#pt-app .pt-busca { position: relative; }
#pt-app .pt-busca .pt-busca-campo {
    position: absolute !important;
    top: 50%;
    right: calc(100% + 8px);
    transform: translateY(-50%);
    z-index: 1055;
}
#pt-app .pt-busca .pt-busca-campo input {
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .18);
    border-radius: .5rem;
}
#pt-app .pt-busca #globalSearchResultsDesktop {
    margin-top: 2px;
}

/* Dropdown principal */
#pt-app .dropdownTileConteudo.dropdown-menu {
    background: #003d69;
    border: 0;
    border-radius: 10px;
    min-width: 320px;
    padding: .5rem 0;
    margin-top: .1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .20) !important;
}

/* Itens */
#pt-app .dropdownTileConteudo .dropdown-item {
    color: #fff;
    font-size: .95rem;
    padding: .20rem .50rem;
    padding-left: 0.5rem;
    transition: all .15s ease;
    display: flex;
    align-items: center;
}

/* Ícones */
#pt-app .dropdownTileConteudo .dropdown-item i {
    color: rgba(255, 255, 255, .75) !important;
    width: 18px;
}

/* Hover */
#pt-app .dropdownTileConteudo .dropdown-item:hover,
#pt-app .dropdownTileConteudo .dropdown-item:focus {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    padding-left: 0.8rem;
}

/* Hover dos ícones */
#pt-app .dropdownTileConteudo .dropdown-item:hover i {
    color: #fff !important;
}

/* Item ativo */
#pt-app .dropdownTileConteudo .dropdown-item.active,
#pt-app .dropdownTileConteudo .dropdown-item:active {
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-weight: 600;
}

/* Títulos de grupo dentro do dropdown escuro (ex.: "Legislação Municipal",
   "Legislação Orçamentária") em branco para contraste sobre o fundo azul. */
#pt-app .dropdownTileConteudo .dropdown-header {
    color: #fff;
    opacity: .85;
    font-weight: 600;
}

/* Separador */
#pt-app .dropdownTileConteudo .dropdown-divider {
    border-color: rgba(255, 255, 255, .15);
    margin: .35rem 0;
}

/* Scroll personalizado */
#pt-app .dropdownTileConteudo::-webkit-scrollbar {
    width: 8px;
}

#pt-app .dropdownTileConteudo::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .05);
}

#pt-app .dropdownTileConteudo::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .25);
    border-radius: 10px;
}

#pt-app .dropdownTileConteudo::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, .4);
}

#pt-app .dropdownTileConteudo.dropdown-menu {
    background: rgba(0, 61, 105, .97);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Menu no mobile/tablet (<992px, quando o navbar colapsa no hamburguer):
   evita que o menu "corte a tela". Dois pontos:
   1) O menu aberto (navbar-collapse) rola verticalmente se for mais alto que a
      tela, em vez de ser cortado; sem overflow horizontal.
   2) Os dropdowns das categorias ocupam a largura toda (o min-width:320px
      estourava a direita em telas estreitas) e nao criam scroll lateral. */
@media (max-width: 991.98px) {
    #pt-app #main-header .navbar-collapse {
        max-height: calc(100vh - 96px);
        overflow-y: auto;
        overflow-x: hidden;
    }
    #pt-app #main-header .dropdownTileConteudo.dropdown-menu {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
    }
    #pt-app #main-header .navbar-nav .nav-link,
    #pt-app #main-header .dropdownTileConteudo .dropdown-item {
        white-space: normal;
        word-break: break-word;
    }
    /* Menu mobile mais organizado/profissional: cada categoria com respiro e
       separador sutil; a seta do dropdown alinhada a direita. */
    #pt-app #main-header .navbar-collapse { padding: .25rem .35rem .5rem; }
    #pt-app #main-header .navbar-nav > .nav-item > .nav-link {
        padding: .6rem .5rem;
        border-bottom: 1px solid rgba(255, 255, 255, .10);
        font-weight: 500;
    }
    #pt-app #main-header .navbar-nav > .nav-item:last-child > .nav-link { border-bottom: 0; }
    #pt-app #main-header .navbar-nav .nav-link.dropdown-toggle { display: flex; align-items: center; }
    #pt-app #main-header .navbar-nav .nav-link.dropdown-toggle::after { margin-left: auto; }
    #pt-app #main-header .navbar-nav .dropdown-menu { margin: 0 0 .4rem; border-radius: 8px; }
}
/* Rotulo "Menu" ao lado do hamburguer: some no desktop (>=992px, navbar expandido). */
@media (min-width: 992px) {
    #pt-app #main-header .pt-menu-toggle { display: none !important; }
}

/* Agrupamento VIRTUAL do menu (ver header.php): breakpoint proprio em 1600px para
   cobrir notebooks 15.6" reais, inclusive 1080p com escala 125% do Windows (~1536px
   de largura CSS). Abaixo de 1600 aparecem os grupos unidos (Contabil, Servicos);
   a partir de 1600 as categorias voltam separadas. */
@media (max-width: 1599.98px) {
    #pt-app #main-header .pt-cat-membro { display: none !important; } /* categoria separada some */
}
@media (min-width: 1600px) {
    #pt-app #main-header .pt-cat-virtual { display: none !important; } /* grupo unido some */
}
/* Enquanto agrupado e horizontal (navbar expandido, 992-1599px), aperta o
   espacamento dos links para caber sem cortar a direita.

   A fonte encolhe JUNTO com a tela, e nao num degrau so: sao 11 rotulos de
   categoria numa barra unica, entao a largura disponivel por rotulo cai
   continuamente conforme a viewport diminui. O termo do meio do clamp e a reta
   que liga os dois extremos da faixa: .95rem em 1600px e .78rem em 992px
   (0.45vw + 0.5rem passa exatamente por esses dois pontos). Os limites em rem
   acompanham o zoom do widget de acessibilidade.

   Vale so para o rotulo da categoria na barra. Os itens dentro do dropdown
   continuam em .95rem: la o painel tem largura propria e a fonte nao e o que
   aperta. */
@media (min-width: 992px) and (max-width: 1599.98px) {
    #pt-app #main-header .navbar-nav .nav-link {
        padding-left: .5rem;
        padding-right: .5rem;
        font-size: clamp(.78rem, 0.45vw + .5rem, .95rem);
    }
}

/* Barra de rolagem horizontal das tabelas: azul da marca (chama atenção) e
   fixada (sticky) ao rodapé da viewport enquanto a página rola, para continuar
   acessível em tabelas longas. A barra sincronizada (#dynamic-top-scrollbar) é
   criada pelo app.js logo após a tabela e é a ÚNICA barra visível: a barra
   nativa da DataTable (que aparecia uma segunda vez no fim da página) é ocultada
   logo abaixo, mas continua rolável — a sticky a controla via scrollLeft.
   Tudo escopado em #pt-app para não afetar o template Joomla.
   z-index 2: acima das celulas fixas da tabela (1) e ABAIXO do #main-header (z-3), para o
   menu aberto (dropdown) nunca ficar por baixo da barra. */
#pt-app #dynamic-top-scrollbar {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: rgba(255, 255, 255, .92);
    border-top: 1px solid rgba(0, 61, 105, .15);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

#pt-app #dynamic-top-scrollbar::-webkit-scrollbar {
    height: 14px;
}

#pt-app #dynamic-top-scrollbar::-webkit-scrollbar-track {
    background: rgba(0, 61, 105, .08);
    border-radius: 10px;
}

/* Azul mais claro que o primary: e o ponto medio exato entre o #003d69 da marca
   e o #82b9eb do submenu, entao continua dentro da paleta. Da 4,53:1 contra o
   branco, acima dos 3:1 que a WCAG 1.4.11 pede para componente de interface. O
   hover escurece um passo, para manter a resposta ao ponteiro. */
#pt-app #dynamic-top-scrollbar::-webkit-scrollbar-thumb {
    background: #417baa;
    border-radius: 10px;
}

#pt-app #dynamic-top-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #2e6896;
}

/* Firefox: mesma cor da barra sticky */
#pt-app #dynamic-top-scrollbar {
    scrollbar-color: #417baa rgba(0, 61, 105, .08);
}

/* Oculta a barra de rolagem NATIVA da tabela de dados (a "segunda" barra, no
   fim da página). A rolagem horizontal é feita pela barra sticky azul acima;
   o elemento continua rolável programaticamente. Restrito à DataTable para não
   afetar outras tabelas (modal, painel). */
#pt-app .dataTables_wrapper .table-responsive::-webkit-scrollbar {
    height: 0;
    width: 0;
}

#pt-app .dataTables_wrapper .table-responsive {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* =============================================================================
   MOBILE das telas de consulta: COLUNA DE ACOES (primeira coluna) fixa na
   horizontal, para o botao de detalhes nunca sair da tela enquanto o usuario desliza
   pelas demais colunas. So no mobile: no desktop a tabela costuma caber sem rolagem
   lateral e a coluna fixa so tiraria espaco.
   (O outro eixo - o CABECALHO fixo na vertical - vale em TODAS as larguras e fica
   fora deste media query, logo abaixo. Clone flutuante criado pelo app.js, classe
   .pt-thead-fixo; o porque do clone esta em docs/specs/mobile-consultas-tabela.md.)
   A sombra de separacao da coluna fixa entra por ::after, e nao por box-shadow:
   no Bootstrap 5.3 a listra (table-striped) e o hover sao pintados com
   "box-shadow: inset" na propria celula, e um box-shadow proprio apagaria a listra.
   ============================================================================= */
@media (max-width: 767.98px) {

    /* A celula de "nenhum registro" (colspan da largura toda) fica de fora: fixar
       uma celula que ja ocupa a tabela inteira nao tem efeito util. */
    #pt-app #dataTableBase>thead>tr>th:first-child,
    #pt-app #dataTableBase>tbody>tr>td:first-child:not(.dataTables_empty),
    #pt-app #dataTableBase>tfoot>tr>th:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
    }

    /* A sombra so entra quando ha deslocamento horizontal (classe pt-rolado-x, ligada
       pelo app.js): sem rolagem nao ha coluna escondida para indicar. */
    #pt-app .pt-rolado-x #dataTableBase>thead>tr>th:first-child::after,
    #pt-app .pt-rolado-x #dataTableBase>tbody>tr>td:first-child:not(.dataTables_empty)::after,
    #pt-app .pt-rolado-x #dataTableBase>tfoot>tr>th:first-child::after,
    #pt-app .pt-thead-fixo.pt-rolado-x thead>tr>th:first-child::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: -6px;
        width: 6px;
        pointer-events: none;
        background: linear-gradient(to right, rgba(0, 0, 0, .10), rgba(0, 0, 0, 0));
    }
}

/* Cabecalho flutuante da tabela, em QUALQUER largura. O app.js posiciona
   (top/left/width, ja descontando a navbar e o .consulta-header quando grudados) e
   liga a classe .is-visivel; aqui fica a aparencia e a mecanica de rolagem.
   z-index 2: abaixo do #main-header (z-3) e do backdrop do modal (1050), acima das
   celulas fixas da tabela (1). */
#pt-app .pt-thead-fixo {
    position: fixed;
    z-index: 2;
    display: none;
    overflow: hidden;
    background: var(--bs-body-bg, #fff);
    box-shadow: 0 .35rem .4rem -.35rem rgba(0, 0, 0, .18);
    /* A barra e irma do .table-responsive dentro de um .row, e o Bootstrap aplica o
       gutter a TODO filho direto de .row. Como o app.js ja copia o padding do
       .table-responsive para o viewport interno, sem zerar aqui o recuo entraria duas
       vezes e o cabecalho nasceria 12px a direita da tabela. */
    padding: 0;
}

#pt-app .pt-thead-fixo.is-visivel {
    display: block;
}

/* Mesma barra oculta do .table-responsive: quem rola e o dedo/a barra azul. */
#pt-app .pt-thead-fixo .pt-thead-fixo-rolagem {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#pt-app .pt-thead-fixo .pt-thead-fixo-rolagem::-webkit-scrollbar {
    height: 0;
    width: 0;
}

/* O clone herda as classes da tabela real (inclusive .dataTable, que traz as setas
   de ordenacao); a margem vem das classes mt-* da view e nao serve dentro da barra. */
#pt-app .pt-thead-fixo table {
    margin: 0 !important;
}

/* Mesma densidade de fonte da tabela de dados (a regra original casa por #id, que o
   clone nao tem - o id nao pode ser duplicado). */
#pt-app .pt-thead-fixo table>:not(caption)>*>* {
    font-size: 0.72em;
}

/* O CSS do DataTables poe box-sizing: content-box nos TH. O app.js copia a largura
   MEDIDA de cada coluna (getBoundingClientRect, que ja inclui o padding); em
   content-box o navegador somaria o padding de novo e cada coluna do clone ficaria
   ~29px mais larga que a real, deslocando o cabecalho um pouco mais a cada coluna.
   Em border-box a medida entra exatamente como foi lida. */
#pt-app .pt-thead-fixo thead>tr>th {
    box-sizing: border-box;
}

/* Cruzamento cabecalho x coluna de acoes: dentro da barra, a primeira coluna tambem
   fica fixa na horizontal, e por ser o elemento de cima na barra nao e coberta.
   SO no mobile, na mesma faixa em que a coluna do CORPO e fixa: no desktop a coluna
   do corpo rola, e prender so a do cabecalho desalinharia as duas. */
@media (max-width: 767.98px) {

    /* O .dataTable no seletor nao e enfeite: o CSS do DataTables poe
       "position: relative" nos TH ordenaveis por um seletor de mesma especificidade,
       e sem ele o sticky perdia a disputa e a coluna rolava junto. */
    #pt-app .pt-thead-fixo table.dataTable thead>tr>th:first-child,
    #pt-app .pt-thead-fixo thead>tr>th:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
    }
}

/* Menu principal - ajustes escopados em #main-header (não afetam navbars do
   template Joomla). Dropdowns mais altos; no desktop, puxados para junto do item
   e com acento azul claro no topo que some ao descer ~20%. Títulos sem quebra. */
#pt-app #main-header .navbar-nav .dropdown-menu {
    max-block-size: 650px;
    overflow-y: auto;
}

#pt-app #main-header .navbar-nav .nav-link {
    white-space: nowrap;
}

@media (min-width: 992px) {
    #pt-app #main-header .navbar-nav .dropdown-menu {
        position: absolute;
        margin-top: -5px;
        border-top: 1px solid rgba(130, 185, 235, .6);
        background-image: linear-gradient(to bottom, rgba(130, 185, 235, .16), rgba(130, 185, 235, 0) 20%);
    }
}

#pt-app .transition-all {
    transition: all 0.3s ease;
}

#pt-app .hover-shadow:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.05) !important;
}

/* ============================================================
   DASHBOARD - cards de consulta e de categoria (Painel > Configurações
   > Customização). Dois estilos: CLEAN (padrão, claro) e DEGRADÊ (fundo
   degradê sutil com a cor da categoria e texto de contraste). Nunca usar
   borda lateral nos cards. Cor por card via variáveis inline --dc/--dc2/--dc-txt.
   ============================================================ */
#pt-app .dash-card { border-radius: .5rem; }

/* CLEAN: preserva a aparência atual usando as classes semânticas dash-*. */
#pt-app .dash-clean .dash-ico { color: #495057; }
#pt-app .dash-clean .dash-title { color: #212529; }
#pt-app .dash-clean .dash-desc { color: #495057; }
#pt-app .dash-clean .dash-bl { color: #6c757d; }

/* DEGRADÊ: degradê sutil (cor -> ~12% mais forte), texto de contraste.

   Duas camadas, ambas verticais: mais claro em cima, mais escuro embaixo.
   1. Realce do topo na MESMA tonalidade do submenu (#82b9eb), que se dissolve
      ate os 65% da altura. E a tecnica que o dropdown ja usa.
   2. A cor da categoria (--dc) descendo para a versao ~12% mais escura (--dc2).
   Era 135deg (diagonal), que deixava o claro no canto superior ESQUERDO em vez
   de na borda de cima.

   Contraste: com a cor padrao (#003d69) o ponto mais claro fica em #1d5886, que
   da 7,5:1 com o texto branco, e o pe fica em 12,5:1. A escolha do texto
   (--dc-txt, por luminancia) segue como estava. */
#pt-app .dash-degrade {
    border: 0;
    background:
        linear-gradient(to bottom, rgba(130, 185, 235, .22), rgba(130, 185, 235, 0) 65%),
        linear-gradient(to bottom, var(--dc, #003d69), var(--dc2, #002a49));
    color: var(--dc-txt, #fff);
}
#pt-app .dash-degrade .dash-ico,
#pt-app .dash-degrade .dash-title { color: var(--dc-txt, #fff); }
#pt-app .dash-degrade .dash-desc { color: var(--dc-txt, #fff); opacity: .85; }
#pt-app .dash-degrade .dash-bl { color: var(--dc-txt, #fff); opacity: .72; }

/* Modo CARDS (drilldown): um card por categoria que abre os itens ao clicar. */
#pt-app .dash-cat { border-radius: .6rem; cursor: pointer; }
#pt-app .dash-cat-toggle { display: block; color: inherit; }
#pt-app .dash-cat-ico { font-size: 1.5rem; line-height: 1; }
#pt-app .dash-cat-title { font-size: 1.02rem; line-height: 1.15; }
#pt-app .dash-cat-count { opacity: .82; }
#pt-app .dash-cat-chevron { transition: transform .25s ease; opacity: .8; }
#pt-app .dash-cat-toggle:not(.collapsed) .dash-cat-chevron { transform: rotate(180deg); }

/* CLEAN (drilldown): card claro; a cor da categoria vive no ícone e na seta. */
#pt-app .dash-cat.dash-clean {
    background: #fff;
    border: 1px solid var(--bs-border-color, #dee2e6);
}
#pt-app .dash-cat.dash-clean .dash-cat-ico,
#pt-app .dash-cat.dash-clean .dash-cat-chevron { color: var(--dc, #003d69); }
#pt-app .dash-cat.dash-clean .dash-cat-title { color: #212529; }
#pt-app .dash-cat.dash-clean .dash-cat-count { color: #6c757d; }

/* Helper: permite text-truncate dentro de um flex item. */
#pt-app .min-w-0 { min-width: 0; }

/* Base minimal overrides */
#pt-app .card {
    border-color: #e9ecef !important;
}

/* Fundo dos cards: degrade leve na MESMA tonalidade do submenu (#82b9eb), mais
   claro em cima e um pouco mais escuro embaixo. Entra como background-image, e
   nao como background, para conviver com o bg-white/bg-light do Bootstrap: a cor
   de fundo continua sendo a do utilitario e o degrade so tinge por cima.

   Os cards do dashboard ficam de fora: .dash-degrade ja tem o proprio degrade na
   cor da categoria e .dash-clean e branco de proposito, com a cor no icone. Sem
   o :not, esta regra venceria as duas por vir depois no arquivo. */
#pt-app .card:not(.dash-degrade):not(.dash-clean) {
    background-image: linear-gradient(to bottom, rgba(130, 185, 235, .03), rgba(130, 185, 235, .15));
}

/* Fix DataTable Pagination Layout */
#pt-app .dataTables_wrapper .row {
    margin-bottom: 0.5rem;
}

/* Puxa a tabela para cima, fechando o vão deixado pela linha superior do DataTables
   (busca/exportação foram movidas para o cabeçalho #dtToolbar) */
#pt-app div.dataTables_wrapper {
    position: relative;
    margin-top: -25px;
}

#pt-app div.dt-buttons {
    display: inline-flex;
}

#pt-app .dataTables_filter input {
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
    background-color: #fff;
    color: #495057;
    margin-left: 0.5rem;
    min-width: 250px;
}

#pt-app .dataTables_length select {
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    background-color: #fff;
    color: #495057;
}

/* Modal details adjust */
.modal-title {
    text-transform: uppercase;
    max-width: 65ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

#pt-app #tabelaDetalhes th {
    white-space: nowrap;
    background-color: #f8f9fa !important;
    color: #6c757d;
}

/* DataTable Dropdown overrides - .dt-button-collection pode ser anexada ao <body>
   pelo DataTables (fora de #pt-app). Classe de plugin, sem colisão com o Joomla. */
.dt-button-collection .dropdown-menu {
    border: 1px solid #ced4da;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

#pt-app .table>:not(caption)>*>* {
    padding: 0.75rem 0.5rem;
    font-size: 0.875em;
    /* em (nao rem): escala com o tamanho de fonte base do portal (#pt-app) */
    white-space: nowrap !important;
}

/* Pagination - Solid Primary & Centered */
#pt-app div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    justify-content: center !important;
}

#pt-app div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item .page-link {
    background-color: var(--bs-primary);
    color: #fff;
    border: 1px solid var(--bs-primary);
    margin: 0 3px;
    border-radius: 4px;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

#pt-app div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item.active .page-link {
    background-color: #0a58ca;
    /* Darker primary for active */
    border-color: #0a58ca;
    font-weight: bold;
}

#pt-app div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item.disabled .page-link {
    background-color: rgba(var(--bs-primary-rgb), 0.5);
    /* Faded primary */
    border-color: transparent;
    color: rgba(255, 255, 255, 0.7);
    box-shadow: none;
}

#pt-app div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item:hover:not(.disabled) .page-link {
    background-color: #0b5ed7;
    /* Hover primary */
    border-color: #0a58ca;
    color: #fff;
}

/* Radar da Transparência */
#pt-app .btn-radar-wrapper {
    width: auto;
    padding: 0;
}

/* Base legal (fundamento jurídico) dos itens: nota discreta, menor que a descrição.
   Usada nos cards do dashboard e ao lado do título nas páginas de consulta. */
#pt-app .base-legal {
    font-size: 0.68rem;
    line-height: 1.25;
    opacity: 0.9;
}

#pt-app .btn-radar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-radius: 15px;
    width: 100%;
    border: 1px solid rgba(24, 119, 242, 0.12);
    padding: 6px 10px;
    text-decoration: none;
    color: #222;
    transition: background 0.2s, transform 0.2s;
    background-color: #fff;
}

#pt-app .btn-radar:hover {
    transform: translateY(-1px);
    background-color: #f8f9fa;
    color: #222;
}

#pt-app .logo-principal {
    width: 44px;
    height: 44px;
}

#pt-app .logo-atricon {
    height: 40px;
}

#pt-app .txt-radar {
    font-size: 0.85rem;
    font-weight: 600;
    color: #222;
    text-align: left;
    line-height: 1.15;
    flex: 1;
}

/* Botão Flutuante (Scroll To Top) */
#pt-app #scrollToTopBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    z-index: 1000;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

#pt-app #scrollToTopBtn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* ============================================================
   MODAL DE DETALHES - quebrar linha em vez de rolar na horizontal
   ============================================================ */
#pt-app #modalDetalhes .table-responsive {
    overflow-x: hidden;
}

#pt-app #tabelaDetalhes {
    table-layout: fixed;
    width: 100%;
}

#pt-app #tabelaDetalhes th {
    width: 32%;
}

#pt-app #tabelaDetalhes th,
#pt-app #tabelaDetalhes td {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

/* No modal, o valor quebra na largura e fica justificado */
#pt-app #tabelaDetalhes td {
    text-align: justify;
}

/* Células de dados da tabela: no máximo 5 linhas, justificadas; o excedente é
   suprimido (há o botão de detalhes para ver tudo). Aplica ao wrapper <div> que o
   app.js gera em cada célula de texto (colunas de moeda/ação não têm esse wrapper). */
#pt-app #dataTableBase tbody td>div {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
    text-align: justify;
}


/* ============================================================
   PADRONIZAÇÃO: dados exibidos sempre em MAIÚSCULAS (todas as fontes)
   ============================================================ */
#pt-app #dataTableBase tbody td,
#pt-app #tabelaDetalhes td {
    text-transform: uppercase;
}

#pt-app .min-w-0 {
    min-width: 0;
}

/* Breadcrumb na cor do sistema (fica abaixo do título nas telas de arquivos) */
#pt-app .breadcrumb-sistema a {
    color: var(--bs-primary);
    text-decoration: none;
}

#pt-app .breadcrumb-sistema a:hover {
    color: #002f51;
    text-decoration: underline;
}

#pt-app .breadcrumb-sistema .breadcrumb-item.active {
    color: #6c757d;
}

/* Coluna de ação (botão): largura do botão, sem quebra, à direita - todas as tabelas */
#pt-app #dataTableBase td.col-acao,
#pt-app #dataTableBase th.col-acao {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

/* Busca + exportação reposicionadas no cabeçalho da consulta (#dtToolbar) */
#pt-app #dtToolbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

#pt-app #dtToolbar .dataTables_filter,
#pt-app #dtToolbar .dataTables_filter label,
#pt-app #dtToolbar .dt-buttons {
    margin: 0;
}

/* Rótulo "Pesquisar" vira placeholder dentro do campo: input compacto, sem largura 100% nem quebra de linha */
#pt-app #dtToolbar .dataTables_filter input {
    width: 220px;
    max-width: 100%;
    margin: 0;
}

/* Cabeçalho da consulta (título/breadcrumb + busca/exportação/Voltar) fixo ao rolar.
   Substitui a margem do antigo .mb-3 por padding, para o fundo cobrir o conteúdo que
   passa por baixo. Em telas md+ fica sticky logo abaixo da navbar; o deslocamento do
   topo (--consulta-header-top, 130px como padrão) é ajustado pelo JS para a altura real
   da navbar - assim acompanha quando o cabeçalho é desativado. No mobile fica no fluxo. */
#pt-app .consulta-header {
    --consulta-header-top: 130px;
    /* deslocamento padrão do topo (altura da navbar) */
    background: var(--bs-light);
    margin-top: -20px;
    /* sobe 15px, aproximando da navbar */
    padding: .5rem 0 .9rem;
    transition: padding .2s ease, box-shadow .2s ease;
}

.anexos-grade.d-grid {
    min-width: 200px;
}

/* Rotulos dos anexos (Edital, Contrato, Aditivo, Anexo N...) num botao de ~95px, com
   o texto em MAIUSCULAS pela padronizacao das celulas de dados. Duas medidas:

   1. FOLGA - o recuo interno do botao cai de 5px para 3px e a margem do icone de 4px
      para 2px. Sao 6px que faltavam: "CONTRATO" pedia 98px e transbordava, assim como
      "CONVENIO". O ganho vale para todos os rotulos e nao muda o tamanho do botao.
   2. TRAVA - overflow escondido com reticencias. A largura do botao depende da largura
      da coluna Anexos, que varia por tela, entao um rotulo pode nao caber em algum
      caso; cortado com reticencia e melhor do que escrito para fora da area azul (era
      o que acontecia). Em licitacoes o title do botao mostra o nome do arquivo inteiro;
      nas demais bases ele e o titulo do registro. */
#pt-app .anexos-grade .btn {
    padding-left: 3px;
    padding-right: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Anexo UNICO ("Visualizar" ou "Baixar"): o botao ocupa duas das tres celulas na
   tabela, porque "VISUALIZAR" nao cabe em ~95px. No modal a celula e larga e o botao
   volta ao tamanho normal. */
#pt-app .anexos-unico > div {
    grid-column: span 2;
}

#pt-app #modalDetalhes .anexos-unico > div {
    grid-column: auto;
}

/* Utilitario .me-1 do Bootstrap e !important; precisa de !important para ceder. */
#pt-app .anexos-grade .btn > i {
    margin-right: 2px !important;
}

/* ============================================================
   ANEXOS COM TIPO DETECTADO (.anexos-tipada, hoje so licitacoes)
   ============================================================
   O botao leva o rotulo LONGO no DOM (span.anexo-longo) e o CURTO num data-curto. Na
   celula da tabela o CSS esconde o longo e escreve o curto por ::after; no modal Ver
   Detalhes faz o inverso. Assim o MESMO HTML serve os dois contextos, como ja era, sem
   segundo caminho de render no servidor nem no JS.
   A troca existe porque os dois lugares tem larguras incompativeis: na tabela a coluna
   Anexos tem ~200px e o botao ~95px, onde com as celulas em MAIUSCULAS nao cabe "TERMO DE
   REFERENCIA"; no modal (modal-xl) a mesma coluna tem ~720px, e os MESMOS 3 botoes por
   linha ficam com ~240px cada, onde cabe o rotulo longo com o qualificador.
   O curto fica em ATRIBUTO, e nao em texto, porque todo mundo que extrai texto da
   celula (strip_tags do MCP e da busca, exportacao CSV/Excel/PDF) leria os dois rotulos
   colados; pseudo-elemento nao entra nessa extracao.
   Ver docs/specs/anexos-licitacoes-tipo.md. */
#pt-app .anexos-tipada .btn > .anexo-longo {
    display: none;
}

#pt-app .anexos-tipada .btn::after {
    content: attr(data-curto);
}

#pt-app #modalDetalhes .anexos-tipada .btn > .anexo-longo {
    display: inline;
}

#pt-app #modalDetalhes .anexos-tipada .btn::after {
    content: none;
}

/* O modal mantem os MESMOS 3 botoes por linha da tabela (o grid-template-columns vem
   inline no elemento e nao e sobrescrito aqui). O que muda e o rotulo: no modal ele e o
   longo e alinhado a esquerda, mas continua sempre em uma unica linha, mesmo quando
   ultrapassa a largura do botao. .text-nowrap vem do Bootstrap, por isso o !important. */
#pt-app #modalDetalhes .anexos-tipada .btn {
    white-space: nowrap !important;
    text-align: left;
    overflow: visible;
    text-overflow: clip;
}

/* O modal mostra TODOS os anexos: as celulas que a tabela esconde (.anexos-oculto,
   d-none) aparecem, e a celula do "+N" sai - nao teria o que revelar, e clicar nela
   nao faria nada visivel. .d-none e !important, so vence com especificidade maior. */
#pt-app #modalDetalhes .anexos-tipada .anexos-oculto {
    display: block !important;
}

#pt-app #modalDetalhes .anexos-tipada .anexos-cel-toggle {
    display: none;
}

@media (min-width: 768px) {
    #pt-app .consulta-header {
        position: sticky;
        top: var(--consulta-header-top);
        z-index: 2;
    }

    #pt-app .consulta-header.is-stuck {
        padding-top: .25rem;
        padding-bottom: .4rem;
        box-shadow: 0 .5rem .5rem -.3rem rgba(0, 0, 0, .12);
    }
}

/* Abas do Diario Oficial (dentro do .consulta-header).

   SEMPRE na cor da marca, com ICONE E TEXTO BRANCOS em qualquer estado, inclusive a aba
   ATIVA (pedido do usuario: nada de icone azul). Icone branco exige fundo preenchido,
   entao a pill deixa de ser transparente quando inativa. A ativa fica um tom mais
   escura (o mesmo #002f51 do hover dos botoes do portal) e com halo.

   No MOBILE so a aba ATIVA mostra o texto (a pessoa precisa ver onde esta); as demais
   viram botao quadrado de icone, no mesmo padrao dos mini-cards do dashboard
   (.dash-exp-mini: 40px, raio 10px), para a linha ficar organizada em vez de quebrar em
   varias linhas de pills. O rotulo das compactadas continua no DOM (tecnica do
   .visually-hidden) e no title do link, entao o nome acessivel nao se perde. */
#pt-app .diario-abas .nav-link {
    background: var(--bs-primary);
    color: #fff;
}

#pt-app .diario-abas .nav-link i {
    color: #fff;
}

#pt-app .diario-abas .nav-link:hover,
#pt-app .diario-abas .nav-link:focus {
    background: #002f51;
    color: #fff;
}

#pt-app .diario-abas .nav-link.active {
    background: #002f51;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(0, 61, 105, .28);
}

@media (max-width: 767.98px) {
    #pt-app .diario-abas .nav-link:not(.active) {
        width: 40px;
        height: 40px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        font-size: 1.1rem;
    }

    #pt-app .diario-abas .nav-link:not(.active) i {
        margin: 0 !important;
    }

    /* Rotulo sai da vista, mas segue para leitor de tela (padrao .visually-hidden). */
    #pt-app .diario-abas .nav-link:not(.active) .diario-aba-txt {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* A ativa e a unica com texto; nao quebra linha. */
    #pt-app .diario-abas .nav-link.active {
        white-space: nowrap;
    }
}

/* Preferência: sem sublinhados nos links de conteúdo */
#pt-app .breadcrumb a,
#pt-app .dropdownTileConteudo a,
#pt-app .dashboard-item a,
#pt-app #dataTableBase a {
    text-decoration: none;
}
/* Overlay global de "gerando arquivo" durante a exportacao (CSV/Excel/PDF).
   Fixo, cobre a viewport, aparece so com a classe .show. Aparencia alinhada ao
   feedback de carregamento das tabelas. */
#pt-app #pt-export-loading {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .6);
    backdrop-filter: blur(1px);
}
#pt-app #pt-export-loading.show { display: flex; }
#pt-app #pt-export-loading .pt-export-box {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.5rem;
    background: #fff;
    border-radius: .6rem;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18);
}
#pt-app #pt-export-loading .pt-export-txt { font-weight: 600; color: #003d69; }