/* =====================================================================
 *  K-RH 7.0 - CAMADA VISUAL
 *
 *  Carregado DEPOIS de krigs-tokens.css, krigs-componentes.css e app.css.
 *  Aqui mora a modernizacao das telas de dado denso: lista, tabela, ficha,
 *  indicador, selo e estado vazio. Nada disto altera os dois arquivos
 *  oficiais da plataforma (tokens e componentes), que sao ativos
 *  compartilhados com o KFROTA e o KEPI e estao em producao - o que este
 *  arquivo faz e SOBREPOR.
 *
 *  COR: nenhum hexadecimal aqui. Todo valor de cor sai de var(--...). O que
 *  faltava esta no bloco proprio do K-RH, no fim de krigs-tokens.css, com as
 *  duas versoes (claro e escuro).
 *
 *  ---------------------------------------------------------------------
 *  DE ONDE VEM CADA NUMERO (pesquisa, nao gosto pessoal)
 *
 *  . Altura de linha 48px.
 *      IBM Carbon, Data table / Style: xs 24, sm 32, md 40, lg 48, xl 64.
 *      Material Components Web, _data-table-theme.scss: $row-height 52px,
 *      $header-row-height 56px, $minimum-row-height 36px.
 *      A faixa confortavel de produto serio e 44–52. 48 e o meio dela e o
 *      unico valor que tambem e multiplo do modulo de 8. O K-RH vinha com
 *      23px medidos - abaixo do MINIMO absoluto do Material.
 *
 *  . Padding de celula 12px vertical / 14px lateral.
 *      MDC usa 16px lateral ($cell-leading/trailing-padding); Ant Design usa
 *      o token `padding` (16). 14 aqui porque o K-RH tem tabela de nove
 *      colunas (SST) e 16 empurraria coluna para fora da tela.
 *
 *  . Modulo de espacamento 8 (4 para ajuste fino).
 *      Atlassian Design System, Spacing: "base unit of 8 pixels",
 *      space.100 = 8px, escala 2/4/6/8/12/16/20/24/32/40/48/64/80.
 *      Todo espaco deste arquivo esta nessa escala.
 *
 *  . Cabecalho que gruda, fio leve, zebra e realce sob o cursor.
 *      NN/g, "Data Tables: Four Major User Tasks" (2022): "Freeze header
 *      rows and header columns (if the table is larger than the screen).
 *      Borders, zebra striping, and hover-triggered highlighting of a record
 *      can all help [users] keep their place". Zebra so na tabela larga
 *      (>= 7 colunas): em tabela curta ela vira ruido.
 *
 *  . Primeira coluna e a identidade do registro, e nao mais um link azul.
 *      NN/g, mesmo artigo: "The (default) first column should be a
 *      human-readable record identifier instead of a 'mystery meat'
 *      automatically generated ID".
 *      GitHub Primer, DataTable: a coluna de identidade e declarada
 *      `rowHeader: true` - ou seja, e <th scope="row">, nao <td>.
 *
 *  . Numero e data a direita, com digito de largura fixa.
 *      Primer, Table.Cell: `align: 'end' | 'start'`. O digito tabular
 *      (font-variant-numeric) alinha a unidade embaixo da unidade - sem ele
 *      nao se compara coluna de valor de olho.
 *
 *  . Titulo + contagem + acao acima da tabela.
 *      Primer, Table.Container: Table.Title, Table.Subtitle e Table.Actions
 *      formam a barra da lista. Carbon chama de "table toolbar".
 *
 *  . Densidade e decisao declarada, nao acidente.
 *      Primer: cellPadding condensed | normal | spacious. Carbon: cinco
 *      alturas. Aqui: `normal` (48) e `.densa` (40), e nada mais.
 *
 *  . Alvo de toque.
 *      WCAG 2.2, SC 2.5.8 Target Size (Minimum), nivel AA: "at least 24 by
 *      24 CSS pixels". SC 2.5.5 (AAA) pede 44. No celular, onde o dedo e o
 *      ponteiro, a linha e a acao vao a 44; no desktop o botao de dentro da
 *      linha fica em 30, acima do minimo AA, para a linha caber em 48.
 * ===================================================================== */

:root{
  /* Medida, nao cor: pode morar aqui. */
  --krh-linha-h:      48px;   /* altura minima da linha de dado            */
  --krh-linha-h-densa:40px;   /* lista de conferencia, muitas colunas      */
  --krh-linha-h-toque:52px;   /* celular: dedo, nao ponteiro               */
  --krh-cab-h:        44px;   /* altura do cabecalho da tabela             */
  --krh-cel-x:        14px;   /* padding lateral da celula                 */
  --krh-cel-y:        12px;   /* padding vertical da celula                */
  --krh-rolo-max:     min(66vh, 720px);  /* altura da area rolavel da lista */
}


/* =====================================================================
 *  1. LARGURA DA PAGINA
 *
 *  O componente oficial fixa .conteudo em 1100px, que e a largura certa
 *  para COLUNA DE LEITURA. Tela de lista nao e coluna de leitura: numa tela
 *  de 1440 sobrava faixa vazia a direita enquanto a tabela de nove colunas
 *  sufocava. Aqui a pagina vai a 1360 e o FORMULARIO e que fica preso em
 *  900 - a leitura continua com a largura certa, o dado e que ganha o
 *  espaco que ja existia.
 * ===================================================================== */
.conteudo{ max-width:1360px; padding:24px 28px }

/* DEFEITO ENCONTRADO (existia antes desta camada): .conteudo e item de grid,
 * e item de grid tem min-width:auto. Isso quer dizer que a coluna do grid
 * nao pode ficar menor que o conteudo mais teimoso dentro dela - bastava uma
 * tabela ou um bloco largo para a PAGINA INTEIRA ficar mais larga que o
 * telefone: a barra superior saia da tela e o dedo arrastava tudo de lado.
 * Medido em 390px: Ferias abria com 477px de largura de leiaute.
 * min-width:0 devolve a coluna ao tamanho da tela; o que nao couber rola
 * dentro da propria area de conteudo, sem levar a moldura junto. */
.conteudo,.topbar{ min-width:0 }
.card .form-grid{ max-width:920px }

/* Espaco entre blocos no modulo de 8. */
.card{ margin-bottom:16px; padding:20px }
/* UMA CAIXA SÓ, DO MESMO TAMANHO EM TODA TELA. Ordem do dono (25/09/2026):
 * "padroniza o tamanho das caixas mesmo que a mensagem seja diferente".
 * Com auto-fit, as colunas vazias sumiam e as caixas esticavam para
 * ocupar a linha: 176px no Painel, 270 na Pré-admissão, 363 em Férias e
 * 1114 no Recrutamento. Com auto-fill a coluna vazia continua existindo, e
 * a caixa fica com a mesma largura em todas as telas. A altura mínima
 * (seção 6) cabe rótulo de duas linhas, e por isso não muda de uma fila
 * para outra. */
.cards{ gap:12px; grid-template-columns:repeat(auto-fill,minmax(172px,1fr)); margin-bottom:16px }
.card .cab{ gap:12px; flex-wrap:wrap }


/* =====================================================================
 *  2. TIPOGRAFIA
 *
 *  Escala fechada, razao ~1,2:  11 · 12,5 · 14 · 15 · 17 · 20 · 28.
 *  Dado denso em 14 (o corpo continua em 15): 14 cabe mais coluna sem
 *  perder legibilidade, e e o tamanho que Primer, Carbon e Geist usam em
 *  tabela. Peso: 400 no dado, 600 na identidade e no rotulo, 700 no titulo.
 * ===================================================================== */
h2{ font-size:20px; letter-spacing:-.2px }
h3{ font-size:15px; letter-spacing:-.1px }
.sub{ font-size:13.5px; color:var(--cinza); line-height:1.5 }
/* .sub e usada tanto como legenda de bloco quanto dentro de indicador e de
 * celula. A margem de 20px do arquivo oficial so faz sentido no primeiro
 * caso - dentro de qualquer outra coisa ela abre um buraco. */
.stat .sub,.card .cab .sub,td .sub,.k-pessoa .sub{ margin:0 }

/* Rotulo: caixa alta pequena, so onde e rotulo mesmo. */
.dados dt{ font-size:11px; letter-spacing:.5px; color:var(--cinza) }
.dados dd{ font-size:14px; font-weight:500 }

/* Dica em linha, para o dado de apoio dentro da celula. */
.dica{ font-size:12.5px; color:var(--cinza) }
/* A mesma dica, na linha de baixo. Serve para o motivo de uma acao estar
 * bloqueada: motivo que so vive no `title` do botao nao existe no celular,
 * e a pessoa clica, nada acontece, e ela conclui que o sistema quebrou. */
.dica.propria-linha{ display:block; margin-top:3px }

/* Nome de arquivo e e-mail nao tem espaco para quebrar. Sem isto, um
 * "importarcolaboradorinserir.xlsx" no meio de um paragrafo empurra a
 * coluna inteira e faz a tela do celular andar de lado. */
.card p,.card .sub,.dados dd,.vazio p{ overflow-wrap:anywhere }


/* =====================================================================
 *  3. FOCO E LINK
 *
 *  O anel oficial e --azul-claro sobre branco: 1,2:1, invisivel para quem
 *  navega por teclado. Aqui e --krh-foco (5,6:1 no claro, 8,9:1 no escuro).
 * ===================================================================== */
:focus-visible{ outline:2px solid var(--krh-foco); outline-offset:2px; border-radius:4px }
.btn:focus-visible,.aba:focus-visible,.stat:focus-visible{ outline-offset:3px }


/* =====================================================================
 *  4. A TABELA
 * ===================================================================== */

/* A moldura da tabela: uma borda so, no contorno; dentro, fio leve.
 * `border-collapse:separate` e proposital - com `collapse` o navegador
 * DESCARTA a borda do <th> quando ele gruda no topo, e o cabecalho flutua
 * sem base. O fio do cabecalho e desenhado por box-shadow interno. */
.tabela-wrap{
  border:1px solid var(--linha); border-radius:var(--raio);
  background:var(--branco); overflow:auto;
}
table.dados{
  width:100%; border-collapse:separate; border-spacing:0;
  font-size:14px; line-height:1.45; color:var(--texto);
}

/* --- cabecalho que gruda ------------------------------------------------
 * Regra NN/g: rolou trinta linhas, a pessoa ainda precisa saber que coluna
 * esta lendo. Gruda dentro da area rolavel da propria lista. */
