/* =====================================================================
 *  KRIGGING - SO O QUE O PRODUTO ACRESCENTA
 *
 *  Ordem de carga (declarada no index.html):
 *    1. krigs-tokens.css       tokens oficiais da plataforma  (nao alterar)
 *    2. krigs-componentes.css  componentes oficiais           (nao alterar)
 *    3. krigging-tokens.css      tokens de navegacao do produto
 *    4. krigging.css             ESTE arquivo: a moldura
 *
 *  Aqui vive somente o que o Design System nao entrega pronto: a moldura
 *  (menu lateral, barra superior, area de conteudo), a tela de entrada e
 *  a lampada do Assistente. Botao, campo, tabela, cartao, indicador,
 *  selo, alerta, estado vazio, aviso temporario, modal, responsividade e
 *  impressao ja vem dos componentes oficiais - reescrever qualquer um
 *  deles aqui seria a segunda implementacao do mesmo problema.
 *
 *  NENHUMA COR LITERAL. Toda cor vem de token (Documento 04 secao 2.1).
 * ===================================================================== */

/* =====================================================================
 *  TELA DE ENTRADA - componente oficial, referencia KEPI (secao 21).
 *  Os valores sao os do Documento 05 secao 3.1: cartao de 380px, raio de
 *  14px, respiro de 34/30 e a sombra propria da entrada. Nao ha
 *  alternador de tema aqui: a entrada e sempre o gradiente.
 * ===================================================================== */
#tela-entrada{
  position:fixed; inset:0; z-index:100;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  background:var(--grad-entrada);
  padding:20px; overflow-y:auto;
}
/* Sessao guardada: a entrada nao chega a ser pintada (ver o script do
 * <head>). Sem isto, quem ja esta dentro ve a tela de entrada piscar a
 * cada F5 - um round-trip inteiro depois. */
html.com-sessao #tela-entrada{ display:none }

.entrada-cartao{
  background:var(--branco); color:var(--texto);
  border-radius:14px; box-shadow:var(--entrada-sombra);
  padding:34px 30px; width:100%; max-width:380px;
}
.entrada-marca{ text-align:center; margin-bottom:22px }
.entrada-marca .placa{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:84px; max-width:290px; min-height:66px; padding:16px 24px;
  border-radius:18px; background:var(--grad-placa);
}
/* A marca sobre fundo escuro e SEMPRE a versao branca
 * (`logo-krigs-login.png`). Nunca `logo-krigs-white.png`: esse arquivo e
 * byte a byte igual ao navy, e a placa azul-marinho sobre azul-marinho
 * faz a marca desaparecer. Documento 04 secao 6.1. */
.entrada-marca .placa img{ max-width:100%; max-height:56px; width:auto; display:block }
.entrada-marca h1{ font-size:20px; margin:14px 0 2px }
.entrada-marca p{ color:var(--cinza); margin:0; font-size:14px }
/* Erro da entrada vai NO CARTAO, nao em aviso temporario: a tela de
 * entrada nao tem a area de avisos montada (Documento 05 secao 3.1). */
.entrada-erro{ color:var(--vermelho); font-size:13px; margin-top:10px; min-height:18px }
.entrada-links{ text-align:center; margin:16px 0 0; font-size:13px }
.entrada-links a[aria-disabled="true"]{ color:var(--cinza); pointer-events:none; text-decoration:none }
.entrada-rodape{ text-align:center; color:var(--entrada-rodape); font-size:12px; margin:0 }
/* A mensagem boa (codigo reenviado, senha redefinida) nao sai em vermelho:
 * vermelho diz "deu errado" a quem acabou de acertar. */
.entrada-erro.ok{ color:var(--verde) }
.entrada-ajuda{ text-align:center; color:var(--cinza); font-size:12px; line-height:1.45; margin:12px 0 0 }
/* O codigo se le em blocos: letra grande, espacada e centralizada, como
 * aparece no e-mail. No celular o teclado numerico abre sozinho
 * (inputmode=numeric). */
.entrada-codigo{ text-align:center; font-size:22px !important; letter-spacing:8px;
  font-variant-numeric:tabular-nums }

/* =====================================================================
 *  MOLDURA - menu lateral, barra superior e conteudo.
 *
 *  Componente OFICIAL da plataforma: a referencia de layout e o KFROTA
 *  (Constituicao secao 20). Muda o que a secao 20 autoriza - quais
 *  modulos existem, quem ve cada um e em que categoria ficam. Estrutura,
 *  largura, espacamento, tipografia, cor, selecao, hover, rolagem,
 *  responsividade e comportamento de gaveta sao COPIA, nao aproximacao.
 * ===================================================================== */
#app{
  display:grid;
  /* MINMAX(0,1FR) E NAO 1FR, e a diferenca nao e cosmetica. Coluna `1fr`
     tem largura minima automatica: ela CRESCE com o conteudo em vez de
     apertar. Bastava a barra superior somar titulo, avatar e dois botoes
     acima da largura do celular para a PAGINA INTEIRA passar a rolar de
     lado - inclusive as telas que cabiam sozinhas. Com minmax(0,1fr) a
     coluna para na largura da janela e quem aperta e o conteudo. */
  grid-template-columns:var(--nav-w) minmax(0,1fr);
  grid-template-rows:60px 1fr;
  height:100vh;
}
#app[hidden]{ display:none }

.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 .marca{
  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 .marca img{ width:100%; max-width:176px; height:auto; display:block }
.sidebar .marca .empresa{
  display:block; font-size:11px; font-weight:700; letter-spacing:2px;
  color:var(--nav-suave); text-transform:uppercase; padding-left:2px;
}
.sidebar .marca .empresa:empty{ display:none }

.nav-item{
  display:flex; align-items:center; gap:11px;
  padding:10px 12px; border-radius:10px;
  color:var(--nav-texto); font-weight:500; font-size:14px;
  margin-bottom:3px; cursor:pointer; transition:.12s;
  background:none; border:0; width:100%; text-align:left;
  font-family:inherit;
}
.nav-item .ic{ width:18px; height:18px; display:grid; place-items:center; opacity:.9; flex:none }
.nav-item:hover{ background:var(--nav-hover); color:var(--branco); text-decoration:none }
.nav-item.ativo{
  background:var(--azul); color:var(--branco);
  box-shadow:0 4px 12px var(--nav-sombra-ativo);
}
/* Categoria e SO um titulo: nao abre, nao fecha e nao esconde nada. */
.nav-sep{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.7px;
  color:var(--nav-rotulo); padding:14px 12px 6px;
}
.sidebar .rodape{
  margin-top:auto; font-size:10.5px; color:var(--nav-rotulo);
  padding:12px 8px 4px; border-top:1px solid var(--nav-linha);
}
.sidebar .rodape b{ color:var(--nav-suave); letter-spacing:.4px }

.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);
}
.topbar h2{ font-size:17px; font-weight:700 }
.topbar .direita{ display:flex; align-items:center; gap:14px }

.empresa-switch{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--cinza) }
.empresa-switch select{
  padding:6px 9px; border:1px solid var(--linha); border-radius:var(--raio-sm);
  font-family:inherit; font-size:13px; background:var(--branco); color:var(--texto);
}

