/* ══════════════════════════════════════════════════════════════════════════
   KONVÉM — SISTEMA DE DESIGN "NOTURNO"      (escolhido pelo Paulo, 18/08/2026)
   ══════════════════════════════════════════════════════════════════════════

   Escuro de verdade, no espírito do Linear e do GitHub, com a BARRA DE MENU do
   Kronos: grafite-azulado à esquerda, área de trabalho quase preta à direita.
   A separação entre "onde estou" e "o que estou fazendo" acontece por
   TEMPERATURA (azul contra neutro), não só por brilho — foi o que fez a
   combinação valer mais que qualquer um dos dois sozinho.

   Por que escuro: a Konvém é 24 horas e o sistema é usado de madrugada. Aí o
   escuro deixa de ser estilo e vira conforto de leitura.

   TRÊS REGRAS QUE SUSTENTAM O TEMA
   1. A superfície existe por ser MAIS CLARA que o fundo, nunca por ter sombra.
      Fundo #0d1117 → cartão #161b22 → elevado #1c2129. Sombra só em coisa que
      flutua de verdade (gaveta, menu, modal).
   2. O vermelho da marca CLAREIA no escuro. #c62f24 sobre preto fica abafado e
      vibra nas bordas; #e2564a é o mesmo vermelho com luz suficiente.
   3. Cor com significado é sagrada: verde é ok, âmbar é atenção, vermelho é
      perda ou erro. A navegação usa o VERDE-ÁGUA do Kronos justamente para não
      gastar o vermelho dizendo "você está aqui".

   COMO USAR NUM MÓDULO
   1. <link rel="stylesheet" href="/tema.css"> antes do <style> da tela;
   2. no :root do módulo, aponte as variáveis dele para os tokens daqui
      (--vermelho: var(--kv-marca)), em vez de reescrever a folha inteira.

   Os tokens têm prefixo --kv- para nunca colidirem com os nomes que cada
   módulo já usava (--bg, --card, --texto…).
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;   /* barra de rolagem, campos nativos e autofill acompanham */

  /* ---------- cor: a área de trabalho -------------------------------------
     Quatro degraus de superfície. O que separa um cartão do fundo é a luz que
     ele tem a mais, e uma linha de 1px quando precisa de recorte. */
  --kv-papel:        #0d1117;   /* fundo da área de trabalho */
  --kv-papel-2:      #161b22;   /* faixas, linhas zebradas, campos em repouso */
  --kv-card:         #161b22;   /* superfície de conteúdo */
  --kv-card-2:       #1c2129;   /* superfície sobre superfície (linha em hover) */

  /* Contraste medido contra o cartão (#161b22): mínimo 4.5:1 para texto normal.
     tinta 14.8:1 · tinta-2 5.9:1 · tinta-3 4.6:1 */
  --kv-tinta:        #e6edf3;   /* texto principal */
  --kv-tinta-2:      #9198a1;   /* apoio, rótulo, meta */
  --kv-tinta-3:      #7d8590;   /* placeholder, desabilitado */
  --kv-linha:        #21262d;   /* a linha que separa */
  --kv-linha-forte:  #30363d;

  /* Vermelho da marca, clareado para o escuro (o oficial é #CF3328).
     SÃO DOIS, e a razão é medida: como TEXTO sobre o cartão escuro o vermelho
     precisa clarear (#e2564a dá 4.6:1 sobre #161b22); como FUNDO de botão com
     letra branca ele precisa fazer o contrário, porque #e2564a com branco por
     cima dá só 3.71:1. O tom cheio (#b93225) devolve 5.9:1 e é o mesmo vermelho
     da marca com menos luz. Regra: marca pinta letra e traço; marca-cheia pinta
     superfície que leva texto branco. */
  --kv-marca:        #e2564a;
  --kv-marca-forte:  #f0705f;   /* hover de LETRA: no escuro clareia, não escurece */
  --kv-marca-cheia:  #b93225;   /* fundo de botão primário (com letra branca) */
  --kv-marca-cheia-forte: #cf3c2d;   /* hover do botão */
  --kv-marca-suave:  #2a1614;   /* fundo de selo e seleção */

  /* Estados. A cor é medida contra o fundo suave dela, que é escuro e de baixa
     saturação: no escuro, fundo de selo saturado brilha mais que o texto. */
  --kv-ok:           #3fb950;
  --kv-ok-suave:     #10241a;
  --kv-aviso:        #e3a008;
  --kv-aviso-suave:  #2a2010;
  --kv-erro:         #f07a6e;
  --kv-erro-suave:   #2a1614;

  /* ---------- tipografia -------------------------------------------------
     Uma família só (IBM Plex Sans) para tudo, como manda interface de trabalho.
     Mono para NÚMERO em coluna — é o que mantém valores alinhados. */
  --kv-fonte:  'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kv-mono:   'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;

  /* Escala fixa, degraus curtos como pede interface de trabalho.
       rótulo 10 → apoio 12 → tabela 13,5 → corpo 14,5 → seção 17 → título 23 */
  --kv-t-titulo:     23px;
  --kv-t-secao:      17px;
  --kv-t-corpo:    14.5px;
  --kv-t-tabela:   13.5px;
  --kv-t-apoio:      12px;
  --kv-t-rotulo:     10px;

  /* ---------- forma ------------------------------------------------------
     Raios pequenos. No escuro, quem separa é o degrau de luz e a linha. */
  --kv-raio:      8px;
  --kv-raio-p:    6px;
  --kv-raio-selo: 4px;
  --kv-sombra:    none;
  /* Só gaveta, menu flutuante e modal. No escuro a sombra é mais funda. */
  --kv-sombra-flutuante: 0 16px 48px rgba(1, 4, 9, .7);

  /* ---------- espaço ---------------------------------------------------- */
  --kv-gap:       20px;
  --kv-pad-card:  18px 20px;
  --kv-pad-tela:  26px 24px;

  /* ---------- menu lateral: a BARRA DO KRONOS ----------------------------
     Grafite-azulado contra o quase-preto da área de trabalho, e o verde-água
     marcando onde você está. É o acento de NAVEGAÇÃO; o vermelho fica livre
     para significar alerta, que é onde ele precisa ser visto. */
  /* O azul precisa APARECER contra a área de trabalho. No Kronos o menu escuro
     contrastava com uma tela clara; aqui os dois lados são escuros, então quem
     separa é a saturação: o menu é visivelmente mais azul e um degrau mais
     claro que o #0d1117 do corpo. Testado na tela: com #0f172a a divisão
     sumia. */
  --kv-menu-fundo:  #131c33;
  --kv-menu-tinta:  #9aa8c0;
  --kv-menu-ativo:  #f1f5f9;
  --kv-menu-on:     #1f2b4a;   /* fundo do item onde você está */
  --kv-menu-linha:  #222e4d;
  --kv-menu-fraco:  #8695b3;   /* rótulo de grupo — 4.5:1 sobre o azul do menu */
  --kv-nav:         #2dd4bf;   /* verde-água: o trilho e o ícone ativo */
  --kv-nav-suave:   rgba(45, 212, 191, .12);

  /* ---------- movimento ---------------------------------------------------
     Uma curva só para tudo que entra (saída rápida, chegada macia) e três
     durações. Interface de trabalho anima para explicar o que mudou de lugar,
     nunca para se exibir: nada acima de 420ms. */
  --kv-curva:     cubic-bezier(.16, 1, .3, 1);
  --kv-rapido:    120ms;
  --kv-normal:    220ms;
  --kv-entrada:   420ms;
}

