/* =====================================================================
 *  K-RH 7.0 - MOLDURA DA PLATAFORMA + DOMINIO DO K-RH
 *
 *  Carregado DEPOIS de krigs-tokens.css e krigs-componentes.css.
 *  Aqui entra so o que os dois arquivos oficiais nao resolvem: menu lateral,
 *  barra superior, gaveta do celular, tela de entrada e Assistente.
 *  Nada de cartao, botao, campo, tabela, selo ou aviso: quem resolve isso e a
 *  Biblioteca. Segunda implementacao do mesmo problema e defeito, nao escolha.
 *
 *  Origem dos valores (spec-moldura-krigs.md): moldura = KFROTA (STANDARD
 *  §20/§21); entrada = KEPI. Foram copiados, nao aproximados: se o KFROTA ou o
 *  KEPI mudarem, este arquivo muda junto.
 *
 *  COR: hexadecimal so existe em krigs-tokens.css. Onde o valor da fonte tem
 *  token oficial, esta escrito o token. Onde nao tem - quatro casos de sombra,
 *  veu e borda copiados byte a byte - esta em rgb()/rgba(), sinalizado com
 *  "sem token", porque inventar um token fora do arquivo oficial e pior.
 *  O branco puro de superficie escura vai como palavra-chave `white`: usar
 *  var(--branco) inverteria para escuro no tema escuro, sobre fundo escuro.
 * ===================================================================== */


/* ---------------------------------------------------------- layout ---- */
#app{display:grid;grid-template-columns:var(--nav-w) 1fr;grid-template-rows:var(--topo-h) 1fr;height:100vh}
.hidden{display:none !important}


/* --------------------------------------------------- menu lateral ---- */
.sidebar{grid-row:1/3;background:linear-gradient(180deg,var(--nav-fundo-1),var(--nav-fundo-2));
  color:var(--nav-texto);display:flex;flex-direction:column;padding:16px 12px;overflow-y:auto}

.sidebar .brand{display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:6px 8px 18px;border-bottom:1px solid var(--nav-linha);margin-bottom:12px}
.sidebar .brand .logo-krigs{width:100%;max-width:176px}
.sidebar .brand .brand-app{display:block;font-size:11px;font-weight:700;letter-spacing:2px;
  color:var(--nav-marca);text-transform:uppercase;padding-left:2px}
/* Sem empresa escolhida o rotulo some em vez de deixar uma faixa vazia. */
.sidebar .brand .brand-app:empty{display:none}

/* aspect-ratio declarado para a marca nao deformar enquanto a imagem carrega. */
.logo-krigs{display:block;flex:none;aspect-ratio:2.944;
  background:url(/assets/logo-krigs-navy.png?v=70) center/contain no-repeat}
/* A lateral tem fundo escuro nos dois temas, entao a marca e sempre a branca.
 * O arquivo branco do K-RH e o logo-krigs-login.png - o unico comprovadamente
 * transparente e claro; logo-krigs-white.png ja veio igual ao navy e sumiu. */
.sidebar .logo-krigs,
:root[data-theme="dark"] .logo-krigs{background-image:url(/assets/logo-krigs-login.png?v=70)}

/* Categoria e SO um titulo: nao abre, nao fecha, nao esconde nada. */
.nav-sep{font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--nav-apagado);
  padding:14px 12px 6px}

.nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;
  color:var(--nav-texto);font-weight:500;margin-bottom:3px;transition:.12s;cursor:pointer}
.nav-item:hover{background:var(--nav-hover);color:white;text-decoration:none}
.nav-item.ativo{background:var(--azul);color:white;box-shadow:var(--nav-ativo-s)}
.nav-item .ic{width:18px;height:18px;display:grid;place-items:center;opacity:.9;flex:none}

.sidebar .rodape{margin-top:auto;font-size:10.5px;color:var(--nav-apagado);padding:12px 8px 4px;
  border-top:1px solid var(--nav-linha)}


