/* ============================================================
   ELITERP STAFF PANEL — staff.css
   Tema oscuro · Azul eléctrico
============================================================ */
:root {
  --blue:  #3b82f6;
  --blue2: #2563eb;
  --blue3: rgba(59,130,246,.1);
  --blue4: rgba(59,130,246,.2);

  --bg:    #0d1117;
  --s1:    #131920;
  --s2:    #161b27;
  --s3:    #1e2536;
  --s4:    #252d40;
  --border:rgba(255,255,255,.07);

  --w:     #f1f5f9;
  --wm:    rgba(241,245,249,.6);
  --wd:    rgba(241,245,249,.3);

  --green: #22c55e;
  --red:   #ef4444;
  --amber: #f59e0b;

  --sidebar-w:   240px;
  --sidebar-col: 58px;
  --topbar-h:    58px;

  --r: 6px;
  --t: .2s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--w); overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: 'Inter', sans-serif; border: none; background: none; }
img { display: block; }
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-thumb { background: var(--blue); border-radius: 2px; }

/* ── LOGIN ──────────────────────────────────────────────── */
.login-body { min-height:100vh; display:flex; align-items:center; justify-content:center; }
.login-bg   { position:fixed; inset:0; background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(59,130,246,.08), transparent 65%); }
.login-wrap { position:relative; z-index:1; width:100%; max-width:400px; padding:20px; }
.login-card { background:var(--s2); border:1px solid var(--border); border-radius:10px; padding:40px 36px; }
.login-logo { font-size:38px; font-weight:800; letter-spacing:6px; text-align:center; margin-bottom:4px; }
.login-logo em { color:var(--blue); font-style:normal; }
.login-subtitle { font-family:'Space Mono',monospace; font-size:9px; letter-spacing:5px; color:var(--wd); text-align:center; margin-bottom:28px; }
.login-error { background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.3); color:#fca5a5; font-size:13px; border-radius:var(--r); padding:10px 14px; margin-bottom:18px; }
.login-field { margin-bottom:16px; }
.login-field label { font-family:'Space Mono',monospace; font-size:9px; letter-spacing:3px; color:var(--wd); display:block; margin-bottom:6px; }
.login-input { width:100%; background:var(--s3); border:1px solid var(--border); color:var(--w); padding:10px 14px; border-radius:var(--r); font-size:14px; transition:border-color var(--t); }
.login-input:focus { outline:none; border-color:var(--blue); }
.login-btn { width:100%; background:var(--blue); color:#fff; font-size:14px; font-weight:600; padding:12px; border-radius:var(--r); margin-top:8px; transition:background var(--t),transform var(--t); }
.login-btn:hover { background:var(--blue2); transform:translateY(-1px); }
.login-footer { text-align:center; margin-top:20px; font-size:11px; color:var(--wd); }

/* ── LAYOUT ─────────────────────────────────────────────── */
.sidebar {
  position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w);
  background:var(--s1); border-right:1px solid var(--border);
  display:flex; flex-direction:column; z-index:200;
  transition:width var(--t); overflow:hidden;
}
.sidebar.collapsed { width:var(--sidebar-col); }

.sidebar-brand { padding:16px 18px; border-bottom:1px solid var(--border); flex-shrink:0; }
.brand-text { font-size:20px; font-weight:800; letter-spacing:5px; display:block; white-space:nowrap; }
.brand-text em { color:var(--blue); font-style:normal; }
.brand-sub { font-family:'Space Mono',monospace; font-size:8px; letter-spacing:4px; color:var(--wd); white-space:nowrap; }