/* Cabecalho do usuario (`user-chip`): avatar, nome e - obrigatorio - o
 * E-MAIL da conta em uso. Responde a pergunta "com qual conta eu estou?",
 * comum em quem administra varias empresas (Documento 05 secao 3.4). */
.user-chip{ display:flex; align-items:center; gap:10px }
.user-chip .avatar{
  width:34px; height:34px; border-radius:50%;
  background:var(--azul-900); color:var(--branco);
  display:grid; place-items:center; font-weight:700; font-size:13px;
}
.user-chip .quem{ line-height:1.2; min-width:0 }
.user-chip .nome{ font-weight:600; font-size:13px }
.user-chip .email{
  font-size:11px; color:var(--cinza);
  max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.btn-icone{
  background:var(--branco); color:var(--texto);
  border:1px solid var(--linha); border-radius:var(--raio-sm);
  padding:7px 9px; cursor:pointer; display:inline-flex; align-items:center;
  /* Alvo de toque minimo de 40x40 no celular (Documento 04 secao 12). */
  min-width:40px; min-height:36px; justify-content:center;
}
.btn-icone:hover{ background:var(--azul-claro) }

/* A area de conteudo.
 *
 * O `width:100%` NAO e redundante, e a falta dele foi um defeito real
 * visto no navegador: `.conteudo` dos componentes oficiais traz
 * `max-width:1100px; margin:0 auto`, e margem automatica num ITEM DE
 * GRADE nao centraliza, ela encolhe o item para a largura do conteudo.
 * O painel abria com os indicadores empilhados numa coluna de 240px, no
 * meio da tela. Com a largura explicita, a margem automatica volta a
 * fazer o que se espera dela: centralizar dentro do limite de 1100px.
 *
 * E o motivo de nao consertar isso no arquivo oficial: ele e copia da
 * plataforma e nao se altera. O ajuste pertence a quem monta a moldura. */
#conteudo{ grid-column:2; overflow-y:auto; width:100%; position:relative }
/* O `position:relative` segura dentro da area de rolagem o que e posicionado em absoluto (o rotulo
 * so de leitor de tela, `.sr-apenas`). Sem ele, um rotulo desses la embaixo da lista esticava o
 * DOCUMENTO: em Acessorios aparecia uma segunda barra de rolagem, na borda da janela (visto em 12/10/2026). */

/* TODA TELA NA LARGURA CHEIA, IGUAL AO KEPI E AO KCORTE (pedido do dono,
 * 12/10/2026: "as telas preenchidas acompanham o tamanho do PC; la ela fica
 * com espacos vazios"). O KEPI nao limita o `.conteudo`: so a margem. O
 * limite de 1.100 px dos componentes oficiais deixava duas faixas vazias dos
 * lados em toda tela que nao era o Painel ou a Oficina. E a MESMA regra do
 * KCORTE (kcorte.css, "toda tela na largura cheia"). A Oficina do Plano tem a margem dela
 * (oficina.css). No celular manda a margem dos componentes oficiais. */
@media (min-width:861px){
  #conteudo{ max-width:none; padding:22px 26px }
}

/* COLISAO DE CLASSE nos componentes oficiais, corrigida aqui.
 *
 * O arquivo oficial usa `.num` para duas coisas diferentes: a coluna
 * NUMERICA de tabela, que e alinhada a direita, e o NUMERO do indicador
 * do painel, que nao tem alinhamento declarado no Documento 04. As duas
 * regras casam no mesmo elemento, e o numero do indicador saia colado na
 * direita do cartao, longe do rotulo dele. Foi visto no navegador, nao
 * deduzido.
 *
 * O arquivo oficial nao se altera, entao o desempate mora aqui. Esta
 * divergencia vale para TODO produto que usar os dois componentes na
 * mesma tela: registrada no TODO para subir ao dono da plataforma. */
.stat .num{ text-align:left }

/* Cabecalho de pagina: titulo e subtitulo a esquerda, UM botao primario
 * a direita (Documento 05 secao 3.6). */
.pagina-cab{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:14px; flex-wrap:wrap; margin-bottom:18px;
}
.pagina-cab .acoes{ display:flex; gap:10px; flex-wrap:wrap }
/* VOLTAR (11/10/2026): nas telas de segundo nivel, a esquerda do titulo e
   alinhado com ele. O mesmo botao, do mesmo tamanho, em toda tela, inclusive
   na barra da Oficina. A seta e a do conjunto oficial, espelhada: o conjunto
   so tem a da direita (o KFROTA faz igual, com `gira180`). */
.pagina-titulo{ display:flex; align-items:flex-start; gap:14px; min-width:0 }
.btn-voltar{ flex:none; height:32px; padding:0 12px 0 8px; gap:4px; margin-top:1px }
.gira180{ display:inline-flex; transform:rotate(180deg) }

/* O subtitulo do cabecalho ja tem o respiro do proprio cabecalho embaixo: os
   20 px do `.sub` oficial somados aos 18 px daqui abriam um buraco antes do
   primeiro bloco de toda tela. */
.pagina-cab .sub{ margin:0 }
.filtros{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px }
/* O rotulo pertence ao campo que vem depois dele: perto dele, e longe do
   campo anterior. Com o mesmo espaco dos dois lados o olho nao sabia de qual
   lista era "Obra". */
.filtros label{ font-size:13px; font-weight:600; color:var(--cinza); margin:0 -4px 0 8px }
.filtros label:first-child,.filtros .sr-apenas + input{ margin-left:0 }
.filtros input,.filtros select{
  padding:9px 11px; border:1px solid var(--linha); border-radius:var(--raio-sm);
  font-family:inherit; font-size:14px; background:var(--branco); color:var(--texto);
}
.filtros input{ min-width:240px }
.filtros select{ max-width:100% }
/* Legenda e campo juntos: a quebra de linha nunca separa os dois (tela de Auditoria, igual ao KCORTE). */
.filtros .filtro-par{ display:inline-flex; gap:10px; align-items:center }
.filtros .filtro-par label{ margin-left:0 }
.filtros input[type="date"]{ min-width:0 }
.aviso-limite{ font-size:12px; color:var(--cinza-2); margin-top:8px }

/* Bloco de duas colunas que vira uma no notebook (escada oficial). */
.cards-2{ display:grid; grid-template-columns:1.5fr 1fr; gap:16px }
.painel-dupla{ grid-template-columns:1fr 1fr; align-items:start }

/* =====================================================================
 *  ASSISTENTE KRIGS - lampada flutuante e painel lateral.
 *  Constituicao secao 22: uma lampada no canto inferior direito, dentro
 *  do sistema, NUNCA na tela de entrada, e nenhuma entrada de menu.
 * ===================================================================== */
.ak-botao{
  position:fixed; right:20px; bottom:20px; z-index:90;
  width:52px; height:52px; border-radius:50%;
  background:var(--azul-2); color:var(--branco);
  border:0; cursor:pointer; display:grid; place-items:center;
  box-shadow:var(--sombra-lg);
}
.ak-botao:hover{ background:var(--azul) }
.ak-botao[hidden]{ display:none }

.ak-painel{
  position:fixed; top:0; right:0; bottom:0; z-index:95;
  width:420px; max-width:100vw;
  background:var(--branco); color:var(--texto);
  border-left:1px solid var(--linha); box-shadow:var(--sombra-lg);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .22s ease;
}
.ak-painel.aberto{ transform:none }
.ak-painel[hidden]{ display:none }
.ak-painel .ak-cab{
  background:var(--grad-institucional); color:var(--branco);
  padding:16px 18px; display:flex; align-items:center; justify-content:space-between;
}
.ak-painel .ak-cab b{ font-size:15px }
.ak-painel .ak-cab button{ background:none; border:0; color:var(--branco); cursor:pointer }
.ak-painel .ak-busca{ padding:14px 18px; border-bottom:1px solid var(--linha) }
.ak-painel .ak-busca input{
  width:100%; padding:10px 12px; border:1px solid var(--linha);
  border-radius:var(--raio-sm); font-family:inherit; font-size:15px;
  background:var(--branco); color:var(--texto);
}
/* Rolagem CONTIDA: nao "vaza" para a pagina (Documento 05 secao 3.14). */
.ak-painel .ak-corpo{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:14px 18px }
.ak-artigo{ border-bottom:1px solid var(--linha); padding:12px 0 }
.ak-artigo:last-child{ border-bottom:0 }
.ak-artigo h4{ font-size:14px; margin-bottom:4px }
.ak-artigo .disciplina{ font-size:11px; color:var(--cinza-2); text-transform:uppercase }
.ak-artigo ol{ margin:8px 0 0 18px; font-size:13.5px; color:var(--cinza) }
.ak-artigo ol li{ margin-bottom:4px }

/* A classe que TRAVA a rolagem do fundo com o painel aberto. Ela existe
 * na folha de estilo de proposito: um sistema da plataforma aplicou esta
 * classe pelo JavaScript durante duas versoes sem que houvesse regra
 * nenhuma para ela, e o efeito simplesmente nao acontecia. Classe escrita
 * e contrato, e um teste de convencao confere que a regra existe. */
body.sem-rolagem{ overflow:hidden }

/* Cobertura da gaveta no celular. */
.cobertura{
  position:fixed; inset:0; z-index:40;
  background:var(--cobertura); border:0; padding:0;
}
.cobertura[hidden]{ display:none }

/* Botao de gaveta: some no desktop. */
.hamburguer{ display:none }

/* =====================================================================
 *  RESPONSIVIDADE - a escada oficial. O produto so trata os degraus da
 *  MOLDURA; tabela, formulario, campo e indicador ja sao tratados pelos
 *  componentes oficiais.
 * ===================================================================== */
@media (max-width:1100px){
  .cards-2{ grid-template-columns:1fr }
}

@media (max-width:860px){
  #app{ grid-template-columns:minmax(0,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;
  }
  .sidebar.aberta{ transform:none; box-shadow:var(--sombra-lg) }
  .topbar,#conteudo{ grid-column:1 }
  .hamburguer{ display:inline-flex }
  .user-chip .quem{ display:none }
  .ak-painel{ width:100vw }
}

