* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; font-family:'Segoe UI',system-ui,-apple-system,sans-serif; background:#0a0a1a; color:#e2e8f0; overflow-x:hidden; }
input, button, select, textarea { font-family:inherit; font-size:16px; }

.login-bg {
  position:fixed; inset:0; z-index:0;
  background:linear-gradient(135deg,#0a0a1a 0%,#1a1040 30%,#0d1f3c 60%,#0a0a1a 100%);
}
.login-bg::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 20% 50%,rgba(99,102,241,.15) 0%,transparent 60%),
             radial-gradient(ellipse at 80% 20%,rgba(139,92,246,.1) 0%,transparent 50%);
  animation:bgPulse 8s ease-in-out infinite alternate;
}
@keyframes bgPulse {
  0%{opacity:.6} 100%{opacity:1}
}

.login-container {
  position:relative; z-index:1;
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.login-card {
  width:100%; max-width:400px;
  background:rgba(20,20,40,.85); backdrop-filter:blur(20px);
  border:1px solid rgba(99,102,241,.2); border-radius:20px;
  padding:40px 32px; text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  animation:cardIn .5s ease-out;
}
@keyframes cardIn {
  0%{opacity:0;transform:translateY(30px)} 100%{opacity:1;transform:translateY(0)}
}

.login-header { margin-bottom:32px; }
.login-icon {
  width:56px; height:56px; margin:0 auto 16px;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  border-radius:16px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(99,102,241,.4);
}
.login-icon svg { width:28px; height:28px; color:#fff; }
.login-header h1 { font-size:24px; font-weight:700; color:#fff; letter-spacing:1px; }
.login-header p { font-size:14px; color:#94a3b8; margin-top:4px; }

.input-group {
  position:relative; margin-bottom:16px;
}
.input-icon {
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; color:#6366f1; pointer-events:none;
}
.input-group input {
  width:100%; padding:14px 14px 14px 44px;
  background:rgba(15,23,42,.8); border:1px solid #334155;
  border-radius:12px; color:#e2e8f0; font-size:16px;
  transition:border-color .2s,box-shadow .2s; outline:none;
}
.input-group input:focus {
  border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.15);
}
.input-group input::placeholder { color:#64748b; }

.toggle-pass {
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; padding:4px;
}
.toggle-pass svg { width:20px; height:20px; color:#64748b; }
.toggle-pass:hover svg { color:#94a3b8; }

.btn-login {
  width:100%; padding:14px; margin-top:8px;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  border:none; border-radius:12px; color:#fff; font-size:16px; font-weight:600;
  cursor:pointer; letter-spacing:.5px; position:relative;
  transition:transform .15s,box-shadow .15s;
}
.btn-login:hover { transform:translateY(-1px); box-shadow:0 8px 24px rgba(99,102,241,.4); }
.btn-login:active { transform:translateY(0); }
.btn-login:disabled { opacity:.7; cursor:not-allowed; transform:none; }
.btn-loader { width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;margin:0 auto; }
@keyframes spin { to{transform:rotate(360deg)} }

.forgot-link {
  display:inline-block; margin-top:20px; color:#818cf8; font-size:14px;
  background:none; border:none; cursor:pointer; text-decoration:none;
  transition:color .2s;
}
.forgot-link:hover { color:#a5b4fc; text-decoration:underline; }

.divider {
  display:flex; align-items:center; gap:12px; margin:20px 0;
  color:#475569; font-size:13px;
}
.divider::before, .divider::after { content:''; flex:1; height:1px; background:#334155; }

.btn-tienda {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 28px; background:rgba(99,102,241,.1);
  border:1px solid rgba(99,102,241,.3); border-radius:12px;
  color:#818cf8; font-size:14px; font-weight:600;
  text-decoration:none; transition:all .2s;
}
.btn-tienda:hover { background:rgba(99,102,241,.2); border-color:#6366f1; }

/* WhatsApp flotante */
.whatsapp-float {
  position:fixed; bottom:24px; right:24px; z-index:999;
  width:56px; height:56px; background:#25d366; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(37,211,102,.4); transition:transform .2s;
  text-decoration:none;
}
.whatsapp-float:hover { transform:scale(1.1); }
.whatsapp-float svg { width:28px; height:28px; color:#fff; }

/* Responsive */
@media(max-width:480px){
  .login-card { padding:32px 20px; border-radius:16px; }
  .login-header h1 { font-size:20px; }
  .whatsapp-float { bottom:16px; right:16px; width:50px; height:50px; }
  .whatsapp-float svg { width:24px; height:24px; }
}