:root{
  --bg:#f4f6f8; --card:#fff; --ink:#1a2433; --muted:#6b7686;
  --accent:#0f7b6c; --accent-soft:#e6f2f0; --line:#e5e9ee;
  --danger:#c0392b; --ok:#1e8449; --warn:#b9770e;
  --radius:16px; --shadow:0 6px 24px rgba(20,40,50,.08);
}
[data-theme="dark"]{
  --bg:#0f141a; --card:#1a2230; --ink:#e6ebf2; --muted:#9aa5b5;
  --accent:#2bb89a; --accent-soft:#1c2b2b; --line:#2a3442;
  --danger:#e07a6a; --ok:#4ec98a; --warn:#d9a441;
}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{background:var(--card);color:var(--ink);}
[data-theme="dark"] .qty,[data-theme="dark"] .key,[data-theme="dark"] .val-inp,[data-theme="dark"] .segbtn,
[data-theme="dark"] .preset,[data-theme="dark"] .gpill,[data-theme="dark"] .escala-cell,[data-theme="dark"] .wday,
[data-theme="dark"] .pillbtn,[data-theme="dark"] .iconbtn,[data-theme="dark"] .cal-view-sel,[data-theme="dark"] .calm-cell,
[data-theme="dark"] .dv-per input,[data-theme="dark"] .dv-code,[data-theme="dark"] .light,
[data-theme="dark"] .cal-toolbar select,[data-theme="dark"] .cal-toolbar .ghost,[data-theme="dark"] .tpl-btn,
[data-theme="dark"] .cal-code-sel{background:var(--card);color:var(--ink);}
[data-theme="dark"] .cal-col{background:repeating-linear-gradient(to bottom,transparent,transparent 45px,var(--line) 45px,var(--line) 46px);}
[data-theme="dark"] .cal-day.servico{background:repeating-linear-gradient(45deg,#241d0e,#241d0e 8px,#1a2230 8px,#1a2230 16px);}
[data-theme="dark"] .calm-cell.feriado{background:#2a1f1f;}
[data-theme="dark"] .calm-cell.today{background:var(--accent-soft);}
[data-theme="dark"] .week-progress-bar{background:var(--line);}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{font-family:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
     background:var(--bg);color:var(--ink);display:flex;justify-content:center;
     -webkit-font-smoothing:antialiased;}
#app{width:100%;max-width:1280px;display:flex;flex-direction:column;padding:24px 28px;gap:20px;}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:12px;}
.logo{width:42px;height:42px;border-radius:12px;background:var(--accent);color:#fff;
      display:flex;align-items:center;justify-content:center;font-size:22px;}
.brand h1{font-size:20px;font-weight:650;}
.brand p{font-size:13px;color:var(--muted);}
.pill{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 8px 6px 14px;
      font-size:14px;display:flex;align-items:center;gap:8px;}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);}
.pill button{border:none;background:none;color:var(--accent);font-weight:600;font-size:13px;cursor:pointer;}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
      box-shadow:var(--shadow);padding:24px 26px;}
h2.step-title{font-size:24px;font-weight:650;margin-bottom:4px;}
.step-sub{color:var(--muted);font-size:15px;margin-bottom:18px;}
.progress{display:flex;gap:8px;margin-bottom:6px;}
.progress .pdot{width:11px;height:11px;border-radius:50%;background:#d5dbe2;}
.progress .pdot.on{background:var(--accent);transform:scale(1.2);}
.progress .pdot.done{background:var(--accent);opacity:.55;}

/* login */
.names{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;}
.namebtn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:var(--card);
         border:1.5px solid var(--line);border-radius:var(--radius);padding:20px 18px;cursor:pointer;
         font-size:17px;font-weight:600;text-align:left;transition:.15s;box-shadow:var(--shadow);}
.namebtn:hover{border-color:var(--accent);transform:translateY(-1px);}
.namebtn .code{font-size:13px;color:var(--muted);font-weight:500;}
.lanbar{position:absolute;top:12px;right:12px;display:flex;align-items:center;gap:8px;}
.lanchip{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--muted);border:1.5px solid var(--line);border-radius:20px;padding:5px 12px;background:var(--card);white-space:nowrap;}
.lanchip:hover{border-color:var(--accent);color:var(--ink);}
.admin-entry{margin-top:20px;display:flex;gap:12px;justify-content:center;}

/* PIN dots */
.pindots{display:flex;gap:16px;justify-content:center;margin:20px 0;}
.pindots span{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);}
.pindots span.f{background:var(--accent);border-color:var(--accent);}

/* stepper */
.stepper{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px;border-bottom:1px solid var(--line);}
.stepper:last-child{border-bottom:none;}
.stepper .label{font-size:19px;font-weight:600;padding:14px 0;}
.steppers-btns{display:flex;gap:8px;align-items:center;}
.stepbtn{width:54px;height:52px;border-radius:13px;border:none;font-size:24px;font-weight:600;
         cursor:pointer;background:var(--accent-soft);color:var(--accent);transition:.1s;}
