/* Paleta da marca: azul-noite, off-white e o dourado do realce. Os arquivos da
   identidade estão em wwwroot/img e wwwroot/favicon*.

   ⚠️ TODA cor da interface vem de um token declarado aqui. Cor escrita dentro de uma
   regra não acompanha o tema, e `TemaEscuroTests` falha o build por isso — a exceção
   precisa de um comentário começando com `cor-fixa:` acima da regra.
   (E note: comentário de CSS não aninha. Escrever os delimitadores aqui dentro fecharia
   ESTE comentário no meio e derrubaria o bloco de tokens inteiro — foi o que aconteceu.)

   São TRÊS blocos, e é preciso ser três:

   1. `:root`                        — o tema claro, o padrão do produto.
   2. `@media (prefers-color-scheme: dark) :root:not([data-tema="claro"])`
                                     — o modo Automático. Em Automático o `<html>` NÃO tem
                                       atributo nenhum, então quem responde à troca de
                                       preferência do aparelho é o navegador: nada de evento
                                       para escutar nem de re-render para disparar.
   3. `:root[data-tema="escuro"]`    — a escolha explícita, que precisa ganhar do aparelho
                                       nas DUAS direções (o `:not([data-tema="claro"])` do
                                       bloco 2 é a outra metade dessa conta).

   O atributo é escrito pelo script inline do `index.html`, antes da primeira pintura. */
:root {
    --fundo: #f6f5f2;
    --superficie: #ffffff;
    --borda: #e4e2dc;
    --texto: #21243a;
    --texto-suave: #6b7080;
    --primaria: #21243a;
    --primaria-clara: #ecedf2;
    --realce: #c98a3f;
    --positivo: #1f7a4d;
    --negativo: #b3261e;
    --alerta: #8f6000;

    /* Tinta sobre fundo colorido. ⚠️ Não use branco fixo: no tema escuro `--primaria`
       inverte para clara, e o rótulo do botão primário sumiria dentro dele. */
    --texto-sobre-primaria: #ffffff;
    --texto-sobre-semantica: #ffffff;

    /* Fundos de etiqueta, faixa e aviso: nomeados pelo papel, não pela cor, porque no
       escuro eles são tingimentos e não teriam como se chamar "rosa claro". */
    --positivo-fundo: #e7f4ed;
    --negativo-fundo: #fdeceb;
    --alerta-fundo: #fdf4e3;
    --negativo-borda: #f5cfcc;
    --alerta-borda: #f0e0bd;

    /* Superfícies recuadas e texto de coisa que está fora ou cancelada. */
    --fundo-recuado: #faf9f6;
    --fundo-inativo: #f2f3f5;
    --texto-apagado: #676c78;

    --barra-saida: #d8d5cd;
    --gradiente-login-a: #2b2f4d;
    --gradiente-login-b: #14162a;

    /* Palco da prévia da carteirinha. O cartão em si NUNCA muda — ver .cartao-svg. */
    --palco-cartao: transparent;
    --sombra-cartao: 0 1px 4px rgba(0, 0, 0, .12);

    /* Véu das camadas que cobrem a tela (gaveta e modal) e as sombras. No escuro a sombra
       precisa ser mais funda: sombra suave sobre fundo escuro simplesmente não aparece. */
    --veu: rgba(19, 27, 38, .45);
    --sombra-gaveta: 0 0 24px rgba(19, 27, 38, .18);
    --sombra-flutuante: 0 6px 20px rgba(19, 27, 38, .14);
    --sombra-suave: 0 1px 3px rgb(0 0 0 / .12);

    /* O sufixo do arquivo é a cor do DESENHO, não a do fundo: `dark` (azul-noite) sobre
       fundo claro, `light` (off-white) sobre fundo escuro. */
    --marca-simbolo: url("../img/pastoreio-mark-dark.svg");

    --raio: 8px;

    /* Barra de rolagem, campos nativos e o fundo que o navegador pinta antes do CSS do
       body: sem `color-scheme` eles continuam claros dentro do tema escuro. */
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        --fundo: #15172a;
        --superficie: #1e2138;
        --borda: #2e3252;
        --texto: #f2f1ee;
        --texto-suave: #a3a8bd;
        --primaria: #c3c7de;
        --primaria-clara: #282c47;
        --realce: #d9a05c;
        --positivo: #4cc38a;
        --negativo: #f2695f;
        --alerta: #e0b155;
        --texto-sobre-primaria: #15172a;
        --texto-sobre-semantica: #15172a;
        --positivo-fundo: #16352a;
        --negativo-fundo: #3a1e1f;
        --alerta-fundo: #382c17;
        --negativo-borda: #5a2b2a;
        --alerta-borda: #574325;
        --fundo-recuado: #191b2e;
        --fundo-inativo: #23263c;
        --texto-apagado: #9096ad;
        --barra-saida: #4a4f6b;
        --gradiente-login-a: #232746;
        --gradiente-login-b: #101227;
        --palco-cartao: #0f1020;
        --sombra-cartao: 0 2px 10px rgba(0, 0, 0, .55);
        --veu: rgba(0, 0, 0, .62);
        --sombra-gaveta: 0 0 24px rgba(0, 0, 0, .6);
        --sombra-flutuante: 0 6px 20px rgba(0, 0, 0, .5);
        --sombra-suave: 0 1px 3px rgba(0, 0, 0, .5);
        --marca-simbolo: url("../img/pastoreio-mark-light.svg");
        color-scheme: dark;
    }
}

:root[data-tema="escuro"] {
    --fundo: #15172a;
    --superficie: #1e2138;
    --borda: #2e3252;
    --texto: #f2f1ee;
    --texto-suave: #a3a8bd;
    --primaria: #c3c7de;
    --primaria-clara: #282c47;
    --realce: #d9a05c;
    --positivo: #4cc38a;
    --negativo: #f2695f;
    --alerta: #e0b155;
    --texto-sobre-primaria: #15172a;
    --texto-sobre-semantica: #15172a;
    --positivo-fundo: #16352a;
    --negativo-fundo: #3a1e1f;
    --alerta-fundo: #382c17;
    --negativo-borda: #5a2b2a;
    --alerta-borda: #574325;
    --fundo-recuado: #191b2e;
    --fundo-inativo: #23263c;
    --texto-apagado: #9096ad;
    --barra-saida: #4a4f6b;
    --gradiente-login-a: #232746;
    --gradiente-login-b: #101227;
    --palco-cartao: #0f1020;
    --sombra-cartao: 0 2px 10px rgba(0, 0, 0, .55);
    --veu: rgba(0, 0, 0, .62);
    --sombra-gaveta: 0 0 24px rgba(0, 0, 0, .6);
    --sombra-flutuante: 0 6px 20px rgba(0, 0, 0, .5);
    --sombra-suave: 0 1px 3px rgba(0, 0, 0, .5);
    --marca-simbolo: url("../img/pastoreio-mark-light.svg");
    color-scheme: dark;
}

