* { box-sizing: border-box; margin: 0; padding: 0; }
:root { --bg:#0e1116; --panel:#171c26; --panel2:#1f2632; --line:#2a3342; --txt:#e6edf3; --mut:#8b97a8; --acc:#3b82f6; --ok:#22c55e; --warn:#f59e0b; --err:#ef4444; }
body { font-family: -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; background:var(--bg); color:var(--txt); font-size:14px; }
a { color:var(--acc); text-decoration:none; }
button { cursor:pointer; border:none; border-radius:8px; padding:9px 14px; font-size:14px; font-weight:600; background:var(--acc); color:#fff; }
button.sec { background:var(--panel2); color:var(--txt); border:1px solid var(--line); }
button.danger { background:var(--err); }
button.mini { padding:5px 9px; font-size:12px; }
button:disabled { opacity:.5; cursor:not-allowed; }
input,select,textarea { width:100%; background:var(--bg); border:1px solid var(--line); color:var(--txt); border-radius:8px; padding:9px 11px; font-size:14px; font-family:inherit; }
textarea { min-height:140px; resize:vertical; }
label { display:block; font-size:12px; color:var(--mut); margin:12px 0 5px; text-transform:uppercase; letter-spacing:.4px; }
.row { display:flex; gap:12px; flex-wrap:wrap; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px; }
.muted { color:var(--mut); }
.badge { font-size:11px; padding:3px 9px; border-radius:20px; font-weight:700; }
.b-ok{background:rgba(34,197,94,.15);color:var(--ok);} .b-off{background:rgba(239,68,68,.12);color:var(--err);} .b-mid{background:rgba(245,158,11,.15);color:var(--warn);}
#login { max-width:360px; margin:12vh auto; }
#login h1 { font-size:22px; margin-bottom:6px; } #login p{ margin-bottom:18px; }
#app { display:none; grid-template-columns:240px 1fr; height:100vh; }
.topbar { display:none; }
.backdrop { display:none; }
.side { background:var(--panel); border-right:1px solid var(--line); padding:18px 14px; overflow:auto; }
.side h2 { font-size:16px; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.side .item { padding:9px 11px; border-radius:8px; cursor:pointer; color:var(--mut); display:flex; justify-content:space-between; align-items:center; }
.side .item:hover { background:var(--panel2); color:var(--txt); }
.side .item.active { background:var(--acc); color:#fff; }
.main { overflow:auto; padding:26px 30px; }
.head { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; gap:12px; flex-wrap:wrap; }
.head h1 { font-size:20px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.tabs { display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:20px; flex-wrap:wrap; }
.tab { padding:10px 14px; cursor:pointer; color:var(--mut); border-bottom:2px solid transparent; font-weight:600; }
.tab.active { color:var(--txt); border-bottom-color:var(--acc); }
.kpi { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.kpi .card { text-align:center; } .kpi .n{ font-size:28px; font-weight:800; } .kpi .l{ color:var(--mut); font-size:12px; margin-top:4px; }
.qr img{ width:240px; height:240px; background:#fff; border-radius:10px; padding:8px; max-width:100%; }
.toast { position:fixed; bottom:20px; right:20px; background:var(--panel2); border:1px solid var(--line); padding:12px 16px; border-radius:10px; z-index:99; }
.flex-between{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
small.hint{ color:var(--mut); display:block; margin-top:4px; }
table.tbl { width:100%; border-collapse:collapse; font-size:13px; }
table.tbl th,table.tbl td{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); }
table.tbl th{ color:var(--mut); font-size:11px; text-transform:uppercase; letter-spacing:.3px; }
.tbl-wrap{ overflow-x:auto; }

/* ---------- MOBILE ---------- */
@media (max-width: 760px) {
  #app { grid-template-columns:1fr; }
  .topbar { display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:30; background:var(--panel); border-bottom:1px solid var(--line); padding:12px 14px; }
  .topbar .burger { background:var(--panel2); border:1px solid var(--line); color:var(--txt); font-size:18px; padding:6px 12px; line-height:1; }
  .side { position:fixed; top:0; left:0; bottom:0; width:80%; max-width:300px; z-index:50; transform:translateX(-105%); transition:transform .22s ease; box-shadow:2px 0 20px rgba(0,0,0,.4); }
  #app.side-open .side { transform:translateX(0); }
  #app.side-open .backdrop { display:block; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:40; }
  .main { padding:16px 14px; height:auto; }
  .head h1 { font-size:17px; }
  .head .row { width:100%; }
  .head .row button { flex:1; }
  .tab { padding:9px 11px; font-size:13px; }
  .card { padding:14px; }
  .kpi { grid-template-columns:repeat(2,1fr); }
  .grid { grid-template-columns:1fr; }
  input,select,textarea,button { font-size:16px; } /* evita zoom no iOS */
  .toast { left:14px; right:14px; bottom:14px; text-align:center; }
}