/* Menu lateral, barra superior, área de conteúdo e tema (skin unificado) — 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. */
/* ==========================================================================
   Menu lateral + barra superior — equivalente Web de Formularios\
   frm_principal.vb (Panel_MenuLateral). Substitui o menu de topo (Bootstrap
   navbar) por uma barra lateral fixa e recolhível, tal como o Desktop, com
   identidade visual própria em vez do Bootstrap genérico.
   ========================================================================== */

:root {
  /* Cor do menu — escolhida no painel "Aparência" da barra superior (ver
     _Layout.cshtml + site.js), gravada em localStorage("sgc-tema"), tal como
     antes. "sk" (Vinho) é agora a base, sem atributo data-tema — o mesmo
     padrão vinho-e-dourado do Login/Área Pública passa a ser o visual de
     fábrica de todo o sistema (ver também a secção "Skin unificado" mais
     abaixo, que estende isto a botões/links/cabeçalhos/tabelas). "Azul"
     (o antigo predefinido) passa a tema explícito, ver bloco seguinte.

     --tema-texto-forte e --tema-hover-bg foram acrescentados junto com os 2
     temas claros (azul-claro/verde-claro, pedidos pelo utilizador): nos temas
     escuros originais o texto em destaque (nome do utilizador, item activo,
     hover) e a sobreposição de hover eram brancos fixos (#fff /
     rgba(255,255,255,.08)) espalhados por várias regras, partindo do princípio
     de que a barra lateral é sempre escura — o que deixa de ser verdade num
     tema claro (texto branco fica ilegível sobre fundo claro). Estas 2
     variáveis tornam essa relação parte do tema em vez de fixa: escuro em
     temas claros, branco nos escuros — valor idêntico ao anterior nos 3 temas
     escuros, para não mudar nada visualmente aí. */
  --tema-lateral: #3a0f1c;
  --tema-lateral-2: #4d1826;
  --tema-acento: #e3c691;
  /* Fixo, nunca redefinido dentro de um bloco "[data-tema=...]" abaixo —
     mesmo raciocínio do "--sgc-dourado" mais abaixo: o dourado é um
     acabamento constante, não muda com a cor escolhida em Aparência. */
  --tema-acento-forte: #c19a5b;
  --tema-texto-forte: #fff;
  --tema-hover-bg: rgba(255, 255, 255, .08);
  --tema-borda: rgba(255, 255, 255, .14);
  /* Só para texto/números SOBRE um fundo dourado (".avatar-user"/".badge")
     — como o dourado passou a ser fixo, o texto por cima também tem de ser
     uma cor fixa que resulte bem contra ele, em vez de "--tema-lateral"
     (que continua a variar e, em temas claros, já não contrastaria). */
  --tema-texto-sobre-dourado: #3a0f1c;

  --sgc-surface: #f4f1ec;
  --sgc-border: #ddd3c2;
  --sgc-text-muted: #55483d;
}

:root[data-tema="azul"] {
  --tema-lateral: #182740;
  --tema-lateral-2: #24395a;
  --tema-acento: #cfe0f5;
  --tema-texto-forte: #fff;
  --tema-hover-bg: rgba(255, 255, 255, .08);
  --tema-borda: rgba(255, 255, 255, .14);
}

:root[data-tema="verde"] {
  --tema-lateral: #12362c;
  --tema-lateral-2: #1c5142;
  --tema-acento: #d9cfa0;
  --tema-texto-forte: #fff;
  --tema-hover-bg: rgba(255, 255, 255, .08);
  --tema-borda: rgba(255, 255, 255, .14);
}

/* Temas das cores litúrgicas (roxo, branco, vermelho, rosa; o verde já existe).
   Usados à mão ou automaticamente ("Seguir o tempo litúrgico", ver site.js). */
:root[data-tema="roxo"] {
  --tema-lateral: #3b1f5c;
  --tema-lateral-2: #52307a;
  --tema-acento: #dccbf2;
  --tema-texto-forte: #fff;
  --tema-hover-bg: rgba(255, 255, 255, .08);
  --tema-borda: rgba(255, 255, 255, .14);
}
:root[data-tema="vermelho"] {
  --tema-lateral: #6e1410;
  --tema-lateral-2: #8c2018;
  --tema-acento: #f4cfc8;
  --tema-texto-forte: #fff;
  --tema-hover-bg: rgba(255, 255, 255, .08);
  --tema-borda: rgba(255, 255, 255, .14);
}
:root[data-tema="rosa"] {
  --tema-lateral: #8a3a63;
  --tema-lateral-2: #964170;
  --tema-acento: #fbe3ef;
  --tema-texto-forte: #fff;
  --tema-hover-bg: rgba(255, 255, 255, .08);
  --tema-borda: rgba(255, 255, 255, .14);
}
:root[data-tema="branco"] {
  /* Branco litúrgico: marfim com acentos em dourado escuro (tema claro). */
  --tema-lateral: #f7f0da;
  --tema-lateral-2: #ece0b8;
  --tema-acento: #6b5010;
  --tema-texto-forte: #4d3a08;
  --tema-hover-bg: rgba(0, 0, 0, .06);
  --tema-borda: rgba(0, 0, 0, .12);
}

