*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#0b0e15;--bg2:#111620;--bg3:#161d2c;--bg4:#1c2538;--border:#ffffff10;--border2:#ffffff1c;--text:#dde3ef;--text2:#7e8fa8;--text3:#4a5568;--accent:#4f8ef7;--green:#27c97a;--gd:#27c97a18;--amber:#f0a832;--ad:#f0a83218;--red:#f05c5c;--rd:#f05c5c18;--purple:#9b72f5;--pd:#9b72f518;--gold:#e8b84b;--god:#e8b84b18;--silver:#b0c4d8;--sid:#b0c4d818;--r:10px;--rl:14px;--font:'Segoe UI',system-ui,sans-serif;--mono:'Consolas',monospace}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:13px;min-height:100vh;overflow-x:hidden}

/* ---------- Login ---------- */
#loginScreen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 20% 0%,#e8b84b18,transparent 45%),var(--bg)}
.login-card{background:var(--bg2);border:1px solid var(--border2);border-radius:18px;padding:36px 32px;width:100%;max-width:380px;text-align:center;box-shadow:0 20px 60px #0008}
.login-card .li{width:52px;height:52px;background:linear-gradient(135deg,var(--accent),var(--purple));border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;font-weight:700;margin:0 auto 16px}
.login-card h1{font-size:1.1rem;margin:0 0 6px;color:var(--gold)}
.login-card p{color:var(--text3);font-size:.82rem;margin:0 0 20px}
.login-error{background:var(--rd);border:1px solid #f05c5c40;color:var(--red);border-radius:8px;padding:8px 12px;font-size:.8rem;margin-bottom:12px}

/* ---------- App shell ---------- */
#app{display:none}
#app.ready{display:flex;min-height:100vh}
#sb{width:212px;min-width:212px;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;overflow-y:auto;z-index:100}
.logo{padding:15px 13px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:9px}
.li{width:29px;height:29px;background:linear-gradient(135deg,var(--accent),var(--purple));border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;font-weight:700;flex-shrink:0}
.lt{font-size:13px;font-weight:600}.ls{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px}
.ns{padding:11px 7px 2px}.nl{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.8px;padding:0 8px;margin-bottom:4px}
.ni{display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:7px;cursor:pointer;color:var(--text2);font-size:12px;transition:all .15s;margin-bottom:1px}
.ni:hover{background:var(--bg3);color:var(--text)}.ni.active{background:#4f8ef718;color:var(--accent)}
.userbox{margin-top:auto;padding:12px;border-top:1px solid var(--border);font-size:11px}
.userbox .rol{color:var(--text3);text-transform:uppercase;font-size:9px;letter-spacing:.4px}
.userbox button{margin-top:8px;width:100%}
#main{margin-left:212px;flex:1;display:flex;flex-direction:column}
#topbar{background:var(--bg2);border-bottom:1px solid var(--border);padding:14px 22px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:50}
.pt{font-size:14px;font-weight:600}.ps{font-size:11px;color:var(--text3);margin-top:1px}
.tba{margin-left:auto;display:flex;gap:7px}
#content{flex:1;padding:20px 22px;overflow-y:auto}

/* ---------- Componentes ---------- */
.btn{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:7px;font-size:11px;font-weight:500;cursor:pointer;border:none;transition:all .15s;font-family:var(--font)}
.bp{background:var(--accent);color:#fff}.bp:hover{background:#3d7be8}
.bg2b{background:transparent;color:var(--text2);border:1px solid var(--border2)}.bg2b:hover{background:var(--bg3);color:var(--text)}
.bgold{background:var(--god);color:var(--gold);border:1px solid #e8b84b30}
.bdanger{background:var(--rd);color:var(--red);border:1px solid #f05c5c30}
.btn:disabled{opacity:.5;cursor:not-allowed}
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);padding:16px;margin-bottom:16px}
.ch{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.ct{font-size:13px;font-weight:600}.cs{font-size:10px;color:var(--text3)}
.sg{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px}
.sc{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);padding:14px 16px}
.sl{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}
.sv{font-size:20px;font-weight:600}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:9px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;padding:9px 11px;border-bottom:1px solid var(--border)}
td{padding:10px 11px;border-bottom:1px solid var(--border);font-size:12px}
tr:hover td{background:var(--bg3)}
.badge{display:inline-flex;align-items:center;gap:3px;font-size:9px;font-weight:600;padding:3px 8px;border-radius:20px}
.bgreen{background:var(--gd);color:var(--green)}.bred{background:var(--rd);color:var(--red)}
.bgold2{background:var(--god);color:var(--gold)}.bsilver2{background:var(--sid);color:var(--silver)}.bgray{background:#ffffff10;color:var(--text2)}
.bblue{background:#4f8ef718;color:var(--accent)}
.fg{display:flex;flex-direction:column;gap:4px;margin-bottom:11px}
.fg2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.fg3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:11px}
label{font-size:9px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
input,select,textarea{background:var(--bg3);border:1px solid var(--border2);border-radius:6px;padding:8px 10px;color:var(--text);font-family:var(--font);font-size:12px;outline:none;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
select option{background:var(--bg3)}
.mo{position:fixed;inset:0;background:#000c;z-index:200;display:none;align-items:center;justify-content:center}
.mo.open{display:flex}
.mb-m{background:var(--bg2);border:1px solid var(--border2);border-radius:16px;padding:20px;width:100%;max-width:640px;max-height:88vh;overflow-y:auto;margin:20px}
.mh{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}
.mtitle{font-size:14px;font-weight:600}
.mx{background:var(--bg3);border:1px solid var(--border);border-radius:6px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text2)}
.mf{display:flex;justify-content:flex-end;gap:8px;margin-top:15px;padding-top:12px;border-top:1px solid var(--border)}
.item-row{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:8px;margin-bottom:8px;align-items:end}
.item-row button{padding:8px}
.empty-state{color:var(--text3);text-align:center;padding:30px}
.error-msg{background:var(--rd);color:var(--red);border-radius:8px;padding:10px 14px;font-size:.8rem;margin-bottom:12px}
.oro-a{background:linear-gradient(135deg,#1a1506,#231c07);border:1px solid #e8b84b30}
.oro-b{background:linear-gradient(135deg,#0e1520,#131e2e);border:1px solid #b0c4d830}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}