/* ============================================================
   DDP Agenda — login.css
   Estilo mínimo y autocontenido para la pantalla de PIN.
   ============================================================ */

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: #0a1628;
  color: #e6eaf2;
  -webkit-font-smoothing: antialiased;
}

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(ellipse at top, #0d2240 0%, #0a1628 60%);
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: #0f1c33;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

.login-brand {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 28px;
}
.login-logo {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #14b8a6, #0066B3);
  display: grid;
  place-items: center;
  color: #fff;
}
.login-logo svg { width: 26px; height: 26px; }
.login-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.4px;
}
.login-sub {
  font-size: 11px;
  color: rgba(230,234,242,0.55);
}

#loginForm label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 6px;
  color: rgba(230,234,242,0.7);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
#loginForm input[type="password"] {
  width: 100%;
  padding: 14px 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  letter-spacing: 6px;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  background: #0a1628;
  color: #e6eaf2;
  outline: none;
  transition: border-color .15s, background .15s;
}
#loginForm input[type="password"]:focus {
  border-color: #14b8a6;
  background: #081124;
}

#loginForm button {
  width: 100%;
  margin-top: 16px;
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  color: #062018;
  cursor: pointer;
  transition: transform .08s, box-shadow .15s;
}
#loginForm button:hover { box-shadow: 0 6px 16px rgba(20,184,166,0.3); }
#loginForm button:active { transform: translateY(1px); }
#loginForm button:disabled { opacity: 0.6; cursor: wait; }

.login-msg {
  margin-top: 14px;
  font-size: 13px;
  text-align: center;
  min-height: 18px;
}
.login-msg.error { color: #ef4444; }
.login-msg.ok    { color: #10b981; }

.login-foot {
  margin-top: 24px;
  font-size: 11px;
  text-align: center;
  color: rgba(230,234,242,0.4);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 16px;
}