/* records-daycard.css — cards de dia da página Registros, no formato de
   pílula única definido pelo mockup do usuário:

     ( ARCO |  SEX      Nome da pessoa           ( 06:00 )   ajustar ⌄ )
     ( VERDE|   24      ● 11:00 ● 13:10 ...      (  67%  )             )
     (      | JUL 2026                                                 )

   Tudo numa linha só: data à esquerda (o arco colorido É a borda esquerda
   da pílula), nome + pontos no meio, anel com saldo/porcentagem e a seta
   "ajustar" à direita. A cor de status (verde aprovado / laranja pendente)
   aparece SÓ no arco — pedido explícito do usuário depois de ver um print.

   Estrutura: a linha do tempo (.wide-timeline) morava num <tr> irmão e foi
   movida pra dentro do card (ver dayCardTimeline() em app.js, que é como
   todas as camadas antigas continuam encontrando ela). Este arquivo é
   carregado por ÚLTIMO em index.html e usa !important onde precisa vencer
   records-layout.css/records-grid-fix.css, que ainda estilizam
   .record-stat-row/.record-date-title/.daily-stats como tabela. */

/* As pílulas flutuam direto na página: o painel branco "Apontamentos do
   período" deixa de ser um card (perde fundo, borda e sombra) e vira só o
   cabeçalho + a lista solta. Sem isso, cada pílula ficava dentro de outra
   caixa branca, o que empilhava duas molduras. */
.records-panel{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:0!important;
  overflow:visible!important;
}
.records-panel > .panel-heading{padding:0 4px 14px!important;margin:0!important}

.records-panel .record-columns{display:none!important}
/* .table-wrap tem overflow:auto (styles.css) porque a tela ERA uma tabela
   larga com rolagem horizontal. Agora são cards de largura total, e esse
   overflow cortava o que sai da caixa: o menu "ajustar" e o balão do saldo
   do último card, e os balões dos pontos do primeiro. */
.records-panel .table-wrap{overflow:visible}
.records-panel table{table-layout:auto!important}
.records-panel tbody{display:block}
.records-panel .record-stat-row{display:block}
.records-panel .record-stat-row + .record-stat-row{margin-top:14px}

/* Estado inicial: Registros só monta as pílulas depois que o administrador
   confirma os filtros em Buscar. */
