/* ==========================================================================
   GESTÃO DE INSUMOS · ASSINATURA DIGITAL · TRILHA DE AUDITORIA
   Camada de aparência do módulo — carregada DEPOIS de liquid-glass-erp.css.
   ==========================================================================

   PALETA CORPORATIVA PEDIDA PELO DONO
     fundo    Preto Absoluto  #000000
     detalhe  Dourado Oficial #FFD700
     detalhe  Amarelo Caramelo #D4A373

   POR QUE ESTES TOKENS SÃO LOCAIS E NÃO ENTRAM NO `:root` DO NÚCLEO
   `css/liquid-glass.css` é ESPELHO: `assets/embutir-tema.mjs`, no repositório
   do site, reescreve esse arquivo aqui dentro a cada geração de tema. Token
   novo posto lá é desfeito no próximo deploy do site — sem erro, sem aviso —
   e, pior, mudar `--lg-acento` (hoje #CBA730) repintaria o ERP inteiro:
   financeiro, RH, gráficos, telas que ninguém mediu contra esta paleta.
   Por isso o dourado #FFD700 e o caramelo #D4A373 vivem AQUI, num arquivo que
   é só deste módulo, e alcançam só o que este módulo desenha.

   O fundo já é #000000 desde o tema (`--lg-abismo`) — nada a fazer ali.

   MORFOLOGIA: retangular, fina, cantos de 8 a 12px. Sem forma orgânica, sem
   `border-radius` em porcentagem, sem animação de silhueta. Os três degraus
   abaixo cobrem o módulo inteiro; não use valor literal fora deles.
   ========================================================================== */

.ins-modulo,
#assinatura-overlay {
  --ins-ouro: #FFD700;
  --ins-caramelo: #D4A373;
  --ins-preto: #000000;

  /* Mistura dos dois, para borda e botão. */
  --ins-liga: linear-gradient(135deg, var(--ins-ouro) 0%, var(--ins-caramelo) 100%);
  --ins-liga-suave: linear-gradient(135deg, rgba(255, 215, 0, 0.16) 0%, rgba(212, 163, 115, 0.16) 100%);

  /* Vidro jateado PLANO: película clara e uniforme, sem brilho especular
     rolando pela superfície — é o que separa "jateado" de "líquido". */
  --ins-vidro: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
  --ins-fosco: blur(18px) saturate(150%);

  --ins-borda: rgba(255, 215, 0, 0.28);
  --ins-borda-forte: rgba(255, 215, 0, 0.55);
  --ins-borda-caramelo: rgba(212, 163, 115, 0.34);

  /* Cantos: 8 · 10 · 12. Nada fora desta escala. */
  --ins-canto-1: 12px;   /* modal, painel */
  --ins-canto-2: 10px;   /* cartão, campo */
  --ins-canto-3: 8px;    /* botão, selo, aba */

  /* Sombra limpa: uma queda vertical e um fio de contorno. Sem halo colorido
     e sem sombra interna difusa — as duas coisas que fazem a peça "inchar". */
  --ins-sombra: 0 10px 30px rgba(0, 0, 0, 0.62), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  --ins-sombra-alta: 0 26px 70px rgba(0, 0, 0, 0.78), 0 1px 0 rgba(255, 255, 255, 0.06) inset;

  --ins-texto: #F5F1E6;
  --ins-texto-fraco: rgba(245, 241, 230, 0.62);
}

/* ─────────────────────────── Tipografia ───────────────────────────
   Sans-serif do sistema, com Urbanist na frente porque é a família que o
   ecossistema já carrega e licencia (OFL). "Quiche Sans" não aparece em
   lugar nenhum deste arquivo — e não tem por que voltar: nunca houve arquivo
   nem licença dela no projeto, em quatro pedidos seguidos.
   `-apple-system` cobre o SF Pro citado no pedido em Mac/iOS; Inter e Roboto
   entram como as próximas da fila onde existirem. */
.ins-modulo,
#assinatura-overlay {
  font-family: "Urbanist", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════ Painéis e cartões ═══════════════════════ */

.ins-modulo .ins-painel {
  background: var(--ins-vidro);
  background-color: rgba(10, 10, 10, 0.55);
  -webkit-backdrop-filter: var(--ins-fosco);
  backdrop-filter: var(--ins-fosco);
  border: 1px solid var(--ins-borda);
  border-radius: var(--ins-canto-1);
  box-shadow: var(--ins-sombra);
  padding: 18px 20px;
  margin-bottom: 16px;
}

.ins-modulo .ins-painel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.ins-modulo .ins-painel-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--ins-ouro);
}

/* Cartão de insumo — "retangular fino e elegante": a altura vem do conteúdo,
   a leitura vem do fio dourado à esquerda, não de moldura grossa. */
.ins-modulo .ins-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 12px;
}