table.dados thead th{
  position:sticky; top:0; z-index:2;
  height:var(--krh-cab-h);
  padding:0 var(--krh-cel-x);
  background:var(--krh-superficie-2); color:var(--cinza);
  font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.5px;
  text-align:left; vertical-align:middle;
  border:0; box-shadow:inset 0 -1px 0 var(--linha);
}
/* O titulo da coluna PODE quebrar em duas linhas. Proibir a quebra parece
 * mais arrumado e nao e: numa tabela de oito colunas, um titulo longo em
 * linha unica ("Concessivo termina") rouba a largura da coluna do nome, e o
 * nome da pessoa e que passa a quebrar em tres linhas. A altura declarada
 * vale como minimo - o cabecalho cresce se precisar. */
table.dados thead th{ white-space:normal }
.tabela-wrap.rolou table.dados thead th{ box-shadow:inset 0 -1px 0 var(--linha), var(--krh-sombra-fixa) }

/* --- linha e celula ---------------------------------------------------- */
table.dados tbody tr{ height:var(--krh-linha-h) }
table.dados tbody td,table.dados tbody th{
  padding:var(--krh-cel-y) var(--krh-cel-x);
  border:0; border-bottom:1px solid var(--krh-linha-suave);
  vertical-align:middle; text-align:left; font-weight:400;
}
table.dados tbody tr:last-child td,table.dados tbody tr:last-child th{ border-bottom:0 }
table.dados.densa tbody tr{ height:var(--krh-linha-h-densa) }
table.dados.densa tbody td{ padding:8px var(--krh-cel-x) }

/* Zebra so na tabela larga (>= 7 colunas), onde o olho perde a linha.
 * `.larga` vem do nucleo, que sabe quantas colunas existem; `.k-par` e
 * recalculada a cada busca e a cada pagina. Com :nth-child a faixa contaria
 * a linha escondida pelo filtro e sairia trocada logo na primeira busca. */
table.dados.larga tbody tr.k-par td{ background:var(--krh-faixa) }

/* Linha fora do filtro ou fora da pagina. Precisa de !important porque no
 * celular a mesma linha e `display:block` (tabela virada em cartao), e essa
 * regra venceria o [hidden] do navegador. */
table.dados tbody tr.k-oculta{ display:none !important }

/* Linha avulsa: nao e dado, e o recado de "nada encontrado". */
table.dados tbody tr[data-k-avulsa] td{ padding:0; background:transparent }
table.dados tbody tr[data-k-avulsa]:hover td{ background:transparent }

/* Realce sob o cursor vence a zebra. */
table.dados tbody tr:hover td,table.dados tbody tr:hover th{ background:var(--krh-hover) }
tr.clicavel{ cursor:pointer }
tr.clicavel:hover td{ background:var(--krh-realce-fundo) }
tr.clicavel:focus-within td{ background:var(--krh-realce-fundo) }

/* Linha de total: continua sendo o unico lugar com peso 800. */
tr.linha-total td{ background:var(--krh-total-fundo); font-weight:800 }

/* --- alinhamento por tipo de dado --------------------------------------
 * Texto a esquerda; numero, dinheiro e data a direita, com digito de
 * largura fixa. Sem tabular-nums a coluna de valor nao se compara de olho. */
table.dados .num,table.dados td.num,table.dados th.num{
  text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;
}
table.dados .col-data,table.dados th.col-data{
  text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;
}
table.dados .col-cod,table.dados th.col-cod{
  text-align:left; font-variant-numeric:tabular-nums; white-space:nowrap;
}
table.dados .col-desc{ text-align:left; min-width:180px }
/* Coluna de acao: encostada na direita e sem quebra. */
table.dados .acoes-col,table.dados th.acoes-col{ text-align:right; white-space:nowrap; width:1% }

/* --- hierarquia dentro da linha ----------------------------------------
 * A queixa do dono, na letra: "tudo e link azul". Numa lista de sessenta
 * pessoas, sessenta links azuis do mesmo peso fazem o nome da pessoa
 * competir com o municipio. A identidade do registro vira TEXTO - forte,
 * na cor do texto - e o azul fica reservado para a acao secundaria.
 * O link nao deixa de ser link: ele sublinha ao passar o cursor, tem anel
 * de foco proprio e a linha inteira responde ao cursor. */
/* O <th scope="row"> e o certo em acessibilidade: diz ao leitor de tela qual
 * celula NOMEIA a linha. So que a regra oficial `table.dados th` pinta TODO
 * th com fundo claro literal (#f7f9fc) e caixa alta de 12px, pensando no
 * cabecalho. No corpo isso deu duas coisas ruins de uma vez: o nome da
 * pessoa em CAIXA ALTA, e - no tema escuro - texto claro sobre aquele fundo
 * claro que nao inverte. Deu 1,06 de contraste: o nome da pessoa
 * praticamente invisivel, na coluna mais importante da tela.
 *
 * Aqui o th do CORPO volta a parecer celula comum, com o peso da
 * identidade. O papel semantico fica; a aparencia de cabecalho sai. */
table.dados tbody th[scope="row"]{
  background:transparent; text-transform:none; letter-spacing:0;
  font-size:inherit; vertical-align:middle;
}
table.dados tbody td:first-child,table.dados tbody th[scope="row"]{
  font-weight:600; color:var(--texto);
}
table.dados tbody td:first-child a,table.dados tbody th[scope="row"] a,
table.dados a.k-nome{
  color:var(--texto); font-weight:600; text-decoration:none;
}
table.dados tbody td:first-child a:hover,table.dados tbody th[scope="row"] a:hover,
table.dados a.k-nome:hover{
  color:var(--azul-2); text-decoration:underline; text-underline-offset:3px;
}
table.dados a{ font-weight:500 }

/* Celula de identidade: nome forte em cima, dado secundario abaixo. E o que
 * a ficha de Ferias ja fazia a mao e agora e componente (K.pessoa). */
.k-pessoa{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.k-pessoa .k-nome{ font-size:14px; font-weight:600; color:var(--texto); line-height:1.3 }
/* O apoio vale em QUALQUER celula, e nao so dentro de `.k-pessoa`. Fora
   dela o span herdava `inline` e o dado secundario grudava no nome: na
   esteira de documentos saia "Ficha de Registro de Empregadoficha_registro",
   que e uma palavra que nao existe. */
.k-apoio{
  font-size:12.5px; font-weight:400; color:var(--cinza); line-height:1.3;
  display:flex; gap:8px; flex-wrap:wrap; align-items:baseline;
}
/* --cinza-2 e o token de auxiliar e desabilitado, e da 3,15 sobre fundo
 * claro: reprova no AA. O ponto separador e pequeno e fica entre dois
 * dados que a pessoa precisa ler juntos, entao ele passa a --cinza, que
 * da 6,0 no claro e 6,45 no escuro. */
.k-apoio .k-sep{ color:var(--cinza) }
.k-apoio .k-mono{ font-variant-numeric:tabular-nums }

/* Botao dentro da linha: compacto, para a linha caber em 48px. 30px de
 * altura passa o minimo de 24x24 da WCAG 2.2 SC 2.5.8 com folga; no
 * celular a linha vira cartao e o botao volta ao tamanho cheio. */
table.dados .btn{ padding:7px 11px; font-size:12.5px; border-radius:6px }
table.dados .acoes-col .btn+.btn{ margin-left:6px }

/* Area rolavel: a lista longa rola dentro dela mesma, e e isso que faz o
 * cabecalho grudar. O nucleo so aplica .rolo acima de 12 linhas - tabela
 * curta continua no fluxo da pagina, sem segunda barra de rolagem. */
.tabela-wrap.rolo{ max-height:var(--krh-rolo-max) }


/* =====================================================================
 *  5. A BARRA DA LISTA  (K.toolbar / K.lista)
 *
 *  Titulo, contagem, busca e acao primaria - nesta ordem, sempre no mesmo
 *  lugar (Primer Table.Title/Actions; Carbon table toolbar).
 * ===================================================================== */
.k-bar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-bottom:12px; min-height:40px;
}
.k-bar .k-tit{ font-size:15px; font-weight:700; margin:0; letter-spacing:-.1px }
.k-bar .k-dir{ margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap }

/* Contagem: o primeiro dado que a pessoa procura numa lista e "quantos". */
.k-cont{
  display:inline-flex; align-items:center; height:24px; padding:0 9px;
  border:1px solid var(--linha); border-radius:var(--raio-pill);
  background:var(--krh-superficie-2); color:var(--cinza);
  font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap;
}
/* A letra sai de --krh-realce-texto, e nao de --azul-2: o par fundo/letra
 * tem de inverter junto. Com --azul-2 fixo, o tema escuro punha azul
 * escuro sobre azul escuro (2,66:1) e o aviso "mostrando 500 de 501"
 * ficava ilegivel justamente para quem enxerga pouco. */
.k-cont.filtrando{ background:var(--krh-realce-fundo); border-color:var(--krh-realce-linha); color:var(--krh-realce-texto) }

/* Busca dentro da propria lista. */
.k-busca{ position:relative; display:inline-flex; align-items:center; min-width:220px }
.k-busca .ico-svg{ position:absolute; left:10px; color:var(--cinza-2); pointer-events:none }
.k-busca input{
  width:100%; height:38px; padding:0 32px 0 34px;
  border:1px solid var(--krh-borda-campo); border-radius:var(--raio-sm);
  background:var(--branco); color:var(--texto);
  font-family:inherit; font-size:14px;
}
.k-busca input::placeholder{ color:var(--cinza-2) }
.k-busca input:focus{ outline:0; border-color:var(--azul-2); box-shadow:0 0 0 3px var(--krh-realce-fundo) }
.k-busca .k-limpar{
  position:absolute; right:4px; width:28px; height:28px; border:0; background:none;
  color:var(--cinza); border-radius:6px; cursor:pointer; display:none;
  align-items:center; justify-content:center;
}
.k-busca.com-texto .k-limpar{ display:inline-flex }
.k-busca .k-limpar:hover{ background:var(--krh-superficie-2); color:var(--texto) }

/* ---------------------------------------------------------------------
 *  Seletor com busca. Mesmas classes do KFROTA (ADR-021): a decisao de
 *  lista longa se achar digitando e da plataforma, e nao de um produto.
 *
 *  O <select> continua no DOM, e continua sendo a verdade. Ele sai da
 *  vista PELA POSICAO, e nunca com `display:none`, que o tiraria do
 *  formulario e levaria junto o valor que a tela le.
 * ------------------------------------------------------------------- */
