/* ============================================================================
   DESIGN PADRAO DAS TELAS INTERNAS
   ----------------------------------------------------------------------------
   Extraido de app/index_func.php, que era a unica tela com esse acabamento
   (o CSS vivia inline la dentro). Virou arquivo proprio para as demais telas
   nao precisarem carregar uma copia do mesmo bloco: assim mexer no padrao e
   um arquivo, nao quinze.

   As cores NAO estao fixas aqui. Vem dos tokens --cfg-* que o app/menu.php
   publica no :root a partir de tab_dbemp (aba "Aparencia" em
   configuracoes.php) - o mesmo par de cores do gradiente do menu. Os fallback
   abaixo cobrem tela que por algum motivo nao inclua o menu.

   Como usar (ver index_func.php como referencia viva):

     <div class="cfg-page-header">
       <div class="cfg-ico"><i class="fas fa-users"></i></div>
       <div>
         <h3>Titulo da tela</h3>
         <small>Uma linha explicando o que se faz aqui</small>
       </div>
     </div>

     <button class="cfg-btn cfg-btn-primary">...</button>   acao principal
     <a class="cfg-btn cfg-btn-outline">...</a>             acoes secundarias
     <div class="input-group input-group-sm cfg-filter">    filtros do topo
     <table class="cfg-table">                              tabelas / DataTables
   ========================================================================= */

:root {
    --cfg-navy: #122b5d;
    --cfg-navy-2: #4072a3;
    --cfg-navy-rgb: 18, 43, 93;
    --cfg-info: #17a2b8;

    /* Cores de SIGNIFICADO, nao de tema. O azul acima acompanha o menu (aba
       "Aparencia" das configuracoes); estas nao, porque aqui a cor E a
       informacao: verde = criar/concluido, teal = coisa de cliente, ambar = em
       andamento, roxo = esperando alguem, vermelho = vencido. Se seguissem o
       tema, uma empresa com o menu verde perderia a distincao. */
    --cfg-verde: #1c7c55;
    --cfg-verde-2: #2fa76f;
    --cfg-teal: #0f7c8c;
    --cfg-teal-2: #17a2b8;
    --cfg-ambar: #b0740f;
    --cfg-ambar-2: #dda032;
    --cfg-roxo: #5b4bb8;
    --cfg-roxo-2: #8071d6;
    --cfg-vermelho: #b02a37;
}

/* ── Cabecalho da tela ───────────────────────────────────────────────────── */
.cfg-page-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}

.cfg-page-header .cfg-ico {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--cfg-navy), var(--cfg-navy-2));
    color: #fff;
    font-size: 19px;
    flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(var(--cfg-navy-rgb), .28);
}

.cfg-page-header h3 {
    margin: 0;
    font-weight: 700;
    color: #1f2d45;
}

.cfg-page-header small {
    color: #8a98ab;
    font-size: .8rem;
}

/* Linha do titulo com uma acao a direita (o par "Modo tabela / Modo kanban").
   O par ficava numa linha propria acima das abas de status, empurrando o
   titulo para baixo e competindo com as abas - duas fileiras de pilulas
   iguais, uma em cima da outra. Aqui ele divide a linha do titulo: a esquerda
   diz ONDE voce esta, a direita COMO voce esta vendo. */
.cfg-page-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cfg-page-bar .cfg-page-header {
    margin-bottom: 0;
}

/* O par de visualizacao: mesmas pilulas das abas, so que sem a margem de
   baixo (esta dentro de uma linha, nao antes de um bloco) e um pouco menor,
   para o titulo continuar sendo o elemento mais forte da linha. */
.cfg-tabs-modo {
    margin-bottom: 0;
    margin-left: auto;
}

.cfg-tabs-modo .cfg-tab {
    padding: 8px 14px;
    font-size: 12px;
}

@media (max-width: 575px) {
    .cfg-tabs-modo {
        margin-left: 0;
    }
}

/* ── Botoes ──────────────────────────────────────────────────────────────── */
.cfg-btn {
    display: inline-flex;
    align-items: center;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 11px;
    padding: 10px 18px;
    text-decoration: none !important;
    transition: all .2s ease;
    border: 1px solid transparent;
    cursor: pointer;
}

.cfg-btn-primary {
    background: linear-gradient(135deg, var(--cfg-navy), var(--cfg-navy-2));
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(var(--cfg-navy-rgb), .22);
}

.cfg-btn-primary:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(var(--cfg-navy-rgb), .28);
    color: #fff !important;
}

.cfg-btn-outline {
    background: #fff;
    color: #3a4a63 !important;
    border: 1px solid #dbe3ee;
    box-shadow: 0 2px 6px rgba(var(--cfg-navy-rgb), .05);
}

.cfg-btn-outline:hover {
    border-color: var(--cfg-info);
    color: var(--cfg-navy) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(var(--cfg-navy-rgb), .10);
}

