/* ============================================================
   A.R.L.S. Corpus Hermeticum n.º 903 — Sistema da Loja
   Navy nas faixas institucionais, creme no corpo de trabalho:
   fundo claro, botão um tom abaixo, cartão branco levantado
   por sombra.
   Cinzel apenas em rótulo e botão; Spectral no texto.
   ============================================================ */

:root {
    /* AFUNDADO em 11/09/2026, para o resto do sistema seguir o
       mesmo tom que o menu lateral aprendeu do seu modelo — mais
       escuro e fechado que o navy antigo. É SÓ ESTAS TRÊS
       VARIÁVEIS: como todo botão, faixa e aba escuros já são
       desenhados com var(--navy)/var(--navy-esc)/var(--navy-cl),
       a mudança chega a eles sozinha, sem tocar em cada tela.
       --gold e --gold-esc não mudam: já bateram com o modelo. */
    /* GOLD-CLARO, 11/09/2026 — o --gold comum (bom em borda e em
       texto sobre fundo claro) fica escuro demais como LETRA sobre
       o navy agora mais fechado: a serifa fina do Cinzel, fina e
       pequena, se mistura com o fundo por trás do anti-aliasing —
       o "Painel" ficou quase ilegível. Este dourado mais claro é
       só para TEXTO sobre navy (voltar, login); borda e texto sobre
       fundo claro continuam com --gold, que já está certo. */
    --gold-claro: #E3C68C;
    --navy:       #102039;
    --navy-esc:   #071427;
    --navy-cl:    #17365E;
    --gold:       #C8A451;
    --gold-esc:   #8C6A1F;
    --pergaminho: #F4EBD7;

    /* ---- As três claridades do corpo de trabalho ----
       Fundo mais claro, botão um tom abaixo, cartão branco
       levantado por sombra. A escada é de luz, não de cor.

       Os três são quentes de propósito. O prata neutro que veio
       das imagens das joias foi esfriando a paleta por dentro:
       quente e frio quase da mesma claridade, encostados, o olho
       lê como defeito, não como escolha. Aqui o creme entrou no
       prata, em vez de o cinza expulsar o creme — o ouro do
       Cinzel continua ouro, e não vira oliva.

       Para experimentar o neutro:
           --fundo: #FAFAFA;  --prata: #F1F1F1;  --prata-esc: #E2E2E4;
       — e me peça as joias invertidas de novo, que trazem este
       tom gravado dentro do PNG. */
    --fundo:      #FDFBF6;
    --prata:      #F2EFE9;
    --prata-esc:  #E6E0D4;
    /* Tamanho da joia no cartão-botão. Um valor só, para o
       cartão claro e o escuro: eles têm de sair iguais. */
    --joia-btn:   52px;
    --tinta:      #1A1D2B;
    /* AZUL, NUNCA CINZA — 15/09/2026 (pacote 286). Pedido direto
       do usuário: "pare de escrever com essa cor cinza no
       sistema... daqui pra frente é azul marinho" — e, perguntado
       se era só nas telas novas ou o sistema todo, respondeu que
       era o sistema todo. As duas variáveis eram tinta preta
       (#1A1D2B) DILUÍDA em transparência (66% e 45%) — sobre o
       fundo claro da Loja, essa diluição lê como cinza, não como
       azul. Trocadas por tons sólidos da MESMA família do --navy
       (que já é o título): --tinta-sec reaproveita o próprio
       --navy-cl (o azul dos títulos de cartão), e --tinta-fraca é
       um azul mais claro ainda, para quando o texto de apoio
       precisa de menos peso que o de --tinta-sec — nunca cinza,
       nas duas.

       São ~30 lugares dentro deste arquivo (.nota, .dica, rodapé,
       migalha, e por aí) e mais umas 40 telas que usam essas duas
       variáveis direto num style="" — como são variáveis, a troca
       aqui vale para todos os lugares de uma vez, sem precisar
       editar tela por tela. */
    --tinta-sec:  var(--navy-cl);
    --tinta-fraca:#3E5C82;
    --linha:      rgba(22,36,71,.16);
    --linha-ouro: rgba(200,164,81,.35);
    --ok:         #3B6D11;
    --ok-bg:      #EAF3DE;
    --pend:       #854F0B;
    --pend-bg:    #FAEEDA;
    --erro:       #A32D2D;
    --erro-bg:    #FCEBEB;
    /* NOVO em 16/09/2026 — o selo neutro (Egresso, na tela
       Obreiros): nem ok, nem pendência, nem erro — só "fora do
       quadro". Cinza com o mesmo viés azulado do --navy, não um
       cinza puro, para não parecer emprestado de outra paleta. */
    --neutro:     #5B6472;
    --neutro-bg:  #E9E5DC;
    --raio:       6px;
    /* O cartão pede um raio maior que o do botão: mesma família,
       escala diferente. Sem isto, um cartão de 700 px com canto
       de 6 px parece um retângulo cortado. */
    --raio-cartao: 10px;
    --serif:      'Spectral', Georgia, serif;
    --titulo:     'Cinzel', Georgia, serif;

    /* ---- O tom do menu lateral, tirado do seu modelo — 11/09/2026 ----
       Você apontou que a cor não bateu com o modelo. Conferi pixel a
       pixel: o modelo é bem mais escuro e uniforme que o --navy de
       cima (que é mais claro, mais "arroxeado"), e o dourado de
       destaque do item ativo é bem mais vivo que o --gold de texto.

       Entram como variáveis PRÓPRIAS, e não uma troca do --navy/
       --gold do resto do sistema: esta etapa é só o menu lateral, e
       mudar --navy/--gold mexeria em toda tela que já usa essa cor
       (faixa, botões, abas). Se a próxima etapa decidir que este tom
       mais escuro vale para tudo, é ali que --navy/--gold mudam. */
    --menu-fundo-1:   #0D1F35;
    --menu-fundo-2:   #060F1F;
    --menu-cartao:    #102640;
    --menu-moldura:   #071527;
    --menu-ativo-2:   #17365E;
    --menu-dourado:   #E8B84A;
    --menu-seta:      #8E9FB6;

    /* SEGUNDO AJUSTE, 11/09/2026 — você notou dois pontos certos:
       (1) o dourado do ÍCONE no seu modelo é mais claro e mais
       "dourado", menos alaranjado, que o --menu-dourado (esse é
       vivo de propósito, só para a faixa do item ativo); (2) a
       moldura do BOTÃO em si, no seu modelo, quase não se vê — é
       uma linha fininha azul-acinzentada, não dourada. Fui pixel a
       pixel de novo e tirei as duas cores certas. */
    --menu-icone:     #D6B87E;
    --menu-borda:     #33475D;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fundo);
    color: var(--tinta);
    font-family: var(--serif);
    font-size: 16px;
    line-height: 1.7;
    -webkit-text-size-adjust: 100%;
}

/* Link de texto: sem sublinhado, marcado pela cor. O sublinhado
   é herança do navegador e destoa de tudo o mais — some no
   toque, sublinha na leitura. */
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--gold-esc); }

/* Links soltos no corpo da página — "Trocar minha senha",
   "Voltar às atas" — ganham a marca do dourado.

   BUG ENCONTRADO EM 11/09/2026: esta regra não tinha :not(.voltar),
   e por especificidade (.conteudo p > a com 4 :not() é muito mais
   específica que .voltar sozinha) ela vencia a cor do botão
   "← Painel" — sempre trocando o --gold-claro dele para este
   --gold-esc, sem que nada no próprio .voltar estivesse errado.
   Era por isso que o "Painel" continuava escuro mesmo depois dos
   pacotes 188/189/190: a letra certa nunca chegava a valer. */
.conteudo p > a:not(.botao):not(.botao-ouro):not(.botao-cheio):not(.cartao-btn):not(.voltar) {
    color: var(--gold-esc); font-family: var(--titulo); font-size: 13.5px;
    letter-spacing: .4px;
}
.conteudo p > a:not(.botao):not(.botao-ouro):not(.botao-cheio):not(.cartao-btn):not(.voltar):hover {
    color: var(--navy);
}

/* ---------- Faixa institucional ---------- */
.topo {
    background: var(--navy);
    color: var(--pergaminho);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.topo-marca { line-height: 1.3; display: flex; align-items: center; gap: 16px;
              text-decoration: none; color: inherit; padding-right: 20px;
              border-right: 1px solid rgba(244,235,215,.18); }
.topo-brasao { width: 46px; height: 46px; flex: none; object-fit: contain; }
.topo-marca span { display: block; }

/* Voltar ao painel. Ao contrário da navegação, este permanece
   no celular: é lá que a rolagem até o rodapé custa mais. */
.topo-voltar {
    display: flex; align-items: center; gap: 6px; margin-left: 20px;
    color: var(--gold); text-decoration: none;
    font-family: var(--titulo); font-size: 12.5px; letter-spacing: 1px;
    padding: 7px 14px 7px 10px; border: 1px solid rgba(200,164,81,.4);
    border-radius: var(--raio); white-space: nowrap;
}
.topo-voltar:hover { border-color: var(--gold); background: rgba(200,164,81,.08); }
.topo-voltar svg { width: 15px; height: 15px; fill: none; stroke: currentColor;
                   stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 700px) {
    .topo-voltar { margin-left: 12px; padding: 6px 10px 6px 7px; font-size: 11.5px; }
    .topo-voltar span { display: none; }
}

/* A barra acompanha a rolagem: numa ata longa, voltar não pode
   exigir subir a página inteira. */
.topo { position: sticky; top: 0; z-index: 50; }

/* Voltar ao painel, sempre à vista. */
.topo-voltar {
    display: flex; align-items: center; gap: 6px; margin-left: 18px;
    color: rgba(244,235,215,.8); text-decoration: none;
    font-family: var(--titulo); font-size: 12.5px; letter-spacing: 1px;
    padding: 7px 12px; border: 1px solid rgba(244,235,215,.22);
    border-radius: var(--raio); white-space: nowrap;
}
.topo-voltar:hover { color: var(--pergaminho); border-color: var(--gold); }
.topo-voltar svg { width: 15px; height: 15px; fill: none; stroke: currentColor;
                   stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Menu de áreas. Usa <details>: abre sem JavaScript. */
.topo-menu { margin-left: auto; margin-right: 14px; position: relative; }
.topo-menu summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: 8px;
    color: rgba(244,235,215,.85);
    font-family: var(--titulo); font-size: 12.5px; letter-spacing: 1px;
    padding: 7px 12px; border: 1px solid rgba(244,235,215,.22);
    border-radius: var(--raio);
}
.topo-menu summary::-webkit-details-marker { display: none; }
.topo-menu summary:hover { color: var(--pergaminho); border-color: var(--gold); }
.topo-menu[open] summary { border-color: var(--gold); color: var(--pergaminho); }
.topo-menu summary svg { width: 17px; height: 17px; fill: none; stroke: currentColor;
                         stroke-width: 1.8; stroke-linecap: round; }

.menu-lista {
    position: absolute; right: 0; top: calc(100% + 8px);
    min-width: 230px; max-height: 70vh; overflow-y: auto;
    background: var(--fundo); border: 1px solid var(--linha);
    border-radius: var(--raio); padding: 10px 0;
    box-shadow: 0 10px 30px rgba(15,26,51,.22); z-index: 60;
}
.menu-grupo {
    margin: 10px 16px 4px; font-family: var(--titulo); font-size: 10.5px;
    letter-spacing: 2px; text-transform: uppercase; color: var(--gold-esc);
}
.menu-lista a {
    display: block; padding: 8px 16px; text-decoration: none;
    color: var(--navy); font-size: 14.5px;
}
.menu-lista a:hover { background: rgba(200,164,81,.13); }
.menu-lista a.ativo { color: var(--gold-esc); font-weight: 600; }

@media (max-width: 720px) {
    .topo { padding: 10px 12px; gap: 8px; }
    .topo-brasao { width: 32px; height: 32px; }
    /* A sigla sai e o nome não quebra. E, sobretudo, o nome CEDE
       espaço: sem isso ele mantinha a largura toda e os botões
       passavam por cima do "903". */
    .topo-sigla { display: none; }
    .topo-nome { font-size: 13.5px; white-space: nowrap;
                 overflow: hidden; text-overflow: ellipsis; }
    .topo-marca { padding-right: 0; border-right: none; gap: 9px;
                  min-width: 0; flex: 1 1 auto; overflow: hidden; }
    .topo-marca > span { min-width: 0; overflow: hidden; }
    .topo-voltar, .topo-menu, .topo-sair { flex: none; }
    .topo-voltar span, .topo-menu summary span { display: none; }
    .topo-voltar, .topo-menu summary { padding: 8px 11px; margin-left: 0; }
    .topo-menu { margin-right: 0; }
    .topo-sair { padding: 8px 12px; font-size: 11.5px; }
    .menu-lista { position: fixed; left: 10px; right: 10px; top: 60px;
                  min-width: 0; max-height: 74vh; }
}
@media (max-width: 400px) {
    .topo-nome { font-size: 12px; }
    .topo-brasao { width: 28px; height: 28px; }
}

.conteudo { position: relative; }
.topo-sigla {
    font-family: var(--titulo);
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--gold);
}
.topo-nome {
    font-family: var(--titulo);
    font-size: 15px;
    letter-spacing: .5px;
    color: var(--pergaminho);
}
.topo-sair {
    font-family: var(--titulo);
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--gold);
    text-decoration: none;
    border: 1px solid var(--linha-ouro);
    padding: 7px 14px;
    border-radius: var(--raio);
    white-space: nowrap;
}

/* ---------- Corpo ---------- */
.conteudo { max-width: 860px; margin: 0 auto; padding: 22px 18px 60px; }

/* CONTEÚDO LARGO — 16/09/2026. Só para as telas que pedem
   ($conteudo_largo = true antes de includes/layout.php), como o
   Quadro de Obreiros: os cartões de número e a tabela ficam
   espremidos nos 860px comuns. As demais telas não mudam. */
.conteudo-largo { max-width: 1180px; }

/* ESTE ROTULO FAZ DOIS PAPÉIS — 11/09/2026
   Antes do h1 é trilha ("Acervo" antes de "Visitas") — discreto
   está certo, o título grande é que deve saltar aos olhos. Mas
   é o MESMO rotulo que anuncia um bloco no meio do conteúdo
   ("Últimos 12 meses", "Situação", "Câmara do Meio") — aí ele É
   o título daquele pedaço, e 11px sem peso ficava fraco demais
   pra isso (o irmão perguntou sobre exatamente este caso, em
   frequencia.php). Sobe o peso e o corpo um pouco: ainda mais
   discreto que o título de cartão (que é navy, não este cinza),
   mas lê-se de cara nos dois papéis. */
.rotulo {
    font-family: var(--titulo);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: var(--navy);
    text-transform: uppercase;
}

/* ------------------------------------------------------------
   LINK QUE PARECE BOTÃO — 11/09/2026

   Um texto dourado sozinho, do tamanho de um link comum, não
   convida a clicar — mesmo com a seta ›. O usuário apontou
   exatamente isto em "Suspensão dos trabalhos" e "Licenciamento
   do irmão": "esses botões não me instigam a fazer nada".

   Em vez de inventar um estilo novo, uso o mesmo desenho dos
   cartões de módulo do painel (fundo, borda, canto arredondado,
   leve elevação ao passar o mouse) — o usuário já reconhece esse
   desenho como "isto é clicável" no resto do sistema. Sem ícone
   aqui (não existe joia própria para estes dois assuntos); o
   texto e a seta carregam o peso.
   ------------------------------------------------------------ */
.link-acao {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 14px 18px; margin-top: 10px;
    background: var(--prata); border: 1px solid var(--prata-esc);
    border-radius: var(--raio); text-decoration: none; color: var(--navy);
    font-family: var(--serif); font-size: 15.5px; font-weight: 600;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.link-acao .seta { color: var(--gold-esc); font-size: 19px; line-height: 1; }
.link-acao:hover {
    transform: translateY(-1px); box-shadow: 0 5px 14px rgba(22,36,71,.16);
}
.link-acao:active { transform: translateY(0); box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
    .link-acao { transition: none; }
    .link-acao:hover { transform: none; }
}
h1 {
    font-family: var(--titulo);
    font-size: 25px;
    font-weight: 600;
    color: var(--navy);
    margin: 4px 0 22px;
    letter-spacing: .5px;
}
h2 {
    font-family: var(--titulo);
    font-size: 17px;
    font-weight: 600;
    color: var(--navy);
    margin: 28px 0 12px;
}

/* ---------- Identificação do obreiro ---------- */
.obreiro { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; }
.obreiro-ini {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--navy); color: var(--gold);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--titulo); font-size: 15px; flex: 0 0 auto;
}
.obreiro-nome { font-size: 17px; font-weight: 600; color: var(--navy); }
.obreiro-grau { font-size: 13px; color: var(--tinta-sec); }

/* A antiga abertura do painel (.abertura/.abertura-ini/.filete)
   saiu em 16/09/2026 (pacote 298) — era exclusiva do painel.php,
   e o painel novo (modelo do ChatGPT) tem o seu próprio cabeçalho
   (.hero/.avatar/.welcome), no bloco novo ao fim deste arquivo. */

/* ---------- Cartões ---------- */
.cartao {
    background: #FFFFFF;
    border: 1px solid var(--linha-ouro);
    border-radius: var(--raio-cartao);
    padding: 18px 20px;
    margin-bottom: 18px;
    box-shadow:
        inset 0 1px 0 #FFFFFF,
        0 1px 2px rgba(22,36,71,.05),
        0 4px 14px rgba(22,36,71,.05);
}
.cartao-topo {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--linha);
}
/* O rótulo do cartão em azul, e não no cinza dos rótulos de
   página: dentro do cartão ele é TÍTULO, e título se lê antes
   do resto.

   TÍTULO DE VERDADE, NÃO SÓ DE COR — 11/09/2026
   Estava do tamanho do rótulo de página (12px, peso normal) —
   certo em contraste de cor, mas pequeno e fino demais para ser
   a primeira coisa lida num cartão ou num formulário longo (a
   Redação da ata, por exemplo). Sobe o corpo, ganha peso, e o
   espaçamento das letras encolhe um pouco para não parecer
   esparramado no tamanho novo. */
.cartao-topo .rotulo {
    color: var(--navy); font-size: 16px; font-weight: 600;
    letter-spacing: 1.4px;
}
.aviso {
    background: var(--pergaminho);
    border-left: 3px solid var(--gold);
    padding: 12px 15px;
    margin-bottom: 20px;
    font-size: 14px; line-height: 1.65;
}

.linha-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 0; border-top: 1px solid var(--linha);
    font-size: 14px;
}
.linha-item:first-of-type { border-top: none; }
.linha-item .cresce { flex: 1; }
.linha-valor { font-size: 13px; color: var(--tinta-sec); }

/* ============================================================
   OS COMANDOS DO PROCESSO — 06/09/2026

   Os ritos de eliminação correm uma vez por ano, e ninguém
   decora onde fica o quê. O sistema estava sóbrio a ponto de
   os comandos se confundirem com o pergaminho: "abrir",
   "devolver" e os avisos de vez liam-se como texto corrido.

   Sobriedade é do TIMBRE, não do comando. Três níveis:

     1. O ATO QUE LHE CABE AGORA — dourado cheio. É o que a
        pessoa tem de achar sem procurar.

     2. O QUE ELA PODE FAZER — contorno visível, legível de
        longe, sem competir com o de cima.

     3. O QUE ELA PRECISA SABER — faixa lateral e fundo, para
        o aviso se separar da tela em vez de sumir nela.
   ============================================================ */

/* ---- 2. As ações da linha: abrir, devolver ---- */
.acao-peca {
    font-family: var(--titulo); font-size: 11px;
    letter-spacing: .08em; text-transform: uppercase;
    white-space: nowrap; text-decoration: none; cursor: pointer;
    color: var(--navy); background: var(--prata);
    border: 1px solid var(--linha-ouro); border-radius: var(--raio);
    padding: 6px 14px; display: inline-block;
}
.acao-peca:hover { background: var(--pergaminho);
                   border-color: var(--gold); }

/* A que pede cuidado — devolver é recusa — puxa para o âmbar
   do "pendente", que o sistema já usa para o que exige atenção. */
.acao-peca-cuidado {
    color: var(--pend); background: var(--pend-bg);
    border-color: rgba(133,79,11,.35);
}
.acao-peca-cuidado:hover { background: #F6E4C6;
                           border-color: var(--pend); }

