/* =============================================================================
   SISTEMA DA IGREJA — ESTILO
   =============================================================================

   A meta declarada no documento de UX é a especificação mais exigente do projeto:

        "Um idoso de 80 anos usa o sistema sozinho, sem alguém ao lado."

   Isso entra em conflito com o que o mercado chama de "design moderno": texto
   cinza-claro fininho, ícone sem rótulo, contraste baixo, densidade alta, ação
   escondida atrás de hover.

   A nossa resolução do conflito: o "espetacular" aqui é CLAREZA. Interface
   bonita, neste produto, significa espaçosa, legível, calma e previsível.

   Por isso as regras abaixo NÃO são negociáveis:

     * Corpo de texto de 17px (nunca abaixo de 16px — abaixo disso o iPhone dá
       zoom sozinho ao tocar num campo, e a tela "pula" na cara do usuário).
     * Contraste mínimo WCAG AA (4,5:1). Proibido cinza-claro sobre branco.
     * Alvo de toque de 48px (o mínimo aceitável é 44px). Mão trêmula não erra.
     * Foco SEMPRE visível — quem navega por teclado precisa saber onde está.
     * Nada de hover como única forma de descobrir uma ação (não existe hover no
       celular, e o usuário idoso não o procura).
   ============================================================================= */

:root {
    /* Cor primária: é substituída pela cor da igreja (RF-PLT-04).
       O sistema verifica o contraste antes de aceitar a cor escolhida — se ela
       quebrar a legibilidade, ajustamos o tom em vez de obedecer cegamente. */
    --cor-primaria: #5B3AE0;         /* Violeta fideon (branco por cima = 6,7:1) */
    --cor-primaria-escura: #4A2EC0;  /* hover/pressionado — violeta mais fundo    */
    --cor-primaria-clara: #EFEAFC;   /* tinta clara: fundo de realce, anel de foco */

    /* O violeta tem DOIS papéis com exigências OPOSTAS: como TEXTO ele precisa
       contrastar com o fundo; como PREENCHIMENTO SÓLIDO, é o branco por cima que
       precisa contrastar com ele. No tema claro uma cor só resolve (o fundo é
       branco, então o violeta escuro serve aos dois). No ESCURO é impossível:
       texto exige luminância ≥ 0,2231 e o branco por cima exige ≤ 0,1833 — não
       existe cor que atenda. Por isso o preenchimento tem token próprio.
       Mesmo princípio do site (`--accent` / `--accent-bright`). */
    --cor-primaria-solida: #5B3AE0;        /* fundo com texto branco (6,7:1) */
    --cor-primaria-solida-hover: #4A2EC0;  /* o mesmo, pressionado           */

    /* Semântica de cor — SEMPRE acompanhada de texto ou ícone, porque parte dos
       nossos usuários não distingue as cores. */
    --cor-entrada: #15803D;   /* verde: entrada, confirmado */
    --cor-saida:   #B91C1C;   /* vermelho: saída, vencido   */
    --cor-alerta:  #B45309;   /* âmbar: pendente            */

    /* Texto POR CIMA de um preenchimento semântico (selo, contador, marca de
       "feito"). Mesmo duplo papel do violeta: no claro as cores semânticas são
       escuras e pedem texto branco; no ESCURO elas clareiam para virar texto
       legível — e aí o branco por cima some (1,74:1 na marca de feito). */
    --cor-sobre-semantica: #FFFFFF;

    --cor-texto: #111827;         /* quase preto: contraste alto de verdade */
    --cor-texto-apoio: #4B5563;   /* o mais claro que passa em AA           */
    --cor-borda: #D1D5DB;
    --cor-fundo: #F3F4F6;
    --cor-superficie: #FFFFFF;
    --cor-campo: #FFFFFF;   /* fundo dos campos de formulário (input, select) */

    --raio: 12px;
    --sombra: 0 1px 3px rgba(0, 0, 0, .08), 0 4px 12px rgba(0, 0, 0, .04);

    --largura-menu: 260px;
    --largura-menu-recolhido: 76px;
    --altura-topo: 68px;

    /* Alvo de toque. 48px é confortável; 44px é o mínimo absoluto. */
    --alvo-toque: 48px;
}

/* ============================================================================
   BASE
   ============================================================================ */

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;              /* corpo grande: ver comentário do topo */
    line-height: 1.6;
    color: var(--cor-texto);
    background-color: var(--cor-fundo);
}

/* Foco visível em TUDO. Nunca remover isto "porque fica feio":
   é a única pista de posição para quem navega por teclado. */
*:focus-visible {
    outline: 3px solid var(--cor-primaria);
    outline-offset: 2px;
    border-radius: 4px;
}

.form-label {
    font-weight: 600;
    font-size: 17px;
    margin-bottom: .5rem;
    color: var(--cor-texto);
}

.form-control,
.form-select {
    font-size: 17px;
    border: 2px solid var(--cor-borda);   /* borda de 2px: fica visível de verdade */
    border-radius: var(--raio);
    padding: .75rem 1rem;
    min-height: var(--alvo-toque);
    color: var(--cor-texto);
    /* O fundo dos campos SEGUE O TEMA. Sem isto, o Bootstrap deixa o fundo branco
       e, no escuro, o texto (quase branco) some sobre ele. Vale para o texto
       digitado E para a lista de opções do <select>. */
    background-color: var(--cor-campo);
}

/* O texto de dica dentro do campo (placeholder) também precisa de contraste. */
.form-control::placeholder {
    color: var(--cor-texto-apoio);
    opacity: 1;   /* o Firefox clareia demais por padrão */
}

/* A lista de opções do <select>: garante fundo e texto do tema (no escuro,
   sem isto, alguns navegadores mostram a opção com texto apagado no branco). */
.form-select option {
    background-color: var(--cor-campo);
    color: var(--cor-texto);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 4px var(--cor-primaria-clara);
}

.form-control.is-invalid {
    border-color: var(--cor-saida);
}

/* A mensagem de erro é grande e escura o suficiente para ser lida.
   Erro que o usuário não consegue ler é erro que ele não consegue corrigir. */
.invalid-feedback {
    font-size: 16px;
    color: var(--cor-saida);
    font-weight: 500;
}

.form-text {
    font-size: 15px;
    color: var(--cor-texto-apoio);   /* passa em AA — conferido, não chutado */
}

/* Botão principal: grande, óbvio, uma cor só. Uma ação principal por tela. */
.btn {
    border-radius: var(--raio);
    font-weight: 600;
    min-height: var(--alvo-toque);
}

.btn-principal {
    font-size: 18px;
    padding: .9rem 1.5rem;
}

/* Preenchimento sólido: quem precisa contrastar é o BRANCO por cima, não o fundo
   da página — por isso usa o token `-solida` (ver o `:root`). */
.btn-primary {
    background-color: var(--cor-primaria-solida);
    border-color: var(--cor-primaria-solida);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--cor-primaria-solida-hover);
    border-color: var(--cor-primaria-solida-hover);
}

/* O botão CONTORNADO vinha cru do Bootstrap: azul #0d6efd, que não é a cor de
   ninguém aqui (o produto é violeta, e a igreja escolhe a própria cor) e reprova
   em AA no tema escuro (3,84:1). Repassa os tokens do sistema para as variáveis
   do Bootstrap: em repouso é TEXTO (usa `--cor-primaria`, garantida em AA);
   preenchido no hover, é o token `-solida`, que garante o branco por cima. */
.btn-outline-primary {
    --bs-btn-color: var(--cor-primaria);
    --bs-btn-border-color: var(--cor-primaria);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cor-primaria-solida);
    --bs-btn-hover-border-color: var(--cor-primaria-solida);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--cor-primaria-solida-hover);
    --bs-btn-active-border-color: var(--cor-primaria-solida-hover);
    --bs-btn-disabled-color: var(--cor-primaria);
    --bs-btn-disabled-border-color: var(--cor-primaria);
}

/* `.btn-link` tinha o mesmo azul cru do Bootstrap (3,84:1 no escuro). É sempre
   TEXTO, então usa `--cor-primaria` nos três estados. */
.btn-link {
    --bs-btn-color: var(--cor-primaria);
    --bs-btn-hover-color: var(--cor-primaria-escura);
    --bs-btn-active-color: var(--cor-primaria-escura);
}

/* Botão de AJUDA ("?" que abre um tooltip). Nasceu na tela de login (22/07/2026).

   É um `<button>` de verdade, e não um ícone decorativo, por três motivos que a
   aparência esconde: recebe foco pelo teclado, é anunciado pelo leitor de tela, e
   é o `focus` do toque que abre o balão NO CELULAR (lá não existe `hover`).

   O alvo tem 24px mesmo com o "?" sendo pequeno: abaixo disso o dedo erra. É a
   mesma razão de `.btn-mostrar-senha` ser generoso — dedo trêmulo e tela pequena
   são a regra do nosso público, não a exceção. */
