:root{
  /* Traço do X do botão de fechar, centrado no próprio viewBox. */
  --ui-close-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.4 1.4 10.6 10.6M10.6 1.4 1.4 10.6' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Jornada — refinamento visual do painel web.
 *
 * Este arquivo e carregado por ultimo para transformar componentes antigos
 * que nasceram em etapas diferentes em uma linguagem visual unica. Mantem
 * os nomes/classes existentes e nao altera nenhum fluxo de negocio.
 */

:root {
  /* Altura, raio e borda vêm de tokens.css. Uma segunda definição aqui
     reduzia apenas parte dos campos para 38px e desalinhava texto, lista e
     calendário quando apareciam na mesma linha. */
  --ui-control-hover: var(--ui-control-border-hover);
  --ui-panel-border: #e3e9f1;
  --ui-panel-shadow: 0 1px 2px rgba(16, 35, 61, .025), 0 8px 26px rgba(16, 35, 61, .045);
  --ui-hover-shadow: 0 10px 26px rgba(16, 35, 61, .09);
  /* Triângulo de alerta — mesmo desenho/traço de EMPTY_STATE_ICONS.error
     (app.js). Usado como máscara CSS pra herdar a cor do texto ao redor,
     em vez de um glifo Unicode com o traço da fonte do sistema. */
  --icon-alert: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>');
}

@media screen {
  /* Estados de primeiro uso nunca podem reaparecer sobre tabelas já
     preenchidas, mesmo quando outro arquivo legado redefine display. */
  .empty-state.hidden {
    display: none !important;
  }

  .table-filter-empty td {
    display: table-cell !important;
    height: 76px;
    padding: 24px !important;
    color: #74849a !important;
    font-size: 12px;
    font-weight: 600 !important;
    text-align: center;
  }

  body {
    color: var(--color-text);
  }

  /* Superficies ------------------------------------------------------- */
  .panel,
  .metric-card,
  .report-card,
  .report-type-card,
  .document-summary-grid article,
  .schedule-card {
    border-color: var(--ui-panel-border);
    border-radius: var(--radius-card);
    box-shadow: var(--ui-panel-shadow);
  }

  .page-heading {
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
  }

  /* Grupo de ações do cabeçalho de página, padronizado a partir de Pessoas
     (26/08). Antes cada tela resolvia por conta: em Jornadas e Registros os
     botões eram filhos DIRETOS de .page-heading, então o `space-between` do
     cabeçalho os espalhava pela faixa inteira — e um deles ainda corrigia a
     folga com `margin-right` no próprio botão. Agrupados, a distância entre
     eles é uma só e a âncora é a borda direita, em todas as telas.

     `flex-wrap` para o cabeçalho que ganha um quarto botão não empurrar o
     título; `margin-left:auto` mantém o grupo à direita mesmo quando a coluna
     do título é estreita. */
  .page-heading-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
  }

  .page h1,
  .signature-center-inline h1 {
    color: #122039;
    font-weight: 780;
    letter-spacing: -.035em;
  }

  .eyebrow {
    color: #6f82a0;
    letter-spacing: .12em;
  }

  .panel-heading {
    align-items: center;
    gap: 20px;
  }

  .panel-heading h2,
  .panel-heading h3 {
    color: #1a2940;
    line-height: 1.25;
  }

  /* Acoes ------------------------------------------------------------ */
  .create-button,
  .outline-button,
  .row-button,
  .document-table-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: var(--ui-control-height);
    border-radius: var(--radius-pill);
    line-height: 1;
    white-space: nowrap;
    transition: color .16s ease, background .16s ease, border-color .16s ease,
      box-shadow .16s ease, transform .16s ease;
  }

  .create-button {
    box-shadow: 0 5px 14px rgba(65, 110, 236, .20);
  }

  .create-button:not(:disabled):hover {
    box-shadow: 0 8px 20px rgba(65, 110, 236, .24);
    transform: translateY(-1px);
  }

  .outline-button {
    border-color: var(--ui-control-border);
    color: #34475f;
  }

  .outline-button:not(:disabled):hover,
  .row-button:not(:disabled):hover,
  .document-table-action:not(:disabled):hover {
    border-color: #b7c8dc;
    background: #f4f7fb;
    color: var(--color-primary-hover);
  }

  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
  }

  /* O input dentro do campo de busca (.search e variantes) não tem
     border-radius próprio — só o wrapper .search é a cápsula arredondada.
     A regra genérica de foco acima desenhava um contorno quadrado colado
     no input, destoando visualmente da cápsula ao redor (bug relatado
     pelo usuário). Em vez de contorno no input, o foco passa a aparecer
     como um anel sutil na cápsula inteira. */
  .search input:focus-visible {
    outline: 0;
  }
  .search:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-focus);
  }

  /* Seleção de texto: sem isso, o navegador usa o azul de sistema (varia
     por SO/tema), destoando do resto do painel — igual ao anel de foco e
     a barra de rolagem acima, é peça do mesmo sistema visual, não um
     detalhe do navegador. */
  ::selection {
    background: var(--color-primary-soft);
    color: var(--color-primary-hover);
  }

  /* Navegacao interna: uma unica pílula segmentada ------------------ */
  .schedule-page-tabs,
  .people-section-tabs,
  .config-tabs,
  .company-tabs,
  .period-shortcuts {
    display: inline-flex;
    align-items: center;
    width: max-content;
    max-width: 100%;
    gap: 4px;
    padding: 4px;
    border: 1px solid #dce5ef;
    border-radius: var(--radius-pill);
    background: #eef3f8;
    box-shadow: inset 0 1px 1px rgba(16, 35, 61, .025);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .schedule-page-tabs::-webkit-scrollbar,
  .people-section-tabs::-webkit-scrollbar,
  .config-tabs::-webkit-scrollbar,
  .company-tabs::-webkit-scrollbar,
  .period-shortcuts::-webkit-scrollbar {
    display: none;
  }

  .people-section-tabs {
    margin: -6px 0 20px;
  }

  .config-tabs {
    margin: 0 0 22px;
    border-bottom: 1px solid #dce5ef;
  }

  .company-tabs {
    margin: 0 0 18px;
    border-bottom: 1px solid #dce5ef;
  }

  .period-shortcuts {
    margin-top: 12px;
  }

  .schedule-page-tabs button,
  .people-section-tabs button,
  .config-tabs button,
  .company-tabs button,
  .period-shortcuts button {
    position: static;
    top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 32px;
    padding: 7px 13px;
    border: 0 !important;
    border-radius: var(--radius-pill) !important;
    background: transparent;
    box-shadow: none;
    color: #66768a;
    font-size: 11px;
    font-weight: 780;
    line-height: 1;
    white-space: nowrap;
    transition: color .16s ease, background .16s ease, box-shadow .16s ease;
  }

  .schedule-page-tabs button:hover,
  .people-section-tabs button:hover,
  .config-tabs button:hover,
  .company-tabs button:hover,
  .period-shortcuts button:hover {
    background: rgba(255, 255, 255, .62);
    color: #34475f;
  }

  .schedule-page-tabs button.active,
  .people-section-tabs button.active,
  .config-tabs button.active,
  .company-tabs button.active,
  .period-shortcuts button.active {
    border: 0 !important;
    border-bottom: 0 !important;
    background: #fff !important;
    color: var(--color-primary-hover) !important;
    box-shadow: 0 2px 8px rgba(36, 65, 95, .11) !important;
  }

  .people-section-tabs button span {
    min-width: 19px;
    height: 19px;
    background: #dde6f1;
  }

  .people-section-tabs button.active span {
    background: var(--color-primary-soft);
    color: var(--color-primary-hover);
  }

  /* Campos e barras de filtro --------------------------------------- */
  .filter-grid input,
  .filter-grid select,
  .people-filters select,
  .signature-center-toolbar select,
  .document-management-toolbar select,
  .filtro-padrao select,
  .form-grid input:not([type="checkbox"]):not([type="radio"]),
  .form-grid select {
    box-sizing: border-box;
    height: var(--ui-control-height);
    min-height: var(--ui-control-height);
    border: 1px solid var(--ui-control-border);
    border-radius: var(--radius-control);
    background-color: #fff;
    color: #34475f;
    transition: border-color .16s ease, box-shadow .16s ease;
  }

  /* Todo campo de uma linha usa a mesma cápsula. Isso inclui texto livre,
     listas, datas e filtros; a exceção são campos realmente altos. */
  .form-grid input:not([type="checkbox"]):not([type="radio"]),
  .form-grid select,
  .filter-grid input,
  .filter-grid select,
  .people-filters select,
  .signature-center-toolbar select,
  .document-management-toolbar select,
  .filtro-padrao select {
    border-radius: var(--ui-control-radius);
  }

  .filter-grid input:hover,
  .filter-grid select:hover,
  .people-filters select:hover,
  .signature-center-toolbar select:hover,
  .document-management-toolbar select:hover,
  .filtro-padrao select:hover,
  .form-grid input:not([type="checkbox"]):not([type="radio"]):hover,
  .form-grid select:hover {
    border-color: var(--ui-control-hover);
  }

  .filter-grid input:focus,
  .filter-grid select:focus,
  .people-filters select:focus,
  .signature-center-toolbar select:focus,
  .document-management-toolbar select:focus,
  .filtro-padrao select:focus,
  .form-grid input:not([type="checkbox"]):not([type="radio"]):focus,
  .form-grid select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-focus);
    outline: 0;
  }

  .search {
    min-height: var(--ui-control-height);
    border-color: var(--ui-control-border);
    background: #f8fafc;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
  }

  .search:focus-within {
    border-color: var(--color-primary);
    background: #fff;
    box-shadow: 0 0 0 3px var(--color-focus);
  }

  .people-toolbar,
  .document-management-toolbar {
    gap: 12px;
  }

  /* Tabelas --------------------------------------------------------- */
  table:not(.report-table) thead {
    background: #f7f9fc;
  }

  table:not(.report-table) th {
    color: #718096;
    font-weight: 780;
    letter-spacing: .055em;
  }

  table:not(.report-table) tbody tr {
    transition: background .14s ease;
  }

  table:not(.report-table) tbody tr:hover {
    background: #fafcff;
  }

  /* Central de Assinaturas ----------------------------------------- */
  .nav-link .nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
  }

  .nav-link .nav-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  #signatureCenterDialog.signature-center-inline > .signature-center-scroll {
    padding: 0;
    scrollbar-gutter: auto;
  }

  #signatureCenterDialog.signature-center-inline h1 {
    margin-top: 0;
  }

  .signature-center-section .panel-heading,
  #signatureCenterAvulsoPanel .panel-heading {
    padding: 18px 22px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--line);
  }

  .signature-heading-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
  }

  .signature-empty-icon {
    display: grid;
    width: 46px;
    height: 46px;
    margin: 0 auto 12px;
    place-items: center;
    border: 1px solid #d7e3f4;
    border-radius: 14px;
    background: #f4f7fc;
    color: var(--color-primary);
  }

  .signature-empty-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .signature-center-section .empty-state {
    padding-block: 54px;
  }

  /* O card do verificador saiu junto com a coluna lateral de Registros
     (18/08/2026). O verificador virou diálogo e usa o estilo compartilhado de
     .warning-dialog; só as faixas de resultado abaixo continuam valendo. */
  .receipt-verifier-result { display:none; margin:0; border-radius:8px; padding:8px; font-size:10px; line-height:1.4; }
  .receipt-verifier-result:not(:empty) { display:block; }
  .receipt-verifier-result.valid { background:#eaf9f3; color:#08785b; }
  .receipt-verifier-result.invalid { background:#fff0f1; color:#b42335; }
  .receipt-verifier-result.loading { background:#f3f6fb; color:#5d6f87; }

  .empty-state > .signature-empty-icon {
    font-size: inherit;
  }

  .empty-state > .signature-empty-icon + h2 {
    margin-top: 0;
  }

  /* Interacoes mais discretas e coerentes -------------------------- */
  .report-type-card,
  .report-card {
    transition: border-color .16s ease, background .16s ease,
      box-shadow .16s ease, transform .16s ease;
  }

  .report-type-card:hover,
  .report-card:hover {
    box-shadow: var(--ui-hover-shadow);
    transform: translateY(-1px);
  }

  .report-type-card.active {
    border-color: #a9bff8;
    background: #f5f7fe;
    box-shadow: 0 0 0 1px rgba(65, 110, 236, .08), var(--ui-panel-shadow);
  }
}

@media (max-width: 900px) {
  .signature-center-inline > .signature-center-scroll {
    padding-inline: 0;
  }

  .signature-center-section .panel-heading,
  #signatureCenterAvulsoPanel .panel-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .signature-heading-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Cabeçalho global: ações claras, conta sempre no mesmo lugar e ícones vetoriais. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.topbar-round-button,
.top-account-button {
  display: inline-grid;
  width: 40px;
  height: 40px;
  padding: 0;
  place-items: center;
  border: 1px solid #dfe6f0;
  border-radius: 50%;
  background: #fff;
  color: #5c6d83;
  box-shadow: 0 3px 10px rgba(31, 49, 77, .06);
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.topbar-round-button:hover,
.top-account-button:hover,
.top-account-button[aria-expanded="true"] {
  border-color: #bfd0f7;
  background: #f6f8ff;
  box-shadow: 0 5px 14px rgba(55, 91, 172, .12);
}

.topbar-bell {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.top-account-button .avatar {
  width: 30px;
  height: 30px;
}

.top-account-wrap .user-account-menu {
  top: calc(100% + 10px);
  right: 0;
  bottom: auto;
  left: auto;
  width: 270px;
  border: 1px solid #dfe6ef;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(18, 37, 65, .16);
  color: #1c2f49;
}

.top-account-wrap .user-account-heading {
  border-bottom-color: #e8edf4;
  padding: 14px;
}

.top-account-wrap .user-account-heading strong { font-size: 13px; }
.top-account-wrap .user-account-heading small { color: #718096; font-size: 11px; }
.top-account-wrap .user-account-menu > button {
  color: #40526a;
  padding: 11px 14px;
  font-size: 12px;
}
.top-account-wrap .user-account-menu > button:hover { background: #f4f7fb; }
.top-account-wrap .user-account-menu > button:last-child { color: #b42335; }

.notice-action {
  margin-left: auto;
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: var(--color-primary);
  font-weight: 750;
  white-space: nowrap;
}

.company-units-panel {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.company-units-panel .panel-heading { align-items: center; }
.company-units-panel .units-toolbar { margin: 0; padding-inline: 0; }
.company-units-panel .empty-state { padding: 42px 20px; }

/* Unidades e setores compartilham esta estrutura. A coluna de ações precisa
   medir apenas o conteúdo: se ela absorve toda a sobra da tabela, o cabeçalho
   fica à esquerda enquanto os botões, corretamente alinhados ao fim, vão para
   a borda oposta. */
.company-units-panel table th:last-child,
.company-units-panel table td:last-child {
  width: 1%;
  white-space: nowrap;
}

/* Em telas de trabalho, 100% do navegador passa a equivaler a 120% do layout
   anterior. O mobile preserva a escala própria e não recebe este aumento. */
@media (min-width: 1100px) {
  body { zoom: 1.2; }

  /* O aumento geral é ótimo para leitura, mas unidades de viewport dentro
     da camada superior do navegador também eram ampliadas e alguns modais
     ultrapassavam os limites visíveis. Os cards abertos preservam o tamanho
     seguro original enquanto o restante do painel continua em 120%. */
  dialog { zoom: .8333333333; }

  .search-results,
  .top-account-wrap .user-account-menu,
  .day-card-actions-menu,
  .records-actions-menu {
    max-width: calc(83.333vw - 24px);
    max-height: calc(83.333vh - 24px);
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* O body inteiro esta em 120%, mas este menu recebe coordenadas reais do
     viewport via getBoundingClientRect(). Compensar o zoom impede que left/top
     sejam ampliados uma segunda vez e estourem a borda direita da janela. */
  .day-card-actions-menu,
  .records-actions-menu { zoom: .8333333333; }
}

@media (max-width: 720px) {
  .page-heading {
    align-items: flex-start;
    margin-bottom: 20px;
  }

  .people-section-tabs,
  .config-tabs,
  .company-tabs,
  .period-shortcuts {
    width: 100%;
  }

  .people-section-tabs button,
  .config-tabs button,
  .company-tabs button,
  .period-shortcuts button {
    flex: 0 0 auto;
  }

  .signature-heading-actions .outline-button {
    flex: 1 1 180px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .create-button,
  .outline-button,
  .row-button,
  .document-table-action,
  .report-card,
  .report-type-card {
    transition: none;
  }
}

/* Central de Assinaturas — composição compacta e única para as três abas. */
@media screen {
  #signatureCenterDialog.signature-center-inline > .signature-center-scroll {
    padding: 0;
  }

  .signature-center-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
  }

  #signatureCenterDialog .signature-center-nav-row .people-section-tabs {
    flex: 0 1 auto;
    margin: 0;
  }

  .signature-zip-export-row {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
  }

  .export-zip-menu {
    position: relative;
  }

  #exportSignedZipButton,
  #openSignatureDocumentsBtn {
    min-height: 40px;
    padding: 0 14px;
    border-color: #d7e1ed;
    color: #34475f;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(16, 35, 61, .025);
  }

  #exportSignedZipButton:hover,
  #exportSignedZipButton[aria-expanded="true"],
  #openSignatureDocumentsBtn:hover {
    border-color: #b8c8db;
    background: #f7f9fc;
    color: var(--color-primary-hover);
  }

  #exportSignedZipButton svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .export-zip-chevron {
    margin-left: 2px;
    color: #8290a3;
    font-size: 13px;
    line-height: 1;
  }

  .export-zip-menu-list {
    position: absolute;
    z-index: 20;
    top: calc(100% + 7px);
    right: 0;
    display: flex;
    min-width: 224px;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    border: 1px solid #dfe6ef;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 38px rgba(18, 37, 65, .16);
  }

  .export-zip-menu-list button {
    min-height: 34px;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #34475f;
    font-size: 11px;
    font-weight: 700;
    text-align: left;
  }

  .export-zip-menu-list button:hover {
    background: #f4f7fb;
    color: var(--color-primary-hover);
  }

  .export-zip-menu-list button:disabled {
    opacity: .5;
    cursor: wait;
  }

  .export-zip-menu-list.hidden {
    display: none;
  }

  #signatureCenterDialog .table-panel,
  #signatureCenterDialog .signature-center-section {
    min-height: 410px;
    overflow: hidden;
    padding: 0;
  }

  #signatureCenterDialog .panel-heading,
  #signatureCenterAvulsoPanel .panel-heading {
    min-height: 62px;
    padding: 13px 18px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--line);
  }

  #signatureCenterDialog .panel-heading h3 {
    margin-bottom: 3px;
    font-size: 14px;
  }

  #signatureCenterDialog .panel-heading p {
    font-size: 11px;
    line-height: 1.35;
  }

  #signatureCenterDialog .signature-center-toolbar {
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) minmax(170px, 190px) repeat(2, minmax(138px, 158px));
    grid-template-rows: auto auto;
    min-height: 58px;
    gap: 8px;
    padding: 10px 14px;
  }

  #signatureCenterDialog .signature-center-toolbar .people-search {
    width: 100%;
    min-width: 0;
  }

  #signatureCenterDialog .signature-center-toolbar select {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 0 32px 0 13px;
    border-color: var(--ui-control-border);
    border-radius: var(--radius-pill);
    background-color: #fff;
    color: #41536a;
    font-size: 11px;
    font-weight: 680;
  }

  #signatureCenterDialog .signature-toolbar-periods {
    display: inline-flex;
    grid-column: 2 / -1;
    grid-row: 2;
    justify-self: start;
    width: 100%;
    margin: 0 !important;
    padding: 4px;
    border: 1px solid #dce5ef;
    border-radius: var(--radius-pill);
    background: #eef3f8;
    box-shadow: inset 0 1px 1px rgba(16, 35, 61, .025);
  }

  #signatureCenterDialog .signature-toolbar-periods button {
    flex: 1 1 0;
    min-height: 32px;
    padding: 7px 13px;
    font-size: 11px;
  }

  #signatureCenterDialog .table-wrap,
  #signatureCenterDialog .signature-center-table {
    margin: 0 !important;
  }

  #signatureCenterDialog table {
    min-width: 720px;
  }

  #signatureCenterAvulsoPanel .panel-heading > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
  }

  #signatureCenterAvulsoPanel .signature-heading-actions {
    flex: 0 0 auto;
    flex-wrap: nowrap;
  }

  #signatureCenterAvulsoPanel .signature-heading-actions .outline-button {
    min-height: 36px;
    padding-inline: 13px;
    font-size: 11px;
    white-space: nowrap;
  }

  #signatureCenterDialog table th,
  #signatureCenterDialog table td {
    vertical-align: middle;
  }

  #signatureCenterDialog table th {
    height: 35px;
    padding: 9px 14px;
  }

  #signatureCenterDialog table td {
    height: 52px;
    padding: 10px 14px;
  }

  #signatureCenterDialog table th:not(:first-child):not(:last-child),
  #signatureCenterDialog table td:not(:first-child):not(:last-child) {
    text-align: center;
  }

  #signatureCenterDialog table th:last-child,
  #signatureCenterDialog table td:last-child {
    text-align: right;
  }

  #signatureCenterDialog .empty-state {
    padding-block: 42px;
  }
}