/* Acao que CRIA alguma coisa (nova tarefa, novo registro). Era o mesmo azul do
   cabecalho da tabela, das abas e do menu - com tudo da mesma cor, nada se
   destacava. O verde tambem casa com o cabecalho do modal que o botao abre:
   a pessoa ve a mesma cor do clique ate o envio. */
.cfg-btn-success {
    background: linear-gradient(135deg, var(--cfg-verde), var(--cfg-verde-2));
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(28, 124, 85, .22);
}

.cfg-btn-success:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(28, 124, 85, .30);
    color: #fff !important;
}

/* Outline da acao voltada ao CLIENTE - mesma familia do modal teal. Fica
   outline de proposito: dois botoes cheios lado a lado brigariam entre si. */
.cfg-btn-outline.cfg-btn-teal {
    color: var(--cfg-teal) !important;
    border-color: #cfe6ea;
}

.cfg-btn-outline.cfg-btn-teal:hover {
    background: var(--cfg-teal);
    border-color: var(--cfg-teal);
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(15, 124, 140, .18);
}

/* Variantes de acao destrutiva / de atencao. Nao existiam no index_func.php,
   mas as telas deste lote tem botoes de excluir e de alerta que sem isso
   voltariam pro btn-danger/btn-warning do Bootstrap e quebrariam a linha. */
.cfg-btn-danger {
    background: #fff;
    color: #b02a37 !important;
    border: 1px solid #f1d0d4;
    box-shadow: 0 2px 6px rgba(176, 42, 55, .06);
}

.cfg-btn-danger:hover {
    background: #b02a37;
    color: #fff !important;
    border-color: #b02a37;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(176, 42, 55, .18);
}

.cfg-btn-warning {
    background: #fff;
    color: #8a6100 !important;
    border: 1px solid #f2e2b8;
    box-shadow: 0 2px 6px rgba(138, 97, 0, .06);
}

.cfg-btn-warning:hover {
    background: #ffc107;
    color: #3d2c00 !important;
    border-color: #ffc107;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(138, 97, 0, .18);
}

/* Botao so-icone: sem o padding lateral do texto, quadrado. */
.cfg-btn-icon {
    padding: 9px 11px;
    justify-content: center;
}

.cfg-btn-icon i {
    margin: 0 !important;
}

/* ── Abas de navegacao com contador ──────────────────────────────────────── */
/* Usado nas telas tar_* do Portal do Cliente e no e-doc. Antes eram cinco
   <a class="btn btn-info shadow col-md"> com o contador num badge posicionado
   por style inline (top:-5px;right:-5px), que escapava do botao e cobria o
   vizinho quando o numero passava de dois digitos. */
.cfg-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.cfg-tab {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 16px;
    border-radius: 11px;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none !important;
    background: #fff;
    color: #45536b !important;
    border: 1px solid #dbe3ee;
    box-shadow: 0 2px 6px rgba(var(--cfg-navy-rgb), .05);
    transition: all .18s ease;
}

.cfg-tab:hover {
    border-color: var(--cfg-tab-cor, var(--cfg-info));
    color: var(--cfg-navy) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(var(--cfg-navy-rgb), .10);
}

/* COR POR ABA.

   As seis abas de tarefa eram seis retangulos iguais: so o texto dizia qual
   era qual, e a aba aberta era a unica com cor. Quem escreve a aba passa
   --cfg-tab-cor/--cfg-tab-cor-2 no style do proprio <a> (ver
   app/tasks/_abas_tarefas.php) e a aba ganha icone colorido, hover na cor e o
   degrade da cor quando ativa.

   E opcional de proposito: as abas do portal do cliente e do e-doc nao passam
   nada e continuam exatamente como estavam, no azul do tema. */
.cfg-tab i {
    color: var(--cfg-tab-cor, inherit);
    font-size: 13px;
}

.cfg-tab.ativo i,
.cfg-tab.active i {
    color: #fff;
}

/* .ativo e .active fazem a mesma coisa de proposito.

   O .ativo e escrito pelo PHP da tela, que sabe qual aba esta aberta. Ja quando
   as abas sao do Bootstrap (data-toggle="tab"), quem marca a aba aberta e o
   plugin - e ele usa .active, nome que nao da para escolher. Sem esta linha, uma
   tela de abas do Bootstrap ficava com as quatro abas iguais, sem nenhuma
   destacada. (O configuracoes.php ja escrevia .active e resolvia com uma copia
   destas regras no <style> dele.) */
.cfg-tab.ativo,
.cfg-tab.active {
    background: linear-gradient(135deg,
            var(--cfg-tab-cor, var(--cfg-navy)),
            var(--cfg-tab-cor-2, var(--cfg-navy-2)));
    color: #fff !important;
    border-color: transparent;
    box-shadow: 0 8px 18px rgba(var(--cfg-navy-rgb), .22);
}

/* Contador dentro da aba: parte do fluxo, entao cresce com o numero em vez de
   vazar por cima do botao ao lado. */