/* ---- 3. O cartão da vez ---- */
.vez-titulo {
    font-family: var(--titulo); font-size: 13px;
    letter-spacing: .1em; text-transform: uppercase;
}
/* É A SUA VEZ: dourado, faixa cheia, fundo quente. */
.cartao-vez        { border-left: 4px solid var(--gold);
                     background: linear-gradient(
                         90deg, var(--pergaminho) 0%, #fff 55%); }
.cartao-vez .vez-titulo { color: var(--gold-esc); }

/* ESPERA: navy discreto, sem fundo — é notícia, não chamado. */
.cartao-espera     { border-left: 4px solid var(--linha); }
.cartao-espera .vez-titulo { color: var(--tinta-sec); }

/* VENCIDO: vermelho. O processo está travado, e isso não pode
   parecer com o resto. */
.cartao-vencido    { border-left: 4px solid var(--erro);
                     background: linear-gradient(
                         90deg, var(--erro-bg) 0%, #fff 55%); }
.cartao-vencido .vez-titulo { color: var(--erro); }

/* ---- O que acontece depois ---- */
/* Num rito raro, saber o próximo passo vale tanto quanto achar
   o botão. Vai por baixo do ato, com a régua do papel. */
.vez-depois {
    margin-top: 12px; padding-top: 10px;
    border-top: 1px dashed var(--linha-ouro);
    font-size: 13px; color: var(--tinta-sec);
}
.vez-depois strong { color: var(--tinta); }

/* ------------------------------------------------------------
   DEVOLVER UM PARECER — 06/09/2026

   Fica NA MESMA LINHA do "abrir", com o mesmo peso visual. A
   linha-item é flex, e um <details> solto ocupava a largura
   toda, espremendo o título da peça numa coluna de três
   palavras.

   FECHADO: botão discreto ao lado do "abrir".
   ABERTO:  ganha a linha inteira e o formulário desce por
            baixo, sem espremer nada — é o que `flex-wrap` mais
            `flex-basis:100%` fazem, sem posicionamento
            absoluto, que quebraria em tela estreita.
   ------------------------------------------------------------ */
/*  A quebra vale SÓ na linha que tem o botão: pôr flex-wrap em
    toda linha-item mudaria 274 linhas do sistema por causa de
    uma.

    Por CLASSE, e não por :has() — o seletor é recente, e num
    navegador que não o entenda a linha não quebraria e o
    formulário sairia espremido. Classe funciona em todos. */
.linha-com-devolver       { flex-wrap: wrap; }
.devolver-peca            { flex: 0 0 auto; }
.devolver-peca[open]      { flex: 1 0 100%; margin-top: 8px; }

/*  A aparência vem de .acao-peca, no bloco dos comandos: aqui
    fica só o que é do <details>. Repetir a cor nos dois lugares
    faria os botões divergirem no primeiro ajuste. */
.devolver-peca > summary::-webkit-details-marker { display: none; }
.devolver-peca > summary { list-style: none; }
.devolver-peca[open] > summary { background: #F6E4C6;
                                 border-color: var(--pend); }

.devolver-peca > form     { margin-top: 10px; }

.selo {
    font-size: 12px; padding: 3px 12px; border-radius: 20px;
    white-space: nowrap; display: inline-block;
}
.selo-ok   { background: var(--ok-bg);   color: var(--ok); }
.selo-pend { background: var(--pend-bg); color: var(--pend); }

/* ---------- Botões ---------- */
.botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
/* ------------------------------------------------------------
   O ATRIBUTO `hidden` TEM DE VALER — 03/09/2026

   `hidden` é `display: none` na folha do NAVEGADOR, e qualquer
   regra do site vence por especificidade. A `.botao` abaixo
   declara `display: flex`, e o resultado foi um botão marcado
   como escondido aparecendo para todo mundo — inclusive para
   quem não devia vê-lo, e sem o clique ligado, de modo que
   tocá-lo não fazia nada.

   Custou meia hora de procura no lugar errado. Esta regra vale
   para o sistema inteiro e evita a repetição do defeito em
   qualquer elemento futuro.
   ------------------------------------------------------------ */
[hidden] { display: none !important; }

.botao {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 7px; text-align: center;
    padding: 17px 10px; min-height: 84px;
    font-family: var(--titulo); font-size: 12.5px; letter-spacing: 1.2px;
    border-radius: var(--raio); text-decoration: none; cursor: pointer;
    border: 1px solid transparent;
}
.botao-cheio  { background: var(--navy); color: var(--pergaminho); }

.botao, .botao-ouro, .botao-cheio {
    transition: transform .16s ease, box-shadow .16s ease,
                background .16s ease, border-color .16s ease;
}
.botao:hover, .botao-ouro:hover, .botao-cheio:hover {
    transform: translateY(-1px); box-shadow: 0 5px 14px rgba(22,36,71,.16);
}
.botao:active, .botao-ouro:active, .botao-cheio:active {
    transform: translateY(0); box-shadow: none;
}

/* Quem prefere menos movimento na tela — ajuste do sistema
   operacional — não recebe nenhum. */
@media (prefers-reduced-motion: reduce) {
    .cartao-btn, .botao, .botao-ouro, .botao-cheio { transition: none; }
    .cartao-btn:hover, .botao:hover, .botao-ouro:hover, .botao-cheio:hover {
        transform: none;
    }
}
.botao-vazio  { background: transparent; color: var(--navy); border-color: var(--linha); }
.botao svg { width: 22px; height: 22px; stroke: var(--gold); fill: none;
             stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.botao-vazio svg { stroke: var(--gold-esc); }

/* NOVO em 11/09/2026 — pedido do usuário: os botões de ação do
   cartão do Quadro (Ficha, Trabalhos e visitas, Emitir
   recomendação) usavam só `.botao`, que sem modificador de cor
   fica com fundo e borda transparentes — texto solto, sem nenhuma
   presença. O usuário pediu o mesmo tratamento marinho com letra
   dourada que já aparece na lateral do sistema (o cartão do irmão
   no pé do menu, os círculos de iniciais). */
.botao-marinho { background: var(--navy); color: var(--gold); border-color: var(--navy-esc); }
.botao-marinho svg { stroke: var(--gold); }

/* NOVO em 11/09/2026 — pedido do usuário: os três botões do
   cartão do Quadro (Ficha, Trabalhos e visitas, Emitir
   recomendação) ficavam esticados pela largura toda do cartão,
   porque `.botao` sozinho é flex e preenche o container em bloco.
   Aqui eles ficam do tamanho do próprio texto, lado a lado (ou
   quebrando para a linha de baixo em tela estreita) e
   centralizados. */
.card-acoes {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 8px; margin-top: 10px;
}
.card-acoes .botao {
    display: inline-flex; flex-direction: row; flex: 0 0 auto;
    min-height: 0; padding: 9px 16px; font-size: 11.5px;
}
/* NOVO em 12/09/2026 — Trabalhos/Visitas/Instrução, logo abaixo do
   nome no cartão do Quadro (coluna.php), pedem o mesmo tamanho
   compacto de .card-acoes .botao acima, mas em .botao-ouro: o
   usuário quer esses três em destaque dourado, para saltar aos
   olhos como o caminho até o histórico do obreiro. Sem esta regra,
   .botao-ouro cairia no tamanho grande de botão de formulário
   (14px 30px) e destoaria do cartão. */
.card-acoes .botao-ouro {
    display: inline-flex; flex-direction: row; flex: 0 0 auto;
    min-height: 0; padding: 9px 16px; font-size: 11.5px; letter-spacing: 1.2px;
}

/* NOVO em 12/09/2026 — a mesma fileira de botões de .card-acoes,
   só encostada na margem esquerda do cartão em vez de centralizada:
   pedido do usuário para Trabalhos/Visitas/Instrução, que ficam
   logo abaixo do nome (que também começa na margem esquerda) — e
   não no rodapé, onde "Emitir recomendação" continua centralizado
   sozinho, como sempre. */
.card-acoes-esq { justify-content: flex-start; }

/* NOVO em 12/09/2026 — .botao-mini: mesma redução de sempre (sem
   os 84px de altura mínima do botão de painel, sem coluna de
   ícone), só que como classe própria — em vez de depender do
   contêiner ao redor já ter a regra certa (.card-acoes, .linha-
   valor, form...). Pedido do usuário: "Abrir o trabalho", "Ver
   versão final assinada" e "Ver arquivo" ficavam com o tamanho
   grande do botão de painel dentro de um <p> comum, sem fundo
   nenhum (.botao sozinho é transparente) — texto solto boiando
   num espaço enorme, sem nenhuma presença. Usar junto com
   .botao-marinho (fundo marinho, letra dourada) resolve os dois
   problemas de uma vez. */
.botao-mini {
    display: inline-flex; flex-direction: row; flex: 0 0 auto;
    min-height: 0; padding: 5px 12px; font-size: 11px;
    letter-spacing: 1px;
}

/* As joias dos ofícios. Vêm em prata, como na GLESP — por isso
   não recebem a cor dourada dos ícones de traço. */
.botao img.joia { width: 30px; height: 30px; object-fit: contain; }

/* ---------- Selo de pendência no cartão ----------
   O número no canto, como o das mensagens não lidas. Reservado
   ao que tem PRAZO e some sozinho — hoje, só as atas em
   circulação, que saem às 19h do dia da sessão.

   Se todo cartão ganhar número, este perde o destaque
   justamente por ser o que vence. */
.cartao-btn { position: relative; }
.cartao-aviso {
    position: absolute; top: 8px; right: 10px; z-index: 2;
    min-width: 20px; height: 20px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    background: var(--pend); color: #fff;
    font-family: var(--serif); font-size: 11.5px; font-weight: 700;
    line-height: 1; letter-spacing: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,.18);
}

/* ============================================================
   MOLDURA COM MENU LATERAL — 28/08/2026

   A lateral é fixa no computador e vira gaveta no celular. O
   <details> faz a gaveta funcionar sem JavaScript; acima de
   1100px ele é ignorado e a lateral fica sempre visível.
   (Era 980px até 16/10/2026: num tablet na horizontal ou notebook de
   1024px a lateral fixa deixava só ≈780px para o conteúdo.)
   ============================================================ */
:root { --lateral: 246px; }

.com-lateral { margin: 0; }

/* --- a gaveta ---
   Sem <details>: o Chrome recente esconde o conteúdo de um
   <details> fechado por um mecanismo que `display` no filho não
   vence, e a lateral não aparecia nem no computador. Aqui quem
   abre e fecha é um checkbox escondido — CSS puro, sem
   JavaScript. */
/* Escondido sem display:none — o seletor irmão :checked precisa
   do elemento no fluxo em navegador antigo. */
.gaveta-check {
    position: absolute; width: 1px; height: 1px;
    opacity: 0; pointer-events: none; margin: 0;
}

.gaveta-botao {
    position: fixed; top: 10px; left: 10px; z-index: 60;
    width: 42px; height: 42px; border-radius: 10px;
    display: none; align-items: center; justify-content: center;
    background: var(--menu-fundo-1); cursor: pointer;
}
.gaveta-botao svg {
    width: 22px; height: 22px; fill: none; stroke: var(--pergaminho);
    stroke-width: 2; stroke-linecap: round;
}

/* O véu escuro atrás da gaveta aberta. Clicar nele fecha. */
.gaveta-fundo { display: none; }

/* --- a lateral --- */
.lateral {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 55;
    width: var(--lateral);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    padding: 14px 0 8px;
    background: linear-gradient(180deg, var(--menu-fundo-1) 0%, var(--menu-fundo-2) 100%);
    color: var(--pergaminho);
    box-shadow: 2px 0 0 var(--linha-ouro), 4px 0 16px var(--linha);
    scrollbar-width: thin;
    scrollbar-color: var(--menu-cartao) var(--menu-fundo-2);
}
.lateral::-webkit-scrollbar { width: 5px; }
.lateral::-webkit-scrollbar-track { background: var(--menu-fundo-2); }
.lateral::-webkit-scrollbar-thumb { background: var(--menu-cartao); border-radius: 999px; }

/* --- a marca da Loja ---
   COMPACTADA em 11/09/2026: era imagem em cima e texto embaixo,
   e a soma das duas linhas empurrava o primeiro item para baixo.
   Agora é uma única linha — joia à esquerda, sigla e nome à
   direita — mantendo a mesma identidade em menos altura. */
.lateral-marca {
    display: flex; align-items: center; gap: 10px;
    margin: 0 10px 8px;
    padding: 8px 8px 12px;
    text-decoration: none;
    border-bottom: 1px solid var(--linha-ouro);
}
.lateral-marca img {
    display: block; flex: none;
    width: 44px; height: 44px;
    padding: 5px;
    object-fit: contain;
    border-radius: var(--raio-cartao);
    background: radial-gradient(circle, var(--menu-ativo-2) 0%, var(--menu-fundo-1) 68%,
                var(--menu-fundo-2) 100%);
    box-shadow: inset 0 0 0 1px var(--linha-ouro), 0 3px 8px var(--linha);
}
.lateral-marca-txt { min-width: 0; text-align: left; }
.lateral-sigla {
    display: block;
    font-family: var(--titulo); font-size: 9.5px; line-height: 1.2;
    letter-spacing: 2.5px; color: var(--gold);
}
.lateral-nome {
    display: block; margin-top: 3px;
    font-family: var(--titulo); font-size: 13px; line-height: 1.25;
    letter-spacing: .35px; color: var(--pergaminho);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- o título de grupo, com o filete até a borda --- */
.lateral-grupo {
    display: flex; align-items: center; gap: 9px;
    margin: 12px 10px 5px; padding: 0 0 0 7px;
    font-family: var(--titulo); font-size: 10.5px; font-weight: 500;
    line-height: 1; letter-spacing: 2.1px; text-transform: uppercase;
    color: var(--gold); white-space: nowrap;
}
.lateral-grupo::after {
    content: ""; flex: 1; height: 1px;
    background: var(--gold-esc); opacity: .8;
}

/* --- a placa de cada item ---
   AFINADA em 11/09/2026: cantos mais arredondados (raio-cartao),
   mais respiro vertical e um espaço à direita para a seta — o
   mesmo espírito de sempre ("menos ruído, mais clareza"), sem
   trocar a estrutura. */
.lateral-item {
    position: relative;
    display: flex; align-items: center;
    min-height: 40px;
    margin: 0 10px 4px;
    padding: 6px 28px 6px 50px;
    box-sizing: border-box;
    border: 1px solid var(--menu-borda);
    border-radius: var(--raio-cartao);
    background: var(--menu-cartao);
    color: var(--pergaminho); text-decoration: none;
    font-family: var(--serif); font-size: 14.5px; font-weight: 500;
    line-height: 1.15;
    box-shadow: 0 1px 0 var(--linha);
    transition: background .14s ease, border-color .14s ease,
                color .14s ease, box-shadow .14s ease, transform .14s ease;
}

/* A MOLDURA DA JOIA é desenhada pelo item, e não pela imagem:
   assim serve igual ao <img> e ao <svg>. */
.lateral-item::before {
    content: "";
    position: absolute; left: 9px; top: 50%;
    width: 32px; height: 32px;
    box-sizing: border-box;
    transform: translateY(-50%);
    border: 1px solid var(--menu-icone);
    border-radius: calc(var(--raio-cartao) - 3px);
    background: var(--menu-moldura);
    box-shadow: inset 0 0 0 1px var(--linha);
}

/* A SETA À DIREITA — 11/09/2026. Puro CSS, sem novo elemento no
   HTML: um quadrado girado 45° mostrando só duas bordas. */
.lateral-item::after {
    content: "";
    position: absolute; right: 13px; top: 50%;
    width: 6px; height: 6px;
    transform: translateY(-60%) rotate(45deg);
    border-top: 1.5px solid var(--menu-seta);
    border-right: 1.5px solid var(--menu-seta);
    opacity: .6;
    transition: opacity .14s ease;
}
.lateral-item:hover::after, .lateral-item.ativo::after { opacity: 1; }

/* A JOIA EM PNG vem prateada. brightness(0) apaga o prata e o
   resto do filtro reconstrói o desenho em ouro, preservando a
   transparência. */
.lateral-item img {
    position: absolute; z-index: 1;
    left: 16px; top: 50%;
    width: 20px; height: 20px;
    object-fit: contain;
    transform: translateY(-50%);
    /* Reafinado em 11/09/2026 (e de novo depois, mais claro) para
       o dourado do ícone bater com o modelo — mais claro e menos
       alaranjado que a primeira tentativa. */
    filter: brightness(0) saturate(100%) invert(82%) sepia(35%)
            saturate(650%) hue-rotate(1deg) brightness(124%) contrast(90%);
}

.lateral-item svg {
    position: absolute; z-index: 1;
    left: 16px; top: 50%;
    width: 20px; height: 20px;
    transform: translateY(-50%);
    fill: none; stroke: var(--menu-icone); stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round;
}

.lateral-item:hover {
    background: var(--menu-ativo-2);
    border-color: var(--menu-icone);
    color: var(--pergaminho);
    box-shadow: 0 2px 0 var(--linha);
    transform: translateX(1px);
}
.lateral-item:hover::before { border-color: var(--menu-icone); }

/* O ATIVO ficou mais limpo em 11/09/2026, e mais uma vez depois:
   no seu modelo o item ativo NÃO TEM BORDA NENHUMA — só o degradê
   e a faixa dourada à esquerda, arredondada junto com o cartão
   (por isso o box-shadow, e não uma borda de fato: ele acompanha o
   raio do cartão nos dois cantos). */
.lateral-item.ativo {
    background: linear-gradient(135deg, var(--menu-cartao) 0%, var(--menu-ativo-2) 100%);
    border-color: transparent;
    color: var(--pergaminho);
    font-weight: 600;
    box-shadow: inset 4px 0 0 var(--menu-dourado), 0 3px 8px var(--linha);
}
.lateral-item.ativo::before {
    border-color: var(--menu-icone);
    background: var(--menu-fundo-1);
    box-shadow: inset 0 0 0 1px var(--linha-ouro);
}
.lateral-item.ativo:hover {
    border-color: transparent; transform: none;
}

.lateral-item:focus-visible, .lateral-marca:focus-visible {
    outline: 2px solid var(--gold); outline-offset: 2px;
}
.lateral-item:focus-visible { border-color: var(--gold); }

/* ---------- Quando a lista é longa ----------
   O Aprendiz vê treze entradas; o Master, vinte e oito. A
   compactação vem do TAMANHO DA LISTA, e não do tamanho da
   tela: quem tem poucas entradas nunca precisa dela, e quem tem
   muitas precisa em qualquer monitor. */
.lateral:has(.lateral-item:nth-of-type(20)) { padding-top: 10px; }
.lateral:has(.lateral-item:nth-of-type(20)) .lateral-marca {
    padding: 6px 8px 9px;
}
.lateral:has(.lateral-item:nth-of-type(20)) .lateral-marca img {
    width: 36px; height: 36px; padding: 4px;
}
.lateral:has(.lateral-item:nth-of-type(20)) .lateral-sigla { font-size: 9px; }
.lateral:has(.lateral-item:nth-of-type(20)) .lateral-nome {
    margin-top: 2px; font-size: 12px;
}
.lateral:has(.lateral-item:nth-of-type(20)) .lateral-grupo {
    margin-top: 9px; margin-bottom: 3px;
    font-size: 10px; letter-spacing: 1.8px;
}
.lateral:has(.lateral-item:nth-of-type(20)) .lateral-item {
    min-height: 31px; margin-bottom: 2px; padding: 2px 24px 2px 43px;
    font-size: 14px; line-height: 1.1;
}
.lateral:has(.lateral-item:nth-of-type(20)) .lateral-item::before {
    left: 8px; width: 25px; height: 25px;
}
.lateral:has(.lateral-item:nth-of-type(20)) .lateral-item::after {
    right: 11px;
}
.lateral:has(.lateral-item:nth-of-type(20)) .lateral-item img,
.lateral:has(.lateral-item:nth-of-type(20)) .lateral-item svg {
    left: 13px; width: 15px; height: 15px;
}

/* --- o irmão, no pé da lateral --- */
.lateral-rodape {
    margin-top: auto; padding: 12px 14px 14px;
    border-top: 1px solid rgba(255,255,255,.10);
}
.lateral-eu {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none; padding: 8px; border-radius: 10px;
    background: rgba(255,255,255,.05);
}
.lateral-eu:hover { background: rgba(255,255,255,.09); }
.lateral-foto {
    width: 42px; height: 42px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--gold); flex: none;
}
.lateral-ini {
    width: 42px; height: 42px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--gold); color: var(--gold);
    font-family: var(--titulo); font-size: 15px;
}
.lateral-eu-txt { min-width: 0; }
.lateral-eu-nome {
    display: block; font-family: var(--titulo); font-size: 13px;
    color: var(--pergaminho); line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lateral-eu-grau { display: block; font-size: 11px; color: var(--gold); margin-top: 2px; }

.lateral-sair {
    display: flex; align-items: center; gap: 9px;
    margin-top: 10px; padding: 8px 8px; border-radius: 8px;
    text-decoration: none; color: rgba(247,244,236,.7); font-size: 13px;
}
.lateral-sair:hover { background: rgba(255,255,255,.06); color: #fff; }
.lateral-sair svg {
    width: 17px; height: 17px; fill: none; stroke: currentColor;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* --- a faixa de cima --- */
/* A altura entra como variável porque a volta gruda logo
   abaixo dela e precisa saber onde parar. */
:root { --faixa-altura: 52px; }
@media (max-width: 700px) { :root { --faixa-altura: 46px; } }

.faixa {
    position: sticky; top: 0; z-index: 40;
    margin-left: var(--lateral);
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 14px 26px;
    background: linear-gradient(180deg, var(--pergaminho), var(--fundo));
    border-bottom: 1px solid var(--linha-ouro);
    box-shadow: 0 1px 0 var(--linha);
}
.faixa-titulo {
    font-family: var(--titulo); font-size: 17px; letter-spacing: 1px;
    text-transform: uppercase; color: var(--navy);
}
.faixa-loja {
    font-family: var(--titulo); font-size: 12px; color: var(--tinta-sec);
    text-align: right; line-height: 1.3;
}
.faixa-sigla { display: block; font-size: 9px; letter-spacing: 2.5px; color: var(--gold-esc); }

/* --- o conteúdo, ao lado da lateral --- */
/* CORRIGIDO em 28/08/2026.
   Antes era só `margin-left: var(--lateral)`. Com isso o
   `margin: 0 auto` do .conteudo perdia efeito: o `auto` da
   direita empurrava tudo para a esquerda, e as telas ficavam
   coladas na lateral com um vazio à direita.

   Agora a lateral vira um recuo do bloco inteiro, e o conteúdo
   se centraliza NO ESPAÇO QUE SOBRA, não na janela. */
.com-lateral .conteudo,
.com-lateral .rodape {
    margin-left: calc(var(--lateral) + max(0px, (100vw - var(--lateral) - 860px) / 2));
    margin-right: 0;
}

/* O CONTEÚDO LARGO TINHA A CENTRALIZAÇÃO DO ESTREITO — 16/09/2026.
   A regra acima centra um bloco de 860px no espaço que sobra da
   lateral — o "860px" está dentro da própria conta. O Quadro de
   Obreiros e a Frequência pedem `.conteudo-largo` (1180px) mas
   continuavam usando essa mesma conta, pensada para 860: a margem
   esquerda saía certa para um bloco mais estreito, e o bloco de
   1180 sobrava para a direita — parecia "puxado para a esquerda",
   e em telas menos largas chegava a estourar a largura disponível.
   Mesma fórmula, só com 1180 no lugar de 860. */
.com-lateral .conteudo.conteudo-largo {
    margin-left: calc(var(--lateral) + max(0px, (100vw - var(--lateral) - 1180px) / 2));
    margin-right: 0;
}

/* O painel ganhou navegação lateral, mas continuava preso aos
   860px do conteúdo comum e deixava quase metade do monitor sem
   uso. Só a home do painel abre mais: telas de leitura, atas e
   formulários continuam na medida curta que favorece leitura.

   TROCADO DE :has(.topo-painel) PARA A CLASSE DO <body> —
   16/09/2026 (pacote 298). O painel novo (modelo do ChatGPT) não
   tem mais `.topo-painel`; a classe `pagina-painel`, que o body
   já ganha só em painel.php (ver includes/layout.php), é o
   gatilho mais firme — não depende de nome de div interna.
   MAX-WIDTH SUBIU PARA 1380px: é a medida do modelo (`.page`). */
.com-lateral.pagina-painel main.conteudo {
    width: calc(100% - var(--lateral));
    max-width: 1380px;
    margin-left: calc(var(--lateral) + max(0px, (100vw - var(--lateral) - 1380px) / 2));
    margin-right: 0;
    padding-left: 28px;
    padding-right: 28px;
}

/* O rodapé segue o mesmo eixo do painel alargado. Sem isto ele
   ficava com a margem antiga — encostado à lateral, desalinhado
   do conteúdo que acabou de terminar. Acrescentado em
   28/08/2026, na conferência. */
.com-lateral.pagina-painel .rodape {
    width: calc(100% - var(--lateral));
    max-width: 1380px;
    margin-left: calc(var(--lateral) + max(0px, (100vw - var(--lateral) - 1380px) / 2));
    margin-right: 0;
    padding-left: 28px;
    padding-right: 28px;
}

@media (max-width: 1100px) {
    /* No celular a lateral sai da tela e volta pela gaveta. O
       conteúdo ocupa a largura toda. */
    /* Sem lateral fixa, o conteúdo volta a se centralizar
       sozinho: margin-right precisa voltar a 'auto', que a
       regra do computador zerou. */
    .com-lateral .conteudo,
    .com-lateral .rodape,
    .com-lateral .conteudo.conteudo-largo { margin-left: auto; margin-right: auto; }
    .faixa { margin-left: 0; }
    .com-lateral.pagina-painel main.conteudo,
    .com-lateral.pagina-painel .rodape {
        width: 100%; max-width: 860px;
        margin-left: auto; margin-right: auto;
        padding-left: 18px; padding-right: 18px;
    }
    /* O botão da gaveta é fixo no canto: a faixa precisa abrir
       espaço para ele, senão o título passa por baixo. */
    .faixa { padding-left: 66px; padding-right: 14px; gap: 10px; }
    .faixa-titulo { font-size: 14px; letter-spacing: .8px; }
    .faixa-loja { font-size: 10.5px; }
    .faixa-sigla { font-size: 8px; letter-spacing: 2px; }

    .gaveta-botao { display: flex; }

    .lateral {
        width: min(288px, 88vw);
        overscroll-behavior: contain;
        transform: translateX(-100%);
        transition: transform .22s ease;
    }
    .gaveta-check:checked ~ .lateral { transform: translateX(0); }

    .gaveta-check:checked ~ .gaveta-fundo {
        display: block; position: fixed; inset: 0; z-index: 54;
        background: rgba(15,26,51,.45);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lateral { transition: none; }
}

/* Em telas mais baixas o menu do Master encosta no rodapé antes
   de faltar largura. A compressão extra fica condicionada à
   altura: no monitor alto sobra ar; no notebook baixo cabe tudo. */
@media (max-height: 860px) and (min-width: 1101px) {
    .lateral { padding-top: 12px; }
    .lateral-marca { padding: 6px 8px 10px; }
    .lateral-marca img { width: 38px; height: 38px; }
    .lateral-grupo { margin: 10px 0 3px; font-size: 9px; }
    .lateral-item { padding-top: 6px; padding-bottom: 6px; font-size: 13px; }
    .lateral-rodape { padding-top: 10px; }
}

@media (max-height: 760px) and (min-width: 1101px) {
    .lateral-grupo { margin-top: 8px; }
    .lateral-item { padding-top: 5px; padding-bottom: 5px; font-size: 12.5px; }
    .lateral-eu { padding: 7px; }
}

/* O painel antigo (topo/resumo, .passo, rodape-painel,
   .painel-meio, "ver mais", "A semana pede de você" em
   .cartao-vez) foi TODO substituído em 16/09/2026 (pacote 298)
   pelo desenho novo, construído no ChatGPT a pedido do usuário
   e implementado tal como ele devolveu. O bloco novo
   (.painel-novo e tudo dentro dele) vive ao fim deste arquivo —
   procure "PAINEL NOVO — MODELO DO CHATGPT". Nenhuma classe daqui
   era usada fora de painel.php, então nada mais no site foi
   tocado. */

/* ---------- Filtros em fita ----------
   REGRA DA CASA, firmada em 27/08/2026.

   `.botao` é `display:flex` com `min-height:84px`: foi desenhado
   para os cartões grandes do painel, e empilha quando usado
   como link de filtro. Com dez anos de Loja, os botões de ano
   viravam uma coluna de dez, e o irmão rolava a tela inteira
   para chegar à lista.

   Para escolher entre recortes — anos, abas, colunas — use
   `.fita`. Ela põe os botões lado a lado, quebra em linha nova
   quando falta largura e, no celular, rola na horizontal em vez
   de crescer para baixo.

   O princípio: o que o irmão precisa VER cabe na tela; o que
   ele precisa ESCOLHER cabe numa fita. Rolagem vertical é para
   conteúdo, nunca para navegação. */
.fita {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin: 0 0 18px;
}

/* ---------- A FITA É A ABA ----------
   Unificado em 29/08/2026.

   As duas fazem a mesma coisa — escolher entre recortes — e
   tinham desenhos diferentes: a fita em pastilha redonda com
   ouro cheio, a aba em placa retangular com azul. Duas telas
   lado a lado pareciam de sistemas distintos.

   Vale o desenho da aba, que é o mais recente e o mais legível.
   As regras abaixo repetem as de `.aba` de propósito, e não com
   um seletor comum: a fita tem estados próprios
   (`aria-current`, que a aba não usa) e um dia pode precisar
   divergir. O que não pode é divergir por descuido. */
.fita a {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 11px 20px;
    color: var(--navy); text-decoration: none;
    font-family: var(--titulo); font-size: 12.5px; letter-spacing: 1.4px;
    text-transform: uppercase; white-space: nowrap;
    border: 1px solid var(--gold); border-radius: var(--raio);
    background: linear-gradient(180deg, var(--fundo) 0%, var(--prata) 100%);
    box-shadow:
        inset 0 1px 0 var(--pergaminho),
        inset 0 -1px 0 var(--linha-ouro),
        0 2px 6px var(--linha);
    transition: background .18s ease, color .18s ease,
                border-color .18s ease, box-shadow .18s ease,
                transform .18s ease;
}

.fita a:hover {
    background: linear-gradient(180deg, var(--pergaminho) 0%, var(--fundo) 100%);
    border-color: var(--gold-esc);
    color: var(--navy-esc);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 var(--pergaminho),
        inset 0 -1px 0 var(--gold),
        0 6px 14px var(--linha);
}

/* O recorte que está na tela.
   A LETRA VIROU --gold-claro EM 11/09/2026 — você pediu o mesmo
   padrão do botão "Voltar" aqui. Antes ela era --pergaminho: o
   comentário aqui do lado (29/08/2026) já registrava uma tentativa
   de dourado que não deu certo, mas era o --gold comum, escuro
   demais para letra fina — o mesmo defeito do botão "Voltar" e do
   login. Com o --gold-claro (mais claro, feito para isto) o
   dourado volta a funcionar aqui. */
.fita a[aria-current="true"] {
    background: linear-gradient(180deg, var(--navy-cl) 0%, var(--navy) 100%);
    border-color: var(--gold);
    color: var(--gold-claro);
    box-shadow:
        inset 0 1px 0 var(--linha-ouro),
        inset 0 -1px 0 var(--navy-esc),
        0 4px 12px rgba(22,36,71,.22);
}
.fita a[aria-current="true"]:hover {
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-esc) 100%);
    color: var(--gold-claro);
}
.fita a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* No celular, a mesma grade das abas: todas na tela, sem
   arrastar. */
@media (max-width: 620px) {
    .fita {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }
    .fita:has(> a:nth-child(4):last-child),
    .fita:has(> a:nth-child(2):last-child) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .fita a {
        padding: 10px 8px;
        font-size: 10.5px; letter-spacing: .5px;
        white-space: normal; text-align: center;
        min-height: 40px;
    }
}

.fita-rola {
    flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px;
    scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.fita-rola::-webkit-scrollbar { height: 4px; }
.fita-rola::-webkit-scrollbar-thumb {
    background: var(--linha); border-radius: 2px;
}

/* A regra antiga que fazia a fita rolar no celular saiu daqui:
   ela vinha DEPOIS da grade nova e a anulava, devolvendo a fita
   ao arrastar lateral. Quem tem muitos recortes — dez anos de
   filiação — continua rolando pela classe `.fita-rola`, que é
   escolhida no PHP quando passam de oito. */

/* Muitos recortes rolam mesmo em grade: dez anos empilhados em
   três colunas dariam quatro linhas de botões antes da lista. */
@media (max-width: 620px) {
    .fita-rola {
        display: flex; flex-wrap: nowrap;
        overflow-x: auto; padding-bottom: 6px;
    }
    .fita-rola a { min-height: 0; }
}

/* ---------- Painel em seções ----------
   Treze botões iguais numa grade não se leem: o irmão varre a
   tela inteira para achar um. Agrupados por assunto, com o que
   cada um faz escrito embaixo, a busca acaba no título da
   seção. */
.secao { margin: 26px 0 12px; display: flex; align-items: center; gap: 10px; }
.secao img { width: 20px; height: 20px; object-fit: contain; opacity: .55;
             filter: brightness(0) saturate(100%) invert(62%) sepia(38%)
                     saturate(700%) hue-rotate(2deg) brightness(92%); }
.secao span { font-family: var(--titulo); font-size: 12px; letter-spacing: 2px;
              text-transform: uppercase; color: var(--gold-esc); white-space: nowrap; }
.secao::after { content: ""; flex: 1; height: 1px; background: var(--linha); }

/* A grade tem folga em cima E embaixo. Sem a de cima, ela
   encostava no bloco anterior — no painel, os cartões grudavam
   nas pendências, e a linha entre um e outro sumia. */
.cartoes {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 12px; margin: 22px 0;
}
/* Grades seguidas — o painel do Master tem duas — não somam as
   margens: uma folga entre elas basta. */
.cartoes + .cartoes { margin-top: 0; }
/* Depois de um título de seção, a folga já foi dada por ele. */
.secao + .cartoes { margin-top: 0; }

/* Quatro módulos formam um quadrado visual muito mais estável
   em 2 × 2 do que em 3 + 1.

   AJUSTADO em 28/08/2026, na conferência contra o sistema real.
   A regra original era `.cartoes:has(> .cartao-btn:nth-child(4):last-child)`
   — quatro cartões, quaisquer que fossem. Mas o painel tem mais
   de uma grade: o Master vê 4 cartões pessoais E 15 de
   administração, o Venerável 3 e 8, o Vigilante 3 e 1. A regra
   pegava a primeira grade de quem tem quatro e deixava a segunda
   em três colunas, com larguras diferentes na mesma tela.

   Agora a exceção vale só quando os quatro são a ÚNICA grade da
   página: nem vem depois de outra `.cartoes`, nem tem outra
   depois de si. É o caso do Aprendiz e do Companheiro, para quem
   ela foi pensada.

   NÃO usar `:only-of-type` aqui: ele olha o TIPO do elemento —
   `div` —, e a grade tem várias `div` irmãs (o topo, o rodapé).
   Nunca casaria. */
.cartoes:has(> .cartao-btn:nth-child(4):last-child):not(.cartoes ~ .cartoes):not(:has(~ .cartoes)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.cartao-btn {
    display: grid;
    grid-template-columns: var(--joia-btn) minmax(0, 1fr);
    gap: 0 14px;
    align-items: center;
    padding: 18px 16px 14px; background: var(--prata);
    border: 1px solid var(--prata-esc); border-radius: var(--raio);
    text-decoration: none; color: var(--navy);
}

/* Com apenas quatro módulos, cada cartão pode ter um pouco mais
   de presença sem aumentar a altura da página inteira. O ganho
   fica restrito ao painel 2 × 2; grades grandes continuam mais
   densas. */
/* Mesmo `:only-of-type` da regra do 2 × 2, e pela mesma razão: o
   painel do Master tem uma grade de 4 cartões pessoais E outra
   de 15 administrativos. Sem isto, a primeira ganhava joia e
   nome maiores que a segunda, na mesma tela. */
.cartoes:has(> .cartao-btn:nth-child(4):last-child):not(.cartoes ~ .cartoes):not(:has(~ .cartoes)) .cartao-btn {
    --joia-btn: 58px;
    padding: 20px 18px 15px;
}
.cartoes:has(> .cartao-btn:nth-child(4):last-child):not(.cartoes ~ .cartoes):not(:has(~ .cartoes)) .cartao-btn .nome {
    font-size: 18.5px;
}

/* Dois módulos, mesma lógica da grade 2×2 de quatro: em 3 colunas
   sobrava uma terça parte vazia à direita — pior que a régua de
   três. É o caso de Banquetes desde que "Quem está devendo" e
   "Jantares Registrados" viraram cartões de Relatórios em vez de
   módulos próprios (pacote 274). MESMAS travas da regra de
   quatro, pelo mesmo motivo: só quando os dois são a grade única
   da página. */
.cartoes:has(> .cartao-btn:nth-child(2):last-child):not(.cartoes ~ .cartoes):not(:has(~ .cartoes)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.cartoes:has(> .cartao-btn:nth-child(2):last-child):not(.cartoes ~ .cartoes):not(:has(~ .cartoes)) .cartao-btn {
    --joia-btn: 58px;
    padding: 20px 18px 15px;
}
.cartoes:has(> .cartao-btn:nth-child(2):last-child):not(.cartoes ~ .cartoes):not(:has(~ .cartoes)) .cartao-btn .nome {
    font-size: 18.5px;
}
/* Ao passar o mouse o cartão se levanta: dois pixels para cima
   e uma sombra por baixo. A transição é curta — o efeito deve
   responder ao gesto, não competir com ele.
   Em tela de toque não existe hover; por isso o cartão continua
   legível e clicável sem nada disso. */
.cartao-btn {
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.cartao-btn:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(22,36,71,.13);
}
.cartao-btn:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(22,36,71,.12); }
.cartao-btn.escuro:hover { box-shadow: 0 8px 22px rgba(15,26,51,.35); }

/* Quem navega pelo teclado precisa ver onde está. */
.cartao-btn:focus-visible, .botao:focus-visible, .botao-ouro:focus-visible,
.botao-cheio:focus-visible {
    outline: 2px solid var(--gold); outline-offset: 3px;
}
.cartao-btn img { width: 38px; height: 38px; object-fit: contain; flex: none;
                  filter: brightness(0) saturate(100%) invert(11%) sepia(38%)
                          saturate(1800%) hue-rotate(199deg) brightness(95%); }

/* A joia quadrada já vem azul com o desenho em prata: nada de
   filtro, que a repintaria inteira. Também sai maior — no
   tamanho da antiga o desenho dentro do quadrado sumia. */
.cartao-btn img.joia-quadro {
    width: var(--joia-btn); height: var(--joia-btn); filter: none;
    border-radius: 11px;
    grid-column: 1; grid-row: 1; align-self: center;
}
/* A joia antiga, ainda sem versão quadrada, é traço solto sem
   moldura: no mesmo número de pixels ela parece menor. Os 4px a
   mais igualam o que o olho vê, não o que a régua mede. */
.cartao-btn img:not(.joia-quadro) {
    width: calc(var(--joia-btn) - 4px); height: calc(var(--joia-btn) - 4px);
    grid-column: 1; grid-row: 1; align-self: center;
}
/* No cartão escuro a joia vem invertida — quadrado prata,
   desenho navy —, já com contraste de sobra. O fio dourado que
   antes a separava do fundo virou supérfluo. */

.cartao-btn .txt { min-width: 0; }
/* Cinzel desenha as minúsculas como capitulares pequenas: o
   nome do botão saía em versalete. Em rótulo curto e repetido
   isso cansa — aqui vale a serifa de leitura. */
.cartao-btn .nome {
    font-family: var(--serif); font-size: 18px; font-weight: 600;
    display: block; letter-spacing: .1px; line-height: 1.2;
}
.cartao-btn .sub  {
    font-size: 13px; color: var(--tinta-sec); line-height: 1.55;
    display: block; margin-top: 5px;
}
/* O cartão grande precisava terminar com um gesto claro de ação.
   Como o HTML não muda, a linha de abertura nasce do próprio
   span da seta: filete em cima, convite embaixo. */
.cartao-btn .seta {
    grid-column: 1 / -1;
    display: flex; align-items: center; justify-content: flex-end;
    gap: 8px; width: 100%; margin-top: 14px; padding-top: 11px;
    border-top: 1px solid var(--linha-ouro);
    color: var(--gold-esc); font-size: 0;
}
.cartao-btn .seta::before {
    content: "Abrir módulo";
    margin-right: auto;
    font-family: var(--titulo); font-size: 10.5px; letter-spacing: 1.4px;
    text-transform: uppercase;
}
.cartao-btn .seta::after {
    content: "›";
    font-family: var(--serif); font-size: 20px; line-height: 1;
}

/* Escuro: reservado ao que é da administração. */
.cartao-btn.escuro { background: var(--navy); border-color: var(--navy); color: var(--pergaminho); }
.cartao-btn.escuro .nome { color: var(--pergaminho); }
.cartao-btn.escuro .sub { color: rgba(244,235,215,.7); }
.cartao-btn.escuro img { filter: none; }
.cartao-btn.escuro .seta {
    border-top-color: rgba(244,235,215,.16); color: var(--gold);
}

@media (max-width: 760px) {
    .cartoes { grid-template-columns: 1fr 1fr; }
    .cartao-btn .sub { display: none; }
    .cartao-btn { --joia-btn: 58px; }
    .cartoes:has(> .cartao-btn:nth-child(4):last-child):not(.cartoes ~ .cartoes):not(:has(~ .cartoes)) .cartao-btn {
        --joia-btn: 58px; padding: 16px 10px;
    }
    .cartao-btn {
        grid-template-columns: 1fr; text-align: center;
        gap: 8px; padding: 16px 10px;
    }
    .cartao-btn img, .cartao-btn img.joia-quadro,
    .cartao-btn img:not(.joia-quadro) {
        grid-column: 1; grid-row: 1; justify-self: center;
    }
    .cartao-btn .txt { grid-column: 1; grid-row: 2; }
    .cartao-btn .seta {
        grid-column: 1; justify-content: center; margin-top: 8px;
    }
    .cartao-btn .seta::before { content: "Abrir"; margin-right: 8px; }
}
@media (max-width: 420px) {
    .cartoes { grid-template-columns: 1fr 1fr; }
}

/* Sobre o creme, a prata clara desaparece. O brilho é derrubado
   a zero e recomposto na cor do texto do botão — mesmo arquivo,
   duas leituras. */
.botao-vazio img.joia {
    filter: brightness(0) saturate(100%) invert(11%) sepia(38%)
            saturate(1800%) hue-rotate(199deg) brightness(95%) contrast(96%);
    opacity: .85;
}

.botao { line-height: 1.35; }
.botoes .botao { min-height: 88px; }

.botao-ouro {
    display: inline-block;
    background: linear-gradient(180deg, #D9B868 0%, var(--gold) 100%);
    color: var(--navy-esc);
    font-family: var(--titulo); font-size: 12.5px; letter-spacing: 2px;
    padding: 14px 30px; border: 1px solid var(--gold-esc);
    border-radius: var(--raio);
    text-decoration: none; cursor: pointer; text-align: center;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.35),
        inset 0 -1px 0 rgba(140,106,31,.35),
        0 2px 6px var(--linha);
}
.botao-ouro:hover {
    background: linear-gradient(180deg, #E3C57E 0%, #D9B868 100%);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.4),
        inset 0 -1px 0 rgba(140,106,31,.35),
        0 6px 14px var(--linha);
}
.botao-ouro:active { transform: translateY(0); }

/* ---------- O botão "fora" e o "médio" — 26/09/2026 (pacote 367) ----------
   Antes, cada tela que precisava de uma segunda ou terceira ação ao
   lado do botão-ouro inventava o próprio estilo dentro do <style>
   da própria página (foi o caso de relatorios_banquetes.php e
   quem_esta_devendo.php, cada um com sua cópia de `.botao-fora`).
   Isso é a causa de telas com o mesmo tipo de ação ficando com
   pesos visuais diferentes — reclamação direta do usuário. Agora
   `.botao-fora` (2ª ação, contorno neutro) e `.botao-medio` (3ª
   ação, contorno dourado — para o que antes era só um link
   sublinhado) são classes globais, para qualquer tela reaproveitar
   sem copiar CSS. */
.botao-fora {
    background: transparent; border: 1px solid var(--linha); color: var(--navy);
    font-family: var(--titulo); font-size: 12.5px; letter-spacing: 1.6px;
    padding: 13px 20px; border-radius: var(--raio); cursor: pointer;
    text-decoration: none; text-align: center;
    transition: background .15s, border-color .15s;
}
.botao-fora:hover { background: var(--prata); border-color: var(--gold-esc); }

.botao-medio {
    background: transparent; border: 1px solid var(--gold-esc); color: var(--navy);
    font-family: var(--titulo); font-size: 12.5px; letter-spacing: 1.6px;
    padding: 13px 20px; border-radius: var(--raio); cursor: pointer;
    text-decoration: none; text-align: center;
    transition: background .15s, border-color .15s;
}
.botao-medio:hover { background: var(--prata); }

/* ---------- O botão secundário dentro de um formulário ----------
   `.botao` foi desenhado para o painel: 84 px de altura, ícone em
   cima e rótulo embaixo. Usado ao lado de um campo, virava um
   quadrado maior que o próprio campo — e o sistema acumulou três
   regras pontuais para desfazer isso, uma em cada tela onde o
   problema apareceu.

   Aqui a regra é uma só, e vale para todo botão dentro de
   formulário ou de bloco de ações. Ele acompanha o botão-ouro no
   desenho, com o prata no lugar do dourado: mesma altura, mesmo
   contorno, mesma gravação. */
form .botao, .acoes .botao, .gestao .botao, .noite .botao,
form .botao-ouro, .acoes .botao-ouro, .gestao .botao-ouro, .noite .botao-ouro {
    min-height: 0; flex-direction: row; align-self: start;
}
form .botao, .acoes .botao, .gestao .botao, .noite .botao {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 13px 26px; gap: 0;
    background: linear-gradient(180deg, var(--fundo) 0%, var(--prata) 100%);
    border: 1px solid var(--gold); color: var(--navy);
    letter-spacing: 1.4px;
    box-shadow:
        inset 0 1px 0 var(--pergaminho),
        inset 0 -1px 0 var(--linha-ouro),
        0 2px 6px var(--linha);
}
form .botao:hover, .acoes .botao:hover,
.gestao .botao:hover, .noite .botao:hover {
    background: linear-gradient(180deg, var(--pergaminho) 0%, var(--fundo) 100%);
    border-color: var(--gold-esc); color: var(--navy-esc);
}

/* ---------- Login ---------- */
.tela-login {
    min-height: 100vh; background: var(--navy);
    display: flex; align-items: center; justify-content: center;
    padding: 28px 18px;
}
.caixa-login { width: 100%; max-width: 380px; text-align: center; }
.login-sigla {
    font-family: var(--titulo); font-size: 12px;
    letter-spacing: 5px; color: var(--gold-claro); margin-bottom: 8px;
}
.login-nome {
    font-family: var(--titulo); font-size: 21px; font-weight: 600;
    color: var(--pergaminho); line-height: 1.35; margin-bottom: 4px;
}
.login-sub {
    font-size: 12px; letter-spacing: 2px; color: rgba(244,235,215,.55);
    font-family: var(--titulo); margin-bottom: 30px;
}
.campo { text-align: left; margin-bottom: 15px; }
.campo label {
    display: block; font-family: var(--titulo); font-size: 11px;
    letter-spacing: 1.8px; color: var(--gold-claro); margin-bottom: 6px;
}
.campo input {
    width: 100%; padding: 13px 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--linha-ouro);
    border-radius: var(--raio);
    color: var(--pergaminho);
    font-family: var(--serif); font-size: 16px;
}
.campo input:focus {
    outline: none; border-color: var(--gold);
    background: rgba(255,255,255,.1);
}
.msg { padding: 11px 14px; border-radius: var(--raio); font-size: 14px;
       margin-bottom: 16px; text-align: left; }
.msg-erro { background: rgba(163,45,45,.2); color: #F0B0B0;
            border: 1px solid rgba(163,45,45,.5); }
.msg-info { background: rgba(200,164,81,.12); color: var(--pergaminho);
            border: 1px solid var(--linha-ouro); }

.rodape-login {
    margin-top: 26px; font-size: 12px; color: rgba(244,235,215,.45);
    line-height: 1.6;
}

/* ---------- Sigilo ---------- */
.sigilo {
    background: var(--erro-bg); border: 1px solid rgba(163,45,45,.3);
    border-radius: var(--raio); padding: 16px 18px; margin-bottom: 20px;
    font-size: 14px; line-height: 1.65; color: #6B1F1F;
}
.rodape {
    margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--linha);
    font-size: 12px; color: var(--tinta-fraca); text-align: center;
}
.rodape a { color: var(--tinta-sec); }

@media (max-width: 400px) {
    .botoes { grid-template-columns: 1fr; }
    h1 { font-size: 21px; }
}

/* ---------- Campos em fundo claro (Fase 2) ---------- */
.campo-claro { margin-bottom: 15px; }
.campo-claro:last-child { margin-bottom: 0; }
/* O RÓTULO DO CAMPO PRECISA SER VISTO ANTES DO CAMPO — 11/09/2026
   Estava menor que o próprio texto que o Secretário digita
   dentro do campo (11.5px de rótulo contra 16px do valor) — o
   olho caça a etiqueta em vez de encontrá-la de cara. Sobe o
   corpo, ganha peso, perde um pouco do espaçamento entre letras
   para o conjunto não ficar solto. Vale para "Tipo da sessão",
   "Número" e todo campo do sistema que usa este mesmo rótulo. */
.campo-claro label {
    display: block; font-family: var(--titulo); font-size: 13.5px;
    font-weight: 600; letter-spacing: 1.1px; color: var(--navy);
    margin-bottom: 7px;
}
.campo-claro input, .campo-claro select, .campo-claro textarea {
    width: 100%; padding: 11px 12px;
    box-sizing: border-box;
    background: var(--fundo);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    color: var(--tinta);
    font-family: var(--serif); font-size: 16px;
}

/* ---------- O campo de data no iPhone ----------
   O Safari do iOS desenha input[type=date] à sua maneira:
   centraliza o texto, aplica um preenchimento próprio e ignora
   a largura dos irmãos. O campo saía mais largo que os demais e
   passava da borda do cartão.

   -webkit-appearance:none tira o desenho do sistema; o resto
   devolve o campo ao alinhamento dos outros. min-width:0 é o
   que impede que ele estoure dentro de uma grade de duas
   colunas — sem isso o conteúdo interno define a largura. */
/* ---------- Caixa de marcar dentro de campo-claro ----------
   30/08/2026. `.campo-claro input` recebe width:100%, desenhado
   para campo de texto. Numa caixa de marcar isso a estica pela
   linha inteira e o navegador a centraliza sozinha — ela saía
   flutuando acima do rótulo, sem relação visível com ele.

   Quatro telas do mesmo dia caíram nisso. Regra geral, e não
   remendo em cada uma: o sistema já teve três regras pontuais
   para o botão dentro de formulário, e é o que se quer evitar.

   `.marcar` é o rótulo que ACOMPANHA a caixa. Diferente do
   label comum do campo-claro, que é versalete miúdo em cima do
   campo: aqui o texto está AO LADO e é para ler, não para
   etiquetar. */
.campo-claro input[type="checkbox"],
.campo-claro input[type="radio"] {
    width: auto; min-width: 0; flex: none;
    margin: 0; padding: 0;
    accent-color: var(--navy);
    transform: scale(1.15);
}

.campo-claro label.marcar {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--serif); font-size: 15.5px;
    letter-spacing: 0; text-transform: none;
    color: var(--tinta); margin-bottom: 6px;
    cursor: pointer;
}

/* ---------- A caixa de marcar que precisa ser VISTA ----------
   Marcar ou não marcar muda o que o formulário faz, e a caixa
   solta no meio dos campos passava despercebida — no cadastro
   de adjunto ela decide se há trava de grau e de acúmulo.

   Vira placa: contorno, fundo próprio e o rótulo em corpo de
   leitura. Marcada, acende em ouro, para que o estado se veja
   de relance e não pela caixinha de treze pixels. */
.marcar-placa {
    border: 1px solid var(--linha);
    border-left: 3px solid var(--prata-esc);
    border-radius: var(--raio);
    background: var(--pergaminho);
    padding: 13px 15px;
    transition: border-color .15s, background .15s;
}

.marcar-placa:has(input:checked) {
    border-color: var(--gold);
    border-left-color: var(--gold-esc);
    background: var(--gold-bg, rgba(176, 141, 62, .09));
}

.marcar-placa label.marcar {
    font-size: 16px; margin: 0;
}

.marcar-placa label.marcar strong {
    font-family: var(--titulo); letter-spacing: .6px;
}

.marcar-placa .dica { margin: 8px 0 0; }

.campo-claro input[type="date"],
.campo-claro input[type="month"],
.campo-claro input[type="time"] {
    -webkit-appearance: none; appearance: none;
    text-align: left; min-width: 0; max-width: 100%;
    display: block;
}

/* O ícone do calendário fica no fim do campo, e não colado no
   texto. */
.campo-claro input[type="date"]::-webkit-calendar-picker-indicator,
.campo-claro input[type="month"]::-webkit-calendar-picker-indicator {
    margin-left: auto;
}
.campo-claro input:focus, .campo-claro select:focus, .campo-claro textarea:focus {
    outline: none; border-color: var(--gold); background: #fff;
}
.cartao ul { font-size: 14px; }


/* ---------- Biblioteca: a estante ----------
   Com capa, lista é desperdício: a miniatura fica pequena demais
   para servir ao reconhecimento, que era o motivo de tê-la. Em
   grade a capa manda, e o título fica embaixo, como em prateleira.

   Quatro por fileira no computador, duas no celular. As capas já
   vêm padronizadas do capa.php, numa folha branca de medida
   única — o alinhamento não depende de corte no CSS. */
.estante {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 22px 18px; margin-top: 4px;
}
.obra { position: relative; min-width: 0; }
.obra-link { display: block; text-decoration: none; color: inherit; }

.capa-caixa {
    position: relative; display: block;
    width: 100%; aspect-ratio: 400 / 560;   /* a mesma folha do capa.php */
    border-radius: 3px; overflow: hidden; background: #fff;
    box-shadow: 0 1px 2px rgba(22,36,71,.14), 0 6px 16px rgba(22,36,71,.10);
    transition: transform .16s ease, box-shadow .16s ease;
}
.obra-link:hover .capa-caixa {
    transform: translateY(-3px);
    box-shadow: 0 3px 6px rgba(22,36,71,.16), 0 12px 26px rgba(22,36,71,.16);
}
.capa-caixa svg {
    position: absolute; top: 50%; left: 50%;
    width: 26px; height: 26px; margin: -13px 0 0 -13px;
    stroke: var(--gold-esc); fill: none; stroke-width: 1.5;
}
/* A imagem cobre o ícone quando existe; quando o servidor não
   consegue gerar, o onerror a remove e o ícone reaparece. */
.capa-caixa img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: contain;
    display: block; background: #fff;
}

/* Duas linhas fixas para o título. "Adonai" ao lado de "A Ação
   Secreta da Maçonaria na Política Mundial" desalinharia a
   fileira inteira; o que passa disso fica com reticências, e o
   nome completo aparece ao pousar o mouse. */
.obra-titulo {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 9px; font-size: 13.5px; line-height: 1.35;
    color: var(--navy); font-weight: 600;
}
.obra-link:hover .obra-titulo { color: var(--gold-esc); }
.obra-autor {
    display: block; margin-top: 2px;
    font-size: 11.5px; color: var(--tinta-fraca); line-height: 1.3;
}

/* O × de retirar: sobre a capa, no canto, sem gritar. */
.obra-retirar { position: absolute; top: 5px; right: 5px; margin: 0; }
.obra-retirar button {
    background: rgba(255,255,255,.92); border: 1px solid var(--prata-esc);
    cursor: pointer; color: var(--tinta-fraca);
    font-size: 15px; line-height: 1; width: 24px; height: 24px;
    border-radius: 50%; padding: 0;
    opacity: 0; transition: opacity .15s ease, color .15s ease;
}
.obra:hover .obra-retirar button { opacity: 1; }
.obra-retirar button:hover { color: var(--erro); border-color: var(--erro); }
.obra-retirar button:focus-visible { opacity: 1; outline: 2px solid var(--gold); }

/* Em tela de toque não existe passar o mouse: lá o × fica
   sempre visível, senão vira função que ninguém encontra. */
@media (hover: none) {
    .obra-retirar button { opacity: .8; }
}

@media (max-width: 760px) {
    .estante { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
    .obra-titulo { font-size: 13px; }
}


/* ---------- Advertência da Biblioteca ----------
   Vermelho de verdade, e no alto: obra de terceiro aberta ao
   Quadro inteiro exige que a regra seja lida antes do primeiro
   clique, não depois. */
.aviso-legal {
    display: flex; gap: 12px; align-items: flex-start;
    background: var(--erro-bg);
    border: 1px solid rgba(163,45,45,.28);
    border-left: 3px solid var(--erro);
    border-radius: var(--raio);
    padding: 13px 16px; margin: 0 0 20px;
}
.aviso-legal svg {
    width: 19px; height: 19px; flex: none; margin-top: 2px;
    stroke: var(--erro); fill: none; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
}
.aviso-legal p {
    margin: 0; font-size: 13px; line-height: 1.6; color: #7A2222;
}
.aviso-legal strong { color: var(--erro); }


/* ---------- Galeria dos Veneráveis ----------
   Reaproveita a grade da estante; o que muda é a proporção da
   moldura e a linha do ano acima do nome. */
.galeria .capa-caixa.retrato { aspect-ratio: 400 / 520; }
.galeria .capa-caixa img { object-fit: cover; }   /* retrato preenche */
.galeria .capa-caixa svg { width: 34px; height: 34px; margin: -17px 0 0 -17px; }

/* O ano vem ANTES do nome e em maiúsculas pequenas: numa grade
   de sete quadros, é por ele que o irmão se localiza. */
.obra-gestao {
    display: block; margin-top: 9px;
    font-family: var(--titulo); font-size: 11px; letter-spacing: 1.4px;
    color: var(--gold-esc);
}
.galeria .obra-titulo { margin-top: 1px; }

/* O quadro aberto: retrato à esquerda, depoimento à direita. */
.quadro-vm { display: flex; gap: 24px; align-items: flex-start; }
.quadro-foto { flex: none; width: 200px; }
.quadro-foto .capa-caixa {
    width: 100%; aspect-ratio: 400 / 520;
    box-shadow: 0 2px 4px rgba(22,36,71,.16), 0 10px 24px rgba(22,36,71,.14);
}
.quadro-texto { min-width: 0; flex: 1; }
.depoimento { font-size: 15px; line-height: 1.75; color: var(--tinta); }

@media (max-width: 760px) {
    .quadro-vm { flex-direction: column; gap: 18px; }
    .quadro-foto { width: 160px; align-self: center; }
}


/* ---------- Festividades ---------- */
.eventos .capa-caixa.evento { aspect-ratio: 4 / 3; }
.eventos .capa-caixa img { object-fit: cover; }
.eventos .capa-caixa svg { width: 30px; height: 30px; margin: -15px 0 0 -15px; }

/* Quantas fotos o evento guarda, no canto da capa. */
.conta-fotos {
    position: absolute; right: 6px; bottom: 6px;
    background: rgba(15,26,51,.78); color: var(--pergaminho);
    font-family: var(--titulo); font-size: 10.5px; letter-spacing: .6px;
    padding: 2px 7px; border-radius: 10px;
}

/* ---------- Carrossel ----------
   Uma foto por vez, as outras escondidas no mesmo HTML. Trocar
   de foto não recarrega a página: a que sai perde a classe, a
   que entra ganha. */
.carrossel-palco {
    position: relative; background: var(--navy-esc);
    border-radius: var(--raio); overflow: hidden;
    aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center;
}
.quadro-foto-fest { display: none; margin: 0; width: 100%; height: 100%; }
.quadro-foto-fest.ativo { display: block; }
.quadro-foto-fest img {
    width: 100%; height: 100%; object-fit: contain; display: block;
}
.quadro-foto-fest figcaption {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: linear-gradient(transparent, rgba(15,26,51,.85));
    color: var(--pergaminho); font-size: 13px; padding: 22px 14px 10px;
}

.carrossel-seta {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(255,255,255,.9); border: none; cursor: pointer;
    color: var(--navy); font-size: 26px; line-height: 1; padding: 0;
    display: flex; align-items: center; justify-content: center;
}
.carrossel-seta:hover { background: #fff; }
.carrossel-seta.esq { left: 10px; }
.carrossel-seta.dir { right: 10px; }
.carrossel-conta {
    position: absolute; right: 12px; top: 12px;
    background: rgba(15,26,51,.7); color: var(--pergaminho);
    font-family: var(--titulo); font-size: 11px; letter-spacing: 1px;
    padding: 3px 9px; border-radius: 10px;
}

/* A tira de miniaturas rola sozinha: sessão magna com 60 fotos
   não cabe em fileira nenhuma. */
.carrossel-tiras {
    display: flex; gap: 7px; overflow-x: auto; padding: 10px 2px 2px;
    scrollbar-width: thin;
}
.tira {
    flex: none; width: 74px; height: 54px; padding: 0; cursor: pointer;
    border: 2px solid transparent; border-radius: 3px; overflow: hidden;
    background: none; opacity: .6; transition: opacity .15s ease;
}
.tira img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tira:hover { opacity: 1; }
.tira.ativo { opacity: 1; border-color: var(--gold); }

/* ---------- Organizar as fotos (só a administração) ---------- */
.organizar { grid-template-columns: repeat(6, 1fr); gap: 10px; }
.mini-capa {
    display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; cursor: pointer;
    border: 2px solid transparent; border-radius: 3px; overflow: hidden;
    background: var(--fundo);
}
.mini-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-capa.e-capa { border-color: var(--gold); }
.mini-capa:hover { border-color: var(--gold-esc); }

@media (max-width: 760px) {
    .carrossel-palco { aspect-ratio: 4 / 3; }
    .carrossel-seta { width: 36px; height: 36px; font-size: 22px; }
    .organizar { grid-template-columns: repeat(3, 1fr); }
}


/* Texto longo: o navegador desenha a caixa sem herdar nada, e
   ela destoava do resto do formulário. Só a alça de
   redimensionar fica, e apenas na vertical — arrastar para o
   lado quebraria o cartão. */
.campo-claro textarea {
    resize: vertical; min-height: 84px; line-height: 1.6;
    font-size: 15px;
}

/* ---------- Abas do simulador ----------
   O contorno dourado da barra do alto, trazido para dentro da
   página. O azul cheio pesava demais para uma escolha que se
   troca o tempo todo: aqui a aba escolhida se marca pelo ouro
   mais firme e por um fundo de leve tingido, não por bloco. */
/* ---------- A fileira das abas ----------
   Refeita em 30/08/2026. A Conta corrente passou de cinco abas
   para nove no mesmo dia, e a fileira virou três linhas
   irregulares: uma com quatro, outra com três, outra com uma
   sozinha — cada aba do tamanho do seu texto.

   AS LINHAS PASSAM A SE JUSTIFICAR. Cada aba estica para
   preencher a linha, como texto justificado: as larguras
   deixam de ser aleatórias e não sobra buraco no fim.

   O min-width é o que decide quantas cabem por linha. Em 168px,
   nove abas dão duas linhas na tela do computador. */
.abas {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin: 0 0 22px;
}

.abas .aba {
    flex: 1 1 auto;
    min-width: 168px;
}

/* No celular, DUAS POR LINHA e nada mais: com o rótulo curto
   cabem bem, e três ficariam ilegíveis. O calc desconta a
   metade do gap que cada uma carrega. */
@media (max-width: 640px) {
    .abas { gap: 8px; }
    .abas .aba {
        min-width: calc(50% - 4px);
        padding: 10px 8px;
        font-size: 11.5px; letter-spacing: 1px;
    }
}

/* ---------- As abas ----------
   Desenho refeito em 29/08/2026. O contorno é dourado, o fundo
   tem um degradê de pergaminho para prata, e o texto vai em
   versalete — o mesmo vocabulário das joias e dos cartões.

   A LARGURA É A DO TEXTO, e não uma coluna fixa: em grade, com
   todas do mesmo tamanho, "Registrar pagamento" quebrava em
   duas linhas enquanto "Lançar" sobrava vazia, e duas abas
   sozinhas se esticavam por meia tela cada.

   O relevo é de baixo relevo mesmo: uma linha clara em cima e
   uma dourada embaixo, que é como uma placa gravada reflete a
   luz. Sem isso o botão fica chapado. */
.aba {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 11px 20px;
    color: var(--navy); text-decoration: none;
    font-family: var(--titulo); font-size: 12.5px; letter-spacing: 1.4px;
    text-transform: uppercase; white-space: nowrap;
    border: 1px solid var(--gold); border-radius: var(--raio);
    background: linear-gradient(180deg, var(--fundo) 0%, var(--prata) 100%);
    box-shadow:
        inset 0 1px 0 var(--pergaminho),
        inset 0 -1px 0 var(--linha-ouro),
        0 2px 6px var(--linha);
    transition: background .18s ease, color .18s ease,
                border-color .18s ease, box-shadow .18s ease,
                transform .18s ease;
}

.aba:hover {
    background: linear-gradient(180deg, var(--pergaminho) 0%, var(--fundo) 100%);
    border-color: var(--gold-esc);
    color: var(--navy-esc);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 var(--pergaminho),
        inset 0 -1px 0 var(--gold),
        0 6px 14px var(--linha);
}

/* A ESCOLHIDA EM AZUL CHEIO. O tingido dourado de antes mal se
   distinguia do fundo de pergaminho, e o texto das inativas, em
   ouro claro, sumia — as abas pareciam apagadas justamente onde
   servem para dizer onde se está. Por isso a letra tinha ficado
   --pergaminho.

   RETOMADO EM DOURADO em 11/09/2026, com --gold-claro — mesmo
   padrão do botão "Voltar" e da fita (a fita É a aba, não pode
   divergir). O dourado de 29/08 que não deu certo era o --gold
   comum, escuro demais para letra fina; --gold-claro é outro. */
.aba.escolhida {
    background: linear-gradient(180deg, var(--navy-cl) 0%, var(--navy) 100%);
    border-color: var(--gold);
    color: var(--gold-claro);
    box-shadow:
        inset 0 1px 0 var(--linha-ouro),
        inset 0 -1px 0 var(--navy-esc),
        0 4px 12px rgba(22,36,71,.22);
}
.aba.escolhida:hover {
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-esc) 100%);
    border-color: var(--gold);
    color: var(--gold-claro);
}

/* No celular a fita rola na horizontal, em vez de empilhar: seis
   abas empilhadas viram seis blocos altos, e o conteúdo — que é
   o que importa — sai da tela. */
/* ---------- No celular, TODAS na tela ----------
   A fita que rola para o lado esconde: quem não arrastar não
   descobre que há mais abas. E o empilhamento simples faria
   seis linhas altas, empurrando o conteúdo para fora.

   Em grade de três colunas, com os rótulos curtos, as seis
   cabem em duas linhas — nada escondido, nada rolando. */
@media (max-width: 620px) {
    .abas {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 16px;
    }

    /* Quatro abas em três colunas dariam 3 + 1, com a última
       sozinha e esticada. Em duas colunas ficam 2 + 2. O mesmo
       para duas abas, que em três colunas sobrariam com uma
       coluna vazia ao lado. */
    .abas:has(> .aba:nth-child(4):last-child),
    .abas:has(> .aba:nth-child(2):last-child) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .aba {
        padding: 10px 8px;
        font-size: 10.5px; letter-spacing: .5px;
        white-space: normal; text-align: center;
        min-height: 40px;
    }
}

/* ---------- Rótulo curto no celular ----------
   "Registrar pagamento" ocupa quase a largura do aparelho, e
   cabiam duas abas e meia — a fita vira gaveta, e quem não
   arrastar não descobre que há mais.

   O rótulo longo e o curto vêm os dois no HTML; aqui se escolhe
   qual aparece. Assim o desktop continua dizendo a frase
   inteira e o celular mostra a palavra que basta. */
.aba .curto { display: none; }

@media (max-width: 620px) {
    .aba .longo { display: none; }
    .aba .curto { display: inline; }
}

/* O sumário de um bloco recolhido, no celular: o rótulo e a
   explicação empilhados, e não lado a lado. "Exceção deliberada
   em sessão" saía em três linhas, espremido contra o texto de
   apoio à direita. */
@media (max-width: 620px) {
    .noite > summary, .gestao > summary { flex-wrap: wrap; }
    .n-tipo, .g-conta {
        flex-basis: 100%; margin-left: 15px; margin-top: 2px;
    }
}

.aba:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- Grade de cartões com formulário ----------
   Telas como a de Relatórios traziam cinco cartões em lista
   corrida: para chegar ao quinto era preciso rolar a página
   inteira, e nenhum deles é grande. Lado a lado, a escolha
   acontece sem rolagem.

   Duas colunas, e não três: cada cartão tem formulário dentro, e
   um <select> de nomes espremido em um terço da tela deixa de
   ser legível. Abaixo de 760 px volta a ser uma coluna só —
   no celular a rolagem é o gesto natural.

   align-items:start impede que um cartão de dois campos estique
   até a altura do vizinho de quatro. */
.cartoes-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 14px;
    margin-top: 14px;
}
.cartoes-form > .cartao { margin: 0; }

/* Quatro cartões na mesma grade — caso de Relatórios de
   Banquetes desde o pacote 274 (Por sessão, Por mês, Quem está
   devendo, Jantares Registrados) — ficam em duas linhas de dois.
   MESMO CRITÉRIO da grade de módulos 2×2 (`.cartoes` acima):
   entra só quando são exatamente quatro, a grade inteira da
   tela — outras telas com `.cartoes-form` de tamanhos bem
   diferentes continuam com align-items:start, que é o que evita
   estirar um cartão de dois campos até a altura do vizinho de
   quatro.

   Dentro da mesma linha, sem altura igual o botão de baixo saía
   em alturas diferentes por variação de texto, não de conteúdo —
   um cartão parecia "mais cheio" que o outro por acaso. Aqui a
   altura é igualada (stretch) e o formulário ou o botão único vai
   para o pé do cartão, alinhado com o vizinho. */
.cartoes-form:has(> .cartao:nth-child(4):last-child) {
    align-items: stretch;
}
.cartoes-form:has(> .cartao:nth-child(4):last-child) > .cartao {
    display: flex;
    flex-direction: column;
}
.cartoes-form:has(> .cartao:nth-child(4):last-child) > .cartao > form,
.cartoes-form:has(> .cartao:nth-child(4):last-child) > .cartao > .acoes {
    margin-top: auto;
}

/* Os dois botões de formato ficam na mesma linha, no pé do
   cartão. Empilhados, cada cartão crescia 40 px à toa. */
.acoes { display: flex; gap: 8px; margin-top: 12px; }
.acoes button, .acoes .botao { margin: 0; }

/* O cartão sozinho na última linha atravessa as duas colunas —
   meia largura com o lado vazio parece defeito de carregamento. */
.cartoes-form > .cartao.largo { grid-column: 1 / -1; }

/* Mesma pele dos módulos do painel: fundo prata, borda de
   contorno e o título em azul. O branco sobre o pergaminho da
   página quase não se destacava, e a mão não achava onde
   começava um cartão e terminava o outro.

   O rótulo em azul-marinho, e não no cinza padrão, porque aqui
   ele é o NOME do relatório — é por ele que se procura. */
.cartoes-form > .cartao {
    background: var(--prata);
    border: 1px solid var(--prata-esc);
    box-shadow: none;
}
.cartoes-form > .cartao .cartao-topo .rotulo {
    color: var(--navy);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.2px;
}

/* Os campos claros ganham fundo branco para separar-se do prata
   do cartão — sobre o branco antigo eles sumiam. */
.cartoes-form > .cartao .campo-claro input,
.cartoes-form > .cartao .campo-claro select { background: #FFFFFF; }

.cartoes-form > .cartao:hover {
    border-color: var(--gold);
    box-shadow: 0 4px 14px rgba(22,36,71,.10);
}

@media (max-width: 760px) {
    .cartoes-form { grid-template-columns: 1fr; }
}

/* ---------- Gestões em cartões que abrem ----------
   A tela dos livros era uma lista de gestões, e escolher uma
   recarregava a página com todos os documentos dela embaixo,
   em lista corrida. Para achar uma noite de 2022 era preciso
   rolar tudo.

   Agora cada gestão é um cartão. Fechados, cabem todos na tela;
   aberto, o cartão atravessa as duas colunas — meia largura não
   comporta a lista de noites, e os vizinhos ficariam pulando de
   lugar conforme se abre e fecha o outro.

   Tudo com <details> do próprio navegador: abre e fecha sem uma
   linha de JavaScript, funciona no toque e o teclado navega. */
.grade-gestoes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 14px;
    margin-top: 14px;
}
@media (max-width: 760px) { .grade-gestoes { grid-template-columns: 1fr; } }

.gestao {
    background: var(--prata);
    border: 1px solid var(--prata-esc);
    border-radius: var(--raio);
    padding: 14px 16px;
}
.gestao[open] { grid-column: 1 / -1; background: #FFFFFF; }

.gestao > summary {
    display: flex; align-items: center; gap: 10px;
    cursor: pointer; list-style: none;
    font-family: var(--titulo); color: var(--navy);
}
.gestao > summary::-webkit-details-marker { display: none; }

/* O triângulo é desenhado com borda: o marcador nativo muda de
   forma entre navegadores, e num cartão isso salta aos olhos. */
.gestao > summary::before {
    content: ""; flex: none;
    width: 0; height: 0;
    border-left: 6px solid var(--gold);
    border-top: 4.5px solid transparent;
    border-bottom: 4.5px solid transparent;
    transition: transform .15s ease;
}
.gestao[open] > summary::before { transform: rotate(90deg); }

.g-nome  { font-size: 15px; }
.g-conta { margin-left: auto; font-size: 12px; color: var(--tinta-fraca);
           font-family: var(--corpo); }
.g-vazio { font-size: 13px; color: var(--tinta-sec); margin: 12px 0 0; }

/* A noite dentro da gestão: mesma mecânica, um degrau abaixo. */
.noite { border-top: 1px solid var(--linha); padding: 10px 0 4px; }
.noite:first-of-type { margin-top: 12px; }
.noite > summary {
    display: flex; align-items: baseline; gap: 10px;
    cursor: pointer; list-style: none;
}
.noite > summary::-webkit-details-marker { display: none; }

/* Mesmo triângulo da gestão, um degrau menor: sem ele a noite
   parecia texto, e não se sabia que abria. */
.noite > summary::before {
    content: ""; flex: none;
    width: 0; height: 0;
    border-left: 5px solid var(--gold);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform .15s ease;
    position: relative; top: -1px;
}
.noite[open] > summary::before { transform: rotate(90deg); }
.n-data  { font-family: var(--titulo); font-size: 13.5px; color: var(--navy); }
.n-tipo  { font-size: 12px; color: var(--tinta-sec); }
.n-conta { margin-left: auto; font-size: 12px; color: var(--tinta-fraca); }
.noite[open] > summary { margin-bottom: 6px; }
.noite .linha-item { padding-left: 10px; }

/* ---------- Painéis em abas ----------
   Telas como a da Tesouraria têm quatro blocos que não se usam
   ao mesmo tempo: registrar um pagamento e conferir a situação
   do quadro são momentos diferentes do mês. Empilhados, obrigam
   a rolar a página inteira para chegar ao de baixo.

   Em abas, cada bloco ocupa a tela sozinho e a troca é um
   clique. A aba escolhida fica marcada pelo ouro, como as
   demais do sistema.

   Sem JavaScript o conteúdo continua todo lá, um bloco embaixo
   do outro: a tela volta a ser o que era, e nada se perde. */
.painel-aba { display: none; }
.painel-aba.ativo { display: block; }
.painel-aba > .cartao:first-child { margin-top: 0; }

/* Dentro de uma aba, dois cartões ainda podem dividir a
   largura — é o caso das consultas, que se leem juntas. */
.painel-aba > .cartoes-form { margin-top: 0; }

/* Campos lado a lado dentro de um cartão. Um formulário de seis
   campos empilhados rola a tela sozinho, mesmo estando só ele
   na aba — e metade deles é curta (data, valor, competência).
   Em duas colunas cabe inteiro na primeira dobra. */
.campos-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 14px;
}
@media (max-width: 620px) { .campos-2 { grid-template-columns: 1fr; } }


/* ============================================================
   AS CLASSES DE APOIO — 29/08/2026

   O sistema tinha duzentos estilos escritos à mão dentro do
   HTML, repetindo os mesmos seis padrões com pequenas variações
   de margem. O resultado: a mesma frase de apoio saía 13px numa
   tela e 14px na outra, colada no título aqui e afastada ali.

   Aqui ficam os seis. Trocar o tom de uma explicação passa a
   ser mexer numa linha, e não caçar sessenta e sete.
   ============================================================ */

/* A linha miúda embaixo do nome, dentro de uma linha-item:
   a Loja do visitante, a data do documento, o motivo da falta. */
.apoio {
    display: block;
    font-size: 12px;
    color: var(--tinta-fraca);
    line-height: 1.45;
}

/* O parágrafo que explica o cartão, logo abaixo do título. */
.nota {
    font-size: 13px;
    color: var(--tinta-sec);
    margin: 0 0 10px;
    line-height: 1.55;
}
.nota:last-child { margin-bottom: 0; }

/* ---------- migalha() — a trilha "casa › módulo › tela" ----------
   15/09/2026 (pacote 283). Substitui, nas telas que a adotam, o
   "← Painel" solto: mostra também por qual módulo se chegou. */
.migalhas {
    display: flex; align-items: center; gap: 7px; margin-bottom: 8px;
    font-size: 13px; color: var(--tinta-sec);
}
.migalha-casa {
    display: flex; color: var(--tinta-fraca); flex: none;
}
.migalha-casa svg { width: 15px; height: 15px; }
.migalha-casa:hover { color: var(--gold-esc); }
.migalhas a:not(.migalha-casa) { color: var(--tinta-sec); text-decoration: none; }
.migalhas a:not(.migalha-casa):hover { color: var(--gold-esc); text-decoration: underline; }
.migalha-sep { color: var(--tinta-fraca); font-size: 12px; }
.migalha-atual { color: var(--navy); font-weight: 600; }

/* Título de tela em maiúsculas, para as telas que adotam a
   referência com números grandes no topo (Banquetes). O h1
   comum do site não muda — é uma classe à parte, só onde é
   pedida. */
.titulo-grande {
    text-transform: uppercase;
    letter-spacing: 1.6px;
    font-size: 27px;
}

/* A observação miúda embaixo de um campo — o que ela aceita, o
   que acontece se ficar vazia. */
.dica {
    font-size: 12px;
    color: var(--tinta-fraca);
    margin: 6px 0 0;
    line-height: 1.5;
}

/* Aviso em tom de pendência, no mesmo corpo da .nota. */
.nota-pend { color: var(--pend); }

/* 15/09/2026 — O TEXTO ANTES DE UM BOTÃO QUE AUTORIZA DINHEIRO.
   Isto não é uma dica menor (o que um campo aceita, o que
   acontece se ficar vazio) — é a conta que decide se o Mestre de
   Banquetes vai clicar ou não, e o .dica normal (12px, 45% de
   opacidade) deixava passar batido. Cor cheia, corpo de texto
   normal, e o número em destaque na cor de pendência — a mesma
   linguagem que já avisa "isto precisa da sua atenção" no resto
   do sistema. */
.dica-valor {
    font-size: 14px;
    color: var(--tinta);
    margin: 6px 0 10px;
    line-height: 1.55;
}
.dica-valor strong { color: var(--pend); }

/* A linha-item inteira clicável, sem virar link azul
   sublinhado: o alvo é a linha, e a cor continua a do texto. */
a.linha-item { text-decoration: none; color: inherit; }
a.linha-item:hover { background: rgba(200,164,81,.06); }

/* O aviso de erro. Antes era `.sigilo` com o fundo escrito à
   mão em quarenta lugares — bastava um esquecer o fundo para
   virar um aviso branco que ninguém lê como erro. */
.aviso-erro {
    background: var(--erro-bg);
    border-left: 3px solid var(--erro);
    padding: 12px 15px;
    margin-bottom: 20px;
    font-size: 14px; line-height: 1.65;
    color: #6B1F1F;
}
.aviso-erro strong { color: var(--erro); }

/* A nota que vem logo abaixo de um título, sem o respiro do
   parágrafo comum. */
.nota-topo { margin-top: -6px; }

/* ---------- A trilha das instruções ----------
   Ideia da Luciana: uma régua com um segmento por instrução —
   sete no Aprendiz, cinco no Companheiro, três no Mestre —, do
   vermelho ao verde conforme o Irmão avança.

   A cor é CONTÍNUA, calculada no PHP em HSL: quem cumpriu três
   dos cinco requisitos não está no mesmo lugar de quem cumpriu
   um, e três degraus de cor não mostrariam isso.

   O segmento da próxima instrução ainda se enche pela parte
   cumprida — a cor diz o quanto, e o preenchimento repete a
   informação para quem não distingue matiz. */
.trilha {
    display: flex; gap: 3px;
    margin: 4px 0 2px;
}
.trilha .seg {
    flex: 1; height: 9px;
    border-radius: 2px;
    background: var(--prata-esc);
    position: relative; overflow: hidden;
}
.trilha .seg-futura { background: var(--prata-esc); opacity: .7; }
.trilha .seg-proxima { background: var(--prata-esc); }
.trilha .seg i {
    display: block; height: 100%;
    border-radius: 2px 0 0 2px;
}

/* No Quadro da coluna a régua acompanha o nome, e não pode
   roubar a linha inteira. */
.trilha-miuda { gap: 2px; margin: 0; width: 108px; flex: none; }
.trilha-miuda .seg { height: 7px; }

/* Dentro de um cartão escuro — o painel — o trilho neutro
   precisa clarear, senão some no navy. */
.cartao-btn.escuro .trilha .seg { background: rgba(244,235,215,.22); }

/* ---------- O retrato na lista de obreiros ----------
   A lista mostrava as iniciais de todo mundo, mesmo de quem já
   tinha retrato no sistema. A foto vem do mesmo
   `servir_foto.php` do rodapé da lateral.

   As duas formas têm a MESMA medida, e a medida vai no elemento
   além do CSS: sem ela a lista salta enquanto as fotos chegam. */
.obreiro-foto {
    width: 38px; height: 38px; border-radius: 50%;
    object-fit: cover; flex: 0 0 auto;
    background: var(--prata);
    border: 1px solid var(--linha-ouro);
}
.obreiro-ini-lista {
    width: 38px; height: 38px; font-size: 12.5px;
    border: 1px solid var(--linha-ouro);
}

/* Na ficha o retrato acompanha a medida das iniciais que
   substitui — 48 px, e não os 38 da lista. */
.obreiro-foto-ficha { width: 48px; height: 48px; }

/* A régua no painel: cartão próprio, logo abaixo dos números. */
.trilha-cartao .trilha { margin: 2px 0 0; }
.trilha-cartao .trilha .seg { height: 12px; }

/* ---------- A peça pronta: convite e cartão ----------
   A imagem dentro de uma página, e não a página SENDO a imagem.
   É a única forma de o celular oferecer "Adicionar às Fotos" —
   e é da galeria que o Chanceler envia pelo WhatsApp. */
.peca-pronta {
    display: block; width: 100%; height: auto;
    margin: 12px 0;
    border-radius: var(--raio);
    border: 1px solid var(--linha-ouro);
    box-shadow: 0 4px 14px rgba(22,36,71,.10);
    background: var(--prata);
}

/* ============================================================
   A VOLTA — 05/09/2026

   Havia 77 links de volta escritos à mão, 19 deles com estilo
   inline repetido dentro do HTML. Cada tela tinha a sua, e o
   sistema parecia montado por gente diferente.

   Agora é uma placa só, com a mesma pele do botão de ação mas
   em tom secundário: contorno dourado sobre pergaminho, sem o
   preenchimento cheio, porque voltar nunca é a ação principal
   da tela. Emitida por voltar_para(), em functions.php.

   INVERTIDA em 11/09/2026: você pediu mais destaque na página
   bege — em vez do contorno claro sobre pergaminho, o mesmo
   navy com letra dourada clara do menu e do botão-ouro. Continua
   sem ser a ação principal (não é o preenchimento cheio do
   botão-ouro), só que agora se vê de longe. */
/* AS CORES ALINHADAS COM A ABA/FITA ESCOLHIDA — 11/09/2026. Você
   notou a diferença: o "Voltar" tinha o degradê e a borda ao
   contrário do "12 meses" (que usa navy-cl→navy, borda --gold de
   cara). Agora as três placas escuras do sistema — Voltar, fita e
   aba — saem do mesmo desenho, ponto por ponto. */
.voltar {
    display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(180deg, var(--navy-cl) 0%, var(--navy) 100%);
    color: var(--gold-claro);
    font-family: var(--titulo); font-size: 12px; letter-spacing: 1.6px;
    padding: 9px 18px;
    border: 1px solid var(--gold);
    border-radius: var(--raio);
    text-decoration: none; cursor: pointer;
    box-shadow:
        inset 0 1px 0 var(--linha-ouro),
        inset 0 -1px 0 var(--navy-esc),
        0 4px 12px rgba(22,36,71,.22);
    transition: transform .16s ease, box-shadow .16s ease,
                background .16s ease, border-color .16s ease, color .16s ease;
}
.voltar:hover {
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-esc) 100%);
    border-color: var(--gold);
    color: var(--gold-claro);
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(7,20,39,.35);
}
.voltar:active { transform: translateY(0); box-shadow: none; }

/* A seta não encolhe nem se separa do rótulo na quebra. */
.voltar .seta { font-size: 14px; line-height: 1; }

/* ACOMPANHA A ROLAGEM.
   Uma volta por tela não resolve sozinha: numa tela comprida,
   ela fica lá em cima e o irmão tem de rolar tudo de volta
   para sair. Botão no alto E no pé também não — em tela curta
   aparecem os dois, para a mesma função.

   Então ela GRUDA logo abaixo da faixa do título, que já é
   sticky. Um botão só, sempre à vista, role quanto rolar.

   O z-index fica ABAIXO do 40 da faixa: rolando, o conteúdo
   passa sob a faixa e a volta passa sob ela também, sem
   sobrepor o título. E leva fundo próprio, senão o texto da
   página apareceria por trás. */
.voltar-topo {
    position: sticky;
    top: var(--faixa-altura, 52px);
    z-index: 39;
    /* O recuo negativo casa com o padding lateral de .conteudo
       (18px), para a faixa de fundo cobrir a largura inteira e
       o texto não passar pelas beiradas ao rolar. */
    margin: -4px -18px 16px;
    padding: 8px 18px 10px;
    background: linear-gradient(180deg,
                var(--fundo) 0%, var(--fundo) 92%, transparent 100%);
}

/* ------------------------------------------------------------
   #recado — a âncora de "rolar até a mensagem" (várias telas:
   conta_corrente.php, caixa.php, autorizacoes.php, isencoes.php,
   licenciamento.php). SEM ESTA MARGEM, quando a página rola até
   ele por script (depois de registrar algo num formulário mais
   abaixo), a barra ".voltar-topo" — que é sticky e fica por cima
   (z-index 39) — cobre o começo da mensagem: ela chega a existir
   na tela, só que embaixo da barra, invisível. Achado em
   26/09/2026 (pacote 373), com um aviso que "não aparecia" mesmo
   estando, de fato, na página. scroll-margin-top é respeitado
   pelo próprio scrollIntoView(), sem precisar calcular nada em
   JavaScript. ------------------------------------------------------------ */
#recado { scroll-margin-top: 110px; }

@media (max-width: 700px) {
    #recado { scroll-margin-top: 95px; }
}

/* #confirmacao_debito — mesma barra sticky, mesmo problema: a
   confirmação de "data de mês passado"/"lançamento repetido", em
   conta_corrente.php, agora nasce dentro da aba "Lançar um débito"
   (pacote 374) em vez do topo da página. Precisa da mesma margem. */
#confirmacao_debito { scroll-margin-top: 110px; }

@media (max-width: 700px) {
    #confirmacao_debito { scroll-margin-top: 95px; }
}

@media (max-width: 700px) {
    /* A faixa é mais baixa no celular: título menor e menos
       preenchimento lateral. */
    .voltar-topo {
        top: var(--faixa-altura, 46px);
        margin: -2px -18px 12px;
        padding: 7px 18px 9px;
    }
}

/* ============================================================
   PAINEL NOVO — MODELO DO CHATGPT — 16/09/2026 (pacote 298)

   Depois de quatro rodadas (pacotes 293 a 297) sem bater com o
   modelo que o usuário mandou por print, ele decidiu mudar de
   processo: as telas passam a ser desenhadas no ChatGPT, e eu
   implemento exatamente o HTML/CSS que ele devolve. Este bloco é
   essa implementação, tela a tela — a primeira é o painel.

   TUDO AQUI É NOVO E ISOLADO. Nenhuma classe abaixo (.hero,
   .band, .card, .module-card...) existia antes neste arquivo —
   e por isso nada do que já havia foi tocado, e nenhuma das
   outras telas do site (que reaproveitam .cartao, .cartao-btn,
   .selo, .bloco...) mudou de aparência.

   OS TOKENS SÃO OS DO MODELO, com prefixo -pn- (painel novo)
   para não colidir com --navy/--gold/--pergaminho etc., que o
   resto do site usa. --pn-ouro bate exatamente com --gold
   (#C8A451): não é coincidência, o modelo já nasceu na paleta
   dourado/marinho/pergaminho da Loja.

   O QUE CADA UM VÊ NÃO MUDOU — só a moldura. Onde o dado por
   baixo é uma função já existente e compartilhada com outras
   telas (barra_progresso(), barra_trilha(), cartao_link()), o
   reaproveitamento ficou por CIMA dela: ou o HTML dela ganhou
   nova roupa só dentro de .right-column (barra_progresso e
   barra_trilha), ou uma função nova e própria deste arquivo
   assumiu o lugar (modulo_render(), no lugar de cartao_link(),
   só para o grid de módulos do painel — ver painel.php).
   ============================================================ */

.painel-novo {
    --pn-bg:        #FBF6EA;
    --pn-surface:   #FFFFFF;
    --pn-surface-2: #FFFAF0;
    --pn-text:      #1A2847;
    --pn-muted:     #5E6A82;
    --pn-ouro:      #C8A451;
    --pn-ouro-esc:  #A8842F;
    --pn-ouro-fra:  #EFE2B8;
    --pn-linha-ouro:#E3D2A2;
    --pn-linha:     #EADFBE;
    --pn-verde:     #6B9B4A;
    --pn-verde-fra: #EAF3DE;
    --pn-sombra:    0 8px 18px rgba(26,40,71,.05);
    --pn-raio:      10px;
    font-family: Georgia, "Times New Roman", serif;
    color: var(--pn-text);
    line-height: 1.35;
    margin: 4px 0 8px;
}
.painel-novo a { color: inherit; text-decoration: none; }
.painel-novo h1, .painel-novo h2, .painel-novo h3, .painel-novo p { margin: 0; }

/* ---------- Cabeçalho (.hero) ---------- */
.painel-novo .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 620px);
    gap: 24px;
    align-items: stretch;
    margin-bottom: 24px;
}
.painel-novo .hero-main {
    display: flex; align-items: center; gap: 22px;
    padding: 18px 4px 6px;
}
.painel-novo .avatar {
    width: 112px; height: 112px; min-width: 112px;
    border-radius: 50%; border: 3px solid var(--pn-ouro);
    background: radial-gradient(circle at 35% 30%, #F5E4BC 0%, #DCC18A 38%, #B99346 100%);
    display: grid; place-items: center;
    color: var(--pn-surface); font-size: 2rem; font-weight: 700;
    box-shadow: 0 6px 16px rgba(0,0,0,.08);
    object-fit: cover;
}
.painel-novo .welcome h1 {
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    line-height: 1.08; font-weight: 500; margin-bottom: 6px;
}
.painel-novo .welcome .role {
    font-size: .92rem; color: var(--pn-ouro-esc);
    text-transform: uppercase; letter-spacing: .1em;
}
.painel-novo .welcome .divider {
    width: 100%; max-width: 420px; height: 1px;
    background: linear-gradient(to right, var(--pn-linha-ouro), var(--pn-ouro), transparent);
    margin: 14px 0; position: relative;
}
.painel-novo .welcome .divider::after {
    content: "◇"; position: absolute; right: 10px; top: -12px;
    color: var(--pn-ouro); font-size: .85rem;
    background: var(--pn-bg); padding: 0 6px;
}
.painel-novo .welcome p { color: var(--pn-text); font-size: 1rem; }

.painel-novo .hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px; align-content: start;
}
.painel-novo .top-stat,
.painel-novo .card,
.painel-novo .band,
.painel-novo .step-card,
.painel-novo .module-card {
    background: var(--pn-surface); border: 1px solid var(--pn-linha-ouro);
    border-radius: var(--pn-raio); box-shadow: var(--pn-sombra);
}
.painel-novo .top-stat {
    padding: 16px 15px; display: grid;
    grid-template-columns: 44px 1fr; gap: 13px; align-items: center;
    transition: transform .16s ease, border-color .16s ease;
}
a.top-stat:hover { transform: translateY(-1px); border-color: var(--pn-ouro); }
.painel-novo .icon-box {
    width: 44px; height: 44px; border-radius: 11px;
    background: var(--pn-text); overflow: hidden; flex-shrink: 0;
    display: grid; place-items: center;
}
.painel-novo .icon-box img { width: 100%; height: 100%; object-fit: contain; }
.painel-novo .stat-label {
    font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
    color: var(--pn-muted); margin-bottom: 3px;
}
.painel-novo .stat-value { font-size: 1.7rem; line-height: 1; }
.painel-novo .stat-value.green { color: var(--pn-verde); }
.painel-novo .stat-value.gold  { color: var(--pn-ouro-esc); }
.painel-novo .stat-support { margin-top: 4px; font-size: .85rem; color: var(--pn-muted); }

