/* Login no Padrão O7 (ORDEM-2026-09-25-PADRAO-O7-KAKA.md; fonte:
   /opt/marca-open7/PADRAO-LOGIN-O7.md). Valores exatos do padrão — não inventar
   variação. Só ícone, nome, subtítulo e a cor de destaque mudam entre os apps;
   aqui o destaque é o azul #0284c7 -> #0ea5e9. Folha própria de propósito: a tela
   de login não carrega o CSS do painel (que tem fundo claro e regras de cartão). */

body.tela-login {
  margin: 0;
  min-height: 100vh;
  box-sizing: border-box;
  padding-bottom: 90px; /* o rodapé é fixo: em tela baixa o conteúdo rola por cima dele */
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #0f1216;
  color: #e6e9ed;
  font-family: system-ui, sans-serif;
}

.tela-login .topo { margin-top: 80px; text-align: center; }
/* img inline, como no HTML de referencia do padrao (a folga de linha de base sob o
   ícone faz parte das posições medidas) */
.tela-login .topo img { width: 84px; height: 84px; }

.tela-login h1 {
  font-size: 30px;
  font-weight: 600;
  margin: 14px 0 8px;
  color: #e6e9ed;
}
/* `.O7` na laranja da marca em TODAS as apps, não na cor de destaque do app */
.tela-login h1 b { color: #F38A33; font-weight: 700; }

.tela-login .sub {
  color: #9aa4b2;
  font-size: 16px;
  margin: 0 0 34px;
}

.caixa-login {
  width: 342px;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  background: #171b21;
  border: 1px solid #262c35;
  border-radius: 16px;
  padding: 24px;
}

.caixa-login label {
  display: block;
  text-align: left;
  color: #c9d1d9;
  font-size: 15px;
  margin: 0 0 8px;
}

.caixa-login input {
  display: block;
  width: 100%;
  height: 42px;
  box-sizing: border-box;
  margin: 0 0 18px;
  padding: 0 12px;
  background: #0f1216;
  color: #e6e9ed;
  border: 1px solid #262c35;
  border-radius: 8px;
  font: inherit;
  font-size: 16px; /* 16px evita o zoom automático do iOS ao focar */
  outline: none;
}

.caixa-login input:focus {
  border: 2px solid #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18);
}

.caixa-login .erro {
  margin: 0 0 14px;
  color: #f87171;
  font-size: 14px;
}

.caixa-login button {
  display: block;
  width: 100%;
  height: 44px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(90deg, #0284c7, #0ea5e9);
  color: #ffffff;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

/* 22/10/2026 — segundo fator e "lembrar este aparelho" (ORDEM-2026-10-21 §F2). */
.caixa-login .lembrar { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 14px; color: #9aa4b2; }
.caixa-login .lembrar input { display: inline-block; width: 20px; height: 20px; margin: 0; flex: none; }
.caixa-login #codigo { letter-spacing: 0.3em; text-align: center; font-size: 20px; }
.caixa-login .entrar-google {
  display: block; margin-top: 14px; height: 44px; line-height: 44px; box-sizing: border-box; text-align: center;
  border: 1px solid #262c35; border-radius: 8px; color: #e6e9ed; text-decoration: none; font-size: 16px;
}

/* Tela baixa: reduz o respiro do topo, nunca some o ícone. */
@media (max-height: 640px) {
  .tela-login .topo { margin-top: 24px; }
}