/* Rótulo flutuante do Jornada. O texto fica na linha da borda o tempo todo,
   com o campo vazio ou preenchido.

   Não pinta fundo. O retângulo branco antigo tapava o traço e atravessava o
   fundo do campo, a faixa e a borda do cartão. Quem abre o vão é o <legend>
   de .j-floating-outline: a linha para antes das letras e continua depois.
   O neon do foco é .j-floating-glow, a mesma borda 3px para fora: a sombra
   do retângulo fechado atravessava a palavra. O mesmo recurso da tela de acesso. */
@media screen {
  .j-floating-field,
  .j-floating-control {
    --j-float-label-slot: 0px;
    /* Altura da linha do rótulo. O corte do <legend> fica em line-height 0:
       uma linha de verdade empurra a borda do fieldset para baixo e a pílula
       fica mais baixa que a busca. */
    --j-label-line: 14px;
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    margin-top: 8px;
  }

  .j-floating-caption {
    position: absolute;
    z-index: 3;
    /* A linha do rótulo tem 14px e as letras ocupam o meio dela.
       top 0 com translateY(-50%) põe esse meio no traço. */
    top: 0;
    /* 23px tira o texto de cima da curva da pílula. 13px caía no canto. */
    left: 23px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: calc(100% - 26px);
    padding: 0;
    background: transparent;
    color: #60718a;
    font-size: 12px;
    font-weight: 650;
    line-height: var(--j-label-line);
    white-space: nowrap;
    transform: translateY(-50%);
    transition: top .16s ease, transform .16s ease, padding .16s ease,
      color .15s ease, font-size .16s ease, font-weight .16s ease;
  }

  /* O corte com reticências mora no TEXTO, nunca no rótulo.
     O `max-width` limita a CAIXA, não o texto: um rótulo comprido continuava
     transbordando dela e o excesso entrava na área rolável do diálogo — uma
     barra horizontal sem nada visível para rolar (visto na barra lateral de
     "Escolher posição de assinatura"). A primeira correção pôs `overflow:hidden`
     no próprio rótulo, e ele passou a recortar TAMBÉM o balão da dica, que é
     descendente dele: o ícone continuava desenhado e o texto nunca aparecia
     (sintoma "alguns ícones de dica não funcionam" — só sobravam as dicas de
     LINHA, que não moram dentro de um rótulo).
     Com o recorte no <span> do texto, o balão fica livre e as reticências
     continuam valendo. */
  .j-floating-caption-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .j-floating-field:focus-within > .j-floating-caption,
  .j-floating-field:has(.j-floating-input:not(:placeholder-shown)) > .j-floating-caption,
  .j-floating-field:has(.j-floating-input:-webkit-autofill) > .j-floating-caption,
  .j-floating-control:focus-within > .j-floating-caption,
  .j-floating-control:has(.j-floating-input:not(:placeholder-shown)) > .j-floating-caption,
  .j-floating-control:has(.j-floating-input:-webkit-autofill) > .j-floating-caption,
  .j-floating-always > .j-floating-caption {
    top: 0;
    padding: 0;
    background: transparent;
    transform: translateY(-50%);
    color: var(--color-primary);
    font-size: 10px;
    font-weight: 750;
  }

  /* Contorno com o vão do texto. O controle por baixo fica sem borda, senão
     a linha continuaria atrás das letras. O neon do foco é .j-floating-glow. */
  .j-floating-outline {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    left: 0;
    height: var(--ui-control-height);
    box-sizing: border-box;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--ui-control-border);
    /* 999px é a pílula, mas com esse valor o Chrome desenha a borda
       inteira e ignora o vão do <legend>: o rótulo fica solto acima da
       linha. Metade da altura é a mesma pílula e o vão abre. */
    border-radius: calc(var(--ui-control-height) / 2);
    background: transparent;
    pointer-events: none;
  }

  .j-floating-outline legend {
    margin: 0 0 0 var(--j-label-gap-x, 9px);
    padding: 0;
    width: var(--j-label-gap-w, auto);
    max-width: none;
    box-sizing: border-box;
    overflow: hidden;
    color: transparent;
    font-size: 10px;
    font-weight: 750;
    /* Altura zero de propósito. Com a altura do rótulo, o Chrome desenha a
       borda no meio do <legend> e a pílula fica mais baixa que a busca.
       O vão continua: o raio é metade da altura e a largura é a da palavra. */
    line-height: 0;
    white-space: nowrap;
  }

  .j-floating-field:has(textarea) > .j-floating-outline,
  .j-floating-control:has(textarea) > .j-floating-outline {
    height: auto;
    bottom: 0;
    border-radius: var(--ui-control-radius-tall);
  }

  .j-floating-field:has(textarea):has(> small.field-help:not([hidden])) > .j-floating-outline,
  .j-floating-control:has(textarea):has(> small.field-help:not([hidden])) > .j-floating-outline {
    bottom: auto;
    height: 82px;
  }

  .j-floating-field:hover > .j-floating-outline,
  .j-floating-control:hover > .j-floating-outline {
    border-color: var(--ui-control-border-hover);
  }

  .j-floating-field:focus-within > .j-floating-outline,
  .j-floating-control:focus-within > .j-floating-outline {
    border-color: var(--color-primary);
  }

  /* Neon do foco. box-shadow segue o retângulo e passa por cima do texto.
     Esta borda fica 3px para fora e o <legend> abre o mesmo vão da linha.
     O +1px desfaz a borda de 1px já descontada em --j-label-gap-x: o glow
     começa 3px à esquerda e a borda dele tem 3px, então os dois se anulam. */
  .j-floating-glow {
    position: absolute;
    z-index: 1;
    top: -3px;
    right: -3px;
    left: -3px;
    height: calc(var(--ui-control-height) + 6px);
    box-sizing: border-box;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 3px solid transparent;
    border-radius: calc((var(--ui-control-height) + 6px) / 2);
    background: transparent;
    pointer-events: none;
  }

  .j-floating-glow legend {
    margin: 0 0 0 calc(var(--j-label-gap-x, 9px) + 1px);
    padding: 0;
    width: var(--j-label-gap-w, auto);
    max-width: none;
    box-sizing: border-box;
    overflow: hidden;
    color: transparent;
    font-size: 10px;
    font-weight: 750;
    line-height: 0;
    white-space: nowrap;
  }

  .j-floating-field:focus-within > .j-floating-glow,
  .j-floating-control:focus-within > .j-floating-glow {
    border-color: var(--color-focus);
  }

  .j-floating-field:has(textarea) > .j-floating-glow,
  .j-floating-control:has(textarea) > .j-floating-glow {
    height: auto;
    bottom: -3px;
    border-radius: calc(var(--ui-control-radius-tall) + 3px);
  }

  .j-floating-field:has(textarea):has(> small.field-help:not([hidden])) > .j-floating-glow,
  .j-floating-control:has(textarea):has(> small.field-help:not([hidden])) > .j-floating-glow {
    bottom: auto;
    height: calc(82px + 6px);
  }

  .j-floating-field:has(> .j-floating-outline) > .employee-picker,
  .j-floating-control:has(> .j-floating-outline) > .employee-picker,
  .j-floating-field:has(> .j-floating-outline) > .employee-picker:hover,
  .j-floating-control:has(> .j-floating-outline) > .employee-picker:hover,
  .j-floating-field:has(> .j-floating-outline) > .employee-picker:focus-within,
  .j-floating-control:has(> .j-floating-outline) > .employee-picker:focus-within {
    border-color: transparent;
    box-shadow: none;
  }

  .j-floating-field .j-floating-input,
  .j-floating-control > input:not([type="checkbox"]):not([type="radio"]),
  .j-floating-control > select,
  .j-floating-control > textarea {
    width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
    min-height: var(--ui-control-height);
    margin: 0 !important;
    padding: 0 15px !important;
    border: 1px solid var(--ui-control-border);
    border-radius: var(--ui-control-radius);
    background: #fff;
    color: #263a53;
    font-size: 12px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
  }

  /* Altura EXATA para controles de uma linha. `min-height` sozinho deixava
     inputs herdarem alturas diferentes de botões usados por listas e datas. */
  .j-floating-field .j-floating-input:not(textarea):not([type="file"]),
  .j-floating-control > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  .j-floating-control > select {
    height: var(--ui-control-height);
  }

  /* O valor (a data, a busca) fica no meio da pílula. `font: inherit` da
     grade zera o line-height e o texto sobe, encostando no rótulo.
     A data mora dentro de .date-picker, não é filha direta do rótulo. */
  .j-floating-field > input.j-floating-input:not([type="file"]),
  .j-floating-field .date-picker > input.date-picker-trigger,
  .filter-grid .date-picker > input.date-picker-trigger,
  .j-floating-control > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
    line-height: calc(var(--ui-control-height) - 2px);
  }

  .j-floating-field:hover .j-floating-input:not(:focus),
  .j-floating-control:hover > input:not(:focus),
  .j-floating-control:hover > select:not(:focus),
  .j-floating-control:hover > textarea:not(:focus) {
    border-color: var(--ui-control-border-hover);
  }

  .j-floating-input::placeholder {
    color: transparent !important;
    opacity: 0;
    transition: color .15s ease, opacity .15s ease;
  }

  .j-floating-field:focus-within .j-floating-input::placeholder,
  .j-floating-control:focus-within .j-floating-input::placeholder {
    color: #8a99ad !important;
    opacity: 1;
  }

  .j-floating-field textarea.j-floating-input,
  .j-floating-control > textarea {
    min-height: 82px;
    padding: 14px 15px 10px !important;
    /* Pílula só faz sentido em campo de UMA linha. */
    border-radius: var(--ui-control-radius-tall);
    resize: vertical;
  }

  .j-floating-field input.j-floating-input[type="file"] {
    padding: 7px 10px !important;
  }

  .j-floating-field .j-floating-input:focus,
  .j-floating-control > input:focus,
  .j-floating-control > select:focus,
  .j-floating-control > textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-focus);
  }

  /* Por cima do foco e do hover: a borda visível é só a do contorno.
     `!important` porque o hover deste arquivo e o foco do calendário e da
     lista empatam ou vencem um seletor comum, e repintariam a linha atrás
     do texto. */
  .j-floating-field:has(> .j-floating-outline) .j-floating-input,
  .j-floating-control:has(> .j-floating-outline) > :is(input, select, textarea),
  .j-floating-field:has(> .j-floating-outline) > input.date-picker-trigger,
  .j-floating-control:has(> .j-floating-outline) > input.date-picker-trigger,
  .j-floating-field:has(> .j-floating-outline) > .select-menu-trigger,
  .j-floating-control:has(> .j-floating-outline) > .select-menu-trigger {
    border-color: transparent !important;
    box-shadow: none !important;
  }

  .j-floating-field-paired {
    margin-bottom: 14px;
  }

  .j-floating-field-paired > .j-floating-caption {
    margin: 0;
  }

  .j-floating-field > small.field-help[hidden] {
    display: none !important;
  }

  /* Ajuda que continua VISÍVEL embaixo do campo. São as que têm id, escritas
     pelo app (validação da chave Pix, dica do CPF): addTip() não as converte
     no ícone ⓘ de propósito. Sem indentação elas encostavam na borda esquerda
     do rótulo, enquanto o rótulo começa 13px para dentro — as duas linhas
     saíam desencontradas. */
  .j-floating-field > small.field-help:not([hidden]) {
    display: block;
    margin-top: 6px;
    padding-inline: 13px;
    line-height: 1.4;
  }

  /* ...e é essa ajuda visível que empurrava o rótulo EM REPOUSO para baixo.
     O rótulo em repouso é centrado no controle. Com uma linha de texto embaixo,
     o meio do BLOCO inteiro cai abaixo do meio do controle — na chave
     Pix o "Chave" aparecia encostado na borda de baixo do campo. Aqui o meio é
     medido contra a altura do CONTROLE, que é o que a pessoa enxerga como
     "o campo".

     A fila de `:not()` repete, negada, a condição da regra que sobe o rótulo
     para a borda. Ela é obrigatória, e não zelo: `:has()` vale a especificidade
     do seu argumento mais específico, então esta regra pesa mais do que
     `.j-floating-field:focus-within > .j-floating-caption` e venceria TAMBÉM com
     o campo preenchido — o rótulo ficava preso no meio, escrito por cima do
     valor (visto em "Chave" e "CPF"). Sem as negações, quem tem ajuda visível
     embaixo perde o rótulo flutuante por completo. */
  .j-floating-field:has(> small.field-help:not([hidden])):not(.j-floating-always):not(:focus-within):not(:has(.j-floating-input:not(:placeholder-shown))):not(:has(.j-floating-input:-webkit-autofill)) > .j-floating-caption {
    top: calc(var(--ui-control-height) / 2);
  }

  /* O seletor de pessoa reserva 6px próprios para a legenda antiga, em cima
     da borda. Com o vão do rótulo no invólucro, esses 6px abririam um buraco
     entre o texto e o campo. */
  .j-floating-field > .employee-picker,
  .j-floating-control > .employee-picker {
    margin-top: 0;
  }

  /* VARIANTE CADEADO — campo que está protegido, e por quê.
     Mesma peça da dica comum: o balão, a espera do hover e o clique que fixa
     vêm da delegação em floating-fields.js, que trata qualquer `.j-field-tip`
     com `data-tip`. Só o desenho muda.
     Existe porque um controle que recusa o clique sem explicar é um beco: a
     pessoa tenta, não acontece nada, e não há para onde ir. O cadeado diz que
     a recusa é intencional, e o balão diz como destravar.
     O glifo é máscara SVG, não caractere: o 🔒 da fonte do sistema muda de
     desenho e de alinhamento conforme a plataforma. */
  :root {
    --ui-lock-glyph: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="10.5" width="16" height="11" rx="2.5"/><path d="M8 10.5V7a4 4 0 0 1 8 0v3.5"/></svg>');
  }

  .j-field-tip-lock {
    border-color: #b9c6d8;
    background: #eef2f8;
    color: #4f6480;
    cursor: pointer;
  }

  .j-field-tip-lock::before {
    content: "";
    width: 9px;
    height: 9px;
    background: currentColor;
    -webkit-mask: var(--ui-lock-glyph) center / contain no-repeat;
    mask: var(--ui-lock-glyph) center / contain no-repeat;
  }

  .j-field-tip-lock:hover,
  .j-field-tip-lock.is-open {
    border-color: #94a8c4;
    color: #2c4360;
  }

  .j-field-tip {
    position: relative;
    display: inline-grid;
    flex: none;
    width: 15px;
    height: 15px;
    place-items: center;
    border: 1px solid #a8bbd3;
    border-radius: 50%;
    background: #fff;
    color: #56708f;
    font-size: 9px;
    font-style: normal;
    font-weight: 850;
    line-height: 1;
    cursor: help;
  }

  /* `display:none` enquanto fechada, e não só `opacity:0`.
     Elemento absoluto com opacidade zero CONTINUA no layout e continua criando
     área rolável: com a dica perto da borda direita, seus ~270px geravam uma
     barra de rolagem horizontal no diálogo (128px de excesso), visível como uma
     barra cinza no rodapé do card. Como a barra ocupa 15px de altura, ela ainda
     desigualava a altura das abas.
     `position:fixed` foi tentado para tirar a caixa do fluxo de vez e não
     serve: o <dialog> tem `translate` (ui-motion.css), e isso o torna o bloco
     contentor até de filhos fixos — a caixa voltava a alongar a área rolável, e
     ainda por cima com as coordenadas medidas contra a janela errada.
     `allow-discrete` + `@starting-style` preservam o fade onde há suporte; onde
     não há, a dica só aparece direto. */
  .j-field-tip::after {
    content: attr(data-tip);
    display: none;
    position: absolute;
    /* 45: acima do conteúdo de formulário (o maior é 40, do seletor de
       pessoa) e abaixo da .topbar (50), para não pintar sobre o painel de
       avisos. Dentro de diálogo o valor é indiferente: a top layer do
       navegador já fica acima de tudo. Ver test-camada-topbar-20260821. */
    z-index: 45;
    /* ACIMA do ícone, pelo mesmo motivo das outras duas: a dica só abre depois
       de o ponteiro parar em cima, então embaixo ela nasce debaixo do cursor.
       Sem espaço acima (campo no topo do diálogo), floating-fields.js marca
       `j-tip-abaixo` e ela desce. */
    bottom: calc(100% + 8px);
    top: auto;
    left: -8px;
    right: auto;
    width: min(270px, 72vw);
    padding: 9px 11px;
    border: 1px solid #d9e3ef;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(18, 39, 68, .16);
    color: #42566f;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.45;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity .14s ease, transform .14s ease, display .14s allow-discrete;
  }

  .j-field-tip.j-tip-abaixo::after {
    top: calc(100% + 8px);
    bottom: auto;
    transform: translateY(-3px);
  }

  /* Sem espaço à direita, a dica abre para a ESQUERDA. O lado é decidido em
     floating-fields.js no momento da abertura, medindo contra a caixa que
     recorta (o diálogo, não a janela). Antes ela abria sempre para a direita e,
     perto da borda, fazia surgir uma barra de rolagem horizontal no exato
     instante em que aparecia. */
  .j-field-tip.j-tip-left::after {
    left: auto;
    right: -8px;
  }

  /* Só `is-open`. O `:hover` puro abria a caixa no instante em que o ponteiro
     tocava o ícone de 15px, e ela piscava a cada passagem de mouse rumo a
     outro campo. Quem decide agora é floating-fields.js, que espera a intenção
     do ponteiro — o CSS continua dono da aparência e do fade. */
  .j-field-tip.is-open::after {
    display: block;
    opacity: 1;
    transform: translateY(0);
  }

  @starting-style {
    .j-field-tip.is-open::after {
      opacity: 0;
      transform: translateY(3px);
    }

    .j-field-tip.j-tip-abaixo.is-open::after {
      opacity: 0;
      transform: translateY(-3px);
    }
  }

  /* A grade padrão alinha pelo fim da célula. A margem extra do invólucro
     empurraria o campo para baixo da busca, que não tem rótulo. O vão do
     texto é padding e continua valendo. */
  .people-filters > .j-floating-control,
  .document-management-toolbar > .j-floating-control,
  .signature-center-toolbar > .j-floating-control,
  .filtro-padrao > .j-floating-control,
  .filtro-padrao > .j-floating-field,
  .pay-bar .j-floating-control,
  .pay-toolbar .j-floating-control {
    margin-top: 0;
  }

  @media (max-width: 720px) {
    .j-floating-caption {
      font-size: 11px;
    }

    .j-floating-field:focus-within > .j-floating-caption,
    .j-floating-field:has(.j-floating-input:not(:placeholder-shown)) > .j-floating-caption,
    .j-floating-control:focus-within > .j-floating-caption,
    .j-floating-control:has(.j-floating-input:not(:placeholder-shown)) > .j-floating-caption,
    .j-floating-always > .j-floating-caption {
      font-size: 9px;
    }
  }
}
@media screen {
  /* Dica de LINHA: a mesma caixa das outras, sem o icone.
     O elemento continua sendo o ancoradouro do balao (o ::after e filho dele),
     entao ele nao pode sumir — vira uma camada transparente do tamanho da
     linha. `pointer-events:none` e proposital: quem recebe o ponteiro e o
     controle embaixo, e quem dispara a dica e o [data-tip-row] em volta (ver
     floating-fields.js). Sem isso a camada engoliria o clique no toggle. */
  .j-field-tip.j-tip-row {
    position: absolute;
    inset: 0;
    display: block;
    width: auto;
    height: auto;
    border: 0;
    border-radius: inherit;
    background: none;
    cursor: default;
    pointer-events: none;
  }
  [data-tip-row] { position: relative; }

  /* O balao da dica de linha sobe, em vez de descer.
     Com o ancoradouro do tamanho da linha inteira, abrir para baixo (o padrao
     do icone) cobre o que vem logo depois — no bloco de dois toggles, a dica de
     "Contato padrao" tapava a linha "Ativo", que e justamente um controle.
     Subindo, ela sai por cima de texto ja lido, e o movimento acompanha a
     leitura: nasce 3px abaixo e assenta. */
  .j-field-tip.j-tip-row::after {
    top: auto;
    bottom: calc(100% + 8px);
    transform: translateY(3px);
  }

  @starting-style {
    .j-field-tip.j-tip-row.is-open::after {
      opacity: 0;
      transform: translateY(3px);
    }
  }
}