/* Boas-vindas, painel de Início, gráficos, presenças e finanças — 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. */
/* ==========================================================================
   Boas-vindas — equivalente Web de Formularios\frm_Bemvindo.vb: um ecrã
   decorativo mostrado uma única vez a seguir ao login, antes de revelar o
   painel principal (sem operação real a decorrer, tal como no Desktop).
   Usa as variáveis "--sgc-*" (Skin unificado, mais abaixo neste ficheiro) em
   vez de "--tema-*" (só a barra lateral) — para acompanhar sempre o mesmo
   tema escolhido em Aparência em todo o sistema, com a mesma tipografia
   serifada dos títulos do resto da aplicação.
   ========================================================================== */
#boasVindasOverlay {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 10, 12, .55);
  backdrop-filter: blur(2px);
  cursor: pointer;
  transition: opacity .4s ease;
}

#boasVindasOverlay.a-desaparecer {
  opacity: 0;
}

#boasVindasOverlay .boas-vindas-cartao {
  width: min(30rem, 90vw);
  border-radius: 1rem;
  overflow: hidden;
  background: linear-gradient(165deg, var(--sgc-vinho), var(--sgc-vinho-2));
  box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .55);
  cursor: default;
}

#boasVindasOverlay .boas-vindas-cabecalho {
  padding: .9rem 1.5rem;
  text-align: center;
  background: color-mix(in srgb, var(--sgc-vinho) 55%, black 15%);
  border-bottom: 1px solid color-mix(in srgb, var(--sgc-dourado) 45%, transparent);
}

#boasVindasOverlay .boas-vindas-sistema {
  margin: 0;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sgc-dourado, #c19a5b);
}

#boasVindasOverlay .boas-vindas-paroquia {
  margin: .2rem 0 0;
  font-size: .95rem;
  font-family: var(--sgc-titulo-fonte);
  font-weight: 600;
  letter-spacing: .02em;
  color: #fbf6ec;
}

#boasVindasOverlay .boas-vindas-corpo {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.75rem 1.75rem 1.1rem;
}

#boasVindasOverlay .boas-vindas-foto-wrap {
  flex: none;
  position: relative;
  width: 6rem;
  height: 6rem;
}

#boasVindasOverlay img,
#boasVindasOverlay .boas-vindas-sem-foto {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid color-mix(in srgb, var(--sgc-dourado) 70%, transparent);
  background-color: color-mix(in srgb, #fbf6ec 12%, transparent);
  box-shadow: 0 8px 28px -10px rgba(0, 0, 0, .5);
}

#boasVindasOverlay .boas-vindas-sem-foto svg {
  width: 2.6rem;
  height: 2.6rem;
  stroke: var(--sgc-dourado-suave, #e3c691);
  opacity: .85;
}

#boasVindasOverlay .boas-vindas-texto {
  min-width: 0;
}

#boasVindasOverlay .boas-vindas-rotulo {
  margin: 0;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sgc-dourado-suave, rgba(251, 246, 236, .75));
}

#boasVindasOverlay .boas-vindas-nome {
  margin: .15rem 0 0;
  font-family: var(--sgc-titulo-fonte);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.15;
  color: #fbf6ec;
  overflow-wrap: break-word;
}

#boasVindasOverlay .boas-vindas-funcao {
  margin: .3rem 0 0;
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sgc-dourado, #c19a5b);
}

#boasVindasOverlay .boas-vindas-medidor {
  position: relative;
  margin: 0 auto;
  padding-bottom: 1.5rem;
  width: 12rem;
}

#boasVindasOverlay .boas-vindas-arco {
  display: block;
  width: 100%;
  overflow: visible;
}

#boasVindasOverlay .boas-vindas-arco-fundo,
#boasVindasOverlay .boas-vindas-arco-progresso {
  fill: none;
  stroke-width: 10;
  stroke-linecap: round;
}

#boasVindasOverlay .boas-vindas-arco-fundo {
  stroke: color-mix(in srgb, #fbf6ec 18%, transparent);
}

#boasVindasOverlay .boas-vindas-arco-progresso {
  stroke: var(--sgc-dourado, #c19a5b);
  transition: stroke-dashoffset .1s linear;
}

#boasVindasOverlay .boas-vindas-percentagem {
  position: absolute;
  left: 0;
  right: 0;
  bottom: .1rem;
  text-align: center;
  font-family: var(--sgc-titulo-fonte);
  font-weight: 700;
  font-size: 1.6rem;
  color: #fbf6ec;
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   Painel de Início — cartões de resumo (KPI), tendência e barras por fase.
   Só SVG/CSS (sem bibliotecas, funciona offline). A cor de destaque segue o
   tema activo (--sgc-vinho muda com o tema); texto sempre na cor normal, nunca
   na cor da série; a direcção das variações vai com seta + sinal, não só cor.
   ========================================================================== */
.painel-inicio {
  margin-bottom: 1.5rem;
}

.painel-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .75rem;
}

.painel-titulo {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
}

