:root{
  --bg:#f4f3fb; --card:#fff; --ink:#1b1b3a; --ink2:#3d3b63; --muted:#5f5d80; --line:#ecebf6; --line2:#d9d6ee;
  --navy:#12122a; --navy2:#1b1b3a; --primary:#5a43e0; --primary-d:#3f2bb8; --accent:#00e0c6;
  --ok:#0f8a4a; --ok-bg:#e3f4ea; --ok-ink:#0b6b3a;
  --bad:#d12f3f; --bad-bg:#fde6e8; --bad-ink:#a3202e;
  --late:#f59e1b; --late-bg:#fff1dc; --late-ink:#8a4e00;
  --lic:#6d45e8; --lic-bg:#efe9fe; --lic-ink:#5130c4;
  --info:#3b5bdb; --info-bg:#e7ecfd; --info-ink:#2d3fa0;
  --radius:18px; --shadow:0 1px 2px rgba(27,27,58,.06),0 4px 16px rgba(27,27,58,.04);
  --ff:'DM Sans',system-ui,sans-serif; --fd:'Sora','DM Sans',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{overflow-x:hidden;margin:0;background:var(--bg);color:var(--ink);font-family:var(--ff);font-size:15px;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--fd);margin:0;letter-spacing:-.3px}
a{color:var(--primary)}a:hover{color:var(--primary-d)}
button{font:inherit;cursor:pointer}
.muted{color:var(--muted)}
.num{font-family:var(--fd);font-variant-numeric:tabular-nums}

