/* =====================================================================
   Guia Fish — IMAGEM DE FUNDO DO LOGIN (recurso opcional, isolado)
   ---------------------------------------------------------------------
   - Ligar/desligar: CONFIG.LOGIN_BACKGROUND_ENABLED em config.js.
     Desligado, o JavaScript não insere a imagem nem a classe
     .has-login-bg — o login volta ao fundo cinza-gelo padrão na hora.
   - Intensidade do degradê: CONFIG.LOGIN_BACKGROUND_FADE (0 a 1).
   - Trocar a foto: substituir app/assets/login-bg-*.{avif,webp,jpg}
     (ver docs/IMAGEM-LOGIN.md para gerar os tamanhos).
   - Remover de vez: apagar este arquivo e o <link> dele no index.html.
   Nada aqui altera o formulário, a autenticação ou o layout do app.
   ===================================================================== */
.has-login-bg{background:var(--bg)}
.login-bg{
  position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  /* prévia minúscula e desfocada enquanto a foto carrega (carregamento progressivo) */
  background:#dfe4d6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 7'%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23cfdcd8'/%3E%3Cstop offset='.38' stop-color='%23efe6cf'/%3E%3Cstop offset='.45' stop-color='%23567a4f'/%3E%3Cstop offset='.55' stop-color='%23c9d3c4'/%3E%3Cstop offset='1' stop-color='%23efe9dc'/%3E%3C/linearGradient%3E%3Crect width='4' height='7' fill='url(%23g)'/%3E%3C/svg%3E") center/cover no-repeat;
}
.login-bg picture{display:block;width:100%;height:100%}
/* a foto sobe para a linha das árvores ficar atrás do título e a água atrás do formulário */
.login-bg img{display:block;width:100%;height:128%;object-fit:cover;object-position:50% 40%;transform:translateY(-24%);opacity:0;transition:opacity .6s ease}
.login-bg.is-loaded img{opacity:1}
/* camada de contraste + degradê cinza-gelo: o formulário sempre legível */
.login-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,
      rgba(245,247,248,calc(var(--login-fade,.78) * .35)) 0%,
      rgba(245,247,248,calc(var(--login-fade,.78) * .25)) 22%,
      rgba(245,247,248,calc(var(--login-fade,.78) * .55)) 38%,
      rgba(245,247,248,calc(var(--login-fade,.78) * .9)) 62%,
      rgba(245,247,248,.96) 100%);
}
.has-login-bg .auth{position:relative;z-index:1}
.has-login-bg .auth .card{background:rgba(255,255,255,.94);box-shadow:0 10px 30px rgba(16,43,63,.12);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.has-login-bg .auth-brand span,.has-login-bg .legal-links{color:#14222E}
.has-login-bg .auth-brand span{text-shadow:0 1px 12px rgba(245,247,248,.9)}
@media (min-width:900px){
  .login-bg img{object-position:50% 42%}
  .login-bg::after{background:
    radial-gradient(ellipse 60% 90% at 50% 55%, rgba(245,247,248,.94) 0%, rgba(245,247,248,calc(var(--login-fade,.78) * .8)) 60%, rgba(245,247,248,calc(var(--login-fade,.78) * .55)) 100%)}
}
@media (prefers-reduced-motion:reduce){.login-bg img{transition:none}}
@media (prefers-reduced-data:reduce){.login-bg img{display:none}}