/* Cura Ecclesiae
   Identidade: chama vermelha, Biblia verde, serifada preta da logo.
   Fundo claro e minimalista, harmonizando com anutricaodaigreja.com/ibrr-louvores */

:root {

  /* Marca — exclusivo do cabecalho e da identidade. Nunca marca situacao.
     O cabecalho e vermelho da marca nos dois temas: nao muda no escuro. */
  --marca-vermelho: #C1121C;
  --marca-verde: #0E8A3E;
  /* As mesmas, com nome de PAPEL (redesenho, 06/11/2026): na tela, as cores da
     marca viram o destaque da aparencia (aparencias.css); o livreto, que nao
     pode ter cor escrita a mao alem das seis dele, as recupera por aqui. */
  --marca-verde-do-papel: #0E8A3E;
  --marca-vermelho-do-papel: #C1121C;
  --marca-vinho-do-papel: #6B1119;
  --marca-tinta-do-papel: #F6EDE9;
  --marca-preto: #161616;

  /* A faixa do topo. Vinho fechado, nao o vermelho da chama: mesmo matiz
     (357°), mesma saturacao, um terco do brilho. Duas razoes, e as duas
     importam. Primeira: uma faixa larga de #C1121C fica acesa demais para
     uma tela que a secretaria olha o dia inteiro. Segunda, e menos obvia:
     a chama da logo E vermelha, e sobre o vermelho claro ela sumia —
     sobravam a cruz branca e o livro verde. Escurecendo a faixa, a chama
     volta a aparecer.
     Branco puro sobre vinho vibra nas bordas; --marca-tinta e um branco
     levemente rosado, da mesma familia da faixa, que assenta.

     ENRIQUECIDO de #570C10 para #6B1119, e as duas razoes de ser tao escuro
     morreram junto com a faixa. A primeira era area: uma faixa larga de
     vermelho cansa quem olha a tela o dia inteiro — mas isto aqui nao e mais
     faixa, sao 3px de filete. A segunda era a chama da logo sumindo dentro
     do vermelho, e ela agora esta sobre pedra clara, nao sobre o vinho.
     Livre disso, o vinho sobe um degrau de luz e de saturacao e volta a ter
     COR: #570C10 lido em 3px era quase preto, e um preto qualquer nao assina
     nada. Contraste medido: 8,82 sobre a capa clara, 10,28 sobre a mesa, e
     --marca-tinta sobre ele da 10,59 (era 12,43 — sobra de folga). */
  --marca-vinho: #6B1119;
  --marca-tinta: #F6EDE9;
  /* O vinho lido como TEXTO ou traco sobre a folha (o total "Sob disciplina
     hoje", o icone do titulo do relatorio). No claro e o proprio vinho; no
     escuro ele some contra a folha e ganha a variante clareada, nos dois
     blocos de escuro logo abaixo — a mesma regra das cores de situacao. */
  --vinho-texto: var(--marca-vinho);
  /* Um ambar de TEXTO, par do vinho acima: o grupo "em curso, com outra
     situação" do quadro de disciplina, na cor que o dono escolheu no desenho.
     Nao e cor de situacao (essas sao as nove da spec, logo abaixo). Contraste
     de 5,6 sobre a folha clara; no escuro ganha a variante clareada. */
  --ambar-texto: #8F5E16;
  /* O verde do WhatsApp, o da marca deles: todo botao que manda para o
     WhatsApp e verde, em todas as telas, porque e assim que a pessoa
     reconhece o destino antes de ler o rotulo. */
  --zap: #25D366;
  --zap-escuro: #1DA851;

  /* Situacoes — paleta propria, separada da marca (secao 7 da spec).
     Estas SAO a cor da marcacao (ponto do filtro, barrinha da tarja) e
     nunca mudam com o tema — a spec nao muda. */
  --sit-M: #0F7B3E;  --sit-CDNM: #0B6E75; --sit-N: #55647A;
  --sit-A: #9A6400;  --sit-SD: #B45309;   --sit-DI: #6B3FA0;
  --sit-TR: #1D5FA8; --sit-E: #A31515;    --sit-FA: #3F3F46;

  /* Cor de TEXTO de cada situacao. No claro e a propria cor da spec; no
     escuro, a spec fica ilegivel como texto (contraste medido abaixo de
     4.5:1) entao ganha uma variante clareada, so nos blocos de escuro. */
  --sit-M-texto: var(--tom-M);       --sit-CDNM-texto: var(--tom-CDNM);
  --sit-N-texto: var(--tom-N);       --sit-A-texto: var(--tom-A);
  --sit-SD-texto: var(--tom-SD);     --sit-DI-texto: var(--tom-DI);
  --sit-TR-texto: var(--tom-TR);     --sit-E-texto: var(--tom-E);
  --sit-FA-texto: var(--tom-FA);

  --escala: 1;
  --base: calc(16px * var(--escala));
  --raio: 10px;

  /* ---------- Tipografia ----------
     DUAS vozes, e so duas. A sans do sistema para tudo que se LE — corpo,
     descricao, rotulo, controle, tabela — e a Bitter para tudo que se OLHA:
     o nome do aplicativo, o titulo de uma tela, os dois cartoes-porta do
     painel e todo algarismo de vulto.

     A Bitter e a unica serifada da interface, e isso e uma correcao. Ela ja
     era a voz do titulo no cabecalho e dos totais do painel, mas o MESMO
     papel falava em Georgia no relatorio, no panorama, na janelinha de faixa
     e na tela de entrar. Duas serifadas cumprindo uma funcao so nao e escolha,
     e sedimento. Georgia sobra como reserva na pilha, para o meio segundo
     antes de a Bitter chegar — nunca como decisao.

     Os degraus sao a quarta justa (1,333), a mesma escala que o painel ja
     usava: 1 → 1,333 → 1,777 → 2,369 → 3,158, e para baixo /1,333 e /1,6.
     Escritos em rem porque agora rem E --base (ver a regra de html abaixo),
     entao `1.333rem` e `calc(var(--base) * 1.333)` sao a mesma medida.

     A regra de CAIXA ALTA, inteira, em uma frase: versal so onde o texto
     nomeia uma COLUNA ou um GRUPO de itens — o cabecalho da tabela e o
     cabecalho de grupo dentro de uma lista suspensa. Em todo o resto, caixa
     normal. Caixa alta nao e enfase, e um marcador de funcao: ela diz "isto
     nao e conteudo, isto nomeia o que vem abaixo". Gasta como enfase (era o
     caso do titulo de secao da ficha) ela so cobra legibilidade e nao compra
     hierarquia nenhuma — hierarquia vem do corpo, do peso e da regua.
     Quando e versal, e sempre o mesmo tratamento: --versal de entreletras,
     peso 600, --texto-suave. Um so, para nao divergir de novo. */
  --serifada: "Bitter", Georgia, "Times New Roman", serif;

  /* A LETRA DA MARCA, e so dela. Esta e a serifada que o logo da igreja usa
     em "BATISTA REFORMADA" — transicional de contraste alto, serifas
     bracketadas e caixa larga. O nome do aplicativo no alto da tela passa a
     falar com a mesma letra do brasao que esta a tres pixels dele.

     Isto parece romper a regra escrita ali em cima ("uma serifada so"), e nao
     rompe — a regra diz que duas serifadas cumprindo A MESMA funcao e
     sedimento, nao escolha. Aqui sao duas funcoes distintas e nomeaveis:
     --serifada-marca e a voz da IDENTIDADE (o nome do aplicativo no
     cabecalho, na tela de entrar e no alto da folha impressa, sempre coladas
     ao simbolo) e --serifada continua sendo a voz do DOCUMENTO (os algarismos
     de abertura, o resumo, o cartaz). Uma assina, a outra registra. O teste
     de nao-sedimento: se um dia estas tres telas deixarem de mostrar o
     simbolo ao lado, este token perde a razao de existir e deve sair.

     Playfair Display 700, subconjunto latino, 23 KB, gravada em
     app/publico/fontes — como as outras quatro, o sistema continua rodando
     offline sem pedir nada a rede.

     Uma ressalva honesta para quem vier depois: a Playfair foi escolhida por
     COMPARACAO VISUAL com o arquivo do logo (imagens/IBRR_H_New_SORA.png,
     que e a unica versao onde o texto aparece em preto e da para ler o
     desenho), e nao por informacao do autor da marca. Bate no esqueleto
     (perna reta e aberta do R, apice chato do A, caixa larga, contraste
     alto), mas se aparecer o nome da fonte original do brasao, e ela que
     deve entrar aqui — o resto do sistema nao muda uma linha, porque tudo
     passa por este token.

     A Bitter fica logo atras na pilha, e nao a Georgia: e o meio segundo
     antes de a Playfair chegar, e a Bitter e a serifada que o resto da tela
     ja esta desenhando naquele instante. */
  --serifada-marca: "Playfair Display", "Bitter", Georgia, serif;

  /* A LETRA DAS TELAS (redesenho visual, 06/11/2026). Uma familia so, a Inter,
     para ler e para olhar: o dono achou "muito amador" o encontro de Bitter,
     Playfair e a letra do Windows na mesma tela. As duas serifadas acima NAO
     saem: o livreto e o papel as usam nos titulos. */
  --letra-interface: "Inter", system-ui, "Segoe UI", sans-serif;
  --letra-titulo: "Inter", system-ui, "Segoe UI", sans-serif;

  /* A LETRA DO PAPEL (08/11/2026, decisao do dono). O texto do livreto e dos
     relatorios usava a pilha do Windows (system-ui, "Segoe UI"...), que na VPS
     (Linux, sem Segoe) cairia em outra letra e mudaria a paginacao. Agora e a
     Inter servida pelo proprio sistema (o @font-face logo abaixo), igual em
     qualquer maquina. #livreto (diretorio.css) e a impressao (impressao.css)
     leem este token; os titulos seguem nas serifadas. */
  --letra-do-papel: "Inter", system-ui, sans-serif;

  /* Tres corpos de algarismo, porque sao tres distancias de leitura: o de
     ABERTURA (o total que abre um relatorio ou o resumo, lido primeiro), o
     dos quatro TOTAIS do painel (que a lideranca le projetado, de longe — por
     isso ele cresce com a largura da tela) e o de CELULA, dentro de um quadro
     do panorama, que convive com outros tres iguais e nao pode crescer. */
  --t-vulto:  clamp(2.369rem, 5.6vw, 3.158rem);
  --t-total:  clamp(1.777rem, 4vw, 2.369rem);
  --t-numero: 1.777rem;
  --t-titulo: 1.333rem;   /* nome do aplicativo, cartao-porta */
  --t-folha:  1.125rem;   /* titulo de folha, janela, ficha */
  --t-secao:  1rem;       /* titulo de secao: mesmo corpo do texto */
  --t-corpo:  1rem;
  --t-apoio:  .875rem;    /* descricao, rotulo de campo, dado secundario */
  --t-nota:   .75rem;     /* legenda, rodape, rotulo de coluna */
  --t-selo:   .625rem;

  --versal: .06em;

}

/* As nove cores de situacao no tema escuro, e SO elas.
   Tudo o que era superficie — mesa, folha, capa, tinta, sombras, veu, barras —
   mudou de casa para app/publico/css/paletas.css, onde cada paleta declara o
   claro e o escuro no mesmo bloco. O que sobrou aqui e o que NAO e paleta: a
   spec de situacoes manda nestas nove cores, e elas sao as mesmas em qualquer
   tom de tela, porque sao as unicas com SIGNIFICADO nesta aplicacao — e sao
   elas que saem no papel.
   Por que ainda ha dois blocos gemeos: a cor da spec lida como TEXTO fica
   abaixo de 4,5 sobre a folha escura, entao ela ganha uma variante clareada.
   Isso depende do TEMA, e nao da paleta, e por isso mora aqui e nao la.
   Os dois nao podem divergir — ha um teste. */
:root[data-tema="escuro"] {
  --sit-M-texto: #35C271;   --sit-CDNM-texto: #2FB3BD;
  --sit-N-texto: #93A3B8;   --sit-A-texto: #E0A32A;
  --sit-SD-texto: #F0902F;  --sit-DI-texto: #B18AE0;
  --sit-TR-texto: #6BA6EE;  --sit-E-texto: #F0716B;
  --sit-FA-texto: #B0B0BA;
  --vinho-texto: #E58A93;
  --ambar-texto: #E2AE62;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --sit-M-texto: #35C271;   --sit-CDNM-texto: #2FB3BD;
    --sit-N-texto: #93A3B8;   --sit-A-texto: #E0A32A;
    --sit-SD-texto: #F0902F;  --sit-DI-texto: #B18AE0;
    --sit-TR-texto: #6BA6EE;  --sit-E-texto: #F0716B;
    --sit-FA-texto: #B0B0BA;
    --vinho-texto: #E58A93;
    --ambar-texto: #E2AE62;
  }
}

/* A letra da marca. Fica AQUI, e nao junto das outras quatro la embaixo,
   porque aquelas sao do cartaz (desenhadas no canvas, esperadas por
   document.fonts.load) e esta e da TELA: ela precisa estar declarada antes
   de qualquer regra que a peca. `swap` pelo mesmo motivo da Bitter — `block`
   esconderia o nome do aplicativo ate a fonte chegar, e um cabecalho sem
   titulo por meio segundo a cada carga e pior que meio segundo de Bitter no
   lugar dele. */
@font-face {
  font-family: "Inter";
  font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/fontes/inter-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fontes/playfair-display-700.woff2") format("woff2");
}

* { box-sizing: border-box; }

/* ---------- Barras de rolagem ----------
   A barra nativa do Windows e uma calha cinza de 17px com setas nas pontas:
   ao lado da ficha ela pesa mais que o conteudo. Aqui ela vira um traco.
   Como e feito: a largura reservada continua 12px (area de clique honesta,
   o ponteiro nao precisa de mira), mas o polegar e pintado so no miolo —
   a borda transparente com background-clip: padding-box deixa 4px visiveis.
   Sem trilho, sem setas. O polegar so ganha corpo (8px, tom mais forte)
   quando o ponteiro entra na area que rola, que e quando ele serve para
   arrastar e nao apenas para dizer "ha mais aqui".
   O par scrollbar-width/scrollbar-color atende Firefox, que nao tem os
   pseudo-elementos; la sai a barra fina do proprio sistema na nossa cor. */
* { scrollbar-width: thin; scrollbar-color: var(--barra) transparent; }

*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner { background: transparent; }
*::-webkit-scrollbar-thumb {
  background-color: var(--barra);
  background-clip: padding-box;
  border: 4px solid transparent;
  border-radius: 99px;
}
/* O :hover pega qualquer caixa que role, menos html/body: a barra da pagina
   inteira ficaria acesa o tempo todo, ja que o ponteiro esta sempre sobre o
   corpo do documento. */
:where(div, ul, ol, section, aside, main, pre, textarea):hover::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb:active {
  background-color: var(--barra-viva); border-width: 2px;
}
/* Chromium desenha setas nas pontas em algumas plataformas; nao ha o que
   apontar numa barra de 4px. */
*::-webkit-scrollbar-button { display: none; }

/* Defensiva: nenhuma imagem forca a pagina a ficar mais larga que a tela. */
img { max-width: 100%; }

/* rem PASSA A SER --base, e isto conserta um defeito antigo. Os botoes
   A- A A+ mexem em --escala, que carrega --base; rem e a raiz do documento,
   que ninguem definia — entao ela continuava nos 16px de fabrica e TUDO que
   estivesse escrito em rem (quase toda a tela de cadastros, a ficha, os
   relatorios) ignorava o controle de tamanho de letra. So o painel obedecia,
   porque foi escrito em calc(var(--base) * N) de proposito.
   Com esta linha as duas notacoes viram a mesma medida: em escala 1 nada se
   move um pixel, e em A+ ou A- a tela inteira acompanha, recuos e cantos
   junto. As quebras de layout continuam em px, entao aumentar a letra nunca
   troca o desenho da pagina — so o tamanho do que esta dentro dele. */
html { font-size: var(--base); }

/* A voz de interface. `system-ui` vem PRIMEIRO, e nao depois da "Segoe UI"
   escrita a mao como estava: no Windows 11 system-ui resolve para a Segoe UI
   Variable, o desenho novo da mesma familia — mais aberta, mais regular nos
   corpos pequenos e sem o ar de caixa de dialogo do Office que a Segoe UI
   estatica carrega. Pedir "Segoe UI" pelo nome trancava o sistema no desenho
   antigo mesmo em maquina que ja tem o novo.
   A Segoe UI fica logo atras, para o Windows 10 e para qualquer maquina onde
   o nome variavel nao resolva: ninguem perde letra, so quem tem o desenho
   novo passa a receber. Nada e baixado — sao as duas fontes do proprio
   sistema, e a rede da igreja continua sem depender de webfont para ler. */
body {
  margin: 0;
  font-family: var(--letra-interface);
  font-size: var(--t-corpo);
  line-height: 1.5;
  color: var(--texto);
  background: var(--fundo);
}

/* ---------- A passagem de uma tela para outra ----------

   As cinco telas sao cinco DOCUMENTOS, e ate aqui trocar de tela era o
   navegador jogando fora a pagina inteira e montando outra do zero na
   frente de quem estava olhando. A capa saia e voltava; a barra de
   destinos apagava num lugar e acendia noutro; a pagina inteira dava um
   pulo quando a tarja chegava. Metade disso foi resolvida no servidor
   (app/http/cabecalho.js: a tela que entra ja chega inteira no primeiro
   quadro). Estas regras resolvem a outra metade — o corte seco entre um
   documento e o outro.

   O RECURSO E UM SO, e e preciso entende-lo para ler o resto: todo
   elemento com `view-transition-name` sai do retrato da pagina e vira um
   grupo proprio, que o navegador liga ao grupo de MESMO NOME da outra
   tela. Ligados, os dois deixam de ser duas imagens que se dissolvem e
   passam a ser uma coisa so que MUDA DE LUGAR. Quem nao tem nome fica no
   retrato grande e se dissolve com ele. Nomear, aqui, e dizer "isto nas
   duas telas e a mesma coisa".

   O QUE ESTA DECLARADO AQUI, de cima para baixo:

     A CAPA NAO SE MEXE, e nem se dissolve. Depois que a barra e as
     ferramentas saem para grupos proprios, o que resta nela e identico
     nas cinco telas, e a regra manda simplesmente nao animar. E isso que
     da o "o mais estatico possivel" — nao um cabecalho que se move
     pouco, um cabecalho que nao se move.

     A BARRA DE DESTINOS E CADA FERRAMENTA ESCORREGAM. Elas nao ficam no
     mesmo x nas cinco telas, porque as ferramentas da direita mudam de
     tela para tela e a fileira e alinhada pela direita. Com nome proprio,
     essa diferenca de alguns pixels vira um deslize curto em vez de um
     borrao de duas imagens.

     O FILETE DO DESTINO ATUAL ANDA, e e o movimento que o clique pediu:
     ele sai de baixo de Painel e para debaixo de Cadastros. E a unica
     coisa na capa que se move porque quis, e nao por acerto de posicao.

     O MIOLO TROCA POR DISSOLVENCIA, e com espera. Ver as duas curvas
     abaixo.

   Uma nota de compatibilidade: navegador que nao conhece @view-transition
   ignora o bloco inteiro e continua trocando de tela do jeito antigo. Nada
   aqui e requisito de funcionamento — e so a passagem. */
@view-transition { navigation: auto; }

/* O `view-transition-name: capa` que este bloco descreve NAO esta declarado
   aqui: ele mora dentro da regra .cabecalho, na secao seguinte, junto com o
   resto do desenho dela. Duas regras para o mesmo seletor seriam duas
   respostas para "como e a capa?" — e a busca pela primeira acharia esta,
   que nao diz nada sobre a capa. */

/* A CAPA NAO PASSA POR TRANSICAO NENHUMA, e isso e o resultado, nao o
   ponto de partida. Depois que a barra e cada ferramenta saem para grupos
   proprios (logo abaixo), o que sobra dentro da capa e a marca, o titulo,
   o nome da igreja e a tarja — e esses quatro sao IDENTICOS nas cinco
   telas. Dissolver uma imagem na sua igual devia ser invisivel, e nao e:
   o navegador pinta as duas com `plus-lighter`, e as letras do titulo, que
   sao serifadas e finas, engrossam visivelmente no meio do caminho. Era o
   ultimo borrao que restava na passagem.
   Sem animacao, o retrato antigo some de uma vez e o novo — que e o
   conteudo vivo, e nao uma foto — fica no lugar o tempo todo. A capa
   simplesmente NAO se mexe. */
::view-transition-old(capa) { animation: none; opacity: 0; }
::view-transition-new(capa) { animation: none; opacity: 1; }

/* AS FERRAMENTAS DA DIREITA, CADA UMA COM O SEU NOME.
   A fileira nao e a mesma nas cinco telas: o Backup so existe em Cadastros e
   no Diretorio, a paleta so no Painel, e o trilho A- A A+ falta em Relatorios
   e no Diretorio. Sem nome proprio, cada uma dessas diferencas virava um
   borrao de duas imagens sobrepostas no meio da passagem.
   Com nome: as que existem nas duas telas DESLIZAM da posicao de la para a de
   ca (a fileira e alinhada pela direita, entao uma ferramenta a mais desloca
   as vizinhas), e as que so existem de um lado simplesmente entram ou saem.
   Os tres seletores sao unicos por pagina — dois elementos com o mesmo
   view-transition-name cancelariam a transicao inteira, em silencio. */
/* Desde o redesenho (06/11/2026) a "capa" e a barra lateral, e o trilho
   A- A A+ mora no pe dela; e o unico pedaco que muda de uma tela para outra
   (Relatorios e Diretorio nao o tem), e por isso leva nome proprio. */
.escala-fonte { view-transition-name: letras; }
::view-transition-group(letras) { animation-duration: 240ms; }

/* O MIOLO, e a espera que e a razao de ser destas duas curvas.
   A tela que entra pinta ANTES de os dados chegarem — o HTML vem do disco,
   a lista vem do banco — e havia ai um segundo piscado, menor e mais
   teimoso que o primeiro: a pagina certa, vazia, por uns 110ms.
   Por isso a imagem que SAI fica inteira durante os primeiros 45% da
   passagem, em vez de comecar a sumir na hora. Nesse tempo a tela que
   entra ja esta viva por baixo, preenchendo-se — quando ela finalmente
   aparece, aparece cheia. As duas curvas sao complementares e lineares de
   proposito: e assim que a soma das opacidades fica em 1 do comeco ao fim
   e a dissolvencia nao afunda num clarao nem num escurecido no meio. */
::view-transition-group(root) { animation-duration: 320ms; }
::view-transition-old(root) { animation: tela-que-sai 320ms linear both; }
::view-transition-new(root) { animation: tela-que-entra 320ms linear both; }
@keyframes tela-que-sai   { 0%, 45% { opacity: 1 } 100% { opacity: 0 } }
@keyframes tela-que-entra { 0%, 45% { opacity: 0 } 100% { opacity: 1 } }

/* O filete e a barra correm juntos, e desaceleram no fim: a curva chega
   rapido e encosta devagar, que e como uma coisa guiada pela mao de alguem
   para — o clique acabou de acontecer. */
::view-transition-group(destino-atual),
::view-transition-group(destinos) {
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}

/* Quem pediu menos movimento continua ganhando o cabecalho pronto e a troca
   sem pulo — perde so a dissolvencia e o deslizar do filete, que e
   exatamente o que "menos movimento" quer dizer. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ---------- A barra lateral (redesenho visual, 06/11/2026) ----------
   No lugar do cabecalho alto: marca, destinos, a pessoa, a aparencia e o
   tamanho da letra, numa coluna escura a esquerda. Quem a costura e
   app/http/cabecalho.js.

   FIXA, E NAO UMA COLUNA DE GRADE. A pagina ganha um recuo do tamanho dela
   (padding-left no body) e a barra fica parada por cima desse recuo. Assim
   nenhuma tela precisou mudar de esqueleto: o Diretorio, que faz o corpo ter
   a altura da janela, e as janelas suspensas, que se medem pela janela,
   continuam como eram.

   A LARGURA E EM PX, nunca em rem: o A+ aumenta a letra, e a barra nao pode
   crescer junto e comer a pagina. O texto dentro dela e que cede. */
:root { --largura-lateral: 232px; }
body:has(> .lateral) { padding-left: var(--largura-lateral); }

/* A BARRA E DA IGREJA, NAO DA APARENCIA (pedido do dono, 07/11/2026, com o
   modelo em imagem): azul-marinho com o vermelho do brasao nas aparencias A e
   B; na Cura Ecclesiae (d) ela e verde e ouro, logo abaixo. Os tokens --lateral* sao redefinidos AQUI DENTRO, e as regras
   que ja os consumiam seguem como estavam. A mesa (a pagina) continua sendo
   da aparencia escolhida. */
.lateral {
  --lateral: #111C2E;
  --lateral-texto: #C3CBD6;
  --lateral-tinta: #FFFFFF;
  --lateral-ativo: linear-gradient(180deg, #B01B22, #8F1419);
  --lateral-vermelho: #A8161D;
  --lateral-filete: rgb(255 255 255 / .12);
  --lateral-foco: #F4D3D5;
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 20;
  width: var(--largura-lateral);
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 14px 14px 18px;
  color: var(--lateral-texto);
  /* De cima para baixo: o filete vermelho na borda, o simbolo da igreja quase
     apagado no meio do vazio, e o azul que escurece para o pe. */
  background:
    linear-gradient(90deg, var(--lateral-vermelho) 0 4px, transparent 4px),
    linear-gradient(180deg, #16243B 0%, #111C2E 50%, #0C1524 100%);
  overflow-y: auto; overflow-x: hidden;
  /* O nome que tira a barra da dissolvencia da pagina na troca de tela: ela
     nao se mexe. O raciocinio esta em "A passagem de uma tela para outra". */
  view-transition-name: capa;
}
/* NA CURA ECCLESIAE (a aparencia d) a barra e verde e ouro, como a logo e o
   modelo aprovado na spec (07/11/2026, depois do pedido do azul). A e B
   seguem com o azul-marinho e o vermelho acima. O filete da borda, o aro da
   foto e o marcador do destino atual seguem --lateral-vermelho, que aqui e o
   ouro. */
:root[data-aparencia="d"] .lateral {
  --lateral: #163828;
  --lateral-texto: #CFC4AA;
  --lateral-tinta: #F6EBD3;
  --lateral-ativo: rgb(246 235 211 / .12);
  --lateral-vermelho: #B8892F;
  --lateral-filete: rgb(202 150 52 / .35);
  --lateral-foco: #E9C987;
  background:
    linear-gradient(90deg, var(--lateral-vermelho) 0 4px, transparent 4px),
    linear-gradient(180deg, #1A4030 0%, #163828 50%, #10291D 100%);
}
:root[data-aparencia="d"] .lateral .navegacao a.navegacao-atual::after {
  box-shadow: inset 3px 0 0 var(--lateral-vermelho);
}
:root[data-aparencia="d"] .lateral .navegacao a span {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 6 6 6-6 6' fill='none' stroke='%23CFC4AA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:root[data-aparencia="d"] .lateral .navegacao a.navegacao-atual span { background-image: none; }
/* A marca d'agua: o simbolo da igreja, em cinza e quase apagado, no vazio
   entre os destinos e o pe. Camada propria porque fundo nao tem opacidade; a
   barra ja e um contexto de empilhamento (z-index 20), entao o -1 fica sobre
   o azul e sob os links. Fixa na janela, como a barra. */
.lateral::before {
  content: ""; position: fixed; left: 0; top: 0; bottom: 0; width: var(--largura-lateral);
  z-index: -1; pointer-events: none;
  background: url("/imagens/lateral-marca-dagua.png") 54% 63% / 140px auto no-repeat;
  opacity: .09;
}

/* A marca do Cura Ecclesiae (07/11/2026): o escudo e, ao lado, o nome em
   capitais romanas com a frase em italico embaixo. */
.lateral-marca {
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  padding: 0 0 12px; border-bottom: 1px solid var(--lateral-filete);
  color: inherit; text-decoration: none;
}
.lateral-marca:focus-visible { outline: 2px solid var(--lateral-foco); outline-offset: 2px; border-radius: 8px; }
.lateral-escudo { display: block; width: 34px; height: auto; flex: none; }
.lateral-nomes {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0;
  text-align: left;
}
/* Em px, como a largura da barra: o A+ nao pode empurrar o nome para fora.
   O recuo e Georgia, nao var(--serifada-marca): regra de tela nao usa os
   tokens serifados (testes/letra.test.js). */
.lateral-sistema {
  font-family: "Cinzel", Georgia, serif; font-weight: 600; font-size: 14.5px;
  line-height: 1.1; letter-spacing: .07em; color: var(--lateral-tinta);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.lateral-frase {
  font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600;
  font-size: 14px; line-height: 1.15; color: #D9AE5B; white-space: nowrap;
}
.lateral .navegacao { margin-top: 14px; }

.lateral-pe {
  margin-top: auto; display: flex; flex-direction: column; gap: 12px;
  padding-top: 14px; border-top: 1px solid var(--lateral-filete);
}
/* A logo da igreja tem texto preto: a caixinha e creme e o fio dourado sao
   FIXOS, nao tokens, para sair igual em todas as aparencias, inclusive na
   escura. Pequena e discreta, como o dono pediu. */
.lateral-igreja {
  width: 150px; margin: 0 auto; padding: 7px 10px; border-radius: 8px;
  background: #EFE6DA; border: 1px solid rgb(202 150 52 / .7);
}
.lateral-igreja img { display: block; width: 100%; height: auto; }
.lateral-igreja-simbolo { display: none; width: 32px; height: auto; margin: 0 auto; }
.lateral-ferramentas {
  display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 0 2px;
}
/* O filete em pe entre as aparencias e o tamanho da letra, como no modelo. */
.lateral-ferramentas > #troca-de-aparencia:has(+ .escala-fonte) {
  padding-right: 12px; border-right: 1px solid var(--lateral-filete);
}
/* A versao do sistema (docs/versoes.md): discreta, no fim do pe. */
.lateral-versao {
  margin: 0; padding: 0 4px; font-size: 11px; color: var(--lateral-texto); opacity: .75;
}

/* A pessoa, no pe: a foto, o nome, e o menu que agora abre PARA CIMA. */
.lateral .perfil { margin: 0; }
.lateral .perfil-botao {
  width: 100%; padding: 6px 8px; gap: 10px; border: 0; border-radius: 8px;
  color: var(--lateral-tinta); background: none; justify-content: flex-start;
}
.lateral .perfil-botao:hover, .lateral .perfil-botao[aria-expanded="true"] { background: rgb(255 255 255 / .06); }
.lateral .perfil-botao { padding: 6px 4px; position: relative; }
/* A foto com o aro vermelho do modelo. */
.lateral .perfil-foto {
  width: 38px; height: 38px;
  box-shadow: 0 0 0 2px var(--lateral), 0 0 0 4px var(--lateral-vermelho);
  margin: 4px;
}
.lateral .perfil-iniciais { font-size: .8rem; }
.lateral .perfil-texto { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; flex: 1; line-height: 1.25; }
.lateral .perfil-nome { max-width: 100%; font-size: 14px; font-weight: 700; color: var(--lateral-tinta); }
.lateral .perfil-papel { font-size: 11.5px; color: var(--lateral-texto); }
.lateral .perfil-seta { flex: none; color: var(--lateral-texto); transition: transform .15s; }
.lateral .perfil-botao[aria-expanded="true"] .perfil-seta { transform: rotate(180deg); }
.lateral .perfil-botao:focus-visible { outline: 2px solid var(--lateral-foco); outline-offset: 2px; }
.lateral .perfil-menu {
  top: auto; bottom: calc(100% + 6px); left: 0; right: auto; min-width: 100%;
  background: var(--papel); color: var(--texto); border-color: var(--borda);
}
.lateral .perfil-menu a:hover, .lateral .perfil-menu button:hover,
.lateral .perfil-menu a:focus-visible, .lateral .perfil-menu button:focus-visible { background: var(--superficie-2); }
.lateral .perfil-menu-sep { background: var(--borda); }

/* O tamanho da letra e UM instrumento com tres posicoes, nao tres botoes
   soltos: uma peca so, com filetes dividindo por dentro. */
.escala-fonte {
  display: inline-flex; align-items: stretch; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--lateral-texto) 30%, transparent); border-radius: 6px;
}
/* Em px, como a largura da lateral: medidos em rem eles cresciam com o A+ e
   eram cortados pela barra — o "A" que volta ao normal sumia (achado da
   revisao, 06/11/2026). */
.escala-fonte button {
  border: 0; border-left: 1px solid color-mix(in srgb, var(--lateral-texto) 30%, transparent);
  background: none; color: var(--lateral-texto); font-family: inherit;
  width: 28px; height: 26px; font-size: 12px; cursor: pointer;
}
.escala-fonte button:first-child { border-left: 0; }
.escala-fonte button:hover { background: rgb(255 255 255 / .08); color: var(--lateral-tinta); }
.escala-fonte button:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }
/* Na lateral do modelo (07/11/2026) as tres posicoes sao tres teclinhas
   separadas, cada uma com o seu contorno. */
.lateral .escala-fonte { border: 0; gap: 4px; overflow: visible; }
.lateral .escala-fonte button {
  width: 26px; height: 24px; border: 1px solid rgb(255 255 255 / .28); border-radius: 4px;
  color: var(--lateral-tinta); font-size: 11.5px; font-weight: 500;
}
.lateral .escala-fonte button:first-child { border-left: 1px solid rgb(255 255 255 / .28); }
.lateral .escala-fonte button:focus-visible { outline-color: var(--lateral-foco); }

/* Abaixo de 900px a barra recolhe para os icones. O sistema e usado no
   computador; aqui a regra e so nao quebrar. */
@media (max-width: 900px) {
  :root { --largura-lateral: 64px; }
  /* overflow visivel: o menu do perfil (Meu perfil, Sair) sai para fora da
     barra estreita em vez de ser cortado por ela. */
  .lateral { padding: 16px 8px; overflow: visible; }
  .lateral .perfil-menu { min-width: 12.5rem; }
  .lateral-nomes, .lateral .navegacao a span, .lateral .perfil-texto, .lateral .perfil-seta,
  .lateral .escala-fonte { display: none; }
  /* Recolhida, o escudo fica sozinho no topo e a caixinha da igreja vira o
     simbolo pequeno no pe. */
  .lateral-igreja { display: none; }
  .lateral-versao { display: none; }
  .lateral-igreja-simbolo { display: block; }
  .lateral::before { background-size: 44px auto; }
  .lateral-ferramentas > #troca-de-aparencia:has(+ .escala-fonte) { padding-right: 0; border-right: 0; }
  .lateral-marca { justify-content: center; padding: 0 0 16px; }
  .lateral .navegacao a { justify-content: center; padding: 10px 0; }
  .lateral-ferramentas { flex-direction: column; }
  .lateral .troca-rapida { flex-direction: column; }
}

/* ---------- Os destinos, na barra lateral ----------
   Um por linha: icone e palavra. O atual ganha o fundo mais claro e o icone
   cheio, na cor de destaque. O fundo e um ::after com nome de transicao: na
   troca de tela ele DESLIZA do destino de la para o de ca. */
.navegacao { display: flex; flex-direction: column; gap: 2px; }
.navegacao a {
  position: relative; isolation: isolate;
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px; border-radius: 8px;
  color: var(--lateral-texto); text-decoration: none; font-size: .875rem; font-weight: 500;
}
.navegacao-icone { width: 18px; height: 18px; flex: none; }
.navegacao a::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 8px;
}
.navegacao a:hover { color: var(--lateral-tinta); }
.navegacao a:hover::after { background: rgb(255 255 255 / .05); }
.navegacao a:focus-visible { outline: 2px solid var(--lateral-foco, var(--destaque)); outline-offset: 2px; }
.navegacao a.navegacao-atual { color: var(--lateral-tinta); font-weight: 600; }
.navegacao a.navegacao-atual .navegacao-icone { color: var(--lateral-tinta); }
/* No modelo do dono (07/11/2026) cada destino de passagem leva a setinha a
   direita, e o atual — a faixa vermelha — nao. A seta mora no fundo da
   palavra, e nao num elemento a mais: o rotulo continua sendo a ultima coisa
   do link (testes/cabecalho.test.js). */