/* -------------------------------------------------- barra superior ---- */
.topbar{grid-column:2;display:flex;align-items:center;justify-content:space-between;
  background:var(--branco);border-bottom:1px solid var(--linha);padding:0 22px;box-shadow:var(--sombra)}
/* margin:0 anula a margem inferior do h2 oficial, que desalinharia o titulo
 * dentro de uma barra centralizada por flex. */
.topbar h2{font-size:17px;font-weight:700;margin:0}
.topbar .right{display:flex;align-items:center;gap:16px}

.user-chip{display:flex;align-items:center;gap:10px}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--azul-900);color:white;
  display:grid;place-items:center;font-weight:700;font-size:13px}
/* O e-mail da conta em uso e obrigatorio: responde "com qual conta eu estou?". */
.user-email{font-size:11px;color:var(--cinza);max-width:190px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* .ghost e .sm existem SO na moldura, porque a marcacao dela e copiada literal.
 * Em tela do K-RH usa-se .btn.sec e .btn.peq. O botao de tema nao tem desenho
 * proprio na fonte: recebe o mesmo, para nao nascer uma segunda medida. */
.btn.ghost,.btn-tema{background:var(--branco);color:var(--texto);border:1px solid var(--linha)}
.btn.ghost:hover,.btn-tema:hover{background:var(--bg)}
.btn.sm,.btn-tema{padding:7px 12px;font-size:13px;border-radius:8px}
.btn-tema{display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-weight:600;
  line-height:1;cursor:pointer}


/* ------------------------------------------------ seletor de empresa ---- */
/* Fica na barra superior, a esquerda do resto de .right. Quem nao e do nivel
 * mais alto nem chega a ve-lo: o JS aplica .hidden e nao consulta a lista. */
.empresa-switch{display:inline-flex;align-items:center;gap:7px;background:var(--krh-realce-fundo);
  border:1px solid var(--krh-realce-linha)}
.empresa-switch.hidden{display:none}
.empresa-switch .es-lbl{font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.4px;color:var(--azul)}
.empresa-switch select{border:none;background:transparent;font-size:13px;font-weight:600;
  color:var(--texto);max-width:200px;cursor:pointer;outline:none}


/* --------------------------------------------------------- conteudo ----
 * O arquivo oficial de componentes traz `.conteudo{max-width:1100px;margin:0 auto}`,
 * escrito para pagina de TEXTO, onde limitar a largura e o certo: linha de
 * leitura longa demais cansa a vista.
 *
 * O K-RH nao e pagina de texto. E tela de dado: tabela de sessenta pessoas,
 * quadro de obra, lista de vencimento. Ali o limite de 1100px joga fora meia
 * tela em monitor de 1920 - a tabela espremida de um lado e faixa vazia do
 * outro. Entao o conteudo ocupa a largura toda, e quem manda na largura e o
 * menu lateral, que e fixo.
 *
 * O `width:100%` tambem conserta o outro efeito: .conteudo e ITEM DE GRID, e
 * `margin:auto` dos dois lados encolhia o item ate o tamanho do conteudo em
 * vez de estica-lo na trilha - o painel abria com 419px numa trilha de 1459.
 *
 * O arquivo oficial nao e alterado: ele esta certo para o layout dele. */
.conteudo{grid-column:2;overflow-y:auto;padding:24px 28px;width:100%;max-width:none}

/* Link DENTRO de caixa de aviso herda a cor do aviso, e nao o azul geral
 * de link. O fundo do aviso inverte no tema escuro (vermelho escuro), mas
 * o azul do link nao invertia: azul escuro sobre vermelho escuro dava 2,78
 * de contraste, contra os 4,5 que a norma pede. E o pior lugar possivel
 * para texto ilegivel, porque e exatamente onde esta a pendencia do dia.
 * O sublinhado assume o papel que a cor fazia: continua sendo link. */
.alerta a{color:inherit;text-decoration:underline;text-underline-offset:2px;font-weight:600}
.alerta a:hover{text-decoration-thickness:2px}

/* Bloco de PROSA continua limitado, porque ali a regra da leitura vale:
 * texto explicativo, artigo do Assistente, aviso longo. Quem escreve tela
 * poe .leitura no paragrafo, e nao na pagina inteira. */
.leitura{max-width:78ch}


/* ============================ CELULAR - A GAVETA ======================
 * Escada oficial: 1100 / 860 / 820 / 560. Nenhum quinto degrau sem ADR.
 * ===================================================================== */
.hamburguer{display:none;font-size:18px;padding:6px 11px}
/* O veu e criado uma vez no boot e fecha a gaveta ao ser tocado. */
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:40}  /* veu sem token */
.sb-overlay.show{display:block}

