/*!
 * Start Bootstrap - SB Admin v5.1.1 (https://startbootstrap.com/template-overviews/sb-admin)
 * Copyright 2013-2019 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-sb-admin/blob/master/LICENSE)
 */


/*!
 * Bootstrap v4.3.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 The Bootstrap Authors
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */


/* Customizações EstúdioMX */

@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@300;700&family=Nunito:wght@300;400;700&display=swap');

/* ============================================================
   ### ESGTS-29 :: TOKENS DE TEMA (secao 3 da SPEC de migracao visual)

   Camada de tema do GW. As cores da identidade deixam de estar
   espalhadas em literais e passam a viver AQUI -- as regras
   estruturais abaixo consomem os tokens e nao mudam quando a
   paleta muda. Trocar a aparencia de uma instalacao passa a ser
   trocar este bloco, e nada mais.

   Os valores sao os que o GW JA usava (118 literais repontados),
   entao esta troca nao muda um pixel: ela so da nome ao que ja
   existia. Sao os mesmos valores dos --crm-* do crm-leads.css,
   que agora fazem alias destes para as duas metades do sistema
   nao divergirem de novo.

   POSICAO: depois do @import de fonte de proposito. Regra do CSS:
   um @import so vale se vier antes de qualquer outra regra -- um
   :root acima dele desligaria a fonte Nunito do sistema inteiro.
   ============================================================ */
:root {
    /* superficies escuras: navbar, cabecalhos, texto forte */
    --ui-primary:          #313A46;
    --ui-primary-hover:    #283A50;
    --ui-primary-dark:     #232B34;
    --ui-primary-contrast: #FFFFFF;

    /* accent: confirmacao, hover, sucesso */
    --ui-accent:           #28A745;
    --ui-accent-2:         #0ACF97;

    /* superficies claras */
    --ui-bg:               #FAFBFE;
    --ui-surface:          #FFFFFF;
    --ui-surface-soft:     #F8F9FB;
    --ui-surface-alt:      #F1F3FA;

    /* bordas */
    --ui-border:           #E3E6EA;
    --ui-border-strong:    #CBD2D9;

    /* texto */
    --ui-text:             #313A46;
    --ui-text-body:        #6C757D;
    --ui-text-soft:        #8391A2;

    /* estado */
    --ui-danger:           #FA5C7C;
    --ui-danger-strong:    #DC3545;

    /* ### ESGTS-29 (rodada 4) :: cores proprias da barra do topo.
       O desenho aprovado pelo desenvolvedor usa um fundo mais fechado que o
       --ui-primary (#313A46) das demais superficies escuras, e um verde mais
       vivo que o --ui-accent (#28A745) nos destaques da barra. Ficam em tokens
       proprios para a barra poder ser calibrada sem mexer no resto do tema. */
    --ui-topbar:           #212836;
    --ui-topbar-linha:     rgba(255, 255, 255, .07);
    --ui-topbar-txt:       rgba(255, 255, 255, .62);
    --ui-topbar-hover:     rgba(255, 255, 255, .07);
    --ui-topbar-verde:     #22C55E;

    /* forma e elevacao */
    --ui-radius:           16px;
    --ui-radius-sm:        7px;
    --ui-radius-nav:       14px;
    --ui-shadow:           0 1px 3px rgba(16, 24, 40, .06);
    --ui-shadow-lg:        0 .35rem 1.25rem rgba(0, 0, 0, .10);
    --ui-shadow-nav:       0 .35rem 1.25rem rgba(0, 0, 0, .22);
}
body {
    margin: 0;
    font-family: Nunito, sans-serif;
    font-size: .9rem;
    font-weight: 400;
    line-height: 1.5;
    color: #6c757d;
    text-align: left;
    background-color: var(--ui-bg);
}

a {
    color: var(--ui-primary);
}

a:hover {
    color: var(--ui-primary-hover);
    text-decoration: none;
}

.text-primary,
a.text-primary:hover,
a.text-primary:focus {
    color: var(--ui-primary-hover) !important;
}

.text-success {
    color: var(--ui-accent-2) !important;
}

.badge-success {
    background-color: var(--ui-accent-2) !important;
}

.badge-danger {
    background-color: var(--ui-danger) !important;
}

.badge-primary {
    color: #fff;
    background-color: var(--ui-primary);
}

/* A regra generica ORIGINAL, restaurada: na 1a versao do breadcrumb-compacto eu
   sobrescrevi esta aqui em vez de acrescentar a do breadcrumb, e com isso os 46 usos
   fora do breadcrumb ficariam sem estilo nenhum. */
.badge-outline {
    background: #fff;
    border: 1px solid #b1b1b1;
    color: #000;
}

/* ### Implementacao 26-08-03-breadcrumb-compacto : o "voltar" do breadcrumb no
   mesmo desenho dos demais botoes (borda var(--ui-border-strong), raio 8px, 12px/600) -- antes era
   borda cinza #b1b1b1 e texto preto, de outra familia visual.

   ### Implementacao 26-08-03-badge-outline-so-breadcrumb (correcao do QA)
   Escopado para dentro do .breadcrumb. A classe .badge-outline tem 46 usos em 22
   arquivos que NAO sao breadcrumb -- o link do codigo de barras de cada banco
   (inc_funcoes.php, 9x), "Editar Reajuste" injetado na coluna de acoes, contadores
   no setTitle. Nenhum deles foi pedido nem revisado, e o padding/font novos mudavam
   todos. O "voltar" do breadcrumb e um <a class="badge badge-outline"> dentro de
   <ol class="breadcrumb"> (montado no index.php), entao o escopo pega exatamente ele. */
.breadcrumb .badge-outline {
    background: #FFFFFF;
    border: 1px solid var(--ui-border-strong);
    color: var(--ui-primary);
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
}
.breadcrumb .badge-outline:hover {
    background: #F1F3F5;
    color: var(--ui-primary);
    border-color: var(--ui-primary);
}
.breadcrumb-item + .breadcrumb-item {
    padding-left: 8px;
}
.breadcrumb-item + .breadcrumb-item::before {
    padding-right: 8px;
}

.badge-dark {
    background-color: #5d6d7d;
    font-size: 9px;
}

.bg-dark {
    background-color: var(--ui-primary) !important;
}

.bg-primary {
    background-color: var(--ui-primary) !important;
}

.badge {
    padding: 5px 5px 3px 5px;
}

@media (min-width: 768px) {
    /* ### ESGTS-29 :: sairam as tres regras .sidebar-scoped (largura 225px,
       alinhamento a esquerda e o span do estado colapsado). Esta, que nao era
       da sidebar, fica: e o respiro entre o icone e o nome do modulo, agora
       na barra do topo. */
    a.nav-link.dropdown-toggle>span {
        margin-left: 5px!important;
    }
}


/*Altura máxima do logo */

.navbar-brand img {
    max-height: 50px !important;
}

.navbar-brand img {
    max-width: 150px;
    margin-left: 0px;
}

.dropdown-menu {
    background-color: var(--ui-primary);
    border: 0px;
    min-width: 13rem;
}

.dropdown-menu.show {
    border: none;
    border-radius: 0;
    background: var(--ui-primary);
    top: 5px !important;
    color: #fff;
}

.dropdown-item {
    padding: 5px 25px;
    background-color: #3d4652;
    color: var(--ui-text-soft);
    line-height: 35px;
    width: inherit;
}

a.dropdown-item {
    color: var(--ui-text-soft);
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--ui-primary) !important;
    text-decoration: none;
    background-color: #f8f9fa;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--ui-bg);
    color: var(--ui-primary);
}

li.nav-item.gw {
    position: relative;
    margin-top: auto;
    margin-bottom: auto;
}

@media(max-width:600px) {
    .gw {
        display: none;
    }
}

.select2-container--default .select2-selection--multiple .select2-selection__choice,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--ui-primary-hover);
    border: 1px solid var(--ui-primary-hover);
    color: #fff;
}

.list-group-item.active {
    z-index: 2;
    color: #fff;
    background-color: var(--ui-primary);
    border-color: var(--ui-primary);
}

.btn-primary {
    color: #fff;
    background-color: var(--ui-primary-hover);
    border-color: var(--ui-primary-hover);
}

.btn-primary:hover {
    color: var(--ui-primary-hover);
    background-color: #ffffff;
    border-color: var(--ui-primary-hover);
    box-shadow: 0px 0px 10px var(--ui-primary-hover);
}

.btn-primary.disabled,
.btn-primary:disabled,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--ui-primary);
    border-color: var(--ui-primary);
}

/* ### Implementacao 26-08-04-abtn-raio-padrao
   Era "border-radius: 3px !important" -- e o !important ganhava de TUDO. Efeito:
   todo botao que e <a> ficava com 3px enquanto os que sao <input>/<button>
   ficavam com os 8px do padrao novo. Era essa a diferenca entre o "Cadastre-se"
   (<a class="btn">) e o "Entrar" (<input type="button">) na tela de login -- e a
   mesma coisa acontecia em qualquer tela, porque os botoes do menu 2 tambem sao
   <a>.
   Agora e o mesmo 8px do resto, e sem !important: nao ha mais nada aqui que
   precise atropelar regra especifica -- pelo contrario, o !important impediria
   os ajustes por contexto (.dt-buttons, .dropdown-actions) de valerem. */
a.btn {
    /*max-width: 300px;*/
    border-radius: 8px;
}

/* ### Implementacao 26-08-04-btn-raio-base
   O raio de 8px estava espalhado por regra de VARIANTE (.btn-outline-primary,
   #form_button_submit, a.btn). Bastava um botao usar outra variante para cair no
   raio do Bootstrap: foi o que aconteceu com o "Espelho de Vendas com IA", que o
   snippet troca para .btn-success por JS (int_empreendimento_re:2144) -- sem
   .btn-outline-primary, sobrava o .btn-sm com 0.2rem (3,2px).
   Aqui o raio passa a ser do .btn, a base de TODO botao; as variantes so mudam cor.
   Especificidade igual a do .btn-sm (0,1,0), e o custom.css carrega depois: vence.
   Nao atrapalha os casos que precisam de canto reto -- .btn-group > .btn:not(...)
   e .input-group ... > .btn sao (0,2,0) ou mais e continuam por cima. */
.btn {
    border-radius: 8px;
}

.btn-group,
.btn-group-vertical {
    display: inline-block;
    text-align: right;
}

/* ### Implementacao 26-08-03-botao-outline-limpo
   Botoes de acao da tela (menu 2) no MESMO desenho do par SALVAR / Limpar:
   os tokens sao os do .crm-btn-sec (crm-leads.css:332) e do #form_button_reset --
   fundo branco, borda suave (--crm-border-2 var(--ui-border-strong), em vez do var(--ui-primary) duro de
   antes), raio 8px, 13px/600. O icone continua, so ficou proporcional ao texto.
   ### Implementacao 26-08-03-outline-respeita-btn-sm (correcao do QA)
   Esta regra tinha padding e font-size proprios. Como e a mesma especificidade do
   .btn-sm (0,1,0) e o custom.css carrega depois, ela ANULAVA o .btn-sm -- e 62 dos 69
   .btn-outline-primary do sistema sao btn-sm. O padding dobrava (8/16 contra 4/8) em
   dezenas de botoes de telas que nunca foram revisadas (DANFE/XML, Importar OFX,
   Voltar da conciliacao), varios deles dentro de celula de tabela.
   O escopo .gw-menu2-inline vence por ESPECIFICIDADE (0,2,0 contra 0,1,0 do .btn-sm),
   nao por ordem -- entao nao depende de onde a regra fica no arquivo.
   ### Implementacao 26-08-04-outline-comentario-quebrado
   Havia um fecha-comentario a mais AQUI (e nao da para escrever os dois caracteres
   dentro de um comentario CSS -- foi assim que o erro nasceu). As 3 linhas seguintes
   ficavam fora do comentario e o
   parser de CSS, procurando o "{" da regra, engolia o seletor .btn-outline-primary
   dentro de um seletor invalido -- e DESCARTAVA a regra inteira. Efeito: no desktop
   os botoes do menu 2 voltavam ao azul padrao do Bootstrap. No celular nao aparecia
   porque la o menu 2 vira .dropdown-actions, que tem regra propria com !important.
   Agora a regra guarda so a IDENTIDADE VISUAL (cor, borda, raio, peso), que e o que se
   queria unificar, e o TAMANHO fica com o .btn-sm de sempre. O desenho maior vale
   apenas onde ele foi pedido: os botoes do menu 2 dentro do cabecalho do card. */
/* ### Implementacao 26-08-04-outline-borda-283a50
   A borda passou de var(--ui-border-strong) (suave) para var(--ui-primary-hover), o mesmo tom do "Cadastre-se" da
   tela de login -- pedido do usuario para que exista UM desenho de botao secundario
   no sistema inteiro, e nao dois parecidos. O hover passa a PREENCHER com o mesmo
   tom, tambem como no login, em vez do fundo cinza claro de antes. */
.btn-outline-primary {
    color: var(--ui-primary-hover);
    background-color: #FFFFFF;
    border: 1px solid var(--ui-primary-hover);
    border-radius: 8px;
    font-weight: 600;
}
.gw-menu2-inline .btn-outline-primary {
    padding: 8px 16px;
    font-size: 13px;
    line-height: 1.2;
}
/* ### Implementacao 26-08-04-menu2-icone-tamanho-unico
   Era ".gw-menu2-inline .btn-outline-primary i", ou seja, so os botoes outline.
   Os que trocam de classe por JS (btn-danger, btn-success, btn-dark, btn-warning
   -- "ADM Status VENDA", "Enviar KIT", "Gerar Contrato Sienge") deixavam de casar
   e caiam no ".card-header i { font-size: 15px }", porque o grupo do menu 2 vive
   DENTRO do cabecalho do card. Dai icones de 12px ao lado de icones de 15px na
   mesma linha.
   Agora a regra vale para qualquer .btn do grupo: (0,2,1) contra (0,1,1) do
   .card-header i, entao vence por especificidade. */
.gw-menu2-inline .btn i {
    font-size: 12px;
    margin-right: 2px;
}

