/* ---------------------------------------------------------------------------
   Ecrãs de acesso (Login / Recuperar Senha / Redefinir Senha / Ativar): visual sóbrio e solene,
   de identidade católica — painel lateral com o brasão da paróquia, moldura dourada, rosácea ao
   fundo e o mote da missão; do lado do formulário, uma cruz, título em serifa e um cartão limpo.
   Segue o tema escolhido em «Aparência» (as variáveis --pub-* vêm de publico.css, ligadas às
   --sgc-* do tema) e o título usa a Cormorant Garamond (fonts.css), a serifa do resto do sistema.
--------------------------------------------------------------------------- */

.corpo-acesso {
  --ac-serifa: "Cormorant Garamond", "Georgia", "Times New Roman", serif;
  margin: 0;
  min-height: 100vh;
  font-family: "Work Sans", "Segoe UI", system-ui, sans-serif;
  color: var(--pub-tinta);
  background: var(--pub-marfim);
}

.acesso-shell { min-height: 100vh; display: flex; }

/* ---------- Painel lateral ---------- */
.acesso-decoracao {
  flex: 0 0 42%;
  max-width: 560px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--pub-dourado) 14%, transparent), transparent 60%),
    linear-gradient(165deg, var(--pub-vinho), var(--pub-vinho-2));
  color: #fbf6ec;
}
/* rosácea desenhada ao fundo, cortada no canto inferior */
.acesso-decoracao::before {
  content: "";
  position: absolute; left: 50%; bottom: -150px; width: 560px; height: 560px; transform: translateX(-50%);
  opacity: .11;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='none' stroke='%23e3c691' stroke-width='1'><circle cx='100' cy='100' r='96'/><circle cx='100' cy='100' r='74'/><circle cx='100' cy='100' r='24'/><g id='p'><path d='M100,30 Q122,66 100,100 Q78,66 100,30Z'/></g><use href='%23p' transform='rotate(30 100 100)'/><use href='%23p' transform='rotate(60 100 100)'/><use href='%23p' transform='rotate(90 100 100)'/><use href='%23p' transform='rotate(120 100 100)'/><use href='%23p' transform='rotate(150 100 100)'/><use href='%23p' transform='rotate(180 100 100)'/><use href='%23p' transform='rotate(210 100 100)'/><use href='%23p' transform='rotate(240 100 100)'/><use href='%23p' transform='rotate(270 100 100)'/><use href='%23p' transform='rotate(300 100 100)'/><use href='%23p' transform='rotate(330 100 100)'/></g></svg>") center / contain no-repeat;
  pointer-events: none;
}
/* moldura dourada fina, afastada da borda */
.acesso-decoracao::after {
  content: "";
  position: absolute; inset: 18px;
  border: 1px solid color-mix(in srgb, var(--pub-dourado-suave) 45%, transparent);
  border-radius: 2px;
  box-shadow: inset 0 0 0 5px transparent, inset 0 0 0 6px color-mix(in srgb, var(--pub-dourado-suave) 18%, transparent);
  pointer-events: none;
}
.acesso-moldura {
  position: relative; z-index: 1;
  min-height: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.15rem; padding: 3.2rem 2.4rem; text-align: center;
}

.acesso-titulo-sistema {
  display: flex; align-items: center; gap: .8rem; width: 100%; justify-content: center;
  font-size: .72rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
  color: var(--pub-dourado-suave);
}
.acesso-titulo-sistema::before, .acesso-titulo-sistema::after {
  content: ""; flex: 1 1 0; max-width: 56px; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--pub-dourado-suave) 70%, transparent));
}
.acesso-titulo-sistema::after { transform: scaleX(-1); }

.acesso-circulo {
  width: min(228px, 62%); aspect-ratio: 1 / 1; flex: none; margin-top: .5rem;
  border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--pub-dourado-suave) 10%, transparent);
  border: 2px solid var(--pub-dourado);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--pub-dourado-suave) 14%, transparent), 0 0 0 8px color-mix(in srgb, var(--pub-dourado-suave) 40%, transparent), 0 18px 34px -16px rgba(0, 0, 0, .55);
}
.acesso-circulo-logo { width: 100%; height: 100%; object-fit: cover; background: #fffdf8; }
.acesso-circulo .acesso-rosacea { width: 100%; height: 100%; }

.acesso-marca-nome {
  font-family: var(--ac-serifa); font-weight: 600; font-size: 1.7rem; line-height: 1.15; color: #fff;
  letter-spacing: .01em; max-width: 100%; margin-top: .6rem;
}

.acesso-ornamento { display: flex; align-items: center; gap: .9rem; width: 100%; justify-content: center; color: var(--pub-dourado-suave); }
.acesso-ornamento::before, .acesso-ornamento::after {
  content: ""; flex: 1 1 0; max-width: 90px; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--pub-dourado-suave) 60%, transparent));
}
.acesso-ornamento::after { transform: scaleX(-1); }
.acesso-ornamento svg { width: 18px; height: 24px; flex: none; }

.acesso-mote {
  margin: 0; padding: 0; border: none; max-width: 22rem; text-align: center;
  font-family: var(--ac-serifa); font-style: italic; font-weight: 500; font-size: 1.32rem;
  color: #fbf6ec; line-height: 1.4;
}
.acesso-mote cite {
  display: block; margin-top: .55rem; font-style: normal;
  font-family: "Work Sans", system-ui, sans-serif; font-size: .68rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--pub-dourado-suave);
}
.acesso-latim {
  margin-top: .8rem; font-family: var(--ac-serifa); font-style: italic; font-size: 1rem;
  color: color-mix(in srgb, var(--pub-dourado-suave) 80%, transparent); letter-spacing: .04em;
}

