/* Konvém — Sistema de Inteligência Integrada · CASCA (login, menu, início).
   Os tokens vivem em /tema.css (sistema "Noturno", escolhido em 18/08/2026):
   escuro para uso de madrugada, com a barra de menu grafite-azulada do Kronos e
   o verde-água marcando onde você está. IBM Plex Sans.
   Identidade oficial do Manual da Marca: vermelho #CF3328, que no escuro é
   servido clareado (--kv-marca) para não abafar. */

* { box-sizing: border-box; margin: 0; padding: 0; }
/* [hidden] TEM que vencer o display das telas (.login-fundo é grid, .sistema é flex).
   Sem isto, esconder a tela de login não a tirava da frente — ela continuava por
   cima do sistema logado, e o login parecia "não fazer nada". Bug de 17/08/2026. */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  font-family: var(--kv-fonte);
  font-size: var(--kv-t-corpo);
  line-height: 1.55;
  background: var(--kv-papel);
  color: var(--kv-tinta);
}
button { font: inherit; cursor: pointer; }
input { font: inherit; }
:focus-visible { outline: 2px solid var(--kv-marca); outline-offset: 2px; border-radius: 3px; }

/* ---------- marca ---------- */
.logo-konvem { display: block; width: 200px; max-width: 66%; height: auto; margin: 0 auto 7px; }
.logo-slogan {
  display: block; text-align: center; font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--kv-tinta-2); margin-bottom: 16px;
}
.menu-topo .logo-konvem { width: 100%; max-width: 168px; margin: 0; }

/* ---------- login ---------- */
.login-fundo {
  min-height: 100vh; display: grid; place-items: center; padding: 16px;
  background: var(--kv-papel);
}
.login-cartao {
  width: min(390px, 100%); background: var(--kv-card);
  border: 1px solid var(--kv-linha); border-radius: var(--kv-raio);
  padding: 36px 32px 30px; display: grid; gap: 15px;
}
.login-marca { text-align: center; margin-bottom: 6px; }
.login-marca h1 { font-size: var(--kv-t-titulo); font-weight: 600; letter-spacing: -.4px; }
.login-marca p { color: var(--kv-tinta-2); font-size: var(--kv-t-apoio); margin-top: 4px; }
.login-cartao label {
  display: grid; gap: 6px;
  font-size: var(--kv-t-rotulo); text-transform: uppercase; letter-spacing: .09em;
  font-weight: 600; color: var(--kv-tinta-2);
}
.login-cartao input {
  background: var(--kv-card); color: var(--kv-tinta);
  border: 1px solid var(--kv-linha-forte); border-radius: var(--kv-raio-p);
  padding: 10px 12px; outline: none; font-size: var(--kv-t-corpo);
  text-transform: none; letter-spacing: normal; transition: border-color .15s;
}
.login-cartao input:focus { border-color: var(--kv-marca); }
.botao-marca {
  background: var(--kv-marca-cheia); color: #fff; border: 1px solid var(--kv-marca-cheia);
  border-radius: var(--kv-raio-p); padding: 11px; font-weight: 600;
  font-size: var(--kv-t-corpo); margin-top: 6px; transition: background .15s;
}
.botao-marca:hover { background: var(--kv-marca-cheia-forte); border-color: var(--kv-marca-cheia-forte); }
.botao-marca:disabled { opacity: .55; cursor: wait; }
.erro {
  background: var(--kv-erro-suave); border: 1px solid #4a2420; color: var(--kv-erro);
  border-radius: var(--kv-raio-p); padding: 9px 12px; font-size: var(--kv-t-apoio);
}

/* ---------- casca ---------- */
.sistema { display: flex; height: 100vh; }
#menu {
  width: 216px; flex: none; background: var(--kv-menu-fundo);
  border-right: 1px solid var(--kv-menu-linha);
  display: flex; flex-direction: column; padding: 18px 12px 12px;
}
.menu-topo { display: flex; align-items: center; padding: 2px 8px 18px; }
/* A marca clicável: o alvo é o bloco inteiro, e o retorno visual é discreto —
   é um caminho de volta, não um botão de ação. */
.logo-link {
  display: block; width: 100%; border-radius: var(--kv-raio-p);
  padding: 4px 4px 3px; margin: -4px -4px -3px; transition: opacity .15s;
}
.logo-link:hover { opacity: .72; }
.logo-link:focus-visible { outline: 2px solid var(--kv-marca); outline-offset: 2px; }
#menu-modulos {
  flex: 1; overflow: auto; display: grid; gap: 1px; align-content: start;
  padding-top: 14px; border-top: 1px solid var(--kv-menu-linha);
}
#menu-modulos a {
  display: flex; gap: 10px; align-items: center; padding: 8px 10px;
  color: var(--kv-menu-tinta); text-decoration: none; border-radius: var(--kv-raio-p);
  font-size: 13.5px; font-weight: 500; line-height: 1.3;
  transition: background .15s, color .15s;
}
/* Rótulo do bloco: o menu tem doze itens, e o assunto guia o olho antes do nome.
   É texto, não botão — por isso não recebe hover nem foco. */