.lateral .navegacao a { padding: 10px 10px; gap: 14px; }
.lateral .navegacao a span {
  flex: 1; min-width: 0; padding-right: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 6 6 6-6 6' fill='none' stroke='%23C3CBD6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center / 14px no-repeat;
}
.lateral .navegacao a.navegacao-atual span { background: none; }
.lateral .navegacao a.navegacao-atual::after { box-shadow: 0 2px 8px -2px rgb(0 0 0 / .45); }
.navegacao a.navegacao-atual .navegacao-icone .cheio { fill: currentColor; }
.navegacao a.navegacao-atual::after {
  background: var(--lateral-ativo);
  view-transition-name: destino-atual;
}

/* ---------- Componentes comuns (tela) ----------
   O que muda so na TELA mora aqui, num @media screen: a mesma .tabela sai no
   papel dos relatorios, e o papel nao muda.

   A pagina: mais larga (a lateral ja tirou 232px), com respiro.
   A tabela: cartao com borda e cantos de 12px, sem sombra; so linhas
   horizontais; cabecalho em caixa normal, na voz de apoio, sobre a
   superficie 2 — a caixa alta gritava "planilha".
   O seletor segmentado: varias opcoes de UMA escolha (Ativos/Inativos/Todos),
   uma pastilha so, com o escolhido em relevo. */
.segmentado {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 8px;
}
.segmentado > button {
  border: 0; background: none; color: var(--texto-suave); cursor: pointer;
  font-family: inherit; font-size: .85rem; font-weight: 500;
  padding: .3rem .8rem; border-radius: 6px;
}
.segmentado > button:hover { color: var(--texto); }
.segmentado > [aria-pressed="true"] {
  background: var(--papel); color: var(--texto); font-weight: 600;
  box-shadow: 0 1px 2px rgb(0 0 0 / .12);
}
.segmentado > button:focus-visible { outline: 2px solid var(--destaque); outline-offset: 1px; }

@media screen {
  main.conteudo { max-width: 1320px; padding: 0 2.25rem; }
  table.tabela {
    border: 1px solid var(--borda); border-radius: 12px; box-shadow: none;
    border-collapse: separate; border-spacing: 0;
  }
  .tabela thead th {
    background: var(--superficie-2); text-transform: none; letter-spacing: 0;
    font-weight: 500; color: var(--texto-suave);
  }
  .tabela tbody tr:last-child > td { border-bottom: 0; }
  table.tabela tbody tr:hover { background: var(--superficie-2); }
}

/* ---------- Cadastros (tela) ----------
   A lista de pessoas no desenho novo (redesenho, 06/11/2026): o titulo com a
   contagem, a busca e o "Novo cadastro" numa linha; os filtros logo abaixo; a
   pessoa em primeiro lugar na tabela (foto menor, nome de guerra em negrito,
   nome completo embaixo); a situacao por extenso numa pastilha discreta; os
   funis dos cabecalhos so aparecem quando servem (ponteiro, foco ou filtro
   ligado). So tela: Cadastros nao tem folha impressa. */
@media screen {
  .cadastros-topo {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem;
    max-width: none; margin: 1.6rem 0 1.1rem;
  }
  .cadastros-titulo { margin-right: auto; }
  .cadastros-titulo .titulo-da-pagina { margin: 0; }
  .cadastros-titulo .resumo-contagem { margin: .25rem 0 0; color: var(--texto-suave); }
  .cadastros-topo .barra-busca { flex: 0 1 20rem; }
  .cadastros-topo .botao-cadastro-novo { margin-left: 0; }
  .cadastros .filtros { max-width: none; margin: 0 0 1rem; align-items: center; gap: .5rem; }

  .filtro-menu .pontos { display: inline-flex; gap: 3px; }
  .filtro-menu .pontos .ponto { width: .45rem; height: .45rem; }
  .filtro-menu .seta { color: var(--texto-suave); font-size: .7em; }
  .filtro-menu.ativo { background: var(--destaque-claro); border-color: transparent; font-weight: 600; }

  #lista .tabela td.foto .avatar { width: 38px; height: 38px; font-size: .8rem; }
  #lista .tabela td.nome .nome-curto { display: block; font-weight: 600; }
  #lista .tabela td.nome .nome-completo {
    display: block; max-width: 15rem; margin-top: .05rem;
    font-size: .78rem; color: var(--texto-suave);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #lista .tabela .tarja.editavel {
    margin: 0; padding: .18rem .6rem .18rem .5rem; gap: .4rem;
    border: 1px solid var(--borda); border-radius: 999px; background: var(--superficie-2);
    color: var(--texto); font-weight: 500; font-size: .8rem;
  }
  #lista .tabela .tarja.editavel::before { width: .45rem; height: .45rem; border-radius: 50%; }
  #lista .tabela th .filtrar:not(.filtrada) { opacity: 0; transition: opacity .12s; }
  #lista .tabela th:hover .filtrar,
  #lista .tabela th .filtrar:focus-visible,
  #lista .tabela th .filtrar[aria-expanded="true"] { opacity: 1; }
}

/* ---------- Painel (tela) ----------
   O desenho do prototipo aprovado (redesenho, 06/11/2026), sem mexer no HTML
   da caixa do resumo: ela vira "display: contents", e o recorte, os totais e
   a composicao passam a ser pecas da grade da pagina — a abertura com a
   saudacao e o recorte na mesma linha, o mosaico, os cinco numeros como cinco
   cartoes, a composicao num cartao e os quadros em tres colunas. */
@media screen {
  #painel {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "abertura topo"
      "parede parede"
      "aviso aviso"
      "totais totais"
      "composicao composicao"
      "quadros quadros"
      "escondidos escondidos"
      "ordem ordem";
    column-gap: 1rem; row-gap: .9rem;
  }
  #painel > .painel-abertura { grid-area: abertura; align-self: end; }
  #painel > .painel-abertura .titulo-da-pagina { margin: 1.6rem 0 0; }
  #painel .painel-data { margin: .2rem 0 0; color: var(--texto-suave); }
  #painel > #parede { grid-area: parede; border-radius: 12px; overflow: hidden; }
  #painel > .aviso-painel { grid-area: aviso; }
  #painel > .resumo { display: contents; }
  #painel .resumo-topo { grid-area: topo; align-self: end; padding: 0; justify-content: flex-end; }
  #painel .totais {
    grid-area: totais; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem;
    background: none; border: 0; padding: 0;
  }
  #painel .totais .total {
    display: flex; flex-direction: column; gap: .1rem; padding: 1rem 1.1rem;
    background: var(--papel); border: 1px solid var(--borda); border-radius: 12px;
    color: var(--texto); text-decoration: none;
  }
  #painel .totais a.total:hover { border-color: var(--texto-suave); }
  #painel .totais .total-rotulo { order: -1; font-size: .8rem; font-weight: 500; color: var(--texto-suave); }
  #painel .totais .total-numero {
    font-family: var(--letra-titulo); font-size: 1.9rem; font-weight: 650; letter-spacing: -.03em;
    color: var(--texto); line-height: 1.15;
  }
  #painel .totais .total-contexto { font-size: .75rem; color: var(--texto-suave); }
  #painel .composicao {
    grid-area: composicao; background: var(--papel); border: 1px solid var(--borda); border-radius: 12px;
  }
  #painel > .quadros { grid-area: quadros; }
  #painel > .escondidos { grid-area: escondidos; }
  #painel > .aviso-ordem { grid-area: ordem; }
  #painel .quadro {
    background: var(--papel); border: 1px solid var(--borda); border-radius: 12px; box-shadow: none;
  }
}
@media screen and (min-width: 1100px) {
  #painel .quadros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media screen and (max-width: 900px) {
  #painel { grid-template-columns: 1fr; grid-template-areas: "abertura" "topo" "parede" "aviso" "totais" "composicao" "quadros" "escondidos" "ordem"; }
  #painel .totais { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* O cabecalho da tela de entrar. Ela nao tem faixa — e um cartao no meio da
   tela —, mas tem o MESMO bloco de identidade (marca, nome do aplicativo,
   nome da igreja), e agora fecha com a mesma regua dupla. Uma tela de entrar
   que assina diferente da tela que vem depois dela parece outro sistema.
   A regua e centrada com o bloco porque aqui o alinhamento e central: e
   literalmente uma pagina de rosto. */
.entrada-marca {
  background:
    linear-gradient(var(--filete-marca), var(--filete-marca)) 0 100% / 100% 3px no-repeat,
    linear-gradient(var(--cabecalho-filete), var(--cabecalho-filete))
      0 calc(100% - 5px) / 100% 1px no-repeat;
  padding-bottom: 1.1rem;
  margin-bottom: 1.5rem;
}

/* ---------- Filtros ---------- */

.filtros { max-width: 1200px; margin: .75rem auto; display: flex; flex-wrap: wrap; gap: .4rem; }
.filtro-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid var(--borda); background: var(--papel); color: var(--texto);
  border-radius: 8px; padding: .32rem .75rem; cursor: pointer;
  font-family: inherit; font-size: .85rem; font-weight: 500; user-select: none;
}
.filtro-chip:hover { border-color: var(--texto-suave); }
.filtro-chip[aria-pressed="true"] {
  background: var(--destaque-claro); border-color: transparent; color: var(--texto); font-weight: 600;
}
/* O ponto usa --cor-marca (a cor exata da spec), nao currentColor: no
   escuro o texto da sigla clareia, mas o ponto continua com a cor da
   marcacao — igual a tarja abaixo. */
.filtro-chip .ponto { width: .6rem; height: .6rem; border-radius: 50%; background: var(--cor-marca, currentColor); }

.filtro-mes, .filtro-oficio, .ordenar-celular {
  border: 1px solid var(--borda); background: var(--papel); color: var(--texto);
  border-radius: 8px; padding: .32rem 1.6rem .32rem .75rem; cursor: pointer;
  font-size: .85rem; font-family: inherit;
}
.filtro-mes.ativo, .filtro-oficio.ativo { border-color: currentColor; font-weight: 600; }

/* So no celular: no desktop quem ordena e o cabecalho da tabela, e ter os
   dois controles ao mesmo tempo seria oferecer duas maneiras de fazer a
   mesma coisa na mesma tela. */
.ordenar-celular { display: none; }

/* ---------- Busca ----------
   Fica logo ABAIXO dos filtros, e por isso esta secao fica logo abaixo da
   deles neste arquivo: as pastilhas de situacao e o campo de nome fazem a
   mesma coisa — reduzir a lista — e moravam um de cada lado da regua do
   cabecalho, como se fossem assuntos diferentes.

   Saindo do cabecalho, o campo troca de idioma junto: a moldura volta a ser
   --borda (a do resto da pagina) em vez de --cabecalho-filete, que so existe
   sobre a capa. O branco continua, e agora ele trabalha a favor — sobre a
   mesa escurecida, um campo --papel le como folha aberta em cima dela.

   Sem max-width nem margem automatica: dentro de .conteudo ele ja herda a
   medida de 1200px da pagina, e repeti-la aqui seria um numero em dois
   lugares para dizer a mesma coisa.

   Uma consequencia que vale ter escrita: dentro do cabecalho a busca era
   FIXA e acompanhava a rolagem da lista. Aqui ela rola junto. Numa lista
   longa, procurar um nome passa a pedir voltar ao topo. */
/* A linha da busca: campo, contagem e "Novo cadastro". O campo tem medida
   propria (e uma busca por nome, nao um texto longo) e o botao e empurrado
   para a ponta direita por margin-left:auto. No celular a busca ocupa a
   linha inteira e a contagem e o botao descem juntos para a de baixo. */
.barra-lista {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .6rem 1.1rem; margin: 0 0 .75rem;
}
.barra-busca { position: relative; flex: 0 1 27rem; min-width: min(100%, 16rem); }
.barra-busca input {
  width: 100%; min-height: 2.75rem; box-sizing: border-box;
  padding: .55rem .8rem .55rem 2.6rem; font-size: 1rem;
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--papel); color: var(--texto);
}
.barra-busca input:focus { outline: 2px solid var(--marca-verde); outline-offset: 1px; }
/* A lupa mora DENTRO do campo, no recuo que o padding-left abriu. Nao
   recebe clique: o toque em cima dela tem de cair no campo. */
.barra-busca .lupa {
  position: absolute; left: .85rem; top: 50%; translate: 0 -50%;
  width: 1.15rem; height: 1.15rem; pointer-events: none;
  fill: none; stroke: var(--texto-suave); stroke-width: 2; stroke-linecap: round;
}
.barra-lista .resumo-contagem { margin: 0; }

/* "Novo cadastro": a unica acao da linha, e por isso o unico bloco cheio
   dela. Vinho e nao verde: o verde ja e a cor do foco e das marcacoes de
   situacao na tabela logo abaixo, e um botao verde ali se confundiria com
   elas. --marca-tinta sobre --marca-vinho da 10,59 de contraste, e o vinho
   nao muda com o tema — o botao e o mesmo no claro e no escuro. */
.botao-cadastro-novo {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 2.5rem; box-sizing: border-box; padding: .5rem 1.1rem;
  border: 1px solid var(--destaque); border-radius: 8px;
  background: var(--destaque); color: var(--destaque-tinta);
  font-family: inherit; font-size: .9rem; font-weight: 600;
  cursor: pointer;
}
.botao-cadastro-novo:hover { background: color-mix(in srgb, var(--destaque) 88%, var(--texto)); }
.botao-cadastro-novo:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }
.botao-cadastro-novo svg {
  width: 1.1rem; height: 1.1rem; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round;
}
@media (max-width: 600px) {
  .barra-busca { flex-basis: 100%; }
}

/* Nao e um filtro, e a saida deles: peso visual distinto dos chips
   (sem fundo, sublinhado) e cores de tema — cor fixa some no escuro. */
.botao-limpar-filtros {
  /* Fica sobre a MESA, na barra de filtros, e nao dentro de folha nenhuma. */
  border: 1px solid transparent; background: none; color: var(--texto-suave);
  border-radius: 8px; padding: .3rem .7rem; cursor: pointer;
  font-size: .85rem; font-family: inherit; text-decoration: underline;
}
.botao-limpar-filtros:hover { border-color: var(--borda); text-decoration: none; }

/* ---------- Barra do relatorio ----------
   Tres grupos, nao sete controles em fila: a ESCOLHA do relatorio, os
   AJUSTES dela e as SAIDAS. Cada grupo tem a forma que ja quer dizer aquilo
   no resto do sistema — pastilha para escolher (como os chips de filtro e o
   seletor de mes da lista), retangulo de cantos --raio para agir (como o
   .botao). Antes era tudo .botao com a seta nativa do Windows, e a barra
   nao parecia parte desta aplicacao. */

.barra-relatorio {
  max-width: 1200px; margin: 1rem auto .75rem;
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
}

/* Qualquer lista suspensa da barra. O appearance:none e o comeco de tudo:
   sem ele o navegador desenha por cima a caixa cinza com o triangulo, e
   nenhuma borda ou raio daqui aparece. Com ele, o espaco da seta some
   junto — dai o padding direito folgado, que e onde a nossa entra. */
.seletor {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--borda); border-radius: 8px;
  background: var(--papel) var(--seta-lista) no-repeat right .75rem center / 12px 12px;
  color: var(--texto); font-family: inherit; font-size: .85rem;
  padding: .4rem 2.1rem .4rem .9rem; cursor: pointer;
}
.seletor:hover { border-color: var(--texto-suave); }

/* A escolha do relatorio e o assunto da tela: e a unica coisa aqui que
   manda no que aparece embaixo. Ganha corpo, peso e a seta no verde da
   marca — o unico ponto de cor da barra. */
.seletor-principal {
  font-size: 1rem; font-weight: 600;
  padding: .55rem 2.4rem .55rem 1.1rem;
  /* Numa variavel, porque a disciplina poe um segundo desenho (o icone da
     balanca, a esquerda) na mesma pastilha e precisa repetir a seta. */
  --seta-verde: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.75 4.5 6 7.75 9.25 4.5' fill='none' stroke='%230E8A3E' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-image: var(--seta-verde);
  background-position: right .95rem center;
}

/* A LISTA ABERTA do seletor de relatorio, pelo modelo do dono (24/09/2026):
   folha branca de cantos largos pendurada sob a pastilha, um item por
   linha, o escolhido numa barra de vinho com o texto claro — e a pastilha
   ganha a borda em vinho enquanto a lista esta aberta.

   E o <select> NATIVO, nao um componente proprio. `appearance: base-select`
   (Chrome 135+) deixa o CSS alcancar a lista (::picker) e as <option>, e
   tudo o mais continua do navegador: teclado, leitor de tela, o evento
   change que a tela ja ouve e os testes que leem as <option> do HTML. Quem
   nao suporta cai na lista do sistema, como sempre foi — por isso o
   @supports em volta.

   O ::picker-icon (a seta que o base-select desenha) some: a nossa seta
   verde continua sendo a imagem de fundo, a mesma dos outros seletores. */
@supports (appearance: base-select) {
  .seletor-principal, .seletor-principal::picker(select) { appearance: base-select; }
  .seletor-principal::picker-icon { display: none; }
  .seletor-principal:open { border-color: var(--marca-vinho); }
  .seletor-principal::picker(select) {
    margin-top: .35rem; padding: .45rem;
    min-width: anchor-size(width);
    border: 1px solid var(--borda); border-radius: 14px;
    background: var(--papel); color: var(--texto); box-shadow: var(--sombra);
  }
  .seletor-principal option {
    padding: .5rem .8rem; border-radius: 8px;
    font-size: 1rem; font-weight: 400; line-height: 1.3; cursor: pointer;
  }
  .seletor-principal option::checkmark { display: none; }
  .seletor-principal option:hover,
  .seletor-principal option:focus-visible { background: var(--realce); outline: none; }
  .seletor-principal option:checked { background: var(--marca-vinho); color: var(--marca-tinta); }
}

/* Age, mas pertence aos ajustes: mesma pastilha das listas ao lado, com o
   peso que separa "faz alguma coisa" de "escolhe alguma coisa". */
.botao-ajuste {
  border: 1px solid var(--borda); border-radius: 999px;
  background: var(--papel); color: var(--texto);
  font-family: inherit; font-size: .85rem; font-weight: 600;
  padding: .4rem 1rem; cursor: pointer;
}
.botao-ajuste:hover { border-color: var(--texto-suave); }

/* O trilho das saidas. Uma peca so, com filetes dividindo: as tres fazem a
   mesma coisa para destinos diferentes, e soltas cada uma parecia um
   assunto proprio. Encostado a direita no desktop, onde termina a leitura
   da barra — primeiro se escolhe, depois se ajusta, por fim se tira dali. */
.saidas-relatorio {
  margin-left: auto; display: flex; align-items: stretch;
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--papel); overflow: hidden;
}
.saida {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 0; border-left: 1px solid var(--borda); background: none;
  /* --texto, e nao --tinta-mesa: .saidas-relatorio (a regra acima) pinta
     var(--papel) por baixo, entao este trilho E folha, apesar de a barra em
     volta ser mesa. Foi medido nas duas telas. */
  color: var(--texto); font-family: inherit; font-size: .875rem;
  padding: .5rem .9rem; cursor: pointer; white-space: nowrap;
}
.saida:first-child { border-left: 0; }
/* Tinta do proprio texto em alfa baixo: o mesmo realce serve no claro e no
   escuro sem uma cor fixa para cada tema. */
.saida:hover { background: color-mix(in srgb, var(--texto) 7%, transparent); }
.saida-icone { width: 1rem; height: 1rem; flex: 0 0 auto; color: var(--texto-suave); }
.saida:hover .saida-icone { color: inherit; }
/* A marca do WhatsApp e cheia, nao de traco: no mesmo tamanho ela pesaria
   mais que as outras duas. */
.saida-icone-zap { width: .9rem; height: .9rem; }
/* O botao do WhatsApp tem o desenho dos outros — papel e borda — e so o ICONE
   sai verde, o mesmo tratamento do simbolo ao lado do telefone no cadastro
   (.marca-zap). Ate 30/09/2026 o botao era verde inteiro; o dono pediu o
   contorno, porque um bloco verde chamava mais que o Imprimir e o Salvar PDF.
   O hover repete a cor porque `.saida:hover .saida-icone` a devolveria a tinta
   do texto no meio do gesto. */
.saida:has(.saida-icone-zap) .saida-icone,
.saida:has(.saida-icone-zap):hover .saida-icone { color: var(--zap-escuro); }

/* O foco e o verde da marca, como o da busca. O anel preto que aparecia
   aqui era o do sistema, e vinha junto com a seta nativa. */
.seletor:focus-visible,
.botao-ajuste:focus-visible,
.saida:focus-visible {
  outline: 2px solid var(--marca-verde); outline-offset: 2px;
  border-radius: var(--raio);
}
.seletor:focus-visible, .botao-ajuste:focus-visible { border-radius: 999px; }

/* No celular o trilho ocupa a linha inteira e as tres saidas dividem o
   espaco em partes iguais. O destino sai do rotulo — sobram os verbos
   Imprimir, Exportar e Copiar — porque o icone ao lado ja diz para onde. */
@media screen and (max-width: 760px) {
  .barra-relatorio { align-items: stretch; }
  .seletor-principal { width: 100%; }
  .seletor, .botao-ajuste { min-height: 44px; }
  .saidas-relatorio { margin-left: 0; width: 100%; }
  .saida { flex: 1 1 0; justify-content: center; min-height: 44px; padding-inline: .4rem; }
  .saida-longo { display: none; }
}

/* ---------- Tarja de situacao ----------
   A cor nunca informa sozinha: a sigla sempre acompanha. */

.tarja {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 600; white-space: nowrap;
}
/* Mesma logica do .ponto acima: a barrinha e a cor da marcacao, fixa,
   nao a cor (clareada no escuro) usada para o texto da sigla. */
.tarja::before { content: ""; width: .3rem; height: 1.1em; border-radius: 2px; background: var(--cor-marca, currentColor); }

/* --cor-marca fica sempre com a cor exata da spec (nunca muda com o tema);
   color usa a variante "-texto" (igual a spec no claro, clareada no
   escuro) para o texto da sigla ficar legivel sobre o fundo escuro. */
.sit-M { color: var(--sit-M-texto); --cor-marca: var(--tom-M); }
.sit-CDNM { color: var(--sit-CDNM-texto); --cor-marca: var(--tom-CDNM); }
.sit-N { color: var(--sit-N-texto); --cor-marca: var(--tom-N); }
.sit-A { color: var(--sit-A-texto); --cor-marca: var(--tom-A); }
.sit-SD { color: var(--sit-SD-texto); --cor-marca: var(--tom-SD); }
.sit-DI { color: var(--sit-DI-texto); --cor-marca: var(--tom-DI); }
.sit-TR { color: var(--sit-TR-texto); --cor-marca: var(--tom-TR); }
.sit-E { color: var(--sit-E-texto); --cor-marca: var(--tom-E); }
.sit-FA { color: var(--sit-FA-texto); --cor-marca: var(--tom-FA); }

/* "sob disciplina" debaixo da tarja de Membro. A barrinha desta linha
   CONTINUA a da tarja, em roxo: sobe ate encostar na verde, e as duas leem
   como uma barra so, em dois tons — a pessoa e Membro, e um pedaco desse
   Membro esta sob disciplina. Mesma largura e mesmo vao da tarja editavel
   (.3rem), para as duas barras ficarem no mesmo prumo. Texto em peso normal:
   a sigla e o dado principal, esta linha so o qualifica. */
.tarja-disciplina {
  display: flex; align-items: center; gap: .3rem;
  font-size: .74rem; color: var(--sit-DI-texto); white-space: nowrap; line-height: 1.2;
}
.tarja-disciplina::before {
  content: ""; flex: none; width: .3rem; align-self: stretch;
  margin-top: -.42rem; border-radius: 0 0 2px 2px; background: var(--tom-DI);
}
/* No cartao do celular os dados correm numa linha so, separados por " · ":
   ali a marca segue na mesma linha da tarja, sem a emenda das barras. */
.cartao-dados .tarja-disciplina { display: inline-flex; margin-left: .45rem; }
.cartao-dados .tarja-disciplina::before { margin-top: 0; border-radius: 2px; height: 1.1em; align-self: center; }

/* Tarja e status viram botao de edicao rapida (Task 21): mesma aparencia,
   so ganham cursor e foco de elemento interativo. */
.tarja.editavel, .status-rapido.editavel {
  background: none; padding: .1rem .2rem; margin: -.1rem -.2rem; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: .3rem; border-radius: 4px;
}
.tarja.editavel { border: 0; }
.status-rapido.editavel {
  border: 0; color: inherit; font-size: .92rem;
}
/* rgba cinza, nao --fundo: dentro da tabela a linha inteira ja fica
   --fundo no :hover (regra acima), e o botao precisa de uma resposta
   propria, visivel tambem quando so ele (nao a linha) tem foco. */
.tarja.editavel:hover, .status-rapido.editavel:hover {
  background: rgba(127, 127, 127, .22);
}
.tarja.editavel:focus-visible, .status-rapido.editavel:focus-visible {
  outline: 2px solid var(--marca-verde); outline-offset: 2px; border-radius: 3px;
}
/* A setinha e so um sinal visual de "isto abre um menu" (o estado real vai
   por aria-haspopup/aria-expanded, ja no botao) — por isso --texto-suave,
   discreta, sem competir com a cor da situacao. Gira ao abrir: e a
   confirmacao, de graca, de que o clique funcionou. */
.editavel .seta {
  color: var(--texto-suave); font-size: .75em; transition: transform .15s ease;
}
.editavel[aria-expanded="true"] .seta { transform: rotate(180deg); }

/* ---------- Nome que abre a ficha ----------
   Nos relatorios o nome de quem esta no cadastro e um botao: abre a mesma
   ficha lateral da tela principal. Continua parecendo o nome e nada mais —
   sublinhar cento e onze nomes numa folha de lista geral seria trocar a
   leitura pela decoracao, e no papel nao ha clique nenhum para anunciar.
   O desenho e o da tarja editavel, de proposito: neste sistema "texto que
   responde ao clique" ja tem uma cara, e e esta — sem enfeite parado, fundo
   cinza ao passar o ponteiro, anel verde ao chegar pelo teclado. Duas coisas
   com a mesma funcao nao podem ter caras diferentes.
   display: inline (a tarja e inline-flex): nome comprido em coluna estreita
   tem de quebrar como texto quebra, nao esticar a celula como um bloco. */
