body {
  background: linear-gradient(120deg, #f1f7fa 0%, #e0e3e7 100%);
  min-height: 100vh;
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  margin: 0;
  display: flex; align-items: center; justify-content: center;
}
.login-container {
  width: 100vw; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
}
.login-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 6px 32px rgba(44,62,80,.18);
  padding: 44px 34px 30px 34px;
  max-width: 400px;
  width: 98%;
  text-align: center;
  position: relative;
}
.logo-empresa {
  max-width: 85px;
  max-height: 85px;
  display: block;
  margin: 0 auto 6px auto;
}
.pos-hero-icon {
  font-size: 2.8rem;
  color: #00b894;
  margin-bottom: 10px;
  margin-top: 0;
  background: #e9fbf1;
  width: 64px; height: 64px;
  line-height: 64px;
  border-radius: 50%;
  display: inline-block;
  border: 2px solid #c7efd2;
  box-shadow: 0 1px 8px rgba(44,62,80,.04);
}
h2 {
  color: #008C44;
  font-weight: 700;
  margin: 10px 0 12px 0;
  font-size: 1.5rem;
  letter-spacing: .04em;
}
.subtitle-pos {
  color: #2e3c41;
  font-size: 1.02rem;
  margin-bottom: 18px;
  opacity: .82;
}
.form-group {
  text-align: left;
  margin-bottom: 19px;
}
.form-group label {
  font-weight: 600;
  color: #2e3c41;
  margin-bottom: 5px;
  display: block;
}
.form-group input[type="email"], .form-group input[type="password"] {
  width: 100%;
  padding: 12px 10px;
  border: 1.7px solid #b3d9c6;
  border-radius: 4px;
  background: #f8fbfa;
  font-size: 1rem;
  color: #2e3c41;
  margin-top: 3px;
  transition: border-color .18s;
}
.form-group input[type="email"]:focus, .form-group input[type="password"]:focus {
  border-color: #008C44;
  background: #fff;
  outline: none;
}
.btn-login {
  background: linear-gradient(90deg,#00b894 60%,#008C44 100%);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 14px 0;
  width: 100%;
  font-size: 1.13rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 10px;
  box-shadow: 0 2px 7px rgba(44,62,80,.06);
  transition: background .17s;
  letter-spacing: .03em;
}
.btn-login:hover { background: linear-gradient(90deg,#008C44 60%,#00b894 100%);}
.login-error {
  background: #f8d7da;
  color: #c0392b;
  border: 1.5px solid #f5c6cb;
  padding: 11px;
  border-radius: 4px;
  margin-bottom: 18px;
  font-size: 1rem;
}
.recuperar {
  margin-top: 12px;
  text-align: left;
}
.recuperar a {
  color: #666;
  font-size: 0.99rem;
  text-decoration: none;
  transition: color .18s;
}
.recuperar a:hover { color: #008C44; }
@media (max-width: 570px) {
  .login-card { padding: 15px 1vw 10px 1vw; }
  .logo-empresa { max-width: 62px; max-height: 62px;}
  .pos-hero-icon { font-size: 1.7rem; width: 40px; height: 40px; line-height: 40px;}
  h2 { font-size: 1.08rem; }
}