/* ---------- Faixa dourada — "A semana pede de você" ---------- */
.painel-novo .band {
    margin-bottom: 24px; overflow: hidden;
    background: linear-gradient(180deg, #FFFDF7 0%, #FCF4DE 100%);
}
.painel-novo .band-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 16px 20px 10px;
    border-bottom: 1px solid var(--pn-linha);
}
.painel-novo .band-title {
    font-size: 1rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 600;
}
.painel-novo .count-badge {
    min-width: 32px; height: 32px; border-radius: 999px;
    display: inline-grid; place-items: center;
    background: #F2E3BB; color: var(--pn-ouro-esc);
    font-size: .9rem; font-weight: 700; border: 1px solid #E1CC92;
}
.painel-novo .band-list { padding: 4px 20px 10px; }
.painel-novo .band-item {
    display: grid; grid-template-columns: minmax(0,1fr) auto;
    gap: 16px; align-items: center; padding: 12px 0;
    border-bottom: 1px solid rgba(200,164,81,.18);
}
.painel-novo .band-item:last-child { border-bottom: 0; }
.painel-novo .band-item a { font-size: 1.05rem; color: var(--pn-ouro-esc); font-weight: 500; }
.painel-novo .band-item a:hover { text-decoration: underline; text-underline-offset: 3px; }
.painel-novo .deadline { color: var(--pn-muted); font-size: .9rem; white-space: nowrap; }