@media (min-width: 721px) and (max-width: 1180px) {
  #signatureCenterDialog .signature-center-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(170px, .7fr);
  }

  #signatureCenterDialog .signature-toolbar-periods {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

@media (max-width: 720px) {
  #signatureCenterDialog.signature-center-inline > .signature-center-scroll {
    padding: 0;
  }

  .signature-center-nav-row {
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
  }

  .signature-zip-export-row,
  .signature-zip-export-row .export-zip-menu,
  #exportSignedZipButton,
  #openSignatureDocumentsBtn {
    width: 100%;
  }

  #signatureCenterDialog .signature-center-toolbar {
    grid-template-columns: 1fr;
  }

  #signatureCenterDialog .signature-toolbar-periods {
    grid-column: 1;
    grid-row: auto;
    max-width: 100%;
  }
}
/* O agrupamento e o alinhamento à direita vêm de .page-heading-actions, igual
   às demais telas — este bloco cuida só do que é do Dashboard: uma das ações é
   um <a>, que sem altura mínima fica mais baixo que o <button> ao lado. */
#dashboard .dashboard-heading-actions .outline-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  white-space: nowrap;
  text-decoration: none;
}

@media (max-width: 900px) {
  #dashboard .page-heading {
    align-items: flex-start;
  }
}

/* Refinamento estrutural v2 -------------------------------------------
   A linguagem abaixo combina a objetividade modular das referências com
   o azul já consolidado do Jornada. É deliberadamente só visual: não muda
   marcação, cálculo, permissão, persistência ou qualquer contrato de dados. */
:root {
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;
  --ui-space-8: 32px;
  --ui-radius-sm: 9px;
  --ui-radius-md: 12px;
  --ui-radius-lg: 16px;
  --ui-surface-soft: #f8fafc;
  /* Barras de filtros pertencem ao mesmo plano branco do card. A antiga cor
     quase branca (#fbfcfe) criava uma segunda caixa sem função visual. */
  --ui-surface-toolbar: #fff;
  --ui-text-strong: #122039;
  --ui-text-body: #34475f;
  --ui-text-muted: #73839a;
  --ui-border-strong: #d7e0eb;
  --ui-panel-shadow: 0 1px 2px rgba(16, 35, 61, .025),
    0 10px 30px rgba(16, 35, 61, .045);
  --ui-floating-shadow: 0 22px 58px rgba(16, 35, 61, .18);
}