/* A cor da barra do navegador acompanha o tema (o <meta name="theme-color"> é atualizado
   pelo js/pastoreio.js). */

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    color: var(--texto);
    background: var(--fundo);
}

h1 { font-size: 1.5rem; margin: 0 0 4px; }
h2 { font-size: 1.1rem; margin: 24px 0 8px; }

/* ---------- Estrutura ---------- */
.app { display: flex; min-height: 100vh; }

.menu {
    width: 220px;
    flex-shrink: 0;
    background: var(--superficie);
    border-right: 1px solid var(--borda);
    padding: 16px 0;
    display: flex;
    flex-direction: column;
    /* Ancorado na tela, não esticado com a página: sem isto o menu acompanha a altura do
       conteúdo, e o cartão do plano — que mora no rodapé dele — só aparece para quem rola
       o painel inteiro até o fim. */
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.menu .marca {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--texto);
    padding: 0 20px 16px;
}

/* O símbolo vem de `--marca-simbolo`, não de um <img> com src fixo: o sufixo do arquivo é
   a cor do DESENHO (`dark` = azul-noite, `light` = off-white), então ele precisa trocar com
   o tema. Por token, troca nas sete telas de uma vez; por `src`, cada página teria de saber
   do tema e uma delas ficaria para trás. */
.marca-simbolo {
    display: block;
    flex-shrink: 0;
    background: var(--marca-simbolo) center / contain no-repeat;
}

.menu .marca .marca-simbolo { width: 26px; height: 26px; }

.menu .grupo {
    padding: 20px 20px 6px;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--texto-suave);
}

.menu a {
    padding: 9px 20px;
    color: var(--texto);
    text-decoration: none;
    border-left: 3px solid transparent;
}

.menu a:hover { background: var(--primaria-clara); }

.menu a.active {
    background: var(--primaria-clara);
    border-left-color: var(--realce);
    color: var(--primaria);
    font-weight: 600;
}

main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topo {
    background: var(--superficie);
    border-bottom: 1px solid var(--borda);
    padding: 12px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.topo .usuario { color: var(--texto-suave); }

/* Nome de igreja é longo ("Chama Missionária Silveira Martins"). Cada parte trunca por
   conta própria: `text-overflow` não atravessa um filho, então a regra vai em cada um. */
.topo-identidade { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.topo-identidade > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.botao-sair { flex-shrink: 0; }

/* Botão do menu lateral: só aparece quando o menu vira gaveta (ver media query). */
.hamburguer {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    padding: 0;
    background: transparent;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
}
.hamburguer span { display: block; width: 18px; height: 2px; margin: 0 auto; background: var(--texto); border-radius: 2px; }

/* Largura explícita, não herdada do flex: item de flex-column pode ser dimensionado
   pelo conteúdo em vez da caixa do pai, e aí uma tabela larga estica a página inteira. */
.conteudo { padding: 24px; width: 100%; min-width: 0; }

/* ---------- Componentes ---------- */
.cartao {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 16px;
    margin-bottom: 16px;
}

.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }

.indicador .rotulo { color: var(--texto-suave); font-size: .8rem; }
.indicador .valor { font-size: 1.5rem; font-weight: 700; margin-top: 4px; }
.positivo { color: var(--positivo); }
.negativo { color: var(--negativo); }
.alerta { color: var(--alerta); }

table { width: 100%; border-collapse: collapse; background: var(--superficie); }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--borda); }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); }
td.numero, th.numero { text-align: right; font-variant-numeric: tabular-nums; }
.tabela-rolavel { overflow-x: auto; max-width: 100%; border: 1px solid var(--borda); border-radius: var(--raio); }

.etiqueta {
    display: inline-block;
    /* Rótulo curto não se parte no meio ("séri/e") quando o cartão fica estreito. */
    white-space: nowrap;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .74rem;
    background: var(--primaria-clara);
    color: var(--primaria);
}
.etiqueta.vencido { background: var(--negativo-fundo); color: var(--negativo); }
.etiqueta.ok { background: var(--positivo-fundo); color: var(--positivo); }

button, .botao {
    background: var(--primaria);
    color: var(--texto-sobre-primaria);
    border: 0;
    border-radius: var(--raio);
    padding: 8px 14px;
    font-size: .88rem;
    cursor: pointer;
}
button:disabled { opacity: .55; cursor: default; }
button.secundario { background: transparent; color: var(--primaria); border: 1px solid var(--borda); }
button.discreto { background: transparent; color: var(--texto-suave); padding: 4px 8px; }
.botao-sair { background: transparent; color: var(--texto-suave); border: 1px solid var(--borda); }

label { display: block; margin-bottom: 10px; font-size: .84rem; color: var(--texto-suave); }

input, select, textarea {
    display: block;
    width: 100%;
    /* `input[type=date]` do iOS tem largura intrínseca larga; sem isto ele empurra a
       coluna e a página inteira ganha rolagem horizontal no celular. */
    min-width: 0;
    max-width: 100%;
    margin-top: 4px;
    padding: 8px 10px;
    font: inherit;
    color: var(--texto);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
}

/* `minmax(0, ...)` e `min-width: 0` são o que impede um filho de conteúdo largo
   (campo de data, botão de rótulo comprido) de esticar a linha além da tela. */
.linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 0 12px; }
.linha > * { min-width: 0; }
.acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.acoes > * { min-width: 0; }

.erro { color: var(--negativo); margin: 8px 0; }
/* Já eram usadas nas telas de cadastro e reset sem regra própria: ficavam com a
   aparência de texto comum, sem distinguir confirmação de instrução. */