/* ---------- brand ---------- */
.brand{display:flex;align-items:center;gap:12px;padding:0 8px 22px}
.brand-mark{width:40px;height:40px;border-radius:12px;background:var(--primary);display:flex;align-items:center;justify-content:center;flex:none}
.brand span:last-child{display:flex;flex-direction:column}
.brand strong{font:700 17px var(--fd);color:#fff}
.brand small{font-size:12px;color:var(--accent);font-weight:700;letter-spacing:.8px}
.brand-lg strong{color:var(--ink)}

/* ---------- login ---------- */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--navy)}
.login-card{width:100%;max-width:420px;background:#fff;border-radius:24px;padding:36px 32px;display:flex;flex-direction:column;gap:14px}
.login-card h1{font-size:26px;margin-top:8px}
.login-card p{margin:0}
.login-card form{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.login-note{font-size:13px;color:var(--muted);text-align:center;margin-top:4px!important}

/* ---------- layout ---------- */
.app{display:flex;min-height:100vh;background:linear-gradient(to right,var(--navy) 260px,var(--bg) 260px)}
@media (max-width:900px){.app{background:var(--bg)}}
.sidebar{width:260px;flex:none;background:var(--navy);padding:24px 14px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;overflow-y:auto}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:16px;padding:14px 32px;background:rgba(244,243,251,.9);backdrop-filter:blur(8px);position:sticky;top:0;z-index:5;border-bottom:1px solid var(--line)}
.crumbs{font-size:14px;color:var(--muted);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumbs b{color:var(--ink);font-weight:600}
.topbar-right{display:flex;align-items:center;gap:18px}
.sync{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-weight:500}
.user{display:flex;align-items:center;gap:10px}
.user-av{width:40px;height:40px;border-radius:50%;background:var(--navy2);color:#fff;display:flex;align-items:center;justify-content:center;font:600 14px var(--fd)}
.user-txt{display:flex;flex-direction:column;line-height:1.2}
.user-txt strong{font-size:14px}.user-txt small{font-size:12px;color:var(--muted)}
.icon-btn{width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:var(--ink2);display:inline-flex;align-items:center;justify-content:center}
.icon-btn:hover{background:#e9e7f7}
.menu-btn{display:none}
.view{padding:28px 32px 48px;display:flex;flex-direction:column;gap:22px;outline:none;max-width:1600px;width:100%}
.scrim{display:none}

/* ---------- nav ---------- */
.nav{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:0 14px;border:0;border-radius:10px;background:transparent;color:#c9c6e6;font:500 14px var(--ff);text-align:left;text-decoration:none}
.nav:hover{background:rgba(255,255,255,.06);color:#fff}
.nav.on{background:var(--primary);color:#fff}
.nav svg{flex:none}
.nav .chev{margin-left:auto;transition:transform .2s}
.nav[aria-expanded="true"] .chev{transform:rotate(180deg)}
.sub{display:flex;align-items:center;width:100%;min-height:38px;padding:0 14px 0 46px;border-radius:8px;color:#a9a6cc;font:500 13.5px var(--ff);text-decoration:none}
.sub:hover{color:#fff;background:rgba(255,255,255,.05)}
.sub.on{color:var(--accent);background:rgba(0,224,198,.08)}
.nav-group{display:flex;flex-direction:column;gap:1px;padding:2px 0 6px}
.agent-card{margin-top:auto;background:var(--navy2);border:1px solid #2c2b55;border-radius:14px;padding:14px 16px;color:#fff;font-size:13px}
.agent-card div{display:flex;align-items:center;gap:8px}
.agent-card p{margin:6px 0 0;color:#c9c6e6;line-height:1.45;font-size:12.5px}
.dot-live{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(0,224,198,.18);flex:none}
.sync .dot-live{background:#12b886;box-shadow:0 0 0 3px rgba(18,184,134,.18)}

/* ---------- page head & filters ---------- */
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.page-head h1{font-size:28px}
.page-head p{margin:6px 0 0;color:var(--muted);font-size:14px}
.filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.card.filters{padding:18px 20px}
.fld-wrap{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:var(--muted)}
.fld{height:44px;border:1px solid var(--line2);border-radius:10px;background:#fff;padding:0 12px;font:500 14px var(--ff);color:var(--ink);min-width:0}
.fld:focus{outline:2px solid var(--primary);outline-offset:1px}
select.fld{padding-right:30px}
.fld-grow{flex:1 1 200px}
.btn{height:44px;border-radius:10px;border:0;padding:0 18px;font:600 14px var(--ff);display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;text-decoration:none}
.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-d);color:#fff}
.btn-soft{background:#ecebf6;color:var(--ink)}.btn-soft:hover{background:#e1dff2}
.btn-ghost{background:transparent;color:var(--primary);padding:0 8px;height:36px}.btn-ghost:hover{color:var(--primary-d);background:#efedfb}
.btn-danger{background:var(--bad-bg);color:var(--bad-ink)}
.btn-block{width:100%}
.btn-sm{height:36px;padding:0 12px;font-size:13px}

/* ---------- cards ---------- */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 22px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.card-head h2{font-size:16px;display:flex;align-items:center;gap:10px}
.card-head small{font-size:12px;color:var(--muted);font-weight:600}
.dot{width:10px;height:10px;border-radius:50%;flex:none;display:inline-block}
.grid{display:grid;gap:18px}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr))}
.split{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:18px}

/* ---------- KPI ---------- */
.kpi{border:0;border-radius:18px;padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:136px;text-align:left;color:#fff;transition:transform .15s ease,box-shadow .15s ease;text-decoration:none}
.kpi:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(27,27,58,.14);color:#fff}
.kpi-txt{display:flex;flex-direction:column;gap:8px}
.kpi-lbl{font-size:15px;font-weight:600}
.kpi-val{font:700 46px var(--fd);line-height:1}
.kpi-sub{font-size:13px;opacity:.92}
.kpi.green{background:var(--ok)}.kpi.red{background:var(--bad)}.kpi.violet{background:var(--lic)}
.kpi.orange{background:var(--late);color:var(--ink)}.kpi.orange:hover{color:var(--ink)}
.kpi.orange .kpi-lbl{font-weight:700}
.ring{position:relative;width:76px;height:76px;flex:none}
.ring span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 15px var(--fd)}

/* ---------- lists ---------- */
.plist{display:flex;flex-direction:column;gap:2px}
.prow{display:flex;align-items:center;gap:12px;padding:8px 6px;border-radius:10px;text-decoration:none;color:inherit}
a.prow:hover{background:#f6f5fd;color:inherit}
.av{border-radius:50%;flex:none;overflow:hidden;display:block;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--line)}
.av svg{width:100%;height:100%;display:block}
.pinfo{flex:1;min-width:0;display:flex;flex-direction:column}
.pname{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.psub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge{flex:none;border-radius:999px;padding:5px 10px;font:700 12.5px var(--fd);white-space:nowrap}
.b-ok{background:var(--ok-bg);color:var(--ok-ink)}.b-bad{background:var(--bad-bg);color:var(--bad-ink)}
.b-late{background:var(--late-bg);color:var(--late-ink)}.b-lic{background:var(--lic-bg);color:var(--lic-ink)}
.b-info{background:var(--info-bg);color:var(--info-ink)}.b-mute{background:#efeef7;color:var(--muted)}
.b-warn{background:#fef3c7;color:#92400e;border:1px solid #fde68a}
.btn-success{background:#10b981;color:#fff}.btn-success:hover{background:#059669;color:#fff}
.empty{color:var(--muted);font-size:14px;padding:10px 6px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600}
.chip-dark{background:var(--navy2);color:#fff}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:760px}
.tbl th.grp{text-align:center;border-bottom:1px solid var(--line);padding-bottom:6px}
.tbl th{text-align:left;color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;padding:14px 12px;white-space:nowrap}
.tbl td{padding:9px 12px;border-top:1px solid var(--line);color:var(--ink2);white-space:nowrap}
.tbl tr.click{cursor:pointer}
.tbl tr.click:hover td{background:#f8f7fd}
.tbl .who{display:flex;align-items:center;gap:12px}
.tbl .who b{color:var(--ink);font-weight:600}
.tbl td.hora{font:600 15px var(--fd);color:var(--ink)}
.tbl td.r,.tbl th.r{text-align:right}
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 4px 0;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.pager div{display:flex;gap:8px}

/* ---------- charts ---------- */
.chart{width:100%;height:auto;display:block}
.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--muted)}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.bar{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--line)}
.bar span{display:block;height:100%}
.hbar{height:10px;border-radius:5px;background:var(--line);overflow:hidden}
.hbar span{display:block;height:100%;border-radius:5px}

/* ---------- branch cards ---------- */
.bcard{border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px;background:#f8f7fd;box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;color:inherit}
a.bcard:hover{box-shadow:inset 0 0 0 2px var(--primary);color:inherit}
.bcard.sel{background:#f1eefe;box-shadow:inset 0 0 0 2px var(--primary)}
.bstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;text-align:center}
.bstats span{display:flex;flex-direction:column}
.bstats b{font:700 18px var(--fd)}
.bstats small{font-size:11px;color:var(--muted)}

/* ---------- employees ---------- */
.ecard{display:flex;flex-direction:column;justify-content:space-between;height:100%;gap:14px;text-decoration:none;color:inherit;transition:transform .15s}
.ecard:hover{transform:translateY(-2px);color:inherit}
.ecard-top{display:flex;align-items:flex-start;gap:14px}
.ecard .mini{margin-top:auto}
.badge-action{cursor:pointer;appearance:none;-webkit-appearance:none;background:#fef3c7;color:#92400e;border:1px solid #fde68a;display:inline-flex;align-items:center;gap:6px;transition:all .15s;user-select:none;font:700 12px var(--fd);padding:4px 8px;outline:none}
.badge-action:hover{background:#fef08a;border-color:#f59e0b;transform:translateY(-1px);box-shadow:0 2px 6px rgba(245,158,11,.25)}
.badge-cam{display:inline-flex;align-items:center;justify-content:center;background:#f59e0b;color:#fff;border-radius:4px;padding:1px 5px;font-size:11px;line-height:1.2}
.badge-action:hover .badge-cam{background:#d97706}
.mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;text-align:center;border-top:1px solid var(--line);padding-top:12px}
.mini b{display:block;font:700 17px var(--fd)}
.mini small{font-size:11px;color:var(--muted)}
.profile{display:flex;flex-wrap:wrap;align-items:center;gap:22px}
.profile h1{font-size:26px}
.kv{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;color:var(--muted);margin-top:8px}
.kv b{color:var(--ink);font-weight:600}
.stat{background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.stat b{font:700 28px var(--fd)}
.stat small{font-size:13px;color:var(--muted);font-weight:600}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal .h{font-size:11px;color:var(--muted);font-weight:700;text-align:center;text-transform:uppercase}
.cal .d{aspect-ratio:1.3;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;font:600 13px var(--fd);gap:2px;min-height:44px}
.cal .d small{font:600 10px var(--ff)}
.c-ok{background:var(--ok-bg);color:var(--ok-ink)}.c-late{background:var(--late-bg);color:var(--late-ink)}
.c-bad{background:var(--bad-bg);color:var(--bad-ink)}.c-lic{background:var(--lic-bg);color:var(--lic-ink)}
.c-franco{background:#e0e7ff;color:#3730a3;border:1px solid #c7d2fe}
.c-off{background:#f4f3fb;color:#b3b1cc}.c-none{background:transparent}

/* ---------- agent / settings ---------- */
.tg{background:#e6ebee;border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:10px}
.tg-msg{background:#fff;border-radius:4px 14px 14px 14px;padding:12px 14px;font-size:14px;line-height:1.5;white-space:pre-line;max-width:520px;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.tg-msg small{display:block;text-align:right;color:#8a96a3;font-size:11px;margin-top:4px}
.tg-head{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px}
.tg-head span{width:36px;height:36px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center}
.mail{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.mail-h{background:#f8f7fd;padding:12px 16px;font-size:13px;color:var(--muted);border-bottom:1px solid var(--line)}
.mail-b{padding:16px;font-size:14px;line-height:1.55}
.switch{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.switch:first-of-type{border-top:0}
.switch input{width:46px;height:26px;appearance:none;background:#d9d6ee;border-radius:999px;position:relative;cursor:pointer;flex:none;transition:background .2s}
.switch input::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .2s}
.switch input:checked{background:var(--primary)}
.switch input:checked::after{left:23px}
.switch input:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.switch div{display:flex;flex-direction:column;gap:2px}
.switch small{color:var(--muted);font-size:13px}
.shift{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;background:#f8f7fd}
.shift b{font:700 22px var(--fd)}
.days{display:flex;flex-wrap:wrap;gap:8px}
.days span{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.days .on{background:var(--primary);color:#fff}.days .off{background:#ecebf6;color:var(--muted)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:end}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--navy2);color:#fff;padding:12px 18px;border-radius:12px;font-size:14px;font-weight:500;opacity:0;pointer-events:none;transition:all .25s;z-index:50;max-width:calc(100% - 32px)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- responsive ---------- */
.emp-split{grid-template-columns:minmax(300px,380px) minmax(0,1fr)}
@media (max-width:1100px){.split,.emp-split{grid-template-columns:1fr}}
@media (max-width:900px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:30;transform:translateX(-100%);transition:transform .25s}
  .app.nav-open .sidebar{transform:none}
  .app.nav-open .scrim{display:block;position:fixed;inset:0;background:rgba(18,18,42,.45);z-index:20}
  .menu-btn{display:inline-flex}
  .topbar{padding:10px 16px}
  .view{padding:20px 16px 40px}
  .sync,.user-txt{display:none}
  .g2{grid-template-columns:1fr}
}
@media (max-width:520px){
  .kpi-val{font-size:38px}
  .page-head h1{font-size:23px}
  .filters .fld-wrap{flex:1 1 140px}
  .filters .fld{width:100%}
  .g3,.g4{grid-template-columns:1fr}
}

/* ---------- modal dialogs ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 18, 42, 0.65);
  backdrop-filter: blur(5px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: modalFadeIn .18s ease-out;
}
.modal-card {
  width: 100%;
  max-width: 520px;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 16px 48px rgba(18, 18, 42, 0.24), 0 2px 8px rgba(18, 18, 42, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalSlideUp .22s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-head {
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.modal-head h2 {
  font-size: 18px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.modal-body {
  padding: 22px 24px;
  max-height: calc(85vh - 140px);
  overflow-y: auto;
}
.modal-foot {
  padding: 16px 24px;
  background: #fbfbfe;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- interactive day selector & schedule cards ---------- */
.day-selector-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.day-btn {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: #f8f7fd;
  color: var(--muted);
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  transition: all .15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}
.day-btn:hover {
  border-color: var(--primary);
  background: #f0eefb;
  color: var(--primary);
}
.day-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 2px 6px rgba(90, 67, 224, 0.3);
}

.hor-card-select {
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  background: #fff;
  cursor: pointer;
  transition: all .15s ease;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.hor-card-select:hover {
  border-color: var(--primary);
  background: #faf9fe;
}
.hor-card-select.selected {
  border-color: var(--primary);
  background: rgba(90, 67, 224, 0.05);
  box-shadow: 0 0 0 1px var(--primary);
}
.hor-conflict-box {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  transition: all .2s ease;
}
.hor-conflict-box.error {
  background: #fee2e2;
  border: 1px solid #f87171;
  color: #991b1b;
}
.hor-conflict-box.ok {
  background: #ecfdf5;
  border: 1px solid #34d399;
  color: #065f46;
}