/* ══════════════════════════════════════ base ══════════════════════════════ */
.kv, .kv-tela {
  font-family: var(--kv-fonte);
  font-size: var(--kv-t-corpo);
  line-height: 1.55;
  color: var(--kv-tinta);
  background: var(--kv-papel);
}

/* ══════════════════════════════════ tipografia ════════════════════════════ */
.kv h1 { font-size: var(--kv-t-titulo); font-weight: 600; letter-spacing: -.4px; line-height: 1.25; }
.kv h2 { font-size: var(--kv-t-secao);  font-weight: 600; letter-spacing: -.1px; }
.kv h3 { font-size: var(--kv-t-corpo);  font-weight: 600; }
.kv .kv-apoio { font-size: var(--kv-t-apoio); color: var(--kv-tinta-2); }
.kv .kv-rotulo {
  font-size: var(--kv-t-rotulo); text-transform: uppercase; letter-spacing: .09em;
  font-weight: 600; color: var(--kv-tinta-2);
}
.kv .kv-num { font-family: var(--kv-mono); font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════ superfícies ═══════════════════════════ */
.kv .kv-card {
  background: var(--kv-card);
  border: 1px solid var(--kv-linha);
  border-radius: var(--kv-raio);
  padding: var(--kv-pad-card);
}
.kv .kv-card + .kv-card { margin-top: var(--kv-gap); }

/* ══════════════════════════════════ tabela ════════════════════════════════ */
.kv table { width: 100%; border-collapse: collapse; }
.kv thead th {
  text-align: left; font-size: var(--kv-t-rotulo); text-transform: uppercase;
  letter-spacing: .08em; font-weight: 600; color: var(--kv-tinta-2);
  padding: 7px 8px; border-bottom: 1px solid var(--kv-linha);
}
.kv tbody td {
  padding: 9px 8px; border-bottom: 1px solid var(--kv-linha);
  font-size: var(--kv-t-tabela);
}
.kv tbody tr:last-child td { border-bottom: 0; }
.kv tbody tr:hover td { background: var(--kv-card-2); }
.kv td.kv-n, .kv th.kv-n { text-align: right; font-family: var(--kv-mono); font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════ controles ═════════════════════════════ */
.kv input, .kv select, .kv textarea {
  font: inherit; font-size: var(--kv-t-corpo); color: var(--kv-tinta);
  background: var(--kv-papel); border: 1px solid var(--kv-linha-forte);
  border-radius: var(--kv-raio-p); padding: 8px 11px; outline: none;
  transition: border-color var(--kv-rapido), box-shadow var(--kv-rapido);
}
.kv input:hover, .kv select:hover { border-color: var(--kv-tinta-3); }
.kv input:focus, .kv select:focus, .kv textarea:focus {
  border-color: var(--kv-nav);
  box-shadow: 0 0 0 3px var(--kv-nav-suave);   /* o anel de foco do Kronos */
}
.kv input::placeholder { color: var(--kv-tinta-3); }
.kv input:disabled, .kv select:disabled { background: var(--kv-papel-2); color: var(--kv-tinta-3); cursor: not-allowed; }

.kv button, .kv .kv-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: 8px 16px;
  transition: background var(--kv-rapido), border-color var(--kv-rapido), transform var(--kv-rapido);
}
.kv button:hover, .kv .kv-btn:hover { background: var(--kv-marca-cheia-forte); border-color: var(--kv-marca-cheia-forte); }
.kv button:active, .kv .kv-btn:active { transform: translateY(1px); }
.kv button:disabled { background: var(--kv-papel-2); border-color: var(--kv-linha); color: var(--kv-tinta-3); cursor: not-allowed; }
.kv .kv-btn-2 {  /* ação secundária: contorno, sem peso de cor */
  background: transparent; color: var(--kv-tinta); border-color: var(--kv-linha-forte);
}
.kv .kv-btn-2:hover { background: var(--kv-card-2); border-color: var(--kv-tinta-3); }

/* ══════════════════════════════════ selos ═════════════════════════════════ */
.kv .kv-selo {
  display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
  padding: 2px 8px; border-radius: var(--kv-raio-selo);
  background: var(--kv-marca-suave); color: var(--kv-marca);
}
.kv .kv-selo.ok     { background: var(--kv-ok-suave);    color: var(--kv-ok); }
.kv .kv-selo.aviso  { background: var(--kv-aviso-suave); color: var(--kv-aviso); }
.kv .kv-selo.neutro { background: var(--kv-papel-2);     color: var(--kv-tinta-2); }

/* ══════════════════════════════════ estados ═══════════════════════════════ */
.kv .kv-vazio {
  text-align: center; padding: 40px 20px; color: var(--kv-tinta-2);
  font-size: var(--kv-t-apoio); border: 1px dashed var(--kv-linha-forte);
  border-radius: var(--kv-raio);
}
.kv .kv-erro {
  background: var(--kv-erro-suave); border: 1px solid #4a2420; color: var(--kv-erro);
  border-radius: var(--kv-raio-p); padding: 10px 13px; font-size: var(--kv-t-apoio);
}
.kv .kv-barra { height: 6px; border-radius: 3px; background: var(--kv-papel-2); overflow: hidden; }
.kv .kv-barra > i { display: block; height: 100%; background: var(--kv-marca); border-radius: 3px; }

/* foco visível sempre — teclado é como se opera tabela grande */
.kv :focus-visible { outline: 2px solid var(--kv-nav); outline-offset: 2px; border-radius: 3px; }

/* ══════════════════════════════════════════════════════════════════════════
   MOVIMENTO — as peças que qualquer módulo pode usar
   Regra: animação explica o que mudou de lugar. Se não explica nada, sai.
   ══════════════════════════════════════════════════════════════════════════ */

/* Entrada em cascata: cartões e linhas chegam em ordem, com um atraso mínimo
   entre eles. O atraso é dado por --i (o módulo põe style="--i:3"). */
.kv-entra {
  animation: kv-sobe var(--kv-entrada) var(--kv-curva) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes kv-sobe { from { opacity: 0; transform: translateY(10px); } }

.kv-entra-lado {
  animation: kv-lado 320ms var(--kv-curva) backwards;
  animation-delay: calc(var(--i, 0) * 35ms);
}
@keyframes kv-lado { from { opacity: 0; transform: translateX(-8px); } }

/* Número que chega: um leve desfoque que assenta. Sugere contagem sem precisar
   contar de verdade (contar de verdade atrapalha quem só quer ler o valor). */
.kv-num-entra { animation: kv-numero 520ms var(--kv-curva) backwards; animation-delay: 120ms; }
@keyframes kv-numero { from { opacity: 0; filter: blur(6px); transform: translateY(4px); } }

/* Esqueleto: o lugar do conteúdo enquanto ele não chega. Melhor que "Carregando…"
   porque já mostra a FORMA do que vem. */
.kv-esqueleto {
  background: linear-gradient(90deg, var(--kv-papel-2) 25%, var(--kv-card-2) 50%, var(--kv-papel-2) 75%);
  background-size: 200% 100%;
  animation: kv-brilha 1.4s linear infinite;
  border-radius: var(--kv-raio-p); color: transparent !important;
}
@keyframes kv-brilha { to { background-position: -200% 0; } }

/* Cartão que responde ao ponteiro: sobe um fio de cabelo e ganha luz. */
.kv-hover {
  transition: transform var(--kv-normal) var(--kv-curva),
              border-color var(--kv-normal), background var(--kv-normal);
}
.kv-hover:hover { transform: translateY(-2px); border-color: var(--kv-linha-forte); background: var(--kv-card-2); }

/* Ponto que respira: para "vivo", "conectado", "rodando agora". */
.kv-pulso { animation: kv-pulsa 2s ease-in-out infinite; }
@keyframes kv-pulsa {
  0%, 100% { box-shadow: 0 0 0 0 rgba(63, 185, 80, .45); }
  50%      { box-shadow: 0 0 0 6px rgba(63, 185, 80, 0); }
}

/* Luz que percorre a linha em destaque: chama o olho sem piscar. */
.kv-varre { position: relative; overflow: hidden; }
.kv-varre::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent);
  transform: translateX(-100%);
  animation: kv-varrer 2.6s ease-in-out infinite 1s;
}
@keyframes kv-varrer { to { transform: translateX(100%); } }

