/* ── CSS VARIABLES & RESET ──────────────────────────── */
:root {
  --bg:#0f0f0f; --surface:#181818; --s2:#202020; --s3:#282828; --s4:#2e2e2e;
  --border:#2a2a2a; --border2:#3a3a3a; --text:#e8e8e8; --muted:#5a5a5a;
  --muted2:#808080; --accent:#c8f135; --accent2:#35c8f1; --warn:#f1c435;
  --danger:#f15535; --ok:#35f189; --purple:#a78bfa;
  --surface2:var(--s2); --surface3:var(--s3);
  --mono:'IBM Plex Mono',monospace; --sans:'IBM Plex Sans',sans-serif;
}

body.theme-light {
  --bg:#e8e8e8; --surface:#f4f4f4; --s2:#ebebeb; --s3:#dedede; --s4:#d2d2d2;
  --border:#c0c0c0; --border2:#a8a8a8; --text:#141414; --muted:#666666;
  --muted2:#444444; --accent:#4a8500; --accent2:#006fa8; --warn:#a06000;
  --danger:#b52800; --ok:#006030; --purple:#5a2e9a;
}

*{ box-sizing:border-box; margin:0; padding:0; }

body {
  background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:13px;
  height:100vh; overflow:hidden; display:flex;
}

body.no-auth nav,
body.no-auth .app-shell { display:none !important; }
body.no-auth #login-screen { display:flex; }

/* ── SCROLLBAR ─────────────────────────────────────── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:3px; }

/* ── SIDEBAR ──────────────────────────────────────── */
.sidebar {
  width:56px; background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; align-items:center;
  padding:16px 0; gap:4px; flex-shrink:0;
  transition:width .2s; overflow:hidden; position:relative; z-index:10;
}
.sidebar:hover { width:200px; }
.logo {
  width:32px; height:32px; background:var(--accent); border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:11px; font-weight:600; color:#0f0f0f;
  margin-bottom:16px; flex-shrink:0;
}
.ni {
  width:100%; padding:10px 18px; display:flex; align-items:center; gap:12px;
  cursor:pointer; transition:background .15s; border-left:2px solid transparent;
  white-space:nowrap;
}
.ni:hover { background:var(--s2); }
.ni.active { background:rgba(200,241,53,.08); border-left-color:var(--accent); }
.ni.active .ic { color:var(--accent); }
.ic { font-size:15px; flex-shrink:0; width:20px; text-align:center; color:var(--muted); }
.nl { font-size:12px; font-weight:500; opacity:0; transition:opacity .15s; }
.sidebar:hover .nl { opacity:1; }
.ndiv { width:32px; height:1px; background:var(--border); margin:8px 0; transition:width .2s; }
.sidebar:hover .ndiv { width:calc(100% - 24px); }

/* ── APP SHELL ─────────────────────────────────────── */
.app-shell { flex:1; display:flex; flex-direction:column; min-width:0; overflow:hidden; }
.topbar {
  height:52px; background:var(--surface); border-bottom:1px solid var(--border);
  display:flex; align-items:center; padding:0 20px; gap:12px; flex-shrink:0; z-index:5;
}
.ttl { font-family:var(--mono); font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; white-space:nowrap; }
.ttl span { color:var(--text); }
.tsep { width:1px; height:20px; background:var(--border); }
.tb-right { margin-left:auto; display:flex; gap:6px; align-items:center; }

#module-container { flex:1; display:flex; overflow:hidden; }

