/*
 * Tela de login — página pré-autenticação, fora da casca do Workspace
 * Único (não há empresa/usuário ainda para mostrar em cabeçalho nenhum).
 * Só a marca do sistema (IS PDV) — nunca o nome de uma empresa cliente
 * nem navegação de página, que não fazem sentido antes do login.
 */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  color: var(--text-900);
  font-family: var(--font-ui);
}

/* Marca d'água — docs/referencias-visuais/IS PDV.png, totalmente visível.
   Repetida em mosaico (mesma técnica de shell.css) pra cobrir a tela
   inteira sem esticar/cortar uma instância única. O cartão de login é
   opaco por cima, então o formulário nunca perde contraste. */
body {
  background-color: var(--bg);
  background-image: url('/static/img/is-pdv-marca.png');
  background-repeat: repeat;
  background-size: 700px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}

/* Vidro escuro — mesmo motivo e mesma solução do .card-modulo em
   home.css: um cartão CLARO (branco puro ou azul-claro) sobre o azul-
   marinho escuro da marca lia como um retângulo solto flutuando por
   cima, não importa o matiz — é a luminosidade que destoa. Derivado de
   --navy-900 (o próprio tom escuro da marca) o cartão passa a pertencer
   à mesma faixa tonal do fundo. Isso empurra pra claro tudo que dentro
   do cartão dependia do texto escuro do tema claro global (rótulo de
   campo, rodapé) — ver overrides abaixo; os campos (.campo__input) e
   alertas (.login-alerta--*) já são caixas claras com texto escuro
   próprio, então continuam legíveis sem ajuste. */
.login-cartao {
  width: 100%;
  max-width: 380px;
  background: color-mix(in srgb, var(--navy-900) 60%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--blue-500) 45%, transparent);
  border-radius: var(--radius-card);
  box-shadow: 0 12px 40px rgba(11, 18, 32, 0.4);
  padding: var(--sp-8) var(--sp-6);
  margin: var(--sp-6) 0; /* respiro quando o cartão é mais alto que a tela (cadastro) */
}

.login-cartao .campo__rotulo {
  color: rgba(255, 255, 255, 0.8);
}

/* --blue-600 (ação em botão de texto, ex.: "Mostrar" senha) é escuro
   demais sobre o cartão escuro — mesmo ajuste do link do rodapé abaixo. */
.login-cartao .campo__acao {
  color: color-mix(in srgb, var(--blue-500) 55%, white);
}

.login-cartao--largo {
  max-width: 440px;
}

.login-marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}

/* Selo de marca (static/img/is-pdv-selo.png) — recorte do ícone "IS" +
   wordmark "IS PDV" de docs/referencias-visuais/IS PDV.png, mantendo o
   fundo navy próprio da arte (não transparente): o "IS" na arte é texto
   branco, que ficaria ilegível se colado direto no cartão claro — como
   selo autocontido ele sempre tem contraste garantido, seja qual for o
   fundo por trás. */
.login-marca__logo {
  width: 108px;
  height: auto;
  border-radius: var(--radius-input);
  box-shadow: 0 4px 16px rgba(11, 18, 32, 0.25);
}

.login-alerta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-radius: var(--radius-input);
  font-size: 0.875rem;
  margin-bottom: var(--sp-4);
}

.login-alerta--danger { background: var(--danger-050); color: var(--danger); }
.login-alerta--warning { background: var(--warning-050); color: var(--warning); }
.login-alerta--success { background: var(--green-050); color: var(--green-600); }
.login-alerta--info { background: var(--blue-050); color: var(--blue-600); }

.login-rodape {
  text-align: center;
  margin-top: var(--sp-4);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
}

.login-rodape a {
  /* --blue-600 é escuro demais sobre o cartão escuro — clareado a partir
     do próprio token (color-mix), não um azul novo hardcoded. */
  color: color-mix(in srgb, var(--blue-500) 55%, white);
  font-weight: 600;
  text-decoration: none;
}

.login-rodape a:hover {
  text-decoration: underline;
}