.btn-outline-primary:hover {
    color: #FFFFFF;
    background-color: var(--ui-primary-hover);
    border-color: var(--ui-primary-hover);
    /* o box-shadow de 10px que existia aqui destoava do resto -- saiu */
    box-shadow: none;
}

.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show>.btn-outline-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--ui-primary);
    border-color: var(--ui-primary);
}

.btn-success {
    -webkit-box-shadow: 0 2px 6px 0 rgba(10, 207, 151, .5);
    box-shadow: 0 2px 6px 0 rgba(10, 207, 151, .5);
}

.btn-success {
    color: #fff;
    background-color: var(--ui-accent-2);
    border-color: var(--ui-accent-2);
}

.btn-success:hover {
    color: #fff;
    background-color: #19a980;
    border-color: #19a980;
    box-shadow: 0 2px 6px 0 rgb(25 169 128 / 50%);
}

/* ### Implementacao 26-08-03-layout-padrao-framework
   Separador de secao do BoxForm ("Dados do Cliente", "Endereco"...). O framework emite
   <center><h3 id="BoxCelulasDescricaoCampos_title_X">, entao o text-align aqui e o que
   manda de fato -- sem precisar tocar na classe PHP.

   ### Implementacao 26-08-03-separator-centro-escuro : titulo centralizado, e o fundo
   passou a ser a MESMA cor da zebra da DataTable (var(--ui-surface-alt), "Table Strip" mais abaixo
   neste arquivo) em vez de um cinza inventado. As tentativas por porcentagem (20/15/10%
   de escurecimento) davam cinzas neutros que nao existiam em lugar nenhum do sistema; a
   zebra ja e a cor que o usuario ve como "faixa de leitura" nas listagens, entao o
   separador falar a mesma lingua mantem um padrao so. A borda volta para o var(--ui-border) dos
   cards -- mais escura que o preenchimento, senao o relevo inverte e a faixa parece
   furada.
   O text-align:center e redundante com o <center> herdado, mas fica explicito para o dia
   em que a tag sair da classe PHP. */
[id*="BoxCelulasDescricaoCampos_title_"] {
    background: var(--ui-surface-alt);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 24px 0 16px;
    color: var(--ui-primary);
    font-weight: 700;
    font-size: 16px;
    text-align: center;
}

.separator {
    background: #e9ecef;
    border-radius: 0px;
    padding: 5px 0px;
    color: var(--ui-primary-hover);
    font-weight: 600;
}

.ajuste-icones {
    font-size: 20px !important;
    color: #7c8590;
    padding: 1px 0px !important;
    margin-right: 5px !important;
    line-height: 0px !important;
}

.ajuste-icones-lista {
    font-size: 14px !important;
    color: #7c8590;
    padding: 1px 0px !important;
    margin-right: 5px !important;
    line-height: 0px !important;
}

.breadcrumb-item.active {
    color: var(--ui-primary-hover);
    font-weight: 600;
}

/* ### Implementacao 26-08-03-layout-padrao-framework
   CARD E CABECALHO no mesmo desenho da tela do lead (.crm-lead-sec / .crm-lead-sec-title,
   crm-leads.css:224 e :226). O markup do framework ja e o mesmo -- .card > .card-header >
   .card-body, emitido por box2.list.class.php:671 e box2.form.class.php:838 -- entao a
   unificacao e so estilo: nenhum snippet muda.
   Os valores sao os MESMOS tokens do CRM (--crm-border var(--ui-border), --crm-text var(--ui-primary)), para
   as duas partes do sistema nao divergirem de novo com o tempo. */
.card {
    border: 1px solid var(--ui-border);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
}
.card-header {
    font-size: 18px;
    font-weight: 700;
    color: var(--ui-primary);
    background: var(--ui-surface-soft);
    border-bottom: 1px solid var(--ui-border);
    border-radius: 15px 15px 0 0;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.card-header i {
    font-size: 15px;
}
/* ### Implementacao 26-08-03-card-radius
   O sb-admin.css:4937 tem ".card-header:first-child { border-radius: calc(.25rem - 1px) ... }"
   -- 3px. Uma classe + pseudo-classe (0,2,0) vence a minha classe simples (0,1,0) MESMO com o
   custom.css carregando depois: especificidade manda mais que ordem. Era por isso que o canto
   do cabecalho nao acompanhava o card.
   O valor e 15px e nao 16px de proposito: o raio interno de uma caixa e o externo MENOS a
   borda (16 - 1). E a mesma conta que o proprio Bootstrap faz com o calc(raio - 1px) -- com
   16px nos dois, o canto do cabecalho passaria por fora do card. */
.card-header:first-child {
    border-radius: 15px 15px 0 0;
}
/* ### rodada 2 (QA): com display:flex o .text-center de 7 cabecalhos (proposta
   personalizada e dashboards do CRM) deixava de centralizar -- o flex ignora
   text-align. Restaura a intencao. */
.card-header.text-center {
    justify-content: center;
}
/* Cards de dashboard trazem .bg-primary/.bg-success etc., que no Bootstrap sao !important
   -- eles continuam com a cor propria; aqui muda so a forma. */

/* BOTOES DO FORMULARIO: mesmo par da tela do lead (.crm-btn-salvar / .crm-btn-sec).
   Alvo por ID porque e o que a BoxForm emite (box2.form.class.php:780). */
#form_button_submit {
    background: var(--ui-primary);
    border-color: var(--ui-primary);
    color: #FFFFFF;
    border-radius: 8px;
    padding: 10px 22px;
    font-weight: 600;
    font-size: 13px;
}
#form_button_submit:hover {
    background: var(--ui-primary-dark);
    border-color: var(--ui-primary-dark);
}
#form_button_reset {
    background: #FFFFFF;
    border: 1px solid var(--ui-border-strong);
    color: var(--ui-primary);
    border-radius: 8px;
    padding: 10px 22px;
    font-weight: 600;
    font-size: 13px;
}
#BoxLinhasButtons {
    margin-top: 8px;
}

.page-item.active .page-link {
    z-index: 1;
    color: #fff;
    background-color: var(--ui-primary);
    border-color: var(--ui-primary);
}

.page-link {
    color: var(--ui-primary);
}

.card-body>div {
    margin-bottom: 10px;
}


/* Calendário Agendamento */

.fc-event {
    position: relative;
    display: block;
    font-size: 12px;
    line-height: 1.3;
    border-radius: 0px !important;
    border: 1px solid var(--ui-primary) !important;
    background-color: var(--ui-primary) !important;
    font-weight: normal;
    font-family: Nunito, sans-serif;
}

.ui-widget-header {
    border: 1px solid #aaa;
    background: var(--ui-primary) !important;
    color: #fff !important;
    font-weight: 600;
    font-family: Nunito, sans-serif;
}

#menu {
    width: 300px;
    font-size: 10pt;
}

.board {
    display: block;
    white-space: nowrap;
    overflow-x: auto;
}

.tasks {
    display: inline-block;
    width: 22rem;
    padding: 0 1rem 1rem 1rem;
    border: 1px solid #eef2f7;
    vertical-align: top;
    margin-bottom: 24px;
    border-radius: 0.25rem;
}

.tasks.tasks:not(:last-child) {
    margin-right: 1.25rem;
}

.tasks .card {
    white-space: normal;
    margin-top: 1rem;
}

.tasks .task-header {
    background-color: var(--ui-surface-alt);
    padding: 1rem;
    margin: 0 -1rem;
}

.task-list-items {
    /* min-height: 100px; */
    position: relative;
}

.task-list-items:before {
    position: absolute;
    line-height: 110px;
    width: 100%;
    text-align: center;
    font-weight: 600;
}

.task-modal-content .form-control-light {
    background-color: #f7f9fb !important;
    border-color: #f7f9fb !important;
}

textarea.form-control {
    margin-bottom: 10px;
}

.modal-header {
    background-color: #e9ecef;
}

.modal-title {
    font-weight: 700;
    color: var(--ui-primary);
}

.timeline-alt {
    padding: 20px 0;
    position: relative;
}

.timeline-alt .timeline-item {
    position: relative;
}

.timeline-alt .timeline-item:before {
    background-color: var(--ui-surface-alt);
    bottom: 0;
    content: "";
    left: 9px;
    position: absolute;
    top: 20px;
    width: 2px;
    z-index: 0;
}

.timeline-alt .timeline-item .timeline-icon {
    float: left;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 2px solid transparent;
    font-size: 14px;
    text-align: center;
    line-height: 16px;
    background-color: #e9ecef;
}

.timeline-alt .timeline-item .timeline-item-info {
    margin-left: 30px;
}


/* Ajuste scroll lateral em todas as paginas */

.row {
    margin-right: 0px;
    margin-left: 0px;
}

.dataTables_wrapper {
    overflow-x: auto !important;
}

.dataTables_wrapper .row {
    padding-top: 5px;
}


/* Table Strip */

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--ui-surface-alt);
}

.table th,
.table td {
    vertical-align: middle;
}

.table-dark th {
    color: #fff;
    background-color: var(--ui-primary) !important;
}

/* ### Implementacao 26-08-03-breadcrumb-compacto
   A faixa do breadcrumb ficou com a altura do Bootstrap (padding .75rem 1rem) e o
   cinza antigo, destoando do card novo -- no celular ela ocupava quase a mesma
   altura do cabecalho da tela. Mesmos tokens do card: fundo var(--ui-surface-soft), borda
   var(--ui-border) e raio 16px; a altura cai pela metade. */
.breadcrumb {
    background-color: var(--ui-surface-soft);
    border: 1px solid var(--ui-border);
    border-radius: 16px;
    padding: 8px 14px;
    margin-bottom: 12px;
    align-items: center;
    font-size: 12px;
}

th.thExcluir.sorting {
    width: 65px;
    text-align: center;
}

th.thAction.sorting {
    width: 45px;
}


/* Rodapé */

#footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    right: 0;
    bottom: 0;
    /* ### ESGTS-29 :: era calc(100% - 90px). Os 90px eram a largura da sidebar
       colapsada, que o rodape precisava descontar para nao passar por baixo
       dela. Sem sidebar, descontar 90px deixaria uma faixa vazia a esquerda. */
    width: 100%;
    height: 80px;
    background-color: #e9ecef;
  }

#footer {
    height: 30px;
    position: fixed;
    z-index: 10;
}


/* Icons */


/*
 .fa, .fas, .far {
     font-size: 16px;
 }
 */

.dropdown-menu>a>i.fa,
.dropdown-menu>a>i.far,
.dropdown-menu>a>i.fas {
    margin-right: 5px;
}


/* Meus LEADS */

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: solid #bfbfbf 1px;
}

a.nav-link.rounded-0 {
    background: #e9ecef;
}


/* Switch */

input[data-switch]+label {
    width: 56px;
    height: 24px;
    background-color: var(--ui-surface-alt);
    background-image: none;
    border-radius: 2rem;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    position: relative;
    -webkit-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}

input[data-switch=bool]+label:before,
input[data-switch=bool]:checked+label:before {
    color: #fff!important;
}

input[data-switch]:checked+label:before {
    color: #fff;
    content: attr(data-on-label);
    right: auto;
    left: 4px;
}

input[data-switch]+label:before {
    color: var(--ui-primary);
    content: attr(data-off-label);
    display: block;
    font-family: inherit;
    font-weight: 600;
    font-size: .75rem;
    line-height: 24px;
    position: absolute;
    right: 3px;
    margin: 0 .21667rem;
    top: 0;
    text-align: center;
    min-width: 1.66667rem;
    overflow: hidden;
    -webkit-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}

input[data-switch]+label:after {
    content: '';
    position: absolute;
    left: 4px;
    background-color: #adb5bd;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 2rem;
    height: 18px;
    width: 18px;
    top: 3px;
    -webkit-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}

input[data-switch]:checked+label:after {
    left: 34px;
    background-color: var(--ui-surface-alt);
}

input[data-switch=bool]+label:after {
    background-color: var(--ui-surface-alt);
}

input[data-switch]:checked+label {
    background-color: var(--ui-accent-2);
}

input[data-switch=bool]+label {
    background-color: var(--ui-danger);
}

input[data-switch] {
    display: none;
}


/* Fim Switch */

.float-button {
    position: fixed;
    right: 100px;
    bottom: 100px;
    width: 50px;
    height: 50px;
    text-align: center;
    color: green;
    /* background: rgba(52, 58, 64, 0.5); */
    line-height: 46px;
    z-index: 999;
    font-size: 50px;
}


/*Box de Pesquisa oculto */

li.nav-item.searchItem {
    display: none;
}

.pulse {
    overflow: visible;
    position: relative;
}

.pulse:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: inherit;
    border-radius: inherit;
    transition: opacity .3s, transform .3s;
    animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
    z-index: -1;
}

@keyframes pulse-animation {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0;
        transform: scale(1.5);
    }
    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}


/* Alertas Botões JS*/

button.swal-button {
    background: var(--ui-primary)
}

.swal-button--cancel {
    color: #fff;
    background-color: #dc3545 !important;
}

.swal-button:not([disabled]):hover {
    background-color: #e1e6ec;
    color: var(--ui-primary);
}

input[required]:invalid {
    box-shadow: 0 0 5px 1px #a00007
}

textarea[required]:invalid {
    box-shadow: 0 0 5px 1px #a00007
}

select[required]:invalid {
    box-shadow: 0 0 5px 1px #a00007;
}

.required {
    box-shadow: 0 0 5px 1px #a00007;
}

select:invalid+.select2-container>span.selection>span.select2-selection {
    box-shadow: 0 0 5px 1px #a00007;
}

select:invalid+.select2-container--focus>span.selection>span.select2-selection {
    box-shadow: 0 0 5px 1px #a00007;
}

#form_login input[required]:invalid {
    box-shadow: none
}


/* input:required {
    background: url("/sistema/global/imagens/required.png") no-repeat 8px center white;
    outline: 2px solid transparent;
}
input:valid {
    background: none;
    outline: 2px solid transparent;
} */


/*Ajuste Tippy */

.tippy-box {
    background-color: var(--ui-primary) !important;
}


/* Ajustes de espaçametos*/

.form-group.col-lg-12.col-md-12.col-sm-12 {
    margin-bottom: 0px;
    padding-top: 15px;
}

.alert {
    margin-bottom: 0px;
}

