:root{
  --ground:#F2F3F1;--surface:#FFFFFF;--surface-2:#F8F9F7;
  --ink:#1A1E21;--ink-2:#5B646B;--ink-3:#8A939A;
  --line:#DCDFDC;--line-strong:#C3C8C4;
  --accent:#1F5F8B;--accent-soft:#E4EEF5;
  --ok:#2C7355;--ok-soft:#E2F0E9;
  --warn:#A26A08;--warn-soft:#F8EEDA;
  --alert:#A63A2E;--alert-soft:#F8E5E2;
  --idle:#8E9691;--idle-soft:#EAECE9;
  --radius:3px;--shadow:0 1px 2px rgba(20,25,28,.06);
  --pop:0 12px 34px rgba(20,25,28,.18),0 2px 6px rgba(20,25,28,.10);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#131719;--surface:#1B1F22;--surface-2:#21262A;
    --ink:#E7EAE8;--ink-2:#9BA5AB;--ink-3:#78838A;
    --line:#2B3236;--line-strong:#3A4247;
    --accent:#6FB3E0;--accent-soft:#1C3140;
    --ok:#5FBF93;--ok-soft:#163026;--warn:#DFA843;--warn-soft:#33280F;
    --alert:#E37A6E;--alert-soft:#361D1A;--idle:#7B8580;--idle-soft:#242A2C;
    --shadow:0 1px 2px rgba(0,0,0,.35);--pop:0 14px 40px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.4);
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--ground);color:var(--ink);font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
.wrap{max-width:1400px;margin:0 auto;padding-left:16px;padding-right:16px}
h1,h2,h3{font-family:"Barlow Condensed","IBM Plex Sans",sans-serif;font-weight:600;letter-spacing:.01em;margin:0}
h1{font-size:28px;line-height:1.1}
h2{font-size:19px}
.lbl{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.lbl.accent{color:var(--accent)}
.mono,td.num,.num{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.muted{color:var(--ink-2);font-size:13px}
.mt{margin-top:10px}.mt2{margin-top:22px}
input,select,textarea{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);padding:7px 9px;min-height:36px}
input[type=checkbox]{min-height:0;width:16px;height:16px;accent-color:var(--accent)}
label{display:block;font-size:13px;color:var(--ink-2);margin-top:10px}
label>input,label>select{display:block;width:100%;margin-top:4px}
.chk{display:inline-flex;gap:6px;align-items:center;margin:0}
.btn{font:inherit;font-weight:600;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);border-radius:var(--radius);padding:7px 12px;cursor:pointer;min-height:36px}
.btn:hover{border-color:var(--ink-3)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
[data-theme] .btn.primary,:root .btn.primary{color:#fff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn.primary{color:#0b1a24}}
.btn.danger{color:var(--alert);border-color:var(--alert)}
.btn.small{padding:3px 8px;min-height:28px;font-size:12.5px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.link{background:none;border:0;color:var(--accent);cursor:pointer;font:inherit;padding:2px 4px;text-decoration:underline}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.err{color:var(--alert);font-size:13px;min-height:18px;margin-top:8px}

/* login */
.login{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:16px}
.login-card{background:var(--surface);border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow);padding:28px;width:100%;max-width:380px}
.login-card h1{margin:6px 0 10px}
.login-card .btn{width:100%;margin-top:10px}

/* top */
.topbar{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;padding-top:14px;padding-bottom:8px}
.filters{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.f{margin:0}.f select{display:block;margin-top:3px;min-width:150px}
.user{font-size:13px;color:var(--ink-2);display:flex;gap:6px;align-items:center;padding-bottom:6px}
.tabs{display:flex;gap:22px;overflow-x:auto;scrollbar-width:none}
.tabs button{background:none;border:0;border-bottom:3px solid transparent;font-family:"Barlow Condensed",sans-serif;font-size:19px;font-weight:600;color:var(--ink-3);padding:6px 0 8px;cursor:pointer;white-space:nowrap;display:flex;gap:7px;align-items:center}
.tabs button i{font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:11px;border:1px solid currentColor;border-radius:2px;padding:0 4px;line-height:16px}
.tabs button.on{color:var(--ink);border-bottom-color:var(--accent)}
main{padding-top:16px;padding-bottom:60px}
.tab{display:none}.tab.on{display:block}

/* days strip */
.days{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 10px}
.day{flex:none;width:48px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);text-align:center;padding:5px 0 4px;cursor:pointer;font-family:"IBM Plex Mono",monospace}
.day .d{font-size:9.5px;letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase}
.day .n{font-size:18px;line-height:1.2}
.day .dot{width:6px;height:6px;border-radius:50%;margin:2px auto 0;background:transparent}
.day.nolab{background:var(--idle-soft);color:var(--ink-3)}
.day.on{border:2px solid var(--accent);background:var(--accent-soft)}
.day.fut{opacity:.45}
.dot.ok{background:var(--ok)}.dot.desvio{background:var(--warn)}.dot.mal{background:var(--alert)}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px}
.kpi{padding:12px 16px;border-right:1px solid var(--line)}
.kpi:last-child{border-right:0}
.kpi b{display:block;font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:18px;margin-top:4px}
.kpi b small{font-size:12px;color:var(--ink-3)}
.note{background:var(--idle-soft);border-radius:var(--radius);padding:9px 14px;font-size:13px;color:var(--ink-2);margin-bottom:12px}
.live{color:var(--ok);font-weight:600;margin-left:8px;white-space:nowrap}
.live.off{color:var(--ink-3)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:14px}
.card.pad{padding:16px}
.card-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:14px}
.tscroll{overflow-x:auto}
.tscroll.big{max-height:70vh;overflow:auto}
.legend{padding:10px 16px;font-size:12.5px;color:var(--ink-2);border-top:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* tables */
table{border-collapse:collapse;width:100%}
.grid th{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:600;text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface-2)}
.grid td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.grid tr:last-child td{border-bottom:0}
.grid tr.click{cursor:pointer}.grid tr.click:hover td{background:var(--surface-2)}
.grid.small td{padding:6px 10px;font-size:12.5px}
.grid td.r,.grid th.r{text-align:right}
.who b{font-weight:500;display:block}.who span{font-size:12px;color:var(--ink-3)}
.t{font-family:"IBM Plex Mono",monospace;font-size:14px;display:block}
.t.warn{color:var(--warn)}.t.bad{color:var(--alert)}
.src{font-size:9.5px;letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase}
.st{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:2px 8px;border-radius:2px;white-space:nowrap;background:var(--idle-soft);color:var(--ink-2)}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.st.ok{background:var(--ok-soft);color:var(--ok)}
.st.desvio,.st.extra{background:var(--warn-soft);color:var(--warn)}
.st.extra{background:var(--accent-soft);color:var(--accent)}
.st.sinmarca,.st.ausente{background:var(--alert-soft);color:var(--alert)}
.st.presente,.st.pendiente{background:var(--accent-soft);color:var(--accent)}
.st.feriado,.st.franco,.st.fuera{background:var(--idle-soft);color:var(--idle)}
.avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;background:var(--idle-soft);vertical-align:middle}
.lvl{font-size:11px;color:var(--ink-3)}

