.vacation-page-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
.vacation-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.vacation-summary-card { min-height:118px; padding:20px; border:1px solid var(--border, #dce4ee); border-radius:18px; background:#fff; box-shadow:0 8px 24px rgba(15,42,77,.045); }
.vacation-summary-card span { display:block; color:#687a92; font-size:12px; font-weight:750; letter-spacing:.04em; text-transform:uppercase; }
.vacation-summary-card strong { display:block; margin:8px 0 3px; color:#10243f; font-size:30px; line-height:1; }
.vacation-summary-card small { color:#8090a5; }
.vacation-summary-card.is-danger { border-color:#ffd7d7; background:#fffafa; }
.vacation-summary-card.is-warning { border-color:#ffe3bc; background:#fffdf8; }
.vacation-summary-card.is-active { border-color:#c6eddf; background:#fbfffd; }
.vacation-panel { overflow:hidden; }
.vacation-toolbar { display:grid; grid-template-columns:minmax(260px,1fr) repeat(2,minmax(170px,220px)) auto; gap:12px; align-items:center; padding:18px 20px; border-bottom:1px solid #e5ebf2; }
.vacation-toolbar .search { width:100%; }
.vacation-toolbar select { width:100%; min-height:42px; padding:0 38px 0 14px; border:1px solid #d8e1ec; border-radius:12px; background:#fff; color:#24364f; }
.vacation-table-wrap { overflow:auto; }
.vacation-table { width:100%; min-width:1050px; table-layout:fixed; border-collapse:collapse; }
.vacation-table th { padding:11px 10px; background:#f7f9fc; color:#718198; font-size:10px; letter-spacing:.04em; text-align:left; }
.vacation-table td { padding:14px 10px; border-top:1px solid #e8edf3; color:#283a52; vertical-align:top; overflow-wrap:anywhere; }
.vacation-table td:first-child { display:table-cell; }
.vacation-table :is(th,td):nth-child(1) { width:17%; }
.vacation-table :is(th,td):nth-child(2) { width:12%; }
.vacation-table :is(th,td):nth-child(3) { width:16%; }
.vacation-table :is(th,td):nth-child(4) { width:9%; }
.vacation-table :is(th,td):nth-child(5) { width:18%; }
.vacation-table :is(th,td):nth-child(6) { width:10%; padding-right:16px; }
.vacation-table :is(th,td):nth-child(7) { width:18%; padding-left:16px; }
.vacation-person { display:flex; align-items:center; gap:9px; min-width:0; }
.vacation-person-avatar { display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px; border-radius:50%; background:#e9f1ff; color:#275fc3; font-size:11px; font-weight:800; }
.vacation-person strong,.vacation-period strong { display:block; color:#12233c; }
.vacation-person small,.vacation-period small { color:#8090a5; }
.vacation-days { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; min-width:0; }
.vacation-days span { padding:8px 7px; border-radius:10px; background:#f5f8fc; text-align:center; }
.vacation-days small { display:block; color:#8492a6; font-size:9px; text-transform:uppercase; }
.vacation-days b { color:#20344f; font-size:14px; }
.vacation-status { display:inline-flex; align-items:center; min-height:26px; padding:0 9px; border-radius:999px; background:#edf3ff; color:#2e64c5; font-size:11px; font-weight:800; white-space:nowrap; }
.vacation-status.expired,.vacation-status.cancelled { background:#fff0f0; color:#c74343; }
.vacation-status.completed { background:#eef9f5; color:#14805f; }
.vacation-status.scheduled,.vacation-status.approved,.vacation-status.in_progress { background:#eef9f5; color:#087c60; }
.vacation-deadline.is-close { color:#cf6b17; font-weight:750; }
.vacation-deadline.is-late { color:#d34242; font-weight:800; }
.vacation-grants { display:flex; flex-direction:column; gap:7px; min-width:0; }
/* Duas metades com papéis distintos: à esquerda o que se lê (datas, dias,
   situação), à direita o que se clica. As ações ficavam soltas na mesma grade
   do texto — disputavam a largura com ele, mudavam de posição conforme a
   parcela fosse histórica ou programada, e empurravam o selo para uma linha
   só dele. Em coluna à direita, a posição de cada ação é a mesma em todos os
   cards, que é o que torna a lista varrível. */
.vacation-grant { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:7px 10px; padding:9px 10px; border:1px solid #e1e8f1; border-radius:11px; background:#fbfcfe; }
.vacation-grant > span { grid-column:1; grid-row:1; min-width:0; }
.vacation-grant .vacation-pay { grid-column:1; grid-row:2; justify-self:start; }
/* A coluna ocupa as duas linhas do lado esquerdo e centra o conjunto: com uma
   ação só, ela fica na altura do título em vez de colada no topo.

   Empilha na vertical, mas quebra numa segunda coluna a cada 3. A parcela
   programada chega a cinco ações (Recibo, Comprovante, Editar, Aviso,
   Assinar); cinco círculos em fila única deixariam a linha da tabela com uns
   180px de altura por causa de botões, e a lista deixaria de ser varrível. O
   caso da imagem — três ações — continua sendo uma coluna só. */
.vacation-grant-actions { grid-column:2; grid-row:1/span 2; display:grid; grid-auto-flow:column; grid-template-rows:repeat(3,auto); align-content:center; justify-items:center; gap:6px; }
.vacation-grant-actions .j-icon-button { --j-icon-size:29px; --j-icon-glyph:14px; }
/* Rede de segurança: se o conversor de ícones não reconhecer um rótulo, o
   botão continua sendo um botão — e não texto solto sem moldura, que era o que
   as regras antigas desta folha evitavam. */
.vacation-grant-actions button:not(.j-icon-button) { min-height:26px; padding:0 9px; border:1px solid #dbe4f0; border-radius:999px; background:#fff; color:#3469c9; font-size:10px; font-weight:750; white-space:nowrap; cursor:pointer; }
.vacation-grant .vacation-cancel-action:not(:disabled):hover { border-color:#f3c9ce; background:#fdeff1; color:#b42335; }
.vacation-grant small { display:block; color:#7b8ba1; }
/* A coluna deixou de empilhar botões: as três ações do período foram para
   dentro do menu da engrenagem (o mesmo do dia, em Registros), e o que sobra
   aqui é um alvo só, alinhado à direita como toda coluna de ação da tabela.
   A grade de duas colunas existia para as palavras compridas ("Registrar
   férias anteriores") caberem sem quebrar; sem palavras, ela perdeu o motivo. */
.vacation-row-actions { display:flex; align-items:center; justify-content:flex-end; gap:7px; width:100%; min-width:0; }
/* A engrenagem é quadrada e mede a si mesma; a largura cheia era das pílulas
   que dividiam a linha. Sem esta regra, `.vacation-row-actions button` (0,1,1)
   ganharia de `.day-card-menu-toggle` (0,1,0) e esticaria o botão na coluna. */
.vacation-row-actions .day-card-adjust { flex:0 0 auto; margin-left:0; }
/* Redonda, como todo alvo de ação do painel — o canto de 9px era o do menu do
   dia, onde o botão fica dentro do card e não numa coluna de tabela. */
.vacation-row-actions .day-card-menu-toggle { width:34px; border-radius:var(--radius-pill); }
.vacation-row-actions .vacation-accruing-note { flex:1 1 auto; text-align:right; }
.vacation-empty { padding:52px 24px; text-align:center; color:#708096; }
.vacation-empty strong { display:block; margin-bottom:5px; color:#263a56; font-size:17px; }
.vacation-load-error { margin:18px; padding:16px; border:1px solid #ffd7d7; border-radius:14px; background:#fff7f7; color:#9d3939; }
.vacation-dialog { width:min(720px,calc(100vw - 28px)); max-height:calc(100vh - 34px); padding:0; overflow:hidden; border:0; border-radius:20px; }
.vacation-dialog::backdrop { background:rgba(16,31,52,.5); }
.vacation-dialog-scroll { max-height:calc(100vh - 34px); overflow-x:hidden; overflow-y:auto; padding:28px; }
/* O formulário histórico é curto quando fechado, mas precisa de área para o
   calendário abrir abaixo do campo sem criar uma barra de rolagem. Em janelas
   realmente baixas, o limite da viewport continua prevalecendo. */
#vacationHistoricoDialog { min-height:min(650px,calc(100vh - 16px)); }
#vacationHistoricoDialog .vacation-dialog-scroll { min-height:inherit; }
.vacation-dialog h2 { margin:3px 0 5px; color:#172940; }
.vacation-dialog .dialog-subtitle { margin:0 0 22px; color:#76879d; }
/* `align-items:start` conserta o rótulo que aparecia ABAIXO do campo.
   O rótulo flutuante é `position:absolute; top:50%` dentro do <label>, e o
   <label> é a célula da grade: esticado para a altura da linha, o "50%" dele
   deixa de ser o meio do campo. Bastava a célula vizinha ser mais alta — uma
   linha de ajuda visível ao lado, por exemplo — para o rótulo de "Valor pago"
   escorregar para fora da caixa. Sem esticar, os dois voltam a coincidir. */
.vacation-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:15px; }
.vacation-form-grid > * { min-width:0; }
/* Só quando a dica está mesmo aberta (`is-open`): o `:hover` daqui elevava o
   campo sem nenhuma dica à vista, desde que a abertura passou a esperar a
   intenção do ponteiro.
   O balão nasce no próprio ícone. Ao abrir, eleva o campo inteiro acima dos
   irmãos da grade; sem isso, os rótulos renderizados depois atravessavam a
   superfície branca da dica apesar do z-index aplicado no pseudo-elemento. */
.vacation-dialog .vacation-form-grid label:has(.j-field-tip.is-open) {
  z-index:45;
}
.vacation-form-grid label { display:flex; flex-direction:column; gap:6px; color:#40516a; font-size:12px; font-weight:750; }
.vacation-form-grid .span-2 { grid-column:1/-1; }
/* A ajuda que CONTINUA visível (a que tem `id`, e por isso o floating-fields
   não converte em ícone) herdava do <label> o peso 750 e o azul-escuro: saía
   tão forte quanto o rótulo do campo, competindo com ele. Mesma tinta discreta
   da `.vacation-hint`, que é o outro texto de apoio do card. */
.vacation-form-grid .field-help { margin-top:2px; color:#7b8a9e; font-size:11px; font-weight:600; line-height:1.5; }
/* Caixa de texto e caixa de texto. Sem o recorte, `input` pegava tambem o
   radio da modalidade e a chave do 13o: um radio de 623px de largura e 43px
   de altura, com o rotulo empurrado para a linha de baixo. Mesmo recorte que
   `.form-grid` ja usa em people.css. */
/* SEM raio próprio: o do sistema é `--ui-control-radius` (pílula), aplicado a
   todo campo de uma linha por floating-fields.css. Este card declarava 11px e
   era o único lugar do Jornada que fazia isso — de tanto repetir, o desvio
   passava por padrão. Campo de várias linhas continua em
   `--ui-control-radius-tall`, que é a exceção que o próprio sistema já
   documenta ("pílula só faz sentido em campo de UMA linha").
   Os CONTÊINERES do card (painel do recibo, resumo, cartão da parcela) seguem
   com 11–14px de propósito: pílula em caixa larga é outro assunto, e para isso
   existe `--radius-card`. */
.vacation-form-grid input:not([type="checkbox"]):not([type="radio"]),.vacation-form-grid select,.vacation-form-grid textarea { width:100%; min-height:43px; padding:10px 12px; border:1px solid #d6e0eb; color:#172940; background:#fff; font:inherit; font-weight:600; }
.vacation-form-grid textarea { border-radius:var(--ui-control-radius-tall); }
/* O <select> saía em pílula (999px) e 1px mais baixo que o resto: o rótulo
   flutuante o embrulha em `.j-floating-control`, e a regra de lá
   (floating-fields.css, que carrega depois desta folha) trazia o raio e a
   altura do controle padrão do sistema. Dentro do card manda o card — 11px e
   43px, como todos os vizinhos. */
/* `select.j-floating-input` (0,2,1) de propósito: a regra que trazia a pílula
   é `.j-floating-field .j-floating-input` (0,2,0) em floating-fields.css, que
   carrega DEPOIS desta folha — empatar na especificidade perderia na ordem. O
   irmão `input` já ganhava por acaso, porque os dois `:not([type=…])` dele
   somam (0,3,1); o `select`, sem `:not`, ficava em (0,1,1) e escapava. */
.vacation-form-grid select.j-floating-input,
.vacation-form-grid select { min-height:43px; height:43px; border-color:#d6e0eb; }
/* E o que APARECE na tela é este. O select-menu.js troca o <select> por um
   botão e esconde o nativo (`.select-menu-native`, 1px fora de vista), então
   padronizar só o <select> não muda nada do que se vê — foi o que aconteceu na
   primeira tentativa. Aqui ele só acerta a altura com a dos vizinhos do card;
   o raio é o do sistema. */
.vacation-form-grid .select-menu-trigger { height:43px; min-height:43px; border-color:#d6e0eb; }
.vacation-form-grid .select-menu-trigger:hover { border-color:#b7c8dc; }
.vacation-form-grid input[readonly] { cursor:default; background:#f5f8fc; color:#4d6079; }
/* Campo de arquivo. O botão que o navegador desenha dentro dele é o único
   retângulo de canto vivo do card — e vinha com a fonte do sistema, fora da
   escala do resto. Vira a mesma pílula discreta dos outros controles, com o
   texto "Nenhum arquivo escolhido" alinhado à altura dela. */
.vacation-form-grid input[type="file"] { height:43px; padding:0 7px; line-height:43px; color:#5d6b80; font-size:12px; font-weight:650; cursor:pointer; }
.vacation-form-grid input[type="file"]::file-selector-button {
  margin-right:10px; padding:0 14px; height:29px; vertical-align:middle;
  border:1px solid var(--ui-control-border,#cbd7e6); border-radius:999px;
  background:#fff; color:#34475f; font:inherit; font-size:11px; font-weight:750; cursor:pointer;
  transition:color .16s ease, background-color .16s ease, border-color .16s ease;
}
.vacation-form-grid input[type="file"]:hover::file-selector-button { border-color:#b7c8dc; background:#f2f6fc; color:var(--color-primary-hover,#1445cc); }
.vacation-form-grid textarea { min-height:78px; resize:vertical; }
.vacation-toggle-row { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:58px; padding:10px 13px; border:1px solid #dce5ef; border-radius:12px; }
.vacation-toggle-row input { flex:0 0 auto; width:19px; height:19px; margin:0; accent-color:var(--color-primary,#356ee5); }
.vacation-compliance { grid-column:1/-1; padding:13px 15px; border-radius:12px; background:#f5f8fd; color:#52657f; font-size:12px; line-height:1.5; }
.vacation-compliance.warning { background:#fff7ec; color:#985519; }
.vacation-compliance.danger { background:#fff0f0; color:#ab3737; }
.vacation-date-guard {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border:1px solid #dce5ef;
  border-radius:12px;
  background:#f6f8fc;
}
.vacation-date-guard[hidden],.vacation-date-guard [hidden] { display:none !important; }
.vacation-date-guard > div { display:flex; flex-direction:column; gap:2px; }
.vacation-date-guard strong { color:#314660; font-size:12px; }
.vacation-date-guard span { color:#718198; font-size:11px; line-height:1.45; }
.vacation-date-guard .outline-button { min-height:38px; white-space:nowrap; }
.vacation-date-guard > label { grid-column:1/-1; }
.vacation-date-guard.is-unlocked { border-color:#f0cf92; background:#fff9ed; }
.vacation-date-guard.is-unlocked strong { color:#845416; }
.vacation-form-grid .date-picker.is-locked .date-picker-trigger,
.vacation-form-grid .date-picker.is-locked .date-picker-open {
  cursor:not-allowed;
  opacity:.72;
  background:#f3f6fa;
}
.vacation-form-message { min-height:20px; margin:12px 0 0; color:#b33f3f; font-size:12px; }
/* Uma ação só desde 12/09/2026: "Cancelar" era o mesmo comando do ✕, escrito
   duas vezes. Sair é pelo ✕ da barra superior — que agora fica sempre visível
   — ou por Esc. `gap` fica para quando um card precisar de uma segunda ação
   que NÃO seja apenas sair. */
.vacation-form-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
@media (max-width:1050px) { .vacation-summary { grid-template-columns:repeat(2,1fr); } .vacation-toolbar { grid-template-columns:1fr 1fr; } .vacation-toolbar .search { grid-column:1/-1; } }
@media (max-width:720px) { .vacation-summary { grid-template-columns:1fr; } .vacation-toolbar,.vacation-form-grid { grid-template-columns:1fr; } .vacation-form-grid .span-2 { grid-column:auto; } .vacation-dialog { --dialog-pad-x:18px; --dialog-pad-t:22px; --dialog-pad-b:22px; } .vacation-dialog-scroll { padding:22px 18px; } .vacation-dialog .date-picker-panel { width:min(258px,100%); } .vacation-date-guard { grid-template-columns:1fr; } .vacation-date-guard > label { grid-column:auto; } .vacation-date-guard .outline-button { width:100%; } }

/* ==========================================================================
   Lançamento simples de férias (19/08/2026)
   ========================================================================== */

/* Modalidade como escolha explicada, não como select seco: cada opção tem
   consequência legal diferente e quem lança precisa ver isso na hora. */
.vacation-modes{border:0;margin:0;padding:0;display:grid;gap:8px}
.vacation-modes legend{
  padding:0 0 6px;
  color:#5b6b82;
  font-size:11px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.vacation-modes .vacation-mode{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:11px;
  margin:0;
  padding:12px 14px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#fff;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.vacation-modes .vacation-mode:hover{border-color:#c3cbd6;background:#f8fafd}
/* Alvo do radio fixado aqui também: a regra genérica do formulário já não o
   alcança, mas o tamanho padrão do navegador muda com a fonte da página. */
.vacation-modes .vacation-mode input{
  flex:0 0 auto;
  width:18px;
  height:18px;
  margin:1px 0 0;
  accent-color:var(--color-primary,#416eec);
}
.vacation-modes .vacation-mode span{display:block;min-width:0}
.vacation-modes .vacation-mode strong{display:block;color:#1c2f49;font-size:12.5px;font-weight:750}
.vacation-modes .vacation-mode small{display:block;margin-top:3px;color:#5b6b82;font-size:11px;line-height:1.45;font-weight:500}
.vacation-modes .vacation-mode:has(input:checked){
  border-color:var(--color-primary,#416eec);
  background:#f4f8ff;
  box-shadow:0 0 0 1px var(--color-primary,#416eec) inset;
}
.vacation-modes .vacation-mode:has(input:focus-visible){outline:2px solid var(--color-focus,#416eec);outline-offset:2px}

/* A prévia é o coração desta tela: mostra o cálculo ANTES de gravar, com o
   artigo que sustenta cada número. Sem isso o usuário assinaria uma conta que
   não viu — e é conta com efeito trabalhista.
   O resultado sai do meio da grade e vira manchete: quem confere quer ler
   primeiro QUANTOS dias e DE QUANDO A QUANDO; o resto é a memória de cálculo
   que sustenta esses dois números. */
.vacation-preview{
  border:1px solid #dfe6ef;
  border-radius:12px;
  background:#f8fafd;
  padding:14px 16px;
  color:#5b6b82;
  font-size:12px;
}
.vacation-preview.is-empty{
  display:flex;
  align-items:center;
  gap:9px;
  border-style:dashed;
  background:#fbfcfe;
  color:#8494a8;
}
.vacation-preview.is-empty::before{
  content:"";
  flex:0 0 auto;
  width:16px;
  height:16px;
  border-radius:50%;
  border:1.5px dashed #c2cddc;
}
.vacation-preview-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 10px;
  margin:0 0 13px;
  padding:0 0 12px;
  border-bottom:1px solid #e4eaf2;
}
.vacation-preview-head b{
  color:#12233c;
  font-size:19px;
  font-weight:780;
  letter-spacing:-.02em;
}
.vacation-preview-head span{color:#4a5b73;font-size:12.5px;font-weight:650}
.vacation-preview-head small{
  flex:1 0 100%;
  color:#7a8899;
  font-size:11px;
  font-weight:500;
  line-height:1.45;
}
.vacation-preview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.vacation-preview-grid > div{display:flex;flex-direction:column;gap:1px}
.vacation-preview-grid span{color:#5b6b82;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.vacation-preview-grid strong{color:#1c2f49;font-size:14px;font-weight:750}
.vacation-preview-grid small{color:#7a8899;font-size:10.5px;line-height:1.4}
/* Prazo legal que JÁ passou não pode sair na mesma tinta de um prazo que ainda
   dá tempo: era o caso de "avisar até", que aparecia em cinza mesmo quando a
   data ficou para trás. */
.vacation-preview-grid > div.is-late span{color:#a8701c}
.vacation-preview-grid > div.is-late strong{color:#9a5a12}
.vacation-preview-grid > div.is-late small{color:#a8792f;font-weight:650}
.vacation-preview-error{margin:0;color:#b42335;font-size:12px;font-weight:650}

/* Aviso legal não atendido: amarelo, não vermelho — não é erro do sistema, é
   uma escolha da empresa que precisa de justificativa registrada. */
.vacation-preview-warnings{
  margin:13px 0 0;
  padding:10px 12px 10px 28px;
  border-radius:10px;
  background:#fff8e6;
  color:#8a6a2f;
  font-size:11.5px;
  line-height:1.5;
}
.vacation-preview-warnings b{font-weight:800}

/* Enquanto houver aviso pendente, a justificativa deixa de ser um campo
   opcional no fim do formulário: o envio a exige, e a tela precisa dizer isso
   antes do clique, não depois. */
.vacation-form-grid label.is-required-now > .j-floating-caption,
.vacation-form-grid label.is-required-now > .j-floating-caption .j-floating-caption-text{color:#9a5a12}
.vacation-form-grid label.is-required-now input{border-color:#e8c98d;background:#fffdf7}
.vacation-form-grid label.is-required-now input:focus{border-color:#c9922f}


/* Linha de período em formação: existe para dar visibilidade, não para agir.
   Sem ações, e com os avos no lugar onde as outras linhas têm botões. */
.vacation-accruing-note{
  display:block;
  color:#5b6b82;
  font-size:11px;
  font-weight:650;
  line-height:1.4;
}

/* Período ainda em formação: os números não são direito a gozo, e a coluna
   precisa deixar isso visível sem depender de quem lê saber a diferença. */
.vacation-days.is-accruing span { background:#f7f8fa; }
.vacation-days.is-accruing b { color:#6b7b91; }

/* Colaborador sem admissão cadastrada não gera período nenhum. Antes ele
   sumia da tela em silêncio, o que é pior do que aparecer com erro. */
.vacation-warning {
  display:flex; flex-direction:column; gap:3px;
  margin:0 18px 14px; padding:13px 15px;
  border:1px solid #ffe2bd; border-radius:13px; background:#fffaf2;
}
.vacation-warning strong { color:#8a5410; font-size:13px; }
.vacation-warning span { color:#96703f; font-size:12px; line-height:1.45; }

.vacation-hint { margin:0; color:#7b8a9e; font-size:11px; line-height:1.5; }
/* Gozo anterior à implantação: é histórico importado, não programação em
   andamento — a lista precisa deixar a diferença visível. */
.vacation-grant.is-historical { border-style:dashed; background:#f8f9fb; }
.vacation-grant.is-historical strong { color:#5d6b80; }

/* Período arquivado: resolvido fora do Jornada, só aparece no filtro
   "Arquivados". Cinza, e não vermelho: não há o que cobrar. */
.vacation-status.archived { background:#f1f3f6; color:#66758a; }

/* Selo de pagamento da parcela. A cor reforça, mas quem informa é a palavra —
   quem não distingue verde de vermelho continua lendo "Pago" e "A pagar". */
.vacation-pay { font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px; white-space:nowrap; align-self:center; }
.vacation-pay.is-ok { background:#e8f6ee; color:#1c7a46; }
.vacation-pay.is-diff { background:#fdf1e3; color:#a55a10; }
.vacation-pay.is-late { background:#fdecec; color:#b4232b; }
.vacation-pay.is-pending { background:#eef1f6; color:#5d6b80; }

/* Situação travada pelo comprovante. Desabilitada, e não escondida: o
   administrador precisa ver que está pago — e ver que não é ele quem decide
   isso enquanto o documento estiver lá. O cadeado é o texto de ajuda logo
   abaixo, não um ícone que ninguém lê. */
.vacation-form-grid select.is-locked {
  background:#f1f3f6; color:#5d6b80; cursor:not-allowed; border-style:dashed;
}

/* O campo do comprovante com a saída ao lado: remover o documento é o único
   caminho de volta para a marcação manual, e escondê-lo em outra tela faria o
   travamento parecer definitivo. */
.vacation-proof-field { position:relative; }
.vacation-proof-field .vacation-proof-remove {
  justify-self:start; margin-top:6px; padding:5px 12px; font-size:12px;
  border-color:#f0c5c5; color:#b4232b;
}
.vacation-proof-field .vacation-proof-remove:hover:not(:disabled) { background:#fdecec; }
.vacation-proof-field .vacation-proof-remove[hidden] { display:none; }

/* O que foi lido no PDF. O painel mostra e espera: nada entra em campo nenhum
   sem o botão — documento de fora não preenche formulário sozinho. */
.vacation-analise { border:1px solid #dfe5ed; border-radius:12px; padding:12px 14px; background:#f8fafc; display:grid; gap:8px; }
/* `.hidden` é `display:none` em styles.css, que carrega ANTES desta folha —
   com a mesma especificidade, o `display:grid` acima vencia por ordem e o
   painel vazio ficava desenhado no card como duas barras cinzas sem conteúdo,
   uma sob cada campo de arquivo. */
.vacation-analise.hidden { display:none; }
.vacation-analise p { margin:0; font-size:12px; color:#425268; }
.vacation-analise-titulo { font-weight:700; color:#1c2f49; }
/* Rótulo em cima, valor embaixo — a mesma leitura das caixas DIREITO/USADOS/
   RESTAM da lista. Antes era rótulo e valor na mesma linha, em colunas de
   190px esticadas pela largura do diálogo: cada par ficava numa ilha, e
   "Férias 04/03/2026 a 02/04/2026 · 30 dias" quebrava no meio da data
   enquanto sobrava vão ao lado. Com o rótulo acima, o valor ganha a linha
   inteira da célula e as colunas podem ser estreitas sem quebrar nada. */
.vacation-analise-grid { display:flex; flex-wrap:wrap; gap:9px 24px; font-size:12px; color:#1c2f49; }
/* Cada dado ocupa a largura do que ele diz, e não uma coluna de grade esticada
   pela largura do diálogo. Era isso que espalhava o painel: quatro colunas de
   1fr num diálogo largo deixavam vão entre os pares e ainda quebravam
   "04/03/2026 a 02/04/2026 · 30 dias" no meio, porque a célula era estreita
   demais para o único item longo. */
.vacation-analise-grid span { display:flex; flex-direction:column; gap:1px; min-width:0; font-weight:600; }
.vacation-analise-grid b { color:#8595ab; font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.vacation-analise-aviso { color:#a55a10; }
.vacation-analise .outline-button { justify-self:start; padding:6px 14px; font-size:12px; }

/* Completar histórico: o card mostra só o que o Jornada não tem como apurar.
   Meses, dias de direito e situação saem da regra — continuam no formulário
   para o envio, mas não pedem nada a quem preenche. */
#vacationAccrualDialog.is-completar .vacation-form-grid label:has(#vacationAccruedMonths),
#vacationAccrualDialog.is-completar .vacation-form-grid label:has(#vacationEntitlement),
#vacationAccrualDialog.is-completar .vacation-form-grid label:has(#vacationAccrualStatus) { display:none; }