.selb{ position:relative; display:block; min-width:0; width:100% }
select.selb-nativo{
  position:absolute !important; left:0; bottom:0; width:1px; height:1px;
  padding:0; margin:0; border:0; opacity:0; pointer-events:none;
}
.selb-input{
  width:100%; height:38px; padding:0 34px 0 12px;
  border:1px solid var(--krh-borda-campo); border-radius:var(--raio-sm);
  background:var(--branco); color:var(--texto);
  font-family:inherit; font-size:14px; cursor:pointer;
  text-overflow:ellipsis;
}
.selb-input:focus{ outline:0; border-color:var(--azul-2); box-shadow:0 0 0 3px var(--krh-realce-fundo); cursor:text }
/* A area de toque tem 40px de altura, e nao o tamanho do desenho da seta:
   o icone continua pequeno, o alvo do dedo nao. E o piso que a conferencia
   de tela cobra, e o motivo dela cobrar e obra, com a mao suja. */
.selb-seta{
  position:absolute; top:50%; right:2px; transform:translateY(-50%);
  width:34px; height:40px; border:0; border-radius:6px; background:none;
  color:var(--cinza); cursor:pointer; display:grid; place-items:center;
  transition:transform .15s;
}
.selb-seta:hover{ background:var(--krh-superficie-2); color:var(--texto) }
.selb.aberto .selb-seta{ transform:translateY(-50%) rotate(180deg) }
/* Campo de texto que sugere: a lista precisa de um pai posicionado, e o
   pai dele e a caixa de busca que a barra da lista ja monta. */
.selb-ancora{ position:relative }
/* A lista pode passar da largura do campo: nome de funcao inteiro cabe
   ("Ajudante de montagem industrial" nao vira "Ajudante de mo..."), sem
   obrigar a barra de ferramentas a ficar larga. */
.selb-drop{
  position:absolute; z-index:60; left:0; top:calc(100% + 4px);
  min-width:100%; width:max-content; max-width:min(520px, 90vw);
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio);
  box-shadow:var(--sombra-lg); max-height:min(320px, 50svh); overflow-y:auto; padding:4px;
}
.selb-item{
  padding:9px 10px; border-radius:var(--raio-sm); cursor:pointer;
  font-size:14px; color:var(--texto);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.selb-item:hover, .selb-item.on{ background:var(--krh-realce-fundo) }
.selb-item.atual{ font-weight:700 }
.selb-msg{ padding:12px 10px; color:var(--cinza); font-size:13px; text-align:center }
.selb.desligado .selb-input{ background:var(--krh-superficie-2); color:var(--cinza); cursor:not-allowed }
/* Numa barra de ferramentas o seletor divide o espaco com os outros
   campos, em vez de esticar a linha inteira. */
.k-bar .selb{ display:inline-block; width:auto; min-width:180px }
/* O filtro curto (até 8 opções) continua um <select> comum, e fora de
 * `.campo` ele saía com o desenho cru do navegador (Colaboradores,
 * Ocorrências, Relatórios, Cargos, SST). Mesma caixa da busca ao lado. */
.k-bar select:not(.selb-nativo){
  height:38px; padding:0 10px;
  border:1px solid var(--krh-borda-campo); border-radius:var(--raio-sm);
  background:var(--branco); color:var(--texto);
  font-family:inherit; font-size:14px;
}

/* ---------------------------------------------------------------------
 *  MONTAGEM DO BOOK: duas colunas, e a ordem do clique
 *
 *  A esquerda e o acervo, a direita e o book. O numero aparece dos DOIS
 *  lados: assim que um item e marcado, ele ganha a posicao na propria
 *  linha, e o RH ve a ordem sem olhar para o outro lado.
 * ------------------------------------------------------------------- */
.bk-duas{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start }
.bk-lado{ min-width:0 }
.bk-grupo{ margin-top:14px }
.bk-grupo h4{ font-size:12px; text-transform:uppercase; letter-spacing:.5px;
              color:var(--cinza); margin:0 0 6px }
.bk-item{
  display:flex; align-items:center; gap:10px; padding:9px 8px; min-height:44px;
  border-bottom:1px solid var(--krh-linha-suave); cursor:pointer; border-radius:var(--raio-sm);
}
.bk-item:hover{ background:var(--krh-hover) }
.bk-item input{ width:20px; height:20px; margin:0; accent-color:var(--azul-2); flex:none }
.bk-num{ min-width:22px; font-weight:800; color:var(--azul-2); font-variant-numeric:tabular-nums }
.bk-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; font-size:14px }
.bk-txt .dica{ font-size:12px }
.bk-val{ flex:none }
.bk-item.sem-arquivo .bk-txt b{ color:var(--cinza) }
.bk-linha{
  display:flex; align-items:center; gap:10px; padding:9px 8px; min-height:44px;
  border-bottom:1px solid var(--krh-linha-suave); font-size:14px;
}
.bk-linha b{ min-width:26px; color:var(--azul-2); font-variant-numeric:tabular-nums }
.bk-linha span{ flex:1; min-width:0 }
@media(max-width:900px){ .bk-duas{ grid-template-columns:1fr } }

/* =====================================================================
 *  A ESTEIRA DO RH
 *
 *  A regua fica GRUDADA no alto: ela e a resposta permanente para "em que
 *  passo eu estou e o que ainda falta", e o dono pediu para poder ir "no
 *  pulado em cima" a qualquer momento. Regua que rola para fora da tela
 *  nao serve para isso.
 *
 *  O estado de cada passo aparece em PALAVRA, e nao so em cor: cor sozinha
 *  some no monitor com sol da obra e reprova em acessibilidade.
 * ===================================================================== */
.es-regua{
  position:sticky; top:0; z-index:5; background:var(--bg);
  padding:6px 0 10px; margin-bottom:12px; border-bottom:1px solid var(--linha);
}
.es-blocos{ display:flex; gap:8px; flex-wrap:wrap }
.es-bloco{
  flex:1 1 180px; text-align:left; padding:10px 12px; min-height:52px; cursor:pointer;
  border:1px solid var(--linha); border-radius:var(--raio); background:var(--branco);
  font-family:inherit; color:var(--texto);
}
.es-bloco b{ display:block; font-size:13.5px; font-weight:700 }
.es-bloco span{ font-size:12px; color:var(--cinza) }
.es-bloco:hover{ border-color:var(--azul-2) }
.es-bloco.on{ border-color:var(--azul-2); background:var(--krh-realce-fundo) }
.es-bloco.feito b{ color:var(--verde) }

.es-passos{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px }
.es-passo{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:8px 12px; min-height:40px; border:1px solid var(--linha);
  border-radius:var(--raio-pill); background:var(--branco); color:var(--texto);
  font-family:inherit; font-size:13px;
}
.es-passo i{ width:9px; height:9px; border-radius:50%; background:var(--cinza-2); flex:none }
.es-passo em{ font-style:normal; font-size:11.5px; color:var(--cinza) }
.es-passo:hover{ border-color:var(--azul-2) }
.es-passo.pronto i{ background:var(--verde) }
.es-passo.não-se-aplica i{ background:var(--cinza) }
.es-passo.agora{ border-color:var(--azul-2); background:var(--krh-realce-fundo); font-weight:700 }
.es-passo.agora i{ background:var(--azul-2) }

.es-onde{ font-size:11.5px; letter-spacing:.5px; text-transform:uppercase; color:var(--cinza); margin:0 0 4px }
.es-titulo{ font-size:22px; letter-spacing:-.2px; margin:0 0 10px }
.es-rodape{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:18px }
.es-rodape .k-dir{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap }

/* "Ver tudo": a lista dos dezoito passos, para conferir de uma olhada. */
.es-linha{
  display:flex; align-items:center; gap:12px; width:100%; cursor:pointer;
  padding:12px 8px; min-height:48px; border:0; border-bottom:1px solid var(--krh-linha-suave);
  background:none; font-family:inherit; font-size:14px; color:var(--texto); text-align:left;
}
.es-linha:hover{ background:var(--krh-hover) }
.es-linha-nome{ flex:1; min-width:0 }
.es-linha.feito .es-linha-nome{ color:var(--cinza) }

@media(max-width:640px){
  .es-bloco{ flex:1 1 100% }
  .es-rodape .k-dir{ margin-left:0; width:100% }
}

/* ---------------------------------------------------------------------
 *  Marcar documento na esteira, para mandar tudo num link so.
 *
 *  A caixa e grande e o alvo do dedo e a linha inteira do rotulo: quem
 *  marca vinte e seis documentos com o dedo nao acerta caixa de 14px.
 * ------------------------------------------------------------------- */