.sucesso { color: var(--positivo); margin: 8px 0; }
.dica { color: var(--texto-suave); font-size: .82rem; margin: 4px 0 10px; }
.validation-message { color: var(--negativo); font-size: .8rem; }
.carregando, .vazio { color: var(--texto-suave); padding: 16px 0; }
.aviso { padding: 32px; }

/* Enquanto o WASM não carregou não há componente nenhum: esta tela vem do index.html. */
.abertura {
    min-height: 100vh;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 14px;
    color: var(--texto-suave);
}
.abertura p { margin: 0; }

/* O símbolo da abertura está embutido no index.html (um <img> chegaria depois e piscaria),
   e por isso não tem cor própria: ela vem daqui, com o tema já resolvido. */
.abertura svg path { stroke: var(--primaria); }
.abertura svg circle { fill: var(--realce); }

/* ---------- Login ---------- */
.login-fundo {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: linear-gradient(160deg, var(--gradiente-login-a) 0%, var(--gradiente-login-b) 100%);
    padding: 16px;
}

.login-cartao {
    width: 100%;
    max-width: 360px;
    background: var(--superficie);
    border-radius: 12px;
    padding: 28px;
}

.login-cartao .marca-cartao { display: flex; align-items: center; gap: 10px; }
.login-cartao .marca-cartao .marca-simbolo { width: 34px; height: 34px; }
.login-cartao h1 { color: var(--primaria); margin-bottom: 0; }
.login-cartao .subtitulo { color: var(--texto-suave); margin: 4px 0 20px; }
.login-cartao button { width: 100%; margin-top: 8px; padding: 10px; }

/* Cartaz do evento: largura limitada para não dominar a página em telas grandes. */
.cartaz { padding: 0; overflow: hidden; }
.cartaz img { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; }

/* ---------- Calendário ---------- */
.calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--borda); border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; }
.calendario .cabecalho { background: var(--superficie); padding: 8px; text-align: center; font-size: .76rem; color: var(--texto-suave); text-transform: uppercase; }
.calendario .dia { background: var(--superficie); min-height: 92px; padding: 6px; }
.calendario .dia.fora { background: var(--fundo-recuado); color: var(--texto-apagado); }
.calendario .dia .numero-dia { font-size: .8rem; color: var(--texto-suave); }
.calendario .dia.hoje .numero-dia { color: var(--primaria); font-weight: 700; }
.calendario .evento { margin-top: 4px; padding: 3px 6px; border-radius: 4px; background: var(--primaria-clara); color: var(--primaria); font-size: .74rem; cursor: pointer; }
.calendario .evento.cancelado { background: var(--fundo-inativo); color: var(--texto-apagado); text-decoration: line-through; }

/* ---------- Telas pequenas ----------
   O menu vira gaveta: fora do fluxo, aberta pelo hambúrguer do topo. Menu em linha
   rolável escondia os itens do fim da lista sem indicar que existiam. */
.menu-fundo { display: none; }

@media (max-width: 860px) {
    .hamburguer { display: flex; }

    .menu {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        /* `top`+`bottom` mandam na altura da gaveta. O `height: 100vh` da regra base
           venceria o `bottom` e, no iOS, 100vh é maior que a área visível: o rodapé da
           gaveta ficaria escondido atrás da barra do navegador. */
        height: auto;
        width: 260px;
        max-width: 82vw;
        z-index: 60;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: var(--sombra-gaveta);
    }
    .menu.aberto { transform: none; }

    /* Alvo de toque confortável. */
    .menu a { padding: 12px 20px; }

    /* Vale só aqui: acima deste ponto a gaveta não existe e travar o fundo deixaria
       a página presa se o usuário alargasse a janela com o menu aberto. */
    body.sem-rolagem { overflow: hidden; }

    .menu-fundo {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 55;
        background: var(--veu);
    }

    .topo { padding: 10px 16px; gap: 10px; }
    .conteudo { padding: 16px; }

    h1 { font-size: 1.3rem; }
    h2 { margin-top: 20px; }

    /* Filtros e campos de formulário empilham: duas colunas de 180px não cabem.
       `minmax(0, 1fr)` e não `1fr`: o mínimo `auto` de `1fr` cresce até caber o
       conteúdo do campo, que é justamente o que estourava a largura da tela. */
    .linha { grid-template-columns: minmax(0, 1fr); }

    th, td { padding: 8px 10px; }

    .modal-fundo { padding: 8px; }
    .modal { max-height: 94vh; }
    .modal header { padding: 12px 16px; }
    .modal-corpo { padding: 16px; }

    .calendario .dia { min-height: 64px; padding: 4px; }
    .calendario .evento { font-size: .68rem; padding: 2px 4px; }
    .calendario .cabecalho { padding: 6px 2px; font-size: .68rem; }
}

@media (max-width: 480px) {
    /* Nome da igreja e do usuário lado a lado não cabem sem cortar os dois. */
    .topo-identidade { display: block; }
    .topo .usuario { font-size: .8rem; }
    .conteudo { padding: 12px; }
    .cartao { padding: 12px; }
    .acoes button, .acoes .botao { flex: 1 1 auto; }
}

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

/* ---------- Tabela vira cartão no celular ----------
   Seis colunas não cabem em 360px, e rolagem lateral dentro da tabela obriga a
   arrastar para descobrir que existe mais coluna. Cada linha vira um cartão com
   rótulo ao lado do valor; o rótulo sai do `data-rotulo` da célula, por isso o
   cabeçalho pode sumir sem levar junto o significado de cada campo. */
