/* Login com o tema "neon" do painel (azul electrico sobre fundo escuro,
   cartoes de vidro com borda luminosa). O movimento e todo feito pelo
   login-neon.js: aqui so ha o aspeto e pequenas transicoes de foco/hover. */

/* body.neon-auth (e nao so .neon-auth): no admin o body tambem tem
   .admin-app, cujo fundo claro (body.admin-app) ganhava a este. */
body.neon-auth {
  --bg-0: #02060f;
  --bg-1: #061226;
  --neon: #38bdf8;
  --neon-2: #0ea5e9;
  --neon-3: #22d3ee;
  --glass: rgba(9, 22, 44, 0.58);
  --glass-2: rgba(12, 30, 58, 0.55);
  --line: rgba(56, 189, 248, 0.28);
  --text: #e8f3ff;
  --muted: #8ea6c4;
  --error: #fb7185;
  --success: #34d399;
  /* Para o aviso "Instala a app" (pwa.js) e os botoes flutuantes. */
  --card-bg: #0b1a33;
  --border: rgba(56, 189, 248, 0.3);
  --accent: #0ea5e9;

  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(14, 165, 233, 0.22), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(37, 99, 235, 0.18), transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0) 70%);
  background-color: var(--bg-0);
  overflow-x: hidden;
}
.neon-auth * { box-sizing: border-box; }

#neon-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Manchas de luz por tras de tudo (movidas pelo JS). */
.neon-glow {
  position: fixed;
  z-index: 0;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  opacity: .55;
}
.neon-glow.a { top: -160px; left: -140px; background: radial-gradient(circle, rgba(14,165,233,.55), transparent 65%); }
.neon-glow.b { bottom: -200px; right: -160px; background: radial-gradient(circle, rgba(37,99,235,.5), transparent 65%); }

.neon-wrap {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 440px);
  align-items: center;
  /* Espaco largo: o globo atras do bloco da esquerda nao encosta ao cartao. */
  gap: 220px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 48px 40px;
}

/* ---------------- Lado esquerdo: marca e vantagens ---------------- */

/* Largura contida: o globo (login-neon.js) e medido para conter este bloco. */
.neon-hero { min-width: 0; max-width: 500px; justify-self: center; }