.nome-membro {
  display: inline; border: 0; background: none; color: inherit;
  font: inherit; white-space: inherit; text-align: left; cursor: pointer;
  padding: 0 .25rem; margin: 0 -.25rem; border-radius: 4px;
}
.nome-membro:hover { background: rgba(127, 127, 127, .22); }
.nome-membro:focus-visible {
  outline: 2px solid var(--marca-verde); outline-offset: 1px;
}

/* ---------- A tarja de prova: a porta esta destrancada ----------
   Ambar, nao o vermelho da marca (exclusivo do cabecalho). Usa as
   variaveis de situacao "A"/Afastado como base de cor de aviso — nao tem
   relacao semantica com a situacao, e so a cor que ja existe no tema.

   O desenho anterior era a caixa de alerta de manual: quatro linhas de
   texto dentro de um retangulo contornado de ambar, flutuando no corpo da
   pagina. Tinha tres defeitos, e os tres vinham da mesma causa — ela estava
   dizendo coisas demais para gente demais.
     1. Metade do texto era para o DONO do sistema ("troque PORTAO_ABERTO
        para false em app/http/gate.js") e a tela inteira e da secretaria,
        que nao pode fazer nada com o nome de uma constante.
     2. O contorno completo de ambar pinta o PERIMETRO — e perimetro e a
        forma de "caixa de dialogo", nao de "estado da casa".
     3. Ela rolava para fora da tela. Um cadastro destrancado nao e um
        recado que se le uma vez: e uma condicao que vale enquanto a tela
        estiver aberta.
   A cura para os tres: a tarja de prova que a grafica cola na pagina de
   rosto antes de rodar a tiragem. Ela mora DENTRO da capa, acima da regua
   dupla, entao sai junto com o cabecalho na impressao e fica presa no topo
   junto com ele; a cor deixa de contornar e vira SELO chapado, do mesmo
   jeito que o carimbo de recorte assina a folha; e o conserto — a parte
   que so o dono entende — fica fechado atras do resumo, a um clique de
   quem for procura-lo. Sobra uma linha, que e o tanto que o assunto pede.

   Sem sombra e sem contorno de proposito: ela esta APOIADA na capa, nao
   levantada dela, e a capa ja tem a sua (--sombra-cabecalho). O que a
   separa da pedra e so o papel mais claro, como uma etiqueta colada. */
.aviso-protecao {
  width: fit-content; max-width: min(1200px, 100%);
  margin: .8rem 0 -.2rem max(0px, calc((100% - 1200px) / 2));
  background: var(--aviso-fundo); border-radius: var(--raio);
  font-size: var(--t-apoio); color: var(--sit-A-texto);
}
.aviso-protecao[hidden] { display: none; }

/* O resumo E a tarja: uma linha so. O marcador triangular do navegador sai
   (list-style + o seletor antigo do WebKit, que ainda responde no Safari) —
   no lugar dele vai a propria palavra "Como resolver", que diz o que o
   triangulo nunca disse. */
.aviso-protecao > summary {
  display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .85rem;
  padding: .32rem .75rem .32rem .4rem;
  list-style: none; cursor: pointer;
}
.aviso-protecao > summary::-webkit-details-marker { display: none; }
.aviso-protecao > summary:focus-visible {
  outline: 2px solid var(--tom-A); outline-offset: 2px;
  border-radius: var(--raio);
}

/* O SELO. Ambar chapado, e a unica coisa com peso na tarja — e o carimbo,
   e carimbo e tinta cheia, nao contorno. Caixa baixa, nao versalete: nesta
   tela nada mais e caixa alta, e um rotulo gritando seria a unica voz
   levantada do sistema.
   A tinta e uma so nos dois temas, porque o fundo do selo tambem e (as
   nove cores da spec nao mudam com o tema). #FFF9F0 e nao --marca-tinta:
   medido sobre #9A6400 o rosa da marca da 4,42 e este branco quente da
   4,81, e texto pequeno em negrito precisa dos 4,5. */
.aviso-selo {
  flex: 0 0 auto; background: var(--tom-A); color: #FFF9F0;
  font-size: .78rem; font-weight: 600; line-height: 1.5;
  padding: .06rem .5rem; border-radius: 4px; white-space: nowrap;
}

/* A frase e o unico texto obrigatorio da tarja, entao e ela que sobra
   quando a largura aperta: min-width 0 para poder quebrar, e o "Como
   resolver" desce para a linha de baixo por conta do flex-wrap acima. */
.aviso-frase { flex: 1 1 16rem; min-width: 0; line-height: 1.35; }

/* Nao e botao nem link: e o rotulo do proprio <summary>, que ja e clicavel
   por inteiro. Discreto (--texto-suave) porque quem precisa dele sabe que
   precisa; a seta segue o idioma que .seta ja usa nas tarjas editaveis —
   mesma funcao, mesma cara, e gira ao abrir.
   Sem margem propria: a distancia dele para a frase e o column-gap do
   summary, e so. Uma margem a mais resolveria o desktop e desalinharia o
   celular, onde ele cai para a linha de baixo e passa a comecar na margem. */
.aviso-abrir {
  flex: 0 0 auto;
  color: var(--texto-suave); font-size: .8rem;
  display: inline-flex; align-items: center; gap: .3rem;
}
.aviso-abrir::after {
  content: "⌄"; font-size: .9em; line-height: 1;
  transform: translateY(-.15em); transition: transform .15s ease;
}
.aviso-protecao[open] .aviso-abrir::after { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .aviso-abrir::after { transition: none; }
}

/* O conserto. Recuado ate embaixo do selo e separado por um filete do
   proprio ambar em alfa baixo — o mesmo gesto da regua dupla la em cima,
   na escala desta tarja. */
.aviso-conserto {
  margin: 0; padding: .5rem .75rem .55rem .9rem;
  border-top: 1px solid rgba(154, 100, 0, .3);
  color: var(--texto); line-height: 1.45;
}
.aviso-conserto code {
  background: rgba(127, 127, 127, .18); padding: .05rem .3rem; border-radius: 4px;
}

/* ---------- Conteudo ---------- */

.conteudo { max-width: 1200px; margin: 0 auto 5rem; padding: 0 1rem; }
.barra-resumo { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .6rem; }
/* "46 de 118 pessoas" fica sobre a mesa, acima da tabela — tinta da mesa. */
.resumo-contagem { color: var(--tinta-mesa-suave); font-size: var(--t-apoio); margin: .5rem 0; }

/* Texto que so o leitor de tela recebe: o numero de prioridade da coluna,
   que na tela e um circulo pequeno demais para virar palavra. Nao usa
   display:none nem visibility:hidden — os dois tirariam o texto do leitor
   junto com a tela. */
.so-leitor {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* O retrato e o que faz a secretaria reconhecer a pessoa antes de ler o
   nome, entao vale o espaco: 56px em vez de 40. As iniciais de quem ainda
   nao tem foto crescem junto, senao ficariam perdidas no meio do circulo. */
.avatar {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  background: var(--tom-N); color: #fff; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem; font-weight: 700;
}

/* Desktop: tabela */
.tabela { width: 100%; border-collapse: collapse; background: var(--papel);
          border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra);
          font-variant-numeric: tabular-nums; }
/* A lista de cadastros tem colunas de largura fixa que somam ~1240px. Entre a
   largura do celular (761px, onde ela vira cartoes) e essa soma, a TABELA
   estourava a pagina: a rolagem lateral arrastava tudo menos a capa, que e
   fixa — e o cabecalho parecia desencaixado do resto. Agora so a lista rola,
   dentro da propria caixa, e a pagina e a capa ficam paradas. */
@media screen and (min-width: 761px) {
  #lista { overflow-x: auto; padding-bottom: .5rem; }
  /* Os textos so-leitor (position: absolute) moram nas celulas e nos botoes de
     filtro: sem um pai posicionado eles escapam da caixa de rolagem e voltam a esticar a pagina. */
  .tabela td, .tabela th .filtrar { position: relative; }
}
.tabela th, .tabela td { padding: .6rem .7rem; text-align: left; border-bottom: 1px solid var(--borda); overflow-wrap: break-word; }
/* Um dos DOIS versais do sistema (o outro e .combo-grupo, o cabecalho de
   grupo da lista suspensa). Aqui a caixa alta tem funcao: ela separa a
   fileira que NOMEIA as colunas das centenas de fileiras que sao o conteudo
   delas, e faz isso sem gastar cor nem regua. O corpo desceu de .8 para
   --t-nota e o peso subiu para 600 — versal em peso normal se dilui, e o par
   corpo-menor/peso-maior devolve a presenca que o corpo perdeu. */
.tabela th { background: var(--realce); font-size: var(--t-nota);
             text-transform: uppercase; letter-spacing: var(--versal);
             font-weight: 600; color: var(--texto-suave); }
/* A coluna do retrato respira menos que as de texto: o recuo de .7rem em
   volta de um circulo de 56px empurrava a foto para longe da borda e
   desperdicava largura. A celula fica com a largura do proprio retrato, e o
   `width: 1px` faz a tabela dar a ela o minimo — as demais colunas ficam
   com a sobra. line-height: 0 tira o espaco extra que a linha de texto
   reservava embaixo da imagem. */
.tabela td.foto {
  width: 1px; padding: .3rem .45rem; line-height: 0;
}
/* Mao so onde a linha inteira abre alguma coisa, que e a lista principal.
   Nos relatorios a linha nao e clicavel — quem abre a ficha ali e o nome, e
   ele tem a mao propria. A regra valia para toda .tabela e prometia um clique
   que nao existia em folha nenhuma de relatorio.
   O realce ao passar o ponteiro fica em todas: numa tabela larga ele e o que
   segura o olho na mesma linha de uma ponta a outra, e isso vale tanto para
   ler quanto para clicar. */
.tabela tbody tr[data-id] { cursor: pointer; }
.tabela tbody tr:hover { background: var(--realce); }

/* Coluna estreita: "12 anos e 3 meses" nao pode quebrar no meio. */
.tabela td.membresia { white-space: nowrap; }
/* "25/11" tambem nao pode quebrar em duas linhas, e fica centralizada —
   pedido do usuario — sem afetar as demais colunas, que continuam a esquerda. */
.tabela td.aniversario, .tabela th.aniversario { white-space: nowrap; text-align: center; }
/* Membresia encerrada se distingue sem depender so de cor — o title
   carrega o periodo fechado ("de .. a .."). */
.membresia-encerrada { color: var(--texto-suave); }

/* ---------- Ordenar pelo cabecalho ----------
   A celula inteira e o alvo do clique: o botao toma o lugar do padding do
   <th> em vez de virar um alvo pequeno ao lado do rotulo. Herda toda a
   tipografia do cabecalho (caixa alta, .8rem, --texto-suave) para a faixa
   continuar sendo um cabecalho, e nao uma fileira de botoes. text-transform
   e letter-spacing precisam ser repetidos: o Safari zera os dois em
   controles de formulario. */
/* O padding sai do <th> e vai para dentro do rotulo, para o funil poder
   encostar na borda da coluna. Vale tanto para a coluna que ordena quanto
   para Telefone, que so filtra. */
.tabela th.ordenavel, .tabela th.com-filtro { padding: 0; }
.tabela th .th-rotulo { flex: 1 1 auto; min-width: 0; padding: .6rem .7rem; }
/* Dois alvos na mesma celula: o rotulo, que ordena, e o funil, que abre a
   lista de valores. O rotulo cresce e o funil fica com a largura dele —
   assim o funil encosta na borda direita da coluna, onde a planilha
   ensinou todo mundo a procurar. */
.th-conteudo { display: flex; align-items: stretch; width: 100%; }
.tabela th.ordenavel .ordenar {
  display: flex; align-items: center; gap: .3rem;
  flex: 1 1 auto; min-width: 0; padding: .6rem .7rem;
  border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; text-align: inherit;
  text-transform: inherit; letter-spacing: inherit;
}
.tabela th.aniversario.ordenavel .ordenar { justify-content: center; }
.tabela th[aria-sort="none"] .ordenar:hover { background: rgba(127, 127, 127, .14); }
.tabela th.ordenavel .ordenar:focus-visible {
  outline: 2px solid var(--marca-verde); outline-offset: -2px;
}

/* A seta guarda o lugar dela mesmo invisivel (opacity, nao display): sem
   isso o rotulo daria um pulo lateral ao virar a coluna ordenada. */
.tabela th .seta-ordem { font-size: .7em; opacity: 0; }
.tabela th[aria-sort="none"] .ordenar:hover .seta-ordem,
.tabela th[aria-sort="none"] .ordenar:focus-visible .seta-ordem { opacity: .5; }

/* A coluna em uso: rotulo em contraste cheio e um friso verde no lugar da
   linha cinza de baixo — a mesma cor que ja marca foco e acao no resto do
   cadastro. box-shadow inset, nao border, para a celula nao ganhar 2px de
   altura e desalinhar da vizinha. A seta acompanha, entao a coluna se
   anuncia por posicao, peso e cor, nunca so por cor. */
.tabela th[aria-sort]:not([aria-sort="none"]) {
  color: var(--texto); font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--marca-verde);
}
.tabela th[aria-sort]:not([aria-sort="none"]) .seta-ordem {
  opacity: 1; color: var(--marca-verde);
}

/* Ordem em varios niveis --------------------------------------------------
   Com duas ou tres colunas mandando ao mesmo tempo, a seta sozinha nao diz
   quem vem antes de quem. Tres sinais respondem isso junto, cada um para um
   jeito de olhar: a FAIXA vertical mostra de relance quais colunas estao em
   jogo e qual pesa mais (mais escura = mais forte); o NUMERO da a ordem
   exata; e a frase acima da tabela diz o mesmo por extenso, para quem nao
   quer decifrar nada. Nenhum deles depende so de cor. */

/* A faixa vem do <colgroup>: <td> nao tem fundo proprio, entao a cor do
   <col> aparece atras da linha inteira. O :hover da linha pinta por cima
   (var(--papel) opaco nao, mas --fundo sim) e isso e proposital — a linha
   sob o mouse continua sendo o destaque mais forte da tabela. */
.tabela col.nivel-1 { background: var(--ordem-1); }
.tabela col.nivel-2 { background: var(--ordem-2); }
.tabela col.nivel-3 { background: var(--ordem-3); }

/* O friso do cabecalho nao acompanha o degrade: 2px de verde em tres alfas
   ficam indistinguiveis de perto, e o friso ja tem um trabalho — dizer que
   a coluna esta na ordem. Quem pesa mais e a faixa que responde, porque
   tem area para isso. A prioridade exata quem da e o numero. */

/* O numero da prioridade: 1, 2, 3. Circulo pequeno em vez de sobrescrito
   solto, para nao ser confundido com nota de rodape. */
.posicao-ordem {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.15em; height: 1.15em; padding: 0 .15em;
  border-radius: 999px; background: var(--marca-verde); color: #fff;
  font-size: .68em; font-weight: 700; letter-spacing: 0; line-height: 1;
}

/* Filtro por coluna ------------------------------------------------------
   O funil e deliberadamente NEUTRO, nunca verde: verde nesta tabela quer
   dizer ordenacao (o friso, a seta, o numero de prioridade), e uma coluna
   pode estar filtrada sem estar ordenada. Duas ferramentas, duas linguagens
   — e o que muda de estado e a forma do funil (vazado/cheio), nao so a cor,
   entao o aviso sobrevive ao preto-e-branco. */
.filtrar {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto; padding: 0 .5rem;
  border: 0; background: none; cursor: pointer; color: inherit;
}
.filtrar .funil { fill: none; stroke: currentColor; stroke-width: 1.3; opacity: .45; }
.filtrar:hover { background: rgba(127, 127, 127, .14); }
.filtrar:hover .funil, .filtrar:focus-visible .funil { opacity: .9; }
.filtrar:focus-visible { outline: 2px solid var(--marca-verde); outline-offset: -2px; }
/* Coluna com valor desmarcado: funil cheio, na cor cheia do texto. */
.filtrar.filtrada .funil { fill: currentColor; stroke: currentColor; opacity: 1; }
.filtrar.filtrada { color: var(--texto); }

.menu-filtro {
  position: fixed; z-index: 60; width: 17rem; max-width: calc(100vw - 1rem);
  background: var(--papel); border-radius: var(--raio); box-shadow: var(--sombra);
  border: 1px solid var(--borda); padding: .4rem;
}
.menu-filtro-topo { display: flex; gap: .3rem; margin-bottom: .3rem; }
.menu-filtro-acao {
  flex: 1 1 0; padding: .35rem .5rem; min-height: 36px;
  border: 1px solid var(--borda); border-radius: 6px; background: var(--papel);
  color: var(--texto); font: inherit; font-size: .82rem; cursor: pointer;
}
.menu-filtro-acao:hover { background: var(--realce); }
.menu-filtro-busca {
  width: 100%; padding: .4rem .5rem; margin-bottom: .3rem;
  border: 1px solid var(--borda); border-radius: 6px;
  background: var(--papel); color: var(--texto); font: inherit; font-size: .85rem;
}
/* A lista rola dentro do menu: a coluna Nome traz uma caixinha por pessoa,
   e sem isto o menu passaria da altura da tela. */
.menu-filtro-lista { max-height: 15rem; overflow-y: auto; }
.menu-filtro-item {
  display: flex; align-items: center; gap: .5rem;
  padding: .3rem .4rem; min-height: 36px; border-radius: 6px;
  font-size: .88rem; cursor: pointer;
}
.menu-filtro-item:hover { background: var(--realce); }
/* Categoria que existe mas hoje nao tem ninguem. Continua clicavel — nao
   usa opacity no bloco todo, que apagaria tambem a caixinha de selecao e a
   faria parecer desabilitada. So o texto recua. */
