:root{
  /* Layout: barra de controle no topo, grade funcionário × dia rolável, painel de alertas à direita */
  --name:210px; --radius:10px; --cell:29px;
  --bg:#F5F6F3; --surface:#FFFFFF; --surface2:#FAFBF8; --line:#E3E6DF; --line2:#CDD2C8;
  --ink:#1A1F1B; --muted:#6B736C; --soft:#EEF0EB;
  --accent:#1F6F43; --accent-ink:#FFFFFF; --accent-soft:#E3F1E8;
  --danger:#B42318; --danger-soft:#FCEBE9; --warn:#9A5B0B; --warn-soft:#FDF2DF;
  --info:#3B3F99; --info-soft:#ECEEFC; --toast:#1A1F1B; --toast-ink:#FFFFFF; --toast-link:#B7F0CC;
  --overlay:rgba(26,31,27,.38); --veil:rgba(245,246,243,.7);
  --f-ui:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-code:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#141815; --surface:#1C211D; --surface2:#20261F; --line:#2D342E; --line2:#3B443C;
  --ink:#E7EBE6; --muted:#97A098; --soft:#252B26;
  --accent:#4CAF78; --accent-ink:#0E1A12; --accent-soft:#1E3326;
  --danger:#F0776B; --danger-soft:#3A1F1C; --warn:#E3A64B; --warn-soft:#3A2D18;
  --info:#A9AEF5; --info-soft:#262A47; --toast:#E7EBE6; --toast-ink:#141815; --toast-link:#1F6F43;
  --overlay:rgba(0,0,0,.55); --veil:rgba(20,24,21,.7); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#141815; --surface:#1C211D; --surface2:#20261F; --line:#2D342E; --line2:#3B443C;
  --ink:#E7EBE6; --muted:#97A098; --soft:#252B26;
  --accent:#4CAF78; --accent-ink:#0E1A12; --accent-soft:#1E3326;
  --danger:#F0776B; --danger-soft:#3A1F1C; --warn:#E3A64B; --warn-soft:#3A2D18;
  --info:#A9AEF5; --info-soft:#262A47; --toast:#E7EBE6; --toast-ink:#141815; --toast-link:#1F6F43;
  --overlay:rgba(0,0,0,.55); --veil:rgba(20,24,21,.7); color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--f-ui);font-size:13px;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer;color:inherit}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.app{display:flex;flex-direction:column;height:100%}

/* Topo */
.top{display:flex;align-items:center;gap:16px;padding:12px 20px;background:var(--surface);border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;letter-spacing:-.01em}
.brand .logo{width:28px;height:28px;border-radius:8px;background:var(--accent);display:grid;place-items:center;color:var(--accent-ink)}
.month{display:flex;align-items:center;gap:2px;background:var(--soft);border-radius:999px;padding:3px}
.month button{border:0;background:transparent;width:28px;height:28px;border-radius:999px;color:var(--muted);font-size:15px}
.month button:hover{background:var(--surface);color:var(--ink)}
.month .lbl{min-width:132px;text-align:center;font-weight:600;text-transform:capitalize}
.tabs{display:flex;gap:2px;background:var(--soft);border-radius:999px;padding:3px}
.tabs button{border:0;background:transparent;padding:6px 14px;border-radius:999px;color:var(--muted);font-weight:500;white-space:nowrap}
.tabs button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.spacer{flex:1}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600}
.pill.draft{background:var(--warn-soft);color:var(--warn)}
.pill.ok{background:var(--accent-soft);color:var(--accent)}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.saveinfo{color:var(--muted);font-size:12px}
.saveinfo.dirty{color:var(--warn);font-weight:600}