.neon-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 34px;
}
/* Logo RA sem fundo, ao lado do nome. */
.neon-brand img {
  width: auto;
  height: 46px;
  display: block;
  filter: drop-shadow(0 0 10px rgba(14,165,233,.45));
}
.neon-brand-name {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.neon-brand-name b {
  font-weight: 700;
  background: linear-gradient(90deg, #7dd3fc, #e0f2fe);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.neon-brand-name span { color: var(--neon); text-shadow: 0 0 18px rgba(56,189,248,.6); }
.neon-brand small {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .42em;
  color: var(--neon);
}

.neon-hero h2 {
  margin: 0 0 14px;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.03em;
  background: linear-gradient(100deg, #ffffff 0%, #bae6fd 30%, #38bdf8 50%, #bae6fd 70%, #ffffff 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.neon-hero p {
  margin: 0 0 30px;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

.neon-feats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 560px;
}
/* Angulo da borda luminosa de cada vantagem: registado para o JS o poder
   animar (sem isto o navegador nao interpola variaveis CSS). */
@property --fang {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.neon-feat {
  --fang: 0deg;
  --mx: 50%;
  --my: 50%;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--glass);
  border: 1px solid rgba(56, 189, 248, .16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 24px rgba(14,165,233,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s, background .25s;
}
/* Borda: um risco de luz que da a volta ao cartao (--fang vem do JS). */
.neon-feat::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from var(--fang),
    transparent 0 62%, rgba(56,189,248,.95) 76%, rgba(165,243,252,.9) 80%, rgba(34,211,238,.5) 86%, transparent 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
/* Luz que segue o cursor dentro de cada vantagem (so com rato). */
.neon-feat::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(180px circle at var(--mx) var(--my), rgba(56,189,248,.18), transparent 60%);
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
.neon-feat:hover {
  transform: translateY(-3px);
  background: rgba(12, 30, 58, .72);
  border-color: rgba(56, 189, 248, .45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 32px rgba(2,6,15,.5), 0 0 30px rgba(14,165,233,.28);
}
.neon-feat:hover::after { opacity: 1; }
/* Icone em "vidro": luz de cima a esquerda, reflexo no topo e o desenho a
   duas cores com brilho. As pecas (barras, moeda, tampa...) mexem pelo JS. */
.neon-feat-icon {
  position: relative;
  z-index: 1;
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--neon);
  background:
    radial-gradient(120% 120% at 28% 18%, rgba(56,189,248,.38), rgba(14,165,233,.1) 55%, rgba(3,12,26,.6) 100%);
  border: 1px solid rgba(56,189,248,.5);
  box-shadow: 0 0 16px rgba(14,165,233,.25), inset 0 0 12px rgba(56,189,248,.18);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), color .25s;
}
.neon-feat-icon::before {
  content: "";
  position: absolute;
  inset: 1px 1px 55% 1px;
  border-radius: 12px 12px 8px 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0));
  pointer-events: none;
}
.neon-feat-icon svg {
  position: relative;
  overflow: visible;
  filter: drop-shadow(0 0 4px rgba(56,189,248,.65));
}
/* Origem das pecas animadas, na caixa de cada uma. */
.neon-feat-icon .ni-bar,
.neon-feat-icon .ni-slice,
.neon-feat-icon .ni-cash,
.neon-feat-icon .ni-wallet,
.neon-feat-icon .ni-lid,
.neon-feat-icon .ni-spark { transform-box: fill-box; }
.neon-feat-icon .ni-bar { transform-origin: 50% 100%; }
.neon-feat-icon .ni-slice { transform-origin: 0 100%; }
.neon-feat-icon .ni-wallet { transform-origin: 50% 100%; }
.neon-feat-icon .ni-tip { transform-box: view-box; transform-origin: 19.5px 3px; }
.neon-feat-icon .ni-spark { transform-origin: 50% 50%; }
.neon-feat-icon .ni-lid { transform-origin: 15% 100%; }
.neon-feat:hover .neon-feat-icon { transform: scale(1.08); color: #bae6fd; }
/* Onda que sai do icone de vez em quando (posta pelo JS). */
.neon-feat-ping {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1.5px solid rgba(56,189,248,.85);
  opacity: 0;
  pointer-events: none;
}
.neon-feat-text {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
}
/* Brilho que atravessa o cartao (posto pelo JS). */
.neon-feat-shine {
  position: absolute;
  top: 0;
  left: 0;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(186,230,253,.16), transparent);
  transform: translateX(-130%) skewX(-18deg);
  pointer-events: none;
}

/* ---------------- Cartao do login ---------------- */

.neon-card {
  --ang: 0deg;
  --mx: 50%;
  --my: 0%;
  position: relative;
  width: 100%;
  padding: 34px 32px 26px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(14, 34, 66, .72), rgba(6, 16, 34, .78));
  box-shadow:
    0 30px 80px rgba(0, 0, 0, .55),
    0 0 60px rgba(14, 165, 233, .18),
    inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform-style: preserve-3d;
  will-change: transform;
}
/* Borda luminosa que roda (o angulo --ang vem do JS). */
.neon-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--ang),
    rgba(56,189,248,.15), rgba(56,189,248,.9) 12%, rgba(125,211,252,.25) 22%,
    rgba(56,189,248,.15) 50%, rgba(34,211,238,.85) 62%, rgba(56,189,248,.15) 74%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
/* Luz que segue o cursor dentro do cartao. */
.neon-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(56,189,248,.12), transparent 45%);
  pointer-events: none;
}
.neon-card > * { position: relative; z-index: 1; }

