/*
 * Tokens e utilitários de marca FAK (docs/design-system/tokens.md e
 * inventory.md). Este arquivo é a única fonte das variáveis --fak-*;
 * templates não devem declarar cores hexadecimais inline.
 */

:root {
  /* Marca */
  --fak-sidebar: #001e11;
  --fak-accent: #2f6149;
  --fak-accent-muted: #3c4a45;

  /* Superfícies claras de páginas públicas */
  --fak-surface: #f5f7fb; /* login */
  --fak-surface-muted: #f6f7f7; /* telas informativas de eleições */

  /* Contraste das telas públicas (.fak-publico): um degrau abaixo do
     --bs-body-bg do tema (#f7f9fc), para que as faixas e cards brancos se
     destaquem do fundo — ver comentário em .fak-publico abaixo. */
  --fak-fundo-publico: #eceff4;
  --fak-borda-cartao-publico: #d5dce6;

  /* Passos do PAT (atualizar_*) */
  --fak-pat-group-bg: #e9ecef; /* cabeçalho de grupo */
  --fak-pat-approved-bg: #f3fbf4; /* bloco aprovado */

  /* Listagens */
  --fak-table-soft-bg: #fbfcfe; /* zebra suave (comentários da consulta) */

  /* Áreas de gestão (quadro de horários — visão Ocupação).
     Pares fundo suave + cor forte (texto/borda), contraste AA garantido. */
  --fak-area-aae: #2f6149; /* verde (marca) */
  --fak-area-aae-bg: #e3efe8;
  --fak-area-eeb: #1f4e79; /* azul */
  --fak-area-eeb-bg: #e4edf6;
  --fak-area-atf: #9b2226; /* vermelho */
  --fak-area-atf-bg: #fae7e7;
  --fak-area-ama: #5e3a9e; /* roxo/lilás */
  --fak-area-ama-bg: #efe9f8;
  --fak-area-aca: #16657e; /* azul claro */
  --fak-area-aca-bg: #e2f2f7;
  --fak-area-aac: #5d4025; /* marrom caule de árvore */
  --fak-area-aac-bg: #f3ece4;
  --fak-area-outra: #495057; /* fallback para área não mapeada */
  --fak-area-outra-bg: #eceff1;

  /* Etiquetas de eixo temático da busca de artigos do Simpósio (coluna
     fak-simposio-procedencia): um par por eixo canônico, com o verde de marca
     de propósito fora da lista — ele já identifica o título do artigo.
     Mesmos hexadecimais de --fak-area-* acima, sob nomes próprios para não
     amarrar a semântica de eixo à de área do quadro de horários.

     As três matizes não são arbitrárias: formam um arco de tempo — passado
     (primórdios, terra quente, 29°) → presente (atualidade, azul frio, 209°)
     → futuro (compromissos, violeta profundo, 262°) —, na mesma ordem em que
     os três eixos aparecem no filtro e nos resultados. Não reatribuir as
     cores entre si nem a outro eixo sem refazer essa leitura.

     Contraste medido (texto sobre fundo, fórmula WCAG): primórdios 8,06:1,
     atualidade 7,32:1, compromissos 6,87:1 — todos acima do mínimo AA de
     4,5:1 para texto pequeno. O fundo pastel sozinho mede só ~1,17:1 contra o
     branco do card — por isso a etiqueta leva também uma borda de 1px na cor
     forte do eixo (ver .fak-etiqueta), que sobe o contorno para a mesma faixa
     de 6,9–8,1:1 acima. */
  --fak-eixo-primordios: #5d4025;
  --fak-eixo-primordios-bg: #f3ece4;
  --fak-eixo-atualidade: #1f4e79;
  --fak-eixo-atualidade-bg: #e4edf6;
  --fak-eixo-compromissos: #5e3a9e;
  --fak-eixo-compromissos-bg: #efe9f8;
  --fak-eixo-outro: #495057;
  --fak-eixo-outro-bg: #eceff1;

  /* Selo de "versão preliminar" da mesma coluna: não é classificação (como as
     etiquetas de eixo acima), é status, por isso a forma é vazada em vez de
     preenchida (ver .fak-selo-preliminar) e a cor não pode ser confundida com
     nenhum eixo nem com o <mark> do termo buscado. Mesmo hexadecimal de
     --fak-area-atf, sob nome próprio — este token não amarra a semântica de
     status de edição à de área do quadro de horários. #9b2226 sobre branco
     mede 7,92:1 (AA) e sua matiz, 358°, fica longe das três matizes de eixo
     acima (29°/209°/262°). */
  --fak-selo-preliminar: #9b2226;

  /* Cores de texto sobre a faixa de marca (--fak-sidebar, #001e11), usada nas
     telas públicas. O verde de marca não serve aí: #2f6149 sobre #001e11 mede
     2,45:1 e reprova. Contraste medido sobre #001e11: título branco 17,59:1,
     corpo 12,52:1, ação/link 9,52:1 — todos bem acima do mínimo AA. */
  --fak-marca-titulo: #ffffff;
  --fak-marca-corpo: #c8dfd2;
  --fak-marca-acao: #a8cc3c;
}

