/* ============================================================================
   Tela de entrada do ChatNOC -- "vidro sobre mesh".

   Folha SEPARADA e escopada em .login-page de proposito: o app.css e' carregado
   em todas as telas, e este desenho tem tipografia, cores e reset proprios que
   nao devem vazar para o resto do sistema. Carregada so' nesta pagina.

   As fontes sao servidas daqui (app/static/fonts) e nao do Google: o ChatNOC roda
   dentro do provedor, e ha' cliente sem saida livre para a internet -- alem de
   evitar que abrir a tela de login conte a um terceiro quem esta abrindo.
   ========================================================================= */

@font-face {
  font-family: "InterLocal";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/inter-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;
}

@font-face {
  font-family: "InterLocal";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/inter-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: "JetBrainsMonoLocal";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-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;
}

.login-page {
  --accent: #2f86f5;
  --accent-2: #4b9cff;
  --accent-700: #1b5fc4;
  --navy: #0b2452;
  --navy-900: #061838;
  --ok: #12b981;
  --warn: #f59e0b;
  --danger: #e5384b;
  --wash: #f6f9fd;
  --line: #e4ebf5;
  --ink: #0d1727;
  --ink-2: #4a5e7c;
  --ink-3: #8496b0;
  --ink-4: #b4c1d4;
  --r: 12px;
  --r-lg: 24px;
  --login-font: "InterLocal", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --login-mono: "JetBrainsMonoLocal", ui-monospace, SFMono-Regular, monospace;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  font-family: var(--login-font);
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* O fundo cobre a janela inteira: a tela de entrada nao divide espaco com nada. */
.login-mesh {
  background: var(--navy);
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  z-index: 0;
}

.login-mesh i {
  border-radius: 50%;
  filter: blur(110px);
  position: absolute;
  will-change: transform;
}

.login-mesh .b1 { width: min(660px, 80vw); aspect-ratio: 1; background: #2f86f5; top: -16%; left: -10%; opacity: 0.9; animation: loginDrift 26s var(--ease) infinite alternate; }
.login-mesh .b2 { width: min(560px, 70vw); aspect-ratio: 1; background: #22d3ee; bottom: -20%; left: 24%; opacity: 0.5; animation: loginDrift 32s var(--ease) infinite alternate-reverse; }
.login-mesh .b3 { width: min(600px, 72vw); aspect-ratio: 1; background: #7c6cff; top: 4%; right: -12%; opacity: 0.62; animation: loginDrift 29s var(--ease) infinite alternate; }
.login-mesh .b4 { width: min(420px, 55vw); aspect-ratio: 1; background: #0ea5e9; bottom: 8%; right: 14%; opacity: 0.35; animation: loginDrift 24s var(--ease) infinite alternate-reverse; }

@keyframes loginDrift { to { transform: translate3d(70px, -60px, 0) scale(1.14); } }

.login-veil {
  background: linear-gradient(115deg, rgba(6, 24, 56, 0.72) 0%, rgba(6, 24, 56, 0.3) 42%, rgba(6, 24, 56, 0.66) 100%);
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: 1;
}

.login-layout {
  align-items: center;
  display: grid;
  gap: 56px;
  grid-template-columns: 1fr minmax(400px, 468px);
  margin: 0 auto;
  max-width: 1260px;
  min-height: 100vh;
  padding: 56px 6%;
  position: relative;
  z-index: 2;
}

.login-copy { color: #fff; max-width: 560px; }

/* A assinatura e' o primeiro elemento da tela e precisa ler como marca, nao como
   enfeite: por isso ela vem grande e com respiro proprio. */
.login-brand-logo {
  display: block;
  height: 62px;
  margin-bottom: 4px;
  width: auto;
}

.login-eyebrow {
  align-items: center;
  color: #a8cdff;
  display: flex;
  font-size: 11px;
  font-weight: 800;
  gap: 9px;
  letter-spacing: 1.8px;
  margin-top: 38px;
  text-transform: uppercase;
  width: fit-content;
}

.login-eyebrow::before { background: #a8cdff; border-radius: 2px; content: ""; height: 1.5px; width: 24px; }

.login-copy h1 {
  font-size: clamp(29px, 3.5vw, 44px);
  font-weight: 800;
  letter-spacing: -1.6px;
  line-height: 1.11;
  margin-top: 18px;
}

.login-copy h1 em {
  background: linear-gradient(96deg, #bfdbff 0%, #8fe9ff 55%, #c9c2ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-style: normal;
}

.login-lead { color: rgba(255, 255, 255, 0.82); font-size: 15.5px; line-height: 1.72; margin-top: 18px; max-width: 46ch; }

.login-feats { display: flex; flex-direction: column; gap: 13px; margin-top: 32px; }
.login-feat { align-items: flex-start; color: rgba(255, 255, 255, 0.9); display: flex; font-size: 14px; gap: 12px; line-height: 1.55; }
.login-feat i {
  align-items: center;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  display: grid;
  flex: none;
  height: 24px;
  justify-items: center;
  place-items: center;
  width: 24px;
}
.login-feat i svg { color: #fff; height: 13px; width: 13px; }

/* ===== cartao ===== */
.login-card {
  animation: loginRise 0.75s var(--ease) both 0.1s;
  backdrop-filter: blur(24px) saturate(170%);
  background: rgba(255, 255, 255, 0.965);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: var(--r-lg);
  box-shadow: 0 2px 6px rgba(3, 16, 42, 0.12), 0 24px 48px -20px rgba(3, 16, 42, 0.45), 0 60px 120px -50px rgba(3, 16, 42, 0.75);
  padding: 36px 38px 28px;
  position: relative;
}

@keyframes loginRise { from { opacity: 0; transform: translateY(20px) scale(0.985); } }

.login-card.shake { animation: loginShake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes loginShake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}

.login-card .head { align-items: center; display: flex; gap: 12px; justify-content: flex-end; margin-bottom: 22px; }
.login-card .head .login-logo { height: 34px; margin-right: auto; width: auto; }
.login-card .ver { color: var(--ink-4); font-family: var(--login-mono); font-size: 10px; letter-spacing: 0.4px; }
.login-card h2 { font-size: 25px; font-weight: 800; letter-spacing: -0.8px; }
.login-card .sub { color: var(--ink-2); font-size: 13.5px; line-height: 1.55; margin-top: 7px; }

.login-form { display: flex; flex-direction: column; gap: 13px; margin-top: 22px; }

.login-alert {
  align-items: flex-start;
  border: 1px solid rgba(229, 56, 75, 0.3);
  background: rgba(229, 56, 75, 0.07);
  border-radius: var(--r);
  color: #a61b2b;
  display: none;
  font-size: 12.8px;
  font-weight: 500;
  gap: 10px;
  line-height: 1.5;
  padding: 12px 14px;
}
.login-alert.show { animation: loginPop 0.3s var(--ease); display: flex; }
@keyframes loginPop { from { opacity: 0; transform: translateY(-6px); } }
.login-alert svg { color: var(--danger); flex: none; height: 16px; margin-top: 1px; width: 16px; }

.login-fld { position: relative; }
.login-fld input {
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 500;
  height: 54px;
  outline: none;
  padding: 19px 46px 6px 42px;
  transition: 0.22s var(--ease);
  width: 100%;
}
.login-fld input:hover { background: #fff; border-color: #d3deec; }
.login-fld input:focus { background: #fff; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(47, 134, 245, 0.14); }
.login-fld input:-webkit-autofill { -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 40px #fff inset; }
.login-fld label {
  color: var(--ink-3);
  font-size: 14px;
  left: 42px;
  pointer-events: none;
  position: absolute;
  top: 17px;
  transform-origin: left top;
  transition: 0.2s var(--ease);
}
.login-fld input:focus + label,
.login-fld input:not(:placeholder-shown) + label {
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.3px;
  transform: translateY(-9px) scale(0.76);
}
.login-fld .ic { color: var(--ink-3); height: 17px; left: 15px; pointer-events: none; position: absolute; top: 50%; transform: translateY(-50%); transition: 0.22s var(--ease); width: 17px; }
.login-fld input:focus ~ .ic { color: var(--accent); }
.login-fld .pk {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 9px;
  color: var(--ink-3);
  cursor: pointer;
  display: grid;
  height: 36px;
  place-items: center;
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.2s var(--ease);
  width: 36px;
}
.login-fld .pk:hover { background: rgba(47, 134, 245, 0.1); color: var(--accent); }
.login-fld .pk svg { height: 17px; width: 17px; }
.login-eye-off { display: none; }
.login-fld.revealed .login-eye-on { display: none; }
.login-fld.revealed .login-eye-off { display: block; }
.login-fld.invalid input { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(229, 56, 75, 0.12); }
.login-fld.invalid .ic { color: var(--danger); }

.login-caps { align-items: center; color: #9a6400; display: none; font-size: 11.5px; font-weight: 600; gap: 6px; margin-top: 7px; padding-left: 3px; }
.login-caps.show { display: flex; }
.login-caps svg { color: var(--warn); height: 13px; width: 13px; }

.login-btn {
  align-items: center;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  border: 0;
  border-radius: var(--r);
  box-shadow: 0 10px 24px -10px rgba(47, 134, 245, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 14.5px;
  font-weight: 700;
  gap: 9px;
  height: 52px;
  justify-content: center;
  overflow: hidden;
  position: relative;
  transition: 0.25s var(--ease);
}
.login-btn:hover { box-shadow: 0 16px 32px -12px rgba(47, 134, 245, 0.92), inset 0 1px 0 rgba(255, 255, 255, 0.3); transform: translateY(-1.5px); }
.login-btn:active { transform: translateY(0); }
.login-btn svg:not(.spin) { height: 16px; transition: transform 0.25s var(--ease); width: 16px; }
.login-btn:hover svg:not(.spin) { transform: translateX(3px); }
.login-btn .spin {
  animation: loginSpin 0.7s linear infinite;
  border: 2px solid rgba(255, 255, 255, 0.34);
  border-radius: 50%;
  border-top-color: #fff;
  display: none;
  height: 18px;
  width: 18px;
}
@keyframes loginSpin { to { transform: rotate(360deg); } }
.login-btn[data-loading="true"] { background: linear-gradient(180deg, var(--accent), var(--accent-700)); pointer-events: none; }
.login-btn[data-loading="true"] .lbl,
.login-btn[data-loading="true"] svg:not(.spin) { display: none; }
.login-btn[data-loading="true"] .spin { display: block; }

.login-cfoot { align-items: center; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-top: 22px; padding-top: 17px; }
.login-cfoot .sec { align-items: center; color: var(--ink-3); display: inline-flex; font-size: 11.5px; font-weight: 500; gap: 7px; }
.login-cfoot .sec svg { color: var(--ok); height: 13px; width: 13px; }
.login-cfoot .hlp { color: var(--ink-3); font-size: 11.5px; }
.login-cfoot .hlp a { color: var(--accent); font-weight: 600; }

/* Credenciais da primeira instalacao: continua existindo, agora dentro do cartao. */
.login-initial {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.32);
  border-radius: var(--r);
  color: #7a4f00;
  font-size: 12.5px;
  line-height: 1.6;
  margin-top: 16px;
  padding: 12px 14px;
}
.login-initial code { font-family: var(--login-mono); font-weight: 600; }

@media (max-width: 1080px) {
  .login-layout { gap: 36px; grid-template-columns: 1fr; max-width: 620px; padding: 52px 7%; }
  .login-copy { max-width: none; }
  .login-copy h1 { font-size: clamp(26px, 5.5vw, 34px); }
  .login-eyebrow { margin-top: 26px; }
  .login-feats { display: none; }
  .login-card { padding: 30px 28px 24px; }
}

@media (max-width: 520px) {
  .login-layout { padding: 34px 18px; }
  .login-lead { font-size: 14px; }
  .login-card { border-radius: 20px; padding: 26px 22px 20px; }
  .login-card h2 { font-size: 22px; }
}

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