/* ==========================================================================
   Porta de login

   Não herda nada do style.css, de propósito. As classes de lá foram afinadas
   para a barra lateral escura: `.brand h1` é branco puro e `.refresh-status`
   é quase branco. Num card claro o título some e a mensagem de erro fica
   branca sobre branco — era por isso que "clico em entrar e nada acontece":
   o erro aparecia, e não dava para lê-lo.

   Uma coluna só, centralizada, tudo dentro de 360px. Nada encostado na
   borda: o seletor de tema fica logo abaixo do formulário, não no canto.
   ========================================================================== */
.login-gate {
  --lg-fundo: #F4F4F6;
  --lg-fundo-2: #ffffff;
  --lg-superficie: #ffffff;
  --lg-texto: #16161a;
  --lg-suave: #5b5b66;
  --lg-linha: #e2e2e7;
  --lg-campo: #ffffff;
  --lg-primaria: #b4160f;        /* vermelho da marca, fechado o bastante
                                    para carregar texto branco */
  --lg-primaria-forte: #8f0f09;
  --lg-ciano: #e1251b;
  --lg-anel-trilho: rgba(22, 22, 26, 0.09);
  /* erro num tom mais fechado que o da marca: os dois vermelhos
     precisam ficar distinguíveis lado a lado nesta tela */
  --lg-erro: #8a1616;
  --lg-erro-fundo: rgba(138, 22, 22, 0.08);
  --lg-erro-borda: rgba(138, 22, 22, 0.28);
  --lg-ok: #0c6b45;
  --lg-sobre-primaria: #ffffff;   /* texto por cima do azul */
  --lg-sombra: 0 18px 44px rgba(20, 20, 24, 0.1);

  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 28px 20px;
  overflow: auto;
  color: var(--lg-texto);
  background:
    radial-gradient(60% 45% at 50% 0%, color-mix(in srgb, var(--lg-primaria) 9%, transparent), transparent 70%),
    linear-gradient(180deg, var(--lg-fundo-2) 0%, var(--lg-fundo) 100%);
}
.login-gate[hidden] { display: none; }

:root[data-theme="dark"] .login-gate {
  --lg-fundo: #08080a;
  --lg-fundo-2: #131317;
  --lg-superficie: #1a1a20;
  --lg-texto: #f5f5f7;
  --lg-suave: #b0b0bc;
  --lg-linha: rgba(255, 255, 255, 0.15);
  --lg-campo: rgba(255, 255, 255, 0.06);
  --lg-primaria: #ff4d42;
  --lg-primaria-forte: #e1251b;
  --lg-ciano: #ff6b61;
  --lg-anel-trilho: rgba(255, 255, 255, 0.12);
  --lg-erro: #ffa79e;
  --lg-erro-fundo: rgba(255, 167, 158, 0.14);
  --lg-erro-borda: rgba(255, 167, 158, 0.36);
  --lg-ok: #5fe0ab;
  /* no escuro o vermelho é claro demais para texto branco. Texto quase
     preto por cima dele passa com folga, e é o padrão dos temas escuros. */
  --lg-sobre-primaria: #140403;
  --lg-sombra: 0 18px 44px rgba(0, 0, 0, 0.4);
}

/* ---------- a coluna ---------- */
.login-caixa {
  width: min(360px, 100%);
  display: grid;
  justify-items: center;
  gap: 26px;
}

/* ---------- marca com o anel de carga ----------
   O anel é o único elemento animado da tela, e ele responde ao que a pessoa
   digita: enche conforme o formulário fica válido. Serve de barra de
   progresso — a pessoa vê que falta algo antes de tentar enviar — e é o
   próprio produto desenhado, já que a leitura é a de uma bateria carregando. */
.login-marca { display: grid; justify-items: center; gap: 14px; }

/* O selo da marca. A logo já vem vermelha e com fundo transparente, então
   aqui não há moldura nem cor: só o tamanho e um respiro. Um quadrado
   colorido por trás esconderia a própria logo. */
.login-selo {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
}
.login-selo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes login-tremer {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  45% { transform: translateX(5px); }
  70% { transform: translateX(-3px); }
}

/* a porcentagem só aparece quando há o que mostrar */
.login-gate h1 {
  margin: 0;
  font-size: 1.32rem;
  font-weight: 750;
  letter-spacing: -0.025em;
  color: var(--lg-texto);          /* a referência deixava branco: sumia no claro */
}

/* ---------- formulário ---------- */
.login-form { width: 100%; display: grid; gap: 10px; }
.login-campo { position: relative; display: grid; }

.login-gate input[type="email"],
.login-gate input[type="password"],
.login-gate input[type="text"] {
  width: 100%;
  padding: 14px 16px;
  font: inherit;
  font-size: 0.95rem;
  color: var(--lg-texto);
  background: var(--lg-campo);
  border: 1px solid var(--lg-linha);
  border-radius: 14px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.login-gate input::placeholder { color: var(--lg-suave); opacity: 0.75; }
.login-gate input:focus {
  outline: none;
  border-color: var(--lg-primaria);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lg-primaria) 22%, transparent);
}
/* o autofill do navegador pinta fundo claro e texto escuro por conta própria;
   no tema escuro isso deixava o campo ilegível */