@media screen {
  body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* Estrutura e navegação: menos ruído, ícones de linha e ritmo estável. */
  .sidebar {
    --sidebar-bottom-inset: 15px;
    /* Defesa estrutural: a barra pertence a janela, nunca a altura da pagina.
       O fallback vh cobre navegadores antigos; dvh acompanha a area util real.
       bottom:auto evita que o inset herdado de styles.css volte a esticar a
       caixa caso outro ancestral crie um bloco de contencao no futuro. */
    top: 0;
    bottom: auto;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    max-height: 100vh;
    max-height: 100dvh;
    padding: 22px 14px 15px;
    border-right: 1px solid rgba(255, 255, 255, .045);
  }

  .brand {
    justify-content: flex-start;
    gap: 10px;
    padding: 0 12px 24px;
    letter-spacing: -.045em;
  }

  .workspace {
    min-height: 52px;
    margin-bottom: 18px;
    border-color: rgba(177, 199, 229, .13);
    border-radius: var(--ui-radius-md);
    background: rgba(255, 255, 255, .045);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
    transition: background .16s ease, border-color .16s ease;
  }

  .workspace:hover {
    border-color: rgba(177, 199, 229, .24);
    background: rgba(255, 255, 255, .075);
  }

  .workspace-details {
    min-width: 0;
  }

  .workspace-details strong,
  .workspace-details small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .workspace-label,
  .menu-label {
    color: #8293aa;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
  }

  .menu-label {
    margin: 19px 12px 7px;
  }

  .nav-link {
    min-height: 38px;
    margin: 2px 0;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    gap: 11px;
    color: #b8c5d7;
    font-size: 13px;
    font-weight: 590;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
  }

  .nav-link:hover {
    border-color: rgba(190, 208, 233, .08);
    background: rgba(255, 255, 255, .055);
    color: #f5f8fc;
  }

  .nav-link.active {
    border-color: rgba(148, 180, 232, .13);
    background: #263e5e;
    box-shadow: inset 3px 0 0 #7da4ff;
    color: #fff;
  }

  .nav-link .nav-icon,
  .nav-link > .nav-icon {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
    color: #94a9c3;
  }

  .nav-link .nav-icon svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.65;
  }

  .nav-link:hover .nav-icon,
  .nav-link.active .nav-icon {
    color: #a9c5ff;
  }

  .sidebar-toolbar {
    position: absolute;
    right: 8px;
    bottom: var(--sidebar-bottom-inset);
    left: 8px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    height: 55px;
    min-height: 55px;
    max-height: 55px;
    margin-top: 0;
    padding: 8px 4px 0;
    border-top: 1px solid rgba(255, 255, 255, .065);
    background: var(--color-nav, #10233d);
  }

  .topbar {
    height: 68px;
    padding: 0 34px;
    /* O mesmo véu da barra do card (spec-design-card.md): branco quase
       fechado e desfoque curto, sem a linha que separava a barra da página. */
    border-bottom-color: transparent;
    background: rgba(251, 251, 253, .84);
    box-shadow: none;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  .top-actions {
    gap: 10px;
  }

  .topbar .search {
    width: min(330px, 34vw);
  }

  /* Hierarquia: o conteúdo passa a ter uma origem visual única. */
  .page {
    padding-top: 32px;
  }

  /* Paginas que ainda herdavam larguras reduzidas de suas primeiras versoes. */
  #aprovacoes .approval-panel,
  #calendario .calendar-filter,
  #calendario .calendar-panel,
  #configuracoes .settings-panel {
    width: 100%;
    max-width: none;
  }

  .page-heading {
    align-items: flex-end;
    min-height: 76px;
    margin-bottom: 22px;
  }

  .page-heading > div:first-child {
    min-width: 0;
  }

  .page h1,
  .signature-center-inline h1 {
    margin-bottom: 6px;
    color: var(--ui-text-strong);
    font-size: clamp(27px, 2.15vw, 31px);
    line-height: 1.06;
  }

  .eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 9px;
    line-height: 1;
  }

  .eyebrow::before {
    width: 16px;
    height: 1px;
    flex: 0 0 16px;
    background: currentColor;
    content: "";
    opacity: .7;
  }

  .subtitle {
    max-width: 720px;
    color: var(--ui-text-muted);
    font-size: 13px;
    line-height: 1.5;
  }

  /* Superfícies: borda clara, sombra curta e geometria consistente. */
  .panel,
  .metric-card,
  .report-card,
  .report-type-card,
  .document-summary-grid article,
  .vacation-summary-card,
  .termination-summary-card,
  .termination-card,
  .schedule-card {
    border-color: var(--ui-panel-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-panel-shadow);
  }

  .panel {
    padding: 22px;
  }

  .table-panel,
  .people-panel,
  .schedules-panel,
  .vacation-panel,
  .termination-panel,
  .signature-center-section {
    overflow: hidden;
  }

  .panel-heading {
    align-items: center;
    min-height: 42px;
    margin-bottom: 18px;
  }

  .panel-heading h2,
  .panel-heading h3 {
    margin-bottom: 4px;
    color: var(--ui-text-strong);
    font-weight: 760;
    letter-spacing: -.015em;
  }

  .panel-heading p {
    color: var(--ui-text-muted);
    line-height: 1.45;
  }

  .metric-grid {
    gap: 14px;
    margin-bottom: 16px;
  }

  .metric-card {
    position: relative;
    align-items: flex-start;
    min-height: 112px;
    padding: 17px;
    overflow: hidden;
  }

  .metric-card > div:last-child {
    min-width: 0;
  }

  .metric-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border: 1px solid currentColor;
    border-radius: 11px;
    background-clip: padding-box;
  }

  .metric-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .metric-card p {
    margin-bottom: 7px;
    color: var(--ui-text-muted);
    font-size: 11px;
    font-weight: 680;
  }

  .metric-card strong {
    margin-bottom: 4px;
    color: var(--ui-text-strong);
    font-size: 23px;
    line-height: 1;
  }

  .metric-card span,
  .metric-card small {
    font-size: 10px;
    line-height: 1.4;
  }

  .content-grid {
    gap: 16px;
    margin-bottom: 16px;
  }

  .notice {
    min-height: 50px;
    margin-bottom: 18px;
    padding: 12px 15px;
    border-radius: var(--ui-radius-md);
    line-height: 1.45;
  }

  /* Ferramentas e controles: mesma altura, mesma cápsula e agrupamento. */
  .people-toolbar,
  .document-management-toolbar,
  .vacation-toolbar,
  .termination-toolbar,
  .signature-center-toolbar,
  .units-toolbar {
    min-height: 66px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--ui-panel-border);
    background: var(--ui-surface-toolbar);
  }

  .search {
    min-height: 38px;
    padding-inline: 13px;
    border-color: var(--ui-control-border);
    background: #fff;
  }

  .search > span:first-child {
    color: #8595aa;
  }

  .search input {
    color: var(--ui-text-body);
    font-size: 12px;
  }

  .search input::placeholder {
    color: #8c9aad;
  }

  select,
  input,
  textarea {
    accent-color: var(--color-primary);
  }

  .create-button,
  .outline-button,
  .row-button,
  .document-table-action,
  .vacation-row-actions button {
    font-weight: 740;
  }

  .create-button {
    box-shadow: 0 4px 12px rgba(65, 110, 236, .17);
  }

  .row-button,
  .document-table-action,
  .vacation-row-actions button {
    min-height: 31px;
    padding: 0 12px;
    border: 1px solid #e1e7ef;
    background: #f5f7fa;
    color: #405671;
    font-size: 10px;
    box-shadow: none;
  }

  /* Tabelas: cabeçalho calmo, linhas legíveis e ações previsíveis. */
  .table-wrap,
  .vacation-table-wrap {
    scrollbar-color: #c7d1df transparent;
    scrollbar-width: thin;
  }

  table:not(.report-table) {
    color: var(--ui-text-body);
  }

  table:not(.report-table) thead {
    background: #f6f8fb;
  }

  table:not(.report-table) th {
    height: 38px;
    padding: 9px 12px;
    border-bottom: 1px solid #e7ecf2;
    color: #708097;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .075em;
    vertical-align: middle;
  }

  table:not(.report-table) td {
    min-height: 52px;
    padding: 13px 12px;
    border-top-color: #edf1f5;
    color: #43566e;
    vertical-align: middle;
  }

  table:not(.report-table) tbody tr:hover {
    background: #f9fbfe;
  }

  table:not(.report-table) tbody tr:last-child td {
    border-bottom: 0;
  }

  .people-panel td:last-child,
  .schedules-panel td:last-child,
  .vacation-table td:last-child {
    padding-right: 16px;
  }

  .vacation-table td {
    vertical-align: middle;
  }

  .vacation-row-actions,
  .termination-detail-actions,
  .termination-task-actions {
    justify-content: flex-end;
  }

  /* Resumos dos módulos RH usam a mesma escala do dashboard. */
  .vacation-summary,
  .termination-summary,
  .document-summary-grid {
    gap: 14px;
  }

  /* O resumo de documentos e a tabela seguinte são superfícies distintas.
     Sem esta margem, as bordas encostavam e pareciam um único card. Vale para
     Documentos pessoais e Documentos de Ocorrência, que reutilizam a grade. */
  .document-summary-grid {
    margin-bottom: 14px;
  }

  /* 106px vinham de um card que tinha rótulo, número e legenda em três alturas
     diferentes; hoje os três módulos usam a mesma escala e o recheio sobrava.
     88px ainda deixam 14px de respiro acima do rótulo e abaixo da legenda —
     medido é o conteúdo que manda, não o min-height. Muda nas TRÊS telas de uma
     vez: elas aparecem lado a lado no mesmo fluxo de trabalho, e um resumo mais
     baixo que o outro leria como erro. */
  .vacation-summary-card,
  .termination-summary-card,
  .document-summary-grid article {
    min-height: 88px;
    padding: 14px 16px;
  }

  .vacation-summary-card span,
  .termination-summary-card span,
  .document-summary-grid article span,
  .document-summary-grid article p {
    color: var(--ui-text-muted);
    font-size: 10px;
    font-weight: 780;
    letter-spacing: .055em;
  }

  .vacation-summary-card strong,
  .termination-summary-card strong,
  .document-summary-grid article strong {
    margin: 5px 0 2px;
    color: var(--ui-text-strong);
    font-size: 22px;
    line-height: 1;
    letter-spacing: -.035em;
  }

  .termination-list {
    gap: 0;
    padding: 0;
    background: transparent;
  }

  .termination-card {
    padding: 16px 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }

  /* Estados vazios: informativos, compactos e iguais em todos os módulos. */
  .empty-state,
  .empty-page,
  .vacation-empty,
  .termination-empty,
  .document-empty,
  .signature-center-section .empty-state {
    min-height: 190px;
    padding: 42px 24px;
    color: var(--ui-text-muted);
    text-align: center;
  }

  .empty-state > span:first-child:not(.signature-empty-icon),
  .empty-page > span:first-child,
  .empty-state > .empty-state-icon {
    display: grid;
    width: 42px;
    height: 42px;
    margin: 0 auto 12px;
    place-items: center;
    border: 1px solid #cfdcf3;
    border-radius: 13px;
    background: #f5f8fe;
    color: var(--color-primary);
    font-size: 19px;
    line-height: 1;
  }

  /* O ícone agora é um SVG de verdade (mesmo traço de cameraIconSvg),
     não mais um caractere de texto — precisa de tamanho próprio em vez
     de herdar font-size/line-height. */
  .empty-state > .empty-state-icon svg {
    width: 20px;
    height: 20px;
  }

  /* Painel de atenção (sino) e cards de apuração: os glifos Unicode viraram
     SVG do mesmo sistema, então precisam de caixa própria em vez de herdar
     font-size. O alinhamento óptico agora é o mesmo nos dois lugares. */
  .attention-icon,
  .records-insight-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
  }

  .attention-icon svg,
  .records-insight-icon svg {
    width: 16px;
    height: 16px;
  }

  /* Aviso de total ainda não fechado (Registros e Banco de horas): a soma
     inclui pelo menos um dia com sequência de marcações incompleta.
     Borda e fundo saem direto dos tokens de aviso.
     A COR DO TEXTO não: --color-warning-text (#aa5d0d) foi calculada contra
     BRANCO, onde mede 4.91:1. Sobre o fundo âmbar suave deste aviso ela cai
     para 4.46:1 — abaixo do piso de 4.5:1 para texto normal (medido, não
     estimado). #a3590c é o mesmo matiz um passo mais escuro e mede 4.78:1
     sobre este fundo. Não vira token novo porque é específico da combinação
     "texto de aviso SOBRE fundo de aviso"; em fundo branco, continue usando
     --color-warning-text. */
  .totals-sequence-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -4px 0 0;
    padding: 10px 13px;
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-control);
    background: var(--color-warning-soft);
    color: #a3590c;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.45;
  }

  .totals-sequence-warning::before {
    content: "";
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    background: currentColor;
    /* Mesmo triângulo de alerta do sistema de ícones (EMPTY_STATE_ICONS.error
       em app.js), como máscara pra herdar a cor do texto. */
    -webkit-mask: var(--icon-alert) center / contain no-repeat;
    mask: var(--icon-alert) center / contain no-repeat;
  }

  .totals-sequence-warning.hidden {
    display: none;
  }

  .empty-state h2,
  .empty-page h2,
  .vacation-empty strong,
  .termination-empty strong,
  .document-empty strong {
    margin: 0 0 6px;
    color: var(--ui-text-strong);
    font-size: 16px;
    font-weight: 760;
    letter-spacing: -.015em;
  }

  .empty-state p,
  .empty-page p,
  .vacation-empty,
  .termination-empty,
  .document-empty {
    font-size: 12px;
    line-height: 1.55;
  }

  /* Páginas com dois cards empilhados sem wrapper de grid (Calendário,
     Aprovações, Recibos de pagamento) ficavam coladas: nada define margem
     entre .panel irmãos por padrão, só o Recibos tinha um `style` inline
     avulso (17px, valor arbitrário). Reusa o espaçamento já usado abaixo de
     um panel-heading (--ui-space-5) em vez de inventar outro número. */
  .calendar-filter + .calendar-panel,
  .approval-panel + .approval-panel,
  #recibosEnviosPanel .table-panel + .chart-panel {
    margin-top: var(--ui-space-5);
  }

  /* Diálogos: uma moldura única, close previsível e rodapé bem separado. */
  dialog {
    border: 1px solid rgba(213, 223, 235, .9);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--ui-floating-shadow);
  }

  dialog::backdrop {
    background: rgba(13, 27, 48, .52);
    backdrop-filter: blur(2px);
  }

  /* O X é desenhado, não escrito.

     Com o caractere × o botão ficava com a caixa centralizada e a tinta não:
     medido em 32px, o centro do glifo caía 7,75px ABAIXO do centro do círculo,
     porque a caixa do glifo transborda a caixa de linha (ascent + descent da
     fonte passam de 1em, e line-height é 1). Nenhum ajuste de line-height
     resolve isso de forma estável — o número muda com a fonte que carregar.

     A máscara SVG tem o traço centrado no próprio viewBox. O glifo é absoluto
     no botão, com `inset: 0` e `margin: auto`, então o centro do traço cai
     no centro do círculo sem depender da métrica da fonte nem do caractere
     × que ainda está no HTML. Herda a cor por currentColor. */
  .dialog-close {
    display: block;
    width: 32px;
    height: 32px;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e1e7ef;
    border-radius: 50%;
    background: #f8fafc;
    color: #6d7c90;
    font-size: 0;
    line-height: 1;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
  }

  .dialog-close::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 12px;
    height: 12px;
    margin: auto;
    background: currentColor;
    -webkit-mask: var(--ui-close-glyph) center / contain no-repeat;
    mask: var(--ui-close-glyph) center / contain no-repeat;
  }

  .dialog-close:hover {
    border-color: #cdd8e6;
    background: #f1f5f9;
    color: #263a53;
  }

  dialog h2 {
    color: var(--ui-text-strong);
    font-weight: 770;
    letter-spacing: -.025em;
  }

  .dialog-subtitle {
    color: var(--ui-text-muted);
    line-height: 1.5;
  }

  .form-section {
    border-top-color: #e8edf3;
  }

  .form-actions,
  .vacation-form-actions,
  .termination-form-actions {
    align-items: center;
    padding-top: 14px;
    border-top: 1px solid #edf1f5;
  }

  .quick-actions {
    gap: 12px;
  }

  .quick-actions button {
    min-height: 118px;
    border-color: var(--ui-panel-border);
    border-radius: var(--ui-radius-md);
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
  }

  .quick-actions button:hover {
    transform: translateY(-1px);
  }

  /* Interações e redução de movimento. */
  .panel a,
  .text-button,
  .notice-action {
    text-underline-offset: 3px;
  }

  .text-button:hover,
  .notice-action:hover {
    color: var(--color-primary-hover);
  }
}

@media (min-width: 1100px) and (max-width: 1439px) {
  .page {
    padding-inline: 28px;
  }

  .topbar {
    padding-inline: 28px;
  }

  #signatureCenterDialog.signature-center-inline > .signature-center-scroll {
    padding: 0;
  }

  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content-grid {
    grid-template-columns: 1fr;
  }

  .people-panel .people-toolbar {
    grid-template-columns: minmax(260px, 1fr) max-content;
  }

  .people-panel .people-toolbar .people-search {
    grid-column: 1;
  }

  .people-panel .people-toolbar .people-count {
    grid-column: 2;
    grid-row: 1;
  }

  .people-panel .people-toolbar .people-filters {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr)) max-content;
    width: 100%;
  }
}

/* O zoom de leitura desktop reduz o viewport CSS efetivo. A barra de Pessoas
   quebra em duas faixas antes que os selects comecem a ser recortados. */
@media (min-width: 721px) and (max-width: 1439px) {
  .people-panel .people-toolbar {
    grid-template-columns: minmax(240px, 1fr) max-content;
  }

  .people-panel .people-toolbar .people-search {
    grid-column: 1;
  }

  .people-panel .people-toolbar .people-count {
    grid-column: 2;
    grid-row: 1;
  }

  .people-panel .people-toolbar .people-filters {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr)) max-content;
    width: 100%;
  }
}

@media (max-width: 1050px) {
  .page {
    padding-inline: 28px;
  }

  .topbar {
    padding-inline: 24px;
  }

  #signatureCenterDialog.signature-center-inline > .signature-center-scroll {
    padding: 0;
  }

  .page-heading {
    align-items: flex-start;
  }
}

@media (max-width: 720px) {
  .page {
    padding: 24px 16px 38px;
  }

  .topbar {
    height: 64px;
    padding-inline: 14px;
  }

  #signatureCenterDialog.signature-center-inline > .signature-center-scroll {
    padding: 0;
  }

  .topbar .search {
    width: auto;
  }

  .page-heading {
    min-height: 0;
    gap: 16px;
  }

  .page h1,
  .signature-center-inline h1 {
    font-size: 26px;
  }

  .panel {
    padding: 18px;
  }

  .metric-card {
    min-height: 102px;
  }

  .people-toolbar,
  .document-management-toolbar,
  .vacation-toolbar,
  .termination-toolbar,
  .signature-center-toolbar,
  .units-toolbar {
    padding: 13px;
  }

  .form-actions,
  .vacation-form-actions,
  .termination-form-actions {
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-link,
  .workspace,
  .dialog-close,
  .quick-actions button {
    transition: none !important;
  }
}

