/* ═══════════════════════════════════════════════════════════════════════
   KIT NAPOLEÃO · fundo de imagem na tela de entrada

   Só o LOGIN leva foto. Atrás das telas de trabalho, não: elas são tabelas e
   cartões densos, e imagem embaixo de texto pequeno derruba a legibilidade e
   briga com o tema escuro.

   ── Como ligar num módulo ──
   1. pôr dois arquivos em `public/img/` do módulo:
        login-fundo.jpg          deitada, 1920x1088   (computador)
        login-fundo-mobile.jpg   em pé,   1088x2352   (celular)
   2. ligar esta folha:   <link rel="stylesheet" href="/kit/css/login.css">
      (sempre DEPOIS de tokens.css)
   3. acrescentar a classe `fundo-napoleao` no elemento que ocupa a tela toda
      (no login dos módulos de escritório é o <body>; no Arco é a .auth-wrap;
      no Portal o próprio JS põe e tira a classe do <body>, porque lá a mesma
      página serve de login e de grade de módulos).

   O caminho é fixo de propósito: cada módulo serve o próprio `public/`, então
   a MESMA regra aqui resolve para uma imagem diferente em cada um. Módulo sem
   os arquivos simplesmente não recebe a classe — nada quebra.

   ── Por que a lista de seletores é feia ──
   Duas regras de FORA disputam o mesmo `background` e ganhavam por
   especificidade, não por ordem:
     `body { background: var(--cinza-fundo) }`            no <style> do módulo
     `html[data-tema="escuro"] body { background: ... }`  em tokens.css
   A segunda é 0-1-2 e derrubava `body.fundo-napoleao` (0-1-1): no tema escuro
   a foto simplesmente não aparecia — tela marinho lisa. Por isso todo bloco que
   mexe em `background` repete os três seletores.

   ── O véu ──
   O cartão de login é opaco, então o véu não existe para ele: existe para
   descolar o cartão da foto, para o texto que fica FORA do cartão e para
   amarrar qualquer foto ao marinho da marca.

   A força foi MEDIDA sobre a arte clara (Arco ao amanhecer, creme e dourado),
   não chutada: o véu antigo (.45→.78, calibrado para as pinturas escuras)
   apagava a arte inteira — no escuro sobrava um retângulo marinho liso.
   - claro: véu quase nada. A arte já é clara; quem separa o cartão é a sombra.
   - escuro: véu médio. Uma foto clara inteira ao lado de um cartão escuro vira
     lanterna na cara de quem trabalha à noite, mas afogá-la também não serve.

   Um módulo com arte mais escura redeclara `--veu-topo`/`--veu-base` no próprio
   login.html, sem tocar aqui.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --veu-topo: rgba(14, 42, 71, .06);
  --veu-base: rgba(10, 30, 52, .16);
  /* Texto que cai FORA do cartão. No claro o véu é leve e a arte é clara, então
     o que se lê sobre ela é marinho, não branco. */
  --texto-sobre-foto: #0E2A47;
  --sombra-sobre-foto: 0 1px 2px rgba(255, 255, 255, .6);
}

html[data-tema="escuro"] {
  --veu-topo: rgba(8, 24, 42, .34);
  --veu-base: rgba(8, 24, 42, .56);
  --texto-sobre-foto: #EEF3F8;
  --sombra-sobre-foto: 0 1px 3px rgba(0, 0, 0, .55);
}