.card-body>div {
    margin-bottom: 0px;
    padding: 10px 10px;
}

table.dataTable {
    margin-top: 0px !important;
    /* overflow-wrap: anywhere; */ 
}

.card.mb-3>.card.mb-3 {
    margin-bottom: 0px !important;
}

div#BoxLinhasButtons {
    padding-top: 10px;
}


/*Ajustes MaArgens Smartphone*/

@media(max-width:600px) {
    .col-1,
    .col-2,
    .col-3,
    .col-4,
    .col-5,
    .col-6,
    .col-7,
    .col-8,
    .col-9,
    .col-10,
    .col-11,
    .col-12,
    .col,
    .col-auto,
    .col-sm-1,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12,
    .col-sm,
    .col-sm-auto,
    .col-md-1,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-10,
    .col-md-11,
    .col-md-12,
    .col-md,
    .col-md-auto,
    .col-lg-1,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8,
    .col-lg-9,
    .col-lg-10,
    .col-lg-11,
    .col-lg-12,
    .col-lg,
    .col-lg-auto,
    .col-xl-1,
    .col-xl-2,
    .col-xl-3,
    .col-xl-4,
    .col-xl-5,
    .col-xl-6,
    .col-xl-7,
    .col-xl-8,
    .col-xl-9,
    .col-xl-10,
    .col-xl-11,
    .col-xl-12,
    .col-xl,
    .col-xl-auto {
        padding-right: 0px;
        padding-left: 0px;
    }
    /* ### Implementacao 26-08-03-mobile-padding-card
       Estas duas regras zeravam o respiro do card no celular -- vinham da epoca
       em que a listagem virava "cards" empilhados e o card do framework era so
       um wrapper invisivel. Agora que o celular mostra o layout de verdade, elas
       faziam o conteudo encostar na borda e o card sumir.
       O padding e 14px (e nao os 20px do desktop) porque na largura do celular
       cada pixel lateral conta. */
    .card-body {
        padding: 14px;
    }
    .card {
        border: 1px solid var(--ui-border);
    }
}

/* ### ESGTS-29 :: sairam as duas regras que empurravam o submenu para
   "left: calc(80px + .5rem)" -- 80px era a largura da sidebar colapsada, e o
   painel precisava abrir ao LADO dela. Na barra do topo quem posiciona o
   dropdown e o Popper do Bootstrap, logo abaixo do modulo clicado. */

@media(max-width:768px) {
    #footer {
        width: calc(100%) !important;
    }
    div.dataTables_wrapper div.dataTables_paginate ul.pagination {
        justify-content: center;
    }
    /* ### Implementacao 26-08-03-layout-padrao-framework : eram 22px !important, herdados
       de quando o titulo tinha 24px. Com o novo tamanho base (18px/16px) esse !important
       inverteria a hierarquia, deixando o titulo MAIOR no celular do que no desktop. */
    [id*="BoxCelulasDescricaoCampos_title_"] {
        font-size: 15px !important;
    }
    .card-header {
        font-size: 16px !important;
    }
    .dropdown-actions .show {
        width: 100% !important;
    }
    .dropdown-menu.show {
        transform: translate3d(0px, -30px, 0px) !important;
    }
    a.dropdown-item {
        color: var(--ui-text-soft);
    }
    #atv-suporte {
        display: none;
    }
}


/*Espelho sem Card*/

.emp-nome {
    font-size: 16px;
    font-weight: 900;
}

.card-container {
    position: relative;
    text-align: center;
    color: white;
}

.card-centered {
    position: absolute;
    top: 50%;
    left: 52%;
    transform: translate(-50%, -50%);
    font-weight: 900;
}

.tarja-off {
    position: absolute;
    top: 8px;
    right: 18px;
    background: #dc3545;
    padding: 2px 3px 0px;
    border-radius: 5px;
    font-size: 10px;
    color: #fff;
    font-weight: 900;
}


.form-control {
    padding: 5px;
}

/* ### Implementacao 26-08-03-limpar-campo-bolinha : regra antiga substituida
   pelo bloco no fim deste arquivo (bolinha com x dentro do campo). */

.grecaptcha-badge {
    position: relative;
    z-index: -10;
}


/* ul li a i.fas {
    color: #ffffff !important;
} */

/* ### ESGTS-29 (rodada 12) :: tamanho dos botoes da listagem.

   A regra antiga era "font-size: 24px !important" com "padding: 0px 3px". Ela
   nasceu quando os botoes eram SO ICONE (copiar/excel/imprimir): 24px deixava o
   glifo do Font Awesome num tamanho legivel. Com o "Colunas" (ColVis), que tem
   TEXTO, o mesmo 24px passou a valer para a palavra -- e um rotulo de 24px ao
   lado de campos de 13px e o que fazia a barra parecer desproporcional.

   Agora o tamanho do TEXTO e do ICONE sao declarados separados: 13px no botao e
   15px no glifo. E o botao ganha borda e fundo de verdade, em vez da borda branca
   invisivel sobre fundo branco. */
.dt-buttons .btn-outline-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ui-text-body) !important;
    background-color: var(--ui-surface);
    border-color: var(--ui-border);
    font-size: 13px !important;
    font-weight: 600;
    line-height: 1.2;
    padding: .35rem .65rem;
    border-radius: var(--ui-radius-sm);
}
/* o icone continua maior que o texto -- e ele que identifica o botao */
.dt-buttons .btn-outline-primary i {
    font-size: 15px;
    line-height: 1;
}
.dt-buttons .btn-outline-primary:hover,
.dt-buttons .btn-outline-primary:focus {
    color: var(--ui-primary) !important;
    background-color: var(--ui-surface-alt);
    border-color: var(--ui-border-strong);
    box-shadow: none;
}
/* a setinha do "Colunas" e decoracao: nao compete com o rotulo */
.dt-buttons .dt-down-arrow {
    font-size: 9px;
    opacity: .5;
    margin-left: .1rem;
}

div.dt-buttons {
    position: relative;
    /* o float e o padding vinham do layout antigo, em que os botoes ficavam
       soltos acima da tabela. Hoje o "dom" do DataTables (datatables-PT-BR.js)
       poe este bloco numa coluna flex ao lado da busca -- float ali so atrapalha. */
    float: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

label {
    margin: 0.5rem !important;
}

.scroll-to-top {
    z-index: 999 !important;
    right: 5px;
}

#wrapper {
    width: 100% !important;
}

div#alertCard {
    right: 0px !important;
    left: inherit;
}

.toast-header {
    background-color: var(--ui-primary);
    color: #fff;
}

.toast {
    background-color: #3d4652;
    color: #fff;
}

.toast-body>div>a.btn.btn-primary.btn-sm {
    background: var(--ui-primary);
}

.toast-header .close {
    color: #fff;
}

#gw-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

#gw-wrapper #gw-content-wrapper {
    overflow-x: hidden;
    width: 100%;
    padding-top: 1rem;
    padding-bottom: 80px;
}

@media ( max-width: 960px ) {

    li#menu-api,
    li#menu-custom,
    li#menu-logo-inverse,
    li#menu-suporte,
    div#mapa-1,
    div#mapa-legenda,
    li#breadcrumb-item-rotina {
        display: none;
    }

}

@media ( max-width: 600px ) {

    div#cards-emps {
        max-width: 48%;
        margin-right: 5px;
    }

    .col-sm {
        width: 50%;
    }

    .col-md {
        width: 48%;
    }


}


[id^="tableHead_"],
.thExcluir,
.thAction
    {  font-size: 14px; }

/* --- SweetAlert v2: fundo mais escuro + blur ------------------------------ */
.swal-overlay {
    background-color: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}



/*Medias queries */

.col-5ths {
  flex: 0 0 20%;
  max-width: 20%;
}

@media (max-width: 768px) {
.col-5ths {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

.modal-content {
    border-radius: 0.5rem;
}

/* ============================================================
   DESKTOP (>=992px): tabela ocupa 100% da largura da tela,
   SEM scroll horizontal. Se faltar espaco, as colunas
   encolhem e o texto quebra (nunca some coluna).
   Mobile/tablet estreito (<992px) mantem o scroll horizontal.
   ============================================================ */
@media (min-width: 992px) {
    /* ### Implementacao 26-07-31-tabela-nao-vaza : o overflow-x visible daqui matava o
       scroll do .table-responsive do Bootstrap; tabela larga (muitas colunas ou celula
       com texto longo sem espaco) vazava para fora do card. Agora a celula QUEBRA o
       texto (overflow-wrap/word-break), entao na pratica a tabela cabe em 100% e nao
       aparece scroll; se ainda assim nao couber, o container rola em vez de vazar. */
    .table-responsive { overflow-x: auto !important; }
    .dataTables_wrapper { overflow-x: visible !important; }
    table.dataTable { width: 100% !important; max-width: 100% !important; }
    /* NUNCA cortar no meio da palavra. `overflow-wrap: anywhere` fazia o navegador
       reduzir a largura minima da coluna picando o texto ("Modali/dade"); com
       `break-word` a palavra so quebra se ela SOZINHA nao couber na linha. */
    table.dataTable > thead > tr > th,
    table.dataTable > tbody > tr > td {
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        hyphens: none !important;
    }
    /* cabecalho um pouco menor: cabe mais coluna sem precisar quebrar nada.
       Exclui as tabelas do CRM que ja definem 11px em crm-leads.css (sem !important):
       sem o :not elas AUMENTARIAM para 12.8px, o oposto da intencao. */
    table.dataTable:not(.crm-gest-tab):not(.crm-lista-tab) > thead > tr > th {
        font-size: 0.8rem !important;
        line-height: 1.25 !important;
        vertical-align: bottom;
    }
}

/* ### Implementacao 26-07-31-tabela-nao-vaza : vale para QUALQUER tabela, nao so DataTable
   (listagens montadas a mao, relatorios em HTML, tabelas dentro de cards). Descendente
   em vez de filho direto porque o DataTables insere .dataTables_wrapper no meio. */
.card-body > .table-responsive,
.table-responsive { max-width: 100%; }
.table-responsive table { max-width: 100%; }


/* ### ESGTS-29 :: saiu o bloco do DRAWER OVERLAY da sidebar no celular
   (posicao fixa, translateX, backdrop, acordeao do submenu, caret girando).
   Todas as regras eram .sidebar-scoped e ficaram sem alvo com o menu no topo.
   O equivalente agora e o .collapse do Bootstrap sob o .navbar-toggler, com o
   acordeao do submenu resolvido pelas regras de #mainNavbar mais abaixo.
   O "#content-wrapper { width:100% }" que morava aqui tambem saiu: ele servia
   a capa, que ja recebe a mesma largura do #wrapper #content-wrapper do
   sb-admin.css. */


/* MOBILE (<768px): oculta botoes copy/excel/print do DataTable p/ economizar espaco.
   ### ESGTS-29 :: o "Colunas" (ColVis) e a EXCECAO e continua visivel. A regra antiga
   escondia .dt-buttons inteiro; com o seletor de colunas novo isso o mataria justamente
   onde ele mais serve -- numa tabela de 15 colunas rolando na horizontal no celular,
   escolher as 4 que interessam e o que torna a tela usavel. Exportar planilha, nao:
   continua sendo tarefa de desktop. */
@media (max-width: 767.98px) {
    .dt-buttons > .dt-button:not(.buttons-colvis) { display: none !important; }
    .dt-buttons { margin-bottom: .5rem; }
    /* sem nenhum botao alem do ColVis, a barra nao precisa ocupar meia largura */
    .dt-buttons > .buttons-colvis { font-size: 12px; padding: .25rem .6rem; }
}


/* ============================================================
   MENU 2 (acoes da tela / row_menu_2): em vez de esconder as
   acoes atras de um 2o burger "Menu", mostra como barra de
   botoes inline. O .dropdown-actions so e gerado no mobile
   (isMobile), entao esta regra vale exatamente para esse caso.
   ============================================================ */
.dropdown-actions > .dropdown-toggle { display: none !important; }
.dropdown-actions > .dropdown-menu {
    display: flex !important;
    position: static !important;
    float: none !important;
    flex-direction: row !important;
    justify-content: space-between;
    flex-wrap: wrap !important;
    min-width: 0 !important;
    gap: .4rem;
    width: 100% !important;
    margin: 0; padding: 0; border: 0;
    background: transparent; box-shadow: none;
    transform: none !important;
}
.dropdown-actions > .dropdown-menu > .dropdown-item,
.dropdown-actions > .dropdown-menu > .btn {
    flex: 0 0 48% !important;
    max-width: 48% !important;
    min-width: 0;
    margin: 0 !important;
    float: none !important;
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* ### Implementacao 26-08-03-botao-outline-limpo (rodada 2)
       Estes valores eram uma COPIA do .btn-outline-primary antigo (borda var(--ui-primary)
       dura, raio .2rem, 14px). Como e copia e nao heranca -- os itens do menu 2 no
       celular sao <a class="dropdown-item">, nao .btn --, ela nao acompanhou a
       mudanca do botao e o celular ficou com o desenho velho.
       Agora repete os tokens novos: borda var(--ui-primary-hover), raio 8px, 13px/600
       (### Implementacao 26-08-04-outline-borda-283a50 -- acompanha o desktop). */
    color: var(--ui-primary-hover) !important;
    background: #FFFFFF !important;
    border: 1px solid var(--ui-primary-hover) !important;
    border-radius: 8px !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}
.dropdown-actions > .dropdown-menu > .dropdown-item i,
.dropdown-actions > .dropdown-menu > .btn i {
    font-size: 12px;
    margin-right: 2px;
}
.dropdown-actions > .dropdown-menu > .dropdown-item:hover,
.dropdown-actions > .dropdown-menu > .dropdown-item:focus,
.dropdown-actions > .dropdown-menu > .btn:hover,
.dropdown-actions > .dropdown-menu > .btn:focus {
    /* mesmo hover dos outros: fundo suave, nao inversao para escuro */
    color: var(--ui-primary) !important;
    background: var(--ui-surface-soft) !important;
    border-color: var(--ui-primary) !important;
}




/* MOBILE (<768px): telas de detalhe (.fieldInfo) -> label e valor na MESMA linha
   "Label | valor", economizando uma linha por item. Desktop fica como esta (grid). */
@media (max-width: 767.98px) {
    .fieldInfo {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        align-items: baseline;
        column-gap: .35rem;
        margin-bottom: .35rem;
    }
    .fieldInfo > strong { text-align: right; }
    .fieldInfo > strong::after {
        content: " |";
        font-weight: normal;
        color: #adb5bd;
        margin-left: .25rem;
    }
    .fieldInfo p:empty { display: none !important; }
    /* campo SEPARATOR (id vazio): esconde o label, mostra so o titulo h3 full width */
    .fieldInfo[id=""] { display: block !important; }
    .fieldInfo[id=""] > strong { display: none !important; }
    .fieldInfo[id=""] > strong::after { content: none !important; }
    /* separator com QUALQUER id (ex.: id="conjuge"): detecta pelo h3 do titulo */
    .fieldInfo:has(h3[id^="BoxCelulasDescricaoCampos_title_"]) { display: block !important; }
    .fieldInfo:has(h3[id^="BoxCelulasDescricaoCampos_title_"]) > strong { display: none !important; }
}


/* ============================================================
   ### Implementacao 26-08-02-listagem-mobile  (rodada 2 -- QA)
   LISTAGENS NO CELULAR: a BoxList deixou de gerar os "cards"
   (uma coluna "Dados" com rotulo+valor empilhados) e passou a
   render a MESMA tabela do desktop, que ja sai dentro de
   .table-responsive e rola na horizontal.

   ESCOPO: tudo abaixo esta preso a table#dataTable. As tabelas
   montadas a mao nos modulos (CRM, estoque) usam apenas a classe
   .dataTable e ficam de fora -- duas delas nem sequer estao
   dentro de .table-responsive, e herdar estas regras as quebraria.
   Ressalva medida pelo QA: DUAS telas manuais tambem usam
   id="dataTable" (lote_pagamento_autorizacao e
   liberar_unidades_distrato_v2). Elas herdam apenas font-size e
   padding -- sem !important, e as regras de sticky exigem
   .thAction/.tdAction, que elas nao tem. Impacto aceito.
   ============================================================ */
@media (max-width: 767.98px) {

    /* rolagem com inercia no iOS */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }

    /* densidade: cabe mais coluna na largura util.
       Sem !important -- o crm-leads.css tem regras proprias de padding
       para as tabelas dele e nao pode ser atropelado. */
    table#dataTable {
        font-size: 13px;
    }
    table#dataTable thead th,
    table#dataTable tbody td {
        padding: 0.45rem 0.5rem;
    }

    /* A COLUNA DE ACOES FICA FIXA.
       Sem isto, ao rolar para ver as ultimas colunas os icones de
       Selecionar/Editar saem da tela e o usuario perde a referencia da
       linha. O fundo precisa ser opaco e acompanhar o zebrado do tema
       (var(--ui-surface-alt), definido neste arquivo em .table-striped), senao o
       conteudo rolando por baixo aparece atraves da celula.

       :first-child e proposital -- quando ShowRegCounter esta ligado o
       contador e a 1a coluna e as acoes a 2a; grudar a 2a em left:0
       faria ela cobrir o contador. */
    table#dataTable thead th.thAction:first-child,
    table#dataTable tbody td.tdAction:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background-color: #fff;
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.06);
    }
    table#dataTable.table-striped tbody tr:nth-of-type(odd) td.tdAction:first-child {
        background-color: var(--ui-surface-alt);
    }
    table#dataTable thead th.thAction:first-child {
        z-index: 3;
    }

    /* os icones de acao ficam colados quando a celula encolhe */
    table#dataTable td.tdAction .btn.ajuste-icones {
        padding: 0.15rem 0.25rem;
    }

    /* NAO foi usado white-space:nowrap nem max-width+ellipsis: em tabela
       com layout automatico o max-width da <td> e ignorado (as reticencias
       nunca apareceriam) e o nowrap deixaria a tabela MAIS larga do que
       antes. A tela de Clientes, que e a referencia, quebra o texto em
       varias linhas -- e o comportamento que se mantem aqui. */
}