.ins-modulo .ins-cartao {
  position: relative;
  background: var(--ins-vidro);
  background-color: rgba(10, 10, 10, 0.5);
  -webkit-backdrop-filter: var(--ins-fosco);
  backdrop-filter: var(--ins-fosco);
  border: 1px solid var(--ins-borda-caramelo);
  border-radius: var(--ins-canto-2);
  box-shadow: var(--ins-sombra);
  padding: 14px 16px 14px 18px;
  overflow: hidden;
  transition: border-color 200ms ease, transform 200ms ease;
}

/* O fio da liga ouro→caramelo. `::before` e não `border-left`, para o canto
   de 10px continuar redondo em cima e embaixo do fio. */
.ins-modulo .ins-cartao::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background-image: var(--ins-liga);
}

.ins-modulo .ins-cartao:hover {
  border-color: var(--ins-borda-forte);
  transform: translateY(-2px);
}

.ins-modulo .ins-cartao.ins-alerta { border-color: rgba(248, 113, 113, 0.5); }
.ins-modulo .ins-cartao.ins-alerta::before { background-image: linear-gradient(135deg, #f87171, #b91c1c); }

.ins-modulo .ins-cartao h3 {
  margin: 0 0 4px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ins-texto);
  letter-spacing: 0.01em;
}

.ins-modulo .ins-saldo {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ins-ouro);
}
.ins-modulo .ins-cartao.ins-alerta .ins-saldo { color: #f87171; }
.ins-modulo .ins-saldo small {
  font-size: 12px;
  font-weight: 400;
  color: var(--ins-texto-fraco);
  margin-left: 4px;
}

.ins-modulo .ins-meta {
  font-size: 11.5px;
  color: var(--ins-texto-fraco);
  line-height: 1.55;
  margin-top: 6px;
}

.ins-modulo .ins-acoes {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* ═══════════════════════ Abas de categoria ═══════════════════════ */

.ins-modulo .ins-abas {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.ins-modulo .ins-aba {
  background: transparent;
  border: 1px solid var(--ins-borda-caramelo);
  border-radius: var(--ins-canto-3);
  color: var(--ins-texto-fraco);
  padding: 8px 14px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}

.ins-modulo .ins-aba:hover { color: var(--ins-texto); border-color: var(--ins-borda-forte); }

.ins-modulo .ins-aba[aria-selected="true"] {
  color: var(--ins-preto);
  background-image: var(--ins-liga);
  border-color: transparent;
  font-weight: 700;
}

.ins-modulo .ins-aba .ins-conta {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 6px;
  border-radius: var(--ins-canto-3);
  background: rgba(255, 255, 255, 0.1);
  font-size: 11px;
}
.ins-modulo .ins-aba[aria-selected="true"] .ins-conta { background: rgba(0, 0, 0, 0.22); }

/* ═══════════════════════════ Botões ═══════════════════════════ */

.ins-modulo .ins-btn,
#assinatura-overlay .ins-btn {
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 8px 14px;
  border-radius: var(--ins-canto-3);
  border: 1px solid var(--ins-borda-caramelo);
  background: transparent;
  color: var(--ins-texto);
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.ins-modulo .ins-btn:hover,
#assinatura-overlay .ins-btn:hover {
  border-color: var(--ins-borda-forte);
  background: rgba(255, 215, 0, 0.08);
}

/* Confirmação: a liga ouro→caramelo cheia, texto preto. É o único elemento
   sólido da tela, e é assim que ele vira o alvo óbvio do olho. */
.ins-modulo .ins-btn-ouro,
#assinatura-overlay .ins-btn-ouro {
  background-image: var(--ins-liga);
  border-color: transparent;
  color: var(--ins-preto);
  font-weight: 700;
}
.ins-modulo .ins-btn-ouro:hover,
#assinatura-overlay .ins-btn-ouro:hover {
  background-image: linear-gradient(135deg, #FFE44D 0%, #E0B98C 100%);
}
.ins-modulo .ins-btn-ouro:disabled,
#assinatura-overlay .ins-btn-ouro:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background-image: var(--ins-liga);
}

.ins-modulo .ins-btn-perigo { border-color: rgba(248, 113, 113, 0.45); color: #fca5a5; }
.ins-modulo .ins-btn-perigo:hover { background: rgba(248, 113, 113, 0.12); border-color: #f87171; }

/* ═══════════════════ Campos de formulário ═══════════════════ */

.ins-modulo .ins-campo,
#assinatura-overlay .ins-campo {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--ins-texto-fraco);
  margin-bottom: 12px;
}

.ins-modulo .ins-campo input,
.ins-modulo .ins-campo select,
.ins-modulo .ins-campo textarea,
#assinatura-overlay .ins-campo input {
  display: block;
  width: 100%;
  margin-top: 6px;
  font: inherit;
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ins-texto);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--ins-borda-caramelo);
  border-radius: var(--ins-canto-2);
  padding: 10px 12px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.ins-modulo .ins-campo input:focus,