/* month grid */
.mgrid{font-size:12.5px}
.mgrid th,.mgrid td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:0;text-align:center;min-width:46px}
.mgrid thead th{position:sticky;top:0;background:var(--surface-2);z-index:2;font-weight:600;cursor:pointer}
.mgrid thead th .d{font-size:9.5px;letter-spacing:.08em;color:var(--ink-3);display:block;padding-top:4px}
.mgrid thead th .n{font-family:"IBM Plex Mono",monospace;font-size:14px;display:block;padding-bottom:4px}
.mgrid thead th.nolab{background:var(--idle-soft)}
.mgrid thead th:hover{background:var(--accent-soft)}
.mgrid .pc{position:sticky;left:0;background:var(--surface);z-index:1;text-align:left;padding:6px 10px;min-width:190px;max-width:220px;border-right:2px solid var(--line-strong)}
.mgrid thead .pc{z-index:3;background:var(--surface-2);cursor:default}
.mgrid .tot{font-family:"IBM Plex Mono",monospace;padding:6px 8px;background:var(--surface-2);text-align:right;min-width:70px}
.mgrid tfoot td{background:var(--surface-2);font-family:"IBM Plex Mono",monospace;padding:6px 2px;position:sticky;bottom:0}
.cell{cursor:pointer;height:46px;position:relative;padding:3px 2px;line-height:1.15}
.cell:hover{outline:2px solid var(--accent);outline-offset:-2px}
.cell .v{font-family:"IBM Plex Mono",monospace;font-size:13px;display:block}
.cell .x{display:flex;gap:2px;justify-content:center;flex-wrap:wrap;margin-top:2px}
.cell.nolab{background:var(--idle-soft);color:var(--ink-3)}
.cell.ausente{background:var(--alert-soft);color:var(--alert)}
.cell.sinmarca{box-shadow:inset 0 0 0 2px var(--alert)}
.cell.desvio .v{color:var(--warn)}
.cell.fuera,.cell.futuro{background:repeating-linear-gradient(45deg,transparent 0 5px,var(--idle-soft) 5px 7px);cursor:default}
.cell.ed::after{content:"▲";position:absolute;top:1px;right:2px;font-size:7px;color:var(--accent)}
.chip{font-size:9.5px;font-family:"IBM Plex Mono",monospace;padding:0 3px;border-radius:2px;background:var(--idle-soft);color:var(--ink-2)}
.chip.e{background:var(--warn-soft);color:var(--warn)}
.chip.ea{background:var(--ok-soft);color:var(--ok)}
.chip.c{background:var(--accent-soft);color:var(--accent)}
.mark-ed{color:var(--accent);font-size:9px}
.band{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px}
.band div{padding:10px 14px;border-right:1px solid var(--line)}
.band div:last-child{border-right:0}
.band b{display:block;font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:17px}