/* So a logo RA (fundo transparente), sem circulo nem anel. */
.neon-logo {
  width: 110px;
  margin: 0 auto 18px;
}
.neon-logo img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 10px rgba(14,165,233,.45));
}

.neon-card h1 {
  margin: 0;
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.neon-sub {
  margin: 6px 0 24px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}

.neon-field { margin-bottom: 14px; }
.neon-field label {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.neon-input {
  position: relative;
  display: flex;
  align-items: center;
  height: 50px;
  border-radius: 13px;
  background: rgba(3, 12, 26, .72);
  border: 1px solid rgba(56, 189, 248, .22);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.neon-input:focus-within {
  border-color: rgba(56, 189, 248, .85);
  background: rgba(5, 18, 38, .9);
  box-shadow: 0 0 0 3px rgba(14,165,233,.18), 0 0 22px rgba(14,165,233,.28);
}
.neon-input > svg {
  flex: none;
  margin: 0 2px 0 15px;
  color: #5b7aa0;
  transition: color .18s, filter .18s;
}
.neon-input:focus-within > svg { color: var(--neon); filter: drop-shadow(0 0 6px rgba(56,189,248,.8)); }
.neon-input input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 14px 0 10px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  /* 16px: abaixo disto o iPhone faz zoom ao tocar no campo. */
  font-size: 16px;
}
.neon-input input::placeholder { color: #4d6688; }
.neon-input input:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px #06142b inset;
  caret-color: var(--text);
}
.neon-eye {
  flex: none;
  width: 44px;
  height: 44px;
  margin-right: 3px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #6b8bb3;
  cursor: pointer;
}
.neon-eye:hover, .neon-eye:focus-visible { color: var(--neon); outline: none; background: rgba(56,189,248,.08); }

.neon-btn {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 52px;
  margin-top: 8px;
  border: 0;
  border-radius: 13px;
  cursor: pointer;
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: .01em;
  background: linear-gradient(90deg, #0284c7, #0ea5e9 45%, #22d3ee);
  box-shadow: 0 10px 30px rgba(14,165,233,.35), 0 0 0 1px rgba(125,211,252,.35) inset;
  transition: filter .15s, box-shadow .15s;
}
.neon-btn:hover { filter: brightness(1.08); box-shadow: 0 12px 36px rgba(14,165,233,.5), 0 0 0 1px rgba(186,230,253,.5) inset; }
.neon-btn:focus-visible { outline: 2px solid #bae6fd; outline-offset: 3px; }
.neon-btn[disabled] { cursor: progress; }
.neon-btn-label { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 10px; }
.neon-btn-shine {
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: translateX(-160%) skewX(-18deg);
  pointer-events: none;
}
.neon-ripple {
  position: absolute;
  z-index: 1;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  pointer-events: none;
}
.neon-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  display: none;
}
.neon-btn.loading .neon-spinner { display: inline-block; }
.neon-btn.ok { background: linear-gradient(90deg, #059669, #10b981, #34d399); }

.neon-auth .msg {
  min-height: 20px;
  margin-top: 12px;
  font-size: 14px;
  text-align: center;
  color: var(--muted);
}
.neon-auth .msg.err { color: var(--error); }
.neon-auth .msg.ok { color: var(--success); }

/* ---------------- Registo (register.html) ----------------
   Mais campos: cartao mais largo, campos em duas colunas e logo mais
   pequena, para o formulario caber no ecra sem rolar. */
.neon-register .neon-wrap {
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: 110px;
  max-width: 1340px;
}
.neon-register .neon-card { padding: 28px 30px 22px; }
.neon-register .neon-logo { width: 84px; margin-bottom: 12px; }
.neon-register .neon-sub { margin-bottom: 20px; }
.neon-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 14px;
}
.neon-field-full { grid-column: 1 / -1; }
/* Calendario do campo de data com cores escuras. */
.neon-input input[type="date"] { color-scheme: dark; }
.neon-input input[type="date"]::-webkit-calendar-picker-indicator { opacity: .6; cursor: pointer; }

.neon-links {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.neon-links a { color: #93c5fd; text-decoration: none; transition: color .15s, text-shadow .15s; }
.neon-links a:hover, .neon-links a:focus-visible { color: #e0f2fe; text-shadow: 0 0 12px rgba(56,189,248,.8); outline: none; }
.neon-links a.strong { color: var(--neon); font-weight: 600; }

/* Botoes flutuantes: o tema e sempre escuro aqui, por isso o de claro/escuro
   nao faz nada nesta pagina e sai; o de idioma ganha o aspeto neon. */
.neon-auth .theme-toggle { display: none; }
.neon-auth .lang-toggle {
  position: fixed; bottom: 20px; right: 20px; z-index: 40;
  height: 42px; min-width: 42px; padding: 0 14px; margin: 0; border-radius: 21px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(9, 22, 44, .75); color: var(--text);
  border: 1px solid rgba(56,189,248,.45);
  box-shadow: 0 0 18px rgba(14,165,233,.25);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font: 600 13px "Inter", system-ui, sans-serif; cursor: pointer;
}
.neon-auth .lang-toggle:hover { border-color: var(--neon); }

/* ---------------- Ecras mais pequenos ---------------- */

@media (max-width: 960px) {
  /* Formulario ao centro do ecra; o planeta (login-neon.js) nasce no fundo,
     por baixo do cartao. */
  .neon-wrap {
    grid-template-columns: minmax(0, 460px);
    justify-content: center;
    align-content: center;
    gap: 22px;
    padding: 32px 20px 96px;
  }
  .neon-register .neon-wrap { grid-template-columns: minmax(0, 560px); gap: 22px; }
  /* Paginas curtas (login, recuperar, nova palavra-passe): o formulario fica
     ao centro do espaco que sobra por cima do planeta -- a folga de baixo
     (15% da altura) e a faixa onde o planeta aparece, por isso o conteudo
     sobe. O registo e comprido e rola, por isso mantem a folga normal (o
     botao de idioma nao tapa o ultimo link). */
  body.neon-auth:not(.neon-register) .neon-wrap {
    padding-top: 24px;
    padding-bottom: clamp(28px, 15vh, 150px);
  }
  .neon-hero { text-align: center; }
  .neon-brand { justify-content: center; margin-bottom: 0; }
  .neon-hero h2, .neon-hero p, .neon-feats { display: none; }
  /* A marca ja aparece por cima do cartao: o logotipo la dentro repetia-a. */
  .neon-card .neon-logo { display: none; }
}

/* Telemovel com altura para isso: o titulo do bloco de apresentacao volta a
   aparecer entre a marca e o cartao, para o topo do ecra nao ficar vazio; a
   frase so em ecras muito altos (com ela o cartao descia e tapava o
   planeta). Em ecras baixos ficam escondidos (sem scroll). */
@media (max-width: 960px) and (min-height: 700px) {
  .neon-hero h2 {
    display: block;
    font-size: clamp(24px, 7.2vw, 32px);
    margin: 18px 0 0;
  }
}
@media (max-width: 960px) and (min-height: 880px) {
  .neon-hero h2 { margin-bottom: 8px; }
  .neon-hero p {
    display: block;
    max-width: 32ch;
    margin: 0 auto;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .neon-wrap { padding: 24px 14px 92px; gap: 18px; }
  .neon-brand img { height: 38px; }
  .neon-brand-name { font-size: 24px; }
  .neon-card { padding: 28px 20px 22px; border-radius: 20px; }
  .neon-logo { width: 92px; margin-bottom: 14px; }
  .neon-card h1 { font-size: 23px; }
}

/* Telemovel: os campos do registo voltam a uma coluna. */
@media (max-width: 560px) {
  .neon-grid { grid-template-columns: minmax(0, 1fr); }
  .neon-register .neon-card { padding: 26px 18px 20px; }
}