.fundo-napoleao,
body.fundo-napoleao,
html[data-tema="escuro"] body.fundo-napoleao {
  min-height: 100vh;
  background-color: var(--marinho);           /* enquanto a foto carrega */
  background-image:
    linear-gradient(to bottom, var(--veu-topo) 0%, var(--veu-base) 100%),
    url('/img/login-fundo.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Celular: a versão em pé, e SEM `fixed` — em iOS o fixed engasga e às vezes
   simplesmente não pinta.

   `center bottom` porque a arte é montada de baixo para cima: a onda marinho e
   dourada e o brasão moram no rodapé. Cortando por cima perde-se céu, que
   sobra; cortando por baixo perde-se a assinatura. */
@media (max-width: 767px) {
  .fundo-napoleao,
  body.fundo-napoleao,
  html[data-tema="escuro"] body.fundo-napoleao {
    background-image:
      linear-gradient(to bottom, var(--veu-topo) 0%, var(--veu-base) 100%),
      url('/img/login-fundo-mobile.jpg');
    background-position: center bottom;
    background-attachment: scroll;
  }

  /* Sem o respiro lateral o cartão encosta nas duas bordas do celular (ele é
     `width:100%` dentro de um <body> sem padding) e a foto vira duas tarjas.

     O respiro de baixo é maior de propósito: empurra o cartão PARA CIMA, e é o
     que faz a paisagem aparecer. Centralizado, o cartão cai exatamente em cima
     do Arco e do Napoleão e sobra só céu; subindo, eles ficam inteiros embaixo,
     com a Torre Eiffel e a onda. Testei o contrário — descer o cartão — e piora:
     a metade de cima vira céu vazio.

     `min()` porque em tela curta (ou com o teclado aberto) 18vh + cartão passa
     da altura e o topo do cartão fica inalcançável. Só no <body>: no Arco a
     classe está na .auth-wrap, que já tem padding próprio. */
  body.fundo-napoleao { padding: 20px 20px min(18vh, 130px); }
}

/* O cartão ganha profundidade e contorno para descolar da foto — sobre fundo
   liso ele não precisava de nenhum dos dois. A arte tem áreas quase brancas
   (a onda de baixo), e cartão branco sobre creme sem contorno some. */
.fundo-napoleao .login-card,
.fundo-napoleao .card {
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .45);
  border-color: rgba(14, 42, 71, .18);
}

/* ── Vidro fosco ──────────────────────────────────────────────────────────
   Só na tela de entrada. Não é incoerência com o sistema: lá dentro a regra é
   fundo chapado, porque atrás de uma tabela o vidro só atrapalha a leitura.
   Aqui atrás não há dado nenhum — há uma foto — e o fosco é o que deixa a
   paisagem atravessar sem que o formulário perca contraste.

   As opacidades foram medidas contra o pior caso da arte, que é o casaco
   marinho do Napoleão: a .82 no claro, o fundo efetivo do cartão não cai de
   ~#D8D8D8, e o texto marinho continua acima de 7:1.

   `@supports` porque sem `backdrop-filter` (navegador velho) o cartão a .82
   ficaria translúcido de verdade, com a foto crua atravessando o texto. Sem
   suporte, ele simplesmente continua chapado — que é o que já era. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fundo-napoleao .login-card,
  .fundo-napoleao .card {
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    backdrop-filter: blur(18px) saturate(1.15);
    border: 1px solid rgba(255, 255, 255, .55);
  }

  html[data-tema="escuro"] .fundo-napoleao .login-card,
  html[data-tema="escuro"] .fundo-napoleao .card {
    background: rgba(16, 33, 54, .78);
    border-color: rgba(255, 255, 255, .12);
  }
}

/* Texto que fica FORA do cartão (título, assinatura, link de ajuda) passa a
   viver sobre a foto. */
.fundo-napoleao > h1,
.fundo-napoleao > p,
.fundo-napoleao .fora-do-cartao,
.fundo-napoleao .rodape-login {
  color: var(--texto-sobre-foto);
  text-shadow: var(--sombra-sobre-foto);
}

/* ── Assinatura na faixa de baixo ─────────────────────────────────────────
   A arte reserva uma faixa creme no rodapé — ela foi desenhada para receber
   alguma coisa, e vazia parece corte mal feito. Aqui vai uma linha só.

   Só no computador. No celular a faixa creme fica fora do corte e o rodapé da
   tela cai em cima da onda marinho: texto marinho sobre marinho some. */
.fundo-napoleao .rodape-login { display: none; }

@media (min-width: 768px) {
  .fundo-napoleao .rodape-login {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 20px;
    text-align: center;
    font-family: var(--fonte-titulo);
    font-size: 12px; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
    pointer-events: none;                  /* nunca rouba clique do formulário */
  }
}

/* Quem pediu menos movimento não leva paralaxe. */
@media (prefers-reduced-motion: reduce) {
  .fundo-napoleao,
  body.fundo-napoleao,
  html[data-tema="escuro"] body.fundo-napoleao { background-attachment: scroll; }
}

/* Impressão: foto de fundo só gasta tinta. */
@media print {
  .fundo-napoleao,
  body.fundo-napoleao,
  html[data-tema="escuro"] body.fundo-napoleao { background: none; }
}
