/* ==========================================================================
   GESTÃO DE PROCEDIMENTOS — painel, botões dos cartões e editor (03/11/2026, -d0)
   ==========================================================================
   Pedido do dono: fundo Preto Absoluto (#000000); criar/editar em Dourado
   Oficial (#FFD700) com Amarelo Caramelo (#D4A373); Excluir com contorno e
   ícone em Vermelho Alerta (#FF3333); vidro jateado PLANO, retangular, cantos
   de 8 a 12 px, nada orgânico; fonte sans-serif limpa; texto descritivo e
   trilha de auditoria JUSTIFICADOS.

   POR QUE ESTA FOLHA MORA EM /procedimentos/ (fora de /css/) E É LIGADA PELO
   PRÓPRIO procedimentos-gestao.js: a camada clara do ERP (css/tema-claro*.css)
   é GERADA das folhas de /css/; este painel é o MESMO nos dois temas, como o
   modal de assinatura (vidro-assinatura/), para quem vai alterar prontuário
   perceber que saiu do fluxo normal. <link> de mesma origem passa pela CSP.

   Escopo: tudo exige `#gp-overlay`, `.gp-btn` ou `.gp-chip`. Nada aqui
   alcança a aba da -da além dos dois botões que este módulo põe nos cartões.
   z-index do painel ABAIXO do modal de assinatura (2147483400), que abre por cima.
   ========================================================================== */

#gp-overlay,
.gp-btn,
.gp-chip {
  --gp-preto: #000000;
  --gp-ouro: #FFD700;
  --gp-caramelo: #D4A373;
  --gp-vermelho: #FF3333;
  --gp-liga: linear-gradient(135deg, #FFD700 0%, #EBC35A 50%, #D4A373 100%);
  --gp-texto: #F5F1E6;
  --gp-texto-suave: rgba(245, 241, 230, 0.68);
  --gp-fio: rgba(255, 215, 0, 0.28);
  --gp-fio-forte: rgba(255, 215, 0, 0.55);
  --gp-fio-caramelo: rgba(212, 163, 115, 0.42);
  --gp-vidro: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
  --gp-fosco: blur(18px) saturate(150%);
  --gp-canto-1: 12px;
  --gp-canto-2: 10px;
  --gp-canto-3: 8px;
  --gp-fonte: Inter, "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ───────────────────────── botões (também nos cartões da -da) ───────────────────────── */

.gp-btn {
  font-family: var(--gp-fonte);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--gp-texto);
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid var(--gp-fio-caramelo);
  border-radius: var(--gp-canto-3);
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  backdrop-filter: var(--gp-fosco);
  -webkit-backdrop-filter: var(--gp-fosco);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.gp-btn:hover:not(:disabled) { border-color: var(--gp-ouro); }
.gp-btn:focus-visible { outline: 2px solid var(--gp-ouro); outline-offset: 2px; }
.gp-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.gp-btn-ouro {
  color: var(--gp-ouro);
  border-color: var(--gp-fio-forte);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.12), rgba(212, 163, 115, 0.12)), rgba(0, 0, 0, 0.72);
}
.gp-btn-ouro:hover:not(:disabled) { background: linear-gradient(135deg, rgba(255, 215, 0, 0.22), rgba(212, 163, 115, 0.22)), rgba(0, 0, 0, 0.72); }

/* O botão mestre e os de criar: a liga dourada cheia, texto preto. */
.gp-btn-mestre {
  color: var(--gp-preto);
  background: var(--gp-liga);
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
}
.gp-btn-mestre:hover:not(:disabled) { filter: brightness(1.06); border-color: transparent; }

/* Excluir: contorno e ícone em Vermelho Alerta, fundo preto — elegante, não um bloco vermelho. */
.gp-btn-perigo {
  color: var(--gp-vermelho);
  border-color: rgba(255, 51, 51, 0.75);
  background: rgba(0, 0, 0, 0.78);
}
.gp-btn-perigo:hover:not(:disabled) { border-color: var(--gp-vermelho); background: rgba(255, 51, 51, 0.10); }