/* ============================================================
   ### Implementacao 26-08-03-menu2-dentro-do-card  (rodada 3)
   Botoes de acao da tela na MESMA LINHA do titulo, dentro do
   .card-header, alinhados a direita. A insercao e feita no
   index.php, no servidor, para nao haver "pulo" na tela.
   Ganha-se uma linha inteira em quase todas as telas.
   ============================================================ */
.gw-menu2-inline {
    /* o .card-header e flex; margin-left:auto joga o grupo para a direita
       sem precisar de justify-content, que quebraria o .text-center */
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}
/* Os botoes vem com margin inline do inc_menu2_internas.php
   (margin-right:12px; margin-bottom:1pc). Inline vence folha de estilo,
   entao aqui precisa de !important -- o espacamento passa a ser o gap. */
.gw-menu2-inline .btn {
    margin: 0 !important;
}
/* ============================================================
   ### Implementacao 26-08-04-menu2-grade-muitos-botoes
   Em tela com MUITOS botoes o flex-wrap deixa linhas irregulares: cada botao com
   a largura do proprio texto, e a ultima linha sobrando pela metade. No celular
   isso ja estava resolvido -- o menu vira .dropdown-actions, com 2 colunas fixas
   e reticencias. Aqui o desktop passa a fazer o mesmo, so que com quantas colunas
   couberem.

   A condicao e uma "quantity query": :has(> .btn:nth-child(5)) so casa quando existe
   um QUINTO botao. Medido na base (246 telas com menu 2): 193 tem 1 botao, 31 tem 2,
   7 tem 3 e 4 tem 4 -- essas 235 seguem no flex de sempre. Passam para a grade as
   11 telas com 5 ou mais (5, 7, 9, 10, 11, 17 e 31 botoes), 4% do total.

   O grid iguala a altura das celulas da linha, o que alinha de brinde os botoes
   coloridos (btn-danger/success), que tem padding diferente por nao passarem pela
   regra do .btn-outline-primary.

   ### Implementacao 26-08-04-menu2-grade-6-colunas
   ### Implementacao 26-08-04-menu2-grade-8-colunas (teste do usuario: 8 por linha)
   Sao colunas FIXAS, nao auto-fit: com auto-fit a quantidade mudava conforme a
   largura e o mesmo botao aparecia em posicao diferente a cada tela, que e o oposto
   de "ficar previsivel". O minmax(0, 1fr) e obrigatorio -- so com 1fr o conteudo
   define um piso de largura e a coluna estoura em vez de cortar o texto.

   Os degraus vem da largura UTIL, nao da janela: a barra lateral come ~305px e o
   card mais ~28px de padding. Numa janela de 1920 sobram ~1530px, que em 8 colunas
   com 8px de gap da ~184px por botao -- da para ler nome curto com icone, e o resto
   vira reticencias. Em 1400 a mesma conta daria ~125px, que nao serve para nada;
   por isso a contagem cai por faixa.

   Tentativa descartada (26-08-04): baixar o primeiro degrau de 1600 para 1280, para
   caber 8 colunas tambem no notebook. Em 1440 isso da ~131px por botao e os rotulos
   longos ("Enviar KIT Assinatura Digital", "Gerar Contrato Mega VIMOB") truncavam
   cedo demais para identificar o botao. Voltou para 1600.

   ### Implementacao 26-08-04-menu2-grade-alinha-direita
   As colunas eram 8 x 1fr: 1fr divide TODO o espaco entre as colunas, entao com 5
   botoes eles ficavam esticados e grudados na esquerda, com o vazio sobrando a
   direita (tela de Detalhes do Cliente). Nao adianta pedir alinhamento nesse
   arranjo -- nao ha folga para alinhar, as colunas ja ocuparam tudo.
   A troca: auto-fit + largura MAXIMA por coluna. O auto-fit COLAPSA as colunas
   vazias (e por isso que ele existe), a coluna para de crescer em 180px e sobra
   folga -- e ai o justify-content: end encosta o grupo na direita, como no flex
   de antes. Os degraus por media query saem: com auto-fit a contagem de colunas
   cai sozinha conforme a largura, sem numero cravado.
   ============================================================ */
.gw-menu2-inline:has(> .btn:nth-child(5)) {
    width: 100%;
    margin-left: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 180px));
    justify-content: end;
    gap: 8px;
}
.gw-menu2-inline:has(> .btn:nth-child(5)) > .btn {
    width: 100%;
    min-width: 0;
    text-align: center;
    /* o botao e item de grid, entao ja e "block": as tres linhas abaixo bastam
       para o texto longo virar reticencias em vez de esticar a coluna. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* com muitos botoes o cabecalho quebra em vez de estourar a largura */
.card-header {
    flex-wrap: wrap;
    row-gap: 8px;
}

@media (max-width: 767.98px) {
    /* no celular os botoes descem para a linha de baixo, ocupando a largura */
    .gw-menu2-inline {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
    }
    .gw-menu2-inline .btn {
        flex: 1 1 auto;
    }
    /* o menu 2 do mobile vira .dropdown-actions (inc_menu2_internas.php:45) */
    .gw-menu2-inline .dropdown-actions {
        width: 100% !important;
    }
}

/* ============================================================
   ### Implementacao 26-08-03-form-compacto-framework
   CAMPOS DO FORMULARIO no mesmo desenho da tela do lead
   (.crm-perfil-label / .crm-perfil-valor, crm-leads.css:340 e :341).
   Vale para TODO formulario do framework: a BoxForm sempre emite
   <label id="label_..."> + <br> + .form-control.
   ============================================================ */

/* ROTULO: pequeno, maiusculo, discreto -- como no CRM.
   O !important e necessario porque existe um "label { margin: .5rem !important }"
   generico mais acima neste mesmo arquivo. */
.form-group > label,
.form-group > label[id^="label_"] {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: #7A869A;
    text-transform: uppercase;
    letter-spacing: .4px;
    line-height: 14px;
    margin: 0 0 4px !important;
}

/* A BoxForm emite <label>...</label><br><input>. Com o rotulo em display:block,
   esse <br> vira uma linha vazia extra -- e a maior fonte de "ar" do formulario.
   ### Implementacao 26-08-03-form-compacto-framework (rodada 2 -- QA C1)
   O seletor precisa ser "label + br": so o <br> que vem LOGO APOS o rotulo.
   Escondendo todo <br> filho de .form-group, os radios VERTICAIS (que usam <br>
   como separador de opcao -- box2.form.controls.class.php:768) viravam uma linha
   so. Atingia as 54 telas de relatorio (PDF/Excel/Word/HTML em Tipo_Relatorio). */
.form-group > label + br {
    display: none;
}

/* CAMPO
   O :not(.btn) e essencial: 28 arquivos do sistema usam .form-control JUNTO com
   .btn (o "Adicionar" do Interesse no Empreendimento, o "Remover" das listas de
   promitentes, etc.). Sem a excecao, esses BOTOES herdavam fundo, borda, altura
   e o padding-right da bolinha de limpar -- viravam campos de texto com cara
   errada, e em coluna estreita o rotulo quebrava letra a letra. */
.form-control:not(.btn) {
    font-size: 13.5px;
    color: var(--ui-primary);
    background-color: var(--ui-surface-soft);
    border: 1px solid var(--ui-border);
    border-radius: 7px;
    padding: 7px 10px;
    height: auto;
    min-height: 36px;
    line-height: 20px;
}
.form-control:not(.btn):focus {
    background-color: #FFFFFF;
    border-color: var(--ui-border-strong);
    box-shadow: none;
}
textarea.form-control {
    min-height: 64px;
    line-height: 18px;
}

/* SELECT2 na MESMA altura do input. Sem isto os selects (que o select2 troca por
   spans proprios, 28px de altura no CSS do CDN) ficariam mais baixos que os campos
   ao lado -- o desalinhamento mais visivel de todo o formulario. */
.select2-container--default .select2-selection--single {
    height: 36px;
    background-color: var(--ui-surface-soft);
    border: 1px solid var(--ui-border);
    border-radius: 7px;
}
/* ### Implementacao 26-08-04-select2-linha-28
   line-height 28px, nao 34. Eu tinha igualado a line-height a caixa de conteudo
   (36 - 2 de borda), o que so daria centro se o <span> do texto comecasse colado na
   borda -- mas o select2 poe o proprio padding vertical no .selection--single antes
   dele. Com 34 a linha ficava maior que o espaco que sobra e empurrava o texto para
   cima; 28 e o valor conferido no navegador pelo usuario.
   Este e o campo que a tela do relatorio usa (select2), e nao o <select> nativo --
   por isso o ajuste anterior, feito no nativo, nao mudou nada aqui. */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 28px;
    font-size: 13.5px;
    color: var(--ui-primary);
    padding-left: 10px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 34px;
}
/* ### rodada 2 (QA): o multiplo tambem, senao fica com a altura antiga ao lado
   dos campos novos. min-height (e nao height) porque ele cresce com as tags. */
.select2-container--default .select2-selection--multiple {
    min-height: 36px;
    background-color: var(--ui-surface-soft);
    border: 1px solid var(--ui-border);
    border-radius: 7px;
}

/* ### Implementacao 26-08-03-switch-sem-uppercase (pendencia do QA anterior)
   O switch e um <label> irmao do input dentro do .form-group, e o texto dele vem de
   content: attr(data-off-label) no ::before -- ou seja, HERDA o text-transform do
   label. Com o uppercase novo, "Sim"/"Nao" viravam "SIM"/"NAO". Mesma especificidade
   de .form-group > label (0,1,1), e esta regra vem depois: nao precisa !important. */
input[data-switch] + label {
    text-transform: none;
    letter-spacing: normal;
}

/* DENSIDADE VERTICAL: e o que da a impressao de formulario menor. */
.form-group {
    margin-bottom: 10px;
}
.card-body > div {
    margin-bottom: 4px;
}