/* ==========================================================================
   Menu retrátil (16/08/2026)

   Motivo: os diálogos são <dialog> nativos e centralizam na JANELA, enquanto o
   conteúdo é empurrado pela barra lateral. Um card aberto sobre outro aparecia
   deslocado. Havia um remendo pontual (`.employee-dialog{left:calc(50% +
   130px)}`) que valia para UM diálogo — QR Code e dispositivos seguiam
   centralizados na tela inteira.

   UM mecanismo só: a classe `.sidebar-open`, controlada pelo JS, manda na
   largura E no conteúdo. A primeira versão usava `:hover` no CSS para a largura
   e classe no JS para o texto — os dois dessincronizaram e a barra abria larga
   com os rótulos ainda escondidos. Com uma fonte única de verdade isso não
   acontece, e dá para testar sem depender de um ponteiro real.

   Recolhido é o estado PADRÃO no CSS: se o JS falhar, sobra uma faixa de
   ícones utilizável em vez de uma barra larga cobrindo o conteúdo.
   ========================================================================== */

:root {
  --sidebar-width: 260px;
  /* 64px, não 76: pedido do usuário em 30/08/2026. O recuo lateral da barra
     acompanha o valor para o ícone seguir centrado — ver o bloco "Faixa mais
     estreita" no fim do arquivo. */
  --sidebar-rail: 64px;
  /* Folga do painel (16/09/2026, pedido do dono): a barra deixou de ser uma
     parede colada na janela e passou a ser um painel, com os cantos no mesmo
     raio dos cartões. Mora no `:root`, e não na regra da barra, porque o
     `.main-content` também precisa ler o valor — uma variável declarada só na
     `.sidebar` é inválida fora dela, e um `calc()` inválido zera a margem. */
  --sidebar-folga: 10px;
  /* Quanto da barra fica CORTADO quando ela está recolhida — a diferença entre
     o painel inteiro e a faixa. O nome vem de quando a barra recuava de fato
     (ver o bloco do mecanismo); hoje ela não sai do lugar e este é o `right` do
     `clip-path`. Um valor só, usado pelo corte e por tudo que precisa encolher
     junto com ele (a pílula do realce, o divisor dos rótulos de seção). */
  --sidebar-recuo: calc(var(--sidebar-width) - var(--sidebar-rail));
  /* Tempo e curva do movimento, em um lugar só. A pílula do item ativo precisa
     encolher no MESMO ritmo da barra; com valores soltos em cada regra, um
     chegava antes do outro e aparecia uma sobra do realce fora da faixa. */
  /* Duração da abertura: 300ms, o mesmo valor do início — mas a CURVA é outra, e
     é ela que resolveu o problema desta tarefa.

     O caminho, para ninguém refazer: 300 (curva adiantada) → 600 → 800 → 500 →
     300 (curva simétrica). As durações longas foram vistas na tela e recusadas
     uma a uma; o que ficou foi a curva.

     Medido no repro, a fração do percurso já vencida em cada instante, com a
     duração de 600ms de então:

       (.2,.7,.2,1), a antiga      150ms=62%  300ms=90%  450ms=98%
       (.45,.05,.55,.95), esta     150ms=13%  300ms=50%  450ms=87%

     A antiga é bem adiantada: quase todo o percurso nos primeiros 40% do tempo,
     e o resto é cauda. Em 300ms ela passa por "rápido e macio"; alongada, a
     cauda fica evidente — uma barra que quase não anda não lê como lenta, lê
     como travada. A simétrica distribui o percurso pelo tempo inteiro, qualquer
     que seja a duração: devagar do começo ao fim, sem cauda.

     Nota sobre o fechamento: em 300ms de abertura contra 380 de recolhimento, é
     o FECHAMENTO que passou a ser o movimento mais longo. É o que o projeto
     sempre teve (o `--sidebar-recolhe` é de 30/08 e não foi tocado nesta
     tarefa), e não uma decisão desta mudança. */
  --sidebar-abre: .3s cubic-bezier(.45, .05, .55, .95);
  --sidebar-recolhe: .38s cubic-bezier(.4, 0, .2, 1);
}

@media (max-width: 1050px) and (min-width: 721px) {
  :root { --sidebar-width: 225px; }
}

@media (min-width: 721px) {
  /* O que recolhe é o CORTE. A barra não muda de largura nem de lugar
     (16/09/2026, terceira versão do mecanismo).

     A primeira animava `width`: layout a cada quadro, e o recolhimento saía aos
     pedaços em página cheia. A segunda trocou por `transform`, com os filhos
     diretos recebendo o translate CONTRÁRIO para o conteúdo ficar parado
     enquanto a borda andava — barato, mas com um efeito colateral que virou
     pedido do dono: deslocar a barra para a esquerda leva o canto esquerdo
     arredondado para fora da tela, então recolhida ela encostava na janela e só
     aberta parecia um painel. Flutuante em um estado e parede no outro.

     Esta versão: a barra fica PARADA em `left: folga`, com a largura aberta, e
     o que a transição anima é o `clip-path` — de `inset(0 recuo 0 0)`, que
     deixa à vista só a faixa, até `inset(0 0 0 0)`, que mostra o painel todo.
     Consequências, todas desejadas:

     - os quatro cantos arredondados existem nos DOIS estados, porque nada sai
       da tela; o `round` do próprio inset arredonda a borda do corte, então a
       faixa também termina redonda do lado direito;
     - os filhos param de precisar de contra-translate: nada se move, logo não
       há o que cancelar. O mecanismo ficou com MENOS peças do que tinha;
     - `clip-path` é pintura, não layout. Mais caro que o `transform`, que corria
       no compositor; incomparavelmente mais barato que animar `width`, que era
       o problema original.

     O `overflow: hidden` continua, agora como rede: o corte é o `clip-path`, e
     sem ele (navegador antigo) sobra a barra inteira aberta, que é utilizável.

     A perda consciente: o `box-shadow` que o estado aberto tinha saiu. Sombra é
     pintada FORA da caixa, e `clip-path` corta tudo, inclusive ela — um inset
     negativo que deixasse a sombra passar levaria o arredondamento do corte
     para fora do elemento e a faixa perderia o canto redondo. O painel se
     separa do fundo pela folga e pelo contraste. Para ter sombra de volta é
     preciso um elemento envolvente, fora do corte, e isso é mudança de HTML.

     As declarações ficam juntas de propósito: `tools/test-camada-topbar-
     20260821.mjs` reconhece a exceção de z-index do menu olhando os 160
     caracteres anteriores ao `z-index`, e um comentário no meio da regra
     empurrava o valor para fora dessa janela. */
  .sidebar {
    width: var(--sidebar-width);
    z-index: 60;
    top: var(--sidebar-folga);
    left: var(--sidebar-folga);
    height: calc(100vh - var(--sidebar-folga) * 2);
    height: calc(100dvh - var(--sidebar-folga) * 2);
    max-height: calc(100vh - var(--sidebar-folga) * 2);
    max-height: calc(100dvh - var(--sidebar-folga) * 2);
    border-right: 0;
    border-radius: var(--radius-card);
    clip-path: inset(0 var(--sidebar-recuo) 0 0 round var(--radius-card));
    overflow: hidden;
    transition: clip-path var(--sidebar-abre);
    will-change: clip-path;
    contain: layout;
  }

  .sidebar.sidebar-open {
    clip-path: inset(0 0 0 0 round var(--radius-card));
  }

  /* A página acompanha a barra: recua e encolhe com a abertura, cresce com o
     recolhimento (decisão do usuário, 29/08/2026 — antes a faixa SOBREPUNHA o
     conteúdo, e a margem seguia só a faixa).

     Mas a mudança é INSTANTÂNEA, sem transição própria — só a barra desliza.

     Motivo, medido em 30/08/2026 com a marcação real dos cards de dia: animar
     a largura do conteúdo é layout a cada quadro, e o custo acompanha o número
     de nós na tela — 2ms com 31 cards, 7,5ms com 90, 21,8ms com 200 e 46ms com
     400, contra um orçamento de 16,7ms a 60fps. Registros passa desse ponto e
     era exatamente onde travava.

     Não existe aproximação por compositor para isto: `transform` não
     redimensiona. A barra superior tem ações alinhadas à direita, que NÃO se
     movem, e a página é centralizada com `max-width`, então se desloca por uma
     distância diferente da margem — um único translate erraria as duas.

     Com a mudança instantânea o refluxo acontece UMA vez em vez de ~20, e o
     movimento que se vê é o da barra, que corre no compositor. Na abertura o
     conteúdo abre espaço e a barra desliza para dentro dele; no recolhimento o
     conteúdo já volta ao lugar e é revelado conforme a barra sai por cima.
     Para devolver o deslizamento do conteúdo, o caminho é reduzir o que
     Registros desenha de uma vez, não reanimar a largura. */
  .main-content {
    margin-left: calc(var(--sidebar-rail) + var(--sidebar-folga));
    width: calc(100% - var(--sidebar-rail) - var(--sidebar-folga));
    transition: margin-left var(--sidebar-abre), width var(--sidebar-abre);
  }

  /* Aberta, a barra ocupa folga + largura: o conteúdo começa depois das duas,
     senão o painel passaria por cima dos primeiros pixels da página. */
  .sidebar.sidebar-open + .main-content {
    margin-left: calc(var(--sidebar-width) + var(--sidebar-folga));
    width: calc(100% - var(--sidebar-width) - var(--sidebar-folga));
  }

  /* No recolhimento a página volta para a faixa. A regra continua existindo
     porque o tempo é o do fechamento, e não o da abertura; a `.sidebar-open`
     saiu do seletor junto com o fechamento em duas etapas (16/09/2026). */
  .sidebar.sidebar-closing + .main-content {
    margin-left: calc(var(--sidebar-rail) + var(--sidebar-folga));
    width: calc(100% - var(--sidebar-rail) - var(--sidebar-folga));
    transition: margin-left var(--sidebar-recolhe), width var(--sidebar-recolhe);
  }

  /* ---- estado recolhido ---- */

  /* Os rótulos do menu são nós de texto soltos dentro do <a>: não existe
     elemento para selecionar. font-size:0 no contêiner apaga o texto e o
     tamanho é devolvido ao ícone. */
  /* O ícone fica FIXO: mesma posição horizontal nos dois estados.
     Antes o recolhido centralizava o item (padding lateral zero) e o aberto
     usava padding de 12px — o ícone andava 2,1px para a esquerda ao abrir e
     voltava ao fechar, uma trepidação a cada passagem do ponteiro.
     O padding lateral é calibrado para que essa posição fixa caia no centro da
     faixa de 76px: o valor foi medido, não calculado: 14,17px daqui deixa o centro do ícone
     em 38px, exatamente o meio da faixa. */
  .sidebar .nav-link {
    padding-left: 14.17px;
    padding-right: 14.17px;
  }

  .sidebar:not(.sidebar-open) .nav-link {
    font-size: 0;
    gap: 0;
  }

  .sidebar:not(.sidebar-open) .nav-link > span {
    font-size: 17px;
    width: auto;
  }

  /* A marca e o cartão da empresa têm filhos com tamanho próprio, então
     font-size:0 no pai não basta — precisam sair da tela. Sem isto, "Jornada"
     e "Código da empresa" vazavam pela borda da faixa. */
  /* NADA acima do menu pode mudar de altura entre os dois estados. Enquanto
     mudava, abrir a barra empurrava os ícones para baixo — 41px no primeiro,
     216px no último — e o item sob o cursor fugia: quem mirava um ícone perdia
     a referência no meio do movimento.

     A marca precisa de altura fixa porque o texto de 46px é mais alto que a
     logo: apagá-lo encolheria o bloco. O valor é a altura natural do estado
     aberto, aplicada aos DOIS estados. */
  .sidebar .brand {
    min-height: 103px;
    box-sizing: border-box;
  }

  .sidebar:not(.sidebar-open) .brand {
    font-size: 0;
    gap: 0;
  }

  .sidebar:not(.sidebar-open) .workspace {
    justify-content: center;
    gap: 0;
  }

  /* Rótulos de seção somem com `visibility`, não com `display`: assim a caixa
     continua ocupando a mesma altura e os ícones abaixo não se movem.
     `nowrap` é parte da correção: invisível, o texto continua sendo diagramado,
     e "ESPAÇO DE TRABALHO" quebrava em três linhas dentro da faixa de 76px —
     45px contra 15px do estado aberto, exatamente o empurrão que sobrava. */
  .sidebar:not(.sidebar-open) .workspace-label,
  .sidebar:not(.sidebar-open) .menu-label {
    visibility: hidden;
    white-space: nowrap;
  }

  .sidebar:not(.sidebar-open) .workspace strong,
  .sidebar:not(.sidebar-open) .workspace small,
  .sidebar:not(.sidebar-open) .workspace .chevron,
  .sidebar:not(.sidebar-open) .nav-link b,
  .sidebar:not(.sidebar-open) .user-card strong,
  .sidebar:not(.sidebar-open) .user-card small,
  .sidebar:not(.sidebar-open) .user-card > span:last-child {
    display: none;
  }

  .sidebar:not(.sidebar-open) .user-card {
    justify-content: center;
    gap: 0;
    padding: 7px;
  }

  /* O cadeado de menu bloqueado é ::after com margin-left:auto; na faixa
     estreita empurraria o ícone para fora. */
  .sidebar:not(.sidebar-open) .nav-link.nav-locked::after {
    display: none;
  }
}

/* Centralização única para TODOS os diálogos. O <dialog> nativo centraliza na
   janela; deslocar meia-faixa para a direita o põe no centro do CONTEÚDO. A
   propriedade independente `translate` não substitui transforms próprios de
   cards especiais. A regra também não depende de `:modal`: no fechamento o
   elemento conserva a posição enquanto termina seu fade. */
@media (min-width: 721px) {
  dialog {
    translate: calc((var(--sidebar-rail) + var(--sidebar-folga)) / 2) 0;
  }
}

/* As abas do cadastro de pessoa estabelecem contexto de formatação próprio.
   Sem isso a margem do último bloco de cada aba ESCAPA do painel e entra na
   altura do diálogo por fora do `min-height` que iguala as abas — numa tela
   alta, "Jornada e acessos" ficava 15px mais alta que as outras.
   O `:not(.hidden)` é obrigatório: sem ele esta regra venceria o `display:none`
   que esconde as abas inativas. */
.employee-tab:not(.hidden) {
  display: flow-root;
}

/* ==========================================================================
   Identidade da empresa e ajuda na barra superior (17/08/2026)

   Saíram da barra lateral para o menu de ícones caber sem rolagem própria.
   Um menu de ícones com barra de rolagem perde a única vantagem que ele tem:
   o alvo estar sempre no mesmo lugar.
   ========================================================================== */

