/* ===========================================================================
   CardioSim · LOGIN / BOAS-VINDAS — Layout
   Primeira impressão da plataforma. Duas vias claras (Formador / Formando),
   estética clínica escura premium, traçado de ECG decorativo no rodapé.
   =========================================================================== */

body {
  overflow-x: hidden;
  color-scheme: dark;
  background:
    radial-gradient(800px 540px at 25% 10%, rgba(0,230,160,0.10), transparent 60%),
    radial-gradient(700px 480px at 88% 100%, rgba(43,215,245,0.06), transparent 60%),
    var(--bg-base);
}

.lg-layout {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
  padding: 36px clamp(20px, 5vw, 64px) 0;
  gap: 22px;
  max-width: 1480px;
  margin: 0 auto;
}

/* ---------- Cabeçalho com marca e tagline ---------- */
.lg-cabeca {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 36px;
  align-items: start;
  padding-bottom: 8px;
}
.lg-cabeca .marca { padding-top: 4px; }
.lg-cabeca .marca-nome { font-size: 18px; letter-spacing: 0.14em; }

.lg-tagline { max-width: 720px; }
.lg-pre { display: block; margin-bottom: 10px; }
.lg-tagline h1 {
  font-size: clamp(28px, 4vw, 44px); line-height: 1.08;
  font-weight: 600; letter-spacing: -0.02em; color: var(--text-hi);
}
.lg-tagline h1 em {
  font-style: normal; color: var(--accent);
}
.lg-sub {
  margin-top: 12px; max-width: 560px;
  font-size: 14px; line-height: 1.55; color: var(--text-mid);
}

/* ---------- Cartões ---------- */
.lg-cartoes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-content: center;
  align-self: center;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.lg-cartao {
  background: linear-gradient(180deg, var(--surface-1) 0%, rgba(14,19,27,0.9) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 28px 28px 24px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 22px;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
  position: relative;
  overflow: hidden;
}
.lg-cartao::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(280px 180px at 0% 0%, rgba(0,230,160,0.06), transparent 60%);
  opacity: 0; transition: opacity var(--t) var(--ease);
}
.lg-cartao:hover, .lg-cartao:focus-within {
  border-color: var(--accent-line);
  transform: translateY(-2px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px var(--accent-line);
}
.lg-cartao:hover::before, .lg-cartao:focus-within::before { opacity: 1; }

.lg-cartao-topo {
  display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: start;
}
.lg-icone {
  width: 60px; height: 60px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
}
.lg-icone svg { width: 36px; height: 36px; }
.lg-icone-formador { color: var(--accent); }
.lg-icone-formando { color: var(--accent-2); }
.lg-cartao:hover .lg-icone-formador { box-shadow: 0 0 0 1px var(--accent-line), 0 0 18px rgba(0,230,160,0.22); }
.lg-cartao:hover .lg-icone-formando { box-shadow: 0 0 0 1px rgba(43,215,245,0.4), 0 0 18px rgba(43,215,245,0.22); }

.lg-cartao h2 {
  font-size: 22px; font-weight: 600; color: var(--text-hi);
  letter-spacing: -0.01em; margin-bottom: 6px;
}
.lg-cartao-topo p {
  font-size: 13.5px; line-height: 1.5; color: var(--text-mid); max-width: 360px;
}

/* Formulário dentro do cartão */
.lg-form { display: flex; flex-direction: column; gap: 14px; }
.lg-form .campo { gap: 6px; }
.lg-form .input { height: 48px; font-size: 15px; }
.lg-form .input.lg-cod {
  font-family: var(--font-mono); font-size: 22px; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase; text-align: center;
  color: var(--accent);
}
.lg-form .input.lg-cod::placeholder { color: var(--text-faint); letter-spacing: 0.28em; }

.lg-entrar {
  margin-top: 4px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}

.lg-aviso {
  font-size: 12px; color: var(--text-lo); margin-top: 2px;
}
.lg-aviso strong { color: var(--accent); font-weight: 500; }

.lg-form.erro .input { border-color: var(--crit); box-shadow: 0 0 0 3px var(--crit-soft); }
.lg-form .lg-msg {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--crit); display: none;
}
.lg-form.erro .lg-msg { display: block; }