/* Campos apenas de leitura que a BoxForm renderiza como texto (<span
   class="BoxCelulasCampos">) -- alinha a altura com os campos editaveis.
   ### Implementacao 26-08-03-boxcelulas-block (correcao)
   Era "inline-block", e isso QUEBROU as telas em que esse span embrulha um
   layout inteiro -- o "Interesse no Empreendimento" do cliente e o caso: o
   span passava a encolher ate o conteudo, as colunas .col-md-* dentro dele
   colapsavam e o texto quebrava letra a letra. Com "block" o span ocupa a
   linha toda e o grid interno volta a funcionar.

   ### Implementacao 26-08-03-boxcelulas-so-span (correcao de bloqueante do QA)
   Escopado para SPAN. A classe tambem esta em 589 <td> de 77 arquivos (o campo de
   upload de qualquer BoxForm em box2.form.controls.class.php:533, a BoxFile inteira,
   o index_config_tela, retornos de boleto, fornecedores...). Um <td> com display:block
   deixa de ser celula: os blocos seguidos de um <tr> viram uma celula anonima so e a
   linha empilha em coluna. O alvo sempre foi o <span> de campo somente-leitura
   (box2.form.controls.class.php:646) -- so existem 5 spans desses no codigo, contra os
   589 <td>, entao o seletor de classe solto estava errado por duas ordens de grandeza. */
span.BoxCelulasCampos {
    display: block;
    font-size: 13.5px;
    color: var(--ui-primary);
    padding: 7px 0;
    line-height: 20px;
}


/* ============================================================
   ### Implementacao 26-08-03-limpar-campo-bolinha
   LIMPAR CAMPO: a borracha ao LADO do input vira uma bolinha
   discreta com "x", centralizada DENTRO do campo, a direita.

   O HTML nao muda: o framework emite
   <input class="form-control"><i class="iconInside fas fa-eraser" onclick="...">
   e o glyph do FontAwesome e desenhado no ::before -- entao trocar
   o content troca o desenho, sem mexer na classe nem no PHP.
   ============================================================ */

/* O <i> e irmao do input, dentro do .form-group -- e o form-group que
   vira a referencia de posicionamento. Colunas do Bootstrap sao estaticas,
   entao torna-las relativas nao mexe no grid. */
.form-group {
    position: relative;
}

i.iconInside.fas.fa-eraser {
    position: absolute;
    /* Valores conferidos no navegador. A conta por tras deles:
       RIGHT 20px = 15px de padding-right da coluna do Bootstrap (a borda direita
       do input fica 15px para dentro do .form-group) + 5px de folga dentro do campo.
       TOP  27px = 18px do rotulo (14px de linha + 4px de margem) + 9px, que e
       metade da sobra do input ((36 - 18) / 2) -- ou seja, o centro vertical dele.
       Ancorar pelo TOPO e nao pelo rodape porque entre o input e o </div> ha um
       no de texto (a quebra de linha do HTML gerado), que cria uma caixa de linha
       extra no fim do .form-group e joga qualquer "bottom" para baixo do campo. */
    right: 20px;
    top: 27px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #EAEEF3;
    color: #A7B0BC;
    font-size: 9px;
    line-height: 18px;
    text-align: center;
    padding: 0;
    cursor: pointer;
    transition: background .15s, color .15s;
}
/* \f00d = fa-times (o "x"). Substitui o glyph da borracha (\f12d). */
i.iconInside.fas.fa-eraser::before {
    content: "\f00d";
}
i.iconInside.fas.fa-eraser:hover {
    background: #DDE3EA;
    color: #5B6572;
}

/* espaco a direita para o texto do campo nao passar por baixo da bolinha
   -- de novo, so em campo de verdade, nunca em botao. */
.form-control:not(.btn) {
    padding-right: 32px;
}


/* ============================================================
   ### Implementacao 26-08-03-botao-form-control
   BOTOES QUE CARREGAM .form-control JUNTO COM .btn
   ("+ Adicionar", "Remover" das listas dinamicas). Sao 56 no
   sistema: 30 .btn-primary e 26 .btn-danger, em 28 arquivos.

   Eles herdavam do Bootstrap o display:block + width:100% do
   .form-control -- por isso esticavam pela coluna inteira e nao
   pareciam botao. Aqui ganham a MESMA forma do SALVAR
   (#form_button_submit); a cor continua dizendo o que a acao faz:
   escuro para adicionar, vermelho para remover.
   ============================================================ */
.form-control.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    height: auto;
    min-height: 0;
    /* !important vence as utilitarias do Bootstrap que vem no proprio
       elemento (pt-2, p-2), que sao !important por definicao e deixariam
       o texto fora do centro vertical. */
    padding: 10px 22px !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 8px;
    white-space: nowrap;
}

/* "+ Adicionar" = identico ao SALVAR */
.form-control.btn.btn-primary {
    background-color: var(--ui-primary);
    border-color: var(--ui-primary);
    color: #FFFFFF;
}
.form-control.btn.btn-primary:hover {
    background-color: var(--ui-primary-dark);
    border-color: var(--ui-primary-dark);
    color: #FFFFFF;
    box-shadow: none;
}

/* "Remover" segue vermelho -- e acao destrutiva, a cor tem funcao */
.form-control.btn.btn-danger:hover {
    box-shadow: none;
}


/* ============================================================
   ### Implementacao 26-08-03-espaco-blocos-info
   Blocos de informacao (.alert) dentro do card estavam COLADOS
   no que vem antes e depois.

   Causa 1 -- ".alert { margin-bottom: 0px }" (regra global antiga,
   no bloco "Ajustes de espacamentos"): zera a margem que o
   Bootstrap da ao alert. Somada aos 4px do .card-body > div, o
   bloco azul encostava na barra de botoes e na tabela.

   Causa 2 -- no celular o bloco escapava para fora do padding do
   card: ele fica dentro de um .row, e .row tem margem NEGATIVA de
   15px (o gutter do Bootstrap). Como as colunas ja estao com
   padding 0 no mobile, essa margem negativa nao tem contraparte e
   so serve para furar o padding de 14px do .card-body.
   ============================================================ */
.card .alert {
    margin-top: 8px;
    margin-bottom: 12px;
}

@media (max-width: 767.98px) {
    /* ### rodada 2: era ".card-body > .row" (filha direta) e nao alcancava os
       blocos que estao um nivel abaixo -- por isso a barra azul continuava
       encostando na borda direita. Agora vale para qualquer .row dentro do card.
       E seguro no celular: as .col-* ja estao com padding 0 (regra antiga deste
       arquivo), entao a margem negativa de 15px do .row nao tem contraparte
       nenhuma -- ela so serve para furar o padding do .card-body. */
    .card .row {
        margin-left: 0;
        margin-right: 0;
    }
}


/* ============================================================
   ### Implementacao 26-08-03-info-lado-a-lado
   BARRAS DE INFORMACAO no celular: os itens ficam lado a lado,
   cada um com a largura do proprio conteudo.

   O padrao no sistema e <div class="col-12 col-md-auto"> -- 196
   ocorrencias em 60 arquivos. O "col-md-auto" ja diz a intencao:
   largura do conteudo. So que abaixo de md o "col-12" assume e
   cada item gasta uma linha inteira (5 linhas na tela de reserva).
   Aqui o comportamento "auto" passa a valer tambem no celular,
   sem tocar em nenhum snippet.

   Escopado em .card-body e no proprio col-md-auto: nenhuma outra
   coluna do sistema e afetada.
   ============================================================ */
@media (max-width: 767.98px) {
    .card [class*="col-md-auto"] {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
        padding-left: 7px;
        padding-right: 7px;
    }
    /* a linha que contem esses itens centraliza e ganha respiro entre
       as duas ou tres faixas que sobram */
    .card .row:has(> [class*="col-md-auto"]) {
        justify-content: center;
        row-gap: 4px;
    }
}


/* ============================================================
   ### Implementacao 26-08-03-bloco-descricao
   O BLOCO DE INFORMACAO (a barra azul com Empreendimento /
   Unidade / Matricula / Area / Valor) NAO fica dentro do
   .card-body -- por isso as regras escopadas nele nao pegavam.

   O framework o renderiza ENTRE o cabecalho e o corpo
   (box2.list.class.php:673-679):

     <div class="card">
       <div class="card-header">...</div>
       <div class="form-group col-lg-12 col-md-12 col-sm-12">   <- aqui
           <div class="{DescricaoClass}"> ...row com col-md-auto... </div>
       </div>
       <div class="card-body">...</div>
     </div>

   O conteudo vem de ATVAtividade.ATVDescricao (6 telas usam).
   Como o wrapper e uma .col-*, ele herda o "padding: 0" que a
   regra antiga aplica a todas as colunas no celular -- e por isso
   encostava nas bordas.
   ============================================================ */
.card > .form-group.col-lg-12.col-md-12.col-sm-12 {
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 4px;
}
@media (max-width: 767.98px) {
    .card > .form-group.col-lg-12.col-md-12.col-sm-12 {
        padding-left: 14px;
        padding-right: 14px;
        padding-top: 10px;
    }
}


/* ============================================================
   ### Implementacao 26-08-03-campo-leitura-inline  (rodada 2)
   CAMPO SOMENTE-LEITURA no formulario exibe "Rotulo | valor" na
   mesma linha -- mesmo desenho da tela de Detalhes do Cliente.

   Como distinguir sem tocar em PHP: a BoxForm renderiza o campo de
   leitura como <span class="BoxCelulasCampos"> no lugar do <input>.

   DUAS correcoes desta rodada:

   1) O PIPE FICA SEMPRE NA MESMA POSICAO. Na 1a tentativa o rotulo
      tinha largura automatica, entao cada linha punha o separador
      num lugar -- ficava tudo desalinhado. Agora rotulo e valor
      ocupam 50% cada e o separador e a BORDA DIREITA do rotulo:
      por construcao ele cai sempre no meio, em todas as linhas.

   2) CAMPO QUE E UM BLOCO nao entra nessa regra. Quando o conteudo
      do BoxCelulasCampos e uma <div> -- avisos, grids, a barra de
      "Interesse no Empreendimento" --, o rotulo vem VAZIO e o
      resultado era um pipe orfao flutuando acima do bloco. O
      :not(:has(...)) tira esses casos da regra, e o rotulo vazio
      deles some.

   ### Implementacao 26-08-04-campo-leitura-bloco-generico
   A guarda olhava so para "> div", e um campo do tipo 'label' pode
   trazer QUALQUER html dentro do span (box2.form.controls:646).
   No "Enviar KIT de Documentos" o conteudo e uma <table> inteira: o
   rotulo "Quadro Resumo da Proposta" tomava 50% e a tabela ficava
   espremida na outra metade, com as colunas quebrando letra a letra.
   Agora a guarda cobre qualquer elemento de BLOCO, em qualquer nivel
   (descendente, nao filho direto): div, table, ul, ol, dl, form,
   fieldset, section, article, iframe, hr, p e h1-h6.
   Ficaram DE FORA de proposito <br>, <img>, <span>, <strong> e afins:
   sao inline e aparecem em valor de texto normal -- exclui-los levaria
   junto os campos que a regra existe para arrumar.

   ### Implementacao 26-08-04-campo-leitura-so-largura-cheia
   A regra passou a exigir .col-md-12, ou seja, so vale em campo que
   ocupa a LINHA INTEIRA. O BoxForm monta cada campo como
   "form-group col-lg-N col-md-N col-sm-N" (box2.form.class:690), e em
   coluna estreita o 50/50 nao tem espaco: na Analise de Credito o
   Data Limite esta em col-md-2, entao o rotulo comia metade de 1/6 da
   tela e a data quebrava no meio ("11/08/202" / "6").
   Em coluna estreita o campo volta ao empilhado normal (rotulo em cima,
   valor embaixo), que e o que o resto do formulario ja faz.
   ============================================================ */
.form-group.col-md-12:has(> .BoxCelulasCampos):not(:has(> .BoxCelulasCampos :is(div, table, ul, ol, dl, form, fieldset, section, article, iframe, hr, p, h1, h2, h3, h4, h5, h6))) {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
}
.form-group.col-md-12:has(> .BoxCelulasCampos):not(:has(> .BoxCelulasCampos :is(div, table, ul, ol, dl, form, fieldset, section, article, iframe, hr, p, h1, h2, h3, h4, h5, h6))) > label {
    flex: 0 0 50%;
    max-width: 50%;
    margin: 0 !important;
    display: block;
    text-align: right;
    padding-right: 10px;
    /* o separador: sempre a 50% da largura, em toda linha */
    border-right: 1px solid var(--ui-border-strong);
    align-self: stretch;
}
.form-group.col-md-12:has(> .BoxCelulasCampos):not(:has(> .BoxCelulasCampos :is(div, table, ul, ol, dl, form, fieldset, section, article, iframe, hr, p, h1, h2, h3, h4, h5, h6))) > .BoxCelulasCampos {
    flex: 1 1 50%;
    min-width: 0;
    padding: 0 0 0 10px;
    font-weight: 600;
    word-break: break-word;
}

/* campo cujo conteudo e um bloco: sem rotulo vazio, sem pipe, layout normal */
.form-group:has(> .BoxCelulasCampos > div) > label {
    display: none;
}


/* ============================================================
   ### Implementacao 26-08-03-campo-data-estoura
   CAMPO DE DATA estourava a largura no celular.

   Duas causas somadas:
   1) input[type=date] no iOS tem LARGURA INTRINSECA (o controle
      nativo nao encolhe abaixo do texto "31 de ago. de 2022"), e
      com width:100% + box-sizing:border-box ele empurra a borda
      direita para fora do card em vez de comprimir;
   2) o padding-right de 32px que reservei para a bolinha de
      limpar -- que o campo de data NAO tem (o framework nao emite
      o .iconInside em input[type=date]) -- roubava mais 32px do
      espaco util, agravando o item 1.

   O appearance:none tira a largura intrinseca do controle nativo
   sem perder o seletor de data do sistema operacional.
   ============================================================ */
input.form-control[type="date"],
input.form-control[type="datetime-local"],
input.form-control[type="time"],
input.form-control[type="month"] {
    /* a ordem importa: o iOS so respeita width/max-width em input de data
       DEPOIS que o appearance nativo e desligado */
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-right: 10px;
    text-align: left;
}
/* o botao de calendario nativo do WebKit tambem carrega largura propria */
input.form-control[type="date"]::-webkit-calendar-picker-indicator,
input.form-control[type="datetime-local"]::-webkit-calendar-picker-indicator,
input.form-control[type="time"]::-webkit-calendar-picker-indicator {
    margin-left: 0;
    padding: 0;
}
/* no iOS o valor vazio ainda reserva o espaco de "dd/mm/yyyy" no campo interno */
input.form-control[type="date"]::-webkit-date-and-time-value {
    text-align: left;
    margin: 0;
}