/* Input numérico estreito e centralizado usado nas grades de quantidades. */
.fak-input-numero {
  max-width: 90px;
  width: 90px;
  margin: 0 auto;
  text-align: center;
}

/* Círculos de avatar e de ícone de estatística da tela inicial. */
.fak-circulo-avatar {
  width: 72px;
  height: 72px;
  font-size: 1.75rem;
}

.fak-circulo-stat {
  width: 3rem;
  height: 3rem;
}

.fak-circulo-stat-sm {
  width: 2.25rem;
  height: 2.25rem;
}

/*
 * Coluna de procedência dos resultados da busca de artigos do Simpósio
 * (edição, eixo temático e número de páginas), à direita do conteúdo do
 * item em telas md+. Largura fixa entre 190 e 210px: estreita o bastante
 * para não competir com o conteúdo, larga o bastante para etiquetas de duas
 * palavras ("Compromissos futuros") não estourarem a coluna. Alinhada à
 * esquerda — a versão anterior alinhava à direita e quebrava em degrau. Ver
 * web/templates/simposio/consultar_artigos.html e
 * docs/design-system/inventory.md.
 */
@media (min-width: 768px) {
  .fak-simposio-procedencia {
    min-width: 190px;
    max-width: 210px;
  }
}

/*
 * Coluna de procedência: três degraus tipográficos, do mais importante ao
 * mais discreto — edição (14px, semibold, texto simples) → etiqueta de eixo
 * (12px) → "N páginas" (11px, ver .fak-simposio-paginas abaixo). A edição
 * deixou de ser uma etiqueta cromática (removida: dava a ela o mesmo peso
 * visual do eixo, um quarto chip cinza competindo com as três cores de eixo)
 * e passou a se destacar por peso e tamanho de fonte, não por cor — o
 * conteúdo já distingue uma edição de outra, uma cor a mais não ajudava.
 */
.fak-simposio-edicao {
  font-size: 14px;
  font-weight: 600;
}

/*
 * Etiqueta de classificação por eixo temático (cor por eixo canônico, ver
 * --fak-eixo-* acima). 12px: maior que o corpo em .small (10,56px) para se
 * destacar da linha de "N páginas", mais discreta a propósito. O texto do
 * eixo continua escrito por extenso na etiqueta — a cor reforça a
 * classificação, não a substitui.
 *
 * Contraste medido (texto sobre fundo, fórmula WCAG): primórdios 8,06:1,
 * atualidade 7,32:1, compromissos 6,87:1 — todos acima do mínimo AA de
 * 4,5:1 para texto pequeno.
 */
.fak-etiqueta {
  display: inline-block;
  padding: 0.2em 0.55em;
  border-radius: 0.25rem;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  white-space: normal;
}

.fak-eixo-primordios {
  color: var(--fak-eixo-primordios);
  background-color: var(--fak-eixo-primordios-bg);
}

.fak-eixo-atualidade {
  color: var(--fak-eixo-atualidade);
  background-color: var(--fak-eixo-atualidade-bg);
}

.fak-eixo-compromissos {
  color: var(--fak-eixo-compromissos);
  background-color: var(--fak-eixo-compromissos-bg);
}

.fak-eixo-outro {
  color: var(--fak-eixo-outro);
  background-color: var(--fak-eixo-outro-bg);
}

/*
 * Trecho de um resultado de busca: exatamente três linhas. O snippet do FTS5
 * e a sinopse têm comprimentos bem diferentes (um trecho curto ocupava uma
 * linha, uma sinopse longa quatro), e a lista ficava com itens de alturas
 * irregulares, difícil de percorrer. O corte é por linha, não por caractere,
 * porque é a altura do item que precisa ser previsível.
 */
