.people-panel{padding:0}.people-toolbar{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line)}.people-search{width:320px}.people-count{font-size:12px;color:var(--muted)}.people-panel table{min-width:790px}.people-panel td:last-child{text-align:right}.row-button{border:0;background:#f1f4f9;color:#49617e;border-radius:var(--radius-pill);padding:6px 12px;font-size:11px;font-weight:700}.status.inactive-status{background:#f0f2f5;color:#778495}.status.leave-status{background:#fff2e1;color:#b87526}.empty-state{text-align:center;padding:64px 20px}.empty-state>span{font-size:30px;color:var(--blue)}.empty-state h2{font-size:17px;margin:10px 0 5px}.empty-state p{font-size:13px;color:var(--muted);margin:0}.employee-dialog{width:min(700px,calc(100vw - 32px));max-height:90vh;overflow:hidden;padding:0;border-radius:var(--radius-card)}.employee-dialog>.dialog-scroll{max-height:90vh;overflow-y:auto;padding:28px;scrollbar-gutter:stable}.employee-dialog h2{margin:0;font-size:22px}.dialog-subtitle{color:var(--muted);font-size:12px;margin:7px 0 21px}.form-section{border-top:1px solid var(--line);padding:19px 0}.form-section h3{font-size:13px;margin:0 0 14px}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.form-grid label{color:#526174;font-size:12px;font-weight:650}.form-grid input:not([type="checkbox"]):not([type="radio"]),.form-grid select{display:block;width:100%;margin-top:6px;border:1px solid #dce3ec;border-radius:7px;padding:9px 10px;background:white;color:var(--ink);font-size:13px;outline-color:var(--color-focus)}.form-grid .span-2{grid-column:span 2}.toggle-field{display:flex;align-items:center;gap:8px}.toggle-field input{width:15px;margin:0;accent-color:var(--blue)}.form-actions{display:flex;justify-content:flex-end;gap:10px;padding-top:5px}
.form-grid .field-help{display:block;margin-top:5px;font-size:11px;font-weight:600;color:var(--muted)}
.people-panel tbody tr{vertical-align:middle}.people-panel tbody td{vertical-align:middle}.people-panel tbody td:first-child{display:table-cell!important;vertical-align:middle!important;white-space:nowrap}.people-panel tbody td:first-child .avatar.small{display:inline-grid;vertical-align:middle;margin-right:8px}.people-panel tbody td:first-child{line-height:1.25}
.form-grid .field-help.field-ok{color:var(--color-primary)}
.form-grid .field-help.field-error{color:var(--color-danger-text,#c0392b)}@media(max-width:720px){.people-toolbar{padding:14px}.people-search{width:100%}.people-count{display:none}.employee-dialog>.dialog-scroll{padding:23px 18px}.form-grid{grid-template-columns:1fr}.form-grid .span-2{grid-column:span 1}.form-actions button{flex:1}}

/* Ações agrupadas no cabeçalho e filtros seguindo a mesma ordem visual das
   colunas Cargo, Jornada e Situação. */
.people-page-actions{display:flex;align-items:center;gap:8px}
.people-panel .people-toolbar{display:grid;grid-template-columns:minmax(280px,1fr) auto max-content;align-items:center;gap:12px}
.people-panel .people-toolbar .people-search{grid-column:auto;width:100%;min-width:0}
.people-filters{display:grid;grid-template-columns:repeat(3,minmax(140px,165px)) max-content;align-items:center;gap:8px}
.people-filters select{width:100%;min-width:0;border:1px solid #dce3ec;border-radius:var(--radius-pill);padding:8px 30px 8px 11px;background:#fff;color:#41536a;font-size:11px;font-weight:650}
.people-clear-filters{grid-column:auto;border:0;background:transparent;color:var(--color-primary);font-size:11px;font-weight:750;padding:7px 4px}
.people-count{grid-column:auto;justify-self:end;white-space:nowrap}

/* A Central usa o mesmo diálogo rolável dos cadastros. Antes ela recebia
   padding:0 de .employee-dialog, mas não tinha .dialog-scroll, cortando o topo. */
.signature-center-dialog{position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);margin:0!important;width:min(1100px,calc(100vw - 40px));max-width:calc(100vw - 40px);max-height:min(92vh,850px)}
.signature-center-dialog.signature-center-inline{position:relative!important;inset:auto!important;transform:none!important;width:100%!important;max-width:1370px;max-height:none;margin:0 auto!important;border-radius:0;box-shadow:none}
.signature-center-dialog.signature-center-inline>.signature-center-scroll{max-height:none;padding:0}
.signature-center-inline .people-section-tabs{margin:-6px 0 18px}
.signature-center-dialog>.signature-center-scroll{max-height:min(92vh,850px);padding:28px}
.signable-position-dialog{width:min(1100px,calc(100vw - 40px));max-width:calc(100vw - 40px);max-height:min(92vh,880px)}
.signable-position-dialog>.dialog-scroll{max-height:min(92vh,880px);padding:22px}
.signable-position-layout{display:flex;gap:20px;align-items:flex-start}
.signable-position-main{flex:1;min-width:0}
#signablePositionMainWrap{position:relative;border:1px solid var(--line);border-radius:8px;overflow:auto;height:min(80vh,850px);display:flex}
#signablePositionCanvas{margin:auto}
.signable-position-zoom{position:absolute;top:10px;right:10px;z-index:2;display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:var(--radius-pill);padding:4px 6px;box-shadow:0 2px 10px rgba(15,23,42,.15)}
.signable-position-zoom button{width:24px;height:24px;border:0;border-radius:50%;background:#eef2f7;color:var(--ink);font-size:15px;font-weight:700;line-height:1;cursor:pointer}
.signable-position-zoom button:hover{background:#dde5ef}
.signable-position-zoom span{min-width:38px;text-align:center;font-size:11px;font-weight:700;color:#526174}
.signable-position-sidebar{width:260px;flex:0 0 260px;display:flex;flex-direction:column;gap:10px;max-height:min(80vh,850px);overflow-y:auto;padding-right:2px}
.signable-position-sidebar h2{margin:0;font-size:18px}
.signable-position-sidebar .dialog-subtitle{margin:2px 0 4px}
.signable-position-thumbs-label{margin:4px 0 0;font-size:11px;font-weight:700;color:var(--muted)}
.signable-position-thumbs-vertical{display:flex;flex-direction:column;align-items:center;gap:6px;max-height:220px;overflow-y:auto;padding:2px}
.signable-position-sidebar-actions{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:8px}
.signable-position-sidebar-actions .create-button,.signable-position-sidebar-actions .outline-button{width:100%}
.signature-center-toolbar{display:flex!important;gap:12px;align-items:center}
.signature-center-section,#signatureCenterDialog .table-panel{padding:0}
.signature-center-inline{align-self:stretch;min-height:calc(100vh - 72px)}
.signature-center-inline>.signature-center-scroll{width:100%;min-height:calc(100vh - 72px)}
#signatureCenterDialog .table-panel,#signatureCenterDialog .signature-center-section{min-height:480px}
#signatureCenterDialog tbody td{height:58px;vertical-align:middle}
#signatureCenterDialog tbody td:first-child{display:table-cell!important;vertical-align:middle!important}
#signatureCenterDialog tbody td:first-child>strong{display:inline-flex;align-items:center;min-height:28px}
#relatoriosAssinaturasPanel tbody td,
#recibosAssinaturasPanel tbody td{height:58px;vertical-align:middle}
#relatoriosAssinaturasPanel tbody td:first-child,
#recibosAssinaturasPanel tbody td:first-child{display:table-cell!important;vertical-align:middle!important}
#relatoriosAssinaturasPanel tbody td:first-child>strong,
#recibosAssinaturasPanel tbody td:first-child>strong{display:inline-flex;align-items:center;min-height:28px}
.signature-center-section .panel-heading{align-items:center;padding:18px 22px;margin-bottom:0;border-bottom:1px solid var(--line)}
.signature-center-toolbar .people-search{flex:1;width:auto}
.signature-center-toolbar select{min-width:180px;padding:9px 12px;border:1px solid #cbd5e1;border-radius:8px;font-size:12px;color:#334155;background:#fff}
.signature-center-table{margin:16px 0 0}
.signature-center-table table{min-width:800px}
.signature-center-actions{display:flex;justify-content:flex-end;gap:6px;white-space:nowrap}
.signature-center-actions .outline-button{margin:0!important;padding:6px 9px!important;font-size:11px!important}
.signature-proof-btn{color:#2563eb;border-color:#93c5fd!important;background:#eff6ff!important}
.signature-proof-btn:hover{background:#dbeafe!important;border-color:#60a5fa!important}
.signature-locked-note{display:inline-flex;align-items:center;justify-content:center;padding:6px 8px;border-radius:8px;background:#f1f5f9;color:#64748b;font-size:10px;font-weight:700}
/* Centralização: este diálogo tem posicionamento próprio (inset 50% +
   translate(-50%,-50%)). A compensação da faixa lateral usa a propriedade
   independente `translate` em ui-refinement.css, então não substitui esta
   transform e continua aplicada durante o fade de saída. Largura reduzida
   ~30% (560 → 392px) a pedido do usuário: o card ocupava quase a tela inteira. */
.signature-photo-dialog,
.signature-photo-dialog:modal{position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);margin:0!important;width:min(392px,calc(100vw - 32px));max-height:90vh;padding:24px;border:0;border-radius:18px;box-shadow:0 26px 70px rgba(15,23,42,.3)}
.signature-photo-dialog::backdrop{background:rgba(15,23,42,.58)}
.signature-photo-frame{position:relative;display:flex;align-items:center;justify-content:center;min-height:224px;margin-top:18px;overflow:hidden;border:1px solid #dbe4ef;border-radius:14px;background:#0f1f33}
.signature-photo-frame img{display:none;width:100%;max-height:43vh;object-fit:contain}
.signature-photo-frame.is-loaded img{display:block}
.signature-photo-frame.is-loaded .signature-photo-loading{display:none}
.signature-photo-loading{display:flex;flex-direction:column;align-items:center;gap:9px;color:#cbd5e1;font-size:12px}

/* ---- Card de foto do ponto (#pointPhotoDialog) ----
   Mesma anatomia da moldura de assinatura: a imagem só aparece depois de
   carregada, e no lugar dela fica um indicador de progresso. Antes o <img>
   nascia com src="" e o navegador desenhava o ícone de imagem quebrada até a
   foto chegar. A largura cabe o ID e o modelo do aparelho ao lado da foto. */
.photo-dialog .photo-frame{position:relative;display:flex;align-items:center;justify-content:center;min-height:168px;margin-top:16px;overflow:hidden;border-radius:12px;background:#0d1a2b}
.photo-dialog .photo-frame img{display:none;width:100%;max-height:280px;object-fit:contain}
.photo-dialog .photo-frame.is-loaded img{display:block}
.photo-dialog .photo-frame.is-loaded .photo-frame-loading{display:none}
.photo-dialog.camera-dialog{width:min(340px,calc(100vw - 32px))}
.point-photo-device{display:grid;grid-template-columns:42px 1fr;gap:4px 14px;margin-top:14px;padding:10px 12px;border-radius:10px;background:#f4f7fb}
.point-photo-device.hidden{display:none}
.point-photo-device small{display:block;font-size:10px;font-weight:700;letter-spacing:.06em;color:#6d7d92}
.point-photo-device strong{display:block;margin-top:2px;font-size:13px;color:#17253a;word-break:break-word}
.photo-frame-loading{display:flex;flex-direction:column;align-items:center;gap:9px;color:#cbd5e1;font-size:12px}

/* Um anel girando é o sinal de "está vindo" que o ícone de imagem quebrada
   dava invertido: parecia falha permanente. */
.photo-spinner{display:block;width:26px;height:26px;border:2.5px solid rgba(203,213,225,.28);border-top-color:#cbd5e1;border-radius:50%;animation:photo-spin .8s linear infinite}
.signature-photo-frame.is-error .photo-spinner,
.photo-dialog .photo-frame.is-error .photo-spinner{display:none}
@keyframes photo-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.photo-spinner{animation-duration:2.4s}}
.signature-photo-retention{margin:14px 0 0;padding:11px 13px;border-radius:10px;background:#f8fafc;color:#475569;font-size:12px;line-height:1.45}

@media(max-width:1050px){
  .people-panel .people-toolbar{grid-template-columns:1fr}
  .people-panel .people-toolbar .people-search{grid-column:auto}
  .people-filters{display:flex;justify-content:flex-start;flex-wrap:wrap}
  .people-filters select{width:auto;min-width:145px}
  .people-clear-filters,.people-count{grid-column:auto}
  .people-count{justify-self:start}
}
@media(max-width:720px){
  .people-page-actions{align-items:stretch;flex-direction:column}
  .people-page-actions button{width:100%}
  .people-filters{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .people-filters select{max-width:none;width:100%}
  .people-clear-filters{grid-column:1/-1;justify-self:start}
  .signature-center-dialog{width:calc(100vw - 20px)}
  .signature-center-dialog>.signature-center-scroll{padding:22px 16px}
  .signature-center-inline>.signature-center-scroll{padding:0}
  .signature-center-toolbar{align-items:stretch;flex-direction:column}
  .signature-center-toolbar select{width:100%}
  .signable-position-dialog{width:calc(100vw - 20px)}
  .signable-position-dialog>.dialog-scroll{padding:18px 14px}
  .signable-position-layout{flex-direction:column}
  .signable-position-sidebar{width:100%;flex:none;max-height:none}
  #signablePositionMainWrap{height:min(50vh,520px)}
  .signature-center-actions{align-items:flex-end;flex-direction:column}
  .signature-photo-dialog{padding:22px 18px}
  .signature-photo-frame{min-height:260px}
}

/* O cartão da empresa também navega para Configurações e precisa preservar
   nome fantasia/código em duas linhas mesmo antes de app.js terminar de abrir. */
.workspace{text-decoration:none;cursor:pointer}
.workspace:hover,.workspace.active{border-color:#44658f;background:#203a5d}
.workspace-details{display:flex;min-width:0;flex:1;flex-direction:column;align-items:flex-start;gap:3px}
.workspace-details strong{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:700;line-height:1.2}
.workspace-details small{display:block;color:#9dafc7;font-size:9px;line-height:1.25}
.employee-schedule-planned{display:block;margin-top:3px;color:#315fd4;font-size:9px;font-weight:700;white-space:nowrap}

/* Fase 2 — autorização de dispositivos (2026-08-04). */
#employeeDeviceAuthHint{margin:8px 0 12px}
#employeeDevicesList{display:grid;gap:8px;margin-top:6px}
.employee-device-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#f8fafc}
.employee-device-row>div:first-child{flex:1;min-width:0}
.employee-device-row strong{display:block;font-size:12px;color:var(--ink)}
.employee-device-row small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.employee-device-row small.device-twin-warning{margin-top:6px;padding:6px 8px;border-left:3px solid #b8730d;border-radius:0 6px 6px 0;background:#fff9ef;color:#8a5808;font-weight:700;line-height:1.4}
.employee-device-actions{display:flex;gap:6px;flex:none}
.employee-device-actions .outline-button{padding:6px 10px!important;font-size:11px!important;margin:0!important}

/* Jornada e acessos — as duas autorizações ficam recolhidas por padrão para
   o perfil não virar um modal longo. Um único bloco permanece aberto. */
.employee-access-section>.employee-access-intro{margin:0 0 12px}
.employee-access-accordions{display:grid;gap:10px}
.employee-access-disclosure{overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#fff}
.employee-access-disclosure>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;cursor:pointer;list-style:none;user-select:none}
.employee-access-disclosure>summary::-webkit-details-marker{display:none}
.employee-access-disclosure>summary>span{display:grid;gap:3px;min-width:0}
.employee-access-disclosure>summary strong{color:var(--ink);font-size:13px}
.employee-access-disclosure>summary small{color:var(--muted);font-size:11px;line-height:1.35}
.employee-access-disclosure>summary svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;transition:transform .18s ease}
.employee-access-disclosure[open]>summary svg{transform:rotate(180deg)}
.employee-access-disclosure[open]>summary{background:#f8fafc}
.employee-access-body{padding:16px;border-top:1px solid var(--line)}
.employee-access-description{margin:0 0 14px;color:var(--muted);font-size:12px;line-height:1.55}
.employee-activation-generate{margin:0!important}
.employee-activation-result{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 14px;align-items:center;margin-top:14px;padding:14px;border:1px solid #cbdcff;border-radius:10px;background:#f5f8ff}
.employee-activation-result.hidden{display:none}
.employee-activation-result>span{color:var(--muted);font-size:10px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.employee-activation-result>strong{grid-column:1;color:var(--ink);font-size:24px;letter-spacing:.16em;line-height:1.1}
.employee-activation-result>small{grid-column:1;color:var(--muted);font-size:10px}
.employee-activation-result>button{grid-column:2;grid-row:1/4;align-self:center;white-space:nowrap}
.employee-activation-message{min-height:16px;margin:10px 0 0}
.employee-document-devices{display:grid;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.employee-document-devices>div:first-child h4{margin:0;color:var(--ink);font-size:13px}
.employee-document-devices>div:first-child p{margin:4px 0 0;color:var(--muted);font-size:11px;line-height:1.45}
#employeeDocumentDevicesList{display:grid;gap:8px}
.employee-document-device-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px 12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:10px;background:#f8fafc}
.employee-document-device-row.is-revoked{opacity:.72}
.employee-document-device-main{min-width:0}
.employee-document-device-main strong{display:block;color:var(--ink);font-size:12px}
.employee-document-device-main small{display:block;margin-top:3px;color:var(--muted);font-size:10px;line-height:1.35}
.employee-document-device-row>.status{font-size:10px}
.employee-document-device-row>.outline-button{grid-column:2;justify-self:end;margin:0!important;padding:6px 10px!important;font-size:10px!important}

@media(max-width:560px){
  .employee-access-disclosure>summary{padding:13px}
  .employee-access-body{padding:13px}
  .employee-activation-result{grid-template-columns:1fr}
  .employee-activation-result>button{grid-column:1;grid-row:auto;justify-self:start;margin-top:6px}
  .employee-document-device-row{grid-template-columns:1fr}
  .employee-document-device-row>.status,.employee-document-device-row>.outline-button{grid-column:1;justify-self:start}
}

/* Recibos de pagamento em lote — diálogo mais largo (a tabela de
   revisão tem 5 colunas + notas, apertava demais no .employee-dialog
   padrão de 700px, forçando rolagem lateral com espaço sobrando na
   tela) e visual modernizado (pedido do usuário: os selects/inputs da
   revisão pareciam "estilo padrão do navegador", destoando do resto do
   app). 2026-08-06. */
/* Largura da tabela. O card em si é o vacation-dialog: a barra de cima e o
   rodapé grudam na div que rola. As duas classes juntas vencem a largura
   de 720px do card de férias. */
.vacation-dialog.payroll-batch-dialog{width:min(980px,calc(100vw - 40px));max-width:calc(100vw - 40px)}
/* O mês abre o calendário para baixo. Sem este piso o painel passa da borda
   e o card ganha rolagem só para mostrar o fim da grade. A revisão longa
   continua rolando: isto é só a altura mínima. */
#sendPayrollBatchDialog{min-height:min(410px,calc(100vh - 34px))}
#sendPayrollBatchDialog .vacation-dialog-scroll{min-height:inherit}
/* O feixe marca a ação da vez. Em Analisar, enquanto há PDF sem leitura.
   Em Confirmar e enviar, enquanto o lote pode sair. O gradiente gira só
   na faixa de 1,5px: o miolo é fosco, com blur, para o botão não sumir
   no branco do card. */
#sendPayrollBatchDialog :is(#analyzePayrollBatchBtn, #submitSendPayrollBatch).is-beam{
  position:relative;
  padding:1.5px;
  overflow:hidden;
  border:0;
  background:transparent;
  color:#34475f;
  box-shadow:0 8px 20px rgba(23,41,64,.12)
}
#sendPayrollBatchDialog :is(#analyzePayrollBatchBtn, #submitSendPayrollBatch).is-beam:not(:disabled):hover{
  border-color:transparent;
  background:transparent;
  color:#34475f;
  transform:none;
  box-shadow:0 8px 20px rgba(23,41,64,.12)
}
@property --beam-angle{
  syntax:"<angle>";
  inherits:false;
  initial-value:0deg
}
#sendPayrollBatchDialog :is(#analyzePayrollBatchBtn, #submitSendPayrollBatch).is-beam::before{
  content:"";
  position:absolute;
  inset:0;
  padding:1.5px;
  border-radius:inherit;
  background:conic-gradient(from var(--beam-angle),transparent 0 72%,var(--color-primary,#416eec) 84%,#eef3ff 90%,transparent 96%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
  animation:payroll-analyze-beam 3s linear infinite
}
#sendPayrollBatchDialog :is(#analyzePayrollBatchBtn, #submitSendPayrollBatch).is-beam > span{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:calc(var(--ui-control-height,42px) - 3px);
  padding:0 16px;
  border-radius:inherit;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px)
}
@keyframes payroll-analyze-beam{to{--beam-angle:1turn}}
@media (prefers-reduced-motion:reduce){
  #sendPayrollBatchDialog :is(#analyzePayrollBatchBtn, #submitSendPayrollBatch).is-beam::before{display:none}
  #sendPayrollBatchDialog :is(#analyzePayrollBatchBtn, #submitSendPayrollBatch).is-beam{box-shadow:inset 0 0 0 1.5px var(--color-primary,#416eec),0 8px 20px rgba(23,41,64,.12)}
}
@media (prefers-reduced-transparency:reduce){
  #sendPayrollBatchDialog :is(#analyzePayrollBatchBtn, #submitSendPayrollBatch).is-beam > span{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
}
#sendPayrollBatchDialog .payroll-file-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:end
}
#sendPayrollBatchDialog .payroll-file-row > label{min-width:0}
@media (max-width:720px){
  #sendPayrollBatchDialog .payroll-file-row{grid-template-columns:1fr}
  #sendPayrollBatchDialog .payroll-file-row > button{justify-self:start}
}
/* O navegador pinta o preenchimento automático de azul (#e8f0fe). O inset
   branco cobre essa tinta; `background` sozinho não vence o autofill. O
   rótulo não leva fundo: ele fica acima da borda, fora dessa tinta. */
#sendPayrollBatchDialog #payrollBatchTitle{background:#fff}
#sendPayrollBatchDialog #payrollBatchTitle:-webkit-autofill,
#sendPayrollBatchDialog #payrollBatchTitle:-webkit-autofill:hover,
#sendPayrollBatchDialog #payrollBatchTitle:-webkit-autofill:focus{
  -webkit-text-fill-color:#263a53;
  caret-color:#263a53;
  box-shadow:0 0 0 1000px #fff inset;
  transition:background-color 9999s ease-out}
#sendPayrollBatchDialog #payrollBatchTitle:-webkit-autofill:focus{
  box-shadow:0 0 0 1000px #fff inset,0 0 0 3px var(--color-focus)}
#payrollBatchReviewRows td{vertical-align:top;padding:12px 10px}
#payrollBatchReviewRows tr:hover{background:#fafbfd}
/* A régua da linha é a altura do campo (42px): página, eSocial, nome,
   valor, conferência e o interruptor compartilham o mesmo centro.
   A nota fica embaixo e não empurra os vizinhos. */
#payrollBatchReviewRows .payroll-review-align,
#payrollBatchReviewRows .payroll-code-badge-wrap,
#payrollBatchReviewRows .toggle-field{
  display:flex;align-items:center;box-sizing:border-box;
  height:var(--ui-control-height,42px);min-height:var(--ui-control-height,42px)
}
#payrollBatchReviewRows .payroll-code-badge-wrap{justify-content:center}
#sendPayrollBatchDialog #payrollBatchReviewWrap th:nth-child(2),
#payrollBatchReviewRows td:nth-child(2){text-align:center}
/* Porcentagem, não rem: a soma das colunas em rem passava da largura do
   card estreito e a coluna do nome ia a zero. O nome fica com o resto. */
#sendPayrollBatchDialog #payrollBatchReviewWrap th:nth-child(1){width:20%}
#sendPayrollBatchDialog #payrollBatchReviewWrap th:nth-child(2){width:11%}
#sendPayrollBatchDialog #payrollBatchReviewWrap th:nth-child(3){width:20%}
#sendPayrollBatchDialog #payrollBatchReviewWrap th:nth-child(4){width:16%}
#sendPayrollBatchDialog #payrollBatchReviewWrap th:nth-child(5){width:17%}
#sendPayrollBatchDialog #payrollBatchReviewWrap th:nth-child(6){width:16%}
#payrollBatchReviewRows td:first-child .payroll-review-align{white-space:nowrap}
/* O select da revisão não tem rótulo flutuante. O vão de 16px do
   invólucro empurrava o nome para baixo do eSocial, do valor e do
   interruptor. A lista continua no invólucro, sem transform nele: transform
   no .select-menu cria uma camada e a linha de baixo cobre as opções. */
#sendPayrollBatchDialog #payrollBatchReviewWrap .select-menu{
  --j-float-label-slot:0px;margin-top:0;padding-top:0
}
#payrollBatchReviewRows select.payroll-review-employee,
#payrollBatchReviewRows input.payroll-review-net-value{
  display:block;box-sizing:border-box;width:100%;
  height:var(--ui-control-height,42px);min-height:var(--ui-control-height,42px);
  padding:0 12px;border:1px solid var(--ui-control-border,#dce3ec);
  border-radius:var(--ui-control-radius,999px);
  background:#fff;color:var(--ink);font-size:12px;outline-color:var(--color-focus)
}
.payroll-review-summary{margin:14px 0 0;padding:11px 14px;border-radius:10px;background:#f8fafc;color:#475569;font-size:12px;font-weight:650}
/* Campo de arquivo do envio de holerite. Mesma pílula do card de férias:
   o botão que o navegador desenha dentro do campo deixa de ser o retângulo
   de canto vivo e o "Nenhum arquivo escolhido" alinha na altura dele. */
/* O rótulo flutuante põe padding no arquivo com !important. Sem isto o botão
   de 29px fica espremido numa caixa de 43px e o "Nenhum arquivo escolhido"
   sai do centro. O desenho é o da pílula de férias e de desligamento. */
#sendPayrollBatchDialog input#payrollBatchFile{
  box-sizing:border-box;
  height:var(--ui-control-height,42px) !important;
  min-height:var(--ui-control-height,42px) !important;
  padding:0 8px !important;
  line-height:var(--ui-control-height,42px) !important;
  border-radius:var(--ui-control-radius,999px);
  color:#5d6b80;font-size:12px;font-weight:650;cursor:pointer}
#sendPayrollBatchDialog input#payrollBatchFile::file-selector-button,
#sendPayrollBatchDialog input#payrollBatchFile::-webkit-file-upload-button{
  margin:0 10px 0 0;padding:0 14px;height:29px;vertical-align:middle;
  border:1px solid var(--ui-control-border,#cbd7e6);border-radius:999px;
  background:#fff;color:#34475f;font:inherit;font-size:11px;font-weight:750;line-height:27px;cursor:pointer;
  transition:color .16s ease,background-color .16s ease,border-color .16s ease}
#sendPayrollBatchDialog #payrollBatchReviewWrap .table-wrap{overflow:visible}
#sendPayrollBatchDialog #payrollBatchReviewWrap table{width:100%;table-layout:fixed}
#sendPayrollBatchDialog #payrollBatchReviewWrap .select-menu,
#sendPayrollBatchDialog #payrollBatchReviewWrap .select-menu-trigger,
#payrollBatchReviewRows select.payroll-review-employee{min-width:0;max-width:100%;width:100%}
#payrollBatchReviewRows .field-help{display:block;overflow-wrap:anywhere}
#sendPayrollBatchDialog input#payrollBatchFile:hover::file-selector-button,
#sendPayrollBatchDialog input#payrollBatchFile:hover::-webkit-file-upload-button{border-color:#b7c8dc;background:#f2f6fc;color:var(--color-primary-hover,#1445cc)}
#sendPayrollBatchDialog input#payrollBatchFile.has-files{color:transparent}
#sendPayrollBatchDialog input#payrollBatchFile.has-files::file-selector-button,
#sendPayrollBatchDialog input#payrollBatchFile.has-files::-webkit-file-upload-button{color:#34475f}
.payroll-file-list{display:flex;flex-direction:column;gap:8px}
.payroll-file-list:empty{display:none}
.payroll-file-chip{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:42px;padding:0 8px 0 14px;box-sizing:border-box;
  border:1px solid var(--ui-control-border,#dce3ec);
  border-radius:var(--ui-control-radius,999px);
  background:#fff;color:#34475f;font-size:12px;font-weight:650
}
.payroll-file-chip span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.payroll-file-chip button{
  display:inline-flex;align-items:center;justify-content:center;align-self:stretch;
  flex:none;width:36px;height:auto;min-height:42px;margin:0;padding:0;
  border:0;border-radius:999px;background:transparent;color:#8b98a8;
  font-size:20px;font-weight:450;line-height:1;cursor:pointer
}
.payroll-file-chip button:hover,
.payroll-file-chip button:focus-visible{background:transparent;color:#d15a5a}
.payroll-diverge-grade{
  display:grid;grid-template-columns:minmax(0,1fr) 6.4rem 6.4rem;
  column-gap:14px;row-gap:6px;margin-top:16px;align-items:center
}
.payroll-diverge-pessoa{
  grid-column:1 / -1;margin:8px 0 0;color:#17253a;font-size:13px;font-weight:750
}
.payroll-diverge-grade>.payroll-diverge-pessoa:first-of-type{margin-top:4px}
.payroll-diverge-coluna{text-align:right;color:#6f84a3;font-size:11px;font-weight:750}
.payroll-diverge-rotulo{color:#526174;font-size:13px}
.payroll-diverge-num{
  text-align:right;color:#17253a;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums
}
#payrollBatchReviewRows tr.payroll-review-repeat{background:#fff7ed}
#payrollBatchReviewRows tr.payroll-review-repeat:hover{background:#fff1e0}
/* styles.css põe display:flex em todo td:first-child. Com o nome do arquivo
   ao lado da página, a célula virava uma linha flex e o nome da pessoa
   saía da régua do eSocial, do valor e do interruptor. A página fica na
   faixa de 42px; o arquivo desce, como a nota debaixo do nome. */
#sendPayrollBatchDialog #payrollBatchReviewRows td:first-child{
  display:table-cell;vertical-align:top
}
#payrollBatchReviewRows .payroll-review-file{
  display:block;margin-top:2px;min-width:0;white-space:normal;overflow-wrap:anywhere;
  font-weight:650;line-height:1.3
}
/* Enquanto o envio não vale (pessoa em duas folhas ou página sem
   pessoa), o botão deixa de parecer clicável. O azul do .create-button
   não muda no :disabled. Salário ou bonificação divergente não trava. */
#sendPayrollBatchDialog .vacation-form-actions{align-items:center}
#sendPayrollBatchDialog .payroll-month-hint{
  margin:0;
  color:var(--color-danger-text,#9d3939);
  font-size:13px;
  font-weight:650;
  line-height:1.2
}
#sendPayrollBatchDialog .payroll-month-hint[hidden]{display:none}
#sendPayrollBatchDialog #submitSendPayrollBatch:disabled,
#sendPayrollBatchDialog #submitSendPayrollBatch:disabled:hover{
  background:#d7dee7;color:#7d8b9c;box-shadow:none;cursor:not-allowed;transform:none
}
#payrollBatchReviewRows .payroll-review-repeat-note[hidden]{display:none}

@media(max-width:720px){
  #payrollBatchReviewRows select.payroll-review-employee{min-width:0}
  #payrollBatchReviewRows td:first-child .payroll-review-align{white-space:normal;height:auto}
}

/* Estado vazio compartilhado: documentos, assinaturas, relatórios e cadastros. */
.empty-state{min-height:160px;display:grid;place-items:center;align-content:center}
.empty-state>.empty-state-icon{display:grid;place-items:center;width:38px;height:38px;border:1px solid #cbdcff;border-radius:12px;background:#f5f8ff;color:var(--blue);font-size:22px;font-weight:700;line-height:1}
.empty-state>p:only-child{display:grid;justify-items:center;gap:10px}
.empty-state>p:only-child::before{content:'◇';display:grid;place-items:center;width:38px;height:38px;border:1px solid #cbdcff;border-radius:12px;background:#f5f8ff;color:var(--blue);font-size:22px;font-weight:700;line-height:1}

/* Ao rolar o cadastro, os títulos das seções chegavam a ser pintados sobre a
   borda superior arredondada do modal. Esta faixa pertence à moldura (fora da
   área rolável) e oculta o conteúdo exatamente antes de ele sair do card. */
#employeeDialog{position:relative}
#employeeDialog::before{
  content:"";
  position:absolute;
  z-index:4;
  top:1px;
  right:12px;
  left:1px;
  height:26px;
  border-radius:17px 17px 0 0;
  background:linear-gradient(to bottom,#fff 0,rgba(255,255,255,.94) 58%,rgba(255,255,255,0) 100%);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  pointer-events:none;
}
#employeeDialog .dialog-close{
  position:fixed;
  z-index:10;
  top:15px;
  right:18px;
}

/* CONTRATO DE EXPERIÊNCIA — o painel das datas calculadas (20/09/2026).

   Fica logo abaixo dos dois campos de duração, na largura inteira. É um
   CONTÊINER, não um campo: raio de caixa (12px), não a pílula dos controles.
   O contrato no papel tem datas, não durações, e quem preenche está com o
   papel na mão — mostrar "termina em 26/10" ao lado do "45" é o que dispensa
   conferir de cabeça a conta mais cara do módulo. */
.contract-preview{grid-column:1/-1;padding:12px 14px;border:1px solid #cfe3ff;border-radius:12px;background:#f3f8ff;color:#315580;font-size:12px;font-weight:600;line-height:1.55}
.contract-preview strong{color:#1d3f6b;font-weight:750}
/* Passar de 90 dias é erro de LEI, não de digitação: âmbar, como a conferência
   de prazos de férias, e nunca vermelho de campo inválido — o número digitado
   não está malformado, o contrato é que não pode existir. */
.contract-preview.is-invalid{border-color:#fed7aa;background:#fff7ed;color:#9a4e05}
.contract-preview-alerta{display:block;margin-top:6px;font-weight:700}
/* Armadilha 8 do spec-design-card: `hidden` perde para um display próprio de
   mesma origem. Estes três nascem escondidos conforme o tipo de contrato. */
.contract-preview[hidden],.contract-probation-field[hidden],.contract-fixed-field[hidden]{display:none}

/* A PRORROGAÇÃO É UM ATO (20/09/2026) — a faixa que a registra.

   Mesma anatomia da `.vacation-date-guard`: texto à esquerda, ação à direita.
   Ela não é um campo, é uma DECISÃO com consequência legal, e por isso não
   mora na grade de campos como um seletor de sim/não — quem prorroga precisa
   ler o que está afirmando antes de clicar. */
.contract-extend{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;border:1px solid #f0cf92;border-radius:12px;background:#fff9ed}
.contract-extend>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.contract-extend strong{color:#845416;font-size:12px}
.contract-extend span{color:#8a6a3c;font-size:11px;line-height:1.45}
.contract-extend .outline-button{min-height:38px;white-space:nowrap}
.contract-extend[hidden]{display:none}
.contract-extend.is-done{border-color:#b9ead9;background:#f5fdf9}
.contract-extend.is-done strong{color:#0a6b50}
.contract-extend.is-done span{color:#3d7a66}
@media(max-width:720px){.contract-extend{grid-template-columns:1fr}.contract-extend .outline-button{width:100%}}

/* Desligado (21/09/2026): as chaves de ponto ficam travadas e esmaecidas. */
.toggle-field.is-disabled{opacity:.55;cursor:not-allowed}
#employeeDesligadoAviso{grid-column:1/-1}
/* Card de reativação (21/09/2026). */
#employeeDesligadoAviso.employee-reativar-card{display:grid;gap:6px;padding:12px 14px;border:1px solid #bfdbfe;border-radius:12px;background:#eff6ff;color:#1e3a8a}
#employeeDesligadoAviso.employee-reativar-card strong{font-size:13px}
#employeeDesligadoAviso.employee-reativar-card button{justify-self:start;margin-top:4px}
/* E-mails ao colaborador (employee-emails.js) */
.employee-email-target{margin:0 0 12px;color:var(--ink);font-size:12px;line-height:1.5}
.employee-email-target span{color:var(--muted)}
.employee-email-target.is-missing{color:#b42318}
#employeeEmailsList{display:grid;gap:8px}
.employee-email-error{color:#b42318!important}
.employee-email-status{justify-self:end;padding:3px 9px;border-radius:999px;font-size:10px;font-weight:700;white-space:nowrap;background:#f2f4f7;color:#475467}
.employee-email-status.is-ok{background:#ecfdf3;color:#067647}
.employee-email-status.is-waiting{background:#eff4ff;color:#1849a9}
.employee-email-status.is-bad{background:#fef3f2;color:#b42318}