.menu-filtro-item.vazia .menu-filtro-rotulo,
.menu-filtro-item.vazia .menu-filtro-conta { color: var(--texto-suave); }
.menu-filtro-item input { flex: 0 0 auto; width: 1rem; height: 1rem; cursor: pointer; }
.menu-filtro-item input:focus-visible { outline: 2px solid var(--marca-verde); outline-offset: 2px; }
.menu-filtro-rotulo { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
/* Quantas pessoas ha naquela gaveta. Alinhada a direita e discreta: ajuda a
   decidir o que desmarcar sem competir com o nome do valor. */
.menu-filtro-conta {
  flex: 0 0 auto; color: var(--texto-suave); font-size: .8em;
  font-variant-numeric: tabular-nums;
}
.menu-filtro-vazio {
  margin: .4rem; color: var(--texto-suave); font-size: var(--t-apoio); text-align: center;
}
.menu-filtro-vazio[hidden] { display: none; }

@media (max-width: 760px) {
  .menu-filtro-item { min-height: 44px; }
  .menu-filtro-acao { min-height: 44px; }
}

/* Celular: cartoes */
.cartoes { display: none; flex-direction: column; gap: .5rem; }
.cartao {
  background: var(--papel); border-radius: var(--raio); padding: .7rem;
  display: flex; gap: .7rem; align-items: center; box-shadow: var(--sombra); cursor: pointer;
}
.cartao > div { min-width: 0; flex: 1 1 auto; }
.cartao-nome { font-weight: 600; overflow-wrap: break-word; }
.cartao-dados { font-size: var(--t-apoio); color: var(--texto-suave); overflow-wrap: break-word; }

/* Dois telefones quebram em duas linhas (<br>), mas um numero sozinho
   nunca quebra no meio (Task 23) — e o simbolo do WhatsApp, que vem logo
   depois, nao se separa dele. */
.telefone-num { white-space: nowrap; }

/* O simbolo do WhatsApp ao lado do numero. Verde da propria marca, que e
   como as pessoas reconhecem o icone de relance; em cor fixa, e nao numa
   variavel de tema, justamente por ser cor de marca e nao do cadastro. */
.marca-zap {
  display: inline-flex; align-items: center; vertical-align: -.12em;
  color: #25D366; text-decoration: none;
}
.marca-zap:hover, .marca-zap:focus-visible { color: #128C7E; }
/* Acompanha o corpo do texto em volta: fica menor na tabela da lista e
   maior na ficha, sem uma regra para cada lugar. */
.icone-zap { width: 1.05em; height: 1.05em; display: block; }

/* A caixinha "É WhatsApp" do formulario mora colada ao campo do numero,
   entao nao carrega o espaco de cima que um campo novo teria. */
.marca-zap-formulario { margin-top: .3rem; }

/* "screen and" NAO e enfeite: a folha A4 com as margens de @page tem 186mm
   uteis (~703px), menos que 760px, entao um "max-width" sem midia tambem vale
   no papel. Sem "screen" aqui, o relatorio impresso escondia a tabela e
   procurava os cartoes — que so a lista tem —, e saia com cabecalho, subtitulo
   e rodape corretos e nada no meio. No papel a tabela e a forma certa: e para
   ela que impressao.css repete o <thead> a cada pagina. */
@media screen and (max-width: 760px) {
  .tabela { display: none; }
  .cartoes { display: flex; }
  /* O titulo encolhe no celular, mas nao ao ponto de virar legenda: a
     serifada precisa de corpo para desenhar. A marca acompanha, para o
     conjunto nao ficar cabecudo. */
  /* No celular a marca desce um degrau da escala, nao um numero avulso:
     --t-folha para o titulo e --t-nota para o nome da igreja. */
  .cabecalho h1 { font-size: var(--t-folha); }
  .cabecalho-igreja { font-size: var(--t-nota); }
  /* No celular a fileira de acoes quebra em duas linhas (destinos numa,
     ferramentas na outra) e o cabecalho vira tres linhas de altura. Com o
     respiro do desktop ele comia um terco da tela antes da primeira pessoa
     da lista aparecer. O recuo encolhe; a regua e a tipografia nao mudam. */
  .cabecalho { padding: .7rem 1rem .8rem; }
  /* A marca NAO encolhe no celular: encolher significaria o navegador
     redimensionando de novo, que e exatamente o que causava o picotado.
     32x42 ao lado de um titulo de 1,1rem continua equilibrado. */
  .filtro-mes, .filtro-oficio { min-height: 44px; }
  .ordenar-celular { display: inline-block; min-height: 44px; }
  .botao-limpar-filtros { min-height: 44px; }
}

/* ---------- Botao flutuante ---------- */

.botao-novo {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 30;
  width: 3.4rem; height: 3.4rem; border-radius: 50%; border: none;
  background: var(--destaque); color: var(--destaque-tinta); font-size: 1.8rem; line-height: 1;
  cursor: pointer; box-shadow: var(--sombra);
}

.vazio { text-align: center; color: var(--texto-suave); padding: 3rem 1rem; }

/* ---------- Painel lateral (ficha e formulario) ---------- */

.fundo-escuro {
  position: fixed; inset: 0; background: rgba(0,0,0,.35);
  z-index: 40; opacity: 0; pointer-events: none; transition: opacity .18s;
}
.fundo-escuro[data-aberto="sim"] { opacity: 1; pointer-events: auto; }

.painel {
  position: fixed; top: 0; right: 0; height: 100%; width: min(460px, 100%);
  background: var(--papel); z-index: 50; overflow-y: auto;
  transform: translateX(100%); transition: transform .22s ease;
  box-shadow: -4px 0 22px rgba(0,0,0,.18);
}
.painel[data-aberto="sim"] { transform: translateX(0); }
.painel-topo {
  display: flex; align-items: center; gap: .6rem; padding: .9rem 1rem;
  border-bottom: 1px solid var(--borda); position: sticky; top: 0; background: var(--papel);
}
/* O titulo da folha e serifado, como o nome do aplicativo: as duas coisas
   sao titulos de documento. E quase sempre e literalmente isso — na ficha
   este <h2> e o NOME DA PESSOA, que e o titulo do registro que se esta
   lendo. Peso 700 e o unico corte da Bitter; a 18px ele assenta. */
.painel-topo h2 {
  margin: 0; flex: 1;
  font-family: var(--letra-titulo); font-weight: 700;
  font-size: var(--t-folha); line-height: 1.2;
}
.painel-corpo { padding: 1rem; }

.secao-ficha { margin-bottom: 1.4rem; }
/* SAIU a caixa alta. "Vinculo com a igreja" e um titulo, e titulo se le —
   em versal a .78rem ele era a coisa mais dificil de ler de uma ficha que a
   secretaria abre cinquenta vezes por dia, e a caixa alta nao lhe dava
   hierarquia nenhuma: quem da e a regua embaixo, que ja estava ali.
   Agora ele tem o corpo do texto (--t-secao) e se distingue pelo peso e pela
   regua, exatamente como .panorama-titulo do resumo — que sempre foi assim,
   e era a prova de que o versal aqui era sedimento e nao sistema. */
.secao-ficha h3 {
  font-size: var(--t-secao); font-weight: 600; letter-spacing: 0;
  color: var(--texto); margin: 0 0 .5rem; padding-bottom: .3rem;
  border-bottom: 1px solid var(--borda);
}
/* Topo da ficha: foto a esquerda, situacao e resumo a direita. Quebra numa
   coluna so quando nao couber, para o resumo nao virar uma tira de uma
   palavra por linha ao lado da foto. */
.topo-ficha {
  display: flex; gap: 1rem; align-items: flex-start;
  flex-wrap: wrap; margin-bottom: 1rem;
}
.topo-ficha-dados { flex: 1 1 12rem; min-width: 0; }

/* As cinco respostas que se procura antes de ler a ficha inteira. Grade de
   pares em vez de lista corrida: o rotulo pequeno por cima e o valor
   embaixo cabem em duas colunas estreitas ao lado da foto, e a leitura vai
   direto ao valor. */
.resumo-ficha {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: .1rem .8rem; margin: .6rem 0 0;
  padding-top: .5rem; border-top: 1px solid var(--borda);
}
/* Rotulo de campo, e nao de coluna: caixa normal. A diferenca com o <th> da
   tabela nao e de estilo, e de funcao — la o rotulo encabeca uma coluna de
   centenas de valores, aqui ele acompanha um valor so, colado nele. */
.resumo-ficha dt {
  font-size: var(--t-nota); color: var(--texto-suave); letter-spacing: 0;
}
.resumo-ficha dd { margin: 0 0 .35rem; font-size: var(--t-apoio); }

.campo-ficha { display: flex; gap: .6rem; padding: .28rem 0; font-size: var(--t-apoio); }
.campo-ficha dt { color: var(--texto-suave); min-width: 8.5rem; flex: 0 0 auto; }
.campo-ficha dd { margin: 0; }

.foto-ficha {
  width: 110px; height: 110px; border-radius: 12px; object-fit: cover;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 700; color: #fff;
}

/* ---------- O retrato ampliado (visor-foto.js) ----------
   Vale para os tres lugares onde aparece um rosto: a miniatura da lista, o
   retrato da ficha e a previa da tela de edicao. O retrato do cadastro e o
   unico ponto da tela em que a resposta nao esta escrita — e um rosto, e ou
   se reconhece a pessoa ou nao. Em 56px nao se reconhece.

   O que o visor mostra e a foto como uma copia sobre a mesa: a mesma folha
   (--papel) do resto da aplicacao servindo de moldura, com o nome embaixo.
   Nao e uma galeria de imagens — e um documento do cadastro visto de perto,
   e a moldura e o que diz isso. */
.foto-ampliavel { cursor: zoom-in; }
.foto-ampliavel:focus-visible { outline: 2px solid var(--marca-verde); outline-offset: 3px; }

/* Acima de tudo: painel (50), aviso flutuante (70), cartaz em tela cheia (80). */
.visor-foto {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; cursor: zoom-out;
  /* Mais fechado que o .fundo-escuro do painel (.35), onde a lista atras
     ainda e contexto util, e mais aberto que o quase-preto do cartaz (.88),
     que e uma pagina inteira. Aqui o assunto e um objeto pequeno, e a tela
     de onde ele saiu continua reconhecivel em volta. */
  background: rgba(0,0,0,.62);
  opacity: 0; pointer-events: none; transition: opacity .16s ease;
}
.visor-foto[data-aberto="sim"] { opacity: 1; pointer-events: auto; }

.visor-foto-quadro {
  margin: 0; padding: .7rem .7rem .55rem;
  background: var(--papel); border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  display: grid; gap: .55rem; justify-items: center;
  /* Dentro da moldura o cursor volta ao normal: ali o clique nao fecha. */
  cursor: default;
  /* O unico movimento da tela, e ele responde ao clique: a foto cresce de
     onde estava. Nada mais aqui se mexe sozinho. */
  transform: scale(.96); transition: transform .16s ease;
}
.visor-foto[data-aberto="sim"] .visor-foto-quadro { transform: none; }

/* A foto guardada tem 400px de lado (foto.js reduz antes de enviar). Passar
   disso nao amplia nada: so espalha os mesmos pixels e traz o borrao do JPEG
   junto. O teto e o tamanho real; as duas outras medidas cuidam da tela
   pequena. Sem largura fixa, para as fotos antigas importadas, que nem sempre
   sao quadradas, manterem a propria proporcao. */
.visor-foto-imagem {
  /* Sem raio: a foto e retangular, como sai da camera, e quem arredonda e a
     moldura em volta. Duas curvas concentricas so pediriam para ser comparadas. */
  display: block; width: auto; height: auto;
  max-width: min(400px, calc(100vw - 4.4rem));
  max-height: min(400px, calc(100vh - 9rem));
  /* O FILETE da foto. Os retratos do cadastro sao todos feitos contra a
     parede clara do salao, e sobre o papel branco da moldura o fundo da foto
     se dissolvia: nao havia como ver onde a imagem terminava — o rosto
     flutuava numa folha sem limite. Uma linha de 1px na cor de borda do
     sistema devolve a aresta. Nao e decoracao: e a informacao de que ali
     acaba a fotografia e comeca o papel. */
  border: 1px solid var(--borda);
}
/* A legenda da moldura. Guarda o nome e, quando a foto traz um resumo de
   vida, o verbete inteiro — por isso ela e uma grade, e nao um paragrafo. */
.visor-foto-verbete {
  display: grid; gap: .55rem; justify-items: center; text-align: center;
  max-width: min(400px, calc(100vw - 4.4rem));
}
.visor-foto-nome { margin: 0; font-size: var(--t-apoio); color: var(--texto-suave); }

/* Os caminhos que seguem do retrato, so onde a foto os trouxe (hoje, o
   mosaico do painel). Ficam DENTRO da moldura, e nao flutuando no escuro em
   volta: ali fora o clique fecha o visor, e um link que fecha a tela ao ser
   clicado seria uma armadilha.

   Contorno, e nao botao solido: a foto e o assunto da moldura, e um botao
   cheio embaixo dela disputaria a atencao com o rosto que a pessoa acabou de
   ampliar. Com DOIS botoes o peso dobraria, e a regra vale ainda mais. O
   verde e o mesmo que este sistema usa para "siga por aqui". */

/* A FILA DOS CAMINHOS. Dois irmaos ("Resumo" e "Editar"), e nao um principal
   com um secundario: reconhecido o rosto, ou se quer ler o cadastro ou
   corrigi-lo, e nenhum dos dois e mais "o" passo seguinte que o outro.
   Por isso os dois tem exatamente o mesmo desenho, e o que os separa e a
   palavra.

   `wrap` nao e zelo vazio: no A+ da escala de fonte, numa tela de 320px, os
   dois deixam de caber lado a lado — e ai empilham, cada um ocupando a linha
   inteira, em vez de o segundo sair pela borda da moldura. */
.visor-foto-acoes {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
  max-width: min(400px, calc(100vw - 4.4rem));
}

.visor-foto-ficha, .visor-foto-editar {
  font-size: .9rem; text-decoration: none; text-align: center;
  padding: .35rem .8rem; border-radius: var(--raio);
  border: 1px solid var(--marca-verde); color: var(--marca-verde);
  /* Com dois na fila, quem limita a largura e a fila (acima) — repetir o
     teto aqui faria cada botao medir sozinho os 400px inteiros. */
  max-width: 100%;
}
.visor-foto-ficha:hover, .visor-foto-editar:hover {
  background: var(--marca-verde); color: #fff;
}
.visor-foto-ficha:focus-visible, .visor-foto-editar:focus-visible {
  outline: 2px solid var(--marca-verde); outline-offset: 2px;
}

/* No DEDO os dois viram alvo de toque, e sao vizinhos: 28px de altura com
   meio centimetro entre eles e errar "Editar" quando se queria "Resumo". A
   regra so vale onde o ponteiro e grosso — no mouse a altura de leitura
   continua sendo a certa. */
@media (pointer: coarse) {
  .visor-foto-ficha, .visor-foto-editar {
    display: flex; align-items: center; justify-content: center;
    min-height: 2.75rem; padding-inline: 1.1rem;
  }
}

/* ---------- O VERBETE: o retrato MONTADO, com a plaqueta embaixo ----------

   O que muda quando a foto chega com biografia (data-oficio e data-vida na
   <img>, hoje so do mosaico do painel): a moldura deixa de ser uma foto com
   uma legenda de uma linha e passa a ser um retrato montado — o retrato sobre
   a margem, e embaixo dele a plaqueta que diz quem e. E a razao de o desenho
   ser condicional: na lista e na ficha a tela em volta ja diz quem e a
   pessoa, e la o visor continua sendo a foto e o nome, como sempre foi.

   UM EIXO SO, e e disto que a composicao vive. A primeira versao punha o
   texto A DIREITA do retrato, e ficava torta por construcao: o retrato
   encostava na borda com 0,9rem de folga, o texto respirava 1,15rem do outro
   lado, e o bloco de tres frases ao lado de uma foto de 400px de altura
   deixava vazio o que sobrava — quatro folgas diferentes dentro de um
   retangulo so. Centrado no mesmo eixo do rosto, com a mesma margem nos
   quatro lados, nao ha o que alinhar: a simetria vem do desenho e nao de
   ajuste.

   E por isso tambem que aqui NAO ha recuo pendente nem alinhamento a
   esquerda. As linhas sao centradas e equilibradas duas a duas
   (text-wrap: balance), como a plaqueta gravada de um retrato — a primeira
   versao recuava a continuacao de uma frase longa para marcar que ela
   continuava, e o que se lia era desalinho.

   Sem rotulo e sem regua. As frases dizem sozinhas do que falam ("Filha de
   Joao e Ana" nao precisa da palavra Filiacao na frente), e o que separa a
   identificacao do resumo e a troca de voz — serifada para o nome, sans para
   as frases — mais um vao maior entre os dois grupos. Uma linha horizontal
   ali seria a terceira maneira de dizer a mesma divisao. */

/* A MARGEM DO MONTE: uma medida, nos quatro lados. O retrato tem no maximo
   400px de largura e a plaqueta no maximo 42ch (que da menos que isso), entao
   e o retrato que define a largura da folha e a margem lateral sai exatamente
   igual a de cima e a de baixo. */
.visor-foto[data-verbete="sim"] .visor-foto-quadro {
  padding: 1.4rem; gap: 1.15rem;
  /* Rede para o caso extremo (fonte no A+, um nome de cinco partes e cinco
     filhos): a folha para de crescer e o verbete rola dentro dela, em vez de
     a plaqueta sair pela borda da tela. */
  max-height: calc(100vh - 3rem); overflow-y: auto;
}

/* O retrato divide a altura com a plaqueta: 400px de foto mais cinco frases
   mais o link nao fecham num celular em pe. O teto da foto cede o necessario,
   e o rosto continua grande o bastante para o que o visor existe —
   reconhecer a pessoa. */
.visor-foto[data-verbete="sim"] .visor-foto-imagem {
  max-width: min(400px, calc(100vw - 6.2rem));
  max-height: min(400px, max(9rem, calc(100vh - 22rem)));
}

.visor-foto[data-verbete="sim"] .visor-foto-verbete {
  /* Os vaos internos passam a ser declarados um por um (as margens abaixo):
     o nome e a funcao andam juntos, e o resumo e o link se afastam. Um gap
     unico da grade daria o mesmo vao aos quatro, e os quatro nao tem o mesmo
     parentesco entre si. */
  gap: 0;
  /* Medida de LEITURA da plaqueta: no corpo de apoio, 42ch caem em pouco mais
     de 300px, abaixo da largura do retrato — e o que garante que a foto seja
     sempre o elemento mais largo da folha, e portanto que a margem lateral
     seja a margem e nao a sobra de uma coluna de texto. */
  max-width: min(42ch, calc(100vw - 6.2rem));
}

/* O nome e o titulo deste pequeno documento, e ganha a serifada que o sistema
   reserva ao que se OLHA. --t-folha porque e exatamente o papel que a escala
   nomeia: titulo de folha, de janela, de ficha — e esta moldura e uma
   janela. */
.visor-foto[data-verbete="sim"] .visor-foto-nome {
  font-family: var(--letra-titulo); font-size: var(--t-folha);
  line-height: 1.25; color: var(--texto); text-wrap: balance;
}

/* A funcao na igreja, como aposto do nome. Nao entra na lista de frases de
   proposito: as frases contam a vida da pessoa, e a funcao e a posicao dela
   nesta igreja — o que se le logo abaixo do nome num anuario. Sem versal, que
   nesta casa e reservada ao que nomeia coluna ou grupo; isto e conteudo. */
.visor-foto-oficio {
  margin: .15rem 0 0; font-size: var(--t-apoio); color: var(--texto-suave);
}

.visor-foto-vida {
  margin: .95rem 0 0; padding: 0; list-style: none;
  font-size: var(--t-apoio); color: var(--texto);
  /* Entrelinha CURTA dentro de uma frase, vao LARGO entre frases (a margem
     abaixo): e a unica coisa que separa "esta frase continua" de "comecou
     outra" numa plaqueta centrada sem marcador nenhum. Com 1,55 de entrelinha
     e 0,4rem de vao a diferenca era de cinco pixels, e a filiacao de dois
     nomes compridos parecia quatro frases em vez de duas. */
  line-height: 1.45;
}
/* Cada frase equilibrada em si: sem isto, uma filiacao de dois nomes compridos
   sai como uma linha cheia e uma palavra solta embaixo, e a plaqueta centrada
   perde o eixo justamente onde ela mais aparece. */
.visor-foto-vida li { text-wrap: balance; }
.visor-foto-vida li + li { margin-top: .6rem; }

/* O vao que separa o resumo dos caminhos vai na FILA, e nao nos botoes: com
   dois deles, um margin-top em cada abriria o mesmo vao duas vezes no dia em
   que a fila empilhasse. */
.visor-foto[data-verbete="sim"] .visor-foto-acoes { margin-top: 1.15rem; }

.visor-foto-sair {
  position: absolute; top: 1rem; right: 1rem;
  width: 2.6rem; height: 2.6rem; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.5);
  color: #fff; font-size: 1.1rem; line-height: 1;
}
.visor-foto-sair:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Mesma dupla de regras do painel: a pagina de tras nao rola enquanto o visor
   esta aberto, e a borda devolve a largura que a barra de rolagem ocupava,
   senao a lista pula para o lado no instante em que a foto abre. Se a ficha
   ja estiver aberta as duas regras coincidem, e nada se soma. */
body:has(.visor-foto[data-aberto="sim"]) { overflow: hidden; }
@media (min-width: 761px) {
  body:has(.visor-foto[data-aberto="sim"]) { border-right: 12px solid var(--fundo); }
}

@media (prefers-reduced-motion: reduce) {
  .visor-foto, .visor-foto-quadro { transition-duration: .01ms; }
}

/* Serve a <button> e a <a>. O sublinhado precisa sair explicitamente: um
   <a class="botao"> nasce sublinhado, e "Relatórios" e "Backup" no
   cabecalho apareciam com um risco embaixo que nenhum botao ao lado tinha. */
/* O atributo hidden vale sempre, venha de onde vier ----------------------
   O "display: none" que o navegador da a [hidden] e regra do folha de
   estilo dele: qualquer classe nossa com display proprio (.botao logo
   abaixo, .filtros, .cartoes) ganha dela e o elemento continua na tela com
   o hidden ligado. Era por isso que o seletor de mes e os chips de situacao
   apareciam no relatorio de assembleia, mesmo o codigo mandando esconder.
   Uma regra so resolve para a pagina inteira — sem isso, cada caso novo
   precisa do seu proprio ".algo[hidden]", que e o remendo que ja existia
   solto em tres lugares deste arquivo. */
[hidden] { display: none !important; }

/* Grupo de campos que aparece e some junto com um tipo de relatorio. O gap
   repete o da barra de filtros para os selects do grupo ficarem espacados
   como os de fora dele. */
.campos-relatorio { display: inline-flex; flex-wrap: wrap; gap: .4rem; }

/* O rodape de folha e coisa de papel: na tela viraria uma linha estranha no
   pe da tabela, repetindo o que o cabecalho ja diz. impressao.css o traz de
   volta como table-footer-group. */
.rodape-folha { display: none; }

/* Respiro entre os chips de situacao e os de status: sao duas perguntas
   diferentes na mesma barra. */
.separador-filtros {
  width: 1px; align-self: stretch; margin: .1rem .35rem;
  background: var(--borda);
}

/* ---------- Relatorio de familias ----------
   Uma tabela so, com uma linha de titulo abrindo cada familia. Nao sao
   cartoes nem tabelas separadas de proposito: assim o <tfoot> que repete o
   rodape em cada folha continua valendo, e a planilha exportada sai plana.

   A hierarquia aparece de tres jeitos ao mesmo tempo, e nenhum deles sozinho:
   a linha de titulo, o recuo por geracao, e a coluna "Relacao", que diz em
   palavras de quem a pessoa e filha. Recuo sozinho nao informa — some na
   exportacao, e no papel a duas colunas ninguem repara. */
.linha-familia td {
  background: var(--ordem-1);
  font-weight: 600;
  padding-top: .8rem; padding-bottom: .5rem;
  border-top: 2px solid var(--borda);
}
.contagem-familia {
  font-weight: normal; color: var(--texto-suave); font-size: var(--t-apoio); margin-left: .5rem;
}
/* O intervalo e o rodape do nome da faixa: "Jovens" e o que se le, "18 a 29
   anos" e o que sustenta. Discreto, para o nome continuar sendo o titulo. */
.faixa-intervalo { font-weight: normal; color: var(--texto-suave); font-size: .85rem; }
/* Um degrau por geracao, ate o terceiro: mais que isso vira uma coluna de
   espaco em branco no papel A4. */
.nome-familia { padding-left: calc(.7rem + var(--nivel, 0) * 1.1rem) !important; }
.relacao-familia { font-size: var(--t-apoio); color: var(--texto-suave); }
.externos-familia td,
.ocultadas-familia td {
  font-size: var(--t-apoio); color: var(--texto-suave); padding-top: .1rem;
}
/* O aviso de quem o filtro escondeu vai impresso junto com o bloco: quem le a
   folha depois precisa saber que aquele casal de uma pessoa so esta cortado,
   e nao com a ficha incompleta. */
.ocultadas-familia td { font-style: italic; }
/* Explicacao curta abaixo de um campo. Cinza e menor que o rotulo: e apoio,
   nao instrucao que precise ser lida antes de preencher. */
.nota-campo {
  color: var(--texto-suave); font-size: var(--t-apoio); line-height: 1.4;
  margin: .1rem 0 .8rem;
}
/* Aviso de campo bloqueado: fundo ambar, o mesmo tom do aviso de "sem senha".
   Nunca o vermelho da marca, que e exclusivo do cabecalho. */
.aviso-campo {
  background: var(--aviso-fundo); border: 1px solid var(--borda);
  border-radius: 8px; padding: .5rem .7rem; margin: 0 0 .8rem;
  font-size: var(--t-apoio); line-height: 1.4;
}

/* ---------- Combobox de pessoa (conjuge, pai, mae, filhos) ----------
   Substitui o <select> nativo por uma caixa de busca com sugestoes: listas
   de mais de cem pessoas eram impraticaveis de rolar sem filtrar. A caixa
   de busca herda o estilo de input de .grupo-campo (borda, raio, fundo);
   so o proprio combo-pessoa e as sugestoes precisam de regra propria. */
.combo-pessoa { position: relative; }
.combo-sugestoes {
  position: absolute; z-index: 10; top: calc(100% + .25rem); left: 0; right: 0;
  max-height: 14rem; overflow-y: auto;
  margin: 0; padding: .3rem; list-style: none;
  background: var(--papel); border: 1px solid var(--borda); border-radius: 8px;
  box-shadow: var(--sombra);
}
.combo-opcao {
  padding: .45rem .6rem; border-radius: 6px; cursor: pointer; font-size: .92rem;
  overflow-wrap: break-word;
}
.combo-opcao-ativa, .combo-opcao:hover { background: var(--ordem-1); }
.combo-opcao-nenhum { color: var(--texto-suave); }
/* "Outro" fica separado por um traco: e uma acao (abrir um campo de texto),
   nao mais um nome na mesma lista. */
.combo-opcao-outro { border-top: 1px solid var(--borda); margin-top: .25rem; padding-top: .6rem; }
/* O segundo e ultimo versal do sistema, e pelo mesmo motivo do cabecalho da
   tabela: ele nomeia um GRUPO de itens da lista, e nao e um deles. Mesmo
   tratamento, sem uma virgula de diferenca. */
.combo-grupo {
  padding: .5rem .6rem .2rem; font-size: var(--t-nota); text-transform: uppercase;
  letter-spacing: var(--versal); font-weight: 600; color: var(--texto-suave);
}
.combo-vazio { padding: .45rem .6rem; color: var(--texto-suave); font-size: .85rem; }

/* No celular a sugestao e alvo de dedo, nao de ponteiro: 36px erra, e errar
   aqui grava o parente errado na ficha. Mesmo minimo dos itens do menu de
   filtro. A lista tambem cresce, porque a tela e mais alta que larga. */
@media (max-width: 760px) {
  .combo-opcao { min-height: 44px; display: flex; align-items: center; }
  .combo-sugestoes { max-height: 18rem; }
}

/* A nota que explica o recorte fica sobre a MESA, acima da folha — e nao
   dentro de cartao nenhum. Onde ela aparece dentro de um painel (a lista de
   pecas do diretorio), o painel declara a propria tinta e vence esta regra. */
.nota-relatorio {
  color: var(--tinta-mesa-suave); font-size: var(--t-apoio);
  max-width: 68ch; margin: .6rem 0 1rem;
}

/* ---------- Totalizadores acima da lista ----------
   Abrem todo relatorio de pessoas. O primeiro item E o assunto da folha
   ("46 pessoas exibidas abaixo", "12 familias exibidas abaixo") e os demais
   sao a quebra dele.

   Na TELA, pelo modelo que o dono aprovou (24/09/2026): a ABERTURA a
   esquerda — o icone num disco de vinho, o numero grande ao lado dele, o
   rotulo embaixo — e a quebra numa grade de cartoes a direita, cada um com o
   seu icone num disco de cor, o rotulo (e o intervalo da faixa, quando ha)
   e o numero na ponta, na mesma cor. A cor de cada cartao vem de
   [data-tom], que cicla pelas cores de situacao — nao codifica nada, so
   separa vizinhos —, e o cartao de uma situacao leva a tarja dela ao lado
   do numero, que e o codigo que vale.

   Tudo dentro de @media screen, e isso importa: o @media print de
   impressao.css desmonta estas classes numa linha corrida de texto e NAO
   reseta fundo, borda, familia de fonte nem ordem. Uma regra destas solta
   fora do screen atravessa para o papel e gasta meia folha. */
@media screen {
  .totais-relatorio {
    display: grid; grid-template-columns: minmax(15rem, 1fr) minmax(0, 2.6fr);
    gap: .6rem 1rem; align-items: stretch;
    margin: .6rem 0 1rem; padding: .7rem .8rem;
    background: var(--papel); border: 1px solid var(--borda);
    border-radius: var(--raio);
  }
  /* Sem quebra (um total so, como na assembleia) a abertura ocupa tudo. */
  .totais-relatorio:has(> .total-item:only-child) { grid-template-columns: 1fr; }

  /* Os cinco tons dos cartoes e dos grupos: as cores de situacao que ja
     existem, lidas como texto (clareiam no escuro). Ciclam, e so. */
  [data-tom="1"] { --tom-cor: var(--sit-M-texto); }
  [data-tom="2"] { --tom-cor: var(--sit-TR-texto); }
  [data-tom="3"] { --tom-cor: var(--sit-A-texto); }
  [data-tom="4"] { --tom-cor: var(--sit-DI-texto); }
  [data-tom="5"] { --tom-cor: var(--sit-CDNM-texto); }

  .total-item {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto; column-gap: .7rem; align-items: center;
    align-content: center; padding: .45rem .7rem; border: 0; border-radius: 10px;
    /* Neutro desde o redesenho (06/11/2026): a cor fica so no icone. */
    background: var(--superficie-2);
    font-size: var(--t-apoio); text-align: left;
  }
  .total-icone {
    grid-column: 1; grid-row: 1 / span 2; width: 2.3rem; height: 2.3rem;
    border-radius: 50%; display: grid; place-items: center;
    color: var(--tom-cor, var(--texto-suave));
    background: var(--papel);
  }
  .total-icone svg { width: 1.25rem; height: 1.25rem; }
  .total-rotulo {
    grid-column: 2; grid-row: 1 / span 2; color: var(--texto); line-height: 1.3;
    font-size: var(--t-apoio); font-weight: 600;
  }
  /* O intervalo da faixa desce para a linha de baixo do rotulo, miudo. */
  .total-rotulo .faixa-intervalo { display: block; font-weight: normal; font-size: var(--t-nota); }
  .total-numero {
    grid-column: 3; grid-row: 1 / span 2; display: flex; align-items: baseline;
    justify-content: flex-end; gap: .4rem;
    font-family: var(--letra-titulo); font-weight: 700; font-size: var(--t-numero);
    line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
    color: var(--texto);
  }
  .total-numero .tarja { font-size: var(--t-nota); }

  /* A abertura: o disco em vinho, o numero de vulto ao lado, o rotulo
     embaixo dele. Sem fundo de cartao — ela e a folha, os outros sao
     cartoes sobre ela. */
  .totais-relatorio > .total-item:first-child {
    grid-template-columns: auto minmax(0, 1fr); background: none;
    padding: .3rem .5rem .3rem .4rem; column-gap: 1rem;
  }
  .totais-relatorio > .total-item:first-child .total-icone {
    width: 3.4rem; height: 3.4rem; color: var(--vinho-texto);
    background: color-mix(in srgb, var(--marca-vinho) 11%, var(--papel));
  }
  .totais-relatorio > .total-item:first-child .total-icone svg { width: 1.8rem; height: 1.8rem; }
  .totais-relatorio > .total-item:first-child .total-numero {
    grid-column: 2; grid-row: 1; justify-content: flex-start;
    font-size: var(--t-vulto); color: var(--vinho-texto);
  }
  .totais-relatorio > .total-item:first-child .total-rotulo {
    grid-column: 2; grid-row: 2; margin-top: .25rem;
    font-weight: normal; font-size: var(--t-corpo); color: var(--texto-suave);
  }

  .totais-quebra {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
    gap: .45rem; align-content: center;
  }

  /* O total de uma faixa etaria e um botao: abre a janelinha com os nomes
     daquela faixa. O que o botao precisa e so desfazer o que o navegador poe
     nele — fonte, cor, alinhamento — e responder ao ponteiro e ao teclado. */
  .total-item-abre { width: 100%; font: inherit; cursor: pointer; }
  .total-item-abre:hover,
  .total-item-abre[aria-expanded="true"] {
    background: color-mix(in srgb, var(--texto) 6%, var(--superficie-2));
  }
  .total-item-abre:focus-visible { outline: 2px solid var(--marca-verde); outline-offset: 1px; }
}

@media screen and (max-width: 760px) {
  .totais-relatorio { grid-template-columns: 1fr; }
  .totais-relatorio > .total-item:first-child { border-bottom: 1px solid var(--borda); border-radius: 0; padding-bottom: .7rem; }
}

/* ---------- A janelinha de nomes de uma faixa etaria ----------
   Mesma familia do menu rapido e do menu de filtro: caixa suspensa, fixa,
   posicionada pelo mesmo calculo (cabe abaixo? senao sobe; nao vaza pela
   borda). z-index 60 pelo mesmo motivo daqueles — pode conviver com a ficha
   lateral (50), que e a camada que ela abre ao clicar num nome.
   Nao ha regra de @media print aqui: a janela e .nao-imprimir, e no papel os
   nomes ja estao abaixo do cabecalho de cada faixa. */
/* A largura e a do nome mais comprido da faixa, nao um numero escolhido de
   antemao: "José Dorival do Amparo Bragança" quebrado em duas linhas custa
   mais espaco do que a coluna que ele pediria, e faz uma lista de sete nomes
   parecer de dez. Por isso `max-content` entre um piso e um teto — o piso para
   uma faixa de nomes curtos nao virar uma tira estreita, o teto para o nome
   excepcional nao empurrar a janela por cima da tela inteira (acima dele o
   nome volta a quebrar, e ai quebrar e o certo). */
.janela-faixa {
  position: fixed; z-index: 60;
  width: max-content;
  /* O piso tambem cede a tela: min-width vence max-width em CSS, e um piso
     cru de 19rem vazaria pela direita num celular estreito. */
  min-width: min(19rem, calc(100vw - 1rem));
  max-width: min(32rem, calc(100vw - 1rem));
  max-height: min(60vh, 32rem); display: flex; flex-direction: column;
  background: var(--papel); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden;
}
/* O botao de fechar ocupa a terceira coluna das duas linhas de texto: sem
   isso o titulo teria de desviar dele. */
.janela-faixa-topo {
  display: grid; grid-template-columns: 1fr auto; align-items: start;
  gap: 0 .5rem; padding: .8rem .9rem .6rem;
  border-bottom: 1px solid var(--borda);
}
/* Na serifada do projeto, como o algarismo de abertura dos totais e o do
   resumo: e o mesmo assunto, visto de perto. E no mesmo degrau do titulo de
   qualquer outra folha (--t-folha), porque e isso que ela e — uma folha
   pequena com um titulo e uma lista. */
.janela-faixa-titulo {
  grid-column: 1; margin: 0; font-family: var(--letra-titulo); font-weight: 700;
  font-size: var(--t-folha); line-height: 1.2;
}
.janela-faixa-conta {
  grid-column: 1; margin: .2rem 0 0; color: var(--texto-suave); font-size: var(--t-apoio);
}
.janela-faixa-fechar {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  width: 2rem; height: 2rem; border: 0; border-radius: 4px;
  background: none; color: var(--texto-suave); font-size: 1.3rem; line-height: 1;
  cursor: pointer;
}
.janela-faixa-fechar:hover { background: rgba(127, 127, 127, .18); }
.janela-faixa-fechar:focus-visible {
  outline: 2px solid var(--marca-verde); outline-offset: 1px;
}
/* scrollbar-gutter: a barra de rolagem de uma faixa grande come largura por
   dentro, e sem reservar esse espaco o nome mais comprido — justamente o que
   decidiu a largura da janela — voltaria a quebrar por causa dela. */
.janela-faixa-nomes {
  margin: 0; padding: .25rem .9rem .5rem; list-style: none;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable;
}
/* Nome a esquerda, idade a direita: numa lista ordenada por idade, e a
   coluna da direita que se le de cima a baixo para achar onde parar. */
.janela-faixa-nome {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .6rem; padding: .3rem 0; font-size: var(--t-apoio);
  border-bottom: 1px solid var(--borda);
}
.janela-faixa-nome:last-child { border-bottom: 0; }
.janela-faixa-idade {
  flex: 0 0 auto; white-space: nowrap;
  color: var(--texto-suave); font-size: var(--t-nota);
  font-variant-numeric: tabular-nums;
}
.janela-faixa-rodape {
  margin: 0; padding: .5rem .9rem .6rem; border-top: 1px solid var(--borda);
  background: var(--realce); color: var(--texto-suave); font-size: var(--t-nota);
}

/* ---------- Panorama: o resumo estatistico na tela ----------
   Duas telas diferentes para o mesmo relatorio, e de proposito. No papel o
   resumo continua sendo a linha corrida de totais e as duas tabelas: la o
   que manda e caber, e cada milimetro e uma linha de lista. Na tela nao ha
   folha para economizar, e o resumo e a unica pagina do sistema que se olha
   inteira de uma vez — ela pode (e deve) ser lida de longe.
   O que estava errado era a simetria: oito cartoes com "flex: 1 1 9rem"
   quebravam em fileiras desiguais, a ultima esticada, e as duas tabelas
   abaixo tinham cada uma a sua largura. Aqui nada estica: as trilhas da
   grade sao fixas, os dois quadros tem exatamente a mesma largura e as
   celulas dentro deles o mesmo tamanho.

   A cor e gasta em um lugar so: a faixa de composicao, com as nove cores da
   spec de situacao — que ja significam isso mesmo em todas as outras telas.
   Numeros na Bitter, a unica serifada da interface (ja e a voz do titulo no
   cabecalho e dos totais do painel): peso de documento, algarismos de largura
   fixa, desenho de livro de registro — que e o que este resumo e. */
.panorama { display: grid; gap: 1rem; margin: .6rem 0 1rem; }

.panorama-abertura, .panorama-quadro {
  background: var(--papel); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 1.15rem 1.25rem;
}

.panorama-abertura { display: grid; gap: 1.2rem 2.2rem; }
@media (min-width: 900px) {
  .panorama-abertura { grid-template-columns: minmax(9rem, 12rem) 1fr; align-items: start; }
}

/* Sem a margem do <p>: ela empurraria o numero para baixo e ele deixaria de
   comecar na mesma linha que a faixa de composicao, ao lado. */
.panorama-total { margin: 0; }
/* O maior algarismo do sistema, e o mesmo token do algarismo de abertura dos
   totais do relatorio: e o mesmo papel em duas telas, e agora fala igual nas
   duas. Bitter 700 no lugar de Georgia 400, com o corpo um degrau abaixo
   pela mesma conta de tinta explicada la nos totais. */
.panorama-total-numero {
  display: block;
  font-family: var(--letra-titulo); font-weight: 700;
  font-size: var(--t-vulto); line-height: .95; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.panorama-total-rotulo {
  display: block; color: var(--texto-suave); font-size: var(--t-apoio); line-height: 1.35;
  margin-top: .4rem; max-width: 11rem;
}
.panorama-nota {
  color: var(--texto-suave); font-size: var(--t-apoio); line-height: 1.45;
  max-width: 62ch; margin: .7rem 0 0;
}

/* A composicao da igreja numa faixa so. Os vaos de 2px separam as fatias sem
   precisar de borda — sobre a cor da spec, uma borda escureceria a fatia. */
.panorama-faixa {
  display: flex; gap: 2px; height: .95rem; overflow: hidden;
  border-radius: 999px; background: var(--panorama-trilho);
}
.panorama-fatia {
  flex: 0 0 0; min-width: 3px; border-radius: 2px;
  background: var(--cor-marca);
  transition: flex-grow .55s cubic-bezier(.2, .7, .3, 1);
}
.panorama-vivo .panorama-fatia { flex-grow: var(--parte, 0); }

/* A legenda da faixa e a tabela "Por situacao" na mesma coisa: a sigla com a
   tarja de sempre, o rotulo por extenso, e o numero na ponta. O pontilhado e
   o que liga um ao outro quando o rotulo e curto e a coluna e larga. */
.panorama-legenda {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: grid; gap: 0 1.8rem; grid-template-columns: 1fr;
}
@media (min-width: 620px) { .panorama-legenda { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .panorama-legenda { grid-template-columns: repeat(3, 1fr); } }
/* minmax(0, auto) na coluna do rotulo: com "auto" puro a trilha nunca encolhe
   abaixo do conteudo, e como o rotulo e nowrap ("Congregado do Novo Mundo")
   ele empurrava a linha para fora da coluna em tela estreita. Assim ela cede,
   e o corte sai nas reticencias em vez de vazar. */
.panorama-legenda-item {
  display: grid; grid-template-columns: auto minmax(0, auto) minmax(.6rem, 1fr) auto;
  align-items: baseline; gap: .5rem; padding: .22rem 0; font-size: var(--t-apoio);
}
.panorama-legenda-rotulo {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* O pontilhado assenta na linha de base do rotulo e do numero, como o guia de
   um sumario — por isso ele e uma caixa vazia com borda de baixo, e nao um
   traco centralizado na altura da linha. */
.panorama-guia { border-bottom: 1px dotted var(--borda); }
.panorama-legenda-numero, .panorama-linha-numero, .panorama-linha-parte {
  font-variant-numeric: tabular-nums; text-align: right;
}
.panorama-legenda-numero { font-weight: 600; }
/* Situacao sem ninguem continua na legenda: zero e resposta ("nao ha nenhum
   transferido"), e sumir com a linha faria parecer que a situacao nem existe
   no cadastro. Fica em cinza, para nao pesar como as que tem gente. */
.panorama-zerado { color: var(--texto-suave); }

/* "dos quais sob disciplina", debaixo de Membro e no mesmo item da lista. No
   lugar da tarja, um galho roxo — um L de duas bordas — que desce da sigla M
   e dobra para o rotulo: a linha e um pedaco da de cima, e nao uma situacao.
   A largura do galho e a da tarja de M, entao o rotulo comeca recuado sob o
   rotulo "Membro". O rotulo vai na tinta suave e o numero sem negrito: o
   numero principal e o 30, este so o detalha. */
/* As duas linhas dividem as colunas (subgrid): a coluna da tarja de M e a
   mesma do galho, e o rotulo de baixo comeca no prumo de "Membro". */
.panorama-legenda > li:has(.panorama-legenda-parte) {
  display: grid; grid-template-columns: auto minmax(0, auto) minmax(.6rem, 1fr) auto;
  column-gap: .5rem;
}
.panorama-legenda > li:has(.panorama-legenda-parte) > .panorama-legenda-item {
  grid-column: 1 / -1; grid-template-columns: subgrid;
}
.panorama-legenda-parte { padding-top: 0; }
.panorama-legenda-galho {
  justify-self: start; align-self: start;
  width: .7rem; height: 1.15em; margin: -.5rem 0 0 .58rem;
  border-left: 2px solid var(--tom-DI); border-bottom: 2px solid var(--tom-DI);
  border-bottom-left-radius: 4px;
}
.panorama-legenda-parte .panorama-legenda-rotulo { color: var(--texto-suave); }
.panorama-legenda-parte .panorama-legenda-numero { font-weight: 400; color: var(--sit-DI-texto); }

/* A mesma ideia na faixa: os membros sob disciplina sao a ponta roxa DENTRO
   da fatia verde de Membro, na proporcao deles sobre os membros. */
.panorama-fatia:has(.panorama-fatia-parte) { display: flex; justify-content: flex-end; }
.panorama-fatia-parte {
  flex: 0 0 calc(var(--dentro, 0) * 100%); min-width: 3px;
  background: var(--tom-DI); border-left: 2px solid var(--papel);
}
.panorama-zerado .panorama-legenda-numero { font-weight: 400; }

/* Os dois quadros tem a mesma largura e o mesmo numero de celulas (2x2): e
   dai que vem a simetria. O vao de 1px sobre o fundo da borda desenha as
   reguas entre as celulas sem borda em cada uma — assim nao ha linha dupla
   no encontro delas. */
.panorama-quadros { display: grid; gap: 1rem; }
@media (min-width: 760px) { .panorama-quadros { grid-template-columns: 1fr 1fr; } }

/* O titulo de secao do sistema, e o modelo que .secao-ficha h3 passou a
   seguir: corpo do texto, peso 600, regua embaixo, caixa normal. */
.panorama-titulo {
  font-size: var(--t-secao); font-weight: 600; margin: 0 0 .9rem;
  padding-bottom: .55rem; border-bottom: 1px solid var(--borda);
}
.panorama-celulas {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--borda); border: 1px solid var(--borda);
  border-radius: 8px; overflow: hidden;
}
.panorama-celula { background: var(--papel); padding: .8rem .9rem; }
.panorama-numero {
  display: block; font-family: var(--letra-titulo);
  font-weight: 700; font-size: var(--t-numero); line-height: 1.05;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.panorama-rotulo {
  display: block; color: var(--texto-suave); font-size: var(--t-nota); line-height: 1.3;
  margin-top: .2rem;
}

/* As geracoes sao uma sequencia — do berco a longevidade — e por isso saem
   em ordem de vida, nunca ordenadas por tamanho. A barra e escalada pela
   MAIOR faixa, nao pelo total: nenhuma faixa chega a um quinto do cadastro,
   e escalada pelo total o desenho seria dez tracinhos iguais. A proporcao
   verdadeira vai escrita ao lado, em percentual. */
.panorama-linhas { list-style: none; margin: 0; padding: 0; }
.panorama-linha {
  display: grid; align-items: center; gap: .35rem .9rem;
  grid-template-columns: 1fr 2.6rem 3.6rem;
  padding: .45rem 0; border-bottom: 1px solid var(--borda);
}
.panorama-linha:last-child { border-bottom: 0; }
.panorama-linha-nome { grid-column: 1; grid-row: 1; line-height: 1.3; font-size: var(--t-apoio); }
.panorama-linha-numero { grid-column: 2; grid-row: 1; font-weight: 600; font-size: var(--t-apoio); }
.panorama-linha-parte { grid-column: 3; grid-row: 1; color: var(--texto-suave); font-size: var(--t-nota); }
.panorama-trilho { grid-column: 1 / -1; grid-row: 2; }
/* 19rem, e nao os 15 que a coluna pedia a primeira vista: o nome mais longo
   ("Bebês e primeira infância") com o intervalo ao lado passa dos 15rem e
   quebrava em duas linhas. Uma linha mais alta que as outras no meio de dez e
   exatamente o desalinho que este redesenho veio consertar.

   A pergunta e do QUADRO, nao da janela, e por isso aqui e @container e nao
   @media. O quadro mora numa grade de duas colunas: numa janela de 1500px
   ele tem 576px, nao 1500 — e a quebra em `min-width: 760px` da janela
   ligava as quatro colunas num quadro que nao tinha largura para elas.
   Medido: o trilho ficava com 88px em escala 1, com 24px em 1,125 e
   DESAPARECIA em 1,25 — e o trilho e a informacao, nao o enfeite. Em janela
   entre 760 e 900px a conta ja estourava a caixa.
   33rem, e nao 528px: em rem o limiar acompanha o tamanho da letra, entao a
   pergunta que a regra faz e "cabem 33 larguras de letra aqui?", que e a
   pergunta certa. Quando nao cabem, a linha volta ao empilhado — nome em
   cima, trilho embaixo —, que e o mesmo desenho que o celular ja usa. */
.panorama-quadro { container-type: inline-size; }

@container (min-width: 33rem) {
  .panorama-linha { grid-template-columns: minmax(14rem, 19rem) 1fr 2.6rem 3.6rem; }
  .panorama-trilho { grid-column: 2; grid-row: 1; }
  .panorama-linha-numero { grid-column: 3; }
  .panorama-linha-parte { grid-column: 4; }
}
.panorama-linha-nome .faixa-intervalo { margin-left: .4rem; white-space: nowrap; }

/* Legenda e barra viram link so no painel (situacao, faixa etaria e
   cobertura — nunca sexo, estado civil ou os blocos dormentes). A classe de
   grade (panorama-legenda-item / panorama-linha) muda de dono, do <li> para
   o <a>, exatamente para o link poder existir sem quebrar as colunas; o
   reset aqui e so cor e sublinhado, para o <a> nao parecer link nenhum do
   navegador — a cor da situacao continua sendo a unica com significado. */
a.panorama-legenda-link, a.panorama-linha-link {
  color: inherit; text-decoration: none;
}
a.panorama-legenda-link:hover, a.panorama-linha-link:hover {
  background: rgba(127, 127, 127, .08);
}
a.panorama-legenda-link:focus-visible, a.panorama-linha-link:focus-visible {
  outline: 2px solid var(--marca-verde); outline-offset: -2px;
}

/* As duas celulas de familia que abrem relatorio (arvores, nucleos) —
   "sem parentesco" fica <div> puro, sem link, porque nao ha relatorio para
   ela. display:block para o <a> ocupar a celula inteira, como .atalho-cartao. */
.panorama-celula-link { display: block; color: inherit; text-decoration: none; }
.panorama-celula-link:hover { background: rgba(127, 127, 127, .08); }
.panorama-celula-link:focus-visible {
  outline: 2px solid var(--marca-verde); outline-offset: -2px;
}

/* O titulo "Aniversariantes de <mes>" vira link so no painel. */
.panorama-titulo a { color: inherit; text-decoration: none; }
.panorama-titulo a:hover { text-decoration: underline; }
.panorama-titulo a:focus-visible {
  outline: 2px solid var(--marca-verde); outline-offset: 2px;
}
.panorama-trilho {
  display: block; height: .5rem; overflow: hidden;
  border-radius: 999px; background: var(--panorama-trilho);
}
.panorama-barra {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--panorama-tinta);
  transition: width .55s cubic-bezier(.2, .7, .3, 1);
}
.panorama-vivo .panorama-barra { width: calc(var(--parte, 0) * 100%); }
/* Quem nao tem ano de nascimento fica fora da conta das faixas, entao fica
   fora do desenho tambem: sem trilho, para a linha nao sugerir uma barra
   zerada — que seria dizer "esta faixa esta vazia", e nao e isso. */
.panorama-fora { color: var(--texto-suave); }
.panorama-fora .panorama-trilho { background: none; }

/* As barras crescem do zero uma vez, ao desenhar. Nao e enfeite de entrada:
   e a resposta a acao de quem mexeu num chip de filtro, mostrando de que
   tamanho para que tamanho cada faixa foi. */
@media (prefers-reduced-motion: reduce) {
  .panorama-fatia, .panorama-barra { transition: none; }
}

/* ---------- O resumo estatistico dos RELATORIOS, pelo modelo do dono ----------
   (24/09/2026). Tudo aqui e escopado a `.panorama`, a raiz que so a tela de
   relatorios desenha: o painel inicial usa as mesmas classes (quadro, celula,
   linha, legenda) sem essa raiz, e nao muda uma linha.

   O desenho: a abertura num cartao de veu de vinho, com o disco do icone, o
   numero de vulto e a nota do recorte embaixo dele; a composicao ao lado,
   com a faixa e a legenda em tres colunas de pilulas; os dois quadros com o
   icone no titulo e as celulas viradas em cartoes coloridos (icone num
   disco, numero na cor, rotulo); e as geracoes com a barra de cada faixa na
   cor dela e a nota com o simbolo de informacao. So o visual: o conteudo e
   o mesmo.

   A composicao (faixa, legenda, nota) vira `display: contents` para as tres
   pecas entrarem na grade da abertura: e assim que a nota do recorte, que
   composicaoNaTela monta junto da faixa, vai parar embaixo do numero, na
   coluna da esquerda, sem mexer na marcacao que o painel tambem usa. */
@media screen {
  .panorama { gap: .9rem; }
  .panorama-abertura {
    display: grid; grid-template-columns: minmax(17rem, 1fr) minmax(0, 2.4fr);
    grid-template-rows: auto auto; gap: 0 1.4rem; padding: .9rem; align-items: start;
  }
  .panorama-abertura .panorama-composicao { display: contents; }
  .panorama-total {
    grid-column: 1; grid-row: 1;
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
    column-gap: .9rem; align-items: center; align-content: start;
    padding: .9rem 1rem; border-radius: 10px;
    background: color-mix(in srgb, var(--marca-vinho) 6%, var(--papel));
  }
  .panorama-total-icone {
    grid-row: 1 / span 2; width: 3.2rem; height: 3.2rem; border-radius: 50%;
    display: grid; place-items: center; color: var(--vinho-texto);
    background: color-mix(in srgb, var(--marca-vinho) 11%, var(--papel));
  }
  .panorama-total-icone svg { width: 1.7rem; height: 1.7rem; }
  .panorama-total-numero { grid-column: 2; grid-row: 1; color: var(--vinho-texto); }
  .panorama-total-rotulo { grid-column: 2; grid-row: 2; margin-top: .2rem; max-width: none; color: var(--texto); }
  /* A nota do recorte continua o cartao do numero: mesmo veu, cantos so
     embaixo — e o cartao do numero perde os de baixo quando ela existe. */
  .panorama-abertura .panorama-nota {
    grid-column: 1; grid-row: 2; margin: 0; max-width: none;
    padding: 0 1rem .9rem; border-radius: 0 0 10px 10px;
    background: color-mix(in srgb, var(--marca-vinho) 6%, var(--papel));
    font-size: var(--t-nota);
  }
  .panorama-abertura:has(.panorama-nota) .panorama-total { border-radius: 10px 10px 0 0; padding-bottom: .7rem; }
  .panorama-abertura .panorama-faixa { grid-column: 2; grid-row: 1; align-self: center; height: 1rem; margin-top: .6rem; }
  .panorama-abertura .panorama-legenda { grid-column: 2; grid-row: 2; margin-top: .9rem; gap: 0 1.2rem; }
  .panorama-legenda-item { padding: .3rem 0; align-items: center; }
  /* A tarja vira a pilula das listas: o ponto e a sigla numa capsula. */
  .panorama-legenda .tarja {
    border-radius: 999px; padding: .1rem .5rem .1rem .4rem; gap: .3rem;
    font-size: .68rem; background: color-mix(in srgb, var(--cor-marca) 10%, var(--papel));
  }
  .panorama-legenda .tarja::before { width: .45rem; height: .45rem; border-radius: 50%; }
  .panorama-legenda-numero { font-weight: 700; }
  .panorama-guia { border-bottom: 0; }

  /* Os quadros: icone no titulo, celulas em cartoes com o disco do icone. */
  .panorama-quadro { padding: 1rem 1.1rem; }
  .panorama-titulo {
    display: flex; align-items: center; gap: .55rem; border-bottom: 0;
    padding-bottom: 0; margin-bottom: .8rem;
    font-family: var(--letra-titulo); font-weight: 700; font-size: var(--t-folha);
  }
  .panorama-titulo-icone { width: 1.25rem; height: 1.25rem; color: var(--texto); flex: 0 0 auto; }
  .panorama-titulo-icone svg { width: 100%; height: 100%; }
  .panorama-celulas { gap: .55rem; background: none; border: 0; border-radius: 0; overflow: visible; }
  .panorama-celula {
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto;
    column-gap: .8rem; align-items: center; align-content: center;
    padding: .7rem .9rem; border-radius: 10px;
    background: color-mix(in srgb, var(--tom-cor, var(--texto)) 6%, var(--papel));
  }
  .panorama-celula-icone {
    grid-column: 1; grid-row: 1 / span 2; width: 2.4rem; height: 2.4rem; border-radius: 50%;
    display: grid; place-items: center; color: var(--tom-cor, var(--texto-suave));
    background: color-mix(in srgb, var(--tom-cor, var(--texto)) 12%, var(--papel));
  }
  .panorama-celula-icone svg { width: 1.3rem; height: 1.3rem; }
  .panorama-celula .panorama-numero { grid-column: 2; grid-row: 1; color: var(--tom-cor, var(--texto)); }
  .panorama-celula .panorama-rotulo { grid-column: 2; grid-row: 2; margin-top: .1rem; color: var(--texto); }

  /* As geracoes: cada faixa com a barra na cor dela, o numero em negrito. */
  .panorama .panorama-linha { border-bottom: 0; padding: .3rem 0; }
  .panorama .panorama-trilho { height: .55rem; }
  .panorama .panorama-linha[data-tom] .panorama-barra { background: var(--tom-cor); }
  .panorama .panorama-linha-numero { font-weight: 700; }
  .panorama .panorama-linha-parte { font-size: var(--t-apoio); }
  .panorama .panorama-quadro > .panorama-nota {
    display: flex; align-items: flex-start; gap: .5rem;
    margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--borda);
    max-width: none; font-size: var(--t-nota);
  }
  .panorama-nota-icone { width: 1rem; height: 1rem; flex: 0 0 auto; margin-top: .05rem; }
  .panorama-nota-icone svg { width: 100%; height: 100%; }
}

@media screen and (max-width: 900px) {
  .panorama-abertura { grid-template-columns: 1fr; grid-template-rows: auto; }
  .panorama-abertura .panorama-nota, .panorama-abertura .panorama-faixa,
  .panorama-abertura .panorama-legenda, .panorama-total { grid-column: 1; grid-row: auto; }
  .panorama-abertura .panorama-faixa { margin-top: 1rem; }
}

/* O que existe so no papel. O par disto e .nao-imprimir, que o @media print
   esconde: as duas classes juntas sao o que deixa o resumo ter um desenho na
   tela e outro na folha sem que um mexa no outro. */
.so-impressao { display: none; }

.botao {
  display: inline-block; text-decoration: none;
  border: 1px solid var(--borda); background: var(--papel); color: var(--texto);
  border-radius: 8px; padding: .5rem .9rem; cursor: pointer; font-size: .9rem;
}
.botao-primario { background: var(--destaque); border-color: var(--destaque); color: var(--destaque-tinta); font-weight: 600; }
.botao-primario:hover { background: color-mix(in srgb, var(--destaque) 88%, var(--texto)); }
.botao-perigo { color: var(--sit-E-texto); border-color: var(--tom-E); }

/* Editar e excluir vem antes do historico: sao o que se faz com a ficha, e
   uma pessoa com dezenas de alteracoes empurrava os botoes para longe. */
.acoes-ficha { display: flex; gap: .5rem; margin: 1.5rem 0; }

/* O historico cresce sem limite; em vez de alongar a coluna inteira, ele
   rola dentro da propria secao. */
.historico {
  font-size: var(--t-apoio); color: var(--texto-suave);
  max-height: 16rem; overflow-y: auto; padding-right: .4rem;
}
.historico li { margin-bottom: .3rem; }

@media (max-width: 760px) { .painel { width: 100%; } }

/* ---------- Formulario em tela cheia ----------
   O formulario de cadastro tem ~20 campos: na faixa de 460px eles viravam
   uma coluna de rolagem sem fim. Aqui ele vira uma folha suspensa que ocupa
   quase toda a tela, deixando a lista escurecida visivel como moldura em
   volta. So o formulario usa isto — a ficha, que e leitura curta, continua
   painel lateral.

   Especificidade: .painel[data-aberto="sim"] la em cima tem peso (0,2,0) e
   define transform. Por isso o estado aberto daqui precisa das tres classes
   (.painel.painel-cheio[data-aberto="sim"], peso 0,3,0) para vencer; nao
   reduza para .painel-cheio[data-aberto="sim"] ou a folha nao abre. */
.painel.painel-cheio {
  top: 2.5vh; right: 2.5vw; bottom: 2.5vh; left: 2.5vw;
  width: auto; height: auto;          /* anula width:min(460px) e height:100% */
  /* A mesma largura maxima do resto da aplicacao (.conteudo, .filtros e o
     cabecalho, todos em 1200px centrados). Sem isto, numa
     tela larga a folha ia a 95vw e ficava mais larga que a lista por baixo:
     ao abrir a edicao, o conteudo "pulava" para fora do alinhamento.
     Centraliza por margem automatica, e NAO por transform: o transform aqui
     ja e da animacao de entrada, e usa-lo para centrar quebraria as duas
     coisas. Com left e right definidos e uma largura menor que a folga,
     margin auto e o que sobra para dividir o resto em dois. */
  max-width: 1200px;
  margin-inline: auto;
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.28), 0 2px 10px rgba(0,0,0,.14);
  display: flex; flex-direction: column; overflow: hidden;
  /* Nasce do centro, onde ela esta: o deslize lateral do .painel so faz
     sentido para quem entra pela borda da tela. */
  transform: translateY(8px) scale(.985);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.painel.painel-cheio[data-aberto="sim"] {
  transform: none;
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
}

/* A rolagem sai do painel e vai para o corpo: assim o topo (titulo e fechar)
   e o rodape grudado (Salvar/Cancelar) ficam sempre a vista, que era o risco
   real de crescer a area do formulario. */
.painel-cheio .painel-topo { flex: 0 0 auto; position: static; }
.painel-cheio .painel-corpo {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  /* Sem folga embaixo: quem fecha a folha e a barra de acoes grudada. Com
     folga, sobrava uma faixa de campo aparecendo por baixo dela. */
  padding: 1.1rem clamp(1rem, 3vw, 2rem) 0;
}
.painel-cheio .acoes-formulario { padding-bottom: 1rem; }

/* O botao verde de "novo" ficava metade escondido atras da borda da folha,
   parecendo sobra de tela. Enquanto qualquer painel esta aberto ele sai. */
body:has(.fundo-escuro[data-aberto="sim"]) .botao-novo {
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}

/* Com a ficha aberta a tela mostrava tres barras de rolagem lado a lado: a
   da pagina la atras, a do painel e a do historico. A de tras nao rola nada
   que se possa ler — a lista esta sob o fundo escuro — entao ela sai
   enquanto qualquer painel estiver aberto. */
body:has(.fundo-escuro[data-aberto="sim"]) { overflow: hidden; }

/* Tirar a barra devolve 12px de largura a pagina, e a lista inteira pulava
   para o lado no instante em que a ficha abria. A borda direita ocupa
   exatamente o espaco que a barra ocupava, entao nada se mexe. E borda do
   body, nao do viewport: o painel e o fundo escuro sao fixos e continuam
   colados na beirada da tela.
   So na faixa larga. No celular o painel cobre a tela toda (nao ha lista
   visivel para pular) e a barra de rolagem ja nao ocupa largura nenhuma. */
@media (min-width: 761px) {
  body:has(.fundo-escuro[data-aberto="sim"]) {
    border-right: 12px solid var(--fundo);
  }
}

/* Duas colunas a partir de 900px. As secoes fluem por coluna e nenhuma se
   parte no meio, entao um campo nunca fica separado do titulo da secao. */
@media (min-width: 900px) {
  .painel-cheio .campos-formulario {
    column-count: 2; column-gap: clamp(1.5rem, 4vw, 3rem);
  }
  .painel-cheio .campos-formulario .secao-ficha { break-inside: avoid; }
}

/* Cada secao do formulario num bloco de fundo levemente contrastante, para
   a vista achar onde uma acaba e a outra comeca. Pedido do usuario, e com
   duas restricoes que ele mesmo deu: LEVE, e o MESMO tom em todas.
   So preenchimento e cantos arredondados — sem borda e sem sombra. Os tres
   juntos transformariam o formulario em dez cartoes competindo entre si, e
   o que se pediu foi delimitacao, nao destaque. Os campos continuam brancos
   (--papel) sobre a secao, entao a area de digitar segue sendo a que salta.

   So no formulario: a ficha usa a mesma classe .secao-ficha, mas la e
   leitura corrida num painel estreito, e dez blocos empilhados pesariam. */
.painel-cheio .campos-formulario .secao-ficha {
  background: var(--secao-fundo);
  border-radius: 10px;
  /* Embaixo e menos porque o ultimo campo ja traz .8rem de margem. */
  padding: .9rem 1rem .2rem;
  margin-bottom: 1rem;
}
/* A secao ja delimita; o traco sob o titulo passaria a ser o segundo
   contorno dentro do mesmo bloco. Fica so o titulo. */
.painel-cheio .campos-formulario .secao-ficha h3 {
  border-bottom: 0; padding-bottom: 0; margin-bottom: .7rem;
}

/* No celular a folha ja ocupava quase tudo: vale a tela inteira, sem raio. */
@media (max-width: 760px) {
  .painel.painel-cheio { top: 0; right: 0; bottom: 0; left: 0; border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .painel, .fundo-escuro, .painel-pequeno { transition-duration: .01ms; }
  .painel.painel-cheio, .painel.painel-cheio[data-aberto="sim"] {
    transition: opacity .01ms, transform .01ms, visibility 0s;
  }
}

/* ---------- Painel pequeno, centralizado (troca de senha, Task 31) ----------
   Diferente do .painel lateral (ficha/formulario, ocupa a tela toda de
   altura): este e curto (3 campos) e fica centralizado, como a propria
   tela de entrar. Some por opacidade + escala, nunca por [hidden] — mesmo
   padrao do .painel, para reaproveitar a transicao e o data-aberto. */
.painel-pequeno {
  position: fixed; top: 50%; left: 50%; z-index: 50;
  width: min(360px, 92vw); max-height: 90vh; overflow-y: auto;
  background: var(--papel); border-radius: 12px; box-shadow: var(--sombra);
  border: 1px solid var(--borda);
  opacity: 0; pointer-events: none;
  transform: translate(-50%, -50%) scale(.96);
  transition: opacity .18s ease, transform .18s ease;
}
.painel-pequeno[data-aberto="sim"] { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }

.aviso-sucesso-flutuante {
  position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  background: var(--marca-verde); color: #fff; padding: .6rem 1rem;
  border-radius: 8px; box-shadow: var(--sombra); font-size: .9rem; z-index: 70;
}

/* ---------- Formulario ---------- */

.grupo-campo { margin-bottom: .8rem; }
.grupo-campo label { display: block; font-size: var(--t-apoio); color: var(--texto-suave); margin-bottom: .2rem; }
.grupo-campo input, .grupo-campo select, .grupo-campo textarea {
  width: 100%; padding: .5rem .6rem; font-size: .95rem; font-family: inherit;
  border: 1px solid var(--borda); border-radius: 8px; background: var(--papel); color: var(--texto);
}
.grupo-campo input:focus, .grupo-campo select:focus, .grupo-campo textarea:focus {
  outline: 2px solid var(--marca-verde); outline-offset: 1px;
}
/* Caixa de selecao nao e campo de texto: a regra acima (width:100%,
   padding) a esticava e acolchoava como se fosse. Excecao so para
   checkbox — nao afeta input/select/textarea dos formularios de
   cadastro, que continuam com largura total. */
.grupo-campo input[type="checkbox"] { width: auto; padding: 0; margin: 0; flex-shrink: 0; }
/* Alvo de toque confortavel (>=44px) so no rotulo que envolve a caixa de
   "manter conectado" da tela de entrar — selecionado pelo id do campo
   para nao alcancar o checkbox "Apto a votar em assembleia" do
   formulario de membro. */
.grupo-campo label:has(#manter-conectado) {
  display: flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: .4rem 0; margin-bottom: 0;
}
.grupo-campo textarea { min-height: 5rem; resize: vertical; }
.linha-campos { display: flex; gap: .6rem; }
.linha-campos > * { flex: 1; }

/* Dia, mes e ano de uma data que pode estar incompleta. O <fieldset> nao e
   enfeite: sem ele os tres campos ficam com tres rotulos soltos ("Dia",
   "Mês", "Ano") e nada na tela diz de que data se trata. A <legend> e o
   rotulo do conjunto, e o leitor de tela anuncia os tres dentro dela. */
.grupo-data-parcial {
  border: 0; padding: 0; margin: 0 0 .8rem; min-width: 0;
}
.grupo-data-parcial legend {
  padding: 0; font-size: var(--t-apoio); color: var(--texto-suave); margin-bottom: .2rem;
}
.grupo-data-parcial .grupo-campo { margin-bottom: 0; }
/* Rotulo de caixa de selecao: o texto ao LADO da caixa, nao em cima dela.
   Precisa do .grupo-campo na frente para vencer o `.grupo-campo label
   { display: block }' la de cima (0,1,1 contra 0,1,0) — sem isso o rotulo
   volta a ser bloco, o flex nao vale, o gap some e o texto fica colado na
   caixinha. */
.grupo-campo label.rotulo-caixa {
  display: flex; align-items: center; gap: .5rem;
  font-size: .92rem; color: var(--texto); margin-bottom: 0;
}
.obrigatorio::after { content: " *"; color: var(--marca-vermelho); }
.erro-formulario {
  background: #FDECEC; border: 1px solid var(--tom-E); color: var(--tom-E);
  padding: .6rem .8rem; border-radius: 8px; margin-bottom: .8rem; font-size: .9rem;
}
.acoes-formulario {
  display: flex; gap: .5rem; position: sticky; bottom: 0;
  background: var(--papel); padding: .8rem 0; border-top: 1px solid var(--borda);
}

/* ---------- Menu de edicao rapida (Task 21) ----------
   Acima do painel lateral (z-index 50): a secretaria pode abrir o menu com
   a ficha ja aberta. Alvos de toque de pelo menos 44px por opcao. */

.menu-rapido {
  position: fixed; z-index: 60; min-width: 15rem;
  background: var(--papel); border-radius: var(--raio); box-shadow: var(--sombra);
  border: 1px solid var(--borda); padding: .3rem; overflow: hidden;
}
.menu-rapido-opcao {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  min-height: 44px; padding: .4rem .6rem; border: 0; border-radius: 6px;
  background: none; font: inherit; font-size: .92rem; text-align: left;
  color: var(--texto); cursor: pointer;
}
.menu-rapido-opcao:hover, .menu-rapido-opcao:focus-visible {
  background: var(--realce); outline: none;
}
.menu-rapido-opcao[aria-selected="true"] { font-weight: 700; }
.menu-rapido-opcao:disabled { cursor: default; opacity: .6; }
.menu-rapido-ponto {
  width: .7rem; height: .7rem; border-radius: 50%; flex: 0 0 auto;
}
.menu-rapido-sigla { font-weight: 700; flex: 0 0 auto; min-width: 2.4rem; }
.menu-rapido-rotulo { color: var(--texto-suave); }
.menu-rapido[aria-busy="true"] { opacity: .75; }
.menu-rapido-erro {
  margin: .4rem .3rem 0; padding: .4rem .6rem; font-size: .82rem;
  background: #FDECEC; border: 1px solid var(--tom-E); color: var(--tom-E); border-radius: 6px;
}
.menu-rapido-erro[hidden] { display: none; }

/* ============================================================
   Cartaz de aniversariantes
   ============================================================ */

/* A Cormorant existe para o CANVAS, nao para a tela: e ela que o cartaz usa
   ao desenhar. Fica declarada aqui porque e o unico jeito de o navegador
   conhece-la antes de document.fonts.load. Subconjunto latino apenas — 42 KB
   as duas, e o sistema roda offline.

   A Bitter serve aos dois: ao cartaz e a tela (o titulo do cabecalho e os
   algarismos de abertura dos totais). Por isso ela, e so ela, troca
   `font-display` de block para swap — block esconde o texto ate a fonte
   chegar, e um titulo invisivel por meio segundo a cada carga e pior que
   meio segundo de Georgia no lugar dele. O cartaz nao se importa: ele
   espera por document.fonts.load antes de desenhar, e nao pelo
   font-display. */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal; font-weight: 600; font-display: block;
  src: url("/fontes/cormorant-garamond-600.woff2") format("woff2");
}
@font-face {
  font-family: "Bitter";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fontes/bitter-700.woff2") format("woff2");
}

/* (A quinta fonte do projeto, a Playfair Display da marca, NAO mora aqui: ela
   e da tela, nao do canvas, e esta declarada la em cima, antes do body.) */

/* As duas do catalogo de artes. font-display: block como a Cormorant — o
   cartaz espera por document.fonts.load antes de desenhar, entao o que
   importa aqui e nunca pintar com a fonte errada. */
@font-face {
  font-family: "Fraunces";
  font-style: normal; font-weight: 700; font-display: block;
  src: url("/fontes/fraunces-700.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo Narrow";
  font-style: normal; font-weight: 600; font-display: block;
  src: url("/fontes/archivo-narrow-600.woff2") format("woff2");
}

/* As quatro do acabamento (spec 2026-11-07 §3.4): a cursiva dos titulos, a
   versal do mes dentro da fita, e as faces ITALICAS de duas familias que ja
   existiam. Sem a face italica declarada, o canvas inclina a reta sozinho —
   um falso italico que so aparece no PNG. Mesmo font-display das do catalogo. */
@font-face {
  font-family: "Great Vibes";
  font-style: normal; font-weight: 400; font-display: block;
  src: url("/fontes/great-vibes-400.woff2") format("woff2");
}
@font-face {
  font-family: "Cinzel";
  font-style: normal; font-weight: 600; font-display: block;
  src: url("/fontes/cinzel-600.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic; font-weight: 700; font-display: block;
  src: url("/fontes/playfair-display-700-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic; font-weight: 600; font-display: block;
  src: url("/fontes/cormorant-garamond-600-italic.woff2") format("woff2");
}

/* Dentro da folha suspensa: previa a esquerda, opcoes a direita. A previa
   vem primeiro no HTML porque e o assunto — no celular, onde a grade vira
   uma coluna, e ela que tem de aparecer no topo. */
/* A folha do cartaz nao precisa da altura toda como a da edicao de cadastro,
   que tem vinte campos: aqui o conteudo e curto e esticar ate 2,5vh do
   rodape deixava um vazio grande embaixo da lista. Precisa das TRES classes
   para vencer o `.painel.painel-cheio' (0,2,0) que fixa o bottom. */
.painel.painel-cheio.painel-ajustado { bottom: auto; max-height: 95vh; }

.cartaz-corpo {
  display: grid; gap: 1.4rem;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 820px) {
  .cartaz-corpo { grid-template-columns: 1fr; }
}

.cartaz-previa { display: grid; gap: .5rem; justify-items: center; }

/* A previa e um botao de verdade, nao um canvas com onclick: assim ela
   recebe foco pelo teclado e responde ao Enter, como qualquer acao. */
.cartaz-lupa {
  padding: 0; border: 1px solid var(--borda); border-radius: 4px;
  background: none; cursor: zoom-in; line-height: 0; max-width: 100%;
}
.cartaz-lupa:focus-visible { outline: 2px solid var(--marca-verde); outline-offset: 2px; }
.cartaz-tela { width: 100%; height: auto; display: block; }
.cartaz-dica { margin: 0; font-size: var(--t-apoio); color: var(--texto-suave); }

.cartaz-lado { display: grid; gap: 1rem; align-content: start; min-width: 0; }

/* De onde saiu esta lista. Com a folha por cima, a tela do relatorio some de
   vista e sem esta frase nao da para conferir se o mes e os filtros sao os
   que se queria. */
.cartaz-origem { margin: 0; font-size: var(--t-apoio); color: var(--texto); }

/* Rotulo e campo lado a lado: quatro opcoes empilhadas com rotulo em cima
   ocupariam o dobro da altura e empurrariam a lista de nomes para fora. */
.cartaz-opcoes {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: .5rem .8rem; align-items: center;
}
.cartaz-opcoes label { font-size: var(--t-apoio); color: var(--texto-suave); }
.cartaz-opcoes select, .cartaz-opcoes input {
  width: 100%; padding: .45rem .6rem; font: inherit; font-size: .92rem;
  border: 1px solid var(--borda); border-radius: 8px;
  background: var(--papel); color: var(--texto);
}
.cartaz-opcoes select:focus, .cartaz-opcoes input:focus {
  outline: 2px solid var(--marca-verde); outline-offset: 1px;
}

.cartaz-acoes { display: flex; flex-wrap: wrap; gap: .5rem; }

/* O verde e do WhatsApp, nao da nossa marca: e a unica cor de fora que entra
   na tela, e entra porque o botao promete abrir aquele aplicativo. Contorno
   como o Baixar PNG ao lado, e so o ICONE verde — o mesmo pedido que o botao
   do Diretorio atendeu em 30/09/2026: um bloco verde chamava mais que o resto. */
.botao.botao-zap { display: inline-flex; align-items: center; gap: .45rem; }
.botao.botao-zap .icone-zap { color: var(--zap-escuro); }
.icone-zap { width: 1.15em; height: 1.15em; flex: 0 0 auto; }

.cartaz-titulo-lista { margin: 0; font-size: var(--t-apoio); color: var(--texto-suave); }

/* Um nome por linha, com o dia fixo a esquerda: a coluna do dia alinhada e o
   que deixa ver de relance qual nome esta torto. */
.cartaz-nomes { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.cartaz-nome {
  display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  align-items: center; gap: .4rem; font-size: .9rem;
}
.cartaz-nome-dia { color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.cartaz-nome-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartaz-nome-corrigido { font-weight: 700; }
/* So numa arte porPessoa a linha inteira troca o retratado ao ser clicada
   (ver ligarCartaz em relatorios.js) — o cursor so aparece nesse caso, senao
   prometeria um clique que as artes de lista nao tem. */
.cartaz-nomes[data-por-pessoa] .cartaz-nome { cursor: pointer; border-radius: 6px; }
.cartaz-nomes[data-por-pessoa] .cartaz-nome:hover { background: var(--realce); }
.cartaz-nome-selecionado { background: var(--realce); font-weight: 700; }
.cartaz-nome-editar {
  border: 0; background: none; cursor: pointer; padding: .2rem .35rem;
  border-radius: 4px; color: var(--texto-suave); font: inherit; font-size: .85rem;
}
.cartaz-nome-editar:hover, .cartaz-nome-editar:focus-visible {
  background: var(--realce); color: var(--texto); outline: none;
}
.cartaz-nome-campo {
  width: 100%; padding: .2rem .4rem; font: inherit; font-size: .9rem;
  border: 1px solid var(--borda); border-radius: 4px;
  background: var(--papel); color: var(--texto);
}
/* O controle do tamanho do logo: o deslizante e o valor ao lado. */
.cartaz-logo { display: flex; align-items: center; gap: .6rem; }
.cartaz-logo[hidden] { display: none; }
.cartaz-logo input[type="range"] { flex: 1; padding: 0; border: 0; background: none; }
.cartaz-logo output { min-width: 3.2rem; font-size: var(--t-apoio); color: var(--texto-suave); text-align: right; }
/* No Grupo cada linha ganha a caixa de marcar na frente. */
.cartaz-nome:has(.cartaz-grupo-caixa) { grid-template-columns: auto 2.2rem minmax(0, 1fr) auto; }
.cartaz-grupo-caixa { margin: 0; width: 1rem; height: 1rem; cursor: pointer; }
.cartaz-grupo-caixa:disabled { cursor: not-allowed; }

/* O fundo do acabamento (spec 2026-11-07 secao 7): miniaturas em grade, a
   escolhida com borda cheia. "Outra combinacao" fica no topo do bloco, ao
   lado do rotulo: e o atalho, e as miniaturas sao a escolha fina. */
.cartaz-fundos { display: grid; gap: .5rem; }
.cartaz-fundos[hidden] { display: none; }
.cartaz-fundos-topo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.cartaz-fundos-grade {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(4.2rem, 1fr)); gap: .4rem;
}
.cartaz-fundo {
  padding: 0; border: 2px solid transparent; border-radius: 6px; background: none;
  cursor: pointer; overflow: hidden; aspect-ratio: 4 / 5;
}
.cartaz-fundo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cartaz-fundo:hover { border-color: var(--borda); }
.cartaz-fundo[aria-pressed="true"] { border-color: var(--texto); }
.cartaz-fundo:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; }

.cartaz-aviso {
  margin: 0; padding: .6rem .8rem; font-size: var(--t-apoio);
  background: var(--realce); border-left: 3px solid var(--tom-A); color: var(--texto);
}

/* A imagem em tamanho real, acima da folha (que esta em 50) e do aviso
   flutuante (70). Fundo quase preto: aqui o assunto e so a imagem. */
.cartaz-tela-cheia {
  position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.88);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; cursor: zoom-out;
}
.cartaz-tela-cheia img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
}
.cartaz-tela-cheia-sair {
  position: absolute; top: 1rem; right: 1rem;
  width: 2.6rem; height: 2.6rem; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.5);
  color: #fff; font-size: 1.1rem; line-height: 1;
}
.cartaz-tela-cheia-sair:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* A instrucao do envio quando a pagina nao pode copiar a imagem sozinha: mora
   em cima da imagem ampliada, porque e nela que o clique direito acontece — na
   folha, por baixo da camada escura, ninguem a leria. */
.cartaz-tela-cheia-dica {
  position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%);
  max-width: min(36rem, calc(100% - 2rem)); margin: 0; padding: .6rem .9rem;
  border-radius: 8px; background: rgba(0,0,0,.72); color: #fff;
  font-size: .95rem; line-height: 1.4; text-align: center;
}

/* ============================================================
   A identidade dos relatorios na tela
   ============================================================
   O modelo que o dono aprovou na disciplina (24/09/2026) e pediu para todos
   os relatorios: a barra de filtros numa folha, com um icone para cada
   relatorio na pastilha e na lista aberta; os totais em cartoes com icone
   (a secao logo acima); uma nota de rodape com o simbolo de informacao; e a
   lista num cartao, onde cada pessoa entra com o retrato ao lado do nome, a
   situacao e o status em pilulas, um dado que falta e um travessao, cada
   linha tem os tres pontos que abrem a ficha ou a edicao, e todo grupo
   (faixa, familia, nucleo, bloco da disciplina) abre e fecha, com um veu de
   cor que separa um grupo do vizinho.

   O papel NAO passa por aqui: tudo de tela fica em @media screen, e as
   classes que o @media print de impressao.css conhece (.totais-relatorio,
   .total-item, .linha-familia, .tabela-familias) continuam nos mesmos
   lugares — la a folha continua sendo a tabela de sempre.

   Cor: o vinho da marca em dois lugares e mais nenhum (Filtrar e os chips
   de status marcados, a abertura dos totais). Os veus dos grupos e dos
   cartoes nascem das cores de situacao que ja existem, por [data-tom]. */

@media screen {
  /* ---- a barra: uma folha, com os chips dentro ---- */
  .barra-relatorio {
    background: var(--papel); border: 1px solid var(--borda);
    border-radius: var(--raio); padding: .7rem .8rem; gap: .55rem;
  }
  /* Os chips vem depois das saidas no HTML e antes delas na tela. */
  .barra-relatorio .filtros { max-width: none; margin: 0; order: 5; }
  .barra-relatorio .saidas-relatorio { order: 10; }
  .barra-relatorio .filtro-chip[data-status][aria-pressed="true"],
  .barra-relatorio .filtro-chip-liga[aria-pressed="true"] {
    background: var(--marca-vinho); border-color: var(--marca-vinho); color: var(--marca-tinta);
  }
  /* O visto antes do nome (pedido do dono, 15/10/2026: "melhore a identificacao da marcacao"): a pastilha
     marcada ja era pintada de vinho, mas pintar so por cor deixa a duvida de quem olha rapido — o visto
     diz "ligado" sem depender da cor, e vale para quem nao distingue o vinho do branco. Vale para os dois
     de status (Ativos, Inativos) e para os interruptores do mesmo desenho (.filtro-chip-liga, hoje o de
     "Criancas" nas visitas ausentes). */
  .barra-relatorio .filtro-chip[data-status][aria-pressed="true"]::before,
  .barra-relatorio .filtro-chip-liga[aria-pressed="true"]::before {
    content: "✓"; font-weight: 700; line-height: 1;
  }
  .campos-disciplina { align-items: center; gap: .55rem; }

  /* Um icone para cada relatorio, desenhado no CSS: o mesmo desenho na
     pastilha fechada e na lista aberta, pintado por currentColor atraves de
     uma mascara — assim ele acompanha o tema sem uma imagem por cor. Os
     desenhos sao os mesmos dos totais (ICONE em relatorios.js): uma lista,
     a mao levantada da assembleia, o bolo, as pessoas, a familia, o lar, as
     barras do resumo e a balanca. */
  .barra-relatorio {
    --icone-geral: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01'/%3E%3C/svg%3E");
    --icone-assembleia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 4V2.5h6V4M8.5 12.5l2.5 2.5 4.5-5'/%3E%3C/svg%3E");
    --icone-aniversariantes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20.5h16M5 20.5v-6.5h14v6.5M3.5 14a3 3 0 0 0 4.2 0 3 3 0 0 0 4.3 0 3 3 0 0 0 4.3 0 3 3 0 0 0 4.2 0M7 10.5V14M12 10.5V14M17 10.5V14M7 8.5v-2M12 8.5v-2M17 8.5v-2'/%3E%3C/svg%3E");
    --icone-faixas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.3'/%3E%3Cpath d='M2.8 20a6.2 6.2 0 0 1 12.4 0M15.5 5.2a3.3 3.3 0 0 1 0 5.6M17.6 14.3A6.2 6.2 0 0 1 21.2 20'/%3E%3C/svg%3E");
    /* O pulpito: o tampo inclinado onde a Biblia se apoia, o corpo com a
       cruz na frente e o degrau. E o relatorio dos oficiais e assistentes,
       quem prega, preside e serve a mesa (13/10/2026). */
    --icone-oficiais: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 9.6 19.5 7.4M7 10.3 8.5 19h7l1.5-9.6M6 21h12M12 12.4v4.2M10.4 14h3.2'/%3E%3C/svg%3E");
    --icone-familias: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='7' r='2.8'/%3E%3Ccircle cx='16.5' cy='7.5' r='2.4'/%3E%3Ccircle cx='12' cy='14' r='2.2'/%3E%3Cpath d='M2.5 16.5a5.5 5.5 0 0 1 8-4.6M21.5 16.5a5 5 0 0 0-7.4-4.4M8.5 21.5a3.6 3.6 0 0 1 7 0'/%3E%3C/svg%3E");
    --icone-nucleos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 11.5 12 4l8.5 7.5M5.5 10v10h13V10M10 20v-5.5h4V20'/%3E%3C/svg%3E");
    --icone-estatisticas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16M6 16v-5M11 16V6M16 16v-8'/%3E%3C/svg%3E");
    --icone-disciplina: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M6 21h12M4 7h16M6 7l-3 7a3.5 3.5 0 0 0 6 0L6 7ZM18 7l-3 7a3.5 3.5 0 0 0 6 0l-3-7Z'/%3E%3C/svg%3E");
    --icone-visitas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3.5 10h17M12 18.4s-2.8-1.6-2.8-3.4a1.5 1.5 0 0 1 2.8-.7 1.5 1.5 0 0 1 2.8.7c0 1.8-2.8 3.4-2.8 3.4Z'/%3E%3C/svg%3E");
    /* Visitas pastorais ausentes (15/10/2026): o calendario das visitas, com o coracao trocado por um
       traco: quem ficou de fora do periodo. */
    /* Visitas Pastorais Ausentes - Motivos (15/10/2026): a folha com linhas, o desenho do motivo nas listas da visita. */
    --icone-motivos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h6'/%3E%3C/svg%3E");
    --icone-ausentes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3.5 10h17M9 15.5h6'/%3E%3C/svg%3E");
  }
  .barra-relatorio[data-tipo="geral"] { --icone-do-tipo: var(--icone-geral); }
  .barra-relatorio[data-tipo="assembleia"] { --icone-do-tipo: var(--icone-assembleia); }
  .barra-relatorio[data-tipo="aniversariantes"] { --icone-do-tipo: var(--icone-aniversariantes); }
  .barra-relatorio[data-tipo="faixas"] { --icone-do-tipo: var(--icone-faixas); }
  .barra-relatorio[data-tipo="oficiais"] { --icone-do-tipo: var(--icone-oficiais); }
  .barra-relatorio[data-tipo="familias"] { --icone-do-tipo: var(--icone-familias); }
  .barra-relatorio[data-tipo="nucleos"] { --icone-do-tipo: var(--icone-nucleos); }
  .barra-relatorio[data-tipo="estatisticas"] { --icone-do-tipo: var(--icone-estatisticas); }
  .barra-relatorio[data-tipo="disciplina"] { --icone-do-tipo: var(--icone-disciplina); }
  .barra-relatorio[data-tipo="visitas"] { --icone-do-tipo: var(--icone-visitas); }
  .barra-relatorio[data-tipo="ausentes"] { --icone-do-tipo: var(--icone-ausentes); }
  .barra-relatorio[data-tipo="motivos"] { --icone-do-tipo: var(--icone-motivos); }

  /* Com a lista customizavel (base-select, ver .seletor-principal), a
     pastilha e as opcoes sao caixas normais e aceitam um ::before: e ele
     que carrega o icone, mascarado e pintado por currentColor. */
  @supports (appearance: base-select) {
    .seletor-principal { display: inline-flex; align-items: center; gap: .6rem; }
    .seletor-principal::before,
    .seletor-principal option::before {
      content: ""; flex: 0 0 auto; width: 1.15rem; height: 1.15rem;
      background: currentColor;
      -webkit-mask: var(--icone) center / contain no-repeat;
      mask: var(--icone) center / contain no-repeat;
    }
    .seletor-principal::before { --icone: var(--icone-do-tipo); color: var(--marca-verde); }
    .seletor-principal option { display: flex; align-items: center; gap: .7rem; }
    .seletor-principal option::before { color: var(--texto-suave); }
    .seletor-principal option:checked::before { color: inherit; }
    .seletor-principal option[value="geral"]::before { --icone: var(--icone-geral); }
    .seletor-principal option[value="assembleia"]::before { --icone: var(--icone-assembleia); }
    .seletor-principal option[value="aniversariantes"]::before { --icone: var(--icone-aniversariantes); }
    .seletor-principal option[value="faixas"]::before { --icone: var(--icone-faixas); }
    .seletor-principal option[value="oficiais"]::before { --icone: var(--icone-oficiais); }
    .seletor-principal option[value="familias"]::before { --icone: var(--icone-familias); }
    .seletor-principal option[value="nucleos"]::before { --icone: var(--icone-nucleos); }
    .seletor-principal option[value="estatisticas"]::before { --icone: var(--icone-estatisticas); }
    .seletor-principal option[value="disciplina"]::before { --icone: var(--icone-disciplina); }
    .seletor-principal option[value="visitas"]::before { --icone: var(--icone-visitas); }
    .seletor-principal option[value="ausentes"]::before { --icone: var(--icone-ausentes); }
    .seletor-principal option[value="motivos"]::before { --icone: var(--icone-motivos); }
  }

  /* Os icones dentro das pastilhas da disciplina (datas, estado, vinculo),
     desenhados no fundo para nao mexer na marcacao dos <select> — o
     appearance:none de .seletor ja pinta a seta assim. Traco cinza neutro,
     que le nas duas paletas. */
  .campo-data {
    padding: .4rem .7rem .4rem 2.3rem; cursor: text;
    background: var(--papel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") no-repeat left .75rem center / 1rem 1rem;
  }
  .campo-data::-webkit-calendar-picker-indicator { opacity: .6; cursor: pointer; }
  .entre-datas { color: var(--texto-suave); font-size: .85rem; margin: 0 -.1rem; }
  .seletor.com-icone { padding-left: 2.3rem; background-size: 1rem 1rem, 12px 12px;
    background-position: left .75rem center, right .75rem center; }
  .seletor.icone-estado {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.3'/%3E%3Cpath d='M2.8 20a6.2 6.2 0 0 1 12.4 0M15.5 5.2a3.3 3.3 0 0 1 0 5.6M17.6 14.3A6.2 6.2 0 0 1 21.2 20'/%3E%3C/svg%3E"), var(--seta-lista);
  }
  .seletor.icone-pessoa {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M5 20.5a7 7 0 0 1 14 0'/%3E%3C/svg%3E"), var(--seta-lista);
  }

  /* Filtrar e o unico botao cheio da barra: e ele que troca a folha. */
  .botao-filtrar {
    display: inline-flex; align-items: center; gap: .45rem;
    border: 1px solid var(--marca-vinho); border-radius: 8px;
    background: var(--marca-vinho); color: var(--marca-tinta);
    font-family: inherit; font-size: .875rem; font-weight: 600;
    padding: .48rem 1rem; cursor: pointer; white-space: nowrap;
  }
  .botao-filtrar svg { width: 1rem; height: 1rem; }
  .botao-filtrar:hover { background: color-mix(in srgb, var(--marca-vinho) 85%, black); }
  .botao-filtrar:focus-visible, .botao-limpar-recorte:focus-visible {
    outline: 2px solid var(--marca-verde); outline-offset: 2px;
  }
  /* Limpar filtros e texto, com o icone numa caixinha: desfaz, nao age. */
  .botao-limpar-recorte {
    display: inline-flex; align-items: center; gap: .5rem;
    border: 0; background: none; color: var(--texto); font-family: inherit;
    font-size: .85rem; padding: 0 .3rem 0 0; cursor: pointer; white-space: nowrap;
  }
  .botao-limpar-recorte svg {
    width: 2rem; height: 2rem; padding: .45rem; box-sizing: border-box;
    border: 1px solid var(--borda); border-radius: 8px; color: var(--texto-suave);
  }
  .botao-limpar-recorte:hover { text-decoration: underline; }
  .botao-limpar-recorte:hover svg { border-color: var(--texto-suave); }

  /* ---- a nota do relatorio: uma faixa com o simbolo de informacao ---- */
  #relatorio > .nota-relatorio {
    max-width: none; margin: 0 0 .9rem; padding: .7rem .9rem .7rem 2.9rem;
    background: var(--papel); border: 1px solid var(--borda); border-radius: var(--raio);
    color: var(--texto-suave); line-height: 1.45; position: relative;
  }
  #relatorio > .nota-relatorio::before {
    content: ""; position: absolute; left: .85rem; top: .75rem;
    width: 1.35rem; height: 1.35rem;
    background: var(--texto-suave);
    -webkit-mask: 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%3Ccircle cx='12' cy='12' r='9.5' stroke-width='1.6'/%3E%3Cpath d='M12 11v6M12 7.5v.01'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: 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%3Ccircle cx='12' cy='12' r='9.5' stroke-width='1.6'/%3E%3Cpath d='M12 11v6M12 7.5v.01'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  /* ---- o titulo do recorte da disciplina, com as saidas ao lado ---- */
  .recorte-disciplina {
    display: grid; grid-template-columns: 1fr auto; align-items: center;
    gap: .15rem 1rem; margin: 1.1rem 0 .7rem;
  }
  .titulo-recorte {
    margin: 0; display: flex; align-items: center; gap: .55rem;
    font-family: var(--letra-titulo); font-weight: 700; font-size: var(--t-titulo);
    line-height: 1.2; color: var(--tinta-mesa);
  }
  .titulo-recorte svg { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; color: var(--vinho-texto); }
  .acoes-disciplina { display: flex; gap: .5rem; }
  .acoes-disciplina .saida {
    border: 1px solid var(--borda); border-radius: 8px; background: var(--papel);
    color: var(--texto); padding: .45rem .85rem;
  }
  .recorte-disciplina .nota-relatorio { grid-column: 1 / -1; margin: 0; max-width: none; }

  /* ---- a lista ---- */
  .tabela-relatorio { border: 1px solid var(--borda); box-shadow: none; margin-top: .2rem; }
  .tabela-relatorio + .tabela-relatorio { margin-top: 1.2rem; }
  .tabela-relatorio thead th { padding: .55rem .9rem; }
  .tabela-relatorio th.ordenavel .ordenar { padding: .55rem .9rem; }
  .tabela-relatorio th .seta-ordem { opacity: .6; font-size: .8em; }
  .tabela-relatorio td { padding: .45rem .9rem; vertical-align: middle; }
  .tabela-relatorio tbody tr:hover { background: color-mix(in srgb, var(--texto) 3%, transparent); }
  .tabela-relatorio td.ordem { width: 1%; color: var(--texto-suave); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .tabela-relatorio td.nasc, .tabela-relatorio td.idade, .tabela-relatorio td.telefone { white-space: nowrap; }
  .tabela-relatorio td.acoes, .tabela-relatorio th.acoes { width: 1%; text-align: right; padding-right: .7rem; }
  .sem-dado { color: var(--texto-suave); }

  /* A pessoa: o retrato em miniatura e o nome, na mesma linha. */
  .pessoa-celula { display: inline-flex; align-items: center; gap: .65rem; }
  .tabela-relatorio .avatar { width: 34px; height: 34px; font-size: .78rem; }
  /* O recuo por geracao das familias soma o retrato: o degrau continua
     visivel com o circulo na frente do nome. */
  .tabela-relatorio .nome-familia { padding-left: calc(.9rem + var(--nivel, 0) * 1.6rem) !important; }

  /* As duas pilulas: a da situacao, na cor da spec; a do status, verde para
     Ativo e cinza para Inativo. As duas com o ponto e a palavra — a cor
     nunca informa sozinha. */
  .pilula-situacao, .pilula-status {
    display: inline-flex; align-items: center; gap: .35rem;
    border-radius: 999px; padding: .12rem .55rem .12rem .45rem;
    font-size: .72rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
    background: color-mix(in srgb, var(--cor-marca, currentColor) 10%, var(--papel));
  }
  .pilula-situacao .ponto, .pilula-status .ponto {
    width: .5rem; height: .5rem; border-radius: 50%; background: var(--cor-marca, currentColor);
  }
  .pilula-status { font-weight: 600; }
  /* "sob disciplina" ao lado da sigla Membro: a pilula da situacao, com
     folga da sigla e sem a caixa alta das siglas. */
  .etiqueta-disciplina { margin-left: .35rem; font-weight: 600; letter-spacing: 0; vertical-align: middle; }
  .status-ativo { color: var(--sit-M-texto); --cor-marca: var(--tom-M); }
  .status-inativo { color: var(--sit-N-texto); --cor-marca: var(--tom-N); }

  /* Os tres pontos: abrem o menu da pessoa (ficha, editar). */
  .menu-pessoa-abre {
    display: inline-grid; place-items: center; vertical-align: middle;
    width: 2rem; height: 2rem; border: 1px solid var(--borda); border-radius: 8px;
    background: var(--papel); color: var(--texto-suave); cursor: pointer; padding: 0;
  }
  .menu-pessoa-abre svg { width: 1.1rem; height: 1.1rem; }
  .menu-pessoa-abre:hover, .menu-pessoa-abre[aria-expanded="true"] {
    border-color: var(--texto-suave); color: var(--texto);
  }
  .menu-pessoa-abre:focus-visible { outline: 2px solid var(--marca-verde); outline-offset: 2px; }
  .menu-pessoa-disciplina { min-width: 12rem; }

  /* ---- os grupos: cabecalho recolhivel e o veu de cor ---- */
  .tabela-agrupada .grupo-lista td {
    border-top: 0; padding: .6rem .9rem;
    background: color-mix(in srgb, var(--tom-cor, var(--texto)) 8%, var(--papel));
  }
  .grupo-lista-abre {
    display: inline-grid; place-items: center; vertical-align: middle;
    width: 1.7rem; height: 1.7rem; margin-right: .7rem; border-radius: 50%;
    border: 1px solid var(--borda); background: var(--papel); color: var(--texto);
    cursor: pointer; padding: 0;
  }
  .grupo-lista-abre svg { width: .95rem; height: .95rem; transition: transform .15s; }
  .grupo-lista-abre[aria-expanded="true"] svg { transform: rotate(180deg); }
  .grupo-lista-abre:disabled { cursor: default; opacity: .55; }
  .grupo-lista-abre:focus-visible { outline: 2px solid var(--marca-verde); outline-offset: 2px; }
  .grupo-lista-titulo {
    vertical-align: middle; font-family: var(--letra-titulo); font-weight: 700; font-size: 1rem;
  }
  .grupo-lista .faixa-intervalo { vertical-align: middle; }
  .tabela-agrupada .contagem-familia { vertical-align: middle; margin-left: .7rem; }

  /* Recolhido: somem as linhas de dentro, fica o cabecalho. */
  .tabela-agrupada tbody[data-recolhido] tr:not(.grupo-lista) { display: none; }

  /* A faixa a esquerda das linhas de dentro, no tom do grupo: e ela que
     diz, a duas rolagens do cabecalho, a que grupo a linha pertence. */
  .tabela-agrupada tbody[data-tom] tr:not(.grupo-lista) td:first-child {
    box-shadow: inset 2.6rem 0 0 color-mix(in srgb, var(--tom-cor) 6%, var(--papel));
  }
  /* As linhas de aviso de um grupo (citados fora do cadastro, ocultadas
     pelos filtros) nao levam a faixa: sao rodape do grupo, nao pessoas. */
  .tabela-agrupada .externos-familia td, .tabela-agrupada .ocultadas-familia td { box-shadow: none; }

  /* ---- a disciplina: a linha da pessoa e a do periodo ---- */
  .tabela-disciplina .pessoa-disciplina td {
    background: var(--papel); border-top: 1px solid var(--borda); border-bottom: 0;
    padding: .6rem .9rem .3rem 2.9rem; font-weight: normal;
  }
  .pessoa-disciplina-nome { flex-wrap: wrap; }
  .pessoa-disciplina-nome .nome-membro { font-family: var(--letra-titulo); font-weight: 700; font-size: .95rem; }
  .pessoa-disciplina .menu-pessoa-abre { float: right; margin: -.1rem 0 0 .6rem; }
  .tabela-disciplina .periodo-disciplina-linha td {
    border-bottom: 0; padding: .3rem .9rem .85rem; vertical-align: top;
    font-size: var(--t-apoio); line-height: 1.45;
  }
  .tabela-disciplina .periodo-disciplina-linha td:first-child { padding-left: 2.9rem; white-space: nowrap; }
  .tabela-disciplina .periodo-disciplina-linha + .periodo-disciplina-linha td { padding-top: 0; }
  /* Motivo e medida na tinta suave (Duracao entrou como 3a coluna). */
  .tabela-disciplina .periodo-disciplina-linha td:nth-child(4),
  .tabela-disciplina .periodo-disciplina-linha td:nth-child(5) { color: var(--texto-suave); }
  /* A duracao e a resposta das duas datas ao lado: algarismos de largura
     igual, para "4 meses" e "11 meses" alinharem de uma linha para a outra.
     A conta da em curso diz ate quando contou numa segunda linha, menor: na
     tela "até hoje", no papel a data (impressao.css troca uma pela outra). */
  /* Numa linha so: a duracao mais longa ("1 ano, 11 meses e 30 dias") cabe
     com folga, e quem cede largura e o Motivo, que ja e texto corrido. */
  .tabela-disciplina .periodo-disciplina-linha td:nth-child(3) { font-variant-numeric: tabular-nums; white-space: nowrap; }
  .duracao-ate { display: block; font-size: .86em; color: var(--texto-suave); }
  .duracao-ate-papel { display: none; }
  .selo-em-curso {
    display: inline-block; border-radius: 999px; padding: .1rem .6rem;
    font-size: .72rem; font-weight: 700; white-space: nowrap;
    color: var(--sit-SD-texto); background: color-mix(in srgb, var(--tom-SD) 12%, var(--papel));
  }
  /* "Em curso", e nao "Em Curso": so a primeira letra sobe. */
  .selo-em-curso::first-letter { text-transform: uppercase; }
}

@media screen and (max-width: 760px) {
  .campos-disciplina { width: 100%; }
  .campos-disciplina .campo-data { flex: 1 1 8rem; }
  .botao-filtrar { min-height: 44px; }
  .recorte-disciplina { grid-template-columns: 1fr; }
  .acoes-disciplina .saida { flex: 1 1 0; justify-content: center; }
}

/* ---------- Painel inicial ----------
   A tela de abertura do sistema, e a unica que a lideranca da igreja projeta
   numa reuniao. Duas decisoes mandam em tudo que vem abaixo.

   A primeira: a ousadia e gasta num lugar so, a parede. Numero grande com
   rotulo pequeno e a abertura de qualquer painel do mundo e nao diz nada
   sobre ESTA igreja. A parede diz: os rostos de quem esta ativo hoje, em
   ladrilhos de tres tamanhos sorteados a cada visita, e o aniversariante da
   semana grande, com a fita. Do plinto para baixo tudo e disciplinado e
   quieto, reaproveitando as medidas do panorama.

   A segunda: os corpos de letra saem de calc(var(--base) * N), nunca de rem.
   rem e a raiz do documento, que os botoes A- A A+ nao mexem — eles mexem em
   --escala, e --base e quem a carrega. Escrever 2rem aqui seria um numero que
   ignora o controle de tamanho de letra bem no lugar do sistema onde ele mais
   importa: a tela que se le de longe. Os degraus sao 1,333 (quarta justa) a
   partir de --base: /1,333 para legenda, x1,333, x1,777 e x2,369 acima.

   Cor: nenhuma nova. A paleta das nove situacoes e a UNICA com significado
   nesta tela e aparece so na faixa de composicao; todas as demais barras
   herdam --panorama-tinta sobre --panorama-trilho do componente panorama.
   O movimento tambem e um so, e ja existe: a faixa de composicao crescendo
   de zero na carga (.panorama-vivo), com o desligamento por
   prefers-reduced-motion ja escrito la em cima, junto da regra que anima.
   Nada aqui acrescenta transicao nenhuma — fade-and-slide em cada cartao e
   o visual generico que se reconhece de longe. */

/* Os blocos do painel em pilha, com um so vao entre eles: assim nenhum bloco
   carrega margem propria e a distancia nao depende de quem esta ao lado. */
#painel { display: grid; gap: 1.2rem; align-content: start; }

/* ---------- O mosaico ----------
   A folha decide as MEDIDAS, painel.js decide o NUMERO. Aqui ficam o
   tamanho-alvo de um ladrilho (--ladrilho-alvo) e o teto de fileiras
   (--fileiras); painel.js divide a largura real pelo alvo, arredonda, e
   escreve --colunas na propria parede. O calculo que monta o mosaico
   (painel-html.js) e a grade que o desenha falam entao do mesmo numero —
   fosse a folha a deduzi-lo sozinha, o calculo montaria para uma largura e
   o desenho sairia em outra, com fotos penduradas para fora das linhas.

   Nem reorganizacao automatica nem preenchimento automatico de colunas: a
   ordem calculada ja e a ordem final, e deixar o navegador reorganizar
   desfaria exatamente o encaixe que o calculo montou.

   O alvo e de 60px porque abaixo disso um rosto de uma celula deixa de se
   reconhecer de longe, e acima disso um projetor de 1400px caberia menos de
   vinte colunas — e o ladrilho grande, que e o efeito, passaria a ocupar
   um sexto da tela. As cinco fileiras sao a altura de um retrato de grupo:
   o mosaico e a abertura, nao a tela.

   No celular o alvo cai para 42px e o teto sobe para oito fileiras: o que
   se quer ver ali e o rosto grande (o aniversariante, em 3x3, sai com uns
   120px), e os pequenos so fazem o fundo. Antes, sem teto, 46 rostos eram
   mais de uma tela inteira de fotos antes do primeiro numero.

   O vao de 2px e o rejunte: e o que faz cada rosto ler como um retrato
   pendurado em vez de um pixel de um tecido continuo. Colado (a primeira
   versao), duas blusas da mesma cor viravam uma mancha so. O rejunte sai da
   cor do papel, a mesma dos quadros abaixo, e a moldura de 1px e a mesma
   deles: a parede vira o primeiro quadro do painel, e nao um corpo
   estranho acima dele. */
.parede {
  display: grid;
  /* Os tres numeros que painel.js le. --colunas e so o padrao para o
     instante antes de o script escrever o calculado. */
  --colunas: 12;
  --ladrilho-alvo: 54px;
  grid-template-columns: repeat(var(--colunas), 1fr);
  gap: 2px;
  padding: 2px;
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
}
@media (max-width: 619px) { .parede { --ladrilho-alvo: 42px; } }

/* Sem ninguem ativo com foto o mosaico nao desenha nada, e um retangulo de
   borda com nada dentro e pior que retangulo nenhum. */
.parede:empty { display: none; }

/* O ladrilho e um botao (abre a ficha daquela pessoa), entao precisa desfazer
   o que o navegador poe nele. Quadrado exato pelo aspect-ratio: sem ele, a
   fileira incompleta do fim mudaria de altura conforme a foto que caisse la.

   Os tamanhos sao todos QUADRADOS (1x1, 2x2, 3x3): um retangulo no meio
   esticaria as fotos, que sao todas de rosto, numa direcao so. Quem escolhe
   o tamanho de cada um e painel-html.js, por sorteio a cada visita — a
   variacao e o que da a cada rosto a sua vez de aparecer grande. A unica
   escolha feita de proposito e a do aniversariante da semana, que recebe o
   maior ladrilho e a fita. */
.ladrilho {
  aspect-ratio: 1; border: 0; padding: 0; margin: 0;
  display: grid; place-items: center; overflow: hidden;
  position: relative; cursor: pointer;
  background: var(--panorama-trilho); color: var(--texto-suave);
  font-family: inherit; font-size: var(--t-nota); line-height: 1;
}
.ladrilho-m { grid-column: span 2; grid-row: span 2; }
.ladrilho-g { grid-column: span 3; grid-row: span 3; }
.ladrilho img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A fita do aniversariante: papel sobre a foto, com o filete vermelho da
   marca na borda — a mesma tinta do filete que fecha a capa, e a unica cor
   da marca que entra na parede. Fica no pe do ladrilho, no canto, para
   nao cobrir o rosto que ela aponta; o corpo e fixo em px porque a fita
   mora numa foto, nao no texto da pagina, e crescer com A+ a faria cobrir
   o rosto no celular. */
.ladrilho-fita {
  position: absolute; left: .5rem; bottom: .5rem;
  padding: .2rem .55rem .25rem;
  background: color-mix(in srgb, var(--papel) 92%, transparent);
  color: var(--texto);
  border-left: 3px solid var(--marca-vermelho); border-radius: 3px;
  font-size: 12.5px; font-weight: 600; line-height: 1.2; white-space: nowrap;
}
@media (max-width: 619px) {
  .ladrilho-fita { left: .3rem; bottom: .3rem; font-size: 11px; padding: .15rem .4rem .2rem; }
}
/* A fita com destino e porta para o relatorio de aniversariantes: a mao e o
   sublinhado dizem isso so a ela, e nao ao rosto em volta, que amplia a foto. */
.ladrilho-fita[data-relatorio] { cursor: pointer; }
.ladrilho-fita[data-relatorio]:hover {
  text-decoration: underline; text-underline-offset: 2px;
}
/* Sem transformacao e sem transicao: o unico movimento da tela e o da faixa
   de composicao. O que o ladrilho precisa e sair da frente dos vizinhos —
   dai o z-index, que levanta o anel para ele nao ser coberto pelo ladrilho
   pintado depois. O anel entra para dentro (offset negativo) porque colados
   nao ha um pixel de folga la fora onde desenha-lo.

   O :focus-visible daqui esta INALCANCAVEL hoje, de proposito: a parede e
   decoracao (aria-hidden) e todo ladrilho leva tabindex="-1", entao o teclado
   nunca para num deles — quem usa teclado ou leitor de tela chega ao cadastro
   pelo atalho "ver a lista de nomes". Fica como rede: no dia em que a parede
   deixar de ser decorativa e os ladrilhos voltarem a ordem de tabulacao, o
   foco ja nasce visivel, em vez de ficar invisivel ate alguem reparar. */
.ladrilho:hover, .ladrilho:focus-visible {
  outline: 2px solid var(--marca-verde); outline-offset: -2px; z-index: 1;
}

/* ---------- O aviso de carga ----------
   "Nao consegui carregar o cadastro" tinha de caber em algum lugar depois que
   a placa da abertura saiu da tela. Fica aqui, abaixo do mosaico, e some
   sozinho quando nao ha o que dizer — um paragrafo vazio ocupando espaco
   empurraria a tela inteira para baixo sem motivo. */
.aviso-painel { margin: 0; }
.aviso-painel:empty { display: none; }
.aviso-painel .vazio { padding: 1rem 0 0; text-align: left; }

/* ---------- A caixa do resumo ----------
   Recorte, totais e composicao numa peca so: e "quantos somos", e os tres
   falam disso. A caixa e um cartao como os quadros abaixo (papel, borda,
   raio) — nao um cartao a mais, e sim o que junta tres pecas que eram tres
   cartoes. As reguas internas (.totais) dividem a caixa em tres andares:
   a linha do recorte e da acao, os cinco numeros, a faixa com a legenda. */
.resumo {
  background: var(--papel); border: 1px solid var(--borda);
  border-radius: var(--raio); overflow: hidden;
}
/* Recorte a esquerda, "Cadastrar pessoa" a direita. Quebra em duas linhas
   no celular, onde os dois nao cabem lado a lado. */
.resumo-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem .9rem; flex-wrap: wrap;
  padding: .8rem 1.1rem;
}
.composicao { padding: 1rem 1.1rem 1.1rem; }

/* ---------- O recorte do painel inteiro ----------
   Este seletor muda o significado de TODOS os numeros abaixo dele, e por
   isso e o unico controle de organizacao da tela que fica sempre visivel:
   escondido atras de um hover, alguem deixaria o painel em "somente
   inativos" e leria os numeros errados numa reuniao sem entender por que.
   O rotulo e escrito, pela mesma razao: um seletor mudo diria "Todos" sem
   dizer todos de que. */
.recorte-geral {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.recorte-geral-rotulo {
  /* Dentro da caixa, sobre o papel — nao mais sobre a mesa. */
  font-size: var(--t-apoio); color: var(--texto-suave);
}
.recorte-geral select {
  font: inherit; font-size: var(--t-apoio);
  padding: .3rem .5rem; border-radius: 6px;
  border: 1px solid var(--borda); background: var(--papel); color: var(--texto);
}
.recorte-geral select:focus-visible {
  outline: 2px solid var(--marca-verde); outline-offset: 1px;
}

@media screen {
  /* ---------- Os quatro totais ----------
     Vao de 1px sobre o fundo da borda: as reguas entre as celulas saem do
     proprio vao, sem borda em cada uma, e por isso nao ha linha dupla no
     encontro delas. E o mesmo desenho de .panorama-celulas, de proposito —
     os numeros do painel e os do resumo estatistico sao a mesma coisa.

     As duas classes do numero e do rotulo ja existem, vestidas para a linha
     corrida dos relatorios; as regras abaixo levam .totais na frente para
     vencer aquelas por especificidade, e precisam refazer display, ordem,
     corpo e cor — nao basta acrescentar.

     E por herdarem aquelas duas classes o bloco inteiro fica dentro de
     @media screen, como o dos relatorios ali em cima e pela mesma razao: o
     @media print de impressao.css desmonta as duas numa linha corrida de
     texto e nao reseta familia de fonte, ordem nem recuo. Regra destas solta
     fora do screen atravessa para o papel — e o teste de impressao.test.js
     esta ali justamente para pegar quem esquecer. Vale para o comentario
     tambem: ele nao escreve os nomes das classes, ou o proprio teste, que le
     o arquivo como texto, acusaria este paragrafo. */
  /* Cinco celulas agora (entrou "sob disciplina", ao lado dos aptos). O
     auto-fit com piso de 8,5rem, e nao um repeat(5, 1fr) fixo: a 1100px
     cinco colunas de numero grande espremeriam o rotulo "aptos à assembleia"
     em tres linhas. Assim elas quebram sozinhas para duas fileiras quando
     nao cabem, sem precisar de mais um ponto de quebra escrito a mao.

     E o andar do meio da caixa do resumo: sem raio e sem borda nos lados
     (a caixa ja tem os dela), so as duas reguas horizontais que o separam
     do recorte acima e da faixa abaixo. */
  .totais {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 1px;
    background: var(--borda);
    border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda);
  }
  /* Tres dos quatro sao <a> agora (total, ativos, aptos abrem a lista ja
     filtrada); membros efetivos continua <p>. A mesma classe serve aos
     dois, e o reset abaixo e so o que faz o <a> deixar de parecer link do
     navegador — cor e sublinhado — sem mudar nada no <p>, que ja herdava
     os dois por padrao. */
  /* O veu da marca em vez de papel puro. Papel branco sobre fundo quase
     branco fazia a fileira inteira sumir na pagina — os cinco numeros que
     mais se leem nesta tela nao tinham borda visivel contra o que estava
     em volta.

     O veu vai como camada sobre --papel, e nao como uma cor escrita a mao:
     assim a mesma regra serve aos dois temas, sobre o papel de cada um. */
  .totais .total {
    display: block; margin: 0; padding: .95rem 1.05rem;
    background: linear-gradient(var(--veu-marca), var(--veu-marca)), var(--papel);
    color: inherit; text-decoration: none;
  }
  /* No hover o veu adensa, em vez de entrar um cinza neutro por cima: o
     realce fica na mesma cor da identidade, e nao numa segunda. */
  .totais a.total:hover {
    background: linear-gradient(var(--veu-marca-forte), var(--veu-marca-forte)),
                var(--papel);
  }
  .totais a.total:focus-visible {
    outline: 2px solid var(--marca-verde); outline-offset: -2px;
  }
  /* Bitter 700 e a serifada pesada do projeto: ela da peso de documento a um
     numero que vai ser lido em voz alta numa reuniao, e os algarismos de
     largura fixa mantem as quatro celulas alinhadas entre si. */
  .totais .total-numero {
    display: block;
    font-family: var(--letra-titulo); font-weight: 700;
    font-size: var(--t-total);
    line-height: 1.05; letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
  }
  /* Caixa baixa, e sem versalete espacado: a hierarquia ja vem do corpo do
     numero acima, e nao ha nada que a caixa alta acrescente a nao ser ruido. */
  .totais .total-rotulo {
    display: block; margin-top: .35rem;
    font-size: var(--t-nota); line-height: 1.3;
    color: var(--texto-suave);
  }
}

/* ---------- A acao do painel ----------
   "Cadastrar pessoa", no canto direito da linha do recorte. Os dois
   cartoes-porta (Cadastros, Relatorios) que moravam abaixo dos totais
   sairam: repetiam a barra de destinos do cabecalho. O botao herda
   .botao.botao-primario, o verde do "+" de cadastros — e o mesmo gesto. So
   o peso e o corpo sao ajustados aqui, para ele ler como acao e nao como
   mais um link da linha. */
.atalhos { display: flex; align-items: center; gap: .6rem; }
.botao-cadastrar { font-weight: 600; font-size: var(--t-apoio); padding: .45rem 1rem; }
.botao-cadastrar:focus-visible { outline: 2px solid var(--marca-verde); outline-offset: 2px; }

/* "Ver a lista de nomes" e o caminho acessivel ate o cadastro: a parede esta
   aria-hidden (e decoracao) e a lista de verdade mora em Cadastros. Ele sai
   da tela por .so-leitor, mas continua sendo um link de verdade e o teclado
   passa por ele — e foco que nao se ve e foco perdido, ninguem sabe que o
   Enter ali faz alguma coisa. Ao receber foco ele volta ao tamanho normal,
   como um "pular para o conteudo" de qualquer site. */
.atalho-lista:focus-visible {
  position: static; width: auto; height: auto; overflow: visible;
  clip-path: none;
  padding: .5rem .8rem; border-radius: var(--raio);
  background: var(--papel); border: 1px solid var(--borda); color: var(--texto);
  outline: 2px solid var(--marca-verde); outline-offset: 2px;
}

/* ---------- Os quadros ----------
   Cada .quadro e so um recipiente: o cartao de verdade (fundo, borda, raio,
   recuo) e .panorama-quadro, que o proprio componente ja traz de dentro.
   Vesti-lo aqui tambem daria cartao dentro de cartao, com borda dupla. A
   faixa de composicao, que vem sem cartao nenhum, nao e mais um quadro:
   mora no terceiro andar da caixa do resumo (.composicao). */
.quadro { display: grid; gap: 1rem; align-content: start; }

/* ---------- A grade que se fecha ----------
   A grade de duas colunas alinha as LINHAS entre as colunas: um cartao curto
   ao lado de um comprido ficava com um vao enorme embaixo, e a tela virava
   um tabuleiro de buracos. `grid-template-rows: masonry` resolveria isso numa
   linha e ainda nao existe nos navegadores.

   Entao as linhas viram faixas finas (--faixa-da-grade) e cada quadro declara
   quantas ocupa, em --linhas, medido por painel.js depois do desenho. O vao
   entre as faixas e o mesmo vao entre as colunas; a conta de painel.js soma o
   vao de volta, ou cada faixa engoliria 16px da altura do cartao.

   Os dois numeros moram aqui E em painel.js, e nao ha como um saber do outro
   sem consultar a folha a cada quadro. Mudar um pede mudar o outro — os dois
   comentarios dizem isso, um de cada lado. */
.quadros { display: grid; gap: 1rem; --faixa-da-grade: 8px; }
@media (min-width: 760px) {
  .quadros {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: var(--faixa-da-grade);
    align-items: start;
    /* Um quadro LARGO (duas colunas) que nao cabe no fim da fileira desce
       inteiro e deixaria uma coluna vazia atras de si. `dense` deixa o
       estreito seguinte subir para esse vao. A ordem guardada continua
       sendo a do DOM: o que `dense` faz e so encher um buraco com um
       quadro de mais adiante, e o arrasto decide pelas caixas medidas, nao
       pela posicao esperada — funciona igual nas duas. */
    grid-auto-flow: row dense;
  }
  /* Sem --linhas medido (o instante entre o desenho e a medicao, ou o caso
     em que o script nao roda) o quadro ocupa uma faixa so e sairia
     espremido. `span 40` e altura de sobra: a grade nunca corta conteudo,
     so deixa vao — e vao por um quadro de rendering e melhor que um cartao
     achatado. */
  .quadros > .quadro { grid-row: span var(--linhas, 40); }
  /* Largo ou estreito e escolha de quem organiza a tela (o botao ⇤⇥ do
     quadro), guardada com a ordem. Numa grade de duas colunas o largo
     ocupa as duas; de tres, duas de tres. Numa coluna so, nao ha o que
     alargar — a regra fica dentro do @media. */
  .quadros > .quadro-largo { grid-column: span 2; }
}
/* Tres colunas quando ha largura para tres cartoes de uns 370px. Abaixo
   disso, dois: em tres, um quadro de barras estreito quebrava "Adultos
   jovens (30 a 44 anos)" em duas linhas. */
@media (min-width: 1100px) {
  .quadros { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- A lista encurtada ----------
   Um quadro de treze linhas ao lado de um de quatro deixava a grade com um
   buraco do tamanho de um cartao. As linhas alem do limite (painel-html.js
   marca .panorama-linha-extra) ficam escondidas ate o botao abrir a
   lista; aberta (.panorama-aberto), tudo aparece. O botao e texto
   sublinhado, nao pastilha: e um "continua" de rodape, e nao uma acao. */
.panorama-linha-extra,
.panorama-linhas > li:has(> .panorama-linha-extra) { display: none; }
.panorama-aberto .panorama-linha-extra { display: grid; }
.panorama-aberto > li:has(> .panorama-linha-extra) { display: list-item; }
.panorama-mais {
  margin: .5rem 0 0; padding: .2rem 0;
  font: inherit; font-size: var(--t-apoio); color: var(--texto-suave);
  background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.panorama-mais:hover { color: var(--texto); }
.panorama-mais:focus-visible { outline: 2px solid var(--marca-verde); outline-offset: 2px; }

/* ---------- Familias: tres numeros, sem buraco ----------
   As celulas do panorama vem em 2x2, e tres numeros deixavam a quarta
   vazia — um retangulo cinza no canto do cartao. No painel a terceira
   ocupa a linha inteira. So aqui: no resumo estatistico as celulas sao
   quatro e fecham sozinhas. */
#quadros .panorama-celula:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ---------- Cadastro vazio ----------
   Sem ninguem no cadastro nao ha mosaico nem totais para mostrar: a moldura
   vazia sairia como um retangulo de borda com nada dentro, e os quatro
   totais como quatro "0" — que e o que esta regra existe para evitar. O
   recorte geral e o botao saem juntos: escolher "somente ativos" de um
   cadastro sem ninguem e um seletor que nao tem sobre o que decidir, e o
   convite de cadastrar a primeira pessoa ja esta na frase que fica. A caixa
   do resumo continua, so com essa frase dentro. */
.cadastro-vazio .parede,
.cadastro-vazio .totais,
.cadastro-vazio .resumo-topo { display: none; }

/* ---------- Os aniversariantes do mes ----------
   E uma <ol> de verdade, porque a ordem por dia E informacao — mas sem o
   marcador decimal e sem o recuo que o navegador poe sozinho: o "1." ao lado
   do dia 3 seriam dois numeros disputando o comeco da mesma linha, e so um
   deles diz alguma coisa. Mesmo reset de .panorama-linhas, la em cima, e pela
   mesma razao.

   Dia e nome na mesma linha. O dia vai numa coluna fixa, alinhado a direita e
   na tinta suave: assim os nomes comecam todos na mesma vertical e o dia
   fica sendo a margem da lista, nao o assunto dela. O peso vai no nome, que
   e o que se procura aqui. */
.aniversariantes-lista { list-style: none; margin: 0; padding: 0; }
/* Dia, rosto, nome, e a coluna do selo (vazia na linha comum). O rosto
   entrou entre o dia e o nome: a lista serve para telefonar e parabenizar,
   e o rosto e o que faz o nome virar a pessoa do culto de domingo. */
.aniversariante-linha {
  display: grid; grid-template-columns: 2rem auto 1fr auto;
  align-items: center; gap: .35rem .7rem;
  padding: .3rem 0; border-bottom: 1px solid var(--borda);
}
.aniversariante-linha:last-child { border-bottom: 0; }
/* Sem o rosto (o "Configurar" do quadro), a coluna dele sai da grade. */
.aniversariante-linha.sem-foto { grid-template-columns: 2rem 1fr auto; }
.aniversariante-dia {
  text-align: right; color: var(--texto-suave);
  font-family: var(--letra-titulo); font-weight: 700;
  font-size: var(--t-apoio); font-variant-numeric: tabular-nums;
}
.aniversariante-nome { line-height: 1.3; font-weight: 600; }
/* O rosto pequeno de toda lista de pessoas do painel: aniversariantes, quem
   lidera, criancas, as pontas das idades. Uma regra so. */
.rosto-mini {
  width: 2.1rem; height: 2.1rem; border-radius: 50%; object-fit: cover;
  background: var(--panorama-trilho); flex: 0 0 auto;
}
/* Sem foto, as iniciais numa pastilha neutra. Pequenas nao disputam nada —
   ao contrario do mosaico, onde ampliadas eram a coisa mais chamativa da
   tela, e por isso sairam de la. */
.rosto-iniciais {
  display: grid; place-items: center;
  color: var(--texto-suave); font-size: var(--t-selo); font-weight: 600;
}

/* ---------- Listas de pessoas com rosto ----------
   A forma comum de "Quem lidera", "Criancas e adolescentes" e das pontas de
   "Idades da igreja": grupos com subtitulo curto (o oficio, a faixa) e
   linhas de rosto, nome e um detalhe a direita. O subtitulo e o mesmo
   corpo da nota, e nao um h4: e um rotulo de grupo, nao um titulo.

   A IDENTIDADE e a do quadro de disciplina (pedido do dono, 02/10/2026: "a
   mesma identidade visual nos outros quadros"): grupos separados por regua,
   subtitulo no corpo do texto com o total em seguida, rosto maior e nome
   forte. */
.pessoas-grupo + .pessoas-grupo {
  margin-top: .8rem; padding-top: .9rem; border-top: 1px solid var(--borda);
}
.pessoas-grupo-titulo {
  margin: 0 0 .35rem; font-size: var(--t-corpo); font-weight: 700;
  color: var(--texto);
}
.pessoas-grupo-total { font-weight: 400; color: var(--texto-suave); }
.pessoas-lista { list-style: none; margin: 0; padding: 0; }
.pessoa-linha {
  display: flex; align-items: center; gap: .75rem;
  padding: .55rem 0; border-bottom: 1px solid var(--borda);
}
.pessoa-linha:last-child { border-bottom: 0; }
.pessoa-linha .rosto-mini { width: 2.6rem; height: 2.6rem; }
.pessoa-linha .rosto-iniciais { font-size: var(--t-nota); }
.pessoa-nome { flex: 1 1 auto; min-width: 0; line-height: 1.3; font-weight: 700; }
.pessoa-detalhe { color: var(--texto-suave); font-size: var(--t-apoio); white-space: nowrap; }
/* Sem os numeros (o "Configurar" das idades), as pontas sobem para junto do
   titulo. */
.panorama-titulo + .pessoas-pontas { margin-top: 0; }
/* Nome que leva a ficha (o quadro "Sob disciplina"): tinta do texto, e o
   sublinhado so no gesto, como nas fichas atualizadas por ultimo. */
.pessoa-nome a { color: inherit; text-decoration: none; }
.pessoa-nome a:hover { text-decoration: underline; }
/* "Ninguem" dentro de um grupo e uma linha da lista, nao o vazio do quadro
   inteiro: sem isto ele herda os 3rem de .vazio e abre um buraco no cartao. */
.pessoas-grupo > .vazio {
  padding: .3rem 0; text-align: left; font-size: var(--t-apoio);
}

/* ---------- O quadro de disciplina ----------
   Desenhado sobre uma imagem que o dono mandou em 02/10/2026, e o mais perto
   dela que a folha deixa: titulo maior, cada grupo com o subtitulo em duas
   vozes (o comeco suave, o fim na cor do grupo), rosto maior, nome forte, e
   a coluna de tempo separada por um filete, com o calendario. Os grupos se
   separam por regua, e o "Configurar" vira botao de contorno no pe.

   As cores dos grupos foram PEDIDAS assim: o vinho no "Sob Disciplina" e o
   ambar no "em curso". Nao e a cor da spec de situacao (o roxo de DI) — e o
   rotulo do grupo deste quadro, e o dono escolheu o vinho da casa para ele.
   Vem de --vinho-texto e --ambar-texto, que clareiam no tema escuro. */
/* .painel-disciplina, e nao .quadro-disciplina: esse nome ja e do quadro de
   periodo no formulario da ficha, com borda e recheio proprios.

   O titulo maior e o recheio que a regua do "Configurar" atravessa valem
   para TODO quadro do painel (.quadro > .panorama-quadro): nasceram aqui e
   viraram a identidade de todos. */
.quadro > .panorama-quadro { --recheio-do-quadro: 1.1rem; }
.quadro > .panorama-quadro > .panorama-titulo { font-size: var(--t-titulo); }
/* Na disciplina o subtitulo fala em duas vozes: o comeco suave e regular, o
   fim (com o total) forte e na cor do grupo. */
.disciplina-grupo .pessoas-grupo-titulo { font-weight: 400; color: var(--texto-suave); }
.disciplina-grupo-destaque { font-weight: 700; }
.disciplina-grupo[data-grupo="situacao"] .disciplina-grupo-destaque { color: var(--vinho-texto); }
.disciplina-grupo[data-grupo="em-curso"] .disciplina-grupo-destaque { color: var(--ambar-texto); }
.disciplina-grupo[data-grupo="encerrada"] .disciplina-grupo-destaque { color: var(--texto); }
/* A coluna de tempo: filete a esquerda, calendario, e um pedaco por linha
   ("desde 28/05/2026," / "há 4 meses"). A largura tem teto para o nome
   nunca ser espremido a uma palavra por linha. */
.disciplina-lista .pessoa-detalhe {
  display: flex; align-items: center; gap: .5rem;
  flex: 0 1 auto; max-width: 52%;
  padding: .15rem 0 .15rem .75rem; border-left: 1px solid var(--borda);
  white-space: normal; line-height: 1.45;
}
.disciplina-calendario { flex: 0 0 auto; width: 1.2rem; height: 1.2rem; color: var(--texto-suave); }
.disciplina-calendario svg { display: block; width: 100%; height: 100%; }
.disciplina-quando > span { display: block; }

/* O "Configurar" de um quadro, desenhado sobre as imagens que o dono mandou
   em 02/10/2026. Fechado, e SO uma engrenagem discreta no canto de baixo, a
   esquerda — sem nome, sem moldura, sem regua (segundo pedido do mesmo dia:
   "uma engrenagem mais sutil"). O nome fica para o leitor de tela e no
   title. Ao passar o mouse ela ganha o vinho e um veu rosado redondo, que e
   o que diz que ali se clica. Aberto, vira a barra rosada de cima de uma
   caixa, com a engrenagem a esquerda e a seta apontando para cima. */
.quadro-config-pe { margin-top: .75rem; }
/* Desde que a engrenagem foi para as ferramentas do canto de cima, o
   formulario FECHADO nao mostra nada no pe: o quadro termina no conteudo. */
.quadro .quadro-config-pe:has(> .quadro-config:not([open])) { margin-top: 0; }
.quadro .quadro-config:not([open]) > summary { display: none; }
.quadro-config > summary {
  display: inline-flex; align-items: center; gap: .65rem;
  list-style: none; cursor: pointer;
  padding: .35rem; margin-left: -.35rem; border-radius: 999px;
  color: var(--texto-suave); opacity: .65;
}
.quadro-config > summary::-webkit-details-marker { display: none; }
.quadro-config > summary::marker { content: ''; }
.quadro-config > summary:hover, .quadro-config > summary:focus-visible {
  opacity: 1; color: var(--vinho-texto);
  background: color-mix(in srgb, var(--vinho-texto) 8%, var(--papel));
}
.quadro-config > summary:focus-visible { outline: 2px solid var(--vinho-texto); outline-offset: 2px; }
.quadro-config-icone { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; }
.quadro-config-seta { flex: 0 0 auto; width: .9rem; height: .9rem; margin-left: auto; transition: transform .15s; }
.quadro-config:not([open]) > summary .quadro-config-seta { display: none; }
@media (prefers-reduced-motion: reduce) { .quadro-config-seta { transition: none; } }

/* Aberto: a caixa, e a engrenagem na barra de cima dela, no veu rosado com
   um filete embaixo, ja inteira (sem a transparencia de quando fechada). */
.quadro-config[open] { border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; }
.quadro-config[open] > summary,
.quadro-config[open] > summary:hover {
  display: flex; width: 100%; margin: 0; opacity: 1; color: var(--vinho-texto);
  border-bottom: 1px solid color-mix(in srgb, var(--vinho-texto) 14%, var(--borda));
  border-radius: 0; padding: .6rem .9rem;
  background: color-mix(in srgb, var(--vinho-texto) 6%, var(--papel));
}
.quadro-config[open] > summary:focus-visible { outline-offset: -3px; }
.quadro-config[open] > summary .quadro-config-seta { transform: rotate(-90deg); }
.quadro-config-corpo { padding: .85rem .9rem .9rem; }

/* Cada grupo de opcoes: a legenda forte em cima, e o grupo seguinte
   separado por regua. */
.quadro-config-grupo { margin: 0; padding: 0; border: 0; display: grid; gap: .15rem; min-width: 0; }
.quadro-config-grupo + .quadro-config-grupo {
  margin-top: .85rem; padding-top: .85rem; border-top: 1px solid var(--borda);
}
.quadro-config-grupo > legend, .quadro-config-legenda {
  float: left; width: 100%; padding: 0; margin-bottom: .5rem;
  font-size: var(--t-apoio); font-weight: 700; color: var(--texto);
}
/* O recorte: a legenda em cima e a lista suspensa na largura toda — os
   nomes dos recortes sao compridos ("Membros não comungantes"), e ao lado
   da legenda nao caberiam num quadro estreito. */
.quadro-config-campo { display: grid; }
.quadro-config-legenda { float: none; margin-bottom: .45rem; }
/* As caixinhas de marcar numa lista emoldurada; as bolinhas, soltas. */
.quadro-config-lista {
  clear: both; display: grid; gap: .1rem;
  padding: .3rem .7rem; border: 1px solid var(--borda); border-radius: 8px;
  background: var(--papel);
}
.quadro-config-grupo[disabled], .quadro-config-desligado { opacity: .5; }
.quadro-config-opcao {
  display: flex; align-items: center; gap: .6rem; padding: .22rem 0;
  font-size: var(--t-apoio); cursor: pointer;
}
.quadro-config-grupo[disabled] .quadro-config-opcao { cursor: default; }
/* Marcar em verde, escolher em vinho, como no desenho: a caixinha marcada
   diz "isto aparece"; a bolinha diz "deste jeito". */
.quadro-config-opcao input {
  flex: 0 0 auto; width: 1.05rem; height: 1.05rem; margin: 0;
  accent-color: var(--marca-verde); cursor: inherit;
}
.quadro-config-opcao input[type="radio"] { accent-color: var(--vinho-texto); }

/* A ordem, em linha propria: o rotulo a esquerda e a lista ocupando o resto,
   com a seta desenhada (a do navegador destoava do resto da caixa). */
.quadro-config-ordem {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .9rem;
  margin-top: 1rem; font-size: var(--t-apoio); font-weight: 700;
}
.quadro-config-seletor { position: relative; display: block; }
.quadro-config-seletor select {
  width: 100%; appearance: none; -webkit-appearance: none;
  font: inherit; font-weight: 400; color: var(--texto);
  padding: .5rem 2.2rem .5rem .75rem; border: 1px solid var(--borda); border-radius: 8px;
  background: var(--papel); cursor: pointer;
}
.quadro-config-seletor select:disabled { cursor: default; }
.quadro-config-seletor .quadro-config-seta {
  position: absolute; right: .8rem; top: 50%; margin: -.45rem 0 0;
  transform: rotate(90deg); pointer-events: none; color: var(--vinho-texto);
}
.quadro-config-seletor select:focus-visible { outline: 2px solid var(--vinho-texto); outline-offset: 1px; }

/* A LISTA ABERTA de toda lista suspensa do "Configurar" (Ordem, Quantas,
   Quem aparece), pelo modelo do dono (02/10/2026) — o mesmo da lista do
   seletor de relatorio: folha clara de cantos largos sob o campo, o
   escolhido numa barra de vinho com o texto claro, e o campo de borda vinho
   enquanto a lista esta aberta. <select> nativo com `appearance:
   base-select` (Chrome 135+); quem nao suporta cai na lista do sistema.
   O vinho vem de --vinho-texto (clareia no escuro), e o texto sobre ele e
   a cor da folha, que inverte junto. */
@supports (appearance: base-select) {
  .quadro-config-seletor select,
  .quadro-config-seletor select::picker(select) { appearance: base-select; }
  .quadro-config-seletor select::picker-icon { display: none; }
  .quadro-config-seletor select:open { border-color: var(--vinho-texto); }
  .quadro-config-seletor select::picker(select) {
    margin-top: .3rem; padding: .35rem;
    min-width: anchor-size(width);
    border: 1px solid var(--borda); border-radius: 10px;
    background: var(--papel); color: var(--texto); box-shadow: var(--sombra);
  }
  .quadro-config-seletor option {
    padding: .5rem .75rem; border-radius: 6px;
    font-size: var(--t-apoio); font-weight: 400; line-height: 1.3; cursor: pointer;
  }
  .quadro-config-seletor option::checkmark { display: none; }
  .quadro-config-seletor option:hover,
  .quadro-config-seletor option:focus-visible {
    background: color-mix(in srgb, var(--vinho-texto) 8%, var(--papel)); outline: none;
  }
  .quadro-config-seletor option:checked { background: var(--vinho-texto); color: var(--papel); }
  .quadro-config-seletor optgroup {
    font-size: var(--t-nota); font-weight: 700; color: var(--texto-suave);
  }
  .quadro-config-seletor optgroup legend { padding: .55rem .75rem .25rem; }
}

/* A nota fecha a caixa num veu cinza, com o simbolo de informacao. */
.quadro-config-nota {
  display: flex; align-items: flex-start; gap: .55rem;
  margin: 1rem 0 0; padding: .65rem .8rem; border-radius: 8px;
  background: color-mix(in srgb, var(--texto) 5%, var(--papel));
  font-size: var(--t-nota); line-height: 1.45; color: var(--texto-suave);
}
.quadro-config-nota svg { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; margin-top: .05rem; }
/* As duas pontas das idades vem depois das celulas de numero. */
.pessoas-pontas { margin-top: .8rem; }
/* Quem ja fez aniversario neste mes continua na lista, mais quieto: a
   lista e do mes inteiro, e apagar quem ja passou seria reescrever o mes. */
.aniversariante-passou { opacity: .55; }
/* "Esta semana": a mesma semana que poe o rosto grande no mosaico, com a
   mesma tinta da marca — um degrau abaixo de "hoje", que continua sendo a
   linha mais marcada. Veu mais leve, o friso, e o selo escrito (cor sozinha
   nao e sinal para quem nao a distingue). */
.aniversariante-semana {
  background: linear-gradient(var(--veu-marca), var(--veu-marca)), var(--papel);
  box-shadow: inset 3px 0 0 var(--marca-vinho);
  border-radius: 4px;
  padding-left: .6rem; padding-right: .4rem;
}
.aniversariante-selo-semana {
  background: none; color: var(--marca-vinho);
  border: 1px solid var(--marca-vinho); padding: .15rem .45rem;
}

/* ---------- As fichas atualizadas por ultimo ----------
   Nome a esquerda, data a direita, na tinta suave: e um "onde eu parei" da
   secretaria, e a data e o dado que responde. */
.recentes-lista { list-style: none; margin: 0; padding: 0; }
.recente-linha {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .42rem 0; border-bottom: 1px solid var(--borda);
  font-size: var(--t-apoio);
}
.recente-linha:last-child { border-bottom: 0; }
.recente-nome a { color: var(--texto); text-decoration: none; }
.recente-nome a:hover { text-decoration: underline; }
.recente-quando { color: var(--texto-suave); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Quem faz aniversario HOJE ----------
   A unica linha desta tela que merece ser achada sem se procurar: o painel
   fica aberto no computador da secretaria, e o dia do aniversario e o unico
   dia em que ele tem algo a PEDIR de quem passa por ali.

   O vinho do cabecalho, e nao uma cor nova: e a cor institucional deste
   sistema, a mesma faixa do topo, e usa-la aqui e o que liga o realce a
   identidade em vez de acender um amarelo de aviso. Vem em tres camadas,
   que dizem a mesma coisa de tres jeitos — fundo velado, friso a esquerda e
   o selo "hoje" — porque cor sozinha nao e sinal para quem nao a distingue.

   O friso entra por box-shadow, e nao por border-left: borda mudaria a
   largura da linha e o dia sairia do alinhamento vertical das outras. */
.aniversariante-hoje {
  background: linear-gradient(var(--veu-marca-forte), var(--veu-marca-forte)),
              var(--papel);
  box-shadow: inset 3px 0 0 var(--marca-vinho);
  border-radius: 4px;
  padding-left: .6rem; padding-right: .4rem;
}
.aniversariante-hoje .aniversariante-nome { font-weight: 700; }

/* A MESMA marca na folha de aniversariantes dos relatorios, onde a linha e
   um <tr> e nao um <li>. Nenhuma cor nova aqui: e o mesmo veu, o mesmo vinho
   e literalmente o mesmo selo do painel — muda so onde a tinta se apoia.
   Fundo e friso vao nas celulas porque, com border-collapse, o <tr> nao
   pinta box-shadow em navegador nenhum. As custom properties continuam
   vindo do <tr>, entao a troca do vinho pelo vermelho no tema escuro, la
   embaixo, vale aqui tambem sem uma regra a mais.
   O :hover nao pode sumir justamente na linha realcada — ele e o que segura
   o olho de uma ponta a outra de uma tabela larga —, entao o veu se repinta
   sobre o fundo do hover. */
tr.aniversariante-hoje > td {
  background: linear-gradient(var(--veu-marca-forte), var(--veu-marca-forte)),
              var(--papel);
}
tr.aniversariante-hoje > td:first-child {
  box-shadow: inset 3px 0 0 var(--marca-vinho);
}
tr.aniversariante-hoje .nome-membro { font-weight: 700; }
.tabela tbody tr.aniversariante-hoje:hover > td {
  background: linear-gradient(var(--veu-marca-forte), var(--veu-marca-forte)),
              var(--realce);
}

/* SAIU a caixa alta: "hoje" e uma palavra que se le, nao o nome de uma
   coluna. Ela ja e a coisa mais marcada da linha — pastilha vinho, tinta
   clara, ao lado de um nome em negrito — e versal em cima disso e o terceiro
   grito onde dois ja bastavam. O peso 600 segura a presenca no corpo pequeno.
   O entreletras fica, pequeno: a pastilha aperta o texto contra a borda
   arredondada, e um respiro ali e legibilidade, nao estilo. */
.aniversariante-selo {
  font-size: var(--t-selo); line-height: 1; font-weight: 600;
  padding: .2rem .45rem; border-radius: 999px;
  background: var(--marca-vinho); color: var(--marca-tinta);
  letter-spacing: .02em;
}
/* No escuro o vinho do cabecalho fica quase preto contra o papel escuro: o
   friso e o selo passam para o vermelho da chama, que e a mesma marca um
   degrau acima e continua legivel. O cabecalho nao muda no escuro justamente
   porque la o vinho e fundo de faixa; aqui ele seria tinta sobre fundo
   escuro, que e outro problema. */
:root[data-tema="escuro"] .aniversariante-hoje,
:root[data-tema="escuro"] .aniversariante-semana,
:root[data-tema="escuro"] .aniversariante-selo {
  --marca-vinho: var(--marca-vermelho);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .aniversariante-hoje,
  :root:not([data-tema="claro"]) .aniversariante-semana,
  :root:not([data-tema="claro"]) .aniversariante-selo {
    --marca-vinho: var(--marca-vermelho);
  }
}

/* ---------- No celular ----------
   Os totais em 2x2, que e o maior numero de colunas em que o numero grande
   ainda cabe sem quebrar ao lado do rotulo.

   O maior ladrilho do celular nao sai daqui: quem o limita e maiorLadrilho()
   em painel-html.js, junto de quem MONTA o mosaico. Encolher o ladrilho por
   @media faria o desenho discordar do calculo — a montagem teria reservado
   nove celulas para um ladrilho que passou a ocupar quatro, e o retangulo
   que ela fechou abriria buraco. */
/* Cinco celulas em duas colunas deixavam a sexta vazia — um buraco cinza no
   canto da caixa. A primeira celula (o total, o numero de que os outros
   quatro sao recortes) ocupa a linha inteira, deitada: numero e rotulo lado
   a lado. As quatro restantes fecham o 2x2 embaixo, sem sobra.

   `screen`, como o bloco dos totais la em cima e pela mesma razao: o papel
   desmonta os totais numa linha corrida, e uma regra de tela solta
   atravessaria para ele. */
@media screen and (max-width: 620px) {
  .totais { grid-template-columns: 1fr 1fr; }
  .totais .total:first-child {
    grid-column: 1 / -1;
    display: flex; align-items: baseline; gap: .6rem;
  }
  /* Deitada, a celula vira flex — e ai a `order` que as duas classes
     carregam da linha corrida dos relatorios (rotulo 1, numero 2) passa a
     valer e poe o rotulo na frente. De pe (bloco) a ordem nao contava. */
  .totais .total:first-child .total-numero { order: 1; }
  .totais .total:first-child .total-rotulo { order: 2; margin-top: 0; }
}

/* ---------- Painel inicial: arrastar os quadros ----------
   A alca e o unico enfeite novo da tela, e por isso fica quieta: so o
   ponteiro e o foco a acendem. Um punho de arrastar visivel em cada quadro
   o tempo inteiro colocaria seis marcas escuras numa tela que a spec pediu
   calma. */
.quadro { position: relative; }

/* A alca e o botao de esconder dividem o mesmo canto. Numa fileira, e nao
   dois absolutos com coordenadas escritas a mao: assim o dia em que um
   terceiro botao entrar ali nao exige recalcular o `right` de todo mundo. */
.quadro-ferramentas {
  position: absolute; top: .45rem; right: .45rem;
  display: flex; gap: .15rem; z-index: 1;
}

.alca {
  display: grid; place-items: center;
  width: 1.6rem; height: 1.6rem; padding: 0;
  border: 0; border-radius: var(--raio);
  background: none; color: var(--texto-suave);
  font-size: .95rem; line-height: 1;
  /* O ponteiro vira a cruz de mover so quando ele esta sobre a alca: no
     resto do quadro o cursor continua normal, porque o resto do quadro nao
     arrasta. */
  cursor: grab;
  /* Sem isto, arrastar no celular rola a pagina junto e o quadro escapa do
     dedo — o toque que comeca aqui e para mover, nao para rolar. */
  touch-action: none;
  opacity: 0;
  transition: opacity .12s ease;
}

/* Aparece quando o ponteiro entra no quadro, quando ela mesma recebe foco,
   e enquanto arrasta. Foco NUNCA some junto com o hover: quem chega pelo
   teclado precisa ver onde esta. */
.quadro:hover .alca,
.alca:focus-visible,
.quadro.arrastando .alca { opacity: 1; }

.alca:focus-visible {
  outline: 2px solid var(--marca-verde);
  outline-offset: 1px;
}

.alca:active, .quadro.arrastando .alca { cursor: grabbing; }

/* O × que tira o quadro da tela. Cursor de ponteiro, e nao de agarrar: ele
   nao arrasta. No hover ganha a cor de "excluido" da paleta de situacoes —
   e o unico vermelho que este sistema ja usa para dizer "sai daqui", e
   inventar um segundo seria escrever uma cor a mao. */
.alca.esconder { cursor: pointer; font-size: 1.15rem; }
.alca.esconder:hover { color: var(--tom-E); }
/* O botao de largura, entre a alca e o ×. Mesma discricao dos dois:
   aparece com o ponteiro sobre o quadro. O glifo aponta para fora quando
   o quadro vai alargar e para dentro quando vai estreitar — diz o que o
   clique faz, como o rotulo. */
.alca.largura { cursor: pointer; font-size: .8rem; letter-spacing: -.1em; }
.alca.largura:hover { color: var(--texto); }
/* A engrenagem do "Configurar", com as outras ferramentas (02/10/2026): o
   mesmo botao, o desenho no tamanho dos glifos vizinhos. Aberto o
   formulario, ela fica acesa em vinho, mesmo sem o ponteiro em cima — e o
   que liga a engrenagem a caixa la embaixo. */
.alca.configurar { cursor: pointer; }
.alca.configurar svg { width: 1rem; height: 1rem; }
.alca.configurar:hover, .alca.configurar[aria-expanded="true"] { color: var(--vinho-texto); }
.alca.configurar[aria-expanded="true"] { opacity: 1; }

/* O quadro que esta sendo arrastado sai do papel e SEGUE O DEDO: --puxao-x e
   --puxao-y sao escritos por ordenar-painel.js a cada movimento do ponteiro.
   Sem isso o cartao ficava parado enquanto a tela se reorganizava sozinha, e
   o movimento saia mecanico — nada ligava a mao ao que acontecia.

   A sombra e a MESMA da folha (--sombra), so que empilhada duas vezes:
   inventar uma sombra mais funda aqui seria escrever uma cor a mao para um
   estado que dura dois segundos. O leve aumento e a transparencia fazem o
   resto — os vizinhos aparecem por baixo enquanto ele passa.

   Sem transicao NENHUMA nesta regra: transicao no transform faria o cartao
   perseguir o ponteiro com atraso, que e o oposto de seguir a mao. Quem anima
   e o FLIP dos vizinhos, em ordenar-painel.js. */
.quadro.arrastando {
  opacity: .9;
  box-shadow: var(--sombra), var(--sombra);
  transform: translate(var(--puxao-x, 0), var(--puxao-y, 0)) scale(1.01);
  /* Fica por cima dos vizinhos enquanto anda entre eles. */
  position: relative; z-index: 3;
}

/* Enquanto algum quadro anda, o texto dos outros para de ser selecionavel:
   arrastar por cima de um paragrafo selecionaria o paragrafo inteiro, e a
   tela ficaria azul atras do movimento. */
.quadros.arrastando-algum { user-select: none; }

/* O anuncio de posicao e invisivel: quem ve a tela ja viu o quadro mudar
   de lugar, e repetir isso por escrito seria ruido. So o erro aparece —
   falha que ninguem ve e falha que ninguem corrige. */
.aviso-ordem {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.aviso-ordem[data-erro] {
  position: static; width: auto; height: auto;
  margin: .8rem 0 0; padding: .6rem .8rem;
  clip-path: none; overflow: visible; white-space: normal;
  background: var(--aviso-fundo); color: var(--texto);
  border-radius: var(--raio); font-size: var(--t-apoio);
}

/* O seletor de recorte de cada quadro, que morava logo abaixo do titulo,
   mudou-se para o "Configurar" do pe (02/10/2026) e veste o desenho de la
   (.quadro-config-seletor). */

/* ---------- O pe da grade: adicionar quadro ----------
   O que se escondeu tem de ter caminho de volta visivel, ou "esconder" vira
   "apagar" — e ninguem confia num botao que parece apagar. Antes o caminho
   era uma fileira de pastilhas que so existia com algo escondido; agora e
   um espaco tracejado, sempre no pe, do tamanho de um quadro estreito: e
   a casa vazia da grade, e o convite para preenche-la. Por ele entram
   tambem os quadros novos, e a explicacao dos que esperam dado. */
.escondidos:empty { display: none; }
.escondidos { display: grid; grid-template-columns: 1fr; }
@media (min-width: 760px) { .escondidos { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }
@media (min-width: 1100px) { .escondidos { grid-template-columns: repeat(3, 1fr); } }
.adicionar-quadro {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 7rem;
  font: inherit; font-weight: 600; color: var(--texto-suave);
  background: transparent; border: 1.5px dashed var(--borda);
  border-radius: var(--raio); cursor: pointer;
}
.adicionar-quadro span { font-size: 1.4rem; font-weight: 400; line-height: 1; }
.adicionar-quadro:hover { color: var(--texto); border-color: var(--texto-suave); }
.adicionar-quadro:focus-visible { outline: 2px solid var(--marca-verde); outline-offset: 2px; }

/* ---------- O catalogo ----------
   A janelinha e a da paleta (.painel-pequeno), mais larga: cada item tem
   nome, uma linha de descricao e o botao, e em 360px a descricao viraria
   quatro linhas ao lado de um botao. Os grupos sao tres motivos para um
   quadro nao estar na tela, e cada um tem o seu verbo no botao. */
.painel-catalogo { width: min(36rem, 92vw); }
.catalogo-grupo + .catalogo-grupo { margin-top: 1.1rem; }
.catalogo-titulo {
  margin: 0 0 .2rem; font-size: var(--t-apoio); font-weight: 600;
  color: var(--texto-suave);
}
.catalogo-lista { list-style: none; margin: 0; padding: 0; }
.catalogo-item {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .7rem 0; border-top: 1px solid var(--borda);
}
.catalogo-texto { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.catalogo-nome { font-weight: 600; }
.catalogo-descricao { color: var(--texto-suave); font-size: var(--t-apoio); line-height: 1.4; }
.catalogo-item .botao { flex: 0 0 auto; }
.catalogo-vazio { margin: 0; color: var(--texto-suave); }

/* Sem ponteiro fino (celular e tablet) nao ha hover para revelar a alca:
   ali ela fica sempre visivel, ou nao havia como arrastar nem esconder. */
@media (hover: none) {
  .alca { opacity: .55; }
}

/* A unica animacao da tela e a barra crescendo na carga; o realce da alca
   e transicao de interacao, mas quem pediu menos movimento nao quer nem
   isso. */
@media (prefers-reduced-motion: reduce) {
  .alca { transition: none; }
}

/* ==========================================================================
   "Como serve a Igreja" e a tela de Ajustes
   ========================================================================== */

/* A grade de caixinhas da ficha. auto-fill, e nao um numero de colunas
   escrito a mao: duas colunas na folha do computador, uma no celular, tres se
   a lista crescer e a tela permitir. Uma quebra fixa em codigo seria uma
   promessa que a largura real desmentiria.

   As caixinhas leem de cima para baixo em cada coluna (grid-auto-flow:
   column) porque a ORDEM importa: a lista vem hierarquizada dos Ajustes, e
   uma grade lida em Z poria "Zeladoria" ao lado de "Ministerio Pastoral". */
.grade-caixas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: .35rem 1rem;
  margin-bottom: .6rem;
}

.caixa-servico {
  display: flex; align-items: center; gap: .45rem;
  padding: .15rem 0;
  font-size: var(--t-corpo);
  cursor: pointer;
}

.caixa-servico input { width: auto; margin: 0; flex-shrink: 0; }

/* O servico desativado que esta marcado NESTA ficha: aparece apagado e
   avisado, e continua desmarcavel. Tirar uma opcao do sistema nao pode
   reescrever em silencio a ficha de quem a tinha. */
.caixa-servico-inativa { color: var(--texto-suave); }
.caixa-servico-inativa em { font-style: normal; font-size: var(--t-apoio); }

/* A coluna da lista. Estreita e cortada: quem serve em cinco lugares nao pode
   empurrar idade e aniversario para fora da tela. O texto inteiro esta no
   title da celula, escrito por lista.js. */
.tabela td.servicos, .tabela th.servicos {
  max-width: 11rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--texto-suave); font-size: var(--t-apoio);
}

/* ---------- a tela de Ajustes ---------- */

/* O titulo da tela fica sobre a MESA, fora de qualquer folha: ele herdava a
   tinta do body, que e a tinta da folha, e sumia nas paletas de mesa escura. */
.titulo-tela { margin: 1.4rem 0 1rem; font-size: 1.35rem; color: var(--tinta-mesa); }
/* O titulo de cada tela, que desceu da capa para o <main> no redesenho. */
.titulo-da-pagina {
  font-family: var(--letra-titulo); font-size: 1.6rem; font-weight: 650; line-height: 1.2;
  letter-spacing: -.02em; color: var(--texto); margin: 1.6rem 0 1.1rem;
}

/* Um bloco por assunto. Hoje ha um; o proximo entra embaixo, sem remodelar
   nada — e por isso o bloco tem moldura propria em vez de a pagina inteira
   ser um cartao so. */
.bloco-ajuste {
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 1.1rem 1.2rem 1.3rem;
  margin-bottom: 1.4rem;
}

.bloco-ajuste h3 { margin: 0 0 .3rem; font-size: 1.05rem; }

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

/* Alca, nome, contagem, acoes. O nome ocupa o que sobra (1fr) e as acoes
   ficam a direita, para as tres colunas nao dancarem de linha em linha
   conforme o tamanho do nome. */
.servico-linha {
  display: grid;
  grid-template-columns: 1.6rem 1fr auto auto;
  align-items: center;
  gap: .5rem;
  padding: .3rem .2rem;
  border-bottom: 1px solid var(--borda);
  background: var(--papel);
}

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

/* A alca segue a regra do painel: aparece no hover da propria linha e com o
   foco, nunca somindo de quem chegou pelo teclado. */
.servico-linha:hover .alca,
.servico-linha.arrastando .alca { opacity: 1; }
.servico-linha.arrastando .alca { cursor: grabbing; }

.servico-nome { min-width: 0; }
.servico-nome em { font-style: normal; color: var(--texto-suave); font-size: var(--t-apoio); }

/* A funcao inativa fica apagada, e nao escondida: ela continua marcada nas
   fichas de quem a tinha, e precisa poder ser reativada. */
.servico-inativo .servico-nome { color: var(--texto-suave); }

/* A contagem e dado de apoio, e nao titulo: e ela que torna o apagar uma
   decisao informada antes do clique. */
.servico-contagem {
  color: var(--texto-suave); font-size: var(--t-apoio);
  white-space: nowrap;
}

.servico-acoes { display: flex; gap: .2rem; white-space: nowrap; }

/* Acao de linha: sem moldura, para dez linhas de botoes nao virarem uma
   parede de retangulos. O contorno aparece no hover e no foco. */
.botao-discreto {
  border: 1px solid transparent; border-radius: var(--raio);
  background: none; color: var(--texto-suave);
  font-size: var(--t-apoio); padding: .2rem .4rem;
  cursor: pointer;
}
.botao-discreto:hover { border-color: var(--borda); color: var(--texto); }
.botao-discreto:focus-visible { outline: 2px solid var(--marca-verde); outline-offset: 1px; }

/* Apagar ganha o vermelho de "excluido" da paleta de situacoes no hover — o
   mesmo que o × de esconder quadro usa. Nenhuma cor nova escrita a mao. */
.botao-perigo-discreto:hover { color: var(--tom-E); border-color: var(--tom-E); }

/* A linha arrastada segue o dedo, como o quadro do painel: --puxao-y e
   escrito por ordenar-lista.js. Sem transicao no transform, ou ela
   perseguiria o ponteiro com atraso. */
.servico-linha.arrastando {
  transform: translateY(var(--puxao-y, 0));
  box-shadow: var(--sombra);
  position: relative; z-index: 3;
  border-radius: var(--raio);
}

.servicos-lista.arrastando-algum { user-select: none; }

/* O campo de renomear no lugar do nome, do mesmo tamanho do texto que ele
   substitui: sem isto a linha inteira muda de altura ao entrar em edicao. */
.servico-renomear {
  width: 100%; max-width: 22rem;
  font: inherit; padding: .1rem .3rem;
  border: 1px solid var(--marca-verde); border-radius: var(--raio);
  background: var(--papel); color: var(--texto);
}

/* Acrescentar nao pertence a nenhuma linha, e fica separada da lista. O campo
   e o botao na mesma linha, e empilhados quando nao couberem. */
.servico-novo {
  display: flex; align-items: flex-end; gap: .6rem;
  flex-wrap: wrap;
  margin-top: 1.2rem; padding-top: 1rem;
  border-top: 1px solid var(--borda);
}
.servico-novo .grupo-campo { margin-bottom: 0; flex: 1 1 16rem; }

/* Os nomes de quem serve na funcao que esta sendo apagada. Vem todos, e por
   isso a lista rola em vez de crescer para fora do dialogo. */
.apagar-pessoas {
  margin: .4rem 0 .8rem; padding-left: 1.2rem;
  max-height: 12rem; overflow-y: auto;
  color: var(--texto-suave);
}

.apagar-pergunta { margin: .8rem 0 .4rem; font-weight: 600; }

.apagar-opcao {
  display: flex; align-items: center; gap: .45rem;
  padding: .2rem 0;
  cursor: pointer;
}
.apagar-opcao input { width: auto; margin: 0; flex-shrink: 0; }
.apagar-opcao select { width: auto; flex: 1 1 10rem; }
/* No celular as quatro colunas da linha nao cabem: o nome comprido esmagava
   a propria coluna e o texto passava por cima da contagem, e as tres acoes
   vazavam do cartao. Duas linhas resolvem sem esconder nada — nome e
   contagem em cima, acoes embaixo, alinhadas ao nome.

   34rem e onde isso comeca a acontecer com "Ministerio Pastoral", o nome mais
   comprido da lista inicial, e nao um numero redondo qualquer. */
@media (max-width: 34rem) {
  .servico-linha {
    grid-template-columns: 1.6rem 1fr auto;
    row-gap: .15rem;
    padding: .5rem .2rem;
  }
  .servico-acoes {
    grid-column: 2 / -1;
    flex-wrap: wrap;
    gap: .1rem .3rem;
  }
  /* A alca fica sempre visivel aqui: sem ponteiro nao ha hover que a revele.
     A regra geral de .alca em (hover: none) ja faz isso; esta existe para o
     desktop estreito, onde ha ponteiro e a linha e a mesma. */
  .servico-linha .alca { opacity: .55; align-self: start; }
}

/* O nome quebra dentro da PROPRIA caixa. Sem isto, um nome comprido numa
   coluna estreita transborda por cima da contagem ao lado — foi o que
   acontecia no celular antes da regra acima. */
.servico-nome { overflow-wrap: anywhere; }

/* ---- Disciplina: os quadros de periodo ---- */

/* O quadro no formulario. Reaproveita o desenho de .grupo-data-parcial, que ja
   e o fieldset com legenda usado na data de nascimento — a secao nova nao
   inventa uma linguagem visual propria. */
.quadro-disciplina {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: .75rem;
  margin-bottom: .75rem;
}

.quadro-disciplina legend {
  padding: 0 .35rem;
  font-weight: 600;
  font-size: .85rem;
}

.quadro-disciplina .botao-perigo {
  margin-top: .5rem;
  font-size: .8rem;
}

/* O periodo na ficha (leitura). */
.periodo-disciplina {
  border-left: 3px solid var(--borda);
  padding-left: .7rem;
  margin-bottom: .8rem;
}

.periodo-disciplina-datas {
  margin: 0 0 .3rem;
  font-weight: 600;
}

/* O que esta em curso se marca pela BARRA e pelo negrito da data, nunca so
   pela cor: a mesma regra das tarjas de situacao, que sempre trazem a sigla
   escrita junto. Impresso em preto-e-branco, a barra grossa continua visivel. */
.periodo-disciplina.em-curso {
  border-left-width: 5px;
  border-left-color: var(--sit-DI-texto);
}

/* ---------- As aparencias (Ajustes > Aparencia e a troca rapida) ----------
   A amostra e uma MINIATURA DA TELA — a lateral escura, a mesa e um cartao
   pousado nela —, e nao uma fila de quadradinhos: a pergunta de quem escolhe e
   "como fica a minha tela", e so a miniatura responde. As cores de cada uma
   vem do bloco [data-mini] de aparencias.css. */
.aparencias {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.aparencia-opcao {
  display: grid; grid-template-columns: auto 1fr; column-gap: .75rem; align-items: center;
  padding: .7rem .8rem; border: 1px solid var(--borda);
  border-radius: 10px; background: var(--papel); color: var(--texto); cursor: pointer;
}
.aparencia-opcao:hover { background: var(--superficie-2); }
/* O radio fica invisivel mas NAO com display:none — isso o tiraria da ordem de
   foco, e o teclado deixaria de alcancar o seletor inteiro. */
.aparencia-opcao input {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%);
}
.aparencia-opcao:has(input:checked) {
  border-color: var(--destaque); box-shadow: inset 0 0 0 1px var(--destaque);
}
.aparencia-opcao:has(input:focus-visible) { outline: 2px solid var(--destaque); outline-offset: 2px; }
.aparencia-opcao .aparencia-mini { grid-row: span 2; }
.aparencia-nome { font-size: var(--t-apoio); font-weight: 600; }
.aparencia-descricao { font-size: var(--t-nota); color: var(--texto-suave); }

.aparencia-mini {
  display: flex; flex: 0 0 auto; width: 3.4rem; height: 2.4rem; overflow: hidden;
  border: 1px solid var(--borda); border-radius: 6px;
}
.aparencia-mini i { display: block; }
.aparencia-mini-lateral { flex: 0 0 26%; background: var(--mini-lateral); }
.aparencia-mini-mesa { flex: 1 1 auto; background: var(--mini-mesa); padding: 4px 4px 0; }
.aparencia-mini-cartao {
  height: 100%; background: var(--mini-cartao); border-radius: 3px 3px 0 0;
  border-top: 3px solid var(--mini-destaque);
}

/* A troca rapida, no pe da lateral: tres quadradinhos, cada um com a mesa e o
   destaque da sua aparencia. O ligado ganha o anel. */
.troca-rapida { display: inline-flex; gap: .35rem; }
.troca-rapida-botao {
  width: 1.6rem; height: 1.6rem; padding: 0; border-radius: 6px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--lateral-texto) 35%, transparent);
  background: none; display: grid; place-items: center;
}
.troca-rapida-amostra {
  width: 100%; height: 100%; border-radius: 5px;
  background: linear-gradient(135deg, var(--mini-mesa) 0 55%, var(--mini-destaque) 55% 100%);
}
.troca-rapida-botao[aria-pressed="true"] { outline: 2px solid var(--lateral-texto); outline-offset: 2px; }
.troca-rapida-botao:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }