/* =============================================================
   Componente — indicadores de carregamento
   Barra fina no topo para requisições curtas, cobertura total
   apenas para bloqueios reais.
   ============================================================= */

@layer components {

  .loader-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-loader);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--surface-scrim);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--dur-normal) var(--ease-out),
      visibility var(--dur-normal) var(--ease-out);
  }

  .loader-overlay[data-open="true"] {
    opacity: 1;
    visibility: visible;
  }

  .loader-dots {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .loader-dots__dot {
    inline-size: 0.625rem;
    block-size: 0.625rem;
    border-radius: var(--radius-circle);
    background-color: var(--palette-white);
    animation: loader-bounce 1s var(--ease-in-out) infinite;
  }

  .loader-dots__dot:nth-child(2) { animation-delay: 150ms; }
  .loader-dots__dot:nth-child(3) { animation-delay: 300ms; }

  @keyframes loader-bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.65; }
    40% { transform: translateY(-0.5rem); opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) {

    .loader-dots__dot {
      animation: none;
      opacity: 1;
    }
  }

  /* Barra de progresso indeterminada no topo da janela */
  .net-progress {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: var(--z-loader);
    block-size: 3px;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-out);
  }

  .net-progress[data-active="true"] {
    opacity: 1;
  }

  .net-progress__bar {
    block-size: 100%;
    inline-size: 40%;
    background: linear-gradient(
      90deg,
      transparent,
      var(--palette-blue-300),
      transparent
    );
    animation: net-progress-slide 1.1s var(--ease-in-out) infinite;
  }

  @keyframes net-progress-slide {
    from { transform: translateX(-100%); }
    to { transform: translateX(350%); }
  }

  @media (prefers-reduced-motion: reduce) {

    .net-progress__bar {
      animation: none;
      inline-size: 100%;
      background: var(--palette-blue-500);
    }
  }
}