.menu-grupo {
  display: block; padding: 12px 10px 4px;
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; color: var(--kv-menu-fraco);
}
.menu-grupo:first-child { padding-top: 2px; }
#menu-modulos a:hover { background: var(--kv-menu-on); color: var(--kv-menu-ativo); }
/* Ativo: bloco discreto + trilho VERDE-ÁGUA (a barra do Kronos). O trilho é de
   navegação, e por isso não usa o vermelho: no escuro o vermelho precisa ficar
   guardado para significar perda e erro, que é onde ele tem de ser visto. */
#menu-modulos a.ativo {
  color: var(--kv-menu-ativo); font-weight: 600; background: var(--kv-menu-on);
  border-radius: 0 var(--kv-raio-p) var(--kv-raio-p) 0; position: relative;
}
#menu-modulos a.ativo::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
  background: var(--kv-nav); border-radius: 0 2px 2px 0;
  animation: kv-trilho 260ms var(--kv-curva);
}
@keyframes kv-trilho { from { transform: scaleY(0); } }
#menu-modulos a .icone {
  width: 18px; height: 18px; flex: none; font-size: 14px; opacity: .85;
  display: grid; place-items: center;
  transition: opacity var(--kv-rapido);
}
/* O desenho herda a cor do item, então acende junto com o trilho verde-água. */
#menu-modulos a .icone svg { width: 18px; height: 18px; display: block; }
#menu-modulos a.ativo .icone, #menu-modulos a:hover .icone { opacity: 1; }
/* O menu chega em cascata na primeira pintura: mostra a ordem dos blocos. */
#menu-modulos a { animation: kv-menu-entra 300ms var(--kv-curva) backwards; }
#menu-modulos a:nth-of-type(1) { animation-delay: 20ms; }
#menu-modulos a:nth-of-type(2) { animation-delay: 40ms; }
#menu-modulos a:nth-of-type(3) { animation-delay: 60ms; }
#menu-modulos a:nth-of-type(4) { animation-delay: 80ms; }
#menu-modulos a:nth-of-type(5) { animation-delay: 100ms; }
#menu-modulos a:nth-of-type(n+6) { animation-delay: 120ms; }
@keyframes kv-menu-entra { from { opacity: 0; transform: translateX(-6px); } }
.menu-sair {
  display: flex; gap: 10px; align-items: center; padding: 8px 10px; margin-top: 10px;
  background: none; border: 0; border-top: 1px solid var(--kv-menu-linha);
  padding-top: 14px; color: var(--kv-tinta-2); font-size: 13px; text-align: left;
}
.menu-sair:hover { color: var(--kv-marca); }
.menu-sair .icone { width: 18px; text-align: center; }

/* coluna direita: topo + conteúdo */
.coluna { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#topo {
  display: flex; align-items: center; gap: 14px; flex: none;
  padding: 12px 24px; background: var(--kv-card); border-bottom: 1px solid var(--kv-linha);
}
.busca {
  flex: 1; display: flex; align-items: center; gap: 9px; max-width: 420px;
  background: var(--kv-card); border: 1px solid var(--kv-linha-forte);
  border-radius: var(--kv-raio-p); padding: 8px 12px; transition: border-color .15s;
}
.busca { background: var(--kv-papel); }
.busca:focus-within { border-color: var(--kv-nav); box-shadow: 0 0 0 3px var(--kv-nav-suave); }
.busca span { color: var(--kv-tinta-3); font-size: 15px; }
.busca input { flex: 1; border: 0; outline: none; background: none; color: var(--kv-tinta); font-size: var(--kv-t-apoio); }
.busca input::placeholder { color: var(--kv-tinta-3); }
.topo-usuario { margin-left: auto; display: flex; align-items: center; gap: 9px; }

/* ---------- painel de status ----------
   Um chip do tamanho de uma pílula: ponto colorido + frase curta. A cor nunca
   fala sozinha — o texto sempre diz o que está acontecendo (é o que serve para
   quem enxerga pouco e para quem só bate o olho de longe). */