@media (max-width: 560px) {
    .tabela-rolavel { overflow-x: visible; border: 0; border-radius: 0; }

    .tabela-rolavel table,
    .tabela-rolavel tbody,
    .tabela-rolavel tfoot,
    .tabela-rolavel tr,
    .tabela-rolavel td,
    .tabela-rolavel th { display: block; width: auto; }

    .tabela-rolavel thead { display: none; }

    .tabela-rolavel tr {
        background: var(--superficie);
        border: 1px solid var(--borda);
        border-radius: var(--raio);
        padding: 6px 12px;
        margin-bottom: 10px;
    }

    .tabela-rolavel td,
    .tabela-rolavel tfoot th {
        border-bottom: 0;
        padding: 5px 0;
        text-align: left;
    }

    /* Flex, não grid: o conteúdo da célula costuma ser texto solto MAIS um elemento
       (o título e a etiqueta "série"). No grid cada um viraria um item e a etiqueta
       cairia na coluna do rótulo; no flex os dois entram no mesmo item anônimo. */
    .tabela-rolavel td[data-rotulo],
    .tabela-rolavel tfoot th[data-rotulo] {
        display: flex;
        gap: 10px;
        align-items: baseline;
        overflow-wrap: anywhere;
    }

    .tabela-rolavel td[data-rotulo]::before,
    .tabela-rolavel tfoot th[data-rotulo]::before {
        flex: 0 0 10.5ch;
        /* O `anywhere` da célula é para o valor, não para o rótulo: sem isto
           "VENCIMENTO" quebra como "VENCIMENT/O". */
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }

    .tabela-rolavel td[data-rotulo]::before,
    .tabela-rolavel tfoot th[data-rotulo]::before {
        content: attr(data-rotulo);
        font-size: .72rem;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--texto-suave);
    }

    /* Célula sem rótulo é a dos botões (o cabeçalho dela é vazio) ou o "Total" do
       rodapé: ocupa a largura toda, separada do resto do cartão. */
    .tabela-rolavel td:not([data-rotulo]):not(:empty),
    .tabela-rolavel tfoot th:not([data-rotulo]) {
        border-top: 1px solid var(--borda);
        margin-top: 6px;
        padding-top: 8px;
    }

    .tabela-rolavel td:empty { display: none; }
    .tabela-rolavel td.acoes-linha { white-space: normal; }
    .tabela-rolavel td select { width: 100%; }
}

/* ---------- Assinatura ---------- */

/* Faixa de aviso: fica no topo do conteúdo, acima do cabeçalho, porque é sobre a conta
   inteira e não sobre a tela em que a pessoa está. */
.faixa-assinatura {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 24px;
    background: var(--primaria-clara);
    color: var(--primaria);
    border-bottom: 1px solid var(--borda);
    font-size: .88rem;
}

.faixa-assinatura.atencao { background: var(--alerta-fundo); color: var(--alerta); border-bottom-color: var(--alerta-borda); }
.faixa-assinatura.grave { background: var(--negativo-fundo); color: var(--negativo); border-bottom-color: var(--negativo-borda); }
.faixa-assinatura button, .faixa-assinatura .botao { color: inherit; text-decoration: underline; flex-shrink: 0; }

.rotulo-plano { color: var(--texto-suave); font-size: .8rem; }
.nome-plano { font-size: 1.2rem; font-weight: 700; margin-right: 8px; }

.indicador .valor .de { font-size: .9rem; font-weight: 400; color: var(--texto-suave); margin-left: 2px; }

/* Medidor de uso: a cor só muda quando falta pouco. Barra colorida o tempo todo
   ensinaria a ignorá-la. */
.medidor { height: 6px; border-radius: 999px; background: var(--primaria-clara); margin-top: 8px; overflow: hidden; }
.medidor .preenchido { height: 100%; background: var(--primaria); border-radius: 999px; }
.medidor .preenchido.quase { background: var(--alerta); }
.medidor .preenchido.cheio { background: var(--negativo); }

.planos { align-items: stretch; }
.cartao.plano { display: flex; flex-direction: column; gap: 10px; position: relative; }

/* O plano âncora se destaca por borda e selo, não pela cor de realce: o dourado da marca
   tem um uso só, que é a barra do item ativo do menu. */
.cartao.plano.ancora { border-color: var(--primaria); border-width: 2px; }
.cartao.plano.atual { background: var(--primaria-clara); }

.cartao.plano .selo {
    position: absolute;
    top: -10px;
    left: 16px;
    background: var(--primaria);
    color: var(--texto-sobre-primaria);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 3px 8px;
    border-radius: 999px;
}

.cartao.plano .preco { font-size: 1.6rem; font-weight: 700; }
.cartao.plano .preco .por { font-size: .82rem; font-weight: 400; color: var(--texto-suave); margin-left: 4px; }
.cartao.plano .inclui { list-style: none; padding: 0; margin: 0; color: var(--texto-suave); font-size: .88rem; }
.cartao.plano .inclui li { padding: 3px 0; }
.cartao.plano button { margin-top: auto; }

@media (max-width: 860px) {
    .faixa-assinatura { padding: 10px 16px; }
}

/* ---------- Modal ---------- */
.modal-fundo {
    position: fixed;
    inset: 0;
    background: var(--veu);
    display: grid;
    place-items: center;
    padding: 16px;
    z-index: 50;
}

.modal {
    background: var(--superficie);
    border-radius: 12px;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--borda);
}

.modal header h2 { margin: 0; }
.modal-corpo { padding: 20px; overflow-y: auto; }

#blazor-error-ui {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--alerta-fundo);
    border-top: 1px solid var(--alerta-borda);
    padding: 12px 20px;
    z-index: 1000;
}
#blazor-error-ui .dismiss { float: right; cursor: pointer; }

/* ---------- Cartões de autenticação ---------- */
.login-cartao.largo { max-width: 420px; }
.login-cartao .dica { color: var(--texto-suave); font-size: .78rem; margin: -6px 0 12px; }
.login-cartao .rodape-cartao { text-align: center; font-size: .85rem; color: var(--texto-suave); margin: 12px 0 0; }
.login-cartao .rodape-cartao a { color: var(--primaria); }
.login-cartao .sucesso { color: var(--positivo); }

td.acoes-linha { white-space: nowrap; }
td select { width: auto; margin-top: 0; padding: 4px 8px; font-size: .82rem; }

/* ---------- Toasts ---------- */
.toaster {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(380px, calc(100vw - 32px));
    /* O container não intercepta clique; só os toasts recebem ponteiro. */
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--raio);
    border: 1px solid var(--borda);
    border-left-width: 4px;
    background: var(--superficie);
    box-shadow: var(--sombra-flutuante);
    font-size: .88rem;
    line-height: 1.4;
    animation: toast-entra .18s ease-out;
}

.toast .icone {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .74rem;
    font-weight: 700;
    color: var(--texto-sobre-semantica);
}

.toast .mensagem { color: var(--texto); overflow-wrap: anywhere; }

.toast .fechar {
    background: transparent;
    border: 0;
    padding: 0 2px;
    color: var(--texto-suave);
    font-size: .82rem;
    line-height: 1;
    cursor: pointer;
}
.toast .fechar:hover { color: var(--texto); }

