/* Login page redesign */
:root {
  --brand-primary: #0d6efd;
  --brand-dark: #0b3b86;
  --bg-gradient-start: #0b3b86;
  --bg-gradient-end: #1c86ff;
}

html, body {
  height: 100%;
}

body {
  font-family: 'Quicksand', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
  background: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end));
}

.auth-wrap {
  min-height: 100vh;
  padding: 24px;
}

.auth-card {
  width: 100%;
  max-width: 980px;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

.brand-panel {
  background: radial-gradient(1200px circle at 0% 0%, rgba(255,255,255,0.15), transparent 40%),
              linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  color: #fff;
  text-align: center;
}

.brand-mark {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.3);
}

.brand-title {
  font-weight: 600;
  color: #505050;
}

.brand-subtitle {
  color: rgba(255,255,255,0.9);
}

/* Imagen representativa en panel izquierdo */
.brand-image {
  width: 100%;
  max-width: 340px;
  max-height: 320px;
  height: auto;
  object-fit: contain;
  border-radius: 16px;
}

.form-title {
  font-weight: 600;
}

.form-control-lg {
  border-radius: 10px;
}

.input-group .btn {
  border-radius: 10px;
}

.btn-login-colaborador {
  border-radius: 10px;
  padding: 10px 16px;
}

#error_msg {
  min-height: 24px;
}

/* Travel illustration next to the form */
.login-illustration {
  width: 140px;
  height: 140px;
}

.login-illustration svg {
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 767.98px) {
  .auth-card { max-width: 640px; }
}