.status-caixa { position: relative; flex: none; }
.status-chip {
  display: flex; align-items: center; gap: 7px;
  background: var(--kv-card); border: 1px solid var(--kv-linha);
  border-radius: 999px; padding: 5px 11px 5px 9px;
  color: var(--kv-tinta-2); font-size: var(--kv-t-apoio); font-weight: 500;
  white-space: nowrap; transition: border-color .15s, color .15s;
}
.status-chip:hover { border-color: var(--kv-tinta-3); color: var(--kv-tinta); }
.status-ponto {
  width: 8px; height: 8px; flex: none; border-radius: 50%;
  background: var(--kv-tinta-3); transition: background .2s;
}
.status-chip.ok      .status-ponto { background: var(--kv-ok); }
.status-chip.falha   .status-ponto { background: var(--kv-erro); }
.status-chip.ok      { color: var(--kv-tinta-2); }
.status-chip.atencao { border-color: #4a3c14; }
.status-chip.falha   { border-color: #4a2420; color: var(--kv-erro); }

/* A gaveta ancora no chip. Cresce com o conteúdo até um teto e rola por dentro:
   com sete conexões e doze módulos, sem teto ela passaria da tela. */
.status-painel {
  position: absolute; top: calc(100% + 9px); left: 0; z-index: 70;
  width: 372px; max-height: min(78vh, 640px);
  display: flex; flex-direction: column;
  background: var(--kv-card); border: 1px solid var(--kv-linha-forte);
  border-radius: var(--kv-raio); box-shadow: var(--kv-sombra-flutuante);
}
.status-painel[hidden] { display: none; }
#topo { position: relative; z-index: 40; }   /* a gaveta passa por cima do iframe */
.status-lista { overflow: auto; padding: 6px 0; }
.status-secao {
  padding: 12px 15px 5px; font-size: var(--kv-t-rotulo); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--kv-tinta-3);
}
.status-grupo {
  padding: 9px 15px 3px; font-size: 10px; font-weight: 600;
  letter-spacing: .06em; color: var(--kv-tinta-3);
}
.status-item {
  display: grid; grid-template-columns: 8px 1fr; gap: 9px;
  padding: 7px 15px; width: 100%; text-align: left;
  background: none; border: 0; border-radius: 0; color: inherit; font: inherit;
}
.status-item > .status-ponto { margin-top: 6px; }
.status-item > .si-texto { display: grid; gap: 1px; min-width: 0; }
button.status-item { cursor: pointer; }
button.status-item:hover { background: var(--kv-papel-2); }
.status-item .si-nome {
  display: flex; align-items: baseline; gap: 0; flex-wrap: wrap;
  font-size: 13px; font-weight: 600; color: var(--kv-tinta); line-height: 1.35;
}
.status-item .si-marca {
  font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 1px 6px; border-radius: var(--kv-raio-selo); margin-left: 7px;
  background: var(--kv-papel-2); color: var(--kv-tinta-2); white-space: nowrap;
}
.status-item.ok      .si-marca { background: var(--kv-ok-suave);    color: var(--kv-ok); }
.status-item.atencao .si-marca { background: var(--kv-aviso-suave); color: var(--kv-aviso); }
.status-item.falha   .si-marca { background: var(--kv-erro-suave);  color: var(--kv-erro); }
.status-item.ok      > .status-ponto { background: var(--kv-ok); }
.status-item.falha   > .status-ponto { background: var(--kv-erro); }
/* A bolinha não é texto: pode (e deve) ser mais viva que a cor de leitura. O
   --kv-aviso é escuro de propósito, para ter contraste como TEXTO; num ponto de
   8px ele lê como marrom, e aviso que parece marrom não avisa. */
.status-chip.atencao .status-ponto,
.status-item.atencao > .status-ponto { background: var(--kv-aviso); }
.status-item .si-detalhe { display: block; font-size: var(--kv-t-apoio); color: var(--kv-tinta-2); line-height: 1.45; }
.status-item .si-dica {
  display: block; font-size: var(--kv-t-apoio); color: var(--kv-tinta); line-height: 1.45; margin-top: 5px;
  padding-left: 9px; border-left: 2px solid var(--kv-linha-forte);
}
/* O botão de resolver. Discreto de propósito: quem já vê a bolinha e lê o aviso
   não precisa de um botão gritando; ele é só o próximo passo, do tamanho de um
   selo, na mesma linha do problema. */
.si-acoes { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 7px; }
.si-botao {
  background: var(--kv-card); border: 1px solid var(--kv-linha-forte);
  border-radius: var(--kv-raio-p); padding: 3px 10px;
  font: inherit; font-size: var(--kv-t-apoio); font-weight: 600; line-height: 1.7;
  color: var(--kv-tinta); cursor: pointer; white-space: nowrap;
}
.si-botao:hover:not(:disabled) { background: var(--kv-papel-2); border-color: var(--kv-tinta-3); }
.si-botao:focus-visible { outline: 2px solid var(--kv-marca); outline-offset: 1px; }
.si-botao:disabled { color: var(--kv-tinta-3); cursor: wait; }
.si-botao.fantasma { border-color: var(--kv-linha); color: var(--kv-tinta-2); font-weight: 500; }
/* A resposta do botão fica ao lado dele, na própria linha do item. */
.si-resposta { font-size: var(--kv-t-apoio); color: var(--kv-tinta-2); }
.si-resposta.ruim { color: var(--kv-erro); }
.si-resposta:empty { display: none; }
/* Parte de baixo da gaveta: é só confirmação, então aperta o espaçamento. */
.status-item.compacta { padding: 5px 15px; }
.status-item.compacta > .status-ponto { margin-top: 5px; }

.status-rodape {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 15px; border-top: 1px solid var(--kv-linha); flex: none;
}
.status-rodape span { font-size: var(--kv-t-apoio); color: var(--kv-tinta-2); }
.status-rodape button {
  background: none; border: 1px solid var(--kv-linha-forte); border-radius: var(--kv-raio-p);
  padding: 5px 11px; font-size: var(--kv-t-apoio); font-weight: 600; color: var(--kv-tinta);
}
.status-rodape button:hover { background: var(--kv-papel-2); border-color: var(--kv-tinta-3); }
.status-rodape button:disabled { color: var(--kv-tinta-3); cursor: wait; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--kv-marca-suave); color: var(--kv-marca); font-weight: 600; font-size: 12px;
}
.topo-quem strong { display: block; font-size: 13px; font-weight: 600; }
.topo-quem small { color: var(--kv-tinta-2); font-size: 11.5px; }