th.col-marca, td.col-marca{ width:44px; text-align:center; padding-right:0 }
.k-marca-doc{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; margin:-9px 0; cursor:pointer; border-radius:var(--raio-sm);
}
.k-marca-doc:hover{ background:var(--krh-hover) }
.k-marca-doc input{ width:20px; height:20px; margin:0; accent-color:var(--azul-2); cursor:pointer }
.k-marca-vazia{ display:inline-block; width:20px; height:20px }
/* Rotulo que so o leitor de tela le: a caixa precisa dizer o que marca. */
.sr-so{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------------------------------------------------------------------
 *  Cadastrar do lugar onde o cadastro faltou.
 *
 *  Fica no rotulo do campo, discreto, e some do caminho de quem nao
 *  precisa dele. O `padding` grande com `margin` negativa e o que da 40px
 *  de alvo para o dedo sem esticar a linha do rotulo: area de toque nao
 *  precisa ter o tamanho do desenho.
 * ------------------------------------------------------------------- */
.k-cadastrar{
  margin:-9px 0 -9px 8px; padding:10px 6px; border:0; background:none;
  color:var(--azul-2); font-family:inherit; font-size:12.5px; font-weight:700;
  cursor:pointer; border-radius:var(--raio-sm);
  display:inline-flex; align-items:center; gap:4px; vertical-align:middle;
}
.k-cadastrar:hover{ background:var(--krh-realce-fundo) }

/* Ordenacao por coluna: o cabecalho vira botao. */
table.dados th.k-ord{ cursor:pointer; user-select:none }
table.dados th.k-ord:hover{ color:var(--texto); background:var(--krh-hover) }
table.dados th.k-ord .k-seta{ opacity:0; margin-left:6px; font-size:10px; vertical-align:1px }
table.dados th.k-ord:hover .k-seta{ opacity:.45 }
table.dados th[aria-sort]{ color:var(--azul-2) }
table.dados th[aria-sort] .k-seta{ opacity:1 }

/* Paginacao. Sessenta linhas hoje, seis mil ano que vem. */
.k-pag{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:10px 2px 0; font-size:13px; color:var(--cinza);
}
.k-pag .k-faixa{ font-variant-numeric:tabular-nums }
.k-pag .k-passos{ margin-left:auto; display:flex; gap:6px }
.k-pag button{
  min-width:34px; height:34px; padding:0 10px;
  border:1px solid var(--linha); border-radius:var(--raio-sm);
  background:var(--branco); color:var(--texto);
  font:600 13px/1 var(--fonte); cursor:pointer;
}
.k-pag button:hover:not([disabled]){ background:var(--krh-hover); border-color:var(--krh-borda-campo) }
.k-pag button[disabled]{ opacity:.45; cursor:not-allowed }
.k-pag button[aria-current="true"]{ background:var(--azul-2); border-color:var(--azul-2); color:var(--branco) }
:root[data-theme="dark"] .k-pag button[aria-current="true"]{ color:var(--bg) }


/* =====================================================================
 *  6. INDICADOR (K.stat)
 *
 *  Rotulo e numero de um lado, icone do outro, em cinza: o icone e apoio,
 *  nao protagonista. Numero em digito tabular para a fila de indicadores
 *  ficar alinhada entre si.
 * ===================================================================== */
/* O indicador virou LINK quando o painel ganhou destino, e link herda o
 * azul de acao (--azul-2), que nao inverte no tema escuro: 2,88 de
 * contraste, contra os 4,5 da norma. O numero e o rotulo ja tem cor
 * propria; o que faltava era o cartao nao se declarar azul. Ele continua
 * link - o que muda e que a cor deixa de ser o sinal, e passam a ser o
 * cursor, o realce sob o cursor e o anel de foco. */
.stat{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:14px 16px; min-height:96px; border-radius:var(--raio);
  color:var(--texto); text-decoration:none;
}
/* O ÍCONE NO CANTO, E NÃO NUMA COLUNA. Na coluna ele tirava uns 32px da
 * largura do rótulo, e com a caixa do mesmo tamanho em todas as telas
 * (176px) "Pessoas com documento vencido" caía para três linhas e
 * esticava a fila do SST. No canto, ele fica ao lado do número, que é
 * curto, e o rótulo usa a caixa inteira. */
.stat{ position:relative }
.stat>.ico-svg{ position:absolute; top:16px; right:16px; color:var(--cinza-2); flex:none }
.stat>*:not(.ico-svg){ min-width:0; width:100% }
/* text-align:left porque `.num` da folha oficial é a regra da coluna de
 * número da TABELA (alinhada à direita) e vazava para a caixa: o número
 * caía em lugar diferente conforme o tamanho do rótulo. */
.stat .num{ padding-right:28px; text-align:left }
.stat .num{
  font-size:28px; font-weight:700; line-height:1.15; color:var(--krh-num);
  font-variant-numeric:tabular-nums; letter-spacing:-.5px;
}
.stat .sub,.stat .lbl{
  font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.5px;
  color:var(--cinza); line-height:1.35; margin-top:2px;
}
.stat.quantidade .num{ color:var(--verde) }
.stat.alerta .num{ color:var(--laranja) }
/* Indicador que tambem filtra a lista (Ferias faz isso): precisa parecer
 * clicavel e precisa mostrar que esta ligado. */
.stat[role="button"]{ cursor:pointer; transition:border-color .12s, box-shadow .12s }
.stat[role="button"]:hover{ border-color:var(--azul-2) }
.stat[aria-pressed="true"]{ border-color:var(--azul-2); background:var(--krh-realce-fundo) }
/* O termo que a pessoa assinou, lido dentro da gaveta. Fonte do sistema e
 * nao de maquina de escrever: e um texto para LER, e nao codigo. A quebra
 * respeita a do original, porque o hash foi tirado exatamente deste texto. */
.k-termo{
  white-space:pre-wrap; word-wrap:break-word; font-family:inherit;
  font-size:13.5px; line-height:1.65; color:var(--texto);
  background:var(--krh-superficie-2); border:1px solid var(--linha);
  border-radius:8px; padding:12px 14px; margin:8px 0 0; max-height:52vh; overflow:auto;
}

/* Indicador zerado nao e clicavel, e precisa PARECER nao clicavel: filtrar
 * por um recorte vazio devolve a mesma tela vazia, e quem clicou conclui
 * que o bloco esta quebrado. Fica legivel, so recua para o segundo plano. */
.stat.apagado{ opacity:.55 }
.stat.apagado .num{ color:var(--cinza) }


/* =====================================================================
 *  7. SELO
 *
 *  Ponto colorido + palavra. O ponto carrega o estado; a palavra carrega o
 *  significado. Cor sozinha nunca decide nada (WCAG 1.4.1).
 *  Fundo e texto vem aos pares dos tokens do K-RH: o pastel do arquivo
 *  oficial e cor literal e nao inverte no tema escuro.
 * ===================================================================== */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 9px; border-radius:var(--raio-sm);
  font-size:12px; font-weight:600; line-height:18px; text-align:left;
  border:1px solid transparent;
}
/* Selo quebra linha. Com nowrap, o selo longo ("vencido - em dobro") estoura
 * a coluna e some cortado na borda da tabela - foi o que aconteceu em Ferias. */
.badge{ white-space:normal }
.badge::before{
  content:""; width:6px; height:6px; border-radius:50%; margin-top:6px;
  background:currentColor; flex:none; align-self:flex-start;
}
.badge.verde   { background:var(--krh-selo-verde-fundo);    color:var(--krh-selo-verde-texto) }
.badge.amarelo { background:var(--krh-selo-amarelo-fundo);  color:var(--krh-selo-amarelo-texto) }
.badge.vermelho{ background:var(--krh-selo-vermelho-fundo); color:var(--krh-selo-vermelho-texto) }
.badge.azul    { background:var(--krh-selo-azul-fundo);     color:var(--krh-selo-azul-texto) }
.badge.cinza,.badge.inativo{
  background:var(--krh-selo-neutro-fundo); color:var(--krh-selo-neutro-texto);
}
/* Selo sem ponto, para quando ele e contagem e nao estado. */
.badge.simples::before{ content:none }


/* =====================================================================
 *  8. AVISO E ESTADO VAZIO
 * ===================================================================== */
.alerta{
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 14px; border-radius:var(--raio-sm); font-weight:500; font-size:14px;
  border:1px solid; border-left-width:3px;
  /* A faixa NEUTRA tinha borda sem cor, e a borda pegava a cor do texto:
   * contorno preto e fundo nenhum, no Painel, Férias, Mobilização,
   * Desligamento e Documentos e Assinaturas. Agora ela segue o desenho
   * das faixas ok e erro: fundo claro, linha suave e a marca à esquerda. */
  border-color:var(--linha); border-left-color:var(--laranja);
  background:var(--krh-selo-amarelo-fundo); color:var(--texto);
}
.alerta .ico-svg{ flex:none; margin-top:1px }
.alerta.ok  { background:var(--krh-ok-fundo);   border-color:var(--krh-ok-linha);   color:var(--krh-ok-texto) }
.alerta.erro{ background:var(--krh-erro-fundo); border-color:var(--krh-erro-linha); color:var(--krh-erro-texto) }

/* O INDICADOR DE ALERTA NÃO É A FAIXA DE AVISO. K.stat(..., 'alerta') põe
 * a classe `alerta` na caixa, e ela casava com a regra de cima e com a da
 * folha oficial: margem de 16px embaixo, borda na cor do texto e outro
 * recuo. Resultado, na fila de indicadores: a caixa de alerta saía 16px
 * mais baixa que as vizinhas e contornada de preto. O dono viu na
 * Pré-admissão ("falta documento é menor, os outros é maior") e pediu a
 * mesma caixa para todos, mude a mensagem ou não (25/09/2026).
 * Aqui ela volta a ser uma caixa como as outras; o alerta fica só na
 * faixa laranja à esquerda e no número, como a folha oficial desenha. */
.stat.alerta{
  margin:0; padding:14px 16px; font-size:inherit; font-weight:inherit;
  align-items:flex-start; gap:12px;
  border:1px solid var(--linha); border-left:4px solid var(--laranja);
  background:var(--branco); color:var(--texto);
}
/* Ligado e sob o cursor, igual às vizinhas: a regra de cima vem depois e
 * apagaria o realce azul. */
.stat.alerta[role="button"]:hover,
.stat.alerta[aria-pressed="true"]{ border-color:var(--azul-2); border-left-color:var(--laranja) }
.stat.alerta[aria-pressed="true"]{ background:var(--krh-realce-fundo) }

/* Vazio nao e erro: diz o que nao ha e o que fazer a respeito. */
.vazio{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:40px 24px; text-align:center; color:var(--cinza);
}
.vazio .ico{
  display:grid; place-items:center; width:44px; height:44px; margin-bottom:6px;
  border-radius:50%; background:var(--krh-superficie-2); color:var(--cinza-2);
}
.vazio h3{ font-size:15px; font-weight:600; color:var(--texto); margin:0 }
.vazio p{ font-size:13.5px; color:var(--cinza); margin:0; max-width:44ch }
.vazio .btn{ margin-top:10px }
/* Vazio dentro do quadro da tabela nao repete a borda. */
.tabela-wrap>.vazio{ border:0 }


/* =====================================================================
 *  9. FORMULARIO, ABAS E BOTAO - so o que quebra no tema escuro
 *
 *  Estes valores existem no arquivo oficial em cor literal. Literal nao
 *  inverte: rotulo #39424f sobre fundo #151f30 da 1,4:1. Nao alteramos o
 *  arquivo oficial (KFROTA e KEPI dependem dele); sobrepomos com token.
 * ===================================================================== */
.campo label{ color:var(--texto); font-size:13px; font-weight:600 }
.campo input,.campo select,.campo textarea{
  border-color:var(--krh-borda-campo); background:var(--branco); color:var(--texto);
  height:40px; font-size:14px;
}
.campo textarea{ height:auto; min-height:88px; padding:10px 12px }
.campo select{ appearance:auto }
.campo input:focus,.campo select:focus,.campo textarea:focus{
  border-color:var(--azul-2); box-shadow:0 0 0 3px var(--krh-realce-fundo);
}
.campo .dica{ color:var(--cinza) }
.campo input::placeholder,.campo textarea::placeholder{ color:var(--cinza-2) }

/* --azul-2 e o azul de acao do tema claro, e NAO inverte. Sobre a
 * superficie escura dava 2,88 de contraste, contra os 4,5 da norma - em
 * cinquenta e sete botoes espalhados por dez telas. --krh-num inverte
 * (#0d47a1 no claro, #7fb5ff no escuro) e e o token certo para texto
 * azul sobre superficie. */
.btn.sec{ background:var(--branco); color:var(--krh-num); border-color:var(--krh-sec-linha) }
.btn.sec:hover{ background:var(--krh-sec-hover) }
.btn{ height:38px; border-radius:var(--raio-sm) }
.btn.peq{ height:32px; padding:0 11px; font-size:13px }
.btn.bloco{ height:auto; min-height:46px }