:root[data-tema="azul-claro"] {
  /* Mesmo tom exacto da caixa "Agenda" do Início (Bootstrap .alert-info,
     confirmado por getComputedStyle: fundo #cff4fc, borda #b6effb, texto
     #055160) — pedido explícito do utilizador, em vez de uma paleta
     inventada à parte. */
  --tema-lateral: #cff4fc;
  --tema-lateral-2: #b6effb;
  --tema-acento: #055160;
  --tema-texto-forte: #055160;
  --tema-hover-bg: rgba(0, 0, 0, .06);
  --tema-borda: rgba(0, 0, 0, .12);
}

:root[data-tema="pedra"] {
  /* Cinzento-pedra claro e sóbrio, para quem trabalha de dia com muita luz. */
  --tema-lateral: #e8e6e1;
  --tema-lateral-2: #d9d6cf;
  --tema-acento: #3d3a35;
  --tema-texto-forte: #2b2824;
  --tema-hover-bg: rgba(0, 0, 0, .06);
  --tema-borda: rgba(0, 0, 0, .12);
}

:root[data-tema="verde-claro"] {
  /* Mesmo tom exacto da caixa "Aniversariante(s) do Dia" do Início
     (Bootstrap .alert-success: fundo #d1e7dd, borda #badbcc, texto
     #0f5132). */
  --tema-lateral: #d1e7dd;
  --tema-lateral-2: #badbcc;
  --tema-acento: #0f5132;
  --tema-texto-forte: #0f5132;
  --tema-hover-bg: rgba(0, 0, 0, .06);
  --tema-borda: rgba(0, 0, 0, .12);
}

/* ==========================================================================
   Skin unificado — um tema completo para todo o sistema por cada cor de
   "Aparência" (botões, links, cabeçalhos, tabelas, cartões), não só a barra
   lateral. Cada tema (excepto "Azul") reaproveita a mesma cor de acento já
   usada na barra lateral desse tema (--tema-acento-forte/--tema-lateral),
   para a barra e o resto da página ficarem sempre coerentes uma com a
   outra, com a mesma tipografia (Work Sans) da identidade nova do
   Login/Área Pública:
   - "Vinho" (predefinido, sem data-tema): a identidade do Login/Área
     Pública em si.
   - "Azul" (data-tema="azul", pedido do utilizador para não descartar o
     visual antigo): repõe o azul do Bootstrap e a tipografia simples de
     antes — o único tema que não é "novo".
   - "Verde", "Azul Claro", "Verde Claro": mesma estrutura do "Vinho", com
     acento derivado da respectiva cor de "Aparência".
   Sem ornamentos (sem rosácea/animações) de propósito — estas são páginas
   de trabalho, com tabelas e formulários densos. Estados semânticos
   (bg-success/bg-danger/bg-warning/bg-info) não são tocados em nenhum.

   "--sgc-dourado"/"--sgc-dourado-suave" são de propósito FIXOS, definidos
   só aqui (nunca dentro de um bloco "[data-tema=...]" abaixo) — o dourado é
   um acabamento constante em qualquer tema, como o ouro nos paramentos
   litúrgicos que se mantém seja qual for a cor litúrgica da época; só
   "--sgc-vinho"/"--sgc-vinho-2" (a cor principal) muda com o tema. */
:root {
  --sgc-vinho: #3a0f1c;
  --sgc-vinho-2: #4d1826;
  --sgc-dourado: #c19a5b;
  --sgc-dourado-suave: #e3c691;
  --sgc-cartao: #fffdf8;
  --sgc-linha: #e6dcc8;
  --sgc-titulo-fonte: "Work Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --sgc-botao-texto: #fbf6ec;
}
:root[data-tema="azul"] {
  --sgc-vinho: #1b6ec2;
  --sgc-vinho-2: #1861ac;
  --sgc-cartao: #ffffff;
  --sgc-linha: #dee2e6;
  --sgc-titulo-fonte: "Work Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --sgc-botao-texto: #ffffff;
}
:root[data-tema="verde"] {
  --sgc-vinho: #12362c;
  --sgc-vinho-2: #1c5142;
  --sgc-cartao: #fffdf8;
  --sgc-linha: #ddd6c0;
  --sgc-titulo-fonte: "Work Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --sgc-botao-texto: #fbf6ec;
}
/* "Skin" das cores litúrgicas (ver acima). */
:root[data-tema="roxo"] {
  --sgc-vinho: #3b1f5c;
  --sgc-vinho-2: #52307a;
  --sgc-cartao: #fffdf8;
  --sgc-linha: #ddd3e6;
  --sgc-titulo-fonte: "Work Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --sgc-botao-texto: #fbf6ec;
}
:root[data-tema="vermelho"] {
  --sgc-vinho: #6e1410;
  --sgc-vinho-2: #8c2018;
  --sgc-cartao: #fffdf8;
  --sgc-linha: #e6d3c8;
  --sgc-titulo-fonte: "Work Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --sgc-botao-texto: #fbf6ec;
}
:root[data-tema="rosa"] {
  --sgc-vinho: #8a3a63;
  --sgc-vinho-2: #a64d7b;
  --sgc-cartao: #fffdf8;
  --sgc-linha: #ecd6e1;
  --sgc-titulo-fonte: "Work Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --sgc-botao-texto: #ffffff;
}
:root[data-tema="branco"] {
  --sgc-vinho: #6b5010;
  --sgc-vinho-2: #4d3a08;
  --sgc-cartao: #fffdf8;
  --sgc-linha: #e8dcb4;
  --sgc-titulo-fonte: "Work Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --sgc-botao-texto: #ffffff;
}
:root[data-tema="azul-claro"] {
  --sgc-vinho: #055160;
  --sgc-vinho-2: #03394a;
  --sgc-cartao: #ffffff;
  --sgc-linha: #b6effb;
  --sgc-titulo-fonte: "Work Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --sgc-botao-texto: #ffffff;
}
:root[data-tema="pedra"] {
  --sgc-vinho: #4a453e;
  --sgc-vinho-2: #2f2c28;
  --sgc-cartao: #ffffff;
  --sgc-linha: #d9d6cf;
  --sgc-titulo-fonte: "Work Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --sgc-botao-texto: #ffffff;
}
:root[data-tema="verde-claro"] {
  --sgc-vinho: #0f5132;
  --sgc-vinho-2: #0a3d26;
  --sgc-cartao: #ffffff;
  --sgc-linha: #badbcc;
  --sgc-titulo-fonte: "Work Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --sgc-botao-texto: #ffffff;
}