.toast.sucesso { border-left-color: var(--positivo); }
.toast.sucesso .icone { background: var(--positivo); }

.toast.erro { border-left-color: var(--negativo); }
.toast.erro .icone { background: var(--negativo); }

.toast.aviso { border-left-color: var(--alerta); }
.toast.aviso .icone { background: var(--alerta); }

@keyframes toast-entra {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .toast { animation: none; }
}

@media (max-width: 860px) {
    .toaster { top: auto; bottom: 16px; left: 16px; right: 16px; width: auto; }
}

/* ---------- Confirmação destrutiva ---------- */
.confirmacao p { margin: 0 0 10px; }
.confirmacao .detalhe { color: var(--texto-suave); font-size: .86rem; }
.confirmacao .acoes { justify-content: flex-end; margin-top: 20px; }

/* Ação destrutiva PRINCIPAL — o botão de confirmar da <Confirmacao>. Vermelho cheio,
   texto branco: é o único lugar onde o peso visual se justifica. */
button.perigo { background: var(--negativo); color: var(--texto-sobre-semantica); }
button.perigo:hover:not(:disabled) { filter: brightness(.92); }

/* Ação destrutiva SECUNDÁRIA — "Excluir", "Revogar", "Remover" no meio de uma lista.
   Texto vermelho sobre fundo transparente: ela precisa ser reconhecível como perigosa
   sem competir com a ação principal da tela nem pintar a lista de vermelho.

   As duas grafias existem no código (`discreto perigo` e `discreto perigo-texto`) e
   precisam produzir o MESMO resultado. Sem a primeira regra, `.perigo` (declarado depois
   de `.discreto`) pintava o fundo de vermelho e o texto continuava cinza de `.discreto`:
   cinza sobre vermelho, ilegível e feio — e estava assim em cinco telas. */
button.discreto.perigo,
button.discreto.perigo-texto {
    background: transparent;
    color: var(--negativo);
}

button.discreto.perigo:hover:not(:disabled),
button.discreto.perigo-texto:hover:not(:disabled) {
    background: var(--negativo-fundo);
    filter: none;
}

/* Aviso do recibo que será cancelado junto com o estorno. Não é toast: quem está lendo
   precisa decidir com essa informação na tela, antes de confirmar. */
.confirmacao .aviso-recibo {
    background: var(--alerta-fundo);
    border-left: 3px solid var(--alerta);
    color: var(--alerta);
    padding: 10px 12px;
    border-radius: var(--raio);
    font-size: .86rem;
}

/* ---------- Motivo do estorno na listagem ---------- */
/* <details> nativo: sem JS, sem estado no componente, e funciona igual em modo tabela
   e em modo cartão. */
.estorno summary {
    cursor: pointer;
    list-style: none;
    /* O triângulo padrão do WebKit desalinha a etiqueta dentro da célula. */
    display: inline-block;
}
.estorno summary::-webkit-details-marker { display: none; }
.estorno summary::after { content: " ▾"; color: var(--texto-suave); font-size: .7rem; }
.estorno[open] summary::after { content: " ▴"; }

.etiqueta.estornado { background: var(--negativo-fundo); color: var(--negativo); }

.estorno-detalhe {
    margin-top: 6px;
    /* Motivo é texto livre de até 300 caracteres: precisa quebrar, não esticar a célula. */
    max-width: 22rem;
    white-space: normal;
}
.estorno-detalhe p { margin: 0 0 2px; font-size: .84rem; }
.estorno-detalhe small { color: var(--texto-suave); font-size: .76rem; }

/* ---------- Compartilhar a agenda ---------- */
.compartilhar-agenda { margin-top: 12px; }
.compartilhar-agenda .detalhe { color: var(--texto-suave); font-size: .82rem; }

/* Âncora estilizada como botão: `button.secundario` não alcança <a>. */
a.botao.secundario { background: transparent; color: var(--primaria); border: 1px solid var(--borda); text-decoration: none; }

/* `min-width: 0` e `flex: 1 1 240px`: o link é longo e, sem isso, a largura
   intrínseca do campo estica a página no celular. */
.link-publico {
    flex: 1 1 240px;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--superficie);
    color: var(--texto-suave);
    font-size: .82rem;
}

/* ---------- Página pública da agenda ---------- */
.pagina-publica {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 16px 40px;
}

.cabecalho-publico { margin-bottom: 20px; }
.cabecalho-publico .marca-cartao { display: flex; align-items: center; gap: 12px; }
.cabecalho-publico .marca-cartao .marca-simbolo { width: 34px; height: 34px; flex-shrink: 0; }
.cabecalho-publico h1 { color: var(--primaria); margin: 0; }
.cabecalho-publico .subtitulo { color: var(--texto-suave); margin: 2px 0 0; font-size: .88rem; }

.pagina-publica .acoes { justify-content: space-between; margin-bottom: 12px; }

/* minmax(0, …): sem isso o título do evento define a largura mínima da coluna e
   estoura a página em telas de 320px. */
.lista-publica {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 12px;
}

.lista-publica .cartao { display: flex; flex-direction: column; gap: 4px; }
.lista-publica .cartao p { margin: 0; }
.lista-publica .quando { color: var(--primaria); font-size: .86rem; }
.lista-publica .detalhe { color: var(--texto-suave); font-size: .84rem; }

.rodape-publico {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--borda);
    color: var(--texto-suave);
    font-size: .8rem;
    text-align: center;
}

/* ---------- Foto do membro e recortador ---------- */

.bloco-foto {
    display: grid;
    /* minmax(0, …): sem isso a largura intrínseca do <input type=range> e do seletor de
       arquivo estica a coluna e a página inteira ganha rolagem horizontal no celular. */
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding: 14px;
    margin-bottom: 16px;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--primaria-clara);
}

.foto-atual img,
.foto-atual .foto-vazia {
    width: 96px;
    aspect-ratio: 3 / 4;   /* a mesma proporção do recorte e da carteirinha */
    border-radius: var(--raio);
    object-fit: cover;
    display: block;
}