.cfg-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    background: #eef2f7;
    color: var(--cfg-tab-cor, var(--cfg-navy));
}

.cfg-tab.ativo .cfg-tab-count,
.cfg-tab.active .cfg-tab-count {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* ── Filtros do topo (input-group) ───────────────────────────────────────── */
.cfg-filter .input-group-text {
    background: #eef2f7;
    border: 1px solid #dbe3ee;
    border-right: none;
    color: var(--cfg-navy);
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 9px 0 0 9px;
}

.cfg-filter .custom-select,
.cfg-filter .form-control {
    border: 1px solid #dbe3ee;
    border-left: none;
    border-radius: 0 9px 9px 0;
    font-size: 12.5px;
    color: #45536b;
    height: calc(1.8em + .75rem + 2px);
}

.cfg-filter .custom-select:focus,
.cfg-filter .form-control:focus {
    border-color: var(--cfg-info);
    box-shadow: none;
}

.cfg-filter:focus-within .input-group-text,
.cfg-filter:focus-within .custom-select,
.cfg-filter:focus-within .form-control {
    border-color: var(--cfg-info);
}

/* Select2 dentro de um filtro: o plugin monta o proprio container e ignorava
   as bordas acima, ficando com o canto quadrado ao lado do label. */
.cfg-filter .select2-container--bootstrap4 .select2-selection {
    border: 1px solid #dbe3ee;
    border-left: none;
    border-radius: 0 9px 9px 0;
    font-size: 12.5px;
}

/* ── Card / caixa de conteudo ────────────────────────────────────────────── */
.cfg-card {
    background: #fff;
    border: 1px solid #e7edf5;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 4px 16px rgba(var(--cfg-navy-rgb), .05);
    margin-bottom: 18px;
}

.cfg-card-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--cfg-navy);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 12px;
}

/* ── Tabelas ─────────────────────────────────────────────────────────────── */
/* No index_func.php isso estava amarrado ao id #tableAtivos. Virou classe
   .cfg-table para servir a qualquer tabela; o seletor por id continua valendo
   la porque a classe foi adicionada na tag <table>. */
/* Cabecalho em cor CHAPADA, sem degrade.
   Era um linear-gradient(135deg, --cfg-navy, --cfg-navy-2) igual ao do menu.
   Continua pintado na LINHA e nao em cada <th>: com o fundo em cada celula,
   a borda entre colunas aparece como emenda quando o navegador arredonda a
   largura, e o cabecalho de tabela com scroll horizontal (que e o caso das
   telas largas) fica manchado. Na linha e uma faixa unica de ponta a ponta.
   As celulas precisam ficar transparentes: fundo de celula pinta por cima do
   fundo da linha. */
.cfg-table thead tr {
    background: var(--cfg-navy);
}

.cfg-table thead,
.cfg-table thead.bg-info,
.cfg-table thead th,
.cfg-table thead.bg-info th {
    background: transparent !important;
    background-color: transparent !important;
    color: #fff !important;
    text-transform: uppercase;
    letter-spacing: .3px;
    font-size: 10.5px;
    border: none !important;
    padding: 12px 8px;
    vertical-align: middle;
}

.cfg-table tbody tr:hover {
    background-color: #eef4fb !important;
}

.cfg-table tbody td {
    vertical-align: middle;
    font-size: 12.5px;
}

/* ── DataTables (busca, paginacao) ───────────────────────────────────────── */
.cfg-table-wrapper .dataTables_filter input,
.cfg-table-wrapper .dataTables_length select {
    border: 1px solid #dbe3ee;
    border-radius: 9px;
    padding: 6px 12px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.cfg-table-wrapper .dataTables_filter input:focus,
.cfg-table-wrapper .dataTables_length select:focus {
    border-color: var(--cfg-info);
    box-shadow: 0 0 0 3px rgba(23, 162, 184, .12);
}

.cfg-table-wrapper .dataTables_paginate .paginate_button,
.cfg-table-wrapper .dataTables_paginate .page-link {
    border-radius: 8px !important;
    margin: 0 2px;
    padding: 5px 11px !important;
    border: 1px solid #e4e9f1 !important;
    color: #45536b !important;
    background: #fff !important;
}

.cfg-table-wrapper .dataTables_paginate .paginate_button:hover,
.cfg-table-wrapper .dataTables_paginate .page-link:hover {
    background: #eef4fb !important;
    border-color: #d4e2f2 !important;
    color: var(--cfg-navy) !important;
}

.cfg-table-wrapper .dataTables_paginate .paginate_button.current,
.cfg-table-wrapper .dataTables_paginate .page-item.active .page-link {
    background: linear-gradient(135deg, var(--cfg-navy), var(--cfg-navy-2)) !important;
    border-color: transparent !important;
    color: #fff !important;
}

/* Botoes de exportacao (PDF / Excel) do DataTables Buttons.
   Cada tela passava className:'btn-danger' e className:'btn-success' na
   configuracao, entao os dois saiam com o vermelho e o verde cheios do
   Bootstrap - os unicos blocos de cor solida da tela, brigando com o cabecalho
   da tabela. Aqui eles ficam com o mesmo acabamento dos .cfg-btn: fundo branco,
   borda fina e a cor so na letra e no hover. A regra e por posicao (.dt-buttons)
   e nao pela className, para nao ter de mexer no JS de cada tela. */
.cfg-table-wrapper .dt-buttons {
    margin-bottom: 10px;
}

.cfg-table-wrapper .dt-buttons .btn,
.cfg-table-wrapper .dt-buttons .dt-button {
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 11px;
    padding: 7px 16px;
    margin-right: 6px;
    background: #fff !important;
    background-image: none !important;
    border: 1px solid #dbe3ee !important;
    color: #3a4a63 !important;
    box-shadow: 0 2px 6px rgba(var(--cfg-navy-rgb), .05);
    transition: all .2s ease;
}

.cfg-table-wrapper .dt-buttons .btn:hover,
.cfg-table-wrapper .dt-buttons .dt-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(var(--cfg-navy-rgb), .10);
}