.sidebar-profile { display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--border); flex-shrink:0; }
.profile-avatar { width:36px; height:36px; border-radius:50%; background:var(--blue3); border:1px solid var(--blue4); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--blue); flex-shrink:0; }
.profile-avatar.sm { width:28px; height:28px; font-size:10px; }
.profile-name { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.sidebar-clock { margin:12px; background:var(--s3); border:1px solid var(--border); border-radius:var(--r); padding:12px; flex-shrink:0; }
.clock-status { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--wm); margin-bottom:8px; white-space:nowrap; }
.clock-dot { width:7px; height:7px; border-radius:50%; background:var(--wd); flex-shrink:0; }
.clock-dot.active { background:var(--green); box-shadow:0 0 6px var(--green); }
.clock-btn { width:100%; background:var(--blue3); border:1px solid var(--blue4); color:var(--blue); font-size:11px; font-weight:600; padding:7px; border-radius:var(--r); transition:all var(--t); white-space:nowrap; }
.clock-btn:hover { background:var(--blue); color:#fff; }
.clock-btn.danger { background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.3); color:var(--red); }
.clock-btn.danger:hover { background:var(--red); color:#fff; }
.clock-timer { font-family:'Space Mono',monospace; font-size:11px; color:var(--green); margin-top:7px; display:flex; align-items:center; gap:5px; }

.sidebar-nav { flex:1; overflow-y:auto; padding:10px 0; }
.nav-label { font-family:'Space Mono',monospace; font-size:8px; letter-spacing:3px; color:var(--wd); padding:12px 18px 5px; white-space:nowrap; }
.nav-item { display:flex; align-items:center; gap:11px; padding:9px 18px; font-size:12px; font-weight:500; color:var(--wm); transition:color var(--t),background var(--t); white-space:nowrap; position:relative; }
.nav-item:hover { color:var(--w); background:rgba(255,255,255,.04); }
.nav-item.active { color:var(--blue); background:var(--blue3); }
.nav-item.active::before { content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--blue); border-radius:0 1px 1px 0; }
.nav-item i { width:16px; text-align:center; flex-shrink:0; font-size:13px; }
.sidebar-footer { border-top:1px solid var(--border); padding:6px 0; flex-shrink:0; }
.logout-btn { color:var(--red) !important; }
.logout-btn:hover { background:rgba(239,68,68,.08) !important; }

.main-wrap { margin-left:var(--sidebar-w); min-height:100vh; display:flex; flex-direction:column; transition:margin-left var(--t); }
.main-wrap.collapsed { margin-left:var(--sidebar-col); }

.topbar { height:var(--topbar-h); background:var(--s1); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:0 24px; position:sticky; top:0; z-index:100; }
.topbar-left { display:flex; align-items:center; gap:14px; }
.hamburger { color:var(--wm); font-size:15px; padding:4px; transition:color var(--t); }
.hamburger:hover { color:var(--w); }
.topbar-title { font-size:16px; font-weight:600; letter-spacing:.5px; }
.topbar-right { display:flex; align-items:center; gap:14px; }
.topbar-clock-mini { font-family:'Space Mono',monospace; font-size:11px; color:var(--green); }
.topbar-user { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:var(--wm); }
.page-content { flex:1; padding:24px; }

/* ── COMPONENTS ─────────────────────────────────────────── */
.panel-card { background:var(--s2); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; margin-bottom:16px; }
.card-hdr { padding:14px 18px; font-size:13px; font-weight:600; background:var(--s3); border-bottom:1px solid var(--border); color:var(--wm); }
.card-bdy { padding:16px 18px; }

.stats-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:10px; margin-bottom:20px; }
.stat-card { background:var(--s2); border:1px solid var(--border); border-radius:var(--r); padding:16px 14px; display:flex; align-items:center; gap:12px; transition:border-color var(--t); }
.stat-card:hover { border-color:rgba(59,130,246,.3); }
.stat-card.blue .stat-icon { color:var(--blue); }
.stat-card.green .stat-icon { color:var(--green); }
.stat-icon { font-size:18px; color:var(--wd); width:36px; height:36px; background:var(--s3); border-radius:var(--r); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.stat-label { font-size:10px; color:var(--wd); margin-bottom:3px; }
.stat-value { font-size:22px; font-weight:700; line-height:1; }

.dash-grid { display:grid; grid-template-columns:2fr 1fr; gap:16px; }

.top-item { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); }
.top-item:last-child { border-bottom:none; }
.top-pos { font-family:'Space Mono',monospace; font-size:11px; color:var(--wd); width:20px; text-align:center; }
.top-info { flex:1; }
.top-name { font-size:13px; font-weight:600; }
.top-hours { font-family:'Space Mono',monospace; font-size:13px; color:var(--blue); font-weight:700; }