.btn-ajuda {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    border-radius: 50%;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

.btn-ajuda:hover,
.btn-ajuda:focus-visible {
    background: var(--cor-fundo);
    text-decoration: none;
}

/* `.card` do Bootstrap: `--bs-card-bg` é `#fff` CRAVADO — no tema escuro virava
   um bloco branco com o texto de apoio do tema por cima (2,54:1). Amarrado aos
   tokens, funciona nos dois temas. No painel da inovasie nada muda: lá o tema é
   fixo em claro (`data-tema-fixo`), então `--cor-superficie` já é branco.
   Para caixa de conteúdo NOVA, prefira `.bloco` — é o idioma do app. */
.card {
    --bs-card-bg: var(--cor-superficie);
    --bs-card-border-color: var(--cor-borda);
    --bs-card-cap-bg: var(--cor-fundo);
    /* `color` DECLARADO, e não via `--bs-card-color`: o `.card` do Bootstrap
       resolve `color: var(--bs-body-color)` e ignora o token do próprio card —
       ajustar só a variável deixava o texto preto sobre o cartão escuro. */
    color: var(--cor-texto);
}

/* `.table` do Bootstrap: `--bs-table-bg` é `#fff` CRAVADO, e a cor do texto vem
   de `--bs-body-color`. Mesma amarração — e, como no `.card`, o `color` é
   DECLARADO, não confiado à variável do componente. */
.table {
    --bs-table-bg: var(--cor-superficie);
    --bs-table-border-color: var(--cor-borda);
    /* Aqui a variável do componente É usada (a célula tem regra própria,
       `.table > :not(caption) > * > *`, que vence o `color` do `.table`) —
       diferente do `.card`, onde ela é ignorada. Por isso os dois. */
    --bs-table-color: var(--cor-texto);
    color: var(--cor-texto);
}

/* MODAL do Bootstrap: `--bs-modal-bg` é `#fff` CRAVADO. O texto por cima vem do
   tema, então no escuro dava 1,25:1 — a janela inteira ilegível. É a mesma
   armadilha do `.card` e do `.dropdown-menu`: superfície do Bootstrap não segue
   o tema sozinha, tem que ser amarrada aos tokens. */
.modal-content {
    --bs-modal-bg: var(--cor-superficie);
    --bs-modal-color: var(--cor-texto);
    --bs-modal-border-color: var(--cor-borda);
    --bs-modal-header-border-color: var(--cor-borda);
    --bs-modal-footer-border-color: var(--cor-borda);
}

/* Ações em LINHA de tabela (painel do operador — desktop). Os botões do sistema
   têm um alvo de toque alto (bom no celular da igreja); numa grade de gestão isso
   fica pesado e empilha. Aqui eles ficam lado a lado, discretos e do mesmo tamanho. */
.acoes-linha {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .375rem;
    flex-wrap: wrap;           /* padrão: pode quebrar (células com várias ações, ex.: mensalidades) */
}

/* Botões que devem ficar SEMPRE colados na mesma linha (ex.: Editar+Excluir dos
   planos). A coluna da tabela se alarga para caber, em vez de empilhar os botões. */
.acoes-linha--juntas {
    flex-wrap: nowrap;
    white-space: nowrap;
}

.acoes-linha form {
    margin: 0;
}

/* Botões compactos na tabela do painel. `.acoes-linha` os alinha em linha; já
   `.acoes-compactas` só reduz o tamanho e PRESERVA o empilhamento (ex.: a coluna
   NFS-e, onde status/número ficam acima da ação). */
.acoes-linha .btn,
.acoes-compactas .btn {
    min-height: 0;              /* dispensa o alvo-toque grande dentro da tabela */
    padding: .25rem .7rem;
    font-size: .82rem;
    font-weight: 600;
}

.acoes-linha .acoes-nota {     /* o "em uso" dos planos vinculados */
    font-size: .78rem;
    color: var(--cor-texto-apoio);
    white-space: nowrap;
}

.link-destaque {
    font-size: 17px;
    font-weight: 600;
    color: var(--cor-primaria);
    text-decoration: underline;   /* link sublinhado: não depende só da cor */
    display: inline-block;
    padding: .5rem 0;             /* área de toque maior que o texto */
}

/* ALERTAS CONTEXTUAIS — o visual de "faixa" do app do membro, aplicado a TODAS
   as views sem tocar em nenhuma: cartão suave tingido pelo token semântico
   (adapta ao tema escuro sozinho) + ícone à esquerda desenhado por máscara CSS.
   O ícone é posicionado por cima (position), não por flex — assim um alert com
   conteúdo rico (títulos, botões, parágrafos) continua fluindo normal. */
.alert {
    --al-cor:   var(--cor-primaria);
    --al-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 11v6'/%3E%3Ccircle cx='12' cy='7.2' r='1.1' fill='black' stroke='none'/%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3C/svg%3E");

    position: relative;
    font-size: 17px;
    font-weight: 500;
    border-radius: var(--raio);
    border: 1px solid color-mix(in srgb, var(--al-cor) 22%, transparent);
    background: color-mix(in srgb, var(--al-cor) 9%, var(--cor-superficie));
    color: var(--al-cor);
    padding: 1rem 1.25rem 1rem 3.2rem;
}
.alert::before {
    content: '';
    position: absolute;
    left: 1.05rem; top: 1.1rem;
    width: 23px; height: 23px;
    background-color: var(--al-cor);
    -webkit-mask: var(--al-icone) center / contain no-repeat;
    mask: var(--al-icone) center / contain no-repeat;
}
.alert-success {
    --al-cor:   var(--cor-entrada);
    --al-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.alert-danger,
.alert-warning {
    --al-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 7.2v6'/%3E%3Ccircle cx='12' cy='16.8' r='1.1' fill='black' stroke='none'/%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3C/svg%3E");
}
.alert-danger  { --al-cor: var(--cor-saida); }
.alert-warning { --al-cor: var(--cor-alerta); }
.alert-info    { --al-cor: var(--cor-primaria); }

/* ============================================================================
   TELAS DE ENTRADA (login, senha)
   ============================================================================ */

.tela-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    background: linear-gradient(160deg, #EFEAFC 0%, #F3F4F6 100%);
}

.auth-caixa {
    width: 100%;
    max-width: 460px;
}

.auth-cartao {
    background: var(--cor-superficie);
    border-radius: 20px;
    box-shadow: var(--sombra);
    padding: 2.5rem 2rem;
}

.auth-marca {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-logo {
    font-size: 48px;
    line-height: 1;
}

.auth-titulo {
    font-size: 20px;
    font-weight: 700;
    color: var(--cor-texto-apoio);
    margin: .5rem 0 0;
}

.auth-subtitulo {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 1rem;
    text-align: center;
}

/* Texto de apoio da tela de código (para quem/para onde o código foi). */
.auth-apoio {
    font-size: 16px;
    color: var(--cor-texto-apoio);
    text-align: center;
    margin-bottom: 1.5rem;
}

.link-discreto {
    color: var(--cor-texto-apoio);
    font-size: 15px;
}

/* Campo do código de 2FA: dígitos grandes e espaçados, fáceis de conferir. */
.campo-codigo {
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 12px;
    padding-left: 12px;   /* compensa o letter-spacing para centralizar */
}

.auth-texto {
    font-size: 17px;
    color: var(--cor-texto);
    margin-bottom: 1.5rem;
    text-align: center;
}

.auth-texto-menor {
    font-size: 15px;
    color: var(--cor-texto-apoio);
    text-align: center;
    margin: 1.25rem 0;
}

.auth-dica {
    background: var(--cor-primaria-clara);
    border-radius: var(--raio);
    padding: 1rem 1.25rem;
    font-size: 16px;
    margin-bottom: 1.5rem;
}

.auth-icone-sucesso,
.auth-icone-aviso {
    font-size: 56px;
    text-align: center;
    line-height: 1;
    margin-bottom: 1rem;
}

.auth-rodape {
    text-align: center;
    font-size: 15px;
    color: var(--cor-texto-apoio);
    margin-top: 1.5rem;
}

.btn-escolha {
    text-align: left;
    font-size: 18px;
    padding: 1rem 1.25rem;
}

/* Campo de senha com o botão "Mostrar" ao lado.
   O botão tem RÓTULO EM TEXTO, e não um ícone de olhinho: o ícone sozinho é
   justamente o que o usuário idoso não entende e não arrisca clicar. */
.campo-senha {
    position: relative;
    display: flex;
    align-items: center;
}

.campo-senha .form-control {
    padding-right: 6.5rem;
}

.btn-mostrar-senha {
    position: absolute;
    right: .5rem;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    color: var(--cor-primaria);
    padding: .5rem .75rem;
    min-height: 44px;
}

/* ============================================================================
   SISTEMA — TOPO
   ============================================================================ */

.topo {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--altura-topo);
    background: var(--cor-superficie);
    border-bottom: 1px solid var(--cor-borda);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1rem;
    z-index: 1030;
}

.botao-menu {
    background: none;
    border: none;
    width: var(--alvo-toque);
    height: var(--alvo-toque);
    border-radius: var(--raio);
    font-size: 24px;
    color: var(--cor-texto);
    display: flex;
    align-items: center;
    justify-content: center;
}

.botao-menu:hover {
    background: var(--cor-fundo);
}

.topo-marca {
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    color: var(--cor-texto);
    font-weight: 700;
    font-size: 18px;
}

.topo-logo {
    height: 22px;
    width: auto;
}

/* Logo fideon THEME-AWARE: claro por padrão; escuro no tema escuro/auto-escuro —
   espelha o mesmo mecanismo de tema do resto do sistema (:root[data-tema]). */
.marca-logo--claro  { display: block; }
.marca-logo--escuro { display: none; }
:root[data-tema="escuro"] .marca-logo--claro  { display: none; }
:root[data-tema="escuro"] .marca-logo--escuro { display: block; }
@media (prefers-color-scheme: dark) {
    :root[data-tema="auto"] .marca-logo--claro  { display: none; }
    :root[data-tema="auto"] .marca-logo--escuro { display: block; }
}

.auth-logo-img {
    height: 34px;
    width: auto;
    margin: 0 auto;
}

.topo-direita {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .75rem;
}

.seletor-unidade {
    min-width: 200px;
    font-size: 16px;
    padding: .5rem .75rem;
    min-height: 44px;
}

.btn-usuario {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: none;
    border: 2px solid transparent;
    font-weight: 600;
    font-size: 16px;
    padding: .4rem .75rem;
    /* Sem isto, o botão herda a cor escura padrão do .btn do Bootstrap e o nome
       do usuário some sobre a barra escura. Segue a cor de texto do tema. */
    color: var(--cor-texto);
}

.btn-usuario:hover {
    background: var(--cor-fundo);
}

.usuario-inicial {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--cor-primaria-solida);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    text-transform: uppercase;
}

.usuario-completo {
    font-weight: 600;
    color: var(--cor-texto);
}

/* MENU SUSPENSO (Bootstrap .dropdown-menu) — segue o tema. Sem isto, ele fica
   com fundo branco no escuro e o nome do usuário some (texto claro sobre branco). */
.dropdown-menu {
    background-color: var(--cor-superficie);
    border-color: var(--cor-borda);
    box-shadow: var(--sombra);
}
.dropdown-item {
    color: var(--cor-texto);
}
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
}
.dropdown-divider {
    border-top-color: var(--cor-borda);
}

/* Texto "apagado" (Bootstrap .text-muted) usa um cinza fixo que some no escuro.
   Passa a usar a cor de apoio do tema, que tem contraste conferido nos dois. */
.text-muted {
    color: var(--cor-texto-apoio) !important;
}

/* As utilitárias de cor do Bootstrap são tons fixos, escolhidos por eles e nunca
   conferidos aqui: `.text-warning` (#ffc107) dá 1,63:1 sobre branco e `.text-info`
   1,96:1 — números de painel praticamente ilegíveis. As cores semânticas do
   sistema já são checadas (≥5:1) e seguem o tema, então são elas que valem.
   `!important` porque as utilitárias do Bootstrap também usam. */
.text-success { color: var(--cor-entrada)  !important; }
.text-danger  { color: var(--cor-saida)    !important; }
.text-warning { color: var(--cor-alerta)   !important; }
.text-info,
.text-primary { color: var(--cor-primaria) !important; }

.btn-sair {
    background: none;
    border: none;
    text-align: left;
    color: var(--cor-saida);
    font-weight: 600;
    padding: .6rem .75rem;
    border-radius: 8px;
}

/* No hover, o .btn do Bootstrap tende a trocar a cor do texto — o que, sobre o
   fundo vermelho fraco, deixava tudo lavado. Fixamos a cor vermelha e um fundo
   com tom só o suficiente para indicar que é o botão sob o cursor. */
.btn-sair:hover {
    background: rgba(185, 28, 28, .08);
    color: var(--cor-saida);
}
:root[data-tema="escuro"] .btn-sair:hover {
    background: rgba(248, 113, 113, .16);
    color: var(--cor-saida);
}
@media (prefers-color-scheme: dark) {
    :root[data-tema="auto"] .btn-sair:hover {
        background: rgba(248, 113, 113, .16);
        color: var(--cor-saida);
    }
}

/* ============================================================================
   MENU LATERAL RETRÁTIL

   Expandido: ícone + RÓTULO.
   Recolhido: só o ícone — mas com `title`, para a dica aparecer.

   Regra do documento de UX: ícone NUNCA aparece sozinho sem uma forma de saber
   o que ele faz. Ninguém deveria precisar adivinhar o que a engrenagem significa.
   ============================================================================ */

.menu-lateral {
    position: fixed;
    top: var(--altura-topo);
    left: 0;
    bottom: 0;
    width: var(--largura-menu);
    background: var(--cor-superficie);
    border-right: 1px solid var(--cor-borda);
    overflow-y: auto;
    padding: 1rem .75rem;
    transition: width .2s ease, transform .2s ease;
    z-index: 1020;
}

.menu-lista {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* O título da categoria É o botão que abre e fecha o grupo. Como <button> ele
   traz estilo de formulário embutido, e todo ele precisa ser desfeito aqui. */
.menu-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;

    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--cor-texto-apoio);
    padding: 1.25rem .75rem .5rem;
}

.menu-titulo:hover {
    color: var(--cor-texto);
}

/* A seta é o único sinal de que dá para clicar — some no modo só-ícones junto
   com o título. Aponta para baixo quando aberto, para a direita quando fechado. */
.menu-seta {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform .15s ease;
    flex-shrink: 0;
}

.menu-grupo--fechado .menu-seta {
    transform: rotate(-90deg);
}

.menu-grupo--fechado .menu-lista {
    display: none;
}

.menu-item {
    margin-bottom: .25rem;
}

.menu-link {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .8rem .75rem;
    min-height: var(--alvo-toque);
    border-radius: var(--raio);
    color: var(--cor-texto);
    text-decoration: none;
    font-weight: 600;
    font-size: 17px;
}

.menu-link:hover {
    background: var(--cor-fundo);
    color: var(--cor-texto);
}

/* Item ativo: cor + marcador. Nunca só a cor — quem não distingue cores
   precisa de um segundo sinal. */
.menu-item.ativo .menu-link {
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria-escura);
    box-shadow: inset 4px 0 0 var(--cor-primaria);
}

.menu-item.desativado .menu-link {
    color: var(--cor-texto-apoio);
    cursor: not-allowed;
    opacity: .6;
}

.menu-icone {
    font-size: 22px;
    width: 26px;
    text-align: center;
    flex-shrink: 0;
}

/* Menu recolhido (desktop) */
.menu-recolhido .menu-lateral {
    width: var(--largura-menu-recolhido);
}

.menu-recolhido .menu-rotulo,
.menu-recolhido .menu-titulo {
    display: none;
}

/* ARMADILHA: no modo só-ícones o título — que É o botão de abrir e fechar —
   fica escondido. Um grupo fechado viraria uma categoria invisível SEM NENHUM
   controle para reabrir: a pessoa recolhe o menu e as telas somem de vez.
   Por isso, aqui todo grupo é mostrado aberto. O cookie não é apagado — ao
   expandir o menu de novo, o que estava fechado volta a estar. */
.menu-recolhido .menu-grupo--fechado .menu-lista {
    display: block;
}

/* Grupos do menu: no modo expandido o próprio .menu-titulo separa as categorias;
   no recolhido (títulos escondidos) uma linha fina mantém a separação. */
.menu-recolhido .menu-grupo + .menu-grupo {
    border-top: 1px solid var(--cor-borda);
    margin-top: .5rem;
    padding-top: .5rem;
}

.menu-recolhido .menu-link {
    justify-content: center;
}

.menu-recolhido .conteudo {
    margin-left: var(--largura-menu-recolhido);
}

.menu-fundo {
    display: none;
}

/* ============================================================================
   CONTEÚDO
   ============================================================================ */

.conteudo {
    margin-left: var(--largura-menu);
    margin-top: var(--altura-topo);
    padding: 2rem;
    transition: margin-left .2s ease;
}

/* Cabeçalho de página: título à esquerda, ações à direita.
   No celular, os dois empilham (flex-wrap). */