.aba:hover{ background:var(--krh-realce-fundo); color:var(--texto) }
.aba.on{ color:var(--azul-2); border-bottom-color:var(--azul-2) }
:root[data-theme="dark"] .aba.on{ color:var(--krh-num); border-bottom-color:var(--krh-num) }

/* Aviso temporario: o oficial usa var(--texto) de fundo com texto branco -
 * no tema escuro isso e branco sobre quase branco. */
.toast{ background:var(--azul-900); color:var(--branco); border:1px solid var(--nav-linha) }
:root[data-theme="dark"] .toast{ color:var(--texto) }

/* Barra de acao acima da lista: mesma altura de campo em toda a linha. */
.barra-acao{ align-items:flex-end; gap:12px; margin-bottom:16px }

/* DEFEITO ENCONTRADO (existia antes desta camada): o arquivo oficial abre com
 * `*{margin:0;padding:0}`, e isso apaga o `margin:auto` que o navegador da ao
 * <dialog>. Resultado: toda janela do sistema abria colada no canto superior
 * esquerdo da tela, por cima do menu. Medido na janela de Aptidao do SST.
 * A correcao de verdade e no arquivo oficial - vale para KFROTA e KEPI. */
dialog.modal{ margin:auto; max-height:min(86vh,760px); display:flex; flex-direction:column }
dialog.modal .corpo{ overflow:auto }
dialog.modal .cab h3,dialog.modal .cab h2{ margin:0 }


/* =====================================================================
 *  9.1 CAMADA - GAVETA E MODAL   (Arquitetura da experiencia, §4)
 *
 *  Uma folha de estilo para os dois, porque e um componente so com duas
 *  peles. A gaveta encosta na direita e tem a altura inteira; o modal
 *  centra. No celular os dois viram a MESMA folha de baixo para cima -
 *  "um componente so para os dois", na letra do §4.3.
 *
 *  Medidas do documento: gaveta 480px e altura inteira (§4.2); modal 560px
 *  (§4.3); folha do celular em 92% da altura (§4.2).
 *  A altura usa dvh, e nao vh: no telefone a barra do navegador entra e
 *  sai, e com vh o rodape da camada fica escondido por baixo dela.
 * ===================================================================== */
dialog.k-camada{
  border:0; padding:0; max-width:100vw; max-height:100dvh;
  background:var(--branco); color:var(--texto);
  box-shadow:var(--sombra-lg);
  display:flex; flex-direction:column; overflow:hidden;
}
dialog.k-camada::backdrop{ background:var(--krh-veu) }

dialog.k-gaveta{
  --k-camada-w:480px;
  margin:0 0 0 auto; width:var(--k-camada-w);
  height:100dvh; max-height:100dvh; border-radius:0;
  box-shadow:var(--krh-camada-sombra);
  animation:k-entra-direita .18s ease-out;
}
dialog.k-modal{
  --k-camada-w:560px;
  margin:auto; width:var(--k-camada-w); max-width:94vw;
  max-height:min(86dvh,760px); border-radius:16px;
  animation:k-entra-centro .14s ease-out;
}
@keyframes k-entra-direita{ from{ transform:translateX(24px); opacity:.6 } }
@keyframes k-entra-centro { from{ transform:translateY(8px);  opacity:.6 } }

.k-camada-cab{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:16px 18px; border-bottom:1px solid var(--linha);
  background:var(--branco); flex:none;
}
.k-camada-cab h2{ font-size:17px; font-weight:700; margin:0; letter-spacing:-.2px }
.k-camada-cab .sub{ margin:2px 0 0; font-size:13px }
.k-camada-x{
  flex:none; width:34px; height:34px; display:grid; place-items:center;
  border:1px solid var(--linha); border-radius:var(--raio-sm);
  background:var(--branco); color:var(--cinza); cursor:pointer;
}
.k-camada-x:hover{ background:var(--krh-hover); color:var(--texto) }

.k-camada-corpo{ flex:1; overflow:auto; overscroll-behavior:contain; padding:18px }
/* Lista dentro da camada nao ganha area rolavel propria: a camada ja e uma. */
.k-camada-corpo .tabela-wrap.rolo{ max-height:none }
.k-camada-corpo .card{ margin-bottom:12px }
.k-camada-corpo .card:last-child{ margin-bottom:0 }
.k-camada-corpo>:last-child{ margin-bottom:0 }

.k-camada-pe{
  flex:none; display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap;
  padding:14px 18px; border-top:1px solid var(--linha); background:var(--branco);
}

/* A pagina atras nao rola enquanto a camada esta aberta. */
body.k-camada-aberta{ overflow:hidden }

/* A linha que abriu a gaveta fica marcada: em Auditoria a pessoa percorre
 * dezenas de eventos seguidos e precisa saber qual esta lendo. */
tr.k-linha-aberta td,tr.k-linha-aberta th{ background:var(--krh-realce-fundo) }
tr.k-linha-aberta td:first-child,tr.k-linha-aberta th:first-child{
  box-shadow:inset 3px 0 0 var(--azul-2);
}

@media (max-width:860px){
  /* Gaveta e modal viram a mesma folha de baixo para cima, ocupando a tela
   * quase inteira. Arrastar o cabecalho para baixo fecha (nucleo.js). */
  dialog.k-camada{
    margin:auto 0 0; width:100%; max-width:100%;
    height:auto; max-height:92dvh; border-radius:16px 16px 0 0;
    animation:k-entra-baixo .2s ease-out;
  }
  dialog.k-gaveta{ height:auto }
  @keyframes k-entra-baixo{ from{ transform:translateY(100%) } }
  /* Pega para o dedo, e o aviso visual de que a folha se arrasta. */
  .k-camada-cab{ position:relative; padding-top:22px; touch-action:none }
  .k-camada-cab::before{
    content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%);
    width:38px; height:4px; border-radius:2px; background:var(--linha);
  }
  .k-camada-x{ width:40px; height:40px }
  .k-camada-pe .btn{ flex:1; justify-content:center }
}


/* =====================================================================
 * 10. FICHA
 * ===================================================================== */
.ficha-topo{ gap:14px; margin-bottom:14px }
.ficha-topo h2{ font-size:20px; margin:0 }
.ficha-topo .sub{ margin:2px 0 0; font-size:13.5px }
.dados{ gap:12px 24px }
.dados dd{ margin:0 0 8px }


/* =====================================================================
 * 11. CELULAR
 *
 *  Em obra o telefone e o computador. Abaixo de 820px a tabela larga vira
 *  lista de cartoes - a transformacao ja e do arquivo oficial (table.resp);
 *  aqui so se moderniza o cartao e se garante o alvo de 44px. Nao se cria
 *  um quinto degrau: a escada oficial e 1100 / 860 / 820 / 560.
 * ===================================================================== */
@media (max-width:860px){
  .conteudo{ padding:16px 14px }
  .card{ padding:16px }
  .k-bar{ gap:10px }
  .k-bar .k-dir{ margin-left:0; width:100% }
  /* `flex:1` com `min-width:0` deixava a busca dividir a linha com os
   * filtros e encolher ate 26px numa tela de 390px - largura que nao
   * aceita nem um nome. `flex:1 1 100%` obriga a quebra: a busca fica com
   * a linha inteira, e os filtros descem para a de baixo. Buscar e a
   * primeira coisa que se faz numa lista de sessenta pessoas. */
  .k-busca{ min-width:0; flex:1 1 100% }
}

@media (max-width:820px){
  /* Sem area rolavel dentro de tela pequena: a pagina ja rola. */
  .tabela-wrap.rolo{ max-height:none }
  .tabela-wrap:has(table.resp){ overflow:visible }

  table.resp tbody tr{
    border:1px solid var(--linha); border-radius:12px; background:var(--branco);
    box-shadow:var(--sombra); padding:6px 14px 8px; margin-bottom:10px; height:auto;
  }
  table.resp tbody tr:hover td{ background:transparent }
  table.resp td{ min-height:44px; padding:10px 0; font-size:14px; gap:16px }
  table.resp td::before{ color:var(--cinza); font-size:12.5px; font-weight:600 }
  /* A primeira celula e o nome: vira titulo do cartao, sem rotulo. */
  table.resp tbody td:first-child{
    display:block; text-align:left; font-size:15px; font-weight:700;
    padding:8px 0 10px; border-bottom:1px solid var(--linha);
  }
  table.resp tbody td:first-child::before{ content:none }
  table.resp tbody td:first-child a{ font-size:15px }
  /* No cartao o botao volta ao tamanho de dedo. */
  table.resp .btn{ height:40px; padding:0 14px; font-size:14px }
  table.resp td.acoes-col{ display:flex; gap:8px; justify-content:flex-end; padding-top:12px }
  .k-pag button{ min-width:44px; height:44px }
}

@media (max-width:560px){
  table.dados{ font-size:14px }
  .stat,.stat.alerta{ min-height:78px; padding:12px 14px }
  .stat .num{ font-size:24px }
  /* Dois indicadores por linha, como manda o arquivo oficial. A regra
   * precisa ser repetida aqui: esta folha carrega depois, e a declaracao
   * sem media desta camada venceria a declaracao com media da oficial. */
  .cards{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}

/* O botao de menu do celular vinha SEM CONTEUDO na marcacao: um retangulo
 * branco vazio no canto. Nao ha icone de "menu" no conjunto oficial que
 * possa ser inserido daqui sem tocar em app.js, entao o desenho e feito em
 * CSS - tres barras, o simbolo que todo mundo reconhece. */
.hamburguer{ position:relative; width:38px; height:38px; padding:0 }
.hamburguer::before{
  content:""; position:absolute; left:11px; right:11px; top:12px; height:2px;
  border-radius:1px; background:currentColor;
  box-shadow:0 5px 0 currentColor, 0 10px 0 currentColor;
}

/* --- a gaveta ---------------------------------------------------------
 * DEFEITO ENCONTRADO: app.js marca #app com .gaveta-aberta, e app.css so
 * conhece .sidebar.aberta. Resultado: o botao de menu do celular nao abria
 * nada. Nao mexemos em app.css nesta rodada; a regra que falta entra aqui,
 * com o mesmo valor da fonte (KFROTA), e a correcao definitiva volta para
 * app.css na proxima. */
@media (max-width:860px){
  #app.gaveta-aberta .sidebar{ transform:none; box-shadow:var(--sombra-lg) }
  #app.gaveta-aberta::after{
    content:""; position:fixed; inset:0; z-index:40;
    background:var(--azul-900); opacity:.55;
  }
  #app.gaveta-aberta .sidebar{ z-index:50 }
}


