/* Identidade católica, formulários de cadastro, cartões, relatório anual e cadastros — parte do antigo site.css (dividido por área, na mesma ordem: a cascata não muda). Ordem de carregamento nos layouts:
   site-base, site-menu-tema, site-painel-graficos, site-inicio, site-formularios. */
/* ==========================================================================
   Identidade católica da barra lateral e do rodapé (comum a todas as páginas).
   A COR LITÚRGICA do dia (verde, roxo, branco, vermelho ou rosa — ver
   CalendarioLiturgico e a lista editável em Configurações) vai em "body
   data-cor-liturgica" e pinta o filete da barra lateral e a linha do rodapé.
   ========================================================================== */
body[data-cor-liturgica="verde"] { --cor-liturgica-dia: #2e7d4f; }
body[data-cor-liturgica="roxo"] { --cor-liturgica-dia: #6b3fa0; }
body[data-cor-liturgica="branco"] { --cor-liturgica-dia: #c9a227; }
body[data-cor-liturgica="vermelho"] { --cor-liturgica-dia: #b42318; }
body[data-cor-liturgica="rosa"] { --cor-liturgica-dia: #d4709f; }

/* Barra lateral: filete da cor do dia na borda, treliça de vitral muito discreta
   (na cor de destaque do tema) e uma rosácea esbatida no fundo, por baixo do menu. */
.sidebar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--cor-liturgica-dia, var(--tema-acento-forte)), var(--cor-liturgica-dia, var(--tema-acento-forte))) right top / 3px 100% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23e3c691' stroke-opacity='.16' stroke-width='1.2'%3E%3Ccircle cx='100' cy='100' r='97'/%3E%3Ccircle cx='100' cy='100' r='90'/%3E%3Ccircle cx='100' cy='100' r='40'/%3E%3Ccircle cx='100' cy='100' r='22'/%3E%3Cellipse cx='100' cy='60' rx='10' ry='22' transform='rotate(0 100 100)'/%3E%3Ccircle cx='100' cy='13' r='4' transform='rotate(15 100 100)'/%3E%3Cellipse cx='100' cy='60' rx='10' ry='22' transform='rotate(30 100 100)'/%3E%3Ccircle cx='100' cy='13' r='4' transform='rotate(45 100 100)'/%3E%3Cellipse cx='100' cy='60' rx='10' ry='22' transform='rotate(60 100 100)'/%3E%3Ccircle cx='100' cy='13' r='4' transform='rotate(75 100 100)'/%3E%3Cellipse cx='100' cy='60' rx='10' ry='22' transform='rotate(90 100 100)'/%3E%3Ccircle cx='100' cy='13' r='4' transform='rotate(105 100 100)'/%3E%3Cellipse cx='100' cy='60' rx='10' ry='22' transform='rotate(120 100 100)'/%3E%3Ccircle cx='100' cy='13' r='4' transform='rotate(135 100 100)'/%3E%3Cellipse cx='100' cy='60' rx='10' ry='22' transform='rotate(150 100 100)'/%3E%3Ccircle cx='100' cy='13' r='4' transform='rotate(165 100 100)'/%3E%3Cellipse cx='100' cy='60' rx='10' ry='22' transform='rotate(180 100 100)'/%3E%3Ccircle cx='100' cy='13' r='4' transform='rotate(195 100 100)'/%3E%3Cellipse cx='100' cy='60' rx='10' ry='22' transform='rotate(210 100 100)'/%3E%3Ccircle cx='100' cy='13' r='4' transform='rotate(225 100 100)'/%3E%3Cellipse cx='100' cy='60' rx='10' ry='22' transform='rotate(240 100 100)'/%3E%3Ccircle cx='100' cy='13' r='4' transform='rotate(255 100 100)'/%3E%3Cellipse cx='100' cy='60' rx='10' ry='22' transform='rotate(270 100 100)'/%3E%3Ccircle cx='100' cy='13' r='4' transform='rotate(285 100 100)'/%3E%3Cellipse cx='100' cy='60' rx='10' ry='22' transform='rotate(300 100 100)'/%3E%3Ccircle cx='100' cy='13' r='4' transform='rotate(315 100 100)'/%3E%3Cellipse cx='100' cy='60' rx='10' ry='22' transform='rotate(330 100 100)'/%3E%3Ccircle cx='100' cy='13' r='4' transform='rotate(345 100 100)'/%3E%3C/svg%3E") center bottom 1.2rem / 15rem no-repeat,
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--tema-acento) 6%, transparent) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--tema-acento) 6%, transparent) 0 1px, transparent 1px 20px);
}

.sidebar.colapsada::after {
  background:
    linear-gradient(var(--cor-liturgica-dia, var(--tema-acento-forte)), var(--cor-liturgica-dia, var(--tema-acento-forte))) right top / 3px 100% no-repeat;
}

/* Cruz dourada no meio da linha que separa a marca do menu */
.sidebar-topo::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 14px;
  height: 14px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--tema-lateral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23c19a5b' d='M10.6 2h2.8v6.6H20v2.8h-6.6V22h-2.8V11.4H4V8.6h6.6z'/%3E%3C/svg%3E") center / 9px no-repeat;
}

.sidebar.colapsada .sidebar-topo::after { display: none; }

/* Rodapé: linha da cor litúrgica, fundo de pergaminho, cruz dourada e o versículo em
   serifa itálica (o do dia, ver VersiculosCatequese). */