.cfg-table-wrapper .dt-buttons .btn-danger {
    color: #b02a37 !important;
    border-color: #f1d0d4 !important;
}

.cfg-table-wrapper .dt-buttons .btn-danger:hover {
    background: #b02a37 !important;
    border-color: #b02a37 !important;
    color: #fff !important;
}

.cfg-table-wrapper .dt-buttons .btn-success {
    color: #1c7c55 !important;
    border-color: #cfe9dc !important;
}

.cfg-table-wrapper .dt-buttons .btn-success:hover {
    background: #1c7c55 !important;
    border-color: #1c7c55 !important;
    color: #fff !important;
}

/* ── Barra de filtros ────────────────────────────────────────────────────── */
/* As telas do portal montavam os filtros com col-md-* soltos que somavam mais de
   12 (2+3+3+2+2+2 no e-doc), entao o ultimo campo caia sozinho numa segunda
   linha e o botao "Filtrar" ficava boiando. Aqui e um grid proprio: cada campo
   tem largura minima e cresce junto, o botao fica sempre no fim da linha e
   alinhado pela base dos campos. */
.cfg-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
}

/* Nem toda tela monta os filtros com .cfg-campo: várias reaproveitam o grid do
   Bootstrap (.row + .form-group.col-md-*) dentro do cartão. Aí o flex próprio
   do .cfg-filtros brigava com o .row e o resultado eram campos de alturas
   diferentes e rótulos de dois tamanhos na mesma linha - uns escritos com
   font-size:12px inline, outros no tamanho padrão do navegador. As regras
   abaixo normalizam o formulário INDEPENDENTE de como ele foi montado. */
.cfg-filtros.row {
    align-items: flex-end;
    gap: 0;
    padding-top: 18px;
    padding-bottom: 18px;
}

.cfg-filtros label {
    display: block;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-transform: none;
    color: #45536b;
    margin-bottom: 5px;
    line-height: 1.3;
}

.cfg-filtros .form-control,
.cfg-filtros .form-control-sm,
.cfg-filtros .custom-select,
.cfg-filtros select,
.cfg-filtros input[type="date"],
.cfg-filtros input[type="text"],
.cfg-filtros .select2-container--bootstrap4 .select2-selection--single {
    height: 38px !important;
    border: 1px solid #dbe3ee;
    border-radius: 9px;
    font-size: 12.5px;
    color: #45536b;
    padding: 6px 10px;
}

.cfg-filtros .form-control:focus,
.cfg-filtros .custom-select:focus,
.cfg-filtros select:focus {
    border-color: var(--cfg-info);
    box-shadow: 0 0 0 3px rgba(23, 162, 184, .12);
}

/* O select2 monta a sua própria caixa; sem isto ela fica mais baixa que os
   campos comuns ao lado. */
.cfg-filtros .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    line-height: 24px;
    padding-left: 0;
}

.cfg-filtros .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
    top: 0 !important;
    height: 100% !important;
    right: 6px;
}

/* O botão de filtrar ficava com margem de topo fixa (mt-4) para "descer" até a
   linha dos campos - o que só acertava quando havia rótulo acima dele. */
.cfg-filtros .cfg-btn {
    height: 38px;
    margin-top: 0 !important;
    align-self: flex-end;
    margin-bottom: 1rem;
}

/* Campo que ocupa a linha inteira não precisa de margem embaixo quando é o
   último da última linha. */
.cfg-filtros .form-group {
    margin-bottom: 1rem;
}

.cfg-campo {
    display: flex;
    flex-direction: column;
    flex: 1 1 190px;
    min-width: 0;
}

/* Campo que precisa de mais espaco (empresas, tipo de documento). */
.cfg-campo-largo {
    flex: 2 1 280px;
}