@media(max-width:860px){
  #app{grid-template-columns:1fr}
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:min(82vw,var(--nav-w));z-index:50;
    transform:translateX(-100%);transition:transform .22s ease}
  /* O JS marca #app.gaveta-aberta. A regra antiga esperava .sidebar.aberta,
   * classe que ninguem punha: o menu do celular simplesmente nao abria, e
   * em obra o telefone e o computador. As duas formas ficam valendo para
   * nao quebrar quem ja chamava a outra. */
  #app.gaveta-aberta .sidebar,
  .sidebar.aberta{transform:none;box-shadow:var(--sombra-lg)}

  /* O veu nasce do proprio estado, sem elemento novo no corpo da pagina.
   * Fica ABAIXO da lateral (z 40 contra 50) e cobre o resto. */
  #app.gaveta-aberta::after{content:'';position:fixed;inset:0;z-index:40;
    background:rgba(15,23,42,.5)}   /* veu sem token */
  .topbar{grid-column:1;padding:0 12px}
  .topbar .right{gap:10px}
  .topbar h2{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:16px}
  .conteudo{grid-column:1;padding:14px}
  .hamburguer{display:inline-flex}
  .topbar .user-chip .avatar{display:none}
  .empresa-switch{padding:5px 9px;gap:5px}
  .empresa-switch .es-lbl{display:none}
  .empresa-switch select{max-width:140px}
}

@media(max-width:560px){
  .topbar{padding:0 10px}
  .topbar h2{font-size:15px}
  .topbar .right{gap:8px}
  .user-chip>div{display:none}
  .user-chip{gap:6px}
  .conteudo{padding:12px}
  .empresa-switch select{max-width:120px}
}

@media(max-width:380px){ .empresa-switch select{max-width:96px} }

/* Tela de campo: encarregado no canteiro e o proprio colaborador operam uma
 * tarefa so - admissao, entrega de documento, assinatura. Moldura fora do
 * caminho. A lampada segue escondida ate o dono decidir a D-02. */
.modo-operador .sidebar{display:none}
.modo-operador .topbar{display:none}
body.modo-operador .ak-botao,
body.modo-operador .ak-painel{display:none!important}


/* ========================== TELA DE ENTRADA ==========================
 * Referencia oficial: KEPI, copiado dentro de #tela-login para nao contaminar
 * o resto do sistema. Nao "aproximar" estes numeros: se o KEPI mudar, esta
 * secao muda junto.
 * ===================================================================== */

/* Sessao guardada -> o login nem chega a ser pintado (script do <head>). */
html.com-sessao #tela-login{display:none}

#tela-login{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;
  background:var(--grad-entrada);padding:20px;overflow-y:auto;
  font-family:var(--fonte);font-size:15px;line-height:1.45;color:var(--texto);

  /* O tema escuro nao se aplica a entrada. Como os neutros oficiais invertem
   * com data-theme, os valores claros sao fixados no escopo desta tela - de
   * outro modo o cartao ficaria branco com texto claro para quem usa o escuro. */
  --texto:  rgb(31,39,51);      /* = --texto claro   */
  --cinza:  rgb(91,100,112);    /* = --cinza claro   */
  --branco: white;
}