@media (max-width:560px){
  .topbar{ padding:0 12px; gap:8px }
  /* O TITULO ENCOLHE, e nao empurra. Num celular de 360 px o titulo mais o
     avatar mais os dois botoes davam 380 px de barra numa tela de 359, e a
     PAGINA INTEIRA passava a rolar de lado - inclusive as telas que ja
     estavam certas. Quem cede e o titulo, que a pessoa acabou de ler no
     menu, e nao a acao. */
  .topbar h2{
    font-size:15px; min-width:0; flex:1 1 auto;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .topbar .direita{ flex:0 0 auto; gap:8px }
  /* No celular o botao vira so "Conta". Sao 50 px que voltam para o titulo
     da tela, que e a informacao que diz onde a pessoa esta. */
  .so-largo{ display:none }
  .topbar h2{ min-width:8ch }
  .filtros input{ min-width:0; width:100% }
  /* A lista com nome comprido (fabricante do catalogo) cabe na tela: saia 90 px para fora do cartao. */
  .filtros select{ min-width:0; width:100%; max-width:100% }
  .filtros .filtro-par{ display:flex; flex:1 1 100%; min-width:0 }
  .filtros .filtro-par label{ flex:none; min-width:64px }
}

/* =====================================================================
 *  PAINEL EM BLOCOS (11/10/2026, pedido do dono: "esta uma bagunca e tem
 *  borda e area vazia; o do KFROTA e bonito, bem dividido em blocos").
 *
 *  O desenho e o do painel executivo do KFROTA: a faixa de numeros no alto,
 *  numa linha so, e cada assunto num cartao proprio, com titulo, filtros e
 *  conteudo dentro dele. A largura e a da tela, como no KFROTA e nos Planos
 *  de Corte: o limite de 1.100 px de leitura deixava duas faixas vazias de
 *  400 px dos lados num monitor comum.
 *
 *  Os indicadores continuam o componente oficial `.stat`, com a barra
 *  lateral que o Documento 04 manda: so a grade em volta deles mudou.
 * ===================================================================== */
.painel-numeros{ grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:18px }
.painel-seis{ grid-template-columns:repeat(6,minmax(0,1fr)) }
/* O numero do indicador no tamanho do KFROTA (`.kpi .valor`, 27 px): os 30
   px oficiais com seis cartoes lado a lado empurravam o "kg" para baixo. */
.painel-bloco .stat .num,.painel-numeros .stat .num{ font-size:27px; line-height:1.15 }
.painel-bloco .stat .lbl{ font-size:12px; margin-top:4px }
.painel-numeros .stat .lbl{ margin-top:4px }

/* COLISAO DE CLASSE nos componentes oficiais, a segunda (a primeira e o
   `.num`, mais acima). O indicador de natureza "alerta" e `.stat.alerta`, e
   `.alerta` sozinho e a CAIXA DE AVISO: ela somava borda de 1 px na cor do
   texto, outro respiro e 16 px de margem embaixo, e os cartoes de sucata e
   de arco saiam mais baixos e contornados de laranja, fora da linha dos
   vizinhos. Foi visto no navegador. O desempate devolve o cartao. */
.stat.alerta{
  padding:16px 18px; margin:0; font-weight:inherit;
  border:1px solid var(--linha); border-left:4px solid var(--laranja);
  border-radius:var(--raio); background:var(--branco);
}

.painel-bloco{ padding:0; margin-bottom:18px; overflow:hidden }
.painel-bloco > .cab{ padding:16px 20px; margin:0 }
.painel-bloco > .cab h2{ margin:0; font-size:17px }
.painel-bloco-sub{ margin:2px 0 0; color:var(--cinza); font-size:13px }
.painel-bloco > .painel-filtros,.painel-bloco > #painel-chapa,.painel-bloco > #exec-corpo{ padding:0 20px }
.painel-bloco > #painel-chapa,.painel-bloco > #exec-corpo{ padding-bottom:20px }

/* Filtro com o rotulo EM CIMA do campo, numa grade que se ajusta a largura:
   o botao de atualizar fica no fim da linha, alinhado pelo pe dos campos. */
.painel-filtros{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:10px 12px; align-items:end;
  padding-top:14px !important; padding-bottom:16px !important; margin:0 0 16px;
  background:var(--bg); border-bottom:1px solid var(--linha);
}
.painel-filtros .filtro{ display:flex; flex-direction:column; gap:5px; min-width:0 }
.painel-filtros .filtro label{ margin:0; font-size:12px }
.painel-filtros select,.painel-filtros input{ width:100%; min-width:0 }
.painel-filtros .filtro-acao .btn{ justify-content:center; height:39px }

.painel-sub{ font-size:14px; margin:20px 0 8px }
.painel-nota{ font-size:12.5px; color:var(--cinza); margin:10px 0 14px; line-height:1.5 }
.painel-bloco .sub{ margin:4px 0 0 }

@media (max-width:1300px){
  .painel-seis{ grid-template-columns:repeat(3,minmax(0,1fr)) }
}
@media (max-width:860px){
  .painel-numeros{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:560px){
  .painel-seis{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .painel-bloco > .cab,.painel-bloco > .painel-filtros,.painel-bloco > #painel-chapa,.painel-bloco > #exec-corpo{ padding-left:14px; padding-right:14px }
}

/* O DONO DA PLATAFORMA NO CELULAR (12/10/2026, achado na prova de 390 px da Oficina). So ele tem o
   seletor de empresa na barra superior, e com o seletor a barra somava 661 px numa tela de 390: a
   pagina inteira rolava de lado. O seletor desce para uma segunda linha, na largura toda, e a
   faixa da barra cresce para caber. Quem nao tem seletor continua com a barra de uma linha. */
@media (max-width:560px){
  :has(> .topbar #empresa-switch:not([hidden])){ grid-template-rows:auto 1fr }
  .topbar:has(#empresa-switch:not([hidden])){ flex-wrap:wrap; row-gap:6px; padding-top:8px; padding-bottom:8px; min-height:60px }
  .topbar:has(#empresa-switch:not([hidden])) .direita{ display:contents }
  .topbar:has(#empresa-switch:not([hidden])) .empresa-switch{ order:10; flex:1 1 100%; min-width:0 }
  .topbar:has(#empresa-switch:not([hidden])) .empresa-switch select{ flex:1 1 auto; min-width:0; width:100% }
}

/* Botao de acao que apaga, na versao discreta da linha de tabela: o vermelho
   cheio do .btn.perigo pesa demais repetido em cada linha. VALORES DO KFROTA
   (`.btn.ghost.perigo`, 11/10/2026): texto vermelho sobre a borda NEUTRA da
   tabela, e o vermelho so aparece inteiro sob o cursor ou o foco. E o padrao
   de Excluir de todo o KRIGGING: texto, e nunca o icone de lixeira. */
.btn.sec.perigo{ background:var(--branco); color:var(--vermelho); border-color:var(--linha) }
.btn.sec.perigo:hover,.btn.sec.perigo:focus-visible{
  background:var(--vermelho-claro); border-color:var(--vermelho);
}

/* AUDITORIA (12/10/2026): a pagina de 50 linhas, o detalhe e o antes e depois. */
.au-paginas{ justify-content:center; margin-top:14px }
.au-titulo{ margin:16px 0 8px; font-size:14px }
.au-vazio{ color:var(--cinza-2); font-style:italic }
/* Quem, acao e origem numa linha so no computador: o que estica e o detalhe. No celular a tabela vira cartao e quebra a vontade. */
@media (min-width:821px){ td.au-curta,th.au-curta{ white-space:nowrap } }
.au-detalhe dd{ overflow-wrap:anywhere }
.au-mudancas td{ overflow-wrap:anywhere; vertical-align:top }
.au-mudancas td:first-child{ white-space:nowrap; overflow-wrap:normal }

/* Lista curta dentro de uma janela de confirmacao (o que sai junto). */
.lista-simples{ margin:6px 0 12px 18px; padding:0 }
.lista-simples li{ margin:3px 0 }

/* =====================================================================
 *  IMPRESSAO - a moldura some; o conteudo vai ao papel.
 *  O resto do bloco de impressao esta em krigs-componentes.css.
 * ===================================================================== */
@media print{
  #app{ display:block; height:auto }
  .sidebar,.topbar,.ak-botao,.ak-painel,.cobertura,#tela-entrada,
  .pagina-cab .acoes,.filtros,.hamburguer,.empresa-switch,.aviso-limite{
    display:none !important;
  }
  #conteudo{ overflow:visible }
}

/* ---- Cadastros e acessos (padrao do KFROTA, 11/10/2026) ----
   A segunda linha de uma celula (CNPJ embaixo da razao social, telefone e
   e-mail embaixo do contato) e o titulo da equipe em Acessos. */
.cel-sub{ display:block; font-size:12px; color:var(--cinza); margin-top:2px }
.titulo-bloco{ margin:4px 0 10px }
/* A busca dos cadastros cabe a frase inteira de exemplo no computador. */
@media (min-width:561px){ .filtros input[type="search"]{ min-width:320px } }
/* A frase que abre um formulario de acesso respira antes dos campos. */
.modal .corpo > p.dica:first-child{ display:block; margin:0 0 14px }

/* Linha de botoes em VAGAS FIXAS (Empresas, documentos, acessorios): cada
   botao na sua coluna, nenhum cai de linha. */
.acoes-linha{ display:grid; gap:6px; justify-content:end; align-items:center }
.acoes-linha .btn{ width:100%; height:32px; justify-content:center; white-space:nowrap; padding:0 8px }
.acoes-empresa{ grid-template-columns:72px 100px 96px }
td.sem-quebra{ white-space:nowrap }
@media (max-width:820px){ .acoes-empresa{ grid-template-columns:repeat(3,minmax(0,1fr)); width:100% } }

/* MAQUINAS E CONSUMIVEIS (12/10/2026): um cartao por maquina da empresa. */
.maquinas-grade{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px }
.maquina-cartao{ display:flex; flex-direction:column; gap:12px }
.maquina-cartao.parada{ opacity:.75 }
.maquina-topo{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px }
.maquina-topo h3{ margin:0; font-size:16px; font-weight:700 }
.maquina-modelo{ margin:2px 0 0; color:var(--cinza); font-size:13px }
.maquina-dados{ display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; margin:0 }
.maquina-dados.largo{ grid-template-columns:repeat(auto-fill,minmax(180px,1fr)) }
.maquina-dados dt{ font-size:12px; color:var(--cinza) }
.maquina-dados dd{ margin:2px 0 0; font-weight:600 }
.maquina-dados .inteiro{ grid-column:1 / -1 }
.maquina-dados .inteiro dd{ font-weight:400; white-space:pre-wrap }
.maquina-cartao .btn{ align-self:flex-start; margin-top:auto }
.painel-bloco > .maquina-dados{ padding:4px 20px 20px }
.acoes-linha.acoes-maquina{ grid-auto-flow:column; grid-auto-columns:76px }
@media (max-width: 720px){ .painel-bloco > .maquina-dados{ padding-left:14px; padding-right:14px } }

/* Campo escondido fica escondido: o `display` do componente `.campo` vencia
   o atributo `hidden`. */
.campo[hidden]{ display:none }

/* =====================================================================
 *  RIGGING - o que as telas do dominio acrescentam aos componentes.
 *  Nada aqui muda a moldura: sao detalhes de celula e de bloco.
 * ===================================================================== */
/* A revisao ao lado do numero do plano, na lista. */
.cel-rev{ font-size:12px; color:var(--cinza); white-space:nowrap }
/* AS ACOES DE CADA PLANO (12/10/2026): Abrir, Editar, Memorial e Excluir, em
   vagas fixas como as outras listas. A vaga de quem nao exclui aquele plano
   fica vazia, para a mesma acao cair sempre na mesma coluna. No celular os
   botoes dividem a largura do cartao e nao geram rolagem lateral. */
.acoes-plano.vagas-4{ grid-template-columns:repeat(4,78px) }
.acoes-plano.vagas-2{ grid-template-columns:repeat(2,84px) }
.acoes-plano.vagas-1{ grid-template-columns:78px }
.acoes-plano.vagas-memorial{ grid-template-columns:128px }
.acoes-plano .vaga-vazia{ display:block }
@media (max-width:820px){
  .acoes-plano{ width:100% }
  .acoes-plano.vagas-4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
  .acoes-plano.vagas-2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .acoes-plano.vagas-1,.acoes-plano.vagas-memorial{ grid-template-columns:minmax(0,1fr) }
  .acoes-plano .btn{ padding:0 4px; font-size:12.5px; min-width:0 }
}
/* O numero do plano e o caminho para a tela do plano: botao com cara de texto. */
.link-plano{
  appearance:none; background:none; border:0; padding:0; margin:0; font:inherit; color:inherit;
  cursor:pointer; text-align:inherit; border-radius:4px;
}
.link-plano:hover b{ text-decoration:underline }
.link-plano:focus-visible{ outline:2px solid var(--azul); outline-offset:2px }
/* A confirmacao de exclusao diz o que sai: numero, revisao, cliente e situacao. */
.pl-excluir-dados{ margin:10px 0 14px; padding:12px 14px; border:1px solid var(--linha); border-radius:10px; background:var(--bg) }
/* O selo azul: plano executado. As cores sao os tokens oficiais. */
.badge.azul{ background:var(--azul-claro); color:var(--azul) }
/* Os titulos de secao dentro do formulario do plano. */
#np-form h2{ font-size:17px; margin:0 0 12px }
/* O resultado do motor de calculo, enquanto a tela dele nao chega. */
.plano-resultado{
  margin:0; padding:4px 20px 20px; font-size:12.5px; line-height:1.5;
  white-space:pre-wrap; overflow-wrap:anywhere; color:var(--texto);
}
/* Tabela de carga: cada tabela do modelo abre e fecha no lugar. */
.tabela-carga-lista{ padding:0 20px 20px; display:flex; flex-direction:column; gap:8px }
.tabela-carga-bloco{ border:1px solid var(--linha); border-radius:var(--raio-sm); background:var(--branco) }
.tabela-carga-bloco > summary{ cursor:pointer; padding:10px 14px; list-style-position:inside }
.tabela-carga-bloco > summary .cel-sub{ margin-left:18px }
.tabela-carga-bloco[open] > summary{ border-bottom:1px solid var(--linha) }
.tabela-carga-bloco .tabela-wrap{ border:0; border-radius:0; margin:0 }
.tabela-de-carga th,.tabela-de-carga td{ white-space:nowrap; font-variant-numeric:tabular-nums }
.tabela-carga-pendencias{ margin:0; padding:0 20px 20px 40px }
.tabela-carga-pendencias li{ margin:4px 0 }
@media (max-width:720px){
  .tabela-carga-lista{ padding-left:14px; padding-right:14px }
  .plano-resultado{ padding-left:14px; padding-right:14px }
}

/* =====================================================================
 * TITULO DAS TELAS (12/10/2026, pedido do dono: "os titulos estao sem graca").
 * O cabecalho de toda tela vira uma FAIXA: superficie propria, fio azul a
 * esquerda, titulo maior e mais pesado, acoes centradas na altura. A barra
 * de cima deixa de repetir o titulo em letra grande: vira o caminho
 * ("KRIGGING / NORMAS"), pequeno e discreto. So token de cor.
 * ===================================================================== */
.pagina-cab{
  position:relative; align-items:center;
  background:linear-gradient(90deg, var(--azul-claro) 0%, var(--branco) 42%);
  border:1px solid var(--linha); border-radius:var(--raio); box-shadow:var(--sombra);
  padding:16px 20px 16px 26px; margin-bottom:18px; overflow:hidden;
}
.pagina-cab::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:6px;
  background:linear-gradient(180deg, var(--azul-2), var(--azul));
}
.pagina-cab .pagina-titulo{ align-items:center }
.pagina-cab h1{ font-size:27px; font-weight:800; letter-spacing:-.015em; line-height:1.15; margin:0 0 3px; color:var(--azul) }
.pagina-cab .sub{ font-size:14px; color:var(--cinza) }
.pagina-cab .acoes{ align-items:center }
.topbar #titulo-tela{
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--cinza);
}
.topbar #titulo-tela::before{ content:"KRIGGING  /  "; color:var(--cinza-2); font-weight:600; white-space:pre }
@media (max-width:820px){
  .pagina-cab{ padding:13px 14px 13px 20px }
  .pagina-cab h1{ font-size:22px }
  .topbar #titulo-tela::before{ content:none }
}
@media print{
  .pagina-cab{ background:none; border:0; box-shadow:none; padding:0 }
  .pagina-cab::before{ content:none }
}
:root[data-theme="dark"] .pagina-cab{ background:linear-gradient(90deg, var(--azul-900) 0%, var(--branco) 42%) }
:root[data-theme="dark"] .pagina-cab h1{ color:var(--texto) }

/* =====================================================================
 * LISTAS EM CARTAO (12/10/2026, pedido do dono: "parece planilha do Excel").
 * No PC, cada linha de lista vira um cartao solto: sem grade, sem moldura
 * em volta da tabela, cabecalho pequeno e discreto, fio azul a esquerda e
 * realce ao passar o mouse. Vale para toda lista da casca. As TABELAS DE
 * CARGA continuam em grade: la o numero em linha e coluna e o proprio dado.
 * No celular a casca ja faz cartoes; na impressao vale a tabela de relatorio.
 * ===================================================================== */
@media screen and (min-width:821px){
  .tabela-wrap{ border:0; background:transparent; box-shadow:none; border-radius:0 }
  .tabela-wrap{ overflow-y:hidden; padding:0 2px 2px }
  table.dados{ border-collapse:separate; border-spacing:0 8px; margin:-4px 0 0 }
  table.dados thead th{
    background:transparent; border:0; padding-top:4px; padding-bottom:0;
    font-size:11px; font-weight:700; letter-spacing:.09em; color:var(--cinza-2);
  }
  table.dados tbody td{
    background:var(--branco); border:0; border-top:1px solid var(--linha); border-bottom:1px solid var(--linha);
    padding-top:14px; padding-bottom:14px; transition:background .12s, border-color .12s;
  }
  table.dados tbody td:first-child{
    border-left:4px solid var(--azul-2); border-radius:var(--raio) 0 0 var(--raio); padding-left:16px;
    font-weight:700;
  }
  table.dados tbody td:last-child{ border-right:1px solid var(--linha); border-radius:0 var(--raio) var(--raio) 0; padding-right:14px }
  table.dados tbody td:only-child{ border-radius:var(--raio); font-weight:400; font-size:14px }
  table.dados tbody tr{ filter:none }
  table.dados tbody tr:hover td{ background:var(--azul-claro); border-top-color:var(--azul-2); border-bottom-color:var(--azul-2) }
  table.dados tbody tr:hover td:last-child{ border-right-color:var(--azul-2) }
  table.dados tr:last-child td{ border-bottom:1px solid var(--linha) }

  /* Tabela de carga: grade de numeros, como no manual do fabricante. */
  .tabela-carga-bloco table.dados{ border-collapse:collapse; margin:0 }
  .tabela-carga-bloco table.dados thead th{ background:var(--bg); border-bottom:1px solid var(--linha); padding-bottom:8px; letter-spacing:0; font-size:12px }
  .tabela-carga-bloco table.dados tbody td,.tabela-carga-bloco table.dados tbody td:first-child,.tabela-carga-bloco table.dados tbody td:last-child{
    border:0; border-bottom:1px solid var(--linha); border-radius:0; padding-top:8px; padding-bottom:8px; font-size:14px;
  }
  .tabela-carga-bloco table.dados tbody tr{ filter:none }
}
:root[data-theme="dark"] table.dados tbody tr:hover td{ background:var(--azul-900) }

/* =====================================================================
 * ALTURA UNICA DOS CAMPOS (12/10/2026, pedido do dono: "uns tem linha larga,
 * outros nao"). Em toda tela e em toda janela: campo de digitar e lista de
 * escolha com 40 px, botao com 40 px, botao pequeno de linha com 32 px.
 * Ficam de fora o que nao e linha de preencher (caixa de marcar, arquivo,
 * texto longo, lista aberta), a grade do editor de tabela de carga e o
 * painel da Oficina, que e compacto por inteiro (32 px, todos iguais).
 * ===================================================================== */
@media screen{
  #conteudo :is(input,select):where(:not([type=checkbox],[type=radio],[type=file],[type=range],[type=color],[type=hidden],[size],[multiple])):where(:not(.ofp-palco *,.ofp-barra *,.gr-ed-grade *)),
  dialog.modal :is(input,select):where(:not([type=checkbox],[type=radio],[type=file],[type=range],[type=color],[type=hidden],[size],[multiple])):where(:not(.gr-ed-grade *)){
    height:40px !important; box-sizing:border-box; padding-top:0; padding-bottom:0;
  }
  #conteudo .btn:where(:not(.peq,.bloco,.btn-voltar)):where(:not(.ofp-palco *,.ofp-barra *)),
  dialog.modal .btn:where(:not(.peq,.bloco)){
    height:40px !important; box-sizing:border-box; padding-top:0; padding-bottom:0; justify-content:center;
  }
  #conteudo .btn.peq:where(:not(.ofp-palco *,.ofp-barra *)),
  dialog.modal .btn.peq{
    height:32px !important; box-sizing:border-box; padding-top:0; padding-bottom:0;
  }
}
@media screen{ .ofp-palco .btn,.ofp-barra .btn{ min-height:32px; box-sizing:border-box } }

/* =====================================================================
 * ACESSORIOS POR NOME (12/10/2026, pedido do dono): cada nome de peca
 * (Anelao, Manilha, Cinta) e um cartao que abre; por dentro, as medidas.
 * ===================================================================== */
.ac-grupo{ margin:0 0 10px }
.ac-grupo > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px;
  background:var(--branco); border:1px solid var(--linha); border-left:5px solid var(--azul-2);
  border-radius:var(--raio); box-shadow:var(--sombra); padding:12px 16px;
}
.ac-grupo > summary::-webkit-details-marker{ display:none }
.ac-grupo > summary:hover{ background:var(--azul-claro) }
.ac-grupo > summary:focus-visible{ outline:2px solid var(--azul-2); outline-offset:2px }
.ac-inicial{
  flex:none; width:40px; height:40px; border-radius:var(--raio-sm); display:grid; place-items:center;
  background:var(--azul-2); color:var(--branco); font-weight:800; font-size:18px;
}
.ac-nome{ font-size:17px; font-weight:800; color:var(--texto); min-width:0 }
.ac-pastilhas{ display:flex; flex-wrap:wrap; gap:6px; margin-left:auto; align-items:center }
.ac-pastilha{
  font-size:12px; font-weight:600; color:var(--cinza); background:var(--bg); border:1px solid var(--linha);
  border-radius:var(--raio-pill); padding:3px 10px; white-space:nowrap;
}
.ac-seta{ flex:none; width:9px; height:9px; border-right:2px solid var(--cinza); border-bottom:2px solid var(--cinza); transform:rotate(45deg); transition:transform .15s; margin:0 4px 4px 6px }
.ac-grupo[open] > summary .ac-seta{ transform:rotate(-135deg); margin-bottom:-4px }
.ac-corpo{ padding:8px 0 6px 22px; border-left:2px solid var(--linha); margin:0 0 0 24px }
.ac-obs{ font-style:italic; overflow-wrap:anywhere }
.ac-vazio{ background:var(--branco); border:1px dashed var(--linha); border-radius:var(--raio); padding:22px; text-align:center; color:var(--cinza-2) }
:root[data-theme="dark"] .ac-grupo > summary:hover{ background:var(--azul-900) }
@media (max-width:820px){
  .ac-grupo > summary{ flex-wrap:wrap; gap:10px }
  .ac-pastilhas{ margin-left:0; width:100% }
  .ac-corpo{ padding-left:0; margin-left:0; border-left:0 }
}
@media print{
  .ac-grupo > summary{ border:0; box-shadow:none; padding:6px 0 2px; border-bottom:1px solid var(--cinza-2); border-radius:0 }
  .ac-inicial,.ac-seta{ display:none }
  .ac-corpo{ padding:0; margin:0; border:0 }
}

/* =====================================================================
 * MODELO UNICO DE CARTAO (12/10/2026, pedido do dono: "os cards de cada
 * modulo devem ser padronizados"). Um desenho so para todo cartao da casca:
 *   - superficie branca, borda fina, FIO AZUL DE 4 px A ESQUERDA, canto de
 *     10 px, a mesma sombra; ao passar o mouse a borda fica azul;
 *   - quadrado da inicial: 44 px, fundo azul claro, letra azul;
 *   - nome: 16 px, peso 800;
 *   - pastilha de contagem: azul clara, letra azul, 12 px.
 * Vale para a linha de lista, o cartao de cliente e de obra, o nome de
 * acessorio, o cartao de maquina e o bloco de regra. No Painel os numeros
 * mantem a cor do significado (verde, laranja) no mesmo fio de 4 px.
 * ===================================================================== */
#conteudo .co-cartao,
#conteudo .ac-grupo > summary,
#conteudo .maquina-cartao{
  background:var(--branco); border:1px solid var(--linha); border-left:4px solid var(--azul-2);
  border-radius:var(--raio); box-shadow:var(--sombra); transition:border-color .12s, box-shadow .12s, background .12s;
}
#conteudo .co-cartao:hover,
#conteudo .ac-grupo > summary:hover,
#conteudo .maquina-cartao:hover{
  border-top-color:var(--azul-2); border-right-color:var(--azul-2); border-bottom-color:var(--azul-2);
}
#conteudo .co-cartao.inativo{ border-left-color:var(--cinza-2) }
#conteudo .stat{ border-left-width:4px; border-radius:var(--raio); box-shadow:var(--sombra) }

/* o quadrado da inicial */
#conteudo .co-avatar,
#conteudo .ac-inicial{
  flex:none; width:44px; height:44px; border-radius:var(--raio-sm); display:inline-flex; align-items:center; justify-content:center;
  background:var(--azul-claro); color:var(--azul); font-size:16px; font-weight:800; letter-spacing:.02em;
}
/* o nome */
#conteudo .co-nome,
#conteudo .ac-nome{ font-size:16px; font-weight:800; line-height:1.25; color:var(--texto) }
/* a pastilha */
#conteudo .co-pastilha,
#conteudo .ac-pastilha{
  display:inline-block; padding:3px 10px; border:0; border-radius:var(--raio-pill); white-space:nowrap;
  font-size:12px; font-weight:700; background:var(--azul-claro); color:var(--azul);
}
#conteudo .co-pastilha.zero{ background:var(--bg); color:var(--cinza-2) }
/* a mesma almofada por dentro */
#conteudo .ac-grupo > summary{ padding:12px 16px; gap:14px }
#conteudo .co-cab{ padding:14px 16px 12px; gap:14px }

