/*
 * Tela de login. Mobile-first: campos grandes e fonte >= 16px, que é o que
 * impede o iOS de dar zoom sozinho ao focar um input.
 *
 * Só tokens (`var(--*)`) — dark e light saem de graça.
 */

/* Enquanto a sessão não existe, o app inteiro sai da tela. */
body.is-signed-out .app-header,
body.is-signed-out .main,
body.is-signed-out .app-footer {
  display: none;
}

.login-screen[hidden] {
  display: none;
}

.login-screen {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background: var(--bg);
  overflow-y: auto;
}

.login-card {
  width: min(380px, 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 22px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.login-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.login-sub {
  margin: -6px 0 4px;
  color: var(--text-sec);
  font-size: 0.9rem;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--text-sec);
}

.login-field input {
  /* 16px é o mínimo que evita o zoom automático do iOS ao focar. */
  font: inherit;
  font-size: 16px;
  padding: 13px 14px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.login-field input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.login-field input:disabled {
  opacity: 0.6;
}

.login-error[hidden] {
  display: none;
}

.login-error {
  margin: 0;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 0.87rem;
  color: var(--danger);
  background: rgba(232, 93, 93, 0.1);
  border: 1px solid var(--danger);
}

.login-submit {
  min-height: 46px;
  font-size: 1rem;
}

/* Caminho discreto para automação/suporte: existe, mas não compete com o login. */
.login-alt {
  align-self: center;
  padding: 6px 4px;
  font: inherit;
  font-size: 0.82rem;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 1px dotted currentColor;
  cursor: pointer;
}

.login-alt:hover {
  color: var(--text-sec);
}