/* =====================================================================
 * 12. O BOTAO VOLTAR   (K.voltar)
 *
 *  Regra do dono: toda tela de detalhe que abre em pagina inteira tem um
 *  Voltar em cima, a esquerda, antes do titulo. Lugar fixo, nome fixo.
 *
 *  Ele e a saida GRANDE e obvia; a trilha, ao lado, continua dizendo onde
 *  a pessoa esta. Os dois na mesma linha, e a linha e um flex que QUEBRA:
 *  em 390px a trilha desce sozinha e nada sai da tela de lado - o botao
 *  nunca fica atras de rolagem lateral.
 *
 *  Alvo de toque: 36px no desktop, acima do minimo de 24x24 da WCAG 2.2
 *  SC 2.5.8; 44px no celular, onde o ponteiro e o dedo (SC 2.5.5) - a
 *  mesma escada que o resto desta folha usa.
 * ===================================================================== */
.k-topo{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:0 0 12px; max-width:100%;
}
/* A trilha ja vem com margem propria das telas; dentro da linha do botao
 * ela nao pode abrir buraco nem empurrar o botao para cima. */
.k-topo>.k-trilha,.k-topo>nav{ margin:0; min-width:0 }

/* O LINK DA TRILHA MEDIA 3,26:1, e a WCAG AA pede 4,5.
 *
 *  A trilha e `<p class="sub">`, e `.sub` e cinza. O link dentro dela
 *  herdava a cor de link geral, `--azul-2`, sobre a superficie da tela: o
 *  conferidor de navegador mediu 3,26:1 na tela de EPI, que foi a primeira
 *  raiz de area a ganhar trilha. As outras trilhas so aparecem em ficha, e
 *  a varredura nao entra em ficha - o defeito era geral e estava escondido.
 *
 *  `--krh-num` e o mesmo remedio que `eloDeCelula` ja usa, e pelo mesmo
 *  motivo: ele inverte no tema escuro, e `--azul-2` nao. */
.k-trilha a{ color:var(--krh-num); font-weight:600 }

.k-voltar{
  display:inline-flex; align-items:center; gap:6px; flex:none;
  height:36px; padding:0 12px 0 9px;
  border:1px solid var(--krh-sec-linha); border-radius:var(--raio-sm);
  background:var(--branco); color:var(--krh-num);
  font:600 14px/1 var(--fonte); text-decoration:none; white-space:nowrap;
}
.k-voltar:hover{ background:var(--krh-sec-hover); color:var(--krh-num); text-decoration:none }
/* O conjunto oficial de icones nao tem seta para a esquerda, e desenhar
 * uma seria sair do conjunto. Entao e o `chevron-right` oficial,
 * espelhado: mesmo traco, mesma espessura, apontando para a saida. */
.k-voltar .k-voltar-seta{ display:inline-flex; transform:scaleX(-1) }

/* Gaveta e modal ja tem o seu fechar. Duas saidas na mesma janela e
 * desenho errado, entao aqui o Voltar nao aparece nem quando alguem o
 * escreve por engano dentro de uma camada. */
dialog .k-topo,dialog .k-voltar{ display:none }

@media (max-width:860px){
  .k-voltar{ height:44px; padding:0 14px 0 11px; font-size:15px }
  /* A trilha ganha a linha de baixo inteira: lado a lado, numa tela de
   * 390px, ela espremia o botao e fazia a pagina andar de lado. */
  .k-topo{ gap:8px }
  .k-topo>.k-trilha,.k-topo>nav{ flex:1 1 100% }
}


/* =====================================================================
 * 12.8 OS TRES PASSOS
 *
 *  Ordem do dono, depois de olhar a tela cheia de abas: "utilizar uma
 *  sequencia visual simples de tres passos; manter bastante espaco livre;
 *  evitar textos explicativos longos". O numero na frente do campo diz em
 *  que passo a pessoa esta sem precisar de legenda.
 *
 *  No celular os tres viram coluna: tres seletores lado a lado numa tela
 *  de 390px dariam campos de 120px, onde nome de pessoa nao cabe.
 * ===================================================================== */
.k-passos{ display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap }
.k-passo{ display:flex; gap:10px; align-items:flex-start; flex:1 1 260px; min-width:0 }
.k-passo>.campo{ flex:1; min-width:0 }
.k-passo-n{
  /* 28px: o centro do círculo na altura do centro do campo (rótulo de
   * 22px mais metade dos 40px do campo, menos metade do círculo). Com 22
   * ele ficava acima do campo. */
  flex:none; width:28px; height:28px; margin-top:28px;
  display:grid; place-items:center; border-radius:50%;
  background:var(--krh-realce-fundo); color:var(--krh-num);
  font:700 14px/1 var(--fonte);
}
/* Campo travado nao se disfarca de campo aberto: quem ve cinza entende
   que a vez dele ainda nao chegou, e nao fica clicando. */
.k-passo select:disabled{ background:var(--krh-superficie-2); color:var(--cinza); cursor:not-allowed }
@media (max-width:720px){
  .k-passos{ flex-direction:column; gap:12px }
  .k-passo{ flex:1 1 auto; width:100% }
}

/* =====================================================================
 * 12.9 O EDITOR DE DOCUMENTO
 *
 *  ORDEM DO DONO: "eu quero dar o mesmo ambiente na hora que a pessoa entra
 *  no sistema, como se ela estivesse no Word, como se ela estivesse
 *  editando o documento". E depois, olhando um modelo aberto: "abriu todo
 *  estranho. Tem que abrir igualzinho os documentos originais".
 *
 *  A FOLHA E UMA FOLHA A4 DE VERDADE, medida em centimetros e nao em
 *  caracteres: 21 cm de largura, 2,5 cm de margem, 24,7 cm de altura util.
 *  O navegador entende `cm` desde sempre e converte por 96 pontos de
 *  polegada - a mesma regra que ele usa para imprimir. E por isso que a
 *  linha que cabe na tela e a linha que cabe no papel.
 *
 *  A MESA em volta e cinza, como a area de trabalho de um editor de texto:
 *  e ela que faz a folha PARECER folha. Papel branco sobre fundo branco nao
 *  tem borda, e sem borda ninguem ve onde a pagina termina.
 *
 *  A REGUA em cima repete a medida da folha, com a margem sombreada nas
 *  pontas. Ela responde "quanto ainda cabe nesta linha" sem a pessoa
 *  precisar imprimir para descobrir.
 *
 *  =====================================================================
 *  A REGRA QUE MANDA NESTE BLOCO: A FOLHA NAO IMPOE TIPOGRAFIA
 *
 *  O corpo do documento chega do arquivo ORIGINAL com a formatacao dele
 *  escrita dentro (o Regulamento Interno traz 102 marcas de alinhamento,
 *  158 de negrito, Book Antiqua e Arial em 14, 12, 11 e 10 pontos, 105 de
 *  espacamento, 7 recuos e 31 de cor). Tudo isso vem como estilo EM LINHA,
 *  e estilo em linha ganha de qualquer regra deste arquivo - e assim que
 *  tem de ser: quem manda na aparencia do documento e o documento.
 *
 *  O que este bloco declara e SO O PADRAO, para o pedaco que nao traz
 *  estilo proprio. E o padrao e de DOCUMENTO, e nao de tela: fonte
 *  serifada, corpo de 12 pontos, entrelinha folgada e paragrafo
 *  justificado. Antes daqui a folha impunha 15px da fonte da casa
 *  (sem serifa) em tudo, e ai o documento saia com a cara do sistema em
 *  vez da cara do papel.
 *
 *  POR QUE OS SELETORES NAO FORAM PARA `:where()`. A ideia era boa e a
 *  medida derrubou: estilo EM LINHA ja vence qualquer folha de estilo,
 *  qualquer que seja a especificidade dela, entao `:where()` nao acrescenta
 *  nada do lado do documento; do lado de fora ele TIRA. `.ed-folha p` vale
 *  0-1-1; `.ed-folha :where(p)` cairia para 0-1-0 e perderia para o
 *  `.card p` da propria casa, que vale 0-1-1 e cerca a folha por todos os
 *  lados. O documento passaria a herdar a tipografia da tela justamente
 *  onde ela nao devia entrar. O objetivo era o documento mandar na propria
 *  cara, e ele ja manda.
 *
 *  MEDIDO NO NAVEGADOR, com corpo rico e corpo pobre na mesma folha:
 *  o rico ganha em tudo - alinhamento (esquerda e direita contra o
 *  justificado da folha), familia (Arial contra a serifada), corpo (9pt
 *  contra 12), entrelinha (1,15 contra 1,5), espaco depois (18pt contra 6),
 *  recuo a esquerda (2cm), recuo de primeira linha (1cm), borda e
 *  alinhamento vertical de celula, largura de tabela. O pobre, que hoje e o
 *  que esta no banco (o Regulamento Interno publicado tem ZERO marca de
 *  fonte, corpo, espacamento, entrelinha e cor, e duas de alinhamento),
 *  recebe da folha exatamente o que faltava: serifada, 12pt, entrelinha
 *  1,5, paragrafo justificado, titulo centralizado e lista numerada com o
 *  recuo do papel.
 *
 *  Cor so por token, como no resto: nada de hexadecimal aqui. Os tokens do
 *  papel (--krh-papel*) nao seguem o tema, e o porque esta escrito neles,
 *  em krigs-tokens.css.
 * ===================================================================== */
.ed-caixa{
  /* As medidas do papel ficam declaradas UMA vez, aqui, e todo o resto
     deriva delas. `--ed-altura-util` tambem e lida pelo JavaScript para
     contar paginas: numero de medida guardado em dois lugares e numero que
     um dia deixa de bater. */
  --ed-largura: 21cm;
  --ed-margem: 2.5cm;
  --ed-altura-util: 24.7cm;
  /* O PADRAO DO PAPEL, num lugar so. Serifada porque documento juridico
     brasileiro sai serifado desde sempre - e o que o RH ve no Word. A
     lista comeca por Book Antiqua e Palatino, que sao as do acervo, e cai
     em Georgia e Times quando a maquina nao as tem. */
  --ed-fonte: "Book Antiqua", Palatino, "Palatino Linotype", Georgia,
              "Times New Roman", serif;
  --ed-corpo: 12pt;
  --ed-entrelinha: 1.5;
  border:1px solid var(--linha); border-radius:var(--raio-sm); overflow:hidden;
  background:var(--branco);
}

/* --- a barra ------------------------------------------------------- */
.ed-barra{ display:flex; flex-wrap:wrap; align-items:center; gap:2px;
           padding:6px 10px; background:var(--krh-superficie-2);
           border-bottom:1px solid var(--linha); position:sticky; top:0; z-index:3 }
