/* ===========================================================================
   CAMADA RESPONSIVA DO SisCONTAG — proposta de 19/09/2026

   O QUE ELA RESOLVE
   O layout clássico é travado em 1024px: `#header`, `#content-wrap`, `#feature`
   e `#top-footer` têm largura FIXA em `site.css`, e `#header-fluid` tem
   `min-width: 1024px`. No celular (390px) isso joga a tela 636px para fora — a
   pessoa arrasta de lado para ler qualquer coisa, e o que fica fora da largura
   não dá nem sinal de que existe.

   A ESCOLHA DE PROJETO
   Uma folha SÓ, carregada por ÚLTIMO, que age apenas em TELA e apenas abaixo
   de 900px. Nada muda no computador nem na IMPRESSÃO: as regras vivem todas
   dentro de `@media screen and (max-width: 900px)`. O limite é 900 e não 1024
   de proposito — monitor antigo de 1024x768 continua com o layout clássico, e
   celular deitado (844px) entra no responsivo. Assim não é
   preciso reescrever tela por tela (são centenas), e qualquer tela nova nasce
   respondendo junto.

   O QUE NÃO ESTÁ AQUI
   Esta camada faz a tela CABER e ser usável. Ela não reorganiza conteúdo: uma
   tabela de 12 colunas continua sendo 12 colunas (rolando na horizontal dentro
   do próprio quadro, sem arrastar a página). Transformar tabela em cartão é
   decisão tela a tela — o módulo ATeG já é assim.
   =========================================================================== */