.gp-btn-mini { font-size: 0.78rem; padding: 0.35rem 0.6rem; }

.gp-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--gp-fonte);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--gp-texto);
  border: 1px solid var(--gp-pilar, var(--gp-caramelo));
  border-left-width: 4px;
  border-radius: var(--gp-canto-3);
  padding: 0.15rem 0.5rem;
  background: rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}
.gp-chip-ponto { font-size: 0.7rem; }

/* ───────────────────────── o painel ───────────────────────── */

body.gp-travado { overflow: hidden; }

#gp-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2.5vh 2vw;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--gp-fonte);
  color: var(--gp-texto);
}
#gp-overlay[hidden] { display: none; }

#gp-overlay .gp-painel {
  width: min(1280px, 100%);
  max-height: 95vh;
  display: flex;
  flex-direction: column;
  background: var(--gp-vidro), var(--gp-preto);
  border: 1px solid var(--gp-fio);
  border-radius: var(--gp-canto-1);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  backdrop-filter: var(--gp-fosco);
  -webkit-backdrop-filter: var(--gp-fosco);
  overflow: hidden;
}

#gp-overlay .gp-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.1rem 1.4rem 0.8rem;
  border-bottom: 1px solid var(--gp-fio);
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.08), rgba(212, 163, 115, 0.03) 60%, transparent);
}
#gp-overlay .gp-selo {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gp-ouro);
  border: 1px solid var(--gp-fio-forte);
  border-radius: var(--gp-canto-3);
  padding: 0.15rem 0.5rem;
}
#gp-overlay h2 { margin: 0.4rem 0 0.15rem; font-size: 1.3rem; font-weight: 700; color: var(--gp-texto); }
#gp-overlay .gp-sub { margin: 0; color: var(--gp-texto-suave); font-size: 0.86rem; text-align: justify; }
#gp-overlay .gp-fechar {
  font: inherit;
  color: var(--gp-texto);
  background: transparent;
  border: 1px solid var(--gp-fio-caramelo);
  border-radius: var(--gp-canto-3);
  width: 2.2rem;
  height: 2.2rem;
  cursor: pointer;
}
#gp-overlay .gp-fechar:hover { border-color: var(--gp-ouro); color: var(--gp-ouro); }

#gp-overlay .gp-abas {
  display: flex;
  gap: 0.4rem;
  padding: 0.6rem 1.4rem 0;
  border-bottom: 1px solid var(--gp-fio);
  flex-wrap: wrap;
}
#gp-overlay .gp-aba {
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--gp-texto-suave);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--gp-canto-3) var(--gp-canto-3) 0 0;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
}
#gp-overlay .gp-aba[aria-selected="true"] {
  color: var(--gp-ouro);
  border-color: var(--gp-fio);
  background: rgba(255, 215, 0, 0.06);
  box-shadow: inset 0 2px 0 var(--gp-ouro);
}

#gp-overlay .gp-corpo { padding: 1rem 1.4rem 1.4rem; overflow: auto; }

#gp-overlay .gp-barra {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.9rem;
}
#gp-overlay .gp-texto,
#gp-overlay .gp-trilha p,
#gp-overlay .gp-mudancas li { text-align: justify; line-height: 1.5; font-size: 0.86rem; margin: 0.2rem 0; }
#gp-overlay .gp-fraco { color: var(--gp-texto-suave); font-size: 0.8rem; }
#gp-overlay .gp-meta { color: var(--gp-texto-suave); font-size: 0.8rem; margin: 0.4rem 0; }
#gp-overlay .gp-vazio { color: var(--gp-texto-suave); font-size: 0.86rem; padding: 0.6rem 0; }
#gp-overlay .gp-erro { color: var(--gp-vermelho); font-size: 0.86rem; min-height: 1.1em; margin: 0.4rem 0; }
#gp-overlay .gp-nota { color: var(--gp-caramelo); font-size: 0.8rem; text-align: justify; margin: 0.4rem 0; }
#gp-overlay .gp-alerta { color: var(--gp-vermelho); }