.ed-grupo{ display:flex; align-items:center; gap:2px }
/* O INVOLUCRO DA FORMATACAO NAO EXISTE NO COMPUTADOR. `display:contents`
   entrega os seis grupos direto a barra, e o arranjo e o mesmo de sempre.
   Ele so vira caixa no celular, mais abaixo, onde precisa rolar de lado. */
.ed-formato{ display:contents }
/* AS ACOES DO DOCUMENTO FICAM NA MESMA BARRA, e nao num rodape solto. Foi
   reclamacao literal do dono: "aonde eu vou gerar o PDF, cade PDF? Nao tem
   onde gerar o PDF". Elas ficam com o documento, na mesma altura em todas
   as telas que abrem a folha, com os mesmos tres rotulos da advertencia do
   SST (abrir para editar, gerar PDF, copiar link de assinatura), para
   ninguem reaprender a barra a cada tela.

   E ELAS TEM FILEIRA PROPRIA, sempre, e nao a sobra da fileira dos icones.
   MEDIDO: os seis grupos de formatacao ocupam 880 pontos e as tres acoes
   pedem 370; numa tela de 1440 com o menu aberto sobram 1073. Com uma
   fileira so, o grupo caia para baixo por falta de espaco e ficava
   pendurado a direita, com um vao vazio do lado - a barra parecia
   quebrada. Fileira declarada nao depende da largura da janela nem da
   quantidade de acoes que aquela tela oferece, e o botao que a pessoa
   procura fica sempre no mesmo lugar.

   `order:-1` a poe EM CIMA: e a primeira coisa da folha, e e o que o dono
   foi procurar. A formatacao vem embaixo, junto do texto que ela muda. */
.ed-grupo-doc{ order:-1; flex:0 0 100%; justify-content:flex-end;
               gap:4px; padding-bottom:5px; margin-bottom:5px;
               border-bottom:1px solid var(--linha) }
/* Sem acao nenhuma alem de expandir a fileira continua valendo: e nela que
   o botao de tela cheia mora, e ele existe em toda folha. */
.ed-grupo-doc .ed-bt{ gap:6px }
.ed-bt{ min-width:38px; height:40px; padding:0 9px; border:1px solid transparent;
        display:inline-flex; align-items:center; justify-content:center;
        border-radius:var(--raio-sm); background:transparent; color:var(--texto);
        font:600 13px/1 var(--fonte); cursor:pointer }
/* QUARENTA PONTOS DE ALTURA, e nao trinta e quatro: e a medida minima de
   alvo de clique que a casa cobra, e o conferidor de tela reprova abaixo
   dela. Botao de barra e o alvo mais clicado desta tela. */
.ed-bt:hover{ background:var(--branco); border-color:var(--linha) }
.ed-bt:focus-visible{ outline:2px solid var(--krh-num); outline-offset:1px }
.ed-bt[disabled]{ opacity:.45; cursor:not-allowed }
.ed-bt[disabled]:hover{ background:transparent; border-color:transparent }
/* O BOTAO ACESO diz o que esta ligado onde o cursor esta. E o detalhe que
   mais faz um editor proprio parecer um editor de verdade. */
.ed-bt.on{ background:var(--krh-realce-fundo); border-color:var(--krh-realce-linha);
           color:var(--krh-realce-texto) }
/* A acao principal do documento sai em cor de acao: e a que o dono
   procurou e nao achou. */
.ed-bt-forte{ background:var(--branco); border-color:var(--krh-sec-linha);
              color:var(--krh-num) }
.ed-bt-forte:hover{ background:var(--krh-sec-hover); border-color:var(--krh-sec-linha) }
/* As tres letras de marca saem com a cara do que fazem: quem ve um "N" em
   negrito nao precisa ler a dica para saber que aquilo e negrito. */
.ed-bt-n{ font-weight:800 }
.ed-bt-i{ font-style:italic; font-family:Georgia,"Times New Roman",serif }
.ed-bt-s{ text-decoration:underline }
.ed-sep{ width:1px; height:20px; background:var(--linha); margin:0 6px }

/* --- a regua ------------------------------------------------------- */
.ed-regua{ background:var(--krh-superficie-2); border-bottom:1px solid var(--linha);
           padding:0; overflow:hidden }
.ed-regua-papel{ position:relative; width:var(--ed-largura); height:20px; margin:0 auto;
                 background:var(--branco); border-left:1px solid var(--linha);
                 border-right:1px solid var(--linha) }
/* A margem sombreada e a parte da folha onde nao se escreve. */
.ed-margem{ position:absolute; top:0; bottom:0; width:var(--ed-margem);
            background:var(--krh-superficie-2) }
.ed-margem-esq{ left:0 }
.ed-margem-dir{ right:0 }
.ed-cm{ position:absolute; top:12px; bottom:0; width:1px; background:var(--cinza-2) }
.ed-cm-forte{ top:6px; background:var(--cinza) }
.ed-cm-forte i{ position:absolute; top:-7px; left:3px; font:400 9px/1 var(--fonte);
                color:var(--cinza); font-style:normal }

/* --- a mesa e a folha ---------------------------------------------- */
/* `scrollbar-gutter: stable both-edges` reserva a barra de rolagem dos DOIS
   lados. Sem isto a folha ficava uns oito pontos a esquerda do centro assim
   que o texto passava de uma pagina, e a regua - que nao rola - deixava de
   bater com a margem que ela mede. Regua que nao bate com a folha e pior do
   que regua nenhuma. */
.ed-mesa{ background:var(--bg); padding:20px 0; max-height:74vh; overflow:auto;
          scrollbar-gutter:stable both-edges }
.ed-folha{
  /* `max-width:100%` e o cinto de seguranca: a folha nunca empurra a
     largura de quem a hospeda. Sem isto, o editor dentro de uma janela de
     560 pontos (e o SST abre um assim) jogava 794 pontos de papel para
     fora da janela e a pessoa arrastava a tela de lado para ler. */
  width:var(--ed-largura); max-width:100%; min-height:var(--ed-altura-util);
  padding:var(--ed-margem); margin:0 auto; box-sizing:border-box;
  /* Propriedade a propriedade, e nao no atalho `font`: o atalho zera o que
     nao foi escrito nele, e num documento isso significa apagar
     `font-variant` e `font-stretch` que possam vir do original. */
  font-family:var(--ed-fonte); font-size:var(--ed-corpo);
  line-height:var(--ed-entrelinha);
  /* O PARAGRAFO NASCE JUSTIFICADO, como todo papel que o RH emite. Quem
     traz alinhamento proprio no corpo ganha desta linha sem esforco:
     estilo em linha vence folha de estilo. */
  text-align:justify; text-justify:inter-word; hyphens:none;
  color:var(--krh-papel-tinta); background:var(--krh-papel);
  border:1px solid var(--linha); box-shadow:var(--sombra);
  outline:0; overflow-wrap:break-word;
}
.ed-folha:focus{ border-color:var(--krh-realce-linha);
                 box-shadow:0 0 0 3px var(--krh-realce-fundo), var(--sombra) }
/* Espacamento em ponto, e nao em pixel: o resto da folha ja fala a lingua
   do papel, e milimetro de recuo em pixel nao bate com o que sai impresso. */
.ed-folha p{ margin:0 0 6pt }
.ed-folha h1,.ed-folha h2,.ed-folha h3{ margin:12pt 0 6pt; line-height:1.25;
                                        text-align:left; page-break-after:avoid }
/* O TITULO DO DOCUMENTO NASCE CENTRALIZADO, porque e assim que sai em todo
   papel que o RH ja emite hoje. Quem quiser outro alinhamento tem os quatro
   botoes da barra - e o corpo que traz o seu ganha desta linha. */
.ed-folha h1{ font-size:14pt; text-align:center; margin-top:0 }
.ed-folha h2{ font-size:13pt }
.ed-folha h3{ font-size:12pt }
/* A LISTA NUMERADA COM O RECUO DO PAPEL. 1,1 cm e o recuo padrao de lista
   do Word (0,63 cm de marca + 0,63 de texto, arredondado para o que a
   fonte serifada pede); `outside` deixa o numero na margem e o texto
   alinhado, que e o que faz uma clausula numerada parecer clausula. */
.ed-folha ul,.ed-folha ol{ margin:0 0 6pt; padding-left:1.1cm;
                           list-style-position:outside }
.ed-folha ol{ list-style-type:decimal }
.ed-folha ul{ list-style-type:disc }
.ed-folha li{ margin:0 0 3pt }
/* Lista dentro de lista nao recomeca a margem do zero. */
.ed-folha li > ul,.ed-folha li > ol{ margin-top:3pt }
.ed-folha blockquote{ margin:0 0 6pt 1.1cm }

/* --- tabela dentro do documento ------------------------------------ */
/* O FIO E O DA GRADE, e nao a borda do documento: quem traz `border` no
   corpo (que e o que o contrato de conversao entrega) ganha desta linha e
   desenha a borda dele. Sem nenhum fio, tabela sem borda propria vira um
   monte de texto solto e ninguem enxerga que aquilo e tabela. */
.ed-folha table,.ed-tabela{ width:100%; border-collapse:collapse; margin:0 0 8pt }
.ed-folha th,.ed-folha td{ border:1px solid var(--krh-papel-linha); padding:3pt 5pt;
                           vertical-align:top }
.ed-folha th{ font-weight:700; text-align:left }

/* Figura dentro do documento nunca estoura a largura util da folha. */
.ed-folha img{ max-width:100%; height:auto }

/* --- a quebra de pagina -------------------------------------------- */
/* Na tela ela e um corte tracejado com o nome escrito: quebra invisivel e
   quebra que a pessoa nao sabe que inseriu, e depois nao acha para apagar.
   No papel ela quebra de verdade (bloco 13, impressao). */
.ed-folha hr.ed-quebra{
  border:0; border-top:1px dashed var(--krh-papel-linha);
  margin:14pt calc(var(--ed-margem) * -1);
  position:relative; height:0;
}
.ed-folha hr.ed-quebra::after{
  content:"quebra de página"; position:absolute; top:-8px; left:50%;
  transform:translateX(-50%); background:var(--krh-papel); padding:0 8px;
  font:400 10px/1.6 var(--fonte); letter-spacing:.4px; color:var(--cinza);
}

/* --- a barra de estado --------------------------------------------- */
.ed-status{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
            padding:7px 12px; background:var(--krh-superficie-2);
            border-top:1px solid var(--linha);
            font:400 12px/1.4 var(--fonte); color:var(--cinza) }

/* Documento que nao se edita continua legivel, e diz isso sem alarde: o
   cursor de texto nao aparece e a folha perde o realce de foco. Ela
   CONTINUA parecendo folha - documento assinado e o que mais se le, e o
   dono le documento assinado mais vezes do que escreve documento novo. */