/* ---------- Duas colunas principais ---------- */
.painel-novo .main-columns {
    display: grid; grid-template-columns: minmax(0,1fr) 360px;
    gap: 24px; align-items: stretch; margin-bottom: 24px;
}
/* "O estado da Loja" só existe para o Master — para os demais
   cargos, .left-column nem é desenhado. Sem esta regra, a coluna
   direita ficava presa na largura da 1fr (a metade menor), com
   quase 360px de vazio à direita — mesma solução que o painel
   antigo já usava para este mesmo caso (.painel-meio). */
.painel-novo .main-columns:not(:has(.left-column)) {
    grid-template-columns: 1fr;
}
/* O BURACO, SEGUNDA VOLTA — 18/09/2026. O pacote 299 (nota
   original abaixo, mantida) resolveu o buraco de UM lado —
   embaixo de "O estado da Loja" — fazendo a coluna da direita
   ocupar as duas linhas do grid (grid-row: 1 / span 2). Só que
   isso reservava, para a coluna da direita, a altura de "O
   estado da Loja" MAIS a altura inteira de .modules-grid — e
   quem tem muitos cargos (o Master, sobretudo) enche
   .modules-grid de vinte e tantos cartões, muito mais alto que
   a coluna da direita (trilha, próximo passo, eventos). O buraco
   só mudou de lado: passou a sobrar embaixo da coluna da
   direita, ao lado dos módulos — e agora, em vez de caber num
   cartão, cabia dezenas de linhas de cartões que poderiam estar
   ali.

   A causa era o SPAN em si: qualquer coluna que abrace duas
   linhas fica hostage da MAIOR das duas contas (a própria altura,
   comparada à soma das outras duas), e o lado que perder sobra
   vazio, para um lado ou para o outro. A saída é não espalhar a
   coluna da direita por duas linhas: ela fica só na linha 1, ao
   lado de "O estado da Loja" (as duas encolhem para a própria
   altura, `align-items: start` já cuidava disso). ".modules-grid"
   passa a ocupar a LARGURA TODA na linha 2 (grid-column: 1 / -1),
   em vez de só a coluna da esquerda — ganha de volta a faixa que
   antes ficava reservada (e vazia) para a direita, e os cartões
   de módulo sobem para preenchê-la.

   SOBRAVA AINDA UM VÃO MENOR, DENTRO DA PRÓPRIA LINHA 1 — "O
   estado da Loja" (um cartão só) quase sempre é mais baixo que a
   coluna da direita (que empilha "A sua gestão", trilha, próximo
   passo e eventos), e como cada um encolhia para a própria altura
   (`align-items: start`), sobrava parchment em branco embaixo do
   cartão da esquerda, antes da grade de módulos começar. Cobrir
   isso com mais um item da lista SÓ resolveria por acaso, no dia
   em que a conta batesse — no dia seguinte, com uma pendência a
   menos ou uma a mais, o vão simplesmente voltaria (ou passaria
   para o lado contrário). A saída não depende do conteúdo: a
   LINHA agora estica os dois lados (`align-items: stretch`), e o
   cartão da esquerda, sendo `display:flex` com o `.card` de
   dentro em `flex:1`, cresce até a mesma altura da direita —
   sobra vazia sim, mas por DENTRO do cartão branco, nunca como
   parchment exposto entre um cartão e outro. */
