/*
 * Ajustes do portal sobre o Bootstrap 5.
 *
 * Medidas do tema BS3 do portal (assets/css/bootstrap.min.css, "Live LESS
 * Theme"): Roboto, texto de 12px, botões e campos compactos. Sem isso o BS5
 * usa 16px e o menu não cabe numa linha.
 */
:root {
    --bs-body-font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --bs-body-font-size: 12px;
    --bs-body-line-height: 1.42857143;
    --bs-body-color: #3e3f3a;
    /* Azul do portal (#337ab7, o do tema antigo) como primary; hover e
       clique nos tons escuros dele (#286090, #204d74). */
    --bs-primary: #337ab7;
    --bs-primary-rgb: 51, 122, 183;
    --bs-primary-text-emphasis: #143149;
    --bs-primary-bg-subtle: #d6e4f1;
    --bs-primary-border-subtle: #adcae2;
}

/* Container um pouco mais largo que o padrão do Bootstrap 5 */
@media (min-width: 576px) {
    .container, .container-sm { max-width: 560px; }
}
@media (min-width: 768px) {
    .container, .container-sm, .container-md { max-width: 760px; }
}
@media (min-width: 992px) {
    .container, .container-sm, .container-md, .container-lg { max-width: 1040px; }
}
@media (min-width: 1200px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl { max-width: 1240px; }
}
@media (min-width: 1400px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { max-width: 1440px; }
}