.top-actions .topbar-workspace {
  display: flex;
  align-items: center;
  gap: 9px;
  /* Altura e margem explícitas: .workspace traz min-height:52px e
     margin-bottom da barra lateral. min-height vence height, e a margem
     desalinhava a pílula em relação aos vizinhos da barra superior.
     40px é a altura dos outros itens da linha. */
  height: 40px;
  min-height: 40px;
  margin: 0;
  max-width: 230px;
  padding: 0 14px 0 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--ink);
  text-decoration: none;
}

/* Personalização discreta da empresa. É o primeiro item do bloco direito e
   só existe visualmente quando a imagem privada já foi carregada. */
.top-actions .topbar-company-logo {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  height: 40px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
}
.top-actions .topbar-company-logo.hidden { display: none; }
.top-actions .topbar-company-logo.is-square { width: 40px; border-radius: 50%; padding: 5px; }
.top-actions .topbar-company-logo.is-wide { width: 78px; border-radius: var(--radius-pill); padding: 6px 9px; }
.top-actions .topbar-company-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }

.top-actions .topbar-workspace:hover {
  border-color: #a9c0ff;
  background: #f6f8ff;
}

.top-actions .topbar-workspace .workspace-details {
  display: grid;
  min-width: 0;
}

.top-actions .topbar-workspace strong,
.top-actions .topbar-workspace small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-actions .topbar-workspace strong {
  font-size: 12px;
  line-height: 1.25;
}

.top-actions .topbar-workspace small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
}

/* A ajuda vira um botão redondo de ícone, igual aos vizinhos da barra: o rótulo
   "Central de ajuda" fica só como texto acessível. */
.top-actions .topbar-help {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: #65758b;
  font-size: 0; /* esconde o texto sem removê-lo do leitor de tela */
}

.top-actions .topbar-help:hover {
  border-color: #a9c0ff;
  background: #f6f8ff;
  color: var(--color-primary);
}

.top-actions .topbar-help .nav-icon {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  font-size: 19px;
}

.top-actions .topbar-help .nav-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

@media (max-width: 900px) {
  /* Sem largura para tudo: some o texto da empresa, fica a sigla. */
  .top-actions .topbar-workspace .workspace-details { display: none; }
  .top-actions .topbar-workspace { max-width: none; padding: 5px; }
}

/* ==========================================================================
   Faixa de ícones: logo menor e rótulos de seção viram divisores
   ========================================================================== */

@media (min-width: 721px) {
  /* A logo ocupava 124px — quase um sexto da altura útil. */
  .sidebar .brand {
    min-height: 62px;
    padding: 0 11px 14px;
    font-size: 30px;
  }

  .sidebar .brand-mark img {
    height: 34px;
  }

  /* Agora existe elemento para o nome: dá para escondê-lo direto, sem apagar a
     fonte do contêiner inteiro. */
  .sidebar:not(.sidebar-open) .brand-name {
    display: none;
  }

  /* Rótulo de seção na faixa estreita: o texto some e no lugar fica um traço.
     É a solução consagrada em barras de ícones (VS Code, Slack, Linear): a
     função do rótulo é AGRUPAR, e na largura de ícone não há espaço para texto
     legível — o traço comunica o mesmo agrupamento de relance, e o nome volta
     quando a barra abre.

     A caixa mantém a MESMA altura nos dois estados (o traço é desenhado por
     um pseudo-elemento posicionado, que não ocupa espaço), então os ícones
     continuam sem se mover ao abrir. */
  .sidebar .menu-label {
    position: relative;
  }

  .sidebar:not(.sidebar-open) .menu-label::before {
    content: "";
    visibility: visible; /* o pai está com visibility:hidden */
    position: absolute;
    top: 50%;
    left: 12px;
    /* O menu tem largura fixa agora; sem o recuo o traço atravessaria a faixa
       inteira em vez de ficar do tamanho do ícone. */
    right: calc(12px + var(--sidebar-recuo));
    height: 1px;
    background: #2b3f5c;
  }
}

/* O painel está em zoom 1.2. A barra é desenhada 20% mais alta que a janela,
   então uma tela que ainda passa de 940px de altura CSS já corta o fim do
   menu. 1130px é 940 × 1.2: o outro computador caía abaixo de 940 e
   compactava; este ficava no meio e a lista não cabia. */
@media (min-width: 721px) and (max-height: 1130px) {
  .sidebar .brand {
    min-height: 54px;
    padding: 0 11px 10px;
  }

  /* .brand-mark tem altura fixa de 52px no styles.css, independente da logo:
     encolher a imagem sozinha não devolvia espaço nenhum. */
  .sidebar .brand-mark {
    height: auto;
  }

  .sidebar .brand-mark img {
    height: 30px;
  }

  .sidebar .nav-link {
    min-height: 30px;
    margin: 1px 0;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  /* line-height e altura fixos: com valor relativo a caixa media diferente
     entre o estado com texto e o sem, e sobrava 1px de deslocamento ao abrir. */
  .sidebar .menu-label {
    margin-top: 9px;
    margin-bottom: 2px;
    height: 13px;
    line-height: 13px;
  }

  .sidebar .user-card {
    padding: 7px;
  }
}

/* Em notebooks muito baixos ainda existe uma segunda redução progressiva. A
   rolagem continua disponível como último recurso, mas os alvos preservam pelo
   menos 28px e não se sobrepõem. */
@media (min-width: 721px) and (max-height: 910px) {
  .sidebar {
    --sidebar-bottom-inset: 10px;
    padding-top: 14px;
    padding-bottom: 10px;
  }

  .sidebar .brand {
    min-height: 46px;
    padding-bottom: 7px;
  }

  .sidebar .brand-mark img { height: 27px; }

  .sidebar .nav-link {
    min-height: 28px;
    margin: 0;
    padding-top: 3px;
    padding-bottom: 3px;
  }

  .sidebar .menu-label {
    height: 10px;
    margin-top: 5px;
    margin-bottom: 1px;
    line-height: 10px;
  }
}

/* ==========================================================================
   Ajustes de 17/08/2026 (noite)
   ========================================================================== */

/* Quebra visual ao abrir a barra: enquanto a largura anima de 76px para 260px,
   os rótulos já estão presentes e eram diagramados dentro de uma caixa ainda
   estreita — quebravam em duas linhas e voltavam para uma, o "vai e volta" que
   aparecia sem deslocar nada no fim. Sem quebra de linha, o texto só é
   revelado conforme a barra abre. */
@media (min-width: 721px) {
  .sidebar .nav-link,
  .sidebar .brand,
  .sidebar .menu-label,
  .sidebar .workspace-label,
  .sidebar .user-card {
    white-space: nowrap;
  }
}

/* Faltava `.workspace-label` na lista acima, e era o que sobrava do "vai e
   volta": "ESPAÇO DE TRABALHO" só recebia `nowrap` na regra do estado
   RECOLHIDO (`.sidebar:not(.sidebar-open)`). No primeiro quadro da abertura a
   classe `.sidebar-open` já está no elemento mas a largura ainda é a da faixa,
   então o rótulo perdia o `nowrap`, quebrava em 3 linhas (12,5px → 37,5px) e
   empurrava TODOS os ícones 25px para baixo, que voltavam ao lugar quando a
   barra terminava de abrir. Medido nos dois eixos em larguras intermediárias
   (76/120/180/260px): com esta linha, x e y dos ícones não mudam em nenhuma
   delas. */

/* "Novo" ao lado da busca: ação simples, não a ação dominante da tela. */
.topbar .topbar-new-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: #fff;
  color: #3a4b62;
  font-size: 13px;
  font-weight: 700;
}

.topbar .topbar-new-button:hover {
  border-color: #a9c0ff;
  background: #f6f8ff;
  color: var(--color-primary);
}

.topbar .topbar-new-button > span {
  color: var(--color-primary);
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
}


/* Busca e "Novo" formam um grupo: a .topbar distribui os filhos com
   space-between, e o botão solto como irmão direto ia parar no meio da barra,
   longe do campo a que pertence. */
.topbar .topbar-search-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  margin-right: auto;
}

.topbar .topbar-search-group .search {
  flex: 0 1 330px;
  min-width: 0;
}

/* ==========================================================================
   `.hidden` derrotado por regra de `display` de mesma força (17/08/2026)
   ==========================================================================

   `styles.css` define `.hidden{display:none}` — seletor de uma classe,
   especificidade (0,1,0). Qualquer `.outra-classe{display:algo}` tem a MESMA
   especificidade, e empate se resolve pela ORDEM. Toda regra que venha depois
   (folha carregada depois, ou <style> injetado no fim do <head> pelo app.js)
   vence, e o elemento fica IMPOSSÍVEL de esconder.

   Não dá erro em lugar nenhum: a classe é aplicada certinho, o JS acha que
   escondeu, e o elemento continua na tela. Foi assim que o aviso "Complete o
   cadastro da empresa" ficou preso com o cadastro inteiro preenchido.

   `.classe.hidden` tem especificidade (0,2,0) e vence sempre, independente da
   ordem das folhas — por isso a guarda é escrita assim, e não com !important.

   `.outline-button` é o caso com consequência real: o botão "+ Convidar
   usuário" é escondido para quem NÃO tem permissão de gerenciar usuários
   (`classList.toggle('hidden', !canManage)`) e aparecia para todo mundo.
   `tools/test-hidden-vencido-por-display.mjs` varre novas ocorrências.

   `.day-actions`, `.abono-config` e `.empty-state` hoje escondem por acidente:
   outra classe da mesma combinação tem `display:none` e ganha. Entram na lista
   mesmo assim — depender de qual classe irmã vence é frágil, e a linha custa
   nada. */
.outline-button.hidden,
.field-help.hidden,
.search.hidden,
.day-actions.hidden,
.abono-config.hidden,
.empty-state.hidden {
  display: none;
}

/* Fechamento: os rótulos saem JUNTO com a barra, não depois dela.

   O arranjo anterior era em duas etapas — a `.sidebar-open` ficava no elemento
   durante todo o recolhimento, para os rótulos continuarem desenhados enquanto
   a borda direita corria por cima deles, e só o `transitionend` encerrava a
   etapa. A intenção era fechar "da direita para a esquerda" em vez de dar um
   pulo. Na prática, o que se lia era o contrário: a faixa já estreita e os
   nomes ainda ocupando um pedaço dela por mais de um terço de segundo, sumindo
   de uma vez no fim. Pedido do dono, 16/09/2026, com a leitura dele: "eles não
   poderiam sumir ao mesmo tempo que o menu fecha?".

   Agora `.sidebar-closing` entra e `.sidebar-open` SAI no mesmo quadro: as
   regras de conteúdo (`:not(.sidebar-open)`) recolhem imediatamente e a classe
   que sobra serve só para o tempo do movimento ser o do fechamento
   (--sidebar-recolhe) em vez do da abertura. A barra continua deslizando; o que
   deixou de esperar é o texto. */
@media (min-width: 721px) {
  .sidebar.sidebar-closing {
    clip-path: inset(0 var(--sidebar-recuo) 0 0 round var(--radius-card));
    transition: clip-path var(--sidebar-recolhe);
  }
}

/* O .menu nasce com `overflow: auto`, que vale para os DOIS eixos. Na faixa
   estreita o rótulo em linha única (o `nowrap` que corrigiu a quebra durante a
   animação) fica bem mais largo que os 76px, e aparecia uma barra de rolagem
   horizontal no menu. Rolar na horizontal nunca faz sentido aqui: o que passa
   da borda é justamente o texto que deve ficar escondido enquanto recolhido. */