.painel-novo .main-columns:has(.left-column) {
    grid-template-rows: auto auto;
}
.painel-novo .main-columns:has(.left-column) > .left-column {
    grid-column: 1; grid-row: 1; display: flex; flex-direction: column;
}
.painel-novo .main-columns:has(.left-column) > .left-column > .card {
    flex: 1; display: flex; flex-direction: column;
}
.painel-novo .main-columns:has(.left-column) > .modules-grid {
    grid-column: 1 / -1; grid-row: 2; margin-bottom: 0;
}
.painel-novo .main-columns:has(.left-column) > .right-column {
    grid-column: 2; grid-row: 1; align-self: start;
}
.painel-novo .card { padding: 18px 20px; }
.painel-novo .card-header {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; padding-bottom: 12px; margin-bottom: 14px;
    border-bottom: 1px solid var(--pn-linha);
}
.painel-novo .card-title {
    font-size: 1rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 600;
}
.painel-novo .card-meta { color: var(--pn-muted); font-size: .9rem; white-space: nowrap; }
.painel-novo .card-support { margin-bottom: 16px; color: var(--pn-muted); font-size: .94rem; }

/* O estado da Loja */
.painel-novo .state-item {
    display: grid; grid-template-columns: minmax(0,1fr) auto;
    gap: 16px; align-items: center; padding: 13px 0;
    border-bottom: 1px solid var(--pn-linha);
}
.painel-novo .state-item:last-child { border-bottom: 0; }
.painel-novo .state-item-title { font-size: 1.08rem; margin-bottom: 3px; }
.painel-novo .state-item-title a:hover { color: var(--pn-ouro-esc); text-decoration: underline; text-underline-offset: 3px; }
.painel-novo .state-deadline { color: var(--pn-muted); font-size: .87rem; }
.painel-novo .owner-tag {
    display: inline-block; padding: 7px 12px; border-radius: 999px;
    background: #F3F5F8; color: var(--pn-text); font-size: .85rem;
    border: 1px solid #E6EBF1; white-space: nowrap;
}

/* "Ver todos os itens" — um <details>/<summary> continua abrindo
   o resto sem precisar de JavaScript; só o visual é o do modelo
   (a barra "Abrir módulo" dos cartões de módulo, mais abaixo). */
.painel-novo details.ver-mais-novo { margin-top: 4px; }
.painel-novo .see-all {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; width: 100%; margin-top: 10px; padding-top: 14px;
    border-top: 1px solid var(--pn-linha-ouro);
    color: var(--pn-ouro-esc); font-weight: 600;
    text-transform: uppercase; letter-spacing: .07em; font-size: .85rem;
    cursor: pointer; list-style: none; user-select: none;
}
.painel-novo .see-all::-webkit-details-marker { display: none; }
.painel-novo .see-all-left { display: flex; align-items: center; gap: 10px; }
.painel-novo .see-all .chev::before { content: "\203A"; font-size: 1.15rem; }
.painel-novo details.ver-mais-novo[open] .see-all .chev::before { content: "\2039"; }
.painel-novo details.ver-mais-novo .state-list .state-item:first-of-type { border-top: none; }

/* ---------- Coluna direita ---------- */
.painel-novo .right-column { display: grid; gap: 16px; min-width: 0; }
.painel-novo .right-column > * { margin: 0; }

/* Reaproveita o MESMO HTML de barra_progresso()/barra_trilha()
   (compartilhado com coluna.php, aptidao.php e a "porta do
   ofício" de outras telas) — só o visual, e só DENTRO da coluna
   direita do painel, ganha a roupa do modelo. Nenhuma regra
   abaixo tem efeito fora de .right-column. */