.ins-modulo .ins-campo select:focus,
.ins-modulo .ins-campo textarea:focus,
#assinatura-overlay .ins-campo input:focus {
  outline: none;
  border-color: var(--ins-ouro);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.14);
}

.ins-modulo .ins-campo select option { background-color: #0b0b0b; color: var(--ins-texto); }

.ins-modulo .ins-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0 14px;
}
.ins-modulo .ins-grade .ins-col-cheia { grid-column: 1 / -1; }

/* ═══════════ MODAL DE ASSINATURA DIGITAL ═══════════
   `#assinatura-overlay` é filho DIRETO de <body> e `position: fixed`.
   A classe `portal-overlay` no HTML é OBRIGATÓRIA: `liquid-glass.js` põe
   `.lg-ambiente` no <body> em runtime, e a regra do núcleo
   `.lg-ambiente > *:not(.portal-overlay)` rebaixa qualquer filho fixo para
   `position: relative`. Sem ela o modal não fica torto — ele deixa de ocupar
   espaço visível, e parece que a tela simplesmente não respondeu ao clique.
   Já derrubou o login deste ERP em produção uma vez. */

#assinatura-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  /* Acima do modal comum (50) e do toast (80): a assinatura é a camada que
     bloqueia, e nada pode ficar por cima dela. */
  z-index: 120;
  background: radial-gradient(130% 100% at 50% 0%, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.96));
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  animation: ins-entrar-fundo 180ms ease-out;
}

#assinatura-overlay[hidden] { display: none; }

@keyframes ins-entrar-fundo { from { opacity: 0; } to { opacity: 1; } }

/* Só opacidade e deslocamento — nada que mexa em `border-radius`, que é o que
   faria a peça "respirar" e ler como orgânica. */
@keyframes ins-entrar-cartao {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.ins-assinatura-cartao {
  width: 100%;
  max-width: 460px;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--ins-vidro);
  background-color: rgba(8, 8, 8, 0.72);
  -webkit-backdrop-filter: var(--ins-fosco);
  backdrop-filter: var(--ins-fosco);
  border: 1px solid var(--ins-borda-forte);
  border-radius: var(--ins-canto-1);
  box-shadow: var(--ins-sombra-alta);
  padding: 26px 26px 22px;
  animation: ins-entrar-cartao 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  #assinatura-overlay, .ins-assinatura-cartao { animation: none; }
}

/* Fio da liga no topo do cartão: 2px, largura total, cantos acompanhando. */
.ins-assinatura-topo {
  height: 3px;
  border-radius: 2px;
  background-image: var(--ins-liga);
  margin: -26px -26px 20px;
  border-top-left-radius: var(--ins-canto-1);
  border-top-right-radius: var(--ins-canto-1);
}

.ins-assinatura-selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ins-ouro);
  border: 1px solid var(--ins-borda);
  border-radius: var(--ins-canto-3);
  padding: 5px 10px;
  margin-bottom: 14px;
}

.ins-assinatura-cartao h2 {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.015em;
  color: var(--ins-texto);
}

.ins-assinatura-cartao > p {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ins-texto-fraco);
}

/* O resumo do que está sendo autorizado. Existe para que ninguém assine no
   escuro: a pessoa lê a frase exata que vai para a trilha de auditoria. */
.ins-assinatura-resumo {
  border: 1px solid var(--ins-borda-caramelo);
  border-left: 3px solid var(--ins-caramelo);
  border-radius: var(--ins-canto-2);
  background: var(--ins-liga-suave);
  padding: 12px 14px;
  margin-bottom: 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ins-texto);
}
.ins-assinatura-resumo strong { color: var(--ins-ouro); font-weight: 700; }

.ins-assinatura-quem {
  font-size: 11.5px;
  color: var(--ins-texto-fraco);
  margin-bottom: 14px;
  letter-spacing: 0.02em;
}
.ins-assinatura-quem b { color: var(--ins-caramelo); font-weight: 500; }

.ins-assinatura-erro {
  min-height: 18px;
  font-size: 12.5px;
  color: #fca5a5;
  margin: 4px 0 12px;
  line-height: 1.5;
}

