/* Sora, hospedada aqui (vendor/ é cache longo): some o piscar de letra trocando e funciona sem internet. */
@font-face{font-family:'Sora'; font-style:normal; font-weight:100 800; font-display:swap;
src:url('/vendor/sora/sora-latin.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* estilo.css — as cores, as fontes e as peças da PASCOM. Mexeu aqui, mexeu em todas as telas. */
:root{
/* Fundo: azul-tinta profundo, tirado do próprio azul da marca. NÃO é preto:
preto puro com cor vibrante em cima é o visual de qualquer app; o azul-tinta
amarra o fundo à marca. */
--noite:#0d1922;
--noite-alta:#16293a; /* superfície elevada: o cartão do formulário */
--poco:#0a141c; /* fundo dos campos: mais fundo que o cartão */
/* As três cores da marca, elevadas para viver no escuro */
--azul:#4fa3e3; /* estrutura, links, o que é secundário */
--verde:#9bd255; /* AÇÃO: confirmar. É o verde de "pas" no logo */
--ouro:#f2c230; /* SITUAÇÃO do convite: vagas, prazo, avisos.
É a cor do globo com a cruz — o ponto de atenção */
--texto:#e9f1f7;
--texto-fraco:#91a9bc;
--borda:#24394d; /* separação de superfície: a moldura do cartão. Decorativa. */
--borda-campo:#63788a; /* contorno de COMPONENTE: campo e botão de contorno.
A sugestão original (#5d7285) media 2,98:1 contra --noite-alta —
abaixo do mínimo de 3:1 do WCAG 1.4.11. Clareado até 3,25:1 contra
--noite-alta e 4,06:1 contra --poco (medido). */
--perigo:#f07a6e; /* desmarcar e erro. Não é da marca, e é de propósito:
o que dá errado não pode parecer parte do convite.
Ajustado de #e4574c (medido) para #f07a6e: o original
media 3.70:1 de contraste dentro do cartão (.caixa) —
abaixo do mínimo de 4,5:1. Mesmo matiz, mais claro. */
--raio:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
background:
url("data:image/svg+xml;utf8, é só o miolo (nome, data,
situação); os botões de Corrigir/Apagar vêm como IRMÃOS dele, dentro do mesmo
cartão — botão dentro de não funciona, o clique vaza para o link. */
.cartao-evento{background:var(--noite-alta);border:1px solid var(--borda);
border-radius:var(--raio);padding:20px;margin-bottom:16px}
.cartao-evento a{display:block;text-decoration:none;color:inherit}
/* O MESMO cartão, na lista "meus eventos" do paroquiano (meuevento.html): lá o
cartão inteiro é um link só (não tem botão nenhum ao lado), e pode trazer a marca
do evento no alto. Teto de altura na marca pelo mesmo motivo do banner: cada
evento manda uma imagem de proporção diferente, e uma imagem em pé empurraria os
outros eventos da lista para fora da tela. */
.cartao-evento-marca{max-width:180px;max-height:56px;width:auto;height:auto;
object-fit:contain;display:block;margin-bottom:12px}
.cartao-evento-nome{display:block;font-size:19px;line-height:1.25;margin-bottom:4px}
.acoes-cartao{display:flex;gap:10px;margin-top:14px}
.acoes-cartao .botao{width:auto;flex:1;padding:11px;font-size:15px}
/* Quando a ação é ABRIR uma página, o elemento certo é um ` `, não um botão com
`onclick` — é ele que o navegador deixa abrir em aba nova com o toque longo, e que um
leitor de tela anuncia como link. Só que um ` ` não centraliza o próprio texto como um
`` centraliza: sem isto ele sai com o rótulo colado à esquerda, ao lado de
botões certinhos, e parece defeito.
⚠️ E a linha da COR não é repetição: `.cartao-evento a` (logo acima) manda
`color:inherit` para todo link dentro de um cartão, e vence `.botao-fraco` por ser mais
específica. Sem devolver a cor aqui, o "Abrir" sai BRANCO no meio de botões azuis —
achado olhando a foto, não por teste nenhum. */
.acoes-cartao a.botao{display:inline-flex;align-items:center;justify-content:center;
text-decoration:none}
.acoes-cartao a.botao-fraco{color:var(--azul)}
.botao-perigo-fraco{color:var(--perigo);border-color:var(--borda-campo)}
/* a linha de UMA pessoa dentro da ficha, na tela do evento por dentro: o nome de um
lado, o botão discreto de tirar do outro. */
.pessoa-linha{display:flex;align-items:center;justify-content:space-between;gap:12px}
.botao-tirar{background:transparent;border:0;color:var(--perigo);font-family:inherit;
font-size:14px;font-weight:600;padding:6px 8px;cursor:pointer;border-radius:6px}
.botao-tirar:hover{background:rgba(240,122,110,.12)}
/* o link do convite: campo + Copiar + Abrir, lado a lado. min-width:0 no campo não é
enfeite — sem ele, um campo dentro de flex não encolhe, e os botões saem empurrados
para fora da tela no celular. */
.linha-link{display:flex;gap:8px;align-items:center;margin-top:10px}
.linha-link .campo{flex:1;min-width:0;font-size:14px}
.linha-link .botao{width:auto;padding:12px 14px;font-size:14px;white-space:nowrap}
.linha-link a.botao{display:inline-flex;align-items:center;text-decoration:none}
/* o vídeo do convite: a proporção depende do TIPO (Video.identificar() já sabe qual é),
por isso é aspect-ratio (aceita valor variável via --proporcao-video), nunca padding-top
fixo. O YouTube é 16:9 de verdade — cabe sem recorte. O Instagram é ALTO: forçar 16:9
nele cortava a mídia antes do play aparecer. 16/9 aqui é só o valor de partida para
quando o JS ainda não rodou (e não existe --proporcao-video nenhum ainda). */
.moldura-video{position:relative;width:100%;aspect-ratio:var(--proporcao-video, 16 / 9)}
.moldura-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* evento.html (Tarefa 17): no notebook, o evento (e o vídeo) de um lado, o
formulário do outro — a tela inteira em uso, sem esticar o campo. No celular
e no tablet, empilha (a regra abaixo só vale a partir de 1060px). */
.coluna-evento{margin-bottom:28px}
@media (min-width:1060px){
.convite{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
gap:40px;align-items:start}
.convite .caixa{margin-bottom:0}
/* a pessoa lê o evento enquanto rola, com o formulário sempre à mão — mas se o
formulário crescer mais que a tela (muita gente adicionada), ele rola por
dentro em vez de travar a rolagem da página inteira. */
.coluna-formulario{position:sticky;top:40px;max-height:calc(100vh - 80px);overflow:auto}
}
/* central.html (Tarefa 20): a casa da PASCOM. O caminho de volta que as telas de
dentro ganharam, sempre logo abaixo do topo. */
.caminho-central{color:var(--texto-fraco);font-size:14px;text-decoration:none;
display:inline-block;margin-bottom:18px}
.caminho-central:hover{color:var(--azul)}
/* Tarefa 21 (1a) — a constelação decorativa mora no `body` (background-attachment:
fixed) e não tem opacidade própria: qualquer elemento sem fundo, bem em cima dela,
deixa as linhas/pontos aparecerem por trás do texto. Nas outras telas isso nunca
incomodava porque só a marca ocupava aquele canto; a Central põe o botão "Sair" no
MESMO canto (topo-direita), exatamente onde o padrão é mais denso (ele é ancorado
em "right", então a faixa mais cheia está sempre colada na borda direita, não tem
deslocamento horizontal que resolva). A cura de verdade é um fundo OPACO — da
mesma cor da página (--noite, sem contraste visível) — atrás do cabeçalho inteiro,
cobrindo a caixa onde "Sair" e o nome da paróquia vivem. Provado na foto: nenhum
pixel da constelação sobre o texto, em 390px e 1280px. */
.topo-central{background:var(--noite);position:relative;z-index:1;
margin:0 -4px 18px;padding:4px}
/* Tarefa 21 (1b) — apertar o topo sem cortar informação: saudação e papel na MESMA
linha (flex, não concatenados no mesmo texto — cada um continua no seu próprio
elemento, então nada muda para quem já lê #saudacao/#papelAtual à parte). */
.linha-saudacao{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 8px;margin-bottom:14px}
.saudacao{font-size:21px;font-weight:800;letter-spacing:-.01em}
.papel-atual{color:var(--texto-fraco);font-size:14px}
.papel-atual::before{content:'· '}
.rotulo-secao{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--texto-fraco);margin:26px 0 12px}
/* a etiqueta logo abaixo do cabeçalho apertado — bem menos respiro que as demais
(a intenção é o cartão "acontecendo agora" aparecer o mais cedo possível). */
.rotulo-primeira{margin-top:10px}
/* o nome da paróquia no cabeçalho da Central: uma linha só, fonte menor — ele já
está por extenso no rodapé, não precisa repetir o tamanho de destaque aqui. */
.paroquia-nome-compacta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
font-size:11.5px;max-width:100%}
/* Gestão da equipe: blocos distintos empilhados e com largura cheia.
Apenas os formulários internos têm teto de leitura/preenchimento. */
.grade-admin-equipe{display:grid; grid-template-columns:minmax(0,1fr); gap:18px}
.coluna-admin-equipe{display:flex; flex-direction:column; gap:18px; min-width:0}
.coluna-admin-equipe > .caixa{margin-bottom:0 !important}
.coluna-admin-equipe form{max-width:560px}
/* meuevento.html — o avatar da pessoa da comunidade, no mesmo canto onde a Central
põe o "Sair": alto à direita do cabeçalho. Um círculo com as iniciais do nome, e
não uma foto — esta conta não tem foto nenhuma para mostrar, e pedir uma seria
mais um passo entre a pessoa e o que ela veio fazer.
⚠️ O menu é posicionado em relação a ESTE invólucro (`position:relative`), nunca
ao cabeçalho inteiro: o cabeçalho tem a marca do outro lado, e ancorar ali faria
o menuzinho abrir no meio da tela. */
.conta-canto{position:relative;flex:0 0 auto}
.avatar-conta{width:46px;height:46px;border-radius:50%;background:var(--noite-alta);
border:1px solid var(--borda-campo);color:var(--texto);font-family:inherit;
font-weight:700;font-size:15px;letter-spacing:.02em;cursor:pointer;
display:grid;place-items:center}
.avatar-conta:hover{border-color:var(--azul)}
.avatar-conta:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
/* O menuzinho flutua por cima do resto da tela; `z-index:3` fica acima do cabeçalho
com fundo opaco (.topo-central, z-index:1) e abaixo de nada — não há mais nada
flutuante nesta tela. */
.menu-conta{position:absolute;right:0;top:calc(100% + 8px);z-index:3;min-width:236px;
background:var(--noite-alta);border:1px solid var(--borda);border-radius:12px;
padding:8px;box-shadow:0 14px 34px rgba(5,12,18,.55)}
.menu-conta button{display:block;width:100%;text-align:left;background:none;border:0;
color:var(--texto);font-family:inherit;font-size:15.5px;padding:11px 12px;
border-radius:8px;cursor:pointer}
.menu-conta button:hover{background:var(--poco)}
.menu-conta-nome{font-weight:700;font-size:14px;padding:6px 12px 10px;
border-bottom:1px solid var(--borda);margin-bottom:6px;word-break:break-word}
.menu-conta-recado{font-size:12.5px;padding:8px 12px 4px;line-height:1.35;
border-top:1px solid var(--borda);margin-top:6px}
/* AS FERRAMENTAS: duas colunas no celular, mais colunas quando a tela sobra
(mesmo ponto de corte das outras grades da casa, 1060px). */
.grade-ferramentas{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
/* ⚠️ UMA COLUNA quando duas não cabem. Medido em 23/09/2026: o nome mais comprido da
lista ("Equipamentos") precisa de 101px só para a palavra, mais o ícone e o respiro —
e em duas colunas abaixo de ~380px sobra menos que isso. O resultado era a palavra
quebrando no meio ("Equipame/ntos"), que é legível como soletrar.
Uma coluna no celular estreito também dá alvo maior para o dedo. */
@media (max-width:379px){ .grade-ferramentas{grid-template-columns:1fr} }
@media (min-width:1060px){ .grade-ferramentas{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1400px){ .grade-ferramentas{grid-template-columns:repeat(4,minmax(0,1fr))} }
.ferramenta{background:var(--noite-alta);border:1px solid var(--borda);border-radius:12px;
padding:16px;display:block;text-decoration:none;color:inherit;height:100%}
a.ferramenta:hover{border-color:var(--azul)}
.ferramenta-futura{opacity:.5;cursor:default}
.ferramenta-titulo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px;
color:var(--texto);line-height:1.3}
.ferramenta-titulo svg{flex:0 0 auto}
/* ⚠️ ITEM DE FLEX NASCE COM `min-width:auto`, e isso é o defeito que o dono viu em
23/09/2026: o item se RECUSA a encolher abaixo da largura da PALAVRA MAIS LONGA que
tem dentro. Numa caixa estreita, uma palavra só como "Equipamentos" não cabe, não
quebra, e ATRAVESSA a borda do cartão — invadindo o cartão vizinho.
⚠️ Não é caso extremo: quebra em 320px (iPhone com a tela em "Zoom", que é o que faz
quem acha a letra pequena) E em 360px, que é a largura de muito Android comum.
A grade em volta já se protegia com `minmax(0,1fr)` — a MESMA ideia — mas o flex de
dentro do cartão ficou sem. `min-width:0` deixa encolher; `overflow-wrap:anywhere`
deixa a palavra quebrar em vez de vazar.
Provado por `provas/sangramento.prova.mjs`, que reprova se isto voltar. */
.ferramenta-titulo{min-width:0}
.ferramenta-titulo > *{min-width:0; overflow-wrap:anywhere}
.ferramenta-desc{font-size:12.5px;color:var(--texto-fraco);margin-top:6px;line-height:1.4}
.etiqueta-em-breve{display:inline-block;margin-top:8px;font-size:11px;font-weight:700;
letter-spacing:.03em;text-transform:uppercase;color:var(--texto-fraco);
border:1px solid var(--borda-campo);border-radius:20px;padding:2px 8px}
/* Tarefa 21 (1c): a mesma forma da etiqueta acima, mas em VERDE — é dado de
verdade (contagem ao vivo), não uma promessa de "em breve". Preenche o mesmo
buraco visual que sobrava no cartão de Eventos, sem inventar rótulo falso. */
.etiqueta-viva{display:inline-block;margin-top:8px;font-size:11px;font-weight:700;
letter-spacing:.03em;text-transform:uppercase;color:var(--verde);
border:1px solid var(--verde);border-radius:20px;padding:2px 8px}
/* meu-evento.html — DOIS cards e só: "acompanhar a noite" e "mandar minha foto".
Por que não usar a grade das ferramentas como está: ela nasce com DUAS colunas já
no celular, o que serve para uma Central com seis atalhos pequenos. Aqui são duas
decisões grandes, lidas no escuro do salão — no celular elas empilham (cada uma
com a largura inteira), e só ficam lado a lado quando a tela dá conta. As três
larguras abaixo repetem "2 colunas" de propósito: sem elas, as regras de 1060px e
1400px de `.grade-ferramentas` voltariam a valer e espalhariam dois cards em três
ou quatro colunas, deixando buraco no meio da tela. */
.grade-dois-cards{grid-template-columns:1fr}
.grade-dois-cards .ferramenta{padding:20px}
.grade-dois-cards .ferramenta-titulo{font-size:17px}
.grade-dois-cards .ferramenta-desc{font-size:14px;margin-top:8px}
.grade-dois-cards .ferramenta-larga{grid-column:1/-1}
@media (min-width:560px){ .grade-dois-cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1060px){ .grade-dois-cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1400px){ .grade-dois-cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* ⚠️ A largura da tela de dentro do evento mora em `.pagina-media` (lá em cima),
NUNCA aqui. Um teto de largura numa caixa de dentro deixa o conteúdo estreito e
colado à ESQUERDA, com meia tela vazia à direita; é a página que o `body`
centraliza. Esta classe existe só para agrupar o bloco — e para o nome aparecer na
prova de layout —, e não mede nada de propósito.
⚠️ Classe, nunca `#conteudo`: esse id existe em evento.html, foto.html e
agora.html também, e regra de id é global — a de uma tela pegaria as outras. */
.area-do-evento{display:block}
/* O banner do evento, no alto da tela de dentro: é o "banner bem legalzão" que o
dono pediu. Mostra a MARCA do evento (a mesma que vai no telão) quando ela
existe; senão, o nome em tipo grande. Fundo do mesmo azul-tinta da casa, um tom
acima, para a marca de fundo transparente nunca cair sobre a constelação do
`body` e ficar suja. */
.banner-evento{background:var(--noite-alta);border:1px solid var(--borda);
border-radius:var(--raio);padding:28px 22px;margin-bottom:16px;
display:flex;align-items:center;justify-content:center;min-height:150px;text-align:center}
/* `max-height` em vh: a marca é uma imagem de proporção desconhecida (cada evento
manda a sua), e sem teto de ALTURA uma imagem em pé empurraria os dois cards para
fora da primeira tela do celular — que é justamente onde eles precisam estar. */
.banner-evento-marca{max-width:100%;max-height:26vh;width:auto;height:auto;
object-fit:contain;display:block}
.banner-evento-nome{font-size:clamp(26px,6vw,40px);margin:0}
.banner-evento-legenda{font-weight:700;font-size:17px;margin-bottom:2px}
@media (min-width:1060px){
.banner-evento{min-height:200px;padding:34px}
.banner-evento-marca{max-height:30vh}
}
/* links.html (Tarefa 21) — a página tipo Linktree, sem login. Marca centralizada e
maior que nas outras telas (o mock do dono pede isso: é o cartão de visita da
PASCOM na bio do Instagram, tem que ocupar o espaço). */
.pagina-links{text-align:center}
.topo-links{display:flex;flex-direction:column;align-items:center;margin-bottom:30px}
.marca-links{width:190px}
.topo-links .paroquia-nome{text-align:center}
#lista{display:grid;gap:14px;text-align:left;margin-bottom:18px}
/* ── O link da bio (/links) ────────────────────────────────────────────────────
Reescrito em 21/09/2026: o dono comparou com o Beacons que a paróquia usava e disse,
com razão, que a nossa estava "bem pobre de visual". O problema não era falta de
enfeite — era falta de HIERARQUIA: nove caixas idênticas, e o quadro de horários com
a mesma cara de um botão, parecendo clicável sem ser.
A decisão de desenho não foi copiar o Beacons (lá tudo é botão igual, com avatar
redondo). Numa página de paróquia a pergunta mais feita é "que horas é a missa?" —
então o QUADRO DE HORÁRIOS é o herói, desenhado como grade de verdade, e os botões
ficam disciplinados em volta. Três níveis: o quadro (informação), o evento em cartaz
(a única coisa com hora marcada) e os contatos e documentos. */
/* O quadro: informação, não ação. Sem hover, sem ícone de abrir, e com a borda do lado
esquerdo marcando que ele é outra natureza de conteúdo — não um botão apagado. */
.quadro{background:var(--noite-alta); border:1px solid var(--borda); border-left:3px solid var(--ouro);
border-radius:12px; padding:20px 22px; margin-bottom:14px; text-align:left}
.quadro-titulo{font-size:15px; font-weight:700; letter-spacing:.01em; margin:0 0 14px}
.quadro-grade{display:grid; grid-template-columns:auto 1fr; gap:10px 16px; margin:0; align-items:baseline}
.quadro-grade dt{color:var(--texto-fraco); font-size:14px; white-space:nowrap}
.quadro-grade dd{margin:0; display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end}
.quadro-hora{font-variant-numeric:tabular-nums; font-weight:700; font-size:15px; color:var(--texto)}
/* Os botões: ícone à esquerda, texto à esquerda. Alinhamento à esquerda de propósito —
texto centralizado obriga o olho a reencontrar o começo de cada linha, e metade desta
comunidade lê no celular, de longe. */
/* Ícone alinhado ao TOPO, não ao centro: metade destes títulos ocupa duas linhas, e com
`center` o ícone flutuava no meio do bloco, longe do título que ele marca. O ajuste de
2px no topo é para ele ficar na altura da primeira linha de texto, não colado na borda. */
/* .link-bio virou uma COLUNA (não mais o próprio flex-row) para caber a imagem opcional
em "banner" no topo (Tarefa da imagem do link, 21/09/2026): a linha de ícone+texto
agora mora em `.link-bio-linha`, de dentro para fora. Um card sem imagem tem só essa
linha e fica com a cara de sempre — nada muda visualmente para os 9 links de hoje.
`overflow:hidden` é o que faz o banner nascer com os MESMOS cantos arredondados do
card, de graça: a imagem encosta nas bordas e quem corta o excesso é o próprio card. */
.link-bio{display:flex; flex-direction:column; text-align:left; text-decoration:none;
background:var(--noite-alta); border:1px solid var(--borda); border-radius:12px;
overflow:hidden; margin-bottom:10px; color:var(--texto)}
.link-bio:hover{border-color:var(--verde)}
.link-bio:focus-visible{outline:2px solid var(--verde); outline-offset:2px}
.link-bio-linha{display:flex; align-items:flex-start; gap:14px; padding:16px 18px}
/* O disco do ícone: fundo na própria cor a 14%, desenho na cor cheia. É o que dá a
cada item uma identidade em vez de nove traços cinza iguais. A cor entra por
`--cor-icone`, definida no HTML por tipo de destino. */
.link-disco{width:40px; height:40px; flex:0 0 auto; border-radius:11px; display:grid;
place-items:center; background:color-mix(in srgb, var(--cor-icone) 14%, transparent);
transition:transform .18s ease, background-color .18s ease}
.link-icone{width:21px; height:21px; display:block; fill:var(--cor-icone)}
/* A miniatura substitui o disco quando a imagem está posicionada "à esquerda": mesmo
tamanho e mesmo raio do disco que ela troca de lugar, para a grade de ícones/miniaturas
continuar alinhada de card para card — nunca os dois lado a lado (viraria ruído). */
.link-bio-miniatura{width:40px; height:40px; flex:0 0 auto; border-radius:11px;
object-fit:cover; display:block; transition:transform .18s ease}
/* O banner: sóbrio de propósito — visível o bastante para valer a pena, sem virar
parede de fotos com nove cards na tela. 2.4:1 dá ±120px de altura num card de 288px
(celular de 320px, com o respiro de 16px da página) — uma faixa, não uma foto de
capa. `background` é a cor de campo da casa, para o card não "piscar" branco
enquanto a imagem carrega. */
.link-bio-banner-img{width:100%; display:block; aspect-ratio:2.4/1; object-fit:cover;
background:var(--poco)}
.link-bio-texto{display:flex; flex-direction:column; gap:3px; min-width:0}
.link-bio-titulo{font-weight:600; font-size:15.5px; line-height:1.3}
.link-bio-desc{color:var(--texto-fraco); font-size:13px; line-height:1.4}
/* O evento em cartaz: o único destaque da página. A cor de situação da casa (o ouro do
convite) e um pouco mais de ar — nada de sombra nem gradiente, que aqui só somariam
ruído sobre o fundo escuro. O respiro extra mora na LINHA agora (o card em si não
tem mais padding próprio, ver `.link-bio` acima). */
.link-bio-destaque{border-color:var(--ouro); background:rgba(242,194,48,.07)}
.link-bio-destaque .link-bio-linha{padding:20px 18px}
.link-bio-destaque .link-icone{stroke:var(--ouro)}
.link-bio-destaque .link-bio-titulo{font-size:17px}
.link-bio-destaque:hover{border-color:var(--ouro)}
@media (min-width:1060px){ .marca-links{width:220px} }
/* eventos.html (Tarefa 17): os cartões da equipe viram grade — um por linha no
celular, dois a partir do notebook, três no notebook grande. O gap da grade
substitui a margem de baixo de cada cartão (senão dobra o respiro).
⚠️ AMARRADO A `.pagina-larga` em 21/09/2026, e isto não é capricho: o id `#lista` é
usado por CINCO telas (eventos, equipe, links-admin, links e minha-confirmação), e sem
a amarra estas regras pegavam todas. O efeito estava NO AR: o link da bio — uma coluna
estreita, feita para o celular — virava DUAS colunas no notebook e TRÊS na tela grande.
Ninguém pediu, nada acusou, e só apareceu quando alguém mediu a largura da grade.
Regra de id é global: se escrever uma para uma tela, amarre à tela. */
/* ⚠️ 28/09/2026: a grade 1 → 2 → 3 colunas agora é OPT-IN, pela classe `grade-lista` no
próprio #lista (Equipe, Escala, Eventos, Links da bio, Paroquianos — o visual de sempre).
Antes era `.pagina-larga #lista`: pegava toda tela larga com um #lista e, por ser mais
forte, anulava calada a grade que cada tela pedia (a da Equipe, a dos Paroquianos e a dos
Eventos nunca valeram). Tela nova que quiser a grade: ponha a classe. */
.pagina-larga #lista.grade-lista{display:grid;gap:16px;align-items:stretch}
.pagina-larga #lista.grade-lista>*{margin-bottom:0}
@media (min-width:1060px){ .pagina-larga #lista.grade-lista{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1400px){ .pagina-larga #lista.grade-lista{grid-template-columns:repeat(3,minmax(0,1fr))} }
/* evento-equipe.html: "#listaConfirmados", ".evento-dentro" e ".coluna-resumo"
eram o layout de ANTES do redesenho da mesa de controle (Tarefa "painel do
evento ao vivo") — resumo fixo à esquerda, confirmados em grade de cartões à
direita. As três classes/id saíram do HTML: o cabeçalho do evento virou uma
faixa única no topo, e os confirmados viraram linhas finas dentro da caixa
"Confirmados" (".ficha-linha", logo abaixo) — não precisam mais de grade
nenhuma, é lista de cima a baixo. Ver o bloco "A mesa de controle", mais
adiante neste arquivo, para o grid atual (".painel-coluna-operacao" /
".painel-coluna-config").
/* a foto de fundo entra ATRÁS de um véu escuro. Sem o véu, o texto branco some no claro
da imagem — e a pessoa está aqui para ler "Restam 12 vagas", não para admirar o papel
de parede. Medido sobre a área mais clara da foto the-chosen-s6-fundo.jpg (excluindo o
enfeite decorativo do canto, que já existia antes desta tarefa): ~5,4:1 para o texto
fraco (--texto-fraco) e ~11,6:1 para o texto principal (--texto) — os dois acima do
mínimo de 4,5:1. Não precisou escurecer mais. */
body.com-fundo::before{
content:'';position:fixed;inset:0;z-index:-2;
background:var(--fundo-evento) center/cover no-repeat;
opacity:.30;
}
body.com-fundo::after{
content:'';position:fixed;inset:0;z-index:-1;
background:linear-gradient(180deg, rgba(13,25,34,.55) 0%, rgba(13,25,34,.86) 50%, var(--noite) 100%);
}
/* o relatório do evento (Tarefa 16): duas figuras em SVG desenhado à mão, sem
biblioteca. As cores das faixas moram aqui (não em base.js) porque só o relatório
usa — são a escada de um tom só, MEDIDA (ver relatorio-core.js e o relatório da
tarefa): --faixa-1 foi clareada de #20506f para #265d84 porque a original batia
1,73:1 contra --noite-alta (abaixo do piso de 2:1 para o tom mais apagado se
separar do fundo do cartão); as outras três já mediam acima do piso. */
:root{
--faixa-1:#265d84; /* 0–11 · 2,11:1 contra --noite-alta */
--faixa-2:#2e7099; /* 12–17 · 2,76:1 */
--faixa-3:#3f8cc4; /* 18–59 · 4,08:1 */
--faixa-4:#4fa3e3; /* 60+ · 5,44:1 */
}
.relatorio-subtitulo{font-size:15px;font-weight:700;margin-bottom:10px;color:var(--texto)}
.linha-faixa{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.rotulo-faixa{flex:0 0 118px;width:118px;font-size:14px;color:var(--texto)}
.barra-trilha{flex:1;min-width:0;height:14px;display:flex;align-items:center}
.barra-trilha svg{display:block}
.valor-faixa{flex:0 0 auto;min-width:24px;text-align:right;font-size:14px;font-weight:700;
font-variant-numeric:tabular-nums;color:var(--texto)}
.curva-wrap{position:relative}
.curva-wrap svg{display:block;width:100%;height:auto}
/* alvo de toque de 32px mesmo com marcador de 8px — dedo não é seta */
.ponto-toque{position:absolute;top:0;width:32px;height:100%;background:transparent;
border:0;padding:0;cursor:pointer}
.curva-eixo{display:flex;justify-content:space-between;margin-top:6px;font-size:12px}
/* os logos de quem oferece o evento, no rodapé */
.oferecimento{margin-top:26px}
.logos{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:10px}
.logos img{height:30px;width:auto;max-width:130px;object-fit:contain;opacity:.92}
@media (min-width:700px){
body{padding:32px 24px 48px}
h1{font-size:42px}
}
@media (min-width:1060px){
body{padding:40px 32px 56px}
/* entrar/index: a marca pode crescer um pouco no notebook — nada além disso,
a caixa continua centralizada e estreita (.pagina-estreita, 460px). */
.pagina-estreita .marca{width:190px}
}
@media (max-width:480px){
body{ background-position:right -130px top -18px; }
}
@media (prefers-reduced-motion:reduce){
*{animation:none !important; transition:none !important}
}
/* ── Pedidos de divulgação: as telas públicas ──────────────────────────────── */
.link-destaque{color:var(--azul); font-weight:700; word-break:break-all}
.situacao-linha{margin-top:4px}
.caixa-recado{background:var(--poco); border:1px solid var(--borda);
border-radius:12px; padding:12px; margin-top:12px}
.ficha{margin-top:12px}
.ficha dt{font-size:13px; font-weight:700; letter-spacing:.06em;
text-transform:uppercase; color:var(--texto-fraco); margin-top:12px}
.ficha dd{margin-top:2px; white-space:pre-wrap} /* respeita a quebra que a pessoa digitou */
/* ── Pedidos de divulgação ─────────────────────────────────────────────────── */
.pedido{background:var(--noite-alta); border:1px solid var(--borda);
border-radius:var(--raio); padding:16px; margin-bottom:12px}
.pedido-topo{display:flex; flex-wrap:wrap; align-items:center; gap:8px;
justify-content:space-between; margin-bottom:8px}
.pedido-acoes{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
/* Conserto 1 (21/09/2026): `.botao` sozinho é `width:100%`, e sem desfazer isso
cada botão vira uma linha inteira — com 4 ações o cartão virava uma torre de
~400px. Mesmo padrão de `.acoes-cartao` (eventos.html): `width:auto` +
`flex:1` divide a LARGURA entre os botões em vez de empilhar. `flex-wrap`
continua ligado (são até 4 botões — em 390px quebram para no máximo duas
linhas de dois) e `min-height:44px` continua garantindo o alvo de toque. */
.pedido-acoes .botao{width:auto; flex:1; min-height:44px; padding:11px; font-size:15px}
.etiqueta-tipo{font-size:11px; font-weight:700; letter-spacing:.06em;
text-transform:uppercase; color:var(--azul);
border:1px solid var(--borda-campo); border-radius:999px; padding:2px 10px}
.prazo{font-size:15px; color:var(--ouro); margin-top:4px}
/* Vencido usa --perigo, que já foi medido em 4,5:1 dentro do cartão. */
.prazo-vencido{color:var(--perigo); font-weight:700}
.contador{font-size:13px; font-weight:700; color:var(--noite);
background:var(--ouro); border-radius:999px; padding:1px 9px; margin-left:8px}
.contador:empty{display:none} /* zero pedido novo, zero bolinha */
/* Conserto 2 (21/09/2026): o link "abrir o que a pastoral mandou" estava colado
na linha do prazo, sem respiro — dá a ele o mesmo espaço que qualquer outro
parágrafo do cartão. */
/* Conserto 2 (21/09/2026): sem `color`, o link herdava o azul-escuro padrão do
navegador — ~1,58:1 sobre --noite-alta, quase invisível. --azul já mede
5,44:1 no mesmo fundo (mesma cor usada em .botao-fraco e nos outros links da
casa). Sublinhado é o padrão do navegador para e continua de propósito:
é o que distingue "isto é um link" de "isto é um botão" no cartão. */
.pedido-link{display:block; margin-top:8px; color:var(--azul)}
/* ── A faixa que convida a instalar (só no navegador) ───────────────────────── */
.faixa-instalar{background:var(--noite-alta); border:1px solid var(--ouro);
border-radius:var(--raio); padding:16px; margin-bottom:18px}
.faixa-instalar-texto strong{display:block; margin-bottom:4px}
.faixa-instalar-acoes{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.faixa-instalar-acoes .botao{width:auto; flex:1; min-height:44px; padding:11px; font-size:15px}
.caixa-passos{background:var(--poco); border:1px solid var(--borda);
border-radius:12px; padding:12px 12px 12px 30px; margin-top:12px}
.caixa-passos li{margin-bottom:8px}
.caixa-passos li:last-child{margin-bottom:0}
/* ── foto.html (Tarefa 6): mandar foto pro telão ────────────────────────────── */
/* O botão de "Escolher foto" é um — abre o seletor do
celular (câmera ou galeria) sem JavaScript nenhum. Mas `.botao` sozinho
pressupõe /, que já nascem inline-block; um é `inline`
por padrão e ignora `width:100%` da classe. Só isso muda aqui — o resto do
visual (cor, borda, texto) já vem de `.botao.botao-fraco`. */
.botao-arquivo{display:block; text-align:center}
/* A prévia da foto escolhida, e a mesma foto na tela de "Pronto!". Sem moldura
própria porque já mora dentro de `.caixa`; só precisa não vazar a largura do
cartão e ter o mesmo raio dos outros componentes da casa. */
.previa-foto{width:100%; height:auto; display:block; border-radius:10px; margin-top:14px}
/* ── telao.html (Tarefa 7): o telão do projetor ─────────────────────────────── */
/* Este é o primeiro tipo de tela do projeto que NÃO é um formulário nem uma
leitura de uma coluna: é um painel de tela cheia, num notebook ligado ao
projetor, a noite inteira, sem ninguém sentado na frente pra clicar em nada.
Por isso `.tela-telao` desfaz o que o `body` genérico assume por padrão — a
constelação decorativa (concorre com as fotos), o `padding`, e o
`display:flex;justify-content:center` que centraliza uma coluna de 560px —
e fixa a altura em 100vh sem rolagem. É notebook, não celular, por isso
100vh (não 100dvh: aqui não existe barra de endereço que apareça e some). */
body.tela-telao{display:block; padding:0; overflow:hidden; height:100vh; background:var(--noite)}
/* carregando / não encontrado: mesma centralização, sem o resto da montagem */
.telao-tela-cheia{height:100vh; display:flex; flex-direction:column; align-items:center;
justify-content:center; text-align:center; gap:10px; padding:40px}
.telao{display:flex; flex-direction:column; height:100vh; padding:28px 44px; gap:16px}
.telao-topo{display:flex; align-items:center; justify-content:space-between; gap:24px; flex:0 0 auto}
.telao-topo .marca{width:120px; flex:0 0 auto}
.telao-evento-nome{font-size:clamp(18px,2.1vw,28px); font-weight:800; letter-spacing:-.01em;
text-transform:uppercase; text-align:right; color:var(--texto);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:62vw}
/* o meio: o destaque cresce até sobrar da tela (top+rodapé são de altura fixa);
min-height:0 é o que deixa um filho de flex ENCOLHER dentro do pai em vez de
estourar a altura — sem isso, uma foto vertical alta empurra o rodapé pra
fora da tela e nasce rolagem, exatamente o que este brief proíbe. */
/* ⚠️ `justify-content:flex-end` desde que a foto virou camada de fundo: com a foto fora
do fluxo, este bloco ficou vazio, e o nome de quem mandou passou a flutuar no MEIO da
imagem. O lugar dele é embaixo, encostado no mosaico — só apareceu olhando a foto da
tela, nenhuma asserção pegaria. */
.telao-meio{flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
align-items:center; justify-content:flex-end; gap:14px; position:relative; z-index:1}
/* ⚠️ A FOTO PEGA O TELÃO TODO (pedido do dono, 21/09/2026): até 80% da largura E da
altura da tela, ainda que passe POR TRÁS da marca, do nome do evento, do mosaico e do
rodapé. Antes ela era espremida na sobra entre esses elementos — num projetor, a foto
de quem mandou ficava pequena no meio da tela, que é o oposto da graça da coisa.
Por isso ela sai do fluxo (`position:fixed`, centralizada) e fica numa camada ABAIXO
de tudo (`z-index:0`, com os outros elementos em 1). Os 80% são o limite pedido: a foto
respira e a moldura da noite (marca, nome, QR) continua legível por cima nas bordas. */
.telao-destaque{position:fixed; inset:0; z-index:0; display:flex;
align-items:center; justify-content:center; pointer-events:none}
.telao-destaque img{max-width:80vw; max-height:80vh; width:auto; height:auto;
object-fit:contain; display:block;
border-radius:18px; box-shadow:0 24px 64px rgba(0,0,0,.55); border:2px solid var(--borda)}
/* Tudo que é moldura fica ACIMA da foto, e com um véu atrás do texto para continuar
legível quando a foto passar por baixo — sem isso, letra clara sobre foto clara some. */
.telao-topo, .telao-mosaico, .telao-rodape, .telao-autor, .telao-marca-evento{position:relative; z-index:1}
.telao-evento-nome, .telao-autor, .telao-qr-texto{text-shadow:0 2px 10px rgba(5,12,18,.85)}
.telao-destaque-vazio{color:var(--texto-fraco); font-size:clamp(18px,1.8vw,24px);
text-align:center; max-width:640px; line-height:1.4}
/* ⚠️ O nome de quem mandou vai para o RODAPÉ, não fica sobre a foto (pedido do dono,
21/09/2026: "deixe o titulo da foto em baixo, melhor do que no meio"). Ele estava a 83%
da altura, ou seja, por cima da própria imagem — sobre foto clara, letra dourada
some, e sobre foto escura, rouba a atenção do que interessa.
O centro do rodapé está livre (o QR fica à esquerda, o brasão à direita), então é ali
que ele cabe sem disputar espaço com nada. */
.telao-autor{position:fixed; left:50%; bottom:34px; transform:translateX(-50%);
z-index:2; margin:0; max-width:52vw; text-align:center;
font-size:clamp(20px,2.2vw,30px); font-weight:700; color:var(--ouro);
text-shadow:0 2px 12px rgba(5,12,18,.9)}
.telao-autor::before{content:'— '}
.telao-autor:empty{display:none}
/* o mosaico: as últimas 8, sempre em UMA linha só (nowrap) — 8 quadros de até
150px cabem folgado nos 1920px do projetor; não pode quebrar linha e crescer
a altura da tela. */
.telao-mosaico{flex:0 0 auto; display:flex; gap:10px; justify-content:center; flex-wrap:nowrap}
.telao-mosaico img{width:9vw; max-width:150px; aspect-ratio:1; object-fit:cover;
border-radius:8px; border:1px solid var(--borda); opacity:.85; display:block}
.telao-mosaico img.telao-mosaico-atual{opacity:1; border-color:var(--ouro);
box-shadow:0 0 0 2px var(--ouro)}
.telao-rodape{flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px}
.telao-qr{display:flex; align-items:center; gap:14px}
/* o QR sai branco de propósito (o gerador desenha em preto puro) — precisa de
contraste alto pra câmera de celular ler de longe, num salão escuro; sobre
--noite direto os módulos pretos quase somem na borda. */
.telao-qr #qr{background:#fff; border-radius:8px; padding:6px; line-height:0; flex:0 0 auto}
.telao-qr #qr svg{display:block; width:78px; height:78px}
.telao-qr-texto{font-size:14px; color:var(--texto-fraco); max-width:260px; line-height:1.35}
.telao-brasao{height:52px; width:auto; opacity:.92; flex:0 0 auto}
/* o aviso de sem-internet: discreto, nunca no meio do caminho de nada — é
aviso, não bloqueio (Passo 3: o telão nunca para de passar foto). Mora no
MEIO do rodapé (o único vazio real da tela: `justify-content:space-between`
deixa QR-à-esquerda e brasão-à-direita, sobrando o centro de baixo).
Achado na conferência de tela desta tarefa: a primeira tentativa foi no
canto superior direito, mas colidia direto em cima do nome do evento —
viu-se SÓ na foto, nenhum teste automatizado acusa sobreposição visual. */
/* Subiu de 34px para 96px quando o nome de quem mandou foi para o rodapé: os dois
ficavam no mesmo ponto e se sobrepunham quando a internet caía. */
.telao-offline{position:fixed; bottom:96px; left:50%; transform:translateX(-50%); z-index:3;
background:rgba(240,122,110,.14); border:1px solid var(--perigo); color:var(--perigo);
font-size:13px; font-weight:600; padding:6px 14px; border-radius:20px; white-space:nowrap}
/* ── agora.html (Tarefa 8): acompanhar a noite ao vivo, no celular de quem está
sentado no salão ────────────────────────────────────────────────────────── */
/* O ponto que pulsa ao lado do título de "Agora": CSS puro, nunca temporizador de
JS (o brief pede isso por escrito — um `setInterval` de JS pode atrasar ou
parar com a aba em segundo plano; uma `animation` de CSS, não). Ele já para
sozinho dentro de `@media (prefers-reduced-motion:reduce)` — coberto pela
regra GLOBAL deste arquivo (linha ~319, `*{animation:none !important}`), que
vale para qualquer animação nova daqui em diante, inclusive esta. Provado por
Playwright com `prefers-reduced-motion: reduce` emulado (ver relatório da
Tarefa 8): sem a regra, o ponto continua opaco e parado — nunca escondido,
nunca piscando. */
.agora-cabecalho{margin-bottom:6px}
.agora-titulo-linha{display:flex; align-items:center; gap:10px}
.ponto-vivo{width:13px; height:13px; border-radius:50%; background:var(--verde);
flex:0 0 auto; animation:pulsar-vivo 1.6s ease-in-out infinite}
@keyframes pulsar-vivo{
0%, 100%{opacity:1; box-shadow:0 0 0 0 rgba(155,210,85,.5)}
50%{opacity:.55; box-shadow:0 0 0 9px rgba(155,210,85,0)}
}
.agora-titulo{font-size:27px; font-weight:800; line-height:1.15; letter-spacing:-.01em}
.agora-detalhe{margin-top:6px}
/* a ordem da noite inteira, com os três estados que dão para ler de relance, no
escuro: passou (apagado), agora (destacado, com a etiqueta "agora" — nunca só
a cor, para quem não distingue verde de cinza na tela do celular à noite),
ainda vem (normal). */
.lista-etapas{list-style:none; margin-top:4px}
.etapa-linha{display:flex; align-items:baseline; justify-content:space-between; gap:12px;
padding:12px 14px; border-radius:10px; margin-bottom:8px; border:1px solid transparent}
.etapa-linha:last-child{margin-bottom:0}
.etapa-titulo{font-weight:600}
/* ⚠️ Este bloco fica ANTES de `.etapa-atual`/`.etapa-passada`/`.etapa-futura` de
propósito, e isso NÃO é organização: é o que faz o destaque funcionar. As duas regras
têm a mesma força (uma classe cada) e caem no mesmo elemento, então quem vem depois no
arquivo ganha. Com este bloco embaixo, o atalho `border:` daqui reescrevia a COR da
borda e apagava o verde que `.etapa-atual` acabara de pedir — a etapa de agora ficava
só com o fundo tingido, sem a borda. Ninguém leu isso no código: foi achado medindo a
cor do pixel na foto da tela. Se mover este bloco para baixo, o verde some de novo. */
/* A etapa na visão da EQUIPE: diferente da `.etapa-linha` do público porque aqui
cada uma carrega botões embaixo ("começar esta", "terminar", "apagar"), então
empilha em coluna em vez de alinhar título e horário lado a lado. Herda de
propósito `.etapa-atual` / `.etapa-passada` / `.etapa-futura`, que já existem —
assim o destaque da etapa de agora é o MESMO nas duas telas. */
.etapa-linha-equipe{display:block; padding:12px 14px; border-radius:10px;
margin-bottom:8px; border:1px solid var(--borda)}
.etapa-linha-equipe:last-child{margin-bottom:0}
.etapa-equipe-topo{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.etapa-passada{opacity:.5}
.etapa-passada .etapa-titulo{font-weight:400}
.etapa-atual{background:rgba(155,210,85,.10); border-color:var(--verde)}
.etapa-atual .etapa-titulo{color:var(--verde)}
.etapa-marca{font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
color:var(--noite); background:var(--verde); border-radius:20px; padding:2px 9px; flex:0 0 auto}
/* "ainda vem" não precisa de nada além do que `.etapa-linha` já dá — esta regra
existe só para deixar isso ESCRITO (a classe é citada em agora.html), em vez
de um terceiro estado que fica igual aos outros dois por acidente. */
.etapa-futura{color:var(--texto)}
/* Conserto 1 (revisão da Tarefa 8, acrescentado no FIM do arquivo — estilo.css está
com outros agentes agora): o aviso discreto de "sem internet" em agora.html. Mesma
cor semântica de erro/atenção que o resto da casa já usa (--perigo), mas como
PÍLULA pequena e inline (nunca `.erro`/`.aviso` de borda-esquerda cheia — aqui não
pode competir visualmente com o "Agora:" logo acima). Elemento normal do fluxo do
documento (nunca `position:fixed`/`absolute`): quando aparece, só empurra a lista
"A noite" pra baixo — nunca cobre nada, e nunca move o bloco "Agora:" que já está
ACIMA dele na marcação. */
.aviso-offline{display:inline-block; margin:14px 0 0; padding:5px 12px; border-radius:20px;
background:rgba(240,122,110,.14); border:1px solid var(--perigo); color:var(--perigo);
font-size:13px; font-weight:600}
/* A marca do evento no telão (db/028): centralizada, ABAIXO de onde passam as fotos.
Discreta de propósito — as fotos é que são o assunto da noite; a marca situa, não
disputa. `max-height` em vh porque o telão é sempre tela cheia: assim ela encolhe junto
se o projetor for de proporção diferente, em vez de empurrar o rodapé pra fora. */
.telao-marca-evento{flex:1 1 auto; min-width:0; display:flex; justify-content:center}
.telao-marca-evento img{max-height:5vh; max-width:18vw; object-fit:contain; opacity:.92}
/* ── A mesa de controle do evento (Tarefa 10) ─────────────────────────────────
As classes abaixo foram citadas pelo HTML da mesa de controle e NÃO existiam na
folha — o que não dá erro nenhum: os elementos sairiam com a cara padrão do
navegador, brancos e desalinhados no meio de um app escuro. É a armadilha que já
mordeu este projeto três vezes; encontrada aqui pela varredura de classes citadas
contra as classes existentes, não a olho. */
/* As fotos que chegaram. Grade que se acomoda sozinha à largura: no celular cabem
duas, no computador quantas couberem — sem precisar de ponto de quebra. */
.grade-fotos{display:grid; gap:10px; margin-top:14px;
grid-template-columns:repeat(auto-fill, minmax(140px, 1fr))}
.foto-cartao{border:1px solid var(--borda); border-radius:10px; overflow:hidden;
background:var(--noite-alta); display:flex; flex-direction:column}
.foto-cartao img{width:100%; aspect-ratio:1; object-fit:cover; display:block}
/* Foto tirada do telão: some da tela grande, mas CONTINUA aqui, apagada e legível.
A equipe precisa enxergar o que foi retirado e por quem — uma foto que
desaparece da gestão junto com o telão viraria discussão sem registro. */
.foto-cartao-removida{opacity:.45}
.foto-cartao-removida img{filter:grayscale(1)}
/* ── A entrada da página de links ─────────────────────────────────────────────
Uma orquestração só, no carregamento: os itens chegam em cascata curta. Não é
enfeite — esta página busca o conteúdo do banco, e a cascata é o que mostra que ela
terminou de carregar, em vez de aparecer tudo de estalo.
⚠️ O estado invisível mora DENTRO da animação (no `from`), nunca no estado base.
Se estivesse na regra base, quem pede menos movimento cairia na regra global
`*{animation:none !important}` desta folha e ficaria com a página INVISÍVEL — a
animação desligada não teria como revelar nada. Do jeito que está, sem animação o
item simplesmente já nasce no lugar certo. */
@keyframes links-entram{from{opacity:0; transform:translateY(10px)}}
.pagina-links .quadro,
.pagina-links .link-bio{animation:links-entram .28s cubic-bezier(.2,.7,.3,1) both}
.pagina-links .quadro{animation-delay:.02s}
.pagina-links #lista > *:nth-child(1){animation-delay:.06s}
.pagina-links #lista > *:nth-child(2){animation-delay:.10s}
.pagina-links #lista > *:nth-child(3){animation-delay:.14s}
.pagina-links #lista > *:nth-child(4){animation-delay:.18s}
.pagina-links #lista > *:nth-child(5){animation-delay:.22s}
.pagina-links #lista > *:nth-child(6){animation-delay:.26s}
.pagina-links #lista > *:nth-child(7){animation-delay:.30s}
.pagina-links #lista > *:nth-child(8){animation-delay:.34s}
.pagina-links #lista > *:nth-child(n+9){animation-delay:.38s}
/* A resposta ao toque: o cartão sobe um fio e o disco do ícone ganha corpo. Movimento
que responde a uma AÇÃO da pessoa — este é bem-vindo, ao contrário de efeito que
acontece sozinho na tela. */
.link-bio{transition:transform .16s ease, border-color .16s ease, background-color .16s ease}
.link-bio:hover{transform:translateY(-2px)}
.link-bio:hover .link-disco{transform:scale(1.06);
background:color-mix(in srgb, var(--cor-icone) 22%, transparent)}
.link-bio:hover .link-bio-miniatura{transform:scale(1.06)}
.link-bio:active{transform:translateY(0)}
/* ── A linha do tempo da noite (agora.html) ───────────────────────────────────
O dono olhou a versão anterior — uma lista de caixas com a de agora destacada — e
disse: "o cronograma ficou ruim também, pode ser melhor, estilo cronograma mesmo,
como linha do tempo". Ele tem razão: caixas empilhadas não mostram PERCURSO, e é
percurso o que a pessoa quer ver numa noite que tem começo, meio e fim.
Agora é um fio vertical com um marcador por etapa. O fio é verde até onde a noite
já chegou e apagado depois — dá para ler o andamento da noite num relance, sem ler
palavra nenhuma. E os HORÁRIOS aparecem, que antes nem eram mostrados. */
.linha-do-tempo{list-style:none; margin:4px 0 0; padding:0}
.etapa-tempo{position:relative; padding:0 0 22px 30px; min-height:26px}
.etapa-tempo:last-child{padding-bottom:0}
/* O fio que liga um marcador ao seguinte. Não desenhamos no último, senão sobra um
rabo solto embaixo da última etapa. */
.etapa-tempo::before{content:''; position:absolute; left:6px; top:16px; bottom:0; width:2px;
background:var(--borda)}
.etapa-tempo:last-child::before{display:none}
/* O marcador. `box-sizing` explícito porque a borda entra na conta do tamanho: sem
isso os três estados ficam com diâmetros diferentes e o fio desalinha. */
.etapa-tempo::after{content:''; position:absolute; left:0; top:5px; width:14px; height:14px;
box-sizing:border-box; border-radius:50%; border:2px solid var(--borda); background:var(--noite)}
/* Já passou: fio e marcador em verde apagado — o caminho andado. */
.etapa-tempo-passada::before{background:rgba(155,210,85,.35)}
.etapa-tempo-passada::after{border-color:rgba(155,210,85,.55); background:rgba(155,210,85,.55)}
.etapa-tempo-passada .etapa-tempo-titulo{opacity:.6; font-weight:400}
.etapa-tempo-passada .etapa-tempo-hora{opacity:.6}
/* Acontecendo agora: marcador cheio, e o fio ABAIXO dele volta ao cinza — é o ponto
exato onde a noite está. */
.etapa-tempo-atual::after{border-color:var(--verde); background:var(--verde)}
.etapa-tempo-atual .etapa-tempo-titulo{color:var(--verde); font-weight:700}
/* O anel que pulsa em volta do marcador de agora. Mora num elemento PRÓPRIO, nunca no
marcador: a folha desliga toda animação para quem pediu menos movimento, e se a
pulsação estivesse no marcador ele sumiria junto com ela. Assim, sem animação, o
marcador continua cheio e verde — só não pulsa. */
.etapa-tempo-pulso{position:absolute; left:0; top:5px; width:14px; height:14px;
border-radius:50%; border:2px solid var(--verde); animation:pulso-etapa 2s ease-out infinite}
@keyframes pulso-etapa{
0%{transform:scale(1); opacity:.9}
70%{transform:scale(2.1); opacity:0}
100%{transform:scale(2.1); opacity:0}
}
/* "ainda vem" não precisa de nada além do que `.etapa-tempo` já dá — esta regra existe
só para a classe citada no HTML EXISTIR na folha. Classe citada e inexistente não dá
erro: o elemento sai com o visual padrão do navegador, e ninguém descobre. */
.etapa-tempo-futura{color:var(--texto)}
.etapa-tempo-topo{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.etapa-tempo-hora{font-variant-numeric:tabular-nums; font-weight:700; font-size:13px;
color:var(--texto-fraco); flex:0 0 auto}
.etapa-tempo-atual .etapa-tempo-hora{color:var(--verde)}
.etapa-tempo-titulo{font-size:16px; font-weight:600; line-height:1.3}
.etapa-tempo-detalhe{color:var(--texto-fraco); font-size:13.5px; line-height:1.45; margin:4px 0 0}
/* Operação e configuração do evento são seções distintas, uma após a outra. */
#mesaControle{display:grid; grid-template-columns:minmax(0,1fr); gap:18px}
#mesaControle .caixa{max-width:none}
.painel-coluna-operacao,.painel-coluna-config{display:flex; flex-direction:column; gap:18px; min-width:0}
.painel-coluna-operacao > *, .painel-coluna-config > *{margin-bottom:0}
/* ── evento-equipe.html: o cabeçalho do painel do evento ao vivo ──────────────
Regras novas desta tarefa (redesenho de layout e hierarquia, pedido do dono
ao vivo — ver o comentário no HTML). Um bloco só, para achar tudo junto. */
/* Os dois links de volta, lado a lado, acima do cabeçalho do evento. */
.migalhas{display:flex; gap:18px; flex-wrap:wrap}
/* O nome do evento e o crachá do telão, na mesma linha. */
.painel-cabecalho-topo{display:flex; align-items:center; gap:12px; flex-wrap:wrap; min-width:0}
/* Mesmo defeito do `.ferramenta-titulo` acima, mesmo conserto: aqui é o NOME DO EVENTO
que não encolhe. Um nome comprido ("Retiro de Advento da Comunidade — Encontro de
Formação...") atravessava a borda do painel em 320px. */
.painel-cabecalho-topo > *{min-width:0; overflow-wrap:anywhere}
/* `.etiqueta-viva`/`.etiqueta-em-breve` (a etiqueta de "ao vivo" que a Central já
usa) nascem com `margin-top:8px`, pensadas para ficar SOZINHAS embaixo de um
cartão. Aqui o crachá do telão fica do LADO do , na mesma linha — sem
zerar essa margem ele desce torto. */
.badge-inline{margin-top:0}
/* A faixa de números do cabeçalho: confirmados, vagas, etapas, fotos — os
quatro que dizem "como o evento está indo" sem precisar rolar a página.
Tamanho contido de propósito (não é `.numero-grande`): quatro números de
44px competiriam entre si, e o que tem que pesar mais nesta tela é o NOME
do evento (`h1`, já 34px), não a contagem. */
.faixa-numeros{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:14px}
.numero-item{display:flex; align-items:baseline; gap:5px; font-size:14.5px; color:var(--texto-fraco)}
.numero-item strong{font-size:19px; font-weight:800; color:var(--texto); font-variant-numeric:tabular-nums}
/* ── O cartão "Agora": a única ação principal da tela inteira ─────────────────
Antes, a "ordem da noite" tinha um botão .botao (verde, cheio) em CADA etapa
— três, quatro, iguais, disputando espaço; o dono reclamou exatamente disso.
Agora só este cartão, no topo da coluna de operação, é verde-cheio; todo
outro botão da mesa (inclusive o de cada etapa na linha do tempo, abaixo
dele) é discreto (`.botao-fraco`). Borda verde para se destacar das outras
caixas sem precisar de fundo colorido brigando com o `.aviso` dourado logo
acima, no cabeçalho. */
.etapa-agora-card{border-color:var(--verde)}
.etapa-agora-kicker{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
color:var(--verde); margin-bottom:6px}
.etapa-agora-titulo{font-size:24px; font-weight:800; line-height:1.15; letter-spacing:-.01em; margin-bottom:0}
.etapa-agora-quando{margin-top:4px}
.etapa-agora-botao{margin-top:16px}
/* ── Confirmados: linhas finas, não cartões grandes ───────────────────────────
Cada ficha (uma confirmação, 1+ pessoas) era uma `.caixa` inteira — com 113
pessoas isso é um muro. Agora é uma linha com borda embaixo só; as duas
ações que antes eram botões cheios (falar no WhatsApp, tirar a confirmação)
viram links discretos no rodapé da linha — ainda visíveis sempre (celular
não tem "passar o mouse"), só sem o peso visual de um `.botao`. */
.ficha-linha{padding:12px 0; border-bottom:1px solid var(--borda)}
.ficha-linha:last-child{border-bottom:0}
.ficha-rodape{display:flex; justify-content:space-between; align-items:center; gap:10px 16px;
margin-top:8px; flex-wrap:wrap}
.ficha-acoes{display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.link-acao{font-size:13px; font-weight:600; color:var(--azul); text-decoration:none;
background:none; border:0; font-family:inherit; cursor:pointer; padding:2px 0}
.link-acao:hover{text-decoration:underline}
.link-acao-perigo{color:var(--perigo)}
/* Endereços do evento: rótulo menor e mais apagado que o padrão da casa — esta
caixa é CONFIGURAÇÃO (ajusta uma vez, olhada de longe em longe), então o
texto pode pesar menos que numa tela onde o rótulo é a própria pergunta. */
.enderecos-lista label{font-size:13.5px; color:var(--texto-fraco); font-weight:600; margin:14px 0 5px}
/* A coluna de configuração inteira, um tom mais discreta: os títulos das suas
caixas (O telão / Endereços / Relatório) ficam menores que os da coluna de
operação — o dono pediu que "nada tenha peso que não ganhou", e o que se
ajusta uma vez não precisa do mesmo tamanho de título do que se toca
durante o evento. */
.painel-coluna-config h2{font-size:17px}
/* "#listaConfirmados": colunas de TEXTO (não colunas de LAYOUT) — menos
rolagem para achar alguém num evento de 100+ pessoas, sem reintroduzir a
caixa por família que esta tarefa removeu. `column-width`, não
`column-count`: a lista agora mora DENTRO da coluna de configuração (mais
estreita que a página inteira, e sua largura muda com a proporção do
grid) — `column-width:230px` deixa o navegador decidir quantas colunas
cabem no espaço de verdade (nenhuma se a coluna for estreita demais, duas
ou mais se sobrar espaço), em vez de forçar sempre duas e apertar demais.
`break-inside:avoid` em cada linha: sem ele, o navegador corta uma ficha ao
meio na fronteira das colunas — nome de um lado, WhatsApp do outro. */
#listaConfirmados{column-width:230px; column-gap:28px}
.ficha-linha{break-inside:avoid}
/* Campo de formulário dentro da mesa de controle continua com teto de 560px,
mesmo com a CAIXA ao redor liberada da largura (`#mesaControle .caixa{max-
width:none}`, acima) — achado por medição (provas/responsivo.prova.mjs):
sem isto, "Acrescentar etapa — título" e os campos de endereço esticavam
até 800px, bem além do que qualquer teto-560 do resto da casa permite.
Especificidade por id vence `.linha-link .campo{flex:1}` só na largura —
flex e min-width continuam intactos, o campo do endereço só para de
crescer em 560px em vez de continuar até a borda da coluna. */
#mesaControle .campo{max-width:560px}
/* ── Setores: quem faz o quê na PASCOM ────────────────────────────────────────
Entrou com o módulo "estrutura de setores e equipe" (21/09/2026). Duas telas
usam este bloco: `equipe.html` (os setores de cada pessoa e a gestão da lista)
e `pedidos.html` (encaminhar o pedido e filtrar a fila).
⚠️ Nada aqui inventa um botão novo: a pílula abaixo é a MESMA forma da
`.etiqueta-tipo` que a fila já usa, só que clicável. */
/* A fileira de setores de uma pessoa (ou de qualquer lista de pílulas). */
.setores-linha{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:10px}
/* A pílula que LIGA e DESLIGA a pessoa de um setor.
⚠️ O estado mora no `aria-pressed`, e a cor sai DELE — não de uma segunda
classe. Com duas fontes de verdade (uma classe para pintar, um atributo para o
leitor de tela), uma esquece de mudar e a tela passa a dizer "marcado" para
quem lê a tela enquanto mostra "desmarcado" para quem enxerga. Uma verdade só.
`min-height:36px` porque isto é alvo de toque no celular, não enfeite. */
.setor-alternar{font-family:inherit; font-size:13px; font-weight:700;
letter-spacing:.04em; text-transform:uppercase; cursor:pointer;
border-radius:999px; padding:6px 12px; min-height:36px;
background:transparent; color:var(--texto-fraco); border:1px solid var(--borda-campo)}
.setor-alternar:hover{border-color:var(--azul); color:var(--azul)}
.setor-alternar[aria-pressed="true"]{background:var(--azul); color:var(--noite);
border-color:var(--azul)}
.setor-alternar:disabled{opacity:.45; cursor:default}
/* Uma linha da gestão dos setores: o nome e o que ele faz de um lado, as ações
do outro. Quebra para duas linhas no celular sem espremer os botões. */
.setor-linha{display:flex; flex-wrap:wrap; align-items:flex-start;
justify-content:space-between; gap:10px;
border-top:1px solid var(--borda); padding:14px 0}
.setor-linha:first-child{border-top:0}
.setor-linha-nome{font-weight:700}
/* Setor desligado continua na lista da gestão (é assim que se religa), mas
apagado: quem bate o olho tem de ver que ele não está valendo. */
.setor-desligado .setor-linha-nome{color:var(--texto-fraco); text-decoration:line-through}
.setor-linha-acoes{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.setor-linha-acoes .botao{width:auto; padding:8px 12px; font-size:14px; min-height:40px}
/* ── A fila de pedidos: filtros, contagem e encaminhar ─────────────────────── */
/* Os dois seletores do filtro, lado a lado no computador e empilhados no celular
(`minmax(0,...)` para o poder encolher — sem isso ele estoura a caixa
em 320px, o mesmo defeito que `.linha-link` já tinha resolvido com min-width). */
.filtros-fila{display:grid; grid-template-columns:1fr; gap:10px 16px; margin-top:14px}
@media (min-width:560px){
.filtros-fila{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.filtros-fila label{margin-top:0}
/* O seletor de setor dentro do cartão do pedido. Menor que um campo de
formulário de propósito: é um ajuste dentro de um cartão, não a pergunta
principal da tela. */
.pedido-setor{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px}
.pedido-setor label{margin:0; font-size:13.5px; color:var(--texto-fraco); font-weight:600}
/* ⚠️ `max-width` aqui não é enfeite: sem ele o seletor esticava até ~1000px no
notebook (visto na foto de 1280px, invisível em teste nenhum). É o mesmo
defeito que a casa já tinha consertado duas vezes — o teto de 560px dos campos
e o `#mesaControle .campo{max-width:560px}`. Nome de setor tem 40 letras no
máximo; 320px sobra. */
.pedido-setor .campo{width:auto; flex:1; min-width:140px; max-width:320px;
padding:9px 10px; font-size:15px}
/* ── A parede de notificações (só dentro do app instalado) ──────────────────
⚠️ `position:fixed; inset:0` de propósito: ela cobre a tela inteira e NÃO rola junto
com o conteúdo atrás. Uma "parede" que a pessoa consegue rolar para longe não é parede.
`overflow-y:auto` no próprio bloco para os quatro passos de destravar caberem num
celular pequeno deitado, sem cortar o último. */
.parede{position:fixed; inset:0; z-index:9999; background:var(--noite);
display:flex; align-items:center; justify-content:center; padding:24px 16px; overflow-y:auto}
.parede-caixa{background:var(--noite-alta); border:1px solid var(--borda);
border-radius:var(--raio); padding:24px; max-width:460px; width:100%}
.parede-caixa h2{margin-bottom:10px}
.parede-caixa ol{margin:14px 0 0 20px; line-height:1.5}
.parede-caixa ol li{margin-bottom:8px}
.parede-acoes{display:flex; flex-direction:column; gap:10px; margin-top:20px}
/* ⚠️ 48px de altura mínima: é o alvo que um dedo acerta. E `a.botao` precisa de
inline-flex para centralizar o próprio texto, como em `.acoes-cartao`. */
.parede-acoes .botao{width:100%; min-height:48px}
.parede-acoes a.botao{display:inline-flex; align-items:center; justify-content:center;
text-decoration:none}
/* ── escala.html (Tarefa 7): a escala da equipe, só de leitura ─────────────── */
/* O cartão reaproveita `.cartao-evento` (a mesma casca já usada em eventos.html e
equipe.html) — nenhuma classe de cartão nova. `.escala-cancelada` só esmaece,
mesmo padrão de `.etapa-passada` (evento-equipe.html): a história continua ali,
só menos em evidência. `.etiqueta-perigo` é a MESMA pílula de `.etiqueta-tipo`
(pedidos.html), pintada com --perigo em vez de --azul, para "Cancelada" não sair
na cor de "Evento". */
.escala-cancelada{opacity:.55}
.etiqueta-perigo{color:var(--perigo); border-color:var(--perigo)}
/* a linha de UM setor dentro do cartão — ordenada por `setores.ordem` no script,
nunca por nome (ver o comentário em escala.html: é o mesmo campo que o dono
mexe em Equipe → Setores, e reordenar por nome aqui faria aquele recurso não
valer nada). */
.escala-setor{margin-bottom:10px}
.escala-setor:last-child{margin-bottom:0}
/* ── escala.html (Tarefa 8): pôr e tirar gente ──────────────────────────────── */
/* Cada pessoa escalada vira uma pilulazinha (mesma forma de `.etiqueta-tipo`, só
que com o "×" de tirar dentro dela para quem é gestão). `min-height:36px` no
botão porque é alvo de toque no celular, mesma régua de `.setor-alternar`. */
.escala-pessoas{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:4px}
.escala-pessoa{display:inline-flex; align-items:center; gap:6px;
border:1px solid var(--borda-campo); border-radius:999px; padding:4px 6px 4px 12px}
.escala-tirar{font-family:inherit; font-size:16px; line-height:1; font-weight:700;
cursor:pointer; border:0; border-radius:999px; width:26px; height:26px;
min-width:26px; min-height:26px; background:transparent; color:var(--texto-fraco)}
.escala-tirar:hover{background:var(--perigo); color:var(--noite)}
.escala-tirar:disabled{opacity:.45; cursor:default}
/* ══ Visual novo, no app TODO (pedido do dono, 24/09/2026) ═════════════════════
O acabamento da nova Central (central.html) levado a todas as telas por aqui, sem
mexer em HTML nem em lógica: fundo com luzes suaves, cartões de vidro, botões e
campos com o mesmo brilho. ⚠️ O logo não passa por aqui — é sempre o arquivo
midia/pascom.png. O telão e a Central têm fundo próprio e ficam de fora do fundo. */
:root{
--vidro:rgba(22,41,58,.62);
--vidro-borda:rgba(255,255,255,.08);
--sombra-cartao:0 20px 50px -30px rgba(0,0,0,.8);
}
body:not(:has(.telao, .telao-tela-cheia, .central-pagina)){
background-image:
radial-gradient(ellipse 60vw 50vw at -8% -12%, rgba(79,163,227,.28), transparent 60%),
radial-gradient(ellipse 45vw 40vw at 108% 30%, rgba(155,210,85,.14), transparent 60%),
radial-gradient(ellipse 45vw 38vw at 45% 115%, rgba(242,194,48,.10), transparent 60%),
url("data:image/svg+xml;utf8, saía com a cara do sistema: baixinho e desalinhado dos campos ao
lado (achado em 25/09/2026, só aparece no motor do Safari — nos testes em Chrome não).
appearance:none + a setinha desenhada aqui. */
select.campo{-webkit-appearance:none; -moz-appearance:none; appearance:none;
padding-right:44px; line-height:1.3; min-height:52px; cursor:pointer;
background-image:url("data:image/svg+xml;utf8, do app, a da PASCOM inclusive) ────────────────────── */
dialog{color:var(--texto)}
dialog.caixa, .pascom-janela{
border-radius:22px; border:1px solid rgba(255,255,255,.12); padding:26px;
background: var(--fio) top / 100% 3px no-repeat, radial-gradient(ellipse at 100% 0, rgba(79,163,227,.16), transparent 60%),
radial-gradient(ellipse at 0 100%, rgba(155,210,85,.10), transparent 55%), rgba(22,41,58,.97);
box-shadow: 0 40px 90px -30px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.06) inset;
}
dialog::backdrop{background: radial-gradient(ellipse at 50% 30%, rgba(13,25,34,.55), rgba(5,10,15,.82)); backdrop-filter: blur(6px)}
dialog[open]{animation: pascom-janela-entra .22s cubic-bezier(.2,.8,.2,1)}
@keyframes pascom-janela-entra{from{opacity:0; transform:translateY(10px) scale(.98)} to{opacity:1; transform:none}}
dialog h2{margin-top:0}
.pascom-pergunta{max-width:460px}
.pascom-pergunta h2{font-size:21px; line-height:1.25; text-wrap:balance}
.pascom-pergunta-acoes{display:flex; gap:10px; margin-top:20px; flex-wrap:wrap}
.pascom-pergunta-acoes .botao{flex:1 1 150px; width:auto}
/* ── Menus do avatar e de ferramentas ─────────────────────────────────────────── */
.menu-conta{
background: var(--fio) top / 100% 2px no-repeat, rgba(22,41,58,.97);
border-color: rgba(255,255,255,.12); border-radius:16px; backdrop-filter: blur(14px);
box-shadow: 0 30px 60px -24px rgba(0,0,0,.85);
}
/* ── Gavetas (details/summary): a setinha da casa, não a do navegador ─────────── */
details > summary{cursor:pointer; list-style:none}
details > summary::-webkit-details-marker{display:none}
details > summary:not(.rotulo-secao)::after{content:''; display:inline-block; width:8px; height:8px; margin-left:10px;
border-right:2px solid var(--azul); border-bottom:2px solid var(--azul); transform:rotate(45deg) translateY(-3px); transition:transform .15s}
details[open] > summary:not(.rotulo-secao)::after{transform:rotate(225deg) translateY(-1px)}
/* ── Avisos e erros com mais presença ─────────────────────────────────────────── */
.aviso, .erro{border-radius:0 12px 12px 0; box-shadow: 0 10px 24px -20px rgba(0,0,0,.9)}
.aviso{background: linear-gradient(90deg, rgba(242,194,48,.14), rgba(242,194,48,.04))}
.erro{background: linear-gradient(90deg, rgba(240,122,110,.16), rgba(240,122,110,.05))}
/* ── Selos (etiquetas de estado) com contorno fino ────────────────────────────── */
.vn-selo{box-shadow: 0 0 0 1px color-mix(in srgb, var(--c, var(--azul)) 35%, transparent) inset}
/* ── Rolagem fina e da cor da casa ────────────────────────────────────────────── */
*{scrollbar-width:thin; scrollbar-color: rgba(79,163,227,.45) transparent}
@media (prefers-reduced-motion:reduce){ dialog[open]{animation:none} .campo, input[type="checkbox"], input[type="radio"]{transition:none} }
/* ── o fio também nos cartões que têm fundo próprio (pedidos, eventos, ferramentas da
Central): uma faixa de 2px por cima, que NÃO recebe clique (pointer-events:none — a
lição da "camada decorativa que engoliu o clique", 25/09/2026) ─────────────────────── */
.cartao-evento{position:relative; overflow:hidden}
.cartao-evento::before, .pedido.pd-cartao::before, .central-ferr::before{
content:''; position:absolute; left:0; right:0; top:0; height:2px; background:var(--fio);
opacity:.9; pointer-events:none; z-index:2}
/* link com cara de botão não se sublinha */
a.botao, a.botao-fraco{text-decoration:none}
/* ── Barra de baixo (celular) — base.js PASCOM._barraDeBaixo, 08/10/2026 ─────────────── */
.pascom-barra, .pascom-mais{display:none}
@media (max-width:820px){
/* flutuante, com a MESMA margem lateral da página (16px) e respiro embaixo */
body.com-barra-de-baixo{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
body.com-barra-de-baixo .pascom-ferramentas{display:none}
.pascom-barra{display:flex; gap:2px; position:fixed; left:16px; right:16px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:40;
padding:6px; border-radius:24px; overflow:hidden;
background:rgba(16,30,44,.94); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
border:1px solid var(--borda-campo); box-shadow:0 18px 40px -12px rgba(0,0,0,.85); view-transition-name:pascom-barra}
.pascom-aba{flex:1 1 0; min-width:0; min-height:56px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
background:none; border:0; border-radius:18px; padding:4px 2px; color:var(--texto-fraco); text-decoration:none;
font:600 11px/1.1 'Sora',system-ui,sans-serif; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .15s,color .15s}
.pascom-aba span{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pascom-aba:active{background:rgba(255,255,255,.08)}
.pascom-aba[aria-current="page"]{color:var(--noite); background:var(--verde); font-weight:700}
.pascom-aba:focus-visible, .pascom-mais-item:focus-visible{outline:2px solid var(--ouro); outline-offset:-2px}
.pascom-mais{position:fixed; left:16px; right:16px; bottom:calc(88px + env(safe-area-inset-bottom)); z-index:41;
display:flex; flex-direction:column; padding:8px; border-radius:20px;
background:rgba(22,41,58,.98); border:1px solid var(--borda-campo); box-shadow:0 20px 50px -20px rgba(0,0,0,.9)}
.pascom-mais.escondido{display:none}
.pascom-mais-item{display:flex; align-items:center; gap:14px; min-height:52px; padding:0 14px; border-radius:14px;
color:var(--texto); text-decoration:none; font-size:16px; font-weight:600}
.pascom-mais-item[aria-current="page"]{color:var(--noite); background:var(--verde)}
}
/* ── Tela de carregamento: a classe nasce no (antes do 1º desenho) e sai quando a
sessão foi conferida. Nunca mais a porta de login nem a tela vazia por um instante. ── */
html.pc-checando body > *{visibility:hidden}
html.pc-checando body::after{content:''; position:fixed; inset:0; z-index:9999; visibility:visible;
background:var(--noite) url('/midia/icone-192.png') center / 88px no-repeat; animation:pc-respira 1.1s ease-in-out infinite alternate}
@keyframes pc-respira{from{background-size:80px} to{background-size:96px}}
/* ── Troca de tela suave (o app é de várias páginas): fundo parado, só o miolo dissolve ── */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.14s}
@media (prefers-reduced-motion:reduce){ ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important} }
/* ── Ferramentas novas (Programações, Projetos, Conteúdo, IA, Configurações) — prefixo ft- ── */
.ft-barra{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:0 0 16px}
.ft-abas{display:flex; gap:6px; padding:5px; border-radius:16px; background:var(--noite-alta); border:1px solid var(--borda); overflow-x:auto; max-width:100%}
.ft-aba{flex:none; min-height:44px; padding:0 16px; border:0; border-radius:12px; background:none; color:var(--texto-fraco); font:600 14px 'Sora',system-ui,sans-serif; cursor:pointer}
.ft-aba[aria-selected="true"]{background:var(--c, var(--azul)); color:var(--noite); font-weight:700}
.ft-grade{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.ft-cartao{--c:var(--azul); position:relative; padding:18px; border-radius:20px; background:var(--noite-alta); border:1px solid var(--borda);
display:flex; flex-direction:column; gap:8px; min-width:0; color:inherit; text-decoration:none; overflow:hidden}
.ft-cartao::before{content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--c)}
a.ft-cartao:hover{border-color:color-mix(in srgb,var(--c) 55%,transparent)}
.ft-titulo{font-weight:700; font-size:17px; overflow-wrap:anywhere}
.ft-mini{font-size:13px; color:var(--texto-fraco); overflow-wrap:anywhere}
.ft-selo{display:inline-flex; align-items:center; align-self:flex-start; padding:3px 10px; border-radius:99px; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
color:var(--c,var(--azul)); background:color-mix(in srgb,var(--c,var(--azul)) 16%,transparent)}
.ft-campo{min-width:0}
.ft-janela{max-width:520px; max-height:calc(100dvh - 24px); overflow:auto}
.ft-vazio{padding:28px 18px; text-align:center; color:var(--texto-fraco); border:1px dashed var(--borda-campo); border-radius:18px}
.ft-progresso{height:8px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden}
.ft-progresso > i{display:block; height:100%; background:var(--c,var(--verde)); border-radius:99px}
.ft-linha{display:flex; gap:10px; align-items:center; flex-wrap:wrap; min-width:0}
.ft-btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:0 14px; border-radius:12px; border:1px solid var(--borda-campo); background:transparent;
color:var(--texto); font:600 14px 'Sora',system-ui,sans-serif; cursor:pointer; text-decoration:none}
.ft-btn:hover{border-color:var(--azul)}
.ft-btn-forte{background:var(--verde); color:var(--noite); border-color:transparent; font-weight:700}
.ft-btn-perigo{color:var(--perigo)}
.ft-colunas{display:grid; gap:14px; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start}
@media (max-width:820px){ .ft-colunas{grid-template-columns:1fr} }
.ft-coluna{padding:12px; border-radius:18px; background:rgba(255,255,255,.03); border:1px solid var(--borda); display:flex; flex-direction:column; gap:10px; min-width:0}
.ft-coluna h3{font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--texto-fraco)}
.ft-cartaozinho{padding:12px 14px; border-radius:14px; background:var(--noite-alta); border:1px solid var(--borda); display:flex; flex-direction:column; gap:6px; min-width:0}
.ft-dia{padding:16px; border-radius:18px; background:var(--noite-alta); border:1px solid var(--borda); display:flex; flex-direction:column; gap:10px}
.ft-item{display:flex; gap:12px; align-items:center; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.04); min-width:0}
.ft-hora{flex:none; font-weight:800; font-variant-numeric:tabular-nums; color:var(--ouro); min-width:48px}
.ft-item-texto{min-width:0; flex:1}
.ft-mes{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px}
.ft-mes-cab{font-size:11px; text-align:center; color:var(--texto-fraco); text-transform:uppercase; letter-spacing:.06em; padding:4px 0}
.ft-mes-dia{min-height:84px; padding:4px; border-radius:10px; background:rgba(255,255,255,.03); border:1px solid transparent; display:flex; flex-direction:column; gap:3px; min-width:0; overflow:hidden}
.ft-mes-dia.fora{opacity:.35}
.ft-mes-dia.hoje{border-color:var(--ouro)}
.ft-mes-dia b{font-size:12px}
.ft-chip{font-size:11px; line-height:1.2; padding:3px 5px; border-radius:6px; text-align:left; border:0; cursor:pointer; color:var(--noite); background:var(--c,var(--azul)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:inherit; font-weight:600}
@media (max-width:600px){ .ft-mes-dia{min-height:64px} .ft-chip{font-size:0; width:100%; height:8px; padding:0} }
.ft-semana{display:flex; flex-direction:column; gap:10px}
.ft-semana > h3{font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--texto-fraco); padding-top:8px}
.ft-diario-entrada{padding:12px 14px; border-radius:14px; background:var(--noite-alta); border:1px solid var(--borda); border-left:4px solid var(--c,var(--azul)); display:flex; flex-direction:column; gap:6px}
.ft-codigo{white-space:pre-wrap; overflow-wrap:anywhere; font:500 14px/1.5 'Sora',ui-monospace,monospace; background:rgba(0,0,0,.25); padding:12px; border-radius:12px; max-height:220px; overflow:auto}
.ft-interruptor{display:inline-flex; align-items:center; gap:12px; min-height:44px; cursor:pointer}
.ft-interruptor input{width:22px; height:22px}
@media (max-width:600px){
/* janelas de formulário das ferramentas novas: tela cheia no celular */
dialog.ft-janela{width:100%; max-width:none; height:100dvh; max-height:none; margin:0; border-radius:0}
}
/* IA: caixa de prompt gigante e leitor */
.ft-gigante{min-height:34vh; resize:vertical; line-height:1.5; font-size:16px}
.ft-leitor{max-width:920px; width:calc(100% - 24px)}
.ft-leitor-topo{position:sticky; top:-1px; z-index:2; display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding:10px 0; background:var(--noite-alta)}
.ft-leitor .ft-codigo{max-height:none; font-size:15px}
@media (max-width:600px){ dialog.ft-leitor{width:100%} }
.ft-janela:has(.ft-gigante){max-width:820px}
/* ── Menu lateral (computador) e topo enxuto — 08/10/2026 ───────────────────────────────── */
.pascom-lateral{display:none}
body.com-barra-de-baixo .vn-eyebrow{display:none}
body.com-barra-de-baixo .vn-migalha[href="/central"]{display:none}
@media (max-width:820px){
/* celular: topo de UMA linha — logo pequena + avatar; o nome da paróquia sai (está no rodapé da página) */
body.com-barra-de-baixo{padding-top:12px}
body.com-barra-de-baixo > .pagina-larga{max-width:none}
body.com-barra-de-baixo .vn-topo, body.com-barra-de-baixo .central-topo{margin-bottom:10px; align-items:center}
body.com-barra-de-baixo .vn-topo .marca, body.com-barra-de-baixo .central-topo .marca{width:auto; height:24px}
body.com-barra-de-baixo .paroquia-nome{display:none}
body.com-barra-de-baixo .vn-cabecalho{margin-bottom:12px}
body.com-barra-de-baixo .vn-icone{width:40px; height:40px; border-radius:12px}
body.com-barra-de-baixo .vn-icone svg{width:20px; height:20px}
body.com-barra-de-baixo .vn-titulo{font-size:26px}
}
@media (min-width:821px){
html body.com-menu-lateral{padding:20px clamp(16px,2.4vw,44px) 28px calc(244px + clamp(16px,2.4vw,44px)); justify-content:stretch}
/* a tela ocupa TODA a lateral que sobra (regra do dono): sem teto de largura nas telas da equipe */
body.com-menu-lateral > main, body.com-menu-lateral .pagina-larga, body.com-menu-lateral .pagina-media, body.com-menu-lateral .central-shell{max-width:none; width:100%; margin:0; padding-left:0; padding-right:0}
body.com-menu-lateral .vn-topo, body.com-menu-lateral .central-topo, body.com-menu-lateral .rodape{display:none}
body.com-menu-lateral .pascom-ferramentas{display:none}
body.com-menu-lateral .vn-cabecalho{margin-bottom:18px}
body.com-menu-lateral .vn-titulo{font-size:clamp(24px,2.2vw,32px)}
body.com-menu-lateral .vn-icone{width:44px; height:44px; border-radius:14px}
body.com-menu-lateral .vn-icone svg{width:22px; height:22px}
.pascom-lateral{display:flex; flex-direction:column; gap:6px; position:fixed; left:0; top:0; bottom:0; width:232px; z-index:35; padding:18px 12px 14px;
background:rgba(13,25,34,.92); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-right:1px solid var(--borda); overflow-y:auto}
.pascom-lateral-marca{display:block; padding:4px 10px 14px}
.pascom-lateral-marca img{width:128px; height:auto; display:block}
.pascom-lateral nav{display:flex; flex-direction:column; gap:2px; flex:1}
.pascom-lateral-item{display:flex; align-items:center; gap:12px; min-height:44px; padding:0 12px; border-radius:12px; color:var(--texto-fraco); text-decoration:none; font:600 14.5px 'Sora',system-ui,sans-serif; transition:background .15s,color .15s}
.pascom-lateral-item:hover{background:rgba(255,255,255,.06); color:var(--texto)}
.pascom-lateral-item[aria-current="page"]{background:var(--verde); color:var(--noite); font-weight:700}
.pascom-lateral-item svg{flex:none}
.pascom-lateral-conta{display:flex; align-items:center; gap:10px; padding:12px 8px 0; border-top:1px solid var(--borda); margin-top:8px}
.pascom-lateral-conta .pascom-conta{flex:none}
.pascom-lateral-conta .menu-conta{top:auto; bottom:calc(100% + 10px); left:0; right:auto; min-width:0; width:204px}
.pascom-lateral-quem{display:flex; flex-direction:column; min-width:0; line-height:1.25}
.pascom-lateral-quem b{font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pascom-lateral-quem small{color:var(--texto-fraco); font-size:12px}
}
/* ── Cabeçalho da ferramenta e botão de ação (08/10/2026) ─────────────────────────────────
Uma linha só: ícone + título/subtítulo à esquerda, ações à direita (computador).
Celular: o botão principal (o "+ Novo") vira botão flutuante acima da barra de baixo,
no alcance do polegar; os secundários (Mudar, Apagar…) ficam numa linha compacta. */
body.com-barra-de-baixo .vn-cabecalho{align-items:center; gap:14px 18px; flex-wrap:wrap}
body.com-barra-de-baixo .vn-cabecalho-texto{align-items:center; gap:14px; flex:1 1 280px; min-width:0}
body.com-barra-de-baixo .vn-cabecalho-texto > div{min-width:0}
body.com-barra-de-baixo .vn-titulo{margin:0; line-height:1.1}
body.com-barra-de-baixo .vn-sub{margin:4px 0 0; font-size:14px; line-height:1.4}
body.com-barra-de-baixo .vn-acoes{display:flex; gap:8px; flex-wrap:wrap; align-items:center; flex:0 0 auto}
body.com-barra-de-baixo .vn-acoes > .botao, body.com-barra-de-baixo .vn-acoes > a.botao{width:auto; min-height:44px; padding:0 18px; font-size:14.5px; display:inline-flex; align-items:center; justify-content:center; gap:8px; box-shadow:none; text-decoration:none}
body.com-barra-de-baixo .vn-acoes:empty{display:none}
@media (min-width:821px){
body.com-menu-lateral .vn-cabecalho{flex-wrap:nowrap}
body.com-menu-lateral .vn-cabecalho-texto{flex:1 1 auto}
body.com-menu-lateral .vn-acoes > .botao{min-height:42px}
}
@media (max-width:820px){
body.com-barra-de-baixo .vn-cabecalho{align-items:flex-start}
body.com-barra-de-baixo .vn-cabecalho-texto{flex:1 1 100%}
body.com-barra-de-baixo .vn-sub{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
body.com-barra-de-baixo .vn-acoes{flex:1 1 100%}
body.com-barra-de-baixo .vn-acoes > .botao-fraco{flex:1 1 auto}
/* o botão principal flutua */
body.com-barra-de-baixo .vn-acoes > .botao:not(.botao-fraco):first-child{position:fixed; right:16px; bottom:calc(88px + env(safe-area-inset-bottom)); z-index:39;
min-height:52px; padding:0 22px; border-radius:26px; font-size:15.5px; box-shadow:0 14px 30px -10px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.08) inset}
body.com-barra-de-baixo:has(.vn-acoes > .botao:not(.botao-fraco):first-child){padding-bottom:calc(158px + env(safe-area-inset-bottom))}
}
.ft-cartao .ft-linha .ft-btn{padding:0 12px}
/* ── Projetos estilo Monday/erickIA: lista, quadro, linha do tempo, painel ───────────────── */
.ft-mini-sel{min-height:40px; max-width:140px; padding:0 8px; border-radius:10px; border:1px solid var(--borda-campo); background:rgba(0,0,0,.22); color:var(--texto); font:600 13px 'Sora',system-ui,sans-serif; cursor:pointer}
.ft-status{min-height:36px; padding:0 12px; border-radius:99px; border:0; background:color-mix(in srgb,var(--c) 22%,transparent); color:var(--c); font:800 12.5px 'Sora',system-ui,sans-serif; cursor:pointer; -webkit-appearance:none; appearance:none; text-align:center}
.ft-status option{color:#0d1922; background:#fff}
.ft-check{position:relative; flex:none; width:44px; height:44px; padding:0; border:0; background:none; color:var(--noite); font:900 14px 'Sora',sans-serif; cursor:pointer; display:grid; place-items:center}
.ft-check::before{content:''; position:absolute; width:24px; height:24px; border-radius:50%; border:2px solid var(--borda-campo); z-index:0}
.ft-check[aria-pressed="true"]::before{background:var(--verde); border-color:var(--verde)}
.ft-check{z-index:0} .ft-check::after{content:none}
.ft-linha-tarefa{display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:4px 8px; align-items:center; padding:4px 10px 4px 2px; border-radius:14px; background:var(--noite-alta); border:1px solid var(--borda); margin-bottom:6px}
.ft-linha-titulo{min-width:0; display:flex; flex-direction:column; gap:2px; cursor:pointer; padding:6px 0}
.ft-linha-titulo b{overflow-wrap:anywhere}
.ft-linha-tarefa.feita .ft-linha-titulo b{text-decoration:line-through; opacity:.55}
.ft-linha-campos{display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
@media (max-width:820px){ .ft-linha-tarefa{grid-template-columns:44px minmax(0,1fr)} .ft-linha-campos{grid-column:1 / -1; justify-content:flex-start; padding:0 0 8px 8px} .ft-mini-sel{min-height:44px; font-size:14px} .ft-status{min-height:44px} }
.ft-grupo{margin-bottom:10px}
.ft-grupo-cab{display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:0 4px; background:none; border:0; color:var(--texto); font:inherit; cursor:pointer; text-align:left}
.ft-ponto{width:10px; height:10px; border-radius:50%; background:var(--c)}
.ft-quick{width:100%; min-height:44px; padding:0 14px; margin-top:4px; border:1px dashed var(--borda-campo); border-radius:12px; background:transparent; color:var(--texto); font:500 15px 'Sora',system-ui,sans-serif}
.ft-quick:focus{outline:none; border-color:var(--ouro); border-style:solid}
.ft-quadro{display:grid; grid-template-columns:repeat(4,minmax(250px,1fr)); gap:14px; overflow-x:auto; padding-bottom:8px; align-items:start}
.ft-coluna.alvo{outline:2px dashed var(--c); outline-offset:-2px}
.ft-cartaozinho[draggable="true"]{cursor:grab}
/* linha do tempo (Gantt) */
.ft-gantt{display:flex; border:1px solid var(--borda); border-radius:16px; background:var(--noite-alta); overflow:hidden}
.ft-gantt-nomes{flex:0 0 150px; border-right:1px solid var(--borda); z-index:1; background:var(--noite-alta)}
.ft-gantt-nome{height:36px; padding:0 10px; display:flex; align-items:center; font-size:13px; font-weight:600; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-bottom:1px solid var(--borda)}
.ft-gantt-nome.cab{height:46px; cursor:default}
.ft-gantt-area{flex:1; min-width:0; overflow-x:auto; position:relative}
.ft-gantt-cab{height:46px}
.ft-gantt-meses, .ft-gantt-dias{display:flex; height:23px}
.ft-gantt-meses span{font:700 11px 'Sora',sans-serif; text-transform:uppercase; letter-spacing:.06em; color:var(--texto-fraco); padding:4px 6px; border-left:1px solid var(--borda); overflow:hidden; white-space:nowrap}
.ft-gantt-dias span{font-size:10.5px; text-align:center; color:var(--texto-fraco); line-height:23px; flex:none}
.ft-gantt-dias span.hoje{color:var(--noite); background:var(--ouro); border-radius:6px; font-weight:800}
.ft-gantt-corpo{position:relative}
.ft-gantt-linha{position:relative; height:36px; border-bottom:1px solid var(--borda)}
.ft-gantt-barra{position:absolute; top:6px; height:24px; border-radius:8px; background:var(--c); color:var(--noite); font:700 12px 'Sora',sans-serif; display:flex; align-items:center; padding:0 8px; overflow:hidden; white-space:nowrap; cursor:pointer; min-width:10px}
.ft-gantt-barra span{overflow:hidden; text-overflow:ellipsis}
.ft-marco{position:absolute; top:12px; width:12px; height:12px; background:var(--ouro); transform:rotate(45deg); border:2px solid var(--noite); border-radius:2px}
.ft-marco.feito{background:var(--verde)}
.ft-gantt-hoje{position:absolute; top:0; bottom:0; width:2px; background:var(--ouro); opacity:.8; z-index:2; pointer-events:none}
@media (max-width:700px){ .ft-gantt-nomes{flex-basis:104px} }
/* painel da tarefa: gaveta à direita (tela cheia no celular) */
dialog.ft-janela.ft-painel{margin:0 0 0 auto; width:min(620px,100%); max-width:none; height:100dvh; max-height:none; border-radius:0; border-width:0 0 0 1px}
.ft-painel-corpo{display:flex; flex-direction:column; gap:14px}
.ft-painel-titulo{flex:1; min-width:0; background:none; border:0; border-bottom:1px solid var(--borda); color:var(--texto); font:700 20px 'Sora',system-ui,sans-serif; padding:8px 0}
.ft-painel-titulo:focus{outline:none; border-color:var(--ouro)}
.ft-painel-grade{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.ft-painel-campo{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--texto-fraco); min-width:0}
.ft-painel-campo .campo{min-height:46px; padding:0 12px; font-size:15px}
.ft-painel-campo textarea.campo{padding:12px}
.ft-painel-bloco{display:flex; flex-direction:column; gap:8px}
.ft-painel-bloco h3{font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--texto-fraco)}
.ft-passo{display:flex; align-items:center; gap:6px}
.ft-passo-titulo{flex:1; min-width:0; min-height:44px; background:transparent; border:0; border-bottom:1px solid transparent; color:var(--texto); font:500 15px 'Sora',system-ui,sans-serif}
.ft-passo-titulo:focus{outline:none; border-color:var(--ouro)}
.ft-passo.feita .ft-passo-titulo{text-decoration:line-through; opacity:.55}
@media (max-width:520px){ .ft-painel-grade{grid-template-columns:1fr} .ft-passo{flex-wrap:wrap} }
/* ── Projetos: cara de quadro Monday (08/10) ─────────────────────────────────────────────
Tabela com cabeçalho de colunas, listra colorida por grupo, célula de situação CHEIA,
avatar da pessoa, prioridade em cor, barra-resumo e colunas do quadro com topo colorido. */
.pj-tabela{border-radius:12px; overflow:hidden; border:1px solid var(--borda); background:var(--noite-alta)}
.pj-colunas,.pj-tabela .ft-linha-tarefa{display:grid; grid-template-columns:44px minmax(0,1fr) clamp(120px,11vw,190px) clamp(120px,11vw,190px) clamp(130px,11vw,180px) clamp(110px,9vw,150px); gap:0; align-items:stretch}
.pj-colunas{padding:0 0 0 6px; font:700 11.5px 'Sora',sans-serif; letter-spacing:.07em; text-transform:uppercase; color:var(--texto-fraco); border-bottom:1px solid var(--borda); background:rgba(255,255,255,.025)}
.pj-colunas span{padding:9px 10px; text-align:center} .pj-colunas span:nth-child(2){text-align:left}
.pj-tabela .ft-linha-tarefa{margin:0; border:0; border-radius:0; border-bottom:1px solid var(--borda); border-left:6px solid var(--c); padding:0; background:transparent}
.pj-tabela .ft-linha-tarefa:hover{background:rgba(255,255,255,.03)}
.pj-tabela .ft-linha-campos{display:contents}
.pj-tabela .ft-check{align-self:center}
.pj-celula{display:flex; align-items:center; justify-content:center; gap:8px; padding:5px 8px; border-left:1px solid var(--borda); min-width:0}
.pj-pessoa{justify-content:flex-start}
.pj-av{flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font:800 11.5px 'Sora',sans-serif; color:#0d1922}
.pj-av.vazio{background:transparent; border:2px dashed var(--borda-campo)}
.pj-sel{border:0; background:transparent; max-width:none; min-width:0; flex:1; padding:0 2px}
.pj-status{width:100%; height:100%; min-height:40px; border-radius:6px; background:var(--c); color:#0d1922; font-weight:800}
.pj-celula .ft-mini-sel[type=date]{border:0; background:transparent; max-width:none; width:100%; text-align:center}
.pj-prazo.atras .ft-mini-sel{color:var(--perigo)}
.pj-prio{width:100%; min-height:40px; border:0; border-radius:6px; text-align:center; font:800 12.5px 'Sora',sans-serif; color:var(--texto-fraco); background:transparent; cursor:pointer; -webkit-appearance:none; appearance:none}
.pj-prio.p1,.pj-prio-chip.p1{background:#7dd3fc; color:#0d1922} .pj-prio.p2,.pj-prio-chip.p2{background:#f2c230; color:#0d1922} .pj-prio.p3,.pj-prio-chip.p3{background:#f0707a; color:#0d1922}
.pj-prio option{color:#0d1922; background:#fff}
.pj-tabela .ft-quick{margin:0; border:0; border-radius:0; border-left:6px solid var(--c); min-height:46px}
.pj-resumo{margin:2px 0 10px}
.pj-resumo-barra{display:flex; height:30px; border-radius:8px; overflow:hidden; gap:2px}
.pj-resumo-barra i{display:grid; place-items:center; min-width:30px; font:800 12.5px 'Sora',sans-serif; color:#0d1922; font-style:normal}
.pj-resumo-leg{display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:8px; font-size:13px; color:var(--texto-fraco)}
.pj-resumo-leg b{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px}
.ft-grupo-cab b{color:var(--c); font-size:17px}
.ft-grupo-cab::before{content:'▾'; color:var(--c); font-size:14px}
.ft-grupo-cab[aria-expanded="false"]::before{content:'▸'}
.ft-grupo-cab .ft-ponto{display:none}
.pj-coluna{padding:0; overflow:hidden; background:rgba(255,255,255,.025); gap:0}
.pj-coluna > *:not(.pj-col-cab){margin:0 10px 10px} .pj-coluna .pj-col-cab + *{margin-top:10px}
.pj-col-cab{margin:0 0 0; padding:12px 14px; background:var(--c); color:#0d1922 !important; font-size:13.5px !important; letter-spacing:.07em}
.pj-cartao-pe{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.pj-prio-chip{margin-left:auto; padding:2px 9px; border-radius:99px; font:800 11px 'Sora',sans-serif}
.pj-area{padding:0; overflow:hidden; gap:0}
.pj-area::before{display:none}
.pj-area > *:not(.pj-area-faixa){margin:0 18px} .pj-area > .ft-mini:first-of-type{margin-top:12px} .pj-area > :last-child{margin-bottom:16px; margin-top:10px}
.pj-area .ft-progresso{margin-top:12px}
.pj-area-faixa{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px; background:var(--c); color:#0d1922}
.pj-area-faixa .ft-titulo{color:#0d1922}
.pj-area-n{min-width:28px; height:28px; padding:0 8px; display:grid; place-items:center; border-radius:99px; background:rgba(13,25,34,.2); font:800 13px 'Sora',sans-serif}
@media (max-width:820px){
.pj-colunas{display:none}
.pj-tabela .ft-linha-tarefa{grid-template-columns:44px minmax(0,1fr)}
.pj-tabela .ft-linha-campos{display:grid; grid-column:1 / -1; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; padding:0 8px 10px 10px}
.pj-celula{border:1px solid var(--borda); border-radius:10px; min-height:44px}
.pj-pessoa{grid-column:1 / -1} .pj-sel{font-size:16px}
.pj-resumo-barra i{min-width:24px}
}
.pj-tabela .ft-linha-titulo{justify-content:center; padding:10px 8px}
@media (max-width:820px){
.pj-tabela .ft-linha-campos{grid-template-columns:1.2fr 1.4fr 1fr; gap:6px}
.pj-pessoa{grid-column:1 / -1}
.pj-celula{padding:2px 4px}
.pj-celula .ft-mini-sel[type=date]{font-size:14px; padding:0}
}
/* ── Projetos: foto do membro, números, equipe e painel da tarefa (08/10) ─────────────── */
.pj-av{--tam:30px; width:var(--tam); height:var(--tam); font-size:calc(var(--tam)*.38); background-size:cover; background-position:center; background-repeat:no-repeat}
.pj-av.com-foto{color:transparent}
.pj-kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px}
.pj-kpi{display:flex; flex-direction:column; gap:2px; padding:12px 16px; border-radius:14px; background:var(--noite-alta); border:1px solid var(--borda); border-top:4px solid var(--c)}
.pj-kpi b{font:800 clamp(24px,2.4vw,34px) 'Sora',sans-serif; color:var(--c); line-height:1.1}
.pj-kpi span{font-size:13px; color:var(--texto-fraco)}
.pj-equipe{display:flex; gap:8px; overflow-x:auto; padding:2px 0 6px; scrollbar-width:thin}
.pj-eq{flex:none; display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:5px 14px 5px 6px; border-radius:99px; border:1px solid var(--borda-campo); background:transparent; color:var(--texto); font:600 14px 'Sora',sans-serif; cursor:pointer}
.pj-eq small{padding:1px 8px; border-radius:99px; background:rgba(255,255,255,.1); font:800 12px 'Sora',sans-serif}
.pj-eq.on{background:color-mix(in srgb,var(--ouro) 20%,transparent); border-color:var(--ouro)}
.pj-minha{display:flex; flex-direction:row; align-items:center; gap:12px; padding:12px 14px}
.pj-st-chip{flex:none; padding:4px 11px; border-radius:99px; background:color-mix(in srgb,var(--c) 22%,transparent); color:var(--c); font:800 11.5px 'Sora',sans-serif}
.pj-quem{display:inline-flex; align-items:center; gap:8px; min-width:0}
@media (max-width:600px){ .pj-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* painel da tarefa */
dialog.ft-janela.ft-painel{width:min(1040px,100%); padding:0; overflow:hidden; display:flex; flex-direction:column}
dialog.ft-painel[open]{display:flex}
.ft-painel .ft-painel-corpo{gap:0; flex:1; min-height:0; overflow-y:auto}
.pn-topo{position:sticky; top:0; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px clamp(14px,2.4vw,28px); background:var(--noite-alta); border-bottom:1px solid var(--borda); box-shadow:inset 0 -4px 0 var(--c)}
.pn-status{display:flex; flex-wrap:wrap; gap:6px}
.pn-st{display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 16px; border-radius:99px; border:1px solid var(--borda-campo); background:transparent; color:var(--texto-fraco); font:700 13.5px 'Sora',sans-serif; cursor:pointer}
.pn-st::before{content:''; width:9px; height:9px; border-radius:50%; background:var(--c)}
.pn-st.on{background:var(--c); border-color:var(--c); color:#0d1922; font-weight:800}
.pn-st.on::before{background:#0d1922}
.pn-fechar{flex:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--borda-campo); background:transparent; color:var(--texto); font-size:16px; cursor:pointer}
.pn-cabeca{display:flex; flex-direction:column; gap:14px; padding:clamp(16px,2.4vw,26px) clamp(14px,2.4vw,28px) 6px}
.pn-titulo{width:100%; background:none; border:0; border-bottom:2px solid transparent; color:var(--texto); font:800 clamp(22px,2.6vw,32px) 'Sora',sans-serif; padding:4px 0}
.pn-titulo:focus{outline:none; border-color:var(--ouro)}
.pn-resumo{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px}
.pn-dono{display:inline-flex; align-items:center; gap:10px; padding:6px 16px 6px 6px; border-radius:99px; background:var(--noite); border:1px solid var(--borda)}
.pn-dono span:last-child{display:flex; flex-direction:column; line-height:1.2} .pn-dono small{font-size:11px; color:var(--texto-fraco); letter-spacing:.05em; text-transform:uppercase} .pn-dono b{font-size:15px}
.pn-chip{display:inline-flex; align-items:center; padding:5px 12px; border-radius:99px; background:rgba(255,255,255,.08); font:700 12.5px 'Sora',sans-serif}
.pn-chip.atras{background:color-mix(in srgb,var(--perigo) 25%,transparent); color:var(--perigo)}
.pn-grade{display:grid; grid-template-columns:minmax(0,1fr) clamp(300px,30%,400px); gap:clamp(16px,2vw,28px); padding:14px clamp(14px,2.4vw,28px) 28px; align-items:start}
.pn-principal{display:flex; flex-direction:column; gap:20px; min-width:0}
.pn-bloco{display:flex; flex-direction:column; gap:10px; min-width:0}
.pn-rot{font:800 12px 'Sora',sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--texto-fraco)}
.pn-duas{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
.pn-quem{display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:8px; max-height:216px; overflow-y:auto; padding:2px}
.pn-pessoa{display:flex; align-items:center; gap:8px; min-height:48px; padding:5px 10px 5px 6px; border-radius:99px; border:1px solid var(--borda-campo); background:transparent; color:var(--texto); font:600 13.5px 'Sora',sans-serif; cursor:pointer; min-width:0}
.pn-pessoa span:last-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pn-pessoa.on{background:color-mix(in srgb,var(--verde) 20%,transparent); border-color:var(--verde); font-weight:800}
.pn-seg{display:flex; flex-wrap:wrap; gap:6px}
.pn-sg{min-height:44px; padding:0 14px; border-radius:10px; border:1px solid var(--borda-campo); background:transparent; color:var(--texto-fraco); font:700 13px 'Sora',sans-serif; cursor:pointer}
.pn-sg.on{color:#0d1922; font-weight:800; background:var(--texto-fraco); border-color:transparent}
.pn-sg.p1.on{background:#7dd3fc} .pn-sg.p2.on{background:#f2c230} .pn-sg.p3.on{background:#f0707a} .pn-sg.on-azul.on{background:var(--azul)}
.pn-data{display:flex; flex-direction:column; gap:6px; margin:0} .pn-data small{font-size:13px; color:var(--texto-fraco)} .pn-data .campo{min-height:48px; padding:0 12px; font-size:16px}
.pn-atalhos{display:flex; flex-wrap:wrap; gap:6px}
.pn-atalho{min-height:40px; padding:0 14px; border-radius:99px; border:1px dashed var(--borda-campo); background:transparent; color:var(--texto); font:600 13px 'Sora',sans-serif; cursor:pointer}
.pn-atalho:hover{border-color:var(--ouro); border-style:solid}
.pn-saude{display:flex; flex-direction:column; gap:10px; padding:14px 16px; border-radius:14px; background:color-mix(in srgb,var(--c) 10%,var(--noite)); border:1px solid color-mix(in srgb,var(--c) 40%,transparent)}
.pn-barra{display:grid; grid-template-columns:70px minmax(0,1fr) 44px; align-items:center; gap:10px; font-size:13px; color:var(--texto-fraco)} .pn-barra b{text-align:right; color:var(--texto)}
.pn-comentarios{position:sticky; top:84px; display:flex; flex-direction:column; gap:12px; padding:16px; border-radius:16px; background:var(--noite); border:1px solid var(--borda); max-height:calc(100dvh - 110px)}
.pn-conversa{display:flex; flex-direction:column; gap:14px; overflow-y:auto; min-height:80px; flex:1}
.pn-msg{display:flex; gap:10px; align-items:flex-start}
.pn-msg-corpo{flex:1; min-width:0; padding:10px 12px; border-radius:4px 14px 14px 14px; background:var(--noite-alta); border:1px solid var(--borda)}
.pn-msg-topo{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px} .pn-msg-corpo p{margin:4px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; font-size:14.5px; line-height:1.45}
.pn-msg-x{margin-top:6px; padding:0; min-height:30px; border:0; background:none; color:var(--texto-fraco); font:600 12px 'Sora',sans-serif; text-decoration:underline; cursor:pointer}
.pn-novo{display:flex; gap:10px; align-items:flex-start} .pn-novo .campo{flex:1; min-width:0; font-size:16px; padding:10px 12px}
@media (max-width:900px){
.pn-grade{grid-template-columns:minmax(0,1fr)}
.pn-comentarios{position:static; max-height:none}
.pn-topo{padding-right:12px}
}
@media (max-width:600px){
dialog.ft-janela.ft-painel{width:100%; height:100dvh}
.pn-duas{grid-template-columns:minmax(0,1fr)}
.pn-st{padding:0 12px}
.pn-quem{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Perfil: foto e acessos em uma superfície clara, com controles de toque. */
.perfil-grid{display:grid;grid-template-columns:minmax(240px,.65fr) minmax(0,1.3fr);gap:28px;min-width:0}
.perfil-intro{padding:28px;border:1px solid var(--borda);border-radius:18px;background:#182c37;text-align:center;min-width:0;align-self:start}
.perfil-foto{display:grid;place-items:center;width:104px;height:104px;border-radius:28px;border:2px solid #b9ca8640;background-color:#314751;color:#e2eacd;font:600 30px 'Sora',sans-serif;margin:0 auto 20px;cursor:pointer;background-position:center;background-size:cover}
.perfil-intro h2{font-size:24px;letter-spacing:-.03em;margin:0 0 10px;overflow-wrap:anywhere}.perfil-intro .fraco{font-size:12px;line-height:1.6}
.perfil-foto-acoes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}.perfil-foto-acoes .botao{font-size:11px;min-height:44px}.perfil-intro>.botao{margin-top:18px;font-size:12px;min-height:44px}
.perfil-acessos{min-width:0}.perfil-acessos>h2{font-size:23px;letter-spacing:-.03em;margin:0 0 10px}.perfil-acessos>.fraco{font-size:13px;line-height:1.6;margin-bottom:22px}
.perfil-metodo{padding:24px;border:1px solid var(--borda);border-radius:16px;margin-bottom:16px;background:#172b36}.perfil-metodo h3{font-size:17px;margin:0 0 10px}.perfil-metodo .fraco{font-size:13px;line-height:1.65;overflow-wrap:anywhere}.perfil-metodo .botao{width:auto;min-height:44px;font-size:12px;padding:10px 16px}.perfil-metodo-acoes{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.perfil-email-form{display:grid;gap:16px;margin-top:22px;border-top:1px solid var(--borda);padding-top:22px}.perfil-email-form label{font-size:12px;margin:0}.perfil-email-form .campo{font-size:16px;min-height:48px}.perfil-email-form>.botao{justify-self:start}.perfil-status{font-size:12px;color:#c9d6b1;line-height:1.6;margin-top:14px;overflow-wrap:anywhere}.perfil-ajuda{font-size:12px;line-height:1.6;color:var(--texto-fraco);margin-top:14px}.perfil-confirmar{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:1px solid var(--borda)}.perfil-confirmar p{flex-basis:100%}
.perfil-janela{max-width:none!important;width:min(960px,calc(100% - 48px))!important;padding:28px!important;max-height:calc(100dvh - 48px);overflow:auto}.perfil-dialog-topo{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}.perfil-dialog-topo h2{margin:0}.perfil-fechar{height:44px;width:44px;border:1px solid var(--borda);border-radius:10px;background:none;color:var(--texto);font-size:26px;cursor:pointer}
.topo .marca,.vn-topo .marca,.central-marca .marca,.pascom-lateral-marca img{background:none!important;box-shadow:none!important;border:0!important;border-radius:0!important}
@media(max-width:700px){.perfil-grid{grid-template-columns:1fr;gap:26px}.perfil-intro{padding:24px}.perfil-foto{width:90px;height:90px;border-radius:24px}.perfil-janela{width:100%!important;height:100dvh;max-height:none;margin:0;padding:20px!important;border-radius:0!important}.perfil-metodo{padding:22px}.perfil-metodo .botao{min-height:46px}.perfil-metodo-acoes .botao{flex:1}.perfil-email-form>.botao{width:100%}.perfil-intro h2{font-size:23px}.pascom-janela{width:100%;height:100dvh;max-height:none;max-width:none;margin:0;border-radius:0;overflow:auto}}
/* Topo da equipe deixa espaço para o conteúdo. */
@media(max-width:820px){
body.com-barra-de-baixo{padding-top:8px}
body.com-barra-de-baixo .vn-topo,body.com-barra-de-baixo .central-topo{min-height:48px;gap:12px;margin:0 0 10px;padding:0 0 7px;border-bottom:1px solid var(--borda)}
body.com-barra-de-baixo .vn-topo .marca,body.com-barra-de-baixo .central-topo .marca{height:23px;width:auto;max-width:118px;background:none;box-shadow:none;border:0}
body.com-barra-de-baixo .central-ola{padding:0;margin:0 0 18px;gap:10px}
body.com-barra-de-baixo .central-h1{font-size:28px;line-height:1.15;margin:0}
body.com-barra-de-baixo .central-sub{font-size:11px;margin-top:5px}
body.com-barra-de-baixo .ca-intro{margin:14px 0 18px;align-items:flex-start;gap:14px}
body.com-barra-de-baixo .ca-intro h1{font-size:29px;margin:0 0 8px}
body.com-barra-de-baixo .ca-intro .ca-pre-titulo{display:none}
}
@media(min-width:821px){body.com-menu-lateral .central-ola{margin-top:0;margin-bottom:22px}body.com-menu-lateral .ca-intro{margin-top:4px}}