.btn-primary {
    --bs-btn-bg: #337ab7; --bs-btn-border-color: #337ab7;
    --bs-btn-hover-bg: #286090; --bs-btn-hover-border-color: #204d74;
    --bs-btn-active-bg: #204d74; --bs-btn-active-border-color: #1d4568;
    --bs-btn-disabled-bg: #337ab7; --bs-btn-disabled-border-color: #337ab7;
    --bs-btn-focus-shadow-rgb: 82, 142, 194;
}
/* Info e warning com texto branco (no BS5 é preto): botões e selos. */
.btn-info, .btn-warning {
    --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-color: #fff;
}
.btn-outline-info, .btn-outline-warning { --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; }
.badge.bg-info, .text-bg-info, .badge.bg-warning, .text-bg-warning { color: #fff !important; }
/* O assets/css/auditoria.css (CI3) põe borda branca em todo .btn-primary. */
.btn.btn-primary { border-color: var(--bs-btn-border-color) !important; }
.btn.btn-primary:hover { border-color: var(--bs-btn-hover-border-color) !important; }
.btn-outline-primary {
    --bs-btn-color: #337ab7; --bs-btn-border-color: #337ab7;
    --bs-btn-hover-bg: #337ab7; --bs-btn-hover-border-color: #337ab7;
    --bs-btn-active-bg: #337ab7; --bs-btn-active-border-color: #337ab7;
    --bs-btn-disabled-color: #337ab7; --bs-btn-disabled-border-color: #337ab7;
    --bs-btn-focus-shadow-rgb: 51, 122, 183;
}
/* Linha horizontal (ex.: abaixo dos logos no topo): bem clara. No BS5 é a
   cor do texto com 25% de opacidade. */
hr { color: #eef1f5; opacity: 1; border-top-color: #eef1f5; }

h1, .h1 { font-size: 31px; }
h2, .h2 { font-size: 25px; }
h3, .h3 { font-size: 21px; }
h4, .h4 { font-size: 15px; }
h5, .h5 { font-size: 12px; }
h6, .h6 { font-size: 11px; }

/*
 * Um tamanho só de botão no portal: o do "Boleto" da lista de pagamentos
 * (padrão do BS5, fonte de 14px). btn-sm e btn-lg ficam iguais a ele.
 */
.btn, .btn-sm, .btn-lg, .btn-group-sm > .btn, .btn-group-lg > .btn {
    --bs-btn-font-size: 14px;
    --bs-btn-padding-y: .375rem;
    --bs-btn-padding-x: .75rem;
    --bs-btn-border-radius: var(--bs-border-radius);
}
/* Com !important: o CSS antigo (assets/css/styles.css, temas dos clientes,
   CSS das views) não muda o tamanho. Referência: a rede credenciada.
   Exceção do usuário: uniaoadm no celular (view, também com !important). */
.btn, .btn.btn-sm, .btn.btn-lg, .btn-group-sm > .btn, .btn-group-lg > .btn {
    font-size: 14px !important;
    padding: .375rem .75rem !important;
    line-height: 1.5 !important;
}
/* O styles.css antigo levanta e sombreia todo .btn no hover. Link (Mudar senha) fica plano. */
.btn.btn-link, .btn.btn-link:hover, .btn.btn-link:focus, .btn.btn-link:active {
    box-shadow: none;
    transform: none;
}
/*
 * Campos, selects e o ícone do input-group com a mesma altura dos botões
 * (padrão do BS5, fonte 14px). O form-select mantém o espaço da seta.
 */
.form-control, .form-select, .input-group-text {
    font-size: 14px;
    padding-top: .375rem;
    padding-bottom: .375rem;
    line-height: 1.5;
}
.form-control, .input-group-text { padding-left: .75rem; padding-right: .75rem; }
.form-select { padding-left: .75rem; padding-right: 2.25rem; }

/* Somente leitura em cinza, como no BS3 (no BS5 só o disabled é cinza). */
.form-control[readonly],
.form-select[readonly],
input[readonly]:not(.form-control-plaintext):not([type="checkbox"]):not([type="radio"]),
textarea[readonly] {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
}
.form-control[readonly]:focus { box-shadow: none; border-color: var(--bs-border-color); }

.dropdown-menu { --bs-dropdown-font-size: 12px; --bs-dropdown-padding-y: 5px; }
.dropdown-item { font-size: 11px; line-height: 22px; padding-top: 0; padding-bottom: 0; }

/* Menu superior: a marca tinha 15px; os itens, o tamanho do texto. */
.navbar-modern .navbar-brand { font-size: 17px; }
.navbar-modern .nav-link { font-size: 14px; }
.navbar-modern .dropdown-item { font-size: 14px; line-height: 1.5; padding-top: .4rem; padding-bottom: .4rem; }
/* No BS5 o item clicado/ativo do submenu fica azul (primária): aqui, cinza. */
.navbar-modern .dropdown-menu {
    --bs-dropdown-link-hover-bg: var(--bs-secondary-bg);
    --bs-dropdown-link-active-bg: var(--bs-secondary-bg);
    --bs-dropdown-link-active-color: var(--bs-emphasis-color);
}
.navbar-modern .nav-link:focus { box-shadow: none; }
.navbar-modern .nav-link:focus-visible { box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .25); }

/*
 *
 * card-cor-*: o "panel-primary" etc. do BS3 tinha o cabeçalho colorido; o
 * conversor (tools/Bs3para5.php) troca por card + card-cor-*.
 */
.card-cor-primary { border-color: var(--bs-primary); }
.card-cor-primary > .card-header { background-color: var(--bs-primary); color: #fff; }
.card-cor-success { border-color: var(--bs-success); }
.card-cor-success > .card-header { background-color: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.card-cor-info { border-color: var(--bs-info); }
.card-cor-info > .card-header { background-color: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis); }
.card-cor-warning { border-color: var(--bs-warning); }
.card-cor-warning > .card-header { background-color: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.card-cor-danger { border-color: var(--bs-danger); }
.card-cor-danger > .card-header { background-color: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }

/* Cards empilhados com o espaço que os panels do BS3 tinham. */
.card + .card { margin-top: 1rem; }

/*
 * Formulário de login (acesso restrito). Mais espaçoso que o resto do
 * portal (12px): campos e botão no tamanho padrão do BS5, card cinza.
 */
.login-portal .card { border-color: var(--bs-border-color); border-radius: .5rem; }
.login-portal .card-header {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-emphasis-color);
    font-size: 14px;
    padding: .75rem 1rem;
}
.login-portal .form-label { font-size: 13px; font-weight: 500; margin-bottom: .35rem; }
.login-portal .input-group-text { background-color: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }
.login-portal .alert { font-size: 13px; }
.login-links { font-size: 14px; }
.login-links a { text-decoration: none; }
.login-links a:hover { text-decoration: underline; }

/*
 * Cabeçalho das telas internas (barra_area.php): breadcrumb em barra com o
 * Sair à direita, nas cores do tema antigo (fundo #f8f5f0, borda #dfd7ca).
 */
.barra-area {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
    background-color: #f8f5f0; border: 1px solid #dfd7ca; border-radius: .375rem;
    padding: .5rem .75rem; margin-bottom: 1.25rem;
}
.barra-area .breadcrumb {
    --bs-breadcrumb-divider-color: #98978b;
    --bs-breadcrumb-item-active-color: #98978b;
    font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em;
    /* o ícone (14px) é mais alto que o texto: centraliza na vertical */
    align-items: center; line-height: 1;
}
.barra-area .breadcrumb-item { display: flex; align-items: center; }
.barra-area .breadcrumb a { color: #98978b; text-decoration: none; display: inline-flex; align-items: center; }
.barra-area .breadcrumb a:hover { color: #3e3f3a; }
.barra-area .breadcrumb .bi { font-size: 14px; line-height: 1; vertical-align: 0; }
/* Abas (padrão do portal): inativa cinza claro com texto azul, ativa cinza
   mais escuro com texto escuro; espaço acima. Vale para .nav-tabs e .nav-pills. */
.nav-tabs, .nav-pills { gap: 4px; margin-top: 1rem; }
.nav-tabs .nav-link,
.nav-pills .nav-link {
    background-color: #f1f3f5;
    color: #2d6da3;
    font-size: 14px;
    padding: .5rem 1rem;
    border: 1px solid #dee2e6;
    border-radius: 6px;
}
/* nav-tabs com o mesmo visual das nav-pills (área da empresa): abas
   separadas, cantos arredondados, sem a linha de baixo do Bootstrap. */
.nav-tabs { border-bottom: 0; }
.nav-tabs .nav-link { margin-bottom: 0; }
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus,
.nav-pills .nav-link:hover, .nav-pills .nav-link:focus {
    background-color: #e9ecef;
    border-color: #ced4da;
    color: #24557f;
}
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
    background-color: #ced4da;
    border-color: #adb5bd;
    color: #212529;
    font-weight: 500;
}
.nav-link .bi { margin-right: 4px; }

/* Radios em pílulas separadas, cores do Bootstrap: <input type="radio"
   class="btn-check"> + <label class="btn btn-outline-primary">
   dentro de .grupo-pilulas (só a borda; marcada, preenchida). */
.grupo-pilulas { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Par de/até: o input date não encolhe no flex e estoura a coluna. */
.campo-periodo .form-control { min-width: 0; }
/* Pré-cadastro: o dependente clonado separa do titular com a mesma linha
   clara do hr, e com mais respiro entre os dois blocos. */
#cadastro .pessoa {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #eef1f5;
}
#cadastro .pessoa + .pessoa {
    margin-top: 3rem;
    padding-top: 2.5rem;
}
/* Checkbox em botão: quadrado antes do rótulo (<i class="bi bi-square caixa-off">
   + <i class="bi bi-check-square caixa-on">). Na cor do texto: azul desmarcado,
   branco marcado. */
.caixa-off, .caixa-on { margin-right: .45em; }
.btn-check + .btn .caixa-on,
.btn-check:checked + .btn .caixa-off { display: none; }
.btn-check:checked + .btn .caixa-on { display: inline-block; }
/* Bolinha de cor antes do rótulo (ex.: status da solicitação na auditoria). */
.ponto-status {
    display: inline-block; width: .55em; height: .55em; border-radius: 50%;
    margin-right: .45em; vertical-align: .08em;
}
/* Marcada, a bolinha fica branca (a cor vem inline no style). */
.btn-check:checked + .btn .ponto-status { background-color: #fff !important; }

/* Auditoria: as notificações ficam à direita da barra; a lista abre para a esquerda. */
.barra-area #mensagem-container #notificacoes { left: auto; right: 0; max-width: calc(100vw - 32px); }

/* Cartão do beneficiário logado (beneficiario_topo.php). Azul do portal: #2d6da3. */
.beneficiario-topo {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    padding: 1rem 1.25rem; margin-bottom: 1.25rem;
    background: linear-gradient(90deg, #f3f7fb 0%, #ffffff 60%);
    border: 1px solid #dbe5ef; border-left: 4px solid #2d6da3; border-radius: .5rem;
    box-shadow: 0 1px 2px rgba(16, 40, 70, .06);
}
.beneficiario-avatar {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 52px; height: 52px; border-radius: 50%;
    background: linear-gradient(135deg, #3b82c4 0%, #2d6da3 100%); color: #fff;
    font-size: 18px; font-weight: 600; letter-spacing: .03em;
    box-shadow: 0 2px 6px rgba(45, 109, 163, .3);
}
.beneficiario-avatar .bi { font-size: 24px; }
.beneficiario-dados { flex: 1 1 260px; min-width: 0; }
.beneficiario-area {
    font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
    color: #2d6da3; margin-bottom: 2px;
}
.beneficiario-nome { font-size: 17px; font-weight: 600; color: #1f2d3d; line-height: 1.3; }
.beneficiario-vinculo {
    display: inline-block; vertical-align: middle; margin-left: .5rem;
    padding: 2px 8px; border-radius: 999px;
    font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
    background: #e3eef8; color: #2d6da3;
}
.beneficiario-info {
    display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin-top: 4px;
    font-size: 12.5px; color: #5b6b7b;
}
.beneficiario-info strong { color: #3e3f3a; font-weight: 600; }
@media (max-width: 575.98px) {
    .beneficiario-topo .btn { width: 100%; }
}

/* Modal de geração de boleto (área do beneficiário). O fundo azul vem da .bg da view. */
.boleto-resumo { color: #fff; border-radius: .5rem; padding: 1rem 1.25rem; }
.boleto-resumo .rotulo { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; opacity: .8; }
.boleto-resumo .valor { font-size: 15px; font-weight: 600; }
#boleto #codigobar { margin: 1rem auto .5rem; }
#boleto #codigobar svg { max-width: 100%; height: auto; }
.boleto-carregando { min-height: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 13px; }
.boleto-linha { display: flex; gap: .5rem; align-items: center; justify-content: center; flex-wrap: wrap; }
.boleto-linha .linhadigitval { max-width: 520px; flex: 1 1 320px; }
.boleto-linha .btn { white-space: nowrap; }

/*
 * Tabelas: um padrão "clean" para o site todo (referência: pagamentos do
 * painel do beneficiário). Só divisórias horizontais, cabeçalho claro em
 * maiúsculas, destaque ao passar o mouse; listra suave nas .table-striped.
 */
.table {
    --bs-table-color: #3e3f3a;
    --bs-table-border-color: #e6ebf0;
    --bs-table-striped-bg: #f8fafc;
    --bs-table-hover-bg: #e9ecef;
    /* fonte padrão do portal (a mesma de botões e campos) */
    font-size: 14px;
    margin-bottom: 1rem;
}
/* Uma linha por célula em todas as tabelas (a tabela rola na horizontal).
   Para quebrar texto numa tabela específica: class="table table-wrap". */
.table:not(.table-wrap) > :not(caption) > * > * { white-space: nowrap; }
.table > :not(caption) > * > * {
    padding: .6rem .75rem;
    vertical-align: middle;
    border-bottom-color: var(--bs-table-border-color);
}
.table-sm > :not(caption) > * > * { padding: .4rem .6rem; }
.table > thead > tr > th,
.table > thead > tr > td {
    background-color: #fff;
    color: #4a5a6a;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
    border-bottom: 1px solid #d8e1ea;
}
/* Células numa linha só (a área em volta já tem rolagem horizontal). */
.table-nowrap > :not(caption) > * > * { white-space: nowrap; }

/* Rodapé que repete o cabeçalho (as tabelas do portal têm): mesmo visual. */
.table > tfoot > tr > th,
.table > tfoot > tr > td {
    background-color: #fff;
    color: #4a5a6a;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
    border-top: 1px solid #d8e1ea;
    border-bottom: 0;
}
table.dataTable tfoot th, table.dataTable tfoot td { border-top: 1px solid #d8e1ea !important; padding: .6rem .75rem; }
.table > tbody > tr:hover > * { --bs-table-bg-state: var(--bs-table-hover-bg); }
.table > tbody > tr:last-child > * { border-bottom-color: transparent; }

/* DataTables 1.10 (jquery.dataTables.css do portal antigo): tira bordas pretas e
   espaçamentos próprios e alinha busca, "mostrar N" e paginação ao portal. */
table.dataTable { border-collapse: collapse !important; margin-top: .5rem !important; margin-bottom: .5rem !important; }
table.dataTable thead th,
table.dataTable thead td { border-bottom: 1px solid #d8e1ea !important; padding: .6rem .75rem; }
table.dataTable tbody th,
table.dataTable tbody td { padding: .6rem .75rem; }
table.dataTable.no-footer { border-bottom: 1px solid #e6ebf0 !important; }
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc { background-position: center right .25rem; padding-right: 1.5rem; }
.dataTables_wrapper { font-size: 13px; color: #5b6b7b; }
/* dom "<'dt-topo'lfr><'table-responsive't><'dt-rodape'ip>": a rolagem
   horizontal fica só na tabela; controles em cima e embaixo, fixos. */
.dataTables_wrapper .dt-topo,
.dataTables_wrapper .dt-rodape {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
}
.dataTables_wrapper .dt-topo { margin-bottom: .5rem; }
.dataTables_wrapper .dt-rodape { margin-top: .5rem; }
.dataTables_wrapper .dt-topo .dataTables_filter { margin-left: auto; }
.dataTables_wrapper .dt-topo .dt-buttons { margin-bottom: 0; }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { float: none !important; padding-top: 0 !important; }
.dataTables_wrapper .table-responsive > table.dataTable { margin-top: 0 !important; margin-bottom: 0 !important; }
/* Botões dentro de tabelas: só o ícone, preto, sem fundo nem borda. Ao passar
   o mouse, os de cor diferente do primary mostram a cor deles. */
.table td .btn {
    --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-color: #212529;
    --bs-btn-hover-bg: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-hover-color: #212529;
    --bs-btn-active-bg: transparent; --bs-btn-active-border-color: transparent; --bs-btn-active-color: #212529;
    --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: transparent; --bs-btn-disabled-color: #212529;
    box-shadow: none;
}
/* ícones com cor própria (ex.: .white do CI3) seguem a cor do botão */
.table td .btn .white, .table td .btn .bi, .table td .btn [class*="glyphicon"] { color: inherit !important; }
.table td .btn-success, .table td .btn-outline-success { --bs-btn-hover-color: var(--bs-success); --bs-btn-active-color: var(--bs-success); }
.table td .btn-danger, .table td .btn-outline-danger { --bs-btn-hover-color: var(--bs-danger); --bs-btn-active-color: var(--bs-danger); }
.table td .btn-warning, .table td .btn-outline-warning { --bs-btn-hover-color: #e0a800; --bs-btn-active-color: #e0a800; }
.table td .btn-info, .table td .btn-outline-info { --bs-btn-hover-color: #0aa2c0; --bs-btn-active-color: #0aa2c0; }
.table td .btn-secondary, .table td .btn-outline-secondary { --bs-btn-hover-color: var(--bs-secondary); --bs-btn-active-color: var(--bs-secondary); }

/* Procedimentos em Auditoria: ícone já na cor do botão; hover mais escuro. */
#procTab table td .btn-primary,
#procTab table td .btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-hover-color: #1d4568;
    --bs-btn-active-color: #1d4568;
}
#procTab table td .btn-success,
#procTab table td .btn-outline-success {
    --bs-btn-color: var(--bs-success);
    --bs-btn-hover-color: #146c43;
    --bs-btn-active-color: #146c43;
}
#procTab table td .btn-danger,
#procTab table td .btn-outline-danger {
    --bs-btn-color: var(--bs-danger);
    --bs-btn-hover-color: #b02a37;
    --bs-btn-active-color: #b02a37;
}
#procTab table td .btn-warning,
#procTab table td .btn-outline-warning {
    --bs-btn-color: #e0a800;
    --bs-btn-hover-color: #b38600;
    --bs-btn-active-color: #b38600;
}
#procTab table td .btn-info,
#procTab table td .btn-outline-info {
    --bs-btn-color: #0aa2c0;
    --bs-btn-hover-color: #087990;
    --bs-btn-active-color: #087990;
}
#procTab table td .btn-secondary,
#procTab table td .btn-outline-secondary {
    --bs-btn-color: var(--bs-secondary);
    --bs-btn-hover-color: #565e64;
    --bs-btn-active-color: #565e64;
}

/* No Chrome do Windows 11 a barra de rolagem fica por cima do conteúdo: o
   espaço embaixo impede que a barra horizontal cubra a última linha. */
.table-responsive { padding-bottom: 12px; }
/* Botões da extensão Buttons (ex.: Imprimir) com className "btn ...": o
   buttons.dataTables.css desenha degradê e borda próprios; vale o do BS5. */
.dt-buttons { margin-bottom: .5rem; }
.dt-buttons .dt-button.btn {
    background-image: none; margin: 0 .25rem 0 0; line-height: 1.5;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x); font-size: var(--bs-btn-font-size);
    border-radius: var(--bs-btn-border-radius);
}
/* !important: o buttons.dataTables.css pinta fundo claro (e degradê) no
   hover/foco/clique, e o ícone branco sumia. */
div.dt-buttons .dt-button.btn-primary,
div.dt-buttons .dt-button.btn-primary:hover,
div.dt-buttons .dt-button.btn-primary:focus,
div.dt-buttons .dt-button.btn-primary:active,
div.dt-buttons .dt-button.btn-primary.active {
    background-image: none !important; color: #fff !important; box-shadow: none !important;
}
div.dt-buttons .dt-button.btn-primary { background-color: var(--bs-primary) !important; border: 1px solid var(--bs-primary) !important; }
div.dt-buttons .dt-button.btn-primary:hover,
div.dt-buttons .dt-button.btn-primary:focus,
div.dt-buttons .dt-button.btn-primary:active,
div.dt-buttons .dt-button.btn-primary.active { background-color: #2f6391 !important; border-color: #1d4568 !important; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius);
    padding: .375rem .75rem; font-size: 14px; margin-left: .35rem; background-color: #fff;
}
.dataTables_wrapper .dataTables_length select { padding-right: 1.75rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border: 1px solid transparent !important; border-radius: var(--bs-border-radius) !important;
    padding: .3rem .7rem !important; margin-left: 2px; color: #2d6da3 !important; background: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #eef4fa !important; border-color: #d8e1ea !important; color: #2d6da3 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    /* página atual: contorno azul e fundo branco */
    background: #fff !important; border-color: var(--bs-primary) !important; color: var(--bs-primary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: #adb5bd !important; background: none !important; border-color: transparent !important;
}

/* Paginação do Bootstrap (.pagination) no mesmo visual da do DataTables. */
.pagination { gap: 2px; }
.pagination .page-link {
    border: 1px solid transparent; border-radius: var(--bs-border-radius) !important;
    padding: .3rem .7rem; font-size: 14px; color: #2d6da3; background: none;
}
.pagination .page-link:hover { background: #eef4fa; border-color: #d8e1ea; color: #2d6da3; }
.pagination .page-link:focus { box-shadow: none; }
.pagination .page-item.active .page-link { background: #fff; border-color: var(--bs-primary); color: var(--bs-primary); }
.pagination .page-item.disabled .page-link { color: #adb5bd; background: none; border-color: transparent; }

/* glyphicon-spin do portal (ícone girando no "carregando"). */
.glyphicon-spin, .bi-spin { display: inline-block; animation: portal-girar 1s linear infinite; }
@keyframes portal-girar { to { transform: rotate(360deg); } }

/*
 * Modal BS5: título à esquerda, fechar à direita.
 * No CI3 o .close vinha antes do título; quando o HTML ainda está nessa
 * ordem, o order abaixo corrige sem tocar em cada view.
 */
.modal-header { display: flex; align-items: center; }
.modal-header > .btn-close:first-child,
.modal-header > button.close:first-child {
    order: 2;
    margin-left: auto;
}
.modal-header > .btn-close:first-child ~ .modal-title,
.modal-header > button.close:first-child ~ .modal-title {
    order: 1;
    flex: 1 1 auto;
    margin-right: .5rem;
}

/* Rede credenciada: filtros, resumo da busca e um card por prestador. */
/* Filtros sem borda: card só para agrupar, alinhado com o breadcrumb. */
.rede-filtros { border: 0; background: transparent; }
.rede-filtros .card-header { background: transparent; border: 0; font-weight: 600; padding: 0 0 .25rem; }
.rede-filtros .card-body { padding: .5rem 0; }
.rede-filtros .card-footer { background: transparent; border: 0; padding: .75rem 0 0; }
.rede-resumo {
    display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center;
    background: linear-gradient(90deg, #f3f7fb 0%, #ffffff 15%);
    border: 1px solid #dbe5ef; border-left: 4px solid #2d6da3;
    border-radius: .5rem; padding: .75rem 1rem; margin-bottom: 1rem;
}
.rede-resumo .rotulo { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #5b6b7b; margin-right: .25rem; }
.rede-resumo .badge { font-size: 13px; font-weight: 600; border: 1px solid #dbe5ef; }
.rede-card {
    margin-bottom: 1rem; border-color: #e3e8ee; box-shadow: 0 1px 3px rgba(16, 40, 70, .06);
    background: linear-gradient(90deg, #f3f7fb 0%, #ffffff 15%);
}
.rede-card p { margin-bottom: .35rem; }
.rede-card hr { margin: .75rem 0; }
.rede-nome { font-size: 17px; font-weight: 600; color: #1f2d3d; margin-bottom: .5rem; }
.rede-nome small { font-size: 13px; font-weight: 400; display: block; margin-top: .15rem; }
.rede-servico { font-size: 15px; }
.rede-local { padding: .5rem 0; border-top: 1px dashed #e3e8ee; }
.rede-local:first-of-type { border-top: 0; }
.rede-obs { color: #7a2e2e; margin-top: .75rem; }
.rede-atualizacao { color: #6c757d; font-size: 13px; margin-top: .75rem; }
.rede-selos { display: flex; gap: .5rem; flex-wrap: wrap; }
.rede-selo { height: 32px; width: auto; }
.rede-acoes { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; flex-shrink: 0; }
@media (max-width: 767.98px) {
    .rede-card .card-body { flex-direction: column; }
    .rede-acoes { flex-direction: row; flex-wrap: wrap; align-items: center; }
}
#planos .modal-title, #vinculados .modal-title, #mapModal .modal-title { font-size: 18px; font-weight: 600; }
.rede-urgencia { position: absolute; top: 0; right: calc(var(--bs-gutter-x) * .5); margin: 0; min-height: 0; font-size: 13px; color: #5b6b7b; }
.rede-urgencia .form-check-input:disabled ~ .form-check-label { opacity: .6; }

/*
 * bootstrap-datepicker (datepicker3.css) foi feito para BS3. No BS5 a classe
 * .dropdown-menu e o reboot de table/th quebram o calendário (fundo transparente,
 * dias sobrepostos, z-index). Restaura o painel flutuante.
 */
.datepicker.dropdown-menu,
.datepicker-dropdown {
    z-index: 3000 !important;
    float: left;
    min-width: 0;
    max-width: none;
    width: auto;
    padding: 4px;
    margin: 2px 0 0;
    list-style: none;
    background-color: #fff !important;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    color: #333;
    font-size: 13px;
    line-height: 1.42857143;
}
.datepicker table,
.datepicker table.table-condensed,
.datepicker table.table {
    width: 210px !important;
    max-width: none !important;
    margin: 0 !important;
    background-color: #fff !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    caption-side: top;
}
.datepicker table > :not(caption) > * > *,
.datepicker table tr td,
.datepicker table tr th {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 30px !important;
    padding: 1px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 4px;
    text-align: center !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    float: none !important;
    position: static !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: #333 !important;
    background-color: transparent !important;
    box-shadow: none !important;
}
.datepicker table tr th.datepicker-switch {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
}
.datepicker table tr td.day:hover,
.datepicker table tr td.day.focused {
    background: #eee !important;
    cursor: pointer;
}
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover {
    background-color: #0d6efd !important;
    color: #fff !important;
}
.datepicker table tr td.today {
    background-color: #ffdb99 !important;
    color: #000 !important;
}
.datepicker table tr td.old,
.datepicker table tr td.new {
    color: #999 !important;
}
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
    color: #999 !important;
    background: none !important;
    cursor: default;
}
.datepicker thead tr:first-child th,
.datepicker tfoot tr th {
    cursor: pointer;
}
.datepicker thead tr:first-child th:hover,
.datepicker tfoot tr th:hover {
    background: #eee !important;
}
.datepicker tfoot th.today,
.datepicker tfoot th.clear {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
}