:root{
  --bg:#0f172a;
  --panel:#111827;
  --card:#1f2937;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --primary:#2563eb;
  --danger:#dc2626;
  --ok:#16a34a;
}
*{box-sizing:border-box;font-family:Segoe UI,Arial,sans-serif}
body{margin:0;background:var(--bg);color:var(--text)}
.hidden{display:none}
.centered{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:16px}
.card{background:var(--card);border-radius:12px;padding:16px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.login-card{width:360px}
.home-card{width:min(1350px,100%)}
.home-card-modern{
  background:linear-gradient(145deg,#1b2740 0%, #121a2f 55%, #111827 100%);
  border:1px solid rgba(59,130,246,.25);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  padding:24px;
}
.home-header{text-align:center;margin-bottom:22px}
.home-badge{
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  letter-spacing:.4px;
  color:#bfdbfe;
  background:rgba(37,99,235,.18);
  border:1px solid rgba(147,197,253,.3);
  margin-bottom:10px;
}
.module-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.module-grid-modern{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.module-card{
  border:1px solid #374151;background:#0b1220;color:var(--text);
  border-radius:12px;padding:18px;text-align:left;cursor:pointer
}
.module-card-modern{
  background:linear-gradient(165deg, rgba(30,41,59,.95), rgba(15,23,42,.95));
  border:1px solid rgba(148,163,184,.28);
  box-shadow:0 8px 18px rgba(2,6,23,.35);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.module-icon{font-size:24px;display:inline-block;margin-bottom:8px}
.module-card h3{margin:0 0 6px 0}
.module-card p{margin:0;color:var(--muted)}
.module-card:hover{border-color:#60a5fa;transform:translateY(-3px);box-shadow:0 12px 22px rgba(2,6,23,.45)}
.module-page{width:min(760px,100%);text-align:center}
.activos-card{width:min(1100px,100%)}
.personal-card{width:min(1100px,100%);text-align:left}
.personal-form label{display:block;font-size:13px;color:var(--muted);margin-top:6px}
.photo-row{display:grid;grid-template-columns:1fr 220px;gap:12px;align-items:start;margin-top:8px}
.photo-input-wrap small{color:var(--muted)}
.photo-preview-wrap{display:flex;justify-content:center;align-items:center}
.photo-preview{width:180px;height:180px;object-fit:cover;border:1px solid #374151;border-radius:10px;background:#0b1220}
.table-wrap{margin-top:14px;overflow:auto}
.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.home-actions{margin-top:16px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

input,select,button{width:100%;padding:10px;border-radius:8px;border:1px solid #374151;background:#0b1220;color:var(--text);margin:6px 0}
button{background:var(--primary);border:none;cursor:pointer}
button:hover{opacity:.92}

#appView{display:grid;grid-template-columns:220px 1fr;min-height:100vh}
#appView.hidden{display:none}
.sidebar{background:var(--panel);padding:16px;border-right:1px solid #1f2937}
.sidebar h2{margin-top:0}
.nav-btn{background:#1f2937;text-align:left}
.nav-btn.active{background:var(--primary)}
.logout{margin-top:20px;background:var(--danger)}
.content{padding:16px}
.topbar{margin-bottom:12px}
.filters{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;align-items:end}
.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:12px 0}
.kpi p{font-size:28px;margin:0;color:#93c5fd}
.chart-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.form-card{margin-bottom:12px}
.staff-assign-card{
  width:min(1400px,100%);
  background:linear-gradient(145deg,#1b2740 0%, #121a2f 55%, #111827 100%);
  border:1px solid rgba(59,130,246,.25);
}
.staff-section{margin-bottom:14px}
.staff-actions-left{justify-content:flex-start}
.staff-form-actions{display:flex;align-items:flex-end}
.staff-form-actions button{margin-top:28px}
.staff-full{grid-column:1 / -1}
#staffTemplatesTable td button,#staffAssignmentsTable td button,#staffComplianceTable td button{width:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid #374151;text-align:left}
td button{width:auto;padding:6px 10px;margin-right:6px}
.btn-edit{background:#0ea5e9}
.btn-del{background:var(--danger)}
.toast{position:fixed;bottom:16px;right:16px;background:#111827;padding:10px 14px;border-radius:8px;border-left:4px solid var(--ok)}

@media (max-width:1100px){
  .filters,.chart-grid,.kpi-grid{grid-template-columns:1fr}
  #appView{grid-template-columns:1fr}
  .sidebar{display:flex;gap:8px;align-items:center;overflow:auto}
  .module-grid{grid-template-columns:1fr}
  .split-grid{grid-template-columns:1fr}
  .photo-row{grid-template-columns:1fr}
}