@media screen and (max-width: 900px) {

    /* LARGURA INCLUI PADDING E BORDA. O sistema foi escrito antes de
       `border-box` ser o normal: há blocos com `width: 100%` E padding, e cada
       um sobra alguns pixels para fora do pai — é a origem dos "passa 4px",
       "passa 5px" que a auditoria de 20/09/2026 encontrou espalhados. */
    *, *::before, *::after {
        box-sizing: border-box;
    }

    /* ---- 1. SOLTAR AS LARGURAS FIXAS ------------------------------------ */
    /* O `overflow-x: hidden` fica SÓ NO HTML (Eddy, 20/09/2026 — "tem alguma
       coisa que não deixa eu clicar", "só trava depois de selecionar meses").
       Com ele TAMBÉM no body, o navegador tira o rolamento da janela e passa
       para dentro do corpo da página: `window.scrollY` congela em 0, a barra de
       endereço do celular nunca recolhe e o fim da página fica embaixo dela —
       daí o botão que não aceita o toque, e só depois de "mexer na tela".
       A altura livre é pelo mesmo motivo: o site.css dá `height: 100%` ao html,
       e isso trava a página na altura da tela. */
    html {
        max-width: 100%;
        overflow-x: hidden;
        height: auto !important;
    }

    body {
        max-width: 100%;
        overflow-x: visible;
        height: auto !important;
        min-height: 0 !important;
    }

    /* FOLGA NO FIM DA PÁGINA (Eddy, 20/09/2026 — "tem alguma coisa que não deixa
       eu clicar; mexi na tela até conseguir"): a barra de endereço do navegador
       do celular cobre a faixa de baixo e some/volta conforme se rola. Um botão
       que termina exatamente no fim da página cai nessa faixa e o toque vai para
       o navegador, não para o sistema — parece que o botão não funciona.
       Com 70px de folga o último botão sempre sobe acima da barra. */
    body {
        padding-bottom: 70px !important;
    }

    /* Os quadros do layout clássico. São por PREFIXO porque o mesmo quadro
       existe em quatro variações (`-fluid`, `-extendido`, `-menor` e a
       combinação delas), e uma lista de nomes exatos envelheceria mal. */
    /* Os rodapés também vêm em variações (`top-footer`, `top-footer-fluid`,
       `bottom-footer`...). Era o `#top-footer-fluid`, de 1026px, que mantinha o
       "Email de suporte" para fora da tela em meia dúzia de telas. */
    [id^="header"], [id^="content-wrap"], [id^="wrap-"],
    [id^="top-footer"], [id^="bottom-footer"], [id^="footer"],
    #feature, #bottom-footer p, #footer {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
        float: none !important;
        /* A moldura cinza de 1px sai nas LATERAIS: numa tela de 390px ela vira
           uma tira branca ao lado da barra verde do menu. Em cima e embaixo ela
           fica, que é o que separa cabeçalho, menu e conteúdo. */
        border-left: 0 !important;
        border-right: 0 !important;
    }

    /* Colunas em porcentagem (52%, 48%...) empilham. */
    #wrap-content > div[style*="width"],
    #content-wrap > div[style*="float"] {
        width: 100% !important;
        float: none !important;
    }

    #content-wrap {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* RESPIRO À DIREITA NO CONTEÚDO (auditoria de 20/09/2026): textos alinhados
       à direita — "* Campos obrigatórios", totais de tabela, o nome da seção —
       encostavam na borda da tela em quase toda tela do sistema. */
    #content, #conteudo, .conteudo {
        padding-left: 6px;
        padding-right: 6px;
        box-sizing: border-box;
    }

    /* O "* Campos obrigatórios" é `float: right` e escapava do recuo acima em
       telas como a de Acampamento/Assentamento. Sem flutuar, ele fica na linha
       de cima do formulário, que é onde se lê. */
    .camposobrigatorio {
        float: none !important;
        display: block;
        text-align: right;
        max-width: 100%;
        padding-right: 4px;
    }

    /* O `#feature` é a faixa onde o menu mora: sem recuo nenhum, para a barra
       verde encostar nas duas bordas da tela (Eddy, 20/09/2026). O recuo do
       conteúdo continua no `#content-wrap`, acima. */
    #feature {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    img, embed, object, video {
        max-width: 100%;
        height: auto;
    }

    /* A CÂMERA FAZ A PRÓPRIA CONTA (Eddy, 21/09/2026) — no PC também.
       A janela "Capturar foto" é um iframe de 400x430 (socio.js), então DENTRO
       dela `innerWidth` é 400 e esta folha vale mesmo quem esteja num monitor de
       1920. O jpeg_camera recorta o vídeo na mão: para caber 1280x720 num quadro
       de 215x287 ele estica para 510px de largura e puxa com `left: -147px`, e o
       quadro esconde o que sobra dos lados. A regra acima limitava essa largura a
       215px — a imagem ficava achatada e, com o `left` de -147, só uma faixa
       estreita aparecia. O mesmo vale para a foto já tirada, em `#snapshots`.
       Quem manda no tamanho aqui é o plugin. */
    #camera video, #camera img, #camera canvas,
    #snapshots img, #snapshots canvas {
        max-width: none;
    }

    /* ---- 2. TABELA ROLA DENTRO DO QUADRO, NÃO A PÁGINA ------------------ */
    /* O `.tabela-rolavel` é posto pelo responsivo.js em volta de cada tabela
       de listagem. A barra de rolagem fica no quadro: o cabeçalho da página,
       o menu e os botões continuam no lugar. */
    .tabela-rolavel {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        margin-bottom: 10px;
    }
    /* TABELA USADA COMO ESQUELETO DA TELA (uma linha só, largura 1024 escrita
       no HTML) não rola: ela encolhe. É o caso de telas antigas como os
       Relatórios de Autorizações, montadas dentro de uma tabela. */
    table {
        max-width: 100% !important;
    }

    /* Quem marca é o responsivo.js (`data-empilhada`). Não basta mexer nas
       células: `tbody` e `tr` também seguram a largura antiga, e enquanto eles
       forem linha de tabela a pilha não acontece. */
    table[data-empilhada],
    table[data-empilhada] > tbody,
    table[data-empilhada] > tbody > tr,
    table[data-empilhada] > tr {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    table[data-empilhada] td {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
    }

    .tabela-rolavel > table {
        width: auto;
        min-width: 100%;         /* tabela estreita ocupa a largura toda */
        max-width: none !important;  /* ...e a larga volta a poder rolar */
    }

    /* ---- 3. FORMULÁRIO EM UMA COLUNA ------------------------------------ */
    /* O cadastro é montado em <table>: no celular cada célula vira uma linha,
       que é como se preenche um formulário no telefone. */
    table.coluna-unica,
    table.coluna-unica > tbody,
    table.coluna-unica > tbody > tr,
    table.coluna-unica > tbody > tr > td {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
    }
    table.coluna-unica > tbody > tr > td {
        padding: 2px 0;
    }

    /* As colunas internas dos cadastros (grade do Bootstrap e as classes
       próprias do sistema) empilham: no celular não há espaço para duas. */
    [class*="col-md-"], [class*="col-sm-"], [class*="col-lg-"],
    .coluna-50, .coluna-33, .coluna-25, .coluna-2, .coluna-3, .coluna-4 {
        width: 100% !important;
        float: none !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* AS COLUNAS DO MÓDULO ATeG (auditoria de 20/09/2026): `.ateg-pn-coluna` é
       `inline-block; width: 50%` — duas por linha. Em 390px cada uma fica com
       menos de 190px, e a tabela de dentro do cartão transbordava para fora da
       tela ("R$ 3.000,00" saía 19px). O nome da classe não casa com a regra
       geral das colunas porque ali o hífen vem antes ("pn-coluna"). */
    .ateg-pn-coluna, .ateg-pn-colunas > div {
        display: block !important;
        width: 100% !important;
        float: none !important;
        max-width: 100% !important;
    }
    .ateg-card {
        width: auto !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* OS NÚMEROS E AS ETAPAS DO PAINEL (auditoria de 20/09/2026): os cartões de
       número são `inline-block; width: 33.33%` (ou 25% quando são quatro), e as
       etapas do programa vêm quatro na linha. Em 390px cada uma fica com menos
       de 100px e o texto de uma monta no da outra — na tela do painel os avisos
       "1 grupo aguardando fim da mobilização" ficavam ilegíveis.
       Dois por linha resolve sem virar uma coluna quilométrica. */
    .ateg-pn-stat,
    .ateg-pn-stats.quatro .ateg-pn-stat,
    .ateg-pn-aviso,
    .ateg-pn-avisos.quatro .ateg-pn-aviso {
        width: 50% !important;
    }

    fieldset, .scheduler-border {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    label {
        max-width: 100%;
        white-space: normal;
        word-wrap: break-word;
    }

    input[type="text"], input[type="number"], input[type="password"],
    input[type="email"], input[type="date"], select, textarea {
        max-width: 100% !important;
        box-sizing: border-box;
    }
    .coluna-50p, .coluna-120, .coluna-100, .coluna-200 {
        width: 100% !important;
    }

    /* ---- 3b. OS CARTÕES DA PÁGINA INICIAL EMPILHAM ---------------------- */
    /* `.menu-icones` é `float: left; width: 32%` — três por linha. Em 390px,
       32% são 125px: o título cabe, o texto de dentro não, e um cartão sobe por
       cima do outro. Um por linha, e a altura deixa de ser fixa. */
    .menu-icones, .menu-icones2, .menu-icones3 {
        float: none !important;
        width: auto !important;
        margin-left: 0 !important;
        min-height: 0 !important;
        padding-bottom: 10px;
        border-bottom: 1px solid #e6e6e6;
    }
    .menu-icones h3, .menu-icones2 h3, .menu-icones3 h3 {
        padding-left: 6px !important;
        font-size: 16px;
    }
    .menu-icones p, .menu-icones2 p, .menu-icones3 p {
        padding-left: 4px !important;
        line-height: 1.6;
        /* Sindicato Web (29/09/2026): la o titulo (h3) e mais baixo que o icone
           de 40px, que flutua a esquerda e sobra para baixo - o PRIMEIRO link
           ficava recuado ao lado dele e os outros encostados na borda. */
        clear: left;
    }

    /* ---- 3c. O CABEÇALHO EMPILHA --------------------------------------- */
    /* Logo, nome do sindicato e os ícones da direita são três blocos
       flutuantes de largura fixa; no celular eles se montavam um por cima do
       outro. */
    #logo, #logonew, #logoff, #logoff-right, #logoff-right-extendido {
        float: none !important;
        min-width: 0 !important;
        width: auto !important;
        padding: 6px !important;
        text-align: center;
        min-height: 0 !important;
    }
    #logo img, #logonew img { max-height: 54px; width: auto; }

    /* RESPIRO DOS DOIS LADOS NO CABEÇALHO (Eddy, 20/09/2026): o nome da
       entidade e o "Usuário: ..." encostavam na borda direita da tela. O recuo
       vale para os blocos de identificação e NÃO para o `#feature`, que é a
       faixa do menu — ela continua de borda a borda. */
    [id^="header"] > div:not(#feature) {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    [id^="header"] span, [id^="header"] div {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* NO CELULAR FICA SÓ A LOGO (Eddy, 20/09/2026): o nome "SisCONTAG" escrito
       ao lado dela repete o que a imagem já diz e come uma linha inteira de uma
       tela que tem poucas. */
    [id^="header"] .alterarapp {
        display: none !important;
    }

    /* O PAINEL "LINKS EXTERNOS" SAI DO CELULAR (Eddy, 20/09/2026). Ele é um
       menu suspenso de ~20 atalhos para sites de fora (INSS, CCIR, DAP, CNPJ,
       CAR...), aberto pelo ícone de lista do topo. Desenhado para abrir
       flutuando sobre a página, no celular ele descia empilhado com as imagens
       umas sobre as outras. Sai o painel e sai o ícone que o abre — a troca
       entre SisCONTAG e Arrecadação, que morava nele, virou o grupo "Minha
       conta" no fim do menu (ver responsivo.js). */
    .alterarapp2, .applocal, .applocal2, .botalapps, .iconesapps {
        display: none !important;
    }

    /* O QUE O SISTEMA ESCONDE, CONTINUA ESCONDIDO. As regras de lista acima
       usam `!important` e acabavam revelando item que o próprio HTML marcou
       como `display: none` — foi assim que o "Limpar cache" (que só existe
       para o super administrador, e escondido) apareceu no menu do celular. */
    .menuantigo.menu-aberto #nav a[style*="display: none"],
    .menuantigo.menu-aberto #nav a[style*="display:none"],
    .menuantigo.menu-aberto #nav li[style*="display: none"],
    .menuantigo.menu-aberto #nav li[style*="display:none"],
    .menuantigo.menu-aberto #nav ul[style*="display: none"],
    .menuantigo.menu-aberto #nav ul[style*="display:none"] {
        display: none !important;
    }

    /* E a logo com altura de cabeçalho: a imagem vem no tamanho que o sindicato
       subiu e chegava a ocupar um quarto da tela do telefone. */
    [id^="header"] img {
        max-height: 64px;
        width: auto;
        height: auto;
    }

    /* O CABEÇALHO É UMA LINHA DE BLOCOS FLUTUANTES com largura em % escrita no
       próprio HTML (3%, 12%, 10%, 52%) dentro de uma faixa de 40px de altura
       fixa. Em 390px, 52% são 202px: o nome do sindicato transborda e o bloco
       dos ícones, que vem depois, sobe por cima. Aqui a faixa cresce conforme o
       conteúdo e os blocos viram uma pilha. */
    [id^="header"] div {
        float: none !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-width: 100% !important;
        position: static !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* OS ÍCONES SOLTOS DO CABEÇALHO SOMEM NO CELULAR (Eddy, 20/09/2026):
       sair, meus dados, configurações, ajuda, contador e sino ficavam numa
       fileira sobre a qual o sino grande da página passava por cima, e todos
       eles têm o mesmo destino dentro do menu. O nome do sindicato e o do
       usuário ficam — são identificação, não botão. */
    [id^="header"] div[style*="float: right"],
    [id^="header"] div[style*="float:right"],
    [id^="header"] .alertamensagens {
        display: none !important;
    }

    #wrap-content > div, #content-wrap > div, #feature > div {
        float: none !important;
        width: auto !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* AS COLUNAS DO CORPO DA PÁGINA. O sistema tem uma família de classes
       `coluna-25p`, `coluna-50p`, `coluna-70center`... e, além delas, colunas
       montadas com `float: left` escrito no próprio HTML — é assim que a caixa
       de avisos da página inicial fica ao lado dos cartões. Todas viram largura
       cheia, uma embaixo da outra. */
    [class*="coluna-"] {
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    #content div[style*="float: left"], #content div[style*="float:left"],
    #content div[style*="float: right"], #content div[style*="float:right"] {
        float: none !important;
        width: auto !important;
        margin-left: 0 !important;
    }
    /* títulos com altura fixa escrita à mão cortavam o texto em duas linhas */
    #content h3[style*="height"], #content h4[style*="height"] {
        height: auto !important;
        min-height: 0 !important;
    }

    /* ---- 3d. A BARRA DE AÇÕES DA TELA ----------------------------------- */
    /* (Eddy, 20/09/2026 — "continua feio, não ficou igual ao do Instituto")

       A barra do topo de cada tela (Novo Sócio, Relatórios, Importar, Tutorial)
       é montada pelo `{crialinks}`: cada ação é um `div.barra2` com o ícone em
       cima e o rótulo embaixo — a mesma ideia do `{crialinks2}` do srvbsb. O que
       faltava era o ARRANJO: no celular ela herdava o `float: right` do
       computador e as ações caíam desalinhadas, três em cima e duas soltas
       embaixo, com ícones grandes demais.

       Aqui ela vira o que o Instituto Samila Leão usa: uma grade de quatro
       colunas dentro de um cartão, ícone de 28px e rótulo pequeno — cada ação
       na sua célula, todas do mesmo tamanho. */
    /* O TÍTULO DA TELA CRESCE COM A BARRA (Eddy, 20/09/2026): o `h1.barra2` tem
       altura fixa (63px), suficiente para a barra de ações em UMA linha no
       computador. No celular o cartão de ações tem duas linhas e vazava 37px
       para fora do título — por cima do "IDENTIFICAÇÃO DO(A) SÓCIO(A)" e dos
       primeiros campos. */
    /* TODO título de tela, e não só o `h1.barra2`: a auditoria de 21/09/2026
       achou o "* Campos obrigatórios" do Preencher Perfil escorrendo por cima da
       legenda "IDENTIFICAÇÃO DO SINDICATO" — ali o h1 não tem aquela classe. */
    h1, h1.barra2 {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        /* SEM A FAIXA DE FUNDO NO CELULAR (Eddy, 20/09/2026): o título da tela
           tem fundo cinza com borda, e o cartão das ações fica em cima dele —
           dois fundos, um dentro do outro. No telefone quem separa as coisas é
           o cartão; a faixa do título vira um quadro sobrando. */
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .acoes-view3 {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr);
        gap: 4px 2px;
        float: none !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 8px 0 !important;
        padding: 10px 4px !important;
        background: #fff;
        border: 1px solid #e3e6ea;
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
        text-align: center;
    }

    .acoes-view3 .barra2 {
        float: none !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center;
        border: 0 !important;
        background: none !important;
        min-height: 0 !important;
    }

    .acoes-view3 .barra2 p {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.1;
    }

    /* O ícone menor — a 32px eles dominavam a tela em quatro colunas. */
    .acoes-view3 .barra2 img {
        width: 28px !important;
        height: 28px !important;
    }

    /* O rótulo quebra em duas linhas quando é comprido ("Importar
       Aposentados"), em vez de empurrar a coluna do vizinho. */
    .acoes-view3 .barra2 a {
        display: block;
        font-size: 11px !important;
        line-height: 1.2;
        text-decoration: none;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* ---- 3e. AS JANELAS (fancybox) -------------------------------------- */
    /* (Eddy, 20/09/2026 — "quando abre conta em Fluxo de caixa não abre legal")

       As janelas do sistema são abertas com largura fixa escrita na chamada
       (800px na pesquisa de contas). Num aparelho de 390px a janela nasce com
       820px: fica torta, com metade das colunas para fora e a pessoa sem saber
       que precisa arrastar.

       Aqui a janela passa a caber na tela — em qualquer uma das três versões do
       fancybox que o sistema usa (v1 por id, v2 e v3 por classe). */
    /* SÓ O QUADRO DE FORA RECEBE `left`. Os elementos de dentro do fancybox são
       `position: relative`, e um `left` neles DESLOCA o conteúdo: foi o que
       deixou a janela "esquisita", empurrada 28px para a direita e com o botão
       de fechar metade fora da tela. Eles só herdam a largura. */
    /* A JANELA USA A TELA INTEIRA (Eddy, 20/09/2026 — "aproveite melhor a tela,
       muito espaço nas laterais"): num aparelho estreito, cada pixel de margem
       é uma coluna a menos da tabela. Fica só uma folga de 4px de cada lado,
       para a janela não se confundir com a página. */
    .fancybox-wrap, #fancybox-wrap, .fancybox-slide > div {
        width: calc(100vw - 8px) !important;
        max-width: calc(100vw - 8px) !important;
        left: 4px !important;
        right: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* A moldura branca do fancybox antigo tem 10px de cada lado, escrita no
       próprio elemento — 20px que sumiam da largura útil. */
    #fancybox-content, .fancybox-skin, #fancybox-outer {
        border-width: 0 !important;
        padding: 0 !important;
    }

    .fancybox-skin, #fancybox-outer,
    .fancybox-inner, #fancybox-content,
    .fancybox-iframe, #fancybox-frame,
    .fancybox-inner iframe, .fancybox-content {
        width: 100% !important;
        max-width: 100% !important;
        left: auto !important;
        right: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Altura: a janela cabe na tela e rola por dentro, em vez de empurrar a
       página. */
    .fancybox-inner, #fancybox-content {
        max-height: 78vh !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* O botão de fechar precisa ficar DENTRO da tela: no fancybox antigo ele é
       posicionado por `left` calculado sobre a largura ORIGINAL da janela (800px)
       e ia parar fora do aparelho. */
    .fancybox-close, #fancybox-close, .fancybox-button--close {
        left: auto !important;
        right: 0 !important;
        top: 0 !important;
    }

    /* ---- 3f. O RESUMO DA MENSALIDADE ------------------------------------ */
    /* (Eddy, 20/09/2026 — "quadro resumo tudo bagunçado")

       O resumo é uma sequência de blocos flutuantes com largura FIXA: o rótulo
       com 170px e o valor com 95px. Some o espaço, os rótulos longos ("Total
       Carteira ou Taxa de Filiação:") quebram em duas linhas, e como cada bloco
       flutua com uma altura diferente, valor e rótulo se desencontram — o
       "R$ 0,00" da Federação ia parar embaixo do título do quadro seguinte.

       Aqui cada par vira uma LINHA: rótulo à esquerda, valor à direita. */
    .caixa-balanco-wrap2 {
        display: flex !important;
        flex-wrap: wrap;
        align-items: baseline;
        padding: 4px 6px;
    }

    .caixa-balanco-wrap2 div {
        float: none !important;
        margin: 3px 0 !important;
    }

    /* 58 + 40 = 98%: os 2% que sobram são a folga que impede a linha de quebrar
       por arredondamento — com 62 + 38 exatos, o valor caía para a linha de
       baixo do rótulo. */
    .caixa-balanco-wrap2 .caixa-balanco2 {
        width: 58% !important;
        text-align: right;
        padding-right: 8px !important;
    }

    .caixa-balanco-wrap2 .caixa-positivo,
    .caixa-balanco-wrap2 .caixa-negativo {
        width: 40% !important;
        text-align: left;
    }

    /* Os totais grandes (verde e vermelho) ocupam a linha inteira. */
    .caixa-balanco-wrap2 .caixa-positivog,
    .caixa-balanco-wrap2 .caixa-negativog {
        width: 100% !important;
        text-align: center;
    }

    .caixa-balanco-wrap2 h2 {
        width: 100%;
        text-align: center;
        margin: 4px 0 !important;
    }

    /* As divisórias que só existiam para limpar o float (class EXATAMENTE
       "clear") não têm função numa linha flex — e viravam uma quebra solta.
       As que também são rótulo (`caixa-balanco2 clear`) continuam. */
    .caixa-balanco-wrap2 > div[class="clear"] {
        display: none !important;
    }

    /* ---- 4. ALVO DE TOQUE ------------------------------------------------ */
    /* Dedo não acerta botão de 20px. 40px é o mínimo confortável. */
    .btn, input[type="submit"], input[type="button"], button {
        min-height: 40px;
    }

    /* ---- 5. O MENU VIRA BOTÃO ------------------------------------------- */
    /* O menu clássico (MenuMatic) é uma barra horizontal de 1024px; no celular
       ele vira uma lista empilhada, aberta pelo botão que o responsivo.js põe
       logo acima dele. */
    /* O MENU ABERTO É UMA CAMADA, e não um pedaço transparente da página: sem
       fundo próprio e sem `z-index`, o que estava atrás dele (o sino grande do
       aviso de boletos, por exemplo) aparecia por cima dos itens. */
    /* O seletor precisa ser MAIS FORTE que o `[id^="header"] div` logo acima,
       que zera posição de tudo dentro do cabeçalho — o menu mora lá dentro e
       ficava sem camada, deixando o sino da página aparecer por cima. */
    div.menuantigo, [id^="header"] div.menuantigo {
        width: auto !important;
        position: relative !important;
        z-index: 900 !important;
    }
    /* A GAVETA (Eddy, 20/09/2026). Antes o menu aberto empurrava a página para
       baixo e mostrava os 12 a 15 grupos abertos de uma vez — perto de 95 links
       na tela, e para chegar em "Relatórios" era rolar sem fim. Agora ele
       desliza por cima, da esquerda, com os grupos FECHADOS: o desenho que o
       Instituto Samila Leão usa no srvbsb, feito com o menu que já existe. */
    div.menuantigo.menu-aberto, [id^="header"] div.menuantigo.menu-aberto {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        /* `vw` e não `%`: a porcentagem se mede pelo contêiner, e o menu vive
           dentro do cabeçalho, cujas regras de largura já foram soltas mais
           acima — dava 187px em vez dos 88% da tela. */
        width: 88vw !important;
        min-width: 88vw !important;
        max-width: 340px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        background: #fff !important;
        z-index: 2000 !important;
        box-shadow: 0 0 24px rgba(0, 0, 0, .35);
        padding-bottom: 40px;
    }

    /* O fundo escuro: dá a sensação de camada e fecha a gaveta ao toque. */
    .menu-fundo-responsivo {
        position: fixed;
        top: 0; right: 0; bottom: 0; left: 0;
        background: rgba(0, 0, 0, .45);
        z-index: 1999;
    }

    /* Com a gaveta aberta a página de trás não rola junto. */
    body.menu-travado-responsivo {
        overflow: hidden !important;
    }

    /* GRUPOS FECHADOS: abre um de cada vez, no toque (responsivo.js). */
    div.menuantigo.menu-aberto #nav > li > ul {
        display: none !important;
    }
    div.menuantigo.menu-aberto #nav > li.grupo-aberto-responsivo > ul {
        display: block !important;
    }

    /* A seta diz que ali dentro tem mais coisa, e para que lado ela está. */
    div.menuantigo.menu-aberto #nav > li.tem-grupo-responsivo > a::after {
        content: "\203A";          /* › */
        float: right;
        font-size: 20px;
        line-height: 1;
        color: #6b7580;
        transform: rotate(90deg);
        transform-origin: center;
    }
    div.menuantigo.menu-aberto #nav > li.tem-grupo-responsivo.grupo-aberto-responsivo > a::after {
        transform: rotate(270deg);
    }

    /* O cabeçalho da gaveta: um jeito de fechar sem procurar.
       Ele mora DENTRO do menu, que é a barra verde sempre visível — por isso só
       aparece com a gaveta aberta. Fechada, ficavam dois botões empilhados:
       "Menu" e "Fechar". */
    .menu-fechar-responsivo {
        display: none;
    }
    .menuantigo.menu-aberto .menu-fechar-responsivo {
        display: block;
        width: 100%;
        padding: 14px;
        border: 0;
        border-bottom: 1px solid #e3e6ea;
        background: #2e6b33;
        color: #fff;
        font-size: 16px;
        font-weight: bold;
        text-align: left;
        cursor: pointer;
    }

    .botao-menu-responsivo {
        display: block;
        /* DE BORDA A BORDA (Eddy, 20/09/2026): a largura é a do bloco, que agora
           não tem recuo nenhum (ver `#feature` acima). A conta com `vw` e margem
           negativa, que eu tinha usado antes, só funciona se o bloco estiver
           centralizado — e sobrava uma tira branca à esquerda. */
        width: 100% !important;
        margin: 0 !important;
        padding: 12px;
        border: 0;
        background: #2e6b33;
        color: #fff;
        font-size: 16px;
        font-weight: bold;
        text-align: left;
        cursor: pointer;
    }
    .botao-menu-responsivo .fa { margin-right: 8px; }

    .menuantigo > ul#nav { display: none; }
    .menuantigo.menu-aberto > ul#nav { display: block; width: auto !important; }

    /* Uma LISTA de verdade, e não fichas soltas: os itens do menu clássico são
       `inline-block` para virarem uma barra horizontal no computador. Em pé,
       cada item ocupa a linha inteira — é o que o dedo acerta. */
    .menuantigo.menu-aberto #nav > li,
    .menuantigo.menu-aberto #nav > li > ul > li {
        float: none !important;
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, .12) !important;
        border-radius: 0 !important;
        background: #fff !important;
    }
    /* O menu clássico foi desenhado para uma BARRA: os itens têm cor clara,
       altura fixa e texto centrado, porque ali eles são abas. Virando lista,
       precisam do contrário — texto escuro, alinhado à esquerda e com espaço
       para o dedo. O item de primeiro nível (Sindicato, Cadastros...) ganha
       fundo e negrito para separar cada grupo dos itens dele. */
    /* `float` vale para TODOS os níveis: era ele que punha o título do grupo
       lado a lado com os itens dele, em vez de um acima do outro. */
    .menuantigo.menu-aberto #nav li {
        float: none !important;
        display: block !important;
        width: 100% !important;
        clear: both !important;
    }
    .menuantigo.menu-aberto #nav a {
        float: none !important;
        display: block !important;
        width: auto !important;
        height: auto !important;
        padding: 12px 14px !important;
        font-size: 15px !important;
        line-height: 1.35 !important;
        text-align: left !important;
        white-space: normal !important;
        color: #1f2328 !important;
        background: #fff !important;
        border: 0 !important;
    }
    .menuantigo.menu-aberto #nav > li > a {
        font-weight: 700 !important;
        background: #eef1f4 !important;
    }
    /* `display` fica de fora daqui de proposito: quem abre e fecha submenu é a
       regra dos grupos, mais abaixo. */
    .menuantigo.menu-aberto #nav ul {
        padding-left: 0 !important;
        margin: 0 !important;
        background: #fff !important;
        position: static !important;
        width: auto !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    /* os submenus abrem empilhados, sem posicionamento absoluto */
    /* (a regra que abria todos os submenus saiu: agora quem manda sao os grupos) */

    .menuantigo.menu-aberto #nav ul li a {
        display: block;
        padding: 10px 14px 10px 30px;
        font-size: 14px;
        white-space: normal !important;
    }
}

