/* Camada compacta para o computador (ecrãs a partir de 768px, atributo media da <link>; o telemóvel tem a sua em site-movel.css).
   Carregada depois de site-formularios.css: só acerta alturas, espaços e rótulos dos formulários, das caixas e das tabelas, para ficarem todos
   iguais e o mais compactos possível. Não muda cores, nem a identidade, nem a estrutura das páginas.
   Medidas: campos e botões com 2rem de altura; rótulos pequenos colados ao campo; espaço entre campos de 0,35 a 0,5rem. */

/* Rótulos: pequenos e colados ao campo */
.content-body label,
.content-body .form-label,
.content-body .form-check-label {
  font-size: .74rem;
  margin-bottom: .1rem;
  line-height: 1.2;
}

/* Campos de texto, escolhas e datas: todos com a mesma altura (inclui os formulários de registo, os painéis e as Configurações, que eram mais folgados) */
.content-body .form-control,
.content-body .form-select,
.content-body .layout-registo-form .form-control,
.content-body .layout-registo-form .form-select,
.content-body .painel-registo .form-control,
.content-body .painel-registo .form-select,
.content-body.secao-config .card .form-control,
.content-body.secao-config .card .form-select {
  min-height: 2rem;
  padding: .22rem .6rem;
  font-size: .82rem;
  line-height: 1.35;
  border-radius: .5rem;
}
.content-body textarea.form-control { min-height: 2rem; }
.content-body .form-control-sm,
.content-body .form-select-sm {
  min-height: 1.75rem;
  padding: .15rem .5rem;
  font-size: .78rem;
}
.content-body .form-select { padding-right: 1.9rem; }

/* Botões: mesma altura dos campos, para a linha dos filtros e dos botões ficar direita */
.content-body .btn:where(:not(.btn-lg, .btn-sm, .btn-icone, .btn-info-ajuda, .btn-close)) {
  min-height: 2rem;
  padding: .22rem .75rem;
  font-size: .82rem;
  border-radius: .5rem;
  line-height: 1.35;
}
.content-body .btn-sm:where(:not(.btn-icone, .btn-info-ajuda)) {
  min-height: 1.75rem;
  padding: .12rem .55rem;
  font-size: .78rem;
  border-radius: .45rem;
}

/* Botões dentro das tabelas (Percurso, Editar, Remover...): bem pequenos, para a linha não crescer. Têm de ficar mais baixos que os botões normais. */
.content-body table .btn:where(:not(.btn-icone, .btn-info-ajuda, .btn-close)) {
  min-height: 0;
  height: auto;
  padding: .08rem .5rem;
  font-size: .74rem;
  line-height: 1.25;
  border-radius: .4rem;
  box-shadow: none;
}
.content-body table .btn.btn-icone { min-height: 0; }

/* Espaço entre campos */
.content-body .row.g-3 { --bs-gutter-x: .7rem; --bs-gutter-y: .5rem; }
.content-body .row.g-2 { --bs-gutter-x: .5rem; --bs-gutter-y: .35rem; }
.content-body .row.g-4 { --bs-gutter-x: 1rem; --bs-gutter-y: .75rem; }

/* Caixas: cabeçalho e corpo mais baixos; o cabeçalho leva os botões (Guardar, Cancelar, ?) à direita, na mesma linha do título */
.content-body .card { margin-bottom: .75rem; }
.content-body .card-body { padding: .6rem .8rem; }
.content-body .card-header {
  padding: .35rem .8rem;
  font-size: .86rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}
.content-body .card-header > .btn:last-child,
.content-body .card-header > form:last-child { margin-left: auto; }

/* Tabelas dos formulários e das configurações: linhas baixas, cabeçalho pequeno em maiúsculas (as listas longas já têm o seu estilo próprio) */
.content-body .table-sm > :not(caption) > * > * { padding: .22rem .55rem; }
.content-body .table-sm thead th {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sgc-text-muted);
}
.content-body .table > :not(caption) > * > * { vertical-align: middle; }

/* Separadores em pílula (Baptismo, Primeira Comunhão, Crisma nas Regras dos Requisitos, e semelhantes) mais baixos */
.content-body .nav-pills .nav-link { padding: .25rem .8rem; font-size: .82rem; }

/* Títulos das páginas: mais pequenos, para ganhar altura */
.content-body h1, .content-body .h1 { margin-bottom: .4rem; }
.content-body h2, .content-body .h2 { margin-bottom: .4rem; }

/* Páginas públicas (Pré-inscrição, Consulta, Sugestões...): também compactas, mas com campos um pouco mais altos (2,25rem), porque quem as usa é o público */
.conteudo-publico label,
.conteudo-publico .form-label,
.conteudo-publico .form-check-label {
  font-size: .78rem;
  margin-bottom: .15rem;
  line-height: 1.2;
}
.conteudo-publico .form-control,
.conteudo-publico .form-select {
  min-height: 2.25rem;
  padding: .3rem .65rem;
  font-size: .9rem;
  line-height: 1.35;
  border-radius: .5rem;
}
.conteudo-publico textarea.form-control { min-height: 2.25rem; }
.conteudo-publico .form-select { padding-right: 1.9rem; }
.conteudo-publico .btn:not(.btn-lg):not(.btn-sm):not(.btn-close) {
  min-height: 2.25rem;
  padding: .3rem .95rem;
  font-size: .9rem;
}
.conteudo-publico .btn-sm { min-height: 1.9rem; padding: .15rem .65rem; font-size: .82rem; }
.conteudo-publico .row.g-3 { --bs-gutter-x: .75rem; --bs-gutter-y: .55rem; }
.conteudo-publico .row.g-2 { --bs-gutter-x: .5rem; --bs-gutter-y: .4rem; }
.conteudo-publico .card-body { padding: .75rem 1rem; }
.conteudo-publico .card-header { padding: .4rem 1rem; font-size: .88rem; }
.conteudo-publico .table > :not(caption) > * > * { padding: .3rem .6rem; }

/* TODAS as tabelas compactas: células baixas, letra pequena, cabeçalho curto. Selectores com :where() onde convém, para não atropelar listas que já têm estilo próprio (esses ganham). */
.content-body .table { font-size: .82rem; margin-bottom: .5rem; }
.content-body .table > :not(caption) > * > * {
  padding: .16rem .55rem;
  line-height: 1.25;
}
.content-body .table > thead > tr > th {
  padding: .3rem .55rem;
  font-size: .68rem;
}
/* campos, caixas e etiquetas dentro das células não podem esticar a linha */
.content-body table .form-control,
.content-body table .form-select {
  min-height: 1.6rem;
  height: 1.6rem;
  padding: .05rem .45rem;
  font-size: .78rem;
  line-height: 1.2;
}
.content-body table .form-check-input { margin-top: .1rem; }
.content-body table .badge { padding: .22em .55em; font-size: .7rem; line-height: 1.1; }
.content-body table .btn-group > .btn { min-height: 0; }
.content-body table img { max-height: 1.6rem; width: auto; }

/* Registo de Sacramentos: grelha de 12 colunas mais baixa */
.grelha-aplicar-sacramentos {
  grid-template-columns: minmax(11rem, 3fr) minmax(8rem, 2fr) minmax(10rem, 3fr) minmax(8rem, 2fr) minmax(8rem, 2fr);
  column-gap: .625rem;
}