.pagina-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.cabecalho-acoes {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.pagina-titulo {
    font-size: 30px;
    font-weight: 700;
    margin: 0;
}

.pagina-subtitulo {
    font-size: 17px;
    color: var(--cor-texto-apoio);
    margin: .35rem 0 0;
}

/* =============================================================================
   IMPORTANDO — a tela que acompanha a gravação em lotes
   ============================================================================= */
.importando {
    max-width: 46rem;
}

.importando-apoio {
    margin-bottom: 1.5rem;
}

.importando-barra {
    height: 14px;
    border-radius: 999px;
    background: var(--cor-fundo);
    border: 1px solid var(--cor-borda);
    overflow: hidden;
}

.importando-barra-preenchida {
    display: block;
    height: 100%;
    width: 0;
    background: var(--cor-primaria-solida);
    transition: width 200ms linear;
}

/* Parou no meio: a barra deixa de prometer que ainda anda. */
.importando-barra--parada .importando-barra-preenchida {
    background: var(--cor-saida);
}

.importando-situacao {
    margin: .75rem 0 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--cor-texto);
}

.importando-erro {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--cor-saida);
    background: var(--cor-fundo);
    border-radius: 0 var(--raio) var(--raio) 0;
    color: var(--cor-texto);
}

/* Grade de cartões: no máximo 6. Ver comentário na view do painel. */
.grade-cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

/* Os dois gráficos do painel, lado a lado no desktop e empilhados no celular. */
.grade-graficos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

/* O corpo de um comunicado — texto que a pessoa escreveu, com as quebras
   preservadas e tamanho de leitura confortável. */
.mensagem-comunicado {
    font-size: 17px;
    line-height: 1.6;
    color: var(--cor-texto);
    white-space: pre-wrap;
    word-break: break-word;
}

.secao-painel-titulo {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 .15rem;
    color: var(--cor-texto);
}
.secao-painel-apoio {
    font-size: 15px;
    color: var(--cor-texto-apoio);
    margin: 0 0 1rem;
}

.cartao-numero {
    background: var(--cor-superficie);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 1.5rem;
    border-top: 4px solid var(--cor-borda);
}

/* Cartão que leva a algum lugar. Um número que não gera ação é um número inútil. */
.cartao-clicavel {
    display: block;
    text-decoration: none;
    color: inherit;
}

.cartao-clicavel:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
    border-top-color: var(--cor-primaria);
    color: inherit;
}

.cartao-entrada { border-top-color: var(--cor-entrada); }
.cartao-saida   { border-top-color: var(--cor-saida); }
.cartao-saldo   { border-top-color: var(--cor-primaria); }

.cartao-rotulo {
    font-size: 16px;
    font-weight: 600;
    color: var(--cor-texto-apoio);
    margin: 0 0 .5rem;
}

/* Número grande: é isto que a pessoa veio ver. */
.cartao-valor {
    font-size: 32px;
    font-weight: 700;
    margin: 0;
    color: var(--cor-texto);
}

.cartao-apoio {
    font-size: 15px;
    color: var(--cor-texto-apoio);
    margin: .35rem 0 0;
}

.bloco {
    background: var(--cor-superficie);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.bloco-titulo {
    font-size: 21px;
    font-weight: 700;
    margin: 0 0 1rem;
}

/* Barra de leitura (X% abriram) — dica visual rápida no detalhe do comunicado. */
.barra-progresso {
    height: 10px;
    border-radius: 999px;
    background: var(--cor-primaria-clara);
    overflow: hidden;
    margin: 0.25rem 0 0.5rem;
}
.barra-progresso-preenchida {
    height: 100%;
    border-radius: 999px;
    background: var(--cor-primaria);
    transition: width 0.3s ease;
}

/* Sanfona nativa (<details>) para as listas de quem abriu / não abriu. */
.bloco-details {
    border: 2px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: 0.75rem 1rem;
    background: var(--cor-superficie);
}
.bloco-details > summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}
.bloco-details > summary::-webkit-details-marker { display: none; }
.bloco-details > summary::before {
    content: "▸";
    display: inline-block;
    margin-right: 0.4rem;
    color: var(--cor-primaria);
    transition: transform 0.15s ease;
}
.bloco-details[open] > summary::before { transform: rotate(90deg); }
.bloco-details ul { padding-left: 1.25rem; }
.bloco-details li { margin: 0.15rem 0; }

.bloco-vazio {
    background: var(--cor-fundo);
    border-radius: var(--raio);
    padding: 1.25rem;
    font-size: 16px;
    color: var(--cor-texto-apoio);
}

/* Estado vazio que ENSINA (RF-UX-12): tela sem dado não diz
   "nenhum registro encontrado" — ela mostra o caminho. */
.cartao-vazio {
    background: var(--cor-superficie);
    border: 2px dashed var(--cor-borda);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    text-align: center;
    margin-bottom: 2rem;
}

.cartao-vazio-icone {
    font-size: 52px;
    line-height: 1;
    margin-bottom: 1rem;
}

.cartao-vazio-titulo {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: .75rem;
}

.cartao-vazio-texto {
    font-size: 17px;
    max-width: 560px;
    margin: 0 auto .75rem;
}

/* ============================================================================
   AUDITORIA
   ============================================================================ */

.bloco-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.bloco-cabecalho .bloco-titulo {
    margin: 0;
}

.bloco-acoes {
    display: flex;
    gap: .6rem;
    align-items: center;
    flex-wrap: wrap;
}

.filtros-auditoria {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem;
    align-items: end;
}

.filtro-acoes {
    display: flex;
    gap: .5rem;
    align-items: center;
}

/* A trilha é uma LISTA, não uma tabela.
   Tabela de 8 colunas é ilegível no celular — e é no celular que o pastor abre
   isto, no meio de uma conversa difícil. */
.trilha {
    list-style: none;
    padding: 0;
    margin: 0;
}

.trilha-item {
    border: 1px solid var(--cor-borda);
    border-left: 5px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: 1rem 1.25rem;
    margin-bottom: .85rem;
    background: var(--cor-superficie);
}

/* Cor + rótulo em texto: quem não distingue cores continua entendendo,
   porque a ação está escrita ("Excluiu uma pessoa"). */
.trilha-criar   { border-left-color: var(--cor-entrada); }
.trilha-alterar { border-left-color: var(--cor-alerta); }
.trilha-excluir { border-left-color: var(--cor-saida); }
.trilha-acesso  { border-left-color: var(--cor-primaria); }

.trilha-topo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
}

.trilha-acao {
    font-size: 18px;
    font-weight: 700;
}

.trilha-data {
    font-size: 15px;
    color: var(--cor-texto-apoio);
    white-space: nowrap;
}

.trilha-autor {
    font-size: 16px;
    color: var(--cor-texto-apoio);
    margin: .25rem 0 0;
}

.trilha-mudancas {
    width: 100%;
    margin-top: .9rem;
    border-collapse: collapse;
    font-size: 16px;
}

.trilha-mudancas th,
.trilha-mudancas td {
    padding: .5rem .75rem;
    text-align: left;
    border-top: 1px solid var(--cor-borda);
    vertical-align: top;
}

.trilha-mudancas thead th {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--cor-texto-apoio);
    border-top: none;
}

.trilha-mudancas tbody th {
    font-weight: 600;
    width: 30%;
}

.trilha-legenda {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--cor-texto-apoio);
    margin: .9rem 0 0;
}

.valor-antes {
    color: var(--cor-saida);
    text-decoration: line-through;
}

.valor-depois {
    color: var(--cor-entrada);
    font-weight: 600;
}

/* Criação e exclusão não têm "antes → depois": mostram um retrato só. */
.valor-retrato {
    font-weight: 600;
}

.trilha-retrato tbody th {
    width: 35%;
}

.trilha-mais {
    text-align: center;
    margin-top: 1.25rem;
}

/* ============================================================================
   PESSOAS
   ============================================================================ */

.busca-principal {
    margin-bottom: 1rem;
}

/* A busca é o elemento MAIOR da tela: é o que a secretária faz o dia inteiro. */
.busca-linha {
    display: flex;
    gap: .6rem;
}

.busca-linha .form-control {
    flex: 1;
}

.filtros-extras summary,
.secao-recolhida summary {
    cursor: pointer;
    font-weight: 600;
    padding: .75rem 0;
    min-height: var(--alvo-toque);
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--cor-primaria);
}

.secao-recolhida {
    border-top: 1px solid var(--cor-borda);
    padding-top: .25rem;
}

.secao-recolhida:first-of-type {
    border-top: none;
}

.secao-titulo {
    font-size: 17px;
    color: var(--cor-texto);
}

.secao-apoio {
    font-size: 15px;
    font-weight: 400;
    color: var(--cor-texto-apoio);
}

.secao-acao {
    margin-top: 1rem;
}

/* Lista de pessoas: cada linha inteira é clicável e tem altura confortável.
   Nada de "link no nome" com 12px de área de toque. */
.lista-pessoas {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pessoa-item + .pessoa-item {
    border-top: 1px solid var(--cor-borda);
}

.pessoa-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem .5rem;
    min-height: 64px;
    text-decoration: none;
    color: var(--cor-texto);
    border-radius: var(--raio);
}

.pessoa-link:hover {
    background: var(--cor-primaria-clara);
    color: var(--cor-texto);
}

.pessoa-avatar {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--cor-primaria-solida);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 19px;
    text-transform: uppercase;
}

.pessoa-avatar-grande {
    width: 64px;
    height: 64px;
    font-size: 26px;
}

.pessoa-principal {
    flex: 1;
    min-width: 0;
}

.pessoa-nome {
    display: block;
    font-weight: 600;
    font-size: 17px;
}

.pessoa-secundario,
.pessoa-dado {
    display: block;
    font-size: 15px;
    color: var(--cor-texto-apoio);
}

/* A situação no rol é a informação mais importante da linha: é ela que diz o que
   a pessoa É para a igreja. Cor + TEXTO (nunca só a cor). */
.etiqueta {
    display: inline-block;
    padding: .3rem .7rem;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    background: var(--cor-fundo);
    color: var(--cor-texto-apoio);
    white-space: nowrap;
}

.etiqueta-membro       { background: #DCFCE7; color: #14532D; }
.etiqueta-congregado   { background: #DBEAFE; color: #1E3A8A; }
.etiqueta-frequentador { background: #FEF3C7; color: #78350F; }
.etiqueta-visitante    { background: #F3E8FF; color: #581C87; }
.etiqueta-disciplinado { background: #FFE4E6; color: #881337; }
.etiqueta-transferido,
.etiqueta-desligado,
.etiqueta-falecido     { background: #E5E7EB; color: #374151; }

/* Formulário em grade: campos lado a lado no desktop, empilhados no celular. */
.grade-formulario {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-bottom: .5rem;
}

.campo-largo {
    grid-column: 1 / -1;
}

/* Botões de exportação (CSV/Excel) — presentes em toda listagem: os dados são
   da igreja, e a cópia dela está sempre a um clique. */
.exportar-dados {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.exportar-rotulo {
    color: var(--cor-texto-apoio);
    font-size: 15px;
}

/* Cartões-resumo da PRÉVIA de importação: os três números que contam a história
   (entra / entra com ressalva / pulada) antes da tabela linha a linha. */
.cartoes-resumo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.cartao-resumo {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
}

.cartao-resumo-numero {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
}

.cartao-resumo-rotulo {
    color: var(--cor-texto-apoio);
    font-size: 15px;
}

/* Passo a passo da tela de importação. */
.lista-passos {
    margin: 0 0 1.25rem;
    padding-left: 1.25rem;
    display: grid;
    gap: .5rem;
    font-size: 16px;
}

/* Seleção de VÁRIAS unidades (cadastro de usuário): caixas em vez de select,
   porque a pessoa pode atuar em mais de uma unidade ao mesmo tempo. */
.selecao-unidades {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: .25rem;
}

.opcao-selecao {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem .9rem;
    border: 2px solid var(--cor-borda);
    border-radius: 8px;
    background-color: var(--cor-campo);
    cursor: pointer;
    font-size: 1rem;
    margin: 0;
}

.opcao-selecao:hover {
    border-color: var(--cor-primaria);
}

.opcao-selecao input {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--cor-primaria);
    flex: 0 0 auto;
}

/* A caixa marcada ganha destaque — some ao desmarcar (:has é suportado nos
   navegadores atuais; sem ele, fica só a marca do checkbox, o que basta). */
.opcao-selecao:has(input:checked) {
    border-color: var(--cor-primaria);
    background-color: var(--cor-primaria-clara);
}

.acoes-formulario {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

/* Ficha */
.ficha-identificacao {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ficha-colunas {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 1.5rem;
    align-items: start;
}

.lista-dados {
    margin: 0;
}

.lista-dados dt {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--cor-texto-apoio);
    margin-top: 1rem;
}

.lista-dados dd {
    margin: .2rem 0 0;
    font-size: 17px;
}

.lista-dados dd.valor-forte {
    font-size: 24px;
    font-weight: 700;
    color: var(--cor-texto);
}

.bloco-subtitulo {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 .5rem;
    color: var(--cor-texto);
}

.vazio {
    color: var(--cor-texto-apoio);
    font-style: italic;
}

/* LINHA DO TEMPO — a vida da pessoa na igreja. */
.linha-tempo {
    list-style: none;
    padding: 0;
    margin: 0;
}

.evento {
    display: flex;
    gap: 1rem;
    padding-bottom: 1.25rem;
    position: relative;
}

.evento:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 20px;
    bottom: 0;
    width: 2px;
    background: var(--cor-borda);
}

.evento-marcador {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--cor-primaria);
    border: 3px solid var(--cor-superficie);
    box-shadow: 0 0 0 2px var(--cor-primaria);
    flex-shrink: 0;
    margin-top: 4px;
}

.evento-titulo {
    font-weight: 700;
    font-size: 17px;
    margin: 0;
}

.evento-data {
    font-size: 15px;
    color: var(--cor-texto-apoio);
    margin: 0;
}

.evento-motivo {
    font-size: 16px;
    margin: .25rem 0 0;
}

.evento-autor {
    font-size: 14px;
    color: var(--cor-texto-apoio);
    margin: .15rem 0 0;
}

/* ============================================================================
   CADASTROS BÁSICOS
   ============================================================================ */

.grade-cadastros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.cartao-cadastro {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: var(--cor-superficie);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 1.5rem;
    text-decoration: none;
    color: var(--cor-texto);
    border-left: 5px solid var(--cor-primaria);
}

.cartao-cadastro:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
    color: var(--cor-texto);
}

/* Cadastro que ainda não existe: visualmente diferente, e sem link. */
.cartao-cadastro-inativo {
    border-left-color: var(--cor-borda);
    opacity: .6;
    box-shadow: none;
    border: 2px dashed var(--cor-borda);
}

.cartao-cadastro-icone {
    font-size: 30px;
    line-height: 1;
    flex-shrink: 0;
}

.cartao-cadastro-titulo {
    display: block;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: .25rem;
}

.cartao-cadastro-texto {
    display: block;
    font-size: 16px;
    color: var(--cor-texto-apoio);
}

/* Renomear: abre um campo ali mesmo, sem sair da tela. */
.renomear summary {
    list-style: none;
    padding: 0;
}

.form-renomear {
    display: flex;
    gap: .4rem;
    margin-top: .4rem;
}

.form-renomear .form-control {
    min-width: 160px;
}

/* Lista de motivos (configuração) */
.lista-motivos {
    list-style: none;
    padding: 0;
    margin: 0;
}

.motivo-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem .25rem;
    border-bottom: 1px solid var(--cor-borda);
}

.motivo-inativo .motivo-nome {
    text-decoration: line-through;
    color: var(--cor-texto-apoio);
}

.motivo-nome {
    display: block;
    font-weight: 600;
    font-size: 17px;
}

.motivo-detalhe {
    display: block;
    font-size: 15px;
    color: var(--cor-texto-apoio);
}

.motivo-acoes {
    display: flex;
    gap: .25rem;
    flex-shrink: 0;
}

/* Conta em BLOCO: a linha (nome + ações) em cima, o ajuste de saldo embaixo. */
.motivo-item-bloco {
    display: block;
}
.motivo-item-bloco .motivo-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.secao-recolhida-slim {
    margin-top: .5rem;
}
.secao-recolhida-slim summary {
    font-size: 15px;
    padding: .35rem 0;
}
.secao-recolhida-slim .busca-linha {
    margin-top: .5rem;
    max-width: 360px;
}

/* Subtítulo que agrupa os itens da escala por ministério (Louvor, Som...). */
.escala-ministerio {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--cor-texto-apoio);
    margin: 1.25rem 0 .25rem;
}

.escala-ministerio:first-child {
    margin-top: 0;
}

/* ============================================================================
   PAGINAÇÃO (padrão de toda listagem)
   ============================================================================ */

.paginacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--cor-borda);
}