.login-card{background:var(--branco);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.25);
  padding:34px 30px;width:100%;max-width:380px;color:var(--texto)}          /* sombra sem token */
.login-card .campo{text-align:left}

.login-logo{text-align:center;margin-bottom:22px}
.login-logo .ico{display:inline-flex;align-items:center;justify-content:center;width:auto;
  min-width:84px;max-width:290px;height:auto;min-height:66px;padding:16px 24px;border-radius:18px;
  background:var(--grad-placa);color:white;font-weight:800;font-size:20px}
/* A marca branca sobre a placa azul; a escura sumiria no fundo. */
.login-logo .ico img{max-width:100%;max-height:56px;width:auto;object-fit:contain;display:block}
.login-logo h1{font-size:20px;margin:14px 0 2px}
.login-logo p{color:var(--cinza);margin:0;font-size:14px}

#tela-login .campo{display:flex;flex-direction:column;gap:5px;margin-bottom:2px}
/* Cor, tamanho e peso do rotulo ja vem de .campo label na Biblioteca, com o
 * mesmo valor: aqui so muda o que a entrada precisa a mais. */
#tela-login .campo label{display:block;margin-bottom:0}
/* A borda do campo tem o mesmo valor na Biblioteca e no KEPI: fica so la, para
 * a cor nao ser reescrita fora do arquivo de tokens. */
#tela-login .campo input{padding:10px 12px;border-radius:8px;
  font-size:15px;font-family:inherit;background:var(--branco);width:100%}
#tela-login .campo input:focus{outline:0;border-color:var(--azul-2);box-shadow:0 0 0 3px var(--azul-claro)}

#tela-login .btn{background:var(--azul-2);color:white;border:0;padding:10px 16px;border-radius:8px;
  font-size:14px;font-weight:600;line-height:1;display:inline-flex;align-items:center;gap:7px}
#tela-login .btn:hover{background:var(--azul)}
#tela-login .btn.bloco{width:100%;justify-content:center;padding:13px}

.erro-login{color:var(--vermelho);font-size:13px;margin-top:10px;min-height:18px}
/* O mesmo lugar serve para o recado que NAO e erro - pedido de recuperacao
 * aceito. Duas caixas para a mesma linha da tela seria desenho a mais. */
.erro-login.ok{color:var(--verde)}
.login-links{text-align:center;margin:16px 0 0;font-size:13px}
.login-links a{color:var(--azul-2);text-decoration:none}
.login-links a:hover{text-decoration:underline}
/* O rodape fica fora do cartao, sobre o gradiente. */
.login-rodape{text-align:center;color:rgba(255,255,255,.75);font-size:12px;margin:0}


/* ========================== ASSISTENTE KRIGS =========================
 * Lampada fixa no canto inferior direito. Nenhuma entrada de menu, em lugar
 * nenhum: a administracao dos artigos se alcanca so por URL.
 * ===================================================================== */
.ak-botao{position:fixed;right:20px;bottom:20px;z-index:2500;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;border:none;
  background:var(--azul-2);color:white;box-shadow:0 6px 20px rgba(13,71,161,.35);transition:.15s}
.ak-botao:hover{background:var(--azul);transform:translateY(-2px);box-shadow:0 10px 26px rgba(13,71,161,.45)}
.ak-botao:focus-visible{outline:3px solid var(--azul-claro);outline-offset:2px}

.ak-painel{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:100vw;z-index:2600;
  background:var(--branco);border-left:1px solid var(--linha);box-shadow:-12px 0 40px rgba(15,23,42,.18);
  display:flex;flex-direction:column;transform:translateX(105%);transition:transform .22s ease;visibility:hidden}