.painel-novo .right-column .cartao {
    background: var(--pn-surface); border: 1px solid var(--pn-linha-ouro);
    border-radius: var(--pn-raio); box-shadow: var(--pn-sombra);
    padding: 18px 20px; margin: 0;
}
.painel-novo .right-column .cartao-topo {
    border-bottom: 1px solid var(--pn-linha); padding-bottom: 12px; margin-bottom: 14px;
}
.painel-novo .right-column .cartao-topo .rotulo {
    color: var(--pn-text); font-size: 1rem; letter-spacing: .07em;
    text-transform: uppercase; font-weight: 600; font-family: inherit;
}
.painel-novo .right-column .linha-valor { color: var(--pn-muted); font-size: .9rem; }
.painel-novo .right-column .trilha {
    display: flex; gap: 6px; margin-bottom: 14px;
}
.painel-novo .right-column .trilha .seg {
    flex: 1; height: 11px; border-radius: 999px; background: #EBE6D9; overflow: hidden;
}
.painel-novo .right-column .trilha .seg-futura,
.painel-novo .right-column .trilha .seg.seg-futura { background: #EBE6D9; }
.painel-novo .right-column .linha {
    display: flex; justify-content: space-between; align-items: center;
    gap: 10px; padding: 5px 0; font-size: .92rem; margin: 0; border: 0;
}
.painel-novo .right-column .linha .linha-valor { font-size: .9rem; font-weight: 600; }

/* Próximo passo */
.painel-novo .step-card { padding: 0; overflow: hidden; }
.painel-novo .step-link {
    display: grid; grid-template-columns: 46px 1fr auto; gap: 14px; align-items: center;
    padding: 16px; color: var(--pn-text);
    background: linear-gradient(180deg, #FFFDF7 0%, #FBF4DF 100%);
    border-left: 6px solid var(--pn-ouro);
}
.painel-novo .step-link.step-urgente { border-left-color: #854F0B; }
.painel-novo .step-kicker {
    display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
    color: var(--pn-ouro-esc); margin-bottom: 4px;
}
.painel-novo .step-title { font-size: 1.28rem; line-height: 1.15; margin-bottom: 3px; }
.painel-novo .step-text { color: var(--pn-muted); font-size: .9rem; }
.painel-novo .arrow { font-size: 1.4rem; color: var(--pn-ouro-esc); padding-right: 8px; }

/* Atenção e pendências / Próximos eventos */
.painel-novo .pill {
    display: inline-block; padding: 6px 12px; border-radius: 999px;
    font-size: .85rem; white-space: nowrap; border: 1px solid transparent;
}
.painel-novo .pill.green { background: var(--pn-verde-fra); color: var(--pn-verde); border-color: #D3E7BE; }
.painel-novo .pill.gold  { background: #F5EAD0; color: var(--pn-ouro-esc); border-color: #E7D2A0; }

.painel-novo a.pend-row {
    display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 12px;
    align-items: start; padding: 9px 0; border-bottom: 1px solid var(--pn-linha);
    color: var(--pn-text);
}
.painel-novo a.pend-row:last-of-type { border-bottom: 0; }
.painel-novo a.pend-row:hover .pend-title { color: var(--pn-ouro-esc); text-decoration: underline; text-underline-offset: 3px; }
.painel-novo .small-icon {
    width: 32px; height: 32px; border-radius: 9px; background: #F1F4F8;
    display: grid; place-items: center; overflow: hidden;
}
.painel-novo .small-icon img { width: 22px; height: 22px; object-fit: contain; }
.painel-novo .pend-title { font-size: .95rem; margin-bottom: 2px; }
.painel-novo .pend-text { color: var(--pn-muted); font-size: .87rem; }

.painel-novo a.event-row {
    display: grid; grid-template-columns: 50px minmax(0,1fr) auto; gap: 12px;
    align-items: center; padding: 11px 0; border-bottom: 1px solid var(--pn-linha);
    color: var(--pn-text);
}
.painel-novo a.event-row:last-of-type { border-bottom: 0; }
.painel-novo a.event-row:hover .event-title { color: var(--pn-ouro-esc); text-decoration: underline; text-underline-offset: 3px; }
.painel-novo .date-box {
    width: 50px; min-width: 50px; text-align: center; border-radius: 8px;
    border: 1px solid #D7C8A2; background: #FBF4E1; padding: 7px 4px; line-height: 1;
}
.painel-novo .date-day { display: block; font-size: 1.4rem; }
.painel-novo .date-month {
    display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--pn-muted); margin-top: 3px;
}
.painel-novo .event-title { font-size: 1rem; margin-bottom: 3px; }
.painel-novo .event-date { font-size: .87rem; color: var(--pn-muted); }

/* Vazio: mesma mensagem que o painel sempre usou, só com o
   desenho do cartão novo. */
.painel-novo .pend-card:not(:has(.pend-row)),
.painel-novo .event-card:not(:has(.event-row)) {
    min-height: 150px; display: flex; flex-direction: column;
}
.painel-novo .pend-card:not(:has(.pend-row)) .card-header,
.painel-novo .event-card:not(:has(.event-row)) .card-header { margin-bottom: 0; }
.painel-novo .pend-card:not(:has(.pend-row))::after,
.painel-novo .event-card:not(:has(.event-row))::after {
    content: "Nenhum item por agora.\AQuando houver novidade, ela aparecerá aqui.";
    white-space: pre-line; margin: auto 4px 4px; padding: 16px;
    border: 1px dashed var(--pn-linha-ouro); border-radius: 10px;
    background: linear-gradient(180deg, rgba(244,235,215,.42), rgba(244,235,215,.16));
    color: var(--pn-muted); text-align: center; font-size: .82rem; line-height: 1.6;
}

/* ---------- Grid de módulos ---------- */
.painel-novo .modules-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px;
}
.painel-novo .module-card {
    position: relative; padding: 18px;
    display: grid; grid-template-rows: auto 1fr auto; gap: 10px; min-height: 178px;
}
.painel-novo .module-top { display: flex; gap: 14px; align-items: flex-start; }
.painel-novo .module-icon {
    width: 54px; height: 54px; min-width: 54px; border-radius: 13px;
    background: var(--pn-text); overflow: hidden; display: grid; place-items: center;
}
.painel-novo .module-icon img { width: 100%; height: 100%; object-fit: contain; }
.painel-novo .module-title { font-size: 1.15rem; margin: 2px 0 4px; }
.painel-novo .module-desc { margin: 0; color: var(--pn-muted); font-size: .92rem; }
.painel-novo .module-footer { margin-top: 6px; padding-top: 13px; border-top: 1px solid var(--pn-linha); }
.painel-novo .module-link {
    display: flex; justify-content: space-between; align-items: center;
    color: var(--pn-ouro-esc); text-transform: uppercase; letter-spacing: .07em;
    font-size: .86rem; font-weight: 600;
}
.painel-novo .module-card:hover { border-color: var(--pn-ouro); transform: translateY(-1px); transition: transform .16s ease, border-color .16s ease; }
.painel-novo .module-aviso {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    min-width: 22px; height: 22px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; background: #854F0B; color: #fff;
    font-size: 11.5px; font-weight: 700; line-height: 1;
    box-shadow: 0 1px 4px rgba(0,0,0,.18);
}

/* ---------- Responsivo — as mesmas três quebras do modelo ---------- */
@media (max-width: 1100px) {
    .painel-novo .hero { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .painel-novo .main-columns { grid-template-columns: 1fr; }
    /* Abaixo de 900px as colunas empilham — desfaz o grid-column/
       grid-row fixo do desktop (pacote 299), senão o navegador cria
       uma coluna 2 implícita do nada só pra obedecer o right-column,
       e a tela fica espremida em duas colunas estreitas em vez de
       uma só. */
    .painel-novo .main-columns:has(.left-column) {
        grid-template-rows: initial;
    }
    .painel-novo .main-columns:has(.left-column) > .left-column,
    .painel-novo .main-columns:has(.left-column) > .modules-grid,
    .painel-novo .main-columns:has(.left-column) > .right-column {
        grid-column: 1; grid-row: auto;
    }
    .painel-novo .modules-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
    .painel-novo .hero-main { flex-direction: column; align-items: flex-start; }
    .painel-novo .avatar { width: 84px; height: 84px; min-width: 84px; }
    .painel-novo .hero-stats { grid-template-columns: 1fr; }
    .painel-novo .band-item,
    .painel-novo .state-item,
    .painel-novo a.event-row { grid-template-columns: 1fr; }
    .painel-novo .owner-tag,
    .painel-novo .pill,
    .painel-novo .deadline { width: fit-content; }
    .painel-novo .step-link { grid-template-columns: 46px 1fr; }
    .painel-novo .step-link .arrow { display: none; }
    .painel-novo .modules-grid { grid-template-columns: 1fr; }
    .painel-novo .card-header { align-items: flex-start; flex-direction: column; }
}

/* ============================================================
   TELA OBREIROS — cartões de estatística, busca + filtros na
   mesma linha, tabela e paginação — 16/09/2026

   Layout pedido pelo usuário a partir de um modelo visual (print
   de outra tela). As cores e fontes são as do sistema — nada
   nasceu novo em paleta, só o arranjo dos cartões e a tabela, que
   o Quadro nunca teve.
   ------------------------------------------------------------ */
.stats-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
    margin-bottom: 20px;
}
/* Quem não alcança Representados/Egressos (ver 16/09/2026, mais
   abaixo) só tem dois cartões — Irmãos e Ativos — lado a lado
   em vez de espalhados numa grade de quatro. */
.stats-grid.duas-col { grid-template-columns: repeat(2, 1fr); }
/* Atas, 18/09/2026: três indicadores (Master) em vez de dois ou
   quatro — mesma régua do .duas-col acima, só com outra conta. */
.stats-grid.tres-col { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .stats-grid, .stats-grid.duas-col, .stats-grid.tres-col { grid-template-columns: 1fr; }
}

/* ---------- cabeçalho com botões na mesma linha ----------
   16/09/2026 — trilha + título/subtítulo à esquerda, "Voltar" e
   a ação da tela à direita, como no modelo aprovado. Reaproveita
   .voltar e .botao-ouro (que já existem) só embutidos na linha,
   sem a barra fixa de .voltar-topo. */
.cabecalho {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.subtitulo { font-size: 14px; color: var(--tinta-fraca); margin: 6px 0 0; }
.botoes-topo { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 480px) {
    .botoes-topo { width: 100%; }
    .botoes-topo a { flex: 1 1 100%; justify-content: center; }
}
.stat-cartao {
    background: #FFFFFF; border: 1px solid var(--linha-ouro);
    border-radius: var(--raio-cartao); padding: 16px 18px;
    display: flex; align-items: center; gap: 13px;
    box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(22,36,71,.05),
                0 4px 14px rgba(22,36,71,.05);
}
.stat-icone {
    width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
}
.stat-icone svg {
    width: 20px; height: 20px; fill: none; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}
.stat-icone.tom-navy   { background: var(--navy);    }
.stat-icone.tom-navy svg   { stroke: var(--gold-claro); }
.stat-icone.tom-ok     { background: var(--ok-bg);   }
.stat-icone.tom-ok svg     { stroke: var(--ok); }
.stat-icone.tom-pend   { background: var(--pend-bg); }
.stat-icone.tom-pend svg   { stroke: var(--pend); }
.stat-icone.tom-neutro { background: var(--neutro-bg); }
.stat-icone.tom-neutro svg { stroke: var(--neutro); }
.stat-numero {
    font-family: var(--titulo); font-size: 22px; font-weight: 700;
    color: var(--navy); line-height: 1.1;
}
.stat-rotulo {
    font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase;
    color: var(--tinta-fraca); margin-top: 2px;
}

/* Busca e filtros na MESMA linha — pedido do usuário. A busca
   encolhe primeiro (min 220px); a fita de filtros rola por baixo
   dela no celular, como a fita já faz em todo o sistema. */
.busca-linha {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 18px; flex-wrap: wrap;
}
.busca-caixa {
    flex: 1 1 220px; max-width: 340px; position: relative;
    display: flex; align-items: center;
}
.busca-caixa svg {
    position: absolute; left: 14px; width: 16px; height: 16px;
    stroke: var(--tinta-fraca); fill: none; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
}
.busca-caixa input {
    width: 100%; padding: 12px 14px 12px 38px;
    border: 1px solid var(--linha-ouro); border-radius: var(--raio);
    background: #FFFFFF; font-family: var(--serif); font-size: 14.5px;
    color: var(--tinta);
}
.busca-caixa input::placeholder { color: var(--tinta-fraca); opacity: .8; }
.busca-caixa input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.busca-linha .fita { margin: 0; flex: 1 1 auto; }

/* Os filtros aqui são <button>, não <a>: não navegam, só
   recortam a tabela já carregada — por isso a régua da fita
   (.fita a) ganha a mesma aparência para .fita button, sem
   duplicar o desenho todo. */
.fita button {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 11px 18px; color: var(--navy); text-decoration: none;
    font-family: var(--titulo); font-size: 12px; letter-spacing: 1px;
    text-transform: uppercase; white-space: nowrap; cursor: pointer;
    border: 1px solid var(--gold); border-radius: var(--raio);
    background: linear-gradient(180deg, var(--fundo) 0%, var(--prata) 100%);
    box-shadow: inset 0 1px 0 var(--pergaminho), inset 0 -1px 0 var(--linha-ouro),
                0 2px 6px var(--linha);
    transition: background .18s ease, color .18s ease,
                border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.fita button:hover {
    background: linear-gradient(180deg, var(--pergaminho) 0%, var(--fundo) 100%);
    border-color: var(--gold-esc); color: var(--navy-esc);
    transform: translateY(-1px);
}
.fita button[aria-current="true"] {
    background: linear-gradient(180deg, var(--navy-cl) 0%, var(--navy) 100%);
    border-color: var(--gold); color: var(--gold-claro);
    box-shadow: inset 0 1px 0 var(--linha-ouro), inset 0 -1px 0 var(--navy-esc),
                0 4px 12px rgba(22,36,71,.22);
}
.fita button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* A tabela do Quadro — cartão sem padding lateral, para as linhas
   correrem até a borda. */
.tabela-obreiros, .tabela-atas { overflow: hidden; padding: 4px 0 0 !important; }
.tabela-obreiros table, .tabela-atas table { width: 100%; border-collapse: collapse; }
.tabela-obreiros thead th, .tabela-atas thead th {
    text-align: left; font-family: var(--titulo); font-size: 10.5px;
    letter-spacing: 1.1px; text-transform: uppercase; color: var(--tinta-fraca);
    padding: 14px 16px 10px; border-bottom: 1px solid var(--linha);
    white-space: nowrap;
}
.tabela-obreiros thead th.dir, .tabela-atas thead th.dir { text-align: right; }
.tabela-obreiros tbody td, .tabela-atas tbody td {
    padding: 11px 16px; border-bottom: 1px solid var(--linha);
    vertical-align: middle; font-size: 14px;
}
.tabela-obreiros tbody tr:last-of-type td, .tabela-atas tbody tr:last-of-type td { border-bottom: none; }
.tabela-obreiros tbody tr:hover, .tabela-atas tbody tr:hover { background: var(--pergaminho); }
.tabela-obreiros tbody td.dir, .tabela-atas tbody td.dir { text-align: right; }

/* ============================================================
   TELA ATAS — segunda referência oficial de Lista/Gestão,
   18/09/2026. Mesmo arranjo de Obreiros (indicadores + busca/
   filtro + tabela); o que é específico daqui: a faixa de
   destaque à esquerda da linha (pendência) e o botão "Abrir",
   que é a própria razão da lista existir — por isso mais visível
   que o "..." discreto de Obreiros, mas ainda contorno, nunca
   dourado (dourado é só para "+ Nova ata").
   ------------------------------------------------------------ */
.tabela-atas td.atas-faixa { width: 4px; padding: 0 !important; }
.tabela-atas tbody tr td:first-child.atas-faixa { border-bottom: none; }
.atas-pendencia { color: var(--erro); font-weight: 500; }
.atas-sem-pendencia { color: var(--tinta-fraca); }
.abrir-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    min-width: 74px; padding: 7px 14px; border: 1px solid var(--linha-ouro);
    border-radius: var(--raio); font-family: var(--serif); font-weight: 700;
    font-size: 12.5px; color: var(--navy); background: rgba(16,32,57,.035);
    text-decoration: none; white-space: nowrap;
}
.abrir-btn:hover { background: var(--pergaminho); border-color: var(--gold-esc); }
.abrir-btn svg { width: 10px; height: 10px; fill: none; stroke: currentColor;
    stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* O diálogo "Nova ata" — <dialog> nativo, sem framework de modal
   novo: some sozinho no fundo (::backdrop) e fecha com Esc, de
   graça. Por dentro é o MESMO cartão claro de sempre. */
dialog.cartao-dialogo {
    border: 1px solid var(--linha-ouro); border-radius: var(--raio-cartao);
    padding: 26px 28px; width: min(440px, calc(100vw - 32px));
    box-shadow: 0 18px 50px rgba(16,32,57,.35);
}
dialog.cartao-dialogo::backdrop { background: rgba(16,32,57,.45); }
.dialogo-topo {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.dialogo-topo h2 {
    margin: 0; font-family: var(--titulo); font-weight: 600; font-size: 19px;
    color: var(--navy);
}
.dialogo-fechar {
    background: none; border: none; font-size: 22px; line-height: 1;
    color: var(--tinta-fraca); cursor: pointer; padding: 0 2px;
}
.dialogo-fechar:hover { color: var(--erro); }

.obreiro-linha { display: flex; align-items: center; gap: 11px; }
/* .obreiro-nome já existe (ficha do irmão, 17px); aqui, dentro da
   linha da tabela, cai para o tamanho de lista e ganha caixa alta
   — mesma régua de obreiros.php de sempre (maiúsculas pelo CSS,
   não pelo cadastro). Só dentro de .tabela-obreiros: a ficha não
   muda. */
.tabela-obreiros .obreiro-nome {
    font-size: 14px; text-transform: uppercase;
}
.obs-texto { font-size: 12.5px; color: var(--tinta-fraca); }

.selo-neutro { background: var(--neutro-bg); color: var(--neutro); }
/*  FALTAVA — 16/09/2026. `.selo-ok` e `.selo-pend` já existiam
    de sempre (linha 550); `.selo-erro`, usada pelo "Eliminado"
    desde o pacote 314, nunca foi escrita, e por isso a pastilha
    saía sem cor nenhuma, só o texto solto. As variáveis --erro/
    --erro-bg já existiam no :root — faltava só esta regra. */
.selo-erro  { background: var(--erro-bg);   color: var(--erro); }

.acao-btn {
    width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--linha);
    background: transparent; color: var(--tinta-fraca); cursor: pointer;
    font-size: 16px; line-height: 1; display: inline-flex; align-items: center;
    justify-content: center; text-decoration: none;
}
.acao-btn:hover { background: var(--pergaminho); border-color: var(--gold); color: var(--navy); }

.paginacao {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 14px 18px; flex-wrap: wrap;
}
.pag-info { font-size: 12.5px; color: var(--tinta-fraca); }
.pag-botoes { display: flex; gap: 6px; }
.pag-botoes button {
    min-width: 30px; height: 30px; border-radius: var(--raio);
    border: 1px solid var(--linha-ouro); background: #FFFFFF; color: var(--navy);
    font-family: var(--titulo); font-size: 12px; cursor: pointer;
}
.pag-botoes button[aria-current="true"] {
    background: var(--navy); color: var(--gold-claro); border-color: var(--navy);
}
.pag-botoes button:disabled { opacity: .4; cursor: default; }

@media (max-width: 900px) {
    .busca-caixa { max-width: none; flex-basis: 100%; }
    /*  O `.fita` geral do site vira GRADE a partir de 620px
        (regra sitewide, para abas/anos). Aqui a fita é de
        FILTRO, não de aba, e precisa continuar rolando na
        horizontal como uma fita só — por isso o `display: flex`
        é repetido aqui, cancelando o `display: grid` daquela
        regra para dentro de `.busca-linha`. Sem isso a fita
        virava grade de 3 colunas e cortava o texto dos botões
        mais longos ("Representados", "Eliminados"). */
    .busca-linha .fita {
        display: flex; width: 100%; overflow-x: auto; flex-wrap: nowrap;
        padding-bottom: 4px; scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
    .busca-linha .fita button {
        flex: 0 0 auto; white-space: nowrap; font-size: 11.5px;
    }
    .tabela-obreiros, .tabela-atas { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tabela-obreiros table { min-width: 720px; }
    .tabela-atas table { min-width: 640px; }
}
@media (max-width: 480px) {
    .stats-grid { gap: 10px; }
    .stat-cartao { padding: 13px 14px; }
}

/* ============================================================
   PAINEL — SEGUNDA VERSÃO (13/10/2026)

   Pedido do titular: letras maiores e expressivas, cor presente,
   tudo numa tela só e sem letrinha. É um bloco de AJUSTE sobre o
   painel acima: só muda tamanho, espaço e o arranjo dos módulos.
   Nada de regra, consulta ou permissão.

   PARA VOLTAR AO ANTERIOR: apague este bloco inteiro (do começo
   deste comentário até o fim do arquivo) e use o painel.php
   antigo. Os tamanhos todos moram nas variáveis abaixo.
   ============================================================ */
.painel-novo {
    --pn-fs:       17px;   /* texto corrido */
    --pn-fs-peq:   14.5px; /* rótulos e apoio — nada abaixo disto */
    --pn-fs-tit:   19px;   /* títulos de cartão */
    --pn-fs-num:   46px;   /* números dos indicadores */
    font-size: var(--pn-fs);
    line-height: 1.4;
    --pn-sombra: 0 6px 16px rgba(26,40,71,.09);
}

/* ---- cabeçalho: saudação numa linha, indicadores grandes ---- */
.painel-novo .hero { grid-template-columns: minmax(0,1fr) minmax(420px, 700px); gap: 20px; margin-bottom: 16px; }
.painel-novo .hero-main { gap: 18px; padding: 8px 4px 4px; }
.painel-novo .avatar { width: 92px; height: 92px; min-width: 92px; }
.painel-novo .welcome h1 { font-size: clamp(1.9rem, 2.6vw, 2.5rem); line-height: 1.05; font-weight: 600; margin-bottom: 4px; white-space: nowrap; }
.painel-novo .welcome .role { font-size: var(--pn-fs-peq); letter-spacing: .12em; font-weight: 600; }
.painel-novo .welcome .divider { margin: 8px 0; }
.painel-novo .welcome p { font-size: var(--pn-fs); }

.painel-novo .hero-stats { gap: 12px; }
.painel-novo .top-stat { padding: 14px 16px; grid-template-columns: 52px 1fr; gap: 14px; border-top: 4px solid var(--pn-ouro); }
.painel-novo .icon-box { width: 52px; height: 52px; border-radius: 13px; }
.painel-novo .stat-label { font-size: var(--pn-fs-peq); font-weight: 600; letter-spacing: .08em; color: var(--pn-text); }
.painel-novo .stat-value { font-size: var(--pn-fs-num); font-weight: 700; line-height: 1.02; }
.painel-novo .stat-value.green { color: #3F7A22; }
.painel-novo .stat-value.gold  { color: #9A6A0C; }
.painel-novo .stat-support { font-size: var(--pn-fs-peq); color: #3D4A66; margin-top: 3px; }

/* ---- "A semana pede de você" ---- */
.painel-novo .band { margin-bottom: 16px; border-left: 6px solid var(--pn-ouro); }
.painel-novo .band-head { padding: 12px 20px 8px; }
.painel-novo .band-title { font-size: var(--pn-fs-tit); font-weight: 700; letter-spacing: .06em; }
.painel-novo .count-badge { min-width: 36px; height: 36px; font-size: 1.05rem; background: #E9CE86; color: #5C430B; border-color: #CFA94F; }
.painel-novo .band-item { padding: 10px 0; }
.painel-novo .band-item a { font-size: 1.2rem; font-weight: 600; color: #7A5A12; }
.painel-novo .deadline { font-size: var(--pn-fs-peq); color: #3D4A66; }

/* ---- colunas ---- */
.painel-novo .main-columns { grid-template-columns: minmax(0,1fr) 400px; gap: 16px; margin-bottom: 16px; }
.painel-novo .card { padding: 16px 20px; }
.painel-novo .card-header { padding-bottom: 10px; margin-bottom: 12px; }
.painel-novo .card-title { font-size: var(--pn-fs-tit); font-weight: 700; letter-spacing: .06em; }
.painel-novo .card-meta { font-size: var(--pn-fs-peq); }
.painel-novo .card-support { font-size: var(--pn-fs-peq); color: #3D4A66; margin-bottom: 12px; }

/* ---- O que cada ofício precisa (estado da Loja, por ofício) ---- */
.painel-novo .oficios-grid {
    /* TRÊS COLUNAS — 14/10/2026 (pacote 499). Eram duas; a regra
       que de fato vale é a mais abaixo (".oficios-grid" aparece
       de novo, por cascata, e aquela é que ganha), mas as duas
       ficam iguais para não confundir quem ler esta primeira. */
    display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; align-items: start;
}
.painel-novo .oficio {
    border: 1px solid var(--pn-linha-ouro); border-left: 5px solid var(--pn-ouro);
    border-radius: 10px; background: var(--pn-surface-2); padding: 10px 14px 6px;
}
.painel-novo .oficio-topo {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--pn-linha);
}
.painel-novo .oficio-nome { font-size: 1.15rem; font-weight: 700; color: var(--pn-text); }
.painel-novo .oficio-item { padding: 8px 0; border-bottom: 1px solid var(--pn-linha); }
.painel-novo .oficio-item:last-child { border-bottom: 0; }
.painel-novo .oficio-item a { font-size: 1.05rem; line-height: 1.3; font-weight: 500; }
.painel-novo .oficio-item a:hover { color: var(--pn-ouro-esc); text-decoration: underline; text-underline-offset: 3px; }
.painel-novo .state-deadline { font-size: var(--pn-fs-peq); color: #3D4A66; margin-top: 2px; }

/* ---- coluna direita ---- */
.painel-novo .right-column { gap: 12px; }
.painel-novo .right-column .cartao { padding: 14px 20px; }
.painel-novo .right-column .cartao-topo .rotulo { font-size: var(--pn-fs-tit); font-weight: 700; }
.painel-novo .right-column .linha, .painel-novo .right-column .linha-valor { font-size: var(--pn-fs); }
.painel-novo .step-link { padding: 14px 16px; border-left-width: 7px; }
.painel-novo .step-kicker { font-size: var(--pn-fs-peq); font-weight: 600; }
.painel-novo .step-title { font-size: 1.4rem; }
.painel-novo .step-text { font-size: var(--pn-fs-peq); color: #3D4A66; }
.painel-novo .pill { font-size: var(--pn-fs-peq); }
.painel-novo a.pend-row { padding: 8px 0; }
.painel-novo .pend-title { font-size: 1.05rem; font-weight: 600; }
.painel-novo .pend-text { font-size: var(--pn-fs-peq); color: #3D4A66; }
.painel-novo a.event-row { padding: 8px 0; }
.painel-novo .event-title { font-size: 1.05rem; font-weight: 600; }
.painel-novo .event-date { font-size: var(--pn-fs-peq); color: #3D4A66; }
.painel-novo .date-day { font-size: 1.5rem; font-weight: 700; }
.painel-novo .date-month { font-size: 12.5px; font-weight: 600; }
.painel-novo .see-all { font-size: var(--pn-fs-peq); }

@media (max-width: 1100px) {
    .painel-novo .welcome h1 { white-space: normal; }
    .painel-novo .oficios-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
}
@media (max-width: 720px) {
    .painel-novo { --pn-fs-num: 38px; }
}

/* ---- ajustes após a primeira renderização (13/10/2026) ---- */
.painel-novo .hero { grid-template-columns: minmax(0,1fr) minmax(0, 660px); }
.painel-novo .top-stat { padding: 12px 12px; grid-template-columns: 44px minmax(0,1fr); gap: 10px; }
.painel-novo .icon-box { width: 44px; height: 44px; }
.painel-novo .stat-value { font-size: 40px; white-space: nowrap; }
.painel-novo .stat-label { font-size: 13.5px; letter-spacing: .06em; }
.painel-novo .welcome h1 { font-size: clamp(1.7rem, 2.3vw, 2.3rem); }
.painel-novo .welcome p:last-child { white-space: nowrap; }
.painel-novo .oficios-grid { display: block; column-count: 2; column-gap: 12px; }
.painel-novo .oficio { break-inside: avoid; margin-bottom: 12px; }
.painel-novo .left-column { align-self: start; }
@media (max-width: 1100px) { .painel-novo .oficios-grid { column-count: 1; } }
.painel-novo .welcome p:last-child { white-space: normal; }
.painel-novo .event-date { display: none; }
.painel-novo a.event-row { padding: 7px 0; }

/* ---- sem buraco: as duas colunas com a mesma altura; módulos em largura total ---- */
@media (min-width: 901px) {
  .painel-novo .main-columns:has(.left-column) { grid-template-columns: minmax(0,1fr) 380px; gap: 14px 18px; }
  .painel-novo .main-columns:has(.left-column) > .right-column { align-self: stretch; grid-auto-rows: min-content; align-content: space-between; }
  .painel-novo .main-columns:has(.left-column) > .left-column > .card { flex: 1; }
}
@media (min-width:901px){ .painel-novo .left-column { align-self: stretch; } }

/* ---- cor própria de cada ofício (13/10/2026) ---- */
.painel-novo .oficio {
    --of: #445066;
    border-color: color-mix(in srgb, var(--of) 38%, #fff);
    border-left: 7px solid var(--of);
    background: color-mix(in srgb, var(--of) 7%, #fff);
}
.painel-novo .oficio-topo { border-bottom-color: color-mix(in srgb, var(--of) 30%, #fff); }
.painel-novo .oficio-nome { color: var(--of); font-size: 1.2rem; }
.painel-novo .oficio .count-badge { background: var(--of); color: #fff; border-color: var(--of); }
.painel-novo .oficio-item a { color: #1A2847; }
.painel-novo .oficio-item { border-bottom-color: color-mix(in srgb, var(--of) 18%, #fff); }

/* ---- cartões dos ofícios preenchem a área, sem sobras (13/10/2026) ---- */
/* TRÊS COLUNAS — 14/10/2026 (pacote 499). "O que cada ofício
   precisa" ganhou a largura inteira da página (os cartões
   pessoais — "A sua gestão", "Atenção e pendências", "Próximos
   eventos" — subiram para a faixa .topo-cartoes, acima). Com a
   largura que antes ia para a coluna da direita agora livre,
   cada uma das três colunas novas fica do tamanho que as duas
   antigas já tinham — não ficou mais apertado, só coube mais
   gente na mesma régua. painel.php passou a repartir $cols_of em
   três "bolsos" (era dois) para casar com esta grade. */
.painel-novo .oficios-grid { display: grid; column-count: auto; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; align-items: stretch; flex: 1; }
.painel-novo .oficios-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.painel-novo .oficios-col .oficio { flex: 1 1 auto; margin-bottom: 0; display: flex; flex-direction: column; }
.painel-novo .oficios-col .oficio .oficio-item:last-child { margin-bottom: auto; }
@media (max-width: 1100px) { .painel-novo .oficios-grid { grid-template-columns: 1fr; } }

/* ============================================================
   REFINO — mais elegância (13/10/2026, 2.ª volta)
   Tamanhos 12–15% menores, pesos mais leves, bordas finas.
   ============================================================ */
.painel-novo {
    --pn-fs: 15.5px; --pn-fs-peq: 13px; --pn-fs-tit: 15.5px; --pn-fs-num: 34px;
}
.painel-novo .hero { gap: 16px; margin-bottom: 14px; grid-template-columns: minmax(0,1fr) minmax(0, 600px); }
.painel-novo .hero-main { gap: 16px; padding: 4px 0; }
.painel-novo .avatar { width: 80px; height: 80px; min-width: 80px; }
.painel-novo .welcome h1 { font-size: clamp(1.4rem, 2vw, 1.85rem); font-weight: 500; letter-spacing: .02em; }
.painel-novo .welcome .role { font-size: 12px; letter-spacing: .16em; font-weight: 500; }
.painel-novo .welcome p { font-size: 15px; }
.painel-novo .hero-stats { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.painel-novo .top-stat { padding: 10px 12px; grid-template-columns: 38px minmax(0,1fr); gap: 10px; border-top-width: 3px; }
.painel-novo .icon-box { width: 38px; height: 38px; border-radius: 10px; }
.painel-novo .icon-box svg, .painel-novo .icon-box img { max-width: 24px; max-height: 24px; }
.painel-novo .stat-label { font-size: 11.5px; letter-spacing: .1em; font-weight: 500; }
.painel-novo .stat-value { font-size: 30px; font-weight: 600; }
.painel-novo .stat-support { font-size: 12.5px; }

.painel-novo .band { border-left-width: 4px; }
.painel-novo .band-title { font-size: 15px; font-weight: 600; letter-spacing: .1em; }
.painel-novo .band-item a { font-size: 1rem; font-weight: 500; }
.painel-novo .deadline { font-size: 13px; }
.painel-novo .count-badge { min-width: 24px; height: 24px; font-size: 13px; font-weight: 600; }

.painel-novo .card { padding: 14px 18px; }
.painel-novo .card-title { font-size: 15px; font-weight: 600; letter-spacing: .1em; }
.painel-novo .card-meta, .painel-novo .card-support { font-size: 12.5px; }
.painel-novo .card-header { padding-bottom: 8px; margin-bottom: 10px; }

.painel-novo .oficio { border-left-width: 4px; padding: 8px 12px 4px; background: color-mix(in srgb, var(--of) 5%, #fff); }
.painel-novo .oficio-nome { font-size: 1.02rem; font-weight: 600; letter-spacing: .01em; }
.painel-novo .oficio .count-badge { min-width: 24px; height: 24px; }
.painel-novo .oficio-item { padding: 6px 0; }
.painel-novo .oficio-item a { font-size: .95rem; line-height: 1.3; }
.painel-novo .state-deadline { font-size: 12.5px; }

.painel-novo .step-link { padding: 12px 14px; border-left-width: 4px; }
.painel-novo .step-title { font-size: 1.15rem; font-weight: 600; }
.painel-novo .step-kicker { font-size: 11.5px; font-weight: 500; }
.painel-novo .step-text { font-size: 13px; }
.painel-novo .pend-title, .painel-novo .event-title { font-size: .95rem; font-weight: 600; }
.painel-novo .pend-text { font-size: 12.5px; }
.painel-novo .date-day { font-size: 1.25rem; }
.painel-novo .date-month { font-size: 11px; }
.painel-novo .pill { font-size: 12px; }
.painel-novo .see-all { font-size: 12.5px; }
.painel-novo .band-item a { font-weight: 600; }

/* ---- cartões de módulo: o desenho ORIGINAL, todos com a mesma altura (13/10/2026) ---- */
.painel-novo .modules-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-auto-rows: 1fr; gap: 14px; }
.painel-novo .module-card { display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
@media (max-width: 900px) { .painel-novo .modules-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .painel-novo .modules-grid { grid-template-columns: 1fr; } }

/* ---- "A semana pede de você": mais elegante (13/10/2026) ---- */
.painel-novo .band {
    background: linear-gradient(180deg, #FFFDF6 0%, #FBF3DC 100%);
    border: 1px solid var(--pn-linha-ouro); border-left: 4px solid var(--pn-ouro);
    border-radius: 14px; padding: 14px 22px 8px; box-shadow: var(--pn-sombra);
}
.painel-novo .band-head { padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--pn-linha-ouro); }
.painel-novo .band-title { font-size: 14px; font-weight: 600; letter-spacing: .14em; color: var(--pn-text); }
.painel-novo .band-list { display: block; }
.painel-novo .band-item {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 11px 0; border-bottom: 1px solid color-mix(in srgb, var(--pn-ouro) 22%, #fff);
}
.painel-novo .band-item:last-child { border-bottom: 0; }
.painel-novo .band-item a {
    position: relative; flex: 1; min-width: 0; padding-left: 20px;
    font-family: var(--serif, 'Spectral', Georgia, serif);
    font-size: 16.5px; font-weight: 500; line-height: 1.4; color: #1A2847;
}
.painel-novo .band-item a::before {
    content: ""; position: absolute; left: 3px; top: .62em; width: 7px; height: 7px;
    background: var(--pn-ouro); transform: rotate(45deg); border-radius: 1px;
}
.painel-novo .band-item a:hover { color: var(--pn-ouro-esc); text-decoration: none; }
.painel-novo .band-item .deadline {
    flex: 0 0 auto; white-space: nowrap; font-size: 12.5px; font-weight: 600; letter-spacing: .03em;
    color: #7A5A12; background: #FFF6DD; border: 1px solid color-mix(in srgb, var(--pn-ouro) 45%, #fff);
    padding: 3px 12px; border-radius: 999px;
}

/* ---- cor própria de cada módulo, com a borda lateral (13/10/2026) ---- */
.painel-novo .module-card {
    --mc: #B8892B;
    border-left: 6px solid var(--mc);
    background: linear-gradient(90deg, color-mix(in srgb, var(--mc) 6%, #fff) 0%, #fff 55%);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.painel-novo .module-card .module-title { color: color-mix(in srgb, var(--mc) 55%, #14203D); }
.painel-novo .module-card .module-link { color: var(--mc); }
.painel-novo .module-card .module-footer { border-top-color: color-mix(in srgb, var(--mc) 25%, #fff); }
.painel-novo .module-card:hover {
    border-color: var(--mc); transform: translateY(-2px);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--mc) 22%, transparent);
}

/* ---- "A semana pede de você": cada tarefa é o seu próprio cartão (13/10/2026) ---- */
.painel-novo .band { background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
.painel-novo .band-head { border-bottom: 0; padding: 0 2px 10px; margin: 0; }
.painel-novo .band-title { font-size: 15px; }
.painel-novo .band-list { display: grid; gap: 9px; }
.painel-novo .band-item {
    position: relative; background: #fff; gap: 18px;
    border: 1px solid var(--pn-linha-ouro); border-left: 5px solid var(--pn-ouro);
    border-radius: 12px; padding: 13px 18px 13px 20px;
    box-shadow: 0 2px 8px rgba(26,40,71,.06);
    transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.painel-novo .band-item:last-child { border-bottom: 1px solid var(--pn-linha-ouro); }
.painel-novo .band-item:hover { transform: translateY(-1px); background: #FFFCF2; box-shadow: 0 8px 18px rgba(154,106,12,.16); }
.painel-novo .band-item a { padding-left: 0; font-size: 16.5px; font-weight: 600; color: #14203D; }
.painel-novo .band-item a::before { display: none; }
.painel-novo .band-item a::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.painel-novo .band-item::after { content: "\203A"; flex: 0 0 auto; font-size: 28px; line-height: 1; color: var(--pn-ouro); margin-left: -4px; }

/* ---- "A semana pede de você": capricho (13/10/2026) ---- */
.painel-novo .band-head { display: flex; align-items: center; gap: 14px; padding: 4px 2px 12px; }
.painel-novo .band-head::after { content: ""; flex: 1; order: 1; height: 1px; background: linear-gradient(90deg, var(--pn-ouro), transparent); opacity: .55; }
.painel-novo .band-head .count-badge { order: 2; }
.painel-novo .band-title { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; letter-spacing: .16em; color: #14203D; white-space: nowrap; }
.painel-novo .band-title::before { content: ""; width: 9px; height: 9px; background: var(--pn-ouro); transform: rotate(45deg); border-radius: 1px; }
.painel-novo .band-list { counter-reset: tarefa; gap: 10px; }
.painel-novo .band-item {
    counter-increment: tarefa; gap: 16px; padding: 14px 18px 14px 16px;
    border: 1px solid var(--pn-linha-ouro); border-left: 0; border-radius: 14px;
    background: linear-gradient(90deg, #FFF8E4 0%, #FFFFFF 22%);
    box-shadow: 0 3px 10px rgba(26,40,71,.07);
}
.painel-novo .band-item::before {
    content: counter(tarefa); flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--titulo, 'Cinzel', Georgia, serif); font-size: 17px; font-weight: 700;
    color: #F3DDA0; background: linear-gradient(145deg, #243B6B, #14203D);
    box-shadow: 0 0 0 3px #FFF8E4, 0 0 0 4px var(--pn-ouro);
}
.painel-novo .band-item a { font-size: 17px; font-weight: 600; line-height: 1.35; }
.painel-novo .band-item .deadline { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; padding: 5px 14px; }
.painel-novo .band-item .deadline::before { content: "PRAZO"; font-size: 10px; letter-spacing: .14em; font-weight: 700; color: #A58132; }
.painel-novo .band-item::after {
    content: "\203A"; width: 32px; height: 32px; margin-left: 0; display: grid; place-items: center;
    border: 1px solid var(--pn-ouro); border-radius: 50%; font-size: 22px; line-height: 1; padding-bottom: 3px;
    color: var(--pn-ouro-esc); transition: background .15s ease, color .15s ease;
}
.painel-novo .band-item:hover { background: linear-gradient(90deg, #FFF1CC 0%, #FFFDF4 30%); }
.painel-novo .band-item:hover::after { background: var(--pn-ouro); color: #fff; }
.painel-novo .band-item a::after { border-radius: 14px; }

/* ---- "A semana pede de você": versão sóbria e elegante (13/10/2026, 3.ª) ---- */
.painel-novo .band-head { padding: 2px 2px 10px; }
.painel-novo .band-head::after { background: linear-gradient(90deg, rgba(184,137,43,.5), transparent 85%); opacity: 1; }
.painel-novo .band-title { font-size: 13.5px; font-weight: 600; letter-spacing: .2em; color: #2A3556; }
.painel-novo .band-title::before { width: 6px; height: 6px; }
.painel-novo .band-list { gap: 8px; }
.painel-novo .band-item {
    gap: 22px; padding: 16px 24px 16px 22px; border-radius: 10px;
    background: #FFFEFB; border: 1px solid rgba(184,137,43,.32);
    box-shadow: inset 3px 0 0 var(--pn-ouro), 0 1px 3px rgba(26,40,71,.05);
}
.painel-novo .band-item:hover { background: #FFFBF0; box-shadow: inset 3px 0 0 var(--pn-ouro), 0 6px 16px rgba(26,40,71,.09); transform: none; }
.painel-novo .band-item::before {
    width: auto; height: auto; min-width: 34px; border-radius: 0; background: none; box-shadow: none;
    display: block; text-align: center; padding-right: 22px; border-right: 1px solid rgba(184,137,43,.35);
    font-size: 24px; font-weight: 400; line-height: 1.1; color: #B8892B;
}
.painel-novo .band-item a { font-size: 17px; font-weight: 500; line-height: 1.45; color: #1A2847; }
.painel-novo .band-item .deadline {
    display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
    background: none; border: 0; padding: 0;
    font-size: 14px; font-weight: 500; font-style: italic; letter-spacing: 0; color: #4A5573;
}
.painel-novo .band-item .deadline::before { font-style: normal; font-size: 9.5px; letter-spacing: .2em; font-weight: 600; color: #B8892B; }
.painel-novo .band-item::after {
    width: auto; height: auto; border: 0; border-radius: 0; background: none !important;
    font-size: 30px; font-weight: 300; padding: 0; color: #B8892B; transition: transform .15s ease;
}
.painel-novo .band-item:hover::after { transform: translateX(3px); color: #9A6A0C; }

/* ============================================================
   CELULAR E TABLET — regras finais (13/10/2026)
   Ficam por último de propósito: vencem as regras de computador.
   ============================================================ */
@media (max-width: 1100px) {
    .painel-novo .hero { grid-template-columns: minmax(0,1fr); }
    .painel-novo .hero-stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 900px) {
    .painel-novo .main-columns,
    .painel-novo .main-columns:has(.left-column) { grid-template-columns: minmax(0,1fr); grid-template-rows: none; }
    .painel-novo .main-columns:has(.left-column) > .left-column,
    .painel-novo .main-columns:has(.left-column) > .right-column,
    .painel-novo .main-columns:has(.left-column) > .modules-grid { grid-column: 1; grid-row: auto; align-self: stretch; }
    .painel-novo .oficios-grid { grid-template-columns: minmax(0,1fr); }
    .painel-novo .modules-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
}
@media (max-width: 640px) {
    .painel-novo .hero-main { align-items: center; gap: 14px; }
    .painel-novo .avatar { width: 64px; height: 64px; min-width: 64px; }
    .painel-novo .welcome h1 { white-space: normal; font-size: 1.45rem; }
    .painel-novo .welcome .role { letter-spacing: .1em; }
    .painel-novo .hero-stats { grid-template-columns: minmax(0,1fr); gap: 8px; }
    .painel-novo .top-stat { grid-template-columns: 38px minmax(0,1fr); }
    .painel-novo .stat-value { font-size: 28px; }

    .painel-novo .band-item { flex-wrap: wrap; gap: 6px 14px; padding: 14px 16px; }
    .painel-novo .band-item::before { min-width: 0; padding-right: 12px; font-size: 20px; }
    .painel-novo .band-item a { flex: 1 1 0; min-width: 0; font-size: 16px; }
    .painel-novo .band-item::after { display: none; }
    .painel-novo .band-item .deadline {
        flex: 1 1 100%; flex-direction: row; align-items: baseline; gap: 8px;
        padding-top: 6px; border-top: 1px dashed rgba(184,137,43,.35);
    }
    .painel-novo .band-item .deadline::before { order: 0; }

    .painel-novo .card { padding: 14px 14px; }
    .painel-novo .card-header { flex-wrap: wrap; gap: 4px 12px; }
    .painel-novo .modules-grid { grid-template-columns: minmax(0,1fr); }
    .painel-novo .module-card { height: auto; }
}
.painel-novo .band-list { padding: 0; margin: 0; }
@media (max-width: 640px) {
    .painel-novo .modules-grid { grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows: auto; gap: 9px; }
    .painel-novo .module-card { padding: 12px 10px 12px 12px; border-left-width: 5px; }
    .painel-novo .module-top { flex-direction: column; align-items: flex-start; gap: 8px; }
    .painel-novo .module-desc, .painel-novo .module-footer { display: none; }
    .painel-novo .module-title { font-size: 1rem; margin: 0; }
    .painel-novo .module-aviso { top: 6px; right: 6px; }
}
@media (max-width: 640px) {
    .painel-novo .module-card { min-height: 0; height: auto; justify-content: flex-start; }
    .painel-novo a.event-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; }
    .painel-novo .event-title { margin: 0; }
}

/* ---- número no círculo azul, de volta (13/10/2026) ---- */
.painel-novo .band-item::before {
    flex: 0 0 auto; width: 38px; height: 38px; min-width: 38px; padding: 0; border: 0; border-radius: 50%;
    display: grid; place-items: center; text-align: center;
    font-family: var(--titulo, 'Cinzel', Georgia, serif); font-size: 17px; font-weight: 700; line-height: 1;
    color: #F3DDA0; background: linear-gradient(145deg, #243B6B, #14203D);
    box-shadow: 0 0 0 3px #FFFEFB, 0 0 0 4px var(--pn-ouro);
}
@media (max-width: 640px) {
    .painel-novo .band-item::before { width: 34px; height: 34px; min-width: 34px; padding: 0; font-size: 15px; }
}

/* ============================================================
   OS CARTÕES PESSOAIS SOBEM, LADO A LADO — 14/10/2026
   (pacote 499)

   Pedido do usuário: "A sua gestão", "Atenção e pendências" e
   "Próximos eventos" andavam espremidos numa coluna de 360-400px
   ao lado de "O que cada ofício precisa" — e esse cartão, que é
   o que mostra o estado da Loja inteira, ficava com menos espaço
   do que precisava. Agora os cartões pessoais vêm primeiro,
   numa faixa só, lado a lado; "O que cada ofício precisa" desce
   para a seção seguinte, com a largura inteira da página.

   Estas duas classes (.topo-cartoes e .oficios-secao) só entram
   em cena quando painel.php as desenha — e ele só as desenha
   quando $meu_sabe existe, ou seja, só para o Master e só quando
   sobra algo de outro ofício para mostrar. O painel do oficial
   comum não tem nenhuma das duas: continua em .main-columns >
   .right-column, exatamente como sempre — nada nesta seção toca
   nessas regras antigas.
   ============================================================ */
.painel-novo .topo-cartoes {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px; align-items: start; margin-bottom: 16px;
}
.painel-novo .topo-cartoes > * { margin: 0; }

.painel-novo .oficios-secao { margin-bottom: 16px; }

/* ============================================================
   PAINEL — LAYOUT SEM VAZIO + CORES, BORDAS E MOVIMENTO
   14/10/2026, mesmo padrão aprovado na tela de Obreiros:
   borda lateral na cor da categoria, fundo claro da mesma cor,
   e ao passar o mouse o cartão sobe/desliza e a borda engrossa.
   ------------------------------------------------------------
   MASTER: "A sua gestão", trilha, próximo passo e "Atenção e
   pendências" empilhados à esquerda (2/3); "Próximos eventos" à
   direita (1/3), na mesma altura — some o vazio que ficava sob
   os dois primeiros cartões.
   ============================================================ */
.painel-novo .topo-cartoes {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: stretch; gap: 16px;
}
.painel-novo .topo-cartoes.topo-so-eventos { grid-template-columns: minmax(0, 1fr); }
.painel-novo .topo-esq { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.painel-novo .topo-esq > :last-child { flex: 1; }
.painel-novo .topo-dir { min-width: 0; display: flex; flex-direction: column; }
.painel-novo .topo-dir > .event-card { flex: 1; }
@media (max-width: 980px) {
    .painel-novo .topo-cartoes { grid-template-columns: minmax(0, 1fr); }
}

/* Cor da categoria de cada cartão pessoal (vale também para a coluna
   da direita do oficial comum). Verde = em dia; âmbar = atenção;
   vermelho = urgente; azul-marinho e ouro = identidade da Loja. */
.painel-novo .topo-cartoes .cartao,
.painel-novo .right-column .cartao,
.painel-novo .pend-card,
.painel-novo .event-card,
.painel-novo .step-card {
    --c: #1F3A6E;
    border-left: 5px solid var(--c);
    background: color-mix(in srgb, var(--c) 5%, #fff);
    transition: transform .2s, box-shadow .2s, background .2s, border-left-width .2s;
}
.painel-novo .event-card { --c: #B8923A; }
.painel-novo .step-card  { --c: #B8923A; }
.painel-novo .step-card:has(.step-urgente) { --c: #B83A3A; }
.painel-novo .pend-card  { --c: #B7791F; }
.painel-novo .pend-card:not(:has(.pend-row)) { --c: #2F7D4F; }
.painel-novo .topo-cartoes .cartao:hover,
.painel-novo .right-column .cartao:hover,
.painel-novo .pend-card:hover,
.painel-novo .event-card:hover,
.painel-novo .step-card:hover {
    transform: translateY(-3px) translateX(2px);
    border-left-width: 9px;
    background: color-mix(in srgb, var(--c) 10%, #fff);
    box-shadow: 0 10px 22px rgba(22, 36, 71, .16);
}
.painel-novo .step-card .step-link { border-left: 0; background: transparent; }
.painel-novo .step-card .step-icon { transition: transform .2s; }
.painel-novo .step-card:hover .step-icon { transform: scale(1.08) rotate(-4deg); }
.painel-novo .step-card:hover .arrow { transform: translateX(4px); }
.painel-novo .step-card .arrow { transition: transform .2s; }

/* Linhas de pendência e de evento: deslizam e ganham fundo. */
.painel-novo a.pend-row, .painel-novo a.event-row {
    border-radius: 8px; transition: transform .18s, background .18s;
}
.painel-novo a.pend-row:hover, .painel-novo a.event-row:hover {
    transform: translateX(4px); background: color-mix(in srgb, var(--c) 12%, #fff);
}
.painel-novo .event-row .date-box { transition: transform .18s; }
.painel-novo a.event-row:hover .date-box { transform: translateY(-2px) scale(1.05); }

/* "O que cada ofício precisa": cada ofício já tem a sua cor (--of). */
.painel-novo .oficio {
    transition: transform .2s, box-shadow .2s, background .2s, border-left-width .2s, padding-left .2s;
}
.painel-novo .oficio:hover {
    transform: translateY(-3px) translateX(2px);
    border-left-width: 8px;
    background: color-mix(in srgb, var(--of) 12%, #fff);
    box-shadow: 0 10px 22px rgba(22, 36, 71, .16);
}
.painel-novo .oficio-item { transition: transform .15s; }
.painel-novo .oficio-item:hover { transform: translateX(4px); }

/* Módulos: o mesmo gesto, um pouco mais marcado. */
.painel-novo .module-card { transition: transform .2s, box-shadow .2s, border-color .2s; }
.painel-novo .module-card:hover {
    transform: translateY(-4px) translateX(2px);
    box-shadow: 0 12px 24px rgba(22, 36, 71, .18);
}

/* ============================================================
   MÓDULOS — CARTÃO INTEIRO CLICÁVEL + COR DE FUNDO (14/10/2026)
   Bug: no celular o rodapé "Abrir módulo" some e era o único link.
   Agora o nome é o link e o véu cobre o cartão todo.
   Cor: fundo num tom mais claro da mesma cor da borda (--mc).
   ============================================================ */
.painel-novo .module-card { position: relative; cursor: pointer; }
.painel-novo .module-abrir { color: inherit; text-decoration: none; }
.painel-novo .module-abrir::after {
    content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit;
}
.painel-novo .module-aviso { z-index: 2; pointer-events: none; }
.painel-novo .module-card {
    border-left: 6px solid var(--mc);
    background: color-mix(in srgb, var(--mc) 13%, #fff);
    border-color: color-mix(in srgb, var(--mc) 30%, #fff);
    border-left-color: var(--mc);
    transition: transform .2s, box-shadow .2s, background .2s, border-left-width .2s;
}
.painel-novo .module-card:active { background: color-mix(in srgb, var(--mc) 24%, #fff); }
@media (hover: hover) {
    .painel-novo .module-card:hover {
        transform: translateY(-4px) translateX(2px);
        border-left-width: 10px;
        background: color-mix(in srgb, var(--mc) 22%, #fff);
        box-shadow: 0 12px 24px color-mix(in srgb, var(--mc) 28%, transparent);
    }
}
.painel-novo .module-card .module-footer { border-top-color: color-mix(in srgb, var(--mc) 35%, #fff); }

/* ============================================================
   CARTÕES DO TOPO (Frequência, Câmara do Meio, Tesouraria...)
   14/10/2026. Brancos por padrão; ao passar o mouse ganham o tom
   da cor do ofício (--c), sobem, deslizam e a borda engrossa.
   A BARRA segue o estado do sistema: verde = apto, vermelho =
   inapto, cinza = sem dado.
   ============================================================ */
.painel-novo .top-stat {
    --c: #2D5F9A;
    background: #fff;
    border: 1px solid #E4DBC6; border-left: 6px solid var(--c);
    box-shadow: 0 1px 3px rgba(18,33,58,.08);
    transition: transform .2s, box-shadow .2s, background .2s, border-left-width .2s, padding-left .2s;
}
.painel-novo .top-stat .icon-box { box-shadow: 0 0 0 2px var(--c); transition: transform .2s; }
.painel-novo .top-stat .stat-label { color: color-mix(in srgb, var(--c) 70%, #000); font-weight: 600; letter-spacing: .12em; }
.painel-novo .top-stat .stat-value,
.painel-novo .top-stat .stat-value.green,
.painel-novo .top-stat .stat-value.gold { color: var(--c); font-size: 2rem; font-weight: 700; }
.painel-novo .stat-bar { height: 9px; border-radius: 5px; background: #ECE6DA; overflow: hidden; margin: 6px 0 4px; }
.painel-novo .stat-bar i { display: block; height: 100%; border-radius: 5px; background: #8A93A3; transition: filter .2s; }
.painel-novo .top-stat.st-ok .stat-bar i { background: #2F7D4F; }
.painel-novo .top-stat.st-at .stat-bar i { background: #B83A3A; }
@media (hover: hover) {
    .painel-novo .top-stat:hover {
        transform: translateY(-4px) translateX(2px);
        border-left-width: 10px; padding-left: 11px;
        background: color-mix(in srgb, var(--c) 14%, #fff);
        border-color: color-mix(in srgb, var(--c) 35%, #fff);
        border-left-color: var(--c);
        box-shadow: 0 12px 24px color-mix(in srgb, var(--c) 26%, transparent);
    }
    .painel-novo .top-stat:hover .icon-box { transform: scale(1.08) rotate(-4deg); }
    .painel-novo .top-stat:hover .stat-bar i { filter: brightness(1.12); }
}

/* ===== Botões coloridos por tipo de ação (padrão STM) ===== */
.btn-ver,.btn-editar,.btn-admin,.btn-ok,.btn-perigo,.btn-neutro{
  --bc:#2D5F9A;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;min-height:44px;border-radius:10px;cursor:pointer;
  font-family:'Cinzel',serif;font-weight:700;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;line-height:1.2;
  color:var(--bc);
  background:color-mix(in srgb,var(--bc) 13%,#fff);
  border:1.5px solid color-mix(in srgb,var(--bc) 45%,#fff);
  transition:transform .18s,box-shadow .18s,background .18s,color .18s,border-color .18s;
}
.btn-editar{--bc:#445066}
.btn-admin{--bc:#9A6A0C}
.btn-ok{--bc:#2F7D4F}
.btn-perigo{--bc:#B83A3A}
.btn-neutro{--bc:#6B7384}
@media (hover:hover){
  .btn-ver:hover,.btn-editar:hover,.btn-admin:hover,.btn-ok:hover,.btn-perigo:hover,.btn-neutro:hover{
    background:var(--bc);border-color:var(--bc);color:#fff;transform:translateY(-2px);
    box-shadow:0 6px 14px color-mix(in srgb,var(--bc) 35%,transparent);
  }
}
.btn-ver:active,.btn-editar:active,.btn-admin:active,.btn-ok:active,.btn-perigo:active,.btn-neutro:active{transform:translateY(0)}
.btn-ver.ativo,.btn-editar.ativo,.btn-admin.ativo,.btn-ok.ativo,.btn-perigo.ativo,.btn-neutro.ativo{background:var(--bc);border-color:var(--bc);color:#fff}
@media (max-width:640px){
  .btn-ver,.btn-editar,.btn-admin,.btn-ok,.btn-perigo,.btn-neutro{width:100%;font-size:12.5px}
}

/* ===== Cabeçalho de tabela — padrão do STM (14/10/2026) ============
   Placa navy com o mosaico discreto da Loja, rótulos em versalete
   dourado e fio duplo dourado embaixo. Vale para toda tabela com
   <thead> do sistema: nunca mais cabeçalho cinza claro "flutuando". */
.conteudo thead th,
.tabela-obreiros thead th, .tabela-atas thead th, .adm-tab thead th {
    padding: 14px 16px 16px;
    text-align: left;
    font-family: var(--serif, 'Spectral', Georgia, serif);
    font-variant-caps: small-caps;
    font-feature-settings: "smcp";
    font-size: 18px; font-weight: 600; letter-spacing: .09em;
    text-transform: none; white-space: nowrap;
    color: #E8C860;
    background-color: var(--navy-cl, #17365E);
    background-image: repeating-conic-gradient(rgba(255,255,255,.06) 0% 25%, transparent 0% 50%);
    background-size: 18px 18px;
    border: none;
    box-shadow:
        inset 0 -2px 0 #C8A020,
        inset 0 -4px 0 var(--navy-cl, #17365E),
        inset 0 -5px 0 rgba(200,160,32,.55);
}
.conteudo thead th.dir, .tabela-obreiros thead th.dir, .tabela-atas thead th.dir { text-align: right; }
.conteudo thead th:first-child, .adm-tab thead th:first-child { border-radius: 12px 0 0 0; }
.conteudo thead th:last-child,  .adm-tab thead th:last-child  { border-radius: 0 12px 0 0; }
.adm-tab thead th:first-child { border-radius: 10px 0 0 10px; }
.adm-tab thead th:last-child  { border-radius: 0 10px 10px 0; }
.tabela-obreiros, .tabela-atas { padding-top: 0 !important; }
/* ============================================================
   Botão "Voltar" — mesma placa dos cabeçalhos de tabela (STM)
   ============================================================ */
.voltar{
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 22px 13px 18px;
  font-family:var(--serif, 'Cinzel', serif);
  font-variant-caps:small-caps; font-feature-settings:"smcp";
  font-size:18px; font-weight:600; letter-spacing:.09em; text-transform:none;
  color:#E8C860;
  background-color:var(--navy-cl,#17365E);
  background-image:repeating-conic-gradient(rgba(255,255,255,.06) 0% 25%, transparent 0% 50%);
  background-size:18px 18px;
  border:1px solid #C8A020; border-radius:10px;
  box-shadow: inset 0 -2px 0 #C8A020, inset 0 -4px 0 var(--navy-cl,#17365E), inset 0 -5px 0 rgba(200,160,32,.55), 0 4px 12px rgba(22,36,71,.28);
  text-decoration:none; cursor:pointer;
  transition: transform .16s ease, box-shadow .16s ease, color .16s ease, filter .16s ease;
}
.voltar .seta{font-size:22px;line-height:1;transition:transform .16s ease}
@media (hover:hover){
  .voltar:hover{color:#FFE58A;filter:brightness(1.12);transform:translateY(-2px);
    box-shadow: inset 0 -2px 0 #E8C860, inset 0 -4px 0 var(--navy-cl,#17365E), inset 0 -5px 0 rgba(232,200,96,.7), 0 8px 18px rgba(7,20,39,.38)}
  .voltar:hover .seta{transform:translateX(-4px)}
}
.voltar:active{transform:translateY(0)}
@media (max-width:700px){ .voltar{font-size:16px;padding:9px 16px 11px 14px} }
/* ============================================================
   Menu lateral — mesma placa dos cabeçalhos de tabela (STM)
   ============================================================ */
.lateral-item{
  border:1px solid rgba(200,160,32,.55);
  background-color:var(--navy-cl,#17365E);
  background-image:repeating-conic-gradient(rgba(255,255,255,.06) 0% 25%, transparent 0% 50%);
  background-size:18px 18px;
  color:#E8C860;
  font-family:var(--serif); font-variant-caps:small-caps; font-feature-settings:"smcp";
  font-size:16.5px; font-weight:600; letter-spacing:.03em; white-space:nowrap;
  min-height:48px; margin-bottom:8px;
  box-shadow: inset 0 -2px 0 #C8A020, inset 0 -4px 0 var(--navy-cl,#17365E), inset 0 -5px 0 rgba(200,160,32,.5), 0 2px 6px rgba(0,0,0,.35);
}
.lateral-item::after{border-color:#E8C860;opacity:.75}
@media (hover:hover){
  .lateral-item:hover{
    background-color:var(--navy-cl,#17365E); color:#FFE58A; border-color:#E8C860;
    filter:brightness(1.18); transform:translateX(3px);
    box-shadow: inset 0 -2px 0 #E8C860, inset 0 -4px 0 var(--navy-cl,#17365E), inset 0 -5px 0 rgba(232,200,96,.7), 0 4px 10px rgba(0,0,0,.45);
  }
}
.lateral-item.ativo{
  background-color:#1F4B80; border-color:#E8C860; color:#FFE58A;
  box-shadow: inset 5px 0 0 #E8C860, inset 0 -2px 0 #E8C860, inset 0 -4px 0 #1F4B80, inset 0 -5px 0 rgba(232,200,96,.7), 0 4px 10px rgba(0,0,0,.45);
}
.lateral-item.ativo:hover{border-color:#E8C860;filter:none}
.lateral-item::before{border-color:#E8C860;background:var(--menu-fundo-2,#060F1F)}
.lateral-grupo{
  font-family:var(--serif); font-variant-caps:small-caps; font-feature-settings:"smcp";
  font-size:15px; font-weight:700; letter-spacing:.12em; text-transform:none;
  color:#E8C860;
}
.lateral-grupo::after{height:2px;background:#C8A020;opacity:1}

.lateral-grupo{margin-top:16px}
/* Fundo do menu: marinho profundo com textura (opção B aprovada) */
.lateral{
  background:
    radial-gradient(120% 60% at 50% 0%, #14315A 0%, rgba(20,49,90,0) 70%),
    repeating-conic-gradient(rgba(232,200,96,.035) 0% 25%, transparent 0% 50%) 0 0/26px 26px,
    linear-gradient(180deg, #0B2040 0%, #040D1C 100%);
}
/* Nomes longos (ex.: "Comissão de Leis e Assuntos Gerais") quebram em 2 linhas
   dentro da placa, sem passar por cima da seta. */
.lateral-item{
  white-space:normal; overflow-wrap:anywhere; line-height:1.12;
  padding-top:7px; padding-bottom:9px; padding-right:30px;
}
/* A placa nunca encolhe: com a lista longa, o menu rola em vez de espremer. */
.lateral-item, .lateral-grupo{ flex: 0 0 auto; }
/* Menu lateral: placas de altura uniforme (62px), nomes longos em até 2 linhas */
.lateral-item,.lateral:has(.lateral-item:nth-of-type(20)) .lateral-item{
  flex:0 0 auto; height:62px; min-height:62px; margin:0 16px 10px; padding:0 28px 2px 54px;
  font-size:15px; letter-spacing:.02em; line-height:1.1; white-space:normal; overflow-wrap:break-word;
  display:flex; align-items:center;
}
.lateral-item::before,.lateral:has(.lateral-item:nth-of-type(20)) .lateral-item::before{left:9px;width:36px;height:36px}
.lateral-item svg,.lateral-item img,.lateral:has(.lateral-item:nth-of-type(20)) .lateral-item svg,.lateral:has(.lateral-item:nth-of-type(20)) .lateral-item img{left:17px;width:20px;height:20px}
.lateral-item::after,.lateral:has(.lateral-item:nth-of-type(20)) .lateral-item::after{right:11px}
.lateral-grupo,.lateral:has(.lateral-item:nth-of-type(20)) .lateral-grupo{margin:20px 16px 10px;font-size:14px;flex:0 0 auto}

/* ===== Cabeçalho dos cartões do Painel — placa do padrão STM ===== */
.painel-novo .card-header{
  padding:13px 20px 15px; margin-bottom:14px; border-bottom:0; border-radius:12px;
  background-color:var(--navy-cl,#17365E);
  background-image:repeating-conic-gradient(rgba(255,255,255,.06) 0% 25%,transparent 0% 50%);
  background-size:18px 18px;
  box-shadow:inset 0 -2px 0 #C8A020, inset 0 -4px 0 var(--navy-cl,#17365E), inset 0 -5px 0 rgba(200,160,32,.55);
}
.painel-novo .card-title{
  font-family:var(--serif); font-variant-caps:small-caps; font-feature-settings:"smcp";
  text-transform:none; font-size:20px; font-weight:600; letter-spacing:.09em; color:#E8C860;
}
.painel-novo .card-meta{ color:#C9D4E6; font-size:15px; font-style:italic }
.painel-novo .card-support{ font-size:16px; color:#3D4A66 }

/* ===== PADRÃO ÚNICO DE CORES POR POSIÇÃO (14/10/2026) =====
   1º azul · 2º amarelo · 3º vermelho · 4º verde · 5º roxo · 6º azul-petróleo.
   Vale para botões (sólidos) e para cartões de número (tom leve), em todas as telas.
   Exceções fixas: .btn-perigo = sempre vermelho; .btn-neutro (Cancelar/Voltar) = grafite, fora da sequência. */
.seq>:nth-child(6n+1),:is(.btn-ver,.btn-editar,.btn-admin,.btn-ok):nth-child(6n+1 of .btn-ver,.btn-editar,.btn-admin,.btn-ok){--bc:#2D6CC0;--c:#2D6CC0;--bd:#123F7C;--bt:#fff}
.seq>:nth-child(6n+2),:is(.btn-ver,.btn-editar,.btn-admin,.btn-ok):nth-child(6n+2 of .btn-ver,.btn-editar,.btn-admin,.btn-ok){--bc:#E5A900;--c:#E5A900;--bd:#8A6600;--bt:#102039}
.seq>:nth-child(6n+3),:is(.btn-ver,.btn-editar,.btn-admin,.btn-ok):nth-child(6n+3 of .btn-ver,.btn-editar,.btn-admin,.btn-ok){--bc:#D14B45;--c:#D14B45;--bd:#7C1F1B;--bt:#fff}
.seq>:nth-child(6n+4),:is(.btn-ver,.btn-editar,.btn-admin,.btn-ok):nth-child(6n+4 of .btn-ver,.btn-editar,.btn-admin,.btn-ok){--bc:#2FA36B;--c:#2FA36B;--bd:#14573A;--bt:#fff}
.seq>:nth-child(6n+5),:is(.btn-ver,.btn-editar,.btn-admin,.btn-ok):nth-child(6n+5 of .btn-ver,.btn-editar,.btn-admin,.btn-ok){--bc:#7A4FA0;--c:#7A4FA0;--bd:#44245F;--bt:#fff}
.seq>:nth-child(6n+6),:is(.btn-ver,.btn-editar,.btn-admin,.btn-ok):nth-child(6n+6 of .btn-ver,.btn-editar,.btn-admin,.btn-ok){--bc:#1F8A9E;--c:#1F8A9E;--bd:#0C4A58;--bt:#fff}
.btn-perigo{--bc:#C23B36;--bd:#771A17;--bt:#fff}
.btn-neutro{--bc:#4A5568;--bd:#222B3A;--bt:#fff}
.btn-ver,.btn-editar,.btn-admin,.btn-ok,.btn-perigo,.btn-neutro{
  min-height:48px;padding:12px 22px;font-size:15px;letter-spacing:.07em;border-radius:12px;
  color:var(--bt,#fff);background:var(--bc,#2D6CC0);border:1px solid var(--bd,#123F7C);border-left:9px solid var(--bd,#123F7C);
  box-shadow:0 4px 10px rgba(16,32,57,.26);text-shadow:none}
@media (hover:hover){
  .btn-ver:hover,.btn-editar:hover,.btn-admin:hover,.btn-ok:hover,.btn-perigo:hover,.btn-neutro:hover{
    background:var(--bc,#2D6CC0);color:var(--bt,#fff);border-color:var(--bd,#123F7C);filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 8px 18px rgba(16,32,57,.34)}
}
.btn-ver.ativo,.btn-editar.ativo,.btn-admin.ativo,.btn-ok.ativo,.btn-perigo.ativo,.btn-neutro.ativo{background:var(--bc,#2D6CC0);color:var(--bt,#fff);outline:3px solid #102039;outline-offset:2px}
@media (max-width:640px){.btn-ver,.btn-editar,.btn-admin,.btn-ok,.btn-perigo,.btn-neutro{font-size:14.5px}}

/* ===== CABEÇALHO EM PLACA nos cartões de ficha/edição/administração (14/10/2026) ===== */
.ed-card.ed-card h2,.adm-card.adm-card h2,.ficha-card.ficha-card h2{
  margin:-14px -22px 14px -22px;padding:12px 22px 15px;border:0;border-radius:12px 12px 0 0;
  font-family:var(--serif,'Spectral',serif);font-weight:600;font-size:19px;font-variant-caps:small-caps;font-feature-settings:"smcp";
  letter-spacing:.09em;text-transform:none;color:#E8C860;
  background-color:var(--navy-cl,#17365E);background-image:repeating-conic-gradient(rgba(255,255,255,.06) 0% 25%,transparent 0% 50%);background-size:18px 18px;
  box-shadow:inset 0 -2px 0 #C8A020,inset 0 -4px 0 var(--navy-cl,#17365E),inset 0 -5px 0 rgba(200,160,32,.55)}
.ed-card.ed-card h2 small,.adm-card.adm-card h2 small,.ficha-card.ficha-card h2 small{font:italic 15px var(--serif,'Spectral',serif);color:#C9D4E6;letter-spacing:0;text-transform:none}
@media (max-width:640px){.ed-card.ed-card h2,.adm-card.adm-card h2,.ficha-card.ficha-card h2{font-size:18px}}

/* ===== CARTÕES DO TOPO DO PAINEL: A COR É O ESTADO (14/10/2026) =====
   Tudo em dia = verde; problema = vermelho; sem dado = a cor do ofício. */
.painel-novo .top-stat.st-ok{--c:#2E9E6B !important}
.painel-novo .top-stat.st-at{--c:#D14B45 !important}
.painel-novo .top-stat.st-ok .stat-bar i{background:#2E9E6B}
.painel-novo .top-stat.st-at .stat-bar i{background:#D14B45}

/* ============================================================
   SELOS DE SITUAÇÃO — padrão 14/10/2026
   Sólido, letra branca em negrito 15px, borda lateral escura 7px,
   bolinha antes do texto. Cor POR SIGNIFICADO (igual em todo o
   sistema):  neutro=grafite · pend=amarelo · ok=verde · erro=vermelho
   · info=azul · roxo · petroleo.  Fora desses significados, use
   .selos > .selo (cores por posição: azul, amarelo, vermelho, verde,
   roxo, petróleo).
   ============================================================ */
.selo{
    --c:#2D6CC0; --d:#123F7C;
    display:inline-flex; align-items:center; gap:7px;
    font-size:15px; font-weight:700; letter-spacing:.2px; line-height:1.2;
    padding:6px 16px 6px 11px; border-radius:999px;
    color:#fff; background:var(--c); border-left:7px solid var(--d);
    white-space:nowrap;
}
.selo::before{content:""; width:8px; height:8px; border-radius:50%; background:currentColor; opacity:.9; flex:0 0 auto}
.selo.selo-neutro{--c:#4A5568; --d:#2A303B; color:#fff; background:var(--c)}
.selo.selo-pend  {--c:#E5A900; --d:#8A6600; color:#102039; background:var(--c)}
.selo.selo-ok    {--c:#2FA36B; --d:#14573A; color:#fff; background:var(--c)}
.selo.selo-erro  {--c:#D14B45; --d:#7C1F1B; color:#fff; background:var(--c)}
.selo.selo-info  {--c:#2D6CC0; --d:#123F7C; color:#fff; background:var(--c)}
.selo.selo-roxo  {--c:#7A4FA0; --d:#44245F; color:#fff; background:var(--c)}
.selo.selo-petroleo{--c:#1F8A9E; --d:#0C4A58; color:#fff; background:var(--c)}
.selos{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.selos>.selo:nth-child(6n+1){--c:#2D6CC0;--d:#123F7C;color:#fff}
.selos>.selo:nth-child(6n+2){--c:#E5A900;--d:#8A6600;color:#102039}
.selos>.selo:nth-child(6n+3){--c:#D14B45;--d:#7C1F1B;color:#fff}
.selos>.selo:nth-child(6n+4){--c:#2FA36B;--d:#14573A;color:#fff}
.selos>.selo:nth-child(6n+5){--c:#7A4FA0;--d:#44245F;color:#fff}
.selos>.selo:nth-child(6n+6){--c:#1F8A9E;--d:#0C4A58;color:#fff}

/* ===== TOPO DE TELA — título e subtítulo legíveis em todas as telas (14/10/2026) =====
   O subtítulo era 14px cinza-claro ("tímido"). O botão de voltar em placa substitui a trilha
   "Início / Seção / Tela" nas telas já arrumadas. */
.titulo-grande{font-size:34px;letter-spacing:1.4px}
.subtitulo{font-size:18px;color:#2a3850;line-height:1.4;margin:6px 0 0}
@media (max-width:640px){.titulo-grande{font-size:27px}.subtitulo{font-size:16.5px}}

/* Palavra do título na faixa de cima: negrito e escura, igual em todas as telas (15/10/2026) */
.faixa-titulo { font-weight: 700; color: #102039; font-size: 20px; letter-spacing: 1.4px; }
@media (max-width: 980px) { .faixa-titulo { font-size: 14px; letter-spacing: .8px; } }

/* ============================================================
   RESPONSIVO GLOBAL — 16/10/2026

   Revisão feita na ORIGEM: as telas herdam estas regras, e nenhuma
   precisa de remendo próprio para o básico. O desktop aprovado
   (≥1101px) não muda.

   BREAKPOINTS (os mesmos em todo o sistema)
     ≥1101px   desktop e notebook: menu lateral fixo (como sempre)
     ≤1100px   tablet e notebook pequeno: a lateral vira gaveta e o
               conteúdo ocupa a largura toda (bloco do menu, acima)
     ≤760px    celular: uma coluna, campos e botões para o dedo
     ≤420px    celular pequeno: respiros menores

   COMO ESTE BLOCO CONVIVE COM O CSS DAS TELAS
   As "redes de segurança" usam :where(), que tem especificidade
   ZERO: qualquer regra da própria tela vence. Só o que precisa
   vencer (toque, modal) usa seletor comum.
   ============================================================ */

/* ---- 1. Redes de segurança (todas as larguras) ---- */
:where(.conteudo) img,
:where(.conteudo) video,
:where(.conteudo) canvas,
:where(.conteudo) iframe { max-width: 100%; }
:where(.conteudo) pre { max-width: 100%; overflow-x: auto; }
:where(.conteudo) :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) { max-width: 100%; }
/* Filho de grade ou de flex não encolhe abaixo do seu conteúdo e
   empurra a linha para fora do cartão: é a causa mais comum de
   estouro lateral. */
:where(.conteudo) :is([class*="grade"], [class*="grid"], [class*="cartoes"], [class*="campos"]) > * { min-width: 0; }

/* ---- 2. Tabelas largas: rolam na horizontal, sem estourar a tela ----
   O envoltório é criado por includes/layout_fim.php, para toda
   <table> que ainda não esteja numa área com rolagem. */
.tabela-rolagem {
    max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; scrollbar-color: var(--gold-esc) transparent;
}
.tabela-rolagem > table { max-width: none; }
.dica-rolagem {
    display: none; margin: 4px 2px 10px; padding: 0;
    font: italic 400 14px/1.3 var(--serif); color: var(--tinta-sec);
}
/* Só aparece quando a tabela de fato rola. */
.tabela-rolagem.tem-rolagem + .dica-rolagem { display: block; }

/* ---- 3. Tablet e notebook pequeno (≤1100px) ---- */
@media (max-width: 1100px) {
    /* Telas redesenhadas repetiam, cada uma, um recuo para a lateral
       em @media (min-width:981px). Com a gaveta valendo até 1100px,
       esse recuo deixaria um vazio à esquerda: aqui ele é desfeito,
       uma vez só, para todas. */
    body.com-lateral main.conteudo.conteudo-largo {
        margin-left: auto !important; margin-right: auto !important;
        width: auto !important; max-width: 1180px;
    }
    /* Com a gaveta aberta a página de trás não rola. */
    body:has(.gaveta-check:checked) { overflow: hidden; }
    /* Título longo (ex.: "Suspensão dos trabalhos") quebra em até 2 linhas, em vez de virar "TRABA…" (17/10/2026). */
    .faixa-titulo { min-width: 0; overflow: hidden; white-space: normal; line-height: 1.15;
                    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
    /* Itens da gaveta com altura de toque. */
    .lateral-item { min-height: 44px; }
    .lateral-sair, .lateral-eu { min-height: 44px; }
}

/* ---- 3b. Notebook (1101–1439px): menu lateral fixo + cartões de número ----
   Com a lateral de 246px, cinco cartões lado a lado ficam com ≈180px
   e o texto ao lado do número se quebrava letra por letra. O cartão
   passa a quebrar a linha por conta própria: se o texto não cabe ao
   lado do número, desce para baixo dele. Em telas maiores (o desktop
   aprovado) e nas menores (que já empilham os cartões) nada muda. */
@media (min-width: 1101px) and (max-width: 1439px) {
    .conteudo .dn { flex-wrap: wrap; row-gap: 6px; }
    .conteudo .dn > div { flex: 1 1 112px; }
    .conteudo .dn { padding-left: 14px; padding-right: 14px; }
    .conteudo .dn span { font-size: 13px; letter-spacing: .06em; }
}

/* ---- 4. Celular (≤760px) ---- */
@media (max-width: 760px) {
    .conteudo { padding: 16px 14px 48px; }

    /* Texto sem ponto de quebra (e-mail, endereço, código) quebra em vez
       de empurrar a página para o lado. Só no celular: no desktop o
       comportamento aprovado continua como está. */
    .conteudo { overflow-wrap: break-word; }

    /* Área de toque: 44px é o mínimo confortável para o dedo. */
    .conteudo :is(button, input[type="submit"], input[type="button"], .btn,
                  .botao, .botao-ouro, .botao-cheio, .botao-medio, .botao-fora,
                  .botao-vazio, .botao-marinho) { min-height: 44px; }
    .conteudo :is(select, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]), textarea) {
        min-height: 44px;
        font-size: 16px;      /* abaixo de 16px o iPhone dá zoom ao tocar no campo */
    }
    .gaveta-botao { width: 44px; height: 44px; top: 8px; }

    /* Campos de data/hora no iPhone: sem o visual nativo que centraliza o texto e
       quebra a altura; ocupam a largura toda, alinhados à esquerda como os demais (17/10/2026). */
    .conteudo input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"]) {
        -webkit-appearance: none; appearance: none; display: block;
        width: 100%; min-width: 0; text-align: left; line-height: 1.2;
    }
    .conteudo input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"])::-webkit-date-and-time-value { text-align: left; min-height: 1.2em; }

    /* Formulários: uma coluna. */
    .conteudo :is(.campos-2, .campos-3, .campos-4) { grid-template-columns: minmax(0, 1fr); }

    /* Janelas (modais): cabem na tela e rolam por dentro. */
    body .vis-modal { padding: 10px; align-items: flex-start; }
    body .vis-modal > form.cartao { max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); }
    dialog.cartao-dialogo {
        padding: 20px 18px; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto;
    }

}

/* ---- 5. Celular pequeno (≤420px) ---- */
@media (max-width: 420px) {
    .conteudo { padding-left: 12px; padding-right: 12px; }
}