.sidebar .menu {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin-bottom: 55px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Seções têm sempre a altura natural. `flex-grow` aqui foi um erro: na tela
   real, que também recebe Banco de horas via JS, ele convertia toda a sobra em
   vãos gigantes entre os grupos e empurrava o fim da lista para fora da área
   visível. A sobra pertence ao final do conteúdo; quando não cabe, o nav rola. */
.sidebar .menu-section {
  flex: 0 0 auto;
  min-width: 0;
}

/* A rolagem continua natural por roda, trackpad e toque, mas a barra visual
   some. Num rail de 76px ela parecia um segundo elemento de navegação e ainda
   roubava largura dos ícones. */
.sidebar .menu::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Hover e seleção são duas peças móveis com a mesma geometria. Assim a prévia
   cinza marca exatamente a área do clique e o indicador azul pode deslizar por
   cima dela sem mudança de largura, altura ou raio no instante da seleção. */
.sidebar-hover-indicator,
.sidebar-active-indicator {
  position: absolute;
  top: 0;
  left: 7px;
  right: 7px;
  border-radius: 12px;
  pointer-events: none;
}

.sidebar-hover-indicator {
  z-index: 0;
  height: var(--sidebar-hover-height, 38px);
  border: 1px solid rgba(188, 205, 229, .08);
  background: rgba(255, 255, 255, .055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .018);
  opacity: 0;
  transform: translate3d(0, var(--sidebar-hover-y, 0px), 0);
  transition:
    transform .18s cubic-bezier(.22, .82, .28, 1),
    height .16s ease,
    right var(--sidebar-abre),
    opacity .12s ease;
}

.sidebar-hover-indicator.is-ready { opacity: 1; }

/* O indicador selecionado fica acima do hover. Ao clicar, ele percorre o menu
   e cobre a prévia cinza no destino, em vez de apagá-la antes de chegar. */
.sidebar-active-indicator {
  z-index: 1;
  height: var(--sidebar-active-height, 38px);
  border: 1px solid rgba(122, 168, 255, .38);
  background: linear-gradient(135deg, #3a5d8e, #263f63);
  box-shadow: inset 3px 0 0 #78a8ff, 0 8px 22px rgba(4, 15, 33, .18);
  opacity: 0;
  transform: translate3d(0, var(--sidebar-active-y, 0px), 0);
  transition:
    transform .42s cubic-bezier(.18, .9, .26, 1.12),
    height .24s ease,
    left .26s ease,
    right var(--sidebar-abre),
    opacity .16s ease;
}

.sidebar-active-indicator.is-ready { opacity: 1; }

/* A barra não muda mais de largura, então o menu também não: a pílula, que se
   estica de borda a borda dele, ficaria com os mesmos 217px na faixa estreita
   e chegaria cortada na borda, sem o canto arredondado da direita. O recuo do
   lado direito devolve exatamente a pílula de antes — 231 - 7 - (7 + 184) =
   33px, o mesmo valor que a largura animada produzia — e anda na mesma
   duração e curva da barra, senão o realce chegaria antes ou depois dela.

   `.sidebar-closing` entra na lista porque durante o recolhimento a classe
   `.sidebar-open` ainda está no elemento: sem ela a pílula só encolheria no
   último quadro, de uma vez. */
@media (min-width: 721px) {
  .sidebar:not(.sidebar-open) .sidebar-hover-indicator,
  .sidebar:not(.sidebar-open) .sidebar-active-indicator,
  .sidebar.sidebar-closing .sidebar-hover-indicator,
  .sidebar.sidebar-closing .sidebar-active-indicator {
    right: calc(7px + var(--sidebar-recuo));
  }

  .sidebar.sidebar-closing .sidebar-hover-indicator,
  .sidebar.sidebar-closing .sidebar-active-indicator {
    --sidebar-abre: var(--sidebar-recolhe);
  }
}

.sidebar-active-indicator.is-moving[data-direction="down"] {
  animation: sidebar-liquid-down .42s ease both;
}

.sidebar-active-indicator.is-moving[data-direction="up"] {
  animation: sidebar-liquid-up .42s ease both;
}

@keyframes sidebar-liquid-down {
  0%, 100% { border-radius: 12px; filter: saturate(1); }
  45% { border-radius: 10px 10px 17px 17px; filter: saturate(1.14); }
}

@keyframes sidebar-liquid-up {
  0%, 100% { border-radius: 12px; filter: saturate(1); }
  45% { border-radius: 17px 17px 10px 10px; filter: saturate(1.14); }
}

.sidebar .menu .nav-link,
.sidebar .menu .menu-label {
  position: relative;
  z-index: 2;
}

.sidebar .menu .nav-link {
  background: transparent;
  transition: color .2s ease, transform .24s cubic-bezier(.22, .82, .28, 1), background-color .2s ease;
}

.sidebar .menu .nav-link:hover:not(.active) {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.sidebar .menu .nav-link.active {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: #fff;
}

.sidebar .menu .nav-link .nav-icon {
  transition: color .2s ease, transform .3s cubic-bezier(.2, .9, .25, 1.2);
}

.sidebar .menu .nav-link.active .nav-icon {
  color: #a9c7ff;
  transform: translateY(-1px) scale(1.06);
}

/* A página nova entra na mesma direção percorrida pelo indicador do menu. A
   antiga sai imediatamente do fluxo para não somar alturas nem deslocar a
   rolagem; 12px são suficientes para comunicar direção sem parecer carrossel. */
.page.page-enter-from-below { animation: page-enter-from-below .28s cubic-bezier(.22, .82, .28, 1) both; }
.page.page-enter-from-above { animation: page-enter-from-above .28s cubic-bezier(.22, .82, .28, 1) both; }

@keyframes page-enter-from-below {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes page-enter-from-above {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .sidebar > *,
  .sidebar-hover-indicator,
  .sidebar-active-indicator,
  .sidebar .menu .nav-link,
  .sidebar .menu .nav-link .nav-icon {
    transition: none !important;
    animation: none !important;
  }

}

/* ==========================================================================
   Exceção dentro da exceção: o movimento que COMUNICA continua (16/09/2026)
   ==========================================================================

   O bloco acima existe para respeitar `prefers-reduced-motion`, e continua
   valendo para o que é decoração: a escala dos diálogos,
   as keyframes "líquidas" do realce. Só que ele também apagava as duas coisas
   que não são enfeite — a barra abrindo e o realce andando até o item
   escolhido. Sem elas a interface não fica mais calma, fica sem explicar o que
   acabou de acontecer: o menu simplesmente "estava fechado e agora está
   aberto". Foi exatamente esse o relato que atravessou quatro rodadas desta
   tarefa, e a preferência ligada na máquina de quem pediu é o que o explicava.

   Pedido explícito do dono, 16/09/2026. `animation` segue desligada aqui, então
   nenhuma keyframe decorativa volta; o que volta é `transition` em transform,
   clip-path, right/left, height e opacity — estado, não espetáculo.

   O conteúdo principal e a entrada das páginas também mantêm seu movimento,
   por pedido do dono em 16/09/2026. A margem/largura seguem os tempos do menu;
   sob movimento reduzido, a troca de página usa a entrada CSS como fallback.

   Se um dia isso incomodar alguém que ligou a preferência de propósito, o
   caminho não é apagar este bloco: é uma preferência do próprio app, por
   aparelho, escolhendo entre os dois. */
@media (prefers-reduced-motion: reduce) and (min-width: 721px) {
  .sidebar {
    transition: clip-path var(--sidebar-abre) !important;
  }

  .sidebar.sidebar-closing {
    transition: clip-path var(--sidebar-recolhe) !important;
  }

  .sidebar-hover-indicator {
    transition:
      transform .18s cubic-bezier(.22, .82, .28, 1),
      height .16s ease,
      right var(--sidebar-abre),
      opacity .12s ease !important;
  }

  .sidebar-active-indicator {
    transition:
      transform .42s cubic-bezier(.18, .9, .26, 1.12),
      height .24s ease,
      left .26s ease,
      right var(--sidebar-abre),
      opacity .16s ease !important;
  }
}


/* Botão de atualizar da barra superior. O ícone segue a mesma régua do sino
   (.topbar-bell): 20px e traço 1.75, com o círculo vindo das classes
   compartilhadas .icon-button/.topbar-round-button. Nada de tamanho próprio —
   foi o que deixou o botão espremido e com o ícone fora de escala. */
/* Mesmo contexto do invólucro do sino (.notifications-wrap). */
.topbar-sync-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.topbar-sync-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.topbar .topbar-sync-button:hover {
  color: var(--color-primary);
}

/* Gira ANTI-HORÁRIO: as setas do ícone apontam nesse sentido, e girar ao
   contrário fazia a animação brigar com o próprio desenho. */
.topbar .topbar-sync-button.is-syncing .topbar-sync-icon {
  animation: topbar-sync-spin .9s linear infinite;
}

.topbar .topbar-sync-button.is-error {
  color: var(--color-danger);
}

@keyframes topbar-sync-spin {
  to { transform: rotate(-360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .topbar .topbar-sync-button.is-syncing .topbar-sync-icon { animation: none; opacity: .5; }
}

/* Busca e "Novo" com a MESMA altura exata. A busca fechava em 48,2px (altura
   vinda do conteúdo + padding) contra 48px do botão: uma diferença de fração
   de pixel que o navegador arredonda para lados opostos em cima e embaixo, e
   as bordas das duas pílulas apareciam desencontradas em ~1px. */
.topbar .topbar-search-group .search,
.topbar .topbar-search-group .topbar-new-button {
  height: 48px;
  min-height: 48px;
}

/* Centralização ÓTICA do texto nas duas pílulas.
   Geometricamente as caixas já estavam centradas — o desvio estava na tinta: a
   caixa da linha reserva espaço para ascendentes e descendentes, e sobrava mais
   respiro em cima do que embaixo. Medido dentro da pílula de 48px:
   busca 20px acima × 16px abaixo (2px baixa), "Novo" 19,5 × 18,5 (0,5px baixa).
   O padding assimétrico devolve esse tanto para cima; com a altura fixa, ele
   desloca o conteúdo sem mudar o tamanho da pílula. */
/* Vale para TODA pílula de busca, não só a da barra superior: são o mesmo
   componente (.search, padding 8px 13px, texto de 12px) em Pessoas, Jornadas,
   Férias, Desligamentos, Unidades e Central de Assinaturas. Corrigir só uma
   deixaria as outras oito destoando dela. */
.search {
  padding-top: 6px;
  padding-bottom: 10px;
}

.topbar .topbar-search-group .topbar-new-button {
  padding-top: 0;
  padding-bottom: 1px;
}

/* Dica no próprio botão de ação (26/08).
   Mesmo desenho do balão de `.j-field-tip` (floating-fields.css): mesma caixa
   branca, mesma borda, mesmo corpo de 10px e o mesmo fade. O que muda é só o
   gatilho — o alvo passou a ser a ação inteira, e não um "i" de 15px ao lado
   dela. Duplicar a aparência aqui é deliberado: a dica do campo continua
   ancorada num elemento próprio, com a decisão de lado feita em JS, enquanto
   esta nasce sempre num grupo alinhado à direita.

   Abre para a ESQUERDA por definição: o grupo de ações é o último elemento do
   cabeçalho, então há espaço sobrando para dentro da página e nenhum para
   fora. Ancorada à esquerda, os 270px do balão passariam da margem e criariam
   barra de rolagem horizontal — foi o que já aconteceu com a dica do campo. */
.j-action-tip {
  position: relative;
}

/* Fechado por VISIBILIDADE, e não por `display`. A dica de campo
   (floating-fields.css) usa `display:none` + `allow-discrete` e funciona, mas
   ali o balão pertence a um ícone de 15px, que fica dentro do próprio botão;
   aqui a caixa tem 270px e nasce ancorada à borda direita do grupo de ações.
   `visibility` mantém a caixa fora do alcance do ponteiro e dos leitores de
   tela sem depender do comportamento discreto do `display`, que não respeita
   atraso (medido: a caixa aparecia em 0,06s).

   O desenho do balão é o mesmo da dica de campo; o que muda é só como ele
   entra e sai de cena. */
.j-action-tip::after {
  content: attr(data-tip);
  position: absolute;
  /* Abaixo da .topbar (50) e acima do conteúdo da página, igual à dica de
     campo. Ver test-camada-topbar-20260821. */
  z-index: 45;
  /* ACIMA do botão. Embaixo, a caixa nascia exatamente onde o ponteiro estava
     parado — é preciso parar em cima do botão para a dica abrir, então o cursor
     ficava sempre sobre o texto dela. */
  bottom: calc(100% + 8px);
  top: auto;
  right: 0;
  left: auto;
  width: min(270px, 72vw);
  padding: 9px 11px;
  border: 1px solid #d9e3ef;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(18, 39, 68, .16);
  color: #42566f;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  /* Nasce 3px abaixo e sobe, acompanhando a direção em que ela aparece. */
  transform: translateY(3px);
  /* Ao FECHAR a visibilidade só cai depois do fade, senão a caixa some de uma
     vez no meio dele. */
  transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
}

/* Um estado só, posto por action-tip.js. Não há `:hover` aqui de propósito: a
   espera antes de abrir é intenção do usuário, e as duas
   tentativas de expressá-la em CSS falharam no navegador (o histórico está no
   cabeçalho de action-tip.js). O teclado abre pelo mesmo caminho, sem espera. */
.j-action-tip.is-open::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  /* `transition` PRÓPRIA, e não a herdada da regra base: lá a visibilidade tem
     atraso de .14s, para a caixa continuar na tela durante o fade de saída. Ao
     ABRIR esse mesmo atraso deixaria o balão escondido pelo fade inteiro, e ele
     apareceria de estalo no fim. Aqui a visibilidade vem primeiro e a opacidade
     sobe por cima dela. */
  transition: opacity .14s ease, transform .14s ease, visibility 0s linear;
}

/* Só o fade sai. A espera continua: ela não é animação, é a
   distinção entre parar no botão e passar por cima dele — e agora vive no
   temporizador de action-tip.js, fora do alcance desta media query. */
@media (prefers-reduced-motion: reduce) {
  .j-action-tip::after {
    transition: visibility 0s linear;
  }
}

/* Pedido de documentos sigilosos na Central. A foto fica junto das ações à
   direita e só é baixada ao clicar, no visualizador padrão de foto de ponto. */
.individual-requests-panel .approval-rows { display: flex; flex-direction: column; gap: 10px; }
.individual-request-row { align-items: flex-start; gap: 16px; }
.individual-request-main { display: flex; gap: 14px; align-items: flex-start; flex: 1; min-width: 0; }
.individual-request-photo-button { min-width: 64px; min-height: 36px; padding: 8px 14px; }
.individual-request-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.individual-request-info strong { font-size: 15px; }
.individual-request-info > p { margin: 0; color: var(--color-text-soft, #6b7280); font-size: 13px; }
.individual-request-note { font-style: italic; }
.individual-grant-line { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-top: 6px; cursor: pointer; }
.individual-grant-line input { width: 16px; height: 16px; }
.individual-grant-punch small { color: var(--color-text-soft, #9aa0b0); font-size: 12px; }
.individual-grant-punch input:disabled { opacity: .5; }
.individual-request-actions { display: flex; gap: 8px; flex: 0 0 auto; align-items: center; }
.individual-request-history { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--color-border, #e1e6ee); }
.individual-history-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 8px; }
.individual-history-heading h3 { margin: 0; font-size: 15px; color: var(--color-text, #18253a); }
.individual-history-heading p, .individual-history-heading span { margin: 4px 0 0; font-size: 12px; color: var(--color-text-soft, #6b7280); }
.individual-history-rows { display: flex; flex-direction: column; }
.individual-history-row { display: grid; grid-template-columns: minmax(180px, 1.35fr) auto minmax(150px, .9fr) minmax(170px, 1fr); align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--color-border, #edf0f4); }
.individual-history-row strong { font-size: 13px; }
.individual-history-row p { margin: 3px 0 0; font-size: 12px; color: var(--color-text-soft, #6b7280); }
.individual-history-status { justify-self: start; border-radius: 999px; padding: 5px 9px; font-size: 11px; font-weight: 750; }
.individual-history-status.approved { color: #087a5b; background: #e7f8f1; }
.individual-history-status.denied { color: #b33b4b; background: #ffedef; }
.individual-history-terms { margin: 0 !important; }
@media (max-width: 640px) {
  .individual-request-row { flex-direction: column; }
  .individual-request-actions { width: 100%; justify-content: flex-end; }
  .individual-history-row { grid-template-columns: 1fr auto; }
  .individual-history-decision, .individual-history-terms { grid-column: 1 / -1; }
}

/* Fase 3 — revisão de comprovantes (aba Comprovantes em Recibos de pagamento). */
.send-payroll-dialog { width:min(820px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow-x:hidden; }
.send-payroll-dialog, .send-payroll-dialog * { box-sizing:border-box; }
.send-payroll-dialog form { min-width:0; }
.comprovante-review-summary { font-size: 13px; color: var(--color-text-soft, #6b7280); margin: 12px 0 8px; }
.comprovante-review-list { display:grid; gap:12px; min-width:0; }
.comprovante-review-card { display:grid; gap:14px; min-width:0; padding:16px; border:1px solid var(--color-border,#dfe5ee); border-radius:14px; background:#fff; }
.comprovante-review-card-head { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(150px,.65fr); gap:18px; align-items:start; }
.comprovante-review-card-head > div { display:grid; gap:3px; min-width:0; }
.comprovante-review-card span, .comprovante-review-card label { font-size:11px; font-weight:750; letter-spacing:.04em; text-transform:uppercase; color:var(--color-text-soft,#7f8ba0); }
.comprovante-review-card strong { color:var(--ink,#15213a); overflow-wrap:anywhere; }
.comprovante-review-card small { display:block; color:var(--color-text-soft,#7f8ba0); font-size:11px; font-weight:500; letter-spacing:0; line-height:1.35; text-transform:none; overflow-wrap:anywhere; }
.comprovante-review-value { text-align:right; }
.comprovante-review-links { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; min-width:0; }
.comprovante-review-links label { display:block; min-width:0; }
.comprovante-review-card .comprovante-employee,
.comprovante-review-card .comprovante-payroll { display:block; width:100%; min-width:0; margin-top:6px; padding:9px 10px; border:1px solid var(--color-border,#d9dde5); border-radius:9px; font-size:13px; font-weight:500; letter-spacing:0; text-transform:none; background:#fff; color:var(--ink,#15213a); }
.comprovante-review-card .comprovante-payroll:disabled { background:#f5f7fa; color:var(--color-text-soft,#9aa0b0); }
.comprovante-review-card footer { display:flex; align-items:center; justify-content:space-between; gap:14px; padding-top:11px; border-top:1px solid var(--color-border,#eceef3); }
.comprovante-match { display: inline-block; margin-top: 4px; font-size: 11px; }
.comprovante-match.cpf { color: var(--color-success, #1a9c5b); }
.comprovante-match.name { color: var(--color-warning, #c07a00); }
.comprovante-match.none { color: var(--color-text-soft, #9aa0b0); }
.comprovante-row-error { color:var(--color-warning,#c07a00); font-size:12px; background:var(--color-warning-soft,#fff6e6); }
/* Comprovante que já está no Jornada: aparece inteiro, com o valor e a pessoa,
   mas sem os campos de distribuir — não há o que decidir aqui. */
.comprovante-row-duplicate { background:var(--color-warning-soft,#fff6e6); border-color:var(--color-warning,#c07a00); }
.comprovante-duplicate-note { margin:0; font-size:12px; line-height:1.45; color:var(--color-warning,#a86a00); }
.comprovante-duplicate-note strong { color:var(--color-warning,#a86a00); }
.comprovante-review-note { font-size: 12px; color: var(--color-text-soft, #9aa0b0); margin-top: 8px; }
@media(max-width:680px){
  .send-payroll-dialog { width:calc(100vw - 20px); max-height:calc(100dvh - 20px); padding-inline:18px; }
  .comprovante-review-card-head, .comprovante-review-links { grid-template-columns:1fr; }
  .comprovante-review-value { text-align:left; }
  .comprovante-review-card footer { align-items:flex-start; flex-direction:column; gap:4px; }
  #comprovanteSendActions { flex-wrap:wrap; }
  #comprovanteSendActions > button { flex:1 1 180px; }
}

/* Auditoria financeira unificada: uma pessoa/mês, um holerite e N recibos. */
.payroll-payment-audit-panel { container-type: inline-size; }
/* Só a moldura do bloco. A GRADE de dentro é a `.filtro-padrao`, comum às três
   telas que recortam pessoas — esta tela já teve a sua, de doze colunas, com
   `display:contents` no `.filter-grid` e `grid-column` fixo por `nth-child`.
   As duas brigaram: `.filtro-padrao` impõe `display:grid !important`, então o
   `.filter-grid` voltou a ser grade de QUATRO colunas, mas os `grid-column: 8`
   herdados continuavam mandando os campos para colunas que já não existiam.
   Unidade e Status saíam da moldura como bolhas soltas, e o "Filtro mensal"
   sobrava espremido no meio da tela. */
.payroll-payment-audit-filters {
  margin: 14px 0 0;
  padding: 10px;
  border: 1px solid var(--color-border, #e1e7f0);
  border-radius: 12px;
  background: #f8faff;
}
.payroll-payment-audit-list { display: grid; gap: 14px; margin-top: 20px; }
.payroll-payment-audit-card { border: 1px solid var(--color-border, #e1e7f0); border-radius: 18px; background: #fff; overflow: hidden; box-shadow: 0 8px 24px rgba(34, 55, 86, .05); }
.payroll-payment-audit-card > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; background: #f8faff; border-bottom: 1px solid var(--color-border, #e9edf4); }
.payroll-payment-audit-card > header > div { display: grid; gap: 3px; }
.payroll-payment-audit-card > header strong { color: var(--color-text, #18253a); font-size: 15px; }
.payroll-payment-audit-card > header span:not(.payroll-reconciliation) { color: var(--color-text-soft, #71809a); font-size: 12px; }
.payroll-reconciliation { display: inline-flex; align-items: center; border-radius: 999px; padding: 6px 10px; font-size: 11px; font-weight: 750; white-space: nowrap; }
.payroll-reconciliation.success { color: #087a5b; background: #e7f8f1; }
.payroll-reconciliation.warning { color: #9a6400; background: #fff4d8; }
.payroll-reconciliation.danger { color: #b33b4b; background: #ffedef; }
.payroll-reconciliation.neutral { color: #66738a; background: #edf1f7; }
.payroll-payment-evidence-list { display: grid; gap: 8px; padding: 14px 18px; }
.payroll-payment-evidence { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 9px 12px; border: 1px solid #e6ebf3; border-radius: 12px; }
.payroll-payment-evidence > div { display: grid; gap: 3px; min-width: 0; }
.payroll-payment-evidence strong { color: var(--color-text, #18253a); font-size: 13px; overflow-wrap: anywhere; }

/* Uma linha por evidência.
   Rótulo, valor e detalhe ocupavam três linhas empilhadas, e um card com um
   holerite e dois recibos passava de dez linhas para dizer cinco números. Eles
   são a MESMA informação lida da esquerda para a direita — RECIBO · R$ 1.234,00
   · 03/09/2026 · Sicredi —, e é assim que se compara um com o outro.
   O que sobra vira reticências: o detalhe é conferência, não leitura corrida.

   O bloco "missing" fica de fora de propósito: ali o texto não é um dado, é a
   explicação de por que não há dado ("adiantamento pago antes do holerite
   existir?"), e cortá-la com reticências apagaria justamente a instrução. */
.payroll-payment-evidence:not(.missing) > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
}
.payroll-payment-evidence:not(.missing) > div > * { min-width: 0; }
.payroll-payment-evidence:not(.missing) small {
  overflow: hidden;
  text-overflow: ellipsis;
}
.payroll-payment-evidence:not(.missing) strong { flex: none; overflow-wrap: normal; }
.payroll-evidence-kind { flex: none; }
.payroll-payment-evidence small { color: var(--color-text-soft, #75839a); font-size: 11px; }
.payroll-payment-evidence.missing { border-style: dashed; background: #fbfcfe; }
.payroll-payment-evidence.missing strong { color: #8a6670; }
.payroll-evidence-kind { color: #4169db; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.payroll-payment-evidence.receipt .payroll-evidence-kind { color: #087a5b; }
.payroll-payment-audit-card > footer { display: flex; gap: 22px; padding: 12px 18px 15px; color: var(--color-text-soft, #71809a); font-size: 12px; border-top: 1px solid #eef1f6; }

/* ============================ Filtro padrão ==============================
   A MESMA ordem nas três telas que recortam pessoas — Holerites e comprovantes,
   as três abas da Central de assinaturas e Relatórios → Assinaturas:

     linha 1   colaborador · unidade · setor · cargo
     linha 2   filtro rápido · data inicial · data final · status

   Primeiro QUEM entra na lista, depois QUANDO e em que estado. Antes cada tela
   tinha a sua ordem (a Central começava por status, Holerites por datas), e
   quem passava de uma para a outra reprocurava o mesmo campo em outro lugar.

   A ordem é imposta por `order`, e não reescrevendo o HTML de cada tela: os
   campos nascem em pontos diferentes do código (uns no index.html, outros em
   template de app.js) e alguns são embrulhados em tempo de execução pelo rótulo
   flutuante. O `:has()` acha o campo dentro do invólucro, seja ele qual for. */
.filtro-padrao {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 14px;
  align-items: end;
}

#signatureCenterDialog .signature-center-toolbar.filtro-padrao {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* 9 é o "resto": campo que a tela tenha e que não esteja nesta lista cai depois
   dos oito previstos, em vez de furar a ordem. */
.filtro-padrao > * { order: 9; min-width: 0; }

/* A cápsula de busca é o CONTROLE da sua célula, e na grade padrão tem a altura
   de um campo. Solta, ela mede 38px; ao lado de seletores de 42px e com a grade
   alinhando pelo fim, sobrava um degrau de 4px no topo da linha — o mesmo
   desalinho que os atalhos de período já tinham resolvido logo abaixo. */
.filtro-padrao .search { min-height: var(--ui-control-height, 42px); }

/* O contador não é um campo: acompanha a base da linha, encostado à direita da
   sua célula, como já faz na barra de Pessoas. */
.filtro-padrao > .people-count { justify-self: end; white-space: nowrap; }
.filtro-padrao > .search,
.filtro-padrao > :has(> .search),
.filtro-padrao > :has([id$="EmployeeFilter"]),
.filtro-padrao > :has([id$="Search"]) { order: 1; }
.filtro-padrao > :has([id$="UnitFilter"]) { order: 2; }
.filtro-padrao > :has([id$="SectorFilter"]) { order: 3; }
.filtro-padrao > :has([id$="RoleFilter"]) { order: 4; }
.filtro-padrao > .filtro-rapido,
.filtro-padrao > .period-shortcuts { order: 5; }
/* O ano é um recorte de PERÍODO: entra na faixa do "quando", antes do estado.
   Sem esta linha ele cairia no 9 (o "resto") e apareceria DEPOIS de Situação,
   invertendo a leitura que o resto do bloco impõe. */
.filtro-padrao > :has([id$="YearFilter"]) { order: 6; }
.filtro-padrao > :has([id$="StartFilter"]) { order: 6; }
.filtro-padrao > :has([id$="EndFilter"]) { order: 7; }
.filtro-padrao > :has([id$="StatusFilter"]) { order: 8; }

/* O filtro mensal é um campo da linha. A pílula fica embaixo, na altura
   dos outros controles. O rótulo "Filtro mensal" não entra: o ícone e a
   palavra Mês já nomeiam. */
.filtro-rapido {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: flex-end;
  min-width: 0;
}

/* Sobrou de quando o filtro tinha um rótulo acima da pílula. O padrão
   atual não usa. Mantido para uma página antiga não perder o texto. */
.filtro-rapido-legenda {
  padding-left: 13px;
  color: var(--color-primary, #416eec);
  font-size: 10px;
  font-weight: 750;
  line-height: 14px;
}

/* A trilha segmentada É o controle desta célula, e tem de ter a altura de um
   campo. Zerar o `padding` colava a borda nas pílulas e a faixa terminava com
   ~30px de altura, ao lado de vizinhos de 42px — era isso que fazia a linha
   parecer torta, com quatro botõezinhos cinzas encolhidos entre duas caixas
   brancas altas. O recheio de 4px é o mesmo da pílula segmentada de origem. */
.filtro-padrao .period-shortcuts {
  display: flex;
  box-sizing: border-box;
  gap: 4px;
  width: 100%;
  height: var(--ui-control-height, 42px);
  margin: 0;
  padding: 4px;
}

/* Sem `wrap`: quatro atalhos numa faixa de 42px viravam DUAS linhas assim que
   a coluna apertava, e a célula crescia junto — o mesmo desalinho por outro
   caminho.

   `flex: 1 1 auto` e não `1 1 0`: dividir a faixa em quatro fatias IGUAIS dava
   61px a cada uma e cortava "Anterior" e "Atual + 2" com reticências numa
   trilha onde os quatro cabiam folgados. Partindo do tamanho do texto, cada um
   fica com o que precisa e a sobra é repartida. */
.filtro-padrao .period-shortcuts button {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 0 8px;
  overflow: hidden;
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Filtro mensal. A pílula é branca, com o calendário e a palavra Mês, e os
   quatro períodos na trilha cinza. A largura é a do campo de data ao lado:
   o lugar dela na grade tem o mesmo vão, e a pílula ocupa esse vão.

   O container query NÃO pode ficar na pílula solta: ela mede a própria
   largura pelo conteúdo e o container ignora o conteúdo. As duas coisas
   juntas zeravam a caixa — em Registros, Banco de horas e Relatórios sobrava
   um traço vertical. A consulta só entra quando a largura já vem da célula. */
.period-shortcuts.filtro-mensal,
#signatureCenterDialog .signature-toolbar-periods.filtro-mensal,
.signature-center-toolbar .signature-toolbar-periods.filtro-mensal {
  box-sizing: border-box;
  align-items: center;
  gap: 5px;
  width: max-content;
  max-width: 100%;
  height: var(--ui-control-height, 42px);
  margin: 0;
  padding: 4px 6px 4px 7px;
  border-color: #e3ebf4;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 35, 61, .045);
}

.filtro-padrao .period-shortcuts.filtro-mensal,
#signatureCenterDialog .signature-toolbar-periods.filtro-mensal,
.signature-center-toolbar .signature-toolbar-periods.filtro-mensal {
  container-type: inline-size;
  width: 100%;
  min-width: 0;
}

.record-filter .period-shortcuts.filtro-mensal,
.bank-filter .period-shortcuts.filtro-mensal,
.report-filter-panel .period-shortcuts.filtro-mensal {
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.bank-filter .filtro-rapido { margin-top: 0; }

.filtro-mensal .period-cal {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  padding-left: 2px;
  color: var(--color-primary, #416eec);
}

.filtro-mensal .period-cal svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.filtro-mensal .period-cal span {
  color: #18253a;
  font-size: 12px;
  font-weight: 760;
  line-height: 1;
  letter-spacing: -0.02em;
}

.filtro-mensal .period-track {
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  align-self: stretch;
  min-width: max-content;
  gap: 1px;
  margin-block: 1px;
  padding: 2px;
  border-radius: var(--radius-pill, 999px);
  background: #eef3f8;
}

.filtro-padrao .filtro-mensal .period-track { min-width: 0; }

.period-shortcuts.filtro-mensal button,
#signatureCenterDialog .signature-toolbar-periods.filtro-mensal button,
.signature-center-toolbar .signature-toolbar-periods.filtro-mensal button {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: auto;
  align-self: stretch;
  padding: 0 4px;
  font-size: 10px;
  letter-spacing: -0.02em;
}

/* O tamanho do container é a caixa interna. Em ~238px "Mês" ainda cabe;
   abaixo de 224px a palavra sai e fica o ícone, senão "Anterior" corta. */
@container (max-width: 224px) {
  .filtro-mensal .period-cal span { display: none; }
}

@media (max-width: 1180px) {
  .filtro-padrao,
  #signatureCenterDialog .signature-center-toolbar.filtro-padrao {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .filtro-padrao,
  #signatureCenterDialog .signature-center-toolbar.filtro-padrao {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* `.report-filter-panel .filter-grid` (reports.css) pesa mais que `.filtro-padrao`
   e vencia a disputa das colunas: Holerites e Relatórios → Assinaturas caíam
   para as três colunas dos relatórios, e os campos de `order` alto (Status,
   Filtro mensal) sobravam fora da grade. Repetir a classe do próprio elemento
   devolve a decisão para quem desenha a linha de filtros. */
.report-filter-panel .filter-grid.filtro-padrao { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) {
  .report-filter-panel .filter-grid.filtro-padrao { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .report-filter-panel .filter-grid.filtro-padrao { grid-template-columns: minmax(0, 1fr); }
}

/* Barra de páginas.
   Compartilhada pelas listas longas (Holerites e comprovantes, Central de
   assinaturas). Só aparece com mais de uma página — em quatro linhas ela seria
   ruído dizendo "1 de 1". O resumo à esquerda ("26–50 de 312") existe porque
   "página 2 de 13" sozinho não diz onde a pessoa está no conjunto. */
.lista-paginas {
  display: flex;
  align-items: center;
  /* Tudo à direita, alinhado com a coluna de ações da tabela: é para lá que o
     olho já vai depois de ler a última linha, e era de lá que a barra estava
     fugindo, presa na margem esquerda. */
  justify-content: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 10px 4px 2px;
  border-top: 1px solid #eef1f6;
  color: var(--color-text-soft, #71809a);
  font-size: 11px;
}

.lista-paginas-resumo { font-variant-numeric: tabular-nums; }

/* Quantos itens por vez. Fica no rodapé da própria lista, e não em
   Configurações: é uma decisão de leitura, tomada olhando a lista — e cada tela
   tem o seu ritmo, então a escolha é guardada por tela.

   É um BOTÃO que gira a roda (10 → 20 → 30 → 40 → 50 → 10), não uma lista para
   abrir. Escolher entre cinco números não vale uma caixa flutuante desenhada
   por cima da lista que a pessoa está lendo, e o <select> nativo custava dois
   cliques para andar um passo. Aqui o rótulo diz onde está ("20 por página") e
   o clique já mostra o próximo. */
.lista-paginas-tamanho {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  min-height: 26px;
  padding: 0 11px;
  border: 1px solid var(--ui-control-border, #dce3ec);
  border-radius: var(--radius-pill, 999px);
  background: #fff;
  color: var(--color-text-soft, #71809a);
  font: inherit;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.lista-paginas-tamanho strong {
  color: var(--color-text, #18253a);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.lista-paginas-tamanho:hover {
  border-color: var(--color-primary, #416eec);
  background: var(--color-primary-soft, #eef3fe);
  color: var(--color-primary, #416eec);
}

.lista-paginas-tamanho:hover strong { color: var(--color-primary, #416eec); }

.lista-paginas-tamanho:active { transform: translateY(1px); }

.lista-paginas-tamanho:focus-visible {
  outline: 2px solid var(--color-primary, #416eec);
  outline-offset: 1px;
}

.lista-paginas-botoes { flex: 0 0 auto; }

/* A barra não pode ser o que alarga a tabela: ela informa sobre a lista, não
   faz parte dela. */
.lista-paginas-linha > td > .lista-paginas { min-width: 0; }

/* A barra vive numa linha própria dentro do <tbody>; a célula não pode herdar
   a borda e o espaçamento das linhas de dados. */
.lista-paginas-linha > td {
  padding: 0 10px 4px !important;
  border-top: 0 !important;
}

.lista-paginas-botoes {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lista-paginas-atual {
  min-width: 62px;
  color: var(--color-text, #18253a);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.lista-paginas .row-button {
  min-width: 31px;
  padding: 0 10px;
  font-size: 14px;
  line-height: 1;
}

.lista-paginas .row-button[disabled] {
  opacity: .45;
  cursor: default;
}
.payroll-payment-audit-error { color: #b33b4b; padding: 18px; border-radius: 12px; background: #ffedef; }
@media (max-width: 760px) {
  .payroll-payment-audit-card > header, .payroll-payment-evidence { align-items: flex-start; flex-direction: column; }
  .payroll-payment-audit-card > footer { flex-direction: column; gap: 5px; }
  .payroll-reconciliation { white-space: normal; }
}

/* ==========================================================================
   "Fixar menu" — botão de ferramenta no rodapé (30/08/2026)
   ==========================================================================

   Só o alfinete fica visível, como uma ação de toolbar. Não há rótulo nem
   interruptor: `aria-pressed` expõe o estado para tecnologia assistiva e a
   inclinação de 45 graus comunica visualmente que o menu está fixo.
   ========================================================================== */

@media (min-width: 721px) {
  /* Sem `transform` na lista: com o recolhimento por corte, nada aqui se move.
     Ver o bloco do mecanismo, mais acima. */
  .sidebar .sidebar-toolbar {
    opacity: 1;
    transition:
      opacity .16s ease,
      border-color .16s ease;
  }

  .sidebar.sidebar-closing > .sidebar-toolbar {
    transition:
      opacity .12s ease,
      border-color .12s ease;
  }

  .sidebar .sidebar-pin {
    appearance: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin: 0 0 0 auto;
    padding: 0;
    border: 1px solid rgba(190, 208, 233, .1);
    border-radius: 50%;
    background: rgba(255, 255, 255, .035);
    color: #94a9c3;
    box-shadow: none;
    cursor: pointer;
    user-select: none;
    opacity: 1;
    transition:
      opacity .16s ease,
      transform .16s ease,
      color .16s ease,
      background-color .16s ease,
      border-color .16s ease,
      box-shadow .16s ease;
  }

  .sidebar .sidebar-pin:hover {
    border-color: rgba(169, 197, 255, .24);
    background: rgba(255, 255, 255, .075);
    color: #c8d9ff;
  }

  .sidebar .sidebar-pin:focus-visible {
    outline: 2px solid #8fb0ff;
    outline-offset: 3px;
  }

  .sidebar .sidebar-pin:active {
    transform: scale(.94);
  }

  .sidebar .sidebar-pin .nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    transform: rotate(0deg);
    transform-origin: center;
    transition: transform .24s cubic-bezier(.2, .9, .25, 1.2);
  }

  .sidebar .sidebar-pin .nav-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  html.menu-fixo .sidebar .sidebar-pin {
    border-color: rgba(143, 176, 255, .3);
    background: rgba(78, 119, 211, .22);
    color: #c8d9ff;
    box-shadow: inset 0 0 0 1px rgba(143, 176, 255, .08);
  }

  html.menu-fixo .sidebar .sidebar-pin .nav-icon {
    transform: rotate(45deg);
  }

  /* A toolbar só pertence ao menu aberto. `visibility` mantém os mesmos 55px
     no fluxo: retirar a caixa faria o menu rolável mudar de altura ao recolher. */
  .sidebar:not(.sidebar-open) .sidebar-toolbar {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  .sidebar.sidebar-closing .sidebar-toolbar {
    opacity: 0;
    pointer-events: none;
  }

  /* Some o traço sem tirar o pixel da borda do fluxo, pelo mesmo motivo. */
  .sidebar:not(.sidebar-open) .sidebar-toolbar {
    border-top-color: transparent;
  }

  /* O diálogo nativo centraliza na JANELA; meia faixa para a direita o põe no
     centro do CONTEÚDO. Com o menu fixo o conteúdo começa na largura aberta,
     então o deslocamento é o outro. */
  html.menu-fixo dialog {
    translate: calc((var(--sidebar-width) + var(--sidebar-folga)) / 2) 0;
  }

  /* A faixa encolheu de 76px para 64px (o token está lá em cima). Para o
        ícone continuar no CENTRO dela, o recuo lateral da barra acompanha:
        o ícone fica em `recuo + 14,17 + metade do ícone`, e isso precisa dar
        rail/2 — 8 + 14,17 + 9,55 = 31,7, contra os 32 do centro de 64.

        Mexer no recuo da BARRA, e não no dos itens, move marca, menu e rodapé
        juntos: a régua continua uma só. E como o layout agora é sempre o do
        estado aberto (ver o mecanismo de transform), nada disso se desloca
        entre um estado e outro — só a borda de corte muda de lugar.

        A pílula do realce e o traço dos rótulos de seção acompanham sozinhos:
        os dois são recuados 12px/7px das DUAS bordas do menu, então continuam
        centrados em qualquer largura de faixa. */
  .sidebar {
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* No celular a barra é uma gaveta que se abre pelo botão do topo: não há o que
   fixar. */
@media (max-width: 720px) {
  .sidebar-toolbar {
    display: none;
  }
}

/* Esta regra precisa vir depois da altura-base da sidebar. O zoom de 120%
   tambem amplia unidades de viewport dentro do body: 100dvh viraria 120% da
   janela e esconderia novamente a toolbar. A barra conserva a escala visual
   de todo o painel, mas sua altura de layout compensa o mesmo fator. */
@media (min-width: 1100px) {
  .sidebar {
    /* A folga do painel entra AQUI também. Esta regra vem depois da altura-base
       e a sobrescreve; sem repetir o desconto, o painel voltava a medir a janela
       inteira e a folga de baixo desaparecia — o canto inferior arredondado
       ficava fora da tela. */
    height: calc(83.333333vh - var(--sidebar-folga) * 2);
    height: calc(83.333333dvh - var(--sidebar-folga) * 2);
    max-height: calc(83.333333vh - var(--sidebar-folga) * 2);
    max-height: calc(83.333333dvh - var(--sidebar-folga) * 2);
  }
}

@media (min-width: 721px) and (prefers-reduced-motion: reduce) {
  .sidebar .sidebar-pin,
  .sidebar .sidebar-pin .nav-icon {
    transition: none;
  }
}
/* ==========================================================================
   O pulo de 1px do menu ao abrir (30/08/2026)
   ==========================================================================

   O menu inteiro subia 1px ao abrir e descia 1px ao fechar. A causa estava
   ACIMA dele: a marca media 46px recolhida e 47px aberta, e tudo abaixo herdava
   o deslocamento — medido item a item, os doze davam exatamente a mesma
   diferença.

   O `min-height` da marca existe justamente para as duas alturas serem iguais
   (ver "NADA acima do menu pode mudar de altura entre os dois estados"), mas
   ele só segura enquanto o conteúdo couber dentro dele. Recolhida, a marca não
   tem texto e o `min-height` manda. Aberta, o nome aparece: com entrelinha
   normal, uma fonte de 30px produz uma caixa de ~40px que, somada ao recuo de
   baixo, passa 1px do `min-height` — e aí quem manda é o conteúdo.

   `line-height: 1` tira o texto da disputa: a caixa dele passa a ser a própria
   altura da fonte, sempre menor que o espaço disponível, e o `min-height`
   volta a decidir sozinho nos DOIS estados e em todas as faixas de densidade
   (103px, 62px e 46px). Não mexe no tamanho nem na posição ótica do texto: o
   .brand centraliza os filhos no eixo vertical, e o glifo continua desenhado
   igual — só a caixa em volta dele encolhe. */
@media (min-width: 721px) {
  .sidebar .brand {
    line-height: 1;
  }
}

/* Topo dos cards de lista (Pessoas, Jornadas, Férias, Desligamentos,
   Documentos, Central de assinaturas…). As listas foram desenhadas com
   `.xxx-panel{padding:0}` e a barra de busca dando o próprio respiro, mas o
   `.panel{padding:22px}` desta folha vence por ordem de carga — o topo somava
   22px do card + 14px da barra + a sobra do min-height de 66px, e a busca
   ficava solta no meio de uma faixa branca. Aqui só o TOPO encolhe (laterais e
   rodapé seguem como estão) e só quando a barra é o primeiro filho do card. */
.panel:has(> :is(.people-toolbar, .vacation-toolbar, .termination-toolbar, .document-management-toolbar, .signature-center-toolbar):first-child) {
  padding-top: 10px;
}
.panel > :is(.people-toolbar, .vacation-toolbar, .termination-toolbar, .document-management-toolbar, .signature-center-toolbar):first-child {
  min-height: 0;
  padding-top: 8px;
}

/* Mesmo detalhe nos cards de FILTRO (Registros, Banco de horas, Calendário…):
   os campos têm rótulo flutuante que já ocupa a borda de cima, então os 22px
   do `.panel` sobravam acima e o card ficava mais alto em cima que embaixo. */
.panel:has(> .filter-grid:first-child) {
  padding: 12px 20px 16px;
}
/* Resumo do Banco de horas: só números, não precisa do respiro de card de
   formulário. */
.panel.bank-overview {
  padding: 16px 20px;
  /* Encostava no card de Histórico (0px), enquanto o filtro acima tem 16px. */
  margin-bottom: 16px;
}
/* Sem a nota do modo, a margem de baixo dos totais só somava sobra ao card. */
.bank-overview .bank-summary:has(+ .bank-mode-note:empty) { margin-bottom: 0; }
.bank-overview .bank-overview-meta { padding-bottom: 12px; }

/* Holerite no celular — 23/09/2026. Os cabeçalhos dos cards (Lotes de
   holerites, Holerites e comprovantes) não empilhavam: o texto virava uma
   coluna estreita e os botões passavam da borda (página com 421px numa tela
   de 390px). E a linha de holerite/recibo, que é nowrap de propósito no
   desktop, cortava valor e situação. No celular ela quebra linha. */
@media (max-width: 720px) {
  #recibos .panel-heading { flex-direction: column; align-items: stretch; gap: 12px; }
  #recibos .panel-heading > .signature-heading-actions { width: 100%; justify-content: flex-start; }
  #recibos .signature-heading-actions > button { flex: 1 1 180px; min-width: 0; max-width: 100%; white-space: normal; }
}
@media (max-width: 760px) {
  .payroll-payment-evidence { width: 100%; }
  .payroll-payment-evidence:not(.missing) > div { flex-wrap: wrap; row-gap: 2px; white-space: normal; max-width: 100%; }
  .payroll-payment-evidence:not(.missing) small { white-space: normal; }
}
.payroll-stale-note { margin: 10px 0 0; color: #9a5b00; font-size: 12px; }