:root {
  --bg: #f5f7fb;
  --card: #fff;
  --text: #111827;
  --muted: #6b7280;
  --line: #e5e7eb;
  --dark: #0f172a;
  --primary: #2563eb;
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
  --violet: #7c3aed;
}
*{box-sizing:border-box} body{margin:0;font-family:Arial,sans-serif;background:var(--bg);color:var(--text)} a{color:inherit}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:#111827;color:#fff;gap:16px;position:sticky;top:0;z-index:10}.brand{font-weight:700}.topbar nav{display:flex;flex-wrap:wrap;gap:14px}.topbar a{text-decoration:none;color:#fff}
.container{max-width:1320px;margin:24px auto;padding:0 16px 24px}.grid{display:grid;gap:16px}.grid.two{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.grid.three{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.grid.four{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 10px 25px rgba(17,24,39,.05);position:relative}.narrow{max-width:440px;margin:40px auto}.table-wrap{overflow:auto}.stack-space{margin-top:18px}
label{display:block;font-weight:700;margin:10px 0 6px} input,select,textarea,button{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font-size:16px;background:#fff} textarea{min-height:92px;resize:vertical} button,.button-link{display:inline-block;background:var(--primary);color:#fff;border:none;text-decoration:none;font-weight:700;cursor:pointer;margin-top:14px;padding:12px 14px;border-radius:12px} button.secondary{background:var(--success)} button.warning{background:var(--warning)} button.danger{background:var(--danger)} button.violet,.button-link.violet{background:var(--violet)} .button-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}.actions{display:grid;gap:12px}
.flash{padding:14px 16px;border-radius:12px;margin-bottom:14px}.flash.success{background:#dcfce7;color:#166534}.flash.error{background:#fee2e2;color:#991b1b}
th,td{padding:12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top} table{width:100%;border-collapse:collapse}
.employee-badge,.color-strip{width:12px;height:100%;position:absolute;left:0;top:0;border-radius:18px 0 0 18px}.color-dot{width:12px;height:12px;border-radius:999px;display:inline-block;margin-right:8px;vertical-align:middle}
.stat-card{padding:18px 20px}.stat-label{font-size:14px;color:var(--muted);margin-bottom:8px}.stat-value{font-size:30px;font-weight:700}.muted{color:var(--muted)}.small-text{font-size:12px;word-break:break-all}.inline-form{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end}.inline-form>div{min-width:180px}
.success-text{color:var(--success)} .danger-text{color:var(--danger)} .warning-text{color:var(--warning)}
.kpi{display:flex;align-items:center;justify-content:space-between;gap:10px}.pill{display:inline-flex;align-items:center;gap:8px;background:#eff6ff;padding:8px 10px;border-radius:999px;font-size:13px}.signal{width:13px;height:13px;border-radius:999px;display:inline-block}.signal-green{background:#22c55e}.signal-yellow{background:#f59e0b}.signal-red{background:#ef4444}.signal-blue{background:#3b82f6}
.qr-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.qr-image{display:block;max-width:220px;width:100%;margin:14px auto 0;border-radius:10px}
.monitor-body{background:#0f172a;color:#fff}.monitor-container{max-width:100%;padding:24px}.monitor-header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}.monitor-clock{font-size:28px;font-weight:700}.monitor-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:20px}.monitor-card{background:rgba(255,255,255,.08);border-left:12px solid var(--primary);border-radius:24px;padding:24px;min-height:220px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 20px 35px rgba(0,0,0,.2)}.monitor-name{font-size:34px;font-weight:700;line-height:1.1}.monitor-project{font-size:26px;opacity:.95}.monitor-time{font-size:24px;opacity:.9}.monitor-state{font-size:22px;font-weight:700;color:#93c5fd}.absence-card .monitor-state{color:#fcd34d}.large-empty{font-size:34px;padding:40px}
.badge{display:inline-block;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:700;background:#f3f4f6}.badge.live{background:#dbeafe;color:#1d4ed8}.badge.manual{background:#ede9fe;color:#6d28d9}.badge.closed{background:#dcfce7;color:#166534}
@media (max-width:820px){.topbar{flex-direction:column;align-items:flex-start}.container{margin-top:16px}.monitor-name{font-size:28px}.monitor-project{font-size:22px}}

.mb-1 {
  margin-bottom:1rem;
}