/* cartoes de cliente da mesma linha com a mesma altura (com um aberto, cada um volta ao seu tamanho) */
#conteudo .co-grade:not(:has(.co-cartao.aberto)){ align-items:stretch }
#conteudo .co-cartao .co-pe{ margin-top:auto }

/* o bloco de cada regra: mesmo cartao, com o fio cinza no padrao e azul quando a empresa alterou */
#conteudo .gr-regra{
  background:var(--branco); border:1px solid var(--linha); border-left:4px solid var(--cinza-2);
  border-radius:var(--raio); padding:12px 14px;
}
#conteudo .gr-regra.alterada{ border-left-color:var(--azul-2) }
#conteudo .gr-regras-grade{ gap:12px 16px }

/* =====================================================================
 * LINHAS PADRONIZADAS (12/10/2026, pedido do dono: "em todos os modulos
 * padronizar as linhas, eu gosto de tudo alinhado"). No PC, toda linha de
 * lista tem a MESMA ALTURA (72 px), o conteudo fica no meio, o texto de
 * apoio ocupa uma linha so (o resto aparece ao abrir) e os botoes ficam
 * SEMPRE encostados na borda direita, com a mesma altura. A grade de
 * numeros da tabela de carga fica de fora.
 * ===================================================================== */
@media screen and (min-width:821px){
  table.dados tbody td{ height:72px; box-sizing:border-box; padding-top:8px; padding-bottom:8px; vertical-align:middle; line-height:1.35 }
  table.dados tbody td .cel-sub,
  table.dados tbody td > small,
  table.dados tbody td > p,
  table.dados tbody td > div > p{
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; line-clamp:1; overflow:hidden; margin:2px 0 0;
  }
  table.dados tbody td > b,
  table.dados tbody td > div > b{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden }
  /* a coluna dos botoes: estreita, na borda direita */
  table.dados tbody td:last-child:has(.btn),
  table.dados td.acoes-col{ width:1%; white-space:nowrap; text-align:right }
  table.dados tbody td:last-child:has(.btn) > *,
  table.dados td.acoes-col > *{ margin-left:auto; justify-content:end }
  table.dados td .acoes-linha,table.dados td .nm-botoes{ display:inline-flex; flex-wrap:nowrap; gap:6px; vertical-align:middle }
  table.dados td .acoes-linha .btn{ width:auto; min-width:76px }

  .tabela-carga-bloco table.dados tbody td{ height:auto; line-height:inherit }
}
@media screen and (min-width:821px){ #nm-lista td.nm-titulo b{ -webkit-line-clamp:1; line-clamp:1 } #nm-lista table.dados th.acoes-col{ width:7% } }

/* =====================================================================
 * PAINEL, A VITRINE DO SISTEMA (12/10/2026, pedido do dono: "o Painel tem
 * de ser a cereja do bolo"). Faixa de abertura escura com a marca do
 * sistema, o retrato em tres quadros (rosca, barras de utilizacao, saude
 * da frota) e os numeros grandes. So token de cor.
 * ===================================================================== */
body[data-tela="painel"] .pagina-cab{
  background:var(--grad-entrada); border:0; padding:26px 28px 26px 34px; box-shadow:var(--sombra-lg);
}
body[data-tela="painel"] .pagina-cab::before{ width:8px; background:var(--laranja) }
body[data-tela="painel"] .pagina-cab::after{
  content:""; position:absolute; right:-70px; top:-110px; width:340px; height:340px; border-radius:50%;
  border:46px solid var(--branco); opacity:.06; pointer-events:none;
}
body[data-tela="painel"] .pagina-cab h1{ color:var(--branco); font-size:34px; letter-spacing:-.02em }
body[data-tela="painel"] .pagina-cab .sub{ color:var(--branco); opacity:.82; font-size:15px }
body[data-tela="painel"] .pagina-cab .acoes{ position:relative; z-index:1 }
body[data-tela="painel"] #conteudo .pagina-cab .btn{
  background:var(--branco); color:var(--azul); height:46px !important; padding-left:22px; padding-right:22px; font-size:15px; font-weight:800;
}
body[data-tela="painel"] #conteudo .pagina-cab .btn:hover{ background:var(--azul-claro) }

