/* Anel de carregamento das grids e do botão Consultar (shared/carregando.js). */
.carregando {
  min-height: 180px;
  display: grid;
  place-items: center;
}

.carregando__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.carregando__anel {
  width: 34px;
  height: 34px;
  border: 3px solid color-mix(in srgb, var(--c-primary) 14%, #fff);
  border-top-color: var(--c-primary);
  border-radius: 50%;
  animation: carregando-giro 0.75s linear infinite;
}

.carregando__mini {
  color: var(--c-primary);
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: carregando-giro 0.7s linear infinite;
}

/* Botão em carregamento: mesmo visual do botão normal, só sem aceitar clique e com o anel no lugar da lupa. */
[data-el='consultar'][aria-busy='true'] {
  pointer-events: none;
}

@keyframes carregando-giro {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .carregando__anel,
  .carregando__mini {
    animation-duration: 2s;
  }
}