/*
  elevaOS - ecrãs de autenticação (login/registo). Tema 100% escuro (pedido
  explícito do utilizador - a primeira versão tinha o painel do formulário
  claro, como nas referências originais, mas isso destoava do resto do
  produto). Cartão de dois painéis, ambos escuros: esquerda = painel de
  marca (--eleva-bg, mais escuro), direita = painel de formulário
  (--eleva-surface, um tom mais claro, o mesmo usado nos "cartões" do
  dashboard) - a separação vem de um tom subtil + borda, não de um
  contraste claro/escuro. Radius de 10px em inputs/botões (diferente do
  radius em pílula dos CTAs de marketing em elevaos.css) - decisão
  documentada aqui: esta é uma superfície de formulário denso, não um CTA
  de conversão.
*/

/* Reset mínimo do "corpo" do tema elevaOS (fundo/cor do body, svg/img,
   foco visível) - duplicado a partir de elevaos.css de propósito: as
   páginas de autenticação não carregam elevaos.css (evita puxar CSS de
   marketing - hero, bento, secções - que não é usado aqui). */
body.elevaos { background: var(--eleva-bg); color: var(--eleva-text); }
.elevaos img, .elevaos svg { display: block; max-width: 100%; }
.elevaos :focus-visible {
  outline: 3px solid var(--eleva-secondary);
  outline-offset: 2px;
  border-radius: 2px;
}

.eleva-auth-shell {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  position: relative;
  overflow: hidden;
}

.eleva-auth-shell::before {
  content: "";
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 900px;
  background: var(--eleva-gradient);
  opacity: 0.1;
  filter: blur(120px);
  pointer-events: none;
}

.eleva-auth-card {
  position: relative;
  width: 100%;
  max-width: 980px;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--eleva-border);
  box-shadow: var(--shadow-lg);
  background: var(--eleva-surface);
}

@media (min-width: 860px) {
  .eleva-auth-card { grid-template-columns: 1fr 1fr; min-height: 620px; }
}

/* Painel de marca - só visível a partir de 860px (ver Secção 4.7 do guia:
   colapso de mobile explícito). Em ecrãs pequenos o formulário fica
   sozinho, a preencher o cartão inteiro. */
.eleva-auth-brand {
  display: none;
  position: relative;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-7);
  background: var(--eleva-bg);
  border-right: 1px solid var(--eleva-border);
  overflow: hidden;
}
@media (min-width: 860px) { .eleva-auth-brand { display: flex; } }

.eleva-auth-brand-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 15%, rgba(105, 183, 255, 0.22), transparent 42%),
    radial-gradient(circle at 90% 95%, rgba(21, 119, 255, 0.24), transparent 45%);
  pointer-events: none;
}

.eleva-auth-logo { position: relative; z-index: 1; display: inline-flex; }
.eleva-auth-logo img { height: 28px; width: auto; }

.eleva-auth-brand-content { position: relative; z-index: 1; margin-top: auto; }
.eleva-auth-brand-content h2 {
  color: var(--eleva-text);
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2rem);
  margin-bottom: var(--space-3);
}
.eleva-auth-brand-content p { color: var(--eleva-text-muted); max-width: 36ch; margin: 0; }

.eleva-auth-brand-foot {
  position: relative;
  z-index: 1;
  margin-top: var(--space-7);
  color: var(--eleva-text-muted);
  font-size: var(--fs-100);
}

.eleva-auth-form-panel {
  background: var(--eleva-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-6);
}

.eleva-auth-form-inner { width: 100%; max-width: 380px; }

.eleva-auth-heading {
  font-family: var(--font-display);
  color: var(--eleva-text);
  font-size: clamp(1.5rem, 1.3rem + 1vw, 1.75rem);
  margin-bottom: var(--space-2);
}
.eleva-auth-subtext { color: var(--eleva-text-muted); margin-bottom: var(--space-7); font-size: var(--fs-300); max-width: none; }

.eleva-field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.eleva-field-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.eleva-field label { font-size: var(--fs-200); font-weight: 600; color: var(--eleva-text); }

.eleva-input-wrap { position: relative; }
.eleva-input-wrap input {
  width: 100%;
  padding: var(--space-4);
  border-radius: 10px;
  border: 1px solid var(--eleva-border-strong);
  background: var(--eleva-surface-2);
  color: var(--eleva-text);
  font-size: var(--fs-300);
  font-family: var(--font-body);
  transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.eleva-input-wrap input::placeholder { color: var(--eleva-text-muted); }
.eleva-input-wrap input:focus-visible {
  outline: none;
  border-color: var(--eleva-secondary);
  box-shadow: 0 0 0 3px rgba(105, 183, 255, 0.22);
}
.eleva-field.has-error .eleva-input-wrap input { border-color: #E5787A; }
.eleva-input-wrap.has-toggle input { padding-right: 44px; }

.eleva-password-toggle {
  position: absolute;
  top: 50%;
  right: var(--space-3);
  transform: translateY(-50%);
  background: none;
  border: 0;
  padding: var(--space-1);
  color: var(--eleva-text-muted);
  cursor: pointer;
  display: flex;
}
.eleva-password-toggle svg { width: 20px; height: 20px; }
.eleva-password-toggle:hover { color: var(--eleva-text); }
.eleva-password-toggle .icon-eye-off { display: none; }
.eleva-password-toggle[aria-pressed="true"] .icon-eye { display: none; }
.eleva-password-toggle[aria-pressed="true"] .icon-eye-off { display: block; }

.eleva-field-hint { font-size: var(--fs-100); color: var(--eleva-text-muted); margin: 0; }
/* #E5787A (não o --error #C02A2A do resto do site, pensado para fundo
   branco) - tom de vermelho claro o suficiente para passar AA sobre o
   fundo escuro --eleva-surface-2/--eleva-surface. */
.eleva-field-error { font-size: var(--fs-100); color: #E5787A; margin: 0; }

.eleva-forgot-link { font-size: var(--fs-100); color: var(--eleva-primary); text-decoration: none; white-space: nowrap; }
.eleva-forgot-link:hover { color: var(--eleva-primary-hover); }

.eleva-checkbox-field { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-6); }
.eleva-checkbox-field input[type="checkbox"] {
  width: 18px; height: 18px;
  margin-top: 2px;
  accent-color: var(--eleva-primary-fill);
  flex-shrink: 0;
}
.eleva-checkbox-field label { font-size: var(--fs-100); color: var(--eleva-text-muted); line-height: var(--lh-normal); }
.eleva-checkbox-field a { color: var(--eleva-primary); text-decoration: underline; text-underline-offset: 2px; }
.eleva-checkbox-field a:hover { color: var(--eleva-primary-hover); }

.eleva-auth-submit {
  width: 100%;
  padding: var(--space-4);
  border-radius: 10px;
  border: 0;
  background: var(--eleva-primary-fill);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.eleva-auth-submit:hover { background: var(--eleva-primary-fill-hover); }
.eleva-auth-submit:active { transform: scale(0.98); }
.eleva-auth-submit:disabled { opacity: 0.65; cursor: not-allowed; }

.eleva-auth-status { margin-top: var(--space-4); font-size: var(--fs-200); text-align: center; color: var(--eleva-text-muted); }
.eleva-auth-status.is-error { color: #E5787A; }

.eleva-auth-bottom { margin-top: var(--space-6); text-align: center; font-size: var(--fs-200); color: var(--eleva-text-muted); }
.eleva-auth-bottom a { color: var(--eleva-primary); font-weight: 600; text-decoration: none; }
.eleva-auth-bottom a:hover { color: var(--eleva-primary-hover); }