/* ============================================================
   ### Implementacao 26-08-03-card-filhos-radius
   CARDS com filho de fundo proprio ficavam com canto reto.

   O .card tem raio 16px, mas quando o primeiro (ou o ultimo)
   filho pinta o proprio fundo -- o cabecalho escuro do Painel de
   Configuracoes, por exemplo, que e um .card-body com
   background-color inline --, esse fundo quadrado cobre o canto
   arredondado do card.

   E padrao no sistema: 12 dos 35 templates de
   templates/custom/ montam card assim.

   A saida NAO e "overflow: hidden" no .card: isso recortaria
   qualquer coisa que precise transbordar (dropdown dentro do
   card, por exemplo). Em vez disso, o primeiro e o ultimo filho
   herdam o raio do card -- e a mesma tecnica que o proprio
   Bootstrap usa em ".card > :first-child".
   ============================================================ */
.card > *:first-child {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
.card > *:last-child {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}
/* o <form> da BoxForm e um filho "invisivel" que envolve o conteudo --
   quem pinta e o filho dele */
.card > form > *:first-child {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
.card > form > *:last-child {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

/* ============================================================
   ### ESGTS-29 :: LISTAGEM MODERNIZADA (secao 5.1/5.3 da SPEC)

   Tres pecas que o GW ainda nao tinha e que as fases seguintes
   exigem: o painel do seletor de colunas (ColVis), os badges de
   status e o acabamento do cabecalho da tabela no desktop.

   ESCOPO: os :not() repetem os do bloco 26-07-31 acima -- as
   tabelas do CRM (.crm-gest-tab / .crm-lista-tab) tem estilo
   proprio em crm-leads.css e nao podem ser atropeladas aqui.
   ============================================================ */

/* --- Cabecalho e linhas da listagem (desktop) --------------- */
@media (min-width: 992px) {
    table.dataTable:not(.crm-gest-tab):not(.crm-lista-tab) > thead > tr > th {
        border-top: 0;
        border-bottom: 2px solid var(--ui-border);
        color: var(--ui-primary);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .03em;
    }
    table.dataTable:not(.crm-gest-tab):not(.crm-lista-tab) > tbody > tr > td {
        border-top: 0;
        border-bottom: 1px solid var(--ui-border);
        vertical-align: middle;
        /* ### ESGTS-29 (rodada 12) :: as celulas ficavam em 16px -- maiores que o
           proprio cabecalho da tabela (0,8rem = 12,8px), o que invertia a
           hierarquia e fazia a listagem ocupar mais linhas do que precisa.
           13px alinha com o cabecalho e com os campos do formulario. No celular
           ja eram 13px (bloco 26-08-02); isto acerta o desktop. */
        font-size: 13px;
        padding: .45rem .7rem;
    }
    /* hover discreto: destaca a linha sem competir com o zebrado */
    table.dataTable:not(.crm-gest-tab):not(.crm-lista-tab) > tbody > tr:hover {
        background-color: var(--ui-surface-alt);
        transition: background-color .12s ease;
    }
    table.dataTable:not(.crm-gest-tab):not(.crm-lista-tab) > tbody > tr:last-child > td {
        border-bottom: 0;
    }
}

/* --- Status como badge (alimentado por colorizeStatus, fase 4) ---
   O Box2 emite o status como texto puro dentro da <td> (ver
   box2.list.class.php). O JS envolve esse texto num <span> com
   .cell-badge + a classe semantica; se o JS nao rodar, a celula
   continua legivel como texto -- por isso nenhuma regra aqui
   depende de cor de fundo para o texto aparecer. */
.cell-badge {
    display: inline-block;
    padding: .25em .6em;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}
.cell-badge.cb-success { background: rgba(40, 167, 69, .12);  color: #1E7E34; }
.cell-badge.cb-warning { background: rgba(245, 158, 11, .15); color: #94620A; }
.cell-badge.cb-danger  { background: rgba(250, 92, 124, .15); color: #A61B33; }
.cell-badge.cb-info    { background: rgba(59, 130, 246, .12); color: #1D4ED8; }
.cell-badge.cb-neutral { background: var(--ui-surface-alt);   color: var(--ui-text-soft); }

/* --- Barra de botoes do DataTables (busca + export + Colunas) --- */
.dataTables_wrapper .dt-buttons { float: none; }
.dataTables_wrapper .dt-buttons .dt-button { border-radius: var(--ui-radius-sm); }

/* --- Painel do seletor de colunas (ColVis) ------------------

   ### ESGTS-29 (rodada 13) :: reescrito. A versao anterior mirava
   ".dt-button-collection .dt-button" e NUNCA casou com nada: a
   integracao Bootstrap do DataTables (dataTables.bootstrap4.js)
   troca a classe padrao "dt-button" por "btn", entao os itens saem
   como <button class="btn btn-outline-primary buttons-columnVisibility">
   dentro de um <div role="menu">.

   Sem regra valendo, cada coluna virava um botao "outline-primary"
   solto -- chips escuros de texto cinza, lado a lado, quebrando
   linha. Medido: fundo #313A46, texto #6c757d (contraste ruim),
   display inline-flex, 66px de largura.

   Agora e uma LISTA de verdade, uma coluna por linha, com caixa de
   selecao a esquerda: cheia e verde quando a coluna esta visivel,
   vazia quando escondida. O alvo dos seletores e a classe
   ".buttons-columnVisibility", que e do proprio ColVis e nao muda
   com a integracao. */
/* "div." de proposito: o buttons.dataTables.min.css define
   "div.dt-button-collection" (0,1,1) com borda rgba(0,0,0,.4) e padding
   proprios. Sem o "div." aqui, a regra dele vencia por especificidade e o
   painel ficava com aquela borda dura. */
div.dt-button-collection {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    box-shadow: var(--ui-shadow-lg);
    padding: .3rem;
    min-width: 210px;
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 2002;
}
/* o wrapper que o Buttons 2.x cria entre o painel e os itens */
div.dt-button-collection > [role="menu"] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
div.dt-button-collection .buttons-columnVisibility {
    display: flex !important;
    align-items: center;
    gap: 9px;
    width: 100%;
    margin: 0 !important;
    padding: .4rem .55rem !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 7px;
    color: var(--ui-text) !important;
    font-size: 13px !important;
    font-weight: 500;
    text-align: left;
    white-space: normal;
    box-shadow: none !important;
}
/* caixa de selecao: vazia por padrao */
div.dt-button-collection .buttons-columnVisibility::before {
    content: "";
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--ui-border-strong);
    border-radius: 5px;
    background: var(--ui-surface);
    color: transparent;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    transition: background-color .12s ease, border-color .12s ease;
}
/* coluna VISIVEL: caixa cheia com o "v" de selecao (escape CSS de U+2713) */
div.dt-button-collection .buttons-columnVisibility.active::before {
    content: "\2713";
    background: var(--ui-accent);
    border-color: var(--ui-accent);
    color: #fff;
}
div.dt-button-collection .buttons-columnVisibility:hover,
div.dt-button-collection .buttons-columnVisibility:focus {
    background: var(--ui-surface-alt) !important;
    color: var(--ui-primary) !important;
}
/* coluna escondida: o rotulo fica mais fraco, para a lista se ler de relance */
div.dt-button-collection .buttons-columnVisibility:not(.active) {
    color: var(--ui-text-soft) !important;
}
/* o overlay preto do DataTables tapava o card inteiro; transparente
   mantem o clique-fora funcionando sem escurecer a tela. */
div.dt-button-background { background: transparent !important; }

/* ============================================================
   ### ESGTS-29 (rodada 4) :: BARRA DO TOPO -- desenho aprovado

   Reescreve o CSS da rodada 3 para o desenho que o desenvolvedor
   aprovou (referencia enviada por ele em 18/08/2026).

   A ESTRUTURA nao mudou -- ela ja era a pedida: duas faixas, com
   os modulos na de BAIXO, em largura total. O que mudou foi o
   acabamento:

     - as duas faixas viram UM bloco escuro continuo e arredondado
       (na rodada 3 a de baixo era clara);
     - fundo mais fechado (--ui-topbar) que o --ui-primary das
       demais superficies escuras;
     - modulo da tela atual: rotulo branco e o ICONE num chip
       verde arredondado -- e a marca de "voce esta aqui";
     - Wiki como pilula discreta, Suporte como pilula verde;
     - sino com contador verde; avatar verde com as iniciais.

   A BUSCA continua oculta (decisao de 18/08/2026, mantida na
   referencia): ver a regra de li#menu-pesquisa mais abaixo.
   ============================================================ */

/* ### ESGTS-29 (rodada 8) :: DESFAZ DUAS REGRAS DO style.css DENTRO DA BARRA.

   Medido com Chromium headless sobre a pilha real de folhas: as duas faixas
   estavam com "display: block", nao flex. A causa esta no style.css, que carrega
   antes daqui mas usa !important:

       .navbar     { display: inherit !important; }
       .navbar-nav { float: right; }

   O "display: inherit" transforma o .navbar em block (herda do pai), e o layout
   da faixa 1 so parecia certo por ACIDENTE: o "float: right" jogava a <ul> dos
   atalhos para a direita, na mesma linha da marca (que e inline-block). Ou seja,
   a barra dependia de um float para nao empilhar -- e qualquer mexida em
   .navbar-nav derrubaria isso.

   Aqui as duas faixas voltam a ser flex de verdade e o float e anulado DENTRO da
   barra. Fora dela o style.css continua valendo como sempre: as regras abaixo sao
   todas escopadas em .gw-topbar-wrap. */
.gw-topbar-wrap .navbar {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
}
.gw-topbar-wrap .navbar-nav {
    float: none;
}

/* --- O bloco (as duas faixas) -------------------------------- */
.gw-topbar-wrap {
    z-index: 1030;
    background-color: var(--ui-topbar);
}
@media (min-width: 992px) {
    /* flutuante, descolado das bordas, como na referencia */
    .gw-topbar-wrap {
        margin: .75rem 1rem 0;
        border-radius: 18px;
        top: .75rem;
        box-shadow: 0 .5rem 1.5rem rgba(16, 24, 40, .18);
    }
}

/* --- FAIXA 1: identidade + atalhos --------------------------- */
.gw-topbar-wrap .bd-navbar {
    padding: .55rem 1.1rem;
    min-height: 62px;
    flex-wrap: nowrap;
    background-color: transparent !important;
    border: 0;
    margin: 0;
}
.gw-topbar-wrap .navbar-brand {
    padding: 0;
    margin: 0 1rem 0 0;
    flex: 0 0 auto;
}
.gw-topbar-wrap .navbar-brand img {
    max-height: 30px !important;
    max-width: 130px;
    width: auto;
}
.gw-topbar-wrap .navbar-toggler {
    border: 0;
    padding: .3rem .5rem;
    outline: 0;
    flex: 0 0 auto;
    margin-left: .6rem;
}
@media (min-width: 992px) {
    .gw-topbar-wrap .gw-mod-toggler { display: none; }
}

/* --- Atalhos ------------------------------------------------- */
.gw-topbar-wrap .gw-utils {
    flex: 0 0 auto;
    gap: 8px;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
}
.gw-topbar-wrap .gw-utils > li { display: flex; align-items: center; }

/* BUSCA DE ATIVIDADES -- OCULTA (decisao do desenvolvedor, 18/08/2026;
   confirmada na referencia da rodada 4). Escondida por id e com !important
   porque uma regra generica de .gw-utils > li ja a reexibiu sem querer uma
   vez. Para REATIVAR: apague este bloco -- o <li id="menu-pesquisa"> segue
   no inc_template_internas.html e o %SEARCH_ATV% segue sendo montado pelo
   index.php. Lembre que o select2 dela ocupa ~200px na faixa 1. */
.gw-topbar-wrap li#menu-pesquisa,
li.nav-item.searchItem {
    display: none !important;
}

/* MENU DE CONFIGURACAO DE TELA "CUSTOM" -- OCULTO (decisao do desenvolvedor,
   18/08/2026). Sobra so o #menu-api, que e o mais completo: ele tem Parametros
   GET, Variaveis e Configurar Tela, enquanto o #menu-custom so tinha Configurar
   Tela -- dois icones quase iguais na barra, um deles com um item so.

   ATENCAO ao reativar ou ao mexer nisto: os dois NAO abrem a mesma tela.
     #menu-api    -> index_config_tela.php        (configuracao BASE: BFI/BFY/BFT)
     #menu-custom -> index_config_tela_custom.php (overlay BF*Custom, que e a
                     personalizacao POR INSTALACAO de cliente)
   Ou seja, o que saiu da barra foi o atalho para a configuracao Custom. A tela
   continua existindo e acessivel pela URL; o que sumiu e o botao.

   Ambos so aparecem para o grupo 1 (dev) -- ver $html_api_dev no index.php --,
   entao isto nao muda nada para usuario comum. */
.gw-topbar-wrap li#menu-custom {
    display: none !important;
}

/* o logo "Gestao Web.net" vinha com height=40 no atributo do <img> */
.gw-topbar-wrap li#menu-logo-inverse img {
    height: 22px !important;
    width: auto;
}
@media (max-width: 1199.98px) {
    .gw-topbar-wrap li#menu-logo-inverse { display: none; }
}

/* botao de icone: sino e os menus de dev (%DEV_API%) */
.gw-topbar-wrap .gw-util-icon,
.gw-topbar-wrap .gw-utils .nav-link.dropdown-toggle.btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* ### ESGTS-29 (rodada 7) :: alinhado aos 28px que o .gw-util-btn passou a ter.
       Ficavam 38x38 ao lado de pilulas de 28 -- o sino sobrava para cima e para
       baixo na mesma fileira. */
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 8px;
    color: rgba(255, 255, 255, .70);
    font-size: 15px;
    transition: background-color .12s ease, color .12s ease;
}
.gw-topbar-wrap .gw-util-icon:hover,
.gw-topbar-wrap .gw-utils .nav-link.dropdown-toggle.btn:hover {
    background-color: var(--ui-topbar-hover);
    color: #fff;
    text-decoration: none;
}
.gw-topbar-wrap .gw-utils .nav-link.dropdown-toggle.btn::after { display: none; }
/* o icone do sino vem do %NOTIFICACAO% (index.php) com font-size:26px INLINE --
   style inline vence folha de estilo, entao aqui precisa de !important, senao o
   sino fica maior que todos os outros botoes da barra. */
.gw-topbar-wrap .gw-util-icon > i { font-size: 15px !important; }
/* contador de notificacoes: bolinha verde no canto do sino */
.gw-topbar-wrap .gw-util-icon .badge {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 17px;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background-color: var(--ui-topbar-verde) !important;
    border: 2px solid var(--ui-topbar);
    border-radius: 999px;
    line-height: 1;
}

/* Wiki (pilula discreta) e Suporte (pilula verde) */
.gw-topbar-wrap .gw-util-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 28px;
    padding: 0 .5rem;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, .88);
    background-color: rgba(255, 255, 255, .08);
    white-space: nowrap;
    transition: background-color .12s ease, color .12s ease;
}
.gw-topbar-wrap .gw-util-btn > i { font-size: 14px; }
.gw-topbar-wrap .gw-util-btn:hover {
    background-color: rgba(255, 255, 255, .15);
    color: #fff;
    text-decoration: none;
}
.gw-topbar-wrap .gw-util-suporte {
    background-color: var(--ui-topbar-verde);
    color: #fff;
}
.gw-topbar-wrap .gw-util-suporte:hover {
    background-color: var(--ui-topbar-verde);
    filter: brightness(1.08);
    color: #fff;
}
@media (max-width: 1199.98px) {
    .gw-topbar-wrap .gw-util-txt { display: none; }
    /* ### ESGTS-29 (rodada 7) :: era 38px, largura da epoca em que o botao tinha
       38 de altura. Com a altura em 28 (ajuste manual do desenvolvedor) o botao
       so-icone virava um retangulo 38x28; agora volta a ser quadrado. */
    .gw-topbar-wrap .gw-util-btn { width: 28px; padding: 0; justify-content: center; }
}

/* --- Usuario ------------------------------------------------- */
.gw-topbar-wrap .gw-user-chip {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 40px;
    padding: 0 .6rem 0 .25rem;
    border-radius: 999px;
    color: #fff;
    transition: background-color .12s ease;
}
.gw-topbar-wrap .gw-user-chip:hover,
.gw-topbar-wrap .gw-user.show .gw-user-chip {
    background-color: var(--ui-topbar-hover);
    text-decoration: none;
}
.gw-topbar-wrap .gw-user-chip.dropdown-toggle::after { display: none; }
.gw-topbar-wrap .gw-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    background-color: var(--ui-topbar-verde);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}
.gw-topbar-wrap .gw-user-nome {
    font-size: 13.5px;
    font-weight: 600;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gw-topbar-wrap .gw-user-caret { font-size: 9px; opacity: .55; }
@media (max-width: 767.98px) {
    .gw-topbar-wrap .gw-user-nome,
    .gw-topbar-wrap .gw-user-caret { display: none; }
    .gw-topbar-wrap .gw-user-chip { padding: 0; }
}

/* ============================================================
   FAIXA 2: MODULOS -- largura total, mesmo bloco escuro

   flex-wrap: wrap continua sendo a decisao central: 12 nomes de
   modulo somam ~1.560px e nao cabem em 1366px nem com a largura
   toda. Quando nao cabem, a fileira QUEBRA em vez de truncar o
   nome (foi o que a rodada 2 fazia, e produzia "D", "E...").
   Quem tem poucos modulos, ou tela larga, ve uma fileira so.
   ============================================================ */
.gw-topbar-wrap .gw-topnav {
    padding: .2rem .7rem .3rem;
    min-height: 0;
    background-color: transparent;
    border-top: 1px solid var(--ui-topbar-linha);
    margin: 0;
}
.gw-topbar-wrap .gw-topnav .navbar-collapse { width: 100%; }

/* ### ESGTS-29 (rodada 7) :: CENTRALIZADO quando cabe, a ESQUERDA quando quebra.

   O pedido: centralizar a faixa na largura toda, mas se os modulos quebrarem para
   uma segunda fileira, essa fileira deve comecar do inicio da linha.

   "justify-content: center" NAO resolve: ele centraliza CADA fileira, entao a
   segunda -- com 2 ou 3 itens -- apareceria centralizada no meio, desalinhada da
   primeira.

   O que resolve e a largura da <ul>:
     width: fit-content  -> a lista fica com a largura exata do conteudo, e as
                            margens automaticas a centralizam na faixa;
     max-width: 100%     -> quando o conteudo passa da faixa, a largura trava em
                            100%, a lista passa a ocupar tudo e os itens quebram;
     justify-content:
       flex-start        -> com a lista ocupando a largura toda, cada fileira
                            comeca na esquerda -- inclusive a segunda.
   Ou seja, o mesmo CSS da os dois comportamentos, sem media query e sem JS: quem
   decide e o proprio conteudo caber ou nao.

   O -moz-fit-content vem antes por causa de Firefox antigo; navegador que nao
   entender nenhum dos dois cai no "width" nao declarado (auto), que dentro de um
   flex container ja e shrink-to-fit -- degrada para o mesmo efeito. */
.gw-topbar-wrap .bd-navbar-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    gap: 1px;
}
.gw-topbar-wrap .bd-navbar-nav > .nav-item { flex: 0 0 auto; }
/* ### ESGTS-29 (rodada 6) :: faixa 2 mais compacta, a pedido do QA.
   O conjunto icone / rotulo / setinha estava arejado demais: o chip do icone
   tinha 30px, havia 9px de gap dos DOIS lados (o ::after da setinha tambem e
   item flex, entao tambem recebia o gap) e .75rem de padding lateral.
   Os 12 modulos somavam ~1.780px; agora somam ~1.520px -- 15% mais estreito,
   o que faz caber numa fileira so a partir de ~1550px de tela. */