.topbar h1 { color: var(--sgc-vinho); }
.content-body h1, .content-body h2, .content-body h3, .content-body h4,
.content-body .h1, .content-body .h2, .content-body .h3, .content-body .h4 {
  font-family: var(--sgc-titulo-fonte);
  color: var(--sgc-vinho);
}

.btn-primary {
  --bs-btn-bg: var(--sgc-vinho);
  --bs-btn-border-color: var(--sgc-vinho);
  --bs-btn-hover-bg: var(--sgc-vinho-2);
  --bs-btn-hover-border-color: var(--sgc-vinho-2);
  --bs-btn-active-bg: var(--sgc-vinho-2);
  --bs-btn-active-border-color: var(--sgc-vinho-2);
  --bs-btn-color: var(--sgc-botao-texto);
  --bs-btn-hover-color: var(--sgc-botao-texto);
  --bs-btn-active-color: var(--sgc-botao-texto);
}
.btn-outline-primary {
  --bs-btn-color: var(--sgc-vinho);
  --bs-btn-border-color: var(--sgc-linha);
  --bs-btn-hover-bg: var(--sgc-vinho);
  --bs-btn-hover-border-color: var(--sgc-vinho);
  --bs-btn-hover-color: var(--sgc-botao-texto);
}
/* Bootstrap 5.1 não lê as variáveis --bs-btn-*: cores aplicadas directamente. */
.btn-primary {
  background-color: var(--sgc-vinho);
  border-color: var(--sgc-vinho);
  color: var(--sgc-botao-texto);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {
  background-color: var(--sgc-vinho-2);
  border-color: var(--sgc-vinho-2);
  color: var(--sgc-botao-texto);
}
.btn-primary:focus { box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--sgc-vinho) 35%, transparent); }
.btn-primary:disabled, .btn-primary.disabled {
  background-color: var(--sgc-vinho);
  border-color: var(--sgc-vinho);
}
.btn-outline-primary {
  color: var(--sgc-vinho);
  border-color: var(--sgc-vinho);
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
  background-color: var(--sgc-vinho);
  border-color: var(--sgc-vinho);
  color: var(--sgc-botao-texto);
}
.badge.bg-primary, .bg-primary { background-color: var(--sgc-vinho) !important; }
.text-primary { color: var(--sgc-vinho) !important; }

.content-body a, .topbar a { color: var(--sgc-vinho-2); }
.content-body a:hover, .topbar a:hover { color: var(--sgc-vinho); }
/* Ligações que são botões: a regra das ligações (acima) não pode apagar o texto do botão. */
.content-body a.btn-primary, .content-body a.btn-primary:hover, .content-body a.btn-primary:focus,
.topbar a.btn-primary, .topbar a.btn-primary:hover {
  color: var(--sgc-botao-texto);
}
.content-body a.btn-outline-primary { color: var(--sgc-vinho); }
.content-body a.btn-outline-primary:hover, .content-body a.btn-outline-primary:focus {
  color: var(--sgc-botao-texto);
}

.content-body .form-control:focus, .content-body .form-select:focus {
  border-color: var(--sgc-dourado);
}

.content-body .card { border-top: 3px solid var(--sgc-dourado); }

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  background-color: var(--sgc-vinho);
  border-color: var(--sgc-vinho);
}
.pagination .page-item.active .page-link {
  background-color: var(--sgc-vinho);
  border-color: var(--sgc-vinho);
}

/* Barras superior e inferior estáticas: o "app-shell" ocupa exactamente a
   altura do ecrã e não gera scroll próprio — só ".content-body" (a área
   entre a barra lateral e as barras superior/inferior) é que desloca,
   mantendo o menu, o cabeçalho e o rodapé sempre visíveis. */
.app-shell {
  display: flex;
  align-items: stretch;
  height: 100vh;
  overflow: hidden;
}

/* ---------- Barra lateral ---------- */
.sidebar {
  width: 250px;
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  /* position:sticky cria sempre o seu próprio contexto de empilhamento —
     sem um z-index aqui, o painel flutuante do menu recolhido (ver
     ".sidebar.colapsada .grupo-nav:hover > .sub-lista" abaixo) fica preso
     dentro desse contexto e nunca consegue aparecer por cima do conteúdo
     principal, por mais alto que seja o SEU PRÓPRIO z-index. Bem abaixo dos
     modais do Bootstrap (1040+), para nunca competir com eles. */
  z-index: 20;
  align-self: flex-start;
  height: 100vh;
  overflow: hidden;
  background: var(--tema-lateral);
  color: var(--tema-acento);
  display: flex;
  flex-direction: column;
  font-family: "Work Sans", -apple-system, "Segoe UI", sans-serif;
  transition: width .2s ease;
}