.painel-ano {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.painel-ano-rotulo {
  font-size: .9rem;
  color: var(--sgc-text-muted, #55483d);
}

.painel-ano .form-select {
  width: auto;
  min-width: 6rem;
}

.painel-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  gap: .9rem;
  margin-bottom: 1rem;
}

.painel-kpi,
.painel-cartao {
  background: var(--sgc-cartao, #fff);
  border: 1px solid var(--sgc-linha, #dee2e6);
  border-radius: .6rem;
  padding: .9rem 1rem;
}

.painel-kpi-rotulo {
  font-size: .9rem;
  color: var(--sgc-text-muted, #55483d);
}

.painel-kpi-valor {
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1.15;
  margin: .1rem 0 .2rem;
}

.painel-kpi-delta {
  font-size: .85rem;
  font-weight: 500;
}

.painel-delta-bom { color: #1a7f4b; }
.painel-delta-mau { color: #b42318; }
.painel-delta-neutro { color: var(--sgc-text-muted, #55483d); }

.painel-spark {
  display: block;
  margin-top: .45rem;
  max-width: 100%;
  overflow: visible;
}

.painel-spark-linha {
  stroke: var(--sgc-text-muted, #55483d);
  stroke-opacity: .55;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.painel-spark-actual {
  fill: var(--sgc-vinho, #3a0f1c);
  stroke: var(--sgc-cartao, #fff);
  stroke-width: 2;
}

.painel-medidor {
  height: .55rem;
  margin-top: .55rem;
  border-radius: .3rem;
  background: rgba(0, 0, 0, .09);
  background: color-mix(in srgb, var(--sgc-vinho, #3a0f1c) 16%, transparent);
  overflow: hidden;
}

.painel-medidor > span {
  display: block;
  height: 100%;
  border-radius: .3rem;
  background: var(--sgc-vinho, #3a0f1c);
}

.painel-subtitulo {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 .6rem;
}

.painel-barras {
  display: grid;
  row-gap: .3rem;
}

.painel-barra-linha {
  display: grid;
  grid-template-columns: minmax(4.5rem, 38%) minmax(2rem, 1fr) auto;
  column-gap: .6rem;
  align-items: center;
}

.painel-barra-rotulo {
  font-size: .9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.painel-barra-pista {
  display: block;
  height: 1rem;
}

.painel-barra {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: 0 4px 4px 0;
  background: var(--sgc-vinho, #3a0f1c);
}

.painel-barra-valor {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 1.8rem;
}

.painel-tabela-alt {
  margin-top: .75rem;
  font-size: .9rem;
}

.painel-tabela-alt > summary {
  cursor: pointer;
  color: var(--sgc-text-muted, #55483d);
}

@media (max-width: 575.98px) {
  .painel-kpi-valor { font-size: 1.9rem; }
  .painel-barra-linha { grid-template-columns: minmax(4rem, 38%) minmax(2rem, 1fr) auto; }
}


/* ==========================================================================
   Gráficos das Estatísticas (HTML/CSS, sem bibliotecas). Cores das séries FIXAS
   por entidade (nunca por posição): azul = 1, laranja = 2, verde-água = 3; cinzento
   = "sem resultado" (esbatido, não é uma série). Validadas como paleta categórica;
   cada série tem também legenda e título no hover, nunca só cor.
   ========================================================================== */
:root {
  --serie-1: #2a78d6;
  --serie-2: #eb6834;
  --serie-3: #1baf7a;
  --serie-neutra: #b9b4ab;
}

.graf-cartao {
  background: var(--sgc-cartao, #fff);
  border: 1px solid var(--sgc-linha, #dee2e6);
  border-radius: .6rem;
  padding: .9rem 1rem;
}

.graf-s0 { background: var(--serie-neutra); }
.graf-s1 { background: var(--serie-1); }
.graf-s2 { background: var(--serie-2); }
.graf-s3 { background: var(--serie-3); }

.graf-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  list-style: none;
  margin: 0 0 .6rem;
  padding: 0;
  font-size: .85rem;
}

.graf-chave {
  display: inline-block;
  width: .8rem;
  height: .8rem;
  border-radius: 2px;
  margin-right: .35rem;
  vertical-align: -.1rem;
}

.graf-empilhado-lista {
  display: grid;
  row-gap: .4rem;
}

.graf-empilhado-linha {
  display: grid;
  grid-template-columns: minmax(4.5rem, 26%) minmax(3rem, 1fr) auto;
  column-gap: .6rem;
  align-items: center;
}

.graf-empilhado-barra {
  display: flex;
  gap: 2px;
  height: 1rem;
}

.graf-seg {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: 3px;
}

.graf-empilhado-resumo {
  white-space: nowrap;
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Colunas verticais: alturas em rem (valores definidos), 9rem para o maior. */
.graf-colunas {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  min-height: 12rem;
  padding-bottom: .1rem;
  border-bottom: 1px solid var(--sgc-linha, #dee2e6);
}

.graf-col-slot {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.graf-col {
  display: block;
  width: 70%;
  max-width: 2.75rem;
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  background: var(--sgc-vinho, #3a0f1c);
  opacity: .38;
}

.graf-col-destaque {
  opacity: 1;
}

.graf-col-valor,
.graf-col-rotulo {
  font-size: .78rem;
  line-height: 1.2;
  white-space: nowrap;
}

.graf-col-valor {
  font-weight: 600;
  margin-bottom: .15rem;
  font-variant-numeric: tabular-nums;
}

.graf-col-rotulo {
  margin-top: .25rem;
  color: var(--sgc-text-muted, #55483d);
}

.graf-oculto {
  visibility: hidden;
}

@media (max-width: 575.98px) {
  .graf-empilhado-linha { grid-template-columns: minmax(5rem, 35%) 1fr; }
  .graf-empilhado-resumo { grid-column: 1 / -1; text-align: left; }
}


/* Cartões de resumo compactos (Estatísticas): cabem 5-6 na mesma linha. */
.painel-kpis-compacto {
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: .6rem;
  margin-bottom: .75rem;
}

.painel-kpis-compacto .painel-kpi {
  padding: .55rem .75rem;
}

.painel-kpis-compacto .painel-kpi-rotulo {
  font-size: .8rem;
}

.painel-kpis-compacto .painel-kpi-valor {
  font-size: 1.6rem;
  margin: 0;
}

.painel-kpis-compacto .painel-kpi-delta {
  font-size: .75rem;
}


/* ==========================================================================
   Dashboard de Presenças — mapa de calor (fase × mês). Um só tom (o do tema),
   mais presença = mais escuro, em cinco degraus com os limites à vista na escala.
   Texto escuro nos degraus claros e branco só no mais escuro (contraste).
   ========================================================================== */
.painel-kpi-valor-texto {
  font-size: 1.05rem !important;
  line-height: 1.3;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: .2rem 0 .1rem !important;
}

.graf-calor {
  border-collapse: separate;
  border-spacing: 2px;
  width: 100%;
  font-size: .82rem;
}

.graf-calor th {
  font-weight: 600;
  text-align: center;
  padding: .2rem .25rem;
  color: var(--sgc-text-muted, #55483d);
}

.graf-calor td {
  text-align: center;
  padding: .4rem .25rem;
  min-width: 3rem;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}

.graf-calor .graf-calor-rotulo {
  text-align: left;
  white-space: nowrap;
  max-width: 13rem;
  overflow: hidden;
  text-overflow: ellipsis;
  position: sticky;
  left: 0;
  background: var(--sgc-cartao, #fff);
  color: inherit;
}

.graf-calor .graf-calor-resumo {
  font-weight: 600;
}

.graf-calor-vazio {
  background: rgba(0, 0, 0, .05);
  color: var(--sgc-text-muted, #55483d);
}

.graf-calor-1 { background: rgba(58, 15, 28, .10); background: color-mix(in srgb, var(--sgc-vinho, #3a0f1c) 10%, white); color: #1d1d1d; }
.graf-calor-2 { background: rgba(58, 15, 28, .24); background: color-mix(in srgb, var(--sgc-vinho, #3a0f1c) 24%, white); color: #1d1d1d; }
.graf-calor-3 { background: rgba(58, 15, 28, .40); background: color-mix(in srgb, var(--sgc-vinho, #3a0f1c) 40%, white); color: #1d1d1d; }
.graf-calor-4 { background: rgba(58, 15, 28, .58); background: color-mix(in srgb, var(--sgc-vinho, #3a0f1c) 58%, white); color: #1d1d1d; }
.graf-calor-5 { background: var(--sgc-vinho, #3a0f1c); color: #fff; }

.graf-calor-escala {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  margin-top: .6rem;
  font-size: .78rem;
  color: var(--sgc-text-muted, #55483d);
}

.graf-calor-passo {
  padding: .1rem .5rem;
  border-radius: 3px;
}


/* ==========================================================================
   Finanças — colunas agrupadas (entradas × saídas) e saldo acumulado (positivo
   acima da linha, negativo abaixo). Entradas = série 1 (azul), Saídas = série 2
   (laranja), como nos outros gráficos; o saldo negativo usa o vermelho de estado
   e vai abaixo do eixo (nunca só cor).
   ========================================================================== */
.graf-grupo-barras {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  width: 100%;
}

.graf-barra-agr {
  display: block;
  flex: 1 1 0;
  max-width: 1.4rem;
  min-height: 2px;
  border-radius: 3px 3px 0 0;
}

.graf-saldo-metade {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 5rem;
}

.graf-saldo-cima { align-items: flex-end; }

.graf-saldo-baixo {
  align-items: flex-start;
  border-top: 1px solid var(--sgc-text-muted, #55483d);
}

.graf-saldo-neg {
  background: #b42318;
  opacity: 1;
  border-radius: 0 0 4px 4px;
}

.graf-chave-saldo-pos { background: var(--sgc-vinho, #3a0f1c); }
.graf-chave-saldo-neg { background: #b42318; }

.painel-kpi-linha {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}