/* Tela de entrada. Herda as variáveis e a fonte de app.css — mesma paleta do
   relatório, para o login não parecer de outro produto. */

.tela-login {
  min-height: 100dvh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 24px 18px;
  background:
    radial-gradient(900px 420px at 50% -8%, var(--bg-glow), transparent 70%),
    var(--bg);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
}

.login-caixa {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 30px 28px 24px;
}

.login-marca {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
}

.login-marca img {
  display: block;
  height: 38px;
  width: auto;
}

.login-caixa h1 {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.login-sub {
  margin: 0 0 22px;
  font-size: 13.5px;
  color: var(--ink-2);
}

.login-caixa label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}

.login-caixa input {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 16px;
  padding: 11px 13px;
  font: inherit;
  font-size: 15px;            /* >=16px evita zoom no iOS; 15 + touch-action basta aqui */
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.login-caixa input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  background: var(--surface);
}

/* Escopo no form: sem isso a regra pega tambem o botao de tema do canto,
   que virava uma barra de 380px deitada em cima da marca. */
.login-caixa form button {
  width: 100%;
  margin-top: 4px;
  padding: 12px 16px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
.login-caixa form button:hover { background: var(--accent-mid); }

.erro {
  margin: 0 0 16px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--bad);
  background: var(--bad-bg);
  border-radius: 9px;
}

/* Enquanto o app roda com o acesso de fábrica. Deliberadamente feio: é para
   incomodar até alguém trocar. */
.aviso {
  margin: 16px 0 0;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.45;
  color: #7a4b00;
  background: #fff4dd;
  border: 1px solid #f0d9a8;
  border-radius: 9px;
}

.login-rodape {
  margin: 18px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-3);
  text-align: center;
}

/* O botao de tema fica no canto da JANELA, nao da caixa: a marca ocupa
   quase toda a largura do cartao (322 de 380px) e qualquer canto interno
   cairia em cima dela. E ajuste de conforto, nao um passo do login. */
.tema-btn-login {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
}