/* ══════════════════════════════════════════════
   login.css — DataStore ERP · Login estilo GitHub
   ══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
    --bg:#0d1117; --card:#161b22; --border:#30363d; --border-focus:#2f81f7;
    --text:#e6edf2; --muted:#8b949e; --link:#4493f8;
    --green:#238636; --green-hover:#2ea043;
    --error-bg:rgba(248,81,73,.08); --error-bd:rgba(248,81,73,.4); --error-tx:#f85149;
}
html,body,div,form,h1,label,input,button,span,a,footer,img,i{
    margin:0; padding:0; box-sizing:border-box;
}
body{
    font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    background:var(--bg); color:var(--text);
    min-height:100vh; display:flex; flex-direction:column; align-items:center;
    background-image:radial-gradient(circle at 50% -20%, rgba(46,160,67,.08), transparent 55%);
}

/* ═══════ SPLASH DE ARRANQUE ═══════ */
#dsSplash{
    position:fixed; inset:0; z-index:9999; background:var(--bg);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
    transition:opacity .35s ease;
}
#dsSplash.hide{opacity:0; pointer-events:none}
.splash-logo{
    width:74px; height:74px; border-radius:50%;
    background:linear-gradient(135deg,#2ea043,#1f6feb);
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:26px; letter-spacing:1px; color:#fff;
    position:relative;
}
.splash-logo::after{
    content:''; position:absolute; inset:-9px; border-radius:50%;
    border:2px solid transparent; border-top-color:#2ea043; border-right-color:#1f6feb;
    animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.splash-bar{width:210px; height:3px; background:#21262d; border-radius:99px; overflow:hidden}
.splash-bar i{
    display:block; height:100%; width:0; border-radius:99px;
    background:linear-gradient(90deg,#1f6feb,#2ea043);
    animation:fill 1s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes fill{to{width:100%}}
#splashTxt{font-size:13px; color:var(--muted); min-height:18px; letter-spacing:.2px}
.splash-ver{position:absolute; bottom:26px; font-size:11px; color:#484f58}

/* ═══════ LOGIN ═══════ */
.wrap{width:100%; max-width:340px; padding:0 16px; margin-top:9vh; opacity:0}
body.ready .wrap{animation:cardIn .45s cubic-bezier(.16,1,.3,1) forwards}
@keyframes cardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

.brand{display:flex; flex-direction:column; align-items:center; gap:18px; margin-bottom:22px}
.brand-logo{
    width:56px; height:56px; border-radius:50%;
    background:linear-gradient(135deg,#2ea043,#1f6feb);
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:19px; color:#fff; letter-spacing:.5px;
    box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 8px 28px rgba(31,111,235,.18);
}
.brand h1{font-size:21px; font-weight:600; letter-spacing:-.2px; text-align:center}

.alert{
    background:var(--error-bg); border:1px solid var(--error-bd); color:var(--error-tx);
    border-radius:8px; padding:10px 13px; font-size:13.5px; margin-bottom:14px;
    display:flex; gap:9px; align-items:flex-start; line-height:1.45;
}
.alert i{margin-top:2px; flex-shrink:0}

.card{
    background:var(--card); border:1px solid var(--border); border-radius:10px;
    padding:22px 20px;
}
.card.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

label{display:block; font-size:13.5px; font-weight:500; margin-bottom:7px}
.field{position:relative; margin-bottom:16px}
input[type=text],input[type=password]{
    width:100%; padding:9px 12px; font-size:14px; font-family:inherit;
    background:var(--bg); color:var(--text);
    border:1px solid var(--border); border-radius:7px;
    outline:none; transition:border-color .15s, box-shadow .15s;
}
input:focus{border-color:var(--border-focus); box-shadow:0 0 0 3px rgba(47,129,247,.25)}
input:-webkit-autofill{
    -webkit-box-shadow:0 0 0 60px var(--bg) inset !important;
    -webkit-text-fill-color:var(--text) !important;
    caret-color:var(--text);
}
.eye{
    position:absolute; right:10px; top:50%; transform:translateY(-50%);
    background:none; border:none; color:var(--muted); cursor:pointer; font-size:14px; padding:4px;
}
.eye:hover{color:var(--text)}
.caps{display:none; font-size:12px; color:#d29922; margin-top:-10px; margin-bottom:12px}
.caps.on{display:block}

.btn{
    width:100%; padding:10px; font-size:14.5px; font-weight:600; font-family:inherit;
    background:var(--green); color:#fff; border:1px solid rgba(255,255,255,.1);
    border-radius:7px; cursor:pointer; transition:background .15s;
    display:flex; align-items:center; justify-content:center; gap:9px;
}
.btn:hover{background:var(--green-hover)}
.btn:disabled{opacity:.75; cursor:wait}
.spinner{
    width:15px; height:15px; border-radius:50%; display:none;
    border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
    animation:spin .7s linear infinite;
}
.btn.loading .spinner{display:inline-block}

.help{
    margin-top:16px; padding:16px; text-align:center; font-size:13.5px;
    border:1px solid var(--border); border-radius:10px; color:var(--text);
}
.help a{color:var(--link); text-decoration:none}
.help a:hover{text-decoration:underline}

footer{
    margin-top:auto; padding:28px 0 22px; display:flex; gap:18px;
    font-size:12px; color:var(--muted);
}
footer span{color:#484f58}

@media (prefers-reduced-motion: reduce){
    #dsSplash{display:none}
    .wrap{opacity:1; animation:none !important}
    .splash-logo::after,.splash-bar i,.card.shake,.spinner{animation:none !important}
    input,.btn,#dsSplash{transition:none !important}
}

/* ═══════ LOGO PROPIO (imagen) ═══════ */
.logo-img{display:block; width:auto; max-width:250px; object-fit:contain}
.logo-splash{max-height:60px}
.logo-brand{max-height:50px}
.logo-blanco{filter:brightness(0) invert(1)}   /* fuerza logo oscuro → blanco */