#conteudo { flex: 1; display: flex; min-height: 0; background: var(--kv-papel); }
#quadro { flex: 1; width: 100%; border: 0; background: var(--kv-papel); }

/* ---------- início ---------- */
.inicio { flex: 1; overflow: auto; padding: var(--kv-pad-tela); }
.inicio-cumprimento { margin-bottom: 22px; animation: kv-sobe 380ms var(--kv-curva) backwards; }
.inicio-cumprimento h2 { font-size: var(--kv-t-titulo); font-weight: 600; letter-spacing: -.4px; }
.inicio-cumprimento p { color: var(--kv-tinta-2); margin-top: 3px; font-size: var(--kv-t-apoio); }
.inicio-grupo {
  font-size: var(--kv-t-rotulo); letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; color: var(--kv-tinta-3); margin: 22px 0 10px;
}
.inicio-grupo:first-of-type { margin-top: 0; }
.inicio-grade {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: 14px;
}
.inicio-grade a {
  background: var(--kv-card); border: 1px solid var(--kv-linha); border-radius: var(--kv-raio);
  padding: 18px 20px; text-decoration: none; color: var(--kv-tinta); display: grid; gap: 5px;
  transition: transform var(--kv-normal) var(--kv-curva), border-color var(--kv-normal), background var(--kv-normal);
  animation: kv-sobe var(--kv-entrada) var(--kv-curva) backwards;
  animation-delay: calc(var(--i, 0) * 35ms);
}
/* Sobe um fio de cabelo e ganha luz: o cartão responde sem saltar. */
.inicio-grade a:hover {
  border-color: var(--kv-linha-forte); background: var(--kv-card-2); transform: translateY(-2px);
}
.inicio-grade a:active { transform: translateY(0); }
.inicio-grade .icone { font-size: 19px; margin-bottom: 6px; opacity: .85; line-height: 0; }
.inicio-grade .icone svg { width: 21px; height: 21px; display: block; }
.inicio-grade strong { font-size: var(--kv-t-secao); font-weight: 600; }
.inicio-grade small { color: var(--kv-tinta-2); font-size: var(--kv-t-apoio); line-height: 1.45; }
.inicio-vazio { color: var(--kv-tinta-2); padding: 30px 2px; font-size: var(--kv-t-apoio); }

/* ---------- perguntar em português (I1) ----------
   Fica acima de tudo na tela de início porque é a primeira coisa que se quer fazer ao
   chegar: perguntar. O verde-água é de propósito — vermelho já significa "isto precisa
   de você" nos cartões de pendência, e a caixa de pergunta não é urgência, é conversa. */
.perg {
  background: var(--kv-card); border: 1px solid var(--kv-linha);
  border-radius: var(--kv-raio); padding: 16px 18px 14px; margin-bottom: 22px;
  animation: kv-sobe 420ms var(--kv-curva) backwards; animation-delay: 60ms;
  transition: border-color var(--kv-normal);
}
.perg:focus-within { border-color: var(--kv-linha-forte); }
.perg-linha { display: flex; align-items: center; gap: 10px; }
/* Rótulo só para leitor de tela: o campo tem placeholder, mas placeholder some ao
   digitar e não serve de nome acessível. */
