/* ==========================================================================
   EXCLUSÃO ASSINADA — aparência do modal de senha do CRM
   Carregado DEPOIS de liquid-glass-crm.css (a ordem é o mecanismo).
   ==========================================================================

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

   Gêmeo da seção "MODAL DE ASSINATURA DIGITAL" de
   `clinica-erp/public/css/insumos.css`. As classes `ins-` são as mesmas de
   propósito: os dois modais nascem do mesmo `assinatura.js` e têm de poder ser
   comparados linha a linha. NÃO renomeie o prefixo — no ERP ele aparece 176
   vezes, e uma renomeação parcial não dá erro, só deixa a tela sem estilo.

   POR QUE ESTE ARQUIVO EXISTE, EM VEZ DE UMA SEÇÃO NOS QUE JÁ HAVIA

   1. `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. O que for escrito lá é desfeito no próximo deploy do site — sem
      erro, sem aviso.
   2. `css/liquid-glass-crm.css` é a camada do tema do CRM inteiro, e ela
      define `--raio: 26px`. Herdar esse raio daria ao modal a silhueta
      arredondada e orgânica do resto do app — o oposto do que foi pedido.
      Aqui os cantos são fixos em 8 · 10 · 12px, num token próprio, e o escopo
      `#assinatura-overlay` impede que eles vazem para qualquer outra tela.

   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 todo componente deste arquivo; não use valor literal fora
   deles. A única exceção é o fio de 3px do topo do cartão, cujas pontas usam
   2px — ele não é componente, é um filete decorativo, e os cantos que se veem
   nele são os 12px que ele herda do cartão. Mesma exceção, mesmo valor, no
   gêmeo do ERP: os dois arquivos têm de continuar comparáveis.
   ========================================================================== */

#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", e é a
     diferença deste modal para o resto do CRM. */
  --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, e nunca `var(--raio)`. */
  --ins-canto-1: 12px;   /* modal  */
  --ins-canto-2: 10px;   /* cartão, campo */
  --ins-canto-3: 8px;    /* botão, selo */

  /* 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-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, com Urbanist na frente porque é a família que o ecossistema já
   carrega e licencia (OFL) e que o index.html deste serviço já busca.
   `-apple-system` cobre o SF Pro em Mac/iOS; Inter e Roboto entram como as
   próximas da fila onde existirem. Declarada no overlay e herdada pelo cartão:
   os botões usam `font: inherit` e por isso não precisam repetir a pilha. */
#assinatura-overlay {
  font-family: "Urbanist", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ═══════════════════════════ O overlay ═══════════════════════════
   `#assinatura-overlay` é filho DIRETO de <body> e `position: fixed`. A classe
   `portal-overlay`, posta por `js/assinatura.js`, é 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 não respondeu ao clique. */

#assinatura-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  /* Acima do `.modal-backdrop` (50) e do `.toast` (80) de style.css: a
     assinatura é a camada que bloqueia, e quase toda exclusão é disparada de
     dentro do #modal de detalhe do lead — se ela não vencesse, o pedido de
     senha nasceria atrás da tela que o pediu. */
  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.js` abre e fecha por `overlay.hidden`, nunca por `style.display`
   nem por classe. Esta regra é o que faz o atributo valer contra o
   `display: grid` acima — sem ela o modal nasceria aberto e nunca fecharia. */
#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);
  /* Chapa opaca por baixo da película: com o fundo preto do overlay atrás, só
     o gradiente translúcido deixaria o texto do cartão sobre o texto da tela
     de trás em navegador sem `backdrop-filter`. */
  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: 3px, largura total, cantos acompanhando o
   raio do cartão (as margens negativas o levam até a borda do padding). */
.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;
}

/* `liquid-glass-crm.css` pinta `h1, h2, h3, h4` com a tinta do tema e o
   tracking de título; aqui o h2 é o rótulo do ato, não um título de tela.
   Vence pela ordem de carga (este arquivo vem depois), sem `!important`. */
.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ê aqui a MESMA frase 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; }

/* `min-height` reservado: sem ele, a linha de erro empurra os botões para
   baixo no instante em que aparece, e o clique de confirmar cai no cancelar. */
.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;
}

/* ═══════════════════════════ Botões ═══════════════════════════
   Escopados em `#assinatura-overlay` para não colidirem com `.btn` do
   style.css — os do modal são desenho próprio, não uma variante do botão do
   app. */

#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;
}

#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 do cartão, e é assim que ele vira o alvo óbvio do olho. */
#assinatura-overlay .ins-btn-ouro {
  background-image: var(--ins-liga);
  border-color: transparent;
  color: var(--ins-preto);
  font-weight: 700;
}
#assinatura-overlay .ins-btn-ouro:hover {
  background-image: linear-gradient(135deg, #FFE44D 0%, #E0B98C 100%);
}
/* Enquanto o servidor confere a senha o botão fica desabilitado; sem o
   `background-image` repetido aqui, o `background` transparente do `.ins-btn`
   voltaria a valer e o botão sumiria no meio da verificação. */
#assinatura-overlay .ins-btn-ouro:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background-image: var(--ins-liga);
}

/* ═══════════════════ Campo de senha ═══════════════════ */

#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;
}

#assinatura-overlay .ins-campo input {
  display: block;
  width: 100%;
  margin-top: 6px;
  font: inherit;
  font-size: 14px;
  /* O rótulo é caixa alta e espaçado; o valor digitado não pode herdar isso —
     senha em maiúsculas na tela engana quem confere o que digitou. */
  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;
}

#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);
}

/* Foco visível também para teclado puro: `liquid-glass.css` define um
   `:focus-visible` de acento próprio em `.lg-ambiente`, que não alcança este
   overlay (ele é o escape da regra de ambiente). */
#assinatura-overlay :focus-visible {
  outline: 2px solid var(--ins-ouro);
  outline-offset: 2px;
}

/* Telefone: o cartão ocupa a largura útil e os botões param de dividir a
   linha — num aparelho estreito, "Cancelar" e "Assinar e excluir" lado a lado
   ficam com alvo de toque pequeno demais para um ato irreversível. */
@media (max-width: 520px) {
  #assinatura-overlay { padding: 12px; }
  .ins-assinatura-cartao { padding: 20px 18px 18px; }
  .ins-assinatura-topo { margin: -20px -18px 16px; }
  .ins-assinatura-botoes { flex-direction: column-reverse; }
  #assinatura-overlay .ins-btn { width: 100%; padding: 11px 14px; }
}

/* Sem suporte a `backdrop-filter` (Firefox com a flag desligada, WebView
   antigo): o vidro vira chapa opaca. Sem isto o cartão fica translúcido de
   verdade e o texto da tela de trás atravessa o pedido de senha. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #assinatura-overlay { background: rgba(0, 0, 0, 0.94); }
  .ins-assinatura-cartao { background-color: #0a0a0a; }
}

/* Impressão: um pedido de senha não vai para o papel. */
@media print {
  #assinatura-overlay { display: none !important; }
}