.cfg-campo label {
    font-size: 11.5px;
    font-weight: 700;
    color: #45536b;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cfg-campo .form-control,
.cfg-campo .custom-select {
    border: 1px solid #dbe3ee;
    border-radius: 9px;
    font-size: 12.5px;
    color: #45536b;
    height: 36px;
    padding: 4px 10px;
}

.cfg-campo .form-control:focus,
.cfg-campo .custom-select:focus {
    border-color: var(--cfg-info);
    box-shadow: 0 0 0 3px rgba(23, 162, 184, .12);
}

/* O botao acompanha a altura dos campos em vez de usar mt-4 / height inline. */
.cfg-filtros .cfg-btn {
    height: 36px;
    padding: 0 18px;
    flex: 0 0 auto;
}

/* ── Select2 dentro da barra de filtros ──────────────────────────────────── */
/* O problema era o campo "Empresas": razao social longa estourava a caixa, o
   chip era cortado no meio da palavra e o container crescia pra tres linhas,
   desalinhando a barra inteira. Agora o chip tem largura maxima com reticencias
   (o select2 ja poe o nome completo no title, entao o hover mostra tudo) e o
   container para de crescer depois de duas linhas, passando a rolar. */
.cfg-campo .select2-container {
    width: 100% !important;
}

.cfg-campo .select2-container--bootstrap4 .select2-selection {
    border: 1px solid #dbe3ee;
    border-radius: 9px;
    font-size: 12.5px;
    min-height: 36px;
}

.cfg-campo .select2-container--bootstrap4.select2-container--focus .select2-selection,
.cfg-campo .select2-container--bootstrap4.select2-container--open .select2-selection {
    border-color: var(--cfg-info);
    box-shadow: 0 0 0 3px rgba(23, 162, 184, .12);
}

.cfg-campo .select2-container--bootstrap4 .select2-selection--single {
    height: 36px;
    display: flex;
    align-items: center;
}

.cfg-campo .select2-container--bootstrap4 .select2-selection--multiple {
    max-height: 78px;
    overflow-y: auto;
    padding: 2px 4px;
}

.cfg-campo .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered {
    display: block;
    padding: 0;
}

/* O chip: reticencias em vez de corte seco. Fica em block (nao flex) de
   proposito - o "x" do select2 e um <span> irmao do texto puro, e num container
   flex o texto vira item anonimo e perde o text-overflow. */
.cfg-campo .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
    display: block;
    max-width: 100%;
    margin: 3px 0 0;
    padding: 3px 9px;
    background: #eef4fb;
    border: 1px solid #d4e2f2;
    border-radius: 7px;
    color: var(--cfg-navy);
    font-size: 11.5px;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cfg-campo .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
    color: #7b8aa0;
    margin-right: 6px;
    font-weight: 700;
}

.cfg-campo .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #b02a37;
}

/* Lista suspensa: nome longo quebra em vez de vazar, e o item sob o cursor tem
   nome e CNPJ legiveis (o CNPJ vai como <small class="text-muted">, que sem
   isso ficava cinza-sobre-azul). */
.select2-container--bootstrap4 .select2-results__option {
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 12.5px;
    padding: 7px 12px;
}

.select2-container--bootstrap4 .select2-results__option--highlighted,
.select2-container--bootstrap4 .select2-results__option--highlighted small,
.select2-container--bootstrap4 .select2-results__option--highlighted .text-muted {
    background: linear-gradient(135deg, var(--cfg-navy), var(--cfg-navy-2)) !important;
    color: #fff !important;
}

/* A caixa suspensa em si: o select2 vinha com canto reto e borda cinza de
   navegador, destoando dos campos ao redor. */
.select2-container--bootstrap4 .select2-dropdown {
    border: 1px solid #dbe3ee;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(var(--cfg-navy-rgb), .16);
    overflow: hidden;
}

.select2-container--bootstrap4 .select2-search--dropdown {
    padding: 8px;
}

.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field {
    border: 1px solid #dbe3ee;
    border-radius: 8px;
    font-size: 12.5px;
    padding: 6px 10px;
    color: #45536b;
}

.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--cfg-info);
    box-shadow: 0 0 0 3px rgba(23, 162, 184, .12);
    outline: none;
}

/* Quem rola e SO a lista de fora. Sem o ">" esta altura caia tambem nos <ul>
   de dentro de cada optgroup (Contabil, Fiscal, Processos...): a lista do grupo
   ficava presa em 240px e o que nao cabia vazava por cima do grupo seguinte, o
   que deixava os nomes dos tipos de arquivo embaralhados uns sobre os outros no
   e-doc. */
.select2-container--bootstrap4 .select2-results > .select2-results__options {
    max-height: 240px;
    overflow-y: auto;
}

.select2-container--bootstrap4 .select2-results__options--nested {
    max-height: none;
    overflow: visible;
}

/* Cabecalho de grupo: separa um departamento do outro, em vez de o nome do
   grupo se misturar com os tipos de arquivo logo acima. */
.select2-container--bootstrap4 .select2-results__group {
    display: block;
    padding: 8px 12px 4px;
    margin-top: 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #7a8699;
    border-top: 1px solid #eef1f6;
    background: none;
    cursor: default;
}