/* ---------- Rodapé: traçado decorativo + créditos ---------- */
.lg-rodape {
  position: relative;
  margin-top: 8px;
  padding: 0 clamp(20px, 5vw, 32px) 18px;
}
.lg-ecg-fundo {
  display: block; width: 100%; height: 60px;
  color: var(--ecg);
  opacity: 0.16;
  filter: drop-shadow(0 0 6px rgba(61,245,138,0.4));
  animation: lg-deslize 18s linear infinite;
}
@keyframes lg-deslize { from { transform: translateX(0); } to { transform: translateX(-280px); } }

.lg-creditos {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px;
}

/* ===========================================================================
   RESPONSIVO — Smartphone horizontal
   =========================================================================== */
@media (max-height: 580px) {
  .lg-layout { padding: 16px 16px 0; gap: 12px; }
  .lg-cabeca { grid-template-columns: 1fr; gap: 8px; padding-bottom: 0; }
  .lg-cabeca .marca-nome { font-size: 14px; }
  .lg-tagline h1 { font-size: 18px; }
  .lg-sub { font-size: 11.5px; margin-top: 6px; line-height: 1.4; }
  .lg-pre { font-size: 9px; margin-bottom: 4px; }
  .lg-cartoes { gap: 12px; max-width: 100%; }
  .lg-cartao { padding: 14px 16px 12px; gap: 12px; border-radius: var(--r-md); }
  .lg-cartao-topo { grid-template-columns: 42px 1fr; gap: 12px; }
  .lg-icone { width: 40px; height: 40px; }
  .lg-icone svg { width: 22px; height: 22px; }
  .lg-cartao h2 { font-size: 15px; margin-bottom: 2px; }
  .lg-cartao-topo p { font-size: 11px; line-height: 1.35; }
  .lg-form { gap: 8px; }
  .lg-form .input { height: 36px; font-size: 13px; }
  .lg-form .input.lg-cod { font-size: 16px; letter-spacing: 0.20em; }
  .lg-form .campo-rotulo { font-size: 9.5px; }
  .lg-entrar { min-height: 38px; height: 38px; font-size: 13px; padding: 0 16px; }
  .lg-aviso { font-size: 10px; }
  .lg-ecg-fundo { height: 32px; }
  .lg-rodape { padding: 0 16px 8px; margin-top: 4px; }
  .lg-creditos { margin-top: 4px; }
  .lg-creditos .micro { font-size: 9px; }
}