.ins-assinatura-botoes {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* ═══════════ TRILHA DE AUDITORIA ═══════════ */

.ins-modulo .ins-log {
  border: 1px solid var(--ins-borda-caramelo);
  border-radius: var(--ins-canto-2);
  background: rgba(255, 255, 255, 0.022);
  padding: 13px 15px;
  margin-bottom: 9px;
}

.ins-modulo .ins-log-cabeca {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  font-size: 11.5px;
  color: var(--ins-texto-fraco);
}

.ins-modulo .ins-log-quem { color: var(--ins-ouro); font-weight: 700; font-size: 13px; }
.ins-modulo .ins-log-ip { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }

/*  ─────────────────────────────────────────────────────────────────────
    O BLOCO JUSTIFICADO — e o que impede os "rios"
    ─────────────────────────────────────────────────────────────────────
    Justificar texto é esticar os espaços entre palavras até a linha fechar
    na margem. Quando a coluna é estreita e as palavras são longas — e as
    daqui são: "Movimentação", "Assinatura", "quantidade_minima" — sobra
    pouco lugar para distribuir, os espaços incham, e os buracos de linhas
    vizinhas se alinham verticalmente. Esse é o rio.

    Três coisas resolvem, e as três precisam estar juntas:

    1. `hyphens: auto` — deixa a palavra QUEBRAR em vez de o espaço esticar.
       Só funciona porque `<html lang="pt-BR">` está no index.html: sem o
       idioma, o navegador não sabe onde pode separar em português e a
       propriedade não faz nada (falha silenciosa clássica).
       `hyphenate-limit-chars: 6 3 3` evita as separações feias de 1-2 letras.
    2. `max-width` em `ch` — a causa raiz é medida curta demais. ~78 caracteres
       dá espaço para o algoritmo distribuir; sem isso, hifenização sozinha
       ainda deixa rio numa coluna estreita.
    3. `text-align: last left` — a última linha nunca é esticada.

    O `@media` desliga a justificação no celular: abaixo de ~640px nenhuma
    medida é larga o bastante, e texto justificado em coluna estreita é pior
    do que texto alinhado à esquerda. Justificar é uma escolha tipográfica,
    não uma regra a cumprir em qualquer largura.                             */
.ins-modulo .ins-log-texto {
  margin: 0;
  max-width: 78ch;
  font-size: 13px;
  line-height: 1.72;
  color: var(--ins-texto);

  text-align: justify;
  text-align-last: left;
  text-justify: inter-word;

  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;

  overflow-wrap: break-word;
}

@media (max-width: 640px) {
  .ins-modulo .ins-log-texto { text-align: left; }
}

/* Selos de ação/origem: retângulos de 8px, sem pílula. */
.ins-modulo .ins-selo {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--ins-canto-3);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--ins-borda-caramelo);
  color: var(--ins-caramelo);
}
.ins-modulo .ins-selo-ouro { border-color: var(--ins-borda-forte); color: var(--ins-ouro); }
.ins-modulo .ins-selo-saida { border-color: rgba(248, 113, 113, 0.45); color: #fca5a5; }
.ins-modulo .ins-selo-entrada { border-color: rgba(45, 212, 191, 0.45); color: #5eead4; }
.ins-modulo .ins-selo-auto { border-color: rgba(148, 163, 184, 0.4); color: #cbd5e1; }

.ins-modulo .ins-vazio {
  text-align: center;
  color: var(--ins-texto-fraco);
  font-size: 13px;
  padding: 30px 16px;
}

.ins-modulo .ins-filtros {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.ins-modulo .ins-filtros .ins-campo { margin-bottom: 0; min-width: 140px; }

/*  Caixa de marcar dentro da barra de filtros: rótulo AO LADO, não em cima.
    `.ins-campo` empilha rótulo e controle (é o certo para input de texto), e
    aplicado a um checkbox isso produz um rótulo em caixa alta pairando sobre
    um quadradinho de 13px — desalinhado de tudo em volta. */
.ins-modulo .ins-campo-caixa {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: auto;
  white-space: nowrap;
  cursor: pointer;
  padding-bottom: 10px;
}
.ins-modulo .ins-campo-caixa input {
  width: auto;
  margin: 0;
  accent-color: var(--ins-ouro);
}

/*  `reges-datepicker.js` troca todo `<input type="date">` por um campo de três
    segmentos (DD / MM / AAAA) dentro de `.redp-campo` — ver a memória do
    componente. Ele nasce com largura de formulário, não de barra de filtro, e
    empurrava "De" e "Até" para uma linha só cada uma, com o dobro da altura
    dos outros filtros. Não é defeito do componente: é o mesmo campo em outro
    contexto. Aqui ele fica com a medida da barra.                          */
.ins-modulo .ins-filtros .redp-campo { max-width: 240px; }
.ins-modulo .ins-filtros .ins-campo:has(.redp-campo) { max-width: 240px; }

.ins-modulo .ins-paginacao {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  font-size: 12px;
  color: var(--ins-texto-fraco);
}

/* Ficha técnica dentro do formulário de protocolo. */
.ins-modulo .ins-ficha-linha {
  display: grid;
  grid-template-columns: 1fr 110px 40px;
  gap: 8px;
  align-items: end;
  margin-bottom: 8px;
}