/* Layout proprio da tela de login - cor e fonte vem de style.css (ja
   carregado antes deste arquivo em login.html), aqui so estrutura. */

body {
  margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 32px 20px; position: relative; overflow: hidden;
}

.loginGlow {
  position: absolute; inset: -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(560px 420px at 28% 20%, color-mix(in srgb, var(--marca) 26%, transparent), transparent 60%),
    radial-gradient(480px 380px at 78% 82%, color-mix(in srgb, #C77D4A 18%, transparent), transparent 62%);
  filter: blur(2px);
}
.loginGrid {
  position: absolute; inset: 0; z-index: 0; opacity: .4; pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--line) 70%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--line) 70%, transparent) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(circle at 50% 40%, black, transparent 72%);
          mask-image: radial-gradient(circle at 50% 40%, black, transparent 72%);
}

.loginStage { position: relative; z-index: 1; width: 100%; max-width: 388px; }

.loginBrand { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 22px; }
.loginMark {
  width: 216px; height: 216px; position: relative; margin-bottom: 6px;
  border-radius: 34px; overflow: hidden; background: #FAF8F4;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--marca) 22%, transparent),
    0 30px 60px -20px color-mix(in srgb, var(--marca) 45%, transparent),
    0 12px 34px -10px color-mix(in srgb, #C77D4A 30%, transparent);
}
.loginMark img {
  width: 112%; height: 112%; object-fit: contain; display: block;
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  mix-blend-mode: multiply;
}
.loginWordmark { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -.01em; text-align: center; color: var(--ink); }
.loginHub { color: var(--marca-forte); }
.loginTag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); text-align: center; }

.loginCard {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 30px 28px 26px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.55);
  position: relative; overflow: hidden;
}
.loginCard::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--marca), #C77D4A);
}

.loginSteps { display: flex; align-items: center; gap: 6px; margin-bottom: 22px; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); }
.loginStepDot { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background .2s ease, transform .2s ease; }
.loginStepDot.is-on { background: var(--marca); transform: scale(1.25); }
.loginStepBar { flex: 1; height: 1px; background: var(--line); }
.loginStepLabel b { color: var(--ink-2); }

.loginPanel { display: none; }
.loginPanel.is-on { display: block; animation: loginEntra .32s ease; }
@keyframes loginEntra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .loginPanel.is-on { animation: none; } }

.loginPanel h1 { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.01em; color: var(--ink); }
.loginSub { font-size: 12.5px; color: var(--ink-2); margin: 0 0 22px; line-height: 1.5; }
.loginSub b { color: var(--ink); font-weight: 600; }

.loginField { margin-bottom: 16px; }
.loginField label {
  display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px;
}
.loginField input {
  width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; font-family: var(--font-sans); font-size: 14px; color: var(--ink);
  outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.loginField input:focus { border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-veu); }
.loginCodeInput { font-family: var(--font-mono); font-size: 22px; letter-spacing: .5em; text-align: center; padding: 12px 8px 12px 18px; }

.loginBtn {
  width: 100%; background: var(--marca); color: #06121a; border: none; border-radius: 10px;
  padding: 12px 16px; font-family: var(--font-sans); font-size: 13.5px; font-weight: 700;
  cursor: pointer; margin-top: 4px; transition: filter .15s ease, transform .1s ease;
}
.loginBtn:hover { filter: brightness(1.08); }
.loginBtn:active { transform: translateY(1px); }
.loginBtn:disabled { opacity: .6; cursor: default; }

.loginFoot { margin-top: 16px; text-align: center; font-size: 12px; color: var(--ink-3); }
.loginFoot a { color: var(--marca); text-decoration: none; font-weight: 600; cursor: pointer; }
.loginFoot a:hover { text-decoration: underline; }

.loginErro {
  font-size: 12px; color: #E85C7E; background: color-mix(in srgb, #E85C7E 12%, transparent);
  border: 1px solid color-mix(in srgb, #E85C7E 30%, transparent); border-radius: 8px;
  padding: 8px 12px; margin: 0 0 14px;
}

.loginToast {
  display: flex; align-items: center; gap: 8px; background: var(--marca-veu);
  border: 1px solid color-mix(in srgb, var(--marca) 35%, transparent); color: var(--marca-forte);
  font-size: 12px; font-weight: 600; border-radius: 10px; padding: 9px 12px; margin-bottom: 18px;
}