/* ---- o retrato: tres quadros ---- */
.pn-retrato{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr); gap:14px; margin-bottom:14px }
.pn-quadro{ padding:18px 20px; margin:0; border-left:4px solid var(--azul-2); display:flex; flex-direction:column; min-width:0 }
.pn-quadro h2{ margin:0 0 2px; font-size:16px; font-weight:800; color:var(--azul) }
.pn-sub{ margin:0 0 10px; font-size:12.5px; color:var(--cinza) }
.pn-vazio{ margin:auto 0; padding:14px 0; font-size:13px; color:var(--cinza-2); font-style:italic }

.pn-rosca-linha{ display:flex; align-items:center; gap:20px; margin-top:10px; flex:1 }
.pn-rosca{ position:relative; flex:none; width:148px; height:148px }
.pn-rosca svg{ width:100%; height:100%; transform:rotate(-90deg) }
.pn-arco{ fill:none; stroke-width:13 }
.pn-arco.trilho{ stroke:var(--linha) }
.pn-arco.rascunho{ stroke:var(--cinza-2) }
.pn-arco.emitido{ stroke:var(--verde) }
.pn-arco.executado{ stroke:var(--azul-2) }
.pn-rosca-meio{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.1 }
.pn-rosca-meio b{ font-size:34px; font-weight:800; color:var(--texto) }
.pn-rosca-meio span{ font-size:12px; color:var(--cinza); text-transform:uppercase; letter-spacing:.08em }
.pn-legenda{ list-style:none; margin:0; padding:0; flex:1; min-width:0; display:grid; gap:9px }
.pn-legenda li{ display:grid; grid-template-columns:12px minmax(0,1fr) auto 40px; align-items:center; gap:8px; font-size:13.5px }
.pn-legenda b{ font-weight:800; font-variant-numeric:tabular-nums }
.pn-legenda em{ font-style:normal; font-size:12px; color:var(--cinza); text-align:right; font-variant-numeric:tabular-nums }
.pn-ponto{ width:12px; height:12px; border-radius:50% }
.pn-ponto.rascunho{ background:var(--cinza-2) }
.pn-ponto.emitido{ background:var(--verde) }
.pn-ponto.executado{ background:var(--azul-2) }