.records-filter-prompt{display:block!important}
.records-filter-prompt td{display:flex!important;flex-direction:column;align-items:center;justify-content:center;min-height:220px;padding:28px!important;text-align:center;border:1px solid #dfe5ed;border-radius:18px;background:#fff;color:#64748b}
.records-filter-prompt strong{color:var(--ink);font-size:15px}
.records-filter-prompt span{margin-top:6px;font-size:13px}

/* A pílula. O arco colorido é a PRÓPRIA borda esquerda do card: com
   border-radius alto, o navegador desenha a transição entre a cor da borda
   esquerda e a das bordas de cima/baixo numa diagonal a 45°, e o resultado
   é exatamente o arco do mockup — sem pseudo-elemento, e acompanhando
   sozinho qualquer altura (o card cresce quando o painel "ajustar" abre).
   overflow NÃO pode ser hidden: os balões de cada ponto (.point-popover)
   ficam acima da pílula e seriam cortados. */
/* ATENÇÃO ao mexer aqui: records-layout.css e records-grid-fix.css ainda
   estilizam .record-stat-row td / .record-date-title / .daily-stats como
   grid de tabela. O navegador resolve !important PROPRIEDADE A PROPRIEDADE,
   não regra inteira — então qualquer propriedade de layout que este bloco
   NÃO declarar continua vindo de lá. Foi assim que o card já quebrou 2x:
   uma por não declarar flex-direction/justify-content, outra por não
   declarar align-items (o `align-items:center` de records-layout.css
   centralizava o conteúdo em vez de esticar, deixando a pílula "vazia" à
   direita). Declare o conjunto completo. */
.record-stat-row.day-card td{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:center!important;
  grid-template-columns:none!important;
  gap:0!important;
  width:100%!important;
  min-height:82px;
  /* Largura e cor da borda esquerda vêm do estado do dia (.day-card-alert /
     .day-card-ok), e o raio vem do bloco do card. Aqui só o traço base. */
  border:2px solid #dfe5ed;
  padding:12px 22px 12px 20px!important;
  background:#fff;
}
/* Verde neon = dia fechado, nada a fazer. Vermelho neon = inconsistente
   (dia pendente ou com ponto reprovado/aguardando), ou seja, precisa de
   intervenção pra apuração fechar certa. O brilho suave à esquerda reforça
   o "neon" sem virar poluição visual. A cor é decorativa: quem carrega a
   informação de forma acessível é o botão "›" (com aria-label e contagem)
   e o próprio anel — não dependemos só de cor. */
.record-stat-row.day-card td{
  border-left-color:#00e08c;
  box-shadow:none;
}
.record-stat-row.day-card.day-card-alert td{
  border-left-color:#ff2d55;
  box-shadow:none;
}
/* Dia todo reprovado/ajustado não repinta a lateral inteira (era assim
   antes do redesenho) — a marcação fica no badge dentro do card. */
.record-stat-row.day-card.manipulated,
.record-stat-row.day-card:has(.rejected-status){border-left:0!important;background:transparent!important}

/* Linha 1 da pílula: data | conteúdo | anel | ajustar */
.record-date-title{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-wrap:nowrap!important;
  gap:0!important;
  padding:0!important;
  min-height:0!important;
}

/* As 3 linhas da data ficam empilhadas e centralizadas entre si (SEX / 24
   / JUL 2026), não alinhadas à esquerda nem empurradas pra direita. */
.day-card-date{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-width:86px;
  padding:0 14px 0 6px;
  line-height:1.2;
}
.day-card-date small{color:#5b6b82;font-size:11px;font-weight:700;letter-spacing:.06em}
.day-card-date strong{font-size:26px;font-weight:800;letter-spacing:-.5px;color:var(--ink)}
.day-card-date span{color:#5b6b82;font-size:11px;font-weight:700;letter-spacing:.04em}

/* "›" entre a data e os pontos: revela os pontos não aprovados daquele dia.
   O slot existe em TODOS os cards para que nome e pontos comecem sempre no
   mesmo eixo horizontal; só o botão interno é omitido nos dias limpos. */
.day-card-reveal-slot{
  flex:0 0 26px;
  align-self:center;
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
}
.day-card-reveal{
  position:relative;
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#5b6b82;
  font:inherit;
  font-size:0;
  line-height:0;
  cursor:pointer;
  transition:background .15s, color .15s;
}
/* Seta na horizontal: fechada aponta para os pontos (abre), aberta gira
   180° e aponta de volta (recolhe). O glifo fica absoluto no centro do
   círculo — uma seta para baixo herdava o eixo do card e parecia baixa. */
.day-card-reveal::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:14px;
  height:14px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E") center/contain no-repeat;
  transform:translate(-50%,-50%);
  transition:transform .18s ease;
}
.day-card-reveal:hover{background:#f1f4f9;color:var(--ink)}
.record-stat-row.show-unapproved .day-card-reveal::before{transform:translate(-50%,-50%) rotate(180deg)}
/* .timeline-point tem display:inline-flex!important (timeline-detail.css),
   por isso o !important aqui. */
.wide-timeline .timeline-point.point-unapproved{display:none!important}
.record-stat-row.show-unapproved .wide-timeline .timeline-point.point-unapproved{display:inline-flex!important}
/* O bloco EM VOLTA do ponto precisa da mesma regra. Sem isto o ponto sumia
   mas o invólucro continuava desenhando o horário e o rótulo ("Reprovado",
   "Turno em aberto") — a seta parecia morta porque o que se via não mudava. */
.wide-timeline .turn-pair-unapproved{display:none}
.record-stat-row.show-unapproved .wide-timeline .turn-pair-unapproved{display:inline-flex}

/* Com a pessoa escolhida no filtro, o nome não se repete em cada pílula.
   As marcações ocupam o centro do card e a lista fica mais compacta. */
.day-card-content{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:stretch;
  gap:2px;
  padding:0 16px;
  align-self:stretch;
  position:relative;
}
.day-card-content .wide-timeline{
  flex:0 0 auto;
  align-content:initial;
  transform:none;
}
/* Nome da pessoa: só existe no DOM durante a auditoria geral (ver
   renderRecords) — sem ele, os dias inconsistentes seriam uma pilha sem dono.
   Posicionado de forma absoluta, igual à .occurrence-note
   logo abaixo, para não virar um terceiro filho e desarrumar a variante em
   grade `.has-occurrence-note`/`.has-document-chips`, que tem 2 linhas fixas. */
.record-date-title .day-card-person{
  position:static;
  align-self:start;
  padding-left:2px;
  max-width:calc(100% - 32px);
  margin:0;
  overflow:hidden;
  color:var(--color-text-secondary,#64748b);
  font-size:10px;
  font-weight:800;
  letter-spacing:.02em;
  line-height:1.4;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.record-date-title .occurrence-note{
  position:absolute;
  left:16px;
  bottom:0;
  max-width:calc(100% - 32px);
  margin:0;
}
/* Dias com ocorrência/abono usam duas linhas: pontos e faixa informativa. */
.day-card-content.has-occurrence-note,
.day-card-content.has-document-chips{
  display:grid;
  grid-template-rows:minmax(20px,1fr) auto;
  align-items:center;
  justify-content:stretch;
  row-gap:2px;
}
.day-card-content.has-occurrence-note .wide-timeline,
.day-card-content.has-document-chips .wide-timeline{
  position:relative;
  top:2.5px;
  align-self:center;
  align-content:initial;
  transform:none;
}
.day-card-content.has-occurrence-note .occurrence-note{
  position:relative;
  top:3px;
  left:-7px;
  max-width:100%;
  margin:0;
}
.day-card-content.has-document-chips .document-chip-list{
  position:relative;
  z-index:3;
  top:3px;
  left:-7px;
  margin-top:0;
  min-width:0;
  max-width:100%;
}
/* Os 3 botões de ação moram no menu flutuante (.day-card-actions-menu). Se
   alguma camada antiga (renderDailyRecordActions) voltar a inserir um
   .day-actions solto aqui na linha 1, ele fica escondido em vez de
   quebrar o alinhamento da pílula. */
.record-date-title .day-actions{display:none}

.day-card-ring-box{
  position:relative;
  flex:0 0 auto;
  width:68px;
  height:68px;
  margin-left:8px;
}
.day-card-ring-box svg{display:block;width:100%;height:100%}
.day-card-ring-track{stroke:#c9dbfd}
.day-card-ring-value{stroke:var(--color-primary)}
.day-card-ring-text{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  line-height:1.15;
  pointer-events:none;
}
/* Dentro do anel: horas trabalhadas no dia, SEMPRE em preto e sem sinal
   (pedido do usuário) — quem carrega sinal e cor é o saldo, que fica no
   balão de detalhe. Embaixo, quanto da jornada foi cumprida. */
.day-card-ring-text b{font-size:14px;font-weight:800;color:var(--ink)}
.day-card-ring-text small{font-size:12px;font-weight:700;color:#5b6b82}
/* Acima de 100% (hora extra) o anel fica cheio; a cor diferencia o caso. */
.day-card-ring-overtime .day-card-ring-value{stroke:var(--color-success)}
.day-card-ring-overtime .day-card-ring-text small{color:var(--color-success-text)}

/* A ação de ajuste usa uma engrenagem vetorial, sem texto repetido em cada
   linha. O botão continua acessível por aria-label e mantém a área de toque. */
.day-card-adjust{position:relative;flex:0 0 auto;margin-left:14px}
.day-card-menu-toggle{
  display:grid;
  place-items:center;
  /* 34px e canto arredondado (era 42px e círculo cheio): ver o bloco do botão
     vetorial mais abaixo, que explica por que ele deixou de ser um
     `create-button` azul. Medidas ficam aqui, na regra única. */
  width:34px;
  height:34px;
  padding:0!important;
  border-radius:9px;
  box-shadow:none!important;
}
.day-card-menu-toggle svg{display:block;width:18px;height:18px}

/* Menu de ações: flutua por cima (position:absolute), não empurra nada. */
/* Menu de ações do dia. Segue o desenho do menu da conta
   (.user-account-menu em ui-refinement.css): linhas inteiras com hover, sem
   botão desenhado dentro de botão. Antes eram 4 botões empilhados com borda e
   raio próprios dentro de uma caixa que também tinha borda e raio — três
   molduras concêntricas para quatro ações, e nenhuma pista de qual delas é a
   pesada. */
.day-card-actions-menu{
  position:fixed;
  z-index:7;
  top:0;
  left:0;
  display:flex!important;
  flex-direction:column;
  gap:0;
  width:232px;
  margin:0!important;
  padding:0!important;
  overflow:hidden;
  border:1px solid #dfe6ef;
  border-radius:12px;
  background:#fff;
  box-shadow:0 18px 38px rgba(18,37,65,.16);
  text-align:left;
}
.day-card-actions-menu.hidden{display:none!important}

/* Diz QUAL dia vai receber a ação. O menu flutua sobre uma lista de 30 dias
   quase idênticos; sem isso, é fácil abrir no dia de cima e não perceber. */
.day-card-actions-heading{
  margin:0!important;
  padding:10px 14px 9px;
  border-bottom:1px solid #e8edf4;
  background:#f8fafd;
  color:#1c2f49;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.day-card-actions-heading span{color:#5b6b82;font-weight:700}

.day-card-actions-menu button{
  display:flex!important;
  align-items:center;
  gap:10px;
  width:100%;
  margin:0!important;
  padding:10px 14px!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  color:#40526a!important;
  font-size:12px!important;
  font-weight:650!important;
  text-align:left;
  cursor:pointer;
}
/* Os ícones vêm do sistema de ícones do painel (24x24, traço 2). Aqui entram
   em 16px só para não competir com o texto. */
.day-card-actions-menu button svg{
  flex:0 0 16px;
  width:16px;
  height:16px;
  color:#5b6b82;
}
.day-card-actions-menu button span{flex:1 1 auto;min-width:0}
.day-card-actions-menu button:hover{background:#f4f7fb!important}
.day-card-actions-menu button:hover svg{color:var(--color-primary,#416eec)}
.day-card-actions-menu button:focus-visible{
  outline:2px solid var(--color-primary,#416eec);
  outline-offset:-2px;
}

/* "Ajuste geral" abre o dia inteiro para edição — é a ação de maior alcance do
   menu. Separada das outras por uma linha, como último item, para não ser
   clicada por engano no lugar de "Ponto manual". */
/* Escopado dentro do menu de propósito: `.day-card-actions-menu button` tem
   especificidade 0,1,1 e venceria `.day-card-actions-main` (0,1,0) mesmo com
   !important dos dois lados — !important resolve empate de origem, não de
   especificidade. Sem o escopo, o separador simplesmente não aparecia. */
.day-card-actions-menu .day-card-actions-main{
  border-top:1px solid #e8edf4!important;
  color:#1c2f49!important;
  font-weight:750!important;
}

/* "Realinhar o dia" só aparece quando o Jornada tem uma correção pronta que
   fecha o dia inteiro (ver daySequenceRealignment em time-calc.js) — nesses
   casos ela é a resposta certa, e as outras ações do menu são caminhos mais
   longos para o mesmo lugar. Vem em primeiro e destacada em verde por isso.
   Mesmo escopo de especificidade do item acima, pelo mesmo motivo. */
.day-card-actions-menu .day-card-actions-suggested{
  border-bottom:1px solid #e8edf4!important;
  background:#f2fbf7!important;
  color:#00714f!important;
  font-weight:800!important;
}
.day-card-actions-menu .day-card-actions-suggested svg{color:#00a779}
.day-card-actions-menu .day-card-actions-suggested:hover{background:#e6f7ef!important}
.day-card-actions-menu .day-card-actions-suggested:hover svg{color:#00714f}


/* Compacta a pílula dentro da nova coluna sem alterar os menus, popovers ou
   a sequência dos pontos. */
.records-panel .record-stat-row.day-card td{min-height:76px;padding:10px 14px 10px 13px!important}
.records-panel .day-card-date{min-width:67px;padding:0 8px 0 2px}
.records-panel .day-card-date strong{font-size:23px}
.records-panel .day-card-reveal-slot{flex-basis:26px;width:26px;height:26px}
.records-panel .day-card-content{padding:0 8px}
.records-panel .day-card-employee{font-size:12px}
.records-panel .day-card-ring-box{width:61px;height:61px;margin-left:5px}
.records-panel .day-card-ring-text b{font-size:12px}
.records-panel .day-card-ring-text small{font-size:10px}
.records-panel .day-card-adjust{margin-left:7px}
.records-panel .day-card-menu-toggle{width:38px;height:38px;padding:0!important}

/* Dia sem marcações usa a MESMA altura dos outros. Antes tinha min-height
   próprio (62px contra 76px), com a ideia de "não desperdiçar espaço" — mas
   numa lista de 30 dias empilhados o efeito real era uma régua irregular: a
   linha do domingo afundava no meio das outras. Numa tabela de conferência a
   regularidade vale mais que os 14px economizados. O conteúdo interno continua
   menor (número do dia, engrenagem); só a ALTURA DA LINHA é que se iguala. */
.records-panel .record-stat-row.day-card.day-card-empty td{padding-top:7px!important;padding-bottom:7px!important}
.records-panel .day-card-empty .day-card-date strong{font-size:21px}
.records-panel .day-card-empty .day-card-ring-box{width:54px;height:54px}
.records-panel .day-card-empty .day-card-menu-toggle{width:34px;height:34px}
.records-panel .day-card-empty .empty-timeline{font-size:11px}


@media(max-width:900px){
  .record-stat-row.day-card td{
    border-radius:20px;
    padding:14px 16px!important;
    flex-wrap:wrap;
  }
  .record-date-title{flex-wrap:wrap!important;gap:10px!important}
  .day-card-content{flex-basis:100%;order:3;padding:0}
}

/* ==========================================================================
   Redesenho de 18/08/2026 — card, traço no lugar da bolinha, par com total

   Vem do protótipo do usuário (prototipo-registros-unificado.html), que juntou
   a proposta do Claude Design com os ajustes dele. Três mudanças:

   1. A pílula vira CARD com canto levemente arredondado, na mesma régua do item
      selecionado do menu lateral (.nav-link, raio 10px) — 14px aqui porque a
      caixa é bem maior e 10px some numa peça dessa altura.
   2. A bolinha de cada marcação vira um TRAÇO sob o horário. A bolinha ficava ao
      LADO do número (order:1 antes do b) e disputava espaço na horizontal; o
      traço fica embaixo, alinhado à largura do horário, e libera a linha.
   3. Entrada+saída viram um PAR com o tempo trabalhado embaixo, e o intervalo
      entre dois pares aparece entre eles. Responde "quanto rendeu cada turno?"
      sem obrigar a subtrair de cabeça.

   Este arquivo é o último carregado, então vence timeline-detail.css e
   records-layout.css na ordem — mas eles usam !important em várias
   propriedades, e !important só é vencido por outro !important. Daí o uso aqui.
   ========================================================================== */

/* ---- 1. O card ---- */
.record-stat-row.day-card td{
  border-radius:14px;
  border-left-width:4px;
}

/* ---- 2. Marcação: horário em cima, traço embaixo ---- */
.day-card .wide-timeline .timeline-point{
  display:inline-flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:0!important;
  /* Largura pelo CONTEÚDO, não fixa: com a coluna de 52px o traço avançava
     além dos dígitos. Fonte monoespaçada com tabular-nums já garante que todo
     horário meça o mesmo, então o alinhamento entre marcações se mantém. */
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  text-align:center!important;
}
.day-card .wide-timeline .timeline-point b{
  order:1!important;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace!important;
  font-size:13px!important;
  font-weight:700!important;
  line-height:17px!important;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
/* O traço. Largura total da coluna da marcação: é o que faz ele parecer
   "sublinhar" o horário em vez de ser um enfeite solto.

   ALTURA 4px, NÃO 3px — e isso não é gosto. O navegador pinta um retângulo de
   round(base × escala) − round(topo × escala) pixels físicos. Quando
   altura × escala NÃO dá inteiro, o resultado depende de onde o traço caiu na
   tela: dias diferentes pintavam 3px e 4px com a MESMA regra CSS (medido: 15
   traços finos contra 10 grossos na mesma lista). Com altura × escala inteiro,
   round(x + n) = round(x) + n para n inteiro, e a espessura passa a ser a mesma
   em qualquer posição. 4px é a única altura pequena que dá inteiro em todas as
   escalas que Windows e macOS oferecem — 100%, 125%, 150%, 175% e 200%
   (4/5/6/7/8 px físicos). 3px falha em 125% (3,75) e em 150% (4,5). */
.day-card .wide-timeline .timeline-point i{
  order:2!important;
  display:block!important;
  width:100%!important;
  height:4px!important;
  margin:3px 0 0!important;
  border:0!important;
  border-radius:2px!important;
  box-shadow:none!important;
}
.day-card .wide-timeline .timeline-point.entry i{background:var(--color-primary,#416eec)!important}
.day-card .wide-timeline .timeline-point.exit i{background:#ef202b!important}
/* O NÚMERO é sempre preto; quem carrega cor é só o traço. Com número colorido
   E traço colorido, a mesma informação era dita duas vezes e a linha do tempo
   virava um arco-íris — o horário é o dado, a cor é a classificação dele. */
.day-card .wide-timeline .timeline-point b{color:var(--ink,#1f2c3d)!important}
.day-card .wide-timeline .timeline-point .point-origin{
  order:3!important;
  margin-top:2px;
  color:#5c6b82;
  font-size:10px!important;
  font-weight:750;
  letter-spacing:.01em;
  line-height:1.2;
}
.records-panel.show-punch-origin .day-card .wide-timeline .timeline-point > .point-origin{display:block!important}
.day-card .wide-timeline .timeline-point .point-origin-biometria{color:#1c4ed0}
.day-card .wide-timeline .timeline-point .point-origin-mobile{color:#067a52}

/* Estados que antes eram anéis em volta da bolinha viram COR do traço: anel em
   volta de uma barra de 3px vira borrão. O micro-rótulo (.point-state) e o
   balão continuam dizendo o estado por escrito. */
.day-card .wide-timeline .timeline-point.point-edited i,
.day-card .wide-timeline .timeline-point.point-manual i{background:var(--color-edit,#ff6b00)!important}
.day-card .wide-timeline .timeline-point.point-rejected i{background:#c3cbd6!important}
.day-card .wide-timeline .timeline-point.point-request-pending i{
  background:repeating-linear-gradient(90deg,#f0a020 0 4px,transparent 4px 7px)!important;
}
.day-card .wide-timeline.manipulated .timeline-point i{box-shadow:none!important}

/* ---- 3. O par e o intervalo ---- */
.day-card .wide-timeline{
  display:flex!important;
  align-items:flex-start!important;
  /* Quebra é PERMITIDA de propósito. Um dia com 3 turnos (5 blocos, contando os
     intervalos) não cabe na faixa, e a alternativa — rolagem horizontal dentro
     do card — esconderia marcação numa tela de auditoria de ponto: ninguém
     percebe que há mais batidas fora da vista. O card cresce e mostra tudo.
     A distância entre LINHAS é maior que a entre colunas, para separar as duas
     fileiras sem afastar os pares dentro de cada uma. */
  flex-wrap:wrap!important;
  column-gap:14px!important;
  row-gap:10px!important;
  padding-top:0!important;
  justify-content:flex-start!important;
}
/* A régua horizontal atrás das marcações some: com os pares agrupados ela
   ligava coisas que não têm ligação (a saída de um turno à entrada do outro). */
.day-card .wide-timeline::before{display:none!important}

.turn-pair{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  flex:0 0 auto;
}
.turn-pair-points{
  display:inline-flex;
  align-items:flex-start;
  gap:6px;
}
/* O traço que liga entrada e saída do MESMO par. Fica na altura dos traços das
   marcações, não na dos números. */
.turn-link{
  flex:0 0 auto;
  width:9px;
  height:2px;
  /* 20,5px = altura da linha do horário (17px) + a margem de 3px do traço +
     meio pixel para centralizar os 2px da ligação nos 3px do traço. Com os 8px
     que estavam aqui antes, ela boiava no meio dos NÚMEROS, 14px acima do traço
     que deveria continuar. Medido no navegador, não estimado. */
  margin-top:20.5px;
  border-radius:2px;
  background:#c3cbd6;
}
.turn-pair-total{
  color:#5b6b82;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  white-space:nowrap;
}
.turn-pair-total-open{color:#c1333f}
.turn-pair-open.has-close-hint{flex-basis:auto}
.turn-close-hint{
  color:#5b6b82;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.02em;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* Em uma sequência quebrada podem aparecer dois ou mais pontos sem par. Seus
   rótulos ("Turno em aberto" / "Sem entrada") são absolutos para não alterar
   o eixo dos horários, mas antes não reservavam largura e se pintavam um sobre
   o outro. Cada ponta aberta passa a ter sua própria coluna; se o card ficar
   estreito, a faixa quebra em vez de esconder informação. */
.day-card .turn-pair-open{flex-basis:96px}

/* Intervalo entre dois pares: mesma altura do par, sem traço — não é marcação,
   é o tempo em que ninguém estava trabalhando. */
.turn-gap{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  flex:0 0 auto;
  padding-top:1px;
}
.day-card .turn-gap{flex-basis:64px}
.turn-gap b{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;
  font-weight:700;
  line-height:17px;
  color:#5b6b82;
  font-variant-numeric:tabular-nums;
}
.turn-gap small{
  color:#5b6b82;
  font-size:8.5px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
}

/* O nome da pessoa (modo "Todas") era posicionado de forma ABSOLUTA para não
   virar um terceiro filho na variante em grade de 2 faixas. Funcionava enquanto
   a linha do tempo era uma fileira baixa de bolinhas; com o par agrupado
   (horário + traço + total) ela ficou ~40px mais alta e o nome passou a cair EM
   CIMA dos horários — medido: nome terminando em 589px, primeiro horário
   começando em 584px.

   Agora ele ocupa uma linha de verdade. Na variante em grade, `:has()` acrescenta
   a terceira faixa só quando o nome existe, então o dia sem nome (filtro numa
   pessoa só) continua com as duas faixas de antes. */
.day-card-content:has(.day-card-person).has-occurrence-note,
.day-card-content:has(.day-card-person).has-document-chips{
  grid-template-rows:auto minmax(20px,1fr) auto;
}

/* Faixa lateral só em VERMELHO. O verde marcava "dia fechado, nada a fazer" —
   ou seja, gastava cor no caso que não pede ação nenhuma, e competia com os
   traços das marcações, que são o que realmente precisa ser lido. Dia normal
   fica com a borda neutra dos outros lados; a cor passa a significar uma coisa
   só: "este dia precisa de você". */
.record-stat-row.day-card td{border-left-color:#dfe5ed}
.record-stat-row.day-card.day-card-alert td{border-left-color:#ff2d55}

/* ==========================================================================
   Colunas de apuração + barra de progresso (18/08/2026)

   Substituíram o anel. Ele mostrava só trabalhado + porcentagem e escondia
   previstas e saldo atrás do hover — para comparar dois dias era preciso passar
   o ponteiro em cada um, e na impressão os números sumiam. Agora os três ficam
   visíveis, alinhados em coluna, e a leitura vertical da lista funciona.
   ========================================================================== */
.day-card-metrics{
  position:relative;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 14px;
  outline:none;
}
.day-metric{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:1px;
  min-width:62px;
}
.day-metric em{
  color:#5b6b82;
  font-size:9px;
  font-style:normal;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.day-metric b{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13.5px;
  font-weight:700;
  color:var(--ink,#1f2c3d);
  font-variant-numeric:tabular-nums;
  line-height:1.25;
}
.day-metric-saldo b{font-weight:800}
.records-panel .records-skeleton + .records-skeleton{margin-top:14px}
.records-panel .records-skeleton td{
  display:flex!important;
  align-items:center!important;
  grid-template-columns:none!important;
  width:100%!important;
  min-height:76px;
  padding:10px 14px 10px 13px!important;
  border:2px solid #dfe5ed;
  border-left-width:4px;
  border-radius:14px;
  background:#fff;
}
.records-skeleton-card{display:flex;align-items:center;gap:16px;width:100%;min-height:52px}
.records-skeleton-total{display:inline-block;width:72px;height:22px;border-radius:8px;vertical-align:middle}
.records-skeleton-date{width:52px;height:42px;flex:none;border-radius:10px}
.records-skeleton-body{display:grid;gap:8px;flex:1}
.records-skeleton-line{height:12px;border-radius:999px}
.records-skeleton-line.is-short{width:42%}
.records-skeleton-metric{width:72px;height:28px;flex:none;border-radius:8px}
.records-pending-sync{margin:0 0 12px;padding:10px 12px;border-radius:10px;background:#fff6e8;color:#8a5a12;font-size:13px;font-weight:650}
.day-metric b.balance-negative{color:#c1333f}
.day-metric b.balance-positive{color:var(--color-success-text,#00805c)}

/* Recolher esconde as duas primeiras colunas; o saldo NUNCA some — é o número
   que responde "este dia fechou?", e some-lo esvaziaria o sentido do card. */
.records-panel.metrics-collapsed .day-metric-collapsible{display:none}

/* Em tela larga o invólucro não existe para o flex: Previstas, Trabalhadas,
   Abonadas e Noturnas continuam na mesma linha do saldo. Abaixo de 1600px a
   abertura deixa de ser essa linha e cada coluna fica em cima da outra. O
   saldo e a barra permanecem ao lado, no meio da pilha. Recolhida, a pilha
   some — um flex vazio ainda ocuparia o vão de 14px antes da seta. */
.day-metric-stack{display:contents}
@media screen and (max-width:1600px){
  .day-metric-stack{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:4px;
  }
  .records-panel.metrics-collapsed .day-metric-stack{display:none}
}

.day-metric-toggle{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:center;
  flex:0 0 auto;
  width:18px;
  height:18px;
  padding:0;
  border:1px solid #dfe5ed;
  border-radius:6px;
  background:#fff;
  color:#5b6b82;
  font-size:0;
  line-height:0;
  cursor:pointer;
  transition:border-color .15s, color .15s, background .15s;
}
/* Aberta, a seta aponta para as colunas (recolhe). Recolhida, aponta para o
   saldo (abre). O glifo é máscara, no centro do botão — o caractere ‹/›
   sentava na linha de base e a seta ficava baixa. */
.day-metric-toggle::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:12px;
  height:12px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E") center/contain no-repeat;
  transform:translate(-50%,-50%) rotate(180deg);
}
.records-panel.metrics-collapsed .day-metric-toggle::before{transform:translate(-50%,-50%)}
.day-metric-toggle:hover{border-color:var(--color-primary,#416eec);color:var(--color-primary,#416eec);background:#f6f8ff}

/* ---- Barra de progresso (no lugar do anel) ---- */
.day-card-progress{
  flex:0 0 138px;
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:0 12px;
}
.day-progress-track{
  display:block;
  height:6px;
  border-radius:99px;
  background:#e7ecf2;
  overflow:hidden;
}
.day-progress-fill{
  display:block;
  height:100%;
  border-radius:99px;
  background:#5b6b82;
  /* Anima width, não transform: a barra carrega o hachurado do abono e o
     travessão de hora extra, e scaleX esticaria os dois. É um elemento de
     ~4px de altura numa lista — o custo de layout aqui é irrelevante perto
     da distorção que a alternativa causaria. */
  transition:width .2s ease;
}
.day-progress-label{
  color:#5b6b82;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}
/* Jornada cumprida ou excedida. Verde AQUI não compete com nada: a faixa
   lateral só é pintada quando o dia precisa de intervenção. */
.day-progress-full .day-progress-fill{background:var(--color-success,#00a86b)}
.day-progress-full .day-progress-label{color:var(--color-success-text,#087a53)}
.day-progress-alert .day-progress-fill{background:#ff2d55}
.day-progress-alert .day-progress-label{color:#c1333f}
/* Folga, feriado ou pessoa sem escala: não há previsão para cumprir. */
.day-progress-none .day-progress-track{opacity:.5}

/* ==========================================================================
   Ajustes de 18/08/2026 (segunda leva)
   ========================================================================== */

/* O botão de ajustes era um `create-button` — círculo azul preenchido de 42px,
   o mesmo peso visual de uma ação primária. Numa lista de 30 dias, 30 círculos
   azuis competiam com a informação do card. Vira ícone vetorial neutro: sem
   preenchimento, sem borda, e o contorno só aparece no hover/foco. A ação
   continua exatamente onde estava, mas para de gritar. */
.day-card .day-card-menu-toggle{
  border:1px solid transparent!important;
  background:transparent!important;
  color:#98a5b5!important;
  transition:color .15s, background .15s, border-color .15s;
}
.day-card .day-card-menu-toggle svg{width:18px;height:18px}
.day-card .day-card-menu-toggle:hover,
.day-card .day-card-menu-toggle[aria-expanded="true"]{
  border-color:#dfe5ed!important;
  background:#f6f8fb!important;
  color:var(--ink,#1f2c3d)!important;
}
.day-card .day-card-menu-toggle:focus-visible{
  border-color:var(--color-primary,#416eec)!important;
  color:var(--color-primary,#416eec)!important;
  outline:none;
}
/* O botão também é `.create-button`. Essa classe, carregada depois, impõe
   altura mínima de 42px e raio de pílula. A largura fica em 38px (28 no
   compacto), então o fundo do hover virava uma cápsula oval. Aqui os dois
   eixos são o mesmo número e o raio é círculo. */
.records-panel .day-card .day-card-menu-toggle{
  box-sizing:border-box;
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  min-height:38px!important;
  max-width:38px!important;
  max-height:38px!important;
  padding:0!important;
  border-radius:50%!important;
  aspect-ratio:1;
}
.records-panel .day-card-empty .day-card-menu-toggle{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  min-height:34px!important;
  max-width:34px!important;
  max-height:34px!important;
}
.records-compact .day-card .day-card-menu-toggle{
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  min-height:28px!important;
  max-width:28px!important;
  max-height:28px!important;
}

/* Ponto EDITADO mantém a cor de entrada/saída. Trocar o traço inteiro para
   âmbar apagava a informação principal (é entrada ou é saída?) para dizer a
   secundária (foi mexido). Agora são duas linhas: a de cima continua azul ou
   vermelha, e a âmbar entra como linha SECUNDÁRIA embaixo.
   `::after` absoluto de propósito: não ocupa altura, então o card do dia
   ajustado tem exatamente a mesma altura do dia intacto. */
.day-card .wide-timeline .timeline-point i{position:relative}
.day-card .wide-timeline .timeline-point.point-edited i,
.day-card .wide-timeline .timeline-point.point-manual i,
.day-card .wide-timeline .timeline-point.point-request-pending i{
  background:transparent!important;
}
.day-card .wide-timeline .timeline-point.point-edited.entry i,
.day-card .wide-timeline .timeline-point.point-manual.entry i,
.day-card .wide-timeline .timeline-point.point-request-pending.entry i{background:var(--color-primary,#416eec)!important}
.day-card .wide-timeline .timeline-point.point-edited.exit i,
.day-card .wide-timeline .timeline-point.point-manual.exit i,
.day-card .wide-timeline .timeline-point.point-request-pending.exit i{background:#ef202b!important}

.day-card .wide-timeline .timeline-point.point-edited i::after,
.day-card .wide-timeline .timeline-point.point-manual i::after,
.day-card .wide-timeline .timeline-point.point-request-pending i::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:5px;
  height:2px;
  border-radius:2px;
  background:var(--color-edit,#ff6b00);
}
/* Ajuste ainda pendente de decisão: linha tracejada, não sólida — não é um
   fato consumado como a edição já aplicada. */
.day-card .wide-timeline .timeline-point.point-request-pending i::after{
  background:repeating-linear-gradient(90deg,var(--color-edit,#ff6b00) 0 3px,transparent 3px 6px);
}
/* Reprovado continua cinza e SEM linha secundária: ele não conta na apuração,
   então não há "entrada ou saída" a preservar. */
.day-card .wide-timeline .timeline-point.point-rejected i{background:#c3cbd6!important}
.day-card .wide-timeline .timeline-point.point-rejected i::after{content:none}

/* A palavra "Intervalo" desce de tamanho; o NÚMERO fica como está — ele é o
   dado, o rótulo é só a etiqueta dele. */
.turn-gap small{font-size:8.5px}

/* Faixa de decisão do pedido de ajuste (18/08/2026).
   O pedido já aparecia na linha do tempo e tinha Aprovar/Reprovar dentro do
   balão do ponto — mas o balão só abre no hover, um ponto por vez, e o motivo
   ficava invisível até passar o ponteiro. Quem precisa decidir vários pedidos
   caçava ponto a ponto. A faixa traz motivo e decisão para a superfície, ocupa
   a largura do card e só existe quando há pedido pendente: dia sem pedido
   continua com a mesma altura de antes. */
.day-card-request{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:10px;
  padding:9px 12px;
  border:1px solid #fde3b5;
  border-radius:10px;
  background:#fff9ef;
}
.day-card-request-badge{
  flex:0 0 auto;
  padding:3px 8px;
  border-radius:999px;
  background:#f5a623;
  color:#fff;
  font-size:9px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  white-space:nowrap;
}
.day-card-request-text{min-width:0;flex:1 1 auto;display:grid;gap:1px}
.day-card-request-text strong{color:#7a5410;font-size:11.5px;font-weight:750}
.day-card-request-text small{
  color:#9a7433;
  font-size:10px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.day-card-request-actions{flex:0 0 auto;display:flex;gap:7px}
.day-card-request-actions button{
  border-radius:999px;
  padding:6px 14px;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
}
/* Aprovar é a ação esperada e fica preenchida; recusar é destrutiva e fica
   discreta — quem recusa procura o botão, quem aprova não deveria procurar. */
.day-card-request-ok{
  border:1px solid var(--color-success,#00a86b);
  background:var(--color-success,#00a86b);
  color:#fff;
}
.day-card-request-ok:hover{filter:brightness(.94)}
.day-card-request-deny{
  border:1px solid #e4d6bd;
  background:#fff;
  color:#8a6a2f;
}
.day-card-request-deny:hover{border-color:#c1333f;color:#c1333f}

@media(max-width:900px){
  .day-card-request{flex-wrap:wrap}
  .day-card-request-actions{width:100%;justify-content:flex-end}
}

/* Dia abonado: barra HACHURADA, não sólida (18/08/2026).
   O dia fecha, mas não por trabalho — e a barra sólida dizia a mesma coisa que
   um dia efetivamente cumprido. A hachura diagonal marca "coberto por abono"
   sem inventar uma cor nova, e o rótulo escreve "Abonada" por extenso: a
   distinção não depende de reparar na textura.
   Vale junto com a correção de dayCardProgress, que passou a somar abonos — sem
   ela, um atestado de dia inteiro mostrava 0% ao lado de um saldo zero. */
.day-progress-abono .day-progress-fill{
  background:repeating-linear-gradient(
    -45deg,
    var(--color-primary,#416eec) 0 4px,
    #a8bff5 4px 8px
  );
}
.day-progress-abono .day-progress-label{color:var(--color-primary,#416eec)}

/* ==========================================================================
   Ajustes de 18/08/2026 (quarta leva)
   ========================================================================== */

/* ---- Data: "10 · SEG" numa linha, mês/ano na outra ----
   Era vertical (SEG / 10 / AGO 2026) e as três linhas empilhadas ditavam a
   altura MÍNIMA do card — a pílula ficava grande só por causa do bloco de data.
   Só o NÚMERO fica escuro: dia da semana e mês/ano são contexto, não o dado. */
.day-card-date{min-width:0;padding:0 14px 0 4px;gap:1px}
.day-card-date-line{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.day-card-date-line strong{font-size:22px;font-weight:800;letter-spacing:-.4px;color:var(--ink,#1f2c3d);line-height:1.1}
.day-card-date-line small{color:#5b6b82;font-size:11px;font-weight:700;letter-spacing:.06em}
.day-card-date-my{color:#5b6b82;font-size:9px;font-weight:700;letter-spacing:.04em;line-height:1.2}

/* ---- Barra: uma cor só ----
   Verde para cumprido, vermelho para inconsistente e azul para abono somavam
   três códigos de cor num elemento de 6px, ao lado de um traço colorido por
   marcação e de uma faixa lateral também colorida. A barra volta a ter UMA cor;
   quem classifica o dia é a faixa lateral (vermelha quando precisa de ação) e o
   rótulo escrito embaixo. */
.day-progress-full .day-progress-fill,
.day-progress-alert .day-progress-fill{background:#5b6b82}
.day-progress-full .day-progress-label,
.day-progress-alert .day-progress-label{color:#5b6b82}

/* Abono continua distinto por TEXTURA, não por cor: mesma tinta da barra, em
   hachura. O dia fecha, mas não por trabalho. */
.day-progress-abono .day-progress-fill{
  background:repeating-linear-gradient(-45deg,#5b6b82 0 4px,#aab5c4 4px 8px);
}
.day-progress-abono .day-progress-label{color:#5b6b82}

/* Hora extra: um travessão vermelho no fim da barra. A barra está cheia (o
   preenchimento é limitado a 100%), então sem essa marca nada distinguia
   "cumpriu exatamente" de "passou". O número real continua no rótulo. */
.day-card-progress{position:relative}
.day-progress-over .day-progress-track{overflow:visible}
.day-progress-over .day-progress-track::after{
  content:"";
  position:absolute;
  right:-1px;
  top:-3px;
  width:3px;
  height:12px;
  border-radius:2px;
  background:#ff2d55;
}

/* ---- Colunas condicionais de noturnas e abonadas ----
   Só aparecem quando o dia TEM esses minutos. Numa lista onde a maioria dos
   dias não tem nem um nem outro, duas colunas fixas vazias seriam ruído — e
   quando existem, são exatamente o que explica um saldo que não bate com a
   diferença entre previstas e praticadas. */
.day-metric-night b{color:#3f5b8a}
.day-metric-abono b{color:#5b6b82}
.day-metric-night em,
.day-metric-abono em{color:#5b6b82}

/* ---- Modo compacto ----
   Encolhe o card para caber mais dias na tela. Não esconde informação nenhuma:
   reduz tamanhos e espaços. Quem confere um mês inteiro rola bem menos. */
.records-panel.records-compact .record-stat-row + .record-stat-row{margin-top:8px}
.records-compact .record-stat-row.day-card td{min-height:52px;padding:7px 16px 7px 14px!important}
.records-compact .day-card-date-line strong{font-size:18px}
.records-compact .day-card-date-line small,
.records-compact .day-card-date-my{font-size:9px}
.records-compact .day-card-date{padding:0 10px 0 2px}
.records-compact .wide-timeline .timeline-point b{font-size:12px!important;line-height:15px!important}
.records-compact .turn-link{margin-top:18px}
.records-compact .turn-pair-total,
.records-compact .turn-gap small{font-size:8px}
.records-compact .turn-gap b{font-size:11px}
.records-compact .day-metric b{font-size:12.5px}
.records-compact .day-metric em{font-size:8.5px}
.records-compact .day-metric{min-width:56px}
.records-compact .day-card-metrics{gap:10px;padding:0 10px}
.records-compact .day-card-progress{flex:0 0 116px;padding:0 8px}
.records-compact .day-card-menu-toggle{width:28px!important;height:28px!important}
.records-compact .day-card-menu-toggle svg{width:16px;height:16px}
.records-compact .day-card-person{font-size:9.5px}
.records-compact .day-card-request{margin-top:7px;padding:7px 10px}

/* ---- Seletor de densidade (barra de filtros) ---- */
.records-density{display:flex;align-items:center;gap:7px;margin-top:10px}
.records-density > span{
  color:#5b6b82;
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.records-density button{
  border:1px solid #dce3ec;
  border-radius:var(--radius-pill,999px);
  background:#fff;
  color:#5b6b82;
  padding:5px 13px;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  transition:border-color .15s, background .15s, color .15s;
}
.records-density button:hover{border-color:var(--color-primary,#416eec);color:var(--color-primary,#416eec)}
.records-density button.active{
  border-color:var(--color-primary,#416eec);
  background:var(--color-primary,#416eec);
  color:#fff;
}

/* Separador entre o número e o dia da semana ("10 · SEG"). Fica no CSS e não no
   HTML porque é pontuação visual, não dado — assim o texto copiado do card não
   leva um traço solto junto. */
.day-card-date-line small::before{content:"· ";color:#6b7a8f}

/* Correções de 18/08/2026 na barra de progresso.

   1. TAMANHO IGUAL EM TODAS. Um card aparecia com a barra maior: `flex:0 0 118px`
      não segurava, porque item de flex tem `min-width:auto` e não encolhe abaixo
      do próprio conteúdo — o rótulo "100% · com abono", com `nowrap`, era mais
      largo que a coluna e a esticava (medido: 124,1px contra 118px dos outros).
      `min-width:0` devolve o controle ao `flex-basis`; o `ellipsis` é a rede de
      segurança para um rótulo futuro que volte a passar do espaço, para ele ser
      cortado em vez de deformar a coluna. Os rótulos longos também foram
      encurtados ("Sem previsão", "100% · abono").

   2. TRAVESSÃO DENTRO DA BARRA. Ele estava em `right:-1px; top:-3px`, ou seja,
      pendurado FORA da trilha. Agora ocupa a altura da própria trilha, no fim
      dela, e a trilha volta a recortar o que passa. */
.day-card-progress{min-width:0}
.day-progress-label{overflow:hidden;text-overflow:ellipsis}

.day-progress-over .day-progress-track{overflow:hidden}
.day-progress-over .day-progress-track::after{
  content:"";
  position:absolute;
  right:0;
  top:0;
  width:3px;
  height:100%;
  border-radius:0 99px 99px 0;
  background:#ff2d55;
}

/* A trilha precisa ser o ANCORADOURO do travessão. Sem isto ele se prendia em
   `.day-card-progress` (a coluna inteira, com trilha + rótulo) e ficava com
   ~23px de altura em vez dos 6px da barra — uma risca vermelha atravessando
   também o texto embaixo. */
.day-progress-track{position:relative}

/* Travessão de hora extra: ALTURA MAIOR que a barra, mas colado no fim dela.
   A primeira versão tinha a altura certa (12px) e estava deslocada para fora na
   horizontal; a correção seguinte trouxe para dentro mas amarrou a altura à
   barra (6px), e ele sumiu. Agora: horizontalmente no fim da trilha,
   verticalmente ultrapassando-a dos dois lados, centralizado. A trilha volta a
   deixar transbordar — é justamente o transbordo vertical que dá o sinal. */
.day-progress-over .day-progress-track{overflow:visible}
.day-progress-over .day-progress-track::after{
  right:0;
  top:50%;
  transform:translateY(-50%);
  width:3px;
  height:13px;
  border-radius:2px;
}

/* Respiro para a linha secundária (18/08/2026).
   Ela é `::after` ABSOLUTO — de propósito, para o dia ajustado não ficar mais
   alto que o dia intacto. Só que absoluto não ocupa espaço, e ela caía em cima
   do "03:55 TRABALHO" logo abaixo: medido, terminava 1px DEPOIS de o rótulo
   começar. O card ficava visivelmente prensado.

   A solução é reservar a altura no traço principal, para TODOS os pontos — não
   só nos ajustados. Reservar só onde há ajuste faria o card mudar de altura
   conforme o dia tem ou não correção, e a lista perderia o ritmo. São 6px:
   a secundária termina ~3px abaixo do traço, e os outros 3px são o ar que
   estava faltando. */
.day-card .wide-timeline .timeline-point i{margin:3px 0 6px!important}
.turn-pair{gap:3px}
/* No modo compacto o respiro é menor, mas continua existindo: sem ele o
   problema volta exatamente igual, só que mais apertado. */
.records-compact .wide-timeline .timeline-point i{margin:2px 0 5px!important}
.records-compact .turn-pair{gap:2px}

/* Bloco de data com largura FIXA. Ele media pelo conteúdo, e "SÁB" / "QUA" /
   "DOM" não têm a mesma largura — as marcações começavam em pontos diferentes
   de uma linha para a outra (medido: variação de 10px ao longo da lista). Numa
   pilha de 30 dias isso lê como desalinhamento, mesmo sendo pouco. */
.day-card-date{flex:0 0 96px;box-sizing:border-box}
.records-compact .day-card-date{flex-basis:84px}

/* ==========================================================================
   Ajustes de 18/08/2026 (quinta leva)
   ========================================================================== */

/* O rótulo do par ("SEM ENTRADA", "TURNO EM ABERTO", "06:33 TRABALHO") entrava
   na largura do bloco, e o bloco centraliza o conteúdo: quando o rótulo era mais
   largo que as marcações — sempre, num bloco de UM ponto só — o horário era
   empurrado para o centro do rótulo, e o primeiro ponto de cada dia começava num
   x diferente conforme o texto embaixo. Era o desalinhamento visto entre os dias
   17 e 18.
   Agora o rótulo é posicionado de forma absoluta: continua centralizado sob as
   marcações, mas não manda mais na largura do bloco. Quem dita a largura são as
   marcações, que é o que precisa alinhar de uma linha para a outra. */
.turn-pair{position:relative;padding-bottom:15px}
.turn-pair-total{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  line-height:13px;
}
.records-compact .turn-pair{padding-bottom:13px}

/* Item 2.1: a coluna do progresso cortava o rótulo ("94% CUMPRI…"). */

/* ==========================================================================
   Barra de filtros de auditoria + acabamentos (18/08/2026)
   ========================================================================== */

/* Os "cards inteligentes" saíram da coluna lateral. Eles nunca foram resumo:
   clicar num deles RECORTA a lista, ou seja, sempre foram filtro. Como filtro,
   o lugar é junto dos outros controles — e a lateral devolveu ~300px de largura
   para as marcações, que é onde a informação densa está. */
.records-audit-bar{
  display:flex;
  align-items:flex-start;
  gap:14px;
  /* SEM wrap na barra: quem quebra linha e a lista de pilulas, por dentro. Com
     wrap aqui, os chips esticavam ate a largura toda e jogavam a densidade
     para uma terceira linha -- a barra ia a 181px e gastava mais espaco do que
     a coluna lateral que ela veio substituir. */
  flex-wrap:nowrap;
  margin:0 0 14px;
  padding:10px 14px;
  border:1px solid var(--color-border,#dfe5ed);
  border-radius:14px;
  background:#fff;
}
.records-audit-bar[hidden]{display:none}
/* O rotulo textual "Filtro de auditoria" saiu: custava ~120px de largura para
   dizer o que as proprias pilulas dizem, e essa largura empurrava os chips para
   uma terceira linha. Vira aria-label -- quem le por voz continua ouvindo. */
.records-audit-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 auto;min-width:0}
.records-audit-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 9px;
  border:1px solid #e2e8f0;
  border-radius:999px;
  background:#fff;
  color:#5b6b82;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  transition:border-color .15s, background .15s, color .15s;
}
.records-audit-chip i{font-style:normal;font-size:11px;line-height:1}
.records-audit-chip b{
  padding:1px 6px;
  border-radius:999px;
  background:#eef2f7;
  color:#41536a;
  font-size:10px;
  font-weight:800;
}
.records-audit-chip:hover{border-color:#c3cbd6}
/* A cor marca a NATUREZA do filtro, não o estado — o estado é o preenchimento
   quando ativo. Assim dá para achar "o vermelho" de relance sem ler tudo. */
.records-audit-chip.danger{border-color:#fbd0d7;color:#c1333f}
.records-audit-chip.danger b{background:#fdeaed;color:#c1333f}
.records-audit-chip.warning{border-color:#fde3b5;color:#8a6a2f}
.records-audit-chip.warning b{background:#fff6e6;color:#8a6a2f}
.records-audit-chip.info{border-color:#cfe0fb;color:#2d5fd0}
.records-audit-chip.info b{background:#eef5ff;color:#2d5fd0}
.records-audit-chip.ok{border-color:#c9ecdd;color:#087a53}
.records-audit-chip.ok b{background:#e8f7f0;color:#087a53}
.records-audit-chip.active{
  border-color:var(--ink,#1f2c3d);
  background:var(--ink,#1f2c3d);
  color:#fff;
}
.records-audit-chip.active b{background:rgba(255,255,255,.2);color:#fff}

/* Auditoria geral (02/09/2026). A tela normal continua sendo uma folha por
   pessoa; este card é a fotografia curta dos dias que pedem ação na empresa.
   As pílulas são pequenas porque funcionam como índice da revisão, não como uma
   segunda lista de colaboradores. */
.records-general-audit{
  margin-top:12px;
  padding:12px 0 0;
  border-top:1px solid var(--color-border,#dfe5ed);
}
.records-general-audit[hidden]{display:none}
.records-general-audit-heading{
  display:flex;
  align-items:center;
  gap:10px;
}
.records-general-audit-heading>div{display:grid;gap:2px;min-width:0;margin-right:auto}
.records-general-audit-heading span{
  color:#2d5fd0;
  font-size:9px;
  font-weight:850;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.records-general-audit-heading strong{color:var(--ink,#1f2c3d);font-size:13px;line-height:1.3}
.records-general-audit-heading small{color:#5b6b82;font-size:10.5px;line-height:1.35}
.records-general-audit-heading .text-button{flex:0 0 auto;font-size:11px}
.records-general-audit-heading .outline-button{flex:0 0 auto;min-height:34px;padding:7px 12px;font-size:11px}
.records-general-audit-people{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
}
.records-general-audit-person{
  display:inline-flex;
  align-items:stretch;
  min-height:28px;
  overflow:hidden;
  border:1px solid #cfe0fb;
  border-radius:999px;
  background:#f7faff;
  color:#315b9f;
}
.records-general-audit-person.active{
  border-color:var(--ink,#1f2c3d);
  background:var(--ink,#1f2c3d);
  color:#fff;
}
.records-general-audit-focus,
.records-general-audit-remove{
  display:inline-flex;
  align-items:center;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  cursor:pointer;
}
.records-general-audit-focus{gap:6px;padding:4px 5px 4px 10px;font-size:10.5px;font-weight:800}
.records-general-audit-focus span{white-space:nowrap}
.records-general-audit-focus b{
  min-width:19px;
  padding:1px 5px;
  border-radius:999px;
  background:#e4edfb;
  color:#315b9f;
  font-size:9.5px;
  font-variant-numeric:tabular-nums;
  text-align:center;
}
.records-general-audit-person.active .records-general-audit-focus b{background:rgba(255,255,255,.18);color:#fff}
.records-general-audit-remove{
  justify-content:center;
  width:25px;
  padding:0 7px 0 5px;
  border-left:1px solid rgba(49,91,159,.17);
  font-size:14px;
  line-height:1;
}
.records-general-audit-remove>span{display:block;transform:translateY(-1px)}
.records-general-audit-person.active .records-general-audit-remove{border-left-color:rgba(255,255,255,.2)}
.records-general-audit-focus:hover,
.records-general-audit-remove:hover{background:rgba(45,95,208,.08)}
.records-general-audit-person.active .records-general-audit-focus:hover,
.records-general-audit-person.active .records-general-audit-remove:hover{background:rgba(255,255,255,.1)}
.records-general-audit-focus:focus-visible,
.records-general-audit-remove:focus-visible{outline:2px solid var(--color-primary,#416eec);outline-offset:-2px}
.records-general-audit-empty{margin:10px 0 0;color:#5b6b82;font-size:11.5px;line-height:1.5}
.records-general-audit-empty[hidden]{display:none}
@media(max-width:760px){
  .records-general-audit-heading{align-items:flex-start;flex-wrap:wrap}
  .records-general-audit-heading>div{flex:1 1 100%}
  .records-general-audit-heading .outline-button{margin-left:auto}
}

/* Densidade encostada à direita, na MESMA linha das pílulas: era uma linha
   própria abaixo dos atalhos de período e custava uma faixa inteira de altura
   no card de filtros. */
.records-audit-bar .records-display{margin-left:auto}

/* ---- Legenda vira dica ----
   Ela ocupava espaço fixo no cabeçalho para explicar algo que quase sempre já
   se entende. Vira "?" e só aparece sob demanda. */
.timeline-legend-tip{
  position:relative;
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  border:1px solid #cbd5e1;
  border-radius:50%;
  background:#fff;
  color:#64748b;
  font-size:11px;
  font-weight:800;
  line-height:1;
  cursor:help;
}
.timeline-legend-tip:hover{border-color:var(--color-primary,#416eec);color:var(--color-primary,#416eec)}
.timeline-legend-tip .timeline-legend{
  position:absolute;
  z-index:30;
  top:calc(100% + 8px);
  right:0;
  display:grid;
  gap:7px;
  width:max-content;
  max-width:320px;
  padding:12px 14px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#fff;
  box-shadow:0 14px 34px rgba(15,23,42,.14);
  text-align:left;
  opacity:0;
  pointer-events:none;
  transition:opacity .14s ease;
}
.timeline-legend-tip:hover .timeline-legend,
.timeline-legend-tip:focus-visible .timeline-legend{opacity:1;pointer-events:auto}
.timeline-legend-item{
  display:flex;
  align-items:center;
  gap:9px;
  color:#41536a;
  font-size:11.5px;
  font-weight:600;
  white-space:nowrap;
}
/* A legenda mostra TRAÇO, que é o que a tela usa — a antiga desenhava bolinhas
   que não existem mais. */
.timeline-legend-bar{flex:0 0 22px;height:4px;border-radius:2px}
.timeline-legend-bar.entry{background:var(--color-primary,#416eec)}
.timeline-legend-bar.exit{background:#ef202b}
.timeline-legend-bar.edited{background:var(--color-edit,#ff6b00)}
.timeline-legend-bar.pending{background:repeating-linear-gradient(90deg,var(--color-edit,#ff6b00) 0 3px,transparent 3px 6px)}
.timeline-legend-bar.rejected{background:#c3cbd6}
.timeline-legend-swatch{flex:0 0 22px;height:12px;border-radius:3px}
.timeline-legend-swatch.alert{background:linear-gradient(90deg,#ff2d55 0 4px,#eef2f7 4px)}
.timeline-legend-swatch.over{background:linear-gradient(90deg,#e7ecf2 0 18px,#ff2d55 18px)}

/* ---- Cards de resumo mais baixos (item 4) ----
   Padding de 14px, rótulo de 11px e número de 19px com 6px de margem davam
   ~72px de altura para mostrar UM número cada. Com 7 cards no topo, era uma
   faixa alta antes de a lista começar. Encolhe na vertical sem perder nada:
   o número continua sendo o elemento dominante, só que a caixa para de sobrar.
   Na horizontal, o grid com minmax(150px, 1fr) esticava cada card até encher
   a faixa. Sete números não cabiam: dois desciam e o resto da segunda linha
   ficava vazio. O card agora mede o texto e para. Sobra espaço à direita
   em vez de uma segunda linha. */
.record-summary{
  display:flex;
  flex-wrap:nowrap;
  align-items:stretch;
  justify-content:flex-start;
  gap:10px;
  margin-bottom:12px;
}
.record-summary article{
  flex:0 1 auto;
  width:max-content;
  min-width:0;
  max-width:100%;
  padding:9px 12px;
}
.record-summary span{font-size:10px;letter-spacing:.03em}
.record-summary strong{font-size:17px;margin-top:2px;line-height:1.15;white-space:nowrap}
.record-summary .text-button{margin-top:2px;font-size:10.5px;white-space:nowrap}
@media (max-width:900px){
  .record-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .record-summary article{width:auto}
  .record-summary span,.record-summary strong,.record-summary .text-button{white-space:normal}
}


/* ==========================================================================
   Registros sem coluna lateral (18/08/2026 — segunda rodada)
   ========================================================================== */

/* A coluna auxiliar saiu inteira. O card do dia agora usa a largura toda, que
   é o que ele precisava: a informação virou horizontal (colunas de apuração +
   barra de progresso) e estava espremida contra um rail de ~300px. */
.records-panel{width:100%}

/* Filtro inteligente dentro do MESMO card do filtro de período (item 3): eram
   dois cards empilhados fazendo a mesma coisa — recortar a lista. */
.record-filter .records-audit-bar{
  margin:12px 0 0;
  padding:12px 0 0;
  border:0;
  border-top:1px solid var(--color-border,#dfe5ed);
  border-radius:0;
  background:transparent;
}
.record-filter .records-audit-bar[hidden]{display:none}

/* ---- Cabeçalho em uma linha só (item 5) ----
   Título e contagem estavam empilhados num bloco próprio, com o "?" solto na
   outra ponta: três alturas para uma frase curta. */
.records-heading-inline{display:flex;align-items:baseline;gap:10px;flex-wrap:nowrap}
.records-heading-inline h2{margin:0;flex:0 0 auto}
.records-heading-inline #recordCount{
  margin:0;
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.records-heading-inline .timeline-legend-tip{flex:0 0 auto;align-self:center}

/* ---- Título dentro da dica (item 6) ----
   Substitui o title= nativo, que o sistema desenhava como um balão preto por
   cima da própria dica — dois retângulos disputando o mesmo canto. */
.timeline-legend-head{
  display:block;
  margin:-2px 0 3px;
  padding-bottom:7px;
  border-bottom:1px solid #eef2f7;
  color:var(--ink,#1f2c3d);
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.02em;
  white-space:nowrap;
}

/* Aviso de intervalo previsto que ninguém marcou (18/08/2026).
   As horas contam pelo par batido — o sistema não desconta mais o intervalo da
   escala por conta própria. O dia fica sinalizado até alguém decidir. */
.day-card-missing-break{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin:4px 0 0;
  color:#c1333f;
  font-size:11px;
  font-weight:650;
  line-height:1.4;
}
.day-card-missing-break .link-button{
  border:0;
  background:none;
  padding:0;
  color:var(--color-primary,#416eec);
  font:inherit;
  font-weight:800;
  text-decoration:underline;
  cursor:pointer;
}

/* ==========================================================================
   Acabamento de Registros (18/08/2026)
   ========================================================================== */

/* Alvo de clique. As pílulas de auditoria mediam 30px e a dica da legenda 24px.
   Não é só toque: num filtro que se usa em sequência, alvo curto custa precisão
   com mouse também. */
.records-audit-chip{min-height:32px}
.records-density button{min-height:32px}
.timeline-legend-tip{width:26px;height:26px}

/* Números que se comparam entre linhas precisam de largura de dígito fixa —
   sem isso, "101:47" e "176:00" desalinham e a coluna deixa de ser uma coluna.
   O card do dia já usava tabular-nums; a faixa de totais tinha ficado de fora. */
.record-summary strong,
.records-audit-chip b{font-variant-numeric:tabular-nums}

/* Superfície do navegador: a seleção de texto vinha com o azul padrão do
   sistema, que não pertence a nenhum design. Numa tela onde se copia horário e
   matrícula o tempo todo, é um detalhe que aparece muito. */
#registros ::selection{background:#dce7ff;color:#1c2f49}

/* A CAUSA da maioria das reprovações de contraste desta tela não é local: o
   token global `--muted` (#758196) mede 3,93:1 no branco, abaixo dos 4,5:1 que
   texto pequeno exige. Ele pinta rótulo secundário no app inteiro, então
   corrigi-lo no tokens.css repinta todas as telas — decisão que é do usuário,
   não deste acabamento.
   Aqui ele fica corrigido só no escopo de Registros (5,4:1, mesma família de
   cinza-azulado). É stopgap consciente: o certo é promover para o token. */
#registros{--muted:#5b6b82}

/* O nome da pessoa (visível só na auditoria geral) herdava --muted de
   uma regra mais específica em outro arquivo e ficava em 3,93:1. Como é o dado
   que identifica de quem é a linha, precisa passar o piso. */
.day-card .day-card-person{color:#5b6b82}

/* ==========================================================================
   Preferências de exibição da lista (18/08/2026)
   ========================================================================== */

/* A palavra "trabalho" mora sempre no DOM, para leitor de tela. Por padrão ela
   é lida e não vista: numa lista de 30 dias a palavra aparecia ~60 vezes
   dizendo o que a posição já diz — o rótulo fica onde é exceção, no intervalo. */
.turn-pair-word{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}
.records-panel.show-pair-label .turn-pair-word{
  position:static;
  width:auto;
  height:auto;
  overflow:visible;
  clip:auto;
}

.records-display{position:relative;flex:0 0 auto}
.records-display-toggle{
  display:inline-flex;
  align-items:center;
  min-height:var(--ui-control-height,42px);
  padding:0 16px;
  border:1px solid #b9d5ff;
  border-radius:var(--radius-pill,999px);
  background:#dcebff;
  color:#244f9f;
  font-size:12px;
  font-weight:750;
  cursor:pointer;
}
.records-display-toggle:hover{border-color:#8fb7f4;background:#cfe2ff}
.records-display-toggle[aria-expanded="true"]{border-color:var(--color-primary,#416eec);color:var(--color-primary,#416eec)}

/* Mesmo desenho do menu de ações do dia: linhas inteiras, sombra e raio iguais.
   Duas caixas flutuantes na mesma tela precisam parecer a mesma peça. */
.records-display-menu{
  width:min(560px,calc(100vw - 32px));
  max-height:min(84vh,720px);
  padding:26px;
  border:1px solid #dfe6ef;
  border-radius:18px;
  background:#fff;
  box-shadow:0 18px 38px rgba(18,37,65,.16);
  text-align:left;
}
.records-display-menu:not([open]){display:none}
.records-display-menu::backdrop{background:rgba(13,27,48,.52);backdrop-filter:blur(3px)}
.records-display-menu>.eyebrow{margin:0 42px 7px 0}
.records-display-menu>h2{margin:0 42px 5px 0;font-size:20px}
.records-display-menu>.dialog-subtitle{margin:0 42px 18px 0}
.records-display-row{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin:0;
  padding:9px 10px;
  border-radius:8px;
  cursor:pointer;
}
.records-display-menu .records-display-row+.records-display-row{border-top:1px solid #eef2f7;border-radius:0}
.records-display-row:hover{background:#f4f7fb}
.records-display-row strong{display:block;color:#1c2f49;font-size:12px;font-weight:700}
.records-display-row small{display:block;margin-top:2px;color:#5b6b82;font-size:11px;line-height:1.4}
.records-display-row input[type="checkbox"]{margin-top:2px;flex:0 0 auto}
.records-display-range{flex-direction:column;gap:7px}
.records-display-range input[type="range"]{width:100%;accent-color:var(--color-primary,#416eec)}
.records-display-row b{color:var(--color-primary,#416eec);font-weight:800}

/* Densidade como primeira linha do menu de exibição: as três preferências da
   lista moram no mesmo lugar, em vez de uma na barra e duas escondidas atrás de
   um botão. O rótulo da linha carrega o nome, então os botões ficam só com os
   dois valores. */
.records-display-segment{flex-direction:column;gap:8px;cursor:default}
.records-display-segment .records-density,
.records-display-segment .records-order,
.records-display-segment .records-origin{
  display:flex;
  gap:6px;
  width:100%;
  margin:0;
}
.records-display-segment .records-density button,
.records-display-segment .records-order button,
.records-display-segment .records-origin button{
  flex:1 1 0;
  min-height:32px;
  padding:0 10px;
  border:1px solid #e2e8f0;
  border-radius:8px;
  background:#fff;
  color:#5b6b82;
  font-size:11px;
  font-weight:750;
  cursor:pointer;
}
.records-display-segment .records-density button:hover,
.records-display-segment .records-order button:hover,
.records-display-segment .records-origin button:hover{border-color:#c3cbd6}
.records-display-segment .records-density button.active,
.records-display-segment .records-order button.active,
.records-display-segment .records-origin button.active{
  border-color:var(--ink,#1f2c3d);
  background:var(--ink,#1f2c3d);
  color:#fff;
}

/* Dia em férias. Não é abono nem folga: não há expediente previsto, e o selo
   precisa dizer isso de relance numa lista onde o vizinho é "Ausente". */
.day-card-vacation{
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  width:max-content;
  max-width:100%;
  margin:4px 0 0;
  padding:2px 7px;
  border-radius:999px;
  background:#eef6ff;
  color:#3f6ea8;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
}
/* Feriado e dia dispensado do aviso prévio: mesma pílula das férias, cor
   própria para não serem confundidos de relance. */
.day-card-vacation.day-card-holiday{
  background:#fff4e5;
  color:#a3611a;
}
.day-card-vacation.day-card-notice{
  background:#f1ecfb;
  color:#6a4aa8;
}

/* Marcação reprovada: aparece porque quem confere precisa ver que existiu, mas
   fica fora do pareamento — não é turno nem intervalo. Ver o laço da linha do
   tempo em app.js (caso Miguel, 18/08/2026).
   A opacidade fica na marca, não no ponto inteiro. No pai, ela vale também
   para o balão — e opacidade de pai não se desfaz no filho. O cartão saía
   pela metade e a linha do tempo de trás (horário, INTERVALO, traço) lia
   por cima do motivo da reprovação. */
.turn-pair-rejected .timeline-point > :is(b, i, small){opacity:.5}
.turn-pair-rejected{
  min-width:68px;
  padding-bottom:14px;
}
.turn-pair-rejected .turn-pair-points{justify-content:center}
.turn-pair-total-rejected{
  color:#98a4b3;
  font-size:8.5px;
  letter-spacing:.035em;
  text-decoration:none;
}

/* "Aviso de erro" é uma linha do menu de ajustes, no lugar do realinhamento
   verde que não pode existir neste dia. O tom é vermelho a pedido de
   27/09/2026, para não ser lido como a ação verde. O texto mora no card
   sequenceWarningDialog, aberto pelo clique desta linha. */
.day-card-actions-menu .day-card-actions-alert{
  border-bottom:1px solid #f3c2c8!important;
  background:#fff1f2!important;
  color:#b42334!important;
  font-weight:800!important;
}
.day-card-actions-menu .day-card-actions-alert svg,
.day-card-actions-menu .day-card-actions-alert:hover svg{color:#b42334}
.day-card-actions-menu .day-card-actions-alert:hover,
.day-card-actions-menu .day-card-actions-alert:focus-visible{
  background:#ffe4e8!important;
  color:#b42334!important;
}
#sequenceWarningDialog{width:min(460px,calc(100vw - 28px))}
#sequenceWarningBody{
  border-color:#f3c2c8;
  background:#fff1f2;
  color:#7a1a28;
  font-size:13px;
  line-height:1.4;
}
#sequenceWarningBody .sequence-warning-label{
  margin:0 0 6px;
  color:#b42334;
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
#sequenceWarningBody .sequence-warning-label + ul + .sequence-warning-label{margin-top:14px}
#sequenceWarningBody ul{margin:0;padding:0 0 0 18px}
#sequenceWarningBody li{margin:0 0 4px}
#sequenceWarningBody li:last-child{margin:0}