/* filtros e formulários */
#gp-overlay .gp-filtros,
#gp-overlay .gp-form fieldset {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.6rem 0.8rem;
  align-items: end;
}
#gp-overlay .gp-filtros {
  padding: 0.8rem;
  margin-bottom: 0.8rem;
  border: 1px solid var(--gp-fio);
  border-radius: var(--gp-canto-2);
  background: var(--gp-vidro);
}
#gp-overlay .gp-form fieldset {
  margin: 0 0 0.8rem;
  padding: 0.8rem;
  border: 1px solid var(--gp-fio);
  border-radius: var(--gp-canto-2);
  background: var(--gp-vidro);
}
#gp-overlay .gp-form legend { color: var(--gp-ouro); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; padding: 0 0.3rem; }
#gp-overlay .gp-form fieldset > .gp-insumo-busca,
#gp-overlay .gp-form fieldset > #gp-ed-insumos,
#gp-overlay .gp-form fieldset > #gp-ed-lote-livre,
#gp-overlay .gp-form fieldset > .gp-retro-lista,
#gp-overlay .gp-form fieldset > .gp-nota,
#gp-overlay .gp-form fieldset > .gp-texto,
#gp-overlay .gp-form fieldset > .gp-caixa { grid-column: 1 / -1; }
#gp-overlay .gp-largo { grid-column: span 2; }
#gp-overlay .gp-campo {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--gp-texto-suave);
}
#gp-overlay .gp-campo input,
#gp-overlay .gp-campo select,
#gp-overlay .gp-campo textarea,
#gp-overlay .gp-insumo-busca input,
#gp-overlay .gp-qtd {
  font-family: var(--gp-fonte);
  font-size: 0.88rem;
  color: var(--gp-texto);
  background: rgba(0, 0, 0, 0.62);
  border: 1px solid var(--gp-fio-caramelo);
  border-radius: var(--gp-canto-3);
  padding: 0.45rem 0.55rem;
  min-width: 0;
}
#gp-overlay .gp-campo textarea { resize: vertical; text-align: justify; }
#gp-overlay .gp-campo :focus,
#gp-overlay .gp-qtd:focus,
#gp-overlay .gp-insumo-busca input:focus { outline: none; border-color: var(--gp-ouro); box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.18); }
#gp-overlay .gp-qtd { width: 6.5rem; }
#gp-overlay .gp-filtros-botoes,
#gp-overlay .gp-form-botoes { display: flex; gap: 0.5rem; justify-content: flex-end; flex-wrap: wrap; }
#gp-overlay .gp-form-botoes { margin-top: 0.4rem; }
#gp-overlay .gp-insumo-busca { display: flex; gap: 0.5rem; flex-wrap: wrap; }
#gp-overlay .gp-insumo-busca input { flex: 1 1 220px; }
#gp-overlay .gp-caixa { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.84rem; }
#gp-overlay .gp-caixa small { color: var(--gp-texto-suave); }

#gp-overlay .gp-retro {
  padding: 0.8rem;
  margin-bottom: 0.8rem;
  border: 1px solid var(--gp-fio-forte);
  border-radius: var(--gp-canto-2);
  background: rgba(255, 215, 0, 0.04);
}
#gp-overlay .gp-retro[hidden] { display: none; }
#gp-overlay .gp-retro-lista { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* tabela */
#gp-overlay .gp-tabela-rolagem { overflow-x: auto; border: 1px solid var(--gp-fio); border-radius: var(--gp-canto-2); }
#gp-overlay .gp-tabela { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
#gp-overlay .gp-tabela th {
  text-align: left;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gp-ouro);
  background: rgba(255, 215, 0, 0.05);
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--gp-fio);
  white-space: nowrap;
}
#gp-overlay .gp-tabela td { padding: 0.55rem 0.6rem; border-bottom: 1px solid rgba(255, 215, 0, 0.10); vertical-align: top; }
#gp-overlay .gp-tabela tr:last-child td { border-bottom: none; }
#gp-overlay .gp-linha-excluida td { opacity: 0.62; }
#gp-overlay .gp-acoes-linha { white-space: nowrap; }
#gp-overlay .gp-acoes-linha .gp-btn { margin: 0 0.2rem 0.25rem 0; }
#gp-overlay .gp-detalhe td { background: rgba(255, 255, 255, 0.025); }
#gp-overlay .gp-detalhe-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
#gp-overlay .gp-detalhe-grade h4 { margin: 0 0 0.3rem; color: var(--gp-caramelo); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
#gp-overlay .gp-lista { margin: 0; padding-left: 1.1rem; font-size: 0.84rem; }
#gp-overlay .gp-trilha { margin: 0; padding-left: 1.1rem; }
#gp-overlay .gp-trilha li { margin-bottom: 0.5rem; }
#gp-overlay .gp-paginas { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.7rem; }