.login-gate input:-webkit-autofill,
.login-gate input:-webkit-autofill:hover,
.login-gate input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--lg-texto);
  -webkit-box-shadow: 0 0 0 60px var(--lg-superficie) inset;
  caret-color: var(--lg-texto);
}

.login-senha input { padding-right: 50px; }
.login-olho {
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--lg-suave);
  cursor: pointer;
}
.login-olho:hover { color: var(--lg-texto); background: var(--lg-linha); }
.login-olho:focus-visible { outline: 2px solid var(--lg-primaria); outline-offset: 1px; }
.login-olho svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.login-olho .olho-esconder { display: none; }
.login-olho[aria-pressed="true"] .olho-ver { display: none; }
.login-olho[aria-pressed="true"] .olho-esconder { display: block; }

.login-entrar {
  position: relative;
  margin-top: 4px;
  padding: 14px 18px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--lg-sobre-primaria);
  background: linear-gradient(135deg, var(--lg-primaria), var(--lg-primaria-forte));
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--lg-primaria) 28%, transparent);
  transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
}
.login-entrar:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--lg-primaria) 34%, transparent);
}
.login-entrar:active:not(:disabled) { transform: translateY(0); }
.login-entrar:focus-visible { outline: 2px solid var(--lg-primaria); outline-offset: 3px; }
.login-entrar:disabled { cursor: progress; filter: saturate(0.75) brightness(0.96); box-shadow: none; }

.login-entrar-girando { display: none; }
.login-entrar.is-carregando .login-entrar-texto { visibility: hidden; }
.login-entrar.is-carregando .login-entrar-girando {
  display: block;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border: 2px solid color-mix(in srgb, var(--lg-sobre-primaria) 35%, transparent);
  border-top-color: var(--lg-sobre-primaria);
  border-radius: 50%;
  animation: login-girar 0.7s linear infinite;
}
@keyframes login-girar { to { transform: rotate(360deg); } }

/* A mensagem precisa ser legível nos dois temas — era aqui que o erro sumia. */
.login-status {
  margin: 0;
  width: 100%;
  text-align: center;
  font-size: 0.87rem;
  line-height: 1.5;
  color: var(--lg-suave);
}
.login-status:empty { display: none; }
.login-status.is-erro {
  padding: 11px 14px;
  border-radius: 13px;
  color: var(--lg-erro);
  background: var(--lg-erro-fundo);
  border: 1px solid var(--lg-erro-borda);
  font-weight: 600;
  text-align: left;
}
.login-status.is-ok { color: var(--lg-ok); font-weight: 600; }

/* ---------- seletor de tema, junto do conteúdo ---------- */
.login-tema {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--lg-superficie);
  border: 1px solid var(--lg-linha);
  box-shadow: var(--lg-sombra);
}
.login-tema-op {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--lg-suave);
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}
.login-tema-op svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round;
}
.login-tema-op[data-theme-choice="dark"] svg { fill: currentColor; stroke: none; }
.login-tema-op:hover { color: var(--lg-texto); background: var(--lg-campo); }
.login-tema-op[aria-checked="true"] { background: var(--lg-primaria); color: var(--lg-sobre-primaria); }
.login-tema-op:focus-visible { outline: 2px solid var(--lg-primaria); outline-offset: 2px; }

/* ---------- responsivo ---------- */
@media (max-width: 420px) {
  .login-gate { padding: 22px 16px; }
  .login-caixa { gap: 22px; }
  .login-gate h1 { font-size: 1.2rem; }
}
/* Tela baixa (celular deitado). O objetivo é caber sem rolar: barra de
   rolagem lateral rouba ~15px e desloca a coluna do centro, que é
   justamente o que a tela não pode fazer. */
@media (max-height: 620px) {
  .login-gate { padding: 20px; }
  .login-caixa { gap: 16px; }
  .login-gate h1 { font-size: 1.1rem; }
}
@media (max-height: 460px) {
  .login-gate { padding: 14px 20px; }
  .login-caixa { gap: 12px; }
  .login-marca { gap: 8px; }
  .login-gate h1 { font-size: 1rem; }
  .login-gate input,
  .login-entrar { padding-top: 11px; padding-bottom: 11px; }
  .login-form { gap: 8px; }
  .login-tema-op { width: 28px; height: 28px; }
}

/* Dedo, não ponteiro. O corte aqui é o tipo de apontador e não a largura da
   tela, porque quem erra o alvo de 32px é o dedo — e ele existe tanto num
   celular de 375px quanto num tablet de 1024px. Fica de fora do bloco de
   tela baixa acima, que aperta os alvos de propósito para caber deitado. */
@media (pointer: coarse) and (min-height: 461px) {
  .login-olho { width: 42px; height: 42px; }
  .login-tema-op { width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  }

/* Enquanto a sessão não é conhecida, o painel não pode piscar por trás da
   porta de login: um vislumbre de dados de outra pessoa já é vazamento. */
body.sem-sessao .app-shell,
body.sem-sessao .global-ai-launcher,
body.sem-sessao .global-ai-chat,
body.sem-sessao .tour-launch-button,
body.sem-sessao .sidebar-edge-toggle { display: none !important; }