/* ============================================================
   Universidade Trilobit — Estilo (login / cadastro)
   ============================================================ */
:root{
  --navy:#1a296d;
  --navy-2:#0f1b4c;
  --blue:#2a3f9d;
  --accent:#3b7ddd;
  --text:#1f2740;
  --muted:#6b7280;
  --border:#d9deec;
  --danger:#c0392b;
  --success:#1e8e5a;
  --radius:16px;
  --shadow:0 18px 50px rgba(15,27,76,.22);
}

*{box-sizing:border-box;}

body{
  margin:0;
  font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  color:var(--text);
  min-height:100vh;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(59,125,221,.28), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(42,63,157,.32), transparent 55%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:24px;
}

/* ----- Caixa de login / cadastro ----- */
.login-box{
  width:100%;
  max-width:430px;
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:0 0 30px;
  overflow:hidden;
  animation:rise .5s ease;
}
@keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

/* Topo azul-marinho com o logo branco */
.login-brand{
  background:linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
  padding:34px 28px 26px;
  text-align:center;
}
.login-brand img{
  max-width:150px;
  width:46%;
  height:auto;
  display:block;
  margin:0 auto;
}
.login-brand .sub{
  color:#cfd8ff;
  font-size:11.5px;
  letter-spacing:3px;
  text-transform:uppercase;
  margin-top:16px;
  font-weight:700;
}

.login-box h2{
  text-align:center;
  font-size:21px;
  font-weight:700;
  color:var(--navy);
  margin:26px 28px 4px;
}
.login-box .hint{
  text-align:center;
  color:var(--muted);
  font-size:13px;
  margin:0 28px 20px;
}

/* ----- Formulário ----- */
form{padding:0 28px;}
.form-control{
  width:100%;
  padding:13px 15px;
  margin-bottom:13px;
  border:1.5px solid var(--border);
  border-radius:10px;
  font-size:14.5px;
  font-family:inherit;
  color:var(--text);
  background:#f8f9fd;
  transition:border-color .15s, box-shadow .15s, background .15s;
  outline:none;
}
.form-control::placeholder{color:#9aa2b8;}
.form-control:focus{
  border-color:var(--accent);
  background:#fff;
  box-shadow:0 0 0 3px rgba(59,125,221,.15);
}
select.form-control{cursor:pointer;}

/* ----- Botão ----- */
.btn{
  display:inline-block;
  border:none;
  cursor:pointer;
  padding:14px 18px;
  border-radius:10px;
  font-size:15px;
  font-weight:700;
  font-family:inherit;
  letter-spacing:.3px;
  color:#fff;
  background:linear-gradient(135deg, var(--blue) 0%, var(--navy) 100%);
  transition:transform .08s, box-shadow .2s;
  box-shadow:0 8px 20px rgba(26,41,109,.30);
}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(26,41,109,.38);}
.btn:active{transform:translateY(0);}
.w-100{width:100%;}

/* ----- Links ----- */
.login-box a{color:var(--blue);text-decoration:none;font-weight:600;}
.login-box a:hover{text-decoration:underline;}
.link-row{text-align:center;margin-top:18px;font-size:13.5px;color:var(--muted);}

/* ----- Alertas ----- */
.alert{
  margin:0 28px 16px;
  padding:11px 14px;
  border-radius:10px;
  font-size:13.5px;
  text-align:center;
}
.alert-erro{background:#fdecea;color:var(--danger);border:1px solid #f5c6c0;}
.alert-ok{background:#e7f7ef;color:var(--success);border:1px solid #bfe6d2;}

/* ----- Rodapé ----- */
.footer-trilobit{
  width:100%;
  max-width:430px;
  text-align:center;
  color:#c2cbed;
  font-size:12px;
  margin-top:22px;
  letter-spacing:.3px;
}

/* ----- Responsivo ----- */
@media (max-width:480px){
  .login-box{max-width:100%;}
  .login-brand img{width:70%;}
}