.select2-container--bootstrap4 .select2-results__option[role=group]:first-child .select2-results__group {
    margin-top: 0;
    border-top: none;
}

/* Os itens do grupo ficam recuados, para ler como filhos do cabecalho. */
.select2-container--bootstrap4 .select2-results__option[role=group] .select2-results__options--nested .select2-results__option {
    padding-left: 24px;
}

/* Item ja escolhido: fica marcado, mas sem competir com o item sob o cursor. */
.select2-container--bootstrap4 .select2-results__option[aria-selected="true"] {
    background: #eef4fb;
    color: var(--cfg-navy);
    font-weight: 600;
}

.select2-container--bootstrap4 .select2-results__message {
    font-size: 12.5px;
    color: #7a8699;
}

/* ── Etiquetas de status nas tabelas ─────────────────────────────────────── */
/* Substitui os badge-primary/success/dark do Bootstrap, que destoavam do resto
   das telas e usavam font-size inline em cada ocorrencia. */
.cfg-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .2px;
    white-space: nowrap;
}

.cfg-status-novo {
    background: #e7f0fb;
    color: #1c5aa8;
}

.cfg-status-ok {
    background: #e6f7ef;
    color: #1c7c55;
}

.cfg-status-espera {
    background: #fff5e0;
    color: #8a6100;
}

/* "Em aberto" e "Em andamento" saiam as duas com a etiqueta azul (-novo), e
   "Vencida" saia igual a "Cancelada": olhando a coluna Status dava para
   separar dois grupos, nao os seis estados. Cada um tem o seu tom agora, e o
   tom bate com o da aba correspondente.

   O -espera acima continua como estava: ele e o "pendente" ambar de
   pendencias.php, checklist e contratos, que nao tem nada a ver com tarefa
   aguardando resposta - por isso o -aguardando e uma classe nova, e nao uma
   troca de cor naquela. */
.cfg-status-aguardando {
    background: #f0edfd;
    color: var(--cfg-roxo);
}

.cfg-status-andamento {
    background: #fdf3e0;
    color: var(--cfg-ambar);
}

.cfg-status-vencido {
    background: #fdeaec;
    color: var(--cfg-vermelho);
    box-shadow: inset 0 0 0 1px rgba(176, 42, 55, .22);
}

.cfg-status-arquivado {
    background: #eef2f7;
    color: #5b6779;
}

.cfg-status-cancelado {
    background: #fdeaec;
    color: #b02a37;
}

/* Estado vazio de tabela/listagem. */
.cfg-vazio {
    padding: 34px 16px;
    text-align: center;
    color: #8a98ab;
    font-size: 13px;
}

.cfg-vazio i {
    display: block;
    font-size: 26px;
    margin-bottom: 10px;
    opacity: .45;
}

@media (max-width: 767px) {
    .cfg-campo {
        flex: 1 1 100%;
    }

    .cfg-filtros .cfg-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ── Modais ──────────────────────────────────────────────────────────────── */
/* Cada tela vinha reescrevendo esse mesmo bloco no <style> dela. */
.cfg-modal .modal-content {
    border: none;
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(var(--cfg-navy-rgb), .22);
}

.cfg-modal .modal-header {
    border-bottom: 1px solid #eef2f7;
    padding: 16px 20px;
}

.cfg-modal .modal-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--cfg-navy);
}

.cfg-modal .modal-body {
    padding: 18px 20px;
}

.cfg-modal .modal-footer {
    border-top: 1px solid #eef2f7;
    padding: 12px 20px;
}

.cfg-modal label {
    font-size: 11.5px;
    font-weight: 700;
    color: #45536b;
    margin-bottom: 3px;
}

.cfg-modal .form-control,
.cfg-modal .custom-select,
.cfg-modal .select2-container--bootstrap4 .select2-selection {
    border: 1px solid #dbe3ee;
    border-radius: 9px;
    font-size: 12.5px;
    color: #45536b;
}

.cfg-modal .form-control:focus,
.cfg-modal .custom-select:focus {
    border-color: var(--cfg-info);
    box-shadow: 0 0 0 3px rgba(23, 162, 184, .12);
}

/* Faixa de aviso/explicacao dentro de um cartao ou modal. */
.cfg-aviso {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #eef4fb;
    border: 1px solid #d9e6f5;
    border-radius: 10px;
    padding: 9px 13px;
    font-size: 11.5px;
    color: #45536b;
    margin-bottom: 14px;
}

.cfg-aviso i {
    color: var(--cfg-info);
}

/* ── Cortina de carregamento ─────────────────────────────────────────────── */
/* O mesmo bloco estava copiado no <style> de dezenas de telas.

   Começa ESCONDIDA: quem a liga é o js/cfg-carregando.js, no momento em que a
   pessoa sai da página (envia um filtro, clica num link). Antes ela vinha
   visível dentro da própria resposta e era escondida no DOMContentLoaded - ou
   seja, aparecia depois da espera, não durante, e ainda deixava uma faixa
   branca no topo enquanto o resto da tela não tinha chegado. */
