/* ==========================================================================
   Telas de acesso (login e primeiro acesso).
   Fundo institucional em degradê + cartão central. O resto do estilo vem das
   classes do Tailwind, direto no HTML gerado por login.ts / primeiro-acesso.ts.
   ========================================================================== */

body {
  background: linear-gradient(135deg, var(--marca-900) 0%, var(--marca-950) 60%, #01101f 100%);
}

/* Brilho suave atrás do cartão, para dar profundidade */
.auth-card {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
}

/* Faixa laranja no topo do cartão (identidade visual) */
.auth-card::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--acao), var(--acao-hover));
}

/* Estado de carregando: desabilita interações e reduz opacidade */
.auth-loading {
  opacity: 0.6;
  pointer-events: none;
}

/* ==========================================================================
   Layout de duas colunas (formulário à esquerda, painel visual à direita).

   O cartão central continua existindo — ele só virou a MOLDURA das duas
   colunas, e por isso a faixa laranja no topo e a sombra acima continuam
   valendo sem alteração.
   ========================================================================== */

/* A moldura.
   Em vez de um teto fixo em rem: 82% da largura, limitado a 1500px. Assim o
   cartao acompanha o monitor grande em vez de virar um selo no meio dele, e
   ainda para de crescer antes que a linha de texto do painel fique larga
   demais para ler. */
.auth-moldura {
  width: 100%;
  max-width: min(1620px, 84vw);
}

.auth-duplo {
  display: grid;
  grid-template-columns: 1fr;

  /* ALTURA: crescer sem nunca fazer a PAGINA rolar.
     Uma tela de login com barra de rolagem e sinal de que algo esta errado —
     e era o que acontecia num notebook de 768px: o cartao passava da janela.
     O teto em 88vh garante que ele sempre caiba; o piso em 80vh o mantem
     imponente onde ha espaco. */
  min-height: min(46rem, 82vh);
  max-height: 88vh;

  /* A LINHA DO GRID PRECISA OBEDECER AO TETO, e era exatamente isto que
     faltava. `max-height` limita o que APARECE do cartao, mas nao limita a
     linha: ela continuava sendo dimensionada pelo conteudo da coluna mais alta
     e passava do teto. O excedente era cortado pelo `overflow: hidden` do
     cartao — e o que sobrava de fora era a ultima linha do texto do painel.

     Num notebook de 1440x700 dava 56px cortados. Nao havia rolagem, nao havia
     aviso: a frase simplesmente terminava no meio.

     `minmax(0, 1fr)` diz que a linha vai de zero ate o espaco disponivel, e
     nunca alem. */
  grid-template-rows: minmax(0, 1fr);
}

/* Sem `min-height: 0` a regra acima nao vale: por padrao um item de grid nao
   encolhe abaixo do proprio conteudo, e ele voltaria a empurrar a linha. */
.auth-duplo > * { min-height: 0; }

/* Se ainda assim faltar altura (janela muito baixa, zoom alto), quem rola e a
   COLUNA DO FORMULARIO, nao a pagina. O painel decorativo fica parado. */
.auth-duplo > :first-child { overflow-y: auto; }

/* Só a partir de 900px há espaço para as duas colunas caberem sem espremer o
   formulário. Abaixo disso o painel some — ele é decoração, e decoração não
   pode roubar espaço de campo de senha em tela de celular. */
@media (min-width: 900px) {
  .auth-duplo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.auth-painel { display: none; position: relative; overflow: hidden; }
@media (min-width: 900px) { .auth-painel { display: block; } }

/* O FUNDO DO PAINEL: a foto, com os degradês da marca por baixo.
   Os degradês continuam aqui de propósito — se a foto faltar, falhar ao baixar
   ou ainda estiver carregando, o painel aparece inteiro em vez de virar um
   retângulo branco com texto branco em cima. */
.auth-painel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../assets/login-painel.webp');
  background-size: cover;

  /* 62% horizontal, não centro: o rosto da foto fica à esquerda do meio, e
     centralizar o corta ao meio quando a coluna fica estreita. */
  background-position: 62% center;
  background-repeat: no-repeat;
  background-color: var(--marca-900);
}

/* O ESCURECIMENTO SOB O TEXTO.
   Texto branco direto sobre foto é aposta: basta a pessoa aparecer de blusa
   clara, ou a luz da janela cair naquele canto, para a frase sumir. Este
   degradê escurece só o terço de baixo — onde o texto está — e deixa o resto da
   imagem intacto.
   É por isso que a legibilidade aqui não depende de qual foto for usada. */
.auth-painel-escurecimento {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 30, 67, 0.92) 0%,
    rgba(0, 30, 67, 0.72) 22%,
    rgba(0, 30, 67, 0.25) 48%,
    transparent 70%
  );
}

/* (Aqui havia um grão sutil, para disfarçar o banding dos degradês em telas de
   8 bits. Com uma foto por baixo ele deixou de ter função — o ruído natural da
   imagem já quebra as faixas — e só sujava o resultado.) */

.auth-painel-conteudo { position: relative; z-index: 1; }

/* Campo com rótulo sobre a borda, como no desenho aprovado. O rótulo tem fundo
   branco para "cortar" a linha da borda por trás dele. */
.campo-flutuante { position: relative; }
.campo-flutuante > label {
  position: absolute;
  top: -0.45rem;
  left: 0.75rem;
  padding: 0 0.35rem;
  background: #fff;
  line-height: 1;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .animate-slide-up { animation: none; }
}

/* Notebook baixo: reduz o respiro interno em vez de deixar o cartao estourar. */
@media (max-height: 820px) {
  .auth-duplo > :first-child { padding-top: 2rem; padding-bottom: 2rem; }
  .auth-painel-conteudo { padding-top: 2.5rem; padding-bottom: 2.5rem; }
}