.gw-topbar-wrap .bd-navbar-nav > .nav-item > .nav-link {
    display: flex;
    align-items: center;
    /* gap: 6px; */
    padding: .25rem .45rem;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--ui-topbar-txt);
    white-space: nowrap;              /* o nome nunca quebra no meio */
    transition: background-color .12s ease, color .12s ease;
}
/* ### ESGTS-29 (rodada 7) :: respiro entre o icone e o rotulo em TODAS as larguras.
   Com o gap do link comentado, quem separa os dois passou a ser o
   "a.nav-link.dropdown-toggle>span { margin-left: 5px !important }" -- mas essa
   regra vive dentro de um @media (min-width: 768px), entao no CELULAR o icone e o
   texto ficavam colados. Esta vale sempre; de 768px para cima a outra vence (tem
   !important) com o mesmo valor, logo o resultado visual e identico. */
.gw-topbar-wrap .bd-navbar-nav > .nav-item > .nav-link > span {
    margin-left: 5px;
}
.gw-topbar-wrap .bd-navbar-nav > .nav-item > .nav-link > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 7px;
    font-size: 12.5px;
    transition: background-color .12s ease, color .12s ease;
}
.gw-topbar-wrap .bd-navbar-nav > .nav-item > .nav-link:hover,
.gw-topbar-wrap .bd-navbar-nav > .nav-item.show > .nav-link {
    background-color: var(--ui-topbar-hover);
    color: #fff;
    text-decoration: none;
}
/* MODULO DA TELA ATUAL: rotulo branco e o icone num chip verde --
   e o "voce esta aqui" da barra. */
.gw-topbar-wrap .bd-navbar-nav > .nav-item.active > .nav-link {
    color: #fff;
    font-weight: 600;
}
.gw-topbar-wrap .bd-navbar-nav > .nav-item.active > .nav-link > i {
    background-color: rgba(34, 197, 94, .16);
    color: var(--ui-topbar-verde);
}
/* o caret nao informa nada no desktop: todo modulo abre submenu */
@media (min-width: 992px) {
    /* a setinha e um ::after do proprio <a>, logo tambem e item flex e tambem
       recebe o gap -- por isso o margin-left do Bootstrap (.255em) e zerado aqui,
       senao o espaco antes dela fica maior que o do icone. Caret um pouco menor
       para acompanhar a fonte nova. */
    .gw-topbar-wrap .bd-navbar-nav > .nav-item > .nav-link.dropdown-toggle::after {
        /* ### ESGTS-29 (rodada 7) :: voltou a ter margem. O gap do link foi
           comentado no ajuste manual, e com o margin-left do Bootstrap zerado na
           rodada 6 a setinha ficou encostada no texto -- nada mais dava esse
           respiro. O valor acompanha o margin-left do <span>. */
        margin-left: 5px;
        border-top-width: .26em;
        border-right-width: .26em;
        border-left-width: .26em;
        opacity: .45;
    }
}

/* ============================================================
   PAINEIS (dropdowns) DA BARRA
   O .dropdown-menu global deste arquivo e escuro e quadrado --
   desenho da epoca em que descia de uma sidebar. Aqui a barra usa
   painel claro. O escopo em .gw-topbar-wrap e proposital: o
   dropdown escuro segue valendo no resto do sistema.
   ============================================================ */
/* ### ESGTS-29 (rodada 5) :: os paineis da FAIXA 1 voltam a flutuar.

   O Bootstrap 4 define ".navbar-nav .dropdown-menu { position: static; float: none }"
   (sb-admin.css:4420) e so devolve "position: absolute" DENTRO de um
   ".navbar-expand-*" (4576). A faixa 1 e um .navbar SEM navbar-expand -- o expand
   esta na faixa 2, que e a unica que colapsa --, entao os paineis dos atalhos e do
   usuario ficavam NO FLUXO: abriam para o lado e esticavam a altura da barra.

   POR QUE NAO BASTA POR navbar-expand NA FAIXA 1: essa classe tambem aplica
   ".navbar-expand .navbar-toggler { display: none }" (4691), e o hamburguer da
   faixa 1 e justamente quem abre a faixa 2 no celular -- a navegacao inteira
   ficaria inalcancavel no mobile.

   Vale em TODAS as larguras: o menu do usuario nao esta dentro de nenhum collapse
   (ele fica sempre visivel), entao no celular ele tambem precisa flutuar. A regra
   de acordeao do mobile e escopada em .gw-topnav e nao alcanca esta faixa. */
.gw-topbar-wrap .bd-navbar .navbar-nav .dropdown-menu {
    position: absolute !important;
    float: none;
}

.gw-topbar-wrap .dropdown-menu,
.gw-topbar-wrap .dropdown-menu.show {
    background-color: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    box-shadow: 0 .75rem 2rem rgba(16, 24, 40, .18);
    padding: .35rem;
    min-width: 14rem;
    /* ANULA o "top: 5px !important" da regra global .dropdown-menu.show: ela
       foi escrita para menu de sidebar e briga com o transform que o Popper
       aplica no MESMO elemento -- o painel abria deslocado do item. */
    top: 100% !important;
    margin-top: .4rem;
}
.gw-topbar-wrap .dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 9px;
    background-color: transparent;
    color: var(--ui-text);
    font-size: 13px;
    line-height: 1.4;
    padding: .5rem .7rem;
    border-radius: 8px;
    white-space: normal;
}
.gw-topbar-wrap .dropdown-menu .dropdown-item > i {
    flex: 0 0 16px;
    font-size: 13px;
    color: var(--ui-text-soft);
    text-align: center;
}
.gw-topbar-wrap .dropdown-menu .dropdown-item:hover,
.gw-topbar-wrap .dropdown-menu .dropdown-item:focus {
    background-color: var(--ui-surface-alt) !important;
    color: var(--ui-primary) !important;
}
.gw-topbar-wrap .dropdown-menu .dropdown-item:hover > i { color: var(--ui-topbar-verde); }
.gw-topbar-wrap .dropdown-menu .dropdown-item.active {
    background-color: rgba(34, 197, 94, .10);
    color: var(--ui-primary);
    font-weight: 600;
}
.gw-topbar-wrap .dropdown-menu .dropdown-item.active > i { color: var(--ui-topbar-verde); }
.gw-topbar-wrap .dropdown-menu .dropdown-divider {
    margin: .3rem .2rem;
    border-top-color: var(--ui-border);
}