.ed-travada{ cursor:default; user-select:text }
.ed-dados summary{ cursor:pointer }

/* =====================================================================
 *  A FOLHA EM TELA CHEIA
 *
 *  ORDEM DO DONO: "o documento do Word esta bom, mas tem que ter como
 *  expandir tambem. Voce tem como ficar pequenininha a tela, tem como
 *  ficar na tela inteira."
 *
 *  Em tela cheia a folha volta a ser A4 DE VERDADE, inclusive quando o
 *  editor foi aberto dentro de uma janela - e por isso a regua volta
 *  junto: ela so mente quando a folha nao tem a largura que ela mede.
 * ===================================================================== */
.ed-caixa.ed-cheia{
  position:fixed; inset:0; z-index:2000; border:0; border-radius:0;
  display:flex; flex-direction:column;
  /* A folha volta ao tamanho de papel mesmo dentro de uma janela. */
  --ed-largura:21cm; --ed-margem:2.5cm;
}
.ed-caixa.ed-cheia .ed-mesa{ flex:1 1 auto; max-height:none; padding:20px 0;
                             background:var(--krh-papel-mesa) }
/* QUEM ENCOLHE E A MESA, e ninguem mais.
   DEFEITO MEDIDO: em tela cheia a regua saia com 3 pontos de altura em vez
   de 21, e o que se via era uma tira com os numeros cortados no meio. A
   caixa e uma coluna de flex, e `.ed-regua` tem `overflow:hidden` - que faz
   o `min-height:auto` do flex valer zero, ou seja, autoriza o navegador a
   espremer a regua ate sumir para caber o resto. `flex:none` nas tres
   partes fixas devolve a altura delas e deixa a sobra para a mesa, que e a
   unica que rola. */
.ed-caixa.ed-cheia .ed-barra,
.ed-caixa.ed-cheia .ed-status{ flex:none }
.ed-caixa.ed-cheia .ed-regua{ display:block; flex:none }
.ed-caixa.ed-cheia .ed-folha{ border-left:1px solid var(--linha);
                              border-right:1px solid var(--linha);
                              box-shadow:var(--sombra) }
/* Enquanto a folha ocupa a tela, a pagina atras nao rola: rolar o que nao
   se ve e o jeito mais rapido de a pessoa perder o lugar ao voltar. */
body.ed-sem-rolagem{ overflow:hidden }

/* =====================================================================
 * 12.10 LEGENDA DE LISTA
 *
 *  A frase que diz O QUE O NUMERO DAQUELA COLUNA QUER DIZER. Nasceu no
 *  Controle de revisao, onde a mesma tela mostra dois numeros parecidos e
 *  com consequencias opostas: a revisao da base vale para todos, a do
 *  colaborador vale para um.
 *
 *  POR QUE NAO E `.alerta`: nada esta errado. Alerta usado para informar
 *  ensina a pessoa a ignorar alerta, e no dia em que houver alerta de
 *  verdade ela vai ignorar tambem. Isto e legenda, e legenda se le uma vez
 *  e sai do caminho - por isso o tom de realce e nao o de aviso.
 * ===================================================================== */
.k-legenda{
  display:block; margin:0 0 14px; padding:10px 14px;
  border-radius:var(--raio-sm); border:1px solid var(--krh-realce-linha);
  border-left-width:3px; background:var(--krh-realce-fundo);
  color:var(--krh-realce-texto); font:500 13.5px/1.5 var(--fonte);
}

/* Filtro de periodo: o rotulo fica COLADO no campo, e nao no `title`.
   Duas caixas de data iguais lado a lado nao dizem qual e o comeco e qual
   e o fim, e dica que so existe no `title` nao existe no celular. */
.k-periodo{ display:inline-flex; align-items:center; gap:6px;
            font:400 12.5px/1 var(--fonte); color:var(--cinza) }
.k-periodo input{ width:auto }

/* DENTRO DE UMA JANELA NAO HA FOLHA, HA TEXTO.
   Uma camada tem 560 pontos de largura; um A4 tem 794. Fingir papel ali
   daria uma folha cortada e uma regua que mede uma coisa enquanto o texto
   mede outra - e regua que nao bate com a folha e pior do que regua
   nenhuma. Na janela o editor vira o que ele e naquele espaco: texto com
   margem confortavel. E o caminho que o SST usa para corrigir o
   certificado sem sair da lista dele.

   QUEM QUISER O PAPEL INTEIRO tem o botao de expandir na barra: `.ed-cheia`
   tira a folha da janela e a devolve em A4, com regua. Era o que faltava
   para esta decisao nao virar limitacao. */
dialog .ed-caixa{ --ed-margem:24px }
dialog .ed-regua{ display:none }
dialog .ed-mesa{ padding:0; max-height:60vh }
dialog .ed-folha{ min-height:280px; border-left:0; border-right:0; box-shadow:none }

/* No celular a folha nao cabe em 21 cm: ela passa a ocupar a largura da
   tela e a margem encolhe. Regua some, porque regua que nao mede a folha
   de verdade mente. O corpo sobe meio ponto, que e a diferenca entre ler e
   apertar os olhos num aparelho na mao. */
@media (max-width:920px){
  .ed-caixa,.ed-caixa.ed-cheia{ --ed-largura:100%; --ed-margem:16px;
                                --ed-corpo:12.5pt }
  .ed-regua,.ed-caixa.ed-cheia .ed-regua{ display:none }
  .ed-mesa{ padding:0; max-height:none }
  .ed-folha,.ed-caixa.ed-cheia .ed-folha{ border-left:0; border-right:0;
                                          box-shadow:none; min-height:420px }
  .ed-bt{ min-width:42px; height:42px }
  /* NO CELULAR A BARRA TEM DOIS ANDARES, E SO DOIS: as acoes do documento
     em cima, a formatacao embaixo, cada uma rolando de lado quando nao
     couber. MEDIDO num aparelho de 390 por 844: com a barra quebrando
     sozinha, os dezenove botoes de formatacao viravam quatro andares e
     comiam 286 pontos de tela antes de a folha comecar. Rolar de lado e o
     que todo editor de celular faz, e mantem a folha na tela. */
  .ed-grupo-doc{ justify-content:flex-start; overflow-x:auto;
                 -webkit-overflow-scrolling:touch }
  .ed-formato{ display:flex; align-items:center; gap:2px; flex:1 1 100%;
               overflow-x:auto; -webkit-overflow-scrolling:touch }
  .ed-formato .ed-grupo,.ed-formato .ed-sep{ flex:none }
}

/* =====================================================================
 * 13. IMPRESSAO
 *
 *  O padrao de relatorio e do KEPI e mora no arquivo oficial. Aqui so se
 *  desfaz o que esta camada acrescentou e que nao existe no papel.
 * ===================================================================== */
@media print{
  /* DEFEITO ENCONTRADO (existia antes desta camada): a lista de elementos que
   * o arquivo oficial esconde no papel usa os nomes do KFROTA - `.topo` e
   * `.nav`. A moldura do K-RH se chama `.sidebar` e `.topbar`, entao o menu
   * lateral azul-marinho ia inteiro para a impressora. A lista oficial
   * precisa passar a incluir estes dois nomes. */
  .sidebar,.topbar{ display:none !important }
  #app{ display:block !important; height:auto !important }
  /* Janela aberta nao entra no relatorio: o papel e o que esta na lista. */
  dialog{ display:none !important }

  .k-bar,.k-busca,.k-pag,.k-cont{ display:none !important }
  /* No papel nao ha para onde voltar. A trilha fica: ela diz de que tela
   * saiu a folha que esta na mao de quem le. */
  .k-voltar{ display:none !important }
  .tabela-wrap,.tabela-wrap.rolo{ max-height:none !important; overflow:visible !important }
  table.dados thead th{ position:static !important; box-shadow:none !important }
  /* O papel repete a tela: linha tirada pela busca nao volta na impressao. */
  table.dados.larga tbody tr.k-par td{ background:transparent !important }
  .badge::before{ display:none !important }
  .stat{ min-height:0 !important }

  /* O EDITOR IMPRESSO E SO A FOLHA. Barra de ferramentas, regua, mesa
     cinza e barra de estado sao moveis do escritorio, e movel nao vai para
     a impressora. */
  .ed-barra,.ed-regua,.ed-status{ display:none !important }
  .ed-caixa{ border:0 !important }
  /* Expandido ou nao, no papel e a mesma folha: `position:fixed` imprime
     so a primeira pagina, e o dono imprimiria um documento de doze folhas
     e receberia uma. */
  .ed-caixa.ed-cheia{ position:static !important; z-index:auto !important }
  .ed-mesa{ background:transparent !important; padding:0 !important;
            max-height:none !important; overflow:visible !important }
  .ed-folha{ width:auto !important; min-height:0 !important; border:0 !important;
             box-shadow:none !important; padding:0 !important }
  /* A margem do papel passa a ser a da IMPRESSORA, e nao a desenhada na
     tela: somar as duas daria 5 cm de branco de cada lado. */
  @page{ margin:2.5cm }
  /* A tinta e a cor do documento sai como esta, e nao como o navegador
     acha que economiza: quem confere na tela assina o que sai na mao. */
  .ed-folha,.ed-folha *{ -webkit-print-color-adjust:exact; print-color-adjust:exact }
  /* A quebra que o RH marcou no editor quebra a folha aqui tambem. Sem
     isto, o botao mudava a tela e nao mudava o papel. */
  .ed-folha hr.ed-quebra{ break-after:page; page-break-after:always;
                          border:0 !important; margin:0 !important; height:0 }
  .ed-folha hr.ed-quebra::after{ display:none !important }
}

/* =====================================================================
 *  MINHA CONTA: o nome no alto a direita vira o botao (ADR-028).
 *
 *  So o necessario: o botao nao pode parecer botao cinza do navegador, e no
 *  celular, onde a moldura esconde o nome, o avatar volta a aparecer - sem
 *  isso a Minha Conta ficaria sem porta justamente no aparelho de quem
 *  trabalha em campo.
 * ===================================================================== */
.user-chip .conta-chip{ display:flex; align-items:center; gap:10px; min-width:0;
  background:none; border:0; padding:4px 6px; border-radius:8px; cursor:pointer;
  color:inherit; font:inherit; text-align:left }
.user-chip .conta-chip:hover{ background:var(--krh-hover) }
.user-chip .conta-chip:focus-visible{ outline:2px solid var(--krh-foco); outline-offset:2px }
@media(max-width:860px){ .topbar .user-chip .conta-chip .avatar{ display:grid } }
@media(max-width:560px){ .user-chip .conta-chip .conta-chip-txt{ display:none } }