/* Loading states: overlay global, barra de progresso, skeletons e botões. CSS puro, usa os tokens do tema. */
.app-progress { position: fixed; inset: 0 0 auto 0; z-index: 9999; height: 3px; pointer-events: none; }
.app-progress[hidden] { display: none; }
.app-progress__bar {
  height: 100%; width: 100%; transform-origin: left; transform: scaleX(0);
  background: var(--primary); box-shadow: 0 0 8px var(--primary);
  transition: transform .25s ease-out, opacity .3s ease;
}

.app-loading {
  position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: rgb(255 255 255 / .85); opacity: 0; transition: opacity .2s ease;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.dark .app-loading { background: rgb(2 6 23 / .8); }
.app-loading[hidden] { display: none; }
.app-loading.is-visible { opacity: 1; }
.app-loading__card { display: flex; max-width: 22rem; flex-direction: column; align-items: center; text-align: center; gap: .25rem; }
.app-loading__logo { border-radius: .875rem; animation: app-pulse 1.6s ease-in-out infinite; }
.app-loading__brand { margin-top: .5rem; font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: var(--muted-foreground); }
.app-loading__msg { font-size: 1rem; font-weight: 500; color: var(--foreground); }
.app-loading__hint { min-height: 1.25rem; font-size: .8125rem; color: var(--muted-foreground); }
.app-loading__shimmer {
  position: relative; margin-top: .5rem; height: 4px; width: 9rem; overflow: hidden; border-radius: 999px;
  background: color-mix(in oklab, var(--primary) 15%, transparent);
}
.app-loading__shimmer::after {
  content: ""; position: absolute; inset: 0; width: 45%; border-radius: inherit; background: var(--primary);
  animation: app-slide 1.2s ease-in-out infinite;
}

.ui-loader { display: inline-flex; vertical-align: middle; }
.ui-loader__ring {
  width: 1em; height: 1em; border-radius: 999px; border: 2px solid color-mix(in oklab, currentColor 25%, transparent);
  border-top-color: currentColor; animation: app-spin .8s linear infinite;
}

.skeleton {
  position: relative; overflow: hidden; border-radius: .375rem; background: var(--muted);
}
.skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--foreground) 8%, transparent), transparent);
  animation: app-shimmer 1.4s infinite;
}

button.is-loading, .ui-btn.is-loading { cursor: progress; opacity: .85; }
.is-loading .ui-loader { margin-right: .5rem; }
[aria-busy="true"] { cursor: progress; }

@keyframes app-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.92); opacity: .7; } }
@keyframes app-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(230%); } }
@keyframes app-shimmer { 100% { transform: translateX(100%); } }
@keyframes app-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .app-loading__logo, .app-loading__shimmer::after, .skeleton::after, .ui-loader__ring { animation: none; }
  .app-loading__shimmer::after { width: 100%; opacity: .5; }
  .app-progress__bar, .app-loading { transition: none; }
}