.load {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, .92);
    z-index: 3000;
}

.load.ativo {
    display: flex;
}

/* ── Formulario dentro de um cartao ──────────────────────────────────────── */
.cfg-form label {
    font-size: 11.5px;
    font-weight: 700;
    color: #45536b;
    margin-bottom: 3px;
}

.cfg-form .form-control,
.cfg-form .custom-select,
.cfg-form .select2-container--bootstrap4 .select2-selection {
    border: 1px solid #dbe3ee;
    border-radius: 9px;
    font-size: 12.5px;
    color: #45536b;
    min-height: calc(1.5em + .6rem + 2px);
}

.cfg-form .form-control:focus,
.cfg-form .custom-select:focus,
.cfg-form .select2-container--bootstrap4.select2-container--focus .select2-selection {
    border-color: var(--cfg-info);
    box-shadow: 0 0 0 3px rgba(23, 162, 184, .10);
}

/* ── Largura da area de conteudo ─────────────────────────────────────────── */
/* Saiu do .tar-wrap de app/tasks/status.php, que era a unica tela com esta
   medida (o CSS vivia inline la). As telas que usavam "container p-3 col-12"
   iam de borda a borda do monitor: num monitor largo o breadcrumb encostava na
   esquerda e a tabela esticava ate a direita, sem respiro nenhum.

   Vai dentro de um .container-fluid:

     <div class="container-fluid">
       <div class="cfg-wrap mb-5"> ... </div>
     </div>

   O .tar-wrap continua existindo em tasks/status.php e nao foi mexido - as
   duas classes tem os mesmos valores, entao aquela tela pode passar a usar
   esta quando for conveniente. */
.cfg-wrap {
    max-width: 1560px;
    margin: 0 auto;
    padding: 14px 26px 30px;
}

@media (max-width: 575px) {
    .cfg-wrap {
        padding: 10px 12px 24px;
    }
}

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */
/* A faixa "Home / Página" era uma linha de texto cinza com um traço embaixo
   atravessando a tela inteira, e o <nav> que a envolve vinha com mt-5 (48px)
   herdado de quando o menu era mais alto - sobrava um bloco de espaço vazio no
   topo de toda tela. Aqui ela vira uma trilha compacta, com seta no lugar da
   barra e o item atual em destaque. O espaço de cima é resolvido na regra do
   <nav> logo abaixo. */
.cfg-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background: transparent !important;
    border: 0;
    padding: 0;
    margin-bottom: 12px;
    font-size: 12px;
}

/* O separador padrão do Bootstrap é uma "/" solta; a seta lê melhor como
   caminho percorrido. */
.cfg-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 10px;
    color: #c2cddb;
    padding: 0 4px 0 2px;
}

.cfg-breadcrumb .breadcrumb-item a {
    display: inline-block;
    color: #7b8aa0;
    text-decoration: none !important;
    padding: 3px 8px;
    border-radius: 7px;
    transition: all .15s ease;
}

.cfg-breadcrumb .breadcrumb-item a:hover {
    color: var(--cfg-navy);
    background: #eef4fb;
}

.cfg-breadcrumb .breadcrumb-item.active {
    color: var(--cfg-navy);
    font-weight: 700;
    padding: 3px 8px;
}

/* Encosta a trilha no topo do conteúdo. Vale para o <nav> que a envolve, então
   não é preciso mexer no mt-5 de cada uma das dezenas de telas. */
nav[aria-label="breadcrumb"] {
    margin-top: 12px !important;
    margin-bottom: 0;
}

/* ── Formulário em blocos ────────────────────────────────────────────────── */
/* Nasceu no modal de reunião e passou a valer para qualquer formulário longo:
   separa o formulário em seções com título em vez de empilhar dez campos
   iguais, e desenha o trio Data / Início / Término como um bloco só. */
.cfg-secao {
    border-bottom: 1px solid #eef2f7;
    padding-bottom: 12px;
    margin-bottom: 14px;
}

.cfg-secao-ultima {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.cfg-secao-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--cfg-navy, #1b3a5c);
    margin-bottom: 10px;
}

.cfg-secao-titulo i {
    color: var(--cfg-info, #17a2b8);
    font-size: 13px;
}

/* Bloco Data / Início / Término dos modais de reunião */
.cfg-quando {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    border: 1px solid #d7e3f0;
    border-radius: 8px;
    background: #f7fbff;
    padding: 12px;
}

.cfg-quando-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cfg-quando-item>span {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #6c757d;
}

.cfg-quando-data {
    flex: 1 1 170px;
    min-width: 150px;
}

.cfg-quando-hora {
    flex: 0 0 auto;
}

.cfg-quando .form-control {
    height: 44px;
    font-size: 15px;
    font-weight: 700;
    color: #0056b3;
    border-color: #cfe0f2;
    background: #fff;
}

.cfg-quando-hora .form-control {
    width: 122px;
    text-align: center;
}

.cfg-quando .form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .15);
}