/* menu do usuario: cabecalho com nome e e-mail */
.gw-topbar-wrap .gw-user-menu { min-width: 16rem; }
.gw-topbar-wrap .gw-user-head {
    display: flex;
    flex-direction: column;
    padding: .5rem .7rem .6rem;
    margin-bottom: .2rem;
    border-bottom: 1px solid var(--ui-border);
}
.gw-topbar-wrap .gw-user-head-nome {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ui-text);
}
.gw-topbar-wrap .gw-user-head-mail {
    font-size: 11.5px;
    color: var(--ui-text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* SAIR: acao destrutiva, em vermelho e apos divisoria */
.gw-topbar-wrap .dropdown-item.gw-sair,
.gw-topbar-wrap .dropdown-item.gw-sair > i {
    color: var(--ui-danger-strong);
    font-weight: 600;
}
.gw-topbar-wrap .dropdown-item.gw-sair:hover,
.gw-topbar-wrap .dropdown-item.gw-sair:focus {
    background-color: rgba(220, 53, 69, .10) !important;
    color: var(--ui-danger-strong) !important;
}
.gw-topbar-wrap .dropdown-item.gw-sair:hover > i { color: var(--ui-danger-strong); }

@keyframes ddFade { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 992px) {
    .gw-topbar-wrap .dropdown-menu.show { animation: ddFade .14s ease-out; }
}

/* ============================================================
   ### ESGTS-29 (rodada 10) :: CELULAR -- menu em gaveta

   Diagnosticado com Chromium (screenshot + estilos computados),
   nao no olho: os itens apareciam CENTRALIZADOS e com largura de
   conteudo, cada um comecando num ponto diferente.

   CAUSA: o Bootstrap define ".navbar-nav { flex-direction: column }"
   e so troca para "row" dentro de ".navbar-expand-lg" (>=992px).
   Abaixo disso a <ul> e uma COLUNA -- e ali o "align-items: center"
   que a faixa usa no desktop passa a valer no eixo HORIZONTAL,
   centralizando cada item e encolhendo-o ao tamanho do conteudo.
   Por isso aqui a direcao e o alinhamento sao declarados de novo.

   SEGUNDA CAUSA, do caret: o sb-admin.css:10410 substitui o
   triangulo do Bootstrap por um glifo do Font Awesome com
   "float: right" -- e float NAO vale dentro de um flex container,
   entao a setinha encostava no rotulo em vez de ir para a ponta.
   Resolve-se com "margin-left: auto".
   Esse mesmo CSS ja troca o glifo de ">" para "v" quando o modulo
   abre (content \\f105 -> \\f107), entao NAO se aplica rotacao aqui:
   girar por cima do glifo trocado deixaria a seta de cabeca para baixo.
   ============================================================ */
@media (max-width: 991.98px) {

    /* --- A gaveta ------------------------------------------- */
    .gw-topbar-wrap .gw-topnav { padding: 0; }
    .gw-topbar-wrap .gw-topnav .navbar-collapse {
        /* altura da barra (~63px) descontada, para a gaveta nunca passar da tela */
        max-height: calc(100vh - 72px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: .4rem .6rem .7rem;
        border-top: 1px solid var(--ui-topbar-linha);
    }

    /* --- Modulos: uma linha inteira cada -------------------- */
    .gw-topbar-wrap .bd-navbar-nav {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;      /* <- o que conserta o "centralizado" */
        justify-content: flex-start;
        width: 100%;
        max-width: 100%;
        margin: 0;
        gap: 2px;
    }
    .gw-topbar-wrap .bd-navbar-nav > .nav-item {
        flex: 0 0 auto;
        width: 100%;
    }
    .gw-topbar-wrap .bd-navbar-nav > .nav-item > .nav-link {
        width: 100%;
        /* 46px: alvo de toque confortavel. Abaixo de ~44px o erro de toque
           cresce muito, e aqui cada erro leva o usuario para outro modulo. */
        min-height: 46px;
        padding: .55rem .7rem;
        font-size: 14px;
        border-radius: 10px;
    }
    .gw-topbar-wrap .bd-navbar-nav > .nav-item > .nav-link > i {
        width: 28px;
        height: 28px;
        flex: 0 0 28px;
        font-size: 14px;
    }
    /* o rotulo pode ocupar duas linhas em aparelho estreito, em vez de sumir */
    .gw-topbar-wrap .bd-navbar-nav > .nav-item > .nav-link > span {
        white-space: normal;
        line-height: 1.25;
    }
    /* setinha na PONTA da linha (o float do sb-admin nao vale em flex) */
    .gw-topbar-wrap .bd-navbar-nav > .nav-item > .nav-link.dropdown-toggle::after {
        display: block;
        float: none;
        margin-left: auto;
        padding-left: .5rem;
        opacity: .5;
    }
    .gw-topbar-wrap .bd-navbar-nav > .nav-item.show > .nav-link.dropdown-toggle::after {
        opacity: .9;
    }
    /* modulo aberto: fundo proprio, para nao se perder na lista longa */
    .gw-topbar-wrap .bd-navbar-nav > .nav-item.show > .nav-link {
        background-color: rgba(255, 255, 255, .07);
        color: #fff;
    }

    /* --- Submenu: acordeao indentado ------------------------ */
    /* dentro do collapse o painel nao pode flutuar: ele empurra a lista para
       baixo. O transform:none anula o posicionamento inline do Popper. */
    .gw-topbar-wrap .gw-topnav .dropdown-menu {
        position: static !important;
        top: auto !important;
        float: none;
        width: auto;
        /* alinhado ao texto do modulo (28px do icone + 6px do gap + padding) */
        margin: .1rem 0 .35rem 2.35rem;
        padding: .1rem 0 .1rem .6rem;
        border: 0;
        border-left: 2px solid rgba(255, 255, 255, .14);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        transform: none !important;
    }
    .gw-topbar-wrap .gw-topnav .dropdown-menu .dropdown-item {
        min-height: 42px;
        color: rgba(255, 255, 255, .72);
        font-size: 13.5px;
        padding: .5rem .6rem;
        border-radius: 8px;
    }
    .gw-topbar-wrap .gw-topnav .dropdown-menu .dropdown-item > i {
        color: rgba(255, 255, 255, .45);
    }
    .gw-topbar-wrap .gw-topnav .dropdown-menu .dropdown-item:hover,
    .gw-topbar-wrap .gw-topnav .dropdown-menu .dropdown-item:focus {
        background-color: rgba(255, 255, 255, .10) !important;
        color: #fff !important;
    }
    /* atividade da tela atual: marca verde, mesma linguagem do desktop */
    .gw-topbar-wrap .gw-topnav .dropdown-menu .dropdown-item.active {
        background-color: rgba(34, 197, 94, .16) !important;
        color: #fff !important;
        font-weight: 600;
    }
    .gw-topbar-wrap .gw-topnav .dropdown-menu .dropdown-item.active > i {
        color: var(--ui-topbar-verde);
    }

    /* --- Atalhos na barra ----------------------------------- */
    /* alvo de toque nos botoes redondos: 28px e pouco para o dedo */
    .gw-topbar-wrap .gw-util-icon,
    .gw-topbar-wrap .gw-util-btn {
        width: 36px;
        height: 36px;
    }
    .gw-topbar-wrap .gw-utils { gap: 5px; }
    .gw-topbar-wrap .navbar-toggler {
        width: 40px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* SUPORTE e CONFIGURACAO DE TELA voltam no celular. A regra
       "@media(max-width:960px)" deste arquivo escondia os dois junto com o logo
       e o #menu-custom -- mas pedir suporte e o que mais se faz do celular, e a
       configuracao de tela (#menu-api) e ferramenta de trabalho do dev, que
       tambem abre o sistema no telefone. Ficam so os icones.
       O #menu-custom continua oculto de proposito (decisao de 18/08/2026): ver a
       regra dele mais acima. */
    .gw-topbar-wrap li#menu-suporte,
    .gw-topbar-wrap li#menu-api { display: flex !important; }
}

/* ============================================================
   ### ESGTS-29 (rodada 11) :: A BARRA CABE EM APARELHO ESTREITO

   Com o #menu-api de volta no celular (pedido do desenvolvedor), a
   faixa 1 passou a ter marca + 5 atalhos + hamburguer. Medido: o
   conteudo terminava em 441px, entao a barra ESTOURAVA a largura em
   qualquer aparelho abaixo de 430px -- 390, 375, 360 e 320 todos com
   rolagem horizontal.

   Em vez de esconder algum atalho, o espaco vem de onde nao custa
   funcao: a MARCA. Ela e o maior elemento da barra (130px) e o unico
   que nao e clicavel para uma tarefa. Os botoes tambem encolhem, mas
   so o suficiente para continuarem confortaveis ao toque.

   Os cortes sao em degraus, porque a conta muda a cada faixa de
   largura -- conferidos com Chromium em 430 / 390 / 375 / 360 / 320.
   ============================================================ */
@media (max-width: 991.98px) {
    .gw-topbar-wrap .navbar-brand img { max-width: 112px; }
}
@media (max-width: 480px) {
    .gw-topbar-wrap .bd-navbar { padding: .45rem .6rem; }
    .gw-topbar-wrap .navbar-brand { margin-right: .5rem; }
    .gw-topbar-wrap .navbar-brand img { max-width: 88px; max-height: 26px !important; }
    .gw-topbar-wrap .gw-utils { gap: 3px; }
    .gw-topbar-wrap .gw-util-icon,
    .gw-topbar-wrap .gw-utils .nav-link.dropdown-toggle.btn,
    .gw-topbar-wrap .gw-util-btn { width: 32px; height: 32px; }
    .gw-topbar-wrap .gw-user-chip { height: 34px; padding: 0; }
    .gw-topbar-wrap .gw-avatar { width: 30px; height: 30px; flex: 0 0 30px; font-size: 11.5px; }
    .gw-topbar-wrap .navbar-toggler { width: 34px; height: 32px; padding: 0; margin-left: .35rem; }
}
@media (max-width: 380px) {
    .gw-topbar-wrap .bd-navbar { padding: .45rem .5rem; }
    .gw-topbar-wrap .navbar-brand img { max-width: 68px; }
    .gw-topbar-wrap .gw-utils { gap: 2px; }
    .gw-topbar-wrap .gw-util-icon,
    .gw-topbar-wrap .gw-utils .nav-link.dropdown-toggle.btn,
    .gw-topbar-wrap .gw-util-btn { width: 30px; height: 30px; font-size: 13px; }
    .gw-topbar-wrap .gw-util-icon > i { font-size: 13px !important; }
    .gw-topbar-wrap .navbar-toggler { width: 32px; margin-left: .25rem; }
}

/* ### ESGTS-29 (rodada 11) :: no celular, os paineis dos atalhos viram uma FOLHA
   abaixo da barra, ocupando a largura da tela.

   Motivo medido: o painel do #menu-api e ancorado a direita do proprio botao
   (.dropdown-menu-right), e esse botao fica no MEIO da barra. Com 224px de
   largura minima, o painel comecava em x negativo e metade dele ficava fora da
   tela -- so aparecia o fim de cada rotulo.

   A folha resolve para todos os atalhos de uma vez (menu de dev e menu do
   usuario) e e o padrao que o usuario ja espera no telefone. O "top" vem da
   variavel que o script do template publica com a altura real da faixa 1;
   cravar um numero quebraria ao mudar padding ou tamanho de botao. */
@media (max-width: 575.98px) {
    /* MESMA cadeia de seletores da regra de "position: absolute" do desktop
       (.gw-topbar-wrap .bd-navbar .navbar-nav .dropdown-menu, (0,4,0)). Com uma
       cadeia mais curta esta regra perdia por especificidade mesmo com
       !important, o painel continuava absolute e saia com 20px de largura. */
    .gw-topbar-wrap .bd-navbar .navbar-nav .dropdown-menu {
        position: fixed !important;
        top: calc(var(--gw-faixa1-h, 62px) + 6px) !important;
        left: 8px !important;
        right: 8px !important;
        bottom: auto !important;
        width: auto;
        min-width: 0;
        max-width: none;
        transform: none !important;   /* anula o posicionamento inline do Popper */
        max-height: calc(100vh - var(--gw-faixa1-h, 62px) - 24px);
        overflow-y: auto;
    }
    /* itens mais altos: e uma folha de toque, nao um menu de mouse */
    .gw-topbar-wrap .bd-navbar .navbar-nav .dropdown-menu .dropdown-item { min-height: 44px; }
    .gw-topbar-wrap .bd-navbar .navbar-nav .dropdown-menu .dropdown-item,
    .gw-topbar-wrap .bd-navbar .gw-user-head { padding-left: .85rem; padding-right: .85rem; }
}

/* --- Folga inferior do conteudo -----------------------------
   O #footer e fixo, 30px. Ate a migracao quem reservava esse espaco era o
   "padding-bottom: 80px" do "#wrapper #content-wrapper" (sb-admin.css), e o
   #content-wrapper saiu com a sidebar. */
body#page-top > .container-fluid.pt-3 {
    padding-bottom: 80px;
}


/* ============================================================
   ### ESGTS-29 :: DASHBOARDS (secao 5.5 da SPEC)

   Os KPIs ja saem com .totalizador dos arquivos de
   templates/custom/{dashboards,financeiro,empreendimentos} --
   9 telas, ~120 cards -- mas nao havia NENHUMA regra para a
   classe. Aqui entra so a FORMA: raio, sombra e a elevacao no
   hover (eles sao clicaveis, via data-tabela).

   COR NAO: cada card traz o proprio background inline
   (#00bcd4, #3f51b5, ...) e style inline vence folha de estilo.
   Mexer em cor aqui so criaria regra que nao aplica.

   1 CARD POR LINHA NO CELULAR ja e o comportamento atual: os
   cards sao "col-lg-6 col-xl-3" e abaixo de 992px ficam sem
   classe de coluna, logo largura total. E o padding do
   .card-body no celular ja foi restaurado em 26-08-03. Os dois
   itens da secao 5.5 da SPEC, portanto, nao precisam de nada.
   ============================================================ */
.totalizador .card {
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
    overflow: hidden;
    transition: transform .12s ease, box-shadow .12s ease;
}
.totalizador:hover .card {
    transform: translateY(-2px);
    box-shadow: var(--ui-shadow-lg);
}
.totalizador .card-body h6 {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 12px;
    font-weight: 600;
    opacity: .92;
}
.totalizador .card-body h1 {
    font-weight: 700;
    line-height: 1.15;
}


/* ============================================================
   ### ESGTS-29 :: PRIVACIDADE DE VALORES EM R$ (secao 5.5)

   Valor monetario nasce BORRADO e so aparece ao clique. E para
   a tela poder ser aberta em reuniao, com o cliente ao lado ou
   com alguem projetando, sem expor faturamento e comissao.

   Como usar: basta por a classe .dash-money no elemento que
   mostra o valor. O JS do inc_template_internas.html cuida do
   resto (olho, clique, teclado) -- nao ha estrutura a montar.

   Contagem NAO entra aqui: quantidade de leads ou de unidades
   nao e informacao sensivel, e borrar tudo so faria o usuario
   revelar tudo por reflexo, todo dia, ate o recurso virar
   ruido.
   ============================================================ */
.dash-money {
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
.dash-money > .dash-valor {
    filter: blur(7px);
    transition: filter .12s ease;
}
.dash-money.dash-revelado > .dash-valor {
    filter: none;
}
.dash-money > .dash-olho {
    margin-left: .4rem;
    font-size: .55em;
    opacity: .65;
    vertical-align: middle;
}
.dash-money:hover > .dash-olho { opacity: 1; }
/* foco visivel: o elemento vira focavel pelo teclado (tabindex no JS) */
.dash-money:focus {
    outline: 2px solid var(--ui-accent-2);
    outline-offset: 3px;
}
@media print {
    /* no papel o valor sai legivel: quem imprimiu ja decidiu expor */
    .dash-money > .dash-valor { filter: none !important; }
    .dash-money > .dash-olho { display: none; }
}