@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:             #0d0d0f;
  --surface:        #161618;
  --surface-alt:    #1e1e21;
  --border:         #2a2a2e;
  --primary:        #e53935;
  --primary-dark:   #b71c1c;
  --primary-hover:  #c62828;
  --text-primary:   #eaeae6;
  --text-secondary: #8a8a84;
  --text-muted:     #55554e;
  --success:        #4ade80;
  --error:          #f87171;
  --sans: 'Geist', system-ui, -apple-system, sans-serif;
}

html, body {
  height:      100%;
  font-family: var(--sans);
  background:  var(--bg);
  color:       var(--text-primary);
  font-size:   15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Layout split ────────────────────────────────────────────────────────── */
.login-wrapper {
  display:    flex;
  min-height: 100vh;
}

/* ── Painel esquerdo — branding ──────────────────────────────────────────── */
.login-brand {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  flex:            1;
  background:      #111113;
  border-right:    1px solid var(--border);
  padding:         60px 48px;
  position:        relative;
  overflow:        hidden;
}

/* Glow decorativo */
.login-brand::before {
  content:       '';
  position:      absolute;
  width:         500px;
  height:        500px;
  border-radius: 50%;
  background:    radial-gradient(circle, rgba(229,57,53,.12) 0%, transparent 70%);
  top:           50%;
  left:          50%;
  transform:     translate(-50%, -50%);
  pointer-events: none;
}

.brand-logo-wrap {
  background:    white;
  border-radius: 24px;
  padding:       28px;
  width:         200px;
  height:        200px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  box-shadow:    0 16px 48px rgba(0,0,0,.5);
  margin-bottom: 40px;
  position:      relative;
  z-index:       1;
}

.brand-logo-wrap img {
  width:  100%;
  height: 100%;
  object-fit: contain;
}

.brand-tagline {
  font-size:     13px;
  font-weight:   600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color:         var(--primary);
  margin-bottom: 12px;
  position:      relative;
  z-index:       1;
}

.brand-title {
  font-size:   32px;
  font-weight: 800;
  color:       var(--text-primary);
  text-align:  center;
  line-height: 1.2;
  position:    relative;
  z-index:     1;
}

.brand-desc {
  font-size:   14px;
  color:       var(--text-secondary);
  text-align:  center;
  max-width:   280px;
  margin-top:  12px;
  line-height: 1.6;
  position:    relative;
  z-index:     1;
}

.brand-pills {
  display:     flex;
  gap:         8px;
  margin-top:  32px;
  flex-wrap:   wrap;
  justify-content: center;
  position:    relative;
  z-index:     1;
}

.brand-pill {
  font-size:     11px;
  font-weight:   600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding:       5px 12px;
  border-radius: 20px;
  border:        1px solid var(--border);
  color:         var(--text-muted);
  background:    var(--surface);
}

/* ── Painel direito — formulário ─────────────────────────────────────────── */
.login-form-panel {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  width:           480px;
  flex-shrink:     0;
  padding:         60px 48px;
  background:      var(--bg);
}

.login-form-inner {
  width: 100%;
  max-width: 360px;
}

.login-heading {
  font-size:   28px;
  font-weight: 700;
  color:       var(--text-primary);
  margin-bottom: 6px;
}

.login-sub {
  font-size:     14px;
  color:         var(--text-secondary);
  margin-bottom: 32px;
}

/* ── Form elements ───────────────────────────────────────────────────────── */
.form-group {
  margin-bottom: 14px;
}

.form-label {
  display:       block;
  font-size:     12.5px;
  font-weight:   500;
  color:         var(--text-secondary);
  margin-bottom: 7px;
}

.input-wrap {
  position: relative;
}

.input-icon {
  position:  absolute;
  left:      14px;
  top:       50%;
  transform: translateY(-50%);
  color:     var(--text-muted);
  font-size: 16px;
  pointer-events: none;
  display:   flex;
}

.form-input {
  width:         100%;
  height:        48px;
  background:    var(--surface-alt);
  border:        1px solid var(--border);
  border-radius: 10px;
  color:         var(--text-primary);
  font-family:   var(--sans);
  font-size:     14px;
  padding:       0 14px 0 42px;
  outline:       none;
  transition:    border-color .15s;
}

.form-input::placeholder { color: var(--text-muted); }

.form-input:focus {
  border-color: var(--primary);
}

.form-input.has-suffix { padding-right: 44px; }

.input-suffix {
  position:  absolute;
  right:     12px;
  top:       50%;
  transform: translateY(-50%);
  background: none;
  border:    none;
  cursor:    pointer;
  color:     var(--text-muted);
  display:   flex;
  padding:   4px;
  transition: color .15s;
}

.input-suffix:hover { color: var(--text-secondary); }

.form-input.error { border-color: var(--error); }

.field-error {
  font-size:   12px;
  color:       var(--error);
  margin-top:  5px;
  display:     none;
}

.field-error.visible { display: block; }

/* ── Forgot password ─────────────────────────────────────────────────────── */
.forgot-row {
  display:         flex;
  justify-content: flex-end;
  margin-top:      -6px;
  margin-bottom:   20px;
}

.forgot-link {
  font-size:       13px;
  color:           var(--primary);
  text-decoration: none;
  transition:      opacity .15s;
}

.forgot-link:hover { opacity: .75; }

/* ── Botões ──────────────────────────────────────────────────────────────── */
.btn-signin {
  width:         100%;
  height:        50px;
  background:    var(--primary);
  color:         white;
  font-family:   var(--sans);
  font-size:     15px;
  font-weight:   600;
  border:        none;
  border-radius: 10px;
  cursor:        pointer;
  transition:    background .15s;
  display:       flex;
  align-items:   center;
  justify-content: center;
  gap:           8px;
  margin-bottom: 10px;
}

.btn-signin:hover    { background: var(--primary-hover); }
.btn-signin:disabled { opacity: .6; cursor: not-allowed; }

.btn-settings {
  width:         100%;
  height:        40px;
  background:    transparent;
  color:         var(--text-secondary);
  font-family:   var(--sans);
  font-size:     13px;
  font-weight:   500;
  border:        1px solid var(--border);
  border-radius: 10px;
  cursor:        pointer;
  transition:    border-color .15s, color .15s;
  display:       flex;
  align-items:   center;
  justify-content: center;
  gap:           7px;
  text-decoration: none;
}

.btn-settings:hover {
  border-color: var(--text-muted);
  color:        var(--text-primary);
}

/* ── Spinner ─────────────────────────────────────────────────────────────── */
.spinner {
  width:        18px;
  height:       18px;
  border:       2px solid rgba(255,255,255,.3);
  border-top-color: white;
  border-radius: 50%;
  animation:    spin .6s linear infinite;
  display:      none;
}

@keyframes spin { to { transform: rotate(360deg); } }

.btn-signin.loading .btn-label { display: none; }
.btn-signin.loading .spinner   { display: block; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.login-footer {
  margin-top: 32px;
  font-size:  12px;
  color:      var(--text-muted);
  text-align: center;
}

/* ── Unit badge ──────────────────────────────────────────────────────────── */
.unit-badge {
  display:       flex;
  align-items:   center;
  gap:           8px;
  border-radius: 9px;
  padding:       10px 13px;
  font-size:     12.5px;
  margin-bottom: 20px;
  line-height:   1.4;
}

.unit-badge svg { flex-shrink: 0; }

.unit-badge--missing {
  background: rgba(248,113,113,.08);
  border:     1px solid rgba(248,113,113,.25);
  color:      #f87171;
}

.unit-badge--ok {
  background: rgba(74,222,128,.06);
  border:     1px solid rgba(74,222,128,.2);
  color:      #4ade80;
}

.unit-badge__link {
  margin-left:     auto;
  white-space:     nowrap;
  font-weight:     600;
  text-decoration: none;
  color:           inherit;
  opacity:         .8;
  transition:      opacity .15s;
}

.unit-badge__link:hover { opacity: 1; }

/* ── Erro global da API ───────────────────────────────────────────────────── */
.api-error {
  display:       flex;
  align-items:   flex-start;
  gap:           9px;
  background:    rgba(248,113,113,.08);
  border:        1px solid rgba(248,113,113,.25);
  border-radius: 9px;
  padding:       11px 13px;
  font-size:     13px;
  color:         #f87171;
  margin-bottom: 18px;
  line-height:   1.45;
}

.api-error svg { flex-shrink: 0; margin-top: 1px; }

/* ── Responsivo — mobile/tablet ──────────────────────────────────────────── */
@media (max-width: 860px) {
  .login-brand { display: none; }

  .login-form-panel {
    width:   100%;
    padding: 48px 28px;
  }
}