/* No computador o botão do menu não existe. */
/* IMPRIMINDO A PARTIR DO CELULAR: o quadro rolável já existe no HTML quando a
   pessoa manda imprimir, e um quadro com rolagem CORTA no papel o que está para
   fora dele. No papel ele deixa de ser quadro e a tabela sai inteira. */
@media print {
    .tabela-rolavel {
        overflow: visible !important;
        max-width: none !important;
    }
    .botao-menu-responsivo { display: none !important; }
}

/* TUDO O QUE O responsivo.js MONTA PARA A GAVETA some fora do celular, e não só
   o botão "Menu" (Eddy, 23/09/2026). O script monta a gaveta quando a página
   abre com o celular EM PÉ; ao DEITAR um aparelho grande (915px, 932px) a tela
   passa dos 900 e esta folha volta ao modo computador — só que as peças já
   estão no HTML. O "Menu" sumia por esta regra; o "Fechar" da gaveta, cujo
   `display: none` mora dentro do bloco de celular, ficava solto acima da barra,
   e o grupo "Minha conta" virava uma segunda linha do menu. */
@media screen and (min-width: 901px), print {
    .botao-menu-responsivo,
    .menu-fechar-responsivo,
    .menu-conta-responsivo,
    .menu-fundo-responsivo { display: none !important; }
}