/* ── LOGIN ──────────────────────────────────────────── */
#login-screen {
  position:fixed; inset:0; background:#0f0f0f;
  display:none; align-items:center; justify-content:center; z-index:9999;
}
body.no-auth #login-screen { display:flex; }
.login-box {
  background:#181818; border:1px solid #2a2a2a; border-radius:10px;
  padding:40px; width:380px; max-width:90vw;
}
.login-logo { font-family:var(--mono); font-size:20px; font-weight:700; color:var(--accent); margin-bottom:6px; }
.login-sub { font-family:var(--mono); font-size:10px; color:var(--muted); margin-bottom:32px; letter-spacing:.1em; }
.login-field { margin-bottom:16px; }
.login-field label { display:block; font-family:var(--mono); font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; margin-bottom:6px; }
.login-field input { width:100%; background:var(--s2); border:1px solid var(--border); border-radius:5px; color:var(--text); font-family:var(--mono); font-size:13px; padding:10px 12px; outline:none; transition:border-color .15s; }
.login-field input:focus { border-color:var(--accent); }
.login-btn { width:100%; background:var(--accent); color:#0f0f0f; border:none; border-radius:5px; font-family:var(--mono); font-size:12px; font-weight:700; padding:12px; cursor:pointer; margin-top:8px; transition:opacity .15s; }
.login-btn:hover { opacity:.85; }
.login-err { font-family:var(--mono); font-size:10px; color:var(--danger); margin-top:10px; min-height:16px; }
.login-sync { font-family:var(--mono); font-size:9px; color:var(--muted); text-align:center; margin-top:16px; }

/* ── USER BADGE ─────────────────────────────────────── */
#user-badge { display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10px; }
#user-badge .ub-name { color:var(--text); }
#user-badge .ub-rol { color:var(--muted); font-size:9px; text-transform:uppercase; }
#user-badge .ub-out { background:transparent; border:1px solid var(--border); border-radius:3px; color:var(--muted); font-family:var(--mono); font-size:9px; padding:2px 7px; cursor:pointer; }
#user-badge .ub-out:hover { color:var(--danger); border-color:var(--danger); }

/* ── SYNC INDICATOR ──────────────────────────────────── */
#sync-indicator { width:7px; height:7px; border-radius:50%; background:var(--ok); display:inline-block; margin-right:4px; transition:background .3s; }
#sync-indicator.syncing { background:var(--warn); animation:pulse .8s infinite; }
#sync-indicator.error { background:var(--danger); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ── ADMIN PANEL ─────────────────────────────────────── */
#admin-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.85); backdrop-filter:blur(5px);
  z-index:2000; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
#admin-overlay.open { opacity:1; pointer-events:all; }
.admin-box { background:var(--surface); border:1px solid var(--border); border-radius:10px; width:580px; max-width:95vw; max-height:85vh; display:flex; flex-direction:column; overflow:hidden; }
.admin-hd { padding:16px 20px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.admin-title { font-family:var(--mono); font-size:11px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.1em; }
.admin-hd button { background:transparent; border:none; color:var(--muted); cursor:pointer; font-size:16px; }
.admin-body { flex:1; overflow-y:auto; padding:20px; }
.admin-user-row { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:6px; margin-bottom:8px; }
.admin-user-row .au-name { flex:1; font-size:12px; }
.admin-user-row .au-email { font-family:var(--mono); font-size:10px; color:var(--muted); flex:1; }

/* ── TOAST ───────────────────────────────────────────── */
.twrap { position:fixed; bottom:20px; right:20px; z-index:9999; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast { background:var(--s3); border:1px solid var(--border2); border-radius:5px; padding:9px 14px; font-family:var(--mono); font-size:11px; display:flex; align-items:center; gap:8px; min-width:230px; box-shadow:0 4px 20px rgba(0,0,0,.4); animation:tin .2s ease; pointer-events:all; }
.toast.ok { border-color:rgba(53,241,137,.3); color:var(--ok); }
.toast.err { border-color:rgba(241,85,53,.3); color:var(--danger); }
.toast.warn { border-color:rgba(241,196,53,.3); color:var(--warn); }
@keyframes tin { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:none} }

/* ── GRID HELPERS ──────────────────────────────────── */
.g2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.g3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.full { grid-column:1/-1; }
.fg { display:flex; flex-direction:column; gap:5px; }
.fg label { font-family:var(--mono); font-size:9px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }

/* ── FORM INPUTS ──────────────────────────────────── */
input[type="text"],input[type="number"],input[type="email"],
input[type="date"],input[type="datetime-local"],
textarea,select {
  background:var(--s2); border:1px solid var(--border); border-radius:4px;
  color:var(--text); font-family:var(--mono); font-size:11px; padding:6px 9px; outline:none;
  transition:border-color .15s; width:100%;
}
input:focus,textarea:focus,select:focus { border-color:var(--accent); }
input::placeholder,textarea::placeholder { color:var(--muted); }
select option { background:var(--s2); }
textarea { resize:vertical; font-family:var(--mono); font-size:11px; line-height:1.5; }