footer.footer.border-top {
  border-top: 2px solid var(--cor-liturgica-dia, var(--sgc-dourado, #c19a5b)) !important;
  background: rgba(193, 154, 91, .08);
  background: color-mix(in srgb, var(--sgc-dourado, #c19a5b) 9%, var(--sgc-cartao, #fff));
}

.footer .rodape-cruz {
  width: 12px;
  height: 12px;
  opacity: 1;
  color: var(--sgc-dourado, #c19a5b);
}

.rodape-direitos { opacity: .85; }

.rodape-versiculo {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--sgc-titulo-fonte, "Work Sans", -apple-system, "Segoe UI", system-ui, sans-serif);
  font-style: italic;
  font-size: .85rem;
}

/* ==========================================================================
   Formulários de cadastro (Catequizandos / Catequistas): secções com título,
   rótulos compactos, foto à direita da identificação e barra de acções fixa
   em baixo (Guardar sempre à mão, sem voltar ao topo).
   ========================================================================== */
.form-secao .card-header {
  font-family: var(--sgc-titulo-fonte);
  font-size: 1.05rem;
  color: var(--sgc-vinho, #3a0f1c);
}

.form-secao-sub {
  font-family: inherit;
  font-size: .75rem;
  color: var(--sgc-text-muted, #55483d);
}

.form-secao .form-label {
  margin-bottom: .2rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--sgc-text-muted, #55483d);
}

.form-grupo-titulo {
  margin: .25rem 0 0;
  padding-bottom: .2rem;
  border-bottom: 1px solid var(--sgc-linha, #dee2e6);
  font-family: inherit;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sgc-text-muted, #55483d);
}

.form-secao-bi .card-body { padding-top: .75rem; padding-bottom: .75rem; }

.form-foto { text-align: center; }

.form-foto-moldura {
  position: relative;
  width: 8.5rem;
  height: 8.5rem;
  margin-inline: auto;
  overflow: hidden;
  border: 2px dashed var(--sgc-linha, #dee2e6);
  border-radius: .7rem;
  background: color-mix(in srgb, var(--sgc-vinho, #3a0f1c) 4%, var(--sgc-cartao, #fff));
}

.form-foto-moldura img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.form-acoes {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
  margin-top: .5rem;
  padding: .65rem 1rem;
  background: var(--sgc-cartao, #fff);
  border: 1px solid var(--sgc-linha, #dee2e6);
  border-radius: .6rem;
  box-shadow: 0 -4px 14px rgba(0, 0, 0, .08);
}

/* Formulários de cadastro — versão mais compacta (campos mais baixos, menos espaço entre secções). */
.form-secao { margin-bottom: .6rem !important; }
.form-secao .card-header { padding: .35rem .8rem; font-size: 1rem; }
.form-secao .card-body { padding: .6rem .8rem; }
.form-secao .form-control,
.form-secao .form-select {
  min-height: 0;
  padding: .18rem .5rem;
  font-size: .85rem;
  line-height: 1.4;
}
.form-secao .form-select { padding-right: 1.75rem; }
.form-secao .form-label { margin-bottom: .1rem; font-size: .73rem; }
.form-foto-moldura { width: 7rem; height: 7rem; }
.form-acoes { margin-top: .25rem; padding: .4rem .8rem; }

/* ==========================================================================
   Template de cartões — TODO o sistema
   --------------------------------------------------------------------------
   O aspecto de cartão das páginas de Configurações (cantos arredondados, sombra suave, filete dourado, cabeçalho com linha discreta,
   etiquetas e campos no mesmo estilo) estende-se a todos os cartões, listas e janelas. Só acrescenta aspecto: não mexe em espaçamentos
   nem tamanhos (o sistema continua compacto), para as páginas densas (Catequizandos, Presenças, Finanças...) não perderem espaço.
   Fica no fim do ficheiro, para valer sobre as regras anteriores de igual especificidade.
   ========================================================================== */

/* Cartões */
.content-body .card {
  --bs-card-border-radius: .75rem;
  border-radius: .75rem;
  box-shadow: 0 1px 2px rgba(58, 15, 28, .05), 0 6px 18px rgba(58, 15, 28, .06);
}
.content-body .card:not([class*="border-"]) {
  border-color: var(--sgc-border);
  border-top-color: var(--sgc-dourado);
}
.content-body .card-header:not([class*="bg-"]) {
  background: transparent;
  border-bottom: 1px solid var(--sgc-border);
  font-weight: 600;
}
.content-body .card .form-label,
.content-body .card .form-check-label {
  color: var(--sgc-text-muted);
}
.content-body .card .form-label {
  font-weight: 600;
  letter-spacing: .02em;
}

/* Campos e botões */
.content-body .form-control,
.content-body .form-select {
  border-radius: .5rem;
}
.content-body .btn {
  --bs-btn-border-radius: .5rem;
}

/* Listas: a moldura da lista passa a ser um cartão (as listas dentro de um cartão ficam como estão, sem moldura dupla) */
.content-body .table-responsive {
  background: #fff;
  border: 1px solid var(--sgc-border);
  border-radius: .75rem;
  box-shadow: 0 1px 2px rgba(58, 15, 28, .05), 0 6px 18px rgba(58, 15, 28, .06);
}
.content-body .table-responsive > .table {
  margin-bottom: 0;
}
.content-body .card .table-responsive {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.content-body .table thead th {
  border-bottom-color: var(--sgc-dourado);
}
.content-body .table > tbody > tr:hover > * {
  background-color: rgba(193, 154, 91, .12);
}

/* Avisos e janelas */
.content-body .alert {
  border-radius: .75rem;
}
/* Avisos estreitos (com "max-width" no style) ficam centrados, tal como os cartões estreitos */
.content-body .alert[style*="max-width"] {
  margin-left: auto;
  margin-right: auto;
}
.modal-content {
  border: 1px solid var(--sgc-border);
  border-radius: .9rem;
  box-shadow: 0 18px 50px rgba(58, 15, 28, .25);
}
.modal-header {
  border-bottom-color: var(--sgc-border);
}
.modal-footer {
  border-top-color: var(--sgc-border);
}
.dropdown-menu {
  border-color: var(--sgc-border);
  border-radius: .6rem;
  box-shadow: 0 8px 24px rgba(58, 15, 28, .15);
}

/* Impressão a partir do navegador: as listas não ficam cortadas pela altura máxima nem levam moldura/sombra. */
@media print {
  .content-body .table-responsive {
    max-height: none !important;
    overflow: visible !important;
    border: 0;
    box-shadow: none;
  }
}

/* Campos pequenos DENTRO das células de uma lista (ex.: «Observação» na Lista de Apresentação): sem isto, cada campo era mais alto do que o
   texto das outras células e todas as linhas da lista ficavam grandes. Passam a ter a altura de uma linha normal da lista. */
.content-body .table td .form-control-sm,
.content-body .table td .form-select-sm {
  min-height: 0;
  padding: .02rem .4rem;
  font-size: .78rem;
  line-height: 1.3;
  border-radius: .35rem;
}
.content-body .table td input[type="checkbox"] {
  margin-top: 0;
  vertical-align: middle;
}

/* ==========================================================================
   Relatório Anual — uma só fonte e tamanho em todo o relatório, e listas compactas
   --------------------------------------------------------------------------
   Antes misturava a fonte de títulos (serifada) com a do texto, tamanhos grandes («fs-5») e listas de nomes com linhas altas.
   Agora títulos, texto, totais e tabelas usam a mesma fonte do sistema; só o peso e um pouco o tamanho distinguem os níveis.
   ========================================================================== */
.relatorio-anual {
  font-family: inherit;
  font-size: .82rem;
  line-height: 1.35;
}
.relatorio-anual h2,
.relatorio-anual h3 {
  font-family: inherit;
  font-weight: 700;
  color: var(--sgc-vinho);
}
.relatorio-anual h2 {
  font-size: 1rem;
  margin: 1.6rem 0 .6rem;
  padding-bottom: .25rem;
  border-bottom: 1px solid var(--sgc-border);
}
.relatorio-anual > h2:first-child {
  margin-top: .25rem;
}
.relatorio-anual h3 {
  font-size: .9rem;
  margin-top: 1.1rem;
  margin-bottom: .4rem;
}
.relatorio-anual p,
.relatorio-anual .fs-5 {
  font-family: inherit;
  font-size: .82rem !important;
  margin-bottom: .45rem;
}
.relatorio-anual .small,
.relatorio-anual small {
  font-size: .76rem !important;
}
.relatorio-anual strong {
  font-weight: 700;
}
.relatorio-anual .table,
.relatorio-anual .table td,
.relatorio-anual .table th {
  font-family: inherit;
  font-size: .8rem;
}
/* Listas de nomes (Catequistas novos e antigos): linhas e letra pequenas, como as outras listas */
.relatorio-anual .list-group-item {
  padding: .12rem .6rem;
  font-size: .8rem;
  line-height: 1.3;
}

/* ==========================================================================
   Cadastros (Catequizandos / Catequistas) — uma só fonte e uma escala de tamanhos
   --------------------------------------------------------------------------
   Os títulos das secções usavam a fonte serifada dos títulos do sistema (1rem), os rótulos 0,73 rem, os rótulos das caixas de marcar
   0,78 rem, as notas «small» outro tamanho e os campos 0,85 rem. Agora tudo usa a fonte do sistema e esta escala:
     título da secção 0,92 rem (negrito) · campos 0,85 rem · rótulos, caixas de marcar e botões pequenos 0,76 rem · notas 0,74 rem.
   ========================================================================== */
.form-secao,
.form-secao .card-header,
.form-secao .card-body,
.form-secao label,
.form-secao .btn,
.form-secao .badge,
.form-acoes,
.form-acoes .btn {
  font-family: inherit;
}
.form-secao .card-header {
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.form-secao .form-label,
.form-secao .form-check-label,
.form-secao label {
  font-size: .76rem;
}
.form-secao .form-control,
.form-secao .form-select,
.form-secao textarea {
  font-family: inherit;
  font-size: .85rem;
}
.form-secao .btn-sm,
.form-acoes .btn {
  font-size: .78rem;
}
.form-secao .small,
.form-secao small,
.form-secao .form-text,
.form-secao-sub,
.form-secao .text-muted.small {
  font-size: .74rem !important;
}
.form-grupo-titulo {
  font-size: .74rem;
}
.form-secao .badge {
  font-size: .7rem;
}

/* Saudação litúrgica e Mensagem do mês no painel inicial */
.inicio-saudacao {
  --cor-liturgica: #2e7d4f;
  margin: -.25rem 0 .75rem;
  padding-left: 1rem;
  font-style: italic;
  font-size: .95rem;
  color: var(--sgc-texto-suave, #5b5b5b);
  border-left: 4px solid var(--cor-liturgica);
}
.inicio-saudacao.cor-roxo { --cor-liturgica: #6b3fa0; }
.inicio-saudacao.cor-branco { --cor-liturgica: #c9a227; }
.inicio-saudacao.cor-vermelho { --cor-liturgica: #b42318; }
.inicio-saudacao.cor-rosa { --cor-liturgica: #d4709f; }
.inicio-mensagem-mes {
  display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: baseline;
  margin-bottom: .75rem; padding: .55rem .9rem;
  border: 1px solid var(--sgc-linha, #dee2e6); border-radius: .6rem;
  background: var(--sgc-cartao, #fff);
}
.inicio-mensagem-mes strong { color: var(--sgc-primaria, #3a0f1c); }
.inicio-santo-dia { margin: .25rem 0 .75rem; font-size: .9rem; text-align: center; color: var(--sgc-texto-suave, #5b5b5b); }
/* Evangelho do dia + frase-chave: uma linha, centrada (substitui o versículo do tempo litúrgico no Início). */
.inicio-evangelho {
  --cor-liturgica: #2e7d4f;
  margin: -.25rem 0 .5rem;
  padding: .15rem 0;
  text-align: center;
  font-size: .98rem;
  color: var(--sgc-texto-suave, #5b5b5b);
}
.inicio-evangelho strong { color: var(--sgc-primaria, #3a0f1c); }
/* Atribuição obrigatória (autorização do Secretariado Nacional de Liturgia, 8/10/2026): a referência ao Secretariado fica sempre visível. */
.inicio-evangelho-fonte {
  display: block;
  margin-top: .1rem;
  font-size: .74rem;
  font-style: normal;
  color: var(--sgc-text-muted, #55483d);
}
.inicio-evangelho.cor-roxo { --cor-liturgica: #6b3fa0; }
.inicio-evangelho.cor-branco { --cor-liturgica: #c9a227; }
.inicio-evangelho.cor-vermelho { --cor-liturgica: #b42318; }
.inicio-evangelho.cor-rosa { --cor-liturgica: #d4709f; }
.pag-oculta { display: none !important; }
@media print {
  .pag-oculta { display: table-row !important; }
  .paginacao-tabela { display: none !important; }
}

/* ==========================================================================
   Telemóvel (até 767 px): formulários de cadastro (Catequizando, Catequista, Registo de Sacramentos Antigos...)
   --------------------------------------------------------------------------
   - Campos com letra de 16 px: abaixo disso o iPhone (Safari) aumenta o ecrã sozinho ao tocar num campo.
   - Campos mais altos (cerca de 40 px) para o dedo acertar; as células das listas ficam como estão.
   - Barra «Cancelar / Guardar»: o aviso do SMS ocupa uma linha e os dois botões dividem a largura (antes espremiam-se na mesma linha).
   - Separadores (Baptismo / Matrimónio...) deslizam na horizontal em vez de quebrar em várias linhas.
   ========================================================================== */
@media (max-width: 767.98px) {
  .content-body .form-secao .form-control,
  .content-body .form-secao .form-select,
  .content-body .card-body.row .form-control,
  .content-body .card-body.row .form-select {
    min-height: 2.5rem;
    padding: .3rem .6rem;
    font-size: 16px;
    line-height: 1.4;
  }
  .content-body .form-secao .form-select,
  .content-body .card-body.row .form-select { padding-right: 2rem; }
  .content-body .form-secao .form-label,
  .content-body .card-body.row .form-label { font-size: .8rem; margin-bottom: .15rem; }
  .content-body .form-secao .card-body { padding: .6rem .7rem; }
  .content-body .form-secao .row { --bs-gutter-y: .5rem; }

  .form-acoes {
    flex-wrap: wrap;
    gap: .5rem;
    padding: .5rem .65rem calc(.5rem + env(safe-area-inset-bottom, 0px));
  }
  .form-acoes .form-check { flex: 1 0 100%; margin-right: 0 !important; }
  .form-acoes .btn { flex: 1 1 0; min-height: 2.6rem; }

  .content-body .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .content-body .nav-tabs .nav-link { white-space: nowrap; }

  .form-foto-moldura { width: 6rem; height: 6rem; }

  /* Filtros das listas (Nome, Ano, Celebrante...): ocupam a largura toda em vez de ficarem estreitos, e os botões de rito quebram de linha. */
  .content-body form.d-flex.flex-wrap.align-items-end > div:not(.btn-group) { flex: 1 1 9rem; }
  .content-body form.d-flex.flex-wrap.align-items-end > div:not(.btn-group) .form-control { width: 100% !important; }
  .content-body form.d-flex.flex-wrap .btn-group { flex-wrap: wrap; gap: .25rem; }
  .content-body form.d-flex.flex-wrap .btn-group > .btn { border-radius: .4rem !important; }
}

/* Formulários de cadastro no telemóvel: campos curtos (col-md-2/3/4) lado a lado, dois por linha, e só os longos (col-md-6 ou mais)
   ocupam a largura toda; rótulos em tipo normal (não negrito) e mais pequenos; menos espaço entre linhas. */
@media (max-width: 767.98px) {
  .content-body .form-secao .row > .col-md-2,
  .content-body .form-secao .row > .col-md-3,
  .content-body .form-secao .row > .col-md-4,
  .content-body .card-body.row > .col-md-2,
  .content-body .card-body.row > .col-md-3,
  .content-body .card-body.row > .col-md-4 {
    flex: 0 0 auto;
    width: 50%;
  }
  .content-body .form-secao .row { --bs-gutter-y: .35rem; --bs-gutter-x: .5rem; }
  .content-body .form-secao .form-label,
  .content-body .card-body.row .form-label {
    font-weight: 400;
    font-size: .74rem;
    letter-spacing: 0;
    margin-bottom: .05rem;
  }
  .content-body .form-secao .card-body { padding: .45rem .6rem; }
  .content-body .form-secao .card-header { padding: .3rem .6rem; }
  .content-body .form-secao .form-control,
  .content-body .form-secao .form-select,
  .content-body .card-body.row .form-control,
  .content-body .card-body.row .form-select {
    min-height: 2.2rem;
    padding: .2rem .5rem;
    font-size: .85rem;
    line-height: 1.3;
  }
  .content-body .form-secao .form-select,
  .content-body .card-body.row .form-select { padding-right: 1.75rem; }
  .content-body .form-secao input[type="date"],
  .content-body .form-secao input[type="time"],
  .content-body .form-secao input[type="datetime-local"],
  .content-body .card-body.row input[type="date"],
  .content-body .card-body.row input[type="time"],
  .content-body .card-body.row input[type="datetime-local"] { font-size: .85rem; min-height: 2.2rem; }
  .form-foto-moldura { width: 5rem; height: 5rem; }
}

/* Telemóvel: botões e textos de apoio proporcionais aos campos (o Bootstrap põe 1rem e muito espaço, desproporcionado ao lado de campos de .85rem). */
@media (max-width: 767.98px) {
  .content-body .btn:not(.btn-lg) {
    --bs-btn-padding-y: .25rem;
    --bs-btn-padding-x: .6rem;
    --bs-btn-font-size: .85rem;
    line-height: 1.35;
  }
  .content-body .btn-sm { --bs-btn-padding-y: .15rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .78rem; }
  .form-acoes .btn { min-height: 2.3rem; font-size: .9rem; }
  .content-body .form-secao .card-header { font-size: .92rem; font-weight: 600; }
  .content-body .form-secao .card-header .form-secao-sub,
  .content-body .form-secao .card-header .small,
  .content-body .form-secao .card-header small { font-size: .72rem; font-weight: 400; }
  .content-body .form-secao .form-check-label { font-size: .85rem; }
}

/* Telemóvel — larguras por campo nos formulários de cadastro (classes cm-* no markup; sem efeito no computador).
   cm-N = N/12 da linha; cm-fixo = caixa estreita (Ano, Grupo, Zona); cm-resto = o que sobra da linha ao lado de um cm-fixo. */
@media (max-width: 767.98px) {
  .content-body .form-secao .row > .cm-3 { flex: 0 0 auto; width: 25%; }
  .content-body .form-secao .row > .cm-4 { flex: 0 0 auto; width: 33.3333%; }
  .content-body .form-secao .row > .cm-5 { flex: 0 0 auto; width: 41.6667%; }
  .content-body .form-secao .row > .cm-6 { flex: 0 0 auto; width: 50%; }
  .content-body .form-secao .row > .cm-12 { flex: 0 0 auto; width: 100%; }
  .content-body .form-secao .row > .cm-fixo { flex: 0 0 auto; width: 6.4rem; }
  .content-body .form-secao .row > .cm-resto { flex: 1 1 auto; width: calc(100% - 6.4rem); min-width: 0; }
  .content-body .form-secao .row > [class*="cm-"] .form-control,
  .content-body .form-secao .row > [class*="cm-"] .form-select { min-width: 0; }
  .content-body .form-secao .form-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

  /* Foto: "Tirar foto" à esquerda da moldura, "Carregar foto" à direita */
  .content-body .form-secao .form-foto {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: .5rem;
    row-gap: .25rem;
  }
  .content-body .form-secao .form-foto > .form-label { grid-column: 1 / -1; text-align: center; }
  .content-body .form-secao .form-foto > .form-foto-moldura { grid-column: 2; grid-row: 2; margin: 0; }
  .content-body .form-secao .form-foto > .d-flex { display: contents !important; }
  .content-body .form-secao .form-foto > .d-flex > .btn:nth-child(1) { grid-column: 1; grid-row: 2; justify-self: end; }
  .content-body .form-secao .form-foto > .d-flex > .btn:nth-child(2) { grid-column: 3; grid-row: 2; justify-self: start; }
  .content-body .form-secao .form-foto > #Input_FotoStatus,
  .content-body .form-secao .form-foto > .form-check { grid-column: 1 / -1; }
}

/* Telemóvel — Catequese/Sacramento: ordem visual própria (Grupo, Horário e Sala na mesma linha; Sacramentos e Aproveitamento juntos),
   «Preencher a partir do BI / Cédula» centrado e o versículo do rodapé numa linha própria, por baixo do copyright. */
@media (max-width: 767.98px) {
  .content-body .form-secao .row > .cm-hora { flex: 0 0 auto; width: 5.2rem; }
  .content-body .form-secao .row > .cm-resto2 { flex: 1 1 auto; width: calc(100% - 11.6rem); min-width: 0; }
  .content-body .form-secao .row > .cm-o1 { order: 1; }
  .content-body .form-secao .row > .cm-o2 { order: 2; }
  .content-body .form-secao .row > .cm-o3 { order: 3; }
  .content-body .form-secao .row > .cm-o4 { order: 4; }
  .content-body .form-secao .row > .cm-o5 { order: 5; }
  .content-body .form-secao .row > .cm-o6 { order: 6; }
  .content-body .form-secao .row > .cm-o7 { order: 7; }
  .content-body .form-secao .row > .cm-o8 { order: 8; }
  .content-body .form-secao .row > .cm-o9 { order: 9; }
  .content-body .form-secao .row > .cm-o10 { order: 10; }
  .content-body .form-secao .row > .cm-o11 { order: 11; }

  .content-body .form-secao-bi .card-header { justify-content: center; text-align: center; }
  .content-body .form-secao-bi .card-header .ms-auto { margin-left: 0 !important; }
  .content-body .form-secao-bi .card-body .d-flex { justify-content: center; text-align: center; }
  .content-body .form-secao-bi .card-body .d-flex > span.small:first-child { min-width: 0 !important; }

  footer.footer { flex-wrap: wrap; row-gap: .15rem; }
  .rodape-assinatura { flex-wrap: wrap; justify-content: center; text-align: center; white-space: normal; overflow: visible; }
  .rodape-versiculo { flex: 1 0 100%; text-align: center; white-space: normal; overflow: visible; text-overflow: clip; }
  footer.footer { justify-content: center; }
  .rodape-assinatura { flex: 1 0 100%; }
  .rodape-ajuda { margin: 0 auto; }
  footer.footer .rodape-ajuda .painel-drop { left: 50%; right: auto; transform: translateX(-50%); width: min(22rem, calc(100vw - 1rem)); }
}

/* Lista suspensa própria para os combobox no telemóvel (ver site.js, «lista-movel»): a lista nativa do Android não aceita CSS,
   por isso mostra-se esta, compacta, com a letra dos campos e encostada ao próprio campo (por baixo, ou por cima se faltar espaço). */
.lista-movel-fundo { position: fixed; inset: 0; z-index: 3000; background: rgba(0, 0, 0, .12); }
.lista-movel {
  position: fixed; overflow-y: auto; overscroll-behavior: contain;
  background: var(--sgc-cartao, #fff); color: var(--bs-body-color, #212529);
  border: 1px solid var(--sgc-border, #dee2e6); border-radius: .5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}
.lista-movel-item {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  width: 100%; padding: .38rem .7rem; border: 0; border-bottom: 1px solid var(--sgc-border, #eee);
  background: transparent; color: inherit; text-align: left;
  font-size: .85rem; line-height: 1.3; font-family: inherit;
}
.lista-movel-item:last-child { border-bottom: 0; }
.lista-movel-item.activo { font-weight: 600; color: var(--sgc-vinho, #3a0f1c); background: color-mix(in srgb, var(--sgc-dourado, #c19a5b) 12%, transparent); }
.lista-movel-item:disabled { opacity: .45; }

/* Telemóvel — mesmos ajustes dos formulários de cadastro para os restantes formulários (classe form-movel no cartão): campos curtos
   (col-md-2/3/4) dois por linha, rótulos em tipo normal e mais pequenos, campos compactos, menos espaço. No computador não muda nada. */
@media (max-width: 767.98px) {
  .content-body .form-movel .row > .col-md-2,
  .content-body .form-movel .row > .col-md-3,
  .content-body .form-movel .row > .col-md-4,
  .content-body .form-movel.card-body.row > .col-md-2,
  .content-body .form-movel .card-body.row > .col-md-3,
  .content-body .form-movel .card-body.row > .col-md-4 { flex: 0 0 auto; width: 50%; }
  .content-body .form-movel .row { --bs-gutter-y: .35rem; --bs-gutter-x: .5rem; }
  .content-body .form-movel .form-label { font-weight: 400; font-size: .74rem; letter-spacing: 0; margin-bottom: .05rem; }
  .content-body .form-movel .card-body { padding: .45rem .6rem; }
  .content-body .form-movel .form-control,
  .content-body .form-movel .form-select { min-height: 2.2rem; padding: .2rem .5rem; font-size: .85rem; line-height: 1.3; }
  .content-body .form-movel .form-select { padding-right: 1.75rem; }
}

/* ==========================================================================
   Densidade (Aparência → Densidade): «Normal» é o aspecto de sempre (sem atributo); «Confortável» dá mais ar e letra maior (leitura e toque);
   «Compacta» aproxima tudo para ver mais por ecrã. O atributo data-densidade vem do <head> (localStorage «sgc-densidade»).
   ========================================================================== */
:root[data-densidade="confortavel"] .content-body label,
:root[data-densidade="confortavel"] .content-body .form-label { font-size: .86rem; }
:root[data-densidade="confortavel"] .content-body .form-control,
:root[data-densidade="confortavel"] .content-body .form-select { font-size: .95rem; padding: .45rem .7rem; }
:root[data-densidade="confortavel"] .content-body .row.g-2 { --bs-gutter-y: .75rem; }
:root[data-densidade="confortavel"] .content-body .row.g-3 { --bs-gutter-y: 1rem; }
:root[data-densidade="confortavel"] .content-body .card-body { padding: 1rem 1.15rem; }
:root[data-densidade="confortavel"] .content-body .card-header { padding: .65rem 1.15rem; font-size: .95rem; }
:root[data-densidade="confortavel"] .content-body .btn:not(.btn-sm) { font-size: .92rem; padding: .45rem .9rem; }
:root[data-densidade="confortavel"] .content-body .table > :not(caption) > * > * { padding: .55rem .65rem; font-size: .92rem; }

:root[data-densidade="compacta"] .content-body label,
:root[data-densidade="compacta"] .content-body .form-label { font-size: .72rem; margin-bottom: .1rem; }
:root[data-densidade="compacta"] .content-body .form-control,
:root[data-densidade="compacta"] .content-body .form-select { font-size: .78rem; padding: .18rem .45rem; min-height: calc(1.5em + .36rem + 2px); }
:root[data-densidade="compacta"] .content-body .row.g-2 { --bs-gutter-y: .2rem; }
:root[data-densidade="compacta"] .content-body .row.g-3 { --bs-gutter-y: .35rem; }
:root[data-densidade="compacta"] .content-body .card-body { padding: .45rem .65rem; }
:root[data-densidade="compacta"] .content-body .card-header { padding: .28rem .65rem; font-size: .8rem; }
:root[data-densidade="compacta"] .content-body .btn:not(.btn-sm) { font-size: .76rem; padding: .18rem .55rem; }
:root[data-densidade="compacta"] .content-body .table > :not(caption) > * > * { padding: .18rem .4rem; font-size: .8rem; }
.btn-mini.activo { border-color: var(--tema-acento-forte); box-shadow: inset 0 0 0 1px var(--tema-acento-forte); font-weight: 600; }
.densidade-botoes { display: flex; gap: .35rem; flex-wrap: wrap; }

/* ==========================================================================
   Estados vazios («Ainda não há…», «Sem …»): discretos e iguais em todo o site, com uma pequena cruz.
   ========================================================================== */
.content-body .alert.alert-secondary {
  background: transparent;
  border: 1px dashed var(--sgc-border);
  color: var(--sgc-text-muted);
  text-align: center;
  padding: .9rem 1rem;
}
.content-body .alert.alert-secondary::before { content: "\2629\00a0"; color: var(--tema-acento-forte); }

/* ==========================================================================
   Telemóvel: botões e campos de formulário com altura de toque confortável (os pequenos .btn-sm das tabelas não mudam).
   ========================================================================== */
@media (max-width: 767.98px) {
  .content-body .btn:not(.btn-sm),
  .content-body .form-control:not(.form-control-sm),
  .content-body .form-select:not(.form-select-sm) { min-height: 40px; }
  .content-body .form-check-input { width: 1.2em; height: 1.2em; }
}

/* Início: botão que esconde/mostra o resumo do ano (o estado fica lembrado neste aparelho). */
.painel-cabecalho { justify-content: flex-start; }
.painel-recolher { margin-left: auto; white-space: nowrap; }
.painel-recolher-seta { display: inline-block; transition: transform .15s; }
.painel-recolher.collapsed .painel-recolher-seta, .painel-recolher[aria-expanded="false"] .painel-recolher-seta { transform: rotate(-90deg); }

/* Botão «Voltar ao topo» (ver site.js): discreto, no canto, só depois de descer bastante. */
.voltar-topo {
  position: fixed; right: 1rem; bottom: 3.6rem; z-index: 1030;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 1px solid var(--sgc-border); background: var(--sgc-surface); color: var(--sgc-vinho, #3a0f1c);
  font-size: 1.1rem; line-height: 1; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
.voltar-topo:hover { border-color: var(--tema-acento-forte); }
.voltar-topo[hidden] { display: none; }
@media print { .voltar-topo { display: none !important; } }

/* ==========================================================================
   Impressão (Ctrl+P) das páginas do sistema: o «app-shell» tem a altura do ecrã e só o conteúdo desloca, por isso sem isto o browser imprimia só o que
   cabia no ecrã, com o menu e a barra de cima. Aqui: sem menu, barra, rodapé nem botões; o conteúdo corre pelas páginas todas, a tabela repete o
   cabeçalho em cada página e as linhas não se partem. O título (paróquia, página, data) vem de site.js (beforeprint).
   ========================================================================== */
@media print {
  html, body { height: auto !important; overflow: visible !important; background: #fff !important; }
  .app-shell, .conteudo-app { display: block !important; height: auto !important; overflow: visible !important; }
  .content-body { display: block !important; height: auto !important; max-height: none !important; overflow: visible !important; padding: 0 !important; margin: 0 !important; font-size: 10pt; }
  .sidebar, .topbar, footer.footer, .saltar-conteudo, #boasVindasOverlay, .ajuda-balao, .btn-ajuda, .voltar-topo, .botao-colunas-escolher, .botao-colunas-movel,
  .content-body .btn, .content-body .dropdown, .content-body .alert, .content-body nav, .content-body .no-print { display: none !important; }
  .content-body::before {
    content: attr(data-titulo-impressao); display: block; font-weight: 600; font-size: 12pt;
    margin-bottom: .5rem; padding-bottom: .25rem; border-bottom: 1px solid #999;
  }
  .content-body .table-responsive { overflow: visible !important; }
  .content-body table { font-size: 9pt; width: 100% !important; }
  .content-body table th, .content-body table td { position: static !important; background-color: transparent !important; }
  .content-body thead { display: table-header-group; }
  .content-body tr { break-inside: avoid; page-break-inside: avoid; }
  .content-body .card { border: 0 !important; box-shadow: none !important; }
  .content-body .collapse:not(.show) { display: none !important; }
  .content-body a { color: inherit !important; text-decoration: none !important; }
  @page { margin: 1.2cm; }
}

/* Sino: botão «Limpar» ao lado do título. */
.painel-titulo-linha { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.painel-limpar { border: 0; background: none; padding: 0; font-size: .72rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--sgc-text-muted); cursor: pointer; text-decoration: underline; }
.painel-limpar:hover { color: var(--tema-acento-forte); }
.painel-limpar[hidden], .painel-msg[hidden] { display: none; }

/* Listas no telemóvel como cartões (ver site.js, rotularCelulas): só as tabelas com data-cartoes-movel. */
@media (max-width: 767.98px) {
  .table.cartoes-movel, .table.cartoes-movel > tbody { display: block; }
  .table.cartoes-movel > thead { display: none; }
  .table.cartoes-movel > tbody > tr {
    display: block; position: relative; margin: 0 0 .6rem; padding: .35rem .6rem;
    border: 1px solid var(--sgc-border); border-radius: 6px; background: #fff;
  }
  .table.cartoes-movel > tbody > tr > td {
    display: flex; justify-content: space-between; align-items: baseline; gap: .75rem;
    border: 0; padding: .12rem 0; position: static !important; background: transparent !important; width: auto !important; white-space: normal;
  }
  .table.cartoes-movel > tbody > tr > td.td-vazio { display: none !important; }
  /* Caixa de seleção, Nº, Nome e acções (as células sem etiqueta) ficam lado a lado na primeira linha do cartão. */
  .table.cartoes-movel > tbody > tr > td:not([data-label]):not([colspan]) { display: inline-flex; align-items: center; margin-right: .6rem; }
  .table.cartoes-movel > tbody > tr > td[data-label]::before {
    content: attr(data-label); flex: none; font-size: .72rem; font-weight: 600; color: var(--sgc-text-muted);
  }
  .table.cartoes-movel > tbody > tr > td.col-congelada, .table.cartoes-movel > tbody > tr > td.cartao-titulo { font-weight: 600; font-size: .95rem; }
  .table.cartoes-movel > tbody > tr > td[colspan] { display: block; text-align: center; }
}

/* Comissão de Catequese: cabeçalho da caixa «Novo Membro» (título à esquerda, «Ano» ao centro, «Guardar» à direita, tudo na mesma linha) e a linha dos campos principais
   (Catequista e Função largos; Activo, Ano inicial e Ano final pequenos). Em ecrã estreito quebram para a linha de baixo. */
.cabecalho-membro { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.cabecalho-membro .zona-esq, .cabecalho-membro .zona-dir { flex: 1 1 0; display: flex; align-items: center; gap: .5rem; min-width: 8rem; }
.cabecalho-membro .zona-dir { justify-content: flex-end; }
.cabecalho-membro .zona-centro { display: flex; align-items: center; gap: .5rem; }
/* Formulários compactos das tabelas de apoio: o título, os campos e os botões ficam todos na mesma linha do cabeçalho do cartão (os campos ao centro, a esticar; Guardar e «?» à direita). */
.cabecalho-membro.com-campos .zona-esq, .cabecalho-membro.com-campos .zona-dir { flex: 0 0 auto; min-width: 0; }
.cabecalho-membro.com-campos .zona-centro { flex: 1 1 18rem; flex-wrap: wrap; align-items: flex-start; }
.cabecalho-membro.com-campos .zona-centro .campo-linha { flex: 1 1 12rem; min-width: 0; }
.cabecalho-membro.com-campos .zona-centro .campo-linha .form-control,
.cabecalho-membro.com-campos .zona-centro .campo-linha .form-select { width: 100%; }
/* Barra por cima de uma lista: botões, escolha do ano e pesquisa lado a lado, numa só linha (a pesquisa vai para a direita). */
.barra-lista { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-bottom: .5rem; }
.barra-lista .pesquisa-direita { margin-left: auto; }
.linha-membro { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem .75rem; }
.linha-membro .campo-catequista { flex: 2 1 16rem; min-width: 12rem; }
.linha-membro .campo-funcao { flex: 1.5 1 11rem; min-width: 9rem; position: relative; }
.linha-membro .campo-pequeno { flex: 0 0 7rem; }
.linha-membro-2 { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem .75rem; margin-top: .5rem; }
.linha-membro-2 .campo-obs { flex: 1 1 18rem; }
.linha-membro-2 .campo-medio { flex: 0 0 12rem; }

/* Fluxo de Caixa: campos do movimento numa linha e resumo do período */
.linha-campos { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem .75rem; }
.linha-campos .campo-data { flex: 0 0 9.5rem; }
.linha-campos .campo-movimento { flex: 0 0 11rem; }
.linha-campos .campo-meio { flex: 1 1 11rem; min-width: 9rem; }
.linha-campos .campo-valor { flex: 0 0 10rem; }
.linha-campos .campo-descricao { flex: 3 1 16rem; min-width: 12rem; position: relative; }
.resumo-caixa { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; align-items: baseline; }
.resumo-caixa .valor-negativo { color: var(--bs-danger, #dc3545); }

/* Contribuições Mensais: célula de mês vazia que se clica para lançar */
.cel-lancar { display: block; min-width: 1.75rem; min-height: 1.25rem; border-radius: .25rem; }
.cel-lancar:hover { background: var(--bs-secondary-bg, rgba(0, 0, 0, .08)); }