.pn-barras,.pn-saude{ list-style:none; margin:0; padding:0; display:grid; gap:11px; flex:1; align-content:center }
.pn-barras li{ display:grid; grid-template-columns:118px minmax(0,1fr) 58px; align-items:center; gap:10px; font-size:13px }
.pn-barra-nome{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.pn-barra{ display:block; width:100%; height:12px; border-radius:6px; overflow:hidden }
.pn-trilho{ fill:var(--linha) }
.pn-cheio.normal{ fill:var(--verde) }
.pn-cheio.critico{ fill:var(--laranja) }
.pn-cheio.proibido{ fill:var(--vermelho) }
.pn-marca{ fill:var(--texto) }
.pn-barra-valor{ text-align:right; font-weight:800; font-variant-numeric:tabular-nums }
.pn-barra-valor.normal{ color:var(--verde) }
.pn-barra-valor.critico{ color:var(--laranja) }
.pn-barra-valor.proibido{ color:var(--vermelho) }
.pn-saude{ margin-top:12px }
.pn-saude-topo{ display:flex; justify-content:space-between; gap:8px; font-size:13px; margin-bottom:5px }
.pn-saude-topo b{ font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap }
.pn-saude-pe{ margin-top:14px; padding-top:12px; border-top:1px dashed var(--linha) }

/* ---- os oito numeros ---- */
body[data-tela="painel"] #conteudo .painel-numeros{ gap:14px; margin-bottom:14px }
body[data-tela="painel"] #conteudo .painel-numeros .stat{
  position:relative; overflow:hidden; padding:18px 20px; transition:transform .12s, box-shadow .12s;
}
body[data-tela="painel"] #conteudo .painel-numeros .stat:hover{ transform:translateY(-2px); box-shadow:var(--sombra-lg) }
body[data-tela="painel"] #conteudo .painel-numeros .stat::after{
  content:""; position:absolute; right:-26px; top:-26px; width:92px; height:92px; border-radius:50%; background:var(--verde-claro);
}
body[data-tela="painel"] #conteudo .painel-numeros .stat.alerta::after{ background:var(--amarelo-claro) }
body[data-tela="painel"] #conteudo .painel-numeros .stat .num{ position:relative; z-index:1; font-size:38px; font-weight:800; line-height:1.05 }
body[data-tela="painel"] #conteudo .painel-numeros .stat .lbl{ position:relative; z-index:1; margin-top:6px; font-size:12px; font-weight:700; letter-spacing:.06em }
body[data-tela="painel"] .painel-bloco .cab h2{ color:var(--azul); font-weight:800 }

