/* ============================================================
   login.css — BackOffice Portal, página de login
   IDEA Spaces · redesign v2 · Setembro 2026
   Depende só de si próprio: a página não carrega o site.css
   (Layout = null), por isso a Manrope self-hosted é declarada aqui
   com os mesmos ficheiros e unicode-range do site.css.
   ============================================================ */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/manrope-variable-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/manrope-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokens usados nesta página (subconjunto do portal) ----- */
:root {
  --ip-blue:        #1512ec;   /* primária IDEA */
  --ip-blue-dark:   #100ec2;   /* hover da primária */
  --ip-yellow:      #ffde17;   /* logo sobre azul */
  --ip-ink:         #1a2234;   /* texto principal */
  --ip-ink-2:       #455070;   /* texto secundário forte */
  --ip-ink-3:       #667291;   /* texto secundário */
  --ip-ink-4:       #8b96ae;   /* meta / labels */
  --ip-line:        #d6e0ec;   /* borda padrão */
  --ip-line-soft:   #eef2f7;   /* borda/divisória ténue */
  --ip-surface:     #ffffff;
  --ip-surface-2:   #f6f8fb;   /* fundo de campo agrupado */
  --ip-warn-bg:     #fff8d4;
  --ip-warn-line:   #e8d489;
  --ip-warn-ink:    #7a5c00;
  --ip-focus:       0 0 0 3px rgba(21,18,236,.14);
}

/* --- Reset local ------------------------------------------- */
.login-page, .login-page * { box-sizing: border-box; }
.login-page {
  margin: 0;
  min-height: 100vh;
  background: var(--ip-surface);
  color: var(--ip-ink);
  font-family: Manrope, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.login-page button { font-family: inherit; }

/* --- Grelha: 2 colunas em desktop, empilha abaixo de ~840px -- */
.login-grid {
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}

/* ============================================================
   Painel esquerdo — marca
   ============================================================ */
.login-brand {
  position: relative;
  overflow: hidden;
  background: var(--ip-blue);
  padding: clamp(30px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  min-height: clamp(340px, 42vh, 520px);
}
/* Os dois círculos decorativos. Mesmo gesto do hero da Home. */
.login-brand::before,
.login-brand::after {
  content: '';
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}
.login-brand::before { right: -90px;  top: -120px;    width: 380px; height: 380px; background: rgba(255,222,23,.16); }
.login-brand::after  { left: -120px;  bottom: -180px; width: 340px; height: 340px; background: rgba(255,255,255,.07); }

.login-brand > * { position: relative; }

.login-brandmark { display: flex; align-items: center; gap: 14px; }
.lg-logo { flex: none; display: block; }
.login-brandmark strong {
  font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: #fff;
  border-left: 1px solid rgba(255,255,255,.28); padding-left: 14px; line-height: 1.2;
}

.login-pitch { max-width: 30ch; }
.login-pitch h1 {
  margin: 0;
  font-size: clamp(30px, 3.2vw, 48px);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: #fff;
  text-wrap: balance;
}
.login-pitch p {
  margin: 14px 0 0; max-width: 42ch;
  font-size: clamp(13.5px, 1.05vw, 16px); line-height: 1.5;
  color: rgba(255,255,255,.76);
}

.login-foot { display: flex; flex-direction: column; gap: 14px; }
.login-modules { display: flex; flex-wrap: wrap; gap: 7px; }
.login-modules span {
  font-size: 12px; font-weight: 700; color: #fff;
  background: rgba(255,255,255,.12); border-radius: 999px; padding: 6px 12px;
}
.login-offices {
  margin: 0; font-size: 11.5px; font-weight: 600;
  color: rgba(255,255,255,.78);   /* .78 é o mínimo para 4.5:1 sobre #1512ec */
}

/* ============================================================
   Painel direito — formulário
   ============================================================ */
.login-form-col {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(30px, 4vw, 56px);
}
.login-form { width: 100%; max-width: 396px; }

.login-eyebrow {
  margin: 0; font-size: 11px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ip-ink-4);
}
.login-form h2 {
  margin: 8px 0 0; font-size: 27px; font-weight: 800; letter-spacing: -.025em;
}
.login-lede {
  margin: 9px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ip-ink-3);
}

/* Botão Google — acção primária, mas em branco: o azul cheio
   fica reservado ao "Entrar" do fallback para não haver dois primários. */
.btn-google {
  width: 100%; height: 50px; margin-top: 24px;
  display: flex; align-items: center; justify-content: center; gap: 11px;
  border: 1px solid var(--ip-line); border-radius: 12px; background: #fff;
  font-size: 14.5px; font-weight: 800; color: var(--ip-ink);
  cursor: pointer; box-shadow: 0 2px 5px rgba(28,46,80,.07);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.btn-google:hover        { border-color: var(--ip-blue); box-shadow: 0 0 0 3px rgba(21,18,236,.13); }
.btn-google:focus-visible{ outline: none; border-color: var(--ip-blue); box-shadow: var(--ip-focus); }
.btn-google svg { flex: none; }

/* Separador "ou" */
.login-or { display: flex; align-items: center; gap: 12px; margin: 22px 0; }
.login-or::before, .login-or::after { content: ''; flex: 1; height: 1px; background: var(--ip-line); }
.login-or span {
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ip-ink-4);
}

