/* ==========================================================
   Loading personalizado – ZK 9.6.5
   Estrutura gerada pelo ZK (zUtl.progressbox):
   <div id="zk_proc | zk_showBusy">
     [<div class="z-modal-mask"></div>]            (só com máscara)
     <div class="z-loading">
       <div class="z-loading-indicator">
         <span class="z-loading-icon"></span> Processando...

   O pin e a sombra são desenhados no ::before/::after do
   .z-loading-indicator e o ícone original do tema é ocultado,
   assim nada do tema do ZK desloca o pin.
   ========================================================== */

:root {
  --k2-loading-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%235A86F2'/%3E%3Cstop offset='1' stop-color='%233D68EE'/%3E%3C/linearGradient%3E%3CclipPath id='c'%3E%3Cpath d='M50 116C40 98 10 76 10 46a40 40 0 1 1 80 0c0 30-30 52-40 70z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath d='M50 116C40 98 10 76 10 46a40 40 0 1 1 80 0c0 30-30 52-40 70z' fill='url(%23g)'/%3E%3Cg clip-path='url(%23c)'%3E%3Cpath d='M4 52c20 12 40 10 54-2s26-24 40-22' fill='none' stroke='%23fff' stroke-width='9' stroke-linecap='round'/%3E%3Cpath d='M4 60c20 12 40 10 54-2s26-24 40-22' fill='none' stroke='%232F56C9' stroke-opacity='.18' stroke-width='6'/%3E%3C/g%3E%3C/svg%3E");
  --k2-loading-cor: #3D68EE;
  --k2-loading-fundo: rgba(255, 255, 255, .72);
}

/* ---------- 1) Máscara em tela cheia ---------- */
/* Requisições comuns (zk_proc) não têm máscara no ZK; o próprio
   container vira o overlay. Remova este bloco se preferir sem máscara. */
#zk_proc {
  position: fixed;
  inset: 0;
  z-index: 60000;
  background: var(--k2-loading-fundo);
  backdrop-filter: blur(2px);
  animation: k2-fade .2s ease-out;
}
/* Clients.showBusy(null, msg) já cria a .z-modal-mask */
.z-modal-mask {
  background: var(--k2-loading-fundo) !important;
  opacity: 1 !important;
  backdrop-filter: blur(2px);
}

/* ---------- 2) Caixa no centro exato da página ---------- */
.z-loading {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  z-index: 60001 !important;
}
/* showBusy(componente): centraliza sobre o componente */
.z-apply-loading {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.z-loading-indicator,
.z-apply-loading-indicator {
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--k2-loading-cor) !important;
  font: 600 14px/1.2 "Segoe UI", Roboto, Arial, sans-serif !important;
  text-align: center !important;
  letter-spacing: .3px;
  white-space: nowrap;
}

/* Ícone original do tema: oculto */
.z-loading-icon,
.z-apply-loading-icon {
  display: none !important;
}

/* ---------- 3) Pin animado ---------- */
.z-loading-indicator::before,
.z-apply-loading-indicator::before {
  content: "";
  order: -2;
  display: block;
  flex: none;
  width: 48px;
  height: 58px;
  margin-top: 14px; /* espaço para o pulo */
  background: var(--k2-loading-pin) center / contain no-repeat;
  transform-origin: 50% 100%;
  animation: k2-pin 1s cubic-bezier(.5, 0, .5, 1) infinite;
}
.z-loading-indicator::after,
.z-apply-loading-indicator::after {
  content: "";
  order: -1;
  display: block;
  flex: none;
  width: 28px;
  height: 7px;
  margin-top: -6px;
  border-radius: 50%;
  background: rgba(61, 104, 238, .28);
  animation: k2-sombra 1s cubic-bezier(.5, 0, .5, 1) infinite;
}

@keyframes k2-pin {
  0%, 100% { transform: translateY(0) scale(1.06, .94); }
  15%      { transform: translateY(0) scale(1, 1); }
  50%      { transform: translateY(-14px) scale(.98, 1.03); }
}
@keyframes k2-sombra {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(.55); opacity: .45; }
}
@keyframes k2-fade { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .z-loading-indicator::before, .z-loading-indicator::after,
  .z-apply-loading-indicator::before, .z-apply-loading-indicator::after { animation: none; }
}