/* modal */
.ov{position:fixed;inset:0;background:rgba(15,20,23,.45);display:none;align-items:flex-start;justify-content:center;z-index:50;padding:40px 16px;overflow:auto}
.ov.show{display:flex}
.modal{background:var(--surface);border-radius:6px;box-shadow:var(--pop);width:100%;max-width:640px;padding:20px}
.modal.wide{max-width:900px}
.modal h2{font-size:22px;margin-bottom:4px}
.modal .foot{display:flex;justify-content:space-between;gap:8px;margin-top:18px;flex-wrap:wrap}
.modal table.grid td,.modal table.grid th{padding:6px 8px}
.conc{display:grid;grid-template-columns:48px 1fr 100px;gap:6px 10px;align-items:center;margin-top:8px}
.conc input{width:100%;text-align:right;font-family:"IBM Plex Mono",monospace}
.conc .code{font-family:"IBM Plex Mono",monospace;font-weight:600}
.reloj{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;margin-top:10px;font-size:13px}
.hgrid{display:grid;grid-template-columns:90px repeat(4,1fr);gap:6px;align-items:center;margin-top:8px}
.hgrid input{width:100%;min-height:32px;padding:4px 6px}
.hgrid .dn{font-weight:600}
.list-sel{max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:var(--radius);padding:6px 10px;margin-top:6px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--surface);padding:10px 16px;border-radius:4px;z-index:80;display:none;font-size:14px;max-width:90%}
.toast.show{display:block}
.loading{position:fixed;inset:0;background:var(--ground);z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.spinner{width:36px;height:36px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:640px){ h1{font-size:24px} .f select{min-width:120px} .tabs button{font-size:17px} }