/* ═══════════════════════════════════════════════════════════════════════
   KIT NAPOLEÃO · assinatura — o quadro onde a pessoa assina com o dedo

   ARQUIVO COMPARTILHADO — a fonte é "KIT NAPOLEAO - MARIA BRASILEIRA/css/".
   A cópia dentro de cada módulo é GERADA por `node sync.js`.

   Por que existe (04/09/2026): o mesmo quadro estava escrito duas vezes à
   mão — na Entrega de EPI do Arco do Triunfo e no EPI em trânsito do
   Estoque — e nos dois lugares saiu do mesmo jeito: 150px de altura dentro
   de um modal de 480px. Isso é uma tarja, não uma folha de assinatura:
   no computador sobra tela e o quadro continua minúsculo; no celular em pé
   não cabe uma assinatura de adulto.

   As três decisões daqui:

   1. ALTURA QUE ACOMPANHA A LARGURA (aspect-ratio), não 150px fixos. Num
      modal largo o quadro cresce junto; numa coluna estreita ele encolhe
      sem virar tarja.

   2. TELA CHEIA COM PAISAGEM. No celular, o botão "Tela cheia" tira o
      quadro de dentro do modal e joga na tela inteira. Deitando o aparelho
      a folha fica larga — que é o formato de uma assinatura. O aviso de
      girar só aparece em pé, e some sozinho ao girar.

   3. A FOLHA É SEMPRE BRANCA, inclusive no tema escuro. Assinatura é tinta
      em papel; um quadro cinza-escuro com traço preto é ilegível para quem
      assina e vira um PNG ruim no comprovante.
   ═══════════════════════════════════════════════════════════════════════ */

.n-assinar {
  --n-ass-papel: #FFFFFF;
  --n-ass-linha: #C7D2DE;
  --n-ass-tinta: #101A24;
  display: block;
}

/* ── Cabeçalho: rótulo à esquerda, ações à direita ────────────────────── */
.n-assinar-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 6px;
}
.n-assinar-rotulo {
  font-size: 13px; font-weight: 600; color: var(--cinza-texto);
  /* Sem `min-width:0` o rótulo não encolhe e empurra os botões para fora da
     tela num celular de 375px — o "limpar" saía cortado pela borda. */
  flex: 1 1 auto; min-width: 0; line-height: 1.3;
}
.n-assinar-acoes { display: flex; align-items: center; gap: 6px; flex: none; }
.n-assinar-acoes button {
  background: none; border: 1px solid var(--cinza-borda); color: var(--cinza-texto);
  border-radius: 999px; padding: 4px 11px; font-size: 12px; font-family: inherit;
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  transition: background var(--mov-rapido, 120ms), color var(--mov-rapido, 120ms);
}
.n-assinar-acoes button:hover { background: var(--hover); color: var(--preto); }
.n-assinar-acoes button[disabled] { opacity: .45; cursor: default; }
.n-assinar-acoes svg { width: 14px; height: 14px; }