/* Barra de ferramentas */
.tools{display:flex;align-items:center;gap:12px;padding:10px 20px;border-bottom:1px solid var(--line);background:var(--surface);flex-wrap:wrap}
.palette{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.palette .hint{color:var(--muted);font-size:12px;margin-right:4px}
.chip{border:1.5px solid transparent;border-radius:7px;min-width:34px;height:30px;padding:0 8px;font-family:var(--f-code);font-weight:600;font-size:12px;position:relative}
.chip.on{border-color:var(--ink);box-shadow:0 0 0 2px var(--surface) inset}
.chip.eraser{background:var(--surface);font-family:var(--f-ui);border:1.5px dashed var(--line2);color:var(--muted);font-weight:500}
.chip.eraser.on{border-style:solid;border-color:var(--ink);color:var(--ink)}
.btn{border:1px solid var(--line2);background:var(--surface);color:var(--ink);height:32px;padding:0 12px;border-radius:8px;font-weight:500;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn:hover{background:var(--soft)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn .badge{background:var(--danger);color:var(--surface);border-radius:999px;font-size:11px;padding:0 6px;line-height:16px}
.btn .badge.w{background:var(--warn)}
.menuwrap{position:relative}
.menu{position:absolute;right:0;top:36px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.12);padding:6px;min-width:250px;z-index:30;display:none}
.menu.open{display:block}
.menu button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:8px 10px;border-radius:6px}
.menu button:hover{background:var(--soft)}
.menu small{display:block;color:var(--muted);font-size:11px}

/* Área principal */
.main{flex:1;display:flex;min-height:0}
.gridwrap{flex:1;overflow:auto;position:relative;padding:0 0 20px}
table.grid{border-collapse:separate;border-spacing:0;user-select:none;margin:12px 20px}
.grid th,.grid td{padding:0;text-align:center;background:var(--bg)}
.grid thead th{position:sticky;z-index:5;font-weight:600;font-size:11px;color:var(--muted)}
.grid thead tr.r1 th{top:0;height:24px;padding-top:4px}
.grid thead tr.r2 th{top:24px;height:20px;font-size:10px;font-weight:500;border-bottom:1px solid var(--line)}
.grid th.wk{color:var(--ink)}
.grid th.hol{color:var(--danger)}
.grid th.hol::after{content:"";display:block;width:4px;height:4px;border-radius:50%;background:var(--danger);margin:1px auto 0}
.grid .name{position:sticky;left:0;z-index:4;text-align:left;min-width:var(--name);max-width:var(--name);padding:0 10px 0 4px;background:var(--bg)}
.grid thead .name{z-index:7}
.grid td.name{border-right:1px solid var(--line)}
.grid .name b{display:block;font-weight:600;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grid .name span{display:block;color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grid tr.setor td{height:30px;text-align:left;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;padding:10px 4px 2px}
.grid tr.setor td.name{background:var(--bg)}
.grid td.c{width:var(--cell);min-width:var(--cell);height:var(--cell);font-family:var(--f-code);font-weight:600;font-size:11px;cursor:crosshair;border:2px solid var(--bg);border-radius:7px;position:relative}
.grid td.c.empty{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.grid td.c.wkcol.empty{background:var(--surface2)}
.grid td.c.sel{outline:2px solid var(--ink);outline-offset:-1px;z-index:2}
.grid td.c.err::after{content:"";position:absolute;top:2px;right:2px;width:6px;height:6px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 1.5px var(--surface)}
.grid td.c.flash{animation:flash 1.2s ease 2}
@keyframes flash{50%{box-shadow:0 0 0 3px var(--danger)}}
.grid tr.emp:hover td.name{color:var(--accent)}
.grid .tot{position:sticky;z-index:4;background:var(--bg);min-width:58px;font-size:12px;font-variant-numeric:tabular-nums;padding:0 6px;border-left:1px solid var(--line)}
.grid thead .tot{z-index:7}
.grid tfoot td{position:sticky;bottom:0;z-index:5;background:var(--surface);height:30px;font-weight:600;font-size:11.5px;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.grid tfoot td.tot{z-index:8;background:var(--surface)}
.grid tfoot td.name{z-index:9;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.grid tfoot td.low{color:var(--danger);background:var(--danger-soft)}
.locked .grid td.c{cursor:not-allowed}

.empty-state{margin:12px 20px;padding:14px 16px;border:1px dashed var(--line2);border-radius:var(--radius);background:var(--surface);flex-wrap:wrap;display:flex;align-items:center;gap:12px}
.empty-state p{margin:0;flex:1;color:var(--muted)}
.banner{margin:12px 20px 0;padding:10px 14px;border-radius:var(--radius);background:var(--accent-soft);color:var(--accent);font-weight:500}
.banner.demo{background:var(--info-soft);color:var(--info)}

/* Painel de alertas */
.side{width:310px;border-left:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;min-height:0}
.side.hidden{display:none}
.side h3{margin:0;padding:14px 16px 10px;font-size:13px;display:flex;align-items:center;gap:8px}
.side h3 .x{margin-left:auto;border:0;background:transparent;color:var(--muted);font-size:16px}
.side .sum{display:flex;gap:6px;padding:0 16px 10px}
.alerts{overflow:auto;padding:0 10px 16px;flex:1}
.al{display:flex;gap:10px;padding:9px 8px;border-radius:8px;cursor:pointer;align-items:flex-start}
.al:hover{background:var(--soft)}
.al i{flex:none;width:8px;height:8px;border-radius:50%;margin-top:5px;background:var(--warn)}
.al.erro i{background:var(--danger)}
.al b{display:block;font-weight:600;font-size:12px}
.al span{color:var(--muted);font-size:12px}
.okmsg{padding:24px 16px;color:var(--accent);text-align:center}

/* Modal */
.ov{position:fixed;inset:0;background:var(--overlay);display:none;align-items:center;justify-content:center;z-index:50;padding:16px}
.ov.open{display:flex}
.modal{background:var(--surface);border-radius:14px;width:min(720px,100%);max-height:90vh;display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,.25)}
.modal header{padding:18px 20px 6px}
.modal header h2{margin:0;font-size:16px}
.modal header p{margin:4px 0 0;color:var(--muted)}
.modal .body{padding:10px 20px;overflow:auto}
.modal footer{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px}
.opts{display:grid;gap:8px;margin:6px 0 14px}
.opts label{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:8px;cursor:pointer}
.opts label small{display:block;color:var(--muted)}
table.list{width:100%;border-collapse:collapse}
table.list th{font-size:11px;color:var(--muted);text-align:left;font-weight:600;padding:6px 6px;border-bottom:1px solid var(--line)}
table.list td{padding:5px 6px;border-bottom:1px solid var(--soft)}
table.list select{font:inherit;padding:4px 6px;border:1px solid var(--line2);border-radius:6px;background:var(--surface);color:var(--ink)}

.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%) translateY(20px);background:var(--toast);color:var(--toast-ink);padding:10px 16px;border-radius:10px;opacity:0;transition:.25s;z-index:60;max-width:90vw;display:flex;gap:12px;align-items:center}
.toast.show{opacity:1;transform:translateX(-50%)}
.toast.err{background:var(--danger);color:var(--surface)}
.toast a{color:var(--toast-link);font-weight:600}
.loading{position:fixed;inset:0;background:var(--veil);display:none;align-items:center;justify-content:center;z-index:70;font-weight:600;color:var(--muted)}
.loading.on{display:flex}
.kbd{font-size:11px;color:var(--muted)}
.kbd kbd{font-family:inherit;border:1px solid var(--line2);border-bottom-width:2px;border-radius:4px;padding:0 4px;background:var(--surface)}

@media (max-width:900px){
  .side{position:fixed;right:0;top:0;bottom:0;z-index:40;box-shadow:-10px 0 30px rgba(0,0,0,.15);width:min(310px,90vw)}
  .top,.tools{padding:10px 12px}
  table.grid{margin:12px}
  :root{--name:140px}
  .kbd{display:none}
  .grid .tot{right:auto!important}
  .grid tbody .tot{position:static}
}