/* login.css — Estilos exclusivos de la página de inicio de sesión */

:root {
  --navy: #0a1535; --navy-2: #0f1f4a; --navy-3: #162360;
  --gold: #c9a227; --gold-2: #e2bb4e; --gold-3: #f0d080;
  --gold-dim: rgba(201,162,39,0.18);
  --white: #f5f3ee; --white-2: rgba(245,243,238,0.65); --white-3: rgba(245,243,238,0.28);
  --border: rgba(201,162,39,0.22);
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; font-family:'DM Sans',sans-serif; background:var(--navy); color:var(--white); overflow:hidden; }

.scene {
  position:fixed; inset:0; z-index:0;
  background: radial-gradient(ellipse 130% 90% at 65% 25%, #162360 0%, #0a1535 55%, #060f28 100%);
}
.scene::before {
  content:''; position:absolute; inset:0;
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 60px, rgba(201,162,39,0.025) 60px, rgba(201,162,39,0.025) 61px);
}
.glow-tr { position:fixed; z-index:1; width:700px; height:700px; top:-200px; right:-150px; background:radial-gradient(circle, rgba(201,162,39,0.1) 0%, transparent 65%); pointer-events:none; animation:pulse 7s ease-in-out infinite alternate; }
.glow-bl { position:fixed; z-index:1; width:500px; height:500px; bottom:-200px; left:-100px; background:radial-gradient(circle, rgba(14,32,90,0.7) 0%, transparent 70%); pointer-events:none; }
@keyframes pulse { from{opacity:.6;transform:scale(1)} to{opacity:1;transform:scale(1.1)} }

.particles { position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.dot { position:absolute; border-radius:50%; background:var(--gold-2); opacity:0; animation:floatdot linear infinite; }
@keyframes floatdot { 0%{opacity:0;transform:translateY(0) scale(1)} 15%{opacity:.5} 85%{opacity:.2} 100%{opacity:0;transform:translateY(-100vh) scale(.4)} }

.page {
  position:relative; z-index:10; min-height:100vh;
  display:flex; align-items:center; justify-content:center; padding:24px;
}

/* ── CARD ── */
.card {
  width:100%; max-width:460px;
  background: rgba(10,21,53,0.82);
  border:1px solid var(--border);
  border-radius:24px;
  padding:52px 46px 44px;
  backdrop-filter:blur(36px);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.035) inset, 0 48px 120px rgba(0,0,0,0.6), 0 0 80px rgba(201,162,39,0.05);
  animation: cardIn .7s cubic-bezier(.16,1,.3,1) .1s both;
}
@keyframes cardIn { from{opacity:0;transform:translateY(22px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} }

.logo-wrap { text-align:center; margin-bottom:38px; }
.logo-img { width:92px; height:92px; object-fit:contain; filter:drop-shadow(0 6px 22px rgba(201,162,39,0.35)); animation:logoIn .9s cubic-bezier(.16,1,.3,1) .3s both; }
@keyframes logoIn { from{opacity:0;transform:scale(.65) rotate(-6deg)} to{opacity:1;transform:scale(1) rotate(0)} }
.logo-title { font-family:'Playfair Display',serif; font-size:24px; font-weight:700; letter-spacing:9px; text-transform:uppercase; color:var(--white); margin-top:14px; }
.logo-963 { font-size:13px; letter-spacing:5px; color:var(--gold-2); margin-top:3px; font-weight:400; }
.logo-bar { width:44px; height:1px; margin:14px auto 0; background:linear-gradient(90deg,transparent,var(--gold),transparent); }

.card-sub { text-align:center; font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:var(--white-3); margin-bottom:30px; font-weight:500; }

.alert-box {
  background:rgba(224,92,92,0.1); border:1px solid rgba(224,92,92,0.3);
  border-radius:10px; padding:12px 16px; font-size:13px; color:#f08888;
  margin-bottom:22px; display:flex; align-items:center; gap:10px;
  animation:shake .4s ease;
}
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

.field { margin-bottom:20px; }
.field label { display:flex; align-items:center; gap:7px; font-size:10px; letter-spacing:2.2px; text-transform:uppercase; color:var(--gold); font-weight:600; margin-bottom:9px; }
.input-wrap { position:relative; }
.field input {
  width:100%; background:rgba(255,255,255,0.05); border:1px solid rgba(201,162,39,0.2);
  border-radius:12px; padding:13px 46px 13px 45px;
  color:var(--white); font-family:'DM Sans',sans-serif; font-size:14px;
  outline:none; transition:border-color .22s, background .22s, box-shadow .22s;
}
.field input:focus { border-color:var(--gold); background:rgba(201,162,39,0.07); box-shadow:0 0 0 3px rgba(201,162,39,0.12); }
.field input::placeholder { color:rgba(245,243,238,0.2); }
.field input:-webkit-autofill { -webkit-box-shadow:0 0 0 100px #0f1f4a inset; -webkit-text-fill-color:var(--white); }
.i-icon { position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--gold); opacity:.55; pointer-events:none; }
.eye-btn { position:absolute; right:13px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--white-3); padding:4px; transition:color .2s; }
.eye-btn:hover { color:var(--gold-2); }

.btn-submit {
  width:100%; margin-top:12px;
  background:linear-gradient(135deg, #c9a227 0%, #9e7c10 100%);
  border:none; border-radius:12px; padding:15px;
  color:var(--navy); font-family:'DM Sans',sans-serif;
  font-size:13px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase;
  cursor:pointer; position:relative; overflow:hidden;
  transition:transform .2s, box-shadow .2s;
  box-shadow:0 6px 26px rgba(201,162,39,0.38);
}
.btn-submit::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,0.18),transparent); opacity:0; transition:opacity .2s; }
.btn-submit:hover { transform:translateY(-2px); box-shadow:0 12px 36px rgba(201,162,39,0.48); }
.btn-submit:hover::after { opacity:1; }
.btn-submit:active { transform:translateY(0); }

.card-foot { text-align:center; margin-top:30px; font-size:11px; color:var(--white-3); letter-spacing:.8px; }

@media(max-width:580px){ .card{padding:38px 26px 32px;border-radius:18px;} html,body{overflow:auto;} }