/* ── A folha ──────────────────────────────────────────────────────────── */
.n-assinar-folha {
  position: relative;
  background: var(--n-ass-papel);
  border: 1.5px solid var(--cinza-borda);
  border-radius: var(--raio-sm, 10px);
  overflow: hidden;
  /* 3,2:1 é a proporção de uma linha de assinatura em papel. Com o mínimo
     de 132px, uma coluna estreita ainda dá espaço para o nome inteiro. */
  aspect-ratio: 3.2 / 1;
  min-height: 132px;
  cursor: crosshair;
  transition: border-color var(--mov-rapido, 120ms);
}
.n-assinar-folha:focus-within,
.n-assinar.assinando .n-assinar-folha { border-color: var(--dourado, #D9A426); }
.n-assinar.preenchido .n-assinar-folha { border-color: var(--verde, #0E7462); }

/* A linha de base e o ✗ ficam ATRÁS do canvas, no papel — não no traço.
   Assim não entram no PNG que vira prova do recebimento. */
.n-assinar-folha::before {
  content: ''; position: absolute; left: 8%; right: 8%; bottom: 26%;
  border-bottom: 1.5px dashed var(--n-ass-linha); pointer-events: none;
}
.n-assinar-folha::after {
  content: '✗'; position: absolute; left: 8%; bottom: 26%;
  transform: translate(-125%, 42%);
  color: var(--n-ass-linha); font-size: 18px; line-height: 1; pointer-events: none;
}
.n-assinar-folha canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  touch-action: none;             /* sem isto o dedo rola a página em vez de assinar */
  -webkit-user-select: none; user-select: none;
  display: block;
}

/* Marca d'água some no primeiro traço (a classe entra pelo JS). */
.n-assinar-dica {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #9FB0C2; font-size: 13px; pointer-events: none; text-align: center; padding: 0 16px;
  transition: opacity var(--mov-rapido, 120ms);
}
.n-assinar.preenchido .n-assinar-dica,
.n-assinar.assinando .n-assinar-dica { opacity: 0; }

.n-assinar-nota {
  display: block; font-size: 11.5px; color: var(--cinza-texto); margin-top: 6px; line-height: 1.45;
}

/* ── Tela cheia ───────────────────────────────────────────────────────────
   Sai de dentro do modal e ocupa a tela. z-index acima do overlay (500) e
   do aviso fixo do layout (1400), senão a barra de aviso do módulo aparece
   por cima da folha justamente na hora de assinar. */
.n-assinar.cheia {
  position: fixed; inset: 0; z-index: 1600;
  background: var(--cinza-fundo);
  display: flex; flex-direction: column;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  gap: 8px;
}
.n-assinar.cheia .n-assinar-topo { margin: 0; }
.n-assinar.cheia .n-assinar-folha {
  flex: 1; aspect-ratio: auto; min-height: 0; border-radius: var(--raio, 14px);
}
.n-assinar.cheia .n-assinar-nota { margin: 0; }
.n-assinar.cheia .n-assinar-rodape {
  display: flex; gap: 10px; justify-content: flex-end; align-items: center;
}
.n-assinar-rodape { display: none; }
.n-assinar-btn {
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  border-radius: var(--raio-sm, 10px); padding: 10px 18px; min-height: 42px;
  border: 1px solid var(--cinza-borda); background: var(--branco); color: var(--preto);
}
.n-assinar-btn.forte {
  background: var(--dourado, #D9A426); border-color: var(--dourado, #D9A426); color: #22190A;
}

/* O aviso de girar: só existe em tela cheia, e só enquanto o aparelho está
   em pé. Girar é a própria dispensa do aviso — não precisa de botão. */
.n-assinar-girar { display: none; }
.n-assinar.cheia .n-assinar-girar {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; line-height: 1.35; color: var(--laranja-aviso, #8D6106);
  background: var(--laranja-claro, #FBEFD6);
  border-radius: 14px; padding: 6px 12px; align-self: center;
  max-width: 100%; text-align: left;
}
.n-assinar.cheia .n-assinar-girar svg { width: 16px; height: 16px; flex: none; }
@media (orientation: landscape) {
  .n-assinar.cheia .n-assinar-girar { display: none; }
}

/* Enquanto alguém assina em tela cheia, o corpo não rola por trás. */
body.n-assinando-cheia { overflow: hidden; }
@media (max-width: 480px) {
  .n-assinar.cheia .n-assinar-rotulo { font-size: 12px; }
  .n-assinar.cheia .n-assinar-acoes button { padding: 4px 9px; font-size: 11.5px; }
}

/* ── Celular ──────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  /* Em pé a folha pode ser mais alta: é a tela inteira que sobra. */
  .n-assinar-folha { aspect-ratio: 2.4 / 1; min-height: 150px; }
}

/* Em tela deitada e baixa (celular deitado), o quadro embutido não pode
   comer a altura toda do modal — quem está assim já tem o botão de tela
   cheia, que é o caminho certo. */
@media (orientation: landscape) and (max-height: 520px) {
  .n-assinar-folha { min-height: 110px; }
}

/* ── Tema escuro: papel branco, moldura escura ────────────────────────── */
html[data-tema="escuro"] .n-assinar {
  --n-ass-papel: #FFFFFF;
  --n-ass-linha: #C7D2DE;
}

/* ── Impressão: a folha some, o traço não (o PNG é gerado à parte) ────── */
@media print { .n-assinar-acoes, .n-assinar-girar, .n-assinar-rodape { display: none !important; } }

/* ═══════════════════════════════════════════════════════════════════════
   CONFERÊNCIA DE ENTREGA — a tela que acompanha a assinatura

   A folha acima resolve o quadro; isto resolve o que está EM VOLTA dele.
   Os dois modais de entrega (Arco → Entrega de EPI, Estoque → Em trânsito)
   empilhavam lista de itens, campos e quadro numa coluna de 480px: no
   computador sobrava metade da tela vazia e a pessoa rolava para achar onde
   assinar — bem na hora em que ela está de pé, com o encarregado ao lado.

   Daqui para frente: DUAS COLUNAS a partir de 900px — confere à esquerda,
   assina à direita, sem rolar. Abaixo disso, empilha como antes.
   ═══════════════════════════════════════════════════════════════════════ */

.n-entrega { display: grid; gap: 20px; }
@media (min-width: 900px) {
  .n-entrega { grid-template-columns: minmax(0, 1fr) minmax(340px, .95fr); align-items: start; }
  /* A coluna da esquerda é a que rola quando a lista é longa; a direita
     (a assinatura) fica parada — é o ponto fixo da tela. */
  /* `overflow-x: hidden` explícito: declarar só o eixo Y faz o X computar
     'auto' pela especificação, e em Windows com "mostrar sempre as barras de
     rolagem" aparecia uma barra horizontal inútil no pé da coluna.
     `scrollbar-width: thin` deixa a vertical discreta no mesmo caso. */
  .n-entrega-confere {
    max-height: 58vh; overflow-y: auto; overflow-x: hidden;
    scrollbar-width: thin; padding-right: 6px;
  }
  .n-entrega-assina { position: sticky; top: 0; }
}

/* Título + explicação. Em linha quando cabe; empilhado quando não — com
   `display:flex` puro, a explicação era espremida numa coluna de 3 palavras
   ao lado do título no celular. */
.n-entrega-titulo {
  font-size: 13px; font-weight: 700; color: var(--preto);
  margin: 0 0 8px; line-height: 1.45;
}
.n-entrega-titulo small { font-weight: 400; color: var(--cinza-texto); }
@media (max-width: 620px) { .n-entrega-titulo small { display: block; } }

/* Cada item conferido item a item. Alvo grande de propósito: quem marca isto
   está em pé, no posto, com o celular numa mão. */
.n-item-confere {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 12px; border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-sm, 10px); margin-bottom: 8px;
  background: var(--branco);
  transition: border-color var(--mov-rapido, 120ms), background var(--mov-rapido, 120ms);
}
.n-item-confere:hover { border-color: #C3D0DE; }
.n-item-confere label {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 190px;
  cursor: pointer; font-size: 13.5px; line-height: 1.4; margin: 0;
}
.n-item-confere input[type="checkbox"] { width: 19px; height: 19px; flex: none; accent-color: var(--vermelho-alerta); }
/* O select do motivo é desenhado AQUI e não herdado do módulo: no Arco os
   campos só ganham estilo dentro de .field, e este vive solto na linha do
   item — sem isto ele sai como select cru do navegador. */
.n-item-confere select {
  max-width: 190px; font-size: 13px; font-family: inherit;
  padding: 7px 9px; border: 1px solid var(--cinza-borda); border-radius: 8px;
  background: var(--branco); color: var(--preto);
}
/* Marcado = "não chegou certo": o item vira exceção, e a moldura diz isso
   antes de qualquer texto. */
.n-item-confere.recusado { border-color: var(--vermelho-alerta); background: var(--vermelho-claro); }
.n-item-confere.recusado label { color: var(--vermelho-alerta); }

.n-entrega-vazio { font-size: 13px; color: var(--cinza-texto); padding: 10px 0; }