.paginacao-resumo {
    font-size: 16px;
    color: var(--cor-texto-apoio);
    margin: 0;
}

.paginacao-controles {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.paginacao-posicao {
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
}

.paginacao-tamanho {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.paginacao-tamanho .form-select {
    width: auto;
    min-height: 44px;
}

@media (max-width: 991px) {
    /* No celular, os três blocos empilham e os botões ficam largos. */
    .paginacao {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .paginacao-controles {
        justify-content: center;
    }

    .paginacao-tamanho {
        justify-content: center;
    }
}

/* ============================================================================
   GRÁFICO (presença)
   ============================================================================ */

/* Altura fixa: o Chart.js é responsivo em largura, mas precisa de uma altura
   definida no contêiner, senão cresce sem parar. */
.grafico-caixa {
    position: relative;
    height: 320px;
    width: 100%;
}

/* Campo numérico grande (contagem de presença) — fácil de acertar no celular. */
.campo-numero-grande {
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    max-width: 220px;
}

/* ============================================================================
   FINANCEIRO — planilha de contribuições
   ============================================================================ */

.contrib-tabela {
    margin-top: 1rem;
}

/* Cabeçalho da planilha (some no celular, onde vira cartão). */
.contrib-cabecalho {
    display: grid;
    grid-template-columns: var(--contrib-cols, 2fr 2fr 1.2fr 1.2fr auto);
    gap: .75rem;
    padding: 0 .5rem .5rem;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--cor-texto-apoio);
}

.contrib-linha {
    display: grid;
    grid-template-columns: var(--contrib-cols, 2fr 2fr 1.2fr 1.2fr auto);
    gap: .75rem;
    align-items: start;
    padding: .5rem;
    border-radius: var(--raio);
}

.contrib-linha:nth-child(even) {
    background: var(--cor-fundo);
}

.contrib-celula {
    position: relative;
}

.contrib-remover {
    display: flex;
    align-items: center;
    justify-content: center;
}

.contrib-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--cor-primaria-clara);
    border-radius: var(--raio);
    font-size: 18px;
}

.contrib-total strong {
    font-size: 24px;
    color: var(--cor-entrada);
}

.contrib-valor-lista {
    font-weight: 700;
    font-size: 18px;
    color: var(--cor-entrada);
    white-space: nowrap;
}

/* Sugestões do autocomplete de contribuinte. */
.sugestoes-contribuinte {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    max-height: 240px;
    overflow-y: auto;
}

.sugestoes-contribuinte .sugestao {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: .7rem 1rem;
    font-size: 16px;
    min-height: 44px;
}

.sugestoes-contribuinte .sugestao:hover {
    background: var(--cor-primaria-clara);
}

/* Tabela simples (detalhe do lote). */
.tabela-simples {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}

/* Tabelas largas (extrato) rolam DENTRO da própria caixa — a página nunca
   rola de lado no celular. */
.tabela-rolavel {
    overflow-x: auto;
}
.tabela-rolavel .tabela-simples {
    min-width: 560px;
}

.tabela-simples th,
.tabela-simples td {
    padding: .7rem .75rem;
    text-align: left;
    border-bottom: 1px solid var(--cor-borda);
}

.tabela-simples thead th {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--cor-texto-apoio);
}

.tabela-simples .col-valor {
    text-align: right;
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 991px) {
    /* A planilha vira cartões empilhados: cada célula ganha o rótulo. */
    .contrib-cabecalho {
        display: none;
    }

    .contrib-linha {
        grid-template-columns: 1fr;
        border: 1px solid var(--cor-borda);
        margin-bottom: .75rem;
        gap: .5rem;
    }

    .contrib-celula::before {
        content: attr(data-rotulo);
        display: block;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--cor-texto-apoio);
        margin-bottom: .2rem;
    }

    .contrib-remover::before {
        content: none;
    }
}

/* ============================================================================
   PERFIS DE ACESSO — a grade de permissões
   ============================================================================ */

.grupo-permissoes {
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: 1rem 1.25rem 1.25rem;
    margin-bottom: 1.25rem;
}

.grupo-permissoes-titulo {
    font-size: 18px;
    font-weight: 700;
    padding: 0 .5rem;
    width: auto;
}

.grupo-marcar-tudo {
    display: flex;
    align-items: center;
    gap: .6rem;
    cursor: pointer;
    min-height: var(--alvo-toque);
}

.grupo-permissoes-lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: .5rem 1.5rem;
}

.permissao {
    padding: .4rem .5rem;
    border-radius: 8px;
}

.permissao .form-check-label {
    font-size: 16px;
}

/* Caixas de marcar em tamanho de dedo, não de agulha. */
.permissao .form-check-input,
.grupo-marcar-tudo .form-check-input {
    width: 22px;
    height: 22px;
    margin-top: 2px;
}

/* Permissão SENSÍVEL: fundo âmbar + aviso por extenso. O administrador precisa
   marcar sabendo o peso — não por engano no meio de vinte caixinhas iguais. */
.permissao-sensivel {
    background: #FFF7ED;
    border: 1px solid #FED7AA;
    grid-column: 1 / -1;
}

.permissao-aviso {
    font-size: 14px;
    color: var(--cor-alerta);
    margin: .35rem 0 0 2rem;
}

/* Marca "do perfil" no ajuste fino: diz de onde a permissão veio, para o
   administrador saber que desmarcar cria uma EXCEÇÃO individual. */
.marca-perfil {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria-escura);
    border-radius: 999px;
    padding: .1rem .5rem;
    margin-left: .35rem;
    vertical-align: middle;
}

/* Zona de perigo: visualmente separada do resto. */
.bloco-perigo {
    border: 2px solid #FECACA;
}

.bloco-perigo .bloco-titulo {
    color: var(--cor-saida);
}

.texto-aviso {
    font-size: 16px;
    background: #FFF7ED;
    border-left: 4px solid var(--cor-alerta);
    padding: .9rem 1rem;
    border-radius: 8px;
}

/* ============================================================================
   CELULAR

   Regra do documento de UX: o celular NÃO é uma versão reduzida do desktop.
   As telas de uso semanal (lançar contribuição, contar presença, publicar
   escala) precisam ser MELHORES no celular — porque é ali que elas acontecem.

   Aqui, o menu lateral vira GAVETA, e o conteúdo ocupa a tela inteira.
   ============================================================================ */