#gp-overlay .gp-selo-sit,
#gp-overlay .gp-selo-retro,
#gp-overlay .gp-selo-alerta {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: var(--gp-canto-3);
  padding: 0.12rem 0.45rem;
  border: 1px solid;
  white-space: nowrap;
}
#gp-overlay .gp-sit-ativo { color: #6EE7A0; border-color: rgba(110, 231, 160, 0.5); }
#gp-overlay .gp-sit-excluido { color: var(--gp-vermelho); border-color: rgba(255, 51, 51, 0.6); }
#gp-overlay .gp-sit-pendente { color: var(--gp-caramelo); border-color: var(--gp-fio-caramelo); }
#gp-overlay .gp-selo-retro { color: var(--gp-ouro); border-color: var(--gp-fio-forte); margin-left: 0.3rem; }
#gp-overlay .gp-selo-alerta { color: var(--gp-vermelho); border-color: rgba(255, 51, 51, 0.6); margin-top: 0.25rem; }

/* catálogo */
#gp-overlay .gp-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0.8rem; }
#gp-overlay .gp-cartao {
  border: 1px solid var(--gp-fio);
  border-left: 4px solid var(--gp-pilar, var(--gp-caramelo));
  border-radius: var(--gp-canto-2);
  background: var(--gp-vidro), rgba(0, 0, 0, 0.6);
  padding: 0.8rem 0.9rem;
}
#gp-overlay .gp-cartao h3 { margin: 0.45rem 0 0.2rem; font-size: 1rem; color: var(--gp-texto); }
#gp-overlay .gp-cartao header { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
#gp-overlay .gp-cartao-inativo { opacity: 0.6; }
#gp-overlay .gp-cartao-acoes { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }

/* o resumo dentro do modal de assinatura (ele mora fora do painel) */
#assinatura-overlay .gp-mudancas { margin: 0.3rem 0 0; padding-left: 1.1rem; text-align: justify; }
#assinatura-overlay .gp-alerta { color: #FF3333; font-weight: 600; text-align: justify; }
#assinatura-overlay .gp-nota { color: #D4A373; text-align: justify; }

/* ───────────────────────── celular e tablet ───────────────────────── */
@media (max-width: 760px) {
  #gp-overlay { padding: 0; }
  #gp-overlay .gp-painel { max-height: 100vh; height: 100vh; border-radius: 0; }
  #gp-overlay .gp-topo, #gp-overlay .gp-corpo { padding-left: 0.9rem; padding-right: 0.9rem; }
  #gp-overlay .gp-barra { flex-direction: column; }
  #gp-overlay .gp-largo { grid-column: 1 / -1; }
  /* tabela vira cartões: cada célula com o nome da coluna em cima */
  #gp-overlay .gp-tabela thead { display: none; }
  #gp-overlay .gp-tabela, #gp-overlay .gp-tabela tbody, #gp-overlay .gp-tabela tr, #gp-overlay .gp-tabela td { display: block; width: 100%; }
  #gp-overlay .gp-tabela tr { border-bottom: 1px solid var(--gp-fio); padding: 0.4rem 0; }
  #gp-overlay .gp-tabela td[data-rotulo]::before {
    content: attr(data-rotulo);
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gp-ouro);
  }
  #gp-overlay .gp-acoes-linha { white-space: normal; }
}