.foto-atual .foto-vazia {
    display: grid;
    place-items: center;
    background: var(--superficie);
    border: 1px dashed var(--borda);
    color: var(--texto-suave);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.foto-acoes { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

.foto-acoes .numero-membro {
    margin: 0;
    font-variant-numeric: tabular-nums;
    color: var(--texto-suave);
    font-size: .82rem;
}

.recortador { width: 100%; }
.recortador-vazio p { margin: 0 0 8px; color: var(--texto-suave); }
.recortador-vazio input[type=file] { max-width: 100%; }

.recortador-palco { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

/* 180×240 é a moldura na tela; o canvas gera 480×640. O componente reescala o arrasto
   por esse fator — mexer aqui sem mexer lá desalinha o recorte do que a pessoa viu. */
.recortador-moldura {
    width: 180px;
    height: 240px;
    overflow: hidden;
    position: relative;
    border-radius: var(--raio);
    border: 1px solid var(--borda);
    background: var(--superficie);
    cursor: grab;
    touch-action: none;   /* o arrasto é nosso, não a rolagem da página */
}

.recortador-moldura:active { cursor: grabbing; }

.recortador-moldura img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: center;
    user-select: none;
    -webkit-user-drag: none;
}

.recortador-zoom { display: flex; flex-direction: column; gap: 4px; max-width: 180px; }
.recortador-zoom input[type=range] { width: 100%; }

.recortador .dica { margin: 0; font-size: .8rem; color: var(--texto-suave); }

@media (max-width: 560px) {
    /* Empilha: 96px + controles lado a lado não cabem em 320px. */
    .bloco-foto { grid-template-columns: minmax(0, 1fr); }
    .foto-atual img, .foto-atual .foto-vazia { width: 84px; }
}

/* ---------- Carteirinha ---------- */

.carteirinha-previa { display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* Palco da prévia. ⚠️ O que muda com o tema é só o FUNDO EM VOLTA: o SVG vem do servidor,
   desenhado pelo mesmo QuestPDF que gera o PDF, e é literalmente o que a gráfica imprime.
   Nada de `filter`, `invert` ou `mix-blend-mode` aqui — a igreja aprovaria na tela um cartão
   que a gráfica não vai imprimir. Há teste (TemaEscuroTests) falhando se aparecer. */
.carteirinha-previa .faces,
.arte-previa .faces {
    background: var(--palco-cartao);
    border-radius: 12px;
}

.carteirinha-previa .faces { display: flex; gap: 6px; }

/* A proporção é a da impressão (ISO/IEC 7810 ID-1). Manter isto igual ao PDF é o que faz a
   pré-visualização valer alguma coisa: o que se vê na tela é o formato que sai do papel. */
.cartao-membro {
    width: 100%;
    max-width: 340px;
    aspect-ratio: 85.6 / 53.98;
    padding: 11px 13px;
    border-radius: 10px;
    border: 1px solid var(--borda);
    background: var(--superficie);
    color: var(--texto);
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: var(--sombra-suave);
    overflow: hidden;
}

.cartao-topo { display: flex; align-items: center; gap: 7px; border-bottom: 1px solid var(--realce); padding-bottom: 5px; }
.cartao-topo strong { display: block; font-size: .78rem; color: var(--primaria); line-height: 1.15; }
.cartao-logo { width: 26px; height: 26px; object-fit: contain; }

.cartao-selo { font-size: .58rem; letter-spacing: .09em; text-transform: uppercase; color: var(--realce); }

.cartao-corpo { display: flex; gap: 10px; min-height: 0; flex: 1; }

.cartao-foto { width: 52px; flex: 0 0 52px; }

.cartao-foto img,
.cartao-foto .foto-vazia {
    width: 52px;
    aspect-ratio: 3 / 4;
    border-radius: 4px;
    object-fit: cover;
    display: grid;
    place-items: center;
}

.cartao-foto .foto-vazia {
    border: 1px dashed var(--borda);
    color: var(--texto-suave);
    font-weight: 600;
    font-size: .9rem;
}

.cartao-dados { min-width: 0; }
.cartao-nome { margin: 0 0 4px; font-weight: 700; font-size: .84rem; color: var(--primaria); line-height: 1.15; }

.cartao-membro dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1px 8px; }
.cartao-membro dt { font-size: .56rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .04em; align-self: center; }
.cartao-membro dd { margin: 0; font-size: .66rem; font-weight: 600; color: var(--primaria); font-variant-numeric: tabular-nums; }

.verso-corpo { align-items: flex-start; justify-content: space-between; }
.cartao-verso-dados { flex: 1; }

.cartao-qr {
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    border: 1px solid var(--borda);
    border-radius: 4px;
    padding: 3px;
    color: var(--texto-suave);
}

.cartao-qr span { font-size: 1.5rem; line-height: 1; }
.cartao-qr small { font-size: .5rem; }

.cartao-assinatura { text-align: center; }
.cartao-assinatura .linha { display: block; border-top: 1px solid var(--texto-suave); width: 60%; margin: 0 auto 2px; }
.cartao-assinatura strong { display: block; font-size: .6rem; color: var(--primaria); }
.cartao-assinatura small { font-size: .52rem; color: var(--texto-suave); }

@media (max-width: 380px) {
    /* Em 320px o cartão precisa caber com as margens do modal, sem rolagem horizontal. */
    .cartao-membro { padding: 8px 9px; }
    .cartao-foto, .cartao-foto img, .cartao-foto .foto-vazia { width: 44px; flex-basis: 44px; }
}

/* ---------- Arte da carteirinha ---------- */

/* Controles à esquerda com largura contida; a prévia fica com TODO o resto — o cartão é o
   que a pessoa veio ver, e formulário não ganha de imagem em disputa por espaço. */
.arte-carteirinha {
    display: grid;
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.arte-controles { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.arte-controles h2, .arte-previa h2 { font-size: .95rem; margin: 0; }

.campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 12px; margin: 10px 0; }
.marcador.desabilitado { color: var(--texto-suave); cursor: not-allowed; }

.arte-previa .faces { display: flex; gap: 6px; justify-content: center; }
.arte-previa h2 { align-self: flex-start; }
.arte-previa .dica { text-align: center; max-width: 620px; }

.arte-previa .carregando-cartao { width: 100%; max-width: 620px; }

.arte-previa {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--superficie);
    min-width: 0;
}

.temas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

.tema {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    color: var(--texto);
    cursor: pointer;
    font-size: .82rem;
}

.tema.ativo { border-color: var(--primaria); box-shadow: inset 0 0 0 1px var(--primaria); }
.tema .amostra { width: 20px; height: 20px; border-radius: 4px; display: block; }

/* cor-fixa: é a roda de cores do seletor — o espectro, não a paleta do tema. */
.tema .amostra.personalizado {
    background: conic-gradient(#c0392b, #e67e22, #27ae60, #2980b9, #8e44ad, #c0392b);
}

.cores { display: flex; flex-wrap: wrap; gap: 12px; }
.cores label { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; }
.cores input[type=color] { width: 56px; height: 32px; padding: 0; border: 1px solid var(--borda); border-radius: 4px; background: none; }

.opcoes { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.marcador { display: flex; align-items: center; gap: 7px; font-size: .85rem; }
.marcador input { width: auto; }

.logo-atual { width: 72px; height: 72px; object-fit: contain; background: var(--superficie); border-radius: var(--raio); border: 1px solid var(--borda); aspect-ratio: auto; }
.logo-vazio { width: 72px; height: 72px; aspect-ratio: auto; }

/* O SVG vem do servidor com a proporção exata do cartão; aqui ele só se estica. */
.cartao-svg { width: 100%; max-width: 340px; margin: 0 auto; }

/* Na tela de arte o cartão ocupa a coluna, com um teto: o SVG escala sem perder nitidez,
   mas um cartão de 1700 px não ajuda a avaliar um objeto de 8,5 cm. */
.arte-previa .cartao-svg { max-width: 620px; }
.arte-previa .cartao-svg svg { border-radius: 10px; }
.cartao-svg svg { width: 100%; height: auto; display: block; border-radius: 8px; box-shadow: var(--sombra-cartao); }

.cartao-svg.carregando-cartao {
    aspect-ratio: 85.6 / 53.98;
    display: grid;
    place-items: center;
    border: 1px dashed var(--borda);
    border-radius: 8px;
    color: var(--texto-suave);
    font-size: .82rem;
}

@media (max-width: 860px) {
    .arte-carteirinha { grid-template-columns: minmax(0, 1fr); }
    .arte-previa { position: static; }
}

.previa-cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

.previa-membro { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--texto-suave); }
.previa-membro select { max-width: 260px; }

/* ---------- Verificação pública da carteirinha ---------- */

.verificacao { max-width: 460px; }

.veredito { text-align: center; padding: 24px 20px; }
.veredito h1 { font-size: 1.15rem; margin: 0 0 6px; }
.veredito .detalhe { color: var(--texto-suave); margin: 0 0 18px; line-height: 1.45; }

/* O selo é a primeira coisa que se lê no portão, muitas vezes de relance e sob sol. */
.veredito .selo {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
}

.veredito.valida .selo { background: var(--positivo-fundo); color: var(--positivo); }
.veredito.vencida .selo { background: var(--alerta-fundo); color: var(--alerta); }
.veredito.invalida .selo { background: var(--negativo-fundo); color: var(--negativo); }
.veredito.desconhecida .selo { background: var(--primaria-clara); color: var(--texto-suave); }

.veredito.valida h1 { color: var(--positivo); }
.veredito.vencida h1 { color: var(--alerta); }
.veredito.invalida h1 { color: var(--negativo); }

.identificacao {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    padding-top: 16px;
    border-top: 1px solid var(--borda);
}

.identificacao .retrato {
    width: 68px;
    flex: 0 0 68px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--raio);
    border: 1px solid var(--borda);
}

.identificacao .retrato.sem-foto {
    display: grid;
    place-items: center;
    background: var(--primaria-clara);
    color: var(--texto-suave);
    font-weight: 600;
    font-size: 1.2rem;
}

.identificacao .nome { margin: 0; font-weight: 700; font-size: 1rem; }
.identificacao .igreja { margin: 2px 0 0; color: var(--texto-suave); font-size: .85rem; }
.identificacao .validade { margin: 6px 0 0; font-size: .8rem; color: var(--texto-suave); font-variant-numeric: tabular-nums; }

.rodape-publico {
    text-align: center;
    color: var(--texto-suave);
    font-size: .8rem;
    margin-top: 14px;
    padding: 0 10px;
}

/* Coluna de seleção da listagem de membros. Estreita: é caixa de marcação, não conteúdo. */
th.selecao, td.selecao { width: 34px; padding-right: 0; }
th.selecao input, td.selecao input { width: auto; margin: 0; }

/* Histórico de emissões dentro do modal da carteirinha. */
.historico-carteirinhas { margin-top: 18px; border-top: 1px solid var(--borda); padding-top: 14px; }
.historico-carteirinhas h3 { font-size: .85rem; margin: 0 0 8px; }
.historico-carteirinhas ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.historico-carteirinhas li {
    padding: 8px 10px;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--superficie);
}

.historico-carteirinhas li.revogada { opacity: .72; }
.historico-carteirinhas li > div { display: flex; align-items: center; gap: 8px; }
.historico-carteirinhas li strong { font-variant-numeric: tabular-nums; }
.historico-carteirinhas .detalhe { margin: 3px 0 0; font-size: .78rem; color: var(--texto-suave); }
.historico-carteirinhas .motivo { font-style: italic; }

/* ==========================================================================
   Painel — acrescentar ao fim de wwwroot/css/app.css
   Usa só os tokens já declarados no :root. Nenhuma cor nova.
   ========================================================================== */

.painel-cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.painel-cabecalho .dica { margin: 2px 0 0; }
.painel-cabecalho .acoes { margin-top: 0; }
.painel-cabecalho a.botao { text-decoration: none; }

/* Cartões de indicador: contexto abaixo do número --------------------------- */

.indicador .rotulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.indicador .nota {
    color: var(--texto-suave);
    font-size: .76rem;
    margin-top: 6px;
    overflow-wrap: anywhere;
}

.variacao {
    flex-shrink: 0;
    font-size: .72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--primaria-clara);
    color: var(--texto-suave);
}