/* Disclosure do login local (estado fechado) */
.btn-local-toggle {
  width: 100%; height: 44px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px dashed var(--ip-line); border-radius: 11px; background: var(--ip-surface-2);
  font-size: 13px; font-weight: 700; color: var(--ip-ink-3); cursor: pointer;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.btn-local-toggle:hover { border-color: #bccbde; color: var(--ip-ink); background: var(--ip-line-soft); }
.btn-local-toggle:focus-visible { outline: none; border-color: var(--ip-blue); box-shadow: var(--ip-focus); }
.login-local-hint {
  margin: 10px 0 0; font-size: 11.5px; line-height: 1.5;
  color: var(--ip-ink-4); text-align: center;
}

/* Painel do login local (estado aberto) */
.login-local {
  border: 1px solid var(--ip-line); border-radius: 13px;
  background: var(--ip-surface-2); padding: 16px;
}
.login-local-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.login-local-head strong {
  font-size: 12px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ip-ink-2);
}
.tag-fallback {
  font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ip-warn-ink); background: var(--ip-warn-bg);
  border: 1px solid var(--ip-warn-line); border-radius: 5px; padding: 2px 6px;
}
.login-local-close {
  margin-left: auto; border: none; background: none; padding: 0;
  font-size: 12px; font-weight: 700; color: var(--ip-ink-3); cursor: pointer;
}
.login-local-close:hover { color: var(--ip-blue); }

.login-local label {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ip-ink-3); margin-bottom: 6px;
}
.login-local label + label, .login-field + label { margin-top: 13px; }
.login-local input {
  width: 100%; height: 42px; padding: 0 12px;
  border: 1px solid var(--ip-line); border-radius: 10px; background: #fff;
  font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--ip-ink);
  outline: none;
}
.login-local input:focus { border-color: var(--ip-blue); box-shadow: var(--ip-focus); }
.login-field { position: relative; }
.login-field input { padding-right: 62px; }
.btn-pw-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: none; background: none; padding: 4px;
  font-size: 11.5px; font-weight: 800; color: var(--ip-blue); cursor: pointer;
}

.btn-primary {
  width: 100%; height: 46px; margin-top: 16px;
  border: none; border-radius: 11px; background: var(--ip-blue); color: #fff;
  font-size: 14px; font-weight: 800; cursor: pointer;
  transition: background .12s ease;
}
.btn-primary:hover { background: var(--ip-blue-dark); }
.btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(21,18,236,.35); }

/* Erro de credenciais — ver secção 6 do LEIA-ME */
.login-error {
  display: flex; gap: 9px; align-items: flex-start;
  margin-top: 16px; padding: 11px 13px;
  border: 1px solid #f0c9bd; border-radius: 11px; background: #fbeee9;
  font-size: 12.5px; line-height: 1.45; font-weight: 600; color: #8f3320;
}

/* Rodapé do formulário */
.login-meta {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--ip-line-soft);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--ip-ink-4);
}

/* --- Empilhado (<= 840px): a marca encolhe, o form manda ---- */
@media (max-width: 840px) {
  .login-brand { min-height: 0; gap: 26px; }
  .login-pitch h1 { font-size: 28px; }
  .login-foot { display: none; }   /* módulos + escritórios saem no telemóvel */
}


/* Dev login — só renderizado em Development (loopback). Vive dentro do painel
   local, por cima das credenciais, e é a única coisa a tracejado azul da página. */
.btn-dev {
  width: 100%; height: 42px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px dashed var(--ip-blue); border-radius: 10px; background: #fff;
  font-size: 12.5px; font-weight: 800; color: var(--ip-blue); cursor: pointer;
  transition: background .12s ease, box-shadow .12s ease;
}
.btn-dev:hover { background: rgba(21,18,236,.05); }
.btn-dev:focus-visible { outline: none; box-shadow: var(--ip-focus); }
.login-dev-sep { height: 1px; background: var(--ip-line); margin: 0 0 14px; }

/* ============================================================
   Movimento — 3 animações, todas curtas e todas desligáveis
   ============================================================ */

/* 1. Entrada da página. O painel de marca entra por fade,
      o formulário sobe 10px. Corre uma vez, ao carregar. */
@keyframes ip-fade   { from { opacity: 0; }                      to { opacity: 1; } }
@keyframes ip-rise   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.login-brand { animation: ip-fade .32s ease-out both; }
.login-form  { animation: ip-rise .38s cubic-bezier(.22,.61,.36,1) both .06s; }

/* 2. Abertura do painel de login local. Altura + opacidade.
      A altura é animada por JS (ver login.html) porque o auto
      não interpola; aqui fica só a curva e o fade. */
@keyframes ip-panel  { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.login-local[data-entering] { animation: ip-panel .2s ease-out both; }

/* 3. Shake do erro. Uma vez, 380ms, amplitude pequena.
      Só quando o servidor devolve credenciais inválidas. */
@keyframes ip-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-5px); }
  45%      { transform: translateX(4px); }
  70%      { transform: translateX(-2px); }
}
.login-local[data-error] { animation: ip-shake .38s ease-in-out both; }

/* Tudo isto desaparece com reduced-motion — ver regra no fim do ficheiro. */

@media (prefers-reduced-motion: reduce) {
  .login-page *,
  .login-page *::before,
  .login-page *::after {
    animation: none !important;
    transition: none !important;
  }
}