.stepbtn:hover{background:var(--accent);color:#fff;}
.stepbtn:active{transform:scale(.95);}
.stepbtn.small{width:46px;font-size:16px;background:#eef1f4;color:var(--muted);}
.stepbtn.small:hover{background:var(--accent);color:#fff;}
/* ✕ de APAGAR um item já gravado nas listas de movimentos (cartão «Movimentos — ao longo do dia»,
   Multibanco do assistente, edição do supervisor, despesas/transferências/outros): SEM a caixa
   cinzenta atrás do glifo (pedido do dono, 2026-09-26).
   Continua a ser um botão de APAGAR, por isso mantém-se: a MESMA caixa (largura/altura/raio não
   mudam — o ✕ fica no mesmo sítio e o valor não se mexe), `title`/`aria-label` em PT-PT, cursor de
   apontar e um sinal discreto de interacção (tinta + leve fundo no hover, contorno no focus).
   Classe nova e estreita de propósito: mexer em `.stepbtn.small` mudava o teclado, os steppers e os
   modais que não estão a ser revistos. */
.stepbtn.small.qmb-del{background:transparent;color:var(--muted);box-shadow:none;border:none;}
.stepbtn.small.qmb-del:hover{background:var(--accent-soft);color:var(--danger);}
.stepbtn.small.qmb-del:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.stepbtn.wide{width:auto;min-width:46px;padding:0 14px;white-space:nowrap;font-size:15px;}
/* «O meu fecho de caixa» numa linha só (2026-09-24) */
.close-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;}
.close-row > .step-title{margin:0;font-size:17px;white-space:nowrap;}
.close-row > .chip{max-width:460px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.close-row-act{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
/* a pastilha «Hoje não está escalado…» estava em cinzento-claro sobre cinzento-claro.
   Repete-se `.gray` no seletor porque `.chip.gray` empata em especificidade e ganharia o fundo. */
.close-row .chip.gray{background:#eef4fb;color:#1e3a8a;border:1.5px solid #93b4d8;font-weight:700;}
/* setas da semana: quadradas, fundo transparente */
.stepbtn.navsq{width:38px;height:38px;min-width:38px;padding:0;border-radius:10px;background:transparent;
  color:var(--ink);border:none;display:inline-flex;align-items:center;justify-content:center;
  font-size:21px;font-weight:700;line-height:1;}
.stepbtn.navsq:hover{background:var(--accent-soft);color:var(--accent);}
.stepbtn.navsq:active{transform:scale(.95);}
/* ausências: pastilhas com contraste (2026-09-24).
   Precisa de `.chip.gray` no seletor: `.chip.gray` (2 classes, linha ~179) empata em especificidade com
   `.cal-absences-chips .chip` e, vindo antes, ganhava — o fundo ficava cinzento-claro. */
.cal-absences-chips .chip.gray{background:#fff;color:#111827;border:1.5px solid #94a3b8;font-weight:700;
  box-shadow:0 1px 2px rgba(16,24,40,.08);}
/* «Pedidos de Folgas e Férias» com contorno próprio */
.ferias-pending-box{border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:12px;background:var(--card);}
.qmb-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px;}
.qmb-row:last-child{border-bottom:none;}
.qmb-term{font-weight:600;min-width:92px;color:var(--ink);}
.qmb-num{color:var(--muted);flex:1;font-variant-numeric:tabular-nums;}
.qmb-amt{font-weight:700;min-width:82px;text-align:right;font-variant-numeric:tabular-nums;}
.qmb-chip{background:var(--accent-soft,#eaf6f3);border:1.5px solid var(--accent);color:var(--ink);border-radius:999px;padding:4px 12px;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;}
.qmb-chip b{color:var(--accent);}
.qmb-chip:hover{background:var(--accent);color:#fff;}
.qmb-chip:hover b{color:#fff;}
.qty{width:96px;height:52px;border-radius:13px;border:1.5px solid var(--line);background:#fff;
     font-size:22px;font-weight:700;cursor:pointer;text-align:center;color:var(--ink);}
.qty:hover{border-color:var(--accent);background:var(--accent-soft);}
.qty.zero{color:#c0c8d0;}

/* amounts */
.amount-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;}
.amount{display:flex;flex-direction:column;gap:10px;background:var(--card);
        border:1.5px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);}
.amount:hover{border-color:var(--accent);}
.amount.active{border-color:var(--accent);outline:3px solid var(--accent-soft);}
.amount .lbl{font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.amount .lbl small{display:block;color:var(--muted);font-weight:400;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.amount .val{font-size:22px;font-weight:700;color:var(--muted);}
.amount .val.filled{color:var(--ink);}

/* keypad */
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:480px;margin-top:16px;}
.key{height:70px;border-radius:14px;border:1.5px solid var(--line);background:#fff;font-size:25px;
     font-weight:600;cursor:pointer;box-shadow:var(--shadow);transition:.1s;min-width:72px;}
.key:hover{border-color:var(--accent);}
.key:active{background:var(--accent-soft);}
.key.green{background:var(--accent);color:#fff;border:none;}

.diff-banner{border-radius:var(--radius);padding:20px 24px;font-size:19px;font-weight:600;
             display:flex;align-items:center;justify-content:space-between;margin:14px 0;}
.diff-banner.ok{background:#eaf5ee;color:var(--ok);}
.diff-banner.warn{background:#fdf3e2;color:var(--warn);}
.diff-banner.bad{background:#fbeaea;color:var(--danger);}
.diff-banner .big{font-size:32px;font-weight:800;}
.diff-hint{font-size:15px;padding:0 4px 4px;color:var(--muted);}
.diff-hint.ok{color:var(--ok);}
.diff-hint.warn{color:var(--warn);}
.diff-hint.bad{color:var(--danger);font-weight:600;}

.summary{width:100%;border-collapse:collapse;}
.summary td{padding:12px 6px;font-size:16px;border-bottom:1px solid var(--line);}
.summary td:last-child{text-align:right;font-weight:600;}
.summary tr.total td{font-size:20px;font-weight:800;border-bottom:none;padding-top:14px;}

.btnrow{display:flex;gap:14px;justify-content:flex-end;margin-top:6px;flex-wrap:wrap;}
button.big{min-height:62px;border-radius:14px;border:none;font-size:18px;font-weight:650;
           cursor:pointer;padding:0 28px;transition:.12s;}
button.big.primary{background:var(--accent);color:#fff;box-shadow:0 6px 18px rgba(15,123,108,.35);}
button.big.primary:hover{filter:brightness(1.06);}
button.big.ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink);}
button.big:active{transform:scale(.98);}
button.big:disabled{opacity:.45;cursor:not-allowed;}

/* admin */
.admin{display:grid;grid-template-columns:230px 1fr;gap:20px;align-items:start;}
.sidenav{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
         box-shadow:var(--shadow);padding:14px;display:flex;flex-direction:column;gap:6px;position:sticky;top:16px;}
.sidenav .nav{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;
              font-size:16px;font-weight:600;color:var(--ink);cursor:pointer;border:none;background:none;text-align:left;}
.sidenav .nav:hover{background:var(--accent-soft);}
.sidenav .nav.active{background:var(--accent);color:#fff;}
.sidenav .nav .ico{font-size:20px;width:24px;text-align:center;}
.content{display:flex;flex-direction:column;gap:20px;min-width:0;}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;}
.stat .k{font-size:13px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.4px;}
.stat .v{font-size:30px;font-weight:800;margin-top:6px;}
.stat .sub{font-size:13px;color:var(--muted);margin-top:4px;}

table.grid{width:100%;border-collapse:collapse;}
table.grid th,table.grid td{padding:12px 10px;text-align:left;font-size:15px;border-bottom:1px solid var(--line);}
table.grid th{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-weight:600;}
table.grid td.num,table.grid th.num{text-align:right;font-variant-numeric:tabular-nums;}
tr.audit-group{cursor:pointer;}
tr.audit-group:hover{background:var(--accent-soft);}
tr.audit-sub td{background:var(--bg);color:var(--muted);font-size:14px;}
.audit-caret{color:var(--accent);font-weight:700;margin-left:2px;}
.chip{display:inline-block;padding:5px 12px;border-radius:999px;font-size:13px;font-weight:600;}
.chip.ok{background:#eaf5ee;color:var(--ok);}
.chip.warn{background:#fdf3e2;color:var(--warn);}
.chip.bad{background:#fbeaea;color:var(--danger);}
.chip.gray{background:#eef1f4;color:var(--muted);}
.diffcell{font-weight:700;}
.diffcell.ok{color:var(--ok);} .diffcell.warn{color:var(--warn);} .diffcell.bad{color:var(--danger);}
.approve{min-height:44px;border-radius:11px;border:none;font-size:14px;font-weight:650;padding:0 16px;cursor:pointer;}
.approve.on{background:var(--accent);color:#fff;}
.approve.off{background:#eef1f4;color:var(--muted);}

/* admin login form */
.form{display:flex;flex-direction:column;gap:14px;max-width:400px;margin:0 auto;}
.form input{height:56px;border-radius:13px;border:1.5px solid var(--line);font-size:18px;padding:0 16px;}
.form input:focus{outline:none;border-color:var(--accent);}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;
       padding:14px 22px;border-radius:12px;font-size:15px;box-shadow:var(--shadow);z-index:99;}
.err{background:var(--danger);}
.center-toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--ink);color:#fff;
  padding:22px 34px;border-radius:16px;font-size:18px;font-weight:700;box-shadow:0 20px 60px rgba(0,0,0,.3);z-index:400;
  text-align:center;}
@media(max-width:860px){ .admin{grid-template-columns:1fr;} .sidenav{position:static;flex-direction:row;flex-wrap:wrap;} }

/* admin v2: headers, date nav, modals, matrix */
.headrow{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:12px;}
.daynav{display:flex;align-items:center;gap:10px;}
.daynav input[type=date], .daynav input[type=month], select, input.target-inp{
  height:48px;border-radius:11px;border:1.5px solid var(--line);font-size:16px;padding:0 12px;
  font-family:inherit;color:var(--ink);background:#fff;}
.daynav input[type=date]:focus, select:focus, input.target-inp:focus{outline:none;border-color:var(--accent);}
select{min-width:180px;}
.dim{color:#c0c8d0;}
.modal{position:fixed;inset:0;background:rgba(15,25,35,.45);display:flex;align-items:center;justify-content:center;
       z-index:200;padding:20px;}
.modalcard{background:var(--card);border-radius:var(--radius);box-shadow:0 20px 60px rgba(0,0,0,.25);
           padding:24px 28px;max-width:560px;width:100%;max-height:92vh;overflow:auto;}
.matrixwrap{overflow-x:auto;max-width:100%;}
table.matrix th,table.matrix td{min-width:52px;text-align:center;font-size:13px;padding:8px 6px;}
table.matrix th{text-align:center;}

/* field info "i" button */
.infobtn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;
         border:1.5px solid var(--line);background:#fff;color:var(--muted);font-size:13px;font-weight:700;
         cursor:pointer;vertical-align:middle;margin-left:4px;line-height:1;}
.infobtn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);}

/* stoplight (semáforo) */
.stoplight{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;}
.light{display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:8px 10px;}
.light .bulb{width:13px;height:13px;border-radius:50%;flex-shrink:0;}
.light.idle .bulb{background:#e74c3c;box-shadow:0 0 10px rgba(231,76,60,.55);}
.light.editing .bulb{background:#f39c12;box-shadow:0 0 10px rgba(243,156,18,.6);animation:pulse 1.1s infinite;}
.light.submitted .bulb{background:#27ae60;box-shadow:0 0 10px rgba(39,174,96,.55);}
.light.off{opacity:.55;}
.light.off .bulb{background:#b6bec6;box-shadow:none;}
.light .nm{font-weight:650;font-size:14px;display:flex;align-items:center;gap:4px;min-width:0;}
.light .nm-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.light .st{color:var(--muted);font-size:12px;margin-left:auto;white-space:nowrap;flex-shrink:0;}
.legend{display:flex;gap:16px;margin-top:8px;color:var(--muted);font-size:12px;flex-wrap:wrap;}
.legend .bulb{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:5px;vertical-align:-1px;}
.legend .bulb.idle{background:#e74c3c;} .legend .bulb.editing{background:#f39c12;} .legend .bulb.submitted{background:#27ae60;} .legend .bulb.off{background:#b6bec6;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}

/* topbar: date, help, avatar, power button */
.top-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.date{font-size:14px;color:var(--muted);white-space:nowrap;}
.iconbtn{width:44px;height:44px;border-radius:12px;border:1.5px solid var(--line);background:#fff;font-size:20px;cursor:pointer;}
.iconbtn:hover{border-color:var(--accent);}
.power{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line);background:none;color:var(--muted);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.power:hover{background:#fbeaea;border-color:var(--danger);color:var(--danger);}
.avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;cursor:pointer;background:var(--accent-soft);display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:var(--accent);flex-shrink:0;}
.avatar.fallback{font-size:16px;}
.avatar.big{width:48px;height:48px;font-size:20px;}
.namebtn .avatar{margin-bottom:8px;}
.pill .who{font-size:14px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* direct input fields + keypad button */
.qtywrap{display:flex;align-items:center;gap:6px;}
.qtywrap .qty{width:80px;cursor:text;}
.qtywrap .qty:focus{outline:none;border-color:var(--accent);}
.moneywrap{display:flex;align-items:center;gap:8px;width:100%;}
.val-inp{flex:1;min-width:0;height:52px;border-radius:13px;border:1.5px solid var(--line);font-size:20px;font-weight:700;text-align:right;padding:0 12px;color:var(--ink);background:#fff;}
.val-inp:focus{outline:none;border-color:var(--accent);}
.eur{font-size:20px;font-weight:700;color:var(--muted);}
.keypadbtn{width:46px;height:52px;border-radius:13px;border:1.5px solid var(--line);background:var(--accent-soft);color:var(--accent);font-size:20px;font-weight:700;cursor:pointer;flex-shrink:0;}
.keypadbtn:hover{background:var(--accent);color:#fff;}

/* keypad pop-up */
.keypadcard{max-width:420px;}
.kp-display{background:var(--accent-soft);border-radius:13px;text-align:right;font-size:32px;font-weight:800;padding:14px 18px;margin:12px 0;color:var(--ink);}
.seg{display:flex;border:1.5px solid var(--line);border-radius:11px;overflow:hidden;margin:8px 0;}
.segbtn{flex:1;height:46px;border:none;background:#fff;font-size:16px;font-weight:600;cursor:pointer;color:var(--muted);}
.segbtn.on{background:var(--accent);color:#fff;}

/* misc */
.backlink{display:block;margin:0 0 12px;background:none;border:none;color:var(--muted);font-size:15px;font-weight:600;cursor:pointer;text-align:left;}
.backlink:hover{color:var(--accent);}
.big-check{font-size:54px;margin:8px 0;}
.helpcard{max-width:880px;width:100%;}

/* accordion */
.acc{border:1.5px solid var(--line);border-radius:14px;background:var(--card);margin-bottom:12px;overflow:hidden;min-width:0;}
.acc-head{display:flex;align-items:center;gap:10px;padding:16px 18px;cursor:pointer;user-select:none;}
.acc-head:hover{background:var(--accent-soft);}
.acc-ico{font-size:20px;flex-shrink:0;}
.acc-title{font-size:17px;font-weight:700;flex:1;}
.acc-chev{color:var(--muted);font-size:16px;transition:transform .15s;}
.acc-body{padding:14px 18px 18px;border-top:1px solid var(--line);}

/* ONDA 12 (2026-09-29) — as Definições em três grupos com título e contagem.
   Classes PRÓPRIAS e estreitas: não tocam nas `.acc` que o resto da app usa (os itens lá dentro
   continuam a ser os acordeões de sempre, com os ids de estado deles). O grupo é o contentor e tem
   CONTORNO PRÓPRIO (2px); o cabeçalho é a única superfície tingida, para a hierarquia se ler de
   relance nos dois temas. Tudo por `var(--…)` — o tema escuro sai certo sem regra nenhuma. */
.defgroup{border:2px solid var(--line);border-radius:16px;background:var(--card);margin-bottom:16px;overflow:hidden;min-width:0;}
.defgroup-head{display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;user-select:none;background:var(--accent-soft);}
.defgroup-head:hover .defgroup-chev{color:var(--accent);}
.defgroup-head:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
.defgroup-ico{font-size:18px;flex-shrink:0;}
.defgroup-title{flex:1;font-size:16px;font-weight:700;min-width:0;}
.defgroup-count{font-weight:800;color:var(--accent);}
.defgroup-chev{color:var(--muted);font-size:16px;transition:transform .15s;}
.defgroup-body{padding:12px 14px 0;border-top:1px solid var(--line);}

/* graph presets + pills */
.presets{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.preset{height:38px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-size:14px;font-weight:600;cursor:pointer;color:var(--muted);}
.preset.on{background:var(--accent);color:#fff;border-color:var(--accent);}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.gpill{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-size:14px;font-weight:600;cursor:pointer;color:var(--ink);}
.gpill .dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;}
.gpill .pv{color:var(--muted);font-weight:500;}
.gpill.on{border-color:var(--c,var(--accent));}
.gpill.off{opacity:.45;border-style:dashed;}

/* supervisor highlight in the stoplight */
.light.issup{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft), 0 2px 8px rgba(0,0,0,.05);}
.supbadge{font-size:11px;font-weight:600;color:var(--accent);background:var(--accent-soft);padding:2px 7px;border-radius:999px;margin-left:6px;white-space:nowrap;}

/* escala (weekly roster) */
.escala-cell{width:34px;height:34px;border-radius:9px;border:1.5px solid var(--line);background:#fff;font-size:16px;font-weight:700;color:var(--accent);cursor:pointer;}
.escala-cell.on{background:var(--accent);border-color:var(--accent);color:#fff;}
.escala th,.escala td{padding:6px 8px;}

/* employee week view */
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;}
.wday{border:1.5px solid var(--line);border-radius:12px;padding:10px 6px;text-align:center;background:#fff;}
.wday.on{background:var(--accent-soft);border-color:var(--accent);}
.wday.today{box-shadow:0 0 0 2px var(--accent);}
.wday .wd{font-size:12px;color:var(--muted);font-weight:600;}
.wday .wn{font-size:16px;font-weight:700;margin:2px 0;}
.wday .wst{font-size:12px;color:var(--muted);}
.wday.on .wst{color:var(--accent);font-weight:700;}

/* ---- Escala: Google-Calendar-style week view ---- */
/* 2026-09-25: «the width for the "trancar/destrancar" button is fixed, but it's creating two
   rows unnecessarily. Put the view dropdown next to Esta semana, and pull the lock/unlock more the to
   the left, to have more space.» UMA só linha, sem quebrar (flex-wrap:nowrap):
     • a caneta e o «＋» passam para a ESQUERDA (é o primeiro par da linha);
     • o select da pessoa e o do modo (Dia/Semana/Mês) vão para a DIREITA, junto de «Esta semana»;
     • o espaço que sobra fica numa folga flexível a meio (.cal-nav-slack), que encolhe a zero em
       ecrãs estreitos.
   Nenhum controlo saiu e a largura FIXA da caneta não foi tocada: o que encolheu foi o gap (10→6px),
   o rótulo da semana (16→13,5px) e o padding do «Esta semana»/do select do modo. */
.cal-nav{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;margin:10px 0;}
.cal-nav-slack{flex:1 1 0;min-width:0;}
.cal-nav .cal-week-lbl{font-weight:700;font-size:13.5px;white-space:nowrap;}
.cal-nav .navtoday{padding:0 10px;}
.cal-nav select.cal-view-sel.curto{max-width:132px;}
.cal-toggle{display:inline-flex;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;}
.cal-toggle button{background:var(--card);color:var(--muted);border:none;font-size:13px;font-weight:700;padding:8px 14px;cursor:pointer;font-family:inherit;}
.cal-toggle button+button{border-left:1.5px solid var(--line);}
.cal-toggle button.on{background:var(--accent);color:#fff;}
.cal-nav .ghost{min-height:36px;padding:0 12px;}
.cal-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 12px;}
.cal-toolbar .ghost{min-height:38px;padding:0 14px;border-radius:10px;border:1.5px solid var(--line);background:#fff;color:var(--ink);font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;}
.cal-toolbar .ghost:hover{border-color:var(--accent);color:var(--accent);}
.pillbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:0 14px;border-radius:10px;border:1.5px solid var(--line);background:#fff;color:var(--ink);font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;line-height:1;}
.pillbtn:hover{border-color:var(--accent);color:var(--accent);}
.pillbtn.primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.pillbtn.primary:hover{background:var(--accent-dark,var(--accent));color:#fff;}
.pillbtn:disabled{opacity:.45;cursor:default;}
.pillbtn:disabled:hover{border-color:var(--line);color:var(--ink);}
/* A ÚNICA caneta do horário da semana (2026-09-24) e o «＋» que só existe destrancada.
   Já não há uma caneta por pessoa: a legenda ficou só com as cores.
   2026-09-25: a caneta passou a CADEADO e sem texto (🔓 destrancado, 🔒 trancado). A largura
   mínima garante o que o dono pediu — um botão só com um emoji não pode mudar de tamanho quando o
   estado muda, senão os controlos ao lado deslocam-se ao trancar/destrancar. */
.cal-pencil{min-height:40px;min-width:50px;}
.cal-pencil.on{box-shadow:inset 0 0 0 2px rgba(0,0,0,.18);}
/* 2026-09-25: «Make sure buttons remain in the same layout whether it's trancar ou
   destrancar.» Os dois emojis do cadeado ficam empilhados na MESMA célula de grelha — o botão mede
   sempre o mesmo — e o «＋» fica no lugar, invisível, com o horário trancado. Assim a linha de
   controlos não se desloca ao trancar/destrancar. */
.cal-pencil-lbl{display:inline-grid;align-items:center;justify-items:center;}
.cal-pencil-lbl>span{grid-area:1/1;white-space:nowrap;}
.cal-pencil-lbl>span.off{visibility:hidden;}
.cal-plus{min-height:40px;min-width:44px;font-size:17px;font-weight:800;}
.cal-plus.off{visibility:hidden;}
/* 2026-09-25: a faixa «✏️ Horário destrancado — …» (e a nota «Só leitura — …») saíram. O
   estado do horário vê-se SÓ no cadeado: 🔓 destrancado = .pillbtn.primary.on (fundo accent + emoji
   branco + anel por dentro), 🔒 trancado = .pillbtn simples. A regra .cal-unlocked morreu com a faixa. */
/* 2026-09-25: com o horário destrancado os blocos agarram-se (arrastar para mover) — vale
   nas DUAS vistas: a folha de UMA pessoa e a vista geral. Antes só a vista geral o dizia com o rato,
   por isso a folha da pessoa parecia presa. (Trancado não há cursor de agarrar nem arrasto.) */
.cal-block.unlocked{cursor:grab;}
.cal-block.unlocked:active{cursor:grabbing;}
/* (a vista geral tem um `.cal-block.geral{cursor:default}` mais abaixo, por isso precisa da regra
   mais específica para não perder o «agarra-me») */
.cal-block.geral.unlocked{cursor:grab;}
.cal-block.geral.unlocked:active{cursor:grabbing;}
/* Ecrã do «Histórico de pedidos» (página própria, 25 por página) */
.reqhist-resumo{font-size:13.5px;color:var(--muted);margin:0 0 12px;}
/* Histórico agrupado por data (2026-09-25): um cabeçalho com a data e, por baixo, as linhas
   DESSA data — cada registo na sua própria linha. O risco fino depois da data liga o cabeçalho ao
   seu grupo, para dois grupos seguidos não se lerem como um só. */
.reqhist-grupo{display:flex;flex-direction:column;gap:8px;}
.reqhist-data{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:800;color:var(--ink);}
.reqhist-data::after{content:'';flex:1;height:1.5px;background:var(--line);border-radius:2px;}
.reqhist-linhas{display:flex;flex-direction:column;gap:10px;}
.reqhist-row{padding:7px 10px;border:1.5px solid var(--line);border-radius:8px;background:var(--card);}
.reqhist-row .reqhist-line{font-size:13px;line-height:1.4;}
.reqhist-row .reqhist-ico{font-size:18px;}
.reqhist-when{color:var(--muted);white-space:nowrap;}
.reqhist-sub{font-size:12px;color:var(--muted);margin-top:2px;}
.reqhist-pager{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:14px;}
/* 2026-09-25: «when going to the Histórico de pedidos page, make everything more legible and add
   more white space per entry». Só a PÁGINA do histórico (#reqhist-list) fica com entradas mais altas —
   14/16px de dentro, 10px entre entradas (o gap vive no contentor), texto a 14,5px com line-height
   1.5 e a data encostada à direita. A entrada cresce com o texto (nada é cortado nem espremido) e o
   «quando» nunca parte (nowrap). A paginação de 25 e os dois separadores não são tocados. */
#reqhist-list .reqhist-row{padding:14px 16px;border-radius:12px;}
#reqhist-list .reqhist-row .reqhist-line{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:14.5px;line-height:1.5;}
#reqhist-list .reqhist-when{margin-left:auto;font-size:13.5px;}
#reqhist-list .reqhist-sub{font-size:13.5px;margin-top:0;line-height:1.55;display:flex;gap:8px;flex-wrap:wrap;}
.add-out-lbl{display:block;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.5px;margin:12px 0 4px;}
/* settings page: widened, aligned sections */
.set-section{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);}
.set-section:first-of-type{margin-top:6px;padding-top:0;border-top:none;}
.set-title{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;}
.set-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.set-row input{height:46px;border-radius:10px;border:1.5px solid var(--line);font-size:16px;padding:0 12px;flex:1;min-width:200px;}
.set-row input[type=date]{flex:0 0 auto;min-width:0;font-size:14px;}
.set-hint{font-size:13px;color:var(--muted);margin-top:8px;}
/* 2026-09-25: a lista das cópias de segurança mostra 7 linhas e passa a ter SCROLL PRÓPRIO a
   partir da 8.ª. A altura é FIXA (a mesma com 3 ou com 12 cópias), senão a lista empurrava o botão
   «Continuar» para baixo — medido: o y do botão é igual nos dois casos. A altura sai das próprias
   linhas da tabela (44,5px de cabeçalho + 7 × 47,5px de linha + 1px), arredondada. */
.rest-list{height:379px;max-height:379px;overflow-y:auto;}
.cal-toolbar label{font-size:14px;color:var(--muted);display:flex;align-items:center;gap:6px;}
.cal-toolbar select{font-size:14px;padding:6px 8px;border:1.5px solid var(--line);border-radius:8px;background:#fff;}
.cal-scroll{overflow-x:auto;padding-bottom:4px;}
.cal-grid{display:flex;min-width:760px;gap:10px;}
.cal-hours{width:46px;flex:0 0 46px;padding-top:36px;position:relative;}
.cal-hour{font-size:11px;color:var(--muted);text-align:right;padding-right:6px;box-sizing:border-box;border-top:1px solid var(--line);transform:translateY(-1px);}
.cal-day{flex:1;min-width:88px;border-left:2px solid var(--line);}
.cal-day.servico{background:repeating-linear-gradient(45deg,#fff7e6,#fff7e6 8px,#fffdf5 8px,#fffdf5 16px);}
.cal-day-head{height:36px;display:flex;align-items:center;justify-content:center;gap:4px;font-size:12px;color:var(--muted);font-weight:600;border-bottom:1px solid var(--line);}
.cal-day-head b{color:var(--ink);font-size:14px;}
.cal-day-head .chip{font-size:10px;padding:2px 6px;}
.cal-col{position:relative;height:506px;background:repeating-linear-gradient(to bottom,transparent,transparent 45px,var(--line) 45px,var(--line) 46px);}
.cal-col-hover{outline:2px dashed var(--accent);outline-offset:-2px;background-color:var(--accent-soft, rgba(47,128,237,.08));}
/* 2026-09-24 (§65 item 1): FAIXA dos eventos de dia inteiro — uma linha extra no topo da
   grelha, com a largura das colunas dos dias. Os chips de Férias/Folga/AJ (com nome e selo) vivem
   aqui, um por linha, podendo empilhar; a grelha horária começa sempre POR BAIXO, logo a linha das
   09:00 fica livre. A altura é a mesma nos 7 dias (vem do dia com mais chips), senão as colunas
   desalinhavam; e numa semana sem eventos de dia inteiro a faixa não é sequer desenhada (altura 0),
   para não roubar espaço nem mexer no ecrã de sempre. */
.cal-allday{display:flex;flex-direction:column;gap:2px;padding:2px 4px 8px;overflow:hidden;box-sizing:border-box;box-shadow:inset 0 -1px 0 var(--line);}
.cal-allday .cal-block{position:relative;left:auto;right:auto;top:auto;flex:0 0 20px;height:20px;border-radius:6px;}
.cal-block{position:absolute;left:3px;right:3px;border-radius:8px;color:#fff;font-size:12px;font-weight:600;cursor:grab;box-shadow:0 1px 3px rgba(0,0,0,.2);overflow:hidden;touch-action:none;user-select:none;}
.cal-block:active{cursor:grabbing;}
.cal-block-time{padding:3px 6px;pointer-events:none;}
.cal-del{position:absolute;top:2px;right:2px;width:22px;height:22px;border:none;border-radius:50%;background:rgba(0,0,0,.35);color:#fff;font-size:14px;line-height:1;cursor:pointer;z-index:3;}
.cal-del:hover{background:rgba(0,0,0,.7);transform:scale(1.1);}
/* 2026-09-25: as PEGAS de ESTICAR (redimensionar) um bloco. Aparecem SÓ com o horário
   destrancado e só para quem gere o horário — trancado não existe uma única pega. Valem nas DUAS
   vistas onde os blocos se arrastam (a folha de uma pessoa e a vista geral), com o mesmo desenho: a
   pega de cima muda a hora de INÍCIO, a de baixo a hora de FIM, e o MEIO do bloco continua a MOVER.
   Altura (medida no ecrã, para nada tapar nada): a pega de CIMA mede 5px, porque a hora começa ~6px
   abaixo do topo do bloco — 8px comiam-lhe a primeira linha; a de BAIXO fica em 6-8px (num turno de
   30 min são 6px, e o texto acaba ~17px abaixo do topo). Um bloco de 30 min (o mínimo, 23px) fica
   assim com a faixa de cima, a de baixo e o MEIO livre para se agarrar e mover. */
.cal-resize{position:absolute;bottom:0;left:0;right:0;height:clamp(6px,8px,22%);cursor:ns-resize;background:rgba(0,0,0,.15);z-index:2;}
/* 2026-09-25: uma LINHA de pega (o «agarrador») para a pega se VER. Uma faixa translúcida de
   15% sobre um bloco vermelho não se distingue; o risco branco diz onde pegar sem tapar nada (fica
   dentro da própria faixa, no lado de dentro). */
.cal-resize::after,.cal-resize-top::after{content:'';position:absolute;left:50%;transform:translateX(-50%);
  width:26px;height:3px;border-radius:2px;background:rgba(255,255,255,.85);box-shadow:0 0 2px rgba(0,0,0,.45);}
.cal-resize::after{bottom:1px;}
.cal-resize-top::after{top:1px;}
/* Na vista geral o emoji da categoria vive no canto de cima: com a pega de cima ele descia para
   debaixo dela, senão ficava meio tapado. Os chips de DIA INTEIRO não têm pegas (nem `unlocked`). */
.cal-block.geral.unlocked .cal-block-emoji{top:9px;}
.cal-now{position:absolute;left:0;right:0;height:2px;background:#000;z-index:5;pointer-events:none;}
.cal-now-label{position:absolute;top:-10px;left:0;font-size:10px;font-weight:800;color:#000;background:rgba(255,255,255,.8);padding:0 4px;border-radius:4px;line-height:1.4;}
[data-theme="dark"] .cal-now{background:#fff;}
[data-theme="dark"] .cal-now-label{color:#fff;background:rgba(0,0,0,.55);}
.cal-resize-top{position:absolute;top:0;left:0;right:0;height:5px;cursor:ns-resize;background:rgba(0,0,0,.15);z-index:2;}
.cal-view-sel{font-size:14px;font-weight:600;padding:7px 10px;border:1.5px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);max-width:260px;}

/* Geral (everyone) calendar view */
.cal-block.geral{background:#2c3e50;cursor:default;}
.cal-block.geral .cal-block-names{font-size:11px;font-weight:500;line-height:1.3;padding:0 6px 4px;overflow:hidden;}
.cal-block.geral .cal-block-time{font-size:11px;opacity:.85;}

.cal-block.geral .cal-name{font-size:11px;font-weight:500;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.cal-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:10px;align-items:center;}
.cal-legend-pill{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink);}
.cal-legend-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;display:inline-block;box-shadow:0 0 0 1px rgba(0,0,0,.08);}

/* month view */
.cal-lane-name{display:inline-block;max-width:calc(100% - 6px);margin:3px 0 0 3px;font-size:11px;font-weight:700;color:#fff;line-height:1.25;padding:1px 6px;border-radius:4px;background:rgba(15,23,42,.52);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* 2026-09-24: o nome não pode ficar branco solto sobre a barra — nas cores claras (o amarelo,
   o verde, o azul) desaparecia. Vai numa pastilha escura translúcida que
   se lê sobre qualquer cor. */
.calm-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;min-width:840px;}
.calm-head{font-size:12px;font-weight:700;color:var(--muted);text-align:center;padding:4px 0;}
.calm-cell{border:1.5px solid var(--line);border-radius:8px;padding:6px;min-height:92px;background:#fff;font-size:12px;overflow:hidden;cursor:pointer;}
.calm-cell:hover{border-color:var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.08);}
.calm-cell.blank,.calm-cell.blank:hover{cursor:default;border-color:transparent;box-shadow:none;background:transparent;}
.calm-cell.blank{border:none;background:transparent;}
.calm-cell.today{border-color:var(--accent);background:var(--accent-soft);}
.calm-cell.feriado{background:#fdf3f3;}
.calm-daynum{font-weight:700;font-size:13px;margin-bottom:4px;color:var(--ink);}
.calm-person{display:flex;align-items:baseline;gap:4px;line-height:1.45;flex-wrap:wrap;}
/* 2026-09-24: era nowrap + ellipsis, e com nomes compridos as HORAS eram cortadas em dias
   cheios («Nome 09-13» virava «Nome 09…»). Agora a linha quebra e as horas aparecem sempre. */
.calm-person .calm-time{margin-left:auto;}
.calm-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;display:inline-block;}
.calm-time{color:var(--muted);font-size:11px;}
.calm-empty{color:var(--muted);font-size:11px;}

/* day view */
.dv-row{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);align-items:flex-start;}
.dv-name{width:160px;font-weight:700;display:flex;align-items:center;gap:8px;font-size:15px;padding-top:7px;flex-shrink:0;}
.dv-body{flex:1;display:flex;flex-direction:column;gap:8px;}
.dv-per{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.dv-per input{font-size:14px;padding:6px 8px;border:1.5px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);width:110px;}
.dv-code{font-size:14px;padding:7px 8px;border:1.5px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);max-width:260px;}
.dv-hint{font-size:13px;color:var(--muted);}

.browse-row{display:block;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--line);padding:9px 12px;font-size:14px;cursor:pointer;color:var(--ink);box-sizing:border-box;}
.browse-row:hover{background:rgba(0,0,0,.04);}

.tpa-line{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.tpa-item{background:var(--accent-soft,#eaf6f3);border:1.5px solid var(--accent);color:var(--accent);border-radius:10px;padding:6px 14px;font-size:14px;font-weight:600;line-height:1.4;}
.tpa-item b{font-size:15px;font-weight:800;}

/* Horário — codes + periods */
.cal-day-badge { position:absolute; top:4px; left:4px; right:4px; padding:8px 6px; border-radius:8px; font-size:12px; font-weight:700; text-align:center; color:#fff; z-index:3; }
.cal-day-badge.feriado { background:#8e44ad; }
.cal-day-badge.code { background:#9aa0a6; }
.cal-partial { position:absolute; top:4px; left:4px; padding:3px 7px; border-radius:6px; font-size:11px; font-weight:700; background:#fdf1d3; color:#8a6d1a; z-index:3; }
.cal-code-sel { font-size:11px; padding:1px 2px; border:1px solid var(--line); border-radius:5px; background:#fff; color:var(--ink); margin-left:4px; max-width:56px; }
/* template quick-apply buttons in each day column (grouped by category) */
.tpl-row{position:absolute;left:3px;right:3px;display:flex;gap:3px;flex-wrap:wrap;align-items:center;z-index:4;pointer-events:none;}
.tpl-glabel{font-size:9px;font-weight:800;color:var(--muted);letter-spacing:.2px;text-transform:uppercase;margin-right:1px;}
.tpl-btn{font-size:11px;font-weight:700;padding:2px 7px;border-radius:6px;border:1.5px solid var(--accent);background:#fff;color:var(--accent);cursor:pointer;line-height:1.4;box-shadow:0 1px 2px rgba(0,0,0,.08);white-space:nowrap;pointer-events:auto;}
.tpl-btn:hover{background:var(--accent);color:#fff;}

/* day-code picker button (in the day header) */

/* closed-hours shading (outside a given day's opening hours) */
.cal-closed{position:absolute;left:0;right:0;background:repeating-linear-gradient(45deg,#f2f3f5,#f2f3f5 6px,#e9ecf0 6px,#e9ecf0 12px);opacity:.75;z-index:1;pointer-events:none;}

/* week summary progress bar */
.week-progress{margin:10px 0 4px;}
.week-progress-bar{height:14px;border-radius:8px;background:var(--line);overflow:hidden;}
.week-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),#16a085);border-radius:8px;transition:width .4s ease;}
.week-progress-label{font-size:12px;color:var(--muted);margin-top:5px;font-weight:600;}
.cal-absent { margin-top:6px; }
.cal-name.absent { color:var(--muted); font-size:11px; white-space:normal; overflow:visible; text-overflow:clip; }
.cal-empty { color:var(--muted); font-size:12px; padding:6px 4px; }
.cal-day.feriado .cal-col { background:#f7f0fa; }

/* Férias month calendar */
.fm-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.fm-month{font-weight:700;font-size:16px;min-width:160px;text-align:center;}
.fm-legend{display:flex;gap:14px;font-size:12px;color:var(--muted);margin-bottom:8px;flex-wrap:wrap;}
.fm-legend span{display:inline-flex;align-items:center;gap:5px;}
.fm-table{border-collapse:separate;border-spacing:3px;width:100%;}
.fm-table th{font-size:11px;color:var(--muted);font-weight:600;padding:2px;text-align:center;}
.fm-table td.fm-day{position:relative;height:40px;width:14.28%;text-align:center;font-size:14px;font-weight:600;border-radius:8px;border:1.5px solid var(--line);cursor:pointer;background:var(--card);color:var(--ink);}
.fm-table td.fm-day:hover{border-color:var(--accent);}
.fm-table td.fm-day.sel{background:var(--accent);border-color:var(--accent);color:#fff;}
.fm-table td.fm-day.fer{background:#e7f6ec;border-color:#4caf6d;}
.fm-table td.fm-day.fer.sel{background:var(--accent);border-color:var(--accent);color:#fff;}
.fm-table td.fm-day.req{background:#fff6e0;border-color:#f5c96b;}
.fm-table td.fm-day i.m{position:absolute;top:2px;right:4px;font-size:10px;font-style:normal;color:#2e7d47;}
.fm-table td.fm-day i.m.p{color:#b8860b;}
.fm-table td.fm-empty{border:none;}
.dot{display:inline-block;width:11px;height:11px;border-radius:3px;border:1px solid var(--line);}
.dot.fer{background:#4caf6d;border-color:#4caf6d;}
.dot.req{background:#f5c96b;border-color:#f5c96b;}
.dot.sel{background:var(--accent);border-color:var(--accent);}

/* ---- schedule proposal picker (employee, 4-week multi-day) ---- */
.prop-sel-bar{margin:10px 0 12px;font-size:13px;color:var(--muted);padding:8px 12px;border:1.5px dashed var(--line);border-radius:8px;}
.prop-week{margin-bottom:14px;}
.prop-week-label{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:6px;}
.prop-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.prop-day{border:1.5px solid var(--line);border-radius:8px;padding:6px;background:var(--card);display:flex;flex-direction:column;gap:4px;}
.prop-day.sel{border-color:var(--accent);background:var(--accent-soft);}
.prop-day.past{opacity:.4;}
.prop-day-head{font-size:11px;font-weight:700;color:var(--muted);}
.prop-day select{width:100%;font-size:12px;padding:4px;border:1.5px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);}

/* ---- highlight (employee stand-out) ---- */
.cal-legend-pill{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink);background:none;border:1.5px solid transparent;border-radius:999px;padding:3px 9px;cursor:pointer;font-family:inherit;}
.cal-legend-pill:hover{border-color:var(--accent);}
.cal-legend-pill.hl{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 2px var(--accent);}
.cal-block.dimmed{opacity:.22;}
.cal-block.hl{box-shadow:0 0 0 2px rgba(0,0,0,.9),0 0 12px 2px rgba(0,0,0,.4);z-index:6;}

/* ---- pending proposal (pecked/hatched) blocks ---- */
.cal-block.pending{cursor:default;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.55);box-shadow:none;border:2px dashed rgba(255,255,255,.85);z-index:5;
  background-image:repeating-linear-gradient(45deg,rgba(0,0,0,.16) 0 6px,transparent 6px 12px);}
.cal-block.pending.dimmed{opacity:.3;}
.cal-block.pending.hl{box-shadow:0 0 0 2px rgba(0,0,0,.9),0 0 12px 2px rgba(0,0,0,.4);}
.cal-block-emoji{position:absolute;top:2px;right:4px;font-size:12px;line-height:1;text-shadow:0 1px 2px rgba(0,0,0,.45);}
.cal-pending-name{font-size:12px;font-weight:700;padding:4px 8px 0;line-height:1.2;padding-right:58px;}
.cal-pending-time{font-size:10px;padding:0 8px;opacity:.9;}
.cal-pending-actions{position:absolute;right:4px;top:4px;display:flex;gap:4px;}
.cal-ok,.cal-no{width:24px;height:24px;border-radius:50%;border:none;font-size:14px;font-weight:800;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);}
.cal-ok{background:#2e9e5b;}
.cal-no{background:#e2574c;}
.cal-ok:hover,.cal-no:hover{filter:brightness(1.12);}

/* ---- employee schedule stats panel ---- */
.cal-stats{margin:4px 0 12px;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;background:var(--card);}
.cal-stats-head{font-size:13px;font-weight:700;margin-bottom:8px;color:var(--ink);}
.cal-stats-grid{display:flex;flex-wrap:wrap;gap:8px;}
.cal-stat{flex:1;min-width:120px;padding:8px 10px;border:1.5px solid var(--line);border-radius:8px;background:var(--accent-soft);}
.cal-stat-val{font-size:17px;font-weight:800;color:var(--ink);}
.cal-stat-label{font-size:11px;color:var(--muted);font-weight:600;margin-top:2px;}
.cal-stat-sub{font-size:11px;color:var(--muted);margin-top:1px;}

/* ---- full-day code blocks (Folga / Férias / Formação 8h / Ausência) ---- */
.cal-block.fullcode{background:rgba(0,0,0,.09);border:1.5px dashed rgba(0,0,0,.28);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:default;box-shadow:none;z-index:2;}
.cal-block.fullcode .cal-fullcode-label{font-size:12px;font-weight:800;padding:4px 8px;color:var(--ink);text-align:center;}
.cal-block.fullcode .cal-del{position:absolute;top:2px;right:2px;}

/* Folga button in the "dia inteiro" palette row */
.tpl-btn.folga{border-color:var(--warn);color:var(--warn);}
.tpl-btn.folga:hover{background:var(--warn);color:#fff;}

/* ---- big Férias / Folga pills in "O meu mês" ---- */
.days-pill{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 22px;border:1.5px solid var(--line);border-radius:14px;background:var(--card);cursor:pointer;min-width:116px;transition:border-color .12s,box-shadow .12s;}
.days-pill:hover{border-color:var(--accent);box-shadow:0 2px 10px rgba(0,0,0,.08);}
.days-pill-ico{font-size:22px;line-height:1;}
.days-pill-num{font-size:28px;font-weight:800;color:var(--ink);line-height:1;}
.days-pill-lbl{font-size:12px;color:var(--muted);font-weight:600;}
.days-pill-lbl em{font-style:normal;font-size:11px;color:var(--warn);}
.days-stat{flex:1;min-width:142px;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;background:var(--accent-soft);text-align:center;}
.days-stat-num{font-size:28px;font-weight:800;color:var(--ink);}
.days-stat-lbl{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:3px;}

/* ---- "Folha de horário" source-Excel table ---- */
.escala-sheet-wrap{overflow-x:auto;margin-top:10px;}
table.escala-sheet{border-collapse:collapse;width:100%;min-width:640px;font-size:13px;}
table.escala-sheet th,table.escala-sheet td{border:1px solid var(--line);padding:6px 8px;text-align:center;white-space:nowrap;}
table.escala-sheet th{background:var(--card);font-weight:700;}
table.escala-sheet .sh-nm{text-align:left;font-weight:600;position:sticky;left:0;background:var(--card);}
table.escala-sheet .sh-blank{background:repeating-linear-gradient(45deg,transparent,transparent 4px,var(--line) 4px,var(--line) 5px);}
table.escala-sheet .sh-code{font-weight:700;}
table.escala-sheet .sh-obs{font-weight:400;font-size:11px;color:var(--muted);white-space:normal;max-width:140px;}
table.escala-sheet .sh-tot{font-weight:700;}
table.escala-sheet .sh-base{color:var(--muted);}
table.escala-sheet .sh-pos{color:var(--ok);font-weight:700;}
table.escala-sheet .sh-neg{color:var(--danger);font-weight:700;}

/* --- editor de horários: atalhos e dicas --- */
.cal-legend-item{display:inline-flex;align-items:center;gap:2px;}
.cal-legend-edit{min-height:32px;padding:0 8px;border-radius:8px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;font-size:13px;font-family:inherit;white-space:nowrap;}
.cal-legend-edit:hover{border-color:var(--accent);color:var(--accent);}
/* --- férias e folgas: linha bloqueada/desbloqueada --- */
.days-line{display:flex;align-items:center;gap:18px;flex-wrap:wrap;min-height:40px;}
.days-lbl{font-size:14px;}
.days-bal{font-size:17px;min-width:30px;text-align:right;}
.days-unit{font-size:13px;color:var(--muted);}
.days-step{display:inline-flex;align-items:center;gap:6px;margin-left:4px;}
.linkbtn{background:none;border:none;color:var(--accent);font:inherit;font-size:13px;font-weight:700;cursor:pointer;padding:6px 8px;margin-left:10px;text-decoration:underline;white-space:nowrap;}
.linkbtn:hover{color:var(--accent-dark,var(--accent));}
/* --- nada empurra a página para o lado: tabelas e calendário rolam dentro do cartão --- */
.tscroll{overflow-x:auto;max-width:100%;}
.cal-wrap{overflow-x:auto;max-width:100%;padding-bottom:2px;}
/* --- modo de edição do horário: barra compacta + pastilhas de categoria --- */
.cal-editbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px;}
.cal-edithint{font-size:13px;color:var(--muted);}
.tpl-cat{z-index:5;top:0;flex-direction:column;align-items:stretch;justify-content:flex-end;gap:3px;}/* top+bottom stretch the overlay; flex-end keeps the lines pinned to the foot of the column */
.tpl-catline{display:flex;align-items:center;gap:3px;flex-wrap:wrap;}
.tpl-btn.cat{border-color:var(--line);color:var(--ink);background:var(--card);font-weight:800;}
.tpl-btn.cat:hover{border-color:var(--accent);color:var(--accent);}
.tpl-btn.cat.folga{border-color:var(--warn);color:var(--warn);}
.tpl-btn.cat.folga:hover{background:var(--warn);color:#fff;}
.tpl-btn.cat.ferias{border-color:#8e44ad;color:#8e44ad;}
.tpl-btn.cat.ferias:hover{background:#8e44ad;color:#fff;}
.tpl-btn.cat.aj{border-color:#c0392b;color:#c0392b;}
.tpl-btn.cat.aj:hover{background:#c0392b;color:#fff;}
/* --- checklist de funcionários (copiar mês anterior) --- */
.copy-month-row{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--line);font-size:15px;cursor:pointer;}
.copy-month-row input{width:20px;height:20px;accent-color:var(--accent);}

/* Bottom category bar (2026-09-24): a fila de dias e as pastilhas de categoria saíram do
   ecrã — o calendário navega pelos seus próprios dias e a categoria aplica-se ao BLOCO tocado.
   O painel por baixo mostra as categorias do bloco marcado, com emoji e nome (`.catbtn`). */
.catbar{margin-top:10px;border:1.5px solid var(--line);border-radius:12px;background:var(--card);padding:10px 12px;display:flex;flex-direction:column;gap:8px;}
.catpanel-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--muted);}
.catpanel-head b{color:var(--ink);font-size:14px;}
.catpanel-title{font-size:10px;font-weight:800;color:var(--muted);letter-spacing:.3px;text-transform:uppercase;}
.catpanel-alvo{color:var(--ink);font-weight:600;}
.catpanel-atual{background:var(--accent-soft,rgba(47,128,237,.10));border-radius:999px;padding:1px 9px;font-weight:700;color:var(--ink);}
.catpanel-hint{font-size:13px;color:var(--muted);}
.catpanel-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.catpanel-glabel{font-size:10px;font-weight:800;color:var(--muted);letter-spacing:.3px;text-transform:uppercase;}
.catpanel-nota{font-size:12px;color:var(--muted);}
/* 2026-09-25: as categorias passaram a ser UMA lista (sem «Este bloco» / «Dia inteiro») e o
   «🗑 Limpar dia» subiu para a MESMA linha, encostado à direita (.catpanel-limpar{margin-left:auto}).
   A linha em si não quebra — quem quebra é a caixa das categorias, para o «Limpar dia» ficar sempre
   alinhado com a primeira linha e com a borda direita do painel. */
.catpanel-row{flex-wrap:nowrap;align-items:flex-start;}
.catpanel-cats{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1;min-width:0;}
.catpanel-limpar{margin-left:auto;flex:none;}
.catbtn{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:5px 11px;border-radius:8px;
  border:1.5px solid var(--accent);background:#fff;color:var(--accent);cursor:pointer;line-height:1.4;box-shadow:0 1px 2px rgba(0,0,0,.06);}
.catbtn:hover{background:var(--accent-soft,rgba(47,128,237,.10));}
.catbtn.on{background:var(--accent);border-color:var(--accent);color:#fff;}
.catbtn.ghost{border-color:var(--line);color:var(--ink);}
.catbtn.ghost:hover{border-color:var(--accent);color:var(--accent);}
.catbtn-e{font-style:normal;font-size:14px;line-height:1;}
.cal-col.sel{outline:2px solid var(--accent);outline-offset:-2px;background-color:var(--accent-soft, rgba(47,128,237,.06));}

/* --- UI round 3 (2026-09-22) --------------------------------------------------- */
/* pencil / confirm next to the person dropdown, export+print as bare icons on the right */
.cal-nav .iconbtn{width:42px;height:42px;border-radius:11px;font-size:19px;display:inline-flex;align-items:center;justify-content:center;padding:0;}
.cal-nav .iconbtn.on{background:var(--accent);border-color:var(--accent);color:#fff;}
.linkbtn.icon{font-size:16px;text-decoration:none;padding:4px 7px;margin-left:0;border-radius:8px;line-height:1;}
.linkbtn.icon:hover{background:var(--line);}
.cal-weeknav{margin:6px 0 0;}
/* the bar: rows (turno · categoria) — the templates have room here, never in a column */
.blockbar{gap:7px;}
.tpl-btn.tpl{border-color:var(--line);color:var(--ink);background:#fff;font-weight:700;}
.tpl-btn.tpl:hover{border-color:var(--accent);color:var(--accent);background:#fff;}
/* a shift carrying its own category (FR4 / RH) */
.cal-block[data-piece]{cursor:grab;}
/* 2026-09-24: o bloco marcado tem de saltar à vista — contorno grosso e um halo. É ele que
   recebe a categoria do painel de baixo, por isso não pode haver dúvida de qual é. */
.cal-block.pick{outline:3px solid var(--accent);outline-offset:-3px;box-shadow:0 0 0 3px rgba(47,128,237,.30),0 3px 10px rgba(0,0,0,.30);z-index:7;}
.cal-block.coded{background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.55),rgba(255,255,255,.55) 6px,transparent 6px,transparent 12px);border:2px dashed #6c3483;color:#3b1d4d;}
.cal-block.coded-rh{border-color:#b9770e;color:#5b3a06;}
/* Secção «Ausências» (supervisor): fica ABAIXO do calendário, com espaço próprio —
   antes colava à grelha (0px) e parecia sobrepor-se-lhe (2026-09-22). */
.cal-absences { margin-top: 26px; }
.cal-absences .step-title { margin: 0; }
.cal-absences-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.cal-block-code{display:inline-block;max-width:calc(100% - 8px);margin:3px 0 0 4px;padding:2px 6px;border-radius:6px;font-size:10.5px;font-weight:800;letter-spacing:.2px;line-height:1.25;white-space:normal;background:#fff6e0;color:#8a6d1a;border:1px solid #f0dcae;}
/* férias e folgas: two columns of cards, actions as icons */
.dv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:6px;}
@media (max-width:900px){.dv-grid{grid-template-columns:1fr;}}
.dv-card{border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--card);}
.dv-head{display:flex;align-items:center;gap:6px;}
.dv-head .dv-name{padding-top:0;}
.dv-card .dv-body{display:flex;flex-direction:column;gap:4px;margin-top:6px;}
.dv-card .days-line{min-height:36px;gap:18px;}
/* days history: the timestamp is the row header, the change is the headline */
.dh-row{padding:9px 0;border-bottom:1px solid var(--line);}
.dh-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.dh-date{font-size:13px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;}
.dh-who{font-size:12px;color:var(--muted);}
.dh-change{font-size:19px;font-weight:800;color:var(--accent);margin-top:3px;font-variant-numeric:tabular-nums;}
.dh-label{font-size:12px;color:var(--muted);margin-top:1px;}
.fer-table{margin-top:4px;}
.fer-num{font-size:17px;}

/* --- UI round 5 (2026-09-22): cor por funcionário, «Dia inteiro» acima das 09:00,
       arrasto/redimensionamento ao vivo ------------------------------------------------ */
/* o cabeçalho do dia pode ter duas linhas: nome + fila «Dia inteiro» */
.cal-day-head{flex-wrap:wrap;height:auto;min-height:36px;padding:2px 0 4px;}
.tpl-head{width:100%;display:flex;justify-content:center;min-height:24px;}   /* reserva a altura: dias com e sem a fila alinham a grelha */
.tpl-row.inhead{position:static;left:auto;right:auto;width:auto;justify-content:center;}
/* bolinha de cor editável na legenda (supervisor de horário) */
.cal-legend-colorwrap{position:relative;display:inline-flex;width:17px;height:17px;border-radius:50%;overflow:hidden;border:1.5px solid var(--line);cursor:pointer;flex-shrink:0;background:var(--card);}
.cal-legend-colorwrap:hover{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);}
.cal-legend-colorwrap input[type=color]{position:absolute;top:-6px;left:-6px;width:200%;height:200%;border:none;padding:0;cursor:pointer;background:none;}
/* o bloco a caminho de outro dia: uma sombra que segue o destino (as horas mantêm-se) */
.cal-drag-ghost{position:fixed;z-index:9999;pointer-events:none;opacity:.9;box-shadow:0 8px 22px rgba(0,0,0,.35);transform:scale(1.02);}
.cal-block .cal-block-time{pointer-events:none;}

/* Multibanco no assistente: campo por terminal + atalho para a página itemizada (2026-09-22) */
.mb-term{display:flex;flex-direction:column;gap:8px;}
.mb-term .amount{width:100%;}
.mb-items-btn{min-height:40px;font-size:13px;padding:0 12px;white-space:nowrap;}
.mb-derived{font-size:11px;font-weight:600;color:var(--muted);background:var(--line);border-radius:8px;padding:2px 6px;margin-left:4px;white-space:nowrap;}
.mb-add{display:flex;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap;}
.mb-add input{height:44px;border-radius:10px;border:1.5px solid var(--line);font-size:15px;padding:0 10px;background:var(--card);color:var(--ink);box-sizing:border-box;}
.mb-add #mbm-num{width:130px;}
.mb-add #mbm-val{width:110px;text-align:right;font-size:16px;}
.qmb-pos{color:var(--muted);font-size:12px;min-width:18px;font-variant-numeric:tabular-nums;}
.stepbtn.small[disabled]{opacity:.35;cursor:default;}

/* Imprimir o fecho: duas opções (PDF itemizado / formato original), cada uma com imprimir + guardar */
.print-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;margin-bottom:10px;}
.print-row-txt{flex:1;min-width:0;}
.print-row-t{font-weight:700;font-size:15px;}
.print-go{min-height:44px;white-space:nowrap;}
.print-dl{width:44px;height:44px;min-width:44px;font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;}
/* «Fecho registado»: secções dos valores */
.cv-sec td{font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding-top:12px;}
.cv-item{padding-left:18px;color:var(--muted);font-size:14px;}

/* «Fecho registado»: os valores em duas colunas (esquerda: contagem + multibanco;
   direita: movimentos + totais). Abaixo de 820px volta a uma coluna, para não apertar. */
.fecho-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;align-items:start;margin-top:12px}
.cv-col{min-width:0}
.cv-col .summary table{width:100%}
.cv-chips{color:var(--muted);font-size:13px}
@media (max-width:820px){.fecho-cols{grid-template-columns:1fr}}

/* «Total PC & confirmar»: os QUATRO grupos que a página mostra (Contagem de caixa, Multibanco,
   Movimentos, Totais) LADO A LADO — uma coluna para cada (2026-09-25). 2026-09-25
   (2.ª parte): «as 4 colunas passam a ter largura IGUAL, distribuidas por igual na largura
   disponivel» — cada coluna leva `1fr`, logo a largura que sobra (janela menos os 3 intervalos) é
   repartida em quatro partes iguais.
   O mínimo NÃO é zero: é `min-content` (a largura da linha mais longa da coluna, com o `nowrap` que
   já existia). Assim a igualdade nunca obriga a cortar — se algum dia um movimento trouxer uma
   linha mais comprida do que a sua quarta parte, essa coluna cresce para não cortar e o bloco passa
   a rolar DENTRO do cartão (`.cv-wrap4`), em vez de perder texto. Igualdade por omissão, nada
   cortado em nenhum caso. */
.cv-wrap4{overflow-x:auto;max-width:100%}
.cv-cols4{display:grid;grid-template-columns:repeat(4,minmax(min-content,1fr));gap:10px 16px;align-items:start;margin-top:14px}
.cv-cols4 .cv-col-title{font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);padding-bottom:6px;border-bottom:1.5px solid var(--line);white-space:nowrap}
.cv-cols4 .summary td{white-space:nowrap;padding:8px 0;font-size:14px}
.cv-cols4 .summary td:first-child{padding-right:16px}
.cv-cols4 .summary tr.total td{padding-top:12px;}

/* Teclado (2026-09-25): o campo e o botão com o foco têm de ser visualmente óbvios — a classe
   `.kbfocus` é posta pelo assistente ao avançar com Enter. A especificidade `#app` é necessária
   porque `.qty:focus`/`.val-inp:focus` já apagam o `outline` nativo. */
#app .kbfocus{outline:3px solid var(--accent);outline-offset:2px;
  box-shadow:0 0 0 5px var(--accent-soft, rgba(47,128,237,.22));}

/* «O meu horário»: navegação da semana na mesma linha dos botões (2026-09-23) */
.my-hor-nav{align-items:center;flex-wrap:wrap;gap:8px}
.my-hor-nav .pillbtn{margin-left:0}
/* Férias: dias escolhidos com arrasto */
.fm-day{cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none}
/* Férias: dias em caixas (como no «O meu mês») */
.fer-boxes-title{font-weight:700;font-size:13px;margin:12px 0 6px}
.fer-boxes{display:flex;flex-wrap:wrap;gap:8px}
.fer-box{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--card);min-width:220px}
.fer-box.pend{border-color:#f0c36d;background:#fffdf5}
.fer-box.ok{border-color:#8fd3c0}
.fer-box-ico{font-size:20px;line-height:1}
.fer-box-d{font-weight:700;font-size:14px}
.fer-box-s{font-size:12px;color:var(--muted)}

/* Barra de horas: marca das horas/semana a 80% e horas a mais visíveis (2026-09-23) */
.week-progress-bar{position:relative}
.week-progress-limit{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--muted);opacity:.55;border-radius:1px}
.week-progress-fill.over{background:linear-gradient(90deg,#e0a800,#f0c36d)}
/* Resumo da semana: barra por funcionário */
.mini-bar{margin-top:7px;max-width:260px}
.week-progress-bar.mini{height:8px}
.mini-bar-lbl{font-size:12px;color:var(--muted);display:block;margin-top:3px}
/* Férias: caixas dos dias alinhadas à direita do texto */
.fer-sub-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:10px}
/* O círculo do nome muda a cor (sem controlo extra) */
.cal-dot-pick{width:20px;height:20px;min-width:20px;padding:0;border:2px solid var(--card);border-radius:50%;cursor:pointer;background:none;box-shadow:0 0 0 1px var(--line)}
.cal-dot-pick::-webkit-color-swatch-wrapper{padding:0}
.cal-dot-pick::-webkit-color-swatch{border:none;border-radius:50%}
/* Transações do TPA numa página própria (2026-09-23) */
.mb-term-page{max-width:720px}
.mb-term-page .qmb-row{font-size:15px}
/* Folha de horário: coluna de folga por dia */
.sh-fh{text-align:center;font-size:12px;color:var(--muted);width:26px;padding:2px 4px}
thead .sh-fh{font-weight:700}
/* Caixa do pedido de férias (ficha do supervisor) */
.fer-box.pend{border-color:#f0c36d;background:rgba(240,195,109,.10)}
.fer-box.ok{border-color:var(--line)}
/* Semáforo: quem já fechou (e foi aprovado) continua no painel do dia */
.light.submitted .bulb,.light.approved .bulb{background:#1f9d55;box-shadow:0 0 0 2px rgba(31,157,85,.18)}
.light.approved .bulb{background:#0b6b3a}
.light .st{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- Secções novas: Dias de Férias e Folgas, tabela de feriados, cartões de horas ---- */
/* 2026-09-25: as pastilhas pequenas do topo de «Férias» (e o seu CSS) saíram — o bloco
   «Dias de Férias e Folgas» substitui-as. */

.fer-wrap { overflow:auto; max-height:min(60vh, 460px); border:1.5px solid var(--line);
  border-radius:10px; padding:0 6px 4px; background:var(--card); }
.fer-tab { width:100%; border-collapse:collapse; font-size:13px; table-layout:fixed; }
.fer-tab td:last-child { white-space:nowrap; }
.fer-tab th { text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.03em;
  color:var(--muted); padding:6px 8px; border-bottom:1.5px solid var(--line); position:sticky; top:0; background:var(--card); }
.fer-tab td { padding:4px 6px; border-bottom:1px solid var(--line); vertical-align:middle; }
.fer-tab tr.fer-pass { opacity:.55; }
.fer-in { width:100%; min-width:110px; font-size:13px; padding:5px 7px; border:1.5px solid var(--line);
  border-radius:7px; background:var(--card); font-family:inherit; }
.fer-in:focus { outline:2px solid var(--accent); outline-offset:1px; }
/* Em edição o campo tem de caber na coluna (antes forçava 300px e saía da célula). */
.fer-in.fer-wide { min-width:0; }
.fer-wd { color:var(--muted); font-size:12px; white-space:normal; line-height:1.3; }
/* Lista em modo de leitura: o texto quebra linha em vez de ficar cortado (2026-09-25). */
.fer-tab td.fer-txt { white-space:normal; overflow-wrap:anywhere; word-break:break-word;
  line-height:1.35; font-size:13.5px; }
.fer-nowrap { white-space:nowrap; font-size:13.5px; font-variant-numeric:tabular-nums; }
.fer-vazio { color:var(--muted); font-style:italic; }
.fer-pass-lbl { color:var(--muted); font-size:11px; }
.fer-act { white-space:nowrap; text-align:right; }
.fer-act .stepbtn.small { width:38px; height:32px; font-size:15px; vertical-align:middle; }
.fer-act .stepbtn.small + .stepbtn.small { margin-left:6px; }
.fer-ok { background:var(--accent-soft); color:var(--accent); font-weight:800; }
.fer-ok:hover { background:var(--accent); color:#fff; }
.fer-tab tr.fer-editing td { background:var(--accent-soft); }
/* O separador da coluna: 11px de pega, alinhado com o limite direito do cabeçalho. */
.fer-grip { position:absolute; top:0; right:-6px; bottom:0; width:12px; cursor:col-resize;
  border-radius:5px; z-index:3; }
.fer-grip:hover, .fer-grip.on { background:var(--accent); opacity:.35; }
.fer-tab th { user-select:none; -webkit-user-select:none; }

.hf-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(330px, 1fr)); gap:12px; }
.hf-card { border:1.5px solid var(--line); border-radius:10px; padding:12px; background:var(--card); }
.hf-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
/* 2026-09-25: as linhas de valores (contrato/feito/alvo + reduções/contado desde/checkpoint) saíram —
   ficou UMA barra de horas do MÊS ESCOLHIDO e as pastilhas (as mesmas `.days-pill` dos outros perfis).
   2026-09-25 (2.ª queixa do dono: «spread out the 4 pills horizontally evenly. make them the same
   size»): as 4 pastilhas passaram de `flex:0 0 auto` (cada uma do tamanho do seu texto — medidas no
   ecrã: 69,42 / 72,08 / 94,30 / 94,30 px) a uma GRELHA de 4 colunas iguais: as quatro ficam com a
   mesma largura exacta e os 3 intervalos iguais, sem embrulhar (a grelha não passa para outra linha).
   `minmax(0,1fr)` deixa-as encolher com o cartão em vez de transbordar (0 transbordo a 1024/1366/1440). */
.hf-pills { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; margin-top:10px; }
.hf-pills .days-pill { flex:0 0 auto; min-width:0; width:100%; padding:8px 6px; gap:1px; }
.hf-pills .days-pill-ico { font-size:18px; }
/* O número desceu de 20 para 18px: com as 4 pastilhas da MESMA largura (101px a 1440/1366, medidas no
   ecrã) a caixa de conteúdo é 89px e o pior caso REAL de um número («+164,5h», um mês de horas com
   meias horas) mede 84,84px a 18px — a 20px media 94,27px e passava da pastilha. Acima disso (quatro
   dígitos, «+1000,5h») o número não estica a pastilha: encolhe-se com «…» em vez de invadir a
   pastilha do lado — nunca desalinhar as quatro. */
.hf-pills .days-pill-num { font-size:18px; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.hf-pills .days-pill-lbl { font-size:11.5px; text-align:center; }
.hf-pills span.days-pill { cursor:default; }
.hf-pills span.days-pill:hover { border-color:var(--line); box-shadow:none; }

/* Selector de mês de «⚖️ Horas e Folgas» (2026-09-25, pedido do dono: «add a month selector
   < month >» e «remove the month from under the hour bar»). Vive no cabeçalho da secção e manda nos
   DOIS blocos (a barra de cada pessoa e o «Resumo Semanal»): «‹ Setembro de 2026 ›». O nome do mês
   vem do `monthLabel`, que passa o texto pelo `capMes`: o MÊS começa sempre por MAIÚSCULA (regra do
   dono, 2026-09-26) — mas só a 1.ª letra, nada de «Setembro De 2026». */
.hf-mes { display:flex; align-items:center; gap:6px; margin-left:auto; }
.hf-mes-sel { font-weight:700; font-size:14px; min-width:132px; text-align:center; }
.hf-mes .stepbtn.navsq { width:34px; height:34px; }

/* «📊 Resumo Semanal»: as semanas do mês, uma linha cada, e o TOTAL DO MÊS em destaque (2026-09-25).
   Os valores ao centro (a regra do `resumo-semana`, para as colunas ficarem alinhadas) e a coluna da
   semana — com a barra pequena de cada semana — encostada à esquerda. */
table.grid.resumo-semanal td.num, table.grid.resumo-semanal th.num { text-align:center; }
table.grid.resumo-semanal td.rs-sem { text-align:left; }
table.grid.resumo-semanal .rs-dias { font-weight:700; white-space:nowrap; }
table.grid.resumo-semanal .rs-est { font-style:normal; font-size:11.5px; color:var(--muted); margin-left:6px; }
table.grid.resumo-semanal td.rs-nome { font-weight:700; vertical-align:top; white-space:nowrap; }
table.grid.resumo-semanal td.rs-nome .rs-nota { font-weight:600; font-size:11.5px; color:var(--muted); }
table.grid.resumo-semanal tr.rs-tot td { background:var(--accent-soft); border-top:2px solid var(--line); }
table.grid.resumo-semanal tr.rs-tot td.rs-sem { text-transform:uppercase; letter-spacing:.3px; font-size:12px;
  font-weight:800; color:var(--muted); }
table.grid.resumo-semanal .hourbar.mini { max-width:210px; }

/* ===== Barra de horas — o tipo da barra de referência (2026-09-23) =====
   Dourado = as horas escaladas na semana · hachurado = o que falta escalar até às horas esperadas ·
   azul = as horas a mais (a zona de horas extra, os 20% finais da pista).
   ESCALA FIXA (2026-09-25): a marca dos 80% é o CONTRATO (as horas/semana da pessoa, ex.: 40h)
   — é ela que fixa a escala da pista; a divisória do esperado desenha-se onde o esperado cai nessa
   escala (esperado / contrato × 80%), logo desliza para a esquerda nas semanas encurtadas. */
.hourbar{margin-top:10px}
.hourbar-track{position:relative;display:flex;height:16px;border-radius:8px;background:#F7F8FC;
  box-shadow:inset 0 0 0 1px #E4E7EF;overflow:hidden}
.hourbar-seg{height:100%;transition:width .25s ease;position:relative;z-index:1}
/* 2026-09-24: a ponta arredondada é só na ÚLTIMA peça visível — é o fim da barra interior. Se for
   em todas, o troço dourado ganha um capuz a meio e ficam cunhas claras onde o hachurado continua. */
.hourbar-seg.first{border-radius:999px 0 0 999px}
.hourbar-seg.end{border-radius:0 999px 999px 0}
.hourbar-seg.first.end{border-radius:999px}

.hourbar-seg.done{background:#F9D37B;box-shadow:inset 0 0 0 2px #FDF0D3}
.hourbar-seg.over{background:#0191E1;box-shadow:inset 0 0 0 2px #B9E2F8}
.hourbar-seg.left{background:repeating-linear-gradient(115deg,#EAEBF0 0 5px,#F7F8FC 5px 10px)}
.hourbar-legend{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px;
  font-size:12.5px;color:var(--muted)}
.hb-key{display:inline-flex;align-items:center;gap:5px}
/* 2026-09-25: aqui vivia o rótulo VISÍVEL do período da barra (`.hb-mes`, o «setembro de 2026» que
   saía por baixo da barra do mês). O dono pediu para o tirar («remove the month from under the hour
   bar») e o mês passou a viver no selector do ecrã — a regra saiu com ele (e o `opts.periodo` do
   `hourBarHTML` também: nenhum chamador o passa). */
.hb-chip{width:11px;height:11px;border-radius:3px;display:inline-block;flex:0 0 auto}
.hb-chip.done{background:#F9D37B;box-shadow:inset 0 0 0 1px #EFC462}
.hb-chip.over{background:#0191E1}
.hb-chip.left{background:repeating-linear-gradient(115deg,#EAEBF0 0 3px,#F7F8FC 3px 6px);
  box-shadow:inset 0 0 0 1px #E4E7EF}
/* ONDA 19: `var(--fg,var(--foreground,#111))` NUNCA resolvia nesta folha (nenhuma das duas variáveis
   existe) — a cor caía sempre no literal `#111`, invisível no tema escuro (medido: 1,02 de
   contraste). A variável do tema é `--ink` (#1a2433 claro / #e6ebf2 escuro). */
.hb-pct{font-weight:700;color:var(--ink)}
.hb-pct.over{color:#0b6ea8}
.hb-extra{color:#0b6ea8;font-weight:700}
.hb-nota{opacity:.85}
.hourbar.mini{margin-top:7px;max-width:280px}
.hourbar.mini .hourbar-track{height:8px;border-radius:4px}
.hourbar.mini .hourbar-seg.first{border-radius:999px 0 0 999px}
.hourbar.mini .hourbar-seg.end{border-radius:0 999px 999px 0}
.hourbar.mini .hourbar-seg.first.end{border-radius:999px}
.hourbar.mini .hourbar-legend{font-size:11.5px;margin-top:3px;gap:6px}
/* A divisória do ESPERADO (o alvo: contrato menos férias/AJ/feriado). A POSIÇÃO vem no `style` do
   próprio elemento (esperado / contrato × 80%): a escala da pista é FIXA no contrato — o contrato aos
   80%, os 20% finais a zona de horas extra — por isso a divisória desliza para a esquerda nas semanas
   encurtadas por férias/AJ/feriado (2026-09-25). Linha própria, por cima dos troços: é a
   referência da barra. Na mini é mais fina, para não pesar numa barra de 8px. */
.hourbar-mark{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;z-index:3;border-radius:1px;
  background:var(--muted);opacity:.65;pointer-events:none}
.hourbar.mini .hourbar-mark{width:1px;margin-left:-.5px;opacity:.8}
/* Legenda: a linha cheia é a divisória (o esperado); o contrato é uma linha tracejada, porque os
   dois números são diferentes numa semana com férias/AJ/feriado. O total da semana é texto. */
.hb-chip.linha{width:3px;height:13px;border-radius:1px;background:var(--muted);opacity:.85}
.hb-chip.contrato{width:3px;height:13px;border-radius:1px;opacity:.7;
  background-image:repeating-linear-gradient(180deg,var(--muted) 0 2px,rgba(0,0,0,0) 2px 5px)}
.hb-total{font-weight:600;color:var(--ink)}
.hb-total i{font-style:normal;opacity:.75}
.hb-vazio{font-weight:700;color:var(--warn)}
/* Botão de voltar com texto comprido (não cabe no .stepbtn small de largura fixa) */
.pillbtn.backbtn{width:auto;padding:0 14px;white-space:nowrap}

/* Movimentos ao longo do dia (2026-09-23): despesas, transferências, outros, entrega */
.qmov{margin-top:14px;border-top:1px solid var(--line);padding-top:10px;}
.qmov>summary{cursor:pointer;font-weight:600;font-size:15px;display:flex;align-items:center;gap:8px;list-style:none;}
.qmov>summary::-webkit-details-marker{display:none;}
.qmov>summary::before{content:'\25B8';color:var(--muted);font-size:12px;line-height:1;}
.qmov[open]>summary::before{content:'\25BE';}
.qmov-badge{background:var(--accent);color:#fff;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;}
.qmov-total{text-align:right;font-size:13px;color:var(--muted);margin-top:6px;}

/* Verificador de versões (2026-09-23) */
.upd-banner{display:flex;align-items:center;gap:12px;background:#fff7e6;border:1.5px solid #f0c26b;color:#7a4b00;
  border-radius:12px;padding:12px 14px;margin-bottom:14px;cursor:pointer;font-size:15px;}
.upd-banner:hover{background:#fff1d6;}
.upd-banner-ico{font-size:20px;line-height:1;}
[data-theme="dark"] .upd-banner{background:#2a2417;border-color:#5c4a22;color:#f0d9a8;}
.upd-box{background:var(--accent-soft);border-radius:12px;padding:12px;margin-top:8px;}
.upd-notes{margin-top:6px;font-size:13px;}
.upd-notes>summary{cursor:pointer;color:var(--accent);font-weight:600;}
.upd-notes-body{white-space:pre-wrap;margin-top:6px;color:var(--ink);font-size:13px;line-height:1.45;}
/* ONDA 23 (2026-10-02): o botão único e o estado do passo em curso. */
.upd-status{margin-top:10px;font-size:14px;}
.upd-status-falha{color:#b45309;font-weight:600;}
.upd-status-ok{color:#0f7b6c;font-weight:600;}
.upd-acoes{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap;}
.upd-acoes .big{min-width:200px;}
.upd-ultima{color:var(--muted);}

/* ---- Semana em barras (tipo Gantt): as horas na horizontal, uma faixa por pessoa ----
   2026-09-24: o calendário dos blocos com os eixos trocados. As barras são posicionadas
   em % da largura da pista, por isso o gráfico acompanha qualquer tamanho de ecrã. */
.gantt-wrap{overflow-x:auto;margin:10px 0 4px;border:1px solid var(--line);border-radius:12px;background:var(--card);}
.gantt{min-width:max-content;}
.gantt-head,.gantt-group,.gantt-row{display:flex;align-items:stretch;}
.gantt-head{position:sticky;top:0;z-index:3;background:var(--card);border-bottom:1px solid var(--line);}
.gantt-lbl{position:sticky;left:0;z-index:2;flex:0 0 200px;width:200px;padding:5px 10px;background:var(--card);
  border-right:1px solid var(--line);font-size:12.5px;display:flex;align-items:center;gap:6px;white-space:nowrap;}
.gantt-head .gantt-lbl{z-index:4;color:var(--muted);font-size:11px;font-weight:600;}
.gantt-lbl i{font-style:normal;color:var(--muted);font-size:11px;}
/* Destaque nas barras (2026-09-24): mesma linguagem dos blocos do calendario — contorno
   grosso em quem esta destacado, os outros esbatidos. O rotulo da faixa e o gatilho. */
.gantt-row.dimmed{opacity:.22;}
.gantt-row.hl .gantt-lbl{box-shadow:inset 0 0 0 2px rgba(0,0,0,.85);}
.gantt-row.hl .gantt-bar{box-shadow:0 0 0 2px rgba(0,0,0,.85);}
.gantt-pick:hover{background:var(--accent-soft);}
/* Selo de codigo numa barra estreita (so o emoji, como nos blocos pequenos da vista geral) e a
   faixa de ausencia, que ocupa o dia todo (2026-09-24). */
.gantt-bar .gantt-seal{font-size:12px;line-height:1;padding:0 2px;}
.gantt-bar.gantt-ausencia{left:3px;right:3px;width:auto;opacity:.9;}
.gantt-ruler{display:flex;}
.gantt-tick{flex:0 0 54px;font-size:11px;color:var(--muted);padding:5px 0 5px 4px;border-left:1px solid var(--line);}
.gantt-group{background:var(--accent-soft);border-top:1px solid var(--line);}
.gantt-group .gantt-lbl{font-weight:700;}
.gantt-group .gantt-track{border-bottom:1px solid var(--line);}
.gantt-row{border-top:1px solid var(--line);}
.gantt-row:first-child{border-top:0;}
.gantt-row:hover{background:var(--accent-soft);}
.gantt-dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px;}
.gantt-track{position:relative;flex:1 1 auto;min-height:30px;
  background-image:repeating-linear-gradient(to right,var(--line) 0 1px,transparent 1px 54px);}
.gantt-track.head{background-image:none;min-height:8px;}
.gantt-bar{position:absolute;top:4px;bottom:4px;border-radius:7px;display:flex;align-items:center;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.10);}
.gantt-bar span{font-size:11px;font-weight:600;padding:0 7px;white-space:nowrap;}

/* Troca de vista da semana (calendário ↔ barras). O botão do calendário vive no canto da grelha —
   ocupa exactamente a altura do cabeçalho dos dias (36px), à esquerda dos nomes e por cima do 09:00. */
.cal-corner{position:absolute;top:0;left:0;width:46px;height:36px;display:flex;align-items:center;justify-content:center;}
.pillbtn.mini{min-height:26px;padding:0 7px;font-size:12px;border-radius:8px;}

/* barra única das folgas: 0 a 100%, em que 100% são 8h (2026-09-24) */
.folgabar-row{display:flex;align-items:center;gap:8px;margin:2px 2px 20px}
.folgabar-ico{font-size:17px;line-height:1}
.folgabar-ico:last-child{font-size:21px}
.folgabar-wrap{position:relative;flex:1;padding-top:38px}
/* O marcador tem a altura exacta do espaço de cima e encosta os filhos ao fundo: assim a PONTA da
   seta fica sempre na aresta de cima da barra, sem depender da altura de cada glifo. */
.folgabar-marker{position:absolute;top:0;height:38px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;transform:translateX(-50%);pointer-events:none}
.folgabar-runner{font-size:20px;line-height:1;transform:scaleX(-1)}   /* espelhado: corre para a direita */
.folgabar-arrow{font-size:10px;line-height:1;font-weight:700;color:#000;
  text-shadow:0 0 2px #fff,0 0 2px #fff,0 0 2px #fff;}
.folgabar{height:12px;border-radius:999px;background:#e0e5ee;overflow:hidden}
.folgabar > span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#f5c144,#e8a013);transition:width .3s}

/* botão «Hoje» do Horário geral: só contorno, mesma altura das setas (2026-09-24) */
.stepbtn.navtoday{width:auto;padding:0 14px;height:38px;background:transparent;border:1.5px solid #c8d0d8;font-weight:700;font-size:13px;}
.stepbtn.navtoday:hover{background:#f4f6f9;}

/* Resumo da semana: valores ao centro, nome à esquerda (2026-09-24) */
table.grid.resumo-semana td.num,table.grid.resumo-semana th.num{text-align:center}

/* A curva na junção tem de vir DEPOIS das regras de cor das peças: `.hourbar-seg.over{background:…}`
   é um atalho e repõe `background-image:none`, portanto apagava a concha (medido: bg:none).
   2026-09-24. */
/* 2026-09-24 (3.ª queixa): a junção lia-se como um «D». Causa MEDIDA no ecrã (perfil de
   píxeis): a peça dourada fecha em meia-lua MAS a peça seguinte pintava por cima uma segunda
   meia-lua de ouro na mesma zona — o resultado era um relevo redondo a saltar para dentro da
   hachura, com uma costura vertical (e um cunha cinzenta do fundo da pista à volta).
   Agora a peça seguinte deixou de pintar ouro: ENTRA 8px por baixo da anterior (margem negativa,
   compensada no JS para a barra não crescer) e RECORTA-SE com uma máscara, deixando à vista a
   meia-lua dourada que está por baixo. A hachura passa a moldar-se ao fim da barra, sem costura. */
.hourbar-seg.junta-dir{border-radius:0 999px 999px 0;box-shadow:none}
.hourbar-seg.junta-esq{margin-left:-8px;
  -webkit-mask-image:radial-gradient(circle 8px at 0 50%, transparent 0 8px, #000 8px);
  mask-image:radial-gradient(circle 8px at 0 50%, transparent 0 8px, #000 8px);}
.hourbar.mini .hourbar-seg.junta-esq{margin-left:-4px;
  -webkit-mask-image:radial-gradient(circle 4px at 0 50%, transparent 0 4px, #000 4px);
  mask-image:radial-gradient(circle 4px at 0 50%, transparent 0 4px, #000 4px);}
/* Na mini a 1.ª peça segue a mesma regra da barra grande: a ponta exterior redonda E a meia-lua da
   junção (a peça seguinte é mascarada e molda-se-lhe). Sem isto, a máscara de 4px descobria um
   entalhe claro do fundo na junção. 2026-09-25. */
.hourbar.mini .hourbar-seg.first.junta-dir{border-radius:999px}
/* A 1.ª peça de uma barra com mais do que um troço tem de manter a PONTA ESQUERDA redonda: a regra da
   junta é mais abaixo no ficheiro e, com a mesma especificidade, apagava-lhe o canto exterior
   (medido no ecrã: raio-esq 0px no dourado — a barra começava em bico). 2026-09-25. */
.hourbar-seg.first.junta-dir{border-radius:999px}


/* ===== Assistente de instalação (primeiro arranque) — 2026-09-24 =====
   Cinco passos, um ecrã de cada vez, para quem não é técnico: a barra de cima diz sempre em que
   passo está. Sem grelhas de 6 colunas nem botões de ícone — só texto e caixas grandes. */
.ob-wrap{padding:26px 16px 60px;}
.ob-steps{display:flex;align-items:center;gap:8px;}
.ob-dot{width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;border:2px solid var(--line);color:var(--muted);background:var(--card);}
.ob-dot.on{border-color:var(--accent);background:var(--accent);color:#fff;}
.ob-dot.done{border-color:var(--accent);color:var(--accent);}
.ob-line{flex:1;height:2px;background:var(--line);}
.ob-erro{background:#fdeff0;color:#a4262c;border:1.5px solid #f3c2c6;border-radius:10px;
  padding:10px 12px;font-size:14px;margin:6px 0 4px;}
[data-theme="dark"] .ob-erro{background:#3a1f22;border-color:#6b2b31;color:#f6c9cd;}
.ob-wrap select{height:46px;border-radius:10px;border:1.5px solid var(--line);font-size:15px;
  padding:0 10px;background:var(--card);color:var(--ink);font-family:inherit;}
/* ---- «👁 Antes de gravar» (2026-09-24) ------------------------------------------------
   Uma faixa com os números ANTES de gravar (é aqui que se grava). Tudo com as cores da app
   (--accent/--warn/--danger) para o tema escuro sair certo; classes próprias e estreitas, para não
   mexer em ecrãs que não são estes.
   2026-09-25: as classes .guia-* (a barra «🧭 Criar o horário») saíram com a própria barra. */
.antes-gravar{padding:14px 16px;display:flex;flex-direction:column;gap:8px;border-left:4px solid var(--accent);}
.ag-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.ag-titulo{font-size:16px;font-weight:700;}
/* 2026-09-25: a linha «A QUEM se aplicam» — o nome de cada pessoa com dias por gravar, por
   extenso («👤 Nome — 2 dia(s) · 👤 Nome — 1 dia»). Nunca um «2 pessoas» sem nomes. */
.ag-quem{font-size:14px;font-weight:600;color:var(--ink);background:#eef4ff;border:1px solid #cfe0ff;border-radius:8px;padding:5px 9px;}
[data-theme="dark"] .ag-quem{background:#1c2534;border-color:#2b3a52;}
/* O nome da pessoa em cada dia listado — só aparece quando são VÁRIAS pessoas (com uma só já está
   na linha de cima). */
.ag-quem-dia{font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap;}
.ag-linhas{display:flex;flex-direction:column;gap:4px;}
.ag-linha{display:flex;align-items:baseline;gap:8px;font-size:14px;flex-wrap:wrap;}
.ag-dia{font-weight:700;min-width:96px;}
.ag-antes{color:var(--muted);}
.ag-seta{color:var(--muted);}
.ag-depois{font-weight:600;}
.ag-horas{color:var(--muted);font-variant-numeric:tabular-nums;}
.ag-nums{display:flex;gap:18px;flex-wrap:wrap;font-size:14px;padding-top:8px;border-top:1px solid var(--line);}
.ag-erros,.ag-avisos{font-size:14px;border-radius:10px;padding:8px 12px;margin-top:6px;}
.ag-erros{background:#fbeaea;color:var(--danger);}
.ag-avisos{background:#fdf3e2;color:var(--warn);}
.ag-erros ul,.ag-avisos ul{margin:4px 0 0 18px;}
[data-theme="dark"] .ag-erros{background:#2a1f1f;}
[data-theme="dark"] .ag-avisos{background:#2a2417;}
.cal-semana-resumo{display:flex;gap:18px;align-items:center;flex-wrap:wrap;font-size:15px;padding:12px 16px;margin-bottom:10px;}
.cal-semana-resumo .step-sub{font-size:13px;max-width:560px;}

/* ---- «Dias de Férias e Folgas» (DFF) — 2026-09-25 -------------------------------
   Por pessoa: ⏱ Horas em cima, 🦥 Folgas ao meio, 🏖️ Férias em baixo. Cada linha é uma grelha
   [rótulo | valor | nota]: o valor tem sempre a mesma coluna e a mesma largura, por isso os três
   números ficam alinhados na vertical; as linhas têm altura fixa, logo o alinhamento é igual em
   todos os cartões. Nada é cortado: a nota quebra linha se não couber. */
.dff-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(284px, 1fr)); gap:12px; }
.dff-ficha { border:1.5px solid var(--line); border-left:5px solid var(--line); border-radius:12px;
  padding:10px 12px 6px; background:var(--card); display:flex; flex-direction:column; }
.dff-nome-row { display:flex; align-items:center; gap:4px; margin-bottom:6px; }
.dff-nome { font-weight:700; font-size:15px; flex:1; min-width:0; overflow-wrap:anywhere; }
.dff-nome-row .linkbtn { margin-left:0; padding:4px 6px; text-decoration:none; font-size:15px; }
.dff-rows { display:flex; flex-direction:column; }
.dff-row { display:grid; grid-template-columns:72px 72px minmax(0, 1fr); align-items:center; gap:10px;
  min-height:36px; padding:3px 0; border-bottom:1px solid var(--line); }
.dff-row:last-child { border-bottom:none; }
.dff-row-edit { border-top:1.5px dashed var(--line); }
.dff-lbl { font-size:14px; white-space:nowrap; }
.dff-val { font-size:17px; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.dff-val.neg { color:var(--danger); }
.dff-nota { font-size:12px; color:var(--muted); line-height:1.3; }
.dff-in { width:72px; height:38px; text-align:center; font-size:16px; font-weight:700;
  border:1.5px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink);
  font-family:inherit; font-variant-numeric:tabular-nums; justify-self:end; }
.dff-in:focus { outline:2px solid var(--accent); outline-offset:1px; }
@media (max-width:560px){ .dff-row { grid-template-columns:68px 68px minmax(0, 1fr); gap:8px; }
  .dff-in { width:68px; } }

/* ---- 2026-09-25: alinhamentos finos dos controlos do horário -----------------------------
   (pedido 9) Todos os controlos da linha medem o MESMO em altura, para os topos ficarem iguais — o
   select da pessoa, o do modo e o ícone das férias nasciam mais altos que os botões (42 vs 38) e
   «pareciam» duas linhas. Esta regra vive no fim do ficheiro de propósito: tem de ganhar à altura
   que `.cal-nav .iconbtn` define mais acima.
   (pedido 5R) O painel «👁 Antes de gravar» fica logo ABAIXO da barra das categorias: a margem de
   cima garante que o painel começa DEPOIS do fim da barra (e não encostado ao pixel da borda). */
.cal-nav .iconbtn{width:40px;height:40px;}
.cal-nav select.cal-view-sel{height:40px;}
.cal-nav .stepbtn{height:40px;}
.cal-nav .cal-week-lbl{line-height:40px;}
.card.antes-gravar{margin-top:12px;}

/* ---- «🗓️ Criar horário» — pastilhas de escolha múltipla + caixa de colisões (2026-09-25) -----
   As opções são PASTILHAS escolhíveis: reusa-se a pastilha que a casa já tem (.catbtn, a das
   categorias), para não haver duas linguagens de botão no mesmo ecrã. Aqui só vive o ESQUELETO do
   modal — secções, rótulos, a linha do «Vai aplicar» e as caixas de aviso (que usam as MESMAS cores
   do painel «Antes de gravar»: .ag-erros para o que não cabe, .ag-avisos para o resto). */
.ch-sec{display:flex;flex-direction:column;gap:7px;margin-bottom:12px;}
.ch-lbl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.3px;text-transform:uppercase;}
.ch-lbl b{color:var(--ink);text-transform:none;font-size:13px;}
/* 2026-09-25: o seletor de SEMANA vive na MESMA linha do «2. Dias» — um grupo de três peças
   (‹ · intervalo em DD-MM-YYYY · ›) com a altura do botão que já lá está (`.pillbtn.mini`, 26px),
   logo a linha não cresce nem passa a duas. O rótulo nunca parte (`nowrap`) e o `text-transform`
   volta a `none` porque a linha está em maiúsculas (senão o «a» do intervalo saía «A»). */
.ch-sem{display:inline-flex;align-items:center;gap:5px;}
.ch-sem .ch-sem-nav{min-width:26px;font-size:14px;font-weight:800;line-height:1;}
.ch-sem .ch-sem-lbl{text-transform:none;font-size:12px;font-weight:700;color:var(--ink);
  white-space:nowrap;letter-spacing:0;font-variant-numeric:tabular-nums;}
.ch-sem.fechada .ch-sem-lbl{color:var(--danger);}
.ch-acoes{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;}
.ch-pills{display:flex;gap:9px;flex-wrap:wrap;}
.ch-pill{min-height:28px;padding:4px 10px;}
/* 2026-09-25: as pastilhas dos FUNCIONÁRIOS ficam em 3 COLUNAS e as dos DIAS em 3 linhas
   (Seg/Ter/Qua · Qui/Sex/Sáb · Dom, que é a ordem natural da semana desta app) — a mesma grelha
   serve os dois. `minmax(0,1fr)` + texto que pode partir a linha: o nome longo nunca fica cortado. */
.ch-pills.ch-3col{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;}
.ch-pills.ch-3col .ch-pill{width:100%;justify-content:flex-start;text-align:left;white-space:normal;line-height:1.3;}
.ch-pills.ch-3col .ch-pill .ch-nota{margin-left:auto;}
/* Os BLOCOS vêm agrupados por «Dia inteiro», «Manhã» e «Tarde» (ordem fixa). */
.ch-grp{margin-top:10px;}
.ch-grp:first-child{margin-top:0;}
.ch-grp-t{font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.3px;text-transform:uppercase;margin-bottom:6px;}
.ch-nota{font-style:normal;font-size:11px;font-weight:700;opacity:.8;}
.ch-resumo{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:14px;line-height:1.45;
  background:var(--accent-soft,#eaf6f3);border:1px solid var(--line);border-radius:10px;
  padding:9px 12px;margin:2px 0 8px;}
.ch-resumo.ch-falta{background:var(--card);color:var(--muted);}
.ch-aviso{margin-top:8px;font-size:14px;}
.ch-aviso ul{margin:4px 0 0 18px;}
.ch-aviso li{margin-bottom:2px;}
.ch-aviso .ch-nota{display:block;margin-top:6px;line-height:1.4;}
.ch-erro{color:var(--danger);font-size:14px;font-weight:600;margin-top:10px;}

/* O rodapé do «Criar horário» fica sempre à vista, mas SEM passar por cima do conteúdo: o cartão é
   uma coluna flexível — cabeçalho e rodapé fixos, só o MIOLO (`.ch-corpo`) rola, com a barra de
   scroll à vista. Assim, numa janela baixa, nunca há uma pastilha meio escondida atrás dos botões
   (2026-09-25: nada cortado). */
.modalcard.ch-card{display:flex;flex-direction:column;overflow:hidden;}
.modalcard.ch-card > .headrow{flex:0 0 auto;}
.ch-card .ch-corpo{flex:1 1 auto;min-height:0;overflow:auto;padding-right:6px;scrollbar-width:thin;}
.ch-rodape{flex:0 0 auto;background:var(--card);border-top:1px solid var(--line);
  margin-top:10px;padding:12px 0 2px;}


/* ---- 2026-09-25 (C): AJUSTES MANUAIS de horas dentro do modal do DFF ---------------------
   A correcção vive AO LADO do cálculo: cada linha mostra «+16h — ajuste manual (25-09-2026): motivo»
   e o formulário fica em baixo, no mesmo modal. Nada de ecrã novo e nada escondido: a soma das
   correcções aparece separada do histórico na linha «⏱ Horas» e na lista. */
.dff-aj-bloco { margin-top:18px; padding-top:14px; border-top:1.5px dashed var(--line); }
.dff-aj-titulo { font-size:15px; font-weight:700; }
.dff-aj-lista { display:flex; flex-direction:column; gap:6px; }
.dff-aj-linha { display:flex; align-items:center; gap:8px; justify-content:space-between;
  border:1.5px solid var(--line); border-radius:10px; padding:7px 10px; background:var(--card); }
.dff-aj-txt { font-size:13.5px; overflow-wrap:anywhere; }
.dff-aj-btns { display:flex; gap:4px; flex-shrink:0; }
.dff-aj-vazio { font-size:13px; color:var(--muted); padding:4px 2px; }
.dff-aj-form { margin-top:12px; padding:10px 12px; border:1.5px solid var(--line);
  border-radius:12px; background:var(--accent-soft); }
.dff-aj-campos { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.dff-aj-campo { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted);
  font-weight:600; }
.dff-aj-campo input { height:38px; padding:0 10px; font-size:14px; font-weight:600;
  border:1.5px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink);
  font-family:inherit; }
.dff-aj-campo input#dff-aj-horas { width: 150px; }
.dff-aj-campo-largo { flex:1; min-width:200px; }
.dff-aj-campo-largo input { width:100%; }
.dff-aj-sem { border-top:1.5px dashed var(--line); }

/* ---- 2026-09-25: MODELOS de turno — o item edita-se NO SÍTIO -----------------------------
   Antes, abrir a edição de um modelo substituía a LISTA pelo formulário (tudo o resto desaparecia e
   o ecrã saltava). Agora cada item é uma caixa `[data-tpl-idx]` e o item aberto ganha a classe
   `.tpl-aberto`: a mesma caixa cresce e passa a ter os campos e as pílulas (✏️ / 💾 / 🗑). Os outros
   itens continuam à vista, clicáveis, na mesma ordem. */
.tpl-item { padding:8px 10px; border:1.5px solid var(--line); border-radius:8px; background:var(--card); }
.tpl-item.tpl-aberto { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }
.tpl-pill { transition:background .12s ease; }
.tpl-pill.on { background:var(--accent); color:#fff; }
.tpl-pill.on:hover { background:var(--accent); }


/* ---- 2026-09-25: formulário «👥 Utilizadores» (criar conta) nas Definições ------------------
   Campos com a legenda POR CIMA (o mesmo gesto do formulário dos ajustes) e o botão alinhado com os
   campos. Antes era tudo caixas sem nome a seguir uma à outra e a amostra da cor não se sabia o que
   era. As colunas partem linha quando o ecrã é estreito (flex-wrap) — na farmácia há monitores
   pequenos. */
.set-campos { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-top:4px; }
.set-campo { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); font-weight:600; }
.set-campo input { height:44px; padding:0 10px; font-size:14px; font-weight:600; width:100%;
  border:1.5px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink);
  font-family:inherit; }
.set-campo input[type=color] { padding:3px; cursor:pointer; }

/* ===== 2026-09-25 ==========================================================================
   1) Caixa flutuante do detalhe de um pistão (Fecho da Farmácia e «Diferença de hoje»). Vive no
      <body> e é `position:fixed`: nenhuma caixa-mãe com overflow a pode cortar e, por estar FORA do
      fluxo, aparecer não mexe em nada do layout. Sai quando o rato sai (`statTipHide`).
   2) O pistão novo do ecrã inicial é MAIS PEQUENO que os outros (não pode esticar até à largura da
      linha, como acontecia a um `.stats` com um só cartão).
   3) A matriz de Diferenças na sua própria secção: largura toda, linhas de 71px com 10px de
      intervalo (a referência do histórico: dentro generoso, muito espaço por entrada), números
      centrados na coluna, datas DD-MM-YYYY e colunas redimensionáveis.
   ================================================================================================ */
.stat-tip{position:fixed;z-index:80;pointer-events:none;background:var(--card);color:var(--ink);
  border:1.5px solid var(--line);border-radius:12px;box-shadow:0 10px 28px rgba(20,40,50,.20);
  padding:10px 12px;max-width:min(320px,calc(100vw - 16px));font-size:13px;}
.stat-tip-t{font-weight:800;font-size:13px;margin-bottom:6px;}
.stat-tip-r{display:flex;justify-content:space-between;gap:14px;padding:3px 0;border-top:1px dashed var(--line);}
.stat-tip-r span{color:var(--muted);}
.stat-tip-r b{font-variant-numeric:tabular-nums;white-space:nowrap;}
.stat-tip-n{margin-top:7px;color:var(--muted);font-size:12px;line-height:1.4;}

.stats.mini-one{grid-template-columns:minmax(150px,196px);}
/* 2026-09-25: o botão «Desbloquear fechos atrasados» (ecrã inicial do supervisor de fechos)
   vive NA MESMA LINHA do pistão «Diferença de hoje» — não por cima dele. O alinhamento é o próprio
   flex: `align-items:center` centra os dois na mesma altura (o pistão é mais alto do que o botão).
   2026-09-26 (dono): a medição de 2026-09-25 deixou de valer — a ordem mudou (o botão dos totais
   saiu do meio e agora FECHA a linha à direita, só com o 🖨). Medido a 1440/1366 (linha de 936px,
   estado fechado): «Desbloquear» 386px + 14 + pistão 196px + 14 + 🖨 62px = 672px, tudo na MESMA
   linha, centro_y = 648 nos três. A 1024px (linha de 665px) a linha EMBRULHA — o que passa para a
   linha de baixo é o 🖨 (que fica à direita na mesma); «Desbloquear» + pistão = 596px continuam
   juntos na primeira linha. Nada foi apertado para caber: a largura que falta é a que é. */
.backdate-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 12px;}
.backdate-row .stats.mini-one{flex:0 0 auto;}
.backdate-row > .big.ghost{flex:0 0 auto;}
.backdate-row > .chip{white-space:nowrap;}
/* 2026-09-26 (dono): «Totais em PDF» = só o ícone da impressora, encostado à DIREITA da linha.
   O `margin-left:auto` come a folga toda e empurra-o para a borda direita do cartão — a MESMA do
   `.grid` por baixo (medido a 1440/1366: right 1306 = right da tabela). Quadrado de 62×62 (a mesma
   altura do «Desbloquear», `.big` tem `min-height:62px`), com o ícone ao centro: um botão de ícone
   com o `padding:0 28px` do `.big` ficaria um retângulo largo e vazio. Quando a linha embrulha
   (1024px) cai sozinho na linha de baixo e o `auto` fá-lo ficar lá igualmente à direita. */
.backdate-row > .totais-pdf{flex:0 0 auto;margin-left:auto;width:62px;padding:0;font-size:20px;
  display:inline-flex;align-items:center;justify-content:center;}
.stat.stat-mini{padding:12px 14px;}
.stat.stat-mini .k{font-size:11.5px;letter-spacing:.3px;}
.stat.stat-mini .v{font-size:19px;margin-top:4px;}
.stat.stat-mini .sub{font-size:11.5px;margin-top:3px;}

.matrixwrap-full{overflow-x:auto;max-width:100%;padding-bottom:2px;}
table.matrix-full{border-collapse:separate;border-spacing:0 10px;table-layout:fixed;}
table.matrix-full th,table.matrix-full td{min-width:0;padding:0 10px;height:71px;text-align:center;
  font-size:14px;border-bottom:none;white-space:nowrap;vertical-align:middle;}
table.matrix-full th{height:34px;font-size:12px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.3px;position:relative;vertical-align:bottom;padding-bottom:8px;}
table.matrix-full td{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
table.matrix-full td:first-child{border-left:1px solid var(--line);border-radius:10px 0 0 10px;}
table.matrix-full td:last-child{border-right:1px solid var(--line);border-radius:0 10px 10px 0;}
table.matrix-full tr:last-child td{background:var(--accent-soft);}
table.matrix-full .num{font-variant-numeric:tabular-nums;}
/* Valores ao CENTRO da coluna (a regra do Resumo da Semana: `resumo-semana td.num{center}`) —
   tem de levar `table.grid` à frente, senão a regra `table.grid td.num{right}` ganha. */
table.grid.matrix-full td.num,table.grid.matrix-full th.num{text-align:center;}
/* ---- Matriz das Diferenças em SEMANAS (2026-09-25 — opção B) ------------------------------
   A tabela passou a ser um bloco por semana, empilhados ao longo da página: uma pessoa por linha,
   os dias dessa semana como colunas e o Σ da semana à direita. Assim tudo cabe na largura do cartão
   e NÃO há scroll horizontal (o item 3.1 — coluna do total fixa — deixou de ser necessário: o total
   está sempre à vista). O FUNDO de cada célula de dia é a cor do LIMITE do semáforo que a app já
   aplica (`diffCls`: < 2 € verde, < 10 € amarelo, ≥ 10 € vermelho); os pares fundo+texto são os
   MESMOS do `.diff-banner` do assistente de fecho (#eaf5ee/--ok, #fdf3e2/--warn, #fbeaea/--danger). */
.mx-weeks{display:flex;flex-direction:column;gap:18px;}
.mx-week-h{font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.3px;margin:0 0 4px;white-space:nowrap;}
table.matrix.mx-week-tab{table-layout:fixed;width:100%;}
table.matrix.mx-week-tab th,table.matrix.mx-week-tab td{min-width:0;padding:0 4px;text-align:center;
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
table.matrix.mx-week-tab th{font-size:11.5px;padding-bottom:6px;}
table.matrix.mx-week-tab td{height:52px;font-size:12.5px;}
.mx-weeks-full table.matrix.mx-week-tab td{height:56px;}
table.matrix.mx-week-tab .mx-nome{width:132px;text-align:left;font-weight:600;font-size:12.5px;}
table.matrix.mx-week-tab .mx-sem{width:78px;font-weight:700;}
table.matrix.mx-week-tab tr:first-child th.mx-nome{text-align:left;}
table.matrix .mx-dia.ok{background:#eaf5ee;color:var(--ok);font-weight:700;}
table.matrix .mx-dia.warn{background:#fdf3e2;color:var(--warn);font-weight:700;}
table.matrix .mx-dia.bad{background:#fbeaea;color:var(--danger);font-weight:700;}
table.matrix .mx-fora{background:var(--bg);}   /* dia fora do mês: lugar vazio, não é um zero */
[data-theme="dark"] table.matrix .mx-dia.ok{background:rgba(78,201,138,.20);}
[data-theme="dark"] table.matrix .mx-dia.warn{background:rgba(217,164,65,.20);}
[data-theme="dark"] table.matrix .mx-dia.bad{background:rgba(224,122,106,.22);}
table.matrix.mx-mes .mx-settle{width:150px;text-align:left;}
.mx-k{padding:1px 6px;border-radius:6px;font-weight:700;}
.mx-k.ok{background:#eaf5ee;color:var(--ok);}
.mx-k.warn{background:#fdf3e2;color:var(--warn);}
.mx-k.bad{background:#fbeaea;color:var(--danger);}
@media print{
  /* No papel as colunas não se «colam» a nada: nada de sticky que possa repetir/sobrepor números. */
  table.matrix td:last-child,table.matrix th:last-child{position:static;}
}

/* 2026-09-25: «Fechos em falta» (ecrã inicial do funcionário) — linhas com altura a sério e
   10px de intervalo, como o resto do projeto; a data e o dia da semana à esquerda, a acção à direita. */
.falta-list{display:flex;flex-direction:column;gap:10px;margin-top:12px;}
.falta-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;background:var(--card);font-size:15px;}
.falta-dia{font-weight:600;}

/* 2026-09-25, revisto 2026-09-26: rodape dos DOIS balcoes de pedido (Ferias e Folga). O botao de envio
   saiu daqui para a linha do <Limpar seleção> (topo do calendario, a esquerda dele — ver
   `feriasMonthGrid`); o rodape leva SO a pastilha do contador, no canto inferior direito do modal.
   `justify-content:flex-end` e o que a encosta a borda direita sem larguras escritas a mao. */
.fer-rodape{display:flex;justify-content:flex-end;margin-top:14px;}
.fer-contador{cursor:default;min-width:0;padding:10px 18px;}
.fer-contador:hover{border-color:var(--line);box-shadow:none;}
.fer-contador .days-pill-num{font-variant-numeric:tabular-nums;}
/* Dias fora da janela do pedido (o balcao da folga so aceita de amanha em diante): ficam no
   calendario, esbatidos e sem handlers — nao se marcam. */
.fm-table td.fm-day.off{background:transparent;border-style:dashed;color:var(--muted);opacity:.6;cursor:not-allowed;}
.fm-table td.fm-day.off:hover{border-color:var(--line);}
/* O botao de pedido do modal de Ferias/Folgas (o dos dias): a linha encosta a direita e fica ACIMA
   das caixas de estado. */
.dm-rodape{justify-content:flex-end;}

/* ---- 🔢 Números de fecho (TPA): a pastilha «✓» e a linha do guardado (2026-09-26) ---------------
   Classes NOVAS e estreitas de propósito — nenhuma regra aqui é partilhada com outros ecrãs (mover
   uma classe comum mudava ecrãs que não estão a ser revistos). O `.tpa-mark` é o que põe o «✓» à
   MESMA altura dos campos: ocupa uma linha de texto igual à etiqueta «TPA 1» (mesma fonte, mesmo
   `gap`), por isso a pastilha de 48px cai exactamente sobre os inputs de 48px, na mesma linha e à
   direita do último campo. `999px` e não um raio em px: é isso que faz a ponta redonda (#142). */
.tpa-checkwrap{display:flex;flex-direction:column;gap:4px;font-size:14px;align-items:center;}
.tpa-mark{visibility:hidden;}
.tpa-check{width:48px;height:48px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);
  color:var(--muted);font-family:inherit;font-size:20px;font-weight:700;line-height:1;padding:0;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.tpa-check:disabled{opacity:.45;cursor:default;}
.tpa-check.on{background:var(--accent);border-color:var(--accent);color:#fff;}
.tpa-check.on:hover{background:var(--accent-dark,var(--accent));}
.tpa-done{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;padding:9px 12px;
  border:1.5px solid var(--line);border-radius:12px;background:var(--card);font-size:14px;}
.tpa-done-info{color:var(--ink);overflow-wrap:anywhere;}


/* ===================== Anúncios e Objetivos (ONDA 2, 2026-09-28) =====================
   Classes PRÓPRIAS e estreitas: nada aqui é uma classe partilhada que se esteja a esticar para servir
   outro ecrã. As barras usam as classes `.hourbar*` que já existem (é a convenção do app para uma
   barra com percentagem) — não se redefine nada delas. */
.nav-chip{font-size:11px;padding:2px 8px;margin-left:6px;border-radius:999px;}
.an-lista{display:flex;flex-direction:column;gap:12px;margin-top:12px;}
.an-card .headrow{margin-bottom:8px;align-items:flex-start;}
.an-titulo{margin:0;font-size:19px;line-height:1.3;overflow-wrap:anywhere;}
.an-meta{display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center;}
.an-corpo{font-size:15px;line-height:1.55;overflow-wrap:anywhere;}
.an-p{margin:0 0 10px;}
.an-p:last-child{margin-bottom:0;}
.an-h{margin:14px 0 8px;font-size:17px;}
.an-q{margin:10px 0;border-left:4px solid var(--accent);background:var(--accent-soft);
     padding:8px 14px;border-radius:0 10px 10px 0;}
.an-ul{margin:8px 0 10px;padding-left:22px;}
.an-ul li{margin:3px 0;}
.an-fig{margin:12px 0;}
.an-img{max-width:100%;height:auto;border-radius:10px;border:1px solid var(--line);display:block;}
.an-fig figcaption{font-size:12.5px;color:var(--muted);margin-top:6px;}
.an-link{color:var(--accent);word-break:break-all;}
/* ONDA 14 — LINHA HORIZONTAL e TABELA dentro do corpo de um anúncio (blocos `hr`/`table` do
   contrato). Uma tabela larga rola DENTRO do próprio bloco (`.an-tab-wrap`), nunca na página (#50);
   a leitura é legível nos dois temas porque as cores saem das variáveis do app. */
.an-hr{border:0;border-top:1px solid var(--line);margin:14px 0;}
.an-tab-wrap{overflow-x:auto;max-width:100%;margin:12px 0;border:1px solid var(--line);
  border-radius:10px;background:var(--card);}
.an-tab{border-collapse:collapse;width:100%;font-size:14.5px;}
.an-tab .an-cel{border:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top;
  overflow-wrap:anywhere;}
.an-tab tbody tr:nth-child(even) .an-cel{background:var(--bg);}
.an-tab tbody tr:hover .an-cel{background:var(--accent-soft);}
.an-tab .an-img.linha{vertical-align:-0.45em;}
.an-rodape{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:12px;border-top:1px solid var(--line);padding-top:10px;}
.an-quem{font-size:12.5px;color:var(--muted);}
.an-acoes{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.an-vistos{font-size:12.5px;color:var(--muted);margin-top:8px;overflow-wrap:anywhere;}
.an-card.fixo{border-left:4px solid var(--warn);}
.an-card.novidade{border-left:4px solid var(--accent);}
.an-card.arquivado{opacity:.88;}
.an-editor{max-height:60vh;overflow:auto;padding-right:4px;}
.an-inp{width:100%;height:42px;border-radius:10px;border:1.5px solid var(--line);
  background:var(--card);color:var(--ink);font-size:15px;padding:0 10px;font-family:inherit;}
.an-inp.titulo{font-size:17px;font-weight:700;}
.an-inp.data{width:auto;height:38px;}
.an-inp:focus{outline:none;border-color:var(--accent);}
.an-opts{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:10px;font-size:14px;}
.an-opt{display:inline-flex;gap:6px;align-items:center;}
.an-ferramentas{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:14px 0 10px;}
.an-div{width:1px;height:22px;background:var(--line);}
.an-bloco-lista{display:flex;flex-direction:column;gap:10px;}
.an-bloco{border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--bg);}
.an-bloco-head{display:flex;gap:6px;align-items:center;margin-bottom:8px;}
.an-bloco-tipo{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em;margin-right:auto;}
.an-txt{width:100%;border-radius:10px;border:1.5px solid var(--line);background:var(--card);
  color:var(--ink);font-size:15px;padding:8px 10px;font-family:inherit;resize:vertical;}
.an-txt:focus{outline:none;border-color:var(--accent);}
.an-preview{border:1px dashed var(--line);border-radius:12px;padding:12px;background:var(--bg);min-height:52px;}
.an-imgprev{max-width:100%;max-height:200px;height:auto;border-radius:10px;
  border:1px solid var(--line);display:block;margin-bottom:8px;}
/* ONDA 10 — «make it slightly wider just to show the heading options as well» (dono, verbatim): o
   compositor era 720 px e a barra do notectl ficava com 640 px úteis, o que deixava 12 dos 26 botões
   no «…». 840 px dá ~740 px de barra (medido) e continua a caber à vontade no ecrã pequeno da
   farmácia (1024 − 40 px de folga do .modal = 984 px), sem rolagem lateral. */
.an-modal{max-width:840px;width:100%;max-height:92vh;display:flex;flex-direction:column;}
.an-modal .an-editor{flex:1 1 auto;min-height:0;}
.obj-bar{margin-top:8px;}
.obj-sub{font-size:13.5px;color:var(--muted);margin-top:6px;}
.obj-acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:10px;font-size:13px;}
.obj-contribs{margin-top:10px;border:1px solid var(--line);border-radius:12px;padding:8px 10px;background:var(--bg);}
.obj-contrib-row{display:flex;gap:10px;align-items:center;font-size:13.5px;padding:5px 0;
  border-bottom:1px solid var(--line);flex-wrap:wrap;}
.obj-contrib-row:last-of-type{border-bottom:none;}
.obj-contrib-quem{min-width:110px;font-weight:600;}
.obj-contrib-data{min-width:80px;color:var(--muted);}
.obj-contrib-val{min-width:86px;text-align:right;font-weight:700;}
.obj-contrib-nota{color:var(--muted);flex:1 1 100px;min-width:60px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.obj-contrib-total{display:flex;justify-content:space-between;gap:10px;margin-top:8px;font-size:14px;
  border-top:2px solid var(--line);padding-top:6px;}
.obj-lancar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px;}
.obj-lancar-rot{font-size:13.5px;color:var(--muted);}
.obj-inp{width:110px;height:40px;border-radius:10px;border:1.5px solid var(--line);
  background:var(--card);color:var(--ink);font-size:15px;padding:0 10px;font-family:inherit;}
.obj-inp.wide{width:170px;}
.obj-inp:focus{outline:none;border-color:var(--accent);}
.obj-antigas{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px;font-size:13px;color:var(--muted);}
.obj-antigas-rot{font-weight:600;}
.obj-antiga{display:inline-flex;gap:6px;align-items:center;background:var(--card);
  border:1px solid var(--line);border-radius:999px;padding:3px 8px;}
.obj-corrigir{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap;}
.obj-dia{display:flex;flex-direction:column;gap:16px;}
.obj-dia-linha{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--bg);}
.obj-dia-topo{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline;}
.obj-dia-nome{font-weight:700;font-size:15.5px;}
.obj-dia-prog{font-size:13px;color:var(--muted);}
.obj-duas{display:flex;gap:12px;flex-wrap:wrap;}
.obj-duas label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted);}
.obj-card.arquivado{opacity:.88;}

/* ---- ONDA 5 (2026-09-28): formatação DENTRO do texto e objetivos com VÁRIAS condições ---- */
/* Imagem EM LINHA: alinhada na linha e com 2em de altura (não cresce com o resto do parágrafo nem
   empurra o texto para fora do cartão; a largura vai no máximo até 42vw/420px). */
.an-img.linha{display:inline-block;vertical-align:-0.45em;height:2em;width:auto;max-height:2em;
  max-width:min(42vw,420px);object-fit:contain;border-radius:6px;margin:0 3px;
  border:1px solid var(--line);background:var(--bg);}
.an-dica{font-size:12.5px;color:var(--muted);margin:0 0 10px;line-height:1.45;}
.an-linkurl{width:auto;flex:1 1 210px;max-width:280px;height:34px;font-size:13.5px;}
.obj-conds{display:flex;flex-direction:column;gap:6px;margin-top:8px;}
.obj-cond{border:1px solid var(--line);border-radius:10px;padding:6px 10px;background:var(--bg);}
.obj-cond-topo{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;}
.obj-cond-nome{font-weight:600;}
.obj-cond-tipo{font-size:12.5px;color:var(--muted);}
.obj-cond .obj-bar{margin-top:4px;}
.obj-logica{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:4px 0 10px;}
.obj-logica .pillbtn.on{background:var(--accent);color:#fff;border-color:var(--accent);}
.obj-conds-editor{display:flex;flex-direction:column;gap:10px;margin-bottom:10px;}
.obj-cond-editor{border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--bg);}
/* ONDA 7b — o comutador «E / OU» de cada condição (o conector dela com a anterior) e a frase
   «Cumprido quando:» (a regra do objetivo em português, vinda do servidor). */
.obj-cond-liga{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 10px;}
.obj-cond-liga-rot{font-size:12.5px;color:var(--muted);}
.obj-cond-liga .pillbtn{min-width:46px;}
.obj-cond-liga .pillbtn.on{background:var(--accent);color:#fff;border-color:var(--accent);}
.obj-cond-liga-nota{font-size:12px;color:var(--muted);}
/* ONDA 8 (2026-09-29): a nota do produto da 2.ª condição — vazio quer dizer «o mesmo produto da
   condição anterior». Classe PRÓPRIA e estreita (não se reaproveita a do comutador, que descreve
   outra coisa). */
.obj-cond-nota{font-size:12px;color:var(--muted);margin:-4px 0 8px;}
.obj-quando{font-size:13.5px;margin-top:6px;line-height:1.45;}
.obj-cond-titulo{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
  color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;}
.obj-cond-titulo .pillbtn{margin-left:auto;}
.obj-contrib-cond{font-size:12.5px;color:var(--muted);min-width:90px;}

/* ==== ONDA 6 (2026-09-28): TAMANHO das imagens dos anúncios e cartões COLAPSÁVEIS ==== */
/* Regras novas ao FIM do ficheiro (as de forma têm de vir depois das de cor, que usam os atalhos
   `background`/`font` e apagariam estas). */

/* 1) Imagem EM LINHA — três ALTURAS crescentes. A MÉDIA é exactamente a regra de sempre
      (2em / -0.45em / min(42vw,420px)), por isso um anúncio já gravado não muda de aspecto. A
      largura tem tecto em cada tamanho: a GRANDE cresce na linha mas não estoura o parágrafo. */
.an-img.linha.an-img-p{height:1.4em;max-height:1.4em;vertical-align:-0.3em;max-width:min(30vw,280px);}
.an-img.linha.an-img-m{height:2em;max-height:2em;vertical-align:-0.45em;max-width:min(42vw,420px);}
.an-img.linha.an-img-g{height:3.2em;max-height:3.2em;vertical-align:-0.7em;max-width:min(56vw,560px);}

/* 2) Imagem em BLOCO — a regra de SEMPRE é a de baixo do `.an-img` (`max-width:100%`, largura
      natural): uma imagem sem predefinição nenhuma — um anúncio da ONDA 5, que nunca teve `tamanho`
      — fica exactamente como ficava, e para qualquer fotografia (sempre maior que o cartão) isso É a
      largura toda do cartão, ou seja 100%. É por isso que a omissão não leva classe nenhuma.

      As três PREDEFINIÇÕES (Pequena 25% / Média 50% / Grande 100% da largura do CARTÃO) e a largura
      LIVRE do puxador (`an-fig-livre`, com `--an-img-w` = um NÚMERO já validado pelo servidor) é que
      impõem largura: aí a imagem enche a figura (`width:100%`) e é a figura que manda — é o que torna
      as três medidas deterministas em vez de dependerem do tamanho natural de cada fotografia.
      Quem converte o `--an-img-w` em largura é ESTA regra do app, nunca um estilo vindo da rede. */
.an-fig-p, .an-fig-m, .an-fig-g, .an-fig-livre{width:calc(var(--an-img-w) * 1%);max-width:100%;
  margin:12px auto;}
.an-fig{--an-img-w:100}
.an-fig-p{--an-img-w:25}
.an-fig-m{--an-img-w:50}
.an-fig-g{--an-img-w:100}
.an-fig-p > .an-img, .an-fig-m > .an-img, .an-fig-g > .an-img, .an-fig-livre > .an-img{width:100%;height:auto;}
.an-fig-p > .an-img{max-height:150px;}
.an-fig-m > .an-img{max-height:300px;}
.an-fig-g > .an-img{max-height:560px;}
.an-fig figcaption{text-align:center;}

/* 3) O editor: os três botões do tamanho e o puxador da largura livre. */
.an-imctl{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0 2px;padding:8px 10px;
  border:1px dashed var(--line);border-radius:10px;background:var(--bg);}
.an-ctl-lbl{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em;}
.an-imctl .an-tam.on{background:var(--accent);border-color:var(--accent);color:#fff;}
.an-ctl-w{font-size:12.5px;font-weight:700;color:var(--accent);min-width:92px;}
.an-ctl-dica{font-size:12px;color:var(--muted);}
.an-larvao{position:relative;display:inline-block;width:180px;height:20px;border-radius:999px;
  background:#e0e5ee;border:1.5px solid var(--line);cursor:ew-resize;touch-action:none;}
.an-larvao-knob{position:absolute;top:50%;left:8px;width:16px;height:16px;margin-top:-8px;margin-left:-8px;
  border-radius:999px;background:var(--accent);border:2px solid #fff;box-shadow:0 1px 3px rgba(10,20,30,.28);}
.an-clicavel{cursor:pointer;}
.an-sel{outline:2px solid var(--accent);outline-offset:2px;}

/* 4) Cartão de anúncio COLAPSÁVEL: o cabeçalho é o alvo do clique (cursor, fundo no hover, chevron
      ▸/▾) e o cartão fechado fica com UMA linha do texto, sem imagens. */
.an-todos{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 12px;}
.an-cab{justify-content:flex-start;gap:8px;cursor:pointer;border-radius:10px;padding:4px 8px;
  margin:-4px -8px 8px;}
.an-cab:hover{background:var(--accent-soft);}
.an-cab:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.an-chev{flex:0 0 auto;font-size:15px;line-height:1.15;color:var(--muted);}
.an-cab[aria-expanded="true"] .an-chev{color:var(--accent);}
.an-cab .an-meta{margin-left:auto;}
/* ONDA 10: as acções DA PESSOA (Dispensar / Ver todos / Mostrar no Início) vivem no TOPO do cartão, à
   direita dos marcadores e alinhadas com eles. O wrapper trava o clique e o teclado para a acção não
   abrir/fechar o cartão (o cabeçalho inteiro é o alvo do clique, com o `aria-expanded`). */
.an-cab .an-acoes-topo{display:flex;align-items:center;gap:8px;margin-left:8px;flex:0 0 auto;}
.an-resumo{font-size:13.5px;color:var(--muted);margin:0 0 10px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;}
.an-card.an-fechado .an-vistos{display:none;}
.an-card.an-fechado .an-rodape{padding-top:0;}

/* ONDA 9a — o editor notectl (preset full) dentro do compositor de anúncios.
   O notectl vive num shadow root: as regras da app não lhe chegam lá dentro (nem ele estraga o que
   está fora), por isso o que se estiliza aqui é só a CAIXA que o recebe. `min-width:0` é o que
   impede a barra de ferramentas (que não encolhe sozinha) de empurrar a página para 1852 px. */
.an-nc{min-width:0;max-width:100%;border:1.5px solid var(--line);border-radius:12px;
  background:var(--card);padding:4px 8px 8px;margin-top:14px;}
.an-nc notectl-editor{display:block;min-width:0;max-width:100%;}
.an-nc-carrega{padding:10px 2px;}

/* ==== ONDA 11b (2026-09-29): o alvo escolhido numa LISTA e a barra repartida por PESSOA ====
   Regras novas e ESTREITAS: as barras de horas (`.hourbar*`) não são tocadas — o que muda aqui é só
   o que a barra do objetivo ganha por cima (`.obj-fatia`/`.obj-resto`/`.obj-pessoas`). */

/* 1) O bloco da lista de alvos do cartão «ao longo do dia» (o campo novo que o dono pediu). Fica na
      mesma família das linhas de dinheiro do app — rótulo, campo e botão na MESMA linha — e a dica
      ocupa a linha de baixo. */
.obj-alvo-bloco{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;
  padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--bg);}
.obj-alvo-rot{font-size:13px;font-weight:600;color:var(--muted);}
.obj-alvo-sel{flex:1 1 240px;min-width:0;max-width:440px;height:38px;padding:0 10px;font-size:14px;
  border:1.5px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);}
.obj-alvo-bloco .obj-inp{flex:0 1 132px;min-width:96px;}
.obj-alvo-dica{font-size:12.5px;color:var(--muted);flex:1 1 100%;margin:0;line-height:1.4;}
.obj-alvo-vazio{font-size:13.5px;color:var(--muted);margin:0 0 12px;padding:10px 12px;
  border:1.5px dashed var(--line);border-radius:12px;background:var(--bg);}

/* 2) As FATIAS da barra do objetivo: uma por pessoa, com a cor dela. A largura vem do `flex-grow`
      (a fracção que o servidor manda), por isso as fatias + o que falta repartem a pista INTEIRA —
      sem buraco e sem sobreposição. O anel interior dá contraste à fatia nos DOIS temas. */
.obj-fatia,.obj-resto{flex:1 1 0;min-width:0;height:100%;}
.obj-fatia{box-shadow:inset 0 0 0 1px rgba(0,0,0,.30);}
.obj-resto{background:repeating-linear-gradient(115deg,#EAEBF0 0 5px,#F7F8FC 5px 10px);}
.obj-bar .hourbar-track{overflow:hidden;}
/* ONDA 13 (2026-09-29) — o dono: «try to use the same styling as the hours bars (the rounded bend in
   the inner bar)». O raio NÃO se inventa aqui: as fatias levam as MESMAS classes das barras de horas
   (`hourbar-seg.first` / `.end` / `.junta-dir` / `.junta-esq`) e é o CSS delas que desenha as pontas
   (`border-radius:999px`, não um raio em px — a pílula clampa à meia altura) e a dobra na fronteira
   com o hachurado. As juntas INTERIORES entre pessoas ficam DIREITAS (raio 0): uma pílula por fatia
   daria uma fila de comprimidos e separações falsas. Aqui só se repõe o ANEL de contraste da fatia,
   que o `junta-dir` apaga (`box-shadow:none` — sem isto a última fatia ficava sem o anel das outras). */
.obj-fatia.hourbar-seg.junta-dir{box-shadow:inset 0 0 0 1px rgba(0,0,0,.30);}
.hb-chip.partes{background:linear-gradient(90deg,#0f7b6c 0 25%,#2f80ed 25% 50%,#e2574c 50% 75%,#f2a516 75% 100%);}

/* 3) A legenda das pessoas — grelha auto-ajustada (as 11 pessoas do sistema cabem em 3-4 linhas sem
      estourar a largura do cartão) com nome + valor + % e a cor da fatia. */
.obj-pessoas{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:4px 14px;
  margin-top:7px;font-size:12.5px;}
.obj-pessoa{display:flex;align-items:center;gap:6px;min-width:0;}
.obj-pessoa-cor{flex:0 0 auto;width:11px;height:11px;border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.30);}
.obj-pessoa-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--muted);}
.obj-pessoa-val{font-weight:600;color:var(--ink);margin-left:auto;}
.obj-pessoa-pct{color:var(--muted);min-width:34px;text-align:right;}

/* 4) Contraste no tema escuro: as cores das PESSOAS são claras ou escuras conforme quem as escolheu,
      por isso o anel passa a branco e o hachurado ganha os tons do tema. */
[data-theme="dark"] .obj-fatia,[data-theme="dark"] .obj-pessoa-cor{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);}
/* A fatia que fecha em meia-lua leva o anel do TEMA (a regra acima do tema claro tem mais
   especificidade do que a genérica do escuro, por isso o escuro precisa da sua). */
[data-theme="dark"] .obj-fatia.hourbar-seg.junta-dir{box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);}
[data-theme="dark"] .obj-resto{background:repeating-linear-gradient(115deg,#2a3442 0 5px,#222b38 5px 10px);}
/* ===== ONDA 11a — FESTA DE CELEBRAÇÃO (ecrã inteiro) ============================================
   A camada NÃO come a página: `pointer-events:none` deixa todos os cliques ATRAVESSÁ-LA (a app
   continua utilizável com a festa no ecrã) e os dois ouvintes que a fecham vivem em `window`, não num
   véu por cima de tudo. O troféu é o emoji do sistema (nada para descarregar) e a explosão é
   desenhada em `<canvas>` com a nossa própria matemática — este ecrã não faz um único pedido de rede.

   Z-INDEX — a DECISÃO (onda 11c, falha F): a festa fica POR CIMA dos modais da app (9998 > 200).
   É uma celebração de ECRÃ INTEIRO pedida pelo dono, dura poucos segundos e não bloqueia nada (um
   clique em qualquer sítio fecha-a e o clique passa para o que está por baixo). Deixá-la por baixo
   dos modais esconderia o próprio troféu atrás de um diálogo — o contrário do que ela serve.

   O TROFÉU é que fica no centro do ECRÃ (`top:50%` + `translateY(-50%)` na caixa DELE): com o bloco
   todo centrado, o troféu subia ~37 px acima do meio. A mensagem vive numa PLACA escura própria —
   é isso que a mantém legível no tema CLARO (o degradê fraco não chegava). */
.festa-camada{position:fixed;inset:0;z-index:9998;pointer-events:none;
  background:radial-gradient(circle at 50% 45%,rgba(0,0,0,.34),rgba(0,0,0,.10) 55%,rgba(0,0,0,0) 78%);}
.festa-canvas{position:absolute;left:0;top:0;pointer-events:none;}
.festa-centro{position:absolute;inset:0;}
.festa-trofeu-caixa{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  display:flex;justify-content:center;}
.festa-trofeu{font-size:clamp(96px,16vw,200px);line-height:1;filter:drop-shadow(0 10px 26px rgba(0,0,0,.45));
  animation:festaPop .7s cubic-bezier(.2,1.5,.4,1) both;}
.festa-legenda{position:absolute;left:50%;transform:translateX(-50%);top:calc(50% + clamp(56px,8.6vw,108px));
  max-width:min(92vw,760px);display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:10px 18px;border-radius:14px;background:rgba(10,14,20,.72);box-shadow:0 12px 34px rgba(0,0,0,.35);}
.festa-msg{font-size:clamp(22px,3.2vw,34px);font-weight:800;color:#fff;letter-spacing:.3px;
  text-shadow:0 3px 14px rgba(0,0,0,.6);text-align:center;}
.festa-sub{font-size:clamp(14px,1.6vw,18px);font-weight:600;color:#f4f6f8;opacity:.92;
  text-shadow:0 2px 10px rgba(0,0,0,.6);text-align:center;}
@keyframes festaPop{0%{transform:scale(.35) rotate(-12deg);opacity:0}
  60%{transform:scale(1.12) rotate(3deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
/* Quem pediu menos movimento ao sistema não leva animação nenhuma (nem confetes: o JS não os cria). */
@media (prefers-reduced-motion: reduce){.festa-trofeu{animation:none;}}

/* ---- «Repor programa» (Definições) — classe PRÓPRIA e estreita para o botão perigoso (pitfall #18) */
button.big.perigo{background:transparent;border:1.5px solid var(--danger);color:var(--danger);}
button.big.perigo:hover{background:rgba(192,57,43,.10);}
.repor-lista{margin:6px 0 0 0;padding-left:20px;font-size:13.5px;line-height:1.6;color:var(--ink);}
.repor-fica{color:var(--accent);}
.repor-resultado{margin-top:14px;padding:12px 14px;border:1.5px solid var(--ok);border-radius:10px;
  font-size:13.5px;line-height:1.55;background:rgba(30,132,73,.08);}


/* ===== ONDA 19 — a PERCENTAGEM e as «horas a mais» nos DOIS temas ==============================
   `.hb-pct` lia `var(--fg,var(--foreground,#111))` — variáveis que NÃO existem nesta folha, logo a
   cor caía sempre no literal `#111`: sobre o fundo escuro dava 1,02 de contraste (invisível). Passou
   a `var(--ink)`, a variável do tema. O azul das horas a mais (#0b6ea8) também é do tema claro
   (no escuro mede 2,90); aqui ganha o tom claro equivalente. Regras no FIM do ficheiro: as de cor
   das peças usam o atalho `background` e uma regra nova tem de vir depois delas. */
[data-theme="dark"] .hb-pct.over,[data-theme="dark"] .hb-extra{color:#7cc4f0}