.sidebar::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--tema-lateral) 90%, transparent), color-mix(in srgb, var(--tema-lateral) 95%, transparent)),
    var(--sgc-fundo-menu, none) center/cover no-repeat;
}

.sidebar.colapsada { width: 60px; }
.sidebar.colapsada .rotulo,
.sidebar.colapsada .brand-text,
.sidebar.colapsada .user-text,
.sidebar.colapsada .chevron { display: none; }
.sidebar.colapsada .grupo-btn { justify-content: center; }
.sidebar.colapsada .sidebar-topo { justify-content: center; padding-inline: .5rem; }
.sidebar.colapsada .btn-colapsar { margin-left: 0; }

/* Menu recolhido (só ícones): sem isto, um submenu (Configurações,
   Catequizandos, etc.) ficava completamente inacessível — não havia forma
   nenhuma de lá chegar. Passa a aparecer como painel flutuante à direita do
   ícone, só ao CLICAR (".flyout-visivel", ligada/desligada em JS) — nunca ao
   passar o rato nem ao simplesmente estar numa página desse grupo (".aberto"
   é para o acordeão do menu expandido; usá-la aqui também fazia o painel
   reaparecer sozinho, tapando o conteúdo, sempre que se navegava para
   qualquer página dentro do grupo). position:fixed em vez de absolute
   porque ".nav-scroll" tem overflow-x:hidden, que cortaria um painel apenas
   posicionado de forma absoluta — o topo/esquerda exactos são calculados em
   JS (ver site.js), já que fixed não se ancora sozinho ao botão como
   absolute ancorava. */
.sidebar.colapsada .sub-lista { display: none; }
.sidebar.colapsada .grupo-nav.flyout-visivel > .sub-lista {
  display: flex;
  position: fixed;
  min-width: 230px;
  max-width: 300px;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: .5rem 0;
  margin: 0;
  background: var(--tema-lateral);
  border: 1px solid var(--tema-borda);
  border-radius: 0 10px 10px 0;
  box-shadow: 6px 6px 20px rgba(0, 0, 0, .3);
  z-index: 60;
}

.sidebar-topo, .nav-scroll, .sidebar-rodape { position: relative; z-index: 1; }

.sidebar-topo {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: 1rem;
  border-bottom: 1px solid var(--tema-borda);
  flex: none;
}

.sidebar-marca {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex: 1 1 auto;
  min-width: 0;
  text-decoration: none;
  border-radius: 8px;
  padding: .2rem;
  margin: -.2rem;
}
.sidebar-marca:hover .brasao, .sidebar-marca.activo .brasao { border-color: var(--tema-texto-forte); }
.sidebar.colapsada .sidebar-marca { flex: none; }

.brasao {
  width: 34px; height: 34px; flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--tema-acento-forte);
  display: flex; align-items: center; justify-content: center;
  background: var(--tema-hover-bg);
  overflow: hidden;
}
.brasao svg { width: 18px; height: 18px; stroke: var(--tema-acento-forte); }
.brasao img { width: 100%; height: 100%; object-fit: cover; }

