:root{--ink:var(--color-text);--muted:var(--color-text-secondary);--line:var(--color-border);--bg:var(--color-bg);--nav:var(--color-nav);--blue:var(--color-primary);--blue-soft:var(--color-primary-soft);--green:var(--color-success);--orange:var(--color-warning);--red:var(--color-danger);--purple:#8d6ce9;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink)}*{box-sizing:border-box}html{scrollbar-gutter:stable}body{margin:0;background:var(--bg)}button,input{font:inherit}button{cursor:pointer}.app-shell{display:flex;min-height:100vh}.sidebar{width:260px;background:var(--nav);color:#d7e0ee;display:flex;flex-direction:column;padding:24px 14px 16px;position:fixed;inset:0 auto 0 0}.brand{color:#fff;text-decoration:none;font-size:46px;font-weight:750;letter-spacing:-1px;display:flex;align-items:center;justify-content:center;gap:12px;padding:0 11px 28px}.brand-mark{display:grid;place-items:center;width:auto;height:52px}.brand-mark img{height:52px;width:auto;display:block}.workspace-label,.menu-label{font-size:10px;font-weight:700;color:#8291a8;letter-spacing:.1em;margin:0 11px 8px}.workspace{width:100%;border:1px solid #2b3c55;border-radius:10px;background:#1a304d;color:#f4f7fb;padding:9px;display:flex;align-items:center;gap:9px;font-size:13px;text-align:left;margin-bottom:24px}.workspace .chevron{margin-left:auto;color:#93a3bb}.avatar{display:inline-grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:#dce8ff;color:#315fbc;font-size:10px;font-weight:800}.avatar.dark{background:#41648f;color:#fff}.menu{overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(157,181,219,.35) transparent}.menu::-webkit-scrollbar{width:8px}.menu::-webkit-scrollbar-track{background:transparent}.menu::-webkit-scrollbar-thumb{background:rgba(157,181,219,.35);border-radius:8px}.menu::-webkit-scrollbar-thumb:hover{background:rgba(157,181,219,.55)}.menu-label{margin-top:22px}.nav-link{display:flex;align-items:center;gap:12px;color:#b6c3d5;text-decoration:none;border-radius:var(--radius-pill);padding:10px 14px;margin:3px 0;font-size:14px}.nav-link>span{font-size:17px;width:17px;text-align:center;color:#9dafc7}.nav-link:hover,.nav-link.active{background:#263e5e;color:#fff}.nav-link.active>span{color:var(--color-accent)}.nav-link b{font-size:10px;background:#344d70;border-radius:10px;padding:2px 6px;margin-left:auto;color:#e7effb}.nav-link b.warning{background:#59452c;color:#ffd496}.sidebar-bottom{margin-top:auto}.help-link{margin-bottom:6px}.user-card{display:flex;align-items:center;gap:9px;color:white;width:100%;padding:10px;background:#1a304d;border:0;border-radius:10px;text-align:left}.user-card strong,.user-card small{display:block;font-size:12px}.user-card small{color:#9bacc1;font-size:10px;margin-top:2px}.user-card>span:last-child{margin-left:auto;color:#9bacc1;font-size:20px}.main-content{margin-left:260px;width:calc(100% - 260px)}.topbar{height:72px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 40px;position:sticky;top:0;z-index:50}.search{display:flex;align-items:center;gap:8px;color:#93a1b3;background:#f6f8fb;border:1px solid #eef1f5;border-radius:var(--radius-pill);width:330px;padding:8px 14px}.search input{background:none;border:0;outline:0;width:100%;font-size:13px}.top-actions{display:flex;align-items:center;gap:13px}.icon-button{border:0;background:transparent;font-size:19px;color:#65758b;position:relative}.icon-button i{position:absolute;width:6px;height:6px;border:2px solid #fff;background:#f15c67;border-radius:50%;top:1px;right:0}.create-button,.outline-button{border:0;border-radius:var(--radius-pill);padding:10px 18px;font-weight:700;font-size:13px}.create-button{background:var(--blue);color:#fff;box-shadow:0 5px 12px var(--color-primary-soft)}.create-button:hover{background:var(--color-primary-hover)}.outline-button{color:#3a4b62;background:#fff;border:1px solid #dfe5ed}.mobile-menu{display:none}.page{max-width:1370px;margin:0 auto;padding:38px 40px 50px}.hidden{display:none}.page-heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:27px}.eyebrow{margin:0 0 7px;color:#7186a5;font-weight:800;font-size:10px;letter-spacing:.11em}.page h1{font-size:29px;letter-spacing:-1px;margin:0 0 7px}.subtitle{color:var(--muted);font-size:14px;margin:0}.notice{display:flex;align-items:center;gap:13px;background:#edf3ff;border:1px solid #d8e4ff;border-radius:10px;padding:14px 16px;color:#385277;margin-bottom:23px;font-size:13px}.notice>span{font-size:21px;color:var(--blue)}.notice p{margin:0}.notice a{margin-left:auto;color:var(--color-primary);font-weight:700;text-decoration:none;white-space:nowrap}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:17px}.metric-card,.panel{background:#fff;border:1px solid var(--line);border-radius:12px}.metric-card{padding:18px;display:flex;gap:13px;min-height:126px}.metric-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-weight:800}.blue{background:var(--blue-soft);color:var(--color-primary)}.orange{background:var(--color-warning-soft);color:var(--color-warning)}.red{background:var(--color-danger-soft);color:var(--color-danger)}.green{background:var(--color-success-soft);color:var(--color-success)}.metric-card p{margin:0 0 9px;color:#68778b;font-size:12px}.metric-card strong{display:block;font-size:24px;letter-spacing:-1px;margin-bottom:5px}.metric-card small{font-size:11px;font-weight:600;color:#8b97a7;letter-spacing:0}.metric-card span{font-size:11px}.positive{color:var(--green)!important}.muted{color:#8792a1!important}.content-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:17px;margin-bottom:17px}.panel{padding:22px}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px}.panel h2{font-size:15px;margin:0 0 5px}.panel-heading p{font-size:12px;color:var(--muted);margin:0}.text-button{color:var(--color-primary);background:none;border:0;text-decoration:none;font-size:12px;font-weight:700;padding:0}.chart{height:183px;display:flex;border-bottom:1px solid var(--line)}.y-axis{display:flex;flex-direction:column;justify-content:space-between;padding:0 10px 20px 0;font-size:10px;color:#98a3b2}.bars{display:flex;align-items:flex-end;justify-content:space-around;flex:1;background:repeating-linear-gradient(to bottom,transparent 0,transparent 43px,#eef1f6 44px)}.bars>div{height:100%;width:38px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px}.bars i{display:block;width:28px;background:#9db8ff;border-radius:6px 6px 0 0}.bars .today i{background:var(--blue)}.bars .empty{opacity:.35}.bars span{font-size:10px;color:#8995a5;height:18px}.legend{display:flex;justify-content:space-between;margin-top:16px;color:#8792a2;font-size:11px}.legend-dot{display:inline-block;background:var(--blue);height:7px;width:7px;border-radius:50%;margin-right:5px}.activity-list{padding:0;margin:0;list-style:none}.activity-list li{display:flex;align-items:flex-start;gap:10px;padding:12px 0;border-top:1px solid #f0f2f5}.activity-list li:first-child{border:0;padding-top:0}.activity-dot{width:8px;height:8px;border-radius:50%;margin-top:5px}.activity-list div{flex:1}.activity-list strong{font-size:12px}.activity-list p{font-size:11px;color:var(--muted);margin:4px 0 0}.activity-list time{font-size:10px;color:#9ba5b2}.table-panel{padding-bottom:8px}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;font-size:12px}th{text-align:left;color:#8a96a7;font-size:10px;letter-spacing:.04em;padding:9px 10px;vertical-align:middle}th[data-sort-key]{cursor:pointer;user-select:none;white-space:nowrap}th[data-sort-key]:hover{color:#526174}th[data-sort-key]::after{content:'⇅';display:inline-block;margin-left:5px;font-size:9px;opacity:.35}th[data-sort-key].sort-active{color:var(--color-primary)}th[data-sort-key].sort-active::after{content:'↑';opacity:1}th[data-sort-key].sort-active.sort-desc::after{content:'↓'}td{padding:13px 10px;border-top:1px solid #edf0f4;color:#526175}td:first-child{color:#25364d;font-weight:650;display:flex;align-items:center;gap:8px}.avatar.small{width:25px;height:25px;background:#dcecff;color:#3f6db7;font-size:8px}.lavender{background:#eee8ff!important;color:#6c56bd!important}.peach{background:#ffe7dc!important;color:#b96442!important}.status{font-size:10px;font-weight:700;padding:5px 8px;border-radius:10px}.active-status{color:#008a65;background:#e6f8f1}.break-status{color:#bd7422;background:#fff2e1}.rejected-status{color:var(--color-danger-text);background:var(--color-danger-soft)}.payroll-code-badge{display:inline-flex;align-items:center;justify-content:center;padding:4px 10px;border-radius:var(--radius-pill);background:#eef2ff;color:#4338ca;font-size:11px;font-weight:700;white-space:nowrap}.payroll-code-badge.payroll-code-badge-empty{background:#f1f5f9;color:#94a3b8;font-weight:600}.payroll-code-badge.payroll-code-badge-pending{background:#fff7e6;color:#a6650b}.empty-page{text-align:center;padding:75px 25px}.empty-page>span{display:grid;place-items:center;background:#edf3ff;color:var(--blue);width:48px;height:48px;border-radius:14px;margin:0 auto 14px;font-size:22px}.empty-page h2{font-size:18px}.empty-page p{color:var(--muted);font-size:13px;margin:0}dialog{border:0;border-radius:16px;padding:28px;width:min(460px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow-y:auto;box-shadow:0 20px 60px #14274455;color:var(--ink);scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.25) transparent}dialog::-webkit-scrollbar{width:8px}dialog::-webkit-scrollbar-track{background:transparent}dialog::-webkit-scrollbar-thumb{background:rgba(15,23,42,.2);border-radius:8px}dialog::-webkit-scrollbar-thumb:hover{background:rgba(15,23,42,.35)}dialog::backdrop{background:#0d1a2b66}.dialog-close{position:absolute;right:18px;top:15px;border:0;background:transparent;font-size:25px;color:#8490a0}.quick-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}.quick-actions button{border:1px solid var(--line);border-radius:10px;background:#fff;padding:15px 10px;text-align:left}.quick-actions button:hover{border-color:#a9c0ff;background:#f6f8ff}.quick-actions span,.quick-actions strong,.quick-actions small{display:block}.quick-actions span{font-size:22px;margin-bottom:10px}.quick-actions strong{font-size:13px}.quick-actions small{color:var(--muted);font-size:10px;margin-top:4px;line-height:1.35}@media(max-width:1050px){.metric-grid{grid-template-columns:repeat(2,1fr)}.content-grid{grid-template-columns:1fr}.sidebar{width:225px}.main-content{margin-left:225px;width:calc(100% - 225px)}}@media(max-width:720px){.sidebar{transform:translateX(-100%);transition:.2s;z-index:60;width:260px}.sidebar.open{transform:none}.main-content{margin:0;width:100%}.mobile-menu{display:block}.topbar{padding:0 18px;gap:12px}.search{width:auto;flex:1}.search input{min-width:0}.page{padding:28px 18px}.page-heading{align-items:flex-start;gap:14px}.page-heading .outline-button{display:none}.notice{align-items:flex-start}.notice a{display:none}.metric-grid{grid-template-columns:1fr}.top-actions .icon-button{display:none}.create-button{white-space:nowrap}.table-panel{padding:18px 8px}.table-panel .panel-heading{padding:0 10px}th,td{white-space:nowrap}}
.timesheet-responsible-heading{display:grid;gap:3px;margin-top:10px;padding-top:16px;border-top:1px solid var(--line)}
.timesheet-responsible-heading strong{color:var(--ink);font-size:13px}
.timesheet-responsible-heading small{color:var(--muted);font-size:11px;font-weight:500}
/* RODAPÉ DE DIÁLOGO SEMPRE ALCANÇÁVEL.

   Em tela baixa — notebook pequeno, janela dividida, zoom do navegador — os
   diálogos longos empurravam Cancelar/Confirmar para fora do campo de visão, e
   só rolando até o fim se chegava neles. O rodapé fixo resolve para todos de
   uma vez, em vez de um remendo por diálogo (existia um só para mobile, em
   people.css, e outro só para o de ocorrência).

   As margens negativas cancelam o padding do contêiner para a barra encostar
   nas bordas; por isso os seletores são explícitos quanto ao PAI: só valem
   onde esse padding é o do diálogo, e `:last-child` garante que não há
   conteúdo depois para a margem negativa cobrir.

   `position:sticky` funciona aqui porque o invólucro (o <form>) começa bem
   acima: a barra tem toda a altura do formulário para deslizar.

   O fundo é o véu claro dos menus da Apple: desfoque curto, sem linha. */
dialog{--dialog-pad-x:28px;--dialog-pad-b:28px;--dialog-footer-gap:34px}
dialog :is(form,.dialog-scroll,.vacation-dialog-scroll,.termination-dialog-scroll) > :is(.form-actions,.vacation-form-actions,.termination-form-actions,.termination-detail-actions):last-child,
dialog > :is(.form-actions,.vacation-form-actions,.termination-form-actions,.termination-detail-actions):last-child{
  position:sticky;
  bottom:calc(var(--dialog-pad-b) * -1);
  margin:var(--dialog-footer-gap) calc(var(--dialog-pad-x) * -1) calc(var(--dialog-pad-b) * -1);
  padding:16px var(--dialog-pad-x) var(--dialog-pad-b);
  border:0;
  background:rgba(251, 251, 253, .84);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  /* 4 cobre os rótulos flutuantes (3), mas continua abaixo de menus e
     calendários abertos (12+) e das dicas contextuais (45). */
  z-index:4;
}
@media (prefers-reduced-transparency: reduce) {
  dialog :is(form,.dialog-scroll,.vacation-dialog-scroll,.termination-dialog-scroll) > :is(.form-actions,.vacation-form-actions,.termination-form-actions,.termination-detail-actions):last-child,
  dialog > :is(.form-actions,.vacation-form-actions,.termination-form-actions,.termination-detail-actions):last-child{
    background:#fff;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
}
@media(max-width:720px){dialog{--dialog-pad-x:18px;--dialog-pad-b:23px;--dialog-footer-gap:28px}}

/* Diálogo de crédito de folga compensatória.

   Cada modo diz o que credita E o que faz com as marcações do dia — reprovar
   todas, editar a última, ou nada. Esconder esse efeito atrás de uma caixa de
   seleção fazia alguém descobrir que o dia foi reprovado só depois de
   confirmar. */
.comp-time-modes{display:grid;gap:8px;margin:4px 0 14px;padding:0;border:0}
.comp-time-modes legend{padding:0;margin-bottom:8px;color:var(--ink);font-size:12px;font-weight:750}
.comp-time-mode{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;
  margin:0;padding:11px 13px;border:1px solid #dfe5ed;border-radius:12px;background:#fff;cursor:pointer;
}
.comp-time-mode:hover{border-color:#a9c0ff;background:#fbfcff}
.comp-time-mode:has(input:checked){border-color:var(--blue);background:#f2f6ff}
.comp-time-mode input{width:15px;margin:0;accent-color:var(--blue)}
.comp-time-mode-body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:baseline;min-width:0}
.comp-time-mode-body strong{color:var(--ink);font-size:13px}
.comp-time-mode-body b{justify-self:end;color:var(--blue);font-size:13px;font-variant-numeric:tabular-nums}
.comp-time-mode-body small{grid-column:1/-1;color:var(--muted);font-size:11px;line-height:1.4}
/* A dica reaproveita .timeline-legend-tip (records-daycard.css) — mesmo
   balão já usado na legenda das marcações, em vez de um tratamento novo. */
.comp-time-tip{flex:none;cursor:help}
.comp-time-tip .timeline-legend{width:280px;max-width:min(280px,70vw);font-size:11px;line-height:1.5;color:#42546c;font-weight:500}

.comp-time-amount-field{display:grid;gap:6px;font-size:12px;font-weight:750;color:var(--ink)}
.comp-time-amount-field input{font-size:15px;font-weight:700}

/* O que vai acontecer com o dia, em texto, antes de confirmar. */
.comp-time-effect{
  margin:9px 0 14px;padding:11px 13px;border-radius:11px;
  background:#f4f7fb;color:#4a5c74;font-size:11.5px;line-height:1.55;
}
.comp-time-effect strong{color:var(--ink)}
.comp-time-effect b{font-variant-numeric:tabular-nums}
.comp-time-effect.is-reject{background:#fff5f5;color:#8d4a4a}
.comp-time-effect.is-reject strong{color:#a13636}
.comp-time-effect.is-edit{background:#fff8ee;color:#8a6432}
.comp-time-effect.is-edit strong{color:#9a6410}
.comp-time-effect.is-blocked{background:#f5f6f8;color:#6b7b91}

.comp-time-calculator{margin:0 0 14px;padding:0;border:1px solid #dce5f1;border-radius:12px;background:#f8fbff}
.comp-time-calculator summary{padding:12px;cursor:pointer;list-style:none}
.comp-time-calculator summary::-webkit-details-marker{display:none}
.comp-time-calculator summary::after{content:'▾';float:right;color:#8ea3c0;font-size:11px}
.comp-time-calculator[open] summary::after{content:'▴'}
/* O título e a explicação eram <strong>+<small> sem display definido e saíam
   grudados na mesma linha ("Calculadora de compensaçãoSimule o crédito…"). */
.comp-time-calculator summary strong{display:block;color:var(--ink);font-size:13px}
.comp-time-calculator summary small{display:block;margin-top:3px;color:var(--muted);font-size:11px;line-height:1.45}
.comp-time-calculator-body{display:grid;grid-template-columns:minmax(140px,1fr) minmax(140px,1fr);gap:10px;padding:0 12px 12px}
.comp-time-calculator-body>label{display:grid;gap:6px;font-size:12px;font-weight:700}
.comp-time-calculator-body output,.comp-time-calculator-body button{grid-column:1/-1}
.comp-time-rate{margin:0;padding:0;border:0}
.comp-time-rate legend{padding:0;margin-bottom:7px;font-size:12px;font-weight:700;color:var(--ink)}
.comp-time-rate label{display:flex;align-items:center;gap:6px;margin:0 0 5px;font-size:12px;font-weight:700}
.comp-time-rate small{color:var(--muted);font-size:10px;font-weight:600}
.comp-time-calculator-body output{padding:9px 11px;border-radius:8px;background:#eaf3ff;color:#27538d;font-size:12px;font-weight:750}
.comp-time-calculator-body button{justify-self:start}

@media(max-width:560px){
  .comp-time-calculator-body{grid-template-columns:1fr}
  .comp-time-mode{grid-template-columns:auto minmax(0,1fr) auto}
}

/* CAMADA DA BARRA SUPERIOR.

   A topbar estava em z-index:2 e, por ser sticky, cria contexto de
   empilhamento: o painel de avisos dentro dela tem z-index:6, mas esse 6 só
   vale DENTRO da topbar — para o resto da página ela inteira vale 2.

   Resultado: qualquer coisa da página com z-index maior pintava por cima do
   painel aberto. E há muita coisa: rótulo flutuante (3), balão de marcação (4),
   menu do card de dia (7 e 8), dica de campo (12), aviso de relatório (20),
   legenda (30), seletor de pessoa (40). O usuário viu pelo rótulo dos filtros
   de Pessoas atravessando o painel (20/08/2026).

   50 fica acima de todos eles. O menu lateral do mobile vai a 60 porque ele
   PRECISA cobrir a topbar quando abre — é sobreposição desejada, não acidente.
   Há teste: tools/test-camada-topbar-20260821.mjs */