@media (max-width: 991px) {

    .menu-lateral {
        transform: translateX(-100%);
        width: 280px;
        box-shadow: 4px 0 24px rgba(0, 0, 0, .15);
    }

    /* No celular a lógica se inverte: a classe abre a gaveta, em vez de recolher. */
    .menu-aberto .menu-lateral {
        transform: translateX(0);
    }

    .menu-aberto .menu-fundo {
        display: block;
        position: fixed;
        inset: var(--altura-topo) 0 0 0;
        background: rgba(0, 0, 0, .45);
        z-index: 1010;
    }

    .conteudo,
    .menu-recolhido .conteudo {
        margin-left: 0;
        padding: 1.25rem 1rem;
    }

    .topo-nome {
        display: none;   /* no celular, só o ícone da marca */
    }

    .seletor-unidade {
        min-width: 150px;
    }

    .usuario-nome {
        display: none;
    }

    .pagina-titulo {
        font-size: 25px;
    }

    .cartao-valor {
        font-size: 28px;
    }

    .auth-cartao {
        padding: 2rem 1.25rem;
    }

    /* A ficha vira uma coluna só. */
    .ficha-colunas {
        grid-template-columns: 1fr;
    }

    /* A busca empilha: campo em cima, botão embaixo, ambos largos —
       ao alcance do polegar. */
    .busca-linha {
        flex-direction: column;
    }

    .busca-linha .btn {
        width: 100%;
    }

    .acoes-formulario {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    /* ------------------------------------------------------------------------
       A TABELA DE MUDANÇAS VIRA CARTÃO (RF-RSP-03).

       Três colunas (campo / antes / depois) não cabem em 360px. A saída fácil
       seria uma rolagem lateral — que é como todo sistema resolve isso, e é
       exatamente o que ninguém consegue ler.

       Aqui cada linha vira um bloco empilhado, com o rótulo antes do valor.
       ------------------------------------------------------------------------ */
    .trilha-mudancas thead {
        /* Esconde o cabeçalho visualmente, mas mantém para o leitor de tela. */
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .trilha-mudancas,
    .trilha-mudancas tbody,
    .trilha-mudancas tr,
    .trilha-mudancas th,
    .trilha-mudancas td {
        display: block;
        width: 100%;
    }

    .trilha-mudancas tr {
        border-top: 1px solid var(--cor-borda);
        padding: .6rem 0;
    }

    .trilha-mudancas th,
    .trilha-mudancas td {
        border: none;
        padding: .15rem 0;
    }

    /* "Antes:" e "Depois:" aparecem escritos, já que o cabeçalho sumiu. */
    .valor-antes::before {
        content: 'Antes: ';
        color: var(--cor-texto-apoio);
        text-decoration: none;
        display: inline-block;
        font-weight: 600;
    }

    .valor-depois::before {
        content: 'Depois: ';
        color: var(--cor-texto-apoio);
        font-weight: 600;
    }
}

/* Respeita quem pediu menos animação no sistema operacional
   (isso não é preferência estética: para algumas pessoas, movimento na tela
   causa enjoo e dor de cabeça de verdade). */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================================
   TEMA CLARO / ESCURO
   ============================================================================

   Como funciona:
     * O tema é escolhido pelo usuário e guardado num cookie. O servidor lê o
       cookie e escreve data-tema no <html> (ver tema_atual() e os layouts) —
       por isso a página já nasce no tema certo, sem "piscar".
     * data-tema="claro"  -> claro sempre (mesmo com o SO no escuro).
     * data-tema="escuro" -> escuro sempre.
     * data-tema="auto"   -> segue a preferência do sistema operacional.

   O escuro só troca as VARIÁVEIS de cor. Como quase tudo no sistema já usa essas
   variáveis (fundo, superfície, texto, borda), o tema inteiro vira nesta única
   troca. As etiquetas coloridas (membro, congregado...) mantêm o próprio par
   fundo+texto, que continua legível nos dois temas.

   O contraste do escuro também mira o WCAG AA — a promessa do "idoso de 80 anos
   usa sozinho" vale de dia e de noite.
   ============================================================================ */

/* A lista de cores do escuro, reaproveitada pelo "escuro" e pelo "auto". */
:root[data-tema="escuro"] {
    color-scheme: dark;

    /* O #7C5CFF anterior ficava na ZONA MORTA entre os dois papéis e reprovava nos
       dois: 3,98:1 como texto e 4,35:1 com branco por cima. Agora cada papel tem o
       seu tom (ver a explicação no `:root` claro). */
    --cor-primaria: #9B85FF;         /* TEXTO/ícone sobre escuro (5,9:1 na superfície) */
    --cor-primaria-escura: #B49DFF;  /* realce/ativo sobre a tinta violeta (7,1:1)     */
    --cor-primaria-clara: #241B40;   /* tinta violeta escura: fundo de realce           */

    --cor-primaria-solida: #6A45F5;        /* fundo com texto branco (5,6:1) */
    --cor-primaria-solida-hover: #5B3AE0;  /* pressionado (6,7:1)            */

    --cor-entrada: #4ADE80;   /* verde mais claro: legível sobre fundo escuro */
    --cor-saida:   #F87171;
    --cor-alerta:  #FBBF24;

    /* Cores semânticas claras: por cima delas o texto tem que ser TINTA, não branco. */
    --cor-sobre-semantica: #100E17;

    --cor-texto: #E7E5EE;         /* quase branco, leve viés violeta */
    --cor-texto-apoio: #A5A0B3;   /* passa em AA sobre a superfície escura */
    --cor-borda: #332F3E;
    --cor-fundo: #100E17;         /* violeta-tinta bem escuro (base do manual: Tinta) */
    --cor-superficie: #1B1926;
    --cor-campo: #100E17;         /* campos um tom mais escuros que o cartão */

    --sombra: 0 1px 3px rgba(0, 0, 0, .5), 0 4px 12px rgba(0, 0, 0, .35);
}

@media (prefers-color-scheme: dark) {
    :root[data-tema="auto"] {
        color-scheme: dark;

        --cor-primaria: #9B85FF;
        --cor-primaria-escura: #B49DFF;
        --cor-primaria-clara: #241B40;

        --cor-primaria-solida: #6A45F5;
        --cor-primaria-solida-hover: #5B3AE0;

        --cor-entrada: #4ADE80;
        --cor-saida:   #F87171;
        --cor-sobre-semantica: #100E17;
        --cor-alerta:  #FBBF24;

        --cor-texto: #E7E5EE;
        --cor-texto-apoio: #A5A0B3;
        --cor-borda: #332F3E;
        --cor-fundo: #100E17;
        --cor-superficie: #1B1926;
        --cor-campo: #100E17;

        --sombra: 0 1px 3px rgba(0, 0, 0, .5), 0 4px 12px rgba(0, 0, 0, .35);
    }
}

/* O fundo do login no escuro. (O hover do "Sair" é tratado junto de .btn-sair.) */
:root[data-tema="escuro"] .tela-auth {
    background: linear-gradient(160deg, #0C0A14 0%, #14111F 100%);
}
@media (prefers-color-scheme: dark) {
    :root[data-tema="auto"] .tela-auth {
        background: linear-gradient(160deg, #0C0A14 0%, #14111F 100%);
    }
}

/* A setinha (caret) do <select> do Bootstrap é um SVG ESCURO — some no campo
   escuro. No tema escuro trocamos por uma setinha clara. */
:root[data-tema="escuro"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23E5E7EB' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
@media (prefers-color-scheme: dark) {
    :root[data-tema="auto"] .form-select {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23E5E7EB' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    }
}

/* Caixas de aviso com fundo CREME FIXO (.texto-aviso, .permissao-sensivel):
   no escuro viram um fundo âmbar escuro, com o texto do tema. Sem isto, o texto
   claro do escuro ficava ilegível sobre o creme claro. */
:root[data-tema="escuro"] .texto-aviso,
:root[data-tema="escuro"] .permissao-sensivel {
    background: rgba(251, 191, 36, .12);
    color: var(--cor-texto);
}
:root[data-tema="escuro"] .permissao-sensivel {
    border-color: rgba(251, 191, 36, .35);
}
@media (prefers-color-scheme: dark) {
    :root[data-tema="auto"] .texto-aviso,
    :root[data-tema="auto"] .permissao-sensivel {
        background: rgba(251, 191, 36, .12);
        color: var(--cor-texto);
    }
    :root[data-tema="auto"] .permissao-sensivel {
        border-color: rgba(251, 191, 36, .35);
    }
}

/* ============================================================================
   BOTÃO DE TEMA (na barra do topo)
   ============================================================================ */
.btn-tema {
    background: none;
    border: 2px solid var(--cor-borda);
    border-radius: var(--raio);
    color: var(--cor-texto);
    font-size: 15px;
    font-weight: 600;
    padding: .4rem .8rem;
    min-height: 44px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.btn-tema:hover {
    background: var(--cor-fundo);
}

/* No celular, o botão de tema mostra só o emoji — a barra do topo é estreita. */
@media (max-width: 767.98px) {
    .btn-tema-texto {
        display: none;
    }
}

/* CEP: leve indicação de "buscando" enquanto o endereço é consultado. */
.cep-buscando {
    background-image: linear-gradient(90deg, transparent, rgba(59, 130, 246, .12), transparent);
    background-size: 200% 100%;
    animation: cep-carregando 1s linear infinite;
}
@keyframes cep-carregando {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* ============================================================================
   DIÁLOGO DE CONFIRMAÇÃO (no lugar do window.confirm nativo)

   Segue o tema, tem botões grandes (alvo de toque) e texto de tamanho de leitura.
   O conteúdo é montado pelo app.js — aqui fica só a aparência.
   ============================================================================ */
.modal-confirmacao {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-confirmacao-fundo {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .5);
}

.modal-confirmacao-caixa {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 460px;
    background: var(--cor-superficie);
    color: var(--cor-texto);
    border-radius: var(--raio);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
    padding: 1.75rem;
    text-align: center;
    animation: modal-surgir .16s ease-out;
}

.modal-confirmacao-icone {
    font-size: 40px;
    line-height: 1;
    margin-bottom: .5rem;
}

.modal-confirmacao-texto {
    font-size: 18px;
    line-height: 1.5;
    margin: 0 0 1.5rem;
}

.modal-confirmacao-acoes {
    display: flex;
    gap: .75rem;
    justify-content: center;
}

.modal-confirmacao-acoes .btn {
    flex: 1;
    max-width: 200px;
}

.modal-confirmacao-cancelar {
    background: none;
    border: 2px solid var(--cor-borda);
    color: var(--cor-texto);
}
.modal-confirmacao-cancelar:hover {
    background: var(--cor-fundo);
}

/* --- Modal com conteúdo RICO (ex.: retenção do cancelamento) ---
   A caixa é uma coluna flex: o CORPO rola, os BOTÕES ficam fixos (sempre visíveis). */
.modal-confirmacao-caixa--rico {
    max-width: 640px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;              /* o scroll vai no corpo, não na caixa */
    text-align: left;
    padding-bottom: 1.5rem;
}

.modal-confirmacao-corpo {
    text-align: left;
    margin: 0;
}

/* ---- Modal de CANCELAR NFS-e: dados da nota + motivo obrigatório ---- */
.modal-nfe-titulo {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 1rem;
}

.modal-nfe-dados {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .35rem 1rem;
    margin: 0 0 1rem;
    padding: .875rem 1rem;
    background: var(--cor-fundo);
    border-radius: var(--raio);
}

.modal-nfe-dados dt {
    font-size: .82rem;
    font-weight: 600;
    color: var(--cor-texto-apoio);
}

.modal-nfe-dados dd {
    margin: 0;
    font-size: .95rem;
    font-weight: 600;
}

.modal-nfe-aviso {
    font-size: .875rem;
    color: var(--cor-texto-apoio);
    margin: 0 0 1rem;
}

.modal-nfe-rotulo {
    display: block;
    font-weight: 600;
    margin-bottom: .35rem;
}

.modal-nfe-erro {
    color: var(--cor-saida);
    font-size: .875rem;
    font-weight: 600;
    margin: .5rem 0 0;
}
.modal-confirmacao-caixa--rico .modal-confirmacao-corpo {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;              /* só o conteúdo rola */
    padding-right: .35rem;
}

.modal-retencao-titulo {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 .75rem;
}

.modal-retencao-abertura {
    font-size: 15px;
    line-height: 1.5;
    margin: 0 0 .85rem;
}

.modal-retencao-lista {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.modal-retencao-lista li {
    position: relative;
    padding: .4rem 0 .4rem 1.7rem;
    border-top: 1px solid var(--cor-borda);
    font-size: 14px;
    line-height: 1.4;
}

.modal-retencao-lista li::before {
    content: "✕";
    position: absolute;
    left: .1rem;
    top: .4rem;
    color: #DC2626;
    font-weight: 800;
}

.modal-retencao-tranquiliza {
    font-size: 13.5px;
    line-height: 1.45;
    background: var(--cor-fundo);
    border-radius: 10px;
    padding: .7rem .85rem;
    margin: 0;
}

/* Botões EMPILHADOS: MANTER (forte) em cima, CANCELAR (discreto) embaixo — evita
   o texto quebrar e dá a hierarquia certa de retenção. Ficam fixos (fora do scroll). */
.modal-confirmacao-caixa--rico .modal-confirmacao-acoes {
    flex-direction: column;
    align-items: stretch;
    gap: .35rem;
    margin-top: 1.25rem;
    flex-shrink: 0;
}
.modal-confirmacao-caixa--rico .modal-confirmacao-acoes .btn {
    flex: none;
    max-width: none;
    width: 100%;
}

/* Ação destrutiva DISCRETA (na retenção, "manter" é que é o botão forte). */
.modal-confirmacao-ok-discreto {
    color: var(--cor-texto);
    opacity: .65;
    text-decoration: underline;
    font-size: 14px;
    font-weight: 600;
}
.modal-confirmacao-caixa--rico .modal-confirmacao-ok-discreto {
    width: auto !important;
    align-self: center;
    padding: .5rem;
}
.modal-confirmacao-ok-discreto:hover {
    opacity: 1;
    color: #DC2626;
}

/* Botão de confirmar uma ação DESTRUTIVA: vermelho cheio, com texto branco.
   Cor fixa (não a do tema) para o branco ter contraste nos dois temas. */
.btn-perigo-forte {
    background: #DC2626;
    border: 2px solid #DC2626;
    color: #fff;
}
.btn-perigo-forte:hover {
    background: #B91C1C;
    border-color: #B91C1C;
    color: #fff;
}

@keyframes modal-surgir {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

/* No celular, os botões empilham — o de confirmar em cima (ação principal). */
@media (max-width: 480px) {
    .modal-confirmacao-acoes {
        flex-direction: column-reverse;
    }
    .modal-confirmacao-acoes .btn {
        max-width: none;
    }
}

/* =========================================================================
   BARRA DE FORÇA DA SENHA (convite / nova senha) — espelho do Validador
   ========================================================================= */
.forca-senha {
    margin-top: 0.6rem;
}

.forca-barra {
    height: 6px;
    background: #e9ecef;
    border-radius: 999px;
    overflow: hidden;
}

.forca-preenchimento {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: #dc3545;
    transition: width 0.2s ease, background 0.2s ease;
}

.forca-preenchimento.forca-fraca { background: #dc3545; }
.forca-preenchimento.forca-media { background: #fd7e14; }
.forca-preenchimento.forca-boa   { background: #ffc107; }
.forca-preenchimento.forca-forte { background: #198754; }

/* ============================================================================
   SINO DE NOVIDADES (topo) — o que mudou no sistema
   ============================================================================ */
.btn-sino {
    position: relative;
    font-size: 20px;
    line-height: 1;
    padding: .5rem .65rem;
    background: transparent;
    border: 0;
}

.btn-sino:hover,
.btn-sino:focus {
    background: rgba(128, 128, 128, .15);
}

/* O número só existe quando há novidade — e é o único ponto vermelho do topo,
   para não competir com nada. */
.sino-contador {
    position: absolute;
    top: .1rem;
    right: .05rem;
    min-width: 18px;
    padding: 0 4px;
    background: var(--cor-saida);
    color: var(--cor-sobre-semantica);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    border-radius: 9px;
    text-align: center;
}

.menu-novidades {
    width: min(360px, 92vw);
    padding: .75rem;
}

/* As cores são DECLARADAS, nunca herdadas: o `.dropdown-menu` do Bootstrap traz
   um `#212529` fixo, que no tema escuro fica preto sobre fundo escuro (1,12:1). */
.menu-novidades-titulo {
    font-size: .95rem;
    font-weight: 700;
    margin: 0 0 .5rem;
    color: var(--cor-texto);
}

.menu-novidades-vazio {
    margin: 0;
    color: var(--cor-texto-apoio);
    font-size: .9rem;
}

.menu-novidades-item {
    display: block;
    padding: .55rem .5rem;
    border-radius: var(--raio);
    text-decoration: none;
    color: var(--cor-texto);
}

.menu-novidades-item:hover {
    background: var(--cor-fundo);
}

.menu-novidades-item-titulo {
    display: block;
    font-weight: 600;
    font-size: .92rem;
}

.menu-novidades-item-resumo,
.menu-novidades-item-data {
    display: block;
    font-size: .82rem;
    color: var(--cor-texto-apoio);
}

.menu-novidades-item-data {
    margin-top: .15rem;
    font-size: .76rem;
}

.menu-novidades-todas {
    display: block;
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid rgba(128, 128, 128, .25);
    text-align: center;
    font-weight: 600;
    font-size: .9rem;
    color: var(--cor-primaria);
}

/* A imagem de apoio da novidade nunca estoura o cartão. */
.novidade-imagem {
    max-width: 100%;
    height: auto;
    border-radius: var(--raio);
}

/* "As senhas conferem" — resposta imediata abaixo do campo de confirmação. */
.senha-conferencia {
    margin: .5rem 0 0;
    font-size: .9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.senha-conferencia::before {
    font-size: 1rem;
}

.senha-conferencia.ok        { color: var(--cor-entrada); }
.senha-conferencia.ok::before    { content: '✓'; }
.senha-conferencia.erro      { color: var(--cor-saida); }
.senha-conferencia.erro::before  { content: '✕'; }

.forca-rotulo {
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: 0.35rem;
}

.forca-requisitos {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.15rem 0.9rem;
    font-size: 0.8rem;
    color: #6c757d;
}

.forca-requisitos li {
    position: relative;
    padding-left: 1.35rem;
}

.forca-requisitos li::before {
    content: "○";
    position: absolute;
    left: 0;
    color: #adb5bd;
}

.forca-requisitos li.ok {
    color: #198754;
}

.forca-requisitos li.ok::before {
    content: "✓";
    color: #198754;
}

@media (max-width: 420px) {
    .forca-requisitos { grid-template-columns: 1fr; }
}

/* ============================================================================
   ANIVERSARIANTES DE HOJE (painel)

   Bloco discreto: só existe nos dias em que há alguém fazendo aniversário, e
   some sozinho nos outros. A borda esquerda na cor primária é o mesmo recurso
   dos cartões — marca o bloco sem gritar.
   ============================================================================ */
.aniversario-hoje {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-left: 5px solid var(--cor-primaria);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--sombra);
}

.aniversario-cabecalho { margin-bottom: .75rem; }
.aniversario-titulo    { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--cor-texto); }
.aniversario-apoio     { margin: .15rem 0 0; font-size: .875rem; color: var(--cor-texto-apoio); }

.aniversario-lista { list-style: none; margin: 0; padding: 0; }

.aniversario-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    padding: .7rem 0;
    border-top: 1px solid var(--cor-borda);
}
.aniversario-item:first-child { border-top: 0; }

.aniversario-quem  { display: flex; align-items: baseline; gap: .5rem; flex: 1 1 12rem; min-width: 0; }
.aniversario-nome  { font-weight: 600; color: var(--cor-texto); }
.aniversario-idade { font-size: .85rem; color: var(--cor-texto-apoio); white-space: nowrap; }

.aniversario-acoes { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* Verde de "confirmado" — o mesmo do resto do sistema. */
.aniversario-enviado { font-size: .85rem; font-weight: 600; color: var(--cor-entrada); white-space: nowrap; }
.aniversario-sem,
.aniversario-nota    { font-size: .82rem; color: var(--cor-texto-apoio); white-space: nowrap; }

.aniversario-editor        { flex: 1 1 100%; margin-top: .5rem; }
.aniversario-destino       { font-weight: 400; color: var(--cor-texto-apoio); }
.aniversario-editor-acoes  { display: flex; gap: .5rem; margin-top: .5rem; }

.aniversario-ok   { flex: 1 1 100%; margin: .4rem 0 0; font-size: .875rem; font-weight: 600; color: var(--cor-entrada); }
.aniversario-erro { flex: 1 1 100%; margin: .4rem 0 0; font-size: .875rem; font-weight: 600; color: var(--cor-saida); }

/* No celular, nome e ações ocupam linhas próprias — o alvo do dedo agradece. */
@media (max-width: 600px) {
    .aniversario-quem,
    .aniversario-acoes { flex: 1 1 100%; }
}

/* ============================================================================
   SELETOR DE PESSOAS — o envio nominal de comunicado (busca + fichas)
   ============================================================================ */

.seletor-resultado {
    list-style: none;
    margin: .25rem 0 0;
    padding: 0;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    max-height: 15rem;
    overflow-y: auto;
    background: var(--cor-superficie);
}

.seletor-opcao {
    padding: .7rem .9rem;
    cursor: pointer;
    border-top: 1px solid var(--cor-borda);
}
.seletor-opcao:first-child { border-top: 0; }
.seletor-opcao:hover { background: var(--cor-fundo); }

/* As pessoas já escolhidas, como "fichas" removíveis. */
.seletor-fichas {
    list-style: none;
    margin: .6rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.seletor-ficha {
    display: inline-flex;
    align-items: center;
    gap: .1rem;
    background: var(--cor-primaria-clara);
    color: var(--cor-primaria-escura);
    border-radius: 999px;
    padding: .3rem .4rem .3rem .8rem;
    font-size: .95rem;
}

/* O "x" da ficha é um <button> — desfaz o estilo de formulário. */
.seletor-ficha-x {
    background: none;
    border: 0;
    cursor: pointer;
    color: inherit;
    font-size: 1.2rem;
    line-height: 1;
    padding: 0 .3rem;
    min-height: auto;
}
.seletor-ficha-x:hover { opacity: .6; }

/* ============================================================================
   "O QUE PRECISA DE MIM" — as pendências acionáveis do painel

   Cada linha é uma tarefa com um botão. O botão fica à DIREITA e nunca some:
   é ele que transforma o aviso em trabalho feito. Em tela estreita a linha
   quebra e o botão desce inteiro, em vez de encolher até virar ilegível.
   ============================================================================ */

.lista-pendencias { list-style: none; margin: 0; padding: 0; }

.pendencia {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .9rem 0;
    border-top: 1px solid var(--cor-borda);
}
.pendencia:first-child { border-top: 0; }

.pendencia-icone { font-size: 26px; flex-shrink: 0; }

/* Cresce e encolhe com a linha; o `min-width` impede que o texto seja espremido
   a ponto de quebrar letra a letra antes de a linha decidir quebrar. */
.pendencia-texto { flex: 1 1 16rem; min-width: 12rem; }

.pendencia-texto p {
    font-size: .92rem;
    color: var(--cor-texto-apoio);
    margin-top: .15rem;
}

/* ============================================================================
   ONBOARDING — checklist "Comece por aqui" + tour guiado
   ============================================================================ */

.onboarding-checklist {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-left: 5px solid var(--cor-primaria);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--sombra);
}
.onboarding-completo { border-left-color: var(--cor-entrada); }

.onboarding-cabecalho {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem;
}
.onboarding-titulo { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--cor-texto); }
.onboarding-apoio  { margin: .2rem 0 0; font-size: .9rem; color: var(--cor-texto-apoio); max-width: 46rem; }

.onboarding-progresso {
    font-size: .82rem; font-weight: 700; color: var(--cor-primaria);
    background: var(--cor-primaria-clara);
    padding: .3rem .7rem; border-radius: 999px; white-space: nowrap;
}

/* Barra de progresso: o avanço visível é o que faz a pessoa voltar amanhã. */
.onboarding-barra {
    height: 6px; border-radius: 999px; background: var(--cor-fundo);
    overflow: hidden; margin-bottom: 1rem;
}
.onboarding-barra > span {
    display: block; height: 100%; background: var(--cor-primaria);
    transition: width 400ms ease;
}
.onboarding-completo .onboarding-barra > span { background: var(--cor-entrada); }

.onboarding-passos { list-style: none; margin: 0; padding: 0; }

.onboarding-passo {
    display: flex; align-items: center; gap: .85rem; flex-wrap: wrap;
    padding: .7rem 0; border-top: 1px solid var(--cor-borda);
}
.onboarding-passo:first-child { border-top: 0; }

/* A "marca" é o círculo do passo: vazio quando falta, ✓ verde quando feito. */
.onboarding-marca {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid var(--cor-borda);
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 700; color: var(--cor-sobre-semantica);
}
.onboarding-passo.feito .onboarding-marca {
    background: var(--cor-entrada); border-color: var(--cor-entrada);
}

.onboarding-texto { display: flex; flex-direction: column; flex: 1 1 16rem; min-width: 0; }
.onboarding-passo-titulo { font-weight: 600; color: var(--cor-texto); }
.onboarding-passo.feito .onboarding-passo-titulo { color: var(--cor-texto-apoio); text-decoration: line-through; }
.onboarding-ajuda { font-size: .85rem; color: var(--cor-texto-apoio); }

.onboarding-ok { font-size: .85rem; font-weight: 600; color: var(--cor-entrada); }
.onboarding-secundario { font-size: .82rem; color: var(--cor-texto-apoio); }

.onboarding-rodape {
    display: flex; gap: 1.25rem; align-items: center;
    margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--cor-borda);
}
.onboarding-rever { margin: 0; }
.onboarding-link {
    background: none; border: 0; padding: 0;
    font-size: .82rem; color: var(--cor-texto-apoio); text-decoration: underline; cursor: pointer;
}
.onboarding-link:hover { color: var(--cor-texto); }

/* ----------------------------------------------------------------------------
   TOUR — o destaque é um "buraco" com sombra gigante em volta: escurece a tela
   inteira menos o elemento em foco, sem recortar nada.
   ---------------------------------------------------------------------------- */
body.tour-aberto { overflow: hidden; }

.tour-overlay { position: fixed; inset: 0; z-index: 1080; }

/* Nos passos ANCORADOS quem escurece a tela é a sombra do buraco. Nos
   passos centrais (boas-vindas e encerramento) não há buraco — então o
   escurecimento tem que vir daqui, senão a caixa flutua sobre a tela
   acesa e o foco se perde. O overlay existe nos dois casos porque é ele
   que impede o clique de vazar para a página durante o tour. */
.tour-overlay--escuro { background: rgba(8, 6, 20, .72); }

.tour-buraco {
    position: fixed; z-index: 1081;
    border-radius: 8px;
    box-shadow: 0 0 0 9999px rgba(8, 6, 20, .72);
    transition: top 220ms ease, left 220ms ease, width 220ms ease, height 220ms ease;
    pointer-events: none;
}

.tour-caixa {
    position: fixed; z-index: 1082;
    width: min(24rem, calc(100vw - 24px));
    background: var(--cor-superficie);
    color: var(--cor-texto);
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .35);
    transition: top 220ms ease, left 220ms ease;
}
.tour-caixa:focus { outline: 3px solid var(--cor-primaria); outline-offset: 3px; }

/* Passo sem âncora (boas-vindas e encerramento): caixa no meio da tela. */
.tour-caixa--central {
    top: 50% !important; left: 50% !important;
    transform: translate(-50%, -50%);
    width: min(28rem, calc(100vw - 24px));
}

.tour-contador { margin: 0 0 .35rem; font-size: .75rem; font-weight: 700; color: var(--cor-primaria); }
.tour-titulo   { margin: 0 0 .4rem; font-size: 1.1rem; font-weight: 700; }
.tour-texto    { margin: 0 0 1rem; font-size: .92rem; color: var(--cor-texto-apoio); line-height: 1.55; }

.tour-acoes   { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.tour-navegar { display: flex; gap: .5rem; }
.tour-pular {
    background: none; border: 0; padding: 0;
    font-size: .85rem; color: var(--cor-texto-apoio); text-decoration: underline; cursor: pointer;
}
.tour-pular:hover { color: var(--cor-texto); }

/* Quem pediu menos movimento não recebe animação nenhuma. */
@media (prefers-reduced-motion: reduce) {
    .tour-buraco, .tour-caixa, .onboarding-barra > span { transition: none; }
}

/* ============================================================================
   IDENTIDADE VISUAL DA IGREJA (RF-PLT-04)
   ============================================================================ */

/* Logo da igreja no topo: altura fixa, largura livre — qualquer proporção de
   arquivo cabe sem distorcer. (Diferente do logo da fideon, que é SVG nosso e
   tem proporção conhecida.)

   A PLACA CLARA atrás resolve o problema do tema: logo de igreja quase sempre
   é feito para PAPEL (tinta escura sobre branco), e sobre o topo escuro ele
   sumiria. Com a placa, o logo aparece sempre sobre o mesmo fundo em que foi
   desenhado — e é o mesmo fundo que ele terá no PDF, então a igreja vê a mesma
   coisa na tela e no papel.

   No tema CLARO a placa é invisível de graça: o topo já é branco. */
.topo-logo--igreja {
    max-height: 34px;
    max-width: 190px;
    width: auto;
    object-fit: contain;
    background: rgba(255, 255, 255, .94);
    padding: 4px 8px;
    border-radius: 8px;
    box-sizing: content-box;
}

.identidade-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 1.25rem;
}

.identidade-bloco {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: 10px;
    padding: 1.25rem;
}
.identidade-titulo { margin: 0 0 .3rem; font-size: 1.05rem; font-weight: 700; }
.identidade-ajuda  { margin: 0 0 1rem; font-size: .875rem; color: var(--cor-texto-apoio); }

/* Prévia do logo: o xadrez denuncia a transparência, que é o que o dono
   precisa enxergar antes de descobrir no relatório impresso.

   O fundo é CLARO NOS DOIS TEMAS de propósito — não segue `--cor-campo`. É
   onde o logo de fato vai aparecer: sobre a placa clara do topo e sobre o
   branco do PDF. Uma prévia escura mostraria um logo que a igreja nunca vê. */
.identidade-previa {
    display: flex; align-items: center; justify-content: center;
    min-height: 108px; margin-bottom: 1rem; padding: .75rem;
    border: 2px dashed var(--cor-borda); border-radius: 8px;
    background-color: #FFFFFF;
    background-image:
        linear-gradient(45deg, rgba(128,128,128,.12) 25%, transparent 25%, transparent 75%, rgba(128,128,128,.12) 75%),
        linear-gradient(45deg, rgba(128,128,128,.12) 25%, transparent 25%, transparent 75%, rgba(128,128,128,.12) 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}
.identidade-previa-img   { max-height: 84px; max-width: 100%; object-fit: contain; }
.identidade-previa-vazia { font-size: .875rem; color: var(--cor-texto-apoio); }

.identidade-cor-linha  { display: flex; align-items: center; gap: .75rem; }
.identidade-cor-campo  { width: 64px; height: 44px; padding: 2px; border: 1px solid var(--cor-borda); border-radius: 8px; background: var(--cor-campo); cursor: pointer; }
.identidade-cor-valor  { font-family: monospace; font-size: .95rem; color: var(--cor-texto-apoio); }

.identidade-amostra {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--cor-borda);
}
.identidade-amostra-rotulo   { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--cor-texto-apoio); }
.identidade-amostra-botao    { color: #fff; font-weight: 600; font-size: .85rem; padding: .4rem .9rem; border-radius: 8px; }
.identidade-amostra-etiqueta { font-weight: 600; font-size: .8rem; padding: .25rem .65rem; border-radius: 999px; }

.identidade-acoes { margin-top: 1.25rem; }

/* A saída "voltar à cor original": discreta, ao lado do seletor — está ali
   para tranquilizar ("dá para desfazer"), não para competir com o Salvar. */
.identidade-voltar {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    margin: .85rem 0 0;
}
.identidade-voltar-ajuda { font-size: .82rem; color: var(--cor-texto-apoio); }

/* ============================================================================
   SUGESTÕES DA COMUNIDADE
   ============================================================================ */

/* Os três passos: explicam a mecânica em cinco segundos. */
.sug-passos {
    list-style: none; margin: 0 0 1.5rem; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .75rem;
    counter-reset: passo;
}
.sug-passos li {
    background: var(--cor-superficie); border: 1px solid var(--cor-borda);
    border-radius: 10px; padding: .85rem 1rem .85rem 3rem; position: relative;
}
.sug-passos li::before {
    counter-increment: passo; content: counter(passo);
    position: absolute; left: 1rem; top: .9rem;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--cor-primaria-solida); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 700;
}
.sug-passos strong { display: block; color: var(--cor-texto); }
.sug-passos span   { font-size: .85rem; color: var(--cor-texto-apoio); }

.sug-form-linha {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem;
}
.sug-aviso { margin: 1rem 0; font-size: .9rem; }

.sug-secao { margin-bottom: 2rem; }
.sug-lista { list-style: none; margin: 0; padding: 0; }

/* Abas de ordenação do mural ("Mais votadas" / "Novas").
   Alvo generoso (.6rem/1rem) porque parte do público usa o sistema no celular
   e com pouca familiaridade digital — aba pequena vira erro de toque. */
.sug-abas {
    display: flex; gap: .25rem; flex-wrap: wrap;
    border-bottom: 2px solid var(--cor-borda);
    margin-bottom: 1rem;
}
.sug-aba {
    padding: .6rem 1rem; text-decoration: none;
    color: var(--cor-texto-apoio); font-weight: 500;
    border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.sug-aba:hover { color: var(--cor-primaria); }

/* A aba ativa é marcada por COR **e** por linha embaixo: só a cor não basta
   para quem não distingue matizes (WCAG 1.4.1 — não usar cor sozinha). */
.sug-aba.is-ativa {
    color: var(--cor-primaria); font-weight: 600;
    border-bottom-color: var(--cor-primaria);
}
.sug-aba-apoio {
    font-size: .875rem; color: var(--cor-texto-apoio);
    margin: -.5rem 0 1rem;
}

/* Aviso de que a lista está cortada — ver a nota em sugestoes/index.php. */
.sug-corte {
    font-size: .875rem; color: var(--cor-texto-apoio);
    margin-top: .75rem;
}

.sug-item {
    display: flex; gap: 1rem; align-items: flex-start;
    background: var(--cor-superficie); border: 1px solid var(--cor-borda);
    border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: .75rem;
}

/* Voto: alvo grande, número em destaque — é a ação principal do mural. */
.sug-voto { display: flex; flex-direction: column; align-items: center; gap: .2rem; flex: 0 0 auto; }
.sug-votar {
    display: flex; flex-direction: column; align-items: center;
    min-width: 58px; padding: .45rem .5rem;
    background: var(--cor-fundo); color: var(--cor-primaria);
    border: 2px solid var(--cor-borda); border-radius: 10px;
    cursor: pointer; line-height: 1.1;
}
.sug-votar:hover:not(:disabled) { border-color: var(--cor-primaria); }
.sug-votar.votado {
    background: var(--cor-primaria-clara); border-color: var(--cor-primaria);
    cursor: default;
}
.sug-votar-seta  { font-size: .75rem; }
.sug-votar-total { font-size: 1.15rem; font-weight: 700; }
.sug-votar-rotulo { font-size: .72rem; color: var(--cor-texto-apoio); text-align: center; }

.sug-conteudo { flex: 1 1 auto; min-width: 0; }
.sug-cabeca   { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.sug-titulo   { margin: 0; font-size: 1rem; font-weight: 700; color: var(--cor-texto); }
.sug-descricao { margin: .4rem 0 .3rem; color: var(--cor-texto); }
.sug-meta     { margin: 0; font-size: .82rem; color: var(--cor-texto-apoio); }

.sug-resposta {
    margin-top: .7rem; padding: .7rem .9rem;
    background: var(--cor-primaria-clara); border-radius: 8px; font-size: .9rem;
}

/* Etiquetas de status: cor só reforça o texto, nunca o substitui. */
.sug-badge {
    font-size: .72rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px;
    background: var(--cor-fundo); color: var(--cor-texto-apoio); white-space: nowrap;
}
.sug-badge--revisao    { background: rgba(251, 191, 36, .18); color: var(--cor-alerta); }
.sug-badge--mural      { background: var(--cor-primaria-clara); color: var(--cor-primaria-escura); }
.sug-badge--planejada  { background: var(--cor-primaria-clara); color: var(--cor-primaria-escura); }
.sug-badge--andamento  { background: rgba(59, 130, 246, .16); color: #1D4ED8; }
.sug-badge--pronta     { background: rgba(74, 222, 128, .18); color: var(--cor-entrada); }
.sug-badge--recusada   { background: rgba(248, 113, 113, .16); color: var(--cor-saida); }

@media (max-width: 600px) {
    .sug-item { flex-direction: column; }
    .sug-voto { flex-direction: row; gap: .5rem; }
}

/* --- Busca do mural: a porta de entrada da tela ---------------------------- */
.sug-busca {
    background: var(--cor-superficie); border: 1px solid var(--cor-borda);
    border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 1.5rem;
}
.sug-busca-linha { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.sug-busca-linha input[type="search"] { flex: 1 1 20rem; min-width: 0; }

/* O vazio que CONVIDA: é aqui que a porta de criar aparece, e só aqui. */
.sug-vazio {
    text-align: center; padding: 2.5rem 1.5rem;
    background: var(--cor-superficie);
    border: 2px dashed var(--cor-borda); border-radius: 12px;
}
.sug-vazio-icone { font-size: 2.5rem; margin-bottom: .5rem; }
.sug-vazio-texto {
    font-size: 1.05rem; color: var(--cor-texto);
    max-width: 34rem; margin: 0 auto 1.25rem;
}
.sug-vazio-apoio { margin: 1rem 0 0; font-size: .85rem; color: var(--cor-texto-apoio); }

/* Aviso de transparência dentro da janela: precisa ser LIDO antes de escrever,
   mas não pode custar a altura de uma caixa de alerta — senão empurra o botão
   de enviar para fora e a pessoa passa a rolar dentro da modal. */
.sug-nota {
    margin: .25rem 0 0;
    font-size: .82rem;
    color: var(--cor-texto-apoio);
    line-height: 1.45;
}

/* A janela do formulário respira menos: o objetivo é caber inteira. */
#janelaSugestao .modal-body   { padding-top: .85rem; padding-bottom: .85rem; }
#janelaSugestao .form-text    { margin-top: .15rem; margin-bottom: .35rem; }
#janelaSugestao .form-label   { margin-bottom: .2rem; }

/* =========================================================================
   COMO A IGREJA RECEBE — chaves PIX e contas para TED
   ========================================================================= */

.rec-lista { list-style: none; margin: 0 0 2rem; padding: 0; }

/* `flex-start` e não `center`: quando o QR é aberto, o bloco da esquerda fica
   alto e o botão centralizado flutuava no meio do nada, ao lado do código. */
.rec-item {
    display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between;
    flex-wrap: wrap;
    background: var(--cor-superficie); border: 1px solid var(--cor-borda);
    border-left: 4px solid var(--cor-borda);
    border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: .75rem;
}

/* A barra colorida marca o que está NO AR — a informação mais importante da
   lista é "isto está recebendo dinheiro agora". */
.rec-item.is-no-ar { border-left-color: var(--cor-primaria); }

.rec-tipo    { font-size: .8rem; color: var(--cor-texto-apoio); margin: 0 0 .15rem; }
.rec-unidade { font-weight: 600; }

/* A chave em fonte monoespaçada: é o dado que se CONFERE caractere a caractere,
   e proporcional embaralha 0/O e 1/l justamente onde não pode. */
.rec-chave {
    font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
    font-size: 1.05rem; margin: 0; word-break: break-all;
}
.rec-titular { font-size: .85rem; color: var(--cor-texto-apoio); margin: .15rem 0 0; }

.rec-acoes { display: flex; align-items: center; gap: .75rem; }

.rec-estado {
    font-size: .75rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .03em; color: var(--cor-texto-apoio);
}
.rec-estado.is-no-ar { color: var(--cor-primaria); }

.rec-vazio {
    text-align: center; padding: 2.5rem 1rem; margin-bottom: 2rem;
    background: var(--cor-superficie); border: 1px dashed var(--cor-borda);
    border-radius: 12px;
}
.rec-vazio-icone { font-size: 2.5rem; line-height: 1; }
.rec-vazio-texto { font-size: 1.1rem; font-weight: 600; margin: .75rem 0 .35rem; }
.rec-vazio-apoio { color: var(--cor-texto-apoio); max-width: 46ch; margin: 0 auto; }

.rec-secao { margin-bottom: 2rem; }
.rec-form  { max-width: 780px; }
.rec-form-linha {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem;
}

/* A conferência da chave fica em destaque: é a linha que evita o prejuízo. */
.rec-conferencia { color: var(--cor-texto); }

/* A senha é separada visualmente do resto — é uma decisão à parte de preencher
   os campos, e a separação ajuda a pessoa a perceber isso. */
.rec-senha {
    border-top: 1px solid var(--cor-borda);
    margin: 1.5rem 0; padding-top: 1.25rem; max-width: 26rem;
}

/* A regra "só conta no CNPJ da igreja" — enquadrada como boa prática de
   tesouraria, não como advertência: fundo neutro, sem vermelho de erro. */
.rec-regra {
    display: flex; align-items: center; gap: .6rem;
    background: var(--cor-fundo); border-left: 3px solid var(--cor-primaria);
    border-radius: 6px; padding: .7rem 1rem; margin-bottom: 1.25rem;
    font-size: .9rem;
}

/* "Aguardando confirmação" — o estado entre cadastrar e ir ao ar. */
.rec-aviso-confirmar { font-size: .8rem; color: var(--cor-texto-apoio); max-width: 16rem; }

/* =========================================================================
   PÁGINA PÚBLICA DE CONTRIBUIR
   Aberta no celular, por gente de todas as idades. Texto grande, um assunto
   por bloco, alvo de toque generoso.
   ========================================================================= */

.tela-publica { background: var(--cor-fundo); min-height: 100vh; }

.pub-caixa { max-width: 34rem; margin: 0 auto; padding: 2rem 1rem 1rem; }

.pub-cabecalho { text-align: center; margin-bottom: 2rem; }
.pub-igreja  { font-size: 1.5rem; font-weight: 700; margin: 0; }
.pub-titulo  { font-size: 1.15rem; color: var(--cor-primaria); font-weight: 600; margin: .25rem 0 .75rem; }
.pub-apoio   { color: var(--cor-texto-apoio); margin: 0; }

.pub-forma {
    background: var(--cor-superficie); border: 1px solid var(--cor-borda);
    border-radius: 14px; padding: 1.5rem 1.25rem; margin-bottom: 1.25rem;
}
.pub-forma-titulo  { font-size: 1.1rem; font-weight: 700; margin: 0 0 .25rem; }
.pub-forma-rotulo  { font-weight: 400; color: var(--cor-texto-apoio); }
.pub-unidade       { font-size: .9rem; color: var(--cor-texto-apoio); margin: 0 0 1rem; }

/* A instrução vem antes do QR e não é "textinho de apoio": é a linha que
   evita a pessoa abrir a câmera do celular e concluir que não funciona. */
.pub-instrucao { font-size: 1rem; margin: 0 0 1rem; }

.pub-qr { display: flex; justify-content: center; padding: 1rem; background: #fff; border-radius: 10px; }
.pub-ou { text-align: center; color: var(--cor-texto-apoio); margin: 1rem 0 .5rem; font-size: .9rem; }

.pub-copiar { display: flex; flex-direction: column; gap: .75rem; }

/* O código é longo e quebra em qualquer ponto — monoespaçado e com quebra
   forçada para não estourar a largura do celular. */
.pub-codigo {
    display: block; font-size: .75rem; word-break: break-all;
    background: var(--cor-fundo); border: 1px solid var(--cor-borda);
    border-radius: 8px; padding: .75rem; color: var(--cor-texto-apoio);
    max-height: 6rem; overflow-y: auto;
}
/* A cor do TEXTO entra junto, e não é detalhe: este botão aparece como
   `btn-primary` (texto branco) na página pública e como `btn-outline-primary`
   (texto azul) na tela da igreja. Pintando só o fundo, o texto azul ficava
   sobre o verde — ilegível justamente na confirmação que a pessoa quer ler. */
.pub-botao-copiar.is-copiado {
    background: #157347;
    border-color: #157347;
    color: #fff;
}

.pub-dados { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; margin: 0; }
.pub-dados dt { color: var(--cor-texto-apoio); font-weight: 500; }
.pub-dados dd { margin: 0; font-weight: 600; }

.pub-fechamento { text-align: center; color: var(--cor-texto-apoio); margin: 2rem 0; }

.pub-vazio { text-align: center; padding: 3rem 1rem; }
.pub-vazio-icone  { font-size: 2.5rem; margin: 0; }
.pub-vazio-titulo { font-size: 1.25rem; margin: .75rem 0 .5rem; }
.pub-vazio-apoio  { color: var(--cor-texto-apoio); }

.pub-rodape { text-align: center; padding: 1.5rem 1rem 2.5rem; }
.pub-rodape-marca { height: 20px; opacity: .5; }

/* O QR na tela da igreja fica recolhido: quem abre vem conferir a lista. */
.rec-qr { margin-top: .75rem; }
.rec-qr summary { cursor: pointer; font-size: .85rem; color: var(--cor-primaria); }
.rec-qr-corpo { display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; max-width: 22rem; margin-top: .75rem; }

/* O link para os membros — o que fecha o ciclo: sem divulgar, ninguém acha. */
.rec-link-caixa {
    background: var(--cor-superficie); border: 1px solid var(--cor-borda);
    border-radius: 10px; padding: 1rem 1.25rem; max-width: 46rem;
}
.rec-link-endereco {
    display: block; word-break: break-all; font-size: .9rem;
    background: var(--cor-fundo); border-radius: 6px; padding: .6rem .75rem;
    margin-bottom: .75rem;
}
.rec-link-acoes { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* O logo da igreja na página pública: o primeiro sinal de que a pessoa está no
   lugar certo, antes de ler o nome. Fundo claro atrás para o logo não sumir. */
.pub-logo {
    max-width: 180px; max-height: 80px; height: auto;
    background: #fff; border-radius: 8px; padding: .5rem;
    margin-bottom: .75rem;
}

/* ============================================================================
   AJUDA — o manual do sistema
   ============================================================================
   A lista é uma TRILHA, não um índice: os títulos de grupo e o rodapé
   anterior/próximo existem para que a pessoa sinta que há um caminho, e não um
   monte de artigos soltos.
   ============================================================================ */

.ajuda-busca {
    background: var(--cor-superficie); border: 1px solid var(--cor-borda);
    border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 1.5rem;
}
.ajuda-busca-linha { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.ajuda-busca-linha input[type="search"] { flex: 1 1 20rem; min-width: 0; }

.lista-ajuda { list-style: none; margin: 0; padding: 0; }

/* O título do grupo separa as etapas da trilha. O primeiro não leva margem em
   cima, senão abre um buraco logo abaixo da busca. */
.lista-ajuda-grupo h2 {
    font-size: 15px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--cor-texto-apoio);
    margin: 1.75rem 0 .5rem; padding-bottom: .4rem;
    border-bottom: 1px solid var(--cor-borda);
}
.lista-ajuda-grupo:first-child h2 { margin-top: 0; }

.lista-ajuda-item + .lista-ajuda-item { border-top: 1px solid var(--cor-borda); }

/* O item inteiro é o alvo do clique — não só o título. Num celular, mirar em
   três palavras é o que faz a pessoa errar e voltar. */
.lista-ajuda-item a {
    display: block; padding: .9rem .25rem; text-decoration: none;
    color: inherit; border-radius: var(--raio);
}
.lista-ajuda-item a:hover,
.lista-ajuda-item a:focus-visible { background: var(--cor-campo); }

.lista-ajuda-titulo {
    display: block; font-size: 17px; font-weight: 600; color: var(--cor-primaria);
}
.lista-ajuda-resumo {
    display: block; margin-top: .15rem; color: var(--cor-texto-apoio);
}

.ajuda-grupo {
    font-size: 14px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--cor-texto-apoio); margin: 0 0 .25rem;
}

/* O texto do manual. Medida de leitura limitada de propósito: linha muito longa
   cansa e faz perder o lugar entre um passo e outro. */
.ajuda-artigo { max-width: 46rem; line-height: 1.7; }
.ajuda-artigo h1, .ajuda-artigo h2, .ajuda-artigo h3 { margin: 1.75rem 0 .6rem; }
.ajuda-artigo h1:first-child,
.ajuda-artigo h2:first-child { margin-top: 0; }
.ajuda-artigo p, .ajuda-artigo ul, .ajuda-artigo ol { margin-bottom: 1rem; }
.ajuda-artigo li { margin-bottom: .35rem; }

/* O print da tela: largura total da coluna, com moldura discreta para não se
   confundir com a interface de verdade em volta. */
.ajuda-artigo img {
    max-width: 100%; height: auto; display: block;
    margin: 1.25rem 0; border: 1px solid var(--cor-borda);
    border-radius: var(--raio); box-shadow: var(--sombra);
}

.ajuda-artigo blockquote {
    margin: 1.25rem 0; padding: .75rem 1rem;
    border-left: 4px solid var(--cor-primaria);
    background: var(--cor-campo); border-radius: 0 var(--raio) var(--raio) 0;
}

.ajuda-trilha {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
    margin-top: 1.5rem; max-width: 46rem;
}
.ajuda-trilha-passo {
    display: block; padding: 1rem; text-decoration: none; color: inherit;
    background: var(--cor-superficie); border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
}
.ajuda-trilha-passo:hover,
.ajuda-trilha-passo:focus-visible { border-color: var(--cor-primaria); }
.ajuda-trilha-passo--proximo { text-align: right; }
.ajuda-trilha-rotulo {
    display: block; font-size: 13px; text-transform: uppercase;
    letter-spacing: .05em; color: var(--cor-texto-apoio);
}
.ajuda-trilha-titulo { display: block; font-weight: 600; color: var(--cor-primaria); }

@media (max-width: 575px) {
    /* Lado a lado em tela estreita espremeria os dois títulos a ponto de não
       dar para ler nenhum. */
    .ajuda-trilha { grid-template-columns: 1fr; }
    .ajuda-trilha-passo--proximo { text-align: left; }
}

/* A linha de grupo dentro da tabela do painel. */
.tabela-grupo {
    background: var(--cor-campo); font-size: 14px; text-transform: uppercase;
    letter-spacing: .05em; color: var(--cor-texto-apoio);
}

/* O editor, no painel: altura de trabalho decente já na abertura. */
.editor-tutorial { min-height: 22rem; }

/* =============================================================================
   TOASTS — o flash pós-ação como cartão escuro flutuante (canto superior
   direito), com ícone por tipo, entrada animada e vida curta (app.js fecha
   sozinho e ao clique). Mesmo vocabulário visual do app do membro. O cartão
   escuro funciona igual nos dois temas.
   ============================================================================= */
.pn-toasts {
    position: fixed;
    top: 84px; right: 20px;
    z-index: 1090;
    display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
    max-width: min(calc(100vw - 32px), 440px);
    pointer-events: none;             /* a pilha não bloqueia a página... */
}
.pn-toast {
    pointer-events: auto;             /* ...mas cada cartão aceita o clique */
    display: flex; align-items: flex-start; gap: 12px;
    padding: 13px 18px 13px 13px;
    border-radius: 16px;
    background: rgba(19, 17, 30, .94);
    color: #fff;
    font-size: .95rem; line-height: 1.45; font-weight: 500;
    box-shadow: 0 18px 44px -14px rgba(10, 8, 24, .55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    animation: pn-toast-entra .35s cubic-bezier(.21, 1.02, .55, 1) both;
}
.pn-toast--sai { opacity: 0; transform: translateY(-10px); transition: opacity .25s ease, transform .25s ease; }
.pn-toast-icone {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    border-radius: 50%;
    display: grid; place-items: center;
}
.pn-toast-icone::before {
    content: '';
    width: 15px; height: 15px;
    -webkit-mask: var(--pnt-icone) center / contain no-repeat;
    mask: var(--pnt-icone) center / contain no-repeat;
    background-color: currentColor;
}
.pn-toast--sucesso .pn-toast-icone { background: rgba(34, 197, 94, .28);   color: #7BEBA8; --pnt-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.pn-toast--erro    .pn-toast-icone { background: rgba(248, 113, 113, .26); color: #FCA5A5; --pnt-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 7.2v6'/%3E%3Ccircle cx='12' cy='16.8' r='1.1' fill='black' stroke='none'/%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3C/svg%3E"); }
.pn-toast--atencao .pn-toast-icone { background: rgba(251, 191, 36, .25);  color: #FCD97A; --pnt-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 7.2v6'/%3E%3Ccircle cx='12' cy='16.8' r='1.1' fill='black' stroke='none'/%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3C/svg%3E"); }
.pn-toast--info    .pn-toast-icone { background: rgba(139, 111, 255, .3);  color: #C4B5FF; --pnt-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 11v6'/%3E%3Ccircle cx='12' cy='7.2' r='1.1' fill='black' stroke='none'/%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3C/svg%3E"); }
@keyframes pn-toast-entra {
    from { opacity: 0; transform: translateY(-14px) scale(.96); }
    to   { opacity: 1; transform: translateY(0)     scale(1); }
}
@media (max-width: 640px) {
    .pn-toasts { left: 16px; right: 16px; align-items: stretch; }
}

/* =============================================================================
   RELATAR UM PROBLEMA — botão fixo + janela (migração 065)
   =============================================================================
   O botão fica VISÍVEL em toda tela, e não escondido dentro de um menu: quem
   acabou de topar com um defeito não vai caçar onde reclamar. Discreto o
   bastante para não atrapalhar o trabalho, presente o bastante para ser achado
   no susto.
   ============================================================================= */

.relato-botao {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1080;                 /* acima do conteúdo, abaixo dos modais do Bootstrap */
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .9rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--cor-texto);
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: 999px;
    box-shadow: var(--sombra);
    cursor: pointer;
    opacity: .85;
    transition: opacity .15s, transform .15s;
}

.relato-botao:hover,
.relato-botao:focus-visible {
    opacity: 1;
    transform: translateY(-1px);
    border-color: var(--cor-primaria);
}

/* No celular, só o ícone — a tela é estreita e o trabalho vem primeiro. */
@media (max-width: 640px) {
    .relato-botao span:last-child { display: none; }
    .relato-botao { padding: .6rem; right: 12px; bottom: 12px; }
}

.relato-fundo {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, .45);
}

.relato-fundo.relato-aberto { display: flex; }

.relato-caixa {
    width: 100%;
    max-width: 30rem;
    padding: 1.5rem;
    background: var(--cor-superficie);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
}

.relato-titulo   { margin: 0 0 .5rem; font-size: 1.25rem; color: var(--cor-texto); }
.relato-texto    { margin: 0 0 .75rem; color: var(--cor-texto-apoio); font-size: .95rem; }

.relato-campo {
    width: 100%;
    padding: .6rem .75rem;
    color: var(--cor-texto);
    background: var(--cor-fundo);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    resize: vertical;
}

.relato-aviso-print {
    margin: .75rem 0 0;
    font-size: .8rem;
    line-height: 1.4;
    color: var(--cor-texto-apoio);
}

.relato-resposta   { margin: .75rem 0 0; font-size: .9rem; min-height: 1.2rem; }
.relato-ok-msg     { color: var(--cor-entrada); font-weight: 600; }
.relato-erro-msg   { color: var(--cor-saida);   font-weight: 600; }

.relato-acoes {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    margin-top: 1rem;
}