.ak-painel.on{transform:translateX(0);visibility:visible}
.ak-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 18px;
  background:var(--grad-institucional);color:white}
.ak-tit{font-size:16px;font-weight:700;letter-spacing:.3px}
.ak-sub{font-size:12px;color:rgb(205,217,247);margin-top:2px}          /* texto de apoio sem token */
.ak-fechar{background:rgba(255,255,255,.14);border:none;color:white;width:34px;height:34px;
  border-radius:9px;display:grid;place-items:center;cursor:pointer;flex:none}
.ak-busca{padding:12px 16px;border-bottom:1px solid var(--linha)}
.ak-busca input{width:100%;padding:11px 13px;border:1px solid var(--linha);border-radius:10px;
  font-size:14px;font-family:inherit;outline:none}
.ak-busca input:focus{border-color:var(--azul-2);box-shadow:0 0 0 3px var(--azul-claro)}
/* As duas travas de rolagem sao necessarias: sem overscroll-behavior o dedo
 * rola a pagina atras do painel no celular. Classe escrita e contrato. */
body.ak-aberto{overflow:hidden}
.ak-corpo{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:14px 16px 24px}

@media(max-width:820px){
  .ak-botao{right:14px;bottom:14px;width:48px;height:48px}
  .ak-painel{width:100vw;border-left:none}
  .ak-fechar{width:40px;height:40px}
  .ak-cab{padding:14px 16px}
}

@media print{ .ak-botao,.ak-painel{display:none!important} }

/* ========================== ABAS ==========================
 * Componente do K-RH, nao do arquivo oficial: a Biblioteca nao tem abas.
 * Usa so token - nenhum valor de cor literal.
 * ===================================================================== */
.abas{display:flex;gap:4px;border-bottom:1px solid var(--linha);flex-wrap:wrap}
.aba{background:none;border:none;border-bottom:2px solid transparent;padding:10px 14px;
  font:600 13px/1 var(--fonte);color:var(--cinza);cursor:pointer;transition:.12s;
  border-radius:var(--raio-sm) var(--raio-sm) 0 0}
.aba:hover{color:var(--texto);background:var(--azul-claro)}
.aba.on{color:var(--azul);border-bottom-color:var(--azul)}
.aba:focus-visible{outline:3px solid var(--azul-claro);outline-offset:2px}

/* Barra de acao acima de uma lista: busca a esquerda, botoes a direita. */
.barra-acao{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:16px}
.barra-acao .campo{margin-bottom:0}
.barra-acao .cresce{flex:1;min-width:220px}
.barra-acao .direita{margin-left:auto;display:flex;gap:8px}

/* Linha de tabela que abre alguma coisa. */
tr.clicavel{cursor:pointer}
tr.clicavel:hover{background:var(--azul-claro)}

/* Ficha: cabecalho da pessoa acima das abas. */
.ficha-topo{display:flex;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.ficha-topo .avatar-grande{width:56px;height:56px;border-radius:50%;background:var(--azul-900);
  color:var(--branco);display:grid;place-items:center;font-weight:700;font-size:20px;flex:none}
.ficha-topo h2{font-size:20px;margin:0}
.ficha-topo .sub{margin:2px 0 0}

/* Par rotulo/valor, para a ficha. */
/* QUALIFICADO COM `dl` DE PROPOSITO. `table.dados` e a classe OFICIAL de
 * tabela da plataforma (krigs-componentes.css). Escrever so `.dados` aqui
 * fazia `display:grid` cair em cima de TODA tabela do sistema: o thead
 * deixava de ser thead, as colunas do cabecalho desalinhavam do corpo, e a
 * lista inteira desmontava. Um seletor sem qualificador quebrou vinte e
 * cinco telas de uma vez. */
dl.dados{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px 20px}
dl.dados dt{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--cinza-2);margin-bottom:2px}
dl.dados dd{margin:0 0 10px;font-size:14px;color:var(--texto)}