/* Badges */
.rank-badge { font-family:'Space Mono',monospace; font-size:9px; letter-spacing:2px; padding:3px 8px; border-radius:3px; }
.rank-badge.sm { font-size:8px; padding:2px 6px; }
.rank-master    { background:rgba(234,179,8,.12);   color:#facc15; border:1px solid rgba(234,179,8,.25); }
.rank-directiva { background:rgba(59,130,246,.12); color:#60a5fa; border:1px solid rgba(59,130,246,.25); }
.rank-staff     { background:rgba(148,163,184,.1);  color:#94a3b8; border:1px solid rgba(148,163,184,.2); }
.badge-state { font-family:'Space Mono',monospace; font-size:9px; letter-spacing:1px; padding:2px 8px; border-radius:3px; }
.badge-state.green { background:rgba(34,197,94,.12); color:#4ade80; border:1px solid rgba(34,197,94,.25); }
.badge-state.red   { background:rgba(239,68,68,.12); color:#f87171; border:1px solid rgba(239,68,68,.25); }
.badge-action { font-family:'Space Mono',monospace; font-size:9px; letter-spacing:1px; padding:2px 8px; border-radius:3px; background:var(--blue3); color:var(--blue); border:1px solid var(--blue4); }
.badge-dur { font-family:'Space Mono',monospace; font-size:9px; padding:2px 8px; border-radius:3px; background:rgba(239,68,68,.1); color:#f87171; border:1px solid rgba(239,68,68,.2); }

/* Info rows */
.info-row { display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.04); }
.info-row:last-child { border-bottom:none; }
.info-k { font-size:11px; color:var(--wd); }
.info-v { font-size:13px; font-weight:500; }

/* History */
.history-item { position:relative; padding:10px 12px; background:var(--s3); border:1px solid var(--border); border-radius:var(--r); margin-bottom:8px; }
.history-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:5px; }
.history-reason { font-size:13px; color:var(--wm); }

/* Buttons */
.btn-primary { background:var(--blue); color:#fff; font-size:12px; font-weight:600; padding:8px 18px; border-radius:var(--r); transition:background var(--t),transform var(--t); display:inline-flex; align-items:center; gap:6px; }
.btn-primary:hover { background:var(--blue2); transform:translateY(-1px); }
.btn-outline { background:none; color:var(--wm); border:1px solid var(--border); font-size:12px; font-weight:500; padding:7px 16px; border-radius:var(--r); transition:all var(--t); }
.btn-outline:hover { border-color:var(--blue); color:var(--blue); }
.btn-danger { background:rgba(239,68,68,.15); color:var(--red); border:1px solid rgba(239,68,68,.3); font-size:12px; font-weight:600; padding:8px 18px; border-radius:var(--r); transition:all var(--t); display:inline-flex; align-items:center; gap:6px; }
.btn-danger:hover { background:var(--red); color:#fff; }
.btn-sm-blue { background:var(--blue3); border:1px solid var(--blue4); color:var(--blue); font-size:11px; padding:4px 10px; border-radius:var(--r); transition:all var(--t); display:inline-flex; align-items:center; }
.btn-sm-blue:hover { background:var(--blue); color:#fff; }
.btn-sm-danger { background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.2); color:var(--red); font-size:11px; padding:4px 8px; border-radius:var(--r); transition:all var(--t); }
.btn-sm-danger:hover { background:var(--red); color:#fff; }
.btn-del-sm { position:absolute; top:8px; right:8px; background:none; border:none; color:rgba(239,68,68,.4); font-size:12px; transition:color var(--t); }
.btn-del-sm:hover { color:var(--red); }
.mt-1 { margin-top:6px; } .mt-2 { margin-top:10px; } .mb-2 { margin-bottom:10px; }
.me-1 { margin-right:4px; } .me-2 { margin-right:8px; } .ms-1 { margin-left:4px; }

/* Forms */
.form-ctrl { width:100%; background:var(--s3); border:1px solid var(--border); color:var(--w); padding:8px 12px; border-radius:var(--r); font-size:13px; font-family:'Inter',sans-serif; transition:border-color var(--t); }
.form-ctrl:focus { outline:none; border-color:var(--blue); }
.form-ctrl:disabled { opacity:.5; cursor:not-allowed; }
.form-row { margin-bottom:12px; }
.form-row label { font-family:'Space Mono',monospace; font-size:9px; letter-spacing:3px; color:var(--wd); display:block; margin-bottom:5px; }

/* Modal */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:9000; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
.modal-box { background:var(--s2); border:1px solid var(--border); border-radius:10px; width:min(480px,95vw); }
.modal-hdr { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; font-size:14px; font-weight:700; letter-spacing:1px; border-bottom:1px solid var(--border); }
.modal-close { color:var(--wm); font-size:16px; transition:color var(--t); }
.modal-close:hover { color:var(--red); }
.modal-bdy { padding:20px; }
.modal-ftr { display:flex; gap:8px; justify-content:flex-end; padding:14px 20px; border-top:1px solid var(--border); }

/* Misc */
.mono  { font-family:'Space Mono',monospace; }
.sm    { font-size:11px; }
.orange { color:#f97316; }
.text-muted-sm { font-size:11px; color:var(--wd); }
.link-blue { color:var(--blue); }
.link-blue:hover { text-decoration:underline; }

/* Tables — Override Bootstrap */
:root {
  --bs-table-bg: #161b27 !important;
  --bs-table-color: #f1f5f9 !important;
  --bs-table-border-color: rgba(255,255,255,.07) !important;
  --bs-table-hover-bg: #1e2536 !important;
}
.table, .table * { --bs-table-bg: #161b27; }
.table > :not(caption) > * { background-color: #161b27 !important; border-color: rgba(255,255,255,.07) !important; }
.table > :not(caption) > * > * { background-color: #161b27 !important; color: #f1f5f9 !important; border-bottom-color: rgba(255,255,255,.07) !important; box-shadow: none !important; }
.table > thead > tr > th { background-color: #1e2536 !important; color: rgba(241,245,249,.6) !important; font-size:11px !important; font-weight:600 !important; letter-spacing:1px !important; border-bottom-color: rgba(255,255,255,.07) !important; }
.table > tbody > tr:hover > * { background-color: #1e2536 !important; }
table.dataTable tbody td { color: #f1f5f9 !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background: #3b82f6 !important; border-color: #3b82f6 !important; color: #fff !important; border-radius: 4px !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: #1e2536 !important; border-color: rgba(255,255,255,.07) !important; color: #fff !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button { color: rgba(241,245,249,.5) !important; }
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { background: #1e2536 !important; border: 1px solid rgba(255,255,255,.07) !important; color: #f1f5f9 !important; border-radius: 4px; padding: 4px 10px; }
.dataTables_info, .dataTables_length, .dataTables_filter, .dataTables_wrapper label { color: rgba(241,245,249,.3) !important; font-size: 12px; }

/* Responsive */
@media (max-width: 1400px) { .stats-grid { grid-template-columns: repeat(4,1fr); } }
@media (max-width: 900px)  { .stats-grid { grid-template-columns: repeat(2,1fr); } .dash-grid { grid-template-columns:1fr; } }
@media (max-width: 768px)  {
  .sidebar { width: var(--sidebar-col); }
  .sidebar .profile-info, .sidebar .nav-label, .sidebar .nav-item span,
  .sidebar .brand-sub, .sidebar .sidebar-clock { display:none; }
  .main-wrap { margin-left: var(--sidebar-col); }
}