.sr-so {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.perg-marca { color: var(--kv-nav); font-size: 15px; line-height: 1; flex: none; }
.perg-campo {
  flex: 1; min-width: 0; background: var(--kv-papel); color: var(--kv-tinta);
  border: 1px solid var(--kv-linha-forte); border-radius: var(--kv-raio-p);
  font: inherit; font-size: var(--kv-t-corpo); padding: 10px 13px; outline: none;
  transition: border-color var(--kv-rapido), box-shadow var(--kv-rapido);
}
.perg-campo::placeholder { color: var(--kv-tinta-3); }
.perg-campo:focus { border-color: var(--kv-nav); box-shadow: 0 0 0 3px var(--kv-nav-suave); }
.perg-enviar {
  flex: none; background: var(--kv-marca-cheia); color: #fff; border: 0;
  border-radius: var(--kv-raio-p); font: inherit; font-weight: 600; font-size: var(--kv-t-apoio);
  padding: 10px 18px; cursor: pointer; transition: background var(--kv-rapido);
}
.perg-enviar:hover { background: var(--kv-marca-cheia-forte); }
.perg-enviar:disabled { opacity: .55; cursor: default; }

/* Exemplos: existem para ensinar o formato da pergunta sem manual. */
.perg-exemplos { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.perg-exemplos button {
  background: none; border: 1px solid var(--kv-linha-forte); border-radius: 999px;
  color: var(--kv-tinta-2); font: inherit; font-size: var(--kv-t-apoio);
  padding: 4px 12px; cursor: pointer; transition: color var(--kv-rapido), border-color var(--kv-rapido);
}
.perg-exemplos button:hover { color: var(--kv-tinta); border-color: var(--kv-nav); }

.perg-resposta { margin-top: 15px; border-top: 1px solid var(--kv-linha); padding-top: 14px; }
.perg-frase { font-size: var(--kv-t-secao); line-height: 1.5; color: var(--kv-tinta); }
.perg-frase b { font-weight: 600; }

/* "Entendi assim": a leitura da pergunta em pastilhas. É o que deixa a pessoa perceber
   na hora que o sistema respondeu outra coisa, em vez de acreditar num número errado. */
.perg-li { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.perg-li span {
  font-size: var(--kv-t-rotulo); text-transform: uppercase; letter-spacing: .08em;
  color: var(--kv-tinta-3); border: 1px solid var(--kv-linha); border-radius: var(--kv-raio-selo);
  padding: 3px 8px;
}
.perg-li span.forte { color: var(--kv-nav); border-color: var(--kv-nav-suave); background: var(--kv-nav-suave); }

.perg-tabela { width: 100%; border-collapse: collapse; margin-top: 13px; }
.perg-tabela th {
  text-align: left; font-size: var(--kv-t-rotulo); text-transform: uppercase; letter-spacing: .09em;
  color: var(--kv-tinta-3); font-weight: 600; padding: 0 10px 7px 0; border-bottom: 1px solid var(--kv-linha);
}
.perg-tabela td {
  padding: 8px 10px 8px 0; border-bottom: 1px solid var(--kv-linha);
  font-size: var(--kv-t-tabela); color: var(--kv-tinta); vertical-align: top;
}
.perg-tabela tr:last-child td { border-bottom: 0; }
.perg-tabela .n { text-align: right; font-family: var(--kv-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.perg-tabela .pos { color: var(--kv-tinta-3); font-family: var(--kv-mono); width: 28px; }
.perg-tabela .onde { color: var(--kv-tinta-3); font-size: var(--kv-t-apoio); }
/* A linha é um produto: clicar abre as mesmas ações de qualquer lugar do sistema. */
.perg-tabela tr[data-kv-produto] { cursor: pointer; }
.perg-tabela tr[data-kv-produto]:hover td { background: var(--kv-card-2); }
.perg-rolar { overflow-x: auto; }

/* O que a resposta não pode esconder: buraco de importação, recorte aproximado, nada
   encontrado. Fica em amarelo, abaixo do número, e não em letra miúda de rodapé. */
.perg-avisos { list-style: none; margin-top: 12px; display: grid; gap: 6px; }
.perg-avisos li {
  font-size: var(--kv-t-apoio); line-height: 1.5; color: var(--kv-tinta-2);
  background: var(--kv-aviso-suave); border-left: 2px solid var(--kv-aviso);
  border-radius: 0 var(--kv-raio-selo) var(--kv-raio-selo) 0; padding: 7px 11px;
}
.perg-rodape { margin-top: 12px; display: flex; gap: 14px; align-items: center; }
.perg-rodape a { color: var(--kv-marca); text-decoration: none; font-size: var(--kv-t-apoio); }
.perg-rodape .onde { color: var(--kv-tinta-3); font-size: var(--kv-t-apoio); }
.perg-rodape a:hover { text-decoration: underline; }
.perg-erro { color: var(--kv-erro); font-size: var(--kv-t-apoio); line-height: 1.5; }
.perg-pensando { color: var(--kv-tinta-2); font-size: var(--kv-t-apoio); }
.perg-pensando::after {
  content: ''; display: inline-block; width: 5px; height: 5px; margin-left: 6px;
  border-radius: 50%; background: var(--kv-nav); animation: kv-pulsa 1s ease-in-out infinite;
}

@media (max-width: 720px) {
  .perg-linha { flex-wrap: wrap; }
  .perg-campo { flex: 1 1 100%; order: 2; }
  .perg-enviar { order: 3; width: 100%; }
  .perg-marca { order: 1; }
}

/* ---------- o que precisa de você hoje (D1) ----------
   Cartão mais baixo que o de módulo e com um traço de cor à esquerda: a lista é para
   ser varrida em dois segundos, e a cor diz o que custa dinheiro sem precisar de ícone
   nem de badge. */
.pend-grade {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(276px, 1fr)); gap: 12px;
  margin-bottom: 8px;
}
.pend {
  background: var(--kv-card); border: 1px solid var(--kv-linha); border-left: 3px solid var(--kv-linha-forte);
  border-radius: var(--kv-raio); padding: 13px 16px; color: var(--kv-tinta);
  display: grid; gap: 3px; align-content: start;
  transition: border-color var(--kv-normal), background var(--kv-normal);
  animation: kv-sobe var(--kv-entrada) var(--kv-curva) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.pend:hover { background: var(--kv-card-2); }
/* O cartão aberto ocupa a largura toda da grade: lista de produto pede linha inteira,
   não coluna estreita. */
.pend:has(.pend-lista:not([hidden])) { grid-column: 1 / -1; }
.pend.alta  { border-left-color: var(--kv-marca); }
.pend.alta:hover { border-left-color: var(--kv-marca); border-color: var(--kv-marca); }
.pend.media { border-left-color: var(--kv-aviso); }
.pend.baixa { border-left-color: var(--kv-linha-forte); }
.pend strong { font-size: var(--kv-t-corpo); font-weight: 600; line-height: 1.35; padding-right: 22px; }
.pend small { color: var(--kv-tinta-2); font-size: var(--kv-t-apoio); line-height: 1.45; }

/* ---------- o painel vivo: atualizar e sumir quando resolve ----------
   O cartão é uma pergunta ("ainda falta isso?"), então cada um tem o próprio botão de
   conferir. A seta fica discreta até o cartão receber o mouse: um ↻ forte em cada
   cartão viraria ruído numa grade de nove. No teclado ela aparece ao receber foco. */
.pend { position: relative; }
.pend-atualizar {
  position: absolute; top: 9px; right: 9px;
  background: none; border: 0; cursor: pointer; padding: 2px 5px; border-radius: var(--kv-raio-selo);
  font-size: 13px; line-height: 1; color: var(--kv-tinta-3); opacity: 0;
  transition: opacity .15s, color .15s, background .15s;
}
.pend:hover .pend-atualizar, .pend-atualizar:focus-visible { opacity: 1; }
/* No toque não existe "passar o mouse por cima": o botão de reconferir ficava invisível
   para sempre no celular. Onde o apontador é o dedo, ele aparece de saída (FL8). */
@media (hover: none) { .pend-atualizar { opacity: .55; } }
.pend-atualizar:hover { color: var(--kv-marca); background: var(--kv-papel-2); }
.pend-atualizar:disabled { cursor: default; }
.pend-conferindo .pend-atualizar { opacity: 1; animation: pend-gira .9s linear infinite; }
@keyframes pend-gira { to { transform: rotate(360deg); } }

/* Botão do cabeçalho: confere a lista inteira de uma vez. */
.inicio-grupo .pend-tudo {
  margin-left: 10px; vertical-align: middle;
  background: none; border: 1px solid var(--kv-linha-forte); border-radius: var(--kv-raio-p);
  color: var(--kv-tinta-2); font: inherit; font-size: var(--kv-t-apoio); font-weight: 500;
  text-transform: none; letter-spacing: 0; padding: 3px 10px; cursor: pointer;
}
.inicio-grupo .pend-tudo:hover { color: var(--kv-tinta); border-color: var(--kv-tinta-3); }
.inicio-grupo .pend-tudo:disabled { opacity: .6; cursor: default; }

/* Resolvido: o cartão DIZ que acabou antes de sair. Sumir em silêncio pareceria a tela
   perdendo coisa — e é justamente o momento em que a pessoa quer ver que funcionou. */
.pend-saindo {
  border-left-color: var(--kv-ok) !important; border-color: var(--kv-ok);
  animation: pend-sai .9s ease-in .5s forwards;
}
.pend-saindo strong, .pend-saindo small { color: var(--kv-tinta-2); }
.pend-feito {
  font-size: var(--kv-t-apoio); font-weight: 600; color: var(--kv-ok);
  background: var(--kv-ok-suave); border-radius: var(--kv-raio-selo); padding: 2px 9px;
}
@keyframes pend-sai {
  to { opacity: 0; transform: translateY(-6px); max-height: 0; padding-top: 0; padding-bottom: 0;
       margin-top: -12px; border-width: 0; overflow: hidden; }
}

/* Número que mudou sem sumir (de 21 para 18 prejuízos): um lampejo, e só. */
.pend-mudou { animation: pend-pisca 1.1s ease-out; }
@keyframes pend-pisca {
  0%, 22% { background: var(--kv-marca-suave); }
  100%    { background: var(--kv-card); }
}
/* Pendência que apareceu agora entra sem susto. */
.pend-nova { animation: pend-entra .4s ease-out; }
@keyframes pend-entra { from { opacity: 0; transform: translateY(-5px); } }

@media (prefers-reduced-motion: reduce) {
  .pend-saindo { animation: none; opacity: .45; }
  .pend-mudou, .pend-nova, .pend-conferindo .pend-atualizar { animation: none; }
}
/* ---------- busca geral (D2) ---------- */
.busca { position: relative; }
.busca-atalho {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-family: var(--kv-mono); font-size: 10px; color: var(--kv-tinta-3);
  border: 1px solid var(--kv-linha); border-radius: 4px; padding: 1px 5px; pointer-events: none;
}
.busca:focus-within .busca-atalho { display: none; }
.busca-resultados {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  background: var(--kv-card); border: 1px solid var(--kv-linha-forte); border-radius: var(--kv-raio);
  box-shadow: var(--kv-sombra-flutuante); max-height: 60vh; overflow-y: auto; padding: 5px;
}
.busca-secao {
  font-size: 10px; text-transform: uppercase; letter-spacing: .09em; font-weight: 600;
  color: var(--kv-tinta-2); padding: 8px 10px 4px;
}
.busca-item {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 8px 10px; border-radius: var(--kv-raio-p); cursor: pointer; text-decoration: none; color: var(--kv-tinta);
}
.busca-item:hover, .busca-item.foco { background: var(--kv-papel-2); }
.busca-item .t { display: grid; gap: 1px; min-width: 0; }
.busca-item strong { font-size: var(--kv-t-tabela); font-weight: 600; }
.busca-item small { font-size: var(--kv-t-apoio); color: var(--kv-tinta-2); }
.busca-item .onde { font-size: 10px; color: var(--kv-tinta-2); white-space: nowrap; }
.busca-vazio { padding: 14px 12px; font-size: var(--kv-t-apoio); color: var(--kv-tinta-2); }

.pend-acoes { display: flex; gap: 8px; align-items: center; margin-top: 9px; flex-wrap: wrap; }
.pend-btn {
  font: inherit; font-size: var(--kv-t-apoio); font-weight: 600; cursor: pointer;
  background: var(--kv-marca-cheia); color: #fff; border: 1px solid var(--kv-marca-cheia);
  border-radius: var(--kv-raio-p); padding: 5px 12px;
}
.pend-btn:hover { background: var(--kv-marca-forte); border-color: var(--kv-marca-forte); }
.pend-link {
  font-size: var(--kv-t-apoio); color: var(--kv-tinta-2); text-decoration: none;
  border-bottom: 1px solid var(--kv-linha-forte); padding-bottom: 1px;
}
.pend-link:hover { color: var(--kv-tinta); border-color: var(--kv-tinta-3); }

.pend-lista { margin-top: 12px; border-top: 1px solid var(--kv-linha); }
.pend-item {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  padding: 9px 0; border-bottom: 1px solid var(--kv-linha);
}
.pend-item:last-child { border-bottom: 0; }
/* Item que é produto abre o menu de ações no clique: a lista deixa de ser só relatório. */
.pend-item-prod { cursor: pointer; border-radius: var(--kv-raio-p); margin: 0 -8px; padding-left: 8px; padding-right: 8px; }
.pend-item-prod:hover { background: var(--kv-papel-2); }
.pend-item-prod:focus-visible { outline: 2px solid var(--kv-marca); outline-offset: -2px; }
.pend-item-texto { display: grid; gap: 1px; min-width: 0; }
.pend-item-texto strong { font-size: var(--kv-t-tabela); font-weight: 600; }
.pend-item-texto small { color: var(--kv-tinta-2); font-size: var(--kv-t-apoio); }
/* O "ciente" é um CHECK, e fica discreto de propósito: é a saída, não o caminho.
   Redondo e do tamanho do dedo (28px) para servir no celular; o que ele faz está no
   title e no aria-label, porque um ✓ sozinho não se explica a quem usa leitor de tela. */
.pend-ignorar { border: 1px solid var(--kv-linha-forte); background: transparent; color: var(--kv-tinta-2);
  border-radius: 50%; width: 28px; height: 28px; flex: none; display: inline-flex;
  align-items: center; justify-content: center; font-family: inherit; font-size: 14px;
  line-height: 1; cursor: pointer; }
.pend-ignorar:hover { color: var(--kv-ok, var(--kv-tinta)); border-color: currentColor; background: var(--kv-papel-2); }
.pend-ignorar:focus-visible { outline: 2px solid var(--kv-marca); outline-offset: 2px; }
/* a nota abre em PDF numa aba nova. É um LINK (não um botão) de propósito: dá para
   abrir com o meio, copiar o endereço, e o gatilho dos botões nunca o confunde. */
.pend-nota { text-decoration: none; display: inline-flex; align-items: center; white-space: nowrap;
  border: 1px solid var(--kv-marca); color: var(--kv-marca); background: transparent;
  border-radius: var(--kv-raio-p); padding: 5px 11px; font-size: 12px; font-weight: 600; }
.pend-nota:hover { background: var(--kv-marca-suave); }
.pend-mostrar { border: none; background: transparent; color: var(--kv-marca); font-family: inherit;
  font-size: 11.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; padding: 0 0 0 4px; }
.pend-voltou { display: inline-block; margin-left: 7px; font-size: 9.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--kv-aviso); background: var(--kv-aviso-suave); border-radius: var(--kv-raio-selo); padding: 1px 6px; }
/* O item resolvido dentro da lista some junto: deixá-lo riscado ali faria a pessoa
   reler o que já fez a cada passada de olho. */
.pend-item.resolvido { opacity: .5; animation: pend-sai-item .9s ease-in .3s forwards; }
@keyframes pend-sai-item {
  to { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; border-width: 0; overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .pend-item.resolvido { animation: none; }
}
.pend-resolver {
  font: inherit; font-size: var(--kv-t-apoio); font-weight: 600; cursor: pointer; white-space: nowrap;
  background: transparent; color: var(--kv-tinta); border: 1px solid var(--kv-linha-forte);
  border-radius: var(--kv-raio-p); padding: 5px 11px; flex: 0 0 auto;
}
.pend-resolver:hover { border-color: var(--kv-marca); color: var(--kv-marca); }
.pend-resolver:disabled { opacity: .6; cursor: default; }
.pend-carregando { color: var(--kv-tinta-2); font-size: var(--kv-t-apoio); padding: 10px 0; }
/* O que a conferência na plataforma encontrou — some sozinha depois de lida. */
.pend-conferido { display: block; margin-top: 8px; font-size: var(--kv-t-apoio); color: var(--kv-ok); }

.pend-limpo {
  color: var(--kv-ok); background: var(--kv-ok-suave); border-radius: var(--kv-raio-p);
  padding: 11px 14px; font-size: var(--kv-t-apoio); margin-bottom: 22px;
}

/* ---------- celular ---------- */
@media (max-width: 780px) {
  .sistema { flex-direction: column; }
  #menu {
    width: 100%; flex-direction: row; align-items: center; padding: 8px 10px;
    border-right: 0; border-bottom: 1px solid var(--kv-menu-linha);
  }
  .menu-topo { padding: 0 10px 0 2px; }
  .menu-topo .logo-konvem { width: 96px; }
  #menu-modulos { display: flex; overflow-x: auto; border: 0; padding: 0; gap: 2px; }
  #menu-modulos a { flex: none; padding: 8px 10px; white-space: nowrap; }
  .menu-grupo { display: none; }
  #menu-modulos a.ativo { box-shadow: inset 0 -2px 0 var(--kv-marca); border-radius: var(--kv-raio-p); }
  /* O NOME FICA (FL8). Antes ele sumia e o menu virava 15 ícones iguais em cinza, sem
     jeito de saber qual era qual a não ser abrindo. Agora o rótulo desce embaixo do
     ícone, pequeno, e a faixa continua rolando na horizontal. */
  #menu-modulos a { flex-direction: column; gap: 3px; align-items: center; padding: 7px 9px; min-width: 64px; }
  #menu-modulos a .nome {
    display: block; font-size: 10px; line-height: 1.15; max-width: 74px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center;
  }
  .menu-sair { margin: 0; padding: 8px 10px; border: 0; }
  .menu-sair .nome { display: none; }
  #topo { padding: 10px 14px; flex-wrap: wrap; }
  .topo-quem { display: none; }
  .inicio { padding: 18px 14px; }
  /* No celular o chip fica só com o ponto (o rótulo vive no aria-label) e a
     gaveta vira uma folha na largura da tela — ancorar num botão de 26px daria
     um painel espremido no canto. */
  .status-resumo { display: none; }
  .status-chip { padding: 6px; }
  .status-painel {
    position: fixed; top: auto; left: 8px; right: 8px; bottom: 8px;
    width: auto; max-height: 72vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- trabalho em andamento (barra da casca) ----------
   Fica sobre tudo, no rodapé: o Paulo troca de módulo e continua vendo o
   andamento. É a casca que executa, então a leitura não morre com o iframe. */
#tarefa-barra {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 60;
  width: min(460px, calc(100vw - 32px));
  display: flex; align-items: center; gap: 12px;
  background: var(--kv-card); border: 1px solid var(--kv-linha-forte);
  border-radius: var(--kv-raio); padding: 12px 14px;
  box-shadow: var(--kv-sombra-flutuante);
}
#tarefa-barra[hidden] { display: none; }
#tarefa-barra .t-info { flex: 1; min-width: 0; display: grid; gap: 2px; }
#tarefa-barra strong { font-size: var(--kv-t-apoio); font-weight: 600; }
#tarefa-barra span {
  font-size: var(--kv-t-rotulo); color: var(--kv-tinta-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#tarefa-barra .t-trilho {
  width: 108px; flex: none; height: 6px; border-radius: 3px;
  background: var(--kv-papel-2); overflow: hidden;
}
/* O avanço é por transform (roda na GPU), não por width: animar largura obriga o
   navegador a refazer o layout a cada quadro. */
#tarefa-barra .t-trilho i {
  display: block; height: 100%; width: 100%; background: var(--kv-marca);
  border-radius: 3px; transform: scaleX(0); transform-origin: left center;
  transition: transform .3s ease;
}
/* sem total conhecido (leitura no PC): faixa que anda sozinha */
#tarefa-barra .t-trilho.indefinido i {
  transform: scaleX(.38);
  animation: t-vaivem 1.5s ease-in-out infinite;
}
@keyframes t-vaivem {
  0%, 100% { transform: translateX(-100%) scaleX(.38); }
  50%      { transform: translateX(190%) scaleX(.38); }
}
#tarefa-barra button {
  flex: none; background: none; border: 0; color: var(--kv-tinta-3);
  font-size: 14px; cursor: pointer; padding: 2px 4px; line-height: 1;
}
#tarefa-barra button:hover { color: var(--kv-tinta); }
#tarefa-barra.concluida { border-color: var(--kv-ok); }
#tarefa-barra.concluida .t-trilho i { background: var(--kv-ok); transform: scaleX(1); }
#tarefa-barra.falhou { border-color: var(--kv-marca); }

/* Modo dedicado: usuário de um módulo só (ex.: pós-venda). Sem menu, sem busca; a marca e o
   botão de sair vão para o topo. */
.logo-topo, .topo-sair { display: none; }
.dedicado #menu, .dedicado #topo .busca { display: none; }
.dedicado .logo-topo { display: block; height: 26px; width: auto; }
.dedicado .topo-sair {
  display: inline-flex; align-items: center; margin-left: 6px; padding: 6px 12px; font: inherit; font-size: 12.5px;
  color: var(--kv-tinta-2); background: transparent; border: 1px solid var(--kv-linha-forte); border-radius: var(--kv-raio-p); cursor: pointer;
}
.dedicado .topo-sair:hover { color: var(--kv-tinta); border-color: var(--kv-tinta-2); }