@media (max-width: 700px) {
  body { overflow-y: auto; overflow-x: hidden; }
  .lg-layout {
    display: flex; flex-direction: column;
    height: auto; min-height: 100dvh;
    padding: 28px 18px 28px; gap: 22px;
  }
  /* Cabeçalho empilhado e centrado */
  .lg-cabeca {
    grid-template-columns: 1fr; gap: 18px; text-align: center; padding-bottom: 0;
  }
  .lg-cabeca .marca { padding-top: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
  .lg-cabeca .marca-nome { font-size: 15px; letter-spacing: 0.18em; }
  .lg-tagline { max-width: 100%; }
  .lg-pre { margin-bottom: 8px; font-size: 11px; letter-spacing: 0.16em; }
  .lg-tagline h1 { font-size: clamp(30px, 8.5vw, 40px); line-height: 1.06; }
  .lg-sub { margin: 12px auto 0; max-width: 420px; font-size: 14px; }

  /* Cartões grandes, tocáveis, empilhados */
  .lg-cartoes { grid-template-columns: 1fr; gap: 14px; max-width: 460px; }
  .lg-cartao { padding: 20px; border-radius: 18px; }
  .lg-cartao-topo { gap: 14px; }
  .lg-icone { width: 46px; height: 46px; }
  .lg-form .input { padding: 13px 14px; font-size: 16px; border-radius: 12px; }  /* 16px evita zoom no iOS */
  .lg-form .btn { padding: 13px; font-size: 15px; border-radius: 12px; }

  .lg-disclaimer { font-size: 10.5px; margin-top: 8px; }
  .pedir-rodar { display: none !important; }   /* o login NÃO precisa de horizontal */

  /* ECG de fundo mais subtil e ancorado em baixo no telemóvel */
  .lg-ecg-fundo { top: auto; bottom: 12%; transform: none; height: 140px; opacity: 0.08; }
}

@media (max-width: 700px) and (min-height: 720px) {
  /* ecrãs altos: dar mais respiração e centrar verticalmente */
  .lg-layout { justify-content: center; gap: 30px; }
}

/* ===========================================================================
   V7 — ECG dinâmico de fundo + disclaimer + polish
   =========================================================================== */
.lg-layout { position: relative; }
.lg-ecg-fundo {
  position: fixed; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  height: 200px; opacity: 0.10; pointer-events: none; z-index: 0;
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}
.lg-ecg-svg { width: 200%; height: 100%; display: block; animation: ecgDesliza 12s linear infinite; }
.lg-ecg-linha {
  fill: none; stroke: var(--accent, #3DF58A); stroke-width: 2.5;
  stroke-linejoin: round; stroke-linecap: round;
  filter: drop-shadow(0 0 6px var(--accent, #3DF58A));
}
@keyframes ecgDesliza { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* um traço luminoso que percorre o ECG */
.lg-ecg-fundo::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 120px;
  background: linear-gradient(90deg, transparent, rgba(61,245,138,0.25), transparent);
  animation: ecgVarre 4s linear infinite;
}
@keyframes ecgVarre { from { left: -120px; } to { left: 100%; } }

.lg-cabeca, .lg-cartoes, .lg-rodape, footer { position: relative; z-index: 1; }

.lg-disclaimer {
  max-width: 680px; margin: 14px auto 0; text-align: center;
  font-size: 11px; line-height: 1.5; color: var(--text-faint, #5A6675);
  border-top: 1px solid var(--line, #1E2630); padding-top: 12px;
}

/* Cartão de sessão destacado quando se entra por link de convite */
.lg-cartao.lg-destaque {
  border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-line), 0 0 32px rgba(0,230,160,0.22);
  order: -1;
}

/* Layout "solo" (registo / página única centrada) */
.lg-layout-solo { display: flex; flex-direction: column; min-height: 100dvh; }
.lg-cabeca-solo { grid-template-columns: 1fr; }
.lg-solo-wrap { flex: 1; display: grid; place-items: center; padding: 20px 16px 40px; }
.lg-solo-wrap .lg-cartao { width: 100%; max-width: 420px; }
.lg-alt { text-align: center; margin-top: 18px; font-size: 14px; color: var(--text-lo); }
.lg-alt a { color: var(--accent); text-decoration: none; font-weight: 600; }
.lg-erro { color: var(--crit, #FF5C66); font-size: 13.5px; margin: 4px 0 0; }

/* ====== Acesso unificado: tabs login/registo ====== */
.lg-acesso { padding-top: 20px; }
.lg-tabs { display: flex; gap: 6px; padding: 5px; background: var(--bg-sunken, #0a0e14); border: 1px solid var(--line); border-radius: var(--r-pill); margin-bottom: 16px; }
.lg-tab { flex: 1; padding: 11px 14px; border: none; background: transparent; color: var(--text-lo); font-size: 15px; font-weight: 600; border-radius: var(--r-pill); cursor: pointer; transition: background .2s, color .2s; font-family: inherit; }
.lg-tab.ativo { background: var(--accent); color: #06120c; }
.lg-acesso-sub { font-size: 13.5px; line-height: 1.5; color: var(--text-lo); margin: 0 0 18px; text-align: center; }
.lg-acesso-sub strong { color: var(--text-mid); }

/* Divisor "ou" */
.lg-ou { display: flex; align-items: center; gap: 14px; max-width: 420px; margin: 22px auto; color: var(--text-faint); }
.lg-ou::before, .lg-ou::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.lg-ou span { font-size: 12px; font-family: var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }

/* Cartão de sessão */
.lg-sessao { width: 100%; max-width: 420px; }
.lg-cod { text-transform: uppercase; letter-spacing: .18em; font-family: var(--font-mono); font-size: 18px; }
.lg-icone-formando { background: rgba(43,215,245,0.12); color: var(--spo2); border-color: rgba(43,215,245,0.3); }

/* Mensagem de erro inline */
.lg-msg { color: var(--crit, #FF5C66); font-size: 13.5px; margin: 8px 0 0; }

/* Mobile: tudo numa coluna confortável */
@media (max-width: 560px){
  .lg-solo-wrap { padding: 12px 14px 36px; }
  .lg-tab { padding: 12px 10px; font-size: 14.5px; }
  .lg-cartao { padding: 18px 16px; }
  .lg-cabeca-solo { padding: 14px 16px; }
}