.fak-simposio-trecho {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* "N páginas": o dado mais discreto da coluna, menor que as etiquetas. A cor
   vem da classe utilitária Bootstrap text-body-secondary, aplicada junto no
   template. */
.fak-simposio-paginas {
  font-size: 11px;
}

/*
 * Selo de "versão preliminar": é status, não classificação, e por isso
 * difere das etiquetas de eixo acima em forma, não só em cor — vazado
 * (fundo transparente, borda de 1px, texto na cor forte) onde as etiquetas
 * de eixo são preenchidas. A diferença de forma separa as duas famílias
 * mesmo para quem não distingue as cores. Cor em --fak-selo-preliminar (ver
 * acima): antes usava bg-warning-subtle/text-warning-emphasis, o mesmo
 * âmbar do <mark> do termo buscado e vizinho do sepia de "Primórdios na
 * Amazônia" — lia como um terceiro classificador de eixo, e não era.
 */
.fak-selo-preliminar {
  background-color: transparent;
  border: 1px solid var(--fak-selo-preliminar);
  color: var(--fak-selo-preliminar);
}

/*
 * Link na cor de marca (--fak-accent, #2f6149 sobre branco = 7,17:1, AA).
 * Usado no título dos resultados da busca de artigos do Simpósio para dar
 * ao item o valor mais escuro da hierarquia de cor da tela — trecho e
 * metadados ficam em tons de cinza (ver
 * web/templates/simposio/consultar_artigos.html e
 * docs/design-system/inventory.md). O foco de teclado usa outline sólido
 * porque a cor de marca sobre fundo claro não garante, sozinha, contraste
 * suficiente para o anel de foco padrão do navegador em todos os casos.
 */
.fak-link-marca {
  color: var(--fak-accent);
}

/* Sublinhado no hover e no foco. Muitos usos deste link vêm com
   text-decoration-none — os títulos do sumário, por exemplo —, e aí a cor
   fica sendo a única pista de que aquilo é clicável. A mesma regra que proíbe
   a cor como único veículo de um dado vale para a affordance. */
.fak-link-marca:hover,
.fak-link-marca:focus {
  color: var(--fak-accent);
  text-decoration: underline;
}

.fak-link-marca:focus-visible {
  outline: 2px solid var(--fak-accent);
  outline-offset: 2px;
}

/*
 * Contraste do <mark> do Bootstrap: o padrão do tema usa
 * --bs-highlight-color (#6c757d) sobre --bs-highlight-bg (#faeddb), o que
 * mede 4,06:1 e reprova AA — exatamente no destaque do termo que a pessoa
 * buscou. Trocando a cor do texto por --bs-warning-text-emphasis (#5c421e)
 * o contraste sobe para 8,08:1. O peso semibold compensa o fundo do
 * destaque, que tem só 1,15:1 contra o branco do card e quase não aparece
 * sozinho. Usado na busca de artigos do Simpósio
 * (web/templates/simposio/consultar_artigos.html); ver
 * docs/design-system/inventory.md.
 */
mark {
  color: var(--bs-warning-text-emphasis);
  font-weight: 600;
}

/*
 * Casca das telas públicas (web/templates/base_publico.html). O fundo da
 * página é --fak-fundo-publico (#eceff4, um degrau abaixo do --bs-body-bg
 * #f7f9fc do tema); cabeçalho e rodapé são barras BRANCAS de borda a borda
 * sobre ele, com o conteúdo delas num container. O contraste entre as duas
 * superfícies é o que separa o cromo do conteúdo — do contrário a página
 * inteira lê como um bloco só. Antes o fundo público usava o mesmo
 * --bs-body-bg do layout logado e as faixas brancas quase não se distinguiam
 * dele (ver docs/design-system/inventory.md, "Contraste das telas públicas").
 *
 * A coluna flex com min-height garante que o rodapé encoste no fim da janela
 * mesmo numa página curta (a landing do App é curta).
 */
.fak-publico {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* o rodapé encosta no fim da janela em página curta */
  width: 100%;
  background-color: var(--fak-fundo-publico);
}

/* Numa janela mais alta que a página, sobra fundo do body abaixo do rodapé
   (ver comentário acima sobre .fak-publico main) — sem esta regra esse
   resto ficava no --bs-body-bg do tema, cortando o fundo público em dois
   tons na mesma tela. :has() restringe a troca à casca pública porque
   .fak-publico é filho direto do body só em base_publico.html; o layout
   logado (base.html) não casa com o seletor e não muda. */
body:has(> .fak-publico) {
  background-color: var(--fak-fundo-publico);
}

/* A página termina onde o conteúdo termina: nada de esticar o container até o
   fim da janela. A tentativa anterior (min-height mais flex-grow no container)
   empurrava a faixa de marca para o rodapé e abria um vão de centenas de
   pixels entre o conteúdo e ela — o mockup aprovado não faz isso, e a
   comparação automatizada com a página de referência mediu a diferença: a
   faixa começava em 665px no app contra 409px na referência. Numa janela alta
   sobra o fundo da página abaixo do rodapé, e é o que o desenho prevê. */
.fak-publico main {
  display: flex;
  flex-direction: column;
}

.fak-barra-publica {
  background-color: #fff;
  padding: 1.25rem 0;
}

.fak-barra-publica:first-child {
  border-bottom: 1px solid var(--fak-borda-cartao-publico);
}

.fak-rodape-publico {
  border-top: 1px solid var(--fak-borda-cartao-publico);
  padding: 1.75rem 0;
}

/*
 * Cards nas telas públicas: borda e sombra um pouco mais firmes que o padrão
 * Bootstrap, para se destacar do novo --fak-fundo-publico (mais escuro que o
 * --bs-body-bg do layout logado). !important porque .shadow-sm do Bootstrap
 * já declara box-shadow com !important — sem isso a regra abaixo perdia.
 */
.fak-publico .card {
  border-color: var(--fak-borda-cartao-publico);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 2px 6px rgba(16, 24, 40, 0.06);
}

/* .card.shadow-sm do Bootstrap declara box-shadow com !important — sem
   repetir aqui, a sombra acima perde para a do tema nos cards que usam essa
   classe (a maioria das telas públicas). */
.fak-publico .card.shadow-sm {
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 2px 6px rgba(16, 24, 40, 0.06) !important;
}

/*
 * Faixa clara das telas públicas: bloco branco de borda a borda sobre o
 * #f7f9fc da página, com filete acima e abaixo. Serve para destacar uma seção
 * do fluxo sem recorrer à faixa de marca, que é escura e limitada a uma por
 * página. Vem do conteúdo, fora do container, e abre o seu próprio.
 */
.fak-secao-clara {
  /* Cor do fundo desta faixa, para quem precisar pintar por cima dela — o
     degradê do recorte da apresentação é o caso. */
  --fak-fundo-faixa: #fff;
  background-color: var(--fak-fundo-faixa);
  border-top: 1px solid var(--fak-borda-cartao-publico);
  border-bottom: 1px solid var(--fak-borda-cartao-publico);
}

/*
 * Faixa de marca das telas públicas: bloco de fundo verde-escuro, de borda a
 * borda, que fecha a página com uma única ação (landing do App, landing do
 * Simpósio). Vem do bloco "faixa" de base_publico.html, que fica FORA do
 * container — é isso que lhe dá a largura total, sem o truque de 100vw, que
 * provoca rolagem horizontal quando o navegador desenha barra de rolagem.
 *
 * Regra de uso, registrada em docs/design-system/layouts.md: no máximo uma por
 * página. Duas faixas deixam de destacar o que quer que seja.
 *
 * As cores vêm de --fak-marca-* (ver acima), que existem justamente porque o
 * verde de marca não tem contraste suficiente sobre este fundo.
 */
.fak-faixa-marca {
  background-color: var(--fak-sidebar);
  color: var(--fak-marca-corpo);
}

.fak-faixa-marca h2,
.fak-faixa-marca .fak-faixa-titulo {
  color: var(--fak-marca-titulo);
}

.fak-faixa-marca .fak-faixa-rotulo {
  color: var(--fak-marca-acao);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
}

/* Ação da faixa: preenchida na cor clara, para ser o elemento de maior
   contraste do bloco. Não usa btn-primary porque o azul do tema sobre o
   verde-escuro lê como um aviso, não como a continuação da marca. */
.fak-faixa-marca .fak-btn-marca {
  background-color: var(--fak-marca-acao);
  border-color: var(--fak-marca-acao);
  color: #1b3f2f;
  font-weight: 600;
}

.fak-faixa-marca .fak-btn-marca:hover,
.fak-faixa-marca .fak-btn-marca:focus {
  background-color: var(--fak-marca-acao);
  border-color: var(--fak-marca-acao);
  color: #1b3f2f;
}

.fak-faixa-marca a:not(.fak-btn-marca) {
  color: var(--fak-marca-acao);
}

/* Marcação de dado ainda por confirmar dentro da faixa (data e local da
   próxima edição). Contorno tracejado em vez de preenchimento: é a forma que
   diz "espaço reservado" sem parecer um selo de status já decidido. */
.fak-faixa-marca .fak-pendente {
  border: 1px dashed var(--fak-marca-acao);
  color: var(--fak-marca-acao);
  border-radius: 0.2rem;
  padding: 0.05em 0.5em;
  font-size: 0.8em;
}

/*
 * Barra de composição de uma edição do Simpósio
 * (simposio/consultar_simposio.html e consultar_edicao.html). Diz duas coisas
 * de uma vez: o COMPRIMENTO é proporcional à maior edição do acervo, e a
 * DIVISÃO em segmentos é a distribuição entre os três eixos. Uma barra sempre
 * de 100 % esconderia que 2021 tem 19 trabalhos e 2019 tem 32.
 *
 * A largura de cada segmento vem de flex-grow (a contagem do eixo) e a da
 * barra inteira, de um style inline calculado no serviço — os dois únicos
 * valores de estilo que o template recebe como dado, porque são dado.
 *
 * A cor sozinha não carrega a informação: a barra leva role="img" e um
 * aria-label com os três números, e a legenda logo abaixo os repete em texto.
 */
.fak-barra-eixo {
  display: flex;
  gap: 2px;
  height: 10px;
  border-radius: 2px;
  overflow: hidden;
}

.fak-barra-eixo > span {
  min-width: 3px;
  border-radius: 1px;
}

.fak-barra-eixo > .fak-eixo-primordios {
  background-color: var(--fak-eixo-primordios);
}

.fak-barra-eixo > .fak-eixo-atualidade {
  background-color: var(--fak-eixo-atualidade);
}

.fak-barra-eixo > .fak-eixo-compromissos {
  background-color: var(--fak-eixo-compromissos);
}

.fak-barra-eixo > .fak-eixo-outro {
  background-color: var(--fak-eixo-outro);
}

/* Ponto colorido da legenda da barra, do tamanho de uma letra minúscula. */
.fak-ponto-eixo {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.fak-ponto-eixo.fak-eixo-primordios {
  background-color: var(--fak-eixo-primordios);
}

.fak-ponto-eixo.fak-eixo-atualidade {
  background-color: var(--fak-eixo-atualidade);
}

.fak-ponto-eixo.fak-eixo-compromissos {
  background-color: var(--fak-eixo-compromissos);
}

.fak-ponto-eixo.fak-eixo-outro {
  background-color: var(--fak-eixo-outro);
}

/*
 * Logotipo de uma edição. Quadrado, com o desenho contido — os oito arquivos
 * são quadrados de 256 px, mas object-fit protege a grade caso um logotipo
 * futuro chegue com outra proporção.
 */
.fak-edicao-logo {
  aspect-ratio: 1;
  width: 100%;
  object-fit: contain;
  display: block;
}

/*
 * Título de grupo do sumário de uma edição (consultar_edicao.html): o nome do
 * eixo, na cor forte do próprio eixo. Só aqui a cor do eixo aparece como cor
 * de texto sobre o fundo da página; medido sobre branco, primórdios 9,44:1,
 * atualidade 8,66:1, compromissos 8,16:1 — todos AAA.
 *
 * O peso vem daqui porque o .fw-bold do AppStack vale 500, não 700
 * (app.css: .fw-bold{font-weight:500!important}) — sem isto o título do eixo
 * ficaria MAIS leve que o título de cada artigo, que usa fw-semibold (600), e
 * a hierarquia da página se inverteria.
 */
.fak-titulo-eixo {
  font-weight: 700;
}

.fak-titulo-eixo.fak-eixo-primordios {
  color: var(--fak-eixo-primordios);
  background-color: transparent;
}

.fak-titulo-eixo.fak-eixo-atualidade {
  color: var(--fak-eixo-atualidade);
  background-color: transparent;
}

.fak-titulo-eixo.fak-eixo-compromissos {
  color: var(--fak-eixo-compromissos);
  background-color: transparent;
}

.fak-titulo-eixo.fak-eixo-outro {
  color: var(--fak-eixo-outro);
  background-color: transparent;
}

/*
 * Cabeçalho de subdivisão do sumário ("2.1 As instituições espíritas
 * atuais…"). Fica entre o título do eixo e a lista, e por isso é discreto: um
 * degrau abaixo do título do artigo em tamanho, com o mesmo peso, e na cor
 * secundária do corpo. O número mora na mesma coluna dos números de artigo,
 * de modo que a numeração do volume corre alinhada de cima a baixo.
 */
.fak-sumario-subsecao {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
  margin-bottom: 0.5rem;
}

/* Número de ordem e contagem de páginas do sumário: colunas de dígitos que
   precisam alinhar de uma linha para a outra, e por isso têm largura fixa
   além de tabular-nums. A largura cobre três dígitos — nenhuma edição passa de
   32 trabalhos, e o artigo mais longo do acervo tem 22 páginas. */
.fak-sumario-numero,
.fak-sumario-paginas {
  font-variant-numeric: tabular-nums;
  flex: none;
  text-align: right;
}

.fak-sumario-numero {
  width: 1.75rem;
}

.fak-sumario-paginas {
  width: 3.5rem;
}

/*
 * Faixa de apresentação do volume, no topo do sumário da edição.
 *
 * O recorte é em vh e não em número de caracteres porque "um terço da tela" só
 * quer dizer alguma coisa na tela de quem lê: as sete apresentações vão de
 * 2.700 a 10.600 caracteres, e um corte fixo no servidor mostraria a de 2013
 * quase inteira e a de 2021 pela décima parte. Do lado do leitor, todas param
 * na mesma altura.
 *
 * O degradê no pé é o "…" do pedido: diz que o texto continua sem cortar uma
 * frase no meio com reticências que não estão no original. Ele precisa ser
 * pintado com a cor do que está ATRÁS do texto — hoje a faixa clara, e não o
 * fundo da página —, senão o degradê termina numa cor que não é a do lugar e
 * aparece uma sombra suja no pé do bloco. Daí a variável, herdada da faixa.
 */
.fak-apresentacao-texto {
  position: relative;
  max-height: 33vh;
  overflow: hidden;
}

.fak-apresentacao-texto::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 4rem;
  background: linear-gradient(to bottom, transparent,
      var(--fak-fundo-faixa, var(--bs-card-bg, #fff)));
  pointer-events: none;
}

/* Aberta, a faixa deixa de ser faixa: nem limite de altura, nem degradê. */
.fak-apresentacao-texto.fak-apresentacao-aberta {
  max-height: none;
  overflow: visible;
}

.fak-apresentacao-texto.fak-apresentacao-aberta::after {
  content: none;
}

/* O último parágrafo não empurra o botão: o espaçamento de leitura entre
   parágrafos é maior que o que deve haver entre o texto e o controle. */
.fak-apresentacao-texto > p:last-child {
  margin-bottom: 0;
}

/*
 * Título de faixa das telas públicas do Simpósio ("Apresentação", "Sumário").
 *
 * Nomeia o que vem abaixo e precisa vencer, em peso, os títulos de eixo que
 * moram dentro do sumário — senão "Origens" é lido como a seção, e não como
 * uma parte dela. Daí ser maior que o h4 dos eixos, em negrito, e na cor de
 * ênfase do corpo, que é a mais escura do tema.
 */
.fak-titulo-faixa {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--bs-emphasis-color);
}

@media (max-width: 575.98px) {
  .fak-titulo-faixa {
    font-size: 1.5rem;
  }
}

/*
 * Capa do volume no sumário de uma edição (consultar_edicao.html).
 *
 * As oito artes são PNG RGB opacos, 256×256, com o fundo branco e a margem já
 * desenhados dentro do arquivo. Envolvê-las num card com padding produzia duas
 * molduras brancas concêntricas — a leitura de "campo de formulário" que o
 * conjunto tinha. O problema real é outro e é de contorno: um quadrado branco
 * solto sobre o #f7f9fc da página mede 1,06:1 nas bordas, e nas artes de
 * desenho leve (2009, 2017) não há mancha central que defina a forma.
 *
 * O filete devolve a aresta nos quatro lados, independentemente do que a arte
 * tem dentro. A lombada à esquerda, no verde de marca, é o que faz o quadrado
 * ler como volume: rima com a faixa de marca que fecha a página, e é o único
 * traço de marca da primeira faixa. Os 6px não cobrem desenho — a margem
 * branca interna do PNG é maior que isso.
 *
 * Sem padding: a arte recupera as 2rem que o card lhe tirava, sem mexer no
 * grid. Alargar a coluna não serviria — a 256px de origem, passar de ~190px
 * de renderização só a deixaria borrada.
 */
.fak-edicao-capa {
  background-color: #fff; /* redundante com o PNG; segura o estado de imagem quebrada */
  border: 1px solid var(--bs-border-color);
  border-left: 6px solid var(--fak-accent);
  /* Canto vivo do lado da lombada, arredondado do lado das folhas. */
  border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
  box-shadow: var(--bs-box-shadow);
}

/*
 * Variante da capa para a arte em retrato (a capa digitalizada da VIII, 1131 x
 * 1600). Não usa .fak-edicao-logo, que é quadrada: aqui a proporção é a da
 * folha, e a moldura (filete e lombada) vem da .fak-edicao-capa.
 */
.fak-edicao-capa-retrato {
  display: block;
  width: 100%;
  aspect-ratio: 1131 / 1600;
  object-fit: cover;
}

/*
 * Lista de encontros de uma pessoa (folha "Histórico de {nome}" da
 * participação e dos integrantes): data, símbolo e descrição por linha.
 * Padrão "Histórico de encontros" no design system.
 */
.fak-chamada-historico-item {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--fak-chamada-line, var(--bs-border-color-translucent));
}

.fak-chamada-historico-item:last-child {
  border-bottom: 0;
}

.fak-chamada-historico-data {
  flex: 0 0 auto;
  width: 3rem;
  font-weight: 600;
  color: var(--fak-chamada-muted, var(--bs-secondary-color));
  font-size: 0.85rem;
}

.fak-chamada-historico-simbolo {
  flex: 0 0 auto;
  width: 1.5rem;
  text-align: center;
  font-size: 1rem;
}

.fak-chamada-historico-texto {
  flex: 1 1 auto;
  font-size: 0.9rem;
}

/*
 * Navegação entre as equipes (dias) de uma atividade e lista de integrantes
 * da equipe: compartilhadas pela tela Integrantes do celular
 * (trabalhadores/consultar_integrantes_chamada.html) e, em parte (horário do
 * dia em .fak-dia-horario e resultado da busca), pela pagela
 * (trabalhadores/consultar_pagela.html).
 */

.fak-dias-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.35rem;
}

.fak-dia {
  display: flex;
  min-width: 0;
}

.fak-dia .btn {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 56px;
  padding: 0.35rem 0.15rem;
  line-height: 1.25;
}

.fak-dia-horario {
  font-size: 0.6875rem;
  font-weight: 400;
  white-space: nowrap;
}

.fak-dias-nav .fak-dias-grid {
  grid-auto-columns: minmax(4rem, 4.5rem);
}

/* Linha: nome e "desde" à esquerda; botão de excluir à direita, só para
   quem gerencia a equipe. */
.fak-integrante-linha {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  border-bottom: 1px solid var(--bs-border-color-translucent);
}

.fak-integrante-info {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.6rem 0;
}

.fak-integrante-nome {
  font-weight: 600;
  color: var(--bs-body-color);
}

.fak-integrante-desde {
  font-size: 0.8125rem;
  color: var(--bs-secondary-color);
}

.fak-integrante-papel {
  font-size: 0.6875rem;
  font-weight: 600;
  vertical-align: middle;
}

.fak-integrante-excluir {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--bs-danger-border-subtle);
  border-radius: 0.375rem;
  background: var(--bs-danger-bg-subtle);
  color: var(--bs-danger);
}

.fak-integrante-excluir:hover,
.fak-integrante-excluir:focus-visible {
  background: var(--bs-danger);
  border-color: var(--bs-danger);
  color: var(--bs-white);
}

.fak-integrantes-vazio {
  padding: 1.5rem 0;
  text-align: center;
  color: var(--bs-secondary-color);
}

/* Resultado da busca: nome completo em peso normal; a alcunha já vem
   destacada no nome_formatado (mesma regra dos aniversariantes da home);
   diretorias em segunda linha, pequena e esmaecida. */
.fak-resultado-nome {
  font-weight: 400;
  color: var(--bs-body-color);
}