@media (max-width:1250px){ .pn-retrato{ grid-template-columns:1fr 1fr } #pn-saude{ grid-column:1 / -1 } }
@media (max-width:820px){
  .pn-retrato{ grid-template-columns:1fr }
  #pn-saude{ grid-column:auto }
  .pn-rosca{ width:120px; height:120px }
  body[data-tela="painel"] .pagina-cab h1{ font-size:26px }
  .pn-barras li{ grid-template-columns:92px minmax(0,1fr) 52px }
}
@media print{
  body[data-tela="painel"] .pagina-cab{ background:none }
  body[data-tela="painel"] .pagina-cab h1,body[data-tela="painel"] .pagina-cab .sub{ color:var(--texto); opacity:1 }
}

/* MINHA CONTA, na anatomia do KFROTA. O resumo do e-mail de envio: itens lado
 * a lado, rotulo pequeno em maiusculas em cima e o valor embaixo. */
.resumo-envio{ display:flex; gap:18px; flex-wrap:wrap; margin:0 0 14px; font-size:13px }
.resumo-envio .rotulo{ display:block; color:var(--cinza); font-size:11px; text-transform:uppercase }
/* Nota que fecha um cartao, abaixo dos botoes. */
.nota-do-cartao{ display:block; margin:10px 0 0; font-size:12px; color:var(--cinza) }
/* Campo travado: le-se, nao se edita. */
.campo input:disabled{ background:var(--bg); color:var(--cinza) }
/* ---- Acessos (as duas telas), no desenho do KFROTA e do KEPI ----------
   Cabecalho da equipe: o titulo de um lado e "3 de 3 acesso(s)" do outro. */
.acs-cab{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:4px 0 10px }
.acs-cab .titulo-bloco{ margin:0 }
/* Os botoes da linha em colunas de largura FIXA (valores do KFROTA): Editar,
   Redefinir senha, Desativar e, na tela do dono, Excluir caem sempre um
   embaixo do outro de linha para linha, com ou sem o quarto botao. */
.acoes-linha.acs-acoes{ grid-template-columns:76px 132px 96px }
.acoes-linha.acs-acoes.quatro{ grid-template-columns:76px 132px 96px 76px }
/* O nivel em cartoes de escolha: o nome do nivel e o que ele alcanca. */
.acs-niveis{ display:grid; gap:8px }
.campo .acs-nivel{ display:flex; align-items:flex-start; gap:10px; cursor:pointer; padding:11px 13px;
  border:1px solid var(--linha); border-radius:9px; background:var(--branco); font-weight:400 }
.campo .acs-nivel:hover{ border-color:var(--azul); background:var(--azul-claro) }
.campo .acs-nivel.on{ border-color:var(--azul); box-shadow:inset 0 0 0 1px var(--azul); background:var(--azul-claro) }
.campo .acs-nivel input{ width:auto; min-width:0; height:auto; padding:0; margin:3px 0 0; flex:none; border:0; box-shadow:none }
.acs-nivel b{ display:block; font-size:13.5px; color:var(--texto) }
.acs-nivel small{ display:block; font-size:12px; color:var(--cinza); line-height:1.4; margin-top:2px }
@media (max-width:820px){
  .acoes-linha.acs-acoes,.acoes-linha.acs-acoes.quatro{ grid-template-columns:repeat(2,minmax(0,1fr)); justify-content:stretch; width:100% }
}