.variacao.subiu { background: var(--positivo-fundo); color: var(--positivo); }
.variacao.caiu { background: var(--negativo-fundo); color: var(--negativo); }
.variacao.neutra { background: var(--primaria-clara); color: var(--texto-suave); }

/* Grade de duas colunas ----------------------------------------------------- */

.painel-grade {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    margin-top: 16px;
}

/* A coluna do financeiro só existe para Admin e Tesouraria. Sem ela a grade precisa
   de uma trilha só: com as duas, o conteúdo da Secretaria fica preso em 60% da
   largura e o resto da tela é um vão vazio. */
.painel-grade:has(> .painel-coluna:only-child) { grid-template-columns: minmax(0, 1fr); }

.painel-coluna {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* Bloco: cartão com cabeçalho e linhas -------------------------------------- */

.bloco {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    overflow: hidden;
}

.bloco-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--borda);
}

.bloco-topo h2 { margin: 0; font-size: .98rem; }
.bloco-topo a { font-size: .82rem; }
.bloco-topo .detalhe { color: var(--texto-suave); font-size: .78rem; }

.bloco-vazio { padding: 16px; }
.bloco-vazio .vazio { padding: 0 0 12px; }

.bloco-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 16px;
    font-size: .84rem;
    color: var(--texto-suave);
    border-top: 1px solid var(--borda);
}