/* ---------- Conteúdo (formulário) ---------- */
.acesso-conteudo {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
  padding: 2.5rem 1.5rem;
  background:
    radial-gradient(70% 50% at 50% 0%, color-mix(in srgb, var(--pub-dourado) 9%, transparent), transparent 70%),
    var(--pub-marfim);
}
.acesso-caixa { width: 100%; max-width: 410px; }

.acesso-caixa h1 {
  font-family: var(--ac-serifa); color: var(--pub-vinho); font-weight: 600;
  font-size: 2.35rem; line-height: 1.05; text-align: center; margin: 0 0 .35rem; letter-spacing: .005em;
}
.acesso-caixa h1::before {
  content: ""; display: block; width: 18px; height: 26px; margin: 0 auto .7rem;
  background: var(--pub-dourado);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 26'><path d='M7.2 0h3.6v7.2H18v3.6h-7.2V26H7.2V10.8H0V7.2h7.2z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 26'><path d='M7.2 0h3.6v7.2H18v3.6h-7.2V26H7.2V10.8H0V7.2h7.2z'/></svg>") center / contain no-repeat;
}
.acesso-caixa .acesso-subtitulo {
  text-align: center; color: var(--pub-tinta-suave); font-size: .92rem; margin-bottom: 1.5rem;
  font-family: var(--ac-serifa); font-style: italic; font-size: 1.12rem;
}

.cartao-acesso {
  background: var(--pub-cartao);
  border: 1px solid var(--pub-linha);
  border-top: 3px solid var(--pub-dourado);
  border-radius: 6px;
  box-shadow: 0 22px 40px -28px rgba(58, 15, 28, .55), 0 1px 0 rgba(255, 255, 255, .7) inset;
  padding: 1.9rem 1.75rem 1.7rem;
}
.cartao-acesso + .cartao-acesso { margin-top: 1.1rem; }
.cartao-acesso.cartao-acesso-suave {
  border-top-color: var(--pub-linha); background: transparent; border-style: dashed; box-shadow: none;
  text-align: center; font-size: .86rem; padding: 1.1rem 1.2rem; color: var(--pub-tinta-suave);
}

.acesso-caixa .form-label {
  font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--pub-tinta-suave); margin-bottom: .3rem;
}
.acesso-caixa .form-control {
  border-color: var(--pub-linha); background: #fffefb; padding: .62rem .8rem; font-size: .96rem; border-radius: 4px;
}
.acesso-caixa .form-control:focus {
  border-color: var(--pub-dourado); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--pub-dourado) 28%, transparent);
}
/* O Bootstrap instalado é o 5.1 (sem as variáveis --bs-btn-*): as cores dos botões têm de ser dadas directamente. */
.acesso-caixa .btn-primary {
  background-color: var(--pub-vinho); border-color: var(--pub-vinho); color: #fbf6ec;
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: .82rem;
  padding: .75rem 1rem; border-radius: 4px; border-bottom: 3px solid var(--pub-dourado);
}
.acesso-caixa .btn-primary:hover, .acesso-caixa .btn-primary:focus, .acesso-caixa .btn-primary:active {
  background-color: var(--pub-vinho-2); border-color: var(--pub-vinho-2); border-bottom-color: var(--pub-dourado); color: #fff;
}
.acesso-caixa .btn-primary:focus { box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--pub-dourado) 35%, transparent); }
.acesso-caixa .btn-outline-primary, .acesso-caixa .btn-outline-secondary {
  color: var(--pub-vinho); border-color: color-mix(in srgb, var(--pub-vinho) 35%, var(--pub-linha)); background: transparent;
}
.acesso-caixa .btn-outline-primary:hover, .acesso-caixa .btn-outline-secondary:hover,
.acesso-caixa .btn-outline-primary:focus, .acesso-caixa .btn-outline-secondary:focus {
  background-color: var(--pub-vinho); border-color: var(--pub-vinho); color: #fbf6ec;
}
.acesso-caixa a { color: var(--pub-vinho-2); text-underline-offset: 2px; }
.acesso-caixa a:hover { color: var(--pub-vinho); }
.acesso-caixa .text-muted { color: var(--pub-tinta-suave) !important; }
.acesso-caixa .form-text { font-size: .76rem; }

.acesso-foto-utilizador {
  width: 84px; height: 84px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--pub-dourado-suave); box-shadow: 0 4px 14px -6px rgba(58, 15, 28, .5);
}
.acesso-rodape { margin-top: 1.6rem; text-align: center; font-size: .74rem; letter-spacing: .04em; color: var(--pub-tinta-suave); }

@media (max-width: 767.98px) {
  .acesso-shell { flex-direction: column; }
  .acesso-decoracao { flex: 0 0 auto; max-width: none; width: 100%; }
  .acesso-decoracao::before { display: none; }
  .acesso-decoracao::after { inset: 8px; }
  .acesso-moldura { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: .5rem .9rem; padding: 1.3rem 1.2rem; }
  .acesso-titulo-sistema { flex-basis: 100%; font-size: .62rem; letter-spacing: .2em; }
  .acesso-circulo { width: 62px; margin-top: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--pub-dourado-suave) 20%, transparent); }
  .acesso-marca-nome { font-size: 1.25rem; margin-top: 0; text-align: left; flex: 0 1 auto; max-width: 70%; }
  .acesso-ornamento, .acesso-mote, .acesso-latim { display: none; }
  .acesso-conteudo { padding: 1.6rem 1rem 2rem; }
  .acesso-caixa h1 { font-size: 2rem; }
}