/* Quem prefere menos movimento continua com o sistema inteiro funcionando:
   o que era animação vira aparecer, e nada fica escondido esperando um frame. */
@media (prefers-reduced-motion: reduce) {
  .kv *, .kv-tela * { animation: none !important; transition: none !important; }
  .kv-entra, .kv-entra-lado, .kv-num-entra { animation: none !important; opacity: 1 !important; transform: none !important; }
  .kv-esqueleto { animation: none !important; }
  .kv-varre::after { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   O KIT (DS1) — aprovado no painel de 20/08/2026
   ══════════════════════════════════════════════════════════════════════════

   POR QUE ESTE BLOCO EXISTE, se o tema já tinha tabela, botão e selo acima:
   aquelas regras vivem todas dentro de `.kv`, e nenhuma tela do sistema põe
   essa classe no corpo. O kit existia e não alcançava ninguém — por isso cada
   módulo reescreveu tudo do seu jeito, e o ERP passou a parecer vários
   sistemas diferentes.

   As classes daqui valem SOZINHAS, em qualquer tela, sem ancestral nenhum. Só
   classes, nunca seletor de elemento: `table` e `button` soltos brigariam com
   o CSS que cada módulo já tem, e a migração precisa poder ser feita uma tela
   por vez, sem quebrar as outras no caminho.

   Medidas, cores e fontes são as mesmas de sempre — o que muda é passar a
   existir UMA de cada peça.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- tabela ---------- */
.kv-tabela { width: 100%; border-collapse: collapse; font-size: var(--kv-t-tabela); }
.kv-tabela thead th {
  text-align: left; font-size: var(--kv-t-rotulo); font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em; color: var(--kv-tinta-2);
  padding: 8px 10px; border-bottom: 1px solid var(--kv-linha); white-space: nowrap;
}
.kv-tabela tbody td { padding: 9px 10px; border-bottom: 1px solid var(--kv-linha); }
.kv-tabela tbody tr:last-child td { border-bottom: 0; }
.kv-tabela tbody tr { transition: background var(--kv-rapido); }
.kv-tabela tbody tr:hover { background: var(--kv-card-2); }
.kv-tabela tr.clicavel { cursor: pointer; }
/* Dinheiro e quantidade em fonte de largura fixa, alinhados à direita: as casas
   ficam uma embaixo da outra e dá para comparar sem ler dígito por dígito. */
.kv-tabela .n, .kv-tabela th.n {
  text-align: right; font-family: var(--kv-mono); font-variant-numeric: tabular-nums;
}
.kv-tabela .apoio { color: var(--kv-tinta-2); font-size: var(--kv-t-apoio); }

/* ---------- botão: um desenho, três pesos ----------
   Cheio para a ação principal da tela (só uma por tela), contornado para as
   demais, contorno vermelho para o que é difícil de desfazer. */
.kv-acao {
  font: inherit; font-size: var(--kv-t-apoio); font-weight: 600; cursor: pointer;
  padding: 7px 14px; border-radius: var(--kv-raio-p);
  border: 1px solid var(--kv-linha-forte); background: transparent; color: var(--kv-tinta-2);
  transition: border-color var(--kv-rapido), color var(--kv-rapido), background var(--kv-rapido);
}
.kv-acao:hover { color: var(--kv-tinta); background: var(--kv-card-2); }
.kv-acao:active { transform: translateY(1px); }
.kv-acao:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.kv-acao.principal { background: var(--kv-marca-cheia); border-color: var(--kv-marca-cheia); color: #fff; }
.kv-acao.principal:hover { background: var(--kv-marca-cheia-forte); border-color: var(--kv-marca-cheia-forte); }
.kv-acao.perigo { border-color: var(--kv-erro); color: var(--kv-erro); }
.kv-acao.perigo:hover { background: var(--kv-erro-suave); color: var(--kv-erro); }
.kv-acao:focus-visible { outline: 2px solid var(--kv-nav); outline-offset: 2px; }

/* ---------- filtro: serve para plataforma, tipo de achado e aba ---------- */
.kv-filtros { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.kv-filtro {
  font: inherit; font-size: var(--kv-t-apoio); font-weight: 600; cursor: pointer;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--kv-linha); background: var(--kv-card); color: var(--kv-tinta-2);
  transition: border-color var(--kv-rapido), color var(--kv-rapido), background var(--kv-rapido);
}
.kv-filtro:hover { border-color: var(--kv-linha-forte); color: var(--kv-tinta); }
/* O escolhido acende em verde-água — a mesma cor que marca onde você está no menu. */
.kv-filtro.on, .kv-filtro[aria-selected="true"], .kv-filtro[aria-pressed="true"] {
  background: var(--kv-menu-fundo); border-color: rgba(45, 212, 191, .45); color: var(--kv-nav);
}
.kv-filtro:focus-visible { outline: 2px solid var(--kv-nav); outline-offset: 2px; }

/* ---------- busca ---------- */
.kv-busca {
  font: inherit; font-size: var(--kv-t-corpo); width: 100%; padding: 8px 12px;
  background: var(--kv-papel); color: var(--kv-tinta);
  border: 1px solid var(--kv-linha-forte); border-radius: var(--kv-raio-p);
}
.kv-busca::placeholder { color: var(--kv-tinta-3); }
.kv-busca:focus { outline: none; border-color: var(--kv-nav); background: var(--kv-papel-2); }

/* ---------- selos: a cor tem significado fixo no sistema inteiro ----------
   verde = o esperado · âmbar = atenção sem urgência · vermelho = custa dinheiro
   · cinza = informação neutra. */
.kv-estado {
  display: inline-block; font-size: var(--kv-t-rotulo); font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 8px; border-radius: var(--kv-raio-selo); white-space: nowrap;
}
.kv-estado.ok     { background: var(--kv-ok-suave);    color: var(--kv-ok); }
.kv-estado.aviso  { background: var(--kv-aviso-suave); color: var(--kv-aviso); }
.kv-estado.erro   { background: var(--kv-erro-suave);  color: var(--kv-erro); }
.kv-estado.neutro { background: var(--kv-papel-2);     color: var(--kv-tinta-2); }

/* ---------- vazio, carregando e erro ----------
   O vazio DIZ POR QUE está vazio; o erro sempre tem saída. */
.kv-nada {
  text-align: center; padding: 34px 20px; color: var(--kv-tinta-2);
  font-size: var(--kv-t-apoio); border: 1px dashed var(--kv-linha-forte);
  border-radius: var(--kv-raio); line-height: 1.6;
}
.kv-falha {
  background: var(--kv-erro-suave); border: 1px solid #4a2420; color: var(--kv-erro);
  border-radius: var(--kv-raio); padding: 12px 14px; font-size: var(--kv-t-apoio);
  display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.kv-falha .kv-acao { border-color: var(--kv-erro); color: var(--kv-erro); }
/* Linhas de esqueleto: o lugar do conteúdo enquanto ele não chega. */
.kv-carregando { display: grid; gap: 8px; padding: 4px 0; }
.kv-carregando > i { display: block; height: 12px; }

/* ---------- gaveta: 560px, Esc fecha, clique fora fecha ---------- */
.kv-gaveta-fundo {
  position: fixed; inset: 0; z-index: 9992; background: rgba(1, 4, 9, .6);
  animation: kv-aparece 160ms ease;
}
@keyframes kv-aparece { from { opacity: 0; } }
.kv-gaveta {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 9993;
  width: min(560px, 100vw); background: var(--kv-card);
  border-left: 1px solid var(--kv-linha-forte); box-shadow: var(--kv-sombra-flutuante);
  display: flex; flex-direction: column;
  animation: kv-entra-gaveta 200ms var(--kv-curva);
}
@keyframes kv-entra-gaveta { from { transform: translateX(100%); } }
.kv-gaveta > header {
  display: flex; align-items: flex-start; gap: 12px; justify-content: space-between;
  padding: 16px 18px 12px; border-bottom: 1px solid var(--kv-linha);
}
.kv-gaveta > header h3 { margin: 0; font-size: var(--kv-t-secao); font-weight: 600; }
.kv-gaveta > header .kv-sub { font-size: var(--kv-t-apoio); color: var(--kv-tinta-2); margin-top: 2px; }
.kv-gaveta > .conteudo { padding: 16px 18px; overflow-y: auto; flex: 1; }
.kv-gaveta > footer {
  padding: 12px 18px; border-top: 1px solid var(--kv-linha);
  display: flex; gap: 8px; justify-content: flex-end;
}
.kv-gaveta .fechar {
  font: inherit; background: none; border: 0; cursor: pointer; color: var(--kv-tinta-3);
  font-size: 20px; line-height: 1; padding: 2px 6px; border-radius: var(--kv-raio-selo);
}
.kv-gaveta .fechar:hover { color: var(--kv-tinta); background: var(--kv-card-2); }

@media (prefers-reduced-motion: reduce) {
  .kv-gaveta, .kv-gaveta-fundo { animation: none; }
}