.bloco .detalhe { color: var(--texto-suave); font-size: .8rem; }
.bloco .numero { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Próximos cultos ----------------------------------------------------------- */

.linha-culto {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) minmax(0, 150px) auto;
    align-items: center;
    gap: 14px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--borda);
}

.linha-culto:last-child { border-bottom: 0; }

.data-bloco {
    text-align: center;
    border-right: 1px solid var(--borda);
    padding-right: 10px;
}

.data-bloco .mes {
    display: block;
    font-size: .66rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--texto-suave);
}

.data-bloco strong { font-size: 1.15rem; line-height: 1.2; }

.culto-dados { min-width: 0; }
.culto-dados strong { display: block; font-size: .92rem; }
.culto-dados .detalhe { display: block; margin-top: 2px; }
.culto-dados .detalhe::first-letter { text-transform: uppercase; }
.culto-selo { justify-self: end; }

/* Gráfico de barras --------------------------------------------------------- */

.legenda { display: flex; gap: 12px; flex-shrink: 0; }

.item-legenda {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    color: var(--texto-suave);
}

.item-legenda .amostra { width: 9px; height: 9px; border-radius: 2px; }
.item-legenda .amostra.entrada { background: var(--positivo); }
.item-legenda .amostra.saida { background: var(--barra-saida); }

.grafico-barras {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 14px;
    align-items: end;
    height: 176px;
    padding: 18px 16px 14px;
}

.coluna-mes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    height: 100%;
    min-width: 0;
}

.coluna-mes .barras {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 5px;
    width: 100%;
    flex: 1;
}

.barra {
    width: 22px;
    max-width: 44%;
    border-radius: 4px 4px 0 0;
}

.barra.entrada { background: var(--positivo); }
.barra.saida { background: var(--barra-saida); }

.rotulo-mes { font-size: .76rem; color: var(--texto-suave); }
.rotulo-mes.atual { color: var(--texto); font-weight: 600; }

/* Contas a vencer e categorias ---------------------------------------------- */

.linha-conta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--borda);
}

.linha-conta:last-of-type { border-bottom: 0; }
.linha-conta strong { display: block; font-size: .88rem; }
.linha-conta .detalhe { display: block; margin-top: 2px; }
.linha-conta .detalhe.atrasada { color: var(--negativo); }
.linha-conta .numero { font-size: .88rem; font-weight: 600; }

.linha-categoria { padding: 11px 16px; border-bottom: 1px solid var(--borda); }
.linha-categoria:last-child { border-bottom: 0; }
.linha-categoria .medidor { margin-top: 7px; }
.linha-categoria .medidor .preenchido { background: var(--positivo); }

.categoria-topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: .85rem;
}

/* Celular ------------------------------------------------------------------- */

@media (max-width: 1080px) {
    .painel-grade { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
    .painel-cabecalho { align-items: flex-start; }
    .painel-cabecalho .acoes > * { flex: 1 1 auto; text-align: center; }

    /* Sem colunas de responsável e selo: no celular a linha vira duas faixas. */
    .linha-culto {
        grid-template-columns: 52px minmax(0, 1fr);
        row-gap: 6px;
    }

    .linha-culto > .detalhe { grid-column: 2; }
    .culto-selo { grid-column: 2; justify-self: start; }

    .grafico-barras { gap: 8px; height: 150px; padding: 14px 12px 12px; }
    .barra { width: 14px; }
    .rotulo-mes { font-size: .7rem; }
}

/* ==========================================================================
   Ícones do menu
   ========================================================================== */

.menu a {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* A pintura mora AQUI, não no sprite. `<use>` com arquivo externo clona só o
   <symbol> pedido: o stroke e o fill declarados no <svg> raiz do sprite ficam
   para trás, e o ícone sairia preenchido de preto em vez de traçado. Herdado
   pelo shadow tree do <use>, isto alcança as formas de dentro. */
.icone-menu {
    width: 16px;
    height: 16px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--texto-suave);
}

.menu a.active .icone-menu { color: var(--primaria); }

/* Cartão do plano, no rodapé do menu. `margin-top: auto` é o que o empurra para baixo:
   o .menu é flex-column, e sem isso o cartão colaria no último link. */
.rodape-menu { margin-top: auto; padding-top: 24px; }

.cartao-plano {
    margin: 0 10px;
    padding: 10px 12px;
    background: var(--fundo);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
}

.cartao-plano strong { display: block; font-size: .85rem; }
.cartao-plano span { display: block; margin-top: 2px; font-size: .78rem; color: var(--texto-suave); }

/* Seletor de tema: três botões, o ativo marcado. Só tokens — ele é a primeira coisa que
   ficaria fora do tema se tivesse cor própria. */
.seletor-tema {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin: 0 10px 10px;
    padding: 3px;
    background: var(--fundo);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
}

.seletor-tema button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    padding: 6px 2px;
    background: transparent;
    color: var(--texto-suave);
    border-radius: 6px;
    font-size: .68rem;
}

.seletor-tema button span { overflow: hidden; text-overflow: ellipsis; }
.seletor-tema button:hover { background: var(--primaria-clara); }

.seletor-tema button.ativo {
    background: var(--superficie);
    color: var(--texto);
    box-shadow: var(--sombra-suave);
}

.seletor-tema button.ativo .icone-menu { color: var(--primaria); }