.cfg-quando-sep {
    align-self: flex-end;
    padding-bottom: 12px;
    font-size: 12px;
    font-weight: 700;
    color: #6c757d;
}

.cfg-duracao {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #0056b3;
}

.cfg-duracao-erro {
    color: #dc3545;
}

@media (max-width: 575px) {
    .cfg-quando-data {
        flex: 1 1 100%;
    }

    .cfg-quando-hora {
        flex: 1 1 calc(50% - 26px);
    }

    .cfg-quando-hora .form-control {
        width: 100%;
    }
}

/* ── Questionário de satisfação ──────────────────────────────────────────── */
/* O modal das telas de pesquisa era uma sequência de <h5 class="text-center
   text-primary"> com parágrafo e campo soltos embaixo: tudo centralizado, tudo
   do mesmo tamanho, sem nada separando uma pergunta da seguinte. Aqui cada
   pergunta vira um bloco com faixa de título, e o texto volta a ser alinhado à
   esquerda - centralizar parágrafo longo custa leitura. */
.pesq-quest .modal-body {
    padding: 18px 22px 22px;
}

.pesq-quest-secao {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 22px 0 4px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eef2f7;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--cfg-navy);
}

.pesq-quest-ajuda {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.45;
    color: #6b7a90;
}

.pesq-quest-item {
    display: block;
    margin: 14px 0 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: #45536b;
}

/* As estrelas ficavam do tamanho do texto e cinza-claro sobre branco - dava
   para não perceber que eram clicáveis. */
.pesq-quest .rating {
    margin-bottom: 12px !important;
    padding: 8px 12px;
    border: 1px solid #dbe3ee;
    border-radius: 10px;
    background: #f8fafc;
}

.pesq-quest .rating label {
    font-size: 26px;
    color: #ccd6e4;
    cursor: pointer;
    transition: color .15s ease;
}

.pesq-quest .rating input:checked~label,
.pesq-quest .rating label:hover,
.pesq-quest .rating label:hover~label {
    color: #f0a624;
}

.pesq-quest textarea.form-control {
    border: 1px solid #dbe3ee;
    border-radius: 9px;
    font-size: 12.5px;
    color: #45536b;
}

.pesq-quest textarea.form-control:focus {
    border-color: var(--cfg-info);
    box-shadow: 0 0 0 3px rgba(23, 162, 184, .12);
}

/* ── Cartões de indicador ────────────────────────────────────────────────── */
/* Os números grandes das telas de análise (empresas ativas, taxa de churn...)
   eram <div class="card border"> com o valor num style inline de font-size:300%
   alinhado à direita e margin-top negativa para "subir" em cima do título. */
.cfg-kpi {
    border: 1px solid #e8eef6;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(var(--cfg-navy-rgb), .05);
    transition: all .18s ease;
    height: 100%;
}

.cfg-kpi .card-body {
    padding: 16px 18px;
}

.cfg-kpi .card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 6px;
}

.cfg-kpi .card-text {
    margin: 0 !important;
    font-size: 34px !important;
    line-height: 1.1;
    letter-spacing: -.5px;
}

/* Cartão que abre um detalhamento ao clique: sem isso, nada na tela dizia que
   ele era clicável. */
.cfg-kpi-clicavel {
    cursor: pointer;
}

.cfg-kpi-clicavel:hover {
    border-color: var(--cfg-info);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(var(--cfg-navy-rgb), .12);
}

/* Título de um painel/gráfico dentro de um cartão de análise. */
.cfg-grafico-titulo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--cfg-navy);
    margin-bottom: 12px;
}

/* Listas de opção do questionário. Eram <div class="form-check"> coladas uma na
   outra, com o texto em negrito azul do tema - dez linhas iguais em que nada
   indicava onde clicar, e o alvo do clique era só o próprio radio. */
.pesq-quest .form-check {
    padding: 7px 10px 7px 34px;
    border: 1px solid transparent;
    border-radius: 9px;
    margin-bottom: 2px;
    transition: all .15s ease;
}

.pesq-quest .form-check:hover {
    background: #f4f8fd;
    border-color: #dbe3ee;
}

.pesq-quest .form-check-input {
    margin-top: .3rem;
    margin-left: -1.5rem;
    cursor: pointer;
}

.pesq-quest .form-check-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #45536b;
    cursor: pointer;
}

/* A opção "Outro:" traz um campo ao lado; sem isto ele encostava no rótulo. */
.pesq-quest .form-check input[type="text"] {
    margin-left: 8px;
    height: 32px;
    border: 1px solid #dbe3ee;
    border-radius: 8px;
    font-size: 12.5px;
    padding: 4px 10px;
}

.pesq-quest .modal-footer,
.pesq-quest .text-center>.cfg-btn {
    margin-top: 6px;
}