/* ============================================================
   Painel Multitone 2.0 — tela de login no padrão da landing
   Arquivo de SOBREPOSIÇÃO: carregado por último, não altera o
   CSS original do produto. Para reverter, basta remover o
   <link> correspondente do index.html.
   ============================================================ */

.login-overlay{
  --navy:#0a2440; --ink:#0f1d2e; --muted:#63788f;
  --blue:#1b6cb5; --cyan:#35b6e8; --violet:#6f8ff5; --mint:#3ecfb2;
  --brd:rgba(255,255,255,.88);

  background:
    radial-gradient(40% 44% at 16% 10%,rgba(53,182,232,.44) 0,transparent 62%),
    radial-gradient(36% 40% at 86% 6%,rgba(111,143,245,.38) 0,transparent 60%),
    radial-gradient(44% 48% at 76% 90%,rgba(27,108,181,.32) 0,transparent 64%),
    radial-gradient(32% 38% at 6% 84%,rgba(62,207,178,.24) 0,transparent 60%),
    linear-gradient(172deg,#eef5fc 0%,#dce8f6 54%,#cfdff1 100%) !important;
  backdrop-filter:none !important;
}

/* grão fino, igual à landing */
.login-overlay::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.42;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
}

/* ── cartão de vidro ─────────────────────────────────────── */
.login-overlay .login-container{
  position:relative;z-index:1;
  width:min(94vw,430px);
  background:rgba(255,255,255,.90) !important;
  border:1px solid rgba(10,36,64,.10) !important;
  border-radius:24px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 2px 6px rgba(10,36,64,.07),
    0 30px 72px rgba(10,36,64,.20) !important;
  backdrop-filter:blur(22px) saturate(1.4);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);
  overflow:hidden;
  animation:lg-rise .8s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes lg-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ── cabeçalho ───────────────────────────────────────────── */
.login-overlay .login-header{
  background:transparent !important;
  border-bottom:none !important;
  padding:46px 38px 0 !important;
  text-align:center;
}
/* troca o logo pelo oficial (fundo transparente) da Plataforma */
.login-overlay .login-header img{
  content:url("/logo/logo-login.png");
  width:auto !important;height:58px !important;
  border-radius:0 !important;background:transparent !important;
  margin:0 auto 18px !important;display:block;
}
/* título redundante com o logo — fora */
.login-overlay .login-title{display:none !important}

.login-overlay .login-subtitle{
  color:var(--muted) !important;font-size:14px !important;font-weight:400 !important;
  letter-spacing:.005em !important;
}

/* ── corpo ───────────────────────────────────────────────── */
.login-overlay .login-body{
  background:transparent !important;padding:34px 38px 34px !important;
}
.login-overlay .form-group{margin-bottom:18px !important}
.login-overlay .form-label{
  color:#4a5f75 !important;
  font-size:10.5px !important;font-weight:600 !important;
  letter-spacing:.13em !important;text-transform:uppercase !important;
  margin-bottom:8px !important;display:block;
}
.login-overlay .form-input{
  width:100% !important;
  background:#fbfdff !important;
  border:1px solid rgba(10,36,64,.17) !important;
  border-radius:12px !important;
  padding:13px 15px !important;
  font-size:14.5px !important;color:var(--ink) !important;
  box-shadow:inset 0 1px 2px rgba(10,36,64,.04) !important;
  transition:border-color .25s,box-shadow .25s,background .25s !important;
}
.login-overlay .form-input::placeholder{color:#97a8ba !important}
.login-overlay .form-input:focus{
  outline:none !important;
  background:#fff !important;
  border-color:rgba(27,108,181,.55) !important;
  box-shadow:0 0 0 4px rgba(53,182,232,.16),0 6px 18px rgba(27,108,181,.12) !important;
}

/* ── botão ───────────────────────────────────────────────── */
.login-overlay .btn-login{
  width:100% !important;margin-top:6px !important;
  background:linear-gradient(100deg,var(--cyan) 0%,var(--blue) 52%,var(--violet) 100%) !important;
  background-size:200% auto !important;
  color:#fff !important;border:none !important;border-radius:13px !important;
  padding:14px 20px !important;font-size:14.5px !important;font-weight:600 !important;
  letter-spacing:.015em !important;cursor:pointer;
  box-shadow:0 8px 22px rgba(27,108,181,.30) !important;
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,background-position .5s !important;
}
.login-overlay .btn-login:hover{
  transform:translateY(-2px) !important;
  background-position:100% center !important;
  box-shadow:0 14px 32px rgba(27,108,181,.40) !important;
}
.login-overlay .btn-login:active{transform:translateY(0) !important}
.login-overlay .btn-login:disabled{opacity:.6 !important;transform:none !important;cursor:default}

/* ── mensagens e rodapé ──────────────────────────────────── */
.login-overlay .error-message{
  background:rgba(239,68,68,.08) !important;
  border:1px solid rgba(239,68,68,.28) !important;
  color:#b42318 !important;border-radius:11px !important;
  font-size:13px !important;padding:11px 14px !important;
}
.login-overlay .login-version{
  color:#9aaabb !important;font-size:11px !important;
  padding:0 38px 26px !important;text-align:center;
  letter-spacing:.04em;
}

@media (prefers-reduced-motion:reduce){
  .login-overlay .login-container{animation:none !important}
  .login-overlay .btn-login{transition:none !important}
}
@media (max-width:520px){
  .login-overlay .login-header{padding:36px 26px 0 !important}
  .login-overlay .login-header img{height:50px !important}
  .login-overlay .login-body{padding:28px 26px 28px !important}
  .login-overlay .login-version{padding:0 26px 20px !important}
}