.brand-text { min-width: 0; }
.brand-name {
  font-family: "Work Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.05;
  color: var(--tema-texto-forte);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-sub {
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tema-acento);
  opacity: .8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-colapsar {
  margin-left: auto;
  background: none; border: none; color: var(--tema-acento);
  opacity: .7; cursor: pointer; padding: .25rem; line-height: 0;
}
.btn-colapsar:hover { opacity: 1; }
.btn-colapsar svg { width: 18px; height: 18px; display: block; }

.nav-scroll { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: .55rem; }
.grupo-nav { margin-bottom: .1rem; }

/* Separador discreto entre a secção pastoral (Catequistas/Catequizandos/
   Sacramentos) e a administrativa do menu — uma cruz pequena entre duas
   linhas finas, na cor de acento do tema (nunca chapada, só um toque). */
.separador-menu {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: .5rem .4rem .65rem;
  color: var(--tema-acento-forte);
  opacity: .5;
}
.separador-menu .separador-linha { flex: 1 1 auto; height: 1px; background: currentColor; }
.separador-menu svg { width: 12px; height: 12px; flex: none; }
.sidebar.colapsada .separador-menu { justify-content: center; margin-inline: 0; }
.sidebar.colapsada .separador-menu .separador-linha { display: none; }

.grupo-btn {
  width: 100%;
  display: flex; align-items: center; gap: .6rem;
  background: none; border: none;
  color: var(--tema-acento);
  padding: .48rem .55rem;
  border-radius: 4px;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .01em;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  border-left: 2px solid transparent;
}
.grupo-btn .icone { flex: none; width: 16px; height: 16px; stroke: currentColor; opacity: .92; }
.grupo-btn .rotulo { overflow: hidden; text-overflow: ellipsis; }
.grupo-btn .chevron { margin-left: auto; width: 11px; height: 11px; stroke: currentColor; opacity: .55; transition: transform .18s ease; flex: none; }
.grupo-btn:hover { background: var(--tema-hover-bg); color: var(--tema-texto-forte); }
.grupo-nav.aberto > .grupo-btn { background: var(--tema-lateral-2); color: var(--tema-texto-forte); border-left-color: var(--tema-acento-forte); }
.grupo-nav.aberto > .grupo-btn .chevron { transform: rotate(90deg); }
.grupo-nav.activo > .grupo-btn { border-left-color: var(--tema-acento-forte); color: var(--tema-texto-forte); }

.sub-lista {
  list-style: none; margin: 0; padding: .15rem 0 .45rem 2.05rem;
  display: flex; flex-direction: column; gap: .05rem;
}
.grupo-nav:not(.aberto) .sub-lista { display: none; }
.sub-lista a {
  display: block;
  color: var(--tema-acento);
  opacity: .82;
  text-decoration: none;
  font-size: .76rem;
  padding: .3rem .5rem;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sub-lista a:hover { opacity: 1; background: var(--tema-hover-bg); color: var(--tema-texto-forte); }
.sub-lista a.item-activo {
  opacity: 1; color: var(--tema-texto-forte); font-weight: 600;
  background: var(--tema-lateral-2);
  box-shadow: inset 3px 0 0 var(--tema-acento-forte);
}
/* Separador fino dentro de uma sub-lista — ex.: entre os relatórios "clássicos" e os
   antigos "Geração de Documentos" movidos para aqui (ver _Layout.cshtml). */
.sub-lista-separador { height: 1px; margin: .3rem .5rem; background: currentColor; opacity: .18; }

/* Sub-grupo (2º nível) dentro de um grupo — ex.: "Presenças"/"Gestão Catequética"
   dentro de "Catequizandos". Reaproveita as cores de .sub-lista, só mais recuado. */
.sub-grupo-btn {
  width: 100%;
  display: flex; align-items: center; gap: .5rem;
  background: none; border: none;
  color: var(--tema-acento);
  opacity: .82;
  padding: .3rem .5rem;
  border-radius: 4px;
  font-size: .76rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
}
.sub-grupo-btn .chevron { margin-left: auto; width: 10px; height: 10px; stroke: currentColor; opacity: .55; transition: transform .18s ease; flex: none; }
.sub-grupo-btn:hover { opacity: 1; background: var(--tema-hover-bg); color: var(--tema-texto-forte); }
.sub-grupo.aberto > .sub-grupo-btn { opacity: 1; color: var(--tema-texto-forte); }
.sub-grupo.aberto > .sub-grupo-btn .chevron { transform: rotate(90deg); }

.sub-sub-lista {
  list-style: none; margin: 0; padding: .1rem 0 .3rem 1rem;
  display: flex; flex-direction: column; gap: .05rem;
}
.sub-grupo:not(.aberto) .sub-sub-lista { display: none; }
.sub-sub-lista a {
  display: block;
  color: var(--tema-acento);
  opacity: .78;
  text-decoration: none;
  font-size: .74rem;
  padding: .28rem .5rem;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sub-sub-lista a:hover { opacity: 1; background: var(--tema-hover-bg); color: var(--tema-texto-forte); }
.sub-sub-lista a.item-activo {
  opacity: 1; color: var(--tema-texto-forte); font-weight: 600;
  background: var(--tema-lateral-2);
  box-shadow: inset 3px 0 0 var(--tema-acento-forte);
}

.sidebar-rodape {
  border-top: 1px solid var(--tema-borda);
  padding: .7rem .8rem;
  display: flex; align-items: center; gap: .55rem;
  flex: none;
}
.avatar-user {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--tema-acento-forte);
  color: var(--tema-texto-sobre-dourado);
  display: flex; align-items: center; justify-content: center;
  font-family: "Work Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  font-weight: 600; font-size: .9rem;
  overflow: hidden;
}
.avatar-user img { width: 100%; height: 100%; object-fit: cover; }
.user-text { min-width: 0; }
.user-nome { font-size: .78rem; font-weight: 600; color: var(--tema-texto-forte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-cargo { font-size: .66rem; color: var(--tema-acento); opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link-sair { margin-left: auto; flex: none; color: var(--tema-acento); opacity: .7; display: flex; }
.link-sair svg { width: 15px; height: 15px; stroke: currentColor; display: block; }
.link-sair:hover { opacity: 1; }
.link-sair button { background: none; border: none; padding: 0; color: inherit; cursor: pointer; display: flex; }

/* ---------- Área de conteúdo ---------- */
.conteudo-app { flex: 1 1 auto; min-width: 0; height: 100%; display: flex; flex-direction: column; overflow: hidden; }

.topbar {
  flex: none;
  display: flex; align-items: center; gap: 1.1rem;
  padding: .4rem 1.5rem;
  border-bottom: 1px solid var(--sgc-border);
  background: #fff;
  font-family: "Work Sans", -apple-system, "Segoe UI", sans-serif;
}

/* Botão "hambúrguer" — só existe visualmente em ecrãs estreitos (ver media
   query mais abaixo); em desktop a barra lateral já está sempre visível,
   por isso fica escondido por omissão. */
.btn-menu-mobile {
  display: none;
  flex: none;
  width: 32px; height: 32px; border-radius: 5px;
  border: 1px solid transparent; background: none;
  align-items: center; justify-content: center;
  cursor: pointer; color: var(--sgc-text-muted);
}
.btn-menu-mobile svg { width: 18px; height: 18px; stroke: currentColor; }
.btn-menu-mobile:hover { background: var(--sgc-surface); border-color: var(--sgc-border); color: #212529; }

/* Fundo escurecido atrás da barra lateral quando esta desliza como
   sobreposição em ecrãs estreitos — clicar nele fecha o menu. */
.sidebar-fundo-mobile {
  display: none;
  position: fixed; inset: 0;
  background: rgba(20, 10, 6, .45);
  z-index: 1055;
}
.topbar-crumbs { display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
.crumb-paroquia { font-size: .66rem; letter-spacing: .07em; text-transform: uppercase; color: var(--sgc-text-muted); white-space: nowrap; }
.crumb-sep { color: var(--sgc-border); font-size: .8rem; }
.crumb-icone { width: 18px; height: 18px; flex: none; stroke: var(--sgc-vinho); align-self: center; }
.topbar h1 {
  font-family: "Work Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  font-size: 1.25rem; font-weight: 600; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.topbar-busca {
  flex: 1 1 auto; max-width: 320px; min-width: 0; position: relative;
  display: flex; align-items: center; gap: .5rem;
  background: var(--sgc-surface); border: 1px solid var(--sgc-border); border-radius: 5px;
  padding: .38rem .6rem;
}
.topbar-busca svg { width: 14px; height: 14px; stroke: var(--sgc-text-muted); flex: none; }
.topbar-busca input { border: none; background: none; outline: none; font: inherit; font-size: .8rem; width: 100%; min-width: 0; }
.topbar-busca input::placeholder { color: var(--sgc-text-muted); }

.busca-resultados {
  display: none; position: absolute; top: calc(100% + .4rem); left: 0; right: 0;
  background: #fff; border: 1px solid var(--sgc-border); border-radius: 6px;
  box-shadow: 0 14px 30px -18px rgba(20, 10, 6, .45);
  max-height: 320px; overflow-y: auto; z-index: 40;
}
.busca-resultados.aberto { display: block; }
.busca-resultados a {
  display: flex; justify-content: space-between; gap: .5rem;
  padding: .5rem .7rem; font-size: .82rem; color: #212529; text-decoration: none;
  border-bottom: 1px solid var(--sgc-border);
}
.busca-resultados a:last-child { border-bottom: none; }
.busca-resultados a:hover { background: var(--sgc-surface); }
.busca-resultados .tipo { font-size: .68rem; color: var(--sgc-text-muted); white-space: nowrap; }
.busca-resultados .vazio { padding: .6rem .7rem; font-size: .8rem; color: var(--sgc-text-muted); }

.topbar-acoes { display: flex; align-items: center; gap: .25rem; margin-left: auto; flex: none; }
.topbar-item { position: relative; }
.topbar-icone {
  position: relative; width: 27px; height: 27px; border-radius: 5px;
  border: 1px solid transparent; background: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--sgc-text-muted);
}
.topbar-icone svg { width: 14px; height: 14px; stroke: currentColor; }
.topbar-icone:hover { background: var(--sgc-surface); border-color: var(--sgc-border); color: #212529; }
.topbar-item.aberto .topbar-icone { background: var(--sgc-surface); border-color: var(--sgc-border); color: #212529; }
.badge {
  position: absolute; top: 0; right: 0; min-width: 13px; height: 13px; padding: 0 3px;
  border-radius: 7px; background: var(--tema-acento-forte); color: var(--tema-texto-sobre-dourado);
  font-size: .58rem; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1;
}
/* O ".badge" de cima é o selo minúsculo da campainha do topo (posição absoluta). Dentro de páginas com selos normais (ex.: Painel das Paróquias, «Estado», «pronto»)
   volta ao aspecto de selo de texto, em linha. */
.selos-normais .badge {
  position: static; display: inline-block; min-width: 0; height: auto; padding: .3em .55em;
  border-radius: .375rem; font-size: .72rem; font-weight: 700; line-height: 1; vertical-align: baseline;
}

.painel-drop {
  display: none; position: absolute; top: calc(100% + .5rem); right: 0; min-width: 235px;
  background: #fff; border: 1px solid var(--sgc-border); border-radius: 6px;
  box-shadow: 0 14px 30px -18px rgba(20, 10, 6, .45); padding: .8rem; z-index: 40;
}
.topbar-item.aberto .painel-drop { display: block; }
.painel-drop h4 { margin: 0 0 .55rem; font-size: .66rem; letter-spacing: .09em; text-transform: uppercase; color: var(--sgc-text-muted); font-weight: 600; }
.painel-linha { font-size: .8rem; padding: .3rem 0; border-bottom: 1px solid var(--sgc-border); display: flex; justify-content: space-between; gap: .5rem; }
.painel-linha:last-child { border-bottom: none; }
.painel-linha-tag { font-size: .66rem; color: var(--sgc-text-muted); white-space: nowrap; }
.painel-msg { display: block; }
.painel-msg .painel-msg-texto { display: block; margin: .15rem 0; white-space: pre-line; overflow-wrap: anywhere; }
.painel-msg .painel-linha-tag { display: block; white-space: normal; }
.painel-linha-aviso {
  flex-direction: column; align-items: flex-start; gap: .3rem;
  background: #fff8e6; border: 1px solid #f3d99a; border-radius: 5px;
  padding: .5rem .6rem; margin-bottom: .4rem; color: #7a5b00;
}
.painel-linha-aviso a { font-weight: 600; }


/* Painéis "Aniversariante(s) do Dia"/"Agenda" do Início — deliberadamente
   NÃO usam ".alert-success"/".alert-info" (verde/azul do Bootstrap, que
   destoam da paleta vinho/dourado do resto do site): estas duas caixas são
   conteúdo informativo, não uma mensagem de sucesso/erro de uma acção, por
   isso ganham a mesma linguagem visual dos cartões (borda dourada no topo,
   texto em vinho) em vez de inventar uma paleta à parte. As mensagens reais
   de sucesso/erro (".alert-success"/".alert-danger" nas restantes páginas)
   ficam de propósito como estão — mudar essas teria impacto em todo o
   site, para além do âmbito daqui. */
.alert-inicio {
  background: #fff;
  border: 1px solid var(--sgc-border);
  border-top: 3px solid var(--sgc-dourado);
  color: var(--sgc-vinho);
}
.alert-inicio-cabecalho { display: flex; align-items: center; gap: .5rem; }
.alert-inicio-icone { width: 18px; height: 18px; flex: none; stroke: var(--sgc-vinho); }

/* Mostrar/ocultar senha — usado em qualquer campo de senha da aplicação
   (Login, Redefinir Senha, Editar Perfil, Identidade Paroquial/email). Um
   único botão com 2 SVGs sobrepostos (olho / olho cortado); a classe
   ".a-mostrar" (posta pelo JS em site.js) escolhe qual se vê — sem re-criar
   ícones a cada clique. Site.css é carregado tanto por "_Layout" como por
   "_LayoutAcesso" (ecrã de login), por isso serve os dois. */
.campo-senha { position: relative; }
.campo-senha input { padding-right: 2.35rem; }
.botao-mostrar-senha {
  position: absolute; top: 50%; right: .45rem; transform: translateY(-50%);
  width: 26px; height: 26px; border: none; background: none; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--sgc-text-muted); cursor: pointer;
}
.botao-mostrar-senha svg { width: 17px; height: 17px; stroke: currentColor; flex: none; }
.botao-mostrar-senha .icone-olho-cortado { display: none; }
.botao-mostrar-senha.a-mostrar .icone-olho { display: none; }
.botao-mostrar-senha.a-mostrar .icone-olho-cortado { display: block; }
.botao-mostrar-senha:hover { color: var(--sgc-vinho); }

.painel-aparencia { min-width: 250px; }
.campo { margin-bottom: .85rem; }
.campo:last-child { margin-bottom: 0; }
.campo-label { display: block; font-size: .7rem; color: var(--sgc-text-muted); margin-bottom: .35rem; }
.temas-swatches { display: flex; gap: .5rem; }
.tema-swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
/* Tema em uso: anel branco + anel escuro por fora, visível em qualquer cor (a borda
   escura sozinha desaparecia nos swatches escuros). */
.tema-swatch.activo { border-color: #fff; box-shadow: 0 0 0 2px #212529; transform: scale(1.12); }
.temas-swatches { flex-wrap: wrap; }
.tema-swatch-claro:not(.activo) { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.tema-auto { display: flex; gap: .45rem; align-items: flex-start; margin-top: .6rem; font-size: .8rem; line-height: 1.3; cursor: pointer; }
.tema-auto input { margin-top: .15rem; }

/* Sugestão de mudar o tema para a cor do tempo litúrgico */
.tema-sugestao {
  position: fixed;
  right: 1rem;
  bottom: 4rem;
  z-index: 1080;
  max-width: 21rem;
  padding: .8rem 1rem;
  background: var(--sgc-cartao, #fff);
  color: #2b2118;
  border: 1px solid var(--sgc-linha, #ddd);
  border-left: 5px solid var(--cor-liturgica-dia, #c19a5b);
  border-radius: .5rem;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .2);
  font-size: .86rem;
}
.tema-sugestao p { margin: 0 0 .6rem; }
.tema-sugestao .tema-sugestao-botoes { display: flex; gap: .5rem; justify-content: flex-end; }

.fundo-controlo { display: flex; align-items: center; gap: .55rem; }
.fundo-preview { width: 40px; height: 40px; border-radius: 6px; background: var(--sgc-surface); border: 1px dashed var(--sgc-border); background-size: cover; background-position: center; flex: none; }
.fundo-botoes { display: flex; flex-direction: column; gap: .3rem; }
.btn-mini { font-size: .7rem; padding: .28rem .5rem; border-radius: 4px; border: 1px solid var(--sgc-border); background: var(--sgc-surface); cursor: pointer; text-align: center; }
.btn-mini:hover { border-color: var(--tema-acento-forte); }
.btn-mini-remover { color: #a3372c; border-color: transparent; background: none; text-align: left; padding-left: 0; }
.campo-ajuda { font-size: .66rem; color: var(--sgc-text-muted); margin: .45rem 0 0; line-height: 1.4; }

/* Botão de Ajuda do rodapé — mesmo padrão de ".topbar-item[data-painel]" já
   usado em "Aparência" (a mesma lógica em site.js já os liga aos dois, sem
   precisar de nada novo em JS), só que o painel abre para CIMA em vez de
   para baixo — está no rodapé, "para baixo" saía do ecrã. Substituiu o
   relógio (a barra de tarefas do Windows já mostra data/hora, redundante). */
.rodape-ajuda { position: relative; flex: none; }
.rodape-ajuda .painel-drop { top: auto; bottom: calc(100% + .5rem); right: 0; }
.painel-ajuda { min-width: 280px; }
.painel-ajuda ul { margin: 0 0 .6rem; padding-left: 1.1rem; font-size: .78rem; line-height: 1.5; color: #3a332c; }
.painel-ajuda li { margin-bottom: .4rem; }
.painel-ajuda a { font-size: .78rem; font-weight: 600; }

/* Gráfico de barras em CSS puro (sem biblioteca de gráficos) — usado nos
   Relatórios para dar uma leitura visual rápida antes da tabela com os
   números exactos. Só divs com largura em % (calculada no Razor), por isso
   imprime exactamente como aparece no ecrã, sem depender de canvas/SVG
   gerado por JS (que a função "Imprimir/PDF" do relatório, à parte, nem
   sequer carrega). */
.grafico-barras { display: flex; flex-direction: column; gap: .5rem; margin: .75rem 0 1.5rem; }
.grafico-barras-linha { display: grid; grid-template-columns: 8rem 1fr 3.4rem; align-items: center; gap: .6rem; font-size: .82rem; }
.grafico-barras-rotulo { color: var(--sgc-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grafico-barras-trilho { background: var(--sgc-surface); border-radius: 4px; height: 14px; overflow: hidden; }
.grafico-barras-preenchimento { height: 100%; background: linear-gradient(90deg, var(--sgc-vinho-2), var(--sgc-vinho)); border-radius: 4px; }
.grafico-barras-valor { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--sgc-vinho); white-space: nowrap; }

.tabela-filtro-colunas thead .linha-filtros th { padding-top: .3rem; padding-bottom: .3rem; background: none; }
.tabela-filtro-colunas thead .linha-filtros input {
  width: 100%; font-size: .78rem; font-weight: 400; padding: .25rem .45rem;
  border: 1px solid var(--sgc-border); border-radius: 4px;
}
.tabela-filtro-colunas thead .linha-filtros input::placeholder { color: var(--sgc-text-muted); }

/* Checkbox de selecção sobre uma miniatura (Galeria de Fotos) — um "selo" com fundo
   branco por trás do checkbox, em vez de pintar o próprio checkbox de branco
   (isso escondia a marca de seleccionado: a classe utilitária "bg-white" do
   Bootstrap usa !important e sobrepunha-se à cor de fundo que o próprio Bootstrap
   usa para mostrar um checkbox marcado). */
.selo-check-foto {
  position: absolute; top: .4rem; left: .4rem; z-index: 2;
  background: rgba(255, 255, 255, .9); border-radius: 5px;
  padding: .2rem; line-height: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.selo-check-foto input.check-foto { width: 1.2rem; height: 1.2rem; margin: 0; }

.topbar-galeria {
  display: flex; align-items: center; gap: .4rem; padding: .35rem .65rem;
  border-radius: 5px; border: 1px solid transparent; color: var(--sgc-text-muted);
  font-size: .8rem; white-space: nowrap; text-decoration: none;
}
.topbar-galeria svg { width: 16px; height: 16px; stroke: currentColor; flex: none; }
.topbar-galeria:hover { background: var(--sgc-surface); border-color: var(--sgc-border); color: #212529; }
@media (max-width: 767.98px) {
  .topbar-galeria span { display: none; }
  .topbar-galeria { padding: .35rem; }
}

.content-body { padding: 1.6rem 1.9rem; flex: 1 1 auto; min-height: 0; overflow-y: auto; }

@media (max-width: 767.98px) {
  .topbar-crumbs .crumb-paroquia { display: none; }
  .topbar-busca { max-width: 160px; }
  .content-body { padding: 1.1rem 1rem; }

  /* Barra lateral: em vez de ficar sempre lado a lado (espremendo o
     conteúdo, como acontecia antes), passa a ficar escondida fora do ecrã
     por omissão e desliza como sobreposição ao abrir pelo botão
     "hambúrguer" da barra superior (ver ".btn-menu-mobile" acima e
     "menu-mobile-aberto" no <body>, controlado por site.js). */
  .btn-menu-mobile { display: inline-flex; }
  .btn-colapsar { display: none; }

  .sidebar {
    position: fixed;
    top: 0; left: 0;
    z-index: 1060;
    width: 250px;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 10px 0 30px -12px rgba(20, 10, 6, .5);
  }

  body.menu-mobile-aberto .sidebar { transform: translateX(0); }
  body.menu-mobile-aberto .sidebar-fundo-mobile { display: block; }

  /* Sem a barra lateral a ocupar espaço no fluxo (agora "fixed"), a área de
     conteúdo passa a ocupar sempre a largura toda do ecrã. */
  .conteudo-app { width: 100%; }
}

/* ---------- Cabeçalho mínimo (páginas sem sessão — Login, etc.) ---------- */
.topo-minimo {
  padding: .85rem 1.5rem;
  background: var(--tema-lateral);
  color: var(--tema-texto-forte);
  font-family: "Work Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
}

/* Sino «Receber avisos» no topo (perfil de catequista): normal quando activo; com uma barra vermelha quando os avisos estão desligados neste aparelho. */
.sino-topo .sino-barra { display: none; position: absolute; left: 50%; top: 50%; width: 20px; height: 2px; border-radius: 2px; background: #c62828; transform: translate(-50%, -50%) rotate(-45deg); pointer-events: none; }
.sino-topo[data-activo="0"] .sino-barra { display: block; }
.sino-topo[data-activo="1"] { color: var(--sgc-text, #212529); }
.receber-avisos-toast { position: fixed; right: 1rem; bottom: 3rem; z-index: 3000; max-width: 22rem; padding: .6rem .9rem; border-radius: .5rem; background: #2b2b2b; color: #fff; font-size: .85rem; box-shadow: 0 .4rem 1.2rem rgba(0,0,0,.3); }