/**
 * Overlay de loading global (mesmo padrão visual que login — tema BD, gradientes, vidro fosco).
 */
.bna-app-loading-overlay {
  --login-ring-primary: var(--bna-primary);
  --login-ring-primary-dark: var(--bna-primary-dark, var(--bna-primary));
  --login-ring-primary-light: var(--bna-primary-light, var(--bna-primary));
  --login-ring-accent: var(--bna-accent);
  --login-ring-primary-rgb: var(--bna-primary-rgb);
  --login-arc-accent-start: color-mix(in srgb, var(--bna-accent) 42%, #ffffff 58%);
  --login-arc-accent-mid: color-mix(in srgb, var(--bna-accent) 78%, #ffffff 22%);
  --login-arc-accent-to-primary: color-mix(in srgb, var(--bna-accent) 35%, var(--bna-primary) 65%);
  --login-arc-primary-mid: color-mix(in srgb, var(--bna-primary) 55%, var(--bna-primary-light) 45%);
  --login-arc-primary-start: color-mix(in srgb, var(--bna-primary-dark) 55%, transparent);
  --login-arc-primary-end: color-mix(in srgb, var(--bna-primary-light) 45%, transparent);
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 1.5rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(8px) saturate(1.02);
  -webkit-backdrop-filter: blur(8px) saturate(1.02);
  animation: bna-app-loading-fadein 0.35s ease-out;
}
.bna-app-loading-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
      circle at 50% 40%,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 255, 255, 0.08) 52%,
      transparent 72%
    ),
    radial-gradient(
      circle at 50% 45%,
      rgba(var(--login-ring-primary-rgb), 0.08) 0%,
      transparent 45%
    );
}
.bna-app-loading-overlay.is-visible {
  display: flex;
}
@keyframes bna-app-loading-fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.bna-app-loading-stage {
  position: relative;
  z-index: 1;
  width: 11rem;
  height: 11rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bna-app-loading-arc {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.bna-app-loading-arc--outer {
  inset: 0;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 68deg,
    var(--login-arc-accent-start) 72deg,
    var(--login-arc-accent-mid) 118deg,
    var(--login-ring-accent) 158deg,
    var(--login-arc-accent-to-primary) 198deg,
    var(--login-arc-primary-mid) 242deg,
    var(--login-ring-primary-light) 278deg,
    var(--login-arc-primary-end) 302deg,
    transparent 308deg 360deg
  );
  -webkit-mask-image: radial-gradient(farthest-side, transparent 72%, #fff 72%, #fff 77.5%, transparent 77.5%);
  mask-image: radial-gradient(farthest-side, transparent 72%, #fff 72%, #fff 77.5%, transparent 77.5%);
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--login-ring-accent) 35%, transparent))
    drop-shadow(0 0 18px color-mix(in srgb, var(--login-ring-primary) 28%, transparent));
  animation-name: bna-app-loading-spin-cw;
  animation-duration: 1.2s;
}
.bna-app-loading-arc--inner {
  width: 78%;
  height: 78%;
  top: 11%;
  left: 11%;
  background: conic-gradient(
    from 180deg,
    transparent 0deg 52deg,
    var(--login-arc-primary-start) 56deg,
    var(--login-ring-primary-dark) 92deg,
    var(--login-ring-primary) 138deg,
    var(--login-arc-primary-mid) 182deg,
    var(--login-ring-primary-light) 228deg,
    color-mix(in srgb, var(--login-ring-primary-light) 72%, #ffffff 28%) 268deg,
    var(--login-arc-primary-end) 292deg,
    transparent 298deg 360deg
  );
  -webkit-mask-image: radial-gradient(farthest-side, transparent 68%, #fff 68%, #fff 76.5%, transparent 76.5%);
  mask-image: radial-gradient(farthest-side, transparent 68%, #fff 68%, #fff 76.5%, transparent 76.5%);
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--login-ring-primary-dark) 25%, transparent))
    drop-shadow(0 0 16px color-mix(in srgb, var(--login-ring-primary) 32%, transparent));
  animation-name: bna-app-loading-spin-ccw;
  animation-duration: 0.95s;
}
@keyframes bna-app-loading-spin-cw {
  to {
    transform: rotate(360deg);
  }
}
@keyframes bna-app-loading-spin-ccw {
  to {
    transform: rotate(-360deg);
  }
}
.bna-app-loading-logo-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.35rem;
  height: 5.35rem;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 2px 8px rgba(15, 23, 42, 0.12));
}
.bna-app-loading-img {
  max-width: 88%;
  max-height: 88%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.bna-app-loading-title {
  position: relative;
  z-index: 1;
  margin-top: 1.75rem;
  margin-bottom: 0.35rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 20px rgba(255, 255, 255, 0.5);
}
.bna-app-loading-sub {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 400;
  color: #475569;
  max-width: 22rem;
  line-height: 1.45;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}

html[data-mode='dark'] .bna-app-loading-overlay {
  background: rgba(15, 23, 42, 0.72);
}
html[data-mode='dark'] .bna-app-loading-overlay::before {
  background: radial-gradient(
      circle at 50% 40%,
      rgba(30, 41, 59, 0.55) 0%,
      rgba(15, 23, 42, 0.2) 52%,
      transparent 72%
    ),
    radial-gradient(
      circle at 50% 45%,
      rgba(var(--login-ring-primary-rgb), 0.12) 0%,
      transparent 45%
    );
}
html[data-mode='dark'] .bna-app-loading-title {
  color: #e2e8f0;
  text-shadow: 0 1px 0 rgba(15, 23, 42, 0.8);
}
html[data-mode='dark'] .bna-app-loading-sub {
  color: #94a3b8;
  text-shadow: none;
}
html[data-mode='dark'] .bna-app-loading-logo-wrap {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}